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

package/hooks/useMockServer.js

@@ -0,0 +1,197 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import LRUCache from 'lru-cache';
+import { getGridDefaultColumnTypes } from '@mui/x-data-grid-pro';
+import { getColumnsFromOptions, extrapolateSeed, deepFreeze } from './useDemoData';
+import { getRealGridData } from '../services/real-data-service';
+import { addTreeDataOptionsToDemoData } from '../services/tree-data-generator';
+import { loadServerRows, processTreeDataRows, DEFAULT_DATASET_OPTIONS, DEFAULT_SERVER_OPTIONS } from './serverUtils';
+import { randomInt } from '../services';
+const dataCache = new LRUCache({
+  max: 10,
+  ttl: 60 * 5 * 1e3 // 5 minutes
+});
+export const BASE_URL = 'https://mui.com/x/api/data-grid';
+function decodeParams(url) {
+  const params = new URL(url).searchParams;
+  const decodedParams = {};
+  const array = Array.from(params.entries());
+  for (const [key, value] of array) {
+    try {
+      decodedParams[key] = JSON.parse(decodeURIComponent(value));
+    } catch (e) {
+      decodedParams[key] = value;
+    }
+  }
+  return decodedParams;
+}
+const getInitialState = (columns, groupingField) => {
+  const columnVisibilityModel = {};
+  columns.forEach(col => {
+    if (col.hide) {
+      columnVisibilityModel[col.field] = false;
+    }
+  });
+  if (groupingField) {
+    columnVisibilityModel[groupingField] = false;
+  }
+  return {
+    columns: {
+      columnVisibilityModel
+    }
+  };
+};
+const defaultColDef = getGridDefaultColumnTypes();
+export const useMockServer = (dataSetOptions, serverOptions, shouldRequestsFail) => {
+  const [data, setData] = React.useState();
+  const [index, setIndex] = React.useState(0);
+  const shouldRequestsFailRef = React.useRef(shouldRequestsFail ?? false);
+  React.useEffect(() => {
+    if (shouldRequestsFail !== undefined) {
+      shouldRequestsFailRef.current = shouldRequestsFail;
+    }
+  }, [shouldRequestsFail]);
+  const options = _extends({}, DEFAULT_DATASET_OPTIONS, dataSetOptions);
+  const columns = React.useMemo(() => {
+    return getColumnsFromOptions({
+      dataSet: options.dataSet,
+      editable: options.editable,
+      maxColumns: options.maxColumns,
+      visibleFields: options.visibleFields
+    });
+  }, [options.dataSet, options.editable, options.maxColumns, options.visibleFields]);
+  const initialState = React.useMemo(() => getInitialState(columns, options.treeData?.groupingField), [columns, options.treeData?.groupingField]);
+  const columnsWithDefaultColDef = React.useMemo(() => columns.map(column => _extends({}, defaultColDef[column.type || 'string'], column)), [columns]);
+  const isTreeData = options.treeData?.groupingField != null;
+  const getGroupKey = React.useMemo(() => {
+    if (isTreeData) {
+      return row => row[options.treeData.groupingField];
+    }
+    return undefined;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [options.treeData?.groupingField, isTreeData]);
+  const getChildrenCount = React.useMemo(() => {
+    if (isTreeData) {
+      return row => row.descendantCount;
+    }
+    return undefined;
+  }, [isTreeData]);
+  React.useEffect(() => {
+    const cacheKey = `${options.dataSet}-${options.rowLength}-${index}-${options.maxColumns}`;
+
+    // Cache to allow fast switch between the JavaScript and TypeScript version
+    // of the demos.
+    if (dataCache.has(cacheKey)) {
+      const newData = dataCache.get(cacheKey);
+      setData(newData);
+      return undefined;
+    }
+    let active = true;
+    (async () => {
+      let rowData;
+      const rowLength = options.rowLength;
+      if (rowLength > 1000) {
+        rowData = await getRealGridData(1000, columns);
+        rowData = await extrapolateSeed(rowLength, rowData);
+      } else {
+        rowData = await getRealGridData(rowLength, columns);
+      }
+      if (!active) {
+        return;
+      }
+      if (isTreeData) {
+        rowData = addTreeDataOptionsToDemoData(rowData, {
+          maxDepth: options.treeData?.maxDepth,
+          groupingField: options.treeData?.groupingField,
+          averageChildren: options.treeData?.averageChildren
+        });
+      }
+      if (process.env.NODE_ENV !== 'production') {
+        deepFreeze(rowData);
+      }
+      dataCache.set(cacheKey, rowData);
+      setData(rowData);
+    })();
+    return () => {
+      active = false;
+    };
+  }, [columns, isTreeData, options.rowLength, options.treeData?.maxDepth, options.treeData?.groupingField, options.treeData?.averageChildren, options.dataSet, options.maxColumns, index]);
+  const fetchRows = React.useCallback(async requestUrl => {
+    if (!data || !requestUrl) {
+      return new Promise(resolve => {
+        resolve({
+          rows: [],
+          rowCount: 0
+        });
+      });
+    }
+    const params = decodeParams(requestUrl);
+    const verbose = serverOptions?.verbose ?? true;
+    // eslint-disable-next-line no-console
+    const print = console.info;
+    if (verbose) {
+      print('MUI X: DATASOURCE REQUEST', params);
+    }
+    let getRowsResponse;
+    const serverOptionsWithDefault = {
+      minDelay: serverOptions?.minDelay ?? DEFAULT_SERVER_OPTIONS.minDelay,
+      maxDelay: serverOptions?.maxDelay ?? DEFAULT_SERVER_OPTIONS.maxDelay,
+      useCursorPagination: serverOptions?.useCursorPagination ?? DEFAULT_SERVER_OPTIONS.useCursorPagination
+    };
+    if (shouldRequestsFailRef.current) {
+      const {
+        minDelay,
+        maxDelay
+      } = serverOptionsWithDefault;
+      const delay = randomInt(minDelay, maxDelay);
+      return new Promise((_, reject) => {
+        if (verbose) {
+          print('MUI X: DATASOURCE REQUEST FAILURE', params);
+        }
+        setTimeout(() => reject(new Error('Could not fetch the data')), delay);
+      });
+    }
+    if (isTreeData /* || TODO: `isRowGrouping` */) {
+      const {
+        rows,
+        rootRowCount
+      } = await processTreeDataRows(data.rows, params, serverOptionsWithDefault, columnsWithDefaultColDef);
+      getRowsResponse = {
+        rows: rows.slice().map(row => _extends({}, row, {
+          path: undefined
+        })),
+        rowCount: rootRowCount
+      };
+    } else {
+      // plain data
+      const {
+        returnedRows,
+        nextCursor,
+        totalRowCount
+      } = await loadServerRows(data.rows, _extends({}, params, params.paginationModel), serverOptionsWithDefault, columnsWithDefaultColDef);
+      getRowsResponse = {
+        rows: returnedRows,
+        rowCount: totalRowCount,
+        pageInfo: {
+          nextCursor
+        }
+      };
+    }
+    return new Promise(resolve => {
+      if (verbose) {
+        print('MUI X: DATASOURCE RESPONSE', params, getRowsResponse);
+      }
+      resolve(getRowsResponse);
+    });
+  }, [data, serverOptions?.verbose, serverOptions?.minDelay, serverOptions?.maxDelay, serverOptions?.useCursorPagination, isTreeData, columnsWithDefaultColDef]);
+  return {
+    columns: columnsWithDefaultColDef,
+    initialState,
+    getGroupKey,
+    getChildrenCount,
+    fetchRows,
+    loadNewData: () => {
+      setIndex(oldIndex => oldIndex + 1);
+    }
+  };
+};

package/hooks/useQuery.d.ts

@@ -1,184 +1,154 @@
 import * as React from 'react';
-import { GridRowModel, GridFilterModel, GridSortModel, GridRowId, GridFilterOperator, GridColDef } from '@mui/x-data-grid-pro';
+import { GridRowModel } from '@mui/x-data-grid-pro';
 import { UseDemoDataOptions } from './useDemoData';
-/**
- * Simulates server data loading
- */
-export declare const loadServerRows: (rows: GridRowModel[], queryOptions: QueryOptions, serverOptions: ServerOptions, columnsWithDefaultColDef: GridColDef[]) => Promise<FakeServerResponse>;
-interface FakeServerResponse {
-    returnedRows: GridRowModel[];
-    nextCursor?: string;
-    hasNextPage: boolean;
-    totalRowCount: number;
-}
-interface PageInfo {
-    totalRowCount?: number;
-    nextCursor?: string;
-    hasNextPage?: boolean;
-    pageSize?: number;
-}
-interface DefaultServerOptions {
-    minDelay: number;
-    maxDelay: number;
-    useCursorPagination?: boolean;
-}
-type ServerOptions = Partial<DefaultServerOptions>;
-export interface QueryOptions {
-    cursor?: GridRowId;
-    page?: number;
-    pageSize?: number;
-    filterModel?: GridFilterModel;
-    sortModel?: GridSortModel;
-    firstRowToRender?: number;
-    lastRowToRender?: number;
-}
+import type { ServerOptions, QueryOptions, PageInfo } from './serverUtils';
 export declare const createFakeServer: (dataSetOptions?: Partial<UseDemoDataOptions>, serverOptions?: ServerOptions) => {
     columns: import("..").GridColDefGenerator[];
     columnsWithDefaultColDef: ({
         field: string;
-        headerName?: string | undefined;
-        description?: string | undefined;
-        width?: number | undefined;
-        flex?: number | undefined;
-        minWidth?: number | undefined;
-        maxWidth?: number | undefined;
-        hideable?: boolean | undefined;
-        sortable?: boolean | undefined;
-        sortingOrder?: import("@mui/x-data-grid-pro").GridSortDirection[] | undefined;
-        resizable?: boolean | undefined;
-        editable?: boolean | undefined;
-        groupable?: boolean | undefined;
-        pinnable?: boolean | undefined;
+        headerName?: string;
+        description?: string;
+        width?: number;
+        flex?: number;
+        minWidth?: number;
+        maxWidth?: number;
+        hideable?: boolean;
+        sortable?: boolean;
+        sortingOrder?: import("@mui/x-data-grid-pro").GridSortDirection[];
+        resizable?: boolean;
+        editable?: boolean;
+        groupable?: boolean;
+        pinnable?: boolean;
         sortComparator?: import("@mui/x-data-grid-pro").GridComparatorFn<any> | undefined;
         getSortComparator?: ((sortDirection: import("@mui/x-data-grid-pro").GridSortDirection) => import("@mui/x-data-grid-pro").GridComparatorFn<any> | undefined) | undefined;
-        type?: import("@mui/x-data-grid-pro").GridColType | undefined;
-        align?: import("@mui/x-data-grid-pro").GridAlignment | undefined;
+        type?: import("@mui/x-data-grid-pro").GridColType;
+        align?: import("@mui/x-data-grid-pro").GridAlignment;
         valueGetter?: import("@mui/x-data-grid-pro").GridValueGetter<any, any, any, never> | undefined;
         valueSetter?: import("@mui/x-data-grid-pro").GridValueSetter<any, any, any> | undefined;
         valueFormatter?: import("@mui/x-data-grid-pro").GridValueFormatter<any, any, any, never> | undefined;
         valueParser?: import("@mui/x-data-grid-pro").GridValueParser<any, any, any> | undefined;
         cellClassName?: import("@mui/x-data-grid-pro").GridCellClassNamePropType<any, any> | undefined;
-        display?: "text" | "flex" | undefined;
+        display?: "text" | "flex";
         renderCell?: ((params: import("@mui/x-data-grid-pro").GridRenderCellParams<any, any, any, import("@mui/x-data-grid-pro").GridTreeNodeWithRender>) => React.ReactNode) | undefined;
         renderEditCell?: ((params: import("@mui/x-data-grid-pro").GridRenderEditCellParams<any, any, any, import("@mui/x-data-grid-pro").GridTreeNodeWithRender>) => React.ReactNode) | undefined;
-        preProcessEditCellProps?: ((params: import("@mui/x-data-grid-pro").GridPreProcessEditCellProps<any, any>) => import("@mui/x-data-grid-pro").GridEditCellProps<any> | Promise<import("@mui/x-data-grid-pro").GridEditCellProps<any>>) | undefined;
-        headerClassName?: import("@mui/x-data-grid-pro").GridColumnHeaderClassNamePropType | undefined;
+        preProcessEditCellProps?: ((params: import("@mui/x-data-grid-pro").GridPreProcessEditCellProps) => import("@mui/x-data-grid-pro").GridEditCellProps | Promise<import("@mui/x-data-grid-pro").GridEditCellProps>) | undefined;
+        headerClassName?: import("@mui/x-data-grid-pro").GridColumnHeaderClassNamePropType;
         renderHeader?: ((params: import("@mui/x-data-grid-pro").GridColumnHeaderParams<any, any, any>) => React.ReactNode) | undefined;
-        headerAlign?: import("@mui/x-data-grid-pro").GridAlignment | undefined;
-        hideSortIcons?: boolean | undefined;
-        disableColumnMenu?: boolean | undefined;
-        filterable?: boolean | undefined;
-        filterOperators?: GridFilterOperator<any, any, any>[] | undefined;
+        headerAlign?: import("@mui/x-data-grid-pro").GridAlignment;
+        hideSortIcons?: boolean;
+        disableColumnMenu?: boolean;
+        filterable?: boolean;
+        filterOperators?: import("@mui/x-data-grid-pro").GridFilterOperator<any, any, any>[] | undefined;
         getApplyQuickFilterFn?: import("@mui/x-data-grid-pro").GetApplyQuickFilterFn<any, any> | undefined;
-        disableReorder?: boolean | undefined;
-        disableExport?: boolean | undefined;
+        disableReorder?: boolean;
+        disableExport?: boolean;
         colSpan?: number | import("@mui/x-data-grid-pro").GridColSpanFn<any, any, any> | undefined;
-        renderHeaderFilter?: ((params: import("@mui/x-data-grid-pro").GridRenderHeaderFilterProps) => React.ReactNode) | undefined;
-        aggregable?: boolean | undefined;
-        availableAggregationFunctions?: string[] | undefined;
+        renderHeaderFilter?: (params: import("@mui/x-data-grid-pro").GridRenderHeaderFilterProps) => React.ReactNode;
+        aggregable?: boolean;
+        availableAggregationFunctions?: string[];
         groupingValueGetter?: import("@mui/x-data-grid-premium").GridGroupingValueGetter<any> | undefined;
         pastedValueParser?: import("@mui/x-data-grid-premium").GridPastedValueParser<any, any, any> | undefined;
-        generateData?: ((row: any, context: import("..").GridDataGeneratorContext) => any) | undefined;
-        dataGeneratorUniquenessEnabled?: boolean | undefined;
-        hide?: boolean | undefined;
+        generateData?: (row: any, context: import("..").GridDataGeneratorContext) => any;
+        dataGeneratorUniquenessEnabled?: boolean;
+        hide?: boolean;
     } | {
         type: "actions";
-        getActions: (params: import("@mui/x-data-grid-pro").GridRowParams<any>) => React.ReactElement<import("@mui/x-data-grid-pro").GridActionsCellItemProps, string | React.JSXElementConstructor<any>>[];
+        getActions: (params: import("@mui/x-data-grid-pro").GridRowParams<any>) => React.ReactElement<import("@mui/x-data-grid-pro").GridActionsCellItemProps>[];
         field: string;
-        headerName?: string | undefined;
-        description?: string | undefined;
-        width?: number | undefined;
-        flex?: number | undefined;
-        minWidth?: number | undefined;
-        maxWidth?: number | undefined;
-        hideable?: boolean | undefined;
-        sortable?: boolean | undefined;
-        sortingOrder?: import("@mui/x-data-grid-pro").GridSortDirection[] | undefined;
-        resizable?: boolean | undefined;
-        editable?: boolean | undefined;
-        groupable?: boolean | undefined;
-        pinnable?: boolean | undefined;
+        headerName?: string;
+        description?: string;
+        width?: number;
+        flex?: number;
+        minWidth?: number;
+        maxWidth?: number;
+        hideable?: boolean;
+        sortable?: boolean;
+        sortingOrder?: import("@mui/x-data-grid-pro").GridSortDirection[];
+        resizable?: boolean;
+        editable?: boolean;
+        groupable?: boolean;
+        pinnable?: boolean;
         sortComparator?: import("@mui/x-data-grid-pro").GridComparatorFn<any> | undefined;
         getSortComparator?: ((sortDirection: import("@mui/x-data-grid-pro").GridSortDirection) => import("@mui/x-data-grid-pro").GridComparatorFn<any> | undefined) | undefined;
-        align?: import("@mui/x-data-grid-pro").GridAlignment | undefined;
+        align?: import("@mui/x-data-grid-pro").GridAlignment;
         valueGetter?: import("@mui/x-data-grid-pro").GridValueGetter<any, any, any, never> | undefined;
         valueSetter?: import("@mui/x-data-grid-pro").GridValueSetter<any, any, any> | undefined;
         valueFormatter?: import("@mui/x-data-grid-pro").GridValueFormatter<any, any, any, never> | undefined;
         valueParser?: import("@mui/x-data-grid-pro").GridValueParser<any, any, any> | undefined;
         cellClassName?: import("@mui/x-data-grid-pro").GridCellClassNamePropType<any, any> | undefined;
-        display?: "text" | "flex" | undefined;
+        display?: "text" | "flex";
         renderCell?: ((params: import("@mui/x-data-grid-pro").GridRenderCellParams<any, any, any, import("@mui/x-data-grid-pro").GridTreeNodeWithRender>) => React.ReactNode) | undefined;
         renderEditCell?: ((params: import("@mui/x-data-grid-pro").GridRenderEditCellParams<any, any, any, import("@mui/x-data-grid-pro").GridTreeNodeWithRender>) => React.ReactNode) | undefined;
-        preProcessEditCellProps?: ((params: import("@mui/x-data-grid-pro").GridPreProcessEditCellProps<any, any>) => import("@mui/x-data-grid-pro").GridEditCellProps<any> | Promise<import("@mui/x-data-grid-pro").GridEditCellProps<any>>) | undefined;
-        headerClassName?: import("@mui/x-data-grid-pro").GridColumnHeaderClassNamePropType | undefined;
+        preProcessEditCellProps?: ((params: import("@mui/x-data-grid-pro").GridPreProcessEditCellProps) => import("@mui/x-data-grid-pro").GridEditCellProps | Promise<import("@mui/x-data-grid-pro").GridEditCellProps>) | undefined;
+        headerClassName?: import("@mui/x-data-grid-pro").GridColumnHeaderClassNamePropType;
         renderHeader?: ((params: import("@mui/x-data-grid-pro").GridColumnHeaderParams<any, any, any>) => React.ReactNode) | undefined;
-        headerAlign?: import("@mui/x-data-grid-pro").GridAlignment | undefined;
-        hideSortIcons?: boolean | undefined;
-        disableColumnMenu?: boolean | undefined;
-        filterable?: boolean | undefined;
-        filterOperators?: GridFilterOperator<any, any, any>[] | undefined;
+        headerAlign?: import("@mui/x-data-grid-pro").GridAlignment;
+        hideSortIcons?: boolean;
+        disableColumnMenu?: boolean;
+        filterable?: boolean;
+        filterOperators?: import("@mui/x-data-grid-pro").GridFilterOperator<any, any, any>[] | undefined;
         getApplyQuickFilterFn?: import("@mui/x-data-grid-pro").GetApplyQuickFilterFn<any, any> | undefined;
-        disableReorder?: boolean | undefined;
-        disableExport?: boolean | undefined;
+        disableReorder?: boolean;
+        disableExport?: boolean;
         colSpan?: number | import("@mui/x-data-grid-pro").GridColSpanFn<any, any, any> | undefined;
-        renderHeaderFilter?: ((params: import("@mui/x-data-grid-pro").GridRenderHeaderFilterProps) => React.ReactNode) | undefined;
-        aggregable?: boolean | undefined;
-        availableAggregationFunctions?: string[] | undefined;
+        renderHeaderFilter?: (params: import("@mui/x-data-grid-pro").GridRenderHeaderFilterProps) => React.ReactNode;
+        aggregable?: boolean;
+        availableAggregationFunctions?: string[];
         groupingValueGetter?: import("@mui/x-data-grid-premium").GridGroupingValueGetter<any> | undefined;
         pastedValueParser?: import("@mui/x-data-grid-premium").GridPastedValueParser<any, any, any> | undefined;
-        generateData?: ((row: any, context: import("..").GridDataGeneratorContext) => any) | undefined;
-        dataGeneratorUniquenessEnabled?: boolean | undefined;
-        hide?: boolean | undefined;
+        generateData?: (row: any, context: import("..").GridDataGeneratorContext) => any;
+        dataGeneratorUniquenessEnabled?: boolean;
+        hide?: boolean;
     } | {
         type: "singleSelect";
-        valueOptions?: import("@mui/x-data-grid-pro").ValueOptions[] | ((params: import("@mui/x-data-grid-pro").GridValueOptionsParams<any>) => import("@mui/x-data-grid-pro").ValueOptions[]) | undefined;
-        getOptionLabel?: ((value: import("@mui/x-data-grid-pro").ValueOptions) => string) | undefined;
-        getOptionValue?: ((value: import("@mui/x-data-grid-pro").ValueOptions) => any) | undefined;
+        valueOptions?: import("@mui/x-data-grid-pro").ValueOptions[] | ((params: import("@mui/x-data-grid-pro").GridValueOptionsParams<any>) => Array<import("@mui/x-data-grid-pro").ValueOptions>) | undefined;
+        getOptionLabel?: (value: import("@mui/x-data-grid-pro").ValueOptions) => string;
+        getOptionValue?: (value: import("@mui/x-data-grid-pro").ValueOptions) => any;
         field: string;
-        headerName?: string | undefined;
-        description?: string | undefined;
-        width?: number | undefined;
-        flex?: number | undefined;
-        minWidth?: number | undefined;
-        maxWidth?: number | undefined;
-        hideable?: boolean | undefined;
-        sortable?: boolean | undefined;
-        sortingOrder?: import("@mui/x-data-grid-pro").GridSortDirection[] | undefined;
-        resizable?: boolean | undefined;
-        editable?: boolean | undefined;
-        groupable?: boolean | undefined;
-        pinnable?: boolean | undefined;
+        headerName?: string;
+        description?: string;
+        width?: number;
+        flex?: number;
+        minWidth?: number;
+        maxWidth?: number;
+        hideable?: boolean;
+        sortable?: boolean;
+        sortingOrder?: import("@mui/x-data-grid-pro").GridSortDirection[];
+        resizable?: boolean;
+        editable?: boolean;
+        groupable?: boolean;
+        pinnable?: boolean;
         sortComparator?: import("@mui/x-data-grid-pro").GridComparatorFn<any> | undefined;
         getSortComparator?: ((sortDirection: import("@mui/x-data-grid-pro").GridSortDirection) => import("@mui/x-data-grid-pro").GridComparatorFn<any> | undefined) | undefined;
-        align?: import("@mui/x-data-grid-pro").GridAlignment | undefined;
+        align?: import("@mui/x-data-grid-pro").GridAlignment;
         valueGetter?: import("@mui/x-data-grid-pro").GridValueGetter<any, any, any, never> | undefined;
         valueSetter?: import("@mui/x-data-grid-pro").GridValueSetter<any, any, any> | undefined;
         valueFormatter?: import("@mui/x-data-grid-pro").GridValueFormatter<any, any, any, never> | undefined;
         valueParser?: import("@mui/x-data-grid-pro").GridValueParser<any, any, any> | undefined;
         cellClassName?: import("@mui/x-data-grid-pro").GridCellClassNamePropType<any, any> | undefined;
-        display?: "text" | "flex" | undefined;
+        display?: "text" | "flex";
         renderCell?: ((params: import("@mui/x-data-grid-pro").GridRenderCellParams<any, any, any, import("@mui/x-data-grid-pro").GridTreeNodeWithRender>) => React.ReactNode) | undefined;
         renderEditCell?: ((params: import("@mui/x-data-grid-pro").GridRenderEditCellParams<any, any, any, import("@mui/x-data-grid-pro").GridTreeNodeWithRender>) => React.ReactNode) | undefined;
-        preProcessEditCellProps?: ((params: import("@mui/x-data-grid-pro").GridPreProcessEditCellProps<any, any>) => import("@mui/x-data-grid-pro").GridEditCellProps<any> | Promise<import("@mui/x-data-grid-pro").GridEditCellProps<any>>) | undefined;
-        headerClassName?: import("@mui/x-data-grid-pro").GridColumnHeaderClassNamePropType | undefined;
+        preProcessEditCellProps?: ((params: import("@mui/x-data-grid-pro").GridPreProcessEditCellProps) => import("@mui/x-data-grid-pro").GridEditCellProps | Promise<import("@mui/x-data-grid-pro").GridEditCellProps>) | undefined;
+        headerClassName?: import("@mui/x-data-grid-pro").GridColumnHeaderClassNamePropType;
         renderHeader?: ((params: import("@mui/x-data-grid-pro").GridColumnHeaderParams<any, any, any>) => React.ReactNode) | undefined;
-        headerAlign?: import("@mui/x-data-grid-pro").GridAlignment | undefined;
-        hideSortIcons?: boolean | undefined;
-        disableColumnMenu?: boolean | undefined;
-        filterable?: boolean | undefined;
-        filterOperators?: GridFilterOperator<any, any, any>[] | undefined;
+        headerAlign?: import("@mui/x-data-grid-pro").GridAlignment;
+        hideSortIcons?: boolean;
+        disableColumnMenu?: boolean;
+        filterable?: boolean;
+        filterOperators?: import("@mui/x-data-grid-pro").GridFilterOperator<any, any, any>[] | undefined;
         getApplyQuickFilterFn?: import("@mui/x-data-grid-pro").GetApplyQuickFilterFn<any, any> | undefined;
-        disableReorder?: boolean | undefined;
-        disableExport?: boolean | undefined;
+        disableReorder?: boolean;
+        disableExport?: boolean;
         colSpan?: number | import("@mui/x-data-grid-pro").GridColSpanFn<any, any, any> | undefined;
-        renderHeaderFilter?: ((params: import("@mui/x-data-grid-pro").GridRenderHeaderFilterProps) => React.ReactNode) | undefined;
-        aggregable?: boolean | undefined;
-        availableAggregationFunctions?: string[] | undefined;
+        renderHeaderFilter?: (params: import("@mui/x-data-grid-pro").GridRenderHeaderFilterProps) => React.ReactNode;
+        aggregable?: boolean;
+        availableAggregationFunctions?: string[];
         groupingValueGetter?: import("@mui/x-data-grid-premium").GridGroupingValueGetter<any> | undefined;
         pastedValueParser?: import("@mui/x-data-grid-premium").GridPastedValueParser<any, any, any> | undefined;
-        generateData?: ((row: any, context: import("..").GridDataGeneratorContext) => any) | undefined;
-        dataGeneratorUniquenessEnabled?: boolean | undefined;
-        hide?: boolean | undefined;
+        generateData?: (row: any, context: import("..").GridDataGeneratorContext) => any;
+        dataGeneratorUniquenessEnabled?: boolean;
+        hide?: boolean;
     })[];
     initialState: {
         columns: {
@@ -191,4 +161,3 @@ export declare const createFakeServer: (dataSetOptions?: Partial<UseDemoDataOpti
         isLoading: boolean;
     };
 };
-export {};

package/hooks/useQuery.js

@@ -1,145 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { getGridDefaultColumnTypes, GridLogicOperator } from '@mui/x-data-grid-pro';
+import { getGridDefaultColumnTypes } from '@mui/x-data-grid-pro';
 import { isDeepEqual } from '@mui/x-data-grid/internals';
 import { useDemoData, getColumnsFromOptions, getInitialState } from './useDemoData';
-import { randomInt } from '../services/random-generator';
-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 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);
-    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)) : parser(filterItem.value);
-    }
-    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),
-    nextCursor,
-    hasNextPage,
-    totalRowCount
-  };
-  return new Promise(resolve => {
-    setTimeout(() => {
-      resolve(response);
-    }, delay); // simulate network latency
-  });
-};
-const DEFAULT_DATASET_OPTIONS = {
-  dataSet: 'Commodity',
-  rowLength: 100,
-  maxColumns: 6
-};
-const disableDelay = typeof DISABLE_CHANCE_RANDOM !== 'undefined' && DISABLE_CHANCE_RANDOM;
-const DEFAULT_SERVER_OPTIONS = {
-  minDelay: disableDelay ? 0 : 100,
-  maxDelay: disableDelay ? 0 : 300,
-  useCursorPagination: true
-};
+import { DEFAULT_DATASET_OPTIONS, DEFAULT_SERVER_OPTIONS, loadServerRows } from './serverUtils';
 export const createFakeServer = (dataSetOptions, serverOptions) => {
   const dataSetOptionsWithDefault = _extends({}, DEFAULT_DATASET_OPTIONS, dataSetOptions);
   const serverOptionsWithDefault = _extends({}, DEFAULT_SERVER_OPTIONS, serverOptions);

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-generator v7.7.1
+ * @mui/x-data-grid-generator v7.8.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/modern/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';