@mui/x-data-grid 7.16.0 → 7.17.0

package/CHANGELOG.md

@@ -3,6 +3,93 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.17.0
+
+_Sep 13, 2024_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Charts performance improvement
+- 🧑‍💻 New Data Grid [custom columns demo](https://mui.com/x/react-data-grid/custom-columns/#full-example)
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+- 🌍 Improve Hungarian (hu-HU) locale on the Data Grid
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.17.0`
+
+- [DataGrid] Add "does not equal" and "does not contain" filter operators (#14489) @KenanYusuf
+- [DataGrid] Add demo to the "Custom columns" page that does not use generator (#13695) @arminmeh
+- [DataGrid] Fix Voice Over reading the column name twice (#14482) @arminmeh
+- [DataGrid] Fix bug in CRUD example (#14513) @michelengelen
+- [DataGrid] Fix failing jsdom tests caused by `:has()` selectors (#14559) @KenanYusuf
+- [DataGrid] Refactor string operator filter functions (#14564) @KenanYusuf
+- [l10n] Improve Hungarian (hu-HU) locale (#14506) @ntamas
+
+#### `@mui/x-data-grid-pro@7.17.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.17.0`.
+
+#### `@mui/x-data-grid-premium@7.17.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.17.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.17.0`
+
+- [fields] Improve `useSplitFieldProps` and make it public (#14514) @flaviendelangle
+- [pickers] Improve clear action label (#14243) @oliviertassinari
+- [pickers] Add `"use client"` directive to every public component and hook (#14562) @flaviendelangle
+- [pickers] Allow custom fields to validate the value (#14486) @flaviendelangle
+- [pickers] Stop using utils in locales (#14505) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@7.17.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.17.0`, plus:
+
+- [DateRangePicker] Fix `currentMonthCalendarPosition` not scrolling to future sibling (#14442) @GMchris
+
+### Charts
+
+#### `@mui/x-charts@7.17.0`
+
+- [charts] Add `"use client"` directive to every public component and hook (#14578) @flaviendelangle
+- [charts] Allow `onItemClick` on the `Legend` component (#14231) @JCQuintas
+- [charts] Fix `onAxisClick` with `layout='horizontal'` (#14547) @alexfauquette
+- [charts] Replace `path` with `circle` for performance improvement (#14518) @alexfauquette
+
+#### `@mui/x-charts-pro@7.0.0-beta.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@7.17.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@7.17.0`
+
+- [TreeView] Make `useTreeItem2` stable (#14498) @flaviendelangle
+
+### Docs
+
+- [docs] Add missing callout on "Imperative API" tree view sections (#14503) @flaviendelangle
+- [docs] Fix broken redirection to MUI X v5 @oliviertassinari
+- [docs] Fix multiple `console.error` messages on `charts` docs (#14554) @JCQuintas
+- [docs] Fixed typo in Row Grouping recipes (#14549) @Miodini
+- [docs] Match title with blog posts @oliviertassinari
+
+### Core
+
+- [core] Move warning methods to `@mui/x-internals` (#14528) @k-rajat19
+- [core] Sync with core release flow @oliviertassinari
+- [code-infra] Fix charts benchmark workflow (#14573) @JCQuintas
+- [docs-infra] Type interface API pages (#14138) @alexfauquette
+- [infra] Create `ESLint plugins` renovate group (#14574) @LukasTy
+- [license] Clean-up terminology to match codebase (#14531) @oliviertassinari
+- [test] Remove dead `act()` logic (#14529) @oliviertassinari
+
 ## 7.16.0
 
 _Sep 5, 2024_

package/colDef/gridStringOperators.js

@@ -15,34 +15,58 @@ export const getGridStringQuickFilterFn = value => {
     return columnValue != null ? filterRegex.test(columnValue.toString()) : false;
   };
 };
+const createContainsFilterFn = (disableTrim, negate) => filterItem => {
+  if (!filterItem.value) {
+    return null;
+  }
+  const trimmedValue = disableTrim ? filterItem.value : filterItem.value.trim();
+  const filterRegex = new RegExp(escapeRegExp(trimmedValue), 'i');
+  return value => {
+    if (value == null) {
+      return negate;
+    }
+    const matches = filterRegex.test(String(value));
+    return negate ? !matches : matches;
+  };
+};
+const createEqualityFilterFn = (disableTrim, negate) => filterItem => {
+  if (!filterItem.value) {
+    return null;
+  }
+  const trimmedValue = disableTrim ? filterItem.value : filterItem.value.trim();
+  const collator = new Intl.Collator(undefined, {
+    sensitivity: 'base',
+    usage: 'search'
+  });
+  return value => {
+    if (value == null) {
+      return negate;
+    }
+    const isEqual = collator.compare(trimmedValue, value.toString()) === 0;
+    return negate ? !isEqual : isEqual;
+  };
+};
+const createEmptyFilterFn = negate => () => {
+  return value => {
+    const isEmpty = value === '' || value == null;
+    return negate ? !isEmpty : isEmpty;
+  };
+};
 export const getGridStringOperators = (disableTrim = false) => [{
   value: 'contains',
-  getApplyFilterFn: filterItem => {
-    if (!filterItem.value) {
-      return null;
-    }
-    const filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
-    const filterRegex = new RegExp(escapeRegExp(filterItemValue), 'i');
-    return value => {
-      return value != null ? filterRegex.test(String(value)) : false;
-    };
-  },
+  getApplyFilterFn: createContainsFilterFn(disableTrim, false),
+  InputComponent: GridFilterInputValue
+}, {
+  value: 'doesNotContain',
+  getApplyFilterFn: createContainsFilterFn(disableTrim, true),
   InputComponent: GridFilterInputValue
 }, {
   value: 'equals',
-  getApplyFilterFn: filterItem => {
-    if (!filterItem.value) {
-      return null;
-    }
-    const filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
-    const collator = new Intl.Collator(undefined, {
-      sensitivity: 'base',
-      usage: 'search'
-    });
-    return value => {
-      return value != null ? collator.compare(filterItemValue, value.toString()) === 0 : false;
-    };
-  },
+  getApplyFilterFn: createEqualityFilterFn(disableTrim, false),
+  InputComponent: GridFilterInputValue
+}, {
+  value: 'doesNotEqual',
+  getApplyFilterFn: createEqualityFilterFn(disableTrim, true),
   InputComponent: GridFilterInputValue
 }, {
   value: 'startsWith',
@@ -72,19 +96,11 @@ export const getGridStringOperators = (disableTrim = false) => [{
   InputComponent: GridFilterInputValue
 }, {
   value: 'isEmpty',
-  getApplyFilterFn: () => {
-    return value => {
-      return value === '' || value == null;
-    };
-  },
+  getApplyFilterFn: createEmptyFilterFn(false),
   requiresFilterValue: false
 }, {
   value: 'isNotEmpty',
-  getApplyFilterFn: () => {
-    return value => {
-      return value !== '' && value != null;
-    };
-  },
+  getApplyFilterFn: createEmptyFilterFn(true),
   requiresFilterValue: false
 }, {
   value: 'isAnyOf',

package/components/columnHeaders/GridColumnHeaderItem.d.ts

@@ -23,6 +23,8 @@ interface GridColumnHeaderItemProps {
     indexInSection: number;
     sectionLength: number;
     gridHasFiller: boolean;
+    isLastUnpinned: boolean;
+    isSiblingFocused: boolean;
 }
 declare function GridColumnHeaderItem(props: GridColumnHeaderItemProps): React.JSX.Element;
 declare namespace GridColumnHeaderItem {

package/components/columnHeaders/GridColumnHeaderItem.js

@@ -22,14 +22,19 @@ const useUtilityClasses = ownerState => {
     showRightBorder,
     showLeftBorder,
     filterItemsCounter,
-    pinnedPosition
+    pinnedPosition,
+    isLastUnpinned,
+    isSiblingFocused
   } = ownerState;
   const isColumnSorted = sortDirection != null;
   const isColumnFiltered = filterItemsCounter != null && filterItemsCounter > 0;
   // todo refactor to a prop on col isNumeric or ?? ie: coltype===price wont work
   const isColumnNumeric = colDef.type === 'number';
   const slots = {
-    root: ['columnHeader', colDef.headerAlign === 'left' && 'columnHeader--alignLeft', colDef.headerAlign === 'center' && 'columnHeader--alignCenter', colDef.headerAlign === 'right' && 'columnHeader--alignRight', colDef.sortable && 'columnHeader--sortable', isDragging && 'columnHeader--moving', isColumnSorted && 'columnHeader--sorted', isColumnFiltered && 'columnHeader--filtered', isColumnNumeric && 'columnHeader--numeric', 'withBorderColor', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', pinnedPosition === 'left' && 'columnHeader--pinnedLeft', pinnedPosition === 'right' && 'columnHeader--pinnedRight'],
+    root: ['columnHeader', colDef.headerAlign === 'left' && 'columnHeader--alignLeft', colDef.headerAlign === 'center' && 'columnHeader--alignCenter', colDef.headerAlign === 'right' && 'columnHeader--alignRight', colDef.sortable && 'columnHeader--sortable', isDragging && 'columnHeader--moving', isColumnSorted && 'columnHeader--sorted', isColumnFiltered && 'columnHeader--filtered', isColumnNumeric && 'columnHeader--numeric', 'withBorderColor', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', pinnedPosition === 'left' && 'columnHeader--pinnedLeft', pinnedPosition === 'right' && 'columnHeader--pinnedRight',
+    // TODO: Remove classes below and restore `:has` selectors when they are supported in jsdom
+    // See https://github.com/mui/mui-x/pull/14559
+    isLastUnpinned && 'columnHeader--lastUnpinned', isSiblingFocused && 'columnHeader--siblingFocused'],
     draggableContainer: ['columnHeaderDraggableContainer'],
     titleContainer: ['columnHeaderTitleContainer'],
     titleContainerContent: ['columnHeaderTitleContainerContent']
@@ -209,7 +214,9 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaderItem.propTypes = {
   indexInSection: PropTypes.number.isRequired,
   isDragging: PropTypes.bool.isRequired,
   isLast: PropTypes.bool.isRequired,
+  isLastUnpinned: PropTypes.bool.isRequired,
   isResizing: PropTypes.bool.isRequired,
+  isSiblingFocused: PropTypes.bool.isRequired,
   pinnedPosition: PropTypes.oneOf(['left', 'right']),
   sectionLength: PropTypes.number.isRequired,
   separatorSide: PropTypes.oneOf(['left', 'right']),

package/components/columnHeaders/GridColumnHeaderTitle.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className"];
+const _excluded = ["className", "aria-label"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -31,6 +31,8 @@ const GridColumnHeaderTitleRoot = styled('div', {
   lineHeight: 'normal'
 });
 const ColumnHeaderInnerTitle = /*#__PURE__*/React.forwardRef(function ColumnHeaderInnerTitle(props, ref) {
+  // Tooltip adds aria-label to the props, which is not needed since the children prop is a string
+  // See https://github.com/mui/mui-x/pull/14482
   const {
       className
     } = props,

package/components/columnHeaders/GridGenericColumnHeaderItem.js

@@ -63,8 +63,7 @@ const GridGenericColumnHeaderItem = /*#__PURE__*/React.forwardRef(function GridG
     role: "columnheader",
     tabIndex: tabIndex,
     "aria-colindex": colIndex + 1,
-    "aria-sort": ariaSort,
-    "aria-label": headerComponent == null ? label : undefined
+    "aria-sort": ariaSort
   }, other, {
     children: [/*#__PURE__*/_jsxs("div", _extends({
       className: classes.draggableContainer,

package/components/containers/GridRootStyles.js

@@ -280,12 +280,10 @@ export const GridRootStyles = styled('div', {
     // - the column has a left or right border
     // - the next column is pinned right and has a left border
     [`& .${c.columnHeader}:focus,
-      & .${c.columnHeader}:focus-within,
-      & .${c.columnHeader}:has(+ .${c.columnHeader}:focus),
-      & .${c.columnHeader}:has(+ .${c.columnHeader}:focus-within),
       & .${c['columnHeader--withLeftBorder']},
       & .${c['columnHeader--withRightBorder']},
-      & .${c.columnHeader}:has(+ .${c.filler} + .${c['columnHeader--withLeftBorder']}),
+      & .${c['columnHeader--siblingFocused']},
+      & .${c['virtualScroller--hasScrollX']} .${c['columnHeader--lastUnpinned']},
       & .${c['virtualScroller--hasScrollX']} .${c['columnHeader--last']}
       `]: {
       [`& .${c.columnSeparator}`]: {
@@ -400,9 +398,7 @@ export const GridRootStyles = styled('div', {
     '@media (hover: none)': {
       [`& .${c.columnHeader}`]: columnHeaderStyles,
       [`& .${c.columnHeader}:focus,
-        & .${c.columnHeader}:focus-within,
-        & .${c.columnHeader}:has(+ .${c.columnHeader}:focus),
-        & .${c.columnHeader}:has(+ .${c.columnHeader}:focus-within)`]: {
+        & .${c['columnHeader--siblingFocused']}`]: {
         [`.${c['columnSeparator--resizable']}`]: {
           color: (t.vars || t).palette.primary.main
         }

package/components/panel/filterPanel/GridFilterForm.js

@@ -74,7 +74,7 @@ const FilterFormOperatorInput = styled('div', {
   slot: 'FilterFormOperatorInput',
   overridesResolver: (_, styles) => styles.filterFormOperatorInput
 })({
-  width: 120
+  width: 150
 });
 const FilterFormValueInput = styled('div', {
   name: 'MuiDataGrid',

package/constants/gridClasses.d.ts

@@ -158,6 +158,16 @@ export interface GridClasses {
      * Styles applied to the last column header element.
      */
     'columnHeader--last': string;
+    /**
+     * Styles applied to the last unpinned column header item.
+     * @ignore - do not document.
+     */
+    'columnHeader--lastUnpinned': string;
+    /**
+     * Styles applied to a column header item when its sibling with a bordering separator is focused.
+     * @ignore - do not document.
+     */
+    'columnHeader--siblingFocused': string;
     /**
      * Styles applied to the header checkbox cell element.
      */

package/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hasSkeletonLoadingOverlay', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hasSkeletonLoadingOverlay', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/constants/localeTextConstants.js

@@ -45,7 +45,9 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
   filterPanelInputPlaceholder: 'Filter value',
   // Filter operators text
   filterOperatorContains: 'contains',
+  filterOperatorDoesNotContain: 'does not contain',
   filterOperatorEquals: 'equals',
+  filterOperatorDoesNotEqual: 'does not equal',
   filterOperatorStartsWith: 'starts with',
   filterOperatorEndsWith: 'ends with',
   filterOperatorIs: 'is',
@@ -65,7 +67,9 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Contains',
+  headerFilterOperatorDoesNotContain: 'Does not contain',
   headerFilterOperatorEquals: 'Equals',
+  headerFilterOperatorDoesNotEqual: 'Does not equal',
   headerFilterOperatorStartsWith: 'Starts with',
   headerFilterOperatorEndsWith: 'Ends with',
   headerFilterOperatorIs: 'Is',

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -157,6 +157,9 @@ export const useGridColumnHeaders = props => {
         columnIndex,
         computedWidth: colDef.computedWidth
       });
+      const siblingWithBorderingSeparator = pinnedPosition === GridPinnedColumnPosition.RIGHT ? renderedColumns[i - 1] : renderedColumns[i + 1];
+      const isSiblingFocused = siblingWithBorderingSeparator ? columnHeaderFocus !== null && columnHeaderFocus.field === siblingWithBorderingSeparator.field : false;
+      const isLastUnpinned = columnIndex + 1 === columnPositions.length - pinnedColumns.right.length;
       columns.push(/*#__PURE__*/_jsx(GridColumnHeaderItem, _extends({}, sortColumnLookup[colDef.field], {
         columnMenuOpen: open,
         filterItemsCounter: filterColumnLookup[colDef.field] && filterColumnLookup[colDef.field].length,
@@ -172,7 +175,9 @@ export const useGridColumnHeaders = props => {
         style: style,
         indexInSection: i,
         sectionLength: renderedColumns.length,
-        gridHasFiller: gridHasFiller
+        gridHasFiller: gridHasFiller,
+        isLastUnpinned: isLastUnpinned,
+        isSiblingFocused: isSiblingFocused
       }, other), colDef.field));
     }
     return getFillers(params, columns, 0);

package/hooks/features/editing/useGridCellEditing.js

@@ -5,12 +5,12 @@ const _excluded = ["id", "field"],
   _excluded2 = ["id", "field"];
 import * as React from 'react';
 import { unstable_useEventCallback as useEventCallback, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { warnOnce } from '@mui/x-internals/warning';
 import { useGridApiEventHandler, useGridApiOptionHandler } from "../../utils/useGridApiEventHandler.js";
 import { GridEditModes, GridCellModes } from "../../../models/gridEditRowModel.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { gridEditRowsStateSelector } from "./gridEditingSelectors.js";
 import { isPrintableKey, isPasteShortcut } from "../../../utils/keyboardUtils.js";
-import { warnOnce } from "../../../internals/utils/warning.js";
 import { gridRowsDataRowIdToIdLookupSelector } from "../rows/gridRowsSelector.js";
 import { deepClone } from "../../../utils/utils.js";
 import { GridCellEditStartReasons, GridCellEditStopReasons } from "../../../models/params/gridEditCellParams.js";

package/hooks/features/editing/useGridRowEditing.js

@@ -5,13 +5,13 @@ const _excluded = ["id"],
   _excluded2 = ["id"];
 import * as React from 'react';
 import { unstable_useEventCallback as useEventCallback, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { warnOnce } from '@mui/x-internals/warning';
 import { useGridApiEventHandler, useGridApiOptionHandler } from "../../utils/useGridApiEventHandler.js";
 import { GridEditModes, GridRowModes } from "../../../models/gridEditRowModel.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { gridEditRowsStateSelector } from "./gridEditingSelectors.js";
 import { isPrintableKey, isPasteShortcut } from "../../../utils/keyboardUtils.js";
 import { gridColumnFieldsSelector, gridVisibleColumnFieldsSelector } from "../columns/gridColumnsSelector.js";
-import { warnOnce } from "../../../internals/utils/warning.js";
 import { gridRowsDataRowIdToIdLookupSelector } from "../rows/gridRowsSelector.js";
 import { deepClone } from "../../../utils/utils.js";
 import { GridRowEditStopReasons, GridRowEditStartReasons } from "../../../models/params/gridRowParams.js";

package/hooks/features/export/serializers/csvSerializer.js

@@ -1,5 +1,5 @@
+import { warnOnce } from '@mui/x-internals/warning';
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from "../../../../colDef/index.js";
-import { warnOnce } from "../../../../internals/utils/warning.js";
 function sanitizeCellValue(value, csvOptions) {
   if (value === null || value === undefined) {
     return '';

package/hooks/features/filter/gridFilterUtils.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import { warnOnce } from '@mui/x-internals/warning';
 import { GridLogicOperator } from "../../../models/index.js";
 import { getDefaultGridFilterModel } from "./gridFilterState.js";
-import { warnOnce } from "../../../internals/utils/warning.js";
 import { getPublicApiRef } from "../../../utils/getPublicApiRef.js";
 import { gridColumnFieldsSelector, gridColumnLookupSelector, gridVisibleColumnFieldsSelector } from "../columns/index.js";
 let hasEval;

package/hooks/features/sorting/gridSortingUtils.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { warnOnce } from "../../../internals/utils/warning.js";
+import { warnOnce } from '@mui/x-internals/warning';
 export const sanitizeSortModel = (model, disableMultipleColumnsSorting) => {
   if (disableMultipleColumnsSorting && model.length > 1) {
     if (process.env.NODE_ENV !== 'production') {

package/hooks/utils/useGridSelector.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { fastObjectShallowCompare } from '@mui/x-internals/fastObjectShallowCompare';
+import { warnOnce } from '@mui/x-internals/warning';
 import { useLazyRef } from "./useLazyRef.js";
 import { useOnMount } from "./useOnMount.js";
-import { warnOnce } from "../../internals/utils/warning.js";
 function isOutputSelector(selector) {
   return selector.acceptsApiRef;
 }

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.16.0
+ * @mui/x-data-grid v7.17.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/utils/index.d.ts

@@ -1,4 +1,3 @@
 export * from './computeSlots';
 export * from './useProps';
 export * from './propValidation';
-export * from './warning';

package/internals/utils/index.js

@@ -1,4 +1,3 @@
 export * from "./computeSlots.js";
 export * from "./useProps.js";
-export * from "./propValidation.js";
-export * from "./warning.js";
+export * from "./propValidation.js";

package/internals/utils/propValidation.js

@@ -1,4 +1,4 @@
-import { warnOnce } from "./warning.js";
+import { warnOnce } from '@mui/x-internals/warning';
 import { isNumber } from "../../utils/utils.js";
 import { GridSignature } from "../../hooks/utils/useGridApiEventHandler.js";
 export const propValidatorsDataGrid = [props => props.autoPageSize && props.autoHeight && ['MUI X: `<DataGrid autoPageSize={true} autoHeight={true} />` are not valid props.', 'You cannot use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`.', '', 'Please remove one of these two props.'].join('\n') || undefined, props => props.paginationMode === 'client' && props.paginationMeta != null && ['MUI X: Usage of the `paginationMeta` prop with client-side pagination (`paginationMode="client"`) has no effect.', '`paginationMeta` is only meant to be used with `paginationMode="server"`.'].join('\n') || undefined, props => props.signature === GridSignature.DataGrid && props.paginationMode === 'client' && isNumber(props.rowCount) && ['MUI X: Usage of the `rowCount` prop with client side pagination (`paginationMode="client"`) has no effect.', '`rowCount` is only meant to be used with `paginationMode="server"`.'].join('\n') || undefined, props => props.paginationMode === 'server' && props.rowCount == null && !props.unstable_dataSource && ["MUI X: The `rowCount` prop must be passed using `paginationMode='server'`", 'For more detail, see http://mui.com/components/data-grid/pagination/#index-based-pagination'].join('\n') || undefined];

package/locales/arSD.js

@@ -48,7 +48,9 @@ const arSDGrid = {
   filterPanelInputPlaceholder: 'ترشِيح قيمة',
   // Filter operators text
   filterOperatorContains: 'يحتوي',
+  // filterOperatorDoesNotContain: 'does not contain',
   filterOperatorEquals: 'يساوي',
+  // filterOperatorDoesNotEqual: 'does not equal',
   filterOperatorStartsWith: 'يبدأ بـ',
   filterOperatorEndsWith: 'ينتهي بـ',
   filterOperatorIs: 'يكون',
@@ -68,7 +70,9 @@ const arSDGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'يحتوي على',
+  // headerFilterOperatorDoesNotContain: 'Does not contain',
   headerFilterOperatorEquals: 'يساوي',
+  // headerFilterOperatorDoesNotEqual: 'Does not equal',
   headerFilterOperatorStartsWith: 'يبدأ ب',
   headerFilterOperatorEndsWith: 'ينتهي ب',
   headerFilterOperatorIs: 'هو',

package/locales/beBY.js

@@ -62,7 +62,9 @@ const beBYGrid = {
   filterPanelInputPlaceholder: 'Значэнне фільтра',
   // Filter operators text
   filterOperatorContains: 'змяшчае',
+  // filterOperatorDoesNotContain: 'does not contain',
   filterOperatorEquals: 'роўны',
+  // filterOperatorDoesNotEqual: 'does not equal',
   filterOperatorStartsWith: 'пачынаецца з',
   filterOperatorEndsWith: 'скончваецца на',
   filterOperatorIs: 'роўны',
@@ -83,7 +85,9 @@ const beBYGrid = {
 
   // Header filter operators text
   // headerFilterOperatorContains: 'Contains',
+  // headerFilterOperatorDoesNotContain: 'Does not contain',
   // headerFilterOperatorEquals: 'Equals',
+  // headerFilterOperatorDoesNotEqual: 'Does not equal',
   // headerFilterOperatorStartsWith: 'Starts with',
   // headerFilterOperatorEndsWith: 'Ends with',
   // headerFilterOperatorIs: 'Is',

package/locales/bgBG.js

@@ -48,7 +48,9 @@ const bgBGGrid = {
   filterPanelInputPlaceholder: 'Стойност на филтъра',
   // Filter operators text
   filterOperatorContains: 'съдържа',
+  // filterOperatorDoesNotContain: 'does not contain',
   filterOperatorEquals: 'равно',
+  // filterOperatorDoesNotEqual: 'does not equal',
   filterOperatorStartsWith: 'започва с',
   filterOperatorEndsWith: 'завършва с',
   filterOperatorIs: 'е',
@@ -68,7 +70,9 @@ const bgBGGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Съдържа',
+  // headerFilterOperatorDoesNotContain: 'Does not contain',
   headerFilterOperatorEquals: 'Равнo',
+  // headerFilterOperatorDoesNotEqual: 'Does not equal',
   headerFilterOperatorStartsWith: 'Започва с',
   headerFilterOperatorEndsWith: 'Завършва с',
   headerFilterOperatorIs: 'Равно е на',

package/locales/csCZ.js

@@ -55,7 +55,9 @@ const csCZGrid = {
   filterPanelInputPlaceholder: 'Hodnota filtru',
   // Filter operators text
   filterOperatorContains: 'obsahuje',
+  // filterOperatorDoesNotContain: 'does not contain',
   filterOperatorEquals: 'rovná se',
+  // filterOperatorDoesNotEqual: 'does not equal',
   filterOperatorStartsWith: 'začíná na',
   filterOperatorEndsWith: 'končí na',
   filterOperatorIs: 'je',
@@ -75,7 +77,9 @@ const csCZGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Obsahuje',
+  // headerFilterOperatorDoesNotContain: 'Does not contain',
   headerFilterOperatorEquals: 'Rovná se',
+  // headerFilterOperatorDoesNotEqual: 'Does not equal',
   headerFilterOperatorStartsWith: 'Začíná na',
   headerFilterOperatorEndsWith: 'Končí na',
   headerFilterOperatorIs: 'Je',

package/locales/daDK.js

@@ -48,7 +48,9 @@ const daDKGrid = {
   filterPanelInputPlaceholder: 'Filterværdi',
   // Filter operators text
   filterOperatorContains: 'indeholder',
+  // filterOperatorDoesNotContain: 'does not contain',
   filterOperatorEquals: 'lig med',
+  // filterOperatorDoesNotEqual: 'does not equal',
   filterOperatorStartsWith: 'begynder med',
   filterOperatorEndsWith: 'ender med',
   filterOperatorIs: 'er lig med',
@@ -68,7 +70,9 @@ const daDKGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Indeholder',
+  // headerFilterOperatorDoesNotContain: 'Does not contain',
   headerFilterOperatorEquals: 'Lig med',
+  // headerFilterOperatorDoesNotEqual: 'Does not equal',
   headerFilterOperatorStartsWith: 'Begynder med',
   headerFilterOperatorEndsWith: 'Ender med',
   headerFilterOperatorIs: 'Er lig med',

package/locales/deDE.js

@@ -47,7 +47,9 @@ const deDEGrid = {
   filterPanelInputPlaceholder: 'Wert filtern',
   // Filter operators text
   filterOperatorContains: 'enthält',
+  // filterOperatorDoesNotContain: 'does not contain',
   filterOperatorEquals: 'ist gleich',
+  // filterOperatorDoesNotEqual: 'does not equal',
   filterOperatorStartsWith: 'beginnt mit',
   filterOperatorEndsWith: 'endet mit',
   filterOperatorIs: 'ist',
@@ -67,7 +69,9 @@ const deDEGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Enthält',
+  // headerFilterOperatorDoesNotContain: 'Does not contain',
   headerFilterOperatorEquals: 'Gleich',
+  // headerFilterOperatorDoesNotEqual: 'Does not equal',
   headerFilterOperatorStartsWith: 'Beginnt mit',
   headerFilterOperatorEndsWith: 'Endet mit',
   headerFilterOperatorIs: 'Ist',