@transferwise/components 46.140.0 → 46.141.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/avatarWrapper/AvatarWrapper.js +3 -4
- package/build/avatarWrapper/AvatarWrapper.js.map +1 -1
- package/build/avatarWrapper/AvatarWrapper.mjs +4 -5
- package/build/avatarWrapper/AvatarWrapper.mjs.map +1 -1
- package/build/button/LegacyButton.js.map +1 -1
- package/build/button/LegacyButton.mjs.map +1 -1
- package/build/common/hooks/useHasIntersected/useHasIntersected.js +6 -4
- package/build/common/hooks/useHasIntersected/useHasIntersected.js.map +1 -1
- package/build/common/hooks/useHasIntersected/useHasIntersected.mjs +6 -4
- package/build/common/hooks/useHasIntersected/useHasIntersected.mjs.map +1 -1
- package/build/common/liveRegion/LiveRegion.js +4 -1
- package/build/common/liveRegion/LiveRegion.js.map +1 -1
- package/build/common/liveRegion/LiveRegion.mjs +4 -1
- package/build/common/liveRegion/LiveRegion.mjs.map +1 -1
- package/build/dateInput/DateInput.js +10 -10
- package/build/dateInput/DateInput.js.map +1 -1
- package/build/dateInput/DateInput.mjs +10 -10
- package/build/dateInput/DateInput.mjs.map +1 -1
- package/build/dateLookup/DateLookup.js +1 -1
- package/build/dateLookup/DateLookup.js.map +1 -1
- package/build/dateLookup/DateLookup.mjs +1 -1
- package/build/dateLookup/DateLookup.mjs.map +1 -1
- package/build/dateLookup/monthCalendar/table/MonthCalendarTable.js +1 -1
- package/build/dateLookup/monthCalendar/table/MonthCalendarTable.js.map +1 -1
- package/build/dateLookup/monthCalendar/table/MonthCalendarTable.mjs +1 -1
- package/build/dateLookup/monthCalendar/table/MonthCalendarTable.mjs.map +1 -1
- package/build/dateLookup/yearCalendar/table/YearCalendarTable.js +1 -1
- package/build/dateLookup/yearCalendar/table/YearCalendarTable.js.map +1 -1
- package/build/dateLookup/yearCalendar/table/YearCalendarTable.mjs +1 -1
- package/build/dateLookup/yearCalendar/table/YearCalendarTable.mjs.map +1 -1
- package/build/expressiveMoneyInput/ExpressiveMoneyInput.js.map +1 -1
- package/build/expressiveMoneyInput/ExpressiveMoneyInput.mjs.map +1 -1
- package/build/expressiveMoneyInput/amountInput/AmountInput.js +17 -11
- package/build/expressiveMoneyInput/amountInput/AmountInput.js.map +1 -1
- package/build/expressiveMoneyInput/amountInput/AmountInput.mjs +18 -12
- package/build/expressiveMoneyInput/amountInput/AmountInput.mjs.map +1 -1
- package/build/expressiveMoneyInput/hooks/useInputStyle.js +8 -6
- package/build/expressiveMoneyInput/hooks/useInputStyle.js.map +1 -1
- package/build/expressiveMoneyInput/hooks/useInputStyle.mjs +9 -7
- package/build/expressiveMoneyInput/hooks/useInputStyle.mjs.map +1 -1
- package/build/header/Header.js +1 -1
- package/build/header/Header.js.map +1 -1
- package/build/header/Header.mjs +1 -1
- package/build/header/Header.mjs.map +1 -1
- package/build/inputs/SelectInput/BottomSheet/SelectInputBottomSheet.js.map +1 -1
- package/build/inputs/SelectInput/BottomSheet/SelectInputBottomSheet.mjs.map +1 -1
- package/build/inputs/SelectInput/Options/SelectInputOptions.js +34 -22
- package/build/inputs/SelectInput/Options/SelectInputOptions.js.map +1 -1
- package/build/inputs/SelectInput/Options/SelectInputOptions.mjs +35 -23
- package/build/inputs/SelectInput/Options/SelectInputOptions.mjs.map +1 -1
- package/build/inputs/SelectInput/Popover/SelectInputPopover.js.map +1 -1
- package/build/inputs/SelectInput/Popover/SelectInputPopover.mjs.map +1 -1
- package/build/inputs/SelectInput/SelectInput.js +8 -6
- package/build/inputs/SelectInput/SelectInput.js.map +1 -1
- package/build/inputs/SelectInput/SelectInput.mjs +9 -7
- package/build/inputs/SelectInput/SelectInput.mjs.map +1 -1
- package/build/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.js.map +1 -1
- package/build/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.mjs.map +1 -1
- package/build/main.css +58 -53
- package/build/nudge/Nudge.js +31 -15
- package/build/nudge/Nudge.js.map +1 -1
- package/build/nudge/Nudge.mjs +32 -16
- package/build/nudge/Nudge.mjs.map +1 -1
- package/build/phoneNumberInput/PhoneNumberInput.js +9 -12
- package/build/phoneNumberInput/PhoneNumberInput.js.map +1 -1
- package/build/phoneNumberInput/PhoneNumberInput.mjs +9 -12
- package/build/phoneNumberInput/PhoneNumberInput.mjs.map +1 -1
- package/build/promoCard/PromoCardGroup.js +34 -16
- package/build/promoCard/PromoCardGroup.js.map +1 -1
- package/build/promoCard/PromoCardGroup.mjs +35 -17
- package/build/promoCard/PromoCardGroup.mjs.map +1 -1
- package/build/segmentedControl/SegmentedControl.js +6 -1
- package/build/segmentedControl/SegmentedControl.js.map +1 -1
- package/build/segmentedControl/SegmentedControl.mjs +7 -2
- package/build/segmentedControl/SegmentedControl.mjs.map +1 -1
- package/build/styles/css/neptune.css +58 -53
- package/build/styles/less/neptune-tokens.less +2 -2
- package/build/styles/main.css +58 -53
- package/build/styles/props/neptune-tokens.css +1 -1
- package/build/styles/styles/less/core/viewport-themes.css +46 -42
- package/build/styles/styles/less/neptune.css +58 -53
- package/build/tabs/Tabs.js +1 -1
- package/build/tabs/Tabs.js.map +1 -1
- package/build/tabs/Tabs.mjs +1 -1
- package/build/tabs/Tabs.mjs.map +1 -1
- package/build/tooltip/Tooltip.js +6 -3
- package/build/tooltip/Tooltip.js.map +1 -1
- package/build/tooltip/Tooltip.mjs +6 -3
- package/build/tooltip/Tooltip.mjs.map +1 -1
- package/build/types/avatarWrapper/AvatarWrapper.d.ts.map +1 -1
- package/build/types/common/hooks/useHasIntersected/useHasIntersected.d.ts.map +1 -1
- package/build/types/common/liveRegion/LiveRegion.d.ts.map +1 -1
- package/build/types/dateLookup/monthCalendar/table/MonthCalendarTable.d.ts.map +1 -1
- package/build/types/expressiveMoneyInput/ExpressiveMoneyInput.d.ts.map +1 -1
- package/build/types/expressiveMoneyInput/amountInput/AmountInput.d.ts.map +1 -1
- package/build/types/expressiveMoneyInput/hooks/useInputStyle.d.ts +2 -2
- package/build/types/expressiveMoneyInput/hooks/useInputStyle.d.ts.map +1 -1
- package/build/types/expressiveMoneyInput/hooks/useSelectionRange.d.ts.map +1 -1
- package/build/types/inputs/SelectInput/BottomSheet/SelectInputBottomSheet.d.ts.map +1 -1
- package/build/types/inputs/SelectInput/Options/SelectInputOptions.d.ts.map +1 -1
- package/build/types/inputs/SelectInput/Popover/SelectInputPopover.d.ts.map +1 -1
- package/build/types/inputs/SelectInput/SelectInput.d.ts.map +1 -1
- package/build/types/nudge/Nudge.d.ts.map +1 -1
- package/build/types/phoneNumberInput/PhoneNumberInput.d.ts.map +1 -1
- package/build/types/promoCard/PromoCardGroup.d.ts.map +1 -1
- package/build/types/segmentedControl/SegmentedControl.d.ts.map +1 -1
- package/build/types/tooltip/Tooltip.d.ts.map +1 -1
- package/build/types/uploadInput/UploadInput.d.ts.map +1 -1
- package/build/uploadInput/UploadInput.js +29 -25
- package/build/uploadInput/UploadInput.js.map +1 -1
- package/build/uploadInput/UploadInput.mjs +29 -25
- package/build/uploadInput/UploadInput.mjs.map +1 -1
- package/package.json +3 -3
- package/src/avatarWrapper/AvatarWrapper.test.tsx +33 -3
- package/src/avatarWrapper/AvatarWrapper.tsx +5 -6
- package/src/button/LegacyButton.tsx +1 -1
- package/src/button/_stories/Button.test.story.tsx +3 -3
- package/src/common/hooks/useContainerSize.test.tsx +1 -1
- package/src/common/hooks/useHasIntersected/useHasIntersected.ts +12 -4
- package/src/common/liveRegion/LiveRegion.tsx +5 -2
- package/src/dateInput/DateInput.tsx +10 -10
- package/src/dateLookup/DateLookup.test.story.tsx +16 -0
- package/src/dateLookup/DateLookup.tsx +1 -1
- package/src/dateLookup/monthCalendar/table/MonthCalendarTable.tsx +1 -5
- package/src/dateLookup/yearCalendar/table/YearCalendarTable.tsx +1 -1
- package/src/expressiveMoneyInput/ExpressiveMoneyInput.tsx +1 -1
- package/src/expressiveMoneyInput/amountInput/AmountInput.tsx +22 -15
- package/src/expressiveMoneyInput/hooks/useInputStyle.ts +20 -8
- package/src/expressiveMoneyInput/hooks/useSelectionRange.ts +2 -0
- package/src/header/Header.tsx +2 -2
- package/src/inputs/SelectInput/BottomSheet/SelectInputBottomSheet.tsx +4 -0
- package/src/inputs/SelectInput/Options/SelectInputOptions.tsx +43 -27
- package/src/inputs/SelectInput/Popover/SelectInputPopover.tsx +4 -0
- package/src/inputs/SelectInput/SelectInput.tsx +21 -15
- package/src/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.tsx +1 -1
- package/src/main.css +58 -53
- package/src/nudge/Nudge.tsx +29 -20
- package/src/phoneNumberInput/PhoneNumberInput.test.tsx +16 -0
- package/src/phoneNumberInput/PhoneNumberInput.tsx +11 -13
- package/src/promoCard/PromoCard.story.tsx +3 -3
- package/src/promoCard/PromoCardGroup.tsx +39 -21
- package/src/segmentedControl/SegmentedControl.test.tsx +25 -0
- package/src/segmentedControl/SegmentedControl.tsx +7 -1
- package/src/select/Select.story.tsx +1 -1
- package/src/styles/less/core/viewport-themes.css +46 -42
- package/src/styles/less/core/viewport-themes.less +2 -45
- package/src/styles/less/neptune.css +58 -53
- package/src/tabs/Tabs.tsx +1 -1
- package/src/tooltip/Tooltip.tsx +3 -0
- package/src/uploadInput/UploadInput.test.tsx +19 -0
- package/src/uploadInput/UploadInput.tsx +28 -24
|
@@ -38,7 +38,7 @@ function SelectInputOptions({
|
|
|
38
38
|
const intl = reactIntl.useIntl();
|
|
39
39
|
const virtualiserHandlerRef = React.useRef(null);
|
|
40
40
|
const controllerRef = filterable ? searchInputRef : listboxRef;
|
|
41
|
-
const
|
|
41
|
+
const initialRenderRef = React.useRef(true);
|
|
42
42
|
const needle = React.useMemo(() => {
|
|
43
43
|
if (filterable) {
|
|
44
44
|
return filterQuery ? SelectInput_utils.searchableString(filterQuery) : null;
|
|
@@ -112,25 +112,30 @@ function SelectInputOptions({
|
|
|
112
112
|
// Items shown once shall be kept mounted until the needle changes, otherwise
|
|
113
113
|
// the scroll position may jump around inadvertently. Pattern adopted from:
|
|
114
114
|
// https://inokawa.github.io/virtua/?path=/story/advanced-keep-offscreen-items--append-only
|
|
115
|
-
const [
|
|
116
|
-
|
|
115
|
+
const [virtualState, setVirtualState] = React.useState({
|
|
116
|
+
needle,
|
|
117
|
+
length: filteredItems.length,
|
|
118
|
+
mountedIndexes: []
|
|
119
|
+
});
|
|
120
|
+
// Note: virtualState.mountedIndexes is in deps but only read in the guarded branch.
|
|
121
|
+
// This means external updates to mountedIndexes will trigger this effect but hit the guard
|
|
122
|
+
// and bail out early. This is intentional and harmless - the guard ensures no unnecessary work.
|
|
117
123
|
React.useEffect(() => {
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
if (filteredItems.length > 0) {
|
|
128
|
-
setMountedIndexes(prevMountedIndexes => {
|
|
129
|
-
// Create a new array with existing indexes plus the last item index
|
|
130
|
-
return [...new Set([...prevMountedIndexes, filteredItems.length - 1])]; // Sorting is redundant by nature here
|
|
124
|
+
if (virtualState.needle !== needle || virtualState.length !== filteredItems.length) {
|
|
125
|
+
const needleChanged = virtualState.needle !== needle;
|
|
126
|
+
// eslint-disable-next-line react-hooks/set-state-in-effect -- Syncing virtual scroll state with filtered items
|
|
127
|
+
setVirtualState({
|
|
128
|
+
needle,
|
|
129
|
+
length: filteredItems.length,
|
|
130
|
+
mountedIndexes: needleChanged ? [] // Reset on needle change
|
|
131
|
+
: filteredItems.length > 0 ? [...new Set([...virtualState.mountedIndexes, filteredItems.length - 1])] // Add last index
|
|
132
|
+
: virtualState.mountedIndexes
|
|
131
133
|
});
|
|
132
134
|
}
|
|
133
|
-
}, [needle, filteredItems.length]);
|
|
135
|
+
}, [needle, filteredItems.length, virtualState.needle, virtualState.length, virtualState.mountedIndexes]);
|
|
136
|
+
const {
|
|
137
|
+
mountedIndexes
|
|
138
|
+
} = virtualState;
|
|
134
139
|
const listboxContainerRef = React.useRef(null);
|
|
135
140
|
React.useEffect(() => {
|
|
136
141
|
if (listboxContainerRef.current != null) {
|
|
@@ -138,7 +143,7 @@ function SelectInputOptions({
|
|
|
138
143
|
}
|
|
139
144
|
}, []);
|
|
140
145
|
React.useEffect(() => {
|
|
141
|
-
|
|
146
|
+
initialRenderRef.current = false;
|
|
142
147
|
}, []);
|
|
143
148
|
const showStatus = resultsEmpty;
|
|
144
149
|
const statusId = React.useId();
|
|
@@ -167,7 +172,7 @@ function SelectInputOptions({
|
|
|
167
172
|
className: "np-select-input-options-container",
|
|
168
173
|
onAriaActiveDescendantChange: value => {
|
|
169
174
|
if (controllerRef.current != null) {
|
|
170
|
-
if (!
|
|
175
|
+
if (!initialRenderRef.current && value != null) {
|
|
171
176
|
controllerRef.current.setAttribute('aria-activedescendant', value);
|
|
172
177
|
} else {
|
|
173
178
|
controllerRef.current.removeAttribute('aria-activedescendant');
|
|
@@ -202,7 +207,10 @@ function SelectInputOptions({
|
|
|
202
207
|
// resulting item count is less than before
|
|
203
208
|
const inputValue = event.currentTarget.value;
|
|
204
209
|
// Free up resources and ensure not to go out of bounds
|
|
205
|
-
|
|
210
|
+
setVirtualState(prev => ({
|
|
211
|
+
...prev,
|
|
212
|
+
mountedIndexes: []
|
|
213
|
+
}));
|
|
206
214
|
onFilterChange(inputValue);
|
|
207
215
|
},
|
|
208
216
|
onInput: event => {
|
|
@@ -253,7 +261,7 @@ function SelectInputOptions({
|
|
|
253
261
|
if (!virtualiserHandlerRef.current) return;
|
|
254
262
|
const startIndex = virtualiserHandlerRef.current.findItemIndex(virtualiserHandlerRef.current.scrollOffset);
|
|
255
263
|
const endIndex = virtualiserHandlerRef.current.findItemIndex(virtualiserHandlerRef.current.scrollOffset + virtualiserHandlerRef.current.viewportSize);
|
|
256
|
-
|
|
264
|
+
setVirtualState(prev => {
|
|
257
265
|
// Create an array of all indexes that should be visible
|
|
258
266
|
const visibleIndexes = [];
|
|
259
267
|
for (let index = startIndex; index <= endIndex; index += 1) {
|
|
@@ -261,7 +269,11 @@ function SelectInputOptions({
|
|
|
261
269
|
visibleIndexes.push(index);
|
|
262
270
|
}
|
|
263
271
|
// Combine with previous indexes and sort
|
|
264
|
-
|
|
272
|
+
const newMountedIndexes = [...new Set([...prev.mountedIndexes, ...visibleIndexes])].sort((a, b) => a - b);
|
|
273
|
+
return {
|
|
274
|
+
...prev,
|
|
275
|
+
mountedIndexes: newMountedIndexes
|
|
276
|
+
};
|
|
265
277
|
});
|
|
266
278
|
},
|
|
267
279
|
children: (item, index) =>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectInputOptions.js","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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"}
|
|
1
|
+
{"version":3,"file":"SelectInputOptions.js","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 initialRenderRef = useRef(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 [virtualState, setVirtualState] = useState<{\n needle: typeof needle;\n length: number;\n mountedIndexes: number[];\n }>({\n needle,\n length: filteredItems.length,\n mountedIndexes: [],\n });\n\n // Note: virtualState.mountedIndexes is in deps but only read in the guarded branch.\n // This means external updates to mountedIndexes will trigger this effect but hit the guard\n // and bail out early. This is intentional and harmless - the guard ensures no unnecessary work.\n useEffect(() => {\n if (virtualState.needle !== needle || virtualState.length !== filteredItems.length) {\n const needleChanged = virtualState.needle !== needle;\n // eslint-disable-next-line react-hooks/set-state-in-effect -- Syncing virtual scroll state with filtered items\n setVirtualState({\n needle,\n length: filteredItems.length,\n mountedIndexes: needleChanged\n ? [] // Reset on needle change\n : filteredItems.length > 0\n ? [...new Set([...virtualState.mountedIndexes, filteredItems.length - 1])] // Add last index\n : virtualState.mountedIndexes,\n });\n }\n }, [\n needle,\n filteredItems.length,\n virtualState.needle,\n virtualState.length,\n virtualState.mountedIndexes,\n ]);\n\n const { mountedIndexes } = virtualState;\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 initialRenderRef.current = 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 (!initialRenderRef.current && 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 setVirtualState((prev) => ({ ...prev, mountedIndexes: [] }));\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 setVirtualState((prev) => {\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 const newMountedIndexes = [\n ...new Set([...prev.mountedIndexes, ...visibleIndexes]),\n ].sort((a, b) => a - b);\n\n return { ...prev, mountedIndexes: newMountedIndexes };\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","initialRenderRef","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","virtualState","setVirtualState","useState","mountedIndexes","needleChanged","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","prev","onInput","inputElement","setTimeout","matchedValue","tabIndex","clsx","CrossCircle","size","formatMessage","messages","noResultsFound","_","Virtualizer","data","keepMounted","scrollRef","onScroll","startIndex","findItemIndex","scrollOffset","endIndex","viewportSize","visibleIndexes","push","newMountedIndexes","sort","SelectInputItemsCountContext","Provider","SelectInputItemPositionContext","queryNormalized"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { CrossCircle } from '@transferwise/icons';
|
|
2
2
|
import { ListboxOptions } from '@headlessui/react';
|
|
3
3
|
import { clsx } from 'clsx';
|
|
4
|
-
import { useRef,
|
|
4
|
+
import { useRef, useMemo, useEffect, useState, useId } from 'react';
|
|
5
5
|
import { useIntl } from 'react-intl';
|
|
6
6
|
import { Virtualizer } from 'virtua';
|
|
7
7
|
import { SearchInput } from '../../SearchInput.mjs';
|
|
@@ -36,7 +36,7 @@ function SelectInputOptions({
|
|
|
36
36
|
const intl = useIntl();
|
|
37
37
|
const virtualiserHandlerRef = useRef(null);
|
|
38
38
|
const controllerRef = filterable ? searchInputRef : listboxRef;
|
|
39
|
-
const
|
|
39
|
+
const initialRenderRef = useRef(true);
|
|
40
40
|
const needle = useMemo(() => {
|
|
41
41
|
if (filterable) {
|
|
42
42
|
return filterQuery ? searchableString(filterQuery) : null;
|
|
@@ -110,25 +110,30 @@ function SelectInputOptions({
|
|
|
110
110
|
// Items shown once shall be kept mounted until the needle changes, otherwise
|
|
111
111
|
// the scroll position may jump around inadvertently. Pattern adopted from:
|
|
112
112
|
// https://inokawa.github.io/virtua/?path=/story/advanced-keep-offscreen-items--append-only
|
|
113
|
-
const [
|
|
114
|
-
|
|
113
|
+
const [virtualState, setVirtualState] = useState({
|
|
114
|
+
needle,
|
|
115
|
+
length: filteredItems.length,
|
|
116
|
+
mountedIndexes: []
|
|
117
|
+
});
|
|
118
|
+
// Note: virtualState.mountedIndexes is in deps but only read in the guarded branch.
|
|
119
|
+
// This means external updates to mountedIndexes will trigger this effect but hit the guard
|
|
120
|
+
// and bail out early. This is intentional and harmless - the guard ensures no unnecessary work.
|
|
115
121
|
useEffect(() => {
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
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
|
|
122
|
+
if (virtualState.needle !== needle || virtualState.length !== filteredItems.length) {
|
|
123
|
+
const needleChanged = virtualState.needle !== needle;
|
|
124
|
+
// eslint-disable-next-line react-hooks/set-state-in-effect -- Syncing virtual scroll state with filtered items
|
|
125
|
+
setVirtualState({
|
|
126
|
+
needle,
|
|
127
|
+
length: filteredItems.length,
|
|
128
|
+
mountedIndexes: needleChanged ? [] // Reset on needle change
|
|
129
|
+
: filteredItems.length > 0 ? [...new Set([...virtualState.mountedIndexes, filteredItems.length - 1])] // Add last index
|
|
130
|
+
: virtualState.mountedIndexes
|
|
129
131
|
});
|
|
130
132
|
}
|
|
131
|
-
}, [needle, filteredItems.length]);
|
|
133
|
+
}, [needle, filteredItems.length, virtualState.needle, virtualState.length, virtualState.mountedIndexes]);
|
|
134
|
+
const {
|
|
135
|
+
mountedIndexes
|
|
136
|
+
} = virtualState;
|
|
132
137
|
const listboxContainerRef = useRef(null);
|
|
133
138
|
useEffect(() => {
|
|
134
139
|
if (listboxContainerRef.current != null) {
|
|
@@ -136,7 +141,7 @@ function SelectInputOptions({
|
|
|
136
141
|
}
|
|
137
142
|
}, []);
|
|
138
143
|
useEffect(() => {
|
|
139
|
-
|
|
144
|
+
initialRenderRef.current = false;
|
|
140
145
|
}, []);
|
|
141
146
|
const showStatus = resultsEmpty;
|
|
142
147
|
const statusId = useId();
|
|
@@ -165,7 +170,7 @@ function SelectInputOptions({
|
|
|
165
170
|
className: "np-select-input-options-container",
|
|
166
171
|
onAriaActiveDescendantChange: value => {
|
|
167
172
|
if (controllerRef.current != null) {
|
|
168
|
-
if (!
|
|
173
|
+
if (!initialRenderRef.current && value != null) {
|
|
169
174
|
controllerRef.current.setAttribute('aria-activedescendant', value);
|
|
170
175
|
} else {
|
|
171
176
|
controllerRef.current.removeAttribute('aria-activedescendant');
|
|
@@ -200,7 +205,10 @@ function SelectInputOptions({
|
|
|
200
205
|
// resulting item count is less than before
|
|
201
206
|
const inputValue = event.currentTarget.value;
|
|
202
207
|
// Free up resources and ensure not to go out of bounds
|
|
203
|
-
|
|
208
|
+
setVirtualState(prev => ({
|
|
209
|
+
...prev,
|
|
210
|
+
mountedIndexes: []
|
|
211
|
+
}));
|
|
204
212
|
onFilterChange(inputValue);
|
|
205
213
|
},
|
|
206
214
|
onInput: event => {
|
|
@@ -251,7 +259,7 @@ function SelectInputOptions({
|
|
|
251
259
|
if (!virtualiserHandlerRef.current) return;
|
|
252
260
|
const startIndex = virtualiserHandlerRef.current.findItemIndex(virtualiserHandlerRef.current.scrollOffset);
|
|
253
261
|
const endIndex = virtualiserHandlerRef.current.findItemIndex(virtualiserHandlerRef.current.scrollOffset + virtualiserHandlerRef.current.viewportSize);
|
|
254
|
-
|
|
262
|
+
setVirtualState(prev => {
|
|
255
263
|
// Create an array of all indexes that should be visible
|
|
256
264
|
const visibleIndexes = [];
|
|
257
265
|
for (let index = startIndex; index <= endIndex; index += 1) {
|
|
@@ -259,7 +267,11 @@ function SelectInputOptions({
|
|
|
259
267
|
visibleIndexes.push(index);
|
|
260
268
|
}
|
|
261
269
|
// Combine with previous indexes and sort
|
|
262
|
-
|
|
270
|
+
const newMountedIndexes = [...new Set([...prev.mountedIndexes, ...visibleIndexes])].sort((a, b) => a - b);
|
|
271
|
+
return {
|
|
272
|
+
...prev,
|
|
273
|
+
mountedIndexes: newMountedIndexes
|
|
274
|
+
};
|
|
263
275
|
});
|
|
264
276
|
},
|
|
265
277
|
children: (item, index) =>
|
|
@@ -1 +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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"}
|
|
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 initialRenderRef = useRef(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 [virtualState, setVirtualState] = useState<{\n needle: typeof needle;\n length: number;\n mountedIndexes: number[];\n }>({\n needle,\n length: filteredItems.length,\n mountedIndexes: [],\n });\n\n // Note: virtualState.mountedIndexes is in deps but only read in the guarded branch.\n // This means external updates to mountedIndexes will trigger this effect but hit the guard\n // and bail out early. This is intentional and harmless - the guard ensures no unnecessary work.\n useEffect(() => {\n if (virtualState.needle !== needle || virtualState.length !== filteredItems.length) {\n const needleChanged = virtualState.needle !== needle;\n // eslint-disable-next-line react-hooks/set-state-in-effect -- Syncing virtual scroll state with filtered items\n setVirtualState({\n needle,\n length: filteredItems.length,\n mountedIndexes: needleChanged\n ? [] // Reset on needle change\n : filteredItems.length > 0\n ? [...new Set([...virtualState.mountedIndexes, filteredItems.length - 1])] // Add last index\n : virtualState.mountedIndexes,\n });\n }\n }, [\n needle,\n filteredItems.length,\n virtualState.needle,\n virtualState.length,\n virtualState.mountedIndexes,\n ]);\n\n const { mountedIndexes } = virtualState;\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 initialRenderRef.current = 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 (!initialRenderRef.current && 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 setVirtualState((prev) => ({ ...prev, mountedIndexes: [] }));\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 setVirtualState((prev) => {\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 const newMountedIndexes = [\n ...new Set([...prev.mountedIndexes, ...visibleIndexes]),\n ].sort((a, b) => a - b);\n\n return { ...prev, mountedIndexes: newMountedIndexes };\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","initialRenderRef","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","virtualState","setVirtualState","useState","mountedIndexes","needleChanged","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","prev","onInput","inputElement","setTimeout","matchedValue","tabIndex","clsx","CrossCircle","size","formatMessage","messages","noResultsFound","_","Virtualizer","data","keepMounted","scrollRef","onScroll","startIndex","findItemIndex","scrollOffset","endIndex","viewportSize","visibleIndexes","push","newMountedIndexes","sort","SelectInputItemsCountContext","Provider","SelectInputItemPositionContext","queryNormalized"],"mappings":"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"}
|
|
@@ -1 +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":";;;;;;;;;;;AAuCA,MAAMA,gBAAgB,GAAG,EAAE;AAErB,SAAUC,kBAAkBA,CAAC;EACjCC,SAAS;EACTC,IAAI;EACJC,aAAa;EACbC,KAAK;AACLC,EAAAA,IAAI,GAAG,IAAI;AACXC,EAAAA,OAAO,GAAG,IAAI;EACdC,QAAQ;EACRC,OAAO;AACPC,EAAAA;AAAU,CACc,EAAA;EACxB,MAAM;IAAEC,IAAI;IAAEC,cAAc;AAAEC,IAAAA;GAAS,GAAGC,iBAAW,CAAU;AAC7DC,IAAAA,QAAQ,EAAE,OAAO;IACjBb,SAAS;IACTc,UAAU,EAAE,CACVC,YAAM,CAAC,CAAC,CAAC,EACTC,UAAI,CAAC;AAAEX,MAAAA,OAAO,EAAEP,gBAAgB;AAAEmB,MAAAA,SAAS,EAAE;AAAK,KAAE,CAAC,EACrDC,WAAK,EAAE,EACPC,UAAY,CAAC;AACXd,MAAAA,OAAO,EAAEP,gBAAgB;AACzBsB,MAAAA,KAAK,EAAEA,CAAC;QAAEC,QAAQ;QAAEC,KAAK;AAAEC,QAAAA;AAAe,OAAE,KAAI;AAC9CF,QAAAA,QAAQ,CAACG,QAAQ,CAACC,KAAK,CAACC,WAAW,CAAC,cAAc,EAAE,CAAA,EAAGH,eAAe,CAAA,EAAA,CAAI,CAAC;AAC3EF,QAAAA,QAAQ,CAACG,QAAQ,CAACC,KAAK,CAACC,WAAW,CAAC,SAAS,EAAE,CAAA,EAAGJ,KAAK,CAACK,SAAS,CAACC,KAAK,IAAI,CAAC;AAC9E,MAAA;KACD,CAAC,CACH;AACDC,IAAAA,oBAAoB,EAAEC,gBAAU;IAChC7B,IAAI;IACJ8B,YAAY,EAAGC,KAAK,IAAI;MACtB,IAAI,CAACA,KAAK,EAAE;AACVzB,QAAAA,OAAO,IAAI;AACb,MAAA;AACF,IAAA;AACD,GAAA,CAAC;AAEF,EAAA,MAAM0B,OAAO,GAAGC,gBAAU,CAACvB,OAAO,CAAC;AACnC,EAAA,MAAMwB,IAAI,GAAGC,aAAO,CAACzB,OAAO,CAAC;EAC7B,MAAM;IAAE0B,iBAAiB;AAAEC,IAAAA;GAAkB,GAAGC,qBAAe,CAAC,CAACJ,IAAI,EAAEF,OAAO,CAAC,CAAC;EAEhF,MAAM,CAACO,WAAW,EAAEC,cAAc,CAAC,GAAGC,cAAQ,CAAC,CAAC,CAAC;EAEjD,MAAM;IAAEC,KAAK;AAAEC,IAAAA;GAAY,GAAGC,0BAAQ,EAAE;EAExC,oBACEC,eAAA,CAAAC,mBAAA,EAAA;AAAAzC,IAAAA,QAAA,EAAA,CACGL,IAAI,gBAAG+C,cAAA,CAACC,2BAAa,EAAA,EAAA,CAAG,GAAG,IAAI,
|
|
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 {/* eslint-disable react-hooks/refs -- setReference is a callback ref from floating-ui, safe to pass during render */}\n {renderTrigger({\n ref: refs.setReference,\n getInteractionProps: getReferenceProps,\n })}\n {/* eslint-enable react-hooks/refs */}\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 {/* eslint-disable react-hooks/refs -- setFloating is a callback ref from floating-ui, safe to pass during render */}\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 {/* eslint-enable react-hooks/refs */}\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":";;;;;;;;;;;AAuCA,MAAMA,gBAAgB,GAAG,EAAE;AAErB,SAAUC,kBAAkBA,CAAC;EACjCC,SAAS;EACTC,IAAI;EACJC,aAAa;EACbC,KAAK;AACLC,EAAAA,IAAI,GAAG,IAAI;AACXC,EAAAA,OAAO,GAAG,IAAI;EACdC,QAAQ;EACRC,OAAO;AACPC,EAAAA;AAAU,CACc,EAAA;EACxB,MAAM;IAAEC,IAAI;IAAEC,cAAc;AAAEC,IAAAA;GAAS,GAAGC,iBAAW,CAAU;AAC7DC,IAAAA,QAAQ,EAAE,OAAO;IACjBb,SAAS;IACTc,UAAU,EAAE,CACVC,YAAM,CAAC,CAAC,CAAC,EACTC,UAAI,CAAC;AAAEX,MAAAA,OAAO,EAAEP,gBAAgB;AAAEmB,MAAAA,SAAS,EAAE;AAAK,KAAE,CAAC,EACrDC,WAAK,EAAE,EACPC,UAAY,CAAC;AACXd,MAAAA,OAAO,EAAEP,gBAAgB;AACzBsB,MAAAA,KAAK,EAAEA,CAAC;QAAEC,QAAQ;QAAEC,KAAK;AAAEC,QAAAA;AAAe,OAAE,KAAI;AAC9CF,QAAAA,QAAQ,CAACG,QAAQ,CAACC,KAAK,CAACC,WAAW,CAAC,cAAc,EAAE,CAAA,EAAGH,eAAe,CAAA,EAAA,CAAI,CAAC;AAC3EF,QAAAA,QAAQ,CAACG,QAAQ,CAACC,KAAK,CAACC,WAAW,CAAC,SAAS,EAAE,CAAA,EAAGJ,KAAK,CAACK,SAAS,CAACC,KAAK,IAAI,CAAC;AAC9E,MAAA;KACD,CAAC,CACH;AACDC,IAAAA,oBAAoB,EAAEC,gBAAU;IAChC7B,IAAI;IACJ8B,YAAY,EAAGC,KAAK,IAAI;MACtB,IAAI,CAACA,KAAK,EAAE;AACVzB,QAAAA,OAAO,IAAI;AACb,MAAA;AACF,IAAA;AACD,GAAA,CAAC;AAEF,EAAA,MAAM0B,OAAO,GAAGC,gBAAU,CAACvB,OAAO,CAAC;AACnC,EAAA,MAAMwB,IAAI,GAAGC,aAAO,CAACzB,OAAO,CAAC;EAC7B,MAAM;IAAE0B,iBAAiB;AAAEC,IAAAA;GAAkB,GAAGC,qBAAe,CAAC,CAACJ,IAAI,EAAEF,OAAO,CAAC,CAAC;EAEhF,MAAM,CAACO,WAAW,EAAEC,cAAc,CAAC,GAAGC,cAAQ,CAAC,CAAC,CAAC;EAEjD,MAAM;IAAEC,KAAK;AAAEC,IAAAA;GAAY,GAAGC,0BAAQ,EAAE;EAExC,oBACEC,eAAA,CAAAC,mBAAA,EAAA;AAAAzC,IAAAA,QAAA,EAAA,CACGL,IAAI,gBAAG+C,cAAA,CAACC,2BAAa,EAAA,EAAA,CAAG,GAAG,IAAI,EAE/B/C,aAAa,CAAC;MACbgD,GAAG,EAAEzC,IAAI,CAAC0C,YAAY;AACtBC,MAAAA,mBAAmB,EAAEf;AACtB,KAAA,CAAC,eAGFW,cAAA,CAACK,oBAAc,EAAA;MAAA/C,QAAA,eACb0C,cAAA,CAACM,+BAAa,EAAA;AAACX,QAAAA,KAAK,EAAC,UAAU;AAACC,QAAAA,UAAU,EAAED,KAAK,KAAK,UAAU,GAAGC,UAAU,GAAG,OAAQ;QAAAtC,QAAA,eACtF0C,cAAA,CAACO,kBAAU,EAAA;AACTC,UAAAA,EAAE,EAAC,KAAK;AACRC,UAAAA,IAAI,EAAExD,IAAK;AACXyD,UAAAA,KAAK,EAAC,oBAAoB;AAC1BC,UAAAA,OAAO,EAAC,WAAW;UACnBC,WAAW,EAAEA,MAAK;AAChBnB,YAAAA,cAAc,CAAEoB,IAAI,IAAKA,IAAI,GAAG,CAAC,CAAC;UACpC,CAAE;AACFC,UAAAA,UAAU,EAAEtD,UAAW;UAAAF,QAAA,eAEvB0C,cAAA,CAACe,gBAAU,EAAA;YAAAzD,QAAA,eACT0C,cAAA,CAACgB,0BAAoB,EAAA;AAACrD,cAAAA,OAAO,EAAEA,OAAQ;AAAAL,cAAAA,QAAA,eAErC0C,cAAA,CAAA,KAAA,EAAA;AACoB;gBAClBE,GAAG,EAAEzC,IAAI,CAACwD,WAAY;AACtBC,gBAAAA,SAAS,EAAEC,SAAI,CAAC,yBAAyB,EAAE;kBACzC,kCAAkC,EAAE/D,IAAI,KAAK,IAAI;kBACjD,kCAAkC,EAAEA,IAAI,KAAK;AAC9C,iBAAA,CAAE;AACHqB,gBAAAA,KAAK,EAAEf,cAAe;gBAAA,GAClB4B,gBAAgB,EAAE;AAAAhC,gBAAAA,QAAA,eAGtBwC,eAAA,CAAA,KAAA,EAAA;kBACEoB,SAAS,EAAEC,SAAI,CAAC,eAAe,EAAEhE,KAAK,IAAI,0BAA0B,EAAE;oBACpE,2BAA2B,EAAEE,OAAO,KAAK;AAC1C,mBAAA,CAAE;kBAAAC,QAAA,EAAA,CAEFH,KAAK,gBACJ6C,cAAA,CAAA,IAAA,EAAA;AAAIkB,oBAAAA,SAAS,EAAC,wCAAwC;AAAA5D,oBAAAA,QAAA,EAAEH;AAAK,mBAAK,CAAC,GACjE,IAAI,eACR6C,cAAA,CAAA,KAAA,EAAA;AAAKkB,oBAAAA,SAAS,EAAC,4CAA4C;AAAA5D,oBAAAA,QAAA,EAAEA;AAAQ,mBAAM,CAC7E;iBAAK;AACP,eAAA,EApBOkC,WAoBF;aACe;WACZ;SACF;OACC;AACjB,KAAgB,CAClB;AAAA,GAAA,CAAG;AAEP;;;;"}
|
|
@@ -1 +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":";;;;;;;;;AAuCA,MAAMA,gBAAgB,GAAG,EAAE;AAErB,SAAUC,kBAAkBA,CAAC;EACjCC,SAAS;EACTC,IAAI;EACJC,aAAa;EACbC,KAAK;AACLC,QAAAA,MAAI,GAAG,IAAI;AACXC,EAAAA,OAAO,GAAG,IAAI;EACdC,QAAQ;EACRC,OAAO;AACPC,EAAAA;AAAU,CACc,EAAA;EACxB,MAAM;IAAEC,IAAI;IAAEC,cAAc;AAAEC,IAAAA;GAAS,GAAGC,WAAW,CAAU;AAC7DC,IAAAA,QAAQ,EAAE,OAAO;IACjBb,SAAS;IACTc,UAAU,EAAE,CACVC,MAAM,CAAC,CAAC,CAAC,EACTC,IAAI,CAAC;AAAEX,MAAAA,OAAO,EAAEP,gBAAgB;AAAEmB,MAAAA,SAAS,EAAE;AAAK,KAAE,CAAC,EACrDC,KAAK,EAAE,EACPC,IAAY,CAAC;AACXd,MAAAA,OAAO,EAAEP,gBAAgB;AACzBsB,MAAAA,KAAK,EAAEA,CAAC;QAAEC,QAAQ;QAAEC,KAAK;AAAEC,QAAAA;AAAe,OAAE,KAAI;AAC9CF,QAAAA,QAAQ,CAACG,QAAQ,CAACC,KAAK,CAACC,WAAW,CAAC,cAAc,EAAE,CAAA,EAAGH,eAAe,CAAA,EAAA,CAAI,CAAC;AAC3EF,QAAAA,QAAQ,CAACG,QAAQ,CAACC,KAAK,CAACC,WAAW,CAAC,SAAS,EAAE,CAAA,EAAGJ,KAAK,CAACK,SAAS,CAACC,KAAK,IAAI,CAAC;AAC9E,MAAA;KACD,CAAC,CACH;AACDC,IAAAA,oBAAoB,EAAEC,UAAU;IAChC7B,IAAI;IACJ8B,YAAY,EAAGC,KAAK,IAAI;MACtB,IAAI,CAACA,KAAK,EAAE;AACVzB,QAAAA,OAAO,IAAI;AACb,MAAA;AACF,IAAA;AACD,GAAA,CAAC;AAEF,EAAA,MAAM0B,OAAO,GAAGC,UAAU,CAACvB,OAAO,CAAC;AACnC,EAAA,MAAMwB,IAAI,GAAGC,OAAO,CAACzB,OAAO,CAAC;EAC7B,MAAM;IAAE0B,iBAAiB;AAAEC,IAAAA;GAAkB,GAAGC,eAAe,CAAC,CAACJ,IAAI,EAAEF,OAAO,CAAC,CAAC;EAEhF,MAAM,CAACO,WAAW,EAAEC,cAAc,CAAC,GAAGC,QAAQ,CAAC,CAAC,CAAC;EAEjD,MAAM;IAAEC,KAAK;AAAEC,IAAAA;GAAY,GAAGC,QAAQ,EAAE;EAExC,oBACEC,IAAA,CAAAC,QAAA,EAAA;AAAAzC,IAAAA,QAAA,EAAA,CACGL,IAAI,gBAAG+C,GAAA,CAACC,aAAa,EAAA,EAAA,CAAG,GAAG,IAAI,
|
|
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 {/* eslint-disable react-hooks/refs -- setReference is a callback ref from floating-ui, safe to pass during render */}\n {renderTrigger({\n ref: refs.setReference,\n getInteractionProps: getReferenceProps,\n })}\n {/* eslint-enable react-hooks/refs */}\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 {/* eslint-disable react-hooks/refs -- setFloating is a callback ref from floating-ui, safe to pass during render */}\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 {/* eslint-enable react-hooks/refs */}\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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"}
|