baaz-custom-components 5.2.0 → 5.2.1

package/dist/index.d.mts

@@ -1,5 +1,5 @@
-import * as react from 'react';
-import react__default, { ReactNode } from 'react';
+import * as React$1 from 'react';
+import React__default, { ReactNode } from 'react';
 import { IApi } from '@svar-ui/react-grid';
 
 type NavbarData = NavbarEntry[];
@@ -48,7 +48,7 @@ interface NavbarProps {
     hubIdChangeHandler: (value: string) => void;
 }
 
-declare function Navbar({ navbarData, userData, onLogout, notificationData, router, hubDetails, hubIdEnable, hubIdChangeHandler, notificationHandler, }: NavbarProps): react.JSX.Element | null;
+declare function Navbar({ navbarData, userData, onLogout, notificationData, router, hubDetails, hubIdEnable, hubIdChangeHandler, notificationHandler, }: NavbarProps): React$1.JSX.Element | null;
 
 type BreadcrumbProps = {
     layoutName: string;
@@ -57,7 +57,7 @@ type BreadcrumbProps = {
     pathname?: string;
 };
 
-declare const CustomBreadcrumb: ({ layoutName, includeFrom, pathname, }: BreadcrumbProps) => react.JSX.Element;
+declare const CustomBreadcrumb: ({ layoutName, includeFrom, pathname, }: BreadcrumbProps) => React$1.JSX.Element;
 
 type SortOrder = "asc" | "desc";
 
@@ -145,12 +145,11 @@ type AnyRow = {
 interface SelectionAction {
     id: string;
     label: string;
-    icon?: react__default.ReactNode;
-    needsConfirmation?: boolean;
+    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;
 }
@@ -162,7 +161,7 @@ interface GridHeaderSelectionProps {
     onClearSelection?: () => void;
 }
 
-declare const Grid: react.ForwardRefExoticComponent<GridProps & GridSelectionProps & GridHeaderSelectionProps & react.RefAttributes<IApi | null>>;
+declare const _default$1: React__default.NamedExoticComponent<GridProps & GridSelectionProps & GridHeaderSelectionProps & React__default.RefAttributes<IApi | null>>;
 
 type Props = {
     cell: {
@@ -173,7 +172,7 @@ type Props = {
     sortOrder?: SortOrder | null;
     onSortChange?: (key: string, order: SortOrder) => void;
 };
-declare const _default: react__default.MemoExoticComponent<({ cell, sortKey, sortOrder, onSortChange }: Props) => react__default.JSX.Element>;
+declare const _default: React__default.MemoExoticComponent<({ cell, sortKey, sortOrder, onSortChange }: Props) => React__default.JSX.Element>;
 
 type Pagination$1 = {
     totalCount: number;
@@ -187,7 +186,7 @@ type Pagination$1 = {
     sizeChangerOptions?: number[];
 };
 
-declare function Pagination({ totalCount, count, currentPage, totalPages, pageSize, onPageChange, onPageSizeChange, showSizeChanger, sizeChangerOptions, }: Pagination$1): react.JSX.Element;
+declare function Pagination({ totalCount, count, currentPage, totalPages, pageSize, onPageChange, onPageSizeChange, showSizeChanger, sizeChangerOptions, }: Pagination$1): React$1.JSX.Element;
 
 interface ToolbarItem {
     id: string;
@@ -207,4 +206,4 @@ interface SlideToolbarProps {
 
 declare const SlideToolbar: React.FC<SlideToolbarProps>;
 
-export { type BreadcrumbProps, CustomBreadcrumb, Grid, type GridProps, Navbar, type NavbarData, type NavbarEntry, type NavbarProps, type NotificationDataTypes, Pagination, type Pagination$1 as PaginationProps, type RouteTree, type RouterAdapter, SlideToolbar, type SlideToolbarProps, _default as SortableHeaderCell, type ToolbarItem, type UserData };
+export { type BreadcrumbProps, CustomBreadcrumb, _default$1 as Grid, type GridProps, Navbar, type NavbarData, type NavbarEntry, type NavbarProps, type NotificationDataTypes, Pagination, type Pagination$1 as PaginationProps, type RouteTree, type RouterAdapter, SlideToolbar, type SlideToolbarProps, _default as SortableHeaderCell, type ToolbarItem, type UserData };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import * as react from 'react';
-import react__default, { ReactNode } from 'react';
+import * as React$1 from 'react';
+import React__default, { ReactNode } from 'react';
 import { IApi } from '@svar-ui/react-grid';
 
 type NavbarData = NavbarEntry[];
@@ -48,7 +48,7 @@ interface NavbarProps {
     hubIdChangeHandler: (value: string) => void;
 }
 
-declare function Navbar({ navbarData, userData, onLogout, notificationData, router, hubDetails, hubIdEnable, hubIdChangeHandler, notificationHandler, }: NavbarProps): react.JSX.Element | null;
+declare function Navbar({ navbarData, userData, onLogout, notificationData, router, hubDetails, hubIdEnable, hubIdChangeHandler, notificationHandler, }: NavbarProps): React$1.JSX.Element | null;
 
 type BreadcrumbProps = {
     layoutName: string;
@@ -57,7 +57,7 @@ type BreadcrumbProps = {
     pathname?: string;
 };
 
-declare const CustomBreadcrumb: ({ layoutName, includeFrom, pathname, }: BreadcrumbProps) => react.JSX.Element;
+declare const CustomBreadcrumb: ({ layoutName, includeFrom, pathname, }: BreadcrumbProps) => React$1.JSX.Element;
 
 type SortOrder = "asc" | "desc";
 
@@ -145,12 +145,11 @@ type AnyRow = {
 interface SelectionAction {
     id: string;
     label: string;
-    icon?: react__default.ReactNode;
-    needsConfirmation?: boolean;
+    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;
 }
@@ -162,7 +161,7 @@ interface GridHeaderSelectionProps {
     onClearSelection?: () => void;
 }
 
-declare const Grid: react.ForwardRefExoticComponent<GridProps & GridSelectionProps & GridHeaderSelectionProps & react.RefAttributes<IApi | null>>;
+declare const _default$1: React__default.NamedExoticComponent<GridProps & GridSelectionProps & GridHeaderSelectionProps & React__default.RefAttributes<IApi | null>>;
 
 type Props = {
     cell: {
@@ -173,7 +172,7 @@ type Props = {
     sortOrder?: SortOrder | null;
     onSortChange?: (key: string, order: SortOrder) => void;
 };
-declare const _default: react__default.MemoExoticComponent<({ cell, sortKey, sortOrder, onSortChange }: Props) => react__default.JSX.Element>;
+declare const _default: React__default.MemoExoticComponent<({ cell, sortKey, sortOrder, onSortChange }: Props) => React__default.JSX.Element>;
 
 type Pagination$1 = {
     totalCount: number;
@@ -187,7 +186,7 @@ type Pagination$1 = {
     sizeChangerOptions?: number[];
 };
 
-declare function Pagination({ totalCount, count, currentPage, totalPages, pageSize, onPageChange, onPageSizeChange, showSizeChanger, sizeChangerOptions, }: Pagination$1): react.JSX.Element;
+declare function Pagination({ totalCount, count, currentPage, totalPages, pageSize, onPageChange, onPageSizeChange, showSizeChanger, sizeChangerOptions, }: Pagination$1): React$1.JSX.Element;
 
 interface ToolbarItem {
     id: string;
@@ -207,4 +206,4 @@ interface SlideToolbarProps {
 
 declare const SlideToolbar: React.FC<SlideToolbarProps>;
 
-export { type BreadcrumbProps, CustomBreadcrumb, Grid, type GridProps, Navbar, type NavbarData, type NavbarEntry, type NavbarProps, type NotificationDataTypes, Pagination, type Pagination$1 as PaginationProps, type RouteTree, type RouterAdapter, SlideToolbar, type SlideToolbarProps, _default as SortableHeaderCell, type ToolbarItem, type UserData };
+export { type BreadcrumbProps, CustomBreadcrumb, _default$1 as Grid, type GridProps, Navbar, type NavbarData, type NavbarEntry, type NavbarProps, type NotificationDataTypes, Pagination, type Pagination$1 as PaginationProps, type RouteTree, type RouterAdapter, SlideToolbar, type SlideToolbarProps, _default as SortableHeaderCell, type ToolbarItem, type UserData };

package/dist/index.js

@@ -1947,7 +1947,7 @@ var CustomBreadcrumb = ({
 var breadcrumb_default = CustomBreadcrumb;
 
 // src/components/custom/grid/index.tsx
-var import_react10 = require("react");
+var import_react9 = __toESM(require("react"));
 var import_react_grid = require("@svar-ui/react-grid");
 
 // src/utils/exportPdf.ts
@@ -1981,7 +1981,7 @@ function exportExcel(rows, name) {
 }
 
 // src/components/custom/grid/gridHeader/index.tsx
-var import_react6 = require("react");
+var import_react6 = __toESM(require("react"));
 var import_lucide_react14 = require("lucide-react");
 
 // src/components/custom/grid/gridHeader/components/filters.tsx
@@ -2039,13 +2039,13 @@ var Filters = ({
       }
     ]);
   };
-  const updateCondition = (id3, next) => {
+  const updateCondition = (id, next) => {
     setConditions(
-      (prev) => prev.map((c) => c.id === id3 ? __spreadValues(__spreadValues({}, c), next) : c)
+      (prev) => prev.map((c) => c.id === id ? __spreadValues(__spreadValues({}, c), next) : c)
     );
   };
-  const deleteCondition = (id3) => {
-    const updatedConditions = conditions.filter((c) => c.id !== id3);
+  const deleteCondition = (id) => {
+    const updatedConditions = conditions.filter((c) => c.id !== id);
     setConditions(updatedConditions);
     if (updatedConditions.length === 0) {
       setFilterMenu(false);
@@ -2412,6 +2412,7 @@ function GridHeader({
   onSelectionAction,
   onClearSelection
 }) {
+  console.log("GridHeader rendered");
   const [downloadMenu, setDownloadMenu] = (0, import_react6.useState)(false);
   const [searchOpen, setSearchOpen] = (0, import_react6.useState)(false);
   const downloadRef = (0, import_react6.useRef)(null);
@@ -2509,70 +2510,48 @@ function GridHeader({
               value: searchValue
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { onClick: () => setSearchOpen(false), className: "cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react14.X, { size: 16 }) })
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            "button",
+            {
+              onClick: () => setSearchOpen(false),
+              className: "cursor-pointer",
+              children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react14.X, { size: 16 })
+            }
+          )
         ] })
       }
     ) })
   ] });
 }
-var gridHeader_default = GridHeader;
+var gridHeader_default = import_react6.default.memo(GridHeader);
 
 // src/components/custom/grid/checkboxCell/checkBoxCell.tsx
-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 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 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)(() => {
-    if (!writable2) return;
-    const unsubscribe = writable2.subscribe((newValue) => {
-      setState(() => newValue);
+    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)
+        );
+      }
     });
-    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 }) => {
-  const selectedRows = useStore(api, "selectedRows");
-  const isSelected = selectedRows.includes(row.id);
+    return () => typeof unsub === "function" && unsub();
+  }, [api, row.id]);
   const handleChange = (e) => {
     var _a, _b;
     e.stopPropagation();
-    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);
+    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);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "div",
@@ -2592,55 +2571,37 @@ var CheckboxCell = ({ row, api, column }) => {
     }
   );
 };
-var checkBoxCell_default = import_react8.default.memo(CheckboxCell);
+var checkBoxCell_default = import_react7.default.memo(CheckboxCell);
 
 // src/components/custom/grid/checkboxCell/headerCheckBox.tsx
-var import_react9 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var HeaderCheckbox = ({ api, column }) => {
-  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();
-    };
+  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();
   }, [api]);
-  (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 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]);
   const handleChange = (e) => {
-    var _a2, _b, _c, _d;
+    var _a2, _b2;
     e.stopPropagation();
-    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);
+    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);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "div",
@@ -2653,7 +2614,7 @@ var HeaderCheckbox = ({ api, column }) => {
         {
           ref: checkboxRef,
           type: "checkbox",
-          checked: state.allSelected,
+          checked: 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"
         }
@@ -2661,27 +2622,21 @@ var HeaderCheckbox = ({ api, column }) => {
     }
   );
 };
-var headerCheckBox_default = import_react9.default.memo(HeaderCheckbox);
+var headerCheckBox_default = import_react8.default.memo(HeaderCheckbox);
 
 // src/components/custom/grid/utils/buildCheckboxColumn.tsx
 function buildCheckboxColumn({
   getPageData,
   onSelectionChange,
-  onSelectAllPage,
-  clearToken
+  onSelectAllPage
 }) {
-  const configRef = {
-    getPageData,
-    onSelectionChange,
-    onSelectAllPage,
-    clearToken
-  };
+  const config = { getPageData, onSelectionChange, onSelectAllPage };
   return {
     id: "__selection__",
     width: 58,
     sortable: false,
     resize: false,
-    config: configRef,
+    config,
     header: { cell: headerCheckBox_default },
     cell: checkBoxCell_default
   };
@@ -2689,7 +2644,7 @@ function buildCheckboxColumn({
 
 // src/components/custom/grid/index.tsx
 var import_jsx_runtime28 = require("react/jsx-runtime");
-var Grid = (0, import_react10.forwardRef)(
+var Grid = (0, import_react9.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       data,
@@ -2707,11 +2662,9 @@ var Grid = (0, import_react10.forwardRef)(
       children,
       onFocusCell = () => false,
       selectionEnabled = false,
-      selectedIds = [],
+      getSelectedIds,
       onRowSelectionChange,
       onSelectAllPage,
-      selectedCount,
-      selectedData,
       selectionActions,
       onSelectionAction,
       onClearSelection
@@ -2731,138 +2684,139 @@ var Grid = (0, import_react10.forwardRef)(
       "children",
       "onFocusCell",
       "selectionEnabled",
-      "selectedIds",
+      "getSelectedIds",
       "onRowSelectionChange",
       "onSelectAllPage",
-      "selectedCount",
-      "selectedData",
       "selectionActions",
       "onSelectionAction",
       "onClearSelection"
     ]);
-    var _a2;
-    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)(() => {
+    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)(() => {
       dataRef.current = data;
     }, [data]);
-    const onRowSelectionChangeRef = (0, import_react10.useRef)(onRowSelectionChange);
-    (0, import_react10.useEffect)(() => {
+    const onRowSelectionChangeRef = (0, import_react9.useRef)(onRowSelectionChange);
+    (0, import_react9.useEffect)(() => {
       onRowSelectionChangeRef.current = onRowSelectionChange;
     }, [onRowSelectionChange]);
-    const onSelectAllPageRef = (0, import_react10.useRef)(onSelectAllPage);
-    (0, import_react10.useEffect)(() => {
+    const onSelectAllPageRef = (0, import_react9.useRef)(onSelectAllPage);
+    (0, import_react9.useEffect)(() => {
       onSelectAllPageRef.current = onSelectAllPage;
     }, [onSelectAllPage]);
-    (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;
+    (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;
       const checkboxCol = buildCheckboxColumn({
         getPageData: () => {
-          var _a3;
-          return (_a3 = dataRef.current) != null ? _a3 : [];
+          var _a2;
+          return (_a2 = dataRef.current) != null ? _a2 : [];
         },
-        onSelectionChange: (id3, rowData, checked) => {
-          var _a3;
-          (_a3 = onRowSelectionChangeRef.current) == null ? void 0 : _a3.call(onRowSelectionChangeRef, id3, rowData, checked);
+        onSelectionChange: (id, rowData, checked) => {
+          var _a2;
+          (_a2 = onRowSelectionChangeRef.current) == null ? void 0 : _a2.call(onRowSelectionChangeRef, id, rowData, checked);
         },
         onSelectAllPage: (pageData, checked) => {
-          var _a3;
-          (_a3 = onSelectAllPageRef.current) == null ? void 0 : _a3.call(onSelectAllPageRef, pageData, checked);
-        },
-        clearToken: clearTokenRef.current
+          var _a2;
+          (_a2 = onSelectAllPageRef.current) == null ? void 0 : _a2.call(onSelectAllPageRef, pageData, checked);
+        }
       });
       return [checkboxCol, ...columns];
-    }, [selectionEnabled, columns, clearTokenRef.current]);
-    const resizeColumns = (0, import_react10.useCallback)(() => {
+    }, [selectionEnabled, columns]);
+    const resizeColumns = (0, import_react9.useCallback)(() => {
       const api = apiRef.current;
       const container = containerRef.current;
       if (!api || !container) return;
       const gridWidth = container.clientWidth;
-      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);
+      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);
       }, 0);
-      const availableWidth = Math.max(gridWidth - totalFixedWidth, 0);
+      const available = Math.max(gridWidth - fixedTotal, 0);
       if (data && data.length > 0) {
-        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);
+        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);
         }, 0);
-        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
-              });
-            }
+        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 });
           });
         }
       } else {
-        const equalWidth = resizableColumns.length > 0 ? availableWidth / resizableColumns.length : 0;
-        resizableColumns.forEach((col) => {
-          api.exec("resize-column", {
-            id: col.id,
-            width: equalWidth
-          });
-        });
+        const eq = resizable.length > 0 ? available / resizable.length : 0;
+        resizable.forEach(
+          (col) => api.exec("resize-column", { id: col.id, width: eq })
+        );
       }
     }, [resolvedColumns, data]);
-    (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)(
+    const init = (0, import_react9.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]
+      [resizeColumns, onFocusCell, selectionEnabled]
     );
-    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)(() => {
+    (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 selected = getSelectedData();
       if (selected.length) exportPdf(selected, fileName);
       else onExportPdf == null ? void 0 : onExportPdf();
-    }, [data, fileName, onExportPdf]);
-    const handleExportExcel = (0, import_react10.useCallback)(() => {
+    }, [getSelectedData, fileName, onExportPdf]);
+    const handleExportExcel = (0, import_react9.useCallback)(() => {
       const selected = getSelectedData();
       if (selected.length) exportExcel(selected, fileName);
       else onExportExcel == null ? void 0 : onExportExcel();
-    }, [data, fileName, onExportExcel]);
+    }, [getSelectedData, 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,
@@ -2877,11 +2831,11 @@ var Grid = (0, import_react10.forwardRef)(
           filterList: rest.filterList,
           onFilterChange,
           initialFilters,
-          selectedCount,
-          selectedData,
+          selectedCount: internalSelectedCount,
+          selectedData: getSelectedData(),
           selectionActions,
           onSelectionAction,
-          onClearSelection,
+          onClearSelection: handleClearSelection,
           children
         }
       ),
@@ -2896,7 +2850,6 @@ var Grid = (0, import_react10.forwardRef)(
               data,
               columns: resolvedColumns,
               init,
-              selectedRows: selectionEnabled ? selectedIds : void 0,
               select: selectionEnabled ? false : rest.select
             })
           ) }) })
@@ -2905,11 +2858,11 @@ var Grid = (0, import_react10.forwardRef)(
     ] });
   }
 );
-var grid_default = Grid;
+var grid_default = import_react9.default.memo(Grid);
 
 // src/components/custom/grid/sortableHeaderCell.tsx
 var import_lucide_react15 = require("lucide-react");
-var import_react11 = __toESM(require("react"));
+var import_react10 = __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 });
@@ -2939,7 +2892,7 @@ var SortableHeaderCell = ({ cell, sortKey, sortOrder, onSortChange }) => {
     }
   );
 };
-var sortableHeaderCell_default = import_react11.default.memo(SortableHeaderCell, (prev, next) => {
+var sortableHeaderCell_default = import_react10.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;
@@ -3066,7 +3019,7 @@ var pagination_default = Pagination;
 
 // src/components/custom/toolbar/index.tsx
 var import_lucide_react17 = require("lucide-react");
-var import_react12 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var SlideToolbar = ({
   items,
@@ -3079,9 +3032,9 @@ var SlideToolbar = ({
   className = ""
 }) => {
   const resolvedItems = items != null ? items : children ? void 0 : [];
-  const [open, setOpen] = (0, import_react12.useState)(false);
-  const panelRef = (0, import_react12.useRef)(null);
-  (0, import_react12.useEffect)(() => {
+  const [open, setOpen] = (0, import_react11.useState)(false);
+  const panelRef = (0, import_react11.useRef)(null);
+  (0, import_react11.useEffect)(() => {
     if (!open || !closeOnBackdrop) return;
     const handlePointerDown = (e) => {
       if (panelRef.current && !panelRef.current.contains(e.target)) {

package/dist/index.mjs

@@ -1909,13 +1909,14 @@ var CustomBreadcrumb = ({
 var breadcrumb_default = CustomBreadcrumb;
 
 // src/components/custom/grid/index.tsx
-import {
+import React6, {
   useCallback as useCallback2,
-  useRef as useRef5,
+  useRef as useRef4,
   useImperativeHandle,
   forwardRef,
   useEffect as useEffect9,
-  useMemo as useMemo4
+  useMemo as useMemo4,
+  useState as useState9
 } from "react";
 import { Grid as SvarGrid, WillowDark } from "@svar-ui/react-grid";
 
@@ -1950,7 +1951,7 @@ function exportExcel(rows, name) {
 }
 
 // src/components/custom/grid/gridHeader/index.tsx
-import { useEffect as useEffect6, useRef as useRef2, useState as useState7 } from "react";
+import React3, { useEffect as useEffect6, useRef as useRef2, useState as useState7 } from "react";
 import { FileText, FileSpreadsheet, Search, Ellipsis, X as X4 } from "lucide-react";
 
 // src/components/custom/grid/gridHeader/components/filters.tsx
@@ -2008,13 +2009,13 @@ var Filters = ({
       }
     ]);
   };
-  const updateCondition = (id3, next) => {
+  const updateCondition = (id, next) => {
     setConditions(
-      (prev) => prev.map((c) => c.id === id3 ? __spreadValues(__spreadValues({}, c), next) : c)
+      (prev) => prev.map((c) => c.id === id ? __spreadValues(__spreadValues({}, c), next) : c)
     );
   };
-  const deleteCondition = (id3) => {
-    const updatedConditions = conditions.filter((c) => c.id !== id3);
+  const deleteCondition = (id) => {
+    const updatedConditions = conditions.filter((c) => c.id !== id);
     setConditions(updatedConditions);
     if (updatedConditions.length === 0) {
       setFilterMenu(false);
@@ -2381,6 +2382,7 @@ function GridHeader({
   onSelectionAction,
   onClearSelection
 }) {
+  console.log("GridHeader rendered");
   const [downloadMenu, setDownloadMenu] = useState7(false);
   const [searchOpen, setSearchOpen] = useState7(false);
   const downloadRef = useRef2(null);
@@ -2478,70 +2480,48 @@ function GridHeader({
               value: searchValue
             }
           ),
-          /* @__PURE__ */ jsx25("button", { onClick: () => setSearchOpen(false), className: "cursor-pointer", children: /* @__PURE__ */ jsx25(X4, { size: 16 }) })
+          /* @__PURE__ */ jsx25(
+            "button",
+            {
+              onClick: () => setSearchOpen(false),
+              className: "cursor-pointer",
+              children: /* @__PURE__ */ jsx25(X4, { size: 16 })
+            }
+          )
         ] })
       }
     ) })
   ] });
 }
-var gridHeader_default = GridHeader;
+var gridHeader_default = React3.memo(GridHeader);
 
 // src/components/custom/grid/checkboxCell/checkBoxCell.tsx
-import React3 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;
+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);
     }
-  };
-}
-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(() => {
-    if (!writable2) return;
-    const unsubscribe = writable2.subscribe((newValue) => {
-      setState(() => newValue);
+    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)
+        );
+      }
     });
-    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 }) => {
-  const selectedRows = useStore(api, "selectedRows");
-  const isSelected = selectedRows.includes(row.id);
+    return () => typeof unsub === "function" && unsub();
+  }, [api, row.id]);
   const handleChange = (e) => {
     var _a, _b;
     e.stopPropagation();
-    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);
+    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);
   };
   return /* @__PURE__ */ jsx26(
     "div",
@@ -2561,55 +2541,37 @@ var CheckboxCell = ({ row, api, column }) => {
     }
   );
 };
-var checkBoxCell_default = React3.memo(CheckboxCell);
+var checkBoxCell_default = React4.memo(CheckboxCell);
 
 // src/components/custom/grid/checkboxCell/headerCheckBox.tsx
-import React4, { useEffect as useEffect8, useRef as useRef4, useReducer } from "react";
+import React5, { useEffect as useEffect8, useRef as useRef3, useReducer } from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
 var HeaderCheckbox = ({ api, column }) => {
-  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
-    };
-  };
+  var _a, _b, _c;
+  const checkboxRef = useRef3(null);
   const [, forceUpdate] = useReducer((x) => x + 1, 0);
   useEffect8(() => {
-    const unsub = api.on("select-row", () => {
-      forceUpdate();
-    });
-    return () => {
-      if (typeof unsub === "function") unsub();
-    };
+    const unsub = api.on("select-row", () => forceUpdate());
+    return () => 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(() => {
-    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]);
+    if (checkboxRef.current) checkboxRef.current.indeterminate = someSelected;
+  }, [someSelected]);
   const handleChange = (e) => {
-    var _a2, _b, _c, _d;
+    var _a2, _b2;
     e.stopPropagation();
-    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);
+    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);
   };
   return /* @__PURE__ */ jsx27(
     "div",
@@ -2622,7 +2584,7 @@ var HeaderCheckbox = ({ api, column }) => {
         {
           ref: checkboxRef,
           type: "checkbox",
-          checked: state.allSelected,
+          checked: 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"
         }
@@ -2630,27 +2592,21 @@ var HeaderCheckbox = ({ api, column }) => {
     }
   );
 };
-var headerCheckBox_default = React4.memo(HeaderCheckbox);
+var headerCheckBox_default = React5.memo(HeaderCheckbox);
 
 // src/components/custom/grid/utils/buildCheckboxColumn.tsx
 function buildCheckboxColumn({
   getPageData,
   onSelectionChange,
-  onSelectAllPage,
-  clearToken
+  onSelectAllPage
 }) {
-  const configRef = {
-    getPageData,
-    onSelectionChange,
-    onSelectAllPage,
-    clearToken
-  };
+  const config = { getPageData, onSelectionChange, onSelectAllPage };
   return {
     id: "__selection__",
     width: 58,
     sortable: false,
     resize: false,
-    config: configRef,
+    config,
     header: { cell: headerCheckBox_default },
     cell: checkBoxCell_default
   };
@@ -2676,11 +2632,9 @@ var Grid = forwardRef(
       children,
       onFocusCell = () => false,
       selectionEnabled = false,
-      selectedIds = [],
+      getSelectedIds,
       onRowSelectionChange,
       onSelectAllPage,
-      selectedCount,
-      selectedData,
       selectionActions,
       onSelectionAction,
       onClearSelection
@@ -2700,138 +2654,139 @@ var Grid = forwardRef(
       "children",
       "onFocusCell",
       "selectionEnabled",
-      "selectedIds",
+      "getSelectedIds",
       "onRowSelectionChange",
       "onSelectAllPage",
-      "selectedCount",
-      "selectedData",
       "selectionActions",
       "onSelectionAction",
       "onClearSelection"
     ]);
-    var _a2;
-    const apiRef = useRef5(null);
-    const containerRef = useRef5(null);
-    const dataRef = useRef5(data);
+    const apiRef = useRef4(null);
+    const containerRef = useRef4(null);
+    const [internalSelectedCount, setInternalSelectedCount] = useState9(0);
+    const dataRef = useRef4(data);
     useEffect9(() => {
       dataRef.current = data;
     }, [data]);
-    const onRowSelectionChangeRef = useRef5(onRowSelectionChange);
+    const onRowSelectionChangeRef = useRef4(onRowSelectionChange);
     useEffect9(() => {
       onRowSelectionChangeRef.current = onRowSelectionChange;
     }, [onRowSelectionChange]);
-    const onSelectAllPageRef = useRef5(onSelectAllPage);
+    const onSelectAllPageRef = useRef4(onSelectAllPage);
     useEffect9(() => {
       onSelectAllPageRef.current = onSelectAllPage;
     }, [onSelectAllPage]);
     useImperativeHandle(ref, () => apiRef.current, []);
-    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 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 resolvedColumns = useMemo4(() => {
-      if (!selectionEnabled) return columns;
+      if (!selectionEnabled || columns.length === 0) return columns;
       const checkboxCol = buildCheckboxColumn({
         getPageData: () => {
-          var _a3;
-          return (_a3 = dataRef.current) != null ? _a3 : [];
+          var _a2;
+          return (_a2 = dataRef.current) != null ? _a2 : [];
         },
-        onSelectionChange: (id3, rowData, checked) => {
-          var _a3;
-          (_a3 = onRowSelectionChangeRef.current) == null ? void 0 : _a3.call(onRowSelectionChangeRef, id3, rowData, checked);
+        onSelectionChange: (id, rowData, checked) => {
+          var _a2;
+          (_a2 = onRowSelectionChangeRef.current) == null ? void 0 : _a2.call(onRowSelectionChangeRef, id, rowData, checked);
         },
         onSelectAllPage: (pageData, checked) => {
-          var _a3;
-          (_a3 = onSelectAllPageRef.current) == null ? void 0 : _a3.call(onSelectAllPageRef, pageData, checked);
-        },
-        clearToken: clearTokenRef.current
+          var _a2;
+          (_a2 = onSelectAllPageRef.current) == null ? void 0 : _a2.call(onSelectAllPageRef, pageData, checked);
+        }
       });
       return [checkboxCol, ...columns];
-    }, [selectionEnabled, columns, clearTokenRef.current]);
+    }, [selectionEnabled, columns]);
     const resizeColumns = useCallback2(() => {
       const api = apiRef.current;
       const container = containerRef.current;
       if (!api || !container) return;
       const gridWidth = container.clientWidth;
-      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);
+      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);
       }, 0);
-      const availableWidth = Math.max(gridWidth - totalFixedWidth, 0);
+      const available = Math.max(gridWidth - fixedTotal, 0);
       if (data && data.length > 0) {
-        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);
+        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);
         }, 0);
-        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
-              });
-            }
+        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 });
           });
         }
       } else {
-        const equalWidth = resizableColumns.length > 0 ? availableWidth / resizableColumns.length : 0;
-        resizableColumns.forEach((col) => {
-          api.exec("resize-column", {
-            id: col.id,
-            width: equalWidth
-          });
-        });
+        const eq = resizable.length > 0 ? available / resizable.length : 0;
+        resizable.forEach(
+          (col) => api.exec("resize-column", { id: col.id, width: eq })
+        );
       }
     }, [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]
+      [resizeColumns, onFocusCell, selectionEnabled]
     );
-    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));
-    };
+    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 handleExportPdf = useCallback2(() => {
       const selected = getSelectedData();
       if (selected.length) exportPdf(selected, fileName);
       else onExportPdf == null ? void 0 : onExportPdf();
-    }, [data, fileName, onExportPdf]);
+    }, [getSelectedData, fileName, onExportPdf]);
     const handleExportExcel = useCallback2(() => {
       const selected = getSelectedData();
       if (selected.length) exportExcel(selected, fileName);
       else onExportExcel == null ? void 0 : onExportExcel();
-    }, [data, fileName, onExportExcel]);
+    }, [getSelectedData, fileName, onExportExcel]);
     return /* @__PURE__ */ jsxs20("div", { className: "w-full h-full flex flex-col overflow-hidden", children: [
       /* @__PURE__ */ jsx28(
         gridHeader_default,
@@ -2846,11 +2801,11 @@ var Grid = forwardRef(
           filterList: rest.filterList,
           onFilterChange,
           initialFilters,
-          selectedCount,
-          selectedData,
+          selectedCount: internalSelectedCount,
+          selectedData: getSelectedData(),
           selectionActions,
           onSelectionAction,
-          onClearSelection,
+          onClearSelection: handleClearSelection,
           children
         }
       ),
@@ -2865,7 +2820,6 @@ var Grid = forwardRef(
               data,
               columns: resolvedColumns,
               init,
-              selectedRows: selectionEnabled ? selectedIds : void 0,
               select: selectionEnabled ? false : rest.select
             })
           ) }) })
@@ -2874,11 +2828,11 @@ var Grid = forwardRef(
     ] });
   }
 );
-var grid_default = Grid;
+var grid_default = React6.memo(Grid);
 
 // src/components/custom/grid/sortableHeaderCell.tsx
 import { MoveDown, MoveUp, ArrowUpDown } from "lucide-react";
-import React5 from "react";
+import React7 from "react";
 import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
 var SortableHeaderCell = ({ cell, sortKey, sortOrder, onSortChange }) => {
   if (!(cell == null ? void 0 : cell.id)) return /* @__PURE__ */ jsx29("span", { children: cell == null ? void 0 : cell.text });
@@ -2908,7 +2862,7 @@ var SortableHeaderCell = ({ cell, sortKey, sortOrder, onSortChange }) => {
     }
   );
 };
-var sortableHeaderCell_default = React5.memo(SortableHeaderCell, (prev, next) => {
+var sortableHeaderCell_default = React7.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;
@@ -3035,7 +2989,7 @@ var pagination_default = Pagination;
 
 // src/components/custom/toolbar/index.tsx
 import { ChevronRight as ChevronRight4, X as X5 } from "lucide-react";
-import { useState as useState9, useRef as useRef6, useEffect as useEffect10 } from "react";
+import { useState as useState10, useRef as useRef5, useEffect as useEffect10 } from "react";
 import { Fragment as Fragment4, jsx as jsx31, jsxs as jsxs23 } from "react/jsx-runtime";
 var SlideToolbar = ({
   items,
@@ -3048,8 +3002,8 @@ var SlideToolbar = ({
   className = ""
 }) => {
   const resolvedItems = items != null ? items : children ? void 0 : [];
-  const [open, setOpen] = useState9(false);
-  const panelRef = useRef6(null);
+  const [open, setOpen] = useState10(false);
+  const panelRef = useRef5(null);
   useEffect10(() => {
     if (!open || !closeOnBackdrop) return;
     const handlePointerDown = (e) => {

package/package.json

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