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

package/modern/DateTimeRangePicker/DateTimeRangePickerToolbar.js

@@ -0,0 +1,176 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _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";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    startToolbar: ['startToolbar'],
+    endToolbar: ['endToolbar']
+  };
+  return composeClasses(slots, getDateTimeRangePickerToolbarUtilityClass, classes);
+};
+const DateTimeRangePickerToolbarRoot = styled('div', {
+  name: 'MuiDateTimeRangePickerToolbar',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})({
+  display: 'flex',
+  flexDirection: 'column'
+});
+const DateTimeRangePickerToolbarStart = styled(DateTimePickerToolbar, {
+  name: 'MuiDateTimeRangePickerToolbar',
+  slot: 'StartToolbar',
+  overridesResolver: (_, styles) => styles.startToolbar
+})(({
+  ownerState
+}) => _extends({
+  borderBottom: 'none'
+}, ownerState?.toolbarVariant !== 'desktop' ? {
+  padding: '12px 8px 0 12px'
+} : {
+  paddingBottom: 0
+}));
+const DateTimeRangePickerToolbarEnd = styled(DateTimePickerToolbar, {
+  name: 'MuiDateTimeRangePickerToolbar',
+  slot: 'EndToolbar',
+  overridesResolver: (_, styles) => styles.endToolbar
+})(({
+  ownerState
+}) => ({
+  padding: ownerState?.toolbarVariant !== 'desktop' ? '12px 8px 12px 12px' : undefined
+}));
+const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTimeRangePickerToolbar(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiDateTimeRangePickerToolbar'
+  });
+  const utils = useUtils();
+  const {
+      value: [start, end],
+      rangePosition,
+      onRangePositionChange,
+      className,
+      onViewChange,
+      onChange,
+      view
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const localeText = 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
+    } = calculateRangeChange({
+      newDate,
+      utils,
+      range: props.value,
+      rangePosition,
+      allowRangeFlip: true
+    });
+    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/modern/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 const dateTimeRangePickerTabsClasses = generateUtilityClasses('MuiDateTimeRangePickerTabs', ['root', 'tabButton', 'navigationButton', 'filler']);

package/modern/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 const dateTimeRangePickerToolbarClasses = generateUtilityClasses('MuiDateTimeRangePickerToolbar', ['root', 'startToolbar', 'endToolbar']);

package/modern/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/modern/DateTimeRangePicker/shared.js

@@ -0,0 +1,55 @@
+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) {
+  const utils = useUtils();
+  const defaultDates = useDefaultDates();
+  const themeProps = useThemeProps({
+    props,
+    name
+  });
+  const ampm = themeProps.ampm ?? utils.is12HourCycleInCurrentLocale();
+  const {
+    openTo,
+    views: defaultViews
+  } = applyDefaultViewProps({
+    views: themeProps.views,
+    openTo: themeProps.openTo,
+    defaultViews: ['day', 'hours', 'minutes'],
+    defaultOpenTo: 'day'
+  });
+  const {
+    shouldRenderTimeInASingleColumn,
+    thresholdToRenderTimeInASingleColumn,
+    views,
+    timeSteps
+  } = resolveTimeViewsResponse({
+    thresholdToRenderTimeInASingleColumn: themeProps.thresholdToRenderTimeInASingleColumn,
+    ampm,
+    timeSteps: themeProps.timeSteps,
+    views: defaultViews
+  });
+  return _extends({}, themeProps, {
+    timeSteps,
+    openTo,
+    shouldRenderTimeInASingleColumn,
+    thresholdToRenderTimeInASingleColumn,
+    views,
+    ampm,
+    disableFuture: themeProps.disableFuture ?? false,
+    disablePast: themeProps.disablePast ?? 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?.toolbar, {
+        ampm
+      })
+    })
+  });
+}