@navikt/ds-react 6.6.1 → 6.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/chat/Chat.d.ts +2 -1
- package/cjs/chat/Chat.js +2 -1
- package/cjs/chat/Chat.js.map +1 -1
- package/cjs/date/datepicker/parts/DropdownCaption.js +1 -1
- package/cjs/date/datepicker/parts/DropdownCaption.js.map +1 -1
- package/cjs/date/monthpicker/MonthCaption.js +1 -1
- package/cjs/date/utils/labels.d.ts +2 -2
- package/cjs/form/ReadOnlyIcon.d.ts +2 -2
- package/cjs/form/combobox/Combobox.js +7 -22
- package/cjs/form/combobox/Combobox.js.map +1 -1
- package/cjs/form/combobox/ComboboxProvider.js +2 -2
- package/cjs/form/combobox/ComboboxProvider.js.map +1 -1
- package/cjs/form/combobox/ComboboxWrapper.d.ts +1 -2
- package/cjs/form/combobox/ComboboxWrapper.js +4 -2
- package/cjs/form/combobox/ComboboxWrapper.js.map +1 -1
- package/cjs/form/combobox/FilteredOptions/FilteredOptions.js +4 -4
- package/cjs/form/combobox/FilteredOptions/FilteredOptions.js.map +1 -1
- package/cjs/form/combobox/FilteredOptions/filteredOptionsContext.d.ts +4 -4
- package/cjs/form/combobox/FilteredOptions/filteredOptionsContext.js +13 -15
- package/cjs/form/combobox/FilteredOptions/filteredOptionsContext.js.map +1 -1
- package/cjs/form/combobox/Input/{inputContext.d.ts → Input.context.d.ts} +7 -5
- package/cjs/form/combobox/Input/{inputContext.js → Input.context.js} +22 -22
- package/cjs/form/combobox/Input/Input.context.js.map +1 -0
- package/cjs/form/combobox/Input/Input.js +2 -2
- package/cjs/form/combobox/Input/Input.js.map +1 -1
- package/cjs/form/combobox/Input/InputController.d.ts +3 -0
- package/cjs/form/combobox/Input/InputController.js +70 -0
- package/cjs/form/combobox/Input/InputController.js.map +1 -0
- package/cjs/form/combobox/{ToggleListButton.js → Input/ToggleListButton.js} +1 -1
- package/cjs/form/combobox/Input/ToggleListButton.js.map +1 -0
- package/cjs/form/combobox/SelectedOptions/SelectedOptions.js +2 -2
- package/cjs/form/combobox/SelectedOptions/SelectedOptions.js.map +1 -1
- package/cjs/form/combobox/SelectedOptions/selectedOptionsContext.d.ts +4 -4
- package/cjs/form/combobox/SelectedOptions/selectedOptionsContext.js +7 -13
- package/cjs/form/combobox/SelectedOptions/selectedOptionsContext.js.map +1 -1
- package/cjs/form/combobox/customOptionsContext.d.ts +4 -4
- package/cjs/form/combobox/customOptionsContext.js +10 -13
- package/cjs/form/combobox/customOptionsContext.js.map +1 -1
- package/cjs/form/combobox/types.d.ts +1 -1
- package/cjs/help-text/HelpTextIcon.d.ts +1 -1
- package/cjs/index.d.ts +1 -0
- package/cjs/index.js +4 -2
- package/cjs/index.js.map +1 -1
- package/cjs/overlay/dismiss/DismissableLayer.d.ts +70 -0
- package/cjs/overlay/dismiss/DismissableLayer.js +253 -0
- package/cjs/overlay/dismiss/DismissableLayer.js.map +1 -0
- package/cjs/overlay/dismiss/util/dispatchCustomEvent.d.ts +50 -0
- package/cjs/overlay/dismiss/util/dispatchCustomEvent.js +65 -0
- package/cjs/overlay/dismiss/util/dispatchCustomEvent.js.map +1 -0
- package/cjs/overlay/dismiss/util/useEscapeKeydown.d.ts +1 -0
- package/cjs/overlay/dismiss/util/useEscapeKeydown.js +19 -0
- package/cjs/overlay/dismiss/util/useEscapeKeydown.js.map +1 -0
- package/cjs/overlay/dismiss/util/useFocusOutside.d.ts +8 -0
- package/cjs/overlay/dismiss/util/useFocusOutside.js +42 -0
- package/cjs/overlay/dismiss/util/useFocusOutside.js.map +1 -0
- package/cjs/overlay/dismiss/util/usePointerDownOutside.d.ts +10 -0
- package/cjs/overlay/dismiss/util/usePointerDownOutside.js +84 -0
- package/cjs/overlay/dismiss/util/usePointerDownOutside.js.map +1 -0
- package/cjs/overlays/floating/Floating.d.ts +53 -0
- package/cjs/overlays/floating/Floating.js +215 -0
- package/cjs/overlays/floating/Floating.js.map +1 -0
- package/cjs/overlays/floating/Floating.utils.d.ts +18 -0
- package/cjs/overlays/floating/Floating.utils.js +52 -0
- package/cjs/overlays/floating/Floating.utils.js.map +1 -0
- package/cjs/popover/Popover.js +13 -28
- package/cjs/popover/Popover.js.map +1 -1
- package/cjs/progress-bar/ProgressBar.d.ts +72 -0
- package/cjs/progress-bar/ProgressBar.js +86 -0
- package/cjs/progress-bar/ProgressBar.js.map +1 -0
- package/cjs/progress-bar/index.d.ts +1 -0
- package/cjs/progress-bar/index.js +10 -0
- package/cjs/progress-bar/index.js.map +1 -0
- package/cjs/tabs/Tabs.context.d.ts +7 -3
- package/cjs/tabs/Tabs.context.js +1 -0
- package/cjs/tabs/Tabs.context.js.map +1 -1
- package/cjs/timeline/AxisLabels.d.ts +1 -1
- package/cjs/toggle-group/ToggleGroup.context.d.ts +7 -3
- package/cjs/toggle-group/ToggleGroup.context.js +1 -0
- package/cjs/toggle-group/ToggleGroup.context.js.map +1 -1
- package/cjs/typography/BodyLong.d.ts +7 -7
- package/cjs/typography/BodyLong.js +5 -5
- package/cjs/typography/BodyShort.d.ts +5 -5
- package/cjs/typography/BodyShort.js +3 -3
- package/cjs/typography/Detail.d.ts +5 -5
- package/cjs/typography/Detail.js +3 -3
- package/cjs/typography/ErrorMessage.d.ts +5 -5
- package/cjs/typography/ErrorMessage.js +3 -3
- package/cjs/typography/Heading.d.ts +6 -6
- package/cjs/typography/Heading.js +3 -3
- package/cjs/typography/Label.d.ts +5 -5
- package/cjs/typography/Label.js +3 -3
- package/cjs/typography/types.d.ts +3 -3
- package/cjs/util/hooks/descendants/useDescendant.d.ts +2 -2
- package/cjs/util/hooks/descendants/useDescendant.js +49 -52
- package/cjs/util/hooks/descendants/useDescendant.js.map +1 -1
- package/cjs/util/types/AsChild.d.ts +14 -0
- package/cjs/util/types/AsChild.js +3 -0
- package/cjs/util/types/AsChild.js.map +1 -0
- package/esm/chat/Chat.d.ts +2 -1
- package/esm/chat/Chat.js +1 -0
- package/esm/chat/Chat.js.map +1 -1
- package/esm/date/datepicker/parts/DropdownCaption.js +1 -1
- package/esm/date/datepicker/parts/DropdownCaption.js.map +1 -1
- package/esm/date/monthpicker/MonthCaption.js +1 -1
- package/esm/date/utils/labels.d.ts +2 -2
- package/esm/form/ReadOnlyIcon.d.ts +2 -2
- package/esm/form/combobox/Combobox.js +8 -23
- package/esm/form/combobox/Combobox.js.map +1 -1
- package/esm/form/combobox/ComboboxProvider.js +1 -1
- package/esm/form/combobox/ComboboxProvider.js.map +1 -1
- package/esm/form/combobox/ComboboxWrapper.d.ts +1 -2
- package/esm/form/combobox/ComboboxWrapper.js +4 -2
- package/esm/form/combobox/ComboboxWrapper.js.map +1 -1
- package/esm/form/combobox/FilteredOptions/FilteredOptions.js +3 -3
- package/esm/form/combobox/FilteredOptions/FilteredOptions.js.map +1 -1
- package/esm/form/combobox/FilteredOptions/filteredOptionsContext.d.ts +4 -4
- package/esm/form/combobox/FilteredOptions/filteredOptionsContext.js +15 -16
- package/esm/form/combobox/FilteredOptions/filteredOptionsContext.js.map +1 -1
- package/esm/form/combobox/Input/{inputContext.d.ts → Input.context.d.ts} +7 -5
- package/esm/form/combobox/Input/{inputContext.js → Input.context.js} +22 -21
- package/esm/form/combobox/Input/Input.context.js.map +1 -0
- package/esm/form/combobox/Input/Input.js +1 -1
- package/esm/form/combobox/Input/Input.js.map +1 -1
- package/esm/form/combobox/Input/InputController.d.ts +3 -0
- package/esm/form/combobox/Input/InputController.js +41 -0
- package/esm/form/combobox/Input/InputController.js.map +1 -0
- package/esm/form/combobox/{ToggleListButton.js → Input/ToggleListButton.js} +1 -1
- package/esm/form/combobox/Input/ToggleListButton.js.map +1 -0
- package/esm/form/combobox/SelectedOptions/SelectedOptions.js +1 -1
- package/esm/form/combobox/SelectedOptions/SelectedOptions.js.map +1 -1
- package/esm/form/combobox/SelectedOptions/selectedOptionsContext.d.ts +4 -4
- package/esm/form/combobox/SelectedOptions/selectedOptionsContext.js +9 -14
- package/esm/form/combobox/SelectedOptions/selectedOptionsContext.js.map +1 -1
- package/esm/form/combobox/customOptionsContext.d.ts +4 -4
- package/esm/form/combobox/customOptionsContext.js +10 -12
- package/esm/form/combobox/customOptionsContext.js.map +1 -1
- package/esm/form/combobox/types.d.ts +1 -1
- package/esm/help-text/HelpTextIcon.d.ts +1 -1
- package/esm/index.d.ts +1 -0
- package/esm/index.js +1 -0
- package/esm/index.js.map +1 -1
- package/esm/overlay/dismiss/DismissableLayer.d.ts +70 -0
- package/esm/overlay/dismiss/DismissableLayer.js +226 -0
- package/esm/overlay/dismiss/DismissableLayer.js.map +1 -0
- package/esm/overlay/dismiss/util/dispatchCustomEvent.d.ts +50 -0
- package/esm/overlay/dismiss/util/dispatchCustomEvent.js +58 -0
- package/esm/overlay/dismiss/util/dispatchCustomEvent.js.map +1 -0
- package/esm/overlay/dismiss/util/useEscapeKeydown.d.ts +1 -0
- package/esm/overlay/dismiss/util/useEscapeKeydown.js +15 -0
- package/esm/overlay/dismiss/util/useEscapeKeydown.js.map +1 -0
- package/esm/overlay/dismiss/util/useFocusOutside.d.ts +8 -0
- package/esm/overlay/dismiss/util/useFocusOutside.js +38 -0
- package/esm/overlay/dismiss/util/useFocusOutside.js.map +1 -0
- package/esm/overlay/dismiss/util/usePointerDownOutside.d.ts +10 -0
- package/esm/overlay/dismiss/util/usePointerDownOutside.js +80 -0
- package/esm/overlay/dismiss/util/usePointerDownOutside.js.map +1 -0
- package/esm/overlays/floating/Floating.d.ts +53 -0
- package/esm/overlays/floating/Floating.js +188 -0
- package/esm/overlays/floating/Floating.js.map +1 -0
- package/esm/overlays/floating/Floating.utils.d.ts +18 -0
- package/esm/overlays/floating/Floating.utils.js +48 -0
- package/esm/overlays/floating/Floating.utils.js.map +1 -0
- package/esm/popover/Popover.js +16 -31
- package/esm/popover/Popover.js.map +1 -1
- package/esm/progress-bar/ProgressBar.d.ts +72 -0
- package/esm/progress-bar/ProgressBar.js +57 -0
- package/esm/progress-bar/ProgressBar.js.map +1 -0
- package/esm/progress-bar/index.d.ts +1 -0
- package/esm/progress-bar/index.js +3 -0
- package/esm/progress-bar/index.js.map +1 -0
- package/esm/tabs/Tabs.context.d.ts +7 -3
- package/esm/tabs/Tabs.context.js +1 -0
- package/esm/tabs/Tabs.context.js.map +1 -1
- package/esm/timeline/AxisLabels.d.ts +1 -1
- package/esm/toggle-group/ToggleGroup.context.d.ts +7 -3
- package/esm/toggle-group/ToggleGroup.context.js +1 -0
- package/esm/toggle-group/ToggleGroup.context.js.map +1 -1
- package/esm/typography/BodyLong.d.ts +7 -7
- package/esm/typography/BodyLong.js +5 -5
- package/esm/typography/BodyShort.d.ts +5 -5
- package/esm/typography/BodyShort.js +3 -3
- package/esm/typography/Detail.d.ts +5 -5
- package/esm/typography/Detail.js +3 -3
- package/esm/typography/ErrorMessage.d.ts +5 -5
- package/esm/typography/ErrorMessage.js +3 -3
- package/esm/typography/Heading.d.ts +6 -6
- package/esm/typography/Heading.js +3 -3
- package/esm/typography/Label.d.ts +5 -5
- package/esm/typography/Label.js +3 -3
- package/esm/typography/types.d.ts +3 -3
- package/esm/util/hooks/descendants/useDescendant.d.ts +2 -2
- package/esm/util/hooks/descendants/useDescendant.js +49 -52
- package/esm/util/hooks/descendants/useDescendant.js.map +1 -1
- package/esm/util/types/AsChild.d.ts +14 -0
- package/esm/util/types/AsChild.js +2 -0
- package/esm/util/types/AsChild.js.map +1 -0
- package/package.json +16 -5
- package/src/chat/Chat.tsx +2 -1
- package/src/date/datepicker/parts/DropdownCaption.tsx +5 -1
- package/src/date/monthpicker/MonthCaption.tsx +1 -1
- package/src/form/combobox/Combobox.tsx +6 -76
- package/src/form/combobox/ComboboxProvider.tsx +1 -1
- package/src/form/combobox/ComboboxWrapper.tsx +4 -3
- package/src/form/combobox/FilteredOptions/FilteredOptions.tsx +3 -3
- package/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx +19 -29
- package/src/form/combobox/Input/{inputContext.tsx → Input.context.tsx} +30 -33
- package/src/form/combobox/Input/Input.tsx +1 -1
- package/src/form/combobox/Input/InputController.tsx +102 -0
- package/src/form/combobox/{ToggleListButton.tsx → Input/ToggleListButton.tsx} +1 -1
- package/src/form/combobox/SelectedOptions/SelectedOptions.tsx +1 -1
- package/src/form/combobox/SelectedOptions/selectedOptionsContext.tsx +12 -26
- package/src/form/combobox/{combobox-utils.test.ts → __tests__/combobox-utils.test.ts} +1 -1
- package/src/form/combobox/{combobox.test.tsx → __tests__/combobox.test.tsx} +2 -3
- package/src/form/combobox/customOptionsContext.tsx +14 -18
- package/src/form/combobox/types.ts +3 -1
- package/src/index.ts +1 -0
- package/src/overlay/README.md +5 -0
- package/src/overlay/dismiss/DismissableLayer.tsx +368 -0
- package/src/overlay/dismiss/util/dispatchCustomEvent.ts +77 -0
- package/src/overlay/dismiss/util/useEscapeKeydown.ts +21 -0
- package/src/overlay/dismiss/util/useFocusOutside.ts +52 -0
- package/src/overlay/dismiss/util/usePointerDownOutside.ts +95 -0
- package/src/overlays/floating/Floating.tsx +399 -0
- package/src/overlays/floating/Floating.utils.ts +63 -0
- package/src/popover/Popover.tsx +38 -70
- package/src/progress-bar/ProgressBar.tsx +149 -0
- package/src/progress-bar/index.ts +2 -0
- package/src/tabs/Tabs.context.ts +2 -0
- package/src/toggle-group/ToggleGroup.context.ts +1 -0
- package/src/typography/BodyLong.tsx +7 -7
- package/src/typography/BodyShort.tsx +5 -5
- package/src/typography/Detail.tsx +5 -5
- package/src/typography/ErrorMessage.tsx +5 -5
- package/src/typography/Heading.tsx +6 -6
- package/src/typography/Label.tsx +5 -5
- package/src/typography/types.ts +3 -3
- package/src/util/hooks/descendants/useDescendant.tsx +55 -68
- package/src/util/types/AsChild.ts +15 -0
- package/cjs/form/combobox/ClearButton.d.ts +0 -7
- package/cjs/form/combobox/ClearButton.js +0 -28
- package/cjs/form/combobox/ClearButton.js.map +0 -1
- package/cjs/form/combobox/FilteredOptions/CheckIcon.d.ts +0 -3
- package/cjs/form/combobox/FilteredOptions/CheckIcon.js +0 -12
- package/cjs/form/combobox/FilteredOptions/CheckIcon.js.map +0 -1
- package/cjs/form/combobox/Input/inputContext.js.map +0 -1
- package/cjs/form/combobox/ToggleListButton.js.map +0 -1
- package/esm/form/combobox/ClearButton.d.ts +0 -7
- package/esm/form/combobox/ClearButton.js +0 -21
- package/esm/form/combobox/ClearButton.js.map +0 -1
- package/esm/form/combobox/FilteredOptions/CheckIcon.d.ts +0 -3
- package/esm/form/combobox/FilteredOptions/CheckIcon.js +0 -7
- package/esm/form/combobox/FilteredOptions/CheckIcon.js.map +0 -1
- package/esm/form/combobox/Input/inputContext.js.map +0 -1
- package/esm/form/combobox/ToggleListButton.js.map +0 -1
- package/src/form/combobox/ClearButton.tsx +0 -29
- package/src/form/combobox/FilteredOptions/CheckIcon.tsx +0 -23
- /package/cjs/form/combobox/{ToggleListButton.d.ts → Input/ToggleListButton.d.ts} +0 -0
- /package/esm/form/combobox/{ToggleListButton.d.ts → Input/ToggleListButton.d.ts} +0 -0
|
@@ -10,26 +10,18 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
12
|
import cl from "clsx";
|
|
13
|
-
import React, { forwardRef
|
|
13
|
+
import React, { forwardRef } from "react";
|
|
14
14
|
import { BodyShort, ErrorMessage, Label } from "../../typography/index.js";
|
|
15
|
-
import { useMergeRefs } from "../../util/hooks/useMergeRefs.js";
|
|
16
|
-
import ClearButton from "./ClearButton.js";
|
|
17
15
|
import ComboboxWrapper from "./ComboboxWrapper.js";
|
|
18
16
|
import FilteredOptions from "./FilteredOptions/FilteredOptions.js";
|
|
19
17
|
import { useFilteredOptionsContext } from "./FilteredOptions/filteredOptionsContext.js";
|
|
20
|
-
import
|
|
21
|
-
import {
|
|
22
|
-
import SelectedOptions from "./SelectedOptions/SelectedOptions.js";
|
|
23
|
-
import { useSelectedOptionsContext } from "./SelectedOptions/selectedOptionsContext.js";
|
|
24
|
-
import ToggleListButton from "./ToggleListButton.js";
|
|
18
|
+
import { useInputContext } from "./Input/Input.context.js";
|
|
19
|
+
import { InputController } from "./Input/InputController.js";
|
|
25
20
|
export const Combobox = forwardRef((props, ref) => {
|
|
26
|
-
const { className, hideLabel = false, description, label
|
|
27
|
-
const
|
|
28
|
-
const {
|
|
29
|
-
|
|
30
|
-
const { clearInput, error, errorId, focusInput, hasError, inputDescriptionId, inputProps, inputRef, value, showErrorMsg, size = "medium", } = useInputContext();
|
|
31
|
-
const mergedInputRef = useMergeRefs(inputRef, ref);
|
|
32
|
-
return (React.createElement(ComboboxWrapper, { className: className, hasError: hasError, inputProps: inputProps, inputSize: size, toggleIsListOpen: toggleIsListOpen, toggleListButtonRef: toggleListButtonRef },
|
|
21
|
+
const { className, hideLabel = false, description, label } = props, rest = __rest(props, ["className", "hideLabel", "description", "label"]);
|
|
22
|
+
const { toggleIsListOpen } = useFilteredOptionsContext();
|
|
23
|
+
const { error, errorId, hasError, inputDescriptionId, inputProps, showErrorMsg, size = "medium", } = useInputContext();
|
|
24
|
+
return (React.createElement(ComboboxWrapper, { className: className, hasError: hasError, inputProps: inputProps, inputSize: size, toggleIsListOpen: toggleIsListOpen },
|
|
33
25
|
React.createElement(Label, { htmlFor: inputProps.id, size: size, className: cl("navds-form-field__label", {
|
|
34
26
|
"navds-sr-only": hideLabel,
|
|
35
27
|
}) }, label),
|
|
@@ -37,14 +29,7 @@ export const Combobox = forwardRef((props, ref) => {
|
|
|
37
29
|
"navds-sr-only": hideLabel,
|
|
38
30
|
}), id: inputDescriptionId, size: size }, description)),
|
|
39
31
|
React.createElement("div", { className: "navds-combobox__wrapper" },
|
|
40
|
-
React.createElement(
|
|
41
|
-
"navds-combobox__wrapper-inner--virtually-unfocused": activeDecendantId !== undefined,
|
|
42
|
-
}), onClick: focusInput },
|
|
43
|
-
!shouldShowSelectedOptions ? (React.createElement(Input, Object.assign({ id: inputProps.id, ref: mergedInputRef, inputClassName: inputClassName }, rest))) : (React.createElement(SelectedOptions, { selectedOptions: selectedOptions, size: size },
|
|
44
|
-
React.createElement(Input, Object.assign({ id: inputProps.id, ref: mergedInputRef, inputClassName: inputClassName }, rest)))),
|
|
45
|
-
React.createElement("div", null,
|
|
46
|
-
value && clearButton && (React.createElement(ClearButton, { handleClear: clearInput, clearButtonLabel: clearButtonLabel, tabIndex: -1 })),
|
|
47
|
-
toggleListButton && (React.createElement(ToggleListButton, { toggleListButtonLabel: toggleListButtonLabel, ref: toggleListButtonRef })))),
|
|
32
|
+
React.createElement(InputController, Object.assign({ ref: ref }, rest)),
|
|
48
33
|
React.createElement(FilteredOptions, null)),
|
|
49
34
|
React.createElement("div", { className: "navds-form-field__error", id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && React.createElement(ErrorMessage, { size: size }, error))));
|
|
50
35
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.js","sourceRoot":"","sources":["../../../src/form/combobox/Combobox.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"Combobox.js","sourceRoot":"","sources":["../../../src/form/combobox/Combobox.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAClE,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,eAAe,MAAM,mCAAmC,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,0CAA0C,CAAC;AACrF,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG1D,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAGhC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACf,MAAM,EAAE,SAAS,EAAE,SAAS,GAAG,KAAK,EAAE,WAAW,EAAE,KAAK,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAArE,kDAA6D,CAAQ,CAAC;IAE5E,MAAM,EAAE,gBAAgB,EAAE,GAAG,yBAAyB,EAAE,CAAC;IAEzD,MAAM,EACJ,KAAK,EACL,OAAO,EACP,QAAQ,EACR,kBAAkB,EAClB,UAAU,EACV,YAAY,EACZ,IAAI,GAAG,QAAQ,GAChB,GAAG,eAAe,EAAE,CAAC;IAEtB,OAAO,CACL,oBAAC,eAAe,IACd,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,IAAI,EACf,gBAAgB,EAAE,gBAAgB;QAElC,oBAAC,KAAK,IACJ,OAAO,EAAE,UAAU,CAAC,EAAE,EACtB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE;gBACvC,eAAe,EAAE,SAAS;aAC3B,CAAC,IAED,KAAK,CACA;QACP,CAAC,CAAC,WAAW,IAAI,CAChB,oBAAC,SAAS,IACR,EAAE,EAAC,KAAK,EACR,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE;gBAC7C,eAAe,EAAE,SAAS;aAC3B,CAAC,EACF,EAAE,EAAE,kBAAkB,EACtB,IAAI,EAAE,IAAI,IAET,WAAW,CACF,CACb;QACD,6BAAK,SAAS,EAAC,yBAAyB;YACtC,oBAAC,eAAe,kBAAC,GAAG,EAAE,GAAG,IAAM,IAAI,EAAI;YACvC,oBAAC,eAAe,OAAG,CACf;QACN,6BACE,SAAS,EAAC,yBAAyB,EACnC,EAAE,EAAE,OAAO,mBACG,oBAAoB,eACxB,QAAQ,IAEjB,YAAY,IAAI,oBAAC,YAAY,IAAC,IAAI,EAAE,IAAI,IAAG,KAAK,CAAgB,CAC7D,CACU,CACnB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC"}
|
|
@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
12
12
|
import React, { forwardRef } from "react";
|
|
13
13
|
import Combobox from "./Combobox.js";
|
|
14
14
|
import { FilteredOptionsProvider } from "./FilteredOptions/filteredOptionsContext.js";
|
|
15
|
-
import { InputContextProvider } from "./Input/
|
|
15
|
+
import { InputContextProvider } from "./Input/Input.context.js";
|
|
16
16
|
import { SelectedOptionsProvider } from "./SelectedOptions/selectedOptionsContext.js";
|
|
17
17
|
import { mapToComboboxOptionArray } from "./combobox-utils.js";
|
|
18
18
|
import { CustomOptionsProvider } from "./customOptionsContext.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxProvider.js","sourceRoot":"","sources":["../../../src/form/combobox/ComboboxProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,uBAAuB,EAAE,MAAM,0CAA0C,CAAC;AACnF,OAAO,EAAE,oBAAoB,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"ComboboxProvider.js","sourceRoot":"","sources":["../../../src/form/combobox/ComboboxProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,uBAAuB,EAAE,MAAM,0CAA0C,CAAC;AACnF,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,uBAAuB,EAAE,MAAM,0CAA0C,CAAC;AACnF,OAAO,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAG/D;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,gBAAgB,GAAG,UAAU,CACjC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACb,MAAM,EACJ,cAAc,GAAG,KAAK,EACtB,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,OAAO,EACP,eAAe,EAAE,uBAAuB,EACxC,EAAE,EACF,UAAU,EACV,SAAS,GAAG,KAAK,EACjB,aAAa,EACb,gBAAgB,EAChB,eAAe,EAAE,uBAAuB,EACxC,WAAW,EACX,OAAO,EAAE,eAAe,EACxB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,kBAAkB,EAClB,IAAI,KAEF,KAAK,EADJ,IAAI,UACL,KAAK,EArBH,sQAqBL,CAAQ,CAAC;IACV,MAAM,OAAO,GAAG,wBAAwB,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;IAChE,MAAM,eAAe,GAAG,wBAAwB,CAAC,uBAAuB,CAAC,CAAC;IAC1E,MAAM,eAAe,GAAG,wBAAwB,CAAC,uBAAuB,CAAC,CAAC;IAC1E,OAAO,CACL,oBAAC,oBAAoB,IACnB,KAAK,EAAE;YACL,YAAY;YACZ,KAAK;YACL,OAAO;YACP,EAAE;YACF,KAAK;YACL,QAAQ;YACR,OAAO;YACP,kBAAkB;YAClB,IAAI;SACL;QAED,oBAAC,qBAAqB,IAAC,KAAK,EAAE,EAAE,aAAa,EAAE;YAC7C,oBAAC,uBAAuB,IACtB,KAAK,EAAE;oBACL,cAAc;oBACd,aAAa;oBACb,eAAe;oBACf,WAAW;oBACX,gBAAgB;oBAChB,OAAO;iBACR;gBAED,oBAAC,uBAAuB,IACtB,KAAK,EAAE;wBACL,cAAc;wBACd,eAAe;wBACf,UAAU;wBACV,SAAS;wBACT,OAAO;qBACR;oBAED,oBAAC,QAAQ,kBAAC,GAAG,EAAE,GAAG,IAAM,IAAI,GACzB,QAAQ,CACA,CACa,CACF,CACJ,CACH,CACxB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -8,7 +8,6 @@ type ComboboxWrapperProps = {
|
|
|
8
8
|
};
|
|
9
9
|
inputSize: string;
|
|
10
10
|
toggleIsListOpen: (isListOpen: boolean) => void;
|
|
11
|
-
toggleListButtonRef: React.RefObject<HTMLButtonElement>;
|
|
12
11
|
};
|
|
13
|
-
declare const ComboboxWrapper: ({ children, className, hasError, inputProps, inputSize, toggleIsListOpen,
|
|
12
|
+
declare const ComboboxWrapper: ({ children, className, hasError, inputProps, inputSize, toggleIsListOpen, }: ComboboxWrapperProps) => React.JSX.Element;
|
|
14
13
|
export default ComboboxWrapper;
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import cl from "clsx";
|
|
2
2
|
import React, { useRef, useState } from "react";
|
|
3
|
-
|
|
3
|
+
import { useInputContext } from "./Input/Input.context.js";
|
|
4
|
+
const ComboboxWrapper = ({ children, className, hasError, inputProps, inputSize, toggleIsListOpen, }) => {
|
|
5
|
+
const { toggleOpenButtonRef } = useInputContext();
|
|
4
6
|
const wrapperRef = useRef(null);
|
|
5
7
|
const [hasFocusWithin, setHasFocusWithin] = useState(false);
|
|
6
8
|
function onFocusInsideWrapper(e) {
|
|
7
9
|
var _a;
|
|
8
10
|
if (!((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)) &&
|
|
9
|
-
(
|
|
11
|
+
(toggleOpenButtonRef === null || toggleOpenButtonRef === void 0 ? void 0 : toggleOpenButtonRef.current) !== e.target) {
|
|
10
12
|
toggleIsListOpen(true);
|
|
11
13
|
setHasFocusWithin(true);
|
|
12
14
|
}
|
|
@@ -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;
|
|
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;IAElD,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;QAC3B,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"}
|
|
@@ -3,7 +3,7 @@ import React from "react";
|
|
|
3
3
|
import { CheckmarkIcon, PlusIcon } from "@navikt/aksel-icons";
|
|
4
4
|
import { Loader } from "../../../loader/index.js";
|
|
5
5
|
import { BodyShort, Label } from "../../../typography/index.js";
|
|
6
|
-
import { useInputContext } from "../Input/
|
|
6
|
+
import { useInputContext } from "../Input/Input.context.js";
|
|
7
7
|
import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext.js";
|
|
8
8
|
import { isInList, toComboboxOption } from "../combobox-utils.js";
|
|
9
9
|
import filteredOptionsUtil from "./filtered-options-util.js";
|
|
@@ -16,7 +16,7 @@ const FilteredOptions = () => {
|
|
|
16
16
|
const isDisabled = (option) => (maxSelected === null || maxSelected === void 0 ? void 0 : maxSelected.isLimitReached) && !isInList(option.value, selectedOptions);
|
|
17
17
|
const shouldRenderNonSelectables = (maxSelected === null || maxSelected === void 0 ? void 0 : maxSelected.isLimitReached) || // Render maxSelected message
|
|
18
18
|
isLoading || // Render loading message
|
|
19
|
-
(!isLoading && filteredOptions.length === 0); // Render no hits message
|
|
19
|
+
(!isLoading && filteredOptions.length === 0 && !allowNewValues); // Render no hits message
|
|
20
20
|
const shouldRenderFilteredOptionsList = (allowNewValues && isValueNew && !(maxSelected === null || maxSelected === void 0 ? void 0 : maxSelected.isLimitReached)) || // Render add new option
|
|
21
21
|
filteredOptions.length > 0; // Render filtered options
|
|
22
22
|
return (React.createElement("div", { className: cl("navds-combobox__list", {
|
|
@@ -27,7 +27,7 @@ const FilteredOptions = () => {
|
|
|
27
27
|
(maxSelected === null || maxSelected === void 0 ? void 0 : maxSelected.isLimitReached) && (React.createElement("div", { className: "navds-combobox__list-item--max-selected", id: filteredOptionsUtil.getMaxSelectedOptionsId(id) }, (_a = maxSelected.message) !== null && _a !== void 0 ? _a : `${selectedOptions.length} av ${maxSelected.limit} er valgt.`)),
|
|
28
28
|
isLoading && (React.createElement("div", { className: "navds-combobox__list-item--loading", id: filteredOptionsUtil.getIsLoadingId(id) },
|
|
29
29
|
React.createElement(Loader, { title: "S\u00F8ker..." }))),
|
|
30
|
-
!isLoading && filteredOptions.length === 0 && (React.createElement("div", { className: "navds-combobox__list-item--no-options", id: filteredOptionsUtil.getNoHitsId(id) }, "Ingen s\u00F8ketreff")))),
|
|
30
|
+
!isLoading && filteredOptions.length === 0 && !allowNewValues && (React.createElement("div", { className: "navds-combobox__list-item--no-options", id: filteredOptionsUtil.getNoHitsId(id) }, "Ingen s\u00F8ketreff")))),
|
|
31
31
|
shouldRenderFilteredOptionsList && (React.createElement("ul", { ref: setFilteredOptionsRef, role: "listbox", className: "navds-combobox__list-options" },
|
|
32
32
|
isValueNew && !(maxSelected === null || maxSelected === void 0 ? void 0 : maxSelected.isLimitReached) && allowNewValues && (React.createElement("li", { tabIndex: -1, onMouseMove: () => {
|
|
33
33
|
if (activeDecendantId !==
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilteredOptions.js","sourceRoot":"","sources":["../../../../src/form/combobox/FilteredOptions/FilteredOptions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"FilteredOptions.js","sourceRoot":"","sources":["../../../../src/form/combobox/FilteredOptions/FilteredOptions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAC;AACtF,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE/D,OAAO,mBAAmB,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAErE,MAAM,eAAe,GAAG,GAAG,EAAE;;IAC3B,MAAM,EACJ,UAAU,EAAE,EAAE,EAAE,EAAE,EAClB,IAAI,EACJ,KAAK,GACN,GAAG,eAAe,EAAE,CAAC;IACtB,MAAM,EACJ,cAAc,EACd,SAAS,EACT,UAAU,EACV,eAAe,EACf,qBAAqB,EACrB,0BAA0B,EAC1B,6BAA6B,EAC7B,UAAU,EACV,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,GACb,GAAG,yBAAyB,EAAE,CAAC;IAChC,MAAM,EAAE,aAAa,EAAE,eAAe,EAAE,YAAY,EAAE,WAAW,EAAE,GACjE,yBAAyB,EAAE,CAAC;IAE9B,MAAM,UAAU,GAAG,CAAC,MAAsB,EAAE,EAAE,CAC5C,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,cAAc,KAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC;IAE1E,MAAM,0BAA0B,GAC9B,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,cAAc,KAAI,6BAA6B;QAC5D,SAAS,IAAI,yBAAyB;QACtC,CAAC,CAAC,SAAS,IAAI,eAAe,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,yBAAyB;IAE5F,MAAM,+BAA+B,GACnC,CAAC,cAAc,IAAI,UAAU,IAAI,CAAC,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,cAAc,CAAA,CAAC,IAAI,wBAAwB;QAC1F,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,0BAA0B;IAExD,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE;YACpC,8BAA8B,EAAE,CAAC,UAAU;YAC3C,kCAAkC,EAAE,0BAA0B;SAC/D,CAAC,EACF,EAAE,EAAE,mBAAmB,CAAC,oBAAoB,CAAC,EAAE,CAAC,EAChD,QAAQ,EAAE,CAAC,CAAC;QAEX,0BAA0B,IAAI,CAC7B,6BAAK,SAAS,EAAC,sCAAsC,EAAC,IAAI,EAAC,QAAQ;YAChE,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,cAAc,KAAI,CAC9B,6BACE,SAAS,EAAC,yCAAyC,EACnD,EAAE,EAAE,mBAAmB,CAAC,uBAAuB,CAAC,EAAE,CAAC,IAElD,MAAA,WAAW,CAAC,OAAO,mCAClB,GAAG,eAAe,CAAC,MAAM,OAAO,WAAW,CAAC,KAAK,YAAY,CAC3D,CACP;YACA,SAAS,IAAI,CACZ,6BACE,SAAS,EAAC,oCAAoC,EAC9C,EAAE,EAAE,mBAAmB,CAAC,cAAc,CAAC,EAAE,CAAC;gBAE1C,oBAAC,MAAM,IAAC,KAAK,EAAC,eAAU,GAAG,CACvB,CACP;YACA,CAAC,SAAS,IAAI,eAAe,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,cAAc,IAAI,CAChE,6BACE,SAAS,EAAC,uCAAuC,EACjD,EAAE,EAAE,mBAAmB,CAAC,WAAW,CAAC,EAAE,CAAC,2BAGnC,CACP,CACG,CACP;QAEA,+BAA+B,IAAI,CAClC,4BACE,GAAG,EAAE,qBAAqB,EAC1B,IAAI,EAAC,SAAS,EACd,SAAS,EAAC,8BAA8B;YAEvC,UAAU,IAAI,CAAC,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,cAAc,CAAA,IAAI,cAAc,IAAI,CAC/D,4BACE,QAAQ,EAAE,CAAC,CAAC,EACZ,WAAW,EAAE,GAAG,EAAE;oBAChB,IACE,iBAAiB;wBACjB,mBAAmB,CAAC,iBAAiB,CAAC,EAAE,CAAC,EACzC,CAAC;wBACD,YAAY,CAAC,kBAAkB,CAC7B,mBAAmB,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAC1C,CAAC;wBACF,6BAA6B,CAAC,IAAI,CAAC,CAAC;oBACtC,CAAC;gBACH,CAAC,EACD,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE;oBACrB,YAAY,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;oBAC7C,IAAI,CAAC,aAAa,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,eAAe,CAAC;wBACrD,gBAAgB,CAAC,KAAK,CAAC,CAAC;gBAC5B,CAAC,EACD,EAAE,EAAE,mBAAmB,CAAC,iBAAiB,CAAC,EAAE,CAAC,EAC7C,SAAS,EAAE,EAAE,CACX,iEAAiE,EACjE;oBACE,8CAA8C,EAC5C,iBAAiB;wBACjB,mBAAmB,CAAC,iBAAiB,CAAC,EAAE,CAAC;iBAC5C,CACF,EACD,IAAI,EAAC,QAAQ,mBACE,KAAK;gBAEpB,oBAAC,QAAQ,0BAAe;gBACxB,oBAAC,SAAS,IAAC,IAAI,EAAE,IAAI;;oBACV,GAAG;oBACZ,oBAAC,KAAK,IAAC,EAAE,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI;;wBACjB,KAAK;iCACP,CACE,CACT,CACN;YACA,eAAe,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC/B,4BACE,SAAS,EAAE,EAAE,CAAC,2BAA2B,EAAE;oBACzC,kCAAkC,EAChC,iBAAiB;wBACjB,mBAAmB,CAAC,WAAW,CAAC,EAAE,EAAE,MAAM,CAAC,KAAK,CAAC;oBACnD,qCAAqC,EAAE,QAAQ,CAC7C,MAAM,CAAC,KAAK,EACZ,eAAe,CAChB;iBACF,CAAC,mBACa,UAAU,CAAC,MAAM,CAAC,IAAI,SAAS,EAC9C,EAAE,EAAE,mBAAmB,CAAC,WAAW,CAAC,EAAE,EAAE,MAAM,CAAC,KAAK,CAAC,EACrD,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,QAAQ,EAAE,CAAC,CAAC,EACZ,WAAW,EAAE,GAAG,EAAE;oBAChB,IACE,iBAAiB;wBACjB,mBAAmB,CAAC,WAAW,CAAC,EAAE,EAAE,MAAM,CAAC,KAAK,CAAC,EACjD,CAAC;wBACD,YAAY,CAAC,kBAAkB,CAC7B,mBAAmB,CAAC,WAAW,CAAC,EAAE,EAAE,MAAM,CAAC,KAAK,CAAC,CAClD,CAAC;wBACF,6BAA6B,CAAC,IAAI,CAAC,CAAC;oBACtC,CAAC;gBACH,CAAC,EACD,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE;oBACrB,IAAI,UAAU,CAAC,MAAM,CAAC,EAAE,CAAC;wBACvB,OAAO;oBACT,CAAC;oBACD,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;oBAC5B,IACE,CAAC,aAAa;wBACd,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,eAAe,CAAC,EACxC,CAAC;wBACD,gBAAgB,CAAC,KAAK,CAAC,CAAC;oBAC1B,CAAC;gBACH,CAAC,EACD,IAAI,EAAC,QAAQ,mBACE,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,eAAe,CAAC,mBACvC,UAAU,CAAC,MAAM,CAAC,IAAI,SAAS;gBAE9C,oBAAC,SAAS,IAAC,IAAI,EAAE,IAAI,IAAG,MAAM,CAAC,KAAK,CAAa;gBAChD,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,eAAe,CAAC,IAAI,oBAAC,aAAa,OAAG,CAC1D,CACN,CAAC,CACC,CACN,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC"}
|
|
@@ -8,7 +8,7 @@ type FilteredOptionsProps = {
|
|
|
8
8
|
options: ComboboxOption[];
|
|
9
9
|
};
|
|
10
10
|
};
|
|
11
|
-
type
|
|
11
|
+
type FilteredOptionsContextValue = {
|
|
12
12
|
activeDecendantId?: string;
|
|
13
13
|
allowNewValues?: boolean;
|
|
14
14
|
ariaDescribedBy?: string;
|
|
@@ -24,6 +24,6 @@ type FilteredOptionsContextType = {
|
|
|
24
24
|
shouldAutocomplete?: boolean;
|
|
25
25
|
virtualFocus: VirtualFocusType;
|
|
26
26
|
};
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
export {};
|
|
27
|
+
declare const useFilteredOptionsContext: <S extends boolean = true>(strict?: S) => S extends true ? FilteredOptionsContextValue : FilteredOptionsContextValue | undefined;
|
|
28
|
+
declare const FilteredOptionsProvider: ({ children, value: props, }: FilteredOptionsProps) => React.JSX.Element;
|
|
29
|
+
export { FilteredOptionsProvider, useFilteredOptionsContext };
|
|
@@ -1,21 +1,25 @@
|
|
|
1
1
|
import cl from "clsx";
|
|
2
|
-
import React, {
|
|
2
|
+
import React, { useCallback, useMemo, useState } from "react";
|
|
3
|
+
import { createContext } from "../../../util/create-context.js";
|
|
3
4
|
import { useClientLayoutEffect, usePrevious } from "../../../util/hooks/index.js";
|
|
4
|
-
import { useInputContext } from "../Input/
|
|
5
|
+
import { useInputContext } from "../Input/Input.context.js";
|
|
5
6
|
import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext.js";
|
|
6
7
|
import { toComboboxOption } from "../combobox-utils.js";
|
|
7
|
-
import {
|
|
8
|
+
import { useComboboxCustomOptions } from "../customOptionsContext.js";
|
|
8
9
|
import filteredOptionsUtils from "./filtered-options-util.js";
|
|
9
10
|
import useVirtualFocus from "./useVirtualFocus.js";
|
|
10
|
-
const
|
|
11
|
-
|
|
11
|
+
const [FilteredOptionsContextProvider, useFilteredOptionsContext] = createContext({
|
|
12
|
+
name: "FilteredOptionsContext",
|
|
13
|
+
errorMessage: "useFilteredOptionsContext must be used within a FilteredOptionsProvider",
|
|
14
|
+
});
|
|
15
|
+
const FilteredOptionsProvider = ({ children, value: props, }) => {
|
|
12
16
|
const { allowNewValues, filteredOptions: externalFilteredOptions, isListOpen: isExternalListOpen, isLoading, options, } = props;
|
|
13
17
|
const [filteredOptionsRef, setFilteredOptionsRef] = useState(null);
|
|
14
18
|
const virtualFocus = useVirtualFocus(filteredOptionsRef);
|
|
15
19
|
const { inputProps: { "aria-describedby": partialAriaDescribedBy, id }, value, searchTerm, setValue, setSearchTerm, shouldAutocomplete, } = useInputContext();
|
|
16
20
|
const { maxSelected } = useSelectedOptionsContext();
|
|
17
21
|
const [isInternalListOpen, setInternalListOpen] = useState(false);
|
|
18
|
-
const { customOptions } =
|
|
22
|
+
const { customOptions } = useComboboxCustomOptions();
|
|
19
23
|
const filteredOptions = useMemo(() => {
|
|
20
24
|
if (externalFilteredOptions) {
|
|
21
25
|
return externalFilteredOptions;
|
|
@@ -55,10 +59,10 @@ export const FilteredOptionsProvider = ({ children, value: props, }) => {
|
|
|
55
59
|
!filteredOptionsMap[filteredOptionsUtils.getOptionId(id, value)], [filteredOptionsMap, id, value]);
|
|
56
60
|
const ariaDescribedBy = useMemo(() => {
|
|
57
61
|
let activeOption;
|
|
58
|
-
if (!isLoading && filteredOptions.length === 0) {
|
|
62
|
+
if (!isLoading && filteredOptions.length === 0 && !allowNewValues) {
|
|
59
63
|
activeOption = filteredOptionsUtils.getNoHitsId(id);
|
|
60
64
|
}
|
|
61
|
-
else if (
|
|
65
|
+
else if (value || isLoading) {
|
|
62
66
|
if (shouldAutocomplete && filteredOptions[0]) {
|
|
63
67
|
activeOption = filteredOptionsUtils.getOptionId(id, filteredOptions[0].label);
|
|
64
68
|
}
|
|
@@ -79,6 +83,7 @@ export const FilteredOptionsProvider = ({ children, value: props, }) => {
|
|
|
79
83
|
shouldAutocomplete,
|
|
80
84
|
filteredOptions,
|
|
81
85
|
id,
|
|
86
|
+
allowNewValues,
|
|
82
87
|
]);
|
|
83
88
|
const currentOption = useMemo(() => { var _a; return filteredOptionsMap[((_a = virtualFocus.activeElement) === null || _a === void 0 ? void 0 : _a.getAttribute("id")) || -1]; }, [filteredOptionsMap, virtualFocus]);
|
|
84
89
|
const activeDecendantId = useMemo(() => { var _a; return ((_a = virtualFocus.activeElement) === null || _a === void 0 ? void 0 : _a.getAttribute("id")) || undefined; }, [virtualFocus.activeElement]);
|
|
@@ -98,13 +103,7 @@ export const FilteredOptionsProvider = ({ children, value: props, }) => {
|
|
|
98
103
|
virtualFocus,
|
|
99
104
|
ariaDescribedBy,
|
|
100
105
|
};
|
|
101
|
-
return (React.createElement(
|
|
102
|
-
};
|
|
103
|
-
export const useFilteredOptionsContext = () => {
|
|
104
|
-
const context = useContext(FilteredOptionsContext);
|
|
105
|
-
if (!context) {
|
|
106
|
-
throw new Error("useFilteredOptionsContext must be used within a FilteredOptionsProvider");
|
|
107
|
-
}
|
|
108
|
-
return context;
|
|
106
|
+
return (React.createElement(FilteredOptionsContextProvider, Object.assign({}, filteredOptionsState), children));
|
|
109
107
|
};
|
|
108
|
+
export { FilteredOptionsProvider, useFilteredOptionsContext };
|
|
110
109
|
//# sourceMappingURL=filteredOptionsContext.js.map
|
|
@@ -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,
|
|
1
|
+
{"version":3,"file":"filteredOptionsContext.js","sourceRoot":"","sources":["../../../../src/form/combobox/FilteredOptions/filteredOptionsContext.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React, { ChangeEventHandler } from "react";
|
|
2
2
|
import { FormFieldType } from "../../useFormField.js";
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
import { ComboboxProps } from "../types.js";
|
|
4
|
+
interface InputContextValue extends FormFieldType {
|
|
5
|
+
clearInput: NonNullable<ComboboxProps["onClear"]>;
|
|
5
6
|
error?: string;
|
|
6
7
|
focusInput: () => void;
|
|
7
8
|
inputRef: React.RefObject<HTMLInputElement>;
|
|
@@ -11,10 +12,11 @@ interface InputContextType extends FormFieldType {
|
|
|
11
12
|
searchTerm: string;
|
|
12
13
|
setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
|
|
13
14
|
shouldAutocomplete?: boolean;
|
|
15
|
+
toggleOpenButtonRef: React.RefObject<HTMLButtonElement>;
|
|
14
16
|
}
|
|
15
|
-
|
|
17
|
+
declare const useInputContext: <S extends boolean = true>(strict?: S) => S extends true ? InputContextValue : InputContextValue | undefined;
|
|
18
|
+
declare const InputProvider: ({ children, value: props }: {
|
|
16
19
|
children: any;
|
|
17
20
|
value: any;
|
|
18
21
|
}) => React.JSX.Element;
|
|
19
|
-
export
|
|
20
|
-
export {};
|
|
22
|
+
export { InputProvider as InputContextProvider, useInputContext };
|
|
@@ -1,8 +1,12 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { useCallback, useMemo, useRef, useState, } from "react";
|
|
2
|
+
import { createContext } from "../../../util/create-context.js";
|
|
2
3
|
import { useClientLayoutEffect } from "../../../util/hooks/index.js";
|
|
3
4
|
import { useFormField } from "../../useFormField.js";
|
|
4
|
-
const
|
|
5
|
-
|
|
5
|
+
const [InputContextProvider, useInputContext] = createContext({
|
|
6
|
+
name: "InputContext",
|
|
7
|
+
errorMessage: "useInputContext must be used within an InputContextProvider",
|
|
8
|
+
});
|
|
9
|
+
const InputProvider = ({ children, value: props }) => {
|
|
6
10
|
const { defaultValue = "", description, disabled, error, errorId, id: externalId, value: externalValue, onChange: externalOnChange, onClear, shouldAutocomplete, size, } = props;
|
|
7
11
|
const formFieldProps = useFormField({
|
|
8
12
|
description,
|
|
@@ -13,6 +17,7 @@ export const InputContextProvider = ({ children, value: props }) => {
|
|
|
13
17
|
size,
|
|
14
18
|
}, "comboboxfield");
|
|
15
19
|
const inputRef = useRef(null);
|
|
20
|
+
const toggleOpenButtonRef = useRef(null);
|
|
16
21
|
const [internalValue, setInternalValue] = useState(defaultValue);
|
|
17
22
|
const value = useMemo(() => String(externalValue !== null && externalValue !== void 0 ? externalValue : internalValue), [externalValue, internalValue]);
|
|
18
23
|
const [searchTerm, setSearchTerm] = useState(value);
|
|
@@ -41,22 +46,18 @@ export const InputContextProvider = ({ children, value: props }) => {
|
|
|
41
46
|
(_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange) === null || _b === void 0 ? void 0 : _b.call(_a, searchTerm.length, value.length);
|
|
42
47
|
}
|
|
43
48
|
}, [value, searchTerm, shouldAutocomplete]);
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
};
|
|
55
|
-
|
|
56
|
-
const context = useContext(InputContext);
|
|
57
|
-
if (!context) {
|
|
58
|
-
throw new Error("useInputContext must be used within an InputContextProvider");
|
|
59
|
-
}
|
|
60
|
-
return context;
|
|
49
|
+
const contextValue = Object.assign(Object.assign({}, formFieldProps), { clearInput,
|
|
50
|
+
error,
|
|
51
|
+
focusInput,
|
|
52
|
+
inputRef,
|
|
53
|
+
value,
|
|
54
|
+
setValue,
|
|
55
|
+
onChange,
|
|
56
|
+
searchTerm,
|
|
57
|
+
setSearchTerm,
|
|
58
|
+
shouldAutocomplete,
|
|
59
|
+
toggleOpenButtonRef });
|
|
60
|
+
return (React.createElement(InputContextProvider, Object.assign({}, contextValue), children));
|
|
61
61
|
};
|
|
62
|
-
|
|
62
|
+
export { InputProvider as InputContextProvider, useInputContext };
|
|
63
|
+
//# sourceMappingURL=Input.context.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Input.context.js","sourceRoot":"","sources":["../../../../src/form/combobox/Input/Input.context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAGZ,WAAW,EACX,OAAO,EACP,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAiB,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAiBjE,MAAM,CAAC,oBAAoB,EAAE,eAAe,CAAC,GAC3C,aAAa,CAAoB;IAC/B,IAAI,EAAE,cAAc;IACpB,YAAY,EAAE,6DAA6D;CAC5E,CAAC,CAAC;AAEL,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;IACnD,MAAM,EACJ,YAAY,GAAG,EAAE,EACjB,WAAW,EACX,QAAQ,EACR,KAAK,EACL,OAAO,EACP,EAAE,EAAE,UAAU,EACd,KAAK,EAAE,aAAa,EACpB,QAAQ,EAAE,gBAAgB,EAC1B,OAAO,EACP,kBAAkB,EAClB,IAAI,GACL,GAAG,KAAK,CAAC;IACV,MAAM,cAAc,GAAG,YAAY,CACjC;QACE,WAAW;QACX,QAAQ;QACR,KAAK;QACL,OAAO;QACP,EAAE,EAAE,UAAU;QACd,IAAI;KACL,EACD,eAAe,CAChB,CAAC;IACF,MAAM,QAAQ,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IACvD,MAAM,mBAAmB,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAC5D,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAS,YAAY,CAAC,CAAC;IAEzE,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,MAAM,CAAC,aAAa,aAAb,aAAa,cAAb,aAAa,GAAI,aAAa,CAAC,EAC5C,CAAC,aAAa,EAAE,aAAa,CAAC,CAC/B,CAAC;IAEF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,KAAoC,EAAE,EAAE;QACvC,MAAM,QAAQ,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC;QAC3C,aAAa,aAAb,aAAa,cAAb,aAAa,GAAI,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QAC5C,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,KAAK,CAAC,CAAC;QAC1B,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC1B,CAAC,EACD,CAAC,aAAa,EAAE,gBAAgB,CAAC,CAClC,CAAC;IAEF,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,IAAI,EAAE,EAAE;QACP,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACzB,CAAC,EACD,CAAC,gBAAgB,CAAC,CACnB,CAAC;IAEF,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,KAAkE,EAAE,EAAE;QACrE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,KAAK,CAAC,CAAC;QACjB,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,IAAI,EAAE,EAAE,CAAC,CAAC;QAC7B,QAAQ,CAAC,EAAE,CAAC,CAAC;QACb,aAAa,CAAC,EAAE,CAAC,CAAC;IACpB,CAAC,EACD,CAAC,gBAAgB,EAAE,OAAO,EAAE,QAAQ,CAAC,CACtC,CAAC;IAEF,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;;QAClC,MAAA,MAAA,QAAQ,CAAC,OAAO,0CAAE,KAAK,kDAAI,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,qBAAqB,CAAC,GAAG,EAAE;;QACzB,IAAI,kBAAkB,IAAI,QAAQ,IAAI,KAAK,KAAK,UAAU,EAAE,CAAC;YAC3D,MAAA,MAAA,QAAQ,CAAC,OAAO,0CAAE,iBAAiB,mDAAG,UAAU,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;QACzE,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAE5C,MAAM,YAAY,mCACb,cAAc,KACjB,UAAU;QACV,KAAK;QACL,UAAU;QACV,QAAQ;QACR,KAAK;QACL,QAAQ;QACR,QAAQ;QACR,UAAU;QACV,aAAa;QACb,kBAAkB;QAClB,mBAAmB,GACpB,CAAC;IAEF,OAAO,CACL,oBAAC,oBAAoB,oBAAK,YAAY,GAAG,QAAQ,CAAwB,CAC1E,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,aAAa,IAAI,oBAAoB,EAAE,eAAe,EAAE,CAAC"}
|
|
@@ -15,7 +15,7 @@ import { omit } from "../../../util/index.js";
|
|
|
15
15
|
import filteredOptionsUtil from "../FilteredOptions/filtered-options-util.js";
|
|
16
16
|
import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext.js";
|
|
17
17
|
import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext.js";
|
|
18
|
-
import { useInputContext } from "./
|
|
18
|
+
import { useInputContext } from "./Input.context.js";
|
|
19
19
|
const Input = forwardRef((_a, ref) => {
|
|
20
20
|
var { inputClassName } = _a, rest = __rest(_a, ["inputClassName"]);
|
|
21
21
|
const { clearInput, inputProps, onChange, size, value } = useInputContext();
|
|
@@ -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,EAGZ,UAAU,EACV,WAAW,GACZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,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,
|
|
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,EAGZ,UAAU,EACV,WAAW,GACZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,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;AASlD,MAAM,KAAK,GAAG,UAAU,CACtB,CAAC,EAA2B,EAAE,GAAG,EAAE,EAAE;QAApC,EAAE,cAAc,OAAW,EAAN,IAAI,cAAzB,kBAA2B,CAAF;IACxB,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,eAAe,EAAE,CAAC;IAC5E,MAAM,EACJ,eAAe,EACf,oBAAoB,EACpB,YAAY,EACZ,aAAa,GACd,GAAG,yBAAyB,EAAE,CAAC;IAChC,MAAM,EACJ,iBAAiB,EACjB,cAAc,EACd,aAAa,EACb,eAAe,EACf,UAAU,EACV,gBAAgB,EAChB,UAAU,EACV,eAAe,EACf,6BAA6B,EAC7B,kBAAkB,EAClB,YAAY,GACb,GAAG,yBAAyB,EAAE,CAAC;IAEhC,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,KAA0B,EAAE,EAAE;QAC7B,MAAM,uBAAuB,GAAG,CAAC,IAAY,EAAE,EAAE,CAC/C,eAAe,CAAC,IAAI,CAClB,CAAC,MAAM,EAAE,EAAE,CACT,MAAM,CAAC,KAAK,CAAC,iBAAiB,EAAE,KAAK,IAAI,CAAC,iBAAiB,EAAE,CAChE,CAAC;QAEJ,IAAI,aAAa,EAAE,CAAC;YAClB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,wDAAwD;YACxD,YAAY,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;YACnC,IAAI,CAAC,aAAa,IAAI,CAAC,uBAAuB,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC;gBACpE,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAC1B,CAAC;QACH,CAAC;aAAM,IAAI,kBAAkB,IAAI,uBAAuB,CAAC,KAAK,CAAC,EAAE,CAAC;YAChE,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,+EAA+E;YAC/E,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC;aAAM,IAAI,CAAC,cAAc,IAAI,kBAAkB,CAAC,IAAI,KAAK,KAAK,EAAE,EAAE,CAAC;YAClE,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,uCAAuC;YACvC,MAAM,aAAa,GACjB,cAAc,IAAI,UAAU;gBAC1B,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;gBACzB,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;YACzB,YAAY,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;YACnC,IACE,CAAC,aAAa;gBACd,CAAC,uBAAuB,CACtB,eAAe,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,aAAa,CAAC,KAAK,CAChD,EACD,CAAC;gBACD,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAC1B,CAAC;QACH,CAAC;IACH,CAAC,EACD;QACE,cAAc;QACd,UAAU;QACV,aAAa;QACb,eAAe;QACf,aAAa;QACb,UAAU;QACV,eAAe;QACf,kBAAkB;QAClB,gBAAgB;QAChB,YAAY;QACZ,KAAK;KACN,CACF,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,CAAwC,EAAE,EAAE;QAC/D,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,QAAQ,CAAC,CAAC,GAAG,EAAE,CAAC;YACd,KAAK,QAAQ;gBACX,UAAU,CAAC,CAAC,CAAC,CAAC;gBACd,gBAAgB,CAAC,KAAK,CAAC,CAAC;gBACxB,MAAM;YACR,KAAK,OAAO,CAAC;YACb,KAAK,QAAQ;gBACX,OAAO,CAAC,CAAC,CAAC,CAAC;gBACX,MAAM;YACR,KAAK,MAAM;gBACT,gBAAgB,CAAC,KAAK,CAAC,CAAC;gBACxB,YAAY,CAAC,cAAc,EAAE,CAAC;gBAC9B,MAAM;YACR,KAAK,KAAK;gBACR,gBAAgB,CAAC,IAAI,CAAC,CAAC;gBACvB,YAAY,CAAC,iBAAiB,EAAE,CAAC;gBACjC,MAAM;YACR;gBACE,MAAM;QACV,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,CAAC,EAAE,EAAE;QACJ,6BAA6B,CAAC,KAAK,CAAC,CAAC;QACrC,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;YAC1B,IAAI,KAAK,KAAK,EAAE,EAAE,CAAC;gBACjB,MAAM,kBAAkB,GACtB,eAAe,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;gBAC9C,IAAI,kBAAkB,EAAE,CAAC;oBACvB,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;gBAC3C,CAAC;YACH,CAAC;QACH,CAAC;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YACnD,IAAI,iBAAiB,IAAI,KAAK,EAAE,CAAC;gBAC/B,CAAC,CAAC,cAAc,EAAE,CAAC;YACrB,CAAC;QACH,CAAC;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;YACjC,+DAA+D;YAC/D,0CAA0C;YAC1C,IAAI,CAAC,CAAC,MAAM,CAAC,cAAc,MAAK,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,CAAA,EAAE,CAAC;gBAC9C,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,YAAY,CAAC,aAAa,KAAK,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;oBACvD,gBAAgB,CAAC,IAAI,CAAC,CAAC;gBACzB,CAAC;gBACD,YAAY,CAAC,aAAa,EAAE,CAAC;YAC/B,CAAC;QACH,CAAC;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;YAC/B,qEAAqE;YACrE,yEAAyE;YACzE,IAAI,UAAU,IAAI,iBAAiB,EAAE,CAAC;gBACpC,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,YAAY,CAAC,eAAe,EAAE,EAAE,CAAC;oBACnC,gBAAgB,CAAC,KAAK,CAAC,CAAC;gBAC1B,CAAC;gBACD,YAAY,CAAC,WAAW,EAAE,CAAC;YAC7B,CAAC;QACH,CAAC;IACH,CAAC,EACD;QACE,KAAK;QACL,eAAe;QACf,oBAAoB;QACpB,UAAU;QACV,iBAAiB;QACjB,6BAA6B;QAC7B,gBAAgB;QAChB,YAAY;KACb,CACF,CAAC;IAEF,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,KAAoC,EAAE,EAAE;QACvC,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QACpC,IAAI,QAAQ,IAAI,QAAQ,KAAK,EAAE,EAAE,CAAC;YAChC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACzB,CAAC;aAAM,IAAI,eAAe,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACxC,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAC1B,CAAC;QACD,YAAY,CAAC,cAAc,EAAE,CAAC;QAC9B,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClB,CAAC,EACD,CAAC,eAAe,CAAC,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,gBAAgB,CAAC,CACnE,CAAC;IAEF,OAAO,CACL,+CACM,IAAI,EACJ,IAAI,CAAC,UAAU,EAAE,CAAC,cAAc,CAAC,CAAC,IACtC,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,cAAc,EAAE,EAC3C,QAAQ,EAAE,eAAe,EACzB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,mBACT,mBAAmB,CAAC,oBAAoB,CAAC,UAAU,CAAC,EAAE,CAAC,mBACvD,CAAC,CAAC,UAAU,EAC3B,YAAY,EAAC,KAAK,uBACC,kBAAkB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,2BAChC,iBAAiB,sBACtB,eAAe,kBACnB,UAAU,CAAC,cAAc,CAAC,EACxC,SAAS,EAAE,EAAE,CACX,cAAc,EACd,uBAAuB,EACvB,kBAAkB,EAClB,qBAAqB,IAAI,EAAE,CAC5B,IACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ComboboxProps } from "../types.js";
|
|
3
|
+
export declare const InputController: React.ForwardRefExoticComponent<Omit<ComboboxProps, "label" | "size" | "onChange" | "value" | "options" | "hideLabel" | "description" | "onClear"> & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
/* eslint-disable jsx-a11y/no-static-element-interactions */
|
|
13
|
+
import cl from "clsx";
|
|
14
|
+
import React, { forwardRef } from "react";
|
|
15
|
+
import { XMarkIcon } from "@navikt/aksel-icons";
|
|
16
|
+
import { useMergeRefs } from "../../../util/hooks/index.js";
|
|
17
|
+
import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext.js";
|
|
18
|
+
import SelectedOptions from "../SelectedOptions/SelectedOptions.js";
|
|
19
|
+
import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext.js";
|
|
20
|
+
import Input from "./Input.js";
|
|
21
|
+
import { useInputContext } from "./Input.context.js";
|
|
22
|
+
import ToggleListButton from "./ToggleListButton.js";
|
|
23
|
+
/* eslint-disable jsx-a11y/click-events-have-key-events */
|
|
24
|
+
export const InputController = forwardRef((props, ref) => {
|
|
25
|
+
const { clearButton = true, clearButtonLabel, toggleListButton = true, toggleListButtonLabel, inputClassName, shouldShowSelectedOptions = true } = props, rest = __rest(props, ["clearButton", "clearButtonLabel", "toggleListButton", "toggleListButtonLabel", "inputClassName", "shouldShowSelectedOptions"]);
|
|
26
|
+
const { clearInput, focusInput, inputProps, value, size = "medium", inputRef, toggleOpenButtonRef, } = useInputContext();
|
|
27
|
+
const { activeDecendantId } = useFilteredOptionsContext();
|
|
28
|
+
const { selectedOptions } = useSelectedOptionsContext();
|
|
29
|
+
const mergedInputRef = useMergeRefs(inputRef, ref);
|
|
30
|
+
return (React.createElement("div", { className: cl("navds-combobox__wrapper-inner navds-text-field__input", {
|
|
31
|
+
"navds-combobox__wrapper-inner--virtually-unfocused": activeDecendantId !== undefined,
|
|
32
|
+
}), onClick: focusInput },
|
|
33
|
+
!shouldShowSelectedOptions ? (React.createElement(Input, Object.assign({ id: inputProps.id, ref: mergedInputRef, inputClassName: inputClassName }, rest))) : (React.createElement(SelectedOptions, { selectedOptions: selectedOptions, size: size },
|
|
34
|
+
React.createElement(Input, Object.assign({ id: inputProps.id, ref: mergedInputRef, inputClassName: inputClassName }, rest)))),
|
|
35
|
+
React.createElement("div", null,
|
|
36
|
+
value && clearButton && (React.createElement("button", { type: "button", onClick: clearInput, className: "navds-combobox__button-clear", tabIndex: -1 },
|
|
37
|
+
React.createElement("span", { className: "navds-sr-only" }, clearButtonLabel ? clearButtonLabel : "Tøm"),
|
|
38
|
+
React.createElement(XMarkIcon, { "aria-hidden": true }))),
|
|
39
|
+
toggleListButton && (React.createElement(ToggleListButton, { toggleListButtonLabel: toggleListButtonLabel, ref: toggleOpenButtonRef })))));
|
|
40
|
+
});
|
|
41
|
+
//# sourceMappingURL=InputController.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InputController.js","sourceRoot":"","sources":["../../../../src/form/combobox/Input/InputController.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,4DAA4D;AAC5D,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAC;AACtF,OAAO,eAAe,MAAM,oCAAoC,CAAC;AACjE,OAAO,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAC;AAEtF,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAElD,0DAA0D;AAC1D,MAAM,CAAC,MAAM,eAAe,GAAG,UAAU,CAavC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACf,MAAM,EACJ,WAAW,GAAG,IAAI,EAClB,gBAAgB,EAChB,gBAAgB,GAAG,IAAI,EACvB,qBAAqB,EACrB,cAAc,EACd,yBAAyB,GAAG,IAAI,KAE9B,KAAK,EADJ,IAAI,UACL,KAAK,EARH,+HAQL,CAAQ,CAAC;IAEV,MAAM,EACJ,UAAU,EACV,UAAU,EACV,UAAU,EACV,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,QAAQ,EACR,mBAAmB,GACpB,GAAG,eAAe,EAAE,CAAC;IAEtB,MAAM,EAAE,iBAAiB,EAAE,GAAG,yBAAyB,EAAE,CAAC;IAC1D,MAAM,EAAE,eAAe,EAAE,GAAG,yBAAyB,EAAE,CAAC;IAExD,MAAM,cAAc,GAAG,YAAY,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;IAEnD,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CAAC,uDAAuD,EAAE;YACrE,oDAAoD,EAClD,iBAAiB,KAAK,SAAS;SAClC,CAAC,EACF,OAAO,EAAE,UAAU;QAElB,CAAC,yBAAyB,CAAC,CAAC,CAAC,CAC5B,oBAAC,KAAK,kBACJ,EAAE,EAAE,UAAU,CAAC,EAAE,EACjB,GAAG,EAAE,cAAc,EACnB,cAAc,EAAE,cAAc,IAC1B,IAAI,EACR,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,eAAe,IAAC,eAAe,EAAE,eAAe,EAAE,IAAI,EAAE,IAAI;YAC3D,oBAAC,KAAK,kBACJ,EAAE,EAAE,UAAU,CAAC,EAAE,EACjB,GAAG,EAAE,cAAc,EACnB,cAAc,EAAE,cAAc,IAC1B,IAAI,EACR,CACc,CACnB;QACD;YACG,KAAK,IAAI,WAAW,IAAI,CACvB,gCACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,UAAU,EACnB,SAAS,EAAC,8BAA8B,EACxC,QAAQ,EAAE,CAAC,CAAC;gBAEZ,8BAAM,SAAS,EAAC,eAAe,IAC5B,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CACvC;gBACP,oBAAC,SAAS,0BAAe,CAClB,CACV;YACA,gBAAgB,IAAI,CACnB,oBAAC,gBAAgB,IACf,qBAAqB,EAAE,qBAAqB,EAC5C,GAAG,EAAE,mBAAmB,GACxB,CACH,CACG,CACF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { forwardRef } from "react";
|
|
2
2
|
import { ChevronDownIcon, ChevronUpIcon } from "@navikt/aksel-icons";
|
|
3
|
-
import { useFilteredOptionsContext } from "
|
|
3
|
+
import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext.js";
|
|
4
4
|
export const ToggleListButton = forwardRef(({ toggleListButtonLabel }, ref) => {
|
|
5
5
|
const { isListOpen, toggleIsListOpen } = useFilteredOptionsContext();
|
|
6
6
|
return (React.createElement("button", { type: "button", onPointerUp: () => toggleIsListOpen(), onKeyDown: ({ key }) => key === "Enter" && toggleIsListOpen(), className: "navds-combobox__button-toggle-list", "aria-expanded": isListOpen, tabIndex: -1, ref: ref },
|
|
@@ -0,0 +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;AAMtF,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,OAAO,CACL,gCACE,IAAI,EAAC,QAAQ,EACb,WAAW,EAAE,GAAG,EAAE,CAAC,gBAAgB,EAAE,EACrC,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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { Chips } from "../../../chips/index.js";
|
|
3
|
-
import { useInputContext } from "../Input/
|
|
3
|
+
import { useInputContext } from "../Input/Input.context.js";
|
|
4
4
|
import { useSelectedOptionsContext } from "./selectedOptionsContext.js";
|
|
5
5
|
const Option = ({ option }) => {
|
|
6
6
|
const { isMultiSelect, removeSelectedOption } = useSelectedOptionsContext();
|
|
@@ -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,
|
|
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;YACrB,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,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { ComboboxOption, ComboboxProps, MaxSelected } from "../types.js";
|
|
3
|
-
type
|
|
3
|
+
type SelectedOptionsContextValue = {
|
|
4
4
|
addSelectedOption: (option: ComboboxOption) => void;
|
|
5
5
|
isMultiSelect?: boolean;
|
|
6
6
|
removeSelectedOption: (option: ComboboxOption) => void;
|
|
@@ -12,12 +12,12 @@ type SelectedOptionsContextType = {
|
|
|
12
12
|
setSelectedOptions: (any: any) => void;
|
|
13
13
|
toggleOption: (option: ComboboxOption, event: React.KeyboardEvent | React.PointerEvent) => void;
|
|
14
14
|
};
|
|
15
|
-
|
|
15
|
+
declare const useSelectedOptionsContext: <S extends boolean = true>(strict?: S) => S extends true ? SelectedOptionsContextValue : SelectedOptionsContextValue | undefined;
|
|
16
|
+
declare const SelectedOptionsProvider: ({ children, value, }: {
|
|
16
17
|
children: any;
|
|
17
18
|
value: Pick<ComboboxProps, "allowNewValues" | "isMultiSelect" | "onToggleSelected" | "maxSelected"> & {
|
|
18
19
|
options: ComboboxOption[];
|
|
19
20
|
selectedOptions?: ComboboxOption[];
|
|
20
21
|
};
|
|
21
22
|
}) => React.JSX.Element;
|
|
22
|
-
export
|
|
23
|
-
export {};
|
|
23
|
+
export { SelectedOptionsProvider, useSelectedOptionsContext };
|
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { useCallback, useMemo, useState } from "react";
|
|
2
|
+
import { createContext } from "../../../util/create-context.js";
|
|
2
3
|
import { usePrevious } from "../../../util/hooks/index.js";
|
|
3
|
-
import { useInputContext } from "../Input/
|
|
4
|
+
import { useInputContext } from "../Input/Input.context.js";
|
|
4
5
|
import { isInList } from "../combobox-utils.js";
|
|
5
|
-
import {
|
|
6
|
-
const
|
|
7
|
-
|
|
6
|
+
import { useComboboxCustomOptions } from "../customOptionsContext.js";
|
|
7
|
+
const [SelectedOptionsContextProvider, useSelectedOptionsContext] = createContext();
|
|
8
|
+
const SelectedOptionsProvider = ({ children, value, }) => {
|
|
8
9
|
const { clearInput, focusInput } = useInputContext();
|
|
9
|
-
const { customOptions, removeCustomOption, addCustomOption, setCustomOptions, } =
|
|
10
|
+
const { customOptions, removeCustomOption, addCustomOption, setCustomOptions, } = useComboboxCustomOptions();
|
|
10
11
|
const { allowNewValues, isMultiSelect, selectedOptions: externalSelectedOptions, onToggleSelected, options, maxSelected, } = value;
|
|
11
12
|
const [internalSelectedOptions, setSelectedOptions] = useState([]);
|
|
12
13
|
const selectedOptions = useMemo(() => externalSelectedOptions !== null && externalSelectedOptions !== void 0 ? externalSelectedOptions : [...customOptions, ...internalSelectedOptions], [customOptions, externalSelectedOptions, internalSelectedOptions]);
|
|
@@ -73,13 +74,7 @@ export const SelectedOptionsProvider = ({ children, value, }) => {
|
|
|
73
74
|
toggleOption,
|
|
74
75
|
maxSelected: maxSelected && Object.assign(Object.assign({}, maxSelected), { isLimitReached }),
|
|
75
76
|
};
|
|
76
|
-
return (React.createElement(
|
|
77
|
-
};
|
|
78
|
-
export const useSelectedOptionsContext = () => {
|
|
79
|
-
const context = useContext(SelectedOptionsContext);
|
|
80
|
-
if (!context) {
|
|
81
|
-
throw new Error("useSelectedOptionsContext must be used within a SelectedOptionsProvider");
|
|
82
|
-
}
|
|
83
|
-
return context;
|
|
77
|
+
return (React.createElement(SelectedOptionsContextProvider, Object.assign({}, selectedOptionsState), children));
|
|
84
78
|
};
|
|
79
|
+
export { SelectedOptionsProvider, useSelectedOptionsContext };
|
|
85
80
|
//# sourceMappingURL=selectedOptionsContext.js.map
|