baaz-custom-components 5.2.2 → 5.2.4

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,7 +2572,6 @@ 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) => {
@@ -2614,13 +2612,14 @@ var HeaderCheckbox = ({ api, column }) => {
   const computeState = () => {
     var _a2, _b, _c;
     const pageData = (_b = (_a2 = column == null ? void 0 : column.config) == null ? void 0 : _a2.getPageData()) != null ? _b : [];
+    const dataArray = Array.isArray(pageData) ? pageData : [];
     const selectedRows = (_c = api.getState().selectedRows) != null ? _c : [];
-    const selectedOnPage = pageData.filter(
+    const selectedOnPage = dataArray.filter(
       (r) => selectedRows.includes(r.id)
     ).length;
     return {
-      allSelected: pageData.length > 0 && selectedOnPage === pageData.length,
-      someSelected: selectedOnPage > 0 && selectedOnPage < pageData.length
+      allSelected: dataArray.length > 0 && selectedOnPage === dataArray.length,
+      someSelected: selectedOnPage > 0 && selectedOnPage < dataArray.length
     };
   };
   const [, forceUpdate] = (0, import_react9.useReducer)((x) => x + 1, 0);
@@ -2648,10 +2647,11 @@ var HeaderCheckbox = ({ api, column }) => {
     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) => {
+    const dataArray = Array.isArray(pageData) ? pageData : [];
+    dataArray.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);
+    (_d = (_c = column == null ? void 0 : column.config) == null ? void 0 : _c.onSelectAllPage) == null ? void 0 : _d.call(_c, dataArray, isChecked);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "div",
@@ -2700,6 +2700,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, {
@@ -2725,7 +2734,8 @@ var Grid = (0, import_react10.forwardRef)(
       selectedData,
       selectionActions,
       onSelectionAction,
-      onClearSelection
+      onClearSelection,
+      onRowClick
     } = _b, rest = __objRest(_b, [
       "data",
       "columns",
@@ -2749,10 +2759,10 @@ 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 dataRef = (0, import_react10.useRef)(data);
@@ -2767,6 +2777,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);
@@ -2817,6 +2831,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);
@@ -2840,9 +2865,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)
           });
         });
       }
@@ -2858,6 +2886,12 @@ var Grid = (0, import_react10.forwardRef)(
         apiRef.current = api;
         resizeColumns();
         api.intercept("focus-cell", onFocusCell);
+        api.on("select-row", (ev) => {
+          const handler = onRowClickRef.current;
+          if (!handler) return;
+          const row = api.getRow(ev.id);
+          handler(row);
+        });
       },
       [resizeColumns, onFocusCell]
     );
@@ -2909,8 +2943,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,7 +2541,6 @@ 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) => {
@@ -2583,13 +2581,14 @@ var HeaderCheckbox = ({ api, column }) => {
   const computeState = () => {
     var _a2, _b, _c;
     const pageData = (_b = (_a2 = column == null ? void 0 : column.config) == null ? void 0 : _a2.getPageData()) != null ? _b : [];
+    const dataArray = Array.isArray(pageData) ? pageData : [];
     const selectedRows = (_c = api.getState().selectedRows) != null ? _c : [];
-    const selectedOnPage = pageData.filter(
+    const selectedOnPage = dataArray.filter(
       (r) => selectedRows.includes(r.id)
     ).length;
     return {
-      allSelected: pageData.length > 0 && selectedOnPage === pageData.length,
-      someSelected: selectedOnPage > 0 && selectedOnPage < pageData.length
+      allSelected: dataArray.length > 0 && selectedOnPage === dataArray.length,
+      someSelected: selectedOnPage > 0 && selectedOnPage < dataArray.length
     };
   };
   const [, forceUpdate] = useReducer((x) => x + 1, 0);
@@ -2617,10 +2616,11 @@ var HeaderCheckbox = ({ api, column }) => {
     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) => {
+    const dataArray = Array.isArray(pageData) ? pageData : [];
+    dataArray.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);
+    (_d = (_c = column == null ? void 0 : column.config) == null ? void 0 : _c.onSelectAllPage) == null ? void 0 : _d.call(_c, dataArray, isChecked);
   };
   return /* @__PURE__ */ jsx27(
     "div",
@@ -2669,6 +2669,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, {
@@ -2694,7 +2703,8 @@ var Grid = forwardRef(
       selectedData,
       selectionActions,
       onSelectionAction,
-      onClearSelection
+      onClearSelection,
+      onRowClick
     } = _b, rest = __objRest(_b, [
       "data",
       "columns",
@@ -2718,10 +2728,10 @@ var Grid = forwardRef(
       "selectedData",
       "selectionActions",
       "onSelectionAction",
-      "onClearSelection"
+      "onClearSelection",
+      "onRowClick"
     ]);
     var _a2;
-    console.log("Grid rendered");
     const apiRef = useRef5(null);
     const containerRef = useRef5(null);
     const dataRef = useRef5(data);
@@ -2736,6 +2746,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);
@@ -2786,6 +2800,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);
@@ -2809,9 +2834,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)
           });
         });
       }
@@ -2827,6 +2855,12 @@ var Grid = forwardRef(
         apiRef.current = api;
         resizeColumns();
         api.intercept("focus-cell", onFocusCell);
+        api.on("select-row", (ev) => {
+          const handler = onRowClickRef.current;
+          if (!handler) return;
+          const row = api.getRow(ev.id);
+          handler(row);
+        });
       },
       [resizeColumns, onFocusCell]
     );
@@ -2878,8 +2912,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.2",
+    "version": "5.2.4",
     "private": false,
     "sideEffects": false,
     "main": "dist/index.js",