@fctc/sme-widget-ui 2.7.4 → 2.7.5

package/dist/widgets.js

@@ -14681,7 +14681,7 @@ var PopupFilter = ({
         right: 0,
         zIndex: 33
       },
-      className: "popup-filter w-full overflow-x-auto rounded-lg border border-[var(--stroke-default)] bg-white shadow-xl",
+      className: "popup-filter w-full overflow-x-auto rounded-lg border bg-white border-none shadow-xl",
       children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
         "div",
         {
@@ -14786,8 +14786,191 @@ var PopupFilter = ({
 // src/widgets/advanced/search/search-item/index.tsx
 var import_react21 = require("react");
 
-// src/hooks/use-click-outside.ts
+// src/widgets/advanced/search/search-list/index.tsx
+var import_jsx_runtime63 = require("react/jsx-runtime");
+var SearchList = ({
+  handleAddTagSearch,
+  handleMouseEnter,
+  handleMouseLeave,
+  searchBy,
+  searchString,
+  hoveredIndexSearchList
+}) => {
+  const { t: t3 } = useI18n();
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: "calc(100% + 5px)",
+        left: 0,
+        right: 0,
+        zIndex: 31
+      },
+      className: `${searchString === "" ? "hidden" : "block"}  w-full overflow-x-auto rounded-[0.25rem] border-none bg-white shadow-lg`,
+      children: searchBy?.map((searchItem, index4) => {
+        if (searchItem?.type === "date" || searchItem?.type === "datetime") {
+          if (!validateAndParseDate(searchString, searchItem?.type === "datetime"))
+            return;
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+          "button",
+          {
+            onClick: () => {
+              typeof handleAddTagSearch === "function" && handleAddTagSearch({
+                title: searchItem?.title,
+                name: searchItem?.name,
+                value: searchString,
+                domain: searchItem?.filter_domain,
+                operator: searchItem?.operator,
+                type: SearchType.SEARCH,
+                modelType: searchItem?.type,
+                widget: searchItem?.widget,
+                dataIndex: searchItem?.dataIndex
+              });
+            },
+            onMouseEnter: () => typeof handleMouseEnter === "function" && handleMouseEnter(index4),
+            onMouseLeave: () => typeof handleMouseLeave === "function" && handleMouseLeave(),
+            style: {
+              display: "block",
+              width: "100%",
+              cursor: "pointer",
+              whiteSpace: "nowrap",
+              padding: "2px 12px",
+              paddingTop: "4px",
+              paddingBottom: "4px",
+              textAlign: "left",
+              transitionDuration: "0ms",
+              backgroundColor: hoveredIndexSearchList === index4 ? "rgba(0,0,0,0.08)" : "white",
+              fontSize: "14px"
+            },
+            children: [
+              t3("search"),
+              " ",
+              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "font-bold", children: searchItem?.title }),
+              " ",
+              t3("for"),
+              ":",
+              " ",
+              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "custom-input-result text-primary font-bold italic", children: searchString })
+            ]
+          },
+          "header-" + index4 + 1
+        );
+      })
+    }
+  );
+};
+
+// src/widgets/advanced/search/tag-search/index.tsx
 var import_react18 = require("react");
+var import_jsx_runtime64 = require("react/jsx-runtime");
+var TagSearch = ({
+  removeSearchItems,
+  selectedTags,
+  filterBy,
+  setFilterBy
+}) => {
+  const { t: t3 } = useI18n();
+  return selectedTags?.length > 0 && selectedTags?.map((tag, index4) => {
+    if (tag?.values?.length > 0) {
+      if (tag?.type !== "group_by") {
+        return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
+          "div",
+          {
+            className: "flex min-h-full overflow-hidden rounded bg-[#E9ECEF] hover:shadow-xl",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "bg-primary flex items-center justify-center px-2 text-sm font-semibold leading-[1.5] text-white", children: tag?.type === SearchType.SEARCH ? tag?.title : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(FilterIcon, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+                "div",
+                {
+                  style: {
+                    paddingLeft: "8px"
+                  },
+                  className: "align-middle text-[#495057] text-[14px]",
+                  children: tag.values.map((value, idx) => {
+                    return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_react18.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { children: value }),
+                      idx < tag.values.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("span", { className: "text-sm italic text-[#495057] text-opacity-50", children: [
+                        " ",
+                        t3("or"),
+                        " "
+                      ] })
+                    ] }, idx);
+                  })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+                "button",
+                {
+                  className: "px-2 text-sm font-bold",
+                  onClick: () => {
+                    typeof removeSearchItems === "function" && removeSearchItems(
+                      tag?.type === SearchType.FILTER ? `${SearchType.FILTER}_${tag?.name}` : tag?.name
+                    );
+                    if (tag?.type === SearchType.FILTER) {
+                      setFilterBy(
+                        filterBy?.map((item) => ({
+                          ...item,
+                          active: false
+                        }))
+                      );
+                    }
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(CloseIcon, { className: "size-4 cursor-pointer" })
+                }
+              )
+            ]
+          },
+          "selected-tag-" + index4
+        );
+      } else if (tag?.type === "group_by") {
+        return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+          "div",
+          {
+            className: "flex min-h-full overflow-hidden",
+            children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "flex flex-wrap items-center gap-2 align-middle text-[#495057] text-[14px]", children: tag?.values?.length > 0 && tag?.values.map(
+              (value, indexValue) => value?.strings?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
+                "div",
+                {
+                  className: "flex gap-2 overflow-hidden rounded bg-[#E9ECEF] hover:shadow-xl",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "bg-primary flex items-center justify-center px-2 text-sm font-semibold leading-[1.5] text-white", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(GroupByIcon, {}) }),
+                    value?.strings?.map((string, idx) => /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_jsx_runtime64.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { children: string }),
+                      idx < value?.strings.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("span", { className: "text-sm italic text-[#495057] text-opacity-50", children: [
+                        " ",
+                        "> ",
+                        " "
+                      ] })
+                    ] })),
+                    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+                      "button",
+                      {
+                        className: "pr-2 text-sm font-bold",
+                        onClick: () => {
+                          if (tag?.type === SearchType.GROUP) {
+                            typeof removeSearchItems === "function" && removeSearchItems(`${SearchType.GROUP}`);
+                          }
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(CloseIcon, { className: "size-4 cursor-pointer" })
+                      }
+                    )
+                  ]
+                },
+                `group-by-${index4}-${indexValue}`
+              )
+            ) })
+          },
+          "selected-tag-" + index4
+        );
+      }
+    }
+  });
+};
+
+// src/hooks/use-click-outside.ts
+var import_react19 = require("react");
 var DEFAULT_EVENTS = ["mousedown", "touchstart"];
 var useClickOutside = ({
   handler,
@@ -14796,8 +14979,8 @@ var useClickOutside = ({
   // Default to empty array to avoid undefined errors
   refs
 }) => {
-  const ref = (0, import_react18.useRef)(null);
-  (0, import_react18.useEffect)(() => {
+  const ref = (0, import_react19.useRef)(null);
+  (0, import_react19.useEffect)(() => {
     const listener = (event) => {
       const { target } = event;
       if (refs && refs?.length > 0 && refs?.some((r4) => r4.current?.contains(target))) {
@@ -14819,7 +15002,7 @@ var useClickOutside = ({
 };
 
 // src/hooks/use-get-file-infor.ts
-var import_react19 = require("react");
+var import_react20 = require("react");
 function getFileName(source, mime) {
   if (source instanceof File) return source.name;
   if (typeof source === "string") {
@@ -14840,11 +15023,11 @@ function getFileName(source, mime) {
 }
 function useFileInfo(source, options2) {
   const { readAs = "all" } = options2 ?? {};
-  const [info, setInfo] = (0, import_react19.useState)(null);
-  const [loading, setLoading] = (0, import_react19.useState)(false);
-  const [error2, setError] = (0, import_react19.useState)(null);
-  const abortRef = (0, import_react19.useRef)({ aborted: false });
-  (0, import_react19.useEffect)(() => {
+  const [info, setInfo] = (0, import_react20.useState)(null);
+  const [loading, setLoading] = (0, import_react20.useState)(false);
+  const [error2, setError] = (0, import_react20.useState)(null);
+  const abortRef = (0, import_react20.useRef)({ aborted: false });
+  (0, import_react20.useEffect)(() => {
     abortRef.current.aborted = false;
     if (!source) {
       setInfo(null);
@@ -15032,179 +15215,6 @@ function useFileInfo(source, options2) {
   } };
 }
 
-// src/widgets/advanced/search/tag-search/index.tsx
-var import_react20 = require("react");
-var import_jsx_runtime63 = require("react/jsx-runtime");
-var TagSearch = ({
-  removeSearchItems,
-  selectedTags,
-  filterBy,
-  setFilterBy,
-  setGroupBy
-}) => {
-  return selectedTags?.length > 0 && selectedTags?.map((tag, index4) => {
-    if (tag?.values?.length > 0) {
-      if (tag?.type !== "group_by") {
-        return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
-          "div",
-          {
-            className: "flex min-h-full overflow-hidden rounded bg-[#E9ECEF] hover:shadow-xl",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "bg-primary flex items-center justify-center px-2 text-sm font-semibold leading-[1.5] text-white", children: tag?.type === SearchType.SEARCH ? tag?.title : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(FilterIcon, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "pl-2 align-middle text-[#495057] text-[14px]", children: tag.values.map((value, idx) => {
-                return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_react20.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { children: value }),
-                  idx < tag.values.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("span", { className: "text-sm italic text-[#495057] text-opacity-50", children: [
-                    " ",
-                    instance.t("or"),
-                    " "
-                  ] })
-                ] }, idx);
-              }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-                "button",
-                {
-                  className: "px-2 text-sm font-bold",
-                  onClick: () => {
-                    typeof removeSearchItems === "function" && removeSearchItems(
-                      tag?.type === SearchType.FILTER ? `${SearchType.FILTER}_${tag?.name}` : tag?.name
-                    );
-                    if (tag?.type === SearchType.FILTER) {
-                      setFilterBy(
-                        filterBy?.map((item) => ({
-                          ...item,
-                          active: false
-                        }))
-                      );
-                    }
-                  },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(CloseIcon, { className: "size-4 cursor-pointer" })
-                }
-              )
-            ]
-          },
-          "selected-tag-" + index4
-        );
-      } else if (tag?.type === "group_by") {
-        return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-          "div",
-          {
-            className: "flex min-h-full overflow-hidden",
-            children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "flex flex-wrap items-center gap-2 align-middle text-[#495057] text-[14px]", children: tag?.values?.length > 0 && tag?.values.map(
-              (value, indexValue) => value?.strings?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
-                "div",
-                {
-                  className: "flex gap-2 overflow-hidden rounded bg-[#E9ECEF] hover:shadow-xl",
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "bg-primary flex items-center justify-center px-2 text-sm font-semibold leading-[1.5] text-white", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(GroupByIcon, {}) }),
-                    value?.strings?.map((string, idx) => /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { children: string }),
-                      idx < value?.strings.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("span", { className: "text-sm italic text-[#495057] text-opacity-50", children: [
-                        " ",
-                        "> ",
-                        " "
-                      ] })
-                    ] })),
-                    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-                      "button",
-                      {
-                        className: "pr-2 text-sm font-bold",
-                        onClick: () => {
-                          if (tag?.type === SearchType.GROUP) {
-                            typeof removeSearchItems === "function" && removeSearchItems(`${SearchType.GROUP}`);
-                            setGroupBy(
-                              (prev2) => prev2?.map((item) => ({
-                                ...item,
-                                active: false
-                              }))
-                            );
-                          }
-                        },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(CloseIcon, { className: "size-4 cursor-pointer" })
-                      }
-                    )
-                  ]
-                },
-                `group-by-${index4}-${indexValue}`
-              )
-            ) })
-          },
-          "selected-tag-" + index4
-        );
-      }
-    }
-  });
-};
-
-// src/widgets/advanced/search/search-list/index.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
-var SearchList = ({
-  handleAddTagSearch,
-  handleMouseEnter,
-  handleMouseLeave,
-  searchBy,
-  searchString,
-  hoveredIndexSearchList
-}) => {
-  const { t: t3 } = useI18n();
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
-    "div",
-    {
-      style: {
-        top: "calc(100% + 3px)"
-      },
-      className: `${searchString === "" ? "hidden" : "block"} absolute left-0 right-0 top-[calc(100%_+_3px)] z-[31] w-full overflow-x-auto rounded-[0.25rem] border-none bg-white shadow-lg`,
-      children: searchBy?.map((searchItem, index4) => {
-        if (searchItem?.type === "date" || searchItem?.type === "datetime") {
-          if (!validateAndParseDate(searchString, searchItem?.type === "datetime"))
-            return;
-        }
-        return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
-          "button",
-          {
-            onClick: () => {
-              typeof handleAddTagSearch === "function" && handleAddTagSearch({
-                title: searchItem?.title,
-                name: searchItem?.name,
-                value: searchString,
-                domain: searchItem?.filter_domain,
-                operator: searchItem?.operator,
-                type: SearchType.SEARCH,
-                modelType: searchItem?.type,
-                widget: searchItem?.widget,
-                dataIndex: searchItem?.dataIndex
-              });
-            },
-            onMouseEnter: () => typeof handleMouseEnter === "function" && handleMouseEnter(index4),
-            onMouseLeave: () => typeof handleMouseLeave === "function" && handleMouseLeave(),
-            className: `block w-full cursor-pointer whitespace-nowrap p-2 px-3 py-1 text-left !duration-0 hover:!bg-[rgba(0,0,0,0.08)] hover:text-inherit text-sm ${hoveredIndexSearchList === index4 ? "bg-[rgba(0,0,0,0.08)]" : "bg-white"}`,
-            children: [
-              t3("search"),
-              " ",
-              /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "font-bold", children: searchItem?.title }),
-              " ",
-              t3("for"),
-              ":",
-              " ",
-              /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
-                "span",
-                {
-                  style: {
-                    color: "var(--color-primary)"
-                  },
-                  className: "custom-input-result text-primary font-bold italic",
-                  children: searchString
-                }
-              )
-            ]
-          },
-          "header-" + index4 + 1
-        );
-      })
-    }
-  );
-};
-
 // src/widgets/advanced/search/search-item/index.tsx
 var import_jsx_runtime65 = require("react/jsx-runtime");
 var Search = ({
@@ -15229,7 +15239,11 @@ var Search = ({
   selectedRowKeys,
   domainSearch,
   evalJSONContext,
-  clearSearch
+  clearSearch,
+  onKeyDown,
+  handleMouseEnter,
+  handleMouseLeave,
+  hoveredIndexSearchList
 }) => {
   const { t: t3 } = useI18n();
   const [showPopupFilter, setShowPopupFilter] = (0, import_react21.useState)(false);
@@ -15266,9 +15280,8 @@ var Search = ({
     const searchDefaults = Object.entries(context || {}).filter(
       ([key]) => key.startsWith("search_default_")
     );
-    const defaultGroupBy = context ? Object.entries(context).filter(([key]) => key.includes("group_by")) : [];
     const hasGroupBy = viewData?.views?.search?.filters_by?.length > 0;
-    if (searchDefaults.length === 0 && !hasGroupBy && defaultGroupBy?.length === 0) {
+    if (searchDefaults.length === 0 && !hasGroupBy) {
       setIsReadyFormatDomain(true);
       setDidInit(true);
       return;
@@ -15289,23 +15302,7 @@ var Search = ({
       }
       return item;
     });
-    const updatedGroupBy = groupBy?.map((item) => {
-      const defaultGroupByItem = defaultGroupBy.find(
-        ([_2, value]) => item?.context?.includes(value)
-      );
-      if (defaultGroupByItem && typeof handleAddTagSearch == "function") {
-        handleAddTagSearch({
-          name: item?.name,
-          value: item?.string,
-          type: SearchType.GROUP,
-          context: JSON.parse(item?.context.replace(/'/g, '"'))
-        });
-        return { ...item, active: true };
-      }
-      return item;
-    });
     if (updatedFilter) setFilterBy(updatedFilter);
-    if (updatedGroupBy) setGroupBy(updatedGroupBy);
     if (hasGroupBy) {
       viewData?.views?.search?.filters_by?.forEach((item, idx) => {
         const groupCtx = evalJSONContext(item?.context);
@@ -15327,60 +15324,68 @@ var Search = ({
     "div",
     {
       ref: popupFilterRef,
-      className: `search gap-[8px] p-2 items-center flex !order-3 xl:!order-2 bg-white custom-search-input relative flex-1 xl:min-w-[480px] xl:flex-1 rounded-[10px] shadow-[0px_1px_3px_rgba(16,24,40,0.1),0px_1px_2px_rgba(16,24,40,0.06)] min-h-[40px] border border-[var(--stroke-default)]`,
+      className: `search ${selectedRowKeys?.length <= 0 ? "flex" : "hidden"} bg-white custom-search-input py-[8px] px-[16px] relative items-center w-full flex-1  xl:flex-1 rounded-[10px] bg-grey-100 shadow-[0px_1px_3px_rgba(16,24,40,0.1),0px_1px_2px_rgba(16,24,40,0.06)] min-h-[40px] border border-[#F2F2F2]`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "size-5", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(SearchIcon, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex flex-1 flex-wrap items-center gap-[8px]", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-            TagSearch,
-            {
-              removeSearchItems,
-              selectedTags,
-              filterBy,
-              setFilterBy,
-              setGroupBy
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-            "input",
-            {
-              value: searchString,
-              className: "h-5 w-fit flex-1 border-none bg-transparent outline-none min-w-[50px] text-sm",
-              placeholder: t3("search..."),
-              onChange: (e3) => {
-                onSearchString(e3.target.value);
-                setShowPopupFilter(false);
-              },
-              onKeyUp: (e3) => e3.preventDefault()
-            }
-          ),
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+          "div",
+          {
+            className: `relative flex md:min-w-[400px] max-w-full items-center gap-[8px] w-full ${(showFiltersGroups || filterBy?.length > 0 || groupBy?.length > 0) && "border-r border-[rgba(242,242,242,1)]"}`,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "min-h-5 min-w-5", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(SearchIcon, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex flex-1 flex-wrap items-center gap-[8px]", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+                  TagSearch,
+                  {
+                    removeSearchItems,
+                    selectedTags,
+                    filterBy,
+                    setFilterBy
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+                  "input",
+                  {
+                    value: searchString,
+                    className: "min-h-[25px] w-fit flex-1 border-none bg-transparent outline-none min-w-[50px] text-sm",
+                    placeholder: t3("search..."),
+                    onChange: (e3) => {
+                      onSearchString(e3.target.value);
+                      setShowPopupFilter(false);
+                    },
+                    onKeyDown,
+                    onKeyUp: (e3) => e3.preventDefault()
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+                  SearchList,
+                  {
+                    handleAddTagSearch,
+                    searchBy,
+                    searchString,
+                    handleMouseEnter,
+                    handleMouseLeave,
+                    hoveredIndexSearchList
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        (showFiltersGroups || filterBy?.length > 0 || groupBy?.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-            SearchList,
-            {
-              handleAddTagSearch,
-              searchBy,
-              searchString
-            }
-          )
-        ] }),
-        showFiltersGroups && /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
             "div",
             {
-              className: `flex h-full gap-2 cursor-pointer items-center justify-center max-w-fit`,
+              className: `flex h-full cursor-pointer items-center justify-center px-[10px] max-w-fit`,
               onClick: (e3) => {
                 e3.stopPropagation();
                 setShowPopupFilter((prev2) => !prev2);
               },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "w-[1px] h-[28px] bg-[var(--stroke-default)]" }),
-                /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-                  ChevronBottomIcon,
-                  {
-                    className: `h-5 w-5 min-w-fit transition-all ${showPopupFilter ? "rotate-180 " : ""}`
-                  }
-                )
-              ]
+              children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("button", { className: "w-max cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+                ChevronBottomIcon,
+                {
+                  className: `h-5 w-5 min-w-fit transition-all ${showPopupFilter ? "rotate-180 " : ""}`
+                }
+              ) })
             }
           ),
           showPopupFilter && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(