@fctc/sme-widget-ui 1.1.3 → 1.1.5

package/dist/.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ]
+}

package/dist/.editorconfig

@@ -0,0 +1,10 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[*.{js,json,yml}]
+charset = utf-8
+indent_style = space
+indent_size = 2

package/dist/.eslintignore

@@ -0,0 +1,6 @@
+dist
+.cache
+package-lock.json
+public
+node_modules
+yarn.lock

package/dist/.eslintrc.cjs

@@ -0,0 +1,66 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs', 'commitlint.config.cjs'],
+  parser: '@typescript-eslint/parser',
+  overrides: [
+    {
+      files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx', '**/*.cjs'],
+      plugins: [
+        '@typescript-eslint',
+        'unused-imports',
+        'simple-import-sort',
+        'react-refresh',
+      ],
+      rules: {
+        'react-refresh/only-export-components': [
+          'warn',
+          { allowConstantExport: true },
+        ],
+        'import/prefer-default-export': 'off',
+        'simple-import-sort/imports': [
+          'error',
+          {
+            groups: [
+              // Packages `react` related packages come first.
+              ['^react', '^@?\\w'],
+              // Internal packages.
+              ['^(@|components)(/.*|$)'],
+              // Side effect imports.
+              ['^\\u0000'],
+              // Parent imports. Put `..` last.
+              ['^\\.\\.(?!/?$)', '^\\.\\./?$'],
+              // Other relative imports. Put same-folder imports and `.` last.
+              ['^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],
+              // Style imports.
+              ['^.+\\.?(css)$'],
+            ],
+          },
+        ],
+        'prettier/prettier': [
+          'error',
+          {
+            endOfLine: 'auto',
+          },
+        ],
+        'react/react-in-jsx-scope': 'off',
+        'no-param-reassign': 'off',
+        'simple-import-sort/exports': 'error',
+        '@typescript-eslint/no-unused-vars': 'off',
+        '@typescript-eslint/no-non-null-assertion': 'off',
+        '@typescript-eslint/no-explicit-any': 'off',
+        '@typescript-eslint/ban-ts-comment': 'off',
+        '@typescript-eslint/ban-types': 'off',
+        'unused-imports/no-unused-imports': 'error',
+        'unused-imports/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+        'no-plusplus': 'off',
+        'no-case-declarations': 'off',
+      },
+    },
+  ],
+}

package/dist/.gitattributes

@@ -0,0 +1,4 @@
+/.yarn/**            linguist-vendored
+/.yarn/releases/*    binary
+/.yarn/plugins/**/*  binary
+/.pnp.*              binary linguist-generated

package/dist/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "semi": false
+}

package/dist/index.js

@@ -12410,9 +12410,12 @@ var TableBodyRow = (props) => {
     isForm,
     typeCo,
     selectedRowKeys,
+    tableGroupController,
+    groupByList,
+    setIsAutoSelect,
+    isAutoSelect,
     isEditTable
   } = props;
-  const [isAutoSelect, setIsAutoSelect] = (0, import_react12.useState)(false);
   const rootStyle = getComputedStyle(document.documentElement);
   const colorPrimary = rootStyle.getPropertyValue("--primary").trim();
   return rows && rows?.length > 0 ? rows?.map((row, index4) => {
@@ -12420,21 +12423,24 @@ var TableBodyRow = (props) => {
       TableGroup,
       {
         columns,
-        indexRow: index4,
         rows,
         row,
+        indexRow: index4,
         model,
         viewData,
         renderField,
         level: level + 1,
         specification,
-        domain: row?.__domain,
         context,
         checkedAll,
         isDisplayCheckbox,
         selectedRowKeysRef,
         isAutoSelect,
-        setIsAutoSelect
+        setIsAutoSelect,
+        groupByList,
+        tableGroupController,
+        setSelectedRowKeys,
+        selectedRowKeys
       },
       `record-group-${index4}`
     ) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
@@ -12473,7 +12479,15 @@ var TableBodyRow = (props) => {
   ) }) });
 };
 var TableBody = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("tbody", { className: "overflow-hidden z-0", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TableBodyRow, { ...props }) });
+  const [isAutoSelect, setIsAutoSelect] = (0, import_react12.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("tbody", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    TableBodyRow,
+    {
+      ...props,
+      isAutoSelect,
+      setIsAutoSelect
+    }
+  ) });
 };
 
 // src/widgets/advanced/table/table-filter.tsx
@@ -14854,7 +14868,7 @@ var PopupFilter = ({
         right: 0,
         zIndex: 33
       },
-      className: "popup-filter w-full overflow-x-auto rounded-lg border bg-white border-none shadow-xl",
+      className: "popup-filter w-full overflow-x-auto rounded-lg border border-[var(--stroke-default)] bg-white shadow-xl",
       children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
         "div",
         {
@@ -15214,64 +15228,59 @@ var Search = ({
     "div",
     {
       ref: popupFilterRef,
-      className: `search ${selectedRowKeys?.length <= 0 ? "flex" : "hidden"} !order-3 xl:!order-2 bg-white custom-search-input relative items-center w-full min-w-[70%] flex-1 xl:min-w-[480px] 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]`,
+      className: `search gap-[8px] p-2 items-center ${selectedRowKeys?.length <= 0 ? "flex" : "hidden"} !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)]`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
-          "div",
-          {
-            className: `relative flex md:min-w-[400px] max-w-full items-center gap-[8px] p-1 !pl-4 w-full ${(showFiltersGroups || filterBy?.length > 0 || groupBy?.length > 0) && "border-r border-[rgba(242,242,242,1)]"}`,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "min-h-5 min-w-5", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(SearchIcon, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex flex-1 flex-wrap items-center gap-[8px]", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-                  TagSearch,
-                  {
-                    removeSearchItems,
-                    selectedTags,
-                    filterBy,
-                    setFilterBy
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-                  "input",
-                  {
-                    value: searchString,
-                    className: "min-h-[44px] w-fit flex-1 border-none bg-transparent outline-none min-w-[50px] text-sm",
-                    placeholder: instance.t("search..."),
-                    onChange: (e3) => {
-                      onSearchString(e3.target.value);
-                      setShowPopupFilter(false);
-                    },
-                    onKeyUp: (e3) => e3.preventDefault()
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-                  SearchList,
-                  {
-                    handleAddTagSearch,
-                    searchBy,
-                    searchString
-                  }
-                )
-              ] })
-            ]
-          }
-        ),
-        (showFiltersGroups || filterBy?.length > 0 || groupBy?.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "size-5", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(SearchIcon, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex flex-1 flex-wrap items-center gap-[8px]", children: [
           /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+            TagSearch,
+            {
+              removeSearchItems,
+              selectedTags,
+              filterBy,
+              setFilterBy
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+            "input",
+            {
+              value: searchString,
+              className: "h-5 w-fit flex-1 border-none bg-transparent outline-none min-w-[50px] text-sm",
+              placeholder: instance.t("search..."),
+              onChange: (e3) => {
+                onSearchString(e3.target.value);
+                setShowPopupFilter(false);
+              },
+              onKeyUp: (e3) => e3.preventDefault()
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+            SearchList,
+            {
+              handleAddTagSearch,
+              searchBy,
+              searchString
+            }
+          )
+        ] }),
+        (showFiltersGroups || filterBy?.length > 0 || groupBy?.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
             "div",
             {
-              className: `flex h-full cursor-pointer items-center justify-center px-[10px] max-w-fit`,
+              className: `flex h-full gap-2 cursor-pointer items-center justify-center max-w-fit`,
               onClick: (e3) => {
                 e3.stopPropagation();
                 setShowPopupFilter((prev2) => !prev2);
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("button", { className: "w-max cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-                ChevronBottomIcon,
-                {
-                  className: `h-5 w-5 min-w-fit transition-all ${showPopupFilter ? "rotate-180 " : ""}`
-                }
-              ) })
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "w-[1px] h-[28px] bg-[var(--stroke-default)]" }),
+                /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                  ChevronBottomIcon,
+                  {
+                    className: `h-5 w-5 min-w-fit transition-all ${showPopupFilter ? "rotate-180 " : ""}`
+                  }
+                )
+              ]
             }
           ),
           showPopupFilter && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
@@ -18226,12 +18235,12 @@ var CheckboxField = (props) => {
     {
       name: name2 ?? "",
       control: methods?.control,
-      render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
-        "input",
+      render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+        "div",
         {
-          ...field,
-          onChange: (e3) => {
-            const checked = e3.target.checked;
+          className: "flex items-center gap-2",
+          onClick: () => {
+            const checked = !field.value;
             if (!isEditTable && readonly) return;
             methods.setValue(name2, checked, { shouldDirty: true });
             field.onChange(checked);
@@ -18239,13 +18248,28 @@ var CheckboxField = (props) => {
               onChange2(name2 ?? "", checked);
             }
           },
-          type: "checkbox",
-          disabled: readonly,
-          required: !invisible && required,
-          className: "custom-checkbox",
-          checked: field.value ?? false
+          children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+            "input",
+            {
+              ...field,
+              onChange: (e3) => {
+                const checked = e3.target.checked;
+                if (!isEditTable && readonly) return;
+                methods.setValue(name2, checked, { shouldDirty: true });
+                field.onChange(checked);
+                if (onChange2) {
+                  onChange2(name2 ?? "", checked);
+                }
+              },
+              type: "checkbox",
+              disabled: readonly,
+              required: !invisible && required,
+              className: "custom-checkbox",
+              checked: field.value ?? false
+            }
+          )
         }
-      ) })
+      )
     }
   );
 };
@@ -34102,7 +34126,7 @@ var Many2ManyField = (props) => {
                 !isDataLoading && isDataFetched || isPlaceholderData ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: "relative overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: "relative h-full w-full", children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
                   "div",
                   {
-                    className: `border-[1px] h-full border-solid border-[#dbe0e6] rounded-[10px] relative w-full overflow-hidden`,
+                    className: `border-y h-full border-solid border-[#dbe0e6] rounded-[10px] relative w-full overflow-hidden`,
                     children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: "flex flex-col gap-[16px] w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: `relative w-full h-full`, children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
                       "div",
                       {

package/dist/index.mjs

@@ -12291,9 +12291,12 @@ var TableBodyRow = (props) => {
     isForm,
     typeCo,
     selectedRowKeys,
+    tableGroupController,
+    groupByList,
+    setIsAutoSelect,
+    isAutoSelect,
     isEditTable
   } = props;
-  const [isAutoSelect, setIsAutoSelect] = useState2(false);
   const rootStyle = getComputedStyle(document.documentElement);
   const colorPrimary = rootStyle.getPropertyValue("--primary").trim();
   return rows && rows?.length > 0 ? rows?.map((row, index4) => {
@@ -12301,21 +12304,24 @@ var TableBodyRow = (props) => {
       TableGroup,
       {
         columns,
-        indexRow: index4,
         rows,
         row,
+        indexRow: index4,
         model,
         viewData,
         renderField,
         level: level + 1,
         specification,
-        domain: row?.__domain,
         context,
         checkedAll,
         isDisplayCheckbox,
         selectedRowKeysRef,
         isAutoSelect,
-        setIsAutoSelect
+        setIsAutoSelect,
+        groupByList,
+        tableGroupController,
+        setSelectedRowKeys,
+        selectedRowKeys
       },
       `record-group-${index4}`
     ) : /* @__PURE__ */ jsx42(
@@ -12354,7 +12360,15 @@ var TableBodyRow = (props) => {
   ) }) });
 };
 var TableBody = (props) => {
-  return /* @__PURE__ */ jsx42("tbody", { className: "overflow-hidden z-0", children: /* @__PURE__ */ jsx42(TableBodyRow, { ...props }) });
+  const [isAutoSelect, setIsAutoSelect] = useState2(false);
+  return /* @__PURE__ */ jsx42("tbody", { className: "overflow-hidden", children: /* @__PURE__ */ jsx42(
+    TableBodyRow,
+    {
+      ...props,
+      isAutoSelect,
+      setIsAutoSelect
+    }
+  ) });
 };
 
 // src/widgets/advanced/table/table-filter.tsx
@@ -14735,7 +14749,7 @@ var PopupFilter = ({
         right: 0,
         zIndex: 33
       },
-      className: "popup-filter w-full overflow-x-auto rounded-lg border bg-white border-none shadow-xl",
+      className: "popup-filter w-full overflow-x-auto rounded-lg border border-[var(--stroke-default)] bg-white shadow-xl",
       children: /* @__PURE__ */ jsxs35(
         "div",
         {
@@ -15095,64 +15109,59 @@ var Search = ({
     "div",
     {
       ref: popupFilterRef,
-      className: `search ${selectedRowKeys?.length <= 0 ? "flex" : "hidden"} !order-3 xl:!order-2 bg-white custom-search-input relative items-center w-full min-w-[70%] flex-1 xl:min-w-[480px] 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]`,
+      className: `search gap-[8px] p-2 items-center ${selectedRowKeys?.length <= 0 ? "flex" : "hidden"} !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)]`,
       children: [
-        /* @__PURE__ */ jsxs38(
-          "div",
-          {
-            className: `relative flex md:min-w-[400px] max-w-full items-center gap-[8px] p-1 !pl-4 w-full ${(showFiltersGroups || filterBy?.length > 0 || groupBy?.length > 0) && "border-r border-[rgba(242,242,242,1)]"}`,
-            children: [
-              /* @__PURE__ */ jsx57("div", { className: "min-h-5 min-w-5", children: /* @__PURE__ */ jsx57(SearchIcon, {}) }),
-              /* @__PURE__ */ jsxs38("div", { className: "flex flex-1 flex-wrap items-center gap-[8px]", children: [
-                /* @__PURE__ */ jsx57(
-                  TagSearch,
-                  {
-                    removeSearchItems,
-                    selectedTags,
-                    filterBy,
-                    setFilterBy
-                  }
-                ),
-                /* @__PURE__ */ jsx57(
-                  "input",
-                  {
-                    value: searchString,
-                    className: "min-h-[44px] w-fit flex-1 border-none bg-transparent outline-none min-w-[50px] text-sm",
-                    placeholder: instance.t("search..."),
-                    onChange: (e3) => {
-                      onSearchString(e3.target.value);
-                      setShowPopupFilter(false);
-                    },
-                    onKeyUp: (e3) => e3.preventDefault()
-                  }
-                ),
-                /* @__PURE__ */ jsx57(
-                  SearchList,
-                  {
-                    handleAddTagSearch,
-                    searchBy,
-                    searchString
-                  }
-                )
-              ] })
-            ]
-          }
-        ),
-        (showFiltersGroups || filterBy?.length > 0 || groupBy?.length > 0) && /* @__PURE__ */ jsxs38(Fragment9, { children: [
+        /* @__PURE__ */ jsx57("div", { className: "size-5", children: /* @__PURE__ */ jsx57(SearchIcon, {}) }),
+        /* @__PURE__ */ jsxs38("div", { className: "flex flex-1 flex-wrap items-center gap-[8px]", children: [
           /* @__PURE__ */ jsx57(
+            TagSearch,
+            {
+              removeSearchItems,
+              selectedTags,
+              filterBy,
+              setFilterBy
+            }
+          ),
+          /* @__PURE__ */ jsx57(
+            "input",
+            {
+              value: searchString,
+              className: "h-5 w-fit flex-1 border-none bg-transparent outline-none min-w-[50px] text-sm",
+              placeholder: instance.t("search..."),
+              onChange: (e3) => {
+                onSearchString(e3.target.value);
+                setShowPopupFilter(false);
+              },
+              onKeyUp: (e3) => e3.preventDefault()
+            }
+          ),
+          /* @__PURE__ */ jsx57(
+            SearchList,
+            {
+              handleAddTagSearch,
+              searchBy,
+              searchString
+            }
+          )
+        ] }),
+        (showFiltersGroups || filterBy?.length > 0 || groupBy?.length > 0) && /* @__PURE__ */ jsxs38(Fragment9, { children: [
+          /* @__PURE__ */ jsxs38(
             "div",
             {
-              className: `flex h-full cursor-pointer items-center justify-center px-[10px] max-w-fit`,
+              className: `flex h-full gap-2 cursor-pointer items-center justify-center max-w-fit`,
               onClick: (e3) => {
                 e3.stopPropagation();
                 setShowPopupFilter((prev2) => !prev2);
               },
-              children: /* @__PURE__ */ jsx57("button", { className: "w-max cursor-pointer", children: /* @__PURE__ */ jsx57(
-                ChevronBottomIcon,
-                {
-                  className: `h-5 w-5 min-w-fit transition-all ${showPopupFilter ? "rotate-180 " : ""}`
-                }
-              ) })
+              children: [
+                /* @__PURE__ */ jsx57("div", { className: "w-[1px] h-[28px] bg-[var(--stroke-default)]" }),
+                /* @__PURE__ */ jsx57(
+                  ChevronBottomIcon,
+                  {
+                    className: `h-5 w-5 min-w-fit transition-all ${showPopupFilter ? "rotate-180 " : ""}`
+                  }
+                )
+              ]
             }
           ),
           showPopupFilter && /* @__PURE__ */ jsx57(
@@ -18107,12 +18116,12 @@ var CheckboxField = (props) => {
     {
       name: name2 ?? "",
       control: methods?.control,
-      render: ({ field }) => /* @__PURE__ */ jsx72("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx72(
-        "input",
+      render: ({ field }) => /* @__PURE__ */ jsx72(
+        "div",
         {
-          ...field,
-          onChange: (e3) => {
-            const checked = e3.target.checked;
+          className: "flex items-center gap-2",
+          onClick: () => {
+            const checked = !field.value;
             if (!isEditTable && readonly) return;
             methods.setValue(name2, checked, { shouldDirty: true });
             field.onChange(checked);
@@ -18120,13 +18129,28 @@ var CheckboxField = (props) => {
               onChange2(name2 ?? "", checked);
             }
           },
-          type: "checkbox",
-          disabled: readonly,
-          required: !invisible && required,
-          className: "custom-checkbox",
-          checked: field.value ?? false
+          children: /* @__PURE__ */ jsx72(
+            "input",
+            {
+              ...field,
+              onChange: (e3) => {
+                const checked = e3.target.checked;
+                if (!isEditTable && readonly) return;
+                methods.setValue(name2, checked, { shouldDirty: true });
+                field.onChange(checked);
+                if (onChange2) {
+                  onChange2(name2 ?? "", checked);
+                }
+              },
+              type: "checkbox",
+              disabled: readonly,
+              required: !invisible && required,
+              className: "custom-checkbox",
+              checked: field.value ?? false
+            }
+          )
         }
-      ) })
+      )
     }
   );
 };
@@ -33983,7 +34007,7 @@ var Many2ManyField = (props) => {
                 !isDataLoading && isDataFetched || isPlaceholderData ? /* @__PURE__ */ jsx102("div", { className: "relative overflow-y-auto", children: /* @__PURE__ */ jsx102("div", { className: "relative h-full w-full", children: /* @__PURE__ */ jsx102(
                   "div",
                   {
-                    className: `border-[1px] h-full border-solid border-[#dbe0e6] rounded-[10px] relative w-full overflow-hidden`,
+                    className: `border-y h-full border-solid border-[#dbe0e6] rounded-[10px] relative w-full overflow-hidden`,
                     children: /* @__PURE__ */ jsx102("div", { className: "flex flex-col gap-[16px] w-full h-full", children: /* @__PURE__ */ jsx102("div", { className: `relative w-full h-full`, children: /* @__PURE__ */ jsx102(
                       "div",
                       {

package/dist/widgets.d.mts

@@ -39,6 +39,8 @@ interface TableBodyProps {
     typeCo?: any;
     setSelectedRowKeys?: any;
     selectedRowKeys?: any;
+    tableGroupController?: any;
+    groupByList?: any;
     isEditTable?: boolean;
 }
 declare const TableBody: (props: TableBodyProps) => JSX.Element;

package/dist/widgets.d.ts

@@ -39,6 +39,8 @@ interface TableBodyProps {
     typeCo?: any;
     setSelectedRowKeys?: any;
     selectedRowKeys?: any;
+    tableGroupController?: any;
+    groupByList?: any;
     isEditTable?: boolean;
 }
 declare const TableBody: (props: TableBodyProps) => JSX.Element;

package/dist/widgets.js

@@ -12010,9 +12010,12 @@ var TableBodyRow = (props) => {
     isForm,
     typeCo,
     selectedRowKeys,
+    tableGroupController,
+    groupByList,
+    setIsAutoSelect,
+    isAutoSelect,
     isEditTable
   } = props;
-  const [isAutoSelect, setIsAutoSelect] = (0, import_react11.useState)(false);
   const rootStyle = getComputedStyle(document.documentElement);
   const colorPrimary = rootStyle.getPropertyValue("--primary").trim();
   return rows && rows?.length > 0 ? rows?.map((row, index4) => {
@@ -12020,21 +12023,24 @@ var TableBodyRow = (props) => {
       TableGroup,
       {
         columns,
-        indexRow: index4,
         rows,
         row,
+        indexRow: index4,
         model,
         viewData,
         renderField,
         level: level + 1,
         specification,
-        domain: row?.__domain,
         context,
         checkedAll,
         isDisplayCheckbox,
         selectedRowKeysRef,
         isAutoSelect,
-        setIsAutoSelect
+        setIsAutoSelect,
+        groupByList,
+        tableGroupController,
+        setSelectedRowKeys,
+        selectedRowKeys
       },
       `record-group-${index4}`
     ) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
@@ -12073,7 +12079,15 @@ var TableBodyRow = (props) => {
   ) }) });
 };
 var TableBody = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("tbody", { className: "overflow-hidden z-0", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TableBodyRow, { ...props }) });
+  const [isAutoSelect, setIsAutoSelect] = (0, import_react11.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("tbody", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    TableBodyRow,
+    {
+      ...props,
+      isAutoSelect,
+      setIsAutoSelect
+    }
+  ) });
 };
 
 // src/widgets/advanced/table/table-filter.tsx
@@ -14499,7 +14513,7 @@ var PopupFilter = ({
         right: 0,
         zIndex: 33
       },
-      className: "popup-filter w-full overflow-x-auto rounded-lg border bg-white border-none shadow-xl",
+      className: "popup-filter w-full overflow-x-auto rounded-lg border border-[var(--stroke-default)] bg-white shadow-xl",
       children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
         "div",
         {
@@ -14859,64 +14873,59 @@ var Search = ({
     "div",
     {
       ref: popupFilterRef,
-      className: `search ${selectedRowKeys?.length <= 0 ? "flex" : "hidden"} !order-3 xl:!order-2 bg-white custom-search-input relative items-center w-full min-w-[70%] flex-1 xl:min-w-[480px] 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]`,
+      className: `search gap-[8px] p-2 items-center ${selectedRowKeys?.length <= 0 ? "flex" : "hidden"} !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)]`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
-          "div",
-          {
-            className: `relative flex md:min-w-[400px] max-w-full items-center gap-[8px] p-1 !pl-4 w-full ${(showFiltersGroups || filterBy?.length > 0 || groupBy?.length > 0) && "border-r border-[rgba(242,242,242,1)]"}`,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "min-h-5 min-w-5", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(SearchIcon, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex flex-1 flex-wrap items-center gap-[8px]", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-                  TagSearch,
-                  {
-                    removeSearchItems,
-                    selectedTags,
-                    filterBy,
-                    setFilterBy
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-                  "input",
-                  {
-                    value: searchString,
-                    className: "min-h-[44px] w-fit flex-1 border-none bg-transparent outline-none min-w-[50px] text-sm",
-                    placeholder: instance.t("search..."),
-                    onChange: (e3) => {
-                      onSearchString(e3.target.value);
-                      setShowPopupFilter(false);
-                    },
-                    onKeyUp: (e3) => e3.preventDefault()
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-                  SearchList,
-                  {
-                    handleAddTagSearch,
-                    searchBy,
-                    searchString
-                  }
-                )
-              ] })
-            ]
-          }
-        ),
-        (showFiltersGroups || filterBy?.length > 0 || groupBy?.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "size-5", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(SearchIcon, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex flex-1 flex-wrap items-center gap-[8px]", children: [
           /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+            TagSearch,
+            {
+              removeSearchItems,
+              selectedTags,
+              filterBy,
+              setFilterBy
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+            "input",
+            {
+              value: searchString,
+              className: "h-5 w-fit flex-1 border-none bg-transparent outline-none min-w-[50px] text-sm",
+              placeholder: instance.t("search..."),
+              onChange: (e3) => {
+                onSearchString(e3.target.value);
+                setShowPopupFilter(false);
+              },
+              onKeyUp: (e3) => e3.preventDefault()
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+            SearchList,
+            {
+              handleAddTagSearch,
+              searchBy,
+              searchString
+            }
+          )
+        ] }),
+        (showFiltersGroups || filterBy?.length > 0 || groupBy?.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
             "div",
             {
-              className: `flex h-full cursor-pointer items-center justify-center px-[10px] max-w-fit`,
+              className: `flex h-full gap-2 cursor-pointer items-center justify-center max-w-fit`,
               onClick: (e3) => {
                 e3.stopPropagation();
                 setShowPopupFilter((prev2) => !prev2);
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("button", { className: "w-max cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-                ChevronBottomIcon,
-                {
-                  className: `h-5 w-5 min-w-fit transition-all ${showPopupFilter ? "rotate-180 " : ""}`
-                }
-              ) })
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "w-[1px] h-[28px] bg-[var(--stroke-default)]" }),
+                /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                  ChevronBottomIcon,
+                  {
+                    className: `h-5 w-5 min-w-fit transition-all ${showPopupFilter ? "rotate-180 " : ""}`
+                  }
+                )
+              ]
             }
           ),
           showPopupFilter && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
@@ -17871,12 +17880,12 @@ var CheckboxField = (props) => {
     {
       name: name2 ?? "",
       control: methods?.control,
-      render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
-        "input",
+      render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+        "div",
         {
-          ...field,
-          onChange: (e3) => {
-            const checked = e3.target.checked;
+          className: "flex items-center gap-2",
+          onClick: () => {
+            const checked = !field.value;
             if (!isEditTable && readonly) return;
             methods.setValue(name2, checked, { shouldDirty: true });
             field.onChange(checked);
@@ -17884,13 +17893,28 @@ var CheckboxField = (props) => {
               onChange2(name2 ?? "", checked);
             }
           },
-          type: "checkbox",
-          disabled: readonly,
-          required: !invisible && required,
-          className: "custom-checkbox",
-          checked: field.value ?? false
+          children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+            "input",
+            {
+              ...field,
+              onChange: (e3) => {
+                const checked = e3.target.checked;
+                if (!isEditTable && readonly) return;
+                methods.setValue(name2, checked, { shouldDirty: true });
+                field.onChange(checked);
+                if (onChange2) {
+                  onChange2(name2 ?? "", checked);
+                }
+              },
+              type: "checkbox",
+              disabled: readonly,
+              required: !invisible && required,
+              className: "custom-checkbox",
+              checked: field.value ?? false
+            }
+          )
         }
-      ) })
+      )
     }
   );
 };
@@ -33747,7 +33771,7 @@ var Many2ManyField = (props) => {
                 !isDataLoading && isDataFetched || isPlaceholderData ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: "relative overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: "relative h-full w-full", children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
                   "div",
                   {
-                    className: `border-[1px] h-full border-solid border-[#dbe0e6] rounded-[10px] relative w-full overflow-hidden`,
+                    className: `border-y h-full border-solid border-[#dbe0e6] rounded-[10px] relative w-full overflow-hidden`,
                     children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: "flex flex-col gap-[16px] w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: `relative w-full h-full`, children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
                       "div",
                       {

package/dist/widgets.mjs

@@ -11948,9 +11948,12 @@ var TableBodyRow = (props) => {
     isForm,
     typeCo,
     selectedRowKeys,
+    tableGroupController,
+    groupByList,
+    setIsAutoSelect,
+    isAutoSelect,
     isEditTable
   } = props;
-  const [isAutoSelect, setIsAutoSelect] = useState2(false);
   const rootStyle = getComputedStyle(document.documentElement);
   const colorPrimary = rootStyle.getPropertyValue("--primary").trim();
   return rows && rows?.length > 0 ? rows?.map((row, index4) => {
@@ -11958,21 +11961,24 @@ var TableBodyRow = (props) => {
       TableGroup,
       {
         columns,
-        indexRow: index4,
         rows,
         row,
+        indexRow: index4,
         model,
         viewData,
         renderField,
         level: level + 1,
         specification,
-        domain: row?.__domain,
         context,
         checkedAll,
         isDisplayCheckbox,
         selectedRowKeysRef,
         isAutoSelect,
-        setIsAutoSelect
+        setIsAutoSelect,
+        groupByList,
+        tableGroupController,
+        setSelectedRowKeys,
+        selectedRowKeys
       },
       `record-group-${index4}`
     ) : /* @__PURE__ */ jsx42(
@@ -12011,7 +12017,15 @@ var TableBodyRow = (props) => {
   ) }) });
 };
 var TableBody = (props) => {
-  return /* @__PURE__ */ jsx42("tbody", { className: "overflow-hidden z-0", children: /* @__PURE__ */ jsx42(TableBodyRow, { ...props }) });
+  const [isAutoSelect, setIsAutoSelect] = useState2(false);
+  return /* @__PURE__ */ jsx42("tbody", { className: "overflow-hidden", children: /* @__PURE__ */ jsx42(
+    TableBodyRow,
+    {
+      ...props,
+      isAutoSelect,
+      setIsAutoSelect
+    }
+  ) });
 };
 
 // src/widgets/advanced/table/table-filter.tsx
@@ -14437,7 +14451,7 @@ var PopupFilter = ({
         right: 0,
         zIndex: 33
       },
-      className: "popup-filter w-full overflow-x-auto rounded-lg border bg-white border-none shadow-xl",
+      className: "popup-filter w-full overflow-x-auto rounded-lg border border-[var(--stroke-default)] bg-white shadow-xl",
       children: /* @__PURE__ */ jsxs35(
         "div",
         {
@@ -14797,64 +14811,59 @@ var Search = ({
     "div",
     {
       ref: popupFilterRef,
-      className: `search ${selectedRowKeys?.length <= 0 ? "flex" : "hidden"} !order-3 xl:!order-2 bg-white custom-search-input relative items-center w-full min-w-[70%] flex-1 xl:min-w-[480px] 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]`,
+      className: `search gap-[8px] p-2 items-center ${selectedRowKeys?.length <= 0 ? "flex" : "hidden"} !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)]`,
       children: [
-        /* @__PURE__ */ jsxs38(
-          "div",
-          {
-            className: `relative flex md:min-w-[400px] max-w-full items-center gap-[8px] p-1 !pl-4 w-full ${(showFiltersGroups || filterBy?.length > 0 || groupBy?.length > 0) && "border-r border-[rgba(242,242,242,1)]"}`,
-            children: [
-              /* @__PURE__ */ jsx57("div", { className: "min-h-5 min-w-5", children: /* @__PURE__ */ jsx57(SearchIcon, {}) }),
-              /* @__PURE__ */ jsxs38("div", { className: "flex flex-1 flex-wrap items-center gap-[8px]", children: [
-                /* @__PURE__ */ jsx57(
-                  TagSearch,
-                  {
-                    removeSearchItems,
-                    selectedTags,
-                    filterBy,
-                    setFilterBy
-                  }
-                ),
-                /* @__PURE__ */ jsx57(
-                  "input",
-                  {
-                    value: searchString,
-                    className: "min-h-[44px] w-fit flex-1 border-none bg-transparent outline-none min-w-[50px] text-sm",
-                    placeholder: instance.t("search..."),
-                    onChange: (e3) => {
-                      onSearchString(e3.target.value);
-                      setShowPopupFilter(false);
-                    },
-                    onKeyUp: (e3) => e3.preventDefault()
-                  }
-                ),
-                /* @__PURE__ */ jsx57(
-                  SearchList,
-                  {
-                    handleAddTagSearch,
-                    searchBy,
-                    searchString
-                  }
-                )
-              ] })
-            ]
-          }
-        ),
-        (showFiltersGroups || filterBy?.length > 0 || groupBy?.length > 0) && /* @__PURE__ */ jsxs38(Fragment9, { children: [
+        /* @__PURE__ */ jsx57("div", { className: "size-5", children: /* @__PURE__ */ jsx57(SearchIcon, {}) }),
+        /* @__PURE__ */ jsxs38("div", { className: "flex flex-1 flex-wrap items-center gap-[8px]", children: [
           /* @__PURE__ */ jsx57(
+            TagSearch,
+            {
+              removeSearchItems,
+              selectedTags,
+              filterBy,
+              setFilterBy
+            }
+          ),
+          /* @__PURE__ */ jsx57(
+            "input",
+            {
+              value: searchString,
+              className: "h-5 w-fit flex-1 border-none bg-transparent outline-none min-w-[50px] text-sm",
+              placeholder: instance.t("search..."),
+              onChange: (e3) => {
+                onSearchString(e3.target.value);
+                setShowPopupFilter(false);
+              },
+              onKeyUp: (e3) => e3.preventDefault()
+            }
+          ),
+          /* @__PURE__ */ jsx57(
+            SearchList,
+            {
+              handleAddTagSearch,
+              searchBy,
+              searchString
+            }
+          )
+        ] }),
+        (showFiltersGroups || filterBy?.length > 0 || groupBy?.length > 0) && /* @__PURE__ */ jsxs38(Fragment9, { children: [
+          /* @__PURE__ */ jsxs38(
             "div",
             {
-              className: `flex h-full cursor-pointer items-center justify-center px-[10px] max-w-fit`,
+              className: `flex h-full gap-2 cursor-pointer items-center justify-center max-w-fit`,
               onClick: (e3) => {
                 e3.stopPropagation();
                 setShowPopupFilter((prev2) => !prev2);
               },
-              children: /* @__PURE__ */ jsx57("button", { className: "w-max cursor-pointer", children: /* @__PURE__ */ jsx57(
-                ChevronBottomIcon,
-                {
-                  className: `h-5 w-5 min-w-fit transition-all ${showPopupFilter ? "rotate-180 " : ""}`
-                }
-              ) })
+              children: [
+                /* @__PURE__ */ jsx57("div", { className: "w-[1px] h-[28px] bg-[var(--stroke-default)]" }),
+                /* @__PURE__ */ jsx57(
+                  ChevronBottomIcon,
+                  {
+                    className: `h-5 w-5 min-w-fit transition-all ${showPopupFilter ? "rotate-180 " : ""}`
+                  }
+                )
+              ]
             }
           ),
           showPopupFilter && /* @__PURE__ */ jsx57(
@@ -17809,12 +17818,12 @@ var CheckboxField = (props) => {
     {
       name: name2 ?? "",
       control: methods?.control,
-      render: ({ field }) => /* @__PURE__ */ jsx72("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx72(
-        "input",
+      render: ({ field }) => /* @__PURE__ */ jsx72(
+        "div",
         {
-          ...field,
-          onChange: (e3) => {
-            const checked = e3.target.checked;
+          className: "flex items-center gap-2",
+          onClick: () => {
+            const checked = !field.value;
             if (!isEditTable && readonly) return;
             methods.setValue(name2, checked, { shouldDirty: true });
             field.onChange(checked);
@@ -17822,13 +17831,28 @@ var CheckboxField = (props) => {
               onChange2(name2 ?? "", checked);
             }
           },
-          type: "checkbox",
-          disabled: readonly,
-          required: !invisible && required,
-          className: "custom-checkbox",
-          checked: field.value ?? false
+          children: /* @__PURE__ */ jsx72(
+            "input",
+            {
+              ...field,
+              onChange: (e3) => {
+                const checked = e3.target.checked;
+                if (!isEditTable && readonly) return;
+                methods.setValue(name2, checked, { shouldDirty: true });
+                field.onChange(checked);
+                if (onChange2) {
+                  onChange2(name2 ?? "", checked);
+                }
+              },
+              type: "checkbox",
+              disabled: readonly,
+              required: !invisible && required,
+              className: "custom-checkbox",
+              checked: field.value ?? false
+            }
+          )
         }
-      ) })
+      )
     }
   );
 };
@@ -33685,7 +33709,7 @@ var Many2ManyField = (props) => {
                 !isDataLoading && isDataFetched || isPlaceholderData ? /* @__PURE__ */ jsx102("div", { className: "relative overflow-y-auto", children: /* @__PURE__ */ jsx102("div", { className: "relative h-full w-full", children: /* @__PURE__ */ jsx102(
                   "div",
                   {
-                    className: `border-[1px] h-full border-solid border-[#dbe0e6] rounded-[10px] relative w-full overflow-hidden`,
+                    className: `border-y h-full border-solid border-[#dbe0e6] rounded-[10px] relative w-full overflow-hidden`,
                     children: /* @__PURE__ */ jsx102("div", { className: "flex flex-col gap-[16px] w-full h-full", children: /* @__PURE__ */ jsx102("div", { className: `relative w-full h-full`, children: /* @__PURE__ */ jsx102(
                       "div",
                       {

package/package.json

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