@navikt/ds-react 6.16.2 → 6.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/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.d.ts +1 -1
- package/cjs/form/combobox/Input/Input.js +9 -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/combobox/types.d.ts +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.d.ts +1 -1
- package/esm/form/combobox/Input/Input.js +9 -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/combobox/types.d.ts +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 +39 -14
- 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/combobox/types.ts +11 -1
- package/src/form/error-summary/ErrorSummary.tsx +1 -1
|
@@ -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;
|
|
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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"}
|
|
@@ -24,7 +24,7 @@ export type MaxSelected = {
|
|
|
24
24
|
*/
|
|
25
25
|
message?: string;
|
|
26
26
|
};
|
|
27
|
-
export interface ComboboxProps extends FormFieldProps, Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "value" | "defaultValue"> {
|
|
27
|
+
export interface ComboboxProps extends FormFieldProps, Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "value" | "defaultValue" | "onClick" | "onInput" | "type" | "role" | "onKeyUp" | "onKeyDown" | "autoComplete"> {
|
|
28
28
|
/**
|
|
29
29
|
* Combobox label.
|
|
30
30
|
*/
|
|
@@ -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.
|
|
3
|
+
"version": "6.17.0",
|
|
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.
|
|
598
|
-
"@navikt/ds-tokens": "^6.
|
|
597
|
+
"@navikt/aksel-icons": "^6.17.0",
|
|
598
|
+
"@navikt/ds-tokens": "^6.17.0",
|
|
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 (
|
|
@@ -6,6 +6,7 @@ import React, {
|
|
|
6
6
|
useRef,
|
|
7
7
|
} from "react";
|
|
8
8
|
import { omit } from "../../../util";
|
|
9
|
+
import { composeEventHandlers } from "../../../util/composeEventHandlers";
|
|
9
10
|
import { useMergeRefs } from "../../../util/hooks";
|
|
10
11
|
import filteredOptionsUtil from "../FilteredOptions/filtered-options-util";
|
|
11
12
|
import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext";
|
|
@@ -13,7 +14,18 @@ import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsCon
|
|
|
13
14
|
import { useInputContext } from "./Input.context";
|
|
14
15
|
|
|
15
16
|
interface InputProps
|
|
16
|
-
extends Omit<
|
|
17
|
+
extends Omit<
|
|
18
|
+
InputHTMLAttributes<HTMLInputElement>,
|
|
19
|
+
| "value"
|
|
20
|
+
| "disabled"
|
|
21
|
+
| "onClick"
|
|
22
|
+
| "onInput"
|
|
23
|
+
| "type"
|
|
24
|
+
| "role"
|
|
25
|
+
| "onKeyUp"
|
|
26
|
+
| "onKeyDown"
|
|
27
|
+
| "autoComplete"
|
|
28
|
+
> {
|
|
17
29
|
ref: React.Ref<HTMLInputElement>;
|
|
18
30
|
inputClassName?: string;
|
|
19
31
|
shouldShowSelectedOptions?: boolean;
|
|
@@ -21,7 +33,10 @@ interface InputProps
|
|
|
21
33
|
}
|
|
22
34
|
|
|
23
35
|
const Input = forwardRef<HTMLInputElement, InputProps>(
|
|
24
|
-
(
|
|
36
|
+
(
|
|
37
|
+
{ inputClassName, shouldShowSelectedOptions, placeholder, onBlur, ...rest },
|
|
38
|
+
ref,
|
|
39
|
+
) => {
|
|
25
40
|
const internalRef = useRef<HTMLInputElement>(null);
|
|
26
41
|
const mergedRefs = useMergeRefs(ref, internalRef);
|
|
27
42
|
const {
|
|
@@ -32,12 +47,15 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
|
|
|
32
47
|
value,
|
|
33
48
|
searchTerm,
|
|
34
49
|
setValue,
|
|
50
|
+
hideCaret,
|
|
51
|
+
setHideCaret,
|
|
35
52
|
} = useInputContext();
|
|
36
53
|
const {
|
|
37
54
|
selectedOptions,
|
|
38
55
|
removeSelectedOption,
|
|
39
56
|
toggleOption,
|
|
40
57
|
isMultiSelect,
|
|
58
|
+
maxSelected,
|
|
41
59
|
} = useSelectedOptionsContext();
|
|
42
60
|
const {
|
|
43
61
|
activeDecendantId,
|
|
@@ -78,7 +96,10 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
|
|
|
78
96
|
const selectedValue =
|
|
79
97
|
allowNewValues && isValueNew
|
|
80
98
|
? { label: value, value }
|
|
81
|
-
:
|
|
99
|
+
: filteredOptionsUtil.getFirstValueStartingWith(
|
|
100
|
+
value,
|
|
101
|
+
filteredOptions,
|
|
102
|
+
) || filteredOptions[0];
|
|
82
103
|
|
|
83
104
|
if (!selectedValue) {
|
|
84
105
|
return;
|
|
@@ -215,28 +236,32 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
|
|
|
215
236
|
{...rest}
|
|
216
237
|
{...omit(inputProps, ["aria-invalid"])}
|
|
217
238
|
ref={mergedRefs}
|
|
218
|
-
value={value}
|
|
219
|
-
onBlur={() => virtualFocus.moveFocusToTop()}
|
|
220
|
-
onClick={() => value !== searchTerm && onChange(value)}
|
|
221
|
-
onInput={onChangeHandler}
|
|
222
239
|
type="text"
|
|
223
240
|
role="combobox"
|
|
241
|
+
value={value}
|
|
242
|
+
onBlur={composeEventHandlers(onBlur, virtualFocus.moveFocusToTop)}
|
|
243
|
+
onClick={() => {
|
|
244
|
+
setHideCaret(!!maxSelected?.isLimitReached);
|
|
245
|
+
value !== searchTerm && onChange(value);
|
|
246
|
+
}}
|
|
247
|
+
onInput={onChangeHandler}
|
|
224
248
|
onKeyUp={handleKeyUp}
|
|
225
249
|
onKeyDown={handleKeyDown}
|
|
226
|
-
aria-controls={filteredOptionsUtil.getFilteredOptionsId(inputProps.id)}
|
|
227
|
-
aria-expanded={!!isListOpen}
|
|
228
250
|
autoComplete="off"
|
|
229
|
-
|
|
230
|
-
aria-activedescendant={activeDecendantId}
|
|
231
|
-
aria-describedby={ariaDescribedBy}
|
|
232
|
-
aria-invalid={inputProps["aria-invalid"]}
|
|
233
|
-
placeholder={selectedOptions.length ? undefined : rest.placeholder}
|
|
251
|
+
placeholder={selectedOptions.length ? undefined : placeholder}
|
|
234
252
|
className={cl(
|
|
235
253
|
inputClassName,
|
|
236
254
|
"navds-combobox__input",
|
|
237
255
|
"navds-body-short",
|
|
238
256
|
`navds-body-short--${size}`,
|
|
257
|
+
{ "navds-combobox__input--hide-caret": hideCaret },
|
|
239
258
|
)}
|
|
259
|
+
aria-controls={filteredOptionsUtil.getFilteredOptionsId(inputProps.id)}
|
|
260
|
+
aria-expanded={!!isListOpen}
|
|
261
|
+
aria-autocomplete={shouldAutocomplete ? "both" : "list"}
|
|
262
|
+
aria-activedescendant={activeDecendantId}
|
|
263
|
+
aria-describedby={ariaDescribedBy}
|
|
264
|
+
aria-invalid={inputProps["aria-invalid"]}
|
|
240
265
|
/>
|
|
241
266
|
);
|
|
242
267
|
},
|
|
@@ -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
|
});
|
|
@@ -31,7 +31,17 @@ export interface ComboboxProps
|
|
|
31
31
|
extends FormFieldProps,
|
|
32
32
|
Omit<
|
|
33
33
|
InputHTMLAttributes<HTMLInputElement>,
|
|
34
|
-
|
|
34
|
+
| "size"
|
|
35
|
+
| "onChange"
|
|
36
|
+
| "value"
|
|
37
|
+
| "defaultValue"
|
|
38
|
+
| "onClick"
|
|
39
|
+
| "onInput"
|
|
40
|
+
| "type"
|
|
41
|
+
| "role"
|
|
42
|
+
| "onKeyUp"
|
|
43
|
+
| "onKeyDown"
|
|
44
|
+
| "autoComplete"
|
|
35
45
|
> {
|
|
36
46
|
/**
|
|
37
47
|
* Combobox label.
|
|
@@ -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>
|