@mui/x-date-pickers 5.0.2 → 6.0.0-alpha.0

package/YearPicker/YearPicker.js

@@ -1,10 +1,14 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["autoFocus", "className", "value", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "readOnly", "shouldDisableYear", "disableHighlightToday", "onYearFocus", "hasFocus", "onFocusedViewChange"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useTheme, styled, useThemeProps } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses } from '@mui/material';
-import { useControlled } from '@mui/material/utils';
 import clsx from 'clsx';
+import { useTheme } from '@mui/system';
+import { styled, useThemeProps } from '@mui/material/styles';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { useForkRef } from '@mui/material/utils';
+import { unstable_useControlled as useControlled, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { PickersYear } from './PickersYear';
 import { useUtils, useNow, useDefaultDates } from '../internals/hooks/useUtils';
 import { WrapperVariantContext } from '../internals/components/wrappers/WrapperVariantContext';
@@ -48,17 +52,20 @@ const YearPickerRoot = styled('div', {
   flexWrap: 'wrap',
   overflowY: 'auto',
   height: '100%',
-  margin: '0 4px'
+  padding: '0 4px',
+  maxHeight: '304px'
 });
 export const YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inProps, ref) {
   const now = useNow();
   const theme = useTheme();
   const utils = useUtils();
+  const wrapperVariant = React.useContext(WrapperVariantContext);
   const props = useYearPickerDefaultizedProps(inProps, 'MuiYearPicker');
+
   const {
     autoFocus,
     className,
-    date,
+    value,
     disabled,
     disableFuture,
     disablePast,
@@ -71,13 +78,16 @@ export const YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inPr
     onYearFocus,
     hasFocus,
     onFocusedViewChange
-  } = props;
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
-  const selectedDateOrToday = date != null ? date : now;
-  const currentYear = React.useMemo(() => {
-    if (date != null) {
-      return utils.getYear(date);
+  const selectedDateOrToday = value != null ? value : now;
+  const todayYear = React.useMemo(() => utils.getYear(now), [utils, now]);
+  const selectedYear = React.useMemo(() => {
+    if (value != null) {
+      return utils.getYear(value);
     }
 
     if (disableHighlightToday) {
@@ -85,24 +95,22 @@ export const YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inPr
     }
 
     return utils.getYear(now);
-  }, [now, date, utils, disableHighlightToday]);
-  const wrapperVariant = React.useContext(WrapperVariantContext);
-  const selectedYearRef = React.useRef(null);
-  const [focusedYear, setFocusedYear] = React.useState(() => currentYear || utils.getYear(now));
+  }, [now, value, utils, disableHighlightToday]);
+  const [focusedYear, setFocusedYear] = React.useState(() => selectedYear || todayYear);
   const [internalHasFocus, setInternalHasFocus] = useControlled({
     name: 'YearPicker',
     state: 'hasFocus',
     controlled: hasFocus,
     default: autoFocus
   });
-  const changeHasFocus = React.useCallback(newHasFocus => {
+  const changeHasFocus = useEventCallback(newHasFocus => {
     setInternalHasFocus(newHasFocus);
 
     if (onFocusedViewChange) {
       onFocusedViewChange(newHasFocus);
     }
-  }, [setInternalHasFocus, onFocusedViewChange]);
-  const isYearDisabled = React.useCallback(dateToValidate => {
+  });
+  const isYearDisabled = useEventCallback(dateToValidate => {
     if (disablePast && utils.isBeforeYear(dateToValidate, now)) {
       return true;
     }
@@ -124,29 +132,28 @@ export const YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inPr
     }
 
     return false;
-  }, [disableFuture, disablePast, maxDate, minDate, now, shouldDisableYear, utils]);
-
-  const handleYearSelection = (event, year, isFinish = 'finish') => {
+  });
+  const handleYearSelection = useEventCallback((event, year) => {
     if (readOnly) {
       return;
     }
 
     const newDate = utils.setYear(selectedDateOrToday, year);
-    onChange(newDate, isFinish);
-  };
-
-  const focusYear = React.useCallback(year => {
+    onChange(newDate);
+  });
+  const focusYear = useEventCallback(year => {
     if (!isYearDisabled(utils.setYear(selectedDateOrToday, year))) {
       setFocusedYear(year);
       changeHasFocus(true);
       onYearFocus == null ? void 0 : onYearFocus(year);
     }
-  }, [isYearDisabled, utils, selectedDateOrToday, changeHasFocus, onYearFocus]);
+  });
   React.useEffect(() => {
-    setFocusedYear(prevFocusedYear => currentYear !== null && prevFocusedYear !== currentYear ? currentYear : prevFocusedYear);
-  }, [currentYear]);
-  const yearsInRow = wrapperVariant === 'desktop' ? 4 : 3;
-  const handleKeyDown = React.useCallback((event, year) => {
+    setFocusedYear(prevFocusedYear => selectedYear !== null && prevFocusedYear !== selectedYear ? selectedYear : prevFocusedYear);
+  }, [selectedYear]);
+  const handleKeyDown = useEventCallback((event, year) => {
+    const yearsInRow = wrapperVariant === 'desktop' ? 4 : 3;
+
     switch (event.key) {
       case 'ArrowUp':
         focusYear(year - yearsInRow);
@@ -171,39 +178,66 @@ export const YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inPr
       default:
         break;
     }
-  }, [focusYear, theme.direction, yearsInRow]);
-  const handleFocus = React.useCallback((event, year) => {
+  });
+  const handleYearFocus = useEventCallback((event, year) => {
     focusYear(year);
-  }, [focusYear]);
-  const handleBlur = React.useCallback((event, year) => {
+  });
+  const handleYearBlur = useEventCallback((event, year) => {
     if (focusedYear === year) {
       changeHasFocus(false);
     }
-  }, [focusedYear, changeHasFocus]);
-  const nowYear = utils.getYear(now);
-  return /*#__PURE__*/_jsx(YearPickerRoot, {
-    ref: ref,
+  });
+  const scrollerRef = React.useRef(null);
+  const handleRef = useForkRef(ref, scrollerRef);
+  React.useEffect(() => {
+    if (autoFocus || scrollerRef.current === null) {
+      return;
+    }
+
+    const tabbableButton = scrollerRef.current.querySelector('[tabindex="0"]');
+
+    if (!tabbableButton) {
+      return;
+    } // Taken from useScroll in x-data-grid, but vertically centered
+
+
+    const offsetHeight = tabbableButton.offsetHeight;
+    const offsetTop = tabbableButton.offsetTop;
+    const clientHeight = scrollerRef.current.clientHeight;
+    const scrollTop = scrollerRef.current.scrollTop;
+    const elementBottom = offsetTop + offsetHeight;
+
+    if (offsetHeight > clientHeight || offsetTop < scrollTop) {
+      // Button already visible
+      return;
+    }
+
+    scrollerRef.current.scrollTop = elementBottom - clientHeight / 2 - offsetHeight / 2;
+  }, [autoFocus]);
+  return /*#__PURE__*/_jsx(YearPickerRoot, _extends({
+    ref: handleRef,
     className: clsx(classes.root, className),
-    ownerState: ownerState,
+    ownerState: ownerState
+  }, other, {
     children: utils.getYearRange(minDate, maxDate).map(year => {
       const yearNumber = utils.getYear(year);
-      const selected = yearNumber === currentYear;
+      const isSelected = yearNumber === selectedYear;
+      const isDisabled = disabled || isYearDisabled(year);
       return /*#__PURE__*/_jsx(PickersYear, {
-        selected: selected,
+        selected: isSelected,
         value: yearNumber,
         onClick: handleYearSelection,
         onKeyDown: handleKeyDown,
         autoFocus: internalHasFocus && yearNumber === focusedYear,
-        ref: selected ? selectedYearRef : undefined,
-        disabled: disabled || isYearDisabled(year),
+        disabled: isDisabled,
         tabIndex: yearNumber === focusedYear ? 0 : -1,
-        onFocus: handleFocus,
-        onBlur: handleBlur,
-        "aria-current": nowYear === yearNumber ? 'date' : undefined,
+        onFocus: handleYearFocus,
+        onBlur: handleYearBlur,
+        "aria-current": todayYear === yearNumber ? 'date' : undefined,
         children: utils.format(year, 'year')
       }, utils.format(year, 'year'));
     })
-  });
+  }));
 });
 process.env.NODE_ENV !== "production" ? YearPicker.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -211,9 +245,20 @@ process.env.NODE_ENV !== "production" ? YearPicker.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   autoFocus: PropTypes.bool,
+
+  /**
+   * Override or extend the styles applied to the component.
+   */
   classes: PropTypes.object,
+
+  /**
+   * className applied to the root element.
+   */
   className: PropTypes.string,
-  date: PropTypes.any,
+
+  /**
+   * If `true` picker is disabled
+   */
   disabled: PropTypes.bool,
 
   /**
@@ -244,10 +289,19 @@ process.env.NODE_ENV !== "production" ? YearPicker.propTypes = {
    * Minimal selectable date. @DateIOType
    */
   minDate: PropTypes.any,
+
+  /**
+   * Callback fired when the value (the selected year) changes.
+   * @template TValue
+   * @param {TValue} value The new parsed value.
+   */
   onChange: PropTypes.func.isRequired,
-  onFocusedDayChange: PropTypes.func,
   onFocusedViewChange: PropTypes.func,
   onYearFocus: PropTypes.func,
+
+  /**
+   * If `true` picker is readonly
+   */
   readOnly: PropTypes.bool,
 
   /**
@@ -257,5 +311,11 @@ process.env.NODE_ENV !== "production" ? YearPicker.propTypes = {
    * @param {TDate} year The year to test.
    * @returns {boolean} Returns `true` if the year should be disabled.
    */
-  shouldDisableYear: PropTypes.func
+  shouldDisableYear: PropTypes.func,
+
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  value: PropTypes.any
 } : void 0;

package/YearPicker/pickersYearClasses.d.ts

@@ -14,4 +14,4 @@ export interface PickersYearClasses {
 }
 export declare type PickersYearClassKey = keyof PickersYearClasses;
 export declare function getPickersYearUtilityClass(slot: string): string;
-export declare const pickersYearClasses: Record<"root" | "selected" | "disabled" | "modeDesktop" | "modeMobile" | "yearButton", string>;
+export declare const pickersYearClasses: Record<"root" | "modeMobile" | "modeDesktop" | "disabled" | "selected" | "yearButton", string>;

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.2
+/** @license MUI v6.0.0-alpha.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/internals/components/CalendarOrClockPicker/CalendarOrClockPicker.js

@@ -162,7 +162,7 @@ export function CalendarOrClockPicker(inProps) {
       }) : /*#__PURE__*/_jsxs(React.Fragment, {
         children: [isDatePickerView(openView) && /*#__PURE__*/_jsx(CalendarPicker, _extends({
           autoFocus: autoFocus,
-          date: parsedValue,
+          value: parsedValue,
           onViewChange: setOpenView,
           onChange: handleChangeAndOpenNext,
           view: openView // Unclear why the predicate `isDatePickerView` does not imply the casted type
@@ -172,7 +172,7 @@ export function CalendarOrClockPicker(inProps) {
           onFocusedViewChange: setFocusedView
         }, other)), isTimePickerView(openView) && /*#__PURE__*/_jsx(ClockPicker, _extends({}, other, {
           autoFocus: autoFocus,
-          date: parsedValue,
+          value: parsedValue,
           view: openView // Unclear why the predicate `isDatePickerView` does not imply the casted type
           ,
           views: views.filter(isTimePickerView),

package/internals/components/PickerStaticWrapper/PickerStaticWrapper.d.ts

@@ -1,25 +1,39 @@
 import * as React from 'react';
+import { Theme } from '@mui/material/styles';
+import { SxProps } from '@mui/system';
 import { PickerStaticWrapperClasses } from './pickerStaticWrapperClasses';
 import { PickersActionBarProps } from '../../../PickersActionBar';
 import { PickerStateWrapperProps } from '../../hooks/usePickerState';
 import { PickersSlotsComponent } from '../wrappers/WrapperProps';
+import { PickersInputLocaleText } from '../../../locales/utils/pickersLocaleTextApi';
 export interface PickersStaticWrapperSlotsComponent extends PickersSlotsComponent {
 }
 export interface PickersStaticWrapperSlotsComponentsProps {
     actionBar: Omit<PickersActionBarProps, 'onAccept' | 'onClear' | 'onCancel' | 'onSetToday'>;
     paperContent: Record<string, any>;
 }
-export interface PickerStaticWrapperProps extends PickerStateWrapperProps {
+export interface ExportedPickerStaticWrapperProps<TDate> {
+    /**
+     * Force static wrapper inner components to be rendered in mobile or desktop mode.
+     * @default "mobile"
+     */
+    displayStaticWrapperAs?: 'desktop' | 'mobile';
+    /**
+     * Locale for components texts
+     */
+    localeText?: PickersInputLocaleText<TDate>;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
+}
+export interface PickerStaticWrapperProps<TDate> extends PickerStateWrapperProps, ExportedPickerStaticWrapperProps<TDate> {
     className?: string;
     children?: React.ReactNode;
     /**
      * Override or extend the styles applied to the component.
      */
     classes?: Partial<PickerStaticWrapperClasses>;
-    /**
-     * Force static wrapper inner components to be rendered in mobile or desktop mode.
-     */
-    displayStaticWrapperAs: 'desktop' | 'mobile';
     /**
      * Overrideable components.
      * @default {}
@@ -31,7 +45,7 @@ export interface PickerStaticWrapperProps extends PickerStateWrapperProps {
      */
     componentsProps?: Partial<PickersStaticWrapperSlotsComponentsProps>;
 }
-declare function PickerStaticWrapper(inProps: PickerStaticWrapperProps): JSX.Element;
+declare function PickerStaticWrapper<TDate>(inProps: PickerStaticWrapperProps<TDate>): JSX.Element;
 declare namespace PickerStaticWrapper {
     var propTypes: any;
 }

package/internals/components/PickerStaticWrapper/PickerStaticWrapper.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["displayStaticWrapperAs", "onAccept", "onClear", "onCancel", "onDismiss", "onSetToday", "open", "children", "components", "componentsProps", "className"];
+const _excluded = ["displayStaticWrapperAs", "onAccept", "onClear", "onCancel", "onSetToday", "children", "onDismiss", "open", "components", "componentsProps", "localeText", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled, useThemeProps } from '@mui/material/styles';
@@ -10,6 +10,7 @@ import { DIALOG_WIDTH } from '../../constants/dimensions';
 import { WrapperVariantContext } from '../wrappers/WrapperVariantContext';
 import { getStaticWrapperUtilityClass } from './pickerStaticWrapperClasses';
 import { PickersActionBar } from '../../../PickersActionBar';
+import { LocalizationProvider } from '../../../LocalizationProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
@@ -55,7 +56,7 @@ function PickerStaticWrapper(inProps) {
   });
 
   const {
-    displayStaticWrapperAs,
+    displayStaticWrapperAs = 'mobile',
     onAccept,
     onClear,
     onCancel,
@@ -63,6 +64,7 @@ function PickerStaticWrapper(inProps) {
     children,
     components,
     componentsProps,
+    localeText,
     className
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
@@ -70,24 +72,27 @@ function PickerStaticWrapper(inProps) {
   const classes = useUtilityClasses(props);
   const ActionBar = (_components$ActionBar = components == null ? void 0 : components.ActionBar) != null ? _components$ActionBar : PickersActionBar;
   const PaperContent = (components == null ? void 0 : components.PaperContent) || React.Fragment;
-  return /*#__PURE__*/_jsx(WrapperVariantContext.Provider, {
-    value: displayStaticWrapperAs,
-    children: /*#__PURE__*/_jsxs(PickerStaticWrapperRoot, _extends({
-      className: clsx(classes.root, className)
-    }, other, {
-      children: [/*#__PURE__*/_jsx(PickerStaticWrapperContent, {
-        className: classes.content,
-        children: /*#__PURE__*/_jsx(PaperContent, _extends({}, componentsProps == null ? void 0 : componentsProps.paperContent, {
-          children: children
-        }))
-      }), /*#__PURE__*/_jsx(ActionBar, _extends({
-        onAccept: onAccept,
-        onClear: onClear,
-        onCancel: onCancel,
-        onSetToday: onSetToday,
-        actions: displayStaticWrapperAs === 'desktop' ? [] : ['cancel', 'accept']
-      }, componentsProps == null ? void 0 : componentsProps.actionBar))]
-    }))
+  return /*#__PURE__*/_jsx(LocalizationProvider, {
+    localeText: localeText,
+    children: /*#__PURE__*/_jsx(WrapperVariantContext.Provider, {
+      value: displayStaticWrapperAs,
+      children: /*#__PURE__*/_jsxs(PickerStaticWrapperRoot, _extends({
+        className: clsx(classes.root, className)
+      }, other, {
+        children: [/*#__PURE__*/_jsx(PickerStaticWrapperContent, {
+          className: classes.content,
+          children: /*#__PURE__*/_jsx(PaperContent, _extends({}, componentsProps == null ? void 0 : componentsProps.paperContent, {
+            children: children
+          }))
+        }), /*#__PURE__*/_jsx(ActionBar, _extends({
+          onAccept: onAccept,
+          onClear: onClear,
+          onCancel: onCancel,
+          onSetToday: onSetToday,
+          actions: displayStaticWrapperAs === 'desktop' ? [] : ['cancel', 'accept']
+        }, componentsProps == null ? void 0 : componentsProps.actionBar))]
+      }))
+    })
   });
 }
 
@@ -118,13 +123,24 @@ process.env.NODE_ENV !== "production" ? PickerStaticWrapper.propTypes = {
 
   /**
    * Force static wrapper inner components to be rendered in mobile or desktop mode.
+   * @default "mobile"
    */
-  displayStaticWrapperAs: PropTypes.oneOf(['desktop', 'mobile']).isRequired,
+  displayStaticWrapperAs: PropTypes.oneOf(['desktop', 'mobile']),
+
+  /**
+   * Locale for components texts
+   */
+  localeText: PropTypes.object,
   onAccept: PropTypes.func.isRequired,
   onCancel: PropTypes.func.isRequired,
   onClear: PropTypes.func.isRequired,
   onDismiss: PropTypes.func.isRequired,
   onSetToday: PropTypes.func.isRequired,
-  open: PropTypes.bool.isRequired
+  open: PropTypes.bool.isRequired,
+
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
 export { PickerStaticWrapper };

package/internals/components/PickerStaticWrapper/index.d.ts

@@ -1,4 +1,4 @@
 export { PickerStaticWrapper } from './PickerStaticWrapper';
-export type { PickerStaticWrapperProps } from './PickerStaticWrapper';
+export type { PickerStaticWrapperProps, ExportedPickerStaticWrapperProps, } from './PickerStaticWrapper';
 export { pickerStaticWrapperClasses, getStaticWrapperUtilityClass, } from './pickerStaticWrapperClasses';
 export type { PickerStaticWrapperClasses, PickerStaticWrapperClassKey, } from './pickerStaticWrapperClasses';

package/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { PickersArrowSwitcherProps } from './PickersArrowSwitcher.types';
+export declare const PickersArrowSwitcher: React.ForwardRefExoticComponent<PickersArrowSwitcherProps & React.RefAttributes<HTMLDivElement>>;

package/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js

@@ -0,0 +1,166 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["children", "className", "components", "componentsProps", "isNextDisabled", "isNextHidden", "onGoToNext", "nextLabel", "isPreviousDisabled", "isPreviousHidden", "onGoToPrevious", "previousLabel"],
+      _excluded2 = ["ownerState"],
+      _excluded3 = ["ownerState"];
+import * as React from 'react';
+import clsx from 'clsx';
+import Typography from '@mui/material/Typography';
+import { useTheme, styled, useThemeProps } from '@mui/material/styles';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { useSlotProps } from '@mui/base/utils';
+import IconButton from '@mui/material/IconButton';
+import { ArrowLeft, ArrowRight } from '../icons';
+import { getPickersArrowSwitcherUtilityClass } from './pickersArrowSwitcherClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const PickersArrowSwitcherRoot = styled('div', {
+  name: 'MuiPickersArrowSwitcher',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})({
+  display: 'flex'
+});
+const PickersArrowSwitcherSpacer = styled('div', {
+  name: 'MuiPickersArrowSwitcher',
+  slot: 'Spacer',
+  overridesResolver: (props, styles) => styles.spacer
+})(({
+  theme
+}) => ({
+  width: theme.spacing(3)
+}));
+const PickersArrowSwitcherButton = styled(IconButton, {
+  name: 'MuiPickersArrowSwitcher',
+  slot: 'Button',
+  overridesResolver: (props, styles) => styles.button
+})(({
+  ownerState
+}) => _extends({}, ownerState.hidden && {
+  visibility: 'hidden'
+}));
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    spacer: ['spacer'],
+    button: ['button']
+  };
+  return composeClasses(slots, getPickersArrowSwitcherUtilityClass, classes);
+};
+
+export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function PickersArrowSwitcher(inProps, ref) {
+  var _components$PreviousI, _components$NextIconB, _components$LeftArrow, _components$RightArro;
+
+  const theme = useTheme();
+  const isRTL = theme.direction === 'rtl';
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiPickersArrowSwitcher'
+  });
+
+  const {
+    children,
+    className,
+    components = {},
+    componentsProps = {},
+    isNextDisabled,
+    isNextHidden,
+    onGoToNext,
+    nextLabel,
+    isPreviousDisabled,
+    isPreviousHidden,
+    onGoToPrevious,
+    previousLabel
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const ownerState = props;
+  const classes = useUtilityClasses(ownerState);
+  const nextProps = {
+    isDisabled: isNextDisabled,
+    isHidden: isNextHidden,
+    goTo: onGoToNext,
+    label: nextLabel
+  };
+  const previousProps = {
+    isDisabled: isPreviousDisabled,
+    isHidden: isPreviousHidden,
+    goTo: onGoToPrevious,
+    label: previousLabel
+  };
+  const [leftProps, rightProps] = isRTL ? [nextProps, previousProps] : [previousProps, nextProps];
+  const PreviousIconButton = (_components$PreviousI = components.PreviousIconButton) != null ? _components$PreviousI : PickersArrowSwitcherButton;
+  const previousIconButtonProps = useSlotProps({
+    elementType: PreviousIconButton,
+    externalSlotProps: componentsProps.previousIconButton,
+    additionalProps: {
+      size: 'small',
+      title: leftProps.label,
+      'aria-label': leftProps.label,
+      disabled: leftProps.isDisabled,
+      edge: 'end',
+      onClick: leftProps.goTo
+    },
+    ownerState: _extends({}, ownerState, {
+      hidden: leftProps.isHidden
+    }),
+    className: classes.button
+  });
+  const NextIconButton = (_components$NextIconB = components.NextIconButton) != null ? _components$NextIconB : PickersArrowSwitcherButton;
+  const nextIconButtonProps = useSlotProps({
+    elementType: NextIconButton,
+    externalSlotProps: componentsProps.nextIconButton,
+    additionalProps: {
+      size: 'small',
+      title: rightProps.label,
+      'aria-label': rightProps.label,
+      disabled: rightProps.isDisabled,
+      edge: 'start',
+      onClick: rightProps.goTo
+    },
+    ownerState: _extends({}, ownerState, {
+      hidden: rightProps.isHidden
+    }),
+    className: classes.button
+  });
+  const LeftArrowIcon = (_components$LeftArrow = components == null ? void 0 : components.LeftArrowIcon) != null ? _components$LeftArrow : ArrowLeft; // The spread is here to avoid this bug mui/material-ui#34056
+
+  const _useSlotProps = useSlotProps({
+    elementType: LeftArrowIcon,
+    externalSlotProps: componentsProps.leftArrowIcon,
+    ownerState: undefined
+  }),
+        leftArrowIconProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
+
+  const RightArrowIcon = (_components$RightArro = components == null ? void 0 : components.RightArrowIcon) != null ? _components$RightArro : ArrowRight; // The spread is here to avoid this bug mui/material-ui#34056
+
+  const _useSlotProps2 = useSlotProps({
+    elementType: RightArrowIcon,
+    externalSlotProps: componentsProps.rightArrowIcon,
+    ownerState: undefined
+  }),
+        rightArrowIconProps = _objectWithoutPropertiesLoose(_useSlotProps2, _excluded3);
+
+  return /*#__PURE__*/_jsxs(PickersArrowSwitcherRoot, _extends({
+    ref: ref,
+    className: clsx(classes.root, className),
+    ownerState: ownerState
+  }, other, {
+    children: [/*#__PURE__*/_jsx(PreviousIconButton, _extends({}, previousIconButtonProps, {
+      children: isRTL ? /*#__PURE__*/_jsx(RightArrowIcon, _extends({}, rightArrowIconProps)) : /*#__PURE__*/_jsx(LeftArrowIcon, _extends({}, leftArrowIconProps))
+    })), children ? /*#__PURE__*/_jsx(Typography, {
+      variant: "subtitle1",
+      component: "span",
+      children: children
+    }) : /*#__PURE__*/_jsx(PickersArrowSwitcherSpacer, {
+      className: classes.spacer,
+      ownerState: ownerState
+    }), /*#__PURE__*/_jsx(NextIconButton, _extends({}, nextIconButtonProps, {
+      children: isRTL ? /*#__PURE__*/_jsx(LeftArrowIcon, _extends({}, leftArrowIconProps)) : /*#__PURE__*/_jsx(RightArrowIcon, _extends({}, rightArrowIconProps))
+    }))]
+  }));
+});