@mui/x-date-pickers 9.0.0-alpha.1 → 9.0.0-alpha.2

package/TimeClock/ClockNumber.d.mts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { ClockNumberClasses } from "./clockNumberClasses.mjs";
+import { PickerOwnerState } from "../models/pickers.mjs";
+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;
+  classes?: Partial<ClockNumberClasses>;
+}
+export interface ClockNumberOwnerState extends PickerOwnerState {
+  /**
+   * `true` if the clock number is in the inner clock ring.
+   * When used with meridiem, all the hours are in the outer ring.
+   * When used without meridiem, the hours from 1 to 12 are in the outer ring and the hours from 13 to 24 are in the inner ring.
+   * The minutes are always in the outer ring.
+   */
+  isClockNumberInInnerRing: boolean;
+  /**
+   * `true` if the clock number is selected.
+   */
+  isClockNumberSelected: boolean;
+  /**
+   * `true` if the clock number is disabled.
+   */
+  isClockNumberDisabled: boolean;
+}
+/**
+ * @ignore - internal component.
+ */
+export declare function ClockNumber(inProps: ClockNumberProps): import("react/jsx-runtime").JSX.Element;

package/TimeClock/ClockNumber.mjs

@@ -0,0 +1,102 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["className", "classes", "disabled", "index", "inner", "label", "selected"];
+import * as React from 'react';
+import clsx from 'clsx';
+import { styled, useThemeProps } from '@mui/material/styles';
+import composeClasses from '@mui/utils/composeClasses';
+import { CLOCK_WIDTH, CLOCK_HOUR_WIDTH } from "./shared.mjs";
+import { getClockNumberUtilityClass, clockNumberClasses } from "./clockNumberClasses.mjs";
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = (classes, ownerState) => {
+  const slots = {
+    root: ['root', ownerState.isClockNumberSelected && 'selected', ownerState.isClockNumberDisabled && 'disabled']
+  };
+  return composeClasses(slots, getClockNumberUtilityClass, classes);
+};
+const ClockNumberRoot = styled('span', {
+  name: 'MuiClockNumber',
+  slot: 'Root',
+  overridesResolver: (_, styles) => [styles.root, {
+    [`&.${clockNumberClasses.disabled}`]: styles.disabled
+  }, {
+    [`&.${clockNumberClasses.selected}`]: styles.selected
+  }]
+})(({
+  theme
+}) => ({
+  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.vars || theme).palette.text.primary,
+  fontFamily: theme.typography.fontFamily,
+  '&:focused': {
+    backgroundColor: (theme.vars || theme).palette.background.paper
+  },
+  [`&.${clockNumberClasses.selected}`]: {
+    color: (theme.vars || theme).palette.primary.contrastText
+  },
+  [`&.${clockNumberClasses.disabled}`]: {
+    pointerEvents: 'none',
+    color: (theme.vars || theme).palette.text.disabled
+  },
+  variants: [{
+    props: {
+      isClockNumberInInnerRing: true
+    },
+    style: _extends({}, theme.typography.body2, {
+      color: (theme.vars || theme).palette.text.secondary
+    })
+  }]
+}));
+
+/**
+ * @ignore - internal component.
+ */
+export function ClockNumber(inProps) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiClockNumber'
+  });
+  const {
+      className,
+      classes: classesProp,
+      disabled,
+      index,
+      inner,
+      label,
+      selected
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    ownerState: pickerOwnerState
+  } = usePickerPrivateContext();
+  const ownerState = _extends({}, pickerOwnerState, {
+    isClockNumberInInnerRing: inner,
+    isClockNumberSelected: selected,
+    isClockNumberDisabled: disabled
+  });
+  const classes = useUtilityClasses(classesProp, ownerState);
+  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(classes.root, className),
+    "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/TimeClock/ClockNumbers.d.mts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { MuiPickersAdapter, PickerValidDate } from "../models/index.mjs";
+import type { PickerSelectionState } from "../internals/hooks/usePicker/index.mjs";
+interface GetHourNumbersOptions {
+  ampm: boolean;
+  value: PickerValidDate | null;
+  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;
+  adapter: MuiPickersAdapter;
+}
+/**
+ * @ignore - internal component.
+ */
+export declare const getHourNumbers: ({
+  ampm,
+  value,
+  getClockNumberText,
+  isDisabled,
+  selectedId,
+  adapter
+}: GetHourNumbersOptions) => React.JSX.Element[];
+export declare const getMinutesNumbers: ({
+  adapter,
+  value,
+  isDisabled,
+  getClockNumberText,
+  selectedId
+}: Omit<GetHourNumbersOptions, "ampm" | "value"> & {
+  value: number;
+}) => import("react/jsx-runtime").JSX.Element[];
+export {};

package/TimeClock/ClockNumbers.mjs

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { ClockNumber } from "./ClockNumber.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @ignore - internal component.
+ */
+export const getHourNumbers = ({
+  ampm,
+  value,
+  getClockNumberText,
+  isDisabled,
+  selectedId,
+  adapter
+}) => {
+  const currentHours = value ? adapter.getHours(value) : 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 = adapter.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 = ({
+  adapter,
+  value,
+  isDisabled,
+  getClockNumberText,
+  selectedId
+}) => {
+  const f = adapter.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/TimeClock/ClockPointer.d.mts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { PickerOwnerState, TimeView } from "../models/index.mjs";
+import { ClockPointerClasses } from "./clockPointerClasses.mjs";
+export interface ClockPointerProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * `true` if the pointer is between two clock values.
+   * On the `hours` view, it is always false.
+   * On the `minutes` view, it is true if the pointer is on a value that is not a multiple of 5.
+   */
+  isBetweenTwoClockValues: boolean;
+  isInner: boolean;
+  type: TimeView;
+  viewValue: number;
+  classes?: Partial<ClockPointerClasses>;
+}
+export interface ClockPointerOwnerState extends PickerOwnerState {
+  /**
+   * `true` if the clock pointer should animate.
+   */
+  isClockPointerAnimated: boolean;
+  /**
+   * `true` if the pointer is between two clock values.
+   * On the `hours` view, it is always false.
+   * On the `minutes` view, it is true if the pointer is on a value that is not a multiple of 5.
+   */
+  isClockPointerBetweenTwoValues: boolean;
+}
+/**
+ * @ignore - internal component.
+ */
+export declare function ClockPointer(inProps: ClockPointerProps): import("react/jsx-runtime").JSX.Element;

package/TimeClock/ClockPointer.mjs

@@ -0,0 +1,117 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className", "classes", "isBetweenTwoClockValues", "isInner", "type", "viewValue"];
+import * as React from 'react';
+import clsx from 'clsx';
+import { styled, useThemeProps } from '@mui/material/styles';
+import composeClasses from '@mui/utils/composeClasses';
+import { CLOCK_WIDTH, CLOCK_HOUR_WIDTH } from "./shared.mjs";
+import { getClockPointerUtilityClass } from "./clockPointerClasses.mjs";
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = classes => {
+  const slots = {
+    root: ['root'],
+    thumb: ['thumb']
+  };
+  return composeClasses(slots, getClockPointerUtilityClass, classes);
+};
+const ClockPointerRoot = styled('div', {
+  name: 'MuiClockPointer',
+  slot: 'Root'
+})(({
+  theme
+}) => ({
+  width: 2,
+  backgroundColor: (theme.vars || theme).palette.primary.main,
+  position: 'absolute',
+  left: 'calc(50% - 1px)',
+  bottom: '50%',
+  transformOrigin: 'center bottom 0px',
+  variants: [{
+    props: {
+      isClockPointerAnimated: true
+    },
+    style: {
+      transition: theme.transitions.create(['transform', 'height'])
+    }
+  }]
+}));
+const ClockPointerThumb = styled('div', {
+  name: 'MuiClockPointer',
+  slot: 'Thumb'
+})(({
+  theme
+}) => ({
+  width: 4,
+  height: 4,
+  backgroundColor: (theme.vars || 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.vars || theme).palette.primary.main}`,
+  boxSizing: 'content-box',
+  variants: [{
+    props: {
+      isClockPointerBetweenTwoValues: false
+    },
+    style: {
+      backgroundColor: (theme.vars || theme).palette.primary.main
+    }
+  }]
+}));
+
+/**
+ * @ignore - internal component.
+ */
+export function ClockPointer(inProps) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiClockPointer'
+  });
+  const {
+      className,
+      classes: classesProp,
+      isBetweenTwoClockValues,
+      isInner,
+      type,
+      viewValue
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const previousType = React.useRef(type);
+  React.useEffect(() => {
+    previousType.current = type;
+  }, [type]);
+  const {
+    ownerState: pickerOwnerState
+  } = usePickerPrivateContext();
+  const ownerState = _extends({}, pickerOwnerState, {
+    isClockPointerAnimated: previousType.current !== type,
+    isClockPointerBetweenTwoValues: isBetweenTwoClockValues
+  });
+  const classes = useUtilityClasses(classesProp);
+  const getAngleStyle = () => {
+    const max = type === 'hours' ? 12 : 60;
+    let angle = 360 / max * viewValue;
+    if (type === 'hours' && viewValue > 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: clsx(classes.root, className),
+    ownerState: ownerState
+  }, other, {
+    children: /*#__PURE__*/_jsx(ClockPointerThumb, {
+      ownerState: ownerState,
+      className: classes.thumb
+    })
+  }));
+}

package/TimeClock/TimeClock.d.mts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { TimeClockProps } from "./TimeClock.types.mjs";
+type TimeClockComponent = ((props: TimeClockProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+  propTypes?: any;
+};
+/**
+ * Demos:
+ *
+ * - [TimePicker](https://mui.com/x/react-date-pickers/time-picker/)
+ * - [TimeClock](https://mui.com/x/react-date-pickers/time-clock/)
+ *
+ * API:
+ *
+ * - [TimeClock API](https://mui.com/x/api/date-pickers/time-clock/)
+ */
+export declare const TimeClock: TimeClockComponent;
+export {};

package/TimeClock/TimeClock.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TimeClock = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/formatErrorMessage"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -223,7 +224,7 @@ const TimeClock = exports.TimeClock = /*#__PURE__*/React.forwardRef(function Tim
           }) || !isValidValue(rawValue);
         }
       default:
-        throw new Error('not supported');
+        throw /* minify-error-disabled */new Error('not supported');
     }
   }, [ampm, valueOrReferenceDate, disableIgnoringDatePartForTimeValidation, maxTime, meridiemMode, minTime, minutesStep, shouldDisableTime, adapter, disableFuture, disablePast, now, views]);
   const viewProps = React.useMemo(() => {
@@ -301,7 +302,7 @@ const TimeClock = exports.TimeClock = /*#__PURE__*/React.forwardRef(function Tim
           };
         }
       default:
-        throw new Error('You must provide the type for ClockView');
+        throw new Error(process.env.NODE_ENV !== "production" ? 'MUI X: You must provide the type for ClockView' : (0, _formatErrorMessage2.default)(147));
     }
   }, [view, adapter, value, ampm, translations.hoursClockNumberText, translations.minutesClockNumberText, translations.secondsClockNumberText, meridiemMode, setValueAndGoToNextView, valueOrReferenceDate, isTimeDisabled, selectedId, disabled]);
   const classes = useUtilityClasses(classesProp);