@mui/x-date-pickers 8.0.0-alpha.9 → 8.0.0-beta.1

package/modern/internals/components/PickerPopper/PickerPopper.js

@@ -0,0 +1,330 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["PaperComponent", "ownerState", "children", "paperSlotProps", "paperClasses", "onPaperClick", "onPaperTouchStart"];
+import * as React from 'react';
+import useSlotProps from '@mui/utils/useSlotProps';
+import Grow from '@mui/material/Grow';
+import Fade from '@mui/material/Fade';
+import MuiPaper from '@mui/material/Paper';
+import MuiPopper from '@mui/material/Popper';
+import BaseFocusTrap from '@mui/material/Unstable_TrapFocus';
+import { unstable_useForkRef as useForkRef, unstable_useEventCallback as useEventCallback, unstable_ownerDocument as ownerDocument, unstable_composeClasses as composeClasses } from '@mui/utils';
+import { styled, useThemeProps } from '@mui/material/styles';
+import { getPickerPopperUtilityClass } from "./pickerPopperClasses.js";
+import { executeInTheNextEventLoopTick, getActiveElement } from "../../utils/utils.js";
+import { usePickerPrivateContext } from "../../hooks/usePickerPrivateContext.js";
+import { usePickerContext } from "../../../hooks/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = classes => {
+  const slots = {
+    root: ['root'],
+    paper: ['paper']
+  };
+  return composeClasses(slots, getPickerPopperUtilityClass, classes);
+};
+const PickerPopperRoot = styled(MuiPopper, {
+  name: 'MuiPickerPopper',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
+  theme
+}) => ({
+  zIndex: theme.zIndex.modal
+}));
+const PickerPopperPaper = styled(MuiPaper, {
+  name: 'MuiPickerPopper',
+  slot: 'Paper',
+  overridesResolver: (_, styles) => styles.paper
+})({
+  outline: 0,
+  transformOrigin: 'top center',
+  variants: [{
+    props: ({
+      popperPlacement
+    }) => ['top', 'top-start', 'top-end'].includes(popperPlacement),
+    style: {
+      transformOrigin: 'bottom center'
+    }
+  }]
+});
+function clickedRootScrollbar(event, doc) {
+  return doc.documentElement.clientWidth < event.clientX || doc.documentElement.clientHeight < event.clientY;
+}
+/**
+ * Based on @mui/material/ClickAwayListener without the customization.
+ * We can probably strip away even more since children won't be portaled.
+ * @param {boolean} active Only listen to clicks when the popper is opened.
+ * @param {(event: MouseEvent | TouchEvent) => void} onClickAway The callback to call when clicking outside the popper.
+ * @returns {Array} The ref and event handler to listen to the outside clicks.
+ */
+function useClickAwayListener(active, onClickAway) {
+  const movedRef = React.useRef(false);
+  const syntheticEventRef = React.useRef(false);
+  const nodeRef = React.useRef(null);
+  const activatedRef = React.useRef(false);
+  React.useEffect(() => {
+    if (!active) {
+      return undefined;
+    }
+
+    // Ensure that this hook is not "activated" synchronously.
+    // https://github.com/facebook/react/issues/20074
+    function armClickAwayListener() {
+      activatedRef.current = true;
+    }
+    document.addEventListener('mousedown', armClickAwayListener, true);
+    document.addEventListener('touchstart', armClickAwayListener, true);
+    return () => {
+      document.removeEventListener('mousedown', armClickAwayListener, true);
+      document.removeEventListener('touchstart', armClickAwayListener, true);
+      activatedRef.current = false;
+    };
+  }, [active]);
+
+  // The handler doesn't take event.defaultPrevented into account:
+  //
+  // event.preventDefault() is meant to stop default behaviors like
+  // clicking a checkbox to check it, hitting a button to submit a form,
+  // and hitting left arrow to move the cursor in a text input etc.
+  // Only special HTML elements have these default behaviors.
+  const handleClickAway = useEventCallback(event => {
+    if (!activatedRef.current) {
+      return;
+    }
+
+    // Given developers can stop the propagation of the synthetic event,
+    // we can only be confident with a positive value.
+    const insideReactTree = syntheticEventRef.current;
+    syntheticEventRef.current = false;
+    const doc = ownerDocument(nodeRef.current);
+
+    // 1. IE11 support, which trigger the handleClickAway even after the unbind
+    // 2. The child might render null.
+    // 3. Behave like a blur listener.
+    if (!nodeRef.current ||
+    // is a TouchEvent?
+    'clientX' in event && clickedRootScrollbar(event, doc)) {
+      return;
+    }
+
+    // Do not act if user performed touchmove
+    if (movedRef.current) {
+      movedRef.current = false;
+      return;
+    }
+    let insideDOM;
+
+    // If not enough, can use https://github.com/DieterHolvoet/event-propagation-path/blob/master/propagationPath.js
+    if (event.composedPath) {
+      insideDOM = event.composedPath().indexOf(nodeRef.current) > -1;
+    } else {
+      insideDOM = !doc.documentElement.contains(event.target) || nodeRef.current.contains(event.target);
+    }
+    if (!insideDOM && !insideReactTree) {
+      onClickAway(event);
+    }
+  });
+
+  // Keep track of mouse/touch events that bubbled up through the portal.
+  const handleSynthetic = () => {
+    syntheticEventRef.current = true;
+  };
+  React.useEffect(() => {
+    if (active) {
+      const doc = ownerDocument(nodeRef.current);
+      const handleTouchMove = () => {
+        movedRef.current = true;
+      };
+      doc.addEventListener('touchstart', handleClickAway);
+      doc.addEventListener('touchmove', handleTouchMove);
+      return () => {
+        doc.removeEventListener('touchstart', handleClickAway);
+        doc.removeEventListener('touchmove', handleTouchMove);
+      };
+    }
+    return undefined;
+  }, [active, handleClickAway]);
+  React.useEffect(() => {
+    // TODO This behavior is not tested automatically
+    // It's unclear whether this is due to different update semantics in test (batched in act() vs discrete on click).
+    // Or if this is a timing related issues due to different Transition components
+    // Once we get rid of all the manual scheduling (for example setTimeout(update, 0)) we can revisit this code+test.
+    if (active) {
+      const doc = ownerDocument(nodeRef.current);
+      doc.addEventListener('click', handleClickAway);
+      return () => {
+        doc.removeEventListener('click', handleClickAway);
+        // cleanup `handleClickAway`
+        syntheticEventRef.current = false;
+      };
+    }
+    return undefined;
+  }, [active, handleClickAway]);
+  return [nodeRef, handleSynthetic, handleSynthetic];
+}
+const PickerPopperPaperWrapper = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+      PaperComponent,
+      ownerState,
+      children,
+      paperSlotProps,
+      paperClasses,
+      onPaperClick,
+      onPaperTouchStart
+      // picks up the style props provided by `Transition`
+      // https://mui.com/material-ui/transitions/#child-requirement
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const paperProps = useSlotProps({
+    elementType: PaperComponent,
+    externalSlotProps: paperSlotProps,
+    additionalProps: {
+      tabIndex: -1,
+      elevation: 8,
+      ref
+    },
+    className: paperClasses,
+    ownerState
+  });
+  return /*#__PURE__*/_jsx(PaperComponent, _extends({}, other, paperProps, {
+    onClick: event => {
+      onPaperClick(event);
+      paperProps.onClick?.(event);
+    },
+    onTouchStart: event => {
+      onPaperTouchStart(event);
+      paperProps.onTouchStart?.(event);
+    },
+    ownerState: ownerState,
+    children: children
+  }));
+});
+export function PickerPopper(inProps) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiPickerPopper'
+  });
+  const {
+    children,
+    placement = 'bottom-start',
+    slots,
+    slotProps,
+    classes: classesProp
+  } = props;
+  const {
+    open,
+    popupRef,
+    reduceAnimations
+  } = usePickerContext();
+  const {
+    dismissViews,
+    getCurrentViewMode,
+    triggerElement,
+    viewContainerRole
+  } = usePickerPrivateContext();
+  React.useEffect(() => {
+    function handleKeyDown(nativeEvent) {
+      if (open && nativeEvent.key === 'Escape') {
+        dismissViews();
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [dismissViews, open]);
+  const lastFocusedElementRef = React.useRef(null);
+  React.useEffect(() => {
+    if (viewContainerRole === 'tooltip' || getCurrentViewMode() === 'field') {
+      return;
+    }
+    if (open) {
+      lastFocusedElementRef.current = getActiveElement(document);
+    } else if (lastFocusedElementRef.current && lastFocusedElementRef.current instanceof HTMLElement) {
+      // make sure the button is flushed with updated label, before returning focus to it
+      // avoids issue, where screen reader could fail to announce selected date after selection
+      setTimeout(() => {
+        if (lastFocusedElementRef.current instanceof HTMLElement) {
+          lastFocusedElementRef.current.focus();
+        }
+      });
+    }
+  }, [open, viewContainerRole, getCurrentViewMode]);
+  const classes = useUtilityClasses(classesProp);
+  const {
+    ownerState: pickerOwnerState,
+    rootRefObject
+  } = usePickerPrivateContext();
+  const ownerState = _extends({}, pickerOwnerState, {
+    popperPlacement: placement
+  });
+  const handleClickAway = useEventCallback(() => {
+    if (viewContainerRole === 'tooltip') {
+      executeInTheNextEventLoopTick(() => {
+        if (rootRefObject.current?.contains(getActiveElement(document)) || popupRef.current?.contains(getActiveElement(document))) {
+          return;
+        }
+        dismissViews();
+      });
+    } else {
+      dismissViews();
+    }
+  });
+  const [clickAwayRef, onPaperClick, onPaperTouchStart] = useClickAwayListener(open, handleClickAway);
+  const paperRef = React.useRef(null);
+  const handleRef = useForkRef(paperRef, popupRef);
+  const handlePaperRef = useForkRef(handleRef, clickAwayRef);
+  const handleKeyDown = event => {
+    if (event.key === 'Escape') {
+      // stop the propagation to avoid closing parent modal
+      event.stopPropagation();
+      dismissViews();
+    }
+  };
+  const Transition = slots?.desktopTransition ?? reduceAnimations ? Fade : Grow;
+  const FocusTrap = slots?.desktopTrapFocus ?? BaseFocusTrap;
+  const Paper = slots?.desktopPaper ?? PickerPopperPaper;
+  const Popper = slots?.popper ?? PickerPopperRoot;
+  const popperProps = useSlotProps({
+    elementType: Popper,
+    externalSlotProps: slotProps?.popper,
+    additionalProps: {
+      transition: true,
+      role: viewContainerRole == null ? undefined : viewContainerRole,
+      open,
+      placement,
+      anchorEl: triggerElement,
+      onKeyDown: handleKeyDown
+    },
+    className: classes.root,
+    ownerState
+  });
+  return /*#__PURE__*/_jsx(Popper, _extends({}, popperProps, {
+    children: ({
+      TransitionProps
+    }) => /*#__PURE__*/_jsx(FocusTrap, _extends({
+      open: open,
+      disableAutoFocus: true
+      // pickers are managing focus position manually
+      // without this prop the focus is returned to the button before `aria-label` is updated
+      // which would force screen readers to read too old label
+      ,
+      disableRestoreFocus: true,
+      disableEnforceFocus: viewContainerRole === 'tooltip',
+      isEnabled: () => true
+    }, slotProps?.desktopTrapFocus, {
+      children: /*#__PURE__*/_jsx(Transition, _extends({}, TransitionProps, slotProps?.desktopTransition, {
+        children: /*#__PURE__*/_jsx(PickerPopperPaperWrapper, {
+          PaperComponent: Paper,
+          ownerState: ownerState,
+          ref: handlePaperRef,
+          onPaperClick: onPaperClick,
+          onPaperTouchStart: onPaperTouchStart,
+          paperClasses: classes.paper,
+          paperSlotProps: slotProps?.desktopPaper,
+          children: children
+        })
+      }))
+    }))
+  }));
+}

package/modern/internals/components/PickerPopper/index.d.ts

@@ -0,0 +1,4 @@
+export { PickerPopper } from "./PickerPopper.js";
+export type { ExportedPickerPopperProps } from './PickerPopper';
+export { pickerPopperClasses, getPickerPopperUtilityClass } from "./pickerPopperClasses.js";
+export type { PickerPopperClassKey, PickerPopperClasses } from './pickerPopperClasses';

package/modern/internals/components/PickerPopper/index.js

@@ -0,0 +1,2 @@
+export { PickerPopper } from "./PickerPopper.js";
+export { pickerPopperClasses, getPickerPopperUtilityClass } from "./pickerPopperClasses.js";

package/modern/internals/components/PickerPopper/pickerPopperClasses.d.ts

@@ -0,0 +1,9 @@
+export interface PickerPopperClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+}
+export type PickerPopperClassKey = keyof PickerPopperClasses;
+export declare function getPickerPopperUtilityClass(slot: string): string;
+export declare const pickerPopperClasses: Record<"root" | "paper", string>;

package/modern/internals/components/PickerPopper/pickerPopperClasses.js

@@ -0,0 +1,6 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getPickerPopperUtilityClass(slot) {
+  return generateUtilityClass('MuiPickerPopper', slot);
+}
+export const pickerPopperClasses = generateUtilityClasses('MuiPickerPopper', ['root', 'paper']);

package/modern/internals/components/PickerProvider.d.ts

@@ -0,0 +1,275 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { Theme } from '@mui/material/styles';
+import { PickerChangeImportance, PickerOwnerState, PickersTimezone } from "../../models/index.js";
+import { PickersInputLocaleText } from "../../locales/index.js";
+import { DateOrTimeViewWithMeridiem, PickerOrientation, PickerValidValue, PickerVariant } from "../models/index.js";
+import { PickerFieldPrivateContextValue } from "../hooks/useNullableFieldPrivateContext.js";
+import type { PickersShortcutsItemContext } from '../../PickersShortcuts';
+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>): React.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';
+  /**
+   * 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;
+}
+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;
+  /**
+   * 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;
+}

package/modern/internals/components/PickerProvider.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { LocalizationProvider } from "../../LocalizationProvider/index.js";
 import { IsValidValueContext } from "../../hooks/useIsValidValue.js";
-import { PickerFieldPrivateContext } from "../hooks/useField/useFieldInternalPropsWithDefaults.js";
+import { PickerFieldPrivateContext } from "../hooks/useNullableFieldPrivateContext.js";
 import { PickerContext } from "../../hooks/usePickerContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const PickerActionsContext = /*#__PURE__*/React.createContext(null);
@@ -14,12 +14,20 @@ export const PickerPrivateContext = /*#__PURE__*/React.createContext({
     pickerVariant: 'desktop',
     pickerOrientation: 'portrait'
   },
-  dismissViews: () => {}
+  rootRefObject: {
+    current: null
+  },
+  labelId: undefined,
+  dismissViews: () => {},
+  hasUIView: true,
+  getCurrentViewMode: () => 'UI',
+  triggerElement: null,
+  viewContainerRole: null
 });
 
 /**
- * Provides the context for the various parts of a picker component:
- * - contextValue: the context for the picker sub-components.
+ * 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.

package/modern/internals/components/PickerViewRoot/PickerViewRoot.d.ts

@@ -0,0 +1 @@
+export declare const PickerViewRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/modern/internals/components/PickerViewRoot/index.d.ts

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

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

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