@fctc/sme-widget-ui 3.10.5 → 3.10.7

package/dist/widgets.js

@@ -17089,8 +17089,8 @@ var CopyLinkButtonField = (props) => {
     baseClassName
   } = props;
   const { t: t3 } = useI18n();
-  if (!isForm) {
-    return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "truncate max-w-[300px]", children: propValue && typeof propValue === "object" ? propValue.display_name : propValue });
+  if (!isForm && !isEditTable) {
+    return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "truncate max-w-[300px]", children: maskingValue || (propValue && typeof propValue === "object" ? propValue.display_name : propValue) });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
     Controller,
@@ -31964,6 +31964,8 @@ var Many2ManyTagField = (props) => {
         required: required && !invisible ? { value: true, message: `${string} ${t3("must_required")}` } : false
       },
       render: ({ field, fieldState: { error: error2 } }) => {
+        const [menuOpen, setMenuOpen] = (0, import_react62.useState)(false);
+        const [hover, setHover] = (0, import_react62.useState)(false);
         const { clearErrors } = methods;
         (0, import_react62.useEffect)(() => {
           if (field.value) {
@@ -31998,118 +32000,138 @@ var Many2ManyTagField = (props) => {
             });
           });
         };
-        return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "group h-full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
-            StateManagedSelect$1,
-            {
-              options: options2,
-              noOptionsMessage: () => t3(isFetching ? "loading" : "no-available"),
-              isMulti: true,
-              isDisabled: readonly,
-              isSearchable: true,
-              isClearable: true,
-              menuShouldScrollIntoView: false,
-              menuPortalTarget: typeof window !== "undefined" ? document.body : null,
-              value: filteredValue,
-              onChange: handleChange,
-              onMenuClose: () => {
-                const filteredDomain = [...domainObject ?? []]?.filter(
-                  (d) => !(Array.isArray(d) && d[0] === "name" && d[1] === "ilike")
-                ) || [];
-                setInputValue("");
-                setDomainObject(filteredDomain);
-              },
-              onMenuOpen: fetchMoreOptions,
-              menuPlacement: "auto",
-              placeholder,
-              classNames: isEditTable ? {
-                valueContainer: () => "overflow-unset !px-0",
-                control: ({ isFocused }) => `widget many2many-tags-widget ${baseClassName} ${isFocused ? "focused" : ""} ${filteredValue?.length === 0 && "no-values"}`,
-                dropdownIndicator: () => "invisible group-hover:visible !m-0 !p-0",
-                clearIndicator: () => "invisible group-hover:visible !m-0 !p-0"
-              } : {
-                valueContainer: () => "overflow-unset !m-0 !p-0 flex gap-1",
-                control: ({ isFocused }) => `widget many2many-tags-widget ${baseClassName} ${isFocused ? "focused" : ""} ${filteredValue?.length === 0 && "no-values"}`,
-                singleValue: () => `!m-0 ${readonly ? "!text-[#5c5a5a]" : ""}`,
-                input: () => "!m-0 !p-0",
-                dropdownIndicator: () => "!m-0 !p-0"
-              },
-              styles: {
-                container: (base) => ({
-                  ...base,
-                  height: "100%"
-                }),
-                control: () => ({
-                  maxWidth: isEditTable ? "max-content" : "100%",
-                  minWidth: isEditTable ? "max-content" : "100%",
-                  background: isEditTable ? "transparent" : "initial"
-                }),
-                multiValue: (provided, state) => {
-                  const { color, id } = state?.data ?? {};
-                  const bgColor = color !== null ? COLORS[color]?.color : COLORS[id]?.color;
-                  return {
-                    ...provided,
-                    display: "flex",
-                    backgroundColor: bgColor || "rgba(230.1375, 221.3625, 221.3625, 1)",
-                    borderRadius: "16px",
-                    color: "black",
-                    fontWeight: "600"
-                  };
-                },
-                multiValueRemove: (provided) => ({
-                  ...provided,
-                  backgroundColor: "transparent !important",
-                  color: "black !important"
-                }),
-                option: (provided, { isFocused, isSelected }) => ({
-                  ...provided,
-                  backgroundColor: isSelected || isFocused ? "rgba(66,66,66,0.08)" : "#FFF",
-                  color: isSelected ? "white" : "",
-                  cursor: "pointer",
-                  transition: "all 0.2s ease",
-                  borderRadius: "8px"
-                }),
-                menu: (base) => ({
-                  ...base,
-                  zIndex: 9999,
-                  width: "100%",
-                  minWidth: "max-content",
-                  borderRadius: "10px"
-                }),
-                menuList: (base) => ({
-                  ...base,
-                  padding: "4px"
-                })
-              },
-              components: isUser ? {
-                MultiValue: (multiValueProps) => /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
-                  CustomMultiValue,
-                  {
-                    ...multiValueProps,
-                    stringToColor
-                  }
-                ),
-                IndicatorSeparator: () => null
-              } : {
-                MenuList: (menuListProps) => /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
-                  CustomMenuList,
-                  {
-                    ...menuListProps,
-                    selectProps: {
-                      ...menuListProps.selectProps,
-                      setIsShowModalMany2Many
-                    }
-                  }
-                ),
-                IndicatorSeparator: () => null,
-                DropdownIndicator: (props2) => readonly ? null : /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(components.DropdownIndicator, { ...props2 }),
-                ClearIndicator: (props2) => readonly ? null : /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(components.ClearIndicator, { ...props2 })
-              },
-              required: !invisible && required
-            }
-          ),
-          !isEditTable && error2 && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
-        ] });
+        return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(
+          "div",
+          {
+            className: "group h-full",
+            onMouseEnter: () => setHover(true),
+            onMouseLeave: () => setHover(false),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                StateManagedSelect$1,
+                {
+                  options: options2,
+                  noOptionsMessage: () => t3(isFetching ? "loading" : "no-available"),
+                  isMulti: true,
+                  isDisabled: readonly,
+                  isSearchable: true,
+                  isClearable: menuOpen,
+                  menuShouldScrollIntoView: false,
+                  menuPortalTarget: typeof window !== "undefined" ? document.body : null,
+                  value: filteredValue,
+                  onChange: handleChange,
+                  onMenuClose: () => {
+                    const filteredDomain = [...domainObject ?? []]?.filter(
+                      (d) => !(Array.isArray(d) && d[0] === "name" && d[1] === "ilike")
+                    ) || [];
+                    setInputValue("");
+                    setDomainObject(filteredDomain);
+                    setMenuOpen(false);
+                  },
+                  onMenuOpen: () => {
+                    fetchMoreOptions();
+                    setMenuOpen(true);
+                  },
+                  onBlur: () => {
+                    setHover(false);
+                  },
+                  menuPlacement: "auto",
+                  placeholder,
+                  classNames: isEditTable ? {
+                    valueContainer: () => "overflow-unset !px-0",
+                    control: ({ isFocused }) => `widget many2many-tags-widget ${baseClassName} ${isFocused ? "focused" : ""} ${filteredValue?.length === 0 && "no-values"}`,
+                    dropdownIndicator: () => "invisible group-hover:visible !m-0 !p-0",
+                    clearIndicator: () => "invisible group-hover:visible !m-0 !p-0"
+                  } : {
+                    valueContainer: () => "overflow-unset !m-0 !p-0 flex gap-1",
+                    control: ({ isFocused }) => `widget many2many-tags-widget ${baseClassName} ${isFocused ? "focused" : ""} ${filteredValue?.length === 0 && "no-values"}`,
+                    singleValue: () => `!m-0 ${readonly ? "!text-[#5c5a5a]" : ""}`,
+                    input: () => "!m-0 !p-0",
+                    dropdownIndicator: () => "!m-0 !p-0"
+                  },
+                  styles: {
+                    container: (base) => ({
+                      ...base,
+                      height: "100%"
+                    }),
+                    control: () => ({
+                      maxWidth: isEditTable ? "max-content" : "100%",
+                      minWidth: isEditTable ? "max-content" : "100%",
+                      background: isEditTable ? "transparent" : "initial"
+                    }),
+                    multiValue: (provided, state) => {
+                      const { color, id } = state?.data ?? {};
+                      const bgColor = color !== null ? COLORS[color]?.color : COLORS[id]?.color;
+                      return {
+                        ...provided,
+                        display: "flex",
+                        backgroundColor: bgColor || "rgba(230.1375, 221.3625, 221.3625, 1)",
+                        borderRadius: "16px",
+                        color: "black",
+                        fontWeight: "600"
+                      };
+                    },
+                    multiValueRemove: (provided) => ({
+                      ...provided,
+                      backgroundColor: "transparent !important",
+                      color: "black !important"
+                    }),
+                    option: (provided, { isFocused, isSelected }) => ({
+                      ...provided,
+                      backgroundColor: isSelected || isFocused ? "rgba(66,66,66,0.08)" : "#FFF",
+                      color: isSelected ? "white" : "",
+                      cursor: "pointer",
+                      transition: "all 0.2s ease",
+                      borderRadius: "8px"
+                    }),
+                    menu: (base) => ({
+                      ...base,
+                      zIndex: 9999,
+                      width: "100%",
+                      minWidth: "max-content",
+                      borderRadius: "10px"
+                    }),
+                    menuList: (base) => ({
+                      ...base,
+                      padding: "4px"
+                    }),
+                    dropdownIndicator: (base) => ({
+                      ...base,
+                      padding: "0",
+                      display: hover ? "flex" : "none"
+                    })
+                  },
+                  components: isUser ? {
+                    MultiValue: (multiValueProps) => /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                      CustomMultiValue,
+                      {
+                        ...multiValueProps,
+                        stringToColor
+                      }
+                    ),
+                    IndicatorSeparator: () => null
+                  } : {
+                    MenuList: (menuListProps) => /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                      CustomMenuList,
+                      {
+                        ...menuListProps,
+                        selectProps: {
+                          ...menuListProps.selectProps,
+                          setIsShowModalMany2Many
+                        }
+                      }
+                    ),
+                    IndicatorSeparator: () => null,
+                    DropdownIndicator: (props2) => readonly || menuOpen ? null : /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(components.DropdownIndicator, { ...props2 }),
+                    ClearIndicator: (props2) => readonly ? null : /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(components.ClearIndicator, { ...props2 })
+                  },
+                  required: !invisible && required
+                }
+              ),
+              !isEditTable && error2 && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+            ]
+          }
+        );
       }
     }
   );
@@ -32433,6 +32455,7 @@ var RemainingDaysField = (props) => {
 };
 
 // src/widgets/basic/select-dropdown-field/select-dropdown.tsx
+var import_react66 = require("react");
 var import_jsx_runtime104 = require("react/jsx-runtime");
 var SelectDropdownField = (props) => {
   const { t: t3 } = useI18n();
@@ -32467,6 +32490,8 @@ var SelectDropdownField = (props) => {
           required: required && !invisible ? { value: true, message: `${string} ${t3("must_required")}` } : false
         },
         render: ({ field, fieldState: { error: error2 } }) => {
+          const [menuOpen, setMenuOpen] = (0, import_react66.useState)(false);
+          const [hover, setHover] = (0, import_react66.useState)(false);
           const defaultValue = options2.find(
             (option) => option.value === value
           );
@@ -32477,13 +32502,23 @@ var SelectDropdownField = (props) => {
             placeholder: readonly ? "" : placeholder || t3("choose_place"),
             isSearchable: !readonly,
             isDisabled: readonly,
+            isClearable: menuOpen,
             menuPlacement: "auto",
             onChange: (selectedOption) => {
               field.onChange(selectedOption.value);
               onChange2 && onChange2(name ?? "", selectedOption.value);
             },
             value: defaultValue || null,
-            required: !invisible && required
+            required: !invisible && required,
+            onMenuOpen: () => {
+              setMenuOpen(true);
+            },
+            onMenuClose: () => {
+              setMenuOpen(false);
+            },
+            onBlur: () => {
+              setHover(false);
+            }
           };
           return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(import_jsx_runtime104.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { className: `group ${isEditTable ? "h-full" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
@@ -32538,12 +32573,17 @@ var SelectDropdownField = (props) => {
                   menuList: (base) => ({
                     ...base,
                     padding: "4px"
+                  }),
+                  dropdownIndicator: (base) => ({
+                    ...base,
+                    padding: "0",
+                    display: hover ? "flex" : "none"
                   })
                 },
                 menuPortalTarget: typeof window !== "undefined" ? document.body : null,
                 components: {
                   IndicatorSeparator: () => null,
-                  DropdownIndicator: (props2) => readonly || !isEditTable ? null : /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(components.DropdownIndicator, { ...props2 })
+                  DropdownIndicator: (props2) => readonly || !isEditTable || menuOpen ? null : /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(components.DropdownIndicator, { ...props2 })
                 },
                 noOptionsMessage: () => t3("no-available")
               }
@@ -32669,7 +32709,7 @@ var ToggleButtonField = (props) => {
 };
 
 // src/widgets/basic/integer-field/integer.tsx
-var import_react66 = require("react");
+var import_react67 = require("react");
 var import_jsx_runtime107 = require("react/jsx-runtime");
 var IntegerField = (props) => {
   const {
@@ -32706,13 +32746,13 @@ var IntegerField = (props) => {
         fieldState: { error: error2 }
       }) => {
         const { setError, clearErrors } = methods;
-        const isDirtyRef = (0, import_react66.useRef)(false);
-        const inputRef = (0, import_react66.useRef)(null);
-        const lastCommittedValueRef = (0, import_react66.useRef)(null);
-        const [inputValue, setInputValue] = (0, import_react66.useState)(
+        const isDirtyRef = (0, import_react67.useRef)(false);
+        const inputRef = (0, import_react67.useRef)(null);
+        const lastCommittedValueRef = (0, import_react67.useRef)(null);
+        const [inputValue, setInputValue] = (0, import_react67.useState)(
           value2 !== void 0 && value2 !== null ? String(value2) : ""
         );
-        (0, import_react66.useEffect)(() => {
+        (0, import_react67.useEffect)(() => {
           if (value2 !== void 0 && value2 !== null) {
             setInputValue(String(value2));
             clearErrors(name);
@@ -32868,7 +32908,7 @@ var StatusDropdownField = (props) => {
 
 // src/widgets/basic/many2many-field/many2many.tsx
 var import_react_dom8 = require("react-dom");
-var import_react67 = require("react");
+var import_react68 = require("react");
 var import_jsx_runtime109 = require("react/jsx-runtime");
 var Many2ManyField = (props) => {
   const { t: t3 } = useI18n();
@@ -32923,7 +32963,7 @@ var Many2ManyField = (props) => {
     setGroupBy,
     clearSearch
   } = searchController;
-  (0, import_react67.useEffect)(() => {
+  (0, import_react68.useEffect)(() => {
     const groupItems = Array.isArray(selectedTags) ? selectedTags.filter((item) => item.type === "group_by") : [];
     if (groupItems?.length > 0) {
       typeof setPageLimit === "function" && setPageLimit(80);
@@ -33078,13 +33118,13 @@ var Many2ManyField = (props) => {
 };
 
 // src/widgets/basic/many2one-field/many2one.tsx
-var import_react68 = __toESM(require("react"));
+var import_react69 = __toESM(require("react"));
 var import_jsx_runtime110 = require("react/jsx-runtime");
 var CustomMenuList2 = (props) => {
   const { t: t3 } = useI18n();
   const { options: options2, children, selectProps } = props;
   const { setIsShowModalMany2Many, searchable } = selectProps;
-  const limitedChildren = import_react68.default.Children.toArray(children).slice(0, 10);
+  const limitedChildren = import_react69.default.Children.toArray(children).slice(0, 10);
   return /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(components.MenuList, { ...props, className: "z-[99]", children: [
     limitedChildren,
     options2?.length > 0 && (options2?.length > 10 || searchable) && /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
@@ -33175,8 +33215,8 @@ var Many2OneField = (props) => {
               } : false
             },
             render: ({ field, fieldState: { error: error2 } }) => {
-              const [menuOpen, setMenuOpen] = (0, import_react68.useState)(false);
-              const [hover, setHover] = (0, import_react68.useState)(false);
+              const [menuOpen, setMenuOpen] = (0, import_react69.useState)(false);
+              const [hover, setHover] = (0, import_react69.useState)(false);
               const currentValue = field?.value ? {
                 value: field?.value?.id,
                 label: field?.value?.display_name,
@@ -33185,7 +33225,7 @@ var Many2OneField = (props) => {
               const selectedOption = isForm && options2?.service && options2?.type && options2?.model ? tempSelectedOption : tempSelectedOption && options2?.length ? options2.find(
                 (o3) => o3?.value === tempSelectedOption.value
               ) ?? currentValue : currentValue ?? null;
-              (0, import_react68.useEffect)(() => {
+              (0, import_react69.useEffect)(() => {
                 if (error2 && selectedOption) {
                   methods?.clearErrors(name);
                 }
@@ -33410,11 +33450,11 @@ var StatusbarDurationField = (props) => {
 };
 
 // src/widgets/basic/status-bar-field/option/option.tsx
-var import_react69 = require("react");
+var import_react70 = require("react");
 var import_jsx_runtime112 = require("react/jsx-runtime");
 var StatusBarOptionField = (props) => {
   const { selection, defaultValue } = props;
-  const memoizedStatusOptions = (0, import_react69.useMemo)(() => selection, [selection]);
+  const memoizedStatusOptions = (0, import_react70.useMemo)(() => selection, [selection]);
   const indexInProgress = memoizedStatusOptions?.findIndex(
     (option) => option?.[0] === defaultValue
   );