@neo4j-ndl/react 4.9.43 → 4.9.45
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/clean-icon-button/CleanIconButton.js +2 -2
- package/lib/cjs/clean-icon-button/CleanIconButton.js.map +1 -1
- package/lib/cjs/clean-icon-button/stories/clean-icon-button-keyboard-display.story.js +31 -0
- package/lib/cjs/clean-icon-button/stories/clean-icon-button-keyboard-display.story.js.map +1 -0
- package/lib/cjs/clean-icon-button/stories/index.js +5 -1
- package/lib/cjs/clean-icon-button/stories/index.js.map +1 -1
- package/lib/cjs/clipboard-button/ClipboardButton.js +6 -5
- package/lib/cjs/clipboard-button/ClipboardButton.js.map +1 -1
- package/lib/cjs/icon-button/IconButton.js +2 -2
- package/lib/cjs/icon-button/IconButton.js.map +1 -1
- package/lib/cjs/icon-button-base/IconButtonBase.js +43 -4
- package/lib/cjs/icon-button-base/IconButtonBase.js.map +1 -1
- package/lib/cjs/kbd/Kbd.js +7 -6
- package/lib/cjs/kbd/Kbd.js.map +1 -1
- package/lib/cjs/kbd/kbd-utils.js +29 -0
- package/lib/cjs/kbd/kbd-utils.js.map +1 -1
- package/lib/cjs/menu/stories/index.js +3 -3
- package/lib/cjs/menu/stories/index.js.map +1 -1
- package/lib/cjs/tooltip/stories/index.js +5 -5
- package/lib/cjs/tooltip/stories/index.js.map +1 -1
- package/lib/cjs/tooltip/stories/{tooltip-with-keyboard-shortcut.story.js → tooltip-with-keyboard-display.story.js} +1 -1
- package/lib/cjs/tooltip/stories/tooltip-with-keyboard-display.story.js.map +1 -0
- package/lib/esm/clean-icon-button/CleanIconButton.js +2 -2
- package/lib/esm/clean-icon-button/CleanIconButton.js.map +1 -1
- package/lib/esm/clean-icon-button/stories/clean-icon-button-keyboard-display.story.js +29 -0
- package/lib/esm/clean-icon-button/stories/clean-icon-button-keyboard-display.story.js.map +1 -0
- package/lib/esm/clean-icon-button/stories/index.js +3 -0
- package/lib/esm/clean-icon-button/stories/index.js.map +1 -1
- package/lib/esm/clipboard-button/ClipboardButton.js +6 -5
- package/lib/esm/clipboard-button/ClipboardButton.js.map +1 -1
- package/lib/esm/icon-button/IconButton.js +2 -2
- package/lib/esm/icon-button/IconButton.js.map +1 -1
- package/lib/esm/icon-button-base/IconButtonBase.js +11 -5
- package/lib/esm/icon-button-base/IconButtonBase.js.map +1 -1
- package/lib/esm/kbd/Kbd.js +8 -7
- package/lib/esm/kbd/Kbd.js.map +1 -1
- package/lib/esm/kbd/kbd-utils.js +28 -0
- package/lib/esm/kbd/kbd-utils.js.map +1 -1
- package/lib/esm/menu/stories/index.js +3 -3
- package/lib/esm/menu/stories/index.js.map +1 -1
- package/lib/esm/tooltip/stories/index.js +3 -3
- package/lib/esm/tooltip/stories/index.js.map +1 -1
- package/lib/esm/tooltip/stories/{tooltip-with-keyboard-shortcut.story.js → tooltip-with-keyboard-display.story.js} +1 -1
- package/lib/esm/tooltip/stories/tooltip-with-keyboard-display.story.js.map +1 -0
- package/lib/types/clean-icon-button/CleanIconButton.d.ts +1 -1
- package/lib/types/clean-icon-button/CleanIconButton.d.ts.map +1 -1
- package/lib/types/clean-icon-button/stories/clean-icon-button-keyboard-display.story.d.ts +24 -0
- package/lib/types/clean-icon-button/stories/clean-icon-button-keyboard-display.story.d.ts.map +1 -0
- package/lib/types/clean-icon-button/stories/index.d.ts +2 -0
- package/lib/types/clean-icon-button/stories/index.d.ts.map +1 -1
- package/lib/types/clipboard-button/ClipboardButton.d.ts +3 -1
- package/lib/types/clipboard-button/ClipboardButton.d.ts.map +1 -1
- package/lib/types/icon-button/IconButton.d.ts +1 -1
- package/lib/types/icon-button/IconButton.d.ts.map +1 -1
- package/lib/types/icon-button-base/IconButtonBase.d.ts +7 -4
- package/lib/types/icon-button-base/IconButtonBase.d.ts.map +1 -1
- package/lib/types/kbd/Kbd.d.ts.map +1 -1
- package/lib/types/kbd/kbd-utils.d.ts +2 -0
- package/lib/types/kbd/kbd-utils.d.ts.map +1 -1
- package/lib/types/menu/stories/index.d.ts +2 -2
- package/lib/types/menu/stories/index.d.ts.map +1 -1
- package/lib/types/tooltip/stories/index.d.ts +2 -2
- package/lib/types/tooltip/stories/index.d.ts.map +1 -1
- package/lib/types/tooltip/stories/{tooltip-with-keyboard-shortcut.story.d.ts → tooltip-with-keyboard-display.story.d.ts} +1 -1
- package/lib/types/tooltip/stories/tooltip-with-keyboard-display.story.d.ts.map +1 -0
- package/package.json +25 -25
- package/lib/cjs/tooltip/stories/tooltip-with-keyboard-shortcut.story.js.map +0 -1
- package/lib/esm/tooltip/stories/tooltip-with-keyboard-shortcut.story.js.map +0 -1
- package/lib/types/tooltip/stories/tooltip-with-keyboard-shortcut.story.d.ts.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/menu/stories/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;AAEH,2DAA8D;AAArD,kIAAA,OAAO,OAAe;AAC/B,yDAA4D;AAAnD,gIAAA,OAAO,OAAc;AAC9B,uEAAyE;AAAhE,6IAAA,OAAO,OAAoB;AACpC,+DAAiE;AAAxD,qIAAA,OAAO,OAAgB;AAChC,qEAAuE;AAA9D,2IAAA,OAAO,OAAmB;AACnC,iEAAmE;AAA1D,uIAAA,OAAO,OAAiB;AACjC,+DAAiE;AAAxD,qIAAA,OAAO,OAAgB;AAChC,qEAAmE;AAA1D,uIAAA,OAAO,OAAe;AAC/B,iFAAkF;AAAzE,sJAAA,OAAO,OAAwB;AACxC,iEAAoE;AAA3D,wIAAA,OAAO,OAAkB;AAClC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/menu/stories/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;AAEH,2DAA8D;AAArD,kIAAA,OAAO,OAAe;AAC/B,yDAA4D;AAAnD,gIAAA,OAAO,OAAc;AAC9B,uEAAyE;AAAhE,6IAAA,OAAO,OAAoB;AACpC,+DAAiE;AAAxD,qIAAA,OAAO,OAAgB;AAChC,qEAAuE;AAA9D,2IAAA,OAAO,OAAmB;AACnC,iEAAmE;AAA1D,uIAAA,OAAO,OAAiB;AACjC,+DAAiE;AAAxD,qIAAA,OAAO,OAAgB;AAChC,qEAAmE;AAA1D,uIAAA,OAAO,OAAe;AAC/B,iFAAkF;AAAzE,sJAAA,OAAO,OAAwB;AACxC,iEAAoE;AAA3D,wIAAA,OAAO,OAAkB;AAClC,2FAA0F;AAAjF,8JAAA,OAAO,OAA2B;AAC3C,mEAAqE;AAA5D,yIAAA,OAAO,OAAkB;AAClC,6EAA8E;AAArE,kJAAA,OAAO,OAAsB;AAEtC,6EAAyE;AACzE,gGAAkE;AAClE,sFAAyD;AACzD,0FAA4D;AAC5D,4FAA8D;AAC9D,oFAAuD;AACvD,4FAA+D;AAC/D,wGAAyE;AACzE,8FAAgE;AAChE,kGAAoE;AACpE,4GAA6E;AAC7E,gGAA8D;AAC9D,0FAA4D;AAC5D,sHAAqF;AAExE,QAAA,cAAc,GAAG,IAAA,0CAAmB,EAAC,gCAAiB,CAAC,CAAC;AACxD,QAAA,aAAa,GAAG,IAAA,0CAAmB,EAAC,+BAAgB,CAAC,CAAC;AACtD,QAAA,mBAAmB,GAAG,IAAA,0CAAmB,EAAC,sCAAsB,CAAC,CAAC;AAClE,QAAA,eAAe,GAAG,IAAA,0CAAmB,EAAC,kCAAkB,CAAC,CAAC;AAC1D,QAAA,kBAAkB,GAAG,IAAA,0CAAmB,EAAC,qCAAqB,CAAC,CAAC;AAChE,QAAA,gBAAgB,GAAG,IAAA,0CAAmB,EAAC,mCAAmB,CAAC,CAAC;AAC5D,QAAA,eAAe,GAAG,IAAA,0CAAmB,EAAC,kCAAkB,CAAC,CAAC;AAC1D,QAAA,cAAc,GAAG,IAAA,0CAAmB,EAAC,qCAAiB,CAAC,CAAC;AACxD,QAAA,uBAAuB,GAAG,IAAA,0CAAmB,EACxD,2CAA0B,CAC3B,CAAC;AACW,QAAA,iBAAiB,GAAG,IAAA,0CAAmB,EAAC,mCAAoB,CAAC,CAAC;AAC9D,QAAA,0BAA0B,GAAG,IAAA,0CAAmB,EAC3D,gDAA6B,CAC9B,CAAC;AACW,QAAA,iBAAiB,GAAG,IAAA,0CAAmB,EAAC,oCAAoB,CAAC,CAAC;AAC9D,QAAA,qBAAqB,GAAG,IAAA,0CAAmB,EACtD,yCAAwB,CACzB,CAAC","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nexport { default as MenuDefault } from './menu-default.story';\nexport { default as MenuNested } from './menu-nested.story';\nexport { default as MenuWithCategory } from './menu-with-category.story';\nexport { default as MenuWithIcon } from './menu-with-icon.story';\nexport { default as MenuCustomItems } from './menu-custom-items.story';\nexport { default as MenuInPopover } from './menu-in-popover.story';\nexport { default as MenuInDialog } from './menu-in-dialog.story';\nexport { default as MenuDivider } from './menu-with-divider.story';\nexport { default as MenuWithDisabledItem } from './menu-with-disabled-item.story';\nexport { default as MenuPlacements } from './menu-placements.story';\nexport { default as MenuWithKeyboardDisplay } from './menu-with-keyboard-shortcuts.story';\nexport { default as MenuRadioItems } from './menu-radio-items.story';\nexport { default as MenuRadioAndNormal } from './menu-radio-and-normal.story';\n\nimport { removeLicenseHeader } from '../../_common/export-stories-utils';\nimport MenuCustomItemsSrcRaw from './menu-custom-items.story?raw';\nimport MenuDefaultSrcRaw from './menu-default.story?raw';\nimport MenuInDialogSrcRaw from './menu-in-dialog.story?raw';\nimport MenuInPopoverSrcRaw from './menu-in-popover.story?raw';\nimport MenuNestedSrcRaw from './menu-nested.story?raw';\nimport MenuPlacementsSrcRaw from './menu-placements.story?raw';\nimport MenuRadioAndNormalSrcRaw from './menu-radio-and-normal.story?raw';\nimport MenuRadioItemsSrcRaw from './menu-radio-items.story?raw';\nimport MenuWithCategorySrcRaw from './menu-with-category.story?raw';\nimport MenuWithDisabledItemSrcRaw from './menu-with-disabled-item.story?raw';\nimport MenuDividerSrcRaw from './menu-with-divider.story?raw';\nimport MenuWithIconSrcRaw from './menu-with-icon.story?raw';\nimport MenuWithKeyboardDisplaySrcRaw from './menu-with-keyboard-shortcuts.story?raw';\n\nexport const MenuDefaultSrc = removeLicenseHeader(MenuDefaultSrcRaw);\nexport const MenuNestedSrc = removeLicenseHeader(MenuNestedSrcRaw);\nexport const MenuWithCategorySrc = removeLicenseHeader(MenuWithCategorySrcRaw);\nexport const MenuWithIconSrc = removeLicenseHeader(MenuWithIconSrcRaw);\nexport const MenuCustomItemsSrc = removeLicenseHeader(MenuCustomItemsSrcRaw);\nexport const MenuInPopoverSrc = removeLicenseHeader(MenuInPopoverSrcRaw);\nexport const MenuInDialogSrc = removeLicenseHeader(MenuInDialogSrcRaw);\nexport const MenuDividerSrc = removeLicenseHeader(MenuDividerSrcRaw);\nexport const MenuWithDisabledItemSrc = removeLicenseHeader(\n MenuWithDisabledItemSrcRaw,\n);\nexport const MenuPlacementsSrc = removeLicenseHeader(MenuPlacementsSrcRaw);\nexport const MenuWithKeyboardDisplaySrc = removeLicenseHeader(\n MenuWithKeyboardDisplaySrcRaw,\n);\nexport const MenuRadioItemsSrc = removeLicenseHeader(MenuRadioItemsSrcRaw);\nexport const MenuRadioAndNormalSrc = removeLicenseHeader(\n MenuRadioAndNormalSrcRaw,\n);\n"]}
|
|
@@ -23,7 +23,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
23
23
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
24
24
|
};
|
|
25
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
-
exports.
|
|
26
|
+
exports.TooltipTriggerButtonWrapperSource = exports.TooltipWithKeyboardDisplaySource = exports.TooltipRichLinkSource = exports.TooltipRichActionsSource = exports.TooltipRichSource = exports.TooltipHoverDelaySource = exports.TooltipInDialogSource = exports.TooltipPlacementsSource = exports.TooltipInitialOpenSource = exports.TooltipControlledSource = exports.TooltipDisabledSource = exports.TooltipDefaultSource = exports.TooltipWithKeyboardDisplay = exports.TooltipRichLink = exports.TooltipRichActions = exports.TooltipRich = exports.TooltipTriggerButtonWrapper = exports.TooltipHoverDelay = exports.TooltipInDialog = exports.TooltipPlacements = exports.TooltipInitialOpen = exports.TooltipControlled = exports.TooltipDisabled = exports.TooltipDefault = void 0;
|
|
27
27
|
var tooltip_default_story_1 = require("./tooltip-default.story");
|
|
28
28
|
Object.defineProperty(exports, "TooltipDefault", { enumerable: true, get: function () { return __importDefault(tooltip_default_story_1).default; } });
|
|
29
29
|
var tooltip_disabled_story_1 = require("./tooltip-disabled.story");
|
|
@@ -46,8 +46,8 @@ var tooltip_rich_actions_story_1 = require("./tooltip-rich-actions.story");
|
|
|
46
46
|
Object.defineProperty(exports, "TooltipRichActions", { enumerable: true, get: function () { return __importDefault(tooltip_rich_actions_story_1).default; } });
|
|
47
47
|
var tooltip_rich_link_story_1 = require("./tooltip-rich-link.story");
|
|
48
48
|
Object.defineProperty(exports, "TooltipRichLink", { enumerable: true, get: function () { return __importDefault(tooltip_rich_link_story_1).default; } });
|
|
49
|
-
var
|
|
50
|
-
Object.defineProperty(exports, "
|
|
49
|
+
var tooltip_with_keyboard_display_story_1 = require("./tooltip-with-keyboard-display.story");
|
|
50
|
+
Object.defineProperty(exports, "TooltipWithKeyboardDisplay", { enumerable: true, get: function () { return __importDefault(tooltip_with_keyboard_display_story_1).default; } });
|
|
51
51
|
const export_stories_utils_1 = require("../../_common/export-stories-utils");
|
|
52
52
|
const tooltip_controlled_story_raw_1 = __importDefault(require("./tooltip-controlled.story?raw"));
|
|
53
53
|
const tooltip_default_story_raw_1 = __importDefault(require("./tooltip-default.story?raw"));
|
|
@@ -60,7 +60,7 @@ const tooltip_rich_story_raw_1 = __importDefault(require("./tooltip-rich.story?r
|
|
|
60
60
|
const tooltip_rich_actions_story_raw_1 = __importDefault(require("./tooltip-rich-actions.story?raw"));
|
|
61
61
|
const tooltip_rich_link_story_raw_1 = __importDefault(require("./tooltip-rich-link.story?raw"));
|
|
62
62
|
const tooltip_trigger_button_wrapper_story_raw_1 = __importDefault(require("./tooltip-trigger-button-wrapper.story?raw"));
|
|
63
|
-
const
|
|
63
|
+
const tooltip_with_keyboard_display_story_raw_1 = __importDefault(require("./tooltip-with-keyboard-display.story?raw"));
|
|
64
64
|
exports.TooltipDefaultSource = (0, export_stories_utils_1.removeLicenseHeader)(tooltip_default_story_raw_1.default);
|
|
65
65
|
exports.TooltipDisabledSource = (0, export_stories_utils_1.removeLicenseHeader)(tooltip_disabled_story_raw_1.default);
|
|
66
66
|
exports.TooltipControlledSource = (0, export_stories_utils_1.removeLicenseHeader)(tooltip_controlled_story_raw_1.default);
|
|
@@ -71,6 +71,6 @@ exports.TooltipHoverDelaySource = (0, export_stories_utils_1.removeLicenseHeader
|
|
|
71
71
|
exports.TooltipRichSource = (0, export_stories_utils_1.removeLicenseHeader)(tooltip_rich_story_raw_1.default);
|
|
72
72
|
exports.TooltipRichActionsSource = (0, export_stories_utils_1.removeLicenseHeader)(tooltip_rich_actions_story_raw_1.default);
|
|
73
73
|
exports.TooltipRichLinkSource = (0, export_stories_utils_1.removeLicenseHeader)(tooltip_rich_link_story_raw_1.default);
|
|
74
|
+
exports.TooltipWithKeyboardDisplaySource = (0, export_stories_utils_1.removeLicenseHeader)(tooltip_with_keyboard_display_story_raw_1.default);
|
|
74
75
|
exports.TooltipTriggerButtonWrapperSource = (0, export_stories_utils_1.removeLicenseHeader)(tooltip_trigger_button_wrapper_story_raw_1.default);
|
|
75
|
-
exports.TooltipWithKeyboardShortcutSource = (0, export_stories_utils_1.removeLicenseHeader)(tooltip_with_keyboard_shortcut_story_raw_1.default);
|
|
76
76
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/tooltip/stories/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;AAEH,iEAAoE;AAA3D,wIAAA,OAAO,OAAkB;AAClC,mEAAsE;AAA7D,0IAAA,OAAO,OAAmB;AACnC,uEAA0E;AAAjE,8IAAA,OAAO,OAAqB;AACrC,2EAA6E;AAApE,iJAAA,OAAO,OAAsB;AACtC,uEAA0E;AAAjE,8IAAA,OAAO,OAAqB;AACrC,qEAAuE;AAA9D,2IAAA,OAAO,OAAmB;AACnC,yEAA2E;AAAlE,+IAAA,OAAO,OAAqB;AACrC,+FAAgG;AAAvF,oKAAA,OAAO,OAA+B;AAC/C,2DAA8D;AAArD,kIAAA,OAAO,OAAe;AAC/B,2EAA6E;AAApE,iJAAA,OAAO,OAAsB;AACtC,qEAAuE;AAA9D,2IAAA,OAAO,OAAmB;AACnC
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/tooltip/stories/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;AAEH,iEAAoE;AAA3D,wIAAA,OAAO,OAAkB;AAClC,mEAAsE;AAA7D,0IAAA,OAAO,OAAmB;AACnC,uEAA0E;AAAjE,8IAAA,OAAO,OAAqB;AACrC,2EAA6E;AAApE,iJAAA,OAAO,OAAsB;AACtC,uEAA0E;AAAjE,8IAAA,OAAO,OAAqB;AACrC,qEAAuE;AAA9D,2IAAA,OAAO,OAAmB;AACnC,yEAA2E;AAAlE,+IAAA,OAAO,OAAqB;AACrC,+FAAgG;AAAvF,oKAAA,OAAO,OAA+B;AAC/C,2DAA8D;AAArD,kIAAA,OAAO,OAAe;AAC/B,2EAA6E;AAApE,iJAAA,OAAO,OAAsB;AACtC,qEAAuE;AAA9D,2IAAA,OAAO,OAAmB;AACnC,6FAA8F;AAArF,kKAAA,OAAO,OAA8B;AAE9C,6EAAyE;AACzE,kGAAwE;AACxE,4FAAkE;AAClE,8FAAoE;AACpE,oGAAyE;AACzE,gGAAqE;AACrE,sGAA2E;AAC3E,kGAAwE;AACxE,sFAA4D;AAC5D,sGAA2E;AAC3E,gGAAqE;AACrE,0HAA8F;AAC9F,wHAA4F;AAE/E,QAAA,oBAAoB,GAAG,IAAA,0CAAmB,EACrD,mCAAuB,CACxB,CAAC;AACW,QAAA,qBAAqB,GAAG,IAAA,0CAAmB,EACtD,oCAAwB,CACzB,CAAC;AACW,QAAA,uBAAuB,GAAG,IAAA,0CAAmB,EACxD,sCAA0B,CAC3B,CAAC;AACW,QAAA,wBAAwB,GAAG,IAAA,0CAAmB,EACzD,wCAA2B,CAC5B,CAAC;AACW,QAAA,uBAAuB,GAAG,IAAA,0CAAmB,EACxD,sCAA0B,CAC3B,CAAC;AACW,QAAA,qBAAqB,GAAG,IAAA,0CAAmB,EACtD,qCAAwB,CACzB,CAAC;AACW,QAAA,uBAAuB,GAAG,IAAA,0CAAmB,EACxD,uCAA0B,CAC3B,CAAC;AACW,QAAA,iBAAiB,GAAG,IAAA,0CAAmB,EAAC,gCAAoB,CAAC,CAAC;AAC9D,QAAA,wBAAwB,GAAG,IAAA,0CAAmB,EACzD,wCAA2B,CAC5B,CAAC;AACW,QAAA,qBAAqB,GAAG,IAAA,0CAAmB,EACtD,qCAAwB,CACzB,CAAC;AACW,QAAA,gCAAgC,GAAG,IAAA,0CAAmB,EACjE,iDAAmC,CACpC,CAAC;AACW,QAAA,iCAAiC,GAAG,IAAA,0CAAmB,EAClE,kDAAoC,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 */\n\nexport { default as TooltipDefault } from './tooltip-default.story';\nexport { default as TooltipDisabled } from './tooltip-disabled.story';\nexport { default as TooltipControlled } from './tooltip-controlled.story';\nexport { default as TooltipInitialOpen } from './tooltip-initial-open.story';\nexport { default as TooltipPlacements } from './tooltip-placements.story';\nexport { default as TooltipInDialog } from './tooltip-in-dialog.story';\nexport { default as TooltipHoverDelay } from './tooltip-hover-delay.story';\nexport { default as TooltipTriggerButtonWrapper } from './tooltip-trigger-button-wrapper.story';\nexport { default as TooltipRich } from './tooltip-rich.story';\nexport { default as TooltipRichActions } from './tooltip-rich-actions.story';\nexport { default as TooltipRichLink } from './tooltip-rich-link.story';\nexport { default as TooltipWithKeyboardDisplay } from './tooltip-with-keyboard-display.story';\n\nimport { removeLicenseHeader } from '../../_common/export-stories-utils';\nimport TooltipControlledSourceRaw from './tooltip-controlled.story?raw';\nimport TooltipDefaultSourceRaw from './tooltip-default.story?raw';\nimport TooltipDisabledSourceRaw from './tooltip-disabled.story?raw';\nimport TooltipHoverDelaySourceRaw from './tooltip-hover-delay.story?raw';\nimport TooltipInDialogSourceRaw from './tooltip-in-dialog.story?raw';\nimport TooltipInitialOpenSourceRaw from './tooltip-initial-open.story?raw';\nimport TooltipPlacementsSourceRaw from './tooltip-placements.story?raw';\nimport TooltipRichSourceRaw from './tooltip-rich.story?raw';\nimport TooltipRichActionsSourceRaw from './tooltip-rich-actions.story?raw';\nimport TooltipRichLinkSourceRaw from './tooltip-rich-link.story?raw';\nimport TooltipTriggerButtonWrapperSourceRaw from './tooltip-trigger-button-wrapper.story?raw';\nimport TooltipWithKeyboardDisplaySourceRaw from './tooltip-with-keyboard-display.story?raw';\n\nexport const TooltipDefaultSource = removeLicenseHeader(\n TooltipDefaultSourceRaw,\n);\nexport const TooltipDisabledSource = removeLicenseHeader(\n TooltipDisabledSourceRaw,\n);\nexport const TooltipControlledSource = removeLicenseHeader(\n TooltipControlledSourceRaw,\n);\nexport const TooltipInitialOpenSource = removeLicenseHeader(\n TooltipInitialOpenSourceRaw,\n);\nexport const TooltipPlacementsSource = removeLicenseHeader(\n TooltipPlacementsSourceRaw,\n);\nexport const TooltipInDialogSource = removeLicenseHeader(\n TooltipInDialogSourceRaw,\n);\nexport const TooltipHoverDelaySource = removeLicenseHeader(\n TooltipHoverDelaySourceRaw,\n);\nexport const TooltipRichSource = removeLicenseHeader(TooltipRichSourceRaw);\nexport const TooltipRichActionsSource = removeLicenseHeader(\n TooltipRichActionsSourceRaw,\n);\nexport const TooltipRichLinkSource = removeLicenseHeader(\n TooltipRichLinkSourceRaw,\n);\nexport const TooltipWithKeyboardDisplaySource = removeLicenseHeader(\n TooltipWithKeyboardDisplaySourceRaw,\n);\nexport const TooltipTriggerButtonWrapperSource = removeLicenseHeader(\n TooltipTriggerButtonWrapperSourceRaw,\n);\n"]}
|
|
@@ -27,4 +27,4 @@ const Component = () => {
|
|
|
27
27
|
return ((0, jsx_runtime_1.jsxs)(react_1.Tooltip, { type: "simple", children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip.Trigger, { children: "Hover me!" }), (0, jsx_runtime_1.jsxs)(react_1.Tooltip.Content, { children: ["This is a keyboard shortcut:", ' ', (0, jsx_runtime_1.jsx)(react_1.Kbd, { modifierKeys: ['meta'], keys: ['B'] })] })] }));
|
|
28
28
|
};
|
|
29
29
|
exports.default = Component;
|
|
30
|
-
//# sourceMappingURL=tooltip-with-keyboard-
|
|
30
|
+
//# sourceMappingURL=tooltip-with-keyboard-display.story.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tooltip-with-keyboard-display.story.js","sourceRoot":"","sources":["../../../../src/tooltip/stories/tooltip-with-keyboard-display.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAgD;AAEhD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,wBAAC,eAAO,IAAC,IAAI,EAAC,QAAQ,aACpB,uBAAC,eAAO,CAAC,OAAO,4BAA4B,EAC5C,wBAAC,eAAO,CAAC,OAAO,+CACe,GAAG,EAChC,uBAAC,WAAG,IAAC,YAAY,EAAE,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC,GAAG,CAAC,GAAI,IAC5B,IACV,CACX,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 { Kbd, Tooltip } from '@neo4j-ndl/react';\n\nconst Component = () => {\n return (\n <Tooltip type=\"simple\">\n <Tooltip.Trigger>Hover me!</Tooltip.Trigger>\n <Tooltip.Content>\n This is a keyboard shortcut:{' '}\n <Kbd modifierKeys={['meta']} keys={['B']} />\n </Tooltip.Content>\n </Tooltip>\n );\n};\n\nexport default Component;\n"]}
|
|
@@ -35,7 +35,7 @@ import { IconButtonBase } from '../icon-button-base';
|
|
|
35
35
|
export const CleanIconButton = (_a) => {
|
|
36
36
|
var { children, as, isLoading = false, isDisabled = false, size = 'medium',
|
|
37
37
|
// Does not have a default value to avoid setting aria-pressed to true if not explicitly set
|
|
38
|
-
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"]);
|
|
39
|
-
return (_jsx(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 })));
|
|
38
|
+
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"]);
|
|
39
|
+
return (_jsx(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 })));
|
|
40
40
|
};
|
|
41
41
|
//# sourceMappingURL=CleanIconButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CleanIconButton.js","sourceRoot":"","sources":["../../../src/clean-icon-button/CleanIconButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAuBA,OAAO,EAAE,cAAc,EAA4B,MAAM,qBAAqB,CAAC;AAO/E,MAAM,CAAC,MAAM,eAAe,GAAG,CAAyC,
|
|
1
|
+
{"version":3,"file":"CleanIconButton.js","sourceRoot":"","sources":["../../../src/clean-icon-button/CleanIconButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAuBA,OAAO,EAAE,cAAc,EAA4B,MAAM,qBAAqB,CAAC;AAO/E,MAAM,CAAC,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,KAAC,cAAc,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","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"]}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
/**
|
|
3
|
+
*
|
|
4
|
+
* Copyright (c) "Neo4j"
|
|
5
|
+
* Neo4j Sweden AB [http://neo4j.com]
|
|
6
|
+
*
|
|
7
|
+
* This file is part of Neo4j.
|
|
8
|
+
*
|
|
9
|
+
* Neo4j is free software: you can redistribute it and/or modify
|
|
10
|
+
* it under the terms of the GNU General Public License as published by
|
|
11
|
+
* the Free Software Foundation, either version 3 of the License, or
|
|
12
|
+
* (at your option) any later version.
|
|
13
|
+
*
|
|
14
|
+
* This program is distributed in the hope that it will be useful,
|
|
15
|
+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
16
|
+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
17
|
+
* GNU General Public License for more details.
|
|
18
|
+
*
|
|
19
|
+
* You should have received a copy of the GNU General Public License
|
|
20
|
+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
21
|
+
*/
|
|
22
|
+
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
|
|
23
|
+
import { CleanIconButton } from '@neo4j-ndl/react';
|
|
24
|
+
import { MagnifyingGlassIconOutline } from '@neo4j-ndl/react/icons';
|
|
25
|
+
const Component = () => {
|
|
26
|
+
return (_jsx("div", { className: "n-flex n-flex-col n-gap-token-16", children: _jsx("div", { className: "n-flex n-flex-row n-gap-token-16 n-items-center", children: _jsx(CleanIconButton, { description: "Search", descriptionKdbProps: { keys: ['B'], modifierKeys: ['meta'] }, variant: "neutral", children: _jsx(MagnifyingGlassIconOutline, {}) }) }) }));
|
|
27
|
+
};
|
|
28
|
+
export default Component;
|
|
29
|
+
//# sourceMappingURL=clean-icon-button-keyboard-display.story.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;AAEpE,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,cAAK,SAAS,EAAC,kCAAkC,YAC/C,cAAK,SAAS,EAAC,iDAAiD,YAC9D,KAAC,eAAe,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,KAAC,0BAA0B,KAAG,GACd,GACd,GACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { 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"]}
|
|
@@ -24,10 +24,12 @@ export { default as CleanIconButtonDisabled } from './clean-icon-button-disabled
|
|
|
24
24
|
export { default as CleanIconButtonLoading } from './clean-icon-button-loading.story';
|
|
25
25
|
export { default as CleanIconButtonSizes } from './clean-icon-button-sizes.story';
|
|
26
26
|
export { default as CleanIconButtonTone } from './clean-icon-button-tone.story';
|
|
27
|
+
export { default as CleanIconButtonKeyboardDisplay } from './clean-icon-button-keyboard-display.story';
|
|
27
28
|
import { removeLicenseHeader } from '../../_common/export-stories-utils';
|
|
28
29
|
import CleanIconButtonActiveSrcRaw from './clean-icon-button-active.story?raw';
|
|
29
30
|
import CleanIconButtonDefaultSrcRaw from './clean-icon-button-default.story?raw';
|
|
30
31
|
import CleanIconButtonDisabledSrcRaw from './clean-icon-button-disabled.story?raw';
|
|
32
|
+
import CleanIconButtonKeyboardDisplaySrcRaw from './clean-icon-button-keyboard-display.story?raw';
|
|
31
33
|
import CleanIconButtonLoadingSrcRaw from './clean-icon-button-loading.story?raw';
|
|
32
34
|
import CleanIconButtonSizesSrcRaw from './clean-icon-button-sizes.story?raw';
|
|
33
35
|
import CleanIconButtonToneSrcRaw from './clean-icon-button-tone.story?raw';
|
|
@@ -37,4 +39,5 @@ export const CleanIconButtonDisabledSrc = removeLicenseHeader(CleanIconButtonDis
|
|
|
37
39
|
export const CleanIconButtonLoadingSrc = removeLicenseHeader(CleanIconButtonLoadingSrcRaw);
|
|
38
40
|
export const CleanIconButtonSizesSrc = removeLicenseHeader(CleanIconButtonSizesSrcRaw);
|
|
39
41
|
export const CleanIconButtonToneSrc = removeLicenseHeader(CleanIconButtonToneSrcRaw);
|
|
42
|
+
export const CleanIconButtonKeyboardDisplaySrc = removeLicenseHeader(CleanIconButtonKeyboardDisplaySrcRaw);
|
|
40
43
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/clean-icon-button/stories/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AACxF,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/clean-icon-button/stories/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AACxF,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,8BAA8B,EAAE,MAAM,4CAA4C,CAAC;AAEvG,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,2BAA2B,MAAM,sCAAsC,CAAC;AAC/E,OAAO,4BAA4B,MAAM,uCAAuC,CAAC;AACjF,OAAO,6BAA6B,MAAM,wCAAwC,CAAC;AACnF,OAAO,oCAAoC,MAAM,gDAAgD,CAAC;AAClG,OAAO,4BAA4B,MAAM,uCAAuC,CAAC;AACjF,OAAO,0BAA0B,MAAM,qCAAqC,CAAC;AAC7E,OAAO,yBAAyB,MAAM,oCAAoC,CAAC;AAE3E,MAAM,CAAC,MAAM,wBAAwB,GAAG,mBAAmB,CACzD,2BAA2B,CAC5B,CAAC;AACF,MAAM,CAAC,MAAM,yBAAyB,GAAG,mBAAmB,CAC1D,4BAA4B,CAC7B,CAAC;AACF,MAAM,CAAC,MAAM,0BAA0B,GAAG,mBAAmB,CAC3D,6BAA6B,CAC9B,CAAC;AACF,MAAM,CAAC,MAAM,yBAAyB,GAAG,mBAAmB,CAC1D,4BAA4B,CAC7B,CAAC;AACF,MAAM,CAAC,MAAM,uBAAuB,GAAG,mBAAmB,CACxD,0BAA0B,CAC3B,CAAC;AACF,MAAM,CAAC,MAAM,sBAAsB,GAAG,mBAAmB,CACvD,yBAAyB,CAC1B,CAAC;AACF,MAAM,CAAC,MAAM,iCAAiC,GAAG,mBAAmB,CAClE,oCAAoC,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"]}
|
|
@@ -35,10 +35,11 @@ import { CleanIconButton } from '../clean-icon-button';
|
|
|
35
35
|
import { useCopyToClipboard } from '../hooks';
|
|
36
36
|
import { IconButton } from '../icon-button';
|
|
37
37
|
import { Square2StackIconOutline } from '../icons';
|
|
38
|
+
import { Kbd } from '../kbd';
|
|
38
39
|
import { OutlinedButton } from '../outlined-button';
|
|
39
40
|
import { Tooltip } from '../tooltip';
|
|
40
41
|
const ConfirmationButton = (_a) => {
|
|
41
|
-
var { description, actionFeedbackText, icon, children, onClick, htmlAttributes, tooltipProps, type = 'clean-icon-button' } = _a, restProps = __rest(_a, ["description", "actionFeedbackText", "icon", "children", "onClick", "htmlAttributes", "tooltipProps", "type"]);
|
|
42
|
+
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"]);
|
|
42
43
|
const [timeoutId, setTimeoutId] = React.useState(null);
|
|
43
44
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
44
45
|
const handleClick = () => {
|
|
@@ -59,7 +60,7 @@ const ConfirmationButton = (_a) => {
|
|
|
59
60
|
const content = timeoutId === null ? description : actionFeedbackText;
|
|
60
61
|
/* Controlling the tip to make it disappear in a timely manner*/
|
|
61
62
|
if (type === 'clean-icon-button') {
|
|
62
|
-
return (_jsx(CleanIconButton, Object.assign({}, restProps.cleanIconButtonProps, { description: content, tooltipProps: {
|
|
63
|
+
return (_jsx(CleanIconButton, Object.assign({}, restProps.cleanIconButtonProps, { description: content, descriptionKdbProps: descriptionKdbProps, tooltipProps: {
|
|
63
64
|
root: Object.assign(Object.assign({}, tooltipProps), { isOpen: isOpen || timeoutId !== null }),
|
|
64
65
|
trigger: {
|
|
65
66
|
htmlAttributes: {
|
|
@@ -115,10 +116,10 @@ const ConfirmationButton = (_a) => {
|
|
|
115
116
|
onClick(event);
|
|
116
117
|
}
|
|
117
118
|
handleClick();
|
|
118
|
-
}, leadingVisual: icon, className: restProps.className, htmlAttributes: htmlAttributes, children: children })) }),
|
|
119
|
+
}, leadingVisual: icon, className: restProps.className, htmlAttributes: htmlAttributes, children: children })) }), _jsxs(Tooltip.Content, { children: [content, descriptionKdbProps && _jsx(Kbd, Object.assign({}, descriptionKdbProps))] })] })));
|
|
119
120
|
}
|
|
120
121
|
};
|
|
121
|
-
export const ClipboardButton = ({ textToCopy, isDisabled, size, tooltipProps, htmlAttributes, type, }) => {
|
|
122
|
+
export const ClipboardButton = ({ textToCopy, descriptionKdbProps, isDisabled, size, tooltipProps, htmlAttributes, type, }) => {
|
|
122
123
|
const [, copyFunction] = useCopyToClipboard();
|
|
123
124
|
const isOutlinedButton = type === 'outlined-button';
|
|
124
125
|
const isIconButton = type === 'icon-button';
|
|
@@ -147,6 +148,6 @@ export const ClipboardButton = ({ textToCopy, isDisabled, size, tooltipProps, ht
|
|
|
147
148
|
},
|
|
148
149
|
type: 'clean-icon-button',
|
|
149
150
|
};
|
|
150
|
-
return (_jsx(ConfirmationButton, Object.assign({ onClick: () => copyFunction(textToCopy), description: "Copy to clipboard", actionFeedbackText: "Copied" }, props, { tooltipProps: tooltipProps, className: "n-gap-token-8", icon: _jsx(Square2StackIconOutline, { className: "ndl-icon-svg" }), htmlAttributes: Object.assign({ 'aria-live': 'polite' }, htmlAttributes), children: type === 'outlined-button' && 'Copy' })));
|
|
151
|
+
return (_jsx(ConfirmationButton, Object.assign({ onClick: () => copyFunction(textToCopy), description: "Copy to clipboard", actionFeedbackText: "Copied", descriptionKdbProps: descriptionKdbProps }, props, { tooltipProps: tooltipProps, className: "n-gap-token-8", icon: _jsx(Square2StackIconOutline, { className: "ndl-icon-svg" }), htmlAttributes: Object.assign({ 'aria-live': 'polite' }, htmlAttributes), children: type === 'outlined-button' && 'Copy' })));
|
|
151
152
|
};
|
|
152
153
|
//# sourceMappingURL=ClipboardButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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 { 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"]}
|
|
1
|
+
{"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"]}
|
|
@@ -35,7 +35,7 @@ import { IconButtonBase } from '../icon-button-base';
|
|
|
35
35
|
export const IconButton = (_a) => {
|
|
36
36
|
var { children, as, isLoading = false, isDisabled = false, size = 'medium', isFloating = false,
|
|
37
37
|
// Does not have a default value to avoid setting aria-pressed to true if not explicitly set
|
|
38
|
-
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"]);
|
|
39
|
-
return (_jsx(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 })));
|
|
38
|
+
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"]);
|
|
39
|
+
return (_jsx(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 })));
|
|
40
40
|
};
|
|
41
41
|
//# sourceMappingURL=IconButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../../src/icon-button/IconButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAuBA,OAAO,EAAE,cAAc,EAA4B,MAAM,qBAAqB,CAAC;AAI/E,MAAM,CAAC,MAAM,UAAU,GAAG,CAAyC,
|
|
1
|
+
{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../../src/icon-button/IconButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAuBA,OAAO,EAAE,cAAc,EAA4B,MAAM,qBAAqB,CAAC;AAI/E,MAAM,CAAC,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,KAAC,cAAc,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","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"]}
|
|
@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
12
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
/**
|
|
14
14
|
*
|
|
15
15
|
* Copyright (c) "Neo4j"
|
|
@@ -31,17 +31,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
31
31
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
32
32
|
*/
|
|
33
33
|
import classNames from 'classnames';
|
|
34
|
-
import { useId } from 'react';
|
|
34
|
+
import React, { useId } from 'react';
|
|
35
35
|
import { ButtonSpinner } from '../_common/ButtonSpinner';
|
|
36
36
|
import { needleWarningMessage } from '../_common/utils';
|
|
37
|
+
import { Kbd } from '../kbd';
|
|
37
38
|
import { Tooltip } from '../tooltip';
|
|
38
39
|
export const IconButtonBase = (_a) => {
|
|
39
40
|
var _b;
|
|
40
41
|
var { children, as, iconButtonVariant = 'default', isLoading = false, isDisabled = false, size = 'medium', isFloating = false,
|
|
41
42
|
// Does not have a default value to avoid setting aria-pressed to true if not explicitly set
|
|
42
|
-
isActive = undefined, description, tooltipProps, className, style, variant = 'neutral', htmlAttributes, onClick, ref,
|
|
43
|
+
isActive = undefined, description, descriptionKdbProps, tooltipProps, className, style, variant = 'neutral', htmlAttributes, onClick, ref,
|
|
43
44
|
// TODO v5: maybe update default message to 'Loading'. This value is for backward compatibility with loading spinners old aria-label
|
|
44
|
-
loadingMessage = 'Loading content' } = _a, restProps = __rest(_a, ["children", "as", "iconButtonVariant", "isLoading", "isDisabled", "size", "isFloating", "isActive", "description", "tooltipProps", "className", "style", "variant", "htmlAttributes", "onClick", "ref", "loadingMessage"]);
|
|
45
|
+
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"]);
|
|
45
46
|
const Component = as !== null && as !== void 0 ? as : 'button';
|
|
46
47
|
const loadingId = useId();
|
|
47
48
|
const isInteractable = !isDisabled && !isLoading;
|
|
@@ -78,9 +79,14 @@ export const IconButtonBase = (_a) => {
|
|
|
78
79
|
onClick(e);
|
|
79
80
|
}
|
|
80
81
|
};
|
|
82
|
+
const tooltipContent = React.useMemo(() => {
|
|
83
|
+
var _a;
|
|
84
|
+
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;
|
|
85
|
+
return (_jsxs(_Fragment, { children: [descriptionContent, descriptionKdbProps && _jsx(Kbd, Object.assign({}, descriptionKdbProps))] }));
|
|
86
|
+
}, [description, descriptionKdbProps, (_b = tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content) === null || _b === void 0 ? void 0 : _b.children]);
|
|
81
87
|
return (_jsxs(Tooltip, Object.assign({ hoverDelay: {
|
|
82
88
|
close: 0,
|
|
83
89
|
open: 500,
|
|
84
|
-
}, isDisabled: description === null || isDisabled, type: "simple" }, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.root, { children: [_jsx(Tooltip.Trigger, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.trigger, { hasButtonWrapper: true, children: _jsx(Component, Object.assign({ type: "button", onClick: handleClick, disabled: isDisabled, "aria-disabled": !isInteractable, "aria-label": description, "aria-pressed": isActive, className: classes, style: style, ref: ref, "aria-describedby": isLoading ? loadingId : undefined }, restProps, htmlAttributes, { children: _jsx("div", { className: "ndl-icon-btn-inner", children: isLoading ? (_jsx(ButtonSpinner, { loadingMessage: loadingMessage, size: "small", htmlAttributes: { id: loadingId } })) : (_jsx("div", { className: "ndl-icon", children: children })) }) })) })), _jsx(Tooltip.Content, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content, { children:
|
|
90
|
+
}, isDisabled: description === null || isDisabled, type: "simple" }, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.root, { children: [_jsx(Tooltip.Trigger, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.trigger, { hasButtonWrapper: true, children: _jsx(Component, Object.assign({ type: "button", onClick: handleClick, disabled: isDisabled, "aria-disabled": !isInteractable, "aria-label": description, "aria-pressed": isActive, className: classes, style: style, ref: ref, "aria-describedby": isLoading ? loadingId : undefined }, restProps, htmlAttributes, { children: _jsx("div", { className: "ndl-icon-btn-inner", children: isLoading ? (_jsx(ButtonSpinner, { loadingMessage: loadingMessage, size: "small", htmlAttributes: { id: loadingId } })) : (_jsx("div", { className: "ndl-icon", children: children })) }) })) })), _jsx(Tooltip.Content, Object.assign({}, tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content, { children: tooltipContent }))] })));
|
|
85
91
|
};
|
|
86
92
|
//# sourceMappingURL=IconButtonBase.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButtonBase.js","sourceRoot":"","sources":["../../../src/icon-button-base/IconButtonBase.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,UAAU,MAAM,YAAY,CAAC;
|
|
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 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/esm/kbd/Kbd.js
CHANGED
|
@@ -32,17 +32,17 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
|
|
|
32
32
|
*/
|
|
33
33
|
import classNames from 'classnames';
|
|
34
34
|
import { useMemo } from 'react';
|
|
35
|
-
import {
|
|
35
|
+
import { getKbdKeysMap, getKbdScreenReaderFriendlyText, } from './kbd-utils';
|
|
36
|
+
// TODO v5: Change element type to 'kbd'
|
|
36
37
|
export const Kbd = (_a) => {
|
|
37
38
|
var { modifierKeys, keys, os, as, className, style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["modifierKeys", "keys", "os", "as", "className", "style", "htmlAttributes", "ref"]);
|
|
38
|
-
const Component = as !== null && as !== void 0 ? as : '
|
|
39
|
+
const Component = as !== null && as !== void 0 ? as : 'kbd';
|
|
39
40
|
const modifierKeysContent = useMemo(() => {
|
|
40
41
|
if (modifierKeys === undefined) {
|
|
41
42
|
return null;
|
|
42
43
|
}
|
|
43
44
|
const keyMap = getKbdKeysMap(os);
|
|
44
|
-
|
|
45
|
-
return modifierKeys === null || modifierKeys === void 0 ? void 0 : modifierKeys.map((key) => (_jsx("abbr", { className: "ndl-kbd-key", title: labelMap[key], children: keyMap[key] }, key)));
|
|
45
|
+
return modifierKeys === null || modifierKeys === void 0 ? void 0 : modifierKeys.map((key) => (_jsx("span", { className: "ndl-kbd-key", "aria-hidden": "true", children: keyMap[key] }, key)));
|
|
46
46
|
}, [modifierKeys, os]);
|
|
47
47
|
const keysContent = useMemo(() => {
|
|
48
48
|
if (keys === undefined) {
|
|
@@ -50,12 +50,13 @@ export const Kbd = (_a) => {
|
|
|
50
50
|
}
|
|
51
51
|
return keys === null || keys === void 0 ? void 0 : keys.map((key, index) => {
|
|
52
52
|
if (index === 0) {
|
|
53
|
-
return (_jsx("span", { className: "ndl-kbd-key", children: key }, key === null || key === void 0 ? void 0 : key.toString()));
|
|
53
|
+
return (_jsx("span", { className: "ndl-kbd-key", "aria-hidden": "true", children: key }, key === null || key === void 0 ? void 0 : key.toString()));
|
|
54
54
|
}
|
|
55
|
-
return (_jsxs(_Fragment, { children: [_jsx("span", { className: "ndl-kbd-then", children: "Then" }), _jsx("span", { className: "ndl-kbd-key", children: key }, key === null || key === void 0 ? void 0 : key.toString())] }));
|
|
55
|
+
return (_jsxs(_Fragment, { children: [_jsx("span", { className: "ndl-kbd-then", "aria-hidden": "true", children: "Then" }), _jsx("span", { className: "ndl-kbd-key", "aria-hidden": "true", children: key }, key === null || key === void 0 ? void 0 : key.toString())] }));
|
|
56
56
|
});
|
|
57
57
|
}, [keys]);
|
|
58
|
+
const screenReaderFriendlyText = useMemo(() => getKbdScreenReaderFriendlyText(keys, modifierKeys, os), [keys, modifierKeys, os]);
|
|
58
59
|
const classes = classNames('ndl-kbd', className);
|
|
59
|
-
return (_jsxs(Component, Object.assign({ className: classes, style: style, ref: ref }, restProps, htmlAttributes, { children: [modifierKeysContent, keysContent] })));
|
|
60
|
+
return (_jsxs(Component, Object.assign({ className: classes, style: style, ref: ref }, restProps, htmlAttributes, { children: [_jsx("span", { className: "ndl-kbd-sr-friendly-text", children: screenReaderFriendlyText }), modifierKeysContent, keysContent] })));
|
|
60
61
|
};
|
|
61
62
|
//# sourceMappingURL=Kbd.js.map
|
package/lib/esm/kbd/Kbd.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Kbd.js","sourceRoot":"","sources":["../../../src/kbd/Kbd.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,EACL,
|
|
1
|
+
{"version":3,"file":"Kbd.js","sourceRoot":"","sources":["../../../src/kbd/Kbd.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,EACL,aAAa,EACb,8BAA8B,GAG/B,MAAM,aAAa,CAAC;AAiBrB,wCAAwC;AACxC,MAAM,CAAC,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,OAAO,CAAC,GAAG,EAAE;QACvC,IAAI,YAAY,KAAK,SAAS,EAAE,CAAC;YAC/B,OAAO,IAAI,CAAC;QACd,CAAC;QAED,MAAM,MAAM,GAAG,aAAa,CAAC,EAAE,CAAC,CAAC;QAEjC,OAAO,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAChC,eAAM,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,OAAO,CAAC,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,eACE,SAAS,EAAC,aAAa,iBAEX,MAAM,YAEjB,GAAG,IAHC,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,QAAQ,EAAE,CAIf,CACR,CAAC;YACJ,CAAC;YACD,OAAO,CACL,8BACE,eAAM,SAAS,EAAC,cAAc,iBAAa,MAAM,qBAE1C,EACP,eACE,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,OAAO,CACtC,GAAG,EAAE,CAAC,8BAA8B,CAAC,IAAI,EAAE,YAAY,EAAE,EAAE,CAAC,EAC5D,CAAC,IAAI,EAAE,YAAY,EAAE,EAAE,CAAC,CACzB,CAAC;IACF,MAAM,OAAO,GAAG,UAAU,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IAEjD,OAAO,CACL,MAAC,SAAS,kBACR,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,IACJ,SAAS,EACT,cAAc,eAElB,eAAM,SAAS,EAAC,0BAA0B,YACvC,wBAAwB,GACpB,EACN,mBAAmB,EACnB,WAAW,KACF,CACb,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport { 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/esm/kbd/kbd-utils.js
CHANGED
|
@@ -90,4 +90,32 @@ export function getKbdKeysLabelMap(os = detectOS()) {
|
|
|
90
90
|
up: 'Up',
|
|
91
91
|
};
|
|
92
92
|
}
|
|
93
|
+
function resolveKeyLabel(key, labels) {
|
|
94
|
+
if (key === null || key === undefined || typeof key === 'boolean') {
|
|
95
|
+
return '';
|
|
96
|
+
}
|
|
97
|
+
if (typeof key === 'string') {
|
|
98
|
+
return key in labels ? labels[key] : key;
|
|
99
|
+
}
|
|
100
|
+
if (typeof key === 'number') {
|
|
101
|
+
return String(key);
|
|
102
|
+
}
|
|
103
|
+
return '';
|
|
104
|
+
}
|
|
105
|
+
export function getKbdScreenReaderFriendlyText(keys, modifierKeys, os = detectOS()) {
|
|
106
|
+
const labels = getKbdKeysLabelMap(os);
|
|
107
|
+
const modStr = (modifierKeys !== null && modifierKeys !== void 0 ? modifierKeys : []).map((k) => labels[k]).join(' + ');
|
|
108
|
+
const keyLabels = (keys !== null && keys !== void 0 ? keys : [])
|
|
109
|
+
.map((k) => resolveKeyLabel(k, labels))
|
|
110
|
+
.filter(Boolean);
|
|
111
|
+
let keyStr = '';
|
|
112
|
+
if (keyLabels.length === 1) {
|
|
113
|
+
keyStr = keyLabels[0];
|
|
114
|
+
}
|
|
115
|
+
else if (keyLabels.length > 1) {
|
|
116
|
+
keyStr = keyLabels.join(' then ');
|
|
117
|
+
}
|
|
118
|
+
const body = [modStr, keyStr].filter(Boolean).join(' + ');
|
|
119
|
+
return body ? `Shortcut: ${body}` : '';
|
|
120
|
+
}
|
|
93
121
|
//# sourceMappingURL=kbd-utils.js.map
|