@mui/x-date-pickers 8.0.0-alpha.11 → 8.0.0-alpha.13

package/esm/YearCalendar/YearCalendarButton.js

@@ -0,0 +1,115 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["autoFocus", "classes", "disabled", "selected", "value", "onClick", "onKeyDown", "onFocus", "onBlur", "slots", "slotProps"];
+import * as React from 'react';
+import { styled, alpha } from '@mui/material/styles';
+import useSlotProps from '@mui/utils/useSlotProps';
+import composeClasses from '@mui/utils/composeClasses';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
+import { getYearCalendarUtilityClass, yearCalendarClasses } from "./yearCalendarClasses.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = (classes, ownerState) => {
+  const slots = {
+    button: ['button', ownerState.isYearDisabled && 'disabled', ownerState.isYearSelected && 'selected']
+  };
+  return composeClasses(slots, getYearCalendarUtilityClass, classes);
+};
+const DefaultYearButton = styled('button', {
+  name: 'MuiYearCalendar',
+  slot: 'Button',
+  overridesResolver: (_, styles) => [styles.button, {
+    [`&.${yearCalendarClasses.disabled}`]: styles.disabled
+  }, {
+    [`&.${yearCalendarClasses.selected}`]: styles.selected
+  }]
+})(({
+  theme
+}) => _extends({
+  color: 'unset',
+  backgroundColor: 'transparent',
+  border: 0,
+  outline: 0
+}, theme.typography.subtitle1, {
+  height: 36,
+  width: 72,
+  borderRadius: 18,
+  cursor: 'pointer',
+  '&:focus': {
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.focusOpacity})` : alpha(theme.palette.action.active, theme.palette.action.focusOpacity)
+  },
+  '&:hover': {
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity)
+  },
+  '&:disabled': {
+    cursor: 'auto',
+    pointerEvents: 'none'
+  },
+  [`&.${yearCalendarClasses.disabled}`]: {
+    color: (theme.vars || theme).palette.text.secondary
+  },
+  [`&.${yearCalendarClasses.selected}`]: {
+    color: (theme.vars || theme).palette.primary.contrastText,
+    backgroundColor: (theme.vars || theme).palette.primary.main,
+    '&:focus, &:hover': {
+      backgroundColor: (theme.vars || theme).palette.primary.dark
+    }
+  }
+}));
+
+/**
+ * @ignore - internal component.
+ */
+export const YearCalendarButton = /*#__PURE__*/React.memo(function YearCalendarButton(props) {
+  const {
+      autoFocus,
+      classes: classesProp,
+      disabled,
+      selected,
+      value,
+      onClick,
+      onKeyDown,
+      onFocus,
+      onBlur,
+      slots,
+      slotProps
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const ref = React.useRef(null);
+  const {
+    ownerState: pickerOwnerState
+  } = usePickerPrivateContext();
+  const ownerState = _extends({}, pickerOwnerState, {
+    isYearDisabled: disabled,
+    isYearSelected: selected
+  });
+  const classes = useUtilityClasses(classesProp, ownerState);
+
+  // We can't forward the `autoFocus` to the button because it is a native button, not a MUI Button
+  useEnhancedEffect(() => {
+    if (autoFocus) {
+      // `ref.current` being `null` would be a bug in MUI.
+      ref.current?.focus();
+    }
+  }, [autoFocus]);
+  const YearButton = slots?.yearButton ?? DefaultYearButton;
+  const yearButtonProps = useSlotProps({
+    elementType: YearButton,
+    externalSlotProps: slotProps?.yearButton,
+    externalForwardedProps: other,
+    additionalProps: {
+      disabled,
+      ref,
+      type: 'button',
+      role: 'radio',
+      'aria-checked': selected,
+      onClick: event => onClick(event, value),
+      onKeyDown: event => onKeyDown(event, value),
+      onFocus: event => onFocus(event, value),
+      onBlur: event => onBlur(event, value)
+    },
+    ownerState,
+    className: classes.button
+  });
+  return /*#__PURE__*/_jsx(YearButton, _extends({}, yearButtonProps));
+});

package/esm/YearCalendar/index.d.ts

@@ -0,0 +1,4 @@
+export { YearCalendar } from "./YearCalendar.js";
+export type { YearCalendarProps, YearCalendarSlots, YearCalendarSlotProps } from './YearCalendar.types';
+export { yearCalendarClasses, getYearCalendarUtilityClass } from "./yearCalendarClasses.js";
+export type { YearCalendarClasses, YearCalendarClassKey } from './yearCalendarClasses';

package/esm/YearCalendar/index.js

@@ -0,0 +1,2 @@
+export { YearCalendar } from "./YearCalendar.js";
+export { yearCalendarClasses, getYearCalendarUtilityClass } from "./yearCalendarClasses.js";

package/esm/YearCalendar/yearCalendarClasses.d.ts

@@ -0,0 +1,13 @@
+export interface YearCalendarClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the button element that represents a single year */
+  button: string;
+  /** Styles applied to a disabled button element. */
+  disabled: string;
+  /** Styles applied to a selected button element. */
+  selected: string;
+}
+export type YearCalendarClassKey = keyof YearCalendarClasses;
+export declare function getYearCalendarUtilityClass(slot: string): string;
+export declare const yearCalendarClasses: Record<"button" | "disabled" | "selected" | "root", string>;

package/esm/YearCalendar/yearCalendarClasses.js

@@ -0,0 +1,5 @@
+import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+export function getYearCalendarUtilityClass(slot) {
+  return generateUtilityClass('MuiYearCalendar', slot);
+}
+export const yearCalendarClasses = generateUtilityClasses('MuiYearCalendar', ['root', 'button', 'disabled', 'selected']);

package/esm/dateViewRenderers/dateViewRenderers.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { DateCalendarProps } from "../DateCalendar/index.js";
+import { DateView } from "../models/index.js";
+import { DateOrTimeViewWithMeridiem } from "../internals/models/index.js";
+export interface DateViewRendererProps<TView extends DateOrTimeViewWithMeridiem> extends Omit<DateCalendarProps, 'views' | 'openTo' | 'view' | 'onViewChange' | 'focusedView'> {
+  view: TView;
+  onViewChange?: (view: TView) => void;
+  views: readonly TView[];
+  focusedView: TView | null;
+}
+export declare const renderDateViewCalendar: ({
+  view,
+  onViewChange,
+  views,
+  focusedView,
+  onFocusedViewChange,
+  value,
+  defaultValue,
+  referenceDate,
+  onChange,
+  className,
+  classes,
+  disableFuture,
+  disablePast,
+  minDate,
+  maxDate,
+  shouldDisableDate,
+  shouldDisableMonth,
+  shouldDisableYear,
+  reduceAnimations,
+  onMonthChange,
+  monthsPerRow,
+  onYearChange,
+  yearsOrder,
+  yearsPerRow,
+  slots,
+  slotProps,
+  loading,
+  renderLoading,
+  disableHighlightToday,
+  readOnly,
+  disabled,
+  showDaysOutsideCurrentMonth,
+  dayOfWeekFormatter,
+  sx,
+  autoFocus,
+  fixedWeekNumber,
+  displayWeekNumber,
+  timezone
+}: DateViewRendererProps<DateView>) => React.JSX.Element;

package/esm/dateViewRenderers/dateViewRenderers.js

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { DateCalendar } from "../DateCalendar/index.js";
+import { isDatePickerView } from "../internals/utils/date-utils.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const renderDateViewCalendar = ({
+  view,
+  onViewChange,
+  views,
+  focusedView,
+  onFocusedViewChange,
+  value,
+  defaultValue,
+  referenceDate,
+  onChange,
+  className,
+  classes,
+  disableFuture,
+  disablePast,
+  minDate,
+  maxDate,
+  shouldDisableDate,
+  shouldDisableMonth,
+  shouldDisableYear,
+  reduceAnimations,
+  onMonthChange,
+  monthsPerRow,
+  onYearChange,
+  yearsOrder,
+  yearsPerRow,
+  slots,
+  slotProps,
+  loading,
+  renderLoading,
+  disableHighlightToday,
+  readOnly,
+  disabled,
+  showDaysOutsideCurrentMonth,
+  dayOfWeekFormatter,
+  sx,
+  autoFocus,
+  fixedWeekNumber,
+  displayWeekNumber,
+  timezone
+}) => /*#__PURE__*/_jsx(DateCalendar, {
+  view: view,
+  onViewChange: onViewChange,
+  views: views.filter(isDatePickerView),
+  focusedView: focusedView && isDatePickerView(focusedView) ? focusedView : null,
+  onFocusedViewChange: onFocusedViewChange,
+  value: value,
+  defaultValue: defaultValue,
+  referenceDate: referenceDate,
+  onChange: onChange,
+  className: className,
+  classes: classes,
+  disableFuture: disableFuture,
+  disablePast: disablePast,
+  minDate: minDate,
+  maxDate: maxDate,
+  shouldDisableDate: shouldDisableDate,
+  shouldDisableMonth: shouldDisableMonth,
+  shouldDisableYear: shouldDisableYear,
+  reduceAnimations: reduceAnimations,
+  onMonthChange: onMonthChange,
+  monthsPerRow: monthsPerRow,
+  onYearChange: onYearChange,
+  yearsOrder: yearsOrder,
+  yearsPerRow: yearsPerRow,
+  slots: slots,
+  slotProps: slotProps,
+  loading: loading,
+  renderLoading: renderLoading,
+  disableHighlightToday: disableHighlightToday,
+  readOnly: readOnly,
+  disabled: disabled,
+  showDaysOutsideCurrentMonth: showDaysOutsideCurrentMonth,
+  dayOfWeekFormatter: dayOfWeekFormatter,
+  sx: sx,
+  autoFocus: autoFocus,
+  fixedWeekNumber: fixedWeekNumber,
+  displayWeekNumber: displayWeekNumber,
+  timezone: timezone
+});

package/esm/dateViewRenderers/index.d.ts

@@ -0,0 +1,2 @@
+export { renderDateViewCalendar } from "./dateViewRenderers.js";
+export type { DateViewRendererProps } from './dateViewRenderers';

package/esm/dateViewRenderers/index.js

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

package/esm/hooks/index.d.ts

@@ -0,0 +1,8 @@
+export { useClearableField } from "./useClearableField.js";
+export type { ExportedUseClearableFieldProps, UseClearableFieldSlots, UseClearableFieldSlotProps, UseClearableFieldResponse } from './useClearableField';
+export { usePickerTranslations } from "./usePickerTranslations.js";
+export { useSplitFieldProps } from "./useSplitFieldProps.js";
+export { useParsedFormat } from "./useParsedFormat.js";
+export { usePickerContext } from "./usePickerContext.js";
+export { usePickerActionsContext } from "./usePickerActionsContext.js";
+export { useIsValidValue } from "./useIsValidValue.js";

package/esm/hooks/index.js

@@ -0,0 +1,7 @@
+export { useClearableField } from "./useClearableField.js";
+export { usePickerTranslations } from "./usePickerTranslations.js";
+export { useSplitFieldProps } from "./useSplitFieldProps.js";
+export { useParsedFormat } from "./useParsedFormat.js";
+export { usePickerContext } from "./usePickerContext.js";
+export { usePickerActionsContext } from "./usePickerActionsContext.js";
+export { useIsValidValue } from "./useIsValidValue.js";

package/esm/hooks/useClearableField.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { SlotComponentProps } from '@mui/utils';
+import MuiIconButton from '@mui/material/IconButton';
+import { SxProps } from '@mui/system';
+import { ClearIcon } from "../icons/index.js";
+import { FieldOwnerState } from "../models/fields.js";
+import { FormProps } from "../internals/models/index.js";
+export interface ExportedUseClearableFieldProps {
+  /**
+   * If `true`, a clear button will be shown in the field allowing value clearing.
+   * @default false
+   */
+  clearable?: boolean;
+  /**
+   * Callback fired when the clear button is clicked.
+   */
+  onClear?: React.MouseEventHandler;
+}
+export interface UseClearableFieldSlots {
+  /**
+   * Icon to display inside the clear button.
+   * @default ClearIcon
+   */
+  clearIcon?: React.ElementType;
+  /**
+   * Button to clear the value.
+   * @default IconButton
+   */
+  clearButton?: React.ElementType;
+}
+export interface UseClearableFieldSlotProps {
+  clearIcon?: SlotComponentProps<typeof ClearIcon, {}, FieldOwnerState>;
+  clearButton?: SlotComponentProps<typeof MuiIconButton, {}, FieldOwnerState>;
+}
+interface UseClearableFieldProps extends ExportedUseClearableFieldProps, FormProps {
+  InputProps?: {
+    endAdornment?: React.ReactNode;
+  };
+  sx?: SxProps<any>;
+  slots?: UseClearableFieldSlots;
+  slotProps?: UseClearableFieldSlotProps;
+}
+export type UseClearableFieldResponse<TFieldProps extends UseClearableFieldProps> = Omit<TFieldProps, 'clearable' | 'onClear' | 'slots' | 'slotProps'>;
+export declare const useClearableField: <TFieldProps extends UseClearableFieldProps>(props: TFieldProps) => UseClearableFieldResponse<TFieldProps>;
+export {};

package/esm/hooks/useClearableField.js

@@ -0,0 +1,79 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["clearable", "onClear", "InputProps", "sx", "slots", "slotProps"],
+  _excluded2 = ["ownerState"];
+import * as React from 'react';
+import useSlotProps from '@mui/utils/useSlotProps';
+import MuiIconButton from '@mui/material/IconButton';
+import InputAdornment from '@mui/material/InputAdornment';
+import { ClearIcon } from "../icons/index.js";
+import { usePickerTranslations } from "./usePickerTranslations.js";
+import { useFieldOwnerState } from "../internals/hooks/useFieldOwnerState.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const useClearableField = props => {
+  const translations = usePickerTranslations();
+  const ownerState = useFieldOwnerState(props);
+  const {
+      clearable,
+      onClear,
+      InputProps,
+      sx,
+      slots,
+      slotProps
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const IconButton = slots?.clearButton ?? MuiIconButton;
+  // The spread is here to avoid this bug mui/material-ui#34056
+  const _useSlotProps = useSlotProps({
+      elementType: IconButton,
+      externalSlotProps: slotProps?.clearButton,
+      ownerState,
+      className: 'clearButton',
+      additionalProps: {
+        title: translations.fieldClearLabel,
+        tabIndex: -1
+      }
+    }),
+    iconButtonProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
+  const EndClearIcon = slots?.clearIcon ?? ClearIcon;
+  const endClearIconProps = useSlotProps({
+    elementType: EndClearIcon,
+    externalSlotProps: slotProps?.clearIcon,
+    ownerState
+  });
+  return _extends({}, other, {
+    InputProps: _extends({}, InputProps, {
+      endAdornment: /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [clearable && /*#__PURE__*/_jsx(InputAdornment, {
+          position: "end",
+          sx: {
+            marginRight: InputProps?.endAdornment ? -1 : -1.5
+          },
+          children: /*#__PURE__*/_jsx(IconButton, _extends({}, iconButtonProps, {
+            onClick: onClear,
+            children: /*#__PURE__*/_jsx(EndClearIcon, _extends({
+              fontSize: "small"
+            }, endClearIconProps))
+          }))
+        }), InputProps?.endAdornment]
+      })
+    }),
+    sx: [{
+      '& .clearButton': {
+        opacity: 1
+      },
+      '@media (pointer: fine)': {
+        '& .clearButton': {
+          opacity: 0
+        },
+        '&:hover, &:focus-within': {
+          '.clearButton': {
+            opacity: 1
+          }
+        }
+      }
+    }, ...(Array.isArray(sx) ? sx : [sx])]
+  });
+};

package/esm/hooks/useIsValidValue.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { PickerValidValue } from "../internals/models/index.js";
+export declare const IsValidValueContext: React.Context<(value: any) => boolean>;
+/**
+ * Returns a function to check if a value is valid according to the validation props passed to the parent picker.
+ */
+export declare function useIsValidValue<TValue extends PickerValidValue>(): (value: TValue) => boolean;

package/esm/hooks/useIsValidValue.js

@@ -0,0 +1,11 @@
+'use client';
+
+import * as React from 'react';
+export const IsValidValueContext = /*#__PURE__*/React.createContext(() => true);
+
+/**
+ * Returns a function to check if a value is valid according to the validation props passed to the parent picker.
+ */
+export function useIsValidValue() {
+  return React.useContext(IsValidValueContext);
+}

package/esm/hooks/useParsedFormat.d.ts

@@ -0,0 +1,16 @@
+interface UseParsedFormatParameters {
+  /**
+   * Format to parse.
+   * @default the format provided by the picker.
+   */
+  format?: string;
+}
+/**
+ * Returns the parsed format to be rendered in the field when there is no value or in other parts of the Picker.
+ * This format is localized (for example `AAAA` for the year with the French locale) and cannot be parsed by your date library.
+ * @param {object} The parameters needed to build the placeholder.
+ * @param {string} params.format Format to parse.
+ * @returns
+ */
+export declare const useParsedFormat: (parameters?: UseParsedFormatParameters) => string;
+export {};

package/esm/hooks/useParsedFormat.js

@@ -0,0 +1,41 @@
+'use client';
+
+import * as React from 'react';
+import { useRtl } from '@mui/system/RtlProvider';
+import { useUtils } from "../internals/hooks/useUtils.js";
+import { buildSectionsFromFormat } from "../internals/hooks/useField/buildSectionsFromFormat.js";
+import { getLocalizedDigits } from "../internals/hooks/useField/useField.utils.js";
+import { usePickerTranslations } from "./usePickerTranslations.js";
+import { useNullablePickerContext } from "../internals/hooks/useNullablePickerContext.js";
+/**
+ * Returns the parsed format to be rendered in the field when there is no value or in other parts of the Picker.
+ * This format is localized (for example `AAAA` for the year with the French locale) and cannot be parsed by your date library.
+ * @param {object} The parameters needed to build the placeholder.
+ * @param {string} params.format Format to parse.
+ * @returns
+ */
+export const useParsedFormat = (parameters = {}) => {
+  const pickerContext = useNullablePickerContext();
+  const utils = useUtils();
+  const isRtl = useRtl();
+  const translations = usePickerTranslations();
+  const localizedDigits = React.useMemo(() => getLocalizedDigits(utils), [utils]);
+  const {
+    format = pickerContext?.fieldFormat ?? utils.formats.fullDate
+  } = parameters;
+  return React.useMemo(() => {
+    const sections = buildSectionsFromFormat({
+      utils,
+      format,
+      formatDensity: 'dense',
+      isRtl,
+      shouldRespectLeadingZeros: true,
+      localeText: translations,
+      localizedDigits,
+      date: null,
+      // TODO v9: Make sure we still don't reverse in `buildSectionsFromFormat` when using `useParsedFormat`.
+      enableAccessibleFieldDOMStructure: false
+    });
+    return sections.map(section => `${section.startSeparator}${section.placeholder}${section.endSeparator}`).join('');
+  }, [utils, isRtl, translations, localizedDigits, format]);
+};

package/esm/hooks/usePickerActionsContext.d.ts

@@ -0,0 +1,7 @@
+import { PickerActionsContextValue } from "../internals/components/PickerProvider.js";
+import { DateOrTimeViewWithMeridiem, PickerValidValue, PickerValue } from "../internals/models/index.js";
+/**
+ * Returns a subset of the context passed by the picker wrapping the current component.
+ * It only contains the actions and never causes a re-render of the component using it.
+ */
+export declare const usePickerActionsContext: <TValue extends PickerValidValue = PickerValue, TView extends DateOrTimeViewWithMeridiem = DateOrTimeViewWithMeridiem, TError = string | null>() => PickerActionsContextValue<TValue, TView, TError>;

package/esm/hooks/usePickerActionsContext.js

@@ -0,0 +1,15 @@
+'use client';
+
+import * as React from 'react';
+import { PickerActionsContext } from "../internals/components/PickerProvider.js";
+/**
+ * Returns a subset of the context passed by the picker wrapping the current component.
+ * It only contains the actions and never causes a re-render of the component using it.
+ */
+export const usePickerActionsContext = () => {
+  const value = React.useContext(PickerActionsContext);
+  if (value == null) {
+    throw new Error(['MUI X: The `usePickerActionsContext` can only be called in fields that are used as a slot of a picker component'].join('\n'));
+  }
+  return value;
+};

package/esm/hooks/usePickerContext.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { PickerContextValue } from '../internals/components/PickerProvider';
+import { DateOrTimeViewWithMeridiem, PickerValidValue, PickerValue } from "../internals/models/index.js";
+export declare const PickerContext: React.Context<PickerContextValue<any, any, any> | null>;
+/**
+ * Returns the context passed by the picker that wraps the current component.
+ */
+export declare const usePickerContext: <TValue extends PickerValidValue = PickerValue, TView extends DateOrTimeViewWithMeridiem = DateOrTimeViewWithMeridiem, TError = string | null>() => PickerContextValue<TValue, TView, TError>;

package/esm/hooks/usePickerContext.js

@@ -0,0 +1,15 @@
+'use client';
+
+import * as React from 'react';
+export const PickerContext = /*#__PURE__*/React.createContext(null);
+
+/**
+ * Returns the context passed by the picker that wraps the current component.
+ */
+export const usePickerContext = () => {
+  const value = React.useContext(PickerContext);
+  if (value == null) {
+    throw new Error('MUI X: The `usePickerContext` hook can only be called inside the context of a picker component');
+  }
+  return value;
+};

package/esm/hooks/usePickerTranslations.d.ts

@@ -0,0 +1 @@
+export declare const usePickerTranslations: () => import("..").PickersLocaleText;

package/esm/hooks/usePickerTranslations.js

@@ -0,0 +1,4 @@
+'use client';
+
+import { useLocalizationContext } from "../internals/hooks/useUtils.js";
+export const usePickerTranslations = () => useLocalizationContext().localeText;

package/esm/hooks/useSplitFieldProps.d.ts

@@ -0,0 +1,24 @@
+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);
+/**
+ * Split the props received by the field component into:
+ * - `internalProps` which are used by the various hooks called by the field component.
+ * - `forwardedProps` which are passed to the underlying component.
+ * Note that some forwarded props might be used by the hooks as well.
+ * For instance, hooks like `useDateField` need props like `onKeyDown` to merge the default event handler and the one provided by the application.
+ * @template TProps, TValueType
+ * @param {TProps} props The props received by the field component.
+ * @param {TValueType} valueType The type of the field value ('date', 'time', or 'date-time').
+ */
+export declare const useSplitFieldProps: <TValueType extends PickerValueType, TProps extends { [key in InternalPropNames<TValueType>]?: any }>(props: TProps, valueType: TValueType) => {
+  forwardedProps: Omit<TProps, InternalPropNames<TValueType>>;
+  internalProps: ExtractInternalProps<TValueType, TProps>;
+};
+/**
+ * Extract the internal props from the props received by the field component.
+ * This makes sure that the internal props not defined in the props are not present in the result.
+ */
+type ExtractInternalProps<TValueType extends PickerValueType, TProps extends { [key in InternalPropNames<TValueType>]?: any }> = { [K in keyof TProps]: K extends InternalPropNames<TValueType> ? TProps[K] : never };
+export {};

package/esm/hooks/useSplitFieldProps.js

@@ -0,0 +1,48 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { DATE_TIME_VALIDATION_PROP_NAMES, DATE_VALIDATION_PROP_NAMES, TIME_VALIDATION_PROP_NAMES } from "../validation/extractValidationProps.js";
+const SHARED_FIELD_INTERNAL_PROP_NAMES = ['value', 'defaultValue', 'referenceDate', 'format', 'formatDensity', 'onChange', 'timezone', 'onError', 'shouldRespectLeadingZeros', 'selectedSections', 'onSelectedSectionsChange', 'unstableFieldRef', 'unstableStartFieldRef', 'unstableEndFieldRef', 'enableAccessibleFieldDOMStructure', 'disabled', 'readOnly', 'dateSeparator', 'autoFocus', 'focused'];
+/**
+ * Split the props received by the field component into:
+ * - `internalProps` which are used by the various hooks called by the field component.
+ * - `forwardedProps` which are passed to the underlying component.
+ * Note that some forwarded props might be used by the hooks as well.
+ * For instance, hooks like `useDateField` need props like `onKeyDown` to merge the default event handler and the one provided by the application.
+ * @template TProps, TValueType
+ * @param {TProps} props The props received by the field component.
+ * @param {TValueType} valueType The type of the field value ('date', 'time', or 'date-time').
+ */
+export const useSplitFieldProps = (props, valueType) => {
+  return React.useMemo(() => {
+    const forwardedProps = _extends({}, props);
+    const internalProps = {};
+    const extractProp = propName => {
+      if (forwardedProps.hasOwnProperty(propName)) {
+        // @ts-ignore
+        internalProps[propName] = forwardedProps[propName];
+        delete forwardedProps[propName];
+      }
+    };
+    SHARED_FIELD_INTERNAL_PROP_NAMES.forEach(extractProp);
+    if (valueType === 'date') {
+      DATE_VALIDATION_PROP_NAMES.forEach(extractProp);
+    } else if (valueType === 'time') {
+      TIME_VALIDATION_PROP_NAMES.forEach(extractProp);
+    } else if (valueType === 'date-time') {
+      DATE_VALIDATION_PROP_NAMES.forEach(extractProp);
+      TIME_VALIDATION_PROP_NAMES.forEach(extractProp);
+      DATE_TIME_VALIDATION_PROP_NAMES.forEach(extractProp);
+    }
+    return {
+      forwardedProps,
+      internalProps
+    };
+  }, [props, valueType]);
+};
+
+/**
+ * Extract the internal props from the props received by the field component.
+ * This makes sure that the internal props not defined in the props are not present in the result.
+ */