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

package/DateTimeRangePicker/DateTimeRangePickerTabs.js

@@ -0,0 +1,183 @@
+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";
+const viewToTab = (view, rangePosition) => {
+  if (isDatePickerView(view)) {
+    return rangePosition === 'start' ? 'start-date' : 'end-date';
+  }
+  return rangePosition === 'start' ? 'start-time' : 'end-time';
+};
+const tabToView = tab => {
+  if (tab === 'start-date' || tab === 'end-date') {
+    return 'day';
+  }
+  return 'hours';
+};
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    tabButton: ['tabButton'],
+    navigationButton: ['navigationButton'],
+    filler: ['filler']
+  };
+  return composeClasses(slots, getDateTimeRangePickerTabsUtilityClass, classes);
+};
+const DateTimeRangePickerTabsRoot = styled('div', {
+  name: 'MuiDateTimeRangePickerTabs',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
+  theme
+}) => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
+  minHeight: 48
+}));
+const DateTimeRangePickerTab = styled(Button, {
+  name: 'MuiDateTimeRangePickerTabs',
+  slot: 'TabButton',
+  overridesResolver: (_, styles) => styles.tabButton
+})({
+  textTransform: 'none'
+});
+const DateTimeRangePickerTabFiller = styled('div', {
+  name: 'MuiDateTimeRangePickerTabs',
+  slot: 'Filler',
+  overridesResolver: (_, styles) => styles.filler
+})({
+  width: 40
+});
+const tabOptions = ['start-date', 'start-time', 'end-date', 'end-time'];
+const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(inProps) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiDateTimeRangePickerTabs'
+  });
+  const {
+    dateIcon = /*#__PURE__*/_jsx(DateRangeIcon, {}),
+    onViewChange,
+    timeIcon = /*#__PURE__*/_jsx(TimeIcon, {}),
+    view,
+    hidden = typeof window === 'undefined' || window.innerHeight < 667,
+    rangePosition,
+    onRangePositionChange,
+    className
+  } = props;
+  const localeText = useLocaleText();
+  const classes = useUtilityClasses(props);
+  const value = React.useMemo(() => viewToTab(view, rangePosition), [view, rangePosition]);
+  const isPreviousHidden = value === 'start-date';
+  const isNextHidden = value === 'end-time';
+  const tabLabel = React.useMemo(() => {
+    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]);
+  const handleRangePositionChange = useEventCallback(newTab => {
+    if (newTab.includes('start')) {
+      onRangePositionChange('start');
+    } else {
+      onRangePositionChange('end');
+    }
+  });
+  const changeToPreviousTab = useEventCallback(() => {
+    const previousTab = tabOptions[tabOptions.indexOf(value) - 1];
+    onViewChange(tabToView(previousTab));
+    handleRangePositionChange(previousTab);
+  });
+  const changeToNextTab = useEventCallback(() => {
+    const 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/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { PickerSelectionState, PickerViewRenderer, TimeViewWithMeridiem, BaseClockProps } from '@mui/x-date-pickers/internals';
+import { DateTimeRangePickerView } from '../internals/models';
+import { DateRange } from '../models';
+import { UseRangePositionResponse } from '../internals/hooks/useRangePosition';
+export type DateTimeRangePickerTimeWrapperProps<TDate, TView extends DateTimeRangePickerView, TComponentProps extends Omit<BaseClockProps<TDate, TimeViewWithMeridiem>, 'value' | 'defaultValue' | 'onChange'>> = Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'> & Omit<TComponentProps, 'views' | 'view' | 'onViewChange' | 'value' | 'defaultValue' | 'onChange'> & {
+    view: TView;
+    onViewChange?: (view: TView) => void;
+    views: readonly TView[];
+    value?: DateRange<TDate>;
+    defaultValue?: DateRange<TDate>;
+    onChange?: (value: DateRange<TDate>, selectionState: PickerSelectionState, selectedView: TView) => void;
+    viewRenderer?: PickerViewRenderer<DateRange<TDate>, TView, any, TComponentProps> | null;
+    openTo?: TView;
+};
+/**
+ * @ignore - internal component.
+ */
+declare function DateTimeRangePickerTimeWrapper<TDate, TView extends DateTimeRangePickerView, TComponentProps extends Omit<BaseClockProps<TDate, TimeViewWithMeridiem>, 'value' | 'defaultValue' | 'onChange'>>(props: DateTimeRangePickerTimeWrapperProps<TDate, TView, TComponentProps>, ref: React.Ref<HTMLDivElement>): React.ReactNode;
+export { DateTimeRangePickerTimeWrapper };

package/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js

@@ -0,0 +1,59 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _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;
+  const utils = useUtils();
+  const {
+      rangePosition,
+      onRangePositionChange,
+      viewRenderer,
+      value,
+      onChange,
+      defaultValue,
+      onViewChange,
+      views
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  if (!viewRenderer) {
+    return null;
+  }
+  const currentValue = (_ref = rangePosition === 'start' ? value == null ? void 0 : value[0] : value == null ? void 0 : value[1]) != null ? _ref : null;
+  const currentDefaultValue = (_ref2 = rangePosition === 'start' ? defaultValue == null ? void 0 : defaultValue[0] : defaultValue == null ? void 0 : defaultValue[1]) != null ? _ref2 : null;
+  const handleOnChange = (newDate, selectionState, selectedView) => {
+    if (!onChange || !value) {
+      return;
+    }
+    const {
+      newRange
+    } = calculateRangeChange({
+      newDate,
+      utils,
+      range: value,
+      rangePosition
+    });
+    const isFullRangeSelected = rangePosition === 'end' && isRangeValid(utils, newRange);
+    const 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,
+    views,
+    onViewChange,
+    value: currentValue,
+    onChange: handleOnChange,
+    defaultValue: currentDefaultValue
+  }));
+}
+export { DateTimeRangePickerTimeWrapper };

package/DateTimeRangePicker/DateTimeRangePickerToolbar.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { BaseToolbarProps, ExportedBaseToolbarProps, DateOrTimeViewWithMeridiem, WrapperVariant } from '@mui/x-date-pickers/internals';
+import { DateRange } from '../models';
+import { UseRangePositionResponse } from '../internals/hooks/useRangePosition';
+import { DateTimeRangePickerToolbarClasses } from './dateTimeRangePickerToolbarClasses';
+type DateTimeRangeViews = Exclude<DateOrTimeViewWithMeridiem, 'year' | 'month'>;
+export interface DateTimeRangePickerToolbarProps<TDate> extends BaseToolbarProps<DateRange<TDate>, DateTimeRangeViews>, Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'>, ExportedDateTimeRangePickerToolbarProps {
+    ampm?: boolean;
+    toolbarVariant?: WrapperVariant;
+}
+export interface ExportedDateTimeRangePickerToolbarProps extends ExportedBaseToolbarProps {
+    classes?: Partial<DateTimeRangePickerToolbarClasses>;
+}
+declare const DateTimeRangePickerToolbar: React.ForwardRefExoticComponent<DateTimeRangePickerToolbarProps<unknown> & React.RefAttributes<HTMLDivElement>>;
+export { DateTimeRangePickerToolbar };

package/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 == null ? void 0 : 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 == null ? void 0 : 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/DateTimeRangePicker/dateTimeRangePickerTabsClasses.d.ts

@@ -0,0 +1,13 @@
+export interface DateTimeRangePickerTabsClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the tab button element. */
+    tabButton: string;
+    /** Styles applied to the tab navigation button elements. */
+    navigationButton: string;
+    /** Styles applied to the filler element, shown instead of a navigation arrow. */
+    filler: string;
+}
+export type DateTimeRangePickerTabsClassKey = keyof DateTimeRangePickerTabsClasses;
+export declare function getDateTimeRangePickerTabsUtilityClass(slot: string): string;
+export declare const dateTimeRangePickerTabsClasses: DateTimeRangePickerTabsClasses;

package/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/DateTimeRangePicker/dateTimeRangePickerToolbarClasses.d.ts

@@ -0,0 +1,11 @@
+export interface DateTimeRangePickerToolbarClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the start toolbar element. */
+    startToolbar: string;
+    /** Styles applied to the end toolbar element. */
+    endToolbar: string;
+}
+export type DateTimeRangePickerToolbarClassKey = keyof DateTimeRangePickerToolbarClasses;
+export declare function getDateTimeRangePickerToolbarUtilityClass(slot: string): string;
+export declare const dateTimeRangePickerToolbarClasses: DateTimeRangePickerToolbarClasses;

package/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/DateTimeRangePicker/index.d.ts

@@ -0,0 +1,10 @@
+export { DateTimeRangePicker } from './DateTimeRangePicker';
+export type { DateTimeRangePickerProps, DateTimeRangePickerSlots, DateTimeRangePickerSlotProps, } from './DateTimeRangePicker.types';
+export { DateTimeRangePickerTabs } from './DateTimeRangePickerTabs';
+export type { ExportedDateTimeRangePickerTabsProps } from './DateTimeRangePickerTabs';
+export { getDateTimeRangePickerTabsUtilityClass, dateTimeRangePickerTabsClasses, } from './dateTimeRangePickerTabsClasses';
+export type { DateTimeRangePickerTabsClasses, DateTimeRangePickerTabsClassKey, } from './dateTimeRangePickerTabsClasses';
+export { DateTimeRangePickerToolbar } from './DateTimeRangePickerToolbar';
+export type { DateTimeRangePickerToolbarProps } from './DateTimeRangePickerToolbar';
+export { getDateTimeRangePickerToolbarUtilityClass, dateTimeRangePickerToolbarClasses, } from './dateTimeRangePickerToolbarClasses';
+export type { DateTimeRangePickerToolbarClasses, DateTimeRangePickerToolbarClassKey, } from './dateTimeRangePickerToolbarClasses';

package/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/DateTimeRangePicker/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/DateTimeRangePicker/index.js",
+  "types": "./index.d.ts"
+}

package/DateTimeRangePicker/shared.d.ts

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { LocalizedComponent } from '@mui/x-date-pickers/locales';
+import { DefaultizedProps, BaseDateValidationProps, BasePickerInputProps, PickerViewRendererLookup, BaseClockProps, DesktopOnlyTimePickerProps, TimeViewWithMeridiem, UseViewsOptions, DateTimeValidationProps } from '@mui/x-date-pickers/internals';
+import { TimeViewRendererProps } from '@mui/x-date-pickers/timeViewRenderers';
+import { DigitalClockSlots, DigitalClockSlotProps } from '@mui/x-date-pickers/DigitalClock';
+import { MultiSectionDigitalClockSlots, MultiSectionDigitalClockSlotProps } from '@mui/x-date-pickers/MultiSectionDigitalClock';
+import { DateRange, DateTimeRangeValidationError } from '../models';
+import { DateTimeRangePickerView, DateTimeRangePickerViewExternal } from '../internals/models';
+import { DateRangeCalendarSlots, DateRangeCalendarSlotProps, ExportedDateRangeCalendarProps } from '../DateRangeCalendar';
+import { DateTimeRangePickerToolbarProps, ExportedDateTimeRangePickerToolbarProps } from './DateTimeRangePickerToolbar';
+import { DateRangeViewRendererProps } from '../dateRangeViewRenderers';
+import { DateTimeRangePickerTabsProps, ExportedDateTimeRangePickerTabsProps } from './DateTimeRangePickerTabs';
+export interface BaseDateTimeRangePickerSlots<TDate> extends DateRangeCalendarSlots<TDate>, DigitalClockSlots, MultiSectionDigitalClockSlots {
+    /**
+     * Tabs enabling toggling between date and time pickers.
+     * @default DateTimeRangePickerTabs
+     */
+    tabs?: React.ElementType<DateTimeRangePickerTabsProps>;
+    /**
+     * Custom component for the toolbar rendered above the views.
+     * @default DateTimeRangePickerToolbar
+     */
+    toolbar?: React.JSXElementConstructor<DateTimeRangePickerToolbarProps<TDate>>;
+}
+export interface BaseDateTimeRangePickerSlotProps<TDate> extends DateRangeCalendarSlotProps<TDate>, DigitalClockSlotProps, MultiSectionDigitalClockSlotProps {
+    /**
+     * Props passed down to the tabs component.
+     */
+    tabs?: ExportedDateTimeRangePickerTabsProps;
+    /**
+     * Props passed down to the toolbar component.
+     */
+    toolbar?: ExportedDateTimeRangePickerToolbarProps;
+}
+export interface BaseDateTimeRangePickerProps<TDate> extends Omit<BasePickerInputProps<DateRange<TDate>, TDate, DateTimeRangePickerView, DateTimeRangeValidationError>, 'orientation' | 'views' | 'openTo'>, ExportedDateRangeCalendarProps<TDate>, BaseDateValidationProps<TDate>, DesktopOnlyTimePickerProps<TDate>, Partial<Pick<UseViewsOptions<DateRange<TDate>, DateTimeRangePickerViewExternal>, 'openTo' | 'views'>>, DateTimeValidationProps<TDate> {
+    /**
+     * Overridable component slots.
+     * @default {}
+     */
+    slots?: BaseDateTimeRangePickerSlots<TDate>;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    slotProps?: BaseDateTimeRangePickerSlotProps<TDate>;
+    /**
+     * Define custom view renderers for each section.
+     * If `null`, the section will only have field editing.
+     * If `undefined`, internally defined view will be the used.
+     */
+    viewRenderers?: Partial<PickerViewRendererLookup<DateRange<TDate>, DateTimeRangePickerView, Omit<DateRangeViewRendererProps<TDate, 'day'>, 'view' | 'slots' | 'slotProps'> & Omit<TimeViewRendererProps<TimeViewWithMeridiem, BaseClockProps<TDate, TimeViewWithMeridiem>>, 'view' | 'slots' | 'slotProps'> & {
+        view: DateTimeRangePickerView;
+    }, {}>>;
+}
+type UseDateTimeRangePickerDefaultizedProps<TDate, Props extends BaseDateTimeRangePickerProps<TDate>> = LocalizedComponent<TDate, Omit<DefaultizedProps<Props, 'openTo' | 'ampm' | keyof BaseDateValidationProps<TDate>>, 'views'>> & {
+    shouldRenderTimeInASingleColumn: boolean;
+    views: readonly DateTimeRangePickerView[];
+};
+export declare function useDateTimeRangePickerDefaultizedProps<TDate, Props extends BaseDateTimeRangePickerProps<TDate>>(props: Props, name: string): UseDateTimeRangePickerDefaultizedProps<TDate, Props>;
+export {};

package/DateTimeRangePicker/shared.js

@@ -0,0 +1,56 @@
+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;
+  const utils = useUtils();
+  const defaultDates = useDefaultDates();
+  const themeProps = useThemeProps({
+    props,
+    name
+  });
+  const ampm = (_themeProps$ampm = themeProps.ampm) != null ? _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$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
+      })
+    })
+  });
+}

package/DesktopDateRangePicker/DesktopDateRangePicker.types.d.ts

@@ -3,7 +3,7 @@ import { UseDesktopRangePickerSlots, UseDesktopRangePickerSlotProps, DesktopRang
 import { BaseDateRangePickerProps, BaseDateRangePickerSlots, BaseDateRangePickerSlotProps } from '../DateRangePicker/shared';
 export interface DesktopDateRangePickerSlots<TDate> extends BaseDateRangePickerSlots<TDate>, MakeOptional<UseDesktopRangePickerSlots<TDate, 'day'>, 'field'> {
 }
-export interface DesktopDateRangePickerSlotProps<TDate> extends BaseDateRangePickerSlotProps<TDate>, UseDesktopRangePickerSlotProps<TDate, 'day'> {
+export interface DesktopDateRangePickerSlotProps<TDate> extends BaseDateRangePickerSlotProps<TDate>, Omit<UseDesktopRangePickerSlotProps<TDate, 'day'>, 'tabs'> {
 }
 export interface DesktopDateRangePickerProps<TDate> extends BaseDateRangePickerProps<TDate>, DesktopRangeOnlyPickerProps<TDate> {
     /**

package/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { DesktopDateTimeRangePickerProps } from './DesktopDateTimeRangePicker.types';
+type DesktopDateRangePickerComponent = (<TDate>(props: DesktopDateTimeRangePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+    propTypes?: any;
+};
+declare const DesktopDateTimeRangePicker: DesktopDateRangePickerComponent;
+export { DesktopDateTimeRangePicker };