baaz-custom-components 5.1.2 → 5.2.1

package/dist/index.mjs

@@ -1909,12 +1909,14 @@ var CustomBreadcrumb = ({
 var breadcrumb_default = CustomBreadcrumb;
 
 // src/components/custom/grid/index.tsx
-import {
+import React6, {
   useCallback as useCallback2,
-  useRef as useRef3,
+  useRef as useRef4,
   useImperativeHandle,
   forwardRef,
-  useEffect as useEffect7
+  useEffect as useEffect9,
+  useMemo as useMemo4,
+  useState as useState9
 } from "react";
 import { Grid as SvarGrid, WillowDark } from "@svar-ui/react-grid";
 
@@ -1949,14 +1951,8 @@ function exportExcel(rows, name) {
 }
 
 // src/components/custom/grid/gridHeader/index.tsx
-import { useEffect as useEffect6, useRef as useRef2, useState as useState7 } from "react";
-import {
-  FileText,
-  FileSpreadsheet,
-  Search,
-  Ellipsis,
-  X as X3
-} from "lucide-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
 import { useEffect as useEffect5, useMemo as useMemo3, useRef, useState as useState6 } from "react";
@@ -2322,9 +2318,52 @@ var Filters = ({
 };
 var filters_default = Filters;
 
-// src/components/custom/grid/gridHeader/index.tsx
+// src/components/custom/grid/gridHeader/components/selectionBar.tsx
+import { X as X3 } from "lucide-react";
 import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
-var GridHeader = ({
+function SelectionBar({
+  selectedCount,
+  selectedData,
+  actions,
+  onAction,
+  onClear
+}) {
+  return /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2 animate-in fade-in slide-in-from-left-2 duration-150", children: [
+    /* @__PURE__ */ jsx24(
+      "button",
+      {
+        onClick: onClear,
+        title: "Clear selection",
+        className: "p-1.5 rounded-md hover:bg-input text-muted-foreground hover:text-foreground transition-colors cursor-pointer",
+        children: /* @__PURE__ */ jsx24(X3, { size: 15 })
+      }
+    ),
+    /* @__PURE__ */ jsxs18("span", { className: "text-xs font-medium text-foreground whitespace-nowrap", children: [
+      selectedCount,
+      " ",
+      selectedCount === 1 ? "row" : "rows",
+      " selected"
+    ] }),
+    /* @__PURE__ */ jsx24("div", { className: "h-4 w-px bg-border mx-1" }),
+    actions.map((action) => /* @__PURE__ */ jsxs18(
+      "button",
+      {
+        onClick: () => onAction(action.id, selectedData),
+        title: action.label,
+        className: "flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium border border-border bg-primary/90 hover:bg-primary ease-in-out transition-colors cursor-pointer whitespace-nowrap",
+        children: [
+          action.icon && /* @__PURE__ */ jsx24("span", { className: "shrink-0 text-muted-foreground", children: action.icon }),
+          action.label
+        ]
+      },
+      action.id
+    ))
+  ] });
+}
+
+// src/components/custom/grid/gridHeader/index.tsx
+import { Fragment as Fragment3, jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
+function GridHeader({
   onPdf,
   onExcel,
   onSearch = () => {
@@ -2336,11 +2375,18 @@ var GridHeader = ({
   filterList,
   onFilterChange,
   initialFilters = [],
-  children
-}) => {
+  children,
+  selectedCount = 0,
+  selectedData = [],
+  selectionActions = [],
+  onSelectionAction,
+  onClearSelection
+}) {
+  console.log("GridHeader rendered");
   const [downloadMenu, setDownloadMenu] = useState7(false);
   const [searchOpen, setSearchOpen] = useState7(false);
   const downloadRef = useRef2(null);
+  const isSelecting = selectedCount > 0;
   useEffect6(() => {
     const handleClickOutside = (e) => {
       if (downloadRef.current && !downloadRef.current.contains(e.target)) {
@@ -2350,9 +2396,18 @@ var GridHeader = ({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  return /* @__PURE__ */ jsxs18("div", { className: "flex flex-col md:flex-row md:items-center justify-between bg-card py-2 px-2 md:px-4 rounded-tl-md rounded-tr-md border-l border-r border-t", children: [
-    /* @__PURE__ */ jsxs18("div", { className: "flex justify-between items-center gap-3", children: [
-      /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsxs19("div", { className: "flex flex-col md:flex-row md:items-center justify-between bg-card py-2 px-2 md:px-4 rounded-tl-md rounded-tr-md border-l border-r border-t min-h-[48px]", children: [
+    /* @__PURE__ */ jsx25("div", { className: "flex items-center gap-3", children: isSelecting ? /* @__PURE__ */ jsx25(
+      SelectionBar,
+      {
+        selectedCount,
+        selectedData,
+        actions: selectionActions,
+        onAction: (actionId, data) => onSelectionAction == null ? void 0 : onSelectionAction(actionId, data),
+        onClear: () => onClearSelection == null ? void 0 : onClearSelection()
+      }
+    ) : /* @__PURE__ */ jsxs19(Fragment3, { children: [
+      /* @__PURE__ */ jsx25(
         filters_default,
         {
           onFilterChange,
@@ -2360,17 +2415,17 @@ var GridHeader = ({
           filterList
         }
       ),
-      download && /* @__PURE__ */ jsxs18("div", { className: "relative", ref: downloadRef, children: [
-        /* @__PURE__ */ jsx24(
+      download && /* @__PURE__ */ jsxs19("div", { className: "relative", ref: downloadRef, children: [
+        /* @__PURE__ */ jsx25(
           "button",
           {
             onClick: () => setDownloadMenu((p) => !p),
             className: "p-2 rounded-md hover:bg-input cursor-pointer",
-            children: /* @__PURE__ */ jsx24(Ellipsis, { size: 16 })
+            children: /* @__PURE__ */ jsx25(Ellipsis, { size: 16 })
           }
         ),
-        downloadMenu && /* @__PURE__ */ jsxs18("div", { className: "absolute top-full right-0 mt-2 w-32 rounded-md border !bg-background shadow-lg z-50 overflow-hidden", children: [
-          /* @__PURE__ */ jsxs18(
+        downloadMenu && /* @__PURE__ */ jsxs19("div", { className: "absolute top-full right-0 mt-2 w-32 rounded-md border !bg-background shadow-lg z-50 overflow-hidden", children: [
+          /* @__PURE__ */ jsxs19(
             "button",
             {
               onClick: () => {
@@ -2379,12 +2434,12 @@ var GridHeader = ({
               },
               className: "flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-muted cursor-pointer",
               children: [
-                /* @__PURE__ */ jsx24(FileText, { size: 14 }),
-                "PDF"
+                /* @__PURE__ */ jsx25(FileText, { size: 14 }),
+                " PDF"
               ]
             }
           ),
-          /* @__PURE__ */ jsxs18(
+          /* @__PURE__ */ jsxs19(
             "button",
             {
               onClick: () => {
@@ -2393,29 +2448,29 @@ var GridHeader = ({
               },
               className: "flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-muted cursor-pointer",
               children: [
-                /* @__PURE__ */ jsx24(FileSpreadsheet, { size: 14 }),
-                "Excel"
+                /* @__PURE__ */ jsx25(FileSpreadsheet, { size: 14 }),
+                " Excel"
               ]
             }
           )
         ] })
       ] })
-    ] }),
+    ] }) }),
     children,
-    search && /* @__PURE__ */ jsx24("div", { className: "relative h-[40px] flex items-center", children: /* @__PURE__ */ jsx24(
+    search && /* @__PURE__ */ jsx25("div", { className: "relative h-[40px] flex items-center", children: /* @__PURE__ */ jsx25(
       "div",
       {
         className: `absolute md:right-0 flex items-center transition-all duration-200 ${searchOpen ? "w-[250px]" : "w-[40px]"} h-[40px]`,
-        children: !searchOpen ? /* @__PURE__ */ jsx24(
+        children: !searchOpen ? /* @__PURE__ */ jsx25(
           "button",
           {
             onClick: () => setSearchOpen(true),
             className: "w-[40px] h-[40px] flex items-center justify-center rounded-md hover:bg-input cursor-pointer",
-            children: /* @__PURE__ */ jsx24(Search, { size: 18 })
+            children: /* @__PURE__ */ jsx25(Search, { size: 18 })
           }
-        ) : /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2 w-full h-full px-3 rounded-md border border-input bg-background", children: [
-          /* @__PURE__ */ jsx24(Search, { size: 16 }),
-          /* @__PURE__ */ jsx24(
+        ) : /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2 w-full h-full px-3 rounded-md border border-input bg-background", children: [
+          /* @__PURE__ */ jsx25(Search, { size: 16 }),
+          /* @__PURE__ */ jsx25(
             "input",
             {
               autoFocus: true,
@@ -2425,23 +2480,140 @@ var GridHeader = ({
               value: searchValue
             }
           ),
-          /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsx25(
             "button",
             {
               onClick: () => setSearchOpen(false),
               className: "cursor-pointer",
-              children: /* @__PURE__ */ jsx24(X3, { size: 16 })
+              children: /* @__PURE__ */ jsx25(X4, { size: 16 })
             }
           )
         ] })
       }
     ) })
   ] });
+}
+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);
+    }
+  );
+  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)
+        );
+      }
+    });
+    return () => typeof unsub === "function" && unsub();
+  }, [api, 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);
+  };
+  return /* @__PURE__ */ jsx26(
+    "div",
+    {
+      className: "flex items-center justify-center w-full h-full",
+      "data-action": "ignore-click",
+      onClick: (e) => e.stopPropagation(),
+      children: /* @__PURE__ */ jsx26(
+        "input",
+        {
+          type: "checkbox",
+          checked: isSelected,
+          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"
+        }
+      )
+    }
+  );
 };
-var gridHeader_default = GridHeader;
+var checkBoxCell_default = React4.memo(CheckboxCell);
+
+// src/components/custom/grid/checkboxCell/headerCheckBox.tsx
+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, _b, _c;
+  const checkboxRef = useRef3(null);
+  const [, forceUpdate] = useReducer((x) => x + 1, 0);
+  useEffect8(() => {
+    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(() => {
+    if (checkboxRef.current) checkboxRef.current.indeterminate = someSelected;
+  }, [someSelected]);
+  const handleChange = (e) => {
+    var _a2, _b2;
+    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);
+  };
+  return /* @__PURE__ */ jsx27(
+    "div",
+    {
+      className: "flex items-center justify-center w-full h-full",
+      "data-action": "ignore-click",
+      onClick: (e) => e.stopPropagation(),
+      children: /* @__PURE__ */ jsx27(
+        "input",
+        {
+          ref: checkboxRef,
+          type: "checkbox",
+          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"
+        }
+      )
+    }
+  );
+};
+var headerCheckBox_default = React5.memo(HeaderCheckbox);
+
+// src/components/custom/grid/utils/buildCheckboxColumn.tsx
+function buildCheckboxColumn({
+  getPageData,
+  onSelectionChange,
+  onSelectAllPage
+}) {
+  const config = { getPageData, onSelectionChange, onSelectAllPage };
+  return {
+    id: "__selection__",
+    width: 58,
+    sortable: false,
+    resize: false,
+    config,
+    header: { cell: headerCheckBox_default },
+    cell: checkBoxCell_default
+  };
+}
 
 // src/components/custom/grid/index.tsx
-import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
 var Grid = forwardRef(
   (_a, ref) => {
     var _b = _a, {
@@ -2457,7 +2629,15 @@ var Grid = forwardRef(
       fonts,
       onFilterChange,
       initialFilters,
-      children
+      children,
+      onFocusCell = () => false,
+      selectionEnabled = false,
+      getSelectedIds,
+      onRowSelectionChange,
+      onSelectAllPage,
+      selectionActions,
+      onSelectionAction,
+      onClearSelection
     } = _b, rest = __objRest(_b, [
       "data",
       "columns",
@@ -2471,95 +2651,144 @@ var Grid = forwardRef(
       "fonts",
       "onFilterChange",
       "initialFilters",
-      "children"
+      "children",
+      "onFocusCell",
+      "selectionEnabled",
+      "getSelectedIds",
+      "onRowSelectionChange",
+      "onSelectAllPage",
+      "selectionActions",
+      "onSelectionAction",
+      "onClearSelection"
     ]);
-    const apiRef = useRef3(null);
-    const containerRef = useRef3(null);
+    const apiRef = useRef4(null);
+    const containerRef = useRef4(null);
+    const [internalSelectedCount, setInternalSelectedCount] = useState9(0);
+    const dataRef = useRef4(data);
+    useEffect9(() => {
+      dataRef.current = data;
+    }, [data]);
+    const onRowSelectionChangeRef = useRef4(onRowSelectionChange);
+    useEffect9(() => {
+      onRowSelectionChangeRef.current = onRowSelectionChange;
+    }, [onRowSelectionChange]);
+    const onSelectAllPageRef = useRef4(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 resolvedColumns = useMemo4(() => {
+      if (!selectionEnabled || columns.length === 0) return columns;
+      const checkboxCol = buildCheckboxColumn({
+        getPageData: () => {
+          var _a2;
+          return (_a2 = dataRef.current) != null ? _a2 : [];
+        },
+        onSelectionChange: (id, rowData, checked) => {
+          var _a2;
+          (_a2 = onRowSelectionChangeRef.current) == null ? void 0 : _a2.call(onRowSelectionChangeRef, id, rowData, checked);
+        },
+        onSelectAllPage: (pageData, checked) => {
+          var _a2;
+          (_a2 = onSelectAllPageRef.current) == null ? void 0 : _a2.call(onSelectAllPageRef, pageData, checked);
+        }
+      });
+      return [checkboxCol, ...columns];
+    }, [selectionEnabled, columns]);
     const resizeColumns = useCallback2(() => {
-      var _a2;
       const api = apiRef.current;
       const container = containerRef.current;
-      if (!api) return;
-      const gridWidth = (_a2 = container == null ? void 0 : container.clientWidth) != null ? _a2 : 0;
+      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);
+      }, 0);
+      const available = Math.max(gridWidth - fixedTotal, 0);
       if (data && data.length > 0) {
-        columns.forEach((col) => {
-          api.exec("resize-column", {
-            id: col.id,
-            auto: "data"
-          });
-        });
-        const totalColumnWidth = columns.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 (totalColumnWidth < gridWidth) {
-          const extra = (gridWidth - totalColumnWidth) / columns.length;
-          columns.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 columnWidth = gridWidth / columns.length;
-        columns.forEach((col) => {
-          api.exec("resize-column", {
-            id: col.id,
-            width: columnWidth
-          });
-        });
+        const eq = resizable.length > 0 ? available / resizable.length : 0;
+        resizable.forEach(
+          (col) => api.exec("resize-column", { id: col.id, width: eq })
+        );
       }
-    }, [columns, data]);
-    useEffect7(() => {
-      if (!containerRef.current) return;
-      const observer = new ResizeObserver(() => {
-        resizeColumns();
-      });
-      observer.observe(containerRef.current);
-      return () => observer.disconnect();
-    }, [resizeColumns]);
+    }, [resolvedColumns, data]);
     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]
+      [resizeColumns, onFocusCell, selectionEnabled]
     );
-    const getSelectedData = () => {
-      var _a2, _b2;
-      const selected = (_b2 = (_a2 = apiRef.current) == null ? void 0 : _a2.getState().selectedRows) != null ? _b2 : [];
-      let selectedData = data.filter((row) => {
-        return selected.includes(row.id);
-      });
-      return selectedData;
-    };
+    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();
-      }
-    }, [getSelectedData, exportPdf, onExportPdf, fileName]);
+      if (selected.length) exportPdf(selected, fileName);
+      else onExportPdf == null ? void 0 : onExportPdf();
+    }, [getSelectedData, fileName, onExportPdf]);
     const handleExportExcel = useCallback2(() => {
       const selected = getSelectedData();
-      if (selected.length) {
-        exportExcel(selected, fileName);
-      } else {
-        onExportExcel == null ? void 0 : onExportExcel();
-      }
-    }, [getSelectedData, exportExcel, onExportExcel, fileName]);
-    return /* @__PURE__ */ jsxs19("div", { className: "w-full h-full flex flex-col overflow-hidden", children: [
-      /* @__PURE__ */ jsx25(
+      if (selected.length) exportExcel(selected, fileName);
+      else onExportExcel == null ? void 0 : onExportExcel();
+    }, [getSelectedData, fileName, onExportExcel]);
+    return /* @__PURE__ */ jsxs20("div", { className: "w-full h-full flex flex-col overflow-hidden", children: [
+      /* @__PURE__ */ jsx28(
         gridHeader_default,
         {
           onPdf: handleExportPdf,
@@ -2572,20 +2801,41 @@ var Grid = forwardRef(
           filterList: rest.filterList,
           onFilterChange,
           initialFilters,
+          selectedCount: internalSelectedCount,
+          selectedData: getSelectedData(),
+          selectionActions,
+          onSelectionAction,
+          onClearSelection: handleClearSelection,
           children
         }
       ),
-      /* @__PURE__ */ jsx25("div", { className: "flex-1 w-full border border-border overflow-hidden", ref: containerRef, children: /* @__PURE__ */ jsx25(WillowDark, { fonts, children: /* @__PURE__ */ jsx25("div", { className: "w-full h-full relative", children: rest.loading ? /* @__PURE__ */ jsx25("div", { className: "absolute inset-0 bg-background/60 backdrop-blur-sm flex items-center justify-center z-10", children: /* @__PURE__ */ jsx25("div", { className: "animate-spin rounded-full h-8 w-8 border-2 border-primary border-t-transparent" }) }) : /* @__PURE__ */ jsx25(SvarGrid, __spreadProps(__spreadValues({}, rest), { data, columns, init })) }) }) })
+      /* @__PURE__ */ jsx28(
+        "div",
+        {
+          className: "flex-1 w-full border border-border overflow-hidden",
+          ref: containerRef,
+          children: /* @__PURE__ */ jsx28(WillowDark, { fonts, children: /* @__PURE__ */ jsx28("div", { className: "w-full h-full relative", children: rest.loading ? /* @__PURE__ */ jsx28("div", { className: "absolute inset-0 bg-background/60 backdrop-blur-sm flex items-center justify-center z-10", children: /* @__PURE__ */ jsx28("div", { className: "animate-spin rounded-full h-8 w-8 border-2 border-primary border-t-transparent" }) }) : /* @__PURE__ */ jsx28(
+            SvarGrid,
+            __spreadProps(__spreadValues({}, rest), {
+              data,
+              columns: resolvedColumns,
+              init,
+              select: selectionEnabled ? false : rest.select
+            })
+          ) }) })
+        }
+      )
     ] });
   }
 );
-var grid_default = Grid;
+var grid_default = React6.memo(Grid);
 
 // src/components/custom/grid/sortableHeaderCell.tsx
 import { MoveDown, MoveUp, ArrowUpDown } from "lucide-react";
-import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
-function SortableHeaderCell({ cell, sortKey, sortOrder, onSortChange }) {
-  if (!(cell == null ? void 0 : cell.id)) return /* @__PURE__ */ jsx26("span", { children: cell == null ? void 0 : cell.text });
+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 });
   const active = sortKey === cell.id;
   const handleClick = () => {
     if (!onSortChange || !cell.id) return;
@@ -2599,20 +2849,27 @@ function SortableHeaderCell({ cell, sortKey, sortOrder, onSortChange }) {
     }
     onSortChange("", null);
   };
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(
     "div",
     {
       onClick: handleClick,
       className: "cursor-pointer flex items-center gap-2 justify-between select-none",
       children: [
-        /* @__PURE__ */ jsx26("span", { children: cell.text }),
-        !active && /* @__PURE__ */ jsx26(ArrowUpDown, { className: "w-4 h-4 opacity-50" }),
-        active && (sortOrder === "asc" ? /* @__PURE__ */ jsx26(MoveDown, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx26(MoveUp, { className: "w-4 h-4" }))
+        /* @__PURE__ */ jsx29("span", { children: cell.text }),
+        !active && /* @__PURE__ */ jsx29(ArrowUpDown, { className: "w-4 h-4 opacity-50" }),
+        active && (sortOrder === "asc" ? /* @__PURE__ */ jsx29(MoveDown, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx29(MoveUp, { className: "w-4 h-4" }))
       ]
     }
   );
-}
-var sortableHeaderCell_default = SortableHeaderCell;
+};
+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;
+  if (prev.sortKey !== next.sortKey) return false;
+  if (prev.sortOrder !== next.sortOrder) return false;
+  return true;
+});
 
 // src/utils/pagination.ts
 function getPaginationRange(currentPage, totalPages, siblingCount = 2) {
@@ -2646,7 +2903,7 @@ function getPaginationRange(currentPage, totalPages, siblingCount = 2) {
 
 // src/components/custom/pagination/index.tsx
 import { ChevronLeft, ChevronRight as ChevronRight3 } from "lucide-react";
-import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs22 } from "react/jsx-runtime";
 function Pagination({
   totalCount,
   count = null,
@@ -2666,47 +2923,47 @@ function Pagination({
   const handlePageSizeChange = (size) => {
     onPageSizeChange == null ? void 0 : onPageSizeChange(size);
   };
-  return /* @__PURE__ */ jsxs21("div", { className: "flex flex-col-reverse gap-2 md:flex-row items-center justify-between bg-card px-3 py-2 rounded-br-md rounded-bl-md border-l border-r border-b", children: [
-    /* @__PURE__ */ jsxs21("div", { className: "flex justify-between w-full md:w-auto items-center gap-3 text-xs text-muted-foreground tracking-wider font-medium", children: [
-      /* @__PURE__ */ jsxs21("span", { children: [
+  return /* @__PURE__ */ jsxs22("div", { className: "flex flex-col-reverse gap-2 md:flex-row items-center justify-between bg-card px-3 py-2 rounded-br-md rounded-bl-md border-l border-r border-b", children: [
+    /* @__PURE__ */ jsxs22("div", { className: "flex justify-between w-full md:w-auto items-center gap-3 text-xs text-muted-foreground tracking-wider font-medium", children: [
+      /* @__PURE__ */ jsxs22("span", { children: [
         "Showing ",
-        /* @__PURE__ */ jsx27("span", { className: "text-foreground", children: count }),
+        /* @__PURE__ */ jsx30("span", { className: "text-foreground", children: count }),
         " of",
         " ",
-        /* @__PURE__ */ jsx27("span", { className: "text-foreground", children: totalCount })
+        /* @__PURE__ */ jsx30("span", { className: "text-foreground", children: totalCount })
       ] }),
-      showSizeChanger && /* @__PURE__ */ jsx27(
+      showSizeChanger && /* @__PURE__ */ jsx30(
         "select",
         {
           value: pageSize,
           onChange: (e) => handlePageSizeChange(Number(e.target.value)),
           className: "rounded-md border border-input bg-background px-3 py-2 text-xs text-foreground focus:outline-none",
-          children: sizeChangerOptions.map((size) => /* @__PURE__ */ jsxs21("option", { value: size, children: [
+          children: sizeChangerOptions.map((size) => /* @__PURE__ */ jsxs22("option", { value: size, children: [
             size,
             " / page"
           ] }, size))
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs21("div", { className: "flex w-full md:w-auto justify-between items-center gap-1", children: [
-      /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsxs22("div", { className: "flex w-full md:w-auto justify-between items-center gap-1", children: [
+      /* @__PURE__ */ jsx30(
         "button",
         {
           disabled: currentPage === 1,
           onClick: () => handlePageChange(currentPage - 1),
           className: "border border-border w-8 h-8 rounded-md flex items-center justify-center disabled:opacity-40 hover:bg-card-foreground transition",
-          children: /* @__PURE__ */ jsx27(ChevronLeft, { className: "w-5 h-5 select-none" })
+          children: /* @__PURE__ */ jsx30(ChevronLeft, { className: "w-5 h-5 select-none" })
         }
       ),
       pages.map(
-        (page, idx) => page === "dots" ? /* @__PURE__ */ jsx27(
+        (page, idx) => page === "dots" ? /* @__PURE__ */ jsx30(
           "span",
           {
             className: "px-2 text-muted-foreground text-xs tracking-wider font-medium",
             children: "\u2026"
           },
           `dots-${idx}`
-        ) : /* @__PURE__ */ jsx27(
+        ) : /* @__PURE__ */ jsx30(
           "button",
           {
             onClick: () => handlePageChange(page),
@@ -2716,13 +2973,13 @@ function Pagination({
           page
         )
       ),
-      /* @__PURE__ */ jsx27(
+      /* @__PURE__ */ jsx30(
         "button",
         {
           disabled: currentPage === totalPages,
           onClick: () => handlePageChange(currentPage + 1),
           className: "border border-border w-8 h-8 rounded-md flex items-center justify-center disabled:opacity-40 hover:bg-card-foreground transition",
-          children: /* @__PURE__ */ jsx27(ChevronRight3, { className: "w-5 h-5 select-none" })
+          children: /* @__PURE__ */ jsx30(ChevronRight3, { className: "w-5 h-5 select-none" })
         }
       )
     ] })
@@ -2731,9 +2988,9 @@ function Pagination({
 var pagination_default = Pagination;
 
 // src/components/custom/toolbar/index.tsx
-import { ChevronRight as ChevronRight4, X as X4 } from "lucide-react";
-import { useState as useState8, useRef as useRef4, useEffect as useEffect8 } from "react";
-import { Fragment as Fragment3, jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
+import { ChevronRight as ChevronRight4, X as X5 } from "lucide-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,
   children,
@@ -2745,9 +3002,9 @@ var SlideToolbar = ({
   className = ""
 }) => {
   const resolvedItems = items != null ? items : children ? void 0 : [];
-  const [open, setOpen] = useState8(false);
-  const panelRef = useRef4(null);
-  useEffect8(() => {
+  const [open, setOpen] = useState10(false);
+  const panelRef = useRef5(null);
+  useEffect10(() => {
     if (!open || !closeOnBackdrop) return;
     const handlePointerDown = (e) => {
       if (panelRef.current && !panelRef.current.contains(e.target)) {
@@ -2760,8 +3017,8 @@ var SlideToolbar = ({
   const handleItem = (item) => {
     onAction == null ? void 0 : onAction(item.id);
   };
-  return /* @__PURE__ */ jsxs22(Fragment3, { children: [
-    /* @__PURE__ */ jsx28("style", { children: `
+  return /* @__PURE__ */ jsxs23(Fragment4, { children: [
+    /* @__PURE__ */ jsx31("style", { children: `
         @keyframes bounceX {
           0%, 100% { transform: translateX(0px); }
           40%       { transform: translateX(4px); }
@@ -2771,7 +3028,7 @@ var SlideToolbar = ({
           animation: bounceX 1.4s ease-in-out infinite;
         }
       ` }),
-    /* @__PURE__ */ jsx28(
+    /* @__PURE__ */ jsx31(
       "div",
       {
         role: "button",
@@ -2785,7 +3042,7 @@ var SlideToolbar = ({
           "hover:brightness-110 transition-all duration-200",
           open ? "opacity-0 pointer-events-none !w-0 border-r-0" : "opacity-100 pointer-events-auto"
         ].join(" "),
-        children: /* @__PURE__ */ jsx28(
+        children: /* @__PURE__ */ jsx31(
           ChevronRight4,
           {
             className: "text-primary-foreground chevron-bounce",
@@ -2794,7 +3051,7 @@ var SlideToolbar = ({
         )
       }
     ),
-    /* @__PURE__ */ jsxs22(
+    /* @__PURE__ */ jsxs23(
       "div",
       {
         ref: panelRef,
@@ -2811,36 +3068,36 @@ var SlideToolbar = ({
         ].join(" "),
         style: { width: `${panelWidth}px` },
         children: [
-          /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-between px-4 py-3 border-b border-border shrink-0", children: [
-            /* @__PURE__ */ jsx28("span", { className: "text-sm font-semibold text-foreground tracking-wide", children: title }),
-            /* @__PURE__ */ jsx28(
+          /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-between px-4 py-3 border-b border-border shrink-0", children: [
+            /* @__PURE__ */ jsx31("span", { className: "text-sm font-semibold text-foreground tracking-wide", children: title }),
+            /* @__PURE__ */ jsx31(
               "button",
               {
                 onClick: () => setOpen(false),
                 "aria-label": "Close toolbar",
                 className: "flex items-center justify-center w-6 h-6 rounded-md\n                       text-foreground/50 hover:text-foreground hover:bg-surface-alt\n                       transition-all duration-150 cursor-pointer",
-                children: /* @__PURE__ */ jsx28(X4, { size: 13 })
+                children: /* @__PURE__ */ jsx31(X5, { size: 13 })
               }
             )
           ] }),
-          /* @__PURE__ */ jsx28("div", { className: "flex-1 overflow-y-auto overflow-x-hidden py-2 scrollbar-none", children: resolvedItems ? /* @__PURE__ */ jsxs22(Fragment3, { children: [
-            /* @__PURE__ */ jsx28("p", { className: "px-4 pt-1 pb-2 text-[10px] font-semibold tracking-[0.16em] uppercase text-foreground/35", children: "Actions" }),
-            /* @__PURE__ */ jsx28("nav", { className: "flex flex-col px-2", children: resolvedItems.map((item) => /* @__PURE__ */ jsxs22(
+          /* @__PURE__ */ jsx31("div", { className: "flex-1 overflow-y-auto overflow-x-hidden py-2 scrollbar-none", children: resolvedItems ? /* @__PURE__ */ jsxs23(Fragment4, { children: [
+            /* @__PURE__ */ jsx31("p", { className: "px-4 pt-1 pb-2 text-[10px] font-semibold tracking-[0.16em] uppercase text-foreground/35", children: "Actions" }),
+            /* @__PURE__ */ jsx31("nav", { className: "flex flex-col px-2", children: resolvedItems.map((item) => /* @__PURE__ */ jsxs23(
               "button",
               {
                 onClick: () => handleItem(item),
                 className: "group flex items-center gap-3 px-3 py-2.5 rounded-lg w-full\n                               text-left text-[13px] font-medium cursor-pointer\n                               text-foreground/60 hover:text-foreground hover:bg-surface-alt\n                               transition-all duration-150 border-l-2 border-transparent\n                               hover:border-primary",
                 children: [
-                  /* @__PURE__ */ jsx28("span", { className: "flex shrink-0 text-foreground/40 group-hover:text-primary transition-colors duration-150", children: item.icon }),
-                  /* @__PURE__ */ jsx28("span", { className: "flex-1 leading-none", children: item.label })
+                  /* @__PURE__ */ jsx31("span", { className: "flex shrink-0 text-foreground/40 group-hover:text-primary transition-colors duration-150", children: item.icon }),
+                  /* @__PURE__ */ jsx31("span", { className: "flex-1 leading-none", children: item.label })
                 ]
               },
               item.id
             )) })
           ] }) : children }),
-          footerLabel && /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2 px-4 py-3 border-t border-border shrink-0", children: [
-            /* @__PURE__ */ jsx28("span", { className: "w-1.5 h-1.5 rounded-full bg-foreground/20 shrink-0" }),
-            /* @__PURE__ */ jsx28("span", { className: "text-[10px] tracking-[0.12em] uppercase text-foreground/30 font-medium", children: footerLabel })
+          footerLabel && /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2 px-4 py-3 border-t border-border shrink-0", children: [
+            /* @__PURE__ */ jsx31("span", { className: "w-1.5 h-1.5 rounded-full bg-foreground/20 shrink-0" }),
+            /* @__PURE__ */ jsx31("span", { className: "text-[10px] tracking-[0.12em] uppercase text-foreground/30 font-medium", children: footerLabel })
           ] })
         ]
       }