@natoora-libs/core 0.2.23 → 0.2.24-dev-package-upgrades-2

package/dist/components/index.d.cts

@@ -1083,10 +1083,12 @@ interface HashtagInputProps extends Omit<AutocompleteType<any>, 'options' | 'ren
     variant?: TextFieldProps['variant'];
     error?: TextFieldProps['error'];
     helperText?: TextFieldProps['helperText'];
+    autoFocus?: TextFieldProps['autoFocus'];
+    disableOnBlurCreation?: boolean;
     onCreateTag?: (tagName?: string) => void;
     onDeleteTag?: (tag?: Tag | string) => void;
 }
-declare const HashtagInput: ({ label, placeholder, variant, error, helperText, onCreateTag, onDeleteTag, ...props }: HashtagInputProps) => react_jsx_runtime.JSX.Element;
+declare const HashtagInput: ({ label, placeholder, variant, error, helperText, onCreateTag, onDeleteTag, autoFocus, disableOnBlurCreation, onBlur, ...props }: HashtagInputProps) => react_jsx_runtime.JSX.Element;
 
 declare const SvgIconCompare: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
 

package/dist/components/index.d.ts

@@ -1083,10 +1083,12 @@ interface HashtagInputProps extends Omit<AutocompleteType<any>, 'options' | 'ren
     variant?: TextFieldProps['variant'];
     error?: TextFieldProps['error'];
     helperText?: TextFieldProps['helperText'];
+    autoFocus?: TextFieldProps['autoFocus'];
+    disableOnBlurCreation?: boolean;
     onCreateTag?: (tagName?: string) => void;
     onDeleteTag?: (tag?: Tag | string) => void;
 }
-declare const HashtagInput: ({ label, placeholder, variant, error, helperText, onCreateTag, onDeleteTag, ...props }: HashtagInputProps) => react_jsx_runtime.JSX.Element;
+declare const HashtagInput: ({ label, placeholder, variant, error, helperText, onCreateTag, onDeleteTag, autoFocus, disableOnBlurCreation, onBlur, ...props }: HashtagInputProps) => react_jsx_runtime.JSX.Element;
 
 declare const SvgIconCompare: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
 

package/dist/components/index.js

@@ -8572,7 +8572,7 @@ var TableDesktopSmartSelect = ({
 };
 
 // src/components/TableDesktopEditableField/TableDesktopTagsField.tsx
-import { useEffect as useEffect12, useState as useState21 } from "react";
+import { useEffect as useEffect12, useMemo as useMemo6, useState as useState21, useRef as useRef8 } from "react";
 
 // src/components/HashtagInput/HashtagInput.tsx
 import { useState as useState20 } from "react";
@@ -8593,6 +8593,9 @@ var HashtagInput = ({
   helperText,
   onCreateTag,
   onDeleteTag,
+  autoFocus = false,
+  disableOnBlurCreation = false,
+  onBlur,
   ...props
 }) => {
   const { palette } = useTheme();
@@ -8600,14 +8603,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__ */ jsx130(
@@ -8629,16 +8635,23 @@ var HashtagInput = ({
           onDeleteTag?.(details.option);
         }
       },
-      renderInput: (params) => /* @__PURE__ */ jsx130(
+      renderInput: (textFieldProps) => /* @__PURE__ */ jsx130(
         TextField8,
         {
-          ...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) => {
@@ -8676,6 +8689,7 @@ var TableDesktopTagsField = ({
 }) => {
   const [error, setError] = useState21();
   const [values, setValues] = useState21([]);
+  const valuesRef = useRef8([]);
   const validateTag = (tag) => {
     if (tag.length >= 30) {
       return false;
@@ -8692,13 +8706,19 @@ var TableDesktopTagsField = ({
     setError(null);
     const newTags = isRemoving ? values.filter((t) => t !== tag) : [...values, tag];
     setValues(newTags);
+    valuesRef.current = newTags;
   };
-  useEffect12(() => {
-    setValues((initialValue ?? []).map((val) => val.tag));
+  const initialValueTags = useMemo6(() => {
+    return (initialValue ?? []).map((val) => val.tag);
   }, [initialValue]);
+  useEffect12(() => {
+    setValues(initialValueTags);
+    valuesRef.current = initialValueTags;
+  }, [initialValueTags]);
   return /* @__PURE__ */ jsx131(Fragment15, { children: /* @__PURE__ */ jsx131(
     HashtagInput,
     {
+      autoFocus: true,
       label: inputLabel,
       variant,
       size,
@@ -8715,11 +8735,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(", ")
         });
       }
     }
@@ -8727,7 +8750,7 @@ var TableDesktopTagsField = ({
 };
 
 // src/components/TableDesktopEditableField/TableDesktopTextField.tsx
-import { useMemo as useMemo6, useState as useState22, useRef as useRef8 } from "react";
+import { useMemo as useMemo7, useState as useState22, useRef as useRef9 } from "react";
 import { TextField as TextField9 } from "@mui/material";
 import { jsx as jsx132 } from "react/jsx-runtime";
 var TableDesktopTextField = ({
@@ -8743,12 +8766,12 @@ var TableDesktopTextField = ({
   onUpdateEditableCell
 }) => {
   const [input, setInput] = useState22(initialValue);
-  const oldValue = useRef8(initialValue);
-  const isDirty = useMemo6(
+  const oldValue = useRef9(initialValue);
+  const isDirty = useMemo7(
     () => input !== oldValue.current,
     [input, oldValue.current]
   );
-  const hasValidationError = useMemo6(
+  const hasValidationError = useMemo7(
     () => isDirty && validateInput && !validateInput(input),
     [input, validateInput]
   );
@@ -9183,8 +9206,8 @@ var TableDesktopCell = ({
 // src/components/TableDesktopToolbar/TableDesktopToolbar.tsx
 import {
   useState as useState25,
-  useMemo as useMemo7,
-  useRef as useRef9
+  useMemo as useMemo8,
+  useRef as useRef10
 } from "react";
 import Download from "@mui/icons-material/Download";
 import KeyboardArrowLeft2 from "@mui/icons-material/KeyboardArrowLeft";
@@ -9222,12 +9245,12 @@ var TableDesktopToolbar = ({
   renderTableColumnConfigurationMenu,
   renderInfoIcons
 }) => {
-  const scrollRef = useRef9(null);
+  const scrollRef = useRef10(null);
   const [bulkChanges, setBulkChanges] = useState25([]);
   const [isBulkChangesDialogOpen, setIsBulkChangesDialogOpen] = useState25(false);
   const [isExportCsvDialogOpen, setIsExportCsvDialogOpen] = useState25(false);
   const [resetCounter, setResetCounter] = useState25(0);
-  const visibleEditableColumns = useMemo7(
+  const visibleEditableColumns = useMemo8(
     () => headCells.filter(
       (headCell) => headCell?.enabled && !!headCell?.editableCellType
     ),