@mui/x-date-pickers-pro 8.0.0-alpha.10 → 8.0.0-alpha.12

package/esm/DateRangeCalendar/DateRangeCalendar.types.d.ts

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { SlotComponentProps } from '@mui/utils';
+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 { BaseDateValidationProps, ExportedDayCalendarProps, DayCalendarSlots, DayCalendarSlotProps, PickersArrowSwitcherSlots, PickersArrowSwitcherSlotProps, ExportedUseViewsOptions, PickerRangeValue, FormProps } from '@mui/x-date-pickers/internals';
+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>;
+}
+export interface DateRangeCalendarSlotProps extends PickersArrowSwitcherSlotProps, Omit<DayCalendarSlotProps, 'day'>, PickersCalendarHeaderSlotProps {
+  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;
+}
+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[];
+}
+export interface DateRangeCalendarOwnerState extends PickerOwnerState {
+  isDraggingDay: boolean;
+}
+export type DateRangeCalendarDefaultizedProps = DefaultizedProps<DateRangeCalendarProps, 'views' | 'openTo' | 'reduceAnimations' | 'calendars' | 'disableDragEditing' | 'availableRangePositions' | keyof BaseDateValidationProps>;

package/esm/DateRangeCalendar/DateRangeCalendar.types.js

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

package/esm/DateRangeCalendar/dateRangeCalendarClasses.d.ts

@@ -0,0 +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;
+}
+export type DateRangeCalendarClassKey = keyof DateRangeCalendarClasses;
+export declare const getDateRangeCalendarUtilityClass: (slot: string) => string;
+export declare const dateRangeCalendarClasses: DateRangeCalendarClasses;

package/esm/DateRangeCalendar/dateRangeCalendarClasses.js

@@ -0,0 +1,3 @@
+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']);

package/esm/DateRangeCalendar/index.d.ts

@@ -0,0 +1,4 @@
+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/esm/DateRangeCalendar/index.js

@@ -0,0 +1,2 @@
+export { DateRangeCalendar } from "./DateRangeCalendar.js";
+export { getDateRangeCalendarUtilityClass, dateRangeCalendarClasses } from "./dateRangeCalendarClasses.js";

package/esm/DateRangeCalendar/useDragRange.d.ts

@@ -0,0 +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/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;
+}
+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>;
+}
+interface UseDragRangeResponse extends UseDragRangeEvents {
+  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 {};

package/{node → esm}/DateRangeCalendar/useDragRange.js

@@ -1,16 +1,9 @@
-"use strict";
 'use client';
 
-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");
+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";
 const resolveDateFromTarget = (target, utils, timezone) => {
   const timestampString = target.dataset.timestamp;
   if (!timestampString) {
@@ -71,11 +64,11 @@ const useDragRangeEvents = ({
       return false;
     }
     const shouldInitDragging = !disableDragEditing && !!dateRange[0] && !!dateRange[1];
-    const isSelectedStartDate = (0, _dateUtils.isStartOfRange)(utils, day, dateRange);
-    const isSelectedEndDate = (0, _dateUtils.isEndOfRange)(utils, day, dateRange);
+    const isSelectedStartDate = isStartOfRange(utils, day, dateRange);
+    const isSelectedEndDate = isEndOfRange(utils, day, dateRange);
     return shouldInitDragging && (isSelectedStartDate || isSelectedEndDate);
   };
-  const handleDragStart = (0, _useEventCallback.default)(event => {
+  const handleDragStart = useEventCallback(event => {
     const newDate = resolveDateFromTarget(event.target, utils, timezone);
     if (!isElementDraggable(newDate)) {
       return;
@@ -95,7 +88,7 @@ const useDragRangeEvents = ({
       onDatePositionChange(buttonDataset.position);
     }
   });
-  const handleTouchStart = (0, _useEventCallback.default)(event => {
+  const handleTouchStart = useEventCallback(event => {
     const target = resolveElementFromTouch(event);
     if (!target) {
       return;
@@ -106,7 +99,7 @@ const useDragRangeEvents = ({
     }
     setRangeDragDay(newDate);
   });
-  const handleDragEnter = (0, _useEventCallback.default)(event => {
+  const handleDragEnter = useEventCallback(event => {
     if (!isDragging) {
       return;
     }
@@ -115,7 +108,7 @@ const useDragRangeEvents = ({
     event.dataTransfer.dropEffect = 'move';
     setRangeDragDay(resolveDateFromTarget(event.target, utils, timezone));
   });
-  const handleTouchMove = (0, _useEventCallback.default)(event => {
+  const handleTouchMove = useEventCallback(event => {
     const target = resolveElementFromTouch(event);
     if (!target) {
       return;
@@ -139,14 +132,14 @@ const useDragRangeEvents = ({
       onDatePositionChange(buttonDataset.position);
     }
   });
-  const handleDragLeave = (0, _useEventCallback.default)(event => {
+  const handleDragLeave = useEventCallback(event => {
     if (!isDragging) {
       return;
     }
     event.preventDefault();
     event.stopPropagation();
   });
-  const handleDragOver = (0, _useEventCallback.default)(event => {
+  const handleDragOver = useEventCallback(event => {
     if (!isDragging) {
       return;
     }
@@ -154,7 +147,7 @@ const useDragRangeEvents = ({
     event.stopPropagation();
     event.dataTransfer.dropEffect = 'move';
   });
-  const handleTouchEnd = (0, _useEventCallback.default)(event => {
+  const handleTouchEnd = useEventCallback(event => {
     if (!isDragging) {
       return;
     }
@@ -172,7 +165,7 @@ const useDragRangeEvents = ({
       onDrop(newDate);
     }
   });
-  const handleDragEnd = (0, _useEventCallback.default)(event => {
+  const handleDragEnd = useEventCallback(event => {
     if (!isDragging) {
       return;
     }
@@ -181,7 +174,7 @@ const useDragRangeEvents = ({
     setIsDragging(false);
     setRangeDragDay(null);
   });
-  const handleDrop = (0, _useEventCallback.default)(event => {
+  const handleDrop = useEventCallback(event => {
     if (!isDragging) {
       return;
     }
@@ -211,7 +204,7 @@ const useDragRangeEvents = ({
     onTouchEnd: handleTouchEnd
   };
 };
-const useDragRange = ({
+export const useDragRange = ({
   disableDragEditing,
   utils,
   onDatePositionChange,
@@ -221,7 +214,7 @@ const useDragRange = ({
 }) => {
   const [isDragging, setIsDragging] = React.useState(false);
   const [rangeDragDay, setRangeDragDay] = React.useState(null);
-  const handleRangeDragDayChange = (0, _useEventCallback.default)(newValue => {
+  const handleRangeDragDayChange = useEventCallback(newValue => {
     if (!utils.isEqual(newValue, rangeDragDay)) {
       setRangeDragDay(newValue);
     }
@@ -249,10 +242,9 @@ const useDragRange = ({
     dateRange,
     timezone
   });
-  return React.useMemo(() => (0, _extends2.default)({
+  return React.useMemo(() => _extends({
     isDragging,
     rangeDragDay,
     draggingDatePosition
   }, !disableDragEditing ? dragRangeEvents : {}), [isDragging, rangeDragDay, draggingDatePosition, disableDragEditing, dragRangeEvents]);
-};
-exports.useDragRange = useDragRange;
+};

package/esm/DateRangePicker/DateRangePicker.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { DateRangePickerProps } from "./DateRangePicker.types.js";
+type DatePickerComponent = (<TEnableAccessibleFieldDOMStructure extends boolean = true>(props: DateRangePickerProps<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:
+ *
+ * - [DateRangePicker API](https://mui.com/x/api/date-pickers/date-range-picker/)
+ */
+declare const DateRangePicker: DatePickerComponent;
+export { DateRangePicker };