@mui/lab 5.0.0-alpha.75 → 5.0.0-alpha.76

package/CalendarPickerSkeleton/CalendarPickerSkeleton.d.ts

@@ -1,41 +0,0 @@
-import * as React from 'react';
-import { Theme } from '@mui/material/styles';
-import { SxProps } from '@mui/system';
-declare type HTMLDivProps = JSX.IntrinsicElements['div'];
-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 interface CalendarPickerSkeletonProps extends HTMLDivProps {
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<CalendarPickerSkeletonClasses>;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    ref?: React.Ref<HTMLDivElement>;
-}
-export declare type CalendarPickerSkeletonClassKey = keyof CalendarPickerSkeletonClasses;
-export declare function getCalendarPickerSkeletonUtilityClass(slot: string): string;
-export declare const calendarPickerSkeletonClasses: CalendarPickerSkeletonClasses;
-/**
- *
- * Demos:
- *
- * - [Date Picker](https://mui.com/components/date-picker/)
- *
- * API:
- *
- * - [CalendarPickerSkeleton API](https://mui.com/api/calendar-picker-skeleton/)
- */
-declare function CalendarPickerSkeleton(props: CalendarPickerSkeletonProps): JSX.Element;
-declare namespace CalendarPickerSkeleton {
-    var propTypes: any;
-}
-export default CalendarPickerSkeleton;

package/CalendarPickerSkeleton/CalendarPickerSkeleton.js

@@ -1,149 +0,0 @@
-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, generateUtilityClass, generateUtilityClasses } from '@mui/base';
-import { DAY_SIZE, DAY_MARGIN } from '../internal/pickers/constants/dimensions';
-import { jsx as _jsx } from "react/jsx-runtime";
-export function getCalendarPickerSkeletonUtilityClass(slot) {
-  return generateUtilityClass('MuiCalendarPickerSkeleton', slot);
-}
-export const calendarPickerSkeletonClasses = generateUtilityClasses('MuiCalendarPickerSkeleton', ['root', 'week', 'daySkeleton']);
-
-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'
-}));
-process.env.NODE_ENV !== "production" ? CalendarPickerSkeletonDay.propTypes
-/* remove-proptypes */
-= {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-
-  /**
-   * Optional children to infer width and height from.
-   */
-  children: PropTypes.node,
-
-  /**
-   * @ignore
-   */
-  ownerState: PropTypes.object
-} : void 0;
-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/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))
-  }));
-}
-/**
- *
- * Demos:
- *
- * - [Date Picker](https://mui.com/components/date-picker/)
- *
- * API:
- *
- * - [CalendarPickerSkeleton API](https://mui.com/api/calendar-picker-skeleton/)
- */
-
-
-process.env.NODE_ENV !== "production" ? CalendarPickerSkeleton.propTypes
-/* remove-proptypes */
-= {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-
-  /**
-   * @ignore
-   */
-  children: PropTypes.node,
-
-  /**
-   * 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 default CalendarPickerSkeleton;

package/ClockPicker/Clock.d.ts

@@ -1,28 +0,0 @@
-import * as React from 'react';
-import { MuiPickersAdapter } from '../internal/pickers/hooks/useUtils';
-import { PickerSelectionState } from '../internal/pickers/hooks/usePickerState';
-import { useMeridiemMode } from '../internal/pickers/hooks/date-helpers-hooks';
-import { ClockView } from './shared';
-export interface ClockProps<TDate> extends ReturnType<typeof useMeridiemMode> {
-    ampm: boolean;
-    ampmInClock: boolean;
-    autoFocus?: boolean;
-    children: readonly React.ReactNode[];
-    date: TDate | null;
-    getClockLabelText: (view: ClockView, time: TDate | null, adapter: MuiPickersAdapter<TDate>) => string;
-    isTimeDisabled: (timeValue: number, type: ClockView) => 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: ClockView;
-    value: number;
-}
-/**
- * @ignore - internal component.
- */
-declare function Clock<TDate>(props: ClockProps<TDate>): JSX.Element;
-export default Clock;

package/ClockPicker/Clock.js

@@ -1,267 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-
-var _ClockPin, _Typography, _Typography2;
-
-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 '../internal/pickers/hooks/useUtils';
-import { WrapperVariantContext } from '../internal/pickers/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.
- */
-
-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: [_ClockPin || (_ClockPin = /*#__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: _Typography || (_Typography = /*#__PURE__*/_jsx(Typography, {
-          variant: "caption",
-          children: "AM"
-        }))
-      }), /*#__PURE__*/_jsx(ClockPmButton, {
-        disabled: meridiemMode === null,
-        onClick: () => handleMeridiemChange('pm'),
-        ownerState: ownerState,
-        children: _Typography2 || (_Typography2 = /*#__PURE__*/_jsx(Typography, {
-          variant: "caption",
-          children: "PM"
-        }))
-      })]
-    })]
-  });
-}
-
-export default Clock;

package/ClockPicker/ClockNumber.d.ts

@@ -1,19 +0,0 @@
-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.
- */
-declare function ClockNumber(props: ClockNumberProps): JSX.Element;
-export default ClockNumber;

package/ClockPicker/ClockNumber.js

@@ -1,72 +0,0 @@
-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/base';
-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.
- */
-
-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
-  }));
-}
-
-export default ClockNumber;

package/ClockPicker/ClockNumbers.d.ts

@@ -1,24 +0,0 @@
-/// <reference types="react" />
-import { MuiPickersAdapter } from '../internal/pickers/hooks/useUtils';
-import { PickerSelectionState } from '../internal/pickers/hooks/usePickerState';
-interface GetHourNumbersOptions {
-    ampm: boolean;
-    date: unknown;
-    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, date, getClockNumberText, isDisabled, selectedId, utils, }: GetHourNumbersOptions) => JSX.Element[];
-export declare const getMinutesNumbers: ({ utils, value, isDisabled, getClockNumberText, selectedId, }: Omit<GetHourNumbersOptions, "date" | "ampm"> & {
-    value: number;
-}) => JSX.Element[];
-export {};

package/ClockPicker/ClockNumbers.js

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