@navikt/ds-react 6.16.1 → 6.16.3
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/cjs/form/combobox/ComboboxWrapper.js +2 -1
- package/cjs/form/combobox/ComboboxWrapper.js.map +1 -1
- package/cjs/form/combobox/FilteredOptions/filtered-options-util.js +1 -2
- package/cjs/form/combobox/FilteredOptions/filtered-options-util.js.map +1 -1
- package/cjs/form/combobox/FilteredOptions/filteredOptionsContext.js +10 -2
- package/cjs/form/combobox/FilteredOptions/filteredOptionsContext.js.map +1 -1
- package/cjs/form/combobox/Input/Input.context.d.ts +2 -0
- package/cjs/form/combobox/Input/Input.context.js +4 -1
- package/cjs/form/combobox/Input/Input.context.js.map +1 -1
- package/cjs/form/combobox/Input/Input.js +8 -5
- package/cjs/form/combobox/Input/Input.js.map +1 -1
- package/cjs/form/combobox/Input/ToggleListButton.js +6 -1
- package/cjs/form/combobox/Input/ToggleListButton.js.map +1 -1
- package/cjs/form/combobox/SelectedOptions/SelectedOptions.js +3 -1
- package/cjs/form/combobox/SelectedOptions/SelectedOptions.js.map +1 -1
- package/cjs/form/combobox/SelectedOptions/selectedOptionsContext.js +6 -2
- package/cjs/form/combobox/SelectedOptions/selectedOptionsContext.js.map +1 -1
- package/cjs/form/error-summary/ErrorSummary.d.ts +1 -1
- package/cjs/form/error-summary/ErrorSummary.js +1 -1
- package/esm/form/combobox/ComboboxWrapper.js +2 -1
- package/esm/form/combobox/ComboboxWrapper.js.map +1 -1
- package/esm/form/combobox/FilteredOptions/filtered-options-util.js +1 -2
- package/esm/form/combobox/FilteredOptions/filtered-options-util.js.map +1 -1
- package/esm/form/combobox/FilteredOptions/filteredOptionsContext.js +10 -2
- package/esm/form/combobox/FilteredOptions/filteredOptionsContext.js.map +1 -1
- package/esm/form/combobox/Input/Input.context.d.ts +2 -0
- package/esm/form/combobox/Input/Input.context.js +4 -1
- package/esm/form/combobox/Input/Input.context.js.map +1 -1
- package/esm/form/combobox/Input/Input.js +8 -5
- package/esm/form/combobox/Input/Input.js.map +1 -1
- package/esm/form/combobox/Input/ToggleListButton.js +6 -1
- package/esm/form/combobox/Input/ToggleListButton.js.map +1 -1
- package/esm/form/combobox/SelectedOptions/SelectedOptions.js +3 -1
- package/esm/form/combobox/SelectedOptions/SelectedOptions.js.map +1 -1
- package/esm/form/combobox/SelectedOptions/selectedOptionsContext.js +7 -3
- package/esm/form/combobox/SelectedOptions/selectedOptionsContext.js.map +1 -1
- package/esm/form/error-summary/ErrorSummary.d.ts +1 -1
- package/esm/form/error-summary/ErrorSummary.js +1 -1
- package/package.json +3 -3
- package/src/date/datepicker/datepicker.test.tsx +1 -1
- package/src/form/combobox/ComboboxWrapper.tsx +2 -1
- package/src/form/combobox/FilteredOptions/filtered-options-util.ts +1 -2
- package/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx +10 -1
- package/src/form/combobox/Input/Input.context.tsx +5 -0
- package/src/form/combobox/Input/Input.tsx +17 -4
- package/src/form/combobox/Input/ToggleListButton.tsx +6 -1
- package/src/form/combobox/SelectedOptions/SelectedOptions.tsx +3 -1
- package/src/form/combobox/SelectedOptions/selectedOptionsContext.tsx +10 -5
- package/src/form/combobox/__tests__/combobox.test.tsx +43 -13
- package/src/form/error-summary/ErrorSummary.tsx +1 -1
|
@@ -30,7 +30,7 @@ const clsx_1 = __importDefault(require("clsx"));
|
|
|
30
30
|
const react_1 = __importStar(require("react"));
|
|
31
31
|
const Input_context_1 = require("./Input/Input.context");
|
|
32
32
|
const ComboboxWrapper = ({ children, className, hasError, inputProps, inputSize, toggleIsListOpen, }) => {
|
|
33
|
-
const { toggleOpenButtonRef } = (0, Input_context_1.useInputContext)();
|
|
33
|
+
const { toggleOpenButtonRef, clearInput } = (0, Input_context_1.useInputContext)();
|
|
34
34
|
const wrapperRef = (0, react_1.useRef)(null);
|
|
35
35
|
const [hasFocusWithin, setHasFocusWithin] = (0, react_1.useState)(false);
|
|
36
36
|
function onFocusInsideWrapper(e) {
|
|
@@ -46,6 +46,7 @@ const ComboboxWrapper = ({ children, className, hasError, inputProps, inputSize,
|
|
|
46
46
|
if (!((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))) {
|
|
47
47
|
toggleIsListOpen(false);
|
|
48
48
|
setHasFocusWithin(false);
|
|
49
|
+
clearInput(e);
|
|
49
50
|
}
|
|
50
51
|
}
|
|
51
52
|
return (react_1.default.createElement("div", { ref: wrapperRef, className: (0, clsx_1.default)(className, "navds-form-field", `navds-form-field--${inputSize}`, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxWrapper.js","sourceRoot":"","sources":["../../../src/form/combobox/ComboboxWrapper.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAAgD;AAChD,yDAAwD;AAaxD,MAAM,eAAe,GAAG,CAAC,EACvB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,UAAU,EACV,SAAS,EACT,gBAAgB,GACK,EAAE,EAAE;IACzB,MAAM,EAAE,mBAAmB,EAAE,GAAG,IAAA,+BAAe,GAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"ComboboxWrapper.js","sourceRoot":"","sources":["../../../src/form/combobox/ComboboxWrapper.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAAgD;AAChD,yDAAwD;AAaxD,MAAM,eAAe,GAAG,CAAC,EACvB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,UAAU,EACV,SAAS,EACT,gBAAgB,GACK,EAAE,EAAE;IACzB,MAAM,EAAE,mBAAmB,EAAE,UAAU,EAAE,GAAG,IAAA,+BAAe,GAAE,CAAC;IAE9D,MAAM,UAAU,GAAG,IAAA,cAAM,EAAwB,IAAI,CAAC,CAAC;IACvD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,IAAA,gBAAQ,EAAC,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,CAAC;YACD,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACvB,iBAAiB,CAAC,IAAI,CAAC,CAAC;QAC1B,CAAC;IACH,CAAC;IAED,SAAS,aAAa,CAAC,CAAC;;QACtB,IAAI,CAAC,CAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAA,EAAE,CAAC;YACnD,gBAAgB,CAAC,KAAK,CAAC,CAAC;YACxB,iBAAiB,CAAC,KAAK,CAAC,CAAC;YACzB,UAAU,CAAC,CAAC,CAAC,CAAC;QAChB,CAAC;IACH,CAAC;IAED,OAAO,CACL,uCACE,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,IAAA,cAAE,EACX,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,IAEpB,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,eAAe,CAAC"}
|
|
@@ -4,8 +4,7 @@ const normalizeText = (text) => typeof text === "string" ? text.toLocaleLowerCas
|
|
|
4
4
|
const isPartOfText = (value, text) => normalizeText(text).includes(normalizeText(value !== null && value !== void 0 ? value : ""));
|
|
5
5
|
const getMatchingValuesFromList = (value, list) => list.filter((listItem) => isPartOfText(value, listItem.label));
|
|
6
6
|
const getFirstValueStartingWith = (text, list) => {
|
|
7
|
-
|
|
8
|
-
return list.find((listItem) => normalizeText(listItem.label).startsWith(normalizedText));
|
|
7
|
+
return list.find((listItem) => normalizeText(listItem.label).startsWith(text.toLocaleLowerCase()));
|
|
9
8
|
};
|
|
10
9
|
const getFilteredOptionsId = (comboboxId) => `${comboboxId}-filtered-options`;
|
|
11
10
|
const getOptionId = (comboboxId, option) => `${comboboxId.toLocaleLowerCase()}-option-${option
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filtered-options-util.js","sourceRoot":"","sources":["../../../../src/form/combobox/FilteredOptions/filtered-options-util.ts"],"names":[],"mappings":";;AAEA,MAAM,aAAa,GAAG,CAAC,IAAY,EAAU,EAAE,CAC7C,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;AAElE,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,IAAY,EAAE,EAAE,CACnD,aAAa,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,CAAC,CAAC,CAAC;AAE3D,MAAM,yBAAyB,GAAG,CAAC,KAAa,EAAE,IAAsB,EAAE,EAAE,CAC1E,IAAI,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;AAEjE,MAAM,yBAAyB,GAAG,CAAC,IAAY,EAAE,IAAsB,EAAE,EAAE;IACzE,
|
|
1
|
+
{"version":3,"file":"filtered-options-util.js","sourceRoot":"","sources":["../../../../src/form/combobox/FilteredOptions/filtered-options-util.ts"],"names":[],"mappings":";;AAEA,MAAM,aAAa,GAAG,CAAC,IAAY,EAAU,EAAE,CAC7C,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;AAElE,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,IAAY,EAAE,EAAE,CACnD,aAAa,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,CAAC,CAAC,CAAC;AAE3D,MAAM,yBAAyB,GAAG,CAAC,KAAa,EAAE,IAAsB,EAAE,EAAE,CAC1E,IAAI,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;AAEjE,MAAM,yBAAyB,GAAG,CAAC,IAAY,EAAE,IAAsB,EAAE,EAAE;IACzE,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE,CAC5B,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CACnE,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,oBAAoB,GAAG,CAAC,UAAkB,EAAE,EAAE,CAClD,GAAG,UAAU,mBAAmB,CAAC;AAEnC,MAAM,WAAW,GAAG,CAAC,UAAkB,EAAE,MAAc,EAAE,EAAE,CACzD,GAAG,UAAU,CAAC,iBAAiB,EAAE,WAAW,MAAM;KAC/C,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC;KACjB,iBAAiB,EAAE,EAAE,CAAC;AAE3B,MAAM,iBAAiB,GAAG,CAAC,UAAkB,EAAE,EAAE,CAC/C,GAAG,UAAU,sBAAsB,CAAC;AAEtC,MAAM,cAAc,GAAG,CAAC,UAAkB,EAAE,EAAE,CAAC,GAAG,UAAU,aAAa,CAAC;AAE1E,MAAM,WAAW,GAAG,CAAC,UAAkB,EAAE,EAAE,CAAC,GAAG,UAAU,UAAU,CAAC;AAEpE,MAAM,uBAAuB,GAAG,CAAC,UAAkB,EAAE,EAAE,CACrD,GAAG,UAAU,uBAAuB,CAAC;AAEvC,kBAAe;IACb,aAAa;IACb,YAAY;IACZ,yBAAyB;IACzB,oBAAoB;IACpB,iBAAiB;IACjB,WAAW;IACX,cAAc;IACd,WAAW;IACX,uBAAuB;IACvB,yBAAyB;CAC1B,CAAC"}
|
|
@@ -46,7 +46,7 @@ const FilteredOptionsProvider = ({ children, value: props, }) => {
|
|
|
46
46
|
const { allowNewValues, filteredOptions: externalFilteredOptions, isListOpen: isExternalListOpen, isLoading, options, } = props;
|
|
47
47
|
const [filteredOptionsRef, setFilteredOptionsRef] = (0, react_1.useState)(null);
|
|
48
48
|
const virtualFocus = (0, useVirtualFocus_1.default)(filteredOptionsRef);
|
|
49
|
-
const { inputProps: { "aria-describedby": partialAriaDescribedBy, id }, value, searchTerm, setValue, setSearchTerm, shouldAutocomplete, } = (0, Input_context_1.useInputContext)();
|
|
49
|
+
const { inputProps: { "aria-describedby": partialAriaDescribedBy, id }, value, searchTerm, setValue, setSearchTerm, shouldAutocomplete, setHideCaret, } = (0, Input_context_1.useInputContext)();
|
|
50
50
|
const { maxSelected } = (0, selectedOptionsContext_1.useSelectedOptionsContext)();
|
|
51
51
|
const [isInternalListOpen, setInternalListOpen] = (0, react_1.useState)(false);
|
|
52
52
|
const { customOptions } = (0, customOptionsContext_1.useComboboxCustomOptions)();
|
|
@@ -96,8 +96,16 @@ const FilteredOptionsProvider = ({ children, value: props, }) => {
|
|
|
96
96
|
}, [isExternalListOpen, isInternalListOpen]);
|
|
97
97
|
const toggleIsListOpen = (0, react_1.useCallback)((newState) => {
|
|
98
98
|
virtualFocus.moveFocusToTop();
|
|
99
|
+
if (newState !== null && newState !== void 0 ? newState : !isInternalListOpen) {
|
|
100
|
+
setHideCaret(!!(maxSelected === null || maxSelected === void 0 ? void 0 : maxSelected.isLimitReached));
|
|
101
|
+
}
|
|
99
102
|
setInternalListOpen((oldState) => newState !== null && newState !== void 0 ? newState : !oldState);
|
|
100
|
-
}, [
|
|
103
|
+
}, [
|
|
104
|
+
virtualFocus,
|
|
105
|
+
maxSelected === null || maxSelected === void 0 ? void 0 : maxSelected.isLimitReached,
|
|
106
|
+
isInternalListOpen,
|
|
107
|
+
setHideCaret,
|
|
108
|
+
]);
|
|
101
109
|
const isValueNew = (0, react_1.useMemo)(() => Boolean(value) &&
|
|
102
110
|
!filteredOptionsMap[filtered_options_util_1.default.getOptionId(id, value)], [filteredOptionsMap, id, value]);
|
|
103
111
|
const ariaDescribedBy = (0, react_1.useMemo)(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filteredOptionsContext.js","sourceRoot":"","sources":["../../../../src/form/combobox/FilteredOptions/filteredOptionsContext.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAA8E;AAC9E,iEAA6D;AAC7D,+CAAyE;AACzE,0DAAyD;AACzD,sFAAsF;AACtF,sDAAqD;AACrD,kEAAmE;AAEnE,oFAA2D;AAC3D,wEAAsE;AA4BtE,MAAM,CAAC,8BAA8B,EAAE,yBAAyB,CAAC,GAC/D,IAAA,8BAAa,EAA8B;IACzC,IAAI,EAAE,wBAAwB;IAC9B,YAAY,EACV,yEAAyE;CAC5E,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"filteredOptionsContext.js","sourceRoot":"","sources":["../../../../src/form/combobox/FilteredOptions/filteredOptionsContext.tsx"],"names":[],"mappings":"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"}
|
|
@@ -13,6 +13,8 @@ interface InputContextValue extends FormFieldType {
|
|
|
13
13
|
setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
|
|
14
14
|
shouldAutocomplete?: boolean;
|
|
15
15
|
toggleOpenButtonRef: React.RefObject<HTMLButtonElement>;
|
|
16
|
+
hideCaret: boolean;
|
|
17
|
+
setHideCaret: React.Dispatch<React.SetStateAction<boolean>>;
|
|
16
18
|
}
|
|
17
19
|
declare const useInputContext: <S extends boolean = true>(strict?: S) => S extends true ? InputContextValue : InputContextValue | undefined;
|
|
18
20
|
interface Props {
|
|
@@ -46,6 +46,7 @@ const InputProvider = ({ children, value: props }) => {
|
|
|
46
46
|
const inputRef = (0, react_1.useRef)(null);
|
|
47
47
|
const toggleOpenButtonRef = (0, react_1.useRef)(null);
|
|
48
48
|
const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue);
|
|
49
|
+
const [hideCaret, setHideCaret] = (0, react_1.useState)(false);
|
|
49
50
|
const value = (0, react_1.useMemo)(() => String(externalValue !== null && externalValue !== void 0 ? externalValue : internalValue), [externalValue, internalValue]);
|
|
50
51
|
const [searchTerm, setSearchTerm] = (0, react_1.useState)(value);
|
|
51
52
|
const onChange = (0, react_1.useCallback)((newValue) => {
|
|
@@ -77,7 +78,9 @@ const InputProvider = ({ children, value: props }) => {
|
|
|
77
78
|
searchTerm,
|
|
78
79
|
setSearchTerm,
|
|
79
80
|
shouldAutocomplete,
|
|
80
|
-
toggleOpenButtonRef
|
|
81
|
+
toggleOpenButtonRef,
|
|
82
|
+
hideCaret,
|
|
83
|
+
setHideCaret });
|
|
81
84
|
return (react_1.default.createElement(InputContextProvider, Object.assign({}, contextValue), children));
|
|
82
85
|
};
|
|
83
86
|
exports.InputContextProvider = InputProvider;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.context.js","sourceRoot":"","sources":["../../../../src/form/combobox/Input/Input.context.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAsE;AACtE,iEAA6D;AAC7D,+CAA4D;AAC5D,qDAAiE;
|
|
1
|
+
{"version":3,"file":"Input.context.js","sourceRoot":"","sources":["../../../../src/form/combobox/Input/Input.context.tsx"],"names":[],"mappings":"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"}
|
|
@@ -46,11 +46,11 @@ const filteredOptionsContext_1 = require("../FilteredOptions/filteredOptionsCont
|
|
|
46
46
|
const selectedOptionsContext_1 = require("../SelectedOptions/selectedOptionsContext");
|
|
47
47
|
const Input_context_1 = require("./Input.context");
|
|
48
48
|
const Input = (0, react_1.forwardRef)((_a, ref) => {
|
|
49
|
-
var { inputClassName, shouldShowSelectedOptions } = _a, rest = __rest(_a, ["inputClassName", "shouldShowSelectedOptions"]);
|
|
49
|
+
var { inputClassName, shouldShowSelectedOptions, placeholder } = _a, rest = __rest(_a, ["inputClassName", "shouldShowSelectedOptions", "placeholder"]);
|
|
50
50
|
const internalRef = (0, react_1.useRef)(null);
|
|
51
51
|
const mergedRefs = (0, hooks_1.useMergeRefs)(ref, internalRef);
|
|
52
|
-
const { clearInput, inputProps, onChange, size, value, searchTerm, setValue, } = (0, Input_context_1.useInputContext)();
|
|
53
|
-
const { selectedOptions, removeSelectedOption, toggleOption, isMultiSelect, } = (0, selectedOptionsContext_1.useSelectedOptionsContext)();
|
|
52
|
+
const { clearInput, inputProps, onChange, size, value, searchTerm, setValue, hideCaret, setHideCaret, } = (0, Input_context_1.useInputContext)();
|
|
53
|
+
const { selectedOptions, removeSelectedOption, toggleOption, isMultiSelect, maxSelected, } = (0, selectedOptionsContext_1.useSelectedOptionsContext)();
|
|
54
54
|
const { activeDecendantId, allowNewValues, currentOption, filteredOptions, isValueNew, toggleIsListOpen, isListOpen, ariaDescribedBy, setIsMouseLastUsedInputDevice, shouldAutocomplete, virtualFocus, } = (0, filteredOptionsContext_1.useFilteredOptionsContext)();
|
|
55
55
|
const onEnter = (0, react_1.useCallback)((event) => {
|
|
56
56
|
const isTextInSelectedOptions = (text) => selectedOptions.some((option) => option.label.toLocaleLowerCase() === text.toLocaleLowerCase());
|
|
@@ -72,7 +72,7 @@ const Input = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
72
72
|
// Autocompleting or adding a new value
|
|
73
73
|
const selectedValue = allowNewValues && isValueNew
|
|
74
74
|
? { label: value, value }
|
|
75
|
-
: filteredOptions[0];
|
|
75
|
+
: filtered_options_util_1.default.getFirstValueStartingWith(value, filteredOptions) || filteredOptions[0];
|
|
76
76
|
if (!selectedValue) {
|
|
77
77
|
return;
|
|
78
78
|
}
|
|
@@ -195,7 +195,10 @@ const Input = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
195
195
|
virtualFocus.moveFocusToTop();
|
|
196
196
|
onChange(newValue);
|
|
197
197
|
}, [filteredOptions.length, virtualFocus, onChange, toggleIsListOpen]);
|
|
198
|
-
return (react_1.default.createElement("input", Object.assign({}, rest, (0, util_1.omit)(inputProps, ["aria-invalid"]), { ref: mergedRefs, value: value, onBlur: () => virtualFocus.moveFocusToTop(), onClick: () =>
|
|
198
|
+
return (react_1.default.createElement("input", Object.assign({}, rest, (0, util_1.omit)(inputProps, ["aria-invalid"]), { ref: mergedRefs, value: value, onBlur: () => virtualFocus.moveFocusToTop(), onClick: () => {
|
|
199
|
+
setHideCaret(!!(maxSelected === null || maxSelected === void 0 ? void 0 : maxSelected.isLimitReached));
|
|
200
|
+
value !== searchTerm && onChange(value);
|
|
201
|
+
}, onInput: onChangeHandler, type: "text", role: "combobox", onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, "aria-controls": filtered_options_util_1.default.getFilteredOptionsId(inputProps.id), "aria-expanded": !!isListOpen, autoComplete: "off", "aria-autocomplete": shouldAutocomplete ? "both" : "list", "aria-activedescendant": activeDecendantId, "aria-describedby": ariaDescribedBy, "aria-invalid": inputProps["aria-invalid"], placeholder: selectedOptions.length ? undefined : placeholder, className: (0, clsx_1.default)(inputClassName, "navds-combobox__input", "navds-body-short", `navds-body-short--${size}`, { "navds-combobox__input--hide-caret": hideCaret }) })));
|
|
199
202
|
});
|
|
200
203
|
exports.default = Input;
|
|
201
204
|
//# sourceMappingURL=Input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/form/combobox/Input/Input.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAKe;AACf,wCAAqC;AACrC,+CAAmD;AACnD,qGAA2E;AAC3E,sFAAsF;AACtF,sFAAsF;AACtF,mDAAkD;AAUlD,MAAM,KAAK,GAAG,IAAA,kBAAU,EACtB,
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/form/combobox/Input/Input.tsx"],"names":[],"mappings":"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"}
|
|
@@ -27,9 +27,14 @@ exports.ToggleListButton = void 0;
|
|
|
27
27
|
const react_1 = __importStar(require("react"));
|
|
28
28
|
const aksel_icons_1 = require("@navikt/aksel-icons");
|
|
29
29
|
const filteredOptionsContext_1 = require("../FilteredOptions/filteredOptionsContext");
|
|
30
|
+
const Input_context_1 = require("./Input.context");
|
|
30
31
|
exports.ToggleListButton = (0, react_1.forwardRef)(({ toggleListButtonLabel }, ref) => {
|
|
31
32
|
const { isListOpen, toggleIsListOpen } = (0, filteredOptionsContext_1.useFilteredOptionsContext)();
|
|
32
|
-
|
|
33
|
+
const { focusInput } = (0, Input_context_1.useInputContext)();
|
|
34
|
+
return (react_1.default.createElement("button", { type: "button", onPointerUp: () => {
|
|
35
|
+
toggleIsListOpen();
|
|
36
|
+
focusInput();
|
|
37
|
+
}, onKeyDown: ({ key }) => key === "Enter" && toggleIsListOpen(), className: "navds-combobox__button-toggle-list", "aria-expanded": isListOpen, tabIndex: -1, ref: ref },
|
|
33
38
|
react_1.default.createElement("span", { className: "navds-sr-only" }, toggleListButtonLabel !== null && toggleListButtonLabel !== void 0 ? toggleListButtonLabel : "Alternativer"),
|
|
34
39
|
isListOpen ? (react_1.default.createElement(aksel_icons_1.ChevronUpIcon, { "aria-hidden": true })) : (react_1.default.createElement(aksel_icons_1.ChevronDownIcon, { "aria-hidden": true }))));
|
|
35
40
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleListButton.js","sourceRoot":"","sources":["../../../../src/form/combobox/Input/ToggleListButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,qDAAqE;AACrE,sFAAsF;
|
|
1
|
+
{"version":3,"file":"ToggleListButton.js","sourceRoot":"","sources":["../../../../src/form/combobox/Input/ToggleListButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,qDAAqE;AACrE,sFAAsF;AACtF,mDAAkD;AAMrC,QAAA,gBAAgB,GAAG,IAAA,kBAAU,EAGxC,CAAC,EAAE,qBAAqB,EAAE,EAAE,GAAG,EAAE,EAAE;IACnC,MAAM,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAAG,IAAA,kDAAyB,GAAE,CAAC;IACrE,MAAM,EAAE,UAAU,EAAE,GAAG,IAAA,+BAAe,GAAE,CAAC;IACzC,OAAO,CACL,0CACE,IAAI,EAAC,QAAQ,EACb,WAAW,EAAE,GAAG,EAAE;YAChB,gBAAgB,EAAE,CAAC;YACnB,UAAU,EAAE,CAAC;QACf,CAAC,EACD,SAAS,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,gBAAgB,EAAE,EAC7D,SAAS,EAAC,oCAAoC,mBAC/B,UAAU,EACzB,QAAQ,EAAE,CAAC,CAAC,EACZ,GAAG,EAAE,GAAG;QAER,wCAAM,SAAS,EAAC,eAAe,IAC5B,qBAAqB,aAArB,qBAAqB,cAArB,qBAAqB,GAAI,cAAc,CACnC;QACN,UAAU,CAAC,CAAC,CAAC,CACZ,8BAAC,2BAAa,0BAAe,CAC9B,CAAC,CAAC,CAAC,CACF,8BAAC,6BAAe,0BAAe,CAChC,CACM,CACV,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAe,wBAAgB,CAAC"}
|
|
@@ -21,8 +21,10 @@ const Option = ({ option }) => {
|
|
|
21
21
|
return react_1.default.createElement(chips_1.Chips.Removable, { onClick: onClick }, option.label);
|
|
22
22
|
};
|
|
23
23
|
const SelectedOptions = ({ selectedOptions = [], size, children, }) => {
|
|
24
|
+
const { value } = (0, Input_context_1.useInputContext)();
|
|
25
|
+
const { isMultiSelect } = (0, selectedOptionsContext_1.useSelectedOptionsContext)();
|
|
24
26
|
return (react_1.default.createElement(chips_1.Chips, { className: "navds-combobox__selected-options", size: size },
|
|
25
|
-
selectedOptions.length
|
|
27
|
+
value.length === 0 || (isMultiSelect && selectedOptions.length)
|
|
26
28
|
? selectedOptions.map((option, i) => (react_1.default.createElement(Option, { key: option.label + i, option: option })))
|
|
27
29
|
: [],
|
|
28
30
|
children));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectedOptions.js","sourceRoot":"","sources":["../../../../src/form/combobox/SelectedOptions/SelectedOptions.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,0CAAuC;AACvC,0DAAyD;AAEzD,qEAAqE;AAQrE,MAAM,MAAM,GAAG,CAAC,EAAE,MAAM,EAA8B,EAAE,EAAE;IACxD,MAAM,EAAE,aAAa,EAAE,oBAAoB,EAAE,GAAG,IAAA,kDAAyB,GAAE,CAAC;IAC5E,MAAM,EAAE,UAAU,EAAE,GAAG,IAAA,+BAAe,GAAE,CAAC;IAEzC,MAAM,OAAO,GAAG,CAAC,CAAC,EAAE,EAAE;QACpB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,oBAAoB,CAAC,MAAM,CAAC,CAAC;QAC7B,UAAU,EAAE,CAAC;IACf,CAAC,CAAC;IAEF,IAAI,CAAC,aAAa,EAAE,CAAC;QACnB,OAAO,CACL,uCAAK,SAAS,EAAC,yCAAyC,IACrD,MAAM,CAAC,KAAK,CACT,CACP,CAAC;IACJ,CAAC;IAED,OAAO,8BAAC,aAAK,CAAC,SAAS,IAAC,OAAO,EAAE,OAAO,IAAG,MAAM,CAAC,KAAK,CAAmB,CAAC;AAC7E,CAAC,CAAC;AAEF,MAAM,eAAe,GAAmC,CAAC,EACvD,eAAe,GAAG,EAAE,EACpB,IAAI,EACJ,QAAQ,GACT,EAAE,EAAE;IACH,OAAO,CACL,8BAAC,aAAK,IAAC,SAAS,EAAC,kCAAkC,EAAC,IAAI,EAAE,IAAI;QAC3D,eAAe,CAAC,MAAM;
|
|
1
|
+
{"version":3,"file":"SelectedOptions.js","sourceRoot":"","sources":["../../../../src/form/combobox/SelectedOptions/SelectedOptions.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,0CAAuC;AACvC,0DAAyD;AAEzD,qEAAqE;AAQrE,MAAM,MAAM,GAAG,CAAC,EAAE,MAAM,EAA8B,EAAE,EAAE;IACxD,MAAM,EAAE,aAAa,EAAE,oBAAoB,EAAE,GAAG,IAAA,kDAAyB,GAAE,CAAC;IAC5E,MAAM,EAAE,UAAU,EAAE,GAAG,IAAA,+BAAe,GAAE,CAAC;IAEzC,MAAM,OAAO,GAAG,CAAC,CAAC,EAAE,EAAE;QACpB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,oBAAoB,CAAC,MAAM,CAAC,CAAC;QAC7B,UAAU,EAAE,CAAC;IACf,CAAC,CAAC;IAEF,IAAI,CAAC,aAAa,EAAE,CAAC;QACnB,OAAO,CACL,uCAAK,SAAS,EAAC,yCAAyC,IACrD,MAAM,CAAC,KAAK,CACT,CACP,CAAC;IACJ,CAAC;IAED,OAAO,8BAAC,aAAK,CAAC,SAAS,IAAC,OAAO,EAAE,OAAO,IAAG,MAAM,CAAC,KAAK,CAAmB,CAAC;AAC7E,CAAC,CAAC;AAEF,MAAM,eAAe,GAAmC,CAAC,EACvD,eAAe,GAAG,EAAE,EACpB,IAAI,EACJ,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,+BAAe,GAAE,CAAC;IACpC,MAAM,EAAE,aAAa,EAAE,GAAG,IAAA,kDAAyB,GAAE,CAAC;IACtD,OAAO,CACL,8BAAC,aAAK,IAAC,SAAS,EAAC,kCAAkC,EAAC,IAAI,EAAE,IAAI;QAC3D,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,aAAa,IAAI,eAAe,CAAC,MAAM,CAAC;YAC9D,CAAC,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,CACjC,8BAAC,MAAM,IAAC,GAAG,EAAE,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,MAAM,EAAE,MAAM,GAAI,CAClD,CAAC;YACJ,CAAC,CAAC,EAAE;QACL,QAAQ,CACH,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,eAAe,CAAC"}
|
|
@@ -33,7 +33,7 @@ const customOptionsContext_1 = require("../customOptionsContext");
|
|
|
33
33
|
const [SelectedOptionsContextProvider, useSelectedOptionsContext] = (0, create_context_1.createContext)();
|
|
34
34
|
exports.useSelectedOptionsContext = useSelectedOptionsContext;
|
|
35
35
|
const SelectedOptionsProvider = ({ children, value, }) => {
|
|
36
|
-
const { clearInput, focusInput } = (0, Input_context_1.useInputContext)();
|
|
36
|
+
const { clearInput, focusInput, setHideCaret } = (0, Input_context_1.useInputContext)();
|
|
37
37
|
const { customOptions, removeCustomOption, addCustomOption, setCustomOptions, } = (0, customOptionsContext_1.useComboboxCustomOptions)();
|
|
38
38
|
const { allowNewValues, isMultiSelect, selectedOptions: externalSelectedOptions, onToggleSelected, options, maxSelected, } = value;
|
|
39
39
|
const [internalSelectedOptions, setSelectedOptions] = (0, react_1.useState)([]);
|
|
@@ -73,6 +73,11 @@ const SelectedOptionsProvider = ({ children, value, }) => {
|
|
|
73
73
|
}
|
|
74
74
|
onToggleSelected === null || onToggleSelected === void 0 ? void 0 : onToggleSelected(option.value, false, isCustomOption);
|
|
75
75
|
}, [customOptions, onToggleSelected, removeCustomOption]);
|
|
76
|
+
const isLimitReached = (!!(maxSelected === null || maxSelected === void 0 ? void 0 : maxSelected.limit) && selectedOptions.length >= maxSelected.limit) ||
|
|
77
|
+
(!isMultiSelect && selectedOptions.length > 0);
|
|
78
|
+
(0, react_1.useEffect)(() => {
|
|
79
|
+
setHideCaret(isLimitReached);
|
|
80
|
+
}, [selectedOptions, setHideCaret, isLimitReached]);
|
|
76
81
|
const toggleOption = (0, react_1.useCallback)((option, event) => {
|
|
77
82
|
if ((0, combobox_utils_1.isInList)(option.value, selectedOptions)) {
|
|
78
83
|
removeSelectedOption(option);
|
|
@@ -90,7 +95,6 @@ const SelectedOptionsProvider = ({ children, value, }) => {
|
|
|
90
95
|
selectedOptions,
|
|
91
96
|
]);
|
|
92
97
|
const prevSelectedOptions = (0, hooks_1.usePrevious)(selectedOptions);
|
|
93
|
-
const isLimitReached = !!(maxSelected === null || maxSelected === void 0 ? void 0 : maxSelected.limit) && selectedOptions.length >= maxSelected.limit;
|
|
94
98
|
const selectedOptionsState = {
|
|
95
99
|
addSelectedOption,
|
|
96
100
|
isMultiSelect,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"selectedOptionsContext.js","sourceRoot":"","sources":["../../../../src/form/combobox/SelectedOptions/selectedOptionsContext.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+
|
|
1
|
+
{"version":3,"file":"selectedOptionsContext.js","sourceRoot":"","sources":["../../../../src/form/combobox/SelectedOptions/selectedOptionsContext.tsx"],"names":[],"mappings":"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"}
|
|
@@ -43,7 +43,7 @@ interface ErrorSummaryComponent extends React.ForwardRefExoticComponent<ErrorSum
|
|
|
43
43
|
*
|
|
44
44
|
* @example
|
|
45
45
|
* ```jsx
|
|
46
|
-
* <ErrorSummary heading="Du må
|
|
46
|
+
* <ErrorSummary heading="Du må rette disse feilene før du kan sende inn søknaden:">
|
|
47
47
|
* <ErrorSummary.Item href="#1">
|
|
48
48
|
* Felt må fylles ut med alder
|
|
49
49
|
* </ErrorSummary.Item>
|
|
@@ -51,7 +51,7 @@ const ErrorSummaryItem_1 = __importDefault(require("./ErrorSummaryItem"));
|
|
|
51
51
|
*
|
|
52
52
|
* @example
|
|
53
53
|
* ```jsx
|
|
54
|
-
* <ErrorSummary heading="Du må
|
|
54
|
+
* <ErrorSummary heading="Du må rette disse feilene før du kan sende inn søknaden:">
|
|
55
55
|
* <ErrorSummary.Item href="#1">
|
|
56
56
|
* Felt må fylles ut med alder
|
|
57
57
|
* </ErrorSummary.Item>
|
|
@@ -2,7 +2,7 @@ import cl from "clsx";
|
|
|
2
2
|
import React, { useRef, useState } from "react";
|
|
3
3
|
import { useInputContext } from "./Input/Input.context.js";
|
|
4
4
|
const ComboboxWrapper = ({ children, className, hasError, inputProps, inputSize, toggleIsListOpen, }) => {
|
|
5
|
-
const { toggleOpenButtonRef } = useInputContext();
|
|
5
|
+
const { toggleOpenButtonRef, clearInput } = useInputContext();
|
|
6
6
|
const wrapperRef = useRef(null);
|
|
7
7
|
const [hasFocusWithin, setHasFocusWithin] = useState(false);
|
|
8
8
|
function onFocusInsideWrapper(e) {
|
|
@@ -18,6 +18,7 @@ const ComboboxWrapper = ({ children, className, hasError, inputProps, inputSize,
|
|
|
18
18
|
if (!((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))) {
|
|
19
19
|
toggleIsListOpen(false);
|
|
20
20
|
setHasFocusWithin(false);
|
|
21
|
+
clearInput(e);
|
|
21
22
|
}
|
|
22
23
|
}
|
|
23
24
|
return (React.createElement("div", { ref: wrapperRef, className: cl(className, "navds-form-field", `navds-form-field--${inputSize}`, {
|
|
@@ -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,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAaxD,MAAM,eAAe,GAAG,CAAC,EACvB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,UAAU,EACV,SAAS,EACT,gBAAgB,GACK,EAAE,EAAE;IACzB,MAAM,EAAE,mBAAmB,EAAE,GAAG,eAAe,EAAE,CAAC;
|
|
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,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAaxD,MAAM,eAAe,GAAG,CAAC,EACvB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,UAAU,EACV,SAAS,EACT,gBAAgB,GACK,EAAE,EAAE;IACzB,MAAM,EAAE,mBAAmB,EAAE,UAAU,EAAE,GAAG,eAAe,EAAE,CAAC;IAE9D,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,CAAC;YACD,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACvB,iBAAiB,CAAC,IAAI,CAAC,CAAC;QAC1B,CAAC;IACH,CAAC;IAED,SAAS,aAAa,CAAC,CAAC;;QACtB,IAAI,CAAC,CAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAA,EAAE,CAAC;YACnD,gBAAgB,CAAC,KAAK,CAAC,CAAC;YACxB,iBAAiB,CAAC,KAAK,CAAC,CAAC;YACzB,UAAU,CAAC,CAAC,CAAC,CAAC;QAChB,CAAC;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,IAEpB,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC"}
|
|
@@ -2,8 +2,7 @@ const normalizeText = (text) => typeof text === "string" ? text.toLocaleLowerCas
|
|
|
2
2
|
const isPartOfText = (value, text) => normalizeText(text).includes(normalizeText(value !== null && value !== void 0 ? value : ""));
|
|
3
3
|
const getMatchingValuesFromList = (value, list) => list.filter((listItem) => isPartOfText(value, listItem.label));
|
|
4
4
|
const getFirstValueStartingWith = (text, list) => {
|
|
5
|
-
|
|
6
|
-
return list.find((listItem) => normalizeText(listItem.label).startsWith(normalizedText));
|
|
5
|
+
return list.find((listItem) => normalizeText(listItem.label).startsWith(text.toLocaleLowerCase()));
|
|
7
6
|
};
|
|
8
7
|
const getFilteredOptionsId = (comboboxId) => `${comboboxId}-filtered-options`;
|
|
9
8
|
const getOptionId = (comboboxId, option) => `${comboboxId.toLocaleLowerCase()}-option-${option
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filtered-options-util.js","sourceRoot":"","sources":["../../../../src/form/combobox/FilteredOptions/filtered-options-util.ts"],"names":[],"mappings":"AAEA,MAAM,aAAa,GAAG,CAAC,IAAY,EAAU,EAAE,CAC7C,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;AAElE,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,IAAY,EAAE,EAAE,CACnD,aAAa,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,CAAC,CAAC,CAAC;AAE3D,MAAM,yBAAyB,GAAG,CAAC,KAAa,EAAE,IAAsB,EAAE,EAAE,CAC1E,IAAI,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;AAEjE,MAAM,yBAAyB,GAAG,CAAC,IAAY,EAAE,IAAsB,EAAE,EAAE;IACzE,
|
|
1
|
+
{"version":3,"file":"filtered-options-util.js","sourceRoot":"","sources":["../../../../src/form/combobox/FilteredOptions/filtered-options-util.ts"],"names":[],"mappings":"AAEA,MAAM,aAAa,GAAG,CAAC,IAAY,EAAU,EAAE,CAC7C,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;AAElE,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,IAAY,EAAE,EAAE,CACnD,aAAa,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,CAAC,CAAC,CAAC;AAE3D,MAAM,yBAAyB,GAAG,CAAC,KAAa,EAAE,IAAsB,EAAE,EAAE,CAC1E,IAAI,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;AAEjE,MAAM,yBAAyB,GAAG,CAAC,IAAY,EAAE,IAAsB,EAAE,EAAE;IACzE,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE,CAC5B,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CACnE,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,oBAAoB,GAAG,CAAC,UAAkB,EAAE,EAAE,CAClD,GAAG,UAAU,mBAAmB,CAAC;AAEnC,MAAM,WAAW,GAAG,CAAC,UAAkB,EAAE,MAAc,EAAE,EAAE,CACzD,GAAG,UAAU,CAAC,iBAAiB,EAAE,WAAW,MAAM;KAC/C,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC;KACjB,iBAAiB,EAAE,EAAE,CAAC;AAE3B,MAAM,iBAAiB,GAAG,CAAC,UAAkB,EAAE,EAAE,CAC/C,GAAG,UAAU,sBAAsB,CAAC;AAEtC,MAAM,cAAc,GAAG,CAAC,UAAkB,EAAE,EAAE,CAAC,GAAG,UAAU,aAAa,CAAC;AAE1E,MAAM,WAAW,GAAG,CAAC,UAAkB,EAAE,EAAE,CAAC,GAAG,UAAU,UAAU,CAAC;AAEpE,MAAM,uBAAuB,GAAG,CAAC,UAAkB,EAAE,EAAE,CACrD,GAAG,UAAU,uBAAuB,CAAC;AAEvC,eAAe;IACb,aAAa;IACb,YAAY;IACZ,yBAAyB;IACzB,oBAAoB;IACpB,iBAAiB;IACjB,WAAW;IACX,cAAc;IACd,WAAW;IACX,uBAAuB;IACvB,yBAAyB;CAC1B,CAAC"}
|
|
@@ -16,7 +16,7 @@ const FilteredOptionsProvider = ({ children, value: props, }) => {
|
|
|
16
16
|
const { allowNewValues, filteredOptions: externalFilteredOptions, isListOpen: isExternalListOpen, isLoading, options, } = props;
|
|
17
17
|
const [filteredOptionsRef, setFilteredOptionsRef] = useState(null);
|
|
18
18
|
const virtualFocus = useVirtualFocus(filteredOptionsRef);
|
|
19
|
-
const { inputProps: { "aria-describedby": partialAriaDescribedBy, id }, value, searchTerm, setValue, setSearchTerm, shouldAutocomplete, } = useInputContext();
|
|
19
|
+
const { inputProps: { "aria-describedby": partialAriaDescribedBy, id }, value, searchTerm, setValue, setSearchTerm, shouldAutocomplete, setHideCaret, } = useInputContext();
|
|
20
20
|
const { maxSelected } = useSelectedOptionsContext();
|
|
21
21
|
const [isInternalListOpen, setInternalListOpen] = useState(false);
|
|
22
22
|
const { customOptions } = useComboboxCustomOptions();
|
|
@@ -66,8 +66,16 @@ const FilteredOptionsProvider = ({ children, value: props, }) => {
|
|
|
66
66
|
}, [isExternalListOpen, isInternalListOpen]);
|
|
67
67
|
const toggleIsListOpen = useCallback((newState) => {
|
|
68
68
|
virtualFocus.moveFocusToTop();
|
|
69
|
+
if (newState !== null && newState !== void 0 ? newState : !isInternalListOpen) {
|
|
70
|
+
setHideCaret(!!(maxSelected === null || maxSelected === void 0 ? void 0 : maxSelected.isLimitReached));
|
|
71
|
+
}
|
|
69
72
|
setInternalListOpen((oldState) => newState !== null && newState !== void 0 ? newState : !oldState);
|
|
70
|
-
}, [
|
|
73
|
+
}, [
|
|
74
|
+
virtualFocus,
|
|
75
|
+
maxSelected === null || maxSelected === void 0 ? void 0 : maxSelected.isLimitReached,
|
|
76
|
+
isInternalListOpen,
|
|
77
|
+
setHideCaret,
|
|
78
|
+
]);
|
|
71
79
|
const isValueNew = useMemo(() => Boolean(value) &&
|
|
72
80
|
!filteredOptionsMap[filteredOptionsUtils.getOptionId(id, value)], [filteredOptionsMap, id, value]);
|
|
73
81
|
const ariaDescribedBy = useMemo(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filteredOptionsContext.js","sourceRoot":"","sources":["../../../../src/form/combobox/FilteredOptions/filteredOptionsContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAkB,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC9E,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,qBAAqB,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACzE,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAC;AACtF,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AAEnE,OAAO,oBAAoB,MAAM,yBAAyB,CAAC;AAC3D,OAAO,eAAqC,MAAM,mBAAmB,CAAC;AA4BtE,MAAM,CAAC,8BAA8B,EAAE,yBAAyB,CAAC,GAC/D,aAAa,CAA8B;IACzC,IAAI,EAAE,wBAAwB;IAC9B,YAAY,EACV,yEAAyE;CAC5E,CAAC,CAAC;AAEL,MAAM,uBAAuB,GAAG,CAAC,EAC/B,QAAQ,EACR,KAAK,EAAE,KAAK,GACS,EAAE,EAAE;IACzB,MAAM,EACJ,cAAc,EACd,eAAe,EAAE,uBAAuB,EACxC,UAAU,EAAE,kBAAkB,EAC9B,SAAS,EACT,OAAO,GACR,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAC/C,QAAQ,CAA0B,IAAI,CAAC,CAAC;IAC1C,MAAM,YAAY,GAAG,eAAe,CAAC,kBAAkB,CAAC,CAAC;IACzD,MAAM,EACJ,UAAU,EAAE,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,EAAE,EAAE,EAC9D,KAAK,EACL,UAAU,EACV,QAAQ,EACR,aAAa,EACb,kBAAkB,
|
|
1
|
+
{"version":3,"file":"filteredOptionsContext.js","sourceRoot":"","sources":["../../../../src/form/combobox/FilteredOptions/filteredOptionsContext.tsx"],"names":[],"mappings":"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"}
|
|
@@ -13,6 +13,8 @@ interface InputContextValue extends FormFieldType {
|
|
|
13
13
|
setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
|
|
14
14
|
shouldAutocomplete?: boolean;
|
|
15
15
|
toggleOpenButtonRef: React.RefObject<HTMLButtonElement>;
|
|
16
|
+
hideCaret: boolean;
|
|
17
|
+
setHideCaret: React.Dispatch<React.SetStateAction<boolean>>;
|
|
16
18
|
}
|
|
17
19
|
declare const useInputContext: <S extends boolean = true>(strict?: S) => S extends true ? InputContextValue : InputContextValue | undefined;
|
|
18
20
|
interface Props {
|
|
@@ -19,6 +19,7 @@ const InputProvider = ({ children, value: props }) => {
|
|
|
19
19
|
const inputRef = useRef(null);
|
|
20
20
|
const toggleOpenButtonRef = useRef(null);
|
|
21
21
|
const [internalValue, setInternalValue] = useState(defaultValue);
|
|
22
|
+
const [hideCaret, setHideCaret] = useState(false);
|
|
22
23
|
const value = useMemo(() => String(externalValue !== null && externalValue !== void 0 ? externalValue : internalValue), [externalValue, internalValue]);
|
|
23
24
|
const [searchTerm, setSearchTerm] = useState(value);
|
|
24
25
|
const onChange = useCallback((newValue) => {
|
|
@@ -50,7 +51,9 @@ const InputProvider = ({ children, value: props }) => {
|
|
|
50
51
|
searchTerm,
|
|
51
52
|
setSearchTerm,
|
|
52
53
|
shouldAutocomplete,
|
|
53
|
-
toggleOpenButtonRef
|
|
54
|
+
toggleOpenButtonRef,
|
|
55
|
+
hideCaret,
|
|
56
|
+
setHideCaret });
|
|
54
57
|
return (React.createElement(InputContextProvider, Object.assign({}, contextValue), children));
|
|
55
58
|
};
|
|
56
59
|
export { InputProvider as InputContextProvider, useInputContext };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.context.js","sourceRoot":"","sources":["../../../../src/form/combobox/Input/Input.context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAiB,YAAY,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"Input.context.js","sourceRoot":"","sources":["../../../../src/form/combobox/Input/Input.context.tsx"],"names":[],"mappings":"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"}
|
|
@@ -18,11 +18,11 @@ import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsCon
|
|
|
18
18
|
import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext.js";
|
|
19
19
|
import { useInputContext } from "./Input.context.js";
|
|
20
20
|
const Input = forwardRef((_a, ref) => {
|
|
21
|
-
var { inputClassName, shouldShowSelectedOptions } = _a, rest = __rest(_a, ["inputClassName", "shouldShowSelectedOptions"]);
|
|
21
|
+
var { inputClassName, shouldShowSelectedOptions, placeholder } = _a, rest = __rest(_a, ["inputClassName", "shouldShowSelectedOptions", "placeholder"]);
|
|
22
22
|
const internalRef = useRef(null);
|
|
23
23
|
const mergedRefs = useMergeRefs(ref, internalRef);
|
|
24
|
-
const { clearInput, inputProps, onChange, size, value, searchTerm, setValue, } = useInputContext();
|
|
25
|
-
const { selectedOptions, removeSelectedOption, toggleOption, isMultiSelect, } = useSelectedOptionsContext();
|
|
24
|
+
const { clearInput, inputProps, onChange, size, value, searchTerm, setValue, hideCaret, setHideCaret, } = useInputContext();
|
|
25
|
+
const { selectedOptions, removeSelectedOption, toggleOption, isMultiSelect, maxSelected, } = useSelectedOptionsContext();
|
|
26
26
|
const { activeDecendantId, allowNewValues, currentOption, filteredOptions, isValueNew, toggleIsListOpen, isListOpen, ariaDescribedBy, setIsMouseLastUsedInputDevice, shouldAutocomplete, virtualFocus, } = useFilteredOptionsContext();
|
|
27
27
|
const onEnter = useCallback((event) => {
|
|
28
28
|
const isTextInSelectedOptions = (text) => selectedOptions.some((option) => option.label.toLocaleLowerCase() === text.toLocaleLowerCase());
|
|
@@ -44,7 +44,7 @@ const Input = forwardRef((_a, ref) => {
|
|
|
44
44
|
// Autocompleting or adding a new value
|
|
45
45
|
const selectedValue = allowNewValues && isValueNew
|
|
46
46
|
? { label: value, value }
|
|
47
|
-
: filteredOptions[0];
|
|
47
|
+
: filteredOptionsUtil.getFirstValueStartingWith(value, filteredOptions) || filteredOptions[0];
|
|
48
48
|
if (!selectedValue) {
|
|
49
49
|
return;
|
|
50
50
|
}
|
|
@@ -167,7 +167,10 @@ const Input = forwardRef((_a, ref) => {
|
|
|
167
167
|
virtualFocus.moveFocusToTop();
|
|
168
168
|
onChange(newValue);
|
|
169
169
|
}, [filteredOptions.length, virtualFocus, onChange, toggleIsListOpen]);
|
|
170
|
-
return (React.createElement("input", Object.assign({}, rest, omit(inputProps, ["aria-invalid"]), { ref: mergedRefs, value: value, onBlur: () => virtualFocus.moveFocusToTop(), onClick: () =>
|
|
170
|
+
return (React.createElement("input", Object.assign({}, rest, omit(inputProps, ["aria-invalid"]), { ref: mergedRefs, value: value, onBlur: () => virtualFocus.moveFocusToTop(), onClick: () => {
|
|
171
|
+
setHideCaret(!!(maxSelected === null || maxSelected === void 0 ? void 0 : maxSelected.isLimitReached));
|
|
172
|
+
value !== searchTerm && onChange(value);
|
|
173
|
+
}, onInput: onChangeHandler, type: "text", role: "combobox", onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, "aria-controls": filteredOptionsUtil.getFilteredOptionsId(inputProps.id), "aria-expanded": !!isListOpen, autoComplete: "off", "aria-autocomplete": shouldAutocomplete ? "both" : "list", "aria-activedescendant": activeDecendantId, "aria-describedby": ariaDescribedBy, "aria-invalid": inputProps["aria-invalid"], placeholder: selectedOptions.length ? undefined : placeholder, className: cl(inputClassName, "navds-combobox__input", "navds-body-short", `navds-body-short--${size}`, { "navds-combobox__input--hide-caret": hideCaret }) })));
|
|
171
174
|
});
|
|
172
175
|
export default Input;
|
|
173
176
|
//# 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,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAEZ,UAAU,EACV,WAAW,EACX,MAAM,GACP,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,mBAAmB,MAAM,0CAA0C,CAAC;AAC3E,OAAO,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAC;AACtF,OAAO,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAC;AACtF,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAUlD,MAAM,KAAK,GAAG,UAAU,CACtB,
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/form/combobox/Input/Input.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,14 @@
|
|
|
1
1
|
import React, { forwardRef } from "react";
|
|
2
2
|
import { ChevronDownIcon, ChevronUpIcon } from "@navikt/aksel-icons";
|
|
3
3
|
import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext.js";
|
|
4
|
+
import { useInputContext } from "./Input.context.js";
|
|
4
5
|
export const ToggleListButton = forwardRef(({ toggleListButtonLabel }, ref) => {
|
|
5
6
|
const { isListOpen, toggleIsListOpen } = useFilteredOptionsContext();
|
|
6
|
-
|
|
7
|
+
const { focusInput } = useInputContext();
|
|
8
|
+
return (React.createElement("button", { type: "button", onPointerUp: () => {
|
|
9
|
+
toggleIsListOpen();
|
|
10
|
+
focusInput();
|
|
11
|
+
}, onKeyDown: ({ key }) => key === "Enter" && toggleIsListOpen(), className: "navds-combobox__button-toggle-list", "aria-expanded": isListOpen, tabIndex: -1, ref: ref },
|
|
7
12
|
React.createElement("span", { className: "navds-sr-only" }, toggleListButtonLabel !== null && toggleListButtonLabel !== void 0 ? toggleListButtonLabel : "Alternativer"),
|
|
8
13
|
isListOpen ? (React.createElement(ChevronUpIcon, { "aria-hidden": true })) : (React.createElement(ChevronDownIcon, { "aria-hidden": true }))));
|
|
9
14
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleListButton.js","sourceRoot":"","sources":["../../../../src/form/combobox/Input/ToggleListButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACrE,OAAO,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAC;
|
|
1
|
+
{"version":3,"file":"ToggleListButton.js","sourceRoot":"","sources":["../../../../src/form/combobox/Input/ToggleListButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACrE,OAAO,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAC;AACtF,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAMlD,MAAM,CAAC,MAAM,gBAAgB,GAAG,UAAU,CAGxC,CAAC,EAAE,qBAAqB,EAAE,EAAE,GAAG,EAAE,EAAE;IACnC,MAAM,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAAG,yBAAyB,EAAE,CAAC;IACrE,MAAM,EAAE,UAAU,EAAE,GAAG,eAAe,EAAE,CAAC;IACzC,OAAO,CACL,gCACE,IAAI,EAAC,QAAQ,EACb,WAAW,EAAE,GAAG,EAAE;YAChB,gBAAgB,EAAE,CAAC;YACnB,UAAU,EAAE,CAAC;QACf,CAAC,EACD,SAAS,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,gBAAgB,EAAE,EAC7D,SAAS,EAAC,oCAAoC,mBAC/B,UAAU,EACzB,QAAQ,EAAE,CAAC,CAAC,EACZ,GAAG,EAAE,GAAG;QAER,8BAAM,SAAS,EAAC,eAAe,IAC5B,qBAAqB,aAArB,qBAAqB,cAArB,qBAAqB,GAAI,cAAc,CACnC;QACN,UAAU,CAAC,CAAC,CAAC,CACZ,oBAAC,aAAa,0BAAe,CAC9B,CAAC,CAAC,CAAC,CACF,oBAAC,eAAe,0BAAe,CAChC,CACM,CACV,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,gBAAgB,CAAC"}
|
|
@@ -16,8 +16,10 @@ const Option = ({ option }) => {
|
|
|
16
16
|
return React.createElement(Chips.Removable, { onClick: onClick }, option.label);
|
|
17
17
|
};
|
|
18
18
|
const SelectedOptions = ({ selectedOptions = [], size, children, }) => {
|
|
19
|
+
const { value } = useInputContext();
|
|
20
|
+
const { isMultiSelect } = useSelectedOptionsContext();
|
|
19
21
|
return (React.createElement(Chips, { className: "navds-combobox__selected-options", size: size },
|
|
20
|
-
selectedOptions.length
|
|
22
|
+
value.length === 0 || (isMultiSelect && selectedOptions.length)
|
|
21
23
|
? selectedOptions.map((option, i) => (React.createElement(Option, { key: option.label + i, option: option })))
|
|
22
24
|
: [],
|
|
23
25
|
children));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectedOptions.js","sourceRoot":"","sources":["../../../../src/form/combobox/SelectedOptions/SelectedOptions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEzD,OAAO,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAQrE,MAAM,MAAM,GAAG,CAAC,EAAE,MAAM,EAA8B,EAAE,EAAE;IACxD,MAAM,EAAE,aAAa,EAAE,oBAAoB,EAAE,GAAG,yBAAyB,EAAE,CAAC;IAC5E,MAAM,EAAE,UAAU,EAAE,GAAG,eAAe,EAAE,CAAC;IAEzC,MAAM,OAAO,GAAG,CAAC,CAAC,EAAE,EAAE;QACpB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,oBAAoB,CAAC,MAAM,CAAC,CAAC;QAC7B,UAAU,EAAE,CAAC;IACf,CAAC,CAAC;IAEF,IAAI,CAAC,aAAa,EAAE,CAAC;QACnB,OAAO,CACL,6BAAK,SAAS,EAAC,yCAAyC,IACrD,MAAM,CAAC,KAAK,CACT,CACP,CAAC;IACJ,CAAC;IAED,OAAO,oBAAC,KAAK,CAAC,SAAS,IAAC,OAAO,EAAE,OAAO,IAAG,MAAM,CAAC,KAAK,CAAmB,CAAC;AAC7E,CAAC,CAAC;AAEF,MAAM,eAAe,GAAmC,CAAC,EACvD,eAAe,GAAG,EAAE,EACpB,IAAI,EACJ,QAAQ,GACT,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,KAAK,IAAC,SAAS,EAAC,kCAAkC,EAAC,IAAI,EAAE,IAAI;QAC3D,eAAe,CAAC,MAAM;
|
|
1
|
+
{"version":3,"file":"SelectedOptions.js","sourceRoot":"","sources":["../../../../src/form/combobox/SelectedOptions/SelectedOptions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEzD,OAAO,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAQrE,MAAM,MAAM,GAAG,CAAC,EAAE,MAAM,EAA8B,EAAE,EAAE;IACxD,MAAM,EAAE,aAAa,EAAE,oBAAoB,EAAE,GAAG,yBAAyB,EAAE,CAAC;IAC5E,MAAM,EAAE,UAAU,EAAE,GAAG,eAAe,EAAE,CAAC;IAEzC,MAAM,OAAO,GAAG,CAAC,CAAC,EAAE,EAAE;QACpB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,oBAAoB,CAAC,MAAM,CAAC,CAAC;QAC7B,UAAU,EAAE,CAAC;IACf,CAAC,CAAC;IAEF,IAAI,CAAC,aAAa,EAAE,CAAC;QACnB,OAAO,CACL,6BAAK,SAAS,EAAC,yCAAyC,IACrD,MAAM,CAAC,KAAK,CACT,CACP,CAAC;IACJ,CAAC;IAED,OAAO,oBAAC,KAAK,CAAC,SAAS,IAAC,OAAO,EAAE,OAAO,IAAG,MAAM,CAAC,KAAK,CAAmB,CAAC;AAC7E,CAAC,CAAC;AAEF,MAAM,eAAe,GAAmC,CAAC,EACvD,eAAe,GAAG,EAAE,EACpB,IAAI,EACJ,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,EAAE,KAAK,EAAE,GAAG,eAAe,EAAE,CAAC;IACpC,MAAM,EAAE,aAAa,EAAE,GAAG,yBAAyB,EAAE,CAAC;IACtD,OAAO,CACL,oBAAC,KAAK,IAAC,SAAS,EAAC,kCAAkC,EAAC,IAAI,EAAE,IAAI;QAC3D,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,aAAa,IAAI,eAAe,CAAC,MAAM,CAAC;YAC9D,CAAC,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,CACjC,oBAAC,MAAM,IAAC,GAAG,EAAE,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,MAAM,EAAE,MAAM,GAAI,CAClD,CAAC;YACJ,CAAC,CAAC,EAAE;QACL,QAAQ,CACH,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useCallback, useMemo, useState } from "react";
|
|
1
|
+
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
|
2
2
|
import { createContext } from "../../../util/create-context.js";
|
|
3
3
|
import { usePrevious } from "../../../util/hooks/index.js";
|
|
4
4
|
import { useInputContext } from "../Input/Input.context.js";
|
|
@@ -6,7 +6,7 @@ import { isInList } from "../combobox-utils.js";
|
|
|
6
6
|
import { useComboboxCustomOptions } from "../customOptionsContext.js";
|
|
7
7
|
const [SelectedOptionsContextProvider, useSelectedOptionsContext] = createContext();
|
|
8
8
|
const SelectedOptionsProvider = ({ children, value, }) => {
|
|
9
|
-
const { clearInput, focusInput } = useInputContext();
|
|
9
|
+
const { clearInput, focusInput, setHideCaret } = useInputContext();
|
|
10
10
|
const { customOptions, removeCustomOption, addCustomOption, setCustomOptions, } = useComboboxCustomOptions();
|
|
11
11
|
const { allowNewValues, isMultiSelect, selectedOptions: externalSelectedOptions, onToggleSelected, options, maxSelected, } = value;
|
|
12
12
|
const [internalSelectedOptions, setSelectedOptions] = useState([]);
|
|
@@ -46,6 +46,11 @@ const SelectedOptionsProvider = ({ children, value, }) => {
|
|
|
46
46
|
}
|
|
47
47
|
onToggleSelected === null || onToggleSelected === void 0 ? void 0 : onToggleSelected(option.value, false, isCustomOption);
|
|
48
48
|
}, [customOptions, onToggleSelected, removeCustomOption]);
|
|
49
|
+
const isLimitReached = (!!(maxSelected === null || maxSelected === void 0 ? void 0 : maxSelected.limit) && selectedOptions.length >= maxSelected.limit) ||
|
|
50
|
+
(!isMultiSelect && selectedOptions.length > 0);
|
|
51
|
+
useEffect(() => {
|
|
52
|
+
setHideCaret(isLimitReached);
|
|
53
|
+
}, [selectedOptions, setHideCaret, isLimitReached]);
|
|
49
54
|
const toggleOption = useCallback((option, event) => {
|
|
50
55
|
if (isInList(option.value, selectedOptions)) {
|
|
51
56
|
removeSelectedOption(option);
|
|
@@ -63,7 +68,6 @@ const SelectedOptionsProvider = ({ children, value, }) => {
|
|
|
63
68
|
selectedOptions,
|
|
64
69
|
]);
|
|
65
70
|
const prevSelectedOptions = usePrevious(selectedOptions);
|
|
66
|
-
const isLimitReached = !!(maxSelected === null || maxSelected === void 0 ? void 0 : maxSelected.limit) && selectedOptions.length >= maxSelected.limit;
|
|
67
71
|
const selectedOptionsState = {
|
|
68
72
|
addSelectedOption,
|
|
69
73
|
isMultiSelect,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"selectedOptionsContext.js","sourceRoot":"","sources":["../../../../src/form/combobox/SelectedOptions/selectedOptionsContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"selectedOptionsContext.js","sourceRoot":"","sources":["../../../../src/form/combobox/SelectedOptions/selectedOptionsContext.tsx"],"names":[],"mappings":"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"}
|
|
@@ -43,7 +43,7 @@ interface ErrorSummaryComponent extends React.ForwardRefExoticComponent<ErrorSum
|
|
|
43
43
|
*
|
|
44
44
|
* @example
|
|
45
45
|
* ```jsx
|
|
46
|
-
* <ErrorSummary heading="Du må
|
|
46
|
+
* <ErrorSummary heading="Du må rette disse feilene før du kan sende inn søknaden:">
|
|
47
47
|
* <ErrorSummary.Item href="#1">
|
|
48
48
|
* Felt må fylles ut med alder
|
|
49
49
|
* </ErrorSummary.Item>
|
|
@@ -22,7 +22,7 @@ import ErrorSummaryItem from "./ErrorSummaryItem.js";
|
|
|
22
22
|
*
|
|
23
23
|
* @example
|
|
24
24
|
* ```jsx
|
|
25
|
-
* <ErrorSummary heading="Du må
|
|
25
|
+
* <ErrorSummary heading="Du må rette disse feilene før du kan sende inn søknaden:">
|
|
26
26
|
* <ErrorSummary.Item href="#1">
|
|
27
27
|
* Felt må fylles ut med alder
|
|
28
28
|
* </ErrorSummary.Item>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@navikt/ds-react",
|
|
3
|
-
"version": "6.16.
|
|
3
|
+
"version": "6.16.3",
|
|
4
4
|
"description": "React components from the Norwegian Labour and Welfare Administration.",
|
|
5
5
|
"author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -594,8 +594,8 @@
|
|
|
594
594
|
"dependencies": {
|
|
595
595
|
"@floating-ui/react": "0.25.4",
|
|
596
596
|
"@floating-ui/react-dom": "^2.0.9",
|
|
597
|
-
"@navikt/aksel-icons": "^6.16.
|
|
598
|
-
"@navikt/ds-tokens": "^6.16.
|
|
597
|
+
"@navikt/aksel-icons": "^6.16.3",
|
|
598
|
+
"@navikt/ds-tokens": "^6.16.3",
|
|
599
599
|
"clsx": "^2.1.0",
|
|
600
600
|
"date-fns": "^3.0.0",
|
|
601
601
|
"react-day-picker": "8.10.0"
|
|
@@ -21,7 +21,7 @@ const ComboboxWrapper = ({
|
|
|
21
21
|
inputSize,
|
|
22
22
|
toggleIsListOpen,
|
|
23
23
|
}: ComboboxWrapperProps) => {
|
|
24
|
-
const { toggleOpenButtonRef } = useInputContext();
|
|
24
|
+
const { toggleOpenButtonRef, clearInput } = useInputContext();
|
|
25
25
|
|
|
26
26
|
const wrapperRef = useRef<HTMLDivElement | null>(null);
|
|
27
27
|
const [hasFocusWithin, setHasFocusWithin] = useState(false);
|
|
@@ -40,6 +40,7 @@ const ComboboxWrapper = ({
|
|
|
40
40
|
if (!wrapperRef.current?.contains(e.relatedTarget)) {
|
|
41
41
|
toggleIsListOpen(false);
|
|
42
42
|
setHasFocusWithin(false);
|
|
43
|
+
clearInput(e);
|
|
43
44
|
}
|
|
44
45
|
}
|
|
45
46
|
|
|
@@ -10,9 +10,8 @@ const getMatchingValuesFromList = (value: string, list: ComboboxOption[]) =>
|
|
|
10
10
|
list.filter((listItem) => isPartOfText(value, listItem.label));
|
|
11
11
|
|
|
12
12
|
const getFirstValueStartingWith = (text: string, list: ComboboxOption[]) => {
|
|
13
|
-
const normalizedText = normalizeText(text);
|
|
14
13
|
return list.find((listItem) =>
|
|
15
|
-
normalizeText(listItem.label).startsWith(
|
|
14
|
+
normalizeText(listItem.label).startsWith(text.toLocaleLowerCase()),
|
|
16
15
|
);
|
|
17
16
|
};
|
|
18
17
|
|
|
@@ -64,6 +64,7 @@ const FilteredOptionsProvider = ({
|
|
|
64
64
|
setValue,
|
|
65
65
|
setSearchTerm,
|
|
66
66
|
shouldAutocomplete,
|
|
67
|
+
setHideCaret,
|
|
67
68
|
} = useInputContext();
|
|
68
69
|
const { maxSelected } = useSelectedOptionsContext();
|
|
69
70
|
|
|
@@ -136,9 +137,17 @@ const FilteredOptionsProvider = ({
|
|
|
136
137
|
const toggleIsListOpen = useCallback(
|
|
137
138
|
(newState?: boolean) => {
|
|
138
139
|
virtualFocus.moveFocusToTop();
|
|
140
|
+
if (newState ?? !isInternalListOpen) {
|
|
141
|
+
setHideCaret(!!maxSelected?.isLimitReached);
|
|
142
|
+
}
|
|
139
143
|
setInternalListOpen((oldState) => newState ?? !oldState);
|
|
140
144
|
},
|
|
141
|
-
[
|
|
145
|
+
[
|
|
146
|
+
virtualFocus,
|
|
147
|
+
maxSelected?.isLimitReached,
|
|
148
|
+
isInternalListOpen,
|
|
149
|
+
setHideCaret,
|
|
150
|
+
],
|
|
142
151
|
);
|
|
143
152
|
|
|
144
153
|
const isValueNew = useMemo(
|
|
@@ -16,6 +16,8 @@ interface InputContextValue extends FormFieldType {
|
|
|
16
16
|
setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
|
|
17
17
|
shouldAutocomplete?: boolean;
|
|
18
18
|
toggleOpenButtonRef: React.RefObject<HTMLButtonElement>;
|
|
19
|
+
hideCaret: boolean;
|
|
20
|
+
setHideCaret: React.Dispatch<React.SetStateAction<boolean>>;
|
|
19
21
|
}
|
|
20
22
|
|
|
21
23
|
const [InputContextProvider, useInputContext] =
|
|
@@ -69,6 +71,7 @@ const InputProvider = ({ children, value: props }: Props) => {
|
|
|
69
71
|
const inputRef = useRef<HTMLInputElement | null>(null);
|
|
70
72
|
const toggleOpenButtonRef = useRef<HTMLButtonElement>(null);
|
|
71
73
|
const [internalValue, setInternalValue] = useState<string>(defaultValue);
|
|
74
|
+
const [hideCaret, setHideCaret] = useState(false);
|
|
72
75
|
|
|
73
76
|
const value = useMemo(
|
|
74
77
|
() => String(externalValue ?? internalValue),
|
|
@@ -119,6 +122,8 @@ const InputProvider = ({ children, value: props }: Props) => {
|
|
|
119
122
|
setSearchTerm,
|
|
120
123
|
shouldAutocomplete,
|
|
121
124
|
toggleOpenButtonRef,
|
|
125
|
+
hideCaret,
|
|
126
|
+
setHideCaret,
|
|
122
127
|
};
|
|
123
128
|
|
|
124
129
|
return (
|
|
@@ -21,7 +21,10 @@ interface InputProps
|
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
const Input = forwardRef<HTMLInputElement, InputProps>(
|
|
24
|
-
(
|
|
24
|
+
(
|
|
25
|
+
{ inputClassName, shouldShowSelectedOptions, placeholder, ...rest },
|
|
26
|
+
ref,
|
|
27
|
+
) => {
|
|
25
28
|
const internalRef = useRef<HTMLInputElement>(null);
|
|
26
29
|
const mergedRefs = useMergeRefs(ref, internalRef);
|
|
27
30
|
const {
|
|
@@ -32,12 +35,15 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
|
|
|
32
35
|
value,
|
|
33
36
|
searchTerm,
|
|
34
37
|
setValue,
|
|
38
|
+
hideCaret,
|
|
39
|
+
setHideCaret,
|
|
35
40
|
} = useInputContext();
|
|
36
41
|
const {
|
|
37
42
|
selectedOptions,
|
|
38
43
|
removeSelectedOption,
|
|
39
44
|
toggleOption,
|
|
40
45
|
isMultiSelect,
|
|
46
|
+
maxSelected,
|
|
41
47
|
} = useSelectedOptionsContext();
|
|
42
48
|
const {
|
|
43
49
|
activeDecendantId,
|
|
@@ -78,7 +84,10 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
|
|
|
78
84
|
const selectedValue =
|
|
79
85
|
allowNewValues && isValueNew
|
|
80
86
|
? { label: value, value }
|
|
81
|
-
:
|
|
87
|
+
: filteredOptionsUtil.getFirstValueStartingWith(
|
|
88
|
+
value,
|
|
89
|
+
filteredOptions,
|
|
90
|
+
) || filteredOptions[0];
|
|
82
91
|
|
|
83
92
|
if (!selectedValue) {
|
|
84
93
|
return;
|
|
@@ -217,7 +226,10 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
|
|
|
217
226
|
ref={mergedRefs}
|
|
218
227
|
value={value}
|
|
219
228
|
onBlur={() => virtualFocus.moveFocusToTop()}
|
|
220
|
-
onClick={() =>
|
|
229
|
+
onClick={() => {
|
|
230
|
+
setHideCaret(!!maxSelected?.isLimitReached);
|
|
231
|
+
value !== searchTerm && onChange(value);
|
|
232
|
+
}}
|
|
221
233
|
onInput={onChangeHandler}
|
|
222
234
|
type="text"
|
|
223
235
|
role="combobox"
|
|
@@ -230,12 +242,13 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
|
|
|
230
242
|
aria-activedescendant={activeDecendantId}
|
|
231
243
|
aria-describedby={ariaDescribedBy}
|
|
232
244
|
aria-invalid={inputProps["aria-invalid"]}
|
|
233
|
-
placeholder={selectedOptions.length ? undefined :
|
|
245
|
+
placeholder={selectedOptions.length ? undefined : placeholder}
|
|
234
246
|
className={cl(
|
|
235
247
|
inputClassName,
|
|
236
248
|
"navds-combobox__input",
|
|
237
249
|
"navds-body-short",
|
|
238
250
|
`navds-body-short--${size}`,
|
|
251
|
+
{ "navds-combobox__input--hide-caret": hideCaret },
|
|
239
252
|
)}
|
|
240
253
|
/>
|
|
241
254
|
);
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React, { forwardRef } from "react";
|
|
2
2
|
import { ChevronDownIcon, ChevronUpIcon } from "@navikt/aksel-icons";
|
|
3
3
|
import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext";
|
|
4
|
+
import { useInputContext } from "./Input.context";
|
|
4
5
|
|
|
5
6
|
interface ToggleListButtonProps {
|
|
6
7
|
toggleListButtonLabel?: string;
|
|
@@ -11,10 +12,14 @@ export const ToggleListButton = forwardRef<
|
|
|
11
12
|
ToggleListButtonProps
|
|
12
13
|
>(({ toggleListButtonLabel }, ref) => {
|
|
13
14
|
const { isListOpen, toggleIsListOpen } = useFilteredOptionsContext();
|
|
15
|
+
const { focusInput } = useInputContext();
|
|
14
16
|
return (
|
|
15
17
|
<button
|
|
16
18
|
type="button"
|
|
17
|
-
onPointerUp={() =>
|
|
19
|
+
onPointerUp={() => {
|
|
20
|
+
toggleIsListOpen();
|
|
21
|
+
focusInput();
|
|
22
|
+
}}
|
|
18
23
|
onKeyDown={({ key }) => key === "Enter" && toggleIsListOpen()}
|
|
19
24
|
className="navds-combobox__button-toggle-list"
|
|
20
25
|
aria-expanded={isListOpen}
|
|
@@ -36,9 +36,11 @@ const SelectedOptions: React.FC<SelectedOptionsProps> = ({
|
|
|
36
36
|
size,
|
|
37
37
|
children,
|
|
38
38
|
}) => {
|
|
39
|
+
const { value } = useInputContext();
|
|
40
|
+
const { isMultiSelect } = useSelectedOptionsContext();
|
|
39
41
|
return (
|
|
40
42
|
<Chips className="navds-combobox__selected-options" size={size}>
|
|
41
|
-
{selectedOptions.length
|
|
43
|
+
{value.length === 0 || (isMultiSelect && selectedOptions.length)
|
|
42
44
|
? selectedOptions.map((option, i) => (
|
|
43
45
|
<Option key={option.label + i} option={option} />
|
|
44
46
|
))
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useCallback, useMemo, useState } from "react";
|
|
1
|
+
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
|
2
2
|
import { createContext } from "../../../util/create-context";
|
|
3
3
|
import { usePrevious } from "../../../util/hooks";
|
|
4
4
|
import { useInputContext } from "../Input/Input.context";
|
|
@@ -33,7 +33,7 @@ const SelectedOptionsProvider = ({
|
|
|
33
33
|
"allowNewValues" | "isMultiSelect" | "onToggleSelected" | "maxSelected"
|
|
34
34
|
> & { options: ComboboxOption[]; selectedOptions?: ComboboxOption[] };
|
|
35
35
|
}) => {
|
|
36
|
-
const { clearInput, focusInput } = useInputContext();
|
|
36
|
+
const { clearInput, focusInput, setHideCaret } = useInputContext();
|
|
37
37
|
const {
|
|
38
38
|
customOptions,
|
|
39
39
|
removeCustomOption,
|
|
@@ -101,6 +101,14 @@ const SelectedOptionsProvider = ({
|
|
|
101
101
|
[customOptions, onToggleSelected, removeCustomOption],
|
|
102
102
|
);
|
|
103
103
|
|
|
104
|
+
const isLimitReached =
|
|
105
|
+
(!!maxSelected?.limit && selectedOptions.length >= maxSelected.limit) ||
|
|
106
|
+
(!isMultiSelect && selectedOptions.length > 0);
|
|
107
|
+
|
|
108
|
+
useEffect(() => {
|
|
109
|
+
setHideCaret(isLimitReached);
|
|
110
|
+
}, [selectedOptions, setHideCaret, isLimitReached]);
|
|
111
|
+
|
|
104
112
|
const toggleOption = useCallback(
|
|
105
113
|
(
|
|
106
114
|
option: ComboboxOption,
|
|
@@ -125,9 +133,6 @@ const SelectedOptionsProvider = ({
|
|
|
125
133
|
|
|
126
134
|
const prevSelectedOptions = usePrevious<ComboboxOption[]>(selectedOptions);
|
|
127
135
|
|
|
128
|
-
const isLimitReached =
|
|
129
|
-
!!maxSelected?.limit && selectedOptions.length >= maxSelected.limit;
|
|
130
|
-
|
|
131
136
|
const selectedOptionsState = {
|
|
132
137
|
addSelectedOption,
|
|
133
138
|
isMultiSelect,
|
|
@@ -3,35 +3,32 @@ import { act, render, screen } from "@testing-library/react";
|
|
|
3
3
|
import userEvent from "@testing-library/user-event";
|
|
4
4
|
import React, { useId } from "react";
|
|
5
5
|
import { describe, expect, test, vi } from "vitest";
|
|
6
|
-
import { UNSAFE_Combobox } from "../index";
|
|
6
|
+
import { ComboboxProps, UNSAFE_Combobox } from "../index";
|
|
7
7
|
|
|
8
8
|
const options = [
|
|
9
|
-
"banana",
|
|
10
9
|
"apple",
|
|
11
10
|
"apple pie",
|
|
12
|
-
"
|
|
13
|
-
"pear",
|
|
11
|
+
"banana",
|
|
14
12
|
"grape",
|
|
13
|
+
"grape fruit",
|
|
15
14
|
"kiwi",
|
|
16
15
|
"mango",
|
|
17
16
|
"passion fruit",
|
|
17
|
+
"pear",
|
|
18
18
|
"pineapple",
|
|
19
19
|
"strawberry",
|
|
20
|
+
"tangerine",
|
|
20
21
|
"watermelon",
|
|
21
|
-
"grape fruit",
|
|
22
22
|
];
|
|
23
23
|
|
|
24
|
-
const App = (
|
|
24
|
+
const App = ({
|
|
25
|
+
label = "Hva er dine favorittfrukter?",
|
|
26
|
+
...rest
|
|
27
|
+
}: Omit<ComboboxProps, "label"> & { label?: ComboboxProps["label"] }) => {
|
|
25
28
|
const id = useId();
|
|
26
29
|
return (
|
|
27
30
|
<div data-theme="light">
|
|
28
|
-
<UNSAFE_Combobox
|
|
29
|
-
label="Hva er dine favorittfrukter?"
|
|
30
|
-
size="medium"
|
|
31
|
-
variant="simple"
|
|
32
|
-
id={id}
|
|
33
|
-
{...props}
|
|
34
|
-
/>
|
|
31
|
+
<UNSAFE_Combobox label={label} size="medium" id={id} {...rest} />
|
|
35
32
|
</div>
|
|
36
33
|
);
|
|
37
34
|
};
|
|
@@ -260,5 +257,38 @@ describe("Render combobox", () => {
|
|
|
260
257
|
).toBe(true);
|
|
261
258
|
});
|
|
262
259
|
});
|
|
260
|
+
|
|
261
|
+
test("and pressing enter to select autocompleted word will select the correct word", async () => {
|
|
262
|
+
const onToggleSelected = vi.fn();
|
|
263
|
+
render(
|
|
264
|
+
<App
|
|
265
|
+
onToggleSelected={onToggleSelected}
|
|
266
|
+
options={options}
|
|
267
|
+
shouldAutocomplete
|
|
268
|
+
/>,
|
|
269
|
+
);
|
|
270
|
+
|
|
271
|
+
const combobox = screen.getByRole("combobox", {
|
|
272
|
+
name: "Hva er dine favorittfrukter?",
|
|
273
|
+
});
|
|
274
|
+
|
|
275
|
+
await act(async () => {
|
|
276
|
+
await userEvent.click(combobox);
|
|
277
|
+
|
|
278
|
+
await userEvent.type(combobox, "p");
|
|
279
|
+
});
|
|
280
|
+
|
|
281
|
+
expect(combobox.getAttribute("value")).toBe("passion fruit");
|
|
282
|
+
|
|
283
|
+
await act(async () => {
|
|
284
|
+
await userEvent.keyboard("{Enter}");
|
|
285
|
+
});
|
|
286
|
+
|
|
287
|
+
expect(onToggleSelected).toHaveBeenCalledWith(
|
|
288
|
+
"passion fruit",
|
|
289
|
+
true,
|
|
290
|
+
false,
|
|
291
|
+
);
|
|
292
|
+
});
|
|
263
293
|
});
|
|
264
294
|
});
|
|
@@ -52,7 +52,7 @@ interface ErrorSummaryComponent
|
|
|
52
52
|
*
|
|
53
53
|
* @example
|
|
54
54
|
* ```jsx
|
|
55
|
-
* <ErrorSummary heading="Du må
|
|
55
|
+
* <ErrorSummary heading="Du må rette disse feilene før du kan sende inn søknaden:">
|
|
56
56
|
* <ErrorSummary.Item href="#1">
|
|
57
57
|
* Felt må fylles ut med alder
|
|
58
58
|
* </ErrorSummary.Item>
|