@transferwise/components 46.130.2 → 46.131.0

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

@@ -0,0 +1,300 @@
+'use strict';
+
+var icons = require('@transferwise/icons');
+var react = require('@headlessui/react');
+var clsx = require('clsx');
+var React = require('react');
+var reactIntl = require('react-intl');
+var virtua = require('virtua');
+var SearchInput = require('../../SearchInput.js');
+var SelectInput_contexts = require('../SelectInput.contexts.js');
+var SelectInput_utils = require('../SelectInput.utils.js');
+var SelectInput_messages = require('../SelectInput.messages.js');
+var SelectInputItemView = require('../ItemView/SelectInputItemView.js');
+require('../../../header/Header.js');
+var jsxRuntime = require('react/jsx-runtime');
+var SelectInputOptionsContainer = require('./OptionsContainer/SelectInputOptionsContainer.js');
+
+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 = reactIntl.useIntl();
+  const virtualiserHandlerRef = React.useRef(null);
+  const controllerRef = filterable ? searchInputRef : listboxRef;
+  const [initialRender, setInitialRender] = React.useState(true);
+  const needle = React.useMemo(() => {
+    if (filterable) {
+      return filterQuery ? SelectInput_utils.searchableString(filterQuery) : null;
+    }
+    return undefined;
+  }, [filterQuery, filterable]);
+  React.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 = React.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 = React.useMemo(() => {
+    if (needle == null) {
+      return items;
+    }
+    const dedupedItems = SelectInput_utils.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 SelectInput_utils.selectInputOptionItemIncludesNeedle(item, needle) ? item : {
+            ...item,
+            value: undefined
+          };
+        }
+        if (item.type === 'group') {
+          return {
+            ...item,
+            options: item.options.map(option => SelectInput_utils.selectInputOptionItemIncludesNeedle(option, needle) ? option : {
+              ...option,
+              value: undefined
+            })
+          };
+        }
+        return item;
+      });
+      return SelectInput_utils.sortSelectInputItems(filtered, sortFilteredOptions, filterQuery);
+    }
+    return SelectInput_utils.filterSelectInputItems(dedupedItems, item => SelectInput_utils.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 > SelectInput_utils.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] = React.useState([]);
+  const prevNeedleRef = React.useRef(needle);
+  React.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
+      });
+    }
+  }, [needle, filteredItems.length]);
+  const listboxContainerRef = React.useRef(null);
+  React.useEffect(() => {
+    if (listboxContainerRef.current != null) {
+      listboxContainerRef.current.style.setProperty('--initial-height', `${listboxContainerRef.current.offsetHeight}px`);
+    }
+  }, []);
+  React.useEffect(() => {
+    setInitialRender(false);
+  }, []);
+  const showStatus = resultsEmpty;
+  const statusId = React.useId();
+  const listboxId = React.useId();
+  const getItemNode = index => {
+    const item = filteredItems[index];
+    return /*#__PURE__*/jsxRuntime.jsx(SelectInputItemView.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__*/jsxRuntime.jsxs(react.ListboxOptions, {
+    modal: true,
+    as: SelectInputOptionsContainer.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__*/jsxRuntime.jsx("div", {
+      className: "np-select-input-query-container",
+      children: /*#__PURE__*/jsxRuntime.jsx(SearchInput.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__*/jsxRuntime.jsxs("section", {
+      ref: listboxContainerRef,
+      tabIndex: -1,
+      className: clsx.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__*/jsxRuntime.jsxs("div", {
+        id: statusId,
+        className: "np-select-input-options-status",
+        children: [/*#__PURE__*/jsxRuntime.jsx(icons.CrossCircle, {
+          size: 16,
+          className: "np-select-input-options-status-icon"
+        }), intl.formatMessage(SelectInput_messages.default.noResultsFound)]
+      }) : null, /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(virtua.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 => {
+              // Create an array of all indexes that should be visible
+              const visibleIndexes = [];
+              for (let index = startIndex; index <= endIndex; index += 1) {
+                // eslint-disable-next-line functional/immutable-data
+                visibleIndexes.push(index);
+              }
+              // Combine with previous indexes and sort
+              return [...new Set([...prevMountedIndexes, ...visibleIndexes])].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
+          jsxRuntime.jsx(SelectInput_contexts.SelectInputItemsCountContext.Provider, {
+            value: filteredItems.length,
+            children: /*#__PURE__*/jsxRuntime.jsx(SelectInput_contexts.SelectInputItemPositionContext.Provider, {
+              value: index + 1,
+              children: getItemNode(index)
+            })
+          })
+        })
+      }), renderFooter != null ? /*#__PURE__*/jsxRuntime.jsx("footer", {
+        className: "np-select-input-footer",
+        children: /*#__PURE__*/jsxRuntime.jsx("div", {
+          role: "none",
+          onKeyDown: event => {
+            // Prevent interfering with Headless UI
+            if (event.key !== 'Escape') {
+              event.stopPropagation();
+            }
+          },
+          children: renderFooter({
+            resultsEmpty,
+            queryNormalized: needle
+          })
+        })
+      }) : null]
+    })]
+  });
+}
+
+exports.SelectInputOptions = SelectInputOptions;
+//# sourceMappingURL=SelectInputOptions.js.map

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

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

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

@@ -0,0 +1,298 @@
+import { CrossCircle } from '@transferwise/icons';
+import { ListboxOptions } from '@headlessui/react';
+import { clsx } from 'clsx';
+import { useRef, useState, useMemo, useEffect, useId } from 'react';
+import { useIntl } from 'react-intl';
+import { Virtualizer } from 'virtua';
+import { SearchInput } from '../../SearchInput.mjs';
+import { SelectInputItemsCountContext, SelectInputItemPositionContext } from '../SelectInput.contexts.mjs';
+import { searchableString, dedupeSelectInputItems, selectInputOptionItemIncludesNeedle, sortSelectInputItems, filterSelectInputItems, MAX_ITEMS_WITHOUT_VIRTUALIZATION } from '../SelectInput.utils.mjs';
+import messages from '../SelectInput.messages.mjs';
+import { SelectInputItemView } from '../ItemView/SelectInputItemView.mjs';
+import '../../../header/Header.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { SelectInputOptionsContainer } from './OptionsContainer/SelectInputOptionsContainer.mjs';
+
+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 => {
+        // 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
+      });
+    }
+  }, [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 => {
+              // Create an array of all indexes that should be visible
+              const visibleIndexes = [];
+              for (let index = startIndex; index <= endIndex; index += 1) {
+                // eslint-disable-next-line functional/immutable-data
+                visibleIndexes.push(index);
+              }
+              // Combine with previous indexes and sort
+              return [...new Set([...prevMountedIndexes, ...visibleIndexes])].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]
+    })]
+  });
+}
+
+export { SelectInputOptions };
+//# sourceMappingURL=SelectInputOptions.mjs.map