@natoora-libs/core 0.2.23 → 0.2.24

package/dist/components/index.cjs

@@ -8785,6 +8785,9 @@ var HashtagInput = ({
   helperText,
   onCreateTag,
   onDeleteTag,
+  autoFocus = false,
+  disableOnBlurCreation = false,
+  onBlur,
   ...props
 }) => {
   const { palette: palette2 } = (0, import_material75.useTheme)();
@@ -8792,14 +8795,17 @@ var HashtagInput = ({
   const sanitizeTag = (value) => {
     return value.toLowerCase().replace(/[^a-z0-9#]/g, "").trim();
   };
+  const handleAddTag = () => {
+    const cleanedTag = sanitizeTag(inputValue);
+    if (!cleanedTag) return;
+    onCreateTag?.(cleanedTag);
+    setInputValue("");
+  };
   const handleKeyDown = (event) => {
     if ((event.key === " " || event.key === "Enter") && inputValue) {
       event.preventDefault();
       event.stopPropagation();
-      const cleaned = sanitizeTag(inputValue);
-      if (!cleaned) return;
-      onCreateTag?.(cleaned);
-      setInputValue("");
+      handleAddTag();
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
@@ -8821,16 +8827,23 @@ var HashtagInput = ({
           onDeleteTag?.(details.option);
         }
       },
-      renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+      renderInput: (textFieldProps) => /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
         import_material75.TextField,
         {
-          ...params,
+          ...textFieldProps,
+          autoFocus,
           label,
           placeholder,
           helperText,
           variant,
           error,
-          onKeyDown: handleKeyDown
+          onKeyDown: handleKeyDown,
+          onBlur: (e) => {
+            if (!disableOnBlurCreation) {
+              handleAddTag();
+            }
+            onBlur?.(e);
+          }
         }
       ),
       renderValue: (value, getTagProps) => value.map((option, index) => {
@@ -8868,6 +8881,7 @@ var TableDesktopTagsField = ({
 }) => {
   const [error, setError] = (0, import_react46.useState)();
   const [values, setValues] = (0, import_react46.useState)([]);
+  const valuesRef = (0, import_react46.useRef)([]);
   const validateTag = (tag) => {
     if (tag.length >= 30) {
       return false;
@@ -8884,13 +8898,19 @@ var TableDesktopTagsField = ({
     setError(null);
     const newTags = isRemoving ? values.filter((t) => t !== tag) : [...values, tag];
     setValues(newTags);
+    valuesRef.current = newTags;
   };
-  (0, import_react46.useEffect)(() => {
-    setValues((initialValue ?? []).map((val) => val.tag));
+  const initialValueTags = (0, import_react46.useMemo)(() => {
+    return (initialValue ?? []).map((val) => val.tag);
   }, [initialValue]);
+  (0, import_react46.useEffect)(() => {
+    setValues(initialValueTags);
+    valuesRef.current = initialValueTags;
+  }, [initialValueTags]);
   return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_jsx_runtime133.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
     HashtagInput,
     {
+      autoFocus: true,
       label: inputLabel,
       variant,
       size,
@@ -8907,11 +8927,14 @@ var TableDesktopTagsField = ({
         handleManageTags(tag, "REMOVE");
       },
       onBlur: () => {
+        const currentTagsString = [...valuesRef.current].sort().join(", ");
+        const initialTagsString = [...initialValueTags].sort().join(", ");
+        if (currentTagsString === initialTagsString) return;
         onUpdateEditableCell?.({
           rowId,
           columnId,
-          value: values,
-          label: values.join(", ")
+          value: valuesRef.current,
+          label: valuesRef.current.join(", ")
         });
       }
     }