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

package/legacy/DateTimePicker/DateTimePickerToolbar.js

@@ -1,151 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-
-var _DateTimePickerToolba, _DateTimePickerToolba2;
-
-import * as React from 'react';
-import { styled } from '@mui/material/styles';
-import { generateUtilityClasses } from '@mui/base';
-import PickersToolbarText from '../internal/pickers/PickersToolbarText';
-import PickersToolbar from '../internal/pickers/PickersToolbar';
-import PickersToolbarButton from '../internal/pickers/PickersToolbarButton';
-import DateTimePickerTabs from './DateTimePickerTabs';
-import { useUtils } from '../internal/pickers/hooks/useUtils';
-import { WrapperVariantContext } from '../internal/pickers/wrappers/WrapperVariantContext';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var classes = generateUtilityClasses('PrivateDateTimePickerToolbar', ['penIcon']);
-var DateTimePickerToolbarRoot = styled(PickersToolbar)(_defineProperty({
-  paddingLeft: 16,
-  paddingRight: 16,
-  justifyContent: 'space-around'
-}, "& .".concat(classes.penIcon), {
-  position: 'absolute',
-  top: 8,
-  right: 8
-}));
-var DateTimePickerToolbarDateContainer = styled('div')({
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'flex-start'
-});
-var DateTimePickerToolbarTimeContainer = styled('div')({
-  display: 'flex'
-});
-var DateTimePickerToolbarSeparator = styled(PickersToolbarText)({
-  margin: '0 4px 0 2px',
-  cursor: 'default'
-});
-/**
- * @ignore - internal component.
- */
-
-var DateTimePickerToolbar = function DateTimePickerToolbar(props) {
-  var ampm = props.ampm,
-      date = props.date,
-      dateRangeIcon = props.dateRangeIcon,
-      hideTabs = props.hideTabs,
-      isMobileKeyboardViewOpen = props.isMobileKeyboardViewOpen,
-      onChange = props.onChange,
-      openView = props.openView,
-      setOpenView = props.setOpenView,
-      timeIcon = props.timeIcon,
-      toggleMobileKeyboardView = props.toggleMobileKeyboardView,
-      toolbarFormat = props.toolbarFormat,
-      _props$toolbarPlaceho = props.toolbarPlaceholder,
-      toolbarPlaceholder = _props$toolbarPlaceho === void 0 ? '––' : _props$toolbarPlaceho,
-      _props$toolbarTitle = props.toolbarTitle,
-      toolbarTitle = _props$toolbarTitle === void 0 ? 'Select date & time' : _props$toolbarTitle,
-      views = props.views,
-      other = _objectWithoutProperties(props, ["ampm", "date", "dateRangeIcon", "hideTabs", "isMobileKeyboardViewOpen", "onChange", "openView", "setOpenView", "timeIcon", "toggleMobileKeyboardView", "toolbarFormat", "toolbarPlaceholder", "toolbarTitle", "views"]);
-
-  var utils = useUtils();
-  var wrapperVariant = React.useContext(WrapperVariantContext);
-  var showTabs = wrapperVariant === 'desktop' ? true : !hideTabs && typeof window !== 'undefined' && window.innerHeight > 667;
-
-  var formatHours = function formatHours(time) {
-    return ampm ? utils.format(time, 'hours12h') : utils.format(time, 'hours24h');
-  };
-
-  var dateText = React.useMemo(function () {
-    if (!date) {
-      return toolbarPlaceholder;
-    }
-
-    if (toolbarFormat) {
-      return utils.formatByString(date, toolbarFormat);
-    }
-
-    return utils.format(date, 'shortDate');
-  }, [date, toolbarFormat, toolbarPlaceholder, utils]);
-  return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [wrapperVariant !== 'desktop' && /*#__PURE__*/_jsxs(DateTimePickerToolbarRoot, _extends({
-      toolbarTitle: toolbarTitle,
-      penIconClassName: classes.penIcon,
-      isMobileKeyboardViewOpen: isMobileKeyboardViewOpen,
-      toggleMobileKeyboardView: toggleMobileKeyboardView
-    }, other, {
-      isLandscape: false,
-      children: [/*#__PURE__*/_jsxs(DateTimePickerToolbarDateContainer, {
-        children: [views.includes('year') && /*#__PURE__*/_jsx(PickersToolbarButton, {
-          tabIndex: -1,
-          variant: "subtitle1",
-          onClick: function onClick() {
-            return setOpenView('year');
-          },
-          selected: openView === 'year',
-          value: date ? utils.format(date, 'year') : '–'
-        }), views.includes('day') && /*#__PURE__*/_jsx(PickersToolbarButton, {
-          tabIndex: -1,
-          variant: "h4",
-          onClick: function onClick() {
-            return setOpenView('day');
-          },
-          selected: openView === 'day',
-          value: dateText
-        })]
-      }), /*#__PURE__*/_jsxs(DateTimePickerToolbarTimeContainer, {
-        children: [views.includes('hours') && /*#__PURE__*/_jsx(PickersToolbarButton, {
-          variant: "h3",
-          onClick: function onClick() {
-            return setOpenView('hours');
-          },
-          selected: openView === 'hours',
-          value: date ? formatHours(date) : '--'
-        }), views.includes('minutes') && /*#__PURE__*/_jsxs(React.Fragment, {
-          children: [_DateTimePickerToolba || (_DateTimePickerToolba = /*#__PURE__*/_jsx(DateTimePickerToolbarSeparator, {
-            variant: "h3",
-            value: ":"
-          })), /*#__PURE__*/_jsx(PickersToolbarButton, {
-            variant: "h3",
-            onClick: function onClick() {
-              return setOpenView('minutes');
-            },
-            selected: openView === 'minutes',
-            value: date ? utils.format(date, 'minutes') : '--'
-          })]
-        }), views.includes('seconds') && /*#__PURE__*/_jsxs(React.Fragment, {
-          children: [_DateTimePickerToolba2 || (_DateTimePickerToolba2 = /*#__PURE__*/_jsx(DateTimePickerToolbarSeparator, {
-            variant: "h3",
-            value: ":"
-          })), /*#__PURE__*/_jsx(PickersToolbarButton, {
-            variant: "h3",
-            onClick: function onClick() {
-              return setOpenView('seconds');
-            },
-            selected: openView === 'seconds',
-            value: date ? utils.format(date, 'seconds') : '--'
-          })]
-        })]
-      })]
-    })), showTabs && /*#__PURE__*/_jsx(DateTimePickerTabs, {
-      dateRangeIcon: dateRangeIcon,
-      timeIcon: timeIcon,
-      view: openView,
-      onChange: setOpenView
-    })]
-  });
-};
-
-export default DateTimePickerToolbar;

package/legacy/DateTimePicker/shared.js

@@ -1,58 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import { useThemeProps } from '@mui/material/styles';
-import { useDefaultDates, useUtils } from '../internal/pickers/hooks/useUtils';
-import { pick12hOr24hFormat } from '../internal/pickers/text-field-helper';
-export function useDateTimePickerDefaultizedProps(_ref, name) {
-  var ampm = _ref.ampm,
-      inputFormat = _ref.inputFormat,
-      maxDateProp = _ref.maxDate,
-      maxDateTime = _ref.maxDateTime,
-      maxTime = _ref.maxTime,
-      minDateProp = _ref.minDate,
-      minDateTime = _ref.minDateTime,
-      minTime = _ref.minTime,
-      _ref$openTo = _ref.openTo,
-      openTo = _ref$openTo === void 0 ? 'day' : _ref$openTo,
-      _ref$orientation = _ref.orientation,
-      orientation = _ref$orientation === void 0 ? 'portrait' : _ref$orientation,
-      _ref$views = _ref.views,
-      views = _ref$views === void 0 ? ['year', 'day', 'hours', 'minutes'] : _ref$views,
-      other = _objectWithoutProperties(_ref, ["ampm", "inputFormat", "maxDate", "maxDateTime", "maxTime", "minDate", "minDateTime", "minTime", "openTo", "orientation", "views"]);
-
-  var utils = useUtils();
-  var defaultDates = useDefaultDates();
-  var minDate = minDateProp != null ? minDateProp : defaultDates.minDate;
-  var maxDate = maxDateProp != null ? maxDateProp : defaultDates.maxDate;
-  var willUseAmPm = ampm != null ? ampm : utils.is12HourCycleInCurrentLocale();
-
-  if (orientation !== 'portrait') {
-    throw new Error('We are not supporting custom orientation for DateTimePicker yet :(');
-  }
-
-  return useThemeProps({
-    props: _extends({
-      openTo: openTo,
-      views: views,
-      ampm: willUseAmPm,
-      ampmInClock: true,
-      orientation: orientation,
-      showToolbar: true,
-      allowSameDateSelection: true,
-      minDate: minDateTime != null ? minDateTime : minDate,
-      minTime: minDateTime != null ? minDateTime : minTime,
-      maxDate: maxDateTime != null ? maxDateTime : maxDate,
-      maxTime: maxDateTime != null ? maxDateTime : maxTime,
-      disableIgnoringDatePartForTimeValidation: Boolean(minDateTime || maxDateTime),
-      acceptRegex: willUseAmPm ? /[\dap]/gi : /\d/gi,
-      mask: '__/__/____ __:__',
-      disableMaskedInput: willUseAmPm,
-      inputFormat: pick12hOr24hFormat(inputFormat, willUseAmPm, {
-        localized: utils.formats.keyboardDateTime,
-        '12h': utils.formats.keyboardDateTime12h,
-        '24h': utils.formats.keyboardDateTime24h
-      })
-    }, other),
-    name: name
-  });
-}

package/legacy/DesktopDatePicker/DesktopDatePicker.js

@@ -1,446 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { useDatePickerDefaultizedProps } from '../DatePicker/shared';
-import DatePickerToolbar from '../DatePicker/DatePickerToolbar';
-import DesktopWrapper from '../internal/pickers/wrappers/DesktopWrapper';
-import Picker from '../internal/pickers/Picker/Picker';
-import { useDateValidation } from '../internal/pickers/hooks/useValidation';
-import { parsePickerInputValue } from '../internal/pickers/date-utils';
-import { KeyboardDateInput } from '../internal/pickers/KeyboardDateInput';
-import { usePickerState } from '../internal/pickers/hooks/usePickerState';
-import { jsx as _jsx } from "react/jsx-runtime";
-var valueManager = {
-  emptyValue: null,
-  parseInput: parsePickerInputValue,
-  areValuesEqual: function areValuesEqual(utils, a, b) {
-    return utils.isEqual(a, b);
-  }
-};
-
-/**
- *
- * Demos:
- *
- * - [Date Picker](https://mui.com/components/date-picker/)
- *
- * API:
- *
- * - [DesktopDatePicker API](https://mui.com/api/desktop-date-picker/)
- */
-var DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePicker(inProps, ref) {
-  // TODO: TDate needs to be instantiated at every usage.
-  var props = useDatePickerDefaultizedProps(inProps, 'MuiDesktopDatePicker');
-  var validationError = useDateValidation(props) !== null;
-
-  var _usePickerState = usePickerState(props, valueManager),
-      pickerProps = _usePickerState.pickerProps,
-      inputProps = _usePickerState.inputProps,
-      wrapperProps = _usePickerState.wrapperProps;
-
-  var onChange = props.onChange,
-      PopperProps = props.PopperProps,
-      PaperProps = props.PaperProps,
-      _props$ToolbarCompone = props.ToolbarComponent,
-      ToolbarComponent = _props$ToolbarCompone === void 0 ? DatePickerToolbar : _props$ToolbarCompone,
-      TransitionComponent = props.TransitionComponent,
-      value = props.value,
-      clearText = props.clearText,
-      clearable = props.clearable,
-      other = _objectWithoutProperties(props, ["onChange", "PopperProps", "PaperProps", "ToolbarComponent", "TransitionComponent", "value", "clearText", "clearable"]);
-
-  var AllDateInputProps = _extends({}, inputProps, other, {
-    ref: ref,
-    validationError: validationError
-  });
-
-  return /*#__PURE__*/_jsx(DesktopWrapper, _extends({}, wrapperProps, {
-    DateInputProps: AllDateInputProps,
-    KeyboardDateInputComponent: KeyboardDateInput,
-    PopperProps: PopperProps,
-    PaperProps: PaperProps,
-    TransitionComponent: TransitionComponent,
-    clearText: clearText,
-    clearable: clearable,
-    children: /*#__PURE__*/_jsx(Picker, _extends({}, pickerProps, {
-      autoFocus: true,
-      toolbarTitle: props.label || props.toolbarTitle,
-      ToolbarComponent: ToolbarComponent,
-      DateInputProps: AllDateInputProps
-    }, other))
-  }));
-});
-process.env.NODE_ENV !== "production" ? DesktopDatePicker.propTypes
-/* remove-proptypes */
-= {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-
-  /**
-   * Regular expression to detect "accepted" symbols.
-   * @default /\dap/gi
-   */
-  acceptRegex: PropTypes.instanceOf(RegExp),
-
-  /**
-   * If `true`, `onChange` is fired on click even if the same date is selected.
-   * @default false
-   */
-  allowSameDateSelection: PropTypes.bool,
-
-  /**
-   * @ignore
-   */
-  autoFocus: PropTypes.bool,
-
-  /**
-   * @ignore
-   */
-  children: PropTypes.node,
-
-  /**
-   * className applied to the root component.
-   */
-  className: PropTypes.string,
-
-  /**
-   * If `true`, it shows the clear action in the picker dialog.
-   * @default false
-   */
-  clearable: PropTypes.bool,
-
-  /**
-   * Clear text message.
-   * @default 'Clear'
-   */
-  clearText: PropTypes.node,
-
-  /**
-   * The components used for each slot.
-   * Either a string to use a HTML element or a component.
-   * @default {}
-   */
-  components: PropTypes.shape({
-    LeftArrowButton: PropTypes.elementType,
-    LeftArrowIcon: PropTypes.elementType,
-    OpenPickerIcon: PropTypes.elementType,
-    RightArrowButton: PropTypes.elementType,
-    RightArrowIcon: PropTypes.elementType,
-    SwitchViewButton: PropTypes.elementType,
-    SwitchViewIcon: PropTypes.elementType
-  }),
-
-  /**
-   * The props used for each slot inside.
-   * @default {}
-   */
-  componentsProps: PropTypes.shape({
-    leftArrowButton: PropTypes.object,
-    rightArrowButton: PropTypes.object,
-    switchViewButton: PropTypes.object
-  }),
-
-  /**
-   * Default calendar month displayed when `value={null}`.
-   */
-  defaultCalendarMonth: PropTypes.any,
-
-  /**
-   * If `true` the popup or dialog will immediately close after submitting full date.
-   * @default `true` for Desktop, `false` for Mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
-   */
-  disableCloseOnSelect: PropTypes.bool,
-
-  /**
-   * If `true`, the picker and text field are disabled.
-   * @default false
-   */
-  disabled: PropTypes.bool,
-
-  /**
-   * @default false
-   */
-  disableFuture: PropTypes.bool,
-
-  /**
-   * If `true`, todays date is rendering without highlighting with circle.
-   * @default false
-   */
-  disableHighlightToday: PropTypes.bool,
-
-  /**
-   * Disable mask on the keyboard, this should be used rarely. Consider passing proper mask for your format.
-   * @default false
-   */
-  disableMaskedInput: PropTypes.bool,
-
-  /**
-   * Do not render open picker button (renders only text field with validation).
-   * @default false
-   */
-  disableOpenPicker: PropTypes.bool,
-
-  /**
-   * @default false
-   */
-  disablePast: PropTypes.bool,
-
-  /**
-   * Get aria-label text for control that opens picker dialog. Aria-label text must include selected date. @DateIOType
-   * @default (value, utils) => `Choose date, selected date is ${utils.format(utils.date(value), 'fullDate')}`
-   */
-  getOpenDialogAriaText: PropTypes.func,
-
-  /**
-   * Get aria-label text for switching between views button.
-   */
-  getViewSwitchingButtonText: PropTypes.func,
-
-  /**
-   * @ignore
-   */
-  ignoreInvalidInputs: PropTypes.bool,
-
-  /**
-   * Props to pass to keyboard input adornment.
-   */
-  InputAdornmentProps: PropTypes.object,
-
-  /**
-   * Format string.
-   */
-  inputFormat: PropTypes.string,
-
-  /**
-   * @ignore
-   */
-  InputProps: PropTypes.object,
-
-  /**
-   * Pass a ref to the `input` element.
-   */
-  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.object
-  })]),
-
-  /**
-   * @ignore
-   */
-  key: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
-  /**
-   * @ignore
-   */
-  label: PropTypes.node,
-
-  /**
-   * Left arrow icon aria-label text.
-   */
-  leftArrowButtonText: PropTypes.string,
-
-  /**
-   * If `true` renders `LoadingComponent` in calendar instead of calendar view.
-   * Can be used to preload information and show it in calendar.
-   * @default false
-   */
-  loading: PropTypes.bool,
-
-  /**
-   * Custom mask. Can be used to override generate from format. (e.g. `__/__/____ __:__` or `__/__/____ __:__ _M`).
-   */
-  mask: PropTypes.string,
-
-  /**
-   * Max selectable date. @DateIOType
-   */
-  maxDate: PropTypes.any,
-
-  /**
-   * Min selectable date. @DateIOType
-   */
-  minDate: PropTypes.any,
-
-  /**
-   * Callback fired when date is accepted @DateIOType.
-   */
-  onAccept: PropTypes.func,
-
-  /**
-   * Callback fired when the value (the selected date) changes @DateIOType.
-   */
-  onChange: PropTypes.func.isRequired,
-
-  /**
-   * Callback fired when the popup requests to be closed.
-   * Use in controlled mode (see open).
-   */
-  onClose: PropTypes.func,
-
-  /**
-   * Callback that fired when input value or new `value` prop validation returns **new** validation error (or value is valid after error).
-   * In case of validation error detected `reason` prop return non-null value and `TextField` must be displayed in `error` state.
-   * This can be used to render appropriate form error.
-   *
-   * [Read the guide](https://next.material-ui-pickers.dev/guides/forms) about form integration and error displaying.
-   * @DateIOType
-   */
-  onError: PropTypes.func,
-
-  /**
-   * Callback firing on month change. @DateIOType
-   */
-  onMonthChange: PropTypes.func,
-
-  /**
-   * Callback fired when the popup requests to be opened.
-   * Use in controlled mode (see open).
-   */
-  onOpen: PropTypes.func,
-
-  /**
-   * Callback fired on view change.
-   */
-  onViewChange: PropTypes.func,
-
-  /**
-   * Callback firing on year change @DateIOType.
-   */
-  onYearChange: PropTypes.func,
-
-  /**
-   * Control the popup or dialog open state.
-   */
-  open: PropTypes.bool,
-
-  /**
-   * Props to pass to keyboard adornment button.
-   */
-  OpenPickerButtonProps: PropTypes.object,
-
-  /**
-   * First view to show.
-   */
-  openTo: PropTypes.oneOf(['day', 'month', 'year']),
-
-  /**
-   * Force rendering in particular orientation.
-   */
-  orientation: PropTypes.oneOf(['landscape', 'portrait']),
-
-  /**
-   * Paper props passed down to [Paper](https://mui.com/api/paper/) component.
-   */
-  PaperProps: PropTypes.object,
-
-  /**
-   * Popper props passed down to [Popper](https://mui.com/api/popper/) component.
-   */
-  PopperProps: PropTypes.object,
-
-  /**
-   * Make picker read only.
-   * @default false
-   */
-  readOnly: PropTypes.bool,
-
-  /**
-   * Disable heavy animations.
-   * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
-   */
-  reduceAnimations: PropTypes.bool,
-
-  /**
-   * Custom renderer for day. Check the [PickersDay](https://mui.com/api/pickers-day/) component.
-   */
-  renderDay: PropTypes.func,
-
-  /**
-   * The `renderInput` prop allows you to customize the rendered input.
-   * The `props` argument of this render prop contains props of [TextField](https://mui.com/api/text-field/#textfield-api) that you need to forward.
-   * Pay specific attention to the `ref` and `inputProps` keys.
-   * @example ```jsx
-   * renderInput={props => <TextField {...props} />}
-   * ````
-   */
-  renderInput: PropTypes.func.isRequired,
-
-  /**
-   * Component displaying when passed `loading` true.
-   * @default () => <span data-mui-test="loading-progress">...</span>
-   */
-  renderLoading: PropTypes.func,
-
-  /**
-   * Custom formatter to be passed into Rifm component.
-   */
-  rifmFormatter: PropTypes.func,
-
-  /**
-   * Right arrow icon aria-label text.
-   */
-  rightArrowButtonText: PropTypes.string,
-
-  /**
-   * Disable specific date. @DateIOType
-   */
-  shouldDisableDate: PropTypes.func,
-
-  /**
-   * Disable specific years dynamically.
-   * Works like `shouldDisableDate` but for year selection view @DateIOType.
-   */
-  shouldDisableYear: PropTypes.func,
-
-  /**
-   * If `true`, days that have `outsideCurrentMonth={true}` are displayed.
-   * @default false
-   */
-  showDaysOutsideCurrentMonth: PropTypes.bool,
-
-  /**
-   * If `true`, show the toolbar even in desktop mode.
-   */
-  showToolbar: PropTypes.bool,
-
-  /**
-   * Component that will replace default toolbar renderer.
-   * @default DatePickerToolbar
-   */
-  ToolbarComponent: PropTypes.elementType,
-
-  /**
-   * Date format, that is displaying in toolbar.
-   */
-  toolbarFormat: PropTypes.string,
-
-  /**
-   * Mobile picker date value placeholder, displaying if `value` === `null`.
-   * @default '–'
-   */
-  toolbarPlaceholder: PropTypes.node,
-
-  /**
-   * Mobile picker title, displaying in the toolbar.
-   * @default 'Select date'
-   */
-  toolbarTitle: PropTypes.node,
-
-  /**
-   * Custom component for popper [Transition](https://mui.com/components/transitions/#transitioncomponent-prop).
-   */
-  TransitionComponent: PropTypes.elementType,
-
-  /**
-   * The value of the picker.
-   */
-  value: PropTypes.oneOfType([PropTypes.any, PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]),
-
-  /**
-   * Array of views to show.
-   */
-  views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired)
-} : void 0;
-export default DesktopDatePicker;