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

package/internals/hooks/useControlledValue.mjs

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
+import useControlled from '@mui/utils/useControlled';
+import { usePickerAdapter } from "../../hooks/usePickerAdapter.mjs";
+
+/**
+ * Hooks controlling the value while making sure that:
+ * - The value returned by `onChange` always have the timezone of `props.value` or `props.defaultValue` if defined
+ * - The value rendered is always the one from `props.timezone` if defined
+ */
+export const useControlledValue = ({
+  name,
+  timezone: timezoneProp,
+  value: valueProp,
+  defaultValue,
+  referenceDate,
+  onChange: onChangeProp,
+  valueManager
+}) => {
+  const adapter = usePickerAdapter();
+  const [valueWithInputTimezone, setValue] = useControlled({
+    name,
+    state: 'value',
+    controlled: valueProp,
+    default: defaultValue ?? valueManager.emptyValue
+  });
+  const inputTimezone = React.useMemo(() => valueManager.getTimezone(adapter, valueWithInputTimezone), [adapter, valueManager, valueWithInputTimezone]);
+  const setInputTimezone = useEventCallback(newValue => {
+    if (inputTimezone == null) {
+      return newValue;
+    }
+    return valueManager.setTimezone(adapter, inputTimezone, newValue);
+  });
+  const timezoneToRender = React.useMemo(() => {
+    if (timezoneProp) {
+      return timezoneProp;
+    }
+    if (inputTimezone) {
+      return inputTimezone;
+    }
+    if (referenceDate) {
+      return adapter.getTimezone(Array.isArray(referenceDate) ? referenceDate[0] : referenceDate);
+    }
+    return 'default';
+  }, [timezoneProp, inputTimezone, referenceDate, adapter]);
+  const valueWithTimezoneToRender = React.useMemo(() => valueManager.setTimezone(adapter, timezoneToRender, valueWithInputTimezone), [valueManager, adapter, timezoneToRender, valueWithInputTimezone]);
+  const handleValueChange = useEventCallback((newValue, ...otherParams) => {
+    const newValueWithInputTimezone = setInputTimezone(newValue);
+    setValue(newValueWithInputTimezone);
+    onChangeProp?.(newValueWithInputTimezone, ...otherParams);
+  });
+  return {
+    value: valueWithTimezoneToRender,
+    handleValueChange,
+    timezone: timezoneToRender
+  };
+};

package/internals/hooks/useDesktopPicker/index.d.mts

@@ -0,0 +1,2 @@
+export { useDesktopPicker } from "./useDesktopPicker.mjs";
+export type { UseDesktopPickerSlots, UseDesktopPickerSlotProps, ExportedUseDesktopPickerSlotProps, DesktopOnlyPickerProps, UseDesktopPickerProps } from "./useDesktopPicker.types.mjs";

package/internals/hooks/useDesktopPicker/index.mjs

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

package/internals/hooks/useDesktopPicker/useDesktopPicker.d.mts

@@ -0,0 +1,15 @@
+import { UseDesktopPickerParams, UseDesktopPickerProps } from "./useDesktopPicker.types.mjs";
+import { DateOrTimeViewWithMeridiem } from "../../models/index.mjs";
+/**
+ * Hook managing all the single-date desktop pickers:
+ * - DesktopDatePicker
+ * - DesktopDateTimePicker
+ * - DesktopTimePicker
+ */
+export declare const useDesktopPicker: <TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>>({
+  props,
+  steps,
+  ...pickerParams
+}: UseDesktopPickerParams<TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
+  renderPicker: () => import("react/jsx-runtime").JSX.Element;
+};

package/internals/hooks/useDesktopPicker/useDesktopPicker.mjs

@@ -0,0 +1,95 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["props", "steps"],
+  _excluded2 = ["ownerState"];
+import useSlotProps from '@mui/utils/useSlotProps';
+import { PickerPopper } from "../../components/PickerPopper/PickerPopper.mjs";
+import { usePicker } from "../usePicker/index.mjs";
+import { PickersLayout } from "../../../PickersLayout/index.mjs";
+import { PickerProvider } from "../../components/PickerProvider.mjs";
+import { createNonRangePickerStepNavigation } from "../../utils/createNonRangePickerStepNavigation.mjs";
+
+/**
+ * Hook managing all the single-date desktop pickers:
+ * - DesktopDatePicker
+ * - DesktopDateTimePicker
+ * - DesktopTimePicker
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const useDesktopPicker = _ref => {
+  let {
+      props,
+      steps
+    } = _ref,
+    pickerParams = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const {
+    slots,
+    slotProps: innerSlotProps,
+    label,
+    inputRef,
+    localeText
+  } = props;
+  const getStepNavigation = createNonRangePickerStepNavigation({
+    steps
+  });
+  const {
+    providerProps,
+    renderCurrentView,
+    ownerState
+  } = usePicker(_extends({}, pickerParams, {
+    props,
+    localeText,
+    autoFocusView: true,
+    viewContainerRole: 'dialog',
+    variant: 'desktop',
+    getStepNavigation
+  }));
+  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
+    }),
+    popper: _extends({
+      'aria-labelledby': labelledById
+    }, innerSlotProps?.popper)
+  });
+  const renderPicker = () => /*#__PURE__*/_jsxs(PickerProvider, _extends({}, providerProps, {
+    children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
+      slots: _extends({}, slots, fieldProps.slots),
+      slotProps: _extends({}, slotProps, fieldProps.slotProps),
+      inputRef: inputRef
+    })), /*#__PURE__*/_jsx(PickerPopper, {
+      slots: slots,
+      slotProps: slotProps,
+      children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
+        slots: slots,
+        slotProps: slotProps,
+        children: renderCurrentView()
+      }))
+    })]
+  }));
+  if (process.env.NODE_ENV !== "production") renderPicker.displayName = "renderPicker";
+  return {
+    renderPicker
+  };
+};

package/internals/hooks/useDesktopPicker/useDesktopPicker.types.d.mts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { MakeRequired, SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { BasePickerProps } from "../../models/props/basePickerProps.mjs";
+import { PickerPopperSlots, PickerPopperSlotProps } from "../../components/PickerPopper/PickerPopper.mjs";
+import { UsePickerParameters, UsePickerNonStaticProps, UsePickerProps } from "../usePicker/index.mjs";
+import { PickerFieldSlotProps, PickerOwnerState } from "../../../models/index.mjs";
+import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, PickersLayoutSlotProps } from "../../../PickersLayout/PickersLayout.types.mjs";
+import { DateOrTimeViewWithMeridiem, PickerValue } from "../../models/index.mjs";
+import { PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from "../../components/PickerFieldUI.mjs";
+import { PickerStep } from "../../utils/createNonRangePickerStepNavigation.mjs";
+export interface UseDesktopPickerSlots extends Pick<PickerPopperSlots, 'desktopPaper' | 'desktopTransition' | 'desktopTrapFocus' | 'popper'>, ExportedPickersLayoutSlots<PickerValue>, PickerFieldUISlotsFromContext {
+  /**
+   * Component used to enter the date with the keyboard.
+   */
+  field: React.ElementType;
+}
+export interface ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends PickerPopperSlotProps, ExportedPickersLayoutSlotProps<PickerValue>, PickerFieldUISlotPropsFromContext {
+  field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerValue, TEnableAccessibleFieldDOMStructure>, {}, PickerOwnerState>;
+}
+export interface UseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerValue>, 'toolbar'> {}
+export interface DesktopOnlyPickerProps extends UsePickerNonStaticProps {
+  /**
+   * If `true`, the `input` element is focused during the first mount.
+   * @default false
+   */
+  autoFocus?: boolean;
+}
+export interface UseDesktopPickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerProps<PickerValue, TView, TError, any>> extends BasePickerProps<PickerValue, any, TError, TExternalProps>, MakeRequired<DesktopOnlyPickerProps, 'format'> {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: UseDesktopPickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: UseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure>;
+}
+export interface UseDesktopPickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParameters<PickerValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor' | 'ref'> {
+  props: TExternalProps;
+  /**
+   * Steps available for the picker.
+   * This will be used to define the behavior of navigation actions.
+   * If null, the picker will not have any step navigation.
+   */
+  steps: PickerStep[] | null;
+}

package/internals/hooks/useField/buildSectionsFromFormat.d.mts

@@ -0,0 +1,15 @@
+import { FieldSection, MuiPickersAdapter, PickerValidDate } from "../../../models/index.mjs";
+import { PickersLocaleText } from "../../../locales/index.mjs";
+interface BuildSectionsFromFormatParameters {
+  adapter: MuiPickersAdapter;
+  format: string;
+  formatDensity: 'dense' | 'spacious';
+  isRtl: boolean;
+  shouldRespectLeadingZeros: boolean;
+  localeText: PickersLocaleText;
+  localizedDigits: string[];
+  date: PickerValidDate | null;
+  enableAccessibleFieldDOMStructure: boolean;
+}
+export declare const buildSectionsFromFormat: (parameters: BuildSectionsFromFormatParameters) => FieldSection[];
+export {};

package/internals/hooks/useField/buildSectionsFromFormat.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.buildSectionsFromFormat = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/formatErrorMessage"));
 var _useField = require("./useField.utils");
 const expandFormat = ({
   adapter,
@@ -20,7 +21,7 @@ const expandFormat = ({
     nextFormat = adapter.expandFormat(prevFormat);
     formatExpansionOverflow -= 1;
     if (formatExpansionOverflow < 0) {
-      throw new Error('MUI X: The format expansion seems to be in an infinite loop. Please open an issue with the format passed to the component.');
+      throw new Error(process.env.NODE_ENV !== "production" ? 'MUI X: The format expansion seems to be in an infinite loop. Please open an issue with the format passed to the component.' : (0, _formatErrorMessage2.default)(154));
     }
   }
   return nextFormat;
@@ -115,7 +116,7 @@ const createSection = ({
   startSeparator
 }) => {
   if (token === '') {
-    throw new Error('MUI X: Should not call `commitToken` with an empty token');
+    throw new Error(process.env.NODE_ENV !== "production" ? 'MUI X: Should not call `commitToken` with an empty token' : (0, _formatErrorMessage2.default)(155));
   }
   const sectionConfig = (0, _useField.getDateSectionConfigFromFormatToken)(adapter, token);
   const hasLeadingZerosInFormat = (0, _useField.doesSectionFormatHaveLeadingZeros)(adapter, sectionConfig.contentType, sectionConfig.type, token);
@@ -128,7 +129,7 @@ const createSection = ({
       maxLength = sectionValue === '' ? adapter.formatByString(now, token).length : sectionValue.length;
     } else {
       if (sectionConfig.maxLength == null) {
-        throw new Error(`MUI X: The token ${token} should have a 'maxLength' property on it's adapter`);
+        throw new Error(process.env.NODE_ENV !== "production" ? `MUI X: The token ${token} should have a 'maxLength' property on it's adapter` : (0, _formatErrorMessage2.default)(156, token));
       }
       maxLength = sectionConfig.maxLength;
       if (isValidDate) {

package/internals/hooks/useField/buildSectionsFromFormat.mjs

@@ -0,0 +1,256 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
+import { applyLocalizedDigits, cleanLeadingZeros, doesSectionFormatHaveLeadingZeros, getDateSectionConfigFromFormatToken, removeLocalizedDigits } from "./useField.utils.mjs";
+const expandFormat = ({
+  adapter,
+  format
+}) => {
+  // Expand the provided format
+  let formatExpansionOverflow = 10;
+  let prevFormat = format;
+  let nextFormat = adapter.expandFormat(format);
+  while (nextFormat !== prevFormat) {
+    prevFormat = nextFormat;
+    nextFormat = adapter.expandFormat(prevFormat);
+    formatExpansionOverflow -= 1;
+    if (formatExpansionOverflow < 0) {
+      throw new Error(process.env.NODE_ENV !== "production" ? 'MUI X: The format expansion seems to be in an infinite loop. Please open an issue with the format passed to the component.' : _formatErrorMessage(154));
+    }
+  }
+  return nextFormat;
+};
+const getEscapedPartsFromFormat = ({
+  adapter,
+  expandedFormat
+}) => {
+  const escapedParts = [];
+  const {
+    start: startChar,
+    end: endChar
+  } = adapter.escapedCharacters;
+  const regExp = new RegExp(`(\\${startChar}[^\\${endChar}]*\\${endChar})+`, 'g');
+  let match = null;
+  // eslint-disable-next-line no-cond-assign
+  while (match = regExp.exec(expandedFormat)) {
+    escapedParts.push({
+      start: match.index,
+      end: regExp.lastIndex - 1
+    });
+  }
+  return escapedParts;
+};
+const getSectionPlaceholder = (adapter, localeText, sectionConfig, sectionFormat) => {
+  switch (sectionConfig.type) {
+    case 'year':
+      {
+        return localeText.fieldYearPlaceholder({
+          digitAmount: adapter.formatByString(adapter.date(undefined, 'default'), sectionFormat).length,
+          format: sectionFormat
+        });
+      }
+    case 'month':
+      {
+        return localeText.fieldMonthPlaceholder({
+          contentType: sectionConfig.contentType,
+          format: sectionFormat
+        });
+      }
+    case 'day':
+      {
+        return localeText.fieldDayPlaceholder({
+          format: sectionFormat
+        });
+      }
+    case 'weekDay':
+      {
+        return localeText.fieldWeekDayPlaceholder({
+          contentType: sectionConfig.contentType,
+          format: sectionFormat
+        });
+      }
+    case 'hours':
+      {
+        return localeText.fieldHoursPlaceholder({
+          format: sectionFormat
+        });
+      }
+    case 'minutes':
+      {
+        return localeText.fieldMinutesPlaceholder({
+          format: sectionFormat
+        });
+      }
+    case 'seconds':
+      {
+        return localeText.fieldSecondsPlaceholder({
+          format: sectionFormat
+        });
+      }
+    case 'meridiem':
+      {
+        return localeText.fieldMeridiemPlaceholder({
+          format: sectionFormat
+        });
+      }
+    default:
+      {
+        return sectionFormat;
+      }
+  }
+};
+const createSection = ({
+  adapter,
+  date,
+  shouldRespectLeadingZeros,
+  localeText,
+  localizedDigits,
+  now,
+  token,
+  startSeparator
+}) => {
+  if (token === '') {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'MUI X: Should not call `commitToken` with an empty token' : _formatErrorMessage(155));
+  }
+  const sectionConfig = getDateSectionConfigFromFormatToken(adapter, token);
+  const hasLeadingZerosInFormat = doesSectionFormatHaveLeadingZeros(adapter, sectionConfig.contentType, sectionConfig.type, token);
+  const hasLeadingZerosInInput = shouldRespectLeadingZeros ? hasLeadingZerosInFormat : sectionConfig.contentType === 'digit';
+  const isValidDate = adapter.isValid(date);
+  let sectionValue = isValidDate ? adapter.formatByString(date, token) : '';
+  let maxLength = null;
+  if (hasLeadingZerosInInput) {
+    if (hasLeadingZerosInFormat) {
+      maxLength = sectionValue === '' ? adapter.formatByString(now, token).length : sectionValue.length;
+    } else {
+      if (sectionConfig.maxLength == null) {
+        throw new Error(process.env.NODE_ENV !== "production" ? `MUI X: The token ${token} should have a 'maxLength' property on it's adapter` : _formatErrorMessage(156, token));
+      }
+      maxLength = sectionConfig.maxLength;
+      if (isValidDate) {
+        sectionValue = applyLocalizedDigits(cleanLeadingZeros(removeLocalizedDigits(sectionValue, localizedDigits), maxLength), localizedDigits);
+      }
+    }
+  }
+  return _extends({}, sectionConfig, {
+    format: token,
+    maxLength,
+    value: sectionValue,
+    placeholder: getSectionPlaceholder(adapter, localeText, sectionConfig, token),
+    hasLeadingZerosInFormat,
+    hasLeadingZerosInInput,
+    startSeparator,
+    endSeparator: '',
+    modified: false
+  });
+};
+const buildSections = parameters => {
+  const {
+    adapter,
+    expandedFormat,
+    escapedParts
+  } = parameters;
+  const now = adapter.date(undefined);
+  const sections = [];
+  let startSeparator = '';
+
+  // This RegExp tests if the beginning of a string corresponds to a supported token
+  const validTokens = Object.keys(adapter.formatTokenMap).sort((a, b) => b.length - a.length); // Sort to put longest word first
+
+  const regExpFirstWordInFormat = /^([a-zA-Z]+)/;
+  const regExpWordOnlyComposedOfTokens = new RegExp(`^(${validTokens.join('|')})*$`);
+  const regExpFirstTokenInWord = new RegExp(`^(${validTokens.join('|')})`);
+  const getEscapedPartOfCurrentChar = i => escapedParts.find(escapeIndex => escapeIndex.start <= i && escapeIndex.end >= i);
+  let i = 0;
+  while (i < expandedFormat.length) {
+    const escapedPartOfCurrentChar = getEscapedPartOfCurrentChar(i);
+    const isEscapedChar = escapedPartOfCurrentChar != null;
+    const firstWordInFormat = regExpFirstWordInFormat.exec(expandedFormat.slice(i))?.[1];
+
+    // The first word in the format is only composed of tokens.
+    // We extract those tokens to create a new sections.
+    if (!isEscapedChar && firstWordInFormat != null && regExpWordOnlyComposedOfTokens.test(firstWordInFormat)) {
+      let word = firstWordInFormat;
+      while (word.length > 0) {
+        const firstWord = regExpFirstTokenInWord.exec(word)[1];
+        word = word.slice(firstWord.length);
+        sections.push(createSection(_extends({}, parameters, {
+          now,
+          token: firstWord,
+          startSeparator
+        })));
+        startSeparator = '';
+      }
+      i += firstWordInFormat.length;
+    }
+    // The remaining format does not start with a token,
+    // We take the first character and add it to the current section's end separator.
+    else {
+      const char = expandedFormat[i];
+
+      // If we are on the opening or closing character of an escaped part of the format,
+      // Then we ignore this character.
+      const isEscapeBoundary = isEscapedChar && escapedPartOfCurrentChar?.start === i || escapedPartOfCurrentChar?.end === i;
+      if (!isEscapeBoundary) {
+        if (sections.length === 0) {
+          startSeparator += char;
+        } else {
+          sections[sections.length - 1].endSeparator += char;
+          sections[sections.length - 1].isEndFormatSeparator = true;
+        }
+      }
+      i += 1;
+    }
+  }
+  if (sections.length === 0 && startSeparator.length > 0) {
+    sections.push({
+      type: 'empty',
+      contentType: 'letter',
+      maxLength: null,
+      format: '',
+      value: '',
+      placeholder: '',
+      hasLeadingZerosInFormat: false,
+      hasLeadingZerosInInput: false,
+      startSeparator,
+      endSeparator: '',
+      modified: false
+    });
+  }
+  return sections;
+};
+const postProcessSections = ({
+  isRtl,
+  formatDensity,
+  sections
+}) => {
+  return sections.map(section => {
+    const cleanSeparator = separator => {
+      let cleanedSeparator = separator;
+      if (isRtl && cleanedSeparator !== null && cleanedSeparator.includes(' ')) {
+        cleanedSeparator = `\u2069${cleanedSeparator}\u2066`;
+      }
+      if (formatDensity === 'spacious' && ['/', '.', '-'].includes(cleanedSeparator)) {
+        cleanedSeparator = ` ${cleanedSeparator} `;
+      }
+      return cleanedSeparator;
+    };
+    section.startSeparator = cleanSeparator(section.startSeparator);
+    section.endSeparator = cleanSeparator(section.endSeparator);
+    return section;
+  });
+};
+export const buildSectionsFromFormat = parameters => {
+  let expandedFormat = expandFormat(parameters);
+  if (parameters.isRtl && parameters.enableAccessibleFieldDOMStructure) {
+    expandedFormat = expandedFormat.split(' ').reverse().join(' ');
+  }
+  const escapedParts = getEscapedPartsFromFormat(_extends({}, parameters, {
+    expandedFormat
+  }));
+  const sections = buildSections(_extends({}, parameters, {
+    expandedFormat,
+    escapedParts
+  }));
+  return postProcessSections(_extends({}, parameters, {
+    sections
+  }));
+};

package/internals/hooks/useField/index.d.mts

@@ -0,0 +1,4 @@
+export { useField } from "./useField.mjs";
+export type { UseFieldInternalProps, UseFieldParameters, UseFieldReturnValue, UseFieldProps, FieldValueManager, FieldChangeHandler, FieldChangeHandlerContext } from "./useField.types.mjs";
+export { createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from "./useField.utils.mjs";
+export { useFieldInternalPropsWithDefaults } from "./useFieldInternalPropsWithDefaults.mjs";

package/internals/hooks/useField/index.mjs

@@ -0,0 +1,3 @@
+export { useField } from "./useField.mjs";
+export { createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from "./useField.utils.mjs";
+export { useFieldInternalPropsWithDefaults } from "./useFieldInternalPropsWithDefaults.mjs";

package/internals/hooks/useField/syncSelectionToDOM.d.mts

@@ -0,0 +1,9 @@
+import { PickerValidValue } from "../../models/index.mjs";
+import { UseFieldDOMGetters } from "./useField.types.mjs";
+import { UseFieldStateReturnValue } from "./useFieldState.mjs";
+export declare function syncSelectionToDOM<TValue extends PickerValidValue>(parameters: SyncSelectionToDOMParameters<TValue>): void;
+export interface SyncSelectionToDOMParameters<TValue extends PickerValidValue> {
+  domGetters: UseFieldDOMGetters;
+  stateResponse: UseFieldStateReturnValue<TValue>;
+  focused: boolean;
+}

package/internals/hooks/useField/syncSelectionToDOM.mjs

@@ -0,0 +1,53 @@
+import ownerDocument from '@mui/utils/ownerDocument';
+import { getActiveElement } from "../../utils/utils.mjs";
+export function syncSelectionToDOM(parameters) {
+  const {
+    focused,
+    domGetters,
+    stateResponse: {
+      // States and derived states
+      parsedSelectedSections,
+      state
+    }
+  } = parameters;
+  if (!domGetters.isReady()) {
+    return;
+  }
+  const selection = ownerDocument(domGetters.getRoot()).getSelection();
+  if (!selection) {
+    return;
+  }
+  if (parsedSelectedSections == null) {
+    // If the selection contains an element inside the field, we reset it.
+    if (selection.rangeCount > 0 &&
+    // Firefox can return a Restricted object here
+    selection.getRangeAt(0).startContainer instanceof Node && domGetters.getRoot().contains(selection.getRangeAt(0).startContainer)) {
+      selection.removeAllRanges();
+    }
+    if (focused) {
+      domGetters.getRoot().blur();
+    }
+    return;
+  }
+
+  // On multi input range pickers we want to update selection range only for the active input
+  if (!domGetters.getRoot().contains(getActiveElement(domGetters.getRoot()))) {
+    return;
+  }
+  const range = new window.Range();
+  let target;
+  if (parsedSelectedSections === 'all') {
+    target = domGetters.getRoot();
+  } else {
+    const section = state.sections[parsedSelectedSections];
+    if (section.type === 'empty') {
+      target = domGetters.getSectionContainer(parsedSelectedSections);
+    } else {
+      target = domGetters.getSectionContent(parsedSelectedSections);
+    }
+  }
+  range.selectNodeContents(target);
+  target.focus();
+  selection.removeAllRanges();
+  selection.addRange(range);
+}

package/internals/hooks/useField/useField.d.mts

@@ -0,0 +1,3 @@
+import { UseFieldParameters, UseFieldReturnValue, UseFieldProps } from "./useField.types.mjs";
+import { PickerValidValue } from "../../models/index.mjs";
+export declare const useField: <TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TError, TValidationProps extends {}, TProps extends UseFieldProps<TEnableAccessibleFieldDOMStructure>>(parameters: UseFieldParameters<TValue, TEnableAccessibleFieldDOMStructure, TError, TValidationProps, TProps>) => UseFieldReturnValue<TEnableAccessibleFieldDOMStructure, TProps>;

package/internals/hooks/useField/useField.mjs

@@ -0,0 +1,9 @@
+import { useFieldV7TextField } from "./useFieldV7TextField.mjs";
+import { useFieldV6TextField } from "./useFieldV6TextField.mjs";
+import { useNullableFieldPrivateContext } from "../useNullableFieldPrivateContext.mjs";
+export const useField = parameters => {
+  const fieldPrivateContext = useNullableFieldPrivateContext();
+  const enableAccessibleFieldDOMStructure = parameters.props.enableAccessibleFieldDOMStructure ?? fieldPrivateContext?.enableAccessibleFieldDOMStructure ?? true;
+  const useFieldTextField = enableAccessibleFieldDOMStructure ? useFieldV7TextField : useFieldV6TextField;
+  return useFieldTextField(parameters);
+};