@salt-ds/core 1.70.0 → 1.72.0

package/dist-es/list-control/ListControlProvider.js

@@ -0,0 +1,37 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { ListControlContext } from './ListControlContext.js';
+import { ListControlOptionContextProvider } from './ListControlOptionContext.js';
+
+function ListControlProvider({
+  children,
+  value
+}) {
+  const { optionStateStore, ...publicValue } = value;
+  const optionValue = useMemo(
+    () => ({
+      disabled: value.disabled,
+      listRef: value.listRef,
+      multiselect: value.multiselect,
+      optionStateStore,
+      register: value.register,
+      select: value.select,
+      setActive: value.setActive,
+      valueToString: value.valueToString
+    }),
+    [
+      optionStateStore,
+      value.disabled,
+      value.listRef,
+      value.multiselect,
+      value.register,
+      value.select,
+      value.setActive,
+      value.valueToString
+    ]
+  );
+  return /* @__PURE__ */ jsx(ListControlContext.Provider, { value: publicValue, children: /* @__PURE__ */ jsx(ListControlOptionContextProvider, { value: optionValue, children }) });
+}
+
+export { ListControlProvider };
+//# sourceMappingURL=ListControlProvider.js.map

package/dist-es/list-control/ListControlProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListControlProvider.js","sources":["../src/list-control/ListControlProvider.tsx"],"sourcesContent":["import { type ReactNode, useMemo } from \"react\";\nimport {\n  ListControlContext,\n  type ListControlContextValue,\n} from \"./ListControlContext\";\nimport {\n  ListControlOptionContextProvider,\n  type ListControlOptionContextValue,\n} from \"./ListControlOptionContext\";\nimport type { ListControlOptionStore } from \"./ListControlOptionStore\";\n\ntype ListControlProviderValue<Item> = ListControlContextValue<Item> & {\n  optionStateStore: ListControlOptionStore<Item>;\n};\n\nexport function ListControlProvider<Item>({\n  children,\n  value,\n}: {\n  children: ReactNode;\n  value: ListControlProviderValue<Item>;\n}) {\n  const { optionStateStore, ...publicValue } = value;\n  const optionValue = useMemo<ListControlOptionContextValue<Item>>(\n    () => ({\n      disabled: value.disabled,\n      listRef: value.listRef,\n      multiselect: value.multiselect,\n      optionStateStore,\n      register: value.register,\n      select: value.select,\n      setActive: value.setActive,\n      valueToString: value.valueToString,\n    }),\n    [\n      optionStateStore,\n      value.disabled,\n      value.listRef,\n      value.multiselect,\n      value.register,\n      value.select,\n      value.setActive,\n      value.valueToString,\n    ],\n  );\n\n  return (\n    <ListControlContext.Provider value={publicValue}>\n      <ListControlOptionContextProvider value={optionValue}>\n        {children}\n      </ListControlOptionContextProvider>\n    </ListControlContext.Provider>\n  );\n}\n"],"names":[],"mappings":";;;;;AAeO,SAAS,mBAAA,CAA0B;AAAA,EACxC,QAAA;AAAA,EACA;AACF,CAAA,EAGG;AACD,EAAA,MAAM,EAAE,gBAAA,EAAkB,GAAG,WAAA,EAAY,GAAI,KAAA;AAC7C,EAAA,MAAM,WAAA,GAAc,OAAA;AAAA,IAClB,OAAO;AAAA,MACL,UAAU,KAAA,CAAM,QAAA;AAAA,MAChB,SAAS,KAAA,CAAM,OAAA;AAAA,MACf,aAAa,KAAA,CAAM,WAAA;AAAA,MACnB,gBAAA;AAAA,MACA,UAAU,KAAA,CAAM,QAAA;AAAA,MAChB,QAAQ,KAAA,CAAM,MAAA;AAAA,MACd,WAAW,KAAA,CAAM,SAAA;AAAA,MACjB,eAAe,KAAA,CAAM;AAAA,KACvB,CAAA;AAAA,IACA;AAAA,MACE,gBAAA;AAAA,MACA,KAAA,CAAM,QAAA;AAAA,MACN,KAAA,CAAM,OAAA;AAAA,MACN,KAAA,CAAM,WAAA;AAAA,MACN,KAAA,CAAM,QAAA;AAAA,MACN,KAAA,CAAM,MAAA;AAAA,MACN,KAAA,CAAM,SAAA;AAAA,MACN,KAAA,CAAM;AAAA;AACR,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,kBAAA,CAAmB,QAAA,EAAnB,EAA4B,KAAA,EAAO,WAAA,EAClC,QAAA,kBAAA,GAAA,CAAC,gCAAA,EAAA,EAAiC,KAAA,EAAO,WAAA,EACtC,QAAA,EACH,CAAA,EACF,CAAA;AAEJ;;;;"}

package/dist-es/list-control/ListControlRegistry.js

@@ -0,0 +1,158 @@
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var __privateWrapper = (obj, member, setter, getter) => ({
+  set _(value) {
+    __privateSet(obj, member, value);
+  },
+  get _() {
+    return __privateGet(obj, member, getter);
+  }
+});
+var _entries, _ordered, _indexById, _nextGeneration, _hasGaps;
+function createCoalescedRebuild(rebuild, enqueue = (callback) => {
+  Promise.resolve().then(callback);
+}) {
+  let pending = false;
+  let cancelled = false;
+  return {
+    schedule() {
+      if (pending || cancelled) return;
+      pending = true;
+      enqueue(() => {
+        pending = false;
+        if (!cancelled) rebuild();
+      });
+    },
+    cancel() {
+      cancelled = true;
+      pending = false;
+    }
+  };
+}
+class ListControlRegistry {
+  constructor() {
+    __privateAdd(this, _entries, /* @__PURE__ */ new Map());
+    __privateAdd(this, _ordered, []);
+    __privateAdd(this, _indexById, /* @__PURE__ */ new Map());
+    __privateAdd(this, _nextGeneration, 0);
+    __privateAdd(this, _hasGaps, false);
+  }
+  register(option, element) {
+    const entry = {
+      data: option,
+      element,
+      generation: __privateWrapper(this, _nextGeneration)._++
+    };
+    __privateGet(this, _entries).set(option.id, entry);
+    const currentIndex = __privateGet(this, _indexById).get(option.id);
+    if (currentIndex === void 0) {
+      __privateGet(this, _indexById).set(option.id, __privateGet(this, _ordered).length);
+      __privateGet(this, _ordered).push(entry);
+    } else {
+      __privateGet(this, _ordered)[currentIndex] = entry;
+    }
+    return () => {
+      const current = __privateGet(this, _entries).get(option.id);
+      if ((current == null ? void 0 : current.generation) !== entry.generation) {
+        return;
+      }
+      __privateGet(this, _entries).delete(option.id);
+      const index = __privateGet(this, _indexById).get(option.id);
+      if (index !== void 0 && __privateGet(this, _ordered)[index] === entry) {
+        __privateGet(this, _ordered)[index] = void 0;
+        __privateGet(this, _indexById).delete(option.id);
+        __privateSet(this, _hasGaps, true);
+      }
+    };
+  }
+  rebuild(listElement) {
+    const ordered = [];
+    const indexById = /* @__PURE__ */ new Map();
+    for (const element of listElement.querySelectorAll(
+      '[role="option"]'
+    )) {
+      const entry = __privateGet(this, _entries).get(element.id);
+      if ((entry == null ? void 0 : entry.element) === element && element.isConnected) {
+        indexById.set(entry.data.id, ordered.length);
+        ordered.push(entry);
+      }
+    }
+    for (const id of __privateGet(this, _entries).keys()) {
+      if (!indexById.has(id)) {
+        __privateGet(this, _entries).delete(id);
+      }
+    }
+    __privateSet(this, _ordered, ordered);
+    __privateSet(this, _indexById, indexById);
+    __privateSet(this, _hasGaps, false);
+  }
+  getAt(index) {
+    if (!__privateGet(this, _hasGaps)) {
+      return __privateGet(this, _ordered)[index];
+    }
+    let currentIndex = 0;
+    for (const entry of __privateGet(this, _ordered)) {
+      if (entry && __privateGet(this, _entries).get(entry.data.id) === entry) {
+        if (currentIndex === index) return entry;
+        currentIndex++;
+      }
+    }
+    return void 0;
+  }
+  get length() {
+    return __privateGet(this, _hasGaps) ? __privateGet(this, _entries).size : __privateGet(this, _ordered).length;
+  }
+  indexOfId(id) {
+    const physicalIndex = __privateGet(this, _indexById).get(id);
+    if (physicalIndex === void 0 || !__privateGet(this, _hasGaps)) {
+      return physicalIndex ?? -1;
+    }
+    let logicalIndex = 0;
+    for (let index = 0; index < physicalIndex; index++) {
+      const entry = __privateGet(this, _ordered)[index];
+      if (entry && __privateGet(this, _entries).get(entry.data.id) === entry) logicalIndex++;
+    }
+    return logicalIndex;
+  }
+  indexOfValue(value) {
+    let logicalIndex = 0;
+    for (const entry of __privateGet(this, _ordered)) {
+      if (entry && __privateGet(this, _entries).get(entry.data.id) === entry) {
+        if (entry.data.value === value) return logicalIndex;
+        logicalIndex++;
+      }
+    }
+    return -1;
+  }
+  findByData(option) {
+    const entry = __privateGet(this, _entries).get(option.id);
+    return (entry == null ? void 0 : entry.data) === option ? entry : void 0;
+  }
+  matching(predicate) {
+    const matches = [];
+    for (const entry of __privateGet(this, _ordered)) {
+      if (entry !== void 0 && __privateGet(this, _entries).get(entry.data.id) === entry && predicate(entry.data)) {
+        matches.push(entry);
+      }
+    }
+    return matches;
+  }
+  snapshot() {
+    return __privateGet(this, _ordered).filter(
+      (entry) => entry !== void 0
+    );
+  }
+}
+_entries = new WeakMap();
+_ordered = new WeakMap();
+_indexById = new WeakMap();
+_nextGeneration = new WeakMap();
+_hasGaps = new WeakMap();
+
+export { ListControlRegistry, createCoalescedRebuild };
+//# sourceMappingURL=ListControlRegistry.js.map

package/dist-es/list-control/ListControlRegistry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListControlRegistry.js","sources":["../src/list-control/ListControlRegistry.ts"],"sourcesContent":["import type { OptionValue } from \"./ListControlContext\";\n\nexport interface RegisteredOption<Item> {\n  data: OptionValue<Item>;\n  element: HTMLElement;\n}\n\ninterface RegistryEntry<Item> extends RegisteredOption<Item> {\n  generation: number;\n}\n\nexport function createCoalescedRebuild(\n  rebuild: () => void,\n  enqueue: (callback: () => void) => void = (callback) => {\n    // Promise jobs are supported by Chrome 86.\n    Promise.resolve().then(callback);\n  },\n): { schedule: () => void; cancel: () => void } {\n  let pending = false;\n  let cancelled = false;\n\n  return {\n    schedule() {\n      if (pending || cancelled) return;\n      pending = true;\n      enqueue(() => {\n        pending = false;\n        if (!cancelled) rebuild();\n      });\n    },\n    cancel() {\n      cancelled = true;\n      pending = false;\n    },\n  };\n}\n\n/** Internal option registry optimized for large, non-virtualized lists. */\nexport class ListControlRegistry<Item> {\n  readonly #entries = new Map<string, RegistryEntry<Item>>();\n  #ordered: (RegistryEntry<Item> | undefined)[] = [];\n  #indexById = new Map<string, number>();\n  #nextGeneration = 0;\n  #hasGaps = false;\n\n  register(option: OptionValue<Item>, element: HTMLElement): () => void {\n    const entry: RegistryEntry<Item> = {\n      data: option,\n      element,\n      generation: this.#nextGeneration++,\n    };\n    this.#entries.set(option.id, entry);\n\n    const currentIndex = this.#indexById.get(option.id);\n    if (currentIndex === undefined) {\n      this.#indexById.set(option.id, this.#ordered.length);\n      this.#ordered.push(entry);\n    } else {\n      this.#ordered[currentIndex] = entry;\n    }\n\n    return () => {\n      const current = this.#entries.get(option.id);\n      if (current?.generation !== entry.generation) {\n        return;\n      }\n      this.#entries.delete(option.id);\n\n      const index = this.#indexById.get(option.id);\n      if (index !== undefined && this.#ordered[index] === entry) {\n        // Rebuild compacts the snapshot after the corresponding DOM removal.\n        this.#ordered[index] = undefined;\n        this.#indexById.delete(option.id);\n        this.#hasGaps = true;\n      }\n    };\n  }\n\n  rebuild(listElement: Pick<HTMLElement, \"querySelectorAll\">): void {\n    const ordered: RegistryEntry<Item>[] = [];\n    const indexById = new Map<string, number>();\n\n    for (const element of listElement.querySelectorAll<HTMLElement>(\n      '[role=\"option\"]',\n    )) {\n      const entry = this.#entries.get(element.id);\n      if (entry?.element === element && element.isConnected) {\n        indexById.set(entry.data.id, ordered.length);\n        ordered.push(entry);\n      }\n    }\n\n    for (const id of this.#entries.keys()) {\n      if (!indexById.has(id)) {\n        this.#entries.delete(id);\n      }\n    }\n\n    this.#ordered = ordered;\n    this.#indexById = indexById;\n    this.#hasGaps = false;\n  }\n\n  getAt(index: number): RegisteredOption<Item> | undefined {\n    if (!this.#hasGaps) {\n      return this.#ordered[index];\n    }\n\n    let currentIndex = 0;\n    for (const entry of this.#ordered) {\n      if (entry && this.#entries.get(entry.data.id) === entry) {\n        if (currentIndex === index) return entry;\n        currentIndex++;\n      }\n    }\n    return undefined;\n  }\n\n  get length(): number {\n    return this.#hasGaps ? this.#entries.size : this.#ordered.length;\n  }\n\n  indexOfId(id: string): number {\n    const physicalIndex = this.#indexById.get(id);\n    if (physicalIndex === undefined || !this.#hasGaps) {\n      return physicalIndex ?? -1;\n    }\n\n    let logicalIndex = 0;\n    for (let index = 0; index < physicalIndex; index++) {\n      const entry = this.#ordered[index];\n      if (entry && this.#entries.get(entry.data.id) === entry) logicalIndex++;\n    }\n    return logicalIndex;\n  }\n\n  indexOfValue(value: Item): number {\n    let logicalIndex = 0;\n    for (const entry of this.#ordered) {\n      if (entry && this.#entries.get(entry.data.id) === entry) {\n        if (entry.data.value === value) return logicalIndex;\n        logicalIndex++;\n      }\n    }\n    return -1;\n  }\n\n  findByData(option: OptionValue<Item>): RegisteredOption<Item> | undefined {\n    const entry = this.#entries.get(option.id);\n    return entry?.data === option ? entry : undefined;\n  }\n\n  matching(\n    predicate: (option: OptionValue<Item>) => boolean,\n  ): RegisteredOption<Item>[] {\n    const matches: RegistryEntry<Item>[] = [];\n    for (const entry of this.#ordered) {\n      if (\n        entry !== undefined &&\n        this.#entries.get(entry.data.id) === entry &&\n        predicate(entry.data)\n      ) {\n        matches.push(entry);\n      }\n    }\n    return matches;\n  }\n\n  snapshot(): readonly RegisteredOption<Item>[] {\n    return this.#ordered.filter(\n      (entry): entry is RegistryEntry<Item> => entry !== undefined,\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist-es/list-control/ListControlState.js

@@ -2,15 +2,53 @@ import { useRef, useState, useEffect, useCallback } from 'react';
 import 'clsx';
 import 'react/jsx-runtime';
 import { useControlled } from '../utils/useControlled.js';
+import { useEventCallback } from '../utils/useEventCallback.js';
 import '../utils/useFloatingUI/useFloatingUI.js';
 import { useForkRef } from '../utils/useForkRef.js';
 import '../utils/useId.js';
+import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect.js';
 import '../salt-provider/SaltProvider.js';
 import '../viewport/ViewportProvider.js';
+import { ListControlOptionStore } from './ListControlOptionStore.js';
+import { ListControlRegistry, createCoalescedRebuild } from './ListControlRegistry.js';
 
 function defaultValueToString(item) {
   return String(item);
 }
+function findOptionFromSearch(options, search, valueToString, startFrom) {
+  var _a;
+  const collator = new Intl.Collator("en", {
+    usage: "search",
+    sensitivity: "base"
+  });
+  const startFromIndex = startFrom ? options.findIndex((item) => item.data.value === startFrom.value) : -1;
+  const startIndex = startFrom ? startFromIndex + 1 : 0;
+  const firstIndexByValue = /* @__PURE__ */ new Map();
+  for (let index = 0; index < options.length; index++) {
+    const value = options[index].data.value;
+    if ((typeof value !== "number" || !Number.isNaN(value)) && !firstIndexByValue.has(value)) {
+      firstIndexByValue.set(value, index);
+    }
+  }
+  const letters = search.split("");
+  const allSameLetter = letters.length > 0 && letters.every((letter) => collator.compare(letter, letters[0]) === 0);
+  let repeatedCharacterMatch;
+  for (let offset = 0; offset < options.length; offset++) {
+    const index = (startIndex + offset) % options.length;
+    const option = options[index].data;
+    if (firstIndexByValue.get(option.value) !== index) {
+      continue;
+    }
+    const optionText = valueToString(option.value);
+    if (collator.compare(optionText.substring(0, search.length), search) === 0) {
+      return option;
+    }
+    if (repeatedCharacterMatch === void 0 && allSameLetter && collator.compare((_a = optionText[0]) == null ? void 0 : _a.toLowerCase(), letters[0]) === 0) {
+      repeatedCharacterMatch = option;
+    }
+  }
+  return repeatedCharacterMatch;
+}
 function useListControl(props) {
   const {
     open: openProp,
@@ -24,6 +62,13 @@ function useListControl(props) {
     readOnly,
     valueToString = defaultValueToString
   } = props;
+  const optionStateStoreRef = useRef(null);
+  if (optionStateStoreRef.current === null) {
+    optionStateStoreRef.current = new ListControlOptionStore(
+      selectedProp ?? defaultSelected ?? []
+    );
+  }
+  const optionStateStore = optionStateStoreRef.current;
   const listRef = useRef(null);
   const [listElement, setListElement] = useState(null);
   const setListRef = useForkRef(listRef, setListElement);
@@ -35,16 +80,9 @@ function useListControl(props) {
       setFocusVisibleState(false);
     }
   }, [disabled, focusedState]);
-  const [activeState, setActiveState] = useState(
+  const [activeState, setActive] = useState(
     void 0
   );
-  const setActive = useCallback((option) => {
-    if (option) {
-      setActiveState(option);
-    } else {
-      setActiveState(void 0);
-    }
-  }, []);
   const [openState, setOpenState] = useControlled({
     controlled: openProp,
     default: Boolean(defaultOpen),
@@ -68,152 +106,143 @@ function useListControl(props) {
     name: "ListControl",
     state: "selected"
   });
-  const select = (event, option) => {
-    if (option.disabled || readOnly || disabled) {
-      return;
-    }
-    let newSelected = [option.value];
-    if (multiselect) {
-      if (selectedState.includes(option.value)) {
-        newSelected = selectedState.filter((item) => item !== option.value);
-      } else {
-        newSelected = selectedState.concat([option.value]);
+  const select = useEventCallback(
+    (event, option) => {
+      if (option.disabled || readOnly || disabled) {
+        return;
+      }
+      let newSelected = [option.value];
+      if (multiselect) {
+        if (selectedState.includes(option.value)) {
+          newSelected = selectedState.filter((item) => item !== option.value);
+        } else {
+          newSelected = selectedState.concat([option.value]);
+        }
+      }
+      setSelectedState(newSelected);
+      onSelectionChange == null ? void 0 : onSelectionChange(event, newSelected);
+      if (!multiselect) {
+        setOpen(false);
       }
     }
-    setSelectedState(newSelected);
-    onSelectionChange == null ? void 0 : onSelectionChange(event, newSelected);
-    if (!multiselect) {
-      setOpen(false);
-    }
-  };
+  );
   const clear = (event) => {
     setSelectedState([]);
     if (selectedState.length !== 0) {
       onSelectionChange == null ? void 0 : onSelectionChange(event, []);
     }
   };
-  const optionsRef = useRef([]);
+  const registryRef = useRef(null);
+  if (registryRef.current === null) {
+    registryRef.current = new ListControlRegistry();
+  }
+  const registry = registryRef.current;
+  const scheduleRebuildRef = useRef(void 0);
+  useIsomorphicLayoutEffect(() => {
+    optionStateStore.setActiveId(activeState == null ? void 0 : activeState.id);
+  }, [activeState == null ? void 0 : activeState.id, optionStateStore]);
+  useIsomorphicLayoutEffect(() => {
+    optionStateStore.setFocusVisible(focusVisibleState);
+  }, [focusVisibleState, optionStateStore]);
+  useIsomorphicLayoutEffect(() => {
+    optionStateStore.setSelected(selectedState);
+  }, [optionStateStore, selectedState]);
   const register = useCallback(
     (optionValue, element) => {
-      const { id } = optionValue;
-      const existingIndex = optionsRef.current.findIndex(
-        (item) => item.data.id === id
-      );
-      if (existingIndex !== -1) {
-        optionsRef.current.splice(existingIndex, 1);
-      }
-      optionsRef.current.push({ data: optionValue, element });
+      var _a;
+      const unregisterOptionState = optionStateStore.register(optionValue);
+      const unregisterRegistry = registry.register(optionValue, element);
+      (_a = scheduleRebuildRef.current) == null ? void 0 : _a.call(scheduleRebuildRef);
       return () => {
-        optionsRef.current = optionsRef.current.filter(
-          (item) => item.data.id !== id
-        );
+        var _a2;
+        unregisterRegistry();
+        unregisterOptionState();
+        (_a2 = scheduleRebuildRef.current) == null ? void 0 : _a2.call(scheduleRebuildRef);
       };
     },
-    []
+    [optionStateStore, registry]
   );
   useEffect(() => {
-    const sortOptions = () => {
-      optionsRef.current = optionsRef.current.filter((a) => a.element.isConnected).sort(({ element: a }, { element: b }) => {
-        if (a === b) return 0;
-        const pos = a.compareDocumentPosition(b);
-        if (pos & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
-        if (pos & Node.DOCUMENT_POSITION_PRECEDING) return 1;
-        return 0;
-      });
+    if (!listElement) return;
+    const rebuild = () => {
+      mutationObserver.takeRecords();
+      registry.rebuild(listElement);
     };
+    const coalescedRebuild = createCoalescedRebuild(rebuild);
+    scheduleRebuildRef.current = coalescedRebuild.schedule;
+    const containsOption = (node) => node.nodeType === Node.ELEMENT_NODE && (node.matches('[role="option"]') || node.querySelector('[role="option"]') !== null);
     const mutationObserver = new MutationObserver((mutations) => {
-      const optionsChanged = mutations.some(
-        (mutation) => Array.from(mutation.addedNodes).some(
-          (node) => {
-            var _a;
-            return node instanceof HTMLElement && ((_a = node.matches) == null ? void 0 : _a.call(node, '[role="option"]'));
-          }
-        )
-      );
-      if (optionsChanged) {
-        sortOptions();
+      if (mutations.some(
+        ({ addedNodes, removedNodes }) => Array.from(addedNodes).some(containsOption) || Array.from(removedNodes).some(containsOption)
+      )) {
+        coalescedRebuild.schedule();
       }
     });
-    if (!listElement) return;
     mutationObserver.observe(listElement, {
       childList: true,
       subtree: true
     });
-    sortOptions();
-    return () => mutationObserver.disconnect();
-  }, [listElement]);
+    rebuild();
+    return () => {
+      scheduleRebuildRef.current = void 0;
+      coalescedRebuild.cancel();
+      mutationObserver.disconnect();
+    };
+  }, [listElement, registry]);
   const getOptionAtIndex = useCallback(
     (index) => {
-      return optionsRef.current[index];
+      return registry.getAt(index);
     },
-    []
+    [registry]
+  );
+  const getIndexOfOption = useCallback(
+    (option) => {
+      return registry.indexOfValue(option.value);
+    },
+    [registry]
   );
-  const getIndexOfOption = useCallback((option) => {
-    return optionsRef.current.findIndex(
-      (item) => item.data.value === option.value
-    );
-  }, []);
   const getOptionsMatching = useCallback(
     (predicate) => {
-      return optionsRef.current.filter((item) => predicate(item.data));
+      return registry.matching(predicate);
     },
-    []
+    [registry]
   );
   const getOptionFromSearch = useCallback(
     (search, startFrom) => {
-      const collator = new Intl.Collator("en", {
-        usage: "search",
-        sensitivity: "base"
-      });
-      const startIndex = startFrom ? getIndexOfOption(startFrom) + 1 : 0;
-      const searchList = optionsRef.current.map((item) => item.data);
-      let matches = searchList.filter(
-        (option) => collator.compare(
-          valueToString(option.value).substring(0, search.length),
-          search
-        ) === 0
+      return findOptionFromSearch(
+        registry.snapshot(),
+        search,
+        valueToString,
+        startFrom
       );
-      if (matches.length === 0) {
-        const letters = search.split("");
-        const allSameLetter = letters.length > 0 && letters.every((letter) => collator.compare(letter, letters[0]) === 0);
-        if (allSameLetter) {
-          matches = searchList.filter(
-            (option) => collator.compare(
-              valueToString(option.value)[0].toLowerCase(),
-              letters[0]
-            ) === 0
-          );
-        }
-      }
-      return matches.find((option) => getIndexOfOption(option) >= startIndex);
     },
-    [getIndexOfOption, valueToString]
+    [registry, valueToString]
   );
   const getFirstOption = useCallback(() => {
     return getOptionAtIndex(0);
   }, [getOptionAtIndex]);
   const getLastOption = useCallback(() => {
-    return getOptionAtIndex(optionsRef.current.length - 1);
-  }, [getOptionAtIndex]);
+    return getOptionAtIndex(registry.length - 1);
+  }, [getOptionAtIndex, registry]);
   const getOptionBefore = useCallback(
     (option) => {
-      const index = getIndexOfOption(option);
+      const index = registry.indexOfId(option.id);
       return getOptionAtIndex(index - 1);
     },
-    [getIndexOfOption, getOptionAtIndex]
+    [getOptionAtIndex, registry]
   );
   const getOptionAfter = useCallback(
     (option) => {
-      const index = getIndexOfOption(option);
+      const index = registry.indexOfId(option.id);
       return getOptionAtIndex(index + 1);
     },
-    [getIndexOfOption, getOptionAtIndex]
+    [getOptionAtIndex, registry]
   );
   const getOptionPageAbove = useCallback(
     (start) => {
       var _a;
       const list = listRef.current;
-      let option = optionsRef.current.find((option2) => option2.data === start);
+      let option = registry.findByData(start);
       if (!list || !option) {
         return void 0;
       }
@@ -230,12 +259,12 @@ function useListControl(props) {
       }
       return option ?? getFirstOption();
     },
-    [getFirstOption, getOptionBefore]
+    [getFirstOption, getOptionBefore, registry]
   );
   const getOptionPageBelow = useCallback(
     (start) => {
       const list = listRef.current;
-      let option = optionsRef.current.find((option2) => option2.data === start);
+      let option = registry.findByData(start);
       if (!list || !option) {
         return void 0;
       }
@@ -252,14 +281,12 @@ function useListControl(props) {
       }
       return option ?? getLastOption();
     },
-    [getLastOption, getOptionAfter]
+    [getLastOption, getOptionAfter, registry]
   );
   useEffect(() => {
     var _a;
     if (listRef.current) {
-      const activeElement = (_a = optionsRef.current.find(
-        (option) => option.data === activeState
-      )) == null ? void 0 : _a.element;
+      const activeElement = activeState ? (_a = registry.findByData(activeState)) == null ? void 0 : _a.element : void 0;
       if (!activeElement) {
         return;
       }
@@ -268,7 +295,7 @@ function useListControl(props) {
         inline: "nearest"
       });
     }
-  }, [activeState]);
+  }, [activeState, registry]);
   return {
     multiselect: Boolean(multiselect),
     openState,
@@ -286,7 +313,6 @@ function useListControl(props) {
     setFocusedState,
     setListRef,
     listRef,
-    options: optionsRef.current.map((option) => option.element),
     register,
     getOptionAtIndex,
     getIndexOfOption,
@@ -299,9 +325,10 @@ function useListControl(props) {
     getFirstOption,
     getLastOption,
     valueToString,
-    disabled
+    disabled,
+    optionStateStore
   };
 }
 
-export { defaultValueToString, useListControl };
+export { defaultValueToString, findOptionFromSearch, useListControl };
 //# sourceMappingURL=ListControlState.js.map