@transferwise/components 46.130.1 → 46.130.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/alert/Alert.js +4 -1
- package/build/alert/Alert.js.map +1 -1
- package/build/alert/Alert.mjs +4 -1
- package/build/alert/Alert.mjs.map +1 -1
- package/build/criticalBanner/CriticalCommsBanner.js +6 -4
- package/build/criticalBanner/CriticalCommsBanner.js.map +1 -1
- package/build/criticalBanner/CriticalCommsBanner.mjs +6 -4
- package/build/criticalBanner/CriticalCommsBanner.mjs.map +1 -1
- package/build/dateInput/DateInput.js +12 -5
- package/build/dateInput/DateInput.js.map +1 -1
- package/build/dateInput/DateInput.mjs +11 -4
- package/build/dateInput/DateInput.mjs.map +1 -1
- package/build/expressiveMoneyInput/currencySelector/CurrencySelector.js +16 -8
- package/build/expressiveMoneyInput/currencySelector/CurrencySelector.js.map +1 -1
- package/build/expressiveMoneyInput/currencySelector/CurrencySelector.mjs +14 -6
- package/build/expressiveMoneyInput/currencySelector/CurrencySelector.mjs.map +1 -1
- package/build/index.js +12 -7
- package/build/index.js.map +1 -1
- package/build/index.mjs +9 -3
- package/build/index.mjs.map +1 -1
- package/build/inputs/{_BottomSheet.js → SelectInput/BottomSheet/SelectInputBottomSheet.js} +7 -7
- package/build/inputs/SelectInput/BottomSheet/SelectInputBottomSheet.js.map +1 -0
- package/build/inputs/{_BottomSheet.mjs → SelectInput/BottomSheet/SelectInputBottomSheet.mjs} +7 -7
- package/build/inputs/SelectInput/BottomSheet/SelectInputBottomSheet.mjs.map +1 -0
- package/build/inputs/{_ButtonInput.js → SelectInput/ButtonInput/SelectInputButtonInput.js} +5 -5
- package/build/inputs/SelectInput/ButtonInput/SelectInputButtonInput.js.map +1 -0
- package/build/inputs/{_ButtonInput.mjs → SelectInput/ButtonInput/SelectInputButtonInput.mjs} +5 -5
- package/build/inputs/SelectInput/ButtonInput/SelectInputButtonInput.mjs.map +1 -0
- package/build/inputs/SelectInput/ClearButton/SelectInputClearButton.js +26 -0
- package/build/inputs/SelectInput/ClearButton/SelectInputClearButton.js.map +1 -0
- package/build/inputs/SelectInput/ClearButton/SelectInputClearButton.mjs +24 -0
- package/build/inputs/SelectInput/ClearButton/SelectInputClearButton.mjs.map +1 -0
- package/build/inputs/SelectInput/DefaultRenderTrigger/SelectInputDefaultRenderTrigger.js +59 -0
- package/build/inputs/SelectInput/DefaultRenderTrigger/SelectInputDefaultRenderTrigger.js.map +1 -0
- package/build/inputs/SelectInput/DefaultRenderTrigger/SelectInputDefaultRenderTrigger.mjs +56 -0
- package/build/inputs/SelectInput/DefaultRenderTrigger/SelectInputDefaultRenderTrigger.mjs.map +1 -0
- package/build/inputs/SelectInput/ItemView/GroupItemView/SelectInputGroupItemView.js +50 -0
- package/build/inputs/SelectInput/ItemView/GroupItemView/SelectInputGroupItemView.js.map +1 -0
- package/build/inputs/SelectInput/ItemView/GroupItemView/SelectInputGroupItemView.mjs +48 -0
- package/build/inputs/SelectInput/ItemView/GroupItemView/SelectInputGroupItemView.mjs.map +1 -0
- package/build/inputs/SelectInput/ItemView/SelectInputItemView.js +47 -0
- package/build/inputs/SelectInput/ItemView/SelectInputItemView.js.map +1 -0
- package/build/inputs/SelectInput/ItemView/SelectInputItemView.mjs +45 -0
- package/build/inputs/SelectInput/ItemView/SelectInputItemView.mjs.map +1 -0
- package/build/inputs/SelectInput/Option/SelectInputOption.js +42 -0
- package/build/inputs/SelectInput/Option/SelectInputOption.js.map +1 -0
- package/build/inputs/SelectInput/Option/SelectInputOption.mjs +40 -0
- package/build/inputs/SelectInput/Option/SelectInputOption.mjs.map +1 -0
- package/build/inputs/SelectInput/OptionContent/SelectInputOptionContent.js +40 -0
- package/build/inputs/SelectInput/OptionContent/SelectInputOptionContent.js.map +1 -0
- package/build/inputs/SelectInput/OptionContent/SelectInputOptionContent.mjs +38 -0
- package/build/inputs/SelectInput/OptionContent/SelectInputOptionContent.mjs.map +1 -0
- package/build/inputs/SelectInput/Options/OptionsContainer/SelectInputOptionsContainer.js +48 -0
- package/build/inputs/SelectInput/Options/OptionsContainer/SelectInputOptionsContainer.js.map +1 -0
- package/build/inputs/SelectInput/Options/OptionsContainer/SelectInputOptionsContainer.mjs +46 -0
- package/build/inputs/SelectInput/Options/OptionsContainer/SelectInputOptionsContainer.mjs.map +1 -0
- package/build/inputs/SelectInput/Options/SelectInputOptions.js +300 -0
- package/build/inputs/SelectInput/Options/SelectInputOptions.js.map +1 -0
- package/build/inputs/SelectInput/Options/SelectInputOptions.mjs +298 -0
- package/build/inputs/SelectInput/Options/SelectInputOptions.mjs.map +1 -0
- package/build/inputs/{_Popover.js → SelectInput/Popover/SelectInputPopover.js} +7 -7
- package/build/inputs/SelectInput/Popover/SelectInputPopover.js.map +1 -0
- package/build/inputs/{_Popover.mjs → SelectInput/Popover/SelectInputPopover.mjs} +7 -7
- package/build/inputs/SelectInput/Popover/SelectInputPopover.mjs.map +1 -0
- package/build/inputs/SelectInput/SelectInput.contexts.js +29 -0
- package/build/inputs/SelectInput/SelectInput.contexts.js.map +1 -0
- package/build/inputs/SelectInput/SelectInput.contexts.mjs +24 -0
- package/build/inputs/SelectInput/SelectInput.contexts.mjs.map +1 -0
- package/build/inputs/SelectInput/SelectInput.js +222 -0
- package/build/inputs/SelectInput/SelectInput.js.map +1 -0
- package/build/inputs/SelectInput/SelectInput.messages.js.map +1 -0
- package/build/inputs/SelectInput/SelectInput.messages.mjs.map +1 -0
- package/build/inputs/SelectInput/SelectInput.mjs +216 -0
- package/build/inputs/SelectInput/SelectInput.mjs.map +1 -0
- package/build/inputs/SelectInput/SelectInput.utils.js +164 -0
- package/build/inputs/SelectInput/SelectInput.utils.js.map +1 -0
- package/build/inputs/SelectInput/SelectInput.utils.mjs +154 -0
- package/build/inputs/SelectInput/SelectInput.utils.mjs.map +1 -0
- package/build/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.js +42 -0
- package/build/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.js.map +1 -0
- package/build/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.mjs +36 -0
- package/build/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.mjs.map +1 -0
- package/build/main.css +99 -90
- package/build/moneyInput/MoneyInput.js +9 -2
- package/build/moneyInput/MoneyInput.js.map +1 -1
- package/build/moneyInput/MoneyInput.mjs +8 -1
- package/build/moneyInput/MoneyInput.mjs.map +1 -1
- package/build/phoneNumberInput/PhoneNumberInput.js +10 -3
- package/build/phoneNumberInput/PhoneNumberInput.js.map +1 -1
- package/build/phoneNumberInput/PhoneNumberInput.mjs +9 -2
- package/build/phoneNumberInput/PhoneNumberInput.mjs.map +1 -1
- package/build/styles/criticalBanner/CriticalCommsBanner.css +9 -0
- package/build/styles/inputs/SelectInput/BottomSheet/SelectInputBottomSheet.css +96 -0
- package/build/styles/inputs/SelectInput/ButtonInput/SelectInputButtonInput.css +16 -0
- package/build/styles/inputs/SelectInput/ClearButton/SelectInputClearButton.css +46 -0
- package/build/styles/inputs/SelectInput/ItemView/SelectInputItemView.css +16 -0
- package/build/styles/inputs/SelectInput/Option/SelectInputOption.css +33 -0
- package/build/styles/inputs/SelectInput/OptionContent/SelectInputOptionContent.css +37 -0
- package/build/styles/inputs/SelectInput/Options/SelectInputOptions.css +81 -0
- package/build/styles/inputs/SelectInput/Popover/SelectInputPopover.css +46 -0
- package/build/styles/main.css +99 -90
- package/build/types/alert/Alert.d.ts +2 -0
- package/build/types/alert/Alert.d.ts.map +1 -1
- package/build/types/criticalBanner/CriticalCommsBanner.d.ts +1 -0
- package/build/types/criticalBanner/CriticalCommsBanner.d.ts.map +1 -1
- package/build/types/index.d.ts +1 -1
- package/build/types/index.d.ts.map +1 -1
- package/build/types/inputs/{_BottomSheet.d.ts → SelectInput/BottomSheet/SelectInputBottomSheet.d.ts} +3 -3
- package/build/types/inputs/SelectInput/BottomSheet/SelectInputBottomSheet.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/BottomSheet/index.d.ts +3 -0
- package/build/types/inputs/SelectInput/BottomSheet/index.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/ButtonInput/SelectInputButtonInput.d.ts +5 -0
- package/build/types/inputs/SelectInput/ButtonInput/SelectInputButtonInput.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/ButtonInput/index.d.ts +3 -0
- package/build/types/inputs/SelectInput/ButtonInput/index.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/ClearButton/SelectInputClearButton.d.ts +7 -0
- package/build/types/inputs/SelectInput/ClearButton/SelectInputClearButton.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/ClearButton/index.d.ts +3 -0
- package/build/types/inputs/SelectInput/ClearButton/index.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/DefaultRenderTrigger/SelectInputDefaultRenderTrigger.d.ts +16 -0
- package/build/types/inputs/SelectInput/DefaultRenderTrigger/SelectInputDefaultRenderTrigger.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/DefaultRenderTrigger/index.d.ts +2 -0
- package/build/types/inputs/SelectInput/DefaultRenderTrigger/index.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/ItemView/GroupItemView/SelectInputGroupItemView.d.ts +9 -0
- package/build/types/inputs/SelectInput/ItemView/GroupItemView/SelectInputGroupItemView.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/ItemView/GroupItemView/index.d.ts +3 -0
- package/build/types/inputs/SelectInput/ItemView/GroupItemView/index.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/ItemView/SelectInputItemView.d.ts +11 -0
- package/build/types/inputs/SelectInput/ItemView/SelectInputItemView.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/ItemView/index.d.ts +4 -0
- package/build/types/inputs/SelectInput/ItemView/index.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/Option/SelectInputOption.d.ts +11 -0
- package/build/types/inputs/SelectInput/Option/SelectInputOption.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/Option/index.d.ts +3 -0
- package/build/types/inputs/SelectInput/Option/index.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/OptionContent/SelectInputOptionContent.d.ts +13 -0
- package/build/types/inputs/SelectInput/OptionContent/SelectInputOptionContent.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/OptionContent/index.d.ts +3 -0
- package/build/types/inputs/SelectInput/OptionContent/index.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/Options/OptionsContainer/SelectInputOptionsContainer.d.ts +9 -0
- package/build/types/inputs/SelectInput/Options/OptionsContainer/SelectInputOptionsContainer.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/Options/OptionsContainer/index.d.ts +3 -0
- package/build/types/inputs/SelectInput/Options/OptionsContainer/index.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/Options/SelectInputOptions.d.ts +21 -0
- package/build/types/inputs/SelectInput/Options/SelectInputOptions.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/Options/index.d.ts +4 -0
- package/build/types/inputs/SelectInput/Options/index.d.ts.map +1 -0
- package/build/types/inputs/{_Popover.d.ts → SelectInput/Popover/SelectInputPopover.d.ts} +3 -3
- package/build/types/inputs/SelectInput/Popover/SelectInputPopover.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/Popover/index.d.ts +3 -0
- package/build/types/inputs/SelectInput/Popover/index.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/SelectInput.contexts.d.ts +33 -0
- package/build/types/inputs/SelectInput/SelectInput.contexts.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/SelectInput.d.ts +10 -0
- package/build/types/inputs/SelectInput/SelectInput.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/SelectInput.messages.d.ts.map +1 -0
- package/build/types/inputs/{SelectInput.d.ts → SelectInput/SelectInput.types.d.ts} +12 -38
- package/build/types/inputs/SelectInput/SelectInput.types.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/SelectInput.utils.d.ts +60 -0
- package/build/types/inputs/SelectInput/SelectInput.utils.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.d.ts +12 -0
- package/build/types/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/TriggerButton/index.d.ts +3 -0
- package/build/types/inputs/SelectInput/TriggerButton/index.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/components.d.ts +10 -0
- package/build/types/inputs/SelectInput/components.d.ts.map +1 -0
- package/build/types/inputs/SelectInput/index.d.ts +10 -0
- package/build/types/inputs/SelectInput/index.d.ts.map +1 -0
- package/package.json +1 -1
- package/src/alert/Alert.tsx +6 -1
- package/src/criticalBanner/CriticalCommsBanner.css +9 -0
- package/src/criticalBanner/CriticalCommsBanner.less +13 -0
- package/src/criticalBanner/CriticalCommsBanner.test.story.tsx +15 -0
- package/src/criticalBanner/CriticalCommsBanner.test.tsx +28 -2
- package/src/criticalBanner/CriticalCommsBanner.tsx +10 -1
- package/src/index.ts +0 -1
- package/src/inputs/SelectInput/BottomSheet/SelectInputBottomSheet.css +96 -0
- package/src/inputs/{_BottomSheet.tsx → SelectInput/BottomSheet/SelectInputBottomSheet.tsx} +7 -7
- package/src/inputs/SelectInput/BottomSheet/index.ts +2 -0
- package/src/inputs/SelectInput/ButtonInput/SelectInputButtonInput.css +16 -0
- package/src/inputs/{_ButtonInput.tsx → SelectInput/ButtonInput/SelectInputButtonInput.tsx} +5 -5
- package/src/inputs/SelectInput/ButtonInput/index.ts +2 -0
- package/src/inputs/SelectInput/ClearButton/SelectInputClearButton.css +46 -0
- package/src/inputs/SelectInput/ClearButton/SelectInputClearButton.less +39 -0
- package/src/inputs/SelectInput/ClearButton/SelectInputClearButton.tsx +27 -0
- package/src/inputs/SelectInput/ClearButton/index.ts +2 -0
- package/src/inputs/SelectInput/DefaultRenderTrigger/SelectInputDefaultRenderTrigger.tsx +74 -0
- package/src/inputs/SelectInput/DefaultRenderTrigger/index.ts +5 -0
- package/src/inputs/SelectInput/ItemView/GroupItemView/SelectInputGroupItemView.tsx +61 -0
- package/src/inputs/SelectInput/ItemView/GroupItemView/index.ts +2 -0
- package/src/inputs/SelectInput/ItemView/SelectInputItemView.css +16 -0
- package/src/inputs/SelectInput/ItemView/SelectInputItemView.less +17 -0
- package/src/inputs/SelectInput/ItemView/SelectInputItemView.tsx +48 -0
- package/src/inputs/SelectInput/ItemView/index.ts +3 -0
- package/src/inputs/SelectInput/Option/SelectInputOption.css +33 -0
- package/src/inputs/SelectInput/Option/SelectInputOption.less +32 -0
- package/src/inputs/SelectInput/Option/SelectInputOption.tsx +57 -0
- package/src/inputs/SelectInput/Option/index.ts +2 -0
- package/src/inputs/SelectInput/OptionContent/SelectInputOptionContent.css +37 -0
- package/src/inputs/SelectInput/OptionContent/SelectInputOptionContent.less +38 -0
- package/src/inputs/SelectInput/OptionContent/SelectInputOptionContent.tsx +72 -0
- package/src/inputs/SelectInput/OptionContent/index.ts +2 -0
- package/src/inputs/SelectInput/Options/OptionsContainer/SelectInputOptionsContainer.tsx +59 -0
- package/src/inputs/SelectInput/Options/OptionsContainer/index.ts +2 -0
- package/src/inputs/SelectInput/Options/SelectInputOptions.css +81 -0
- package/src/inputs/SelectInput/Options/SelectInputOptions.less +77 -0
- package/src/inputs/SelectInput/Options/SelectInputOptions.tsx +411 -0
- package/src/inputs/SelectInput/Options/index.ts +3 -0
- package/src/inputs/SelectInput/Popover/SelectInputPopover.css +46 -0
- package/src/inputs/{_Popover.tsx → SelectInput/Popover/SelectInputPopover.tsx} +7 -7
- package/src/inputs/SelectInput/Popover/index.ts +2 -0
- package/src/inputs/SelectInput/SelectInput.contexts.tsx +40 -0
- package/src/inputs/SelectInput/SelectInput.less +22 -0
- package/src/inputs/{SelectInput.test.tsx → SelectInput/SelectInput.test.tsx} +9 -11
- package/src/inputs/SelectInput/SelectInput.tsx +257 -0
- package/src/inputs/SelectInput/SelectInput.types.ts +113 -0
- package/src/inputs/SelectInput/SelectInput.utils.ts +205 -0
- package/src/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.tsx +36 -0
- package/src/inputs/SelectInput/TriggerButton/index.ts +5 -0
- package/src/inputs/{SelectInput.docs.mdx → SelectInput/_stories/SelectInput.docs.mdx} +0 -1
- package/src/inputs/{SelectInput.story.tsx → SelectInput/_stories/SelectInput.story.tsx} +11 -8
- package/src/inputs/{SelectInput.test.story.tsx → SelectInput/_stories/SelectInput.test.story.tsx} +6 -10
- package/src/inputs/SelectInput/components.ts +10 -0
- package/src/inputs/SelectInput/index.ts +12 -0
- package/src/main.css +99 -90
- package/src/main.less +1 -1
- package/build/inputs/SelectInput.js +0 -890
- package/build/inputs/SelectInput.js.map +0 -1
- package/build/inputs/SelectInput.messages.js.map +0 -1
- package/build/inputs/SelectInput.messages.mjs.map +0 -1
- package/build/inputs/SelectInput.mjs +0 -881
- package/build/inputs/SelectInput.mjs.map +0 -1
- package/build/inputs/_BottomSheet.js.map +0 -1
- package/build/inputs/_BottomSheet.mjs.map +0 -1
- package/build/inputs/_ButtonInput.js.map +0 -1
- package/build/inputs/_ButtonInput.mjs.map +0 -1
- package/build/inputs/_Popover.js.map +0 -1
- package/build/inputs/_Popover.mjs.map +0 -1
- package/build/types/inputs/SelectInput.d.ts.map +0 -1
- package/build/types/inputs/SelectInput.messages.d.ts.map +0 -1
- package/build/types/inputs/_BottomSheet.d.ts.map +0 -1
- package/build/types/inputs/_ButtonInput.d.ts +0 -5
- package/build/types/inputs/_ButtonInput.d.ts.map +0 -1
- package/build/types/inputs/_Popover.d.ts.map +0 -1
- package/src/inputs/SelectInput.less +0 -219
- package/src/inputs/SelectInput.tsx +0 -1269
- package/build/inputs/{SelectInput.messages.js → SelectInput/SelectInput.messages.js} +0 -0
- package/build/inputs/{SelectInput.messages.mjs → SelectInput/SelectInput.messages.mjs} +0 -0
- package/build/styles/inputs/{SelectInput.css → SelectInput/SelectInput.css} +90 -90
- package/build/types/inputs/{SelectInput.messages.d.ts → SelectInput/SelectInput.messages.d.ts} +0 -0
- package/src/inputs/{_BottomSheet.less → SelectInput/BottomSheet/SelectInputBottomSheet.less} +0 -0
- package/src/inputs/{_ButtonInput.less → SelectInput/ButtonInput/SelectInputButtonInput.less} +0 -0
- package/src/inputs/{_Popover.less → SelectInput/Popover/SelectInputPopover.less} +0 -0
- package/src/inputs/{SelectInput.css → SelectInput/SelectInput.css} +90 -90
- /package/src/inputs/{SelectInput.messages.ts → SelectInput/SelectInput.messages.ts} +0 -0
|
@@ -0,0 +1,298 @@
|
|
|
1
|
+
import { CrossCircle } from '@transferwise/icons';
|
|
2
|
+
import { ListboxOptions } from '@headlessui/react';
|
|
3
|
+
import { clsx } from 'clsx';
|
|
4
|
+
import { useRef, useState, useMemo, useEffect, useId } from 'react';
|
|
5
|
+
import { useIntl } from 'react-intl';
|
|
6
|
+
import { Virtualizer } from 'virtua';
|
|
7
|
+
import { SearchInput } from '../../SearchInput.mjs';
|
|
8
|
+
import { SelectInputItemsCountContext, SelectInputItemPositionContext } from '../SelectInput.contexts.mjs';
|
|
9
|
+
import { searchableString, dedupeSelectInputItems, selectInputOptionItemIncludesNeedle, sortSelectInputItems, filterSelectInputItems, MAX_ITEMS_WITHOUT_VIRTUALIZATION } from '../SelectInput.utils.mjs';
|
|
10
|
+
import messages from '../SelectInput.messages.mjs';
|
|
11
|
+
import { SelectInputItemView } from '../ItemView/SelectInputItemView.mjs';
|
|
12
|
+
import '../../../header/Header.mjs';
|
|
13
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
14
|
+
import { SelectInputOptionsContainer } from './OptionsContainer/SelectInputOptionsContainer.mjs';
|
|
15
|
+
|
|
16
|
+
function SelectInputOptions({
|
|
17
|
+
id,
|
|
18
|
+
parentId,
|
|
19
|
+
items,
|
|
20
|
+
compareValues: compareValuesProp,
|
|
21
|
+
renderValue = String,
|
|
22
|
+
renderFooter,
|
|
23
|
+
filterable = false,
|
|
24
|
+
filterPlaceholder,
|
|
25
|
+
sortFilteredOptions,
|
|
26
|
+
searchInputRef,
|
|
27
|
+
listboxRef,
|
|
28
|
+
filterQuery,
|
|
29
|
+
onFilterChange,
|
|
30
|
+
listBoxLabel,
|
|
31
|
+
listBoxLabelledBy,
|
|
32
|
+
autocomplete,
|
|
33
|
+
name,
|
|
34
|
+
onAutocompleteSelect
|
|
35
|
+
}) {
|
|
36
|
+
const intl = useIntl();
|
|
37
|
+
const virtualiserHandlerRef = useRef(null);
|
|
38
|
+
const controllerRef = filterable ? searchInputRef : listboxRef;
|
|
39
|
+
const [initialRender, setInitialRender] = useState(true);
|
|
40
|
+
const needle = useMemo(() => {
|
|
41
|
+
if (filterable) {
|
|
42
|
+
return filterQuery ? searchableString(filterQuery) : null;
|
|
43
|
+
}
|
|
44
|
+
return undefined;
|
|
45
|
+
}, [filterQuery, filterable]);
|
|
46
|
+
useEffect(() => {
|
|
47
|
+
if (needle) {
|
|
48
|
+
// Ensure having an active option while filtering.
|
|
49
|
+
// Without `requestAnimationFrame` upon which React depends for scheduling
|
|
50
|
+
// updates, the active status would only show for a split second and then
|
|
51
|
+
// disappear inadvertently.
|
|
52
|
+
requestAnimationFrame(() => {
|
|
53
|
+
if (controllerRef.current != null && !controllerRef.current.hasAttribute('aria-activedescendant')) {
|
|
54
|
+
// Activate first option via synthetic key press
|
|
55
|
+
controllerRef.current.dispatchEvent(new KeyboardEvent('keydown', {
|
|
56
|
+
key: 'Home',
|
|
57
|
+
bubbles: true
|
|
58
|
+
}));
|
|
59
|
+
}
|
|
60
|
+
});
|
|
61
|
+
}
|
|
62
|
+
}, [controllerRef, needle]);
|
|
63
|
+
const compareValues = useMemo(() => {
|
|
64
|
+
if (!compareValuesProp) {
|
|
65
|
+
return undefined;
|
|
66
|
+
}
|
|
67
|
+
if (typeof compareValuesProp === 'function') {
|
|
68
|
+
return (a, b) => compareValuesProp(a, b);
|
|
69
|
+
}
|
|
70
|
+
const key = compareValuesProp;
|
|
71
|
+
return (a, b) => {
|
|
72
|
+
if (typeof a === 'object' && a != null && typeof b === 'object' && b != null) {
|
|
73
|
+
return a[key] === b[key];
|
|
74
|
+
}
|
|
75
|
+
return a === b;
|
|
76
|
+
};
|
|
77
|
+
}, [compareValuesProp]);
|
|
78
|
+
const filteredItems = useMemo(() => {
|
|
79
|
+
if (needle == null) {
|
|
80
|
+
return items;
|
|
81
|
+
}
|
|
82
|
+
const dedupedItems = dedupeSelectInputItems(items, compareValues);
|
|
83
|
+
if (sortFilteredOptions) {
|
|
84
|
+
// When sorting, filter out non-matching items completely to avoid ghost items
|
|
85
|
+
const filtered = dedupedItems.map(item => {
|
|
86
|
+
if (item.type === 'option') {
|
|
87
|
+
return selectInputOptionItemIncludesNeedle(item, needle) ? item : {
|
|
88
|
+
...item,
|
|
89
|
+
value: undefined
|
|
90
|
+
};
|
|
91
|
+
}
|
|
92
|
+
if (item.type === 'group') {
|
|
93
|
+
return {
|
|
94
|
+
...item,
|
|
95
|
+
options: item.options.map(option => selectInputOptionItemIncludesNeedle(option, needle) ? option : {
|
|
96
|
+
...option,
|
|
97
|
+
value: undefined
|
|
98
|
+
})
|
|
99
|
+
};
|
|
100
|
+
}
|
|
101
|
+
return item;
|
|
102
|
+
});
|
|
103
|
+
return sortSelectInputItems(filtered, sortFilteredOptions, filterQuery);
|
|
104
|
+
}
|
|
105
|
+
return filterSelectInputItems(dedupedItems, item => selectInputOptionItemIncludesNeedle(item, needle));
|
|
106
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
107
|
+
}, [needle, items, compareValues]);
|
|
108
|
+
const resultsEmpty = needle != null && filteredItems.length === 0;
|
|
109
|
+
const virtualized = filteredItems.length > MAX_ITEMS_WITHOUT_VIRTUALIZATION;
|
|
110
|
+
// Items shown once shall be kept mounted until the needle changes, otherwise
|
|
111
|
+
// the scroll position may jump around inadvertently. Pattern adopted from:
|
|
112
|
+
// https://inokawa.github.io/virtua/?path=/story/advanced-keep-offscreen-items--append-only
|
|
113
|
+
const [mountedIndexes, setMountedIndexes] = useState([]);
|
|
114
|
+
const prevNeedleRef = useRef(needle);
|
|
115
|
+
useEffect(() => {
|
|
116
|
+
const needleChanged = prevNeedleRef.current !== needle;
|
|
117
|
+
prevNeedleRef.current = needle;
|
|
118
|
+
if (needleChanged) {
|
|
119
|
+
// Reset mounted indexes when search changes to avoid stale scroll positions
|
|
120
|
+
setMountedIndexes([]);
|
|
121
|
+
return;
|
|
122
|
+
}
|
|
123
|
+
// Ensure the 'End' key works as intended by keeping the last item mounted.
|
|
124
|
+
// Skipped on needle change to prevent auto-scrolling on search.
|
|
125
|
+
if (filteredItems.length > 0) {
|
|
126
|
+
setMountedIndexes(prevMountedIndexes => {
|
|
127
|
+
// Create a new array with existing indexes plus the last item index
|
|
128
|
+
return [...new Set([...prevMountedIndexes, filteredItems.length - 1])]; // Sorting is redundant by nature here
|
|
129
|
+
});
|
|
130
|
+
}
|
|
131
|
+
}, [needle, filteredItems.length]);
|
|
132
|
+
const listboxContainerRef = useRef(null);
|
|
133
|
+
useEffect(() => {
|
|
134
|
+
if (listboxContainerRef.current != null) {
|
|
135
|
+
listboxContainerRef.current.style.setProperty('--initial-height', `${listboxContainerRef.current.offsetHeight}px`);
|
|
136
|
+
}
|
|
137
|
+
}, []);
|
|
138
|
+
useEffect(() => {
|
|
139
|
+
setInitialRender(false);
|
|
140
|
+
}, []);
|
|
141
|
+
const showStatus = resultsEmpty;
|
|
142
|
+
const statusId = useId();
|
|
143
|
+
const listboxId = useId();
|
|
144
|
+
const getItemNode = index => {
|
|
145
|
+
const item = filteredItems[index];
|
|
146
|
+
return /*#__PURE__*/jsx(SelectInputItemView, {
|
|
147
|
+
item: item,
|
|
148
|
+
renderValue: renderValue,
|
|
149
|
+
needle: needle
|
|
150
|
+
}, index);
|
|
151
|
+
};
|
|
152
|
+
const findMatchingItem = autocompleteValue => {
|
|
153
|
+
const flatOptions = items.flatMap(item => item.type === 'group' ? item.options : item.type === 'option' ? [item] : []).filter(item => item.type === 'option' && item.value != null);
|
|
154
|
+
const exactMatch = flatOptions.find(option => String(option.value) === autocompleteValue || option.filterMatchers?.some(matcher => matcher === autocompleteValue));
|
|
155
|
+
if (exactMatch) {
|
|
156
|
+
return exactMatch.value;
|
|
157
|
+
}
|
|
158
|
+
const fuzzyMatch = flatOptions.find(option => option.filterMatchers?.some(matcher => matcher.toLowerCase().includes(autocompleteValue.toLowerCase())));
|
|
159
|
+
return fuzzyMatch ? fuzzyMatch.value : null;
|
|
160
|
+
};
|
|
161
|
+
return /*#__PURE__*/jsxs(ListboxOptions, {
|
|
162
|
+
modal: true,
|
|
163
|
+
as: SelectInputOptionsContainer,
|
|
164
|
+
static: true,
|
|
165
|
+
className: "np-select-input-options-container",
|
|
166
|
+
onAriaActiveDescendantChange: value => {
|
|
167
|
+
if (controllerRef.current != null) {
|
|
168
|
+
if (!initialRender && value != null) {
|
|
169
|
+
controllerRef.current.setAttribute('aria-activedescendant', value);
|
|
170
|
+
} else {
|
|
171
|
+
controllerRef.current.removeAttribute('aria-activedescendant');
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
},
|
|
175
|
+
children: [filterable ? /*#__PURE__*/jsx("div", {
|
|
176
|
+
className: "np-select-input-query-container",
|
|
177
|
+
children: /*#__PURE__*/jsx(SearchInput, {
|
|
178
|
+
ref: searchInputRef,
|
|
179
|
+
id: id,
|
|
180
|
+
name: name,
|
|
181
|
+
autoComplete: autocomplete,
|
|
182
|
+
role: "combobox",
|
|
183
|
+
shape: "rectangle",
|
|
184
|
+
placeholder: filterPlaceholder,
|
|
185
|
+
"aria-label": filterPlaceholder,
|
|
186
|
+
defaultValue: filterQuery,
|
|
187
|
+
"aria-autocomplete": "list",
|
|
188
|
+
"aria-expanded": true,
|
|
189
|
+
"aria-controls": listboxId,
|
|
190
|
+
"aria-describedby": showStatus ? statusId : undefined,
|
|
191
|
+
onKeyDown: event => {
|
|
192
|
+
// Prevent interfering with the matcher of Headless UI
|
|
193
|
+
// https://mathiasbynens.be/notes/javascript-unicode#regex
|
|
194
|
+
if (/^.$/u.test(event.key)) {
|
|
195
|
+
event.stopPropagation();
|
|
196
|
+
}
|
|
197
|
+
},
|
|
198
|
+
onChange: event => {
|
|
199
|
+
// Free up resources and ensure not to go out of bounds when the
|
|
200
|
+
// resulting item count is less than before
|
|
201
|
+
const inputValue = event.currentTarget.value;
|
|
202
|
+
// Free up resources and ensure not to go out of bounds
|
|
203
|
+
setMountedIndexes([]);
|
|
204
|
+
onFilterChange(inputValue);
|
|
205
|
+
},
|
|
206
|
+
onInput: event => {
|
|
207
|
+
const inputValue = event.currentTarget.value;
|
|
208
|
+
const inputElement = event.currentTarget;
|
|
209
|
+
if (autocomplete && onAutocompleteSelect && inputValue) {
|
|
210
|
+
setTimeout(() => {
|
|
211
|
+
if (inputElement.value === inputValue && inputValue.length > 2) {
|
|
212
|
+
const matchedValue = findMatchingItem(inputValue);
|
|
213
|
+
if (matchedValue !== null) {
|
|
214
|
+
onAutocompleteSelect(matchedValue);
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
}, 50);
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
})
|
|
221
|
+
}) : null, /*#__PURE__*/jsxs("section", {
|
|
222
|
+
ref: listboxContainerRef,
|
|
223
|
+
tabIndex: -1,
|
|
224
|
+
className: clsx('np-select-input-listbox-container', virtualized && 'np-select-input-listbox-container--virtualized', needle == null &&
|
|
225
|
+
// Groups aren't shown when filtering
|
|
226
|
+
items.some(item => item.type === 'group') && 'np-select-input-listbox-container--has-group'),
|
|
227
|
+
"data-wds-parent": parentId ?? undefined,
|
|
228
|
+
children: [resultsEmpty ? /*#__PURE__*/jsxs("div", {
|
|
229
|
+
id: statusId,
|
|
230
|
+
className: "np-select-input-options-status",
|
|
231
|
+
children: [/*#__PURE__*/jsx(CrossCircle, {
|
|
232
|
+
size: 16,
|
|
233
|
+
className: "np-select-input-options-status-icon"
|
|
234
|
+
}), intl.formatMessage(messages.noResultsFound)]
|
|
235
|
+
}) : null, /*#__PURE__*/jsx("div", {
|
|
236
|
+
ref: listboxRef,
|
|
237
|
+
id: listboxId,
|
|
238
|
+
role: "listbox",
|
|
239
|
+
"aria-orientation": "vertical",
|
|
240
|
+
"aria-label": listBoxLabel,
|
|
241
|
+
"aria-labelledby": listBoxLabelledBy,
|
|
242
|
+
tabIndex: 0,
|
|
243
|
+
className: "np-select-input-listbox",
|
|
244
|
+
children: !virtualized ? filteredItems.map((_, index) => getItemNode(index)) : /*#__PURE__*/jsx(Virtualizer, {
|
|
245
|
+
ref: virtualiserHandlerRef,
|
|
246
|
+
data: filteredItems,
|
|
247
|
+
keepMounted: mountedIndexes,
|
|
248
|
+
scrollRef: listboxRef // `VList` doesn't expose this
|
|
249
|
+
,
|
|
250
|
+
onScroll: async () => {
|
|
251
|
+
if (!virtualiserHandlerRef.current) return;
|
|
252
|
+
const startIndex = virtualiserHandlerRef.current.findItemIndex(virtualiserHandlerRef.current.scrollOffset);
|
|
253
|
+
const endIndex = virtualiserHandlerRef.current.findItemIndex(virtualiserHandlerRef.current.scrollOffset + virtualiserHandlerRef.current.viewportSize);
|
|
254
|
+
setMountedIndexes(prevMountedIndexes => {
|
|
255
|
+
// Create an array of all indexes that should be visible
|
|
256
|
+
const visibleIndexes = [];
|
|
257
|
+
for (let index = startIndex; index <= endIndex; index += 1) {
|
|
258
|
+
// eslint-disable-next-line functional/immutable-data
|
|
259
|
+
visibleIndexes.push(index);
|
|
260
|
+
}
|
|
261
|
+
// Combine with previous indexes and sort
|
|
262
|
+
return [...new Set([...prevMountedIndexes, ...visibleIndexes])].sort((a, b) => a - b);
|
|
263
|
+
});
|
|
264
|
+
},
|
|
265
|
+
children: (item, index) =>
|
|
266
|
+
/*#__PURE__*/
|
|
267
|
+
// The position of each item can't be inferred by browsers when
|
|
268
|
+
// virtualizing, as some of the items may not be in the DOM
|
|
269
|
+
jsx(SelectInputItemsCountContext.Provider, {
|
|
270
|
+
value: filteredItems.length,
|
|
271
|
+
children: /*#__PURE__*/jsx(SelectInputItemPositionContext.Provider, {
|
|
272
|
+
value: index + 1,
|
|
273
|
+
children: getItemNode(index)
|
|
274
|
+
})
|
|
275
|
+
})
|
|
276
|
+
})
|
|
277
|
+
}), renderFooter != null ? /*#__PURE__*/jsx("footer", {
|
|
278
|
+
className: "np-select-input-footer",
|
|
279
|
+
children: /*#__PURE__*/jsx("div", {
|
|
280
|
+
role: "none",
|
|
281
|
+
onKeyDown: event => {
|
|
282
|
+
// Prevent interfering with Headless UI
|
|
283
|
+
if (event.key !== 'Escape') {
|
|
284
|
+
event.stopPropagation();
|
|
285
|
+
}
|
|
286
|
+
},
|
|
287
|
+
children: renderFooter({
|
|
288
|
+
resultsEmpty,
|
|
289
|
+
queryNormalized: needle
|
|
290
|
+
})
|
|
291
|
+
})
|
|
292
|
+
}) : null]
|
|
293
|
+
})]
|
|
294
|
+
});
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
export { SelectInputOptions };
|
|
298
|
+
//# sourceMappingURL=SelectInputOptions.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectInputOptions.mjs","sources":["../../../../src/inputs/SelectInput/Options/SelectInputOptions.tsx"],"sourcesContent":["import { CrossCircle } from '@transferwise/icons';\nimport { ListboxOptions } from '@headlessui/react';\nimport { clsx } from 'clsx';\nimport { useEffect, useId, useMemo, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\nimport { Virtualizer, type VirtualizerHandle } from 'virtua';\n\nimport { SearchInput } from '../../SearchInput';\nimport {\n SelectInputItemsCountContext,\n SelectInputItemPositionContext,\n} from '../SelectInput.contexts';\nimport {\n dedupeSelectInputItems,\n filterSelectInputItems,\n MAX_ITEMS_WITHOUT_VIRTUALIZATION,\n searchableString,\n selectInputOptionItemIncludesNeedle,\n sortSelectInputItems,\n} from '../SelectInput.utils';\nimport { SelectInputOptionItem, SelectInputProps, SelectInputItem } from '../SelectInput.types';\nimport messages from '../SelectInput.messages';\n\nimport { SelectInputItemView } from '../ItemView';\nimport { SelectInputOptionsContainer } from './OptionsContainer';\n\n/**\n * Props for the SelectInputOptions component.\n */\nexport interface SelectInputOptionsProps<T = string> extends Pick<\n SelectInputProps<T>,\n | 'items'\n | 'renderValue'\n | 'renderFooter'\n | 'filterable'\n | 'filterPlaceholder'\n | 'id'\n | 'parentId'\n | 'compareValues'\n | 'sortFilteredOptions'\n> {\n searchInputRef: React.MutableRefObject<HTMLInputElement | null>;\n listboxRef: React.MutableRefObject<HTMLDivElement | null>;\n filterQuery: string;\n onFilterChange: (query: string) => void;\n listBoxLabel?: string;\n listBoxLabelledBy?: string;\n autocomplete?: string;\n name?: string;\n onAutocompleteSelect?: (value: T) => void;\n}\n\n/**\n * The main options container component for SelectInput.\n * Manages filtering, virtualisation, and rendering of options.\n */\nexport function SelectInputOptions<T = string>({\n id,\n parentId,\n items,\n compareValues: compareValuesProp,\n renderValue = String,\n renderFooter,\n filterable = false,\n filterPlaceholder,\n sortFilteredOptions,\n searchInputRef,\n listboxRef,\n filterQuery,\n onFilterChange,\n listBoxLabel,\n listBoxLabelledBy,\n autocomplete,\n name,\n onAutocompleteSelect,\n}: SelectInputOptionsProps<T>) {\n const intl = useIntl();\n const virtualiserHandlerRef = useRef<VirtualizerHandle>(null);\n const controllerRef = filterable ? searchInputRef : listboxRef;\n const [initialRender, setInitialRender] = useState(true);\n\n const needle = useMemo(() => {\n if (filterable) {\n return filterQuery ? searchableString(filterQuery) : null;\n }\n return undefined;\n }, [filterQuery, filterable]);\n useEffect(() => {\n if (needle) {\n // Ensure having an active option while filtering.\n // Without `requestAnimationFrame` upon which React depends for scheduling\n // updates, the active status would only show for a split second and then\n // disappear inadvertently.\n requestAnimationFrame(() => {\n if (\n controllerRef.current != null &&\n !controllerRef.current.hasAttribute('aria-activedescendant')\n ) {\n // Activate first option via synthetic key press\n controllerRef.current.dispatchEvent(\n new KeyboardEvent('keydown', { key: 'Home', bubbles: true }),\n );\n }\n });\n }\n }, [controllerRef, needle]);\n\n const compareValues = useMemo(() => {\n if (!compareValuesProp) {\n return undefined;\n }\n\n if (typeof compareValuesProp === 'function') {\n return (a: NonNullable<T>, b: NonNullable<T>) => compareValuesProp(a, b);\n }\n\n const key = compareValuesProp;\n return (a: NonNullable<T>, b: NonNullable<T>) => {\n if (typeof a === 'object' && a != null && typeof b === 'object' && b != null) {\n return (a as Record<string, unknown>)[key] === (b as Record<string, unknown>)[key];\n }\n return a === b;\n };\n }, [compareValuesProp]);\n\n const filteredItems: readonly SelectInputItem<NonNullable<T> | undefined>[] = useMemo(() => {\n if (needle == null) {\n return items;\n }\n\n const dedupedItems = dedupeSelectInputItems(items, compareValues);\n\n if (sortFilteredOptions) {\n // When sorting, filter out non-matching items completely to avoid ghost items\n const filtered = dedupedItems.map((item) => {\n if (item.type === 'option') {\n return selectInputOptionItemIncludesNeedle(item, needle)\n ? item\n : { ...item, value: undefined };\n }\n if (item.type === 'group') {\n return {\n ...item,\n options: item.options.map((option) =>\n selectInputOptionItemIncludesNeedle(option, needle)\n ? option\n : { ...option, value: undefined },\n ),\n };\n }\n return item;\n });\n\n return sortSelectInputItems(filtered, sortFilteredOptions, filterQuery);\n }\n\n return filterSelectInputItems(dedupedItems, (item) =>\n selectInputOptionItemIncludesNeedle(item, needle),\n );\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [needle, items, compareValues]);\n const resultsEmpty = needle != null && filteredItems.length === 0;\n\n const virtualized = filteredItems.length > MAX_ITEMS_WITHOUT_VIRTUALIZATION;\n\n // Items shown once shall be kept mounted until the needle changes, otherwise\n // the scroll position may jump around inadvertently. Pattern adopted from:\n // https://inokawa.github.io/virtua/?path=/story/advanced-keep-offscreen-items--append-only\n const [mountedIndexes, setMountedIndexes] = useState<number[]>([]);\n const prevNeedleRef = useRef(needle);\n\n useEffect(() => {\n const needleChanged = prevNeedleRef.current !== needle;\n prevNeedleRef.current = needle;\n\n if (needleChanged) {\n // Reset mounted indexes when search changes to avoid stale scroll positions\n setMountedIndexes([]);\n return;\n }\n\n // Ensure the 'End' key works as intended by keeping the last item mounted.\n // Skipped on needle change to prevent auto-scrolling on search.\n if (filteredItems.length > 0) {\n setMountedIndexes((prevMountedIndexes) => {\n // Create a new array with existing indexes plus the last item index\n return [...new Set([...prevMountedIndexes, filteredItems.length - 1])]; // Sorting is redundant by nature here\n });\n }\n }, [needle, filteredItems.length]);\n\n const listboxContainerRef = useRef<HTMLDivElement>(null);\n useEffect(() => {\n if (listboxContainerRef.current != null) {\n listboxContainerRef.current.style.setProperty(\n '--initial-height',\n `${listboxContainerRef.current.offsetHeight}px`,\n );\n }\n }, []);\n\n useEffect(() => {\n setInitialRender(false);\n }, []);\n\n const showStatus = resultsEmpty;\n const statusId = useId();\n const listboxId = useId();\n\n const getItemNode = (index: number) => {\n const item = filteredItems[index];\n return (\n <SelectInputItemView key={index} item={item} renderValue={renderValue} needle={needle} />\n );\n };\n\n const findMatchingItem = (autocompleteValue: string): T | null => {\n const flatOptions = items\n .flatMap((item) =>\n item.type === 'group' ? item.options : item.type === 'option' ? [item] : [],\n )\n .filter(\n (item): item is SelectInputOptionItem<NonNullable<T>> =>\n item.type === 'option' && item.value != null,\n );\n\n const exactMatch = flatOptions.find(\n (option) =>\n String(option.value) === autocompleteValue ||\n option.filterMatchers?.some((matcher) => matcher === autocompleteValue),\n );\n\n if (exactMatch) {\n return exactMatch.value;\n }\n\n const fuzzyMatch = flatOptions.find((option) =>\n option.filterMatchers?.some((matcher) =>\n matcher.toLowerCase().includes(autocompleteValue.toLowerCase()),\n ),\n );\n\n return fuzzyMatch ? fuzzyMatch.value : null;\n };\n\n return (\n <ListboxOptions\n modal\n as={SelectInputOptionsContainer}\n static\n className=\"np-select-input-options-container\"\n onAriaActiveDescendantChange={(value: React.AriaAttributes['aria-activedescendant']) => {\n if (controllerRef.current != null) {\n if (!initialRender && value != null) {\n controllerRef.current.setAttribute('aria-activedescendant', value);\n } else {\n controllerRef.current.removeAttribute('aria-activedescendant');\n }\n }\n }}\n >\n {filterable ? (\n <div className=\"np-select-input-query-container\">\n <SearchInput\n ref={searchInputRef}\n id={id}\n name={name}\n autoComplete={autocomplete}\n role=\"combobox\"\n shape=\"rectangle\"\n placeholder={filterPlaceholder}\n aria-label={filterPlaceholder}\n defaultValue={filterQuery}\n aria-autocomplete=\"list\"\n aria-expanded\n aria-controls={listboxId}\n aria-describedby={showStatus ? statusId : undefined}\n onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {\n // Prevent interfering with the matcher of Headless UI\n // https://mathiasbynens.be/notes/javascript-unicode#regex\n if (/^.$/u.test(event.key)) {\n event.stopPropagation();\n }\n }}\n onChange={(event) => {\n // Free up resources and ensure not to go out of bounds when the\n // resulting item count is less than before\n const inputValue = event.currentTarget.value;\n\n // Free up resources and ensure not to go out of bounds\n setMountedIndexes([]);\n onFilterChange(inputValue);\n }}\n onInput={(event) => {\n const inputValue = event.currentTarget.value;\n const inputElement = event.currentTarget;\n\n if (autocomplete && onAutocompleteSelect && inputValue) {\n setTimeout(() => {\n if (inputElement.value === inputValue && inputValue.length > 2) {\n const matchedValue = findMatchingItem(inputValue);\n if (matchedValue !== null) {\n onAutocompleteSelect(matchedValue);\n }\n }\n }, 50);\n }\n }}\n />\n </div>\n ) : null}\n\n <section\n ref={listboxContainerRef}\n tabIndex={-1}\n className={clsx(\n 'np-select-input-listbox-container',\n virtualized && 'np-select-input-listbox-container--virtualized',\n needle == null && // Groups aren't shown when filtering\n items.some((item) => item.type === 'group') &&\n 'np-select-input-listbox-container--has-group',\n )}\n data-wds-parent={parentId ?? undefined}\n >\n {resultsEmpty ? (\n <div id={statusId} className=\"np-select-input-options-status\">\n <CrossCircle size={16} className=\"np-select-input-options-status-icon\" />\n {intl.formatMessage(messages.noResultsFound)}\n </div>\n ) : null}\n\n <div\n ref={listboxRef}\n id={listboxId}\n role=\"listbox\"\n aria-orientation=\"vertical\"\n aria-label={listBoxLabel}\n aria-labelledby={listBoxLabelledBy}\n tabIndex={0}\n className=\"np-select-input-listbox\"\n >\n {!virtualized ? (\n filteredItems.map((_, index) => getItemNode(index))\n ) : (\n <Virtualizer\n ref={virtualiserHandlerRef}\n data={filteredItems}\n keepMounted={mountedIndexes}\n scrollRef={listboxRef} // `VList` doesn't expose this\n onScroll={async () => {\n if (!virtualiserHandlerRef.current) return;\n\n const startIndex = virtualiserHandlerRef.current.findItemIndex(\n virtualiserHandlerRef.current.scrollOffset,\n );\n const endIndex = virtualiserHandlerRef.current.findItemIndex(\n virtualiserHandlerRef.current.scrollOffset +\n virtualiserHandlerRef.current.viewportSize,\n );\n\n setMountedIndexes((prevMountedIndexes) => {\n // Create an array of all indexes that should be visible\n\n const visibleIndexes = [];\n for (let index = startIndex; index <= endIndex; index += 1) {\n // eslint-disable-next-line functional/immutable-data\n visibleIndexes.push(index);\n }\n\n // Combine with previous indexes and sort\n return [...new Set([...prevMountedIndexes, ...visibleIndexes])].sort(\n (a, b) => a - b,\n );\n });\n }}\n >\n {(item, index) => (\n // The position of each item can't be inferred by browsers when\n // virtualizing, as some of the items may not be in the DOM\n <SelectInputItemsCountContext.Provider value={filteredItems.length}>\n <SelectInputItemPositionContext.Provider value={index + 1}>\n {getItemNode(index)}\n </SelectInputItemPositionContext.Provider>\n </SelectInputItemsCountContext.Provider>\n )}\n </Virtualizer>\n )}\n </div>\n\n {renderFooter != null ? (\n <footer className=\"np-select-input-footer\">\n <div\n role=\"none\"\n onKeyDown={(event) => {\n // Prevent interfering with Headless UI\n if (event.key !== 'Escape') {\n event.stopPropagation();\n }\n }}\n >\n {renderFooter({\n resultsEmpty,\n queryNormalized: needle,\n })}\n </div>\n </footer>\n ) : null}\n </section>\n </ListboxOptions>\n );\n}\n"],"names":["SelectInputOptions","id","parentId","items","compareValues","compareValuesProp","renderValue","String","renderFooter","filterable","filterPlaceholder","sortFilteredOptions","searchInputRef","listboxRef","filterQuery","onFilterChange","listBoxLabel","listBoxLabelledBy","autocomplete","name","onAutocompleteSelect","intl","useIntl","virtualiserHandlerRef","useRef","controllerRef","initialRender","setInitialRender","useState","needle","useMemo","searchableString","undefined","useEffect","requestAnimationFrame","current","hasAttribute","dispatchEvent","KeyboardEvent","key","bubbles","a","b","filteredItems","dedupedItems","dedupeSelectInputItems","filtered","map","item","type","selectInputOptionItemIncludesNeedle","value","options","option","sortSelectInputItems","filterSelectInputItems","resultsEmpty","length","virtualized","MAX_ITEMS_WITHOUT_VIRTUALIZATION","mountedIndexes","setMountedIndexes","prevNeedleRef","needleChanged","prevMountedIndexes","Set","listboxContainerRef","style","setProperty","offsetHeight","showStatus","statusId","useId","listboxId","getItemNode","index","_jsx","SelectInputItemView","findMatchingItem","autocompleteValue","flatOptions","flatMap","filter","exactMatch","find","filterMatchers","some","matcher","fuzzyMatch","toLowerCase","includes","_jsxs","ListboxOptions","modal","as","SelectInputOptionsContainer","static","className","onAriaActiveDescendantChange","setAttribute","removeAttribute","children","SearchInput","ref","autoComplete","role","shape","placeholder","defaultValue","onKeyDown","event","test","stopPropagation","onChange","inputValue","currentTarget","onInput","inputElement","setTimeout","matchedValue","tabIndex","clsx","CrossCircle","size","formatMessage","messages","noResultsFound","_","Virtualizer","data","keepMounted","scrollRef","onScroll","startIndex","findItemIndex","scrollOffset","endIndex","viewportSize","visibleIndexes","push","sort","SelectInputItemsCountContext","Provider","SelectInputItemPositionContext","queryNormalized"],"mappings":"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"}
|
|
@@ -6,11 +6,11 @@ var focus = require('@react-aria/focus');
|
|
|
6
6
|
var componentsTheming = require('@wise/components-theming');
|
|
7
7
|
var clsx = require('clsx');
|
|
8
8
|
var React = require('react');
|
|
9
|
-
var PreventScroll = require('
|
|
9
|
+
var PreventScroll = require('../../../common/preventScroll/PreventScroll.js');
|
|
10
10
|
var jsxRuntime = require('react/jsx-runtime');
|
|
11
11
|
|
|
12
|
-
const
|
|
13
|
-
function
|
|
12
|
+
const FLOATING_PADDING = 16;
|
|
13
|
+
function SelectInputPopover({
|
|
14
14
|
placement,
|
|
15
15
|
open,
|
|
16
16
|
renderTrigger,
|
|
@@ -29,10 +29,10 @@ function Popover({
|
|
|
29
29
|
strategy: 'fixed',
|
|
30
30
|
placement,
|
|
31
31
|
middleware: [react.offset(8), react.flip({
|
|
32
|
-
padding:
|
|
32
|
+
padding: FLOATING_PADDING,
|
|
33
33
|
crossAxis: false
|
|
34
34
|
}), react.shift(), react.size({
|
|
35
|
-
padding:
|
|
35
|
+
padding: FLOATING_PADDING,
|
|
36
36
|
apply: ({
|
|
37
37
|
elements,
|
|
38
38
|
rects,
|
|
@@ -111,5 +111,5 @@ function Popover({
|
|
|
111
111
|
});
|
|
112
112
|
}
|
|
113
113
|
|
|
114
|
-
exports.
|
|
115
|
-
//# sourceMappingURL=
|
|
114
|
+
exports.SelectInputPopover = SelectInputPopover;
|
|
115
|
+
//# sourceMappingURL=SelectInputPopover.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectInputPopover.js","sources":["../../../../src/inputs/SelectInput/Popover/SelectInputPopover.tsx"],"sourcesContent":["import {\n autoUpdate,\n flip,\n FloatingFocusManager,\n FloatingPortal,\n offset,\n type Placement,\n shift,\n size as floatingSize,\n useDismiss,\n useFloating,\n useInteractions,\n useRole,\n} from '@floating-ui/react';\nimport { Transition } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useState } from 'react';\n\nimport { PreventScroll } from '../../../common/preventScroll/PreventScroll';\n\nexport interface SelectInputPopoverProps {\n placement?: Placement;\n open: boolean;\n renderTrigger: (args: {\n ref: React.RefCallback<Element>;\n getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n [key: string]: unknown;\n };\n }) => React.ReactNode;\n title?: string;\n size?: 'md' | 'lg';\n padding?: 'none' | 'md';\n children?: React.ReactNode;\n onClose?: () => void;\n onCloseEnd?: () => void;\n}\n\nconst FLOATING_PADDING = 16;\n\nexport function SelectInputPopover({\n placement,\n open,\n renderTrigger,\n title,\n size = 'md',\n padding = 'md',\n children,\n onClose,\n onCloseEnd,\n}: SelectInputPopoverProps) {\n const { refs, floatingStyles, context } = useFloating<Element>({\n strategy: 'fixed',\n placement,\n middleware: [\n offset(8),\n flip({ padding: FLOATING_PADDING, crossAxis: false }),\n shift(),\n floatingSize({\n padding: FLOATING_PADDING,\n apply: ({ elements, rects, availableHeight }) => {\n elements.floating.style.setProperty('--max-height', `${availableHeight}px`);\n elements.floating.style.setProperty('--width', `${rects.reference.width}px`);\n },\n }),\n ],\n whileElementsMounted: autoUpdate,\n open,\n onOpenChange: (value) => {\n if (!value) {\n onClose?.();\n }\n },\n });\n\n const dismiss = useDismiss(context);\n const role = useRole(context);\n const { getReferenceProps, getFloatingProps } = useInteractions([role, dismiss]);\n\n const [floatingKey, setFloatingKey] = useState(0);\n\n const { theme, screenMode } = useTheme();\n\n return (\n <>\n {open ? <PreventScroll /> : null}\n {renderTrigger({\n ref: refs.setReference,\n getInteractionProps: getReferenceProps,\n })}\n\n <FloatingPortal>\n <ThemeProvider theme=\"personal\" screenMode={theme === 'personal' ? screenMode : 'light'}>\n <Transition\n as=\"div\"\n show={open}\n leave=\"transition-opacity\"\n leaveTo=\"opacity-0\"\n beforeEnter={() => {\n setFloatingKey((prev) => prev + 1);\n }}\n afterLeave={onCloseEnd}\n >\n <FocusScope>\n <FloatingFocusManager context={context}>\n <div\n key={floatingKey} // Force inner state invalidation on open\n ref={refs.setFloating}\n className={clsx('np-popover-v2-container', {\n 'np-popover-v2-container--size-md': size === 'md',\n 'np-popover-v2-container--size-lg': size === 'lg',\n })}\n style={floatingStyles}\n {...getFloatingProps()}\n >\n <div\n className={clsx('np-popover-v2', title && 'np-popover-v2--has-title', {\n 'np-popover-v2--padding-md': padding === 'md',\n })}\n >\n {title ? (\n <h2 className=\"np-popover-v2-title np-text-title-body\">{title}</h2>\n ) : null}\n <div className=\"np-popover-v2-content np-text-body-default\">{children}</div>\n </div>\n </div>\n </FloatingFocusManager>\n </FocusScope>\n </Transition>\n </ThemeProvider>\n </FloatingPortal>\n </>\n );\n}\n"],"names":["FLOATING_PADDING","SelectInputPopover","placement","open","renderTrigger","title","size","padding","children","onClose","onCloseEnd","refs","floatingStyles","context","useFloating","strategy","middleware","offset","flip","crossAxis","shift","floatingSize","apply","elements","rects","availableHeight","floating","style","setProperty","reference","width","whileElementsMounted","autoUpdate","onOpenChange","value","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","floatingKey","setFloatingKey","useState","theme","screenMode","useTheme","_jsxs","_Fragment","_jsx","PreventScroll","ref","setReference","getInteractionProps","FloatingPortal","ThemeProvider","Transition","as","show","leave","leaveTo","beforeEnter","prev","afterLeave","FocusScope","FloatingFocusManager","setFloating","className","clsx"],"mappings":"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"}
|
|
@@ -4,11 +4,11 @@ import { FocusScope } from '@react-aria/focus';
|
|
|
4
4
|
import { useTheme, ThemeProvider } from '@wise/components-theming';
|
|
5
5
|
import { clsx } from 'clsx';
|
|
6
6
|
import { useState } from 'react';
|
|
7
|
-
import { PreventScroll } from '
|
|
7
|
+
import { PreventScroll } from '../../../common/preventScroll/PreventScroll.mjs';
|
|
8
8
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
9
9
|
|
|
10
|
-
const
|
|
11
|
-
function
|
|
10
|
+
const FLOATING_PADDING = 16;
|
|
11
|
+
function SelectInputPopover({
|
|
12
12
|
placement,
|
|
13
13
|
open,
|
|
14
14
|
renderTrigger,
|
|
@@ -27,10 +27,10 @@ function Popover({
|
|
|
27
27
|
strategy: 'fixed',
|
|
28
28
|
placement,
|
|
29
29
|
middleware: [offset(8), flip({
|
|
30
|
-
padding:
|
|
30
|
+
padding: FLOATING_PADDING,
|
|
31
31
|
crossAxis: false
|
|
32
32
|
}), shift(), size({
|
|
33
|
-
padding:
|
|
33
|
+
padding: FLOATING_PADDING,
|
|
34
34
|
apply: ({
|
|
35
35
|
elements,
|
|
36
36
|
rects,
|
|
@@ -109,5 +109,5 @@ function Popover({
|
|
|
109
109
|
});
|
|
110
110
|
}
|
|
111
111
|
|
|
112
|
-
export {
|
|
113
|
-
//# sourceMappingURL=
|
|
112
|
+
export { SelectInputPopover };
|
|
113
|
+
//# sourceMappingURL=SelectInputPopover.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectInputPopover.mjs","sources":["../../../../src/inputs/SelectInput/Popover/SelectInputPopover.tsx"],"sourcesContent":["import {\n autoUpdate,\n flip,\n FloatingFocusManager,\n FloatingPortal,\n offset,\n type Placement,\n shift,\n size as floatingSize,\n useDismiss,\n useFloating,\n useInteractions,\n useRole,\n} from '@floating-ui/react';\nimport { Transition } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useState } from 'react';\n\nimport { PreventScroll } from '../../../common/preventScroll/PreventScroll';\n\nexport interface SelectInputPopoverProps {\n placement?: Placement;\n open: boolean;\n renderTrigger: (args: {\n ref: React.RefCallback<Element>;\n getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n [key: string]: unknown;\n };\n }) => React.ReactNode;\n title?: string;\n size?: 'md' | 'lg';\n padding?: 'none' | 'md';\n children?: React.ReactNode;\n onClose?: () => void;\n onCloseEnd?: () => void;\n}\n\nconst FLOATING_PADDING = 16;\n\nexport function SelectInputPopover({\n placement,\n open,\n renderTrigger,\n title,\n size = 'md',\n padding = 'md',\n children,\n onClose,\n onCloseEnd,\n}: SelectInputPopoverProps) {\n const { refs, floatingStyles, context } = useFloating<Element>({\n strategy: 'fixed',\n placement,\n middleware: [\n offset(8),\n flip({ padding: FLOATING_PADDING, crossAxis: false }),\n shift(),\n floatingSize({\n padding: FLOATING_PADDING,\n apply: ({ elements, rects, availableHeight }) => {\n elements.floating.style.setProperty('--max-height', `${availableHeight}px`);\n elements.floating.style.setProperty('--width', `${rects.reference.width}px`);\n },\n }),\n ],\n whileElementsMounted: autoUpdate,\n open,\n onOpenChange: (value) => {\n if (!value) {\n onClose?.();\n }\n },\n });\n\n const dismiss = useDismiss(context);\n const role = useRole(context);\n const { getReferenceProps, getFloatingProps } = useInteractions([role, dismiss]);\n\n const [floatingKey, setFloatingKey] = useState(0);\n\n const { theme, screenMode } = useTheme();\n\n return (\n <>\n {open ? <PreventScroll /> : null}\n {renderTrigger({\n ref: refs.setReference,\n getInteractionProps: getReferenceProps,\n })}\n\n <FloatingPortal>\n <ThemeProvider theme=\"personal\" screenMode={theme === 'personal' ? screenMode : 'light'}>\n <Transition\n as=\"div\"\n show={open}\n leave=\"transition-opacity\"\n leaveTo=\"opacity-0\"\n beforeEnter={() => {\n setFloatingKey((prev) => prev + 1);\n }}\n afterLeave={onCloseEnd}\n >\n <FocusScope>\n <FloatingFocusManager context={context}>\n <div\n key={floatingKey} // Force inner state invalidation on open\n ref={refs.setFloating}\n className={clsx('np-popover-v2-container', {\n 'np-popover-v2-container--size-md': size === 'md',\n 'np-popover-v2-container--size-lg': size === 'lg',\n })}\n style={floatingStyles}\n {...getFloatingProps()}\n >\n <div\n className={clsx('np-popover-v2', title && 'np-popover-v2--has-title', {\n 'np-popover-v2--padding-md': padding === 'md',\n })}\n >\n {title ? (\n <h2 className=\"np-popover-v2-title np-text-title-body\">{title}</h2>\n ) : null}\n <div className=\"np-popover-v2-content np-text-body-default\">{children}</div>\n </div>\n </div>\n </FloatingFocusManager>\n </FocusScope>\n </Transition>\n </ThemeProvider>\n </FloatingPortal>\n </>\n );\n}\n"],"names":["FLOATING_PADDING","SelectInputPopover","placement","open","renderTrigger","title","size","padding","children","onClose","onCloseEnd","refs","floatingStyles","context","useFloating","strategy","middleware","offset","flip","crossAxis","shift","floatingSize","apply","elements","rects","availableHeight","floating","style","setProperty","reference","width","whileElementsMounted","autoUpdate","onOpenChange","value","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","floatingKey","setFloatingKey","useState","theme","screenMode","useTheme","_jsxs","_Fragment","_jsx","PreventScroll","ref","setReference","getInteractionProps","FloatingPortal","ThemeProvider","Transition","as","show","leave","leaveTo","beforeEnter","prev","afterLeave","FocusScope","FloatingFocusManager","setFloating","className","clsx"],"mappings":"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"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Context for passing props to the SelectInputTriggerButton component.
|
|
7
|
+
*/
|
|
8
|
+
const SelectInputTriggerButtonPropsContext = /*#__PURE__*/React.createContext({});
|
|
9
|
+
/**
|
|
10
|
+
* Context for providing the total count of items in a SelectInput.
|
|
11
|
+
* Used for ARIA accessibility to inform screen readers about the total number of options.
|
|
12
|
+
*/
|
|
13
|
+
const SelectInputItemsCountContext = /*#__PURE__*/React.createContext(undefined);
|
|
14
|
+
/**
|
|
15
|
+
* Context for providing the current item position in a SelectInput.
|
|
16
|
+
* Used for ARIA accessibility to inform screen readers about the position of the option.
|
|
17
|
+
*/
|
|
18
|
+
const SelectInputItemPositionContext = /*#__PURE__*/React.createContext(undefined);
|
|
19
|
+
/**
|
|
20
|
+
* Context indicating whether an option's content is rendered within the trigger button.
|
|
21
|
+
* When true, certain styling adjustments are applied to make the content fit better in the trigger.
|
|
22
|
+
*/
|
|
23
|
+
const SelectInputOptionContentWithinTriggerContext = /*#__PURE__*/React.createContext(false);
|
|
24
|
+
|
|
25
|
+
exports.SelectInputItemPositionContext = SelectInputItemPositionContext;
|
|
26
|
+
exports.SelectInputItemsCountContext = SelectInputItemsCountContext;
|
|
27
|
+
exports.SelectInputOptionContentWithinTriggerContext = SelectInputOptionContentWithinTriggerContext;
|
|
28
|
+
exports.SelectInputTriggerButtonPropsContext = SelectInputTriggerButtonPropsContext;
|
|
29
|
+
//# sourceMappingURL=SelectInput.contexts.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectInput.contexts.js","sources":["../../../src/inputs/SelectInput/SelectInput.contexts.tsx"],"sourcesContent":["import React, { createContext } from 'react';\n\n/**\n * Context for passing props to the SelectInputTriggerButton component.\n */\nexport interface SelectInputTriggerButtonPropsContextValue {\n ref?: React.ForwardedRef<HTMLButtonElement | null>;\n id?: string;\n onClick?: (event: React.MouseEvent) => void;\n onKeyDown?: (event: React.KeyboardEvent) => void;\n size?: 'sm' | 'md' | 'lg';\n [key: string]: unknown;\n}\n\n/**\n * Context for passing props to the SelectInputTriggerButton component.\n */\nexport const SelectInputTriggerButtonPropsContext =\n createContext<SelectInputTriggerButtonPropsContextValue>({});\n\n/**\n * Context for providing the total count of items in a SelectInput.\n * Used for ARIA accessibility to inform screen readers about the total number of options.\n */\nexport const SelectInputItemsCountContext = createContext<number | undefined>(undefined);\n\n/**\n * Context for providing the current item position in a SelectInput.\n * Used for ARIA accessibility to inform screen readers about the position of the option.\n */\nexport const SelectInputItemPositionContext = createContext<number | undefined>(undefined);\n\n/**\n * Context indicating whether an option's content is rendered within the trigger button.\n * When true, certain styling adjustments are applied to make the content fit better in the trigger.\n */\nexport const SelectInputOptionContentWithinTriggerContext = createContext(false);\n\n// Re-export types from the original contexts module for backward compatibility\nexport type { WithInputAttributesProps } from '../contexts';\n"],"names":["SelectInputTriggerButtonPropsContext","createContext","SelectInputItemsCountContext","undefined","SelectInputItemPositionContext","SelectInputOptionContentWithinTriggerContext"],"mappings":";;;;AAcA;;AAEG;MACUA,oCAAoC,gBAC/CC,mBAAa,CAA4C,EAAE;AAE7D;;;AAGG;MACUC,4BAA4B,gBAAGD,mBAAa,CAAqBE,SAAS;AAEvF;;;AAGG;MACUC,8BAA8B,gBAAGH,mBAAa,CAAqBE,SAAS;AAEzF;;;AAGG;MACUE,4CAA4C,gBAAGJ,mBAAa,CAAC,KAAK;;;;;;;"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { createContext } from 'react';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Context for passing props to the SelectInputTriggerButton component.
|
|
5
|
+
*/
|
|
6
|
+
const SelectInputTriggerButtonPropsContext = /*#__PURE__*/createContext({});
|
|
7
|
+
/**
|
|
8
|
+
* Context for providing the total count of items in a SelectInput.
|
|
9
|
+
* Used for ARIA accessibility to inform screen readers about the total number of options.
|
|
10
|
+
*/
|
|
11
|
+
const SelectInputItemsCountContext = /*#__PURE__*/createContext(undefined);
|
|
12
|
+
/**
|
|
13
|
+
* Context for providing the current item position in a SelectInput.
|
|
14
|
+
* Used for ARIA accessibility to inform screen readers about the position of the option.
|
|
15
|
+
*/
|
|
16
|
+
const SelectInputItemPositionContext = /*#__PURE__*/createContext(undefined);
|
|
17
|
+
/**
|
|
18
|
+
* Context indicating whether an option's content is rendered within the trigger button.
|
|
19
|
+
* When true, certain styling adjustments are applied to make the content fit better in the trigger.
|
|
20
|
+
*/
|
|
21
|
+
const SelectInputOptionContentWithinTriggerContext = /*#__PURE__*/createContext(false);
|
|
22
|
+
|
|
23
|
+
export { SelectInputItemPositionContext, SelectInputItemsCountContext, SelectInputOptionContentWithinTriggerContext, SelectInputTriggerButtonPropsContext };
|
|
24
|
+
//# sourceMappingURL=SelectInput.contexts.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectInput.contexts.mjs","sources":["../../../src/inputs/SelectInput/SelectInput.contexts.tsx"],"sourcesContent":["import React, { createContext } from 'react';\n\n/**\n * Context for passing props to the SelectInputTriggerButton component.\n */\nexport interface SelectInputTriggerButtonPropsContextValue {\n ref?: React.ForwardedRef<HTMLButtonElement | null>;\n id?: string;\n onClick?: (event: React.MouseEvent) => void;\n onKeyDown?: (event: React.KeyboardEvent) => void;\n size?: 'sm' | 'md' | 'lg';\n [key: string]: unknown;\n}\n\n/**\n * Context for passing props to the SelectInputTriggerButton component.\n */\nexport const SelectInputTriggerButtonPropsContext =\n createContext<SelectInputTriggerButtonPropsContextValue>({});\n\n/**\n * Context for providing the total count of items in a SelectInput.\n * Used for ARIA accessibility to inform screen readers about the total number of options.\n */\nexport const SelectInputItemsCountContext = createContext<number | undefined>(undefined);\n\n/**\n * Context for providing the current item position in a SelectInput.\n * Used for ARIA accessibility to inform screen readers about the position of the option.\n */\nexport const SelectInputItemPositionContext = createContext<number | undefined>(undefined);\n\n/**\n * Context indicating whether an option's content is rendered within the trigger button.\n * When true, certain styling adjustments are applied to make the content fit better in the trigger.\n */\nexport const SelectInputOptionContentWithinTriggerContext = createContext(false);\n\n// Re-export types from the original contexts module for backward compatibility\nexport type { WithInputAttributesProps } from '../contexts';\n"],"names":["SelectInputTriggerButtonPropsContext","createContext","SelectInputItemsCountContext","undefined","SelectInputItemPositionContext","SelectInputOptionContentWithinTriggerContext"],"mappings":";;AAcA;;AAEG;MACUA,oCAAoC,gBAC/CC,aAAa,CAA4C,EAAE;AAE7D;;;AAGG;MACUC,4BAA4B,gBAAGD,aAAa,CAAqBE,SAAS;AAEvF;;;AAGG;MACUC,8BAA8B,gBAAGH,aAAa,CAAqBE,SAAS;AAEzF;;;AAGG;MACUE,4CAA4C,gBAAGJ,aAAa,CAAC,KAAK;;;;"}
|