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

package/node/DateTimeRangePicker/DateTimeRangePickerToolbar.js

@@ -0,0 +1,183 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DateTimeRangePickerToolbar = void 0;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _styles = require("@mui/material/styles");
+var _utils = require("@mui/utils");
+var _internals = require("@mui/x-date-pickers/internals");
+var _DateTimePicker = require("@mui/x-date-pickers/DateTimePicker");
+var _dateTimeRangePickerToolbarClasses = require("./dateTimeRangePickerToolbarClasses");
+var _dateRangeManager = require("../internals/utils/date-range-manager");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["value", "rangePosition", "onRangePositionChange", "className", "onViewChange", "toolbarVariant", "onChange", "classes", "view"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    startToolbar: ['startToolbar'],
+    endToolbar: ['endToolbar']
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _dateTimeRangePickerToolbarClasses.getDateTimeRangePickerToolbarUtilityClass, classes);
+};
+const DateTimeRangePickerToolbarRoot = (0, _styles.styled)('div', {
+  name: 'MuiDateTimeRangePickerToolbar',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})({
+  display: 'flex',
+  flexDirection: 'column'
+});
+const DateTimeRangePickerToolbarStart = (0, _styles.styled)(_DateTimePicker.DateTimePickerToolbar, {
+  name: 'MuiDateTimeRangePickerToolbar',
+  slot: 'StartToolbar',
+  overridesResolver: (_, styles) => styles.startToolbar
+})(({
+  ownerState
+}) => (0, _extends2.default)({
+  borderBottom: 'none'
+}, ownerState?.toolbarVariant !== 'desktop' ? {
+  padding: '12px 8px 0 12px'
+} : {
+  paddingBottom: 0
+}));
+const DateTimeRangePickerToolbarEnd = (0, _styles.styled)(_DateTimePicker.DateTimePickerToolbar, {
+  name: 'MuiDateTimeRangePickerToolbar',
+  slot: 'EndToolbar',
+  overridesResolver: (_, styles) => styles.endToolbar
+})(({
+  ownerState
+}) => ({
+  padding: ownerState?.toolbarVariant !== 'desktop' ? '12px 8px 12px 12px' : undefined
+}));
+const DateTimeRangePickerToolbar = exports.DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTimeRangePickerToolbar(inProps, ref) {
+  const props = (0, _styles.useThemeProps)({
+    props: inProps,
+    name: 'MuiDateTimeRangePickerToolbar'
+  });
+  const utils = (0, _internals.useUtils)();
+  const {
+      value: [start, end],
+      rangePosition,
+      onRangePositionChange,
+      className,
+      onViewChange,
+      onChange,
+      view
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const localeText = (0, _internals.useLocaleText)();
+  const ownerState = props;
+  const classes = useUtilityClasses(ownerState);
+  const handleStartRangeViewChange = React.useCallback(newView => {
+    if (newView === 'year' || newView === 'month') {
+      return;
+    }
+    if (rangePosition !== 'start') {
+      onRangePositionChange('start');
+    }
+    onViewChange(newView);
+  }, [onRangePositionChange, onViewChange, rangePosition]);
+  const handleEndRangeViewChange = React.useCallback(newView => {
+    if (newView === 'year' || newView === 'month') {
+      return;
+    }
+    if (rangePosition !== 'end') {
+      onRangePositionChange('end');
+    }
+    onViewChange(newView);
+  }, [onRangePositionChange, onViewChange, rangePosition]);
+  const handleOnChange = React.useCallback(newDate => {
+    const {
+      nextSelection,
+      newRange
+    } = (0, _dateRangeManager.calculateRangeChange)({
+      newDate,
+      utils,
+      range: props.value,
+      rangePosition,
+      allowRangeFlip: true
+    });
+    onRangePositionChange(nextSelection);
+    onChange(newRange);
+  }, [onChange, onRangePositionChange, props.value, rangePosition, utils]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateTimeRangePickerToolbarRoot, {
+    className: (0, _clsx.default)(className, classes.root),
+    ownerState: ownerState,
+    ref: ref,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DateTimeRangePickerToolbarStart, (0, _extends2.default)({}, other, {
+      value: start,
+      onViewChange: handleStartRangeViewChange,
+      toolbarTitle: localeText.start,
+      ownerState: ownerState,
+      toolbarVariant: "desktop",
+      view: rangePosition === 'start' ? view : undefined,
+      className: classes.startToolbar,
+      onChange: handleOnChange
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(DateTimeRangePickerToolbarEnd, (0, _extends2.default)({}, 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.default.bool,
+  classes: _propTypes.default.object,
+  className: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  /**
+   * If `true`, show the toolbar even in desktop mode.
+   * @default `true` for Desktop, `false` for Mobile.
+   */
+  hidden: _propTypes.default.bool,
+  isLandscape: _propTypes.default.bool.isRequired,
+  onChange: _propTypes.default.func.isRequired,
+  onRangePositionChange: _propTypes.default.func.isRequired,
+  /**
+   * Callback called when a toolbar is clicked
+   * @template TView
+   * @param {TView} view The view to open
+   */
+  onViewChange: _propTypes.default.func.isRequired,
+  rangePosition: _propTypes.default.oneOf(['end', 'start']).isRequired,
+  readOnly: _propTypes.default.bool,
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  titleId: _propTypes.default.string,
+  /**
+   * Toolbar date format.
+   */
+  toolbarFormat: _propTypes.default.string,
+  /**
+   * Toolbar value placeholder—it is displayed when the value is empty.
+   * @default "––"
+   */
+  toolbarPlaceholder: _propTypes.default.node,
+  toolbarVariant: _propTypes.default.oneOf(['desktop', 'mobile']),
+  value: _propTypes.default.arrayOf(_propTypes.default.any).isRequired,
+  /**
+   * Currently visible picker view.
+   */
+  view: _propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'seconds']).isRequired,
+  views: _propTypes.default.arrayOf(_propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'seconds']).isRequired).isRequired
+} : void 0;

package/node/DateTimeRangePicker/dateTimeRangePickerTabsClasses.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dateTimeRangePickerTabsClasses = void 0;
+exports.getDateTimeRangePickerTabsUtilityClass = getDateTimeRangePickerTabsUtilityClass;
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+function getDateTimeRangePickerTabsUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiDateTimeRangePickerTabs', slot);
+}
+const dateTimeRangePickerTabsClasses = exports.dateTimeRangePickerTabsClasses = (0, _generateUtilityClasses.default)('MuiDateTimeRangePickerTabs', ['root', 'tabButton', 'navigationButton', 'filler']);

package/node/DateTimeRangePicker/dateTimeRangePickerToolbarClasses.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dateTimeRangePickerToolbarClasses = void 0;
+exports.getDateTimeRangePickerToolbarUtilityClass = getDateTimeRangePickerToolbarUtilityClass;
+var _utils = require("@mui/utils");
+function getDateTimeRangePickerToolbarUtilityClass(slot) {
+  return (0, _utils.unstable_generateUtilityClass)('MuiDateTimeRangePickerToolbar', slot);
+}
+const dateTimeRangePickerToolbarClasses = exports.dateTimeRangePickerToolbarClasses = (0, _utils.unstable_generateUtilityClasses)('MuiDateTimeRangePickerToolbar', ['root', 'startToolbar', 'endToolbar']);

package/node/DateTimeRangePicker/index.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DateTimeRangePicker", {
+  enumerable: true,
+  get: function () {
+    return _DateTimeRangePicker.DateTimeRangePicker;
+  }
+});
+Object.defineProperty(exports, "DateTimeRangePickerTabs", {
+  enumerable: true,
+  get: function () {
+    return _DateTimeRangePickerTabs.DateTimeRangePickerTabs;
+  }
+});
+Object.defineProperty(exports, "DateTimeRangePickerToolbar", {
+  enumerable: true,
+  get: function () {
+    return _DateTimeRangePickerToolbar.DateTimeRangePickerToolbar;
+  }
+});
+Object.defineProperty(exports, "dateTimeRangePickerTabsClasses", {
+  enumerable: true,
+  get: function () {
+    return _dateTimeRangePickerTabsClasses.dateTimeRangePickerTabsClasses;
+  }
+});
+Object.defineProperty(exports, "dateTimeRangePickerToolbarClasses", {
+  enumerable: true,
+  get: function () {
+    return _dateTimeRangePickerToolbarClasses.dateTimeRangePickerToolbarClasses;
+  }
+});
+Object.defineProperty(exports, "getDateTimeRangePickerTabsUtilityClass", {
+  enumerable: true,
+  get: function () {
+    return _dateTimeRangePickerTabsClasses.getDateTimeRangePickerTabsUtilityClass;
+  }
+});
+Object.defineProperty(exports, "getDateTimeRangePickerToolbarUtilityClass", {
+  enumerable: true,
+  get: function () {
+    return _dateTimeRangePickerToolbarClasses.getDateTimeRangePickerToolbarUtilityClass;
+  }
+});
+var _DateTimeRangePicker = require("./DateTimeRangePicker");
+var _DateTimeRangePickerTabs = require("./DateTimeRangePickerTabs");
+var _dateTimeRangePickerTabsClasses = require("./dateTimeRangePickerTabsClasses");
+var _DateTimeRangePickerToolbar = require("./DateTimeRangePickerToolbar");
+var _dateTimeRangePickerToolbarClasses = require("./dateTimeRangePickerToolbarClasses");

package/node/DateTimeRangePicker/shared.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDateTimeRangePickerDefaultizedProps = useDateTimeRangePickerDefaultizedProps;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _styles = require("@mui/material/styles");
+var _internals = require("@mui/x-date-pickers/internals");
+var _DateTimeRangePickerToolbar = require("./DateTimeRangePickerToolbar");
+var _DateTimeRangePickerTabs = require("./DateTimeRangePickerTabs");
+function useDateTimeRangePickerDefaultizedProps(props, name) {
+  const utils = (0, _internals.useUtils)();
+  const defaultDates = (0, _internals.useDefaultDates)();
+  const themeProps = (0, _styles.useThemeProps)({
+    props,
+    name
+  });
+  const ampm = themeProps.ampm ?? utils.is12HourCycleInCurrentLocale();
+  const {
+    openTo,
+    views: defaultViews
+  } = (0, _internals.applyDefaultViewProps)({
+    views: themeProps.views,
+    openTo: themeProps.openTo,
+    defaultViews: ['day', 'hours', 'minutes'],
+    defaultOpenTo: 'day'
+  });
+  const {
+    shouldRenderTimeInASingleColumn,
+    thresholdToRenderTimeInASingleColumn,
+    views,
+    timeSteps
+  } = (0, _internals.resolveTimeViewsResponse)({
+    thresholdToRenderTimeInASingleColumn: themeProps.thresholdToRenderTimeInASingleColumn,
+    ampm,
+    timeSteps: themeProps.timeSteps,
+    views: defaultViews
+  });
+  return (0, _extends2.default)({}, themeProps, {
+    timeSteps,
+    openTo,
+    shouldRenderTimeInASingleColumn,
+    thresholdToRenderTimeInASingleColumn,
+    views,
+    ampm,
+    disableFuture: themeProps.disableFuture ?? false,
+    disablePast: themeProps.disablePast ?? false,
+    minDate: (0, _internals.applyDefaultDate)(utils, themeProps.minDate, defaultDates.minDate),
+    maxDate: (0, _internals.applyDefaultDate)(utils, themeProps.maxDate, defaultDates.maxDate),
+    slots: (0, _extends2.default)({
+      tabs: _DateTimeRangePickerTabs.DateTimeRangePickerTabs,
+      toolbar: _DateTimeRangePickerToolbar.DateTimeRangePickerToolbar
+    }, themeProps.slots),
+    slotProps: (0, _extends2.default)({}, themeProps.slotProps, {
+      toolbar: (0, _extends2.default)({}, themeProps.slotProps?.toolbar, {
+        ampm
+      })
+    })
+  });
+}

package/node/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -79,9 +79,6 @@ DesktopDateRangePicker.propTypes = {
    * @default 2
    */
   calendars: _propTypes.default.oneOf([1, 2, 3]),
-  /**
-   * Class name applied to the root element.
-   */
   className: _propTypes.default.string,
   /**
    * If `true`, the popover or modal will close after submitting the full date.