@fctc/sme-widget-ui 1.0.8 → 1.1.0

package/dist/widgets.js

@@ -14484,103 +14484,115 @@ var PopupFilter = ({
   setGroupBy,
   fields
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "popup-filter absolute right-0 top-[calc(100%_+_3px)] z-[33] w-auto min-w-full overflow-x-auto rounded-lg border bg-white border-none shadow-xl", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     "div",
     {
-      className: `flex py-3 ${(filterBy?.length === 0 || groupBy?.length === 0) && "!grid-cols-1"}`,
-      children: [
-        filterBy?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "filter-by w-full px-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex w-fit items-center justify-start gap-2 px-3 py-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(FilterIcon, { className: "filter-by-icon text-primary" }),
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "font-bold text-sm text-[#212529]", children: instance.t("filter_by") })
-          ] }),
-          filterBy?.reduce((acc, item, index4, array) => {
-            const prevItem = array[index4 - 1];
-            const isDifferentGroup = prevItem && prevItem?.group_index !== item?.group_index;
-            const isExist = item?.active;
-            if (isDifferentGroup) {
-              acc.push(/* @__PURE__ */ (0, import_jsx_runtime54.jsx)("hr", { className: "my-2" }, "separator-" + index4));
-            }
-            acc.push(
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
-                "button",
-                {
-                  className: `filter-by-item w-full flex items-center gap-2 bg-white px-3 py-1 text-left cursor-pointer ${isExist ? "filter-by-checked font-semibold " : "hover:!bg-[rgba(0,0,0,0.08)]"}`,
-                  onClick: () => {
-                    const newFilterBy = filterBy?.map(
-                      (tag) => tag?.name === item?.name ? { ...tag, active: !tag?.active } : tag
-                    );
-                    setFilterBy(newFilterBy);
-                    if (isExist) {
-                      typeof removeSearchItems === "function" && removeSearchItems(
-                        `${SearchType.FILTER}_${item.group_index}`,
-                        item
+      style: {
+        position: "absolute",
+        top: "calc(100% + 3px)",
+        right: 0,
+        zIndex: 33
+      },
+      className: "popup-filter w-full overflow-x-auto rounded-lg border bg-white border-none shadow-xl",
+      children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+        "div",
+        {
+          className: `flex py-3 ${(filterBy?.length === 0 || groupBy?.length === 0) && "!grid-cols-1"}`,
+          children: [
+            filterBy?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "filter-by w-full px-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex w-fit items-center justify-start gap-2 px-3 py-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(FilterIcon, { className: "filter-by-icon text-primary" }),
+                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "font-bold text-sm text-[#212529]", children: instance.t("filter_by") })
+              ] }),
+              filterBy?.reduce((acc, item, index4, array) => {
+                const prevItem = array[index4 - 1];
+                const isDifferentGroup = prevItem && prevItem?.group_index !== item?.group_index;
+                const isExist = item?.active;
+                if (isDifferentGroup) {
+                  acc.push(/* @__PURE__ */ (0, import_jsx_runtime54.jsx)("hr", { className: "my-2" }, "separator-" + index4));
+                }
+                acc.push(
+                  /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+                    "button",
+                    {
+                      className: `filter-by-item w-full flex items-center gap-2 bg-white px-3 py-1 text-left cursor-pointer ${isExist ? "filter-by-checked font-semibold " : "hover:!bg-[rgba(0,0,0,0.08)]"}`,
+                      onClick: () => {
+                        const newFilterBy = filterBy?.map(
+                          (tag) => tag?.name === item?.name ? { ...tag, active: !tag?.active } : tag
+                        );
+                        setFilterBy(newFilterBy);
+                        if (isExist) {
+                          typeof removeSearchItems === "function" && removeSearchItems(
+                            `${SearchType.FILTER}_${item.group_index}`,
+                            item
+                          );
+                          return;
+                        }
+                        typeof handleAddTagSearch === "function" && handleAddTagSearch({
+                          name: item?.name,
+                          value: item?.string ?? item?.help,
+                          domain: item?.domain,
+                          groupIndex: item?.group_index,
+                          type: SearchType.FILTER
+                        });
+                      },
+                      children: [
+                        isExist && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(CheckIcon, {}),
+                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "text-sm", children: item?.string ?? item?.help })
+                      ]
+                    },
+                    "filter-" + index4
+                  )
+                );
+                return acc;
+              }, [])
+            ] }),
+            filterBy?.length > 0 && groupBy?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "h-['initial'] w-[1px] bg-[#dee2e6]" }),
+            groupBy?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "group-by w-full px-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex w-fit items-center justify-start gap-2 px-3 py-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(GroupByIcon, { className: "group-by-icon text-primary" }),
+                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "font-bold text-sm text-[#212529]", children: instance.t("group_by") })
+              ] }),
+              groupBy?.map((item, index4) => {
+                const isExist = item?.active;
+                if (!item.string) return;
+                return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+                  "button",
+                  {
+                    onClick: () => {
+                      const formatArray = groupBy.map(
+                        (tag) => tag?.name === item?.name ? { ...tag, active: !tag?.active } : tag
                       );
-                      return;
-                    }
-                    typeof handleAddTagSearch === "function" && handleAddTagSearch({
-                      name: item?.name,
-                      value: item?.string ?? item?.help,
-                      domain: item?.domain,
-                      groupIndex: item?.group_index,
-                      type: SearchType.FILTER
-                    });
+                      setGroupBy(formatArray);
+                      if (isExist) {
+                        typeof removeSearchItems === "function" && removeSearchItems(`${SearchType.GROUP}`, item);
+                        return;
+                      }
+                      typeof handleAddTagSearch === "function" && handleAddTagSearch({
+                        name: item?.name,
+                        value: item?.string,
+                        type: SearchType.GROUP,
+                        context: JSON.parse(item?.context.replace(/'/g, '"')),
+                        active: !isExist,
+                        dataIndex: index4,
+                        fieldsGroup: fields
+                      });
+                    },
+                    className: `group-by-item w-full flex items-center gap-2 bg-white px-3 py-1 text-left cursor-pointer ${isExist ? "group-by-checked font-semibold" : "hover:!bg-[rgba(0,0,0,0.08)]"}`,
+                    children: [
+                      isExist && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(CheckIcon, {}),
+                      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "text-sm", children: item?.string })
+                    ]
                   },
-                  children: [
-                    isExist && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(CheckIcon, {}),
-                    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "text-sm", children: item?.string ?? item?.help })
-                  ]
-                },
-                "filter-" + index4
-              )
-            );
-            return acc;
-          }, [])
-        ] }),
-        filterBy?.length > 0 && groupBy?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "h-['initial'] w-[1px] bg-[#dee2e6]" }),
-        groupBy?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "group-by w-full px-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex w-fit items-center justify-start gap-2 px-3 py-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(GroupByIcon, { className: "group-by-icon text-primary" }),
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "font-bold text-sm text-[#212529]", children: instance.t("group_by") })
-          ] }),
-          groupBy?.map((item, index4) => {
-            const isExist = item?.active;
-            if (!item.string) return;
-            return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
-              "button",
-              {
-                onClick: () => {
-                  const formatArray = groupBy.map(
-                    (tag) => tag?.name === item?.name ? { ...tag, active: !tag?.active } : tag
-                  );
-                  setGroupBy(formatArray);
-                  if (isExist) {
-                    typeof removeSearchItems === "function" && removeSearchItems(`${SearchType.GROUP}`, item);
-                    return;
-                  }
-                  typeof handleAddTagSearch === "function" && handleAddTagSearch({
-                    name: item?.name,
-                    value: item?.string,
-                    type: SearchType.GROUP,
-                    context: JSON.parse(item?.context.replace(/'/g, '"')),
-                    active: !isExist,
-                    dataIndex: index4,
-                    fieldsGroup: fields
-                  });
-                },
-                className: `group-by-item w-full flex items-center gap-2 bg-white px-3 py-1 text-left cursor-pointer ${isExist ? "group-by-checked font-semibold" : "hover:!bg-[rgba(0,0,0,0.08)]"}`,
-                children: [
-                  isExist && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(CheckIcon, {}),
-                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "text-sm", children: item?.string })
-                ]
-              },
-              "groupby-" + index4 + 1
-            );
-          })
-        ] })
-      ]
+                  "groupby-" + index4 + 1
+                );
+              })
+            ] })
+          ]
+        }
+      )
     }
-  ) });
+  );
 };
 
 // src/widgets/advanced/search/search-item/index.tsx
@@ -31878,7 +31890,7 @@ var DateField = (props) => {
       isForm2 && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(CalandarIcon, {})
     ] })
   );
-  if (!isForm) {
+  if (!isForm && !isEditTable) {
     return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { children: value && (0, import_moment2.default)(value).isValid() ? (0, import_moment2.default)(value).add(7, "hours").format(formatDate2) : "" });
   } else {
     return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
@@ -33213,15 +33225,8 @@ var SelectDropdownField = (props) => {
     value: val[0],
     label: val[1]
   })) : [];
-  if (!isForm) {
-    const value2 = options2?.find((item) => item?.value === value2)?.label;
-    return value2 && /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
-      "span",
-      {
-        className: `${props.className} px-2 py-1 rounded border text-xs font-medium leading-[16px]`,
-        children: value2
-      }
-    );
+  if (!isForm && !isEditTable) {
+    return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { children: options2?.find((item) => item?.value === value)?.label });
   } else {
     return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
       Controller,
@@ -33262,20 +33267,43 @@ var SelectDropdownField = (props) => {
               StateManagedSelect$1,
               {
                 ...commonProps,
-                classNames: isEditTable ? {
-                  control: () => `w-full flex ring-0 cursor-pointer outline-0 !shadow-none p-2 pl-3 text-sm text-[#1A1A1B] font-normal gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content border border-transparent border-b border-[#f7f7f7] hover:border-b-primary ${readonly ? "!cursor-not-allowed" : ""}`,
-                  valueContainer: () => "!m-0 !p-0",
-                  singleValue: () => `!m-0 ${readonly ? "!text-[#5c5a5a]" : ""}`,
-                  input: () => "!m-0 !p-0",
-                  dropdownIndicator: () => "invisible group-hover:visible !m-0 !p-0",
-                  clearIndicator: () => "invisible group-hover:visible !m-0 !p-0"
-                } : {
-                  control: ({ isFocused }) => `w-full flex min-h-[44px] ring-0 cursor-pointer outline-0 !bg-white !shadow-none !rounded-[8px] p-2 pl-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content ${isFocused ? "!border-[1px] border-primary !ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]"} `,
-                  valueContainer: () => "!m-0 !p-0",
-                  singleValue: () => `!m-0 ${readonly ? "!text-[#5c5a5a]" : ""}`,
-                  input: () => "!m-0 !p-0",
-                  dropdownIndicator: () => "!m-0 !p-0"
+                styles: {
+                  control: (base, state) => ({
+                    ...base,
+                    display: "flex",
+                    minHeight: "44px",
+                    cursor: readonly ? "not-allowed" : "pointer",
+                    backgroundColor: "#f7f7f7",
+                    borderRadius: isEditTable ? "0px" : "10px",
+                    padding: "4px 0px",
+                    border: isForm ? state.isFocused ? "1px solid var(--primary)" : "1px solid transparent" : "none",
+                    boxShadow: "none",
+                    "&:hover": {
+                      borderColor: "var(--primary)"
+                    },
+                    ...isEditTable && {
+                      minWidth: "300px",
+                      maxWidth: "300px",
+                      borderBottom: "1px solid transparent",
+                      background: "transparent"
+                    }
+                  }),
+                  clearIndicator: (base) => ({
+                    ...base,
+                    padding: "0"
+                  }),
+                  menuPortal: (base) => ({
+                    ...base,
+                    zIndex: 9999
+                  }),
+                  menu: (base) => ({
+                    ...base,
+                    zIndex: 9999,
+                    width: isEditTable ? "300px" : "100%",
+                    minWidth: isEditTable ? "300px" : "100%"
+                  })
                 },
+                menuPortalTarget: typeof window !== "undefined" ? document.body : null,
                 components: {
                   IndicatorSeparator: () => null,
                   DropdownIndicator: (props2) => readonly || !isEditTable ? null : /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(components.DropdownIndicator, { ...props2 })

package/dist/widgets.mjs

@@ -14422,103 +14422,115 @@ var PopupFilter = ({
   setGroupBy,
   fields
 }) => {
-  return /* @__PURE__ */ jsx54("div", { className: "popup-filter absolute right-0 top-[calc(100%_+_3px)] z-[33] w-auto min-w-full overflow-x-auto rounded-lg border bg-white border-none shadow-xl", children: /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsx54(
     "div",
     {
-      className: `flex py-3 ${(filterBy?.length === 0 || groupBy?.length === 0) && "!grid-cols-1"}`,
-      children: [
-        filterBy?.length > 0 && /* @__PURE__ */ jsxs35("div", { className: "filter-by w-full px-3", children: [
-          /* @__PURE__ */ jsxs35("div", { className: "flex w-fit items-center justify-start gap-2 px-3 py-1", children: [
-            /* @__PURE__ */ jsx54(FilterIcon, { className: "filter-by-icon text-primary" }),
-            /* @__PURE__ */ jsx54("span", { className: "font-bold text-sm text-[#212529]", children: instance.t("filter_by") })
-          ] }),
-          filterBy?.reduce((acc, item, index4, array) => {
-            const prevItem = array[index4 - 1];
-            const isDifferentGroup = prevItem && prevItem?.group_index !== item?.group_index;
-            const isExist = item?.active;
-            if (isDifferentGroup) {
-              acc.push(/* @__PURE__ */ jsx54("hr", { className: "my-2" }, "separator-" + index4));
-            }
-            acc.push(
-              /* @__PURE__ */ jsxs35(
-                "button",
-                {
-                  className: `filter-by-item w-full flex items-center gap-2 bg-white px-3 py-1 text-left cursor-pointer ${isExist ? "filter-by-checked font-semibold " : "hover:!bg-[rgba(0,0,0,0.08)]"}`,
-                  onClick: () => {
-                    const newFilterBy = filterBy?.map(
-                      (tag) => tag?.name === item?.name ? { ...tag, active: !tag?.active } : tag
-                    );
-                    setFilterBy(newFilterBy);
-                    if (isExist) {
-                      typeof removeSearchItems === "function" && removeSearchItems(
-                        `${SearchType.FILTER}_${item.group_index}`,
-                        item
+      style: {
+        position: "absolute",
+        top: "calc(100% + 3px)",
+        right: 0,
+        zIndex: 33
+      },
+      className: "popup-filter w-full overflow-x-auto rounded-lg border bg-white border-none shadow-xl",
+      children: /* @__PURE__ */ jsxs35(
+        "div",
+        {
+          className: `flex py-3 ${(filterBy?.length === 0 || groupBy?.length === 0) && "!grid-cols-1"}`,
+          children: [
+            filterBy?.length > 0 && /* @__PURE__ */ jsxs35("div", { className: "filter-by w-full px-3", children: [
+              /* @__PURE__ */ jsxs35("div", { className: "flex w-fit items-center justify-start gap-2 px-3 py-1", children: [
+                /* @__PURE__ */ jsx54(FilterIcon, { className: "filter-by-icon text-primary" }),
+                /* @__PURE__ */ jsx54("span", { className: "font-bold text-sm text-[#212529]", children: instance.t("filter_by") })
+              ] }),
+              filterBy?.reduce((acc, item, index4, array) => {
+                const prevItem = array[index4 - 1];
+                const isDifferentGroup = prevItem && prevItem?.group_index !== item?.group_index;
+                const isExist = item?.active;
+                if (isDifferentGroup) {
+                  acc.push(/* @__PURE__ */ jsx54("hr", { className: "my-2" }, "separator-" + index4));
+                }
+                acc.push(
+                  /* @__PURE__ */ jsxs35(
+                    "button",
+                    {
+                      className: `filter-by-item w-full flex items-center gap-2 bg-white px-3 py-1 text-left cursor-pointer ${isExist ? "filter-by-checked font-semibold " : "hover:!bg-[rgba(0,0,0,0.08)]"}`,
+                      onClick: () => {
+                        const newFilterBy = filterBy?.map(
+                          (tag) => tag?.name === item?.name ? { ...tag, active: !tag?.active } : tag
+                        );
+                        setFilterBy(newFilterBy);
+                        if (isExist) {
+                          typeof removeSearchItems === "function" && removeSearchItems(
+                            `${SearchType.FILTER}_${item.group_index}`,
+                            item
+                          );
+                          return;
+                        }
+                        typeof handleAddTagSearch === "function" && handleAddTagSearch({
+                          name: item?.name,
+                          value: item?.string ?? item?.help,
+                          domain: item?.domain,
+                          groupIndex: item?.group_index,
+                          type: SearchType.FILTER
+                        });
+                      },
+                      children: [
+                        isExist && /* @__PURE__ */ jsx54(CheckIcon, {}),
+                        /* @__PURE__ */ jsx54("span", { className: "text-sm", children: item?.string ?? item?.help })
+                      ]
+                    },
+                    "filter-" + index4
+                  )
+                );
+                return acc;
+              }, [])
+            ] }),
+            filterBy?.length > 0 && groupBy?.length > 0 && /* @__PURE__ */ jsx54("div", { className: "h-['initial'] w-[1px] bg-[#dee2e6]" }),
+            groupBy?.length > 0 && /* @__PURE__ */ jsxs35("div", { className: "group-by w-full px-3", children: [
+              /* @__PURE__ */ jsxs35("div", { className: "flex w-fit items-center justify-start gap-2 px-3 py-1", children: [
+                /* @__PURE__ */ jsx54(GroupByIcon, { className: "group-by-icon text-primary" }),
+                /* @__PURE__ */ jsx54("span", { className: "font-bold text-sm text-[#212529]", children: instance.t("group_by") })
+              ] }),
+              groupBy?.map((item, index4) => {
+                const isExist = item?.active;
+                if (!item.string) return;
+                return /* @__PURE__ */ jsxs35(
+                  "button",
+                  {
+                    onClick: () => {
+                      const formatArray = groupBy.map(
+                        (tag) => tag?.name === item?.name ? { ...tag, active: !tag?.active } : tag
                       );
-                      return;
-                    }
-                    typeof handleAddTagSearch === "function" && handleAddTagSearch({
-                      name: item?.name,
-                      value: item?.string ?? item?.help,
-                      domain: item?.domain,
-                      groupIndex: item?.group_index,
-                      type: SearchType.FILTER
-                    });
+                      setGroupBy(formatArray);
+                      if (isExist) {
+                        typeof removeSearchItems === "function" && removeSearchItems(`${SearchType.GROUP}`, item);
+                        return;
+                      }
+                      typeof handleAddTagSearch === "function" && handleAddTagSearch({
+                        name: item?.name,
+                        value: item?.string,
+                        type: SearchType.GROUP,
+                        context: JSON.parse(item?.context.replace(/'/g, '"')),
+                        active: !isExist,
+                        dataIndex: index4,
+                        fieldsGroup: fields
+                      });
+                    },
+                    className: `group-by-item w-full flex items-center gap-2 bg-white px-3 py-1 text-left cursor-pointer ${isExist ? "group-by-checked font-semibold" : "hover:!bg-[rgba(0,0,0,0.08)]"}`,
+                    children: [
+                      isExist && /* @__PURE__ */ jsx54(CheckIcon, {}),
+                      /* @__PURE__ */ jsx54("span", { className: "text-sm", children: item?.string })
+                    ]
                   },
-                  children: [
-                    isExist && /* @__PURE__ */ jsx54(CheckIcon, {}),
-                    /* @__PURE__ */ jsx54("span", { className: "text-sm", children: item?.string ?? item?.help })
-                  ]
-                },
-                "filter-" + index4
-              )
-            );
-            return acc;
-          }, [])
-        ] }),
-        filterBy?.length > 0 && groupBy?.length > 0 && /* @__PURE__ */ jsx54("div", { className: "h-['initial'] w-[1px] bg-[#dee2e6]" }),
-        groupBy?.length > 0 && /* @__PURE__ */ jsxs35("div", { className: "group-by w-full px-3", children: [
-          /* @__PURE__ */ jsxs35("div", { className: "flex w-fit items-center justify-start gap-2 px-3 py-1", children: [
-            /* @__PURE__ */ jsx54(GroupByIcon, { className: "group-by-icon text-primary" }),
-            /* @__PURE__ */ jsx54("span", { className: "font-bold text-sm text-[#212529]", children: instance.t("group_by") })
-          ] }),
-          groupBy?.map((item, index4) => {
-            const isExist = item?.active;
-            if (!item.string) return;
-            return /* @__PURE__ */ jsxs35(
-              "button",
-              {
-                onClick: () => {
-                  const formatArray = groupBy.map(
-                    (tag) => tag?.name === item?.name ? { ...tag, active: !tag?.active } : tag
-                  );
-                  setGroupBy(formatArray);
-                  if (isExist) {
-                    typeof removeSearchItems === "function" && removeSearchItems(`${SearchType.GROUP}`, item);
-                    return;
-                  }
-                  typeof handleAddTagSearch === "function" && handleAddTagSearch({
-                    name: item?.name,
-                    value: item?.string,
-                    type: SearchType.GROUP,
-                    context: JSON.parse(item?.context.replace(/'/g, '"')),
-                    active: !isExist,
-                    dataIndex: index4,
-                    fieldsGroup: fields
-                  });
-                },
-                className: `group-by-item w-full flex items-center gap-2 bg-white px-3 py-1 text-left cursor-pointer ${isExist ? "group-by-checked font-semibold" : "hover:!bg-[rgba(0,0,0,0.08)]"}`,
-                children: [
-                  isExist && /* @__PURE__ */ jsx54(CheckIcon, {}),
-                  /* @__PURE__ */ jsx54("span", { className: "text-sm", children: item?.string })
-                ]
-              },
-              "groupby-" + index4 + 1
-            );
-          })
-        ] })
-      ]
+                  "groupby-" + index4 + 1
+                );
+              })
+            ] })
+          ]
+        }
+      )
     }
-  ) });
+  );
 };
 
 // src/widgets/advanced/search/search-item/index.tsx
@@ -31816,7 +31828,7 @@ var DateField = (props) => {
       isForm2 && /* @__PURE__ */ jsx79(CalandarIcon, {})
     ] })
   );
-  if (!isForm) {
+  if (!isForm && !isEditTable) {
     return /* @__PURE__ */ jsx79("span", { children: value && (0, import_moment2.default)(value).isValid() ? (0, import_moment2.default)(value).add(7, "hours").format(formatDate2) : "" });
   } else {
     return /* @__PURE__ */ jsx79(
@@ -33151,15 +33163,8 @@ var SelectDropdownField = (props) => {
     value: val[0],
     label: val[1]
   })) : [];
-  if (!isForm) {
-    const value2 = options2?.find((item) => item?.value === value2)?.label;
-    return value2 && /* @__PURE__ */ jsx97(
-      "span",
-      {
-        className: `${props.className} px-2 py-1 rounded border text-xs font-medium leading-[16px]`,
-        children: value2
-      }
-    );
+  if (!isForm && !isEditTable) {
+    return /* @__PURE__ */ jsx97("span", { children: options2?.find((item) => item?.value === value)?.label });
   } else {
     return /* @__PURE__ */ jsx97(
       Controller,
@@ -33200,20 +33205,43 @@ var SelectDropdownField = (props) => {
               StateManagedSelect$1,
               {
                 ...commonProps,
-                classNames: isEditTable ? {
-                  control: () => `w-full flex ring-0 cursor-pointer outline-0 !shadow-none p-2 pl-3 text-sm text-[#1A1A1B] font-normal gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content border border-transparent border-b border-[#f7f7f7] hover:border-b-primary ${readonly ? "!cursor-not-allowed" : ""}`,
-                  valueContainer: () => "!m-0 !p-0",
-                  singleValue: () => `!m-0 ${readonly ? "!text-[#5c5a5a]" : ""}`,
-                  input: () => "!m-0 !p-0",
-                  dropdownIndicator: () => "invisible group-hover:visible !m-0 !p-0",
-                  clearIndicator: () => "invisible group-hover:visible !m-0 !p-0"
-                } : {
-                  control: ({ isFocused }) => `w-full flex min-h-[44px] ring-0 cursor-pointer outline-0 !bg-white !shadow-none !rounded-[8px] p-2 pl-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content ${isFocused ? "!border-[1px] border-primary !ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]"} `,
-                  valueContainer: () => "!m-0 !p-0",
-                  singleValue: () => `!m-0 ${readonly ? "!text-[#5c5a5a]" : ""}`,
-                  input: () => "!m-0 !p-0",
-                  dropdownIndicator: () => "!m-0 !p-0"
+                styles: {
+                  control: (base, state) => ({
+                    ...base,
+                    display: "flex",
+                    minHeight: "44px",
+                    cursor: readonly ? "not-allowed" : "pointer",
+                    backgroundColor: "#f7f7f7",
+                    borderRadius: isEditTable ? "0px" : "10px",
+                    padding: "4px 0px",
+                    border: isForm ? state.isFocused ? "1px solid var(--primary)" : "1px solid transparent" : "none",
+                    boxShadow: "none",
+                    "&:hover": {
+                      borderColor: "var(--primary)"
+                    },
+                    ...isEditTable && {
+                      minWidth: "300px",
+                      maxWidth: "300px",
+                      borderBottom: "1px solid transparent",
+                      background: "transparent"
+                    }
+                  }),
+                  clearIndicator: (base) => ({
+                    ...base,
+                    padding: "0"
+                  }),
+                  menuPortal: (base) => ({
+                    ...base,
+                    zIndex: 9999
+                  }),
+                  menu: (base) => ({
+                    ...base,
+                    zIndex: 9999,
+                    width: isEditTable ? "300px" : "100%",
+                    minWidth: isEditTable ? "300px" : "100%"
+                  })
                 },
+                menuPortalTarget: typeof window !== "undefined" ? document.body : null,
                 components: {
                   IndicatorSeparator: () => null,
                   DropdownIndicator: (props2) => readonly || !isEditTable ? null : /* @__PURE__ */ jsx97(components.DropdownIndicator, { ...props2 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fctc/sme-widget-ui",
-  "version": "1.0.8",
+  "version": "1.1.0",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -64,7 +64,7 @@
     "react-select": "^5.10.1",
     "react-toastify": "^11.0.5",
     "react-tooltip": "^5.28.0",
-    "tailwindcss": "3.4.3",
+    "tailwindcss": "^3",
     "tsup": "^8.0.0",
     "typescript": "^5.8.2"
   }

package/dist/.babelrc

@@ -1,7 +0,0 @@
-{
-  "presets": [
-    "@babel/preset-env",
-    "@babel/preset-react",
-    "@babel/preset-typescript"
-  ]
-}

package/dist/.editorconfig

@@ -1,10 +0,0 @@
-root = true
-
-[*]
-end_of_line = lf
-insert_final_newline = true
-
-[*.{js,json,yml}]
-charset = utf-8
-indent_style = space
-indent_size = 2

package/dist/.eslintignore

@@ -1,6 +0,0 @@
-dist
-.cache
-package-lock.json
-public
-node_modules
-yarn.lock