@neo4j-ndl/react 4.9.43 → 4.9.45

package/lib/cjs/clean-icon-button/CleanIconButton.js

@@ -38,8 +38,8 @@ const icon_button_base_1 = require("../icon-button-base");
 const CleanIconButton = (_a) => {
     var { children, as, isLoading = false, isDisabled = false, size = 'medium', 
     // Does not have a default value to avoid setting aria-pressed to true if not explicitly set
-    isActive, variant = 'neutral', description, tooltipProps, className, style, htmlAttributes, onClick, ref } = _a, restProps = __rest(_a, ["children", "as", "isLoading", "isDisabled", "size", "isActive", "variant", "description", "tooltipProps", "className", "style", "htmlAttributes", "onClick", "ref"]);
-    return ((0, jsx_runtime_1.jsx)(icon_button_base_1.IconButtonBase, Object.assign({ as: as, iconButtonVariant: "clean", isDisabled: isDisabled, size: size, isLoading: isLoading, isActive: isActive, variant: variant, description: description, tooltipProps: tooltipProps, className: className, style: style, htmlAttributes: htmlAttributes, onClick: onClick, ref: ref }, restProps, { children: children })));
+    isActive, variant = 'neutral', description, descriptionKdbProps, tooltipProps, className, style, htmlAttributes, onClick, ref } = _a, restProps = __rest(_a, ["children", "as", "isLoading", "isDisabled", "size", "isActive", "variant", "description", "descriptionKdbProps", "tooltipProps", "className", "style", "htmlAttributes", "onClick", "ref"]);
+    return ((0, jsx_runtime_1.jsx)(icon_button_base_1.IconButtonBase, Object.assign({ as: as, iconButtonVariant: "clean", isDisabled: isDisabled, size: size, isLoading: isLoading, isActive: isActive, variant: variant, descriptionKdbProps: descriptionKdbProps, description: description, tooltipProps: tooltipProps, className: className, style: style, htmlAttributes: htmlAttributes, onClick: onClick, ref: ref }, restProps, { children: children })));
 };
 exports.CleanIconButton = CleanIconButton;
 //# sourceMappingURL=CleanIconButton.js.map

package/lib/cjs/clean-icon-button/CleanIconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CleanIconButton.js","sourceRoot":"","sources":["../../../src/clean-icon-button/CleanIconButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAuBA,0DAA+E;AAOxE,MAAM,eAAe,GAAG,CAAyC,EAiBhB,EAAE,EAAE;QAjBY,EACtE,QAAQ,EACR,EAAE,EACF,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,KAAK,EAClB,IAAI,GAAG,QAAQ;IACf,4FAA4F;IAC5F,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,WAAW,EACX,YAAY,EACZ,SAAS,EACT,KAAK,EACL,cAAc,EACd,OAAO,EACP,GAAG,OAEmD,EADnD,SAAS,cAhB0D,qKAiBvE,CADa;IAEZ,OAAO,CACL,uBAAC,iCAAc,kBACb,EAAE,EAAE,EAAE,EACN,iBAAiB,EAAC,OAAO,EACzB,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,IACJ,SAAS,cAEZ,QAAQ,IACM,CAClB,CAAC;AACJ,CAAC,CAAC;AAvCW,QAAA,eAAe,mBAuC1B","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 type React from 'react';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { IconButtonBase, type IconButtonBaseProps } from '../icon-button-base';\n\ntype CleanIconButtonButtonProps = Omit<\n  IconButtonBaseProps,\n  'iconButtonVariant' | 'isFloating'\n>;\n\nexport const CleanIconButton = <T extends React.ElementType = 'button'>({\n  children,\n  as,\n  isLoading = false,\n  isDisabled = false,\n  size = 'medium',\n  // Does not have a default value to avoid setting aria-pressed to true if not explicitly set\n  isActive,\n  variant = 'neutral',\n  description,\n  tooltipProps,\n  className,\n  style,\n  htmlAttributes,\n  onClick,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, CleanIconButtonButtonProps>) => {\n  return (\n    <IconButtonBase\n      as={as}\n      iconButtonVariant=\"clean\"\n      isDisabled={isDisabled}\n      size={size}\n      isLoading={isLoading}\n      isActive={isActive}\n      variant={variant}\n      description={description}\n      tooltipProps={tooltipProps}\n      className={className}\n      style={style}\n      htmlAttributes={htmlAttributes}\n      onClick={onClick}\n      ref={ref}\n      {...restProps}\n    >\n      {children}\n    </IconButtonBase>\n  );\n};\n"]}
+{"version":3,"file":"CleanIconButton.js","sourceRoot":"","sources":["../../../src/clean-icon-button/CleanIconButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAuBA,0DAA+E;AAOxE,MAAM,eAAe,GAAG,CAAyC,EAkBhB,EAAE,EAAE;QAlBY,EACtE,QAAQ,EACR,EAAE,EACF,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,KAAK,EAClB,IAAI,GAAG,QAAQ;IACf,4FAA4F;IAC5F,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,WAAW,EACX,mBAAmB,EACnB,YAAY,EACZ,SAAS,EACT,KAAK,EACL,cAAc,EACd,OAAO,EACP,GAAG,OAEmD,EADnD,SAAS,cAjB0D,4LAkBvE,CADa;IAEZ,OAAO,CACL,uBAAC,iCAAc,kBACb,EAAE,EAAE,EAAE,EACN,iBAAiB,EAAC,OAAO,EACzB,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,mBAAmB,EAAE,mBAAmB,EACxC,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,IACJ,SAAS,cAEZ,QAAQ,IACM,CAClB,CAAC;AACJ,CAAC,CAAC;AAzCW,QAAA,eAAe,mBAyC1B","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 type React from 'react';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { IconButtonBase, type IconButtonBaseProps } from '../icon-button-base';\n\ntype CleanIconButtonButtonProps = Omit<\n  IconButtonBaseProps,\n  'iconButtonVariant' | 'isFloating'\n>;\n\nexport const CleanIconButton = <T extends React.ElementType = 'button'>({\n  children,\n  as,\n  isLoading = false,\n  isDisabled = false,\n  size = 'medium',\n  // Does not have a default value to avoid setting aria-pressed to true if not explicitly set\n  isActive,\n  variant = 'neutral',\n  description,\n  descriptionKdbProps,\n  tooltipProps,\n  className,\n  style,\n  htmlAttributes,\n  onClick,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, CleanIconButtonButtonProps>) => {\n  return (\n    <IconButtonBase\n      as={as}\n      iconButtonVariant=\"clean\"\n      isDisabled={isDisabled}\n      size={size}\n      isLoading={isLoading}\n      isActive={isActive}\n      variant={variant}\n      descriptionKdbProps={descriptionKdbProps}\n      description={description}\n      tooltipProps={tooltipProps}\n      className={className}\n      style={style}\n      htmlAttributes={htmlAttributes}\n      onClick={onClick}\n      ref={ref}\n      {...restProps}\n    >\n      {children}\n    </IconButtonBase>\n  );\n};\n"]}

package/lib/cjs/clean-icon-button/stories/clean-icon-button-keyboard-display.story.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("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/>.
+ */
+require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
+const react_1 = require("@neo4j-ndl/react");
+const icons_1 = require("@neo4j-ndl/react/icons");
+const Component = () => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "n-flex n-flex-col n-gap-token-16", children: (0, jsx_runtime_1.jsx)("div", { className: "n-flex n-flex-row n-gap-token-16 n-items-center", children: (0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { description: "Search", descriptionKdbProps: { keys: ['B'], modifierKeys: ['meta'] }, variant: "neutral", children: (0, jsx_runtime_1.jsx)(icons_1.MagnifyingGlassIconOutline, {}) }) }) }));
+};
+exports.default = Component;
+//# sourceMappingURL=clean-icon-button-keyboard-display.story.js.map

package/lib/cjs/clean-icon-button/stories/clean-icon-button-keyboard-display.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clean-icon-button-keyboard-display.story.js","sourceRoot":"","sources":["../../../../src/clean-icon-button/stories/clean-icon-button-keyboard-display.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAmD;AACnD,kDAAoE;AAEpE,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,gCAAK,SAAS,EAAC,kCAAkC,YAC/C,gCAAK,SAAS,EAAC,iDAAiD,YAC9D,uBAAC,uBAAe,IACd,WAAW,EAAC,QAAQ,EACpB,mBAAmB,EAAE,EAAE,IAAI,EAAE,CAAC,GAAG,CAAC,EAAE,YAAY,EAAE,CAAC,MAAM,CAAC,EAAE,EAC5D,OAAO,EAAC,SAAS,YAEjB,uBAAC,kCAA0B,KAAG,GACd,GACd,GACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { CleanIconButton } from '@neo4j-ndl/react';\nimport { MagnifyingGlassIconOutline } from '@neo4j-ndl/react/icons';\n\nconst Component = () => {\n  return (\n    <div className=\"n-flex n-flex-col n-gap-token-16\">\n      <div className=\"n-flex n-flex-row n-gap-token-16 n-items-center\">\n        <CleanIconButton\n          description=\"Search\"\n          descriptionKdbProps={{ keys: ['B'], modifierKeys: ['meta'] }}\n          variant=\"neutral\"\n        >\n          <MagnifyingGlassIconOutline />\n        </CleanIconButton>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/clean-icon-button/stories/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CleanIconButtonToneSrc = exports.CleanIconButtonSizesSrc = exports.CleanIconButtonLoadingSrc = exports.CleanIconButtonDisabledSrc = exports.CleanIconButtonDefaultSrc = exports.CleanIconButtonActiveSrc = exports.CleanIconButtonTone = exports.CleanIconButtonSizes = exports.CleanIconButtonLoading = exports.CleanIconButtonDisabled = exports.CleanIconButtonDefault = exports.CleanIconButtonActive = void 0;
+exports.CleanIconButtonKeyboardDisplaySrc = exports.CleanIconButtonToneSrc = exports.CleanIconButtonSizesSrc = exports.CleanIconButtonLoadingSrc = exports.CleanIconButtonDisabledSrc = exports.CleanIconButtonDefaultSrc = exports.CleanIconButtonActiveSrc = exports.CleanIconButtonKeyboardDisplay = exports.CleanIconButtonTone = exports.CleanIconButtonSizes = exports.CleanIconButtonLoading = exports.CleanIconButtonDisabled = exports.CleanIconButtonDefault = exports.CleanIconButtonActive = void 0;
 /**
  *
  *  Copyright (c) "Neo4j"
@@ -36,10 +36,13 @@ var clean_icon_button_sizes_story_1 = require("./clean-icon-button-sizes.story")
 Object.defineProperty(exports, "CleanIconButtonSizes", { enumerable: true, get: function () { return __importDefault(clean_icon_button_sizes_story_1).default; } });
 var clean_icon_button_tone_story_1 = require("./clean-icon-button-tone.story");
 Object.defineProperty(exports, "CleanIconButtonTone", { enumerable: true, get: function () { return __importDefault(clean_icon_button_tone_story_1).default; } });
+var clean_icon_button_keyboard_display_story_1 = require("./clean-icon-button-keyboard-display.story");
+Object.defineProperty(exports, "CleanIconButtonKeyboardDisplay", { enumerable: true, get: function () { return __importDefault(clean_icon_button_keyboard_display_story_1).default; } });
 const export_stories_utils_1 = require("../../_common/export-stories-utils");
 const clean_icon_button_active_story_raw_1 = __importDefault(require("./clean-icon-button-active.story?raw"));
 const clean_icon_button_default_story_raw_1 = __importDefault(require("./clean-icon-button-default.story?raw"));
 const clean_icon_button_disabled_story_raw_1 = __importDefault(require("./clean-icon-button-disabled.story?raw"));
+const clean_icon_button_keyboard_display_story_raw_1 = __importDefault(require("./clean-icon-button-keyboard-display.story?raw"));
 const clean_icon_button_loading_story_raw_1 = __importDefault(require("./clean-icon-button-loading.story?raw"));
 const clean_icon_button_sizes_story_raw_1 = __importDefault(require("./clean-icon-button-sizes.story?raw"));
 const clean_icon_button_tone_story_raw_1 = __importDefault(require("./clean-icon-button-tone.story?raw"));
@@ -49,4 +52,5 @@ exports.CleanIconButtonDisabledSrc = (0, export_stories_utils_1.removeLicenseHea
 exports.CleanIconButtonLoadingSrc = (0, export_stories_utils_1.removeLicenseHeader)(clean_icon_button_loading_story_raw_1.default);
 exports.CleanIconButtonSizesSrc = (0, export_stories_utils_1.removeLicenseHeader)(clean_icon_button_sizes_story_raw_1.default);
 exports.CleanIconButtonToneSrc = (0, export_stories_utils_1.removeLicenseHeader)(clean_icon_button_tone_story_raw_1.default);
+exports.CleanIconButtonKeyboardDisplaySrc = (0, export_stories_utils_1.removeLicenseHeader)(clean_icon_button_keyboard_display_story_raw_1.default);
 //# sourceMappingURL=index.js.map

package/lib/cjs/clean-icon-button/stories/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/clean-icon-button/stories/index.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,mFAAoF;AAA3E,wJAAA,OAAO,OAAyB;AACzC,qFAAsF;AAA7E,0JAAA,OAAO,OAA0B;AAC1C,uFAAwF;AAA/E,4JAAA,OAAO,OAA2B;AAC3C,qFAAsF;AAA7E,0JAAA,OAAO,OAA0B;AAC1C,iFAAkF;AAAzE,sJAAA,OAAO,OAAwB;AACxC,+EAAgF;AAAvE,oJAAA,OAAO,OAAuB;AAEvC,6EAAyE;AACzE,8GAA+E;AAC/E,gHAAiF;AACjF,kHAAmF;AACnF,gHAAiF;AACjF,4GAA6E;AAC7E,0GAA2E;AAE9D,QAAA,wBAAwB,GAAG,IAAA,0CAAmB,EACzD,4CAA2B,CAC5B,CAAC;AACW,QAAA,yBAAyB,GAAG,IAAA,0CAAmB,EAC1D,6CAA4B,CAC7B,CAAC;AACW,QAAA,0BAA0B,GAAG,IAAA,0CAAmB,EAC3D,8CAA6B,CAC9B,CAAC;AACW,QAAA,yBAAyB,GAAG,IAAA,0CAAmB,EAC1D,6CAA4B,CAC7B,CAAC;AACW,QAAA,uBAAuB,GAAG,IAAA,0CAAmB,EACxD,2CAA0B,CAC3B,CAAC;AACW,QAAA,sBAAsB,GAAG,IAAA,0CAAmB,EACvD,0CAAyB,CAC1B,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 */\nexport { default as CleanIconButtonActive } from './clean-icon-button-active.story';\nexport { default as CleanIconButtonDefault } from './clean-icon-button-default.story';\nexport { default as CleanIconButtonDisabled } from './clean-icon-button-disabled.story';\nexport { default as CleanIconButtonLoading } from './clean-icon-button-loading.story';\nexport { default as CleanIconButtonSizes } from './clean-icon-button-sizes.story';\nexport { default as CleanIconButtonTone } from './clean-icon-button-tone.story';\n\nimport { removeLicenseHeader } from '../../_common/export-stories-utils';\nimport CleanIconButtonActiveSrcRaw from './clean-icon-button-active.story?raw';\nimport CleanIconButtonDefaultSrcRaw from './clean-icon-button-default.story?raw';\nimport CleanIconButtonDisabledSrcRaw from './clean-icon-button-disabled.story?raw';\nimport CleanIconButtonLoadingSrcRaw from './clean-icon-button-loading.story?raw';\nimport CleanIconButtonSizesSrcRaw from './clean-icon-button-sizes.story?raw';\nimport CleanIconButtonToneSrcRaw from './clean-icon-button-tone.story?raw';\n\nexport const CleanIconButtonActiveSrc = removeLicenseHeader(\n  CleanIconButtonActiveSrcRaw,\n);\nexport const CleanIconButtonDefaultSrc = removeLicenseHeader(\n  CleanIconButtonDefaultSrcRaw,\n);\nexport const CleanIconButtonDisabledSrc = removeLicenseHeader(\n  CleanIconButtonDisabledSrcRaw,\n);\nexport const CleanIconButtonLoadingSrc = removeLicenseHeader(\n  CleanIconButtonLoadingSrcRaw,\n);\nexport const CleanIconButtonSizesSrc = removeLicenseHeader(\n  CleanIconButtonSizesSrcRaw,\n);\nexport const CleanIconButtonToneSrc = removeLicenseHeader(\n  CleanIconButtonToneSrcRaw,\n);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/clean-icon-button/stories/index.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,mFAAoF;AAA3E,wJAAA,OAAO,OAAyB;AACzC,qFAAsF;AAA7E,0JAAA,OAAO,OAA0B;AAC1C,uFAAwF;AAA/E,4JAAA,OAAO,OAA2B;AAC3C,qFAAsF;AAA7E,0JAAA,OAAO,OAA0B;AAC1C,iFAAkF;AAAzE,sJAAA,OAAO,OAAwB;AACxC,+EAAgF;AAAvE,oJAAA,OAAO,OAAuB;AACvC,uGAAuG;AAA9F,2KAAA,OAAO,OAAkC;AAElD,6EAAyE;AACzE,8GAA+E;AAC/E,gHAAiF;AACjF,kHAAmF;AACnF,kIAAkG;AAClG,gHAAiF;AACjF,4GAA6E;AAC7E,0GAA2E;AAE9D,QAAA,wBAAwB,GAAG,IAAA,0CAAmB,EACzD,4CAA2B,CAC5B,CAAC;AACW,QAAA,yBAAyB,GAAG,IAAA,0CAAmB,EAC1D,6CAA4B,CAC7B,CAAC;AACW,QAAA,0BAA0B,GAAG,IAAA,0CAAmB,EAC3D,8CAA6B,CAC9B,CAAC;AACW,QAAA,yBAAyB,GAAG,IAAA,0CAAmB,EAC1D,6CAA4B,CAC7B,CAAC;AACW,QAAA,uBAAuB,GAAG,IAAA,0CAAmB,EACxD,2CAA0B,CAC3B,CAAC;AACW,QAAA,sBAAsB,GAAG,IAAA,0CAAmB,EACvD,0CAAyB,CAC1B,CAAC;AACW,QAAA,iCAAiC,GAAG,IAAA,0CAAmB,EAClE,sDAAoC,CACrC,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 */\nexport { default as CleanIconButtonActive } from './clean-icon-button-active.story';\nexport { default as CleanIconButtonDefault } from './clean-icon-button-default.story';\nexport { default as CleanIconButtonDisabled } from './clean-icon-button-disabled.story';\nexport { default as CleanIconButtonLoading } from './clean-icon-button-loading.story';\nexport { default as CleanIconButtonSizes } from './clean-icon-button-sizes.story';\nexport { default as CleanIconButtonTone } from './clean-icon-button-tone.story';\nexport { default as CleanIconButtonKeyboardDisplay } from './clean-icon-button-keyboard-display.story';\n\nimport { removeLicenseHeader } from '../../_common/export-stories-utils';\nimport CleanIconButtonActiveSrcRaw from './clean-icon-button-active.story?raw';\nimport CleanIconButtonDefaultSrcRaw from './clean-icon-button-default.story?raw';\nimport CleanIconButtonDisabledSrcRaw from './clean-icon-button-disabled.story?raw';\nimport CleanIconButtonKeyboardDisplaySrcRaw from './clean-icon-button-keyboard-display.story?raw';\nimport CleanIconButtonLoadingSrcRaw from './clean-icon-button-loading.story?raw';\nimport CleanIconButtonSizesSrcRaw from './clean-icon-button-sizes.story?raw';\nimport CleanIconButtonToneSrcRaw from './clean-icon-button-tone.story?raw';\n\nexport const CleanIconButtonActiveSrc = removeLicenseHeader(\n  CleanIconButtonActiveSrcRaw,\n);\nexport const CleanIconButtonDefaultSrc = removeLicenseHeader(\n  CleanIconButtonDefaultSrcRaw,\n);\nexport const CleanIconButtonDisabledSrc = removeLicenseHeader(\n  CleanIconButtonDisabledSrcRaw,\n);\nexport const CleanIconButtonLoadingSrc = removeLicenseHeader(\n  CleanIconButtonLoadingSrcRaw,\n);\nexport const CleanIconButtonSizesSrc = removeLicenseHeader(\n  CleanIconButtonSizesSrcRaw,\n);\nexport const CleanIconButtonToneSrc = removeLicenseHeader(\n  CleanIconButtonToneSrcRaw,\n);\nexport const CleanIconButtonKeyboardDisplaySrc = removeLicenseHeader(\n  CleanIconButtonKeyboardDisplaySrcRaw,\n);\n"]}

package/lib/cjs/clipboard-button/ClipboardButton.js

@@ -41,10 +41,11 @@ const clean_icon_button_1 = require("../clean-icon-button");
 const hooks_1 = require("../hooks");
 const icon_button_1 = require("../icon-button");
 const icons_1 = require("../icons");
+const kbd_1 = require("../kbd");
 const outlined_button_1 = require("../outlined-button");
 const tooltip_1 = require("../tooltip");
 const ConfirmationButton = (_a) => {
-    var { description, actionFeedbackText, icon, children, onClick, htmlAttributes, tooltipProps, type = 'clean-icon-button' } = _a, restProps = __rest(_a, ["description", "actionFeedbackText", "icon", "children", "onClick", "htmlAttributes", "tooltipProps", "type"]);
+    var { descriptionKdbProps, description, actionFeedbackText, icon, children, onClick, htmlAttributes, tooltipProps, type = 'clean-icon-button' } = _a, restProps = __rest(_a, ["descriptionKdbProps", "description", "actionFeedbackText", "icon", "children", "onClick", "htmlAttributes", "tooltipProps", "type"]);
     const [timeoutId, setTimeoutId] = react_1.default.useState(null);
     const [isOpen, setIsOpen] = react_1.default.useState(false);
     const handleClick = () => {
@@ -65,7 +66,7 @@ const ConfirmationButton = (_a) => {
     const content = timeoutId === null ? description : actionFeedbackText;
     /* Controlling the tip to make it disappear in a timely manner*/
     if (type === 'clean-icon-button') {
-        return ((0, jsx_runtime_1.jsx)(clean_icon_button_1.CleanIconButton, Object.assign({}, restProps.cleanIconButtonProps, { description: content, tooltipProps: {
+        return ((0, jsx_runtime_1.jsx)(clean_icon_button_1.CleanIconButton, Object.assign({}, restProps.cleanIconButtonProps, { description: content, descriptionKdbProps: descriptionKdbProps, tooltipProps: {
                 root: Object.assign(Object.assign({}, tooltipProps), { isOpen: isOpen || timeoutId !== null }),
                 trigger: {
                     htmlAttributes: {
@@ -121,10 +122,10 @@ const ConfirmationButton = (_a) => {
                                 onClick(event);
                             }
                             handleClick();
-                        }, leadingVisual: icon, className: restProps.className, htmlAttributes: htmlAttributes, children: children })) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Content, { children: content })] })));
+                        }, leadingVisual: icon, className: restProps.className, htmlAttributes: htmlAttributes, children: children })) }), (0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip.Content, { children: [content, descriptionKdbProps && (0, jsx_runtime_1.jsx)(kbd_1.Kbd, Object.assign({}, descriptionKdbProps))] })] })));
     }
 };
-const ClipboardButton = ({ textToCopy, isDisabled, size, tooltipProps, htmlAttributes, type, }) => {
+const ClipboardButton = ({ textToCopy, descriptionKdbProps, isDisabled, size, tooltipProps, htmlAttributes, type, }) => {
     const [, copyFunction] = (0, hooks_1.useCopyToClipboard)();
     const isOutlinedButton = type === 'outlined-button';
     const isIconButton = type === 'icon-button';
@@ -153,7 +154,7 @@ const ClipboardButton = ({ textToCopy, isDisabled, size, tooltipProps, htmlAttri
                 },
                 type: 'clean-icon-button',
             };
-    return ((0, jsx_runtime_1.jsx)(ConfirmationButton, Object.assign({ onClick: () => copyFunction(textToCopy), description: "Copy to clipboard", actionFeedbackText: "Copied" }, props, { tooltipProps: tooltipProps, className: "n-gap-token-8", icon: (0, jsx_runtime_1.jsx)(icons_1.Square2StackIconOutline, { className: "ndl-icon-svg" }), htmlAttributes: Object.assign({ 'aria-live': 'polite' }, htmlAttributes), children: type === 'outlined-button' && 'Copy' })));
+    return ((0, jsx_runtime_1.jsx)(ConfirmationButton, Object.assign({ onClick: () => copyFunction(textToCopy), description: "Copy to clipboard", actionFeedbackText: "Copied", descriptionKdbProps: descriptionKdbProps }, props, { tooltipProps: tooltipProps, className: "n-gap-token-8", icon: (0, jsx_runtime_1.jsx)(icons_1.Square2StackIconOutline, { className: "ndl-icon-svg" }), htmlAttributes: Object.assign({ 'aria-live': 'polite' }, htmlAttributes), children: type === 'outlined-button' && 'Copy' })));
 };
 exports.ClipboardButton = ClipboardButton;
 //# sourceMappingURL=ClipboardButton.js.map

package/lib/cjs/clipboard-button/ClipboardButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClipboardButton.js","sourceRoot":"","sources":["../../../src/clipboard-button/ClipboardButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,kDAA0B;AAG1B,4DAAuD;AACvD,oCAA8C;AAC9C,gDAA4C;AAC5C,oCAAmD;AACnD,wDAAoD;AACpD,wCAAqC;AAmCrC,MAAM,kBAAkB,GAAG,CAAC,EAUF,EAAE,EAAE;QAVF,EAC1B,WAAW,EACX,kBAAkB,EAClB,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,cAAc,EACd,YAAY,EACZ,IAAI,GAAG,mBAAmB,OAEF,EADrB,SAAS,cATc,8GAU3B,CADa;IAEZ,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAgB,IAAI,CAAC,CAAC;IACtE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,SAAS,KAAK,IAAI,EAAE,CAAC;YACvB,YAAY,CAAC,SAAS,CAAC,CAAC;QAC1B,CAAC;QAED,MAAM,YAAY,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YAC1C,YAAY,CAAC,IAAI,CAAC,CAAC;QACrB,CAAC,EAAE,IAAI,CAAC,CAAC;QAET,YAAY,CAAC,YAAY,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,SAAS,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,SAAS,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,SAAS,KAAK,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,kBAAkB,CAAC;IACtE,gEAAgE;IAEhE,IAAI,IAAI,KAAK,mBAAmB,EAAE,CAAC;QACjC,OAAO,CACL,uBAAC,mCAAe,oBAEZ,SAGD,CAAC,oBAAoB,IACtB,WAAW,EAAE,OAAO,EACpB,YAAY,EAAE;gBACZ,IAAI,kCACC,YAAY,KACf,MAAM,EAAE,MAAM,IAAI,SAAS,KAAK,IAAI,GACrC;gBACD,OAAO,EAAE;oBACP,cAAc,EAAE;wBACd,MAAM,EAAE,kBAAkB;wBAC1B,OAAO,EAAE,iBAAiB;wBAC1B,YAAY,EAAE,iBAAiB;wBAC/B,YAAY,EAAE,kBAAkB;qBACjC;iBACF;aACF,EACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;gBACjB,IAAI,OAAO,EAAE,CAAC;oBACZ,OAAO,CAAC,KAAK,CAAC,CAAC;gBACjB,CAAC;gBACD,WAAW,EAAE,CAAC;YAChB,CAAC,EACD,SAAS,EAAE,SAAS,CAAC,SAAS,EAC9B,cAAc,EAAE,cAAc,YAE7B,IAAI,IACW,CACnB,CAAC;IACJ,CAAC;SAAM,IAAI,IAAI,KAAK,aAAa,EAAE,CAAC;QAClC,OAAO,CACL,uBAAC,wBAAU,oBAEP,SAGD,CAAC,eAAe,IACjB,WAAW,EAAE,OAAO,EACpB,YAAY,EAAE;gBACZ,IAAI,kCACC,YAAY,KACf,MAAM,EAAE,MAAM,IAAI,SAAS,KAAK,IAAI,GACrC;gBACD,OAAO,EAAE;oBACP,cAAc,EAAE;wBACd,MAAM,EAAE,kBAAkB;wBAC1B,OAAO,EAAE,iBAAiB;wBAC1B,YAAY,EAAE,iBAAiB;wBAC/B,YAAY,EAAE,kBAAkB;qBACjC;iBACF;aACF,EACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;gBACjB,IAAI,OAAO,EAAE,CAAC;oBACZ,OAAO,CAAC,KAAK,CAAC,CAAC;gBACjB,CAAC;gBACD,WAAW,EAAE,CAAC;YAChB,CAAC,EACD,SAAS,EAAE,SAAS,CAAC,SAAS,EAC9B,cAAc,EAAE,cAAc,YAE7B,IAAI,IACM,CACd,CAAC;IACJ,CAAC;SAAM,IAAI,IAAI,KAAK,iBAAiB,EAAE,CAAC;QACtC,OAAO,CACL,wBAAC,iBAAO,kBACN,IAAI,EAAC,QAAQ,EACb,MAAM,EAAE,MAAM,IAAI,SAAS,KAAK,IAAI,IAChC,YAAY,IAChB,YAAY,EAAE,CAAC,IAAI,EAAE,EAAE;;gBACrB,IAAI,IAAI,EAAE,CAAC;oBACT,iBAAiB,EAAE,CAAC;gBACtB,CAAC;qBAAM,CAAC;oBACN,kBAAkB,EAAE,CAAC;gBACvB,CAAC;gBACD,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,YAAY,6DAAG,IAAI,CAAC,CAAC;YACrC,CAAC,aAED,uBAAC,iBAAO,CAAC,OAAO,IACd,gBAAgB,QAChB,cAAc,EAAE;wBACd,YAAY,EAAE,OAAO;wBACrB,MAAM,EAAE,kBAAkB;wBAC1B,OAAO,EAAE,iBAAiB;wBAC1B,YAAY,EAAE,iBAAiB;wBAC/B,YAAY,EAAE,kBAAkB;qBACjC,YAED,uBAAC,gCAAc,kBACb,OAAO,EAAC,SAAS,IAEf,SAGD,CAAC,WAAW,IACb,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;4BACjB,IAAI,OAAO,EAAE,CAAC;gCACZ,OAAO,CAAC,KAAK,CAAC,CAAC;4BACjB,CAAC;4BACD,WAAW,EAAE,CAAC;wBAChB,CAAC,EACD,aAAa,EAAE,IAAI,EACnB,SAAS,EAAE,SAAS,CAAC,SAAS,EAC9B,cAAc,EAAE,cAAc,YAE7B,QAAQ,IACM,GACD,EAClB,uBAAC,iBAAO,CAAC,OAAO,cAAE,OAAO,GAAmB,KACpC,CACX,CAAC;IACJ,CAAC;AACH,CAAC,CAAC;AAYK,MAAM,eAAe,GAAG,CAAC,EAC9B,UAAU,EACV,UAAU,EACV,IAAI,EACJ,YAAY,EACZ,cAAc,EACd,IAAI,GACiB,EAAE,EAAE;IACzB,MAAM,CAAC,EAAE,YAAY,CAAC,GAAG,IAAA,0BAAkB,GAAE,CAAC;IAE9C,MAAM,gBAAgB,GAAG,IAAI,KAAK,iBAAiB,CAAC;IACpD,MAAM,YAAY,GAAG,IAAI,KAAK,aAAa,CAAC;IAE5C,MAAM,KAAK,GAAG,gBAAgB;QAC5B,CAAC,CAAC;YACE,mBAAmB,EAAE;gBACnB,UAAU;gBACV,IAAI;aACL;YACD,IAAI,EAAE,iBAA0B;SACjC;QACH,CAAC,CAAC,YAAY;YACZ,CAAC,CAAC;gBACE,eAAe,EAAE;oBACf,WAAW,EAAE,mBAAmB;oBAChC,UAAU;oBACV,IAAI;iBACL;gBACD,IAAI,EAAE,aAAsB;aAC7B;YACH,CAAC,CAAC;gBACE,oBAAoB,EAAE;oBACpB,WAAW,EAAE,mBAAmB;oBAChC,UAAU;oBACV,IAAI;iBACL;gBACD,IAAI,EAAE,mBAA4B;aACnC,CAAC;IAER,OAAO,CACL,uBAAC,kBAAkB,kBACjB,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,EACvC,WAAW,EAAC,mBAAmB,EAC/B,kBAAkB,EAAC,QAAQ,IACvB,KAAK,IACT,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAC,eAAe,EACzB,IAAI,EAAE,uBAAC,+BAAuB,IAAC,SAAS,EAAC,cAAc,GAAG,EAC1D,cAAc,kBACZ,WAAW,EAAE,QAAQ,IAClB,cAAc,aAGlB,IAAI,KAAK,iBAAiB,IAAI,MAAM,IAClB,CACtB,CAAC;AACJ,CAAC,CAAC;AAxDW,QAAA,eAAe,mBAwD1B","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 React from 'react';\n\nimport { type ButtonSizes } from '../button';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { useCopyToClipboard } from '../hooks';\nimport { IconButton } from '../icon-button';\nimport { Square2StackIconOutline } from '../icons';\nimport { OutlinedButton } from '../outlined-button';\nimport { Tooltip } from '../tooltip';\n\ntype ConfirmationButtonProps = {\n  description: string;\n  actionFeedbackText: string;\n  tooltipProps?: Omit<React.ComponentProps<typeof Tooltip>, 'children'>;\n  onClick?: React.ComponentPropsWithoutRef<'button'>['onClick'];\n  children: React.ReactNode;\n  className?: string;\n  icon: React.ReactNode;\n  htmlAttributes?: React.ComponentPropsWithoutRef<'button'>;\n} & (\n  | {\n      type: 'clean-icon-button';\n      cleanIconButtonProps?: Omit<\n        React.ComponentProps<typeof CleanIconButton>,\n        'children' | 'onClick' | 'tooltip'\n      >;\n    }\n  | {\n      type: 'icon-button';\n      iconButtonProps?: Omit<\n        React.ComponentProps<typeof IconButton>,\n        'children' | 'onClick' | 'tooltip'\n      >;\n    }\n  | {\n      type: 'outlined-button';\n      outlinedButtonProps?: Omit<\n        React.ComponentProps<typeof OutlinedButton>,\n        'children' | 'onClick' | 'tooltip'\n      >;\n    }\n);\n\nconst ConfirmationButton = ({\n  description,\n  actionFeedbackText,\n  icon,\n  children,\n  onClick,\n  htmlAttributes,\n  tooltipProps,\n  type = 'clean-icon-button',\n  ...restProps\n}: ConfirmationButtonProps) => {\n  const [timeoutId, setTimeoutId] = React.useState<number | null>(null);\n  const [isOpen, setIsOpen] = React.useState(false);\n\n  const handleClick = () => {\n    if (timeoutId !== null) {\n      clearTimeout(timeoutId);\n    }\n\n    const newTimeoutId = window.setTimeout(() => {\n      setTimeoutId(null);\n    }, 2000);\n\n    setTimeoutId(newTimeoutId);\n  };\n\n  const handleCloseTooltip = () => {\n    setIsOpen(false);\n  };\n\n  const handleOpenTooltip = () => {\n    setIsOpen(true);\n  };\n\n  const content = timeoutId === null ? description : actionFeedbackText;\n  /* Controlling the tip to make it disappear in a timely manner*/\n\n  if (type === 'clean-icon-button') {\n    return (\n      <CleanIconButton\n        {...(\n          restProps as {\n            cleanIconButtonProps: React.ComponentProps<typeof CleanIconButton>;\n          }\n        ).cleanIconButtonProps}\n        description={content}\n        tooltipProps={{\n          root: {\n            ...tooltipProps,\n            isOpen: isOpen || timeoutId !== null,\n          },\n          trigger: {\n            htmlAttributes: {\n              onBlur: handleCloseTooltip,\n              onFocus: handleOpenTooltip,\n              onMouseEnter: handleOpenTooltip,\n              onMouseLeave: handleCloseTooltip,\n            },\n          },\n        }}\n        onClick={(event) => {\n          if (onClick) {\n            onClick(event);\n          }\n          handleClick();\n        }}\n        className={restProps.className}\n        htmlAttributes={htmlAttributes}\n      >\n        {icon}\n      </CleanIconButton>\n    );\n  } else if (type === 'icon-button') {\n    return (\n      <IconButton\n        {...(\n          restProps as {\n            iconButtonProps: React.ComponentProps<typeof IconButton>;\n          }\n        ).iconButtonProps}\n        description={content}\n        tooltipProps={{\n          root: {\n            ...tooltipProps,\n            isOpen: isOpen || timeoutId !== null,\n          },\n          trigger: {\n            htmlAttributes: {\n              onBlur: handleCloseTooltip,\n              onFocus: handleOpenTooltip,\n              onMouseEnter: handleOpenTooltip,\n              onMouseLeave: handleCloseTooltip,\n            },\n          },\n        }}\n        onClick={(event) => {\n          if (onClick) {\n            onClick(event);\n          }\n          handleClick();\n        }}\n        className={restProps.className}\n        htmlAttributes={htmlAttributes}\n      >\n        {icon}\n      </IconButton>\n    );\n  } else if (type === 'outlined-button') {\n    return (\n      <Tooltip\n        type=\"simple\"\n        isOpen={isOpen || timeoutId !== null}\n        {...tooltipProps}\n        onOpenChange={(open) => {\n          if (open) {\n            handleOpenTooltip();\n          } else {\n            handleCloseTooltip();\n          }\n          tooltipProps?.onOpenChange?.(open);\n        }}\n      >\n        <Tooltip.Trigger\n          hasButtonWrapper\n          htmlAttributes={{\n            'aria-label': content,\n            onBlur: handleCloseTooltip,\n            onFocus: handleOpenTooltip,\n            onMouseEnter: handleOpenTooltip,\n            onMouseLeave: handleCloseTooltip,\n          }}\n        >\n          <OutlinedButton\n            variant=\"neutral\"\n            {...(\n              restProps as {\n                buttonProps: React.ComponentProps<typeof OutlinedButton>;\n              }\n            ).buttonProps}\n            onClick={(event) => {\n              if (onClick) {\n                onClick(event);\n              }\n              handleClick();\n            }}\n            leadingVisual={icon}\n            className={restProps.className}\n            htmlAttributes={htmlAttributes}\n          >\n            {children}\n          </OutlinedButton>\n        </Tooltip.Trigger>\n        <Tooltip.Content>{content}</Tooltip.Content>\n      </Tooltip>\n    );\n  }\n};\n\ninterface ClipboardButtonProps {\n  /** The text that should be set to users clipboard */\n  textToCopy: string;\n  tooltipProps?: Omit<React.ComponentProps<typeof Tooltip>, 'children'>;\n  isDisabled?: boolean;\n  size?: ButtonSizes;\n  htmlAttributes?: React.ComponentPropsWithoutRef<'button'>;\n  type?: 'outlined-button' | 'clean-icon-button' | 'icon-button';\n}\n\nexport const ClipboardButton = ({\n  textToCopy,\n  isDisabled,\n  size,\n  tooltipProps,\n  htmlAttributes,\n  type,\n}: ClipboardButtonProps) => {\n  const [, copyFunction] = useCopyToClipboard();\n\n  const isOutlinedButton = type === 'outlined-button';\n  const isIconButton = type === 'icon-button';\n\n  const props = isOutlinedButton\n    ? {\n        outlinedButtonProps: {\n          isDisabled,\n          size,\n        },\n        type: 'outlined-button' as const,\n      }\n    : isIconButton\n      ? {\n          iconButtonProps: {\n            description: 'Copy to clipboard',\n            isDisabled,\n            size,\n          },\n          type: 'icon-button' as const,\n        }\n      : {\n          cleanIconButtonProps: {\n            description: 'Copy to clipboard',\n            isDisabled,\n            size,\n          },\n          type: 'clean-icon-button' as const,\n        };\n\n  return (\n    <ConfirmationButton\n      onClick={() => copyFunction(textToCopy)}\n      description=\"Copy to clipboard\"\n      actionFeedbackText=\"Copied\"\n      {...props}\n      tooltipProps={tooltipProps}\n      className=\"n-gap-token-8\"\n      icon={<Square2StackIconOutline className=\"ndl-icon-svg\" />}\n      htmlAttributes={{\n        'aria-live': 'polite',\n        ...htmlAttributes,\n      }}\n    >\n      {type === 'outlined-button' && 'Copy'}\n    </ConfirmationButton>\n  );\n};\n"]}
+{"version":3,"file":"ClipboardButton.js","sourceRoot":"","sources":["../../../src/clipboard-button/ClipboardButton.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 React from 'react';\n\nimport { type ButtonSizes } from '../button';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { useCopyToClipboard } from '../hooks';\nimport { IconButton } from '../icon-button';\nimport { Square2StackIconOutline } from '../icons';\nimport { Kbd } from '../kbd';\nimport { OutlinedButton } from '../outlined-button';\nimport { Tooltip } from '../tooltip';\n\ntype ConfirmationButtonProps = {\n  description: string;\n  descriptionKdbProps?: React.ComponentProps<typeof Kbd>;\n  actionFeedbackText: string;\n  tooltipProps?: Omit<React.ComponentProps<typeof Tooltip>, 'children'>;\n  onClick?: React.ComponentPropsWithoutRef<'button'>['onClick'];\n  children: React.ReactNode;\n  className?: string;\n  icon: React.ReactNode;\n  htmlAttributes?: React.ComponentPropsWithoutRef<'button'>;\n} & (\n  | {\n      type: 'clean-icon-button';\n      cleanIconButtonProps?: Omit<\n        React.ComponentProps<typeof CleanIconButton>,\n        'children' | 'onClick' | 'tooltip'\n      >;\n    }\n  | {\n      type: 'icon-button';\n      iconButtonProps?: Omit<\n        React.ComponentProps<typeof IconButton>,\n        'children' | 'onClick' | 'tooltip'\n      >;\n    }\n  | {\n      type: 'outlined-button';\n      outlinedButtonProps?: Omit<\n        React.ComponentProps<typeof OutlinedButton>,\n        'children' | 'onClick' | 'tooltip'\n      >;\n    }\n);\n\nconst ConfirmationButton = ({\n  descriptionKdbProps,\n  description,\n  actionFeedbackText,\n  icon,\n  children,\n  onClick,\n  htmlAttributes,\n  tooltipProps,\n  type = 'clean-icon-button',\n  ...restProps\n}: ConfirmationButtonProps) => {\n  const [timeoutId, setTimeoutId] = React.useState<number | null>(null);\n  const [isOpen, setIsOpen] = React.useState(false);\n\n  const handleClick = () => {\n    if (timeoutId !== null) {\n      clearTimeout(timeoutId);\n    }\n\n    const newTimeoutId = window.setTimeout(() => {\n      setTimeoutId(null);\n    }, 2000);\n\n    setTimeoutId(newTimeoutId);\n  };\n\n  const handleCloseTooltip = () => {\n    setIsOpen(false);\n  };\n\n  const handleOpenTooltip = () => {\n    setIsOpen(true);\n  };\n\n  const content = timeoutId === null ? description : actionFeedbackText;\n  /* Controlling the tip to make it disappear in a timely manner*/\n\n  if (type === 'clean-icon-button') {\n    return (\n      <CleanIconButton\n        {...(\n          restProps as {\n            cleanIconButtonProps: React.ComponentProps<typeof CleanIconButton>;\n          }\n        ).cleanIconButtonProps}\n        description={content}\n        descriptionKdbProps={descriptionKdbProps}\n        tooltipProps={{\n          root: {\n            ...tooltipProps,\n            isOpen: isOpen || timeoutId !== null,\n          },\n          trigger: {\n            htmlAttributes: {\n              onBlur: handleCloseTooltip,\n              onFocus: handleOpenTooltip,\n              onMouseEnter: handleOpenTooltip,\n              onMouseLeave: handleCloseTooltip,\n            },\n          },\n        }}\n        onClick={(event) => {\n          if (onClick) {\n            onClick(event);\n          }\n          handleClick();\n        }}\n        className={restProps.className}\n        htmlAttributes={htmlAttributes}\n      >\n        {icon}\n      </CleanIconButton>\n    );\n  } else if (type === 'icon-button') {\n    return (\n      <IconButton\n        {...(\n          restProps as {\n            iconButtonProps: React.ComponentProps<typeof IconButton>;\n          }\n        ).iconButtonProps}\n        description={content}\n        tooltipProps={{\n          root: {\n            ...tooltipProps,\n            isOpen: isOpen || timeoutId !== null,\n          },\n          trigger: {\n            htmlAttributes: {\n              onBlur: handleCloseTooltip,\n              onFocus: handleOpenTooltip,\n              onMouseEnter: handleOpenTooltip,\n              onMouseLeave: handleCloseTooltip,\n            },\n          },\n        }}\n        onClick={(event) => {\n          if (onClick) {\n            onClick(event);\n          }\n          handleClick();\n        }}\n        className={restProps.className}\n        htmlAttributes={htmlAttributes}\n      >\n        {icon}\n      </IconButton>\n    );\n  } else if (type === 'outlined-button') {\n    return (\n      <Tooltip\n        type=\"simple\"\n        isOpen={isOpen || timeoutId !== null}\n        {...tooltipProps}\n        onOpenChange={(open) => {\n          if (open) {\n            handleOpenTooltip();\n          } else {\n            handleCloseTooltip();\n          }\n          tooltipProps?.onOpenChange?.(open);\n        }}\n      >\n        <Tooltip.Trigger\n          hasButtonWrapper\n          htmlAttributes={{\n            'aria-label': content,\n            onBlur: handleCloseTooltip,\n            onFocus: handleOpenTooltip,\n            onMouseEnter: handleOpenTooltip,\n            onMouseLeave: handleCloseTooltip,\n          }}\n        >\n          <OutlinedButton\n            variant=\"neutral\"\n            {...(\n              restProps as {\n                buttonProps: React.ComponentProps<typeof OutlinedButton>;\n              }\n            ).buttonProps}\n            onClick={(event) => {\n              if (onClick) {\n                onClick(event);\n              }\n              handleClick();\n            }}\n            leadingVisual={icon}\n            className={restProps.className}\n            htmlAttributes={htmlAttributes}\n          >\n            {children}\n          </OutlinedButton>\n        </Tooltip.Trigger>\n        <Tooltip.Content>\n          {content}\n          {descriptionKdbProps && <Kbd {...descriptionKdbProps} />}\n        </Tooltip.Content>\n      </Tooltip>\n    );\n  }\n};\n\ninterface ClipboardButtonProps {\n  /** The text that should be set to users clipboard */\n  textToCopy: string;\n  descriptionKdbProps?: React.ComponentProps<typeof Kbd>;\n  tooltipProps?: Omit<React.ComponentProps<typeof Tooltip>, 'children'>;\n  isDisabled?: boolean;\n  size?: ButtonSizes;\n  htmlAttributes?: React.ComponentPropsWithoutRef<'button'>;\n  type?: 'outlined-button' | 'clean-icon-button' | 'icon-button';\n}\n\nexport const ClipboardButton = ({\n  textToCopy,\n  descriptionKdbProps,\n  isDisabled,\n  size,\n  tooltipProps,\n  htmlAttributes,\n  type,\n}: ClipboardButtonProps) => {\n  const [, copyFunction] = useCopyToClipboard();\n\n  const isOutlinedButton = type === 'outlined-button';\n  const isIconButton = type === 'icon-button';\n\n  const props = isOutlinedButton\n    ? {\n        outlinedButtonProps: {\n          isDisabled,\n          size,\n        },\n        type: 'outlined-button' as const,\n      }\n    : isIconButton\n      ? {\n          iconButtonProps: {\n            description: 'Copy to clipboard',\n            isDisabled,\n            size,\n          },\n          type: 'icon-button' as const,\n        }\n      : {\n          cleanIconButtonProps: {\n            description: 'Copy to clipboard',\n            isDisabled,\n            size,\n          },\n          type: 'clean-icon-button' as const,\n        };\n\n  return (\n    <ConfirmationButton\n      onClick={() => copyFunction(textToCopy)}\n      description=\"Copy to clipboard\"\n      actionFeedbackText=\"Copied\"\n      descriptionKdbProps={descriptionKdbProps}\n      {...props}\n      tooltipProps={tooltipProps}\n      className=\"n-gap-token-8\"\n      icon={<Square2StackIconOutline className=\"ndl-icon-svg\" />}\n      htmlAttributes={{\n        'aria-live': 'polite',\n        ...htmlAttributes,\n      }}\n    >\n      {type === 'outlined-button' && 'Copy'}\n    </ConfirmationButton>\n  );\n};\n"]}

package/lib/cjs/icon-button/IconButton.js

@@ -38,8 +38,8 @@ const icon_button_base_1 = require("../icon-button-base");
 const IconButton = (_a) => {
     var { children, as, 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, variant = 'neutral', description, tooltipProps, className, style, htmlAttributes, onClick, ref } = _a, restProps = __rest(_a, ["children", "as", "isLoading", "isDisabled", "size", "isFloating", "isActive", "variant", "description", "tooltipProps", "className", "style", "htmlAttributes", "onClick", "ref"]);
-    return ((0, jsx_runtime_1.jsx)(icon_button_base_1.IconButtonBase, Object.assign({ as: as, iconButtonVariant: "default", isDisabled: isDisabled, size: size, isLoading: isLoading, isActive: isActive, isFloating: isFloating, description: description, tooltipProps: tooltipProps, className: className, style: style, variant: variant, htmlAttributes: htmlAttributes, onClick: onClick, ref: ref }, restProps, { children: children })));
+    isActive, variant = 'neutral', description, descriptionKdbProps, tooltipProps, className, style, htmlAttributes, onClick, ref } = _a, restProps = __rest(_a, ["children", "as", "isLoading", "isDisabled", "size", "isFloating", "isActive", "variant", "description", "descriptionKdbProps", "tooltipProps", "className", "style", "htmlAttributes", "onClick", "ref"]);
+    return ((0, jsx_runtime_1.jsx)(icon_button_base_1.IconButtonBase, Object.assign({ as: as, iconButtonVariant: "default", isDisabled: isDisabled, size: size, isLoading: isLoading, isActive: isActive, isFloating: isFloating, descriptionKdbProps: descriptionKdbProps, description: description, tooltipProps: tooltipProps, className: className, style: style, variant: variant, htmlAttributes: htmlAttributes, onClick: onClick, ref: ref }, restProps, { children: children })));
 };
 exports.IconButton = IconButton;
 //# sourceMappingURL=IconButton.js.map

package/lib/cjs/icon-button/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../../src/icon-button/IconButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAuBA,0DAA+E;AAIxE,MAAM,UAAU,GAAG,CAAyC,EAkBhB,EAAE,EAAE;QAlBY,EACjE,QAAQ,EACR,EAAE,EACF,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,KAAK,EAClB,IAAI,GAAG,QAAQ,EACf,UAAU,GAAG,KAAK;IAClB,4FAA4F;IAC5F,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,WAAW,EACX,YAAY,EACZ,SAAS,EACT,KAAK,EACL,cAAc,EACd,OAAO,EACP,GAAG,OAE8C,EAD9C,SAAS,cAjBqD,mLAkBlE,CADa;IAEZ,OAAO,CACL,uBAAC,iCAAc,kBACb,EAAE,EAAE,EAAE,EACN,iBAAiB,EAAC,SAAS,EAC3B,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,IACJ,SAAS,cAEZ,QAAQ,IACM,CAClB,CAAC;AACJ,CAAC,CAAC;AAzCW,QAAA,UAAU,cAyCrB","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 type React from 'react';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { IconButtonBase, type IconButtonBaseProps } from '../icon-button-base';\n\ntype IconButtonButtonProps = Omit<IconButtonBaseProps, 'iconButtonVariant'>;\n\nexport const IconButton = <T extends React.ElementType = 'button'>({\n  children,\n  as,\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,\n  variant = 'neutral',\n  description,\n  tooltipProps,\n  className,\n  style,\n  htmlAttributes,\n  onClick,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, IconButtonButtonProps>) => {\n  return (\n    <IconButtonBase\n      as={as}\n      iconButtonVariant=\"default\"\n      isDisabled={isDisabled}\n      size={size}\n      isLoading={isLoading}\n      isActive={isActive}\n      isFloating={isFloating}\n      description={description}\n      tooltipProps={tooltipProps}\n      className={className}\n      style={style}\n      variant={variant}\n      htmlAttributes={htmlAttributes}\n      onClick={onClick}\n      ref={ref}\n      {...restProps}\n    >\n      {children}\n    </IconButtonBase>\n  );\n};\n"]}
+{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../../src/icon-button/IconButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAuBA,0DAA+E;AAIxE,MAAM,UAAU,GAAG,CAAyC,EAmBhB,EAAE,EAAE;QAnBY,EACjE,QAAQ,EACR,EAAE,EACF,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,KAAK,EAClB,IAAI,GAAG,QAAQ,EACf,UAAU,GAAG,KAAK;IAClB,4FAA4F;IAC5F,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,WAAW,EACX,mBAAmB,EACnB,YAAY,EACZ,SAAS,EACT,KAAK,EACL,cAAc,EACd,OAAO,EACP,GAAG,OAE8C,EAD9C,SAAS,cAlBqD,0MAmBlE,CADa;IAEZ,OAAO,CACL,uBAAC,iCAAc,kBACb,EAAE,EAAE,EAAE,EACN,iBAAiB,EAAC,SAAS,EAC3B,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,mBAAmB,EAAE,mBAAmB,EACxC,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,IACJ,SAAS,cAEZ,QAAQ,IACM,CAClB,CAAC;AACJ,CAAC,CAAC;AA3CW,QAAA,UAAU,cA2CrB","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 type React from 'react';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport { IconButtonBase, type IconButtonBaseProps } from '../icon-button-base';\n\ntype IconButtonButtonProps = Omit<IconButtonBaseProps, 'iconButtonVariant'>;\n\nexport const IconButton = <T extends React.ElementType = 'button'>({\n  children,\n  as,\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,\n  variant = 'neutral',\n  description,\n  descriptionKdbProps,\n  tooltipProps,\n  className,\n  style,\n  htmlAttributes,\n  onClick,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, IconButtonButtonProps>) => {\n  return (\n    <IconButtonBase\n      as={as}\n      iconButtonVariant=\"default\"\n      isDisabled={isDisabled}\n      size={size}\n      isLoading={isLoading}\n      isActive={isActive}\n      isFloating={isFloating}\n      descriptionKdbProps={descriptionKdbProps}\n      description={description}\n      tooltipProps={tooltipProps}\n      className={className}\n      style={style}\n      variant={variant}\n      htmlAttributes={htmlAttributes}\n      onClick={onClick}\n      ref={ref}\n      {...restProps}\n    >\n      {children}\n    </IconButtonBase>\n  );\n};\n"]}

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

@@ -1,4 +1,37 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -37,17 +70,18 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 const classnames_1 = __importDefault(require("classnames"));
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const ButtonSpinner_1 = require("../_common/ButtonSpinner");
 const utils_1 = require("../_common/utils");
+const kbd_1 = require("../kbd");
 const tooltip_1 = require("../tooltip");
 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, 
+    isActive = undefined, description, descriptionKdbProps, 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"]);
+    loadingMessage = 'Loading content' } = _a, restProps = __rest(_a, ["children", "as", "iconButtonVariant", "isLoading", "isDisabled", "size", "isFloating", "isActive", "description", "descriptionKdbProps", "tooltipProps", "className", "style", "variant", "htmlAttributes", "onClick", "ref", "loadingMessage"]);
     const Component = as !== null && as !== void 0 ? as : 'button';
     const loadingId = (0, react_1.useId)();
     const isInteractable = !isDisabled && !isLoading;
@@ -84,10 +118,15 @@ const IconButtonBase = (_a) => {
             onClick(e);
         }
     };
+    const tooltipContent = react_1.default.useMemo(() => {
+        var _a;
+        const descriptionContent = description !== null && description !== void 0 ? description : (_a = tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content) === null || _a === void 0 ? void 0 : _a.children;
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [descriptionContent, descriptionKdbProps && (0, jsx_runtime_1.jsx)(kbd_1.Kbd, Object.assign({}, descriptionKdbProps))] }));
+    }, [description, descriptionKdbProps, (_b = tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content) === null || _b === void 0 ? void 0 : _b.children]);
     return ((0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip, Object.assign({ hoverDelay: {
             close: 0,
             open: 500,
-        }, isDisabled: description === null || isDisabled, type: "simple" }, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.root, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Trigger, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.trigger, { hasButtonWrapper: true, children: (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("div", { className: "ndl-icon-btn-inner", children: isLoading ? ((0, jsx_runtime_1.jsx)(ButtonSpinner_1.ButtonSpinner, { loadingMessage: loadingMessage, size: "small", htmlAttributes: { id: loadingId } })) : ((0, jsx_runtime_1.jsx)("div", { className: "ndl-icon", children: children })) }) })) })), (0, jsx_runtime_1.jsx)(tooltip_1.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: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Trigger, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.trigger, { hasButtonWrapper: true, children: (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("div", { className: "ndl-icon-btn-inner", children: isLoading ? ((0, jsx_runtime_1.jsx)(ButtonSpinner_1.ButtonSpinner, { loadingMessage: loadingMessage, size: "small", htmlAttributes: { id: loadingId } })) : ((0, jsx_runtime_1.jsx)("div", { className: "ndl-icon", children: children })) }) })) })), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Content, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content, { children: tooltipContent }))] })));
 };
 exports.IconButtonBase = IconButtonBase;
 //# sourceMappingURL=IconButtonBase.js.map

package/lib/cjs/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';\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"]}
+{"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 React, { 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 { Kbd } from '../kbd';\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: React.ReactNode;\n\n  /** The Kbd components that will be displayed in the tooltip after the description text, this does not include the keyboard shortcut functionality this only displays the Kbd components. */\n  descriptionKdbProps?: React.ComponentProps<typeof Kbd>;\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  descriptionKdbProps,\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  const tooltipContent = React.useMemo(() => {\n    const descriptionContent = description ?? tooltipProps?.content?.children;\n    return (\n      <>\n        {descriptionContent}\n        {descriptionKdbProps && <Kbd {...descriptionKdbProps} />}\n      </>\n    );\n  }, [description, descriptionKdbProps, tooltipProps?.content?.children]);\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        {tooltipContent}\n      </Tooltip.Content>\n    </Tooltip>\n  );\n};\n"]}

package/lib/cjs/kbd/Kbd.js

@@ -39,16 +39,16 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
 const kbd_utils_1 = require("./kbd-utils");
+// TODO v5: Change element type to 'kbd'
 const Kbd = (_a) => {
     var { modifierKeys, keys, os, as, className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["modifierKeys", "keys", "os", "as", "className", "style", "htmlAttributes", "ref"]);
-    const Component = as !== null && as !== void 0 ? as : 'span';
+    const Component = as !== null && as !== void 0 ? as : 'kbd';
     const modifierKeysContent = (0, react_1.useMemo)(() => {
         if (modifierKeys === undefined) {
             return null;
         }
         const keyMap = (0, kbd_utils_1.getKbdKeysMap)(os);
-        const labelMap = (0, kbd_utils_1.getKbdKeysLabelMap)(os);
-        return modifierKeys === null || modifierKeys === void 0 ? void 0 : modifierKeys.map((key) => ((0, jsx_runtime_1.jsx)("abbr", { className: "ndl-kbd-key", title: labelMap[key], children: keyMap[key] }, key)));
+        return modifierKeys === null || modifierKeys === void 0 ? void 0 : modifierKeys.map((key) => ((0, jsx_runtime_1.jsx)("span", { className: "ndl-kbd-key", "aria-hidden": "true", children: keyMap[key] }, key)));
     }, [modifierKeys, os]);
     const keysContent = (0, react_1.useMemo)(() => {
         if (keys === undefined) {
@@ -56,13 +56,14 @@ const Kbd = (_a) => {
         }
         return keys === null || keys === void 0 ? void 0 : keys.map((key, index) => {
             if (index === 0) {
-                return ((0, jsx_runtime_1.jsx)("span", { className: "ndl-kbd-key", children: key }, key === null || key === void 0 ? void 0 : key.toString()));
+                return ((0, jsx_runtime_1.jsx)("span", { className: "ndl-kbd-key", "aria-hidden": "true", children: key }, key === null || key === void 0 ? void 0 : key.toString()));
             }
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "ndl-kbd-then", children: "Then" }), (0, jsx_runtime_1.jsx)("span", { className: "ndl-kbd-key", children: key }, key === null || key === void 0 ? void 0 : key.toString())] }));
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "ndl-kbd-then", "aria-hidden": "true", children: "Then" }), (0, jsx_runtime_1.jsx)("span", { className: "ndl-kbd-key", "aria-hidden": "true", children: key }, key === null || key === void 0 ? void 0 : key.toString())] }));
         });
     }, [keys]);
+    const screenReaderFriendlyText = (0, react_1.useMemo)(() => (0, kbd_utils_1.getKbdScreenReaderFriendlyText)(keys, modifierKeys, os), [keys, modifierKeys, os]);
     const classes = (0, classnames_1.default)('ndl-kbd', className);
-    return ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ className: classes, style: style, ref: ref }, restProps, htmlAttributes, { children: [modifierKeysContent, keysContent] })));
+    return ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ className: classes, style: style, ref: ref }, restProps, htmlAttributes, { children: [(0, jsx_runtime_1.jsx)("span", { className: "ndl-kbd-sr-friendly-text", children: screenReaderFriendlyText }), modifierKeysContent, keysContent] })));
 };
 exports.Kbd = Kbd;
 //# sourceMappingURL=Kbd.js.map

package/lib/cjs/kbd/Kbd.js.map

@@ -1 +1 @@
-{"version":3,"file":"Kbd.js","sourceRoot":"","sources":["../../../src/kbd/Kbd.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,4DAAoC;AACpC,iCAAgC;AAGhC,2CAKqB;AAiBd,MAAM,GAAG,GAAG,CAAuC,EAUpB,EAAE,EAAE;QAVgB,EACxD,YAAY,EACZ,IAAI,EACJ,EAAE,EACF,EAAE,EACF,SAAS,EACT,KAAK,EACL,cAAc,EACd,GAAG,OAEiC,EADjC,SAAS,cAT4C,mFAUzD,CADa;IAEZ,MAAM,SAAS,GAAsB,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,MAAM,CAAC;IAElD,MAAM,mBAAmB,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACvC,IAAI,YAAY,KAAK,SAAS,EAAE,CAAC;YAC/B,OAAO,IAAI,CAAC;QACd,CAAC;QAED,MAAM,MAAM,GAAG,IAAA,yBAAa,EAAC,EAAE,CAAC,CAAC;QACjC,MAAM,QAAQ,GAAG,IAAA,8BAAkB,EAAC,EAAE,CAAC,CAAC;QAExC,OAAO,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAChC,iCAAM,SAAS,EAAC,aAAa,EAAW,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC,YACzD,MAAM,CAAC,GAAG,CAAC,IADqB,GAAG,CAE/B,CACR,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC,CAAC;IAEvB,MAAM,WAAW,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC/B,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;YACvB,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;YAC9B,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;gBAChB,OAAO,CACL,iCAAM,SAAS,EAAC,aAAa,YAC1B,GAAG,IAD6B,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,QAAQ,EAAE,CAE3C,CACR,CAAC;YACJ,CAAC;YACD,OAAO,CACL,6DACE,iCAAM,SAAS,EAAC,cAAc,qBAAY,EAC1C,iCAAM,SAAS,EAAC,aAAa,YAC1B,GAAG,IAD6B,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,QAAQ,EAAE,CAE3C,IACN,CACJ,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IACjD,OAAO,CACL,wBAAC,SAAS,kBACR,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,IACJ,SAAS,EACT,cAAc,eAEjB,mBAAmB,EACnB,WAAW,KACF,CACb,CAAC;AACJ,CAAC,CAAC;AAjEW,QAAA,GAAG,OAiEd","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 { useMemo } from 'react';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport {\n  getKbdKeysLabelMap,\n  getKbdKeysMap,\n  type KbdKey,\n  type OperatingSystem,\n} from './kbd-utils';\n\ntype KbdProps = {\n  /**\n   * The modifier keys to display in the keyboard shortcut.\n   */\n  modifierKeys?: KbdKey[];\n  /**\n   * The main keys to display in the keyboard shortcut.\n   */\n  keys?: React.ReactNode[];\n  /**\n   * Override the operating system detection for key symbols\n   */\n  os?: OperatingSystem;\n};\n\nexport const Kbd = <T extends React.ElementType = 'span'>({\n  modifierKeys,\n  keys,\n  os,\n  as,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, KbdProps>) => {\n  const Component: React.ElementType = as ?? 'span';\n\n  const modifierKeysContent = useMemo(() => {\n    if (modifierKeys === undefined) {\n      return null;\n    }\n\n    const keyMap = getKbdKeysMap(os);\n    const labelMap = getKbdKeysLabelMap(os);\n\n    return modifierKeys?.map((key) => (\n      <abbr className=\"ndl-kbd-key\" key={key} title={labelMap[key]}>\n        {keyMap[key]}\n      </abbr>\n    ));\n  }, [modifierKeys, os]);\n\n  const keysContent = useMemo(() => {\n    if (keys === undefined) {\n      return null;\n    }\n\n    return keys?.map((key, index) => {\n      if (index === 0) {\n        return (\n          <span className=\"ndl-kbd-key\" key={key?.toString()}>\n            {key}\n          </span>\n        );\n      }\n      return (\n        <>\n          <span className=\"ndl-kbd-then\">Then</span>\n          <span className=\"ndl-kbd-key\" key={key?.toString()}>\n            {key}\n          </span>\n        </>\n      );\n    });\n  }, [keys]);\n\n  const classes = classNames('ndl-kbd', className);\n  return (\n    <Component\n      className={classes}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {modifierKeysContent}\n      {keysContent}\n    </Component>\n  );\n};\n"]}
+{"version":3,"file":"Kbd.js","sourceRoot":"","sources":["../../../src/kbd/Kbd.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,4DAAoC;AACpC,iCAAgC;AAGhC,2CAKqB;AAiBrB,wCAAwC;AACjC,MAAM,GAAG,GAAG,CAAuC,EAUpB,EAAE,EAAE;QAVgB,EACxD,YAAY,EACZ,IAAI,EACJ,EAAE,EACF,EAAE,EACF,SAAS,EACT,KAAK,EACL,cAAc,EACd,GAAG,OAEiC,EADjC,SAAS,cAT4C,mFAUzD,CADa;IAEZ,MAAM,SAAS,GAAsB,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,KAAK,CAAC;IAEjD,MAAM,mBAAmB,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACvC,IAAI,YAAY,KAAK,SAAS,EAAE,CAAC;YAC/B,OAAO,IAAI,CAAC;QACd,CAAC;QAED,MAAM,MAAM,GAAG,IAAA,yBAAa,EAAC,EAAE,CAAC,CAAC;QAEjC,OAAO,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAChC,iCAAM,SAAS,EAAC,aAAa,iBAAuB,MAAM,YACvD,MAAM,CAAC,GAAG,CAAC,IADqB,GAAG,CAE/B,CACR,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC,CAAC;IAEvB,MAAM,WAAW,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC/B,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;YACvB,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;YAC9B,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;gBAChB,OAAO,CACL,iCACE,SAAS,EAAC,aAAa,iBAEX,MAAM,YAEjB,GAAG,IAHC,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,QAAQ,EAAE,CAIf,CACR,CAAC;YACJ,CAAC;YACD,OAAO,CACL,6DACE,iCAAM,SAAS,EAAC,cAAc,iBAAa,MAAM,qBAE1C,EACP,iCACE,SAAS,EAAC,aAAa,iBAEX,MAAM,YAEjB,GAAG,IAHC,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,QAAQ,EAAE,CAIf,IACN,CACJ,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,wBAAwB,GAAG,IAAA,eAAO,EACtC,GAAG,EAAE,CAAC,IAAA,0CAA8B,EAAC,IAAI,EAAE,YAAY,EAAE,EAAE,CAAC,EAC5D,CAAC,IAAI,EAAE,YAAY,EAAE,EAAE,CAAC,CACzB,CAAC;IACF,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IAEjD,OAAO,CACL,wBAAC,SAAS,kBACR,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,IACJ,SAAS,EACT,cAAc,eAElB,iCAAM,SAAS,EAAC,0BAA0B,YACvC,wBAAwB,GACpB,EACN,mBAAmB,EACnB,WAAW,KACF,CACb,CAAC;AACJ,CAAC,CAAC;AAlFW,QAAA,GAAG,OAkFd","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 { useMemo } from 'react';\n\nimport { type PolymorphicCommonProps } from '../_common/types';\nimport {\n  getKbdKeysMap,\n  getKbdScreenReaderFriendlyText,\n  type KbdKey,\n  type OperatingSystem,\n} from './kbd-utils';\n\ntype KbdProps = {\n  /**\n   * The modifier keys to display in the keyboard shortcut.\n   */\n  modifierKeys?: KbdKey[];\n  /**\n   * The main keys to display in the keyboard shortcut.\n   */\n  keys?: React.ReactNode[];\n  /**\n   * Override the operating system detection for key symbols\n   */\n  os?: OperatingSystem;\n};\n\n// TODO v5: Change element type to 'kbd'\nexport const Kbd = <T extends React.ElementType = 'span'>({\n  modifierKeys,\n  keys,\n  os,\n  as,\n  className,\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, KbdProps>) => {\n  const Component: React.ElementType = as ?? 'kbd';\n\n  const modifierKeysContent = useMemo(() => {\n    if (modifierKeys === undefined) {\n      return null;\n    }\n\n    const keyMap = getKbdKeysMap(os);\n\n    return modifierKeys?.map((key) => (\n      <span className=\"ndl-kbd-key\" key={key} aria-hidden=\"true\">\n        {keyMap[key]}\n      </span>\n    ));\n  }, [modifierKeys, os]);\n\n  const keysContent = useMemo(() => {\n    if (keys === undefined) {\n      return null;\n    }\n\n    return keys?.map((key, index) => {\n      if (index === 0) {\n        return (\n          <span\n            className=\"ndl-kbd-key\"\n            key={key?.toString()}\n            aria-hidden=\"true\"\n          >\n            {key}\n          </span>\n        );\n      }\n      return (\n        <>\n          <span className=\"ndl-kbd-then\" aria-hidden=\"true\">\n            Then\n          </span>\n          <span\n            className=\"ndl-kbd-key\"\n            key={key?.toString()}\n            aria-hidden=\"true\"\n          >\n            {key}\n          </span>\n        </>\n      );\n    });\n  }, [keys]);\n\n  const screenReaderFriendlyText = useMemo(\n    () => getKbdScreenReaderFriendlyText(keys, modifierKeys, os),\n    [keys, modifierKeys, os],\n  );\n  const classes = classNames('ndl-kbd', className);\n\n  return (\n    <Component\n      className={classes}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <span className=\"ndl-kbd-sr-friendly-text\">\n        {screenReaderFriendlyText}\n      </span>\n      {modifierKeysContent}\n      {keysContent}\n    </Component>\n  );\n};\n"]}

package/lib/cjs/kbd/kbd-utils.js

@@ -24,6 +24,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.detectOS = detectOS;
 exports.getKbdKeysMap = getKbdKeysMap;
 exports.getKbdKeysLabelMap = getKbdKeysLabelMap;
+exports.getKbdScreenReaderFriendlyText = getKbdScreenReaderFriendlyText;
 /**
  * Detects the operating system based on the user agent
  */
@@ -95,4 +96,32 @@ function getKbdKeysLabelMap(os = detectOS()) {
         up: 'Up',
     };
 }
+function resolveKeyLabel(key, labels) {
+    if (key === null || key === undefined || typeof key === 'boolean') {
+        return '';
+    }
+    if (typeof key === 'string') {
+        return key in labels ? labels[key] : key;
+    }
+    if (typeof key === 'number') {
+        return String(key);
+    }
+    return '';
+}
+function getKbdScreenReaderFriendlyText(keys, modifierKeys, os = detectOS()) {
+    const labels = getKbdKeysLabelMap(os);
+    const modStr = (modifierKeys !== null && modifierKeys !== void 0 ? modifierKeys : []).map((k) => labels[k]).join(' + ');
+    const keyLabels = (keys !== null && keys !== void 0 ? keys : [])
+        .map((k) => resolveKeyLabel(k, labels))
+        .filter(Boolean);
+    let keyStr = '';
+    if (keyLabels.length === 1) {
+        keyStr = keyLabels[0];
+    }
+    else if (keyLabels.length > 1) {
+        keyStr = keyLabels.join(' then ');
+    }
+    const body = [modStr, keyStr].filter(Boolean).join(' + ');
+    return body ? `Shortcut: ${body}` : '';
+}
 //# sourceMappingURL=kbd-utils.js.map

package/lib/cjs/kbd/kbd-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"kbd-utils.js","sourceRoot":"","sources":["../../../src/kbd/kbd-utils.ts"],"names":[],"mappings":";;AA8CA,4BAcC;AAKD,sCA0BC;AAKD,gDAwBC;AA7ED;;GAEG;AACH,SAAgB,QAAQ;IACtB,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;QAClC,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC;IAE3D,IAAI,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;QAC9B,OAAO,KAAK,CAAC;IACf,CAAC;SAAM,IAAI,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;QACrC,OAAO,SAAS,CAAC;IACnB,CAAC;SAAM,CAAC;QACN,OAAO,OAAO,CAAC;IACjB,CAAC;AACH,CAAC;AAED;;GAEG;AACH,SAAgB,aAAa,CAC3B,KAAsB,QAAQ,EAAE;IAEhC,MAAM,OAAO,GAA2B;QACtC,GAAG,EAAE,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK;QAC/B,QAAQ,EAAE,GAAG;QACb,IAAI,EAAE,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM;QACjC,MAAM,EAAE,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ;QACrC,IAAI,EAAE,GAAG;QACT,GAAG,EAAE,KAAK;QACV,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,GAAG;QACX,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,GAAG;QACT,IAAI,EAAE,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM;QAC1D,QAAQ,EAAE,GAAG;QACb,MAAM,EAAE,GAAG;QACX,KAAK,EAAE,GAAG;QACV,KAAK,EAAE,GAAG;QACV,KAAK,EAAE,GAAG;QACV,GAAG,EAAE,GAAG;QACR,EAAE,EAAE,GAAG;KACR,CAAC;IAEF,OAAO,OAAO,CAAC;AACjB,CAAC;AAED;;GAEG;AACH,SAAgB,kBAAkB,CAChC,KAAsB,QAAQ,EAAE;IAEhC,OAAO;QACL,GAAG,EAAE,KAAK;QACV,QAAQ,EAAE,WAAW;QACrB,IAAI,EAAE,SAAS;QACf,MAAM,EAAE,QAAQ;QAChB,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,KAAK;QACV,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,QAAQ;QAChB,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM;QACtE,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,SAAS;QACjB,KAAK,EAAE,OAAO;QACd,KAAK,EAAE,OAAO;QACd,KAAK,EAAE,OAAO;QACd,GAAG,EAAE,KAAK;QACV,EAAE,EAAE,IAAI;KACT,CAAC;AACJ,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 */\nexport type OperatingSystem = 'mac' | 'windows' | 'linux';\n\nexport type KbdKey =\n  | 'meta'\n  | 'shift'\n  | 'ctrl'\n  | 'enter'\n  | 'delete'\n  | 'escape'\n  | 'tab'\n  | 'capslock'\n  | 'up'\n  | 'right'\n  | 'down'\n  | 'left'\n  | 'pageup'\n  | 'pagedown'\n  | 'home'\n  | 'end'\n  | 'space'\n  | 'fn'\n  | 'alt';\n\n/**\n * Detects the operating system based on the user agent\n */\nexport function detectOS(): OperatingSystem {\n  if (typeof window === 'undefined') {\n    return 'linux';\n  }\n\n  const userAgent = window.navigator.userAgent.toLowerCase();\n\n  if (userAgent.includes('mac')) {\n    return 'mac';\n  } else if (userAgent.includes('win')) {\n    return 'windows';\n  } else {\n    return 'linux';\n  }\n}\n\n/**\n * Returns OS-aware keyboard key symbols\n */\nexport function getKbdKeysMap(\n  os: OperatingSystem = detectOS(),\n): Record<KbdKey, string> {\n  const baseMap: Record<KbdKey, string> = {\n    alt: os === 'mac' ? '⌥' : 'alt',\n    capslock: '⇪',\n    ctrl: os === 'mac' ? '⌃' : 'ctrl',\n    delete: os === 'mac' ? '⌫' : 'delete',\n    down: '↓',\n    end: 'end',\n    enter: '↵',\n    escape: '⎋',\n    fn: 'Fn',\n    home: 'home',\n    left: '←',\n    meta: os === 'mac' ? '⌘' : os === 'windows' ? '⊞' : 'meta',\n    pagedown: '⇟',\n    pageup: '⇞',\n    right: '→',\n    shift: '⇧',\n    space: '␣',\n    tab: '⇥',\n    up: '↑',\n  };\n\n  return baseMap;\n}\n\n/**\n * Returns OS-aware keyboard key labels\n */\nexport function getKbdKeysLabelMap(\n  os: OperatingSystem = detectOS(),\n): Record<KbdKey, string> {\n  return {\n    alt: 'Alt',\n    capslock: 'Caps Lock',\n    ctrl: 'Control',\n    delete: 'Delete',\n    down: 'Down',\n    end: 'End',\n    enter: 'Enter',\n    escape: 'Escape',\n    fn: 'Fn',\n    home: 'Home',\n    left: 'Left',\n    meta: os === 'mac' ? 'Command' : os === 'windows' ? 'Windows' : 'Meta',\n    pagedown: 'Page Down',\n    pageup: 'Page Up',\n    right: 'Right',\n    shift: 'Shift',\n    space: 'Space',\n    tab: 'Tab',\n    up: 'Up',\n  };\n}\n"]}
+{"version":3,"file":"kbd-utils.js","sourceRoot":"","sources":["../../../src/kbd/kbd-utils.ts"],"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 type { ReactNode } from 'react';\n\nexport type OperatingSystem = 'mac' | 'windows' | 'linux';\n\nexport type KbdKey =\n  | 'meta'\n  | 'shift'\n  | 'ctrl'\n  | 'enter'\n  | 'delete'\n  | 'escape'\n  | 'tab'\n  | 'capslock'\n  | 'up'\n  | 'right'\n  | 'down'\n  | 'left'\n  | 'pageup'\n  | 'pagedown'\n  | 'home'\n  | 'end'\n  | 'space'\n  | 'fn'\n  | 'alt';\n\n/**\n * Detects the operating system based on the user agent\n */\nexport function detectOS(): OperatingSystem {\n  if (typeof window === 'undefined') {\n    return 'linux';\n  }\n\n  const userAgent = window.navigator.userAgent.toLowerCase();\n\n  if (userAgent.includes('mac')) {\n    return 'mac';\n  } else if (userAgent.includes('win')) {\n    return 'windows';\n  } else {\n    return 'linux';\n  }\n}\n\n/**\n * Returns OS-aware keyboard key symbols\n */\nexport function getKbdKeysMap(\n  os: OperatingSystem = detectOS(),\n): Record<KbdKey, string> {\n  const baseMap: Record<KbdKey, string> = {\n    alt: os === 'mac' ? '⌥' : 'alt',\n    capslock: '⇪',\n    ctrl: os === 'mac' ? '⌃' : 'ctrl',\n    delete: os === 'mac' ? '⌫' : 'delete',\n    down: '↓',\n    end: 'end',\n    enter: '↵',\n    escape: '⎋',\n    fn: 'Fn',\n    home: 'home',\n    left: '←',\n    meta: os === 'mac' ? '⌘' : os === 'windows' ? '⊞' : 'meta',\n    pagedown: '⇟',\n    pageup: '⇞',\n    right: '→',\n    shift: '⇧',\n    space: '␣',\n    tab: '⇥',\n    up: '↑',\n  };\n\n  return baseMap;\n}\n\n/**\n * Returns OS-aware keyboard key labels\n */\nexport function getKbdKeysLabelMap(\n  os: OperatingSystem = detectOS(),\n): Record<KbdKey, string> {\n  return {\n    alt: 'Alt',\n    capslock: 'Caps Lock',\n    ctrl: 'Control',\n    delete: 'Delete',\n    down: 'Down',\n    end: 'End',\n    enter: 'Enter',\n    escape: 'Escape',\n    fn: 'Fn',\n    home: 'Home',\n    left: 'Left',\n    meta: os === 'mac' ? 'Command' : os === 'windows' ? 'Windows' : 'Meta',\n    pagedown: 'Page Down',\n    pageup: 'Page Up',\n    right: 'Right',\n    shift: 'Shift',\n    space: 'Space',\n    tab: 'Tab',\n    up: 'Up',\n  };\n}\n\nfunction resolveKeyLabel(\n  key: KbdKey | ReactNode,\n  labels: Record<KbdKey, string>,\n): string {\n  if (key === null || key === undefined || typeof key === 'boolean') {\n    return '';\n  }\n  if (typeof key === 'string') {\n    return key in labels ? labels[key as KbdKey] : key;\n  }\n  if (typeof key === 'number') {\n    return String(key);\n  }\n  return '';\n}\n\nexport function getKbdScreenReaderFriendlyText(\n  keys: readonly (KbdKey | ReactNode)[] | undefined,\n  modifierKeys: readonly KbdKey[] | undefined,\n  os: OperatingSystem = detectOS(),\n): string {\n  const labels = getKbdKeysLabelMap(os);\n  const modStr = (modifierKeys ?? []).map((k) => labels[k]).join(' + ');\n  const keyLabels = (keys ?? [])\n    .map((k) => resolveKeyLabel(k, labels))\n    .filter(Boolean);\n  let keyStr = '';\n  if (keyLabels.length === 1) {\n    keyStr = keyLabels[0];\n  } else if (keyLabels.length > 1) {\n    keyStr = keyLabels.join(' then ');\n  }\n  const body = [modStr, keyStr].filter(Boolean).join(' + ');\n  return body ? `Shortcut: ${body}` : '';\n}\n"]}

package/lib/cjs/menu/stories/index.js

@@ -23,7 +23,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuRadioAndNormalSrc = exports.MenuRadioItemsSrc = exports.MenuWithKeyboardShortcutsSrc = exports.MenuPlacementsSrc = exports.MenuWithDisabledItemSrc = exports.MenuDividerSrc = exports.MenuInDialogSrc = exports.MenuInPopoverSrc = exports.MenuCustomItemsSrc = exports.MenuWithIconSrc = exports.MenuWithCategorySrc = exports.MenuNestedSrc = exports.MenuDefaultSrc = exports.MenuRadioAndNormal = exports.MenuRadioItems = exports.MenuWithKeyboardShortcuts = exports.MenuPlacements = exports.MenuWithDisabledItem = exports.MenuDivider = exports.MenuInDialog = exports.MenuInPopover = exports.MenuCustomItems = exports.MenuWithIcon = exports.MenuWithCategory = exports.MenuNested = exports.MenuDefault = void 0;
+exports.MenuRadioAndNormalSrc = exports.MenuRadioItemsSrc = exports.MenuWithKeyboardDisplaySrc = exports.MenuPlacementsSrc = exports.MenuWithDisabledItemSrc = exports.MenuDividerSrc = exports.MenuInDialogSrc = exports.MenuInPopoverSrc = exports.MenuCustomItemsSrc = exports.MenuWithIconSrc = exports.MenuWithCategorySrc = exports.MenuNestedSrc = exports.MenuDefaultSrc = exports.MenuRadioAndNormal = exports.MenuRadioItems = exports.MenuWithKeyboardDisplay = exports.MenuPlacements = exports.MenuWithDisabledItem = exports.MenuDivider = exports.MenuInDialog = exports.MenuInPopover = exports.MenuCustomItems = exports.MenuWithIcon = exports.MenuWithCategory = exports.MenuNested = exports.MenuDefault = void 0;
 var menu_default_story_1 = require("./menu-default.story");
 Object.defineProperty(exports, "MenuDefault", { enumerable: true, get: function () { return __importDefault(menu_default_story_1).default; } });
 var menu_nested_story_1 = require("./menu-nested.story");
@@ -45,7 +45,7 @@ Object.defineProperty(exports, "MenuWithDisabledItem", { enumerable: true, get:
 var menu_placements_story_1 = require("./menu-placements.story");
 Object.defineProperty(exports, "MenuPlacements", { enumerable: true, get: function () { return __importDefault(menu_placements_story_1).default; } });
 var menu_with_keyboard_shortcuts_story_1 = require("./menu-with-keyboard-shortcuts.story");
-Object.defineProperty(exports, "MenuWithKeyboardShortcuts", { enumerable: true, get: function () { return __importDefault(menu_with_keyboard_shortcuts_story_1).default; } });
+Object.defineProperty(exports, "MenuWithKeyboardDisplay", { enumerable: true, get: function () { return __importDefault(menu_with_keyboard_shortcuts_story_1).default; } });
 var menu_radio_items_story_1 = require("./menu-radio-items.story");
 Object.defineProperty(exports, "MenuRadioItems", { enumerable: true, get: function () { return __importDefault(menu_radio_items_story_1).default; } });
 var menu_radio_and_normal_story_1 = require("./menu-radio-and-normal.story");
@@ -74,7 +74,7 @@ exports.MenuInDialogSrc = (0, export_stories_utils_1.removeLicenseHeader)(menu_i
 exports.MenuDividerSrc = (0, export_stories_utils_1.removeLicenseHeader)(menu_with_divider_story_raw_1.default);
 exports.MenuWithDisabledItemSrc = (0, export_stories_utils_1.removeLicenseHeader)(menu_with_disabled_item_story_raw_1.default);
 exports.MenuPlacementsSrc = (0, export_stories_utils_1.removeLicenseHeader)(menu_placements_story_raw_1.default);
-exports.MenuWithKeyboardShortcutsSrc = (0, export_stories_utils_1.removeLicenseHeader)(menu_with_keyboard_shortcuts_story_raw_1.default);
+exports.MenuWithKeyboardDisplaySrc = (0, export_stories_utils_1.removeLicenseHeader)(menu_with_keyboard_shortcuts_story_raw_1.default);
 exports.MenuRadioItemsSrc = (0, export_stories_utils_1.removeLicenseHeader)(menu_radio_items_story_raw_1.default);
 exports.MenuRadioAndNormalSrc = (0, export_stories_utils_1.removeLicenseHeader)(menu_radio_and_normal_story_raw_1.default);
 //# sourceMappingURL=index.js.map