@mui/x-date-pickers 8.0.0-alpha.8 → 8.0.0-beta.0

package/esm/internals/hooks/useField/useFieldV7TextField.js

@@ -0,0 +1,410 @@
+import * as React from 'react';
+import useForkRef from '@mui/utils/useForkRef';
+import useEventCallback from '@mui/utils/useEventCallback';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import useId from '@mui/utils/useId';
+import { getSectionValueNow, getSectionValueText, parseSelectedSections } from "./useField.utils.js";
+import { getActiveElement } from "../../utils/utils.js";
+import { usePickerTranslations } from "../../../hooks/usePickerTranslations.js";
+import { useUtils } from "../useUtils.js";
+export const useFieldV7TextField = params => {
+  const {
+    internalProps: {
+      disabled,
+      readOnly = false,
+      autoFocus = false,
+      focused: focusedProp
+    },
+    forwardedProps: {
+      sectionListRef: inSectionListRef,
+      onBlur,
+      onClick,
+      onFocus,
+      onInput,
+      onPaste
+    },
+    fieldValueManager,
+    applyCharacterEditing,
+    resetCharacterQuery,
+    setSelectedSections,
+    parsedSelectedSections,
+    state,
+    clearActiveSection,
+    clearValue,
+    updateSectionValue,
+    updateValueFromValueStr,
+    sectionOrder,
+    areAllSectionsEmpty,
+    sectionsValueBoundaries
+  } = params;
+  const sectionListRef = React.useRef(null);
+  const handleSectionListRef = useForkRef(inSectionListRef, sectionListRef);
+  const translations = usePickerTranslations();
+  const utils = useUtils();
+  const id = useId();
+  const [focused, setFocused] = React.useState(false);
+  const interactions = React.useMemo(() => ({
+    syncSelectionToDOM: () => {
+      if (!sectionListRef.current) {
+        return;
+      }
+      const selection = document.getSelection();
+      if (!selection) {
+        return;
+      }
+      if (parsedSelectedSections == null) {
+        // If the selection contains an element inside the field, we reset it.
+        if (selection.rangeCount > 0 && sectionListRef.current.getRoot().contains(selection.getRangeAt(0).startContainer)) {
+          selection.removeAllRanges();
+        }
+        if (focused) {
+          sectionListRef.current.getRoot().blur();
+        }
+        return;
+      }
+
+      // On multi input range pickers we want to update selection range only for the active input
+      if (!sectionListRef.current.getRoot().contains(getActiveElement(document))) {
+        return;
+      }
+      const range = new window.Range();
+      let target;
+      if (parsedSelectedSections === 'all') {
+        target = sectionListRef.current.getRoot();
+      } else {
+        const section = state.sections[parsedSelectedSections];
+        if (section.type === 'empty') {
+          target = sectionListRef.current.getSectionContainer(parsedSelectedSections);
+        } else {
+          target = sectionListRef.current.getSectionContent(parsedSelectedSections);
+        }
+      }
+      range.selectNodeContents(target);
+      target.focus();
+      selection.removeAllRanges();
+      selection.addRange(range);
+    },
+    getActiveSectionIndexFromDOM: () => {
+      const activeElement = getActiveElement(document);
+      if (!activeElement || !sectionListRef.current || !sectionListRef.current.getRoot().contains(activeElement)) {
+        return null;
+      }
+      return sectionListRef.current.getSectionIndexFromDOMElement(activeElement);
+    },
+    focusField: (newSelectedSections = 0) => {
+      if (!sectionListRef.current ||
+      // if the field is already focused, we don't need to focus it again
+      interactions.getActiveSectionIndexFromDOM() != null) {
+        return;
+      }
+      const newParsedSelectedSections = parseSelectedSections(newSelectedSections, state.sections);
+      setFocused(true);
+      sectionListRef.current.getSectionContent(newParsedSelectedSections).focus();
+    },
+    setSelectedSections: newSelectedSections => {
+      if (!sectionListRef.current) {
+        return;
+      }
+      const newParsedSelectedSections = parseSelectedSections(newSelectedSections, state.sections);
+      const newActiveSectionIndex = newParsedSelectedSections === 'all' ? 0 : newParsedSelectedSections;
+      setFocused(newActiveSectionIndex !== null);
+      setSelectedSections(newSelectedSections);
+    },
+    isFieldFocused: () => {
+      const activeElement = getActiveElement(document);
+      return !!sectionListRef.current && sectionListRef.current.getRoot().contains(activeElement);
+    }
+  }), [parsedSelectedSections, setSelectedSections, state.sections, focused]);
+
+  /**
+   * If a section content has been updated with a value we don't want to keep,
+   * Then we need to imperatively revert it (we can't let React do it because the value did not change in his internal representation).
+   */
+  const revertDOMSectionChange = useEventCallback(sectionIndex => {
+    if (!sectionListRef.current) {
+      return;
+    }
+    const section = state.sections[sectionIndex];
+    sectionListRef.current.getSectionContent(sectionIndex).innerHTML = section.value || section.placeholder;
+    interactions.syncSelectionToDOM();
+  });
+  const handleContainerClick = useEventCallback((event, ...args) => {
+    // The click event on the clear button would propagate to the input, trigger this handler and result in a wrong section selection.
+    // We avoid this by checking if the call of `handleContainerClick` is actually intended, or a side effect.
+    if (event.isDefaultPrevented() || !sectionListRef.current) {
+      return;
+    }
+    setFocused(true);
+    onClick?.(event, ...args);
+    if (parsedSelectedSections === 'all') {
+      setTimeout(() => {
+        const cursorPosition = document.getSelection().getRangeAt(0).startOffset;
+        if (cursorPosition === 0) {
+          setSelectedSections(sectionOrder.startIndex);
+          return;
+        }
+        let sectionIndex = 0;
+        let cursorOnStartOfSection = 0;
+        while (cursorOnStartOfSection < cursorPosition && sectionIndex < state.sections.length) {
+          const section = state.sections[sectionIndex];
+          sectionIndex += 1;
+          cursorOnStartOfSection += `${section.startSeparator}${section.value || section.placeholder}${section.endSeparator}`.length;
+        }
+        setSelectedSections(sectionIndex - 1);
+      });
+    } else if (!focused) {
+      setFocused(true);
+      setSelectedSections(sectionOrder.startIndex);
+    } else {
+      const hasClickedOnASection = sectionListRef.current.getRoot().contains(event.target);
+      if (!hasClickedOnASection) {
+        setSelectedSections(sectionOrder.startIndex);
+      }
+    }
+  });
+  const handleContainerInput = useEventCallback(event => {
+    onInput?.(event);
+    if (!sectionListRef.current || parsedSelectedSections !== 'all') {
+      return;
+    }
+    const target = event.target;
+    const keyPressed = target.textContent ?? '';
+    sectionListRef.current.getRoot().innerHTML = state.sections.map(section => `${section.startSeparator}${section.value || section.placeholder}${section.endSeparator}`).join('');
+    interactions.syncSelectionToDOM();
+    if (keyPressed.length === 0 || keyPressed.charCodeAt(0) === 10) {
+      resetCharacterQuery();
+      clearValue();
+      setSelectedSections('all');
+    } else if (keyPressed.length > 1) {
+      updateValueFromValueStr(keyPressed);
+    } else {
+      if (parsedSelectedSections === 'all') {
+        setSelectedSections(0);
+      }
+      applyCharacterEditing({
+        keyPressed,
+        sectionIndex: 0
+      });
+    }
+  });
+  const handleContainerPaste = useEventCallback(event => {
+    onPaste?.(event);
+    if (readOnly || parsedSelectedSections !== 'all') {
+      event.preventDefault();
+      return;
+    }
+    const pastedValue = event.clipboardData.getData('text');
+    event.preventDefault();
+    resetCharacterQuery();
+    updateValueFromValueStr(pastedValue);
+  });
+  const handleContainerFocus = useEventCallback(event => {
+    onFocus?.(event);
+    if (focused || !sectionListRef.current) {
+      return;
+    }
+    const activeElement = getActiveElement(document);
+    setFocused(true);
+    const isFocusInsideASection = sectionListRef.current.getSectionIndexFromDOMElement(activeElement) != null;
+    if (!isFocusInsideASection) {
+      setSelectedSections(sectionOrder.startIndex);
+    }
+  });
+  const handleContainerBlur = useEventCallback(event => {
+    onBlur?.(event);
+    setTimeout(() => {
+      if (!sectionListRef.current) {
+        return;
+      }
+      const activeElement = getActiveElement(document);
+      const shouldBlur = !sectionListRef.current.getRoot().contains(activeElement);
+      if (shouldBlur) {
+        setFocused(false);
+        setSelectedSections(null);
+      }
+    });
+  });
+  const getInputContainerClickHandler = useEventCallback(sectionIndex => event => {
+    // The click event on the clear button would propagate to the input, trigger this handler and result in a wrong section selection.
+    // We avoid this by checking if the call to this function is actually intended, or a side effect.
+    if (event.isDefaultPrevented()) {
+      return;
+    }
+    setSelectedSections(sectionIndex);
+  });
+  const handleInputContentMouseUp = useEventCallback(event => {
+    // Without this, the browser will remove the selected when clicking inside an already-selected section.
+    event.preventDefault();
+  });
+  const getInputContentFocusHandler = useEventCallback(sectionIndex => () => {
+    setSelectedSections(sectionIndex);
+  });
+  const handleInputContentPaste = useEventCallback(event => {
+    // prevent default to avoid the input `onInput` handler being called
+    event.preventDefault();
+    if (readOnly || disabled || typeof parsedSelectedSections !== 'number') {
+      return;
+    }
+    const activeSection = state.sections[parsedSelectedSections];
+    const pastedValue = event.clipboardData.getData('text');
+    const lettersOnly = /^[a-zA-Z]+$/.test(pastedValue);
+    const digitsOnly = /^[0-9]+$/.test(pastedValue);
+    const digitsAndLetterOnly = /^(([a-zA-Z]+)|)([0-9]+)(([a-zA-Z]+)|)$/.test(pastedValue);
+    const isValidPastedValue = activeSection.contentType === 'letter' && lettersOnly || activeSection.contentType === 'digit' && digitsOnly || activeSection.contentType === 'digit-with-letter' && digitsAndLetterOnly;
+    if (isValidPastedValue) {
+      resetCharacterQuery();
+      updateSectionValue({
+        section: activeSection,
+        newSectionValue: pastedValue,
+        shouldGoToNextSection: true
+      });
+    }
+    // If the pasted value corresponds to a single section, but not the expected type, we skip the modification
+    else if (!lettersOnly && !digitsOnly) {
+      resetCharacterQuery();
+      updateValueFromValueStr(pastedValue);
+    }
+  });
+  const handleInputContentDragOver = useEventCallback(event => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'none';
+  });
+  const handleInputContentInput = useEventCallback(event => {
+    if (!sectionListRef.current) {
+      return;
+    }
+    const target = event.target;
+    const keyPressed = target.textContent ?? '';
+    const sectionIndex = sectionListRef.current.getSectionIndexFromDOMElement(target);
+    const section = state.sections[sectionIndex];
+    if (readOnly || !sectionListRef.current) {
+      revertDOMSectionChange(sectionIndex);
+      return;
+    }
+    if (keyPressed.length === 0) {
+      if (section.value === '') {
+        revertDOMSectionChange(sectionIndex);
+        return;
+      }
+      const inputType = event.nativeEvent.inputType;
+      if (inputType === 'insertParagraph' || inputType === 'insertLineBreak') {
+        revertDOMSectionChange(sectionIndex);
+        return;
+      }
+      resetCharacterQuery();
+      revertDOMSectionChange(sectionIndex);
+      clearActiveSection();
+      return;
+    }
+    applyCharacterEditing({
+      keyPressed,
+      sectionIndex
+    });
+
+    // The DOM value needs to remain the one React is expecting.
+    revertDOMSectionChange(sectionIndex);
+  });
+  useEnhancedEffect(() => {
+    if (!focused || !sectionListRef.current) {
+      return;
+    }
+    if (parsedSelectedSections === 'all') {
+      sectionListRef.current.getRoot().focus();
+    } else if (typeof parsedSelectedSections === 'number') {
+      const domElement = sectionListRef.current.getSectionContent(parsedSelectedSections);
+      if (domElement) {
+        domElement.focus();
+      }
+    }
+  }, [parsedSelectedSections, focused]);
+  const sectionBoundaries = React.useMemo(() => {
+    return state.sections.reduce((acc, next) => {
+      acc[next.type] = sectionsValueBoundaries[next.type]({
+        currentDate: null,
+        contentType: next.contentType,
+        format: next.format
+      });
+      return acc;
+    }, {});
+  }, [sectionsValueBoundaries, state.sections]);
+  const isContainerEditable = parsedSelectedSections === 'all';
+  const elements = React.useMemo(() => {
+    return state.sections.map((section, index) => {
+      const isEditable = !isContainerEditable && !disabled && !readOnly;
+      return {
+        container: {
+          'data-sectionindex': index,
+          onClick: getInputContainerClickHandler(index)
+        },
+        content: {
+          tabIndex: isContainerEditable || index > 0 ? -1 : 0,
+          contentEditable: !isContainerEditable && !disabled && !readOnly,
+          role: 'spinbutton',
+          id: `${id}-${section.type}`,
+          'aria-labelledby': `${id}-${section.type}`,
+          'aria-readonly': readOnly,
+          'aria-valuenow': getSectionValueNow(section, utils),
+          'aria-valuemin': sectionBoundaries[section.type].minimum,
+          'aria-valuemax': sectionBoundaries[section.type].maximum,
+          'aria-valuetext': section.value ? getSectionValueText(section, utils) : translations.empty,
+          'aria-label': translations[section.type],
+          'aria-disabled': disabled,
+          spellCheck: isEditable ? false : undefined,
+          autoCapitalize: isEditable ? 'off' : undefined,
+          autoCorrect: isEditable ? 'off' : undefined,
+          [parseInt(React.version, 10) >= 17 ? 'enterKeyHint' : 'enterkeyhint']: isEditable ? 'next' : undefined,
+          children: section.value || section.placeholder,
+          onInput: handleInputContentInput,
+          onPaste: handleInputContentPaste,
+          onFocus: getInputContentFocusHandler(index),
+          onDragOver: handleInputContentDragOver,
+          onMouseUp: handleInputContentMouseUp,
+          inputMode: section.contentType === 'letter' ? 'text' : 'numeric'
+        },
+        before: {
+          children: section.startSeparator
+        },
+        after: {
+          children: section.endSeparator
+        }
+      };
+    });
+  }, [state.sections, getInputContentFocusHandler, handleInputContentPaste, handleInputContentDragOver, handleInputContentInput, getInputContainerClickHandler, handleInputContentMouseUp, disabled, readOnly, isContainerEditable, translations, utils, sectionBoundaries, id]);
+  const handleValueStrChange = useEventCallback(event => {
+    updateValueFromValueStr(event.target.value);
+  });
+  const valueStr = React.useMemo(() => areAllSectionsEmpty ? '' : fieldValueManager.getV7HiddenInputValueFromSections(state.sections), [areAllSectionsEmpty, state.sections, fieldValueManager]);
+  React.useEffect(() => {
+    if (sectionListRef.current == null) {
+      throw new Error(['MUI X: The `sectionListRef` prop has not been initialized by `PickersSectionList`', 'You probably tried to pass a component to the `textField` slot that contains an `<input />` element instead of a `PickersSectionList`.', '', 'If you want to keep using an `<input />` HTML element for the editing, please remove the `enableAccessibleFieldDOMStructure` prop from your Picker or Field component:', '', '<DatePicker slots={{ textField: MyCustomTextField }} />', '', 'Learn more about the field accessible DOM structure on the MUI documentation: https://mui.com/x/react-date-pickers/fields/#fields-to-edit-a-single-element'].join('\n'));
+    }
+    if (autoFocus && sectionListRef.current) {
+      sectionListRef.current.getSectionContent(sectionOrder.startIndex).focus();
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return {
+    interactions,
+    returnedValue: {
+      // Forwarded
+      autoFocus,
+      readOnly,
+      focused: focusedProp ?? focused,
+      sectionListRef: handleSectionListRef,
+      onBlur: handleContainerBlur,
+      onClick: handleContainerClick,
+      onFocus: handleContainerFocus,
+      onInput: handleContainerInput,
+      onPaste: handleContainerPaste,
+      // Additional
+      enableAccessibleFieldDOMStructure: true,
+      elements,
+      // TODO v7: Try to set to undefined when there is a section selected.
+      tabIndex: parsedSelectedSections === 0 ? -1 : 0,
+      contentEditable: isContainerEditable,
+      value: valueStr,
+      onChange: handleValueStrChange,
+      areAllSectionsEmpty
+    }
+  };
+};

package/esm/internals/hooks/useFieldOwnerState.d.ts

@@ -0,0 +1,6 @@
+import { FieldOwnerState } from "../../models/index.js";
+import { FormProps } from "../models/index.js";
+export declare function useFieldOwnerState(parameters: UseFieldOwnerStateParameters): FieldOwnerState;
+export interface UseFieldOwnerStateParameters extends FormProps {
+  required?: boolean;
+}

package/esm/internals/hooks/useFieldOwnerState.js

@@ -0,0 +1,16 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useRtl } from '@mui/system/RtlProvider';
+import { usePickerPrivateContext } from "./usePickerPrivateContext.js";
+export function useFieldOwnerState(parameters) {
+  const {
+    ownerState: pickerOwnerState
+  } = usePickerPrivateContext();
+  const isRtl = useRtl();
+  return React.useMemo(() => _extends({}, pickerOwnerState, {
+    isFieldDisabled: parameters.disabled ?? false,
+    isFieldReadOnly: parameters.readOnly ?? false,
+    isFieldRequired: parameters.required ?? false,
+    fieldDirection: isRtl ? 'rtl' : 'ltr'
+  }), [pickerOwnerState, parameters.disabled, parameters.readOnly, parameters.required, isRtl]);
+}

package/esm/internals/hooks/useMobilePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { useMobilePicker } from "./useMobilePicker.js";
+export type { UseMobilePickerSlots, UseMobilePickerSlotProps, ExportedUseMobilePickerSlotProps, MobileOnlyPickerProps } from './useMobilePicker.types';

package/esm/internals/hooks/useMobilePicker/index.js

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

package/esm/internals/hooks/useMobilePicker/useMobilePicker.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { UseMobilePickerParams, UseMobilePickerProps } from "./useMobilePicker.types.js";
+import { DateOrTimeViewWithMeridiem } from "../../models/index.js";
+/**
+ * Hook managing all the single-date mobile pickers:
+ * - MobileDatePicker
+ * - MobileDateTimePicker
+ * - MobileTimePicker
+ */
+export declare const useMobilePicker: <TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobilePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>>({
+  props,
+  ...pickerParams
+}: UseMobilePickerParams<TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
+  renderPicker: () => React.JSX.Element;
+};

package/esm/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -0,0 +1,91 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["props"],
+  _excluded2 = ["ownerState"];
+import * as React from 'react';
+import useSlotProps from '@mui/utils/useSlotProps';
+import { PickersModalDialog } from "../../components/PickersModalDialog.js";
+import { usePicker } from "../usePicker/index.js";
+import { PickersLayout } from "../../../PickersLayout/index.js";
+import { PickerProvider } from "../../components/PickerProvider.js";
+import { PickerFieldUIContextProvider } from "../../components/PickerFieldUI.js";
+
+/**
+ * Hook managing all the single-date mobile pickers:
+ * - MobileDatePicker
+ * - MobileDateTimePicker
+ * - MobileTimePicker
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const useMobilePicker = _ref => {
+  let {
+      props
+    } = _ref,
+    pickerParams = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const {
+    slots,
+    slotProps: innerSlotProps,
+    label,
+    inputRef,
+    localeText
+  } = props;
+  const {
+    providerProps,
+    renderCurrentView,
+    ownerState
+  } = usePicker(_extends({}, pickerParams, {
+    props,
+    localeText,
+    autoFocusView: true,
+    viewContainerRole: 'dialog',
+    variant: 'mobile'
+  }));
+  const labelId = providerProps.privateContextValue.labelId;
+  const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
+  const Field = slots.field;
+  const _useSlotProps = useSlotProps({
+      elementType: Field,
+      externalSlotProps: innerSlotProps?.field,
+      additionalProps: _extends({}, isToolbarHidden && {
+        id: labelId
+      }),
+      ownerState
+    }),
+    fieldProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
+  const Layout = slots.layout ?? PickersLayout;
+  let labelledById = labelId;
+  if (isToolbarHidden) {
+    if (label) {
+      labelledById = `${labelId}-label`;
+    } else {
+      labelledById = undefined;
+    }
+  }
+  const slotProps = _extends({}, innerSlotProps, {
+    toolbar: _extends({}, innerSlotProps?.toolbar, {
+      titleId: labelId
+    }),
+    mobilePaper: _extends({
+      'aria-labelledby': labelledById
+    }, innerSlotProps?.mobilePaper)
+  });
+  const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
+    children: /*#__PURE__*/_jsxs(PickerFieldUIContextProvider, {
+      slots: slots,
+      slotProps: slotProps,
+      inputRef: inputRef,
+      children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps)), /*#__PURE__*/_jsx(PickersModalDialog, {
+        slots: slots,
+        slotProps: slotProps,
+        children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
+          slots: slots,
+          slotProps: slotProps,
+          children: renderCurrentView()
+        }))
+      })]
+    })
+  }));
+  return {
+    renderPicker
+  };
+};

package/esm/internals/hooks/useMobilePicker/useMobilePicker.types.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { MakeRequired, SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { BasePickerProps } from "../../models/props/basePickerProps.js";
+import { PickersModalDialogSlots, PickersModalDialogSlotProps } from "../../components/PickersModalDialog.js";
+import { UsePickerParameters, UsePickerNonStaticProps, UsePickerProps } from "../usePicker/index.js";
+import { PickerFieldSlotProps, PickerOwnerState } from "../../../models/index.js";
+import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, PickersLayoutSlotProps } from "../../../PickersLayout/PickersLayout.types.js";
+import { DateOrTimeViewWithMeridiem, PickerValue } from "../../models/index.js";
+import { PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from "../../components/PickerFieldUI.js";
+export interface UseMobilePickerSlots extends PickersModalDialogSlots, ExportedPickersLayoutSlots<PickerValue>, PickerFieldUISlotsFromContext {
+  /**
+   * Component used to enter the date with the keyboard.
+   */
+  field: React.ElementType;
+}
+export interface ExportedUseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends PickersModalDialogSlotProps, ExportedPickersLayoutSlotProps<PickerValue>, PickerFieldUISlotPropsFromContext {
+  field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerValue, TEnableAccessibleFieldDOMStructure>, {}, PickerOwnerState>;
+}
+export interface UseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerValue>, 'toolbar'> {}
+export interface MobileOnlyPickerProps extends UsePickerNonStaticProps {}
+export interface UseMobilePickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerProps<PickerValue, TView, TError, any>> extends BasePickerProps<PickerValue, TView, TError, TExternalProps>, MakeRequired<MobileOnlyPickerProps, 'format'> {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: UseMobilePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: UseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
+}
+export interface UseMobilePickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobilePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParameters<PickerValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator' | 'ref'> {
+  props: TExternalProps;
+}

package/esm/internals/hooks/useMobilePicker/useMobilePicker.types.js

@@ -0,0 +1 @@
+export {};

package/esm/internals/hooks/useNullableFieldPrivateContext.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { UseFieldInternalProps } from './useField';
+import { FieldRef } from "../../models/index.js";
+import { PickerRangeValue, PickerValue } from "../models/index.js";
+export declare const PickerFieldPrivateContext: React.Context<PickerFieldPrivateContextValue | null>;
+export declare function useNullableFieldPrivateContext(): PickerFieldPrivateContextValue | null;
+export interface PickerFieldPrivateContextValue extends Pick<UseFieldInternalProps<any, any, any>, 'formatDensity' | 'enableAccessibleFieldDOMStructure' | 'selectedSections' | 'onSelectedSectionsChange'> {
+  fieldRef: React.RefObject<FieldRef<PickerValue> | FieldRef<PickerRangeValue> | null>;
+}

package/esm/internals/hooks/useNullableFieldPrivateContext.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export const PickerFieldPrivateContext = /*#__PURE__*/React.createContext(null);
+export function useNullableFieldPrivateContext() {
+  return React.useContext(PickerFieldPrivateContext);
+}

package/esm/internals/hooks/useNullablePickerContext.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Returns the context passed by the Picker wrapping the current component.
+ * If the context is not found, returns `null`.
+ */
+export declare const useNullablePickerContext: () => import("..").PickerContextValue<any, any, any> | null;

package/esm/internals/hooks/useNullablePickerContext.js

@@ -0,0 +1,10 @@
+'use client';
+
+import * as React from 'react';
+import { PickerContext } from "../../hooks/usePickerContext.js";
+
+/**
+ * Returns the context passed by the Picker wrapping the current component.
+ * If the context is not found, returns `null`.
+ */
+export const useNullablePickerContext = () => React.useContext(PickerContext);

package/esm/internals/hooks/usePicker/hooks/useOrientation.d.ts

@@ -0,0 +1,2 @@
+import { DateOrTimeViewWithMeridiem, PickerOrientation } from "../../../models/index.js";
+export declare function useOrientation(views: readonly DateOrTimeViewWithMeridiem[], customOrientation: PickerOrientation | undefined): PickerOrientation;

package/esm/internals/hooks/usePicker/hooks/useOrientation.js

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { arrayIncludes } from "../../../utils/utils.js";
+function getOrientation() {
+  if (typeof window === 'undefined') {
+    return 'portrait';
+  }
+  if (window.screen && window.screen.orientation && window.screen.orientation.angle) {
+    return Math.abs(window.screen.orientation.angle) === 90 ? 'landscape' : 'portrait';
+  }
+
+  // Support IOS safari
+  if (window.orientation) {
+    return Math.abs(Number(window.orientation)) === 90 ? 'landscape' : 'portrait';
+  }
+  return 'portrait';
+}
+export function useOrientation(views, customOrientation) {
+  const [orientation, setOrientation] = React.useState(getOrientation);
+  useEnhancedEffect(() => {
+    const eventHandler = () => {
+      setOrientation(getOrientation());
+    };
+    window.addEventListener('orientationchange', eventHandler);
+    return () => {
+      window.removeEventListener('orientationchange', eventHandler);
+    };
+  }, []);
+  if (arrayIncludes(views, ['hours', 'minutes', 'seconds'])) {
+    // could not display 13:34:44 in landscape mode
+    return 'portrait';
+  }
+  return customOrientation ?? orientation;
+}