@mui/x-data-grid 6.0.0-alpha.14 → 6.0.0-alpha.15

package/CHANGELOG.md

@@ -3,6 +3,163 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.0.0-alpha.15
+
+_Jan 13, 2023_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Support components and slots for new pickers (#7390) @alexfauquette
+- ✨ Update `onColumnOrderChange` behavior to match `onRowsOrderChange` (#7385) @DanailH
+- 🌍 Improve Spanish (es-ES) and Belarusian (be-BY) locales
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v6.0.0-alpha.15` / `@mui/x-data-grid-pro@6.0.0-alpha.15` / `@mui/x-data-grid-premium@6.0.0-alpha.15`
+
+#### Breaking changes
+
+- Remove the `onCellFocusOut` prop (#6302) @cherniavskii
+
+  The `onCellFocusOut` prop was removed. Use `componentsProps.cell.onBlur` instead:
+
+  ```tsx
+  <DataGrid
+    componentsProps={{
+      cell: {
+        onBlur: (event) => {
+          const cellElement = event.currentTarget;
+          const field = cellElement.getAttribute('data-field');
+          const rowId = cell.parentElement.getAttribute('data-id');
+        },
+      },
+    }}
+  />
+  ```
+
+- [DataGrid] Stop exporting editing selector (#7456) @m4theushw
+
+  The `gridEditRowsStateSelector` selector was removed.
+
+- [DataGrid] Rework column headers and virtual scroller positioning (#7001) @cherniavskii
+
+  The `headerHeight` prop was renamed to `columnHeaderHeight`.
+
+- [DataGrid] Remove the `columnTypes` prop (#7309) @cherniavskii
+
+  The `columnTypes` prop was removed. For custom column types see [Custom column types](https://mui.com/x/react-data-grid/column-definition/#custom-column-types) docs.
+
+- [DataGrid] Rename `linkOperators` to `logicOperators` (#7310) @cherniavskii
+
+  The `apiRef.current.setFilterLinkOperator` method was renamed to `apiRef.current.setFilterLogicOperator`.
+  The `GridLinkOperator` enum was renamed to `GridLogicOperator`.
+  The `GridFilterModel['linkOperator']` was renamed to `GridFilterModel['logicOperator']`.
+  The `linkOperators` prop of `GridFilterForm` and `GridFilterPanel` components was renamed to `logicOperators`.
+  The `linkOperatorInputProps` prop of `GridFilterForm` component was renamed to `logicOperatorInputProps`.
+  The `filterFormProps.linkOperatorInputProps` prop in `GridFilterForm` component was renamed to `filterFormProps.logicOperatorInputProps`.
+  The `GridLocaleText['filterPanelLinkOperator']` property was renamed to `GridLocaleText['filterPanelLogicOperator']`.
+  The `.MuiDataGrid-filterFormLinkOperatorInput`CSS class was renamed to `.MuiDataGrid-filterFormLogicOperatorInput`.
+
+- [DataGrid] Remove `Alt+C` keyboard shortcut (#7466) @MBilalShafi
+
+  <kbd>Alt</kbd> (or <kbd>⌥ Option</kbd>) + <kbd>C</kbd> keyboard shortcut is no longer supported.
+
+#### Changes
+
+- [DataGrid] Fix <kbd>Tab</kbd> between portaled and non-portaled edit components (#7098) @m4theushw
+- [DataGrid] Remove the `columnTypes` prop (#7309) @cherniavskii
+- [DataGrid] Remove the `onCellFocusOut` prop (#6302) @cherniavskii
+- [DataGrid] Rename `linkOperators` to `logicOperators` (#7310) @cherniavskii
+- [DataGrid] Rework column headers and virtual scroller positioning (#7001) @cherniavskii
+- [DataGrid] Stop exporting editing selector (#7456) @m4theushw
+- [DataGrid] Update `onColumnOrderChange` behavior to match `onRowsOrderChange` (#7385) @DanailH
+- [DataGrid] Improve Spanish (es-ES) locale (#7447) @Anderssxn
+- [DataGrid] Remove Alt+C keyboard shortcut (#7466) @MBilalShafi
+- [DataGridPremium] Fix Excel export not working with date strings (#7396) @cherniavskii
+
+### `@mui/x-date-pickers@6.0.0-alpha.15` / `@mui/x-date-pickers-pro@6.0.0-alpha.15`
+
+#### Breaking changes
+
+- [pickers] Stop using the `WrapperVariantContext` in `MonthCalendar` and `YearCalendar` (#7382) @flaviendelangle
+
+  The `modeMobile` and `modeDesktop` classes have been removed from the `PickersMonth` and `PickersYear` internal components.
+
+  If you were using those classes on responsive components,
+  you can import `DEFAULT_DESKTOP_MODE_MEDIA_QUERY` from `@mui/x-date-pickers` or `@mui/x-date-pickers-pro` (or use your custom media query if any):
+
+  ```diff
+   <GlobalStyles
+     styles={{
+  -     [`.${pickersYearClasses.modeDesktop}`]: {
+  -       backgroundColor: 'red'
+  -     }
+  +     [DEFAULT_DESKTOP_MODE_MEDIA_QUERY]: {
+  +       [`.${pickersYearClasses.root}`]: {
+  +         backgroundColor: 'red'
+  +       }
+  +     }
+  -     [`.${pickersYearClasses.modeMobile}`]: {
+  -       backgroundColor: 'red'
+  -     }
+  +     [DEFAULT_DESKTOP_MODE_MEDIA_QUERY.replace('@media', '@media not')]: {
+  +       [`.${pickersYearClasses.root}`]: {
+  +         backgroundColor: 'red'
+  +       }
+  +     }
+     }}
+   />
+  ```
+
+  Works exactly the same way for `PickersMonth`.
+
+- [pickers] Refactor `shouldDisableTime` (#7299) @LukasTy
+
+  The `shouldDisableTime` prop signature has been changed. Either rename the prop usage to `shouldDisableClock` or refactor usage.
+
+  ```diff
+   <DateTimePicker
+  -   shouldDisableTime={(timeValue, view) => view === 'hours' && timeValue < 12}
+  +   shouldDisableClock={(timeValue, view) => view === 'hours' && timeValue < 12}
+   />
+  ```
+
+  ```diff
+   <DateTimePicker
+  -   shouldDisableTime={(timeValue, view) => view === 'hours' && timeValue < 12}
+  +   shouldDisableTime={(time, view) => view === 'hours' && value.hour() < 12}
+   />
+  ```
+
+#### Changes
+
+- [fields] Fix Android editing (#7444) @flaviendelangle
+- [pickers] Add Belarusian (be-BY) locale (#7395) @volhalink
+- [pickers] Hide am/pm controls when their is no hour view (#7380) @flaviendelangle
+- [pickers] Hide the tabs by default on `DesktopNextDateTimePicker` (#7503) @flaviendelangle
+- [pickers] Refactor `shouldDisableTime` (#7299) @LukasTy
+- [pickers] Remove `WrapperVariantContext` from `DateTimePickerTabs` (#7374) @LukasTy
+- [pickers] Stop using the `WrapperVariantContext` in `MonthCalendar` and `YearCalendar` (#7382) @flaviendelangle
+- [pickers] Support `components` and `slots` for new pickers (#7390) @alexfauquette
+- [pickers] Replace `slotsProps` by `slotProps` (#7528) @alexfauquette
+
+### Docs
+
+- [docs] Fix codesandboxes using `DemoContainer` (#7388) @LukasTy
+- [docs] Fix wrong reference to currentView (#7441) @oliviertassinari
+- [docs] New page for `DateRangeCalendar` (#7378) @flaviendelangle
+- [docs] Update the migration guide with the breaking changes between the legacy and the new pickers (#7345) @flaviendelangle
+- [docs] Use new pickers on "Custom components" demos (#7194) @flaviendelangle
+
+### Core
+
+- [core] Handle selection edge case (#7350) @oliviertassinari
+- [core] Improve license message @oliviertassinari
+- [pickers] Move default `closeOnSelect` to prop definition (#7459) @flaviendelangle
+- [core] Move interfaces of UI views to dedicated files (#7458) @flaviendelangle
+- [core] Update package used to import LicenseInfo (#7442) @oliviertassinari
+- [test] Add a few inheritComponent (#7352) @oliviertassinari
+
 ## 6.0.0-alpha.14
 
 _Jan 5, 2023_

package/DataGrid/DataGrid.js

@@ -78,6 +78,11 @@ DataGridRaw.propTypes = {
    */
   columnBuffer: PropTypes.number,
   columnGroupingModel: PropTypes.arrayOf(PropTypes.object),
+  /**
+   * Sets the height in pixel of the column headers in the grid.
+   * @default 56
+   */
+  columnHeaderHeight: PropTypes.number,
   /**
    * Set of columns of type [[GridColDef[]]].
    */
@@ -93,10 +98,6 @@ DataGridRaw.propTypes = {
    * @default 3
    */
   columnThreshold: PropTypes.number,
-  /**
-   * Extend native column types with your new column types.
-   */
-  columnTypes: PropTypes.object,
   /**
    * Set the column visibility model of the grid.
    * If defined, the grid will ignore the `hide` property in [[GridColDef]].
@@ -183,7 +184,7 @@ DataGridRaw.propTypes = {
       operator: PropTypes.string.isRequired,
       value: PropTypes.any
     })).isRequired,
-    linkOperator: PropTypes.oneOf(['and', 'or']),
+    logicOperator: PropTypes.oneOf(['and', 'or']),
     quickFilterLogicOperator: PropTypes.oneOf(['and', 'or']),
     quickFilterValues: PropTypes.array
   }),
@@ -229,11 +230,6 @@ DataGridRaw.propTypes = {
    * @returns {GridRowSpacing} The row spacing values.
    */
   getRowSpacing: PropTypes.func,
-  /**
-   * Set the height in pixel of the column headers in the grid.
-   * @default 56
-   */
-  headerHeight: PropTypes.number,
   /**
    * If `true`, the footer component is hidden.
    * @default false
@@ -328,13 +324,6 @@ DataGridRaw.propTypes = {
    * @param {MuiEvent<MuiBaseEvent>} event The event that caused this prop to be called.
    */
   onCellEditStop: PropTypes.func,
-  /**
-   * Callback fired when a cell loses focus.
-   * @param {GridCellParams} params With all properties from [[GridCellParams]].
-   * @param {MuiEvent<MuiBaseEvent>} event The event object.
-   * @param {GridCallbackDetails} details Additional details for this callback.
-   */
-  onCellFocusOut: PropTypes.func,
   /**
    * Callback fired when a keydown event comes from a cell element.
    * @param {GridCellParams} params With all properties from [[GridCellParams]].
@@ -570,7 +559,7 @@ DataGridRaw.propTypes = {
    */
   rowCount: PropTypes.number,
   /**
-   * Set the height in pixel of a row in the grid.
+   * Sets the height in pixel of a row in the grid.
    * @default 52
    */
   rowHeight: PropTypes.number,

package/DataGrid/useDataGridProps.js

@@ -44,7 +44,7 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   disableVirtualization: false,
   editMode: GridEditModes.Cell,
   filterMode: 'client',
-  headerHeight: 56,
+  columnHeaderHeight: 56,
   hideFooter: false,
   hideFooterPagination: false,
   hideFooterRowCount: false,

package/components/GridAutoSizer.d.ts

@@ -9,7 +9,7 @@ export interface AutoSizerProps extends Omit<React.HTMLAttributes<HTMLDivElement
      * @param {AutoSizerSize} size The grid's size.
      * @returns {React.ReactNode} The children to render.
      */
-    children: (size: AutoSizerSize) => React.ReactNode;
+    children: React.ReactNode;
     /**
      * Default height to use for initial render; useful for SSR.
      * @default null

package/components/GridAutoSizer.js

@@ -68,28 +68,15 @@ const GridAutoSizer = /*#__PURE__*/React.forwardRef(function AutoSizer(props, re
       detectElementResize.removeResizeListener(parentElement.current, handleResize);
     };
   }, [nonce, handleResize]);
-
-  // Outer div should not force width/height since that may prevent containers from shrinking.
-  // Inner component should overflow and use calculated width/height.
-  // See issue #68 for more information.
-  const outerStyle = {
-    overflow: 'visible'
-  };
-  const childParams = {};
-  if (!disableHeight) {
-    outerStyle.height = 0;
-    childParams.height = state.height;
-  }
-  if (!disableWidth) {
-    outerStyle.width = 0;
-    childParams.width = state.width;
-  }
   const handleRef = useForkRef(rootRef, ref);
   return /*#__PURE__*/_jsx("div", _extends({
     ref: handleRef,
-    style: _extends({}, outerStyle, style)
+    style: _extends({
+      flex: disableHeight ? 0 : '1 1 0px',
+      overflow: 'auto'
+    }, style)
   }, other, {
-    children: state.height === null && state.width === null ? null : children(childParams)
+    children: state.height === null && state.width === null ? null : children
   }));
 });
 process.env.NODE_ENV !== "production" ? GridAutoSizer.propTypes = {
@@ -102,7 +89,7 @@ process.env.NODE_ENV !== "production" ? GridAutoSizer.propTypes = {
    * @param {AutoSizerSize} size The grid's size.
    * @returns {React.ReactNode} The children to render.
    */
-  children: PropTypes.func.isRequired,
+  children: PropTypes.node,
   /**
    * Default height to use for initial render; useful for SSR.
    * @default null

package/components/GridScrollArea.js

@@ -62,7 +62,7 @@ function GridScrollAreaRaw(props) {
     classes: rootProps.classes
   });
   const classes = useUtilityClasses(ownerState);
-  const headerHeight = Math.floor(rootProps.headerHeight * densityFactor);
+  const headerHeight = Math.floor(rootProps.columnHeaderHeight * densityFactor);
   const handleScrolling = React.useCallback(newScrollPosition => {
     scrollPosition.current = newScrollPosition;
   }, []);

package/components/base/GridBody.js

@@ -4,7 +4,6 @@ import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiCon
 import { GridMainContainer } from '../containers/GridMainContainer';
 import { GridAutoSizer } from '../GridAutoSizer';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { getTotalHeaderHeight } from '../../hooks/features/columns/gridColumnsUtils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function GridBody(props) {
@@ -15,7 +14,6 @@ function GridBody(props) {
   } = props;
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
-  const totalHeaderHeight = getTotalHeaderHeight(apiRef, rootProps.headerHeight);
   const [isVirtualizationDisabled, setIsVirtualizationDisabled] = React.useState(rootProps.disableVirtualization);
   const disableVirtualization = React.useCallback(() => {
     setIsVirtualizationDisabled(true);
@@ -54,20 +52,10 @@ function GridBody(props) {
       nonce: rootProps.nonce,
       disableHeight: rootProps.autoHeight,
       onResize: handleResize,
-      children: size => {
-        const style = {
-          width: size.width,
-          // If `autoHeight` is on, there will be no height value.
-          // In this case, let the container to grow whatever it needs.
-          height: size.height ? size.height - totalHeaderHeight : 'auto',
-          marginTop: totalHeaderHeight
-        };
-        return /*#__PURE__*/_jsx(VirtualScrollerComponent, {
-          ref: virtualScrollerRef,
-          style: style,
-          disableVirtualization: isVirtualizationDisabled
-        });
-      }
+      children: /*#__PURE__*/_jsx(VirtualScrollerComponent, {
+        ref: virtualScrollerRef,
+        disableVirtualization: isVirtualizationDisabled
+      })
     }), children]
   });
 }

package/components/cell/GridCell.js

@@ -100,11 +100,6 @@ function GridCell(props) {
     }
   }, [apiRef, field, onMouseDown, rowId]);
   const publish = React.useCallback((eventName, propHandler) => event => {
-    // Ignore portal
-    if (!event.currentTarget.contains(event.target)) {
-      return;
-    }
-
     // The row might have been deleted during the click
     if (!apiRef.current.getRow(rowId)) {
       return;

package/components/columnHeaders/GridColumnHeaders.js

@@ -25,13 +25,11 @@ const GridColumnHeadersRoot = styled('div', {
   theme
 }) => {
   return {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
+    position: 'relative',
     overflow: 'hidden',
     display: 'flex',
     alignItems: 'center',
+    boxSizing: 'border-box',
     borderBottom: '1px solid',
     borderTopLeftRadius: theme.shape.borderRadius,
     borderTopRightRadius: theme.shape.borderRadius

package/components/panel/filterPanel/GridFilterForm.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { GridFilterItem, GridLinkOperator } from '../../../models/gridFilterItem';
+import { GridFilterItem, GridLogicOperator } from '../../../models/gridFilterItem';
 import { GridColDef, GridStateColDef } from '../../../models/colDef/gridColDef';
 export interface FilterColumnsArgs {
     field: GridColDef['field'];
@@ -23,7 +23,7 @@ export interface GridFilterFormProps {
     /**
      * The current logic operator applied.
      */
-    multiFilterOperator?: GridLinkOperator;
+    multiFilterOperator?: GridLogicOperator;
     /**
      * If `true`, disables the logic operator field but still renders it.
      */
@@ -40,9 +40,9 @@ export interface GridFilterFormProps {
     applyFilterChanges: (item: GridFilterItem) => void;
     /**
      * Callback called when the logic operator is changed.
-     * @param {GridLinkOperator} operator The new logic operator.
+     * @param {GridLogicOperator} operator The new logic operator.
      */
-    applyMultiFilterOperatorChanges: (operator: GridLinkOperator) => void;
+    applyMultiFilterOperatorChanges: (operator: GridLogicOperator) => void;
     /**
      * Callback called when the delete button is clicked.
      * @param {GridFilterItem} item The deleted [[GridFilterItem]].
@@ -56,9 +56,9 @@ export interface GridFilterFormProps {
     filterColumns?: (args: FilterColumnsArgs) => GridColDef['field'][];
     /**
      * Sets the available logic operators.
-     * @default [GridLinkOperator.And, GridLinkOperator.Or]
+     * @default [GridLogicOperator.And, GridLogicOperator.Or]
      */
-    linkOperators?: GridLinkOperator[];
+    logicOperators?: GridLogicOperator[];
     /**
      * Changes how the options in the columns selector should be ordered.
      * If not specified, the order is derived from the `columns` prop.
@@ -73,7 +73,7 @@ export interface GridFilterFormProps {
      * Props passed to the logic operator input component.
      * @default {}
      */
-    linkOperatorInputProps?: any;
+    logicOperatorInputProps?: any;
     /**
      * Props passed to the operator input component.
      * @default {}

package/components/panel/filterPanel/GridFilterForm.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterChanges", "multiFilterOperator", "showMultiFilterOperators", "disableMultiFilterOperator", "applyMultiFilterOperatorChanges", "focusElementRef", "linkOperators", "columnsSort", "filterColumns", "deleteIconProps", "linkOperatorInputProps", "operatorInputProps", "columnInputProps", "valueInputProps", "children"],
+const _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterChanges", "multiFilterOperator", "showMultiFilterOperators", "disableMultiFilterOperator", "applyMultiFilterOperatorChanges", "focusElementRef", "logicOperators", "columnsSort", "filterColumns", "deleteIconProps", "logicOperatorInputProps", "operatorInputProps", "columnInputProps", "valueInputProps", "children"],
   _excluded2 = ["InputComponentProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -14,7 +14,7 @@ import clsx from 'clsx';
 import { gridFilterableColumnDefinitionsSelector } from '../../../hooks/features/columns/gridColumnsSelector';
 import { gridFilterModelSelector } from '../../../hooks/features/filter/gridFilterSelector';
 import { useGridSelector } from '../../../hooks/utils/useGridSelector';
-import { GridLinkOperator } from '../../../models/gridFilterItem';
+import { GridLogicOperator } from '../../../models/gridFilterItem';
 import { useGridApiContext } from '../../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../../constants/gridClasses';
@@ -27,7 +27,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['filterForm'],
     deleteIcon: ['filterFormDeleteIcon'],
-    linkOperatorInput: ['filterFormLinkOperatorInput'],
+    logicOperatorInput: ['filterFormLogicOperatorInput'],
     columnInput: ['filterFormColumnInput'],
     operatorInput: ['filterFormOperatorInput'],
     valueInput: ['filterFormValueInput']
@@ -56,10 +56,10 @@ const FilterFormDeleteIcon = styled(FormControl, {
   marginRight: theme.spacing(0.5),
   marginBottom: theme.spacing(0.2)
 }));
-const FilterFormLinkOperatorInput = styled(FormControl, {
+const FilterFormLogicOperatorInput = styled(FormControl, {
   name: 'MuiDataGrid',
-  slot: 'FilterFormLinkOperatorInput',
-  overridesResolver: (_, styles) => styles.filterFormLinkOperatorInput
+  slot: 'FilterFormLogicOperatorInput',
+  overridesResolver: (_, styles) => styles.filterFormLogicOperatorInput
 })({
   minWidth: 55,
   marginRight: 5,
@@ -86,14 +86,14 @@ const FilterFormValueInput = styled(FormControl, {
 })({
   width: 190
 });
-const getLinkOperatorLocaleKey = linkOperator => {
-  switch (linkOperator) {
-    case GridLinkOperator.And:
+const getLogicOperatorLocaleKey = logicOperator => {
+  switch (logicOperator) {
+    case GridLogicOperator.And:
       return 'filterPanelOperatorAnd';
-    case GridLinkOperator.Or:
+    case GridLogicOperator.Or:
       return 'filterPanelOperatorOr';
     default:
-      throw new Error('MUI: Invalid `linkOperator` property in the `GridFilterPanel`.');
+      throw new Error('MUI: Invalid `logicOperator` property in the `GridFilterPanel`.');
   }
 };
 const getColumnLabel = col => col.headerName || col.field;
@@ -110,11 +110,11 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
       disableMultiFilterOperator,
       applyMultiFilterOperatorChanges,
       focusElementRef,
-      linkOperators = [GridLinkOperator.And, GridLinkOperator.Or],
+      logicOperators = [GridLogicOperator.And, GridLogicOperator.Or],
       columnsSort,
       filterColumns,
       deleteIconProps = {},
-      linkOperatorInputProps = {},
+      logicOperatorInputProps = {},
       operatorInputProps = {},
       columnInputProps = {},
       valueInputProps = {}
@@ -134,7 +134,7 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
   const classes = useUtilityClasses(ownerState);
   const valueRef = React.useRef(null);
   const filterSelectorRef = React.useRef(null);
-  const hasLinkOperatorColumn = hasMultipleFilters && linkOperators.length > 0;
+  const hasLogicOperatorColumn = hasMultipleFilters && logicOperators.length > 0;
   const baseFormControlProps = ((_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseFormControl) || {};
   const baseSelectProps = ((_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSelect) || {};
   const isBaseSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
@@ -200,9 +200,9 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
       value: eraseItemValue ? undefined : item.value
     }));
   }, [applyFilterChanges, item, currentColumn, currentOperator]);
-  const changeLinkOperator = React.useCallback(event => {
-    const linkOperator = event.target.value === GridLinkOperator.And.toString() ? GridLinkOperator.And : GridLinkOperator.Or;
-    applyMultiFilterOperatorChanges(linkOperator);
+  const changeLogicOperator = React.useCallback(event => {
+    const logicOperator = event.target.value === GridLogicOperator.And.toString() ? GridLogicOperator.And : GridLogicOperator.Or;
+    applyMultiFilterOperatorChanges(logicOperator);
   }, [applyMultiFilterOperatorChanges]);
   const handleDeleteFilter = () => {
     if (rootProps.disableMultipleColumnsFiltering) {
@@ -247,28 +247,28 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
           fontSize: "small"
         })
       })
-    })), /*#__PURE__*/_jsx(FilterFormLinkOperatorInput, _extends({
+    })), /*#__PURE__*/_jsx(FilterFormLogicOperatorInput, _extends({
       variant: "standard",
       as: rootProps.components.BaseFormControl
-    }, baseFormControlProps, linkOperatorInputProps, {
+    }, baseFormControlProps, logicOperatorInputProps, {
       sx: _extends({
-        display: hasLinkOperatorColumn ? 'flex' : 'none',
+        display: hasLogicOperatorColumn ? 'flex' : 'none',
         visibility: showMultiFilterOperators ? 'visible' : 'hidden'
-      }, baseFormControlProps.sx || {}, linkOperatorInputProps.sx || {}),
-      className: clsx(classes.linkOperatorInput, baseFormControlProps.className, linkOperatorInputProps.className),
+      }, baseFormControlProps.sx || {}, logicOperatorInputProps.sx || {}),
+      className: clsx(classes.logicOperatorInput, baseFormControlProps.className, logicOperatorInputProps.className),
       children: /*#__PURE__*/_jsx(rootProps.components.BaseSelect, _extends({
         inputProps: {
-          'aria-label': apiRef.current.getLocaleText('filterPanelLinkOperator')
+          'aria-label': apiRef.current.getLocaleText('filterPanelLogicOperator')
         },
         value: multiFilterOperator,
-        onChange: changeLinkOperator,
-        disabled: !!disableMultiFilterOperator || linkOperators.length === 1,
+        onChange: changeLogicOperator,
+        disabled: !!disableMultiFilterOperator || logicOperators.length === 1,
         native: isBaseSelectNative
       }, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.baseSelect, {
-        children: linkOperators.map(linkOperator => /*#__PURE__*/_jsx(OptionComponent, {
-          value: linkOperator.toString(),
-          children: apiRef.current.getLocaleText(getLinkOperatorLocaleKey(linkOperator))
-        }, linkOperator.toString()))
+        children: logicOperators.map(logicOperator => /*#__PURE__*/_jsx(OptionComponent, {
+          value: logicOperator.toString(),
+          children: apiRef.current.getLocaleText(getLogicOperatorLocaleKey(logicOperator))
+        }, logicOperator.toString()))
       }))
     })), /*#__PURE__*/_jsxs(FilterFormColumnInput, _extends({
       variant: "standard",
@@ -341,7 +341,7 @@ process.env.NODE_ENV !== "production" ? GridFilterForm.propTypes = {
   applyFilterChanges: PropTypes.func.isRequired,
   /**
    * Callback called when the logic operator is changed.
-   * @param {GridLinkOperator} operator The new logic operator.
+   * @param {GridLogicOperator} operator The new logic operator.
    */
   applyMultiFilterOperatorChanges: PropTypes.func.isRequired,
   /**
@@ -401,12 +401,12 @@ process.env.NODE_ENV !== "production" ? GridFilterForm.propTypes = {
    * Props passed to the logic operator input component.
    * @default {}
    */
-  linkOperatorInputProps: PropTypes.any,
+  logicOperatorInputProps: PropTypes.any,
   /**
    * Sets the available logic operators.
-   * @default [GridLinkOperator.And, GridLinkOperator.Or]
+   * @default [GridLogicOperator.And, GridLogicOperator.Or]
    */
-  linkOperators: PropTypes.arrayOf(PropTypes.oneOf(['and', 'or']).isRequired),
+  logicOperators: PropTypes.arrayOf(PropTypes.oneOf(['and', 'or']).isRequired),
   /**
    * The current logic operator applied.
    */

package/components/panel/filterPanel/GridFilterPanel.d.ts

@@ -7,7 +7,7 @@ export interface GetColumnForNewFilterArgs {
     currentFilters: GridFilterItem[];
     columns: GridStateColDef[];
 }
-export interface GridFilterPanelProps extends Pick<GridFilterFormProps, 'linkOperators' | 'columnsSort'> {
+export interface GridFilterPanelProps extends Pick<GridFilterFormProps, 'logicOperators' | 'columnsSort'> {
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
@@ -21,7 +21,7 @@ export interface GridFilterPanelProps extends Pick<GridFilterFormProps, 'linkOpe
     /**
      * Props passed to each filter form.
      */
-    filterFormProps?: Pick<GridFilterFormProps, 'columnsSort' | 'deleteIconProps' | 'linkOperatorInputProps' | 'operatorInputProps' | 'columnInputProps' | 'valueInputProps'>;
+    filterFormProps?: Pick<GridFilterFormProps, 'columnsSort' | 'deleteIconProps' | 'logicOperatorInputProps' | 'operatorInputProps' | 'columnInputProps' | 'valueInputProps'>;
     /**
      * @ignore - do not document.
      */