baaz-custom-components 5.1.1 → 5.2.0

package/dist/index.js

@@ -1947,7 +1947,7 @@ var CustomBreadcrumb = ({
 var breadcrumb_default = CustomBreadcrumb;
 
 // src/components/custom/grid/index.tsx
-var import_react7 = require("react");
+var import_react10 = require("react");
 var import_react_grid = require("@svar-ui/react-grid");
 
 // src/utils/exportPdf.ts
@@ -1982,7 +1982,7 @@ function exportExcel(rows, name) {
 
 // src/components/custom/grid/gridHeader/index.tsx
 var import_react6 = require("react");
-var import_lucide_react13 = require("lucide-react");
+var import_lucide_react14 = require("lucide-react");
 
 // src/components/custom/grid/gridHeader/components/filters.tsx
 var import_react5 = require("react");
@@ -2039,13 +2039,13 @@ var Filters = ({
       }
     ]);
   };
-  const updateCondition = (id, next) => {
+  const updateCondition = (id3, next) => {
     setConditions(
-      (prev) => prev.map((c) => c.id === id ? __spreadValues(__spreadValues({}, c), next) : c)
+      (prev) => prev.map((c) => c.id === id3 ? __spreadValues(__spreadValues({}, c), next) : c)
     );
   };
-  const deleteCondition = (id) => {
-    const updatedConditions = conditions.filter((c) => c.id !== id);
+  const deleteCondition = (id3) => {
+    const updatedConditions = conditions.filter((c) => c.id !== id3);
     setConditions(updatedConditions);
     if (updatedConditions.length === 0) {
       setFilterMenu(false);
@@ -2348,9 +2348,52 @@ var Filters = ({
 };
 var filters_default = Filters;
 
-// src/components/custom/grid/gridHeader/index.tsx
+// src/components/custom/grid/gridHeader/components/selectionBar.tsx
+var import_lucide_react13 = require("lucide-react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var GridHeader = ({
+function SelectionBar({
+  selectedCount,
+  selectedData,
+  actions,
+  onAction,
+  onClear
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-2 animate-in fade-in slide-in-from-left-2 duration-150", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      "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__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.X, { size: 15 })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "text-xs font-medium text-foreground whitespace-nowrap", children: [
+      selectedCount,
+      " ",
+      selectedCount === 1 ? "row" : "rows",
+      " selected"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-4 w-px bg-border mx-1" }),
+    actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      "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__ */ (0, import_jsx_runtime24.jsx)("span", { className: "shrink-0 text-muted-foreground", children: action.icon }),
+          action.label
+        ]
+      },
+      action.id
+    ))
+  ] });
+}
+
+// src/components/custom/grid/gridHeader/index.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function GridHeader({
   onPdf,
   onExcel,
   onSearch = () => {
@@ -2362,11 +2405,17 @@ var GridHeader = ({
   filterList,
   onFilterChange,
   initialFilters = [],
-  children
-}) => {
+  children,
+  selectedCount = 0,
+  selectedData = [],
+  selectionActions = [],
+  onSelectionAction,
+  onClearSelection
+}) {
   const [downloadMenu, setDownloadMenu] = (0, import_react6.useState)(false);
   const [searchOpen, setSearchOpen] = (0, import_react6.useState)(false);
   const downloadRef = (0, import_react6.useRef)(null);
+  const isSelecting = selectedCount > 0;
   (0, import_react6.useEffect)(() => {
     const handleClickOutside = (e) => {
       if (downloadRef.current && !downloadRef.current.contains(e.target)) {
@@ -2376,9 +2425,18 @@ var GridHeader = ({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("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", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex justify-between items-center gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("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__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex items-center gap-3", children: isSelecting ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      SelectionBar,
+      {
+        selectedCount,
+        selectedData,
+        actions: selectionActions,
+        onAction: (actionId, data) => onSelectionAction == null ? void 0 : onSelectionAction(actionId, data),
+        onClear: () => onClearSelection == null ? void 0 : onClearSelection()
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         filters_default,
         {
           onFilterChange,
@@ -2386,17 +2444,17 @@ var GridHeader = ({
           filterList
         }
       ),
-      download && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "relative", ref: downloadRef, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      download && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "relative", ref: downloadRef, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "button",
           {
             onClick: () => setDownloadMenu((p) => !p),
             className: "p-2 rounded-md hover:bg-input cursor-pointer",
-            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.Ellipsis, { size: 16 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react14.Ellipsis, { size: 16 })
           }
         ),
-        downloadMenu && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "absolute top-full right-0 mt-2 w-32 rounded-md border !bg-background shadow-lg z-50 overflow-hidden", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+        downloadMenu && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "absolute top-full right-0 mt-2 w-32 rounded-md border !bg-background shadow-lg z-50 overflow-hidden", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
             "button",
             {
               onClick: () => {
@@ -2405,12 +2463,12 @@ var GridHeader = ({
               },
               className: "flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-muted cursor-pointer",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.FileText, { size: 14 }),
-                "PDF"
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react14.FileText, { size: 14 }),
+                " PDF"
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
             "button",
             {
               onClick: () => {
@@ -2419,29 +2477,29 @@ var GridHeader = ({
               },
               className: "flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-muted cursor-pointer",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.FileSpreadsheet, { size: 14 }),
-                "Excel"
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react14.FileSpreadsheet, { size: 14 }),
+                " Excel"
               ]
             }
           )
         ] })
       ] })
-    ] }),
+    ] }) }),
     children,
-    search && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "relative h-[40px] flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    search && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "relative h-[40px] flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "div",
       {
         className: `absolute md:right-0 flex items-center transition-all duration-200 ${searchOpen ? "w-[250px]" : "w-[40px]"} h-[40px]`,
-        children: !searchOpen ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        children: !searchOpen ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "button",
           {
             onClick: () => setSearchOpen(true),
             className: "w-[40px] h-[40px] flex items-center justify-center rounded-md hover:bg-input cursor-pointer",
-            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.Search, { size: 18 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react14.Search, { size: 18 })
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-2 w-full h-full px-3 rounded-md border border-input bg-background", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.Search, { size: 16 }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center gap-2 w-full h-full px-3 rounded-md border border-input bg-background", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react14.Search, { size: 16 }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             "input",
             {
               autoFocus: true,
@@ -2451,24 +2509,187 @@ var GridHeader = ({
               value: searchValue
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-            "button",
-            {
-              onClick: () => setSearchOpen(false),
-              className: "cursor-pointer",
-              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.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;
 
+// 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 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);
+    });
+    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);
+  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);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    "div",
+    {
+      className: "flex items-center justify-center w-full h-full",
+      "data-action": "ignore-click",
+      onClick: (e) => e.stopPropagation(),
+      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        "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 checkBoxCell_default = import_react8.default.memo(CheckboxCell);
+
+// src/components/custom/grid/checkboxCell/headerCheckBox.tsx
+var import_react9 = __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();
+    };
+  }, [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 handleChange = (e) => {
+    var _a2, _b, _c, _d;
+    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);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "div",
+    {
+      className: "flex items-center justify-center w-full h-full",
+      "data-action": "ignore-click",
+      onClick: (e) => e.stopPropagation(),
+      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        "input",
+        {
+          ref: checkboxRef,
+          type: "checkbox",
+          checked: state.allSelected,
+          onChange: handleChange,
+          className: "w-4 h-4 rounded border border-border bg-background accent-primary cursor-pointer focus:outline-none focus:ring-1 focus:ring-primary"
+        }
+      )
+    }
+  );
+};
+var headerCheckBox_default = import_react9.default.memo(HeaderCheckbox);
+
+// src/components/custom/grid/utils/buildCheckboxColumn.tsx
+function buildCheckboxColumn({
+  getPageData,
+  onSelectionChange,
+  onSelectAllPage,
+  clearToken
+}) {
+  const configRef = {
+    getPageData,
+    onSelectionChange,
+    onSelectAllPage,
+    clearToken
+  };
+  return {
+    id: "__selection__",
+    width: 58,
+    sortable: false,
+    resize: false,
+    config: configRef,
+    header: { cell: headerCheckBox_default },
+    cell: checkBoxCell_default
+  };
+}
+
 // src/components/custom/grid/index.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var Grid = (0, import_react7.forwardRef)(
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var Grid = (0, import_react10.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       data,
@@ -2483,7 +2704,17 @@ var Grid = (0, import_react7.forwardRef)(
       fonts,
       onFilterChange,
       initialFilters,
-      children
+      children,
+      onFocusCell = () => false,
+      selectionEnabled = false,
+      selectedIds = [],
+      onRowSelectionChange,
+      onSelectAllPage,
+      selectedCount,
+      selectedData,
+      selectionActions,
+      onSelectionAction,
+      onClearSelection
     } = _b, rest = __objRest(_b, [
       "data",
       "columns",
@@ -2497,95 +2728,143 @@ var Grid = (0, import_react7.forwardRef)(
       "fonts",
       "onFilterChange",
       "initialFilters",
-      "children"
+      "children",
+      "onFocusCell",
+      "selectionEnabled",
+      "selectedIds",
+      "onRowSelectionChange",
+      "onSelectAllPage",
+      "selectedCount",
+      "selectedData",
+      "selectionActions",
+      "onSelectionAction",
+      "onClearSelection"
     ]);
-    const apiRef = (0, import_react7.useRef)(null);
-    const containerRef = (0, import_react7.useRef)(null);
-    (0, import_react7.useImperativeHandle)(ref, () => apiRef.current, []);
-    const resizeColumns = (0, import_react7.useCallback)(() => {
-      var _a2;
+    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)(() => {
+      dataRef.current = data;
+    }, [data]);
+    const onRowSelectionChangeRef = (0, import_react10.useRef)(onRowSelectionChange);
+    (0, import_react10.useEffect)(() => {
+      onRowSelectionChangeRef.current = onRowSelectionChange;
+    }, [onRowSelectionChange]);
+    const onSelectAllPageRef = (0, import_react10.useRef)(onSelectAllPage);
+    (0, import_react10.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;
+      const checkboxCol = buildCheckboxColumn({
+        getPageData: () => {
+          var _a3;
+          return (_a3 = dataRef.current) != null ? _a3 : [];
+        },
+        onSelectionChange: (id3, rowData, checked) => {
+          var _a3;
+          (_a3 = onRowSelectionChangeRef.current) == null ? void 0 : _a3.call(onRowSelectionChangeRef, id3, rowData, checked);
+        },
+        onSelectAllPage: (pageData, checked) => {
+          var _a3;
+          (_a3 = onSelectAllPageRef.current) == null ? void 0 : _a3.call(onSelectAllPageRef, pageData, checked);
+        },
+        clearToken: clearTokenRef.current
+      });
+      return [checkboxCol, ...columns];
+    }, [selectionEnabled, columns, clearTokenRef.current]);
+    const resizeColumns = (0, import_react10.useCallback)(() => {
       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 isFixedColumn = (col) => col.id === "__selection__";
+      const resizableColumns = resolvedColumns.filter(
+        (col) => !isFixedColumn(col)
+      );
+      const fixedColumns = resolvedColumns.filter(
+        (col) => isFixedColumn(col)
+      );
+      const totalFixedWidth = fixedColumns.reduce((sum, col) => {
+        var _a3, _b2;
+        const column = api.getColumn(col.id);
+        const width = (_b2 = (_a3 = column == null ? void 0 : column.width) != null ? _a3 : col.width) != null ? _b2 : 0;
+        return sum + (isNaN(width) ? 0 : width);
+      }, 0);
+      const availableWidth = Math.max(gridWidth - totalFixedWidth, 0);
       if (data && data.length > 0) {
-        columns.forEach((col) => {
-          api.exec("resize-column", {
-            id: col.id,
-            auto: "data"
-          });
+        resizableColumns.forEach((col) => {
+          api.exec("resize-column", { id: col.id, auto: "data" });
         });
-        const totalColumnWidth = columns.reduce((sum, col) => {
+        const totalAutoWidth = resizableColumns.reduce((sum, col) => {
           var _a3;
           const column = api.getColumn(col.id);
           const width = (_a3 = column == null ? void 0 : column.width) != null ? _a3 : 0;
           return sum + (isNaN(width) ? 0 : width);
         }, 0);
-        if (totalColumnWidth < gridWidth) {
-          const extra = (gridWidth - totalColumnWidth) / columns.length;
-          columns.forEach((col) => {
+        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 - 0.3
+                width: currentWidth + extra
               });
             }
           });
         }
       } else {
-        const columnWidth = gridWidth / columns.length;
-        columns.forEach((col) => {
+        const equalWidth = resizableColumns.length > 0 ? availableWidth / resizableColumns.length : 0;
+        resizableColumns.forEach((col) => {
           api.exec("resize-column", {
             id: col.id,
-            width: columnWidth - 0.3
+            width: equalWidth
           });
         });
       }
-    }, [columns, data]);
-    (0, import_react7.useEffect)(() => {
+    }, [resolvedColumns, data]);
+    (0, import_react10.useEffect)(() => {
       if (!containerRef.current) return;
-      const observer = new ResizeObserver(() => {
-        resizeColumns();
-      });
+      const observer = new ResizeObserver(() => resizeColumns());
       observer.observe(containerRef.current);
       return () => observer.disconnect();
     }, [resizeColumns]);
-    const init = (0, import_react7.useCallback)(
+    const init = (0, import_react10.useCallback)(
       (api) => {
         apiRef.current = api;
         resizeColumns();
+        api.intercept("focus-cell", onFocusCell);
       },
-      [resizeColumns]
+      [resizeColumns, onFocusCell]
     );
     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;
+      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_react7.useCallback)(() => {
+    const handleExportPdf = (0, import_react10.useCallback)(() => {
       const selected = getSelectedData();
-      if (selected.length) {
-        exportPdf(selected, fileName);
-      } else {
-        onExportPdf == null ? void 0 : onExportPdf();
-      }
-    }, [getSelectedData, exportPdf, onExportPdf, fileName]);
-    const handleExportExcel = (0, import_react7.useCallback)(() => {
+      if (selected.length) exportPdf(selected, fileName);
+      else onExportPdf == null ? void 0 : onExportPdf();
+    }, [data, fileName, onExportPdf]);
+    const handleExportExcel = (0, import_react10.useCallback)(() => {
       const selected = getSelectedData();
-      if (selected.length) {
-        exportExcel(selected, fileName);
-      } else {
-        onExportExcel == null ? void 0 : onExportExcel();
-      }
-    }, [getSelectedData, exportExcel, onExportExcel, fileName]);
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "w-full h-full flex flex-col overflow-hidden", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      if (selected.length) exportExcel(selected, fileName);
+      else onExportExcel == null ? void 0 : onExportExcel();
+    }, [data, fileName, onExportExcel]);
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "w-full h-full flex flex-col overflow-hidden", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         gridHeader_default,
         {
           onPdf: handleExportPdf,
@@ -2598,20 +2877,42 @@ var Grid = (0, import_react7.forwardRef)(
           filterList: rest.filterList,
           onFilterChange,
           initialFilters,
+          selectedCount,
+          selectedData,
+          selectionActions,
+          onSelectionAction,
+          onClearSelection,
           children
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex-1 w-full overflow-hidden", ref: containerRef, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_grid.WillowDark, { fonts, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "w-full h-full relative", children: rest.loading ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "absolute inset-0 bg-background/60 backdrop-blur-sm flex items-center justify-center z-10", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "animate-spin rounded-full h-8 w-8 border-2 border-primary border-t-transparent" }) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_grid.Grid, __spreadProps(__spreadValues({}, rest), { data, columns, init })) }) }) })
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        "div",
+        {
+          className: "flex-1 w-full border border-border overflow-hidden",
+          ref: containerRef,
+          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_grid.WillowDark, { fonts, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-full h-full relative", children: rest.loading ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "absolute inset-0 bg-background/60 backdrop-blur-sm flex items-center justify-center z-10", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "animate-spin rounded-full h-8 w-8 border-2 border-primary border-t-transparent" }) }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            import_react_grid.Grid,
+            __spreadProps(__spreadValues({}, rest), {
+              data,
+              columns: resolvedColumns,
+              init,
+              selectedRows: selectionEnabled ? selectedIds : void 0,
+              select: selectionEnabled ? false : rest.select
+            })
+          ) }) })
+        }
+      )
     ] });
   }
 );
 var grid_default = Grid;
 
 // src/components/custom/grid/sortableHeaderCell.tsx
-var import_lucide_react14 = require("lucide-react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
-function SortableHeaderCell({ cell, sortKey, sortOrder, onSortChange }) {
-  if (!(cell == null ? void 0 : cell.id)) return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: cell == null ? void 0 : cell.text });
+var import_lucide_react15 = require("lucide-react");
+var import_react11 = __toESM(require("react"));
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var SortableHeaderCell = ({ cell, sortKey, sortOrder, onSortChange }) => {
+  if (!(cell == null ? void 0 : cell.id)) return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: cell == null ? void 0 : cell.text });
   const active = sortKey === cell.id;
   const handleClick = () => {
     if (!onSortChange || !cell.id) return;
@@ -2625,20 +2926,27 @@ function SortableHeaderCell({ cell, sortKey, sortOrder, onSortChange }) {
     }
     onSortChange("", null);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "div",
     {
       onClick: handleClick,
       className: "cursor-pointer flex items-center gap-2 justify-between select-none",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: cell.text }),
-        !active && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react14.ArrowUpDown, { className: "w-4 h-4 opacity-50" }),
-        active && (sortOrder === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react14.MoveDown, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react14.MoveUp, { className: "w-4 h-4" }))
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: cell.text }),
+        !active && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react15.ArrowUpDown, { className: "w-4 h-4 opacity-50" }),
+        active && (sortOrder === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react15.MoveDown, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react15.MoveUp, { className: "w-4 h-4" }))
       ]
     }
   );
-}
-var sortableHeaderCell_default = SortableHeaderCell;
+};
+var sortableHeaderCell_default = import_react11.default.memo(SortableHeaderCell, (prev, next) => {
+  var _a, _b, _c, _d;
+  if (((_a = prev.cell) == null ? void 0 : _a.id) !== ((_b = next.cell) == null ? void 0 : _b.id)) return false;
+  if (((_c = prev.cell) == null ? void 0 : _c.text) !== ((_d = next.cell) == null ? void 0 : _d.text)) return false;
+  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) {
@@ -2671,8 +2979,8 @@ function getPaginationRange(currentPage, totalPages, siblingCount = 2) {
 }
 
 // src/components/custom/pagination/index.tsx
-var import_lucide_react15 = require("lucide-react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_lucide_react16 = require("lucide-react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function Pagination({
   totalCount,
   count = null,
@@ -2692,47 +3000,47 @@ function Pagination({
   const handlePageSizeChange = (size) => {
     onPageSizeChange == null ? void 0 : onPageSizeChange(size);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("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", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("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__ */ (0, import_jsx_runtime27.jsxs)("span", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("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__ */ (0, import_jsx_runtime30.jsxs)("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__ */ (0, import_jsx_runtime30.jsxs)("span", { children: [
         "Showing ",
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-foreground", children: count }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-foreground", children: count }),
         " of",
         " ",
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-foreground", children: totalCount })
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-foreground", children: totalCount })
       ] }),
-      showSizeChanger && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      showSizeChanger && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         "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__ */ (0, import_jsx_runtime27.jsxs)("option", { value: size, children: [
+          children: sizeChangerOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("option", { value: size, children: [
             size,
             " / page"
           ] }, size))
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex w-full md:w-auto justify-between items-center gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex w-full md:w-auto justify-between items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         "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__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react15.ChevronLeft, { className: "w-5 h-5 select-none" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react16.ChevronLeft, { className: "w-5 h-5 select-none" })
         }
       ),
       pages.map(
-        (page, idx) => page === "dots" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        (page, idx) => page === "dots" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           "span",
           {
             className: "px-2 text-muted-foreground text-xs tracking-wider font-medium",
             children: "\u2026"
           },
           `dots-${idx}`
-        ) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           "button",
           {
             onClick: () => handlePageChange(page),
@@ -2742,13 +3050,13 @@ function Pagination({
           page
         )
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         "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__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react15.ChevronRight, { className: "w-5 h-5 select-none" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react16.ChevronRight, { className: "w-5 h-5 select-none" })
         }
       )
     ] })
@@ -2757,9 +3065,9 @@ function Pagination({
 var pagination_default = Pagination;
 
 // src/components/custom/toolbar/index.tsx
-var import_lucide_react16 = require("lucide-react");
-var import_react8 = require("react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_lucide_react17 = require("lucide-react");
+var import_react12 = require("react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var SlideToolbar = ({
   items,
   children,
@@ -2771,9 +3079,9 @@ var SlideToolbar = ({
   className = ""
 }) => {
   const resolvedItems = items != null ? items : children ? void 0 : [];
-  const [open, setOpen] = (0, import_react8.useState)(false);
-  const panelRef = (0, import_react8.useRef)(null);
-  (0, import_react8.useEffect)(() => {
+  const [open, setOpen] = (0, import_react12.useState)(false);
+  const panelRef = (0, import_react12.useRef)(null);
+  (0, import_react12.useEffect)(() => {
     if (!open || !closeOnBackdrop) return;
     const handlePointerDown = (e) => {
       if (panelRef.current && !panelRef.current.contains(e.target)) {
@@ -2786,8 +3094,8 @@ var SlideToolbar = ({
   const handleItem = (item) => {
     onAction == null ? void 0 : onAction(item.id);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("style", { children: `
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("style", { children: `
         @keyframes bounceX {
           0%, 100% { transform: translateX(0px); }
           40%       { transform: translateX(4px); }
@@ -2797,7 +3105,7 @@ var SlideToolbar = ({
           animation: bounceX 1.4s ease-in-out infinite;
         }
       ` }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       "div",
       {
         role: "button",
@@ -2811,8 +3119,8 @@ 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__ */ (0, import_jsx_runtime28.jsx)(
-          import_lucide_react16.ChevronRight,
+        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          import_lucide_react17.ChevronRight,
           {
             className: "text-primary-foreground chevron-bounce",
             size: 16
@@ -2820,7 +3128,7 @@ var SlideToolbar = ({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
       "div",
       {
         ref: panelRef,
@@ -2837,41 +3145,36 @@ var SlideToolbar = ({
         ].join(" "),
         style: { width: `${panelWidth}px` },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center justify-between px-3 py-2.5 bg-surface-alt border-b border-border shrink-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-xs font-semibold tracking-[0.15em] uppercase text-foreground", children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center justify-between px-4 py-3 border-b border-border shrink-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-sm font-semibold text-foreground tracking-wide", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
               "button",
               {
                 onClick: () => setOpen(false),
                 "aria-label": "Close toolbar",
-                className: "flex items-center justify-center w-5 h-5 rounded cursor-pointer\n                       text-foreground hover:text-foreground hover:bg-border\n                       transition-colors duration-100",
-                children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react16.X, { size: 14 })
+                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__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react17.X, { size: 13 })
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex-1 overflow-y-auto overflow-x-hidden p-1.5 scrollbar-none", children: resolvedItems ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "p-2 text-xs font-semibold tracking-[0.14em] uppercase text-foreground/30", children: "Actions" }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("nav", { className: "flex flex-col gap-2", children: resolvedItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex-1 overflow-y-auto overflow-x-hidden py-2 scrollbar-none", children: resolvedItems ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "px-4 pt-1 pb-2 text-[10px] font-semibold tracking-[0.16em] uppercase text-foreground/35", children: "Actions" }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("nav", { className: "flex flex-col px-2", children: resolvedItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
               "button",
               {
                 onClick: () => handleItem(item),
-                className: [
-                  "group flex items-center gap-2.5 p-2.5 rounded w-full",
-                  "text-left text-sm cursor-pointer border-l-2",
-                  "transition-colors duration-100",
-                  "border-transparent text-foreground/70 hover:text-foreground hover:bg-surface-alt hover:border-primary"
-                ].join(" "),
+                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__ */ (0, import_jsx_runtime28.jsx)("span", { className: "flex shrink-0 transition-colors duration-100 text-foreground/70 group-hover:text-foreground/90", children: item.icon }),
-                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "flex-1 leading-none", children: item.label })
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "flex shrink-0 text-foreground/40 group-hover:text-primary transition-colors duration-150", children: item.icon }),
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "flex-1 leading-none", children: item.label })
                 ]
               },
               item.id
             )) })
           ] }) : children }),
-          footerLabel && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-2 px-3 py-2 border-t border-border bg-surface-alt shrink-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "w-1 h-1 rounded-full bg-foreground/20 shrink-0" }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-[9px] tracking-[0.1em] uppercase text-foreground/25", children: footerLabel })
+          footerLabel && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-2 px-4 py-3 border-t border-border shrink-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-foreground/20 shrink-0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-[10px] tracking-[0.12em] uppercase text-foreground/30 font-medium", children: footerLabel })
           ] })
         ]
       }