@transferwise/components 0.0.0-experimental-a18466a → 0.0.0-experimental-d6b038b

package/build/inputs/SelectInput.mjs

@@ -1,881 +0,0 @@
-import { Listbox, ListboxOptions, ListboxButton, ListboxOption } from '@headlessui/react';
-import { CrossCircle, ChevronDown, Cross, Check } from '@transferwise/icons';
-import { clsx } from 'clsx';
-import mergeProps from 'merge-props';
-import { useState, useRef, useEffect, useDeferredValue, useContext, useMemo, useId, createContext, forwardRef } from 'react';
-import { useIntl } from 'react-intl';
-import { Virtualizer } from 'virtua';
-import { useEffectEvent } from '../common/hooks/useEffectEvent.mjs';
-import { useScreenSize } from '../common/hooks/useScreenSize.mjs';
-import { PolymorphicWithOverrides } from '../common/polymorphicWithOverrides/PolymorphicWithOverrides.mjs';
-import { Breakpoint } from '../common/propsValues/breakpoint.mjs';
-import messages$1 from '../dateLookup/dateTrigger/DateTrigger.messages.mjs';
-import { BottomSheet } from './_BottomSheet.mjs';
-import { ButtonInput } from './_ButtonInput.mjs';
-import { Popover } from './_Popover.mjs';
-import { useInputAttributes } from './contexts.mjs';
-import { InputGroup } from './InputGroup.mjs';
-import { SearchInput } from './SearchInput.mjs';
-import messages from './SelectInput.messages.mjs';
-import Header from '../header/Header.mjs';
-import Section from '../section/Section.mjs';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-
-const MAX_ITEMS_WITHOUT_VIRTUALIZATION = 50;
-function searchableString(value) {
-  return value.trim().replace(/\s+/gu, ' ')
-  // NFD converts an Å to A +  ̊ (and other special characters)
-  .normalize('NFD')
-  // and then this replaces the  ̊ with nothing (and other special characters)
-  .replace(/[\u0300-\u036f]/g, '').toLowerCase();
-}
-function inferSearchableStrings(value) {
-  if (typeof value === 'string') {
-    return [searchableString(value)];
-  }
-  if (typeof value === 'object' && value != null) {
-    return Object.values(value).filter(innerValue => typeof innerValue === 'string').map(innerValue => searchableString(innerValue));
-  }
-  return [];
-}
-function dedupeSelectInputOptionItem(item, existingValues, compareValues) {
-  const isDuplicate = compareValues ? Array.from(existingValues).some(existingValue => compareValues(item.value, existingValue)) : existingValues.has(item.value);
-  if (!isDuplicate) {
-    existingValues.add(item.value);
-    return item;
-  }
-  return {
-    ...item,
-    value: undefined
-  };
-}
-/**
- * Sets the `value` of duplicate option items to `undefined`, hiding them when
- * rendered. Indexes are kept intact within groups to preserve the active item
- * between filter changes when possible.
- */
-function dedupeSelectInputItems(items, compareValues) {
-  const existingValues = new Set();
-  return items.map(item => {
-    switch (item.type) {
-      case 'option':
-        {
-          return dedupeSelectInputOptionItem(item, existingValues, compareValues);
-        }
-      case 'group':
-        {
-          return {
-            ...item,
-            options: item.options.map(option => dedupeSelectInputOptionItem(option, existingValues, compareValues))
-          };
-        }
-    }
-    return item;
-  });
-}
-function selectInputOptionItemIncludesNeedle(item, needle) {
-  return inferSearchableStrings(item.filterMatchers ?? item.value).some(haystack => haystack.includes(needle));
-}
-function filterSelectInputItems(items, predicate) {
-  return items.filter(item => {
-    switch (item.type) {
-      case 'option':
-        {
-          return predicate(item);
-        }
-      case 'group':
-        {
-          return item.options.some(option => predicate(option));
-        }
-    }
-    return false;
-  });
-}
-/**
- * Flattens and sorts filtered options using the provided comparator.
- * Extracts all options from groups, filters out undefined values (deduplicated items),
- * sorts them, and returns as a flat list of option items.
- */
-function sortSelectInputItems(items, compareFn, searchQuery) {
-  const flattenedOption = items.flatMap(item => {
-    if (item.type === 'option') {
-      return item.value !== undefined ? [item] : [];
-    }
-    if (item.type === 'group') {
-      return item.options.filter(option => option.value !== undefined);
-    }
-    return [];
-  });
-  // eslint-disable-next-line functional/immutable-data
-  return flattenedOption.sort((a, b) => compareFn(a, b, searchQuery));
-}
-/**
- * A prebuilt sort function for `sortFilteredOptions` that sorts options by relevance to the search query.
- * Prioritizes: exact matches > starts with > contains > alphabetical.
- *
- * @param getLabel - Function to extract the label string from the option value. Defaults to using `title` property.
- *
- * @example
- * ```tsx
- * <SelectInput
- *   filterable
- *   sortFilteredOptions={sortByRelevance((value) => value.name)}
- *   // ...
- * />
- * ```
- */
-function sortByRelevance(getLabel = value => value.title) {
-  return (a, b, searchQuery) => {
-    const normalizedQuery = searchQuery.toLowerCase();
-    const labelA = getLabel(a.value).toLowerCase();
-    const labelB = getLabel(b.value).toLowerCase();
-    // Prioritize exact matches
-    const aExactMatch = labelA === normalizedQuery;
-    const bExactMatch = labelB === normalizedQuery;
-    if (aExactMatch && !bExactMatch) return -1;
-    if (!aExactMatch && bExactMatch) return 1;
-    // Then prioritize options where label starts with the search query
-    const aStartsWith = labelA.startsWith(normalizedQuery);
-    const bStartsWith = labelB.startsWith(normalizedQuery);
-    if (aStartsWith && !bStartsWith) return -1;
-    if (!aStartsWith && bStartsWith) return 1;
-    // Then prioritize options where label contains the search query
-    const aContains = labelA.includes(normalizedQuery);
-    const bContains = labelB.includes(normalizedQuery);
-    if (aContains && !bContains) return -1;
-    if (!aContains && bContains) return 1;
-    // Finally sort alphabetically
-    return labelA.localeCompare(labelB);
-  };
-}
-const defaultRenderTrigger = ({
-  content,
-  placeholderShown,
-  clear,
-  disabled,
-  size,
-  className
-}) => /*#__PURE__*/jsx(InputGroup, {
-  addonEnd: {
-    content: /*#__PURE__*/jsxs("span", {
-      className: clsx('np-select-input-addon-container', disabled && 'disabled'),
-      children: [clear != null && !placeholderShown ? /*#__PURE__*/jsxs(Fragment, {
-        children: [/*#__PURE__*/jsx(SelectInputClearButton, {
-          onClick: event => {
-            event.preventDefault();
-            clear();
-          }
-        }), /*#__PURE__*/jsx("span", {
-          className: "np-select-input-addon-separator"
-        })]
-      }) : null, /*#__PURE__*/jsx("span", {
-        className: "np-select-input-addon",
-        children: /*#__PURE__*/jsx(ChevronDown, {
-          size: 16
-        })
-      })]
-    }),
-    initialContentWidth: 24 + 4,
-    padding: 'sm'
-  },
-  disabled: disabled,
-  className: className,
-  children: /*#__PURE__*/jsx(SelectInputTriggerButton, {
-    as: ButtonInput,
-    size: size,
-    children: /*#__PURE__*/jsx("span", {
-      className: clsx('np-select-input-content', placeholderShown && 'np-select-input-placeholder'),
-      children: content
-    })
-  })
-});
-function SelectInputClearButton({
-  className,
-  onClick
-}) {
-  const intl = useIntl();
-  return /*#__PURE__*/jsx("button", {
-    type: "button",
-    "aria-label": intl.formatMessage(messages$1.ariaLabel),
-    className: clsx(className, 'np-select-input-addon np-select-input-addon--interactive'),
-    onClick: onClick,
-    children: /*#__PURE__*/jsx(Cross, {
-      size: 16
-    })
-  });
-}
-const noop = () => {};
-function SelectInput({
-  id: idProp,
-  parentId,
-  name,
-  multiple,
-  placeholder,
-  autocomplete,
-  items,
-  defaultValue,
-  value: controlledValue,
-  compareValues,
-  renderValue = String,
-  renderFooter,
-  renderTrigger = defaultRenderTrigger,
-  filterable,
-  filterPlaceholder,
-  sortFilteredOptions,
-  disabled,
-  size = 'md',
-  className,
-  UNSAFE_triggerButtonProps,
-  triggerRef: externalTriggerRef,
-  onFilterChange = noop,
-  onChange,
-  onOpen,
-  onClose,
-  onClear
-}) {
-  const inputAttributes = useInputAttributes({
-    nonLabelable: true
-  });
-  const id = idProp ?? inputAttributes.id;
-  const [open, setOpen] = useState(false);
-  const initialized = useRef(false);
-  const handleClose = useEffectEvent(onClose ?? (() => {}));
-  const handleOpen = useEffectEvent(onOpen ?? (() => {}));
-  useEffect(() => {
-    if (initialized.current) {
-      if (open) {
-        handleOpen?.();
-      } else {
-        handleClose?.();
-      }
-    } else {
-      initialized.current = true;
-    }
-  }, [handleClose, handleOpen, open]);
-  const [filterQuery, _setFilterQuery] = useState('');
-  const deferredFilterQuery = useDeferredValue(filterQuery);
-  const setFilterQuery = useEffectEvent(query => {
-    _setFilterQuery(query);
-    if (query !== filterQuery) {
-      onFilterChange({
-        query,
-        queryNormalized: query ? searchableString(query) : null
-      });
-    }
-  });
-  const internalTriggerRef = useRef(null);
-  const screenSm = useScreenSize(Breakpoint.SMALL);
-  const OptionsOverlay = screenSm ? Popover : BottomSheet;
-  const searchInputRef = useRef(null);
-  const listboxRef = useRef(null);
-  const controllerRef = filterable ? searchInputRef : listboxRef;
-  /**
-   * Attempts to resolve the `listbox` label
-   * @see https://storybook.wise.design/?path=/docs/forms-selectinput-accessibility--docs#labelling
-   */
-  const getListBoxLabelProps = () => {
-    if (UNSAFE_triggerButtonProps?.['aria-label']) {
-      return {
-        listBoxLabel: UNSAFE_triggerButtonProps['aria-label']
-      };
-    }
-    if (UNSAFE_triggerButtonProps?.['aria-labelledby']) {
-      return {
-        listBoxLabelledBy: UNSAFE_triggerButtonProps['aria-labelledby']
-      };
-    }
-    if (inputAttributes['aria-labelledby']) {
-      return {
-        listBoxLabelledBy: inputAttributes['aria-labelledby']
-      };
-    }
-    return {};
-  };
-  return /*#__PURE__*/jsx(Listbox, {
-    name: name,
-    multiple: multiple,
-    defaultValue: defaultValue,
-    value: controlledValue,
-    by: compareValues,
-    disabled: disabled,
-    onChange: value => {
-      if (!multiple) {
-        setOpen(false);
-      }
-      onChange?.(value);
-    },
-    children: ({
-      disabled: uiDisabled,
-      value
-    }) => {
-      const placeholderShown = multiple && Array.isArray(value) ? value.length === 0 : value == null;
-      return /*#__PURE__*/jsx(OptionsOverlay, {
-        placement: "bottom-start",
-        open: open,
-        renderTrigger: ({
-          ref,
-          getInteractionProps
-        }) => /*#__PURE__*/jsx(SelectInputTriggerButtonPropsContext.Provider, {
-          // eslint-disable-next-line react/jsx-no-constructed-context-values
-          value: {
-            ref: node => {
-              ref(node);
-              if (externalTriggerRef) {
-                // eslint-disable-next-line no-param-reassign
-                externalTriggerRef.current = node;
-              } else {
-                internalTriggerRef.current = node;
-              }
-            },
-            ...inputAttributes,
-            ...UNSAFE_triggerButtonProps,
-            id,
-            ...mergeProps({
-              onClick: () => {
-                setOpen(prev => !prev);
-              },
-              onKeyDown: event => {
-                if (event.key === ' ' || event.key === 'Enter' || event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-                  setOpen(prev => !prev);
-                }
-              }
-            }, getInteractionProps())
-          },
-          children: renderTrigger({
-            content: !placeholderShown ? /*#__PURE__*/jsx(SelectInputOptionContentWithinTriggerContext.Provider, {
-              value: true,
-              children: multiple && Array.isArray(value) ? value.map(option => renderValue(option, true)).filter(node => node != null).join(', ') : renderValue(value, true)
-            }) : placeholder,
-            placeholderShown,
-            clear: onClear != null ? () => {
-              onClear();
-              (externalTriggerRef?.current ?? internalTriggerRef.current)?.focus({
-                preventScroll: true
-              });
-            } : undefined,
-            disabled: uiDisabled,
-            size,
-            className
-          })
-        }),
-        initialFocusRef: controllerRef,
-        size: filterable ? 'lg' : 'md',
-        padding: "none",
-        onClose: () => {
-          setOpen(false);
-        },
-        onCloseEnd: () => {
-          setFilterQuery('');
-        },
-        children: /*#__PURE__*/jsx(SelectInputOptions, {
-          id: id ? `${id}Search` : undefined,
-          parentId: parentId,
-          items: items,
-          compareValues: compareValues,
-          renderValue: renderValue,
-          renderFooter: renderFooter,
-          filterable: filterable,
-          filterPlaceholder: filterPlaceholder,
-          sortFilteredOptions: sortFilteredOptions,
-          searchInputRef: searchInputRef,
-          listboxRef: listboxRef,
-          filterQuery: deferredFilterQuery,
-          autocomplete: autocomplete,
-          name: name,
-          onFilterChange: setFilterQuery,
-          onAutocompleteSelect: matchedValue => {
-            onChange?.(matchedValue);
-            if (!multiple) {
-              setOpen(false);
-            }
-          },
-          ...getListBoxLabelProps()
-        })
-      });
-    }
-  });
-}
-SelectInput.sortByRelevance = sortByRelevance;
-const SelectInputTriggerButtonPropsContext = /*#__PURE__*/createContext({});
-function SelectInputTriggerButton({
-  as = 'button',
-  ...restProps
-}) {
-  const {
-    ref,
-    onClick,
-    onKeyDown,
-    ...interactionProps
-  } = useContext(SelectInputTriggerButtonPropsContext);
-  return /*#__PURE__*/jsx(ListboxButton, {
-    ref: ref,
-    as: PolymorphicWithOverrides,
-    role: "combobox",
-    __overrides: {
-      as,
-      ...interactionProps
-    },
-    ...mergeProps({
-      onClick,
-      onKeyDown
-    }, restProps)
-  });
-}
-const SelectInputOptionsContainer = /*#__PURE__*/forwardRef(function SelectInputOptionsContainer({
-  'aria-orientation': ariaOrientation,
-  'aria-activedescendant': ariaActiveDescendant,
-  role,
-  tabIndex,
-  onAriaActiveDescendantChange,
-  onKeyDown,
-  ...restProps
-}, ref) {
-  const handleAriaActiveDescendantChange = useEffectEvent(onAriaActiveDescendantChange);
-  useEffect(() => {
-    handleAriaActiveDescendantChange(ariaActiveDescendant);
-  }, [ariaActiveDescendant, handleAriaActiveDescendantChange]);
-  return /*#__PURE__*/jsx("div", {
-    ref: ref,
-    role: "none",
-    onKeyDown: event => {
-      // Prevent confirmation close without an active item
-      if (event.key === 'Enter' && ariaActiveDescendant == null) {
-        return;
-      }
-      // Required to make ListBox focusable
-      if (event.key === 'Tab') {
-        return;
-      }
-      // Prevent absorbing Escape early
-      if (event.key === 'Escape') {
-        onKeyDown?.({
-          ...event,
-          preventDefault: () => {},
-          stopPropagation: () => {}
-        });
-        return;
-      }
-      onKeyDown?.(event);
-    },
-    ...restProps
-  });
-});
-function SelectInputOptions({
-  id,
-  parentId,
-  items,
-  compareValues: compareValuesProp,
-  renderValue = String,
-  renderFooter,
-  filterable = false,
-  filterPlaceholder,
-  sortFilteredOptions,
-  searchInputRef,
-  listboxRef,
-  filterQuery,
-  onFilterChange,
-  listBoxLabel,
-  listBoxLabelledBy,
-  autocomplete,
-  name,
-  onAutocompleteSelect
-}) {
-  const intl = useIntl();
-  const virtualiserHandlerRef = useRef(null);
-  const controllerRef = filterable ? searchInputRef : listboxRef;
-  const [initialRender, setInitialRender] = useState(true);
-  const needle = useMemo(() => {
-    if (filterable) {
-      return filterQuery ? searchableString(filterQuery) : null;
-    }
-    return undefined;
-  }, [filterQuery, filterable]);
-  useEffect(() => {
-    if (needle) {
-      // Ensure having an active option while filtering.
-      // Without `requestAnimationFrame` upon which React depends for scheduling
-      // updates, the active status would only show for a split second and then
-      // disappear inadvertently.
-      requestAnimationFrame(() => {
-        if (controllerRef.current != null && !controllerRef.current.hasAttribute('aria-activedescendant')) {
-          // Activate first option via synthetic key press
-          controllerRef.current.dispatchEvent(new KeyboardEvent('keydown', {
-            key: 'Home',
-            bubbles: true
-          }));
-        }
-      });
-    }
-  }, [controllerRef, needle]);
-  const compareValues = useMemo(() => {
-    if (!compareValuesProp) {
-      return undefined;
-    }
-    if (typeof compareValuesProp === 'function') {
-      return (a, b) => compareValuesProp(a, b);
-    }
-    const key = compareValuesProp;
-    return (a, b) => {
-      if (typeof a === 'object' && a != null && typeof b === 'object' && b != null) {
-        return a[key] === b[key];
-      }
-      return a === b;
-    };
-  }, [compareValuesProp]);
-  const filteredItems = useMemo(() => {
-    if (needle == null) {
-      return items;
-    }
-    const dedupedItems = dedupeSelectInputItems(items, compareValues);
-    if (sortFilteredOptions) {
-      // When sorting, filter out non-matching items completely to avoid ghost items
-      const filtered = dedupedItems.map(item => {
-        if (item.type === 'option') {
-          return selectInputOptionItemIncludesNeedle(item, needle) ? item : {
-            ...item,
-            value: undefined
-          };
-        }
-        if (item.type === 'group') {
-          return {
-            ...item,
-            options: item.options.map(option => selectInputOptionItemIncludesNeedle(option, needle) ? option : {
-              ...option,
-              value: undefined
-            })
-          };
-        }
-        return item;
-      });
-      return sortSelectInputItems(filtered, sortFilteredOptions, filterQuery);
-    }
-    return filterSelectInputItems(dedupedItems, item => selectInputOptionItemIncludesNeedle(item, needle));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [needle, items, compareValues]);
-  const resultsEmpty = needle != null && filteredItems.length === 0;
-  const virtualized = filteredItems.length > MAX_ITEMS_WITHOUT_VIRTUALIZATION;
-  // 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);
-  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 => {
-        const indexes = new Set(prevMountedIndexes);
-        indexes.add(filteredItems.length - 1);
-        return [...indexes]; // Sorting is redundant by nature here
-      });
-    }
-  }, [needle, filteredItems.length]);
-  const listboxContainerRef = useRef(null);
-  useEffect(() => {
-    if (listboxContainerRef.current != null) {
-      listboxContainerRef.current.style.setProperty('--initial-height', `${listboxContainerRef.current.offsetHeight}px`);
-    }
-  }, []);
-  useEffect(() => {
-    setInitialRender(false);
-  }, []);
-  const showStatus = resultsEmpty;
-  const statusId = useId();
-  const listboxId = useId();
-  const getItemNode = index => {
-    const item = filteredItems[index];
-    return /*#__PURE__*/jsx(SelectInputItemView, {
-      item: item,
-      renderValue: renderValue,
-      needle: needle
-    }, index);
-  };
-  const findMatchingItem = autocompleteValue => {
-    const flatOptions = items.flatMap(item => item.type === 'group' ? item.options : item.type === 'option' ? [item] : []).filter(item => item.type === 'option' && item.value != null);
-    const exactMatch = flatOptions.find(option => String(option.value) === autocompleteValue || option.filterMatchers?.some(matcher => matcher === autocompleteValue));
-    if (exactMatch) {
-      return exactMatch.value;
-    }
-    const fuzzyMatch = flatOptions.find(option => option.filterMatchers?.some(matcher => matcher.toLowerCase().includes(autocompleteValue.toLowerCase())));
-    return fuzzyMatch ? fuzzyMatch.value : null;
-  };
-  return /*#__PURE__*/jsxs(ListboxOptions, {
-    modal: true,
-    as: SelectInputOptionsContainer,
-    static: true,
-    className: "np-select-input-options-container",
-    onAriaActiveDescendantChange: value => {
-      if (controllerRef.current != null) {
-        if (!initialRender && value != null) {
-          controllerRef.current.setAttribute('aria-activedescendant', value);
-        } else {
-          controllerRef.current.removeAttribute('aria-activedescendant');
-        }
-      }
-    },
-    children: [filterable ? /*#__PURE__*/jsx("div", {
-      className: "np-select-input-query-container",
-      children: /*#__PURE__*/jsx(SearchInput, {
-        ref: searchInputRef,
-        id: id,
-        name: name,
-        autoComplete: autocomplete,
-        role: "combobox",
-        shape: "rectangle",
-        placeholder: filterPlaceholder,
-        "aria-label": filterPlaceholder,
-        defaultValue: filterQuery,
-        "aria-autocomplete": "list",
-        "aria-expanded": true,
-        "aria-controls": listboxId,
-        "aria-describedby": showStatus ? statusId : undefined,
-        onKeyDown: event => {
-          // Prevent interfering with the matcher of Headless UI
-          // https://mathiasbynens.be/notes/javascript-unicode#regex
-          if (/^.$/u.test(event.key)) {
-            event.stopPropagation();
-          }
-        },
-        onChange: event => {
-          // Free up resources and ensure not to go out of bounds when the
-          // resulting item count is less than before
-          const inputValue = event.currentTarget.value;
-          // Free up resources and ensure not to go out of bounds
-          setMountedIndexes([]);
-          onFilterChange(inputValue);
-        },
-        onInput: event => {
-          const inputValue = event.currentTarget.value;
-          const inputElement = event.currentTarget;
-          if (autocomplete && onAutocompleteSelect && inputValue) {
-            setTimeout(() => {
-              if (inputElement.value === inputValue && inputValue.length > 2) {
-                const matchedValue = findMatchingItem(inputValue);
-                if (matchedValue !== null) {
-                  onAutocompleteSelect(matchedValue);
-                }
-              }
-            }, 50);
-          }
-        }
-      })
-    }) : null, /*#__PURE__*/jsxs("section", {
-      ref: listboxContainerRef,
-      tabIndex: -1,
-      className: clsx('np-select-input-listbox-container', virtualized && 'np-select-input-listbox-container--virtualized', needle == null &&
-      // Groups aren't shown when filtering
-      items.some(item => item.type === 'group') && 'np-select-input-listbox-container--has-group'),
-      "data-wds-parent": parentId ?? undefined,
-      children: [resultsEmpty ? /*#__PURE__*/jsxs("div", {
-        id: statusId,
-        className: "np-select-input-options-status",
-        children: [/*#__PURE__*/jsx(CrossCircle, {
-          size: 16,
-          className: "np-select-input-options-status-icon"
-        }), intl.formatMessage(messages.noResultsFound)]
-      }) : null, /*#__PURE__*/jsx("div", {
-        ref: listboxRef,
-        id: listboxId,
-        role: "listbox",
-        "aria-orientation": "vertical",
-        "aria-label": listBoxLabel,
-        "aria-labelledby": listBoxLabelledBy,
-        tabIndex: 0,
-        className: "np-select-input-listbox",
-        children: !virtualized ? filteredItems.map((_, index) => getItemNode(index)) : /*#__PURE__*/jsx(Virtualizer, {
-          ref: virtualiserHandlerRef,
-          data: filteredItems,
-          keepMounted: mountedIndexes,
-          scrollRef: listboxRef // `VList` doesn't expose this
-          ,
-          onScroll: async () => {
-            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 => {
-              const indexes = new Set(prevMountedIndexes);
-              for (let index = startIndex; index <= endIndex; index += 1) {
-                indexes.add(index);
-              }
-              return [...indexes].sort((a, b) => a - b);
-            });
-          },
-          children: (item, index) =>
-          /*#__PURE__*/
-          // The position of each item can't be inferred by browsers when
-          // virtualizing, as some of the items may not be in the DOM
-          jsx(SelectInputItemsCountContext.Provider, {
-            value: filteredItems.length,
-            children: /*#__PURE__*/jsx(SelectInputItemPositionContext.Provider, {
-              value: index + 1,
-              children: getItemNode(index)
-            })
-          })
-        })
-      }), renderFooter != null ? /*#__PURE__*/jsx("footer", {
-        className: "np-select-input-footer",
-        children: /*#__PURE__*/jsx("div", {
-          role: "none",
-          onKeyDown: event => {
-            // Prevent interfering with Headless UI
-            if (event.key !== 'Escape') {
-              event.stopPropagation();
-            }
-          },
-          children: renderFooter({
-            resultsEmpty,
-            queryNormalized: needle
-          })
-        })
-      }) : null]
-    })]
-  });
-}
-function SelectInputItemView({
-  item,
-  renderValue,
-  needle
-}) {
-  switch (item.type) {
-    case 'option':
-      {
-        if (item.value != null && (needle == null || selectInputOptionItemIncludesNeedle(item, needle))) {
-          return /*#__PURE__*/jsx(SelectInputOption, {
-            value: item.value,
-            disabled: item.disabled,
-            children: renderValue(item.value, false)
-          });
-        }
-        break;
-      }
-    case 'group':
-      {
-        return /*#__PURE__*/jsx(SelectInputGroupItemView, {
-          item: item,
-          renderValue: renderValue,
-          needle: needle
-        });
-      }
-    case 'separator':
-      {
-        if (needle == null) {
-          return /*#__PURE__*/jsx("hr", {
-            className: "np-select-input-separator-item"
-          });
-        }
-        break;
-      }
-  }
-  return null;
-}
-function SelectInputGroupItemView({
-  item,
-  renderValue,
-  needle
-}) {
-  const headerId = useId();
-  const header = /*#__PURE__*/jsx(Header, {
-    as: "header",
-    role: "none",
-    id: headerId,
-    title: item.label
-    // @ts-expect-error when we migrate ActionButton to new Button this should be sorted
-    ,
-    action: item.action && {
-      text: item.action.label,
-      onClick: item.action.onClick
-    },
-    className: "np-select-input-group-item-header p-x-1"
-  });
-  return (
-    /*#__PURE__*/
-    // An empty container may be rendered when no options match `needle`
-    // However, pre-filtering would result in worse performance overall
-    jsxs(Section, {
-      as: "section",
-      role: "group",
-      "aria-labelledby": headerId,
-      className: clsx('m-y-0', needle === null && 'np-select-input-group-item--without-needle'),
-      children: [needle == null ? header : null, item.options.map((option, index) => /*#__PURE__*/jsx(SelectInputItemView
-      // eslint-disable-next-line react/no-array-index-key
-      , {
-        item: option,
-        renderValue: renderValue,
-        needle: needle
-      }, index))]
-    })
-  );
-}
-const SelectInputItemsCountContext = /*#__PURE__*/createContext(undefined);
-const SelectInputItemPositionContext = /*#__PURE__*/createContext(undefined);
-function SelectInputOption({
-  value,
-  disabled,
-  children
-}) {
-  const itemsCount = useContext(SelectInputItemsCountContext);
-  const itemPosition = useContext(SelectInputItemPositionContext);
-  return /*#__PURE__*/jsx(ListboxOption, {
-    as: "div",
-    value: value,
-    "aria-setsize": itemsCount,
-    "aria-posinset": itemPosition,
-    disabled: disabled,
-    className: ({
-      active,
-      disabled: uiDisabled
-    }) => clsx('np-select-input-option-container np-text-body-large', active && 'np-select-input-option-container--active', uiDisabled && 'np-select-input-option-container--disabled'),
-    children: ({
-      selected
-    }) => /*#__PURE__*/jsxs(Fragment, {
-      children: [/*#__PURE__*/jsx("div", {
-        className: "np-select-input-option",
-        children: children
-      }), /*#__PURE__*/jsx(Check, {
-        size: 16,
-        className: clsx('np-select-input-option-check', !selected && 'np-select-input-option-check--not-selected')
-      })]
-    })
-  });
-}
-const SelectInputOptionContentWithinTriggerContext = /*#__PURE__*/createContext(false);
-function SelectInputOptionContent({
-  title,
-  note,
-  description,
-  icon
-}) {
-  const withinTrigger = useContext(SelectInputOptionContentWithinTriggerContext);
-  return /*#__PURE__*/jsxs("div", {
-    className: clsx('np-select-input-option-content-container', (note || description) && 'np-text-body-large'),
-    children: [icon ? /*#__PURE__*/jsx("div", {
-      className: clsx('np-select-input-option-content-icon', !withinTrigger && 'np-select-input-option-content-icon--not-within-trigger'),
-      children: icon
-    }) : null, /*#__PURE__*/jsxs("div", {
-      className: "np-select-input-option-content-text",
-      children: [/*#__PURE__*/jsxs("div", {
-        className: clsx('np-select-input-option-content-text-line-1', withinTrigger && 'np-select-input-option-content-text-within-trigger'),
-        children: [/*#__PURE__*/jsx("div", {
-          className: "d-inline",
-          children: title
-        }), note ? /*#__PURE__*/jsx("span", {
-          className: "np-select-input-option-content-text-secondary np-text-body-default",
-          children: note
-        }) : null]
-      }), description ? /*#__PURE__*/jsx("div", {
-        className: clsx('np-select-input-option-content-text-secondary np-text-body-default', withinTrigger && 'np-select-input-option-content-text-within-trigger np-select-input-option-description-in-trigger'),
-        children: description
-      }) : null]
-    })]
-  });
-}
-
-export { SelectInput, SelectInputOptionContent, SelectInputTriggerButton, sortByRelevance };
-//# sourceMappingURL=SelectInput.mjs.map