baaz-custom-components 5.2.3 → 5.2.5

package/dist/index.d.mts

@@ -105,6 +105,7 @@ type GridProps = {
     filterList: Filters[];
     initialFilters?: any[];
     children?: React.ReactNode;
+    onRowClick?: (row: AnyRow) => void;
     onSortChange?: (key: string, order: SortOrder) => void;
     onExportPdf?: () => void;
     onExportExcel?: () => void;

package/dist/index.d.ts

@@ -105,6 +105,7 @@ type GridProps = {
     filterList: Filters[];
     initialFilters?: any[];
     children?: React.ReactNode;
+    onRowClick?: (row: AnyRow) => void;
     onSortChange?: (key: string, order: SortOrder) => void;
     onExportPdf?: () => void;
     onExportExcel?: () => void;

package/dist/index.js

@@ -2412,7 +2412,6 @@ 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);
@@ -2573,15 +2572,15 @@ function useStore(store, name) {
 // src/components/custom/grid/checkboxCell/checkBoxCell.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var CheckboxCell = ({ row, api, column }) => {
-  console.log("CheckboxCell rendered");
   const selectedRows = useStore(api, "selectedRows");
   const isSelected = selectedRows.includes(row.id);
   const handleChange = (e) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     e.stopPropagation();
     const isChecked = e.target.checked;
+    (_b = (_a = column == null ? void 0 : column.config) == null ? void 0 : _a.markCheckboxAction) == null ? void 0 : _b.call(_a);
     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);
+    (_d = (_c = column == null ? void 0 : column.config) == null ? void 0 : _c.onSelectionChange) == null ? void 0 : _d.call(_c, row.id, row, isChecked);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "div",
@@ -2651,6 +2650,8 @@ var HeaderCheckbox = ({ api, column }) => {
     const pageData = (_b = (_a2 = column == null ? void 0 : column.config) == null ? void 0 : _a2.getPageData()) != null ? _b : [];
     const dataArray = Array.isArray(pageData) ? pageData : [];
     dataArray.forEach((row) => {
+      var _a3, _b2;
+      (_b2 = (_a3 = column == null ? void 0 : column.config) == null ? void 0 : _a3.markCheckboxAction) == null ? void 0 : _b2.call(_a3);
       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, dataArray, isChecked);
@@ -2681,13 +2682,15 @@ function buildCheckboxColumn({
   getPageData,
   onSelectionChange,
   onSelectAllPage,
-  clearToken
+  clearToken,
+  markCheckboxAction
 }) {
   const configRef = {
     getPageData,
     onSelectionChange,
     onSelectAllPage,
-    clearToken
+    clearToken,
+    markCheckboxAction
   };
   return {
     id: "__selection__",
@@ -2702,6 +2705,15 @@ function buildCheckboxColumn({
 
 // src/components/custom/grid/index.tsx
 var import_jsx_runtime28 = require("react/jsx-runtime");
+var _measureCanvas = typeof window !== "undefined" ? document.createElement("canvas") : null;
+function measureHeaderTextWidth(text) {
+  if (!_measureCanvas) return 0;
+  const ctx = _measureCanvas.getContext("2d");
+  if (!ctx) return 0;
+  ctx.font = "500 13px Inter, ui-sans-serif, system-ui, sans-serif";
+  const textWidth = ctx.measureText(text).width;
+  return Math.ceil(textWidth) + 64;
+}
 var Grid = (0, import_react10.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
@@ -2727,7 +2739,8 @@ var Grid = (0, import_react10.forwardRef)(
       selectedData,
       selectionActions,
       onSelectionAction,
-      onClearSelection
+      onClearSelection,
+      onRowClick
     } = _b, rest = __objRest(_b, [
       "data",
       "columns",
@@ -2751,12 +2764,13 @@ var Grid = (0, import_react10.forwardRef)(
       "selectedData",
       "selectionActions",
       "onSelectionAction",
-      "onClearSelection"
+      "onClearSelection",
+      "onRowClick"
     ]);
     var _a2;
-    console.log("Grid rendered");
     const apiRef = (0, import_react10.useRef)(null);
     const containerRef = (0, import_react10.useRef)(null);
+    const isCheckboxActionRef = (0, import_react10.useRef)(false);
     const dataRef = (0, import_react10.useRef)(data);
     (0, import_react10.useEffect)(() => {
       dataRef.current = data;
@@ -2769,6 +2783,10 @@ var Grid = (0, import_react10.forwardRef)(
     (0, import_react10.useEffect)(() => {
       onSelectAllPageRef.current = onSelectAllPage;
     }, [onSelectAllPage]);
+    const onRowClickRef = (0, import_react10.useRef)(onRowClick);
+    (0, import_react10.useEffect)(() => {
+      onRowClickRef.current = onRowClick;
+    }, [onRowClick]);
     (0, import_react10.useImperativeHandle)(ref, () => apiRef.current, []);
     const clearTokenRef = (0, import_react10.useRef)(0);
     const prevSelectedCountRef = (0, import_react10.useRef)(selectedCount != null ? selectedCount : 0);
@@ -2792,7 +2810,10 @@ var Grid = (0, import_react10.forwardRef)(
           var _a3;
           (_a3 = onSelectAllPageRef.current) == null ? void 0 : _a3.call(onSelectAllPageRef, pageData, checked);
         },
-        clearToken: clearTokenRef.current
+        clearToken: clearTokenRef.current,
+        markCheckboxAction: () => {
+          isCheckboxActionRef.current = true;
+        }
       });
       return [checkboxCol, ...columns];
     }, [selectionEnabled, columns, clearTokenRef.current]);
@@ -2819,6 +2840,17 @@ var Grid = (0, import_react10.forwardRef)(
         resizableColumns.forEach((col) => {
           api.exec("resize-column", { id: col.id, auto: "data" });
         });
+        resizableColumns.forEach((col) => {
+          var _a3, _b2, _c, _d, _e, _f, _g;
+          const headerText = (_f = (_e = (_d = (_a3 = col == null ? void 0 : col.header) == null ? void 0 : _a3.text) != null ? _d : (_c = (_b2 = col == null ? void 0 : col.header) == null ? void 0 : _b2[0]) == null ? void 0 : _c.text) != null ? _e : col == null ? void 0 : col.text) != null ? _f : "";
+          if (!headerText) return;
+          const minWidth = measureHeaderTextWidth(headerText);
+          const column = api.getColumn(col.id);
+          const currentWidth = (_g = column == null ? void 0 : column.width) != null ? _g : 0;
+          if (!isNaN(currentWidth) && currentWidth < minWidth) {
+            api.exec("resize-column", { id: col.id, width: minWidth });
+          }
+        });
         const totalAutoWidth = resizableColumns.reduce((sum, col) => {
           var _a3;
           const column = api.getColumn(col.id);
@@ -2842,9 +2874,12 @@ var Grid = (0, import_react10.forwardRef)(
       } else {
         const equalWidth = resizableColumns.length > 0 ? availableWidth / resizableColumns.length : 0;
         resizableColumns.forEach((col) => {
+          var _a3, _b2, _c, _d, _e, _f;
+          const headerText = (_f = (_e = (_d = (_a3 = col == null ? void 0 : col.header) == null ? void 0 : _a3.text) != null ? _d : (_c = (_b2 = col == null ? void 0 : col.header) == null ? void 0 : _b2[0]) == null ? void 0 : _c.text) != null ? _e : col == null ? void 0 : col.text) != null ? _f : "";
+          const minWidth = headerText ? measureHeaderTextWidth(headerText) : 0;
           api.exec("resize-column", {
             id: col.id,
-            width: equalWidth
+            width: Math.max(equalWidth, minWidth)
           });
         });
       }
@@ -2860,6 +2895,16 @@ var Grid = (0, import_react10.forwardRef)(
         apiRef.current = api;
         resizeColumns();
         api.intercept("focus-cell", onFocusCell);
+        api.on("select-row", (ev) => {
+          if (isCheckboxActionRef.current) {
+            isCheckboxActionRef.current = false;
+            return;
+          }
+          const handler = onRowClickRef.current;
+          if (!handler) return;
+          const row = api.getRow(ev.id);
+          handler(row);
+        });
       },
       [resizeColumns, onFocusCell]
     );
@@ -2911,8 +2956,7 @@ var Grid = (0, import_react10.forwardRef)(
               data,
               columns: resolvedColumns,
               init,
-              selectedRows: selectionEnabled ? selectedIds : void 0,
-              select: selectionEnabled ? false : rest.select
+              selectedRows: selectionEnabled ? selectedIds : void 0
             })
           ) }) })
         }

package/dist/index.mjs

@@ -2381,7 +2381,6 @@ function GridHeader({
   onSelectionAction,
   onClearSelection
 }) {
-  console.log("GridHeader rendered");
   const [downloadMenu, setDownloadMenu] = useState7(false);
   const [searchOpen, setSearchOpen] = useState7(false);
   const downloadRef = useRef2(null);
@@ -2542,15 +2541,15 @@ function useStore(store, name) {
 // src/components/custom/grid/checkboxCell/checkBoxCell.tsx
 import { jsx as jsx26 } from "react/jsx-runtime";
 var CheckboxCell = ({ row, api, column }) => {
-  console.log("CheckboxCell rendered");
   const selectedRows = useStore(api, "selectedRows");
   const isSelected = selectedRows.includes(row.id);
   const handleChange = (e) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     e.stopPropagation();
     const isChecked = e.target.checked;
+    (_b = (_a = column == null ? void 0 : column.config) == null ? void 0 : _a.markCheckboxAction) == null ? void 0 : _b.call(_a);
     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);
+    (_d = (_c = column == null ? void 0 : column.config) == null ? void 0 : _c.onSelectionChange) == null ? void 0 : _d.call(_c, row.id, row, isChecked);
   };
   return /* @__PURE__ */ jsx26(
     "div",
@@ -2620,6 +2619,8 @@ var HeaderCheckbox = ({ api, column }) => {
     const pageData = (_b = (_a2 = column == null ? void 0 : column.config) == null ? void 0 : _a2.getPageData()) != null ? _b : [];
     const dataArray = Array.isArray(pageData) ? pageData : [];
     dataArray.forEach((row) => {
+      var _a3, _b2;
+      (_b2 = (_a3 = column == null ? void 0 : column.config) == null ? void 0 : _a3.markCheckboxAction) == null ? void 0 : _b2.call(_a3);
       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, dataArray, isChecked);
@@ -2650,13 +2651,15 @@ function buildCheckboxColumn({
   getPageData,
   onSelectionChange,
   onSelectAllPage,
-  clearToken
+  clearToken,
+  markCheckboxAction
 }) {
   const configRef = {
     getPageData,
     onSelectionChange,
     onSelectAllPage,
-    clearToken
+    clearToken,
+    markCheckboxAction
   };
   return {
     id: "__selection__",
@@ -2671,6 +2674,15 @@ function buildCheckboxColumn({
 
 // src/components/custom/grid/index.tsx
 import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
+var _measureCanvas = typeof window !== "undefined" ? document.createElement("canvas") : null;
+function measureHeaderTextWidth(text) {
+  if (!_measureCanvas) return 0;
+  const ctx = _measureCanvas.getContext("2d");
+  if (!ctx) return 0;
+  ctx.font = "500 13px Inter, ui-sans-serif, system-ui, sans-serif";
+  const textWidth = ctx.measureText(text).width;
+  return Math.ceil(textWidth) + 64;
+}
 var Grid = forwardRef(
   (_a, ref) => {
     var _b = _a, {
@@ -2696,7 +2708,8 @@ var Grid = forwardRef(
       selectedData,
       selectionActions,
       onSelectionAction,
-      onClearSelection
+      onClearSelection,
+      onRowClick
     } = _b, rest = __objRest(_b, [
       "data",
       "columns",
@@ -2720,12 +2733,13 @@ var Grid = forwardRef(
       "selectedData",
       "selectionActions",
       "onSelectionAction",
-      "onClearSelection"
+      "onClearSelection",
+      "onRowClick"
     ]);
     var _a2;
-    console.log("Grid rendered");
     const apiRef = useRef5(null);
     const containerRef = useRef5(null);
+    const isCheckboxActionRef = useRef5(false);
     const dataRef = useRef5(data);
     useEffect9(() => {
       dataRef.current = data;
@@ -2738,6 +2752,10 @@ var Grid = forwardRef(
     useEffect9(() => {
       onSelectAllPageRef.current = onSelectAllPage;
     }, [onSelectAllPage]);
+    const onRowClickRef = useRef5(onRowClick);
+    useEffect9(() => {
+      onRowClickRef.current = onRowClick;
+    }, [onRowClick]);
     useImperativeHandle(ref, () => apiRef.current, []);
     const clearTokenRef = useRef5(0);
     const prevSelectedCountRef = useRef5(selectedCount != null ? selectedCount : 0);
@@ -2761,7 +2779,10 @@ var Grid = forwardRef(
           var _a3;
           (_a3 = onSelectAllPageRef.current) == null ? void 0 : _a3.call(onSelectAllPageRef, pageData, checked);
         },
-        clearToken: clearTokenRef.current
+        clearToken: clearTokenRef.current,
+        markCheckboxAction: () => {
+          isCheckboxActionRef.current = true;
+        }
       });
       return [checkboxCol, ...columns];
     }, [selectionEnabled, columns, clearTokenRef.current]);
@@ -2788,6 +2809,17 @@ var Grid = forwardRef(
         resizableColumns.forEach((col) => {
           api.exec("resize-column", { id: col.id, auto: "data" });
         });
+        resizableColumns.forEach((col) => {
+          var _a3, _b2, _c, _d, _e, _f, _g;
+          const headerText = (_f = (_e = (_d = (_a3 = col == null ? void 0 : col.header) == null ? void 0 : _a3.text) != null ? _d : (_c = (_b2 = col == null ? void 0 : col.header) == null ? void 0 : _b2[0]) == null ? void 0 : _c.text) != null ? _e : col == null ? void 0 : col.text) != null ? _f : "";
+          if (!headerText) return;
+          const minWidth = measureHeaderTextWidth(headerText);
+          const column = api.getColumn(col.id);
+          const currentWidth = (_g = column == null ? void 0 : column.width) != null ? _g : 0;
+          if (!isNaN(currentWidth) && currentWidth < minWidth) {
+            api.exec("resize-column", { id: col.id, width: minWidth });
+          }
+        });
         const totalAutoWidth = resizableColumns.reduce((sum, col) => {
           var _a3;
           const column = api.getColumn(col.id);
@@ -2811,9 +2843,12 @@ var Grid = forwardRef(
       } else {
         const equalWidth = resizableColumns.length > 0 ? availableWidth / resizableColumns.length : 0;
         resizableColumns.forEach((col) => {
+          var _a3, _b2, _c, _d, _e, _f;
+          const headerText = (_f = (_e = (_d = (_a3 = col == null ? void 0 : col.header) == null ? void 0 : _a3.text) != null ? _d : (_c = (_b2 = col == null ? void 0 : col.header) == null ? void 0 : _b2[0]) == null ? void 0 : _c.text) != null ? _e : col == null ? void 0 : col.text) != null ? _f : "";
+          const minWidth = headerText ? measureHeaderTextWidth(headerText) : 0;
           api.exec("resize-column", {
             id: col.id,
-            width: equalWidth
+            width: Math.max(equalWidth, minWidth)
           });
         });
       }
@@ -2829,6 +2864,16 @@ var Grid = forwardRef(
         apiRef.current = api;
         resizeColumns();
         api.intercept("focus-cell", onFocusCell);
+        api.on("select-row", (ev) => {
+          if (isCheckboxActionRef.current) {
+            isCheckboxActionRef.current = false;
+            return;
+          }
+          const handler = onRowClickRef.current;
+          if (!handler) return;
+          const row = api.getRow(ev.id);
+          handler(row);
+        });
       },
       [resizeColumns, onFocusCell]
     );
@@ -2880,8 +2925,7 @@ var Grid = forwardRef(
               data,
               columns: resolvedColumns,
               init,
-              selectedRows: selectionEnabled ? selectedIds : void 0,
-              select: selectionEnabled ? false : rest.select
+              selectedRows: selectionEnabled ? selectedIds : void 0
             })
           ) }) })
         }

package/package.json

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