npm - @fctc/sme-widget-ui - Versions diffs - 1.2.3 → 1.2.4 - Mend

@fctc/sme-widget-ui 1.2.3 → 1.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/index.js CHANGED Viewed

@@ -12081,7 +12081,7 @@ var Row = (props) => {
   }, [row?.id, selectedRowKeys, checkedAll]);
   const handleCheckBoxSingle = (event) => {
     event.stopPropagation();
-    if (checkedAll && checkboxRef && checkboxRef.current) {
+    if (checkedAll) {
       checkboxRef.current = "uncheck";
       setIsAutoSelect(true);
       return;
@@ -12094,7 +12094,7 @@ var Row = (props) => {
   };
   (0, import_react11.useEffect)(() => {
     if (!row?.id) return;
-    if (isAutoSelect && checkboxRef && checkboxRef.current) {
+    if (isAutoSelect) {
       if (checkboxRef?.current === "uncheck") {
         const filtered = selectedRowKeysRef.current.filter(
           (id) => id !== row.id
@@ -12111,9 +12111,9 @@ var Row = (props) => {
     }
   }, [isAutoSelect]);
   (0, import_react11.useEffect)(() => {
-    if (!checkedAll && checkboxRef && checkboxRef.current) {
+    if (!checkedAll) {
       checkboxRef.current = "enabled";
-      false;
+      setIsAutoSelect(false);
     }
   }, [checkedAll]);
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
@@ -12312,7 +12312,7 @@ var TableFilter = ({ columns, onToggleColumnOptional }) => {
       style: {
         transform: "translateY(-50%)"
       },
-      className: "w-fit absolute top-[50%] translate-y-[-50%] right-[10px] ms-auto z-[32] bg-[#eff1f2]",
+      className: "w-fit absolute top-[50%] translate-y-[-50%] right-[10px] ms-auto z-[32] bg-white",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           "button",
@@ -12383,7 +12383,11 @@ var TableFilter = ({ columns, onToggleColumnOptional }) => {
             "div",
             {
               ref: filterPopupRef,
-              style: { top: filterPosition?.top, right: filterPosition?.right },
+              style: {
+                top: filterPosition?.top,
+                right: filterPosition?.right,
+                zIndex: 9999
+              },
               className: "absolute z-[9999] flex w-[250px] h-auto max-h-[800%] overflow-auto flex-col gap-[16px] rounded-[8px] bg-[#fff] px-[24px] py-[16px] shadow-md",
               children: columns?.filter((val) => val?.optional !== void 0)?.map((item) => {
                 return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-2", children: [
@@ -12489,7 +12493,7 @@ var TableHead = (props) => {
       style: {
         userSelect: "none",
         WebkitUserSelect: "none",
-        zIndex: 1,
+        zIndex: 10,
         position: "sticky",
         top: 0
       },
@@ -12528,7 +12532,7 @@ var TableHead = (props) => {
               minWidth: "40px",
               right: 0
             },
-            className: `column whitespace-nowrap text-left p-3 text-sm font-medium capitalize text-[#121212] min-w-[40px] sticky right-[0px] bg-[#eff1f2]`,
+            className: `column whitespace-nowrap text-left p-3 text-sm font-medium capitalize text-[#121212] min-w-[40px] sticky right-[0px] bg-white`,
             children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               TableFilter,
               {
@@ -15103,7 +15107,8 @@ var TagSearch = ({
   removeSearchItems,
   selectedTags,
   filterBy,
-  setFilterBy
+  setFilterBy,
+  setGroupBy
 }) => {
   return selectedTags?.length > 0 && selectedTags?.map((tag, index4) => {
     if (tag?.values?.length > 0) {
@@ -15175,6 +15180,12 @@ var TagSearch = ({
                         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_runtime56.jsx)(CloseIcon, { className: "size-4 cursor-pointer" })
@@ -15239,7 +15250,16 @@ var SearchList = ({
               instance.t("for"),
               ":",
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "custom-input-result text-primary font-bold italic", children: searchString })
+              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                "span",
+                {
+                  style: {
+                    color: "var(--color-primary)"
+                  },
+                  className: "custom-input-result text-primary font-bold italic",
+                  children: searchString
+                }
+              )
             ]
           },
           "header-" + index4 + 1
@@ -15295,6 +15315,8 @@ var Search = ({
     }
   }, [selectedTags, isReadyFormatDomain]);
   (0, import_react18.useEffect)(() => {
+    setDidInit(false);
+    setIsReadyFormatDomain(false);
     return () => {
       clearSearch();
       setDidInit(false);
@@ -15302,13 +15324,14 @@ var Search = ({
     };
   }, [aid]);
   (0, import_react18.useEffect)(() => {
-    if (!filterBy) return;
-    if (didInit || selectedTags?.length > 0) return;
+    if (!filterBy || !fieldsList || fieldsList?.length === 0) return;
+    if (didInit) return;
     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) {
+    if (searchDefaults.length === 0 && !hasGroupBy && defaultGroupBy?.length === 0) {
       setIsReadyFormatDomain(true);
       setDidInit(true);
       return;
@@ -15329,8 +15352,24 @@ 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 (hasGroupBy && fieldsList?.length > 0) {
+    if (updatedGroupBy) setGroupBy(updatedGroupBy);
+    if (hasGroupBy) {
       viewData?.views?.search?.filters_by?.forEach((item, idx) => {
         const groupCtx = evalJSONContext(item?.context);
         handleAddTagSearch?.({
@@ -15343,8 +15382,8 @@ var Search = ({
           fieldsGroup: fieldsList
         });
       });
-      setDidInit(true);
     }
+    setDidInit(true);
     setIsReadyFormatDomain(true);
   }, [aid, filterBy, fieldsList]);
   return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
@@ -15361,7 +15400,8 @@ var Search = ({
               removeSearchItems,
               selectedTags,
               filterBy,
-              setFilterBy
+              setFilterBy,
+              setGroupBy
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
@@ -34507,7 +34547,12 @@ var Many2OneField = (props) => {
                   menuPlacement: "bottom",
                   menuPortalTarget: typeof window !== "undefined" ? document.body : null,
                   styles: {
-                    control: () => ({}),
+                    control: (base) => ({
+                      ...base,
+                      "&:focus": {
+                        borderColor: "var(--color-primary)"
+                      }
+                    }),
                     container: (base) => ({
                       ...base,
                       height: "100%"
@@ -34671,8 +34716,8 @@ var StatusBarOptionField = (props) => {
           // pr-[20px]
           fontWeight: 600,
           // font-semibold
-          fontSize: "12px",
-          background: value ? "var(--primary-color)" : "#FAFAFA",
+          fontSize: "14px",
+          background: value ? "var(--color-primary)" : "#FAFAFA",
           color: value ? "#fff" : "#121212",
           borderTopLeftRadius: index4 === 0 ? "0.75rem" : "0px",
           // rounded-l-xl
@@ -34703,12 +34748,12 @@ var StatusBarOptionField = (props) => {
                 width: "25.5px",
                 height: "25.5px",
                 right: value ? "-13px" : "-12.5px",
-                background: value ? "var(--primary-color)" : "#FAFAFA",
-                border: value ? "1px solid var(--primary-color)" : "1px solid rgba(0,0,0,0.04)",
-                borderBottomColor: value ? "var(--primary-color)" : "#FAFAFA",
-                borderLeftColor: value ? "var(--primary-color)" : "#FAFAFA",
-                borderTopColor: value ? "var(--primary-color)" : "rgba(0,0,0,0.04)",
-                borderRightColor: value ? "var(--primary-color)" : "rgba(0,0,0,0.04)"
+                background: value ? "var(--color-primary)" : "#FAFAFA",
+                border: value ? "1px solid var(--color-primary)" : "1px solid rgba(0,0,0,0.04)",
+                borderBottomColor: value ? "var(--color-primary)" : "#FAFAFA",
+                borderLeftColor: value ? "var(--color-primary)" : "#FAFAFA",
+                borderTopColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)",
+                borderRightColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)"
               }
             }
           )

package/dist/index.mjs CHANGED Viewed

@@ -11962,7 +11962,7 @@ var Row = (props) => {
   }, [row?.id, selectedRowKeys, checkedAll]);
   const handleCheckBoxSingle = (event) => {
     event.stopPropagation();
-    if (checkedAll && checkboxRef && checkboxRef.current) {
+    if (checkedAll) {
       checkboxRef.current = "uncheck";
       setIsAutoSelect(true);
       return;
@@ -11975,7 +11975,7 @@ var Row = (props) => {
   };
   useEffect3(() => {
     if (!row?.id) return;
-    if (isAutoSelect && checkboxRef && checkboxRef.current) {
+    if (isAutoSelect) {
       if (checkboxRef?.current === "uncheck") {
         const filtered = selectedRowKeysRef.current.filter(
           (id) => id !== row.id
@@ -11992,9 +11992,9 @@ var Row = (props) => {
     }
   }, [isAutoSelect]);
   useEffect3(() => {
-    if (!checkedAll && checkboxRef && checkboxRef.current) {
+    if (!checkedAll) {
       checkboxRef.current = "enabled";
-      false;
+      setIsAutoSelect(false);
     }
   }, [checkedAll]);
   return /* @__PURE__ */ jsx40(
@@ -12193,7 +12193,7 @@ var TableFilter = ({ columns, onToggleColumnOptional }) => {
       style: {
         transform: "translateY(-50%)"
       },
-      className: "w-fit absolute top-[50%] translate-y-[-50%] right-[10px] ms-auto z-[32] bg-[#eff1f2]",
+      className: "w-fit absolute top-[50%] translate-y-[-50%] right-[10px] ms-auto z-[32] bg-white",
       children: [
         /* @__PURE__ */ jsx42(
           "button",
@@ -12264,7 +12264,11 @@ var TableFilter = ({ columns, onToggleColumnOptional }) => {
             "div",
             {
               ref: filterPopupRef,
-              style: { top: filterPosition?.top, right: filterPosition?.right },
+              style: {
+                top: filterPosition?.top,
+                right: filterPosition?.right,
+                zIndex: 9999
+              },
               className: "absolute z-[9999] flex w-[250px] h-auto max-h-[800%] overflow-auto flex-col gap-[16px] rounded-[8px] bg-[#fff] px-[24px] py-[16px] shadow-md",
               children: columns?.filter((val) => val?.optional !== void 0)?.map((item) => {
                 return /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-2", children: [
@@ -12370,7 +12374,7 @@ var TableHead = (props) => {
       style: {
         userSelect: "none",
         WebkitUserSelect: "none",
-        zIndex: 1,
+        zIndex: 10,
         position: "sticky",
         top: 0
       },
@@ -12409,7 +12413,7 @@ var TableHead = (props) => {
               minWidth: "40px",
               right: 0
             },
-            className: `column whitespace-nowrap text-left p-3 text-sm font-medium capitalize text-[#121212] min-w-[40px] sticky right-[0px] bg-[#eff1f2]`,
+            className: `column whitespace-nowrap text-left p-3 text-sm font-medium capitalize text-[#121212] min-w-[40px] sticky right-[0px] bg-white`,
             children: /* @__PURE__ */ jsx44(
               TableFilter,
               {
@@ -14984,7 +14988,8 @@ var TagSearch = ({
   removeSearchItems,
   selectedTags,
   filterBy,
-  setFilterBy
+  setFilterBy,
+  setGroupBy
 }) => {
   return selectedTags?.length > 0 && selectedTags?.map((tag, index4) => {
     if (tag?.values?.length > 0) {
@@ -15056,6 +15061,12 @@ var TagSearch = ({
                         onClick: () => {
                           if (tag?.type === SearchType.GROUP) {
                             typeof removeSearchItems === "function" && removeSearchItems(`${SearchType.GROUP}`);
+                            setGroupBy(
+                              (prev2) => prev2?.map((item) => ({
+                                ...item,
+                                active: false
+                              }))
+                            );
                           }
                         },
                         children: /* @__PURE__ */ jsx56(CloseIcon, { className: "size-4 cursor-pointer" })
@@ -15120,7 +15131,16 @@ var SearchList = ({
               instance.t("for"),
               ":",
               " ",
-              /* @__PURE__ */ jsx57("span", { className: "custom-input-result text-primary font-bold italic", children: searchString })
+              /* @__PURE__ */ jsx57(
+                "span",
+                {
+                  style: {
+                    color: "var(--color-primary)"
+                  },
+                  className: "custom-input-result text-primary font-bold italic",
+                  children: searchString
+                }
+              )
             ]
           },
           "header-" + index4 + 1
@@ -15176,6 +15196,8 @@ var Search = ({
     }
   }, [selectedTags, isReadyFormatDomain]);
   useEffect6(() => {
+    setDidInit(false);
+    setIsReadyFormatDomain(false);
     return () => {
       clearSearch();
       setDidInit(false);
@@ -15183,13 +15205,14 @@ var Search = ({
     };
   }, [aid]);
   useEffect6(() => {
-    if (!filterBy) return;
-    if (didInit || selectedTags?.length > 0) return;
+    if (!filterBy || !fieldsList || fieldsList?.length === 0) return;
+    if (didInit) return;
     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) {
+    if (searchDefaults.length === 0 && !hasGroupBy && defaultGroupBy?.length === 0) {
       setIsReadyFormatDomain(true);
       setDidInit(true);
       return;
@@ -15210,8 +15233,24 @@ 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 (hasGroupBy && fieldsList?.length > 0) {
+    if (updatedGroupBy) setGroupBy(updatedGroupBy);
+    if (hasGroupBy) {
       viewData?.views?.search?.filters_by?.forEach((item, idx) => {
         const groupCtx = evalJSONContext(item?.context);
         handleAddTagSearch?.({
@@ -15224,8 +15263,8 @@ var Search = ({
           fieldsGroup: fieldsList
         });
       });
-      setDidInit(true);
     }
+    setDidInit(true);
     setIsReadyFormatDomain(true);
   }, [aid, filterBy, fieldsList]);
   return /* @__PURE__ */ jsxs38(
@@ -15242,7 +15281,8 @@ var Search = ({
               removeSearchItems,
               selectedTags,
               filterBy,
-              setFilterBy
+              setFilterBy,
+              setGroupBy
             }
           ),
           /* @__PURE__ */ jsx58(
@@ -34388,7 +34428,12 @@ var Many2OneField = (props) => {
                   menuPlacement: "bottom",
                   menuPortalTarget: typeof window !== "undefined" ? document.body : null,
                   styles: {
-                    control: () => ({}),
+                    control: (base) => ({
+                      ...base,
+                      "&:focus": {
+                        borderColor: "var(--color-primary)"
+                      }
+                    }),
                     container: (base) => ({
                       ...base,
                       height: "100%"
@@ -34552,8 +34597,8 @@ var StatusBarOptionField = (props) => {
           // pr-[20px]
           fontWeight: 600,
           // font-semibold
-          fontSize: "12px",
-          background: value ? "var(--primary-color)" : "#FAFAFA",
+          fontSize: "14px",
+          background: value ? "var(--color-primary)" : "#FAFAFA",
           color: value ? "#fff" : "#121212",
           borderTopLeftRadius: index4 === 0 ? "0.75rem" : "0px",
           // rounded-l-xl
@@ -34584,12 +34629,12 @@ var StatusBarOptionField = (props) => {
                 width: "25.5px",
                 height: "25.5px",
                 right: value ? "-13px" : "-12.5px",
-                background: value ? "var(--primary-color)" : "#FAFAFA",
-                border: value ? "1px solid var(--primary-color)" : "1px solid rgba(0,0,0,0.04)",
-                borderBottomColor: value ? "var(--primary-color)" : "#FAFAFA",
-                borderLeftColor: value ? "var(--primary-color)" : "#FAFAFA",
-                borderTopColor: value ? "var(--primary-color)" : "rgba(0,0,0,0.04)",
-                borderRightColor: value ? "var(--primary-color)" : "rgba(0,0,0,0.04)"
+                background: value ? "var(--color-primary)" : "#FAFAFA",
+                border: value ? "1px solid var(--color-primary)" : "1px solid rgba(0,0,0,0.04)",
+                borderBottomColor: value ? "var(--color-primary)" : "#FAFAFA",
+                borderLeftColor: value ? "var(--color-primary)" : "#FAFAFA",
+                borderTopColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)",
+                borderRightColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)"
               }
             }
           )

package/dist/widgets.js CHANGED Viewed

@@ -11682,7 +11682,7 @@ var Row = (props) => {
   }, [row?.id, selectedRowKeys, checkedAll]);
   const handleCheckBoxSingle = (event) => {
     event.stopPropagation();
-    if (checkedAll && checkboxRef && checkboxRef.current) {
+    if (checkedAll) {
       checkboxRef.current = "uncheck";
       setIsAutoSelect(true);
       return;
@@ -11695,7 +11695,7 @@ var Row = (props) => {
   };
   (0, import_react10.useEffect)(() => {
     if (!row?.id) return;
-    if (isAutoSelect && checkboxRef && checkboxRef.current) {
+    if (isAutoSelect) {
       if (checkboxRef?.current === "uncheck") {
         const filtered = selectedRowKeysRef.current.filter(
           (id) => id !== row.id
@@ -11712,9 +11712,9 @@ var Row = (props) => {
     }
   }, [isAutoSelect]);
   (0, import_react10.useEffect)(() => {
-    if (!checkedAll && checkboxRef && checkboxRef.current) {
+    if (!checkedAll) {
       checkboxRef.current = "enabled";
-      false;
+      setIsAutoSelect(false);
     }
   }, [checkedAll]);
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
@@ -11947,7 +11947,7 @@ var TableFilter = ({ columns, onToggleColumnOptional }) => {
       style: {
         transform: "translateY(-50%)"
       },
-      className: "w-fit absolute top-[50%] translate-y-[-50%] right-[10px] ms-auto z-[32] bg-[#eff1f2]",
+      className: "w-fit absolute top-[50%] translate-y-[-50%] right-[10px] ms-auto z-[32] bg-white",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           "button",
@@ -12018,7 +12018,11 @@ var TableFilter = ({ columns, onToggleColumnOptional }) => {
             "div",
             {
               ref: filterPopupRef,
-              style: { top: filterPosition?.top, right: filterPosition?.right },
+              style: {
+                top: filterPosition?.top,
+                right: filterPosition?.right,
+                zIndex: 9999
+              },
               className: "absolute z-[9999] flex w-[250px] h-auto max-h-[800%] overflow-auto flex-col gap-[16px] rounded-[8px] bg-[#fff] px-[24px] py-[16px] shadow-md",
               children: columns?.filter((val) => val?.optional !== void 0)?.map((item) => {
                 return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-2", children: [
@@ -12124,7 +12128,7 @@ var TableHead = (props) => {
       style: {
         userSelect: "none",
         WebkitUserSelect: "none",
-        zIndex: 1,
+        zIndex: 10,
         position: "sticky",
         top: 0
       },
@@ -12163,7 +12167,7 @@ var TableHead = (props) => {
               minWidth: "40px",
               right: 0
             },
-            className: `column whitespace-nowrap text-left p-3 text-sm font-medium capitalize text-[#121212] min-w-[40px] sticky right-[0px] bg-[#eff1f2]`,
+            className: `column whitespace-nowrap text-left p-3 text-sm font-medium capitalize text-[#121212] min-w-[40px] sticky right-[0px] bg-white`,
             children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               TableFilter,
               {
@@ -14749,7 +14753,8 @@ var TagSearch = ({
   removeSearchItems,
   selectedTags,
   filterBy,
-  setFilterBy
+  setFilterBy,
+  setGroupBy
 }) => {
   return selectedTags?.length > 0 && selectedTags?.map((tag, index4) => {
     if (tag?.values?.length > 0) {
@@ -14821,6 +14826,12 @@ var TagSearch = ({
                         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_runtime56.jsx)(CloseIcon, { className: "size-4 cursor-pointer" })
@@ -14885,7 +14896,16 @@ var SearchList = ({
               instance.t("for"),
               ":",
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "custom-input-result text-primary font-bold italic", children: searchString })
+              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                "span",
+                {
+                  style: {
+                    color: "var(--color-primary)"
+                  },
+                  className: "custom-input-result text-primary font-bold italic",
+                  children: searchString
+                }
+              )
             ]
           },
           "header-" + index4 + 1
@@ -14941,6 +14961,8 @@ var Search = ({
     }
   }, [selectedTags, isReadyFormatDomain]);
   (0, import_react18.useEffect)(() => {
+    setDidInit(false);
+    setIsReadyFormatDomain(false);
     return () => {
       clearSearch();
       setDidInit(false);
@@ -14948,13 +14970,14 @@ var Search = ({
     };
   }, [aid]);
   (0, import_react18.useEffect)(() => {
-    if (!filterBy) return;
-    if (didInit || selectedTags?.length > 0) return;
+    if (!filterBy || !fieldsList || fieldsList?.length === 0) return;
+    if (didInit) return;
     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) {
+    if (searchDefaults.length === 0 && !hasGroupBy && defaultGroupBy?.length === 0) {
       setIsReadyFormatDomain(true);
       setDidInit(true);
       return;
@@ -14975,8 +14998,24 @@ 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 (hasGroupBy && fieldsList?.length > 0) {
+    if (updatedGroupBy) setGroupBy(updatedGroupBy);
+    if (hasGroupBy) {
       viewData?.views?.search?.filters_by?.forEach((item, idx) => {
         const groupCtx = evalJSONContext(item?.context);
         handleAddTagSearch?.({
@@ -14989,8 +15028,8 @@ var Search = ({
           fieldsGroup: fieldsList
         });
       });
-      setDidInit(true);
     }
+    setDidInit(true);
     setIsReadyFormatDomain(true);
   }, [aid, filterBy, fieldsList]);
   return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
@@ -15007,7 +15046,8 @@ var Search = ({
               removeSearchItems,
               selectedTags,
               filterBy,
-              setFilterBy
+              setFilterBy,
+              setGroupBy
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
@@ -34153,7 +34193,12 @@ var Many2OneField = (props) => {
                   menuPlacement: "bottom",
                   menuPortalTarget: typeof window !== "undefined" ? document.body : null,
                   styles: {
-                    control: () => ({}),
+                    control: (base) => ({
+                      ...base,
+                      "&:focus": {
+                        borderColor: "var(--color-primary)"
+                      }
+                    }),
                     container: (base) => ({
                       ...base,
                       height: "100%"
@@ -34317,8 +34362,8 @@ var StatusBarOptionField = (props) => {
           // pr-[20px]
           fontWeight: 600,
           // font-semibold
-          fontSize: "12px",
-          background: value ? "var(--primary-color)" : "#FAFAFA",
+          fontSize: "14px",
+          background: value ? "var(--color-primary)" : "#FAFAFA",
           color: value ? "#fff" : "#121212",
           borderTopLeftRadius: index4 === 0 ? "0.75rem" : "0px",
           // rounded-l-xl
@@ -34349,12 +34394,12 @@ var StatusBarOptionField = (props) => {
                 width: "25.5px",
                 height: "25.5px",
                 right: value ? "-13px" : "-12.5px",
-                background: value ? "var(--primary-color)" : "#FAFAFA",
-                border: value ? "1px solid var(--primary-color)" : "1px solid rgba(0,0,0,0.04)",
-                borderBottomColor: value ? "var(--primary-color)" : "#FAFAFA",
-                borderLeftColor: value ? "var(--primary-color)" : "#FAFAFA",
-                borderTopColor: value ? "var(--primary-color)" : "rgba(0,0,0,0.04)",
-                borderRightColor: value ? "var(--primary-color)" : "rgba(0,0,0,0.04)"
+                background: value ? "var(--color-primary)" : "#FAFAFA",
+                border: value ? "1px solid var(--color-primary)" : "1px solid rgba(0,0,0,0.04)",
+                borderBottomColor: value ? "var(--color-primary)" : "#FAFAFA",
+                borderLeftColor: value ? "var(--color-primary)" : "#FAFAFA",
+                borderTopColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)",
+                borderRightColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)"
               }
             }
           )

package/dist/widgets.mjs CHANGED Viewed

@@ -11619,7 +11619,7 @@ var Row = (props) => {
   }, [row?.id, selectedRowKeys, checkedAll]);
   const handleCheckBoxSingle = (event) => {
     event.stopPropagation();
-    if (checkedAll && checkboxRef && checkboxRef.current) {
+    if (checkedAll) {
       checkboxRef.current = "uncheck";
       setIsAutoSelect(true);
       return;
@@ -11632,7 +11632,7 @@ var Row = (props) => {
   };
   useEffect2(() => {
     if (!row?.id) return;
-    if (isAutoSelect && checkboxRef && checkboxRef.current) {
+    if (isAutoSelect) {
       if (checkboxRef?.current === "uncheck") {
         const filtered = selectedRowKeysRef.current.filter(
           (id) => id !== row.id
@@ -11649,9 +11649,9 @@ var Row = (props) => {
     }
   }, [isAutoSelect]);
   useEffect2(() => {
-    if (!checkedAll && checkboxRef && checkboxRef.current) {
+    if (!checkedAll) {
       checkboxRef.current = "enabled";
-      false;
+      setIsAutoSelect(false);
     }
   }, [checkedAll]);
   return /* @__PURE__ */ jsx40(
@@ -11884,7 +11884,7 @@ var TableFilter = ({ columns, onToggleColumnOptional }) => {
       style: {
         transform: "translateY(-50%)"
       },
-      className: "w-fit absolute top-[50%] translate-y-[-50%] right-[10px] ms-auto z-[32] bg-[#eff1f2]",
+      className: "w-fit absolute top-[50%] translate-y-[-50%] right-[10px] ms-auto z-[32] bg-white",
       children: [
         /* @__PURE__ */ jsx42(
           "button",
@@ -11955,7 +11955,11 @@ var TableFilter = ({ columns, onToggleColumnOptional }) => {
             "div",
             {
               ref: filterPopupRef,
-              style: { top: filterPosition?.top, right: filterPosition?.right },
+              style: {
+                top: filterPosition?.top,
+                right: filterPosition?.right,
+                zIndex: 9999
+              },
               className: "absolute z-[9999] flex w-[250px] h-auto max-h-[800%] overflow-auto flex-col gap-[16px] rounded-[8px] bg-[#fff] px-[24px] py-[16px] shadow-md",
               children: columns?.filter((val) => val?.optional !== void 0)?.map((item) => {
                 return /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-2", children: [
@@ -12061,7 +12065,7 @@ var TableHead = (props) => {
       style: {
         userSelect: "none",
         WebkitUserSelect: "none",
-        zIndex: 1,
+        zIndex: 10,
         position: "sticky",
         top: 0
       },
@@ -12100,7 +12104,7 @@ var TableHead = (props) => {
               minWidth: "40px",
               right: 0
             },
-            className: `column whitespace-nowrap text-left p-3 text-sm font-medium capitalize text-[#121212] min-w-[40px] sticky right-[0px] bg-[#eff1f2]`,
+            className: `column whitespace-nowrap text-left p-3 text-sm font-medium capitalize text-[#121212] min-w-[40px] sticky right-[0px] bg-white`,
             children: /* @__PURE__ */ jsx44(
               TableFilter,
               {
@@ -14686,7 +14690,8 @@ var TagSearch = ({
   removeSearchItems,
   selectedTags,
   filterBy,
-  setFilterBy
+  setFilterBy,
+  setGroupBy
 }) => {
   return selectedTags?.length > 0 && selectedTags?.map((tag, index4) => {
     if (tag?.values?.length > 0) {
@@ -14758,6 +14763,12 @@ var TagSearch = ({
                         onClick: () => {
                           if (tag?.type === SearchType.GROUP) {
                             typeof removeSearchItems === "function" && removeSearchItems(`${SearchType.GROUP}`);
+                            setGroupBy(
+                              (prev2) => prev2?.map((item) => ({
+                                ...item,
+                                active: false
+                              }))
+                            );
                           }
                         },
                         children: /* @__PURE__ */ jsx56(CloseIcon, { className: "size-4 cursor-pointer" })
@@ -14822,7 +14833,16 @@ var SearchList = ({
               instance.t("for"),
               ":",
               " ",
-              /* @__PURE__ */ jsx57("span", { className: "custom-input-result text-primary font-bold italic", children: searchString })
+              /* @__PURE__ */ jsx57(
+                "span",
+                {
+                  style: {
+                    color: "var(--color-primary)"
+                  },
+                  className: "custom-input-result text-primary font-bold italic",
+                  children: searchString
+                }
+              )
             ]
           },
           "header-" + index4 + 1
@@ -14878,6 +14898,8 @@ var Search = ({
     }
   }, [selectedTags, isReadyFormatDomain]);
   useEffect6(() => {
+    setDidInit(false);
+    setIsReadyFormatDomain(false);
     return () => {
       clearSearch();
       setDidInit(false);
@@ -14885,13 +14907,14 @@ var Search = ({
     };
   }, [aid]);
   useEffect6(() => {
-    if (!filterBy) return;
-    if (didInit || selectedTags?.length > 0) return;
+    if (!filterBy || !fieldsList || fieldsList?.length === 0) return;
+    if (didInit) return;
     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) {
+    if (searchDefaults.length === 0 && !hasGroupBy && defaultGroupBy?.length === 0) {
       setIsReadyFormatDomain(true);
       setDidInit(true);
       return;
@@ -14912,8 +14935,24 @@ 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 (hasGroupBy && fieldsList?.length > 0) {
+    if (updatedGroupBy) setGroupBy(updatedGroupBy);
+    if (hasGroupBy) {
       viewData?.views?.search?.filters_by?.forEach((item, idx) => {
         const groupCtx = evalJSONContext(item?.context);
         handleAddTagSearch?.({
@@ -14926,8 +14965,8 @@ var Search = ({
           fieldsGroup: fieldsList
         });
       });
-      setDidInit(true);
     }
+    setDidInit(true);
     setIsReadyFormatDomain(true);
   }, [aid, filterBy, fieldsList]);
   return /* @__PURE__ */ jsxs38(
@@ -14944,7 +14983,8 @@ var Search = ({
               removeSearchItems,
               selectedTags,
               filterBy,
-              setFilterBy
+              setFilterBy,
+              setGroupBy
             }
           ),
           /* @__PURE__ */ jsx58(
@@ -34090,7 +34130,12 @@ var Many2OneField = (props) => {
                   menuPlacement: "bottom",
                   menuPortalTarget: typeof window !== "undefined" ? document.body : null,
                   styles: {
-                    control: () => ({}),
+                    control: (base) => ({
+                      ...base,
+                      "&:focus": {
+                        borderColor: "var(--color-primary)"
+                      }
+                    }),
                     container: (base) => ({
                       ...base,
                       height: "100%"
@@ -34254,8 +34299,8 @@ var StatusBarOptionField = (props) => {
           // pr-[20px]
           fontWeight: 600,
           // font-semibold
-          fontSize: "12px",
-          background: value ? "var(--primary-color)" : "#FAFAFA",
+          fontSize: "14px",
+          background: value ? "var(--color-primary)" : "#FAFAFA",
           color: value ? "#fff" : "#121212",
           borderTopLeftRadius: index4 === 0 ? "0.75rem" : "0px",
           // rounded-l-xl
@@ -34286,12 +34331,12 @@ var StatusBarOptionField = (props) => {
                 width: "25.5px",
                 height: "25.5px",
                 right: value ? "-13px" : "-12.5px",
-                background: value ? "var(--primary-color)" : "#FAFAFA",
-                border: value ? "1px solid var(--primary-color)" : "1px solid rgba(0,0,0,0.04)",
-                borderBottomColor: value ? "var(--primary-color)" : "#FAFAFA",
-                borderLeftColor: value ? "var(--primary-color)" : "#FAFAFA",
-                borderTopColor: value ? "var(--primary-color)" : "rgba(0,0,0,0.04)",
-                borderRightColor: value ? "var(--primary-color)" : "rgba(0,0,0,0.04)"
+                background: value ? "var(--color-primary)" : "#FAFAFA",
+                border: value ? "1px solid var(--color-primary)" : "1px solid rgba(0,0,0,0.04)",
+                borderBottomColor: value ? "var(--color-primary)" : "#FAFAFA",
+                borderLeftColor: value ? "var(--color-primary)" : "#FAFAFA",
+                borderTopColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)",
+                borderRightColor: value ? "var(--color-primary)" : "rgba(0,0,0,0.04)"
               }
             }
           )

package/package.json CHANGED Viewed

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