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

package/DateRangeCalendar/DateRangeCalendar.types.d.ts

@@ -5,109 +5,109 @@ import { Theme } from '@mui/material/styles';
 import { DefaultizedProps } from '@mui/x-internals/types';
 import { PickerOwnerState, PickerValidDate, TimezoneProps } from '@mui/x-date-pickers/models';
 import { PickersCalendarHeader, PickersCalendarHeaderSlots, PickersCalendarHeaderSlotProps } from '@mui/x-date-pickers/PickersCalendarHeader';
-import { PickerDayOwnerState } from '@mui/x-date-pickers/DateCalendar';
+import { PickerDayOwnerState } from '@mui/x-date-pickers/PickersDay';
 import { BaseDateValidationProps, ExportedDayCalendarProps, DayCalendarSlots, DayCalendarSlotProps, PickersArrowSwitcherSlots, PickersArrowSwitcherSlotProps, ExportedUseViewsOptions, PickerRangeValue, FormProps } from '@mui/x-date-pickers/internals';
-import { RangePosition } from '../models';
-import { DateRangeCalendarClasses } from './dateRangeCalendarClasses';
-import { DateRangePickerDay, DateRangePickerDayProps } from '../DateRangePickerDay';
-import { UseRangePositionProps } from '../internals/hooks/useRangePosition';
-import { PickersRangeCalendarHeaderProps } from '../PickersRangeCalendarHeader';
-import { ExportedValidateDateRangeProps } from '../validation/validateDateRange';
+import { RangePosition } from "../models/index.js";
+import { DateRangeCalendarClasses } from "./dateRangeCalendarClasses.js";
+import { DateRangePickerDay, DateRangePickerDayProps } from "../DateRangePickerDay/index.js";
+import { UseRangePositionProps } from "../internals/hooks/useRangePosition.js";
+import { PickersRangeCalendarHeaderProps } from "../PickersRangeCalendarHeader/index.js";
+import { ExportedValidateDateRangeProps } from "../validation/validateDateRange.js";
 export interface DateRangeCalendarSlots extends PickersArrowSwitcherSlots, Omit<DayCalendarSlots, 'day'>, PickersCalendarHeaderSlots {
-    /**
-     * Custom component for calendar header.
-     * Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component.
-     * @default PickersCalendarHeader
-     */
-    calendarHeader?: React.ElementType<PickersRangeCalendarHeaderProps>;
-    /**
-     * Custom component for day in range pickers.
-     * Check the [DateRangePickersDay](https://mui.com/x/api/date-pickers/date-range-picker-day/) component.
-     * @default DateRangePickersDay
-     */
-    day?: React.ElementType<DateRangePickerDayProps>;
+  /**
+   * Custom component for calendar header.
+   * Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component.
+   * @default PickersCalendarHeader
+   */
+  calendarHeader?: React.ElementType<PickersRangeCalendarHeaderProps>;
+  /**
+   * Custom component for day in range pickers.
+   * Check the [DateRangePickersDay](https://mui.com/x/api/date-pickers/date-range-picker-day/) component.
+   * @default DateRangePickersDay
+   */
+  day?: React.ElementType<DateRangePickerDayProps>;
 }
 export interface DateRangeCalendarSlotProps extends PickersArrowSwitcherSlotProps, Omit<DayCalendarSlotProps, 'day'>, PickersCalendarHeaderSlotProps {
-    calendarHeader?: SlotComponentProps<typeof PickersCalendarHeader, {}, DateRangeCalendarOwnerState>;
-    day?: SlotComponentProps<typeof DateRangePickerDay, {}, PickerDayOwnerState>;
+  calendarHeader?: SlotComponentProps<typeof PickersCalendarHeader, {}, DateRangeCalendarOwnerState>;
+  day?: SlotComponentProps<typeof DateRangePickerDay, {}, PickerDayOwnerState>;
 }
 export interface ExportedDateRangeCalendarProps extends ExportedDayCalendarProps, ExportedValidateDateRangeProps, TimezoneProps, FormProps {
-    /**
-     * If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.
-     * @default false
-     */
-    disableAutoMonthSwitching?: boolean;
-    /**
-     * If `true`, disable heavy animations.
-     * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
-     */
-    reduceAnimations?: boolean;
-    /**
-     * Callback fired on month change.
-     * @param {PickerValidDate} month The new month.
-     */
-    onMonthChange?: (month: PickerValidDate) => void;
-    /**
-     * Position the current month is rendered in.
-     * @default 1
-     */
-    currentMonthCalendarPosition?: 1 | 2 | 3;
-    /**
-     * If `true`, editing dates by dragging is disabled.
-     * @default false
-     */
-    disableDragEditing?: boolean;
+  /**
+   * If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.
+   * @default false
+   */
+  disableAutoMonthSwitching?: boolean;
+  /**
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
+   */
+  reduceAnimations?: boolean;
+  /**
+   * Callback fired on month change.
+   * @param {PickerValidDate} month The new month.
+   */
+  onMonthChange?: (month: PickerValidDate) => void;
+  /**
+   * Position the current month is rendered in.
+   * @default 1
+   */
+  currentMonthCalendarPosition?: 1 | 2 | 3;
+  /**
+   * If `true`, editing dates by dragging is disabled.
+   * @default false
+   */
+  disableDragEditing?: boolean;
 }
 export interface DateRangeCalendarProps extends ExportedDateRangeCalendarProps, UseRangePositionProps, ExportedUseViewsOptions<PickerRangeValue, 'day'> {
-    /**
-     * The selected value.
-     * Used when the component is controlled.
-     */
-    value?: PickerRangeValue;
-    /**
-     * The default selected value.
-     * Used when the component is not controlled.
-     */
-    defaultValue?: PickerRangeValue;
-    /**
-     * The date used to generate the new value when both `value` and `defaultValue` are empty.
-     * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`.
-     */
-    referenceDate?: PickerValidDate;
-    /**
-     * The number of calendars to render.
-     * @default 2
-     */
-    calendars?: 1 | 2 | 3;
-    className?: string;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<DateRangeCalendarClasses>;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * Overridable component slots.
-     * @default {}
-     */
-    slots?: DateRangeCalendarSlots;
-    /**
-     * The props used for each component slot.
-     * @default {}
-     */
-    slotProps?: DateRangeCalendarSlotProps;
-    /**
-     * Range positions available for selection.
-     * This list is checked against when checking if a next range position can be selected.
-     *
-     * Used on Date Time Range pickers with current `rangePosition` to force a `finish` selection after just one range position selection.
-     * @default ['start', 'end']
-     */
-    availableRangePositions?: RangePosition[];
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: PickerRangeValue;
+  /**
+   * The default selected value.
+   * Used when the component is not controlled.
+   */
+  defaultValue?: PickerRangeValue;
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`.
+   */
+  referenceDate?: PickerValidDate;
+  /**
+   * The number of calendars to render.
+   * @default 2
+   */
+  calendars?: 1 | 2 | 3;
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<DateRangeCalendarClasses>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: DateRangeCalendarSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: DateRangeCalendarSlotProps;
+  /**
+   * Range positions available for selection.
+   * This list is checked against when checking if a next range position can be selected.
+   *
+   * Used on Date Time Range pickers with current `rangePosition` to force a `finish` selection after just one range position selection.
+   * @default ['start', 'end']
+   */
+  availableRangePositions?: RangePosition[];
 }
 export interface DateRangeCalendarOwnerState extends PickerOwnerState {
-    isDraggingDay: boolean;
+  isDraggingDay: boolean;
 }
-export type DateRangeCalendarDefaultizedProps = DefaultizedProps<DateRangeCalendarProps, 'views' | 'openTo' | 'reduceAnimations' | 'calendars' | 'disableDragEditing' | 'availableRangePositions' | keyof BaseDateValidationProps>;
+export type DateRangeCalendarDefaultizedProps = DefaultizedProps<DateRangeCalendarProps, 'views' | 'openTo' | 'reduceAnimations' | 'calendars' | 'disableDragEditing' | 'availableRangePositions' | keyof BaseDateValidationProps>;

package/DateRangeCalendar/DateRangeCalendar.types.js

@@ -1 +1,5 @@
-export {};
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/DateRangeCalendar/dateRangeCalendarClasses.d.ts

@@ -1,11 +1,11 @@
 export interface DateRangeCalendarClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the container of a month. */
-    monthContainer: string;
-    /** Styles applied to the day calendar container when dragging */
-    dayDragging: string;
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the container of a month. */
+  monthContainer: string;
+  /** Styles applied to the day calendar container when dragging */
+  dayDragging: string;
 }
 export type DateRangeCalendarClassKey = keyof DateRangeCalendarClasses;
 export declare const getDateRangeCalendarUtilityClass: (slot: string) => string;
-export declare const dateRangeCalendarClasses: DateRangeCalendarClasses;
+export declare const dateRangeCalendarClasses: DateRangeCalendarClasses;

package/DateRangeCalendar/dateRangeCalendarClasses.js

@@ -1,3 +1,10 @@
-import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-export const getDateRangeCalendarUtilityClass = slot => generateUtilityClass('MuiDateRangeCalendar', slot);
-export const dateRangeCalendarClasses = generateUtilityClasses('MuiDateRangeCalendar', ['root', 'monthContainer', 'dayDragging']);
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDateRangeCalendarUtilityClass = exports.dateRangeCalendarClasses = void 0;
+var _utils = require("@mui/utils");
+const getDateRangeCalendarUtilityClass = slot => (0, _utils.unstable_generateUtilityClass)('MuiDateRangeCalendar', slot);
+exports.getDateRangeCalendarUtilityClass = getDateRangeCalendarUtilityClass;
+const dateRangeCalendarClasses = exports.dateRangeCalendarClasses = (0, _utils.unstable_generateUtilityClasses)('MuiDateRangeCalendar', ['root', 'monthContainer', 'dayDragging']);

package/DateRangeCalendar/index.d.ts

@@ -1,4 +1,4 @@
-export { DateRangeCalendar } from './DateRangeCalendar';
-export type { DateRangeCalendarProps, DateRangeCalendarSlots, DateRangeCalendarSlotProps, ExportedDateRangeCalendarProps, } from './DateRangeCalendar.types';
-export { getDateRangeCalendarUtilityClass, dateRangeCalendarClasses, } from './dateRangeCalendarClasses';
-export type { DateRangeCalendarClassKey, DateRangeCalendarClasses, } from './dateRangeCalendarClasses';
+export { DateRangeCalendar } from "./DateRangeCalendar.js";
+export type { DateRangeCalendarProps, DateRangeCalendarSlots, DateRangeCalendarSlotProps, ExportedDateRangeCalendarProps } from './DateRangeCalendar.types';
+export { getDateRangeCalendarUtilityClass, dateRangeCalendarClasses } from "./dateRangeCalendarClasses.js";
+export type { DateRangeCalendarClassKey, DateRangeCalendarClasses } from './dateRangeCalendarClasses';

package/DateRangeCalendar/index.js

@@ -1,2 +1,25 @@
-export { DateRangeCalendar } from "./DateRangeCalendar.js";
-export { getDateRangeCalendarUtilityClass, dateRangeCalendarClasses } from "./dateRangeCalendarClasses.js";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DateRangeCalendar", {
+  enumerable: true,
+  get: function () {
+    return _DateRangeCalendar.DateRangeCalendar;
+  }
+});
+Object.defineProperty(exports, "dateRangeCalendarClasses", {
+  enumerable: true,
+  get: function () {
+    return _dateRangeCalendarClasses.dateRangeCalendarClasses;
+  }
+});
+Object.defineProperty(exports, "getDateRangeCalendarUtilityClass", {
+  enumerable: true,
+  get: function () {
+    return _dateRangeCalendarClasses.getDateRangeCalendarUtilityClass;
+  }
+});
+var _DateRangeCalendar = require("./DateRangeCalendar");
+var _dateRangeCalendarClasses = require("./dateRangeCalendarClasses");

package/DateRangeCalendar/useDragRange.d.ts

@@ -1,33 +1,40 @@
 import * as React from 'react';
 import { MuiPickersAdapter, PickersTimezone, PickerValidDate } from '@mui/x-date-pickers/models';
 import { PickerRangeValue } from '@mui/x-date-pickers/internals';
-import { RangePosition } from '../models';
+import { RangePosition } from "../models/index.js";
 interface UseDragRangeParams {
-    disableDragEditing?: boolean;
-    utils: MuiPickersAdapter;
-    setRangeDragDay: (value: PickerValidDate | null) => void;
-    setIsDragging: (value: boolean) => void;
-    isDragging: boolean;
-    onDatePositionChange: (position: RangePosition) => void;
-    onDrop: (newDate: PickerValidDate) => void;
-    dateRange: PickerRangeValue;
-    timezone: PickersTimezone;
+  disableDragEditing?: boolean;
+  utils: MuiPickersAdapter;
+  setRangeDragDay: (value: PickerValidDate | null) => void;
+  setIsDragging: (value: boolean) => void;
+  isDragging: boolean;
+  onDatePositionChange: (position: RangePosition) => void;
+  onDrop: (newDate: PickerValidDate) => void;
+  dateRange: PickerRangeValue;
+  timezone: PickersTimezone;
 }
 interface UseDragRangeEvents {
-    onDragStart?: React.DragEventHandler<HTMLButtonElement>;
-    onDragEnter?: React.DragEventHandler<HTMLButtonElement>;
-    onDragLeave?: React.DragEventHandler<HTMLButtonElement>;
-    onDragOver?: React.DragEventHandler<HTMLButtonElement>;
-    onDragEnd?: React.DragEventHandler<HTMLButtonElement>;
-    onDrop?: React.DragEventHandler<HTMLButtonElement>;
-    onTouchStart?: React.TouchEventHandler<HTMLButtonElement>;
-    onTouchMove?: React.TouchEventHandler<HTMLButtonElement>;
-    onTouchEnd?: React.TouchEventHandler<HTMLButtonElement>;
+  onDragStart?: React.DragEventHandler<HTMLButtonElement>;
+  onDragEnter?: React.DragEventHandler<HTMLButtonElement>;
+  onDragLeave?: React.DragEventHandler<HTMLButtonElement>;
+  onDragOver?: React.DragEventHandler<HTMLButtonElement>;
+  onDragEnd?: React.DragEventHandler<HTMLButtonElement>;
+  onDrop?: React.DragEventHandler<HTMLButtonElement>;
+  onTouchStart?: React.TouchEventHandler<HTMLButtonElement>;
+  onTouchMove?: React.TouchEventHandler<HTMLButtonElement>;
+  onTouchEnd?: React.TouchEventHandler<HTMLButtonElement>;
 }
 interface UseDragRangeResponse extends UseDragRangeEvents {
-    isDragging: boolean;
-    rangeDragDay: PickerValidDate | null;
-    draggingDatePosition: RangePosition | null;
+  isDragging: boolean;
+  rangeDragDay: PickerValidDate | null;
+  draggingDatePosition: RangePosition | null;
 }
-export declare const useDragRange: ({ disableDragEditing, utils, onDatePositionChange, onDrop, dateRange, timezone, }: Omit<UseDragRangeParams, "setRangeDragDay" | "setIsDragging" | "isDragging">) => UseDragRangeResponse;
-export {};
+export declare const useDragRange: ({
+  disableDragEditing,
+  utils,
+  onDatePositionChange,
+  onDrop,
+  dateRange,
+  timezone
+}: Omit<UseDragRangeParams, "setRangeDragDay" | "setIsDragging" | "isDragging">) => UseDragRangeResponse;
+export {};

package/DateRangeCalendar/useDragRange.js

@@ -1,9 +1,16 @@
+"use strict";
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import useEventCallback from '@mui/utils/useEventCallback';
-import { isEndOfRange, isStartOfRange } from "../internals/utils/date-utils.js";
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDragRange = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _dateUtils = require("../internals/utils/date-utils");
 const resolveDateFromTarget = (target, utils, timezone) => {
   const timestampString = target.dataset.timestamp;
   if (!timestampString) {
@@ -64,11 +71,11 @@ const useDragRangeEvents = ({
       return false;
     }
     const shouldInitDragging = !disableDragEditing && !!dateRange[0] && !!dateRange[1];
-    const isSelectedStartDate = isStartOfRange(utils, day, dateRange);
-    const isSelectedEndDate = isEndOfRange(utils, day, dateRange);
+    const isSelectedStartDate = (0, _dateUtils.isStartOfRange)(utils, day, dateRange);
+    const isSelectedEndDate = (0, _dateUtils.isEndOfRange)(utils, day, dateRange);
     return shouldInitDragging && (isSelectedStartDate || isSelectedEndDate);
   };
-  const handleDragStart = useEventCallback(event => {
+  const handleDragStart = (0, _useEventCallback.default)(event => {
     const newDate = resolveDateFromTarget(event.target, utils, timezone);
     if (!isElementDraggable(newDate)) {
       return;
@@ -88,7 +95,7 @@ const useDragRangeEvents = ({
       onDatePositionChange(buttonDataset.position);
     }
   });
-  const handleTouchStart = useEventCallback(event => {
+  const handleTouchStart = (0, _useEventCallback.default)(event => {
     const target = resolveElementFromTouch(event);
     if (!target) {
       return;
@@ -99,7 +106,7 @@ const useDragRangeEvents = ({
     }
     setRangeDragDay(newDate);
   });
-  const handleDragEnter = useEventCallback(event => {
+  const handleDragEnter = (0, _useEventCallback.default)(event => {
     if (!isDragging) {
       return;
     }
@@ -108,7 +115,7 @@ const useDragRangeEvents = ({
     event.dataTransfer.dropEffect = 'move';
     setRangeDragDay(resolveDateFromTarget(event.target, utils, timezone));
   });
-  const handleTouchMove = useEventCallback(event => {
+  const handleTouchMove = (0, _useEventCallback.default)(event => {
     const target = resolveElementFromTouch(event);
     if (!target) {
       return;
@@ -132,14 +139,14 @@ const useDragRangeEvents = ({
       onDatePositionChange(buttonDataset.position);
     }
   });
-  const handleDragLeave = useEventCallback(event => {
+  const handleDragLeave = (0, _useEventCallback.default)(event => {
     if (!isDragging) {
       return;
     }
     event.preventDefault();
     event.stopPropagation();
   });
-  const handleDragOver = useEventCallback(event => {
+  const handleDragOver = (0, _useEventCallback.default)(event => {
     if (!isDragging) {
       return;
     }
@@ -147,7 +154,7 @@ const useDragRangeEvents = ({
     event.stopPropagation();
     event.dataTransfer.dropEffect = 'move';
   });
-  const handleTouchEnd = useEventCallback(event => {
+  const handleTouchEnd = (0, _useEventCallback.default)(event => {
     if (!isDragging) {
       return;
     }
@@ -165,7 +172,7 @@ const useDragRangeEvents = ({
       onDrop(newDate);
     }
   });
-  const handleDragEnd = useEventCallback(event => {
+  const handleDragEnd = (0, _useEventCallback.default)(event => {
     if (!isDragging) {
       return;
     }
@@ -174,7 +181,7 @@ const useDragRangeEvents = ({
     setIsDragging(false);
     setRangeDragDay(null);
   });
-  const handleDrop = useEventCallback(event => {
+  const handleDrop = (0, _useEventCallback.default)(event => {
     if (!isDragging) {
       return;
     }
@@ -204,7 +211,7 @@ const useDragRangeEvents = ({
     onTouchEnd: handleTouchEnd
   };
 };
-export const useDragRange = ({
+const useDragRange = ({
   disableDragEditing,
   utils,
   onDatePositionChange,
@@ -214,7 +221,7 @@ export const useDragRange = ({
 }) => {
   const [isDragging, setIsDragging] = React.useState(false);
   const [rangeDragDay, setRangeDragDay] = React.useState(null);
-  const handleRangeDragDayChange = useEventCallback(newValue => {
+  const handleRangeDragDayChange = (0, _useEventCallback.default)(newValue => {
     if (!utils.isEqual(newValue, rangeDragDay)) {
       setRangeDragDay(newValue);
     }
@@ -242,9 +249,10 @@ export const useDragRange = ({
     dateRange,
     timezone
   });
-  return React.useMemo(() => _extends({
+  return React.useMemo(() => (0, _extends2.default)({
     isDragging,
     rangeDragDay,
     draggingDatePosition
   }, !disableDragEditing ? dragRangeEvents : {}), [isDragging, rangeDragDay, draggingDatePosition, disableDragEditing, dragRangeEvents]);
-};
+};
+exports.useDragRange = useDragRange;

package/DateRangePicker/DateRangePicker.d.ts

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