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

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

@@ -1,63 +1,48 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.addTreeDataOptionsToDemoData = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _randomGenerator = require("./random-generator");
-
 const addTreeDataOptionsToDemoData = (data, options = {}) => {
-  var _groupingCol$headerNa;
-
   const {
     averageChildren = 2,
     maxDepth = 1,
     groupingField
   } = options;
   const 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.');
   }
-
   const rowsByTreeDepth = {};
   const rowsCount = data.rows.length;
   const groupingCol = data.columns.find(col => 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 (let i = 0; i < rowsCount; i += 1) {
     const row = data.rows[i];
     const currentChunk = Math.floor(i * (averageChildren ** maxDepth - 1) / rowsCount) + 1;
     const 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(([depthStr, {
     rows
   }]) => {
@@ -65,35 +50,29 @@ const addTreeDataOptionsToDemoData = (data, options = {}) => {
     Object.values(rows).forEach(row => {
       const path = [];
       let previousRow = null;
-
       for (let k = depth; k >= 0; k -= 1) {
         let rowTemp;
-
         if (k === depth) {
           if (depth > 0) {
             row.parentIndex = Number((0, _randomGenerator.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;
     });
   });
   return (0, _extends2.default)({}, data, {
     groupingColDef: {
-      headerName: (_groupingCol$headerNa = groupingCol.headerName) != null ? _groupingCol$headerNa : groupingCol.field,
+      headerName: groupingCol.headerName ?? groupingCol.field,
       width: 250
     },
     getTreeDataPath: row => row.path,
     treeData: true
   });
 };
-
 exports.addTreeDataOptionsToDemoData = addTreeDataOptionsToDemoData;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-generator",
-  "version": "6.0.0-alpha.0",
+  "version": "6.0.0-alpha.10",
   "description": "Generate fake data for demo purposes only.",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -19,12 +19,12 @@
     "directory": "packages/grid/x-data-grid-generator"
   },
   "dependencies": {
-    "@babel/runtime": "^7.19.0",
-    "@mui/base": "^5.0.0-alpha.98",
-    "@mui/x-data-grid-premium": "6.0.0-alpha.0",
-    "chance": "^1.1.8",
+    "@babel/runtime": "^7.20.1",
+    "@mui/base": "^5.0.0-alpha.106",
+    "@mui/x-data-grid-premium": "6.0.0-alpha.10",
+    "chance": "^1.1.9",
     "clsx": "^1.2.1",
-    "lru-cache": "^7.14.0"
+    "lru-cache": "^7.14.1"
   },
   "peerDependencies": {
     "@mui/icons-material": "^5.4.1",
@@ -35,7 +35,7 @@
     "<rootDir>/src/setupTests.js"
   ],
   "engines": {
-    "node": ">=12.0.0"
+    "node": ">=14.0.0"
   },
   "private": false,
   "module": "./index.js",

package/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/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/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));
 }

package/renderer/renderEditCurrency.js

@@ -21,7 +21,6 @@ const StyledAutocomplete = styled(Autocomplete)(({
     }
   })
 }));
-
 function EditCurrency(props) {
   const {
     id,
@@ -29,20 +28,16 @@ function EditCurrency(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.toUpperCase()
     }, 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,
@@ -75,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/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,32 +15,25 @@ function EditIncoterm(props) {
     field
   } = props;
   const apiRef = useGridApiContext();
-
-  const handleChange = event => {
-    apiRef.current.setEditCellValue({
+  const handleChange = async event => {
+    await apiRef.current.setEditCellValue({
       id,
       field,
       value: event.target.value
     }, event);
-    apiRef.current.commitCellChange({
+    apiRef.current.stopCellEditMode({
       id,
       field
     });
-    apiRef.current.setCellMode(id, field, 'view');
-
-    if (event.key) {
-      // TODO v6: remove once we stop ignoring events fired from portals
-      const params = apiRef.current.getCellParams(id, field);
-      apiRef.current.publishEvent('cellNavigationKeyDown', params, event);
-    }
   };
-
   const handleClose = (event, reason) => {
     if (reason === 'backdropClick') {
-      apiRef.current.setCellMode(id, field, 'view');
+      apiRef.current.stopCellEditMode({
+        id,
+        field
+      });
     }
   };
-
   return /*#__PURE__*/_jsx(Select, {
     value: value,
     onChange: handleChange,
@@ -79,7 +71,6 @@ function EditIncoterm(props) {
     })
   });
 }
-
 export function renderEditIncoterm(params) {
   return /*#__PURE__*/_jsx(EditIncoterm, _extends({}, params));
 }

package/renderer/renderEditProgress.js

@@ -4,7 +4,7 @@ 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";
 const StyledSlider = styled(Slider)(({
@@ -44,8 +44,7 @@ const StyledSlider = styled(Slider)(({
     backgroundColor: alpha('#000000', 0.2)
   }
 }));
-
-const ValueLabelComponent = props => {
+function ValueLabelComponent(props) {
   const {
     children,
     open,
@@ -58,8 +57,7 @@ const ValueLabelComponent = props => {
     title: value,
     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/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,30 +12,22 @@ function EditRating(props) {
     field
   } = props;
   const apiRef = useGridApiContext();
-
-  const handleChange = event => {
-    apiRef.current.setEditCellValue({
+  const handleChange = async event => {
+    await apiRef.current.setEditCellValue({
       id,
       field,
       value: Number(event.target.value)
-    }, event); // Check if the event is not from the keyboard
-    // https://github.com/facebook/react/issues/7407
-
-    if (event.nativeEvent.clientX !== 0 && event.nativeEvent.clientY !== 0) {
-      apiRef.current.commitCellChange({
-        id,
-        field
-      });
-      apiRef.current.setCellMode(id, field, 'view');
-    }
+    }, event);
+    apiRef.current.stopCellEditMode({
+      id,
+      field
+    });
   };
-
   const handleRef = element => {
     if (element) {
       element.querySelector(`input[value="${value}"]`).focus();
     }
   };
-
   return /*#__PURE__*/_jsxs(Box, {
     sx: {
       display: 'flex',
@@ -57,7 +48,6 @@ function EditRating(props) {
     }), Number(value)]
   });
 }
-
 export function renderEditRating(params) {
   return /*#__PURE__*/_jsx(EditRating, _extends({}, params));
 }

package/renderer/renderEditStatus.js

@@ -12,7 +12,6 @@ import DoneIcon from '@mui/icons-material/Done';
 import { STATUS_OPTIONS } from '../services/static-data';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 function EditStatus(props) {
   const {
     id,
@@ -21,14 +20,12 @@ function EditStatus(props) {
   } = props;
   const rootProps = useGridRootProps();
   const apiRef = useGridApiContext();
-
   const handleChange = async event => {
     const isValid = await apiRef.current.setEditCellValue({
       id,
       field,
       value: event.target.value
     });
-
     if (isValid && rootProps.editMode === GridEditModes.Cell) {
       apiRef.current.stopCellEditMode({
         id,
@@ -37,7 +34,6 @@ function EditStatus(props) {
       });
     }
   };
-
   const handleClose = (event, reason) => {
     if (reason === 'backdropClick') {
       apiRef.current.stopCellEditMode({
@@ -47,7 +43,6 @@ function EditStatus(props) {
       });
     }
   };
-
   return /*#__PURE__*/_jsx(Select, {
     value: value,
     onChange: handleChange,
@@ -67,7 +62,6 @@ function EditStatus(props) {
     open: true,
     children: STATUS_OPTIONS.map(option => {
       let IconComponent = null;
-
       if (option === 'Rejected') {
         IconComponent = ReportProblemIcon;
       } else if (option === 'Open') {
@@ -77,13 +71,10 @@ function EditStatus(props) {
       } else if (option === 'Filled') {
         IconComponent = DoneIcon;
       }
-
       let label = option;
-
       if (option === 'PartiallyFilled') {
         label = 'Partially Filled';
       }
-
       return /*#__PURE__*/_jsxs(MenuItem, {
         value: option,
         children: [/*#__PURE__*/_jsx(ListItemIcon, {
@@ -103,7 +94,6 @@ function EditStatus(props) {
     })
   });
 }
-
 export function renderEditStatus(params) {
   return /*#__PURE__*/_jsx(EditStatus, _extends({}, params));
 }

package/renderer/renderEmail.js

@@ -3,7 +3,6 @@ import { DemoLink } from './renderLink';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function renderEmail(params) {
   var _params$value;
-
   const email = (_params$value = params.value) != null ? _params$value : '';
   return /*#__PURE__*/_jsx(DemoLink, {
     href: `mailto:${email}`,

package/renderer/renderIncoterm.js

@@ -8,11 +8,9 @@ const Incoterm = /*#__PURE__*/React.memo(function Incoterm(props) {
   const {
     value
   } = props;
-
   if (!value) {
     return null;
   }
-
   const valueStr = value.toString();
   const tooltip = valueStr.slice(valueStr.indexOf('(') + 1, valueStr.indexOf(')'));
   const code = valueStr.slice(0, valueStr.indexOf('(')).trim();

package/renderer/renderLink.js

@@ -12,7 +12,6 @@ export const DemoLink = /*#__PURE__*/React.memo(function DemoLink(props) {
     event.preventDefault();
     event.stopPropagation();
   };
-
   return /*#__PURE__*/_jsx(Link, {
     tabIndex: props.tabIndex,
     onClick: handleClick,
@@ -21,10 +20,9 @@ export const DemoLink = /*#__PURE__*/React.memo(function DemoLink(props) {
   });
 });
 export function renderLink(params) {
-  if (params.rowNode.isAutoGenerated || !params.value) {
+  if (params.value == null) {
     return '';
   }
-
   return /*#__PURE__*/_jsx(DemoLink, {
     href: params.value,
     tabIndex: params.tabIndex,

package/renderer/renderPnl.js

@@ -14,11 +14,9 @@ const Value = styled('div')(({
     color: theme.palette.mode === 'light' ? theme.palette.error.dark : theme.palette.error.light
   }
 }));
-
 function pnlFormatter(value) {
   return value < 0 ? `(${Math.abs(value).toLocaleString()})` : value.toLocaleString();
 }
-
 const Pnl = /*#__PURE__*/React.memo(function Pnl(props) {
   const {
     value
@@ -32,7 +30,6 @@ export function renderPnl(params) {
   if (params.value == null) {
     return '';
   }
-
   return /*#__PURE__*/_jsx(Pnl, {
     value: params.value
   });

package/renderer/renderProgress.js

@@ -6,7 +6,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const Root = styled('div')(({
   theme
 }) => ({
-  border: `1px solid ${theme.palette.divider}`,
+  border: `1px solid ${(theme.vars || theme).palette.divider}`,
   position: 'relative',
   overflow: 'hidden',
   width: '100%',
@@ -51,14 +51,13 @@ const ProgressBar = /*#__PURE__*/React.memo(function ProgressBar(props) {
 export function renderProgress(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 a progress bar.
-
+  }
 
+  // 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 a progress bar.
   if (params.aggregation && !params.aggregation.hasCellUnit) {
     return null;
   }
-
   return /*#__PURE__*/_jsx(ProgressBar, {
     value: params.value
   });

package/renderer/renderRating.js

@@ -26,14 +26,13 @@ const RatingValue = /*#__PURE__*/React.memo(function RatingValue(props) {
 export function renderRating(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(RatingValue, {
     value: params.value
   });

package/renderer/renderStatus.js

@@ -14,20 +14,20 @@ const StyledChip = styled(Chip)(({
     color: 'inherit'
   },
   '&.Open': {
-    color: theme.palette.info.dark,
-    border: `1px solid ${theme.palette.info.main}`
+    color: (theme.vars || theme).palette.info.dark,
+    border: `1px solid ${(theme.vars || theme).palette.info.main}`
   },
   '&.Filled': {
-    color: theme.palette.success.dark,
-    border: `1px solid ${theme.palette.success.main}`
+    color: (theme.vars || theme).palette.success.dark,
+    border: `1px solid ${(theme.vars || theme).palette.success.main}`
   },
   '&.PartiallyFilled': {
-    color: theme.palette.warning.dark,
-    border: `1px solid ${theme.palette.warning.main}`
+    color: (theme.vars || theme).palette.warning.dark,
+    border: `1px solid ${(theme.vars || theme).palette.warning.main}`
   },
   '&.Rejected': {
-    color: theme.palette.error.dark,
-    border: `1px solid ${theme.palette.error.main}`
+    color: (theme.vars || theme).palette.error.dark,
+    border: `1px solid ${(theme.vars || theme).palette.error.main}`
   }
 }));
 const Status = /*#__PURE__*/React.memo(props => {
@@ -35,7 +35,6 @@ const Status = /*#__PURE__*/React.memo(props => {
     status
   } = props;
   let icon = null;
-
   if (status === 'Rejected') {
     icon = /*#__PURE__*/_jsx(ReportProblemIcon, {
       className: "icon"
@@ -53,13 +52,10 @@ const Status = /*#__PURE__*/React.memo(props => {
       className: "icon"
     });
   }
-
   let label = status;
-
   if (status === 'PartiallyFilled') {
     label = 'Partially Filled';
   }
-
   return /*#__PURE__*/_jsx(StyledChip, {
     className: status,
     icon: icon,
@@ -69,10 +65,9 @@ const Status = /*#__PURE__*/React.memo(props => {
   });
 });
 export function renderStatus(params) {
-  if (params.rowNode.isAutoGenerated || params.value == null) {
+  if (params.value == null) {
     return '';
   }
-
   return /*#__PURE__*/_jsx(Status, {
     status: params.value
   });