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

package/legacy/hooks/useQuery.js

@@ -7,31 +7,26 @@ 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';
-
 var simplifiedValueGetter = function simplifiedValueGetter(field, colDef) {
   return function (row) {
     var _colDef$valueGetter;
-
     var params = {
       id: row.id,
       row: row,
       field: field,
       rowNode: {}
-    }; // @ts-ignore
-
+    };
+    // @ts-ignore
     return ((_colDef$valueGetter = colDef.valueGetter) == null ? void 0 : _colDef$valueGetter.call(colDef, params)) || row[field];
   };
 };
-
 var getRowComparator = function getRowComparator(sortModel, columnsWithDefaultColDef) {
   if (!sortModel) {
     var _comparator = function _comparator() {
       return 0;
     };
-
     return _comparator;
   }
-
   var sortOperators = sortModel.map(function (sortItem) {
     var columnField = sortItem.field;
     var colDef = columnsWithDefaultColDef.find(function (_ref) {
@@ -43,66 +38,54 @@ var getRowComparator = function getRowComparator(sortModel, columnsWithDefaultCo
       sortComparator: colDef.sortComparator
     });
   });
-
   var comparator = function comparator(row1, row2) {
     return sortOperators.reduce(function (acc, _ref2) {
       var valueGetter = _ref2.valueGetter,
-          sort = _ref2.sort,
-          sortComparator = _ref2.sortComparator;
-
+        sort = _ref2.sort,
+        sortComparator = _ref2.sortComparator;
       if (acc !== 0) {
         return acc;
       }
-
       var v1 = valueGetter(row1);
       var v2 = valueGetter(row2);
       return sort === 'desc' ? -1 * sortComparator(v1, v2) : sortComparator(v1, v2);
     }, 0);
   };
-
   return comparator;
 };
-
 var getFilteredRows = function getFilteredRows(rows, filterModel, columnsWithDefaultColDef) {
   if (filterModel === undefined || filterModel.items.length === 0) {
     return rows;
   }
-
   var valueGetters = filterModel.items.map(function (_ref3) {
-    var columnField = _ref3.columnField;
-    return simplifiedValueGetter(columnField, columnsWithDefaultColDef.find(function (_ref4) {
-      var field = _ref4.field;
-      return field === columnField;
+    var field = _ref3.field;
+    return simplifiedValueGetter(field, columnsWithDefaultColDef.find(function (column) {
+      return column.field === field;
     }));
   });
   var filterFunctions = filterModel.items.map(function (filterItem) {
-    var columnField = filterItem.columnField,
-        operatorValue = filterItem.operatorValue;
-    var colDef = columnsWithDefaultColDef.find(function (_ref5) {
-      var field = _ref5.field;
-      return field === columnField;
+    var field = filterItem.field,
+      operator = filterItem.operator;
+    var colDef = columnsWithDefaultColDef.find(function (column) {
+      return column.field === field;
     });
-    var filterOperator = colDef.filterOperators.find(function (_ref6) {
-      var value = _ref6.value;
-      return operatorValue === value;
+    var filterOperator = colDef.filterOperators.find(function (_ref4) {
+      var value = _ref4.value;
+      return operator === value;
     });
     var parsedValue = filterItem.value;
-
     if (colDef.valueParser) {
       var _filterItem$value;
-
       var parser = colDef.valueParser;
       parsedValue = Array.isArray(filterItem.value) ? (_filterItem$value = filterItem.value) == null ? void 0 : _filterItem$value.map(function (x) {
         return parser(x);
       }) : parser(filterItem.value);
     }
-
     return filterOperator == null ? void 0 : filterOperator.getApplyFilterFn({
       filterItem: filterItem,
       value: parsedValue
     }, colDef);
   });
-
   if (filterModel.linkOperator === GridLinkOperator.Or) {
     return rows.filter(function (row) {
       return filterModel.items.some(function (_, index) {
@@ -113,7 +96,6 @@ var getFilteredRows = function getFilteredRows(rows, filterModel, columnsWithDef
       });
     });
   }
-
   return rows.filter(function (row) {
     return filterModel.items.every(function (_, index) {
       var value = valueGetters[index](row);
@@ -123,27 +105,24 @@ var getFilteredRows = function getFilteredRows(rows, filterModel, columnsWithDef
     });
   });
 };
+
 /**
  * Simulates server data loading
  */
-
-
 export var loadServerRows = function loadServerRows(rows, queryOptions, serverOptions, columnsWithDefaultColDef) {
   var _serverOptions$minDel = serverOptions.minDelay,
-      minDelay = _serverOptions$minDel === void 0 ? 100 : _serverOptions$minDel,
-      _serverOptions$maxDel = serverOptions.maxDelay,
-      maxDelay = _serverOptions$maxDel === void 0 ? 300 : _serverOptions$maxDel,
-      useCursorPagination = serverOptions.useCursorPagination;
-
+    minDelay = _serverOptions$minDel === void 0 ? 100 : _serverOptions$minDel,
+    _serverOptions$maxDel = serverOptions.maxDelay,
+    maxDelay = _serverOptions$maxDel === void 0 ? 300 : _serverOptions$maxDel,
+    useCursorPagination = serverOptions.useCursorPagination;
   if (maxDelay < minDelay) {
     throw new Error('serverOptions.minDelay is larger than serverOptions.maxDelay ');
   }
-
   var delay = Math.random() * (maxDelay - minDelay) + minDelay;
   var cursor = queryOptions.cursor,
-      _queryOptions$page = queryOptions.page,
-      page = _queryOptions$page === void 0 ? 0 : _queryOptions$page,
-      pageSize = queryOptions.pageSize;
+    _queryOptions$page = queryOptions.page,
+    page = _queryOptions$page === void 0 ? 0 : _queryOptions$page,
+    pageSize = queryOptions.pageSize;
   var nextCursor;
   var firstRowIndex;
   var lastRowIndex;
@@ -151,24 +130,21 @@ export var loadServerRows = function loadServerRows(rows, queryOptions, serverOp
   var rowComparator = getRowComparator(queryOptions.sortModel, columnsWithDefaultColDef);
   filteredRows = _toConsumableArray(filteredRows).sort(rowComparator);
   var totalRowCount = filteredRows.length;
-
   if (!pageSize) {
     firstRowIndex = 0;
     lastRowIndex = filteredRows.length;
   } else if (useCursorPagination) {
-    firstRowIndex = cursor ? filteredRows.findIndex(function (_ref7) {
-      var id = _ref7.id;
+    firstRowIndex = cursor ? filteredRows.findIndex(function (_ref5) {
+      var id = _ref5.id;
       return 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;
   }
-
   var response = {
     returnedRows: filteredRows.slice(firstRowIndex, lastRowIndex),
     nextCursor: nextCursor,
@@ -180,6 +156,7 @@ export var loadServerRows = function loadServerRows(rows, queryOptions, serverOp
     }, delay); // simulate network latency
   });
 };
+
 var DEFAULT_DATASET_OPTIONS = {
   dataSet: 'Commodity',
   rowLength: 100,
@@ -193,42 +170,34 @@ var DEFAULT_SERVER_OPTIONS = {
 };
 export var createFakeServer = function createFakeServer(dataSetOptions, serverOptions) {
   var dataSetOptionsWithDefault = _extends({}, DEFAULT_DATASET_OPTIONS, dataSetOptions);
-
   var serverOptionsWithDefault = _extends({}, DEFAULT_SERVER_OPTIONS, serverOptions);
-
   var columns = getColumnsFromOptions(dataSetOptionsWithDefault);
   var initialState = getInitialState(dataSetOptionsWithDefault, columns);
   var defaultColDef = getGridDefaultColumnTypes();
   var columnsWithDefaultColDef = columns.map(function (column) {
     return _extends({}, defaultColDef[column.type || 'string'], column);
   });
-
   var useQuery = function useQuery(queryOptions) {
     var _useDemoData = useDemoData(dataSetOptionsWithDefault),
-        rows = _useDemoData.data.rows,
-        dataGenerationIsLoading = _useDemoData.loading;
-
+      rows = _useDemoData.data.rows,
+      dataGenerationIsLoading = _useDemoData.loading;
     var queryOptionsRef = React.useRef(queryOptions);
-
     var _React$useState = React.useState({
-      pageInfo: {},
-      rows: []
-    }),
-        _React$useState2 = _slicedToArray(_React$useState, 2),
-        response = _React$useState2[0],
-        setResponse = _React$useState2[1];
-
+        pageInfo: {},
+        rows: []
+      }),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      response = _React$useState2[0],
+      setResponse = _React$useState2[1];
     var _React$useState3 = React.useState(dataGenerationIsLoading),
-        _React$useState4 = _slicedToArray(_React$useState3, 2),
-        isLoading = _React$useState4[0],
-        setIsLoading = _React$useState4[1];
-
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      isLoading = _React$useState4[0],
+      setIsLoading = _React$useState4[1];
     React.useEffect(function () {
       if (dataGenerationIsLoading) {
         // dataset is not ready
         return function () {};
       }
-
       queryOptionsRef.current = queryOptions;
       var active = true;
       setIsLoading(true);
@@ -240,27 +209,22 @@ export var createFakeServer = function createFakeServer(dataSetOptions, serverOp
       (function () {
         var _fetchData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
           var _yield$loadServerRows, returnedRows, nextCursor, totalRowCount, newRep;
-
           return _regeneratorRuntime.wrap(function _callee$(_context) {
             while (1) {
               switch (_context.prev = _context.next) {
                 case 0:
                   _context.next = 2;
                   return loadServerRows(rows, queryOptions, serverOptionsWithDefault, columnsWithDefaultColDef);
-
                 case 2:
                   _yield$loadServerRows = _context.sent;
                   returnedRows = _yield$loadServerRows.returnedRows;
                   nextCursor = _yield$loadServerRows.nextCursor;
                   totalRowCount = _yield$loadServerRows.totalRowCount;
-
                   if (active) {
                     _context.next = 8;
                     break;
                   }
-
                   return _context.abrupt("return");
-
                 case 8:
                   newRep = {
                     rows: returnedRows,
@@ -274,7 +238,6 @@ export var createFakeServer = function createFakeServer(dataSetOptions, serverOp
                     return isDeepEqual(prev, newRep) ? prev : newRep;
                   });
                   setIsLoading(false);
-
                 case 11:
                 case "end":
                   return _context.stop();
@@ -282,24 +245,22 @@ export var createFakeServer = function createFakeServer(dataSetOptions, serverOp
             }
           }, _callee);
         }));
-
         function fetchData() {
           return _fetchData.apply(this, arguments);
         }
-
         return fetchData;
       })()();
       return function () {
         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
     var effectShouldStart = queryOptionsRef.current !== queryOptions;
     return _extends({
       isLoading: isLoading || effectShouldStart
     }, response);
   };
-
   return {
     columns: columns,
     columnsWithDefaultColDef: columnsWithDefaultColDef,

package/legacy/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/legacy/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/legacy/renderer/renderCountry.js

@@ -34,14 +34,13 @@ var 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/legacy/renderer/renderEditCountry.js

@@ -1,5 +1,7 @@
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import * as React from 'react';
 import { useGridApiContext } from '@mui/x-data-grid-premium';
 import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';
@@ -22,27 +24,39 @@ var StyledAutocomplete = styled(Autocomplete)(function (_ref) {
     }
   }));
 });
-
 function EditCountry(props) {
   var id = props.id,
-      value = props.value,
-      field = props.field;
+    value = props.value,
+    field = props.field;
   var apiRef = useGridApiContext();
-  var handleChange = React.useCallback(function (event, newValue) {
-    apiRef.current.setEditCellValue({
-      id: id,
-      field: field,
-      value: newValue
-    }, event);
-
-    if (!event.key) {
-      apiRef.current.commitCellChange({
-        id: id,
-        field: field
-      });
-      apiRef.current.setCellMode(id, field, 'view');
-    }
-  }, [apiRef, field, id]);
+  var handleChange = React.useCallback( /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event, newValue) {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return apiRef.current.setEditCellValue({
+                id: id,
+                field: field,
+                value: newValue
+              }, event);
+            case 2:
+              apiRef.current.stopCellEditMode({
+                id: id,
+                field: field
+              });
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+    return function (_x, _x2) {
+      return _ref3.apply(this, arguments);
+    };
+  }(), [apiRef, field, id]);
   return /*#__PURE__*/_jsx(StyledAutocomplete, {
     value: value,
     onChange: handleChange,
@@ -80,13 +94,11 @@ 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/legacy/renderer/renderEditCurrency.js

@@ -1,5 +1,7 @@
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import * as React from 'react';
 import { useGridApiContext } from '@mui/x-data-grid-premium';
 import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';
@@ -22,27 +24,39 @@ var StyledAutocomplete = styled(Autocomplete)(function (_ref) {
     }
   }));
 });
-
 function EditCurrency(props) {
   var id = props.id,
-      value = props.value,
-      field = props.field;
+    value = props.value,
+    field = props.field;
   var apiRef = useGridApiContext();
-  var handleChange = React.useCallback(function (event, newValue) {
-    apiRef.current.setEditCellValue({
-      id: id,
-      field: field,
-      value: newValue.toUpperCase()
-    }, event);
-
-    if (!event.key) {
-      apiRef.current.commitCellChange({
-        id: id,
-        field: field
-      });
-      apiRef.current.setCellMode(id, field, 'view');
-    }
-  }, [apiRef, field, id]);
+  var handleChange = React.useCallback( /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event, newValue) {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return apiRef.current.setEditCellValue({
+                id: id,
+                field: field,
+                value: newValue.toUpperCase()
+              }, event);
+            case 2:
+              apiRef.current.stopCellEditMode({
+                id: id,
+                field: field
+              });
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+    return function (_x, _x2) {
+      return _ref3.apply(this, arguments);
+    };
+  }(), [apiRef, field, id]);
   return /*#__PURE__*/_jsx(StyledAutocomplete, {
     value: value,
     onChange: handleChange,
@@ -77,13 +91,11 @@ 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/legacy/renderer/renderEditIncoterm.js

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import * as React from 'react';
 import { useGridApiContext } from '@mui/x-data-grid-premium';
 import Select from '@mui/material/Select';
@@ -8,38 +10,47 @@ 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) {
   var id = props.id,
-      value = props.value,
-      field = props.field;
+    value = props.value,
+    field = props.field;
   var apiRef = useGridApiContext();
-
-  var handleChange = function handleChange(event) {
-    apiRef.current.setEditCellValue({
-      id: id,
-      field: field,
-      value: event.target.value
-    }, event);
-    apiRef.current.commitCellChange({
-      id: id,
-      field: field
-    });
-    apiRef.current.setCellMode(id, field, 'view');
-
-    if (event.key) {
-      // TODO v6: remove once we stop ignoring events fired from portals
-      var params = apiRef.current.getCellParams(id, field);
-      apiRef.current.publishEvent('cellNavigationKeyDown', params, event);
-    }
-  };
-
+  var handleChange = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return apiRef.current.setEditCellValue({
+                id: id,
+                field: field,
+                value: event.target.value
+              }, event);
+            case 2:
+              apiRef.current.stopCellEditMode({
+                id: id,
+                field: field
+              });
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+    return function handleChange(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
   var handleClose = function handleClose(event, reason) {
     if (reason === 'backdropClick') {
-      apiRef.current.setCellMode(id, field, 'view');
+      apiRef.current.stopCellEditMode({
+        id: id,
+        field: field
+      });
     }
   };
-
   return /*#__PURE__*/_jsx(Select, {
     value: value,
     onChange: handleChange,
@@ -77,7 +88,6 @@ function EditIncoterm(props) {
     })
   });
 }
-
 export function renderEditIncoterm(params) {
   return /*#__PURE__*/_jsx(EditIncoterm, _extends({}, params));
 }

package/legacy/renderer/renderEditProgress.js

@@ -6,12 +6,11 @@ import clsx from 'clsx';
 import { useGridApiContext } from '@mui/x-data-grid-premium';
 import Slider, { sliderClasses } from '@mui/material/Slider';
 import Tooltip from '@mui/material/Tooltip';
-import { debounce } from '@mui/material/utils';
+import { unstable_debounce as debounce } from '@mui/utils';
 import { alpha, styled } from '@mui/material/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 var StyledSlider = styled(Slider)(function (_ref) {
   var _ref2;
-
   var theme = _ref.theme;
   return _ref2 = {
     display: 'flex',
@@ -46,11 +45,10 @@ var StyledSlider = styled(Slider)(function (_ref) {
     backgroundColor: alpha('#000000', 0.2)
   }), _ref2;
 });
-
-var ValueLabelComponent = function ValueLabelComponent(props) {
+function ValueLabelComponent(props) {
   var children = props.children,
-      open = props.open,
-      value = props.value;
+    open = props.open,
+    value = props.value;
   return /*#__PURE__*/_jsx(Tooltip, {
     open: open,
     enterTouchDelay: 0,
@@ -58,18 +56,15 @@ var ValueLabelComponent = function ValueLabelComponent(props) {
     title: value,
     children: children
   });
-};
-
+}
 function EditProgress(props) {
   var id = props.id,
-      value = props.value,
-      field = props.field;
-
+    value = props.value,
+    field = props.field;
   var _React$useState = React.useState(Number(value)),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      valueState = _React$useState2[0],
-      setValueState = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    valueState = _React$useState2[0],
+    setValueState = _React$useState2[1];
   var apiRef = useGridApiContext();
   var updateCellEditProps = React.useCallback(function (newValue) {
     apiRef.current.setEditCellValue({
@@ -81,22 +76,18 @@ function EditProgress(props) {
   var debouncedUpdateCellEditProps = React.useMemo(function () {
     return debounce(updateCellEditProps, 60);
   }, [updateCellEditProps]);
-
   var handleChange = function handleChange(event, newValue) {
     setValueState(newValue);
     debouncedUpdateCellEditProps(newValue);
   };
-
   React.useEffect(function () {
     setValueState(Number(value));
   }, [value]);
-
   var handleRef = function handleRef(element) {
     if (element) {
       element.querySelector('[type="range"]').focus();
     }
   };
-
   return /*#__PURE__*/_jsx(StyledSlider, {
     ref: handleRef,
     classes: {
@@ -115,7 +106,6 @@ function EditProgress(props) {
     }
   });
 }
-
 export function renderEditProgress(params) {
   return /*#__PURE__*/_jsx(EditProgress, _extends({}, params));
 }