@machinemetrics/mm-react-components 0.2.3-20 → 0.2.3-21

package/dist/mm-react-components.es.js

@@ -24494,7 +24494,9 @@ function DataTablePagination({
   table,
   pageSizeOptions = [25, 50, 100, 250],
   className,
-  compact: compact2 = false
+  compact: compact2 = false,
+  onPageChange,
+  onPageSizeChange
 }) {
   const state = table.getState();
   const pageSize = state.pagination?.pageSize ?? 25;
@@ -24534,6 +24536,12 @@ function DataTablePagination({
                       const size2 = Number(value);
                       table.setPageIndex(0);
                       table.setPageSize(size2);
+                      if (onPageSizeChange) {
+                        onPageSizeChange(size2);
+                      }
+                      if (onPageChange) {
+                        onPageChange(0);
+                      }
                     },
                     children: [
                       /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "h-9 w-20", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, {}) }),
@@ -24551,7 +24559,12 @@ function DataTablePagination({
             {
               variant: "outline",
               className: "h-9 rounded-md px-3",
-              onClick: () => table.previousPage(),
+              onClick: () => {
+                table.previousPage();
+                if (onPageChange) {
+                  onPageChange(table.getState().pagination?.pageIndex ?? 0);
+                }
+              },
               disabled: !canPrev,
               "data-slot": "previous",
               children: "Previous"
@@ -24581,7 +24594,12 @@ function DataTablePagination({
             {
               variant: "outline",
               className: "h-9 rounded-md px-3",
-              onClick: () => table.nextPage(),
+              onClick: () => {
+                table.nextPage();
+                if (onPageChange) {
+                  onPageChange(table.getState().pagination?.pageIndex ?? 0);
+                }
+              },
               disabled: !canNext,
               "data-slot": "next",
               children: "Next"
@@ -25980,6 +25998,7 @@ function DataTableToolbar({
   columnRegistry,
   onResetColumns,
   onExport,
+  onExportComplete,
   options
 }) {
   const registeredFilters = useColumnFilters(table, columnRegistry);
@@ -25998,6 +26017,9 @@ function DataTableToolbar({
   const handleExport = React.useCallback(() => {
     if (onExport) {
       onExport();
+      if (onExportComplete) {
+        onExportComplete(table.getFilteredRowModel().rows.length);
+      }
       return;
     }
     const headers = table.getVisibleLeafColumns().map((col) => col.id);
@@ -26015,7 +26037,10 @@ function DataTableToolbar({
     a2.download = "data.csv";
     a2.click();
     URL.revokeObjectURL(url);
-  }, [onExport, table]);
+    if (onExportComplete) {
+      onExportComplete(rows.length);
+    }
+  }, [onExport, onExportComplete, table]);
   const clearAllFilters = React.useCallback(() => {
     registeredFilters.forEach((filter) => {
       filter.column.setFilterValue(void 0);
@@ -26067,7 +26092,7 @@ function DataTableToolbar({
                 event.preventDefault();
                 event.stopPropagation();
                 const value = event.currentTarget.value.trim();
-                if (opts.onSearchSubmit && value) {
+                if (opts.onSearchSubmit) {
                   opts.onSearchSubmit(value);
                 }
               }
@@ -26105,12 +26130,18 @@ function DataTableToolbar({
         ) : null
       ] })
     ] }),
-    typeof opts.belowControls === "function" ? opts.belowControls({
-      globalFilter,
-      onSearchChange: opts.onSearchChange,
-      onSearchSubmit: opts.onSearchSubmit,
-      loading
-    }) : opts.belowControls ?? null
+    (() => {
+      if (typeof opts.belowControls === "function") {
+        return opts.belowControls({
+          globalFilter,
+          onSearchChange: opts.onSearchChange,
+          onSearchSubmit: opts.onSearchSubmit,
+          loading
+        });
+      } else {
+        return opts.belowControls ?? null;
+      }
+    })()
   ] });
 }
 /**
@@ -29257,7 +29288,21 @@ function useBreakpoint(query = QUERY) {
   return matches;
 }
 function useTableController(options) {
-  const { columns, data, columnRegistry, initialState: initialState2, tableId } = options;
+  const {
+    columns,
+    data,
+    columnRegistry,
+    initialState: initialState2,
+    tableId,
+    onRowSelectionChange,
+    onSortingChange,
+    onPaginationChange,
+    onColumnVisibilityChange,
+    onColumnOrderChange,
+    onBatchAction,
+    onRowClick,
+    onExportComplete
+  } = options;
   const storageKey = tableId ? `mmrc:table:${tableId}` : void 0;
   const persistedState = React.useMemo(() => {
     if (!storageKey) return null;
@@ -29311,6 +29356,57 @@ function useTableController(options) {
     pageIndex: 0,
     pageSize: 25
   });
+  const wrappedSetRowSelection = React.useCallback(
+    (updater) => {
+      const newSelection = typeof updater === "function" ? updater(rowSelection) : updater;
+      setRowSelection(newSelection);
+      if (onRowSelectionChange) {
+        const selectedRows = data.filter((_, index2) => newSelection[index2]);
+        onRowSelectionChange(selectedRows, newSelection);
+      }
+    },
+    [rowSelection, setRowSelection, onRowSelectionChange, data]
+  );
+  const wrappedSetSorting = React.useCallback(
+    (updater) => {
+      const newSorting = typeof updater === "function" ? updater(sorting) : updater;
+      setSorting(newSorting);
+      if (onSortingChange) {
+        onSortingChange(newSorting);
+      }
+    },
+    [sorting, setSorting, onSortingChange]
+  );
+  const wrappedSetPagination = React.useCallback(
+    (updater) => {
+      const newPagination = typeof updater === "function" ? updater(pagination) : updater;
+      setPagination(newPagination);
+      if (onPaginationChange) {
+        onPaginationChange(newPagination.pageIndex, newPagination.pageSize);
+      }
+    },
+    [pagination, setPagination, onPaginationChange]
+  );
+  const wrappedSetColumnVisibility = React.useCallback(
+    (updater) => {
+      const newVisibility = typeof updater === "function" ? updater(columnVisibility) : updater;
+      setColumnVisibility(newVisibility);
+      if (onColumnVisibilityChange) {
+        onColumnVisibilityChange(newVisibility);
+      }
+    },
+    [columnVisibility, setColumnVisibility, onColumnVisibilityChange]
+  );
+  const wrappedSetColumnOrder = React.useCallback(
+    (updater) => {
+      const newOrder = typeof updater === "function" ? updater(columnOrder) : updater;
+      setColumnOrder(newOrder);
+      if (onColumnOrderChange) {
+        onColumnOrderChange(newOrder);
+      }
+    },
+    [columnOrder, setColumnOrder, onColumnOrderChange]
+  );
   React.useEffect(() => {
     if (!storageKey) return;
     try {
@@ -29338,13 +29434,13 @@ function useTableController(options) {
     enableRowSelection: true,
     enableColumnResizing: true,
     enableColumnPinning: true,
-    onRowSelectionChange: setRowSelection,
-    onSortingChange: setSorting,
-    onColumnVisibilityChange: setColumnVisibility,
-    onColumnOrderChange: setColumnOrder,
+    onRowSelectionChange: wrappedSetRowSelection,
+    onSortingChange: wrappedSetSorting,
+    onColumnVisibilityChange: wrappedSetColumnVisibility,
+    onColumnOrderChange: wrappedSetColumnOrder,
     onGlobalFilterChange: setGlobalFilter,
     onColumnPinningChange: setColumnPinning,
-    onPaginationChange: setPagination,
+    onPaginationChange: wrappedSetPagination,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
@@ -29421,7 +29517,11 @@ function useTableController(options) {
     setGlobalFilter,
     pagination,
     setPagination,
-    handleResetColumns
+    handleResetColumns,
+    // Event callbacks for child components
+    onBatchAction,
+    onRowClick,
+    onExportComplete
   };
 }
 function exportTableToCSV(table, filename = "data.csv") {
@@ -29818,7 +29918,8 @@ function TableBody({
 }
 function BatchActionsToolbar({
   selectedCount,
-  onDeleteSelected
+  onDeleteSelected,
+  onBatchAction
 }) {
   if (selectedCount <= 0) return null;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 mb-2 px-1", children: [
@@ -29832,6 +29933,10 @@ function BatchActionsToolbar({
         variant: "destructive",
         size: "sm",
         onClick: () => {
+          if (onBatchAction) {
+            onBatchAction("delete", []);
+            return;
+          }
           if (onDeleteSelected) {
             onDeleteSelected(selectedCount);
             return;
@@ -29859,7 +29964,15 @@ function DataTable({
   tableId,
   toolbar,
   emptyState,
-  forceEmptyState
+  forceEmptyState,
+  onRowSelectionChange,
+  onSortingChange,
+  onPaginationChange,
+  onColumnVisibilityChange,
+  onColumnOrderChange,
+  onBatchAction,
+  onRowClick,
+  onExportComplete
 }) {
   const debug2 = (..._args) => {
     return;
@@ -29869,13 +29982,23 @@ function DataTable({
     resolvedColumns,
     globalFilter,
     setGlobalFilter,
-    handleResetColumns
+    handleResetColumns,
+    onBatchAction: controllerOnBatchAction,
+    onExportComplete: controllerOnExportComplete
   } = useTableController({
     columns,
     data,
     columnRegistry,
     initialState: initialState2,
-    tableId
+    tableId,
+    onRowSelectionChange,
+    onSortingChange,
+    onPaginationChange,
+    onColumnVisibilityChange,
+    onColumnOrderChange,
+    onBatchAction,
+    onRowClick,
+    onExportComplete
   });
   const [isDragging, setIsDragging] = React.useState(false);
   const [activeColumnId, setActiveColumnId] = React.useState(
@@ -29981,13 +30104,18 @@ function DataTable({
         onResetColumns: handleResetColumns,
         columnRegistry,
         onExport: () => exportTableToCSV(table),
+        onExportComplete: controllerOnExportComplete,
         options: toolbar
       }
     ),
     table.getFilteredSelectedRowModel().rows.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
       BatchActionsToolbar,
       {
-        selectedCount: table.getFilteredSelectedRowModel().rows.length
+        selectedCount: table.getFilteredSelectedRowModel().rows.length,
+        onBatchAction: controllerOnBatchAction ? (action) => {
+          const selectedRows = table.getFilteredSelectedRowModel().rows.map((row) => row.original);
+          controllerOnBatchAction(action, selectedRows);
+        } : void 0
       }
     ),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -30059,7 +30187,20 @@ function DataTable({
         )
       }
     ),
-    isForcedEmpty ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border-t border-border bg-[var(--tablehead-bg)]", children: /* @__PURE__ */ jsxRuntimeExports.jsx(DataTablePagination, { table }) })
+    isForcedEmpty ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border-t border-border bg-[var(--tablehead-bg)]", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      DataTablePagination,
+      {
+        table,
+        onPageChange: onPaginationChange ? (pageIndex) => onPaginationChange(
+          pageIndex,
+          table.getState().pagination?.pageSize ?? 25
+        ) : void 0,
+        onPageSizeChange: onPaginationChange ? (pageSize) => onPaginationChange(
+          table.getState().pagination?.pageIndex ?? 0,
+          pageSize
+        ) : void 0
+      }
+    ) })
   ] });
 }
 const ALIGNMENT_PRESETS = {
@@ -30591,7 +30732,8 @@ function getDisplayLabel(descriptor) {
 function RowCard({
   row,
   columnRegistry,
-  className
+  className,
+  onRowClick
 }) {
   const visibleCells = row.getVisibleCells();
   const cellMap = new Map(visibleCells.map((cell) => [cell.column.id, cell]));
@@ -30661,14 +30803,18 @@ function RowCard({
   const hasActions = actionItems.length > 0;
   const [showActions, setShowActions] = React.useState(false);
   function handleCardClick(event) {
-    if (!hasActions) return;
     const target = event.target;
     if (!target) return;
     const interactive = target.closest(
       'a,button,input,select,textarea,label,[role=checkbox],[data-slot="table-action-trigger"]'
     );
     if (interactive) return;
-    setShowActions((prev) => !prev);
+    if (onRowClick) {
+      onRowClick(row.original, row.index);
+    }
+    if (hasActions) {
+      setShowActions((prev) => !prev);
+    }
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
@@ -30693,12 +30839,14 @@ function RowCard({
         return parts.join(" — ") || "Row";
       })(),
       "data-slot": "row-card",
-      tabIndex: hasActions ? 0 : void 0,
-      onClick: hasActions ? handleCardClick : void 0,
-      onKeyDown: hasActions ? (e) => {
+      tabIndex: hasActions || onRowClick ? 0 : void 0,
+      onClick: hasActions || onRowClick ? handleCardClick : void 0,
+      onKeyDown: hasActions || onRowClick ? (e) => {
         if (e.key === "Enter" || e.key === " ") {
           e.preventDefault();
-          setShowActions((prev) => !prev);
+          handleCardClick(
+            e
+          );
         }
       } : void 0,
       "aria-expanded": hasActions ? showActions : void 0,
@@ -31710,7 +31858,15 @@ function ResponsiveTable({
   tableId,
   toolbarOptions,
   emptyState,
-  forceEmptyState
+  forceEmptyState,
+  onRowSelectionChange,
+  onSortingChange,
+  onPaginationChange,
+  onColumnVisibilityChange,
+  onColumnOrderChange,
+  onBatchAction,
+  onRowClick,
+  onExportComplete
 }) {
   const isMobile = useBreakpoint(breakpoint);
   if (!isMobile) {
@@ -31725,7 +31881,15 @@ function ResponsiveTable({
         tableId,
         toolbar: toolbarOptions,
         emptyState,
-        forceEmptyState
+        forceEmptyState,
+        onRowSelectionChange,
+        onSortingChange,
+        onPaginationChange,
+        onColumnVisibilityChange,
+        onColumnOrderChange,
+        onBatchAction,
+        onRowClick,
+        onExportComplete
       }
     ) });
   }
@@ -31743,7 +31907,15 @@ function ResponsiveTable({
       overscan,
       toolbarOptions,
       emptyState,
-      forceEmptyState
+      forceEmptyState,
+      onRowSelectionChange,
+      onSortingChange,
+      onPaginationChange,
+      onColumnVisibilityChange,
+      onColumnOrderChange,
+      onBatchAction,
+      onRowClick,
+      onExportComplete
     }
   ) });
 }
@@ -31759,14 +31931,30 @@ function MobileTableInternal({
   overscan = 8,
   toolbarOptions,
   emptyState,
-  forceEmptyState
+  forceEmptyState,
+  onRowSelectionChange,
+  onSortingChange,
+  onPaginationChange,
+  onColumnVisibilityChange,
+  onColumnOrderChange,
+  onBatchAction,
+  onRowClick,
+  onExportComplete
 }) {
   const { table, globalFilter, setGlobalFilter, handleResetColumns } = useTableController({
     columns,
     data,
     columnRegistry,
     initialState: initialState2,
-    tableId
+    tableId,
+    onRowSelectionChange,
+    onSortingChange,
+    onPaginationChange,
+    onColumnVisibilityChange,
+    onColumnOrderChange,
+    onBatchAction,
+    onRowClick,
+    onExportComplete
   });
   const parentRef = React.useRef(null);
   const rows = table.getRowModel().rows;
@@ -31823,7 +32011,8 @@ function MobileTableInternal({
         {
           row,
           columnRegistry,
-          className: "mmc-row-card--item w-full"
+          className: "mmc-row-card--item w-full",
+          onRowClick
         },
         row.id
       ));
@@ -31846,7 +32035,8 @@ function MobileTableInternal({
             {
               row,
               columnRegistry,
-              className: "mmc-row-card--item w-full"
+              className: "mmc-row-card--item w-full",
+              onRowClick
             }
           )
         },