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

package/modern/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/modern/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);
+  });
+};

package/modern/ClockPicker/ClockPicker.js

@@ -0,0 +1,407 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import { unstable_useId as useId } from '@mui/utils';
+import { styled, useThemeProps } from '@mui/material/styles';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { Clock } from './Clock';
+import { pipe } from '../internals/utils/utils';
+import { useUtils, useNow } from '../internals/hooks/useUtils';
+import { getHourNumbers, getMinutesNumbers } from './ClockNumbers';
+import { PickersArrowSwitcher } from '../internals/components/PickersArrowSwitcher';
+import { convertValueToMeridiem, createIsAfterIgnoreDatePart } from '../internals/utils/time-utils';
+import { useViews } from '../internals/hooks/useViews';
+import { useMeridiemMode } from '../internals/hooks/date-helpers-hooks';
+import { getClockPickerUtilityClass } from './clockPickerClasses';
+import { PickerViewRoot } from '../internals/components/PickerViewRoot';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    arrowSwitcher: ['arrowSwitcher']
+  };
+  return composeClasses(slots, getClockPickerUtilityClass, classes);
+};
+
+const ClockPickerRoot = styled(PickerViewRoot, {
+  name: 'MuiClockPicker',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})({
+  display: 'flex',
+  flexDirection: 'column'
+});
+const ClockPickerArrowSwitcher = styled(PickersArrowSwitcher, {
+  name: 'MuiClockPicker',
+  slot: 'ArrowSwitcher',
+  overridesResolver: (props, styles) => styles.arrowSwitcher
+})({
+  position: 'absolute',
+  right: 12,
+  top: 15
+});
+
+const defaultGetClockLabelText = (view, time, adapter) => `Select ${view}. ${time === null ? 'No time selected' : `Selected time is ${adapter.format(time, 'fullTime')}`}`;
+
+const defaultGetMinutesClockNumberText = minutes => `${minutes} minutes`;
+
+const defaultGetHoursClockNumberText = hours => `${hours} hours`;
+
+const defaultGetSecondsClockNumberText = seconds => `${seconds} seconds`;
+
+/**
+ *
+ * API:
+ *
+ * - [ClockPicker API](https://mui.com/api/clock-picker/)
+ */
+export const ClockPicker = /*#__PURE__*/React.forwardRef(function ClockPicker(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiClockPicker'
+  });
+  const {
+    ampm = false,
+    ampmInClock = false,
+    autoFocus,
+    components,
+    componentsProps,
+    date,
+    disableIgnoringDatePartForTimeValidation = false,
+    getClockLabelText = defaultGetClockLabelText,
+    getHoursClockNumberText = defaultGetHoursClockNumberText,
+    getMinutesClockNumberText = defaultGetMinutesClockNumberText,
+    getSecondsClockNumberText = defaultGetSecondsClockNumberText,
+    leftArrowButtonText = 'open previous view',
+    maxTime,
+    minTime,
+    minutesStep = 1,
+    rightArrowButtonText = 'open next view',
+    shouldDisableTime,
+    showViewSwitcher,
+    onChange,
+    view,
+    views = ['hours', 'minutes'],
+    openTo,
+    onViewChange,
+    className
+  } = props;
+  const {
+    openView,
+    setOpenView,
+    nextView,
+    previousView,
+    handleChangeAndOpenNext
+  } = useViews({
+    view,
+    views,
+    openTo,
+    onViewChange,
+    onChange
+  });
+  const now = useNow();
+  const utils = useUtils();
+  const midnight = utils.setSeconds(utils.setMinutes(utils.setHours(now, 0), 0), 0);
+  const dateOrMidnight = date || midnight;
+  const {
+    meridiemMode,
+    handleMeridiemChange
+  } = useMeridiemMode(dateOrMidnight, ampm, handleChangeAndOpenNext);
+  const isTimeDisabled = React.useCallback((rawValue, viewType) => {
+    if (date === null) {
+      return false;
+    }
+
+    const validateTimeValue = getRequestedTimePoint => {
+      const isAfterComparingFn = createIsAfterIgnoreDatePart(disableIgnoringDatePartForTimeValidation, utils);
+      return Boolean(minTime && isAfterComparingFn(minTime, getRequestedTimePoint('end')) || maxTime && isAfterComparingFn(getRequestedTimePoint('start'), maxTime) || shouldDisableTime && shouldDisableTime(rawValue, viewType));
+    };
+
+    switch (viewType) {
+      case 'hours':
+        {
+          const hoursWithMeridiem = convertValueToMeridiem(rawValue, meridiemMode, ampm);
+          return validateTimeValue(when => pipe(currentDate => utils.setHours(currentDate, hoursWithMeridiem), dateWithHours => utils.setMinutes(dateWithHours, when === 'start' ? 0 : 59), dateWithMinutes => utils.setSeconds(dateWithMinutes, when === 'start' ? 0 : 59))(date));
+        }
+
+      case 'minutes':
+        return validateTimeValue(when => pipe(currentDate => utils.setMinutes(currentDate, rawValue), dateWithMinutes => utils.setSeconds(dateWithMinutes, when === 'start' ? 0 : 59))(date));
+
+      case 'seconds':
+        return validateTimeValue(() => utils.setSeconds(date, rawValue));
+
+      default:
+        throw new Error('not supported');
+    }
+  }, [ampm, date, disableIgnoringDatePartForTimeValidation, maxTime, meridiemMode, minTime, shouldDisableTime, utils]);
+  const selectedId = useId();
+  const viewProps = React.useMemo(() => {
+    switch (openView) {
+      case 'hours':
+        {
+          const handleHoursChange = (value, isFinish) => {
+            const valueWithMeridiem = convertValueToMeridiem(value, meridiemMode, ampm);
+            handleChangeAndOpenNext(utils.setHours(dateOrMidnight, valueWithMeridiem), isFinish);
+          };
+
+          return {
+            onChange: handleHoursChange,
+            value: utils.getHours(dateOrMidnight),
+            children: getHourNumbers({
+              date,
+              utils,
+              ampm,
+              onChange: handleHoursChange,
+              getClockNumberText: getHoursClockNumberText,
+              isDisabled: value => isTimeDisabled(value, 'hours'),
+              selectedId
+            })
+          };
+        }
+
+      case 'minutes':
+        {
+          const minutesValue = utils.getMinutes(dateOrMidnight);
+
+          const handleMinutesChange = (value, isFinish) => {
+            handleChangeAndOpenNext(utils.setMinutes(dateOrMidnight, value), isFinish);
+          };
+
+          return {
+            value: minutesValue,
+            onChange: handleMinutesChange,
+            children: getMinutesNumbers({
+              utils,
+              value: minutesValue,
+              onChange: handleMinutesChange,
+              getClockNumberText: getMinutesClockNumberText,
+              isDisabled: value => isTimeDisabled(value, 'minutes'),
+              selectedId
+            })
+          };
+        }
+
+      case 'seconds':
+        {
+          const secondsValue = utils.getSeconds(dateOrMidnight);
+
+          const handleSecondsChange = (value, isFinish) => {
+            handleChangeAndOpenNext(utils.setSeconds(dateOrMidnight, value), isFinish);
+          };
+
+          return {
+            value: secondsValue,
+            onChange: handleSecondsChange,
+            children: getMinutesNumbers({
+              utils,
+              value: secondsValue,
+              onChange: handleSecondsChange,
+              getClockNumberText: getSecondsClockNumberText,
+              isDisabled: value => isTimeDisabled(value, 'seconds'),
+              selectedId
+            })
+          };
+        }
+
+      default:
+        throw new Error('You must provide the type for ClockView');
+    }
+  }, [openView, utils, date, ampm, getHoursClockNumberText, getMinutesClockNumberText, getSecondsClockNumberText, meridiemMode, handleChangeAndOpenNext, dateOrMidnight, isTimeDisabled, selectedId]);
+  const ownerState = props;
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsxs(ClockPickerRoot, {
+    ref: ref,
+    className: clsx(classes.root, className),
+    ownerState: ownerState,
+    children: [showViewSwitcher && /*#__PURE__*/_jsx(ClockPickerArrowSwitcher, {
+      className: classes.arrowSwitcher,
+      leftArrowButtonText: leftArrowButtonText,
+      rightArrowButtonText: rightArrowButtonText,
+      components: components,
+      componentsProps: componentsProps,
+      onLeftClick: () => setOpenView(previousView),
+      onRightClick: () => setOpenView(nextView),
+      isLeftDisabled: !previousView,
+      isRightDisabled: !nextView,
+      ownerState: ownerState
+    }), /*#__PURE__*/_jsx(Clock, _extends({
+      autoFocus: autoFocus,
+      date: date,
+      ampmInClock: ampmInClock,
+      type: openView,
+      ampm: ampm,
+      getClockLabelText: getClockLabelText,
+      minutesStep: minutesStep,
+      isTimeDisabled: isTimeDisabled,
+      meridiemMode: meridiemMode,
+      handleMeridiemChange: handleMeridiemChange,
+      selectedId: selectedId
+    }, viewProps))]
+  });
+});
+process.env.NODE_ENV !== "production" ? ClockPicker.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+
+  /**
+   * 12h/24h view for hour selection clock.
+   * @default false
+   */
+  ampm: PropTypes.bool,
+
+  /**
+   * Display ampm controls under the clock (instead of in the toolbar).
+   * @default false
+   */
+  ampmInClock: PropTypes.bool,
+
+  /**
+   * Set to `true` if focus should be moved to clock picker.
+   */
+  autoFocus: PropTypes.bool,
+
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  className: PropTypes.string,
+
+  /**
+   * The components used for each slot.
+   * Either a string to use a HTML element or a component.
+   */
+  components: PropTypes.object,
+
+  /**
+   * The props used for each slot inside.
+   */
+  componentsProps: PropTypes.object,
+
+  /**
+   * Selected date @DateIOType.
+   */
+  date: PropTypes.any,
+
+  /**
+   * Do not ignore date part when validating min/max time.
+   * @default false
+   */
+  disableIgnoringDatePartForTimeValidation: PropTypes.bool,
+
+  /**
+   * Accessible text that helps user to understand which time and view is selected.
+   * @param {ClockPickerView} view The current view rendered.
+   * @param {TDate | null} time The current time.
+   * @param {MuiPickersAdapter<TDate>} adapter The current date adapter.
+   * @returns {string} The clock label.
+   * @default <TDate extends any>(
+   *   view: ClockView,
+   *   time: TDate | null,
+   *   adapter: MuiPickersAdapter<TDate>,
+   * ) =>
+   *   `Select ${view}. ${
+   *     time === null ? 'No time selected' : `Selected time is ${adapter.format(time, 'fullTime')}`
+   *   }`
+   */
+  getClockLabelText: PropTypes.func,
+
+  /**
+   * Get clock number aria-text for hours.
+   * @param {string} hours The hours to format.
+   * @returns {string} the formatted hours text.
+   * @default (hours: string) => `${hours} hours`
+   */
+  getHoursClockNumberText: PropTypes.func,
+
+  /**
+   * Get clock number aria-text for minutes.
+   * @param {string} minutes The minutes to format.
+   * @returns {string} the formatted minutes text.
+   * @default (minutes: string) => `${minutes} minutes`
+   */
+  getMinutesClockNumberText: PropTypes.func,
+
+  /**
+   * Get clock number aria-text for seconds.
+   * @param {string} seconds The seconds to format.
+   * @returns {string} the formatted seconds text.
+   * @default (seconds: string) => `${seconds} seconds`
+   */
+  getSecondsClockNumberText: PropTypes.func,
+
+  /**
+   * Left arrow icon aria-label text.
+   * @default 'open previous view'
+   */
+  leftArrowButtonText: PropTypes.string,
+
+  /**
+   * Max time acceptable time.
+   * For input validation date part of passed object will be ignored if `disableIgnoringDatePartForTimeValidation` not specified.
+   */
+  maxTime: PropTypes.any,
+
+  /**
+   * Min time acceptable time.
+   * For input validation date part of passed object will be ignored if `disableIgnoringDatePartForTimeValidation` not specified.
+   */
+  minTime: PropTypes.any,
+
+  /**
+   * Step over minutes.
+   * @default 1
+   */
+  minutesStep: PropTypes.number,
+
+  /**
+   * On change callback @DateIOType.
+   */
+  onChange: PropTypes.func.isRequired,
+
+  /**
+   * Callback fired on view change.
+   * @param {ClockPickerView} view The new view.
+   */
+  onViewChange: PropTypes.func,
+
+  /**
+   * Initially open view.
+   * @default 'hours'
+   */
+  openTo: PropTypes.oneOf(['hours', 'minutes', 'seconds']),
+
+  /**
+   * Right arrow icon aria-label text.
+   * @default 'open next view'
+   */
+  rightArrowButtonText: PropTypes.string,
+
+  /**
+   * Dynamically check if time is disabled or not.
+   * If returns `false` appropriate time point will ot be acceptable.
+   * @param {number} timeValue The value to check.
+   * @param {ClockPickerView} clockType The clock type of the timeValue.
+   * @returns {boolean} Returns `true` if the time should be disabled
+   */
+  shouldDisableTime: PropTypes.func,
+  showViewSwitcher: PropTypes.bool,
+
+  /**
+   * Controlled open view.
+   */
+  view: PropTypes.oneOf(['hours', 'minutes', 'seconds']),
+
+  /**
+   * Views for calendar picker.
+   * @default ['hours', 'minutes']
+   */
+  views: PropTypes.arrayOf(PropTypes.oneOf(['hours', 'minutes', 'seconds']).isRequired)
+} : void 0;

package/modern/ClockPicker/ClockPointer.js

@@ -0,0 +1,102 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["className", "hasSelected", "isInner", "type", "value"];
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { CLOCK_WIDTH, CLOCK_HOUR_WIDTH } from './shared';
+import { jsx as _jsx } from "react/jsx-runtime";
+const ClockPointerRoot = styled('div')(({
+  theme,
+  ownerState
+}) => _extends({
+  width: 2,
+  backgroundColor: theme.palette.primary.main,
+  position: 'absolute',
+  left: 'calc(50% - 1px)',
+  bottom: '50%',
+  transformOrigin: 'center bottom 0px'
+}, ownerState.toAnimateTransform && {
+  transition: theme.transitions.create(['transform', 'height'])
+}));
+const ClockPointerThumb = styled('div')(({
+  theme,
+  ownerState
+}) => _extends({
+  width: 4,
+  height: 4,
+  backgroundColor: theme.palette.primary.contrastText,
+  borderRadius: '50%',
+  position: 'absolute',
+  top: -21,
+  left: `calc(50% - ${CLOCK_HOUR_WIDTH / 2}px)`,
+  border: `${(CLOCK_HOUR_WIDTH - 4) / 2}px solid ${theme.palette.primary.main}`,
+  boxSizing: 'content-box'
+}, ownerState.hasSelected && {
+  backgroundColor: theme.palette.primary.main
+}));
+/**
+ * @ignore - internal component.
+ * TODO: Remove class
+ */
+
+export class ClockPointer extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      toAnimateTransform: false,
+      previousType: undefined
+    };
+  }
+
+  render() {
+    const _this$props = this.props,
+          {
+      className,
+      isInner,
+      type,
+      value
+    } = _this$props,
+          other = _objectWithoutPropertiesLoose(_this$props, _excluded);
+
+    const ownerState = _extends({}, this.props, this.state);
+
+    const getAngleStyle = () => {
+      const max = type === 'hours' ? 12 : 60;
+      let angle = 360 / max * value;
+
+      if (type === 'hours' && value > 12) {
+        angle -= 360; // round up angle to max 360 degrees
+      }
+
+      return {
+        height: Math.round((isInner ? 0.26 : 0.4) * CLOCK_WIDTH),
+        transform: `rotateZ(${angle}deg)`
+      };
+    };
+
+    return /*#__PURE__*/_jsx(ClockPointerRoot, _extends({
+      style: getAngleStyle(),
+      className: className,
+      ownerState: ownerState
+    }, other, {
+      children: /*#__PURE__*/_jsx(ClockPointerThumb, {
+        ownerState: ownerState
+      })
+    }));
+  }
+
+}
+
+ClockPointer.getDerivedStateFromProps = (nextProps, state) => {
+  if (nextProps.type !== state.previousType) {
+    return {
+      toAnimateTransform: true,
+      previousType: nextProps.type
+    };
+  }
+
+  return {
+    toAnimateTransform: false,
+    previousType: nextProps.type
+  };
+};

package/modern/ClockPicker/clockPickerClasses.js

@@ -0,0 +1,5 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+export function getClockPickerUtilityClass(slot) {
+  return generateUtilityClass('MuiClockPicker', slot);
+}
+export const clockPickerClasses = generateUtilityClasses('MuiClockPicker', ['root', 'arrowSwitcher']);

package/modern/ClockPicker/index.js

@@ -0,0 +1,2 @@
+export { ClockPicker } from './ClockPicker';
+export { clockPickerClasses, getClockPickerUtilityClass } from './clockPickerClasses';