@mui/x-data-grid-premium 6.0.0-beta.4 → 6.0.0-beta.5

package/CHANGELOG.md

@@ -3,6 +3,60 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.0.0-beta.5
+
+_Feb 23, 2023_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- ⚡️ Add web worker support for Excel export (#7770) @m4theushw
+- 🎁 Add a button to remove all filters on the data grid filter panel (#7326) @MBilalShafi
+- ⚙️ Allow to customize options label and value in the data grid `singleSelect` column (#7684) @m4theushw
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v6.0.0-beta.5` / `@mui/x-data-grid-pro@v6.0.0-beta.5` / `@mui/x-data-grid-premium@v6.0.0-beta.5`
+
+#### Changes
+
+- [DataGrid] Allow to customize label and value for `singleSelect` (#7684) @m4theushw
+- [DataGrid] Fix `ownerState` being `undefined` in theme style overrides (#7964) @lolaignatova
+- [DataGrid] Introduce `slots` and deprecate `components` (#7882) @MBilalShafi
+- [DataGridPro] Add `Remove All` option in filter panel (#7326) @MBilalShafi
+- [DataGridPremium] Add web worker support for Excel export (#7770) @m4theushw
+
+### `@mui/x-date-pickers@v6.0.0-beta.5` / `@mui/x-date-pickers-pro@v6.0.0-beta.5`
+
+#### Breaking changes
+
+- The `MuiDateSectionName` type was renamed to `FieldSectionType`
+
+#### Changes
+
+- [fields] Fix multi input range fields validation when uncontrolled (#8002) @LukasTy
+- [fields] Fix single input time range fields slot props (#7988) @LukasTy
+- [fields] Make the `ArrowUp` / `ArrowDown` edition only impact the active section (#7993) @flaviendelangle
+- [fields] Fix single input range fields clearing (#7995) @flaviendelangle
+- [fields] Clean the section object (#8009) @flaviendelangle
+- [pickers] Fix `textField` slot `error` prop propagation (#7987) @LukasTy
+
+### `@mui/x-codemod@v6.0.0-beta.5`
+
+#### Changes
+
+- [codemod] Add `apiRef.current.getRowIndex` to `DataGrid` renaming codemod (#8001) @MBilalShafi
+
+### Docs
+
+- [docs] Fine tune range fields demos (#7992) @LukasTy
+- [docs] Fix a few scroll issues on mobile (#7900) @oliviertassinari
+- [docs] Fix inconsistency in the data grid migration guide (#7963) @MBilalShafi
+
+### Core
+
+- [core] Fix `moment` locale on adapter tests (#8020) @flaviendelangle
+- [test] Support all adapters on the field tests about the formats (#7996) @flaviendelangle
+
 ## 6.0.0-beta.4
 
 _Feb 16, 2023_
@@ -2179,6 +2233,26 @@ You can find more information about the new api, including how to set those tran
 - [test] Skip tests for column pinning and dynamic row height (#5997) @m4theushw
 - [website] Improve security header @oliviertassinari
 
+## 5.17.25
+
+_Feb 23, 2023_
+
+We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.25` / `@mui/x-data-grid-pro@v5.17.25` / `@mui/x-data-grid-premium@v5.17.25`
+
+#### Changes
+
+- [DataGrid] Fix `ownerState` being `undefined` in theme style overrides (#7757) @lolaignatova
+
+### `@mui/x-date-pickers@v5.0.20` / `@mui/x-date-pickers-pro@v5.0.20`
+
+#### Changes
+
+- [DateTimePicker] Ensure toolbar `viewType` is correctly updated (#7942) @LukasTy
+
 ## 5.17.24
 
 _Feb 16, 2023_

package/DataGridPremium/DataGridPremium.js

@@ -130,10 +130,12 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   columnVisibilityModel: PropTypes.object,
   /**
    * Overrideable components.
+   * @deprecated Use the `slots` prop instead.
    */
   components: PropTypes.object,
   /**
    * Overrideable components props dynamically passed to the component at rendering.
+   * @deprecated Use the `slotProps` prop instead.
    */
   componentsProps: PropTypes.object,
   /**
@@ -552,6 +554,11 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onDetailPanelExpandedRowIdsChange: PropTypes.func,
+  /**
+   * Callback fired when the state of the Excel export changes.
+   * @param {string} inProgress Indicates if the task is in progress.
+   */
+  onExcelExportStateChange: PropTypes.func,
   /**
    * Callback fired when rowCount is set and the next batch of virtualized rows is rendered.
    * @param {GridFetchRowsParams} params With all properties from [[GridFetchRowsParams]].
@@ -825,6 +832,14 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @default false
    */
   showColumnVerticalBorder: PropTypes.bool,
+  /**
+   * Overrideable components props dynamically passed to the component at rendering.
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overrideable components.
+   */
+  slots: PropTypes.object,
   /**
    * Sorting can be processed on the server or client-side.
    * Set it to 'client' if you would like to handle sorting on the client-side.

package/DataGridPremium/useDataGridPremiumComponent.js

@@ -80,7 +80,7 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
   useGridColumnMenu(privateApiRef);
   useGridCsvExport(privateApiRef);
   useGridPrintExport(privateApiRef, props);
-  useGridExcelExport(privateApiRef);
+  useGridExcelExport(privateApiRef, props);
   useGridClipboard(privateApiRef);
   useGridDimensions(privateApiRef, props);
   useGridEvents(privateApiRef, props);

package/DataGridPremium/useDataGridPremiumProps.js

@@ -1,7 +1,10 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["components", "componentsProps"];
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
 import { DATA_GRID_PRO_PROPS_DEFAULT_VALUES, GRID_DEFAULT_LOCALE_TEXT } from '@mui/x-data-grid-pro';
+import { computeSlots, uncapitalizeObjectKeys } from '@mui/x-data-grid-pro/internals';
 import { GRID_AGGREGATION_FUNCTIONS } from '../hooks/features/aggregation';
 import { DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS } from '../constants/dataGridPremiumDefaultSlotsComponents';
 
@@ -17,26 +20,30 @@ export const DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PRO
   aggregationRowsScope: 'filtered',
   getAggregationPosition: groupNode => groupNode.depth === -1 ? 'footer' : 'inline'
 });
+const defaultSlots = uncapitalizeObjectKeys(DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS);
 export const useDataGridPremiumProps = inProps => {
-  const themedProps = useThemeProps({
-    props: inProps,
-    name: 'MuiDataGrid'
-  });
+  const _useThemeProps = useThemeProps({
+      props: inProps,
+      name: 'MuiDataGrid'
+    }),
+    {
+      components,
+      componentsProps
+    } = _useThemeProps,
+    themedProps = _objectWithoutPropertiesLoose(_useThemeProps, _excluded);
   const localeText = React.useMemo(() => _extends({}, GRID_DEFAULT_LOCALE_TEXT, themedProps.localeText), [themedProps.localeText]);
-  const components = React.useMemo(() => {
-    const overrides = themedProps.components;
-    if (!overrides) {
-      return _extends({}, DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS);
-    }
-    const mergedComponents = {};
-    Object.entries(DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS).forEach(([key, defaultComponent]) => {
-      mergedComponents[key] = overrides[key] === undefined ? defaultComponent : overrides[key];
-    });
-    return mergedComponents;
-  }, [themedProps.components]);
-  return React.useMemo(() => _extends({}, DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES, themedProps, {
-    localeText,
+  const slots = React.useMemo(() => computeSlots({
+    defaultSlots,
     components,
-    signature: 'DataGridPremium'
-  }), [themedProps, localeText, components]);
+    slots: themedProps.slots
+  }), [components, themedProps.slots]);
+  return React.useMemo(() => {
+    var _themedProps$slotProp;
+    return _extends({}, DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES, themedProps, {
+      slotProps: (_themedProps$slotProp = themedProps.slotProps) != null ? _themedProps$slotProp : componentsProps,
+      localeText,
+      slots,
+      signature: 'DataGridPremium'
+    });
+  }, [themedProps, componentsProps, localeText, slots]);
 };

package/components/GridAggregationHeader.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import Box from '@mui/material/Box';
@@ -57,10 +58,10 @@ function GridAggregationHeader(props) {
   } = props;
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const ownerState = {
+  const ownerState = _extends({}, rootProps, {
     classes: rootProps.classes,
     colDef
-  };
+  });
   const classes = useUtilityClasses(ownerState);
   if (!aggregation) {
     return null;

package/components/GridColumnMenuAggregationItem.js

@@ -59,7 +59,7 @@ function GridColumnMenuAggregationItem(props) {
   return /*#__PURE__*/_jsxs(MenuItem, {
     disableRipple: true,
     children: [/*#__PURE__*/_jsx(ListItemIcon, {
-      children: /*#__PURE__*/_jsx(rootProps.components.ColumnMenuAggregationIcon, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuAggregationIcon, {
         fontSize: "small"
       })
     }), /*#__PURE__*/_jsx(ListItemText, {

package/components/GridColumnMenuRowGroupItem.js

@@ -29,7 +29,7 @@ function GridColumnMenuRowGroupItem(props) {
     return /*#__PURE__*/_jsxs(MenuItem, {
       onClick: ungroupColumn,
       children: [/*#__PURE__*/_jsx(ListItemIcon, {
-        children: /*#__PURE__*/_jsx(rootProps.components.ColumnMenuUngroupIcon, {
+        children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuUngroupIcon, {
           fontSize: "small"
         })
       }), /*#__PURE__*/_jsx(ListItemText, {

package/components/GridColumnMenuRowUngroupItem.js

@@ -35,7 +35,7 @@ function GridColumnMenuRowUngroupItem(props) {
     return /*#__PURE__*/_jsxs(MenuItem, {
       onClick: ungroupColumn,
       children: [/*#__PURE__*/_jsx(ListItemIcon, {
-        children: /*#__PURE__*/_jsx(rootProps.components.ColumnMenuUngroupIcon, {
+        children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuUngroupIcon, {
           fontSize: "small"
         })
       }), /*#__PURE__*/_jsx(ListItemText, {
@@ -46,7 +46,7 @@ function GridColumnMenuRowUngroupItem(props) {
   return /*#__PURE__*/_jsxs(MenuItem, {
     onClick: groupColumn,
     children: [/*#__PURE__*/_jsx(ListItemIcon, {
-      children: /*#__PURE__*/_jsx(rootProps.components.ColumnMenuGroupIcon, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuGroupIcon, {
         fontSize: "small"
       })
     }), /*#__PURE__*/_jsx(ListItemText, {

package/components/GridExcelExportMenuItem.js

@@ -39,7 +39,8 @@ process.env.NODE_ENV !== "production" ? GridExcelExportMenuItem.propTypes = {
     getRowsToExport: PropTypes.func,
     includeColumnGroupsHeaders: PropTypes.bool,
     includeHeaders: PropTypes.bool,
-    valueOptionsSheetName: PropTypes.string
+    valueOptionsSheetName: PropTypes.string,
+    worker: PropTypes.func
   })
 } : void 0;
 export { GridExcelExportMenuItem };

package/components/GridFooterCell.js

@@ -33,9 +33,7 @@ function GridFooterCell(props) {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootProps = useGridRootProps();
-  const ownerState = {
-    classes: rootProps.classes
-  };
+  const ownerState = rootProps;
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(GridFooterCellRoot, _extends({
     ownerState: ownerState,

package/components/GridGroupingCriteriaCell.js

@@ -18,7 +18,7 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 export function GridGroupingCriteriaCell(props) {
-  var _filteredDescendantCo, _rootProps$components;
+  var _filteredDescendantCo, _rootProps$slotProps;
   const {
     id,
     field,
@@ -34,7 +34,7 @@ export function GridGroupingCriteriaCell(props) {
   const classes = useUtilityClasses(ownerState);
   const filteredDescendantCountLookup = useGridSelector(apiRef, gridFilteredDescendantCountLookupSelector);
   const filteredDescendantCount = (_filteredDescendantCo = filteredDescendantCountLookup[rowNode.id]) != null ? _filteredDescendantCo : 0;
-  const Icon = rowNode.childrenExpanded ? rootProps.components.GroupingCriteriaCollapseIcon : rootProps.components.GroupingCriteriaExpandIcon;
+  const Icon = rowNode.childrenExpanded ? rootProps.slots.groupingCriteriaCollapseIcon : rootProps.slots.groupingCriteriaExpandIcon;
   const handleKeyDown = event => {
     if (event.key === ' ') {
       // We call event.stopPropagation to avoid unfolding the row and also scrolling to bottom
@@ -69,13 +69,13 @@ export function GridGroupingCriteriaCell(props) {
     },
     children: [/*#__PURE__*/_jsx("div", {
       className: classes.toggle,
-      children: filteredDescendantCount > 0 && /*#__PURE__*/_jsx(rootProps.components.BaseIconButton, _extends({
+      children: filteredDescendantCount > 0 && /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
         size: "small",
         onClick: handleClick,
         onKeyDown: handleKeyDown,
         tabIndex: -1,
         "aria-label": rowNode.childrenExpanded ? apiRef.current.getLocaleText('treeDataCollapse') : apiRef.current.getLocaleText('treeDataExpand')
-      }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseIconButton, {
+      }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
         children: /*#__PURE__*/_jsx(Icon, {
           fontSize: "inherit"
         })

package/hooks/features/aggregation/useGridAggregationPreProcessors.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
 import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
-export declare const useGridAggregationPreProcessors: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, 'aggregationFunctions' | 'disableAggregation' | 'getAggregationPosition' | 'componentsProps' | 'components'>) => void;
+export declare const useGridAggregationPreProcessors: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, 'aggregationFunctions' | 'disableAggregation' | 'getAggregationPosition' | 'slotProps' | 'slots'>) => void;

package/hooks/features/export/gridExcelExportInterface.d.ts

@@ -13,6 +13,11 @@ export interface ColumnsStylesInterface {
  * The options to apply on the Excel export.
  */
 export interface GridExcelExportOptions extends GridFileExportOptions {
+    /**
+     * Function to return the Worker instance to be called.
+     * @returns {() => Worker} A Worker instance.
+     */
+    worker?: () => Worker;
     /**
      * Name given to the worksheet containing the columns valueOptions.
      * valueOptions are added to this worksheet if they are provided as an array.
@@ -20,12 +25,16 @@ export interface GridExcelExportOptions extends GridFileExportOptions {
     valueOptionsSheetName?: string;
     /**
      * Method called before adding the rows to the workbook.
+     * Not supported when `worker` is set.
+     * To use with web workers, use the option in `setupExcelExportWebWorker`.
      * @param {GridExceljsProcessInput} processInput object containing the workbook and the worksheet.
      * @returns {Promise<void>} A promise which resolves after processing the input.
      * */
     exceljsPreProcess?: (processInput: GridExceljsProcessInput) => Promise<void>;
     /**
      * Method called after adding the rows to the workbook.
+     * Not supported when `worker` is set.
+     * To use with web workers, use the option in `setupExcelExportWebWorker`.
      * @param {GridExceljsProcessInput} processInput object containing the workbook and the worksheet.
      * @returns {Promise<void>} A promise which resolves after processing the input.
      * */

package/hooks/features/export/index.d.ts

@@ -1 +1,2 @@
 export * from './gridExcelExportInterface';
+export { setupExcelExportWebWorker } from './serializer/excelSerializer';

package/hooks/features/export/index.js

@@ -1 +1,2 @@
-export * from './gridExcelExportInterface';
+export * from './gridExcelExportInterface';
+export { setupExcelExportWebWorker } from './serializer/excelSerializer';

package/hooks/features/export/serializer/excelSerializer.d.ts

@@ -1,8 +1,47 @@
 import type * as Excel from 'exceljs';
-import { GridRowId } from '@mui/x-data-grid-pro';
-import { GridStateColDef } from '@mui/x-data-grid/internals';
-import { GridExceljsProcessInput, ColumnsStylesInterface } from '../gridExcelExportInterface';
+import { GridRowId, GridColDef } from '@mui/x-data-grid-pro';
+import { GridStateColDef, GridColumnGroupLookup } from '@mui/x-data-grid/internals';
+import { GridExceljsProcessInput, ColumnsStylesInterface, GridExcelExportOptions } from '../gridExcelExportInterface';
 import { GridPrivateApiPremium } from '../../../../models/gridApiPremium';
+interface SerializedRow {
+    row: Record<string, undefined | number | boolean | string | Date>;
+    dataValidation: Record<string, Excel.DataValidation>;
+    outlineLevel: number;
+    mergedCells: {
+        leftIndex: number;
+        rightIndex: number;
+    }[];
+}
+export declare const serializeRow: (id: GridRowId, columns: GridStateColDef[], api: GridPrivateApiPremium, defaultValueOptionsFormulae: {
+    [field: string]: {
+        address: string;
+    };
+}) => SerializedRow;
+export declare const serializeColumn: (column: GridColDef, columnsStyles: ColumnsStylesInterface) => {
+    key: string;
+    headerText: string;
+    width: number;
+    style: {
+        numFmt: string;
+        font: Partial<Excel.Font>;
+        alignment: Partial<Excel.Alignment>;
+        protection: Partial<Excel.Protection>;
+        border: Partial<Excel.Borders>;
+        fill: Excel.Fill;
+    };
+};
+type SerializedColumns = Array<{
+    key: string;
+    width: number;
+    style: Excel.Style;
+    headerText: string;
+}>;
+export declare function serializeColumns(columns: GridStateColDef[], styles: ColumnsStylesInterface): SerializedColumns;
+type ValueOptionsData = Record<string, {
+    values: (string | number)[];
+    address: string;
+}>;
+export declare function getDataForValueOptionsSheet(columns: GridStateColDef[], valueOptionsSheetName: string, api: GridPrivateApiPremium): Promise<ValueOptionsData>;
 interface BuildExcelOptions {
     columns: GridStateColDef[];
     rowIds: GridRowId[];
@@ -14,4 +53,14 @@ interface BuildExcelOptions {
     columnsStyles?: ColumnsStylesInterface;
 }
 export declare function buildExcel(options: BuildExcelOptions, api: GridPrivateApiPremium): Promise<Excel.Workbook>;
+export interface ExcelExportInitEvent {
+    serializedColumns: SerializedColumns;
+    serializedRows: SerializedRow[];
+    valueOptionsSheetName: string;
+    columnGroupPaths: Record<string, string[]>;
+    columnGroupDetails: GridColumnGroupLookup;
+    valueOptionsData: ValueOptionsData;
+    options: Omit<GridExcelExportOptions, 'exceljsPreProcess' | 'exceljsPostProcess' | 'columnsStyles' | 'valueOptionsSheetName'>;
+}
+export declare function setupExcelExportWebWorker(workerOptions?: Pick<GridExcelExportOptions, 'exceljsPostProcess' | 'exceljsPreProcess'>): void;
 export {};