@fctc/sme-widget-ui 2.9.5 → 2.9.7

package/dist/widgets.mjs

@@ -7725,7 +7725,8 @@ var vi_default = {
   "message-text-error": " kh\xF4ng \u0111\u01B0\u1EE3c v\u01B0\u1EE3t qu\xE1 {{max}} k\xFD t\u1EF1",
   upcase: ", {{count}} ch\u1EEF in hoa",
   digit: ", {{count}} s\u1ED1",
-  special: ", {{count}} k\xFD t\u1EF1 \u0111\u1EB7c bi\u1EC7t"
+  special: ", {{count}} k\xFD t\u1EF1 \u0111\u1EB7c bi\u1EC7t",
+  upload_files_accept: "Ch\u1EC9 ch\u1EA5p nh\u1EADn c\xE1c \u0111\u1ECBnh d\u1EA1ng JPEG, PNG, PDF, MP4, XLS, XLXS, ZIP"
 };
 
 // src/locales/en.json
@@ -7784,7 +7785,8 @@ var en_default = {
   "message-text-error": " must not exceed {{max}} characters",
   upcase: ", {{count}} uppercase letter",
   digit: ", {{count}} digit",
-  special: ", {{count}} special character"
+  special: ", {{count}} special character",
+  upload_files_accept: "Only JPEG, PNG, PDF, MP4, XLS, XLXS, ZIP, JSON formats are allowed"
 };
 
 // src/utils/i18n.ts
@@ -9464,27 +9466,6 @@ var PaidIcon = () => /* @__PURE__ */ jsxs18(
 
 // src/icons/placeholder-icon.tsx
 import { jsx as jsx37 } from "react/jsx-runtime";
-var PlaceHolderIcon = () => {
-  return /* @__PURE__ */ jsx37(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      version: "1.0",
-      width: "256.000000pt",
-      height: "256.000000pt",
-      viewBox: "0 0 256.000000 256.000000",
-      preserveAspectRatio: "xMidYMid meet",
-      children: /* @__PURE__ */ jsx37(
-        "g",
-        {
-          transform: "translate(0.000000,256.000000) scale(0.100000,-0.100000)",
-          fill: "#000000",
-          stroke: "none"
-        }
-      )
-    }
-  );
-};
 
 // src/icons/google-icon.tsx
 import { jsx as jsx38, jsxs as jsxs19 } from "react/jsx-runtime";
@@ -12053,7 +12034,7 @@ var TableHead = (props) => {
             return /* @__PURE__ */ jsx51(
               "th",
               {
-                style: { maxWidth: "30px" },
+                style: { width: "100px" },
                 className: `column handle whitespace-nowrap text-left p-0 text-sm font-semibold capitalize text-[#060606]`
               },
               "table-head-" + index4
@@ -15850,7 +15831,7 @@ var ButtonSelectFiles = ({
   isText
 }) => {
   const { t: t3 } = useI18n();
-  const ALLOWED_TYPES = [
+  const ALLOWED_TYPES2 = [
     "image/jpeg",
     "image/png",
     "application/pdf",
@@ -15867,7 +15848,7 @@ var ButtonSelectFiles = ({
   const { mutate, isPending } = isBinary ? useUploadFile() : useUploadImage();
   const dataUser = user?.userProfile?.data;
   const validateFile = (file) => {
-    if (!ALLOWED_TYPES.includes(file.type)) {
+    if (!ALLOWED_TYPES2.includes(file.type)) {
       setUploadError(t3("file_accept_single"));
       return false;
     }
@@ -16080,125 +16061,117 @@ var AvatarField = (props) => {
 };
 
 // src/widgets/basic/binary-field/binary.tsx
-import { useEffect as useEffect10, useState as useState10 } from "react";
+import { useState as useState10, useRef as useRef6 } from "react";
 import { Fragment as Fragment16, jsx as jsx75, jsxs as jsxs49 } from "react/jsx-runtime";
+var ALLOWED_TYPES = [
+  "image/jpeg",
+  "image/png",
+  "application/pdf",
+  "video/mp4",
+  "application/zip",
+  "application/x-zip-compressed",
+  "application/vnd.ms-excel",
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  "application/json"
+];
 var BinaryField = (props) => {
   const {
+    value,
     name,
-    methods,
-    readonly = false,
-    placeholder,
-    required = false,
-    invisible = false,
-    filename,
-    formValues,
     isEditTable,
     widget,
-    string,
-    value,
-    // from hook
+    readonly,
     placeHolderImage,
-    inputId,
-    initialFile,
-    binaryRef,
-    handleFileChange,
-    handleRemoveFile,
-    checkIsImageLink: checkIsImageLink2,
+    placeholder,
+    required,
+    invisible,
+    methods,
+    string,
+    isForm,
     onDownload,
-    setInitialFile
+    onUploadFile,
+    onDeleteFile,
+    url,
+    fileInfor
   } = props;
   const { t: t3 } = useI18n();
-  const [fileInfo, setFileInfo] = useState10(null);
+  const [loading, setLoading] = useState10(false);
+  const hasFetchedMeta = useRef6(false);
   const onlyImage = widget === "image" || widget === "image_url";
-  useEffect10(() => {
-    setInitialFile(value);
-  }, [value]);
-  useEffect10(() => {
-    const loadFromLink = async () => {
-      if (!initialFile || !initialFile.startsWith("http")) return;
-      if (typeof initialFile !== "string") {
-        setFileInfo(initialFile);
-        return;
-      }
-      try {
-        let type = "application/octet-stream";
-        let size4 = 0;
-        let name2 = formValues?.[filename ?? ""] || initialFile.split("/").pop() || "unknown_file";
-        if (checkIsImageLink2(initialFile) || onlyImage) {
-          type = "image/*";
-        } else {
-          const response = await fetch(initialFile);
-          console.log("responsessss", response);
-          const responseBlob = await response.blob();
-          if (responseBlob) {
-            type = responseBlob?.type;
-            size4 = responseBlob.size;
-          }
-        }
-        setFileInfo({
-          name: name2,
-          type,
-          url: initialFile,
-          size: size4,
-          source: "link"
-        });
-      } catch (error2) {
-        console.warn("Cannot load link info:", error2);
-      }
-    };
-    loadFromLink();
-  }, [initialFile]);
-  const handleChange = (e3, onChange2) => {
-    const file = e3.target.files?.[0];
+  const acceptType = !onlyImage ? `.pdf,.json,.mp4,.zip,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel,.jpeg,.jpg,.png` : ".jpeg,.jpg,.png";
+  const validateFile = (file) => {
+    if (!ALLOWED_TYPES.includes(file.type)) {
+      return t3("upload_files_accept");
+    }
+    return true;
+  };
+  const handleUpload = async (e3) => {
+    const file = e3.target.files[0];
     if (!file) return;
     if (onlyImage && !file.type.startsWith("image/")) {
-      methods?.setError(t3("only_image_accept"));
+      methods?.setError(name, {
+        type: "manual",
+        message: t3("only_image_accept")
+      });
       e3.target.value = "";
       return;
     }
-    const isImage = file.type.startsWith("image/");
-    const preview = isImage ? URL.createObjectURL(file) : null;
-    const normalized = {
-      name: file.name,
-      type: file.type,
-      size: file.size,
-      url: preview,
-      // chỉ có giá trị nếu là ảnh
-      source: "upload",
-      raw: file
-    };
-    setFileInfo(normalized);
-    handleFileChange(e3, onChange2);
+    const valid = validateFile(file);
+    if (valid !== true) {
+      methods?.setError(name, { type: "manual", message: valid });
+      return;
+    }
+    methods?.clearErrors(name);
+    const formData = new FormData();
+    formData.append("file", file);
+    setLoading(true);
+    try {
+      onUploadFile?.(formData);
+    } catch (error2) {
+      console.error(error2);
+    }
+    setLoading(false);
   };
-  const renderPreview = (file) => {
-    if (!file) return /* @__PURE__ */ jsx75(PlaceHolderIcon, {});
-    const { name: name2, type, url, size: size4 } = file;
-    if (type?.startsWith("image/") || checkIsImageLink2(url))
-      return /* @__PURE__ */ jsx75(
-        "img",
-        {
-          src: url,
-          alt: name2,
-          className: `w-full h-full  rounded-lg object-contain ${isEditTable ? "max-h-10 max-w-10" : "max-w-32 max-h-32"}`,
-          style: {
-            maxWidth: isEditTable ? "40px" : "128px",
-            maxHeight: isEditTable ? "40px" : "128px"
+  const handleDelete = () => {
+    onDeleteFile && onDeleteFile();
+    hasFetchedMeta.current = false;
+  };
+  const renderPreview = () => {
+    if (!url) return null;
+    const type = fileInfor?.type;
+    const date = fileInfor?.date;
+    const size4 = fileInfor?.size;
+    if (type?.includes("image")) {
+      return /* @__PURE__ */ jsxs49("div", { className: "flex gap-2 items-center", children: [
+        /* @__PURE__ */ jsx75(
+          "img",
+          {
+            src: url,
+            alt: name,
+            className: `image-value w-full h-full object-contain ${onlyImage ? "rounded-lg" : "rounded-[4px]"} ${isEditTable ? "max-h-10 max-w-10 h-10 w-10" : "max-w-32 max-h-32"}`,
+            style: {
+              maxWidth: isEditTable ? "40px" : "128px",
+              maxHeight: isEditTable ? "40px" : "128px",
+              height: isEditTable ? "40px" : "128px",
+              width: isEditTable ? "40px" : "128px"
+            }
           }
-        }
-      );
-    if (type?.startsWith("video/"))
-      return /* @__PURE__ */ jsx75(
-        "video",
-        {
-          src: url,
-          className: `rounded-lg object-cover ${isEditTable ? "max-h-10 max-w-10" : "max-w-32 max-h-32"}`,
-          style: {
-            maxWidth: isEditTable ? "40px" : "128px",
-            maxHeight: isEditTable ? "40px" : "128px"
-          },
-          controls: true
-        }
-      );
+        ),
+        !onlyImage && /* @__PURE__ */ jsxs49("div", { children: [
+          /* @__PURE__ */ jsx75(
+            "p",
+            {
+              style: {
+                maxWidth: "120px"
+              },
+              className: "text-sm font-medium text-gray-600 truncate max-w-[120px]",
+              children: url?.split("/").pop()
+            }
+          ),
+          /* @__PURE__ */ jsx75("span", { className: "text-xs text-[#666] font-semibold", children: size4 })
+        ] })
+      ] });
+    }
     const getFileIcon = () => {
       if (type === "application/pdf") return /* @__PURE__ */ jsx75(PdfIcon, {});
       if (type?.includes("excel") || type?.includes("spreadsheet"))
@@ -16207,7 +16180,6 @@ var BinaryField = (props) => {
       if (type === "application/json") return /* @__PURE__ */ jsx75(JSONFileIcon, {});
       return /* @__PURE__ */ jsx75(DefaultFileIcon, {});
     };
-    const isShowSize = !isNaN(size4);
     return /* @__PURE__ */ jsxs49("div", { className: "flex items-center gap-2", children: [
       getFileIcon(),
       /* @__PURE__ */ jsxs49("div", { children: [
@@ -16218,10 +16190,10 @@ var BinaryField = (props) => {
               maxWidth: "120px"
             },
             className: "text-sm font-medium text-gray-600 truncate max-w-[120px]",
-            children: name2
+            children: url?.split("/").pop()
           }
         ),
-        isShowSize && /* @__PURE__ */ jsx75("span", { className: "text-xs text-[#666] font-semibold", children: formatFileSize(size4) })
+        /* @__PURE__ */ jsx75("span", { className: "text-xs text-[#666] font-semibold", children: size4 })
       ] })
     ] });
   };
@@ -16231,136 +16203,124 @@ var BinaryField = (props) => {
       name: name ?? "",
       control: methods?.control,
       rules: {
-        required: required && !invisible ? { value: true, message: `${string} ${t3("must_required")}` } : false
+        required: required && !invisible ? { value: true, message: `${string} ${t3("must_required")}` } : false,
+        validate: {
+          fileValidate: (value2) => {
+            if (!value2) return true;
+            return validateFile(value2);
+          }
+        }
       },
-      render: ({ field, fieldState: { error: error2 } }) => {
-        const hasFile = !!fileInfo;
+      render: ({ fieldState: { error: error2 } }) => {
+        console.log("error", error2);
         return /* @__PURE__ */ jsxs49(Fragment16, { children: [
           /* @__PURE__ */ jsx75(
             "div",
             {
-              ref: binaryRef,
-              className: `widget binary-field flex w-fit items-center gap-4 ${onlyImage && initialFile ? "shadow-md rounded-lg" : ""}`,
-              children: hasFile ? /* @__PURE__ */ jsx75(
+              className: `widget binary-field flex w-fit items-center gap-4 ${onlyImage ? "shadow-md rounded-[12px]" : ""} ${isEditTable ? "p-2" : ""}`,
+              children: /* @__PURE__ */ jsx75("div", { className: "relative group", children: /* @__PURE__ */ jsxs49(
                 "div",
                 {
-                  className: `relative group  ${onlyImage ? "shadow-md rounded-lg" : ""}`,
-                  children: /* @__PURE__ */ jsxs49(
-                    "div",
-                    {
-                      className: `flex gap-2  items-center bg-[#FAFAFA] rounded-[8px] p-[6px] ${onlyImage ? "h-32 w-32" : "max-h-fit max-w-fit"}`,
-                      children: [
-                        renderPreview(fileInfo),
-                        /* @__PURE__ */ jsxs49(
-                          "div",
-                          {
-                            style: {
-                              display: "flex",
-                              alignItems: "center",
-                              borderRadius: "8px",
-                              padding: "4px",
-                              gap: "8px",
-                              backgroundColor: onlyImage ? "rgba(0,0,0,0.03)" : "white",
-                              boxShadow: "0 2px 4px 0 rgba(27, 28, 29, 0.04)",
-                              position: onlyImage ? "absolute" : "relative",
-                              bottom: onlyImage ? "0" : "none",
-                              right: onlyImage ? "0" : "none"
-                            },
-                            children: [
-                              /* @__PURE__ */ jsx75(
-                                "span",
-                                {
-                                  className: "cursor-pointer",
-                                  onClick: () => onDownload && onDownload(
-                                    fileInfo?.url || fileInfo?.data,
-                                    fileInfo?.name || fileInfo?.display_name
-                                  ),
-                                  children: /* @__PURE__ */ jsx75(DownloadIcon, {})
-                                }
-                              ),
-                              !readonly && /* @__PURE__ */ jsx75(
-                                "span",
-                                {
-                                  className: "cursor-pointer",
-                                  onClick: () => {
-                                    setFileInfo(null);
-                                    handleRemoveFile(field.onChange);
-                                  },
-                                  children: /* @__PURE__ */ jsx75(DeleteIconDanger, {})
-                                }
-                              )
-                            ]
-                          }
-                        )
-                      ]
-                    }
-                  )
-                }
-              ) : /* @__PURE__ */ jsxs49(
-                "label",
-                {
-                  htmlFor: inputId,
-                  className: `relative p-2 flex cursor-pointer items-center justify-center rounded-[12px]  transition-colors duration-300 ${readonly && "pointer-events-none"} ${onlyImage ? "h-32 w-32 border border-gray-300 hover:border-primary bg-white" : "w-fit h-fit "}`,
+                  className: `flex items-center gap-2 bg-[#FAFAFA] relative  ${onlyImage ? `h-32 w-32 rounded-[12px] ${value ? "" : "p-2"}` : `max-h-fit max-w-fit rounded-[8px] border ${!value ? "hover:border-[var(--color-primary)]" : ""} ${isEditTable && value ? "p-2" : ""}`} ${error2 && isForm && isEditTable && "widget-error"} `,
                   children: [
-                    /* @__PURE__ */ jsx75(
-                      "input",
-                      {
-                        id: inputId,
-                        type: "file",
-                        readOnly: readonly,
-                        placeholder,
-                        required: !invisible && required,
-                        onChange: (e3) => handleChange(e3, field.onChange),
-                        className: "hidden",
-                        accept: ".jpeg,.jpg,.png,.pdf,.json,.mp4,.zip,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
-                      }
-                    ),
-                    onlyImage && /* @__PURE__ */ jsx75(
-                      "img",
-                      {
-                        src: placeHolderImage,
-                        alt: "",
-                        className: "z-0 relative"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx75(
+                    renderPreview(),
+                    value ? /* @__PURE__ */ jsxs49(
                       "div",
                       {
-                        className: " size-8 bg-white rounded-lg flex justify-center items-center z-20",
+                        className: "widget",
                         style: {
+                          display: "flex",
+                          alignItems: "center",
+                          borderRadius: "8px",
+                          padding: "4px",
+                          gap: "8px",
+                          backgroundColor: onlyImage ? "rgba(0,0,0,0.03)" : "white",
+                          boxShadow: "0 2px 4px 0 rgba(27, 28, 29, 0.04)",
                           position: onlyImage ? "absolute" : "relative",
-                          bottom: onlyImage ? "-8px" : "auto",
-                          left: onlyImage ? "-8px" : "auto",
-                          boxShadow: "0 1px 2px 0 rgba(228, 229, 231, 0.24)",
-                          width: "2rem",
-                          height: "2rem",
-                          border: onlyImage ? "1px solid transparent" : "1px solid var(--color-primary)",
-                          borderRadius: onlyImage ? "100%" : "8px"
+                          bottom: onlyImage ? "0" : "none",
+                          right: onlyImage ? "0" : "none"
                         },
-                        children: /* @__PURE__ */ jsx75(
-                          "svg",
-                          {
-                            xmlns: "http://www.w3.org/2000/svg",
-                            width: "14",
-                            height: "14",
-                            viewBox: "0 0 14 14",
-                            fill: "none",
-                            children: /* @__PURE__ */ jsx75(
-                              "path",
-                              {
-                                "fill-rule": "evenodd",
-                                "clip-rule": "evenodd",
-                                d: "M13.1868 0.813097C12.7961 0.422532 12.2663 0.203125 11.7139 0.203125C11.1615 0.203125 10.6317 0.422532 10.241 0.813097L9.35765 1.69726L12.3035 4.64393L12.0085 4.9381L11.7143 5.2331L8.76765 2.28643L1.40182 9.65226C1.34395 9.7104 1.30452 9.78432 1.28848 9.86476L0.698483 12.8114C0.685057 12.8787 0.688459 12.9483 0.708387 13.014C0.728316 13.0796 0.764154 13.1394 0.812719 13.1878C0.861283 13.2363 0.92107 13.2721 0.986769 13.2919C1.05247 13.3117 1.12204 13.315 1.18932 13.3014L4.13515 12.7123C4.21599 12.6961 4.29023 12.6564 4.34848 12.5981L13.1868 3.75976C13.3803 3.5663 13.5338 3.33661 13.6386 3.08381C13.7433 2.83102 13.7972 2.56006 13.7972 2.28643C13.7972 2.0128 13.7433 1.74184 13.6386 1.48905C13.5338 1.23625 13.3803 1.00656 13.1868 0.813097Z",
-                                fill: "black"
-                              }
-                            )
-                          }
-                        )
+                        children: [
+                          /* @__PURE__ */ jsx75(
+                            "span",
+                            {
+                              onClick: () => onDownload && onDownload(url || "", url?.split("/").pop()),
+                              className: "cursor-pointer",
+                              children: /* @__PURE__ */ jsx75(DownloadIcon, {})
+                            }
+                          ),
+                          !readonly && /* @__PURE__ */ jsx75("span", { onClick: handleDelete, className: "cursor-pointer", children: /* @__PURE__ */ jsx75(DeleteIconDanger, {}) })
+                        ]
+                      }
+                    ) : /* @__PURE__ */ jsxs49(
+                      "label",
+                      {
+                        style: {
+                          maxWidth: "180px",
+                          maxHeight: "180px"
+                        },
+                        className: `relative  flex cursor-pointer items-center justify-center rounded-[12px]  transition-colors duration-300 ${readonly && "pointer-events-none"} ${onlyImage ? "border border-gray-300 hover:border-primary bg-white" : "w-fit h-fit "}`,
+                        children: [
+                          /* @__PURE__ */ jsx75(
+                            "input",
+                            {
+                              type: "file",
+                              readOnly: readonly,
+                              placeholder,
+                              required: !invisible && required,
+                              onChange: handleUpload,
+                              className: "hidden",
+                              accept: acceptType
+                            }
+                          ),
+                          onlyImage && /* @__PURE__ */ jsx75(
+                            "img",
+                            {
+                              src: placeHolderImage,
+                              alt: "",
+                              className: "z-0 relative"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx75(
+                            "div",
+                            {
+                              className: " size-8 bg-white rounded-lg flex justify-center items-center z-20",
+                              style: {
+                                position: onlyImage ? "absolute" : "relative",
+                                bottom: onlyImage ? "-8px" : "auto",
+                                left: onlyImage ? "-8px" : "auto",
+                                boxShadow: "0 1px 2px 0 rgba(228, 229, 231, 0.24)",
+                                width: "2rem",
+                                height: "2rem",
+                                borderRadius: onlyImage ? "100%" : "8px"
+                              },
+                              children: /* @__PURE__ */ jsx75(
+                                "svg",
+                                {
+                                  xmlns: "http://www.w3.org/2000/svg",
+                                  width: "14",
+                                  height: "14",
+                                  viewBox: "0 0 14 14",
+                                  fill: "none",
+                                  children: /* @__PURE__ */ jsx75(
+                                    "path",
+                                    {
+                                      "fill-rule": "evenodd",
+                                      "clip-rule": "evenodd",
+                                      d: "M13.1868 0.813097C12.7961 0.422532 12.2663 0.203125 11.7139 0.203125C11.1615 0.203125 10.6317 0.422532 10.241 0.813097L9.35765 1.69726L12.3035 4.64393L12.0085 4.9381L11.7143 5.2331L8.76765 2.28643L1.40182 9.65226C1.34395 9.7104 1.30452 9.78432 1.28848 9.86476L0.698483 12.8114C0.685057 12.8787 0.688459 12.9483 0.708387 13.014C0.728316 13.0796 0.764154 13.1394 0.812719 13.1878C0.861283 13.2363 0.92107 13.2721 0.986769 13.2919C1.05247 13.3117 1.12204 13.315 1.18932 13.3014L4.13515 12.7123C4.21599 12.6961 4.29023 12.6564 4.34848 12.5981L13.1868 3.75976C13.3803 3.5663 13.5338 3.33661 13.6386 3.08381C13.7433 2.83102 13.7972 2.56006 13.7972 2.28643C13.7972 2.0128 13.7433 1.74184 13.6386 1.48905C13.5338 1.23625 13.3803 1.00656 13.1868 0.813097Z",
+                                      fill: "black"
+                                    }
+                                  )
+                                }
+                              )
+                            }
+                          )
+                        ]
                       }
                     )
                   ]
                 }
-              )
+              ) })
             }
           ),
           error2 && !isEditTable && /* @__PURE__ */ jsx75("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
@@ -16516,7 +16476,7 @@ var ButtonField = (props) => {
 };
 
 // src/widgets/basic/char-field/char.tsx
-import { useEffect as useEffect11, useMemo as useMemo4 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo4 } from "react";
 import { Fragment as Fragment18, jsx as jsx78, jsxs as jsxs51 } from "react/jsx-runtime";
 var WIDGET_AUTO_COMPUTE_DEPEND = "auto_compute_depend_field";
 var CharField = (props) => {
@@ -16577,12 +16537,12 @@ var CharField = (props) => {
         fieldState: { error: error2, isDirty }
       }) => {
         const { setError, clearErrors } = methods;
-        useEffect11(() => {
+        useEffect10(() => {
           if (value2) {
             clearErrors(name);
           }
         }, [value2, clearErrors, name]);
-        useEffect11(() => {
+        useEffect10(() => {
           if (widget !== WIDGET_AUTO_COMPUTE_DEPEND) return;
           const depValue = formValues?.[options2?.depend_field]?.[options2?.field_name];
           const currentValue = methods?.getValues(name);
@@ -16671,7 +16631,7 @@ var CharField = (props) => {
 };
 
 // src/widgets/basic/char-field/secure-field.tsx
-import { useEffect as useEffect12, useMemo as useMemo5, useState as useState11 } from "react";
+import { useEffect as useEffect11, useMemo as useMemo5, useState as useState11 } from "react";
 
 // src/icons/eye-hidden-icon.tsx
 import { jsx as jsx79 } from "react/jsx-runtime";
@@ -16772,10 +16732,10 @@ var SecureField = (props) => {
         const shouldMask = isSensitive(widget) && !showPlain;
         const isCappedToken = widget === "access_token" || widget === "refresh_token";
         const maskedDisplay = isCappedToken && shouldMask ? "\u2022".repeat(Math.min(realValue.length, 20)) : "";
-        useEffect12(() => {
+        useEffect11(() => {
           if (canToggle) setShowPlain(false);
         }, [canToggle]);
-        useEffect12(() => {
+        useEffect11(() => {
           if (value2) clearErrors(name);
         }, [value2, clearErrors, name]);
         return /* @__PURE__ */ jsxs52("div", { className: `secure-widget relative w-full ${className ?? ""}`, children: [
@@ -16936,21 +16896,21 @@ var CheckboxField = (props) => {
 };
 
 // src/widgets/basic/color-field/color-wrapper.tsx
-import { useEffect as useEffect13, useRef as useRef6, useState as useState12 } from "react";
+import { useEffect as useEffect12, useRef as useRef7, useState as useState12 } from "react";
 import { Fragment as Fragment19, jsx as jsx82, jsxs as jsxs53 } from "react/jsx-runtime";
 var ColorWrapper = (props) => {
   const { colors: colors2, defaultColor, savePickColor } = props;
   const { t: t3 } = useI18n();
   const [selectedColor, setSelectedColor] = useState12(colors2[defaultColor]);
   const [showFullColors, setIsShowFullColor] = useState12(false);
-  const pickColorsRef = useRef6(null);
-  useEffect13(() => {
+  const pickColorsRef = useRef7(null);
+  useEffect12(() => {
     setSelectedColor(colors2[defaultColor]);
   }, [defaultColor]);
   const handleShowFullColors = () => {
     setIsShowFullColor(!showFullColors);
   };
-  useEffect13(() => {
+  useEffect12(() => {
     const handleClickOutside = (event) => {
       if (pickColorsRef.current && !pickColorsRef.current.contains(event.target)) {
         setIsShowFullColor(false);
@@ -17041,7 +17001,7 @@ var ColorField = (props) => {
 };
 
 // src/widgets/basic/copy-link-buttton/copy-link.tsx
-import { useEffect as useEffect14 } from "react";
+import { useEffect as useEffect13 } from "react";
 import { jsx as jsx84, jsxs as jsxs54 } from "react/jsx-runtime";
 var CopyLinkButtonField = (props) => {
   const {
@@ -17078,7 +17038,7 @@ var CopyLinkButtonField = (props) => {
         fieldState: { error: error2 }
       }) => {
         const { setError, clearErrors } = methods;
-        useEffect14(() => {
+        useEffect13(() => {
           if (value) {
             clearErrors(name);
           }
@@ -17151,10 +17111,10 @@ var CopyLinkButtonField = (props) => {
 };
 
 // src/widgets/basic/date-field/date.tsx
-import { forwardRef as forwardRef6, useEffect as useEffect18 } from "react";
+import { forwardRef as forwardRef6, useEffect as useEffect17 } from "react";
 
 // node_modules/react-datepicker/dist/index.es.js
-import React10, { useRef as useRef10, useCallback as useCallback5, useEffect as useEffect16, cloneElement as cloneElement3, Component, createRef, createElement as createElement5 } from "react";
+import React10, { useRef as useRef11, useCallback as useCallback5, useEffect as useEffect15, cloneElement as cloneElement3, Component, createRef, createElement as createElement5 } from "react";
 
 // node_modules/date-fns/constants.js
 var daysInYear = 365.2425;
@@ -21724,8 +21684,8 @@ var CalendarContainer = function(_a2) {
   return React10.createElement("div", { className, role: "dialog", "aria-label": ariaLabel, "aria-modal": "true" }, children);
 };
 var useDetectClickOutside = function(onClickOutside, ignoreClass) {
-  var ref = useRef10(null);
-  var onClickOutsideRef = useRef10(onClickOutside);
+  var ref = useRef11(null);
+  var onClickOutsideRef = useRef11(onClickOutside);
   onClickOutsideRef.current = onClickOutside;
   var handleClickOutside = useCallback5(function(event) {
     var _a2;
@@ -21738,7 +21698,7 @@ var useDetectClickOutside = function(onClickOutside, ignoreClass) {
       }
     }
   }, [ignoreClass]);
-  useEffect16(function() {
+  useEffect15(function() {
     document.addEventListener("mousedown", handleClickOutside);
     return function() {
       document.removeEventListener("mousedown", handleClickOutside);
@@ -24979,7 +24939,7 @@ function withFloating(Component3) {
   var WithFloating = function(props) {
     var _a2;
     var hidePopper = typeof props.hidePopper === "boolean" ? props.hidePopper : true;
-    var arrowRef = useRef10(null);
+    var arrowRef = useRef11(null);
     var floatingProps = useFloating2(_assign({ open: !hidePopper, whileElementsMounted: autoUpdate, placement: props.popperPlacement, middleware: __spreadArray([
       flip3({ padding: 15 }),
       offset3(10),
@@ -26158,7 +26118,7 @@ function _toConsumableArray(r4) {
 
 // node_modules/react-select/dist/Select-ef7c0426.esm.js
 import * as React14 from "react";
-import { useMemo as useMemo9, Fragment as Fragment23, useRef as useRef13, useCallback as useCallback8, useEffect as useEffect17, Component as Component2 } from "react";
+import { useMemo as useMemo9, Fragment as Fragment23, useRef as useRef14, useCallback as useCallback8, useEffect as useEffect16, Component as Component2 } from "react";
 
 // node_modules/@emotion/react/dist/emotion-element-d59e098f.esm.js
 import * as React12 from "react";
@@ -27490,7 +27450,7 @@ function _taggedTemplateLiteral(e3, t3) {
 }
 
 // node_modules/react-select/dist/index-641ee5b8.esm.js
-import { useContext as useContext9, useRef as useRef12, useState as useState16, useMemo as useMemo8, useCallback as useCallback7, createContext as createContext5 } from "react";
+import { useContext as useContext9, useRef as useRef13, useState as useState16, useMemo as useMemo8, useCallback as useCallback7, createContext as createContext5 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 
 // node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.esm.js
@@ -27836,7 +27796,7 @@ var PortalPlacementContext = /* @__PURE__ */ createContext5(null);
 var MenuPlacer = function MenuPlacer2(props) {
   var children = props.children, minMenuHeight = props.minMenuHeight, maxMenuHeight = props.maxMenuHeight, menuPlacement = props.menuPlacement, menuPosition = props.menuPosition, menuShouldScrollIntoView = props.menuShouldScrollIntoView, theme = props.theme;
   var _ref3 = useContext9(PortalPlacementContext) || {}, setPortalPlacement = _ref3.setPortalPlacement;
-  var ref = useRef12(null);
+  var ref = useRef13(null);
   var _useState = useState16(maxMenuHeight), _useState2 = _slicedToArray(_useState, 2), maxHeight = _useState2[0], setMaxHeight = _useState2[1];
   var _useState3 = useState16(null), _useState4 = _slicedToArray(_useState3, 2), placement = _useState4[0], setPlacement = _useState4[1];
   var controlHeight2 = theme.spacing.controlHeight;
@@ -27940,8 +27900,8 @@ var menuPortalCSS = function menuPortalCSS2(_ref8) {
 };
 var MenuPortal = function MenuPortal2(props) {
   var appendTo = props.appendTo, children = props.children, controlElement = props.controlElement, innerProps = props.innerProps, menuPlacement = props.menuPlacement, menuPosition = props.menuPosition;
-  var menuPortalRef = useRef12(null);
-  var cleanupRef = useRef12(null);
+  var menuPortalRef = useRef13(null);
+  var cleanupRef = useRef13(null);
   var _useState5 = useState16(coercePlacement(menuPlacement)), _useState6 = _slicedToArray(_useState5, 2), placement = _useState6[0], setPortalPlacement = _useState6[1];
   var portalPlacementContext = useMemo8(function() {
     return {
@@ -29079,10 +29039,10 @@ var cancelScroll = function cancelScroll2(event) {
 };
 function useScrollCapture(_ref3) {
   var isEnabled = _ref3.isEnabled, onBottomArrive = _ref3.onBottomArrive, onBottomLeave = _ref3.onBottomLeave, onTopArrive = _ref3.onTopArrive, onTopLeave = _ref3.onTopLeave;
-  var isBottom = useRef13(false);
-  var isTop = useRef13(false);
-  var touchStart = useRef13(0);
-  var scrollTarget = useRef13(null);
+  var isBottom = useRef14(false);
+  var isTop = useRef14(false);
+  var touchStart = useRef14(0);
+  var scrollTarget = useRef14(null);
   var handleEventDelta = useCallback8(function(event, delta) {
     if (scrollTarget.current === null) return;
     var _scrollTarget$current = scrollTarget.current, scrollTop = _scrollTarget$current.scrollTop, scrollHeight = _scrollTarget$current.scrollHeight, clientHeight = _scrollTarget$current.clientHeight;
@@ -29142,7 +29102,7 @@ function useScrollCapture(_ref3) {
     el.removeEventListener("touchstart", onTouchStart, false);
     el.removeEventListener("touchmove", onTouchMove, false);
   }, [onTouchMove, onTouchStart, onWheel]);
-  useEffect17(function() {
+  useEffect16(function() {
     if (!isEnabled) return;
     var element = scrollTarget.current;
     startListening(element);
@@ -29189,8 +29149,8 @@ var listenerOptions = {
 };
 function useScrollLock(_ref3) {
   var isEnabled = _ref3.isEnabled, _ref$accountForScroll = _ref3.accountForScrollbars, accountForScrollbars = _ref$accountForScroll === void 0 ? true : _ref$accountForScroll;
-  var originalStyles = useRef13({});
-  var scrollTarget = useRef13(null);
+  var originalStyles = useRef14({});
+  var scrollTarget = useRef14(null);
   var addScrollLock = useCallback8(function(touchScrollTarget) {
     if (!canUseDOM) return;
     var target = document.body;
@@ -29245,7 +29205,7 @@ function useScrollLock(_ref3) {
       }
     }
   }, [accountForScrollbars]);
-  useEffect17(function() {
+  useEffect16(function() {
     if (!isEnabled) return;
     var element = scrollTarget.current;
     addScrollLock(element);
@@ -30964,7 +30924,7 @@ var DateField = (props) => {
         },
         render: ({ field, fieldState: { error: error2 } }) => {
           const { setError, clearErrors } = methods;
-          useEffect18(() => {
+          useEffect17(() => {
             if (value) {
               clearErrors(name);
             }
@@ -31319,7 +31279,7 @@ var FeeField = (props) => {
 };
 
 // src/widgets/basic/file-upload-field/file-upload.tsx
-import { useEffect as useEffect19, useRef as useRef14, useState as useState18 } from "react";
+import { useEffect as useEffect18, useRef as useRef15, useState as useState18 } from "react";
 import { jsx as jsx93, jsxs as jsxs61 } from "react/jsx-runtime";
 var RenderFile = ({
   file,
@@ -31384,10 +31344,10 @@ var FileUploadField = (props) => {
     downloadFunction
   } = props;
   const { t: t3 } = useI18n();
-  const fileInputRef = useRef14(null);
+  const fileInputRef = useRef15(null);
   const [selectedFiles, setSelectedFiles] = useState18([]);
   const [uploadError, setUploadError] = useState18();
-  useEffect19(() => {
+  useEffect18(() => {
     if (selectedFiles?.length === 0 && value) {
       setSelectedFiles([
         {
@@ -31405,7 +31365,7 @@ var FileUploadField = (props) => {
         required: required ? { value: true, message: `${string} ${t3("must_required")}` } : false
       },
       render: ({ field: { onChange: onChange2 }, fieldState: { error: error2 } }) => {
-        useEffect19(() => {
+        useEffect18(() => {
           let data = widget === "many2many_binary" ? selectedFiles : selectedFiles?.[0]?.data;
           if (widget !== "many2many_binary" && data && isBase64File(data)) {
             data = data.split(",")[1];
@@ -31461,7 +31421,7 @@ var FileUploadField = (props) => {
 };
 
 // src/widgets/basic/float-field/float.tsx
-import { useEffect as useEffect20, useRef as useRef15, useState as useState19 } from "react";
+import { useEffect as useEffect19, useRef as useRef16, useState as useState19 } from "react";
 import { Fragment as Fragment26, jsx as jsx94, jsxs as jsxs62 } from "react/jsx-runtime";
 var FloatField = (props) => {
   const {
@@ -31497,9 +31457,9 @@ var FloatField = (props) => {
         const [inputValue, setInputValue] = useState19(
           value !== void 0 && value !== null ? formatFloatNumber(value) : ""
         );
-        const isDirtyRef = useRef15(false);
-        const lastCommittedValueRef = useRef15(null);
-        useEffect20(() => {
+        const isDirtyRef = useRef16(false);
+        const lastCommittedValueRef = useRef16(null);
+        useEffect19(() => {
           if (isDirtyRef.current) return;
           const numericInput = parseFloat(inputValue?.replace(/,/g, ""));
           if (propValue !== void 0 && propValue !== null && !Number.isNaN(propValue) && propValue !== numericInput) {
@@ -31725,7 +31685,7 @@ var FloatTimeField = (props) => {
 };
 
 // src/widgets/basic/html-field/html.tsx
-import { useEffect as useEffect21, useRef as useRef16 } from "react";
+import { useEffect as useEffect20, useRef as useRef17 } from "react";
 import { jsx as jsx96 } from "react/jsx-runtime";
 var HtmlField = (props) => {
   const {
@@ -31739,7 +31699,7 @@ var HtmlField = (props) => {
     isEditTable,
     baseClassName
   } = props;
-  const divRef = useRef16(null);
+  const divRef = useRef17(null);
   if (!isForm && !isEditTable) {
     return /* @__PURE__ */ jsx96("div", { dangerouslySetInnerHTML: { __html: value || defaultValue || "" } });
   }
@@ -31750,7 +31710,7 @@ var HtmlField = (props) => {
       control: methods?.control,
       defaultValue,
       render: ({ field: { onChange: fieldOnChange, value: value2 } }) => {
-        useEffect21(() => {
+        useEffect20(() => {
           if (divRef.current && divRef.current.innerHTML !== value2) {
             divRef.current.innerHTML = value2 || "";
           }
@@ -31788,7 +31748,7 @@ var ImageField = (props) => {
 };
 
 // src/widgets/basic/many2many-tags-field/many2many-tags.tsx
-import React17, { useEffect as useEffect22, useMemo as useMemo11 } from "react";
+import React17, { useEffect as useEffect21, useMemo as useMemo11 } from "react";
 
 // src/widgets/basic/information-field/information.tsx
 import { Fragment as Fragment28, jsx as jsx98, jsxs as jsxs64 } from "react/jsx-runtime";
@@ -31832,7 +31792,7 @@ var CustomMultiValue = ({ stringToColor, ...props }) => {
       (childItem) => childItem?.is_display && childItem?.action?.res_model === relation
     )
   )?.[0]?.action?.id;
-  return /* @__PURE__ */ jsxs65("div", { className: "flex items-center gap-2 relative mr-2 group", children: [
+  return /* @__PURE__ */ jsxs65("div", { className: "flex items-center gap-2 mr-2 relative  border-[1px] border-solid border-[rgba(66,66,66,0.12)] py-1 px-2 rounded", children: [
     /* @__PURE__ */ jsx99(
       AvatarField,
       {
@@ -31847,9 +31807,10 @@ var CustomMultiValue = ({ stringToColor, ...props }) => {
     ),
     /* @__PURE__ */ jsx99("span", { className: "capitalize", children: data?.label ?? data?.display_name }),
     /* @__PURE__ */ jsx99(
-      "span",
+      "button",
       {
-        className: "absolute !cursor-pointer -top-1 -right-1 font-medium bg-white rounded-full !shadow-lg hidden group-hover:block",
+        type: "button",
+        className: "ml-1 flex items-center justify-center rounded-full  !cursor-pointer",
         onClick: (e3) => {
           e3.stopPropagation();
           props.removeProps.onClick();
@@ -31882,7 +31843,6 @@ var CustomMenuList = (props) => {
 };
 var Many2ManyTagField = (props) => {
   const {
-    relation,
     value,
     name,
     methods,
@@ -31932,7 +31892,7 @@ var Many2ManyTagField = (props) => {
       },
       render: ({ field, fieldState: { error: error2 } }) => {
         const { clearErrors } = methods;
-        useEffect22(() => {
+        useEffect21(() => {
           if (field.value) {
             clearErrors(name);
           }
@@ -31995,7 +31955,7 @@ var Many2ManyTagField = (props) => {
                 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",
+                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",
@@ -32083,7 +32043,7 @@ var Many2ManyTagField = (props) => {
 };
 
 // src/widgets/basic/monetary-field/monetary.tsx
-import { useEffect as useEffect23 } from "react";
+import { useEffect as useEffect22 } from "react";
 import { Fragment as Fragment29, jsx as jsx100, jsxs as jsxs66 } from "react/jsx-runtime";
 var MonetaryField = (props) => {
   const { t: t3 } = useI18n();
@@ -32133,7 +32093,7 @@ var MonetaryField = (props) => {
         fieldState: { error: error2 }
       }) => {
         const { setError, clearErrors } = methods;
-        useEffect23(() => {
+        useEffect22(() => {
           if (value2 !== void 0 && value2 !== null && !isNaN(value2)) {
             clearErrors(name);
           }
@@ -32189,7 +32149,7 @@ var PaidBadgedField = () => {
 };
 
 // src/widgets/basic/priority-field/rating-star.tsx
-import React18, { useEffect as useEffect24, useState as useState21 } from "react";
+import React18, { useEffect as useEffect23, useState as useState21 } from "react";
 import { jsx as jsx102, jsxs as jsxs67 } from "react/jsx-runtime";
 var RatingStarField = (props) => {
   const {
@@ -32201,7 +32161,7 @@ var RatingStarField = (props) => {
   } = props;
   const [rating, setRating] = useState21(defaultValue);
   const [hover, setHover] = useState21(0);
-  useEffect24(() => {
+  useEffect23(() => {
     setRating(defaultValue);
   }, [defaultValue]);
   const handleClick = (value) => {
@@ -32316,7 +32276,7 @@ var PriorityField = (props) => {
 };
 
 // src/widgets/basic/radio-group-field/radio-group.tsx
-import { useEffect as useEffect25 } from "react";
+import { useEffect as useEffect24 } from "react";
 import { jsx as jsx104, jsxs as jsxs68 } from "react/jsx-runtime";
 var RadioGroupField = (props) => {
   const {
@@ -32330,7 +32290,7 @@ var RadioGroupField = (props) => {
     onChange: onChange2,
     setValue
   } = props;
-  useEffect25(() => {
+  useEffect24(() => {
     if (selection?.length > 0) {
       if (setValue) setValue(name, selection?.[0]?.[0]);
     }
@@ -32636,7 +32596,7 @@ var ToggleButtonField = (props) => {
 };
 
 // src/widgets/basic/integer-field/integer.tsx
-import { useEffect as useEffect26, useRef as useRef17, useState as useState22 } from "react";
+import { useEffect as useEffect25, useRef as useRef18, useState as useState22 } from "react";
 import { Fragment as Fragment31, jsx as jsx109, jsxs as jsxs72 } from "react/jsx-runtime";
 var IntegerField = (props) => {
   const {
@@ -32673,13 +32633,13 @@ var IntegerField = (props) => {
         fieldState: { error: error2 }
       }) => {
         const { setError, clearErrors } = methods;
-        const isDirtyRef = useRef17(false);
-        const inputRef = useRef17(null);
-        const lastCommittedValueRef = useRef17(null);
+        const isDirtyRef = useRef18(false);
+        const inputRef = useRef18(null);
+        const lastCommittedValueRef = useRef18(null);
         const [inputValue, setInputValue] = useState22(
           value2 !== void 0 && value2 !== null ? String(value2) : ""
         );
-        useEffect26(() => {
+        useEffect25(() => {
           if (value2 !== void 0 && value2 !== null) {
             setInputValue(String(value2));
             clearErrors(name);
@@ -32835,7 +32795,7 @@ var StatusDropdownField = (props) => {
 
 // src/widgets/basic/many2many-field/many2many.tsx
 import { createPortal as createPortal5 } from "react-dom";
-import { useEffect as useEffect27 } from "react";
+import { useEffect as useEffect26 } from "react";
 import { jsx as jsx111, jsxs as jsxs74 } from "react/jsx-runtime";
 var Many2ManyField = (props) => {
   const { t: t3 } = useI18n();
@@ -32890,7 +32850,7 @@ var Many2ManyField = (props) => {
     setGroupBy,
     clearSearch
   } = searchController;
-  useEffect27(() => {
+  useEffect26(() => {
     const groupItems = Array.isArray(selectedTags) ? selectedTags.filter((item) => item.type === "group_by") : [];
     if (groupItems?.length > 0) {
       typeof setPageLimit === "function" && setPageLimit(80);
@@ -33045,7 +33005,7 @@ var Many2ManyField = (props) => {
 };
 
 // src/widgets/basic/many2one-field/many2one.tsx
-import React19, { useEffect as useEffect28, useState as useState23 } from "react";
+import React19, { useEffect as useEffect27, useState as useState23 } from "react";
 import { Fragment as Fragment32, jsx as jsx112, jsxs as jsxs75 } from "react/jsx-runtime";
 var CustomMenuList2 = (props) => {
   const { t: t3 } = useI18n();
@@ -33152,7 +33112,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;
-              useEffect28(() => {
+              useEffect27(() => {
                 if (error2 && selectedOption) {
                   methods?.clearErrors(name);
                 }