@neo4j-ndl/react 4.18.8 → 4.18.10

package/lib/cjs/menu/stories/menu-custom-items.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-custom-items.story.js","sourceRoot":"","sources":["../../../../src/menu/stories/menu-custom-items.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAkE;AAClE,kDAAiE;AACjE,iCAAyC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,IAAA,cAAM,EAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,6DACE,wBAAC,YAAI,IACH,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,QAAQ,EACnB,SAAS,EAAC,wBAAwB,EAClC,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;oBACzB,SAAS,CAAC,KAAK,CAAC,CAAC;gBACnB,CAAC,EACD,cAAc,EAAE,EAAE,EAAE,EAAE,mBAAmB,EAAE,aAE3C,uBAAC,YAAI,CAAC,IAAI,IACR,KAAK,EACH,uBAAC,kBAAU,IAAC,OAAO,EAAC,SAAS,wCAAqC,GAEpE,EACF,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,iBAAiB,EAAC,SAAS,EAAC,oBAAoB,GAAG,EACpE,uBAAC,YAAI,CAAC,IAAI,IACR,KAAK,EAAC,iBAAiB,EACvB,SAAS,EAAC,oBAAoB,EAC9B,aAAa,EACX,uBAAC,+BAAuB,IAAC,SAAS,EAAC,oBAAoB,GAAG,GAE5D,EACF,wBAAC,YAAI,IAAC,KAAK,EAAC,cAAc,EAAC,WAAW,EAAC,yBAAyB,aAC9D,uBAAC,YAAI,CAAC,IAAI,IACR,KAAK,EAAC,iBAAiB,EACvB,SAAS,EAAC,oBAAoB,EAC9B,UAAU,EAAE,IAAI,GAChB,EACF,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,iBAAiB,EAAC,SAAS,EAAC,oBAAoB,GAAG,IAC/D,IACF,EACP,uBAAC,oBAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAC9B,GAAG,EAAE,QAAQ,mBACC,MAAM,mBACL,MAAM,sDAGR,IACd,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { FilledButton, Menu, Typography } from '@neo4j-ndl/react';\nimport { Square2StackIconOutline } from '@neo4j-ndl/react/icons';\nimport { useRef, useState } from 'react';\n\nconst Component = () => {\n  const anchorEl = useRef<HTMLButtonElement | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <>\n      <Menu\n        isOpen={isOpen}\n        anchorRef={anchorEl}\n        placement=\"bottom-start-top-start\"\n        onClose={(_event, _data) => {\n          setIsOpen(false);\n        }}\n        htmlAttributes={{ id: 'custom-items-menu' }}\n      >\n        <Menu.Item\n          title={\n            <Typography variant=\"display\">This can be any element</Typography>\n          }\n        />\n        <Menu.Item title=\"Danger action 1\" className=\"n-text-danger-text\" />\n        <Menu.Item\n          title=\"Danger action 2\"\n          className=\"n-text-danger-text\"\n          leadingVisual={\n            <Square2StackIconOutline className=\"n-text-danger-icon\" />\n          }\n        />\n        <Menu title=\"More actions\" description=\"Some additional actions\">\n          <Menu.Item\n            title=\"Danger action 3\"\n            className=\"n-text-danger-text\"\n            isDisabled={true}\n          />\n          <Menu.Item title=\"Danger action 4\" className=\"n-text-danger-text\" />\n        </Menu>\n      </Menu>\n      <FilledButton\n        onClick={() => setIsOpen(true)}\n        ref={anchorEl}\n        aria-haspopup=\"menu\"\n        aria-expanded={isOpen}\n      >\n        Open Menu (set with custom placement)\n      </FilledButton>\n    </>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"menu-custom-items.story.js","sourceRoot":"","sources":["../../../../src/menu/stories/menu-custom-items.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAoE;AACpE,kDAAiE;AACjE,iCAAyC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,IAAA,cAAM,EAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,6DACE,wBAAC,YAAI,IACH,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,QAAQ,EACnB,SAAS,EAAC,wBAAwB,EAClC,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;oBACzB,SAAS,CAAC,KAAK,CAAC,CAAC;gBACnB,CAAC,EACD,cAAc,EAAE,EAAE,EAAE,EAAE,mBAAmB,EAAE,aAE3C,uBAAC,YAAI,CAAC,IAAI,IACR,KAAK,EACH,uBAAC,kBAAU,IAAC,OAAO,EAAC,SAAS,wCAAqC,GAEpE,EACF,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,iBAAiB,EAAC,SAAS,EAAC,oBAAoB,GAAG,EACpE,uBAAC,YAAI,CAAC,IAAI,IACR,KAAK,EAAC,iBAAiB,EACvB,SAAS,EAAC,oBAAoB,EAC9B,aAAa,EACX,uBAAC,+BAAuB,IAAC,SAAS,EAAC,oBAAoB,GAAG,GAE5D,EACF,wBAAC,YAAI,IAAC,KAAK,EAAC,cAAc,EAAC,WAAW,EAAC,yBAAyB,aAC9D,uBAAC,YAAI,CAAC,IAAI,IACR,KAAK,EAAC,iBAAiB,EACvB,SAAS,EAAC,oBAAoB,EAC9B,UAAU,EAAE,IAAI,GAChB,EACF,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,iBAAiB,EAAC,SAAS,EAAC,oBAAoB,GAAG,IAC/D,IACF,EACP,uBAAC,sBAAc,IACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAC9B,GAAG,EAAE,QAAQ,mBACC,MAAM,sDAGL,IAChB,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DropdownButton, Menu, Typography } from '@neo4j-ndl/react';\nimport { Square2StackIconOutline } from '@neo4j-ndl/react/icons';\nimport { useRef, useState } from 'react';\n\nconst Component = () => {\n  const anchorEl = useRef<HTMLButtonElement | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <>\n      <Menu\n        isOpen={isOpen}\n        anchorRef={anchorEl}\n        placement=\"bottom-start-top-start\"\n        onClose={(_event, _data) => {\n          setIsOpen(false);\n        }}\n        htmlAttributes={{ id: 'custom-items-menu' }}\n      >\n        <Menu.Item\n          title={\n            <Typography variant=\"display\">This can be any element</Typography>\n          }\n        />\n        <Menu.Item title=\"Danger action 1\" className=\"n-text-danger-text\" />\n        <Menu.Item\n          title=\"Danger action 2\"\n          className=\"n-text-danger-text\"\n          leadingVisual={\n            <Square2StackIconOutline className=\"n-text-danger-icon\" />\n          }\n        />\n        <Menu title=\"More actions\" description=\"Some additional actions\">\n          <Menu.Item\n            title=\"Danger action 3\"\n            className=\"n-text-danger-text\"\n            isDisabled={true}\n          />\n          <Menu.Item title=\"Danger action 4\" className=\"n-text-danger-text\" />\n        </Menu>\n      </Menu>\n      <DropdownButton\n        isOpen={isOpen}\n        onClick={() => setIsOpen(true)}\n        ref={anchorEl}\n        aria-haspopup=\"menu\"\n      >\n        Open Menu (set with custom placement)\n      </DropdownButton>\n    </>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/menu/stories/menu-default.story.js

@@ -41,7 +41,7 @@ const Component = () => {
                         } }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Action 4", description: "Action 4 is awesome", onClick: () => {
                             alert('Action4');
                             setIsOpen(false);
-                        } })] }), (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsOpen(true), ref: anchorEl, "aria-haspopup": "menu", "aria-expanded": isOpen, children: "Open Menu" })] }));
+                        } })] }), (0, jsx_runtime_1.jsx)(react_1.DropdownButton, { isOpen: isOpen, onClick: () => setIsOpen(true), ref: anchorEl, "aria-haspopup": "menu", children: "Open Menu" })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=menu-default.story.js.map

package/lib/cjs/menu/stories/menu-default.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-default.story.js","sourceRoot":"","sources":["../../../../src/menu/stories/menu-default.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAsD;AACtD,iCAAyC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,IAAA,cAAM,EAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,6DACE,wBAAC,YAAI,IACH,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,QAAQ,EACnB,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;oBACzB,SAAS,CAAC,KAAK,CAAC,CAAC;gBACnB,CAAC,EACD,cAAc,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE,aAEtC,uBAAC,YAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,CAAC,SAAS,CAAC,CAAC;4BACjB,SAAS,CAAC,KAAK,CAAC,CAAC;wBACnB,CAAC,GACD,EACF,uBAAC,YAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,CAAC,SAAS,CAAC,CAAC;4BACjB,SAAS,CAAC,KAAK,CAAC,CAAC;wBACnB,CAAC,GACD,EACF,uBAAC,YAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,sBAAsB,EAClC,UAAU,EAAE,IAAI,EAChB,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,CAAC,SAAS,CAAC,CAAC;4BACjB,SAAS,CAAC,KAAK,CAAC,CAAC;wBACnB,CAAC,GACD,EACF,uBAAC,YAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,qBAAqB,EACjC,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,CAAC,SAAS,CAAC,CAAC;4BACjB,SAAS,CAAC,KAAK,CAAC,CAAC;wBACnB,CAAC,GACD,IACG,EAEP,uBAAC,oBAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAC9B,GAAG,EAAE,QAAQ,mBACC,MAAM,mBACL,MAAM,0BAGR,IACd,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { FilledButton, Menu } from '@neo4j-ndl/react';\nimport { useRef, useState } from 'react';\n\nconst Component = () => {\n  const anchorEl = useRef<HTMLButtonElement | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <>\n      <Menu\n        isOpen={isOpen}\n        anchorRef={anchorEl}\n        onClose={(_event, _data) => {\n          setIsOpen(false);\n        }}\n        htmlAttributes={{ id: 'default-menu' }}\n      >\n        <Menu.Item\n          title=\"Action 1\"\n          onClick={() => {\n            alert('Action1');\n            setIsOpen(false);\n          }}\n        />\n        <Menu.Item\n          title=\"Action 2\"\n          onClick={() => {\n            alert('Action2');\n            setIsOpen(false);\n          }}\n        />\n        <Menu.Item\n          title=\"Action 3\"\n          description=\"Action 3 is disabled\"\n          isDisabled={true}\n          onClick={() => {\n            alert('Action3');\n            setIsOpen(false);\n          }}\n        />\n        <Menu.Item\n          title=\"Action 4\"\n          description=\"Action 4 is awesome\"\n          onClick={() => {\n            alert('Action4');\n            setIsOpen(false);\n          }}\n        />\n      </Menu>\n\n      <FilledButton\n        onClick={() => setIsOpen(true)}\n        ref={anchorEl}\n        aria-haspopup=\"menu\"\n        aria-expanded={isOpen}\n      >\n        Open Menu\n      </FilledButton>\n    </>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"menu-default.story.js","sourceRoot":"","sources":["../../../../src/menu/stories/menu-default.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAwD;AACxD,iCAAyC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,IAAA,cAAM,EAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,6DACE,wBAAC,YAAI,IACH,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,QAAQ,EACnB,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;oBACzB,SAAS,CAAC,KAAK,CAAC,CAAC;gBACnB,CAAC,EACD,cAAc,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE,aAEtC,uBAAC,YAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,CAAC,SAAS,CAAC,CAAC;4BACjB,SAAS,CAAC,KAAK,CAAC,CAAC;wBACnB,CAAC,GACD,EACF,uBAAC,YAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,CAAC,SAAS,CAAC,CAAC;4BACjB,SAAS,CAAC,KAAK,CAAC,CAAC;wBACnB,CAAC,GACD,EACF,uBAAC,YAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,sBAAsB,EAClC,UAAU,EAAE,IAAI,EAChB,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,CAAC,SAAS,CAAC,CAAC;4BACjB,SAAS,CAAC,KAAK,CAAC,CAAC;wBACnB,CAAC,GACD,EACF,uBAAC,YAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,qBAAqB,EACjC,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,CAAC,SAAS,CAAC,CAAC;4BACjB,SAAS,CAAC,KAAK,CAAC,CAAC;wBACnB,CAAC,GACD,IACG,EAEP,uBAAC,sBAAc,IACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAC9B,GAAG,EAAE,QAAQ,mBACC,MAAM,0BAGL,IAChB,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DropdownButton, Menu } from '@neo4j-ndl/react';\nimport { useRef, useState } from 'react';\n\nconst Component = () => {\n  const anchorEl = useRef<HTMLButtonElement | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <>\n      <Menu\n        isOpen={isOpen}\n        anchorRef={anchorEl}\n        onClose={(_event, _data) => {\n          setIsOpen(false);\n        }}\n        htmlAttributes={{ id: 'default-menu' }}\n      >\n        <Menu.Item\n          title=\"Action 1\"\n          onClick={() => {\n            alert('Action1');\n            setIsOpen(false);\n          }}\n        />\n        <Menu.Item\n          title=\"Action 2\"\n          onClick={() => {\n            alert('Action2');\n            setIsOpen(false);\n          }}\n        />\n        <Menu.Item\n          title=\"Action 3\"\n          description=\"Action 3 is disabled\"\n          isDisabled={true}\n          onClick={() => {\n            alert('Action3');\n            setIsOpen(false);\n          }}\n        />\n        <Menu.Item\n          title=\"Action 4\"\n          description=\"Action 4 is awesome\"\n          onClick={() => {\n            alert('Action4');\n            setIsOpen(false);\n          }}\n        />\n      </Menu>\n\n      <DropdownButton\n        isOpen={isOpen}\n        onClick={() => setIsOpen(true)}\n        ref={anchorEl}\n        aria-haspopup=\"menu\"\n      >\n        Open Menu\n      </DropdownButton>\n    </>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/menu/stories/menu-in-dialog.story.js

@@ -32,7 +32,7 @@ const Component = () => {
     const handleClick = () => setIsModalOpen((prev) => !prev);
     const handleClose = () => setIsModalOpen(false);
     const handleMenuClick = () => setIsOpen((prev) => !prev);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "n-flex n-justify-center", children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: handleClick, children: "Open Dialog" }) }), (0, jsx_runtime_1.jsxs)(react_1.Dialog, { htmlAttributes: { id: 'modal-root' }, isOpen: isModalOpen, onClose: handleClose, children: [(0, jsx_runtime_1.jsx)(react_1.Dialog.Header, { children: "Menu in Dialog" }), (0, jsx_runtime_1.jsxs)(react_1.Dialog.Content, { children: [(0, jsx_runtime_1.jsx)("div", { className: "n-flex n-justify-center", children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: handleMenuClick, ref: anchorEl, "aria-haspopup": "menu", "aria-expanded": isOpen, children: "Open Menu" }) }), (0, jsx_runtime_1.jsxs)(react_1.Menu, { isOpen: isOpen, anchorRef: anchorEl, onClose: (_event, _data) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "n-flex n-justify-center", children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: handleClick, children: "Open Dialog" }) }), (0, jsx_runtime_1.jsxs)(react_1.Dialog, { htmlAttributes: { id: 'modal-root' }, isOpen: isModalOpen, onClose: handleClose, children: [(0, jsx_runtime_1.jsx)(react_1.Dialog.Header, { children: "Menu in Dialog" }), (0, jsx_runtime_1.jsxs)(react_1.Dialog.Content, { children: [(0, jsx_runtime_1.jsx)("div", { className: "n-flex n-justify-center", children: (0, jsx_runtime_1.jsx)(react_1.DropdownButton, { isOpen: isOpen, onClick: handleMenuClick, ref: anchorEl, "aria-haspopup": "menu", children: "Open Menu" }) }), (0, jsx_runtime_1.jsxs)(react_1.Menu, { isOpen: isOpen, anchorRef: anchorEl, onClose: (_event, _data) => {
                                     setIsOpen(false);
                                 }, portalTarget: document.getElementById('modal-root'), htmlAttributes: { id: 'dialog-menu' }, children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Undo", onClick: () => alert('Undo') }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Redo", isDisabled: true }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Cut", description: "Copy and remove" }), (0, jsx_runtime_1.jsxs)(react_1.Menu, { title: "Copy as", description: "Copying as something", icon: (0, jsx_runtime_1.jsx)(icons_1.Square2StackIconOutline, {}), children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Text" }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Video" }), (0, jsx_runtime_1.jsxs)(react_1.Menu, { title: "Image", children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: ".png" }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: ".jpg" }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: ".svg" }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: ".gif" })] }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Audio" }), (0, jsx_runtime_1.jsxs)(react_1.Menu, { title: "Share", children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Mail" }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Instagram" })] })] })] })] })] })] }));
 };

package/lib/cjs/menu/stories/menu-in-dialog.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-in-dialog.story.js","sourceRoot":"","sources":["../../../../src/menu/stories/menu-in-dialog.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Dialog, FilledButton, Menu } from '@neo4j-ndl/react';\nimport { Square2StackIconOutline } from '@neo4j-ndl/react/icons';\nimport { useRef, useState } from 'react';\n\nconst Component = () => {\n  const anchorEl = useRef<HTMLButtonElement | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleClick = () => setIsModalOpen((prev) => !prev);\n  const handleClose = () => setIsModalOpen(false);\n  const handleMenuClick = () => setIsOpen((prev) => !prev);\n\n  return (\n    <>\n      <div className=\"n-flex n-justify-center\">\n        <FilledButton onClick={handleClick}>Open Dialog</FilledButton>\n      </div>\n      <Dialog\n        htmlAttributes={{ id: 'modal-root' }}\n        isOpen={isModalOpen}\n        onClose={handleClose}\n      >\n        <Dialog.Header>Menu in Dialog</Dialog.Header>\n        <Dialog.Content>\n          <div className=\"n-flex n-justify-center\">\n            <FilledButton\n              onClick={handleMenuClick}\n              ref={anchorEl}\n              aria-haspopup=\"menu\"\n              aria-expanded={isOpen}\n            >\n              Open Menu\n            </FilledButton>\n          </div>\n          <Menu\n            isOpen={isOpen}\n            anchorRef={anchorEl}\n            onClose={(_event, _data) => {\n              setIsOpen(false);\n            }}\n            portalTarget={document.getElementById('modal-root')}\n            htmlAttributes={{ id: 'dialog-menu' }}\n          >\n            <Menu.Item title=\"Undo\" onClick={() => alert('Undo')} />\n            <Menu.Item title=\"Redo\" isDisabled />\n            <Menu.Item title=\"Cut\" description=\"Copy and remove\" />\n            <Menu\n              title=\"Copy as\"\n              description=\"Copying as something\"\n              icon={<Square2StackIconOutline />}\n            >\n              <Menu.Item title=\"Text\" />\n              <Menu.Item title=\"Video\" />\n              <Menu title=\"Image\">\n                <Menu.Item title=\".png\" />\n                <Menu.Item title=\".jpg\" />\n                <Menu.Item title=\".svg\" />\n                <Menu.Item title=\".gif\" />\n              </Menu>\n              <Menu.Item title=\"Audio\" />\n              <Menu title=\"Share\">\n                <Menu.Item title=\"Mail\" />\n                <Menu.Item title=\"Instagram\" />\n              </Menu>\n            </Menu>\n          </Menu>\n        </Dialog.Content>\n      </Dialog>\n    </>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"menu-in-dialog.story.js","sourceRoot":"","sources":["../../../../src/menu/stories/menu-in-dialog.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Dialog, DropdownButton, FilledButton, Menu } from '@neo4j-ndl/react';\nimport { Square2StackIconOutline } from '@neo4j-ndl/react/icons';\nimport { useRef, useState } from 'react';\n\nconst Component = () => {\n  const anchorEl = useRef<HTMLButtonElement | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleClick = () => setIsModalOpen((prev) => !prev);\n  const handleClose = () => setIsModalOpen(false);\n  const handleMenuClick = () => setIsOpen((prev) => !prev);\n\n  return (\n    <>\n      <div className=\"n-flex n-justify-center\">\n        <FilledButton onClick={handleClick}>Open Dialog</FilledButton>\n      </div>\n      <Dialog\n        htmlAttributes={{ id: 'modal-root' }}\n        isOpen={isModalOpen}\n        onClose={handleClose}\n      >\n        <Dialog.Header>Menu in Dialog</Dialog.Header>\n        <Dialog.Content>\n          <div className=\"n-flex n-justify-center\">\n            <DropdownButton\n              isOpen={isOpen}\n              onClick={handleMenuClick}\n              ref={anchorEl}\n              aria-haspopup=\"menu\"\n            >\n              Open Menu\n            </DropdownButton>\n          </div>\n          <Menu\n            isOpen={isOpen}\n            anchorRef={anchorEl}\n            onClose={(_event, _data) => {\n              setIsOpen(false);\n            }}\n            portalTarget={document.getElementById('modal-root')}\n            htmlAttributes={{ id: 'dialog-menu' }}\n          >\n            <Menu.Item title=\"Undo\" onClick={() => alert('Undo')} />\n            <Menu.Item title=\"Redo\" isDisabled />\n            <Menu.Item title=\"Cut\" description=\"Copy and remove\" />\n            <Menu\n              title=\"Copy as\"\n              description=\"Copying as something\"\n              icon={<Square2StackIconOutline />}\n            >\n              <Menu.Item title=\"Text\" />\n              <Menu.Item title=\"Video\" />\n              <Menu title=\"Image\">\n                <Menu.Item title=\".png\" />\n                <Menu.Item title=\".jpg\" />\n                <Menu.Item title=\".svg\" />\n                <Menu.Item title=\".gif\" />\n              </Menu>\n              <Menu.Item title=\"Audio\" />\n              <Menu title=\"Share\">\n                <Menu.Item title=\"Mail\" />\n                <Menu.Item title=\"Instagram\" />\n              </Menu>\n            </Menu>\n          </Menu>\n        </Dialog.Content>\n      </Dialog>\n    </>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/menu/stories/menu-in-popover.story.js

@@ -30,7 +30,7 @@ const Component = () => {
     const [isPopoverOpen, setIsPopoverOpen] = (0, react_2.useState)(false);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Menu, { isOpen: isOpen, anchorRef: anchorEl, onClose: (_event, _data) => {
                     setIsOpen(false);
-                }, htmlAttributes: { id: 'popover-menu' }, children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Action 1", onClick: () => alert('Action1') }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Action 2", onClick: () => alert('Action2') }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Action 3", description: "Action 3 is disabled", isDisabled: true, onClick: () => alert('Action3') }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Action 4", description: "Action 4 is awesome", onClick: () => alert('Action4') })] }), (0, jsx_runtime_1.jsxs)(react_1.Popover, { isOpen: isPopoverOpen, children: [(0, jsx_runtime_1.jsx)(react_1.Popover.Trigger, { children: (0, jsx_runtime_1.jsxs)(react_1.FilledButton, { onClick: () => setIsPopoverOpen(!isPopoverOpen), children: [isPopoverOpen ? 'Close' : 'Open', " Popover"] }) }), (0, jsx_runtime_1.jsx)(react_1.Popover.Content, { style: { height: 150, overflow: 'auto', width: 400 }, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", { children: "Scroll me to the bottom to open menu Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." }), (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsOpen(true), ref: anchorEl, "aria-haspopup": "menu", "aria-expanded": isOpen, children: "Open Context Menu" })] }) })] })] }));
+                }, htmlAttributes: { id: 'popover-menu' }, children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Action 1", onClick: () => alert('Action1') }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Action 2", onClick: () => alert('Action2') }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Action 3", description: "Action 3 is disabled", isDisabled: true, onClick: () => alert('Action3') }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Action 4", description: "Action 4 is awesome", onClick: () => alert('Action4') })] }), (0, jsx_runtime_1.jsxs)(react_1.Popover, { isOpen: isPopoverOpen, children: [(0, jsx_runtime_1.jsx)(react_1.Popover.Trigger, { children: (0, jsx_runtime_1.jsxs)(react_1.FilledButton, { onClick: () => setIsPopoverOpen(!isPopoverOpen), children: [isPopoverOpen ? 'Close' : 'Open', " Popover"] }) }), (0, jsx_runtime_1.jsx)(react_1.Popover.Content, { style: { height: 150, overflow: 'auto', width: 400 }, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", { children: "Scroll me to the bottom to open menu Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." }), (0, jsx_runtime_1.jsx)(react_1.DropdownButton, { isOpen: isOpen, onClick: () => setIsOpen(true), ref: anchorEl, "aria-haspopup": "menu", children: "Open Context Menu" })] }) })] })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=menu-in-popover.story.js.map

package/lib/cjs/menu/stories/menu-in-popover.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-in-popover.story.js","sourceRoot":"","sources":["../../../../src/menu/stories/menu-in-popover.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA+D;AAC/D,iCAAyC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,IAAA,cAAM,EAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE1D,OAAO,CACL,6DACE,wBAAC,YAAI,IACH,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,QAAQ,EACnB,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;oBACzB,SAAS,CAAC,KAAK,CAAC,CAAC;gBACnB,CAAC,EACD,cAAc,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE,aAEtC,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAAI,EAC/D,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAAI,EAC/D,uBAAC,YAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,sBAAsB,EAClC,UAAU,EAAE,IAAI,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAC/B,EACF,uBAAC,YAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,qBAAqB,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAC/B,IACG,EAEP,wBAAC,eAAO,IAAC,MAAM,EAAE,aAAa,aAC5B,uBAAC,eAAO,CAAC,OAAO,cACd,wBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,CAAC,aAAa,CAAC,aAC1D,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,gBACpB,GACC,EAClB,uBAAC,eAAO,CAAC,OAAO,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,YACnE,6DACE,+gBASI,EACJ,uBAAC,oBAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAC9B,GAAG,EAAE,QAAQ,mBACC,MAAM,mBACL,MAAM,kCAGR,IACd,GACa,IACV,IACT,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { FilledButton, Menu, Popover } from '@neo4j-ndl/react';\nimport { useRef, useState } from 'react';\n\nconst Component = () => {\n  const anchorEl = useRef<HTMLButtonElement | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const [isPopoverOpen, setIsPopoverOpen] = useState(false);\n\n  return (\n    <>\n      <Menu\n        isOpen={isOpen}\n        anchorRef={anchorEl}\n        onClose={(_event, _data) => {\n          setIsOpen(false);\n        }}\n        htmlAttributes={{ id: 'popover-menu' }}\n      >\n        <Menu.Item title=\"Action 1\" onClick={() => alert('Action1')} />\n        <Menu.Item title=\"Action 2\" onClick={() => alert('Action2')} />\n        <Menu.Item\n          title=\"Action 3\"\n          description=\"Action 3 is disabled\"\n          isDisabled={true}\n          onClick={() => alert('Action3')}\n        />\n        <Menu.Item\n          title=\"Action 4\"\n          description=\"Action 4 is awesome\"\n          onClick={() => alert('Action4')}\n        />\n      </Menu>\n\n      <Popover isOpen={isPopoverOpen}>\n        <Popover.Trigger>\n          <FilledButton onClick={() => setIsPopoverOpen(!isPopoverOpen)}>\n            {isPopoverOpen ? 'Close' : 'Open'} Popover\n          </FilledButton>\n        </Popover.Trigger>\n        <Popover.Content style={{ height: 150, overflow: 'auto', width: 400 }}>\n          <>\n            <p>\n              Scroll me to the bottom to open menu Lorem ipsum dolor sit amet,\n              consectetur adipiscing elit, sed do eiusmod tempor incididunt ut\n              labore et dolore magna aliqua. Ut enim ad minim veniam, quis\n              nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n              consequat. Duis aute irure dolor in reprehenderit in voluptate\n              velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n              occaecat cupidatat non proident, sunt in culpa qui officia\n              deserunt mollit anim id est laborum.\n            </p>\n            <FilledButton\n              onClick={() => setIsOpen(true)}\n              ref={anchorEl}\n              aria-haspopup=\"menu\"\n              aria-expanded={isOpen}\n            >\n              Open Context Menu\n            </FilledButton>\n          </>\n        </Popover.Content>\n      </Popover>\n    </>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"menu-in-popover.story.js","sourceRoot":"","sources":["../../../../src/menu/stories/menu-in-popover.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA+E;AAC/E,iCAAyC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,IAAA,cAAM,EAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE1D,OAAO,CACL,6DACE,wBAAC,YAAI,IACH,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,QAAQ,EACnB,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;oBACzB,SAAS,CAAC,KAAK,CAAC,CAAC;gBACnB,CAAC,EACD,cAAc,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE,aAEtC,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAAI,EAC/D,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAAI,EAC/D,uBAAC,YAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,sBAAsB,EAClC,UAAU,EAAE,IAAI,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAC/B,EACF,uBAAC,YAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,qBAAqB,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAC/B,IACG,EAEP,wBAAC,eAAO,IAAC,MAAM,EAAE,aAAa,aAC5B,uBAAC,eAAO,CAAC,OAAO,cACd,wBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,CAAC,aAAa,CAAC,aAC1D,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,gBACpB,GACC,EAClB,uBAAC,eAAO,CAAC,OAAO,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,YACnE,6DACE,+gBASI,EACJ,uBAAC,sBAAc,IACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAC9B,GAAG,EAAE,QAAQ,mBACC,MAAM,kCAGL,IAChB,GACa,IACV,IACT,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DropdownButton, FilledButton, Menu, Popover } from '@neo4j-ndl/react';\nimport { useRef, useState } from 'react';\n\nconst Component = () => {\n  const anchorEl = useRef<HTMLButtonElement | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const [isPopoverOpen, setIsPopoverOpen] = useState(false);\n\n  return (\n    <>\n      <Menu\n        isOpen={isOpen}\n        anchorRef={anchorEl}\n        onClose={(_event, _data) => {\n          setIsOpen(false);\n        }}\n        htmlAttributes={{ id: 'popover-menu' }}\n      >\n        <Menu.Item title=\"Action 1\" onClick={() => alert('Action1')} />\n        <Menu.Item title=\"Action 2\" onClick={() => alert('Action2')} />\n        <Menu.Item\n          title=\"Action 3\"\n          description=\"Action 3 is disabled\"\n          isDisabled={true}\n          onClick={() => alert('Action3')}\n        />\n        <Menu.Item\n          title=\"Action 4\"\n          description=\"Action 4 is awesome\"\n          onClick={() => alert('Action4')}\n        />\n      </Menu>\n\n      <Popover isOpen={isPopoverOpen}>\n        <Popover.Trigger>\n          <FilledButton onClick={() => setIsPopoverOpen(!isPopoverOpen)}>\n            {isPopoverOpen ? 'Close' : 'Open'} Popover\n          </FilledButton>\n        </Popover.Trigger>\n        <Popover.Content style={{ height: 150, overflow: 'auto', width: 400 }}>\n          <>\n            <p>\n              Scroll me to the bottom to open menu Lorem ipsum dolor sit amet,\n              consectetur adipiscing elit, sed do eiusmod tempor incididunt ut\n              labore et dolore magna aliqua. Ut enim ad minim veniam, quis\n              nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n              consequat. Duis aute irure dolor in reprehenderit in voluptate\n              velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n              occaecat cupidatat non proident, sunt in culpa qui officia\n              deserunt mollit anim id est laborum.\n            </p>\n            <DropdownButton\n              isOpen={isOpen}\n              onClick={() => setIsOpen(true)}\n              ref={anchorEl}\n              aria-haspopup=\"menu\"\n            >\n              Open Context Menu\n            </DropdownButton>\n          </>\n        </Popover.Content>\n      </Popover>\n    </>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/menu/stories/menu-nested.story.js

@@ -30,7 +30,7 @@ const Component = () => {
     const [isOpen, setIsOpen] = (0, react_2.useState)(false);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Menu, { isOpen: isOpen, anchorRef: anchorEl, onClose: (_event, _data) => {
                     setIsOpen(false);
-                }, htmlAttributes: { id: 'nested-menu' }, children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Undo", onClick: () => alert('Undo') }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Redo", isDisabled: true }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Cut", description: "Copy and remove" }), (0, jsx_runtime_1.jsxs)(react_1.Menu, { title: "Copy as", description: "Copying as something", icon: (0, jsx_runtime_1.jsx)(icons_1.Square2StackIconOutline, {}), children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Text" }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Video" }), (0, jsx_runtime_1.jsxs)(react_1.Menu, { title: "Image", children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: ".png" }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: ".jpg" }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: ".svg" }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: ".gif" })] }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Audio" })] }), (0, jsx_runtime_1.jsxs)(react_1.Menu, { title: "Share", children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Mail" }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Instagram" })] })] }), (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsOpen(true), ref: anchorEl, "aria-haspopup": "menu", "aria-expanded": isOpen, children: "Open Menu" })] }));
+                }, htmlAttributes: { id: 'nested-menu' }, children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Undo", onClick: () => alert('Undo') }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Redo", isDisabled: true }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Cut", description: "Copy and remove" }), (0, jsx_runtime_1.jsxs)(react_1.Menu, { title: "Copy as", description: "Copying as something", icon: (0, jsx_runtime_1.jsx)(icons_1.Square2StackIconOutline, {}), children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Text" }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Video" }), (0, jsx_runtime_1.jsxs)(react_1.Menu, { title: "Image", children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: ".png" }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: ".jpg" }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: ".svg" }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: ".gif" })] }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Audio" })] }), (0, jsx_runtime_1.jsxs)(react_1.Menu, { title: "Share", children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Mail" }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Instagram" })] })] }), (0, jsx_runtime_1.jsx)(react_1.DropdownButton, { isOpen: isOpen, onClick: () => setIsOpen(true), ref: anchorEl, "aria-haspopup": "menu", children: "Open Menu" })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=menu-nested.story.js.map

package/lib/cjs/menu/stories/menu-nested.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-nested.story.js","sourceRoot":"","sources":["../../../../src/menu/stories/menu-nested.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAsD;AACtD,kDAAiE;AACjE,iCAAyC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,IAAA,cAAM,EAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,6DACE,wBAAC,YAAI,IACH,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,QAAQ,EACnB,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;oBACzB,SAAS,CAAC,KAAK,CAAC,CAAC;gBACnB,CAAC,EACD,cAAc,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE,aAErC,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,GAAI,EACxD,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,EAAC,UAAU,SAAG,EACrC,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,KAAK,EAAC,WAAW,EAAC,iBAAiB,GAAG,EACvD,wBAAC,YAAI,IACH,KAAK,EAAC,SAAS,EACf,WAAW,EAAC,sBAAsB,EAClC,IAAI,EAAE,uBAAC,+BAAuB,KAAG,aAEjC,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,OAAO,GAAG,EAC3B,wBAAC,YAAI,IAAC,KAAK,EAAC,OAAO,aACjB,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,IACrB,EACP,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,OAAO,GAAG,IACtB,EACP,wBAAC,YAAI,IAAC,KAAK,EAAC,OAAO,aACjB,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,WAAW,GAAG,IAC1B,IACF,EACP,uBAAC,oBAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAC9B,GAAG,EAAE,QAAQ,mBACC,MAAM,mBACL,MAAM,0BAGR,IACd,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { FilledButton, Menu } from '@neo4j-ndl/react';\nimport { Square2StackIconOutline } from '@neo4j-ndl/react/icons';\nimport { useRef, useState } from 'react';\n\nconst Component = () => {\n  const anchorEl = useRef<HTMLButtonElement | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <>\n      <Menu\n        isOpen={isOpen}\n        anchorRef={anchorEl}\n        onClose={(_event, _data) => {\n          setIsOpen(false);\n        }}\n        htmlAttributes={{ id: 'nested-menu' }}\n      >\n        <Menu.Item title=\"Undo\" onClick={() => alert('Undo')} />\n        <Menu.Item title=\"Redo\" isDisabled />\n        <Menu.Item title=\"Cut\" description=\"Copy and remove\" />\n        <Menu\n          title=\"Copy as\"\n          description=\"Copying as something\"\n          icon={<Square2StackIconOutline />}\n        >\n          <Menu.Item title=\"Text\" />\n          <Menu.Item title=\"Video\" />\n          <Menu title=\"Image\">\n            <Menu.Item title=\".png\" />\n            <Menu.Item title=\".jpg\" />\n            <Menu.Item title=\".svg\" />\n            <Menu.Item title=\".gif\" />\n          </Menu>\n          <Menu.Item title=\"Audio\" />\n        </Menu>\n        <Menu title=\"Share\">\n          <Menu.Item title=\"Mail\" />\n          <Menu.Item title=\"Instagram\" />\n        </Menu>\n      </Menu>\n      <FilledButton\n        onClick={() => setIsOpen(true)}\n        ref={anchorEl}\n        aria-haspopup=\"menu\"\n        aria-expanded={isOpen}\n      >\n        Open Menu\n      </FilledButton>\n    </>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"menu-nested.story.js","sourceRoot":"","sources":["../../../../src/menu/stories/menu-nested.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAwD;AACxD,kDAAiE;AACjE,iCAAyC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,IAAA,cAAM,EAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,6DACE,wBAAC,YAAI,IACH,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,QAAQ,EACnB,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;oBACzB,SAAS,CAAC,KAAK,CAAC,CAAC;gBACnB,CAAC,EACD,cAAc,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE,aAErC,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,GAAI,EACxD,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,EAAC,UAAU,SAAG,EACrC,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,KAAK,EAAC,WAAW,EAAC,iBAAiB,GAAG,EACvD,wBAAC,YAAI,IACH,KAAK,EAAC,SAAS,EACf,WAAW,EAAC,sBAAsB,EAClC,IAAI,EAAE,uBAAC,+BAAuB,KAAG,aAEjC,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,OAAO,GAAG,EAC3B,wBAAC,YAAI,IAAC,KAAK,EAAC,OAAO,aACjB,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,IACrB,EACP,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,OAAO,GAAG,IACtB,EACP,wBAAC,YAAI,IAAC,KAAK,EAAC,OAAO,aACjB,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,WAAW,GAAG,IAC1B,IACF,EACP,uBAAC,sBAAc,IACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAC9B,GAAG,EAAE,QAAQ,mBACC,MAAM,0BAGL,IAChB,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DropdownButton, Menu } from '@neo4j-ndl/react';\nimport { Square2StackIconOutline } from '@neo4j-ndl/react/icons';\nimport { useRef, useState } from 'react';\n\nconst Component = () => {\n  const anchorEl = useRef<HTMLButtonElement | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <>\n      <Menu\n        isOpen={isOpen}\n        anchorRef={anchorEl}\n        onClose={(_event, _data) => {\n          setIsOpen(false);\n        }}\n        htmlAttributes={{ id: 'nested-menu' }}\n      >\n        <Menu.Item title=\"Undo\" onClick={() => alert('Undo')} />\n        <Menu.Item title=\"Redo\" isDisabled />\n        <Menu.Item title=\"Cut\" description=\"Copy and remove\" />\n        <Menu\n          title=\"Copy as\"\n          description=\"Copying as something\"\n          icon={<Square2StackIconOutline />}\n        >\n          <Menu.Item title=\"Text\" />\n          <Menu.Item title=\"Video\" />\n          <Menu title=\"Image\">\n            <Menu.Item title=\".png\" />\n            <Menu.Item title=\".jpg\" />\n            <Menu.Item title=\".svg\" />\n            <Menu.Item title=\".gif\" />\n          </Menu>\n          <Menu.Item title=\"Audio\" />\n        </Menu>\n        <Menu title=\"Share\">\n          <Menu.Item title=\"Mail\" />\n          <Menu.Item title=\"Instagram\" />\n        </Menu>\n      </Menu>\n      <DropdownButton\n        isOpen={isOpen}\n        onClick={() => setIsOpen(true)}\n        ref={anchorEl}\n        aria-haspopup=\"menu\"\n      >\n        Open Menu\n      </DropdownButton>\n    </>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/menu/stories/menu-placements.story.js

@@ -41,7 +41,7 @@ const Component = () => {
                         } }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Action 4", description: "Action 4 is awesome", onClick: () => {
                             alert('Action4');
                             setIsOpen(false);
-                        } }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { id: "action_5", title: "Action 5", description: "Action 5 does not close the menu" })] }), (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsOpen(true), ref: anchorEl, "aria-haspopup": "menu", "aria-expanded": isOpen, children: "Open Menu" })] }));
+                        } }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { id: "action_5", title: "Action 5", description: "Action 5 does not close the menu" })] }), (0, jsx_runtime_1.jsx)(react_1.DropdownButton, { isOpen: isOpen, onClick: () => setIsOpen(true), ref: anchorEl, "aria-haspopup": "menu", children: "Open Menu" })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=menu-placements.story.js.map

package/lib/cjs/menu/stories/menu-placements.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-placements.story.js","sourceRoot":"","sources":["../../../../src/menu/stories/menu-placements.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAsD;AACtD,iCAAyC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,IAAA,cAAM,EAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,6DACE,wBAAC,YAAI,IACH,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,QAAQ,EACnB,SAAS,EAAC,yBAAyB,EACnC,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;oBACzB,SAAS,CAAC,KAAK,CAAC,CAAC;gBACnB,CAAC,EACD,cAAc,EAAE,EAAE,EAAE,EAAE,iBAAiB,EAAE,aAEzC,uBAAC,YAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,CAAC,SAAS,CAAC,CAAC;4BACjB,SAAS,CAAC,KAAK,CAAC,CAAC;wBACnB,CAAC,GACD,EACF,uBAAC,YAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,CAAC,SAAS,CAAC,CAAC;4BACjB,SAAS,CAAC,KAAK,CAAC,CAAC;wBACnB,CAAC,GACD,EACF,uBAAC,YAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,sBAAsB,EAClC,UAAU,EAAE,IAAI,EAChB,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,CAAC,SAAS,CAAC,CAAC;4BACjB,SAAS,CAAC,KAAK,CAAC,CAAC;wBACnB,CAAC,GACD,EACF,uBAAC,YAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,qBAAqB,EACjC,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,CAAC,SAAS,CAAC,CAAC;4BACjB,SAAS,CAAC,KAAK,CAAC,CAAC;wBACnB,CAAC,GACD,EACF,uBAAC,YAAI,CAAC,IAAI,IACR,EAAE,EAAC,UAAU,EACb,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,kCAAkC,GAC9C,IACG,EAEP,uBAAC,oBAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAC9B,GAAG,EAAE,QAAQ,mBACC,MAAM,mBACL,MAAM,0BAGR,IACd,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { FilledButton, Menu } from '@neo4j-ndl/react';\nimport { useRef, useState } from 'react';\n\nconst Component = () => {\n  const anchorEl = useRef<HTMLButtonElement | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <>\n      <Menu\n        isOpen={isOpen}\n        anchorRef={anchorEl}\n        placement=\"middle-end-middle-start\"\n        onClose={(_event, _data) => {\n          setIsOpen(false);\n        }}\n        htmlAttributes={{ id: 'placements-menu' }}\n      >\n        <Menu.Item\n          title=\"Action 1\"\n          onClick={() => {\n            alert('Action1');\n            setIsOpen(false);\n          }}\n        />\n        <Menu.Item\n          title=\"Action 2\"\n          onClick={() => {\n            alert('Action2');\n            setIsOpen(false);\n          }}\n        />\n        <Menu.Item\n          title=\"Action 3\"\n          description=\"Action 3 is disabled\"\n          isDisabled={true}\n          onClick={() => {\n            alert('Action3');\n            setIsOpen(false);\n          }}\n        />\n        <Menu.Item\n          title=\"Action 4\"\n          description=\"Action 4 is awesome\"\n          onClick={() => {\n            alert('Action4');\n            setIsOpen(false);\n          }}\n        />\n        <Menu.Item\n          id=\"action_5\"\n          title=\"Action 5\"\n          description=\"Action 5 does not close the menu\"\n        />\n      </Menu>\n\n      <FilledButton\n        onClick={() => setIsOpen(true)}\n        ref={anchorEl}\n        aria-haspopup=\"menu\"\n        aria-expanded={isOpen}\n      >\n        Open Menu\n      </FilledButton>\n    </>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"menu-placements.story.js","sourceRoot":"","sources":["../../../../src/menu/stories/menu-placements.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAwD;AACxD,iCAAyC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,IAAA,cAAM,EAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,6DACE,wBAAC,YAAI,IACH,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,QAAQ,EACnB,SAAS,EAAC,yBAAyB,EACnC,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;oBACzB,SAAS,CAAC,KAAK,CAAC,CAAC;gBACnB,CAAC,EACD,cAAc,EAAE,EAAE,EAAE,EAAE,iBAAiB,EAAE,aAEzC,uBAAC,YAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,CAAC,SAAS,CAAC,CAAC;4BACjB,SAAS,CAAC,KAAK,CAAC,CAAC;wBACnB,CAAC,GACD,EACF,uBAAC,YAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,CAAC,SAAS,CAAC,CAAC;4BACjB,SAAS,CAAC,KAAK,CAAC,CAAC;wBACnB,CAAC,GACD,EACF,uBAAC,YAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,sBAAsB,EAClC,UAAU,EAAE,IAAI,EAChB,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,CAAC,SAAS,CAAC,CAAC;4BACjB,SAAS,CAAC,KAAK,CAAC,CAAC;wBACnB,CAAC,GACD,EACF,uBAAC,YAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,qBAAqB,EACjC,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,CAAC,SAAS,CAAC,CAAC;4BACjB,SAAS,CAAC,KAAK,CAAC,CAAC;wBACnB,CAAC,GACD,EACF,uBAAC,YAAI,CAAC,IAAI,IACR,EAAE,EAAC,UAAU,EACb,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,kCAAkC,GAC9C,IACG,EAEP,uBAAC,sBAAc,IACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAC9B,GAAG,EAAE,QAAQ,mBACC,MAAM,0BAGL,IAChB,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DropdownButton, Menu } from '@neo4j-ndl/react';\nimport { useRef, useState } from 'react';\n\nconst Component = () => {\n  const anchorEl = useRef<HTMLButtonElement | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <>\n      <Menu\n        isOpen={isOpen}\n        anchorRef={anchorEl}\n        placement=\"middle-end-middle-start\"\n        onClose={(_event, _data) => {\n          setIsOpen(false);\n        }}\n        htmlAttributes={{ id: 'placements-menu' }}\n      >\n        <Menu.Item\n          title=\"Action 1\"\n          onClick={() => {\n            alert('Action1');\n            setIsOpen(false);\n          }}\n        />\n        <Menu.Item\n          title=\"Action 2\"\n          onClick={() => {\n            alert('Action2');\n            setIsOpen(false);\n          }}\n        />\n        <Menu.Item\n          title=\"Action 3\"\n          description=\"Action 3 is disabled\"\n          isDisabled={true}\n          onClick={() => {\n            alert('Action3');\n            setIsOpen(false);\n          }}\n        />\n        <Menu.Item\n          title=\"Action 4\"\n          description=\"Action 4 is awesome\"\n          onClick={() => {\n            alert('Action4');\n            setIsOpen(false);\n          }}\n        />\n        <Menu.Item\n          id=\"action_5\"\n          title=\"Action 5\"\n          description=\"Action 5 does not close the menu\"\n        />\n      </Menu>\n\n      <DropdownButton\n        isOpen={isOpen}\n        onClick={() => setIsOpen(true)}\n        ref={anchorEl}\n        aria-haspopup=\"menu\"\n      >\n        Open Menu\n      </DropdownButton>\n    </>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/menu/stories/menu-with-category.story.js

@@ -29,7 +29,7 @@ const Component = () => {
     const [isOpen, setIsOpen] = (0, react_2.useState)(false);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Menu, { isOpen: isOpen, anchorRef: anchorEl, onClose: (_event, _data) => {
                     setIsOpen(false);
-                }, htmlAttributes: { id: 'category-menu' }, children: [(0, jsx_runtime_1.jsxs)(react_1.Menu.Group, { children: [(0, jsx_runtime_1.jsx)(react_1.Menu.CategoryItem, { children: "Category 1" }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Action 1", onClick: () => alert('Action1') }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Action 2", onClick: () => alert('Action2') })] }), (0, jsx_runtime_1.jsx)(react_1.Menu.Divider, {}), (0, jsx_runtime_1.jsxs)(react_1.Menu.Group, { children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Action 3", description: "Action 3 is disabled", isDisabled: true, onClick: () => alert('Action3') }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Action 4", description: "Action 4 is awesome", onClick: () => alert('Action4') })] })] }), (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsOpen(true), ref: anchorEl, "aria-haspopup": "menu", "aria-expanded": isOpen, children: "Open Menu" })] }));
+                }, htmlAttributes: { id: 'category-menu' }, children: [(0, jsx_runtime_1.jsxs)(react_1.Menu.Group, { children: [(0, jsx_runtime_1.jsx)(react_1.Menu.CategoryItem, { children: "Category 1" }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Action 1", onClick: () => alert('Action1') }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Action 2", onClick: () => alert('Action2') })] }), (0, jsx_runtime_1.jsx)(react_1.Menu.Divider, {}), (0, jsx_runtime_1.jsxs)(react_1.Menu.Group, { children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Action 3", description: "Action 3 is disabled", isDisabled: true, onClick: () => alert('Action3') }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Action 4", description: "Action 4 is awesome", onClick: () => alert('Action4') })] })] }), (0, jsx_runtime_1.jsx)(react_1.DropdownButton, { isOpen: isOpen, onClick: () => setIsOpen(true), ref: anchorEl, "aria-haspopup": "menu", children: "Open Menu" })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=menu-with-category.story.js.map

package/lib/cjs/menu/stories/menu-with-category.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-with-category.story.js","sourceRoot":"","sources":["../../../../src/menu/stories/menu-with-category.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAsD;AACtD,iCAAyC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,IAAA,cAAM,EAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,6DACE,wBAAC,YAAI,IACH,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,QAAQ,EACnB,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;oBACzB,SAAS,CAAC,KAAK,CAAC,CAAC;gBACnB,CAAC,EACD,cAAc,EAAE,EAAE,EAAE,EAAE,eAAe,EAAE,aAEvC,wBAAC,YAAI,CAAC,KAAK,eACT,uBAAC,YAAI,CAAC,YAAY,6BAA+B,EACjD,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAAI,EAC/D,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAAI,IACpD,EACb,uBAAC,YAAI,CAAC,OAAO,KAAG,EAChB,wBAAC,YAAI,CAAC,KAAK,eACT,uBAAC,YAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,sBAAsB,EAClC,UAAU,EAAE,IAAI,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAC/B,EACF,uBAAC,YAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,qBAAqB,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAC/B,IACS,IACR,EACP,uBAAC,oBAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAC9B,GAAG,EAAE,QAAQ,mBACC,MAAM,mBACL,MAAM,0BAGR,IACd,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { FilledButton, Menu } from '@neo4j-ndl/react';\nimport { useRef, useState } from 'react';\n\nconst Component = () => {\n  const anchorEl = useRef<HTMLButtonElement | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <>\n      <Menu\n        isOpen={isOpen}\n        anchorRef={anchorEl}\n        onClose={(_event, _data) => {\n          setIsOpen(false);\n        }}\n        htmlAttributes={{ id: 'category-menu' }}\n      >\n        <Menu.Group>\n          <Menu.CategoryItem>Category 1</Menu.CategoryItem>\n          <Menu.Item title=\"Action 1\" onClick={() => alert('Action1')} />\n          <Menu.Item title=\"Action 2\" onClick={() => alert('Action2')} />\n        </Menu.Group>\n        <Menu.Divider />\n        <Menu.Group>\n          <Menu.Item\n            title=\"Action 3\"\n            description=\"Action 3 is disabled\"\n            isDisabled={true}\n            onClick={() => alert('Action3')}\n          />\n          <Menu.Item\n            title=\"Action 4\"\n            description=\"Action 4 is awesome\"\n            onClick={() => alert('Action4')}\n          />\n        </Menu.Group>\n      </Menu>\n      <FilledButton\n        onClick={() => setIsOpen(true)}\n        ref={anchorEl}\n        aria-haspopup=\"menu\"\n        aria-expanded={isOpen}\n      >\n        Open Menu\n      </FilledButton>\n    </>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"menu-with-category.story.js","sourceRoot":"","sources":["../../../../src/menu/stories/menu-with-category.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAwD;AACxD,iCAAyC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,IAAA,cAAM,EAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,6DACE,wBAAC,YAAI,IACH,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,QAAQ,EACnB,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;oBACzB,SAAS,CAAC,KAAK,CAAC,CAAC;gBACnB,CAAC,EACD,cAAc,EAAE,EAAE,EAAE,EAAE,eAAe,EAAE,aAEvC,wBAAC,YAAI,CAAC,KAAK,eACT,uBAAC,YAAI,CAAC,YAAY,6BAA+B,EACjD,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAAI,EAC/D,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAAI,IACpD,EACb,uBAAC,YAAI,CAAC,OAAO,KAAG,EAChB,wBAAC,YAAI,CAAC,KAAK,eACT,uBAAC,YAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,sBAAsB,EAClC,UAAU,EAAE,IAAI,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAC/B,EACF,uBAAC,YAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,qBAAqB,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAC/B,IACS,IACR,EACP,uBAAC,sBAAc,IACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAC9B,GAAG,EAAE,QAAQ,mBACC,MAAM,0BAGL,IAChB,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DropdownButton, Menu } from '@neo4j-ndl/react';\nimport { useRef, useState } from 'react';\n\nconst Component = () => {\n  const anchorEl = useRef<HTMLButtonElement | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <>\n      <Menu\n        isOpen={isOpen}\n        anchorRef={anchorEl}\n        onClose={(_event, _data) => {\n          setIsOpen(false);\n        }}\n        htmlAttributes={{ id: 'category-menu' }}\n      >\n        <Menu.Group>\n          <Menu.CategoryItem>Category 1</Menu.CategoryItem>\n          <Menu.Item title=\"Action 1\" onClick={() => alert('Action1')} />\n          <Menu.Item title=\"Action 2\" onClick={() => alert('Action2')} />\n        </Menu.Group>\n        <Menu.Divider />\n        <Menu.Group>\n          <Menu.Item\n            title=\"Action 3\"\n            description=\"Action 3 is disabled\"\n            isDisabled={true}\n            onClick={() => alert('Action3')}\n          />\n          <Menu.Item\n            title=\"Action 4\"\n            description=\"Action 4 is awesome\"\n            onClick={() => alert('Action4')}\n          />\n        </Menu.Group>\n      </Menu>\n      <DropdownButton\n        isOpen={isOpen}\n        onClick={() => setIsOpen(true)}\n        ref={anchorEl}\n        aria-haspopup=\"menu\"\n      >\n        Open Menu\n      </DropdownButton>\n    </>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/menu/stories/menu-with-disabled-item.story.js

@@ -29,7 +29,7 @@ const Component = () => {
     const [isOpen, setIsOpen] = (0, react_2.useState)(false);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Menu, { isOpen: isOpen, anchorRef: anchorEl, onClose: (_event, _data) => {
                     setIsOpen(false);
-                }, htmlAttributes: { id: 'disabled-item-menu' }, children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Action 1", description: "Action 1 is disabled", isDisabled: true }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Action 2", onClick: () => alert('Action2') })] }), (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsOpen(true), ref: anchorEl, "aria-haspopup": "menu", "aria-expanded": isOpen, children: "Open Menu" })] }));
+                }, htmlAttributes: { id: 'disabled-item-menu' }, children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Action 1", description: "Action 1 is disabled", isDisabled: true }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Action 2", onClick: () => alert('Action2') })] }), (0, jsx_runtime_1.jsx)(react_1.DropdownButton, { isOpen: isOpen, onClick: () => setIsOpen(true), ref: anchorEl, "aria-haspopup": "menu", children: "Open Menu" })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=menu-with-disabled-item.story.js.map

package/lib/cjs/menu/stories/menu-with-disabled-item.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-with-disabled-item.story.js","sourceRoot":"","sources":["../../../../src/menu/stories/menu-with-disabled-item.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAsD;AACtD,iCAAyC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,IAAA,cAAM,EAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,6DACE,wBAAC,YAAI,IACH,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,QAAQ,EACnB,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;oBACzB,SAAS,CAAC,KAAK,CAAC,CAAC;gBACnB,CAAC,EACD,cAAc,EAAE,EAAE,EAAE,EAAE,oBAAoB,EAAE,aAE5C,uBAAC,YAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,sBAAsB,EAClC,UAAU,EAAE,IAAI,GAChB,EACF,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAAI,IAC1D,EACP,uBAAC,oBAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAC9B,GAAG,EAAE,QAAQ,mBACC,MAAM,mBACL,MAAM,0BAGR,IACd,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { FilledButton, Menu } from '@neo4j-ndl/react';\nimport { useRef, useState } from 'react';\n\nconst Component = () => {\n  const anchorEl = useRef<HTMLButtonElement | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <>\n      <Menu\n        isOpen={isOpen}\n        anchorRef={anchorEl}\n        onClose={(_event, _data) => {\n          setIsOpen(false);\n        }}\n        htmlAttributes={{ id: 'disabled-item-menu' }}\n      >\n        <Menu.Item\n          title=\"Action 1\"\n          description=\"Action 1 is disabled\"\n          isDisabled={true}\n        />\n        <Menu.Item title=\"Action 2\" onClick={() => alert('Action2')} />\n      </Menu>\n      <FilledButton\n        onClick={() => setIsOpen(true)}\n        ref={anchorEl}\n        aria-haspopup=\"menu\"\n        aria-expanded={isOpen}\n      >\n        Open Menu\n      </FilledButton>\n    </>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"menu-with-disabled-item.story.js","sourceRoot":"","sources":["../../../../src/menu/stories/menu-with-disabled-item.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAwD;AACxD,iCAAyC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,IAAA,cAAM,EAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,6DACE,wBAAC,YAAI,IACH,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,QAAQ,EACnB,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;oBACzB,SAAS,CAAC,KAAK,CAAC,CAAC;gBACnB,CAAC,EACD,cAAc,EAAE,EAAE,EAAE,EAAE,oBAAoB,EAAE,aAE5C,uBAAC,YAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,sBAAsB,EAClC,UAAU,EAAE,IAAI,GAChB,EACF,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAAI,IAC1D,EACP,uBAAC,sBAAc,IACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAC9B,GAAG,EAAE,QAAQ,mBACC,MAAM,0BAGL,IAChB,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DropdownButton, Menu } from '@neo4j-ndl/react';\nimport { useRef, useState } from 'react';\n\nconst Component = () => {\n  const anchorEl = useRef<HTMLButtonElement | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <>\n      <Menu\n        isOpen={isOpen}\n        anchorRef={anchorEl}\n        onClose={(_event, _data) => {\n          setIsOpen(false);\n        }}\n        htmlAttributes={{ id: 'disabled-item-menu' }}\n      >\n        <Menu.Item\n          title=\"Action 1\"\n          description=\"Action 1 is disabled\"\n          isDisabled={true}\n        />\n        <Menu.Item title=\"Action 2\" onClick={() => alert('Action2')} />\n      </Menu>\n      <DropdownButton\n        isOpen={isOpen}\n        onClick={() => setIsOpen(true)}\n        ref={anchorEl}\n        aria-haspopup=\"menu\"\n      >\n        Open Menu\n      </DropdownButton>\n    </>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/menu/stories/menu-with-divider.story.js

@@ -29,7 +29,7 @@ const Component = () => {
     const [isOpen, setIsOpen] = (0, react_2.useState)(false);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Menu, { isOpen: isOpen, anchorRef: anchorEl, onClose: (_event, _data) => {
                     setIsOpen(false);
-                }, htmlAttributes: { id: 'divider-menu' }, children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Action 1" }), (0, jsx_runtime_1.jsx)(react_1.Menu.Divider, {}), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Action 2" }), (0, jsx_runtime_1.jsx)(react_1.Menu.Divider, {}), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Action 3" }), (0, jsx_runtime_1.jsx)(react_1.Menu.Divider, {}), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Action 4" })] }), (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsOpen(true), ref: anchorEl, "aria-haspopup": "menu", "aria-expanded": isOpen, children: "Open Menu" })] }));
+                }, htmlAttributes: { id: 'divider-menu' }, children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Action 1" }), (0, jsx_runtime_1.jsx)(react_1.Menu.Divider, {}), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Action 2" }), (0, jsx_runtime_1.jsx)(react_1.Menu.Divider, {}), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Action 3" }), (0, jsx_runtime_1.jsx)(react_1.Menu.Divider, {}), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Action 4" })] }), (0, jsx_runtime_1.jsx)(react_1.DropdownButton, { isOpen: isOpen, onClick: () => setIsOpen(true), ref: anchorEl, "aria-haspopup": "menu", children: "Open Menu" })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=menu-with-divider.story.js.map

package/lib/cjs/menu/stories/menu-with-divider.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-with-divider.story.js","sourceRoot":"","sources":["../../../../src/menu/stories/menu-with-divider.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAsD;AACtD,iCAAyC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,IAAA,cAAM,EAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,6DACE,wBAAC,YAAI,IACH,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,QAAQ,EACnB,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;oBACzB,SAAS,CAAC,KAAK,CAAC,CAAC;gBACnB,CAAC,EACD,cAAc,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE,aAEtC,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,GAAG,EAC9B,uBAAC,YAAI,CAAC,OAAO,KAAG,EAChB,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,GAAG,EAC9B,uBAAC,YAAI,CAAC,OAAO,KAAG,EAChB,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,GAAG,EAC9B,uBAAC,YAAI,CAAC,OAAO,KAAG,EAChB,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,GAAG,IACzB,EACP,uBAAC,oBAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAC9B,GAAG,EAAE,QAAQ,mBACC,MAAM,mBACL,MAAM,0BAGR,IACd,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { FilledButton, Menu } from '@neo4j-ndl/react';\nimport { useRef, useState } from 'react';\n\nconst Component = () => {\n  const anchorEl = useRef<HTMLButtonElement | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <>\n      <Menu\n        isOpen={isOpen}\n        anchorRef={anchorEl}\n        onClose={(_event, _data) => {\n          setIsOpen(false);\n        }}\n        htmlAttributes={{ id: 'divider-menu' }}\n      >\n        <Menu.Item title=\"Action 1\" />\n        <Menu.Divider />\n        <Menu.Item title=\"Action 2\" />\n        <Menu.Divider />\n        <Menu.Item title=\"Action 3\" />\n        <Menu.Divider />\n        <Menu.Item title=\"Action 4\" />\n      </Menu>\n      <FilledButton\n        onClick={() => setIsOpen(true)}\n        ref={anchorEl}\n        aria-haspopup=\"menu\"\n        aria-expanded={isOpen}\n      >\n        Open Menu\n      </FilledButton>\n    </>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"menu-with-divider.story.js","sourceRoot":"","sources":["../../../../src/menu/stories/menu-with-divider.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAwD;AACxD,iCAAyC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,IAAA,cAAM,EAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,6DACE,wBAAC,YAAI,IACH,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,QAAQ,EACnB,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;oBACzB,SAAS,CAAC,KAAK,CAAC,CAAC;gBACnB,CAAC,EACD,cAAc,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE,aAEtC,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,GAAG,EAC9B,uBAAC,YAAI,CAAC,OAAO,KAAG,EAChB,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,GAAG,EAC9B,uBAAC,YAAI,CAAC,OAAO,KAAG,EAChB,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,GAAG,EAC9B,uBAAC,YAAI,CAAC,OAAO,KAAG,EAChB,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,GAAG,IACzB,EACP,uBAAC,sBAAc,IACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAC9B,GAAG,EAAE,QAAQ,mBACC,MAAM,0BAGL,IAChB,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DropdownButton, Menu } from '@neo4j-ndl/react';\nimport { useRef, useState } from 'react';\n\nconst Component = () => {\n  const anchorEl = useRef<HTMLButtonElement | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <>\n      <Menu\n        isOpen={isOpen}\n        anchorRef={anchorEl}\n        onClose={(_event, _data) => {\n          setIsOpen(false);\n        }}\n        htmlAttributes={{ id: 'divider-menu' }}\n      >\n        <Menu.Item title=\"Action 1\" />\n        <Menu.Divider />\n        <Menu.Item title=\"Action 2\" />\n        <Menu.Divider />\n        <Menu.Item title=\"Action 3\" />\n        <Menu.Divider />\n        <Menu.Item title=\"Action 4\" />\n      </Menu>\n      <DropdownButton\n        isOpen={isOpen}\n        onClick={() => setIsOpen(true)}\n        ref={anchorEl}\n        aria-haspopup=\"menu\"\n      >\n        Open Menu\n      </DropdownButton>\n    </>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/menu/stories/menu-with-icon.story.js

@@ -30,7 +30,7 @@ const Component = () => {
     const [isOpen, setIsOpen] = (0, react_2.useState)(false);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Menu, { isOpen: isOpen, anchorRef: anchorEl, onClose: (_event, _data) => {
                     setIsOpen(false);
-                }, htmlAttributes: { id: 'icon-menu' }, children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.PlusIconOutline, {}), title: "Action 1", onClick: () => alert('Action1') }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.PlusIconOutline, {}), title: "Action 2", onClick: () => alert('Action2') }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.PlusIconOutline, {}), title: "Action 3", description: "Action 3 is disabled", isDisabled: true, onClick: () => alert('Action3') }), (0, jsx_runtime_1.jsxs)(react_1.Menu, { title: "Action 3.1", description: "Action with sub menu", icon: (0, jsx_runtime_1.jsx)(icons_1.PlusIconOutline, {}), children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Text" }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Video" }), (0, jsx_runtime_1.jsxs)(react_1.Menu, { title: "Image", icon: (0, jsx_runtime_1.jsx)(icons_1.PhotoIconOutline, {}), children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: ".png" }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: ".jpg" })] }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Audio" })] }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.PlusIconOutline, {}), title: "Action 4", description: "Action 4 is awesome", onClick: () => alert('Action4') })] }), (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsOpen(true), ref: anchorEl, "aria-haspopup": "menu", "aria-expanded": isOpen, children: "Open Menu" })] }));
+                }, htmlAttributes: { id: 'icon-menu' }, children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.PlusIconOutline, {}), title: "Action 1", onClick: () => alert('Action1') }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.PlusIconOutline, {}), title: "Action 2", onClick: () => alert('Action2') }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.PlusIconOutline, {}), title: "Action 3", description: "Action 3 is disabled", isDisabled: true, onClick: () => alert('Action3') }), (0, jsx_runtime_1.jsxs)(react_1.Menu, { title: "Action 3.1", description: "Action with sub menu", icon: (0, jsx_runtime_1.jsx)(icons_1.PlusIconOutline, {}), children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Text" }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Video" }), (0, jsx_runtime_1.jsxs)(react_1.Menu, { title: "Image", icon: (0, jsx_runtime_1.jsx)(icons_1.PhotoIconOutline, {}), children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: ".png" }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: ".jpg" })] }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Audio" })] }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.PlusIconOutline, {}), title: "Action 4", description: "Action 4 is awesome", onClick: () => alert('Action4') })] }), (0, jsx_runtime_1.jsx)(react_1.DropdownButton, { isOpen: isOpen, onClick: () => setIsOpen(true), ref: anchorEl, "aria-haspopup": "menu", children: "Open Menu" })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=menu-with-icon.story.js.map

package/lib/cjs/menu/stories/menu-with-icon.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-with-icon.story.js","sourceRoot":"","sources":["../../../../src/menu/stories/menu-with-icon.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAsD;AACtD,kDAA2E;AAC3E,iCAAyC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,IAAA,cAAM,EAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,6DACE,wBAAC,YAAI,IACH,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,QAAQ,EACnB,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;oBACzB,SAAS,CAAC,KAAK,CAAC,CAAC;gBACnB,CAAC,EACD,cAAc,EAAE,EAAE,EAAE,EAAE,WAAW,EAAE,aAEnC,uBAAC,YAAI,CAAC,IAAI,IACR,aAAa,EAAE,uBAAC,uBAAe,KAAG,EAClC,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAC/B,EACF,uBAAC,YAAI,CAAC,IAAI,IACR,aAAa,EAAE,uBAAC,uBAAe,KAAG,EAClC,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAC/B,EACF,uBAAC,YAAI,CAAC,IAAI,IACR,aAAa,EAAE,uBAAC,uBAAe,KAAG,EAClC,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,sBAAsB,EAClC,UAAU,EAAE,IAAI,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAC/B,EACF,wBAAC,YAAI,IACH,KAAK,EAAC,YAAY,EAClB,WAAW,EAAC,sBAAsB,EAClC,IAAI,EAAE,uBAAC,uBAAe,KAAG,aAEzB,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,OAAO,GAAG,EAC3B,wBAAC,YAAI,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,uBAAC,wBAAgB,KAAG,aAC5C,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,IACrB,EACP,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,OAAO,GAAG,IACtB,EACP,uBAAC,YAAI,CAAC,IAAI,IACR,aAAa,EAAE,uBAAC,uBAAe,KAAG,EAClC,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,qBAAqB,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAC/B,IACG,EACP,uBAAC,oBAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAC9B,GAAG,EAAE,QAAQ,mBACC,MAAM,mBACL,MAAM,0BAGR,IACd,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { FilledButton, Menu } from '@neo4j-ndl/react';\nimport { PhotoIconOutline, PlusIconOutline } from '@neo4j-ndl/react/icons';\nimport { useRef, useState } from 'react';\n\nconst Component = () => {\n  const anchorEl = useRef<HTMLButtonElement | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <>\n      <Menu\n        isOpen={isOpen}\n        anchorRef={anchorEl}\n        onClose={(_event, _data) => {\n          setIsOpen(false);\n        }}\n        htmlAttributes={{ id: 'icon-menu' }}\n      >\n        <Menu.Item\n          leadingVisual={<PlusIconOutline />}\n          title=\"Action 1\"\n          onClick={() => alert('Action1')}\n        />\n        <Menu.Item\n          leadingVisual={<PlusIconOutline />}\n          title=\"Action 2\"\n          onClick={() => alert('Action2')}\n        />\n        <Menu.Item\n          leadingVisual={<PlusIconOutline />}\n          title=\"Action 3\"\n          description=\"Action 3 is disabled\"\n          isDisabled={true}\n          onClick={() => alert('Action3')}\n        />\n        <Menu\n          title=\"Action 3.1\"\n          description=\"Action with sub menu\"\n          icon={<PlusIconOutline />}\n        >\n          <Menu.Item title=\"Text\" />\n          <Menu.Item title=\"Video\" />\n          <Menu title=\"Image\" icon={<PhotoIconOutline />}>\n            <Menu.Item title=\".png\" />\n            <Menu.Item title=\".jpg\" />\n          </Menu>\n          <Menu.Item title=\"Audio\" />\n        </Menu>\n        <Menu.Item\n          leadingVisual={<PlusIconOutline />}\n          title=\"Action 4\"\n          description=\"Action 4 is awesome\"\n          onClick={() => alert('Action4')}\n        />\n      </Menu>\n      <FilledButton\n        onClick={() => setIsOpen(true)}\n        ref={anchorEl}\n        aria-haspopup=\"menu\"\n        aria-expanded={isOpen}\n      >\n        Open Menu\n      </FilledButton>\n    </>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"menu-with-icon.story.js","sourceRoot":"","sources":["../../../../src/menu/stories/menu-with-icon.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAwD;AACxD,kDAA2E;AAC3E,iCAAyC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,IAAA,cAAM,EAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,6DACE,wBAAC,YAAI,IACH,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,QAAQ,EACnB,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;oBACzB,SAAS,CAAC,KAAK,CAAC,CAAC;gBACnB,CAAC,EACD,cAAc,EAAE,EAAE,EAAE,EAAE,WAAW,EAAE,aAEnC,uBAAC,YAAI,CAAC,IAAI,IACR,aAAa,EAAE,uBAAC,uBAAe,KAAG,EAClC,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAC/B,EACF,uBAAC,YAAI,CAAC,IAAI,IACR,aAAa,EAAE,uBAAC,uBAAe,KAAG,EAClC,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAC/B,EACF,uBAAC,YAAI,CAAC,IAAI,IACR,aAAa,EAAE,uBAAC,uBAAe,KAAG,EAClC,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,sBAAsB,EAClC,UAAU,EAAE,IAAI,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAC/B,EACF,wBAAC,YAAI,IACH,KAAK,EAAC,YAAY,EAClB,WAAW,EAAC,sBAAsB,EAClC,IAAI,EAAE,uBAAC,uBAAe,KAAG,aAEzB,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,OAAO,GAAG,EAC3B,wBAAC,YAAI,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,uBAAC,wBAAgB,KAAG,aAC5C,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,IACrB,EACP,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,OAAO,GAAG,IACtB,EACP,uBAAC,YAAI,CAAC,IAAI,IACR,aAAa,EAAE,uBAAC,uBAAe,KAAG,EAClC,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,qBAAqB,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAC/B,IACG,EACP,uBAAC,sBAAc,IACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAC9B,GAAG,EAAE,QAAQ,mBACC,MAAM,0BAGL,IAChB,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DropdownButton, Menu } from '@neo4j-ndl/react';\nimport { PhotoIconOutline, PlusIconOutline } from '@neo4j-ndl/react/icons';\nimport { useRef, useState } from 'react';\n\nconst Component = () => {\n  const anchorEl = useRef<HTMLButtonElement | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <>\n      <Menu\n        isOpen={isOpen}\n        anchorRef={anchorEl}\n        onClose={(_event, _data) => {\n          setIsOpen(false);\n        }}\n        htmlAttributes={{ id: 'icon-menu' }}\n      >\n        <Menu.Item\n          leadingVisual={<PlusIconOutline />}\n          title=\"Action 1\"\n          onClick={() => alert('Action1')}\n        />\n        <Menu.Item\n          leadingVisual={<PlusIconOutline />}\n          title=\"Action 2\"\n          onClick={() => alert('Action2')}\n        />\n        <Menu.Item\n          leadingVisual={<PlusIconOutline />}\n          title=\"Action 3\"\n          description=\"Action 3 is disabled\"\n          isDisabled={true}\n          onClick={() => alert('Action3')}\n        />\n        <Menu\n          title=\"Action 3.1\"\n          description=\"Action with sub menu\"\n          icon={<PlusIconOutline />}\n        >\n          <Menu.Item title=\"Text\" />\n          <Menu.Item title=\"Video\" />\n          <Menu title=\"Image\" icon={<PhotoIconOutline />}>\n            <Menu.Item title=\".png\" />\n            <Menu.Item title=\".jpg\" />\n          </Menu>\n          <Menu.Item title=\"Audio\" />\n        </Menu>\n        <Menu.Item\n          leadingVisual={<PlusIconOutline />}\n          title=\"Action 4\"\n          description=\"Action 4 is awesome\"\n          onClick={() => alert('Action4')}\n        />\n      </Menu>\n      <DropdownButton\n        isOpen={isOpen}\n        onClick={() => setIsOpen(true)}\n        ref={anchorEl}\n        aria-haspopup=\"menu\"\n      >\n        Open Menu\n      </DropdownButton>\n    </>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/menu/stories/menu-with-keyboard-shortcuts.story.js

@@ -30,7 +30,7 @@ const Component = () => {
     const [isOpen, setIsOpen] = (0, react_2.useState)(false);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Menu, { isOpen: isOpen, anchorRef: anchorEl, onClose: (_event, _data) => {
                     setIsOpen(false);
-                }, htmlAttributes: { id: 'keyboard-shortcuts-menu' }, children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.PlusIconOutline, {}), title: "Action 1", onClick: () => alert('Action1') }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.PlusIconOutline, {}), trailingContent: (0, jsx_runtime_1.jsx)(react_1.Kbd, { keys: ['A', ['B']] }), title: "Action 2", description: "Action 4 has a keyboard shortcut", onClick: () => alert('Action4') })] }), (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsOpen(true), ref: anchorEl, "aria-haspopup": "menu", "aria-expanded": isOpen, children: "Open Menu" })] }));
+                }, htmlAttributes: { id: 'keyboard-shortcuts-menu' }, children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.PlusIconOutline, {}), title: "Action 1", onClick: () => alert('Action1') }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.PlusIconOutline, {}), trailingContent: (0, jsx_runtime_1.jsx)(react_1.Kbd, { keys: ['A', ['B']] }), title: "Action 2", description: "Action 4 has a keyboard shortcut", onClick: () => alert('Action4') })] }), (0, jsx_runtime_1.jsx)(react_1.DropdownButton, { isOpen: isOpen, onClick: () => setIsOpen(true), ref: anchorEl, "aria-haspopup": "menu", children: "Open Menu" })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=menu-with-keyboard-shortcuts.story.js.map

package/lib/cjs/menu/stories/menu-with-keyboard-shortcuts.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-with-keyboard-shortcuts.story.js","sourceRoot":"","sources":["../../../../src/menu/stories/menu-with-keyboard-shortcuts.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA2D;AAC3D,kDAAyD;AACzD,iCAAyC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,IAAA,cAAM,EAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,6DACE,wBAAC,YAAI,IACH,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,QAAQ,EACnB,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;oBACzB,SAAS,CAAC,KAAK,CAAC,CAAC;gBACnB,CAAC,EACD,cAAc,EAAE,EAAE,EAAE,EAAE,yBAAyB,EAAE,aAEjD,uBAAC,YAAI,CAAC,IAAI,IACR,aAAa,EAAE,uBAAC,uBAAe,KAAG,EAClC,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAC/B,EACF,uBAAC,YAAI,CAAC,IAAI,IACR,aAAa,EAAE,uBAAC,uBAAe,KAAG,EAClC,eAAe,EAAE,uBAAC,WAAG,IAAC,IAAI,EAAE,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC,GAAI,EAC5C,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,kCAAkC,EAC9C,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAC/B,IACG,EACP,uBAAC,oBAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAC9B,GAAG,EAAE,QAAQ,mBACC,MAAM,mBACL,MAAM,0BAGR,IACd,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { FilledButton, Kbd, Menu } from '@neo4j-ndl/react';\nimport { PlusIconOutline } from '@neo4j-ndl/react/icons';\nimport { useRef, useState } from 'react';\n\nconst Component = () => {\n  const anchorEl = useRef<HTMLButtonElement | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <>\n      <Menu\n        isOpen={isOpen}\n        anchorRef={anchorEl}\n        onClose={(_event, _data) => {\n          setIsOpen(false);\n        }}\n        htmlAttributes={{ id: 'keyboard-shortcuts-menu' }}\n      >\n        <Menu.Item\n          leadingVisual={<PlusIconOutline />}\n          title=\"Action 1\"\n          onClick={() => alert('Action1')}\n        />\n        <Menu.Item\n          leadingVisual={<PlusIconOutline />}\n          trailingContent={<Kbd keys={['A', ['B']]} />}\n          title=\"Action 2\"\n          description=\"Action 4 has a keyboard shortcut\"\n          onClick={() => alert('Action4')}\n        />\n      </Menu>\n      <FilledButton\n        onClick={() => setIsOpen(true)}\n        ref={anchorEl}\n        aria-haspopup=\"menu\"\n        aria-expanded={isOpen}\n      >\n        Open Menu\n      </FilledButton>\n    </>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"menu-with-keyboard-shortcuts.story.js","sourceRoot":"","sources":["../../../../src/menu/stories/menu-with-keyboard-shortcuts.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA6D;AAC7D,kDAAyD;AACzD,iCAAyC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,IAAA,cAAM,EAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,6DACE,wBAAC,YAAI,IACH,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,QAAQ,EACnB,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;oBACzB,SAAS,CAAC,KAAK,CAAC,CAAC;gBACnB,CAAC,EACD,cAAc,EAAE,EAAE,EAAE,EAAE,yBAAyB,EAAE,aAEjD,uBAAC,YAAI,CAAC,IAAI,IACR,aAAa,EAAE,uBAAC,uBAAe,KAAG,EAClC,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAC/B,EACF,uBAAC,YAAI,CAAC,IAAI,IACR,aAAa,EAAE,uBAAC,uBAAe,KAAG,EAClC,eAAe,EAAE,uBAAC,WAAG,IAAC,IAAI,EAAE,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC,GAAI,EAC5C,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,kCAAkC,EAC9C,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAC/B,IACG,EACP,uBAAC,sBAAc,IACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAC9B,GAAG,EAAE,QAAQ,mBACC,MAAM,0BAGL,IAChB,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DropdownButton, Kbd, Menu } from '@neo4j-ndl/react';\nimport { PlusIconOutline } from '@neo4j-ndl/react/icons';\nimport { useRef, useState } from 'react';\n\nconst Component = () => {\n  const anchorEl = useRef<HTMLButtonElement | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <>\n      <Menu\n        isOpen={isOpen}\n        anchorRef={anchorEl}\n        onClose={(_event, _data) => {\n          setIsOpen(false);\n        }}\n        htmlAttributes={{ id: 'keyboard-shortcuts-menu' }}\n      >\n        <Menu.Item\n          leadingVisual={<PlusIconOutline />}\n          title=\"Action 1\"\n          onClick={() => alert('Action1')}\n        />\n        <Menu.Item\n          leadingVisual={<PlusIconOutline />}\n          trailingContent={<Kbd keys={['A', ['B']]} />}\n          title=\"Action 2\"\n          description=\"Action 4 has a keyboard shortcut\"\n          onClick={() => alert('Action4')}\n        />\n      </Menu>\n      <DropdownButton\n        isOpen={isOpen}\n        onClick={() => setIsOpen(true)}\n        ref={anchorEl}\n        aria-haspopup=\"menu\"\n      >\n        Open Menu\n      </DropdownButton>\n    </>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/_generated/style-rules/date-utils.js

@@ -109,7 +109,8 @@ export function parseTimeString(s) {
  *    e.g. `"2024-01-01"`, `"2024-01-01T14:30:00"`, `"2024-01-01T14:30:00.500"`
  *
  * Strings with a time component that lack `Z`, an offset, or an IANA bracket are
- * parsed as UTC wall-clock time (same semantics as Neo4j `LocalDateTime`).
+ * parsed as UTC wall-clock time. (Neo4j `LocalDateTime` values should instead be
+ * parsed with {@link parseLocalDateString}, in the browser's local timezone.)
  */
 export function parseDateString(s) {
     // RFC 9557 / ZonedDateTime with IANA bracket notation

package/lib/esm/_generated/style-rules/date-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-utils.js","sourceRoot":"","sources":["../../../../src/_generated/style-rules/date-utils.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * AUTO-GENERATED FILE — DO NOT EDIT.\n * Source of truth: packages/style-rules/src/\n * Regenerate with `pnpm generate:shared` (runs automatically at build/dev/install).\n */\n\n/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { Temporal } from 'temporal-polyfill';\n\nconst MS_PER_DAY = 86_400_000;\n\nfunction plainTimeToMs(pt: Temporal.PlainTime): number {\n  return (\n    pt.hour * 3_600_000 +\n    pt.minute * 60_000 +\n    pt.second * 1_000 +\n    pt.millisecond\n  );\n}\n\nfunction parseOffsetMs(offsetStr: string): number | null {\n  const match = offsetStr.match(/^([+-])(\\d{2}):(\\d{2})$/);\n  if (!match) {\n    return null;\n  }\n  const sign = match[1] === '+' ? 1 : -1;\n  return (\n    sign *\n    (parseInt(match[2], 10) * 3_600_000 + parseInt(match[3], 10) * 60_000)\n  );\n}\n\n/**\n * Parses an ISO 8601 time string to UTC milliseconds since midnight\n * (0–86,399,999). Returns `null` if the string cannot be parsed.\n *\n * Three formats are accepted:\n * 1. Local time (no offset): `\"14:30:00\"`, `\"14:30:00.500\"` — treated as UTC\n * 2. UTC time with Z suffix: `\"14:30:00Z\"` — treated identically to the local form\n * 3. Offset time: `\"14:30:00+02:00\"` — the offset is applied so the result\n *    is the equivalent UTC time of day. `\"12:00:00+01:00\"` resolves to\n *    39,600,000 (11:00 UTC), which is less than `\"12:00:00+00:00\"` (43,200,000).\n *\n * Values wrap around midnight: `\"00:00:00+01:00\"` → 82,800,000 (23:00 UTC).\n */\nexport function parseTimeString(s: string): number | null {\n  // Reject datetime strings and anything with an IANA timezone bracket.\n  // Temporal.PlainTime.from silently extracts the time portion from strings\n  // containing a 'T' separator. IANA brackets are meaningless for time-only\n  // values (there is no date to anchor DST to), so they are also rejected.\n  if (s.includes('T') || s.includes('[')) {\n    return null;\n  }\n  // Offset time: detect \"+HH:MM\" or \"-HH:MM\" suffix first. Temporal.PlainTime.from\n  // silently strips offsets and returns the clock-face time, so we must handle\n  // offset strings explicitly before falling through to the plain parse.\n  const offsetMatch = s.match(/([+-]\\d{2}:\\d{2})(\\[.*\\])?$/);\n  if (offsetMatch) {\n    const offsetStr = offsetMatch[1];\n    const timeStr = s.slice(0, s.indexOf(offsetStr));\n    const offsetMs = parseOffsetMs(offsetStr);\n    if (offsetMs !== null) {\n      try {\n        const localMs = plainTimeToMs(Temporal.PlainTime.from(timeStr));\n        // Subtract the UTC offset to normalise to UTC time-of-day; wrap around midnight\n        return (((localMs - offsetMs) % MS_PER_DAY) + MS_PER_DAY) % MS_PER_DAY;\n      } catch {\n        /* empty */\n      }\n    }\n    return null;\n  }\n\n  // UTC time with Z suffix (e.g. \"14:30:00Z\") — strip Z and treat as local (UTC) time.\n  // Only apply when there is no 'T' in the string; a datetime string like\n  // \"2024-06-15T14:30:00Z\" must not be accepted here.\n  const normalized = s.endsWith('Z') && !s.includes('T') ? s.slice(0, -1) : s;\n\n  // Local time (no offset) — treated as UTC\n  try {\n    return plainTimeToMs(Temporal.PlainTime.from(normalized));\n  } catch {\n    /* empty */\n  }\n\n  return null;\n}\n\n/**\n * Parses an ISO 8601 or RFC 9557 date/datetime string to a Unix millisecond\n * timestamp. Returns `null` if the string cannot be parsed.\n *\n * Three formats are tried in order:\n * 1. RFC 9557 ZonedDateTime with IANA bracket notation\n *    e.g. `\"2024-06-15T14:00:00[Europe/Stockholm]\"` (offset inferred from the\n *    named timezone, including DST) or `\"2024-06-15T14:00:00+02:00[Europe/Stockholm]\"`\n *    (offset explicit; bracket must agree with the IANA zone)\n * 2. UTC or fixed-offset Instant\n *    e.g. `\"2024-01-01T00:00:00Z\"`, `\"2024-01-01T00:00:00+02:00\"`\n * 3. Plain date or datetime (no offset, `Z`, or IANA bracket), interpreted as UTC\n *    e.g. `\"2024-01-01\"`, `\"2024-01-01T14:30:00\"`, `\"2024-01-01T14:30:00.500\"`\n *\n * Strings with a time component that lack `Z`, an offset, or an IANA bracket are\n * parsed as UTC wall-clock time (same semantics as Neo4j `LocalDateTime`).\n */\nexport function parseDateString(s: string): number | null {\n  // RFC 9557 / ZonedDateTime with IANA bracket notation\n  try {\n    return Temporal.ZonedDateTime.from(s).epochMilliseconds;\n  } catch {\n    /* empty */\n  }\n\n  // UTC or fixed-offset datetime (no IANA name)\n  try {\n    return Temporal.Instant.from(s).epochMilliseconds;\n  } catch {\n    /* empty */\n  }\n\n  // Plain datetime — interpret as UTC.\n  // Also covers date-only strings like \"2024-01-01\" (PlainDateTime.from parses\n  // them as midnight), so a separate PlainDate path is not needed.\n  try {\n    return Temporal.PlainDateTime.from(s).toZonedDateTime('UTC')\n      .epochMilliseconds;\n  } catch {\n    /* empty */\n  }\n\n  return null;\n}\n\n/**\n * Parses a plain (unzoned) ISO 8601 date or datetime string to a Unix\n * millisecond timestamp, interpreting the wall-clock time in the given\n * `timeZone` (defaults to the browser's local timezone via\n * `Temporal.Now.timeZoneId()`). Returns `null` if the string cannot be\n * parsed or contains any timezone qualifier.\n *\n * Only plain date/datetime strings are accepted — strings with `Z`, a\n * fixed UTC offset (`+02:00`), or an IANA bracket (`[Europe/Stockholm]`)\n * are **rejected** and return `null`. This mirrors the semantics of\n * Neo4j `LocalDateTime`, which has no associated timezone.\n *\n * Accepted formats:\n * - Plain datetime: `\"2024-01-01T14:30:00\"`, `\"2024-01-01T14:30:00.500\"`\n * - Date-only (treated as local midnight): `\"2024-01-01\"`\n *\n * The optional `timeZone` parameter overrides the browser's local timezone,\n * which is useful for deterministic testing.\n */\nexport function parseLocalDateString(\n  s: string,\n  timeZone?: string,\n): number | null {\n  // Reject strings that carry explicit timezone information. This mirrors the\n  // cascade in parseDateString but uses successful parsing as a rejection\n  // signal rather than an acceptance signal:\n  //\n  // - ZonedDateTime.from succeeds  → string has an IANA bracket → reject\n  // - Instant.from succeeds        → string has Z or a fixed offset → reject\n  // - PlainDateTime.from succeeds  → truly plain string → accept\n  //\n  // The polyfill's PlainDateTime.from() silently strips offsets/brackets\n  // instead of throwing, so these two pre-checks are necessary to enforce\n  // the plain-only constraint.\n  try {\n    Temporal.ZonedDateTime.from(s);\n    return null;\n  } catch {\n    /* not a zoned datetime — continue */\n  }\n\n  try {\n    Temporal.Instant.from(s);\n    return null;\n  } catch {\n    /* not a UTC/offset instant — continue */\n  }\n\n  const tz = timeZone ?? Temporal.Now.timeZoneId();\n  try {\n    return Temporal.PlainDateTime.from(s).toZonedDateTime(tz).epochMilliseconds;\n  } catch {\n    /* empty */\n  }\n\n  return null;\n}\n"]}
+{"version":3,"file":"date-utils.js","sourceRoot":"","sources":["../../../../src/_generated/style-rules/date-utils.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * AUTO-GENERATED FILE — DO NOT EDIT.\n * Source of truth: packages/style-rules/src/\n * Regenerate with `pnpm generate:shared` (runs automatically at build/dev/install).\n */\n\n/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { Temporal } from 'temporal-polyfill';\n\nconst MS_PER_DAY = 86_400_000;\n\nfunction plainTimeToMs(pt: Temporal.PlainTime): number {\n  return (\n    pt.hour * 3_600_000 +\n    pt.minute * 60_000 +\n    pt.second * 1_000 +\n    pt.millisecond\n  );\n}\n\nfunction parseOffsetMs(offsetStr: string): number | null {\n  const match = offsetStr.match(/^([+-])(\\d{2}):(\\d{2})$/);\n  if (!match) {\n    return null;\n  }\n  const sign = match[1] === '+' ? 1 : -1;\n  return (\n    sign *\n    (parseInt(match[2], 10) * 3_600_000 + parseInt(match[3], 10) * 60_000)\n  );\n}\n\n/**\n * Parses an ISO 8601 time string to UTC milliseconds since midnight\n * (0–86,399,999). Returns `null` if the string cannot be parsed.\n *\n * Three formats are accepted:\n * 1. Local time (no offset): `\"14:30:00\"`, `\"14:30:00.500\"` — treated as UTC\n * 2. UTC time with Z suffix: `\"14:30:00Z\"` — treated identically to the local form\n * 3. Offset time: `\"14:30:00+02:00\"` — the offset is applied so the result\n *    is the equivalent UTC time of day. `\"12:00:00+01:00\"` resolves to\n *    39,600,000 (11:00 UTC), which is less than `\"12:00:00+00:00\"` (43,200,000).\n *\n * Values wrap around midnight: `\"00:00:00+01:00\"` → 82,800,000 (23:00 UTC).\n */\nexport function parseTimeString(s: string): number | null {\n  // Reject datetime strings and anything with an IANA timezone bracket.\n  // Temporal.PlainTime.from silently extracts the time portion from strings\n  // containing a 'T' separator. IANA brackets are meaningless for time-only\n  // values (there is no date to anchor DST to), so they are also rejected.\n  if (s.includes('T') || s.includes('[')) {\n    return null;\n  }\n  // Offset time: detect \"+HH:MM\" or \"-HH:MM\" suffix first. Temporal.PlainTime.from\n  // silently strips offsets and returns the clock-face time, so we must handle\n  // offset strings explicitly before falling through to the plain parse.\n  const offsetMatch = s.match(/([+-]\\d{2}:\\d{2})(\\[.*\\])?$/);\n  if (offsetMatch) {\n    const offsetStr = offsetMatch[1];\n    const timeStr = s.slice(0, s.indexOf(offsetStr));\n    const offsetMs = parseOffsetMs(offsetStr);\n    if (offsetMs !== null) {\n      try {\n        const localMs = plainTimeToMs(Temporal.PlainTime.from(timeStr));\n        // Subtract the UTC offset to normalise to UTC time-of-day; wrap around midnight\n        return (((localMs - offsetMs) % MS_PER_DAY) + MS_PER_DAY) % MS_PER_DAY;\n      } catch {\n        /* empty */\n      }\n    }\n    return null;\n  }\n\n  // UTC time with Z suffix (e.g. \"14:30:00Z\") — strip Z and treat as local (UTC) time.\n  // Only apply when there is no 'T' in the string; a datetime string like\n  // \"2024-06-15T14:30:00Z\" must not be accepted here.\n  const normalized = s.endsWith('Z') && !s.includes('T') ? s.slice(0, -1) : s;\n\n  // Local time (no offset) — treated as UTC\n  try {\n    return plainTimeToMs(Temporal.PlainTime.from(normalized));\n  } catch {\n    /* empty */\n  }\n\n  return null;\n}\n\n/**\n * Parses an ISO 8601 or RFC 9557 date/datetime string to a Unix millisecond\n * timestamp. Returns `null` if the string cannot be parsed.\n *\n * Three formats are tried in order:\n * 1. RFC 9557 ZonedDateTime with IANA bracket notation\n *    e.g. `\"2024-06-15T14:00:00[Europe/Stockholm]\"` (offset inferred from the\n *    named timezone, including DST) or `\"2024-06-15T14:00:00+02:00[Europe/Stockholm]\"`\n *    (offset explicit; bracket must agree with the IANA zone)\n * 2. UTC or fixed-offset Instant\n *    e.g. `\"2024-01-01T00:00:00Z\"`, `\"2024-01-01T00:00:00+02:00\"`\n * 3. Plain date or datetime (no offset, `Z`, or IANA bracket), interpreted as UTC\n *    e.g. `\"2024-01-01\"`, `\"2024-01-01T14:30:00\"`, `\"2024-01-01T14:30:00.500\"`\n *\n * Strings with a time component that lack `Z`, an offset, or an IANA bracket are\n * parsed as UTC wall-clock time. (Neo4j `LocalDateTime` values should instead be\n * parsed with {@link parseLocalDateString}, in the browser's local timezone.)\n */\nexport function parseDateString(s: string): number | null {\n  // RFC 9557 / ZonedDateTime with IANA bracket notation\n  try {\n    return Temporal.ZonedDateTime.from(s).epochMilliseconds;\n  } catch {\n    /* empty */\n  }\n\n  // UTC or fixed-offset datetime (no IANA name)\n  try {\n    return Temporal.Instant.from(s).epochMilliseconds;\n  } catch {\n    /* empty */\n  }\n\n  // Plain datetime — interpret as UTC.\n  // Also covers date-only strings like \"2024-01-01\" (PlainDateTime.from parses\n  // them as midnight), so a separate PlainDate path is not needed.\n  try {\n    return Temporal.PlainDateTime.from(s).toZonedDateTime('UTC')\n      .epochMilliseconds;\n  } catch {\n    /* empty */\n  }\n\n  return null;\n}\n\n/**\n * Parses a plain (unzoned) ISO 8601 date or datetime string to a Unix\n * millisecond timestamp, interpreting the wall-clock time in the given\n * `timeZone` (defaults to the browser's local timezone via\n * `Temporal.Now.timeZoneId()`). Returns `null` if the string cannot be\n * parsed or contains any timezone qualifier.\n *\n * Only plain date/datetime strings are accepted — strings with `Z`, a\n * fixed UTC offset (`+02:00`), or an IANA bracket (`[Europe/Stockholm]`)\n * are **rejected** and return `null`. This mirrors the semantics of\n * Neo4j `LocalDateTime`, which has no associated timezone.\n *\n * Accepted formats:\n * - Plain datetime: `\"2024-01-01T14:30:00\"`, `\"2024-01-01T14:30:00.500\"`\n * - Date-only (treated as local midnight): `\"2024-01-01\"`\n *\n * The optional `timeZone` parameter overrides the browser's local timezone,\n * which is useful for deterministic testing.\n */\nexport function parseLocalDateString(\n  s: string,\n  timeZone?: string,\n): number | null {\n  // Reject strings that carry explicit timezone information. This mirrors the\n  // cascade in parseDateString but uses successful parsing as a rejection\n  // signal rather than an acceptance signal:\n  //\n  // - ZonedDateTime.from succeeds  → string has an IANA bracket → reject\n  // - Instant.from succeeds        → string has Z or a fixed offset → reject\n  // - PlainDateTime.from succeeds  → truly plain string → accept\n  //\n  // The polyfill's PlainDateTime.from() silently strips offsets/brackets\n  // instead of throwing, so these two pre-checks are necessary to enforce\n  // the plain-only constraint.\n  try {\n    Temporal.ZonedDateTime.from(s);\n    return null;\n  } catch {\n    /* not a zoned datetime — continue */\n  }\n\n  try {\n    Temporal.Instant.from(s);\n    return null;\n  } catch {\n    /* not a UTC/offset instant — continue */\n  }\n\n  const tz = timeZone ?? Temporal.Now.timeZoneId();\n  try {\n    return Temporal.PlainDateTime.from(s).toZonedDateTime(tz).epochMilliseconds;\n  } catch {\n    /* empty */\n  }\n\n  return null;\n}\n"]}

package/lib/esm/data-grid/stories/datagrid-rule-based-styling.story.js

@@ -114,6 +114,28 @@ const styleRules = [
             ],
         },
     },
+    // Accessible default text color: a background is set but no textColor, so an
+    // accessible text color is chosen automatically for contrast against the
+    // dark background. Compare the cypherCommand cell here with the one below,
+    // which uses the same background but an explicit (low-contrast) textColor.
+    {
+        apply: { color: { value: '#1e3a5f' } },
+        column: 'cypherCommand',
+        priority: 1,
+        where: { equal: [{ column: 'name' }, 'Ken Kessler'] },
+    },
+    // Explicit textColor always wins: even a low-contrast text color is left
+    // untouched -- the automatic accessible default only fills in when no
+    // textColor/textColorRange resolved one.
+    {
+        apply: {
+            color: { value: '#1e3a5f' },
+            textColor: { value: '#fca5a5' },
+        },
+        column: 'cypherCommand',
+        priority: 1,
+        where: { equal: [{ column: 'name' }, 'Jonathon Graham'] },
+    },
 ];
 const Component = () => {
     const columnHelper = createColumnHelper();

package/lib/esm/data-grid/stories/datagrid-rule-based-styling.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"datagrid-rule-based-styling.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-rule-based-styling.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DataGrid } from '@neo4j-ndl/react';\nimport {\n  createColumnHelper,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\n\nimport { type DataGridStyleRule } from '../style-rules/types';\nimport { TABLE_DEMO_DATA, type TestDataFormat } from './staticData';\n\ntype BigintTestDataFormat = TestDataFormat & { preciseId: bigint };\n\nconst BIGINT_ID_START = BigInt('9007199254740993');\nconst tableData: BigintTestDataFormat[] = TABLE_DEMO_DATA.map((row, index) => ({\n  ...row,\n  preciseId: BIGINT_ID_START + BigInt(index),\n}));\n\nconst styleRules: DataGridStyleRule[] = [\n  // Row coloring: all cells styled when name contains \"Alicia\"\n  {\n    apply: {\n      color: { value: '#000000' },\n      textColor: { value: '#ffffff' },\n    },\n    column: null,\n    priority: 3,\n    where: { contains: [{ column: 'name' }, 'Alicia'] },\n  },\n  // Cell coloring: cells in the \"age\" column with value 51 get green\n  {\n    apply: { color: { value: '#00bb00' } },\n    column: 'age',\n    priority: 3,\n    where: { equal: [{ column: 'age' }, 51] },\n  },\n  // Dual color ranges on the \"age\" column: independent gradients for background\n  // (driven by age, full 0-100 range) and text color (driven by age too, but\n  // with a narrower 20-80 band so the text contrast is calibrated separately).\n  {\n    apply: {\n      colorRange: {\n        maxColor: '#f00000',\n        maxValue: 100,\n        midColor: '#a00000',\n        midValue: 50,\n        minColor: '#800000',\n        minValue: 0,\n        onColumn: 'age',\n      },\n      textColorRange: {\n        maxColor: '#aaaaaa',\n        maxValue: 80,\n        minColor: '#ffffff',\n        minValue: 20,\n        onColumn: 'age',\n      },\n    },\n    column: 'age',\n    priority: 2, // Lower priority so explicit green rule overrides\n  },\n  // Multi-column rule: all cells styled when age > 50 AND name contains \"o\"\n  {\n    apply: {\n      color: { value: '#fef3c7' },\n      textColor: { value: '#000000' },\n    },\n    column: null,\n    priority: 0, // Lower priority so other rules take precedence\n    where: {\n      and: [\n        { greaterThan: [{ column: 'age' }, 50] },\n        { contains: [{ column: 'name' }, 'o'] },\n      ],\n    },\n  },\n  // Bigint range: adjacent values above Number.MAX_SAFE_INTEGER retain their\n  // precision. Wrapped literals are JSON-safe; BigInt(...) is programmatic.\n  {\n    apply: {\n      colorRange: {\n        maxColor: '#7c3aed',\n        maxValue: BIGINT_ID_START + BigInt(tableData.length - 1),\n        minColor: '#ede9fe',\n        minValue: { bigint: BIGINT_ID_START.toString() },\n        onColumn: 'preciseId',\n      },\n      textColor: { value: '#111827' },\n    },\n    column: 'preciseId',\n    priority: 1,\n  },\n  // Exact bigint comparison using the JSON-safe literal form.\n  {\n    apply: {\n      color: { value: '#4c1d95' },\n      textColor: { value: '#ffffff' },\n    },\n    column: 'preciseId',\n    priority: 2,\n    where: {\n      equal: [\n        { column: 'preciseId' },\n        { bigint: (BIGINT_ID_START + BigInt(2)).toString() },\n      ],\n    },\n  },\n];\n\nconst Component = () => {\n  const columnHelper = createColumnHelper<BigintTestDataFormat>();\n\n  const columns = [\n    columnHelper.accessor('name', {\n      cell: (info) => info.getValue(),\n      header: () => 'Name',\n      minSize: 180,\n      size: 220,\n    }),\n    columnHelper.accessor('age', {\n      cell: (info) => info.renderValue(),\n      header: () => 'Age',\n      minSize: 80,\n    }),\n    columnHelper.accessor('preciseId', {\n      cell: (info) => info.getValue().toString(),\n      header: () => 'Bigint ID',\n      minSize: 180,\n      size: 180,\n    }),\n    columnHelper.accessor('cypherCommand', {\n      cell: (info) => info.getValue(),\n      header: () => 'Cypher Command',\n      minSize: 400,\n      size: 400,\n    }),\n  ];\n\n  const table = useReactTable({\n    columnResizeMode: 'onChange',\n    columns,\n    data: tableData,\n    defaultColumn: {\n      maxSize: 800,\n      minSize: 80,\n    },\n    enableSorting: true,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    initialState: {\n      pagination: {\n        pageSize: 10,\n      },\n    },\n  });\n\n  return (\n    <div className=\"n-w-full n-bg-light-neutral-text-weakest\">\n      <DataGrid\n        isResizable={false}\n        tableInstance={table}\n        isKeyboardNavigable={false}\n        styleRules={styleRules}\n        styling={{\n          borderStyle: 'all-sides',\n          hasHoverEffects: true,\n          hasZebraStriping: false,\n        }}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"datagrid-rule-based-styling.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-rule-based-styling.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DataGrid } from '@neo4j-ndl/react';\nimport {\n  createColumnHelper,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\n\nimport { type DataGridStyleRule } from '../style-rules/types';\nimport { TABLE_DEMO_DATA, type TestDataFormat } from './staticData';\n\ntype BigintTestDataFormat = TestDataFormat & { preciseId: bigint };\n\nconst BIGINT_ID_START = BigInt('9007199254740993');\nconst tableData: BigintTestDataFormat[] = TABLE_DEMO_DATA.map((row, index) => ({\n  ...row,\n  preciseId: BIGINT_ID_START + BigInt(index),\n}));\n\nconst styleRules: DataGridStyleRule[] = [\n  // Row coloring: all cells styled when name contains \"Alicia\"\n  {\n    apply: {\n      color: { value: '#000000' },\n      textColor: { value: '#ffffff' },\n    },\n    column: null,\n    priority: 3,\n    where: { contains: [{ column: 'name' }, 'Alicia'] },\n  },\n  // Cell coloring: cells in the \"age\" column with value 51 get green\n  {\n    apply: { color: { value: '#00bb00' } },\n    column: 'age',\n    priority: 3,\n    where: { equal: [{ column: 'age' }, 51] },\n  },\n  // Dual color ranges on the \"age\" column: independent gradients for background\n  // (driven by age, full 0-100 range) and text color (driven by age too, but\n  // with a narrower 20-80 band so the text contrast is calibrated separately).\n  {\n    apply: {\n      colorRange: {\n        maxColor: '#f00000',\n        maxValue: 100,\n        midColor: '#a00000',\n        midValue: 50,\n        minColor: '#800000',\n        minValue: 0,\n        onColumn: 'age',\n      },\n      textColorRange: {\n        maxColor: '#aaaaaa',\n        maxValue: 80,\n        minColor: '#ffffff',\n        minValue: 20,\n        onColumn: 'age',\n      },\n    },\n    column: 'age',\n    priority: 2, // Lower priority so explicit green rule overrides\n  },\n  // Multi-column rule: all cells styled when age > 50 AND name contains \"o\"\n  {\n    apply: {\n      color: { value: '#fef3c7' },\n      textColor: { value: '#000000' },\n    },\n    column: null,\n    priority: 0, // Lower priority so other rules take precedence\n    where: {\n      and: [\n        { greaterThan: [{ column: 'age' }, 50] },\n        { contains: [{ column: 'name' }, 'o'] },\n      ],\n    },\n  },\n  // Bigint range: adjacent values above Number.MAX_SAFE_INTEGER retain their\n  // precision. Wrapped literals are JSON-safe; BigInt(...) is programmatic.\n  {\n    apply: {\n      colorRange: {\n        maxColor: '#7c3aed',\n        maxValue: BIGINT_ID_START + BigInt(tableData.length - 1),\n        minColor: '#ede9fe',\n        minValue: { bigint: BIGINT_ID_START.toString() },\n        onColumn: 'preciseId',\n      },\n      textColor: { value: '#111827' },\n    },\n    column: 'preciseId',\n    priority: 1,\n  },\n  // Exact bigint comparison using the JSON-safe literal form.\n  {\n    apply: {\n      color: { value: '#4c1d95' },\n      textColor: { value: '#ffffff' },\n    },\n    column: 'preciseId',\n    priority: 2,\n    where: {\n      equal: [\n        { column: 'preciseId' },\n        { bigint: (BIGINT_ID_START + BigInt(2)).toString() },\n      ],\n    },\n  },\n  // Accessible default text color: a background is set but no textColor, so an\n  // accessible text color is chosen automatically for contrast against the\n  // dark background. Compare the cypherCommand cell here with the one below,\n  // which uses the same background but an explicit (low-contrast) textColor.\n  {\n    apply: { color: { value: '#1e3a5f' } },\n    column: 'cypherCommand',\n    priority: 1,\n    where: { equal: [{ column: 'name' }, 'Ken Kessler'] },\n  },\n  // Explicit textColor always wins: even a low-contrast text color is left\n  // untouched -- the automatic accessible default only fills in when no\n  // textColor/textColorRange resolved one.\n  {\n    apply: {\n      color: { value: '#1e3a5f' },\n      textColor: { value: '#fca5a5' },\n    },\n    column: 'cypherCommand',\n    priority: 1,\n    where: { equal: [{ column: 'name' }, 'Jonathon Graham'] },\n  },\n];\n\nconst Component = () => {\n  const columnHelper = createColumnHelper<BigintTestDataFormat>();\n\n  const columns = [\n    columnHelper.accessor('name', {\n      cell: (info) => info.getValue(),\n      header: () => 'Name',\n      minSize: 180,\n      size: 220,\n    }),\n    columnHelper.accessor('age', {\n      cell: (info) => info.renderValue(),\n      header: () => 'Age',\n      minSize: 80,\n    }),\n    columnHelper.accessor('preciseId', {\n      cell: (info) => info.getValue().toString(),\n      header: () => 'Bigint ID',\n      minSize: 180,\n      size: 180,\n    }),\n    columnHelper.accessor('cypherCommand', {\n      cell: (info) => info.getValue(),\n      header: () => 'Cypher Command',\n      minSize: 400,\n      size: 400,\n    }),\n  ];\n\n  const table = useReactTable({\n    columnResizeMode: 'onChange',\n    columns,\n    data: tableData,\n    defaultColumn: {\n      maxSize: 800,\n      minSize: 80,\n    },\n    enableSorting: true,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    initialState: {\n      pagination: {\n        pageSize: 10,\n      },\n    },\n  });\n\n  return (\n    <div className=\"n-w-full n-bg-light-neutral-text-weakest\">\n      <DataGrid\n        isResizable={false}\n        tableInstance={table}\n        isKeyboardNavigable={false}\n        styleRules={styleRules}\n        styling={{\n          borderStyle: 'all-sides',\n          hasHoverEffects: true,\n          hasZebraStriping: false,\n        }}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}