@mui/x-date-pickers-pro 6.0.0-alpha.12 → 6.0.0-alpha.14

package/DateRangePickerDay/DateRangePickerDay.js

@@ -196,10 +196,26 @@ process.env.NODE_ENV !== "production" ? DateRangePickerDayRaw.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * A ref for imperative actions.
+   * It currently only supports `focusVisible()` action.
+   */
+  action: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      focusVisible: PropTypes.func.isRequired
+    })
+  })]),
+  /**
+   * If `true`, the ripples are centered.
+   * They won't start at the cursor interaction position.
+   * @default false
+   */
+  centerRipple: PropTypes.bool,
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  className: PropTypes.string,
   /**
    * The date to show.
    */
@@ -219,6 +235,33 @@ process.env.NODE_ENV !== "production" ? DateRangePickerDayRaw.propTypes = {
    * @default false
    */
   disableMargin: PropTypes.bool,
+  /**
+   * If `true`, the ripple effect is disabled.
+   *
+   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
+   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
+   * @default false
+   */
+  disableRipple: PropTypes.bool,
+  /**
+   * If `true`, the touch ripple effect is disabled.
+   * @default false
+   */
+  disableTouchRipple: PropTypes.bool,
+  /**
+   * If `true`, the base button will have a keyboard focus ripple.
+   * @default false
+   */
+  focusRipple: PropTypes.bool,
+  /**
+   * This prop can help identify which element has keyboard focus.
+   * The class name will be applied when the element gains the focus through keyboard interaction.
+   * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
+   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
+   * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
+   * if needed.
+   */
+  focusVisibleClassName: PropTypes.string,
   isAnimating: PropTypes.bool,
   /**
    * Set to `true` if the `day` is the end of a highlighted date range.
@@ -249,6 +292,11 @@ process.env.NODE_ENV !== "production" ? DateRangePickerDayRaw.propTypes = {
    */
   isVisuallySelected: PropTypes.bool,
   onDaySelect: PropTypes.func.isRequired,
+  /**
+   * Callback fired when the component is focused with a keyboard.
+   * We trigger a `onFocus` callback too.
+   */
+  onFocusVisible: PropTypes.func,
   onMouseEnter: PropTypes.func,
   /**
    * If `true`, day is outside of month and will be hidden.
@@ -264,11 +312,34 @@ process.env.NODE_ENV !== "production" ? DateRangePickerDayRaw.propTypes = {
    * @default false
    */
   showDaysOutsideCurrentMonth: PropTypes.bool,
+  style: PropTypes.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * @default 0
+   */
+  tabIndex: PropTypes.number,
   /**
    * If `true`, renders as today date.
    * @default false
    */
-  today: PropTypes.bool
+  today: PropTypes.bool,
+  /**
+   * Props applied to the `TouchRipple` element.
+   */
+  TouchRippleProps: PropTypes.object,
+  /**
+   * A ref that points to the `TouchRipple` element.
+   */
+  touchRippleRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      pulsate: PropTypes.func.isRequired,
+      start: PropTypes.func.isRequired,
+      stop: PropTypes.func.isRequired
+    })
+  })])
 } : void 0;
 
 /**

package/DesktopDateRangePicker/DesktopDateRangePicker.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { SxProps } from '@mui/system';
 import { DesktopWrapperProps, DesktopWrapperSlotsComponent, DesktopWrapperSlotsComponentsProps, DateInputSlotsComponent } from '@mui/x-date-pickers/internals';
 import { BaseDateRangePickerProps, BaseDateRangePickerSlotsComponent, BaseDateRangePickerSlotsComponentsProps } from '../DateRangePicker/shared';
 export interface DesktopDateRangePickerSlotsComponent<TDate> extends BaseDateRangePickerSlotsComponent<TDate>, DesktopWrapperSlotsComponent, DateInputSlotsComponent {
@@ -16,6 +17,10 @@ export interface DesktopDateRangePickerProps<TDate> extends BaseDateRangePickerP
      * @default {}
      */
     componentsProps?: DesktopDateRangePickerSlotsComponentsProps<TDate>;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps;
 }
 type DesktopDateRangePickerComponent = (<TDate>(props: DesktopDateRangePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
     propTypes?: any;

package/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -122,7 +122,7 @@ process.env.NODE_ENV !== "production" ? DesktopDateRangePicker.propTypes = {
    */
   disabled: PropTypes.bool,
   /**
-   * If `true` disable values before the current date for date components, time for time components and both for date time components.
+   * 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.bool,
@@ -142,7 +142,7 @@ process.env.NODE_ENV !== "production" ? DesktopDateRangePicker.propTypes = {
    */
   disableOpenPicker: PropTypes.bool,
   /**
-   * If `true` disable values after the current date for date components, time for time components and both for date time components.
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
    * @default false
    */
   disablePast: PropTypes.bool,
@@ -183,7 +183,7 @@ process.env.NODE_ENV !== "production" ? DesktopDateRangePicker.propTypes = {
   })]),
   label: PropTypes.node,
   /**
-   * If `true` renders `LoadingComponent` in calendar instead of calendar view.
+   * If `true`, calls `renderLoading` instead of rendering the day calendar.
    * Can be used to preload information and show it in calendar.
    * @default false
    */
@@ -248,11 +248,6 @@ process.env.NODE_ENV !== "production" ? DesktopDateRangePicker.propTypes = {
    * Use in controlled mode (see open).
    */
   onOpen: PropTypes.func,
-  /**
-   * Callback fired on view change.
-   * @param {DateView} view The new view.
-   */
-  onViewChange: PropTypes.func,
   /**
    * Control the popup or dialog open state.
    */
@@ -317,14 +312,14 @@ process.env.NODE_ENV !== "production" ? DesktopDateRangePicker.propTypes = {
    * Disable specific month.
    * @template TDate
    * @param {TDate} month The month to test.
-   * @returns {boolean} If `true` the month will be disabled.
+   * @returns {boolean} If `true`, the month will be disabled.
    */
   shouldDisableMonth: PropTypes.func,
   /**
    * Disable specific year.
    * @template TDate
    * @param {TDate} year The year to test.
-   * @returns {boolean} If `true` the year will be disabled.
+   * @returns {boolean} If `true`, the year will be disabled.
    */
   shouldDisableYear: PropTypes.func,
   /**

package/DesktopNextDateRangePicker/DesktopNextDateRangePicker.js

@@ -7,13 +7,10 @@ import { extractValidationProps } from '@mui/x-date-pickers/internals';
 import { resolveComponentProps } from '@mui/base/utils';
 import { rangeValueManager } from '../internal/utils/valueManagers';
 import { useNextDateRangePickerDefaultizedProps } from '../NextDateRangePicker/shared';
-import { useDesktopRangePicker } from '../internal/hooks/useDesktopRangePicker';
+import { renderDateRangeViewCalendar } from '../dateRangeViewRenderers';
 import { Unstable_MultiInputDateRangeField as MultiInputDateRangeField } from '../MultiInputDateRangeField';
-import { renderDateRangeView } from '../internal/utils/viewRenderers';
+import { useDesktopRangePicker } from '../internal/hooks/useDesktopRangePicker';
 import { validateDateRange } from '../internal/hooks/validation/useDateRangeValidation';
-const VIEW_LOOKUP = {
-  day: renderDateRangeView
-};
 const DesktopNextDateRangePicker = /*#__PURE__*/React.forwardRef(function DesktopNextDateRangePicker(inProps, ref) {
   var _defaultizedProps$cal, _defaultizedProps$sho;
   // Props with the default values common to all date time pickers
@@ -23,7 +20,11 @@ const DesktopNextDateRangePicker = /*#__PURE__*/React.forwardRef(function Deskto
       sx
     } = _useNextDateRangePick,
     defaultizedProps = _objectWithoutPropertiesLoose(_useNextDateRangePick, _excluded);
+  const viewRenderers = _extends({
+    day: renderDateRangeViewCalendar
+  }, defaultizedProps.viewRenderers);
   const props = _extends({}, defaultizedProps, {
+    viewRenderers,
     calendars: (_defaultizedProps$cal = defaultizedProps.calendars) != null ? _defaultizedProps$cal : 2,
     views: ['day'],
     openTo: 'day',
@@ -47,7 +48,6 @@ const DesktopNextDateRangePicker = /*#__PURE__*/React.forwardRef(function Deskto
   } = useDesktopRangePicker({
     props,
     valueManager: rangeValueManager,
-    viewLookup: VIEW_LOOKUP,
     validator: validateDateRange
   });
   return renderPicker();
@@ -57,6 +57,12 @@ DesktopNextDateRangePicker.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
   autoFocus: PropTypes.bool,
   /**
    * The number of calendars to render on **desktop**.
@@ -68,8 +74,8 @@ DesktopNextDateRangePicker.propTypes = {
    */
   className: PropTypes.string,
   /**
-   * If `true` the popup or dialog will close after submitting full date.
-   * @default `true` for Desktop, `false` for Mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+   * If `true`, the popover or modal will close after submitting the full date.
+   * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
    */
   closeOnSelect: PropTypes.bool,
   /**
@@ -114,7 +120,7 @@ DesktopNextDateRangePicker.propTypes = {
    */
   disableDragEditing: PropTypes.bool,
   /**
-   * If `true` disable values before the current date for date components, time for time components and both for date time components.
+   * 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.bool,
@@ -124,12 +130,12 @@ DesktopNextDateRangePicker.propTypes = {
    */
   disableHighlightToday: PropTypes.bool,
   /**
-   * Do not render open picker button (renders only the field).
+   * If `true`, the open picker button will not be rendered (renders only the field).
    * @default false
    */
   disableOpenPicker: PropTypes.bool,
   /**
-   * If `true` disable values after the current date for date components, time for time components and both for date time components.
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
    * @default false
    */
   disablePast: PropTypes.bool,
@@ -149,7 +155,7 @@ DesktopNextDateRangePicker.propTypes = {
    */
   format: PropTypes.string,
   /**
-   * If `true` renders `LoadingComponent` in calendar instead of calendar view.
+   * If `true`, calls `renderLoading` instead of rendering the day calendar.
    * Can be used to preload information and show it in calendar.
    * @default false
    */
@@ -237,7 +243,7 @@ DesktopNextDateRangePicker.propTypes = {
    * 4. If `null` is provided, no section will be selected
    * If not provided, the selected sections will be handled internally.
    */
-  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']), PropTypes.number, PropTypes.shape({
+  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']), PropTypes.number, PropTypes.shape({
     endIndex: PropTypes.number.isRequired,
     startIndex: PropTypes.number.isRequired
   })]),
@@ -267,6 +273,14 @@ DesktopNextDateRangePicker.propTypes = {
    * The selected value.
    * Used when the component is controlled.
    */
-  value: PropTypes.arrayOf(PropTypes.any)
+  value: PropTypes.arrayOf(PropTypes.any),
+  /**
+   * 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: PropTypes.shape({
+    day: PropTypes.func
+  })
 };
 export { DesktopNextDateRangePicker };

package/DesktopNextDateRangePicker/DesktopNextDateRangePicker.types.d.ts

@@ -1,7 +1,7 @@
 import { MakeOptional } from '@mui/x-date-pickers/internals';
 import { UseDesktopRangePickerSlotsComponent, UseDesktopRangePickerSlotsComponentsProps, DesktopRangeOnlyPickerProps } from '../internal/hooks/useDesktopRangePicker';
 import { BaseNextDateRangePickerProps, BaseNextDateRangePickerSlotsComponent, BaseNextDateRangePickerSlotsComponentsProps } from '../NextDateRangePicker/shared';
-export interface DesktopNextDateRangePickerSlotsComponent<TDate> extends BaseNextDateRangePickerSlotsComponent<TDate>, MakeOptional<UseDesktopRangePickerSlotsComponent, 'Field'> {
+export interface DesktopNextDateRangePickerSlotsComponent<TDate> extends BaseNextDateRangePickerSlotsComponent<TDate>, MakeOptional<UseDesktopRangePickerSlotsComponent<TDate, 'day'>, 'Field'> {
 }
 export interface DesktopNextDateRangePickerSlotsComponentsProps<TDate> extends BaseNextDateRangePickerSlotsComponentsProps<TDate>, UseDesktopRangePickerSlotsComponentsProps<TDate, 'day'> {
 }

package/MobileDateRangePicker/MobileDateRangePicker.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { SxProps } from '@mui/system';
 import { MobileWrapperProps, MobileWrapperSlotsComponent, MobileWrapperSlotsComponentsProps, DateInputSlotsComponent } from '@mui/x-date-pickers/internals';
 import { BaseDateRangePickerProps, BaseDateRangePickerSlotsComponent, BaseDateRangePickerSlotsComponentsProps } from '../DateRangePicker/shared';
 export interface MobileDateRangePickerSlotsComponent<TDate> extends BaseDateRangePickerSlotsComponent<TDate>, MobileWrapperSlotsComponent, DateInputSlotsComponent {
@@ -16,6 +17,10 @@ export interface MobileDateRangePickerProps<TDate> extends BaseDateRangePickerPr
      * @default {}
      */
     componentsProps?: MobileDateRangePickerSlotsComponentsProps<TDate>;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps;
 }
 type MobileDateRangePickerComponent = (<TDate>(props: MobileDateRangePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
     propTypes?: any;

package/MobileDateRangePicker/MobileDateRangePicker.js

@@ -129,7 +129,7 @@ process.env.NODE_ENV !== "production" ? MobileDateRangePicker.propTypes = {
    */
   disabled: PropTypes.bool,
   /**
-   * If `true` disable values before the current date for date components, time for time components and both for date time components.
+   * 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.bool,
@@ -149,7 +149,7 @@ process.env.NODE_ENV !== "production" ? MobileDateRangePicker.propTypes = {
    */
   disableOpenPicker: PropTypes.bool,
   /**
-   * If `true` disable values after the current date for date components, time for time components and both for date time components.
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
    * @default false
    */
   disablePast: PropTypes.bool,
@@ -190,7 +190,7 @@ process.env.NODE_ENV !== "production" ? MobileDateRangePicker.propTypes = {
   })]),
   label: PropTypes.node,
   /**
-   * If `true` renders `LoadingComponent` in calendar instead of calendar view.
+   * If `true`, calls `renderLoading` instead of rendering the day calendar.
    * Can be used to preload information and show it in calendar.
    * @default false
    */
@@ -255,11 +255,6 @@ process.env.NODE_ENV !== "production" ? MobileDateRangePicker.propTypes = {
    * Use in controlled mode (see open).
    */
   onOpen: PropTypes.func,
-  /**
-   * Callback fired on view change.
-   * @param {DateView} view The new view.
-   */
-  onViewChange: PropTypes.func,
   /**
    * Control the popup or dialog open state.
    */
@@ -324,14 +319,14 @@ process.env.NODE_ENV !== "production" ? MobileDateRangePicker.propTypes = {
    * Disable specific month.
    * @template TDate
    * @param {TDate} month The month to test.
-   * @returns {boolean} If `true` the month will be disabled.
+   * @returns {boolean} If `true`, the month will be disabled.
    */
   shouldDisableMonth: PropTypes.func,
   /**
    * Disable specific year.
    * @template TDate
    * @param {TDate} year The year to test.
-   * @returns {boolean} If `true` the year will be disabled.
+   * @returns {boolean} If `true`, the year will be disabled.
    */
   shouldDisableYear: PropTypes.func,
   /**

package/MobileNextDateRangePicker/MobileNextDateRangePicker.js

@@ -7,13 +7,10 @@ import { extractValidationProps } from '@mui/x-date-pickers/internals';
 import { resolveComponentProps } from '@mui/base/utils';
 import { rangeValueManager } from '../internal/utils/valueManagers';
 import { useNextDateRangePickerDefaultizedProps } from '../NextDateRangePicker/shared';
-import { useMobileRangePicker } from '../internal/hooks/useMobileRangePicker';
+import { renderDateRangeViewCalendar } from '../dateRangeViewRenderers';
 import { Unstable_MultiInputDateRangeField as MultiInputDateRangeField } from '../MultiInputDateRangeField';
-import { renderDateRangeView } from '../internal/utils/viewRenderers';
+import { useMobileRangePicker } from '../internal/hooks/useMobileRangePicker';
 import { validateDateRange } from '../internal/hooks/validation/useDateRangeValidation';
-const VIEW_LOOKUP = {
-  day: renderDateRangeView
-};
 const MobileNextDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileNextDateRangePicker(inProps, ref) {
   var _defaultizedProps$cal, _defaultizedProps$sho;
   // Props with the default values common to all date time pickers
@@ -23,7 +20,11 @@ const MobileNextDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileN
       sx
     } = _useNextDateRangePick,
     defaultizedProps = _objectWithoutPropertiesLoose(_useNextDateRangePick, _excluded);
+  const viewRenderers = _extends({
+    day: renderDateRangeViewCalendar
+  }, defaultizedProps.viewRenderers);
   const props = _extends({}, defaultizedProps, {
+    viewRenderers,
     calendars: (_defaultizedProps$cal = defaultizedProps.calendars) != null ? _defaultizedProps$cal : 1,
     views: ['day'],
     openTo: 'day',
@@ -47,7 +48,6 @@ const MobileNextDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileN
   } = useMobileRangePicker({
     props,
     valueManager: rangeValueManager,
-    viewLookup: VIEW_LOOKUP,
     validator: validateDateRange
   });
   return renderPicker();
@@ -57,6 +57,12 @@ MobileNextDateRangePicker.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
   autoFocus: PropTypes.bool,
   /**
    * The number of calendars to render on **desktop**.
@@ -68,8 +74,8 @@ MobileNextDateRangePicker.propTypes = {
    */
   className: PropTypes.string,
   /**
-   * If `true` the popup or dialog will close after submitting full date.
-   * @default `true` for Desktop, `false` for Mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+   * If `true`, the popover or modal will close after submitting the full date.
+   * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
    */
   closeOnSelect: PropTypes.bool,
   /**
@@ -114,7 +120,7 @@ MobileNextDateRangePicker.propTypes = {
    */
   disableDragEditing: PropTypes.bool,
   /**
-   * If `true` disable values before the current date for date components, time for time components and both for date time components.
+   * 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.bool,
@@ -124,12 +130,12 @@ MobileNextDateRangePicker.propTypes = {
    */
   disableHighlightToday: PropTypes.bool,
   /**
-   * Do not render open picker button (renders only the field).
+   * If `true`, the open picker button will not be rendered (renders only the field).
    * @default false
    */
   disableOpenPicker: PropTypes.bool,
   /**
-   * If `true` disable values after the current date for date components, time for time components and both for date time components.
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
    * @default false
    */
   disablePast: PropTypes.bool,
@@ -149,7 +155,7 @@ MobileNextDateRangePicker.propTypes = {
    */
   format: PropTypes.string,
   /**
-   * If `true` renders `LoadingComponent` in calendar instead of calendar view.
+   * If `true`, calls `renderLoading` instead of rendering the day calendar.
    * Can be used to preload information and show it in calendar.
    * @default false
    */
@@ -237,7 +243,7 @@ MobileNextDateRangePicker.propTypes = {
    * 4. If `null` is provided, no section will be selected
    * If not provided, the selected sections will be handled internally.
    */
-  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']), PropTypes.number, PropTypes.shape({
+  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']), PropTypes.number, PropTypes.shape({
     endIndex: PropTypes.number.isRequired,
     startIndex: PropTypes.number.isRequired
   })]),
@@ -267,6 +273,14 @@ MobileNextDateRangePicker.propTypes = {
    * The selected value.
    * Used when the component is controlled.
    */
-  value: PropTypes.arrayOf(PropTypes.any)
+  value: PropTypes.arrayOf(PropTypes.any),
+  /**
+   * 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: PropTypes.shape({
+    day: PropTypes.func
+  })
 };
 export { MobileNextDateRangePicker };

package/MobileNextDateRangePicker/MobileNextDateRangePicker.types.d.ts

@@ -1,7 +1,7 @@
 import { MakeOptional } from '@mui/x-date-pickers/internals';
 import { UseMobileRangePickerSlotsComponent, UseMobileRangePickerSlotsComponentsProps, MobileRangeOnlyPickerProps } from '../internal/hooks/useMobileRangePicker';
 import { BaseNextDateRangePickerProps, BaseNextDateRangePickerSlotsComponent, BaseNextDateRangePickerSlotsComponentsProps } from '../NextDateRangePicker/shared';
-export interface MobileNextDateRangePickerSlotsComponent<TDate> extends BaseNextDateRangePickerSlotsComponent<TDate>, MakeOptional<UseMobileRangePickerSlotsComponent, 'Field'> {
+export interface MobileNextDateRangePickerSlotsComponent<TDate> extends BaseNextDateRangePickerSlotsComponent<TDate>, MakeOptional<UseMobileRangePickerSlotsComponent<TDate, 'day'>, 'Field'> {
 }
 export interface MobileNextDateRangePickerSlotsComponentsProps<TDate> extends BaseNextDateRangePickerSlotsComponentsProps<TDate>, UseMobileRangePickerSlotsComponentsProps<TDate, 'day'> {
 }