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

package/esm/PickersDay/PickersDay.types.d.ts

@@ -0,0 +1,114 @@
+import { ButtonBaseProps } from '@mui/material/ButtonBase';
+import { PickerOwnerState, PickerValidDate } from "../models/pickers.js";
+import { ExtendMui } from "../internals/models/helpers.js";
+import { PickersDayClasses } from "./pickersDayClasses.js";
+export interface PickerDayOwnerState extends PickerOwnerState {
+  /**
+   * The object representing the day.
+   */
+  day: PickerValidDate;
+  /**
+   * Whether the day is selected.
+   */
+  isDaySelected: boolean;
+  /**
+   * Whether the day is disabled.
+   */
+  isDayDisabled: boolean;
+  /**
+   * Whether the day is equal to today.
+   */
+  isDayCurrent: boolean;
+  /**
+   * Whether the day is outside the month it's being rendered in.
+   */
+  isDayOutsideMonth: boolean;
+  /**
+   * Whether the day is the first day of the week.
+   */
+  isDayStartOfWeek: boolean;
+  /**
+   * Whether the day is the last day of the week.
+   */
+  isDayEndOfWeek: boolean;
+  /**
+   * Whether the margin around the day should be removed.
+   */
+  disableMargin: boolean;
+  /**
+   * Whether the visual indication around the current day should be removed.
+   */
+  disableHighlightToday: boolean;
+  /**
+   * Whether the day outside of the month they are being rendered in should be visible.
+   */
+  showDaysOutsideCurrentMonth: boolean;
+}
+export interface ExportedPickersDayProps {
+  /**
+   * If `true`, today's date is rendering without highlighting with circle.
+   * @default false
+   */
+  disableHighlightToday?: boolean;
+  /**
+   * If `true`, days outside the current month are rendered:
+   *
+   * - if `fixedWeekNumber` is defined, renders days to have the weeks requested.
+   *
+   * - if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.
+   *
+   * - ignored if `calendars` equals more than `1` on range pickers.
+   * @default false
+   */
+  showDaysOutsideCurrentMonth?: boolean;
+}
+export interface PickersDayProps extends ExportedPickersDayProps, Omit<ExtendMui<ButtonBaseProps>, 'onKeyDown' | 'onFocus' | 'onBlur' | 'onMouseEnter' | 'LinkComponent'> {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<PickersDayClasses>;
+  /**
+   * The date to show.
+   */
+  day: PickerValidDate;
+  /**
+   * If `true`, renders as disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, days are rendering without margin. Useful for displaying linked range of days.
+   * @default false
+   */
+  disableMargin?: boolean;
+  isAnimating?: boolean;
+  onFocus?: (event: React.FocusEvent<HTMLButtonElement>, day: PickerValidDate) => void;
+  onBlur?: (event: React.FocusEvent<HTMLButtonElement>, day: PickerValidDate) => void;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>, day: PickerValidDate) => void;
+  onMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>, day: PickerValidDate) => void;
+  onDaySelect: (day: PickerValidDate) => void;
+  /**
+   * If `true`, day is outside of month and will be hidden.
+   */
+  outsideCurrentMonth: boolean;
+  /**
+   * If `true`, day is the first visible cell of the month.
+   * Either the first day of the month or the first day of the week depending on `showDaysOutsideCurrentMonth`.
+   */
+  isFirstVisibleCell: boolean;
+  /**
+   * If `true`, day is the last visible cell of the month.
+   * Either the last day of the month or the last day of the week depending on `showDaysOutsideCurrentMonth`.
+   */
+  isLastVisibleCell: boolean;
+  /**
+   * If `true`, renders as selected.
+   * @default false
+   */
+  selected?: boolean;
+  /**
+   * If `true`, renders as today date.
+   * @default false
+   */
+  today?: boolean;
+}

package/esm/PickersDay/PickersDay.types.js

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

package/esm/PickersDay/index.d.ts

@@ -1,4 +1,4 @@
 export { PickersDay } from "./PickersDay.js";
-export type { PickersDayProps } from './PickersDay';
+export type { PickersDayProps, PickerDayOwnerState } from './PickersDay.types';
 export { pickersDayClasses, getPickersDayUtilityClass } from "./pickersDayClasses.js";
 export type { PickersDayClasses, PickersDayClassKey } from './pickersDayClasses';

package/esm/PickersDay/usePickerDayOwnerState.d.ts

@@ -0,0 +1,14 @@
+import { PickerDayOwnerState } from "./PickersDay.types.js";
+import { PickerValidDate } from "../models/pickers.js";
+export declare function usePickerDayOwnerState(parameters: UsePickerDayOwnerStateParameters): PickerDayOwnerState;
+interface UsePickerDayOwnerStateParameters {
+  day: PickerValidDate;
+  disabled: boolean | undefined;
+  selected: boolean | undefined;
+  today: boolean | undefined;
+  outsideCurrentMonth: boolean | undefined;
+  disableMargin: boolean | undefined;
+  disableHighlightToday: boolean | undefined;
+  showDaysOutsideCurrentMonth: boolean | undefined;
+}
+export {};

package/esm/PickersDay/usePickerDayOwnerState.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
+import { useUtils } from "../internals/hooks/useUtils.js";
+export function usePickerDayOwnerState(parameters) {
+  const {
+    disabled,
+    selected,
+    today,
+    outsideCurrentMonth,
+    day,
+    disableMargin,
+    disableHighlightToday,
+    showDaysOutsideCurrentMonth
+  } = parameters;
+  const utils = useUtils();
+  const {
+    ownerState: pickerOwnerState
+  } = usePickerPrivateContext();
+  return React.useMemo(() => _extends({}, pickerOwnerState, {
+    day,
+    isDaySelected: selected ?? false,
+    isDayDisabled: disabled ?? false,
+    isDayCurrent: today ?? false,
+    isDayOutsideMonth: outsideCurrentMonth ?? false,
+    isDayStartOfWeek: utils.isSameDay(day, utils.startOfWeek(day)),
+    isDayEndOfWeek: utils.isSameDay(day, utils.endOfWeek(day)),
+    disableMargin: disableMargin ?? false,
+    disableHighlightToday: disableHighlightToday ?? false,
+    showDaysOutsideCurrentMonth: showDaysOutsideCurrentMonth ?? false
+  }), [utils, pickerOwnerState, day, selected, disabled, today, outsideCurrentMonth, disableMargin, disableHighlightToday, showDaysOutsideCurrentMonth]);
+}

package/esm/PickersSectionList/PickersSectionList.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PickersSectionListProps } from "./PickersSectionList.types.js";
+import type { PickersSectionListProps } from './PickersSectionList.types';
 export declare const PickersSectionListRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const PickersSectionListSection: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof React.ClassAttributes<HTMLSpanElement> | keyof React.HTMLAttributes<HTMLSpanElement>>, {}>;
 export declare const PickersSectionListSectionSeparator: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof React.ClassAttributes<HTMLSpanElement> | keyof React.HTMLAttributes<HTMLSpanElement>>, {}>;

package/esm/PickersSectionList/PickersSectionList.types.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { SlotComponentProps } from '@mui/utils';
 import { PickersSectionListClasses } from "./pickersSectionListClasses.js";
 import { PickerOwnerState } from "../models/index.js";
+import type { UseFieldDOMGetters } from '../internals/hooks/useField/useField.types';
 export interface PickersSectionListSlots {
   root: React.ElementType;
   section: React.ElementType;
@@ -28,12 +29,7 @@ export interface PickersSectionElement {
   before: React.HTMLAttributes<HTMLSpanElement>;
   after: React.HTMLAttributes<HTMLSpanElement>;
 }
-export interface PickersSectionListRef {
-  getRoot: () => HTMLElement;
-  getSectionContainer: (sectionIndex: number) => HTMLElement;
-  getSectionContent: (sectionIndex: number) => HTMLElement;
-  getSectionIndexFromDOMElement: (element: Element | null | undefined) => number | null;
-}
+export interface PickersSectionListRef extends Omit<UseFieldDOMGetters, 'isReady'> {}
 export interface ExportedPickersSectionListProps extends Pick<React.HTMLAttributes<HTMLDivElement>, 'tabIndex'> {
   /**
    * The elements to render.

package/esm/TimeField/useTimeField.d.ts

@@ -1,2 +1,2 @@
 import { UseTimeFieldProps } from "./TimeField.types.js";
-export declare const useTimeField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseTimeFieldProps<TEnableAccessibleFieldDOMStructure>>(props: TAllProps) => import("../internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps, "disabled" | "readOnly" | "value" | "defaultValue" | "autoFocus" | "onChange" | "onError" | "format" | "focused" | keyof import("../internals").BaseTimeValidationProps | keyof import("../internals").TimeValidationProps | "ampm" | "referenceDate" | "formatDensity" | "timezone" | "shouldRespectLeadingZeros" | "selectedSections" | "onSelectedSectionsChange" | "unstableFieldRef" | "unstableStartFieldRef" | "unstableEndFieldRef" | "enableAccessibleFieldDOMStructure" | "dateSeparator">>;
+export declare const useTimeField: <TEnableAccessibleFieldDOMStructure extends boolean, TProps extends UseTimeFieldProps<TEnableAccessibleFieldDOMStructure>>(props: TProps) => import("../internals").UseFieldReturnValue<TEnableAccessibleFieldDOMStructure, TProps>;

package/esm/TimeField/useTimeField.js

@@ -1,25 +1,11 @@
 'use client';
 
-import { useField, useFieldInternalPropsWithDefaults } from "../internals/hooks/useField/index.js";
-import { useSplitFieldProps } from "../hooks/index.js";
+import { useField } from "../internals/hooks/useField/index.js";
 import { useTimeManager } from "../managers/index.js";
 export const useTimeField = props => {
   const manager = useTimeManager(props);
-  const {
-    forwardedProps,
-    internalProps
-  } = useSplitFieldProps(props, 'time');
-  const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({
-    manager,
-    internalProps
-  });
   return useField({
-    forwardedProps,
-    internalProps: internalPropsWithDefaults,
-    valueManager: manager.internal_valueManager,
-    fieldValueManager: manager.internal_fieldValueManager,
-    validator: manager.validator,
-    valueType: manager.valueType,
-    getOpenPickerButtonAriaLabel: manager.internal_useOpenPickerButtonAriaLabel()
+    manager,
+    props
   });
 };

package/esm/TimePicker/TimePicker.js

@@ -102,6 +102,7 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
   disableIgnoringDatePartForTimeValidation: PropTypes.bool,
   /**
    * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @deprecated Use the [field component](https://next.mui.com/x/react-date-pickers/fields/) instead.
    * @default false
    */
   disableOpenPicker: PropTypes.bool,

package/esm/TimePicker/shared.js

@@ -4,12 +4,14 @@ import { useThemeProps } from '@mui/material/styles';
 import { useUtils } from "../internals/hooks/useUtils.js";
 import { TimePickerToolbar } from "./TimePickerToolbar.js";
 import { applyDefaultViewProps } from "../internals/utils/views.js";
+import { useApplyDefaultValuesToTimeValidationProps } from "../managers/useTimeManager.js";
 export function useTimePickerDefaultizedProps(props, name) {
   const utils = useUtils();
   const themeProps = useThemeProps({
     props,
     name
   });
+  const validationProps = useApplyDefaultValuesToTimeValidationProps(themeProps);
   const ampm = themeProps.ampm ?? utils.is12HourCycleInCurrentLocale();
   const localeText = React.useMemo(() => {
     if (themeProps.localeText?.toolbarTitle == null) {
@@ -19,7 +21,7 @@ export function useTimePickerDefaultizedProps(props, name) {
       timePickerToolbarTitle: themeProps.localeText.toolbarTitle
     });
   }, [themeProps.localeText]);
-  return _extends({}, themeProps, {
+  return _extends({}, themeProps, validationProps, {
     ampm,
     localeText
   }, applyDefaultViewProps({
@@ -28,8 +30,6 @@ export function useTimePickerDefaultizedProps(props, name) {
     defaultViews: ['hours', 'minutes'],
     defaultOpenTo: 'hours'
   }), {
-    disableFuture: themeProps.disableFuture ?? false,
-    disablePast: themeProps.disablePast ?? false,
     slots: _extends({
       toolbar: TimePickerToolbar
     }, themeProps.slots),

package/esm/YearCalendar/YearCalendar.js

@@ -11,14 +11,14 @@ import { shouldForwardProp } from '@mui/system/createStyled';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_useForkRef as useForkRef, unstable_composeClasses as composeClasses, unstable_useControlled as useControlled, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { YearCalendarButton } from "./YearCalendarButton.js";
-import { useUtils, useNow, useDefaultDates } from "../internals/hooks/useUtils.js";
+import { useUtils, useNow } from "../internals/hooks/useUtils.js";
 import { getYearCalendarUtilityClass } from "./yearCalendarClasses.js";
-import { applyDefaultDate } from "../internals/utils/date-utils.js";
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { SECTION_TYPE_GRANULARITY } from "../internals/utils/getDefaultReferenceDate.js";
 import { useControlledValue } from "../internals/hooks/useControlledValue.js";
 import { DIALOG_WIDTH, MAX_CALENDAR_HEIGHT } from "../internals/constants/dimensions.js";
 import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
+import { useApplyDefaultValuesToDateValidationProps } from "../managers/useDateManager.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = classes => {
   const slots = {
@@ -27,20 +27,14 @@ const useUtilityClasses = classes => {
   return composeClasses(slots, getYearCalendarUtilityClass, classes);
 };
 function useYearCalendarDefaultizedProps(props, name) {
-  const utils = useUtils();
-  const defaultDates = useDefaultDates();
   const themeProps = useThemeProps({
     props,
     name
   });
-  return _extends({
-    disablePast: false,
-    disableFuture: false
-  }, themeProps, {
+  const validationProps = useApplyDefaultValuesToDateValidationProps(themeProps);
+  return _extends({}, themeProps, validationProps, {
     yearsPerRow: themeProps.yearsPerRow ?? 3,
-    yearsOrder: themeProps.yearsOrder ?? 'asc',
-    minDate: applyDefaultDate(utils, themeProps.minDate, defaultDates.minDate),
-    maxDate: applyDefaultDate(utils, themeProps.maxDate, defaultDates.maxDate)
+    yearsOrder: themeProps.yearsOrder ?? 'asc'
   });
 }
 const YearCalendarRoot = styled('div', {

package/esm/hooks/useSplitFieldProps.d.ts

@@ -1,7 +1,7 @@
 import { DATE_TIME_VALIDATION_PROP_NAMES, DATE_VALIDATION_PROP_NAMES, TIME_VALIDATION_PROP_NAMES } from "../validation/extractValidationProps.js";
 import { PickerValueType } from "../models/common.js";
 declare const SHARED_FIELD_INTERNAL_PROP_NAMES: readonly ["value", "defaultValue", "referenceDate", "format", "formatDensity", "onChange", "timezone", "onError", "shouldRespectLeadingZeros", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef", "unstableStartFieldRef", "unstableEndFieldRef", "enableAccessibleFieldDOMStructure", "disabled", "readOnly", "dateSeparator", "autoFocus", "focused"];
-type InternalPropNames<TValueType extends PickerValueType> = (typeof SHARED_FIELD_INTERNAL_PROP_NAMES)[number] | (TValueType extends 'date' | 'date-time' ? (typeof DATE_VALIDATION_PROP_NAMES)[number] : never) | (TValueType extends 'time' | 'date-time' ? (typeof TIME_VALIDATION_PROP_NAMES)[number] : never) | (TValueType extends 'date-time' ? (typeof DATE_TIME_VALIDATION_PROP_NAMES)[number] : never);
+export type InternalPropNames<TValueType extends PickerValueType> = (typeof SHARED_FIELD_INTERNAL_PROP_NAMES)[number] | (TValueType extends 'date' | 'date-time' ? (typeof DATE_VALIDATION_PROP_NAMES)[number] : never) | (TValueType extends 'time' | 'date-time' ? (typeof TIME_VALIDATION_PROP_NAMES)[number] : never) | (TValueType extends 'date-time' ? (typeof DATE_TIME_VALIDATION_PROP_NAMES)[number] : never);
 /**
  * Split the props received by the field component into:
  * - `internalProps` which are used by the various hooks called by the field component.

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v8.0.0-beta.0
+ * @mui/x-date-pickers v8.0.0-beta.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/internals/components/PickerFieldUI.d.ts

@@ -6,9 +6,9 @@ import { SvgIconProps } from '@mui/material/SvgIcon';
 import { MakeOptional, SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { FieldOwnerState } from "../../models/index.js";
 import { UseFieldOwnerStateParameters } from "../hooks/useFieldOwnerState.js";
-import type { UseFieldResponse } from '../hooks/useField';
+import type { UseFieldReturnValue, UseFieldProps } from '../hooks/useField';
 import { PickersTextFieldProps } from "../../PickersTextField/index.js";
-export declare const cleanFieldResponse: <TFieldResponse extends MakeOptional<UseFieldResponse<any, ExportedPickerFieldUIProps & {
+export declare const cleanFieldResponse: <TFieldResponse extends MakeOptional<UseFieldReturnValue<any, ExportedPickerFieldUIProps & {
   [key: string]: any;
 }>, "onClear" | "clearable">>({
   enableAccessibleFieldDOMStructure,
@@ -22,7 +22,7 @@ export declare const PickerFieldUIContext: React.Context<PickerFieldUIContextVal
  * Adds the button to open the Picker and the button to clear the value of the field.
  * @ignore - internal component.
  */
-export declare function PickerFieldUI(props: PickerFieldUIProps): React.JSX.Element;
+export declare function PickerFieldUI<TEnableAccessibleFieldDOMStructure extends boolean, TProps extends UseFieldProps<TEnableAccessibleFieldDOMStructure>>(props: PickerFieldUIProps<TEnableAccessibleFieldDOMStructure, TProps>): React.JSX.Element;
 export interface ExportedPickerFieldUIProps {
   /**
    * If `true`, a clear button will be shown in the field allowing value clearing.
@@ -46,7 +46,7 @@ export interface ExportedPickerFieldUIProps {
    */
   openPickerButtonPosition?: 'start' | 'end';
 }
-export interface PickerFieldUIProps {
+export interface PickerFieldUIProps<TEnableAccessibleFieldDOMStructure extends boolean, TProps extends UseFieldProps<TEnableAccessibleFieldDOMStructure>> {
   /**
    * Overridable component slots.
    * @default {}
@@ -60,7 +60,7 @@ export interface PickerFieldUIProps {
   /**
    * Object returned by the `useField` hook or one of its wrapper (for example `useDateField`).
    */
-  fieldResponse: UseFieldResponse<any, any>;
+  fieldResponse: UseFieldReturnValue<TEnableAccessibleFieldDOMStructure, TProps>;
   /**
    * The component to use to render the Picker opening icon if none is provided in the Picker's slots.
    */

package/esm/internals/hooks/useField/buildSectionsFromFormat.d.ts

@@ -1,6 +1,6 @@
 import { FieldSection, MuiPickersAdapter, PickerValidDate } from "../../../models/index.js";
 import { PickersLocaleText } from "../../../locales/index.js";
-interface BuildSectionsFromFormatParams {
+interface BuildSectionsFromFormatParameters {
   utils: MuiPickersAdapter;
   format: string;
   formatDensity: 'dense' | 'spacious';
@@ -11,5 +11,5 @@ interface BuildSectionsFromFormatParams {
   date: PickerValidDate | null;
   enableAccessibleFieldDOMStructure: boolean;
 }
-export declare const buildSectionsFromFormat: (params: BuildSectionsFromFormatParams) => FieldSection[];
+export declare const buildSectionsFromFormat: (parameters: BuildSectionsFromFormatParameters) => FieldSection[];
 export {};

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

@@ -141,12 +141,12 @@ const createSection = ({
     modified: false
   });
 };
-const buildSections = params => {
+const buildSections = parameters => {
   const {
     utils,
     expandedFormat,
     escapedParts
-  } = params;
+  } = parameters;
   const now = utils.date(undefined);
   const sections = [];
   let startSeparator = '';
@@ -171,7 +171,7 @@ const buildSections = params => {
       while (word.length > 0) {
         const firstWord = regExpFirstTokenInWord.exec(word)[1];
         word = word.slice(firstWord.length);
-        sections.push(createSection(_extends({}, params, {
+        sections.push(createSection(_extends({}, parameters, {
           now,
           token: firstWord,
           startSeparator
@@ -236,19 +236,19 @@ const postProcessSections = ({
     return section;
   });
 };
-export const buildSectionsFromFormat = params => {
-  let expandedFormat = expandFormat(params);
-  if (params.isRtl && params.enableAccessibleFieldDOMStructure) {
+export const buildSectionsFromFormat = parameters => {
+  let expandedFormat = expandFormat(parameters);
+  if (parameters.isRtl && parameters.enableAccessibleFieldDOMStructure) {
     expandedFormat = expandedFormat.split(' ').reverse().join(' ');
   }
-  const escapedParts = getEscapedPartsFromFormat(_extends({}, params, {
+  const escapedParts = getEscapedPartsFromFormat(_extends({}, parameters, {
     expandedFormat
   }));
-  const sections = buildSections(_extends({}, params, {
+  const sections = buildSections(_extends({}, parameters, {
     expandedFormat,
     escapedParts
   }));
-  return postProcessSections(_extends({}, params, {
+  return postProcessSections(_extends({}, parameters, {
     sections
   }));
 };

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

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

package/esm/internals/hooks/useField/syncSelectionToDOM.d.ts

@@ -0,0 +1,9 @@
+import { PickerValidValue } from "../../models/index.js";
+import { UseFieldDOMGetters } from "./useField.types.js";
+import { UseFieldStateReturnValue } from "./useFieldState.js";
+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/esm/internals/hooks/useField/syncSelectionToDOM.js

@@ -0,0 +1,50 @@
+import { getActiveElement } from "../../utils/utils.js";
+export function syncSelectionToDOM(parameters) {
+  const {
+    focused,
+    domGetters,
+    stateResponse: {
+      // States and derived states
+      parsedSelectedSections,
+      state
+    }
+  } = parameters;
+  if (!domGetters.isReady()) {
+    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 && 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(document))) {
+    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/esm/internals/hooks/useField/useField.d.ts

@@ -1,5 +1,3 @@
-import { UseFieldParams, UseFieldResponse, UseFieldCommonForwardedProps, UseFieldInternalProps, UseFieldForwardedProps } from "./useField.types.js";
+import { UseFieldParameters, UseFieldReturnValue, UseFieldProps } from "./useField.types.js";
 import { PickerValidValue } from "../../models/index.js";
-export declare const useField: <TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldCommonForwardedProps & UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure>, TInternalProps extends UseFieldInternalProps<TValue, TEnableAccessibleFieldDOMStructure, any> & {
-  minutesStep?: number;
-}>(params: UseFieldParams<TValue, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps>) => UseFieldResponse<TEnableAccessibleFieldDOMStructure, TForwardedProps>;
+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>;