@mui/x-data-grid-generator 6.0.0-alpha.8 → 6.0.0-alpha.9

package/legacy/services/real-data-service.js

@@ -6,35 +6,26 @@ export function getRealGridData(rowLength, columns) {
     };
     var rows = [];
     var indexedValues = {};
-
     function work() {
       var row = {};
-
       for (var j = 0; j < columns.length; j += 1) {
         var column = columns[j];
-
         if (column.generateData) {
           var context = {};
-
           if (column.dataGeneratorUniquenessEnabled) {
             var fieldValues = indexedValues[column.field];
-
             if (!fieldValues) {
               fieldValues = {};
               indexedValues[column.field] = fieldValues;
             }
-
             context.values = fieldValues;
           }
-
           row[column.field] = column.generateData(row, context);
         }
       }
-
       rows.push(row);
       tasks.current -= 1;
     }
-
     var columnVisibilityModel = {};
     columns.forEach(function (col) {
       if (col.hide) {

package/legacy/services/tree-data-generator.js

@@ -3,81 +3,65 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { randomArrayItem } from './random-generator';
 export var addTreeDataOptionsToDemoData = function addTreeDataOptionsToDemoData(data) {
   var _groupingCol$headerNa;
-
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var _options$averageChild = options.averageChildren,
-      averageChildren = _options$averageChild === void 0 ? 2 : _options$averageChild,
-      _options$maxDepth = options.maxDepth,
-      maxDepth = _options$maxDepth === void 0 ? 1 : _options$maxDepth,
-      groupingField = options.groupingField;
+    averageChildren = _options$averageChild === void 0 ? 2 : _options$averageChild,
+    _options$maxDepth = options.maxDepth,
+    maxDepth = _options$maxDepth === void 0 ? 1 : _options$maxDepth,
+    groupingField = options.groupingField;
   var hasTreeData = maxDepth > 1 && groupingField != null;
-
   if (!hasTreeData) {
     return data;
   }
-
   if (data.rows.length > 1000) {
     throw new Error('MUI: useDemoData tree data mode only works up to 1000 rows.');
   }
-
   var rowsByTreeDepth = {};
   var rowsCount = data.rows.length;
   var groupingCol = data.columns.find(function (col) {
     return col.field === options.groupingField;
   });
-
   if (!groupingCol) {
     throw new Error('MUI: The tree data grouping field does not exist');
   }
-
   data.initialState.columns.columnVisibilityModel[groupingField] = false;
-
   for (var i = 0; i < rowsCount; i += 1) {
     var row = data.rows[i];
     var currentChunk = Math.floor(i * (Math.pow(averageChildren, maxDepth) - 1) / rowsCount) + 1;
     var currentDepth = Math.floor(Math.log(currentChunk) / Math.log(averageChildren));
-
     if (!rowsByTreeDepth[currentDepth]) {
       rowsByTreeDepth[currentDepth] = {
         rows: {},
         rowIndexes: []
       };
     }
-
     rowsByTreeDepth[currentDepth].rows[i] = {
       value: row,
       parentIndex: null
     };
     rowsByTreeDepth[currentDepth].rowIndexes.push(i);
   }
-
   Object.entries(rowsByTreeDepth).forEach(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),
-        depthStr = _ref2[0],
-        rows = _ref2[1].rows;
-
+      depthStr = _ref2[0],
+      rows = _ref2[1].rows;
     var depth = Number(depthStr);
     Object.values(rows).forEach(function (row) {
       var path = [];
       var previousRow = null;
-
       for (var k = depth; k >= 0; k -= 1) {
         var rowTemp = void 0;
-
         if (k === depth) {
           if (depth > 0) {
             row.parentIndex = Number(randomArrayItem(rowsByTreeDepth[depth - 1].rowIndexes));
           }
-
           rowTemp = row;
         } else {
           rowTemp = rowsByTreeDepth[k].rows[previousRow.parentIndex];
         }
-
         path.unshift(rowTemp.value[groupingField]);
         previousRow = rowTemp;
       }
-
       row.value.path = path;
     });
   });

package/modern/columns/commodities.columns.js

@@ -171,7 +171,6 @@ export const getCommodityColumns = (editable = false) => [{
     if (typeof value === 'string') {
       return COUNTRY_ISO_OPTIONS_SORTED.find(country => country.value === value);
     }
-
     return value;
   },
   valueFormatter: ({

package/modern/columns/employees.columns.js

@@ -130,7 +130,6 @@ export const getEmployeeColumns = () => [{
     if (!value || typeof value !== 'number') {
       return value;
     }
-
     return `${value.toLocaleString()}$`;
   }
 }];

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);
   }
 }, {

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,20 +36,16 @@ 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(({
@@ -72,18 +63,15 @@ const getFilteredRows = (rows, filterModel, columnsWithDefaultColDef) => {
       value
     }) => operatorValue === 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 +80,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 +87,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 +113,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 +121,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 +138,7 @@ export const loadServerRows = (rows, queryOptions, serverOptions, columnsWithDef
     }, delay); // simulate network latency
   });
 };
+
 const DEFAULT_DATASET_OPTIONS = {
   dataSet: 'Commodity',
   rowLength: 100,
@@ -170,14 +152,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 +175,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 +201,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.8
+/** @license MUI v6.0.0-alpha.9
  *
  * 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,
@@ -72,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));
 }

package/modern/renderer/renderEditCurrency.js

@@ -21,7 +21,6 @@ const StyledAutocomplete = styled(Autocomplete)(({
     }
   })
 }));
-
 function EditCurrency(props) {
   const {
     id,
@@ -71,12 +70,10 @@ function EditCurrency(props) {
       id: params.id,
       inputProps: _extends({}, params.inputProps, {
         autoComplete: 'new-password' // disable autocomplete and autofill
-
       })
     }, params.InputProps))
   });
 }
-
 export function renderEditCurrency(params) {
   return /*#__PURE__*/_jsx(EditCurrency, _extends({}, params));
 }

package/modern/renderer/renderEditIncoterm.js

@@ -8,7 +8,6 @@ import ListItemText from '@mui/material/ListItemText';
 import { INCOTERM_OPTIONS } from '../services/static-data';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 function EditIncoterm(props) {
   const {
     id,
@@ -16,7 +15,6 @@ function EditIncoterm(props) {
     field
   } = props;
   const apiRef = useGridApiContext();
-
   const handleChange = async event => {
     await apiRef.current.setEditCellValue({
       id,
@@ -28,7 +26,6 @@ function EditIncoterm(props) {
       field
     });
   };
-
   const handleClose = (event, reason) => {
     if (reason === 'backdropClick') {
       apiRef.current.stopCellEditMode({
@@ -37,7 +34,6 @@ function EditIncoterm(props) {
       });
     }
   };
-
   return /*#__PURE__*/_jsx(Select, {
     value: value,
     onChange: handleChange,
@@ -75,7 +71,6 @@ function EditIncoterm(props) {
     })
   });
 }
-
 export function renderEditIncoterm(params) {
   return /*#__PURE__*/_jsx(EditIncoterm, _extends({}, params));
 }

package/modern/renderer/renderEditProgress.js

@@ -44,7 +44,6 @@ const StyledSlider = styled(Slider)(({
     backgroundColor: alpha('#000000', 0.2)
   }
 }));
-
 function ValueLabelComponent(props) {
   const {
     children,
@@ -59,7 +58,6 @@ function ValueLabelComponent(props) {
     children: children
   });
 }
-
 function EditProgress(props) {
   const {
     id,
@@ -76,22 +74,18 @@ function EditProgress(props) {
     });
   }, [apiRef, field, id]);
   const debouncedUpdateCellEditProps = React.useMemo(() => debounce(updateCellEditProps, 60), [updateCellEditProps]);
-
   const handleChange = (event, newValue) => {
     setValueState(newValue);
     debouncedUpdateCellEditProps(newValue);
   };
-
   React.useEffect(() => {
     setValueState(Number(value));
   }, [value]);
-
   const handleRef = element => {
     if (element) {
       element.querySelector('[type="range"]').focus();
     }
   };
-
   return /*#__PURE__*/_jsx(StyledSlider, {
     ref: handleRef,
     classes: {
@@ -108,7 +102,6 @@ function EditProgress(props) {
     valueLabelFormat: newValue => `${(newValue * 100).toLocaleString()} %`
   });
 }
-
 export function renderEditProgress(params) {
   return /*#__PURE__*/_jsx(EditProgress, _extends({}, params));
 }

package/modern/renderer/renderEditRating.js

@@ -5,7 +5,6 @@ import Rating from '@mui/material/Rating';
 import { useGridApiContext } from '@mui/x-data-grid-premium';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 function EditRating(props) {
   const {
     id,
@@ -13,7 +12,6 @@ function EditRating(props) {
     field
   } = props;
   const apiRef = useGridApiContext();
-
   const handleChange = async event => {
     await apiRef.current.setEditCellValue({
       id,
@@ -25,13 +23,11 @@ function EditRating(props) {
       field
     });
   };
-
   const handleRef = element => {
     if (element) {
       element.querySelector(`input[value="${value}"]`).focus();
     }
   };
-
   return /*#__PURE__*/_jsxs(Box, {
     sx: {
       display: 'flex',
@@ -52,7 +48,6 @@ function EditRating(props) {
     }), Number(value)]
   });
 }
-
 export function renderEditRating(params) {
   return /*#__PURE__*/_jsx(EditRating, _extends({}, params));
 }