@mui/x-date-pickers 9.0.0-alpha.1 → 9.0.0-alpha.3

package/internals/components/PickerProvider.d.mts

@@ -0,0 +1,306 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { Theme } from '@mui/material/styles';
+import { PickerChangeImportance, PickerOwnerState, PickersTimezone } from "../../models/index.mjs";
+import { PickersInputLocaleText } from "../../locales/index.mjs";
+import { DateOrTimeViewWithMeridiem, PickerOrientation, PickerValidValue, PickerVariant } from "../models/index.mjs";
+import { PickerFieldPrivateContextValue } from "../hooks/useNullableFieldPrivateContext.mjs";
+import type { PickersShortcutsItemContext } from "../../PickersShortcuts/index.mjs";
+import type { PickersActionBarAction } from "../../PickersActionBar/index.mjs";
+export declare const PickerActionsContext: React.Context<PickerActionsContextValue<any, any, any> | null>;
+export declare const PickerPrivateContext: React.Context<PickerPrivateContextValue>;
+/**
+ * Provides the context for the various parts of a Picker component:
+ * - contextValue: the context for the Picker sub-components.
+ * - localizationProvider: the translations passed through the props and through a parent LocalizationProvider.
+ *
+ * @ignore - do not document.
+ */
+export declare function PickerProvider<TValue extends PickerValidValue>(props: PickerProviderProps<TValue>): import("react/jsx-runtime").JSX.Element;
+export interface PickerProviderProps<TValue extends PickerValidValue> {
+  contextValue: PickerContextValue<any, any, any>;
+  actionsContextValue: PickerActionsContextValue<any, any, any>;
+  privateContextValue: PickerPrivateContextValue;
+  fieldPrivateContextValue: PickerFieldPrivateContextValue;
+  isValidContextValue: (value: TValue) => boolean;
+  localeText: PickersInputLocaleText | undefined;
+  children: React.ReactNode;
+}
+export interface PickerContextValue<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError> extends PickerActionsContextValue<TValue, TView, TError> {
+  /**
+   * The current value of the Picker.
+   */
+  value: TValue;
+  /**
+   * The timezone to use when rendering the dates.
+   * If a `timezone` prop is provided, it will be used.
+   * If the `value` prop contains a valid date, its timezone will be used.
+   * If no `value` prop is provided, but the `defaultValue` contains a valid date, its timezone will be used.
+   * If no `value` or `defaultValue` is provided, but the `referenceDate` is provided, its timezone will be used.
+   * Otherwise, the timezone will be the default one of your date library.
+   */
+  timezone: PickersTimezone;
+  /**
+   * Whether the Picker is open.
+   */
+  open: boolean;
+  /**
+   * Whether the Picker is disabled.
+   */
+  disabled: boolean;
+  /**
+   * Whether the Picker is read-only.
+   */
+  readOnly: boolean;
+  /**
+   * Whether the Picker should be focused on mount.
+   * If the Picker has a field and is not open, the field should be focused.
+   * If the Picker does not have a field (static variant) or is not open, the view should be focused.
+   */
+  autoFocus: boolean;
+  /**
+   * The views that the Picker has to render.
+   * It is equal to the Picker `views` prop—if defined.
+   * Otherwise, a default set of views is provided based on the component you are using:
+   * - Date Picker: ['year', 'day']
+   * - Time Picker: ['hours', 'minutes']
+   * - Date Time Picker: ['year', 'day', 'hours', 'minutes']
+   * - Date Range Picker: ['day']
+   * - Date Time Range Picker: ['day', 'hours', 'minutes']
+   */
+  views: readonly TView[];
+  /**
+   * The currently rendered view.
+   */
+  view: TView | null;
+  /**
+   * The first view shown when opening the Picker for the first time.
+   */
+  initialView: TView | null;
+  /**
+   * The responsive variant of the Picker.
+   * It is equal to "desktop" when using a desktop Picker (like <DesktopDatePicker />).
+   * It is equal to "mobile" when using a mobile Picker (like <MobileDatePicker />).
+   * It is equal to "mobile" or "desktop" when using a responsive Picker (like <DatePicker />) depending on the `desktopModeMediaQuery` prop.
+   * It is equal to "mobile" or "desktop" when using a static Picker (like <StaticDatePicker />) depending on the `displayStaticWrapperAs` prop.
+   * It is always equal to "desktop" if the component you are accessing the context from is not wrapped with a Picker.
+   */
+  variant: PickerVariant;
+  /**
+   * The orientation of the Picker.
+   * On Time Pickers and Date Time Pickers, it is always equal to "portrait".
+   * On Date Pickers, it is equal to the Picker `orientation` prop if defined, otherwise it is based on the current orientation of the user's screen.
+   * It is always equal to "portrait" if the component you are accessing the context from is not wrapped with a Picker.
+   */
+  orientation: PickerOrientation;
+  /**
+   * Whether the heavy animations should be disabled.
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+   */
+  reduceAnimations?: boolean;
+  /**
+   * The ref to attach to the element that triggers the Picker opening.
+   * When using a built-in field component, this property is automatically attached to the right element.
+   */
+  triggerRef: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
+  /**
+   * The status of the element that triggers the Picker opening.
+   * If it is "hidden", the field should not render the UI to open the Picker.
+   * If it is "disabled", the field should render a disabled UI to open the Picker.
+   * If it is "enabled", the field should render an interactive UI to open the Picker.
+   */
+  triggerStatus: 'hidden' | 'disabled' | 'enabled';
+  /**
+   * If true, the picker should open when the user focuses/clicks the field input to edit.
+   * Controlled by the component prop `keepOpenDuringFieldFocus`.
+   */
+  keepOpenDuringFieldFocus?: boolean;
+  /**
+   * Whether the Picker has any value picking steps left.
+   */
+  hasNextStep: boolean;
+  /**
+   * The ref to attach to the popup's outermost element that contains the view, if any.
+   * When using a built-in popup component, this property is automatically attached to the appropriate element.
+   */
+  popupRef: React.RefObject<any>;
+  /**
+   * The format to use when rendering the value in the field.
+   * It is equal to the Picker `format` prop if defined.
+   * It is generated based on the available views if not defined.
+   * It is always equal to an empty string if the Picker does not have a field (static variant).
+   * It is always equal to an empty string if the component you are accessing the context from is not wrapped with a Picker.
+   */
+  fieldFormat: string;
+  /**
+   * The name to apply to the <input /> element if the Picker contains one.
+   * If the Picker has a field, it should probably be applied to its input element.
+   * It is equal to the Picker `name` prop if defined (the prop does not exist on the static variant).
+   * It is always equal to undefined if the component you are accessing the context from is not wrapped with a Picker.
+   */
+  name: string | undefined;
+  /**
+   * The label to render by the field if the Picker contains one.
+   * It is equal to the Picker `label` prop if defined (the prop does not exist on the static variant).
+   * It is always equal to undefined if the component you are accessing the context from is not wrapped with a Picker.
+   */
+  label: React.ReactNode | undefined;
+  /**
+   * The class name to apply to the root element.
+   * If the Picker has a field, it should be applied to field root element, otherwise to the layout root element.
+   * It is equal to the Picker `className` prop if defined.
+   * It is always equal to undefined if the component you are accessing the context from is not wrapped with a Picker.
+   */
+  rootClassName: string | undefined;
+  /**
+   * The MUI style prop to apply to the root element.
+   * If the Picker has a field, it should be applied to field root element, otherwise to the layout root element.
+   * It is equal to the Picker `sx` prop if defined.
+   * It is always equal to undefined if the component you are accessing the context from is not wrapped with a Picker.
+   */
+  rootSx: SxProps<Theme> | undefined;
+  /**
+   * The ref to attach to the root element.
+   * If the Picker has a field, it should be attached to field root element, otherwise to the layout root element.
+   * It is equal to the ref passed to the Picker component if defined.
+   * It is always equal to undefined if the component you are accessing the context from is not wrapped with a Picker.
+   */
+  rootRef: React.ForwardedRef<HTMLDivElement> | undefined;
+}
+export interface PickerActionsContextValue<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError = string | null> {
+  /**
+   * Set the current value of the Picker.
+   * @param {TValue} value The new value of the Picker.
+   * @param {SetValueActionOptions<TError>} options The options to customize the behavior of this update.
+   */
+  setValue: (value: TValue, options?: SetValueActionOptions<TError>) => void;
+  /**
+   * Set the current open state of the Picker.
+   * It can be a function that will receive the current open state as parameter.
+   * ```ts
+   * setOpen(true); // Opens the Picker.
+   * setOpen(false); // Closes the Picker.
+   * setOpen((prevOpen) => !prevOpen); // Toggles the open state.
+   * ```
+   * @param {React.SetStateAction<boolean>} action The new open state of the Picker.
+   */
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  /**
+   * Set the current view of the Picker.
+   * @template TView
+   * @param {TView} view The new view of the Picker
+   */
+  setView: (view: TView) => void;
+  /**
+   * Set the current value of the Picker to be empty.
+   * The value will be `null` on a single Picker and `[null, null]` on a range Picker.
+   */
+  clearValue: () => void;
+  /**
+   * Set the current value of the Picker to be the current date.
+   * The value will be `today` on a non-range Picker and `[today, today]` on a range Picker.
+   * With `today` being the current date, with its time set to `00:00:00` on Date Pickers and its time set to the current time on Time and Date and Time Pickers.
+   */
+  setValueToToday: () => void;
+  /**
+   * Accept the current value of the Picker.
+   * Will call `onAccept` if defined.
+   * If the Picker is re-opened, this value will be the one used to initialize the views.
+   */
+  acceptValueChanges: () => void;
+  /**
+   * Cancel the changes made to the current value of the Picker.
+   * The value will be reset to the last accepted value.
+   */
+  cancelValueChanges: () => void;
+  /**
+   * Go to the next step in the value picking process.
+   * For example, on the Mobile Date Time Picker, if the user is editing the date, it will switch to editing the time.
+   */
+  goToNextStep: () => void;
+}
+export interface SetValueActionOptions<TError = string | null> {
+  /**
+   * The importance of the change when picking a value:
+   * - "accept": fires `onChange`, fires `onAccept` and closes the Picker.
+   * - "set": fires `onChange` but do not fire `onAccept` and does not close the Picker.
+   * @default "accept"
+   */
+  changeImportance?: PickerChangeImportance;
+  /**
+   * The validation error associated with the current value.
+   * If not defined, the validation will be computed by the Picker.
+   */
+  validationError?: TError;
+  /**
+   * The shortcut that triggered this change.
+   * It should not be defined if the change does not come from a shortcut.
+   */
+  shortcut?: PickersShortcutsItemContext;
+  /**
+   * Source of the change.
+   * Simplified to one of the following values:
+   * - 'field' (changes coming from the text field)
+   * - 'view' (any interaction inside the picker UI: views, toolbar, action bar, shortcuts, etc.)
+   * - 'unknown' (unspecified or third-party triggers)
+   */
+  source?: 'field' | 'view' | 'unknown';
+  /**
+   * Whether the value should call `onChange` and `onAccept` when the value is not controlled and has never been modified.
+   * If `true`, the `onChange` and `onAccept` callback will only be fired if the value has been modified (and is not equal to the last published value).
+   * If `false`, the `onChange` and `onAccept` callback will be fired when the value has never been modified (`onAccept` only if `changeImportance` is set to "accept").
+   * @default false
+   */
+  skipPublicationIfPristine?: boolean;
+  /**
+   * Whether the Picker should close.
+   * @default changeImportance === "accept"
+   */
+  shouldClose?: boolean;
+}
+export interface PickerPrivateContextValue {
+  dismissViews: () => void;
+  /**
+   * The ownerState of the picker.
+   */
+  ownerState: PickerOwnerState;
+  /**
+   * Whether at least one view has an UI (it has a view renderer associated).
+   */
+  hasUIView: boolean;
+  /**
+   * Return the mode of the current view.
+   * @returns {boolean} The mode of the current view.
+   */
+  getCurrentViewMode: () => 'UI' | 'field';
+  /**
+   * The ref of the root element.
+   * This is the object counterpart of the `usePickerContext().rootRef` property which can be a function.
+   */
+  rootRefObject: React.RefObject<HTMLDivElement | null>;
+  /**
+   * The id of the label element.
+   */
+  labelId: string | undefined;
+  /**
+   * The element used as the anchor for the Picker Popper.
+   */
+  triggerElement: HTMLElement | null;
+  /**
+   * The aria role associated with the view container.
+   * It is equal to "dialog" when the view is rendered inside a `@mui/material/Dialog`.
+   * It is equal to "dialog" when the view is rendered inside a `@mui/material/Popper` and the focus is trapped inside the view.
+   * It is equal to "tooltip" when the view is rendered inside a `@mui/material/Popper` and the focus remains inside the field.
+   * It is always equal to null if the Picker does not have a field (static variant).
+   * It is always equal to null if the component you are accessing the context from is not wrapped with a Picker.
+   */
+  viewContainerRole: 'dialog' | 'tooltip' | null;
+  /**
+   * The actions to render in the action bar if the user doesn't provide any.
+   */
+  defaultActionBarActions: PickersActionBarAction[];
+  /**
+   * The function to call when the Popper is closing animation is finished.
+   */
+  onPopperExited: (() => void) | undefined;
+}

package/internals/components/PickerProvider.d.ts

@@ -110,6 +110,11 @@ export interface PickerContextValue<TValue extends PickerValidValue, TView exten
    * If it is "enabled", the field should render an interactive UI to open the Picker.
    */
   triggerStatus: 'hidden' | 'disabled' | 'enabled';
+  /**
+   * If true, the picker should open when the user focuses/clicks the field input to edit.
+   * Controlled by the component prop `keepOpenDuringFieldFocus`.
+   */
+  keepOpenDuringFieldFocus?: boolean;
   /**
    * Whether the Picker has any value picking steps left.
    */

package/internals/components/PickerProvider.mjs

@@ -0,0 +1,70 @@
+'use client';
+
+import * as React from 'react';
+import { LocalizationProvider } from "../../LocalizationProvider/index.mjs";
+import { IsValidValueContext } from "../../hooks/useIsValidValue.mjs";
+import { PickerFieldPrivateContext } from "../hooks/useNullableFieldPrivateContext.mjs";
+import { PickerContext } from "../../hooks/usePickerContext.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const PickerActionsContext = /*#__PURE__*/React.createContext(null);
+if (process.env.NODE_ENV !== "production") PickerActionsContext.displayName = "PickerActionsContext";
+export const PickerPrivateContext = /*#__PURE__*/React.createContext({
+  ownerState: {
+    isPickerDisabled: false,
+    isPickerReadOnly: false,
+    isPickerValueEmpty: false,
+    isPickerOpen: false,
+    pickerVariant: 'desktop',
+    pickerOrientation: 'portrait'
+  },
+  rootRefObject: {
+    current: null
+  },
+  labelId: undefined,
+  dismissViews: () => {},
+  hasUIView: true,
+  getCurrentViewMode: () => 'UI',
+  triggerElement: null,
+  viewContainerRole: null,
+  defaultActionBarActions: [],
+  onPopperExited: undefined
+});
+
+/**
+ * Provides the context for the various parts of a Picker component:
+ * - contextValue: the context for the Picker sub-components.
+ * - localizationProvider: the translations passed through the props and through a parent LocalizationProvider.
+ *
+ * @ignore - do not document.
+ */
+if (process.env.NODE_ENV !== "production") PickerPrivateContext.displayName = "PickerPrivateContext";
+export function PickerProvider(props) {
+  const {
+    contextValue,
+    actionsContextValue,
+    privateContextValue,
+    fieldPrivateContextValue,
+    isValidContextValue,
+    localeText,
+    children
+  } = props;
+  return /*#__PURE__*/_jsx(PickerContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx(PickerActionsContext.Provider, {
+      value: actionsContextValue,
+      children: /*#__PURE__*/_jsx(PickerPrivateContext.Provider, {
+        value: privateContextValue,
+        children: /*#__PURE__*/_jsx(PickerFieldPrivateContext.Provider, {
+          value: fieldPrivateContextValue,
+          children: /*#__PURE__*/_jsx(IsValidValueContext.Provider, {
+            value: isValidContextValue,
+            children: /*#__PURE__*/_jsx(LocalizationProvider, {
+              localeText: localeText,
+              children: children
+            })
+          })
+        })
+      })
+    })
+  });
+}

package/internals/components/PickerViewRoot/PickerViewRoot.mjs

@@ -0,0 +1,13 @@
+import { styled } from '@mui/material/styles';
+import { DIALOG_WIDTH, VIEW_HEIGHT } from "../../constants/dimensions.mjs";
+export const PickerViewRoot = styled('div', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})({
+  overflow: 'hidden',
+  width: DIALOG_WIDTH,
+  maxHeight: VIEW_HEIGHT,
+  display: 'flex',
+  flexDirection: 'column',
+  margin: '0 auto'
+});

package/internals/components/PickerViewRoot/index.d.mts

@@ -0,0 +1 @@
+export { PickerViewRoot } from "./PickerViewRoot.mjs";

package/internals/components/PickerViewRoot/index.mjs

@@ -0,0 +1 @@
+export { PickerViewRoot } from "./PickerViewRoot.mjs";

package/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.d.mts

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

package/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.mjs

@@ -0,0 +1,176 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["children", "className", "slots", "slotProps", "isNextDisabled", "isNextHidden", "onGoToNext", "nextLabel", "isPreviousDisabled", "isPreviousHidden", "onGoToPrevious", "previousLabel", "labelId", "classes"],
+  _excluded2 = ["ownerState"],
+  _excluded3 = ["ownerState"];
+import * as React from 'react';
+import clsx from 'clsx';
+import Typography from '@mui/material/Typography';
+import { useRtl } from '@mui/system/RtlProvider';
+import { styled, useThemeProps } from '@mui/material/styles';
+import composeClasses from '@mui/utils/composeClasses';
+import useSlotProps from '@mui/utils/useSlotProps';
+import IconButton from '@mui/material/IconButton';
+import { ArrowLeftIcon, ArrowRightIcon } from "../../../icons/index.mjs";
+import { getPickersArrowSwitcherUtilityClass } from "./pickersArrowSwitcherClasses.mjs";
+import { usePickerPrivateContext } from "../../hooks/usePickerPrivateContext.mjs";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const PickersArrowSwitcherRoot = styled('div', {
+  name: 'MuiPickersArrowSwitcher',
+  slot: 'Root'
+})({
+  display: 'flex'
+});
+const PickersArrowSwitcherSpacer = styled('div', {
+  name: 'MuiPickersArrowSwitcher',
+  slot: 'Spacer'
+})(({
+  theme
+}) => ({
+  width: theme.spacing(3)
+}));
+const PickersArrowSwitcherButton = styled(IconButton, {
+  name: 'MuiPickersArrowSwitcher',
+  slot: 'Button'
+})({
+  variants: [{
+    props: {
+      isButtonHidden: true
+    },
+    style: {
+      visibility: 'hidden'
+    }
+  }]
+});
+const useUtilityClasses = classes => {
+  const slots = {
+    root: ['root'],
+    spacer: ['spacer'],
+    button: ['button'],
+    previousIconButton: ['previousIconButton'],
+    nextIconButton: ['nextIconButton'],
+    leftArrowIcon: ['leftArrowIcon'],
+    rightArrowIcon: ['rightArrowIcon']
+  };
+  return composeClasses(slots, getPickersArrowSwitcherUtilityClass, classes);
+};
+export const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function PickersArrowSwitcher(inProps, ref) {
+  const isRtl = useRtl();
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiPickersArrowSwitcher'
+  });
+  const {
+      children,
+      className,
+      slots,
+      slotProps,
+      isNextDisabled,
+      isNextHidden,
+      onGoToNext,
+      nextLabel,
+      isPreviousDisabled,
+      isPreviousHidden,
+      onGoToPrevious,
+      previousLabel,
+      labelId,
+      classes: classesProp
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    ownerState
+  } = usePickerPrivateContext();
+  const classes = useUtilityClasses(classesProp);
+  const nextProps = {
+    isDisabled: isNextDisabled,
+    isHidden: isNextHidden,
+    goTo: onGoToNext,
+    label: nextLabel
+  };
+  const previousProps = {
+    isDisabled: isPreviousDisabled,
+    isHidden: isPreviousHidden,
+    goTo: onGoToPrevious,
+    label: previousLabel
+  };
+  const PreviousIconButton = slots?.previousIconButton ?? PickersArrowSwitcherButton;
+  const previousIconButtonProps = useSlotProps({
+    elementType: PreviousIconButton,
+    externalSlotProps: slotProps?.previousIconButton,
+    additionalProps: {
+      size: 'medium',
+      title: previousProps.label,
+      'aria-label': previousProps.label,
+      disabled: previousProps.isDisabled,
+      edge: 'end',
+      onClick: previousProps.goTo
+    },
+    ownerState: _extends({}, ownerState, {
+      isButtonHidden: previousProps.isHidden ?? false
+    }),
+    className: clsx(classes.button, classes.previousIconButton)
+  });
+  const NextIconButton = slots?.nextIconButton ?? PickersArrowSwitcherButton;
+  const nextIconButtonProps = useSlotProps({
+    elementType: NextIconButton,
+    externalSlotProps: slotProps?.nextIconButton,
+    additionalProps: {
+      size: 'medium',
+      title: nextProps.label,
+      'aria-label': nextProps.label,
+      disabled: nextProps.isDisabled,
+      edge: 'start',
+      onClick: nextProps.goTo
+    },
+    ownerState: _extends({}, ownerState, {
+      isButtonHidden: nextProps.isHidden ?? false
+    }),
+    className: clsx(classes.button, classes.nextIconButton)
+  });
+  const LeftArrowIcon = slots?.leftArrowIcon ?? ArrowLeftIcon;
+  // The spread is here to avoid this bug mui/material-ui#34056
+  const _useSlotProps = useSlotProps({
+      elementType: LeftArrowIcon,
+      externalSlotProps: slotProps?.leftArrowIcon,
+      additionalProps: {
+        fontSize: 'inherit'
+      },
+      ownerState,
+      className: classes.leftArrowIcon
+    }),
+    leftArrowIconProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
+  const RightArrowIcon = slots?.rightArrowIcon ?? ArrowRightIcon;
+  // The spread is here to avoid this bug mui/material-ui#34056
+  const _useSlotProps2 = useSlotProps({
+      elementType: RightArrowIcon,
+      externalSlotProps: slotProps?.rightArrowIcon,
+      additionalProps: {
+        fontSize: 'inherit'
+      },
+      ownerState,
+      className: classes.rightArrowIcon
+    }),
+    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",
+      id: labelId,
+      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))
+    }))]
+  }));
+});
+if (process.env.NODE_ENV !== "production") PickersArrowSwitcher.displayName = "PickersArrowSwitcher";

package/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.types.d.mts

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { SlotComponentProps } from '@mui/utils/types';
+import IconButton from '@mui/material/IconButton';
+import SvgIcon from '@mui/material/SvgIcon';
+import { PickersArrowSwitcherClasses } from "./pickersArrowSwitcherClasses.mjs";
+import { PickerOwnerState } from "../../../models/index.mjs";
+export interface ExportedPickersArrowSwitcherProps {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PickersArrowSwitcherSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PickersArrowSwitcherSlotProps;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<PickersArrowSwitcherClasses>;
+  /**
+   * Format used to display the date.
+   * @default `${adapter.formats.month} ${adapter.formats.year}`
+   */
+  format?: string;
+}
+export interface PickersArrowSwitcherProps extends ExportedPickersArrowSwitcherProps, Omit<React.HTMLProps<HTMLDivElement>, 'ref' | 'as'> {
+  children?: React.ReactNode;
+  isPreviousDisabled: boolean;
+  isPreviousHidden?: boolean;
+  onGoToPrevious: () => void;
+  previousLabel: string;
+  isNextDisabled: boolean;
+  isNextHidden?: boolean;
+  onGoToNext: () => void;
+  nextLabel: string;
+  labelId?: string;
+}
+export interface PickersArrowSwitcherOwnerState extends PickerOwnerState {
+  /**
+   * If `true`, this button should be hidden.
+   */
+  isButtonHidden: boolean;
+}
+export interface PickersArrowSwitcherSlotPropsOverrides {}
+export interface PickersArrowSwitcherSlots {
+  /**
+   * Button allowing to switch to the left view.
+   * @default IconButton
+   */
+  previousIconButton?: React.ElementType;
+  /**
+   * Button allowing to switch to the right view.
+   * @default IconButton
+   */
+  nextIconButton?: React.ElementType;
+  /**
+   * Icon displayed in the left view switch button.
+   * @default ArrowLeft
+   */
+  leftArrowIcon?: React.ElementType;
+  /**
+   * Icon displayed in the right view switch button.
+   * @default ArrowRight
+   */
+  rightArrowIcon?: React.ElementType;
+}
+export interface PickersArrowSwitcherSlotProps {
+  previousIconButton?: SlotComponentProps<typeof IconButton, PickersArrowSwitcherSlotPropsOverrides, PickersArrowSwitcherOwnerState>;
+  nextIconButton?: SlotComponentProps<typeof IconButton, PickersArrowSwitcherSlotPropsOverrides, PickersArrowSwitcherOwnerState>;
+  leftArrowIcon?: SlotComponentProps<typeof SvgIcon, PickersArrowSwitcherSlotPropsOverrides, PickerOwnerState>;
+  rightArrowIcon?: SlotComponentProps<typeof SvgIcon, PickersArrowSwitcherSlotPropsOverrides, PickerOwnerState>;
+}

package/internals/components/PickersArrowSwitcher/index.d.mts

@@ -0,0 +1,4 @@
+export { PickersArrowSwitcher } from "./PickersArrowSwitcher.mjs";
+export type { PickersArrowSwitcherSlots, PickersArrowSwitcherSlotProps, ExportedPickersArrowSwitcherProps } from "./PickersArrowSwitcher.types.mjs";
+export { pickersArrowSwitcherClasses, getPickersArrowSwitcherUtilityClass } from "./pickersArrowSwitcherClasses.mjs";
+export type { PickersArrowSwitcherClassKey, PickersArrowSwitcherClasses } from "./pickersArrowSwitcherClasses.mjs";

package/internals/components/PickersArrowSwitcher/index.mjs

@@ -0,0 +1,2 @@
+export { PickersArrowSwitcher } from "./PickersArrowSwitcher.mjs";
+export { pickersArrowSwitcherClasses, getPickersArrowSwitcherUtilityClass } from "./pickersArrowSwitcherClasses.mjs";