@expcat/tigercat-react 2.1.1 → 2.1.3

package/dist/chunk-UWQBY3CL.mjs

@@ -0,0 +1,331 @@
+import {
+  Icon
+} from "./chunk-WPRXOO6N.mjs";
+import {
+  Tag
+} from "./chunk-FVA5VKN2.mjs";
+import {
+  useInputGroupContext
+} from "./chunk-2AVQQGL2.mjs";
+import {
+  useFormItemControlContext
+} from "./chunk-F6T3OLTQ.mjs";
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/TagsInput.tsx
+import { forwardRef, useEffect, useId, useRef, useState } from "react";
+import {
+  SHAKE_CLASS,
+  TIGER_CHROME_ATTR,
+  classNames,
+  commitTagCandidates,
+  extractTagCandidates,
+  formatRemoveTagLabel,
+  getTagsArrowDelta,
+  getTagsInputClearButtonClasses,
+  getTagsInputContainerClasses,
+  getTagsInputErrorClasses,
+  getTagsInputHighlightClasses,
+  getTagsInputInnerInputClasses,
+  getTagsInputLabels,
+  mergeAriaDescribedBy,
+  moveTagsHighlight,
+  removeTagAt,
+  resolveReadOnlyFlag,
+  resolveTagsPasteCandidates,
+  runShakeAnimation
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TagsInput = forwardRef(function TagsInput2({
+  size,
+  status: statusProp,
+  errorMessage: errorMessageProp,
+  _shakeTrigger: shakeTriggerProp,
+  value,
+  defaultValue,
+  placeholder = "",
+  allowDuplicates = false,
+  max,
+  delimiters = [","],
+  addOnBlur = false,
+  beforeAdd,
+  clearable = false,
+  disabled = false,
+  readonly: readonlyProp,
+  readOnly: readOnlyProp,
+  name,
+  id,
+  removeTagAriaLabel,
+  onChange,
+  onAdd,
+  onRemove,
+  onClear,
+  onFocus,
+  onBlur,
+  onClick,
+  className,
+  style,
+  ...rest
+}, ref) {
+  const config = useTigerConfig();
+  const inputGroup = useInputGroupContext();
+  const formItemControl = useFormItemControlContext();
+  const inGroup = inputGroup != null;
+  const effectiveSize = size ?? inputGroup?.size ?? "md";
+  const status = statusProp ?? formItemControl?.status ?? "default";
+  const errorMessage = errorMessageProp;
+  const shakeTrigger = shakeTriggerProp ?? formItemControl?.shakeTrigger;
+  const effectiveDisabled = Boolean(disabled) || Boolean(formItemControl?.disabled);
+  const isReadOnly = resolveReadOnlyFlag(readonlyProp, readOnlyProp);
+  const effectiveId = id ?? formItemControl?.id;
+  const effectiveName = name ?? formItemControl?.name;
+  const formBoundValue = formItemControl?.value;
+  const resolvedValue = value !== void 0 ? value : Array.isArray(formBoundValue) ? formBoundValue : void 0;
+  const dir = config.direction === "rtl" ? "rtl" : "ltr";
+  const labels = getTagsInputLabels(config.locale);
+  const reactId = useId();
+  const errorMsgId = `tiger-tags-input-error-${reactId}`;
+  const containerRef = useRef(null);
+  const inputRef = useRef(null);
+  const mountedRef = useRef(false);
+  const setInputRefs = (node) => {
+    inputRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  };
+  const [tags, setTags] = useControlledState({
+    value: resolvedValue,
+    defaultValue: defaultValue ?? [],
+    onChange: (next) => {
+      onChange?.(next);
+      formItemControl?.onChange?.(next);
+    }
+  });
+  const [inputText, setInputText] = useState("");
+  const [highlightedIndex, setHighlightedIndex] = useState(null);
+  useEffect(() => {
+    if (!mountedRef.current) {
+      mountedRef.current = true;
+      return;
+    }
+    if (status === "error") runShakeAnimation(containerRef.current);
+  }, [status, shakeTrigger]);
+  const isInteractive = !effectiveDisabled && !isReadOnly;
+  const commitCandidates = (candidates, pendingFallback) => {
+    const result = commitTagCandidates(tags, candidates, {
+      allowDuplicates,
+      max,
+      beforeAdd,
+      pendingFallback
+    });
+    if (result.added.length > 0) {
+      setTags(result.tags);
+      result.added.forEach((tag) => onAdd?.(tag));
+    }
+    return result;
+  };
+  const handleInputChange = (event) => {
+    if (!isInteractive) return;
+    setHighlightedIndex(null);
+    const { candidates, pending } = extractTagCandidates(event.currentTarget.value, delimiters);
+    if (candidates.length > 0) {
+      const result = commitCandidates(candidates, pending || candidates.at(-1));
+      setInputText(result.added.length > 0 ? pending : result.pending || pending);
+      return;
+    }
+    setInputText(pending);
+  };
+  const removeAt = (index) => {
+    const tag = tags[index];
+    if (tag === void 0) return;
+    setTags(removeTagAt(tags, index));
+    onRemove?.(tag, index);
+  };
+  const handleKeyDown = (event) => {
+    if (!isInteractive) return;
+    if (event.key === "Enter") {
+      if (!inputText.trim()) return;
+      event.preventDefault();
+      const result = commitCandidates([inputText], inputText);
+      if (result.added.length > 0) setInputText("");
+      else setInputText(result.pending);
+      return;
+    }
+    if (event.key === "Backspace" && inputText === "") {
+      if (highlightedIndex !== null) {
+        removeAt(highlightedIndex);
+        setHighlightedIndex(null);
+      } else if (tags.length > 0) {
+        setHighlightedIndex(tags.length - 1);
+      }
+      return;
+    }
+    if (event.key === "Delete" && highlightedIndex !== null) {
+      removeAt(highlightedIndex);
+      setHighlightedIndex(null);
+      return;
+    }
+    const delta = getTagsArrowDelta(event.key, dir);
+    if (delta !== null && inputText === "" && (tags.length > 0 || highlightedIndex !== null)) {
+      setHighlightedIndex((prev) => moveTagsHighlight(prev, tags.length, delta));
+      return;
+    }
+    if (event.key === "Escape" && highlightedIndex !== null) {
+      setHighlightedIndex(null);
+      return;
+    }
+    if (highlightedIndex !== null) setHighlightedIndex(null);
+  };
+  const handlePaste = (event) => {
+    if (!isInteractive) return;
+    const text = event.clipboardData.getData("text");
+    const candidates = resolveTagsPasteCandidates(inputText, text, delimiters);
+    if (candidates.length <= 1) return;
+    event.preventDefault();
+    const result = commitCandidates(candidates, inputText);
+    setInputText(result.added.length > 0 ? "" : result.pending);
+  };
+  const handleBlur = (event) => {
+    const next = event.relatedTarget;
+    if (containerRef.current && next && containerRef.current.contains(next)) {
+      return;
+    }
+    setHighlightedIndex(null);
+    if (addOnBlur && inputText.trim() && isInteractive) {
+      const result = commitCandidates([inputText], inputText);
+      if (result.added.length > 0) setInputText("");
+    }
+    formItemControl?.onBlur?.();
+    onBlur?.(event);
+  };
+  const handleClear = () => {
+    if (!isInteractive || tags.length === 0) return;
+    setTags([]);
+    setInputText("");
+    setHighlightedIndex(null);
+    onClear?.();
+    inputRef.current?.focus();
+  };
+  const focusInput = () => inputRef.current?.focus();
+  const handleContainerClick = (event) => {
+    onClick?.(event);
+    if (event.defaultPrevented) return;
+    if (!(event.target instanceof HTMLButtonElement)) focusInput();
+  };
+  const handleClose = (index, event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    removeAt(index);
+    focusInput();
+  };
+  const activeError = status === "error" && !!errorMessage;
+  const hasExtras = activeError;
+  const isFull = max !== void 0 && tags.length >= max;
+  const removeLabelTemplate = removeTagAriaLabel ?? labels.removeTagLabel;
+  const labelledby = typeof rest["aria-labelledby"] === "string" && rest["aria-labelledby"].trim() ? rest["aria-labelledby"] : formItemControl?.labelId;
+  const describedBy = mergeAriaDescribedBy(
+    mergeAriaDescribedBy(
+      typeof rest["aria-describedby"] === "string" ? rest["aria-describedby"] : void 0,
+      activeError ? errorMsgId : void 0
+    ),
+    formItemControl?.describedBy
+  );
+  const containerNode = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      ref: containerRef,
+      className: classNames(
+        getTagsInputContainerClasses(effectiveSize, status, {
+          disabled: effectiveDisabled,
+          inGroup: inGroup && !hasExtras
+        }),
+        !hasExtras ? className : void 0
+      ),
+      style: !hasExtras ? style : void 0,
+      "data-state": isFull ? "full" : void 0,
+      onClick: handleContainerClick,
+      onAnimationEnd: () => containerRef.current?.classList.remove(SHAKE_CLASS),
+      ...{ [TIGER_CHROME_ATTR]: "" },
+      children: [
+        tags.map((tag, index) => /* @__PURE__ */ jsx(
+          Tag,
+          {
+            size: effectiveSize === "lg" ? "md" : "sm",
+            closable: isInteractive,
+            closeTabIndex: -1,
+            closeAriaLabel: formatRemoveTagLabel(removeLabelTemplate, tag),
+            className: index === highlightedIndex ? getTagsInputHighlightClasses() : void 0,
+            "aria-current": index === highlightedIndex ? "true" : void 0,
+            onClose: (event) => handleClose(index, event),
+            children: tag
+          },
+          `${tag}-${index}`
+        )),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: setInputRefs,
+            className: getTagsInputInnerInputClasses(),
+            type: "text",
+            value: inputText,
+            placeholder: tags.length === 0 ? placeholder : "",
+            disabled: effectiveDisabled,
+            readOnly: isReadOnly,
+            id: effectiveId,
+            "aria-label": typeof rest["aria-label"] === "string" ? rest["aria-label"] : void 0,
+            "aria-labelledby": labelledby,
+            "aria-invalid": status === "error" ? true : void 0,
+            "aria-required": formItemControl?.required ? true : void 0,
+            "aria-describedby": describedBy,
+            onChange: handleInputChange,
+            onKeyDown: handleKeyDown,
+            onPaste: handlePaste,
+            onFocus,
+            onBlur: handleBlur
+          }
+        ),
+        clearable && tags.length > 0 && isInteractive && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: getTagsInputClearButtonClasses(),
+            onMouseDown: (event) => event.preventDefault(),
+            onClick: handleClear,
+            "aria-label": labels.clearAllLabel,
+            tabIndex: -1,
+            children: /* @__PURE__ */ jsx(Icon, { name: "close", size: "sm", "aria-hidden": true })
+          }
+        ),
+        effectiveName && !effectiveDisabled ? tags.map((tag, index) => /* @__PURE__ */ jsx("input", { type: "hidden", name: effectiveName, value: tag }, `hidden-${index}`)) : null
+      ]
+    }
+  );
+  if (!hasExtras) return containerNode;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames(
+        inGroup ? "flex flex-col flex-1 min-w-0" : "flex flex-col w-full",
+        className
+      ),
+      style,
+      children: [
+        containerNode,
+        /* @__PURE__ */ jsx("div", { id: errorMsgId, className: getTagsInputErrorClasses(), "aria-live": "polite", children: errorMessage })
+      ]
+    }
+  );
+});
+TagsInput.displayName = "TagsInput";
+var TagsInput_default = TagsInput;
+
+export {
+  TagsInput,
+  TagsInput_default
+};