@mui/x-date-pickers-pro 7.0.0-alpha.9 → 7.0.0-beta.0

package/legacy/DateTimeRangePicker/DateTimeRangePickerTabs.js

@@ -0,0 +1,191 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import { styled, useThemeProps } from '@mui/material/styles';
+import composeClasses from '@mui/utils/composeClasses';
+import useEventCallback from '@mui/utils/useEventCallback';
+import { TimeIcon, DateRangeIcon, ArrowLeftIcon, ArrowRightIcon } from '@mui/x-date-pickers/icons';
+import { useLocaleText, isDatePickerView } from '@mui/x-date-pickers/internals';
+import IconButton from '@mui/material/IconButton';
+import Button from '@mui/material/Button';
+import { getDateTimeRangePickerTabsUtilityClass } from './dateTimeRangePickerTabsClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var viewToTab = function viewToTab(view, rangePosition) {
+  if (isDatePickerView(view)) {
+    return rangePosition === 'start' ? 'start-date' : 'end-date';
+  }
+  return rangePosition === 'start' ? 'start-time' : 'end-time';
+};
+var tabToView = function tabToView(tab) {
+  if (tab === 'start-date' || tab === 'end-date') {
+    return 'day';
+  }
+  return 'hours';
+};
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['root'],
+    tabButton: ['tabButton'],
+    navigationButton: ['navigationButton'],
+    filler: ['filler']
+  };
+  return composeClasses(slots, getDateTimeRangePickerTabsUtilityClass, classes);
+};
+var DateTimeRangePickerTabsRoot = styled('div', {
+  name: 'MuiDateTimeRangePickerTabs',
+  slot: 'Root',
+  overridesResolver: function overridesResolver(_, styles) {
+    return styles.root;
+  }
+})(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderBottom: "1px solid ".concat((theme.vars || theme).palette.divider),
+    minHeight: 48
+  };
+});
+var DateTimeRangePickerTab = styled(Button, {
+  name: 'MuiDateTimeRangePickerTabs',
+  slot: 'TabButton',
+  overridesResolver: function overridesResolver(_, styles) {
+    return styles.tabButton;
+  }
+})({
+  textTransform: 'none'
+});
+var DateTimeRangePickerTabFiller = styled('div', {
+  name: 'MuiDateTimeRangePickerTabs',
+  slot: 'Filler',
+  overridesResolver: function overridesResolver(_, styles) {
+    return styles.filler;
+  }
+})({
+  width: 40
+});
+var tabOptions = ['start-date', 'start-time', 'end-date', 'end-time'];
+var DateTimeRangePickerTabs = function DateTimeRangePickerTabs(inProps) {
+  var props = useThemeProps({
+    props: inProps,
+    name: 'MuiDateTimeRangePickerTabs'
+  });
+  var _props$dateIcon = props.dateIcon,
+    dateIcon = _props$dateIcon === void 0 ? /*#__PURE__*/_jsx(DateRangeIcon, {}) : _props$dateIcon,
+    onViewChange = props.onViewChange,
+    _props$timeIcon = props.timeIcon,
+    timeIcon = _props$timeIcon === void 0 ? /*#__PURE__*/_jsx(TimeIcon, {}) : _props$timeIcon,
+    view = props.view,
+    _props$hidden = props.hidden,
+    hidden = _props$hidden === void 0 ? typeof window === 'undefined' || window.innerHeight < 667 : _props$hidden,
+    rangePosition = props.rangePosition,
+    onRangePositionChange = props.onRangePositionChange,
+    className = props.className;
+  var localeText = useLocaleText();
+  var classes = useUtilityClasses(props);
+  var value = React.useMemo(function () {
+    return viewToTab(view, rangePosition);
+  }, [view, rangePosition]);
+  var isPreviousHidden = value === 'start-date';
+  var isNextHidden = value === 'end-time';
+  var tabLabel = React.useMemo(function () {
+    switch (value) {
+      case 'start-date':
+        return localeText.startDate;
+      case 'start-time':
+        return localeText.startTime;
+      case 'end-date':
+        return localeText.endDate;
+      case 'end-time':
+        return localeText.endTime;
+      default:
+        return '';
+    }
+  }, [localeText.endDate, localeText.endTime, localeText.startDate, localeText.startTime, value]);
+  var handleRangePositionChange = useEventCallback(function (newTab) {
+    if (newTab.includes('start')) {
+      onRangePositionChange('start');
+    } else {
+      onRangePositionChange('end');
+    }
+  });
+  var changeToPreviousTab = useEventCallback(function () {
+    var previousTab = tabOptions[tabOptions.indexOf(value) - 1];
+    onViewChange(tabToView(previousTab));
+    handleRangePositionChange(previousTab);
+  });
+  var changeToNextTab = useEventCallback(function () {
+    var nextTab = tabOptions[tabOptions.indexOf(value) + 1];
+    onViewChange(tabToView(nextTab));
+    handleRangePositionChange(nextTab);
+  });
+  if (hidden) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(DateTimeRangePickerTabsRoot, {
+    ownerState: props,
+    className: clsx(classes.root, className),
+    children: [!isPreviousHidden ? /*#__PURE__*/_jsx(IconButton, {
+      onClick: changeToPreviousTab,
+      className: classes.navigationButton,
+      title: localeText.openPreviousView,
+      children: /*#__PURE__*/_jsx(ArrowLeftIcon, {})
+    }) : /*#__PURE__*/_jsx(DateTimeRangePickerTabFiller, {
+      className: classes.filler
+    }), /*#__PURE__*/_jsx(DateTimeRangePickerTab, {
+      startIcon: isDatePickerView(view) ? dateIcon : timeIcon,
+      className: classes.tabButton,
+      size: "large",
+      children: tabLabel
+    }), !isNextHidden ? /*#__PURE__*/_jsx(IconButton, {
+      onClick: changeToNextTab,
+      className: classes.navigationButton,
+      title: localeText.openNextView,
+      children: /*#__PURE__*/_jsx(ArrowRightIcon, {})
+    }) : /*#__PURE__*/_jsx(DateTimeRangePickerTabFiller, {
+      className: classes.filler
+    })]
+  });
+};
+process.env.NODE_ENV !== "production" ? DateTimeRangePickerTabs.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  className: PropTypes.string,
+  /**
+   * Date tab icon.
+   * @default DateRangeIcon
+   */
+  dateIcon: PropTypes.element,
+  /**
+   * Toggles visibility of the tabs allowing view switching.
+   * @default `window.innerHeight < 667` for `DesktopDateTimeRangePicker` and `MobileDateTimeRangePicker`
+   */
+  hidden: PropTypes.bool,
+  onRangePositionChange: PropTypes.func.isRequired,
+  /**
+   * Callback called when a tab is clicked.
+   * @template TView
+   * @param {TView} view The view to open
+   */
+  onViewChange: PropTypes.func.isRequired,
+  rangePosition: PropTypes.oneOf(['end', 'start']).isRequired,
+  /**
+   * Time tab icon.
+   * @default TimeIcon
+   */
+  timeIcon: PropTypes.element,
+  /**
+   * Currently visible picker view.
+   */
+  view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired
+} : void 0;
+export { DateTimeRangePickerTabs };

package/legacy/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js

@@ -0,0 +1,57 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["rangePosition", "onRangePositionChange", "viewRenderer", "value", "onChange", "defaultValue", "onViewChange", "views", "className"];
+import { isInternalTimeView, useUtils } from '@mui/x-date-pickers/internals';
+import { isRangeValid } from '../internals/utils/date-utils';
+import { calculateRangeChange } from '../internals/utils/date-range-manager';
+/**
+ * @ignore - internal component.
+ */
+function DateTimeRangePickerTimeWrapper(props, ref) {
+  var _ref, _ref2;
+  var utils = useUtils();
+  var rangePosition = props.rangePosition,
+    onRangePositionChange = props.onRangePositionChange,
+    viewRenderer = props.viewRenderer,
+    value = props.value,
+    onChange = props.onChange,
+    defaultValue = props.defaultValue,
+    onViewChange = props.onViewChange,
+    views = props.views,
+    className = props.className,
+    other = _objectWithoutProperties(props, _excluded);
+  if (!viewRenderer) {
+    return null;
+  }
+  var currentValue = (_ref = rangePosition === 'start' ? value == null ? void 0 : value[0] : value == null ? void 0 : value[1]) != null ? _ref : null;
+  var currentDefaultValue = (_ref2 = rangePosition === 'start' ? defaultValue == null ? void 0 : defaultValue[0] : defaultValue == null ? void 0 : defaultValue[1]) != null ? _ref2 : null;
+  var handleOnChange = function handleOnChange(newDate, selectionState, selectedView) {
+    if (!onChange || !value) {
+      return;
+    }
+    var _calculateRangeChange = calculateRangeChange({
+        newDate: newDate,
+        utils: utils,
+        range: value,
+        rangePosition: rangePosition
+      }),
+      newRange = _calculateRangeChange.newRange;
+    var isFullRangeSelected = rangePosition === 'end' && isRangeValid(utils, newRange);
+    var timeViews = views.filter(isInternalTimeView);
+    // reset view to the first time view and swap range position after selecting the last time view (start or end position)
+    if (selectedView === timeViews[timeViews.length - 1] && onViewChange) {
+      onViewChange(views[0]);
+      onRangePositionChange(rangePosition === 'start' ? 'end' : 'start');
+    }
+    onChange(newRange, isFullRangeSelected ? 'finish' : 'partial', selectedView);
+  };
+  return viewRenderer(_extends({}, other, {
+    ref: ref,
+    views: views,
+    onViewChange: onViewChange,
+    value: currentValue,
+    onChange: handleOnChange,
+    defaultValue: currentDefaultValue
+  }));
+}
+export { DateTimeRangePickerTimeWrapper };

package/legacy/DateTimeRangePicker/DateTimeRangePickerToolbar.js

@@ -0,0 +1,184 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
+var _excluded = ["value", "rangePosition", "onRangePositionChange", "className", "onViewChange", "toolbarVariant", "onChange", "classes", "view"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { styled, useThemeProps } from '@mui/material/styles';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { useLocaleText, useUtils } from '@mui/x-date-pickers/internals';
+import { DateTimePickerToolbar } from '@mui/x-date-pickers/DateTimePicker';
+import { getDateTimeRangePickerToolbarUtilityClass } from './dateTimeRangePickerToolbarClasses';
+import { calculateRangeChange } from '../internals/utils/date-range-manager';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['root'],
+    startToolbar: ['startToolbar'],
+    endToolbar: ['endToolbar']
+  };
+  return composeClasses(slots, getDateTimeRangePickerToolbarUtilityClass, classes);
+};
+var DateTimeRangePickerToolbarRoot = styled('div', {
+  name: 'MuiDateTimeRangePickerToolbar',
+  slot: 'Root',
+  overridesResolver: function overridesResolver(_, styles) {
+    return styles.root;
+  }
+})({
+  display: 'flex',
+  flexDirection: 'column'
+});
+var DateTimeRangePickerToolbarStart = styled(DateTimePickerToolbar, {
+  name: 'MuiDateTimeRangePickerToolbar',
+  slot: 'StartToolbar',
+  overridesResolver: function overridesResolver(_, styles) {
+    return styles.startToolbar;
+  }
+})(function (_ref) {
+  var ownerState = _ref.ownerState;
+  return _extends({
+    borderBottom: 'none'
+  }, (ownerState == null ? void 0 : ownerState.toolbarVariant) !== 'desktop' ? {
+    padding: '12px 8px 0 12px'
+  } : {
+    paddingBottom: 0
+  });
+});
+var DateTimeRangePickerToolbarEnd = styled(DateTimePickerToolbar, {
+  name: 'MuiDateTimeRangePickerToolbar',
+  slot: 'EndToolbar',
+  overridesResolver: function overridesResolver(_, styles) {
+    return styles.endToolbar;
+  }
+})(function (_ref2) {
+  var ownerState = _ref2.ownerState;
+  return {
+    padding: (ownerState == null ? void 0 : ownerState.toolbarVariant) !== 'desktop' ? '12px 8px 12px 12px' : undefined
+  };
+});
+var DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTimeRangePickerToolbar(inProps, ref) {
+  var props = useThemeProps({
+    props: inProps,
+    name: 'MuiDateTimeRangePickerToolbar'
+  });
+  var utils = useUtils();
+  var _props$value = _slicedToArray(props.value, 2),
+    start = _props$value[0],
+    end = _props$value[1],
+    rangePosition = props.rangePosition,
+    onRangePositionChange = props.onRangePositionChange,
+    className = props.className,
+    onViewChange = props.onViewChange,
+    toolbarVariant = props.toolbarVariant,
+    onChange = props.onChange,
+    inClasses = props.classes,
+    view = props.view,
+    other = _objectWithoutProperties(props, _excluded);
+  var localeText = useLocaleText();
+  var ownerState = props;
+  var classes = useUtilityClasses(ownerState);
+  var handleStartRangeViewChange = React.useCallback(function (newView) {
+    if (newView === 'year' || newView === 'month') {
+      return;
+    }
+    if (rangePosition !== 'start') {
+      onRangePositionChange('start');
+    }
+    onViewChange(newView);
+  }, [onRangePositionChange, onViewChange, rangePosition]);
+  var handleEndRangeViewChange = React.useCallback(function (newView) {
+    if (newView === 'year' || newView === 'month') {
+      return;
+    }
+    if (rangePosition !== 'end') {
+      onRangePositionChange('end');
+    }
+    onViewChange(newView);
+  }, [onRangePositionChange, onViewChange, rangePosition]);
+  var handleOnChange = React.useCallback(function (newDate) {
+    var _calculateRangeChange = calculateRangeChange({
+        newDate: newDate,
+        utils: utils,
+        range: props.value,
+        rangePosition: rangePosition,
+        allowRangeFlip: true
+      }),
+      nextSelection = _calculateRangeChange.nextSelection,
+      newRange = _calculateRangeChange.newRange;
+    onRangePositionChange(nextSelection);
+    onChange(newRange);
+  }, [onChange, onRangePositionChange, props.value, rangePosition, utils]);
+  return /*#__PURE__*/_jsxs(DateTimeRangePickerToolbarRoot, {
+    className: clsx(className, classes.root),
+    ownerState: ownerState,
+    ref: ref,
+    children: [/*#__PURE__*/_jsx(DateTimeRangePickerToolbarStart, _extends({}, other, {
+      value: start,
+      onViewChange: handleStartRangeViewChange,
+      toolbarTitle: localeText.start,
+      ownerState: ownerState,
+      toolbarVariant: "desktop",
+      view: rangePosition === 'start' ? view : undefined,
+      className: classes.startToolbar,
+      onChange: handleOnChange
+    })), /*#__PURE__*/_jsx(DateTimeRangePickerToolbarEnd, _extends({}, other, {
+      value: end,
+      onViewChange: handleEndRangeViewChange,
+      toolbarTitle: localeText.end,
+      ownerState: ownerState,
+      toolbarVariant: "desktop",
+      view: rangePosition === 'end' ? view : undefined,
+      className: classes.endToolbar,
+      onChange: handleOnChange
+    }))]
+  });
+});
+process.env.NODE_ENV !== "production" ? DateTimeRangePickerToolbar.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  ampm: PropTypes.bool,
+  classes: PropTypes.object,
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, show the toolbar even in desktop mode.
+   * @default `true` for Desktop, `false` for Mobile.
+   */
+  hidden: PropTypes.bool,
+  isLandscape: PropTypes.bool.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onRangePositionChange: PropTypes.func.isRequired,
+  /**
+   * Callback called when a toolbar is clicked
+   * @template TView
+   * @param {TView} view The view to open
+   */
+  onViewChange: PropTypes.func.isRequired,
+  rangePosition: PropTypes.oneOf(['end', 'start']).isRequired,
+  readOnly: PropTypes.bool,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  titleId: PropTypes.string,
+  /**
+   * Toolbar date format.
+   */
+  toolbarFormat: PropTypes.string,
+  /**
+   * Toolbar value placeholder—it is displayed when the value is empty.
+   * @default "––"
+   */
+  toolbarPlaceholder: PropTypes.node,
+  toolbarVariant: PropTypes.oneOf(['desktop', 'mobile']),
+  value: PropTypes.arrayOf(PropTypes.any).isRequired,
+  /**
+   * Currently visible picker view.
+   */
+  view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'seconds']).isRequired,
+  views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'seconds']).isRequired).isRequired
+} : void 0;
+export { DateTimeRangePickerToolbar };

package/legacy/DateTimeRangePicker/dateTimeRangePickerTabsClasses.js

@@ -0,0 +1,6 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getDateTimeRangePickerTabsUtilityClass(slot) {
+  return generateUtilityClass('MuiDateTimeRangePickerTabs', slot);
+}
+export var dateTimeRangePickerTabsClasses = generateUtilityClasses('MuiDateTimeRangePickerTabs', ['root', 'tabButton', 'navigationButton', 'filler']);

package/legacy/DateTimeRangePicker/dateTimeRangePickerToolbarClasses.js

@@ -0,0 +1,5 @@
+import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+export function getDateTimeRangePickerToolbarUtilityClass(slot) {
+  return generateUtilityClass('MuiDateTimeRangePickerToolbar', slot);
+}
+export var dateTimeRangePickerToolbarClasses = generateUtilityClasses('MuiDateTimeRangePickerToolbar', ['root', 'startToolbar', 'endToolbar']);

package/legacy/DateTimeRangePicker/index.js

@@ -0,0 +1,5 @@
+export { DateTimeRangePicker } from './DateTimeRangePicker';
+export { DateTimeRangePickerTabs } from './DateTimeRangePickerTabs';
+export { getDateTimeRangePickerTabsUtilityClass, dateTimeRangePickerTabsClasses } from './dateTimeRangePickerTabsClasses';
+export { DateTimeRangePickerToolbar } from './DateTimeRangePickerToolbar';
+export { getDateTimeRangePickerToolbarUtilityClass, dateTimeRangePickerToolbarClasses } from './dateTimeRangePickerToolbarClasses';

package/legacy/DateTimeRangePicker/shared.js

@@ -0,0 +1,54 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { useThemeProps } from '@mui/material/styles';
+import { useDefaultDates, useUtils, applyDefaultDate, applyDefaultViewProps, resolveTimeViewsResponse } from '@mui/x-date-pickers/internals';
+import { DateTimeRangePickerToolbar } from './DateTimeRangePickerToolbar';
+import { DateTimeRangePickerTabs } from './DateTimeRangePickerTabs';
+export function useDateTimeRangePickerDefaultizedProps(props, name) {
+  var _themeProps$ampm, _themeProps$disableFu, _themeProps$disablePa, _themeProps$slotProps;
+  var utils = useUtils();
+  var defaultDates = useDefaultDates();
+  var themeProps = useThemeProps({
+    props: props,
+    name: name
+  });
+  var ampm = (_themeProps$ampm = themeProps.ampm) != null ? _themeProps$ampm : utils.is12HourCycleInCurrentLocale();
+  var _applyDefaultViewProp = applyDefaultViewProps({
+      views: themeProps.views,
+      openTo: themeProps.openTo,
+      defaultViews: ['day', 'hours', 'minutes'],
+      defaultOpenTo: 'day'
+    }),
+    openTo = _applyDefaultViewProp.openTo,
+    defaultViews = _applyDefaultViewProp.views;
+  var _resolveTimeViewsResp = resolveTimeViewsResponse({
+      thresholdToRenderTimeInASingleColumn: themeProps.thresholdToRenderTimeInASingleColumn,
+      ampm: ampm,
+      timeSteps: themeProps.timeSteps,
+      views: defaultViews
+    }),
+    shouldRenderTimeInASingleColumn = _resolveTimeViewsResp.shouldRenderTimeInASingleColumn,
+    thresholdToRenderTimeInASingleColumn = _resolveTimeViewsResp.thresholdToRenderTimeInASingleColumn,
+    views = _resolveTimeViewsResp.views,
+    timeSteps = _resolveTimeViewsResp.timeSteps;
+  return _extends({}, themeProps, {
+    timeSteps: timeSteps,
+    openTo: openTo,
+    shouldRenderTimeInASingleColumn: shouldRenderTimeInASingleColumn,
+    thresholdToRenderTimeInASingleColumn: thresholdToRenderTimeInASingleColumn,
+    views: views,
+    ampm: ampm,
+    disableFuture: (_themeProps$disableFu = themeProps.disableFuture) != null ? _themeProps$disableFu : false,
+    disablePast: (_themeProps$disablePa = themeProps.disablePast) != null ? _themeProps$disablePa : false,
+    minDate: applyDefaultDate(utils, themeProps.minDate, defaultDates.minDate),
+    maxDate: applyDefaultDate(utils, themeProps.maxDate, defaultDates.maxDate),
+    slots: _extends({
+      tabs: DateTimeRangePickerTabs,
+      toolbar: DateTimeRangePickerToolbar
+    }, themeProps.slots),
+    slotProps: _extends({}, themeProps.slotProps, {
+      toolbar: _extends({}, (_themeProps$slotProps = themeProps.slotProps) == null ? void 0 : _themeProps$slotProps.toolbar, {
+        ampm: ampm
+      })
+    })
+  });
+}