baaz-custom-components 5.2.1 → 5.2.2

package/dist/index.d.mts

@@ -148,8 +148,8 @@ interface SelectionAction {
     icon?: React__default.ReactNode;
 }
 interface GridSelectionProps {
-    getSelectedIds: () => RowId[];
     selectionEnabled?: boolean;
+    selectedIds?: RowId[];
     onRowSelectionChange?: (id: RowId, rowData: AnyRow, checked: boolean) => void;
     onSelectAllPage?: (pageData: AnyRow[], checked: boolean) => void;
 }

package/dist/index.d.ts

@@ -148,8 +148,8 @@ interface SelectionAction {
     icon?: React__default.ReactNode;
 }
 interface GridSelectionProps {
-    getSelectedIds: () => RowId[];
     selectionEnabled?: boolean;
+    selectedIds?: RowId[];
     onRowSelectionChange?: (id: RowId, rowData: AnyRow, checked: boolean) => void;
     onSelectAllPage?: (pageData: AnyRow[], checked: boolean) => void;
 }

package/dist/index.js

@@ -1947,7 +1947,7 @@ var CustomBreadcrumb = ({
 var breadcrumb_default = CustomBreadcrumb;
 
 // src/components/custom/grid/index.tsx
-var import_react9 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 var import_react_grid = require("@svar-ui/react-grid");
 
 // src/utils/exportPdf.ts
@@ -2039,13 +2039,13 @@ var Filters = ({
       }
     ]);
   };
-  const updateCondition = (id, next) => {
+  const updateCondition = (id3, next) => {
     setConditions(
-      (prev) => prev.map((c) => c.id === id ? __spreadValues(__spreadValues({}, c), next) : c)
+      (prev) => prev.map((c) => c.id === id3 ? __spreadValues(__spreadValues({}, c), next) : c)
     );
   };
-  const deleteCondition = (id) => {
-    const updatedConditions = conditions.filter((c) => c.id !== id);
+  const deleteCondition = (id3) => {
+    const updatedConditions = conditions.filter((c) => c.id !== id3);
     setConditions(updatedConditions);
     if (updatedConditions.length === 0) {
       setFilterMenu(false);
@@ -2526,32 +2526,62 @@ function GridHeader({
 var gridHeader_default = import_react6.default.memo(GridHeader);
 
 // src/components/custom/grid/checkboxCell/checkBoxCell.tsx
-var import_react7 = __toESM(require("react"));
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var CheckboxCell = ({ row, api, column }) => {
-  const [isSelected, setIsSelected] = (0, import_react7.useState)(
-    () => {
-      var _a;
-      return ((_a = api.getState().selectedRows) != null ? _a : []).includes(row.id);
+var import_react8 = __toESM(require("react"));
+
+// node_modules/@svar-ui/lib-react/dist/index.js
+var import_react7 = require("react");
+
+// node_modules/@svar-ui/lib-dom/dist/index.js
+function getEnv() {
+  return {
+    detect: () => true,
+    addEvent: function(node, event, handler) {
+      node.addEventListener(event, handler);
+      return () => node.removeEventListener(event, handler);
+    },
+    addGlobalEvent: function(event, handler) {
+      document.addEventListener(event, handler);
+      return () => document.removeEventListener(event, handler);
+    },
+    getTopNode: function() {
+      return window.document.body;
     }
-  );
+  };
+}
+var env = getEnv();
+var id2 = (/* @__PURE__ */ new Date()).valueOf();
+
+// node_modules/@svar-ui/lib-react/dist/index.js
+function useWritable(writable2, initialValue, name) {
+  const [state, setState] = (0, import_react7.useState)(() => initialValue);
+  if (!writable2) console.warn(`Writable ${name} is not defined`);
   (0, import_react7.useEffect)(() => {
-    const unsub = api.on("select-row", (ev) => {
-      var _a;
-      if ((ev == null ? void 0 : ev.id) === row.id) {
-        setIsSelected(
-          ((_a = api.getState().selectedRows) != null ? _a : []).includes(row.id)
-        );
-      }
+    if (!writable2) return;
+    const unsubscribe = writable2.subscribe((newValue) => {
+      setState(() => newValue);
     });
-    return () => typeof unsub === "function" && unsub();
-  }, [api, row.id]);
+    return unsubscribe;
+  }, [writable2]);
+  return state;
+}
+function useStore(store, name) {
+  const s = store.getState();
+  const r = store.getReactiveState();
+  return useWritable(r[name], s[name], name);
+}
+
+// src/components/custom/grid/checkboxCell/checkBoxCell.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var CheckboxCell = ({ row, api, column }) => {
+  console.log("CheckboxCell rendered");
+  const selectedRows = useStore(api, "selectedRows");
+  const isSelected = selectedRows.includes(row.id);
   const handleChange = (e) => {
     var _a, _b;
     e.stopPropagation();
-    const checked = e.target.checked;
-    api.exec("select-row", { id: row.id, mode: checked, toggle: true });
-    (_b = (_a = column == null ? void 0 : column.config) == null ? void 0 : _a.onSelectionChange) == null ? void 0 : _b.call(_a, row.id, row, checked);
+    const isChecked = e.target.checked;
+    api.exec("select-row", { id: row.id, mode: isChecked, toggle: true });
+    (_b = (_a = column == null ? void 0 : column.config) == null ? void 0 : _a.onSelectionChange) == null ? void 0 : _b.call(_a, row.id, row, isChecked);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "div",
@@ -2571,37 +2601,57 @@ var CheckboxCell = ({ row, api, column }) => {
     }
   );
 };
-var checkBoxCell_default = import_react7.default.memo(CheckboxCell);
+var checkBoxCell_default = import_react8.default.memo(CheckboxCell, (prev, next) => {
+  return prev.row.id !== next.row.id;
+});
 
 // src/components/custom/grid/checkboxCell/headerCheckBox.tsx
-var import_react8 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var HeaderCheckbox = ({ api, column }) => {
-  var _a, _b, _c;
-  const checkboxRef = (0, import_react8.useRef)(null);
-  const [, forceUpdate] = (0, import_react8.useReducer)((x) => x + 1, 0);
-  (0, import_react8.useEffect)(() => {
-    const unsub = api.on("select-row", () => forceUpdate());
-    return () => typeof unsub === "function" && unsub();
+  var _a;
+  const checkboxRef = (0, import_react9.useRef)(null);
+  const computeState = () => {
+    var _a2, _b, _c;
+    const pageData = (_b = (_a2 = column == null ? void 0 : column.config) == null ? void 0 : _a2.getPageData()) != null ? _b : [];
+    const selectedRows = (_c = api.getState().selectedRows) != null ? _c : [];
+    const selectedOnPage = pageData.filter(
+      (r) => selectedRows.includes(r.id)
+    ).length;
+    return {
+      allSelected: pageData.length > 0 && selectedOnPage === pageData.length,
+      someSelected: selectedOnPage > 0 && selectedOnPage < pageData.length
+    };
+  };
+  const [, forceUpdate] = (0, import_react9.useReducer)((x) => x + 1, 0);
+  (0, import_react9.useEffect)(() => {
+    const unsub = api.on("select-row", () => {
+      forceUpdate();
+    });
+    return () => {
+      if (typeof unsub === "function") unsub();
+    };
   }, [api]);
-  const pageData = (_b = (_a = column == null ? void 0 : column.config) == null ? void 0 : _a.getPageData()) != null ? _b : [];
-  const selectedRows = (_c = api.getState().selectedRows) != null ? _c : [];
-  const selectedOnPage = pageData.filter(
-    (r) => selectedRows.includes(r.id)
-  ).length;
-  const allSelected = pageData.length > 0 && selectedOnPage === pageData.length;
-  const someSelected = selectedOnPage > 0 && selectedOnPage < pageData.length;
-  (0, import_react8.useEffect)(() => {
-    if (checkboxRef.current) checkboxRef.current.indeterminate = someSelected;
-  }, [someSelected]);
+  (0, import_react9.useEffect)(() => {
+    var _a2;
+    (_a2 = column == null ? void 0 : column.config) == null ? void 0 : _a2.clearToken;
+    forceUpdate();
+  }, [(_a = column == null ? void 0 : column.config) == null ? void 0 : _a.clearToken]);
+  const state = computeState();
+  (0, import_react9.useEffect)(() => {
+    if (checkboxRef.current) {
+      checkboxRef.current.indeterminate = state.someSelected;
+    }
+  }, [state.someSelected]);
   const handleChange = (e) => {
-    var _a2, _b2;
+    var _a2, _b, _c, _d;
     e.stopPropagation();
-    const checked = e.target.checked;
-    pageData.forEach(
-      (row) => api.exec("select-row", { id: row.id, mode: checked, toggle: true })
-    );
-    (_b2 = (_a2 = column == null ? void 0 : column.config) == null ? void 0 : _a2.onSelectAllPage) == null ? void 0 : _b2.call(_a2, pageData, checked);
+    const isChecked = e.target.checked;
+    const pageData = (_b = (_a2 = column == null ? void 0 : column.config) == null ? void 0 : _a2.getPageData()) != null ? _b : [];
+    pageData.forEach((row) => {
+      api.exec("select-row", { id: row.id, mode: isChecked, toggle: true });
+    });
+    (_d = (_c = column == null ? void 0 : column.config) == null ? void 0 : _c.onSelectAllPage) == null ? void 0 : _d.call(_c, pageData, isChecked);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "div",
@@ -2614,7 +2664,7 @@ var HeaderCheckbox = ({ api, column }) => {
         {
           ref: checkboxRef,
           type: "checkbox",
-          checked: allSelected,
+          checked: state.allSelected,
           onChange: handleChange,
           className: "w-4 h-4 rounded border border-border bg-background accent-primary cursor-pointer focus:outline-none focus:ring-1 focus:ring-primary"
         }
@@ -2622,21 +2672,27 @@ var HeaderCheckbox = ({ api, column }) => {
     }
   );
 };
-var headerCheckBox_default = import_react8.default.memo(HeaderCheckbox);
+var headerCheckBox_default = import_react9.default.memo(HeaderCheckbox);
 
 // src/components/custom/grid/utils/buildCheckboxColumn.tsx
 function buildCheckboxColumn({
   getPageData,
   onSelectionChange,
-  onSelectAllPage
+  onSelectAllPage,
+  clearToken
 }) {
-  const config = { getPageData, onSelectionChange, onSelectAllPage };
+  const configRef = {
+    getPageData,
+    onSelectionChange,
+    onSelectAllPage,
+    clearToken
+  };
   return {
     id: "__selection__",
     width: 58,
     sortable: false,
     resize: false,
-    config,
+    config: configRef,
     header: { cell: headerCheckBox_default },
     cell: checkBoxCell_default
   };
@@ -2644,7 +2700,7 @@ function buildCheckboxColumn({
 
 // src/components/custom/grid/index.tsx
 var import_jsx_runtime28 = require("react/jsx-runtime");
-var Grid = (0, import_react9.forwardRef)(
+var Grid = (0, import_react10.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       data,
@@ -2662,9 +2718,11 @@ var Grid = (0, import_react9.forwardRef)(
       children,
       onFocusCell = () => false,
       selectionEnabled = false,
-      getSelectedIds,
+      selectedIds = [],
       onRowSelectionChange,
       onSelectAllPage,
+      selectedCount,
+      selectedData,
       selectionActions,
       onSelectionAction,
       onClearSelection
@@ -2684,139 +2742,140 @@ var Grid = (0, import_react9.forwardRef)(
       "children",
       "onFocusCell",
       "selectionEnabled",
-      "getSelectedIds",
+      "selectedIds",
       "onRowSelectionChange",
       "onSelectAllPage",
+      "selectedCount",
+      "selectedData",
       "selectionActions",
       "onSelectionAction",
       "onClearSelection"
     ]);
-    const apiRef = (0, import_react9.useRef)(null);
-    const containerRef = (0, import_react9.useRef)(null);
-    const [internalSelectedCount, setInternalSelectedCount] = (0, import_react9.useState)(0);
-    const dataRef = (0, import_react9.useRef)(data);
-    (0, import_react9.useEffect)(() => {
+    var _a2;
+    console.log("Grid rendered");
+    const apiRef = (0, import_react10.useRef)(null);
+    const containerRef = (0, import_react10.useRef)(null);
+    const dataRef = (0, import_react10.useRef)(data);
+    (0, import_react10.useEffect)(() => {
       dataRef.current = data;
     }, [data]);
-    const onRowSelectionChangeRef = (0, import_react9.useRef)(onRowSelectionChange);
-    (0, import_react9.useEffect)(() => {
+    const onRowSelectionChangeRef = (0, import_react10.useRef)(onRowSelectionChange);
+    (0, import_react10.useEffect)(() => {
       onRowSelectionChangeRef.current = onRowSelectionChange;
     }, [onRowSelectionChange]);
-    const onSelectAllPageRef = (0, import_react9.useRef)(onSelectAllPage);
-    (0, import_react9.useEffect)(() => {
+    const onSelectAllPageRef = (0, import_react10.useRef)(onSelectAllPage);
+    (0, import_react10.useEffect)(() => {
       onSelectAllPageRef.current = onSelectAllPage;
     }, [onSelectAllPage]);
-    (0, import_react9.useImperativeHandle)(ref, () => apiRef.current, []);
-    const getSelectedData = (0, import_react9.useCallback)(() => {
-      var _a2, _b2, _c;
-      const ids = (_b2 = (_a2 = apiRef.current) == null ? void 0 : _a2.getState().selectedRows) != null ? _b2 : [];
-      return ((_c = dataRef.current) != null ? _c : []).filter((row) => ids.includes(row.id));
-    }, []);
-    const resolvedColumns = (0, import_react9.useMemo)(() => {
-      if (!selectionEnabled || columns.length === 0) return columns;
+    (0, import_react10.useImperativeHandle)(ref, () => apiRef.current, []);
+    const clearTokenRef = (0, import_react10.useRef)(0);
+    const prevSelectedCountRef = (0, import_react10.useRef)(selectedCount != null ? selectedCount : 0);
+    if (((_a2 = prevSelectedCountRef.current) != null ? _a2 : 0) > 0 && (selectedCount != null ? selectedCount : 0) === 0) {
+      clearTokenRef.current += 1;
+    }
+    prevSelectedCountRef.current = selectedCount != null ? selectedCount : 0;
+    const resolvedColumns = (0, import_react10.useMemo)(() => {
+      if (!selectionEnabled) return columns;
+      if (columns.length === 0) return columns;
       const checkboxCol = buildCheckboxColumn({
         getPageData: () => {
-          var _a2;
-          return (_a2 = dataRef.current) != null ? _a2 : [];
+          var _a3;
+          return (_a3 = dataRef.current) != null ? _a3 : [];
         },
-        onSelectionChange: (id, rowData, checked) => {
-          var _a2;
-          (_a2 = onRowSelectionChangeRef.current) == null ? void 0 : _a2.call(onRowSelectionChangeRef, id, rowData, checked);
+        onSelectionChange: (id3, rowData, checked) => {
+          var _a3;
+          (_a3 = onRowSelectionChangeRef.current) == null ? void 0 : _a3.call(onRowSelectionChangeRef, id3, rowData, checked);
         },
         onSelectAllPage: (pageData, checked) => {
-          var _a2;
-          (_a2 = onSelectAllPageRef.current) == null ? void 0 : _a2.call(onSelectAllPageRef, pageData, checked);
-        }
+          var _a3;
+          (_a3 = onSelectAllPageRef.current) == null ? void 0 : _a3.call(onSelectAllPageRef, pageData, checked);
+        },
+        clearToken: clearTokenRef.current
       });
       return [checkboxCol, ...columns];
-    }, [selectionEnabled, columns]);
-    const resizeColumns = (0, import_react9.useCallback)(() => {
+    }, [selectionEnabled, columns, clearTokenRef.current]);
+    const resizeColumns = (0, import_react10.useCallback)(() => {
       const api = apiRef.current;
       const container = containerRef.current;
       if (!api || !container) return;
       const gridWidth = container.clientWidth;
-      const isFixed = (col) => col.id === "__selection__";
-      const resizable = resolvedColumns.filter((col) => !isFixed(col));
-      const fixed = resolvedColumns.filter((col) => isFixed(col));
-      const fixedTotal = fixed.reduce((sum, col) => {
-        var _a2, _b2, _c;
-        const w = (_c = (_b2 = (_a2 = api.getColumn(col.id)) == null ? void 0 : _a2.width) != null ? _b2 : col.width) != null ? _c : 0;
-        return sum + (isNaN(w) ? 0 : w);
+      const isFixedColumn = (col) => col.id === "__selection__";
+      const resizableColumns = resolvedColumns.filter(
+        (col) => !isFixedColumn(col)
+      );
+      const fixedColumns = resolvedColumns.filter(
+        (col) => isFixedColumn(col)
+      );
+      const totalFixedWidth = fixedColumns.reduce((sum, col) => {
+        var _a3, _b2;
+        const column = api.getColumn(col.id);
+        const width = (_b2 = (_a3 = column == null ? void 0 : column.width) != null ? _a3 : col.width) != null ? _b2 : 0;
+        return sum + (isNaN(width) ? 0 : width);
       }, 0);
-      const available = Math.max(gridWidth - fixedTotal, 0);
+      const availableWidth = Math.max(gridWidth - totalFixedWidth, 0);
       if (data && data.length > 0) {
-        resizable.forEach(
-          (col) => api.exec("resize-column", { id: col.id, auto: "data" })
-        );
-        const autoTotal = resizable.reduce((sum, col) => {
-          var _a2, _b2;
-          const w = (_b2 = (_a2 = api.getColumn(col.id)) == null ? void 0 : _a2.width) != null ? _b2 : 0;
-          return sum + (isNaN(w) ? 0 : w);
+        resizableColumns.forEach((col) => {
+          api.exec("resize-column", { id: col.id, auto: "data" });
+        });
+        const totalAutoWidth = resizableColumns.reduce((sum, col) => {
+          var _a3;
+          const column = api.getColumn(col.id);
+          const width = (_a3 = column == null ? void 0 : column.width) != null ? _a3 : 0;
+          return sum + (isNaN(width) ? 0 : width);
         }, 0);
-        if (autoTotal < available && resizable.length > 0) {
-          const extra = (available - autoTotal) / resizable.length;
-          resizable.forEach((col) => {
-            var _a2, _b2;
-            const w = (_b2 = (_a2 = api.getColumn(col.id)) == null ? void 0 : _a2.width) != null ? _b2 : 0;
-            if (!isNaN(w))
-              api.exec("resize-column", { id: col.id, width: w + extra });
+        if (totalAutoWidth < availableWidth && resizableColumns.length > 0) {
+          const extra = (availableWidth - totalAutoWidth) / resizableColumns.length;
+          resizableColumns.forEach((col) => {
+            var _a3;
+            const column = api.getColumn(col.id);
+            const currentWidth = (_a3 = column == null ? void 0 : column.width) != null ? _a3 : 0;
+            if (!isNaN(currentWidth)) {
+              api.exec("resize-column", {
+                id: col.id,
+                width: currentWidth + extra
+              });
+            }
           });
         }
       } else {
-        const eq = resizable.length > 0 ? available / resizable.length : 0;
-        resizable.forEach(
-          (col) => api.exec("resize-column", { id: col.id, width: eq })
-        );
+        const equalWidth = resizableColumns.length > 0 ? availableWidth / resizableColumns.length : 0;
+        resizableColumns.forEach((col) => {
+          api.exec("resize-column", {
+            id: col.id,
+            width: equalWidth
+          });
+        });
       }
     }, [resolvedColumns, data]);
-    const init = (0, import_react9.useCallback)(
+    (0, import_react10.useEffect)(() => {
+      if (!containerRef.current) return;
+      const observer = new ResizeObserver(() => resizeColumns());
+      observer.observe(containerRef.current);
+      return () => observer.disconnect();
+    }, [resizeColumns]);
+    const init = (0, import_react10.useCallback)(
       (api) => {
         apiRef.current = api;
         resizeColumns();
         api.intercept("focus-cell", onFocusCell);
-        if (selectionEnabled) {
-          api.on("select-row", () => {
-            var _a2;
-            setInternalSelectedCount(
-              ((_a2 = api.getState().selectedRows) != null ? _a2 : []).length
-            );
-          });
-        }
       },
-      [resizeColumns, onFocusCell, selectionEnabled]
+      [resizeColumns, onFocusCell]
     );
-    (0, import_react9.useEffect)(() => {
-      if (!containerRef.current) return;
-      const observer = new ResizeObserver(() => resizeColumns());
-      observer.observe(containerRef.current);
-      return () => observer.disconnect();
-    }, [resizeColumns]);
-    (0, import_react9.useEffect)(() => {
-      if (!selectionEnabled || !getSelectedIds || !apiRef.current) return;
-      const pageIds = new Set((data != null ? data : []).map((r) => r.id));
-      const toRestore = getSelectedIds().filter((id) => pageIds.has(id));
-      toRestore.forEach(
-        (id) => apiRef.current.exec("select-row", { id, mode: true })
-      );
-    }, [data, selectionEnabled, getSelectedIds]);
-    const handleClearSelection = (0, import_react9.useCallback)(() => {
-      var _a2;
-      const api = apiRef.current;
-      if (!api) return;
-      const ids = [...(_a2 = api.getState().selectedRows) != null ? _a2 : []];
-      ids.forEach((id) => api.exec("select-row", { id, mode: false }));
-      onClearSelection == null ? void 0 : onClearSelection();
-    }, [onClearSelection]);
-    const handleExportPdf = (0, import_react9.useCallback)(() => {
+    const getSelectedData = () => {
+      var _a3, _b2;
+      const selected = (_b2 = (_a3 = apiRef.current) == null ? void 0 : _a3.getState().selectedRows) != null ? _b2 : [];
+      return data.filter((row) => selected.includes(row.id));
+    };
+    const handleExportPdf = (0, import_react10.useCallback)(() => {
       const selected = getSelectedData();
       if (selected.length) exportPdf(selected, fileName);
       else onExportPdf == null ? void 0 : onExportPdf();
-    }, [getSelectedData, fileName, onExportPdf]);
-    const handleExportExcel = (0, import_react9.useCallback)(() => {
+    }, [data, fileName, onExportPdf]);
+    const handleExportExcel = (0, import_react10.useCallback)(() => {
       const selected = getSelectedData();
       if (selected.length) exportExcel(selected, fileName);
       else onExportExcel == null ? void 0 : onExportExcel();
-    }, [getSelectedData, fileName, onExportExcel]);
+    }, [data, fileName, onExportExcel]);
     return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "w-full h-full flex flex-col overflow-hidden", children: [
       /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         gridHeader_default,
@@ -2831,11 +2890,11 @@ var Grid = (0, import_react9.forwardRef)(
           filterList: rest.filterList,
           onFilterChange,
           initialFilters,
-          selectedCount: internalSelectedCount,
-          selectedData: getSelectedData(),
+          selectedCount,
+          selectedData,
           selectionActions,
           onSelectionAction,
-          onClearSelection: handleClearSelection,
+          onClearSelection,
           children
         }
       ),
@@ -2850,6 +2909,7 @@ var Grid = (0, import_react9.forwardRef)(
               data,
               columns: resolvedColumns,
               init,
+              selectedRows: selectionEnabled ? selectedIds : void 0,
               select: selectionEnabled ? false : rest.select
             })
           ) }) })
@@ -2858,11 +2918,11 @@ var Grid = (0, import_react9.forwardRef)(
     ] });
   }
 );
-var grid_default = import_react9.default.memo(Grid);
+var grid_default = import_react10.default.memo(Grid);
 
 // src/components/custom/grid/sortableHeaderCell.tsx
 var import_lucide_react15 = require("lucide-react");
-var import_react10 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var SortableHeaderCell = ({ cell, sortKey, sortOrder, onSortChange }) => {
   if (!(cell == null ? void 0 : cell.id)) return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: cell == null ? void 0 : cell.text });
@@ -2892,7 +2952,7 @@ var SortableHeaderCell = ({ cell, sortKey, sortOrder, onSortChange }) => {
     }
   );
 };
-var sortableHeaderCell_default = import_react10.default.memo(SortableHeaderCell, (prev, next) => {
+var sortableHeaderCell_default = import_react11.default.memo(SortableHeaderCell, (prev, next) => {
   var _a, _b, _c, _d;
   if (((_a = prev.cell) == null ? void 0 : _a.id) !== ((_b = next.cell) == null ? void 0 : _b.id)) return false;
   if (((_c = prev.cell) == null ? void 0 : _c.text) !== ((_d = next.cell) == null ? void 0 : _d.text)) return false;
@@ -3019,7 +3079,7 @@ var pagination_default = Pagination;
 
 // src/components/custom/toolbar/index.tsx
 var import_lucide_react17 = require("lucide-react");
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var SlideToolbar = ({
   items,
@@ -3032,9 +3092,9 @@ var SlideToolbar = ({
   className = ""
 }) => {
   const resolvedItems = items != null ? items : children ? void 0 : [];
-  const [open, setOpen] = (0, import_react11.useState)(false);
-  const panelRef = (0, import_react11.useRef)(null);
-  (0, import_react11.useEffect)(() => {
+  const [open, setOpen] = (0, import_react12.useState)(false);
+  const panelRef = (0, import_react12.useRef)(null);
+  (0, import_react12.useEffect)(() => {
     if (!open || !closeOnBackdrop) return;
     const handlePointerDown = (e) => {
       if (panelRef.current && !panelRef.current.contains(e.target)) {

package/dist/index.mjs

@@ -1911,12 +1911,11 @@ var breadcrumb_default = CustomBreadcrumb;
 // src/components/custom/grid/index.tsx
 import React6, {
   useCallback as useCallback2,
-  useRef as useRef4,
+  useRef as useRef5,
   useImperativeHandle,
   forwardRef,
   useEffect as useEffect9,
-  useMemo as useMemo4,
-  useState as useState9
+  useMemo as useMemo4
 } from "react";
 import { Grid as SvarGrid, WillowDark } from "@svar-ui/react-grid";
 
@@ -2009,13 +2008,13 @@ var Filters = ({
       }
     ]);
   };
-  const updateCondition = (id, next) => {
+  const updateCondition = (id3, next) => {
     setConditions(
-      (prev) => prev.map((c) => c.id === id ? __spreadValues(__spreadValues({}, c), next) : c)
+      (prev) => prev.map((c) => c.id === id3 ? __spreadValues(__spreadValues({}, c), next) : c)
     );
   };
-  const deleteCondition = (id) => {
-    const updatedConditions = conditions.filter((c) => c.id !== id);
+  const deleteCondition = (id3) => {
+    const updatedConditions = conditions.filter((c) => c.id !== id3);
     setConditions(updatedConditions);
     if (updatedConditions.length === 0) {
       setFilterMenu(false);
@@ -2496,32 +2495,62 @@ function GridHeader({
 var gridHeader_default = React3.memo(GridHeader);
 
 // src/components/custom/grid/checkboxCell/checkBoxCell.tsx
-import React4, { useState as useState8, useEffect as useEffect7 } from "react";
-import { jsx as jsx26 } from "react/jsx-runtime";
-var CheckboxCell = ({ row, api, column }) => {
-  const [isSelected, setIsSelected] = useState8(
-    () => {
-      var _a;
-      return ((_a = api.getState().selectedRows) != null ? _a : []).includes(row.id);
+import React4 from "react";
+
+// node_modules/@svar-ui/lib-react/dist/index.js
+import { useState as useState8, useRef as useRef3, useEffect as useEffect7 } from "react";
+
+// node_modules/@svar-ui/lib-dom/dist/index.js
+function getEnv() {
+  return {
+    detect: () => true,
+    addEvent: function(node, event, handler) {
+      node.addEventListener(event, handler);
+      return () => node.removeEventListener(event, handler);
+    },
+    addGlobalEvent: function(event, handler) {
+      document.addEventListener(event, handler);
+      return () => document.removeEventListener(event, handler);
+    },
+    getTopNode: function() {
+      return window.document.body;
     }
-  );
+  };
+}
+var env = getEnv();
+var id2 = (/* @__PURE__ */ new Date()).valueOf();
+
+// node_modules/@svar-ui/lib-react/dist/index.js
+function useWritable(writable2, initialValue, name) {
+  const [state, setState] = useState8(() => initialValue);
+  if (!writable2) console.warn(`Writable ${name} is not defined`);
   useEffect7(() => {
-    const unsub = api.on("select-row", (ev) => {
-      var _a;
-      if ((ev == null ? void 0 : ev.id) === row.id) {
-        setIsSelected(
-          ((_a = api.getState().selectedRows) != null ? _a : []).includes(row.id)
-        );
-      }
+    if (!writable2) return;
+    const unsubscribe = writable2.subscribe((newValue) => {
+      setState(() => newValue);
     });
-    return () => typeof unsub === "function" && unsub();
-  }, [api, row.id]);
+    return unsubscribe;
+  }, [writable2]);
+  return state;
+}
+function useStore(store, name) {
+  const s = store.getState();
+  const r = store.getReactiveState();
+  return useWritable(r[name], s[name], name);
+}
+
+// src/components/custom/grid/checkboxCell/checkBoxCell.tsx
+import { jsx as jsx26 } from "react/jsx-runtime";
+var CheckboxCell = ({ row, api, column }) => {
+  console.log("CheckboxCell rendered");
+  const selectedRows = useStore(api, "selectedRows");
+  const isSelected = selectedRows.includes(row.id);
   const handleChange = (e) => {
     var _a, _b;
     e.stopPropagation();
-    const checked = e.target.checked;
-    api.exec("select-row", { id: row.id, mode: checked, toggle: true });
-    (_b = (_a = column == null ? void 0 : column.config) == null ? void 0 : _a.onSelectionChange) == null ? void 0 : _b.call(_a, row.id, row, checked);
+    const isChecked = e.target.checked;
+    api.exec("select-row", { id: row.id, mode: isChecked, toggle: true });
+    (_b = (_a = column == null ? void 0 : column.config) == null ? void 0 : _a.onSelectionChange) == null ? void 0 : _b.call(_a, row.id, row, isChecked);
   };
   return /* @__PURE__ */ jsx26(
     "div",
@@ -2541,37 +2570,57 @@ var CheckboxCell = ({ row, api, column }) => {
     }
   );
 };
-var checkBoxCell_default = React4.memo(CheckboxCell);
+var checkBoxCell_default = React4.memo(CheckboxCell, (prev, next) => {
+  return prev.row.id !== next.row.id;
+});
 
 // src/components/custom/grid/checkboxCell/headerCheckBox.tsx
-import React5, { useEffect as useEffect8, useRef as useRef3, useReducer } from "react";
+import React5, { useEffect as useEffect8, useRef as useRef4, useReducer } from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
 var HeaderCheckbox = ({ api, column }) => {
-  var _a, _b, _c;
-  const checkboxRef = useRef3(null);
+  var _a;
+  const checkboxRef = useRef4(null);
+  const computeState = () => {
+    var _a2, _b, _c;
+    const pageData = (_b = (_a2 = column == null ? void 0 : column.config) == null ? void 0 : _a2.getPageData()) != null ? _b : [];
+    const selectedRows = (_c = api.getState().selectedRows) != null ? _c : [];
+    const selectedOnPage = pageData.filter(
+      (r) => selectedRows.includes(r.id)
+    ).length;
+    return {
+      allSelected: pageData.length > 0 && selectedOnPage === pageData.length,
+      someSelected: selectedOnPage > 0 && selectedOnPage < pageData.length
+    };
+  };
   const [, forceUpdate] = useReducer((x) => x + 1, 0);
   useEffect8(() => {
-    const unsub = api.on("select-row", () => forceUpdate());
-    return () => typeof unsub === "function" && unsub();
+    const unsub = api.on("select-row", () => {
+      forceUpdate();
+    });
+    return () => {
+      if (typeof unsub === "function") unsub();
+    };
   }, [api]);
-  const pageData = (_b = (_a = column == null ? void 0 : column.config) == null ? void 0 : _a.getPageData()) != null ? _b : [];
-  const selectedRows = (_c = api.getState().selectedRows) != null ? _c : [];
-  const selectedOnPage = pageData.filter(
-    (r) => selectedRows.includes(r.id)
-  ).length;
-  const allSelected = pageData.length > 0 && selectedOnPage === pageData.length;
-  const someSelected = selectedOnPage > 0 && selectedOnPage < pageData.length;
   useEffect8(() => {
-    if (checkboxRef.current) checkboxRef.current.indeterminate = someSelected;
-  }, [someSelected]);
+    var _a2;
+    (_a2 = column == null ? void 0 : column.config) == null ? void 0 : _a2.clearToken;
+    forceUpdate();
+  }, [(_a = column == null ? void 0 : column.config) == null ? void 0 : _a.clearToken]);
+  const state = computeState();
+  useEffect8(() => {
+    if (checkboxRef.current) {
+      checkboxRef.current.indeterminate = state.someSelected;
+    }
+  }, [state.someSelected]);
   const handleChange = (e) => {
-    var _a2, _b2;
+    var _a2, _b, _c, _d;
     e.stopPropagation();
-    const checked = e.target.checked;
-    pageData.forEach(
-      (row) => api.exec("select-row", { id: row.id, mode: checked, toggle: true })
-    );
-    (_b2 = (_a2 = column == null ? void 0 : column.config) == null ? void 0 : _a2.onSelectAllPage) == null ? void 0 : _b2.call(_a2, pageData, checked);
+    const isChecked = e.target.checked;
+    const pageData = (_b = (_a2 = column == null ? void 0 : column.config) == null ? void 0 : _a2.getPageData()) != null ? _b : [];
+    pageData.forEach((row) => {
+      api.exec("select-row", { id: row.id, mode: isChecked, toggle: true });
+    });
+    (_d = (_c = column == null ? void 0 : column.config) == null ? void 0 : _c.onSelectAllPage) == null ? void 0 : _d.call(_c, pageData, isChecked);
   };
   return /* @__PURE__ */ jsx27(
     "div",
@@ -2584,7 +2633,7 @@ var HeaderCheckbox = ({ api, column }) => {
         {
           ref: checkboxRef,
           type: "checkbox",
-          checked: allSelected,
+          checked: state.allSelected,
           onChange: handleChange,
           className: "w-4 h-4 rounded border border-border bg-background accent-primary cursor-pointer focus:outline-none focus:ring-1 focus:ring-primary"
         }
@@ -2598,15 +2647,21 @@ var headerCheckBox_default = React5.memo(HeaderCheckbox);
 function buildCheckboxColumn({
   getPageData,
   onSelectionChange,
-  onSelectAllPage
+  onSelectAllPage,
+  clearToken
 }) {
-  const config = { getPageData, onSelectionChange, onSelectAllPage };
+  const configRef = {
+    getPageData,
+    onSelectionChange,
+    onSelectAllPage,
+    clearToken
+  };
   return {
     id: "__selection__",
     width: 58,
     sortable: false,
     resize: false,
-    config,
+    config: configRef,
     header: { cell: headerCheckBox_default },
     cell: checkBoxCell_default
   };
@@ -2632,9 +2687,11 @@ var Grid = forwardRef(
       children,
       onFocusCell = () => false,
       selectionEnabled = false,
-      getSelectedIds,
+      selectedIds = [],
       onRowSelectionChange,
       onSelectAllPage,
+      selectedCount,
+      selectedData,
       selectionActions,
       onSelectionAction,
       onClearSelection
@@ -2654,139 +2711,140 @@ var Grid = forwardRef(
       "children",
       "onFocusCell",
       "selectionEnabled",
-      "getSelectedIds",
+      "selectedIds",
       "onRowSelectionChange",
       "onSelectAllPage",
+      "selectedCount",
+      "selectedData",
       "selectionActions",
       "onSelectionAction",
       "onClearSelection"
     ]);
-    const apiRef = useRef4(null);
-    const containerRef = useRef4(null);
-    const [internalSelectedCount, setInternalSelectedCount] = useState9(0);
-    const dataRef = useRef4(data);
+    var _a2;
+    console.log("Grid rendered");
+    const apiRef = useRef5(null);
+    const containerRef = useRef5(null);
+    const dataRef = useRef5(data);
     useEffect9(() => {
       dataRef.current = data;
     }, [data]);
-    const onRowSelectionChangeRef = useRef4(onRowSelectionChange);
+    const onRowSelectionChangeRef = useRef5(onRowSelectionChange);
     useEffect9(() => {
       onRowSelectionChangeRef.current = onRowSelectionChange;
     }, [onRowSelectionChange]);
-    const onSelectAllPageRef = useRef4(onSelectAllPage);
+    const onSelectAllPageRef = useRef5(onSelectAllPage);
     useEffect9(() => {
       onSelectAllPageRef.current = onSelectAllPage;
     }, [onSelectAllPage]);
     useImperativeHandle(ref, () => apiRef.current, []);
-    const getSelectedData = useCallback2(() => {
-      var _a2, _b2, _c;
-      const ids = (_b2 = (_a2 = apiRef.current) == null ? void 0 : _a2.getState().selectedRows) != null ? _b2 : [];
-      return ((_c = dataRef.current) != null ? _c : []).filter((row) => ids.includes(row.id));
-    }, []);
+    const clearTokenRef = useRef5(0);
+    const prevSelectedCountRef = useRef5(selectedCount != null ? selectedCount : 0);
+    if (((_a2 = prevSelectedCountRef.current) != null ? _a2 : 0) > 0 && (selectedCount != null ? selectedCount : 0) === 0) {
+      clearTokenRef.current += 1;
+    }
+    prevSelectedCountRef.current = selectedCount != null ? selectedCount : 0;
     const resolvedColumns = useMemo4(() => {
-      if (!selectionEnabled || columns.length === 0) return columns;
+      if (!selectionEnabled) return columns;
+      if (columns.length === 0) return columns;
       const checkboxCol = buildCheckboxColumn({
         getPageData: () => {
-          var _a2;
-          return (_a2 = dataRef.current) != null ? _a2 : [];
+          var _a3;
+          return (_a3 = dataRef.current) != null ? _a3 : [];
         },
-        onSelectionChange: (id, rowData, checked) => {
-          var _a2;
-          (_a2 = onRowSelectionChangeRef.current) == null ? void 0 : _a2.call(onRowSelectionChangeRef, id, rowData, checked);
+        onSelectionChange: (id3, rowData, checked) => {
+          var _a3;
+          (_a3 = onRowSelectionChangeRef.current) == null ? void 0 : _a3.call(onRowSelectionChangeRef, id3, rowData, checked);
         },
         onSelectAllPage: (pageData, checked) => {
-          var _a2;
-          (_a2 = onSelectAllPageRef.current) == null ? void 0 : _a2.call(onSelectAllPageRef, pageData, checked);
-        }
+          var _a3;
+          (_a3 = onSelectAllPageRef.current) == null ? void 0 : _a3.call(onSelectAllPageRef, pageData, checked);
+        },
+        clearToken: clearTokenRef.current
       });
       return [checkboxCol, ...columns];
-    }, [selectionEnabled, columns]);
+    }, [selectionEnabled, columns, clearTokenRef.current]);
     const resizeColumns = useCallback2(() => {
       const api = apiRef.current;
       const container = containerRef.current;
       if (!api || !container) return;
       const gridWidth = container.clientWidth;
-      const isFixed = (col) => col.id === "__selection__";
-      const resizable = resolvedColumns.filter((col) => !isFixed(col));
-      const fixed = resolvedColumns.filter((col) => isFixed(col));
-      const fixedTotal = fixed.reduce((sum, col) => {
-        var _a2, _b2, _c;
-        const w = (_c = (_b2 = (_a2 = api.getColumn(col.id)) == null ? void 0 : _a2.width) != null ? _b2 : col.width) != null ? _c : 0;
-        return sum + (isNaN(w) ? 0 : w);
+      const isFixedColumn = (col) => col.id === "__selection__";
+      const resizableColumns = resolvedColumns.filter(
+        (col) => !isFixedColumn(col)
+      );
+      const fixedColumns = resolvedColumns.filter(
+        (col) => isFixedColumn(col)
+      );
+      const totalFixedWidth = fixedColumns.reduce((sum, col) => {
+        var _a3, _b2;
+        const column = api.getColumn(col.id);
+        const width = (_b2 = (_a3 = column == null ? void 0 : column.width) != null ? _a3 : col.width) != null ? _b2 : 0;
+        return sum + (isNaN(width) ? 0 : width);
       }, 0);
-      const available = Math.max(gridWidth - fixedTotal, 0);
+      const availableWidth = Math.max(gridWidth - totalFixedWidth, 0);
       if (data && data.length > 0) {
-        resizable.forEach(
-          (col) => api.exec("resize-column", { id: col.id, auto: "data" })
-        );
-        const autoTotal = resizable.reduce((sum, col) => {
-          var _a2, _b2;
-          const w = (_b2 = (_a2 = api.getColumn(col.id)) == null ? void 0 : _a2.width) != null ? _b2 : 0;
-          return sum + (isNaN(w) ? 0 : w);
+        resizableColumns.forEach((col) => {
+          api.exec("resize-column", { id: col.id, auto: "data" });
+        });
+        const totalAutoWidth = resizableColumns.reduce((sum, col) => {
+          var _a3;
+          const column = api.getColumn(col.id);
+          const width = (_a3 = column == null ? void 0 : column.width) != null ? _a3 : 0;
+          return sum + (isNaN(width) ? 0 : width);
         }, 0);
-        if (autoTotal < available && resizable.length > 0) {
-          const extra = (available - autoTotal) / resizable.length;
-          resizable.forEach((col) => {
-            var _a2, _b2;
-            const w = (_b2 = (_a2 = api.getColumn(col.id)) == null ? void 0 : _a2.width) != null ? _b2 : 0;
-            if (!isNaN(w))
-              api.exec("resize-column", { id: col.id, width: w + extra });
+        if (totalAutoWidth < availableWidth && resizableColumns.length > 0) {
+          const extra = (availableWidth - totalAutoWidth) / resizableColumns.length;
+          resizableColumns.forEach((col) => {
+            var _a3;
+            const column = api.getColumn(col.id);
+            const currentWidth = (_a3 = column == null ? void 0 : column.width) != null ? _a3 : 0;
+            if (!isNaN(currentWidth)) {
+              api.exec("resize-column", {
+                id: col.id,
+                width: currentWidth + extra
+              });
+            }
           });
         }
       } else {
-        const eq = resizable.length > 0 ? available / resizable.length : 0;
-        resizable.forEach(
-          (col) => api.exec("resize-column", { id: col.id, width: eq })
-        );
+        const equalWidth = resizableColumns.length > 0 ? availableWidth / resizableColumns.length : 0;
+        resizableColumns.forEach((col) => {
+          api.exec("resize-column", {
+            id: col.id,
+            width: equalWidth
+          });
+        });
       }
     }, [resolvedColumns, data]);
+    useEffect9(() => {
+      if (!containerRef.current) return;
+      const observer = new ResizeObserver(() => resizeColumns());
+      observer.observe(containerRef.current);
+      return () => observer.disconnect();
+    }, [resizeColumns]);
     const init = useCallback2(
       (api) => {
         apiRef.current = api;
         resizeColumns();
         api.intercept("focus-cell", onFocusCell);
-        if (selectionEnabled) {
-          api.on("select-row", () => {
-            var _a2;
-            setInternalSelectedCount(
-              ((_a2 = api.getState().selectedRows) != null ? _a2 : []).length
-            );
-          });
-        }
       },
-      [resizeColumns, onFocusCell, selectionEnabled]
+      [resizeColumns, onFocusCell]
     );
-    useEffect9(() => {
-      if (!containerRef.current) return;
-      const observer = new ResizeObserver(() => resizeColumns());
-      observer.observe(containerRef.current);
-      return () => observer.disconnect();
-    }, [resizeColumns]);
-    useEffect9(() => {
-      if (!selectionEnabled || !getSelectedIds || !apiRef.current) return;
-      const pageIds = new Set((data != null ? data : []).map((r) => r.id));
-      const toRestore = getSelectedIds().filter((id) => pageIds.has(id));
-      toRestore.forEach(
-        (id) => apiRef.current.exec("select-row", { id, mode: true })
-      );
-    }, [data, selectionEnabled, getSelectedIds]);
-    const handleClearSelection = useCallback2(() => {
-      var _a2;
-      const api = apiRef.current;
-      if (!api) return;
-      const ids = [...(_a2 = api.getState().selectedRows) != null ? _a2 : []];
-      ids.forEach((id) => api.exec("select-row", { id, mode: false }));
-      onClearSelection == null ? void 0 : onClearSelection();
-    }, [onClearSelection]);
+    const getSelectedData = () => {
+      var _a3, _b2;
+      const selected = (_b2 = (_a3 = apiRef.current) == null ? void 0 : _a3.getState().selectedRows) != null ? _b2 : [];
+      return data.filter((row) => selected.includes(row.id));
+    };
     const handleExportPdf = useCallback2(() => {
       const selected = getSelectedData();
       if (selected.length) exportPdf(selected, fileName);
       else onExportPdf == null ? void 0 : onExportPdf();
-    }, [getSelectedData, fileName, onExportPdf]);
+    }, [data, fileName, onExportPdf]);
     const handleExportExcel = useCallback2(() => {
       const selected = getSelectedData();
       if (selected.length) exportExcel(selected, fileName);
       else onExportExcel == null ? void 0 : onExportExcel();
-    }, [getSelectedData, fileName, onExportExcel]);
+    }, [data, fileName, onExportExcel]);
     return /* @__PURE__ */ jsxs20("div", { className: "w-full h-full flex flex-col overflow-hidden", children: [
       /* @__PURE__ */ jsx28(
         gridHeader_default,
@@ -2801,11 +2859,11 @@ var Grid = forwardRef(
           filterList: rest.filterList,
           onFilterChange,
           initialFilters,
-          selectedCount: internalSelectedCount,
-          selectedData: getSelectedData(),
+          selectedCount,
+          selectedData,
           selectionActions,
           onSelectionAction,
-          onClearSelection: handleClearSelection,
+          onClearSelection,
           children
         }
       ),
@@ -2820,6 +2878,7 @@ var Grid = forwardRef(
               data,
               columns: resolvedColumns,
               init,
+              selectedRows: selectionEnabled ? selectedIds : void 0,
               select: selectionEnabled ? false : rest.select
             })
           ) }) })
@@ -2989,7 +3048,7 @@ var pagination_default = Pagination;
 
 // src/components/custom/toolbar/index.tsx
 import { ChevronRight as ChevronRight4, X as X5 } from "lucide-react";
-import { useState as useState10, useRef as useRef5, useEffect as useEffect10 } from "react";
+import { useState as useState9, useRef as useRef6, useEffect as useEffect10 } from "react";
 import { Fragment as Fragment4, jsx as jsx31, jsxs as jsxs23 } from "react/jsx-runtime";
 var SlideToolbar = ({
   items,
@@ -3002,8 +3061,8 @@ var SlideToolbar = ({
   className = ""
 }) => {
   const resolvedItems = items != null ? items : children ? void 0 : [];
-  const [open, setOpen] = useState10(false);
-  const panelRef = useRef5(null);
+  const [open, setOpen] = useState9(false);
+  const panelRef = useRef6(null);
   useEffect10(() => {
     if (!open || !closeOnBackdrop) return;
     const handlePointerDown = (e) => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "baaz-custom-components",
-    "version": "5.2.1",
+    "version": "5.2.2",
     "private": false,
     "sideEffects": false,
     "main": "dist/index.js",