@mui/x-data-grid-generator 6.0.0-alpha.1 → 6.0.0-alpha.10

package/modern/hooks/useDemoData.js

@@ -9,7 +9,6 @@ import { addTreeDataOptionsToDemoData } from '../services/tree-data-generator';
 const dataCache = new LRUCache({
   max: 10,
   ttl: 60 * 5 * 1e3 // 5 minutes
-
 });
 
 // Generate fake data from a seed.
@@ -21,25 +20,20 @@ async function extrapolateSeed(rowLength, data) {
     const tasks = {
       current: rowLength - seed.length
     };
-
     function work() {
       const row = {};
-
       for (let j = 0; j < data.columns.length; j += 1) {
         const column = data.columns[j];
         const index = Math.round(Math.random() * (seed.length - 1));
-
         if (column.field === 'id') {
           row.id = `id-${tasks.current + seed.length}`;
         } else {
           row[column.field] = seed[index][column.field];
         }
       }
-
       rows.push(row);
       tasks.current -= 1;
     }
-
     asyncWorker({
       work,
       done: () => resolve(_extends({}, data, {
@@ -49,36 +43,31 @@ async function extrapolateSeed(rowLength, data) {
     });
   });
 }
-
 const deepFreeze = object => {
   // Retrieve the property names defined on object
-  const propNames = Object.getOwnPropertyNames(object); // Freeze properties before freezing self
-  // eslint-disable-next-line no-restricted-syntax
+  const propNames = Object.getOwnPropertyNames(object);
+
+  // Freeze properties before freezing self
 
+  // eslint-disable-next-line no-restricted-syntax
   for (const name of propNames) {
     const value = object[name];
-
     if (value && typeof value === 'object') {
       deepFreeze(value);
     }
   }
-
   return Object.freeze(object);
 };
-
 export const getColumnsFromOptions = options => {
   let columns = options.dataSet === 'Commodity' ? getCommodityColumns(options.editable) : getEmployeeColumns();
-
   if (options.visibleFields) {
     columns = columns.map(col => options.visibleFields?.includes(col.field) ? col : _extends({}, col, {
       hide: true
     }));
   }
-
   if (options.maxColumns) {
     columns = columns.slice(0, options.maxColumns);
   }
-
   return columns;
 };
 export const getInitialState = (options, columns) => {
@@ -89,11 +78,9 @@ export const getInitialState = (options, columns) => {
     }
   });
   const groupingField = options.treeData?.groupingField;
-
   if (groupingField) {
     columnVisibilityModel[groupingField] = false;
   }
-
   return {
     columns: {
       columnVisibilityModel
@@ -120,48 +107,43 @@ export const useDemoData = options => {
     }, options.treeData);
   });
   React.useEffect(() => {
-    const cacheKey = `${options.dataSet}-${rowLength}-${index}-${options.maxColumns}`; // Cache to allow fast switch between the JavaScript and TypeScript version
-    // of the demos.
+    const cacheKey = `${options.dataSet}-${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);
       setLoading(false);
       return undefined;
     }
-
     let active = true;
-
     (async () => {
       setLoading(true);
       let newData;
-
       if (rowLength > 1000) {
         newData = await getRealGridData(1000, columns);
         newData = await extrapolateSeed(rowLength, newData);
       } else {
         newData = await getRealGridData(rowLength, columns);
       }
-
       if (!active) {
         return;
       }
-
       newData = addTreeDataOptionsToDemoData(newData, {
         maxDepth: options.treeData?.maxDepth,
         groupingField: options.treeData?.groupingField,
         averageChildren: options.treeData?.averageChildren
-      }); // It's quite slow. No need for it in production.
+      });
 
+      // It's quite slow. No need for it in production.
       if (process.env.NODE_ENV !== 'production') {
         deepFreeze(newData);
       }
-
       dataCache.set(cacheKey, newData);
       setData(newData);
       setLoading(false);
     })();
-
     return () => {
       active = false;
     };

package/modern/hooks/useMovieData.js

@@ -21,7 +21,6 @@ const COLUMNS = [{
     if (!value) {
       return '';
     }
-
     return currencyFormatter.format(value);
   }
 }, {
@@ -46,6 +45,7 @@ const ROWS = [{
   id: 0,
   title: 'Avatar',
   gross: 2847246203,
+  budget: 237000000,
   director: 'James Cameron',
   company: '20th Century Fox',
   year: 2009,
@@ -57,6 +57,7 @@ const ROWS = [{
   id: 1,
   title: 'Avengers: Endgame',
   gross: 2797501328,
+  budget: 356000000,
   director: 'Anthony & Joe Russo',
   company: 'Disney Studios',
   year: 2019,
@@ -69,6 +70,7 @@ const ROWS = [{
   id: 2,
   title: 'Titanic',
   gross: 2187425379,
+  budget: 200000000,
   director: 'James Cameron',
   company: '20th Century Fox',
   year: 1997,
@@ -80,6 +82,7 @@ const ROWS = [{
   id: 3,
   title: 'Star Wars: The Force Awakens',
   gross: 2068223624,
+  budget: 306000000,
   director: 'J. J. Abrams',
   company: 'Disney Studios',
   year: 2015,
@@ -92,6 +95,7 @@ const ROWS = [{
   id: 4,
   title: 'Avengers: Infinity War',
   gross: 2048359754,
+  budget: 321000000,
   director: 'Anthony & Joe Russo',
   company: 'Disney Studios',
   year: 2018,
@@ -104,6 +108,7 @@ const ROWS = [{
   id: 5,
   title: 'Spider-Man: No Way Home',
   gross: 1892768346,
+  budget: 200000000,
   director: 'Jon Watts',
   company: 'Disney Studios',
   year: 2021,
@@ -116,6 +121,7 @@ const ROWS = [{
   id: 6,
   title: 'Jurassic World',
   gross: 1671713208,
+  budget: 150000000,
   director: 'Colin Trevorrow',
   company: 'Universal Pictures',
   year: 2015,
@@ -128,6 +134,7 @@ const ROWS = [{
   id: 7,
   title: 'The Lion King',
   gross: 1656943394,
+  budget: 260000000,
   director: 'Jon Favreau',
   company: 'Disney Studios',
   year: 2019,
@@ -139,6 +146,7 @@ const ROWS = [{
   id: 8,
   title: 'The Avengers',
   gross: 1518812988,
+  budget: 220000000,
   director: 'Joss Whedon',
   company: 'Disney Studios',
   year: 2012,
@@ -151,6 +159,7 @@ const ROWS = [{
   id: 9,
   title: 'Furious 7',
   gross: 1516045911,
+  budget: 190000000,
   director: 'James Wan',
   company: 'Universal Pictures',
   year: 2015,
@@ -163,6 +172,7 @@ const ROWS = [{
   id: 10,
   title: 'Frozen II',
   gross: 1450026933,
+  budget: 150000000,
   director: 'Chris Buck & Jennifer Lee',
   company: 'Disney Studios',
   year: 2019,
@@ -175,6 +185,7 @@ const ROWS = [{
   id: 11,
   title: 'Avengers: Age of Ultron',
   gross: 1402804868,
+  budget: 280000000,
   director: 'Joss Whedon',
   company: 'Disney Studios',
   year: 2015,
@@ -187,6 +198,7 @@ const ROWS = [{
   id: 12,
   title: 'Black Panther',
   gross: 1347280838,
+  budget: 200000000,
   director: 'Ryan Coogler',
   company: 'Disney Studios',
   year: 2018,
@@ -199,6 +211,7 @@ const ROWS = [{
   id: 13,
   title: 'Harry Potter and the Deathly Hallows – Part 2',
   gross: 1342025430,
+  budget: 125000000,
   director: 'David Yates',
   company: 'Warner Bros. Pictures',
   year: 2011,
@@ -211,6 +224,7 @@ const ROWS = [{
   id: 14,
   title: 'Star Wars: The Last Jedi',
   gross: 1332539889,
+  budget: 317000000,
   director: 'Rian Johnson',
   company: 'Disney Studios',
   year: 2017,
@@ -223,6 +237,7 @@ const ROWS = [{
   id: 15,
   title: 'Jurassic World: Fallen Kingdom',
   gross: 1309484461,
+  budget: 170000000,
   director: 'J. A. Bayona',
   company: 'Universal Pictures',
   year: 2018,
@@ -235,6 +250,7 @@ const ROWS = [{
   id: 16,
   title: 'Frozen',
   gross: 1290000000,
+  budget: 150000000,
   director: 'Chris Buck & Jennifer Lee',
   company: 'Disney Studios',
   year: 2013,
@@ -247,6 +263,7 @@ const ROWS = [{
   id: 17,
   title: 'Beauty and the Beast',
   gross: 1263521136,
+  budget: 160000000,
   director: 'Bill Condon',
   company: 'Disney Studios',
   year: 2017,
@@ -258,6 +275,7 @@ const ROWS = [{
   id: 18,
   title: 'Incredibles 2',
   gross: 1242805359,
+  budget: 200000000,
   director: 'Brad Bird',
   company: 'Disney Studios',
   year: 2018,
@@ -269,6 +287,7 @@ const ROWS = [{
   id: 19,
   title: 'The Fate of the Furious',
   gross: 1238764765,
+  budget: 250000000,
   director: 'F. Gary Gray',
   company: 'Universal Pictures',
   year: 2017,
@@ -281,6 +300,7 @@ const ROWS = [{
   id: 20,
   title: 'Iron Man 3',
   gross: 1214811252,
+  budget: 200000000,
   director: 'Shane Black',
   company: 'Disney Studios',
   year: 2013,
@@ -293,6 +313,7 @@ const ROWS = [{
   id: 21,
   title: 'Minions',
   gross: 1159398397,
+  budget: 74000000,
   director: 'Pierre Coffin & Kyle Balda',
   company: 'Universal Pictures',
   year: 2015,
@@ -304,6 +325,7 @@ const ROWS = [{
   id: 22,
   title: 'Captain America: Civil War',
   gross: 1153329473,
+  budget: 250000000,
   director: 'Anthony & Joe Russo',
   company: 'Disney Studios',
   year: 2016,
@@ -316,6 +338,7 @@ const ROWS = [{
   id: 23,
   title: 'Aquaman',
   gross: 1148485886,
+  budget: 160000000,
   director: 'James Wan',
   company: 'Warner Bros. Pictures',
   year: 2018,
@@ -328,6 +351,7 @@ const ROWS = [{
   id: 24,
   title: 'The Lord of the Rings: The Return of the King',
   gross: 1146030912,
+  budget: 94000000,
   director: 'Peter Jackson',
   company: 'New Line Cinema',
   year: 2003,
@@ -340,6 +364,7 @@ const ROWS = [{
   id: 25,
   title: 'Spider-Man: Far From Home',
   gross: 1131927996,
+  budget: 160000000,
   director: 'Jon Watts',
   company: 'Disney Studios',
   year: 2019,
@@ -352,6 +377,7 @@ const ROWS = [{
   id: 26,
   title: 'Captain Marvel',
   gross: 1128274794,
+  budget: 152000000,
   director: 'Anna Boden & Ryan Fleck',
   company: 'Disney Studios',
   year: 2019,
@@ -364,6 +390,7 @@ const ROWS = [{
   id: 27,
   title: 'Transformers: Dark of the Moon',
   gross: 1123794079,
+  budget: 195000000,
   director: 'Michael Bay',
   company: 'Paramount Pictures',
   year: 2011,
@@ -376,6 +403,7 @@ const ROWS = [{
   id: 28,
   title: 'Skyfall',
   gross: 1108561013,
+  budget: 200000000,
   director: 'Sam Mendes',
   company: '20th Century Fox',
   year: 2012,
@@ -388,6 +416,7 @@ const ROWS = [{
   id: 29,
   title: 'Transformers: Age of Extinction',
   gross: 1104054072,
+  budget: 210000000,
   director: 'Michael Bay',
   company: 'Paramount Pictures',
   year: 2014,
@@ -400,6 +429,7 @@ const ROWS = [{
   id: 30,
   title: 'The Dark Knight Rises',
   gross: 1081142612,
+  budget: 250000000,
   director: 'Christopher Nolan',
   company: 'Warner Bros. Pictures',
   year: 2012,
@@ -412,6 +442,7 @@ const ROWS = [{
   id: 31,
   title: 'Joker',
   gross: 1074251311,
+  budget: 55000000,
   director: 'Todd Phillips',
   company: 'Warner Bros. Pictures',
   year: 2019,
@@ -424,6 +455,7 @@ const ROWS = [{
   id: 32,
   title: 'Star Wars: The Rise of Skywalker',
   gross: 1074144248,
+  budget: 275000000,
   director: 'J. J. Abrams',
   company: 'Disney Studios',
   year: 2019,
@@ -436,6 +468,7 @@ const ROWS = [{
   id: 33,
   title: 'Toy Story 4',
   gross: 1073394593,
+  budget: 200000000,
   director: 'Josh Cooley',
   company: 'Disney Studios',
   year: 2019,
@@ -448,6 +481,7 @@ const ROWS = [{
   id: 34,
   title: 'Toy Story 3',
   gross: 1066969703,
+  budget: 200000000,
   director: 'Lee Unkrich',
   company: 'Disney Studios',
   year: 2010,

package/modern/hooks/useQuery.js

@@ -3,25 +3,21 @@ import * as React from 'react';
 import { getGridDefaultColumnTypes, GridLinkOperator } from '@mui/x-data-grid-pro';
 import { isDeepEqual } from '@mui/x-data-grid/internals';
 import { useDemoData, getColumnsFromOptions, getInitialState } from './useDemoData';
-
 const simplifiedValueGetter = (field, colDef) => row => {
   const params = {
     id: row.id,
     row,
     field,
     rowNode: {}
-  }; // @ts-ignore
-
+  };
+  // @ts-ignore
   return colDef.valueGetter?.(params) || 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(({
@@ -32,7 +28,6 @@ const getRowComparator = (sortModel, columnsWithDefaultColDef) => {
       sortComparator: colDef.sortComparator
     });
   });
-
   const comparator = (row1, row2) => sortOperators.reduce((acc, {
     valueGetter,
     sort,
@@ -41,49 +36,38 @@ const getRowComparator = (sortModel, columnsWithDefaultColDef) => {
     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(({
-    columnField
-  }) => simplifiedValueGetter(columnField, columnsWithDefaultColDef.find(({
     field
-  }) => field === columnField)));
+  }) => simplifiedValueGetter(field, columnsWithDefaultColDef.find(column => column.field === field)));
   const filterFunctions = filterModel.items.map(filterItem => {
     const {
-      columnField,
-      operatorValue
+      field,
+      operator
     } = filterItem;
-    const colDef = columnsWithDefaultColDef.find(({
-      field
-    }) => field === columnField);
+    const colDef = columnsWithDefaultColDef.find(column => column.field === field);
     const filterOperator = colDef.filterOperators.find(({
       value
-    }) => operatorValue === 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.linkOperator === GridLinkOperator.Or) {
     return rows.filter(row => filterModel.items.some((_, index) => {
       const value = valueGetters[index](row);
@@ -92,7 +76,6 @@ const getFilteredRows = (rows, filterModel, columnsWithDefaultColDef) => {
       });
     }));
   }
-
   return rows.filter(row => filterModel.items.every((_, index) => {
     const value = valueGetters[index](row);
     return filterFunctions[index] === null ? true : filterFunctions[index]({
@@ -100,22 +83,19 @@ const getFilteredRows = (rows, filterModel, columnsWithDefaultColDef) => {
     });
   }));
 };
+
 /**
  * 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 = Math.random() * (maxDelay - minDelay) + minDelay;
   const {
     cursor,
@@ -129,7 +109,6 @@ export const loadServerRows = (rows, queryOptions, serverOptions, columnsWithDef
   const rowComparator = getRowComparator(queryOptions.sortModel, columnsWithDefaultColDef);
   filteredRows = [...filteredRows].sort(rowComparator);
   const totalRowCount = filteredRows.length;
-
   if (!pageSize) {
     firstRowIndex = 0;
     lastRowIndex = filteredRows.length;
@@ -138,14 +117,12 @@ export const loadServerRows = (rows, queryOptions, serverOptions, columnsWithDef
       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 response = {
     returnedRows: filteredRows.slice(firstRowIndex, lastRowIndex),
     nextCursor,
@@ -157,6 +134,7 @@ export const loadServerRows = (rows, queryOptions, serverOptions, columnsWithDef
     }, delay); // simulate network latency
   });
 };
+
 const DEFAULT_DATASET_OPTIONS = {
   dataSet: 'Commodity',
   rowLength: 100,
@@ -170,14 +148,11 @@ const DEFAULT_SERVER_OPTIONS = {
 };
 export const createFakeServer = (dataSetOptions, serverOptions) => {
   const dataSetOptionsWithDefault = _extends({}, DEFAULT_DATASET_OPTIONS, dataSetOptions);
-
   const serverOptionsWithDefault = _extends({}, DEFAULT_SERVER_OPTIONS, serverOptions);
-
   const columns = getColumnsFromOptions(dataSetOptionsWithDefault);
   const initialState = getInitialState(dataSetOptionsWithDefault, columns);
   const defaultColDef = getGridDefaultColumnTypes();
   const columnsWithDefaultColDef = columns.map(column => _extends({}, defaultColDef[column.type || 'string'], column));
-
   const useQuery = queryOptions => {
     const {
       data: {
@@ -196,25 +171,21 @@ export const createFakeServer = (dataSetOptions, serverOptions) => {
         // dataset is not ready
         return () => {};
       }
-
       queryOptionsRef.current = queryOptions;
       let active = true;
       setIsLoading(true);
       setResponse(prev => Object.keys(prev.pageInfo).length === 0 ? prev : _extends({}, prev, {
         pageInfo: {}
       }));
-
       (async function fetchData() {
         const {
           returnedRows,
           nextCursor,
           totalRowCount
         } = await loadServerRows(rows, queryOptions, serverOptionsWithDefault, columnsWithDefaultColDef);
-
         if (!active) {
           return;
         }
-
         const newRep = {
           rows: returnedRows,
           pageInfo: {
@@ -226,18 +197,17 @@ export const createFakeServer = (dataSetOptions, serverOptions) => {
         setResponse(prev => isDeepEqual(prev, newRep) ? prev : newRep);
         setIsLoading(false);
       })();
-
       return () => {
         active = false;
       };
-    }, [dataGenerationIsLoading, queryOptions, rows]); // We use queryOptions pointer to be sure that isLoading===true as soon as the options change
+    }, [dataGenerationIsLoading, queryOptions, rows]);
 
+    // We use queryOptions pointer to be sure that isLoading===true as soon as the options change
     const effectShouldStart = queryOptionsRef.current !== queryOptions;
     return _extends({
       isLoading: isLoading || effectShouldStart
     }, response);
   };
-
   return {
     columns,
     columnsWithDefaultColDef,

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v6.0.0-alpha.1
+/** @license MUI v6.0.0-alpha.10
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/modern/renderer/renderAvatar.js

@@ -5,7 +5,6 @@ export function renderAvatar(params) {
   if (params.value == null) {
     return '';
   }
-
   return /*#__PURE__*/_jsx(Avatar, {
     style: {
       backgroundColor: params.value.color

package/modern/renderer/renderCountry.js

@@ -36,14 +36,13 @@ const Country = /*#__PURE__*/React.memo(function Country(props) {
 export function renderCountry(params) {
   if (params.value == null) {
     return '';
-  } // If the aggregated value does not have the same unit as the other cell
-  // Then we fall back to the default rendering based on `valueGetter` instead of rendering the total price UI.
-
+  }
 
+  // If the aggregated value does not have the same unit as the other cell
+  // Then we fall back to the default rendering based on `valueGetter` instead of rendering the total price UI.
   if (params.aggregation && !params.aggregation.hasCellUnit) {
     return null;
   }
-
   return /*#__PURE__*/_jsx(Country, {
     value: params.value
   });

package/modern/renderer/renderEditCountry.js

@@ -21,7 +21,6 @@ const StyledAutocomplete = styled(Autocomplete)(({
     }
   })
 }));
-
 function EditCountry(props) {
   const {
     id,
@@ -29,20 +28,16 @@ function EditCountry(props) {
     field
   } = props;
   const apiRef = useGridApiContext();
-  const handleChange = React.useCallback((event, newValue) => {
-    apiRef.current.setEditCellValue({
+  const handleChange = React.useCallback(async (event, newValue) => {
+    await apiRef.current.setEditCellValue({
       id,
       field,
       value: newValue
     }, event);
-
-    if (!event.key) {
-      apiRef.current.commitCellChange({
-        id,
-        field
-      });
-      apiRef.current.setCellMode(id, field, 'view');
-    }
+    apiRef.current.stopCellEditMode({
+      id,
+      field
+    });
   }, [apiRef, field, id]);
   return /*#__PURE__*/_jsx(StyledAutocomplete, {
     value: value,
@@ -76,12 +71,10 @@ function EditCountry(props) {
       id: params.id,
       inputProps: _extends({}, params.inputProps, {
         autoComplete: 'new-password' // disable autocomplete and autofill
-
       })
     }, params.InputProps))
   });
 }
-
 export function renderEditCountry(params) {
   return /*#__PURE__*/_jsx(EditCountry, _extends({}, params));
 }