@mui/x-internals 8.5.0 → 8.5.1

package/CHANGELOG.md

@@ -5,6 +5,118 @@
 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_

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-internals",
-  "version": "8.5.0",
+  "version": "8.5.1",
   "author": "MUI Team",
   "description": "Utility functions for the MUI X packages (internal use only).",
   "license": "MIT",
@@ -31,8 +31,8 @@
     "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",