@mui/x-date-pickers 5.0.0-alpha.0

package/CalendarPickerSkeleton/CalendarPickerSkeleton.js

@@ -0,0 +1,119 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["className"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import Skeleton from '@mui/material/Skeleton';
+import { styled, useThemeProps } from '@mui/material/styles';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { DAY_SIZE, DAY_MARGIN } from '../internals/constants/dimensions';
+import { getCalendarPickerSkeletonUtilityClass } from './calendarPickerSkeletonClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    week: ['week'],
+    daySkeleton: ['daySkeleton']
+  };
+  return composeClasses(slots, getCalendarPickerSkeletonUtilityClass, classes);
+};
+
+const CalendarPickerSkeletonRoot = styled('div', {
+  name: 'MuiCalendarPickerSkeleton',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})({
+  alignSelf: 'start'
+});
+const CalendarPickerSkeletonWeek = styled('div', {
+  name: 'MuiCalendarPickerSkeleton',
+  slot: 'Week',
+  overridesResolver: (props, styles) => styles.week
+})({
+  margin: `${DAY_MARGIN}px 0`,
+  display: 'flex',
+  justifyContent: 'center'
+});
+const CalendarPickerSkeletonDay = styled(Skeleton, {
+  name: 'MuiCalendarPickerSkeleton',
+  slot: 'Day',
+  overridesResolver: (props, styles) => styles.daySkeleton
+})(({
+  ownerState
+}) => _extends({
+  margin: `0 ${DAY_MARGIN}px`
+}, ownerState.day === 0 && {
+  visibility: 'hidden'
+}));
+CalendarPickerSkeletonDay.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  ownerState: PropTypes.shape({
+    day: PropTypes.number.isRequired
+  }).isRequired
+};
+const monthMap = [[0, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 0, 0, 0]];
+/**
+ *
+ * Demos:
+ *
+ * - [Date Picker](https://mui.com/components/x/react-date-pickers/date-picker/)
+ *
+ * API:
+ *
+ * - [CalendarPickerSkeleton API](https://mui.com/api/calendar-picker-skeleton/)
+ */
+
+function CalendarPickerSkeleton(props) {
+  const _useThemeProps = useThemeProps({
+    props,
+    name: 'MuiCalendarPickerSkeleton'
+  }),
+        {
+    className
+  } = _useThemeProps,
+        other = _objectWithoutPropertiesLoose(_useThemeProps, _excluded);
+
+  const classes = useUtilityClasses(props);
+  return /*#__PURE__*/_jsx(CalendarPickerSkeletonRoot, _extends({
+    className: clsx(classes.root, className)
+  }, other, {
+    children: monthMap.map((week, index) => /*#__PURE__*/_jsx(CalendarPickerSkeletonWeek, {
+      className: classes.week,
+      children: week.map((day, index2) => /*#__PURE__*/_jsx(CalendarPickerSkeletonDay, {
+        variant: "circular",
+        width: DAY_SIZE,
+        height: DAY_SIZE,
+        className: classes.daySkeleton,
+        ownerState: {
+          day
+        }
+      }, index2))
+    }, index))
+  }));
+}
+
+process.env.NODE_ENV !== "production" ? CalendarPickerSkeleton.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * 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])
+} : void 0;
+export { CalendarPickerSkeleton };

package/CalendarPickerSkeleton/calendarPickerSkeletonClasses.d.ts

@@ -0,0 +1,11 @@
+export interface CalendarPickerSkeletonClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the week element. */
+    week: string;
+    /** Styles applied to the day element. */
+    daySkeleton: string;
+}
+export declare type CalendarPickerSkeletonClassKey = keyof CalendarPickerSkeletonClasses;
+export declare const getCalendarPickerSkeletonUtilityClass: (slot: string) => string;
+export declare const calendarPickerSkeletonClasses: CalendarPickerSkeletonClasses;

package/CalendarPickerSkeleton/calendarPickerSkeletonClasses.js

@@ -0,0 +1,3 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+export const getCalendarPickerSkeletonUtilityClass = slot => generateUtilityClass('MuiCalendarPickerSkeleton', slot);
+export const calendarPickerSkeletonClasses = generateUtilityClasses('MuiCalendarPickerSkeleton', ['root', 'week', 'daySkeleton']);

package/CalendarPickerSkeleton/index.d.ts

@@ -0,0 +1,4 @@
+export { CalendarPickerSkeleton } from './CalendarPickerSkeleton';
+export type { CalendarPickerSkeletonProps } from './CalendarPickerSkeleton';
+export { calendarPickerSkeletonClasses, getCalendarPickerSkeletonUtilityClass, } from './calendarPickerSkeletonClasses';
+export type { CalendarPickerSkeletonClassKey, CalendarPickerSkeletonClasses, } from './calendarPickerSkeletonClasses';

package/CalendarPickerSkeleton/index.js

@@ -0,0 +1,2 @@
+export { CalendarPickerSkeleton } from './CalendarPickerSkeleton';
+export { calendarPickerSkeletonClasses, getCalendarPickerSkeletonUtilityClass } from './calendarPickerSkeletonClasses';

package/CalendarPickerSkeleton/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/CalendarPickerSkeleton/index.js",
+  "types": "./index.d.ts"
+}

package/ClockPicker/Clock.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { PickerSelectionState } from '../internals/hooks/usePickerState';
+import { useMeridiemMode } from '../internals/hooks/date-helpers-hooks';
+import { ClockPickerView, MuiPickersAdapter } from '../internals/models';
+export interface ClockProps<TDate> extends ReturnType<typeof useMeridiemMode> {
+    ampm: boolean;
+    ampmInClock: boolean;
+    autoFocus?: boolean;
+    children: readonly React.ReactNode[];
+    date: TDate | null;
+    getClockLabelText: (view: ClockPickerView, time: TDate | null, adapter: MuiPickersAdapter<TDate>) => string;
+    isTimeDisabled: (timeValue: number, type: ClockPickerView) => boolean;
+    minutesStep?: number;
+    onChange: (value: number, isFinish?: PickerSelectionState) => void;
+    /**
+     * DOM id that the selected option should have
+     * Should only be `undefined` on the server
+     */
+    selectedId: string | undefined;
+    type: ClockPickerView;
+    value: number;
+}
+/**
+ * @ignore - internal component.
+ */
+export declare function Clock<TDate>(props: ClockProps<TDate>): JSX.Element;

package/ClockPicker/Clock.js

@@ -0,0 +1,262 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import { styled } from '@mui/material/styles';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { ClockPointer } from './ClockPointer';
+import { useUtils } from '../internals/hooks/useUtils';
+import { WrapperVariantContext } from '../internals/components/wrappers/WrapperVariantContext';
+import { getHours, getMinutes } from './shared';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const ClockRoot = styled('div')(({
+  theme
+}) => ({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  margin: theme.spacing(2)
+}));
+const ClockClock = styled('div')({
+  backgroundColor: 'rgba(0,0,0,.07)',
+  borderRadius: '50%',
+  height: 220,
+  width: 220,
+  flexShrink: 0,
+  position: 'relative',
+  pointerEvents: 'none'
+});
+const ClockSquareMask = styled('div')({
+  width: '100%',
+  height: '100%',
+  position: 'absolute',
+  pointerEvents: 'auto',
+  outline: 0,
+  // Disable scroll capabilities.
+  touchAction: 'none',
+  userSelect: 'none',
+  '@media (pointer: fine)': {
+    cursor: 'pointer',
+    borderRadius: '50%'
+  },
+  '&:active': {
+    cursor: 'move'
+  }
+});
+const ClockPin = styled('div')(({
+  theme
+}) => ({
+  width: 6,
+  height: 6,
+  borderRadius: '50%',
+  backgroundColor: theme.palette.primary.main,
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)'
+}));
+const ClockAmButton = styled(IconButton)(({
+  theme,
+  ownerState
+}) => _extends({
+  zIndex: 1,
+  position: 'absolute',
+  bottom: ownerState.ampmInClock ? 64 : 8,
+  left: 8
+}, ownerState.meridiemMode === 'am' && {
+  backgroundColor: theme.palette.primary.main,
+  color: theme.palette.primary.contrastText,
+  '&:hover': {
+    backgroundColor: theme.palette.primary.light
+  }
+}));
+const ClockPmButton = styled(IconButton)(({
+  theme,
+  ownerState
+}) => _extends({
+  zIndex: 1,
+  position: 'absolute',
+  bottom: ownerState.ampmInClock ? 64 : 8,
+  right: 8
+}, ownerState.meridiemMode === 'pm' && {
+  backgroundColor: theme.palette.primary.main,
+  color: theme.palette.primary.contrastText,
+  '&:hover': {
+    backgroundColor: theme.palette.primary.light
+  }
+}));
+/**
+ * @ignore - internal component.
+ */
+
+export function Clock(props) {
+  const {
+    ampm,
+    ampmInClock,
+    autoFocus,
+    children,
+    date,
+    getClockLabelText,
+    handleMeridiemChange,
+    isTimeDisabled,
+    meridiemMode,
+    minutesStep = 1,
+    onChange,
+    selectedId,
+    type,
+    value
+  } = props;
+  const ownerState = props;
+  const utils = useUtils();
+  const wrapperVariant = React.useContext(WrapperVariantContext);
+  const isMoving = React.useRef(false);
+  const isSelectedTimeDisabled = isTimeDisabled(value, type);
+  const isPointerInner = !ampm && type === 'hours' && (value < 1 || value > 12);
+
+  const handleValueChange = (newValue, isFinish) => {
+    if (isTimeDisabled(newValue, type)) {
+      return;
+    }
+
+    onChange(newValue, isFinish);
+  };
+
+  const setTime = (event, isFinish) => {
+    let {
+      offsetX,
+      offsetY
+    } = event;
+
+    if (offsetX === undefined) {
+      const rect = event.target.getBoundingClientRect();
+      offsetX = event.changedTouches[0].clientX - rect.left;
+      offsetY = event.changedTouches[0].clientY - rect.top;
+    }
+
+    const newSelectedValue = type === 'seconds' || type === 'minutes' ? getMinutes(offsetX, offsetY, minutesStep) : getHours(offsetX, offsetY, Boolean(ampm));
+    handleValueChange(newSelectedValue, isFinish);
+  };
+
+  const handleTouchMove = event => {
+    isMoving.current = true;
+    setTime(event, 'shallow');
+  };
+
+  const handleTouchEnd = event => {
+    if (isMoving.current) {
+      setTime(event, 'finish');
+      isMoving.current = false;
+    }
+  };
+
+  const handleMouseMove = event => {
+    // event.buttons & PRIMARY_MOUSE_BUTTON
+    if (event.buttons > 0) {
+      setTime(event.nativeEvent, 'shallow');
+    }
+  };
+
+  const handleMouseUp = event => {
+    if (isMoving.current) {
+      isMoving.current = false;
+    }
+
+    setTime(event.nativeEvent, 'finish');
+  };
+
+  const hasSelected = React.useMemo(() => {
+    if (type === 'hours') {
+      return true;
+    }
+
+    return value % 5 === 0;
+  }, [type, value]);
+  const keyboardControlStep = type === 'minutes' ? minutesStep : 1;
+  const listboxRef = React.useRef(null); // Since this is rendered when a Popper is opened we can't use passive effects.
+  // Focusing in passive effects in Popper causes scroll jump.
+
+  useEnhancedEffect(() => {
+    if (autoFocus) {
+      // The ref not being resolved would be a bug in MUI.
+      listboxRef.current.focus();
+    }
+  }, [autoFocus]);
+
+  const handleKeyDown = event => {
+    // TODO: Why this early exit?
+    if (isMoving.current) {
+      return;
+    }
+
+    switch (event.key) {
+      case 'Home':
+        // annulate both hours and minutes
+        handleValueChange(0, 'partial');
+        event.preventDefault();
+        break;
+
+      case 'End':
+        handleValueChange(type === 'minutes' ? 59 : 23, 'partial');
+        event.preventDefault();
+        break;
+
+      case 'ArrowUp':
+        handleValueChange(value + keyboardControlStep, 'partial');
+        event.preventDefault();
+        break;
+
+      case 'ArrowDown':
+        handleValueChange(value - keyboardControlStep, 'partial');
+        event.preventDefault();
+        break;
+
+      default: // do nothing
+
+    }
+  };
+
+  return /*#__PURE__*/_jsxs(ClockRoot, {
+    children: [/*#__PURE__*/_jsxs(ClockClock, {
+      children: [/*#__PURE__*/_jsx(ClockSquareMask, {
+        onTouchMove: handleTouchMove,
+        onTouchEnd: handleTouchEnd,
+        onMouseUp: handleMouseUp,
+        onMouseMove: handleMouseMove
+      }), !isSelectedTimeDisabled && /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [/*#__PURE__*/_jsx(ClockPin, {}), date && /*#__PURE__*/_jsx(ClockPointer, {
+          type: type,
+          value: value,
+          isInner: isPointerInner,
+          hasSelected: hasSelected
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        "aria-activedescendant": selectedId,
+        "aria-label": getClockLabelText(type, date, utils),
+        ref: listboxRef,
+        role: "listbox",
+        onKeyDown: handleKeyDown,
+        tabIndex: 0,
+        children: children
+      })]
+    }), ampm && (wrapperVariant === 'desktop' || ampmInClock) && /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [/*#__PURE__*/_jsx(ClockAmButton, {
+        onClick: () => handleMeridiemChange('am'),
+        disabled: meridiemMode === null,
+        ownerState: ownerState,
+        children: /*#__PURE__*/_jsx(Typography, {
+          variant: "caption",
+          children: "AM"
+        })
+      }), /*#__PURE__*/_jsx(ClockPmButton, {
+        disabled: meridiemMode === null,
+        onClick: () => handleMeridiemChange('pm'),
+        ownerState: ownerState,
+        children: /*#__PURE__*/_jsx(Typography, {
+          variant: "caption",
+          children: "PM"
+        })
+      })]
+    })]
+  });
+}

package/ClockPicker/ClockNumber.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+export interface ClockNumberProps extends React.HTMLAttributes<HTMLSpanElement> {
+    'aria-label': string;
+    disabled: boolean;
+    /**
+     * Make sure callers pass an id which. It should be defined if selected.
+     */
+    id: string | undefined;
+    index: number;
+    inner: boolean;
+    label: string;
+    selected: boolean;
+}
+export declare const classes: Record<"selected" | "disabled", string>;
+/**
+ * @ignore - internal component.
+ */
+export declare function ClockNumber(props: ClockNumberProps): JSX.Element;

package/ClockPicker/ClockNumber.js

@@ -0,0 +1,70 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["className", "disabled", "index", "inner", "label", "selected"];
+import * as React from 'react';
+import clsx from 'clsx';
+import { styled } from '@mui/material/styles';
+import { generateUtilityClasses } from '@mui/material';
+import { CLOCK_WIDTH, CLOCK_HOUR_WIDTH } from './shared';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const classes = generateUtilityClasses('PrivateClockNumber', ['selected', 'disabled']);
+const ClockNumberRoot = styled('span')(({
+  theme,
+  ownerState
+}) => _extends({
+  height: CLOCK_HOUR_WIDTH,
+  width: CLOCK_HOUR_WIDTH,
+  position: 'absolute',
+  left: `calc((100% - ${CLOCK_HOUR_WIDTH}px) / 2)`,
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: '50%',
+  color: theme.palette.text.primary,
+  fontFamily: theme.typography.fontFamily,
+  '&:focused': {
+    backgroundColor: theme.palette.background.paper
+  },
+  [`&.${classes.selected}`]: {
+    color: theme.palette.primary.contrastText
+  },
+  [`&.${classes.disabled}`]: {
+    pointerEvents: 'none',
+    color: theme.palette.text.disabled
+  }
+}, ownerState.inner && _extends({}, theme.typography.body2, {
+  color: theme.palette.text.secondary
+})));
+/**
+ * @ignore - internal component.
+ */
+
+export function ClockNumber(props) {
+  const {
+    className,
+    disabled,
+    index,
+    inner,
+    label,
+    selected
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const ownerState = props;
+  const angle = index % 12 / 12 * Math.PI * 2 - Math.PI / 2;
+  const length = (CLOCK_WIDTH - CLOCK_HOUR_WIDTH - 2) / 2 * (inner ? 0.65 : 1);
+  const x = Math.round(Math.cos(angle) * length);
+  const y = Math.round(Math.sin(angle) * length);
+  return /*#__PURE__*/_jsx(ClockNumberRoot, _extends({
+    className: clsx(className, selected && classes.selected, disabled && classes.disabled),
+    "aria-disabled": disabled ? true : undefined,
+    "aria-selected": selected ? true : undefined,
+    role: "option",
+    style: {
+      transform: `translate(${x}px, ${y + (CLOCK_WIDTH - CLOCK_HOUR_WIDTH) / 2}px`
+    },
+    ownerState: ownerState
+  }, other, {
+    children: label
+  }));
+}

package/ClockPicker/ClockNumbers.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { MuiPickersAdapter } from '../internals/models';
+import { PickerSelectionState } from '../internals/hooks/usePickerState';
+interface GetHourNumbersOptions<TDate> {
+    ampm: boolean;
+    date: TDate;
+    getClockNumberText: (hour: string) => string;
+    isDisabled: (value: number) => boolean;
+    onChange: (value: number, isFinish?: PickerSelectionState) => void;
+    /**
+     * DOM id that the selected option should have
+     * Should only be `undefined` on the server
+     */
+    selectedId: string | undefined;
+    utils: MuiPickersAdapter<TDate>;
+}
+/**
+ * @ignore - internal component.
+ */
+export declare const getHourNumbers: <TDate extends unknown>({ ampm, date, getClockNumberText, isDisabled, selectedId, utils, }: GetHourNumbersOptions<TDate>) => JSX.Element[];
+export declare const getMinutesNumbers: <TDate extends unknown>({ utils, value, isDisabled, getClockNumberText, selectedId, }: Omit<GetHourNumbersOptions<TDate>, "date" | "ampm"> & {
+    value: number;
+}) => JSX.Element[];
+export {};

package/ClockPicker/ClockNumbers.js

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { ClockNumber } from './ClockNumber';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+/**
+ * @ignore - internal component.
+ */
+export const getHourNumbers = ({
+  ampm,
+  date,
+  getClockNumberText,
+  isDisabled,
+  selectedId,
+  utils
+}) => {
+  const currentHours = date ? utils.getHours(date) : null;
+  const hourNumbers = [];
+  const startHour = ampm ? 1 : 0;
+  const endHour = ampm ? 12 : 23;
+
+  const isSelected = hour => {
+    if (currentHours === null) {
+      return false;
+    }
+
+    if (ampm) {
+      if (hour === 12) {
+        return currentHours === 12 || currentHours === 0;
+      }
+
+      return currentHours === hour || currentHours - 12 === hour;
+    }
+
+    return currentHours === hour;
+  };
+
+  for (let hour = startHour; hour <= endHour; hour += 1) {
+    let label = hour.toString();
+
+    if (hour === 0) {
+      label = '00';
+    }
+
+    const inner = !ampm && (hour === 0 || hour > 12);
+    label = utils.formatNumber(label);
+    const selected = isSelected(hour);
+    hourNumbers.push( /*#__PURE__*/_jsx(ClockNumber, {
+      id: selected ? selectedId : undefined,
+      index: hour,
+      inner: inner,
+      selected: selected,
+      disabled: isDisabled(hour),
+      label: label,
+      "aria-label": getClockNumberText(label)
+    }, hour));
+  }
+
+  return hourNumbers;
+};
+export const getMinutesNumbers = ({
+  utils,
+  value,
+  isDisabled,
+  getClockNumberText,
+  selectedId
+}) => {
+  const f = utils.formatNumber;
+  return [[5, f('05')], [10, f('10')], [15, f('15')], [20, f('20')], [25, f('25')], [30, f('30')], [35, f('35')], [40, f('40')], [45, f('45')], [50, f('50')], [55, f('55')], [0, f('00')]].map(([numberValue, label], index) => {
+    const selected = numberValue === value;
+    return /*#__PURE__*/_jsx(ClockNumber, {
+      label: label,
+      id: selected ? selectedId : undefined,
+      index: index + 1,
+      inner: false,
+      disabled: isDisabled(numberValue),
+      selected: selected,
+      "aria-label": getClockNumberText(label)
+    }, numberValue);
+  });
+};