@expcat/tigercat-react 2.1.1 → 2.1.3

package/dist/chunk-KRDHM5KB.mjs

@@ -1,259 +0,0 @@
-import {
-  useFormItemControlContext
-} from "./chunk-F6T3OLTQ.mjs";
-import {
-  useControlledState
-} from "./chunk-MEFARVQI.mjs";
-import {
-  Tag
-} from "./chunk-7EXOY7GD.mjs";
-import {
-  useTigerConfig
-} from "./chunk-YSIXURBW.mjs";
-
-// src/components/TagsInput.tsx
-import { useEffect, useId, useRef, useState } from "react";
-import {
-  addTags,
-  classNames,
-  extractTagCandidates,
-  formatRemoveTagLabel,
-  getTagsInputClearButtonClasses,
-  getTagsInputContainerClasses,
-  getTagsInputErrorClasses,
-  getTagsInputHighlightClasses,
-  getTagsInputInnerInputClasses,
-  getTagsInputLabels,
-  injectShakeStyle,
-  removeTagAt,
-  SHAKE_CLASS,
-  splitTagInput
-} from "@expcat/tigercat-core";
-import { jsx, jsxs } from "react/jsx-runtime";
-var TagsInput = ({
-  size = "md",
-  status: statusProp,
-  errorMessage: errorMessageProp,
-  _shakeTrigger: shakeTriggerProp,
-  value,
-  defaultValue,
-  placeholder = "",
-  allowDuplicates = false,
-  max,
-  delimiters = [","],
-  addOnBlur = false,
-  beforeAdd,
-  clearable = false,
-  disabled = false,
-  readonly = false,
-  name,
-  id,
-  removeTagAriaLabel,
-  onChange,
-  onAdd,
-  onRemove,
-  onClear,
-  onFocus,
-  onBlur,
-  className,
-  style,
-  ...rest
-}) => {
-  injectShakeStyle();
-  const config = useTigerConfig();
-  const formItemControl = useFormItemControlContext();
-  const status = statusProp ?? formItemControl?.status ?? "default";
-  const errorMessage = errorMessageProp ?? formItemControl?.errorMessage;
-  const shakeTrigger = shakeTriggerProp ?? formItemControl?.shakeTrigger;
-  const labels = getTagsInputLabels(config.locale);
-  const reactId = useId();
-  const errorMsgId = `tiger-tags-input-error-${reactId}`;
-  const containerRef = useRef(null);
-  const inputRef = useRef(null);
-  const [tags, setTags] = useControlledState(value, defaultValue ?? [], onChange);
-  const [inputText, setInputText] = useState("");
-  const [highlightedIndex, setHighlightedIndex] = useState(null);
-  useEffect(() => {
-    if (status === "error" && containerRef.current) {
-      const el = containerRef.current;
-      el.classList.remove(SHAKE_CLASS);
-      void el.offsetWidth;
-      el.classList.add(SHAKE_CLASS);
-    }
-  }, [status, shakeTrigger]);
-  const isInteractive = !disabled && !readonly;
-  const commitCandidates = (candidates) => {
-    const prepared = [];
-    for (const raw of candidates) {
-      if (!beforeAdd) {
-        prepared.push(raw);
-        continue;
-      }
-      const result = beforeAdd(raw.trim());
-      if (result === false) continue;
-      prepared.push(typeof result === "string" ? result : raw);
-    }
-    if (prepared.length === 0) return { added: [] };
-    const { tags: nextTags, added } = addTags(tags, prepared, { allowDuplicates, max });
-    if (added.length > 0) {
-      setTags(nextTags);
-      added.forEach((tag) => onAdd?.(tag));
-    }
-    return { added };
-  };
-  const handleInputChange = (event) => {
-    if (!isInteractive) return;
-    setHighlightedIndex(null);
-    const { candidates, pending } = extractTagCandidates(event.currentTarget.value, delimiters);
-    if (candidates.length > 0) commitCandidates(candidates);
-    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") {
-      event.preventDefault();
-      if (inputText.trim()) {
-        const { added } = commitCandidates([inputText]);
-        if (added.length > 0) setInputText("");
-      }
-      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 === "ArrowLeft" && inputText === "" && tags.length > 0) {
-      setHighlightedIndex((prev) => {
-        if (prev === null) return tags.length - 1;
-        return Math.max(0, prev - 1);
-      });
-      return;
-    }
-    if (event.key === "ArrowRight" && highlightedIndex !== null) {
-      setHighlightedIndex((prev) => {
-        if (prev === null || prev >= tags.length - 1) return null;
-        return prev + 1;
-      });
-      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 = splitTagInput(text, delimiters);
-    if (candidates.length <= 1) return;
-    event.preventDefault();
-    commitCandidates(candidates);
-    setInputText("");
-  };
-  const handleBlur = (event) => {
-    setHighlightedIndex(null);
-    if (addOnBlur && inputText.trim() && isInteractive) {
-      const { added } = commitCandidates([inputText]);
-      if (added.length > 0) setInputText("");
-    }
-    onBlur?.(event);
-  };
-  const handleClear = () => {
-    if (!isInteractive || tags.length === 0) return;
-    setTags([]);
-    setInputText("");
-    setHighlightedIndex(null);
-    onClear?.();
-    inputRef.current?.focus();
-  };
-  const focusInput = (event) => {
-    if (event.target === containerRef.current) inputRef.current?.focus();
-  };
-  const activeError = status === "error" && !!errorMessage;
-  const isFull = max !== void 0 && tags.length >= max;
-  const removeLabelTemplate = removeTagAriaLabel ?? labels.removeTagLabel;
-  const containerNode = /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ...rest,
-      ref: containerRef,
-      id,
-      className: classNames(getTagsInputContainerClasses(size, status, { disabled }), className),
-      style,
-      "data-state": isFull ? "full" : void 0,
-      onClick: focusInput,
-      children: [
-        tags.map((tag, index) => /* @__PURE__ */ jsx(
-          Tag,
-          {
-            size: size === "lg" ? "md" : "sm",
-            closable: isInteractive,
-            closeAriaLabel: formatRemoveTagLabel(removeLabelTemplate, tag),
-            className: index === highlightedIndex ? getTagsInputHighlightClasses() : void 0,
-            onClose: (event) => {
-              event.preventDefault();
-              removeAt(index);
-            },
-            children: tag
-          },
-          `${tag}-${index}`
-        )),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            ref: inputRef,
-            className: getTagsInputInnerInputClasses(),
-            type: "text",
-            value: inputText,
-            placeholder: tags.length === 0 ? placeholder : "",
-            disabled,
-            readOnly: readonly,
-            id: id ? `${id}-input` : void 0,
-            ...status === "error" ? { "aria-invalid": true } : {},
-            ...activeError ? { "aria-describedby": errorMsgId } : {},
-            onChange: handleInputChange,
-            onKeyDown: handleKeyDown,
-            onPaste: handlePaste,
-            onFocus,
-            onBlur: handleBlur
-          }
-        ),
-        clearable && tags.length > 0 && isInteractive && /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: getTagsInputClearButtonClasses(),
-            onClick: handleClear,
-            "aria-label": labels.clearAllLabel,
-            tabIndex: -1,
-            children: "\u2715"
-          }
-        ),
-        name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: tags.join(",") })
-      ]
-    }
-  );
-  if (!activeError) return containerNode;
-  return /* @__PURE__ */ jsxs("div", { children: [
-    containerNode,
-    /* @__PURE__ */ jsx("div", { id: errorMsgId, className: getTagsInputErrorClasses(), children: errorMessage })
-  ] });
-};
-var TagsInput_default = TagsInput;
-
-export {
-  TagsInput,
-  TagsInput_default
-};