@diceui/tags-input 0.5.0 → 0.6.0

package/dist/index.cjs

@@ -362,7 +362,7 @@ var TagsInputRoot = React__namespace.forwardRef((props, ref) => {
       },
       typeof children === "function" ? /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, children({ value })) : children,
       isFormControl && name && /* @__PURE__ */ React__namespace.createElement(
-        shared.BubbleInput,
+        shared.VisuallyHiddenInput,
         {
           type: "hidden",
           control: collectionRef.current,
@@ -427,16 +427,16 @@ var TagsInputItem = React__namespace.forwardRef(
       /* @__PURE__ */ React__namespace.createElement(
         shared.Primitive.div,
         {
-          ...{ [shared.DATA_ITEM_ATTR]: "" },
+          id,
           "aria-labelledby": textId,
           "aria-current": isHighlighted,
           "aria-disabled": itemDisabled,
+          ...{ [shared.DATA_ITEM_ATTR]: "" },
           "data-state": isHighlighted ? "active" : "inactive",
           "data-highlighted": isHighlighted ? "" : undefined,
           "data-editing": isEditing ? "" : undefined,
           "data-editable": context.editable ? "" : undefined,
           "data-disabled": itemDisabled ? "" : undefined,
-          id,
           ...itemProps,
           ref,
           onClick: shared.composeEventHandlers(itemProps.onClick, (event) => {
@@ -593,7 +593,7 @@ var TagsInputItemDelete = React__namespace.forwardRef((props, ref) => {
     shared.Primitive.button,
     {
       type: "button",
-      tabIndex: -1,
+      tabIndex: disabled ? undefined : -1,
       "aria-labelledby": itemContext.textId,
       "aria-controls": itemContext.id,
       "aria-current": itemContext.isHighlighted,
@@ -616,63 +616,86 @@ var TagsInputItemText = React__namespace.forwardRef((props, ref) => {
   const { children, ...itemTextProps } = props;
   const context = useTagsInput(ITEM_TEXT_NAME);
   const itemContext = useTagsInputItem(ITEM_TEXT_NAME);
-  const [editValue, setEditValue] = React__namespace.useState(itemContext.displayValue);
   if (itemContext.isEditing && context.editable && !itemContext.disabled) {
-    return /* @__PURE__ */ React__namespace.createElement(
-      shared.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.setEditingIndex(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.setEditingIndex(null);
-        },
-        style: {
-          outline: "none",
-          background: "inherit",
-          border: "none",
-          font: "inherit",
-          color: "inherit",
-          padding: 0,
-          minWidth: "1ch"
-        }
-      }
-    );
+    return /* @__PURE__ */ React__namespace.createElement(TagsInputEditableItemText, null);
   }
   return /* @__PURE__ */ React__namespace.createElement(shared.Primitive.span, { id: itemContext.textId, ...itemTextProps, ref }, children ?? itemContext.displayValue);
 });
 var ItemText = TagsInputItemText;
+function TagsInputEditableItemText() {
+  const context = useTagsInput(ITEM_TEXT_NAME);
+  const itemContext = useTagsInputItem(ITEM_TEXT_NAME);
+  const [editValue, setEditValue] = React__namespace.useState(itemContext.displayValue);
+  const onBlur = React__namespace.useCallback(() => {
+    setEditValue(itemContext.displayValue);
+    context.setEditingIndex(null);
+  }, [context.setEditingIndex, itemContext.displayValue]);
+  const onChange = React__namespace.useCallback(
+    (event) => {
+      const target = event.target;
+      target.style.width = "0";
+      target.style.width = `${target.scrollWidth + 4}px`;
+      setEditValue(event.target.value);
+    },
+    []
+  );
+  const onFocus = React__namespace.useCallback(
+    (event) => {
+      event.target.select();
+      event.target.style.width = "0";
+      event.target.style.width = `${event.target.scrollWidth + 4}px`;
+    },
+    []
+  );
+  const onKeyDown = React__namespace.useCallback(
+    (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.setEditingIndex(null);
+        context.inputRef.current?.focus();
+      }
+      event.stopPropagation();
+    },
+    [
+      context.value,
+      context.onItemUpdate,
+      context.setEditingIndex,
+      itemContext.displayValue,
+      context.inputRef.current?.focus,
+      editValue,
+      itemContext.value
+    ]
+  );
+  return /* @__PURE__ */ React__namespace.createElement(
+    shared.Primitive.input,
+    {
+      type: "text",
+      autoCapitalize: "off",
+      autoComplete: "off",
+      autoCorrect: "off",
+      spellCheck: "false",
+      autoFocus: true,
+      "aria-describedby": itemContext.textId,
+      value: editValue,
+      onChange,
+      onKeyDown,
+      onFocus,
+      onBlur,
+      style: {
+        outline: "none",
+        background: "inherit",
+        border: "none",
+        font: "inherit",
+        color: "inherit",
+        padding: 0,
+        minWidth: "1ch"
+      }
+    }
+  );
+}
 var CLEAR_NAME = "TagsInputClear";
 var TagsInputClear = React__namespace.forwardRef(
   (props, ref) => {

package/dist/index.js

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { createContext, useControllableState, useId, useDirection, useItemCollection, 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, VisuallyHiddenInput, composeRefs, Presence } from '@diceui/shared';
 
 var ROOT_NAME = "TagsInputRoot";
 var [TagsInputProvider, useTagsInput] = createContext(ROOT_NAME);
@@ -340,7 +340,7 @@ var TagsInputRoot = React.forwardRef((props, ref) => {
       },
       typeof children === "function" ? /* @__PURE__ */ React.createElement(React.Fragment, null, children({ value })) : children,
       isFormControl && name && /* @__PURE__ */ React.createElement(
-        BubbleInput,
+        VisuallyHiddenInput,
         {
           type: "hidden",
           control: collectionRef.current,
@@ -405,16 +405,16 @@ var TagsInputItem = React.forwardRef(
       /* @__PURE__ */ React.createElement(
         Primitive.div,
         {
-          ...{ [DATA_ITEM_ATTR]: "" },
+          id,
           "aria-labelledby": textId,
           "aria-current": isHighlighted,
           "aria-disabled": itemDisabled,
+          ...{ [DATA_ITEM_ATTR]: "" },
           "data-state": isHighlighted ? "active" : "inactive",
           "data-highlighted": isHighlighted ? "" : undefined,
           "data-editing": isEditing ? "" : undefined,
           "data-editable": context.editable ? "" : undefined,
           "data-disabled": itemDisabled ? "" : undefined,
-          id,
           ...itemProps,
           ref,
           onClick: composeEventHandlers(itemProps.onClick, (event) => {
@@ -571,7 +571,7 @@ var TagsInputItemDelete = React.forwardRef((props, ref) => {
     Primitive.button,
     {
       type: "button",
-      tabIndex: -1,
+      tabIndex: disabled ? undefined : -1,
       "aria-labelledby": itemContext.textId,
       "aria-controls": itemContext.id,
       "aria-current": itemContext.isHighlighted,
@@ -594,63 +594,86 @@ 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.setEditingIndex(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.setEditingIndex(null);
-        },
-        style: {
-          outline: "none",
-          background: "inherit",
-          border: "none",
-          font: "inherit",
-          color: "inherit",
-          padding: 0,
-          minWidth: "1ch"
-        }
-      }
-    );
+    return /* @__PURE__ */ React.createElement(TagsInputEditableItemText, null);
   }
   return /* @__PURE__ */ React.createElement(Primitive.span, { id: itemContext.textId, ...itemTextProps, ref }, children ?? itemContext.displayValue);
 });
 var ItemText = TagsInputItemText;
+function TagsInputEditableItemText() {
+  const context = useTagsInput(ITEM_TEXT_NAME);
+  const itemContext = useTagsInputItem(ITEM_TEXT_NAME);
+  const [editValue, setEditValue] = React.useState(itemContext.displayValue);
+  const onBlur = React.useCallback(() => {
+    setEditValue(itemContext.displayValue);
+    context.setEditingIndex(null);
+  }, [context.setEditingIndex, itemContext.displayValue]);
+  const onChange = React.useCallback(
+    (event) => {
+      const target = event.target;
+      target.style.width = "0";
+      target.style.width = `${target.scrollWidth + 4}px`;
+      setEditValue(event.target.value);
+    },
+    []
+  );
+  const onFocus = React.useCallback(
+    (event) => {
+      event.target.select();
+      event.target.style.width = "0";
+      event.target.style.width = `${event.target.scrollWidth + 4}px`;
+    },
+    []
+  );
+  const onKeyDown = React.useCallback(
+    (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.setEditingIndex(null);
+        context.inputRef.current?.focus();
+      }
+      event.stopPropagation();
+    },
+    [
+      context.value,
+      context.onItemUpdate,
+      context.setEditingIndex,
+      itemContext.displayValue,
+      context.inputRef.current?.focus,
+      editValue,
+      itemContext.value
+    ]
+  );
+  return /* @__PURE__ */ React.createElement(
+    Primitive.input,
+    {
+      type: "text",
+      autoCapitalize: "off",
+      autoComplete: "off",
+      autoCorrect: "off",
+      spellCheck: "false",
+      autoFocus: true,
+      "aria-describedby": itemContext.textId,
+      value: editValue,
+      onChange,
+      onKeyDown,
+      onFocus,
+      onBlur,
+      style: {
+        outline: "none",
+        background: "inherit",
+        border: "none",
+        font: "inherit",
+        color: "inherit",
+        padding: 0,
+        minWidth: "1ch"
+      }
+    }
+  );
+}
 var CLEAR_NAME = "TagsInputClear";
 var TagsInputClear = React.forwardRef(
   (props, ref) => {

package/package.json

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