@diceui/tags-input 0.1.1 → 0.3.0

package/dist/index.cjs

@@ -43,6 +43,7 @@ var TagsInputRoot = React__namespace.forwardRef((props, ref) => {
     blurBehavior,
     delimiter = ",",
     max = Number.POSITIVE_INFINITY,
+    readOnly = false,
     required = false,
     name,
     children,
@@ -66,7 +67,7 @@ var TagsInputRoot = React__namespace.forwardRef((props, ref) => {
   const inputId = shared.useId();
   const labelId = shared.useId();
   const dir = shared.useDirection(dirProp);
-  const { getEnabledItems } = shared.useCollection({
+  const { getEnabledItems } = shared.useItemCollection({
     ref: collectionRef
   });
   const { isFormControl, onTriggerChange } = shared.useFormControl();
@@ -77,6 +78,7 @@ var TagsInputRoot = React__namespace.forwardRef((props, ref) => {
   );
   const onItemAdd = React__namespace.useCallback(
     (textValue, options) => {
+      if (disabled || readOnly) return false;
       if (addOnPaste && options?.viaPaste) {
         const splitValues = textValue.split(delimiter).map((v) => v.trim()).filter(Boolean);
         if (value.length + splitValues.length > max && max > 0) {
@@ -124,10 +126,21 @@ var TagsInputRoot = React__namespace.forwardRef((props, ref) => {
       setIsInvalidInput(false);
       return true;
     },
-    [value, max, addOnPaste, delimiter, setValue, onInvalid, onValidate]
+    [
+      value,
+      max,
+      addOnPaste,
+      delimiter,
+      setValue,
+      onInvalid,
+      onValidate,
+      disabled,
+      readOnly
+    ]
   );
   const onItemUpdate = React__namespace.useCallback(
     (index, newTextValue) => {
+      if (disabled || readOnly) return;
       if (index !== -1) {
         const trimmedValue = newTextValue.trim();
         const exists = value.some((v, i) => {
@@ -155,10 +168,11 @@ var TagsInputRoot = React__namespace.forwardRef((props, ref) => {
         requestAnimationFrame(() => inputRef.current?.focus());
       }
     },
-    [value, setValue, displayValue, onInvalid, onValidate]
+    [value, setValue, displayValue, onInvalid, onValidate, disabled, readOnly]
   );
   const onItemRemove = React__namespace.useCallback(
     (index) => {
+      if (disabled || readOnly) return;
       if (index !== -1) {
         const newValues = [...value];
         newValues.splice(index, 1);
@@ -168,7 +182,7 @@ var TagsInputRoot = React__namespace.forwardRef((props, ref) => {
         inputRef.current?.focus();
       }
     },
-    [value, setValue]
+    [value, setValue, disabled, readOnly]
   );
   const onItemLeave = React__namespace.useCallback(() => {
     setHighlightedIndex(null);
@@ -306,6 +320,7 @@ var TagsInputRoot = React__namespace.forwardRef((props, ref) => {
       disabled,
       editable,
       loop,
+      readOnly,
       blurBehavior,
       delimiter,
       max,
@@ -318,8 +333,9 @@ var TagsInputRoot = React__namespace.forwardRef((props, ref) => {
       shared.Primitive.div,
       {
         id,
-        "data-invalid": isInvalidInput ? "" : void 0,
         "data-disabled": disabled ? "" : void 0,
+        "data-invalid": isInvalidInput ? "" : void 0,
+        "data-readonly": readOnly ? "" : void 0,
         dir,
         ...rootProps,
         ref: composedRef,
@@ -352,8 +368,8 @@ var TagsInputRoot = React__namespace.forwardRef((props, ref) => {
           control: collectionRef.current,
           name,
           value,
-          required,
-          disabled
+          disabled,
+          required
         }
       )
     )
@@ -511,11 +527,15 @@ var TagsInputInput = React__namespace.forwardRef(
         spellCheck: "false",
         autoFocus,
         "aria-labelledby": context.labelId,
+        "aria-readonly": context.readOnly,
         "data-invalid": context.isInvalidInput ? "" : void 0,
+        dir: context.dir,
         disabled: context.disabled,
+        readOnly: context.readOnly,
         ...inputProps,
         ref: shared.composeRefs(context.inputRef, ref),
         onBlur: shared.composeEventHandlers(inputProps.onBlur, (event) => {
+          if (context.readOnly) return;
           if (context.blurBehavior === "add") {
             const value = event.target.value;
             if (value) {
@@ -528,6 +548,7 @@ var TagsInputInput = React__namespace.forwardRef(
           }
         }),
         onChange: shared.composeEventHandlers(inputProps.onChange, (event) => {
+          if (context.readOnly) return;
           const target = event.target;
           if (!(target instanceof HTMLInputElement)) return;
           const delimiter = context.delimiter;
@@ -541,12 +562,14 @@ var TagsInputInput = React__namespace.forwardRef(
           }
         }),
         onKeyDown: shared.composeEventHandlers(inputProps.onKeyDown, (event) => {
+          if (context.readOnly) return;
           if (event.key === "Enter") onCustomKeydown(event);
           if (event.key === "Tab") onTab(event);
           context.onInputKeydown(event);
           if (event.key.length === 1) context.setHighlightedIndex(null);
         }),
         onPaste: shared.composeEventHandlers(inputProps.onPaste, (event) => {
+          if (context.readOnly) return;
           if (context.addOnPaste) {
             event.preventDefault();
             const value = event.clipboardData.getData("text");

package/dist/index.d.cts

@@ -63,10 +63,16 @@ interface TagsInputRootProps<T = InputValue> extends Omit<React.ComponentPropsWi
      * @default Number.POSITIVE_INFINITY
      */
     max?: number;
-    /** Whether the field is required in a form context. */
+    /**
+     * Whether the field is required in a form context.
+     * @default false
+     */
     required?: boolean;
-    /** Name of the form field when used in a form. */
-    name?: string;
+    /**
+     * Whether the tags input is read-only.
+     * @default false
+     */
+    readOnly?: boolean;
     /**
      * The content of the tags input.
      *
@@ -82,6 +88,8 @@ interface TagsInputRootProps<T = InputValue> extends Omit<React.ComponentPropsWi
      * @default "ltr"
      */
     dir?: Direction;
+    /** Name of the form field when used in a form. */
+    name?: string;
     /** Unique identifier for the tags input. */
     id?: string;
 }
@@ -94,7 +102,9 @@ declare const TagsInputLabel: React.ForwardRefExoticComponent<TagsInputLabelProp
 declare const Label: React.ForwardRefExoticComponent<TagsInputLabelProps & React.RefAttributes<HTMLLabelElement>>;
 
 interface TagsInputItemProps extends React.ComponentPropsWithoutRef<typeof Primitive.div> {
+    /** The value of the item. */
     value: InputValue;
+    /** Whether the item is disabled. */
     disabled?: boolean;
 }
 declare const TagsInputItem: React.ForwardRefExoticComponent<TagsInputItemProps & React.RefAttributes<HTMLDivElement>>;

package/dist/index.d.ts

@@ -63,10 +63,16 @@ interface TagsInputRootProps<T = InputValue> extends Omit<React.ComponentPropsWi
      * @default Number.POSITIVE_INFINITY
      */
     max?: number;
-    /** Whether the field is required in a form context. */
+    /**
+     * Whether the field is required in a form context.
+     * @default false
+     */
     required?: boolean;
-    /** Name of the form field when used in a form. */
-    name?: string;
+    /**
+     * Whether the tags input is read-only.
+     * @default false
+     */
+    readOnly?: boolean;
     /**
      * The content of the tags input.
      *
@@ -82,6 +88,8 @@ interface TagsInputRootProps<T = InputValue> extends Omit<React.ComponentPropsWi
      * @default "ltr"
      */
     dir?: Direction;
+    /** Name of the form field when used in a form. */
+    name?: string;
     /** Unique identifier for the tags input. */
     id?: string;
 }
@@ -94,7 +102,9 @@ declare const TagsInputLabel: React.ForwardRefExoticComponent<TagsInputLabelProp
 declare const Label: React.ForwardRefExoticComponent<TagsInputLabelProps & React.RefAttributes<HTMLLabelElement>>;
 
 interface TagsInputItemProps extends React.ComponentPropsWithoutRef<typeof Primitive.div> {
+    /** The value of the item. */
     value: InputValue;
+    /** Whether the item is disabled. */
     disabled?: boolean;
 }
 declare const TagsInputItem: React.ForwardRefExoticComponent<TagsInputItemProps & React.RefAttributes<HTMLDivElement>>;

package/dist/index.js

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { createContext, useControllableState, useId, useDirection, useCollection, useFormControl, useComposedRefs, DATA_ITEM_ATTR, Primitive, composeEventHandlers, BubbleInput, composeRefs, Presence } from '@diceui/shared';
+import { createContext, useControllableState, useId, useDirection, useItemCollection, useFormControl, useComposedRefs, DATA_ITEM_ATTR, Primitive, composeEventHandlers, BubbleInput, composeRefs, Presence } from '@diceui/shared';
 
 var ROOT_NAME = "TagsInputRoot";
 var [TagsInputProvider, useTagsInput] = createContext(ROOT_NAME);
@@ -21,6 +21,7 @@ var TagsInputRoot = React.forwardRef((props, ref) => {
     blurBehavior,
     delimiter = ",",
     max = Number.POSITIVE_INFINITY,
+    readOnly = false,
     required = false,
     name,
     children,
@@ -44,7 +45,7 @@ var TagsInputRoot = React.forwardRef((props, ref) => {
   const inputId = useId();
   const labelId = useId();
   const dir = useDirection(dirProp);
-  const { getEnabledItems } = useCollection({
+  const { getEnabledItems } = useItemCollection({
     ref: collectionRef
   });
   const { isFormControl, onTriggerChange } = useFormControl();
@@ -55,6 +56,7 @@ var TagsInputRoot = React.forwardRef((props, ref) => {
   );
   const onItemAdd = React.useCallback(
     (textValue, options) => {
+      if (disabled || readOnly) return false;
       if (addOnPaste && options?.viaPaste) {
         const splitValues = textValue.split(delimiter).map((v) => v.trim()).filter(Boolean);
         if (value.length + splitValues.length > max && max > 0) {
@@ -102,10 +104,21 @@ var TagsInputRoot = React.forwardRef((props, ref) => {
       setIsInvalidInput(false);
       return true;
     },
-    [value, max, addOnPaste, delimiter, setValue, onInvalid, onValidate]
+    [
+      value,
+      max,
+      addOnPaste,
+      delimiter,
+      setValue,
+      onInvalid,
+      onValidate,
+      disabled,
+      readOnly
+    ]
   );
   const onItemUpdate = React.useCallback(
     (index, newTextValue) => {
+      if (disabled || readOnly) return;
       if (index !== -1) {
         const trimmedValue = newTextValue.trim();
         const exists = value.some((v, i) => {
@@ -133,10 +146,11 @@ var TagsInputRoot = React.forwardRef((props, ref) => {
         requestAnimationFrame(() => inputRef.current?.focus());
       }
     },
-    [value, setValue, displayValue, onInvalid, onValidate]
+    [value, setValue, displayValue, onInvalid, onValidate, disabled, readOnly]
   );
   const onItemRemove = React.useCallback(
     (index) => {
+      if (disabled || readOnly) return;
       if (index !== -1) {
         const newValues = [...value];
         newValues.splice(index, 1);
@@ -146,7 +160,7 @@ var TagsInputRoot = React.forwardRef((props, ref) => {
         inputRef.current?.focus();
       }
     },
-    [value, setValue]
+    [value, setValue, disabled, readOnly]
   );
   const onItemLeave = React.useCallback(() => {
     setHighlightedIndex(null);
@@ -284,6 +298,7 @@ var TagsInputRoot = React.forwardRef((props, ref) => {
       disabled,
       editable,
       loop,
+      readOnly,
       blurBehavior,
       delimiter,
       max,
@@ -296,8 +311,9 @@ var TagsInputRoot = React.forwardRef((props, ref) => {
       Primitive.div,
       {
         id,
-        "data-invalid": isInvalidInput ? "" : void 0,
         "data-disabled": disabled ? "" : void 0,
+        "data-invalid": isInvalidInput ? "" : void 0,
+        "data-readonly": readOnly ? "" : void 0,
         dir,
         ...rootProps,
         ref: composedRef,
@@ -330,8 +346,8 @@ var TagsInputRoot = React.forwardRef((props, ref) => {
           control: collectionRef.current,
           name,
           value,
-          required,
-          disabled
+          disabled,
+          required
         }
       )
     )
@@ -489,11 +505,15 @@ var TagsInputInput = React.forwardRef(
         spellCheck: "false",
         autoFocus,
         "aria-labelledby": context.labelId,
+        "aria-readonly": context.readOnly,
         "data-invalid": context.isInvalidInput ? "" : void 0,
+        dir: context.dir,
         disabled: context.disabled,
+        readOnly: context.readOnly,
         ...inputProps,
         ref: composeRefs(context.inputRef, ref),
         onBlur: composeEventHandlers(inputProps.onBlur, (event) => {
+          if (context.readOnly) return;
           if (context.blurBehavior === "add") {
             const value = event.target.value;
             if (value) {
@@ -506,6 +526,7 @@ var TagsInputInput = React.forwardRef(
           }
         }),
         onChange: composeEventHandlers(inputProps.onChange, (event) => {
+          if (context.readOnly) return;
           const target = event.target;
           if (!(target instanceof HTMLInputElement)) return;
           const delimiter = context.delimiter;
@@ -519,12 +540,14 @@ var TagsInputInput = React.forwardRef(
           }
         }),
         onKeyDown: composeEventHandlers(inputProps.onKeyDown, (event) => {
+          if (context.readOnly) return;
           if (event.key === "Enter") onCustomKeydown(event);
           if (event.key === "Tab") onTab(event);
           context.onInputKeydown(event);
           if (event.key.length === 1) context.setHighlightedIndex(null);
         }),
         onPaste: composeEventHandlers(inputProps.onPaste, (event) => {
+          if (context.readOnly) return;
           if (context.addOnPaste) {
             event.preventDefault();
             const value = event.clipboardData.getData("text");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diceui/tags-input",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -52,7 +52,7 @@
     "typescript": "^5.7.2"
   },
   "dependencies": {
-    "@diceui/shared": "0.5.0"
+    "@diceui/shared": "0.7.0"
   },
   "scripts": {
     "dev": "tsup --watch",