@neo4j-ndl/react 4.11.2 → 4.11.4
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 +1 -1
- package/lib/cjs/clean-icon-button/stories/clean-icon-button-keyboard-display.story.js.map +1 -1
- package/lib/cjs/clipboard-button/ClipboardButton.js +5 -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 +4 -4
- package/lib/cjs/icon-button-base/IconButtonBase.js.map +1 -1
- package/lib/cjs/kbd/stories/index.js +4 -4
- package/lib/cjs/kbd/stories/index.js.map +1 -1
- package/lib/cjs/kbd/stories/{kdb-sequence.story.js → kbd-sequence.story.js} +1 -1
- package/lib/cjs/kbd/stories/{kdb-sequence.story.js.map → kbd-sequence.story.js.map} +1 -1
- package/lib/cjs/menu/Menu.js +38 -6
- package/lib/cjs/menu/Menu.js.map +1 -1
- 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 +1 -1
- package/lib/esm/clean-icon-button/stories/clean-icon-button-keyboard-display.story.js.map +1 -1
- package/lib/esm/clipboard-button/ClipboardButton.js +5 -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 +4 -4
- package/lib/esm/icon-button-base/IconButtonBase.js.map +1 -1
- package/lib/esm/kbd/stories/index.js +2 -2
- package/lib/esm/kbd/stories/index.js.map +1 -1
- package/lib/esm/kbd/stories/{kdb-sequence.story.js → kbd-sequence.story.js} +1 -1
- package/lib/esm/kbd/stories/{kdb-sequence.story.js.map → kbd-sequence.story.js.map} +1 -1
- package/lib/esm/menu/Menu.js +39 -7
- package/lib/esm/menu/Menu.js.map +1 -1
- package/lib/types/clean-icon-button/CleanIconButton.d.ts +1 -1
- package/lib/types/clipboard-button/ClipboardButton.d.ts +2 -2
- package/lib/types/icon-button/IconButton.d.ts +1 -1
- package/lib/types/icon-button-base/IconButtonBase.d.ts +2 -2
- package/lib/types/kbd/stories/index.d.ts +1 -1
- package/lib/types/kbd/stories/{kdb-sequence.story.d.ts → kbd-sequence.story.d.ts} +1 -1
- package/lib/types/kbd/stories/kbd-sequence.story.d.ts.map +1 -0
- package/lib/types/menu/Menu.d.ts.map +1 -1
- package/package.json +2 -2
- package/lib/types/kbd/stories/kdb-sequence.story.d.ts.map +0 -1
|
@@ -38,8 +38,8 @@ const icon_button_base_1 = require("../icon-button-base");
|
|
|
38
38
|
const CleanIconButton = (_a) => {
|
|
39
39
|
var { children, as, isLoading = false, isDisabled = false, size = 'medium',
|
|
40
40
|
// Does not have a default value to avoid setting aria-pressed to true if not explicitly set
|
|
41
|
-
isActive, variant = 'neutral', description,
|
|
42
|
-
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,
|
|
41
|
+
isActive, variant = 'neutral', description, descriptionKbdProps, tooltipProps, className, style, htmlAttributes, onClick, ref } = _a, restProps = __rest(_a, ["children", "as", "isLoading", "isDisabled", "size", "isActive", "variant", "description", "descriptionKbdProps", "tooltipProps", "className", "style", "htmlAttributes", "onClick", "ref"]);
|
|
42
|
+
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, descriptionKbdProps: descriptionKbdProps, description: description, tooltipProps: tooltipProps, className: className, style: style, htmlAttributes: htmlAttributes, onClick: onClick, ref: ref }, restProps, { children: children })));
|
|
43
43
|
};
|
|
44
44
|
exports.CleanIconButton = CleanIconButton;
|
|
45
45
|
//# sourceMappingURL=CleanIconButton.js.map
|
|
@@ -1 +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,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
|
|
1
|
+
{"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 descriptionKbdProps,\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 descriptionKbdProps={descriptionKbdProps}\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"]}
|
|
@@ -25,7 +25,7 @@ require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
|
|
|
25
25
|
const react_1 = require("@neo4j-ndl/react");
|
|
26
26
|
const icons_1 = require("@neo4j-ndl/react/icons");
|
|
27
27
|
const Component = () => {
|
|
28
|
-
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",
|
|
28
|
+
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", descriptionKbdProps: { keys: ['B'], modifierKeys: ['meta'] }, variant: "neutral", children: (0, jsx_runtime_1.jsx)(icons_1.MagnifyingGlassIconOutline, {}) }) }) }));
|
|
29
29
|
};
|
|
30
30
|
exports.default = Component;
|
|
31
31
|
//# sourceMappingURL=clean-icon-button-keyboard-display.story.js.map
|
|
@@ -1 +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,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
|
|
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 descriptionKbdProps={{ keys: ['B'], modifierKeys: ['meta'] }}\n variant=\"neutral\"\n >\n <MagnifyingGlassIconOutline />\n </CleanIconButton>\n </div>\n </div>\n );\n};\n\nexport default Component;\n"]}
|
|
@@ -45,7 +45,7 @@ const kbd_1 = require("../kbd");
|
|
|
45
45
|
const outlined_button_1 = require("../outlined-button");
|
|
46
46
|
const tooltip_1 = require("../tooltip");
|
|
47
47
|
const ConfirmationButton = (_a) => {
|
|
48
|
-
var {
|
|
48
|
+
var { descriptionKbdProps, description, actionFeedbackText, icon, children, onClick, htmlAttributes, tooltipProps, type = 'clean-icon-button' } = _a, restProps = __rest(_a, ["descriptionKbdProps", "description", "actionFeedbackText", "icon", "children", "onClick", "htmlAttributes", "tooltipProps", "type"]);
|
|
49
49
|
const [timeoutId, setTimeoutId] = react_1.default.useState(null);
|
|
50
50
|
const [isOpen, setIsOpen] = react_1.default.useState(false);
|
|
51
51
|
const handleClick = () => {
|
|
@@ -66,7 +66,7 @@ const ConfirmationButton = (_a) => {
|
|
|
66
66
|
const content = timeoutId === null ? description : actionFeedbackText;
|
|
67
67
|
/* Controlling the tip to make it disappear in a timely manner*/
|
|
68
68
|
if (type === 'clean-icon-button') {
|
|
69
|
-
return ((0, jsx_runtime_1.jsx)(clean_icon_button_1.CleanIconButton, Object.assign({}, restProps.cleanIconButtonProps, { description: content,
|
|
69
|
+
return ((0, jsx_runtime_1.jsx)(clean_icon_button_1.CleanIconButton, Object.assign({}, restProps.cleanIconButtonProps, { description: content, descriptionKbdProps: descriptionKbdProps, tooltipProps: {
|
|
70
70
|
root: Object.assign(Object.assign({}, tooltipProps), { isOpen: isOpen || timeoutId !== null }),
|
|
71
71
|
trigger: {
|
|
72
72
|
htmlAttributes: {
|
|
@@ -122,10 +122,10 @@ const ConfirmationButton = (_a) => {
|
|
|
122
122
|
onClick(event);
|
|
123
123
|
}
|
|
124
124
|
handleClick();
|
|
125
|
-
}, leadingVisual: icon, className: restProps.className, htmlAttributes: htmlAttributes, children: children })) }), (0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip.Content, { children: [content,
|
|
125
|
+
}, leadingVisual: icon, className: restProps.className, htmlAttributes: htmlAttributes, children: children })) }), (0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip.Content, { children: [content, descriptionKbdProps && (0, jsx_runtime_1.jsx)(kbd_1.Kbd, Object.assign({}, descriptionKbdProps))] })] })));
|
|
126
126
|
}
|
|
127
127
|
};
|
|
128
|
-
const ClipboardButton = ({ textToCopy,
|
|
128
|
+
const ClipboardButton = ({ textToCopy, descriptionKbdProps, isDisabled, size, tooltipProps, htmlAttributes, type, }) => {
|
|
129
129
|
const [, copyFunction] = (0, hooks_1.useCopyToClipboard)();
|
|
130
130
|
const isOutlinedButton = type === 'outlined-button';
|
|
131
131
|
const isIconButton = type === 'icon-button';
|
|
@@ -154,7 +154,7 @@ const ClipboardButton = ({ textToCopy, descriptionKdbProps, isDisabled, size, to
|
|
|
154
154
|
},
|
|
155
155
|
type: 'clean-icon-button',
|
|
156
156
|
};
|
|
157
|
-
return ((0, jsx_runtime_1.jsx)(ConfirmationButton, Object.assign({ onClick: () => copyFunction(textToCopy), description: "Copy to clipboard", actionFeedbackText: "Copied",
|
|
157
|
+
return ((0, jsx_runtime_1.jsx)(ConfirmationButton, Object.assign({ onClick: () => copyFunction(textToCopy), description: "Copy to clipboard", actionFeedbackText: "Copied", descriptionKbdProps: descriptionKbdProps }, 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' })));
|
|
158
158
|
};
|
|
159
159
|
exports.ClipboardButton = ClipboardButton;
|
|
160
160
|
//# 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 { 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"]}
|
|
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 descriptionKbdProps?: 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 descriptionKbdProps,\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 descriptionKbdProps={descriptionKbdProps}\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 {descriptionKbdProps && <Kbd {...descriptionKbdProps} />}\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 descriptionKbdProps?: 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 descriptionKbdProps,\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 descriptionKbdProps={descriptionKbdProps}\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"]}
|
|
@@ -38,8 +38,8 @@ const icon_button_base_1 = require("../icon-button-base");
|
|
|
38
38
|
const IconButton = (_a) => {
|
|
39
39
|
var { children, as, isLoading = false, isDisabled = false, size = 'medium', isFloating = false,
|
|
40
40
|
// Does not have a default value to avoid setting aria-pressed to true if not explicitly set
|
|
41
|
-
isActive, variant = 'neutral', description,
|
|
42
|
-
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,
|
|
41
|
+
isActive, variant = 'neutral', description, descriptionKbdProps, tooltipProps, className, style, htmlAttributes, onClick, ref } = _a, restProps = __rest(_a, ["children", "as", "isLoading", "isDisabled", "size", "isFloating", "isActive", "variant", "description", "descriptionKbdProps", "tooltipProps", "className", "style", "htmlAttributes", "onClick", "ref"]);
|
|
42
|
+
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, descriptionKbdProps: descriptionKbdProps, description: description, tooltipProps: tooltipProps, className: className, style: style, variant: variant, htmlAttributes: htmlAttributes, onClick: onClick, ref: ref }, restProps, { children: children })));
|
|
43
43
|
};
|
|
44
44
|
exports.IconButton = IconButton;
|
|
45
45
|
//# sourceMappingURL=IconButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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
|
|
1
|
+
{"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 descriptionKbdProps,\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 descriptionKbdProps={descriptionKbdProps}\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"]}
|
|
@@ -79,9 +79,9 @@ const IconButtonBase = (_a) => {
|
|
|
79
79
|
var _b;
|
|
80
80
|
var { children, as, iconButtonVariant = 'default', isLoading = false, isDisabled = false, size = 'medium', isFloating = false,
|
|
81
81
|
// Does not have a default value to avoid setting aria-pressed to true if not explicitly set
|
|
82
|
-
isActive = undefined, description,
|
|
82
|
+
isActive = undefined, description, descriptionKbdProps, tooltipProps, className, style, variant = 'neutral', htmlAttributes, onClick, ref,
|
|
83
83
|
// TODO v5: maybe update default message to 'Loading'. This value is for backward compatibility with loading spinners old aria-label
|
|
84
|
-
loadingMessage = 'Loading content' } = _a, restProps = __rest(_a, ["children", "as", "iconButtonVariant", "isLoading", "isDisabled", "size", "isFloating", "isActive", "description", "
|
|
84
|
+
loadingMessage = 'Loading content' } = _a, restProps = __rest(_a, ["children", "as", "iconButtonVariant", "isLoading", "isDisabled", "size", "isFloating", "isActive", "description", "descriptionKbdProps", "tooltipProps", "className", "style", "variant", "htmlAttributes", "onClick", "ref", "loadingMessage"]);
|
|
85
85
|
const Component = as !== null && as !== void 0 ? as : 'button';
|
|
86
86
|
const loadingId = (0, react_1.useId)();
|
|
87
87
|
const isInteractable = !isDisabled && !isLoading;
|
|
@@ -121,8 +121,8 @@ const IconButtonBase = (_a) => {
|
|
|
121
121
|
const tooltipContent = react_1.default.useMemo(() => {
|
|
122
122
|
var _a;
|
|
123
123
|
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;
|
|
124
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [descriptionContent,
|
|
125
|
-
}, [description,
|
|
124
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [descriptionContent, descriptionKbdProps && (0, jsx_runtime_1.jsx)(kbd_1.Kbd, Object.assign({}, descriptionKbdProps))] }));
|
|
125
|
+
}, [description, descriptionKbdProps, (_b = tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content) === null || _b === void 0 ? void 0 : _b.children]);
|
|
126
126
|
return ((0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip, Object.assign({ hoverDelay: {
|
|
127
127
|
close: 0,
|
|
128
128
|
open: 500,
|
|
@@ -1 +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 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
|
|
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 descriptionKbdProps?: 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 descriptionKbdProps,\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 {descriptionKbdProps && <Kbd {...descriptionKbdProps} />}\n </>\n );\n }, [description, descriptionKbdProps, 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"]}
|
|
@@ -26,11 +26,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
26
26
|
exports.KbdSequenceSrc = exports.KbdDefaultSrc = exports.KbdSequence = exports.KbdDefault = void 0;
|
|
27
27
|
var kbd_default_story_1 = require("./kbd-default.story");
|
|
28
28
|
Object.defineProperty(exports, "KbdDefault", { enumerable: true, get: function () { return __importDefault(kbd_default_story_1).default; } });
|
|
29
|
-
var
|
|
30
|
-
Object.defineProperty(exports, "KbdSequence", { enumerable: true, get: function () { return __importDefault(
|
|
29
|
+
var kbd_sequence_story_1 = require("./kbd-sequence.story");
|
|
30
|
+
Object.defineProperty(exports, "KbdSequence", { enumerable: true, get: function () { return __importDefault(kbd_sequence_story_1).default; } });
|
|
31
31
|
const export_stories_utils_1 = require("../../_common/export-stories-utils");
|
|
32
32
|
const kbd_default_story_raw_1 = __importDefault(require("./kbd-default.story?raw"));
|
|
33
|
-
const
|
|
33
|
+
const kbd_sequence_story_raw_1 = __importDefault(require("./kbd-sequence.story?raw"));
|
|
34
34
|
exports.KbdDefaultSrc = (0, export_stories_utils_1.removeLicenseHeader)(kbd_default_story_raw_1.default);
|
|
35
|
-
exports.KbdSequenceSrc = (0, export_stories_utils_1.removeLicenseHeader)(
|
|
35
|
+
exports.KbdSequenceSrc = (0, export_stories_utils_1.removeLicenseHeader)(kbd_sequence_story_raw_1.default);
|
|
36
36
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/kbd/stories/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;AAEH,yDAA4D;AAAnD,gIAAA,OAAO,OAAc;AAC9B,2DAA8D;AAArD,kIAAA,OAAO,OAAe;AAE/B,6EAAyE;AACzE,oFAAuD;AACvD,sFAAyD;AAE5C,QAAA,aAAa,GAAG,IAAA,0CAAmB,EAAC,+BAAgB,CAAC,CAAC;AACtD,QAAA,cAAc,GAAG,IAAA,0CAAmB,EAAC,gCAAiB,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 */\n\nexport { default as KbdDefault } from './kbd-default.story';\nexport { default as KbdSequence } from './
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/kbd/stories/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;AAEH,yDAA4D;AAAnD,gIAAA,OAAO,OAAc;AAC9B,2DAA8D;AAArD,kIAAA,OAAO,OAAe;AAE/B,6EAAyE;AACzE,oFAAuD;AACvD,sFAAyD;AAE5C,QAAA,aAAa,GAAG,IAAA,0CAAmB,EAAC,+BAAgB,CAAC,CAAC;AACtD,QAAA,cAAc,GAAG,IAAA,0CAAmB,EAAC,gCAAiB,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 */\n\nexport { default as KbdDefault } from './kbd-default.story';\nexport { default as KbdSequence } from './kbd-sequence.story';\n\nimport { removeLicenseHeader } from '../../_common/export-stories-utils';\nimport KbdDefaultSrcRaw from './kbd-default.story?raw';\nimport KbdSequenceSrcRaw from './kbd-sequence.story?raw';\n\nexport const KbdDefaultSrc = removeLicenseHeader(KbdDefaultSrcRaw);\nexport const KbdSequenceSrc = removeLicenseHeader(KbdSequenceSrcRaw);\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
1
|
+
{"version":3,"file":"kbd-sequence.story.js","sourceRoot":"","sources":["../../../../src/kbd/stories/kbd-sequence.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAuC;AAEvC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,uBAAC,WAAG,IAAC,IAAI,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,GAAI,CAAC;AACnC,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 } from '@neo4j-ndl/react';\n\nconst Component = () => {\n return <Kbd keys={['P', '1']} />;\n};\n\nexport default Component;\n"]}
|
package/lib/cjs/menu/Menu.js
CHANGED
|
@@ -54,6 +54,7 @@ const MenuContext = (0, react_2.createContext)({
|
|
|
54
54
|
// oxlint-disable-next-line @typescript-eslint/no-empty-function
|
|
55
55
|
setHasFocusInside: () => { },
|
|
56
56
|
});
|
|
57
|
+
const MenuGroupContext = (0, react_2.createContext)(null);
|
|
57
58
|
const MenuWrapper = (props) => {
|
|
58
59
|
const parentId = (0, react_1.useFloatingParentNodeId)();
|
|
59
60
|
if (parentId === null) {
|
|
@@ -108,6 +109,9 @@ const MenuComponent = ({ children, isOpen: controlledOpen, onClose, isRoot, anch
|
|
|
108
109
|
],
|
|
109
110
|
nodeId,
|
|
110
111
|
onOpenChange: (open, event) => {
|
|
112
|
+
if (isDisabled) {
|
|
113
|
+
return;
|
|
114
|
+
}
|
|
111
115
|
if (controlledOpen === undefined) {
|
|
112
116
|
setIsOpen(open);
|
|
113
117
|
}
|
|
@@ -142,6 +146,8 @@ const MenuComponent = ({ children, isOpen: controlledOpen, onClose, isRoot, anch
|
|
|
142
146
|
const dismiss = (0, react_1.useDismiss)(context, { bubbles: true });
|
|
143
147
|
const listNavigation = (0, react_1.useListNavigation)(context, {
|
|
144
148
|
activeIndex,
|
|
149
|
+
// Don't disable indices; that way disabled items are still focusable. See: https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
|
|
150
|
+
disabledIndices: [],
|
|
145
151
|
listRef: elementsRef,
|
|
146
152
|
nested: isNested,
|
|
147
153
|
onNavigate: setActiveIndex,
|
|
@@ -235,19 +241,24 @@ const MenuItemComponent = (_a) => {
|
|
|
235
241
|
'ndl-disabled': isDisabled,
|
|
236
242
|
});
|
|
237
243
|
const Component = as !== null && as !== void 0 ? as : 'button';
|
|
238
|
-
return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ className: classes, ref: ref, type: "button", role: "menuitem", disabled: isDisabled, style: style }, restProps, htmlAttributes, { children: (0, jsx_runtime_1.jsxs)("div", { className: "ndl-menu-item-inner", children: [Boolean(preLeadingContent) && ((0, jsx_runtime_1.jsx)("div", { className: "ndl-menu-item-pre-leading-content", children: preLeadingContent })), Boolean(leadingContent) && ((0, jsx_runtime_1.jsx)("div", { className: "ndl-menu-item-leading-content", children: leadingContent })), (0, jsx_runtime_1.jsxs)("div", { className: "ndl-menu-item-title-wrapper", children: [(0, jsx_runtime_1.jsx)("div", { className: "ndl-menu-item-title", children: title }), Boolean(description) && ((0, jsx_runtime_1.jsx)("div", { className: "ndl-menu-item-description", children: description }))] }), Boolean(trailingContent) && ((0, jsx_runtime_1.jsx)("div", { className: "ndl-menu-item-trailing-content", children: trailingContent }))] }) })));
|
|
244
|
+
return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ className: classes, ref: ref, type: "button", role: "menuitem", "aria-disabled": isDisabled, style: style }, restProps, htmlAttributes, { children: (0, jsx_runtime_1.jsxs)("div", { className: "ndl-menu-item-inner", children: [Boolean(preLeadingContent) && ((0, jsx_runtime_1.jsx)("div", { className: "ndl-menu-item-pre-leading-content", children: preLeadingContent })), Boolean(leadingContent) && ((0, jsx_runtime_1.jsx)("div", { className: "ndl-menu-item-leading-content", children: leadingContent })), (0, jsx_runtime_1.jsxs)("div", { className: "ndl-menu-item-title-wrapper", children: [(0, jsx_runtime_1.jsx)("div", { className: "ndl-menu-item-title", children: title }), Boolean(description) && ((0, jsx_runtime_1.jsx)("div", { className: "ndl-menu-item-description", children: description }))] }), Boolean(trailingContent) && ((0, jsx_runtime_1.jsx)("div", { className: "ndl-menu-item-trailing-content", children: trailingContent }))] }) })));
|
|
239
245
|
};
|
|
240
246
|
const MenuItem = (_a) => {
|
|
241
247
|
var { title, className, style, leadingVisual, trailingContent, description, isDisabled, as, onClick, onFocus, htmlAttributes, id, ref } = _a, restProps = __rest(_a, ["title", "className", "style", "leadingVisual", "trailingContent", "description", "isDisabled", "as", "onClick", "onFocus", "htmlAttributes", "id", "ref"]);
|
|
242
248
|
const menu = (0, react_2.useContext)(MenuContext);
|
|
243
249
|
const itemLabel = typeof title === 'string' ? title : undefined;
|
|
244
|
-
const item = (0, react_1.useListItem)({ label:
|
|
250
|
+
const item = (0, react_1.useListItem)({ label: itemLabel });
|
|
245
251
|
const tree = (0, react_1.useFloatingTree)();
|
|
246
252
|
const isActive = item.index === menu.activeIndex;
|
|
247
253
|
const mergedRefs = (0, react_1.useMergeRefs)([item.ref, ref]);
|
|
248
254
|
return ((0, jsx_runtime_1.jsx)(MenuItemComponent, Object.assign({ as: as !== null && as !== void 0 ? as : 'button', style: style, className: className, ref: mergedRefs, title: title, description: description, leadingContent: leadingVisual, trailingContent: trailingContent, isDisabled: isDisabled, htmlAttributes: Object.assign(Object.assign(Object.assign({}, htmlAttributes), { tabIndex: isActive ? 0 : -1 }), menu.getItemProps({
|
|
249
255
|
id: id,
|
|
250
256
|
onClick(event) {
|
|
257
|
+
if (isDisabled) {
|
|
258
|
+
event.preventDefault();
|
|
259
|
+
event.stopPropagation();
|
|
260
|
+
return;
|
|
261
|
+
}
|
|
251
262
|
onClick === null || onClick === void 0 ? void 0 : onClick(event);
|
|
252
263
|
tree === null || tree === void 0 ? void 0 : tree.events.emit('click', { id });
|
|
253
264
|
},
|
|
@@ -260,11 +271,16 @@ const MenuItem = (_a) => {
|
|
|
260
271
|
const NestedMenuItem = ({ title, isDisabled, description, leadingVisual, as, onFocus, onClick, className, style, htmlAttributes, id, ref, }) => {
|
|
261
272
|
const menu = (0, react_2.useContext)(MenuContext);
|
|
262
273
|
const itemLabel = typeof title === 'string' ? title : undefined;
|
|
263
|
-
const item = (0, react_1.useListItem)({ label:
|
|
274
|
+
const item = (0, react_1.useListItem)({ label: itemLabel });
|
|
264
275
|
const isActive = item.index === menu.activeIndex;
|
|
265
276
|
const mergedRefs = (0, react_1.useMergeRefs)([item.ref, ref]);
|
|
266
277
|
return ((0, jsx_runtime_1.jsx)(MenuItemComponent, { as: as !== null && as !== void 0 ? as : 'button', style: style, className: className, ref: mergedRefs, title: title, description: description, leadingContent: leadingVisual, trailingContent: (0, jsx_runtime_1.jsx)(icons_1.ChevronRightIconOutline, { className: "ndl-menu-item-chevron" }), isDisabled: isDisabled, htmlAttributes: Object.assign(Object.assign(Object.assign(Object.assign({}, htmlAttributes), { tabIndex: isActive ? 0 : -1 }), menu.getItemProps({
|
|
267
278
|
onClick(event) {
|
|
279
|
+
if (isDisabled) {
|
|
280
|
+
event.preventDefault();
|
|
281
|
+
event.stopPropagation();
|
|
282
|
+
return;
|
|
283
|
+
}
|
|
268
284
|
onClick === null || onClick === void 0 ? void 0 : onClick(event);
|
|
269
285
|
},
|
|
270
286
|
onFocus(event) {
|
|
@@ -280,13 +296,22 @@ const CategoryItem = (_a) => {
|
|
|
280
296
|
var { children, className, style, as, htmlAttributes, ref } = _a, restProps = __rest(_a, ["children", "className", "style", "as", "htmlAttributes", "ref"]);
|
|
281
297
|
const classes = (0, classnames_1.default)('ndl-menu-category-item', className);
|
|
282
298
|
const Component = as !== null && as !== void 0 ? as : 'div';
|
|
283
|
-
|
|
299
|
+
const groupContext = (0, react_2.useContext)(MenuGroupContext);
|
|
300
|
+
(0, react_2.useEffect)(() => {
|
|
301
|
+
if (groupContext) {
|
|
302
|
+
groupContext.setHasLabel(true);
|
|
303
|
+
return () => groupContext.setHasLabel(false);
|
|
304
|
+
}
|
|
305
|
+
}, [groupContext]);
|
|
306
|
+
return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ className: classes, style: style, ref: ref }, (groupContext
|
|
307
|
+
? { id: groupContext.labelId, role: 'presentation' }
|
|
308
|
+
: { role: 'separator' }), restProps, htmlAttributes, { children: children })));
|
|
284
309
|
};
|
|
285
310
|
const RadioItem = (_a) => {
|
|
286
311
|
var { title, leadingVisual, trailingContent, description, isDisabled, isChecked = false, onClick, onFocus, className, style, as, id, htmlAttributes, ref } = _a, restProps = __rest(_a, ["title", "leadingVisual", "trailingContent", "description", "isDisabled", "isChecked", "onClick", "onFocus", "className", "style", "as", "id", "htmlAttributes", "ref"]);
|
|
287
312
|
const menu = (0, react_2.useContext)(MenuContext);
|
|
288
313
|
const itemLabel = typeof title === 'string' ? title : undefined;
|
|
289
|
-
const item = (0, react_1.useListItem)({ label:
|
|
314
|
+
const item = (0, react_1.useListItem)({ label: itemLabel });
|
|
290
315
|
const tree = (0, react_1.useFloatingTree)();
|
|
291
316
|
const isActive = item.index === menu.activeIndex;
|
|
292
317
|
const mergedRefs = (0, react_1.useMergeRefs)([item.ref, ref]);
|
|
@@ -296,6 +321,11 @@ const RadioItem = (_a) => {
|
|
|
296
321
|
return ((0, jsx_runtime_1.jsx)(MenuItemComponent, Object.assign({ as: as !== null && as !== void 0 ? as : 'button', style: style, className: classes, ref: mergedRefs, title: title, description: description, preLeadingContent: isChecked ? ((0, jsx_runtime_1.jsx)(icons_1.CheckIconOutline, { className: "n-size-5 n-shrink-0 n-self-center" })) : null, leadingContent: leadingVisual, trailingContent: trailingContent, isDisabled: isDisabled, htmlAttributes: Object.assign(Object.assign(Object.assign({}, htmlAttributes), { 'aria-checked': isChecked, role: 'menuitemradio', tabIndex: isActive ? 0 : -1 }), menu.getItemProps({
|
|
297
322
|
id: id,
|
|
298
323
|
onClick(event) {
|
|
324
|
+
if (isDisabled) {
|
|
325
|
+
event.preventDefault();
|
|
326
|
+
event.stopPropagation();
|
|
327
|
+
return;
|
|
328
|
+
}
|
|
299
329
|
onClick === null || onClick === void 0 ? void 0 : onClick(event);
|
|
300
330
|
tree === null || tree === void 0 ? void 0 : tree.events.emit('click', { id });
|
|
301
331
|
},
|
|
@@ -314,7 +344,9 @@ const MenuItems = (_a) => {
|
|
|
314
344
|
const MenuGroup = (_a) => {
|
|
315
345
|
var { children, className, htmlAttributes, style, ref } = _a, restProps = __rest(_a, ["children", "className", "htmlAttributes", "style", "ref"]);
|
|
316
346
|
const classes = (0, classnames_1.default)('ndl-menu-group', className);
|
|
317
|
-
|
|
347
|
+
const labelId = (0, react_2.useId)();
|
|
348
|
+
const [hasLabel, setHasLabel] = (0, react_2.useState)(false);
|
|
349
|
+
return ((0, jsx_runtime_1.jsx)(MenuGroupContext.Provider, { value: { labelId, setHasLabel }, children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes, style: style, ref: ref, role: "group", "aria-labelledby": hasLabel ? labelId : undefined }, restProps, htmlAttributes, { children: children })) }));
|
|
318
350
|
};
|
|
319
351
|
const Menu = Object.assign(MenuWrapper, {
|
|
320
352
|
CategoryItem: CategoryItem,
|