@cerberus-design/react/dist/components/combobox/use-stateful-collection.js

The Cerberus Design React component library.

'use client';
import { useState, useMemo, useCallback } from 'react';
import { createSelectCollection } from '../select/primitives.js';

function useStatefulCollection(initialItems = []) {
  const [items, setItems] = useState(initialItems);
  const [filterValue, setFilterValue] = useState([]);
  const collection = useMemo(() => createSelectCollection(items), [items]);
  const handleInputChange = useCallback(
    (details) => {
      if (details.inputValue === "") {
        return setItems(initialItems);
      }
      setItems(
        (prev) => prev.filter(
          (item) => item.value.includes(details.inputValue.toLowerCase())
        )
      );
      setFilterValue(details.inputValue.split(""));
    },
    [initialItems]
  );
  return useMemo(
    () => ({
      collection,
      filterChars: filterValue,
      handleInputChange
    }),
    [collection, filterValue, handleInputChange]
  );
}

export { useStatefulCollection };