@transferwise/components 46.140.1 → 46.142.0

package/build/inputs/SelectInput/Options/SelectInputOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInputOptions.js","sources":["../../../../src/inputs/SelectInput/Options/SelectInputOptions.tsx"],"sourcesContent":["import { CrossCircle } from '@transferwise/icons';\nimport { ListboxOptions } from '@headlessui/react';\nimport { clsx } from 'clsx';\nimport { useEffect, useId, useMemo, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\nimport { Virtualizer, type VirtualizerHandle } from 'virtua';\n\nimport { SearchInput } from '../../SearchInput';\nimport {\n  SelectInputItemsCountContext,\n  SelectInputItemPositionContext,\n} from '../SelectInput.contexts';\nimport {\n  dedupeSelectInputItems,\n  filterSelectInputItems,\n  MAX_ITEMS_WITHOUT_VIRTUALIZATION,\n  searchableString,\n  selectInputOptionItemIncludesNeedle,\n  sortSelectInputItems,\n} from '../SelectInput.utils';\nimport { SelectInputOptionItem, SelectInputProps, SelectInputItem } from '../SelectInput.types';\nimport messages from '../SelectInput.messages';\n\nimport { SelectInputItemView } from '../ItemView';\nimport { SelectInputOptionsContainer } from './OptionsContainer';\n\n/**\n * Props for the SelectInputOptions component.\n */\nexport interface SelectInputOptionsProps<T = string> extends Pick<\n  SelectInputProps<T>,\n  | 'items'\n  | 'renderValue'\n  | 'renderFooter'\n  | 'filterable'\n  | 'filterPlaceholder'\n  | 'id'\n  | 'parentId'\n  | 'compareValues'\n  | 'sortFilteredOptions'\n> {\n  searchInputRef: React.MutableRefObject<HTMLInputElement | null>;\n  listboxRef: React.MutableRefObject<HTMLDivElement | null>;\n  filterQuery: string;\n  onFilterChange: (query: string) => void;\n  listBoxLabel?: string;\n  listBoxLabelledBy?: string;\n  autocomplete?: string;\n  name?: string;\n  onAutocompleteSelect?: (value: T) => void;\n}\n\n/**\n * The main options container component for SelectInput.\n * Manages filtering, virtualisation, and rendering of options.\n */\nexport function SelectInputOptions<T = string>({\n  id,\n  parentId,\n  items,\n  compareValues: compareValuesProp,\n  renderValue = String,\n  renderFooter,\n  filterable = false,\n  filterPlaceholder,\n  sortFilteredOptions,\n  searchInputRef,\n  listboxRef,\n  filterQuery,\n  onFilterChange,\n  listBoxLabel,\n  listBoxLabelledBy,\n  autocomplete,\n  name,\n  onAutocompleteSelect,\n}: SelectInputOptionsProps<T>) {\n  const intl = useIntl();\n  const virtualiserHandlerRef = useRef<VirtualizerHandle>(null);\n  const controllerRef = filterable ? searchInputRef : listboxRef;\n  const [initialRender, setInitialRender] = useState(true);\n\n  const needle = useMemo(() => {\n    if (filterable) {\n      return filterQuery ? searchableString(filterQuery) : null;\n    }\n    return undefined;\n  }, [filterQuery, filterable]);\n  useEffect(() => {\n    if (needle) {\n      // Ensure having an active option while filtering.\n      // Without `requestAnimationFrame` upon which React depends for scheduling\n      // updates, the active status would only show for a split second and then\n      // disappear inadvertently.\n      requestAnimationFrame(() => {\n        if (\n          controllerRef.current != null &&\n          !controllerRef.current.hasAttribute('aria-activedescendant')\n        ) {\n          // Activate first option via synthetic key press\n          controllerRef.current.dispatchEvent(\n            new KeyboardEvent('keydown', { key: 'Home', bubbles: true }),\n          );\n        }\n      });\n    }\n  }, [controllerRef, needle]);\n\n  const compareValues = useMemo(() => {\n    if (!compareValuesProp) {\n      return undefined;\n    }\n\n    if (typeof compareValuesProp === 'function') {\n      return (a: NonNullable<T>, b: NonNullable<T>) => compareValuesProp(a, b);\n    }\n\n    const key = compareValuesProp;\n    return (a: NonNullable<T>, b: NonNullable<T>) => {\n      if (typeof a === 'object' && a != null && typeof b === 'object' && b != null) {\n        return (a as Record<string, unknown>)[key] === (b as Record<string, unknown>)[key];\n      }\n      return a === b;\n    };\n  }, [compareValuesProp]);\n\n  const filteredItems: readonly SelectInputItem<NonNullable<T> | undefined>[] = useMemo(() => {\n    if (needle == null) {\n      return items;\n    }\n\n    const dedupedItems = dedupeSelectInputItems(items, compareValues);\n\n    if (sortFilteredOptions) {\n      // When sorting, filter out non-matching items completely to avoid ghost items\n      const filtered = dedupedItems.map((item) => {\n        if (item.type === 'option') {\n          return selectInputOptionItemIncludesNeedle(item, needle)\n            ? item\n            : { ...item, value: undefined };\n        }\n        if (item.type === 'group') {\n          return {\n            ...item,\n            options: item.options.map((option) =>\n              selectInputOptionItemIncludesNeedle(option, needle)\n                ? option\n                : { ...option, value: undefined },\n            ),\n          };\n        }\n        return item;\n      });\n\n      return sortSelectInputItems(filtered, sortFilteredOptions, filterQuery);\n    }\n\n    return filterSelectInputItems(dedupedItems, (item) =>\n      selectInputOptionItemIncludesNeedle(item, needle),\n    );\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [needle, items, compareValues]);\n  const resultsEmpty = needle != null && filteredItems.length === 0;\n\n  const virtualized = filteredItems.length > MAX_ITEMS_WITHOUT_VIRTUALIZATION;\n\n  // Items shown once shall be kept mounted until the needle changes, otherwise\n  // the scroll position may jump around inadvertently. Pattern adopted from:\n  // https://inokawa.github.io/virtua/?path=/story/advanced-keep-offscreen-items--append-only\n  const [mountedIndexes, setMountedIndexes] = useState<number[]>([]);\n  const prevNeedleRef = useRef(needle);\n\n  useEffect(() => {\n    const needleChanged = prevNeedleRef.current !== needle;\n    prevNeedleRef.current = needle;\n\n    if (needleChanged) {\n      // Reset mounted indexes when search changes to avoid stale scroll positions\n      setMountedIndexes([]);\n      return;\n    }\n\n    // Ensure the 'End' key works as intended by keeping the last item mounted.\n    // Skipped on needle change to prevent auto-scrolling on search.\n    if (filteredItems.length > 0) {\n      setMountedIndexes((prevMountedIndexes) => {\n        // Create a new array with existing indexes plus the last item index\n        return [...new Set([...prevMountedIndexes, filteredItems.length - 1])]; // Sorting is redundant by nature here\n      });\n    }\n  }, [needle, filteredItems.length]);\n\n  const listboxContainerRef = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    if (listboxContainerRef.current != null) {\n      listboxContainerRef.current.style.setProperty(\n        '--initial-height',\n        `${listboxContainerRef.current.offsetHeight}px`,\n      );\n    }\n  }, []);\n\n  useEffect(() => {\n    setInitialRender(false);\n  }, []);\n\n  const showStatus = resultsEmpty;\n  const statusId = useId();\n  const listboxId = useId();\n\n  const getItemNode = (index: number) => {\n    const item = filteredItems[index];\n    return (\n      <SelectInputItemView key={index} item={item} renderValue={renderValue} needle={needle} />\n    );\n  };\n\n  const findMatchingItem = (autocompleteValue: string): T | null => {\n    const flatOptions = items\n      .flatMap((item) =>\n        item.type === 'group' ? item.options : item.type === 'option' ? [item] : [],\n      )\n      .filter(\n        (item): item is SelectInputOptionItem<NonNullable<T>> =>\n          item.type === 'option' && item.value != null,\n      );\n\n    const exactMatch = flatOptions.find(\n      (option) =>\n        String(option.value) === autocompleteValue ||\n        option.filterMatchers?.some((matcher) => matcher === autocompleteValue),\n    );\n\n    if (exactMatch) {\n      return exactMatch.value;\n    }\n\n    const fuzzyMatch = flatOptions.find((option) =>\n      option.filterMatchers?.some((matcher) =>\n        matcher.toLowerCase().includes(autocompleteValue.toLowerCase()),\n      ),\n    );\n\n    return fuzzyMatch ? fuzzyMatch.value : null;\n  };\n\n  return (\n    <ListboxOptions\n      modal\n      as={SelectInputOptionsContainer}\n      static\n      className=\"np-select-input-options-container\"\n      onAriaActiveDescendantChange={(value: React.AriaAttributes['aria-activedescendant']) => {\n        if (controllerRef.current != null) {\n          if (!initialRender && value != null) {\n            controllerRef.current.setAttribute('aria-activedescendant', value);\n          } else {\n            controllerRef.current.removeAttribute('aria-activedescendant');\n          }\n        }\n      }}\n    >\n      {filterable ? (\n        <div className=\"np-select-input-query-container\">\n          <SearchInput\n            ref={searchInputRef}\n            id={id}\n            name={name}\n            autoComplete={autocomplete}\n            role=\"combobox\"\n            shape=\"rectangle\"\n            placeholder={filterPlaceholder}\n            aria-label={filterPlaceholder}\n            defaultValue={filterQuery}\n            aria-autocomplete=\"list\"\n            aria-expanded\n            aria-controls={listboxId}\n            aria-describedby={showStatus ? statusId : undefined}\n            onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {\n              // Prevent interfering with the matcher of Headless UI\n              // https://mathiasbynens.be/notes/javascript-unicode#regex\n              if (/^.$/u.test(event.key)) {\n                event.stopPropagation();\n              }\n            }}\n            onChange={(event) => {\n              // Free up resources and ensure not to go out of bounds when the\n              // resulting item count is less than before\n              const inputValue = event.currentTarget.value;\n\n              // Free up resources and ensure not to go out of bounds\n              setMountedIndexes([]);\n              onFilterChange(inputValue);\n            }}\n            onInput={(event) => {\n              const inputValue = event.currentTarget.value;\n              const inputElement = event.currentTarget;\n\n              if (autocomplete && onAutocompleteSelect && inputValue) {\n                setTimeout(() => {\n                  if (inputElement.value === inputValue && inputValue.length > 2) {\n                    const matchedValue = findMatchingItem(inputValue);\n                    if (matchedValue !== null) {\n                      onAutocompleteSelect(matchedValue);\n                    }\n                  }\n                }, 50);\n              }\n            }}\n          />\n        </div>\n      ) : null}\n\n      <section\n        ref={listboxContainerRef}\n        tabIndex={-1}\n        className={clsx(\n          'np-select-input-listbox-container',\n          virtualized && 'np-select-input-listbox-container--virtualized',\n          needle == null && // Groups aren't shown when filtering\n            items.some((item) => item.type === 'group') &&\n            'np-select-input-listbox-container--has-group',\n        )}\n        data-wds-parent={parentId ?? undefined}\n      >\n        {resultsEmpty ? (\n          <div id={statusId} className=\"np-select-input-options-status\">\n            <CrossCircle size={16} className=\"np-select-input-options-status-icon\" />\n            {intl.formatMessage(messages.noResultsFound)}\n          </div>\n        ) : null}\n\n        <div\n          ref={listboxRef}\n          id={listboxId}\n          role=\"listbox\"\n          aria-orientation=\"vertical\"\n          aria-label={listBoxLabel}\n          aria-labelledby={listBoxLabelledBy}\n          tabIndex={0}\n          className=\"np-select-input-listbox\"\n        >\n          {!virtualized ? (\n            filteredItems.map((_, index) => getItemNode(index))\n          ) : (\n            <Virtualizer\n              ref={virtualiserHandlerRef}\n              data={filteredItems}\n              keepMounted={mountedIndexes}\n              scrollRef={listboxRef} // `VList` doesn't expose this\n              onScroll={async () => {\n                if (!virtualiserHandlerRef.current) return;\n\n                const startIndex = virtualiserHandlerRef.current.findItemIndex(\n                  virtualiserHandlerRef.current.scrollOffset,\n                );\n                const endIndex = virtualiserHandlerRef.current.findItemIndex(\n                  virtualiserHandlerRef.current.scrollOffset +\n                    virtualiserHandlerRef.current.viewportSize,\n                );\n\n                setMountedIndexes((prevMountedIndexes) => {\n                  // Create an array of all indexes that should be visible\n\n                  const visibleIndexes = [];\n                  for (let index = startIndex; index <= endIndex; index += 1) {\n                    // eslint-disable-next-line functional/immutable-data\n                    visibleIndexes.push(index);\n                  }\n\n                  // Combine with previous indexes and sort\n                  return [...new Set([...prevMountedIndexes, ...visibleIndexes])].sort(\n                    (a, b) => a - b,\n                  );\n                });\n              }}\n            >\n              {(item, index) => (\n                // The position of each item can't be inferred by browsers when\n                // virtualizing, as some of the items may not be in the DOM\n                <SelectInputItemsCountContext.Provider value={filteredItems.length}>\n                  <SelectInputItemPositionContext.Provider value={index + 1}>\n                    {getItemNode(index)}\n                  </SelectInputItemPositionContext.Provider>\n                </SelectInputItemsCountContext.Provider>\n              )}\n            </Virtualizer>\n          )}\n        </div>\n\n        {renderFooter != null ? (\n          <footer className=\"np-select-input-footer\">\n            <div\n              role=\"none\"\n              onKeyDown={(event) => {\n                // Prevent interfering with Headless UI\n                if (event.key !== 'Escape') {\n                  event.stopPropagation();\n                }\n              }}\n            >\n              {renderFooter({\n                resultsEmpty,\n                queryNormalized: needle,\n              })}\n            </div>\n          </footer>\n        ) : null}\n      </section>\n    </ListboxOptions>\n  );\n}\n"],"names":["SelectInputOptions","id","parentId","items","compareValues","compareValuesProp","renderValue","String","renderFooter","filterable","filterPlaceholder","sortFilteredOptions","searchInputRef","listboxRef","filterQuery","onFilterChange","listBoxLabel","listBoxLabelledBy","autocomplete","name","onAutocompleteSelect","intl","useIntl","virtualiserHandlerRef","useRef","controllerRef","initialRender","setInitialRender","useState","needle","useMemo","searchableString","undefined","useEffect","requestAnimationFrame","current","hasAttribute","dispatchEvent","KeyboardEvent","key","bubbles","a","b","filteredItems","dedupedItems","dedupeSelectInputItems","filtered","map","item","type","selectInputOptionItemIncludesNeedle","value","options","option","sortSelectInputItems","filterSelectInputItems","resultsEmpty","length","virtualized","MAX_ITEMS_WITHOUT_VIRTUALIZATION","mountedIndexes","setMountedIndexes","prevNeedleRef","needleChanged","prevMountedIndexes","Set","listboxContainerRef","style","setProperty","offsetHeight","showStatus","statusId","useId","listboxId","getItemNode","index","_jsx","SelectInputItemView","findMatchingItem","autocompleteValue","flatOptions","flatMap","filter","exactMatch","find","filterMatchers","some","matcher","fuzzyMatch","toLowerCase","includes","_jsxs","ListboxOptions","modal","as","SelectInputOptionsContainer","static","className","onAriaActiveDescendantChange","setAttribute","removeAttribute","children","SearchInput","ref","autoComplete","role","shape","placeholder","defaultValue","onKeyDown","event","test","stopPropagation","onChange","inputValue","currentTarget","onInput","inputElement","setTimeout","matchedValue","tabIndex","clsx","CrossCircle","size","formatMessage","messages","noResultsFound","_","Virtualizer","data","keepMounted","scrollRef","onScroll","startIndex","findItemIndex","scrollOffset","endIndex","viewportSize","visibleIndexes","push","sort","SelectInputItemsCountContext","Provider","SelectInputItemPositionContext","queryNormalized"],"mappings":"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"}
+{"version":3,"file":"SelectInputOptions.js","sources":["../../../../src/inputs/SelectInput/Options/SelectInputOptions.tsx"],"sourcesContent":["import { CrossCircle } from '@transferwise/icons';\nimport { ListboxOptions } from '@headlessui/react';\nimport { clsx } from 'clsx';\nimport { useEffect, useId, useMemo, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\nimport { Virtualizer, type VirtualizerHandle } from 'virtua';\n\nimport { SearchInput } from '../../SearchInput';\nimport {\n  SelectInputItemsCountContext,\n  SelectInputItemPositionContext,\n} from '../SelectInput.contexts';\nimport {\n  dedupeSelectInputItems,\n  filterSelectInputItems,\n  MAX_ITEMS_WITHOUT_VIRTUALIZATION,\n  searchableString,\n  selectInputOptionItemIncludesNeedle,\n  sortSelectInputItems,\n} from '../SelectInput.utils';\nimport { SelectInputOptionItem, SelectInputProps, SelectInputItem } from '../SelectInput.types';\nimport messages from '../SelectInput.messages';\n\nimport { SelectInputItemView } from '../ItemView';\nimport { SelectInputOptionsContainer } from './OptionsContainer';\n\n/**\n * Props for the SelectInputOptions component.\n */\nexport interface SelectInputOptionsProps<T = string> extends Pick<\n  SelectInputProps<T>,\n  | 'items'\n  | 'renderValue'\n  | 'renderFooter'\n  | 'filterable'\n  | 'filterPlaceholder'\n  | 'id'\n  | 'parentId'\n  | 'compareValues'\n  | 'sortFilteredOptions'\n> {\n  searchInputRef: React.MutableRefObject<HTMLInputElement | null>;\n  listboxRef: React.MutableRefObject<HTMLDivElement | null>;\n  filterQuery: string;\n  onFilterChange: (query: string) => void;\n  listBoxLabel?: string;\n  listBoxLabelledBy?: string;\n  autocomplete?: string;\n  name?: string;\n  onAutocompleteSelect?: (value: T) => void;\n}\n\n/**\n * The main options container component for SelectInput.\n * Manages filtering, virtualisation, and rendering of options.\n */\nexport function SelectInputOptions<T = string>({\n  id,\n  parentId,\n  items,\n  compareValues: compareValuesProp,\n  renderValue = String,\n  renderFooter,\n  filterable = false,\n  filterPlaceholder,\n  sortFilteredOptions,\n  searchInputRef,\n  listboxRef,\n  filterQuery,\n  onFilterChange,\n  listBoxLabel,\n  listBoxLabelledBy,\n  autocomplete,\n  name,\n  onAutocompleteSelect,\n}: SelectInputOptionsProps<T>) {\n  const intl = useIntl();\n  const virtualiserHandlerRef = useRef<VirtualizerHandle>(null);\n  const controllerRef = filterable ? searchInputRef : listboxRef;\n  const initialRenderRef = useRef(true);\n\n  const needle = useMemo(() => {\n    if (filterable) {\n      return filterQuery ? searchableString(filterQuery) : null;\n    }\n    return undefined;\n  }, [filterQuery, filterable]);\n  useEffect(() => {\n    if (needle) {\n      // Ensure having an active option while filtering.\n      // Without `requestAnimationFrame` upon which React depends for scheduling\n      // updates, the active status would only show for a split second and then\n      // disappear inadvertently.\n      requestAnimationFrame(() => {\n        if (\n          controllerRef.current != null &&\n          !controllerRef.current.hasAttribute('aria-activedescendant')\n        ) {\n          // Activate first option via synthetic key press\n          controllerRef.current.dispatchEvent(\n            new KeyboardEvent('keydown', { key: 'Home', bubbles: true }),\n          );\n        }\n      });\n    }\n  }, [controllerRef, needle]);\n\n  const compareValues = useMemo(() => {\n    if (!compareValuesProp) {\n      return undefined;\n    }\n\n    if (typeof compareValuesProp === 'function') {\n      return (a: NonNullable<T>, b: NonNullable<T>) => compareValuesProp(a, b);\n    }\n\n    const key = compareValuesProp;\n    return (a: NonNullable<T>, b: NonNullable<T>) => {\n      if (typeof a === 'object' && a != null && typeof b === 'object' && b != null) {\n        return (a as Record<string, unknown>)[key] === (b as Record<string, unknown>)[key];\n      }\n      return a === b;\n    };\n  }, [compareValuesProp]);\n\n  const filteredItems: readonly SelectInputItem<NonNullable<T> | undefined>[] = useMemo(() => {\n    if (needle == null) {\n      return items;\n    }\n\n    const dedupedItems = dedupeSelectInputItems(items, compareValues);\n\n    if (sortFilteredOptions) {\n      // When sorting, filter out non-matching items completely to avoid ghost items\n      const filtered = dedupedItems.map((item) => {\n        if (item.type === 'option') {\n          return selectInputOptionItemIncludesNeedle(item, needle)\n            ? item\n            : { ...item, value: undefined };\n        }\n        if (item.type === 'group') {\n          return {\n            ...item,\n            options: item.options.map((option) =>\n              selectInputOptionItemIncludesNeedle(option, needle)\n                ? option\n                : { ...option, value: undefined },\n            ),\n          };\n        }\n        return item;\n      });\n\n      return sortSelectInputItems(filtered, sortFilteredOptions, filterQuery);\n    }\n\n    return filterSelectInputItems(dedupedItems, (item) =>\n      selectInputOptionItemIncludesNeedle(item, needle),\n    );\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [needle, items, compareValues]);\n  const resultsEmpty = needle != null && filteredItems.length === 0;\n\n  const virtualized = filteredItems.length > MAX_ITEMS_WITHOUT_VIRTUALIZATION;\n\n  // Items shown once shall be kept mounted until the needle changes, otherwise\n  // the scroll position may jump around inadvertently. Pattern adopted from:\n  // https://inokawa.github.io/virtua/?path=/story/advanced-keep-offscreen-items--append-only\n  const [virtualState, setVirtualState] = useState<{\n    needle: typeof needle;\n    length: number;\n    mountedIndexes: number[];\n  }>({\n    needle,\n    length: filteredItems.length,\n    mountedIndexes: [],\n  });\n\n  // Note: virtualState.mountedIndexes is in deps but only read in the guarded branch.\n  // This means external updates to mountedIndexes will trigger this effect but hit the guard\n  // and bail out early. This is intentional and harmless - the guard ensures no unnecessary work.\n  useEffect(() => {\n    if (virtualState.needle !== needle || virtualState.length !== filteredItems.length) {\n      const needleChanged = virtualState.needle !== needle;\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- Syncing virtual scroll state with filtered items\n      setVirtualState({\n        needle,\n        length: filteredItems.length,\n        mountedIndexes: needleChanged\n          ? [] // Reset on needle change\n          : filteredItems.length > 0\n            ? [...new Set([...virtualState.mountedIndexes, filteredItems.length - 1])] // Add last index\n            : virtualState.mountedIndexes,\n      });\n    }\n  }, [\n    needle,\n    filteredItems.length,\n    virtualState.needle,\n    virtualState.length,\n    virtualState.mountedIndexes,\n  ]);\n\n  const { mountedIndexes } = virtualState;\n\n  const listboxContainerRef = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    if (listboxContainerRef.current != null) {\n      listboxContainerRef.current.style.setProperty(\n        '--initial-height',\n        `${listboxContainerRef.current.offsetHeight}px`,\n      );\n    }\n  }, []);\n\n  useEffect(() => {\n    initialRenderRef.current = false;\n  }, []);\n\n  const showStatus = resultsEmpty;\n  const statusId = useId();\n  const listboxId = useId();\n\n  const getItemNode = (index: number) => {\n    const item = filteredItems[index];\n    return (\n      <SelectInputItemView key={index} item={item} renderValue={renderValue} needle={needle} />\n    );\n  };\n\n  const findMatchingItem = (autocompleteValue: string): T | null => {\n    const flatOptions = items\n      .flatMap((item) =>\n        item.type === 'group' ? item.options : item.type === 'option' ? [item] : [],\n      )\n      .filter(\n        (item): item is SelectInputOptionItem<NonNullable<T>> =>\n          item.type === 'option' && item.value != null,\n      );\n\n    const exactMatch = flatOptions.find(\n      (option) =>\n        String(option.value) === autocompleteValue ||\n        option.filterMatchers?.some((matcher) => matcher === autocompleteValue),\n    );\n\n    if (exactMatch) {\n      return exactMatch.value;\n    }\n\n    const fuzzyMatch = flatOptions.find((option) =>\n      option.filterMatchers?.some((matcher) =>\n        matcher.toLowerCase().includes(autocompleteValue.toLowerCase()),\n      ),\n    );\n\n    return fuzzyMatch ? fuzzyMatch.value : null;\n  };\n\n  return (\n    <ListboxOptions\n      modal\n      as={SelectInputOptionsContainer}\n      static\n      className=\"np-select-input-options-container\"\n      onAriaActiveDescendantChange={(value: React.AriaAttributes['aria-activedescendant']) => {\n        if (controllerRef.current != null) {\n          if (!initialRenderRef.current && value != null) {\n            controllerRef.current.setAttribute('aria-activedescendant', value);\n          } else {\n            controllerRef.current.removeAttribute('aria-activedescendant');\n          }\n        }\n      }}\n    >\n      {filterable ? (\n        <div className=\"np-select-input-query-container\">\n          <SearchInput\n            ref={searchInputRef}\n            id={id}\n            name={name}\n            autoComplete={autocomplete}\n            role=\"combobox\"\n            shape=\"rectangle\"\n            placeholder={filterPlaceholder}\n            aria-label={filterPlaceholder}\n            defaultValue={filterQuery}\n            aria-autocomplete=\"list\"\n            aria-expanded\n            aria-controls={listboxId}\n            aria-describedby={showStatus ? statusId : undefined}\n            onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {\n              // Prevent interfering with the matcher of Headless UI\n              // https://mathiasbynens.be/notes/javascript-unicode#regex\n              if (/^.$/u.test(event.key)) {\n                event.stopPropagation();\n              }\n            }}\n            onChange={(event) => {\n              // Free up resources and ensure not to go out of bounds when the\n              // resulting item count is less than before\n              const inputValue = event.currentTarget.value;\n\n              // Free up resources and ensure not to go out of bounds\n              setVirtualState((prev) => ({ ...prev, mountedIndexes: [] }));\n              onFilterChange(inputValue);\n            }}\n            onInput={(event) => {\n              const inputValue = event.currentTarget.value;\n              const inputElement = event.currentTarget;\n\n              if (autocomplete && onAutocompleteSelect && inputValue) {\n                setTimeout(() => {\n                  if (inputElement.value === inputValue && inputValue.length > 2) {\n                    const matchedValue = findMatchingItem(inputValue);\n                    if (matchedValue !== null) {\n                      onAutocompleteSelect(matchedValue);\n                    }\n                  }\n                }, 50);\n              }\n            }}\n          />\n        </div>\n      ) : null}\n\n      <section\n        ref={listboxContainerRef}\n        tabIndex={-1}\n        className={clsx(\n          'np-select-input-listbox-container',\n          virtualized && 'np-select-input-listbox-container--virtualized',\n          needle == null && // Groups aren't shown when filtering\n            items.some((item) => item.type === 'group') &&\n            'np-select-input-listbox-container--has-group',\n        )}\n        data-wds-parent={parentId ?? undefined}\n      >\n        {resultsEmpty ? (\n          <div id={statusId} className=\"np-select-input-options-status\">\n            <CrossCircle size={16} className=\"np-select-input-options-status-icon\" />\n            {intl.formatMessage(messages.noResultsFound)}\n          </div>\n        ) : null}\n\n        <div\n          ref={listboxRef}\n          id={listboxId}\n          role=\"listbox\"\n          aria-orientation=\"vertical\"\n          aria-label={listBoxLabel}\n          aria-labelledby={listBoxLabelledBy}\n          tabIndex={0}\n          className=\"np-select-input-listbox\"\n        >\n          {!virtualized ? (\n            filteredItems.map((_, index) => getItemNode(index))\n          ) : (\n            <Virtualizer\n              ref={virtualiserHandlerRef}\n              data={filteredItems}\n              keepMounted={mountedIndexes}\n              scrollRef={listboxRef} // `VList` doesn't expose this\n              onScroll={async () => {\n                if (!virtualiserHandlerRef.current) return;\n\n                const startIndex = virtualiserHandlerRef.current.findItemIndex(\n                  virtualiserHandlerRef.current.scrollOffset,\n                );\n                const endIndex = virtualiserHandlerRef.current.findItemIndex(\n                  virtualiserHandlerRef.current.scrollOffset +\n                    virtualiserHandlerRef.current.viewportSize,\n                );\n\n                setVirtualState((prev) => {\n                  // Create an array of all indexes that should be visible\n\n                  const visibleIndexes = [];\n                  for (let index = startIndex; index <= endIndex; index += 1) {\n                    // eslint-disable-next-line functional/immutable-data\n                    visibleIndexes.push(index);\n                  }\n\n                  // Combine with previous indexes and sort\n                  const newMountedIndexes = [\n                    ...new Set([...prev.mountedIndexes, ...visibleIndexes]),\n                  ].sort((a, b) => a - b);\n\n                  return { ...prev, mountedIndexes: newMountedIndexes };\n                });\n              }}\n            >\n              {(item, index) => (\n                // The position of each item can't be inferred by browsers when\n                // virtualizing, as some of the items may not be in the DOM\n                <SelectInputItemsCountContext.Provider value={filteredItems.length}>\n                  <SelectInputItemPositionContext.Provider value={index + 1}>\n                    {getItemNode(index)}\n                  </SelectInputItemPositionContext.Provider>\n                </SelectInputItemsCountContext.Provider>\n              )}\n            </Virtualizer>\n          )}\n        </div>\n\n        {renderFooter != null ? (\n          <footer className=\"np-select-input-footer\">\n            <div\n              role=\"none\"\n              onKeyDown={(event) => {\n                // Prevent interfering with Headless UI\n                if (event.key !== 'Escape') {\n                  event.stopPropagation();\n                }\n              }}\n            >\n              {renderFooter({\n                resultsEmpty,\n                queryNormalized: needle,\n              })}\n            </div>\n          </footer>\n        ) : null}\n      </section>\n    </ListboxOptions>\n  );\n}\n"],"names":["SelectInputOptions","id","parentId","items","compareValues","compareValuesProp","renderValue","String","renderFooter","filterable","filterPlaceholder","sortFilteredOptions","searchInputRef","listboxRef","filterQuery","onFilterChange","listBoxLabel","listBoxLabelledBy","autocomplete","name","onAutocompleteSelect","intl","useIntl","virtualiserHandlerRef","useRef","controllerRef","initialRenderRef","needle","useMemo","searchableString","undefined","useEffect","requestAnimationFrame","current","hasAttribute","dispatchEvent","KeyboardEvent","key","bubbles","a","b","filteredItems","dedupedItems","dedupeSelectInputItems","filtered","map","item","type","selectInputOptionItemIncludesNeedle","value","options","option","sortSelectInputItems","filterSelectInputItems","resultsEmpty","length","virtualized","MAX_ITEMS_WITHOUT_VIRTUALIZATION","virtualState","setVirtualState","useState","mountedIndexes","needleChanged","Set","listboxContainerRef","style","setProperty","offsetHeight","showStatus","statusId","useId","listboxId","getItemNode","index","_jsx","SelectInputItemView","findMatchingItem","autocompleteValue","flatOptions","flatMap","filter","exactMatch","find","filterMatchers","some","matcher","fuzzyMatch","toLowerCase","includes","_jsxs","ListboxOptions","modal","as","SelectInputOptionsContainer","static","className","onAriaActiveDescendantChange","setAttribute","removeAttribute","children","SearchInput","ref","autoComplete","role","shape","placeholder","defaultValue","onKeyDown","event","test","stopPropagation","onChange","inputValue","currentTarget","prev","onInput","inputElement","setTimeout","matchedValue","tabIndex","clsx","CrossCircle","size","formatMessage","messages","noResultsFound","_","Virtualizer","data","keepMounted","scrollRef","onScroll","startIndex","findItemIndex","scrollOffset","endIndex","viewportSize","visibleIndexes","push","newMountedIndexes","sort","SelectInputItemsCountContext","Provider","SelectInputItemPositionContext","queryNormalized"],"mappings":";;;;;;;;;;;;;;;;;AAwDM,SAAUA,kBAAkBA,CAAa;EAC7CC,EAAE;EACFC,QAAQ;EACRC,KAAK;AACLC,EAAAA,aAAa,EAAEC,iBAAiB;AAChCC,EAAAA,WAAW,GAAGC,MAAM;EACpBC,YAAY;AACZC,EAAAA,UAAU,GAAG,KAAK;EAClBC,iBAAiB;EACjBC,mBAAmB;EACnBC,cAAc;EACdC,UAAU;EACVC,WAAW;EACXC,cAAc;EACdC,YAAY;EACZC,iBAAiB;EACjBC,YAAY;EACZC,IAAI;AACJC,EAAAA;AAAoB,CACO,EAAA;AAC3B,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;AACtB,EAAA,MAAMC,qBAAqB,GAAGC,YAAM,CAAoB,IAAI,CAAC;AAC7D,EAAA,MAAMC,aAAa,GAAGhB,UAAU,GAAGG,cAAc,GAAGC,UAAU;AAC9D,EAAA,MAAMa,gBAAgB,GAAGF,YAAM,CAAC,IAAI,CAAC;AAErC,EAAA,MAAMG,MAAM,GAAGC,aAAO,CAAC,MAAK;AAC1B,IAAA,IAAInB,UAAU,EAAE;AACd,MAAA,OAAOK,WAAW,GAAGe,kCAAgB,CAACf,WAAW,CAAC,GAAG,IAAI;AAC3D,IAAA;AACA,IAAA,OAAOgB,SAAS;AAClB,EAAA,CAAC,EAAE,CAAChB,WAAW,EAAEL,UAAU,CAAC,CAAC;AAC7BsB,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAIJ,MAAM,EAAE;AACV;AACA;AACA;AACA;AACAK,MAAAA,qBAAqB,CAAC,MAAK;AACzB,QAAA,IACEP,aAAa,CAACQ,OAAO,IAAI,IAAI,IAC7B,CAACR,aAAa,CAACQ,OAAO,CAACC,YAAY,CAAC,uBAAuB,CAAC,EAC5D;AACA;UACAT,aAAa,CAACQ,OAAO,CAACE,aAAa,CACjC,IAAIC,aAAa,CAAC,SAAS,EAAE;AAAEC,YAAAA,GAAG,EAAE,MAAM;AAAEC,YAAAA,OAAO,EAAE;AAAI,WAAE,CAAC,CAC7D;AACH,QAAA;AACF,MAAA,CAAC,CAAC;AACJ,IAAA;AACF,EAAA,CAAC,EAAE,CAACb,aAAa,EAAEE,MAAM,CAAC,CAAC;AAE3B,EAAA,MAAMvB,aAAa,GAAGwB,aAAO,CAAC,MAAK;IACjC,IAAI,CAACvB,iBAAiB,EAAE;AACtB,MAAA,OAAOyB,SAAS;AAClB,IAAA;AAEA,IAAA,IAAI,OAAOzB,iBAAiB,KAAK,UAAU,EAAE;MAC3C,OAAO,CAACkC,CAAiB,EAAEC,CAAiB,KAAKnC,iBAAiB,CAACkC,CAAC,EAAEC,CAAC,CAAC;AAC1E,IAAA;IAEA,MAAMH,GAAG,GAAGhC,iBAAiB;AAC7B,IAAA,OAAO,CAACkC,CAAiB,EAAEC,CAAiB,KAAI;AAC9C,MAAA,IAAI,OAAOD,CAAC,KAAK,QAAQ,IAAIA,CAAC,IAAI,IAAI,IAAI,OAAOC,CAAC,KAAK,QAAQ,IAAIA,CAAC,IAAI,IAAI,EAAE;QAC5E,OAAQD,CAA6B,CAACF,GAAG,CAAC,KAAMG,CAA6B,CAACH,GAAG,CAAC;AACpF,MAAA;MACA,OAAOE,CAAC,KAAKC,CAAC;IAChB,CAAC;AACH,EAAA,CAAC,EAAE,CAACnC,iBAAiB,CAAC,CAAC;AAEvB,EAAA,MAAMoC,aAAa,GAA2Db,aAAO,CAAC,MAAK;IACzF,IAAID,MAAM,IAAI,IAAI,EAAE;AAClB,MAAA,OAAOxB,KAAK;AACd,IAAA;AAEA,IAAA,MAAMuC,YAAY,GAAGC,wCAAsB,CAACxC,KAAK,EAAEC,aAAa,CAAC;AAEjE,IAAA,IAAIO,mBAAmB,EAAE;AACvB;AACA,MAAA,MAAMiC,QAAQ,GAAGF,YAAY,CAACG,GAAG,CAAEC,IAAI,IAAI;AACzC,QAAA,IAAIA,IAAI,CAACC,IAAI,KAAK,QAAQ,EAAE;UAC1B,OAAOC,qDAAmC,CAACF,IAAI,EAAEnB,MAAM,CAAC,GACpDmB,IAAI,GACJ;AAAE,YAAA,GAAGA,IAAI;AAAEG,YAAAA,KAAK,EAAEnB;WAAW;AACnC,QAAA;AACA,QAAA,IAAIgB,IAAI,CAACC,IAAI,KAAK,OAAO,EAAE;UACzB,OAAO;AACL,YAAA,GAAGD,IAAI;AACPI,YAAAA,OAAO,EAAEJ,IAAI,CAACI,OAAO,CAACL,GAAG,CAAEM,MAAM,IAC/BH,qDAAmC,CAACG,MAAM,EAAExB,MAAM,CAAC,GAC/CwB,MAAM,GACN;AAAE,cAAA,GAAGA,MAAM;AAAEF,cAAAA,KAAK,EAAEnB;aAAW;WAEtC;AACH,QAAA;AACA,QAAA,OAAOgB,IAAI;AACb,MAAA,CAAC,CAAC;AAEF,MAAA,OAAOM,sCAAoB,CAACR,QAAQ,EAAEjC,mBAAmB,EAAEG,WAAW,CAAC;AACzE,IAAA;AAEA,IAAA,OAAOuC,wCAAsB,CAACX,YAAY,EAAGI,IAAI,IAC/CE,qDAAmC,CAACF,IAAI,EAAEnB,MAAM,CAAC,CAClD;AACD;EACF,CAAC,EAAE,CAACA,MAAM,EAAExB,KAAK,EAAEC,aAAa,CAAC,CAAC;EAClC,MAAMkD,YAAY,GAAG3B,MAAM,IAAI,IAAI,IAAIc,aAAa,CAACc,MAAM,KAAK,CAAC;AAEjE,EAAA,MAAMC,WAAW,GAAGf,aAAa,CAACc,MAAM,GAAGE,kDAAgC;AAE3E;AACA;AACA;AACA,EAAA,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGC,cAAQ,CAI7C;IACDjC,MAAM;IACN4B,MAAM,EAAEd,aAAa,CAACc,MAAM;AAC5BM,IAAAA,cAAc,EAAE;AACjB,GAAA,CAAC;AAEF;AACA;AACA;AACA9B,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAI2B,YAAY,CAAC/B,MAAM,KAAKA,MAAM,IAAI+B,YAAY,CAACH,MAAM,KAAKd,aAAa,CAACc,MAAM,EAAE;AAClF,MAAA,MAAMO,aAAa,GAAGJ,YAAY,CAAC/B,MAAM,KAAKA,MAAM;AACpD;AACAgC,MAAAA,eAAe,CAAC;QACdhC,MAAM;QACN4B,MAAM,EAAEd,aAAa,CAACc,MAAM;AAC5BM,QAAAA,cAAc,EAAEC,aAAa,GACzB,EAAE;UACFrB,aAAa,CAACc,MAAM,GAAG,CAAC,GACtB,CAAC,GAAG,IAAIQ,GAAG,CAAC,CAAC,GAAGL,YAAY,CAACG,cAAc,EAAEpB,aAAa,CAACc,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;AAAC,UACzEG,YAAY,CAACG;AACpB,OAAA,CAAC;AACJ,IAAA;EACF,CAAC,EAAE,CACDlC,MAAM,EACNc,aAAa,CAACc,MAAM,EACpBG,YAAY,CAAC/B,MAAM,EACnB+B,YAAY,CAACH,MAAM,EACnBG,YAAY,CAACG,cAAc,CAC5B,CAAC;EAEF,MAAM;AAAEA,IAAAA;AAAc,GAAE,GAAGH,YAAY;AAEvC,EAAA,MAAMM,mBAAmB,GAAGxC,YAAM,CAAiB,IAAI,CAAC;AACxDO,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAIiC,mBAAmB,CAAC/B,OAAO,IAAI,IAAI,EAAE;AACvC+B,MAAAA,mBAAmB,CAAC/B,OAAO,CAACgC,KAAK,CAACC,WAAW,CAC3C,kBAAkB,EAClB,CAAA,EAAGF,mBAAmB,CAAC/B,OAAO,CAACkC,YAAY,IAAI,CAChD;AACH,IAAA;EACF,CAAC,EAAE,EAAE,CAAC;AAENpC,EAAAA,eAAS,CAAC,MAAK;IACbL,gBAAgB,CAACO,OAAO,GAAG,KAAK;EAClC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMmC,UAAU,GAAGd,YAAY;AAC/B,EAAA,MAAMe,QAAQ,GAAGC,WAAK,EAAE;AACxB,EAAA,MAAMC,SAAS,GAAGD,WAAK,EAAE;EAEzB,MAAME,WAAW,GAAIC,KAAa,IAAI;AACpC,IAAA,MAAM3B,IAAI,GAAGL,aAAa,CAACgC,KAAK,CAAC;IACjC,oBACEC,cAAA,CAACC,uCAAmB,EAAA;AAAa7B,MAAAA,IAAI,EAAEA,IAAK;AAACxC,MAAAA,WAAW,EAAEA,WAAY;AAACqB,MAAAA,MAAM,EAAEA;AAAO,KAAA,EAA5D8C,KAA4D,CAAG;EAE7F,CAAC;EAED,MAAMG,gBAAgB,GAAIC,iBAAyB,IAAc;IAC/D,MAAMC,WAAW,GAAG3E,KAAK,CACtB4E,OAAO,CAAEjC,IAAI,IACZA,IAAI,CAACC,IAAI,KAAK,OAAO,GAAGD,IAAI,CAACI,OAAO,GAAGJ,IAAI,CAACC,IAAI,KAAK,QAAQ,GAAG,CAACD,IAAI,CAAC,GAAG,EAAE,CAC5E,CACAkC,MAAM,CACJlC,IAAI,IACHA,IAAI,CAACC,IAAI,KAAK,QAAQ,IAAID,IAAI,CAACG,KAAK,IAAI,IAAI,CAC/C;AAEH,IAAA,MAAMgC,UAAU,GAAGH,WAAW,CAACI,IAAI,CAChC/B,MAAM,IACL5C,MAAM,CAAC4C,MAAM,CAACF,KAAK,CAAC,KAAK4B,iBAAiB,IAC1C1B,MAAM,CAACgC,cAAc,EAAEC,IAAI,CAAEC,OAAO,IAAKA,OAAO,KAAKR,iBAAiB,CAAC,CAC1E;AAED,IAAA,IAAII,UAAU,EAAE;MACd,OAAOA,UAAU,CAAChC,KAAK;AACzB,IAAA;AAEA,IAAA,MAAMqC,UAAU,GAAGR,WAAW,CAACI,IAAI,CAAE/B,MAAM,IACzCA,MAAM,CAACgC,cAAc,EAAEC,IAAI,CAAEC,OAAO,IAClCA,OAAO,CAACE,WAAW,EAAE,CAACC,QAAQ,CAACX,iBAAiB,CAACU,WAAW,EAAE,CAAC,CAChE,CACF;AAED,IAAA,OAAOD,UAAU,GAAGA,UAAU,CAACrC,KAAK,GAAG,IAAI;EAC7C,CAAC;EAED,oBACEwC,eAAA,CAACC,oBAAc,EAAA;IACbC,KAAK,EAAA,IAAA;AACLC,IAAAA,EAAE,EAAEC,uDAA4B;IAChCC,MAAM,EAAA,IAAA;AACNC,IAAAA,SAAS,EAAC,mCAAmC;IAC7CC,4BAA4B,EAAG/C,KAAoD,IAAI;AACrF,MAAA,IAAIxB,aAAa,CAACQ,OAAO,IAAI,IAAI,EAAE;QACjC,IAAI,CAACP,gBAAgB,CAACO,OAAO,IAAIgB,KAAK,IAAI,IAAI,EAAE;UAC9CxB,aAAa,CAACQ,OAAO,CAACgE,YAAY,CAAC,uBAAuB,EAAEhD,KAAK,CAAC;AACpE,QAAA,CAAC,MAAM;AACLxB,UAAAA,aAAa,CAACQ,OAAO,CAACiE,eAAe,CAAC,uBAAuB,CAAC;AAChE,QAAA;AACF,MAAA;IACF,CAAE;IAAAC,QAAA,EAAA,CAED1F,UAAU,gBACTiE,cAAA,CAAA,KAAA,EAAA;AAAKqB,MAAAA,SAAS,EAAC,iCAAiC;MAAAI,QAAA,eAC9CzB,cAAA,CAAC0B,uBAAW,EAAA;AACVC,QAAAA,GAAG,EAAEzF,cAAe;AACpBX,QAAAA,EAAE,EAAEA,EAAG;AACPkB,QAAAA,IAAI,EAAEA,IAAK;AACXmF,QAAAA,YAAY,EAAEpF,YAAa;AAC3BqF,QAAAA,IAAI,EAAC,UAAU;AACfC,QAAAA,KAAK,EAAC,WAAW;AACjBC,QAAAA,WAAW,EAAE/F,iBAAkB;AAC/B,QAAA,YAAA,EAAYA,iBAAkB;AAC9BgG,QAAAA,YAAY,EAAE5F,WAAY;AAC1B,QAAA,mBAAA,EAAkB,MAAM;QACxB,eAAA,EAAA,IAAa;AACb,QAAA,eAAA,EAAeyD,SAAU;AACzB,QAAA,kBAAA,EAAkBH,UAAU,GAAGC,QAAQ,GAAGvC,SAAU;QACpD6E,SAAS,EAAGC,KAA4C,IAAI;AAC1D;AACA;UACA,IAAI,MAAM,CAACC,IAAI,CAACD,KAAK,CAACvE,GAAG,CAAC,EAAE;YAC1BuE,KAAK,CAACE,eAAe,EAAE;AACzB,UAAA;QACF,CAAE;QACFC,QAAQ,EAAGH,KAAK,IAAI;AAClB;AACA;AACA,UAAA,MAAMI,UAAU,GAAGJ,KAAK,CAACK,aAAa,CAAChE,KAAK;AAE5C;UACAU,eAAe,CAAEuD,IAAI,KAAM;AAAE,YAAA,GAAGA,IAAI;AAAErD,YAAAA,cAAc,EAAE;AAAE,WAAE,CAAC,CAAC;UAC5D9C,cAAc,CAACiG,UAAU,CAAC;QAC5B,CAAE;QACFG,OAAO,EAAGP,KAAK,IAAI;AACjB,UAAA,MAAMI,UAAU,GAAGJ,KAAK,CAACK,aAAa,CAAChE,KAAK;AAC5C,UAAA,MAAMmE,YAAY,GAAGR,KAAK,CAACK,aAAa;AAExC,UAAA,IAAI/F,YAAY,IAAIE,oBAAoB,IAAI4F,UAAU,EAAE;AACtDK,YAAAA,UAAU,CAAC,MAAK;cACd,IAAID,YAAY,CAACnE,KAAK,KAAK+D,UAAU,IAAIA,UAAU,CAACzD,MAAM,GAAG,CAAC,EAAE;AAC9D,gBAAA,MAAM+D,YAAY,GAAG1C,gBAAgB,CAACoC,UAAU,CAAC;gBACjD,IAAIM,YAAY,KAAK,IAAI,EAAE;kBACzBlG,oBAAoB,CAACkG,YAAY,CAAC;AACpC,gBAAA;AACF,cAAA;YACF,CAAC,EAAE,EAAE,CAAC;AACR,UAAA;AACF,QAAA;OAAE;AAEN,KAAK,CAAC,GACJ,IAAI,eAER7B,eAAA,CAAA,SAAA,EAAA;AACEY,MAAAA,GAAG,EAAErC,mBAAoB;MACzBuD,QAAQ,EAAE,EAAG;MACbxB,SAAS,EAAEyB,SAAI,CACb,mCAAmC,EACnChE,WAAW,IAAI,gDAAgD,EAC/D7B,MAAM,IAAI,IAAI;AAAI;AAChBxB,MAAAA,KAAK,CAACiF,IAAI,CAAEtC,IAAI,IAAKA,IAAI,CAACC,IAAI,KAAK,OAAO,CAAC,IAC3C,8CAA8C,CAChD;MACF,iBAAA,EAAiB7C,QAAQ,IAAI4B,SAAU;MAAAqE,QAAA,EAAA,CAEtC7C,YAAY,gBACXmC,eAAA,CAAA,KAAA,EAAA;AAAKxF,QAAAA,EAAE,EAAEoE,QAAS;AAAC0B,QAAAA,SAAS,EAAC,gCAAgC;QAAAI,QAAA,EAAA,cAC3DzB,cAAA,CAAC+C,iBAAW,EAAA;AAACC,UAAAA,IAAI,EAAE,EAAG;AAAC3B,UAAAA,SAAS,EAAC;SAAqC,CACtE,EAAC1E,IAAI,CAACsG,aAAa,CAACC,4BAAQ,CAACC,cAAc,CAAC;AAAA,OACzC,CAAC,GACJ,IAAI,eAERnD,cAAA,CAAA,KAAA,EAAA;AACE2B,QAAAA,GAAG,EAAExF,UAAW;AAChBZ,QAAAA,EAAE,EAAEsE,SAAU;AACdgC,QAAAA,IAAI,EAAC,SAAS;AACd,QAAA,kBAAA,EAAiB,UAAU;AAC3B,QAAA,YAAA,EAAYvF,YAAa;AACzB,QAAA,iBAAA,EAAiBC,iBAAkB;AACnCsG,QAAAA,QAAQ,EAAE,CAAE;AACZxB,QAAAA,SAAS,EAAC,yBAAyB;QAAAI,QAAA,EAElC,CAAC3C,WAAW,GACXf,aAAa,CAACI,GAAG,CAAC,CAACiF,CAAC,EAAErD,KAAK,KAAKD,WAAW,CAACC,KAAK,CAAC,CAAC,gBAEnDC,cAAA,CAACqD,kBAAW,EAAA;AACV1B,UAAAA,GAAG,EAAE9E,qBAAsB;AAC3ByG,UAAAA,IAAI,EAAEvF,aAAc;AACpBwF,UAAAA,WAAW,EAAEpE,cAAe;UAC5BqE,SAAS,EAAErH,UAAW;AAAC;UACvBsH,QAAQ,EAAE,YAAW;AACnB,YAAA,IAAI,CAAC5G,qBAAqB,CAACU,OAAO,EAAE;AAEpC,YAAA,MAAMmG,UAAU,GAAG7G,qBAAqB,CAACU,OAAO,CAACoG,aAAa,CAC5D9G,qBAAqB,CAACU,OAAO,CAACqG,YAAY,CAC3C;AACD,YAAA,MAAMC,QAAQ,GAAGhH,qBAAqB,CAACU,OAAO,CAACoG,aAAa,CAC1D9G,qBAAqB,CAACU,OAAO,CAACqG,YAAY,GACxC/G,qBAAqB,CAACU,OAAO,CAACuG,YAAY,CAC7C;YAED7E,eAAe,CAAEuD,IAAI,IAAI;AACvB;cAEA,MAAMuB,cAAc,GAAG,EAAE;AACzB,cAAA,KAAK,IAAIhE,KAAK,GAAG2D,UAAU,EAAE3D,KAAK,IAAI8D,QAAQ,EAAE9D,KAAK,IAAI,CAAC,EAAE;AAC1D;AACAgE,gBAAAA,cAAc,CAACC,IAAI,CAACjE,KAAK,CAAC;AAC5B,cAAA;AAEA;AACA,cAAA,MAAMkE,iBAAiB,GAAG,CACxB,GAAG,IAAI5E,GAAG,CAAC,CAAC,GAAGmD,IAAI,CAACrD,cAAc,EAAE,GAAG4E,cAAc,CAAC,CAAC,CACxD,CAACG,IAAI,CAAC,CAACrG,CAAC,EAAEC,CAAC,KAAKD,CAAC,GAAGC,CAAC,CAAC;cAEvB,OAAO;AAAE,gBAAA,GAAG0E,IAAI;AAAErD,gBAAAA,cAAc,EAAE8E;eAAmB;AACvD,YAAA,CAAC,CAAC;UACJ,CAAE;AAAAxC,UAAAA,QAAA,EAEDA,CAACrD,IAAI,EAAE2B,KAAK;AAAA;AACX;AACA;UACAC,cAAA,CAACmE,iDAA4B,CAACC,QAAQ,EAAA;YAAC7F,KAAK,EAAER,aAAa,CAACc,MAAO;AAAA4C,YAAAA,QAAA,eACjEzB,cAAA,CAACqE,mDAA8B,CAACD,QAAQ,EAAA;cAAC7F,KAAK,EAAEwB,KAAK,GAAG,CAAE;cAAA0B,QAAA,EACvD3B,WAAW,CAACC,KAAK;aACqB;WACJ;SAE9B;AACd,OACE,CAEL,EAACjE,YAAY,IAAI,IAAI,gBACnBkE,cAAA,CAAA,QAAA,EAAA;AAAQqB,QAAAA,SAAS,EAAC,wBAAwB;AAAAI,QAAAA,QAAA,eACxCzB,cAAA,CAAA,KAAA,EAAA;AACE6B,UAAAA,IAAI,EAAC,MAAM;UACXI,SAAS,EAAGC,KAAK,IAAI;AACnB;AACA,YAAA,IAAIA,KAAK,CAACvE,GAAG,KAAK,QAAQ,EAAE;cAC1BuE,KAAK,CAACE,eAAe,EAAE;AACzB,YAAA;UACF,CAAE;UAAAX,QAAA,EAED3F,YAAY,CAAC;YACZ8C,YAAY;AACZ0F,YAAAA,eAAe,EAAErH;WAClB;SACE;OACC,CAAC,GACP,IAAI;AAAA,KACD,CACX;AAAA,GAAgB,CAAC;AAErB;;;;"}

package/build/inputs/SelectInput/Options/SelectInputOptions.mjs

@@ -1,7 +1,7 @@
 import { CrossCircle } from '@transferwise/icons';
 import { ListboxOptions } from '@headlessui/react';
 import { clsx } from 'clsx';
-import { useRef, useState, useMemo, useEffect, useId } from 'react';
+import { useRef, useMemo, useEffect, useState, useId } from 'react';
 import { useIntl } from 'react-intl';
 import { Virtualizer } from 'virtua';
 import { SearchInput } from '../../SearchInput.mjs';
@@ -36,7 +36,7 @@ function SelectInputOptions({
   const intl = useIntl();
   const virtualiserHandlerRef = useRef(null);
   const controllerRef = filterable ? searchInputRef : listboxRef;
-  const [initialRender, setInitialRender] = useState(true);
+  const initialRenderRef = useRef(true);
   const needle = useMemo(() => {
     if (filterable) {
       return filterQuery ? searchableString(filterQuery) : null;
@@ -110,25 +110,30 @@ function SelectInputOptions({
   // Items shown once shall be kept mounted until the needle changes, otherwise
   // the scroll position may jump around inadvertently. Pattern adopted from:
   // https://inokawa.github.io/virtua/?path=/story/advanced-keep-offscreen-items--append-only
-  const [mountedIndexes, setMountedIndexes] = useState([]);
-  const prevNeedleRef = useRef(needle);
+  const [virtualState, setVirtualState] = useState({
+    needle,
+    length: filteredItems.length,
+    mountedIndexes: []
+  });
+  // Note: virtualState.mountedIndexes is in deps but only read in the guarded branch.
+  // This means external updates to mountedIndexes will trigger this effect but hit the guard
+  // and bail out early. This is intentional and harmless - the guard ensures no unnecessary work.
   useEffect(() => {
-    const needleChanged = prevNeedleRef.current !== needle;
-    prevNeedleRef.current = needle;
-    if (needleChanged) {
-      // Reset mounted indexes when search changes to avoid stale scroll positions
-      setMountedIndexes([]);
-      return;
-    }
-    // Ensure the 'End' key works as intended by keeping the last item mounted.
-    // Skipped on needle change to prevent auto-scrolling on search.
-    if (filteredItems.length > 0) {
-      setMountedIndexes(prevMountedIndexes => {
-        // Create a new array with existing indexes plus the last item index
-        return [...new Set([...prevMountedIndexes, filteredItems.length - 1])]; // Sorting is redundant by nature here
+    if (virtualState.needle !== needle || virtualState.length !== filteredItems.length) {
+      const needleChanged = virtualState.needle !== needle;
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- Syncing virtual scroll state with filtered items
+      setVirtualState({
+        needle,
+        length: filteredItems.length,
+        mountedIndexes: needleChanged ? [] // Reset on needle change
+        : filteredItems.length > 0 ? [...new Set([...virtualState.mountedIndexes, filteredItems.length - 1])] // Add last index
+        : virtualState.mountedIndexes
       });
     }
-  }, [needle, filteredItems.length]);
+  }, [needle, filteredItems.length, virtualState.needle, virtualState.length, virtualState.mountedIndexes]);
+  const {
+    mountedIndexes
+  } = virtualState;
   const listboxContainerRef = useRef(null);
   useEffect(() => {
     if (listboxContainerRef.current != null) {
@@ -136,7 +141,7 @@ function SelectInputOptions({
     }
   }, []);
   useEffect(() => {
-    setInitialRender(false);
+    initialRenderRef.current = false;
   }, []);
   const showStatus = resultsEmpty;
   const statusId = useId();
@@ -165,7 +170,7 @@ function SelectInputOptions({
     className: "np-select-input-options-container",
     onAriaActiveDescendantChange: value => {
       if (controllerRef.current != null) {
-        if (!initialRender && value != null) {
+        if (!initialRenderRef.current && value != null) {
           controllerRef.current.setAttribute('aria-activedescendant', value);
         } else {
           controllerRef.current.removeAttribute('aria-activedescendant');
@@ -200,7 +205,10 @@ function SelectInputOptions({
           // resulting item count is less than before
           const inputValue = event.currentTarget.value;
           // Free up resources and ensure not to go out of bounds
-          setMountedIndexes([]);
+          setVirtualState(prev => ({
+            ...prev,
+            mountedIndexes: []
+          }));
           onFilterChange(inputValue);
         },
         onInput: event => {
@@ -251,7 +259,7 @@ function SelectInputOptions({
             if (!virtualiserHandlerRef.current) return;
             const startIndex = virtualiserHandlerRef.current.findItemIndex(virtualiserHandlerRef.current.scrollOffset);
             const endIndex = virtualiserHandlerRef.current.findItemIndex(virtualiserHandlerRef.current.scrollOffset + virtualiserHandlerRef.current.viewportSize);
-            setMountedIndexes(prevMountedIndexes => {
+            setVirtualState(prev => {
               // Create an array of all indexes that should be visible
               const visibleIndexes = [];
               for (let index = startIndex; index <= endIndex; index += 1) {
@@ -259,7 +267,11 @@ function SelectInputOptions({
                 visibleIndexes.push(index);
               }
               // Combine with previous indexes and sort
-              return [...new Set([...prevMountedIndexes, ...visibleIndexes])].sort((a, b) => a - b);
+              const newMountedIndexes = [...new Set([...prev.mountedIndexes, ...visibleIndexes])].sort((a, b) => a - b);
+              return {
+                ...prev,
+                mountedIndexes: newMountedIndexes
+              };
             });
           },
           children: (item, index) =>

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

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

@@ -1 +1 @@
-{"version":3,"file":"SelectInputPopover.js","sources":["../../../../src/inputs/SelectInput/Popover/SelectInputPopover.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  type Placement,\n  shift,\n  size as floatingSize,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { Transition } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useState } from 'react';\n\nimport { PreventScroll } from '../../../common/preventScroll/PreventScroll';\n\nexport interface SelectInputPopoverProps {\n  placement?: Placement;\n  open: boolean;\n  renderTrigger: (args: {\n    ref: React.RefCallback<Element>;\n    getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n      [key: string]: unknown;\n    };\n  }) => React.ReactNode;\n  title?: string;\n  size?: 'md' | 'lg';\n  padding?: 'none' | 'md';\n  children?: React.ReactNode;\n  onClose?: () => void;\n  onCloseEnd?: () => void;\n}\n\nconst FLOATING_PADDING = 16;\n\nexport function SelectInputPopover({\n  placement,\n  open,\n  renderTrigger,\n  title,\n  size = 'md',\n  padding = 'md',\n  children,\n  onClose,\n  onCloseEnd,\n}: SelectInputPopoverProps) {\n  const { refs, floatingStyles, context } = useFloating<Element>({\n    strategy: 'fixed',\n    placement,\n    middleware: [\n      offset(8),\n      flip({ padding: FLOATING_PADDING, crossAxis: false }),\n      shift(),\n      floatingSize({\n        padding: FLOATING_PADDING,\n        apply: ({ elements, rects, availableHeight }) => {\n          elements.floating.style.setProperty('--max-height', `${availableHeight}px`);\n          elements.floating.style.setProperty('--width', `${rects.reference.width}px`);\n        },\n      }),\n    ],\n    whileElementsMounted: autoUpdate,\n    open,\n    onOpenChange: (value) => {\n      if (!value) {\n        onClose?.();\n      }\n    },\n  });\n\n  const dismiss = useDismiss(context);\n  const role = useRole(context);\n  const { getReferenceProps, getFloatingProps } = useInteractions([role, dismiss]);\n\n  const [floatingKey, setFloatingKey] = useState(0);\n\n  const { theme, screenMode } = useTheme();\n\n  return (\n    <>\n      {open ? <PreventScroll /> : null}\n      {renderTrigger({\n        ref: refs.setReference,\n        getInteractionProps: getReferenceProps,\n      })}\n\n      <FloatingPortal>\n        <ThemeProvider theme=\"personal\" screenMode={theme === 'personal' ? screenMode : 'light'}>\n          <Transition\n            as=\"div\"\n            show={open}\n            leave=\"transition-opacity\"\n            leaveTo=\"opacity-0\"\n            beforeEnter={() => {\n              setFloatingKey((prev) => prev + 1);\n            }}\n            afterLeave={onCloseEnd}\n          >\n            <FocusScope>\n              <FloatingFocusManager context={context}>\n                <div\n                  key={floatingKey} // Force inner state invalidation on open\n                  ref={refs.setFloating}\n                  className={clsx('np-popover-v2-container', {\n                    'np-popover-v2-container--size-md': size === 'md',\n                    'np-popover-v2-container--size-lg': size === 'lg',\n                  })}\n                  style={floatingStyles}\n                  {...getFloatingProps()}\n                >\n                  <div\n                    className={clsx('np-popover-v2', title && 'np-popover-v2--has-title', {\n                      'np-popover-v2--padding-md': padding === 'md',\n                    })}\n                  >\n                    {title ? (\n                      <h2 className=\"np-popover-v2-title np-text-title-body\">{title}</h2>\n                    ) : null}\n                    <div className=\"np-popover-v2-content np-text-body-default\">{children}</div>\n                  </div>\n                </div>\n              </FloatingFocusManager>\n            </FocusScope>\n          </Transition>\n        </ThemeProvider>\n      </FloatingPortal>\n    </>\n  );\n}\n"],"names":["FLOATING_PADDING","SelectInputPopover","placement","open","renderTrigger","title","size","padding","children","onClose","onCloseEnd","refs","floatingStyles","context","useFloating","strategy","middleware","offset","flip","crossAxis","shift","floatingSize","apply","elements","rects","availableHeight","floating","style","setProperty","reference","width","whileElementsMounted","autoUpdate","onOpenChange","value","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","floatingKey","setFloatingKey","useState","theme","screenMode","useTheme","_jsxs","_Fragment","_jsx","PreventScroll","ref","setReference","getInteractionProps","FloatingPortal","ThemeProvider","Transition","as","show","leave","leaveTo","beforeEnter","prev","afterLeave","FocusScope","FloatingFocusManager","setFloating","className","clsx"],"mappings":"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"}
+{"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

@@ -1 +1 @@
-{"version":3,"file":"SelectInputPopover.mjs","sources":["../../../../src/inputs/SelectInput/Popover/SelectInputPopover.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  type Placement,\n  shift,\n  size as floatingSize,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { Transition } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useState } from 'react';\n\nimport { PreventScroll } from '../../../common/preventScroll/PreventScroll';\n\nexport interface SelectInputPopoverProps {\n  placement?: Placement;\n  open: boolean;\n  renderTrigger: (args: {\n    ref: React.RefCallback<Element>;\n    getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n      [key: string]: unknown;\n    };\n  }) => React.ReactNode;\n  title?: string;\n  size?: 'md' | 'lg';\n  padding?: 'none' | 'md';\n  children?: React.ReactNode;\n  onClose?: () => void;\n  onCloseEnd?: () => void;\n}\n\nconst FLOATING_PADDING = 16;\n\nexport function SelectInputPopover({\n  placement,\n  open,\n  renderTrigger,\n  title,\n  size = 'md',\n  padding = 'md',\n  children,\n  onClose,\n  onCloseEnd,\n}: SelectInputPopoverProps) {\n  const { refs, floatingStyles, context } = useFloating<Element>({\n    strategy: 'fixed',\n    placement,\n    middleware: [\n      offset(8),\n      flip({ padding: FLOATING_PADDING, crossAxis: false }),\n      shift(),\n      floatingSize({\n        padding: FLOATING_PADDING,\n        apply: ({ elements, rects, availableHeight }) => {\n          elements.floating.style.setProperty('--max-height', `${availableHeight}px`);\n          elements.floating.style.setProperty('--width', `${rects.reference.width}px`);\n        },\n      }),\n    ],\n    whileElementsMounted: autoUpdate,\n    open,\n    onOpenChange: (value) => {\n      if (!value) {\n        onClose?.();\n      }\n    },\n  });\n\n  const dismiss = useDismiss(context);\n  const role = useRole(context);\n  const { getReferenceProps, getFloatingProps } = useInteractions([role, dismiss]);\n\n  const [floatingKey, setFloatingKey] = useState(0);\n\n  const { theme, screenMode } = useTheme();\n\n  return (\n    <>\n      {open ? <PreventScroll /> : null}\n      {renderTrigger({\n        ref: refs.setReference,\n        getInteractionProps: getReferenceProps,\n      })}\n\n      <FloatingPortal>\n        <ThemeProvider theme=\"personal\" screenMode={theme === 'personal' ? screenMode : 'light'}>\n          <Transition\n            as=\"div\"\n            show={open}\n            leave=\"transition-opacity\"\n            leaveTo=\"opacity-0\"\n            beforeEnter={() => {\n              setFloatingKey((prev) => prev + 1);\n            }}\n            afterLeave={onCloseEnd}\n          >\n            <FocusScope>\n              <FloatingFocusManager context={context}>\n                <div\n                  key={floatingKey} // Force inner state invalidation on open\n                  ref={refs.setFloating}\n                  className={clsx('np-popover-v2-container', {\n                    'np-popover-v2-container--size-md': size === 'md',\n                    'np-popover-v2-container--size-lg': size === 'lg',\n                  })}\n                  style={floatingStyles}\n                  {...getFloatingProps()}\n                >\n                  <div\n                    className={clsx('np-popover-v2', title && 'np-popover-v2--has-title', {\n                      'np-popover-v2--padding-md': padding === 'md',\n                    })}\n                  >\n                    {title ? (\n                      <h2 className=\"np-popover-v2-title np-text-title-body\">{title}</h2>\n                    ) : null}\n                    <div className=\"np-popover-v2-content np-text-body-default\">{children}</div>\n                  </div>\n                </div>\n              </FloatingFocusManager>\n            </FocusScope>\n          </Transition>\n        </ThemeProvider>\n      </FloatingPortal>\n    </>\n  );\n}\n"],"names":["FLOATING_PADDING","SelectInputPopover","placement","open","renderTrigger","title","size","padding","children","onClose","onCloseEnd","refs","floatingStyles","context","useFloating","strategy","middleware","offset","flip","crossAxis","shift","floatingSize","apply","elements","rects","availableHeight","floating","style","setProperty","reference","width","whileElementsMounted","autoUpdate","onOpenChange","value","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","floatingKey","setFloatingKey","useState","theme","screenMode","useTheme","_jsxs","_Fragment","_jsx","PreventScroll","ref","setReference","getInteractionProps","FloatingPortal","ThemeProvider","Transition","as","show","leave","leaveTo","beforeEnter","prev","afterLeave","FocusScope","FloatingFocusManager","setFloating","className","clsx"],"mappings":"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"}
+{"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

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