@fctc/sme-widget-ui 2.7.4 → 2.7.6

package/dist/index.mjs

@@ -15654,38 +15654,123 @@ 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 jsx63, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx64, jsxs as jsxs40 } from "react/jsx-runtime";
 var TagSearch = ({
   removeSearchItems,
   selectedTags,
   filterBy,
-  setFilterBy,
-  setGroupBy
+  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__ */ jsxs39(
+        return /* @__PURE__ */ jsxs40(
           "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(
+              /* @__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",
@@ -15702,7 +15787,7 @@ var TagSearch = ({
                       );
                     }
                   },
-                  children: /* @__PURE__ */ jsx63(CloseIcon, { className: "size-4 cursor-pointer" })
+                  children: /* @__PURE__ */ jsx64(CloseIcon, { className: "size-4 cursor-pointer" })
                 }
               )
             ]
@@ -15710,41 +15795,35 @@ var TagSearch = ({
           "selected-tag-" + index4
         );
       } else if (tag?.type === "group_by") {
-        return /* @__PURE__ */ jsx63(
+        return /* @__PURE__ */ jsx64(
           "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(
+            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__ */ 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__ */ 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__ */ jsx63(
+                    /* @__PURE__ */ jsx64(
                       "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" })
+                        children: /* @__PURE__ */ jsx64(CloseIcon, { className: "size-4 cursor-pointer" })
                       }
                     )
                   ]
@@ -15760,75 +15839,6 @@ var TagSearch = ({
   });
 };
 
-// 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 = ({
@@ -15853,7 +15863,11 @@ var Search = ({
   selectedRowKeys,
   domainSearch,
   evalJSONContext,
-  clearSearch
+  clearSearch,
+  onKeyDown,
+  handleMouseEnter,
+  handleMouseLeave,
+  hoveredIndexSearchList
 }) => {
   const { t: t3 } = useI18n();
   const [showPopupFilter, setShowPopupFilter] = useState5(false);
@@ -15951,60 +15965,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/dist/widgets.css

@@ -1,10 +1,10 @@
 @charset "UTF-8";
+@import "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";
 
 /* src/index.css */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-@import url(https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap);
 * {
   font-family: "Inter", sans-serif;
 }

package/dist/widgets.d.mts

@@ -136,7 +136,7 @@ declare const EmptyTable: () => JSX.Element;
 
 declare const Login: React__default.FC<LoginProps>;
 
-declare const Search: ({ removeSearchItems, selectedTags, filterBy, setFilterBy, searchString, onSearchString, handleAddTagSearch, searchBy, groupBy, showFiltersGroups, setGroupBy, setSelectedRowKeys, setDomainList, setPage, fieldsList, viewData, context, aid, selectedRowKeys, domainSearch, evalJSONContext, clearSearch, }: any) => JSX.Element;
+declare const Search: ({ removeSearchItems, selectedTags, filterBy, setFilterBy, searchString, onSearchString, handleAddTagSearch, searchBy, groupBy, showFiltersGroups, setGroupBy, setSelectedRowKeys, setDomainList, setPage, fieldsList, viewData, context, aid, selectedRowKeys, domainSearch, evalJSONContext, clearSearch, onKeyDown, handleMouseEnter, handleMouseLeave, hoveredIndexSearchList, }: any) => JSX.Element;
 
 interface IActiveBadgeProps extends IInputFieldProps {
     type: any;

package/dist/widgets.d.ts

@@ -136,7 +136,7 @@ declare const EmptyTable: () => JSX.Element;
 
 declare const Login: React__default.FC<LoginProps>;
 
-declare const Search: ({ removeSearchItems, selectedTags, filterBy, setFilterBy, searchString, onSearchString, handleAddTagSearch, searchBy, groupBy, showFiltersGroups, setGroupBy, setSelectedRowKeys, setDomainList, setPage, fieldsList, viewData, context, aid, selectedRowKeys, domainSearch, evalJSONContext, clearSearch, }: any) => JSX.Element;
+declare const Search: ({ removeSearchItems, selectedTags, filterBy, setFilterBy, searchString, onSearchString, handleAddTagSearch, searchBy, groupBy, showFiltersGroups, setGroupBy, setSelectedRowKeys, setDomainList, setPage, fieldsList, viewData, context, aid, selectedRowKeys, domainSearch, evalJSONContext, clearSearch, onKeyDown, handleMouseEnter, handleMouseLeave, hoveredIndexSearchList, }: any) => JSX.Element;
 
 interface IActiveBadgeProps extends IInputFieldProps {
     type: any;