@expcat/tigercat-react 2.1.1 → 2.1.3

package/dist/chunk-JML6CK44.mjs

@@ -0,0 +1,483 @@
+import {
+  useInputGroupContext
+} from "./chunk-2AVQQGL2.mjs";
+import {
+  useFormItemControlContext
+} from "./chunk-F6T3OLTQ.mjs";
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  renderOverlayPortal,
+  useAnchoredOverlay
+} from "./chunk-NPGU6VYD.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/AutoComplete.tsx
+import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import {
+  classNames,
+  SHAKE_CLASS,
+  TIGER_CHROME_ATTR,
+  closeSolidIcon20PathD,
+  coerceAutoCompleteFormValue,
+  filterAutoCompleteOptions,
+  getAutoCompleteInputClasses,
+  getAutoCompleteOptionClasses,
+  getAutoCompleteOptionKey,
+  getAutoCompletePanelStyle,
+  getAutoCompleteRootClasses,
+  getAutoCompleteKeyIntent,
+  getEmptyLabels,
+  getInitialPickerActiveIndex,
+  getPickerComboboxAria,
+  getPickerListboxAria,
+  getPickerNavigationIndex,
+  getPickerOptionAria,
+  getPickerOptionId,
+  getSelectLabels,
+  icon20ViewBox,
+  isSameAutoCompleteValue,
+  mergeAriaDescribedBy,
+  mergeTigerLocale,
+  resolveAutoCompleteBlurCommit,
+  resolveAutoCompleteIdleQuery,
+  resolveAutoCompleteInitialQuery,
+  resolveLocaleText,
+  runShakeAnimation,
+  shouldShowAutoCompleteClear,
+  autoCompleteClearButtonClasses,
+  autoCompleteClearIconClasses,
+  autoCompleteDoneActionClasses,
+  autoCompleteDoneButtonClasses,
+  autoCompleteDropdownClasses,
+  autoCompleteEmptyStateClasses,
+  autoCompleteListboxClasses,
+  autoCompleteTrailingSlotClasses
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+function AutoCompleteClearIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: autoCompleteClearIconClasses,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: icon20ViewBox,
+      fill: "currentColor",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: closeSolidIcon20PathD, clipRule: "evenodd" })
+    }
+  );
+}
+var AutoComplete = forwardRef(
+  function AutoComplete2(props, ref) {
+    const {
+      value,
+      defaultValue,
+      options = [],
+      placeholder = "",
+      searchValue,
+      defaultSearchValue,
+      open,
+      defaultOpen = false,
+      size = "md",
+      disabled = false,
+      clearable = false,
+      emptyText,
+      filterOption = true,
+      defaultActiveFirstOption = true,
+      allowFreeInput = true,
+      locale,
+      className,
+      loading = false,
+      status: statusProp,
+      name,
+      id,
+      placement = "bottom-start",
+      offset = 4,
+      dropdownClassName,
+      getPopupContainer,
+      listHeight = 256,
+      onChange,
+      onSelect,
+      onSearchChange,
+      onOpenChange,
+      onFocus,
+      onBlur,
+      style,
+      ...rest
+    } = props;
+    const inputGroup = useInputGroupContext();
+    const formItemControl = useFormItemControlContext();
+    const config = useTigerConfig();
+    const mergedLocale = useMemo(
+      () => mergeTigerLocale(config.locale, locale),
+      [config.locale, locale]
+    );
+    const emptyLabels = useMemo(() => getEmptyLabels(mergedLocale), [mergedLocale]);
+    const selectLabels = useMemo(() => getSelectLabels(mergedLocale), [mergedLocale]);
+    const resolvedEmptyText = resolveLocaleText(emptyLabels.noResults, emptyText);
+    const loadingText = mergedLocale?.common?.loadingText ?? "Loading...";
+    const clearAriaLabel = mergedLocale?.common?.clearText ?? "Clear";
+    const doneText = selectLabels.doneText;
+    const effectiveDisabled = Boolean(disabled) || Boolean(formItemControl?.disabled);
+    const status = statusProp ?? formItemControl?.status ?? "default";
+    const shakeTrigger = formItemControl?.shakeTrigger;
+    const effectiveId = id ?? formItemControl?.id;
+    const effectiveName = name ?? formItemControl?.name;
+    const describedBy = mergeAriaDescribedBy(
+      typeof rest["aria-describedby"] === "string" ? rest["aria-describedby"] : void 0,
+      formItemControl?.describedBy
+    );
+    const labelledby = typeof rest["aria-labelledby"] === "string" && rest["aria-labelledby"].trim() ? rest["aria-labelledby"] : formItemControl?.labelId;
+    const ariaLabel = typeof rest["aria-label"] === "string" && rest["aria-label"].trim() ? rest["aria-label"] : void 0;
+    const incomingValue = value !== void 0 ? value : coerceAutoCompleteFormValue(formItemControl?.value);
+    const [committed, setCommitted] = useControlledState({
+      value: incomingValue,
+      defaultValue,
+      onChange: (next) => {
+        onChange?.(next);
+        formItemControl?.onChange?.(next);
+      }
+    });
+    const [isOpen, setOpen] = useControlledState({
+      value: open,
+      defaultValue: defaultOpen,
+      onChange: onOpenChange
+    });
+    const [query, setQuery] = useControlledState({
+      value: searchValue,
+      defaultValue: resolveAutoCompleteInitialQuery({
+        defaultSearchValue,
+        committed: incomingValue !== void 0 ? incomingValue : defaultValue,
+        optionList: options
+      }),
+      onChange: onSearchChange
+    });
+    const instanceId = useId();
+    const listboxId = `tiger-autocomplete-listbox-${instanceId}`;
+    const [activeIndex, setActiveIndex] = useState(-1);
+    const isEditingRef = useRef(false);
+    const rootRef = useRef(null);
+    const inputRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const mountedRef = useRef(false);
+    const committedRef = useRef(committed);
+    committedRef.current = committed;
+    const queryRef = useRef(query);
+    queryRef.current = query;
+    const optionsRef = useRef(options);
+    optionsRef.current = options;
+    const allowFreeInputRef = useRef(allowFreeInput);
+    allowFreeInputRef.current = allowFreeInput;
+    const hadCommittedRef = useRef(committed !== void 0);
+    const filteredOptions = useMemo(
+      () => filterAutoCompleteOptions(options, query, filterOption),
+      [filterOption, options, query]
+    );
+    const hasOptions = filteredOptions.length > 0;
+    const showClear = shouldShowAutoCompleteClear({
+      clearable,
+      disabled: effectiveDisabled,
+      query,
+      committed
+    });
+    const setInputRefs = (node) => {
+      inputRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    useEffect(() => {
+      if (!mountedRef.current) {
+        mountedRef.current = true;
+        return;
+      }
+      if (status === "error") runShakeAnimation(rootRef.current);
+    }, [status, shakeTrigger]);
+    useEffect(() => {
+      if (searchValue !== void 0) return;
+      if (isEditingRef.current) return;
+      if (committed === void 0) {
+        if (hadCommittedRef.current) setQuery("");
+        hadCommittedRef.current = false;
+        return;
+      }
+      hadCommittedRef.current = true;
+      setQuery(resolveAutoCompleteIdleQuery(committed, options));
+    }, [committed, options, searchValue, setQuery]);
+    const openDropdown = useCallback(() => {
+      if (effectiveDisabled) return;
+      setOpen(true);
+      setActiveIndex(getInitialPickerActiveIndex(filteredOptions, defaultActiveFirstOption));
+    }, [defaultActiveFirstOption, effectiveDisabled, filteredOptions, setOpen]);
+    const closeDropdown = useCallback(() => {
+      setOpen(false);
+      setActiveIndex(-1);
+    }, [setOpen]);
+    const applyQuery = useCallback(
+      (next) => {
+        setQuery(next);
+      },
+      [setQuery]
+    );
+    const commitValue = useCallback(
+      (next, option) => {
+        setCommitted(next);
+        if (option) onSelect?.(option.value, option);
+      },
+      [onSelect, setCommitted]
+    );
+    const commitCurrentQuery = useCallback(() => {
+      const result = resolveAutoCompleteBlurCommit({
+        query: queryRef.current,
+        committed: committedRef.current,
+        optionList: optionsRef.current,
+        allowFreeInput: allowFreeInputRef.current
+      });
+      applyQuery(result.query);
+      if (result.didCommit) commitValue(result.value, result.option);
+      return result;
+    }, [applyQuery, commitValue]);
+    const revertQuery = useCallback(() => {
+      applyQuery(resolveAutoCompleteIdleQuery(committedRef.current, optionsRef.current));
+    }, [applyQuery]);
+    const handleDismiss = useCallback(
+      (reason) => {
+        if (reason === "escape") {
+          isEditingRef.current = false;
+          revertQuery();
+          closeDropdown();
+          return;
+        }
+        isEditingRef.current = false;
+        commitCurrentQuery();
+        closeDropdown();
+      },
+      [closeDropdown, commitCurrentQuery, revertQuery]
+    );
+    const overlay = useAnchoredOverlay({
+      enabled: isOpen,
+      referenceRef: inputRef,
+      floatingRef: dropdownRef,
+      containerRef: rootRef,
+      placement,
+      offset,
+      layout: "fullscreen-sm",
+      matchReferenceWidth: true,
+      dismissOnOutside: true,
+      dismissOnEscape: true,
+      restoreFocusOnDismiss: true,
+      getContainer: getPopupContainer,
+      onDismiss: handleDismiss
+    });
+    const handleSelect = (option) => {
+      if (option.disabled || effectiveDisabled) return;
+      isEditingRef.current = false;
+      applyQuery(option.label);
+      commitValue(option.value, option);
+      closeDropdown();
+    };
+    const handleInput = (event) => {
+      if (effectiveDisabled) return;
+      const next = event.target.value;
+      isEditingRef.current = true;
+      applyQuery(next);
+      if (!isOpen) setOpen(true);
+      setActiveIndex(
+        getInitialPickerActiveIndex(
+          filterAutoCompleteOptions(options, next, filterOption),
+          defaultActiveFirstOption
+        )
+      );
+    };
+    const handleClear = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      isEditingRef.current = true;
+      applyQuery("");
+      commitValue(void 0);
+      inputRef.current?.focus();
+      if (!isOpen) setOpen(true);
+      setActiveIndex(getInitialPickerActiveIndex(options, defaultActiveFirstOption));
+    };
+    const handleFocus = (event) => {
+      isEditingRef.current = true;
+      openDropdown();
+      onFocus?.(event);
+    };
+    const handleFocusOut = (event) => {
+      const next = event.relatedTarget;
+      if (rootRef.current && next && rootRef.current.contains(next) || dropdownRef.current && next && dropdownRef.current.contains(next)) {
+        return;
+      }
+      isEditingRef.current = false;
+      commitCurrentQuery();
+      closeDropdown();
+      formItemControl?.onBlur?.();
+      onBlur?.(event);
+    };
+    const handleKeyDown = (event) => {
+      const intent = getAutoCompleteKeyIntent(event.key, isOpen, activeIndex);
+      switch (intent.type) {
+        case "open":
+          event.preventDefault();
+          openDropdown();
+          return;
+        case "navigate":
+          event.preventDefault();
+          setActiveIndex((prev) => getPickerNavigationIndex(filteredOptions, prev, intent.key));
+          return;
+        case "select-active": {
+          event.preventDefault();
+          const option = filteredOptions[activeIndex];
+          if (option) handleSelect(option);
+          return;
+        }
+        case "commit-query":
+          event.preventDefault();
+          isEditingRef.current = false;
+          commitCurrentQuery();
+          closeDropdown();
+          return;
+        case "close":
+          event.preventDefault();
+          isEditingRef.current = false;
+          revertQuery();
+          closeDropdown();
+          return;
+        default:
+          return;
+      }
+    };
+    const expanded = isOpen && hasOptions;
+    const comboboxAria = {
+      ...getPickerComboboxAria({
+        expanded,
+        listboxId,
+        activeIndex: expanded ? activeIndex : -1
+      }),
+      "aria-autocomplete": "list",
+      id: effectiveId,
+      name: effectiveName,
+      "aria-label": ariaLabel,
+      "aria-labelledby": labelledby,
+      "aria-describedby": describedBy,
+      "aria-invalid": status === "error" ? true : void 0,
+      "aria-required": formItemControl?.required ? true : void 0
+    };
+    const dropdown = isOpen ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: dropdownRef,
+        className: classNames(
+          autoCompleteDropdownClasses,
+          overlay.floatingClasses,
+          dropdownClassName
+        ),
+        style: overlay.floatingStyles,
+        "data-positioned": overlay.positioned,
+        "data-tiger-autocomplete-dropdown": "",
+        onMouseDown: (event) => event.preventDefault(),
+        onBlur: handleFocusOut,
+        children: [
+          hasOptions ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: autoCompleteListboxClasses,
+              style: getAutoCompletePanelStyle(listHeight),
+              ...getPickerListboxAria({ id: listboxId }),
+              children: filteredOptions.map((option, index) => {
+                const selected = isSameAutoCompleteValue(option.value, committed);
+                const isActive = index === activeIndex;
+                return /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    id: getPickerOptionId(listboxId, index),
+                    "data-active": isActive || void 0,
+                    ...getPickerOptionAria({
+                      selected,
+                      disabled: !!option.disabled
+                    }),
+                    className: getAutoCompleteOptionClasses({
+                      isSelected: selected,
+                      isDisabled: !!option.disabled,
+                      isActive,
+                      size
+                    }),
+                    onMouseDown: (event) => event.preventDefault(),
+                    onClick: () => handleSelect(option),
+                    onMouseEnter: () => {
+                      if (!option.disabled) setActiveIndex(index);
+                    },
+                    children: option.label
+                  },
+                  getAutoCompleteOptionKey(option, index)
+                );
+              })
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: autoCompleteEmptyStateClasses, children: loading ? loadingText : resolvedEmptyText }),
+          /* @__PURE__ */ jsx("div", { className: autoCompleteDoneActionClasses, children: /* @__PURE__ */ jsx("button", { type: "button", className: autoCompleteDoneButtonClasses, onClick: closeDropdown, children: doneText }) })
+        ]
+      }
+    ) : null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: rootRef,
+        className: getAutoCompleteRootClasses(inputGroup != null, className),
+        style,
+        ...{ [TIGER_CHROME_ATTR]: "" },
+        onAnimationEnd: () => rootRef.current?.classList.remove(SHAKE_CLASS),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ...rest,
+                ref: setInputRefs,
+                type: "text",
+                className: getAutoCompleteInputClasses({
+                  size,
+                  disabled: effectiveDisabled,
+                  isOpen,
+                  status,
+                  hasClear: showClear
+                }),
+                value: query,
+                placeholder,
+                disabled: effectiveDisabled,
+                autoComplete: "off",
+                ...comboboxAria,
+                onChange: handleInput,
+                onFocus: handleFocus,
+                onKeyDown: handleKeyDown,
+                onBlur: handleFocusOut
+              }
+            ),
+            showClear ? /* @__PURE__ */ jsx("span", { className: autoCompleteTrailingSlotClasses, children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: autoCompleteClearButtonClasses,
+                "data-tiger-autocomplete-clear": "",
+                "aria-label": clearAriaLabel,
+                onMouseDown: (event) => event.preventDefault(),
+                onClick: handleClear,
+                children: /* @__PURE__ */ jsx(AutoCompleteClearIcon, {})
+              }
+            ) }) : null
+          ] }),
+          dropdown && renderOverlayPortal(dropdown, overlay.target)
+        ]
+      }
+    );
+  }
+);
+AutoComplete.displayName = "AutoComplete";
+
+export {
+  AutoComplete
+};