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

package/modern/DateTimeRangePicker/index.d.ts

@@ -0,0 +1,10 @@
+export { DateTimeRangePicker } from "./DateTimeRangePicker.js";
+export type { DateTimeRangePickerProps, DateTimeRangePickerSlots, DateTimeRangePickerSlotProps, DateTimeRangePickerFieldProps } from './DateTimeRangePicker.types';
+export { DateTimeRangePickerTabs } from "./DateTimeRangePickerTabs.js";
+export type { ExportedDateTimeRangePickerTabsProps } from './DateTimeRangePickerTabs';
+export { getDateTimeRangePickerTabsUtilityClass, dateTimeRangePickerTabsClasses } from "./dateTimeRangePickerTabsClasses.js";
+export type { DateTimeRangePickerTabsClasses, DateTimeRangePickerTabsClassKey } from './dateTimeRangePickerTabsClasses';
+export { DateTimeRangePickerToolbar } from "./DateTimeRangePickerToolbar.js";
+export type { DateTimeRangePickerToolbarProps } from './DateTimeRangePickerToolbar';
+export { getDateTimeRangePickerToolbarUtilityClass, dateTimeRangePickerToolbarClasses } from "./dateTimeRangePickerToolbarClasses.js";
+export type { DateTimeRangePickerToolbarClasses, DateTimeRangePickerToolbarClassKey } from './dateTimeRangePickerToolbarClasses';

package/modern/DateTimeRangePicker/shared.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { DefaultizedProps } from '@mui/x-internals/types';
+import { LocalizedComponent } from '@mui/x-date-pickers/locales';
+import { BasePickerInputProps, PickerViewRendererLookup, BaseClockProps, DigitalTimePickerProps, TimeViewWithMeridiem, UseViewsOptions, DateOrTimeViewWithMeridiem, PickerRangeValue } from '@mui/x-date-pickers/internals';
+import { TimeViewRendererProps } from '@mui/x-date-pickers/timeViewRenderers';
+import { DigitalClockSlots, DigitalClockSlotProps } from '@mui/x-date-pickers/DigitalClock';
+import { MultiSectionDigitalClockSlots, MultiSectionDigitalClockSlotProps } from '@mui/x-date-pickers/MultiSectionDigitalClock';
+import { DateTimeRangeValidationError } from "../models/index.js";
+import { DateTimeRangePickerView, DateTimeRangePickerViewExternal } from "../internals/models/index.js";
+import { DateRangeCalendarSlots, DateRangeCalendarSlotProps, ExportedDateRangeCalendarProps } from "../DateRangeCalendar/index.js";
+import { DateTimeRangePickerToolbarProps, ExportedDateTimeRangePickerToolbarProps } from "./DateTimeRangePickerToolbar.js";
+import { DateRangeViewRendererProps } from "../dateRangeViewRenderers/index.js";
+import { DateTimeRangePickerTabsProps, ExportedDateTimeRangePickerTabsProps } from "./DateTimeRangePickerTabs.js";
+import { ExportedValidateDateTimeRangeProps, ValidateDateTimeRangePropsToDefault } from "../validation/validateDateTimeRange.js";
+export interface BaseDateTimeRangePickerSlots extends DateRangeCalendarSlots, DigitalClockSlots, MultiSectionDigitalClockSlots {
+  /**
+   * Tabs enabling toggling between date and time pickers.
+   * @default DateTimeRangePickerTabs
+   */
+  tabs?: React.ElementType<DateTimeRangePickerTabsProps>;
+  /**
+   * Custom component for the toolbar rendered above the views.
+   * @default DateTimeRangePickerToolbar
+   */
+  toolbar?: React.JSXElementConstructor<DateTimeRangePickerToolbarProps>;
+}
+export interface BaseDateTimeRangePickerSlotProps extends DateRangeCalendarSlotProps, DigitalClockSlotProps, MultiSectionDigitalClockSlotProps {
+  /**
+   * Props passed down to the tabs component.
+   */
+  tabs?: ExportedDateTimeRangePickerTabsProps;
+  /**
+   * Props passed down to the toolbar component.
+   */
+  toolbar?: ExportedDateTimeRangePickerToolbarProps;
+}
+type DateTimeRangePickerRenderers<TView extends DateOrTimeViewWithMeridiem> = PickerViewRendererLookup<PickerRangeValue, TView, Omit<DateRangeViewRendererProps<'day'>, 'view' | 'slots' | 'slotProps'> & Omit<TimeViewRendererProps<TimeViewWithMeridiem, BaseClockProps<TimeViewWithMeridiem>>, 'view' | 'slots' | 'slotProps'> & {
+  view: TView;
+}>;
+export interface BaseDateTimeRangePickerProps extends Omit<BasePickerInputProps<PickerRangeValue, DateTimeRangePickerView, DateTimeRangeValidationError>, 'orientation' | 'views' | 'openTo'>, ExportedDateRangeCalendarProps, ExportedValidateDateTimeRangeProps, DigitalTimePickerProps, Partial<Pick<UseViewsOptions<PickerRangeValue, DateTimeRangePickerViewExternal>, 'openTo' | 'views'>> {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BaseDateTimeRangePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BaseDateTimeRangePickerSlotProps;
+  /**
+   * Define custom view renderers for each section.
+   * If `null`, the section will only have field editing.
+   * If `undefined`, internally defined view will be used.
+   */
+  viewRenderers?: Partial<DateTimeRangePickerRenderers<DateTimeRangePickerView>>;
+}
+type UseDateTimeRangePickerDefaultizedProps<Props extends BaseDateTimeRangePickerProps> = LocalizedComponent<Omit<DefaultizedProps<Props, 'openTo' | 'ampm' | ValidateDateTimeRangePropsToDefault>, 'views'>> & {
+  shouldRenderTimeInASingleColumn: boolean;
+  views: readonly DateTimeRangePickerView[];
+};
+export declare function useDateTimeRangePickerDefaultizedProps<Props extends BaseDateTimeRangePickerProps>(props: Props, name: string): UseDateTimeRangePickerDefaultizedProps<Props>;
+export {};

package/modern/DesktopDateRangePicker/DesktopDateRangePicker.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { DesktopDateRangePickerProps } from "./DesktopDateRangePicker.types.js";
+type DesktopDateRangePickerComponent = (<TEnableAccessibleFieldDOMStructure extends boolean = true>(props: DesktopDateRangePickerProps<TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+  propTypes?: any;
+};
+/**
+ * Demos:
+ *
+ * - [DateRangePicker](https://mui.com/x/react-date-pickers/date-range-picker/)
+ * - [Validation](https://mui.com/x/react-date-pickers/validation/)
+ *
+ * API:
+ *
+ * - [DesktopDateRangePicker API](https://mui.com/x/api/date-pickers/desktop-date-range-picker/)
+ */
+declare const DesktopDateRangePicker: DesktopDateRangePickerComponent;
+export { DesktopDateRangePicker };

package/modern/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -10,7 +10,7 @@ import { refType } from '@mui/utils';
 import { rangeValueManager } from "../internals/utils/valueManagers.js";
 import { useDateRangePickerDefaultizedProps } from "../DateRangePicker/shared.js";
 import { renderDateRangeViewCalendar } from "../dateRangeViewRenderers/index.js";
-import { MultiInputDateRangeField } from "../MultiInputDateRangeField/index.js";
+import { SingleInputDateRangeField } from "../SingleInputDateRangeField/index.js";
 import { useDesktopRangePicker } from "../internals/hooks/useDesktopRangePicker/index.js";
 import { validateDateRange } from "../validation/index.js";
 const emptyActions = [];
@@ -41,12 +41,10 @@ const DesktopDateRangePicker = /*#__PURE__*/React.forwardRef(function DesktopDat
     views: ['day'],
     openTo: 'day',
     slots: _extends({
-      field: MultiInputDateRangeField
+      field: SingleInputDateRangeField
     }, defaultizedProps.slots),
     slotProps: _extends({}, defaultizedProps.slotProps, {
-      field: ownerState => _extends({}, resolveComponentProps(defaultizedProps.slotProps?.field, ownerState), extractValidationProps(defaultizedProps), {
-        ref
-      }),
+      field: ownerState => _extends({}, resolveComponentProps(defaultizedProps.slotProps?.field, ownerState), extractValidationProps(defaultizedProps)),
       toolbar: _extends({
         hidden: true
       }, defaultizedProps.slotProps?.toolbar),
@@ -58,6 +56,7 @@ const DesktopDateRangePicker = /*#__PURE__*/React.forwardRef(function DesktopDat
   const {
     renderPicker
   } = useDesktopRangePicker({
+    ref,
     props,
     valueManager: rangeValueManager,
     valueType: 'date',
@@ -138,7 +137,8 @@ DesktopDateRangePicker.propTypes = {
    */
   disableHighlightToday: PropTypes.bool,
   /**
-   * If `true`, the open picker button will not be rendered (renders only the field).
+   * 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,
@@ -173,12 +173,10 @@ DesktopDateRangePicker.propTypes = {
   formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Pass a ref to the `input` element.
-   * Ignored if the field has several inputs.
    */
   inputRef: refType,
   /**
    * The label content.
-   * Ignored if the field has several inputs.
    */
   label: PropTypes.node,
   /**
@@ -204,7 +202,6 @@ DesktopDateRangePicker.propTypes = {
   minDate: PropTypes.object,
   /**
    * Name attribute used by the `input` element in the Field.
-   * Ignored if the field has several inputs.
    */
   name: PropTypes.string,
   /**

package/modern/DesktopDateRangePicker/DesktopDateRangePicker.types.d.ts

@@ -0,0 +1,27 @@
+import { MakeOptional } from '@mui/x-internals/types';
+import { UseDesktopRangePickerSlots, UseDesktopRangePickerSlotProps, DesktopRangeOnlyPickerProps } from "../internals/hooks/useDesktopRangePicker/index.js";
+import { BaseDateRangePickerProps, BaseDateRangePickerSlots, BaseDateRangePickerSlotProps } from "../DateRangePicker/shared.js";
+export interface DesktopDateRangePickerSlots extends BaseDateRangePickerSlots, MakeOptional<UseDesktopRangePickerSlots, 'field'> {}
+export interface DesktopDateRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateRangePickerSlotProps, Omit<UseDesktopRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>, 'tabs' | 'toolbar'> {}
+export interface DesktopDateRangePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends BaseDateRangePickerProps, DesktopRangeOnlyPickerProps {
+  /**
+   * The number of calendars to render on **desktop**.
+   * @default 2
+   */
+  calendars?: 1 | 2 | 3;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: DesktopDateRangePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: DesktopDateRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
+  /**
+   * If `true`, the Picker will close after submitting the full date.
+   * @default true
+   */
+  closeOnSelect?: boolean;
+}

package/modern/DesktopDateRangePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { DesktopDateRangePicker } from "./DesktopDateRangePicker.js";
+export type { DesktopDateRangePickerProps, DesktopDateRangePickerSlots, DesktopDateRangePickerSlotProps } from './DesktopDateRangePicker.types';

package/modern/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { DesktopDateTimeRangePickerProps } from "./DesktopDateTimeRangePicker.types.js";
+type DesktopDateRangePickerComponent = (<TEnableAccessibleFieldDOMStructure extends boolean = true>(props: DesktopDateTimeRangePickerProps<TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+  propTypes?: any;
+};
+/**
+ * Demos:
+ *
+ * - [DateTimeRangePicker](https://mui.com/x/react-date-pickers/date-time-range-picker/)
+ * - [Validation](https://mui.com/x/react-date-pickers/validation/)
+ *
+ * API:
+ *
+ * - [DesktopDateTimeRangePicker API](https://mui.com/x/api/date-pickers/desktop-date-time-range-picker/)
+ */
+declare const DesktopDateTimeRangePicker: DesktopDateRangePickerComponent;
+export { DesktopDateTimeRangePicker };

package/modern/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js

@@ -19,7 +19,7 @@ import { renderDateRangeViewCalendar } from "../dateRangeViewRenderers/index.js"
 import { useDesktopRangePicker } from "../internals/hooks/useDesktopRangePicker/index.js";
 import { validateDateTimeRange } from "../validation/index.js";
 import { useDateTimeRangePickerDefaultizedProps } from "../DateTimeRangePicker/shared.js";
-import { MultiInputDateTimeRangeField } from "../MultiInputDateTimeRangeField/index.js";
+import { SingleInputDateTimeRangeField } from "../SingleInputDateTimeRangeField/index.js";
 import { DateTimeRangePickerTimeWrapper } from "../DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js";
 import { RANGE_VIEW_HEIGHT } from "../internals/constants/dimensions.js";
 import { usePickerRangePositionContext } from "../hooks/index.js";
@@ -107,13 +107,11 @@ const DesktopDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function Deskto
     ampmInClock: true,
     calendars: defaultizedProps.calendars ?? 1,
     slots: _extends({
-      field: MultiInputDateTimeRangeField,
+      field: SingleInputDateTimeRangeField,
       layout: DesktopDateTimePickerLayout
     }, defaultizedProps.slots),
     slotProps: _extends({}, defaultizedProps.slotProps, {
-      field: ownerState => _extends({}, resolveComponentProps(defaultizedProps.slotProps?.field, ownerState), extractValidationProps(defaultizedProps), {
-        ref
-      }),
+      field: ownerState => _extends({}, resolveComponentProps(defaultizedProps.slotProps?.field, ownerState), extractValidationProps(defaultizedProps)),
       tabs: _extends({
         hidden: true
       }, defaultizedProps.slotProps?.tabs),
@@ -125,6 +123,7 @@ const DesktopDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function Deskto
   const {
     renderPicker
   } = useDesktopRangePicker({
+    ref,
     props,
     valueManager: rangeValueManager,
     valueType: 'date-time',
@@ -216,7 +215,8 @@ DesktopDateTimeRangePicker.propTypes = {
    */
   disableIgnoringDatePartForTimeValidation: PropTypes.bool,
   /**
-   * If `true`, the open picker button will not be rendered (renders only the field).
+   * 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,
@@ -251,12 +251,10 @@ DesktopDateTimeRangePicker.propTypes = {
   formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Pass a ref to the `input` element.
-   * Ignored if the field has several inputs.
    */
   inputRef: refType,
   /**
    * The label content.
-   * Ignored if the field has several inputs.
    */
   label: PropTypes.node,
   /**
@@ -305,7 +303,6 @@ DesktopDateTimeRangePicker.propTypes = {
   minutesStep: PropTypes.number,
   /**
    * Name attribute used by the `input` element in the Field.
-   * Ignored if the field has several inputs.
    */
   name: PropTypes.string,
   /**

package/modern/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.types.d.ts

@@ -0,0 +1,22 @@
+import { MakeOptional } from '@mui/x-internals/types';
+import { UseDesktopRangePickerSlots, UseDesktopRangePickerSlotProps, DesktopRangeOnlyPickerProps } from "../internals/hooks/useDesktopRangePicker/index.js";
+import { BaseDateTimeRangePickerProps, BaseDateTimeRangePickerSlots, BaseDateTimeRangePickerSlotProps } from "../DateTimeRangePicker/shared.js";
+export interface DesktopDateTimeRangePickerSlots extends BaseDateTimeRangePickerSlots, MakeOptional<UseDesktopRangePickerSlots, 'field'> {}
+export interface DesktopDateTimeRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateTimeRangePickerSlotProps, Omit<UseDesktopRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>, 'tabs' | 'toolbar'> {}
+export interface DesktopDateTimeRangePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends BaseDateTimeRangePickerProps, DesktopRangeOnlyPickerProps {
+  /**
+   * The number of calendars to render on **desktop**.
+   * @default 1
+   */
+  calendars?: 1 | 2 | 3;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: DesktopDateTimeRangePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: DesktopDateTimeRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
+}

package/modern/DesktopDateTimeRangePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { DesktopDateTimeRangePicker } from "./DesktopDateTimeRangePicker.js";
+export type { DesktopDateTimeRangePickerProps, DesktopDateTimeRangePickerSlots, DesktopDateTimeRangePickerSlotProps } from './DesktopDateTimeRangePicker.types';

package/modern/DesktopTimeRangePicker/DesktopTimeRangePicker.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { DesktopTimeRangePickerProps } from "./DesktopTimeRangePicker.types.js";
+type DesktopTimeRangePickerComponent = (<TEnableAccessibleFieldDOMStructure extends boolean = true>(props: DesktopTimeRangePickerProps<TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+  propTypes?: any;
+};
+declare const DesktopTimeRangePicker: DesktopTimeRangePickerComponent;
+export { DesktopTimeRangePicker };