npm - @transferwise/components - Versions diffs - 46.140.1 → 46.141.0 - Mend

@transferwise/components 46.140.1 → 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.

Files changed (134) hide show

package/build/inputs/SelectInput/Options/SelectInputOptions.mjs.map CHANGED Viewed

	@@ -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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"}

package/build/inputs/SelectInput/Popover/SelectInputPopover.js.map CHANGED Viewed

	@@ -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,~~EAC~~/B/C,aAAa,CAAC;MACbgD,GAAG,EAAEzC,IAAI,CAAC0C,YAAY;AACtBC,MAAAA,mBAAmB,EAAEf;AACtB,KAAA,CAAC,~~eAEFW~~,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,~~eACrC0C~~,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,~~eAEtBwC~~,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,~~EAnBOkC~~,~~WAmBF~~;aACe;WACZ;SACF;OACC;AACjB,KAAgB,CAClB;AAAA,GAAA,CAAG;AAEP;;;;"}
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":"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"}

package/build/inputs/SelectInput/Popover/SelectInputPopover.mjs.map CHANGED Viewed

	@@ -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,~~EAC~~/B/C,aAAa,CAAC;MACbgD,GAAG,EAAEzC,IAAI,CAAC0C,YAAY;AACtBC,MAAAA,mBAAmB,EAAEf;AACtB,KAAA,CAAC,~~eAEFW~~,GAAA,CAACK,cAAc,EAAA;MAAA/C,QAAA,eACb0C,GAAA,CAACM,aAAa,EAAA;AAACX,QAAAA,KAAK,EAAC,UAAU;AAACC,QAAAA,UAAU,EAAED,KAAK,KAAK,UAAU,GAAGC,UAAU,GAAG,OAAQ;QAAAtC,QAAA,eACtF0C,GAAA,CAACO,UAAU,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,GAAA,CAACe,UAAU,EAAA;YAAAzD,QAAA,eACT0C,GAAA,CAACgB,oBAAoB,EAAA;AAACrD,cAAAA,OAAO,EAAEA,OAAQ;AAAAL,cAAAA,QAAA,~~eACrC0C~~,GAAA,CAAA,KAAA,EAAA;AACoB;gBAClBE,GAAG,EAAEzC,IAAI,CAACwD,WAAY;AACtBC,gBAAAA,SAAS,EAAEC,IAAI,CAAC,yBAAyB,EAAE;kBACzC,kCAAkC,EAAE/D,MAAI,KAAK,IAAI;kBACjD,kCAAkC,EAAEA,MAAI,KAAK;AAC9C,iBAAA,CAAE;AACHqB,gBAAAA,KAAK,EAAEf,cAAe;gBAAA,GAClB4B,gBAAgB,EAAE;AAAAhC,gBAAAA,QAAA,~~eAEtBwC~~,IAAA,CAAA,KAAA,EAAA;kBACEoB,SAAS,EAAEC,IAAI,CAAC,eAAe,EAAEhE,KAAK,IAAI,0BAA0B,EAAE;oBACpE,2BAA2B,EAAEE,OAAO,KAAK;AAC1C,mBAAA,CAAE;kBAAAC,QAAA,EAAA,CAEFH,KAAK,gBACJ6C,GAAA,CAAA,IAAA,EAAA;AAAIkB,oBAAAA,SAAS,EAAC,wCAAwC;AAAA5D,oBAAAA,QAAA,EAAEH;AAAK,mBAAK,CAAC,GACjE,IAAI,eACR6C,GAAA,CAAA,KAAA,EAAA;AAAKkB,oBAAAA,SAAS,EAAC,4CAA4C;AAAA5D,oBAAAA,QAAA,EAAEA;AAAQ,mBAAM,CAC7E;iBAAK;AACP,eAAA,~~EAnBOkC~~,~~WAmBF~~;aACe;WACZ;SACF;OACC;AACjB,KAAgB,CAClB;AAAA,GAAA,CAAG;AAEP;;;;"}
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":";;;;;;;;;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,EAE/B/C,aAAa,CAAC;MACbgD,GAAG,EAAEzC,IAAI,CAAC0C,YAAY;AACtBC,MAAAA,mBAAmB,EAAEf;AACtB,KAAA,CAAC,eAGFW,GAAA,CAACK,cAAc,EAAA;MAAA/C,QAAA,eACb0C,GAAA,CAACM,aAAa,EAAA;AAACX,QAAAA,KAAK,EAAC,UAAU;AAACC,QAAAA,UAAU,EAAED,KAAK,KAAK,UAAU,GAAGC,UAAU,GAAG,OAAQ;QAAAtC,QAAA,eACtF0C,GAAA,CAACO,UAAU,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,GAAA,CAACe,UAAU,EAAA;YAAAzD,QAAA,eACT0C,GAAA,CAACgB,oBAAoB,EAAA;AAACrD,cAAAA,OAAO,EAAEA,OAAQ;AAAAL,cAAAA,QAAA,eAErC0C,GAAA,CAAA,KAAA,EAAA;AACoB;gBAClBE,GAAG,EAAEzC,IAAI,CAACwD,WAAY;AACtBC,gBAAAA,SAAS,EAAEC,IAAI,CAAC,yBAAyB,EAAE;kBACzC,kCAAkC,EAAE/D,MAAI,KAAK,IAAI;kBACjD,kCAAkC,EAAEA,MAAI,KAAK;AAC9C,iBAAA,CAAE;AACHqB,gBAAAA,KAAK,EAAEf,cAAe;gBAAA,GAClB4B,gBAAgB,EAAE;AAAAhC,gBAAAA,QAAA,eAGtBwC,IAAA,CAAA,KAAA,EAAA;kBACEoB,SAAS,EAAEC,IAAI,CAAC,eAAe,EAAEhE,KAAK,IAAI,0BAA0B,EAAE;oBACpE,2BAA2B,EAAEE,OAAO,KAAK;AAC1C,mBAAA,CAAE;kBAAAC,QAAA,EAAA,CAEFH,KAAK,gBACJ6C,GAAA,CAAA,IAAA,EAAA;AAAIkB,oBAAAA,SAAS,EAAC,wCAAwC;AAAA5D,oBAAAA,QAAA,EAAEH;AAAK,mBAAK,CAAC,GACjE,IAAI,eACR6C,GAAA,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;;;;"}

package/build/inputs/SelectInput/SelectInput.js CHANGED Viewed

@@ -70,24 +70,26 @@ function SelectInput({
     } else {
       initialized.current = true;
     }
-  }, [handleClose, handleOpen, open]);
+  }, [open]);
   const [filterQuery, _setFilterQuery] = React.useState('');
   const deferredFilterQuery = React.useDeferredValue(filterQuery);
-  const setFilterQuery = useEffectEvent.useEffectEvent(query => {
+  const previousFilterQueryRef = React.useRef(filterQuery);
+  const setFilterQuery = React.useCallback(query => {
     _setFilterQuery(query);
-    if (query !== filterQuery) {
+    if (query !== previousFilterQueryRef.current) {
       onFilterChange({
         query,
         queryNormalized: query ? SelectInput_utils.searchableString(query) : null
       });
+      previousFilterQueryRef.current = query;
     }
-  });
+  }, [onFilterChange]);
   const internalTriggerRef = React.useRef(null);
-  const screenSm = useScreenSize.useScreenSize(breakpoint.Breakpoint.SMALL);
-  const OptionsOverlay = screenSm ? SelectInputPopover.SelectInputPopover : SelectInputBottomSheet.SelectInputBottomSheet;
   const searchInputRef = React.useRef(null);
   const listboxRef = React.useRef(null);
   const controllerRef = filterable ? searchInputRef : listboxRef;
+  const screenSm = useScreenSize.useScreenSize(breakpoint.Breakpoint.SMALL);
+  const OptionsOverlay = screenSm ? SelectInputPopover.SelectInputPopover : SelectInputBottomSheet.SelectInputBottomSheet;
   /**
    * Attempts to resolve the `listbox` label
    * @see https://storybook.wise.design/?path=/docs/forms-selectinput-accessibility--docs#labelling

package/build/inputs/SelectInput/SelectInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectInput.js","sources":["../../../src/inputs/SelectInput/SelectInput.tsx"],"sourcesContent":["import mergeProps from 'merge-props';\nimport { useEffect, useRef, useState, useDeferredValue } from 'react';\nimport { Listbox as ListboxBase } from '@headlessui/react';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\nimport { Breakpoint } from '../../common/propsValues/breakpoint';\nimport { useEffectEvent } from '../../common/hooks/useEffectEvent';\nimport { useInputAttributes } from '../contexts';\n\nimport { SelectInputBottomSheet } from './BottomSheet';\nimport { SelectInputPopover } from './Popover';\nimport { SelectInputOptions } from './Options';\nimport { DefaultRenderTrigger } from './DefaultRenderTrigger';\n\nimport {\n SelectInputOptionContentWithinTriggerContext,\n SelectInputTriggerButtonPropsContext,\n} from './SelectInput.contexts';\nimport { searchableString, sortByRelevance } from './SelectInput.utils';\nimport { SelectInputProps } from './SelectInput.types';\n\nconst noop = () => {};\n\n/*\n SelectInput component allows users to select an option from a dropdown list.\n * Supports filtering, multiple selection, and customization.\n /\nexport function SelectInput<T = string, M extends boolean = false>({\n id: idProp,\n parentId,\n name,\n multiple,\n placeholder,\n autocomplete,\n items,\n defaultValue,\n value: controlledValue,\n compareValues,\n renderValue = String,\n renderFooter,\n renderTrigger = DefaultRenderTrigger,\n filterable,\n filterPlaceholder,\n sortFilteredOptions,\n disabled,\n size = 'md',\n className,\n UNSAFE_triggerButtonProps,\n triggerRef: externalTriggerRef,\n onFilterChange = noop,\n onChange,\n onOpen,\n onClose,\n onClear,\n}: SelectInputProps<T, M>) {\n const inputAttributes = useInputAttributes({ nonLabelable: true });\n const id = idProp ?? inputAttributes.id;\n\n const [open, setOpen] = useState(false);\n\n const initialized = useRef(false);\n const handleClose = useEffectEvent(onClose ?? (() => {}));\n const handleOpen = useEffectEvent(onOpen ?? (() => {}));\n useEffect(() => {\n if (initialized.current) {\n if (open) {\n handleOpen?.();\n } else {\n handleClose?.();\n }\n } else {\n initialized.current = true;\n }\n }, [handleClose, handleOpen, open]);\n\n const [filterQuery, _setFilterQuery] = useState('');\n const deferredFilterQuery = useDeferredValue(filterQuery);\n const setFilterQuery = useEffectEvent((query: string) => {\n _setFilterQuery(query);\n if (query !== filterQuery) {\n onFilterChange({\n query,\n queryNormalized: query ? searchableString(query) : null,\n });\n }\n });\n\n const internalTriggerRef = useRef<HTMLButtonElement \| null>(null);\n\n const screenSm = useScreenSize(Breakpoint.SMALL);\n const OptionsOverlay = screenSm ? SelectInputPopover : SelectInputBottomSheet;\n\n const searchInputRef = useRef<HTMLInputElement>(null);\n const listboxRef = useRef<HTMLDivElement>(null);\n const controllerRef = filterable ? searchInputRef : listboxRef;\n\n /\n Attempts to resolve the `listbox` label\n * @see https://storybook.wise.design/?path=/docs/forms-selectinput-accessibility--docs#labelling\n */\n const getListBoxLabelProps = (): {\n listBoxLabel?: string;\n listBoxLabelledBy?: string;\n } => {\n if (UNSAFE_triggerButtonProps?.['aria-label']) {\n return {\n listBoxLabel: UNSAFE_triggerButtonProps['aria-label'],\n };\n }\n\n if (UNSAFE_triggerButtonProps?.['aria-labelledby']) {\n return {\n listBoxLabelledBy: UNSAFE_triggerButtonProps['aria-labelledby'],\n };\n }\n\n if (inputAttributes['aria-labelledby']) {\n return {\n listBoxLabelledBy: inputAttributes['aria-labelledby'],\n };\n }\n\n return {};\n };\n\n return (\n <ListboxBase\n name={name}\n multiple={multiple}\n defaultValue={defaultValue as M extends true ? T[] : T}\n value={controlledValue as M extends true ? T[] : T}\n by={compareValues}\n disabled={disabled}\n onChange={\n ((value) => {\n if (!multiple) {\n setOpen(false);\n }\n onChange?.(value);\n }) satisfies SelectInputProps<T, M>['onChange']\n }\n >\n {({ disabled: uiDisabled, value }) => {\n const placeholderShown =\n multiple && Array.isArray(value) ? value.length === 0 : value == null;\n return (\n <OptionsOverlay\n placement=\"bottom-start\"\n open={open}\n renderTrigger={({ ref, getInteractionProps }) => (\n <SelectInputTriggerButtonPropsContext.Provider\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n value={{\n ref: (node) => {\n ref(node);\n if (externalTriggerRef) {\n // eslint-disable-next-line no-param-reassign\n externalTriggerRef.current = node;\n } else {\n internalTriggerRef.current = node;\n }\n },\n size,\n ...inputAttributes,\n ...UNSAFE_triggerButtonProps,\n id,\n ...mergeProps(\n {\n onClick: () => {\n setOpen((prev) => !prev);\n },\n onKeyDown: (event: React.KeyboardEvent) => {\n if (\n event.key === ' ' \|\|\n event.key === 'Enter' \|\|\n event.key === 'ArrowDown' \|\|\n event.key === 'ArrowUp'\n ) {\n setOpen((prev) => !prev);\n }\n },\n },\n getInteractionProps(),\n ),\n }}\n >\n {renderTrigger({\n content: !placeholderShown ? (\n <SelectInputOptionContentWithinTriggerContext.Provider value>\n {multiple && Array.isArray(value)\n ? (value as readonly NonNullable<T>[])\n .map((option) => renderValue(option, true))\n .filter((node) => node != null)\n .join(', ')\n : renderValue(value as NonNullable<T>, true)}\n </SelectInputOptionContentWithinTriggerContext.Provider>\n ) : (\n placeholder\n ),\n placeholderShown,\n clear:\n onClear != null\n ? () => {\n onClear();\n (externalTriggerRef?.current ?? internalTriggerRef.current)?.focus({\n preventScroll: true,\n });\n }\n : undefined,\n disabled: uiDisabled,\n size,\n className,\n })}\n </SelectInputTriggerButtonPropsContext.Provider>\n )}\n initialFocusRef={controllerRef}\n size={filterable ? 'lg' : 'md'}\n padding=\"none\"\n onClose={() => {\n setOpen(false);\n }}\n onCloseEnd={() => {\n setFilterQuery('');\n }}\n >\n <SelectInputOptions\n id={id ? `${id}Search` : undefined}\n parentId={parentId}\n items={items}\n compareValues={compareValues}\n renderValue={renderValue}\n renderFooter={renderFooter}\n filterable={filterable}\n filterPlaceholder={filterPlaceholder}\n sortFilteredOptions={sortFilteredOptions}\n searchInputRef={searchInputRef}\n listboxRef={listboxRef}\n filterQuery={deferredFilterQuery}\n autocomplete={autocomplete}\n name={name}\n onFilterChange={setFilterQuery}\n onAutocompleteSelect={(matchedValue) => {\n onChange?.(matchedValue as M extends true ? T[] : T);\n if (!multiple) {\n setOpen(false);\n }\n }}\n {...getListBoxLabelProps()}\n />\n </OptionsOverlay>\n );\n }}\n </ListboxBase>\n );\n}\n\n// Attach sortByRelevance to the component for convenience\nSelectInput.sortByRelevance = sortByRelevance;\n"],"names":["noop","SelectInput","id","idProp","parentId","name","multiple","placeholder","autocomplete","items","defaultValue","value","controlledValue","compareValues","renderValue","String","renderFooter","renderTrigger","DefaultRenderTrigger","filterable","filterPlaceholder","sortFilteredOptions","disabled","size","className","UNSAFE_triggerButtonProps","triggerRef","externalTriggerRef","onFilterChange","onChange","onOpen","onClose","onClear","inputAttributes","useInputAttributes","nonLabelable","open","setOpen","useState","initialized","useRef","handleClose","useEffectEvent","handleOpen","useEffect","current","filterQuery","_setFilterQuery","deferredFilterQuery","useDeferredValue","setFilterQuery","query","queryNormalized","searchableString","internalTriggerRef","screenSm","useScreenSize","Breakpoint","SMALL","OptionsOverlay","SelectInputPopover","SelectInputBottomSheet","searchInputRef","listboxRef","controllerRef","getListBoxLabelProps","listBoxLabel","listBoxLabelledBy","_jsx","ListboxBase","by","children","uiDisabled","placeholderShown","Array","isArray","length","placement","ref","getInteractionProps","SelectInputTriggerButtonPropsContext","Provider","node","mergeProps","onClick","prev","onKeyDown","event","key","content","SelectInputOptionContentWithinTriggerContext","map","option","filter","join","clear","focus","preventScroll","undefined","initialFocusRef","padding","onCloseEnd","SelectInputOptions","onAutocompleteSelect","matchedValue","sortByRelevance"],"mappings":"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"}
1	+ {"version":3,"file":"SelectInput.js","sources":["../../../src/inputs/SelectInput/SelectInput.tsx"],"sourcesContent":["import mergeProps from 'merge-props';\nimport { useCallback, useEffect, useRef, useState, useDeferredValue } from 'react';\nimport { Listbox as ListboxBase } from '@headlessui/react';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\nimport { Breakpoint } from '../../common/propsValues/breakpoint';\nimport { useEffectEvent } from '../../common/hooks/useEffectEvent';\nimport { useInputAttributes } from '../contexts';\n\nimport { SelectInputBottomSheet } from './BottomSheet';\nimport { SelectInputPopover } from './Popover';\nimport { SelectInputOptions } from './Options';\nimport { DefaultRenderTrigger } from './DefaultRenderTrigger';\n\nimport {\n SelectInputOptionContentWithinTriggerContext,\n SelectInputTriggerButtonPropsContext,\n} from './SelectInput.contexts';\nimport { searchableString, sortByRelevance } from './SelectInput.utils';\nimport { SelectInputProps } from './SelectInput.types';\n\nconst noop = () => {};\n\n/*\n SelectInput component allows users to select an option from a dropdown list.\n * Supports filtering, multiple selection, and customization.\n /\nexport function SelectInput<T = string, M extends boolean = false>({\n id: idProp,\n parentId,\n name,\n multiple,\n placeholder,\n autocomplete,\n items,\n defaultValue,\n value: controlledValue,\n compareValues,\n renderValue = String,\n renderFooter,\n renderTrigger = DefaultRenderTrigger,\n filterable,\n filterPlaceholder,\n sortFilteredOptions,\n disabled,\n size = 'md',\n className,\n UNSAFE_triggerButtonProps,\n triggerRef: externalTriggerRef,\n onFilterChange = noop,\n onChange,\n onOpen,\n onClose,\n onClear,\n}: SelectInputProps<T, M>) {\n const inputAttributes = useInputAttributes({ nonLabelable: true });\n const id = idProp ?? inputAttributes.id;\n\n const [open, setOpen] = useState(false);\n\n const initialized = useRef(false);\n const handleClose = useEffectEvent(onClose ?? (() => {}));\n const handleOpen = useEffectEvent(onOpen ?? (() => {}));\n\n useEffect(() => {\n if (initialized.current) {\n if (open) {\n handleOpen?.();\n } else {\n handleClose?.();\n }\n } else {\n initialized.current = true;\n }\n }, [open]);\n\n const [filterQuery, _setFilterQuery] = useState('');\n const deferredFilterQuery = useDeferredValue(filterQuery);\n const previousFilterQueryRef = useRef(filterQuery);\n\n const setFilterQuery = useCallback(\n (query: string) => {\n _setFilterQuery(query);\n if (query !== previousFilterQueryRef.current) {\n onFilterChange({\n query,\n queryNormalized: query ? searchableString(query) : null,\n });\n previousFilterQueryRef.current = query;\n }\n },\n [onFilterChange],\n );\n\n const internalTriggerRef = useRef<HTMLButtonElement \| null>(null);\n const searchInputRef = useRef<HTMLInputElement>(null);\n const listboxRef = useRef<HTMLDivElement>(null);\n const controllerRef = filterable ? searchInputRef : listboxRef;\n\n const screenSm = useScreenSize(Breakpoint.SMALL);\n const OptionsOverlay = screenSm ? SelectInputPopover : SelectInputBottomSheet;\n\n /\n Attempts to resolve the `listbox` label\n * @see https://storybook.wise.design/?path=/docs/forms-selectinput-accessibility--docs#labelling\n */\n const getListBoxLabelProps = (): {\n listBoxLabel?: string;\n listBoxLabelledBy?: string;\n } => {\n if (UNSAFE_triggerButtonProps?.['aria-label']) {\n return {\n listBoxLabel: UNSAFE_triggerButtonProps['aria-label'],\n };\n }\n\n if (UNSAFE_triggerButtonProps?.['aria-labelledby']) {\n return {\n listBoxLabelledBy: UNSAFE_triggerButtonProps['aria-labelledby'],\n };\n }\n\n if (inputAttributes['aria-labelledby']) {\n return {\n listBoxLabelledBy: inputAttributes['aria-labelledby'],\n };\n }\n\n return {};\n };\n\n return (\n <ListboxBase\n name={name}\n multiple={multiple}\n defaultValue={defaultValue as M extends true ? T[] : T}\n value={controlledValue as M extends true ? T[] : T}\n by={compareValues}\n disabled={disabled}\n onChange={\n ((value) => {\n if (!multiple) {\n setOpen(false);\n }\n onChange?.(value);\n }) satisfies SelectInputProps<T, M>['onChange']\n }\n >\n {({ disabled: uiDisabled, value }) => {\n const placeholderShown =\n multiple && Array.isArray(value) ? value.length === 0 : value == null;\n return (\n <OptionsOverlay\n placement=\"bottom-start\"\n open={open}\n renderTrigger={({ ref, getInteractionProps }) => (\n <SelectInputTriggerButtonPropsContext.Provider\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n value={{\n ref: (node) => {\n ref(node);\n if (externalTriggerRef) {\n // eslint-disable-next-line no-param-reassign\n externalTriggerRef.current = node;\n } else {\n internalTriggerRef.current = node;\n }\n },\n size,\n ...inputAttributes,\n ...UNSAFE_triggerButtonProps,\n id,\n ...mergeProps(\n {\n onClick: () => {\n setOpen((prev) => !prev);\n },\n onKeyDown: (event: React.KeyboardEvent) => {\n if (\n event.key === ' ' \|\|\n event.key === 'Enter' \|\|\n event.key === 'ArrowDown' \|\|\n event.key === 'ArrowUp'\n ) {\n setOpen((prev) => !prev);\n }\n },\n },\n getInteractionProps(),\n ),\n }}\n >\n {renderTrigger({\n content: !placeholderShown ? (\n <SelectInputOptionContentWithinTriggerContext.Provider value>\n {multiple && Array.isArray(value)\n ? (value as readonly NonNullable<T>[])\n .map((option) => renderValue(option, true))\n .filter((node) => node != null)\n .join(', ')\n : renderValue(value as NonNullable<T>, true)}\n </SelectInputOptionContentWithinTriggerContext.Provider>\n ) : (\n placeholder\n ),\n placeholderShown,\n clear:\n onClear != null\n ? () => {\n onClear();\n (externalTriggerRef?.current ?? internalTriggerRef.current)?.focus({\n preventScroll: true,\n });\n }\n : undefined,\n disabled: uiDisabled,\n size,\n className,\n })}\n </SelectInputTriggerButtonPropsContext.Provider>\n )}\n initialFocusRef={controllerRef}\n size={filterable ? 'lg' : 'md'}\n padding=\"none\"\n onClose={() => {\n setOpen(false);\n }}\n onCloseEnd={() => {\n setFilterQuery('');\n }}\n >\n <SelectInputOptions\n id={id ? `${id}Search` : undefined}\n parentId={parentId}\n items={items}\n compareValues={compareValues}\n renderValue={renderValue}\n renderFooter={renderFooter}\n filterable={filterable}\n filterPlaceholder={filterPlaceholder}\n sortFilteredOptions={sortFilteredOptions}\n searchInputRef={searchInputRef}\n listboxRef={listboxRef}\n filterQuery={deferredFilterQuery}\n autocomplete={autocomplete}\n name={name}\n onFilterChange={setFilterQuery}\n onAutocompleteSelect={(matchedValue) => {\n onChange?.(matchedValue as M extends true ? T[] : T);\n if (!multiple) {\n setOpen(false);\n }\n }}\n {...getListBoxLabelProps()}\n />\n </OptionsOverlay>\n );\n }}\n </ListboxBase>\n );\n}\n\n// Attach sortByRelevance to the component for convenience\nSelectInput.sortByRelevance = sortByRelevance;\n"],"names":["noop","SelectInput","id","idProp","parentId","name","multiple","placeholder","autocomplete","items","defaultValue","value","controlledValue","compareValues","renderValue","String","renderFooter","renderTrigger","DefaultRenderTrigger","filterable","filterPlaceholder","sortFilteredOptions","disabled","size","className","UNSAFE_triggerButtonProps","triggerRef","externalTriggerRef","onFilterChange","onChange","onOpen","onClose","onClear","inputAttributes","useInputAttributes","nonLabelable","open","setOpen","useState","initialized","useRef","handleClose","useEffectEvent","handleOpen","useEffect","current","filterQuery","_setFilterQuery","deferredFilterQuery","useDeferredValue","previousFilterQueryRef","setFilterQuery","useCallback","query","queryNormalized","searchableString","internalTriggerRef","searchInputRef","listboxRef","controllerRef","screenSm","useScreenSize","Breakpoint","SMALL","OptionsOverlay","SelectInputPopover","SelectInputBottomSheet","getListBoxLabelProps","listBoxLabel","listBoxLabelledBy","_jsx","ListboxBase","by","children","uiDisabled","placeholderShown","Array","isArray","length","placement","ref","getInteractionProps","SelectInputTriggerButtonPropsContext","Provider","node","mergeProps","onClick","prev","onKeyDown","event","key","content","SelectInputOptionContentWithinTriggerContext","map","option","filter","join","clear","focus","preventScroll","undefined","initialFocusRef","padding","onCloseEnd","SelectInputOptions","onAutocompleteSelect","matchedValue","sortByRelevance"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAoBA,MAAMA,IAAI,GAAGA,MAAK,CAAE,CAAC;AAErB;;;AAGG;AACG,SAAUC,WAAWA,CAAwC;AACjEC,EAAAA,EAAE,EAAEC,MAAM;EACVC,QAAQ;EACRC,IAAI;EACJC,QAAQ;EACRC,WAAW;EACXC,YAAY;EACZC,KAAK;EACLC,YAAY;AACZC,EAAAA,KAAK,EAAEC,eAAe;EACtBC,aAAa;AACbC,EAAAA,WAAW,GAAGC,MAAM;EACpBC,YAAY;AACZC,EAAAA,aAAa,GAAGC,oDAAoB;EACpCC,UAAU;EACVC,iBAAiB;EACjBC,mBAAmB;EACnBC,QAAQ;AACRC,EAAAA,IAAI,GAAG,IAAI;EACXC,SAAS;EACTC,yBAAyB;AACzBC,EAAAA,UAAU,EAAEC,kBAAkB;AAC9BC,EAAAA,cAAc,GAAG5B,IAAI;EACrB6B,QAAQ;EACRC,MAAM;EACNC,OAAO;AACPC,EAAAA;AAAO,CACgB,EAAA;EACvB,MAAMC,eAAe,GAAGC,2BAAkB,CAAC;AAAEC,IAAAA,YAAY,EAAE;AAAI,GAAE,CAAC;AAClE,EAAA,MAAMjC,EAAE,GAAGC,MAAM,IAAI8B,eAAe,CAAC/B,EAAE;EAEvC,MAAM,CAACkC,IAAI,EAAEC,OAAO,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;AAEvC,EAAA,MAAMC,WAAW,GAAGC,YAAM,CAAC,KAAK,CAAC;EACjC,MAAMC,WAAW,GAAGC,6BAAc,CAACX,OAAO,KAAK,MAAK,CAAE,CAAC,CAAC,CAAC;EACzD,MAAMY,UAAU,GAAGD,6BAAc,CAACZ,MAAM,KAAK,MAAK,CAAE,CAAC,CAAC,CAAC;AAEvDc,EAAAA,eAAS,CAAC,MAAK;IACb,IAAIL,WAAW,CAACM,OAAO,EAAE;AACvB,MAAA,IAAIT,IAAI,EAAE;AACRO,QAAAA,UAAU,IAAI;AAChB,MAAA,CAAC,MAAM;AACLF,QAAAA,WAAW,IAAI;AACjB,MAAA;AACF,IAAA,CAAC,MAAM;MACLF,WAAW,CAACM,OAAO,GAAG,IAAI;AAC5B,IAAA;AACF,EAAA,CAAC,EAAE,CAACT,IAAI,CAAC,CAAC;EAEV,MAAM,CAACU,WAAW,EAAEC,eAAe,CAAC,GAAGT,cAAQ,CAAC,EAAE,CAAC;AACnD,EAAA,MAAMU,mBAAmB,GAAGC,sBAAgB,CAACH,WAAW,CAAC;AACzD,EAAA,MAAMI,sBAAsB,GAAGV,YAAM,CAACM,WAAW,CAAC;AAElD,EAAA,MAAMK,cAAc,GAAGC,iBAAW,CAC/BC,KAAa,IAAI;IAChBN,eAAe,CAACM,KAAK,CAAC;AACtB,IAAA,IAAIA,KAAK,KAAKH,sBAAsB,CAACL,OAAO,EAAE;AAC5CjB,MAAAA,cAAc,CAAC;QACbyB,KAAK;AACLC,QAAAA,eAAe,EAAED,KAAK,GAAGE,kCAAgB,CAACF,KAAK,CAAC,GAAG;AACpD,OAAA,CAAC;MACFH,sBAAsB,CAACL,OAAO,GAAGQ,KAAK;AACxC,IAAA;AACF,EAAA,CAAC,EACD,CAACzB,cAAc,CAAC,CACjB;AAED,EAAA,MAAM4B,kBAAkB,GAAGhB,YAAM,CAA2B,IAAI,CAAC;AACjE,EAAA,MAAMiB,cAAc,GAAGjB,YAAM,CAAmB,IAAI,CAAC;AACrD,EAAA,MAAMkB,UAAU,GAAGlB,YAAM,CAAiB,IAAI,CAAC;AAC/C,EAAA,MAAMmB,aAAa,GAAGxC,UAAU,GAAGsC,cAAc,GAAGC,UAAU;AAE9D,EAAA,MAAME,QAAQ,GAAGC,2BAAa,CAACC,qBAAU,CAACC,KAAK,CAAC;AAChD,EAAA,MAAMC,cAAc,GAAGJ,QAAQ,GAAGK,qCAAkB,GAAGC,6CAAsB;AAE7E;;;AAGG;EACH,MAAMC,oBAAoB,GAAGA,MAGzB;AACF,IAAA,IAAI1C,yBAAyB,GAAG,YAAY,CAAC,EAAE;MAC7C,OAAO;QACL2C,YAAY,EAAE3C,yBAAyB,CAAC,YAAY;OACrD;AACH,IAAA;AAEA,IAAA,IAAIA,yBAAyB,GAAG,iBAAiB,CAAC,EAAE;MAClD,OAAO;QACL4C,iBAAiB,EAAE5C,yBAAyB,CAAC,iBAAiB;OAC/D;AACH,IAAA;AAEA,IAAA,IAAIQ,eAAe,CAAC,iBAAiB,CAAC,EAAE;MACtC,OAAO;QACLoC,iBAAiB,EAAEpC,eAAe,CAAC,iBAAiB;OACrD;AACH,IAAA;AAEA,IAAA,OAAO,EAAE;EACX,CAAC;EAED,oBACEqC,cAAA,CAACC,aAAW,EAAA;AACVlE,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,QAAQ,EAAEA,QAAS;AACnBI,IAAAA,YAAY,EAAEA,YAAyC;AACvDC,IAAAA,KAAK,EAAEC,eAA4C;AACnD4D,IAAAA,EAAE,EAAE3D,aAAc;AAClBS,IAAAA,QAAQ,EAAEA,QAAS;IACnBO,QAAQ,EACJlB,KAAK,IAAI;MACT,IAAI,CAACL,QAAQ,EAAE;QACb+B,OAAO,CAAC,KAAK,CAAC;AAChB,MAAA;MACAR,QAAQ,GAAGlB,KAAK,CAAC;IACnB,CACD;AAAA8D,IAAAA,QAAA,EAEAA,CAAC;AAAEnD,MAAAA,QAAQ,EAAEoD,UAAU;AAAE/D,MAAAA;AAAK,KAAE,KAAI;AACnC,MAAA,MAAMgE,gBAAgB,GACpBrE,QAAQ,IAAIsE,KAAK,CAACC,OAAO,CAAClE,KAAK,CAAC,GAAGA,KAAK,CAACmE,MAAM,KAAK,CAAC,GAAGnE,KAAK,IAAI,IAAI;MACvE,oBACE2D,cAAA,CAACN,cAAc,EAAA;AACbe,QAAAA,SAAS,EAAC,cAAc;AACxB3C,QAAAA,IAAI,EAAEA,IAAK;AACXnB,QAAAA,aAAa,EAAEA,CAAC;UAAE+D,GAAG;AAAEC,UAAAA;AAAmB,SAAE,kBAC1CX,cAAA,CAACY,yDAAoC,CAACC,QAAQ,EAAA;AAC5C;AACAxE,UAAAA,KAAK,EAAE;YACLqE,GAAG,EAAGI,IAAI,IAAI;cACZJ,GAAG,CAACI,IAAI,CAAC;AACT,cAAA,IAAIzD,kBAAkB,EAAE;AACtB;gBACAA,kBAAkB,CAACkB,OAAO,GAAGuC,IAAI;AACnC,cAAA,CAAC,MAAM;gBACL5B,kBAAkB,CAACX,OAAO,GAAGuC,IAAI;AACnC,cAAA;YACF,CAAC;YACD7D,IAAI;AACJ,YAAA,GAAGU,eAAe;AAClB,YAAA,GAAGR,yBAAyB;YAC5BvB,EAAE;AACF,YAAA,GAAGmF,2BAAU,CACX;cACEC,OAAO,EAAEA,MAAK;AACZjD,gBAAAA,OAAO,CAAEkD,IAAI,IAAK,CAACA,IAAI,CAAC;cAC1B,CAAC;cACDC,SAAS,EAAGC,KAA0B,IAAI;gBACxC,IACEA,KAAK,CAACC,GAAG,KAAK,GAAG,IACjBD,KAAK,CAACC,GAAG,KAAK,OAAO,IACrBD,KAAK,CAACC,GAAG,KAAK,WAAW,IACzBD,KAAK,CAACC,GAAG,KAAK,SAAS,EACvB;AACArD,kBAAAA,OAAO,CAAEkD,IAAI,IAAK,CAACA,IAAI,CAAC;AAC1B,gBAAA;AACF,cAAA;aACD,EACDN,mBAAmB,EAAE;WAEvB;UAAAR,QAAA,EAEDxD,aAAa,CAAC;YACb0E,OAAO,EAAE,CAAChB,gBAAgB,gBACxBL,cAAA,CAACsB,iEAA4C,CAACT,QAAQ,EAAA;cAACxE,KAAK,EAAA,IAAA;AAAA8D,cAAAA,QAAA,EACzDnE,QAAQ,IAAIsE,KAAK,CAACC,OAAO,CAAClE,KAAK,CAAC,GAC5BA,KAAmC,CACjCkF,GAAG,CAAEC,MAAM,IAAKhF,WAAW,CAACgF,MAAM,EAAE,IAAI,CAAC,CAAC,CAC1CC,MAAM,CAAEX,IAAI,IAAKA,IAAI,IAAI,IAAI,CAAC,CAC9BY,IAAI,CAAC,IAAI,CAAC,GACblF,WAAW,CAACH,KAAuB,EAAE,IAAI;aACQ,CAAC,GAExDJ,WACD;YACDoE,gBAAgB;AAChBsB,YAAAA,KAAK,EACHjE,OAAO,IAAI,IAAI,GACX,MAAK;AACHA,cAAAA,OAAO,EAAE;cACT,CAACL,kBAAkB,EAAEkB,OAAO,IAAIW,kBAAkB,CAACX,OAAO,GAAGqD,KAAK,CAAC;AACjEC,gBAAAA,aAAa,EAAE;AAChB,eAAA,CAAC;AACJ,YAAA,CAAC,GACDC,SAAS;AACf9E,YAAAA,QAAQ,EAAEoD,UAAU;YACpBnD,IAAI;AACJC,YAAAA;WACD;AAAC,SAC2C,CAC/C;AACF6E,QAAAA,eAAe,EAAE1C,aAAc;AAC/BpC,QAAAA,IAAI,EAAEJ,UAAU,GAAG,IAAI,GAAG,IAAK;AAC/BmF,QAAAA,OAAO,EAAC,MAAM;QACdvE,OAAO,EAAEA,MAAK;UACZM,OAAO,CAAC,KAAK,CAAC;QAChB,CAAE;QACFkE,UAAU,EAAEA,MAAK;UACfpD,cAAc,CAAC,EAAE,CAAC;QACpB,CAAE;QAAAsB,QAAA,eAEFH,cAAA,CAACkC,qCAAkB,EAAA;AACjBtG,UAAAA,EAAE,EAAEA,EAAE,GAAG,GAAGA,EAAE,CAAA,MAAA,CAAQ,GAAGkG,SAAU;AACnChG,UAAAA,QAAQ,EAAEA,QAAS;AACnBK,UAAAA,KAAK,EAAEA,KAAM;AACbI,UAAAA,aAAa,EAAEA,aAAc;AAC7BC,UAAAA,WAAW,EAAEA,WAAY;AACzBE,UAAAA,YAAY,EAAEA,YAAa;AAC3BG,UAAAA,UAAU,EAAEA,UAAW;AACvBC,UAAAA,iBAAiB,EAAEA,iBAAkB;AACrCC,UAAAA,mBAAmB,EAAEA,mBAAoB;AACzCoC,UAAAA,cAAc,EAAEA,cAAe;AAC/BC,UAAAA,UAAU,EAAEA,UAAW;AACvBZ,UAAAA,WAAW,EAAEE,mBAAoB;AACjCxC,UAAAA,YAAY,EAAEA,YAAa;AAC3BH,UAAAA,IAAI,EAAEA,IAAK;AACXuB,UAAAA,cAAc,EAAEuB,cAAe;UAC/BsD,oBAAoB,EAAGC,YAAY,IAAI;YACrC7E,QAAQ,GAAG6E,YAAwC,CAAC;YACpD,IAAI,CAACpG,QAAQ,EAAE;cACb+B,OAAO,CAAC,KAAK,CAAC;AAChB,YAAA;UACF,CAAE;AAAA,UAAA,GACE8B,oBAAoB;SAAG;AAE/B,OAAgB,CAAC;AAErB,IAAA;AAAC,GACU,CAAC;AAElB;AAEA;AACAlE,WAAW,CAAC0G,eAAe,GAAGA,iCAAe;;;;"}

package/build/inputs/SelectInput/SelectInput.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import mergeProps from 'merge-props';
-import { useState, useRef, useEffect, useDeferredValue } from 'react';
+import { useState, useRef, useEffect, useDeferredValue, useCallback } from 'react';
 import { Listbox } from '@headlessui/react';
 import { useScreenSize } from '../../common/hooks/useScreenSize.mjs';
 import { Breakpoint } from '../../common/propsValues/breakpoint.mjs';
@@ -64,24 +64,26 @@ function SelectInput({
     } else {
       initialized.current = true;
     }
-  }, [handleClose, handleOpen, open]);
+  }, [open]);
   const [filterQuery, _setFilterQuery] = useState('');
   const deferredFilterQuery = useDeferredValue(filterQuery);
-  const setFilterQuery = useEffectEvent(query => {
+  const previousFilterQueryRef = useRef(filterQuery);
+  const setFilterQuery = useCallback(query => {
     _setFilterQuery(query);
-    if (query !== filterQuery) {
+    if (query !== previousFilterQueryRef.current) {
       onFilterChange({
         query,
         queryNormalized: query ? searchableString(query) : null
       });
+      previousFilterQueryRef.current = query;
     }
-  });
+  }, [onFilterChange]);
   const internalTriggerRef = useRef(null);
-  const screenSm = useScreenSize(Breakpoint.SMALL);
-  const OptionsOverlay = screenSm ? SelectInputPopover : SelectInputBottomSheet;
   const searchInputRef = useRef(null);
   const listboxRef = useRef(null);
   const controllerRef = filterable ? searchInputRef : listboxRef;
+  const screenSm = useScreenSize(Breakpoint.SMALL);
+  const OptionsOverlay = screenSm ? SelectInputPopover : SelectInputBottomSheet;
   /**
    * Attempts to resolve the `listbox` label
    * @see https://storybook.wise.design/?path=/docs/forms-selectinput-accessibility--docs#labelling

package/build/inputs/SelectInput/SelectInput.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectInput.mjs","sources":["../../../src/inputs/SelectInput/SelectInput.tsx"],"sourcesContent":["import mergeProps from 'merge-props';\nimport { useEffect, useRef, useState, useDeferredValue } from 'react';\nimport { Listbox as ListboxBase } from '@headlessui/react';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\nimport { Breakpoint } from '../../common/propsValues/breakpoint';\nimport { useEffectEvent } from '../../common/hooks/useEffectEvent';\nimport { useInputAttributes } from '../contexts';\n\nimport { SelectInputBottomSheet } from './BottomSheet';\nimport { SelectInputPopover } from './Popover';\nimport { SelectInputOptions } from './Options';\nimport { DefaultRenderTrigger } from './DefaultRenderTrigger';\n\nimport {\n SelectInputOptionContentWithinTriggerContext,\n SelectInputTriggerButtonPropsContext,\n} from './SelectInput.contexts';\nimport { searchableString, sortByRelevance } from './SelectInput.utils';\nimport { SelectInputProps } from './SelectInput.types';\n\nconst noop = () => {};\n\n/*\n SelectInput component allows users to select an option from a dropdown list.\n * Supports filtering, multiple selection, and customization.\n /\nexport function SelectInput<T = string, M extends boolean = false>({\n id: idProp,\n parentId,\n name,\n multiple,\n placeholder,\n autocomplete,\n items,\n defaultValue,\n value: controlledValue,\n compareValues,\n renderValue = String,\n renderFooter,\n renderTrigger = DefaultRenderTrigger,\n filterable,\n filterPlaceholder,\n sortFilteredOptions,\n disabled,\n size = 'md',\n className,\n UNSAFE_triggerButtonProps,\n triggerRef: externalTriggerRef,\n onFilterChange = noop,\n onChange,\n onOpen,\n onClose,\n onClear,\n}: SelectInputProps<T, M>) {\n const inputAttributes = useInputAttributes({ nonLabelable: true });\n const id = idProp ?? inputAttributes.id;\n\n const [open, setOpen] = useState(false);\n\n const initialized = useRef(false);\n const handleClose = useEffectEvent(onClose ?? (() => {}));\n const handleOpen = useEffectEvent(onOpen ?? (() => {}));\n useEffect(() => {\n if (initialized.current) {\n if (open) {\n handleOpen?.();\n } else {\n handleClose?.();\n }\n } else {\n initialized.current = true;\n }\n }, [handleClose, handleOpen, open]);\n\n const [filterQuery, _setFilterQuery] = useState('');\n const deferredFilterQuery = useDeferredValue(filterQuery);\n const setFilterQuery = useEffectEvent((query: string) => {\n _setFilterQuery(query);\n if (query !== filterQuery) {\n onFilterChange({\n query,\n queryNormalized: query ? searchableString(query) : null,\n });\n }\n });\n\n const internalTriggerRef = useRef<HTMLButtonElement \| null>(null);\n\n const screenSm = useScreenSize(Breakpoint.SMALL);\n const OptionsOverlay = screenSm ? SelectInputPopover : SelectInputBottomSheet;\n\n const searchInputRef = useRef<HTMLInputElement>(null);\n const listboxRef = useRef<HTMLDivElement>(null);\n const controllerRef = filterable ? searchInputRef : listboxRef;\n\n /\n Attempts to resolve the `listbox` label\n * @see https://storybook.wise.design/?path=/docs/forms-selectinput-accessibility--docs#labelling\n */\n const getListBoxLabelProps = (): {\n listBoxLabel?: string;\n listBoxLabelledBy?: string;\n } => {\n if (UNSAFE_triggerButtonProps?.['aria-label']) {\n return {\n listBoxLabel: UNSAFE_triggerButtonProps['aria-label'],\n };\n }\n\n if (UNSAFE_triggerButtonProps?.['aria-labelledby']) {\n return {\n listBoxLabelledBy: UNSAFE_triggerButtonProps['aria-labelledby'],\n };\n }\n\n if (inputAttributes['aria-labelledby']) {\n return {\n listBoxLabelledBy: inputAttributes['aria-labelledby'],\n };\n }\n\n return {};\n };\n\n return (\n <ListboxBase\n name={name}\n multiple={multiple}\n defaultValue={defaultValue as M extends true ? T[] : T}\n value={controlledValue as M extends true ? T[] : T}\n by={compareValues}\n disabled={disabled}\n onChange={\n ((value) => {\n if (!multiple) {\n setOpen(false);\n }\n onChange?.(value);\n }) satisfies SelectInputProps<T, M>['onChange']\n }\n >\n {({ disabled: uiDisabled, value }) => {\n const placeholderShown =\n multiple && Array.isArray(value) ? value.length === 0 : value == null;\n return (\n <OptionsOverlay\n placement=\"bottom-start\"\n open={open}\n renderTrigger={({ ref, getInteractionProps }) => (\n <SelectInputTriggerButtonPropsContext.Provider\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n value={{\n ref: (node) => {\n ref(node);\n if (externalTriggerRef) {\n // eslint-disable-next-line no-param-reassign\n externalTriggerRef.current = node;\n } else {\n internalTriggerRef.current = node;\n }\n },\n size,\n ...inputAttributes,\n ...UNSAFE_triggerButtonProps,\n id,\n ...mergeProps(\n {\n onClick: () => {\n setOpen((prev) => !prev);\n },\n onKeyDown: (event: React.KeyboardEvent) => {\n if (\n event.key === ' ' \|\|\n event.key === 'Enter' \|\|\n event.key === 'ArrowDown' \|\|\n event.key === 'ArrowUp'\n ) {\n setOpen((prev) => !prev);\n }\n },\n },\n getInteractionProps(),\n ),\n }}\n >\n {renderTrigger({\n content: !placeholderShown ? (\n <SelectInputOptionContentWithinTriggerContext.Provider value>\n {multiple && Array.isArray(value)\n ? (value as readonly NonNullable<T>[])\n .map((option) => renderValue(option, true))\n .filter((node) => node != null)\n .join(', ')\n : renderValue(value as NonNullable<T>, true)}\n </SelectInputOptionContentWithinTriggerContext.Provider>\n ) : (\n placeholder\n ),\n placeholderShown,\n clear:\n onClear != null\n ? () => {\n onClear();\n (externalTriggerRef?.current ?? internalTriggerRef.current)?.focus({\n preventScroll: true,\n });\n }\n : undefined,\n disabled: uiDisabled,\n size,\n className,\n })}\n </SelectInputTriggerButtonPropsContext.Provider>\n )}\n initialFocusRef={controllerRef}\n size={filterable ? 'lg' : 'md'}\n padding=\"none\"\n onClose={() => {\n setOpen(false);\n }}\n onCloseEnd={() => {\n setFilterQuery('');\n }}\n >\n <SelectInputOptions\n id={id ? `${id}Search` : undefined}\n parentId={parentId}\n items={items}\n compareValues={compareValues}\n renderValue={renderValue}\n renderFooter={renderFooter}\n filterable={filterable}\n filterPlaceholder={filterPlaceholder}\n sortFilteredOptions={sortFilteredOptions}\n searchInputRef={searchInputRef}\n listboxRef={listboxRef}\n filterQuery={deferredFilterQuery}\n autocomplete={autocomplete}\n name={name}\n onFilterChange={setFilterQuery}\n onAutocompleteSelect={(matchedValue) => {\n onChange?.(matchedValue as M extends true ? T[] : T);\n if (!multiple) {\n setOpen(false);\n }\n }}\n {...getListBoxLabelProps()}\n />\n </OptionsOverlay>\n );\n }}\n </ListboxBase>\n );\n}\n\n// Attach sortByRelevance to the component for convenience\nSelectInput.sortByRelevance = sortByRelevance;\n"],"names":["noop","SelectInput","id","idProp","parentId","name","multiple","placeholder","autocomplete","items","defaultValue","value","controlledValue","compareValues","renderValue","String","renderFooter","renderTrigger","DefaultRenderTrigger","filterable","filterPlaceholder","sortFilteredOptions","disabled","size","className","UNSAFE_triggerButtonProps","triggerRef","externalTriggerRef","onFilterChange","onChange","onOpen","onClose","onClear","inputAttributes","useInputAttributes","nonLabelable","open","setOpen","useState","initialized","useRef","handleClose","useEffectEvent","handleOpen","useEffect","current","filterQuery","_setFilterQuery","deferredFilterQuery","useDeferredValue","setFilterQuery","query","queryNormalized","searchableString","internalTriggerRef","screenSm","useScreenSize","Breakpoint","SMALL","OptionsOverlay","SelectInputPopover","SelectInputBottomSheet","searchInputRef","listboxRef","controllerRef","getListBoxLabelProps","listBoxLabel","listBoxLabelledBy","_jsx","ListboxBase","by","children","uiDisabled","placeholderShown","Array","isArray","length","placement","ref","getInteractionProps","SelectInputTriggerButtonPropsContext","Provider","node","mergeProps","onClick","prev","onKeyDown","event","key","content","SelectInputOptionContentWithinTriggerContext","map","option","filter","join","clear","focus","preventScroll","undefined","initialFocusRef","padding","onCloseEnd","SelectInputOptions","onAutocompleteSelect","matchedValue","sortByRelevance"],"mappings":"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"}
1	+ {"version":3,"file":"SelectInput.mjs","sources":["../../../src/inputs/SelectInput/SelectInput.tsx"],"sourcesContent":["import mergeProps from 'merge-props';\nimport { useCallback, useEffect, useRef, useState, useDeferredValue } from 'react';\nimport { Listbox as ListboxBase } from '@headlessui/react';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\nimport { Breakpoint } from '../../common/propsValues/breakpoint';\nimport { useEffectEvent } from '../../common/hooks/useEffectEvent';\nimport { useInputAttributes } from '../contexts';\n\nimport { SelectInputBottomSheet } from './BottomSheet';\nimport { SelectInputPopover } from './Popover';\nimport { SelectInputOptions } from './Options';\nimport { DefaultRenderTrigger } from './DefaultRenderTrigger';\n\nimport {\n SelectInputOptionContentWithinTriggerContext,\n SelectInputTriggerButtonPropsContext,\n} from './SelectInput.contexts';\nimport { searchableString, sortByRelevance } from './SelectInput.utils';\nimport { SelectInputProps } from './SelectInput.types';\n\nconst noop = () => {};\n\n/*\n SelectInput component allows users to select an option from a dropdown list.\n * Supports filtering, multiple selection, and customization.\n /\nexport function SelectInput<T = string, M extends boolean = false>({\n id: idProp,\n parentId,\n name,\n multiple,\n placeholder,\n autocomplete,\n items,\n defaultValue,\n value: controlledValue,\n compareValues,\n renderValue = String,\n renderFooter,\n renderTrigger = DefaultRenderTrigger,\n filterable,\n filterPlaceholder,\n sortFilteredOptions,\n disabled,\n size = 'md',\n className,\n UNSAFE_triggerButtonProps,\n triggerRef: externalTriggerRef,\n onFilterChange = noop,\n onChange,\n onOpen,\n onClose,\n onClear,\n}: SelectInputProps<T, M>) {\n const inputAttributes = useInputAttributes({ nonLabelable: true });\n const id = idProp ?? inputAttributes.id;\n\n const [open, setOpen] = useState(false);\n\n const initialized = useRef(false);\n const handleClose = useEffectEvent(onClose ?? (() => {}));\n const handleOpen = useEffectEvent(onOpen ?? (() => {}));\n\n useEffect(() => {\n if (initialized.current) {\n if (open) {\n handleOpen?.();\n } else {\n handleClose?.();\n }\n } else {\n initialized.current = true;\n }\n }, [open]);\n\n const [filterQuery, _setFilterQuery] = useState('');\n const deferredFilterQuery = useDeferredValue(filterQuery);\n const previousFilterQueryRef = useRef(filterQuery);\n\n const setFilterQuery = useCallback(\n (query: string) => {\n _setFilterQuery(query);\n if (query !== previousFilterQueryRef.current) {\n onFilterChange({\n query,\n queryNormalized: query ? searchableString(query) : null,\n });\n previousFilterQueryRef.current = query;\n }\n },\n [onFilterChange],\n );\n\n const internalTriggerRef = useRef<HTMLButtonElement \| null>(null);\n const searchInputRef = useRef<HTMLInputElement>(null);\n const listboxRef = useRef<HTMLDivElement>(null);\n const controllerRef = filterable ? searchInputRef : listboxRef;\n\n const screenSm = useScreenSize(Breakpoint.SMALL);\n const OptionsOverlay = screenSm ? SelectInputPopover : SelectInputBottomSheet;\n\n /\n Attempts to resolve the `listbox` label\n * @see https://storybook.wise.design/?path=/docs/forms-selectinput-accessibility--docs#labelling\n */\n const getListBoxLabelProps = (): {\n listBoxLabel?: string;\n listBoxLabelledBy?: string;\n } => {\n if (UNSAFE_triggerButtonProps?.['aria-label']) {\n return {\n listBoxLabel: UNSAFE_triggerButtonProps['aria-label'],\n };\n }\n\n if (UNSAFE_triggerButtonProps?.['aria-labelledby']) {\n return {\n listBoxLabelledBy: UNSAFE_triggerButtonProps['aria-labelledby'],\n };\n }\n\n if (inputAttributes['aria-labelledby']) {\n return {\n listBoxLabelledBy: inputAttributes['aria-labelledby'],\n };\n }\n\n return {};\n };\n\n return (\n <ListboxBase\n name={name}\n multiple={multiple}\n defaultValue={defaultValue as M extends true ? T[] : T}\n value={controlledValue as M extends true ? T[] : T}\n by={compareValues}\n disabled={disabled}\n onChange={\n ((value) => {\n if (!multiple) {\n setOpen(false);\n }\n onChange?.(value);\n }) satisfies SelectInputProps<T, M>['onChange']\n }\n >\n {({ disabled: uiDisabled, value }) => {\n const placeholderShown =\n multiple && Array.isArray(value) ? value.length === 0 : value == null;\n return (\n <OptionsOverlay\n placement=\"bottom-start\"\n open={open}\n renderTrigger={({ ref, getInteractionProps }) => (\n <SelectInputTriggerButtonPropsContext.Provider\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n value={{\n ref: (node) => {\n ref(node);\n if (externalTriggerRef) {\n // eslint-disable-next-line no-param-reassign\n externalTriggerRef.current = node;\n } else {\n internalTriggerRef.current = node;\n }\n },\n size,\n ...inputAttributes,\n ...UNSAFE_triggerButtonProps,\n id,\n ...mergeProps(\n {\n onClick: () => {\n setOpen((prev) => !prev);\n },\n onKeyDown: (event: React.KeyboardEvent) => {\n if (\n event.key === ' ' \|\|\n event.key === 'Enter' \|\|\n event.key === 'ArrowDown' \|\|\n event.key === 'ArrowUp'\n ) {\n setOpen((prev) => !prev);\n }\n },\n },\n getInteractionProps(),\n ),\n }}\n >\n {renderTrigger({\n content: !placeholderShown ? (\n <SelectInputOptionContentWithinTriggerContext.Provider value>\n {multiple && Array.isArray(value)\n ? (value as readonly NonNullable<T>[])\n .map((option) => renderValue(option, true))\n .filter((node) => node != null)\n .join(', ')\n : renderValue(value as NonNullable<T>, true)}\n </SelectInputOptionContentWithinTriggerContext.Provider>\n ) : (\n placeholder\n ),\n placeholderShown,\n clear:\n onClear != null\n ? () => {\n onClear();\n (externalTriggerRef?.current ?? internalTriggerRef.current)?.focus({\n preventScroll: true,\n });\n }\n : undefined,\n disabled: uiDisabled,\n size,\n className,\n })}\n </SelectInputTriggerButtonPropsContext.Provider>\n )}\n initialFocusRef={controllerRef}\n size={filterable ? 'lg' : 'md'}\n padding=\"none\"\n onClose={() => {\n setOpen(false);\n }}\n onCloseEnd={() => {\n setFilterQuery('');\n }}\n >\n <SelectInputOptions\n id={id ? `${id}Search` : undefined}\n parentId={parentId}\n items={items}\n compareValues={compareValues}\n renderValue={renderValue}\n renderFooter={renderFooter}\n filterable={filterable}\n filterPlaceholder={filterPlaceholder}\n sortFilteredOptions={sortFilteredOptions}\n searchInputRef={searchInputRef}\n listboxRef={listboxRef}\n filterQuery={deferredFilterQuery}\n autocomplete={autocomplete}\n name={name}\n onFilterChange={setFilterQuery}\n onAutocompleteSelect={(matchedValue) => {\n onChange?.(matchedValue as M extends true ? T[] : T);\n if (!multiple) {\n setOpen(false);\n }\n }}\n {...getListBoxLabelProps()}\n />\n </OptionsOverlay>\n );\n }}\n </ListboxBase>\n );\n}\n\n// Attach sortByRelevance to the component for convenience\nSelectInput.sortByRelevance = sortByRelevance;\n"],"names":["noop","SelectInput","id","idProp","parentId","name","multiple","placeholder","autocomplete","items","defaultValue","value","controlledValue","compareValues","renderValue","String","renderFooter","renderTrigger","DefaultRenderTrigger","filterable","filterPlaceholder","sortFilteredOptions","disabled","size","className","UNSAFE_triggerButtonProps","triggerRef","externalTriggerRef","onFilterChange","onChange","onOpen","onClose","onClear","inputAttributes","useInputAttributes","nonLabelable","open","setOpen","useState","initialized","useRef","handleClose","useEffectEvent","handleOpen","useEffect","current","filterQuery","_setFilterQuery","deferredFilterQuery","useDeferredValue","previousFilterQueryRef","setFilterQuery","useCallback","query","queryNormalized","searchableString","internalTriggerRef","searchInputRef","listboxRef","controllerRef","screenSm","useScreenSize","Breakpoint","SMALL","OptionsOverlay","SelectInputPopover","SelectInputBottomSheet","getListBoxLabelProps","listBoxLabel","listBoxLabelledBy","_jsx","ListboxBase","by","children","uiDisabled","placeholderShown","Array","isArray","length","placement","ref","getInteractionProps","SelectInputTriggerButtonPropsContext","Provider","node","mergeProps","onClick","prev","onKeyDown","event","key","content","SelectInputOptionContentWithinTriggerContext","map","option","filter","join","clear","focus","preventScroll","undefined","initialFocusRef","padding","onCloseEnd","SelectInputOptions","onAutocompleteSelect","matchedValue","sortByRelevance"],"mappings":"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"}

package/build/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectInputTriggerButton.js","sources":["../../../../src/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.tsx"],"sourcesContent":["import { ListboxButton } from '@headlessui/react';\nimport mergeProps from 'merge-props';\nimport { useContext } from 'react';\nimport { PolymorphicWithOverrides } from '../../../common/polymorphicWithOverrides/PolymorphicWithOverrides';\nimport { Merge } from '../../../utils';\nimport { SelectInputTriggerButtonPropsContext } from '../SelectInput.contexts';\n\nexport type SelectInputTriggerButtonElementType = 'button' \| React.ComponentType;\n\nexport type SelectInputTriggerButtonProps<\n T extends SelectInputTriggerButtonElementType = 'button',\n> = Merge<React.ComponentPropsWithoutRef<T>, { as?: T }>;\n\n/*\n The trigger button component for SelectInput.\n * Uses Headless UI's ListboxButton with polymorphic support to allow\n * rendering as different element types.\n */\nexport function SelectInputTriggerButton<T extends SelectInputTriggerButtonElementType = 'button'>({\n as = 'button' as T,\n ...restProps\n}: SelectInputTriggerButtonProps<T>) {\n const { ref, onClick, onKeyDown, size, ...interactionProps } = useContext(\n SelectInputTriggerButtonPropsContext,\n );\n\n return (\n <ListboxButton\n ref={ref}\n as={PolymorphicWithOverrides}\n role=\"combobox\"\n __overrides={{ as, size, ...interactionProps } ~~as Record<string, unknown>~~}\n {...mergeProps({ onClick, onKeyDown }, restProps)}\n />\n );\n}\n"],"names":["SelectInputTriggerButton","as","restProps","ref","onClick","onKeyDown","size","interactionProps","useContext","SelectInputTriggerButtonPropsContext","_jsx","ListboxButton","PolymorphicWithOverrides","role","__overrides","mergeProps"],"mappings":";;;;;;;;;;;;;AAkBM,SAAUA,wBAAwBA,CAA2D;AACjGC,EAAAA,EAAE,GAAG,QAAa;EAClB,GAAGC;AAAS,CACqB,EAAA;EACjC,MAAM;IAAEC,GAAG;IAAEC,OAAO;IAAEC,SAAS;IAAEC,IAAI;IAAE,GAAGC;AAAgB,GAAE,GAAGC,gBAAU,CACvEC,yDAAoC,CACrC;EAED,oBACEC,cAAA,CAACC,mBAAa,EAAA;AACZR,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,EAAE,EAAEW,iDAAyB;AAC7BC,IAAAA,IAAI,EAAC,UAAU;AACfC,IAAAA,WAAW,EAAE;MAAEb,EAAE;MAAEK,IAAI;MAAE,GAAGC;~~KAA8C~~;AAAA,IAAA,~~GACtEQ~~,2BAAU,CAAC;MAAEX,OAAO;AAAEC,MAAAA;AAAS,KAAE,EAAEH,SAAS;AAAC,GAAC,CAClD;AAEN;;;;"}
1	+ {"version":3,"file":"SelectInputTriggerButton.js","sources":["../../../../src/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.tsx"],"sourcesContent":["import { ListboxButton } from '@headlessui/react';\nimport mergeProps from 'merge-props';\nimport { useContext } from 'react';\nimport { PolymorphicWithOverrides } from '../../../common/polymorphicWithOverrides/PolymorphicWithOverrides';\nimport { Merge } from '../../../utils';\nimport { SelectInputTriggerButtonPropsContext } from '../SelectInput.contexts';\n\nexport type SelectInputTriggerButtonElementType = 'button' \| React.ComponentType;\n\nexport type SelectInputTriggerButtonProps<\n T extends SelectInputTriggerButtonElementType = 'button',\n> = Merge<React.ComponentPropsWithoutRef<T>, { as?: T }>;\n\n/*\n The trigger button component for SelectInput.\n * Uses Headless UI's ListboxButton with polymorphic support to allow\n * rendering as different element types.\n */\nexport function SelectInputTriggerButton<T extends SelectInputTriggerButtonElementType = 'button'>({\n as = 'button' as T,\n ...restProps\n}: SelectInputTriggerButtonProps<T>) {\n const { ref, onClick, onKeyDown, size, ...interactionProps } = useContext(\n SelectInputTriggerButtonPropsContext,\n );\n\n return (\n <ListboxButton\n ref={ref}\n as={PolymorphicWithOverrides}\n role=\"combobox\"\n __overrides={{ as, size, ...interactionProps }}\n {...mergeProps({ onClick, onKeyDown }, restProps)}\n />\n );\n}\n"],"names":["SelectInputTriggerButton","as","restProps","ref","onClick","onKeyDown","size","interactionProps","useContext","SelectInputTriggerButtonPropsContext","_jsx","ListboxButton","PolymorphicWithOverrides","role","__overrides","mergeProps"],"mappings":";;;;;;;;;;;;;AAkBM,SAAUA,wBAAwBA,CAA2D;AACjGC,EAAAA,EAAE,GAAG,QAAa;EAClB,GAAGC;AAAS,CACqB,EAAA;EACjC,MAAM;IAAEC,GAAG;IAAEC,OAAO;IAAEC,SAAS;IAAEC,IAAI;IAAE,GAAGC;AAAgB,GAAE,GAAGC,gBAAU,CACvEC,yDAAoC,CACrC;EAED,oBACEC,cAAA,CAACC,mBAAa,EAAA;AACZR,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,EAAE,EAAEW,iDAAyB;AAC7BC,IAAAA,IAAI,EAAC,UAAU;AACfC,IAAAA,WAAW,EAAE;MAAEb,EAAE;MAAEK,IAAI;MAAE,GAAGC;KAAmB;AAAA,IAAA,GAC3CQ,2BAAU,CAAC;MAAEX,OAAO;AAAEC,MAAAA;AAAS,KAAE,EAAEH,SAAS;AAAC,GAAC,CAClD;AAEN;;;;"}

package/build/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectInputTriggerButton.mjs","sources":["../../../../src/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.tsx"],"sourcesContent":["import { ListboxButton } from '@headlessui/react';\nimport mergeProps from 'merge-props';\nimport { useContext } from 'react';\nimport { PolymorphicWithOverrides } from '../../../common/polymorphicWithOverrides/PolymorphicWithOverrides';\nimport { Merge } from '../../../utils';\nimport { SelectInputTriggerButtonPropsContext } from '../SelectInput.contexts';\n\nexport type SelectInputTriggerButtonElementType = 'button' \| React.ComponentType;\n\nexport type SelectInputTriggerButtonProps<\n T extends SelectInputTriggerButtonElementType = 'button',\n> = Merge<React.ComponentPropsWithoutRef<T>, { as?: T }>;\n\n/*\n The trigger button component for SelectInput.\n * Uses Headless UI's ListboxButton with polymorphic support to allow\n * rendering as different element types.\n */\nexport function SelectInputTriggerButton<T extends SelectInputTriggerButtonElementType = 'button'>({\n as = 'button' as T,\n ...restProps\n}: SelectInputTriggerButtonProps<T>) {\n const { ref, onClick, onKeyDown, size, ...interactionProps } = useContext(\n SelectInputTriggerButtonPropsContext,\n );\n\n return (\n <ListboxButton\n ref={ref}\n as={PolymorphicWithOverrides}\n role=\"combobox\"\n __overrides={{ as, size, ...interactionProps } ~~as Record<string, unknown>~~}\n {...mergeProps({ onClick, onKeyDown }, restProps)}\n />\n );\n}\n"],"names":["SelectInputTriggerButton","as","restProps","ref","onClick","onKeyDown","size","interactionProps","useContext","SelectInputTriggerButtonPropsContext","_jsx","ListboxButton","PolymorphicWithOverrides","role","__overrides","mergeProps"],"mappings":";;;;;;;AAkBM,SAAUA,wBAAwBA,CAA2D;AACjGC,EAAAA,EAAE,GAAG,QAAa;EAClB,GAAGC;AAAS,CACqB,EAAA;EACjC,MAAM;IAAEC,GAAG;IAAEC,OAAO;IAAEC,SAAS;IAAEC,IAAI;IAAE,GAAGC;AAAgB,GAAE,GAAGC,UAAU,CACvEC,oCAAoC,CACrC;EAED,oBACEC,GAAA,CAACC,aAAa,EAAA;AACZR,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,EAAE,EAAEW,wBAAyB;AAC7BC,IAAAA,IAAI,EAAC,UAAU;AACfC,IAAAA,WAAW,EAAE;MAAEb,EAAE;MAAEK,IAAI;MAAE,GAAGC;~~KAA8C~~;AAAA,IAAA,~~GACtEQ~~,UAAU,CAAC;MAAEX,OAAO;AAAEC,MAAAA;AAAS,KAAE,EAAEH,SAAS;AAAC,GAAC,CAClD;AAEN;;;;"}
1	+ {"version":3,"file":"SelectInputTriggerButton.mjs","sources":["../../../../src/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.tsx"],"sourcesContent":["import { ListboxButton } from '@headlessui/react';\nimport mergeProps from 'merge-props';\nimport { useContext } from 'react';\nimport { PolymorphicWithOverrides } from '../../../common/polymorphicWithOverrides/PolymorphicWithOverrides';\nimport { Merge } from '../../../utils';\nimport { SelectInputTriggerButtonPropsContext } from '../SelectInput.contexts';\n\nexport type SelectInputTriggerButtonElementType = 'button' \| React.ComponentType;\n\nexport type SelectInputTriggerButtonProps<\n T extends SelectInputTriggerButtonElementType = 'button',\n> = Merge<React.ComponentPropsWithoutRef<T>, { as?: T }>;\n\n/*\n The trigger button component for SelectInput.\n * Uses Headless UI's ListboxButton with polymorphic support to allow\n * rendering as different element types.\n */\nexport function SelectInputTriggerButton<T extends SelectInputTriggerButtonElementType = 'button'>({\n as = 'button' as T,\n ...restProps\n}: SelectInputTriggerButtonProps<T>) {\n const { ref, onClick, onKeyDown, size, ...interactionProps } = useContext(\n SelectInputTriggerButtonPropsContext,\n );\n\n return (\n <ListboxButton\n ref={ref}\n as={PolymorphicWithOverrides}\n role=\"combobox\"\n __overrides={{ as, size, ...interactionProps }}\n {...mergeProps({ onClick, onKeyDown }, restProps)}\n />\n );\n}\n"],"names":["SelectInputTriggerButton","as","restProps","ref","onClick","onKeyDown","size","interactionProps","useContext","SelectInputTriggerButtonPropsContext","_jsx","ListboxButton","PolymorphicWithOverrides","role","__overrides","mergeProps"],"mappings":";;;;;;;AAkBM,SAAUA,wBAAwBA,CAA2D;AACjGC,EAAAA,EAAE,GAAG,QAAa;EAClB,GAAGC;AAAS,CACqB,EAAA;EACjC,MAAM;IAAEC,GAAG;IAAEC,OAAO;IAAEC,SAAS;IAAEC,IAAI;IAAE,GAAGC;AAAgB,GAAE,GAAGC,UAAU,CACvEC,oCAAoC,CACrC;EAED,oBACEC,GAAA,CAACC,aAAa,EAAA;AACZR,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,EAAE,EAAEW,wBAAyB;AAC7BC,IAAAA,IAAI,EAAC,UAAU;AACfC,IAAAA,WAAW,EAAE;MAAEb,EAAE;MAAEK,IAAI;MAAE,GAAGC;KAAmB;AAAA,IAAA,GAC3CQ,UAAU,CAAC;MAAEX,OAAO;AAAEC,MAAAA;AAAS,KAAE,EAAEH,SAAS;AAAC,GAAC,CAClD;AAEN;;;;"}

package/build/nudge/Nudge.js CHANGED Viewed

@@ -60,36 +60,52 @@ const Nudge = ({
   action
 }) => {
   const intl = reactIntl.useIntl();
-  const [isDismissed, setIsDismissed] = React.useState(false);
-  const [isMounted, setIsMounted] = React.useState(false);
+  const getIsDismissed = React.useCallback(() => persistDismissal && id ? !!getLocalStorage()?.find(item => item === id) : false, [persistDismissal, id]);
+  const [nudgeState, setNudgeState] = React.useState(() => ({
+    isDismissed: getIsDismissed(),
+    isMounted: false
+  }));
+  React.useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- Setting mount state in mount effect
+    setNudgeState(prev => ({
+      ...prev,
+      isMounted: true
+    }));
+  }, []);
+  React.useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- Syncing dismissed state from localStorage on prop change
+    setNudgeState(prev => ({
+      ...prev,
+      isDismissed: getIsDismissed()
+    }));
+  }, [getIsDismissed, id, persistDismissal]);
+  const {
+    isDismissed
+  } = nudgeState;
   const handleOnDismiss = () => {
     const dismissedNudgesStorage = getLocalStorage();
     if (persistDismissal && id) {
       try {
         localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));
-      } catch (error) {}
-      setIsDismissed(true);
+      } catch {}
+      setNudgeState(prev => ({
+        ...prev,
+        isDismissed: true
+      }));
     }
     if (onDismiss) {
       onDismiss();
     }
   };
   React.useEffect(() => {
-    if (persistDismissal && id) {
+    if (persistDismissal && id && isPreviouslyDismissed) {
       const dismissedNudgesStorage = getLocalStorage();
-      let isDismissed = false;
-      if (dismissedNudgesStorage?.find(item => item === id)) {
-        setIsDismissed(true);
-        isDismissed = true;
-      }
-      if (isPreviouslyDismissed) {
-        isPreviouslyDismissed(isDismissed);
-      }
+      const wasDismissed = !!dismissedNudgesStorage?.find(item => item === id);
+      isPreviouslyDismissed(wasDismissed);
     }
-    setIsMounted(true);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id, persistDismissal]);
-  if (persistDismissal && (isDismissed || !isMounted)) {
+  if (persistDismissal && (isDismissed || !nudgeState.isMounted)) {
     return null;
   }
   return /*#__PURE__*/jsxRuntime.jsxs("div", {