@fctc/sme-widget-ui 3.10.5 → 3.10.7

package/dist/widgets.mjs

@@ -17026,8 +17026,8 @@ var CopyLinkButtonField = (props) => {
     baseClassName
   } = props;
   const { t: t3 } = useI18n();
-  if (!isForm) {
-    return /* @__PURE__ */ jsx84("div", { className: "truncate max-w-[300px]", children: propValue && typeof propValue === "object" ? propValue.display_name : propValue });
+  if (!isForm && !isEditTable) {
+    return /* @__PURE__ */ jsx84("div", { className: "truncate max-w-[300px]", children: maskingValue || (propValue && typeof propValue === "object" ? propValue.display_name : propValue) });
   }
   return /* @__PURE__ */ jsx84(
     Controller,
@@ -31758,7 +31758,7 @@ var ImageField = (props) => {
 };
 
 // src/widgets/basic/many2many-tags-field/many2many-tags.tsx
-import React17, { useEffect as useEffect21, useMemo as useMemo11 } from "react";
+import React17, { useEffect as useEffect21, useMemo as useMemo11, useState as useState21 } from "react";
 
 // src/widgets/basic/information-field/information.tsx
 import { Fragment as Fragment28, jsx as jsx98, jsxs as jsxs64 } from "react/jsx-runtime";
@@ -31901,6 +31901,8 @@ var Many2ManyTagField = (props) => {
         required: required && !invisible ? { value: true, message: `${string} ${t3("must_required")}` } : false
       },
       render: ({ field, fieldState: { error: error2 } }) => {
+        const [menuOpen, setMenuOpen] = useState21(false);
+        const [hover, setHover] = useState21(false);
         const { clearErrors } = methods;
         useEffect21(() => {
           if (field.value) {
@@ -31935,118 +31937,138 @@ var Many2ManyTagField = (props) => {
             });
           });
         };
-        return /* @__PURE__ */ jsxs65("div", { className: "group h-full", children: [
-          /* @__PURE__ */ jsx99(
-            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__ */ jsx99(
-                  CustomMultiValue,
-                  {
-                    ...multiValueProps,
-                    stringToColor
-                  }
-                ),
-                IndicatorSeparator: () => null
-              } : {
-                MenuList: (menuListProps) => /* @__PURE__ */ jsx99(
-                  CustomMenuList,
-                  {
-                    ...menuListProps,
-                    selectProps: {
-                      ...menuListProps.selectProps,
-                      setIsShowModalMany2Many
-                    }
-                  }
-                ),
-                IndicatorSeparator: () => null,
-                DropdownIndicator: (props2) => readonly ? null : /* @__PURE__ */ jsx99(components.DropdownIndicator, { ...props2 }),
-                ClearIndicator: (props2) => readonly ? null : /* @__PURE__ */ jsx99(components.ClearIndicator, { ...props2 })
-              },
-              required: !invisible && required
-            }
-          ),
-          !isEditTable && error2 && /* @__PURE__ */ jsx99("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
-        ] });
+        return /* @__PURE__ */ jsxs65(
+          "div",
+          {
+            className: "group h-full",
+            onMouseEnter: () => setHover(true),
+            onMouseLeave: () => setHover(false),
+            children: [
+              /* @__PURE__ */ jsx99(
+                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__ */ jsx99(
+                      CustomMultiValue,
+                      {
+                        ...multiValueProps,
+                        stringToColor
+                      }
+                    ),
+                    IndicatorSeparator: () => null
+                  } : {
+                    MenuList: (menuListProps) => /* @__PURE__ */ jsx99(
+                      CustomMenuList,
+                      {
+                        ...menuListProps,
+                        selectProps: {
+                          ...menuListProps.selectProps,
+                          setIsShowModalMany2Many
+                        }
+                      }
+                    ),
+                    IndicatorSeparator: () => null,
+                    DropdownIndicator: (props2) => readonly || menuOpen ? null : /* @__PURE__ */ jsx99(components.DropdownIndicator, { ...props2 }),
+                    ClearIndicator: (props2) => readonly ? null : /* @__PURE__ */ jsx99(components.ClearIndicator, { ...props2 })
+                  },
+                  required: !invisible && required
+                }
+              ),
+              !isEditTable && error2 && /* @__PURE__ */ jsx99("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
+            ]
+          }
+        );
       }
     }
   );
@@ -32159,7 +32181,7 @@ var PaidBadgedField = () => {
 };
 
 // src/widgets/basic/priority-field/rating-star.tsx
-import React18, { useEffect as useEffect23, useState as useState21 } from "react";
+import React18, { useEffect as useEffect23, useState as useState22 } from "react";
 import { jsx as jsx102, jsxs as jsxs67 } from "react/jsx-runtime";
 var RatingStarField = (props) => {
   const {
@@ -32169,8 +32191,8 @@ var RatingStarField = (props) => {
     onSelectPriority,
     id
   } = props;
-  const [rating, setRating] = useState21(defaultValue);
-  const [hover, setHover] = useState21(0);
+  const [rating, setRating] = useState22(defaultValue);
+  const [hover, setHover] = useState22(0);
   useEffect23(() => {
     setRating(defaultValue);
   }, [defaultValue]);
@@ -32370,6 +32392,7 @@ var RemainingDaysField = (props) => {
 };
 
 // src/widgets/basic/select-dropdown-field/select-dropdown.tsx
+import { useState as useState23 } from "react";
 import { Fragment as Fragment30, jsx as jsx106, jsxs as jsxs70 } from "react/jsx-runtime";
 var SelectDropdownField = (props) => {
   const { t: t3 } = useI18n();
@@ -32404,6 +32427,8 @@ var SelectDropdownField = (props) => {
           required: required && !invisible ? { value: true, message: `${string} ${t3("must_required")}` } : false
         },
         render: ({ field, fieldState: { error: error2 } }) => {
+          const [menuOpen, setMenuOpen] = useState23(false);
+          const [hover, setHover] = useState23(false);
           const defaultValue = options2.find(
             (option) => option.value === value
           );
@@ -32414,13 +32439,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__ */ jsxs70(Fragment30, { children: [
             /* @__PURE__ */ jsx106("div", { className: `group ${isEditTable ? "h-full" : ""}`, children: /* @__PURE__ */ jsx106(
@@ -32475,12 +32510,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__ */ jsx106(components.DropdownIndicator, { ...props2 })
+                  DropdownIndicator: (props2) => readonly || !isEditTable || menuOpen ? null : /* @__PURE__ */ jsx106(components.DropdownIndicator, { ...props2 })
                 },
                 noOptionsMessage: () => t3("no-available")
               }
@@ -32606,7 +32646,7 @@ var ToggleButtonField = (props) => {
 };
 
 // src/widgets/basic/integer-field/integer.tsx
-import { useEffect as useEffect25, useRef as useRef18, useState as useState22 } from "react";
+import { useEffect as useEffect25, useRef as useRef18, useState as useState24 } from "react";
 import { Fragment as Fragment31, jsx as jsx109, jsxs as jsxs72 } from "react/jsx-runtime";
 var IntegerField = (props) => {
   const {
@@ -32646,7 +32686,7 @@ var IntegerField = (props) => {
         const isDirtyRef = useRef18(false);
         const inputRef = useRef18(null);
         const lastCommittedValueRef = useRef18(null);
-        const [inputValue, setInputValue] = useState22(
+        const [inputValue, setInputValue] = useState24(
           value2 !== void 0 && value2 !== null ? String(value2) : ""
         );
         useEffect25(() => {
@@ -33015,7 +33055,7 @@ var Many2ManyField = (props) => {
 };
 
 // src/widgets/basic/many2one-field/many2one.tsx
-import React19, { useEffect as useEffect27, useState as useState23 } from "react";
+import React19, { useEffect as useEffect27, useState as useState25 } from "react";
 import { Fragment as Fragment32, jsx as jsx112, jsxs as jsxs75 } from "react/jsx-runtime";
 var CustomMenuList2 = (props) => {
   const { t: t3 } = useI18n();
@@ -33112,8 +33152,8 @@ var Many2OneField = (props) => {
               } : false
             },
             render: ({ field, fieldState: { error: error2 } }) => {
-              const [menuOpen, setMenuOpen] = useState23(false);
-              const [hover, setHover] = useState23(false);
+              const [menuOpen, setMenuOpen] = useState25(false);
+              const [hover, setHover] = useState25(false);
               const currentValue = field?.value ? {
                 value: field?.value?.id,
                 label: field?.value?.display_name,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fctc/sme-widget-ui",
-  "version": "3.10.5",
+  "version": "3.10.7",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",