@expcat/tigercat-react 1.1.0 → 1.2.0

package/dist/{chunk-UJ5NMLZN.mjs → chunk-T4OVGM4X.mjs}

@@ -1,8 +1,29 @@
-import { useId, useState, useRef, useMemo, useEffect } from 'react';
-import { filterOptions, flattenSelectOptions, findFirstEnabledIndex, getSelectTriggerClasses, classNames, selectBaseClasses, icon20ViewBox, closeSolidIcon20PathD, chevronDownSolidIcon20PathD, selectDropdownBaseClasses, selectSearchInputClasses, findNextEnabledIndex, findLastEnabledIndex, selectEmptyStateClasses, isOptionGroup, selectGroupLabelClasses, getSelectOptionClasses, checkSolidIcon20PathD } from '@expcat/tigercat-core';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
 // src/components/Select.tsx
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import {
+  classNames,
+  getSelectTriggerClasses,
+  getSelectOptionClasses,
+  selectBaseClasses,
+  selectDropdownBaseClasses,
+  selectGroupLabelClasses,
+  selectSearchInputClasses,
+  selectEmptyStateClasses,
+  isOptionGroup,
+  createSelectSearchDebouncer,
+  getCreateSelectOptionLabel,
+  flattenSelectOptions,
+  resolveCreatableSelectOption,
+  resolveSelectFilteredOptions,
+  findFirstEnabledIndex as pickerFindFirstEnabledIndex,
+  findLastEnabledIndex as pickerFindLastEnabledIndex,
+  findNextEnabledIndex as pickerFindNextEnabledIndex,
+  icon20ViewBox,
+  chevronDownSolidIcon20PathD,
+  closeSolidIcon20PathD,
+  checkSolidIcon20PathD
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
 var isMultipleSelect = (props) => props.multiple === true;
 var Select = (props) => {
   const {
@@ -15,9 +36,18 @@ var Select = (props) => {
     noOptionsText = "No options found",
     noDataText = "No options available",
     maxTagCount,
+    remote = false,
+    searchDebounce = 0,
+    creatable = false,
+    createOptionText = "Create",
     onSearch,
-    className
+    onCreate,
+    className,
+    value,
+    onChange,
+    multiple
   } = props;
+  const isMultiple = multiple === true;
   const SELECT_KEYS = /* @__PURE__ */ new Set([
     "options",
     "size",
@@ -29,8 +59,13 @@ var Select = (props) => {
     "noDataText",
     "maxTagCount",
     "virtual",
+    "remote",
+    "searchDebounce",
+    "creatable",
+    "createOptionText",
     "listHeight",
     "onSearch",
+    "onCreate",
     "className",
     "value",
     "onChange",
@@ -45,48 +80,62 @@ var Select = (props) => {
   const [isOpen, setIsOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
   const [activeIndex, setActiveIndex] = useState(-1);
+  const [createdOptions, setCreatedOptions] = useState([]);
   const dropdownRef = useRef(null);
   const triggerRef = useRef(null);
   const searchInputRef = useRef(null);
+  const searchDebouncerRef = useRef(null);
   const filteredOptions = useMemo(
-    () => searchable && searchQuery ? filterOptions(options, searchQuery) : options,
-    [options, searchable, searchQuery]
+    () => resolveSelectFilteredOptions(options, searchQuery, { searchable, remote }),
+    [options, remote, searchable, searchQuery]
   );
   const flatFilteredOptions = useMemo(
     () => flattenSelectOptions(filteredOptions),
     [filteredOptions]
   );
+  const creatableOption = useMemo(
+    () => resolveCreatableSelectOption([...options, ...createdOptions], searchQuery, {
+      creatable: creatable && searchable
+    }),
+    [creatable, createdOptions, options, searchable, searchQuery]
+  );
+  const flatSelectableOptions = useMemo(
+    () => creatableOption ? [...flatFilteredOptions, creatableOption] : flatFilteredOptions,
+    [creatableOption, flatFilteredOptions]
+  );
   const allOptions = useMemo(() => flattenSelectOptions(options), [options]);
   const displayText = useMemo(() => {
-    if (isMultipleSelect(props)) {
-      const value2 = props.value ?? [];
-      if (value2.length === 0) return placeholder;
-      const labels = allOptions.filter((opt) => value2.includes(opt.value)).map((opt) => opt.label);
+    if (isMultiple) {
+      const values = Array.isArray(value) ? value : [];
+      if (values.length === 0) return placeholder;
+      const labels = [...allOptions, ...createdOptions].filter((opt) => values.includes(opt.value)).map((opt) => opt.label);
       if (maxTagCount !== void 0 && labels.length > maxTagCount) {
         const visible = labels.slice(0, maxTagCount);
         return `${visible.join(", ")} +${labels.length - maxTagCount}`;
       }
       return labels.join(", ");
     }
-    const value = props.value;
     if (value === void 0 || value === null || value === "") return placeholder;
-    return allOptions.find((opt) => opt.value === value)?.label ?? placeholder;
-  }, [props.multiple, props.value, allOptions, placeholder, maxTagCount]);
+    return [...allOptions, ...createdOptions].find((opt) => opt.value === value)?.label ?? placeholder;
+  }, [isMultiple, value, allOptions, createdOptions, placeholder, maxTagCount]);
   const showClearButton = useMemo(
-    () => clearable && !disabled && props.value !== void 0 && props.value !== null && props.value !== "" && (!Array.isArray(props.value) || props.value.length > 0),
-    [clearable, disabled, props.value]
+    () => clearable && !disabled && value !== void 0 && value !== null && value !== "" && (!Array.isArray(value) || value.length > 0),
+    [clearable, disabled, value]
   );
   const isSelected = (option) => {
-    if (isMultipleSelect(props)) {
-      return (props.value ?? []).includes(option.value);
+    if (isMultiple) {
+      return (Array.isArray(value) ? value : []).includes(option.value);
     }
-    return props.value === option.value;
+    return value === option.value;
   };
   const getOptionId = (index) => `tiger-select-option-${instanceId}-${index}`;
-  const findFirstEnabledIndex$1 = () => findFirstEnabledIndex(flatFilteredOptions);
-  const findLastEnabledIndex$1 = () => findLastEnabledIndex(flatFilteredOptions);
-  const findNextEnabledIndex$1 = (current, direction) => findNextEnabledIndex(flatFilteredOptions, current, direction);
-  const focusOptionAt = (index) => {
+  const findFirstEnabledIndex = useCallback(
+    () => pickerFindFirstEnabledIndex(flatSelectableOptions),
+    [flatSelectableOptions]
+  );
+  const findLastEnabledIndex = () => pickerFindLastEnabledIndex(flatSelectableOptions);
+  const findNextEnabledIndex = (current, direction) => pickerFindNextEnabledIndex(flatSelectableOptions, current, direction);
+  const focusOptionAt = useCallback((index) => {
     if (index < 0) {
       return;
     }
@@ -95,7 +144,7 @@ var Select = (props) => {
       el?.focus();
       el?.scrollIntoView({ block: "nearest" });
     });
-  };
+  }, []);
   const setActiveAndFocus = (index) => {
     setActiveIndex(index);
     focusOptionAt(index);
@@ -114,7 +163,7 @@ var Select = (props) => {
     if (activeIndex < 0) {
       return void 0;
     }
-    return flatFilteredOptions[activeIndex];
+    return flatSelectableOptions[activeIndex];
   };
   const selectActiveOption = () => {
     const option = getActiveOption();
@@ -127,13 +176,18 @@ var Select = (props) => {
     if (option.disabled) {
       return;
     }
-    if (isMultipleSelect(props)) {
-      const currentValue = props.value ?? [];
+    if (creatableOption && option.value === creatableOption.value) {
+      setCreatedOptions((current) => [...current, option]);
+      onCreate?.(option);
+    }
+    if (isMultiple) {
+      const currentValue = Array.isArray(value) ? value : [];
       const nextValue = currentValue.includes(option.value) ? currentValue.filter((v) => v !== option.value) : [...currentValue, option.value];
-      props.onChange?.(nextValue);
+      onChange?.(nextValue);
       return;
     }
-    props.onChange?.(option.value);
+    ;
+    onChange?.(option.value);
     closeDropdown();
     requestAnimationFrame(() => {
       triggerRef.current?.focus();
@@ -141,17 +195,27 @@ var Select = (props) => {
   };
   const clearSelection = (event) => {
     event.stopPropagation();
-    if (isMultipleSelect(props)) {
-      props.onChange?.([]);
+    if (isMultiple) {
+      ;
+      onChange?.([]);
       return;
     }
-    props.onChange?.(void 0);
+    ;
+    onChange?.(void 0);
   };
   const handleSearchInput = (event) => {
     const query = event.target.value;
     setSearchQuery(query);
-    onSearch?.(query);
+    searchDebouncerRef.current?.schedule(query);
   };
+  useEffect(() => {
+    searchDebouncerRef.current?.cancel();
+    searchDebouncerRef.current = createSelectSearchDebouncer({
+      delay: searchDebounce,
+      onSearch: (query) => onSearch?.(query)
+    });
+    return () => searchDebouncerRef.current?.cancel();
+  }, [onSearch, searchDebounce]);
   const handleTriggerKeyDown = (event) => {
     if (disabled) {
       return;
@@ -163,7 +227,7 @@ var Select = (props) => {
           setIsOpen(true);
           return;
         }
-        const next = findNextEnabledIndex$1(activeIndex, 1);
+        const next = findNextEnabledIndex(activeIndex, 1);
         setActiveAndFocus(next);
         return;
       }
@@ -173,7 +237,7 @@ var Select = (props) => {
           setIsOpen(true);
           return;
         }
-        const next = findNextEnabledIndex$1(activeIndex, -1);
+        const next = findNextEnabledIndex(activeIndex, -1);
         setActiveAndFocus(next);
         return;
       }
@@ -202,25 +266,25 @@ var Select = (props) => {
     switch (event.key) {
       case "ArrowDown": {
         event.preventDefault();
-        const next = findNextEnabledIndex$1(activeIndex, 1);
+        const next = findNextEnabledIndex(activeIndex, 1);
         setActiveAndFocus(next);
         return;
       }
       case "ArrowUp": {
         event.preventDefault();
-        const next = findNextEnabledIndex$1(activeIndex, -1);
+        const next = findNextEnabledIndex(activeIndex, -1);
         setActiveAndFocus(next);
         return;
       }
       case "Home": {
         event.preventDefault();
-        const next = findFirstEnabledIndex$1();
+        const next = findFirstEnabledIndex();
         setActiveAndFocus(next);
         return;
       }
       case "End": {
         event.preventDefault();
-        const next = findLastEnabledIndex$1();
+        const next = findLastEnabledIndex();
         setActiveAndFocus(next);
         return;
       }
@@ -253,14 +317,14 @@ var Select = (props) => {
       case "ArrowDown": {
         event.preventDefault();
         event.stopPropagation();
-        const next = activeIndex >= 0 ? activeIndex : findFirstEnabledIndex$1();
+        const next = activeIndex >= 0 ? activeIndex : findFirstEnabledIndex();
         setActiveAndFocus(next);
         return;
       }
       case "ArrowUp": {
         event.preventDefault();
         event.stopPropagation();
-        const next = activeIndex >= 0 ? activeIndex : findLastEnabledIndex$1();
+        const next = activeIndex >= 0 ? activeIndex : findLastEnabledIndex();
         setActiveAndFocus(next);
         return;
       }
@@ -292,30 +356,37 @@ var Select = (props) => {
     if (!isOpen) {
       return;
     }
-    if (flatFilteredOptions.length === 0) {
+    if (flatSelectableOptions.length === 0) {
       setActiveIndex(-1);
       return;
     }
     const selectedIndex = (() => {
-      if (isMultipleSelect(props)) {
-        const value2 = props.value ?? [];
-        if (value2.length === 0) {
+      if (isMultiple) {
+        const values = Array.isArray(value) ? value : [];
+        if (values.length === 0) {
           return -1;
         }
-        return flatFilteredOptions.findIndex((opt) => value2.includes(opt.value) && !opt.disabled);
+        return flatSelectableOptions.findIndex((opt) => values.includes(opt.value) && !opt.disabled);
       }
-      const value = props.value;
       if (value === void 0 || value === null || value === "") {
         return -1;
       }
-      return flatFilteredOptions.findIndex((opt) => opt.value === value && !opt.disabled);
+      return flatSelectableOptions.findIndex((opt) => opt.value === value && !opt.disabled);
     })();
-    const nextActive = selectedIndex >= 0 ? selectedIndex : findFirstEnabledIndex$1();
+    const nextActive = selectedIndex >= 0 ? selectedIndex : findFirstEnabledIndex();
     setActiveIndex(nextActive);
     if (!searchable) {
       focusOptionAt(nextActive);
     }
-  }, [isOpen, searchable, flatFilteredOptions, props.multiple, props.value]);
+  }, [
+    isOpen,
+    searchable,
+    flatSelectableOptions,
+    isMultiple,
+    value,
+    findFirstEnabledIndex,
+    focusOptionAt
+  ]);
   useEffect(() => {
     if (!isOpen) {
       return;
@@ -332,7 +403,7 @@ var Select = (props) => {
     };
   }, [isOpen]);
   const triggerClasses = getSelectTriggerClasses(size, disabled, isOpen);
-  const renderOption = (option, index) => {
+  const renderOption = (option, index, displayLabel = option.label) => {
     const optionSelected = isSelected(option);
     const optionActive = index === activeIndex;
     return /* @__PURE__ */ jsx(
@@ -352,7 +423,7 @@ var Select = (props) => {
         },
         onClick: () => selectOption(option),
         children: /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-between w-full", children: [
-          /* @__PURE__ */ jsx("span", { children: option.label }),
+          /* @__PURE__ */ jsx("span", { children: displayLabel }),
           optionSelected && /* @__PURE__ */ jsx(
             "svg",
             {
@@ -370,11 +441,11 @@ var Select = (props) => {
   };
   const hasOptions = filteredOptions.length > 0;
   const renderOptions = () => {
-    if (!hasOptions) {
+    if (!hasOptions && !creatableOption) {
       return /* @__PURE__ */ jsx("div", { className: selectEmptyStateClasses, children: options.length === 0 ? noDataText : noOptionsText });
     }
     let optionIndex = -1;
-    return filteredOptions.map((item) => {
+    const optionNodes = filteredOptions.map((item) => {
       if (isOptionGroup(item)) {
         return /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("div", { className: selectGroupLabelClasses, children: item.label }),
@@ -387,6 +458,17 @@ var Select = (props) => {
       optionIndex += 1;
       return renderOption(item, optionIndex);
     });
+    if (creatableOption) {
+      optionIndex += 1;
+      optionNodes.push(
+        renderOption(
+          creatableOption,
+          optionIndex,
+          getCreateSelectOptionLabel(creatableOption, createOptionText)
+        )
+      );
+    }
+    return optionNodes;
   };
   const containerClasses = classNames(selectBaseClasses, className);
   return /* @__PURE__ */ jsxs("div", { ...divProps, className: containerClasses, children: [
@@ -477,4 +559,6 @@ var Select = (props) => {
   ] });
 };
 
-export { Select };
+export {
+  Select
+};