@mui/x-date-pickers 7.0.0-beta.2 → 7.0.0-beta.5

package/legacy/internals/demo/DemoContainer.js

@@ -1,163 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import Stack, { stackClasses } from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
-import { textFieldClasses } from '@mui/material/TextField';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var getChildTypeFromChildName = function getChildTypeFromChildName(childName) {
-  if (childName.match(/^([A-Za-z]+)Range(Calendar|Clock)$/)) {
-    return 'multi-panel-UI-view';
-  }
-  if (childName.match(/^([A-Za-z]*)(DigitalClock)$/)) {
-    return 'Tall-UI-view';
-  }
-  if (childName.match(/^Static([A-Za-z]+)/) || childName.match(/^([A-Za-z]+)(Calendar|Clock)$/)) {
-    return 'UI-view';
-  }
-  if (childName.match(/^MultiInput([A-Za-z]+)RangeField$/) || childName.match(/^([A-Za-z]+)RangePicker$/)) {
-    return 'multi-input-range-field';
-  }
-  if (childName.match(/^SingleInput([A-Za-z]+)RangeField$/)) {
-    return 'single-input-range-field';
-  }
-  return 'single-input-field';
-};
-var getSupportedSectionFromChildName = function getSupportedSectionFromChildName(childName) {
-  if (childName.includes('DateTime')) {
-    return 'date-time';
-  }
-  if (childName.includes('Date')) {
-    return 'date';
-  }
-  return 'time';
-};
-/**
- * WARNING: This is an internal component used in documentation to achieve a desired layout.
- * Please do not use it in your application.
- */
-export function DemoItem(props) {
-  var label = props.label,
-    children = props.children,
-    component = props.component,
-    sxProp = props.sx;
-  var spacing;
-  var sx = sxProp;
-  if (component && getChildTypeFromChildName(component) === 'multi-input-range-field') {
-    spacing = 1.5;
-    sx = _extends({}, sx, _defineProperty({}, "& .".concat(textFieldClasses.root), {
-      flexGrow: 1
-    }));
-  } else {
-    spacing = 1;
-  }
-  return /*#__PURE__*/_jsxs(Stack, {
-    direction: "column",
-    alignItems: "stretch",
-    spacing: spacing,
-    sx: sx,
-    children: [label && /*#__PURE__*/_jsx(Typography, {
-      variant: "body2",
-      children: label
-    }), children]
-  });
-}
-DemoItem.displayName = 'DemoItem';
-var isDemoItem = function isDemoItem(child) {
-  if ( /*#__PURE__*/React.isValidElement(child) && typeof child.type !== 'string') {
-    // @ts-ignore
-    return child.type.displayName === 'DemoItem';
-  }
-  return false;
-};
-/**
- * WARNING: This is an internal component used in documentation to achieve a desired layout.
- * Please do not use it in your application.
- */
-export function DemoContainer(props) {
-  var children = props.children,
-    components = props.components,
-    sxProp = props.sx;
-  var childrenTypes = new Set();
-  var childrenSupportedSections = new Set();
-  components.forEach(function (childName) {
-    childrenTypes.add(getChildTypeFromChildName(childName));
-    childrenSupportedSections.add(getSupportedSectionFromChildName(childName));
-  });
-  var getSpacing = function getSpacing(direction) {
-    if (direction === 'row') {
-      return childrenTypes.has('UI-view') || childrenTypes.has('Tall-UI-view') ? 3 : 2;
-    }
-    return childrenTypes.has('UI-view') ? 4 : 3;
-  };
-  var direction;
-  var spacing;
-  var extraSx = {};
-  var demoItemSx = {};
-  var sx = _extends({
-    overflow: 'auto',
-    // Add padding as overflow can hide the outline text field label.
-    pt: 1
-  }, sxProp);
-  if (components.length > 2 || childrenTypes.has('multi-input-range-field') || childrenTypes.has('single-input-range-field') || childrenTypes.has('multi-panel-UI-view') || childrenTypes.has('UI-view') || childrenSupportedSections.has('date-time')) {
-    direction = 'column';
-    spacing = getSpacing('column');
-  } else {
-    direction = {
-      xs: 'column',
-      lg: 'row'
-    };
-    spacing = {
-      xs: getSpacing('column'),
-      lg: getSpacing('row')
-    };
-  }
-  if (childrenTypes.has('UI-view')) {
-    // noop
-  } else if (childrenTypes.has('single-input-range-field')) {
-    if (!childrenSupportedSections.has('date-time')) {
-      extraSx = _defineProperty({}, "& > .".concat(textFieldClasses.root), {
-        minWidth: 300
-      });
-    } else {
-      extraSx = _defineProperty({}, "& > .".concat(textFieldClasses.root), {
-        minWidth: {
-          xs: 300,
-          // If demo also contains MultiInputDateTimeRangeField, increase width to avoid cutting off the value.
-          md: childrenTypes.has('multi-input-range-field') ? 460 : 400
-        }
-      });
-    }
-  } else if (childrenSupportedSections.has('date-time')) {
-    extraSx = _defineProperty({}, "& > .".concat(textFieldClasses.root), {
-      minWidth: 270
-    });
-    if (childrenTypes.has('multi-input-range-field')) {
-      // increase width for the multi input date time range fields
-      demoItemSx = _defineProperty({}, "& > .".concat(stackClasses.root, " > .").concat(textFieldClasses.root), {
-        minWidth: 210
-      });
-    }
-  } else {
-    extraSx = _defineProperty({}, "& > .".concat(textFieldClasses.root), {
-      minWidth: 200
-    });
-  }
-  var finalSx = _extends({}, sx, extraSx);
-  return /*#__PURE__*/_jsx(Stack, {
-    direction: direction,
-    spacing: spacing,
-    sx: finalSx,
-    children: React.Children.map(children, function (child) {
-      if ( /*#__PURE__*/React.isValidElement(child) && isDemoItem(child)) {
-        // Inject sx styles to the `DemoItem` if it is a direct child of `DemoContainer`.
-        // @ts-ignore
-        return /*#__PURE__*/React.cloneElement(child, {
-          sx: _extends({}, extraSx, demoItemSx)
-        });
-      }
-      return child;
-    })
-  });
-}

package/legacy/internals/demo/index.js

@@ -1 +0,0 @@
-export { DemoContainer, DemoItem } from './DemoContainer';

package/legacy/internals/hooks/date-helpers-hooks.js

@@ -1,37 +0,0 @@
-import * as React from 'react';
-import { useUtils } from './useUtils';
-import { getMeridiem, convertToMeridiem } from '../utils/time-utils';
-export function useNextMonthDisabled(month, _ref) {
-  var disableFuture = _ref.disableFuture,
-    maxDate = _ref.maxDate,
-    timezone = _ref.timezone;
-  var utils = useUtils();
-  return React.useMemo(function () {
-    var now = utils.date(undefined, timezone);
-    var lastEnabledMonth = utils.startOfMonth(disableFuture && utils.isBefore(now, maxDate) ? now : maxDate);
-    return !utils.isAfter(lastEnabledMonth, month);
-  }, [disableFuture, maxDate, month, utils, timezone]);
-}
-export function usePreviousMonthDisabled(month, _ref2) {
-  var disablePast = _ref2.disablePast,
-    minDate = _ref2.minDate,
-    timezone = _ref2.timezone;
-  var utils = useUtils();
-  return React.useMemo(function () {
-    var now = utils.date(undefined, timezone);
-    var firstEnabledMonth = utils.startOfMonth(disablePast && utils.isAfter(now, minDate) ? now : minDate);
-    return !utils.isBefore(firstEnabledMonth, month);
-  }, [disablePast, minDate, month, utils, timezone]);
-}
-export function useMeridiemMode(date, ampm, onChange, selectionState) {
-  var utils = useUtils();
-  var meridiemMode = getMeridiem(date, utils);
-  var handleMeridiemChange = React.useCallback(function (mode) {
-    var timeWithMeridiem = date == null ? null : convertToMeridiem(date, mode, Boolean(ampm), utils);
-    onChange(timeWithMeridiem, selectionState != null ? selectionState : 'partial');
-  }, [ampm, date, onChange, selectionState, utils]);
-  return {
-    meridiemMode: meridiemMode,
-    handleMeridiemChange: handleMeridiemChange
-  };
-}

package/legacy/internals/hooks/useClockReferenceDate.js

@@ -1,28 +0,0 @@
-import * as React from 'react';
-import { singleItemValueManager } from '../utils/valueManagers';
-import { getTodayDate as _getTodayDate } from '../utils/date-utils';
-import { SECTION_TYPE_GRANULARITY } from '../utils/getDefaultReferenceDate';
-export var useClockReferenceDate = function useClockReferenceDate(_ref) {
-  var value = _ref.value,
-    referenceDateProp = _ref.referenceDate,
-    utils = _ref.utils,
-    props = _ref.props,
-    timezone = _ref.timezone;
-  var referenceDate = React.useMemo(function () {
-    return singleItemValueManager.getInitialReferenceValue({
-      value: value,
-      utils: utils,
-      props: props,
-      referenceDate: referenceDateProp,
-      granularity: SECTION_TYPE_GRANULARITY.day,
-      timezone: timezone,
-      getTodayDate: function getTodayDate() {
-        return _getTodayDate(utils, timezone, 'date');
-      }
-    });
-  },
-  // We only want to compute the reference date on mount.
-  [] // eslint-disable-line react-hooks/exhaustive-deps
-  );
-  return value != null ? value : referenceDate;
-};

package/legacy/internals/hooks/useDefaultReduceAnimations.js

@@ -1,14 +0,0 @@
-import useMediaQuery from '@mui/material/useMediaQuery';
-var PREFERS_REDUCED_MOTION = '@media (prefers-reduced-motion: reduce)';
-
-// detect if user agent has Android version < 10 or iOS version < 13
-var mobileVersionMatches = typeof navigator !== 'undefined' && navigator.userAgent.match(/android\s(\d+)|OS\s(\d+)/i);
-var androidVersion = mobileVersionMatches && mobileVersionMatches[1] ? parseInt(mobileVersionMatches[1], 10) : null;
-var iOSVersion = mobileVersionMatches && mobileVersionMatches[2] ? parseInt(mobileVersionMatches[2], 10) : null;
-export var slowAnimationDevices = androidVersion && androidVersion < 10 || iOSVersion && iOSVersion < 13 || false;
-export var useDefaultReduceAnimations = function useDefaultReduceAnimations() {
-  var prefersReduced = useMediaQuery(PREFERS_REDUCED_MOTION, {
-    defaultMatches: false
-  });
-  return prefersReduced || slowAnimationDevices;
-};

package/legacy/internals/hooks/useDesktopPicker/index.js

@@ -1 +0,0 @@
-export { useDesktopPicker } from './useDesktopPicker';

package/legacy/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -1,174 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["props", "getOpenDialogAriaText"],
-  _excluded2 = ["ownerState"],
-  _excluded3 = ["ownerState"];
-import * as React from 'react';
-import { useSlotProps } from '@mui/base/utils';
-import MuiInputAdornment from '@mui/material/InputAdornment';
-import IconButton from '@mui/material/IconButton';
-import useForkRef from '@mui/utils/useForkRef';
-import useId from '@mui/utils/useId';
-import { PickersPopper } from '../../components/PickersPopper';
-import { useUtils } from '../useUtils';
-import { usePicker } from '../usePicker';
-import { LocalizationProvider } from '../../../LocalizationProvider';
-import { PickersLayout } from '../../../PickersLayout';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Hook managing all the single-date desktop pickers:
- * - DesktopDatePicker
- * - DesktopDateTimePicker
- * - DesktopTimePicker
- */
-export var useDesktopPicker = function useDesktopPicker(_ref) {
-  var _innerSlotProps$toolb, _innerSlotProps$toolb2, _slots$inputAdornment, _slots$openPickerButt, _slots$layout;
-  var props = _ref.props,
-    getOpenDialogAriaText = _ref.getOpenDialogAriaText,
-    pickerParams = _objectWithoutProperties(_ref, _excluded);
-  var slots = props.slots,
-    innerSlotProps = props.slotProps,
-    className = props.className,
-    sx = props.sx,
-    format = props.format,
-    formatDensity = props.formatDensity,
-    timezone = props.timezone,
-    name = props.name,
-    label = props.label,
-    inputRef = props.inputRef,
-    readOnly = props.readOnly,
-    disabled = props.disabled,
-    autoFocus = props.autoFocus,
-    localeText = props.localeText,
-    reduceAnimations = props.reduceAnimations;
-  var utils = useUtils();
-  var internalInputRef = React.useRef(null);
-  var containerRef = React.useRef(null);
-  var labelId = useId();
-  var isToolbarHidden = (_innerSlotProps$toolb = innerSlotProps == null || (_innerSlotProps$toolb2 = innerSlotProps.toolbar) == null ? void 0 : _innerSlotProps$toolb2.hidden) != null ? _innerSlotProps$toolb : false;
-  var _usePicker = usePicker(_extends({}, pickerParams, {
-      props: props,
-      inputRef: internalInputRef,
-      autoFocusView: true,
-      additionalViewProps: {},
-      wrapperVariant: 'desktop'
-    })),
-    open = _usePicker.open,
-    actions = _usePicker.actions,
-    hasUIView = _usePicker.hasUIView,
-    layoutProps = _usePicker.layoutProps,
-    renderCurrentView = _usePicker.renderCurrentView,
-    shouldRestoreFocus = _usePicker.shouldRestoreFocus,
-    pickerFieldProps = _usePicker.fieldProps;
-  var InputAdornment = (_slots$inputAdornment = slots.inputAdornment) != null ? _slots$inputAdornment : MuiInputAdornment;
-  var _useSlotProps = useSlotProps({
-      elementType: InputAdornment,
-      externalSlotProps: innerSlotProps == null ? void 0 : innerSlotProps.inputAdornment,
-      additionalProps: {
-        position: 'end'
-      },
-      ownerState: props
-    }),
-    inputAdornmentOwnerState = _useSlotProps.ownerState,
-    inputAdornmentProps = _objectWithoutProperties(_useSlotProps, _excluded2);
-  var OpenPickerButton = (_slots$openPickerButt = slots.openPickerButton) != null ? _slots$openPickerButt : IconButton;
-  var _useSlotProps2 = useSlotProps({
-      elementType: OpenPickerButton,
-      externalSlotProps: innerSlotProps == null ? void 0 : innerSlotProps.openPickerButton,
-      additionalProps: {
-        disabled: disabled || readOnly,
-        onClick: open ? actions.onClose : actions.onOpen,
-        'aria-label': getOpenDialogAriaText(pickerFieldProps.value, utils),
-        edge: inputAdornmentProps.position
-      },
-      ownerState: props
-    }),
-    openPickerButtonOwnerState = _useSlotProps2.ownerState,
-    openPickerButtonProps = _objectWithoutProperties(_useSlotProps2, _excluded3);
-  var OpenPickerIcon = slots.openPickerIcon;
-  var Field = slots.field;
-  var fieldProps = useSlotProps({
-    elementType: Field,
-    externalSlotProps: innerSlotProps == null ? void 0 : innerSlotProps.field,
-    additionalProps: _extends({}, pickerFieldProps, isToolbarHidden && {
-      id: labelId
-    }, {
-      readOnly: readOnly,
-      disabled: disabled,
-      className: className,
-      sx: sx,
-      format: format,
-      formatDensity: formatDensity,
-      timezone: timezone,
-      label: label,
-      name: name,
-      autoFocus: autoFocus && !props.open,
-      focused: open ? true : undefined
-    }),
-    ownerState: props
-  });
-
-  // TODO: Move to `useSlotProps` when https://github.com/mui/material-ui/pull/35088 will be merged
-  if (hasUIView) {
-    fieldProps.InputProps = _extends({}, fieldProps.InputProps, _defineProperty({
-      ref: containerRef
-    }, "".concat(inputAdornmentProps.position, "Adornment"), /*#__PURE__*/_jsx(InputAdornment, _extends({}, inputAdornmentProps, {
-      children: /*#__PURE__*/_jsx(OpenPickerButton, _extends({}, openPickerButtonProps, {
-        children: /*#__PURE__*/_jsx(OpenPickerIcon, _extends({}, innerSlotProps == null ? void 0 : innerSlotProps.openPickerIcon))
-      }))
-    }))));
-  }
-  var slotsForField = _extends({
-    textField: slots.textField,
-    clearIcon: slots.clearIcon,
-    clearButton: slots.clearButton
-  }, fieldProps.slots);
-  var Layout = (_slots$layout = slots.layout) != null ? _slots$layout : PickersLayout;
-  var handleInputRef = useForkRef(internalInputRef, fieldProps.inputRef, inputRef);
-  var labelledById = labelId;
-  if (isToolbarHidden) {
-    if (label) {
-      labelledById = "".concat(labelId, "-label");
-    } else {
-      labelledById = undefined;
-    }
-  }
-  var slotProps = _extends({}, innerSlotProps, {
-    toolbar: _extends({}, innerSlotProps == null ? void 0 : innerSlotProps.toolbar, {
-      titleId: labelId
-    }),
-    popper: _extends({
-      'aria-labelledby': labelledById
-    }, innerSlotProps == null ? void 0 : innerSlotProps.popper)
-  });
-  var renderPicker = function renderPicker() {
-    return /*#__PURE__*/_jsxs(LocalizationProvider, {
-      localeText: localeText,
-      children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
-        slots: slotsForField,
-        slotProps: slotProps,
-        inputRef: handleInputRef
-      })), /*#__PURE__*/_jsx(PickersPopper, _extends({
-        role: "dialog",
-        placement: "bottom-start",
-        anchorEl: containerRef.current
-      }, actions, {
-        open: open,
-        slots: slots,
-        slotProps: slotProps,
-        shouldRestoreFocus: shouldRestoreFocus,
-        reduceAnimations: reduceAnimations,
-        children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps == null ? void 0 : slotProps.layout, {
-          slots: slots,
-          slotProps: slotProps,
-          children: renderCurrentView()
-        }))
-      }))]
-    });
-  };
-  return {
-    renderPicker: renderPicker
-  };
-};

package/legacy/internals/hooks/useDesktopPicker/useDesktopPicker.types.js

@@ -1 +0,0 @@
-export {};

package/legacy/internals/hooks/useField/index.js

@@ -1,2 +0,0 @@
-export { useField } from './useField';
-export { splitFormatIntoSections, addPositionPropertiesToSections, createDateStrForInputFromSections } from './useField.utils';