@neo4j-ndl/react 4.9.18 → 4.9.20

package/lib/esm/dropdown-button/DropdownButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownButton.js","sourceRoot":"","sources":["../../../src/dropdown-button/DropdownButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,UAAU,MAAM,YAAY,CAAC;AAIpC,OAAO,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AA6BlD;;;;;;GAMG;AAEH,MAAM,CAAC,MAAM,cAAc,GAAG,SAAS,cAAc,CAEnD,EAc+C;QAd/C,EACA,EAAE,EACF,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,UAAU,GAAG,KAAK,EAClB,UAAU,GAAG,KAAK,EAClB,cAAc,EACd,MAAM,GAAG,KAAK,EACd,OAAO,EACP,SAAS,EACT,KAAK,EACL,cAAc,EACd,GAAG,OAE4C,EAD5C,SAAS,cAbZ,4IAcD,CADa;IAEZ,MAAM,OAAO,GAAG,UAAU,CAAC,kBAAkB,EAAE,SAAS,EAAE;QACxD,cAAc,EAAE,UAAU;QAC1B,kBAAkB,EAAE,UAAU;QAC9B,WAAW,EAAE,IAAI,KAAK,OAAO;QAC7B,YAAY,EAAE,IAAI,KAAK,QAAQ;QAC/B,UAAU,EAAE,MAAM;QAClB,WAAW,EAAE,IAAI,KAAK,OAAO;KAC9B,CAAC,CAAC;IAEH,MAAM,SAAS,GAAsB,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,QAAQ,CAAC;IAEpD,OAAO,CACL,KAAC,SAAS,kBACR,SAAS,EAAE,OAAO,EAClB,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,OAAO,mBACD,MAAM,EACrB,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,IACR,SAAS,EACT,cAAc,cAElB,eAAK,SAAS,EAAC,wBAAwB,aACrC,eAAK,SAAS,EAAC,kCAAkC,aAC9C,cAAc,EACf,eAAM,SAAS,EAAC,0BAA0B,YAAE,QAAQ,GAAQ,IACxD,EAEN,KAAC,sBAAsB,IACrB,SAAS,EAAE,UAAU,CAAC,0BAA0B,EAAE;wBAChD,+BAA+B,EAAE,MAAM;qBACxC,CAAC,GACF,IACE,IACI,CACb,CAAC;AACJ,CAAC,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 */\nimport classNames from 'classnames';\nimport type React from 'react';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { ChevronDownIconOutline } from '../icons';\n\n/**\n *\n *\n * Types\n *\n *\n */\n\ntype DropdownButtonProps = {\n  /** Content displayed in the button */\n  children?: React.ReactNode;\n  /** Size of button */\n  size?: 'small' | 'medium' | 'large';\n  /** Whether the button is in floating state */\n  isFloating?: boolean;\n  /** Whether the button is in disabled state */\n  isDisabled?: boolean;\n  /** Element that is shown before the button content */\n  leadingElement?: React.ReactNode;\n  /** If the dropdown is activated */\n  isOpen?: boolean;\n  /** Callback function to be called when the button is clicked */\n  onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  /** Additional classnames */\n  className?: string;\n};\n\n/**\n *\n *\n * DropdownButton Component\n *\n *\n */\n\nexport const DropdownButton = function DropdownButton<\n  T extends React.ElementType = 'button',\n>({\n  as,\n  children,\n  size = 'medium',\n  isDisabled = false,\n  isFloating = false,\n  leadingElement,\n  isOpen = false,\n  onClick,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, DropdownButtonProps>) {\n  const classes = classNames('ndl-dropdown-btn', className, {\n    'ndl-disabled': isDisabled,\n    'ndl-floating-btn': isFloating,\n    'ndl-large': size === 'large',\n    'ndl-medium': size === 'medium',\n    'ndl-open': isOpen,\n    'ndl-small': size === 'small',\n  });\n\n  const Component: React.ElementType = as ?? 'button';\n\n  return (\n    <Component\n      className={classes}\n      disabled={isDisabled}\n      onClick={onClick}\n      aria-expanded={isOpen}\n      ref={ref}\n      style={style}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <div className=\"ndl-dropdown-btn-inner\">\n        <div className=\"ndl-dropdown-btn-leading-wrapper\">\n          {leadingElement}\n          <span className=\"ndl-dropdown-btn-content\">{children}</span>\n        </div>\n\n        <ChevronDownIconOutline\n          className={classNames('ndl-dropdown-button-icon', {\n            'ndl-dropdown-button-icon-open': isOpen,\n          })}\n        />\n      </div>\n    </Component>\n  );\n};\n"]}
+{"version":3,"file":"DropdownButton.js","sourceRoot":"","sources":["../../../src/dropdown-button/DropdownButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,UAAU,MAAM,YAAY,CAAC;AAGpC,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,OAAO,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAiClD;;;;;;GAMG;AAEH,MAAM,CAAC,MAAM,cAAc,GAAG,SAAS,cAAc,CAEnD,EAgB+C;QAhB/C,EACA,EAAE,EACF,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,UAAU,GAAG,KAAK,EAClB,UAAU,GAAG,KAAK,EAClB,cAAc,EACd,MAAM,GAAG,KAAK,EACd,OAAO,EACP,SAAS,EACT,KAAK,EACL,cAAc,EACd,GAAG,EACH,SAAS,GAAG,KAAK,EACjB,cAAc,GAAG,SAAS,OAEqB,EAD5C,SAAS,cAfZ,2KAgBD,CADa;IAEZ,MAAM,SAAS,GAAsB,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,QAAQ,CAAC;IACpD,MAAM,OAAO,GAAG,UAAU,CAAC,kBAAkB,EAAE,SAAS,EAAE;QACxD,cAAc,EAAE,UAAU;QAC1B,kBAAkB,EAAE,UAAU;QAC9B,WAAW,EAAE,IAAI,KAAK,OAAO;QAC7B,aAAa,EAAE,SAAS;QACxB,YAAY,EAAE,IAAI,KAAK,QAAQ;QAC/B,UAAU,EAAE,MAAM;QAClB,WAAW,EAAE,IAAI,KAAK,OAAO;KAC9B,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,CAAC,UAAU,IAAI,CAAC,SAAS,CAAC;IAEjD,MAAM,WAAW,GAAG,CAAC,CAAkD,EAAE,EAAE;QACzE,uIAAuI;QACvI,IAAI,CAAC,cAAc,EAAE,CAAC;YACpB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,OAAO;QACT,CAAC;QAED,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,CAAC,CAAC,CAAC;QACb,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,SAAS,kBACR,SAAS,EAAE,OAAO,EAClB,QAAQ,EAAE,UAAU,mBACL,CAAC,cAAc,EAC9B,OAAO,EAAE,WAAW,mBACL,MAAM,EACrB,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,IACR,SAAS,EACT,cAAc,cAElB,eAAK,SAAS,EAAC,wBAAwB,aACrC,eAAK,SAAS,EAAC,kCAAkC,aAC9C,cAAc,EACf,eAAM,SAAS,EAAC,0BAA0B,YAAE,QAAQ,GAAQ,IACxD,EAEN,KAAC,sBAAsB,IACrB,SAAS,EAAE,UAAU,CAAC,0BAA0B,EAAE;wBAChD,+BAA+B,EAAE,MAAM;qBACxC,CAAC,GACF,EACD,SAAS,IAAI,CACZ,KAAC,aAAa,IAAC,cAAc,EAAE,cAAc,EAAE,IAAI,EAAE,IAAI,GAAI,CAC9D,IACG,IACI,CACb,CAAC;AACJ,CAAC,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 */\nimport classNames from 'classnames';\nimport type React from 'react';\n\nimport { ButtonSpinner } from '../_common/ButtonSpinner';\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { ChevronDownIconOutline } from '../icons';\n\n/**\n *\n *\n * Types\n *\n *\n */\n\ntype DropdownButtonProps = {\n  /** Content displayed in the button */\n  children?: React.ReactNode;\n  /** Size of button */\n  size?: 'small' | 'medium' | 'large';\n  /** Whether the button is in floating state */\n  isFloating?: boolean;\n  /** Whether the button is in disabled state */\n  isDisabled?: boolean;\n  /** Element that is shown before the button content */\n  leadingElement?: React.ReactNode;\n  /** If the dropdown is activated */\n  isOpen?: boolean;\n  /** Callback function to be called when the button is clicked */\n  onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  /** Additional classnames */\n  className?: string;\n  /** If the button is loading. Will display a loading spinner*/\n  isLoading?: boolean;\n  /** Accessible message for screen readers when the button is in a loading state */\n  loadingMessage?: string;\n};\n\n/**\n *\n *\n * DropdownButton Component\n *\n *\n */\n\nexport const DropdownButton = function DropdownButton<\n  T extends React.ElementType = 'button',\n>({\n  as,\n  children,\n  size = 'medium',\n  isDisabled = false,\n  isFloating = false,\n  leadingElement,\n  isOpen = false,\n  onClick,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  isLoading = false,\n  loadingMessage = 'Loading',\n  ...restProps\n}: PolymorphicCommonProps<T, DropdownButtonProps>) {\n  const Component: React.ElementType = as ?? 'button';\n  const classes = classNames('ndl-dropdown-btn', className, {\n    'ndl-disabled': isDisabled,\n    'ndl-floating-btn': isFloating,\n    'ndl-large': size === 'large',\n    'ndl-loading': isLoading,\n    'ndl-medium': size === 'medium',\n    'ndl-open': isOpen,\n    'ndl-small': size === 'small',\n  });\n\n  const isInteractable = !isDisabled && !isLoading;\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n    // If the button is disabled or loading, we don't want to call the onClick handler. The loading is only aria-disabled, so we need this.\n    if (!isInteractable) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    if (onClick) {\n      onClick(e);\n    }\n  };\n\n  return (\n    <Component\n      className={classes}\n      disabled={isDisabled}\n      aria-disabled={!isInteractable}\n      onClick={handleClick}\n      aria-expanded={isOpen}\n      ref={ref}\n      style={style}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <div className=\"ndl-dropdown-btn-inner\">\n        <div className=\"ndl-dropdown-btn-leading-wrapper\">\n          {leadingElement}\n          <span className=\"ndl-dropdown-btn-content\">{children}</span>\n        </div>\n\n        <ChevronDownIconOutline\n          className={classNames('ndl-dropdown-button-icon', {\n            'ndl-dropdown-button-icon-open': isOpen,\n          })}\n        />\n        {isLoading && (\n          <ButtonSpinner loadingMessage={loadingMessage} size={size} />\n        )}\n      </div>\n    </Component>\n  );\n};\n"]}

package/lib/esm/dropdown-button/stories/dropdown-button-loading.story.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+import { DropdownButton } from '@neo4j-ndl/react';
+const Component = () => {
+    return (_jsx(DropdownButton, { isLoading: true, loadingMessage: "Loading", children: "Dropdown Button" }));
+};
+export default Component;
+//# sourceMappingURL=dropdown-button-loading.story.js.map

package/lib/esm/dropdown-button/stories/dropdown-button-loading.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-button-loading.story.js","sourceRoot":"","sources":["../../../../src/dropdown-button/stories/dropdown-button-loading.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,KAAC,cAAc,IAAC,SAAS,QAAC,cAAc,EAAC,SAAS,gCAEjC,CAClB,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 { DropdownButton } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  return (\n    <DropdownButton isLoading loadingMessage=\"Loading\">\n      Dropdown Button\n    </DropdownButton>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/dropdown-button/stories/index.js

@@ -24,10 +24,12 @@ export { default as DropdownButtonWithStatusIndicator } from './dropdown-button-
 export { default as DropdownButtonDisabled } from './dropdown-button-disabled.story';
 export { default as DropdownButtonFloating } from './dropdown-button-floating.story';
 export { default as DropdownButtonWithMenu } from './dropdown-button-with-menu.story';
+export { default as DropdownButtonLoading } from './dropdown-button-loading.story';
 import { removeLicenseHeader } from '../../_common/export-stories-utils';
 import DropdownButtonDefaultSourceRaw from './dropdown-button-default.story?raw';
 import DropdownButtonDisabledSourceRaw from './dropdown-button-disabled.story?raw';
 import DropdownButtonFloatingSourceRaw from './dropdown-button-floating.story?raw';
+import DropdownButtonLoadingSourceRaw from './dropdown-button-loading.story?raw';
 import DropdownButtonWithAvatarSourceRaw from './dropdown-button-with-avatar.story?raw';
 import DropdownButtonWithMenuSourceRaw from './dropdown-button-with-menu.story?raw';
 import DropdownButtonWithStatusIndicatorSourceRaw from './dropdown-button-with-status-indicator.story?raw';
@@ -37,4 +39,5 @@ export const DropdownButtonWithStatusIndicatorSource = removeLicenseHeader(Dropd
 export const DropdownButtonDisabledSource = removeLicenseHeader(DropdownButtonDisabledSourceRaw);
 export const DropdownButtonFloatingSource = removeLicenseHeader(DropdownButtonFloatingSourceRaw);
 export const DropdownButtonWithMenuSource = removeLicenseHeader(DropdownButtonWithMenuSourceRaw);
+export const DropdownButtonLoadingSource = removeLicenseHeader(DropdownButtonLoadingSourceRaw);
 //# sourceMappingURL=index.js.map

package/lib/esm/dropdown-button/stories/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/dropdown-button/stories/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AACnF,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,qCAAqC,CAAC;AAC1F,OAAO,EAAE,OAAO,IAAI,iCAAiC,EAAE,MAAM,+CAA+C,CAAC;AAC7G,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,kCAAkC,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,kCAAkC,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAEtF,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,8BAA8B,MAAM,qCAAqC,CAAC;AACjF,OAAO,+BAA+B,MAAM,sCAAsC,CAAC;AACnF,OAAO,+BAA+B,MAAM,sCAAsC,CAAC;AACnF,OAAO,iCAAiC,MAAM,yCAAyC,CAAC;AACxF,OAAO,+BAA+B,MAAM,uCAAuC,CAAC;AACpF,OAAO,0CAA0C,MAAM,mDAAmD,CAAC;AAE3G,MAAM,CAAC,MAAM,2BAA2B,GAAG,mBAAmB,CAC5D,8BAA8B,CAC/B,CAAC;AACF,MAAM,CAAC,MAAM,8BAA8B,GAAG,mBAAmB,CAC/D,iCAAiC,CAClC,CAAC;AACF,MAAM,CAAC,MAAM,uCAAuC,GAAG,mBAAmB,CACxE,0CAA0C,CAC3C,CAAC;AACF,MAAM,CAAC,MAAM,4BAA4B,GAAG,mBAAmB,CAC7D,+BAA+B,CAChC,CAAC;AACF,MAAM,CAAC,MAAM,4BAA4B,GAAG,mBAAmB,CAC7D,+BAA+B,CAChC,CAAC;AACF,MAAM,CAAC,MAAM,4BAA4B,GAAG,mBAAmB,CAC7D,+BAA+B,CAChC,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\nexport { default as DropdownButtonDefault } from './dropdown-button-default.story';\nexport { default as DropdownButtonWithAvatar } from './dropdown-button-with-avatar.story';\nexport { default as DropdownButtonWithStatusIndicator } from './dropdown-button-with-status-indicator.story';\nexport { default as DropdownButtonDisabled } from './dropdown-button-disabled.story';\nexport { default as DropdownButtonFloating } from './dropdown-button-floating.story';\nexport { default as DropdownButtonWithMenu } from './dropdown-button-with-menu.story';\n\nimport { removeLicenseHeader } from '../../_common/export-stories-utils';\nimport DropdownButtonDefaultSourceRaw from './dropdown-button-default.story?raw';\nimport DropdownButtonDisabledSourceRaw from './dropdown-button-disabled.story?raw';\nimport DropdownButtonFloatingSourceRaw from './dropdown-button-floating.story?raw';\nimport DropdownButtonWithAvatarSourceRaw from './dropdown-button-with-avatar.story?raw';\nimport DropdownButtonWithMenuSourceRaw from './dropdown-button-with-menu.story?raw';\nimport DropdownButtonWithStatusIndicatorSourceRaw from './dropdown-button-with-status-indicator.story?raw';\n\nexport const DropdownButtonDefaultSource = removeLicenseHeader(\n  DropdownButtonDefaultSourceRaw,\n);\nexport const DropdownButtonWithAvatarSource = removeLicenseHeader(\n  DropdownButtonWithAvatarSourceRaw,\n);\nexport const DropdownButtonWithStatusIndicatorSource = removeLicenseHeader(\n  DropdownButtonWithStatusIndicatorSourceRaw,\n);\nexport const DropdownButtonDisabledSource = removeLicenseHeader(\n  DropdownButtonDisabledSourceRaw,\n);\nexport const DropdownButtonFloatingSource = removeLicenseHeader(\n  DropdownButtonFloatingSourceRaw,\n);\nexport const DropdownButtonWithMenuSource = removeLicenseHeader(\n  DropdownButtonWithMenuSourceRaw,\n);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/dropdown-button/stories/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AACnF,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,qCAAqC,CAAC;AAC1F,OAAO,EAAE,OAAO,IAAI,iCAAiC,EAAE,MAAM,+CAA+C,CAAC;AAC7G,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,kCAAkC,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,kCAAkC,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAEnF,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,8BAA8B,MAAM,qCAAqC,CAAC;AACjF,OAAO,+BAA+B,MAAM,sCAAsC,CAAC;AACnF,OAAO,+BAA+B,MAAM,sCAAsC,CAAC;AACnF,OAAO,8BAA8B,MAAM,qCAAqC,CAAC;AACjF,OAAO,iCAAiC,MAAM,yCAAyC,CAAC;AACxF,OAAO,+BAA+B,MAAM,uCAAuC,CAAC;AACpF,OAAO,0CAA0C,MAAM,mDAAmD,CAAC;AAE3G,MAAM,CAAC,MAAM,2BAA2B,GAAG,mBAAmB,CAC5D,8BAA8B,CAC/B,CAAC;AACF,MAAM,CAAC,MAAM,8BAA8B,GAAG,mBAAmB,CAC/D,iCAAiC,CAClC,CAAC;AACF,MAAM,CAAC,MAAM,uCAAuC,GAAG,mBAAmB,CACxE,0CAA0C,CAC3C,CAAC;AACF,MAAM,CAAC,MAAM,4BAA4B,GAAG,mBAAmB,CAC7D,+BAA+B,CAChC,CAAC;AACF,MAAM,CAAC,MAAM,4BAA4B,GAAG,mBAAmB,CAC7D,+BAA+B,CAChC,CAAC;AACF,MAAM,CAAC,MAAM,4BAA4B,GAAG,mBAAmB,CAC7D,+BAA+B,CAChC,CAAC;AACF,MAAM,CAAC,MAAM,2BAA2B,GAAG,mBAAmB,CAC5D,8BAA8B,CAC/B,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\nexport { default as DropdownButtonDefault } from './dropdown-button-default.story';\nexport { default as DropdownButtonWithAvatar } from './dropdown-button-with-avatar.story';\nexport { default as DropdownButtonWithStatusIndicator } from './dropdown-button-with-status-indicator.story';\nexport { default as DropdownButtonDisabled } from './dropdown-button-disabled.story';\nexport { default as DropdownButtonFloating } from './dropdown-button-floating.story';\nexport { default as DropdownButtonWithMenu } from './dropdown-button-with-menu.story';\nexport { default as DropdownButtonLoading } from './dropdown-button-loading.story';\n\nimport { removeLicenseHeader } from '../../_common/export-stories-utils';\nimport DropdownButtonDefaultSourceRaw from './dropdown-button-default.story?raw';\nimport DropdownButtonDisabledSourceRaw from './dropdown-button-disabled.story?raw';\nimport DropdownButtonFloatingSourceRaw from './dropdown-button-floating.story?raw';\nimport DropdownButtonLoadingSourceRaw from './dropdown-button-loading.story?raw';\nimport DropdownButtonWithAvatarSourceRaw from './dropdown-button-with-avatar.story?raw';\nimport DropdownButtonWithMenuSourceRaw from './dropdown-button-with-menu.story?raw';\nimport DropdownButtonWithStatusIndicatorSourceRaw from './dropdown-button-with-status-indicator.story?raw';\n\nexport const DropdownButtonDefaultSource = removeLicenseHeader(\n  DropdownButtonDefaultSourceRaw,\n);\nexport const DropdownButtonWithAvatarSource = removeLicenseHeader(\n  DropdownButtonWithAvatarSourceRaw,\n);\nexport const DropdownButtonWithStatusIndicatorSource = removeLicenseHeader(\n  DropdownButtonWithStatusIndicatorSourceRaw,\n);\nexport const DropdownButtonDisabledSource = removeLicenseHeader(\n  DropdownButtonDisabledSourceRaw,\n);\nexport const DropdownButtonFloatingSource = removeLicenseHeader(\n  DropdownButtonFloatingSourceRaw,\n);\nexport const DropdownButtonWithMenuSource = removeLicenseHeader(\n  DropdownButtonWithMenuSourceRaw,\n);\nexport const DropdownButtonLoadingSource = removeLicenseHeader(\n  DropdownButtonLoadingSourceRaw,\n);\n"]}

package/lib/esm/icon-button/stories/icon-button-loading.story.js

@@ -23,7 +23,7 @@ import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
 import { IconButton } from '@neo4j-ndl/react';
 import { MagnifyingGlassIconOutline } from '@neo4j-ndl/react/icons';
 const Component = () => {
-    return (_jsx(IconButton, { description: "Loading data...", isLoading: true, children: _jsx(MagnifyingGlassIconOutline, {}) }));
+    return (_jsx(IconButton, { description: "Search", isLoading: true, loadingMessage: "Loading", children: _jsx(MagnifyingGlassIconOutline, {}) }));
 };
 export default Component;
 //# sourceMappingURL=icon-button-loading.story.js.map

package/lib/esm/icon-button/stories/icon-button-loading.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button-loading.story.js","sourceRoot":"","sources":["../../../../src/icon-button/stories/icon-button-loading.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;AAEpE,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,KAAC,UAAU,IAAC,WAAW,EAAC,iBAAiB,EAAC,SAAS,kBACjD,KAAC,0BAA0B,KAAG,GACnB,CACd,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 { IconButton } from '@neo4j-ndl/react';\nimport { MagnifyingGlassIconOutline } from '@neo4j-ndl/react/icons';\n\nconst Component = () => {\n  return (\n    <IconButton description=\"Loading data...\" isLoading>\n      <MagnifyingGlassIconOutline />\n    </IconButton>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"icon-button-loading.story.js","sourceRoot":"","sources":["../../../../src/icon-button/stories/icon-button-loading.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;AAEpE,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,KAAC,UAAU,IAAC,WAAW,EAAC,QAAQ,EAAC,SAAS,QAAC,cAAc,EAAC,SAAS,YACjE,KAAC,0BAA0B,KAAG,GACnB,CACd,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 { IconButton } from '@neo4j-ndl/react';\nimport { MagnifyingGlassIconOutline } from '@neo4j-ndl/react/icons';\n\nconst Component = () => {\n  return (\n    <IconButton description=\"Search\" isLoading loadingMessage=\"Loading\">\n      <MagnifyingGlassIconOutline />\n    </IconButton>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/icon-button-base/IconButtonBase.js

@@ -31,15 +31,19 @@ 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 { useId } from 'react';
+import { ButtonSpinner } from '../_common/ButtonSpinner';
 import { needleWarningMessage } from '../_common/utils';
-import { LoadingSpinner } from '../loading-spinner';
 import { Tooltip } from '../tooltip';
 export const IconButtonBase = (_a) => {
     var _b;
     var { children, as, iconButtonVariant = 'default', isLoading = false, isDisabled = false, size = 'medium', isFloating = false, 
     // Does not have a default value to avoid setting aria-pressed to true if not explicitly set
-    isActive = undefined, description, tooltipProps, className, style, variant = 'neutral', htmlAttributes, onClick, ref } = _a, restProps = __rest(_a, ["children", "as", "iconButtonVariant", "isLoading", "isDisabled", "size", "isFloating", "isActive", "description", "tooltipProps", "className", "style", "variant", "htmlAttributes", "onClick", "ref"]);
+    isActive = undefined, description, tooltipProps, className, style, variant = 'neutral', htmlAttributes, onClick, ref, 
+    // TODO v5: maybe update default message to 'Loading'. This value is for backward compatibility with loading spinners old aria-label
+    loadingMessage = 'Loading content' } = _a, restProps = __rest(_a, ["children", "as", "iconButtonVariant", "isLoading", "isDisabled", "size", "isFloating", "isActive", "description", "tooltipProps", "className", "style", "variant", "htmlAttributes", "onClick", "ref", "loadingMessage"]);
     const Component = as !== null && as !== void 0 ? as : 'button';
+    const loadingId = useId();
     const isInteractable = !isDisabled && !isLoading;
     const isClean = iconButtonVariant === 'clean';
     const isDanger = variant === 'danger';
@@ -77,6 +81,6 @@ export const IconButtonBase = (_a) => {
     return (_jsxs(Tooltip, Object.assign({ hoverDelay: {
             close: 0,
             open: 500,
-        }, isDisabled: description === null || isDisabled, type: "simple" }, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.root, { children: [_jsx(Tooltip.Trigger, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.trigger, { hasButtonWrapper: true, children: _jsx(Component, Object.assign({ type: "button", onClick: handleClick, disabled: isDisabled, "aria-disabled": !isInteractable, "aria-label": description, "aria-pressed": isActive, className: classes, style: style, ref: ref }, restProps, htmlAttributes, { children: _jsx("div", { className: "ndl-icon-btn-inner", children: isLoading ? (_jsx(LoadingSpinner, { size: "small" })) : (_jsx("div", { className: "ndl-icon", children: children })) }) })) })), _jsx(Tooltip.Content, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content, { children: description !== null && description !== void 0 ? description : (_b = tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content) === null || _b === void 0 ? void 0 : _b.children }))] })));
+        }, isDisabled: description === null || isDisabled, type: "simple" }, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.root, { children: [_jsx(Tooltip.Trigger, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.trigger, { hasButtonWrapper: true, children: _jsx(Component, Object.assign({ type: "button", onClick: handleClick, disabled: isDisabled, "aria-disabled": !isInteractable, "aria-label": description, "aria-pressed": isActive, className: classes, style: style, ref: ref, "aria-describedby": isLoading ? loadingId : undefined }, restProps, htmlAttributes, { children: _jsx("div", { className: "ndl-icon-btn-inner", children: isLoading ? (_jsx(ButtonSpinner, { loadingMessage: loadingMessage, size: "small", htmlAttributes: { id: loadingId } })) : (_jsx("div", { className: "ndl-icon", children: children })) }) })) })), _jsx(Tooltip.Content, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content, { children: description !== null && description !== void 0 ? description : (_b = tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content) === null || _b === void 0 ? void 0 : _b.children }))] })));
 };
 //# sourceMappingURL=IconButtonBase.js.map

package/lib/esm/icon-button-base/IconButtonBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButtonBase.js","sourceRoot":"","sources":["../../../src/icon-button-base/IconButtonBase.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport type React from 'react';\n\nimport {\n  type PolymorphicCommonProps,\n  type TooltipObjectProps,\n} from '../_common/types';\nimport { needleWarningMessage } from '../_common/utils';\nimport { type ButtonSizes } from '../button';\nimport { LoadingSpinner } from '../loading-spinner';\nimport { Tooltip } from '../tooltip';\n\n/**\n *\n *\n * Types\n *\n *\n */\n\nexport type IconButtonBaseProps = {\n  children?: React.ReactNode;\n\n  /** If the icon button is in disabled state */\n  isDisabled?: boolean;\n\n  /** If the button is doing something Async, it will display a loading spinner   */\n  isLoading?: boolean;\n\n  /** Size of button */\n  size?: ButtonSizes;\n\n  /** If the button is in floating state */\n  isFloating?: boolean;\n\n  /** Active - used for open context menus for example */\n  isActive?: boolean;\n\n  /** A string that will be shown as a tooltip when hovering over the button  it also acts as an aria-label- {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label} */\n  description: string | null;\n\n  /** Variant of the button */\n  variant?: 'neutral' | 'danger';\n\n  /** Variant of the button */\n  iconButtonVariant?: 'default' | 'clean';\n\n  /**\n   * Props for the tooltip component.\n   */\n  tooltipProps?: TooltipObjectProps;\n\n  /** Click handler */\n  onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n};\n\nexport const IconButtonBase = <T extends React.ElementType = 'button'>({\n  children,\n  as,\n  iconButtonVariant = 'default',\n  isLoading = false,\n  isDisabled = false,\n  size = 'medium',\n  isFloating = false,\n  // Does not have a default value to avoid setting aria-pressed to true if not explicitly set\n  isActive = undefined,\n  description,\n  tooltipProps,\n  className,\n  style,\n  variant = 'neutral',\n  htmlAttributes,\n  onClick,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, IconButtonBaseProps>) => {\n  const Component: React.ElementType = as ?? 'button';\n\n  const isInteractable = !isDisabled && !isLoading;\n\n  const isClean = iconButtonVariant === 'clean';\n  const isDanger = variant === 'danger';\n\n  const classes = classNames('ndl-icon-btn', className, {\n    'ndl-active': Boolean(isActive),\n    'ndl-clean': isClean,\n    'ndl-danger': isDanger,\n    'ndl-disabled': isDisabled,\n    'ndl-floating': isFloating,\n    'ndl-large': size === 'large',\n    'ndl-loading': isLoading,\n    'ndl-medium': size === 'medium',\n    'ndl-small': size === 'small',\n  });\n\n  if (isClean && isFloating) {\n    throw new Error(\n      'BaseIconButton: Cannot use isFloating and iconButtonVariant=\"clean\" at the same time.',\n    );\n  }\n\n  if (!description && !htmlAttributes?.['aria-label']) {\n    needleWarningMessage(\n      'Icon buttons do not have text, be sure to include a description or an aria-label for screen readers link: https://dequeuniversity.com/rules/axe/4.4/button-name?application=axeAPI',\n    );\n  }\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n    if (!isInteractable) {\n      // By default, a <button /> element with disabled set to true will not get its\n      // on click handler called. To support the same behavior on <a /> tags we\n      // swallow the event here when disabled, since the <a /> tag with disabled set to\n      // true will have its onClick handler called\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    if (onClick) {\n      onClick(e);\n    }\n  };\n\n  return (\n    <Tooltip\n      hoverDelay={{\n        close: 0,\n        open: 500,\n      }}\n      isDisabled={description === null || isDisabled}\n      type=\"simple\"\n      {...tooltipProps?.root}\n    >\n      <Tooltip.Trigger {...tooltipProps?.trigger} hasButtonWrapper>\n        <Component\n          type=\"button\"\n          onClick={handleClick}\n          disabled={isDisabled}\n          aria-disabled={!isInteractable}\n          aria-label={description}\n          aria-pressed={isActive}\n          className={classes}\n          style={style}\n          ref={ref}\n          {...restProps}\n          {...htmlAttributes}\n        >\n          <div className=\"ndl-icon-btn-inner\">\n            {isLoading ? (\n              <LoadingSpinner size=\"small\" />\n            ) : (\n              <div className=\"ndl-icon\">{children}</div>\n            )}\n          </div>\n        </Component>\n      </Tooltip.Trigger>\n      <Tooltip.Content {...tooltipProps?.content}>\n        {description ?? tooltipProps?.content?.children}\n      </Tooltip.Content>\n    </Tooltip>\n  );\n};\n"]}
+{"version":3,"file":"IconButtonBase.js","sourceRoot":"","sources":["../../../src/icon-button-base/IconButtonBase.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { useId } from 'react';\n\nimport { ButtonSpinner } from '../_common/ButtonSpinner';\nimport {\n  type PolymorphicCommonProps,\n  type TooltipObjectProps,\n} from '../_common/types';\nimport { needleWarningMessage } from '../_common/utils';\nimport { type ButtonSizes } from '../button';\nimport { Tooltip } from '../tooltip';\n\n/**\n *\n *\n * Types\n *\n *\n */\n\nexport type IconButtonBaseProps = {\n  children?: React.ReactNode;\n\n  /** If the icon button is in disabled state */\n  isDisabled?: boolean;\n\n  /** If the button is doing something Async, it will display a loading spinner   */\n  isLoading?: boolean;\n\n  /** Size of button */\n  size?: ButtonSizes;\n\n  /** If the button is in floating state */\n  isFloating?: boolean;\n\n  /** Active - used for open context menus for example */\n  isActive?: boolean;\n\n  /** A string that will be shown as a tooltip when hovering over the button  it also acts as an aria-label- {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label} */\n  description: string | null;\n\n  /** Variant of the button */\n  variant?: 'neutral' | 'danger';\n\n  /** Variant of the button */\n  iconButtonVariant?: 'default' | 'clean';\n\n  /**\n   * Props for the tooltip component.\n   */\n  tooltipProps?: TooltipObjectProps;\n\n  /** Click handler */\n  onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n\n  /** Accessible message for screen readers when the button is in a loading state */\n  loadingMessage?: string;\n};\n\nexport const IconButtonBase = <T extends React.ElementType = 'button'>({\n  children,\n  as,\n  iconButtonVariant = 'default',\n  isLoading = false,\n  isDisabled = false,\n  size = 'medium',\n  isFloating = false,\n  // Does not have a default value to avoid setting aria-pressed to true if not explicitly set\n  isActive = undefined,\n  description,\n  tooltipProps,\n  className,\n  style,\n  variant = 'neutral',\n  htmlAttributes,\n  onClick,\n  ref,\n  // TODO v5: maybe update default message to 'Loading'. This value is for backward compatibility with loading spinners old aria-label\n  loadingMessage = 'Loading content',\n  ...restProps\n}: PolymorphicCommonProps<T, IconButtonBaseProps>) => {\n  const Component: React.ElementType = as ?? 'button';\n  const loadingId = useId();\n\n  const isInteractable = !isDisabled && !isLoading;\n\n  const isClean = iconButtonVariant === 'clean';\n  const isDanger = variant === 'danger';\n\n  const classes = classNames('ndl-icon-btn', className, {\n    'ndl-active': Boolean(isActive),\n    'ndl-clean': isClean,\n    'ndl-danger': isDanger,\n    'ndl-disabled': isDisabled,\n    'ndl-floating': isFloating,\n    'ndl-large': size === 'large',\n    'ndl-loading': isLoading,\n    'ndl-medium': size === 'medium',\n    'ndl-small': size === 'small',\n  });\n\n  if (isClean && isFloating) {\n    throw new Error(\n      'BaseIconButton: Cannot use isFloating and iconButtonVariant=\"clean\" at the same time.',\n    );\n  }\n\n  if (!description && !htmlAttributes?.['aria-label']) {\n    needleWarningMessage(\n      'Icon buttons do not have text, be sure to include a description or an aria-label for screen readers link: https://dequeuniversity.com/rules/axe/4.4/button-name?application=axeAPI',\n    );\n  }\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n    if (!isInteractable) {\n      // By default, a <button /> element with disabled set to true will not get its\n      // on click handler called. To support the same behavior on <a /> tags we\n      // swallow the event here when disabled, since the <a /> tag with disabled set to\n      // true will have its onClick handler called\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    if (onClick) {\n      onClick(e);\n    }\n  };\n\n  return (\n    <Tooltip\n      hoverDelay={{\n        close: 0,\n        open: 500,\n      }}\n      isDisabled={description === null || isDisabled}\n      type=\"simple\"\n      {...tooltipProps?.root}\n    >\n      <Tooltip.Trigger {...tooltipProps?.trigger} hasButtonWrapper>\n        <Component\n          type=\"button\"\n          onClick={handleClick}\n          disabled={isDisabled}\n          aria-disabled={!isInteractable}\n          aria-label={description}\n          aria-pressed={isActive}\n          className={classes}\n          style={style}\n          ref={ref}\n          aria-describedby={isLoading ? loadingId : undefined}\n          {...restProps}\n          {...htmlAttributes}\n        >\n          <div className=\"ndl-icon-btn-inner\">\n            {isLoading ? (\n              <ButtonSpinner\n                loadingMessage={loadingMessage}\n                size=\"small\"\n                htmlAttributes={{ id: loadingId }}\n              />\n            ) : (\n              <div className=\"ndl-icon\">{children}</div>\n            )}\n          </div>\n        </Component>\n      </Tooltip.Trigger>\n      <Tooltip.Content {...tooltipProps?.content}>\n        {description ?? tooltipProps?.content?.children}\n      </Tooltip.Content>\n    </Tooltip>\n  );\n};\n"]}

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

@@ -28,7 +28,7 @@ const Component = () => {
     const [isOpen, setIsOpen] = useState(false);
     return (_jsxs(_Fragment, { children: [_jsxs(Menu, { isOpen: isOpen, anchorRef: anchorEl, placement: "bottom-start-top-start", onClose: (_event, _data) => {
                     setIsOpen(false);
-                }, 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" }) }), _jsxs(Menu, { title: "More actions", description: "Some additional actions", 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)" })] }));
+                }, htmlAttributes: { id: 'custom-items-menu' }, 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" }) }), _jsxs(Menu, { title: "More actions", description: "Some additional actions", 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, "aria-haspopup": "menu", "aria-expanded": isOpen, 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,MAAC,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,aAED,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,MAAC,IAAI,IAAC,KAAK,EAAC,cAAc,EAAC,WAAW,EAAC,yBAAyB,aAC9D,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,iBAAiB,EACvB,SAAS,EAAC,oBAAoB,EAC9B,UAAU,EAAE,IAAI,GAChB,EACF,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,iBAAiB,EAAC,SAAS,EAAC,oBAAoB,GAAG,IAC/D,IACF,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=\"bottom-start-top-start\"\n        onClose={(_event, _data) => {\n          setIsOpen(false);\n        }}\n      >\n        <Menu.Item\n          title={\n            <Typography variant=\"display\">This can be any element</Typography>\n          }\n        />\n        <Menu.Item title=\"Danger action 1\" className=\"n-text-danger-text\" />\n        <Menu.Item\n          title=\"Danger action 2\"\n          className=\"n-text-danger-text\"\n          leadingVisual={\n            <Square2StackIconOutline className=\"n-text-danger-icon\" />\n          }\n        />\n        <Menu title=\"More actions\" description=\"Some additional actions\">\n          <Menu.Item\n            title=\"Danger action 3\"\n            className=\"n-text-danger-text\"\n            isDisabled={true}\n          />\n          <Menu.Item title=\"Danger action 4\" className=\"n-text-danger-text\" />\n        </Menu>\n      </Menu>\n      <FilledButton 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,MAAC,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,EACD,cAAc,EAAE,EAAE,EAAE,EAAE,mBAAmB,EAAE,aAE3C,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,MAAC,IAAI,IAAC,KAAK,EAAC,cAAc,EAAC,WAAW,EAAC,yBAAyB,aAC9D,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,iBAAiB,EACvB,SAAS,EAAC,oBAAoB,EAC9B,UAAU,EAAE,IAAI,GAChB,EACF,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,iBAAiB,EAAC,SAAS,EAAC,oBAAoB,GAAG,IAC/D,IACF,EACP,KAAC,YAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAC9B,GAAG,EAAE,QAAQ,mBACC,MAAM,mBACL,MAAM,sDAGR,IACd,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,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=\"bottom-start-top-start\"\n        onClose={(_event, _data) => {\n          setIsOpen(false);\n        }}\n        htmlAttributes={{ id: 'custom-items-menu' }}\n      >\n        <Menu.Item\n          title={\n            <Typography variant=\"display\">This can be any element</Typography>\n          }\n        />\n        <Menu.Item title=\"Danger action 1\" className=\"n-text-danger-text\" />\n        <Menu.Item\n          title=\"Danger action 2\"\n          className=\"n-text-danger-text\"\n          leadingVisual={\n            <Square2StackIconOutline className=\"n-text-danger-icon\" />\n          }\n        />\n        <Menu title=\"More actions\" description=\"Some additional actions\">\n          <Menu.Item\n            title=\"Danger action 3\"\n            className=\"n-text-danger-text\"\n            isDisabled={true}\n          />\n          <Menu.Item title=\"Danger action 4\" className=\"n-text-danger-text\" />\n        </Menu>\n      </Menu>\n      <FilledButton\n        onClick={() => setIsOpen(true)}\n        ref={anchorEl}\n        aria-haspopup=\"menu\"\n        aria-expanded={isOpen}\n      >\n        Open Menu (set with custom placement)\n      </FilledButton>\n    </>\n  );\n};\n\nexport default Component;\n"]}

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

@@ -27,7 +27,7 @@ const Component = () => {
     const [isOpen, setIsOpen] = useState(false);
     return (_jsxs(_Fragment, { children: [_jsxs(Menu, { isOpen: isOpen, anchorRef: anchorEl, onClose: (_event, _data) => {
                     setIsOpen(false);
-                }, children: [_jsx(Menu.Item, { title: "Action 1", onClick: () => {
+                }, htmlAttributes: { id: 'default-menu' }, children: [_jsx(Menu.Item, { title: "Action 1", onClick: () => {
                             alert('Action1');
                             setIsOpen(false);
                         } }), _jsx(Menu.Item, { title: "Action 2", onClick: () => {
@@ -39,7 +39,7 @@ const Component = () => {
                         } }), _jsx(Menu.Item, { title: "Action 4", description: "Action 4 is awesome", onClick: () => {
                             alert('Action4');
                             setIsOpen(false);
-                        } })] }), _jsx(FilledButton, { onClick: () => setIsOpen(true), ref: anchorEl, children: "Open Menu" })] }));
+                        } })] }), _jsx(FilledButton, { onClick: () => setIsOpen(true), ref: anchorEl, "aria-haspopup": "menu", "aria-expanded": isOpen, children: "Open Menu" })] }));
 };
 export default Component;
 //# sourceMappingURL=menu-default.story.js.map

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,MAAC,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,aAED,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,CAAC,SAAS,CAAC,CAAC;4BACjB,SAAS,CAAC,KAAK,CAAC,CAAC;wBACnB,CAAC,GACD,EACF,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,CAAC,SAAS,CAAC,CAAC;4BACjB,SAAS,CAAC,KAAK,CAAC,CAAC;wBACnB,CAAC,GACD,EACF,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,sBAAsB,EAClC,UAAU,EAAE,IAAI,EAChB,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,CAAC,SAAS,CAAC,CAAC;4BACjB,SAAS,CAAC,KAAK,CAAC,CAAC;wBACnB,CAAC,GACD,EACF,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,qBAAqB,EACjC,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,CAAC,SAAS,CAAC,CAAC;4BACjB,SAAS,CAAC,KAAK,CAAC,CAAC;wBACnB,CAAC,GACD,IACG,EAEP,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.Item\n          title=\"Action 1\"\n          onClick={() => {\n            alert('Action1');\n            setIsOpen(false);\n          }}\n        />\n        <Menu.Item\n          title=\"Action 2\"\n          onClick={() => {\n            alert('Action2');\n            setIsOpen(false);\n          }}\n        />\n        <Menu.Item\n          title=\"Action 3\"\n          description=\"Action 3 is disabled\"\n          isDisabled={true}\n          onClick={() => {\n            alert('Action3');\n            setIsOpen(false);\n          }}\n        />\n        <Menu.Item\n          title=\"Action 4\"\n          description=\"Action 4 is awesome\"\n          onClick={() => {\n            alert('Action4');\n            setIsOpen(false);\n          }}\n        />\n      </Menu>\n\n      <FilledButton 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,MAAC,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,EACD,cAAc,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE,aAEtC,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,CAAC,SAAS,CAAC,CAAC;4BACjB,SAAS,CAAC,KAAK,CAAC,CAAC;wBACnB,CAAC,GACD,EACF,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,CAAC,SAAS,CAAC,CAAC;4BACjB,SAAS,CAAC,KAAK,CAAC,CAAC;wBACnB,CAAC,GACD,EACF,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,sBAAsB,EAClC,UAAU,EAAE,IAAI,EAChB,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,CAAC,SAAS,CAAC,CAAC;4BACjB,SAAS,CAAC,KAAK,CAAC,CAAC;wBACnB,CAAC,GACD,EACF,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,qBAAqB,EACjC,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,CAAC,SAAS,CAAC,CAAC;4BACjB,SAAS,CAAC,KAAK,CAAC,CAAC;wBACnB,CAAC,GACD,IACG,EAEP,KAAC,YAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAC9B,GAAG,EAAE,QAAQ,mBACC,MAAM,mBACL,MAAM,0BAGR,IACd,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,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        htmlAttributes={{ id: 'default-menu' }}\n      >\n        <Menu.Item\n          title=\"Action 1\"\n          onClick={() => {\n            alert('Action1');\n            setIsOpen(false);\n          }}\n        />\n        <Menu.Item\n          title=\"Action 2\"\n          onClick={() => {\n            alert('Action2');\n            setIsOpen(false);\n          }}\n        />\n        <Menu.Item\n          title=\"Action 3\"\n          description=\"Action 3 is disabled\"\n          isDisabled={true}\n          onClick={() => {\n            alert('Action3');\n            setIsOpen(false);\n          }}\n        />\n        <Menu.Item\n          title=\"Action 4\"\n          description=\"Action 4 is awesome\"\n          onClick={() => {\n            alert('Action4');\n            setIsOpen(false);\n          }}\n        />\n      </Menu>\n\n      <FilledButton\n        onClick={() => setIsOpen(true)}\n        ref={anchorEl}\n        aria-haspopup=\"menu\"\n        aria-expanded={isOpen}\n      >\n        Open Menu\n      </FilledButton>\n    </>\n  );\n};\n\nexport default Component;\n"]}

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

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

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

@@ -28,7 +28,7 @@ const Component = () => {
     const [isPopoverOpen, setIsPopoverOpen] = useState(false);
     return (_jsxs(_Fragment, { children: [_jsxs(Menu, { isOpen: isOpen, anchorRef: anchorEl, onClose: (_event, _data) => {
                     setIsOpen(false);
-                }, 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" })] }) })] })] }));
+                }, htmlAttributes: { id: 'popover-menu' }, 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, "aria-haspopup": "menu", "aria-expanded": isOpen, 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,MAAC,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,aAED,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,IACG,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.Item title=\"Action 1\" onClick={() => alert('Action1')} />\n        <Menu.Item title=\"Action 2\" onClick={() => alert('Action2')} />\n        <Menu.Item\n          title=\"Action 3\"\n          description=\"Action 3 is disabled\"\n          isDisabled={true}\n          onClick={() => alert('Action3')}\n        />\n        <Menu.Item\n          title=\"Action 4\"\n          description=\"Action 4 is awesome\"\n          onClick={() => alert('Action4')}\n        />\n      </Menu>\n\n      <Popover isOpen={isPopoverOpen}>\n        <Popover.Trigger>\n          <FilledButton onClick={() => setIsPopoverOpen(!isPopoverOpen)}>\n            {isPopoverOpen ? 'Close' : 'Open'} Popover\n          </FilledButton>\n        </Popover.Trigger>\n        <Popover.Content style={{ height: 150, overflow: 'auto', width: 400 }}>\n          <>\n            <p>\n              Scroll me to the bottom to open menu Lorem ipsum dolor sit amet,\n              consectetur adipiscing elit, sed do eiusmod tempor incididunt ut\n              labore et dolore magna aliqua. Ut enim ad minim veniam, quis\n              nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n              consequat. Duis aute irure dolor in reprehenderit in voluptate\n              velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n              occaecat cupidatat non proident, sunt in culpa qui officia\n              deserunt mollit anim id est laborum.\n            </p>\n            <FilledButton 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,MAAC,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,EACD,cAAc,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE,aAEtC,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,IACG,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,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAC9B,GAAG,EAAE,QAAQ,mBACC,MAAM,mBACL,MAAM,kCAGR,IACd,GACa,IACV,IACT,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,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        htmlAttributes={{ id: 'popover-menu' }}\n      >\n        <Menu.Item title=\"Action 1\" onClick={() => alert('Action1')} />\n        <Menu.Item title=\"Action 2\" onClick={() => alert('Action2')} />\n        <Menu.Item\n          title=\"Action 3\"\n          description=\"Action 3 is disabled\"\n          isDisabled={true}\n          onClick={() => alert('Action3')}\n        />\n        <Menu.Item\n          title=\"Action 4\"\n          description=\"Action 4 is awesome\"\n          onClick={() => alert('Action4')}\n        />\n      </Menu>\n\n      <Popover isOpen={isPopoverOpen}>\n        <Popover.Trigger>\n          <FilledButton onClick={() => setIsPopoverOpen(!isPopoverOpen)}>\n            {isPopoverOpen ? 'Close' : 'Open'} Popover\n          </FilledButton>\n        </Popover.Trigger>\n        <Popover.Content style={{ height: 150, overflow: 'auto', width: 400 }}>\n          <>\n            <p>\n              Scroll me to the bottom to open menu Lorem ipsum dolor sit amet,\n              consectetur adipiscing elit, sed do eiusmod tempor incididunt ut\n              labore et dolore magna aliqua. Ut enim ad minim veniam, quis\n              nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n              consequat. Duis aute irure dolor in reprehenderit in voluptate\n              velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n              occaecat cupidatat non proident, sunt in culpa qui officia\n              deserunt mollit anim id est laborum.\n            </p>\n            <FilledButton\n              onClick={() => setIsOpen(true)}\n              ref={anchorEl}\n              aria-haspopup=\"menu\"\n              aria-expanded={isOpen}\n            >\n              Open Context Menu\n            </FilledButton>\n          </>\n        </Popover.Content>\n      </Popover>\n    </>\n  );\n};\n\nexport default Component;\n"]}

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

@@ -28,7 +28,7 @@ const Component = () => {
     const [isOpen, setIsOpen] = useState(false);
     return (_jsxs(_Fragment, { children: [_jsxs(Menu, { isOpen: isOpen, anchorRef: anchorEl, onClose: (_event, _data) => {
                     setIsOpen(false);
-                }, 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" }), _jsxs(Menu, { title: "Copy as", description: "Copying as something", icon: _jsx(Square2StackIconOutline, {}), children: [_jsx(Menu.Item, { title: "Text" }), _jsx(Menu.Item, { title: "Video" }), _jsxs(Menu, { title: "Image", 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" })] }), _jsxs(Menu, { title: "Share", children: [_jsx(Menu.Item, { title: "Mail" }), _jsx(Menu.Item, { title: "Instagram" })] })] }), _jsx(FilledButton, { onClick: () => setIsOpen(true), ref: anchorEl, children: "Open Menu" })] }));
+                }, htmlAttributes: { id: 'nested-menu' }, 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" }), _jsxs(Menu, { title: "Copy as", description: "Copying as something", icon: _jsx(Square2StackIconOutline, {}), children: [_jsx(Menu.Item, { title: "Text" }), _jsx(Menu.Item, { title: "Video" }), _jsxs(Menu, { title: "Image", 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" })] }), _jsxs(Menu, { title: "Share", children: [_jsx(Menu.Item, { title: "Mail" }), _jsx(Menu.Item, { title: "Instagram" })] })] }), _jsx(FilledButton, { onClick: () => setIsOpen(true), ref: anchorEl, "aria-haspopup": "menu", "aria-expanded": isOpen, 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,MAAC,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,aAED,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,MAAC,IAAI,IACH,KAAK,EAAC,SAAS,EACf,WAAW,EAAC,sBAAsB,EAClC,IAAI,EAAE,KAAC,uBAAuB,KAAG,aAEjC,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,OAAO,GAAG,EAC3B,MAAC,IAAI,IAAC,KAAK,EAAC,OAAO,aACjB,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,IACrB,EACP,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,OAAO,GAAG,IACtB,EACP,MAAC,IAAI,IAAC,KAAK,EAAC,OAAO,aACjB,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,WAAW,GAAG,IAC1B,IACF,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.Item title=\"Undo\" onClick={() => alert('Undo')} />\n        <Menu.Item title=\"Redo\" isDisabled />\n        <Menu.Item title=\"Cut\" description=\"Copy and remove\" />\n        <Menu\n          title=\"Copy as\"\n          description=\"Copying as something\"\n          icon={<Square2StackIconOutline />}\n        >\n          <Menu.Item title=\"Text\" />\n          <Menu.Item title=\"Video\" />\n          <Menu title=\"Image\">\n            <Menu.Item title=\".png\" />\n            <Menu.Item title=\".jpg\" />\n            <Menu.Item title=\".svg\" />\n            <Menu.Item title=\".gif\" />\n          </Menu>\n          <Menu.Item title=\"Audio\" />\n        </Menu>\n        <Menu title=\"Share\">\n          <Menu.Item title=\"Mail\" />\n          <Menu.Item title=\"Instagram\" />\n        </Menu>\n      </Menu>\n      <FilledButton 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,MAAC,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,EACD,cAAc,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE,aAErC,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,MAAC,IAAI,IACH,KAAK,EAAC,SAAS,EACf,WAAW,EAAC,sBAAsB,EAClC,IAAI,EAAE,KAAC,uBAAuB,KAAG,aAEjC,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,OAAO,GAAG,EAC3B,MAAC,IAAI,IAAC,KAAK,EAAC,OAAO,aACjB,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,IACrB,EACP,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,OAAO,GAAG,IACtB,EACP,MAAC,IAAI,IAAC,KAAK,EAAC,OAAO,aACjB,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,KAAC,IAAI,CAAC,IAAI,IAAC,KAAK,EAAC,WAAW,GAAG,IAC1B,IACF,EACP,KAAC,YAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAC9B,GAAG,EAAE,QAAQ,mBACC,MAAM,mBACL,MAAM,0BAGR,IACd,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,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        htmlAttributes={{ id: 'nested-menu' }}\n      >\n        <Menu.Item title=\"Undo\" onClick={() => alert('Undo')} />\n        <Menu.Item title=\"Redo\" isDisabled />\n        <Menu.Item title=\"Cut\" description=\"Copy and remove\" />\n        <Menu\n          title=\"Copy as\"\n          description=\"Copying as something\"\n          icon={<Square2StackIconOutline />}\n        >\n          <Menu.Item title=\"Text\" />\n          <Menu.Item title=\"Video\" />\n          <Menu title=\"Image\">\n            <Menu.Item title=\".png\" />\n            <Menu.Item title=\".jpg\" />\n            <Menu.Item title=\".svg\" />\n            <Menu.Item title=\".gif\" />\n          </Menu>\n          <Menu.Item title=\"Audio\" />\n        </Menu>\n        <Menu title=\"Share\">\n          <Menu.Item title=\"Mail\" />\n          <Menu.Item title=\"Instagram\" />\n        </Menu>\n      </Menu>\n      <FilledButton\n        onClick={() => setIsOpen(true)}\n        ref={anchorEl}\n        aria-haspopup=\"menu\"\n        aria-expanded={isOpen}\n      >\n        Open Menu\n      </FilledButton>\n    </>\n  );\n};\n\nexport default Component;\n"]}

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

@@ -27,7 +27,7 @@ const Component = () => {
     const [isOpen, setIsOpen] = useState(false);
     return (_jsxs(_Fragment, { children: [_jsxs(Menu, { isOpen: isOpen, anchorRef: anchorEl, placement: "middle-end-middle-start", onClose: (_event, _data) => {
                     setIsOpen(false);
-                }, children: [_jsx(Menu.Item, { title: "Action 1", onClick: () => {
+                }, htmlAttributes: { id: 'placements-menu' }, children: [_jsx(Menu.Item, { title: "Action 1", onClick: () => {
                             alert('Action1');
                             setIsOpen(false);
                         } }), _jsx(Menu.Item, { title: "Action 2", onClick: () => {
@@ -39,7 +39,7 @@ const Component = () => {
                         } }), _jsx(Menu.Item, { title: "Action 4", description: "Action 4 is awesome", onClick: () => {
                             alert('Action4');
                             setIsOpen(false);
-                        } }), _jsx(Menu.Item, { id: "action_5", title: "Action 5", description: "Action 5 does not close the menu" })] }), _jsx(FilledButton, { onClick: () => setIsOpen(true), ref: anchorEl, children: "Open Menu" })] }));
+                        } }), _jsx(Menu.Item, { id: "action_5", title: "Action 5", description: "Action 5 does not close the menu" })] }), _jsx(FilledButton, { onClick: () => setIsOpen(true), ref: anchorEl, "aria-haspopup": "menu", "aria-expanded": isOpen, children: "Open Menu" })] }));
 };
 export default Component;
 //# sourceMappingURL=menu-placements.story.js.map

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,MAAC,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,aAED,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,CAAC,SAAS,CAAC,CAAC;4BACjB,SAAS,CAAC,KAAK,CAAC,CAAC;wBACnB,CAAC,GACD,EACF,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,CAAC,SAAS,CAAC,CAAC;4BACjB,SAAS,CAAC,KAAK,CAAC,CAAC;wBACnB,CAAC,GACD,EACF,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,sBAAsB,EAClC,UAAU,EAAE,IAAI,EAChB,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,CAAC,SAAS,CAAC,CAAC;4BACjB,SAAS,CAAC,KAAK,CAAC,CAAC;wBACnB,CAAC,GACD,EACF,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,qBAAqB,EACjC,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,CAAC,SAAS,CAAC,CAAC;4BACjB,SAAS,CAAC,KAAK,CAAC,CAAC;wBACnB,CAAC,GACD,EACF,KAAC,IAAI,CAAC,IAAI,IACR,EAAE,EAAC,UAAU,EACb,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,kCAAkC,GAC9C,IACG,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.Item\n          title=\"Action 1\"\n          onClick={() => {\n            alert('Action1');\n            setIsOpen(false);\n          }}\n        />\n        <Menu.Item\n          title=\"Action 2\"\n          onClick={() => {\n            alert('Action2');\n            setIsOpen(false);\n          }}\n        />\n        <Menu.Item\n          title=\"Action 3\"\n          description=\"Action 3 is disabled\"\n          isDisabled={true}\n          onClick={() => {\n            alert('Action3');\n            setIsOpen(false);\n          }}\n        />\n        <Menu.Item\n          title=\"Action 4\"\n          description=\"Action 4 is awesome\"\n          onClick={() => {\n            alert('Action4');\n            setIsOpen(false);\n          }}\n        />\n        <Menu.Item\n          id=\"action_5\"\n          title=\"Action 5\"\n          description=\"Action 5 does not close the menu\"\n        />\n      </Menu>\n\n      <FilledButton 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,MAAC,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,EACD,cAAc,EAAE,EAAE,EAAE,EAAE,iBAAiB,EAAE,aAEzC,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,CAAC,SAAS,CAAC,CAAC;4BACjB,SAAS,CAAC,KAAK,CAAC,CAAC;wBACnB,CAAC,GACD,EACF,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,CAAC,SAAS,CAAC,CAAC;4BACjB,SAAS,CAAC,KAAK,CAAC,CAAC;wBACnB,CAAC,GACD,EACF,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,sBAAsB,EAClC,UAAU,EAAE,IAAI,EAChB,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,CAAC,SAAS,CAAC,CAAC;4BACjB,SAAS,CAAC,KAAK,CAAC,CAAC;wBACnB,CAAC,GACD,EACF,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,qBAAqB,EACjC,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,CAAC,SAAS,CAAC,CAAC;4BACjB,SAAS,CAAC,KAAK,CAAC,CAAC;wBACnB,CAAC,GACD,EACF,KAAC,IAAI,CAAC,IAAI,IACR,EAAE,EAAC,UAAU,EACb,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,kCAAkC,GAC9C,IACG,EAEP,KAAC,YAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAC9B,GAAG,EAAE,QAAQ,mBACC,MAAM,mBACL,MAAM,0BAGR,IACd,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,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        htmlAttributes={{ id: 'placements-menu' }}\n      >\n        <Menu.Item\n          title=\"Action 1\"\n          onClick={() => {\n            alert('Action1');\n            setIsOpen(false);\n          }}\n        />\n        <Menu.Item\n          title=\"Action 2\"\n          onClick={() => {\n            alert('Action2');\n            setIsOpen(false);\n          }}\n        />\n        <Menu.Item\n          title=\"Action 3\"\n          description=\"Action 3 is disabled\"\n          isDisabled={true}\n          onClick={() => {\n            alert('Action3');\n            setIsOpen(false);\n          }}\n        />\n        <Menu.Item\n          title=\"Action 4\"\n          description=\"Action 4 is awesome\"\n          onClick={() => {\n            alert('Action4');\n            setIsOpen(false);\n          }}\n        />\n        <Menu.Item\n          id=\"action_5\"\n          title=\"Action 5\"\n          description=\"Action 5 does not close the menu\"\n        />\n      </Menu>\n\n      <FilledButton\n        onClick={() => setIsOpen(true)}\n        ref={anchorEl}\n        aria-haspopup=\"menu\"\n        aria-expanded={isOpen}\n      >\n        Open Menu\n      </FilledButton>\n    </>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/menu/stories/menu-radio-and-normal.story.js

@@ -28,7 +28,7 @@ const Component = () => {
     const [selectedOption, setSelectedOption] = useState('option-1');
     return (_jsxs(_Fragment, { children: [_jsxs(Menu, { isOpen: isOpen, anchorRef: anchorEl, onClose: (_event, _data) => {
                     setIsOpen(false);
-                }, children: [_jsxs(Menu.Group, { children: [_jsx(Menu.RadioItem, { title: "Option 1", isChecked: selectedOption === 'option-1', onClick: () => {
+                }, htmlAttributes: { id: 'radio-and-normal-menu' }, children: [_jsxs(Menu.Group, { children: [_jsx(Menu.RadioItem, { title: "Option 1", isChecked: selectedOption === 'option-1', onClick: () => {
                                     setSelectedOption('option-1');
                                 } }), _jsx(Menu.RadioItem, { title: "Option 2", isChecked: selectedOption === 'option-2', onClick: () => {
                                     setSelectedOption('option-2');
@@ -36,7 +36,7 @@ const Component = () => {
                                     alert('Action 1');
                                 } }), _jsx(Menu.Item, { title: "Action 2", onClick: () => {
                                     alert('Action 2');
-                                } })] })] }), _jsxs("div", { className: "n-flex n-flex-col n-gap-token-4 n-items-center", children: [_jsxs(Typography, { variant: "body-medium", children: ["Selected option: ", _jsx("strong", { children: selectedOption })] }), _jsx(DropdownButton, { isOpen: isOpen, onClick: () => setIsOpen(true), ref: anchorEl, children: "Open menu" })] })] }));
+                                } })] })] }), _jsxs("div", { className: "n-flex n-flex-col n-gap-token-4 n-items-center", children: [_jsxs(Typography, { variant: "body-medium", children: ["Selected option: ", _jsx("strong", { children: selectedOption })] }), _jsx(DropdownButton, { isOpen: isOpen, onClick: () => setIsOpen(true), ref: anchorEl, "aria-haspopup": "menu", children: "Open menu" })] })] }));
 };
 export default Component;
 //# sourceMappingURL=menu-radio-and-normal.story.js.map

package/lib/esm/menu/stories/menu-radio-and-normal.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-radio-and-normal.story.js","sourceRoot":"","sources":["../../../../src/menu/stories/menu-radio-and-normal.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACpE,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,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAClD,UAAU,CACX,CAAC;IAEF,OAAO,CACL,8BACE,MAAC,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,aAED,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,SAAS,IACb,KAAK,EAAC,UAAU,EAChB,SAAS,EAAE,cAAc,KAAK,UAAU,EACxC,OAAO,EAAE,GAAG,EAAE;oCACZ,iBAAiB,CAAC,UAAU,CAAC,CAAC;gCAChC,CAAC,GACD,EACF,KAAC,IAAI,CAAC,SAAS,IACb,KAAK,EAAC,UAAU,EAChB,SAAS,EAAE,cAAc,KAAK,UAAU,EACxC,OAAO,EAAE,GAAG,EAAE;oCACZ,iBAAiB,CAAC,UAAU,CAAC,CAAC;gCAChC,CAAC,GACD,IACS,EACb,KAAC,IAAI,CAAC,OAAO,KAAG,EAChB,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE;oCACZ,KAAK,CAAC,UAAU,CAAC,CAAC;gCACpB,CAAC,GACD,EACF,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE;oCACZ,KAAK,CAAC,UAAU,CAAC,CAAC;gCACpB,CAAC,GACD,IACS,IACR,EACP,eAAK,SAAS,EAAC,gDAAgD,aAC7D,MAAC,UAAU,IAAC,OAAO,EAAC,aAAa,kCACd,2BAAS,cAAc,GAAU,IACvC,EACb,KAAC,cAAc,IACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAC9B,GAAG,EAAE,QAAQ,0BAGE,IACb,IACL,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 { DropdownButton, Menu, Typography } 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 [selectedOption, setSelectedOption] = useState<string | null>(\n    'option-1',\n  );\n\n  return (\n    <>\n      <Menu\n        isOpen={isOpen}\n        anchorRef={anchorEl}\n        onClose={(_event, _data) => {\n          setIsOpen(false);\n        }}\n      >\n        <Menu.Group>\n          <Menu.RadioItem\n            title=\"Option 1\"\n            isChecked={selectedOption === 'option-1'}\n            onClick={() => {\n              setSelectedOption('option-1');\n            }}\n          />\n          <Menu.RadioItem\n            title=\"Option 2\"\n            isChecked={selectedOption === 'option-2'}\n            onClick={() => {\n              setSelectedOption('option-2');\n            }}\n          />\n        </Menu.Group>\n        <Menu.Divider />\n        <Menu.Group>\n          <Menu.Item\n            title=\"Action 1\"\n            onClick={() => {\n              alert('Action 1');\n            }}\n          />\n          <Menu.Item\n            title=\"Action 2\"\n            onClick={() => {\n              alert('Action 2');\n            }}\n          />\n        </Menu.Group>\n      </Menu>\n      <div className=\"n-flex n-flex-col n-gap-token-4 n-items-center\">\n        <Typography variant=\"body-medium\">\n          Selected option: <strong>{selectedOption}</strong>\n        </Typography>\n        <DropdownButton\n          isOpen={isOpen}\n          onClick={() => setIsOpen(true)}\n          ref={anchorEl}\n        >\n          Open menu\n        </DropdownButton>\n      </div>\n    </>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"menu-radio-and-normal.story.js","sourceRoot":"","sources":["../../../../src/menu/stories/menu-radio-and-normal.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACpE,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,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAClD,UAAU,CACX,CAAC;IAEF,OAAO,CACL,8BACE,MAAC,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,EACD,cAAc,EAAE,EAAE,EAAE,EAAE,uBAAuB,EAAE,aAE/C,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,SAAS,IACb,KAAK,EAAC,UAAU,EAChB,SAAS,EAAE,cAAc,KAAK,UAAU,EACxC,OAAO,EAAE,GAAG,EAAE;oCACZ,iBAAiB,CAAC,UAAU,CAAC,CAAC;gCAChC,CAAC,GACD,EACF,KAAC,IAAI,CAAC,SAAS,IACb,KAAK,EAAC,UAAU,EAChB,SAAS,EAAE,cAAc,KAAK,UAAU,EACxC,OAAO,EAAE,GAAG,EAAE;oCACZ,iBAAiB,CAAC,UAAU,CAAC,CAAC;gCAChC,CAAC,GACD,IACS,EACb,KAAC,IAAI,CAAC,OAAO,KAAG,EAChB,MAAC,IAAI,CAAC,KAAK,eACT,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE;oCACZ,KAAK,CAAC,UAAU,CAAC,CAAC;gCACpB,CAAC,GACD,EACF,KAAC,IAAI,CAAC,IAAI,IACR,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE;oCACZ,KAAK,CAAC,UAAU,CAAC,CAAC;gCACpB,CAAC,GACD,IACS,IACR,EACP,eAAK,SAAS,EAAC,gDAAgD,aAC7D,MAAC,UAAU,IAAC,OAAO,EAAC,aAAa,kCACd,2BAAS,cAAc,GAAU,IACvC,EACb,KAAC,cAAc,IACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAC9B,GAAG,EAAE,QAAQ,mBACC,MAAM,0BAGL,IACb,IACL,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 { DropdownButton, Menu, Typography } 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 [selectedOption, setSelectedOption] = useState<string | null>(\n    'option-1',\n  );\n\n  return (\n    <>\n      <Menu\n        isOpen={isOpen}\n        anchorRef={anchorEl}\n        onClose={(_event, _data) => {\n          setIsOpen(false);\n        }}\n        htmlAttributes={{ id: 'radio-and-normal-menu' }}\n      >\n        <Menu.Group>\n          <Menu.RadioItem\n            title=\"Option 1\"\n            isChecked={selectedOption === 'option-1'}\n            onClick={() => {\n              setSelectedOption('option-1');\n            }}\n          />\n          <Menu.RadioItem\n            title=\"Option 2\"\n            isChecked={selectedOption === 'option-2'}\n            onClick={() => {\n              setSelectedOption('option-2');\n            }}\n          />\n        </Menu.Group>\n        <Menu.Divider />\n        <Menu.Group>\n          <Menu.Item\n            title=\"Action 1\"\n            onClick={() => {\n              alert('Action 1');\n            }}\n          />\n          <Menu.Item\n            title=\"Action 2\"\n            onClick={() => {\n              alert('Action 2');\n            }}\n          />\n        </Menu.Group>\n      </Menu>\n      <div className=\"n-flex n-flex-col n-gap-token-4 n-items-center\">\n        <Typography variant=\"body-medium\">\n          Selected option: <strong>{selectedOption}</strong>\n        </Typography>\n        <DropdownButton\n          isOpen={isOpen}\n          onClick={() => setIsOpen(true)}\n          ref={anchorEl}\n          aria-haspopup=\"menu\"\n        >\n          Open menu\n        </DropdownButton>\n      </div>\n    </>\n  );\n};\n\nexport default Component;\n"]}

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

@@ -29,7 +29,7 @@ const Component = () => {
     const [selectedOption, setSelectedOption] = useState('option-1');
     return (_jsxs(_Fragment, { children: [_jsxs(Menu, { isOpen: isOpen, anchorRef: anchorEl, onClose: (_event, _data) => {
                     setIsOpen(false);
-                }, children: [_jsx(Menu.RadioItem, { title: "Option 1", leadingVisual: _jsx(SunIconOutline, {}), isChecked: selectedOption === 'option-1', onClick: () => {
+                }, htmlAttributes: { id: 'radio-items-menu' }, children: [_jsx(Menu.RadioItem, { title: "Option 1", leadingVisual: _jsx(SunIconOutline, {}), isChecked: selectedOption === 'option-1', onClick: () => {
                             setSelectedOption('option-1');
                         } }), _jsx(Menu.RadioItem, { title: "Option 2", leadingVisual: _jsx(MoonIconOutline, {}), isChecked: selectedOption === 'option-2', onClick: () => {
                             setSelectedOption('option-2');
@@ -37,7 +37,7 @@ const Component = () => {
                             setSelectedOption('option-3');
                         } }), _jsx(Menu.RadioItem, { title: "Option 4", trailingContent: _jsx(Kbd, { keys: ['A'] }), isChecked: selectedOption === 'option-4', onClick: () => {
                             setSelectedOption('option-4');
-                        } })] }), _jsxs("div", { className: "n-flex n-flex-col n-gap-token-4 n-items-center", children: [_jsxs(Typography, { variant: "body-medium", children: ["Selected option: ", _jsx("strong", { children: selectedOption })] }), _jsx(DropdownButton, { isOpen: isOpen, onClick: () => setIsOpen(true), ref: anchorEl, children: "Open menu" })] })] }));
+                        } })] }), _jsxs("div", { className: "n-flex n-flex-col n-gap-token-4 n-items-center", children: [_jsxs(Typography, { variant: "body-medium", children: ["Selected option: ", _jsx("strong", { children: selectedOption })] }), _jsx(DropdownButton, { isOpen: isOpen, onClick: () => setIsOpen(true), ref: anchorEl, "aria-haspopup": "menu", children: "Open menu" })] })] }));
 };
 export default Component;
 //# sourceMappingURL=menu-radio-items.story.js.map

package/lib/esm/menu/stories/menu-radio-items.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-radio-items.story.js","sourceRoot":"","sources":["../../../../src/menu/stories/menu-radio-items.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,cAAc,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACzE,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACzE,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,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAClD,UAAU,CACX,CAAC;IAEF,OAAO,CACL,8BACE,MAAC,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,aAED,KAAC,IAAI,CAAC,SAAS,IACb,KAAK,EAAC,UAAU,EAChB,aAAa,EAAE,KAAC,cAAc,KAAG,EACjC,SAAS,EAAE,cAAc,KAAK,UAAU,EACxC,OAAO,EAAE,GAAG,EAAE;4BACZ,iBAAiB,CAAC,UAAU,CAAC,CAAC;wBAChC,CAAC,GACD,EACF,KAAC,IAAI,CAAC,SAAS,IACb,KAAK,EAAC,UAAU,EAChB,aAAa,EAAE,KAAC,eAAe,KAAG,EAClC,SAAS,EAAE,cAAc,KAAK,UAAU,EACxC,OAAO,EAAE,GAAG,EAAE;4BACZ,iBAAiB,CAAC,UAAU,CAAC,CAAC;wBAChC,CAAC,GACD,EACF,KAAC,IAAI,CAAC,SAAS,IACb,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,4BAA4B,EACxC,SAAS,EAAE,cAAc,KAAK,UAAU,EACxC,OAAO,EAAE,GAAG,EAAE;4BACZ,iBAAiB,CAAC,UAAU,CAAC,CAAC;wBAChC,CAAC,GACD,EACF,KAAC,IAAI,CAAC,SAAS,IACb,KAAK,EAAC,UAAU,EAChB,eAAe,EAAE,KAAC,GAAG,IAAC,IAAI,EAAE,CAAC,GAAG,CAAC,GAAI,EACrC,SAAS,EAAE,cAAc,KAAK,UAAU,EACxC,OAAO,EAAE,GAAG,EAAE;4BACZ,iBAAiB,CAAC,UAAU,CAAC,CAAC;wBAChC,CAAC,GACD,IACG,EACP,eAAK,SAAS,EAAC,gDAAgD,aAC7D,MAAC,UAAU,IAAC,OAAO,EAAC,aAAa,kCACd,2BAAS,cAAc,GAAU,IACvC,EACb,KAAC,cAAc,IACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAC9B,GAAG,EAAE,QAAQ,0BAGE,IACb,IACL,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 { DropdownButton, Kbd, Menu, Typography } from '@neo4j-ndl/react';\nimport { MoonIconOutline, SunIconOutline } 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 [selectedOption, setSelectedOption] = useState<string | null>(\n    'option-1',\n  );\n\n  return (\n    <>\n      <Menu\n        isOpen={isOpen}\n        anchorRef={anchorEl}\n        onClose={(_event, _data) => {\n          setIsOpen(false);\n        }}\n      >\n        <Menu.RadioItem\n          title=\"Option 1\"\n          leadingVisual={<SunIconOutline />}\n          isChecked={selectedOption === 'option-1'}\n          onClick={() => {\n            setSelectedOption('option-1');\n          }}\n        />\n        <Menu.RadioItem\n          title=\"Option 2\"\n          leadingVisual={<MoonIconOutline />}\n          isChecked={selectedOption === 'option-2'}\n          onClick={() => {\n            setSelectedOption('option-2');\n          }}\n        />\n        <Menu.RadioItem\n          title=\"Option 3\"\n          description=\"Option 3 has a description\"\n          isChecked={selectedOption === 'option-3'}\n          onClick={() => {\n            setSelectedOption('option-3');\n          }}\n        />\n        <Menu.RadioItem\n          title=\"Option 4\"\n          trailingContent={<Kbd keys={['A']} />}\n          isChecked={selectedOption === 'option-4'}\n          onClick={() => {\n            setSelectedOption('option-4');\n          }}\n        />\n      </Menu>\n      <div className=\"n-flex n-flex-col n-gap-token-4 n-items-center\">\n        <Typography variant=\"body-medium\">\n          Selected option: <strong>{selectedOption}</strong>\n        </Typography>\n        <DropdownButton\n          isOpen={isOpen}\n          onClick={() => setIsOpen(true)}\n          ref={anchorEl}\n        >\n          Open menu\n        </DropdownButton>\n      </div>\n    </>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"menu-radio-items.story.js","sourceRoot":"","sources":["../../../../src/menu/stories/menu-radio-items.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,cAAc,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACzE,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACzE,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,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAClD,UAAU,CACX,CAAC;IAEF,OAAO,CACL,8BACE,MAAC,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,EACD,cAAc,EAAE,EAAE,EAAE,EAAE,kBAAkB,EAAE,aAE1C,KAAC,IAAI,CAAC,SAAS,IACb,KAAK,EAAC,UAAU,EAChB,aAAa,EAAE,KAAC,cAAc,KAAG,EACjC,SAAS,EAAE,cAAc,KAAK,UAAU,EACxC,OAAO,EAAE,GAAG,EAAE;4BACZ,iBAAiB,CAAC,UAAU,CAAC,CAAC;wBAChC,CAAC,GACD,EACF,KAAC,IAAI,CAAC,SAAS,IACb,KAAK,EAAC,UAAU,EAChB,aAAa,EAAE,KAAC,eAAe,KAAG,EAClC,SAAS,EAAE,cAAc,KAAK,UAAU,EACxC,OAAO,EAAE,GAAG,EAAE;4BACZ,iBAAiB,CAAC,UAAU,CAAC,CAAC;wBAChC,CAAC,GACD,EACF,KAAC,IAAI,CAAC,SAAS,IACb,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,4BAA4B,EACxC,SAAS,EAAE,cAAc,KAAK,UAAU,EACxC,OAAO,EAAE,GAAG,EAAE;4BACZ,iBAAiB,CAAC,UAAU,CAAC,CAAC;wBAChC,CAAC,GACD,EACF,KAAC,IAAI,CAAC,SAAS,IACb,KAAK,EAAC,UAAU,EAChB,eAAe,EAAE,KAAC,GAAG,IAAC,IAAI,EAAE,CAAC,GAAG,CAAC,GAAI,EACrC,SAAS,EAAE,cAAc,KAAK,UAAU,EACxC,OAAO,EAAE,GAAG,EAAE;4BACZ,iBAAiB,CAAC,UAAU,CAAC,CAAC;wBAChC,CAAC,GACD,IACG,EACP,eAAK,SAAS,EAAC,gDAAgD,aAC7D,MAAC,UAAU,IAAC,OAAO,EAAC,aAAa,kCACd,2BAAS,cAAc,GAAU,IACvC,EACb,KAAC,cAAc,IACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAC9B,GAAG,EAAE,QAAQ,mBACC,MAAM,0BAGL,IACb,IACL,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 { DropdownButton, Kbd, Menu, Typography } from '@neo4j-ndl/react';\nimport { MoonIconOutline, SunIconOutline } 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 [selectedOption, setSelectedOption] = useState<string | null>(\n    'option-1',\n  );\n\n  return (\n    <>\n      <Menu\n        isOpen={isOpen}\n        anchorRef={anchorEl}\n        onClose={(_event, _data) => {\n          setIsOpen(false);\n        }}\n        htmlAttributes={{ id: 'radio-items-menu' }}\n      >\n        <Menu.RadioItem\n          title=\"Option 1\"\n          leadingVisual={<SunIconOutline />}\n          isChecked={selectedOption === 'option-1'}\n          onClick={() => {\n            setSelectedOption('option-1');\n          }}\n        />\n        <Menu.RadioItem\n          title=\"Option 2\"\n          leadingVisual={<MoonIconOutline />}\n          isChecked={selectedOption === 'option-2'}\n          onClick={() => {\n            setSelectedOption('option-2');\n          }}\n        />\n        <Menu.RadioItem\n          title=\"Option 3\"\n          description=\"Option 3 has a description\"\n          isChecked={selectedOption === 'option-3'}\n          onClick={() => {\n            setSelectedOption('option-3');\n          }}\n        />\n        <Menu.RadioItem\n          title=\"Option 4\"\n          trailingContent={<Kbd keys={['A']} />}\n          isChecked={selectedOption === 'option-4'}\n          onClick={() => {\n            setSelectedOption('option-4');\n          }}\n        />\n      </Menu>\n      <div className=\"n-flex n-flex-col n-gap-token-4 n-items-center\">\n        <Typography variant=\"body-medium\">\n          Selected option: <strong>{selectedOption}</strong>\n        </Typography>\n        <DropdownButton\n          isOpen={isOpen}\n          onClick={() => setIsOpen(true)}\n          ref={anchorEl}\n          aria-haspopup=\"menu\"\n        >\n          Open menu\n        </DropdownButton>\n      </div>\n    </>\n  );\n};\n\nexport default Component;\n"]}