@redsift/table 12.5.1 → 12.5.2-alpha.0

package/_internal/StatefulDataGrid2.js

@@ -2949,7 +2949,7 @@ const useStatefulTable = props => {
   };
 };
 
-const _excluded = ["apiRef", "autoHeight", "className", "columns", "slots", "slotProps", "filterModel", "columnVisibilityModel", "pinnedColumns", "sortModel", "paginationModel", "height", "hideToolbar", "initialState", "isRowSelectable", "license", "localStorageVersion", "previousLocalStorageVersions", "onFilterModelChange", "rowSelectionModel", "onColumnWidthChange", "onPaginationModelChange", "onRowSelectionModelChange", "onColumnVisibilityModelChange", "onPinnedColumnsChange", "onSortModelChange", "onRowGroupingModelChange", "onAggregationModelChange", "onPivotModelChange", "pagination", "paginationPlacement", "paginationProps", "rows", "pageSizeOptions", "sx", "theme", "useRouter", "paginationMode", "rowCount", "density"];
+const _excluded = ["apiRef", "autoHeight", "className", "columns", "slots", "slotProps", "filterModel", "columnVisibilityModel", "pinnedColumns", "sortModel", "paginationModel", "height", "hideToolbar", "initialState", "isRowSelectable", "license", "localStorageVersion", "previousLocalStorageVersions", "onFilterModelChange", "rowSelectionModel", "onColumnWidthChange", "onPaginationModelChange", "onRowSelectionModelChange", "onColumnVisibilityModelChange", "onPinnedColumnsChange", "onSortModelChange", "onRowGroupingModelChange", "onAggregationModelChange", "onPivotModelChange", "pagination", "paginationPlacement", "paginationProps", "rows", "pageSizeOptions", "sx", "theme", "useRouter", "paginationMode", "rowCount", "density", "dataSource", "filterMode", "sortingMode"];
 const COMPONENT_NAME = 'DataGrid';
 const CLASSNAME = 'redsift-datagrid';
 
@@ -3046,7 +3046,10 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       useRouter,
       paginationMode = 'client',
       rowCount,
-      density: _density
+      density: _density,
+      dataSource,
+      filterMode: propsFilterMode,
+      sortingMode: propsSortingMode
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded);
   const theme = useTheme(propsTheme);
@@ -3054,6 +3057,14 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
   const apiRef = propsApiRef !== null && propsApiRef !== void 0 ? propsApiRef : _apiRef;
   LicenseInfo.setLicenseKey(license);
   const height = propsHeight !== null && propsHeight !== void 0 ? propsHeight : autoHeight ? undefined : '500px';
+
+  // When dataSource is present, MUI manages filter/sort/pagination internally.
+  // We must not pass controlled models — only initialState (one-time) and
+  // write-only onChange handlers for URL/localStorage persistence.
+  const isDataSourceMode = Boolean(dataSource);
+  const effectivePaginationMode = isDataSourceMode ? 'server' : paginationMode;
+  const effectiveFilterMode = isDataSourceMode ? 'server' : propsFilterMode;
+  const effectiveSortingMode = isDataSourceMode ? 'server' : propsSortingMode;
   const {
     onColumnVisibilityModelChange: controlledOnColumnVisibilityModelChange,
     onFilterModelChange: controlledOnFilterModelChange,
@@ -3111,6 +3122,29 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     localStorageVersion,
     previousLocalStorageVersions
   });
+
+  // In dataSource mode, track pagination locally for the custom pagination slots
+  // (rendered outside DataGridPremium). MUI owns the actual pagination state internally.
+  const [dataSourcePaginationModel, setDataSourcePaginationModel] = useState(paginationModel);
+
+  // The pagination model to use for display in pagination slots
+  const activePaginationModel = isDataSourceMode ? dataSourcePaginationModel : paginationModel;
+
+  // In dataSource mode, the top pagination (outside DataGridPremium) must go through
+  // apiRef to change MUI's internal page. MUI then fires onPaginationModelChange
+  // which updates URL and local state.
+  const dataSourceTopPaginationChange = useCallback(model => {
+    var _apiRef$current;
+    (_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 ? void 0 : _apiRef$current.setPaginationModel(model);
+  }, [apiRef]);
+
+  // Wrap onPaginationModelChange to also track state locally in dataSource mode
+  const wrappedOnPaginationModelChange = useCallback((model, details) => {
+    if (isDataSourceMode) {
+      setDataSourcePaginationModel(model);
+    }
+    onPaginationModelChange(model, details);
+  }, [isDataSourceMode, onPaginationModelChange]);
   const [rowSelectionModel, setRowSelectionModel] = useState(() => normalizeRowSelectionModel(propsRowSelectionModel));
   useEffect(() => {
     setRowSelectionModel(normalizeRowSelectionModel(propsRowSelectionModel));
@@ -3132,7 +3166,7 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
 
   // The checkboxSelectionVisibleOnly should only be applied to client-side pagination,
   // for server-side pagination it produces inconsistent behavior when selecting all rows in pages 2 and beyond
-  const checkboxSelectionVisibleOnly = Boolean(pagination) && Boolean(paginationMode != 'server');
+  const checkboxSelectionVisibleOnly = Boolean(pagination) && Boolean(effectivePaginationMode != 'server');
 
   // Track when the grid API is ready to ensure top pagination renders correctly
   const [gridReady, setGridReady] = useState(false);
@@ -3155,11 +3189,13 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
   // in server-side pagination we want to update the selection status
   // every time we navigate between pages, resize our page or select something
   useEffect(() => {
-    if (paginationMode == 'server') {
-      onServerSideSelectionStatusChange(rowSelectionModel, apiRef, selectionStatusRef, forceSelectionUpdate, isRowSelectable, paginationModel.page, paginationModel.pageSize);
+    if (effectivePaginationMode == 'server') {
+      onServerSideSelectionStatusChange(rowSelectionModel, apiRef, selectionStatusRef, forceSelectionUpdate, isRowSelectable, activePaginationModel.page, activePaginationModel.pageSize);
     }
-  }, [rowSelectionModel, paginationModel.page, paginationModel.pageSize, rows]);
-  if (!Array.isArray(rows)) {
+  }, [rowSelectionModel, activePaginationModel.page, activePaginationModel.pageSize, rows]);
+
+  // In dataSource mode MUI provides rows internally; skip the guard.
+  if (!isDataSourceMode && !Array.isArray(rows)) {
     return null;
   }
 
@@ -3168,14 +3204,14 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
   // receive the fresh value in the same render cycle — no extra re-render needed.
   // The ref is kept in sync for the onRowSelectionModelChange callback's deselect logic.
   let selectionStatus = selectionStatusRef.current;
-  if (pagination && paginationMode !== 'server' && getSelectionCount(rowSelectionModel) > 0) {
+  if (pagination && effectivePaginationMode !== 'server' && getSelectionCount(rowSelectionModel) > 0) {
     try {
       // Use manual page slicing instead of gridPaginatedVisibleSorted* selectors.
       // MUI's paginated selectors use apiRef internal state which may be stale when
       // paginationModel prop changes — our React state is always up to date.
       const allFilteredEntries = gridFilteredSortedRowEntriesSelector(apiRef);
-      const pageStart = paginationModel.page * paginationModel.pageSize;
-      const pageEntries = allFilteredEntries.slice(pageStart, pageStart + paginationModel.pageSize);
+      const pageStart = activePaginationModel.page * activePaginationModel.pageSize;
+      const pageEntries = allFilteredEntries.slice(pageStart, pageStart + activePaginationModel.pageSize);
       const selectableRowsInPage = isRowSelectable ? pageEntries.filter(_ref => {
         let {
           model
@@ -3235,7 +3271,7 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     } catch {
       // apiRef may not be initialized on first render
     }
-  } else if (pagination && paginationMode !== 'server') {
+  } else if (pagination && effectivePaginationMode !== 'server') {
     selectionStatus = {
       type: 'none',
       numberOfSelectedRows: 0
@@ -3264,13 +3300,13 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     ref: datagridRef,
     className: classNames(StatefulDataGrid.className, className),
     $height: height
-  }, pagination && ['top', 'both'].includes(paginationPlacement) && gridReady ? paginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, {
+  }, pagination && ['top', 'both'].includes(paginationPlacement) && gridReady ? effectivePaginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, {
     displaySelection: true,
     displayRowsPerPage: ['top', 'both'].includes(paginationPlacement),
     displayPagination: ['top', 'both'].includes(paginationPlacement),
     selectionStatus: selectionStatus,
-    paginationModel: paginationModel,
-    onPaginationModelChange: onPaginationModelChange,
+    paginationModel: activePaginationModel,
+    onPaginationModelChange: isDataSourceMode ? dataSourceTopPaginationChange : onPaginationModelChange,
     pageSizeOptions: pageSizeOptions,
     paginationProps: paginationProps,
     rowCount: rowCount
@@ -3281,23 +3317,18 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     selectionStatus: selectionStatus,
     apiRef: apiRef,
     isRowSelectable: isRowSelectable,
-    paginationModel: paginationModel,
+    paginationModel: activePaginationModel,
     onPaginationModelChange: onPaginationModelChange,
     pageSizeOptions: pageSizeOptions,
     paginationProps: paginationProps
   }) : null, /*#__PURE__*/React__default.createElement(DataGridPremium, _extends({}, forwardedProps, {
     apiRef: apiRef,
+    dataSource: dataSource,
     columns: columns,
     columnVisibilityModel: columnVisibilityModel,
-    filterModel: filterModel,
     onColumnVisibilityModelChange: onColumnVisibilityModelChange,
-    onFilterModelChange: onFilterModelChange,
-    onPaginationModelChange: onPaginationModelChange,
     onPinnedColumnsChange: onPinnedColumnsChange,
-    onSortModelChange: onSortModelChange,
-    paginationModel: paginationModel,
     pinnedColumns: pinnedColumns,
-    sortModel: sortModel,
     pageSizeOptions: pageSizeOptions,
     onColumnWidthChange: onColumnWidthChange,
     rowGroupingModel: rowGroupingModel,
@@ -3305,18 +3336,50 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     aggregationModel: aggregationModel,
     onAggregationModelChange: onAggregationModelChange,
     pivotModel: pivotModel,
-    onPivotModelChange: onPivotModelChange,
+    onPivotModelChange: onPivotModelChange
+    // In dataSource mode: models are uncontrolled (MUI owns them),
+    // onChange handlers are write-only for URL/localStorage persistence,
+    // and initialState seeds MUI on mount from the persisted URL state.
+  }, isDataSourceMode ? {
+    onFilterModelChange: onFilterModelChange,
+    onSortModelChange: onSortModelChange,
+    onPaginationModelChange: wrappedOnPaginationModelChange,
+    initialState: _objectSpread2(_objectSpread2({}, initialState), {}, {
+      density: controlledDensity,
+      columns: _objectSpread2(_objectSpread2({}, initialState === null || initialState === void 0 ? void 0 : initialState.columns), {}, {
+        orderedFields: columnOrderModel
+      }),
+      filter: {
+        filterModel
+      },
+      sorting: {
+        sortModel
+      },
+      pagination: {
+        paginationModel
+      }
+    })
+  } : {
+    filterModel,
+    sortModel,
+    paginationModel,
+    onFilterModelChange: onFilterModelChange,
+    onSortModelChange: onSortModelChange,
+    onPaginationModelChange: wrappedOnPaginationModelChange,
     initialState: _objectSpread2(_objectSpread2({}, initialState), {}, {
       density: controlledDensity,
       columns: _objectSpread2(_objectSpread2({}, initialState === null || initialState === void 0 ? void 0 : initialState.columns), {}, {
         orderedFields: columnOrderModel
       })
-    }),
+    })
+  }, {
     isRowSelectable: isRowSelectable,
     pagination: pagination,
-    paginationMode: paginationMode,
-    keepNonExistentRowsSelected: paginationMode == 'server',
-    rows: rows,
+    paginationMode: effectivePaginationMode,
+    filterMode: effectiveFilterMode,
+    sortingMode: effectiveSortingMode,
+    keepNonExistentRowsSelected: effectivePaginationMode == 'server',
+    rows: isDataSourceMode ? [] : rows,
     rowCount: rowCount,
     autoHeight: autoHeight,
     checkboxSelectionVisibleOnly: checkboxSelectionVisibleOnly,
@@ -3361,13 +3424,13 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       }))
     }, slots), {}, {
       pagination: props => {
-        return pagination ? paginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, _extends({}, props, {
+        return pagination ? effectivePaginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, _extends({}, props, {
           displaySelection: false,
           displayRowsPerPage: ['bottom', 'both'].includes(paginationPlacement),
           displayPagination: ['bottom', 'both'].includes(paginationPlacement),
           selectionStatus: selectionStatus,
-          paginationModel: paginationModel,
-          onPaginationModelChange: onPaginationModelChange,
+          paginationModel: activePaginationModel,
+          onPaginationModelChange: wrappedOnPaginationModelChange,
           pageSizeOptions: pageSizeOptions,
           paginationProps: paginationProps,
           rowCount: rowCount
@@ -3378,8 +3441,8 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
           selectionStatus: selectionStatus,
           apiRef: apiRef,
           isRowSelectable: isRowSelectable,
-          paginationModel: paginationModel,
-          onPaginationModelChange: onPaginationModelChange,
+          paginationModel: activePaginationModel,
+          onPaginationModelChange: wrappedOnPaginationModelChange,
           pageSizeOptions: pageSizeOptions,
           paginationProps: paginationProps
         })) : null;
@@ -3388,12 +3451,12 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     slotProps: _objectSpread2({}, slotProps),
     rowSelectionModel: rowSelectionModel,
     onRowSelectionModelChange: (newSelectionModel, details) => {
-      if (pagination && paginationMode != 'server') {
+      if (pagination && effectivePaginationMode != 'server') {
         // Use manual page slicing instead of gridPaginatedVisibleSorted* selectors
         // to avoid stale apiRef pagination state.
         const allFilteredEntries = gridFilteredSortedRowEntriesSelector(apiRef);
-        const pageStart = paginationModel.page * paginationModel.pageSize;
-        const pageEntries = allFilteredEntries.slice(pageStart, pageStart + paginationModel.pageSize);
+        const pageStart = activePaginationModel.page * activePaginationModel.pageSize;
+        const pageEntries = allFilteredEntries.slice(pageStart, pageStart + activePaginationModel.pageSize);
         const selectableRowsInPage = isRowSelectable ? pageEntries.filter(_ref6 => {
           let {
             model
@@ -3430,8 +3493,8 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
         const numberOfSelectedRows = getSelectionCount(newSelectionModel);
         if (selectionStatusRef.current.type === 'table' && numberOfSelectedRows === numberOfSelectableRowsInTable - numberOfSelectableRowsInPage || selectionStatusRef.current.type === 'table' && numberOfSelectedRows === numberOfSelectableRowsInTable || selectionStatusRef.current.type === 'page' && numberOfSelectedRows === numberOfSelectableRowsInPage) {
           setTimeout(() => {
-            var _apiRef$current;
-            (_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 ? void 0 : _apiRef$current.selectRows([], true, true);
+            var _apiRef$current2;
+            (_apiRef$current2 = apiRef.current) === null || _apiRef$current2 === void 0 ? void 0 : _apiRef$current2.selectRows([], true, true);
           }, 0);
         }
         if (numberOfSelectedRows === numberOfSelectableRowsInPage && numberOfSelectableRowsInPage < numberOfSelectableRowsInTable) {