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

package/modern/TimeClock/ClockNumber.js

@@ -1,102 +0,0 @@
-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.js";
-import { getClockNumberUtilityClass, clockNumberClasses } from "./clockNumberClasses.js";
-import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
-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/modern/TimeClock/ClockNumbers.d.ts

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

package/modern/TimeClock/ClockNumbers.js

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

@@ -1,19 +0,0 @@
-import * as React from 'react';
-import { TimeView } from "../models/index.js";
-import { ClockPointerClasses } from "./clockPointerClasses.js";
-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>;
-}
-/**
- * @ignore - internal component.
- */
-export declare function ClockPointer(inProps: ClockPointerProps): React.JSX.Element;

package/modern/TimeClock/ClockPointer.js

@@ -1,119 +0,0 @@
-'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.js";
-import { getClockPointerUtilityClass } from "./clockPointerClasses.js";
-import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
-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',
-  overridesResolver: (_, styles) => styles.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',
-  overridesResolver: (_, styles) => styles.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/modern/TimeClock/TimeClock.d.ts

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import { TimeClockProps } from "./TimeClock.types.js";
-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 {};