@navikt/ds-react 4.11.2 → 4.12.1
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/ComboboxWrapper.js +3 -3
- 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/ComboboxWrapper.js +3 -3
- package/esm/form/combobox/ComboboxWrapper.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/ComboboxWrapper.tsx +2 -3
- 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
|
@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
11
11
|
};
|
|
12
12
|
import cl from "clsx";
|
|
13
13
|
import React, { forwardRef, useMemo, useRef } from "react";
|
|
14
|
-
import { BodyShort, Label, mergeRefs } from "../..";
|
|
14
|
+
import { BodyShort, ErrorMessage, Label, mergeRefs } from "../..";
|
|
15
15
|
import ClearButton from "./ClearButton";
|
|
16
16
|
import FilteredOptions from "./FilteredOptions/FilteredOptions";
|
|
17
17
|
import { useFilteredOptionsContext } from "./FilteredOptions/filteredOptionsContext";
|
|
@@ -26,7 +26,7 @@ export const Combobox = forwardRef((props, ref) => {
|
|
|
26
26
|
const toggleListButtonRef = useRef(null);
|
|
27
27
|
const { currentOption, toggleIsListOpen } = useFilteredOptionsContext();
|
|
28
28
|
const { selectedOptions } = useSelectedOptionsContext();
|
|
29
|
-
const { clearInput, focusInput, hasError, inputDescriptionId, inputProps, inputRef, value, size = "medium", } = useInputContext();
|
|
29
|
+
const { clearInput, error, errorId, focusInput, hasError, inputDescriptionId, inputProps, inputRef, value, showErrorMsg, size = "medium", } = useInputContext();
|
|
30
30
|
const mergedInputRef = useMemo(() => mergeRefs([inputRef, ref]), [inputRef, ref]);
|
|
31
31
|
return (React.createElement(ComboboxWrapper, { className: className, hasError: hasError, inputProps: inputProps, inputSize: size, toggleIsListOpen: toggleIsListOpen, toggleListButtonRef: toggleListButtonRef },
|
|
32
32
|
React.createElement(Label, { htmlFor: inputProps.id, size: size, className: cl("navds-form-field__label", {
|
|
@@ -44,7 +44,8 @@ export const Combobox = forwardRef((props, ref) => {
|
|
|
44
44
|
React.createElement("div", null,
|
|
45
45
|
value && clearButton && (React.createElement(ClearButton, { handleClear: clearInput, clearButtonLabel: clearButtonLabel, tabIndex: -1 })),
|
|
46
46
|
toggleListButton && (React.createElement(ToggleListButton, { toggleListButtonLabel: toggleListButtonLabel, ref: toggleListButtonRef })))),
|
|
47
|
-
React.createElement(FilteredOptions, null))
|
|
47
|
+
React.createElement(FilteredOptions, null)),
|
|
48
|
+
React.createElement("div", { className: "navds-form-field__error", id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && React.createElement(ErrorMessage, { size: size }, error))));
|
|
48
49
|
});
|
|
49
50
|
export default Combobox;
|
|
50
51
|
//# sourceMappingURL=Combobox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.js","sourceRoot":"","sources":["../../../src/form/combobox/Combobox.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Combobox.js","sourceRoot":"","sources":["../../../src/form/combobox/Combobox.tsx"],"names":[],"mappings":"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"}
|
|
@@ -18,9 +18,9 @@ const ComboboxWrapper = ({ children, className, hasError, inputProps, inputSize,
|
|
|
18
18
|
setHasFocusWithin(false);
|
|
19
19
|
}
|
|
20
20
|
}
|
|
21
|
-
return (React.createElement("div", { ref: wrapperRef, className: cl(className, "navds-form-field", `navds-form-field--${inputSize}`,
|
|
22
|
-
"navds-
|
|
23
|
-
"navds-
|
|
21
|
+
return (React.createElement("div", { ref: wrapperRef, className: cl(className, "navds-form-field", `navds-form-field--${inputSize}`, {
|
|
22
|
+
"navds-combobox--error": hasError,
|
|
23
|
+
"navds-combobox--disabled": !!inputProps.disabled,
|
|
24
24
|
"navds-combobox--focused": hasFocusWithin,
|
|
25
25
|
}), onFocus: onFocusInsideWrapper, onBlur: onBlurWrapper, tabIndex: -1 }, children));
|
|
26
26
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxWrapper.js","sourceRoot":"","sources":["../../../src/form/combobox/ComboboxWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAchD,MAAM,eAAe,GAAG,CAAC,EACvB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,mBAAmB,GACE,EAAE,EAAE;IACzB,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACvD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5D,SAAS,oBAAoB,CAAC,CAAC;;QAC7B,IACE,CAAC,CAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAA;YAC9C,CAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,OAAO,MAAK,CAAC,CAAC,MAAM,EACzC;YACA,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACvB,iBAAiB,CAAC,IAAI,CAAC,CAAC;SACzB;IACH,CAAC;IAED,SAAS,aAAa,CAAC,CAAC;;QACtB,IAAI,CAAC,CAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAA,EAAE;YAClD,gBAAgB,CAAC,KAAK,CAAC,CAAC;YACxB,iBAAiB,CAAC,KAAK,CAAC,CAAC;SAC1B;IACH,CAAC;IAED,OAAO,CACL,6BACE,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,EAAE,CACX,SAAS,EACT,kBAAkB,EAClB,qBAAqB,SAAS,EAAE,EAChC
|
|
1
|
+
{"version":3,"file":"ComboboxWrapper.js","sourceRoot":"","sources":["../../../src/form/combobox/ComboboxWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAchD,MAAM,eAAe,GAAG,CAAC,EACvB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,mBAAmB,GACE,EAAE,EAAE;IACzB,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACvD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5D,SAAS,oBAAoB,CAAC,CAAC;;QAC7B,IACE,CAAC,CAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAA;YAC9C,CAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,OAAO,MAAK,CAAC,CAAC,MAAM,EACzC;YACA,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACvB,iBAAiB,CAAC,IAAI,CAAC,CAAC;SACzB;IACH,CAAC;IAED,SAAS,aAAa,CAAC,CAAC;;QACtB,IAAI,CAAC,CAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAA,EAAE;YAClD,gBAAgB,CAAC,KAAK,CAAC,CAAC;YACxB,iBAAiB,CAAC,KAAK,CAAC,CAAC;SAC1B;IACH,CAAC;IAED,OAAO,CACL,6BACE,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,EAAE,CACX,SAAS,EACT,kBAAkB,EAClB,qBAAqB,SAAS,EAAE,EAChC;YACE,uBAAuB,EAAE,QAAQ;YACjC,0BAA0B,EAAE,CAAC,CAAC,UAAU,CAAC,QAAQ;YACjD,yBAAyB,EAAE,cAAc;SAC1C,CACF,EACD,OAAO,EAAE,oBAAoB,EAC7B,MAAM,EAAE,aAAa,EACrB,QAAQ,EAAE,CAAC,CAAC,IAEX,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC"}
|
|
@@ -6,7 +6,7 @@ import { useFilteredOptionsContext } from "./filteredOptionsContext";
|
|
|
6
6
|
import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
|
|
7
7
|
import { useInputContext } from "../Input/inputContext";
|
|
8
8
|
const FilteredOptions = () => {
|
|
9
|
-
const {
|
|
9
|
+
const { inputProps: { id }, size, value, } = useInputContext();
|
|
10
10
|
const { allowNewValues, isLoading, isListOpen, filteredOptions, filteredOptionsIndex, filteredOptionsRef, isValueNew, toggleIsListOpen, } = useFilteredOptionsContext();
|
|
11
11
|
const { isMultiSelect, selectedOptions, toggleOption } = useSelectedOptionsContext();
|
|
12
12
|
return (React.createElement("ul", { ref: filteredOptionsRef, className: cl("navds-combobox__list", {
|
|
@@ -16,7 +16,8 @@ const FilteredOptions = () => {
|
|
|
16
16
|
React.createElement(Loader, { "aria-label": "S\u00F8ker..." }))),
|
|
17
17
|
isValueNew && allowNewValues && (React.createElement("li", { tabIndex: -1, onPointerUp: (event) => {
|
|
18
18
|
toggleOption(value, event);
|
|
19
|
-
|
|
19
|
+
if (!isMultiSelect && !selectedOptions.includes(value))
|
|
20
|
+
toggleIsListOpen(false);
|
|
20
21
|
}, id: `${id}-combobox-new-option`, className: cl("navds-combobox__list-item__new-option", {
|
|
21
22
|
"navds-combobox__list-item__new-option--focus": filteredOptionsIndex === -1,
|
|
22
23
|
}), role: "option", "aria-selected": false },
|
|
@@ -34,10 +35,8 @@ const FilteredOptions = () => {
|
|
|
34
35
|
"navds-combobox__list-item--selected": selectedOptions.includes(option),
|
|
35
36
|
}), id: `${id}-option-${option.replace(" ", "-")}`, key: option, tabIndex: -1, onPointerUp: (event) => {
|
|
36
37
|
toggleOption(option, event);
|
|
37
|
-
|
|
38
|
-
if (!isMultiSelect) {
|
|
38
|
+
if (!isMultiSelect && !selectedOptions.includes(option))
|
|
39
39
|
toggleIsListOpen(false);
|
|
40
|
-
}
|
|
41
40
|
}, role: "option", "aria-selected": selectedOptions.includes(option) },
|
|
42
41
|
React.createElement(BodyShort, { size: size }, option),
|
|
43
42
|
selectedOptions.includes(option) && React.createElement(CheckmarkIcon, null))))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilteredOptions.js","sourceRoot":"","sources":["../../../../src/form/combobox/FilteredOptions/FilteredOptions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AACrE,OAAO,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAC;AACtF,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAExD,MAAM,eAAe,GAAG,GAAG,EAAE;IAC3B,MAAM,EACJ,UAAU,
|
|
1
|
+
{"version":3,"file":"FilteredOptions.js","sourceRoot":"","sources":["../../../../src/form/combobox/FilteredOptions/FilteredOptions.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React, { useState, useEffect, useMemo, createContext, useContext, useCallback, useRef, useLayoutEffect, } from "react";
|
|
2
|
+
import cl from "clsx";
|
|
2
3
|
import { useCustomOptionsContext } from "../customOptionsContext";
|
|
3
4
|
import { useInputContext } from "../Input/inputContext";
|
|
4
5
|
import usePrevious from "../../../util/usePrevious";
|
|
@@ -10,7 +11,7 @@ const FilteredOptionsContext = createContext({});
|
|
|
10
11
|
export const FilteredOptionsProvider = ({ children, value: props }) => {
|
|
11
12
|
const { allowNewValues, filteredOptions: externalFilteredOptions, isListOpen: isExternalListOpen, isLoading, options, } = props;
|
|
12
13
|
const filteredOptionsRef = useRef(null);
|
|
13
|
-
const { inputProps: { id }, value, searchTerm, setValue, setSearchTerm, shouldAutocomplete, } = useInputContext();
|
|
14
|
+
const { inputProps: { "aria-describedby": partialAriaDescribedBy, id }, value, searchTerm, setValue, setSearchTerm, shouldAutocomplete, } = useInputContext();
|
|
14
15
|
const [filteredOptionsIndex, setFilteredOptionsIndex] = useState(null);
|
|
15
16
|
const [isInternalListOpen, setInternalListOpen] = useState(false);
|
|
16
17
|
const { customOptions } = useCustomOptionsContext();
|
|
@@ -52,21 +53,28 @@ export const FilteredOptionsProvider = ({ children, value: props }) => {
|
|
|
52
53
|
return isValueNew && allowNewValues ? -1 : 0;
|
|
53
54
|
}, [allowNewValues, isValueNew]);
|
|
54
55
|
const ariaDescribedBy = useMemo(() => {
|
|
56
|
+
let activeOption;
|
|
55
57
|
if (!isLoading && filteredOptions.length === 0) {
|
|
56
|
-
|
|
58
|
+
activeOption = `${id}-no-hits`;
|
|
57
59
|
}
|
|
58
60
|
else if ((value && value !== "") || isLoading) {
|
|
59
61
|
if (shouldAutocomplete && filteredOptions[0]) {
|
|
60
|
-
|
|
62
|
+
activeOption = `${id}-option-${filteredOptions[0].replace(" ", "-")}`;
|
|
61
63
|
}
|
|
62
|
-
else if (isLoading) {
|
|
63
|
-
|
|
64
|
+
else if (isListOpen && isLoading) {
|
|
65
|
+
activeOption = `${id}-is-loading`;
|
|
64
66
|
}
|
|
65
67
|
}
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
68
|
+
return cl(activeOption, partialAriaDescribedBy) || undefined;
|
|
69
|
+
}, [
|
|
70
|
+
isListOpen,
|
|
71
|
+
isLoading,
|
|
72
|
+
value,
|
|
73
|
+
partialAriaDescribedBy,
|
|
74
|
+
shouldAutocomplete,
|
|
75
|
+
filteredOptions,
|
|
76
|
+
id,
|
|
77
|
+
]);
|
|
70
78
|
const currentOption = useMemo(() => {
|
|
71
79
|
if (filteredOptionsIndex == null) {
|
|
72
80
|
return null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filteredOptionsContext.js","sourceRoot":"","sources":["../../../../src/form/combobox/FilteredOptions/filteredOptionsContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,QAAQ,EACR,SAAS,EACT,OAAO,EACP,aAAa,EACb,UAAU,EACV,WAAW,EACX,MAAM,EACN,eAAe,GAChB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,WAAW,MAAM,2BAA2B,CAAC;AAEpD,MAAM,aAAa,GAAG,CAAC,IAAY,EAAU,EAAE,CAC7C,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;AAEjE,MAAM,YAAY,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,CACnC,aAAa,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,CAAC,CAAC,CAAC;AAE7D,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,CACpC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,KAAK,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC;AAE7E,MAAM,yBAAyB,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,CAChD,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;AAsB5D,MAAM,sBAAsB,GAAG,aAAa,CAC1C,EAAgC,CACjC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;IACpE,MAAM,EACJ,cAAc,EACd,eAAe,EAAE,uBAAuB,EACxC,UAAU,EAAE,kBAAkB,EAC9B,SAAS,EACT,OAAO,GACR,GAAG,KAAK,CAAC;IACV,MAAM,kBAAkB,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IACjE,MAAM,EACJ,UAAU,EAAE,EAAE,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"filteredOptionsContext.js","sourceRoot":"","sources":["../../../../src/form/combobox/FilteredOptions/filteredOptionsContext.tsx"],"names":[],"mappings":"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"}
|
|
@@ -18,14 +18,15 @@ import { useInputContext } from "./inputContext";
|
|
|
18
18
|
const Input = forwardRef((_a, ref) => {
|
|
19
19
|
var { inputClassName, error, errorId } = _a, rest = __rest(_a, ["inputClassName", "error", "errorId"]);
|
|
20
20
|
const { clearInput, inputProps, onChange, size, value } = useInputContext();
|
|
21
|
-
const { selectedOptions, removeSelectedOption, toggleOption } = useSelectedOptionsContext();
|
|
21
|
+
const { selectedOptions, removeSelectedOption, toggleOption, isMultiSelect, } = useSelectedOptionsContext();
|
|
22
22
|
const { activeDecendantId, allowNewValues, currentOption, filteredOptions, toggleIsListOpen, isListOpen, filteredOptionsIndex, moveFocusUp, moveFocusDown, ariaDescribedBy, moveFocusToInput, moveFocusToEnd, setFilteredOptionsIndex, shouldAutocomplete, } = useFilteredOptionsContext();
|
|
23
23
|
const onEnter = useCallback((event) => {
|
|
24
24
|
if (currentOption) {
|
|
25
25
|
event.preventDefault();
|
|
26
26
|
// Selecting a value from the dropdown / FilteredOptions
|
|
27
27
|
toggleOption(currentOption, event);
|
|
28
|
-
|
|
28
|
+
if (!isMultiSelect && !selectedOptions.includes(currentOption))
|
|
29
|
+
toggleIsListOpen(false);
|
|
29
30
|
}
|
|
30
31
|
else if (shouldAutocomplete && selectedOptions.includes(value)) {
|
|
31
32
|
event.preventDefault();
|
|
@@ -36,14 +37,17 @@ const Input = forwardRef((_a, ref) => {
|
|
|
36
37
|
event.preventDefault();
|
|
37
38
|
// Autocompleting or adding a new value
|
|
38
39
|
toggleOption(value, event);
|
|
39
|
-
|
|
40
|
+
if (!isMultiSelect && !selectedOptions.includes(value))
|
|
41
|
+
toggleIsListOpen(false);
|
|
40
42
|
}
|
|
41
43
|
}, [
|
|
42
44
|
allowNewValues,
|
|
43
45
|
clearInput,
|
|
44
46
|
currentOption,
|
|
47
|
+
isMultiSelect,
|
|
45
48
|
selectedOptions,
|
|
46
49
|
shouldAutocomplete,
|
|
50
|
+
toggleIsListOpen,
|
|
47
51
|
toggleOption,
|
|
48
52
|
value,
|
|
49
53
|
]);
|
|
@@ -113,7 +117,7 @@ const Input = forwardRef((_a, ref) => {
|
|
|
113
117
|
const onBlur = () => {
|
|
114
118
|
setFilteredOptionsIndex(-1);
|
|
115
119
|
};
|
|
116
|
-
return (React.createElement("input", Object.assign({}, rest, 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: cl(inputClassName, "navds-combobox__input", "navds-body-short", `navds-body-${size}`) })));
|
|
120
|
+
return (React.createElement("input", Object.assign({}, rest, 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: cl(inputClassName, "navds-combobox__input", "navds-body-short", `navds-body-${size}`) })));
|
|
117
121
|
});
|
|
118
122
|
export default Input;
|
|
119
123
|
//# sourceMappingURL=Input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/form/combobox/Input/Input.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,KAAK,EAAE,EACZ,WAAW,EACX,UAAU,GAGX,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAC;AACtF,OAAO,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAC;AACtF,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAWjD,MAAM,KAAK,GAAG,UAAU,CACtB,CAAC,EAA2C,EAAE,GAAG,EAAE,EAAE;QAApD,EAAE,cAAc,EAAE,KAAK,EAAE,OAAO,OAAW,EAAN,IAAI,cAAzC,sCAA2C,CAAF;IACxC,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,eAAe,EAAE,CAAC;IAC5E,MAAM,
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/form/combobox/Input/Input.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,6 +2,7 @@ import React, { ChangeEventHandler } from "react";
|
|
|
2
2
|
import { FormFieldType } from "../../useFormField";
|
|
3
3
|
interface InputContextType extends FormFieldType {
|
|
4
4
|
clearInput: (event: React.PointerEvent | React.KeyboardEvent) => void;
|
|
5
|
+
error?: string;
|
|
5
6
|
focusInput: () => void;
|
|
6
7
|
inputRef: React.RefObject<HTMLInputElement>;
|
|
7
8
|
value: string;
|
|
@@ -26,9 +26,10 @@ export const InputContextProvider = ({ children, value: props }) => {
|
|
|
26
26
|
}, [setInternalValue]);
|
|
27
27
|
const clearInput = useCallback((event) => {
|
|
28
28
|
onClear === null || onClear === void 0 ? void 0 : onClear(event);
|
|
29
|
+
externalOnChange === null || externalOnChange === void 0 ? void 0 : externalOnChange(null, "");
|
|
29
30
|
setValue("");
|
|
30
31
|
setSearchTerm("");
|
|
31
|
-
}, [
|
|
32
|
+
}, [externalOnChange, onClear, setValue]);
|
|
32
33
|
const focusInput = useCallback(() => {
|
|
33
34
|
var _a, _b;
|
|
34
35
|
(_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
@@ -40,6 +41,7 @@ export const InputContextProvider = ({ children, value: props }) => {
|
|
|
40
41
|
}
|
|
41
42
|
}, [value, searchTerm, shouldAutocomplete]);
|
|
42
43
|
return (React.createElement(InputContext.Provider, { value: Object.assign(Object.assign({}, formFieldProps), { clearInput,
|
|
44
|
+
error,
|
|
43
45
|
focusInput,
|
|
44
46
|
inputRef,
|
|
45
47
|
value,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"inputContext.js","sourceRoot":"","sources":["../../../../src/form/combobox/Input/inputContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAGZ,aAAa,EACb,WAAW,EACX,UAAU,EACV,eAAe,EACf,OAAO,EACP,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAiB,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"inputContext.js","sourceRoot":"","sources":["../../../../src/form/combobox/Input/inputContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAGZ,aAAa,EACb,WAAW,EACX,UAAU,EACV,eAAe,EACf,OAAO,EACP,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAiB,MAAM,oBAAoB,CAAC;AAejE,MAAM,YAAY,GAAG,aAAa,CAAmB,EAAsB,CAAC,CAAC;AAE7E,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;IACjE,MAAM,EACJ,YAAY,GAAG,EAAE,EACjB,WAAW,EACX,QAAQ,EACR,KAAK,EACL,OAAO,EACP,EAAE,EAAE,UAAU,EACd,KAAK,EAAE,aAAa,EACpB,QAAQ,EAAE,gBAAgB,EAC1B,OAAO,EACP,kBAAkB,EAClB,IAAI,GACL,GAAG,KAAK,CAAC;IACV,MAAM,cAAc,GAAG,YAAY,CACjC;QACE,WAAW;QACX,QAAQ;QACR,KAAK;QACL,OAAO;QACP,EAAE,EAAE,UAAU;QACd,IAAI;KACL,EACD,eAAe,CAChB,CAAC;IACF,MAAM,QAAQ,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IACvD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAS,YAAY,CAAC,CAAC;IAEzE,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,MAAM,CAAC,aAAa,aAAb,aAAa,cAAb,aAAa,GAAI,aAAa,CAAC,EAC5C,CAAC,aAAa,EAAE,aAAa,CAAC,CAC/B,CAAC;IAEF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,KAAoC,EAAE,EAAE;QACvC,MAAM,KAAK,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC;QACxC,aAAa,aAAb,aAAa,cAAb,aAAa,GAAI,gBAAgB,CAAC,KAAK,CAAC,CAAC;QACzC,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,KAAK,CAAC,CAAC;QAC1B,aAAa,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC,EACD,CAAC,aAAa,EAAE,gBAAgB,CAAC,CAClC,CAAC;IAEF,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,IAAI,EAAE,EAAE;QACP,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACzB,CAAC,EACD,CAAC,gBAAgB,CAAC,CACnB,CAAC;IAEF,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,KAA+C,EAAE,EAAE;QAClD,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,KAAK,CAAC,CAAC;QACjB,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,IAAI,EAAE,EAAE,CAAC,CAAC;QAC7B,QAAQ,CAAC,EAAE,CAAC,CAAC;QACb,aAAa,CAAC,EAAE,CAAC,CAAC;IACpB,CAAC,EACD,CAAC,gBAAgB,EAAE,OAAO,EAAE,QAAQ,CAAC,CACtC,CAAC;IAEF,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;;QAClC,MAAA,MAAA,QAAQ,CAAC,OAAO,0CAAE,KAAK,kDAAI,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,eAAe,CAAC,GAAG,EAAE;;QACnB,IAAI,kBAAkB,IAAI,QAAQ,IAAI,KAAK,KAAK,UAAU,EAAE;YAC1D,MAAA,MAAA,QAAQ,CAAC,OAAO,0CAAE,iBAAiB,mDAAG,UAAU,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;SACxE;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAE5C,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,IACpB,KAAK,kCACA,cAAc,KACjB,UAAU;YACV,KAAK;YACL,UAAU;YACV,QAAQ;YACR,KAAK;YACL,QAAQ;YACR,QAAQ;YACR,UAAU;YACV,aAAa;YACb,kBAAkB,OAGnB,QAAQ,CACa,CACzB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE;IAClC,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACzC,IAAI,CAAC,OAAO,EAAE;QACZ,MAAM,IAAI,KAAK,CACb,6DAA6D,CAC9D,CAAC;KACH;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC"}
|
|
@@ -5,17 +5,18 @@ import { useCustomOptionsContext } from "../customOptionsContext";
|
|
|
5
5
|
const SelectedOptionsContext = createContext({});
|
|
6
6
|
export const SelectedOptionsProvider = ({ children, value, }) => {
|
|
7
7
|
const { clearInput, focusInput } = useInputContext();
|
|
8
|
-
const { customOptions, removeCustomOption, addCustomOption } = useCustomOptionsContext();
|
|
8
|
+
const { customOptions, removeCustomOption, addCustomOption, setCustomOptions, } = useCustomOptionsContext();
|
|
9
9
|
const { allowNewValues, isMultiSelect, selectedOptions: externalSelectedOptions, onToggleSelected, options, } = value;
|
|
10
10
|
const [internalSelectedOptions, setSelectedOptions] = useState([]);
|
|
11
11
|
const selectedOptions = useMemo(() => externalSelectedOptions !== null && externalSelectedOptions !== void 0 ? externalSelectedOptions : [...customOptions, ...internalSelectedOptions], [customOptions, externalSelectedOptions, internalSelectedOptions]);
|
|
12
12
|
const addSelectedOption = useCallback((option) => {
|
|
13
13
|
var _a;
|
|
14
|
-
const
|
|
14
|
+
const isCustomOption = !options
|
|
15
15
|
.map((opt) => opt.toLowerCase())
|
|
16
16
|
.includes((_a = option === null || option === void 0 ? void 0 : option.toLowerCase) === null || _a === void 0 ? void 0 : _a.call(option));
|
|
17
|
-
if (
|
|
17
|
+
if (isCustomOption) {
|
|
18
18
|
allowNewValues && addCustomOption(option);
|
|
19
|
+
!isMultiSelect && setSelectedOptions([]);
|
|
19
20
|
}
|
|
20
21
|
else if (isMultiSelect) {
|
|
21
22
|
setSelectedOptions((prevSelectedOptions) => [
|
|
@@ -25,18 +26,26 @@ export const SelectedOptionsProvider = ({ children, value, }) => {
|
|
|
25
26
|
}
|
|
26
27
|
else {
|
|
27
28
|
setSelectedOptions([option]);
|
|
29
|
+
setCustomOptions([]);
|
|
28
30
|
}
|
|
29
|
-
onToggleSelected === null || onToggleSelected === void 0 ? void 0 : onToggleSelected(option, true,
|
|
30
|
-
}, [
|
|
31
|
+
onToggleSelected === null || onToggleSelected === void 0 ? void 0 : onToggleSelected(option, true, isCustomOption);
|
|
32
|
+
}, [
|
|
33
|
+
addCustomOption,
|
|
34
|
+
allowNewValues,
|
|
35
|
+
isMultiSelect,
|
|
36
|
+
onToggleSelected,
|
|
37
|
+
options,
|
|
38
|
+
setCustomOptions,
|
|
39
|
+
]);
|
|
31
40
|
const removeSelectedOption = useCallback((option) => {
|
|
32
|
-
const
|
|
33
|
-
if (
|
|
41
|
+
const isCustomOption = customOptions.includes(option);
|
|
42
|
+
if (isCustomOption) {
|
|
34
43
|
removeCustomOption(option);
|
|
35
44
|
}
|
|
36
45
|
else {
|
|
37
46
|
setSelectedOptions((prevSelectedOptions) => prevSelectedOptions.filter((selectedOption) => selectedOption !== option));
|
|
38
47
|
}
|
|
39
|
-
onToggleSelected === null || onToggleSelected === void 0 ? void 0 : onToggleSelected(option, false,
|
|
48
|
+
onToggleSelected === null || onToggleSelected === void 0 ? void 0 : onToggleSelected(option, false, isCustomOption);
|
|
40
49
|
}, [customOptions, onToggleSelected, removeCustomOption]);
|
|
41
50
|
const toggleOption = useCallback((option, event) => {
|
|
42
51
|
if (selectedOptions.includes(option)) {
|
|
@@ -45,15 +54,12 @@ export const SelectedOptionsProvider = ({ children, value, }) => {
|
|
|
45
54
|
else {
|
|
46
55
|
addSelectedOption(option);
|
|
47
56
|
}
|
|
48
|
-
|
|
49
|
-
clearInput(event);
|
|
50
|
-
}
|
|
57
|
+
clearInput(event);
|
|
51
58
|
focusInput();
|
|
52
59
|
}, [
|
|
53
60
|
addSelectedOption,
|
|
54
61
|
clearInput,
|
|
55
62
|
focusInput,
|
|
56
|
-
isMultiSelect,
|
|
57
63
|
removeSelectedOption,
|
|
58
64
|
selectedOptions,
|
|
59
65
|
]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"selectedOptionsContext.js","sourceRoot":"","sources":["../../../../src/form/combobox/SelectedOptions/selectedOptionsContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,aAAa,EACb,WAAW,EACX,UAAU,EACV,OAAO,EACP,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,WAAW,MAAM,2BAA2B,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAExD,OAAO,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAelE,MAAM,sBAAsB,GAAG,aAAa,CAC1C,EAAgC,CACjC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EACtC,QAAQ,EACR,KAAK,GAWN,EAAE,EAAE;IACH,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,eAAe,EAAE,CAAC;IACrD,MAAM,
|
|
1
|
+
{"version":3,"file":"selectedOptionsContext.js","sourceRoot":"","sources":["../../../../src/form/combobox/SelectedOptions/selectedOptionsContext.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,6 +3,7 @@ type CustomOptionsContextType = {
|
|
|
3
3
|
customOptions: string[];
|
|
4
4
|
removeCustomOption: (option: string) => void;
|
|
5
5
|
addCustomOption: (option: string) => void;
|
|
6
|
+
setCustomOptions: React.Dispatch<React.SetStateAction<string[]>>;
|
|
6
7
|
};
|
|
7
8
|
export declare const CustomOptionsProvider: ({ children }: {
|
|
8
9
|
children: any;
|
|
@@ -1,21 +1,29 @@
|
|
|
1
1
|
import React, { useState, useCallback, createContext, useContext } from "react";
|
|
2
2
|
import { useInputContext } from "./Input/inputContext";
|
|
3
|
+
import { useSelectedOptionsContext } from "./SelectedOptions/selectedOptionsContext";
|
|
3
4
|
const CustomOptionsContext = createContext({});
|
|
4
5
|
export const CustomOptionsProvider = ({ children }) => {
|
|
5
6
|
const [customOptions, setCustomOptions] = useState([]);
|
|
6
7
|
const { focusInput } = useInputContext();
|
|
8
|
+
const { isMultiSelect } = useSelectedOptionsContext();
|
|
7
9
|
const removeCustomOption = useCallback((option) => {
|
|
8
10
|
setCustomOptions((prevCustomOptions) => prevCustomOptions.filter((o) => o !== option));
|
|
9
11
|
focusInput();
|
|
10
12
|
}, [focusInput, setCustomOptions]);
|
|
11
13
|
const addCustomOption = useCallback((option) => {
|
|
12
|
-
|
|
14
|
+
if (isMultiSelect) {
|
|
15
|
+
setCustomOptions((prevOptions) => [...prevOptions, option]);
|
|
16
|
+
}
|
|
17
|
+
else {
|
|
18
|
+
setCustomOptions([option]);
|
|
19
|
+
}
|
|
13
20
|
focusInput();
|
|
14
|
-
}, [focusInput, setCustomOptions]);
|
|
21
|
+
}, [focusInput, isMultiSelect, setCustomOptions]);
|
|
15
22
|
const customOptionsState = {
|
|
16
23
|
customOptions,
|
|
17
24
|
removeCustomOption,
|
|
18
25
|
addCustomOption,
|
|
26
|
+
setCustomOptions,
|
|
19
27
|
};
|
|
20
28
|
return (React.createElement(CustomOptionsContext.Provider, { value: customOptionsState }, children));
|
|
21
29
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"customOptionsContext.js","sourceRoot":"","sources":["../../../src/form/combobox/customOptionsContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAChF,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"customOptionsContext.js","sourceRoot":"","sources":["../../../src/form/combobox/customOptionsContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAChF,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,yBAAyB,EAAE,MAAM,0CAA0C,CAAC;AASrF,MAAM,oBAAoB,GAAG,aAAa,CACxC,EAA8B,CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACpD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IACjE,MAAM,EAAE,UAAU,EAAE,GAAG,eAAe,EAAE,CAAC;IACzC,MAAM,EAAE,aAAa,EAAE,GAAG,yBAAyB,EAAE,CAAC;IAEtD,MAAM,kBAAkB,GAAG,WAAW,CACpC,CAAC,MAAM,EAAE,EAAE;QACT,gBAAgB,CAAC,CAAC,iBAAiB,EAAE,EAAE,CACrC,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,MAAM,CAAC,CAC9C,CAAC;QACF,UAAU,EAAE,CAAC;IACf,CAAC,EACD,CAAC,UAAU,EAAE,gBAAgB,CAAC,CAC/B,CAAC;IAEF,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,MAAM,EAAE,EAAE;QACT,IAAI,aAAa,EAAE;YACjB,gBAAgB,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC,GAAG,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;SAC7D;aAAM;YACL,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;SAC5B;QACD,UAAU,EAAE,CAAC;IACf,CAAC,EACD,CAAC,UAAU,EAAE,aAAa,EAAE,gBAAgB,CAAC,CAC9C,CAAC;IAEF,MAAM,kBAAkB,GAAG;QACzB,aAAa;QACb,kBAAkB;QAClB,eAAe;QACf,gBAAgB;KACjB,CAAC;IAEF,OAAO,CACL,oBAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,kBAAkB,IACrD,QAAQ,CACqB,CACjC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,EAAE;IAC1C,MAAM,OAAO,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IACjD,IAAI,CAAC,OAAO,EAAE;QACZ,MAAM,IAAI,KAAK,CACb,qEAAqE,CACtE,CAAC;KACH;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC"}
|
|
@@ -63,7 +63,7 @@ export interface ComboboxProps extends FormFieldProps, Omit<InputHTMLAttributes<
|
|
|
63
63
|
* @param event
|
|
64
64
|
* @returns
|
|
65
65
|
*/
|
|
66
|
-
onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
66
|
+
onChange?: (event: ChangeEvent<HTMLInputElement> | null, value?: string) => void;
|
|
67
67
|
/**
|
|
68
68
|
* Callback function triggered whenever the input field is cleared
|
|
69
69
|
*
|
|
@@ -76,10 +76,10 @@ export interface ComboboxProps extends FormFieldProps, Omit<InputHTMLAttributes<
|
|
|
76
76
|
*
|
|
77
77
|
* @param option
|
|
78
78
|
* @param isSelected - Whether the option has been selected or unselected
|
|
79
|
-
* @param
|
|
79
|
+
* @param isCustomOption - Whether the option comes from user input, instead of from the list
|
|
80
80
|
* @returns
|
|
81
81
|
*/
|
|
82
|
-
onToggleSelected?: (option: string, isSelected: boolean,
|
|
82
|
+
onToggleSelected?: (option: string, isSelected: boolean, isCustomOption: boolean) => void;
|
|
83
83
|
/**
|
|
84
84
|
* List of selected options.
|
|
85
85
|
*
|
package/esm/list/List.d.ts
CHANGED
|
@@ -20,6 +20,11 @@ export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
20
20
|
* @default "h3"
|
|
21
21
|
*/
|
|
22
22
|
headingTag?: React.ElementType<any>;
|
|
23
|
+
/**
|
|
24
|
+
* Changes padding, height and font-size
|
|
25
|
+
* @default medium
|
|
26
|
+
*/
|
|
27
|
+
size?: "medium" | "small";
|
|
23
28
|
}
|
|
24
29
|
export interface ListComponent extends React.ForwardRefExoticComponent<ListProps> {
|
|
25
30
|
/**
|
|
@@ -28,8 +33,9 @@ export interface ListComponent extends React.ForwardRefExoticComponent<ListProps
|
|
|
28
33
|
Item: React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<HTMLLIElement>>;
|
|
29
34
|
}
|
|
30
35
|
interface ListContextProps {
|
|
31
|
-
listType: "
|
|
36
|
+
listType: ListProps["as"];
|
|
32
37
|
isNested: boolean | null;
|
|
38
|
+
size: ListProps["size"];
|
|
33
39
|
}
|
|
34
40
|
export declare const ListContext: React.Context<ListContextProps>;
|
|
35
41
|
export declare const List: ListComponent;
|
package/esm/list/List.js
CHANGED
|
@@ -17,20 +17,24 @@ import { ListItem } from "./ListItem";
|
|
|
17
17
|
export const ListContext = createContext({
|
|
18
18
|
listType: "ul",
|
|
19
19
|
isNested: null,
|
|
20
|
+
size: "medium",
|
|
20
21
|
});
|
|
21
22
|
export const List = forwardRef((_a, ref) => {
|
|
22
|
-
var
|
|
23
|
+
var _b;
|
|
24
|
+
var { children, className, as: ListTag = "ul", title, description, headingTag = "h3", size } = _a, rest = __rest(_a, ["children", "className", "as", "title", "description", "headingTag", "size"]);
|
|
23
25
|
const ariaId = useId();
|
|
24
|
-
const { isNested } = useContext(ListContext);
|
|
26
|
+
const { isNested, size: _size } = useContext(ListContext);
|
|
27
|
+
const listSize = (_b = size !== null && size !== void 0 ? size : _size) !== null && _b !== void 0 ? _b : "medium";
|
|
25
28
|
return (React.createElement(ListContext.Provider, { value: {
|
|
26
29
|
listType: ListTag,
|
|
27
30
|
isNested: isNested === null ? false : true,
|
|
31
|
+
size: listSize,
|
|
28
32
|
} },
|
|
29
|
-
React.createElement("div", Object.assign({}, rest, { ref: ref, className: cl("navds-list", className, {
|
|
33
|
+
React.createElement("div", Object.assign({}, rest, { ref: ref, className: cl("navds-list", `navds-list--${listSize}`, className, {
|
|
30
34
|
"navds-list--nested": isNested === null ? false : true,
|
|
31
35
|
}) }),
|
|
32
|
-
title && (React.createElement(Heading, { id: `tittel-${ariaId}`, size: "small", as: headingTag }, title)),
|
|
33
|
-
description && (React.createElement(BodyShort, { id: `description-${ariaId}` }, description)),
|
|
36
|
+
title && (React.createElement(Heading, { id: `tittel-${ariaId}`, size: listSize === "medium" ? "small" : "xsmall", as: headingTag }, title)),
|
|
37
|
+
description && (React.createElement(BodyShort, { size: listSize, id: `description-${ariaId}` }, description)),
|
|
34
38
|
React.createElement(ListTag, { "aria-labelledby": title && `tittel-${ariaId}`, "aria-describedby": description && `description-${ariaId}` }, children))));
|
|
35
39
|
});
|
|
36
40
|
List.Item = ListItem;
|
package/esm/list/List.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.js","sourceRoot":"","sources":["../../src/list/List.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"List.js","sourceRoot":"","sources":["../../src/list/List.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAC;AA6CrD,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAmB;IACzD,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,IAAI;IACd,IAAI,EAAE,QAAQ;CACf,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CACE,EASC,EACD,GAAG,EACH,EAAE;;QAXF,EACE,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,OAAO,GAAG,IAAI,EAClB,KAAK,EACL,WAAW,EACX,UAAU,GAAG,IAAI,EACjB,IAAI,OAEL,EADI,IAAI,cART,6EASC,CADQ;IAIT,MAAM,MAAM,GAAG,KAAK,EAAE,CAAC;IAEvB,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAE1D,MAAM,QAAQ,GAAG,MAAA,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,KAAK,mCAAI,QAAQ,CAAC;IAC3C,OAAO,CACL,oBAAC,WAAW,CAAC,QAAQ,IACnB,KAAK,EAAE;YACL,QAAQ,EAAE,OAAO;YACjB,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI;YAC1C,IAAI,EAAE,QAAQ;SACf;QAED,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,eAAe,QAAQ,EAAE,EAAE,SAAS,EAAE;gBAChE,oBAAoB,EAAE,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI;aACvD,CAAC;YAED,KAAK,IAAI,CACR,oBAAC,OAAO,IACN,EAAE,EAAE,UAAU,MAAM,EAAE,EACtB,IAAI,EAAE,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAChD,EAAE,EAAE,UAAU,IAEb,KAAK,CACE,CACX;YACA,WAAW,IAAI,CACd,oBAAC,SAAS,IAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,eAAe,MAAM,EAAE,IACnD,WAAW,CACF,CACb;YACD,oBAAC,OAAO,uBACW,KAAK,IAAI,UAAU,MAAM,EAAE,sBAC1B,WAAW,IAAI,eAAe,MAAM,EAAE,IAEvD,QAAQ,CACD,CACN,CACe,CACxB,CAAC;AACJ,CAAC,CACe,CAAC;AAEnB,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;AAErB,eAAe,IAAI,CAAC"}
|
package/esm/list/ListItem.js
CHANGED
|
@@ -15,20 +15,18 @@ import { BodyShort, Label } from "../typography";
|
|
|
15
15
|
import { ListContext } from "./List";
|
|
16
16
|
export const ListItem = forwardRef((_a, ref) => {
|
|
17
17
|
var { className, children, title, icon } = _a, rest = __rest(_a, ["className", "children", "title", "icon"]);
|
|
18
|
-
const { listType,
|
|
18
|
+
const { listType, size } = useContext(ListContext);
|
|
19
19
|
if (listType === "ol" && icon) {
|
|
20
20
|
console.warn("<List />: Icon prop is not supported for ordered lists. Please remove the icon prop.");
|
|
21
21
|
}
|
|
22
|
-
return (React.createElement("li", Object.assign({}, rest, { ref: ref, className: cl("navds-list__item", className,
|
|
23
|
-
"navds-list__item--noMargin": isNested,
|
|
24
|
-
}) }),
|
|
22
|
+
return (React.createElement("li", Object.assign({}, rest, { ref: ref, className: cl("navds-list__item", className) }),
|
|
25
23
|
listType === "ul" && (React.createElement("div", { className: cl({
|
|
26
24
|
"navds-list__item-marker--icon": icon,
|
|
27
25
|
"navds-list__item-marker--bullet": !icon,
|
|
28
26
|
}) }, icon ? (icon) : (React.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" },
|
|
29
27
|
React.createElement("rect", { width: "6", height: "6", rx: "3", fill: "currentColor" }))))),
|
|
30
|
-
React.createElement(BodyShort, { as: "div", size:
|
|
31
|
-
title && (React.createElement(Label, { as: "p", size:
|
|
28
|
+
React.createElement(BodyShort, { as: "div", size: size, className: "navds-list__item-content" },
|
|
29
|
+
title && (React.createElement(Label, { as: "p", size: size }, title)),
|
|
32
30
|
children)));
|
|
33
31
|
});
|
|
34
32
|
export default ListItem;
|
package/esm/list/ListItem.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../../src/list/ListItem.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAiBrC,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CAAC,EAA6C,EAAE,GAAG,EAAE,EAAE;QAAtD,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,OAAW,EAAN,IAAI,cAA3C,0CAA6C,CAAF;IAC1C,MAAM,EAAE,QAAQ,EAAE,
|
|
1
|
+
{"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../../src/list/ListItem.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAiBrC,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CAAC,EAA6C,EAAE,GAAG,EAAE,EAAE;QAAtD,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,OAAW,EAAN,IAAI,cAA3C,0CAA6C,CAAF;IAC1C,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAEnD,IAAI,QAAQ,KAAK,IAAI,IAAI,IAAI,EAAE;QAC7B,OAAO,CAAC,IAAI,CACV,sFAAsF,CACvF,CAAC;KACH;IAED,OAAO,CACL,4CAAQ,IAAI,IAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE,SAAS,CAAC;QACjE,QAAQ,KAAK,IAAI,IAAI,CACpB,6BACE,SAAS,EAAE,EAAE,CAAC;gBACZ,+BAA+B,EAAE,IAAI;gBACrC,iCAAiC,EAAE,CAAC,IAAI;aACzC,CAAC,IAED,IAAI,CAAC,CAAC,CAAC,CACN,IAAI,CACL,CAAC,CAAC,CAAC,CACF,6BACE,KAAK,EAAC,GAAG,EACT,MAAM,EAAC,GAAG,EACV,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,uBAElC,SAAS,EAAE,KAAK,EAChB,IAAI,EAAC,KAAK;YAEV,8BAAM,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,GAAG,CACpD,CACP,CACG,CACP;QAED,oBAAC,SAAS,IAAC,EAAE,EAAC,KAAK,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,0BAA0B;YACjE,KAAK,IAAI,CACR,oBAAC,KAAK,IAAC,EAAE,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,IACrB,KAAK,CACA,CACT;YACA,QAAQ,CACC,CACT,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@navikt/ds-react",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.12.1",
|
|
4
4
|
"description": "Aksel react-components for NAV designsystem",
|
|
5
5
|
"author": "Aksel | NAV designsystem team",
|
|
6
6
|
"license": "MIT",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
40
|
"@floating-ui/react": "0.24.1",
|
|
41
|
-
"@navikt/aksel-icons": "^4.
|
|
41
|
+
"@navikt/aksel-icons": "^4.12.1",
|
|
42
42
|
"@radix-ui/react-tabs": "1.0.0",
|
|
43
43
|
"@radix-ui/react-toggle-group": "1.0.0",
|
|
44
44
|
"clsx": "^1.2.1",
|