@fctc/sme-widget-ui 2.7.4 → 2.7.6

package/dist/widgets.mjs

@@ -14721,7 +14721,190 @@ var PopupFilter = ({
 };
 
 // src/widgets/advanced/search/search-item/index.tsx
-import { useEffect as useEffect7, useState as useState5 } from "react";
+import { useState as useState5, useEffect as useEffect7 } from "react";
+
+// src/widgets/advanced/search/search-list/index.tsx
+import { jsx as jsx63, jsxs as jsxs39 } from "react/jsx-runtime";
+var SearchList = ({
+  handleAddTagSearch,
+  handleMouseEnter,
+  handleMouseLeave,
+  searchBy,
+  searchString,
+  hoveredIndexSearchList
+}) => {
+  const { t: t3 } = useI18n();
+  return /* @__PURE__ */ jsx63(
+    "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__ */ jsxs39(
+          "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__ */ jsx63("span", { className: "font-bold", children: searchItem?.title }),
+              " ",
+              t3("for"),
+              ":",
+              " ",
+              /* @__PURE__ */ jsx63("span", { className: "custom-input-result text-primary font-bold italic", children: searchString })
+            ]
+          },
+          "header-" + index4 + 1
+        );
+      })
+    }
+  );
+};
+
+// src/widgets/advanced/search/tag-search/index.tsx
+import { Fragment as Fragment8 } from "react";
+import { Fragment as Fragment9, jsx as jsx64, jsxs as jsxs40 } from "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__ */ jsxs40(
+          "div",
+          {
+            className: "flex min-h-full overflow-hidden rounded bg-[#E9ECEF] hover:shadow-xl",
+            children: [
+              /* @__PURE__ */ jsx64("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__ */ jsx64(FilterIcon, {}) }),
+              /* @__PURE__ */ jsx64(
+                "div",
+                {
+                  style: {
+                    paddingLeft: "8px"
+                  },
+                  className: "align-middle text-[#495057] text-[14px]",
+                  children: tag.values.map((value, idx) => {
+                    return /* @__PURE__ */ jsxs40(Fragment8, { children: [
+                      /* @__PURE__ */ jsx64("span", { children: value }),
+                      idx < tag.values.length - 1 && /* @__PURE__ */ jsxs40("span", { className: "text-sm italic text-[#495057] text-opacity-50", children: [
+                        " ",
+                        t3("or"),
+                        " "
+                      ] })
+                    ] }, idx);
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsx64(
+                "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__ */ jsx64(CloseIcon, { className: "size-4 cursor-pointer" })
+                }
+              )
+            ]
+          },
+          "selected-tag-" + index4
+        );
+      } else if (tag?.type === "group_by") {
+        return /* @__PURE__ */ jsx64(
+          "div",
+          {
+            className: "flex min-h-full overflow-hidden",
+            children: /* @__PURE__ */ jsx64("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__ */ jsxs40(
+                "div",
+                {
+                  className: "flex gap-2 overflow-hidden rounded bg-[#E9ECEF] hover:shadow-xl",
+                  children: [
+                    /* @__PURE__ */ jsx64("div", { className: "bg-primary flex items-center justify-center px-2 text-sm font-semibold leading-[1.5] text-white", children: /* @__PURE__ */ jsx64(GroupByIcon, {}) }),
+                    value?.strings?.map((string, idx) => /* @__PURE__ */ jsxs40(Fragment9, { children: [
+                      /* @__PURE__ */ jsx64("span", { children: string }),
+                      idx < value?.strings.length - 1 && /* @__PURE__ */ jsxs40("span", { className: "text-sm italic text-[#495057] text-opacity-50", children: [
+                        " ",
+                        "> ",
+                        " "
+                      ] })
+                    ] })),
+                    /* @__PURE__ */ jsx64(
+                      "button",
+                      {
+                        className: "pr-2 text-sm font-bold",
+                        onClick: () => {
+                          if (tag?.type === SearchType.GROUP) {
+                            typeof removeSearchItems === "function" && removeSearchItems(`${SearchType.GROUP}`);
+                          }
+                        },
+                        children: /* @__PURE__ */ jsx64(CloseIcon, { className: "size-4 cursor-pointer" })
+                      }
+                    )
+                  ]
+                },
+                `group-by-${index4}-${indexValue}`
+              )
+            ) })
+          },
+          "selected-tag-" + index4
+        );
+      }
+    }
+  });
+};
 
 // src/hooks/use-click-outside.ts
 import { useEffect as useEffect5, useRef as useRef3 } from "react";
@@ -14969,179 +15152,6 @@ function useFileInfo(source, options2) {
   } };
 }
 
-// src/widgets/advanced/search/tag-search/index.tsx
-import { Fragment as Fragment8 } from "react";
-import { Fragment as Fragment9, jsx as jsx63, jsxs as jsxs39 } from "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__ */ jsxs39(
-          "div",
-          {
-            className: "flex min-h-full overflow-hidden rounded bg-[#E9ECEF] hover:shadow-xl",
-            children: [
-              /* @__PURE__ */ jsx63("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__ */ jsx63(FilterIcon, {}) }),
-              /* @__PURE__ */ jsx63("div", { className: "pl-2 align-middle text-[#495057] text-[14px]", children: tag.values.map((value, idx) => {
-                return /* @__PURE__ */ jsxs39(Fragment8, { children: [
-                  /* @__PURE__ */ jsx63("span", { children: value }),
-                  idx < tag.values.length - 1 && /* @__PURE__ */ jsxs39("span", { className: "text-sm italic text-[#495057] text-opacity-50", children: [
-                    " ",
-                    instance.t("or"),
-                    " "
-                  ] })
-                ] }, idx);
-              }) }),
-              /* @__PURE__ */ jsx63(
-                "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__ */ jsx63(CloseIcon, { className: "size-4 cursor-pointer" })
-                }
-              )
-            ]
-          },
-          "selected-tag-" + index4
-        );
-      } else if (tag?.type === "group_by") {
-        return /* @__PURE__ */ jsx63(
-          "div",
-          {
-            className: "flex min-h-full overflow-hidden",
-            children: /* @__PURE__ */ jsx63("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__ */ jsxs39(
-                "div",
-                {
-                  className: "flex gap-2 overflow-hidden rounded bg-[#E9ECEF] hover:shadow-xl",
-                  children: [
-                    /* @__PURE__ */ jsx63("div", { className: "bg-primary flex items-center justify-center px-2 text-sm font-semibold leading-[1.5] text-white", children: /* @__PURE__ */ jsx63(GroupByIcon, {}) }),
-                    value?.strings?.map((string, idx) => /* @__PURE__ */ jsxs39(Fragment9, { children: [
-                      /* @__PURE__ */ jsx63("span", { children: string }),
-                      idx < value?.strings.length - 1 && /* @__PURE__ */ jsxs39("span", { className: "text-sm italic text-[#495057] text-opacity-50", children: [
-                        " ",
-                        "> ",
-                        " "
-                      ] })
-                    ] })),
-                    /* @__PURE__ */ jsx63(
-                      "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__ */ jsx63(CloseIcon, { className: "size-4 cursor-pointer" })
-                      }
-                    )
-                  ]
-                },
-                `group-by-${index4}-${indexValue}`
-              )
-            ) })
-          },
-          "selected-tag-" + index4
-        );
-      }
-    }
-  });
-};
-
-// src/widgets/advanced/search/search-list/index.tsx
-import { jsx as jsx64, jsxs as jsxs40 } from "react/jsx-runtime";
-var SearchList = ({
-  handleAddTagSearch,
-  handleMouseEnter,
-  handleMouseLeave,
-  searchBy,
-  searchString,
-  hoveredIndexSearchList
-}) => {
-  const { t: t3 } = useI18n();
-  return /* @__PURE__ */ jsx64(
-    "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__ */ jsxs40(
-          "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__ */ jsx64("span", { className: "font-bold", children: searchItem?.title }),
-              " ",
-              t3("for"),
-              ":",
-              " ",
-              /* @__PURE__ */ jsx64(
-                "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
 import { Fragment as Fragment10, jsx as jsx65, jsxs as jsxs41 } from "react/jsx-runtime";
 var Search = ({
@@ -15166,7 +15176,11 @@ var Search = ({
   selectedRowKeys,
   domainSearch,
   evalJSONContext,
-  clearSearch
+  clearSearch,
+  onKeyDown,
+  handleMouseEnter,
+  handleMouseLeave,
+  hoveredIndexSearchList
 }) => {
   const { t: t3 } = useI18n();
   const [showPopupFilter, setShowPopupFilter] = useState5(false);
@@ -15264,60 +15278,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__ */ jsx65("div", { className: "size-5", children: /* @__PURE__ */ jsx65(SearchIcon, {}) }),
-        /* @__PURE__ */ jsxs41("div", { className: "flex flex-1 flex-wrap items-center gap-[8px]", children: [
-          /* @__PURE__ */ jsx65(
-            TagSearch,
-            {
-              removeSearchItems,
-              selectedTags,
-              filterBy,
-              setFilterBy,
-              setGroupBy
-            }
-          ),
-          /* @__PURE__ */ jsx65(
-            "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__ */ jsxs41(
+          "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__ */ jsx65("div", { className: "min-h-5 min-w-5", children: /* @__PURE__ */ jsx65(SearchIcon, {}) }),
+              /* @__PURE__ */ jsxs41("div", { className: "flex flex-1 flex-wrap items-center gap-[8px]", children: [
+                /* @__PURE__ */ jsx65(
+                  TagSearch,
+                  {
+                    removeSearchItems,
+                    selectedTags,
+                    filterBy,
+                    setFilterBy
+                  }
+                ),
+                /* @__PURE__ */ jsx65(
+                  "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__ */ jsx65(
+                  SearchList,
+                  {
+                    handleAddTagSearch,
+                    searchBy,
+                    searchString,
+                    handleMouseEnter,
+                    handleMouseLeave,
+                    hoveredIndexSearchList
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        (showFiltersGroups || filterBy?.length > 0 || groupBy?.length > 0) && /* @__PURE__ */ jsxs41(Fragment10, { children: [
           /* @__PURE__ */ jsx65(
-            SearchList,
-            {
-              handleAddTagSearch,
-              searchBy,
-              searchString
-            }
-          )
-        ] }),
-        showFiltersGroups && /* @__PURE__ */ jsxs41(Fragment10, { children: [
-          /* @__PURE__ */ jsxs41(
             "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__ */ jsx65("div", { className: "w-[1px] h-[28px] bg-[var(--stroke-default)]" }),
-                /* @__PURE__ */ jsx65(
-                  ChevronBottomIcon,
-                  {
-                    className: `h-5 w-5 min-w-fit transition-all ${showPopupFilter ? "rotate-180 " : ""}`
-                  }
-                )
-              ]
+              children: /* @__PURE__ */ jsx65("button", { className: "w-max cursor-pointer", children: /* @__PURE__ */ jsx65(
+                ChevronBottomIcon,
+                {
+                  className: `h-5 w-5 min-w-fit transition-all ${showPopupFilter ? "rotate-180 " : ""}`
+                }
+              ) })
             }
           ),
           showPopupFilter && /* @__PURE__ */ jsx65(

package/package.json

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