@mui/x-date-pickers-pro 8.0.0-beta.3 → 8.1.0

package/modern/DateRangeCalendar/DateRangeCalendar.types.d.ts

@@ -1,113 +0,0 @@
-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/PickersDay';
-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/modern/DateRangeCalendar/DateRangeCalendar.types.js

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

package/modern/DateRangeCalendar/dateRangeCalendarClasses.d.ts

@@ -1,11 +0,0 @@
-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/modern/DateRangeCalendar/dateRangeCalendarClasses.js

@@ -1,3 +0,0 @@
-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/modern/DateRangeCalendar/index.d.ts

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

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

package/modern/DateRangeCalendar/useDragRange.d.ts

@@ -1,40 +0,0 @@
-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/modern/DateRangeCalendar/useDragRange.js

@@ -1,250 +0,0 @@
-'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";
-const resolveDateFromTarget = (target, utils, timezone) => {
-  const timestampString = target.dataset.timestamp;
-  if (!timestampString) {
-    return null;
-  }
-  const timestamp = +timestampString;
-  return utils.date(new Date(timestamp).toISOString(), timezone);
-};
-const isSameAsDraggingDate = event => {
-  const timestampString = event.target.dataset.timestamp;
-  return timestampString === event.dataTransfer.getData('draggingDate');
-};
-const resolveButtonElement = element => {
-  if (element) {
-    if (element instanceof HTMLButtonElement && !element.disabled) {
-      return element;
-    }
-    if (element.children.length) {
-      return resolveButtonElement(element.children[0]);
-    }
-    return null;
-  }
-  return element;
-};
-const resolveElementFromTouch = (event, ignoreTouchTarget) => {
-  // don't parse multi-touch result
-  if (event.changedTouches?.length === 1 && event.touches.length <= 1) {
-    const element = document.elementFromPoint(event.changedTouches[0].clientX, event.changedTouches[0].clientY);
-    // `elementFromPoint` could have resolved preview div or wrapping div
-    // might need to recursively find the nested button
-    const buttonElement = resolveButtonElement(element);
-    if (ignoreTouchTarget && buttonElement === event.changedTouches[0].target) {
-      return null;
-    }
-    return buttonElement;
-  }
-  return null;
-};
-const useDragRangeEvents = ({
-  utils,
-  setRangeDragDay,
-  setIsDragging,
-  isDragging,
-  onDatePositionChange,
-  onDrop,
-  disableDragEditing,
-  dateRange,
-  timezone
-}) => {
-  const emptyDragImgRef = React.useRef(null);
-  React.useEffect(() => {
-    // Preload the image - required for Safari support: https://stackoverflow.com/a/40923520/3303436
-    emptyDragImgRef.current = document.createElement('img');
-    emptyDragImgRef.current.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
-  }, []);
-  const isElementDraggable = day => {
-    if (day == null) {
-      return false;
-    }
-    const shouldInitDragging = !disableDragEditing && !!dateRange[0] && !!dateRange[1];
-    const isSelectedStartDate = isStartOfRange(utils, day, dateRange);
-    const isSelectedEndDate = isEndOfRange(utils, day, dateRange);
-    return shouldInitDragging && (isSelectedStartDate || isSelectedEndDate);
-  };
-  const handleDragStart = useEventCallback(event => {
-    const newDate = resolveDateFromTarget(event.target, utils, timezone);
-    if (!isElementDraggable(newDate)) {
-      return;
-    }
-    event.stopPropagation();
-    if (emptyDragImgRef.current) {
-      event.dataTransfer.setDragImage(emptyDragImgRef.current, 0, 0);
-    }
-    setRangeDragDay(newDate);
-    event.dataTransfer.effectAllowed = 'move';
-    setIsDragging(true);
-    const buttonDataset = event.target.dataset;
-    if (buttonDataset.timestamp) {
-      event.dataTransfer.setData('draggingDate', buttonDataset.timestamp);
-    }
-    if (buttonDataset.position) {
-      onDatePositionChange(buttonDataset.position);
-    }
-  });
-  const handleTouchStart = useEventCallback(event => {
-    const target = resolveElementFromTouch(event);
-    if (!target) {
-      return;
-    }
-    const newDate = resolveDateFromTarget(target, utils, timezone);
-    if (!isElementDraggable(newDate)) {
-      return;
-    }
-    setRangeDragDay(newDate);
-  });
-  const handleDragEnter = useEventCallback(event => {
-    if (!isDragging) {
-      return;
-    }
-    event.preventDefault();
-    event.stopPropagation();
-    event.dataTransfer.dropEffect = 'move';
-    setRangeDragDay(resolveDateFromTarget(event.target, utils, timezone));
-  });
-  const handleTouchMove = useEventCallback(event => {
-    const target = resolveElementFromTouch(event);
-    if (!target) {
-      return;
-    }
-    const newDate = resolveDateFromTarget(target, utils, timezone);
-    if (newDate) {
-      setRangeDragDay(newDate);
-    }
-
-    // this prevents initiating drag when user starts touchmove outside and then moves over a draggable element
-    const targetsAreIdentical = target === event.changedTouches[0].target;
-    if (!targetsAreIdentical || !isElementDraggable(newDate)) {
-      return;
-    }
-
-    // on mobile we should only initialize dragging state after move is detected
-    setIsDragging(true);
-    const button = event.target;
-    const buttonDataset = button.dataset;
-    if (buttonDataset.position) {
-      onDatePositionChange(buttonDataset.position);
-    }
-  });
-  const handleDragLeave = useEventCallback(event => {
-    if (!isDragging) {
-      return;
-    }
-    event.preventDefault();
-    event.stopPropagation();
-  });
-  const handleDragOver = useEventCallback(event => {
-    if (!isDragging) {
-      return;
-    }
-    event.preventDefault();
-    event.stopPropagation();
-    event.dataTransfer.dropEffect = 'move';
-  });
-  const handleTouchEnd = useEventCallback(event => {
-    if (!isDragging) {
-      return;
-    }
-    setRangeDragDay(null);
-    setIsDragging(false);
-    const target = resolveElementFromTouch(event, true);
-    if (!target) {
-      return;
-    }
-
-    // make sure the focused element is the element where touch ended
-    target.focus();
-    const newDate = resolveDateFromTarget(target, utils, timezone);
-    if (newDate) {
-      onDrop(newDate);
-    }
-  });
-  const handleDragEnd = useEventCallback(event => {
-    if (!isDragging) {
-      return;
-    }
-    event.preventDefault();
-    event.stopPropagation();
-    setIsDragging(false);
-    setRangeDragDay(null);
-  });
-  const handleDrop = useEventCallback(event => {
-    if (!isDragging) {
-      return;
-    }
-    event.preventDefault();
-    event.stopPropagation();
-    setIsDragging(false);
-    setRangeDragDay(null);
-    // make sure the focused element is the element where drop ended
-    event.currentTarget.focus();
-    if (isSameAsDraggingDate(event)) {
-      return;
-    }
-    const newDate = resolveDateFromTarget(event.target, utils, timezone);
-    if (newDate) {
-      onDrop(newDate);
-    }
-  });
-  return {
-    onDragStart: handleDragStart,
-    onDragEnter: handleDragEnter,
-    onDragLeave: handleDragLeave,
-    onDragOver: handleDragOver,
-    onDragEnd: handleDragEnd,
-    onDrop: handleDrop,
-    onTouchStart: handleTouchStart,
-    onTouchMove: handleTouchMove,
-    onTouchEnd: handleTouchEnd
-  };
-};
-export const useDragRange = ({
-  disableDragEditing,
-  utils,
-  onDatePositionChange,
-  onDrop,
-  dateRange,
-  timezone
-}) => {
-  const [isDragging, setIsDragging] = React.useState(false);
-  const [rangeDragDay, setRangeDragDay] = React.useState(null);
-  const handleRangeDragDayChange = useEventCallback(newValue => {
-    if (!utils.isEqual(newValue, rangeDragDay)) {
-      setRangeDragDay(newValue);
-    }
-  });
-  const draggingDatePosition = React.useMemo(() => {
-    const [start, end] = dateRange;
-    if (rangeDragDay) {
-      if (start && utils.isBefore(rangeDragDay, start)) {
-        return 'start';
-      }
-      if (end && utils.isAfter(rangeDragDay, end)) {
-        return 'end';
-      }
-    }
-    return null;
-  }, [dateRange, rangeDragDay, utils]);
-  const dragRangeEvents = useDragRangeEvents({
-    utils,
-    onDatePositionChange,
-    onDrop,
-    setIsDragging,
-    isDragging,
-    setRangeDragDay: handleRangeDragDayChange,
-    disableDragEditing,
-    dateRange,
-    timezone
-  });
-  return React.useMemo(() => _extends({
-    isDragging,
-    rangeDragDay,
-    draggingDatePosition
-  }, !disableDragEditing ? dragRangeEvents : {}), [isDragging, rangeDragDay, draggingDatePosition, disableDragEditing, dragRangeEvents]);
-};

package/modern/DateRangePicker/DateRangePicker.d.ts

@@ -1,17 +0,0 @@
-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 };