@mui/x-data-grid 6.3.1 → 6.5.0

package/models/api/gridHeaderFilteringApi.d.ts

@@ -0,0 +1,30 @@
+import { GridColDef } from '../colDef';
+import { GridHeaderFilteringState } from '../gridHeaderFilteringModel';
+export interface GridHeaderFilteringPrivateApi {
+    /**
+     * Internal function to set the header filter state.
+     * @param {Partial<GridHeaderFilteringState>} headerFilterState The field to be edited.
+     * @ignore - do not document.
+     */
+    setHeaderFilterState: (headerFilterState: Partial<GridHeaderFilteringState>) => void;
+}
+export interface GridHeaderFilteringApi {
+    /**
+     * Puts the cell corresponding to the given row id and field into edit mode.
+     * @param {GridColDef['field']} field The field of the header filter to put in edit mode.
+     */
+    startHeaderFilterEditMode: (field: GridColDef['field']) => void;
+    /**
+     * Stops the edit mode for the current field.
+     */
+    stopHeaderFilterEditMode: () => void;
+    /**
+     * Opens the header filter menu for the given field.
+     * @param {GridColDef['field']} field The field of the header filter to open menu for.
+     */
+    showHeaderFilterMenu: (field: GridColDef['field']) => void;
+    /**
+     * Hides the header filter menu.
+     */
+    hideHeaderFilterMenu: () => void;
+}

package/models/api/gridLocaleTextApi.d.ts

@@ -54,6 +54,31 @@ export interface GridLocaleText {
     filterOperatorIsEmpty: string;
     filterOperatorIsNotEmpty: string;
     filterOperatorIsAnyOf: string;
+    'filterOperator=': string;
+    'filterOperator!=': string;
+    'filterOperator>': string;
+    'filterOperator>=': string;
+    'filterOperator<': string;
+    'filterOperator<=': string;
+    headerFilterOperatorContains: string;
+    headerFilterOperatorEquals: string;
+    headerFilterOperatorStartsWith: string;
+    headerFilterOperatorEndsWith: string;
+    headerFilterOperatorIs: string;
+    headerFilterOperatorNot: string;
+    headerFilterOperatorAfter: string;
+    headerFilterOperatorOnOrAfter: string;
+    headerFilterOperatorBefore: string;
+    headerFilterOperatorOnOrBefore: string;
+    headerFilterOperatorIsEmpty: string;
+    headerFilterOperatorIsNotEmpty: string;
+    headerFilterOperatorIsAnyOf: string;
+    'headerFilterOperator=': string;
+    'headerFilterOperator!=': string;
+    'headerFilterOperator>': string;
+    'headerFilterOperator>=': string;
+    'headerFilterOperator<': string;
+    'headerFilterOperator<=': string;
     filterValueAny: string;
     filterValueTrue: string;
     filterValueFalse: string;

package/models/api/index.d.ts

@@ -16,7 +16,6 @@ export * from './gridColumnMenuApi';
 export * from './gridPreferencesPanelApi';
 export * from './gridPrintExportApi';
 export * from './gridDisableVirtualizationApi';
-export * from './gridClipboardApi';
 export * from './gridCallbackDetails';
 export * from './gridScrollApi';
 export * from './gridVirtualScrollerApi';

package/models/api/index.js

@@ -11,7 +11,6 @@ export * from './gridColumnMenuApi';
 export * from './gridPreferencesPanelApi';
 export * from './gridPrintExportApi';
 export * from './gridDisableVirtualizationApi';
-export * from './gridClipboardApi';
 export * from './gridCallbackDetails';
 export * from './gridScrollApi';
 export * from './gridVirtualScrollerApi';

package/models/events/gridEventLookup.d.ts

@@ -189,6 +189,32 @@ export interface GridColumnHeaderEventLookup {
         params: GridColumnOrderChangeParams;
     };
 }
+export interface GridHeaderFilterEventLookup {
+    /**
+     * Fired when a column header filter is clicked
+     * @ignore - do not document.
+     */
+    headerFilterClick: {
+        params: GridColumnHeaderParams;
+        event: React.MouseEvent<HTMLElement>;
+    };
+    /**
+     * Fired when a key is pressed in a column header filter. It's mapped to the `keydown` DOM event.
+     * @ignore - do not document.
+     */
+    headerFilterKeyDown: {
+        params: GridColumnHeaderParams;
+        event: React.KeyboardEvent<HTMLElement>;
+    };
+    /**
+     * Fired when a mouse is pressed in a column header filter. It's mapped to the `mousedown` DOM event.
+     * @ignore - do not document.
+     */
+    headerFilterMouseDown: {
+        params: GridColumnHeaderParams;
+        event: React.KeyboardEvent<HTMLElement>;
+    };
+}
 export interface GridColumnGroupHeaderEventLookup {
     /**
      * Fired when a key is pressed in a column group header. It's mapped do the `keydown` DOM event.
@@ -318,7 +344,7 @@ export interface GridControlledStateReasonLookup {
     filter: 'upsertFilterItem' | 'upsertFilterItems' | 'deleteFilterItem' | 'changeLogicOperator' | 'restoreState';
     pagination: 'setPaginationModel' | 'stateRestorePreProcessing';
 }
-export interface GridEventLookup extends GridRowEventLookup, GridColumnHeaderEventLookup, GridColumnGroupHeaderEventLookup, GridCellEventLookup, GridControlledStateEventLookup {
+export interface GridEventLookup extends GridRowEventLookup, GridColumnHeaderEventLookup, GridHeaderFilterEventLookup, GridColumnGroupHeaderEventLookup, GridCellEventLookup, GridControlledStateEventLookup {
     /**
      * Fired when the grid is unmounted.
      */
@@ -541,6 +567,12 @@ export interface GridEventLookup extends GridRowEventLookup, GridColumnHeaderEve
         params: GridRowSelectionCheckboxParams;
         event: React.ChangeEvent<HTMLElement>;
     };
+    /**
+     * Fired when the data is copied to the clipboard
+     */
+    clipboardCopy: {
+        params: string;
+    };
     /**
      * Fired when the preference panel is closed.
      */

package/models/gridFilterOperator.d.ts

@@ -13,6 +13,10 @@ export interface GridFilterOperator<R extends GridValidRowModel = any, V = any,
      * The label of the filter operator.
      */
     label?: string;
+    /**
+     * The label of the filter shown in header filter row.
+     */
+    headerLabel?: string;
     /**
      * The name of the filter operator.
      * It will be matched with the `operator` property of the filter items.

package/models/gridHeaderFilteringModel.d.ts

@@ -0,0 +1,5 @@
+import { GridColDef } from './colDef';
+export type GridHeaderFilteringState = {
+    editing: GridColDef['field'] | null;
+    menuOpen: GridColDef['field'] | null;
+};

package/models/gridHeaderFilteringModel.js

@@ -0,0 +1 @@
+export {};

package/models/gridSlotsComponent.d.ts

@@ -1,15 +1,22 @@
 import * as React from 'react';
 import type { UncapitalizeObjectKeys } from '../internals/utils';
 import type { GridIconSlotsComponent } from './gridIconSlotsComponent';
-/**
- * Grid components React prop interface containing all the overridable components.
- */
-export interface GridSlotsComponent extends GridIconSlotsComponent {
+export interface GridBaseSlots {
     /**
      * The custom Checkbox component used in the grid for both header and cells.
      * @default Checkbox
      */
     BaseCheckbox: React.JSXElementConstructor<any>;
+    /**
+     * The custom Chip component used in the grid.
+     * @default Chip
+     */
+    BaseChip: React.JSXElementConstructor<any>;
+    /**
+     * The custom InputAdornment component used in the grid.
+     * @default InputAdornment
+     */
+    BaseInputAdornment: React.JSXElementConstructor<any>;
     /**
      * The custom TextField component used in the grid.
      * @default TextField
@@ -60,6 +67,16 @@ export interface GridSlotsComponent extends GridIconSlotsComponent {
      * @default MenuItem
      */
     BaseSelectOption: React.JSXElementConstructor<any>;
+}
+/**
+ * Grid components React prop interface containing all the overridable components.
+ */
+export interface GridSlotsComponent extends GridBaseSlots, GridIconSlotsComponent {
+    /**
+     * The custom Chip component used in the grid.
+     * @default Chip
+     */
+    BaseChip: React.JSXElementConstructor<any>;
     /**
      * Component rendered for each cell.
      * @default GridCell

package/models/gridSlotsComponentsProps.d.ts

@@ -10,6 +10,7 @@ import { TooltipProps } from '@mui/material/Tooltip';
 import type { InputLabelProps } from '@mui/material/InputLabel';
 import { PopperProps } from '@mui/material/Popper';
 import { TablePaginationProps } from '@mui/material/TablePagination';
+import { ChipProps } from '@mui/material/Chip';
 import { GridToolbarProps } from '../components/toolbar/GridToolbar';
 import { ColumnHeaderFilterIconButtonProps } from '../components/columnHeaders/GridColumnHeaderFilterIconButton';
 import { GridColumnMenuProps } from '../components/menu/columnMenu/GridColumnMenuProps';
@@ -42,6 +43,8 @@ export interface BaseInputLabelPropsOverrides {
 }
 export interface BaseSelectOptionPropsOverrides {
 }
+export interface BaseChipPropsOverrides {
+}
 export interface CellPropsOverrides {
 }
 export interface ToolbarPropsOverrides {
@@ -90,6 +93,7 @@ export interface GridSlotsComponentsProps {
         value: any;
         children?: React.ReactNode;
     }, BaseSelectOptionPropsOverrides>;
+    baseChip?: SlotProps<ChipProps, BaseChipPropsOverrides>;
     cell?: SlotProps<GridCellProps, CellPropsOverrides>;
     columnHeaderFilterIconButton?: SlotProps<ColumnHeaderFilterIconButtonProps, ColumnHeaderFilterIconButtonPropsOverrides>;
     columnMenu?: SlotProps<GridColumnMenuProps, ColumnMenuPropsOverrides>;

package/models/gridStateCommunity.d.ts

@@ -1,6 +1,7 @@
 import type { GridColumnMenuState, GridColumnsInitialState, GridColumnsState, GridColumnsGroupingState, GridDensityState, GridFilterInitialState, GridFilterState, GridFocusState, GridPaginationInitialState, GridPaginationState, GridPreferencePanelInitialState, GridPreferencePanelState, GridRowsState, GridSortingInitialState, GridSortingState, GridTabIndexState } from '../hooks';
 import type { GridRowsMetaState } from '../hooks/features/rows/gridRowsMetaState';
 import type { GridEditingState } from './gridEditRowModel';
+import { GridHeaderFilteringState } from './gridHeaderFilteringModel';
 import type { GridRowSelectionModel } from './gridRowSelectionModel';
 /**
  * The state of `DataGrid`.
@@ -9,6 +10,7 @@ export interface GridStateCommunity {
     rows: GridRowsState;
     rowsMeta: GridRowsMetaState;
     editRows: GridEditingState;
+    headerFiltering: GridHeaderFilteringState;
     pagination: GridPaginationState;
     columns: GridColumnsState;
     columnGrouping: GridColumnsGroupingState;

package/models/index.d.ts

@@ -16,7 +16,7 @@ export * from './gridCell';
 export * from './gridColumnHeaderClass';
 export * from './api';
 export * from './gridIconSlotsComponent';
-export * from './gridSlotsComponent';
+export type { GridSlotsComponent, UncapitalizedGridSlotsComponent } from './gridSlotsComponent';
 export * from './gridSlotsComponentsProps';
 export * from './gridDensity';
 export * from './logger';

package/models/index.js

@@ -16,7 +16,6 @@ export * from './gridCell';
 export * from './gridColumnHeaderClass';
 export * from './api';
 export * from './gridIconSlotsComponent';
-export * from './gridSlotsComponent';
 export * from './gridSlotsComponentsProps';
 export * from './gridDensity';
 export * from './logger';

package/models/props/DataGridProps.d.ts

@@ -306,6 +306,20 @@ export interface DataGridPropsWithDefaultValues {
      * @default false
      */
     keepColumnPositionIfDraggedOutside: boolean;
+    /**
+     * If `true`, the grid will not use `valueFormatter` when exporting to CSV or copying to clipboard.
+     * If an object is provided, you can choose to ignore the `valueFormatter` for CSV export or clipboard export.
+     * @default: false
+     */
+    unstable_ignoreValueFormatterDuringExport: boolean | {
+        csvExport?: boolean;
+        clipboardExport?: boolean;
+    };
+    /**
+     * The character used to separate cell values when copying to the clipboard.
+     * @default '\t'
+     */
+    clipboardCopyCellDelimiter: string;
 }
 /**
  * The `DataGrid` props with no default value.
@@ -679,4 +693,9 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      */
     onProcessRowUpdateError?: (error: any) => void;
     columnGroupingModel?: GridColumnGroupingModel;
+    /**
+     * Callback called when the data is copied to the clipboard.
+     * @param {string} data The data copied to the clipboard.
+     */
+    onClipboardCopy?: GridEventListener<'clipboardCopy'>;
 }

package/modern/DataGrid/DataGrid.js

@@ -68,6 +68,11 @@ DataGridRaw.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  /**
+   * The character used to separate cell values when copying to the clipboard.
+   * @default '\t'
+   */
+  clipboardCopyCellDelimiter: PropTypes.string,
   /**
    * Number of extra columns to be rendered before/after the visible slice.
    * @default 3
@@ -326,6 +331,11 @@ DataGridRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onCellModesModelChange: PropTypes.func,
+  /**
+   * Callback called when the data is copied to the clipboard.
+   * @param {string} data The data copied to the clipboard.
+   */
+  onClipboardCopy: PropTypes.func,
   /**
    * Callback fired when a click event comes from a column header element.
    * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
@@ -611,5 +621,14 @@ DataGridRaw.propTypes = {
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * If `true`, the grid will not use `valueFormatter` when exporting to CSV or copying to clipboard.
+   * If an object is provided, you can choose to ignore the `valueFormatter` for CSV export or clipboard export.
+   * @default: false
+   */
+  unstable_ignoreValueFormatterDuringExport: PropTypes.oneOfType([PropTypes.shape({
+    clipboardExport: PropTypes.bool,
+    csvExport: PropTypes.bool
+  }), PropTypes.bool])
 };

package/modern/DataGrid/useDataGridComponent.js

@@ -67,9 +67,9 @@ export const useDataGridComponent = (inputApiRef, props) => {
   useGridRowsMeta(privateApiRef, props);
   useGridScroll(privateApiRef, props);
   useGridColumnMenu(privateApiRef);
-  useGridCsvExport(privateApiRef);
+  useGridCsvExport(privateApiRef, props);
   useGridPrintExport(privateApiRef, props);
-  useGridClipboard(privateApiRef);
+  useGridClipboard(privateApiRef, props);
   useGridDimensions(privateApiRef, props);
   useGridEvents(privateApiRef, props);
   useGridStatePersistence(privateApiRef);

package/modern/DataGrid/useDataGridProps.js

@@ -1,12 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["components", "componentsProps"];
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
 import { GRID_DEFAULT_LOCALE_TEXT } from '../constants';
 import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from '../constants/defaultGridSlotsComponents';
 import { GridEditModes } from '../models';
-import { computeSlots, uncapitalizeObjectKeys } from '../internals/utils';
+import { computeSlots, useProps, uncapitalizeObjectKeys } from '../internals/utils';
 const DATA_GRID_FORCED_PROPS = {
   disableMultipleColumnsFiltering: true,
   disableMultipleColumnsSorting: true,
@@ -66,19 +64,16 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   disableColumnReorder: false,
   disableColumnResize: false,
   keepNonExistentRowsSelected: false,
-  keepColumnPositionIfDraggedOutside: false
+  keepColumnPositionIfDraggedOutside: false,
+  unstable_ignoreValueFormatterDuringExport: false,
+  clipboardCopyCellDelimiter: '\t'
 };
 const defaultSlots = uncapitalizeObjectKeys(DATA_GRID_DEFAULT_SLOTS_COMPONENTS);
 export const useDataGridProps = inProps => {
-  const _useThemeProps = useThemeProps({
-      props: inProps,
-      name: 'MuiDataGrid'
-    }),
-    {
-      components,
-      componentsProps
-    } = _useThemeProps,
-    themedProps = _objectWithoutPropertiesLoose(_useThemeProps, _excluded);
+  const [components, componentsProps, themedProps] = useProps(useThemeProps({
+    props: inProps,
+    name: 'MuiDataGrid'
+  }));
   const localeText = React.useMemo(() => _extends({}, GRID_DEFAULT_LOCALE_TEXT, themedProps.localeText), [themedProps.localeText]);
   const slots = React.useMemo(() => computeSlots({
     defaultSlots,

package/modern/colDef/gridBooleanColDef.js

@@ -10,6 +10,22 @@ function gridBooleanFormatter({
 }) {
   return value ? api.getLocaleText('booleanCellTrueLabel') : api.getLocaleText('booleanCellFalseLabel');
 }
+const stringToBoolean = value => {
+  switch (value.toLowerCase().trim()) {
+    case 'true':
+    case 'yes':
+    case '1':
+      return true;
+    case 'false':
+    case 'no':
+    case '0':
+    case 'null':
+    case 'undefined':
+      return false;
+    default:
+      return undefined;
+  }
+};
 export const GRID_BOOLEAN_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'boolean',
   align: 'center',
@@ -21,5 +37,7 @@ export const GRID_BOOLEAN_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   filterOperators: getGridBooleanOperators(),
   getApplyQuickFilterFn: undefined,
   // @ts-ignore
-  aggregable: false
+  aggregable: false,
+  // @ts-ignore
+  pastedValueParser: value => stringToBoolean(value)
 });

package/modern/colDef/gridDateColDef.js

@@ -51,7 +51,9 @@ export const GRID_DATE_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   valueFormatter: gridDateFormatter,
   filterOperators: getGridDateOperators(),
   renderEditCell: renderEditDateCell,
-  getApplyQuickFilterFn: undefined
+  getApplyQuickFilterFn: undefined,
+  // @ts-ignore
+  pastedValueParser: value => new Date(value)
 });
 export const GRID_DATETIME_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'dateTime',
@@ -59,5 +61,7 @@ export const GRID_DATETIME_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   valueFormatter: gridDateTimeFormatter,
   filterOperators: getGridDateOperators(true),
   renderEditCell: renderEditDateCell,
-  getApplyQuickFilterFn: undefined
+  getApplyQuickFilterFn: undefined,
+  // @ts-ignore
+  pastedValueParser: value => new Date(value)
 });

package/modern/colDef/gridNumericOperators.js

@@ -17,7 +17,6 @@ export const getGridNumericQuickFilterFn = value => {
   };
 };
 export const getGridNumericOperators = () => [{
-  label: '=',
   value: '=',
   getApplyFilterFn: filterItem => {
     if (filterItem.value == null || Number.isNaN(filterItem.value)) {
@@ -34,7 +33,6 @@ export const getGridNumericOperators = () => [{
     type: 'number'
   }
 }, {
-  label: '!=',
   value: '!=',
   getApplyFilterFn: filterItem => {
     if (filterItem.value == null || Number.isNaN(filterItem.value)) {
@@ -51,7 +49,6 @@ export const getGridNumericOperators = () => [{
     type: 'number'
   }
 }, {
-  label: '>',
   value: '>',
   getApplyFilterFn: filterItem => {
     if (filterItem.value == null || Number.isNaN(filterItem.value)) {
@@ -71,7 +68,6 @@ export const getGridNumericOperators = () => [{
     type: 'number'
   }
 }, {
-  label: '>=',
   value: '>=',
   getApplyFilterFn: filterItem => {
     if (filterItem.value == null || Number.isNaN(filterItem.value)) {
@@ -91,7 +87,6 @@ export const getGridNumericOperators = () => [{
     type: 'number'
   }
 }, {
-  label: '<',
   value: '<',
   getApplyFilterFn: filterItem => {
     if (filterItem.value == null || Number.isNaN(filterItem.value)) {
@@ -111,7 +106,6 @@ export const getGridNumericOperators = () => [{
     type: 'number'
   }
 }, {
-  label: '<=',
   value: '<=',
   getApplyFilterFn: filterItem => {
     if (filterItem.value == null || Number.isNaN(filterItem.value)) {

package/modern/colDef/gridSingleSelectColDef.js

@@ -51,5 +51,25 @@ export const GRID_SINGLE_SELECT_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
     return valueOption ? colDef.getOptionLabel(valueOption) : '';
   },
   renderEditCell: renderEditSingleSelectCell,
-  filterOperators: getGridSingleSelectOperators()
+  filterOperators: getGridSingleSelectOperators(),
+  // @ts-ignore
+  pastedValueParser: (value, params) => {
+    const colDef = params.colDef;
+    const colDefValueOptions = colDef.valueOptions;
+    const valueOptions = typeof colDefValueOptions === 'function' ? colDefValueOptions({
+      field: colDef.field
+    }) : colDefValueOptions || [];
+    const getOptionValue = colDef.getOptionValue;
+    const valueOption = valueOptions.find(option => {
+      if (getOptionValue(option) === value) {
+        return true;
+      }
+      return false;
+    });
+    if (valueOption) {
+      return value;
+    }
+    // do not paste the value if it is not in the valueOptions
+    return undefined;
+  }
 });

package/modern/components/base/GridBody.js

@@ -89,7 +89,8 @@ function GridBody(props) {
   apiRef.current.register('private', {
     columnHeadersContainerElementRef: columnsContainerRef,
     columnHeadersElementRef: columnHeadersRef,
-    virtualScrollerRef
+    virtualScrollerRef,
+    mainElementRef: rootRef
   });
   const hasDimensions = !!apiRef.current.getRootDimensions();
   return /*#__PURE__*/_jsxs(GridMainContainer, {

package/modern/components/cell/GridEditInputCell.js

@@ -88,7 +88,10 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     type: colDef.type === 'number' ? colDef.type : 'text',
     value: valueState ?? '',
     onChange: handleChange,
-    endAdornment: isProcessingProps ? /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {}) : undefined
+    endAdornment: isProcessingProps ? /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {
+      fontSize: "small",
+      color: "action"
+    }) : undefined
   }, other));
 });
 process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {

package/modern/components/containers/GridRootStyles.js

@@ -149,6 +149,7 @@ export const GridRootStyles = styled('div', {
     outline: 'none',
     height: '100%',
     display: 'flex',
+    overflow: 'hidden',
     flexDirection: 'column',
     overflowAnchor: 'none',
     // Keep the same scrolling position