@diceui/tags-input 0.0.1

package/dist/index.js

@@ -0,0 +1,651 @@
+'use client';
+
+import { Primitive } from '@radix-ui/react-primitive';
+import * as React from 'react';
+import { createContext, useControllableState, useId, useDirection, useCollection, useFormControl, useComposedRefs, DATA_ITEM_ATTR, composeEventHandlers, BubbleInput, composeRefs, Presence } from '@diceui/shared';
+
+var ROOT_NAME = "TagsInputRoot";
+var [TagsInputProvider, useTagsInput] = createContext(ROOT_NAME);
+var TagsInputRoot = React.forwardRef((props, ref) => {
+  const {
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    onValidate,
+    onInvalid,
+    displayValue = (value2) => value2.toString(),
+    addOnPaste = false,
+    addOnTab = false,
+    disabled = false,
+    editable = false,
+    loop = false,
+    blurBehavior,
+    delimiter = ",",
+    max = Number.POSITIVE_INFINITY,
+    required = false,
+    name,
+    children,
+    dir: dirProp,
+    id: idProp,
+    ...rootProps
+  } = props;
+  const [value = [], setValue] = useControllableState({
+    prop: valueProp,
+    defaultProp: defaultValue,
+    onChange: onValueChange
+  });
+  const [highlightedValue, setHighlightedValue] = React.useState(null);
+  const [editingValue, setEditingValue] = React.useState(
+    null
+  );
+  const [isInvalidInput, setIsInvalidInput] = React.useState(false);
+  const collectionRef = React.useRef(null);
+  const inputRef = React.useRef(null);
+  const id = useId();
+  const inputId = useId();
+  const labelId = useId();
+  const dir = useDirection(dirProp);
+  const { getEnabledItems } = useCollection({
+    ref: collectionRef
+  });
+  const { isFormControl, onTriggerChange } = useFormControl();
+  const composedRef = useComposedRefs(
+    ref,
+    collectionRef,
+    (node) => onTriggerChange(node)
+  );
+  const onItemAdd = React.useCallback(
+    (textValue, options) => {
+      if (addOnPaste && options?.viaPaste) {
+        const splitValues = textValue.split(delimiter).map((v) => v.trim()).filter(Boolean);
+        if (value.length + splitValues.length > max && max > 0) {
+          onInvalid?.(textValue);
+          return false;
+        }
+        let newValues2 = [];
+        for (const v of splitValues) {
+          if (value.includes(v)) {
+            onInvalid?.(v);
+          }
+        }
+        newValues2 = [...new Set(splitValues.filter((v) => !value.includes(v)))];
+        const validValues = newValues2.filter(
+          (v) => !onValidate || onValidate(v)
+        );
+        if (validValues.length === 0) return false;
+        setValue([...value, ...validValues]);
+        return true;
+      }
+      if (value.length >= max && max > 0) {
+        onInvalid?.(textValue);
+        return false;
+      }
+      const trimmedValue = textValue.trim();
+      if (onValidate && !onValidate(trimmedValue)) {
+        setIsInvalidInput(true);
+        onInvalid?.(trimmedValue);
+        return false;
+      }
+      const exists = value.some((v) => {
+        const valueToCompare = v;
+        return valueToCompare === trimmedValue;
+      });
+      if (exists) {
+        setIsInvalidInput(true);
+        onInvalid?.(trimmedValue);
+        return true;
+      }
+      const newValue = trimmedValue;
+      const newValues = [...value, newValue];
+      setValue(newValues);
+      setHighlightedValue(null);
+      setEditingValue(null);
+      setIsInvalidInput(false);
+      return true;
+    },
+    [value, max, addOnPaste, delimiter, setValue, onInvalid, onValidate]
+  );
+  const onItemUpdate = React.useCallback(
+    (index, newTextValue) => {
+      if (index !== -1) {
+        const trimmedValue = newTextValue.trim();
+        const exists = value.some((v, i) => {
+          if (i === index) return false;
+          const valueToCompare = v;
+          return valueToCompare === trimmedValue;
+        });
+        if (exists) {
+          setIsInvalidInput(true);
+          onInvalid?.(trimmedValue);
+          return;
+        }
+        if (onValidate && !onValidate(trimmedValue)) {
+          setIsInvalidInput(true);
+          onInvalid?.(trimmedValue);
+          return;
+        }
+        const updatedValue = displayValue(trimmedValue);
+        const newValues = [...value];
+        newValues[index] = updatedValue;
+        setValue(newValues);
+        setHighlightedValue(updatedValue);
+        setEditingValue(null);
+        setIsInvalidInput(false);
+        requestAnimationFrame(() => inputRef.current?.focus());
+      }
+    },
+    [value, setValue, displayValue, onInvalid, onValidate]
+  );
+  const onItemRemove = React.useCallback(
+    (index) => {
+      if (index !== -1) {
+        const newValues = [...value];
+        newValues.splice(index, 1);
+        setValue(newValues);
+        setHighlightedValue(null);
+        setEditingValue(null);
+        inputRef.current?.focus();
+      }
+    },
+    [value, setValue]
+  );
+  const onItemLeave = React.useCallback(() => {
+    setHighlightedValue(null);
+    setEditingValue(null);
+    inputRef.current?.focus();
+  }, []);
+  const onInputKeydown = React.useCallback(
+    (event) => {
+      const target = event.target;
+      if (!(target instanceof HTMLInputElement)) return;
+      const isArrowLeft = event.key === "ArrowLeft" && dir === "ltr" || event.key === "ArrowRight" && dir === "rtl";
+      const isArrowRight = event.key === "ArrowRight" && dir === "ltr" || event.key === "ArrowLeft" && dir === "rtl";
+      if (target.value && target.selectionStart !== 0) {
+        setHighlightedValue(null);
+        setEditingValue(null);
+        return;
+      }
+      const findNextEnabledValue = (currentValue, direction) => {
+        const collectionElement = collectionRef.current;
+        if (!collectionElement) return null;
+        const enabledItems = getEnabledItems();
+        const enabledValues = enabledItems.map((_, index) => value[index]);
+        if (enabledValues.length === 0) return null;
+        if (currentValue === null) {
+          return direction === "prev" ? enabledValues[enabledValues.length - 1] ?? null : enabledValues[0] ?? null;
+        }
+        const currentIndex = enabledValues.indexOf(currentValue);
+        if (direction === "next") {
+          return currentIndex >= enabledValues.length - 1 ? loop ? enabledValues[0] ?? null : null : enabledValues[currentIndex + 1] ?? null;
+        }
+        return currentIndex <= 0 ? loop ? enabledValues[enabledValues.length - 1] ?? null : null : enabledValues[currentIndex - 1] ?? null;
+      };
+      switch (event.key) {
+        case "Delete":
+        case "Backspace": {
+          if (target.selectionStart !== 0 || target.selectionEnd !== 0) break;
+          if (highlightedValue !== null) {
+            const index = value.indexOf(highlightedValue);
+            const newValue = findNextEnabledValue(highlightedValue, "prev");
+            onItemRemove(index);
+            setHighlightedValue(newValue);
+            event.preventDefault();
+          } else if (event.key === "Backspace" && value.length > 0) {
+            const lastValue = findNextEnabledValue(null, "prev");
+            setHighlightedValue(lastValue);
+            event.preventDefault();
+          }
+          break;
+        }
+        case "Enter": {
+          if (highlightedValue !== null && editable && !disabled) {
+            setEditingValue(highlightedValue);
+            event.preventDefault();
+            return;
+          }
+          break;
+        }
+        case "ArrowLeft":
+        case "ArrowRight": {
+          if (target.selectionStart === 0 && isArrowLeft && highlightedValue === null && value.length > 0) {
+            const lastValue = findNextEnabledValue(null, "prev");
+            setHighlightedValue(lastValue);
+            event.preventDefault();
+          } else if (highlightedValue !== null) {
+            const nextValue = findNextEnabledValue(
+              highlightedValue,
+              isArrowLeft ? "prev" : "next"
+            );
+            if (nextValue !== null) {
+              setHighlightedValue(nextValue);
+              event.preventDefault();
+            } else if (isArrowRight) {
+              setHighlightedValue(null);
+              requestAnimationFrame(() => target.setSelectionRange(0, 0));
+            }
+          }
+          break;
+        }
+        case "Home": {
+          if (highlightedValue !== null) {
+            const firstValue = findNextEnabledValue(null, "next");
+            setHighlightedValue(firstValue);
+            event.preventDefault();
+          }
+          break;
+        }
+        case "End": {
+          if (highlightedValue !== null) {
+            const lastValue = findNextEnabledValue(null, "prev");
+            setHighlightedValue(lastValue);
+            event.preventDefault();
+          }
+          break;
+        }
+        case "Escape": {
+          setHighlightedValue(null);
+          setEditingValue(null);
+          requestAnimationFrame(() => target.setSelectionRange(0, 0));
+          break;
+        }
+      }
+    },
+    [
+      highlightedValue,
+      value,
+      onItemRemove,
+      dir,
+      editable,
+      disabled,
+      loop,
+      getEnabledItems
+    ]
+  );
+  const getIsClickedInEmptyRoot = React.useCallback((target) => {
+    return collectionRef.current?.contains(target) && !target.hasAttribute(DATA_ITEM_ATTR) && target.tagName !== "INPUT";
+  }, []);
+  return /* @__PURE__ */ React.createElement(
+    TagsInputProvider,
+    {
+      value,
+      onValueChange: setValue,
+      onItemAdd,
+      onItemRemove,
+      onItemUpdate,
+      onInputKeydown,
+      highlightedValue,
+      setHighlightedValue,
+      editingValue,
+      setEditingValue,
+      displayValue,
+      onItemLeave,
+      inputRef,
+      isInvalidInput,
+      addOnPaste,
+      addOnTab,
+      disabled,
+      editable,
+      loop,
+      blurBehavior,
+      delimiter,
+      max,
+      dir,
+      id,
+      inputId,
+      labelId
+    },
+    /* @__PURE__ */ React.createElement(
+      Primitive.div,
+      {
+        id,
+        "data-invalid": isInvalidInput ? "" : void 0,
+        "data-disabled": disabled ? "" : void 0,
+        dir,
+        ...rootProps,
+        ref: composedRef,
+        onClick: composeEventHandlers(rootProps.onClick, (event) => {
+          const target = event.target;
+          if (!(target instanceof HTMLElement)) return;
+          if (getIsClickedInEmptyRoot(target) && document.activeElement !== inputRef.current) {
+            event.currentTarget.focus();
+            inputRef.current?.focus();
+          }
+        }),
+        onMouseDown: composeEventHandlers(rootProps.onMouseDown, (event) => {
+          const target = event.target;
+          if (!(target instanceof HTMLElement)) return;
+          if (getIsClickedInEmptyRoot(target)) {
+            event.preventDefault();
+          }
+        }),
+        onBlur: composeEventHandlers(rootProps.onBlur, (event) => {
+          if (event.relatedTarget !== inputRef.current && !collectionRef.current?.contains(event.relatedTarget)) {
+            requestAnimationFrame(() => setHighlightedValue(null));
+          }
+        })
+      },
+      typeof children === "function" ? /* @__PURE__ */ React.createElement(React.Fragment, null, children({ value })) : children,
+      isFormControl && name && /* @__PURE__ */ React.createElement(
+        BubbleInput,
+        {
+          type: "hidden",
+          control: collectionRef.current,
+          name,
+          value,
+          required,
+          disabled
+        }
+      )
+    )
+  );
+});
+TagsInputRoot.displayName = ROOT_NAME;
+var Root = TagsInputRoot;
+var LABEL_NAME = "TagsInputLabel";
+var TagsInputLabel = React.forwardRef(
+  (props, ref) => {
+    const context = useTagsInput(LABEL_NAME);
+    return /* @__PURE__ */ React.createElement(
+      Primitive.label,
+      {
+        id: context.labelId,
+        htmlFor: context.inputId,
+        ...props,
+        ref
+      }
+    );
+  }
+);
+TagsInputLabel.displayName = LABEL_NAME;
+var Label = TagsInputLabel;
+var ITEM_NAME = "TagsInputItem";
+var [TagsInputItemProvider, useTagsInputItem] = createContext(ITEM_NAME);
+var TagsInputItem = React.forwardRef(
+  (props, ref) => {
+    const { value, disabled, ...itemProps } = props;
+    const pointerTypeRef = React.useRef("touch");
+    const context = useTagsInput(ITEM_NAME);
+    const id = useId();
+    const textId = `${id}text`;
+    const isHighlighted = value === context.highlightedValue;
+    const isEditing = value === context.editingValue;
+    const itemDisabled = disabled || context.disabled;
+    const displayValue = context.displayValue(value);
+    function onSelect() {
+      context.setHighlightedValue(value);
+      context.inputRef.current?.focus();
+    }
+    return /* @__PURE__ */ React.createElement(
+      TagsInputItemProvider,
+      {
+        id,
+        value,
+        isHighlighted,
+        isEditing,
+        disabled: itemDisabled,
+        textId,
+        displayValue
+      },
+      /* @__PURE__ */ React.createElement(
+        Primitive.div,
+        {
+          ...{ [DATA_ITEM_ATTR]: "" },
+          "aria-labelledby": textId,
+          "aria-current": isHighlighted,
+          "aria-disabled": itemDisabled,
+          "data-state": isHighlighted ? "active" : "inactive",
+          "data-highlighted": isHighlighted ? "" : void 0,
+          "data-editing": isEditing ? "" : void 0,
+          "data-editable": context.editable ? "" : void 0,
+          "data-disabled": itemDisabled ? "" : void 0,
+          id,
+          ...itemProps,
+          ref,
+          onClick: composeEventHandlers(itemProps.onClick, (event) => {
+            event.stopPropagation();
+            if (!isEditing && pointerTypeRef.current !== "mouse") {
+              onSelect();
+            }
+          }),
+          onDoubleClick: composeEventHandlers(itemProps.onDoubleClick, () => {
+            if (context.editable && !itemDisabled) {
+              requestAnimationFrame(() => context.setEditingValue(value));
+            }
+          }),
+          onPointerUp: composeEventHandlers(itemProps.onPointerUp, () => {
+            if (pointerTypeRef.current === "mouse") onSelect();
+          }),
+          onPointerDown: composeEventHandlers(
+            itemProps.onPointerDown,
+            (event) => pointerTypeRef.current = event.pointerType
+          ),
+          onPointerMove: composeEventHandlers(
+            itemProps.onPointerMove,
+            (event) => {
+              pointerTypeRef.current = event.pointerType;
+              if (disabled) {
+                context.onItemLeave();
+              } else if (pointerTypeRef.current === "mouse") {
+                event.currentTarget.focus({ preventScroll: true });
+              }
+            }
+          ),
+          onPointerLeave: composeEventHandlers(
+            itemProps.onPointerLeave,
+            (event) => {
+              if (event.currentTarget === document.activeElement) {
+                context.onItemLeave();
+              }
+            }
+          )
+        }
+      )
+    );
+  }
+);
+TagsInputItem.displayName = ITEM_NAME;
+var Item = TagsInputItem;
+var INPUT_NAME = "TagsInputInput";
+var TagsInputInput = React.forwardRef(
+  (props, ref) => {
+    const { autoFocus, ...inputProps } = props;
+    const context = useTagsInput(INPUT_NAME);
+    function onTab(event) {
+      if (!context.addOnTab) return;
+      onCustomKeydown(event);
+    }
+    function onCustomKeydown(event) {
+      if (event.defaultPrevented) return;
+      const value = event.currentTarget.value;
+      if (!value) return;
+      const isAdded = context.onItemAdd(value);
+      if (isAdded) {
+        event.currentTarget.value = "";
+        context.setHighlightedValue(null);
+      }
+      event.preventDefault();
+    }
+    React.useEffect(() => {
+      if (!autoFocus) return;
+      const animationFrameId = requestAnimationFrame(
+        () => context.inputRef.current?.focus()
+      );
+      return () => cancelAnimationFrame(animationFrameId);
+    }, [autoFocus, context.inputRef]);
+    return /* @__PURE__ */ React.createElement(
+      Primitive.input,
+      {
+        type: "text",
+        id: context.inputId,
+        autoCapitalize: "off",
+        autoComplete: "off",
+        autoCorrect: "off",
+        spellCheck: "false",
+        autoFocus,
+        "aria-labelledby": context.labelId,
+        "data-invalid": context.isInvalidInput ? "" : void 0,
+        disabled: context.disabled,
+        ...inputProps,
+        ref: composeRefs(context.inputRef, ref),
+        onBlur: composeEventHandlers(inputProps.onBlur, (event) => {
+          if (context.blurBehavior === "add") {
+            const value = event.target.value;
+            if (value) {
+              const isAdded = context.onItemAdd(value);
+              if (isAdded) event.target.value = "";
+            }
+          }
+          if (context.blurBehavior === "clear") {
+            event.target.value = "";
+          }
+        }),
+        onChange: composeEventHandlers(inputProps.onChange, (event) => {
+          const target = event.target;
+          if (!(target instanceof HTMLInputElement)) return;
+          const delimiter = context.delimiter;
+          if (delimiter === target.value.slice(-1)) {
+            const value = target.value.slice(0, -1);
+            target.value = "";
+            if (value) {
+              context.onItemAdd(value);
+              context.setHighlightedValue(null);
+            }
+          }
+        }),
+        onKeyDown: composeEventHandlers(inputProps.onKeyDown, (event) => {
+          if (event.key === "Enter") onCustomKeydown(event);
+          if (event.key === "Tab") onTab(event);
+          context.onInputKeydown(event);
+          if (event.key.length === 1) context.setHighlightedValue(null);
+        }),
+        onPaste: composeEventHandlers(inputProps.onPaste, (event) => {
+          if (context.addOnPaste) {
+            event.preventDefault();
+            const value = event.clipboardData.getData("text");
+            context.onItemAdd(value, { viaPaste: true });
+            context.setHighlightedValue(null);
+          }
+        })
+      }
+    );
+  }
+);
+TagsInputInput.displayName = INPUT_NAME;
+var Input = TagsInputInput;
+var ITEM_DELETE_NAME = "TagsInputItemDelete";
+var TagsInputItemDelete = React.forwardRef((props, ref) => {
+  const context = useTagsInput(ITEM_DELETE_NAME);
+  const itemContext = useTagsInputItem(ITEM_DELETE_NAME);
+  const disabled = itemContext.disabled || context.disabled;
+  if (itemContext.isEditing) return null;
+  return /* @__PURE__ */ React.createElement(
+    Primitive.button,
+    {
+      type: "button",
+      tabIndex: -1,
+      "aria-labelledby": itemContext.textId,
+      "aria-controls": itemContext.id,
+      "aria-current": itemContext.isHighlighted,
+      "data-state": itemContext.isHighlighted ? "active" : "inactive",
+      "data-disabled": disabled ? "" : void 0,
+      ...props,
+      ref,
+      onClick: composeEventHandlers(props.onClick, () => {
+        if (disabled) return;
+        const index = context.value.findIndex((i) => i === itemContext.value);
+        context.onItemRemove(index);
+      })
+    }
+  );
+});
+TagsInputItemDelete.displayName = ITEM_DELETE_NAME;
+var Delete = TagsInputItemDelete;
+var ITEM_TEXT_NAME = "TagsInputItemText";
+var TagsInputItemText = React.forwardRef((props, ref) => {
+  const { children, ...itemTextProps } = props;
+  const context = useTagsInput(ITEM_TEXT_NAME);
+  const itemContext = useTagsInputItem(ITEM_TEXT_NAME);
+  const [editValue, setEditValue] = React.useState(itemContext.displayValue);
+  if (itemContext.isEditing && context.editable && !itemContext.disabled) {
+    return /* @__PURE__ */ React.createElement(
+      Primitive.input,
+      {
+        type: "text",
+        autoCapitalize: "off",
+        autoComplete: "off",
+        autoCorrect: "off",
+        spellCheck: "false",
+        autoFocus: true,
+        "aria-describedby": itemContext.textId,
+        value: editValue,
+        onInput: (event) => {
+          const target = event.target;
+          if (!(target instanceof HTMLInputElement)) return;
+          target.style.width = "0";
+          target.style.width = `${target.scrollWidth + 4}px`;
+        },
+        onChange: (event) => setEditValue(event.target.value),
+        onKeyDown: (event) => {
+          if (event.key === "Enter") {
+            const index = context.value.findIndex(
+              (v) => v === itemContext.value
+            );
+            context.onItemUpdate(index, editValue);
+          } else if (event.key === "Escape") {
+            setEditValue(itemContext.displayValue);
+            context.setEditingValue(null);
+            context.inputRef.current?.focus();
+          }
+          event.stopPropagation();
+        },
+        onFocus: (event) => {
+          event.target.select();
+          event.target.style.width = "0";
+          event.target.style.width = `${event.target.scrollWidth + 4}px`;
+        },
+        onBlur: () => {
+          setEditValue(itemContext.displayValue);
+          context.setEditingValue(null);
+        },
+        style: {
+          outline: "none",
+          background: "inherit",
+          border: "none",
+          font: "inherit",
+          color: "inherit",
+          padding: 0,
+          minWidth: "1ch"
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ React.createElement(Primitive.span, { id: itemContext.textId, ...itemTextProps, ref }, children ?? itemContext.displayValue);
+});
+var Text = TagsInputItemText;
+var CLEAR_NAME = "TagsInputClear";
+var TagsInputClear = React.forwardRef(
+  (props, ref) => {
+    const { forceMount, ...clearProps } = props;
+    const context = useTagsInput(CLEAR_NAME);
+    return /* @__PURE__ */ React.createElement(Presence, { present: forceMount || context.value.length > 0 }, /* @__PURE__ */ React.createElement(
+      Primitive.button,
+      {
+        type: "button",
+        "aria-disabled": context.disabled,
+        "data-state": context.value.length > 0 ? "visible" : "invisible",
+        "data-disabled": context.disabled ? "" : void 0,
+        ...clearProps,
+        ref,
+        onClick: composeEventHandlers(props.onClick, () => {
+          if (context.disabled) return;
+          context.onValueChange([]);
+          context.inputRef.current?.focus();
+        })
+      }
+    ));
+  }
+);
+TagsInputClear.displayName = CLEAR_NAME;
+var Clear = TagsInputClear;
+
+export { Clear, Delete, Input, Item, Label, Root, TagsInputClear, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText, TagsInputLabel, TagsInputRoot, Text };

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@diceui/tags-input",
+  "version": "0.0.1",
+  "type": "module",
+  "keywords": [
+    "tags-input",
+    "tag-input",
+    "ui",
+    "react"
+  ],
+  "author": "Sadman Sakib",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sadmann7/diceui",
+    "directory": "packages/tags-input"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "package.json",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "@types/react": "*",
+    "@types/react-dom": "*",
+    "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+    "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.2",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2"
+  },
+  "dependencies": {
+    "@radix-ui/react-primitive": "^2.0.1",
+    "lucide-react": "^0.468.0",
+    "@diceui/shared": "0.0.1"
+  },
+  "scripts": {
+    "dev": "tsup --format esm --watch --external=react",
+    "build": "tsup --clean --external=react",
+    "typecheck": "tsc --noEmit"
+  }
+}