@fctc/sme-widget-ui 2.9.5 → 2.9.7

package/dist/widgets.js

@@ -7788,7 +7788,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
@@ -7847,7 +7848,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
@@ -9527,27 +9529,6 @@ var PaidIcon = () => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
 
 // src/icons/placeholder-icon.tsx
 var import_jsx_runtime37 = require("react/jsx-runtime");
-var PlaceHolderIcon = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-    "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__ */ (0, import_jsx_runtime37.jsx)(
-        "g",
-        {
-          transform: "translate(0.000000,256.000000) scale(0.100000,-0.100000)",
-          fill: "#000000",
-          stroke: "none"
-        }
-      )
-    }
-  );
-};
 
 // src/icons/google-icon.tsx
 var import_jsx_runtime38 = require("react/jsx-runtime");
@@ -12116,7 +12097,7 @@ var TableHead = (props) => {
             return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
               "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
@@ -15913,7 +15894,7 @@ var ButtonSelectFiles = ({
   isText
 }) => {
   const { t: t3 } = useI18n();
-  const ALLOWED_TYPES = [
+  const ALLOWED_TYPES2 = [
     "image/jpeg",
     "image/png",
     "application/pdf",
@@ -15930,7 +15911,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;
     }
@@ -16145,123 +16126,115 @@ var AvatarField = (props) => {
 // src/widgets/basic/binary-field/binary.tsx
 var import_react39 = require("react");
 var import_jsx_runtime75 = require("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] = (0, import_react39.useState)(null);
+  const [loading, setLoading] = (0, import_react39.useState)(false);
+  const hasFetchedMeta = (0, import_react39.useRef)(false);
   const onlyImage = widget === "image" || widget === "image_url";
-  (0, import_react39.useEffect)(() => {
-    setInitialFile(value);
-  }, [value]);
-  (0, import_react39.useEffect)(() => {
-    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__ */ (0, import_jsx_runtime75.jsx)(PlaceHolderIcon, {});
-    const { name: name2, type, url, size: size4 } = file;
-    if (type?.startsWith("image/") || checkIsImageLink2(url))
-      return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
-        "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__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex gap-2 items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+          "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__ */ (0, import_jsx_runtime75.jsx)(
-        "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__ */ (0, import_jsx_runtime75.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+            "p",
+            {
+              style: {
+                maxWidth: "120px"
+              },
+              className: "text-sm font-medium text-gray-600 truncate max-w-[120px]",
+              children: url?.split("/").pop()
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "text-xs text-[#666] font-semibold", children: size4 })
+        ] })
+      ] });
+    }
     const getFileIcon = () => {
       if (type === "application/pdf") return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(PdfIcon, {});
       if (type?.includes("excel") || type?.includes("spreadsheet"))
@@ -16270,7 +16243,6 @@ var BinaryField = (props) => {
       if (type === "application/json") return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(JSONFileIcon, {});
       return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(DefaultFileIcon, {});
     };
-    const isShowSize = !isNaN(size4);
     return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex items-center gap-2", children: [
       getFileIcon(),
       /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { children: [
@@ -16281,10 +16253,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__ */ (0, import_jsx_runtime75.jsx)("span", { className: "text-xs text-[#666] font-semibold", children: formatFileSize(size4) })
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "text-xs text-[#666] font-semibold", children: size4 })
       ] })
     ] });
   };
@@ -16294,136 +16266,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__ */ (0, import_jsx_runtime75.jsxs)(import_jsx_runtime75.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
             "div",
             {
-              ref: binaryRef,
-              className: `widget binary-field flex w-fit items-center gap-4 ${onlyImage && initialFile ? "shadow-md rounded-lg" : ""}`,
-              children: hasFile ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+              className: `widget binary-field flex w-fit items-center gap-4 ${onlyImage ? "shadow-md rounded-[12px]" : ""} ${isEditTable ? "p-2" : ""}`,
+              children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "relative group", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
                 "div",
                 {
-                  className: `relative group  ${onlyImage ? "shadow-md rounded-lg" : ""}`,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
-                    "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__ */ (0, import_jsx_runtime75.jsxs)(
-                          "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__ */ (0, import_jsx_runtime75.jsx)(
-                                "span",
-                                {
-                                  className: "cursor-pointer",
-                                  onClick: () => onDownload && onDownload(
-                                    fileInfo?.url || fileInfo?.data,
-                                    fileInfo?.name || fileInfo?.display_name
-                                  ),
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(DownloadIcon, {})
-                                }
-                              ),
-                              !readonly && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
-                                "span",
-                                {
-                                  className: "cursor-pointer",
-                                  onClick: () => {
-                                    setFileInfo(null);
-                                    handleRemoveFile(field.onChange);
-                                  },
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(DeleteIconDanger, {})
-                                }
-                              )
-                            ]
-                          }
-                        )
-                      ]
-                    }
-                  )
-                }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
-                "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__ */ (0, import_jsx_runtime75.jsx)(
-                      "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__ */ (0, import_jsx_runtime75.jsx)(
-                      "img",
-                      {
-                        src: placeHolderImage,
-                        alt: "",
-                        className: "z-0 relative"
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                    renderPreview(),
+                    value ? /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
                       "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__ */ (0, import_jsx_runtime75.jsx)(
-                          "svg",
-                          {
-                            xmlns: "http://www.w3.org/2000/svg",
-                            width: "14",
-                            height: "14",
-                            viewBox: "0 0 14 14",
-                            fill: "none",
-                            children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
-                              "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__ */ (0, import_jsx_runtime75.jsx)(
+                            "span",
+                            {
+                              onClick: () => onDownload && onDownload(url || "", url?.split("/").pop()),
+                              className: "cursor-pointer",
+                              children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(DownloadIcon, {})
+                            }
+                          ),
+                          !readonly && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { onClick: handleDelete, className: "cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(DeleteIconDanger, {}) })
+                        ]
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
+                      "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__ */ (0, import_jsx_runtime75.jsx)(
+                            "input",
+                            {
+                              type: "file",
+                              readOnly: readonly,
+                              placeholder,
+                              required: !invisible && required,
+                              onChange: handleUpload,
+                              className: "hidden",
+                              accept: acceptType
+                            }
+                          ),
+                          onlyImage && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                            "img",
+                            {
+                              src: placeHolderImage,
+                              alt: "",
+                              className: "z-0 relative"
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                            "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__ */ (0, import_jsx_runtime75.jsx)(
+                                "svg",
+                                {
+                                  xmlns: "http://www.w3.org/2000/svg",
+                                  width: "14",
+                                  height: "14",
+                                  viewBox: "0 0 14 14",
+                                  fill: "none",
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                                    "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__ */ (0, import_jsx_runtime75.jsx)("p", { className: "text-[#de4747] text-sm mt-1", children: error2.message })
@@ -31895,7 +31855,7 @@ var CustomMultiValue = ({ stringToColor, ...props }) => {
       (childItem) => childItem?.is_display && childItem?.action?.res_model === relation
     )
   )?.[0]?.action?.id;
-  return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "flex items-center gap-2 relative mr-2 group", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("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__ */ (0, import_jsx_runtime97.jsx)(
       AvatarField,
       {
@@ -31910,9 +31870,10 @@ var CustomMultiValue = ({ stringToColor, ...props }) => {
     ),
     /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { className: "capitalize", children: data?.label ?? data?.display_name }),
     /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
-      "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();
@@ -31945,7 +31906,6 @@ var CustomMenuList = (props) => {
 };
 var Many2ManyTagField = (props) => {
   const {
-    relation,
     value,
     name,
     methods,
@@ -32058,7 +32018,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",