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

package/{node/DateTimeRangePicker/DateTimeRangePicker.js → TimeRangePicker/TimeRangePicker.js}

@@ -6,32 +6,32 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DateTimeRangePicker = void 0;
+exports.TimeRangePicker = 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 _utils = require("@mui/utils");
 var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
 var _styles = require("@mui/material/styles");
-var _DesktopDateTimeRangePicker = require("../DesktopDateTimeRangePicker");
-var _MobileDateTimeRangePicker = require("../MobileDateTimeRangePicker");
+var _refType = _interopRequireDefault(require("@mui/utils/refType"));
+var _DesktopTimeRangePicker = require("../DesktopTimeRangePicker");
+var _MobileTimeRangePicker = require("../MobileTimeRangePicker");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["desktopModeMediaQuery"];
 /**
  * Demos:
  *
- * - [DateTimeRangePicker](https://mui.com/x/react-date-pickers/date-time-range-picker/)
+ * - [TimeRangePicker](https://mui.com/x/react-date-pickers/time-range-picker/)
  * - [Validation](https://mui.com/x/react-date-pickers/validation/)
  *
  * API:
  *
- * - [DateTimeRangePicker API](https://mui.com/x/api/date-pickers/date-time-range-picker/)
+ * - [TimeRangePicker API](https://mui.com/x/api/date-pickers/time-range-picker/)
  */
-const DateTimeRangePicker = exports.DateTimeRangePicker = /*#__PURE__*/React.forwardRef(function DateTimeRangePicker(inProps, ref) {
+const TimeRangePicker = exports.TimeRangePicker = /*#__PURE__*/React.forwardRef(function TimeRangePicker(inProps, ref) {
   const props = (0, _styles.useThemeProps)({
     props: inProps,
-    name: 'MuiDateTimeRangePicker'
+    name: 'MuiTimeRangePicker'
   });
   const {
       desktopModeMediaQuery = '@media (pointer: fine)'
@@ -43,15 +43,15 @@ const DateTimeRangePicker = exports.DateTimeRangePicker = /*#__PURE__*/React.for
     defaultMatches: true
   });
   if (isDesktop) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DesktopDateTimeRangePicker.DesktopDateTimeRangePicker, (0, _extends2.default)({
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DesktopTimeRangePicker.DesktopTimeRangePicker, (0, _extends2.default)({
       ref: ref
     }, other));
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MobileDateTimeRangePicker.MobileDateTimeRangePicker, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MobileTimeRangePicker.MobileTimeRangePicker, (0, _extends2.default)({
     ref: ref
   }, other));
 });
-process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
+process.env.NODE_ENV !== "production" ? TimeRangePicker.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
@@ -68,29 +68,12 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: _propTypes.default.bool,
-  /**
-   * The number of calendars to render on **desktop**.
-   * @default 1
-   */
-  calendars: _propTypes.default.oneOf([1, 2, 3]),
   className: _propTypes.default.string,
   /**
    * If `true`, the Picker will close after submitting the full date.
    * @default false
    */
   closeOnSelect: _propTypes.default.bool,
-  /**
-   * Position the current month is rendered in.
-   * @default 1
-   */
-  currentMonthCalendarPosition: _propTypes.default.oneOf([1, 2, 3]),
-  /**
-   * Formats the day of week displayed in the calendar header.
-   * @param {PickerValidDate} date The date of the day of week provided by the adapter.
-   * @returns {string} The name to display.
-   * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
-   */
-  dayOfWeekFormatter: _propTypes.default.func,
   /**
    * The initial position in the edited date range.
    * Used when the component is not controlled.
@@ -108,39 +91,24 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
    * @example '@media (min-width: 720px)' or theme.breakpoints.up("sm")
    */
   desktopModeMediaQuery: _propTypes.default.string,
-  /**
-   * If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.
-   * @default false
-   */
-  disableAutoMonthSwitching: _propTypes.default.bool,
   /**
    * If `true`, the component is disabled.
    * When disabled, the value cannot be changed and no interaction is possible.
    * @default false
    */
   disabled: _propTypes.default.bool,
-  /**
-   * If `true`, editing dates by dragging is disabled.
-   * @default false
-   */
-  disableDragEditing: _propTypes.default.bool,
   /**
    * If `true`, disable values after the current date for date components, time for time components and both for date time components.
    * @default false
    */
   disableFuture: _propTypes.default.bool,
-  /**
-   * If `true`, today's date is rendering without highlighting with circle.
-   * @default false
-   */
-  disableHighlightToday: _propTypes.default.bool,
   /**
    * Do not ignore date part when validating min/max time.
    * @default false
    */
   disableIgnoringDatePartForTimeValidation: _propTypes.default.bool,
   /**
-   * If `true`, the open picker button will not be rendered (renders only the field).
+   * If `true`, the button to open the Picker will not be rendered (it will only render the field).
    * @default false
    */
   disableOpenPicker: _propTypes.default.bool,
@@ -149,19 +117,10 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
    * @default false
    */
   disablePast: _propTypes.default.bool,
-  /**
-   * If `true`, the week number will be display in the calendar.
-   */
-  displayWeekNumber: _propTypes.default.bool,
   /**
    * @default true
    */
   enableAccessibleFieldDOMStructure: _propTypes.default.any,
-  /**
-   * The day view will show as many weeks as needed after the end of the current month to match this value.
-   * Put it to 6 to have a fixed number of weeks in Gregorian calendars
-   */
-  fixedWeekNumber: _propTypes.default.number,
   /**
    * Format of the date when rendered in the input(s).
    * Defaults to localized format based on the used `views`.
@@ -175,48 +134,22 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
   formatDensity: _propTypes.default.oneOf(['dense', 'spacious']),
   /**
    * Pass a ref to the `input` element.
-   * Ignored if the field has several inputs.
    */
-  inputRef: _utils.refType,
+  inputRef: _refType.default,
   /**
    * The label content.
-   * Ignored if the field has several inputs.
    */
   label: _propTypes.default.node,
-  /**
-   * If `true`, calls `renderLoading` instead of rendering the day calendar.
-   * Can be used to preload information and show it in calendar.
-   * @default false
-   */
-  loading: _propTypes.default.bool,
   /**
    * Locale for components texts.
    * Allows overriding texts coming from `LocalizationProvider` and `theme`.
    */
   localeText: _propTypes.default.object,
-  /**
-   * Maximal selectable date.
-   * @default 2099-12-31
-   */
-  maxDate: _propTypes.default.object,
-  /**
-   * Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`.
-   */
-  maxDateTime: _propTypes.default.object,
   /**
    * Maximal selectable time.
    * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
    */
   maxTime: _propTypes.default.object,
-  /**
-   * Minimal selectable date.
-   * @default 1900-01-01
-   */
-  minDate: _propTypes.default.object,
-  /**
-   * Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`.
-   */
-  minDateTime: _propTypes.default.object,
   /**
    * Minimal selectable time.
    * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
@@ -229,7 +162,6 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
   minutesStep: _propTypes.default.number,
   /**
    * Name attribute used by the `input` element in the Field.
-   * Ignored if the field has several inputs.
    */
   name: _propTypes.default.string,
   /**
@@ -263,11 +195,6 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
    * @param {TValue} value The value associated with the error.
    */
   onError: _propTypes.default.func,
-  /**
-   * Callback fired on month change.
-   * @param {PickerValidDate} month The new month.
-   */
-  onMonthChange: _propTypes.default.func,
   /**
    * Callback fired when the popup requests to be opened.
    * Use in controlled mode (see `open`).
@@ -299,7 +226,7 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
    * Used when the component view is not controlled.
    * Must be a valid option from `views` list.
    */
-  openTo: _propTypes.default.oneOf(['day', 'hours', 'minutes', 'seconds']),
+  openTo: _propTypes.default.oneOf(['hours', 'minutes', 'seconds']),
   /**
    * The position in the currently edited date range.
    * Used when the component position is controlled.
@@ -321,12 +248,6 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
    * @default The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.
    */
   referenceDate: _propTypes.default.object,
-  /**
-   * Component rendered on the "day" view when `props.loading` is true.
-   * @returns {React.ReactNode} The node to render when loading.
-   * @default () => "..."
-   */
-  renderLoading: _propTypes.default.func,
   /**
    * The currently selected sections.
    * This prop accepts four formats:
@@ -337,16 +258,6 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
    * If not provided, the selected sections will be handled internally.
    */
   selectedSections: _propTypes.default.oneOfType([_propTypes.default.oneOf(['all', 'day', 'empty', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), _propTypes.default.number]),
-  /**
-   * Disable specific date.
-   *
-   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
-   *
-   * @param {PickerValidDate} day The date to test.
-   * @param {string} position The date to test, 'start' or 'end'.
-   * @returns {boolean} Returns `true` if the date should be disabled.
-   */
-  shouldDisableDate: _propTypes.default.func,
   /**
    * Disable specific time.
    * @param {PickerValidDate} value The value to check.
@@ -354,17 +265,6 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
    * @returns {boolean} If `true` the time will be disabled.
    */
   shouldDisableTime: _propTypes.default.func,
-  /**
-   * If `true`, days outside the current month are rendered:
-   *
-   * - if `fixedWeekNumber` is defined, renders days to have the weeks requested.
-   *
-   * - if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.
-   *
-   * - ignored if `calendars` equals more than `1` on range pickers.
-   * @default false
-   */
-  showDaysOutsideCurrentMonth: _propTypes.default.bool,
   /**
    * If `true`, disabled digital clock items will not be rendered.
    * @default false
@@ -418,14 +318,13 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
    * Used when the component view is controlled.
    * Must be a valid option from `views` list.
    */
-  view: _propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'seconds']),
+  view: _propTypes.default.oneOf(['hours', 'meridiem', 'minutes', 'seconds']),
   /**
    * Define custom view renderers for each section.
    * If `null`, the section will only have field editing.
-   * If `undefined`, internally defined view will be used.
+   * If `undefined`, internally defined view will be the used.
    */
   viewRenderers: _propTypes.default.shape({
-    day: _propTypes.default.func,
     hours: _propTypes.default.func,
     meridiem: _propTypes.default.func,
     minutes: _propTypes.default.func,
@@ -434,5 +333,5 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePicker.propTypes = {
   /**
    * Available views.
    */
-  views: _propTypes.default.arrayOf(_propTypes.default.oneOf(['day', 'hours', 'minutes', 'seconds']).isRequired)
+  views: _propTypes.default.arrayOf(_propTypes.default.oneOf(['hours', 'minutes', 'seconds']).isRequired)
 } : void 0;

package/TimeRangePicker/TimeRangePicker.types.d.ts

@@ -0,0 +1,22 @@
+import { DesktopTimeRangePickerProps, DesktopTimeRangePickerSlots, DesktopTimeRangePickerSlotProps } from "../DesktopTimeRangePicker/index.js";
+import { MobileTimeRangePickerProps, MobileTimeRangePickerSlots, MobileTimeRangePickerSlotProps } from "../MobileTimeRangePicker/index.js";
+export interface TimeRangePickerSlots extends DesktopTimeRangePickerSlots, MobileTimeRangePickerSlots {}
+export interface TimeRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends DesktopTimeRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>, MobileTimeRangePickerSlotProps<TEnableAccessibleFieldDOMStructure> {}
+export interface TimeRangePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends DesktopTimeRangePickerProps<TEnableAccessibleFieldDOMStructure>, Omit<MobileTimeRangePickerProps<TEnableAccessibleFieldDOMStructure>, 'views'> {
+  /**
+   * CSS media query when `Mobile` mode will be changed to `Desktop`.
+   * @default '@media (pointer: fine)'
+   * @example '@media (min-width: 720px)' or theme.breakpoints.up("sm")
+   */
+  desktopModeMediaQuery?: string;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: TimeRangePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: TimeRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
+}

package/TimeRangePicker/TimeRangePickerTabs.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { ExportedBaseTabsProps } from '@mui/x-date-pickers/internals';
+import { TimeRangePickerTabsClasses } from "./timeRangePickerTabsClasses.js";
+export interface ExportedTimeRangePickerTabsProps extends ExportedBaseTabsProps {
+  /**
+   * Toggles visibility of the tabs allowing view switching.
+   * @default `window.innerHeight < 667` for `DesktopTimeRangePicker` and `MobileTimeRangePicker`, `displayStaticWrapperAs === 'desktop'` for `StaticTimeRangePicker`
+   */
+  hidden?: boolean;
+  /**
+   * Time tab icon.
+   * @default Time
+   */
+  timeIcon?: React.ReactElement<any>;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<TimeRangePickerTabsClasses>;
+}
+export interface TimeRangePickerTabsProps extends ExportedTimeRangePickerTabsProps {}
+/**
+ * Demos:
+ *
+ * - [TimeRangePicker](https://mui.com/x/react-date-pickers/time-range-picker/)
+ * - [Custom slots and subcomponents](https://mui.com/x/react-date-pickers/custom-components/)
+ *
+ * API:
+ *
+ * - [TimeRangePickerTabs API](https://mui.com/x/api/date-pickers/time-range-picker-tabs/)
+ */
+declare const TimeRangePickerTabs: {
+  (inProps: TimeRangePickerTabsProps): React.JSX.Element | null;
+  propTypes: any;
+};
+export { TimeRangePickerTabs };

package/TimeRangePicker/TimeRangePickerTabs.js

@@ -0,0 +1,144 @@
+"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.TimeRangePickerTabs = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Tab = _interopRequireDefault(require("@mui/material/Tab"));
+var _Tabs = _interopRequireWildcard(require("@mui/material/Tabs"));
+var _styles = require("@mui/material/styles");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _icons = require("@mui/x-date-pickers/icons");
+var _hooks = require("@mui/x-date-pickers/hooks");
+var _timeRangePickerTabsClasses = require("./timeRangePickerTabsClasses");
+var _hooks2 = require("../hooks");
+var _jsxRuntime = require("react/jsx-runtime");
+const useUtilityClasses = classes => {
+  const slots = {
+    root: ['root'],
+    tab: ['tab']
+  };
+  return (0, _composeClasses.default)(slots, _timeRangePickerTabsClasses.getTimeRangePickerTabsUtilityClass, classes);
+};
+const TimeRangePickerTabsRoot = (0, _styles.styled)(_Tabs.default, {
+  name: 'MuiTimeRangePickerTabs',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
+  theme
+}) => ({
+  boxShadow: `0 -1px 0 0 inset ${(theme.vars || theme).palette.divider}`,
+  '&:last-child': {
+    boxShadow: `0 1px 0 0 inset ${(theme.vars || theme).palette.divider}`,
+    [`& .${_Tabs.tabsClasses.indicator}`]: {
+      bottom: 'auto',
+      top: 0
+    }
+  }
+}));
+const TimeRangePickerTab = (0, _styles.styled)(_Tab.default, {
+  name: 'MuiTimeRangePickerTabs',
+  slot: 'Tab',
+  overridesResolver: (_, styles) => styles.tab
+})(({
+  theme
+}) => ({
+  minHeight: '48px',
+  gap: theme.spacing(1)
+}));
+
+/**
+ * Demos:
+ *
+ * - [TimeRangePicker](https://mui.com/x/react-date-pickers/time-range-picker/)
+ * - [Custom slots and subcomponents](https://mui.com/x/react-date-pickers/custom-components/)
+ *
+ * API:
+ *
+ * - [TimeRangePickerTabs API](https://mui.com/x/api/date-pickers/time-range-picker-tabs/)
+ */
+const TimeRangePickerTabs = exports.TimeRangePickerTabs = function TimeRangePickerTabs(inProps) {
+  const props = (0, _styles.useThemeProps)({
+    props: inProps,
+    name: 'MuiTimeRangePickerTabs'
+  });
+  const {
+    timeIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.TimeIcon, {}),
+    hidden = typeof window === 'undefined' || window.innerHeight < 667,
+    className,
+    sx,
+    classes: classesProp
+  } = props;
+  const translations = (0, _hooks.usePickerTranslations)();
+  const {
+    view,
+    setView
+  } = (0, _hooks.usePickerContext)();
+  const {
+    rangePosition,
+    setRangePosition
+  } = (0, _hooks2.usePickerRangePositionContext)();
+  const classes = useUtilityClasses(classesProp);
+  const handleChange = (event, value) => {
+    if (rangePosition !== value) {
+      setRangePosition(value);
+    }
+    if (view !== 'hours') {
+      setView('hours');
+    }
+  };
+  if (hidden) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TimeRangePickerTabsRoot, {
+    variant: "fullWidth",
+    value: rangePosition,
+    onChange: handleChange,
+    className: (0, _clsx.default)(className, classes.root),
+    sx: sx,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TimeRangePickerTab, {
+      value: "start",
+      iconPosition: "start",
+      icon: timeIcon,
+      label: translations.start,
+      className: classes.tab
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TimeRangePickerTab, {
+      value: "end",
+      iconPosition: "start",
+      label: translations.end,
+      icon: timeIcon,
+      className: classes.tab
+    })]
+  });
+};
+process.env.NODE_ENV !== "production" ? TimeRangePickerTabs.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: _propTypes.default.object,
+  className: _propTypes.default.string,
+  /**
+   * Toggles visibility of the tabs allowing view switching.
+   * @default `window.innerHeight < 667` for `DesktopTimeRangePicker` and `MobileTimeRangePicker`, `displayStaticWrapperAs === 'desktop'` for `StaticTimeRangePicker`
+   */
+  hidden: _propTypes.default.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]),
+  /**
+   * Time tab icon.
+   * @default Time
+   */
+  timeIcon: _propTypes.default.element
+} : void 0;

package/TimeRangePicker/TimeRangePickerTimeWrapper.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 TimeRangePickerTimeWrapperProps<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 TimeRangePickerTimeWrapper<TComponentProps extends DefaultizedProps<Omit<BaseClockProps<TimeViewWithMeridiem>, 'value' | 'defaultValue' | 'onChange'>, 'views'>>(props: TimeRangePickerTimeWrapperProps<TComponentProps>): import("react").ReactNode;
+export { TimeRangePickerTimeWrapper };

package/{node/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js → TimeRangePicker/TimeRangePickerTimeWrapper.js}

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DateTimeRangePickerTimeWrapper = DateTimeRangePickerTimeWrapper;
+exports.TimeRangePickerTimeWrapper = TimeRangePickerTimeWrapper;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _internals = require("@mui/x-date-pickers/internals");
@@ -15,7 +15,7 @@ const _excluded = ["viewRenderer", "value", "onChange", "defaultValue", "onViewC
 /**
  * @ignore - internal component.
  */
-function DateTimeRangePickerTimeWrapper(props) {
+function TimeRangePickerTimeWrapper(props) {
   const utils = (0, _internals.useUtils)();
   const {
       viewRenderer,
@@ -48,11 +48,9 @@ function DateTimeRangePickerTimeWrapper(props) {
       rangePosition
     });
     const isFullRangeSelected = rangePosition === 'end' && (0, _dateUtils.isRangeValid)(utils, newRange);
-    const timeViews = views.filter(_internals.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]);
+    if (selectionState === 'finish') {
       setRangePosition(rangePosition === 'start' ? 'end' : 'start');
+      onViewChange?.(views[0]);
     }
     onChange(newRange, isFullRangeSelected ? 'finish' : 'partial', selectedView);
   };

package/TimeRangePicker/TimeRangePickerToolbar.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { BaseToolbarProps, ExportedBaseToolbarProps } from '@mui/x-date-pickers/internals';
+import { TimeRangePickerToolbarClasses } from "./timeRangePickerToolbarClasses.js";
+export interface TimeRangePickerToolbarProps extends Omit<BaseToolbarProps, 'toolbarFormat'>, ExportedTimeRangePickerToolbarProps {
+  ampm: boolean;
+}
+export interface ExportedTimeRangePickerToolbarProps extends Omit<ExportedBaseToolbarProps, 'toolbarFormat'> {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<TimeRangePickerToolbarClasses>;
+}
+declare const TimeRangePickerToolbar: React.ForwardRefExoticComponent<TimeRangePickerToolbarProps & React.RefAttributes<HTMLDivElement>>;
+export { TimeRangePickerToolbar };