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

package/{node → esm}/DateTimeRangePicker/DateTimeRangePickerTabs.js

@@ -1,28 +1,21 @@
-"use strict";
 'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DateTimeRangePickerTabs = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styles = require("@mui/material/styles");
-var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
-var _icons = require("@mui/x-date-pickers/icons");
-var _internals = require("@mui/x-date-pickers/internals");
-var _hooks = require("@mui/x-date-pickers/hooks");
-var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
-var _Button = _interopRequireDefault(require("@mui/material/Button"));
-var _dateTimeRangePickerTabsClasses = require("./dateTimeRangePickerTabsClasses");
-var _hooks2 = require("../hooks");
-var _jsxRuntime = require("react/jsx-runtime");
+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 { isDatePickerView, usePickerPrivateContext } from '@mui/x-date-pickers/internals';
+import { usePickerContext, usePickerTranslations } from '@mui/x-date-pickers/hooks';
+import IconButton from '@mui/material/IconButton';
+import Button from '@mui/material/Button';
+import { getDateTimeRangePickerTabsUtilityClass } from "./dateTimeRangePickerTabsClasses.js";
+import { usePickerRangePositionContext } from "../hooks/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const viewToTab = (view, rangePosition) => {
-  if ((0, _internals.isDatePickerView)(view)) {
+  if (isDatePickerView(view)) {
     return rangePosition === 'start' ? 'start-date' : 'end-date';
   }
   return rangePosition === 'start' ? 'start-time' : 'end-time';
@@ -40,9 +33,9 @@ const useUtilityClasses = classes => {
     navigationButton: ['navigationButton'],
     filler: ['filler']
   };
-  return (0, _composeClasses.default)(slots, _dateTimeRangePickerTabsClasses.getDateTimeRangePickerTabsUtilityClass, classes);
+  return composeClasses(slots, getDateTimeRangePickerTabsUtilityClass, classes);
 };
-const DateTimeRangePickerTabsRoot = (0, _styles.styled)('div', {
+const DateTimeRangePickerTabsRoot = styled('div', {
   name: 'MuiDateTimeRangePickerTabs',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
@@ -55,14 +48,14 @@ const DateTimeRangePickerTabsRoot = (0, _styles.styled)('div', {
   borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
   minHeight: 48
 }));
-const DateTimeRangePickerTab = (0, _styles.styled)(_Button.default, {
+const DateTimeRangePickerTab = styled(Button, {
   name: 'MuiDateTimeRangePickerTabs',
   slot: 'TabButton',
   overridesResolver: (_, styles) => styles.tabButton
 })({
   textTransform: 'none'
 });
-const DateTimeRangePickerTabFiller = (0, _styles.styled)('div', {
+const DateTimeRangePickerTabFiller = styled('div', {
   name: 'MuiDateTimeRangePickerTabs',
   slot: 'Filler',
   overridesResolver: (_, styles) => styles.filler
@@ -70,32 +63,32 @@ const DateTimeRangePickerTabFiller = (0, _styles.styled)('div', {
   width: 40
 });
 const tabOptions = ['start-date', 'start-time', 'end-date', 'end-time'];
-const DateTimeRangePickerTabs = exports.DateTimeRangePickerTabs = function DateTimeRangePickerTabs(inProps) {
-  const props = (0, _styles.useThemeProps)({
+const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(inProps) {
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiDateTimeRangePickerTabs'
   });
   const {
-    dateIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DateRangeIcon, {}),
-    timeIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.TimeIcon, {}),
+    dateIcon = /*#__PURE__*/_jsx(DateRangeIcon, {}),
+    timeIcon = /*#__PURE__*/_jsx(TimeIcon, {}),
     hidden = typeof window === 'undefined' || window.innerHeight < 667,
     className,
     classes: classesProp,
     sx
   } = props;
-  const translations = (0, _hooks.usePickerTranslations)();
+  const translations = usePickerTranslations();
   const {
     ownerState
-  } = (0, _internals.usePickerPrivateContext)();
+  } = usePickerPrivateContext();
   const {
     view,
     setView
-  } = (0, _hooks.usePickerContext)();
+  } = usePickerContext();
   const classes = useUtilityClasses(classesProp);
   const {
     rangePosition,
     setRangePosition
-  } = (0, _hooks2.usePickerRangePositionContext)();
+  } = usePickerRangePositionContext();
   const value = React.useMemo(() => view == null ? null : viewToTab(view, rangePosition), [view, rangePosition]);
   const isPreviousHidden = value === 'start-date';
   const isNextHidden = value === 'end-time';
@@ -113,19 +106,19 @@ const DateTimeRangePickerTabs = exports.DateTimeRangePickerTabs = function DateT
         return '';
     }
   }, [translations.endDate, translations.endTime, translations.startDate, translations.startTime, value]);
-  const handleRangePositionChange = (0, _useEventCallback.default)(newTab => {
+  const handleRangePositionChange = useEventCallback(newTab => {
     if (newTab.includes('start')) {
       setRangePosition('start');
     } else {
       setRangePosition('end');
     }
   });
-  const changeToPreviousTab = (0, _useEventCallback.default)(() => {
+  const changeToPreviousTab = useEventCallback(() => {
     const previousTab = value == null ? tabOptions[0] : tabOptions[tabOptions.indexOf(value) - 1];
     setView(tabToView(previousTab));
     handleRangePositionChange(previousTab);
   });
-  const changeToNextTab = (0, _useEventCallback.default)(() => {
+  const changeToNextTab = useEventCallback(() => {
     const nextTab = value == null ? tabOptions[0] : tabOptions[tabOptions.indexOf(value) + 1];
     setView(tabToView(nextTab));
     handleRangePositionChange(nextTab);
@@ -136,33 +129,33 @@ const DateTimeRangePickerTabs = exports.DateTimeRangePickerTabs = function DateT
   let startIcon;
   if (view == null) {
     startIcon = null;
-  } else if ((0, _internals.isDatePickerView)(view)) {
+  } else if (isDatePickerView(view)) {
     startIcon = dateIcon;
   } else {
     startIcon = timeIcon;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateTimeRangePickerTabsRoot, {
+  return /*#__PURE__*/_jsxs(DateTimeRangePickerTabsRoot, {
     ownerState: ownerState,
-    className: (0, _clsx.default)(classes.root, className),
+    className: clsx(classes.root, className),
     sx: sx,
-    children: [!isPreviousHidden ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+    children: [!isPreviousHidden ? /*#__PURE__*/_jsx(IconButton, {
       onClick: changeToPreviousTab,
       className: classes.navigationButton,
       title: translations.openPreviousView,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ArrowLeftIcon, {})
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(DateTimeRangePickerTabFiller, {
+      children: /*#__PURE__*/_jsx(ArrowLeftIcon, {})
+    }) : /*#__PURE__*/_jsx(DateTimeRangePickerTabFiller, {
       className: classes.filler
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DateTimeRangePickerTab, {
+    }), /*#__PURE__*/_jsx(DateTimeRangePickerTab, {
       startIcon: startIcon,
       className: classes.tabButton,
       size: "large",
       children: tabLabel
-    }), !isNextHidden ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+    }), !isNextHidden ? /*#__PURE__*/_jsx(IconButton, {
       onClick: changeToNextTab,
       className: classes.navigationButton,
       title: translations.openNextView,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ArrowRightIcon, {})
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(DateTimeRangePickerTabFiller, {
+      children: /*#__PURE__*/_jsx(ArrowRightIcon, {})
+    }) : /*#__PURE__*/_jsx(DateTimeRangePickerTabFiller, {
       className: classes.filler
     })]
   });
@@ -175,25 +168,26 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerTabs.propTypes = {
   /**
    * Override or extend the styles applied to the component.
    */
-  classes: _propTypes.default.object,
-  className: _propTypes.default.string,
+  classes: PropTypes.object,
+  className: PropTypes.string,
   /**
    * Date tab icon.
    * @default DateRangeIcon
    */
-  dateIcon: _propTypes.default.element,
+  dateIcon: PropTypes.element,
   /**
    * Toggles visibility of the tabs allowing view switching.
    * @default `window.innerHeight < 667` for `DesktopDateTimeRangePicker` and `MobileDateTimeRangePicker`
    */
-  hidden: _propTypes.default.bool,
+  hidden: PropTypes.bool,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  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]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   /**
    * Time tab icon.
    * @default TimeIcon
    */
-  timeIcon: _propTypes.default.element
-} : void 0;
+  timeIcon: PropTypes.element
+} : void 0;
+export { DateTimeRangePickerTabs };

package/esm/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.d.ts

@@ -0,0 +1,17 @@
+import { DefaultizedProps } from '@mui/x-internals/types';
+import { PickerSelectionState, PickerViewRenderer, TimeViewWithMeridiem, BaseClockProps, PickerRangeValue } from '@mui/x-date-pickers/internals';
+export type DateTimeRangePickerTimeWrapperProps<TComponentProps extends DefaultizedProps<Omit<BaseClockProps<TimeViewWithMeridiem>, 'value' | 'defaultValue' | 'onChange'>, 'views'>> = Omit<TComponentProps, 'views' | 'view' | 'onViewChange' | 'value' | 'defaultValue' | 'onChange'> & {
+  view: TimeViewWithMeridiem;
+  onViewChange?: (view: TimeViewWithMeridiem) => void;
+  views: readonly TimeViewWithMeridiem[];
+  value?: PickerRangeValue;
+  defaultValue?: PickerRangeValue;
+  onChange?: (value: PickerRangeValue, selectionState: PickerSelectionState, selectedView: TimeViewWithMeridiem) => void;
+  viewRenderer?: PickerViewRenderer<PickerRangeValue, TComponentProps> | null;
+  openTo?: TimeViewWithMeridiem;
+};
+/**
+ * @ignore - internal component.
+ */
+declare function DateTimeRangePickerTimeWrapper<TComponentProps extends DefaultizedProps<Omit<BaseClockProps<TimeViewWithMeridiem>, 'value' | 'defaultValue' | 'onChange'>, 'views'>>(props: DateTimeRangePickerTimeWrapperProps<TComponentProps>): import("react").ReactNode;
+export { DateTimeRangePickerTimeWrapper };

package/esm/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js

@@ -0,0 +1,60 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["viewRenderer", "value", "onChange", "defaultValue", "onViewChange", "views", "className"];
+import { isInternalTimeView, useUtils } from '@mui/x-date-pickers/internals';
+import { isRangeValid } from "../internals/utils/date-utils.js";
+import { calculateRangeChange } from "../internals/utils/date-range-manager.js";
+import { usePickerRangePositionContext } from "../hooks/index.js";
+/**
+ * @ignore - internal component.
+ */
+function DateTimeRangePickerTimeWrapper(props) {
+  const utils = useUtils();
+  const {
+      viewRenderer,
+      value,
+      onChange,
+      defaultValue,
+      onViewChange,
+      views
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    rangePosition,
+    setRangePosition
+  } = usePickerRangePositionContext();
+  if (!viewRenderer) {
+    return null;
+  }
+  const currentValue = (rangePosition === 'start' ? value?.[0] : value?.[1]) ?? null;
+  const currentDefaultValue = (rangePosition === 'start' ? defaultValue?.[0] : defaultValue?.[1]) ?? 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]);
+      setRangePosition(rangePosition === 'start' ? 'end' : 'start');
+    }
+    onChange(newRange, isFullRangeSelected ? 'finish' : 'partial', selectedView);
+  };
+  return viewRenderer(_extends({}, other, {
+    views,
+    onViewChange,
+    value: currentValue,
+    onChange: handleOnChange,
+    defaultValue: currentDefaultValue
+  }));
+}
+export { DateTimeRangePickerTimeWrapper };

package/esm/DateTimeRangePicker/DateTimeRangePickerToolbar.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { BaseToolbarProps, ExportedBaseToolbarProps } from '@mui/x-date-pickers/internals';
+import { DateTimeRangePickerToolbarClasses } from "./dateTimeRangePickerToolbarClasses.js";
+export interface DateTimeRangePickerToolbarProps extends BaseToolbarProps, ExportedDateTimeRangePickerToolbarProps {
+  ampm?: boolean;
+}
+export interface ExportedDateTimeRangePickerToolbarProps extends ExportedBaseToolbarProps {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<DateTimeRangePickerToolbarClasses>;
+}
+type DateTimeRangePickerToolbarComponent = ((props: DateTimeRangePickerToolbarProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+  propTypes?: any;
+};
+declare const DateTimeRangePickerToolbar: DateTimeRangePickerToolbarComponent;
+export { DateTimeRangePickerToolbar };

package/{node → esm}/DateTimeRangePicker/DateTimeRangePickerToolbar.js

@@ -1,36 +1,29 @@
-"use strict";
 'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DateTimeRangePickerToolbar = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var React = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _styles = require("@mui/material/styles");
-var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _internals = require("@mui/x-date-pickers/internals");
-var _hooks = require("@mui/x-date-pickers/hooks");
-var _DateTimePicker = require("@mui/x-date-pickers/DateTimePicker");
-var _dateTimeRangePickerToolbarClasses = require("./dateTimeRangePickerToolbarClasses");
-var _dateRangeManager = require("../internals/utils/date-range-manager");
-var _hooks2 = require("../hooks");
-var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "classes", "classes", "ampm", "hidden", "toolbarFormat", "toolbarPlaceholder", "titleId", "sx"];
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className", "classes", "ampm", "hidden", "toolbarFormat", "toolbarPlaceholder", "titleId", "sx"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { styled, useThemeProps } from '@mui/material/styles';
+import composeClasses from '@mui/utils/composeClasses';
+import { useUtils, useToolbarOwnerState, DateTimePickerToolbarOverrideContext } from '@mui/x-date-pickers/internals';
+import { usePickerContext, usePickerTranslations } from '@mui/x-date-pickers/hooks';
+import { DateTimePickerToolbar } from '@mui/x-date-pickers/DateTimePicker';
+import { getDateTimeRangePickerToolbarUtilityClass } from "./dateTimeRangePickerToolbarClasses.js";
+import { calculateRangeChange } from "../internals/utils/date-range-manager.js";
+import { usePickerRangePositionContext } from "../hooks/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     startToolbar: ['startToolbar'],
     endToolbar: ['endToolbar']
   };
-  return (0, _composeClasses.default)(slots, _dateTimeRangePickerToolbarClasses.getDateTimeRangePickerToolbarUtilityClass, classes);
+  return composeClasses(slots, getDateTimeRangePickerToolbarUtilityClass, classes);
 };
-const DateTimeRangePickerToolbarRoot = (0, _styles.styled)('div', {
+const DateTimeRangePickerToolbarRoot = styled('div', {
   name: 'MuiDateTimeRangePickerToolbar',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
@@ -38,7 +31,7 @@ const DateTimeRangePickerToolbarRoot = (0, _styles.styled)('div', {
   display: 'flex',
   flexDirection: 'column'
 });
-const DateTimeRangePickerToolbarStart = (0, _styles.styled)(_DateTimePicker.DateTimePickerToolbar, {
+const DateTimeRangePickerToolbarStart = styled(DateTimePickerToolbar, {
   name: 'MuiDateTimeRangePickerToolbar',
   slot: 'StartToolbar',
   overridesResolver: (_, styles) => styles.startToolbar
@@ -46,17 +39,17 @@ const DateTimeRangePickerToolbarStart = (0, _styles.styled)(_DateTimePicker.Date
   borderBottom: 'none',
   paddingBottom: 0
 });
-const DateTimeRangePickerToolbarEnd = (0, _styles.styled)(_DateTimePicker.DateTimePickerToolbar, {
+const DateTimeRangePickerToolbarEnd = styled(DateTimePickerToolbar, {
   name: 'MuiDateTimeRangePickerToolbar',
   slot: 'EndToolbar',
   overridesResolver: (_, styles) => styles.endToolbar
 })({});
-const DateTimeRangePickerToolbar = exports.DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTimeRangePickerToolbar(inProps, ref) {
-  const props = (0, _styles.useThemeProps)({
+const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTimeRangePickerToolbar(inProps, ref) {
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiDateTimeRangePickerToolbar'
   });
-  const utils = (0, _internals.useUtils)();
+  const utils = useUtils();
   const {
       className,
       classes: classesProp,
@@ -67,7 +60,7 @@ const DateTimeRangePickerToolbar = exports.DateTimeRangePickerToolbar = /*#__PUR
       titleId,
       sx
     } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
     value,
     setValue,
@@ -76,13 +69,13 @@ const DateTimeRangePickerToolbar = exports.DateTimeRangePickerToolbar = /*#__PUR
     view,
     setView,
     views
-  } = (0, _hooks.usePickerContext)();
-  const translations = (0, _hooks.usePickerTranslations)();
-  const ownerState = (0, _internals.useToolbarOwnerState)();
+  } = usePickerContext();
+  const translations = usePickerTranslations();
+  const ownerState = useToolbarOwnerState();
   const {
     rangePosition,
     setRangePosition
-  } = (0, _hooks2.usePickerRangePositionContext)();
+  } = usePickerRangePositionContext();
   const classes = useUtilityClasses(classesProp);
   const commonToolbarProps = {
     views,
@@ -97,7 +90,7 @@ const DateTimeRangePickerToolbar = exports.DateTimeRangePickerToolbar = /*#__PUR
     const {
       nextSelection,
       newRange
-    } = (0, _dateRangeManager.calculateRangeChange)({
+    } = calculateRangeChange({
       newDate,
       utils,
       range: value,
@@ -148,23 +141,23 @@ const DateTimeRangePickerToolbar = exports.DateTimeRangePickerToolbar = /*#__PUR
   if (hidden) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateTimeRangePickerToolbarRoot, (0, _extends2.default)({
-    className: (0, _clsx.default)(classes.root, className),
+  return /*#__PURE__*/_jsxs(DateTimeRangePickerToolbarRoot, _extends({
+    className: clsx(classes.root, className),
     ownerState: ownerState,
     ref: ref,
     sx: sx
   }, other, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.DateTimePickerToolbarOverrideContext.Provider, {
+    children: [/*#__PURE__*/_jsx(DateTimePickerToolbarOverrideContext.Provider, {
       value: startOverrides,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DateTimeRangePickerToolbarStart, (0, _extends2.default)({
+      children: /*#__PURE__*/_jsx(DateTimeRangePickerToolbarStart, _extends({
         toolbarTitle: translations.start,
         ownerState: ownerState,
         className: classes.startToolbar,
         titleId: titleId ? `${titleId}-start-toolbar` : undefined
       }, commonToolbarProps))
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.DateTimePickerToolbarOverrideContext.Provider, {
+    }), /*#__PURE__*/_jsx(DateTimePickerToolbarOverrideContext.Provider, {
       value: endOverrides,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DateTimeRangePickerToolbarEnd, (0, _extends2.default)({
+      children: /*#__PURE__*/_jsx(DateTimeRangePickerToolbarEnd, _extends({
         toolbarTitle: translations.end,
         ownerState: ownerState,
         className: classes.endToolbar,
@@ -178,29 +171,30 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerToolbar.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  ampm: _propTypes.default.bool,
+  ampm: PropTypes.bool,
   /**
    * Override or extend the styles applied to the component.
    */
-  classes: _propTypes.default.object,
-  className: _propTypes.default.string,
+  classes: PropTypes.object,
+  className: PropTypes.string,
   /**
    * If `true`, show the toolbar even in desktop mode.
    * @default `true` for Desktop, `false` for Mobile.
    */
-  hidden: _propTypes.default.bool,
+  hidden: PropTypes.bool,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  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,
+  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.default.string,
+  toolbarFormat: PropTypes.string,
   /**
    * Toolbar value placeholder—it is displayed when the value is empty.
    * @default "––"
    */
-  toolbarPlaceholder: _propTypes.default.node
-} : void 0;
+  toolbarPlaceholder: PropTypes.node
+} : void 0;
+export { DateTimeRangePickerToolbar };

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

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

package/esm/DateTimeRangePicker/index.js

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

package/esm/DateTimeRangePicker/shared.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { DefaultizedProps } from '@mui/x-internals/types';
+import { LocalizedComponent } from '@mui/x-date-pickers/locales';
+import { BasePickerInputProps, PickerViewRendererLookup, BaseClockProps, DigitalTimePickerProps, TimeViewWithMeridiem, UseViewsOptions, DateOrTimeViewWithMeridiem, PickerRangeValue } 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 { DateTimeRangeValidationError } from "../models/index.js";
+import { DateTimeRangePickerView, DateTimeRangePickerViewExternal } from "../internals/models/index.js";
+import { DateRangeCalendarSlots, DateRangeCalendarSlotProps, ExportedDateRangeCalendarProps } from "../DateRangeCalendar/index.js";
+import { DateTimeRangePickerToolbarProps, ExportedDateTimeRangePickerToolbarProps } from "./DateTimeRangePickerToolbar.js";
+import { DateRangeViewRendererProps } from "../dateRangeViewRenderers/index.js";
+import { DateTimeRangePickerTabsProps, ExportedDateTimeRangePickerTabsProps } from "./DateTimeRangePickerTabs.js";
+import { ExportedValidateDateTimeRangeProps, ValidateDateTimeRangePropsToDefault } from "../validation/validateDateTimeRange.js";
+export interface BaseDateTimeRangePickerSlots extends DateRangeCalendarSlots, 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>;
+}
+export interface BaseDateTimeRangePickerSlotProps extends DateRangeCalendarSlotProps, DigitalClockSlotProps, MultiSectionDigitalClockSlotProps {
+  /**
+   * Props passed down to the tabs component.
+   */
+  tabs?: ExportedDateTimeRangePickerTabsProps;
+  /**
+   * Props passed down to the toolbar component.
+   */
+  toolbar?: ExportedDateTimeRangePickerToolbarProps;
+}
+type DateTimeRangePickerRenderers<TView extends DateOrTimeViewWithMeridiem> = PickerViewRendererLookup<PickerRangeValue, TView, Omit<DateRangeViewRendererProps<'day'>, 'view' | 'slots' | 'slotProps'> & Omit<TimeViewRendererProps<TimeViewWithMeridiem, BaseClockProps<TimeViewWithMeridiem>>, 'view' | 'slots' | 'slotProps'> & {
+  view: TView;
+}>;
+export interface BaseDateTimeRangePickerProps extends Omit<BasePickerInputProps<PickerRangeValue, DateTimeRangePickerView, DateTimeRangeValidationError>, 'orientation' | 'views' | 'openTo'>, ExportedDateRangeCalendarProps, ExportedValidateDateTimeRangeProps, DigitalTimePickerProps, Partial<Pick<UseViewsOptions<PickerRangeValue, DateTimeRangePickerViewExternal>, 'openTo' | 'views'>> {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BaseDateTimeRangePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BaseDateTimeRangePickerSlotProps;
+  /**
+   * Define custom view renderers for each section.
+   * If `null`, the section will only have field editing.
+   * If `undefined`, internally defined view will be used.
+   */
+  viewRenderers?: Partial<DateTimeRangePickerRenderers<DateTimeRangePickerView>>;
+}
+type UseDateTimeRangePickerDefaultizedProps<Props extends BaseDateTimeRangePickerProps> = LocalizedComponent<Omit<DefaultizedProps<Props, 'openTo' | 'ampm' | ValidateDateTimeRangePropsToDefault>, 'views'>> & {
+  shouldRenderTimeInASingleColumn: boolean;
+  views: readonly DateTimeRangePickerView[];
+};
+export declare function useDateTimeRangePickerDefaultizedProps<Props extends BaseDateTimeRangePickerProps>(props: Props, name: string): UseDateTimeRangePickerDefaultizedProps<Props>;
+export {};