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

package/build/inputs/SelectInput.mjs

@@ -0,0 +1,881 @@
+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