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

package/modern/TimeRangePicker/TimeRangePickerToolbar.js

@@ -0,0 +1,256 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className", "ampm", "toolbarPlaceholder", "classes"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { styled, useThemeProps } from '@mui/material/styles';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { PickersToolbar, PickersToolbarButton, useUtils, PickersToolbarText, getMeridiem, formatMeridiem, pickersToolbarClasses, pickersToolbarTextClasses, MULTI_SECTION_CLOCK_SECTION_WIDTH, useToolbarOwnerState } from '@mui/x-date-pickers/internals';
+import { usePickerContext, usePickerTranslations } from '@mui/x-date-pickers/hooks';
+import { getTimeRangePickerToolbarUtilityClass } from "./timeRangePickerToolbarClasses.js";
+import { usePickerRangePositionContext } from "../hooks/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useUtilityClasses = (classes, ownerState) => {
+  const {
+    pickerVariant
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    container: ['container', pickerVariant],
+    separator: ['separator'],
+    timeContainer: ['timeContainer']
+  };
+  return composeClasses(slots, getTimeRangePickerToolbarUtilityClass, classes);
+};
+const TimeRangePickerToolbarRoot = styled(PickersToolbar, {
+  name: 'MuiTimeRangePickerToolbar',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
+  theme
+}) => ({
+  borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
+  padding: '12px 0px 8px 0px',
+  [`& .${pickersToolbarClasses.content} .${pickersToolbarTextClasses.root}[data-selected]`]: {
+    color: (theme.vars || theme).palette.primary.main,
+    fontWeight: theme.typography.fontWeightBold
+  },
+  [`& .${pickersToolbarClasses.title}`]: {
+    paddingLeft: 12
+  }
+}));
+const TimeRangePickerToolbarContainer = styled('div', {
+  name: 'MuiTimeRangePickerToolbar',
+  slot: 'Container',
+  shouldForwardProp: prop => prop !== 'pickerVariant',
+  overridesResolver: (_, styles) => styles.container
+})({
+  display: 'flex',
+  flex: 1,
+  variants: [{
+    props: {
+      pickerVariant: 'mobile'
+    },
+    style: {
+      flexDirection: 'column',
+      rowGap: 8
+    }
+  }, {
+    props: {
+      pickerVariant: 'desktop'
+    },
+    style: {
+      flexDirection: 'row',
+      gap: 1
+    }
+  }]
+});
+const TimeRangePickerToolbarTimeContainer = styled('div', {
+  name: 'MuiTimeRangePickerToolbar',
+  slot: 'TimeContainer',
+  overridesResolver: (_, styles) => styles.timeContainer
+})({
+  display: 'flex',
+  justifyContent: 'space-around',
+  flex: 1
+});
+const TimeRangePickerToolbarSeparator = styled(PickersToolbarText, {
+  name: 'MuiTimeRangePickerToolbar',
+  slot: 'Separator',
+  overridesResolver: (props, styles) => styles.separator
+})({
+  cursor: 'default'
+});
+/**
+ * @ignore - internal component
+ */
+function TimeRangePickerToolbarTimeElement(props) {
+  const {
+    value,
+    ampm,
+    onViewChange,
+    view,
+    separatorClasses,
+    toolbarPlaceholder
+  } = props;
+  const utils = useUtils();
+  const {
+    variant,
+    views
+  } = usePickerContext();
+  const formatHours = time => ampm ? utils.format(time, 'hours12h') : utils.format(time, 'hours24h');
+  const meridiemMode = getMeridiem(value, utils);
+  const sectionWidth = variant === 'desktop' ? MULTI_SECTION_CLOCK_SECTION_WIDTH : '100%';
+  return /*#__PURE__*/_jsxs(TimeRangePickerToolbarTimeContainer, {
+    children: [views.includes('hours') && /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [/*#__PURE__*/_jsx(PickersToolbarButton, {
+        variant: "h5",
+        width: sectionWidth,
+        onClick: () => onViewChange('hours'),
+        selected: view === 'hours',
+        value: utils.isValid(value) ? formatHours(value) : toolbarPlaceholder
+      }), /*#__PURE__*/_jsx(TimeRangePickerToolbarSeparator, {
+        variant: "h5",
+        value: ":",
+        className: separatorClasses
+      }), /*#__PURE__*/_jsx(PickersToolbarButton, {
+        variant: "h5",
+        width: sectionWidth,
+        onClick: () => onViewChange('minutes'),
+        selected: view === 'minutes' || !views.includes('minutes') && view === 'hours',
+        value: utils.isValid(value) ? utils.format(value, 'minutes') : toolbarPlaceholder,
+        disabled: !views.includes('minutes')
+      })]
+    }), views.includes('seconds') && /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [/*#__PURE__*/_jsx(TimeRangePickerToolbarSeparator, {
+        variant: "h5",
+        value: ":",
+        className: separatorClasses
+      }), /*#__PURE__*/_jsx(PickersToolbarButton, {
+        variant: "h5",
+        width: sectionWidth,
+        onClick: () => onViewChange('seconds'),
+        selected: view === 'seconds',
+        value: value ? utils.format(value, 'seconds') : toolbarPlaceholder
+      })]
+    }), ampm && /*#__PURE__*/_jsx(PickersToolbarButton, {
+      variant: "h5",
+      onClick: () => onViewChange('meridiem'),
+      selected: view === 'meridiem',
+      value: value && meridiemMode ? formatMeridiem(utils, meridiemMode) : toolbarPlaceholder,
+      width: sectionWidth
+    })]
+  });
+}
+process.env.NODE_ENV !== "production" ? TimeRangePickerToolbarTimeElement.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  ampm: PropTypes.bool.isRequired,
+  onViewChange: PropTypes.func.isRequired,
+  separatorClasses: PropTypes.string.isRequired,
+  /**
+   * Toolbar value placeholder—it is displayed when the value is empty.
+   * @default "––"
+   */
+  toolbarPlaceholder: PropTypes.node,
+  value: PropTypes.object,
+  view: PropTypes.oneOf(['hours', 'meridiem', 'minutes', 'seconds'])
+} : void 0;
+const TimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function TimeRangePickerToolbar(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiTimeRangePickerToolbar'
+  });
+  const {
+      className,
+      ampm,
+      toolbarPlaceholder = '--',
+      classes: classesProp
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    value,
+    view,
+    setView
+  } = usePickerContext();
+  const translations = usePickerTranslations();
+  const ownerState = useToolbarOwnerState();
+  const {
+    rangePosition,
+    setRangePosition
+  } = usePickerRangePositionContext();
+  const classes = useUtilityClasses(classesProp, ownerState);
+  const handleStartRangeViewChange = React.useCallback(newView => {
+    if (rangePosition !== 'start') {
+      setRangePosition('start');
+    }
+    setView(newView);
+  }, [setRangePosition, setView, rangePosition]);
+  const handleEndRangeViewChange = React.useCallback(newView => {
+    if (rangePosition !== 'end') {
+      setRangePosition('end');
+    }
+    setView(newView);
+  }, [setRangePosition, setView, rangePosition]);
+  if (!view) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(TimeRangePickerToolbarRoot, _extends({}, other, {
+    toolbarTitle: translations.timeRangePickerToolbarTitle,
+    className: clsx(className, classes.root),
+    ownerState: ownerState,
+    ref: ref,
+    children: /*#__PURE__*/_jsxs(TimeRangePickerToolbarContainer, {
+      className: classes.container,
+      pickerVariant: ownerState.pickerVariant,
+      children: [/*#__PURE__*/_jsx(TimeRangePickerToolbarTimeElement, {
+        view: rangePosition === 'start' ? view : undefined,
+        value: value[0],
+        onViewChange: handleStartRangeViewChange,
+        ampm: ampm,
+        separatorClasses: classes.separator,
+        toolbarPlaceholder: toolbarPlaceholder
+      }), /*#__PURE__*/_jsx(TimeRangePickerToolbarTimeElement, {
+        view: rangePosition === 'end' ? view : undefined,
+        value: value[1],
+        onViewChange: handleEndRangeViewChange,
+        ampm: ampm,
+        separatorClasses: classes.separator,
+        toolbarPlaceholder: toolbarPlaceholder
+      })]
+    })
+  }));
+});
+process.env.NODE_ENV !== "production" ? TimeRangePickerToolbar.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  ampm: PropTypes.bool.isRequired,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  className: PropTypes.string,
+  /**
+   * If `true`, show the toolbar even in desktop mode.
+   * @default `true` for Desktop, `false` for Mobile.
+   */
+  hidden: PropTypes.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  titleId: PropTypes.string,
+  /**
+   * Toolbar value placeholder—it is displayed when the value is empty.
+   * @default "––"
+   */
+  toolbarPlaceholder: PropTypes.node
+} : void 0;
+export { TimeRangePickerToolbar };

package/modern/TimeRangePicker/index.d.ts

@@ -0,0 +1,10 @@
+export { TimeRangePicker } from "./TimeRangePicker.js";
+export type { TimeRangePickerProps, TimeRangePickerSlots, TimeRangePickerSlotProps } from './TimeRangePicker.types';
+export { TimeRangePickerTabs } from "./TimeRangePickerTabs.js";
+export type { ExportedTimeRangePickerTabsProps } from './TimeRangePickerTabs';
+export { getTimeRangePickerTabsUtilityClass, timeRangePickerTabsClasses } from "./timeRangePickerTabsClasses.js";
+export type { TimeRangePickerTabsClasses, TimeRangePickerTabsClassKey } from './timeRangePickerTabsClasses';
+export { TimeRangePickerToolbar } from "./TimeRangePickerToolbar.js";
+export type { TimeRangePickerToolbarProps } from './TimeRangePickerToolbar';
+export { timeRangePickerToolbarClasses } from "./timeRangePickerToolbarClasses.js";
+export type { TimeRangePickerToolbarClassKey, TimeRangePickerToolbarClasses } from './timeRangePickerToolbarClasses';

package/modern/TimeRangePicker/index.js

@@ -0,0 +1,5 @@
+export { TimeRangePicker } from "./TimeRangePicker.js";
+export { TimeRangePickerTabs } from "./TimeRangePickerTabs.js";
+export { getTimeRangePickerTabsUtilityClass, timeRangePickerTabsClasses } from "./timeRangePickerTabsClasses.js";
+export { TimeRangePickerToolbar } from "./TimeRangePickerToolbar.js";
+export { timeRangePickerToolbarClasses } from "./timeRangePickerToolbarClasses.js";

package/modern/TimeRangePicker/shared.d.ts

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { DefaultizedProps } from '@mui/x-internals/types';
+import { LocalizedComponent } from '@mui/x-date-pickers/locales';
+import { TimeStepOptions, TimeView } from '@mui/x-date-pickers/models';
+import { BasePickerInputProps, PickerViewRendererLookup, BaseTimeValidationProps, BaseClockProps, ExportedBaseClockProps, TimeViewWithMeridiem, UseViewsOptions, PickerRangeValue, PickerValue } from '@mui/x-date-pickers/internals';
+import { TimeClockSlots, TimeClockSlotProps } from '@mui/x-date-pickers/TimeClock';
+import { DigitalClockSlots, DigitalClockSlotProps } from '@mui/x-date-pickers/DigitalClock';
+import { MultiSectionDigitalClockSlots, MultiSectionDigitalClockSlotProps } from '@mui/x-date-pickers/MultiSectionDigitalClock';
+import { TimeViewRendererProps } from '@mui/x-date-pickers/timeViewRenderers';
+import { TimeRangePickerToolbarProps, ExportedTimeRangePickerToolbarProps } from "./TimeRangePickerToolbar.js";
+import { TimeRangeValidationError } from "../models/index.js";
+import { ExportedTimeRangePickerTabsProps, TimeRangePickerTabsProps } from "./TimeRangePickerTabs.js";
+export interface BaseTimeRangePickerSlots extends TimeClockSlots, DigitalClockSlots, MultiSectionDigitalClockSlots {
+  /**
+   * Tabs enabling toggling between start and end time.
+   * @default TimeRangePickerTabs
+   */
+  tabs?: React.ElementType<TimeRangePickerTabsProps>;
+  /**
+   * Custom component for the toolbar rendered above the views.
+   * @default TimeRangePickerToolbar
+   */
+  Toolbar?: React.JSXElementConstructor<TimeRangePickerToolbarProps>;
+}
+export interface BaseTimeRangePickerSlotProps extends TimeClockSlotProps, DigitalClockSlotProps, MultiSectionDigitalClockSlotProps {
+  /**
+   * Props passed down to the tabs component.
+   */
+  tabs?: ExportedTimeRangePickerTabsProps;
+  /**
+   * Props passed down to the toolbar component.
+   */
+  toolbar?: ExportedTimeRangePickerToolbarProps;
+}
+export type TimeRangePickerRenderers = PickerViewRendererLookup<PickerValue, TimeViewWithMeridiem, TimeViewRendererProps<TimeViewWithMeridiem, BaseClockProps<TimeViewWithMeridiem>> & {
+  view: TimeViewWithMeridiem;
+}>;
+export interface BaseTimeRangePickerProps extends Omit<BasePickerInputProps<PickerRangeValue, TimeViewWithMeridiem, TimeRangeValidationError>, 'orientation' | 'views' | 'openTo'>, ExportedBaseClockProps, Partial<Pick<UseViewsOptions<PickerRangeValue, TimeView>, 'openTo' | 'views'>> {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BaseTimeRangePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BaseTimeRangePickerSlotProps;
+  /**
+   * Define custom view renderers for each section.
+   * If `null`, the section will only have field editing.
+   * If `undefined`, internally defined view will be the used.
+   */
+  viewRenderers?: TimeRangePickerRenderers;
+  /**
+   * Amount of time options below or at which the single column time renderer is used.
+   * @default 24
+   */
+  thresholdToRenderTimeInASingleColumn?: number;
+  /**
+   * The time steps between two time unit options.
+   * For example, if `timeStep.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
+   * When single column time renderer is used, only `timeStep.minutes` will be used.
+   * @default{ hours: 1, minutes: 5, seconds: 5 }
+   */
+  timeSteps?: TimeStepOptions;
+}
+type UseTimeRangePickerDefaultizedProps<Props extends BaseTimeRangePickerProps> = LocalizedComponent<Omit<DefaultizedProps<Props, 'views' | 'openTo' | 'ampm' | keyof BaseTimeValidationProps>, 'views'>> & {
+  shouldRenderTimeInASingleColumn: boolean;
+  views: readonly TimeViewWithMeridiem[];
+};
+export declare function useTimeRangePickerDefaultizedProps<Props extends BaseTimeRangePickerProps>(props: Props, name: string): UseTimeRangePickerDefaultizedProps<Props>;
+export {};

package/modern/TimeRangePicker/shared.js

@@ -0,0 +1,62 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useThemeProps } from '@mui/material/styles';
+import { useUtils, applyDefaultViewProps, resolveTimeViewsResponse } from '@mui/x-date-pickers/internals';
+import { TimeRangePickerToolbar } from "./TimeRangePickerToolbar.js";
+import { TimeRangePickerTabs } from "./TimeRangePickerTabs.js";
+export function useTimeRangePickerDefaultizedProps(props, name) {
+  const utils = useUtils();
+  const themeProps = useThemeProps({
+    props,
+    name
+  });
+  const ampm = themeProps.ampm ?? utils.is12HourCycleInCurrentLocale();
+  const {
+    openTo,
+    views: defaultViews
+  } = applyDefaultViewProps({
+    views: themeProps.views,
+    openTo: themeProps.openTo,
+    defaultViews: ['hours', 'minutes'],
+    defaultOpenTo: 'hours'
+  });
+  const localeText = React.useMemo(() => {
+    if (themeProps.localeText?.toolbarTitle == null) {
+      return themeProps.localeText;
+    }
+    return _extends({}, themeProps.localeText, {
+      timeRangePickerToolbarTitle: themeProps.localeText.toolbarTitle
+    });
+  }, [themeProps.localeText]);
+  const {
+    shouldRenderTimeInASingleColumn,
+    thresholdToRenderTimeInASingleColumn,
+    views,
+    timeSteps
+  } = resolveTimeViewsResponse({
+    thresholdToRenderTimeInASingleColumn: themeProps.thresholdToRenderTimeInASingleColumn,
+    ampm,
+    timeSteps: themeProps.timeSteps,
+    views: defaultViews
+  });
+  return _extends({}, themeProps, {
+    localeText,
+    timeSteps,
+    openTo,
+    shouldRenderTimeInASingleColumn,
+    thresholdToRenderTimeInASingleColumn,
+    views,
+    ampm,
+    disableFuture: themeProps.disableFuture ?? false,
+    disablePast: themeProps.disablePast ?? false,
+    slots: _extends({
+      tabs: TimeRangePickerTabs,
+      toolbar: TimeRangePickerToolbar
+    }, themeProps.slots),
+    slotProps: _extends({}, themeProps.slotProps, {
+      toolbar: _extends({
+        ampm
+      }, themeProps.slotProps?.toolbar)
+    })
+  });
+}

package/modern/TimeRangePicker/timeRangePickerTabsClasses.d.ts

@@ -0,0 +1,9 @@
+export interface TimeRangePickerTabsClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the tab element. */
+  tab: string;
+}
+export type TimeRangePickerTabsClassKey = keyof TimeRangePickerTabsClasses;
+export declare function getTimeRangePickerTabsUtilityClass(slot: string): string;
+export declare const timeRangePickerTabsClasses: TimeRangePickerTabsClasses;

package/modern/TimeRangePicker/timeRangePickerTabsClasses.js

@@ -0,0 +1,5 @@
+import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+export function getTimeRangePickerTabsUtilityClass(slot) {
+  return generateUtilityClass('MuiTimeRangePickerTabs', slot);
+}
+export const timeRangePickerTabsClasses = generateUtilityClasses('MuiTimeRangePickerTabs', ['root', 'tab']);

package/modern/TimeRangePicker/timeRangePickerToolbarClasses.d.ts

@@ -0,0 +1,13 @@
+export interface TimeRangePickerToolbarClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the container element. */
+  container: string;
+  /** Styles applied to the separator element. */
+  separator: string;
+  /** Styles applied to the time container element. */
+  timeContainer: string;
+}
+export type TimeRangePickerToolbarClassKey = keyof TimeRangePickerToolbarClasses;
+export declare function getTimeRangePickerToolbarUtilityClass(slot: string): string;
+export declare const timeRangePickerToolbarClasses: TimeRangePickerToolbarClasses;

package/modern/TimeRangePicker/timeRangePickerToolbarClasses.js

@@ -0,0 +1,5 @@
+import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+export function getTimeRangePickerToolbarUtilityClass(slot) {
+  return generateUtilityClass('MuiTimeRangePickerToolbar', slot);
+}
+export const timeRangePickerToolbarClasses = generateUtilityClasses('MuiTimeRangePickerToolbar', ['root', 'container', 'separator', 'timeContainer']);

package/modern/dateRangeViewRenderers/dateRangeViewRenderers.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
+import { DateRangeCalendarProps } from "../DateRangeCalendar/index.js";
+export interface DateRangeViewRendererProps<TView extends DateOrTimeViewWithMeridiem> extends Omit<DateRangeCalendarProps, 'views' | 'onRangePositionChange' | 'rangePosition' | 'defaultRangePosition'> {
+  views: readonly TView[];
+}
+/**
+ * We don't pass all the props down to `DateRangeCalendar`,
+ * because otherwise some unwanted props would be passed to the HTML element.
+ */
+export declare const renderDateRangeViewCalendar: ({
+  views,
+  view,
+  onViewChange,
+  focusedView,
+  onFocusedViewChange,
+  value,
+  defaultValue,
+  referenceDate,
+  onChange,
+  className,
+  classes,
+  disableFuture,
+  disablePast,
+  minDate,
+  maxDate,
+  shouldDisableDate,
+  reduceAnimations,
+  onMonthChange,
+  calendars,
+  currentMonthCalendarPosition,
+  slots,
+  slotProps,
+  loading,
+  renderLoading,
+  disableHighlightToday,
+  readOnly,
+  disabled,
+  showDaysOutsideCurrentMonth,
+  dayOfWeekFormatter,
+  disableAutoMonthSwitching,
+  sx,
+  autoFocus,
+  fixedWeekNumber,
+  disableDragEditing,
+  displayWeekNumber,
+  timezone,
+  availableRangePositions
+}: DateRangeViewRendererProps<"day">) => React.JSX.Element;

package/modern/dateRangeViewRenderers/dateRangeViewRenderers.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { isDatePickerView } from '@mui/x-date-pickers/internals';
 import { DateRangeCalendar } from "../DateRangeCalendar/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -6,6 +7,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * because otherwise some unwanted props would be passed to the HTML element.
  */
 export const renderDateRangeViewCalendar = ({
+  views,
+  view,
+  onViewChange,
+  focusedView,
+  onFocusedViewChange,
   value,
   defaultValue,
   referenceDate,
@@ -37,11 +43,13 @@ export const renderDateRangeViewCalendar = ({
   disableDragEditing,
   displayWeekNumber,
   timezone,
-  availableRangePositions,
-  views,
-  view,
-  onViewChange
+  availableRangePositions
 }) => /*#__PURE__*/_jsx(DateRangeCalendar, {
+  view: view,
+  views: views,
+  onViewChange: onViewChange,
+  focusedView: focusedView && isDatePickerView(focusedView) ? focusedView : null,
+  onFocusedViewChange: onFocusedViewChange,
   value: value,
   defaultValue: defaultValue,
   referenceDate: referenceDate,
@@ -73,8 +81,5 @@ export const renderDateRangeViewCalendar = ({
   disableDragEditing: disableDragEditing,
   displayWeekNumber: displayWeekNumber,
   timezone: timezone,
-  availableRangePositions: availableRangePositions,
-  view: view,
-  views: views,
-  onViewChange: onViewChange
+  availableRangePositions: availableRangePositions
 });

package/modern/dateRangeViewRenderers/index.d.ts

@@ -0,0 +1,2 @@
+export { renderDateRangeViewCalendar } from "./dateRangeViewRenderers.js";
+export type { DateRangeViewRendererProps } from './dateRangeViewRenderers';

package/modern/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { usePickerRangePositionContext } from "./usePickerRangePositionContext.js";
+export { useMultiInputRangeField as unstable_useMultiInputRangeField } from "./useMultiInputRangeField/index.js";
+export type { UseMultiInputRangeFieldTextFieldProps } from './useMultiInputRangeField';

package/modern/hooks/useMultiInputRangeField/index.d.ts

@@ -0,0 +1,2 @@
+export { useMultiInputRangeField } from "./useMultiInputRangeField.js";
+export type { UseMultiInputRangeFieldTextFieldProps } from './useMultiInputRangeField';

package/modern/hooks/useMultiInputRangeField/useMultiInputRangeField.d.ts

@@ -0,0 +1,72 @@
+import { PickerManagerEnableAccessibleFieldDOMStructure, PickerManagerFieldInternalProps, UseFieldReturnValue } from '@mui/x-date-pickers/internals';
+import { UseTextFieldBaseForwardedProps } from "./useTextFieldProps.js";
+import { PickerAnyRangeManager } from "../../internals/models/managers.js";
+import { UseMultiInputRangeFieldRootPropsReturnValue } from "./useMultiInputRangeFieldRootProps.js";
+/**
+ * Basic example:
+ *
+ * ```tsx
+ * import Box from '@mui/material/Box';
+ * import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
+ * import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
+ * import { useDateRangeManager } from '@mui/x-date-pickers-pro/managers';
+ *
+ * function MultiInputField(props) {
+ *   const manager = useDateRangeManager();
+ *   const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
+ *   const response = useMultiInputRangeField({
+ *     manager,
+ *     internalProps,
+ *     startTextFieldProps: {},
+ *     endTextFieldProps: {},
+ *     rootProps: forwardedProps,
+ *   });
+ *
+ *   return (
+ *     <Box {...response.root}>
+ *       <PickersTextField {...response.startTextField} />
+ *       <span>{' – '}</span>
+ *       <PickersTextField {...response.endTextField} />
+ *     </Box>
+ *   );
+ * }
+ * ```
+ *
+ * @param {UseMultiInputRangeFieldParameters<TManager, TTextFieldProps>} parameters The parameters of the hook.
+ * @param {TManager} parameters.manager The manager of the field.
+ * @param {PickerManagerFieldInternalProps<TManager>} parameters.internalProps The internal props of the field.
+ * @param {TTextFieldProps} parameters.startForwardedProps The forwarded props of the start field.
+ * @param {TTextFieldProps} parameters.endForwardedProps The forwarded props of the end field.
+ * @returns {UseMultiInputRangeFieldReturnValue<TManager, TTextFieldProps>} The props to pass to the start and the end components.
+ */
+export declare function useMultiInputRangeField<TManager extends PickerAnyRangeManager, TTextFieldProps extends UseTextFieldBaseForwardedProps, TRootProps extends {
+  [key: string]: any;
+}>(parameters: UseMultiInputRangeFieldParameters<TManager, TTextFieldProps, TRootProps>): UseMultiInputRangeFieldReturnValue<TManager, TTextFieldProps, TRootProps>;
+interface UseMultiInputRangeFieldParameters<TManager extends PickerAnyRangeManager, TTextFieldProps extends {
+  [key: string]: any;
+}, TRootProps extends {
+  [key: string]: any;
+}> {
+  manager: TManager;
+  internalProps: PickerManagerFieldInternalProps<TManager>;
+  rootProps: TRootProps;
+  startTextFieldProps: TTextFieldProps;
+  endTextFieldProps: TTextFieldProps;
+}
+interface UseMultiInputRangeFieldReturnValue<TManager extends PickerAnyRangeManager, TTextFieldProps extends {
+  [key: string]: any;
+}, TRootProps extends {
+  [key: string]: any;
+}> {
+  root: UseMultiInputRangeFieldRootPropsReturnValue<TRootProps>;
+  startTextField: UseMultiInputRangeFieldTextFieldProps<PickerManagerEnableAccessibleFieldDOMStructure<TManager>, TTextFieldProps>;
+  endTextField: UseMultiInputRangeFieldTextFieldProps<PickerManagerEnableAccessibleFieldDOMStructure<TManager>, TTextFieldProps>;
+  enableAccessibleFieldDOMStructure: PickerManagerEnableAccessibleFieldDOMStructure<TManager>;
+}
+export type UseMultiInputRangeFieldTextFieldProps<TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseTextFieldBaseForwardedProps> = Omit<UseFieldReturnValue<TEnableAccessibleFieldDOMStructure, TForwardedProps & {
+  onKeyDown: React.KeyboardEventHandler;
+  onClick: React.MouseEventHandler;
+  onFocus: React.FocusEventHandler;
+  id: string;
+}>, 'onClear' | 'clearable' | 'openPickerAriaLabel'>;
+export {};