@fctc/sme-widget-ui 1.2.2 → 1.2.4

package/dist/index.js

@@ -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%"
@@ -34654,25 +34699,62 @@ var import_jsx_runtime104 = require("react/jsx-runtime");
 var StatusBarOptionField = (props) => {
   const { selection, defaultValue } = props;
   const memoizedStatusOptions = (0, import_react64.useMemo)(() => selection, [selection]);
-  return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { className: "flex items-center flex-wrap", children: memoizedStatusOptions?.map((option, index4) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { style: { display: "flex", alignItems: "center", flexWrap: "wrap" }, children: memoizedStatusOptions?.map((option, index4) => {
     const value = option?.[0] === defaultValue;
     return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(
       "label",
       {
-        className: `relative flex-shrink-0 cursor-default py-[10px] pl-8 pr-[20px] font-semibold !text-xs
-              ${value ? "bg-primary text-white" : "bg-[#FAFAFA] text-[#121212]"}
-              ${index4 === 0 ? "rounded-l-xl" : "rounded-none"}
-              ${index4 === memoizedStatusOptions?.length - 1 ? "rounded-r-xl" : "rounded-none"}
-            `,
+        style: {
+          position: "relative",
+          flexShrink: 0,
+          cursor: "default",
+          paddingTop: "10px",
+          paddingBottom: "10px",
+          paddingLeft: "32px",
+          // pl-8
+          paddingRight: "20px",
+          // pr-[20px]
+          fontWeight: 600,
+          // font-semibold
+          fontSize: "14px",
+          background: value ? "var(--color-primary)" : "#FAFAFA",
+          color: value ? "#fff" : "#121212",
+          borderTopLeftRadius: index4 === 0 ? "0.75rem" : "0px",
+          // rounded-l-xl
+          borderBottomLeftRadius: index4 === 0 ? "0.75rem" : "0px",
+          borderTopRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px",
+          // rounded-r-xl
+          borderBottomRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px"
+        },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("input", { type: "radio", checked: value, className: "hidden", disabled: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+            "input",
+            {
+              type: "radio",
+              checked: value,
+              style: { display: "none" },
+              disabled: true
+            }
+          ),
           option[1],
           !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
             "div",
             {
-              className: `absolute top-[50%] translate-y-[-50%] z-[2]  w-[25.5px] h-[25.5px] transform rotate-45
-                  ${value ? "bg-primary border border-primary -right-[13px]" : " -right-[12.5px] bg-[#FAFAFA] border border-b-[#FAFAFA] border-l-[#FAFAFA] border-t-[rgba(0,0,0,0.04)] border-r-[rgba(0,0,0,0.04)]"}
-                `
+              style: {
+                position: "absolute",
+                top: "50%",
+                transform: "translateY(-50%) rotate(45deg)",
+                zIndex: 2,
+                width: "25.5px",
+                height: "25.5px",
+                right: value ? "-13px" : "-12.5px",
+                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

@@ -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%"
@@ -34535,25 +34580,62 @@ import { jsx as jsx106, jsxs as jsxs74 } from "react/jsx-runtime";
 var StatusBarOptionField = (props) => {
   const { selection, defaultValue } = props;
   const memoizedStatusOptions = useMemo10(() => selection, [selection]);
-  return /* @__PURE__ */ jsx106("div", { className: "flex items-center flex-wrap", children: memoizedStatusOptions?.map((option, index4) => {
+  return /* @__PURE__ */ jsx106("div", { style: { display: "flex", alignItems: "center", flexWrap: "wrap" }, children: memoizedStatusOptions?.map((option, index4) => {
     const value = option?.[0] === defaultValue;
     return /* @__PURE__ */ jsxs74(
       "label",
       {
-        className: `relative flex-shrink-0 cursor-default py-[10px] pl-8 pr-[20px] font-semibold !text-xs
-              ${value ? "bg-primary text-white" : "bg-[#FAFAFA] text-[#121212]"}
-              ${index4 === 0 ? "rounded-l-xl" : "rounded-none"}
-              ${index4 === memoizedStatusOptions?.length - 1 ? "rounded-r-xl" : "rounded-none"}
-            `,
+        style: {
+          position: "relative",
+          flexShrink: 0,
+          cursor: "default",
+          paddingTop: "10px",
+          paddingBottom: "10px",
+          paddingLeft: "32px",
+          // pl-8
+          paddingRight: "20px",
+          // pr-[20px]
+          fontWeight: 600,
+          // font-semibold
+          fontSize: "14px",
+          background: value ? "var(--color-primary)" : "#FAFAFA",
+          color: value ? "#fff" : "#121212",
+          borderTopLeftRadius: index4 === 0 ? "0.75rem" : "0px",
+          // rounded-l-xl
+          borderBottomLeftRadius: index4 === 0 ? "0.75rem" : "0px",
+          borderTopRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px",
+          // rounded-r-xl
+          borderBottomRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px"
+        },
         children: [
-          /* @__PURE__ */ jsx106("input", { type: "radio", checked: value, className: "hidden", disabled: true }),
+          /* @__PURE__ */ jsx106(
+            "input",
+            {
+              type: "radio",
+              checked: value,
+              style: { display: "none" },
+              disabled: true
+            }
+          ),
           option[1],
           !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ jsx106(
             "div",
             {
-              className: `absolute top-[50%] translate-y-[-50%] z-[2]  w-[25.5px] h-[25.5px] transform rotate-45
-                  ${value ? "bg-primary border border-primary -right-[13px]" : " -right-[12.5px] bg-[#FAFAFA] border border-b-[#FAFAFA] border-l-[#FAFAFA] border-t-[rgba(0,0,0,0.04)] border-r-[rgba(0,0,0,0.04)]"}
-                `
+              style: {
+                position: "absolute",
+                top: "50%",
+                transform: "translateY(-50%) rotate(45deg)",
+                zIndex: 2,
+                width: "25.5px",
+                height: "25.5px",
+                right: value ? "-13px" : "-12.5px",
+                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

@@ -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%"
@@ -34300,25 +34345,62 @@ var import_jsx_runtime104 = require("react/jsx-runtime");
 var StatusBarOptionField = (props) => {
   const { selection, defaultValue } = props;
   const memoizedStatusOptions = (0, import_react64.useMemo)(() => selection, [selection]);
-  return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { className: "flex items-center flex-wrap", children: memoizedStatusOptions?.map((option, index4) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { style: { display: "flex", alignItems: "center", flexWrap: "wrap" }, children: memoizedStatusOptions?.map((option, index4) => {
     const value = option?.[0] === defaultValue;
     return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(
       "label",
       {
-        className: `relative flex-shrink-0 cursor-default py-[10px] pl-8 pr-[20px] font-semibold !text-xs
-              ${value ? "bg-primary text-white" : "bg-[#FAFAFA] text-[#121212]"}
-              ${index4 === 0 ? "rounded-l-xl" : "rounded-none"}
-              ${index4 === memoizedStatusOptions?.length - 1 ? "rounded-r-xl" : "rounded-none"}
-            `,
+        style: {
+          position: "relative",
+          flexShrink: 0,
+          cursor: "default",
+          paddingTop: "10px",
+          paddingBottom: "10px",
+          paddingLeft: "32px",
+          // pl-8
+          paddingRight: "20px",
+          // pr-[20px]
+          fontWeight: 600,
+          // font-semibold
+          fontSize: "14px",
+          background: value ? "var(--color-primary)" : "#FAFAFA",
+          color: value ? "#fff" : "#121212",
+          borderTopLeftRadius: index4 === 0 ? "0.75rem" : "0px",
+          // rounded-l-xl
+          borderBottomLeftRadius: index4 === 0 ? "0.75rem" : "0px",
+          borderTopRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px",
+          // rounded-r-xl
+          borderBottomRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px"
+        },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("input", { type: "radio", checked: value, className: "hidden", disabled: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+            "input",
+            {
+              type: "radio",
+              checked: value,
+              style: { display: "none" },
+              disabled: true
+            }
+          ),
           option[1],
           !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
             "div",
             {
-              className: `absolute top-[50%] translate-y-[-50%] z-[2]  w-[25.5px] h-[25.5px] transform rotate-45
-                  ${value ? "bg-primary border border-primary -right-[13px]" : " -right-[12.5px] bg-[#FAFAFA] border border-b-[#FAFAFA] border-l-[#FAFAFA] border-t-[rgba(0,0,0,0.04)] border-r-[rgba(0,0,0,0.04)]"}
-                `
+              style: {
+                position: "absolute",
+                top: "50%",
+                transform: "translateY(-50%) rotate(45deg)",
+                zIndex: 2,
+                width: "25.5px",
+                height: "25.5px",
+                right: value ? "-13px" : "-12.5px",
+                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

@@ -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%"
@@ -34237,25 +34282,62 @@ import { jsx as jsx106, jsxs as jsxs74 } from "react/jsx-runtime";
 var StatusBarOptionField = (props) => {
   const { selection, defaultValue } = props;
   const memoizedStatusOptions = useMemo10(() => selection, [selection]);
-  return /* @__PURE__ */ jsx106("div", { className: "flex items-center flex-wrap", children: memoizedStatusOptions?.map((option, index4) => {
+  return /* @__PURE__ */ jsx106("div", { style: { display: "flex", alignItems: "center", flexWrap: "wrap" }, children: memoizedStatusOptions?.map((option, index4) => {
     const value = option?.[0] === defaultValue;
     return /* @__PURE__ */ jsxs74(
       "label",
       {
-        className: `relative flex-shrink-0 cursor-default py-[10px] pl-8 pr-[20px] font-semibold !text-xs
-              ${value ? "bg-primary text-white" : "bg-[#FAFAFA] text-[#121212]"}
-              ${index4 === 0 ? "rounded-l-xl" : "rounded-none"}
-              ${index4 === memoizedStatusOptions?.length - 1 ? "rounded-r-xl" : "rounded-none"}
-            `,
+        style: {
+          position: "relative",
+          flexShrink: 0,
+          cursor: "default",
+          paddingTop: "10px",
+          paddingBottom: "10px",
+          paddingLeft: "32px",
+          // pl-8
+          paddingRight: "20px",
+          // pr-[20px]
+          fontWeight: 600,
+          // font-semibold
+          fontSize: "14px",
+          background: value ? "var(--color-primary)" : "#FAFAFA",
+          color: value ? "#fff" : "#121212",
+          borderTopLeftRadius: index4 === 0 ? "0.75rem" : "0px",
+          // rounded-l-xl
+          borderBottomLeftRadius: index4 === 0 ? "0.75rem" : "0px",
+          borderTopRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px",
+          // rounded-r-xl
+          borderBottomRightRadius: index4 === memoizedStatusOptions?.length - 1 ? "0.75rem" : "0px"
+        },
         children: [
-          /* @__PURE__ */ jsx106("input", { type: "radio", checked: value, className: "hidden", disabled: true }),
+          /* @__PURE__ */ jsx106(
+            "input",
+            {
+              type: "radio",
+              checked: value,
+              style: { display: "none" },
+              disabled: true
+            }
+          ),
           option[1],
           !(index4 === memoizedStatusOptions?.length - 1) && /* @__PURE__ */ jsx106(
             "div",
             {
-              className: `absolute top-[50%] translate-y-[-50%] z-[2]  w-[25.5px] h-[25.5px] transform rotate-45
-                  ${value ? "bg-primary border border-primary -right-[13px]" : " -right-[12.5px] bg-[#FAFAFA] border border-b-[#FAFAFA] border-l-[#FAFAFA] border-t-[rgba(0,0,0,0.04)] border-r-[rgba(0,0,0,0.04)]"}
-                `
+              style: {
+                position: "absolute",
+                top: "50%",
+                transform: "translateY(-50%) rotate(45deg)",
+                zIndex: 2,
+                width: "25.5px",
+                height: "25.5px",
+                right: value ? "-13px" : "-12.5px",
+                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

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