@neo4j-ndl/react 4.3.5 → 4.4.0

package/lib/esm/icons/wrapIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"wrapIcon.js","sourceRoot":"","sources":["../../../src/icons/wrapIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH;;;;;GAKG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,cAAc,GAAG,cAAc,CAAC;AAEtC,MAAM,UAAU,QAAQ,CAA8B,QAAW;IAC/D,MAAM,OAAO,GAAG,CAAC,EAOI,EAAE,EAAE;YAPR,EACf,SAAS,GAAG,EAAE,EACd,KAAK,EACL,GAAG,EACH,cAAc,OAGK,EAFhB,SAAS,cALG,+CAOhB,CAFa;QACZ,mEAAmE;;QAC3C,OAAA;QACxB,qFAAqF;QACrF,KAAC,QAAQ,kBACP,WAAW,EAAE,GAAG,EAChB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,GAAG,cAAc,IAAI,SAAS,EAAE,CAAC,IAAI,EAAE,IAC9C,SAAS,EACT,cAAc,IAClB,GAAG,EAAE,GAAG,IACR,CACH,CAAA;KAAA,CAAC;IAEF,OAAO,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;AAC7B,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\n/**\n * Utility to add common Neo4j-Design styles / behaviour to any HeroIcon.\n *\n * This wrapper is kept in a single place so that the generated icon files\n * can stay **tiny** and tree-shakeable.\n */\nimport React from 'react';\n\nimport type { CommonProps } from '../_common/types';\n\nconst ICON_CLASSNAME = 'ndl-icon-svg';\n\nexport function wrapIcon<T extends React.ElementType>(Original: T) {\n  const Wrapped = ({\n    className = '',\n    style,\n    ref,\n    htmlAttributes,\n    ...restProps\n    // eslint-disable-next-line @typescript-eslint/no-empty-object-type\n  }: CommonProps<T, {}>) => (\n    // @ts-expect-error – Original is of any type and we don't know what props it accepts\n    <Original\n      strokeWidth={1.5}\n      style={style}\n      className={`${ICON_CLASSNAME} ${className}`.trim()}\n      {...restProps}\n      {...htmlAttributes}\n      ref={ref}\n    />\n  );\n\n  return React.memo(Wrapped);\n}\n"]}
+{"version":3,"file":"wrapIcon.js","sourceRoot":"","sources":["../../../src/icons/wrapIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH;;;;;GAKG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,cAAc,GAAG,cAAc,CAAC;AAEtC,MAAM,UAAU,QAAQ,CAA8B,QAAW;IAC/D,MAAM,OAAO,GAAG,CAAC,EAOI,EAAE,EAAE;YAPR,EACf,SAAS,GAAG,EAAE,EACd,KAAK,EACL,GAAG,EACH,cAAc,OAGK,EAFhB,SAAS,cALG,+CAOhB,CAFa;QACZ,mEAAmE;;QAC3C,OAAA;QACxB,qFAAqF;QACrF,KAAC,QAAQ,kBACP,WAAW,EAAE,GAAG,EAChB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,GAAG,cAAc,IAAI,SAAS,EAAE,CAAC,IAAI,EAAE,iBACtC,MAAM,IACd,SAAS,EACT,cAAc,IAClB,GAAG,EAAE,GAAG,IACR,CACH,CAAA;KAAA,CAAC;IAEF,OAAO,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;AAC7B,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\n/**\n * Utility to add common Neo4j-Design styles / behaviour to any HeroIcon.\n *\n * This wrapper is kept in a single place so that the generated icon files\n * can stay **tiny** and tree-shakeable.\n */\nimport React from 'react';\n\nimport type { CommonProps } from '../_common/types';\n\nconst ICON_CLASSNAME = 'ndl-icon-svg';\n\nexport function wrapIcon<T extends React.ElementType>(Original: T) {\n  const Wrapped = ({\n    className = '',\n    style,\n    ref,\n    htmlAttributes,\n    ...restProps\n    // eslint-disable-next-line @typescript-eslint/no-empty-object-type\n  }: CommonProps<T, {}>) => (\n    // @ts-expect-error – Original is of any type and we don't know what props it accepts\n    <Original\n      strokeWidth={1.5}\n      style={style}\n      className={`${ICON_CLASSNAME} ${className}`.trim()}\n      aria-hidden=\"true\"\n      {...restProps}\n      {...htmlAttributes}\n      ref={ref}\n    />\n  );\n\n  return React.memo(Wrapped);\n}\n"]}

package/lib/esm/menu/stories/menu-custom-items.story.js

@@ -26,7 +26,9 @@ import { useRef, useState } from 'react';
 const Component = () => {
     const anchorEl = useRef(null);
     const [isOpen, setIsOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(Menu, { isOpen: isOpen, anchorRef: anchorEl, placement: "top-start-bottom-start", onClose: () => setIsOpen(false), children: _jsxs(Menu.Items, { children: [_jsx(Menu.Item, { title: _jsx(Typography, { variant: "display", children: "This can be any element" }) }), _jsx(Menu.Item, { title: "Danger action 1", className: "n-text-danger-text" }), _jsx(Menu.Item, { title: "Danger action 2", className: "n-text-danger-text", leadingVisual: _jsx(Square2StackIconOutline, { className: "n-text-danger-icon" }) }), _jsx(Menu, { title: "More actions", description: "Some additional actions", children: _jsxs(Menu.Items, { children: [_jsx(Menu.Item, { title: "Danger action 3", className: "n-text-danger-text", isDisabled: true }), _jsx(Menu.Item, { title: "Danger action 4", className: "n-text-danger-text" })] }) })] }) }), _jsx(FilledButton, { onClick: () => setIsOpen(true), ref: anchorEl, children: "Open Menu (set with custom placement)" })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Menu, { isOpen: isOpen, anchorRef: anchorEl, placement: "top-start-bottom-start", onClose: (_event, _data) => {
+                    setIsOpen(false);
+                }, children: _jsxs(Menu.Items, { children: [_jsx(Menu.Item, { title: _jsx(Typography, { variant: "display", children: "This can be any element" }) }), _jsx(Menu.Item, { title: "Danger action 1", className: "n-text-danger-text" }), _jsx(Menu.Item, { title: "Danger action 2", className: "n-text-danger-text", leadingVisual: _jsx(Square2StackIconOutline, { className: "n-text-danger-icon" }) }), _jsx(Menu, { title: "More actions", description: "Some additional actions", children: _jsxs(Menu.Items, { children: [_jsx(Menu.Item, { title: "Danger action 3", className: "n-text-danger-text", isDisabled: true }), _jsx(Menu.Item, { title: "Danger action 4", className: "n-text-danger-text" })] }) })] }) }), _jsx(FilledButton, { onClick: () => setIsOpen(true), ref: anchorEl, children: "Open Menu (set with custom placement)" })] }));
 };
 export default Component;
 //# sourceMappingURL=menu-custom-items.story.js.map

package/lib/esm/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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAClE,OAAO,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,8BACE,KAAC,IAAI,IACH,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,QAAQ,EACnB,SAAS,EAAC,wBAAwB,EAClC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,YAE/B,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EACH,KAAC,UAAU,IAAC,OAAO,EAAC,SAAS,wCAAqC,GAEpE,EACF,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,iBAAiB,EAAC,SAAS,EAAC,oBAAoB,GAAG,EACpE,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,iBAAiB,EACvB,SAAS,EAAC,oBAAoB,EAC9B,aAAa,EACX,KAAC,uBAAuB,IAAC,SAAS,EAAC,oBAAoB,GAAG,GAE5D,EACF,KAAC,IAAI,IAAC,KAAK,EAAC,cAAc,EAAC,WAAW,EAAC,yBAAyB,YAC9D,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,iBAAiB,EACvB,SAAS,EAAC,oBAAoB,EAC9B,UAAU,EAAE,IAAI,GAChB,EACF,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,iBAAiB,EACvB,SAAS,EAAC,oBAAoB,GAC9B,IACS,GACR,IACI,GACR,EACP,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,QAAQ,sDAE5C,IACd,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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=\"top-start-bottom-start\"\n        onClose={() => setIsOpen(false)}\n      >\n        <Menu.Items>\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.Items>\n              <Menu.Item\n                title=\"Danger action 3\"\n                className=\"n-text-danger-text\"\n                isDisabled={true}\n              />\n              <Menu.Item\n                title=\"Danger action 4\"\n                className=\"n-text-danger-text\"\n              />\n            </Menu.Items>\n          </Menu>\n        </Menu.Items>\n      </Menu>\n      <FilledButton onClick={() => setIsOpen(true)} ref={anchorEl}>\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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAClE,OAAO,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,8BACE,KAAC,IAAI,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,YAED,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EACH,KAAC,UAAU,IAAC,OAAO,EAAC,SAAS,wCAAqC,GAEpE,EACF,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,iBAAiB,EAAC,SAAS,EAAC,oBAAoB,GAAG,EACpE,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,iBAAiB,EACvB,SAAS,EAAC,oBAAoB,EAC9B,aAAa,EACX,KAAC,uBAAuB,IAAC,SAAS,EAAC,oBAAoB,GAAG,GAE5D,EACF,KAAC,IAAI,IAAC,KAAK,EAAC,cAAc,EAAC,WAAW,EAAC,yBAAyB,YAC9D,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,iBAAiB,EACvB,SAAS,EAAC,oBAAoB,EAC9B,UAAU,EAAE,IAAI,GAChB,EACF,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,iBAAiB,EACvB,SAAS,EAAC,oBAAoB,GAC9B,IACS,GACR,IACI,GACR,EACP,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,QAAQ,sDAE5C,IACd,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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=\"top-start-bottom-start\"\n        onClose={(_event, _data) => {\n          setIsOpen(false);\n        }}\n      >\n        <Menu.Items>\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.Items>\n              <Menu.Item\n                title=\"Danger action 3\"\n                className=\"n-text-danger-text\"\n                isDisabled={true}\n              />\n              <Menu.Item\n                title=\"Danger action 4\"\n                className=\"n-text-danger-text\"\n              />\n            </Menu.Items>\n          </Menu>\n        </Menu.Items>\n      </Menu>\n      <FilledButton onClick={() => setIsOpen(true)} ref={anchorEl}>\n        Open Menu (set with custom placement)\n      </FilledButton>\n    </>\n  );\n};\n\nexport default Component;\n"]}

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

@@ -25,7 +25,9 @@ import { useRef, useState } from 'react';
 const Component = () => {
     const anchorEl = useRef(null);
     const [isOpen, setIsOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(Menu, { isOpen: isOpen, anchorRef: anchorEl, children: _jsxs(Menu.Items, { children: [_jsx(Menu.Item, { title: "Action 1", onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsx(Menu, { isOpen: isOpen, anchorRef: anchorEl, onClose: (_event, _data) => {
+                    setIsOpen(false);
+                }, children: _jsxs(Menu.Items, { children: [_jsx(Menu.Item, { title: "Action 1", onClick: () => {
                                 alert('Action1');
                                 setIsOpen(false);
                             } }), _jsx(Menu.Item, { title: "Action 2", onClick: () => {

package/lib/esm/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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,8BACE,KAAC,IAAI,IAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,YACvC,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE;gCACZ,KAAK,CAAC,SAAS,CAAC,CAAC;gCACjB,SAAS,CAAC,KAAK,CAAC,CAAC;4BACnB,CAAC,GACD,EACF,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE;gCACZ,KAAK,CAAC,SAAS,CAAC,CAAC;gCACjB,SAAS,CAAC,KAAK,CAAC,CAAC;4BACnB,CAAC,GACD,EACF,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,sBAAsB,EAClC,UAAU,EAAE,IAAI,EAChB,OAAO,EAAE,GAAG,EAAE;gCACZ,KAAK,CAAC,SAAS,CAAC,CAAC;gCACjB,SAAS,CAAC,KAAK,CAAC,CAAC;4BACnB,CAAC,GACD,EACF,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,qBAAqB,EACjC,OAAO,EAAE,GAAG,EAAE;gCACZ,KAAK,CAAC,SAAS,CAAC,CAAC;gCACjB,SAAS,CAAC,KAAK,CAAC,CAAC;4BACnB,CAAC,GACD,EACF,KAAC,IAAI,CAAC,IAAI,IACR,EAAE,EAAC,UAAU,EACb,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,kCAAkC,GAC9C,IACS,GACR,EAEP,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,QAAQ,0BAE5C,IACd,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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 isOpen={isOpen} anchorRef={anchorEl}>\n        <Menu.Items>\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.Items>\n      </Menu>\n\n      <FilledButton onClick={() => setIsOpen(true)} ref={anchorEl}>\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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,8BACE,KAAC,IAAI,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,YAED,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE;gCACZ,KAAK,CAAC,SAAS,CAAC,CAAC;gCACjB,SAAS,CAAC,KAAK,CAAC,CAAC;4BACnB,CAAC,GACD,EACF,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE;gCACZ,KAAK,CAAC,SAAS,CAAC,CAAC;gCACjB,SAAS,CAAC,KAAK,CAAC,CAAC;4BACnB,CAAC,GACD,EACF,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,sBAAsB,EAClC,UAAU,EAAE,IAAI,EAChB,OAAO,EAAE,GAAG,EAAE;gCACZ,KAAK,CAAC,SAAS,CAAC,CAAC;gCACjB,SAAS,CAAC,KAAK,CAAC,CAAC;4BACnB,CAAC,GACD,EACF,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,qBAAqB,EACjC,OAAO,EAAE,GAAG,EAAE;gCACZ,KAAK,CAAC,SAAS,CAAC,CAAC;gCACjB,SAAS,CAAC,KAAK,CAAC,CAAC;4BACnB,CAAC,GACD,EACF,KAAC,IAAI,CAAC,IAAI,IACR,EAAE,EAAC,UAAU,EACb,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,kCAAkC,GAC9C,IACS,GACR,EAEP,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,QAAQ,0BAE5C,IACd,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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      >\n        <Menu.Items>\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.Items>\n      </Menu>\n\n      <FilledButton onClick={() => setIsOpen(true)} ref={anchorEl}>\n        Open Menu\n      </FilledButton>\n    </>\n  );\n};\n\nexport default Component;\n"]}

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

@@ -30,7 +30,11 @@ const Component = () => {
     const handleClick = () => setIsModalOpen((prev) => !prev);
     const handleClose = () => setIsModalOpen(false);
     const handleMenuClick = () => setIsOpen((prev) => !prev);
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "n-flex n-justify-center", children: _jsx(FilledButton, { onClick: handleClick, children: "Open Dialog" }) }), _jsxs(Dialog, { htmlAttributes: { id: 'modal-root' }, isOpen: isModalOpen, onClose: handleClose, children: [_jsx("div", { className: "n-flex n-justify-center", children: _jsx(FilledButton, { onClick: handleMenuClick, ref: anchorEl, children: "Open Menu" }) }), _jsx(Menu, { isOpen: isOpen, anchorRef: anchorEl, portalTarget: document.getElementById('modal-root'), children: _jsxs(Menu.Items, { children: [_jsx(Menu.Item, { title: "Undo", onClick: () => alert('Undo') }), _jsx(Menu.Item, { title: "Redo", isDisabled: true }), _jsx(Menu.Item, { title: "Cut", description: "Copy and remove" }), _jsx(Menu, { title: "Copy as", description: "Copying as something", icon: _jsx(Square2StackIconOutline, {}), children: _jsxs(Menu.Items, { children: [_jsx(Menu.Item, { title: "Text" }), _jsx(Menu.Item, { title: "Video" }), _jsx(Menu, { title: "Image", children: _jsxs(Menu.Items, { children: [_jsx(Menu.Item, { title: ".png" }), _jsx(Menu.Item, { title: ".jpg" }), _jsx(Menu.Item, { title: ".svg" }), _jsx(Menu.Item, { title: ".gif" })] }) }), _jsx(Menu.Item, { title: "Audio" })] }) }), _jsx(Menu, { title: "Share", children: _jsxs(Menu.Items, { children: [_jsx(Menu.Item, { title: "Mail" }), _jsx(Menu.Item, { title: "Instagram" })] }) })] }) })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "n-flex n-justify-center", children: _jsx(FilledButton, { onClick: handleClick, children: "Open Dialog" }) }), _jsxs(Dialog, { htmlAttributes: { id: 'modal-root' }, isOpen: isModalOpen, onClose: handleClose, children: [_jsx("div", { className: "n-flex n-justify-center", children: _jsx(FilledButton, { onClick: handleMenuClick, ref: anchorEl, children: "Open Menu" }) }), _jsx(Menu, { isOpen: isOpen, anchorRef: anchorEl, onClose: (event, _data) => {
+                            setIsOpen(false);
+                            event === null || event === void 0 ? void 0 : event.preventDefault();
+                            event === null || event === void 0 ? void 0 : event.stopPropagation();
+                        }, portalTarget: document.getElementById('modal-root'), children: _jsxs(Menu.Items, { children: [_jsx(Menu.Item, { title: "Undo", onClick: () => alert('Undo') }), _jsx(Menu.Item, { title: "Redo", isDisabled: true }), _jsx(Menu.Item, { title: "Cut", description: "Copy and remove" }), _jsx(Menu, { title: "Copy as", description: "Copying as something", icon: _jsx(Square2StackIconOutline, {}), children: _jsxs(Menu.Items, { children: [_jsx(Menu.Item, { title: "Text" }), _jsx(Menu.Item, { title: "Video" }), _jsx(Menu, { title: "Image", children: _jsxs(Menu.Items, { children: [_jsx(Menu.Item, { title: ".png" }), _jsx(Menu.Item, { title: ".jpg" }), _jsx(Menu.Item, { title: ".svg" }), _jsx(Menu.Item, { title: ".gif" })] }) }), _jsx(Menu.Item, { title: "Audio" })] }) }), _jsx(Menu, { title: "Share", children: _jsxs(Menu.Items, { children: [_jsx(Menu.Item, { title: "Mail" }), _jsx(Menu.Item, { title: "Instagram" })] }) })] }) })] })] }));
 };
 export default Component;
 //# sourceMappingURL=menu-in-dialog.story.js.map

package/lib/esm/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":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEtD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,cAAc,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IAC1D,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IAEzD,OAAO,CACL,8BACE,cAAK,SAAS,EAAC,yBAAyB,YACtC,KAAC,YAAY,IAAC,OAAO,EAAE,WAAW,4BAA4B,GAC1D,EACN,MAAC,MAAM,IACL,cAAc,EAAE,EAAE,EAAE,EAAE,YAAY,EAAE,EACpC,MAAM,EAAE,WAAW,EACnB,OAAO,EAAE,WAAW,aAEpB,cAAK,SAAS,EAAC,yBAAyB,YACtC,KAAC,YAAY,IAAC,OAAO,EAAE,eAAe,EAAE,GAAG,EAAE,QAAQ,0BAEtC,GACX,EACN,KAAC,IAAI,IACH,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,QAAQ,EACnB,YAAY,EAAE,QAAQ,CAAC,cAAc,CAAC,YAAY,CAAC,YAEnD,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,GAAI,EACxD,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,EAAC,UAAU,SAAG,EACrC,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,KAAK,EAAC,WAAW,EAAC,iBAAiB,GAAG,EACvD,KAAC,IAAI,IACH,KAAK,EAAC,SAAS,EACf,WAAW,EAAC,sBAAsB,EAClC,IAAI,EAAE,KAAC,uBAAuB,KAAG,YAEjC,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,OAAO,GAAG,EAC3B,KAAC,IAAI,IAAC,KAAK,EAAC,OAAO,YACjB,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,IACf,GACR,EACP,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,OAAO,GAAG,IAChB,GACR,EACP,KAAC,IAAI,IAAC,KAAK,EAAC,OAAO,YACjB,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,WAAW,GAAG,IACpB,GACR,IACI,GACR,IACA,IACR,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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 { 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        <div className=\"n-flex n-justify-center\">\n          <FilledButton onClick={handleMenuClick} ref={anchorEl}>\n            Open Menu\n          </FilledButton>\n        </div>\n        <Menu\n          isOpen={isOpen}\n          anchorRef={anchorEl}\n          portalTarget={document.getElementById('modal-root')}\n        >\n          <Menu.Items>\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.Items>\n                <Menu.Item title=\"Text\" />\n                <Menu.Item title=\"Video\" />\n                <Menu title=\"Image\">\n                  <Menu.Items>\n                    <Menu.Item title=\".png\" />\n                    <Menu.Item title=\".jpg\" />\n                    <Menu.Item title=\".svg\" />\n                    <Menu.Item title=\".gif\" />\n                  </Menu.Items>\n                </Menu>\n                <Menu.Item title=\"Audio\" />\n              </Menu.Items>\n            </Menu>\n            <Menu title=\"Share\">\n              <Menu.Items>\n                <Menu.Item title=\"Mail\" />\n                <Menu.Item title=\"Instagram\" />\n              </Menu.Items>\n            </Menu>\n          </Menu.Items>\n        </Menu>\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":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEtD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,cAAc,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IAC1D,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IAEzD,OAAO,CACL,8BACE,cAAK,SAAS,EAAC,yBAAyB,YACtC,KAAC,YAAY,IAAC,OAAO,EAAE,WAAW,4BAA4B,GAC1D,EACN,MAAC,MAAM,IACL,cAAc,EAAE,EAAE,EAAE,EAAE,YAAY,EAAE,EACpC,MAAM,EAAE,WAAW,EACnB,OAAO,EAAE,WAAW,aAEpB,cAAK,SAAS,EAAC,yBAAyB,YACtC,KAAC,YAAY,IAAC,OAAO,EAAE,eAAe,EAAE,GAAG,EAAE,QAAQ,0BAEtC,GACX,EACN,KAAC,IAAI,IACH,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,QAAQ,EACnB,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;4BACxB,SAAS,CAAC,KAAK,CAAC,CAAC;4BACjB,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAc,EAAE,CAAC;4BACxB,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,EAAE,CAAC;wBAC3B,CAAC,EACD,YAAY,EAAE,QAAQ,CAAC,cAAc,CAAC,YAAY,CAAC,YAEnD,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,GAAI,EACxD,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,EAAC,UAAU,SAAG,EACrC,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,KAAK,EAAC,WAAW,EAAC,iBAAiB,GAAG,EACvD,KAAC,IAAI,IACH,KAAK,EAAC,SAAS,EACf,WAAW,EAAC,sBAAsB,EAClC,IAAI,EAAE,KAAC,uBAAuB,KAAG,YAEjC,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,OAAO,GAAG,EAC3B,KAAC,IAAI,IAAC,KAAK,EAAC,OAAO,YACjB,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,IACf,GACR,EACP,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,OAAO,GAAG,IAChB,GACR,EACP,KAAC,IAAI,IAAC,KAAK,EAAC,OAAO,YACjB,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,WAAW,GAAG,IACpB,GACR,IACI,GACR,IACA,IACR,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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 { 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        <div className=\"n-flex n-justify-center\">\n          <FilledButton onClick={handleMenuClick} ref={anchorEl}>\n            Open Menu\n          </FilledButton>\n        </div>\n        <Menu\n          isOpen={isOpen}\n          anchorRef={anchorEl}\n          onClose={(event, _data) => {\n            setIsOpen(false);\n            event?.preventDefault();\n            event?.stopPropagation();\n          }}\n          portalTarget={document.getElementById('modal-root')}\n        >\n          <Menu.Items>\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.Items>\n                <Menu.Item title=\"Text\" />\n                <Menu.Item title=\"Video\" />\n                <Menu title=\"Image\">\n                  <Menu.Items>\n                    <Menu.Item title=\".png\" />\n                    <Menu.Item title=\".jpg\" />\n                    <Menu.Item title=\".svg\" />\n                    <Menu.Item title=\".gif\" />\n                  </Menu.Items>\n                </Menu>\n                <Menu.Item title=\"Audio\" />\n              </Menu.Items>\n            </Menu>\n            <Menu title=\"Share\">\n              <Menu.Items>\n                <Menu.Item title=\"Mail\" />\n                <Menu.Item title=\"Instagram\" />\n              </Menu.Items>\n            </Menu>\n          </Menu.Items>\n        </Menu>\n      </Dialog>\n    </>\n  );\n};\n\nexport default Component;\n"]}

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

@@ -26,7 +26,9 @@ const Component = () => {
     const anchorEl = useRef(null);
     const [isOpen, setIsOpen] = useState(false);
     const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(Menu, { isOpen: isOpen, anchorRef: anchorEl, onClose: () => setIsOpen(false), children: _jsxs(Menu.Items, { children: [_jsx(Menu.Item, { title: "Action 1", onClick: () => alert('Action1') }), _jsx(Menu.Item, { title: "Action 2", onClick: () => alert('Action2') }), _jsx(Menu.Item, { title: "Action 3", description: "Action 3 is disabled", isDisabled: true, onClick: () => alert('Action3') }), _jsx(Menu.Item, { title: "Action 4", description: "Action 4 is awesome", onClick: () => alert('Action4') })] }) }), _jsxs(Popover, { isOpen: isPopoverOpen, children: [_jsx(Popover.Trigger, { children: _jsxs(FilledButton, { onClick: () => setIsPopoverOpen(!isPopoverOpen), children: [isPopoverOpen ? 'Close' : 'Open', " Popover"] }) }), _jsx(Popover.Content, { style: { height: 150, overflow: 'auto', width: 400 }, children: _jsxs(_Fragment, { children: [_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." }), _jsx(FilledButton, { onClick: () => setIsOpen(true), ref: anchorEl, children: "Open Context Menu" })] }) })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Menu, { isOpen: isOpen, anchorRef: anchorEl, onClose: (_event, _data) => {
+                    setIsOpen(false);
+                }, children: _jsxs(Menu.Items, { children: [_jsx(Menu.Item, { title: "Action 1", onClick: () => alert('Action1') }), _jsx(Menu.Item, { title: "Action 2", onClick: () => alert('Action2') }), _jsx(Menu.Item, { title: "Action 3", description: "Action 3 is disabled", isDisabled: true, onClick: () => alert('Action3') }), _jsx(Menu.Item, { title: "Action 4", description: "Action 4 is awesome", onClick: () => alert('Action4') })] }) }), _jsxs(Popover, { isOpen: isPopoverOpen, children: [_jsx(Popover.Trigger, { children: _jsxs(FilledButton, { onClick: () => setIsPopoverOpen(!isPopoverOpen), children: [isPopoverOpen ? 'Close' : 'Open', " Popover"] }) }), _jsx(Popover.Content, { style: { height: 150, overflow: 'auto', width: 400 }, children: _jsxs(_Fragment, { children: [_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." }), _jsx(FilledButton, { onClick: () => setIsOpen(true), ref: anchorEl, children: "Open Context Menu" })] }) })] })] }));
 };
 export default Component;
 //# sourceMappingURL=menu-in-popover.story.js.map

package/lib/esm/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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1D,OAAO,CACL,8BACE,KAAC,IAAI,IACH,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,QAAQ,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,YAE/B,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAAI,EAC/D,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAAI,EAC/D,KAAC,IAAI,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,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,qBAAqB,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAC/B,IACS,GACR,EAEP,MAAC,OAAO,IAAC,MAAM,EAAE,aAAa,aAC5B,KAAC,OAAO,CAAC,OAAO,cACd,MAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,CAAC,aAAa,CAAC,aAC1D,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,gBACpB,GACC,EAClB,KAAC,OAAO,CAAC,OAAO,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,YACnE,8BACE,6fASI,EACJ,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,QAAQ,kCAE5C,IACd,GACa,IACV,IACT,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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={() => setIsOpen(false)}\n      >\n        <Menu.Items>\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.Items>\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 onClick={() => setIsOpen(true)} ref={anchorEl}>\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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1D,OAAO,CACL,8BACE,KAAC,IAAI,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,YAED,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAAI,EAC/D,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAAI,EAC/D,KAAC,IAAI,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,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,qBAAqB,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAC/B,IACS,GACR,EAEP,MAAC,OAAO,IAAC,MAAM,EAAE,aAAa,aAC5B,KAAC,OAAO,CAAC,OAAO,cACd,MAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,CAAC,aAAa,CAAC,aAC1D,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,gBACpB,GACC,EAClB,KAAC,OAAO,CAAC,OAAO,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,YACnE,8BACE,6fASI,EACJ,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,QAAQ,kCAE5C,IACd,GACa,IACV,IACT,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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      >\n        <Menu.Items>\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.Items>\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 onClick={() => setIsOpen(true)} ref={anchorEl}>\n              Open Context Menu\n            </FilledButton>\n          </>\n        </Popover.Content>\n      </Popover>\n    </>\n  );\n};\n\nexport default Component;\n"]}

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

@@ -26,7 +26,9 @@ import { useRef, useState } from 'react';
 const Component = () => {
     const anchorEl = useRef(null);
     const [isOpen, setIsOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(Menu, { isOpen: isOpen, anchorRef: anchorEl, onClose: () => setIsOpen(false), children: _jsxs(Menu.Items, { children: [_jsx(Menu.Item, { title: "Undo", onClick: () => alert('Undo') }), _jsx(Menu.Item, { title: "Redo", isDisabled: true }), _jsx(Menu.Item, { title: "Cut", description: "Copy and remove" }), _jsx(Menu, { title: "Copy as", description: "Copying as something", icon: _jsx(Square2StackIconOutline, {}), children: _jsxs(Menu.Items, { children: [_jsx(Menu.Item, { title: "Text" }), _jsx(Menu.Item, { title: "Video" }), _jsx(Menu, { title: "Image", children: _jsxs(Menu.Items, { children: [_jsx(Menu.Item, { title: ".png" }), _jsx(Menu.Item, { title: ".jpg" }), _jsx(Menu.Item, { title: ".svg" }), _jsx(Menu.Item, { title: ".gif" })] }) }), _jsx(Menu.Item, { title: "Audio" })] }) }), _jsx(Menu, { title: "Share", children: _jsxs(Menu.Items, { children: [_jsx(Menu.Item, { title: "Mail" }), _jsx(Menu.Item, { title: "Instagram" })] }) })] }) }), _jsx(FilledButton, { onClick: () => setIsOpen(true), ref: anchorEl, children: "Open Menu" })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Menu, { isOpen: isOpen, anchorRef: anchorEl, onClose: (_event, _data) => {
+                    setIsOpen(false);
+                }, children: _jsxs(Menu.Items, { children: [_jsx(Menu.Item, { title: "Undo", onClick: () => alert('Undo') }), _jsx(Menu.Item, { title: "Redo", isDisabled: true }), _jsx(Menu.Item, { title: "Cut", description: "Copy and remove" }), _jsx(Menu, { title: "Copy as", description: "Copying as something", icon: _jsx(Square2StackIconOutline, {}), children: _jsxs(Menu.Items, { children: [_jsx(Menu.Item, { title: "Text" }), _jsx(Menu.Item, { title: "Video" }), _jsx(Menu, { title: "Image", children: _jsxs(Menu.Items, { children: [_jsx(Menu.Item, { title: ".png" }), _jsx(Menu.Item, { title: ".jpg" }), _jsx(Menu.Item, { title: ".svg" }), _jsx(Menu.Item, { title: ".gif" })] }) }), _jsx(Menu.Item, { title: "Audio" })] }) }), _jsx(Menu, { title: "Share", children: _jsxs(Menu.Items, { children: [_jsx(Menu.Item, { title: "Mail" }), _jsx(Menu.Item, { title: "Instagram" })] }) })] }) }), _jsx(FilledButton, { onClick: () => setIsOpen(true), ref: anchorEl, children: "Open Menu" })] }));
 };
 export default Component;
 //# sourceMappingURL=menu-nested.story.js.map

package/lib/esm/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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,8BACE,KAAC,IAAI,IACH,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,QAAQ,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,YAE/B,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,GAAI,EACxD,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,EAAC,UAAU,SAAG,EACrC,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,KAAK,EAAC,WAAW,EAAC,iBAAiB,GAAG,EACvD,KAAC,IAAI,IACH,KAAK,EAAC,SAAS,EACf,WAAW,EAAC,sBAAsB,EAClC,IAAI,EAAE,KAAC,uBAAuB,KAAG,YAEjC,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,OAAO,GAAG,EAC3B,KAAC,IAAI,IAAC,KAAK,EAAC,OAAO,YACjB,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,IACf,GACR,EACP,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,OAAO,GAAG,IAChB,GACR,EACP,KAAC,IAAI,IAAC,KAAK,EAAC,OAAO,YACjB,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,WAAW,GAAG,IACpB,GACR,IACI,GACR,EACP,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,QAAQ,0BAE5C,IACd,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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={() => setIsOpen(false)}\n      >\n        <Menu.Items>\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.Items>\n              <Menu.Item title=\"Text\" />\n              <Menu.Item title=\"Video\" />\n              <Menu title=\"Image\">\n                <Menu.Items>\n                  <Menu.Item title=\".png\" />\n                  <Menu.Item title=\".jpg\" />\n                  <Menu.Item title=\".svg\" />\n                  <Menu.Item title=\".gif\" />\n                </Menu.Items>\n              </Menu>\n              <Menu.Item title=\"Audio\" />\n            </Menu.Items>\n          </Menu>\n          <Menu title=\"Share\">\n            <Menu.Items>\n              <Menu.Item title=\"Mail\" />\n              <Menu.Item title=\"Instagram\" />\n            </Menu.Items>\n          </Menu>\n        </Menu.Items>\n      </Menu>\n      <FilledButton onClick={() => setIsOpen(true)} ref={anchorEl}>\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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,8BACE,KAAC,IAAI,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,YAED,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,GAAI,EACxD,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,EAAC,UAAU,SAAG,EACrC,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,KAAK,EAAC,WAAW,EAAC,iBAAiB,GAAG,EACvD,KAAC,IAAI,IACH,KAAK,EAAC,SAAS,EACf,WAAW,EAAC,sBAAsB,EAClC,IAAI,EAAE,KAAC,uBAAuB,KAAG,YAEjC,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,OAAO,GAAG,EAC3B,KAAC,IAAI,IAAC,KAAK,EAAC,OAAO,YACjB,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,IACf,GACR,EACP,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,OAAO,GAAG,IAChB,GACR,EACP,KAAC,IAAI,IAAC,KAAK,EAAC,OAAO,YACjB,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,WAAW,GAAG,IACpB,GACR,IACI,GACR,EACP,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,QAAQ,0BAE5C,IACd,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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      >\n        <Menu.Items>\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.Items>\n              <Menu.Item title=\"Text\" />\n              <Menu.Item title=\"Video\" />\n              <Menu title=\"Image\">\n                <Menu.Items>\n                  <Menu.Item title=\".png\" />\n                  <Menu.Item title=\".jpg\" />\n                  <Menu.Item title=\".svg\" />\n                  <Menu.Item title=\".gif\" />\n                </Menu.Items>\n              </Menu>\n              <Menu.Item title=\"Audio\" />\n            </Menu.Items>\n          </Menu>\n          <Menu title=\"Share\">\n            <Menu.Items>\n              <Menu.Item title=\"Mail\" />\n              <Menu.Item title=\"Instagram\" />\n            </Menu.Items>\n          </Menu>\n        </Menu.Items>\n      </Menu>\n      <FilledButton onClick={() => setIsOpen(true)} ref={anchorEl}>\n        Open Menu\n      </FilledButton>\n    </>\n  );\n};\n\nexport default Component;\n"]}

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

@@ -25,7 +25,9 @@ import { useRef, useState } from 'react';
 const Component = () => {
     const anchorEl = useRef(null);
     const [isOpen, setIsOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(Menu, { isOpen: isOpen, anchorRef: anchorEl, placement: "middle-end-middle-start", onClose: () => setIsOpen(false), children: _jsxs(Menu.Items, { children: [_jsx(Menu.Item, { title: "Action 1", onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsx(Menu, { isOpen: isOpen, anchorRef: anchorEl, placement: "middle-end-middle-start", onClose: (_event, _data) => {
+                    setIsOpen(false);
+                }, children: _jsxs(Menu.Items, { children: [_jsx(Menu.Item, { title: "Action 1", onClick: () => {
                                 alert('Action1');
                                 setIsOpen(false);
                             } }), _jsx(Menu.Item, { title: "Action 2", onClick: () => {

package/lib/esm/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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,8BACE,KAAC,IAAI,IACH,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,QAAQ,EACnB,SAAS,EAAC,yBAAyB,EACnC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,YAE/B,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE;gCACZ,KAAK,CAAC,SAAS,CAAC,CAAC;gCACjB,SAAS,CAAC,KAAK,CAAC,CAAC;4BACnB,CAAC,GACD,EACF,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE;gCACZ,KAAK,CAAC,SAAS,CAAC,CAAC;gCACjB,SAAS,CAAC,KAAK,CAAC,CAAC;4BACnB,CAAC,GACD,EACF,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,sBAAsB,EAClC,UAAU,EAAE,IAAI,EAChB,OAAO,EAAE,GAAG,EAAE;gCACZ,KAAK,CAAC,SAAS,CAAC,CAAC;gCACjB,SAAS,CAAC,KAAK,CAAC,CAAC;4BACnB,CAAC,GACD,EACF,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,qBAAqB,EACjC,OAAO,EAAE,GAAG,EAAE;gCACZ,KAAK,CAAC,SAAS,CAAC,CAAC;gCACjB,SAAS,CAAC,KAAK,CAAC,CAAC;4BACnB,CAAC,GACD,EACF,KAAC,IAAI,CAAC,IAAI,IACR,EAAE,EAAC,UAAU,EACb,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,kCAAkC,GAC9C,IACS,GACR,EAEP,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,QAAQ,0BAE5C,IACd,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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={() => setIsOpen(false)}\n      >\n        <Menu.Items>\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.Items>\n      </Menu>\n\n      <FilledButton onClick={() => setIsOpen(true)} ref={anchorEl}>\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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,8BACE,KAAC,IAAI,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,YAED,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE;gCACZ,KAAK,CAAC,SAAS,CAAC,CAAC;gCACjB,SAAS,CAAC,KAAK,CAAC,CAAC;4BACnB,CAAC,GACD,EACF,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE;gCACZ,KAAK,CAAC,SAAS,CAAC,CAAC;gCACjB,SAAS,CAAC,KAAK,CAAC,CAAC;4BACnB,CAAC,GACD,EACF,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,sBAAsB,EAClC,UAAU,EAAE,IAAI,EAChB,OAAO,EAAE,GAAG,EAAE;gCACZ,KAAK,CAAC,SAAS,CAAC,CAAC;gCACjB,SAAS,CAAC,KAAK,CAAC,CAAC;4BACnB,CAAC,GACD,EACF,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,qBAAqB,EACjC,OAAO,EAAE,GAAG,EAAE;gCACZ,KAAK,CAAC,SAAS,CAAC,CAAC;gCACjB,SAAS,CAAC,KAAK,CAAC,CAAC;4BACnB,CAAC,GACD,EACF,KAAC,IAAI,CAAC,IAAI,IACR,EAAE,EAAC,UAAU,EACb,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,kCAAkC,GAC9C,IACS,GACR,EAEP,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,QAAQ,0BAE5C,IACd,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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      >\n        <Menu.Items>\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.Items>\n      </Menu>\n\n      <FilledButton onClick={() => setIsOpen(true)} ref={anchorEl}>\n        Open Menu\n      </FilledButton>\n    </>\n  );\n};\n\nexport default Component;\n"]}

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

@@ -25,8 +25,7 @@ import { useRef, useState } from 'react';
 const Component = () => {
     const anchorEl = useRef(null);
     const [isOpen, setIsOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(Menu, { isOpen: isOpen, anchorRef: anchorEl, onClose: (event, data) => {
-                    console.info('onClose callback', event, data);
+    return (_jsxs(_Fragment, { children: [_jsx(Menu, { isOpen: isOpen, anchorRef: anchorEl, onClose: (_event, _data) => {
                     setIsOpen(false);
                 }, children: _jsxs(Menu.Items, { children: [_jsx(Menu.CategoryItem, { children: "Category 1" }), _jsx(Menu.Item, { title: "Action 1", onClick: () => alert('Action1') }), _jsx(Menu.Item, { title: "Action 2", onClick: () => alert('Action2') }), _jsx(Menu.Divider, {}), _jsx(Menu.Item, { title: "Action 3", description: "Action 3 is disabled", isDisabled: true, onClick: () => alert('Action3') }), _jsx(Menu.Item, { title: "Action 4", description: "Action 4 is awesome", onClick: () => alert('Action4') })] }) }), _jsx(FilledButton, { onClick: () => setIsOpen(true), ref: anchorEl, children: "Open Menu" })] }));
 };

package/lib/esm/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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,8BACE,KAAC,IAAI,IACH,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,QAAQ,EACnB,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE;oBACvB,OAAO,CAAC,IAAI,CAAC,kBAAkB,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;oBAC9C,SAAS,CAAC,KAAK,CAAC,CAAC;gBACnB,CAAC,YAED,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,YAAY,6BAA+B,EACjD,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAAI,EAC/D,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAAI,EAC/D,KAAC,IAAI,CAAC,OAAO,KAAG,EAChB,KAAC,IAAI,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,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,qBAAqB,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAC/B,IACS,GACR,EACP,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,QAAQ,0BAE5C,IACd,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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          console.info('onClose callback', event, data);\n          setIsOpen(false);\n        }}\n      >\n        <Menu.Items>\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.Divider />\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.Items>\n      </Menu>\n      <FilledButton onClick={() => setIsOpen(true)} ref={anchorEl}>\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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,8BACE,KAAC,IAAI,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,YAED,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,YAAY,6BAA+B,EACjD,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAAI,EAC/D,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAAI,EAC/D,KAAC,IAAI,CAAC,OAAO,KAAG,EAChB,KAAC,IAAI,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,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,qBAAqB,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAC/B,IACS,GACR,EACP,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,QAAQ,0BAE5C,IACd,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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      >\n        <Menu.Items>\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.Divider />\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.Items>\n      </Menu>\n      <FilledButton onClick={() => setIsOpen(true)} ref={anchorEl}>\n        Open Menu\n      </FilledButton>\n    </>\n  );\n};\n\nexport default Component;\n"]}

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

@@ -25,8 +25,7 @@ import { useRef, useState } from 'react';
 const Component = () => {
     const anchorEl = useRef(null);
     const [isOpen, setIsOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(Menu, { isOpen: isOpen, anchorRef: anchorEl, onClose: (event, data) => {
-                    console.info('onClose callback', event, data);
+    return (_jsxs(_Fragment, { children: [_jsx(Menu, { isOpen: isOpen, anchorRef: anchorEl, onClose: (_event, _data) => {
                     setIsOpen(false);
                 }, children: _jsxs(Menu.Items, { children: [_jsx(Menu.Item, { title: "Action 1", description: "Action 1 is disabled", isDisabled: true }), _jsx(Menu.Item, { title: "Action 2", onClick: () => alert('Action2') })] }) }), _jsx(FilledButton, { onClick: () => setIsOpen(true), ref: anchorEl, children: "Open Menu" })] }));
 };

package/lib/esm/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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,8BACE,KAAC,IAAI,IACH,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,QAAQ,EACnB,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE;oBACvB,OAAO,CAAC,IAAI,CAAC,kBAAkB,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;oBAC9C,SAAS,CAAC,KAAK,CAAC,CAAC;gBACnB,CAAC,YAED,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,sBAAsB,EAClC,UAAU,EAAE,IAAI,GAChB,EACF,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAAI,IACpD,GACR,EACP,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,QAAQ,0BAE5C,IACd,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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          console.info('onClose callback', event, data);\n          setIsOpen(false);\n        }}\n      >\n        <Menu.Items>\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.Items>\n      </Menu>\n      <FilledButton onClick={() => setIsOpen(true)} ref={anchorEl}>\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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,8BACE,KAAC,IAAI,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,YAED,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,sBAAsB,EAClC,UAAU,EAAE,IAAI,GAChB,EACF,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAAI,IACpD,GACR,EACP,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,QAAQ,0BAE5C,IACd,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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      >\n        <Menu.Items>\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.Items>\n      </Menu>\n      <FilledButton onClick={() => setIsOpen(true)} ref={anchorEl}>\n        Open Menu\n      </FilledButton>\n    </>\n  );\n};\n\nexport default Component;\n"]}

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

@@ -25,8 +25,7 @@ import { useRef, useState } from 'react';
 const Component = () => {
     const anchorEl = useRef(null);
     const [isOpen, setIsOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(Menu, { isOpen: isOpen, anchorRef: anchorEl, onClose: (event, data) => {
-                    console.info('onClose callback', event, data);
+    return (_jsxs(_Fragment, { children: [_jsx(Menu, { isOpen: isOpen, anchorRef: anchorEl, onClose: (_event, _data) => {
                     setIsOpen(false);
                 }, children: _jsxs(Menu.Items, { children: [_jsx(Menu.Item, { title: "Action 1" }), _jsx(Menu.Divider, {}), _jsx(Menu.Item, { title: "Action 2" }), _jsx(Menu.Divider, {}), _jsx(Menu.Item, { title: "Action 3" }), _jsx(Menu.Divider, {}), _jsx(Menu.Item, { title: "Action 4" })] }) }), _jsx(FilledButton, { onClick: () => setIsOpen(true), ref: anchorEl, children: "Open Menu" })] }));
 };

package/lib/esm/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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,8BACE,KAAC,IAAI,IACH,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,QAAQ,EACnB,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE;oBACvB,OAAO,CAAC,IAAI,CAAC,kBAAkB,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;oBAC9C,SAAS,CAAC,KAAK,CAAC,CAAC;gBACnB,CAAC,YAED,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,GAAG,EAC9B,KAAC,IAAI,CAAC,OAAO,KAAG,EAChB,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,GAAG,EAC9B,KAAC,IAAI,CAAC,OAAO,KAAG,EAChB,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,GAAG,EAC9B,KAAC,IAAI,CAAC,OAAO,KAAG,EAChB,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,GAAG,IACnB,GACR,EACP,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,QAAQ,0BAE5C,IACd,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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          console.info('onClose callback', event, data);\n          setIsOpen(false);\n        }}\n      >\n        <Menu.Items>\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.Items>\n      </Menu>\n      <FilledButton onClick={() => setIsOpen(true)} ref={anchorEl}>\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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,8BACE,KAAC,IAAI,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,YAED,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,GAAG,EAC9B,KAAC,IAAI,CAAC,OAAO,KAAG,EAChB,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,GAAG,EAC9B,KAAC,IAAI,CAAC,OAAO,KAAG,EAChB,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,GAAG,EAC9B,KAAC,IAAI,CAAC,OAAO,KAAG,EAChB,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,GAAG,IACnB,GACR,EACP,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,QAAQ,0BAE5C,IACd,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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      >\n        <Menu.Items>\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.Items>\n      </Menu>\n      <FilledButton onClick={() => setIsOpen(true)} ref={anchorEl}>\n        Open Menu\n      </FilledButton>\n    </>\n  );\n};\n\nexport default Component;\n"]}

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

@@ -26,7 +26,9 @@ import { useRef, useState } from 'react';
 const Component = () => {
     const anchorEl = useRef(null);
     const [isOpen, setIsOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(Menu, { isOpen: isOpen, anchorRef: anchorEl, onClose: () => setIsOpen(false), children: _jsxs(Menu.Items, { children: [_jsx(Menu.Item, { leadingVisual: _jsx(PlusIconOutline, {}), title: "Action 1", onClick: () => alert('Action1') }), _jsx(Menu.Item, { leadingVisual: _jsx(PlusIconOutline, {}), title: "Action 2", onClick: () => alert('Action2') }), _jsx(Menu.Item, { leadingVisual: _jsx(PlusIconOutline, {}), title: "Action 3", description: "Action 3 is disabled", isDisabled: true, onClick: () => alert('Action3') }), _jsx(Menu, { title: "Action 3.1", description: "Action with sub menu", icon: _jsx(PlusIconOutline, {}), children: _jsxs(Menu.Items, { children: [_jsx(Menu.Item, { title: "Text" }), _jsx(Menu.Item, { title: "Video" }), _jsx(Menu, { title: "Image", icon: _jsx(PhotoIconOutline, {}), children: _jsxs(Menu.Items, { children: [_jsx(Menu.Item, { title: ".png" }), _jsx(Menu.Item, { title: ".jpg" })] }) }), _jsx(Menu.Item, { title: "Audio" })] }) }), _jsx(Menu.Item, { leadingVisual: _jsx(PlusIconOutline, {}), title: "Action 4", description: "Action 4 is awesome", onClick: () => alert('Action4') })] }) }), _jsx(FilledButton, { onClick: () => setIsOpen(true), ref: anchorEl, children: "Open Menu" })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Menu, { isOpen: isOpen, anchorRef: anchorEl, onClose: (_event, _data) => {
+                    setIsOpen(false);
+                }, children: _jsxs(Menu.Items, { children: [_jsx(Menu.Item, { leadingVisual: _jsx(PlusIconOutline, {}), title: "Action 1", onClick: () => alert('Action1') }), _jsx(Menu.Item, { leadingVisual: _jsx(PlusIconOutline, {}), title: "Action 2", onClick: () => alert('Action2') }), _jsx(Menu.Item, { leadingVisual: _jsx(PlusIconOutline, {}), title: "Action 3", description: "Action 3 is disabled", isDisabled: true, onClick: () => alert('Action3') }), _jsx(Menu, { title: "Action 3.1", description: "Action with sub menu", icon: _jsx(PlusIconOutline, {}), children: _jsxs(Menu.Items, { children: [_jsx(Menu.Item, { title: "Text" }), _jsx(Menu.Item, { title: "Video" }), _jsx(Menu, { title: "Image", icon: _jsx(PhotoIconOutline, {}), children: _jsxs(Menu.Items, { children: [_jsx(Menu.Item, { title: ".png" }), _jsx(Menu.Item, { title: ".jpg" })] }) }), _jsx(Menu.Item, { title: "Audio" })] }) }), _jsx(Menu.Item, { leadingVisual: _jsx(PlusIconOutline, {}), title: "Action 4", description: "Action 4 is awesome", onClick: () => alert('Action4') })] }) }), _jsx(FilledButton, { onClick: () => setIsOpen(true), ref: anchorEl, children: "Open Menu" })] }));
 };
 export default Component;
 //# sourceMappingURL=menu-with-icon.story.js.map

package/lib/esm/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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC3E,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,8BACE,KAAC,IAAI,IACH,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,QAAQ,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,YAE/B,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IACR,aAAa,EAAE,KAAC,eAAe,KAAG,EAClC,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAC/B,EACF,KAAC,IAAI,CAAC,IAAI,IACR,aAAa,EAAE,KAAC,eAAe,KAAG,EAClC,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAC/B,EACF,KAAC,IAAI,CAAC,IAAI,IACR,aAAa,EAAE,KAAC,eAAe,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,KAAC,IAAI,IACH,KAAK,EAAC,YAAY,EAClB,WAAW,EAAC,sBAAsB,EAClC,IAAI,EAAE,KAAC,eAAe,KAAG,YAEzB,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,OAAO,GAAG,EAC3B,KAAC,IAAI,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,KAAC,gBAAgB,KAAG,YAC5C,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,IACf,GACR,EACP,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,OAAO,GAAG,IAChB,GACR,EACP,KAAC,IAAI,CAAC,IAAI,IACR,aAAa,EAAE,KAAC,eAAe,KAAG,EAClC,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,qBAAqB,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAC/B,IACS,GACR,EACP,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,QAAQ,0BAE5C,IACd,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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={() => setIsOpen(false)}\n      >\n        <Menu.Items>\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.Items>\n              <Menu.Item title=\"Text\" />\n              <Menu.Item title=\"Video\" />\n              <Menu title=\"Image\" icon={<PhotoIconOutline />}>\n                <Menu.Items>\n                  <Menu.Item title=\".png\" />\n                  <Menu.Item title=\".jpg\" />\n                </Menu.Items>\n              </Menu>\n              <Menu.Item title=\"Audio\" />\n            </Menu.Items>\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.Items>\n      </Menu>\n      <FilledButton onClick={() => setIsOpen(true)} ref={anchorEl}>\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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC3E,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,8BACE,KAAC,IAAI,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,YAED,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IACR,aAAa,EAAE,KAAC,eAAe,KAAG,EAClC,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAC/B,EACF,KAAC,IAAI,CAAC,IAAI,IACR,aAAa,EAAE,KAAC,eAAe,KAAG,EAClC,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAC/B,EACF,KAAC,IAAI,CAAC,IAAI,IACR,aAAa,EAAE,KAAC,eAAe,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,KAAC,IAAI,IACH,KAAK,EAAC,YAAY,EAClB,WAAW,EAAC,sBAAsB,EAClC,IAAI,EAAE,KAAC,eAAe,KAAG,YAEzB,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,OAAO,GAAG,EAC3B,KAAC,IAAI,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,KAAC,gBAAgB,KAAG,YAC5C,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,IACf,GACR,EACP,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,OAAO,GAAG,IAChB,GACR,EACP,KAAC,IAAI,CAAC,IAAI,IACR,aAAa,EAAE,KAAC,eAAe,KAAG,EAClC,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,qBAAqB,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAC/B,IACS,GACR,EACP,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,QAAQ,0BAE5C,IACd,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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      >\n        <Menu.Items>\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.Items>\n              <Menu.Item title=\"Text\" />\n              <Menu.Item title=\"Video\" />\n              <Menu title=\"Image\" icon={<PhotoIconOutline />}>\n                <Menu.Items>\n                  <Menu.Item title=\".png\" />\n                  <Menu.Item title=\".jpg\" />\n                </Menu.Items>\n              </Menu>\n              <Menu.Item title=\"Audio\" />\n            </Menu.Items>\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.Items>\n      </Menu>\n      <FilledButton onClick={() => setIsOpen(true)} ref={anchorEl}>\n        Open Menu\n      </FilledButton>\n    </>\n  );\n};\n\nexport default Component;\n"]}

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

@@ -26,7 +26,9 @@ import { useRef, useState } from 'react';
 const Component = () => {
     const anchorEl = useRef(null);
     const [isOpen, setIsOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(Menu, { isOpen: isOpen, anchorRef: anchorEl, onClose: () => setIsOpen(false), children: _jsxs(Menu.Items, { children: [_jsx(Menu.Item, { leadingVisual: _jsx(PlusIconOutline, {}), title: "Action 1", onClick: () => alert('Action1') }), _jsx(Menu.Item, { leadingVisual: _jsx(PlusIconOutline, {}), trailingContent: _jsx(Kbd, { keys: ['A', ['B']] }), title: "Action 2", description: "Action 4 has a keyboard shortcut", onClick: () => alert('Action4') })] }) }), _jsx(FilledButton, { onClick: () => setIsOpen(true), ref: anchorEl, children: "Open Menu" })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Menu, { isOpen: isOpen, anchorRef: anchorEl, onClose: (_event, _data) => {
+                    setIsOpen(false);
+                }, children: _jsxs(Menu.Items, { children: [_jsx(Menu.Item, { leadingVisual: _jsx(PlusIconOutline, {}), title: "Action 1", onClick: () => alert('Action1') }), _jsx(Menu.Item, { leadingVisual: _jsx(PlusIconOutline, {}), trailingContent: _jsx(Kbd, { keys: ['A', ['B']] }), title: "Action 2", description: "Action 4 has a keyboard shortcut", onClick: () => alert('Action4') })] }) }), _jsx(FilledButton, { onClick: () => setIsOpen(true), ref: anchorEl, children: "Open Menu" })] }));
 };
 export default Component;
 //# sourceMappingURL=menu-with-keyboard-shortcuts.story.js.map

package/lib/esm/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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,8BACE,KAAC,IAAI,IACH,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,QAAQ,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,YAE/B,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IACR,aAAa,EAAE,KAAC,eAAe,KAAG,EAClC,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAC/B,EACF,KAAC,IAAI,CAAC,IAAI,IACR,aAAa,EAAE,KAAC,eAAe,KAAG,EAClC,eAAe,EAAE,KAAC,GAAG,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,IACS,GACR,EACP,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,QAAQ,0BAE5C,IACd,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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={() => setIsOpen(false)}\n      >\n        <Menu.Items>\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.Items>\n      </Menu>\n      <FilledButton onClick={() => setIsOpen(true)} ref={anchorEl}>\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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,QAAQ,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,8BACE,KAAC,IAAI,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,YAED,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IACR,aAAa,EAAE,KAAC,eAAe,KAAG,EAClC,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAC/B,EACF,KAAC,IAAI,CAAC,IAAI,IACR,aAAa,EAAE,KAAC,eAAe,KAAG,EAClC,eAAe,EAAE,KAAC,GAAG,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,IACS,GACR,EACP,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,QAAQ,0BAE5C,IACd,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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      >\n        <Menu.Items>\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.Items>\n      </Menu>\n      <FilledButton onClick={() => setIsOpen(true)} ref={anchorEl}>\n        Open Menu\n      </FilledButton>\n    </>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/select/Select.js

@@ -31,7 +31,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import classNames from 'classnames';
-import { useEffect, useId, useMemo } from 'react';
+import { useEffect, useId, useMemo, useState } from 'react';
 import ReactSelect from 'react-select';
 import AsyncSelect from 'react-select/async';
 /** Different types of select components */
@@ -90,6 +90,28 @@ export const Select = (_a) => {
     const isInsideDialog = useIsInsideDialog();
     const menuPosition = isInsideDialog ? 'fixed' : 'absolute';
     const identifier = useId();
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const handleMenuOpen = () => {
+        setIsMenuOpen(true);
+        if (selectProps.onMenuOpen) {
+            selectProps.onMenuOpen();
+        }
+    };
+    const handleMenuClose = () => {
+        setIsMenuOpen(false);
+        if (selectProps.onMenuClose) {
+            selectProps.onMenuClose();
+        }
+    };
+    // Handle Escape key to prevent it from bubbling up to dialog
+    const handleKeyDown = (event) => {
+        if (event.key === 'Escape' && isMenuOpen) {
+            event.stopPropagation();
+        }
+        if (selectProps.onKeyDown) {
+            selectProps.onKeyDown(event);
+        }
+    };
     const Component = as !== null && as !== void 0 ? as : 'div';
     const ComponentOverrides = useMemo(() => overrideComponents({
         errorText,
@@ -105,14 +127,14 @@ export const Select = (_a) => {
     let SelectElement;
     switch (type) {
         case 'async': {
-            SelectElement = (_jsx(AsyncSelect, Object.assign({ name: identifier, inputId: identifier, isDisabled: Boolean(isDisabled) || selectProps.isDisabled, menuPlacement: "auto", "aria-label": ariaLabel }, selectProps, { menuPosition: (_b = selectProps.menuPosition) !== null && _b !== void 0 ? _b : menuPosition, hideSelectedOptions: false, closeMenuOnSelect: Boolean(selectProps.isMulti) === false, styles: Object.assign(Object.assign({}, StyleOverrides), selectProps.styles), components: Object.assign(Object.assign({}, ComponentOverrides), selectProps.components) })));
+            SelectElement = (_jsx(AsyncSelect, Object.assign({ name: identifier, inputId: identifier, isDisabled: Boolean(isDisabled) || selectProps.isDisabled, menuPlacement: "auto", "aria-label": ariaLabel }, selectProps, { onKeyDown: handleKeyDown, onMenuOpen: handleMenuOpen, onMenuClose: handleMenuClose, menuPosition: (_b = selectProps.menuPosition) !== null && _b !== void 0 ? _b : menuPosition, hideSelectedOptions: false, closeMenuOnSelect: Boolean(selectProps.isMulti) === false, styles: Object.assign(Object.assign({}, StyleOverrides), selectProps.styles), components: Object.assign(Object.assign({}, ComponentOverrides), selectProps.components) })));
             break;
         }
         case 'creatable':
-            SelectElement = (_jsx(Creatable, Object.assign({ name: identifier, inputId: identifier, isDisabled: Boolean(isDisabled) || selectProps.isDisabled, menuPlacement: "auto" }, selectProps, { "aria-label": ariaLabel, menuPosition: (_c = selectProps.menuPosition) !== null && _c !== void 0 ? _c : menuPosition, hideSelectedOptions: false, closeMenuOnSelect: Boolean(selectProps.isMulti) === false, styles: Object.assign(Object.assign({}, StyleOverrides), selectProps.styles), components: Object.assign(Object.assign({}, ComponentOverrides), selectProps.components) })));
+            SelectElement = (_jsx(Creatable, Object.assign({ name: identifier, inputId: identifier, isDisabled: Boolean(isDisabled) || selectProps.isDisabled, menuPlacement: "auto" }, selectProps, { "aria-label": ariaLabel, onKeyDown: handleKeyDown, onMenuOpen: handleMenuOpen, onMenuClose: handleMenuClose, menuPosition: (_c = selectProps.menuPosition) !== null && _c !== void 0 ? _c : menuPosition, hideSelectedOptions: false, closeMenuOnSelect: Boolean(selectProps.isMulti) === false, styles: Object.assign(Object.assign({}, StyleOverrides), selectProps.styles), components: Object.assign(Object.assign({}, ComponentOverrides), selectProps.components) })));
             break;
         default:
-            SelectElement = (_jsx(ReactSelect, Object.assign({ name: identifier, inputId: identifier, isDisabled: Boolean(isDisabled) || selectProps.isDisabled, menuPlacement: "auto" }, selectProps, { "aria-label": ariaLabel, menuPosition: (_d = selectProps.menuPosition) !== null && _d !== void 0 ? _d : menuPosition, hideSelectedOptions: false, closeMenuOnSelect: Boolean(selectProps.isMulti) === false, styles: Object.assign(Object.assign({}, StyleOverrides), selectProps.styles), components: Object.assign(Object.assign({}, ComponentOverrides), selectProps.components) })));
+            SelectElement = (_jsx(ReactSelect, Object.assign({ name: identifier, inputId: identifier, isDisabled: Boolean(isDisabled) || selectProps.isDisabled, menuPlacement: "auto" }, selectProps, { "aria-label": ariaLabel, onKeyDown: handleKeyDown, onMenuOpen: handleMenuOpen, onMenuClose: handleMenuClose, menuPosition: (_d = selectProps.menuPosition) !== null && _d !== void 0 ? _d : menuPosition, hideSelectedOptions: false, closeMenuOnSelect: Boolean(selectProps.isMulti) === false, styles: Object.assign(Object.assign({}, StyleOverrides), selectProps.styles), components: Object.assign(Object.assign({}, ComponentOverrides), selectProps.components) })));
     }
     const classes = classNames('ndl-select', className, {
         'ndl-creatable': type === 'creatable',