@sitecore/sc-contenthub-blok 1.0.32 → 2.1.1

package/node_modules/@mui/material/Switch/Switch.mjs

@@ -14,6 +14,7 @@ import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import switchClasses, { getSwitchUtilityClass } from "./switchClasses.mjs";
 import { mergeSlotProps } from "../utils/index.mjs";
 import useSlot from "../utils/useSlot.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -118,7 +119,7 @@ const SwitchSwitchBase = styled(SwitchBase, {
   zIndex: 1,
   // Render above the focus ripple.
   color: theme.vars ? theme.vars.palette.Switch.defaultColor : `${theme.palette.mode === 'light' ? theme.palette.common.white : theme.palette.grey[300]}`,
-  transition: theme.transitions.create(['left', 'transform'], {
+  ...getTransitionStyles(theme, ['left', 'transform'], {
     duration: theme.transitions.duration.shortest
   }),
   [`&.${switchClasses.checked}`]: {
@@ -181,7 +182,7 @@ const SwitchTrack = styled('span', {
   width: '100%',
   borderRadius: 14 / 2,
   zIndex: -1,
-  transition: theme.transitions.create(['opacity', 'background-color'], {
+  ...getTransitionStyles(theme, ['opacity', 'background-color'], {
     duration: theme.transitions.duration.shortest
   }),
   '@media (forced-colors: active)': {

package/node_modules/@mui/material/TablePagination/TablePagination.js

@@ -17,7 +17,7 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
-var _InputBase2 = _interopRequireDefault(require("../InputBase"));
+var _InputBase = _interopRequireDefault(require("../InputBase"));
 var _MenuItem = _interopRequireDefault(require("../MenuItem"));
 var _Select = _interopRequireDefault(require("../Select"));
 var _TableCell = _interopRequireDefault(require("../TableCell"));
@@ -28,7 +28,7 @@ var _tablePaginationClasses = _interopRequireWildcard(require("./tablePagination
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _buildFormatNumber = _interopRequireDefault(require("../locale/utils/buildFormatNumber"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _InputBase;
+var _TablePaginationInput;
 const formatNumber = (0, _buildFormatNumber.default)('en-US');
 const TablePaginationRoot = (0, _zeroStyled.styled)(_TableCell.default, {
   name: 'MuiTablePagination',
@@ -105,6 +105,13 @@ const TablePaginationSelect = (0, _zeroStyled.styled)(_Select.default, {
     textAlignLast: 'right' // Align <select> on Chrome.
   }
 });
+const TablePaginationInputBase = (0, _zeroStyled.styled)(_InputBase.default)((0, _memoTheme.default)(({
+  theme
+}) => ({
+  [`& .${_tablePaginationClasses.default.select}:focus`]: {
+    backgroundColor: (theme.vars || theme).palette.action.focus
+  }
+})));
 const TablePaginationMenuItem = (0, _zeroStyled.styled)(_MenuItem.default, {
   name: 'MuiTablePagination',
   slot: 'MenuItem'
@@ -260,7 +267,7 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
       }), rowsPerPageOptions.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectSlot, {
         variant: "standard",
         ...(!selectProps.variant && {
-          input: _InputBase || (_InputBase = /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputBase2.default, {}))
+          input: _TablePaginationInput || (_TablePaginationInput = /*#__PURE__*/(0, _jsxRuntime.jsx)(TablePaginationInputBase, {}))
         }),
         value: rowsPerPage,
         onChange: onRowsPerPageChange,

package/node_modules/@mui/material/TablePagination/TablePagination.mjs

@@ -1,6 +1,6 @@
 'use client';
 
-var _InputBase;
+var _TablePaginationInput;
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -98,6 +98,13 @@ const TablePaginationSelect = styled(Select, {
     textAlignLast: 'right' // Align <select> on Chrome.
   }
 });
+const TablePaginationInputBase = styled(InputBase)(memoTheme(({
+  theme
+}) => ({
+  [`& .${tablePaginationClasses.select}:focus`]: {
+    backgroundColor: (theme.vars || theme).palette.action.focus
+  }
+})));
 const TablePaginationMenuItem = styled(MenuItem, {
   name: 'MuiTablePagination',
   slot: 'MenuItem'
@@ -253,7 +260,7 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
       }), rowsPerPageOptions.length > 1 && /*#__PURE__*/_jsx(SelectSlot, {
         variant: "standard",
         ...(!selectProps.variant && {
-          input: _InputBase || (_InputBase = /*#__PURE__*/_jsx(InputBase, {}))
+          input: _TablePaginationInput || (_TablePaginationInput = /*#__PURE__*/_jsx(TablePaginationInputBase, {}))
         }),
         value: rowsPerPage,
         onChange: onRowsPerPageChange,

package/node_modules/@mui/material/TableSortLabel/TableSortLabel.js

@@ -19,6 +19,7 @@ var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _tableSortLabelClasses = _interopRequireWildcard(require("./tableSortLabelClasses"));
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
+var _utils = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -76,7 +77,7 @@ const TableSortLabelIcon = (0, _zeroStyled.styled)('span', {
   marginRight: 4,
   marginLeft: 4,
   opacity: 0,
-  transition: theme.transitions.create(['opacity', 'transform'], {
+  ...(0, _utils.getTransitionStyles)(theme, ['opacity', 'transform'], {
     duration: theme.transitions.duration.shorter
   }),
   userSelect: 'none',

package/node_modules/@mui/material/TableSortLabel/TableSortLabel.mjs

@@ -12,6 +12,7 @@ import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import capitalize from "../utils/capitalize.mjs";
 import tableSortLabelClasses, { getTableSortLabelUtilityClass } from "./tableSortLabelClasses.mjs";
 import useSlot from "../utils/useSlot.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -69,7 +70,7 @@ const TableSortLabelIcon = styled('span', {
   marginRight: 4,
   marginLeft: 4,
   opacity: 0,
-  transition: theme.transitions.create(['opacity', 'transform'], {
+  ...getTransitionStyles(theme, ['opacity', 'transform'], {
     duration: theme.transitions.duration.shorter
   }),
   userSelect: 'none',

package/node_modules/@mui/material/Tabs/Tabs.js

@@ -20,6 +20,7 @@ var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _debounce = _interopRequireDefault(require("../utils/debounce"));
 var _animate = _interopRequireDefault(require("../internal/animate"));
+var _useReducedMotion = _interopRequireDefault(require("../transitions/useReducedMotion"));
 var _ScrollbarSize = _interopRequireDefault(require("./ScrollbarSize"));
 var _TabScrollButton = _interopRequireDefault(require("../TabScrollButton"));
 var _useEventCallback = _interopRequireDefault(require("../utils/useEventCallback"));
@@ -32,6 +33,7 @@ var _getActiveElement = _interopRequireDefault(require("../utils/getActiveElemen
 var _ownerDocument = _interopRequireDefault(require("../utils/ownerDocument"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _useRovingTabIndex = require("../utils/useRovingTabIndex");
+var _utils = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -185,7 +187,7 @@ const TabsIndicator = (0, _zeroStyled.styled)('span', {
   height: 2,
   bottom: 0,
   width: '100%',
-  transition: theme.transitions.create(),
+  ...(0, _utils.getTransitionStyles)(theme),
   variants: [{
     props: {
       indicatorColor: 'primary'
@@ -222,6 +224,12 @@ const TabsScrollbarSize = (0, _zeroStyled.styled)(_ScrollbarSize.default)({
   }
 });
 const defaultIndicatorStyle = {};
+
+// Dev-only: tracks per-`Tabs` instance (keyed by its ref) whether the invalid-value warning was
+// already logged, so it isn't repeated across the several effects that call `getTabsMeta`.
+// Only referenced from `process.env.NODE_ENV !== 'production'` blocks; the `@__PURE__` annotation
+// lets minifiers drop it (and the `WeakMap` allocation) entirely from production builds.
+const warnedTabValueInvalid = /* @__PURE__ */new WeakMap();
 let warnedOnceTabPresent = false;
 const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   const props = (0, _DefaultPropsProvider.useDefaultProps)({
@@ -230,6 +238,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   });
   const theme = (0, _zeroStyled.useTheme)();
   const isRtl = (0, _RtlProvider.useRtl)();
+  const reducedMotion = (0, _useReducedMotion.default)(theme.motion.reducedMotion, false);
   const {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,
@@ -336,7 +345,9 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       if (children.length > 0) {
         const tab = children[valueToIndex.get(value)];
         if (process.env.NODE_ENV !== 'production') {
-          if (!tab) {
+          // `getTabsMeta` runs from several effects, so guard against logging the warning repeatedly.
+          if (!tab && !warnedTabValueInvalid.has(tabsRef)) {
+            warnedTabValueInvalid.set(tabsRef, true);
             console.error([`MUI: The \`value\` provided to the Tabs component is invalid.`, `None of the Tabs' children match with "${value}".`, valueToIndex.keys ? `You can provide one of the following values: ${Array.from(valueToIndex.keys()).join(', ')}.` : null].join('\n'));
           }
         }
@@ -393,7 +404,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   const scroll = (scrollValue, {
     animation = true
   } = {}) => {
-    if (animation) {
+    if (animation && !reducedMotion.shouldReduceMotion) {
       (0, _animate.default)(scrollStart, tabsRef.current, scrollValue, {
         duration: theme.transitions.duration.standard
       });
@@ -604,6 +615,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     return undefined;
   }, [scrollable, scrollButtons, updateScrollObserver, childrenProp?.length]);
   React.useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setMounted(true);
   }, []);
   React.useEffect(() => {

package/node_modules/@mui/material/Tabs/Tabs.mjs

@@ -13,6 +13,7 @@ import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import debounce from "../utils/debounce.mjs";
 import animate from "../internal/animate.mjs";
+import useReducedMotion from "../transitions/useReducedMotion.mjs";
 import ScrollbarSize from "./ScrollbarSize.mjs";
 import TabScrollButton from "../TabScrollButton/index.mjs";
 import useEventCallback from "../utils/useEventCallback.mjs";
@@ -25,6 +26,7 @@ import getActiveElement from "../utils/getActiveElement.mjs";
 import ownerDocument from "../utils/ownerDocument.mjs";
 import useForkRef from "../utils/useForkRef.mjs";
 import { RovingTabIndexContext, useRovingTabIndexRoot } from "../utils/useRovingTabIndex.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -178,7 +180,7 @@ const TabsIndicator = styled('span', {
   height: 2,
   bottom: 0,
   width: '100%',
-  transition: theme.transitions.create(),
+  ...getTransitionStyles(theme),
   variants: [{
     props: {
       indicatorColor: 'primary'
@@ -215,6 +217,12 @@ const TabsScrollbarSize = styled(ScrollbarSize)({
   }
 });
 const defaultIndicatorStyle = {};
+
+// Dev-only: tracks per-`Tabs` instance (keyed by its ref) whether the invalid-value warning was
+// already logged, so it isn't repeated across the several effects that call `getTabsMeta`.
+// Only referenced from `process.env.NODE_ENV !== 'production'` blocks; the `@__PURE__` annotation
+// lets minifiers drop it (and the `WeakMap` allocation) entirely from production builds.
+const warnedTabValueInvalid = /* @__PURE__ */new WeakMap();
 let warnedOnceTabPresent = false;
 const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   const props = useDefaultProps({
@@ -223,6 +231,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   });
   const theme = useTheme();
   const isRtl = useRtl();
+  const reducedMotion = useReducedMotion(theme.motion.reducedMotion, false);
   const {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,
@@ -329,7 +338,9 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       if (children.length > 0) {
         const tab = children[valueToIndex.get(value)];
         if (process.env.NODE_ENV !== 'production') {
-          if (!tab) {
+          // `getTabsMeta` runs from several effects, so guard against logging the warning repeatedly.
+          if (!tab && !warnedTabValueInvalid.has(tabsRef)) {
+            warnedTabValueInvalid.set(tabsRef, true);
             console.error([`MUI: The \`value\` provided to the Tabs component is invalid.`, `None of the Tabs' children match with "${value}".`, valueToIndex.keys ? `You can provide one of the following values: ${Array.from(valueToIndex.keys()).join(', ')}.` : null].join('\n'));
           }
         }
@@ -386,7 +397,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   const scroll = (scrollValue, {
     animation = true
   } = {}) => {
-    if (animation) {
+    if (animation && !reducedMotion.shouldReduceMotion) {
       animate(scrollStart, tabsRef.current, scrollValue, {
         duration: theme.transitions.duration.standard
       });
@@ -597,6 +608,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     return undefined;
   }, [scrollable, scrollButtons, updateScrollObserver, childrenProp?.length]);
   React.useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setMounted(true);
   }, []);
   React.useEffect(() => {

package/node_modules/@mui/material/ToggleButton/RovingToggleButton.d.mts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+interface RovingToggleButtonChildProps {
+  ref?: React.Ref<HTMLElement> | undefined;
+  tabIndex?: number | undefined;
+}
+interface RovingToggleButtonProps {
+  children: React.ReactElement<RovingToggleButtonChildProps>;
+  disabled?: boolean | undefined;
+  selected?: boolean | undefined;
+  value: unknown;
+}
+declare const _default: React.ForwardRefExoticComponent<RovingToggleButtonProps & React.RefAttributes<HTMLElement>>;
+export default _default;

package/node_modules/@mui/material/ToggleButton/RovingToggleButton.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+interface RovingToggleButtonChildProps {
+  ref?: React.Ref<HTMLElement> | undefined;
+  tabIndex?: number | undefined;
+}
+interface RovingToggleButtonProps {
+  children: React.ReactElement<RovingToggleButtonChildProps>;
+  disabled?: boolean | undefined;
+  selected?: boolean | undefined;
+  value: unknown;
+}
+declare const _default: React.ForwardRefExoticComponent<RovingToggleButtonProps & React.RefAttributes<HTMLElement>>;
+export default _default;

package/node_modules/@mui/material/ToggleButton/RovingToggleButton.js

@@ -0,0 +1,37 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _useRovingTabIndex = require("../utils/useRovingTabIndex");
+function RovingToggleButton(props, ref) {
+  const {
+    children,
+    disabled = false,
+    selected = false,
+    value
+  } = props;
+  const rovingContext = (0, _useRovingTabIndex.useRovingTabIndexContext)();
+  const rovingItemProps = (0, _useRovingTabIndex.useRovingTabIndexItem)({
+    id: value,
+    ref,
+    disabled,
+    selected
+  });
+
+  // On the server, and on the first client render before registration effects run,
+  // the roving item map is still empty. In that window, fall back to `tabIndex={0}`
+  // for the selected toggle button so the rendered markup is immediately keyboard-accessible
+  // and hydration stays consistent until item registration takes over.
+  const shouldUseSelectedTabStopFallback = rovingContext.getItemMap().size === 0 && selected;
+  const tabIndex = shouldUseSelectedTabStopFallback ? 0 : rovingItemProps.tabIndex;
+  return /*#__PURE__*/React.cloneElement(React.Children.only(children), {
+    ...rovingItemProps,
+    tabIndex: children.props.tabIndex ?? tabIndex
+  });
+}
+var _default = exports.default = /*#__PURE__*/React.forwardRef(RovingToggleButton);

package/node_modules/@mui/material/ToggleButton/RovingToggleButton.mjs

@@ -0,0 +1,31 @@
+'use client';
+
+import * as React from 'react';
+import { useRovingTabIndexContext, useRovingTabIndexItem } from "../utils/useRovingTabIndex.mjs";
+function RovingToggleButton(props, ref) {
+  const {
+    children,
+    disabled = false,
+    selected = false,
+    value
+  } = props;
+  const rovingContext = useRovingTabIndexContext();
+  const rovingItemProps = useRovingTabIndexItem({
+    id: value,
+    ref,
+    disabled,
+    selected
+  });
+
+  // On the server, and on the first client render before registration effects run,
+  // the roving item map is still empty. In that window, fall back to `tabIndex={0}`
+  // for the selected toggle button so the rendered markup is immediately keyboard-accessible
+  // and hydration stays consistent until item registration takes over.
+  const shouldUseSelectedTabStopFallback = rovingContext.getItemMap().size === 0 && selected;
+  const tabIndex = shouldUseSelectedTabStopFallback ? 0 : rovingItemProps.tabIndex;
+  return /*#__PURE__*/React.cloneElement(React.Children.only(children), {
+    ...rovingItemProps,
+    tabIndex: children.props.tabIndex ?? tabIndex
+  });
+}
+export default /*#__PURE__*/React.forwardRef(RovingToggleButton);

package/node_modules/@mui/material/ToggleButton/ToggleButton.js

@@ -23,6 +23,7 @@ var _toggleButtonClasses = _interopRequireWildcard(require("./toggleButtonClasse
 var _ToggleButtonGroupContext = _interopRequireDefault(require("../ToggleButtonGroup/ToggleButtonGroupContext"));
 var _ToggleButtonGroupButtonContext = _interopRequireDefault(require("../ToggleButtonGroup/ToggleButtonGroupButtonContext"));
 var _isValueSelected = _interopRequireDefault(require("../ToggleButtonGroup/isValueSelected"));
+var _RovingToggleButton = _interopRequireDefault(require("./RovingToggleButton"));
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -130,6 +131,7 @@ const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton(inProps
   // props priority: `inProps` > `contextProps` > `themeDefaultProps`
   const {
     value: contextValue,
+    isRovingTabIndex,
     ...contextProps
   } = React.useContext(_ToggleButtonGroupContext.default);
   const toggleButtonGroupButtonContextPositionClassName = React.useContext(_ToggleButtonGroupButtonContext.default);
@@ -176,12 +178,12 @@ const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton(inProps
     }
   };
   const positionClassName = toggleButtonGroupButtonContextPositionClassName || '';
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButtonRoot, {
+  const button = /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButtonRoot, {
     className: (0, _clsx.default)(contextProps.className, classes.root, className, positionClassName),
     internalNativeButton: true,
     disabled: disabled,
     focusRipple: !disableFocusRipple,
-    ref: ref,
+    ref: isRovingTabIndex ? undefined : ref,
     onClick: handleChange,
     onChange: onChange,
     value: value,
@@ -190,6 +192,16 @@ const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton(inProps
     ...other,
     children: children
   });
+  if (isRovingTabIndex) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RovingToggleButton.default, {
+      disabled: disabled,
+      selected: selected,
+      ref: ref,
+      value: value,
+      children: button
+    });
+  }
+  return button;
 });
 process.env.NODE_ENV !== "production" ? ToggleButton.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/node_modules/@mui/material/ToggleButton/ToggleButton.mjs

@@ -16,6 +16,7 @@ import toggleButtonClasses, { getToggleButtonUtilityClass } from "./toggleButton
 import ToggleButtonGroupContext from "../ToggleButtonGroup/ToggleButtonGroupContext.mjs";
 import ToggleButtonGroupButtonContext from "../ToggleButtonGroup/ToggleButtonGroupButtonContext.mjs";
 import isValueSelected from "../ToggleButtonGroup/isValueSelected.mjs";
+import RovingToggleButton from "./RovingToggleButton.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -123,6 +124,7 @@ const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton(inProps
   // props priority: `inProps` > `contextProps` > `themeDefaultProps`
   const {
     value: contextValue,
+    isRovingTabIndex,
     ...contextProps
   } = React.useContext(ToggleButtonGroupContext);
   const toggleButtonGroupButtonContextPositionClassName = React.useContext(ToggleButtonGroupButtonContext);
@@ -169,12 +171,12 @@ const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton(inProps
     }
   };
   const positionClassName = toggleButtonGroupButtonContextPositionClassName || '';
-  return /*#__PURE__*/_jsx(ToggleButtonRoot, {
+  const button = /*#__PURE__*/_jsx(ToggleButtonRoot, {
     className: clsx(contextProps.className, classes.root, className, positionClassName),
     internalNativeButton: true,
     disabled: disabled,
     focusRipple: !disableFocusRipple,
-    ref: ref,
+    ref: isRovingTabIndex ? undefined : ref,
     onClick: handleChange,
     onChange: onChange,
     value: value,
@@ -183,6 +185,16 @@ const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton(inProps
     ...other,
     children: children
   });
+  if (isRovingTabIndex) {
+    return /*#__PURE__*/_jsx(RovingToggleButton, {
+      disabled: disabled,
+      selected: selected,
+      ref: ref,
+      value: value,
+      children: button
+    });
+  }
+  return button;
 });
 process.env.NODE_ENV !== "production" ? ToggleButton.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/node_modules/@mui/material/ToggleButtonGroup/ToggleButtonGroup.js

@@ -13,9 +13,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _getValidReactChildren = _interopRequireDefault(require("@mui/utils/getValidReactChildren"));
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
+var _useRovingTabIndex = require("../utils/useRovingTabIndex");
 var _toggleButtonGroupClasses = _interopRequireWildcard(require("./toggleButtonGroupClasses"));
 var _ToggleButtonGroupContext = _interopRequireDefault(require("./ToggleButtonGroupContext"));
 var _ToggleButtonGroupButtonContext = _interopRequireDefault(require("./ToggleButtonGroupButtonContext"));
@@ -145,6 +147,7 @@ const ToggleButtonGroup = /*#__PURE__*/React.forwardRef(function ToggleButtonGro
     size
   };
   const classes = useUtilityClasses(ownerState);
+  const isRtl = (0, _RtlProvider.useRtl)();
   const handleChange = React.useCallback((event, buttonValue) => {
     if (!onChange) {
       return;
@@ -172,7 +175,8 @@ const ToggleButtonGroup = /*#__PURE__*/React.forwardRef(function ToggleButtonGro
     size,
     fullWidth,
     color,
-    disabled
+    disabled,
+    isRovingTabIndex: true
   }), [classes.grouped, exclusive, handleExclusiveChange, handleChange, value, size, fullWidth, color, disabled]);
   const validChildren = (0, _getValidReactChildren.default)(children);
   const childrenCount = validChildren.length;
@@ -190,24 +194,32 @@ const ToggleButtonGroup = /*#__PURE__*/React.forwardRef(function ToggleButtonGro
     }
     return classes.middleButton;
   };
+  const rovingTabIndexRoot = (0, _useRovingTabIndex.useRovingTabIndexRoot)({
+    orientation,
+    isRtl
+  });
+  const rovingContainerProps = rovingTabIndexRoot.getContainerProps(ref, other.onFocus, other.onKeyDown);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButtonGroupRoot, {
     role: "group",
     className: (0, _clsx.default)(classes.root, className),
-    ref: ref,
     ownerState: ownerState,
     ...other,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToggleButtonGroupContext.default.Provider, {
-      value: context,
-      children: validChildren.map((child, index) => {
-        if (process.env.NODE_ENV !== 'production') {
-          if ((0, _reactIs.isFragment)(child)) {
-            console.error(["MUI: The ToggleButtonGroup component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
+    ...rovingContainerProps,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_useRovingTabIndex.RovingTabIndexContext.Provider, {
+      value: rovingTabIndexRoot,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToggleButtonGroupContext.default.Provider, {
+        value: context,
+        children: validChildren.map((child, index) => {
+          if (process.env.NODE_ENV !== 'production') {
+            if ((0, _reactIs.isFragment)(child)) {
+              console.error(["MUI: The ToggleButtonGroup component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
+            }
           }
-        }
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToggleButtonGroupButtonContext.default.Provider, {
-          value: getButtonPositionClassName(index),
-          children: child
-        }, index);
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToggleButtonGroupButtonContext.default.Provider, {
+            value: getButtonPositionClassName(index),
+            children: child
+          }, index);
+        })
       })
     })
   });
@@ -260,6 +272,14 @@ process.env.NODE_ENV !== "production" ? ToggleButtonGroup.propTypes /* remove-pr
    * is selected and `exclusive` is true the value is null; when false an empty array.
    */
   onChange: _propTypes.default.func,
+  /**
+   * @ignore
+   */
+  onFocus: _propTypes.default.func,
+  /**
+   * @ignore
+   */
+  onKeyDown: _propTypes.default.func,
   /**
    * The component orientation (layout flow direction).
    * @default 'horizontal'

package/node_modules/@mui/material/ToggleButtonGroup/ToggleButtonGroup.mjs

@@ -6,9 +6,11 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import getValidReactChildren from '@mui/utils/getValidReactChildren';
+import { useRtl } from '@mui/system/RtlProvider';
 import { styled } from "../zero-styled/index.mjs";
 import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
+import { useRovingTabIndexRoot, RovingTabIndexContext } from "../utils/useRovingTabIndex.mjs";
 import toggleButtonGroupClasses, { getToggleButtonGroupUtilityClass } from "./toggleButtonGroupClasses.mjs";
 import ToggleButtonGroupContext from "./ToggleButtonGroupContext.mjs";
 import ToggleButtonGroupButtonContext from "./ToggleButtonGroupButtonContext.mjs";
@@ -138,6 +140,7 @@ const ToggleButtonGroup = /*#__PURE__*/React.forwardRef(function ToggleButtonGro
     size
   };
   const classes = useUtilityClasses(ownerState);
+  const isRtl = useRtl();
   const handleChange = React.useCallback((event, buttonValue) => {
     if (!onChange) {
       return;
@@ -165,7 +168,8 @@ const ToggleButtonGroup = /*#__PURE__*/React.forwardRef(function ToggleButtonGro
     size,
     fullWidth,
     color,
-    disabled
+    disabled,
+    isRovingTabIndex: true
   }), [classes.grouped, exclusive, handleExclusiveChange, handleChange, value, size, fullWidth, color, disabled]);
   const validChildren = getValidReactChildren(children);
   const childrenCount = validChildren.length;
@@ -183,24 +187,32 @@ const ToggleButtonGroup = /*#__PURE__*/React.forwardRef(function ToggleButtonGro
     }
     return classes.middleButton;
   };
+  const rovingTabIndexRoot = useRovingTabIndexRoot({
+    orientation,
+    isRtl
+  });
+  const rovingContainerProps = rovingTabIndexRoot.getContainerProps(ref, other.onFocus, other.onKeyDown);
   return /*#__PURE__*/_jsx(ToggleButtonGroupRoot, {
     role: "group",
     className: clsx(classes.root, className),
-    ref: ref,
     ownerState: ownerState,
     ...other,
-    children: /*#__PURE__*/_jsx(ToggleButtonGroupContext.Provider, {
-      value: context,
-      children: validChildren.map((child, index) => {
-        if (process.env.NODE_ENV !== 'production') {
-          if (isFragment(child)) {
-            console.error(["MUI: The ToggleButtonGroup component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
+    ...rovingContainerProps,
+    children: /*#__PURE__*/_jsx(RovingTabIndexContext.Provider, {
+      value: rovingTabIndexRoot,
+      children: /*#__PURE__*/_jsx(ToggleButtonGroupContext.Provider, {
+        value: context,
+        children: validChildren.map((child, index) => {
+          if (process.env.NODE_ENV !== 'production') {
+            if (isFragment(child)) {
+              console.error(["MUI: The ToggleButtonGroup component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
+            }
           }
-        }
-        return /*#__PURE__*/_jsx(ToggleButtonGroupButtonContext.Provider, {
-          value: getButtonPositionClassName(index),
-          children: child
-        }, index);
+          return /*#__PURE__*/_jsx(ToggleButtonGroupButtonContext.Provider, {
+            value: getButtonPositionClassName(index),
+            children: child
+          }, index);
+        })
       })
     })
   });
@@ -253,6 +265,14 @@ process.env.NODE_ENV !== "production" ? ToggleButtonGroup.propTypes /* remove-pr
    * is selected and `exclusive` is true the value is null; when false an empty array.
    */
   onChange: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onFocus: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onKeyDown: PropTypes.func,
   /**
    * The component orientation (layout flow direction).
    * @default 'horizontal'