@navikt/ds-react 4.11.2 → 4.12.0
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/_docs.json +47 -5
- package/cjs/alert/Alert.js +1 -0
- package/cjs/copybutton/CopyButton.js +7 -3
- package/cjs/form/checkbox/Checkbox.js +3 -0
- package/cjs/form/combobox/Combobox.js +3 -2
- package/cjs/form/combobox/FilteredOptions/FilteredOptions.js +4 -5
- package/cjs/form/combobox/FilteredOptions/filteredOptionsContext.js +17 -9
- package/cjs/form/combobox/Input/Input.js +8 -4
- package/cjs/form/combobox/Input/inputContext.js +3 -1
- package/cjs/form/combobox/SelectedOptions/selectedOptionsContext.js +18 -12
- package/cjs/form/combobox/customOptionsContext.js +10 -2
- package/cjs/list/List.js +9 -5
- package/cjs/list/ListItem.js +4 -6
- package/esm/alert/Alert.js +1 -0
- package/esm/alert/Alert.js.map +1 -1
- package/esm/copybutton/CopyButton.d.ts +5 -0
- package/esm/copybutton/CopyButton.js +7 -3
- package/esm/copybutton/CopyButton.js.map +1 -1
- package/esm/form/checkbox/Checkbox.js +3 -0
- package/esm/form/checkbox/Checkbox.js.map +1 -1
- package/esm/form/combobox/Combobox.js +4 -3
- package/esm/form/combobox/Combobox.js.map +1 -1
- package/esm/form/combobox/FilteredOptions/FilteredOptions.js +4 -5
- package/esm/form/combobox/FilteredOptions/FilteredOptions.js.map +1 -1
- package/esm/form/combobox/FilteredOptions/filteredOptionsContext.js +17 -9
- package/esm/form/combobox/FilteredOptions/filteredOptionsContext.js.map +1 -1
- package/esm/form/combobox/Input/Input.js +8 -4
- package/esm/form/combobox/Input/Input.js.map +1 -1
- package/esm/form/combobox/Input/inputContext.d.ts +1 -0
- package/esm/form/combobox/Input/inputContext.js +3 -1
- package/esm/form/combobox/Input/inputContext.js.map +1 -1
- package/esm/form/combobox/SelectedOptions/selectedOptionsContext.js +18 -12
- package/esm/form/combobox/SelectedOptions/selectedOptionsContext.js.map +1 -1
- package/esm/form/combobox/customOptionsContext.d.ts +1 -0
- package/esm/form/combobox/customOptionsContext.js +10 -2
- package/esm/form/combobox/customOptionsContext.js.map +1 -1
- package/esm/form/combobox/types.d.ts +3 -3
- package/esm/list/List.d.ts +7 -1
- package/esm/list/List.js +9 -5
- package/esm/list/List.js.map +1 -1
- package/esm/list/ListItem.js +4 -6
- package/esm/list/ListItem.js.map +1 -1
- package/package.json +2 -2
- package/src/alert/Alert.tsx +1 -0
- package/src/alert/alert.stories.tsx +11 -1
- package/src/copybutton/CopyButton.tsx +27 -19
- package/src/copybutton/copy-button.stories.tsx +10 -0
- package/src/form/checkbox/Checkbox.tsx +17 -0
- package/src/form/combobox/Combobox.tsx +12 -1
- package/src/form/combobox/FilteredOptions/FilteredOptions.tsx +3 -5
- package/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx +17 -8
- package/src/form/combobox/Input/Input.tsx +13 -4
- package/src/form/combobox/Input/inputContext.tsx +4 -1
- package/src/form/combobox/SelectedOptions/selectedOptionsContext.tsx +23 -13
- package/src/form/combobox/combobox.stories.tsx +90 -2
- package/src/form/combobox/customOptionsContext.tsx +10 -2
- package/src/form/combobox/types.ts +6 -3
- package/src/list/List.tsx +21 -5
- package/src/list/ListItem.tsx +4 -10
- package/src/list/list.stories.tsx +132 -1
package/_docs.json
CHANGED
|
@@ -1735,6 +1735,27 @@
|
|
|
1735
1735
|
"name": "string"
|
|
1736
1736
|
}
|
|
1737
1737
|
},
|
|
1738
|
+
"iconPosition": {
|
|
1739
|
+
"defaultValue": {
|
|
1740
|
+
"value": "left"
|
|
1741
|
+
},
|
|
1742
|
+
"description": "Icon position in Button",
|
|
1743
|
+
"name": "iconPosition",
|
|
1744
|
+
"parent": {
|
|
1745
|
+
"fileName": "src/copybutton/CopyButton.tsx",
|
|
1746
|
+
"name": "CopyButtonProps"
|
|
1747
|
+
},
|
|
1748
|
+
"declarations": [
|
|
1749
|
+
{
|
|
1750
|
+
"fileName": "src/copybutton/CopyButton.tsx",
|
|
1751
|
+
"name": "CopyButtonProps"
|
|
1752
|
+
}
|
|
1753
|
+
],
|
|
1754
|
+
"required": false,
|
|
1755
|
+
"type": {
|
|
1756
|
+
"name": "\"left\" | \"right\""
|
|
1757
|
+
}
|
|
1758
|
+
},
|
|
1738
1759
|
"className": {
|
|
1739
1760
|
"defaultValue": null,
|
|
1740
1761
|
"description": "",
|
|
@@ -5469,6 +5490,27 @@
|
|
|
5469
5490
|
"name": "ElementType<any>"
|
|
5470
5491
|
}
|
|
5471
5492
|
},
|
|
5493
|
+
"size": {
|
|
5494
|
+
"defaultValue": {
|
|
5495
|
+
"value": "medium"
|
|
5496
|
+
},
|
|
5497
|
+
"description": "Changes padding, height and font-size",
|
|
5498
|
+
"name": "size",
|
|
5499
|
+
"parent": {
|
|
5500
|
+
"fileName": "src/list/List.tsx",
|
|
5501
|
+
"name": "ListProps"
|
|
5502
|
+
},
|
|
5503
|
+
"declarations": [
|
|
5504
|
+
{
|
|
5505
|
+
"fileName": "src/list/List.tsx",
|
|
5506
|
+
"name": "ListProps"
|
|
5507
|
+
}
|
|
5508
|
+
],
|
|
5509
|
+
"required": false,
|
|
5510
|
+
"type": {
|
|
5511
|
+
"name": "\"medium\" | \"small\""
|
|
5512
|
+
}
|
|
5513
|
+
},
|
|
5472
5514
|
"className": {
|
|
5473
5515
|
"defaultValue": null,
|
|
5474
5516
|
"description": "",
|
|
@@ -14345,7 +14387,7 @@
|
|
|
14345
14387
|
},
|
|
14346
14388
|
"onToggleSelected": {
|
|
14347
14389
|
"defaultValue": null,
|
|
14348
|
-
"description": "Callback function triggered whenever an option is selected or de-selected\n@param option\n@param isSelected - Whether the option has been selected or unselected\n@param
|
|
14390
|
+
"description": "Callback function triggered whenever an option is selected or de-selected\n@param option\n@param isSelected - Whether the option has been selected or unselected\n@param isCustomOption - Whether the option comes from user input, instead of from the list\n@returns",
|
|
14349
14391
|
"name": "onToggleSelected",
|
|
14350
14392
|
"parent": {
|
|
14351
14393
|
"fileName": "react/src/form/combobox/types.ts",
|
|
@@ -14359,7 +14401,7 @@
|
|
|
14359
14401
|
],
|
|
14360
14402
|
"required": false,
|
|
14361
14403
|
"type": {
|
|
14362
|
-
"name": "((option: string, isSelected: boolean,
|
|
14404
|
+
"name": "((option: string, isSelected: boolean, isCustomOption: boolean) => void)"
|
|
14363
14405
|
}
|
|
14364
14406
|
},
|
|
14365
14407
|
"selectedOptions": {
|
|
@@ -14774,7 +14816,7 @@
|
|
|
14774
14816
|
],
|
|
14775
14817
|
"required": false,
|
|
14776
14818
|
"type": {
|
|
14777
|
-
"name": "((event: ChangeEvent<HTMLInputElement>) => void)"
|
|
14819
|
+
"name": "((event: ChangeEvent<HTMLInputElement> | null, value?: string) => void)"
|
|
14778
14820
|
}
|
|
14779
14821
|
},
|
|
14780
14822
|
"onClear": {
|
|
@@ -14798,7 +14840,7 @@
|
|
|
14798
14840
|
},
|
|
14799
14841
|
"onToggleSelected": {
|
|
14800
14842
|
"defaultValue": null,
|
|
14801
|
-
"description": "Callback function triggered whenever an option is selected or de-selected\n@param option\n@param isSelected - Whether the option has been selected or unselected\n@param
|
|
14843
|
+
"description": "Callback function triggered whenever an option is selected or de-selected\n@param option\n@param isSelected - Whether the option has been selected or unselected\n@param isCustomOption - Whether the option comes from user input, instead of from the list\n@returns",
|
|
14802
14844
|
"name": "onToggleSelected",
|
|
14803
14845
|
"parent": {
|
|
14804
14846
|
"fileName": "react/src/form/combobox/types.ts",
|
|
@@ -14812,7 +14854,7 @@
|
|
|
14812
14854
|
],
|
|
14813
14855
|
"required": false,
|
|
14814
14856
|
"type": {
|
|
14815
|
-
"name": "((option: string, isSelected: boolean,
|
|
14857
|
+
"name": "((option: string, isSelected: boolean, isCustomOption: boolean) => void)"
|
|
14816
14858
|
}
|
|
14817
14859
|
},
|
|
14818
14860
|
"selectedOptions": {
|
package/cjs/alert/Alert.js
CHANGED
|
@@ -72,6 +72,7 @@ exports.Alert = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
72
72
|
return (react_1.default.createElement("div", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)(className, "navds-alert", `navds-alert--${variant}`, `navds-alert--${size}`, {
|
|
73
73
|
"navds-alert--full-width": fullWidth,
|
|
74
74
|
"navds-alert--inline": inline,
|
|
75
|
+
"navds-alert--close-button": closeButton,
|
|
75
76
|
}) }),
|
|
76
77
|
react_1.default.createElement(Icon, { variant: variant, className: "navds-alert__icon" }),
|
|
77
78
|
react_1.default.createElement(BodyLong_1.BodyLong, { as: "div", size: size, className: "navds-alert__wrapper" }, children),
|
|
@@ -55,7 +55,7 @@ const Label_1 = __importDefault(require("../typography/Label"));
|
|
|
55
55
|
* ```
|
|
56
56
|
*/
|
|
57
57
|
exports.CopyButton = (0, react_1.forwardRef)((_a, ref) => {
|
|
58
|
-
var { className, copyText, text, activeText = "Kopiert!", variant = "neutral", size = "medium", onActiveChange, icon, activeIcon, activeDuration = 2000, title = "Kopier", activeTitle = "Kopiert" } = _a, rest = __rest(_a, ["className", "copyText", "text", "activeText", "variant", "size", "onActiveChange", "icon", "activeIcon", "activeDuration", "title", "activeTitle"]);
|
|
58
|
+
var { className, copyText, text, activeText = "Kopiert!", variant = "neutral", size = "medium", onActiveChange, icon, activeIcon, activeDuration = 2000, title = "Kopier", activeTitle = "Kopiert", iconPosition = "left" } = _a, rest = __rest(_a, ["className", "copyText", "text", "activeText", "variant", "size", "onActiveChange", "icon", "activeIcon", "activeDuration", "title", "activeTitle", "iconPosition"]);
|
|
59
59
|
const [active, setActive] = (0, react_1.useState)(false);
|
|
60
60
|
const timeoutRef = (0, react_1.useRef)();
|
|
61
61
|
(0, react_1.useEffect)(() => {
|
|
@@ -75,13 +75,17 @@ exports.CopyButton = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
75
75
|
onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(false);
|
|
76
76
|
}, activeDuration);
|
|
77
77
|
};
|
|
78
|
+
const CopyIcon = () => {
|
|
79
|
+
return active ? (react_1.default.createElement("span", { className: "navds-copybutton__icon" }, activeIcon !== null && activeIcon !== void 0 ? activeIcon : (react_1.default.createElement(aksel_icons_1.CheckmarkIcon, { "aria-hidden": !!text, title: text ? undefined : activeTitle })))) : (react_1.default.createElement("span", { className: "navds-copybutton__icon" }, icon !== null && icon !== void 0 ? icon : (react_1.default.createElement(aksel_icons_1.FilesIcon, { "aria-hidden": !!text, title: text ? undefined : title }))));
|
|
80
|
+
};
|
|
78
81
|
return (react_1.default.createElement("button", Object.assign({ ref: ref, type: "button" }, rest, { "aria-live": "polite", className: (0, clsx_1.default)("navds-copybutton", className, `navds-copybutton--${size}`, `navds-copybutton--${variant}`, {
|
|
79
82
|
"navds-copybutton--icon-only": !text,
|
|
80
83
|
"navds-copybutton--active": active,
|
|
81
84
|
}), onClick: handleClick }),
|
|
82
85
|
react_1.default.createElement("span", { className: "navds-copybutton__content" },
|
|
83
|
-
|
|
86
|
+
iconPosition === "left" && react_1.default.createElement(CopyIcon, null),
|
|
84
87
|
text &&
|
|
85
|
-
(active ? (react_1.default.createElement(Label_1.default, { as: "span", size: size === "medium" ? "medium" : "small", "aria-live": "polite" }, activeText)) : (react_1.default.createElement(Label_1.default, { as: "span", size: size === "medium" ? "medium" : "small", "aria-live": "polite" }, text)))
|
|
88
|
+
(active ? (react_1.default.createElement(Label_1.default, { as: "span", size: size === "medium" ? "medium" : "small", "aria-live": "polite" }, activeText)) : (react_1.default.createElement(Label_1.default, { as: "span", size: size === "medium" ? "medium" : "small", "aria-live": "polite" }, text))),
|
|
89
|
+
iconPosition === "right" && react_1.default.createElement(CopyIcon, null))));
|
|
86
90
|
});
|
|
87
91
|
exports.default = exports.CopyButton;
|
|
@@ -62,6 +62,9 @@ exports.Checkbox = (0, react_1.forwardRef)((props, ref) => {
|
|
|
62
62
|
}
|
|
63
63
|
} })),
|
|
64
64
|
react_1.default.createElement("label", { htmlFor: inputProps.id, className: "navds-checkbox__label" },
|
|
65
|
+
react_1.default.createElement("span", { className: "navds-checkbox__icon" },
|
|
66
|
+
react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "13", height: "10", viewBox: "0 0 13 10", fill: "none", focusable: false, role: "img", "aria-hidden": true },
|
|
67
|
+
react_1.default.createElement("path", { d: "M4.03524 6.41478L10.4752 0.404669C11.0792 -0.160351 12.029 -0.130672 12.5955 0.47478C13.162 1.08027 13.1296 2.03007 12.5245 2.59621L5.02111 9.59934C4.74099 9.85904 4.37559 10 4.00025 10C3.60651 10 3.22717 9.84621 2.93914 9.56111L0.439143 7.06111C-0.146381 6.47558 -0.146381 5.52542 0.439143 4.93989C1.02467 4.35437 1.97483 4.35437 2.56036 4.93989L4.03524 6.41478Z", fill: "currentColor" }))),
|
|
65
68
|
react_1.default.createElement("span", { className: (0, clsx_1.default)("navds-checkbox__content", {
|
|
66
69
|
"navds-sr-only": props.hideLabel,
|
|
67
70
|
}) },
|
|
@@ -55,7 +55,7 @@ exports.Combobox = (0, react_1.forwardRef)((props, ref) => {
|
|
|
55
55
|
const toggleListButtonRef = (0, react_1.useRef)(null);
|
|
56
56
|
const { currentOption, toggleIsListOpen } = (0, filteredOptionsContext_1.useFilteredOptionsContext)();
|
|
57
57
|
const { selectedOptions } = (0, selectedOptionsContext_1.useSelectedOptionsContext)();
|
|
58
|
-
const { clearInput, focusInput, hasError, inputDescriptionId, inputProps, inputRef, value, size = "medium", } = (0, inputContext_1.useInputContext)();
|
|
58
|
+
const { clearInput, error, errorId, focusInput, hasError, inputDescriptionId, inputProps, inputRef, value, showErrorMsg, size = "medium", } = (0, inputContext_1.useInputContext)();
|
|
59
59
|
const mergedInputRef = (0, react_1.useMemo)(() => (0, __1.mergeRefs)([inputRef, ref]), [inputRef, ref]);
|
|
60
60
|
return (react_1.default.createElement(ComboboxWrapper_1.default, { className: className, hasError: hasError, inputProps: inputProps, inputSize: size, toggleIsListOpen: toggleIsListOpen, toggleListButtonRef: toggleListButtonRef },
|
|
61
61
|
react_1.default.createElement(__1.Label, { htmlFor: inputProps.id, size: size, className: (0, clsx_1.default)("navds-form-field__label", {
|
|
@@ -73,6 +73,7 @@ exports.Combobox = (0, react_1.forwardRef)((props, ref) => {
|
|
|
73
73
|
react_1.default.createElement("div", null,
|
|
74
74
|
value && clearButton && (react_1.default.createElement(ClearButton_1.default, { handleClear: clearInput, clearButtonLabel: clearButtonLabel, tabIndex: -1 })),
|
|
75
75
|
toggleListButton && (react_1.default.createElement(ToggleListButton_1.default, { toggleListButtonLabel: toggleListButtonLabel, ref: toggleListButtonRef })))),
|
|
76
|
-
react_1.default.createElement(FilteredOptions_1.default, null))
|
|
76
|
+
react_1.default.createElement(FilteredOptions_1.default, null)),
|
|
77
|
+
react_1.default.createElement("div", { className: "navds-form-field__error", id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && react_1.default.createElement(__1.ErrorMessage, { size: size }, error))));
|
|
77
78
|
});
|
|
78
79
|
exports.default = exports.Combobox;
|
|
@@ -11,7 +11,7 @@ const filteredOptionsContext_1 = require("./filteredOptionsContext");
|
|
|
11
11
|
const selectedOptionsContext_1 = require("../SelectedOptions/selectedOptionsContext");
|
|
12
12
|
const inputContext_1 = require("../Input/inputContext");
|
|
13
13
|
const FilteredOptions = () => {
|
|
14
|
-
const {
|
|
14
|
+
const { inputProps: { id }, size, value, } = (0, inputContext_1.useInputContext)();
|
|
15
15
|
const { allowNewValues, isLoading, isListOpen, filteredOptions, filteredOptionsIndex, filteredOptionsRef, isValueNew, toggleIsListOpen, } = (0, filteredOptionsContext_1.useFilteredOptionsContext)();
|
|
16
16
|
const { isMultiSelect, selectedOptions, toggleOption } = (0, selectedOptionsContext_1.useSelectedOptionsContext)();
|
|
17
17
|
return (react_1.default.createElement("ul", { ref: filteredOptionsRef, className: (0, clsx_1.default)("navds-combobox__list", {
|
|
@@ -21,7 +21,8 @@ const FilteredOptions = () => {
|
|
|
21
21
|
react_1.default.createElement(__1.Loader, { "aria-label": "S\u00F8ker..." }))),
|
|
22
22
|
isValueNew && allowNewValues && (react_1.default.createElement("li", { tabIndex: -1, onPointerUp: (event) => {
|
|
23
23
|
toggleOption(value, event);
|
|
24
|
-
|
|
24
|
+
if (!isMultiSelect && !selectedOptions.includes(value))
|
|
25
|
+
toggleIsListOpen(false);
|
|
25
26
|
}, id: `${id}-combobox-new-option`, className: (0, clsx_1.default)("navds-combobox__list-item__new-option", {
|
|
26
27
|
"navds-combobox__list-item__new-option--focus": filteredOptionsIndex === -1,
|
|
27
28
|
}), role: "option", "aria-selected": false },
|
|
@@ -39,10 +40,8 @@ const FilteredOptions = () => {
|
|
|
39
40
|
"navds-combobox__list-item--selected": selectedOptions.includes(option),
|
|
40
41
|
}), id: `${id}-option-${option.replace(" ", "-")}`, key: option, tabIndex: -1, onPointerUp: (event) => {
|
|
41
42
|
toggleOption(option, event);
|
|
42
|
-
|
|
43
|
-
if (!isMultiSelect) {
|
|
43
|
+
if (!isMultiSelect && !selectedOptions.includes(option))
|
|
44
44
|
toggleIsListOpen(false);
|
|
45
|
-
}
|
|
46
45
|
}, role: "option", "aria-selected": selectedOptions.includes(option) },
|
|
47
46
|
react_1.default.createElement(__1.BodyShort, { size: size }, option),
|
|
48
47
|
selectedOptions.includes(option) && react_1.default.createElement(aksel_icons_1.CheckmarkIcon, null))))));
|
|
@@ -28,6 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
28
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
29
|
exports.useFilteredOptionsContext = exports.FilteredOptionsProvider = void 0;
|
|
30
30
|
const react_1 = __importStar(require("react"));
|
|
31
|
+
const clsx_1 = __importDefault(require("clsx"));
|
|
31
32
|
const customOptionsContext_1 = require("../customOptionsContext");
|
|
32
33
|
const inputContext_1 = require("../Input/inputContext");
|
|
33
34
|
const usePrevious_1 = __importDefault(require("../../../util/usePrevious"));
|
|
@@ -39,7 +40,7 @@ const FilteredOptionsContext = (0, react_1.createContext)({});
|
|
|
39
40
|
const FilteredOptionsProvider = ({ children, value: props }) => {
|
|
40
41
|
const { allowNewValues, filteredOptions: externalFilteredOptions, isListOpen: isExternalListOpen, isLoading, options, } = props;
|
|
41
42
|
const filteredOptionsRef = (0, react_1.useRef)(null);
|
|
42
|
-
const { inputProps: { id }, value, searchTerm, setValue, setSearchTerm, shouldAutocomplete, } = (0, inputContext_1.useInputContext)();
|
|
43
|
+
const { inputProps: { "aria-describedby": partialAriaDescribedBy, id }, value, searchTerm, setValue, setSearchTerm, shouldAutocomplete, } = (0, inputContext_1.useInputContext)();
|
|
43
44
|
const [filteredOptionsIndex, setFilteredOptionsIndex] = (0, react_1.useState)(null);
|
|
44
45
|
const [isInternalListOpen, setInternalListOpen] = (0, react_1.useState)(false);
|
|
45
46
|
const { customOptions } = (0, customOptionsContext_1.useCustomOptionsContext)();
|
|
@@ -81,21 +82,28 @@ const FilteredOptionsProvider = ({ children, value: props }) => {
|
|
|
81
82
|
return isValueNew && allowNewValues ? -1 : 0;
|
|
82
83
|
}, [allowNewValues, isValueNew]);
|
|
83
84
|
const ariaDescribedBy = (0, react_1.useMemo)(() => {
|
|
85
|
+
let activeOption;
|
|
84
86
|
if (!isLoading && filteredOptions.length === 0) {
|
|
85
|
-
|
|
87
|
+
activeOption = `${id}-no-hits`;
|
|
86
88
|
}
|
|
87
89
|
else if ((value && value !== "") || isLoading) {
|
|
88
90
|
if (shouldAutocomplete && filteredOptions[0]) {
|
|
89
|
-
|
|
91
|
+
activeOption = `${id}-option-${filteredOptions[0].replace(" ", "-")}`;
|
|
90
92
|
}
|
|
91
|
-
else if (isLoading) {
|
|
92
|
-
|
|
93
|
+
else if (isListOpen && isLoading) {
|
|
94
|
+
activeOption = `${id}-is-loading`;
|
|
93
95
|
}
|
|
94
96
|
}
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
97
|
+
return (0, clsx_1.default)(activeOption, partialAriaDescribedBy) || undefined;
|
|
98
|
+
}, [
|
|
99
|
+
isListOpen,
|
|
100
|
+
isLoading,
|
|
101
|
+
value,
|
|
102
|
+
partialAriaDescribedBy,
|
|
103
|
+
shouldAutocomplete,
|
|
104
|
+
filteredOptions,
|
|
105
|
+
id,
|
|
106
|
+
]);
|
|
99
107
|
const currentOption = (0, react_1.useMemo)(() => {
|
|
100
108
|
if (filteredOptionsIndex == null) {
|
|
101
109
|
return null;
|
|
@@ -46,14 +46,15 @@ const inputContext_1 = require("./inputContext");
|
|
|
46
46
|
const Input = (0, react_1.forwardRef)((_a, ref) => {
|
|
47
47
|
var { inputClassName, error, errorId } = _a, rest = __rest(_a, ["inputClassName", "error", "errorId"]);
|
|
48
48
|
const { clearInput, inputProps, onChange, size, value } = (0, inputContext_1.useInputContext)();
|
|
49
|
-
const { selectedOptions, removeSelectedOption, toggleOption } = (0, selectedOptionsContext_1.useSelectedOptionsContext)();
|
|
49
|
+
const { selectedOptions, removeSelectedOption, toggleOption, isMultiSelect, } = (0, selectedOptionsContext_1.useSelectedOptionsContext)();
|
|
50
50
|
const { activeDecendantId, allowNewValues, currentOption, filteredOptions, toggleIsListOpen, isListOpen, filteredOptionsIndex, moveFocusUp, moveFocusDown, ariaDescribedBy, moveFocusToInput, moveFocusToEnd, setFilteredOptionsIndex, shouldAutocomplete, } = (0, filteredOptionsContext_1.useFilteredOptionsContext)();
|
|
51
51
|
const onEnter = (0, react_1.useCallback)((event) => {
|
|
52
52
|
if (currentOption) {
|
|
53
53
|
event.preventDefault();
|
|
54
54
|
// Selecting a value from the dropdown / FilteredOptions
|
|
55
55
|
toggleOption(currentOption, event);
|
|
56
|
-
|
|
56
|
+
if (!isMultiSelect && !selectedOptions.includes(currentOption))
|
|
57
|
+
toggleIsListOpen(false);
|
|
57
58
|
}
|
|
58
59
|
else if (shouldAutocomplete && selectedOptions.includes(value)) {
|
|
59
60
|
event.preventDefault();
|
|
@@ -64,14 +65,17 @@ const Input = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
64
65
|
event.preventDefault();
|
|
65
66
|
// Autocompleting or adding a new value
|
|
66
67
|
toggleOption(value, event);
|
|
67
|
-
|
|
68
|
+
if (!isMultiSelect && !selectedOptions.includes(value))
|
|
69
|
+
toggleIsListOpen(false);
|
|
68
70
|
}
|
|
69
71
|
}, [
|
|
70
72
|
allowNewValues,
|
|
71
73
|
clearInput,
|
|
72
74
|
currentOption,
|
|
75
|
+
isMultiSelect,
|
|
73
76
|
selectedOptions,
|
|
74
77
|
shouldAutocomplete,
|
|
78
|
+
toggleIsListOpen,
|
|
75
79
|
toggleOption,
|
|
76
80
|
value,
|
|
77
81
|
]);
|
|
@@ -141,6 +145,6 @@ const Input = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
141
145
|
const onBlur = () => {
|
|
142
146
|
setFilteredOptionsIndex(-1);
|
|
143
147
|
};
|
|
144
|
-
return (react_1.default.createElement("input", Object.assign({}, rest, (0, __1.omit)(inputProps, ["aria-invalid"]), { ref: ref, value: value, onChange: onChangeHandler, type: "text", role: "combobox", onBlur: onBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, "aria-controls": `${inputProps.id}-filtered-options`, "aria-expanded": !!isListOpen, autoComplete: "off", "aria-autocomplete": shouldAutocomplete ? "both" : "list", "aria-activedescendant": activeDecendantId, "aria-describedby": ariaDescribedBy, className: (0, clsx_1.default)(inputClassName, "navds-combobox__input", "navds-body-short", `navds-body-${size}`) })));
|
|
148
|
+
return (react_1.default.createElement("input", Object.assign({}, rest, (0, __1.omit)(inputProps, ["aria-invalid"]), { ref: ref, value: value, onChange: onChangeHandler, type: "text", role: "combobox", onBlur: onBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, "aria-controls": `${inputProps.id}-filtered-options`, "aria-expanded": !!isListOpen, autoComplete: "off", "aria-autocomplete": shouldAutocomplete ? "both" : "list", "aria-activedescendant": activeDecendantId, "aria-describedby": ariaDescribedBy, "aria-invalid": inputProps["aria-invalid"], className: (0, clsx_1.default)(inputClassName, "navds-combobox__input", "navds-body-short", `navds-body-${size}`) })));
|
|
145
149
|
});
|
|
146
150
|
exports.default = Input;
|
|
@@ -52,9 +52,10 @@ const InputContextProvider = ({ children, value: props }) => {
|
|
|
52
52
|
}, [setInternalValue]);
|
|
53
53
|
const clearInput = (0, react_1.useCallback)((event) => {
|
|
54
54
|
onClear === null || onClear === void 0 ? void 0 : onClear(event);
|
|
55
|
+
externalOnChange === null || externalOnChange === void 0 ? void 0 : externalOnChange(null, "");
|
|
55
56
|
setValue("");
|
|
56
57
|
setSearchTerm("");
|
|
57
|
-
}, [
|
|
58
|
+
}, [externalOnChange, onClear, setValue]);
|
|
58
59
|
const focusInput = (0, react_1.useCallback)(() => {
|
|
59
60
|
var _a, _b;
|
|
60
61
|
(_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
@@ -66,6 +67,7 @@ const InputContextProvider = ({ children, value: props }) => {
|
|
|
66
67
|
}
|
|
67
68
|
}, [value, searchTerm, shouldAutocomplete]);
|
|
68
69
|
return (react_1.default.createElement(InputContext.Provider, { value: Object.assign(Object.assign({}, formFieldProps), { clearInput,
|
|
70
|
+
error,
|
|
69
71
|
focusInput,
|
|
70
72
|
inputRef,
|
|
71
73
|
value,
|
|
@@ -34,17 +34,18 @@ const customOptionsContext_1 = require("../customOptionsContext");
|
|
|
34
34
|
const SelectedOptionsContext = (0, react_1.createContext)({});
|
|
35
35
|
const SelectedOptionsProvider = ({ children, value, }) => {
|
|
36
36
|
const { clearInput, focusInput } = (0, inputContext_1.useInputContext)();
|
|
37
|
-
const { customOptions, removeCustomOption, addCustomOption } = (0, customOptionsContext_1.useCustomOptionsContext)();
|
|
37
|
+
const { customOptions, removeCustomOption, addCustomOption, setCustomOptions, } = (0, customOptionsContext_1.useCustomOptionsContext)();
|
|
38
38
|
const { allowNewValues, isMultiSelect, selectedOptions: externalSelectedOptions, onToggleSelected, options, } = value;
|
|
39
39
|
const [internalSelectedOptions, setSelectedOptions] = (0, react_1.useState)([]);
|
|
40
40
|
const selectedOptions = (0, react_1.useMemo)(() => externalSelectedOptions !== null && externalSelectedOptions !== void 0 ? externalSelectedOptions : [...customOptions, ...internalSelectedOptions], [customOptions, externalSelectedOptions, internalSelectedOptions]);
|
|
41
41
|
const addSelectedOption = (0, react_1.useCallback)((option) => {
|
|
42
42
|
var _a;
|
|
43
|
-
const
|
|
43
|
+
const isCustomOption = !options
|
|
44
44
|
.map((opt) => opt.toLowerCase())
|
|
45
45
|
.includes((_a = option === null || option === void 0 ? void 0 : option.toLowerCase) === null || _a === void 0 ? void 0 : _a.call(option));
|
|
46
|
-
if (
|
|
46
|
+
if (isCustomOption) {
|
|
47
47
|
allowNewValues && addCustomOption(option);
|
|
48
|
+
!isMultiSelect && setSelectedOptions([]);
|
|
48
49
|
}
|
|
49
50
|
else if (isMultiSelect) {
|
|
50
51
|
setSelectedOptions((prevSelectedOptions) => [
|
|
@@ -54,18 +55,26 @@ const SelectedOptionsProvider = ({ children, value, }) => {
|
|
|
54
55
|
}
|
|
55
56
|
else {
|
|
56
57
|
setSelectedOptions([option]);
|
|
58
|
+
setCustomOptions([]);
|
|
57
59
|
}
|
|
58
|
-
onToggleSelected === null || onToggleSelected === void 0 ? void 0 : onToggleSelected(option, true,
|
|
59
|
-
}, [
|
|
60
|
+
onToggleSelected === null || onToggleSelected === void 0 ? void 0 : onToggleSelected(option, true, isCustomOption);
|
|
61
|
+
}, [
|
|
62
|
+
addCustomOption,
|
|
63
|
+
allowNewValues,
|
|
64
|
+
isMultiSelect,
|
|
65
|
+
onToggleSelected,
|
|
66
|
+
options,
|
|
67
|
+
setCustomOptions,
|
|
68
|
+
]);
|
|
60
69
|
const removeSelectedOption = (0, react_1.useCallback)((option) => {
|
|
61
|
-
const
|
|
62
|
-
if (
|
|
70
|
+
const isCustomOption = customOptions.includes(option);
|
|
71
|
+
if (isCustomOption) {
|
|
63
72
|
removeCustomOption(option);
|
|
64
73
|
}
|
|
65
74
|
else {
|
|
66
75
|
setSelectedOptions((prevSelectedOptions) => prevSelectedOptions.filter((selectedOption) => selectedOption !== option));
|
|
67
76
|
}
|
|
68
|
-
onToggleSelected === null || onToggleSelected === void 0 ? void 0 : onToggleSelected(option, false,
|
|
77
|
+
onToggleSelected === null || onToggleSelected === void 0 ? void 0 : onToggleSelected(option, false, isCustomOption);
|
|
69
78
|
}, [customOptions, onToggleSelected, removeCustomOption]);
|
|
70
79
|
const toggleOption = (0, react_1.useCallback)((option, event) => {
|
|
71
80
|
if (selectedOptions.includes(option)) {
|
|
@@ -74,15 +83,12 @@ const SelectedOptionsProvider = ({ children, value, }) => {
|
|
|
74
83
|
else {
|
|
75
84
|
addSelectedOption(option);
|
|
76
85
|
}
|
|
77
|
-
|
|
78
|
-
clearInput(event);
|
|
79
|
-
}
|
|
86
|
+
clearInput(event);
|
|
80
87
|
focusInput();
|
|
81
88
|
}, [
|
|
82
89
|
addSelectedOption,
|
|
83
90
|
clearInput,
|
|
84
91
|
focusInput,
|
|
85
|
-
isMultiSelect,
|
|
86
92
|
removeSelectedOption,
|
|
87
93
|
selectedOptions,
|
|
88
94
|
]);
|
|
@@ -26,22 +26,30 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
26
26
|
exports.useCustomOptionsContext = exports.CustomOptionsProvider = void 0;
|
|
27
27
|
const react_1 = __importStar(require("react"));
|
|
28
28
|
const inputContext_1 = require("./Input/inputContext");
|
|
29
|
+
const selectedOptionsContext_1 = require("./SelectedOptions/selectedOptionsContext");
|
|
29
30
|
const CustomOptionsContext = (0, react_1.createContext)({});
|
|
30
31
|
const CustomOptionsProvider = ({ children }) => {
|
|
31
32
|
const [customOptions, setCustomOptions] = (0, react_1.useState)([]);
|
|
32
33
|
const { focusInput } = (0, inputContext_1.useInputContext)();
|
|
34
|
+
const { isMultiSelect } = (0, selectedOptionsContext_1.useSelectedOptionsContext)();
|
|
33
35
|
const removeCustomOption = (0, react_1.useCallback)((option) => {
|
|
34
36
|
setCustomOptions((prevCustomOptions) => prevCustomOptions.filter((o) => o !== option));
|
|
35
37
|
focusInput();
|
|
36
38
|
}, [focusInput, setCustomOptions]);
|
|
37
39
|
const addCustomOption = (0, react_1.useCallback)((option) => {
|
|
38
|
-
|
|
40
|
+
if (isMultiSelect) {
|
|
41
|
+
setCustomOptions((prevOptions) => [...prevOptions, option]);
|
|
42
|
+
}
|
|
43
|
+
else {
|
|
44
|
+
setCustomOptions([option]);
|
|
45
|
+
}
|
|
39
46
|
focusInput();
|
|
40
|
-
}, [focusInput, setCustomOptions]);
|
|
47
|
+
}, [focusInput, isMultiSelect, setCustomOptions]);
|
|
41
48
|
const customOptionsState = {
|
|
42
49
|
customOptions,
|
|
43
50
|
removeCustomOption,
|
|
44
51
|
addCustomOption,
|
|
52
|
+
setCustomOptions,
|
|
45
53
|
};
|
|
46
54
|
return (react_1.default.createElement(CustomOptionsContext.Provider, { value: customOptionsState }, children));
|
|
47
55
|
};
|
package/cjs/list/List.js
CHANGED
|
@@ -46,20 +46,24 @@ const ListItem_1 = require("./ListItem");
|
|
|
46
46
|
exports.ListContext = (0, react_1.createContext)({
|
|
47
47
|
listType: "ul",
|
|
48
48
|
isNested: null,
|
|
49
|
+
size: "medium",
|
|
49
50
|
});
|
|
50
51
|
exports.List = (0, react_1.forwardRef)((_a, ref) => {
|
|
51
|
-
var
|
|
52
|
+
var _b;
|
|
53
|
+
var { children, className, as: ListTag = "ul", title, description, headingTag = "h3", size } = _a, rest = __rest(_a, ["children", "className", "as", "title", "description", "headingTag", "size"]);
|
|
52
54
|
const ariaId = (0, useId_1.useId)();
|
|
53
|
-
const { isNested } = (0, react_1.useContext)(exports.ListContext);
|
|
55
|
+
const { isNested, size: _size } = (0, react_1.useContext)(exports.ListContext);
|
|
56
|
+
const listSize = (_b = size !== null && size !== void 0 ? size : _size) !== null && _b !== void 0 ? _b : "medium";
|
|
54
57
|
return (react_1.default.createElement(exports.ListContext.Provider, { value: {
|
|
55
58
|
listType: ListTag,
|
|
56
59
|
isNested: isNested === null ? false : true,
|
|
60
|
+
size: listSize,
|
|
57
61
|
} },
|
|
58
|
-
react_1.default.createElement("div", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-list", className, {
|
|
62
|
+
react_1.default.createElement("div", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-list", `navds-list--${listSize}`, className, {
|
|
59
63
|
"navds-list--nested": isNested === null ? false : true,
|
|
60
64
|
}) }),
|
|
61
|
-
title && (react_1.default.createElement(typography_1.Heading, { id: `tittel-${ariaId}`, size: "small", as: headingTag }, title)),
|
|
62
|
-
description && (react_1.default.createElement(typography_1.BodyShort, { id: `description-${ariaId}` }, description)),
|
|
65
|
+
title && (react_1.default.createElement(typography_1.Heading, { id: `tittel-${ariaId}`, size: listSize === "medium" ? "small" : "xsmall", as: headingTag }, title)),
|
|
66
|
+
description && (react_1.default.createElement(typography_1.BodyShort, { size: listSize, id: `description-${ariaId}` }, description)),
|
|
63
67
|
react_1.default.createElement(ListTag, { "aria-labelledby": title && `tittel-${ariaId}`, "aria-describedby": description && `description-${ariaId}` }, children))));
|
|
64
68
|
});
|
|
65
69
|
exports.List.Item = ListItem_1.ListItem;
|
package/cjs/list/ListItem.js
CHANGED
|
@@ -44,20 +44,18 @@ const typography_1 = require("../typography");
|
|
|
44
44
|
const List_1 = require("./List");
|
|
45
45
|
exports.ListItem = (0, react_1.forwardRef)((_a, ref) => {
|
|
46
46
|
var { className, children, title, icon } = _a, rest = __rest(_a, ["className", "children", "title", "icon"]);
|
|
47
|
-
const { listType,
|
|
47
|
+
const { listType, size } = (0, react_1.useContext)(List_1.ListContext);
|
|
48
48
|
if (listType === "ol" && icon) {
|
|
49
49
|
console.warn("<List />: Icon prop is not supported for ordered lists. Please remove the icon prop.");
|
|
50
50
|
}
|
|
51
|
-
return (react_1.default.createElement("li", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-list__item", className,
|
|
52
|
-
"navds-list__item--noMargin": isNested,
|
|
53
|
-
}) }),
|
|
51
|
+
return (react_1.default.createElement("li", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-list__item", className) }),
|
|
54
52
|
listType === "ul" && (react_1.default.createElement("div", { className: (0, clsx_1.default)({
|
|
55
53
|
"navds-list__item-marker--icon": icon,
|
|
56
54
|
"navds-list__item-marker--bullet": !icon,
|
|
57
55
|
}) }, icon ? (icon) : (react_1.default.createElement("svg", { width: "6", height: "6", viewBox: "0 0 6 6", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, focusable: false, role: "img" },
|
|
58
56
|
react_1.default.createElement("rect", { width: "6", height: "6", rx: "3", fill: "currentColor" }))))),
|
|
59
|
-
react_1.default.createElement(typography_1.BodyShort, { as: "div", size:
|
|
60
|
-
title && (react_1.default.createElement(typography_1.Label, { as: "p", size:
|
|
57
|
+
react_1.default.createElement(typography_1.BodyShort, { as: "div", size: size, className: "navds-list__item-content" },
|
|
58
|
+
title && (react_1.default.createElement(typography_1.Label, { as: "p", size: size }, title)),
|
|
61
59
|
children)));
|
|
62
60
|
});
|
|
63
61
|
exports.default = exports.ListItem;
|
package/esm/alert/Alert.js
CHANGED
|
@@ -43,6 +43,7 @@ export const Alert = forwardRef((_a, ref) => {
|
|
|
43
43
|
return (React.createElement("div", Object.assign({}, rest, { ref: ref, className: cl(className, "navds-alert", `navds-alert--${variant}`, `navds-alert--${size}`, {
|
|
44
44
|
"navds-alert--full-width": fullWidth,
|
|
45
45
|
"navds-alert--inline": inline,
|
|
46
|
+
"navds-alert--close-button": closeButton,
|
|
46
47
|
}) }),
|
|
47
48
|
React.createElement(Icon, { variant: variant, className: "navds-alert__icon" }),
|
|
48
49
|
React.createElement(BodyLong, { as: "div", size: size, className: "navds-alert__wrapper" }, children),
|
package/esm/alert/Alert.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/alert/Alert.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EACL,yBAAyB,EACzB,uBAAuB,EACvB,+BAA+B,EAC/B,oBAAoB,EACpB,SAAS,GACV,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAuCnC,MAAM,IAAI,GAAG,CAAC,EAAqB,EAAE,EAAE;QAAzB,EAAE,OAAO,OAAY,EAAP,KAAK,cAAnB,WAAqB,CAAF;IAC/B,QAAQ,OAAO,EAAE;QACf,KAAK,OAAO;YACV,OAAO,oBAAC,oBAAoB,kBAAC,KAAK,EAAC,MAAM,IAAK,KAAK,EAAI,CAAC;QAC1D,KAAK,SAAS;YACZ,OAAO,oBAAC,+BAA+B,kBAAC,KAAK,EAAC,UAAU,IAAK,KAAK,EAAI,CAAC;QACzE,KAAK,MAAM;YACT,OAAO,oBAAC,yBAAyB,kBAAC,KAAK,EAAC,aAAa,IAAK,KAAK,EAAI,CAAC;QACtE,KAAK,SAAS;YACZ,OAAO,oBAAC,uBAAuB,kBAAC,KAAK,EAAC,SAAS,IAAK,KAAK,EAAI,CAAC;QAChE;YACE,OAAO,IAAI,CAAC;KACf;AACH,CAAC,CAAC;AAMF;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EAUC,EACD,GAAG,EACH,EAAE;QAZF,EACE,QAAQ,EACR,SAAS,EACT,OAAO,EACP,IAAI,GAAG,QAAQ,EACf,SAAS,GAAG,KAAK,EACjB,MAAM,GAAG,KAAK,EACd,WAAW,GAAG,KAAK,EACnB,OAAO,OAER,EADI,IAAI,cATT,6FAUC,CADQ;IAIT,OAAO,CACL,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,SAAS,EACT,aAAa,EACb,gBAAgB,OAAO,EAAE,EACzB,gBAAgB,IAAI,EAAE,EACtB;YACE,yBAAyB,EAAE,SAAS;YACpC,qBAAqB,EAAE,MAAM;
|
|
1
|
+
{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/alert/Alert.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EACL,yBAAyB,EACzB,uBAAuB,EACvB,+BAA+B,EAC/B,oBAAoB,EACpB,SAAS,GACV,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAuCnC,MAAM,IAAI,GAAG,CAAC,EAAqB,EAAE,EAAE;QAAzB,EAAE,OAAO,OAAY,EAAP,KAAK,cAAnB,WAAqB,CAAF;IAC/B,QAAQ,OAAO,EAAE;QACf,KAAK,OAAO;YACV,OAAO,oBAAC,oBAAoB,kBAAC,KAAK,EAAC,MAAM,IAAK,KAAK,EAAI,CAAC;QAC1D,KAAK,SAAS;YACZ,OAAO,oBAAC,+BAA+B,kBAAC,KAAK,EAAC,UAAU,IAAK,KAAK,EAAI,CAAC;QACzE,KAAK,MAAM;YACT,OAAO,oBAAC,yBAAyB,kBAAC,KAAK,EAAC,aAAa,IAAK,KAAK,EAAI,CAAC;QACtE,KAAK,SAAS;YACZ,OAAO,oBAAC,uBAAuB,kBAAC,KAAK,EAAC,SAAS,IAAK,KAAK,EAAI,CAAC;QAChE;YACE,OAAO,IAAI,CAAC;KACf;AACH,CAAC,CAAC;AAMF;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EAUC,EACD,GAAG,EACH,EAAE;QAZF,EACE,QAAQ,EACR,SAAS,EACT,OAAO,EACP,IAAI,GAAG,QAAQ,EACf,SAAS,GAAG,KAAK,EACjB,MAAM,GAAG,KAAK,EACd,WAAW,GAAG,KAAK,EACnB,OAAO,OAER,EADI,IAAI,cATT,6FAUC,CADQ;IAIT,OAAO,CACL,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,SAAS,EACT,aAAa,EACb,gBAAgB,OAAO,EAAE,EACzB,gBAAgB,IAAI,EAAE,EACtB;YACE,yBAAyB,EAAE,SAAS;YACpC,qBAAqB,EAAE,MAAM;YAC7B,2BAA2B,EAAE,WAAW;SACzC,CACF;QAED,oBAAC,IAAI,IAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAC,mBAAmB,GAAG;QACxD,oBAAC,QAAQ,IAAC,EAAE,EAAC,KAAK,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,sBAAsB,IAC5D,QAAQ,CACA;QACV,WAAW,IAAI,CAAC,MAAM,IAAI,CACzB,6BAAK,SAAS,EAAC,6BAA6B;YAC1C,oBAAC,MAAM,IACL,SAAS,EAAC,qBAAqB,EAC/B,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,kBAAkB,EAC1B,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,oBAAC,SAAS,IAAC,KAAK,EAAC,YAAY,GAAG,GACtC,CACE,CACP,CACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
|
@@ -51,6 +51,11 @@ export interface CopyButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonEle
|
|
|
51
51
|
* @default 'Kopiert'
|
|
52
52
|
*/
|
|
53
53
|
activeTitle?: string;
|
|
54
|
+
/**
|
|
55
|
+
* Icon position in Button
|
|
56
|
+
* @default "left"
|
|
57
|
+
*/
|
|
58
|
+
iconPosition?: "left" | "right";
|
|
54
59
|
}
|
|
55
60
|
/**
|
|
56
61
|
* A button component that copies text to the clipboard when clicked.
|
|
@@ -26,7 +26,7 @@ import Label from "../typography/Label";
|
|
|
26
26
|
* ```
|
|
27
27
|
*/
|
|
28
28
|
export const CopyButton = forwardRef((_a, ref) => {
|
|
29
|
-
var { className, copyText, text, activeText = "Kopiert!", variant = "neutral", size = "medium", onActiveChange, icon, activeIcon, activeDuration = 2000, title = "Kopier", activeTitle = "Kopiert" } = _a, rest = __rest(_a, ["className", "copyText", "text", "activeText", "variant", "size", "onActiveChange", "icon", "activeIcon", "activeDuration", "title", "activeTitle"]);
|
|
29
|
+
var { className, copyText, text, activeText = "Kopiert!", variant = "neutral", size = "medium", onActiveChange, icon, activeIcon, activeDuration = 2000, title = "Kopier", activeTitle = "Kopiert", iconPosition = "left" } = _a, rest = __rest(_a, ["className", "copyText", "text", "activeText", "variant", "size", "onActiveChange", "icon", "activeIcon", "activeDuration", "title", "activeTitle", "iconPosition"]);
|
|
30
30
|
const [active, setActive] = useState(false);
|
|
31
31
|
const timeoutRef = useRef();
|
|
32
32
|
useEffect(() => {
|
|
@@ -46,14 +46,18 @@ export const CopyButton = forwardRef((_a, ref) => {
|
|
|
46
46
|
onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(false);
|
|
47
47
|
}, activeDuration);
|
|
48
48
|
};
|
|
49
|
+
const CopyIcon = () => {
|
|
50
|
+
return active ? (React.createElement("span", { className: "navds-copybutton__icon" }, activeIcon !== null && activeIcon !== void 0 ? activeIcon : (React.createElement(CheckmarkIcon, { "aria-hidden": !!text, title: text ? undefined : activeTitle })))) : (React.createElement("span", { className: "navds-copybutton__icon" }, icon !== null && icon !== void 0 ? icon : (React.createElement(FilesIcon, { "aria-hidden": !!text, title: text ? undefined : title }))));
|
|
51
|
+
};
|
|
49
52
|
return (React.createElement("button", Object.assign({ ref: ref, type: "button" }, rest, { "aria-live": "polite", className: cl("navds-copybutton", className, `navds-copybutton--${size}`, `navds-copybutton--${variant}`, {
|
|
50
53
|
"navds-copybutton--icon-only": !text,
|
|
51
54
|
"navds-copybutton--active": active,
|
|
52
55
|
}), onClick: handleClick }),
|
|
53
56
|
React.createElement("span", { className: "navds-copybutton__content" },
|
|
54
|
-
|
|
57
|
+
iconPosition === "left" && React.createElement(CopyIcon, null),
|
|
55
58
|
text &&
|
|
56
|
-
(active ? (React.createElement(Label, { as: "span", size: size === "medium" ? "medium" : "small", "aria-live": "polite" }, activeText)) : (React.createElement(Label, { as: "span", size: size === "medium" ? "medium" : "small", "aria-live": "polite" }, text)))
|
|
59
|
+
(active ? (React.createElement(Label, { as: "span", size: size === "medium" ? "medium" : "small", "aria-live": "polite" }, activeText)) : (React.createElement(Label, { as: "span", size: size === "medium" ? "medium" : "small", "aria-live": "polite" }, text))),
|
|
60
|
+
iconPosition === "right" && React.createElement(CopyIcon, null))));
|
|
57
61
|
});
|
|
58
62
|
export default CopyButton;
|
|
59
63
|
//# sourceMappingURL=CopyButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CopyButton.js","sourceRoot":"","sources":["../../src/copybutton/CopyButton.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAEZ,UAAU,EACV,SAAS,EACT,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,IAAI,MAAM,cAAc,CAAC;AAChC,OAAO,KAAK,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"CopyButton.js","sourceRoot":"","sources":["../../src/copybutton/CopyButton.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAEZ,UAAU,EACV,SAAS,EACT,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,IAAI,MAAM,cAAc,CAAC;AAChC,OAAO,KAAK,MAAM,qBAAqB,CAAC;AA8DxC;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EAeC,EACD,GAAG,EACH,EAAE;QAjBF,EACE,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,UAAU,GAAG,UAAU,EACvB,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,QAAQ,EACf,cAAc,EACd,IAAI,EACJ,UAAU,EACV,cAAc,GAAG,IAAI,EACrB,KAAK,GAAG,QAAQ,EAChB,WAAW,GAAG,SAAS,EACvB,YAAY,GAAG,MAAM,OAEtB,EADI,IAAI,cAdT,oKAeC,CADQ;IAIT,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,UAAU,GAAG,MAAM,EAAU,CAAC;IAEpC,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,OAAO,IAAI,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QACzD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,WAAW,GAAG,CAClB,KAAsD,EACtD,EAAE;;QACF,UAAU,CAAC,OAAO,IAAI,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QACvD,IAAI,CAAC,QAAQ,CAAC,CAAC;QACf,SAAS,CAAC,IAAI,CAAC,CAAC;QAChB,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAG,IAAI,CAAC,CAAC;QACvB,MAAA,IAAI,CAAC,OAAO,qDAAG,KAAK,CAAC,CAAC;QAEtB,UAAU,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YAC1C,SAAS,CAAC,KAAK,CAAC,CAAC;YACjB,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAG,KAAK,CAAC,CAAC;QAC1B,CAAC,EAAE,cAAc,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,OAAO,MAAM,CAAC,CAAC,CAAC,CACd,8BAAM,SAAS,EAAC,wBAAwB,IACrC,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,CACb,oBAAC,aAAa,mBACC,CAAC,CAAC,IAAI,EACnB,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,GACrC,CACH,CACI,CACR,CAAC,CAAC,CAAC,CACF,8BAAM,SAAS,EAAC,wBAAwB,IACrC,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,CACP,oBAAC,SAAS,mBAAc,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,GAAI,CACpE,CACI,CACR,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,8CACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,IACT,IAAI,iBACE,QAAQ,EAClB,SAAS,EAAE,EAAE,CACX,kBAAkB,EAClB,SAAS,EACT,qBAAqB,IAAI,EAAE,EAC3B,qBAAqB,OAAO,EAAE,EAC9B;YACE,6BAA6B,EAAE,CAAC,IAAI;YACpC,0BAA0B,EAAE,MAAM;SACnC,CACF,EACD,OAAO,EAAE,WAAW;QAEpB,8BAAM,SAAS,EAAC,2BAA2B;YACxC,YAAY,KAAK,MAAM,IAAI,oBAAC,QAAQ,OAAG;YAEvC,IAAI;gBACH,CAAC,MAAM,CAAC,CAAC,CAAC,CACR,oBAAC,KAAK,IACJ,EAAE,EAAC,MAAM,EACT,IAAI,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,eAClC,QAAQ,IAEjB,UAAU,CACL,CACT,CAAC,CAAC,CAAC,CACF,oBAAC,KAAK,IACJ,EAAE,EAAC,MAAM,EACT,IAAI,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,eAClC,QAAQ,IAEjB,IAAI,CACC,CACT,CAAC;YACH,YAAY,KAAK,OAAO,IAAI,oBAAC,QAAQ,OAAG,CACpC,CACA,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -33,6 +33,9 @@ export const Checkbox = forwardRef((props, ref) => {
|
|
|
33
33
|
}
|
|
34
34
|
} })),
|
|
35
35
|
React.createElement("label", { htmlFor: inputProps.id, className: "navds-checkbox__label" },
|
|
36
|
+
React.createElement("span", { className: "navds-checkbox__icon" },
|
|
37
|
+
React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "13", height: "10", viewBox: "0 0 13 10", fill: "none", focusable: false, role: "img", "aria-hidden": true },
|
|
38
|
+
React.createElement("path", { d: "M4.03524 6.41478L10.4752 0.404669C11.0792 -0.160351 12.029 -0.130672 12.5955 0.47478C13.162 1.08027 13.1296 2.03007 12.5245 2.59621L5.02111 9.59934C4.74099 9.85904 4.37559 10 4.00025 10C3.60651 10 3.22717 9.84621 2.93914 9.56111L0.439143 7.06111C-0.146381 6.47558 -0.146381 5.52542 0.439143 4.93989C1.02467 4.35437 1.97483 4.35437 2.56036 4.93989L4.03524 6.41478Z", fill: "currentColor" }))),
|
|
36
39
|
React.createElement("span", { className: cl("navds-checkbox__content", {
|
|
37
40
|
"navds-sr-only": props.hideLabel,
|
|
38
41
|
}) },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/form/checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAuB,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAElC,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAqC/C,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACb,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;IAE5E,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CACX,KAAK,CAAC,SAAS,EACf,gBAAgB,EAChB,mBAAmB,IAAI,EAAE,EACzB;YACE,uBAAuB,EAAE,QAAQ;YACjC,0BAA0B,EAAE,UAAU,CAAC,QAAQ;YAC/C,0BAA0B,EAAE,QAAQ;SACrC,CACF;QAED,+CACM,IAAI,CAAC,KAAK,EAAE;YACd,UAAU;YACV,MAAM;YACN,OAAO;YACP,aAAa;YACb,WAAW;YACX,eAAe;YACf,SAAS;YACT,UAAU;SACX,CAAC,EACE,UAAU,IACd,IAAI,EAAC,UAAU,EACf,SAAS,EAAC,uBAAuB,kBACnB,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,EAChE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE;;gBACV,IAAI,EAAE,EAAE;oBACN,EAAE,CAAC,aAAa,GAAG,MAAA,KAAK,CAAC,aAAa,mCAAI,KAAK,CAAC;iBACjD;gBAED,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;oBAC7B,GAAG,CAAC,EAAE,CAAC,CAAC;iBACT;qBAAM,IAAI,GAAG,IAAI,IAAI,EAAE;oBACtB,GAAG,CAAC,OAAO,GAAG,EAAE,CAAC;iBAClB;YACH,CAAC,IACD;QACF,+BAAO,OAAO,EAAE,UAAU,CAAC,EAAE,EAAE,SAAS,EAAC,uBAAuB;YAC9D,8BACE,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE;oBACvC,eAAe,EAAE,KAAK,CAAC,SAAS;iBACjC,CAAC;gBAEF,oBAAC,SAAS,IACR,EAAE,EAAC,MAAM,EACT,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,4BAA4B;oBAErC,CAAC,MAAM,IAAI,CACV,oBAAC,YAAY,IAAC,QAAQ,EAAE,QAAQ,EAAE,cAAc,EAAE,KAAK,GAAI,CAC5D;oBACA,KAAK,CAAC,QAAQ,CACL;gBACX,KAAK,CAAC,WAAW,IAAI,CACpB,oBAAC,SAAS,IACR,EAAE,EAAC,MAAM,EACT,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,8DAA8D,IAEvE,KAAK,CAAC,WAAW,CACR,CACb,CACI,CACD,CACJ,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/form/checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAuB,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAElC,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAqC/C,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACb,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;IAE5E,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CACX,KAAK,CAAC,SAAS,EACf,gBAAgB,EAChB,mBAAmB,IAAI,EAAE,EACzB;YACE,uBAAuB,EAAE,QAAQ;YACjC,0BAA0B,EAAE,UAAU,CAAC,QAAQ;YAC/C,0BAA0B,EAAE,QAAQ;SACrC,CACF;QAED,+CACM,IAAI,CAAC,KAAK,EAAE;YACd,UAAU;YACV,MAAM;YACN,OAAO;YACP,aAAa;YACb,WAAW;YACX,eAAe;YACf,SAAS;YACT,UAAU;SACX,CAAC,EACE,UAAU,IACd,IAAI,EAAC,UAAU,EACf,SAAS,EAAC,uBAAuB,kBACnB,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,EAChE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE;;gBACV,IAAI,EAAE,EAAE;oBACN,EAAE,CAAC,aAAa,GAAG,MAAA,KAAK,CAAC,aAAa,mCAAI,KAAK,CAAC;iBACjD;gBAED,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;oBAC7B,GAAG,CAAC,EAAE,CAAC,CAAC;iBACT;qBAAM,IAAI,GAAG,IAAI,IAAI,EAAE;oBACtB,GAAG,CAAC,OAAO,GAAG,EAAE,CAAC;iBAClB;YACH,CAAC,IACD;QACF,+BAAO,OAAO,EAAE,UAAU,CAAC,EAAE,EAAE,SAAS,EAAC,uBAAuB;YAC9D,8BAAM,SAAS,EAAC,sBAAsB;gBACpC,6BACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,KAAK,EAChB,IAAI,EAAC,KAAK;oBAGV,8BACE,CAAC,EAAC,6WAA6W,EAC/W,IAAI,EAAC,cAAc,GACnB,CACE,CACD;YACP,8BACE,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE;oBACvC,eAAe,EAAE,KAAK,CAAC,SAAS;iBACjC,CAAC;gBAEF,oBAAC,SAAS,IACR,EAAE,EAAC,MAAM,EACT,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,4BAA4B;oBAErC,CAAC,MAAM,IAAI,CACV,oBAAC,YAAY,IAAC,QAAQ,EAAE,QAAQ,EAAE,cAAc,EAAE,KAAK,GAAI,CAC5D;oBACA,KAAK,CAAC,QAAQ,CACL;gBACX,KAAK,CAAC,WAAW,IAAI,CACpB,oBAAC,SAAS,IACR,EAAE,EAAC,MAAM,EACT,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,8DAA8D,IAEvE,KAAK,CAAC,WAAW,CACR,CACb,CACI,CACD,CACJ,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|