@mui/x-data-grid-generator 7.7.1 → 7.8.0

package/CHANGELOG.md

@@ -3,6 +3,105 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.8.0
+
+_Jun 28, 2024_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🛰 Introduce server-side data source for improved server integration in the Data Grid.
+
+  Supports server-side pagination, sorting and filtering on plain and tree data, and automatic caching.
+
+  To enable, provide a `getRows` function to the `unstable_dataSource` prop on the Data Grid component.
+
+  ```tsx
+  const dataSource = {
+    getRows: async (params: GridServerGetRowsParams) => {
+      const data = await fetch(
+        `https://api.example.com/data?${new URLSearchParams({
+          page: params.page,
+          pageSize: params.pageSize,
+          sortModel: JSON.stringify(params.sortModel),
+          filterModel: JSON.stringify(params.filterModel),
+        }).toString()}`,
+      );
+      return {
+        rows: data.rows,
+        totalRows: data.totalRows,
+      };
+    },
+  }
+  <DataGridPro
+    unstable_dataSource={dataSource}
+    {...otherProps}
+  />
+  ```
+
+  See [server-side data documentation](https://mui.com/x/react-data-grid/server-side-data/) for more details.
+
+- 📈 Support Date data on the BarChart component
+- ↕️ Support custom column sort icons on the Data Grid
+- 🖱️ Support modifying the expansion trigger on the Tree View components
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.8.0`
+
+- [DataGrid] Add `columnHeaderSortIcon` slot (#13563) @arminmeh
+- [DataGrid] Fix dimensions lag issue after autosize (#13587) @MBilalShafi
+- [DataGrid] Fix print export failure when `hideFooter` option is set (#13034) @tarunrajput
+
+#### `@mui/x-data-grid-pro@7.8.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.8.0`, plus:
+
+- [DataGridPro] Fix multi-sorting indicator being cut off (#13625) @KenanYusuf
+- [DataGridPro] Server-side tree data support (#12317) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@7.8.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.8.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.8.0`
+
+- [fields] Fix section clearing behavior on Android (#13652) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.8.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.8.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.8.0`
+
+- [charts] Fix line chart props not passing correct event handlers (#13609) @JCQuintas
+- [charts] Support BarChart with `Date` data (#13471) @alexfauquette
+- [charts] Support RTL for y-axis (#13614) @alexfauquette
+- [charts] Use default values instead of non-null assertion to prevent error being thrown (#13637) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@7.8.0`
+
+- [TreeView] Add `expansionTrigger` prop (#13533) @noraleonte
+- [TreeView] Support experimental features from plugin's dependencies (#13632) @flaviendelangle
+
+### Docs
+
+- [docs] Add callout for `Luxon` `throwOnInvalid` support (#13621) @LukasTy
+- [docs] Add "Overlays" section to the Data Grid documentation (#13624) @KenanYusuf
+
+### Core
+
+- [core] Add eslint rule to restrict import from `../internals` root (#13633) @JCQuintas
+- [docs-infra] Sync `\_app` folder with monorepo (#13582) @Janpot
+- [license] Allow usage of charts and tree view pro package for old premium licenses (#13619) @flaviendelangle
+
 ## 7.7.1
 
 _Jun 21, 2024_
@@ -44,7 +143,7 @@ Same changes as in `@mui/x-data-grid-pro@7.7.1`.
 - [pickers] Always use the same timezone in the field, the view and the layout components (#13481) @flaviendelangle
 - [pickers] Fix `AdapterDateFnsV3` generated method types (#13464) @alexey-kozlenkov
 - [pickers] Fix controlled `view` behavior (#13552) @LukasTy
-- [TimePicker] Improves RTL verification for the time pickers default views  (#13447) @arthurbalduini
+- [TimePicker] Improves RTL verification for the time pickers default views (#13447) @arthurbalduini
 
 #### `@mui/x-date-pickers-pro@7.7.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
 

package/hooks/index.d.ts

@@ -2,3 +2,6 @@ export * from './useDemoData';
 export * from './useBasicDemoData';
 export * from './useMovieData';
 export * from './useQuery';
+export * from './useMockServer';
+export { loadServerRows } from './serverUtils';
+export type { QueryOptions } from './serverUtils';

package/hooks/index.js

@@ -1,4 +1,6 @@
 export * from './useDemoData';
 export * from './useBasicDemoData';
 export * from './useMovieData';
-export * from './useQuery';
+export * from './useQuery';
+export * from './useMockServer';
+export { loadServerRows } from './serverUtils';

package/hooks/serverUtils.d.ts

@@ -0,0 +1,54 @@
+import { GridRowModel, GridFilterModel, GridSortModel, GridColDef, GridRowId, GridPaginationModel } from '@mui/x-data-grid-pro';
+import { UseDemoDataOptions } from './useDemoData';
+export interface FakeServerResponse {
+    returnedRows: GridRowModel[];
+    nextCursor?: string;
+    hasNextPage?: boolean;
+    totalRowCount: number;
+}
+export interface PageInfo {
+    totalRowCount?: number;
+    nextCursor?: string;
+    hasNextPage?: boolean;
+    pageSize?: number;
+}
+export interface DefaultServerOptions {
+    minDelay: number;
+    maxDelay: number;
+    useCursorPagination?: boolean;
+}
+export type ServerOptions = Partial<DefaultServerOptions>;
+export interface QueryOptions {
+    cursor?: GridRowId;
+    page?: number;
+    pageSize?: number;
+    filterModel?: GridFilterModel;
+    sortModel?: GridSortModel;
+    firstRowToRender?: number;
+    lastRowToRender?: number;
+}
+export interface ServerSideQueryOptions {
+    cursor?: GridRowId;
+    paginationModel?: GridPaginationModel;
+    groupKeys?: string[];
+    filterModel?: GridFilterModel;
+    sortModel?: GridSortModel;
+    firstRowToRender?: number;
+    lastRowToRender?: number;
+}
+export declare const DEFAULT_DATASET_OPTIONS: UseDemoDataOptions;
+export declare const disableDelay: any;
+export declare const DEFAULT_SERVER_OPTIONS: DefaultServerOptions;
+/**
+ * Simulates server data loading
+ */
+export declare const loadServerRows: (rows: GridRowModel[], queryOptions: QueryOptions, serverOptions: ServerOptions, columnsWithDefaultColDef: GridColDef[]) => Promise<FakeServerResponse>;
+interface ProcessTreeDataRowsResponse {
+    rows: GridRowModel[];
+    rootRowCount: number;
+}
+/**
+ * Simulates server data loading
+ */
+export declare const processTreeDataRows: (rows: GridRowModel[], queryOptions: ServerSideQueryOptions, serverOptions: ServerOptions, columnsWithDefaultColDef: GridColDef[]) => Promise<ProcessTreeDataRowsResponse>;
+export {};

package/hooks/serverUtils.js

@@ -0,0 +1,345 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { GridLogicOperator } from '@mui/x-data-grid-pro';
+import { randomInt } from '../services/random-generator';
+export const DEFAULT_DATASET_OPTIONS = {
+  dataSet: 'Commodity',
+  rowLength: 100,
+  maxColumns: 6
+};
+export const disableDelay = typeof DISABLE_CHANCE_RANDOM !== 'undefined' && DISABLE_CHANCE_RANDOM;
+export const DEFAULT_SERVER_OPTIONS = {
+  minDelay: disableDelay ? 0 : 100,
+  maxDelay: disableDelay ? 0 : 300,
+  useCursorPagination: true
+};
+const apiRef = {};
+const simplifiedValueGetter = (field, colDef) => row => {
+  return colDef.valueGetter?.(row[row.id], row, colDef, apiRef) || row[field];
+};
+const getRowComparator = (sortModel, columnsWithDefaultColDef) => {
+  if (!sortModel) {
+    const comparator = () => 0;
+    return comparator;
+  }
+  const sortOperators = sortModel.map(sortItem => {
+    const columnField = sortItem.field;
+    const colDef = columnsWithDefaultColDef.find(({
+      field
+    }) => field === columnField);
+    return _extends({}, sortItem, {
+      valueGetter: simplifiedValueGetter(columnField, colDef),
+      sortComparator: colDef.sortComparator
+    });
+  });
+  const comparator = (row1, row2) => sortOperators.reduce((acc, {
+    valueGetter,
+    sort,
+    sortComparator
+  }) => {
+    if (acc !== 0) {
+      return acc;
+    }
+    const v1 = valueGetter(row1);
+    const v2 = valueGetter(row2);
+    return sort === 'desc' ? -1 * sortComparator(v1, v2) : sortComparator(v1, v2);
+  }, 0);
+  return comparator;
+};
+const buildQuickFilterApplier = (filterModel, columns) => {
+  const quickFilterValues = filterModel.quickFilterValues?.filter(Boolean) ?? [];
+  if (quickFilterValues.length === 0) {
+    return null;
+  }
+  const appliersPerField = [];
+  const stubApiRef = {
+    current: {
+      getRowFormattedValue: (row, c) => {
+        const field = c.field;
+        return row[field];
+      }
+    }
+  };
+  columns.forEach(column => {
+    const getApplyQuickFilterFn = column?.getApplyQuickFilterFn;
+    if (getApplyQuickFilterFn) {
+      appliersPerField.push({
+        column,
+        appliers: quickFilterValues.map(quickFilterValue => {
+          return {
+            fn: getApplyQuickFilterFn(quickFilterValue, column, stubApiRef)
+          };
+        })
+      });
+    }
+  });
+  return function isRowMatchingQuickFilter(row, shouldApplyFilter) {
+    const result = {};
+
+    /* eslint-disable no-labels */
+    outer: for (let v = 0; v < quickFilterValues.length; v += 1) {
+      const filterValue = quickFilterValues[v];
+      for (let i = 0; i < appliersPerField.length; i += 1) {
+        const {
+          column,
+          appliers
+        } = appliersPerField[i];
+        const {
+          field
+        } = column;
+        if (shouldApplyFilter && !shouldApplyFilter(field)) {
+          continue;
+        }
+        const applier = appliers[v];
+        const value = row[field];
+        if (applier.fn === null) {
+          continue;
+        }
+        const isMatching = applier.fn(value, row, column, stubApiRef);
+        if (isMatching) {
+          result[filterValue] = true;
+          continue outer;
+        }
+      }
+      result[filterValue] = false;
+    }
+    /* eslint-enable no-labels */
+
+    return result;
+  };
+};
+const getQuicklyFilteredRows = (rows, filterModel, columnsWithDefaultColDef) => {
+  if (filterModel === undefined || filterModel.quickFilterValues?.length === 0) {
+    return rows;
+  }
+  const isRowMatchingQuickFilter = buildQuickFilterApplier(filterModel, columnsWithDefaultColDef);
+  if (isRowMatchingQuickFilter) {
+    return rows.filter(row => {
+      const result = isRowMatchingQuickFilter(row);
+      return filterModel.quickFilterLogicOperator === GridLogicOperator.And ? Object.values(result).every(Boolean) : Object.values(result).some(Boolean);
+    });
+  }
+  return rows;
+};
+const getFilteredRows = (rows, filterModel, columnsWithDefaultColDef) => {
+  if (filterModel === undefined || filterModel.items.length === 0) {
+    return rows;
+  }
+  const valueGetters = filterModel.items.map(({
+    field
+  }) => simplifiedValueGetter(field, columnsWithDefaultColDef.find(column => column.field === field)));
+  const filterFunctions = filterModel.items.map(filterItem => {
+    const {
+      field,
+      operator
+    } = filterItem;
+    const colDef = columnsWithDefaultColDef.find(column => column.field === field);
+    if (!colDef.filterOperators) {
+      throw new Error(`MUI: No filter operator found for column '${field}'.`);
+    }
+    const filterOperator = colDef.filterOperators.find(({
+      value
+    }) => operator === value);
+    let parsedValue = filterItem.value;
+    if (colDef.valueParser) {
+      const parser = colDef.valueParser;
+      parsedValue = Array.isArray(filterItem.value) ? filterItem.value?.map(x => parser(x, {}, colDef, apiRef)) : parser(filterItem.value, {}, colDef, apiRef);
+    }
+    return filterOperator.getApplyFilterFn({
+      filterItem,
+      value: parsedValue
+    }, colDef);
+  });
+  if (filterModel.logicOperator === GridLogicOperator.Or) {
+    return rows.filter(row => filterModel.items.some((_, index) => {
+      const value = valueGetters[index](row);
+      return filterFunctions[index] === null ? true : filterFunctions[index](value);
+    }));
+  }
+  return rows.filter(row => filterModel.items.every((_, index) => {
+    const value = valueGetters[index](row);
+    return filterFunctions[index] === null ? true : filterFunctions[index](value);
+  }));
+};
+
+/**
+ * Simulates server data loading
+ */
+export const loadServerRows = (rows, queryOptions, serverOptions, columnsWithDefaultColDef) => {
+  const {
+    minDelay = 100,
+    maxDelay = 300,
+    useCursorPagination
+  } = serverOptions;
+  if (maxDelay < minDelay) {
+    throw new Error('serverOptions.minDelay is larger than serverOptions.maxDelay ');
+  }
+  const delay = randomInt(minDelay, maxDelay);
+  const {
+    cursor,
+    page = 0,
+    pageSize
+  } = queryOptions;
+  let nextCursor;
+  let firstRowIndex;
+  let lastRowIndex;
+  let filteredRows = getFilteredRows(rows, queryOptions.filterModel, columnsWithDefaultColDef);
+  const rowComparator = getRowComparator(queryOptions.sortModel, columnsWithDefaultColDef);
+  filteredRows = [...filteredRows].sort(rowComparator);
+  const totalRowCount = filteredRows.length;
+  if (!pageSize) {
+    firstRowIndex = 0;
+    lastRowIndex = filteredRows.length;
+  } else if (useCursorPagination) {
+    firstRowIndex = cursor ? filteredRows.findIndex(({
+      id
+    }) => id === cursor) : 0;
+    firstRowIndex = Math.max(firstRowIndex, 0); // if cursor not found return 0
+    lastRowIndex = firstRowIndex + pageSize;
+    nextCursor = lastRowIndex >= filteredRows.length ? undefined : filteredRows[lastRowIndex].id;
+  } else {
+    firstRowIndex = page * pageSize;
+    lastRowIndex = (page + 1) * pageSize;
+  }
+  const hasNextPage = lastRowIndex < filteredRows.length - 1;
+  const response = {
+    returnedRows: filteredRows.slice(firstRowIndex, lastRowIndex),
+    hasNextPage,
+    nextCursor,
+    totalRowCount
+  };
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve(response);
+    }, delay); // simulate network latency
+  });
+};
+const findTreeDataRowChildren = (allRows, parentPath, pathKey = 'path', depth = 1 // the depth of the children to find relative to parentDepth, `-1` to find all
+) => {
+  const parentDepth = parentPath.length;
+  const children = [];
+  for (let i = 0; i < allRows.length; i += 1) {
+    const row = allRows[i];
+    const rowPath = row[pathKey];
+    if (!rowPath) {
+      continue;
+    }
+    if ((depth < 0 && rowPath.length > parentDepth || rowPath.length === parentDepth + depth) && parentPath.every((value, index) => value === rowPath[index])) {
+      children.push(row);
+    }
+  }
+  return children;
+};
+const getTreeDataFilteredRows = (rows, filterModel, columnsWithDefaultColDef) => {
+  let filteredRows = [...rows];
+  if (filterModel && filterModel.quickFilterValues?.length > 0) {
+    filteredRows = getQuicklyFilteredRows(rows, filterModel, columnsWithDefaultColDef);
+  }
+  if ((filterModel?.items.length ?? 0) > 0) {
+    filteredRows = getFilteredRows(filteredRows, filterModel, columnsWithDefaultColDef);
+  }
+  if (filteredRows.length === rows.length || filteredRows.length === 0) {
+    return filteredRows;
+  }
+  const pathsToIndexesMap = new Map();
+  rows.forEach((row, index) => {
+    pathsToIndexesMap.set(row.path.join(','), index);
+  });
+  const includedPaths = new Set();
+  filteredRows.forEach(row => {
+    includedPaths.add(row.path.join(','));
+  });
+  const missingChildren = [];
+
+  // include missing children of filtered rows
+  filteredRows.forEach(row => {
+    const path = row.path;
+    if (path) {
+      const children = findTreeDataRowChildren(rows, path, 'path', -1);
+      children.forEach(child => {
+        const subPath = child.path.join(',');
+        if (!includedPaths.has(subPath)) {
+          missingChildren.push(child);
+        }
+      });
+    }
+  });
+  filteredRows = missingChildren.concat(filteredRows);
+  const missingParents = [];
+
+  // include missing parents of filtered rows
+  filteredRows.forEach(row => {
+    const path = row.path;
+    if (path) {
+      includedPaths.add(path.join(','));
+      for (let i = 0; i < path.length - 1; i += 1) {
+        const subPath = path.slice(0, i + 1).join(',');
+        if (!includedPaths.has(subPath)) {
+          const index = pathsToIndexesMap.get(subPath);
+          if (index !== undefined) {
+            missingParents.push(rows[index]);
+            includedPaths.add(subPath);
+          }
+        }
+      }
+    }
+  });
+  return missingParents.concat(filteredRows);
+};
+
+/**
+ * Simulates server data loading
+ */
+export const processTreeDataRows = (rows, queryOptions, serverOptions, columnsWithDefaultColDef) => {
+  const {
+    minDelay = 100,
+    maxDelay = 300
+  } = serverOptions;
+  const pathKey = 'path';
+  // TODO: Support filtering and cursor based pagination
+  if (maxDelay < minDelay) {
+    throw new Error('serverOptions.minDelay is larger than serverOptions.maxDelay ');
+  }
+  if (queryOptions.groupKeys == null) {
+    throw new Error('serverOptions.groupKeys must be defined to compute tree data ');
+  }
+  const delay = randomInt(minDelay, maxDelay);
+
+  // apply plain filtering
+  const filteredRows = getTreeDataFilteredRows(rows, queryOptions.filterModel, columnsWithDefaultColDef);
+
+  // get root row count
+  const rootRowCount = findTreeDataRowChildren(filteredRows, []).length;
+
+  // find direct children referring to the `parentPath`
+  const childRows = findTreeDataRowChildren(filteredRows, queryOptions.groupKeys);
+  let childRowsWithDescendantCounts = childRows.map(row => {
+    const descendants = findTreeDataRowChildren(filteredRows, row[pathKey], pathKey, -1);
+    const descendantCount = descendants.length;
+    return _extends({}, row, {
+      descendantCount
+    });
+  });
+  if (queryOptions.sortModel) {
+    // apply sorting
+    const rowComparator = getRowComparator(queryOptions.sortModel, columnsWithDefaultColDef);
+    childRowsWithDescendantCounts = [...childRowsWithDescendantCounts].sort(rowComparator);
+  }
+  if (queryOptions.paginationModel && queryOptions.groupKeys.length === 0) {
+    // Only paginate root rows, grid should refetch root rows when `paginationModel` updates
+    const {
+      pageSize,
+      page
+    } = queryOptions.paginationModel;
+    if (pageSize < childRowsWithDescendantCounts.length) {
+      childRowsWithDescendantCounts = childRowsWithDescendantCounts.slice(page * pageSize, (page + 1) * pageSize);
+    }
+  }
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve({
+        rows: childRowsWithDescendantCounts,
+        rootRowCount
+      });
+    }, delay); // simulate network latency
+  });
+};

package/hooks/useDemoData.d.ts

@@ -1,4 +1,5 @@
 import { GridColumnVisibilityModel } from '@mui/x-data-grid-premium';
+import { GridDemoData } from '../services/real-data-service';
 import { GridColDefGenerator } from '../services/gridColDefGenerator';
 import { AddPathToDemoDataOptions, DemoTreeDataValue } from '../services/tree-data-generator';
 export type DemoDataReturnType = {
@@ -16,6 +17,8 @@ export interface UseDemoDataOptions {
     editable?: boolean;
     treeData?: AddPathToDemoDataOptions;
 }
+export declare function extrapolateSeed(rowLength: number, data: GridDemoData): Promise<GridDemoData>;
+export declare const deepFreeze: <T>(object: T) => T;
 export interface ColumnsOptions extends Pick<UseDemoDataOptions, 'dataSet' | 'editable' | 'maxColumns' | 'visibleFields'> {
 }
 export declare const getColumnsFromOptions: (options: ColumnsOptions) => GridColDefGenerator[];

package/hooks/useDemoData.js

@@ -12,7 +12,7 @@ const dataCache = new LRUCache({
 });
 // Generate fake data from a seed.
 // It's about x20 faster than getRealData.
-async function extrapolateSeed(rowLength, data) {
+export async function extrapolateSeed(rowLength, data) {
   return new Promise(resolve => {
     const seed = data.rows;
     const rows = data.rows.slice();
@@ -42,7 +42,7 @@ async function extrapolateSeed(rowLength, data) {
     });
   });
 }
-const deepFreeze = object => {
+export const deepFreeze = object => {
   // Retrieve the property names defined on object
   const propNames = Object.getOwnPropertyNames(object);
 

package/hooks/useMockServer.d.ts

@@ -0,0 +1,16 @@
+import { GridRowModel, GridGetRowsResponse, GridColDef, GridInitialState } from '@mui/x-data-grid-pro';
+import { UseDemoDataOptions } from './useDemoData';
+import type { ServerOptions } from './serverUtils';
+export declare const BASE_URL = "https://mui.com/x/api/data-grid";
+type UseMockServerResponse = {
+    columns: GridColDef[];
+    initialState: GridInitialState;
+    getGroupKey?: (row: GridRowModel) => string;
+    getChildrenCount?: (row: GridRowModel) => number;
+    fetchRows: (url: string) => Promise<GridGetRowsResponse>;
+    loadNewData: () => void;
+};
+export declare const useMockServer: (dataSetOptions?: Partial<UseDemoDataOptions>, serverOptions?: ServerOptions & {
+    verbose?: boolean;
+}, shouldRequestsFail?: boolean) => UseMockServerResponse;
+export {};