@mui/x-internals 8.4.0 → 8.5.1

package/CHANGELOG.md

@@ -5,6 +5,221 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.5.1
+
+<!-- generated comparing v8.5.0..master -->
+
+_Jun 5, 2025_
+
+We'd like to extend a big thank you to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Allow exporting pie charts
+- 📚 Documentation improvements
+- 🌎 Improve Portuguese (ptPT) translations on the Data Grid
+- 🌎 Improve Portuguese (ptPT, ptBR) translations on Charts
+- 🌎 Improve Arabic (ar-SD) locale
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions: @moosekebab, @TiagoPortfolio.
+The following are all team members who have contributed to this release:
+@alexfauquette, @bernardobelchior, @JCQuintas, @KenanYusuf, @LukasTy, @michelengelen, @arminmeh.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.5.1`
+
+- [DataGrid] Fix `registerPipeProcessor()` for Node v20 (#18241) @arminmeh
+- [DataGrid] Fix background color in column header filler cells (#18188) @KenanYusuf
+- [DataGrid] Keep pipe pre-processors execution order when callback reference changes (#17558) @arminmeh
+- [DataGrid] Use `useComponentRenderer` from x-internals (#18203) @bernardobelchior
+- [l10n] Improve Arabic (ar-SD) locale (#17959) @moosekebab
+- [l10n] Improve Portuguese from Portugal (pt-PT) locale (#18064) @TiagoPortfolio
+
+#### `@mui/x-data-grid-pro@8.5.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-data-grid@8.5.1`, plus:
+
+- [DataGridPro] Skip rendering detail panels of the rows turned into skeleton rows with lazy loading (#17958) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.5.1` [![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@8.5.1`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.5.1`
+
+- [pickers] Fix `transformOrigin` resolving based on popper `placement` (#18206) @LukasTy
+
+#### `@mui/x-date-pickers-pro@8.5.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-date-pickers@8.5.1`.
+
+### Charts
+
+#### `@mui/x-charts@8.5.1`
+
+- [charts] Allow skipping tooltip render (#18050) @alexfauquette
+- [charts] Fix act warnings in toolbar tests (#18212) @JCQuintas
+- [charts] Fix prop typo in `extendVertically` (#18211) @JCQuintas
+- [charts] Fix responsive height for ChartsWrapper (#18183) @alexfauquette
+- [charts] Improve charts toolbar accessibility (#18056) @bernardobelchior
+- [charts] Let line series propagate null from the dataset (#18223) @alexfauquette
+- [l10n] Add Portuguese locales for charts (pt-PT, pt-BR) (#18069) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.5.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@8.5.1`, plus:
+
+- [charts-pro] Add `linear-sharp` curve as alternative to square edge (#17966) @JCQuintas
+- [charts-pro] Add correct classes to `FunnelSectionLabel` (#18061) @JCQuintas
+- [charts-pro] Allow exporting a pie chart (#18063) @bernardobelchior
+- [charts-pro] Fix initial render for zoom slider selection (#18208) @bernardobelchior
+- [charts-pro] Fix props being passed to DOM in FunnelChart (#18192) @JCQuintas
+- [charts-pro] Show axis value in zoom slider tooltip (#18054) @bernardobelchior
+- [charts-pro] Render the toolbar in the heatmap chart (#18247) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.5.1`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.5.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-tree-view@8.5.1`.
+
+### Docs
+
+- [docs] Update `valueFormatter` signature in migration guide (#18226) @michelengelen
+
+### Core
+
+- chore(deps): bump @next/eslint-plugin-next to 15.3.3 (#18155) @renovate[bot]
+- chore(deps): bump @types/lodash to ^4.17.17 (#17990) @renovate[bot]
+- chore(deps): bump babel (#18157) @renovate[bot]
+- chore(deps): bump eslint to ^9.28.0 (#17352) @renovate[bot]
+- chore(deps): bump material ui (#17802) @renovate[bot]
+- chore(deps): bump next to ^15.3.3 (#18159) @renovate[bot]
+- chore(deps): bump ossf/scorecard-action action to v2.4.2 (#18160) @renovate[bot]
+- chore(deps): bump react-router to ^7.6.1 (#18162) @renovate[bot]
+- chore(deps): bump yargs to ^18.0.0 (#18169) @renovate[bot]
+- [code-infra] Different approach to console testing for `processRowUpdate` (#18213) @JCQuintas
+- [code-infra] Fix act warnings in DataGrid/toolbar (#18207) @JCQuintas
+- [code-infra] Remove `istanbul` references (#18194) @JCQuintas
+- [code-infra] Remove codesandbox:ci (#18179) @JCQuintas
+- [code-infra] Replace `mocha` with `vitest` on e2e and regression tests (#18071) @JCQuintas
+- [code-infra] Upgrade @mui/internal-test-utils (#18191) @JCQuintas
+- [code-infra] Use vitest for `no-direct-state-access` tests (#18209) @JCQuintas
+- [infra] Improve test setup (#18228) @LukasTy
+- [infra] Update bug and feature request templates to standardize label types (#18198) @michelengelen
+- [infra] Use `playwright` docker image (#18186) @LukasTy
+
+## 8.5.0
+
+_May 29, 2025_
+
+We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Add support for exporting `RadarChartPro`, `FunnelChart` and `Heatmap` as image and PDF.
+- 📊 `RadarChart` is now stable.
+
+Special thanks go out to the community members for their valuable contributions:
+@xBlizZer, @sai6855, @alisasanib.
+Following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @KenanYusuf, @LukasTy, @oliviertassinari.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.5.0`
+
+- [DataGrid] Avoid ResizeObserver loop error (#17984) @cherniavskii
+- [DataGrid] Fix column management `toggleColumn` event type (#18023) @KenanYusuf
+- [DataGrid] Remove unnecessary `any` type (#17979) @sai6855
+
+#### `@mui/x-data-grid-pro@8.5.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@8.5.0`, plus:
+
+- [DataGridPro] Allow multi sorting without modifier key (#17925) @cherniavskii
+- [DataGridPro] Row reordering icon improvements (#17947) @KenanYusuf
+- [DataGridPro] Fix pinned columns order in column management (#17950) @alisasanib
+
+#### `@mui/x-data-grid-premium@8.5.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@8.5.0`, plus:
+
+- [DataGridPremium] Export `GridApiPremium` type (#18037) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.5.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.5.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@8.5.0`, plus:
+
+- [DateRangePicker] Allow to override the format in the field (#17972) @flaviendelangle
+
+### Charts
+
+#### `@mui/x-charts@8.5.0`
+
+- [charts] Add `render` prop to charts toolbar components (#17649) @bernardobelchior
+- [charts] Add configurable slots to toolbar (#17712) @bernardobelchior
+- [charts] Export `useFunnelSeries` and `useRadarSeries` (#18034) @JCQuintas
+- [charts] Expose `ChartApi` through context (#18004) @bernardobelchior
+- [charts] Mark Radar chart as stable (#17946) @alexfauquette
+- [charts] Only update store if interaction item is different (#17851) @bernardobelchior
+- [charts] Reuse shared date utils (#18014) @JCQuintas
+- [charts] Use Map for string cache instead of object (#17982) @bernardobelchior
+- [charts] Fix Population pyramid demo (#17987) @oliviertassinari
+
+#### `@mui/x-charts-pro@8.5.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-charts@8.5.0`, plus:
+
+- [charts-pro] Add range selection to zoom slider (#17949) @bernardobelchior
+- [charts-pro] Allow configuring zoom slider tooltip (#18030) @bernardobelchior
+- [charts-pro] Allow exporting a funnel chart (#17957) @bernardobelchior
+- [charts-pro] Allow exporting a heatmap chart (#17916) @bernardobelchior
+- [charts-pro] Allow exporting a radar chart (#17968) @bernardobelchior
+- [charts-pro] Always show both zoom slider tooltips (#18027) @bernardobelchior
+- [charts-pro] Show zoom slider tooltip when selecting range (#18028) @bernardobelchior
+- [charts-pro] Split `ChartAxisZoomSlider` into smaller files (#18011) @bernardobelchior
+- [charts-pro] Update zoom slider range selection cursor (#17977) @bernardobelchior
+- [charts-pro] Add support for Heatmap legend (#17943) @alexfauquette
+
+### Tree View
+
+#### `@mui/x-tree-view@8.5.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.5.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-tree-view@8.5.0`.
+
+### Docs
+
+- [docs] Fix derived column pivoting demo crash (#17944) @arminmeh
+- [docs] Fix light/dark mode blink on pickers overview (#18002) @alexfauquette
+- [docs] Fix scatter shape demo causing horizontal overflow (#17974) @bernardobelchior
+
+### Core
+
+- [code-infra] Add bundle size monitor (#17754) @Janpot
+- [code-infra] Enable `babel-plugin-display-name` in vitest (#17903) @JCQuintas
+- [infra] Remove last deprecated `ponyfillGlobal` usage (#18003) @LukasTy
+- [infra] Use `babel-plugin-display-name` from npm (#18040) @LukasTy
+- [x-telemetry] Remove deprecated `ponyfillGlobal` (#17986) @xBlizZer
+
 ## 8.4.0
 
 _May 21, 2025_

package/ToolbarContext/ToolbarContext.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export interface ToolbarContextValue {
+  focusableItemId: string | null;
+  registerItem: (id: string, ref: React.RefObject<HTMLButtonElement | null>) => void;
+  unregisterItem: (id: string) => void;
+  onItemKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+  onItemFocus: (id: string) => void;
+  onItemDisabled: (id: string, disabled: boolean) => void;
+}
+export declare const ToolbarContext: React.Context<ToolbarContextValue | undefined>;
+export declare function useToolbarContext(): ToolbarContextValue;
+export declare function ToolbarContextProvider({
+  children
+}: React.PropsWithChildren): React.JSX.Element;

package/ToolbarContext/ToolbarContext.js

@@ -0,0 +1,171 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToolbarContext = void 0;
+exports.ToolbarContextProvider = ToolbarContextProvider;
+exports.useToolbarContext = useToolbarContext;
+var React = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+const ToolbarContext = exports.ToolbarContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") ToolbarContext.displayName = "ToolbarContext";
+function useToolbarContext() {
+  const context = React.useContext(ToolbarContext);
+  if (context === undefined) {
+    throw new Error('MUI X: Missing context. Toolbar subcomponents must be placed within a <Toolbar /> component.');
+  }
+  return context;
+}
+function ToolbarContextProvider({
+  children
+}) {
+  const [focusableItemId, setFocusableItemId] = React.useState(null);
+  const focusableItemIdRef = React.useRef(focusableItemId);
+  const [items, setItems] = React.useState([]);
+  const getSortedItems = React.useCallback(() => items.sort(sortByDocumentPosition), [items]);
+  const findEnabledItem = React.useCallback((startIndex, step, wrap = true) => {
+    let index = startIndex;
+    const sortedItems = getSortedItems();
+    const itemCount = sortedItems.length;
+
+    // Look for enabled items in the specified direction
+    for (let i = 0; i < itemCount; i += 1) {
+      index += step;
+
+      // Handle wrapping around the ends
+      if (index >= itemCount) {
+        if (!wrap) {
+          return -1;
+        }
+        index = 0;
+      } else if (index < 0) {
+        if (!wrap) {
+          return -1;
+        }
+        index = itemCount - 1;
+      }
+
+      // Return if we found an enabled item
+      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;
+  }, [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 sortedItems = getSortedItems();
+    const focusableItemIndex = sortedItems.findIndex(item => item.id === focusableItemId);
+    let newIndex = -1;
+    if (event.key === 'ArrowRight') {
+      event.preventDefault();
+      newIndex = findEnabledItem(focusableItemIndex, 1);
+    } else if (event.key === 'ArrowLeft') {
+      event.preventDefault();
+      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(sortedItems.length, -1, false);
+    }
+
+    // TODO: Check why this is necessary
+    if (newIndex >= 0 && newIndex < sortedItems.length) {
+      const item = sortedItems[newIndex];
+      setFocusableItemId(item.id);
+      item.ref.current?.focus();
+    }
+  }, [getSortedItems, focusableItemId, findEnabledItem]);
+  const onItemFocus = React.useCallback(id => {
+    if (focusableItemId !== id) {
+      setFocusableItemId(id);
+    }
+  }, [focusableItemId, setFocusableItemId]);
+  const onItemDisabled = React.useCallback(id => {
+    const sortedItems = getSortedItems();
+    const currentIndex = sortedItems.findIndex(item => item.id === id);
+    const newIndex = findEnabledItem(currentIndex, 1);
+    if (newIndex >= 0 && newIndex < sortedItems.length) {
+      const item = sortedItems[newIndex];
+      setFocusableItemId(item.id);
+      item.ref.current?.focus();
+    }
+  }, [getSortedItems, findEnabledItem]);
+  React.useEffect(() => {
+    focusableItemIdRef.current = focusableItemId;
+  }, [focusableItemId]);
+  React.useEffect(() => {
+    const sortedItems = getSortedItems();
+    if (sortedItems.length > 0) {
+      // Set initial focusable item
+      if (!focusableItemIdRef.current) {
+        setFocusableItemId(sortedItems[0].id);
+        return;
+      }
+      const focusableItemIndex = sortedItems.findIndex(item => item.id === focusableItemIdRef.current);
+      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();
+        }
+      }
+    }
+  }, [getSortedItems, findEnabledItem]);
+  const contextValue = React.useMemo(() => ({
+    focusableItemId,
+    registerItem,
+    unregisterItem,
+    onItemKeyDown,
+    onItemFocus,
+    onItemDisabled
+  }), [focusableItemId, registerItem, unregisterItem, onItemKeyDown, onItemFocus, onItemDisabled]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolbarContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+}
+
+/* eslint-disable no-bitwise */
+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/ToolbarContext/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ToolbarContext.js";
+export * from "./useRegisterToolbarButton.js";

package/ToolbarContext/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ToolbarContext = require("./ToolbarContext");
+Object.keys(_ToolbarContext).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ToolbarContext[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ToolbarContext[key];
+    }
+  });
+});
+var _useRegisterToolbarButton = require("./useRegisterToolbarButton");
+Object.keys(_useRegisterToolbarButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useRegisterToolbarButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useRegisterToolbarButton[key];
+    }
+  });
+});

package/ToolbarContext/useRegisterToolbarButton.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+interface ToolbarItemProps extends Pick<React.ComponentProps<'button'>, 'onKeyDown' | 'onFocus' | 'aria-disabled' | 'disabled'> {}
+export declare function useRegisterToolbarButton(props: ToolbarItemProps, ref: React.RefObject<HTMLButtonElement | null>): {
+  tabIndex: number;
+  disabled: boolean | undefined;
+  'aria-disabled': (boolean | "false" | "true") | undefined;
+  onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+  onFocus: (event: React.FocusEvent<HTMLButtonElement>) => void;
+};
+export {};

package/ToolbarContext/useRegisterToolbarButton.js

@@ -0,0 +1,62 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRegisterToolbarButton = useRegisterToolbarButton;
+var React = _interopRequireWildcard(require("react"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _ToolbarContext = require("./ToolbarContext");
+function useRegisterToolbarButton(props, ref) {
+  const {
+    onKeyDown,
+    onFocus,
+    disabled,
+    'aria-disabled': ariaDisabled
+  } = props;
+  const id = (0, _useId.default)();
+  const {
+    focusableItemId,
+    registerItem,
+    unregisterItem,
+    onItemKeyDown,
+    onItemFocus,
+    onItemDisabled
+  } = (0, _ToolbarContext.useToolbarContext)();
+  const handleKeyDown = event => {
+    onItemKeyDown(event);
+    onKeyDown?.(event);
+  };
+  const handleFocus = event => {
+    onItemFocus(id);
+    onFocus?.(event);
+  };
+  React.useEffect(() => {
+    registerItem(id, ref);
+    return () => unregisterItem(id);
+  }, [id, ref, registerItem, unregisterItem]);
+  const previousDisabled = React.useRef(disabled);
+  React.useEffect(() => {
+    if (previousDisabled.current !== disabled && disabled === true) {
+      onItemDisabled(id, disabled);
+    }
+    previousDisabled.current = disabled;
+  }, [disabled, id, onItemDisabled]);
+  const previousAriaDisabled = React.useRef(ariaDisabled);
+  React.useEffect(() => {
+    if (previousAriaDisabled.current !== ariaDisabled && ariaDisabled === true) {
+      onItemDisabled(id, true);
+    }
+    previousAriaDisabled.current = ariaDisabled;
+  }, [ariaDisabled, id, onItemDisabled]);
+  return {
+    tabIndex: focusableItemId === id ? 0 : -1,
+    disabled,
+    'aria-disabled': ariaDisabled,
+    onKeyDown: handleKeyDown,
+    onFocus: handleFocus
+  };
+}

package/esm/ToolbarContext/ToolbarContext.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export interface ToolbarContextValue {
+  focusableItemId: string | null;
+  registerItem: (id: string, ref: React.RefObject<HTMLButtonElement | null>) => void;
+  unregisterItem: (id: string) => void;
+  onItemKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+  onItemFocus: (id: string) => void;
+  onItemDisabled: (id: string, disabled: boolean) => void;
+}
+export declare const ToolbarContext: React.Context<ToolbarContextValue | undefined>;
+export declare function useToolbarContext(): ToolbarContextValue;
+export declare function ToolbarContextProvider({
+  children
+}: React.PropsWithChildren): React.JSX.Element;

package/esm/ToolbarContext/ToolbarContext.js

@@ -0,0 +1,163 @@
+'use client';
+
+import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+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) {
+    throw new Error('MUI X: Missing context. Toolbar subcomponents must be placed within a <Toolbar /> component.');
+  }
+  return context;
+}
+export function ToolbarContextProvider({
+  children
+}) {
+  const [focusableItemId, setFocusableItemId] = React.useState(null);
+  const focusableItemIdRef = React.useRef(focusableItemId);
+  const [items, setItems] = React.useState([]);
+  const getSortedItems = React.useCallback(() => items.sort(sortByDocumentPosition), [items]);
+  const findEnabledItem = React.useCallback((startIndex, step, wrap = true) => {
+    let index = startIndex;
+    const sortedItems = getSortedItems();
+    const itemCount = sortedItems.length;
+
+    // Look for enabled items in the specified direction
+    for (let i = 0; i < itemCount; i += 1) {
+      index += step;
+
+      // Handle wrapping around the ends
+      if (index >= itemCount) {
+        if (!wrap) {
+          return -1;
+        }
+        index = 0;
+      } else if (index < 0) {
+        if (!wrap) {
+          return -1;
+        }
+        index = itemCount - 1;
+      }
+
+      // Return if we found an enabled item
+      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;
+  }, [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 sortedItems = getSortedItems();
+    const focusableItemIndex = sortedItems.findIndex(item => item.id === focusableItemId);
+    let newIndex = -1;
+    if (event.key === 'ArrowRight') {
+      event.preventDefault();
+      newIndex = findEnabledItem(focusableItemIndex, 1);
+    } else if (event.key === 'ArrowLeft') {
+      event.preventDefault();
+      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(sortedItems.length, -1, false);
+    }
+
+    // TODO: Check why this is necessary
+    if (newIndex >= 0 && newIndex < sortedItems.length) {
+      const item = sortedItems[newIndex];
+      setFocusableItemId(item.id);
+      item.ref.current?.focus();
+    }
+  }, [getSortedItems, focusableItemId, findEnabledItem]);
+  const onItemFocus = React.useCallback(id => {
+    if (focusableItemId !== id) {
+      setFocusableItemId(id);
+    }
+  }, [focusableItemId, setFocusableItemId]);
+  const onItemDisabled = React.useCallback(id => {
+    const sortedItems = getSortedItems();
+    const currentIndex = sortedItems.findIndex(item => item.id === id);
+    const newIndex = findEnabledItem(currentIndex, 1);
+    if (newIndex >= 0 && newIndex < sortedItems.length) {
+      const item = sortedItems[newIndex];
+      setFocusableItemId(item.id);
+      item.ref.current?.focus();
+    }
+  }, [getSortedItems, findEnabledItem]);
+  React.useEffect(() => {
+    focusableItemIdRef.current = focusableItemId;
+  }, [focusableItemId]);
+  React.useEffect(() => {
+    const sortedItems = getSortedItems();
+    if (sortedItems.length > 0) {
+      // Set initial focusable item
+      if (!focusableItemIdRef.current) {
+        setFocusableItemId(sortedItems[0].id);
+        return;
+      }
+      const focusableItemIndex = sortedItems.findIndex(item => item.id === focusableItemIdRef.current);
+      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();
+        }
+      }
+    }
+  }, [getSortedItems, findEnabledItem]);
+  const contextValue = React.useMemo(() => ({
+    focusableItemId,
+    registerItem,
+    unregisterItem,
+    onItemKeyDown,
+    onItemFocus,
+    onItemDisabled
+  }), [focusableItemId, registerItem, unregisterItem, onItemKeyDown, onItemFocus, onItemDisabled]);
+  return /*#__PURE__*/_jsx(ToolbarContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+}
+
+/* eslint-disable no-bitwise */
+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/ToolbarContext/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ToolbarContext.js";
+export * from "./useRegisterToolbarButton.js";

package/esm/ToolbarContext/index.js

@@ -0,0 +1,2 @@
+export * from "./ToolbarContext.js";
+export * from "./useRegisterToolbarButton.js";

package/esm/ToolbarContext/useRegisterToolbarButton.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+interface ToolbarItemProps extends Pick<React.ComponentProps<'button'>, 'onKeyDown' | 'onFocus' | 'aria-disabled' | 'disabled'> {}
+export declare function useRegisterToolbarButton(props: ToolbarItemProps, ref: React.RefObject<HTMLButtonElement | null>): {
+  tabIndex: number;
+  disabled: boolean | undefined;
+  'aria-disabled': (boolean | "false" | "true") | undefined;
+  onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+  onFocus: (event: React.FocusEvent<HTMLButtonElement>) => void;
+};
+export {};

package/esm/ToolbarContext/useRegisterToolbarButton.js

@@ -0,0 +1,55 @@
+'use client';
+
+import * as React from 'react';
+import useId from '@mui/utils/useId';
+import { useToolbarContext } from "./ToolbarContext.js";
+export function useRegisterToolbarButton(props, ref) {
+  const {
+    onKeyDown,
+    onFocus,
+    disabled,
+    'aria-disabled': ariaDisabled
+  } = props;
+  const id = useId();
+  const {
+    focusableItemId,
+    registerItem,
+    unregisterItem,
+    onItemKeyDown,
+    onItemFocus,
+    onItemDisabled
+  } = useToolbarContext();
+  const handleKeyDown = event => {
+    onItemKeyDown(event);
+    onKeyDown?.(event);
+  };
+  const handleFocus = event => {
+    onItemFocus(id);
+    onFocus?.(event);
+  };
+  React.useEffect(() => {
+    registerItem(id, ref);
+    return () => unregisterItem(id);
+  }, [id, ref, registerItem, unregisterItem]);
+  const previousDisabled = React.useRef(disabled);
+  React.useEffect(() => {
+    if (previousDisabled.current !== disabled && disabled === true) {
+      onItemDisabled(id, disabled);
+    }
+    previousDisabled.current = disabled;
+  }, [disabled, id, onItemDisabled]);
+  const previousAriaDisabled = React.useRef(ariaDisabled);
+  React.useEffect(() => {
+    if (previousAriaDisabled.current !== ariaDisabled && ariaDisabled === true) {
+      onItemDisabled(id, true);
+    }
+    previousAriaDisabled.current = ariaDisabled;
+  }, [ariaDisabled, id, onItemDisabled]);
+  return {
+    tabIndex: focusableItemId === id ? 0 : -1,
+    disabled,
+    'aria-disabled': ariaDisabled,
+    onKeyDown: handleKeyDown,
+    onFocus: handleFocus
+  };
+}

package/esm/useComponentRenderer/index.d.ts

@@ -0,0 +1 @@
+export * from "./useComponentRenderer.js";

package/esm/useComponentRenderer/index.js

@@ -0,0 +1 @@
+export * from "./useComponentRenderer.js";

package/esm/useComponentRenderer/useComponentRenderer.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export type RenderProp<Props, State = {}> = ((props: Props, state: State) => React.ReactElement<unknown>) | React.ReactElement<Props>;
+/**
+ * Resolves the rendering logic for a component.
+ * Handles three scenarios:
+ * 1. A render function that receives props and state
+ * 2. A React element
+ * 3. A default element
+ *
+ * @ignore - internal hook.
+ */
+export declare function useComponentRenderer<Props extends React.HTMLAttributes<any>, State extends Record<string, any>>(defaultElement: keyof React.JSX.IntrinsicElements | React.ComponentType<Props>, render: RenderProp<Props, State> | undefined, props: Props, state?: State): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;

package/esm/useComponentRenderer/useComponentRenderer.js

@@ -0,0 +1,41 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+/**
+ * Resolves the rendering logic for a component.
+ * Handles three scenarios:
+ * 1. A render function that receives props and state
+ * 2. A React element
+ * 3. A default element
+ *
+ * @ignore - internal hook.
+ */
+export function useComponentRenderer(defaultElement, render, props, state = {}) {
+  if (typeof render === 'function') {
+    return render(props, state);
+  }
+  if (render) {
+    if (render.props.className) {
+      props.className = mergeClassNames(render.props.className, props.className);
+    }
+    if (render.props.style || props.style) {
+      props.style = _extends({}, props.style, render.props.style);
+    }
+    if (render.props.sx || props.sx) {
+      props.sx = mergeSx(props.sx, render.props.sx);
+    }
+    return /*#__PURE__*/React.cloneElement(render, props);
+  }
+  return /*#__PURE__*/React.createElement(defaultElement, props);
+}
+function mergeClassNames(className, otherClassName) {
+  if (!className || !otherClassName) {
+    return className || otherClassName;
+  }
+  return `${className} ${otherClassName}`;
+}
+function mergeSx(sx1, sx2) {
+  if (!sx1 || !sx2) {
+    return sx1 || sx2;
+  }
+  return (Array.isArray(sx1) ? sx1 : [sx1]).concat(Array.isArray(sx2) ? sx2 : [sx2]);
+}

package/esm/useResizeObserver/useResizeObserver.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 const isDevEnvironment = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test';
 const noop = () => {};
 export function useResizeObserver(ref, fn, enabled) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-internals",
-  "version": "8.4.0",
+  "version": "8.5.1",
   "author": "MUI Team",
   "description": "Utility functions for the MUI X packages (internal use only).",
   "license": "MIT",
@@ -31,10 +31,11 @@
     "directory": "packages/x-internals"
   },
   "dependencies": {
-    "@babel/runtime": "^7.27.1",
-    "@mui/utils": "^7.0.2"
+    "@babel/runtime": "^7.27.4",
+    "@mui/utils": "^7.1.1"
   },
   "peerDependencies": {
+    "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "engines": {

package/useComponentRenderer/index.d.ts

@@ -0,0 +1 @@
+export * from "./useComponentRenderer.js";

package/useComponentRenderer/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _useComponentRenderer = require("./useComponentRenderer");
+Object.keys(_useComponentRenderer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useComponentRenderer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useComponentRenderer[key];
+    }
+  });
+});

package/useComponentRenderer/useComponentRenderer.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export type RenderProp<Props, State = {}> = ((props: Props, state: State) => React.ReactElement<unknown>) | React.ReactElement<Props>;
+/**
+ * Resolves the rendering logic for a component.
+ * Handles three scenarios:
+ * 1. A render function that receives props and state
+ * 2. A React element
+ * 3. A default element
+ *
+ * @ignore - internal hook.
+ */
+export declare function useComponentRenderer<Props extends React.HTMLAttributes<any>, State extends Record<string, any>>(defaultElement: keyof React.JSX.IntrinsicElements | React.ComponentType<Props>, render: RenderProp<Props, State> | undefined, props: Props, state?: State): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;

package/useComponentRenderer/useComponentRenderer.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useComponentRenderer = useComponentRenderer;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+/**
+ * Resolves the rendering logic for a component.
+ * Handles three scenarios:
+ * 1. A render function that receives props and state
+ * 2. A React element
+ * 3. A default element
+ *
+ * @ignore - internal hook.
+ */
+function useComponentRenderer(defaultElement, render, props, state = {}) {
+  if (typeof render === 'function') {
+    return render(props, state);
+  }
+  if (render) {
+    if (render.props.className) {
+      props.className = mergeClassNames(render.props.className, props.className);
+    }
+    if (render.props.style || props.style) {
+      props.style = (0, _extends2.default)({}, props.style, render.props.style);
+    }
+    if (render.props.sx || props.sx) {
+      props.sx = mergeSx(props.sx, render.props.sx);
+    }
+    return /*#__PURE__*/React.cloneElement(render, props);
+  }
+  return /*#__PURE__*/React.createElement(defaultElement, props);
+}
+function mergeClassNames(className, otherClassName) {
+  if (!className || !otherClassName) {
+    return className || otherClassName;
+  }
+  return `${className} ${otherClassName}`;
+}
+function mergeSx(sx1, sx2) {
+  if (!sx1 || !sx2) {
+    return sx1 || sx2;
+  }
+  return (Array.isArray(sx1) ? sx1 : [sx1]).concat(Array.isArray(sx2) ? sx2 : [sx2]);
+}

package/useResizeObserver/useResizeObserver.js

@@ -1,18 +1,19 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useResizeObserver = useResizeObserver;
 var React = _interopRequireWildcard(require("react"));
-var _utils = require("@mui/utils");
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 const isDevEnvironment = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test';
 const noop = () => {};
 function useResizeObserver(ref, fn, enabled) {
   const fnRef = React.useRef(null);
   fnRef.current = fn;
-  (0, _utils.unstable_useEnhancedEffect)(() => {
+  (0, _useEnhancedEffect.default)(() => {
     if (enabled === false || typeof ResizeObserver === 'undefined') {
       return noop;
     }