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

package/modern/YearPicker/PickersYear.js

@@ -1,112 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import clsx from 'clsx';
-import { useForkRef, capitalize } from '@mui/material/utils';
-import { alpha, styled } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses, generateUtilityClass, generateUtilityClasses } from '@mui/base';
-import { WrapperVariantContext } from '../internal/pickers/wrappers/WrapperVariantContext';
-import { jsx as _jsx } from "react/jsx-runtime";
-export function getPickersYearUtilityClass(slot) {
-  return generateUtilityClass('PrivatePickersYear', slot);
-}
-export const pickersYearClasses = generateUtilityClasses('PrivatePickersYear', ['root', 'modeMobile', 'modeDesktop', 'yearButton', 'disabled', 'selected']);
-
-const useUtilityClasses = ownerState => {
-  const {
-    wrapperVariant,
-    disabled,
-    selected,
-    classes
-  } = ownerState;
-  const slots = {
-    root: ['root', wrapperVariant && `mode${capitalize(wrapperVariant)}`],
-    yearButton: ['yearButton', disabled && 'disabled', selected && 'selected']
-  };
-  return composeClasses(slots, getPickersYearUtilityClass, classes);
-};
-
-const PickersYearRoot = styled('div')(({
-  ownerState
-}) => _extends({
-  flexBasis: '33.3%',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center'
-}, ownerState?.wrapperVariant === 'desktop' && {
-  flexBasis: '25%'
-}));
-const PickersYearButton = styled('button')(({
-  theme
-}) => _extends({
-  color: 'unset',
-  backgroundColor: 'transparent',
-  border: 0,
-  outline: 0
-}, theme.typography.subtitle1, {
-  margin: '8px 0',
-  height: 36,
-  width: 72,
-  borderRadius: 18,
-  cursor: 'pointer',
-  '&:focus, &:hover': {
-    backgroundColor: alpha(theme.palette.action.active, theme.palette.action.hoverOpacity)
-  },
-  [`&.${pickersYearClasses.disabled}`]: {
-    color: theme.palette.text.secondary
-  },
-  [`&.${pickersYearClasses.selected}`]: {
-    color: theme.palette.primary.contrastText,
-    backgroundColor: theme.palette.primary.main,
-    '&:focus, &:hover': {
-      backgroundColor: theme.palette.primary.dark
-    }
-  }
-}));
-/**
- * @ignore - internal component.
- */
-
-const PickersYear = /*#__PURE__*/React.forwardRef(function PickersYear(props, forwardedRef) {
-  const {
-    autoFocus,
-    className,
-    children,
-    disabled,
-    onClick,
-    onKeyDown,
-    selected,
-    value
-  } = props;
-  const ref = React.useRef(null);
-  const refHandle = useForkRef(ref, forwardedRef);
-  const wrapperVariant = React.useContext(WrapperVariantContext);
-
-  const ownerState = _extends({}, props, {
-    wrapperVariant
-  });
-
-  const classes = useUtilityClasses(ownerState); // TODO: Can we just forward this to the button?
-
-  React.useEffect(() => {
-    if (autoFocus) {
-      // `ref.current` being `null` would be a bug in MUIu
-      ref.current.focus();
-    }
-  }, [autoFocus]);
-  return /*#__PURE__*/_jsx(PickersYearRoot, {
-    className: clsx(classes.root, className),
-    ownerState: ownerState,
-    children: /*#__PURE__*/_jsx(PickersYearButton, {
-      ref: refHandle,
-      disabled: disabled,
-      type: "button",
-      tabIndex: selected ? 0 : -1,
-      onClick: event => onClick(event, value),
-      onKeyDown: event => onKeyDown(event, value),
-      className: classes.yearButton,
-      ownerState: ownerState,
-      children: children
-    })
-  });
-});
-export default PickersYear;

package/modern/YearPicker/YearPicker.js

@@ -1,251 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { useTheme, styled, useThemeProps as useThemProps } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
-import clsx from 'clsx';
-import PickersYear from './PickersYear';
-import { useUtils, useNow } from '../internal/pickers/hooks/useUtils';
-import { findClosestEnabledDate } from '../internal/pickers/date-utils';
-import { WrapperVariantContext } from '../internal/pickers/wrappers/WrapperVariantContext';
-import { getYearPickerUtilityClass } from './yearPickerClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
-  const slots = {
-    root: ['root']
-  };
-  return composeClasses(slots, getYearPickerUtilityClass, classes);
-};
-
-const YearPickerRoot = styled('div', {
-  name: 'MuiYearPicker',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
-})({
-  display: 'flex',
-  flexDirection: 'row',
-  flexWrap: 'wrap',
-  overflowY: 'auto',
-  height: '100%',
-  margin: '0 4px'
-});
-const YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inProps, ref) {
-  const props = useThemProps({
-    props: inProps,
-    name: 'MuiYearPicker'
-  });
-  const {
-    autoFocus,
-    className,
-    date,
-    disabled,
-    disableFuture,
-    disablePast,
-    isDateDisabled,
-    maxDate,
-    minDate,
-    onChange,
-    onFocusedDayChange,
-    onYearChange,
-    readOnly,
-    shouldDisableYear
-  } = props;
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
-  const now = useNow();
-  const theme = useTheme();
-  const utils = useUtils();
-  const selectedDate = date || now;
-  const currentYear = utils.getYear(selectedDate);
-  const wrapperVariant = React.useContext(WrapperVariantContext);
-  const selectedYearRef = React.useRef(null);
-  const [focusedYear, setFocusedYear] = React.useState(currentYear);
-
-  const handleYearSelection = (event, year, isFinish = 'finish') => {
-    if (readOnly) {
-      return;
-    }
-
-    const submitDate = newDate => {
-      onChange(newDate, isFinish);
-
-      if (onFocusedDayChange) {
-        onFocusedDayChange(newDate || now);
-      }
-
-      if (onYearChange) {
-        onYearChange(newDate);
-      }
-    };
-
-    const newDate = utils.setYear(selectedDate, year);
-
-    if (isDateDisabled(newDate)) {
-      const closestEnabledDate = findClosestEnabledDate({
-        utils,
-        date: newDate,
-        minDate,
-        maxDate,
-        disablePast: Boolean(disablePast),
-        disableFuture: Boolean(disableFuture),
-        shouldDisableDate: isDateDisabled
-      });
-      submitDate(closestEnabledDate || now);
-    } else {
-      submitDate(newDate);
-    }
-  };
-
-  const focusYear = React.useCallback(year => {
-    if (!isDateDisabled(utils.setYear(selectedDate, year))) {
-      setFocusedYear(year);
-    }
-  }, [selectedDate, isDateDisabled, utils]);
-  const yearsInRow = wrapperVariant === 'desktop' ? 4 : 3;
-
-  const handleKeyDown = (event, year) => {
-    switch (event.key) {
-      case 'ArrowUp':
-        focusYear(year - yearsInRow);
-        event.preventDefault();
-        break;
-
-      case 'ArrowDown':
-        focusYear(year + yearsInRow);
-        event.preventDefault();
-        break;
-
-      case 'ArrowLeft':
-        focusYear(year + (theme.direction === 'ltr' ? -1 : 1));
-        event.preventDefault();
-        break;
-
-      case 'ArrowRight':
-        focusYear(year + (theme.direction === 'ltr' ? 1 : -1));
-        event.preventDefault();
-        break;
-
-      default:
-        break;
-    }
-  };
-
-  return /*#__PURE__*/_jsx(YearPickerRoot, {
-    ref: ref,
-    className: clsx(classes.root, className),
-    ownerState: ownerState,
-    children: utils.getYearRange(minDate, maxDate).map(year => {
-      const yearNumber = utils.getYear(year);
-      const selected = yearNumber === currentYear;
-      return /*#__PURE__*/_jsx(PickersYear, {
-        selected: selected,
-        value: yearNumber,
-        onClick: handleYearSelection,
-        onKeyDown: handleKeyDown,
-        autoFocus: autoFocus && yearNumber === focusedYear,
-        ref: selected ? selectedYearRef : undefined,
-        disabled: disabled || disablePast && utils.isBeforeYear(year, now) || disableFuture && utils.isAfterYear(year, now) || shouldDisableYear && shouldDisableYear(year),
-        children: utils.format(year, 'year')
-      }, utils.format(year, 'year'));
-    })
-  });
-});
-process.env.NODE_ENV !== "production" ? YearPicker.propTypes
-/* remove-proptypes */
-= {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-
-  /**
-   * @ignore
-   */
-  autoFocus: PropTypes.bool,
-
-  /**
-   * @ignore
-   */
-  classes: PropTypes.object,
-
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-
-  /**
-   * @ignore
-   */
-  date: PropTypes.any,
-
-  /**
-   * @ignore
-   */
-  disabled: PropTypes.bool,
-
-  /**
-   * @ignore
-   */
-  disableFuture: PropTypes.bool,
-
-  /**
-   * @ignore
-   */
-  disablePast: PropTypes.bool,
-
-  /**
-   * @ignore
-   */
-  isDateDisabled: PropTypes.func.isRequired,
-
-  /**
-   * @ignore
-   */
-  maxDate: PropTypes.any.isRequired,
-
-  /**
-   * @ignore
-   */
-  minDate: PropTypes.any.isRequired,
-
-  /**
-   * @ignore
-   */
-  onChange: PropTypes.func.isRequired,
-
-  /**
-   * @ignore
-   */
-  onFocusedDayChange: PropTypes.func,
-
-  /**
-   * Callback firing on year change @DateIOType.
-   */
-  onYearChange: PropTypes.func,
-
-  /**
-   * @ignore
-   */
-  readOnly: PropTypes.bool,
-
-  /**
-   * Disable specific years dynamically.
-   * Works like `shouldDisableDate` but for year selection view @DateIOType.
-   */
-  shouldDisableYear: PropTypes.func
-} : void 0;
-/**
- *
- * Demos:
- *
- * - [Date Picker](https://mui.com/components/date-picker/)
- *
- * API:
- *
- * - [YearPicker API](https://mui.com/api/year-picker/)
- */
-
-export default YearPicker;

package/modern/YearPicker/yearPickerClasses.js

@@ -1,6 +0,0 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
-export function getYearPickerUtilityClass(slot) {
-  return generateUtilityClass('MuiYearPicker', slot);
-}
-const yearPickerClasses = generateUtilityClasses('MuiYearPicker', ['root']);
-export default yearPickerClasses;

package/modern/internal/pickers/KeyboardDateInput.js

@@ -1,59 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["components", "disableOpenPicker", "getOpenDialogAriaText", "InputAdornmentProps", "InputProps", "inputRef", "openPicker", "OpenPickerButtonProps", "renderInput"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import IconButton from '@mui/material/IconButton';
-import InputAdornment from '@mui/material/InputAdornment';
-import { useUtils } from './hooks/useUtils';
-import CalendarIcon from '../svg-icons/Calendar';
-import { useMaskedInput } from './hooks/useMaskedInput';
-import { getTextFieldAriaText } from './text-field-helper';
-import { jsx as _jsx } from "react/jsx-runtime";
-export const KeyboardDateInput = /*#__PURE__*/React.forwardRef(function KeyboardDateInput(props, ref) {
-  const {
-    components = {},
-    disableOpenPicker,
-    getOpenDialogAriaText = getTextFieldAriaText,
-    InputAdornmentProps,
-    InputProps,
-    inputRef,
-    openPicker,
-    OpenPickerButtonProps,
-    renderInput
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
-  const utils = useUtils();
-  const textFieldProps = useMaskedInput(other);
-  const adornmentPosition = InputAdornmentProps?.position || 'end';
-  const OpenPickerIcon = components.OpenPickerIcon || CalendarIcon;
-  return renderInput(_extends({
-    ref,
-    inputRef
-  }, textFieldProps, {
-    InputProps: _extends({}, InputProps, {
-      [`${adornmentPosition}Adornment`]: disableOpenPicker ? undefined : /*#__PURE__*/_jsx(InputAdornment, _extends({
-        position: adornmentPosition
-      }, InputAdornmentProps, {
-        children: /*#__PURE__*/_jsx(IconButton, _extends({
-          edge: adornmentPosition,
-          disabled: other.disabled || other.readOnly,
-          "aria-label": getOpenDialogAriaText(other.rawValue, utils)
-        }, OpenPickerButtonProps, {
-          onClick: openPicker,
-          children: /*#__PURE__*/_jsx(OpenPickerIcon, {})
-        }))
-      }))
-    })
-  }));
-});
-process.env.NODE_ENV !== "production" ? KeyboardDateInput.propTypes = {
-  acceptRegex: PropTypes.instanceOf(RegExp),
-  getOpenDialogAriaText: PropTypes.func,
-  mask: PropTypes.string,
-  OpenPickerButtonProps: PropTypes.object,
-  renderInput: PropTypes.func.isRequired,
-  rifmFormatter: PropTypes.func
-} : void 0;
-export default KeyboardDateInput;

package/modern/internal/pickers/Picker/Picker.js

@@ -1,130 +0,0 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["autoFocus", "className", "date", "DateInputProps", "isMobileKeyboardViewOpen", "onDateChange", "onViewChange", "openTo", "orientation", "showToolbar", "toggleMobileKeyboardView", "ToolbarComponent", "toolbarFormat", "toolbarPlaceholder", "toolbarTitle", "views"];
-import * as React from 'react';
-import { styled } from '@mui/material/styles';
-import { useViews } from '../hooks/useViews';
-import ClockPicker from '../../../ClockPicker/ClockPicker';
-import CalendarPicker from '../../../CalendarPicker';
-import { KeyboardDateInput } from '../KeyboardDateInput';
-import { useIsLandscape } from '../hooks/useIsLandscape';
-import { WrapperVariantContext } from '../wrappers/WrapperVariantContext';
-import PickerView from './PickerView';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export const MobileKeyboardInputView = styled('div')({
-  padding: '16px 24px'
-});
-const PickerRoot = styled('div')(({
-  ownerState
-}) => _extends({
-  display: 'flex',
-  flexDirection: 'column'
-}, ownerState.isLandscape && {
-  flexDirection: 'row'
-}));
-const MobileKeyboardTextFieldProps = {
-  fullWidth: true
-};
-
-const isDatePickerView = view => view === 'year' || view === 'month' || view === 'day';
-
-const isTimePickerView = view => view === 'hours' || view === 'minutes' || view === 'seconds';
-
-function Picker(props) {
-  const {
-    autoFocus,
-    date,
-    DateInputProps,
-    isMobileKeyboardViewOpen,
-    onDateChange,
-    onViewChange,
-    openTo,
-    orientation,
-    showToolbar,
-    toggleMobileKeyboardView,
-    ToolbarComponent = () => null,
-    toolbarFormat,
-    toolbarPlaceholder,
-    toolbarTitle,
-    views
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
-  const isLandscape = useIsLandscape(views, orientation);
-  const wrapperVariant = React.useContext(WrapperVariantContext);
-  const toShowToolbar = typeof showToolbar === 'undefined' ? wrapperVariant !== 'desktop' : showToolbar;
-  const handleDateChange = React.useCallback((newDate, selectionState) => {
-    onDateChange(newDate, wrapperVariant, selectionState);
-  }, [onDateChange, wrapperVariant]);
-  const handleViewChange = React.useCallback(newView => {
-    if (isMobileKeyboardViewOpen) {
-      toggleMobileKeyboardView();
-    }
-
-    if (onViewChange) {
-      onViewChange(newView);
-    }
-  }, [isMobileKeyboardViewOpen, onViewChange, toggleMobileKeyboardView]);
-  const {
-    openView,
-    nextView,
-    previousView,
-    setOpenView,
-    handleChangeAndOpenNext
-  } = useViews({
-    view: undefined,
-    views,
-    openTo,
-    onChange: handleDateChange,
-    onViewChange: handleViewChange
-  });
-  return /*#__PURE__*/_jsxs(PickerRoot, {
-    ownerState: {
-      isLandscape
-    },
-    children: [toShowToolbar && /*#__PURE__*/_jsx(ToolbarComponent, _extends({}, other, {
-      views: views,
-      isLandscape: isLandscape,
-      date: date,
-      onChange: handleDateChange,
-      setOpenView: setOpenView,
-      openView: openView,
-      toolbarTitle: toolbarTitle,
-      toolbarFormat: toolbarFormat,
-      toolbarPlaceholder: toolbarPlaceholder,
-      isMobileKeyboardViewOpen: isMobileKeyboardViewOpen,
-      toggleMobileKeyboardView: toggleMobileKeyboardView
-    })), /*#__PURE__*/_jsx(PickerView, {
-      children: isMobileKeyboardViewOpen ? /*#__PURE__*/_jsx(MobileKeyboardInputView, {
-        children: /*#__PURE__*/_jsx(KeyboardDateInput, _extends({}, DateInputProps, {
-          ignoreInvalidInputs: true,
-          disableOpenPicker: true,
-          TextFieldProps: MobileKeyboardTextFieldProps
-        }))
-      }) : /*#__PURE__*/_jsxs(React.Fragment, {
-        children: [isDatePickerView(openView) && /*#__PURE__*/_jsx(CalendarPicker, _extends({
-          autoFocus: autoFocus,
-          date: date,
-          onViewChange: setOpenView,
-          onChange: handleChangeAndOpenNext,
-          view: openView // Unclear why the predicate `isDatePickerView` does not imply the casted type
-          ,
-          views: views.filter(isDatePickerView)
-        }, other)), isTimePickerView(openView) && /*#__PURE__*/_jsx(ClockPicker, _extends({}, other, {
-          autoFocus: autoFocus,
-          date: date,
-          view: openView,
-          onChange: handleChangeAndOpenNext,
-          openNextView: () => setOpenView(nextView),
-          openPreviousView: () => setOpenView(previousView),
-          nextViewAvailable: !nextView,
-          previousViewAvailable: !previousView || isDatePickerView(previousView),
-          showViewSwitcher: wrapperVariant === 'desktop'
-        }))]
-      })
-    })]
-  });
-}
-
-export default Picker;

package/modern/internal/pickers/Picker/PickerView.js

@@ -1,11 +0,0 @@
-import { styled } from '@mui/material/styles';
-import { DIALOG_WIDTH, VIEW_HEIGHT } from '../constants/dimensions';
-const PickerView = styled('div')({
-  overflowX: 'hidden',
-  width: DIALOG_WIDTH,
-  maxHeight: VIEW_HEIGHT,
-  display: 'flex',
-  flexDirection: 'column',
-  margin: '0 auto'
-});
-export default PickerView;

package/modern/internal/pickers/PickersArrowSwitcher.js

@@ -1,91 +0,0 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "className", "components", "componentsProps", "isLeftDisabled", "isLeftHidden", "isRightDisabled", "isRightHidden", "leftArrowButtonText", "onLeftClick", "onRightClick", "rightArrowButtonText"];
-import * as React from 'react';
-import Typography from '@mui/material/Typography';
-import { useTheme, styled } from '@mui/material/styles';
-import IconButton from '@mui/material/IconButton';
-import ArrowLeftIcon from '../svg-icons/ArrowLeft';
-import ArrowRightIcon from '../svg-icons/ArrowRight';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const PickersArrowSwitcherRoot = styled('div')({
-  display: 'flex'
-});
-const PickersArrowSwitcherSpacer = styled('div')(({
-  theme
-}) => ({
-  width: theme.spacing(3)
-}));
-const PickersArrowSwitcherButton = styled(IconButton)(({
-  ownerState
-}) => _extends({}, ownerState.hidden && {
-  visibility: 'hidden'
-}));
-const PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function PickersArrowSwitcher(props, ref) {
-  const {
-    children,
-    className,
-    components = {},
-    componentsProps = {},
-    isLeftDisabled,
-    isLeftHidden,
-    isRightDisabled,
-    isRightHidden,
-    leftArrowButtonText,
-    onLeftClick,
-    onRightClick,
-    rightArrowButtonText
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
-  const theme = useTheme();
-  const isRtl = theme.direction === 'rtl';
-  const leftArrowButtonProps = componentsProps.leftArrowButton || {};
-  const LeftArrowIcon = components.LeftArrowIcon || ArrowLeftIcon;
-  const rightArrowButtonProps = componentsProps.rightArrowButton || {};
-  const RightArrowIcon = components.RightArrowIcon || ArrowRightIcon;
-  const ownerState = props;
-  return /*#__PURE__*/_jsxs(PickersArrowSwitcherRoot, _extends({
-    ref: ref,
-    className: className,
-    ownerState: ownerState
-  }, other, {
-    children: [/*#__PURE__*/_jsx(PickersArrowSwitcherButton, _extends({
-      as: components.LeftArrowButton,
-      size: "small",
-      "aria-label": leftArrowButtonText,
-      title: leftArrowButtonText,
-      disabled: isLeftDisabled,
-      edge: "end",
-      onClick: onLeftClick
-    }, leftArrowButtonProps, {
-      className: leftArrowButtonProps.className,
-      ownerState: _extends({}, ownerState, leftArrowButtonProps, {
-        hidden: isLeftHidden
-      }),
-      children: isRtl ? /*#__PURE__*/_jsx(RightArrowIcon, {}) : /*#__PURE__*/_jsx(LeftArrowIcon, {})
-    })), children ? /*#__PURE__*/_jsx(Typography, {
-      variant: "subtitle1",
-      component: "span",
-      children: children
-    }) : /*#__PURE__*/_jsx(PickersArrowSwitcherSpacer, {
-      ownerState: ownerState
-    }), /*#__PURE__*/_jsx(PickersArrowSwitcherButton, _extends({
-      as: components.RightArrowButton,
-      size: "small",
-      "aria-label": rightArrowButtonText,
-      title: rightArrowButtonText,
-      edge: "start",
-      disabled: isRightDisabled,
-      onClick: onRightClick
-    }, rightArrowButtonProps, {
-      className: rightArrowButtonProps.className,
-      ownerState: _extends({}, ownerState, rightArrowButtonProps, {
-        hidden: isRightHidden
-      }),
-      children: isRtl ? /*#__PURE__*/_jsx(LeftArrowIcon, {}) : /*#__PURE__*/_jsx(RightArrowIcon, {})
-    }))]
-  }));
-});
-export default PickersArrowSwitcher;