@mui/x-data-grid 8.3.1 → 8.4.0

package/esm/components/containers/GridRootStyles.js

@@ -657,7 +657,7 @@ export const GridRootStyles = styled('div', {
         borderTop: 'none'
       }
     },
-    [`&.${c['root--disableUserSelection']} .${c.cell}`]: {
+    [`&.${c['root--disableUserSelection']}`]: {
       userSelect: 'none'
     },
     [`& .${c['row--dynamicHeight']} > .${c.cell}`]: {

package/esm/components/panel/GridPanelContext.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const GridPanelContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") GridPanelContext.displayName = "GridPanelContext";
 export function useGridPanelContext() {
   const context = React.useContext(GridPanelContext);
   if (context === undefined) {

package/esm/components/quickFilter/QuickFilterContext.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 export const QuickFilterContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") QuickFilterContext.displayName = "QuickFilterContext";
 export function useQuickFilterContext() {
   const context = React.useContext(QuickFilterContext);
   if (context === undefined) {

package/esm/components/toolbarV8/Toolbar.js

@@ -12,6 +12,7 @@ import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridComponentRenderer } from "../../hooks/utils/useGridComponentRenderer.js";
 import { ToolbarContext } from "./ToolbarContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { sortByDocumentPosition } from "./utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -59,21 +60,11 @@ const Toolbar = forwardRef(function Toolbar(props, ref) {
   const classes = useUtilityClasses(rootProps);
   const [focusableItemId, setFocusableItemId] = React.useState(null);
   const [items, setItems] = React.useState([]);
-  const registerItem = React.useCallback((id, itemRef) => {
-    setItems(prevItems => [...prevItems, {
-      id,
-      ref: itemRef
-    }]);
-  }, []);
-  const unregisterItem = React.useCallback(id => {
-    setItems(prevItems => prevItems.filter(i => i.id !== id));
-    if (focusableItemId === id) {
-      setFocusableItemId(null);
-    }
-  }, [focusableItemId]);
+  const getSortedItems = React.useCallback(() => items.sort(sortByDocumentPosition), [items]);
   const findEnabledItem = React.useCallback((startIndex, step, wrap = true) => {
     let index = startIndex;
-    const itemCount = items.length;
+    const sortedItems = getSortedItems();
+    const itemCount = sortedItems.length;
 
     // Look for enabled items in the specified direction
     for (let i = 0; i < itemCount; i += 1) {
@@ -93,53 +84,93 @@ const Toolbar = forwardRef(function Toolbar(props, ref) {
       }
 
       // Return if we found an enabled item
-      if (!items[index].ref.current?.disabled && items[index].ref.current?.ariaDisabled !== 'true') {
+      if (!sortedItems[index].ref.current?.disabled && sortedItems[index].ref.current?.ariaDisabled !== 'true') {
         return index;
       }
     }
 
     // If we've checked all items and found none enabled
     return -1;
-  }, [items]);
+  }, [getSortedItems]);
+  const registerItem = React.useCallback((id, itemRef) => {
+    setItems(prevItems => [...prevItems, {
+      id,
+      ref: itemRef
+    }]);
+  }, []);
+  const unregisterItem = React.useCallback(id => {
+    setItems(prevItems => prevItems.filter(i => i.id !== id));
+  }, []);
   const onItemKeyDown = React.useCallback(event => {
     if (!focusableItemId) {
       return;
     }
-    const currentIndex = items.findIndex(item => item.id === focusableItemId);
+    const sortedItems = getSortedItems();
+    const focusableItemIndex = sortedItems.findIndex(item => item.id === focusableItemId);
     let newIndex = -1;
     if (event.key === 'ArrowRight') {
       event.preventDefault();
-      newIndex = findEnabledItem(currentIndex, 1);
+      newIndex = findEnabledItem(focusableItemIndex, 1);
     } else if (event.key === 'ArrowLeft') {
       event.preventDefault();
-      newIndex = findEnabledItem(currentIndex, -1);
+      newIndex = findEnabledItem(focusableItemIndex, -1);
     } else if (event.key === 'Home') {
       event.preventDefault();
       newIndex = findEnabledItem(-1, 1, false);
     } else if (event.key === 'End') {
       event.preventDefault();
-      newIndex = findEnabledItem(items.length, -1, false);
+      newIndex = findEnabledItem(sortedItems.length, -1, false);
     }
-    if (newIndex >= 0 && newIndex < items.length) {
-      const item = items[newIndex];
+
+    // TODO: Check why this is necessary
+    if (newIndex >= 0 && newIndex < sortedItems.length) {
+      const item = sortedItems[newIndex];
       setFocusableItemId(item.id);
       item.ref.current?.focus();
     }
-  }, [items, focusableItemId, findEnabledItem]);
+  }, [getSortedItems, focusableItemId, findEnabledItem]);
   const onItemFocus = React.useCallback(id => {
     if (focusableItemId !== id) {
       setFocusableItemId(id);
     }
-  }, [focusableItemId]);
+  }, [focusableItemId, setFocusableItemId]);
   const onItemDisabled = React.useCallback(id => {
-    const currentIndex = items.findIndex(item => item.id === id);
+    const sortedItems = getSortedItems();
+    const currentIndex = sortedItems.findIndex(item => item.id === id);
     const newIndex = findEnabledItem(currentIndex, 1);
-    if (newIndex >= 0 && newIndex < items.length) {
-      const item = items[newIndex];
+    if (newIndex >= 0 && newIndex < sortedItems.length) {
+      const item = sortedItems[newIndex];
       setFocusableItemId(item.id);
       item.ref.current?.focus();
     }
-  }, [items, findEnabledItem]);
+  }, [getSortedItems, findEnabledItem]);
+  React.useEffect(() => {
+    const sortedItems = getSortedItems();
+    if (sortedItems.length > 0) {
+      // Set initial focusable item
+      if (!focusableItemId) {
+        setFocusableItemId(sortedItems[0].id);
+        return;
+      }
+      const focusableItemIndex = sortedItems.findIndex(item => item.id === focusableItemId);
+      if (!sortedItems[focusableItemIndex]) {
+        // Last item has been removed from the items array
+        const item = sortedItems[sortedItems.length - 1];
+        if (item) {
+          setFocusableItemId(item.id);
+          item.ref.current?.focus();
+        }
+      } else if (focusableItemIndex === -1) {
+        // Focused item has been removed from the items array
+        const item = sortedItems[focusableItemIndex];
+        if (item) {
+          setFocusableItemId(item.id);
+          item.ref.current?.focus();
+        }
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [getSortedItems, findEnabledItem]);
   const contextValue = React.useMemo(() => ({
     focusableItemId,
     registerItem,
@@ -156,11 +187,6 @@ const Toolbar = forwardRef(function Toolbar(props, ref) {
   }, other, {
     ref
   }));
-  React.useEffect(() => {
-    if (items.length > 0) {
-      setFocusableItemId(items[0].id);
-    }
-  }, [items]);
   return /*#__PURE__*/_jsx(ToolbarContext.Provider, {
     value: contextValue,
     children: element

package/esm/components/toolbarV8/ToolbarContext.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 export const ToolbarContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") ToolbarContext.displayName = "ToolbarContext";
 export function useToolbarContext() {
   const context = React.useContext(ToolbarContext);
   if (context === undefined) {

package/esm/components/toolbarV8/utils.d.ts

@@ -0,0 +1,5 @@
+export declare function sortByDocumentPosition(a: {
+  ref: React.RefObject<HTMLButtonElement | null>;
+}, b: {
+  ref: React.RefObject<HTMLButtonElement | null>;
+}): 0 | 1 | -1;

package/esm/components/toolbarV8/utils.js

@@ -0,0 +1,17 @@
+/* eslint-disable no-bitwise */
+export function sortByDocumentPosition(a, b) {
+  if (!a.ref.current || !b.ref.current) {
+    return 0;
+  }
+  const position = a.ref.current.compareDocumentPosition(b.ref.current);
+  if (!position) {
+    return 0;
+  }
+  if (position & Node.DOCUMENT_POSITION_FOLLOWING || position & Node.DOCUMENT_POSITION_CONTAINED_BY) {
+    return -1;
+  }
+  if (position & Node.DOCUMENT_POSITION_PRECEDING || position & Node.DOCUMENT_POSITION_CONTAINS) {
+    return 1;
+  }
+  return 0;
+}

package/esm/context/GridRootPropsContext.js

@@ -2,7 +2,5 @@
 
 import * as React from 'react';
 const GridRootPropsContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== 'production') {
-  GridRootPropsContext.displayName = 'GridRootPropsContext';
-}
+if (process.env.NODE_ENV !== "production") GridRootPropsContext.displayName = "GridRootPropsContext";
 export { GridRootPropsContext };

package/esm/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -75,7 +75,7 @@ export const useGridColumnHeaders = props => {
   useGridEvent(apiRef, 'columnResizeStart', handleColumnResizeStart);
   useGridEvent(apiRef, 'columnResizeStop', handleColumnResizeStop);
   useGridEvent(apiRef, 'columnHeaderDragStart', handleColumnReorderStart);
-  useGridEvent(apiRef, 'columnHeaderDragEnd', handleColumnReorderStop);
+  useGridEvent(apiRef, 'columnHeaderDragEndNative', handleColumnReorderStop);
 
   // Helper for computation common between getColumnHeaders and getColumnGroupHeaders
   const getColumnsToRender = params => {
@@ -113,6 +113,7 @@ export const useGridColumnHeaders = props => {
       })]
     });
   };
+  if (process.env.NODE_ENV !== "production") getFillers.displayName = "getFillers";
   const getColumnHeaders = (params, other = {}) => {
     const {
       renderedColumns,
@@ -181,6 +182,7 @@ export const useGridColumnHeaders = props => {
       })]
     });
   };
+  if (process.env.NODE_ENV !== "production") getColumnHeadersRow.displayName = "getColumnHeadersRow";
   const getColumnGroupHeaders = ({
     depth,
     params

package/esm/hooks/features/overlays/useGridOverlays.js

@@ -61,6 +61,7 @@ export const useGridOverlays = () => {
       children: /*#__PURE__*/_jsx(Overlay, _extends({}, overlayProps))
     }));
   };
+  if (process.env.NODE_ENV !== "production") getOverlay.displayName = "getOverlay";
   return {
     getOverlay,
     overlaysProps

package/esm/hooks/features/pagination/useGridPaginationModel.js

@@ -138,7 +138,7 @@ export const useGridPaginationModel = (apiRef, props) => {
       return;
     }
     const dimensions = apiRef.current.getRootDimensions();
-    const maximumPageSizeWithoutScrollBar = Math.floor(dimensions.viewportInnerSize.height / rowHeight);
+    const maximumPageSizeWithoutScrollBar = Math.max(1, Math.floor(dimensions.viewportInnerSize.height / rowHeight));
     apiRef.current.setPageSize(maximumPageSizeWithoutScrollBar);
   }, [apiRef, props.autoPageSize, rowHeight]);
   const handleRowCountChange = React.useCallback(newRowCount => {

package/esm/hooks/features/rowSelection/useGridRowSelection.js

@@ -427,7 +427,7 @@ export const useGridRowSelection = (apiRef, props) => {
   const toggleAllRows = React.useCallback(value => {
     const filterModel = gridFilterModelSelector(apiRef);
     const quickFilterModel = gridQuickFilterValuesSelector(apiRef);
-    const hasFilters = filterModel.items.length > 0 || (quickFilterModel?.length || 0) > 0;
+    const hasFilters = filterModel.items.length > 0 || quickFilterModel?.some(val => val.length);
     if (!props.isRowSelectable && !props.checkboxSelectionVisibleOnly && applyAutoSelection && !hasFilters) {
       apiRef.current.setRowSelectionModel({
         type: value ? 'exclude' : 'include',

package/esm/hooks/utils/useGridPrivateApiContext.js

@@ -1,8 +1,6 @@
 import * as React from 'react';
 export const GridPrivateApiContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== 'production') {
-  GridPrivateApiContext.displayName = 'GridPrivateApiContext';
-}
+if (process.env.NODE_ENV !== "production") GridPrivateApiContext.displayName = "GridPrivateApiContext";
 export function useGridPrivateApiContext() {
   const privateApiRef = React.useContext(GridPrivateApiContext);
   if (privateApiRef === undefined) {

package/esm/index.js

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

package/esm/locales/isIS.js

@@ -58,11 +58,11 @@ const isISGrid = {
   filterPanelInputPlaceholder: 'Síu gildi',
   // Filter operators text
   filterOperatorContains: 'inniheldur',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'inniheldur ekki',
   filterOperatorEquals: 'jafnt og',
-  // filterOperatorDoesNotEqual: 'does not equal',
-  filterOperatorStartsWith: 'byrjar með',
-  filterOperatorEndsWith: 'endar með',
+  filterOperatorDoesNotEqual: 'ekki jafnt og',
+  filterOperatorStartsWith: 'byrjar á',
+  filterOperatorEndsWith: 'endar á',
   filterOperatorIs: 'er líka með',
   filterOperatorNot: 'er ekki líka með',
   filterOperatorAfter: 'eftir',
@@ -80,11 +80,11 @@ const isISGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Inniheldur',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'Inniheldur ekki',
   headerFilterOperatorEquals: 'Jafnt og',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
-  headerFilterOperatorStartsWith: 'Byrjar með',
-  headerFilterOperatorEndsWith: 'Endar með',
+  headerFilterOperatorDoesNotEqual: 'Ekki jafnt og',
+  headerFilterOperatorStartsWith: 'Byrjar á',
+  headerFilterOperatorEndsWith: 'Endar á',
   headerFilterOperatorIs: 'Er jafnt og',
   headerFilterOperatorNot: 'Er ekki jafnt og',
   headerFilterOperatorAfter: 'Eftir',

package/esm/material/variables.js

@@ -93,5 +93,10 @@ function removeOpacity(color) {
   return setOpacity(color, 1);
 }
 function formatFont(font) {
+  // Accounts for disabled typography variants
+  // See: https://github.com/mui/mui-x/issues/17812
+  if (!font) {
+    return undefined;
+  }
   return `${font.fontWeight} ${font.fontSize} / ${font.lineHeight} ${font.fontFamily}`;
 }

package/esm/models/events/gridEventLookup.d.ts

@@ -195,6 +195,15 @@ export interface GridColumnHeaderEventLookup {
     params: GridColumnHeaderParams;
     event: React.DragEvent<HTMLElement>;
   };
+  /**
+   * Fired when the dragging of a column header ends.
+   * Same as `columnHeaderDragEnd`, but also fires when the DOM element is unmounted.
+   * @ignore - do not document.
+   */
+  columnHeaderDragEndNative: {
+    params: GridColumnHeaderParams;
+    event: DragEvent;
+  };
   /**
    * Fired when a `dblclick` DOM event happens in the column header separator.
    * @ignore - do not document.

package/esm/utils/css/context.js

@@ -9,6 +9,7 @@ const CSSVariablesContext = /*#__PURE__*/React.createContext({
     href: "/unset"
   })
 });
+if (process.env.NODE_ENV !== "production") CSSVariablesContext.displayName = "CSSVariablesContext";
 export function useCSSVariablesClass() {
   return React.useContext(CSSVariablesContext).className;
 }
@@ -49,7 +50,7 @@ export function GridCSSVariablesContext(props) {
 function variablesToString(variables) {
   let output = '';
   for (const key in variables) {
-    if (Object.hasOwn(variables, key)) {
+    if (Object.hasOwn(variables, key) && variables[key] !== undefined) {
       output += `${key}:${variables[key]};`;
     }
   }

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -83,7 +83,7 @@ const useGridColumnHeaders = props => {
   (0, _useGridEvent.useGridEvent)(apiRef, 'columnResizeStart', handleColumnResizeStart);
   (0, _useGridEvent.useGridEvent)(apiRef, 'columnResizeStop', handleColumnResizeStop);
   (0, _useGridEvent.useGridEvent)(apiRef, 'columnHeaderDragStart', handleColumnReorderStart);
-  (0, _useGridEvent.useGridEvent)(apiRef, 'columnHeaderDragEnd', handleColumnReorderStop);
+  (0, _useGridEvent.useGridEvent)(apiRef, 'columnHeaderDragEndNative', handleColumnReorderStop);
 
   // Helper for computation common between getColumnHeaders and getColumnGroupHeaders
   const getColumnsToRender = params => {
@@ -121,6 +121,7 @@ const useGridColumnHeaders = props => {
       })]
     });
   };
+  if (process.env.NODE_ENV !== "production") getFillers.displayName = "getFillers";
   const getColumnHeaders = (params, other = {}) => {
     const {
       renderedColumns,
@@ -189,6 +190,7 @@ const useGridColumnHeaders = props => {
       })]
     });
   };
+  if (process.env.NODE_ENV !== "production") getColumnHeadersRow.displayName = "getColumnHeadersRow";
   const getColumnGroupHeaders = ({
     depth,
     params

package/hooks/features/overlays/useGridOverlays.js

@@ -68,6 +68,7 @@ const useGridOverlays = () => {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Overlay, (0, _extends2.default)({}, overlayProps))
     }));
   };
+  if (process.env.NODE_ENV !== "production") getOverlay.displayName = "getOverlay";
   return {
     getOverlay,
     overlaysProps

package/hooks/features/pagination/useGridPaginationModel.js

@@ -147,7 +147,7 @@ const useGridPaginationModel = (apiRef, props) => {
       return;
     }
     const dimensions = apiRef.current.getRootDimensions();
-    const maximumPageSizeWithoutScrollBar = Math.floor(dimensions.viewportInnerSize.height / rowHeight);
+    const maximumPageSizeWithoutScrollBar = Math.max(1, Math.floor(dimensions.viewportInnerSize.height / rowHeight));
     apiRef.current.setPageSize(maximumPageSizeWithoutScrollBar);
   }, [apiRef, props.autoPageSize, rowHeight]);
   const handleRowCountChange = React.useCallback(newRowCount => {

package/hooks/features/rowSelection/useGridRowSelection.js

@@ -436,7 +436,7 @@ const useGridRowSelection = (apiRef, props) => {
   const toggleAllRows = React.useCallback(value => {
     const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(apiRef);
     const quickFilterModel = (0, _gridFilterSelector.gridQuickFilterValuesSelector)(apiRef);
-    const hasFilters = filterModel.items.length > 0 || (quickFilterModel?.length || 0) > 0;
+    const hasFilters = filterModel.items.length > 0 || quickFilterModel?.some(val => val.length);
     if (!props.isRowSelectable && !props.checkboxSelectionVisibleOnly && applyAutoSelection && !hasFilters) {
       apiRef.current.setRowSelectionModel({
         type: value ? 'exclude' : 'include',

package/hooks/utils/useGridPrivateApiContext.js

@@ -8,9 +8,7 @@ exports.GridPrivateApiContext = void 0;
 exports.useGridPrivateApiContext = useGridPrivateApiContext;
 var React = _interopRequireWildcard(require("react"));
 const GridPrivateApiContext = exports.GridPrivateApiContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== 'production') {
-  GridPrivateApiContext.displayName = 'GridPrivateApiContext';
-}
+if (process.env.NODE_ENV !== "production") GridPrivateApiContext.displayName = "GridPrivateApiContext";
 function useGridPrivateApiContext() {
   const privateApiRef = React.useContext(GridPrivateApiContext);
   if (privateApiRef === undefined) {

package/index.js

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

package/locales/isIS.js

@@ -64,11 +64,11 @@ const isISGrid = {
   filterPanelInputPlaceholder: 'Síu gildi',
   // Filter operators text
   filterOperatorContains: 'inniheldur',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'inniheldur ekki',
   filterOperatorEquals: 'jafnt og',
-  // filterOperatorDoesNotEqual: 'does not equal',
-  filterOperatorStartsWith: 'byrjar með',
-  filterOperatorEndsWith: 'endar með',
+  filterOperatorDoesNotEqual: 'ekki jafnt og',
+  filterOperatorStartsWith: 'byrjar á',
+  filterOperatorEndsWith: 'endar á',
   filterOperatorIs: 'er líka með',
   filterOperatorNot: 'er ekki líka með',
   filterOperatorAfter: 'eftir',
@@ -86,11 +86,11 @@ const isISGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Inniheldur',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'Inniheldur ekki',
   headerFilterOperatorEquals: 'Jafnt og',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
-  headerFilterOperatorStartsWith: 'Byrjar með',
-  headerFilterOperatorEndsWith: 'Endar með',
+  headerFilterOperatorDoesNotEqual: 'Ekki jafnt og',
+  headerFilterOperatorStartsWith: 'Byrjar á',
+  headerFilterOperatorEndsWith: 'Endar á',
   headerFilterOperatorIs: 'Er jafnt og',
   headerFilterOperatorNot: 'Er ekki jafnt og',
   headerFilterOperatorAfter: 'Eftir',

package/material/variables.js

@@ -99,5 +99,10 @@ function removeOpacity(color) {
   return setOpacity(color, 1);
 }
 function formatFont(font) {
+  // Accounts for disabled typography variants
+  // See: https://github.com/mui/mui-x/issues/17812
+  if (!font) {
+    return undefined;
+  }
   return `${font.fontWeight} ${font.fontSize} / ${font.lineHeight} ${font.fontFamily}`;
 }

package/models/events/gridEventLookup.d.ts

@@ -195,6 +195,15 @@ export interface GridColumnHeaderEventLookup {
     params: GridColumnHeaderParams;
     event: React.DragEvent<HTMLElement>;
   };
+  /**
+   * Fired when the dragging of a column header ends.
+   * Same as `columnHeaderDragEnd`, but also fires when the DOM element is unmounted.
+   * @ignore - do not document.
+   */
+  columnHeaderDragEndNative: {
+    params: GridColumnHeaderParams;
+    event: DragEvent;
+  };
   /**
    * Fired when a `dblclick` DOM event happens in the column header separator.
    * @ignore - do not document.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "8.3.1",
+  "version": "8.4.0",
   "author": "MUI Team",
   "description": "The Community plan edition of the MUI X Data Grid components.",
   "main": "./index.js",
@@ -45,7 +45,7 @@
     "prop-types": "^15.8.1",
     "reselect": "^5.1.1",
     "use-sync-external-store": "^1.5.0",
-    "@mui/x-internals": "8.3.1"
+    "@mui/x-internals": "8.4.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/utils/css/context.js

@@ -19,6 +19,7 @@ const CSSVariablesContext = /*#__PURE__*/React.createContext({
     href: "/unset"
   })
 });
+if (process.env.NODE_ENV !== "production") CSSVariablesContext.displayName = "CSSVariablesContext";
 function useCSSVariablesClass() {
   return React.useContext(CSSVariablesContext).className;
 }
@@ -59,7 +60,7 @@ function GridCSSVariablesContext(props) {
 function variablesToString(variables) {
   let output = '';
   for (const key in variables) {
-    if (Object.hasOwn(variables, key)) {
+    if (Object.hasOwn(variables, key) && variables[key] !== undefined) {
       output += `${key}:${variables[key]};`;
     }
   }