@mui/x-date-pickers 8.0.0-beta.3 → 8.1.0

package/internals/hooks/useViews.d.ts

@@ -2,6 +2,7 @@ import { MakeOptional } from '@mui/x-internals/types';
 import type { PickerSelectionState } from './usePicker';
 import { DateOrTimeViewWithMeridiem, PickerValidValue } from "../models/index.js";
 import { PickerValidDate } from "../../models/index.js";
+import { CreateStepNavigationReturnValue } from "../utils/createStepNavigation.js";
 export type PickerOnChangeFn = (date: PickerValidDate | null, selectionState?: PickerSelectionState) => void;
 export interface UseViewsOptions<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem> {
   /**
@@ -53,8 +54,9 @@ export interface UseViewsOptions<TValue extends PickerValidValue, TView extends
    * @param {boolean} hasFocus `true` if the view should be focused.
    */
   onFocusedViewChange?: (view: TView, hasFocus: boolean) => void;
+  getStepNavigation?: CreateStepNavigationReturnValue;
 }
-export interface ExportedUseViewsOptions<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem> extends MakeOptional<UseViewsOptions<TValue, TView>, 'onChange' | 'openTo' | 'views'> {}
+export interface ExportedUseViewsOptions<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem> extends Omit<MakeOptional<UseViewsOptions<TValue, TView>, 'onChange' | 'openTo' | 'views'>, 'getStepNavigation'> {}
 interface UseViewsResponse<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem> {
   view: TView;
   setView: (view: TView) => void;
@@ -65,6 +67,9 @@ interface UseViewsResponse<TValue extends PickerValidValue, TView extends DateOr
   defaultView: TView;
   goToNextView: () => void;
   setValueAndGoToNextView: (value: TValue, currentViewSelectionState?: PickerSelectionState, selectedView?: TView) => void;
+  hasNextStep: boolean;
+  hasSeveralSteps: boolean;
+  goToNextStep: () => void;
 }
 export declare function useViews<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem>({
   onChange,
@@ -74,6 +79,7 @@ export declare function useViews<TValue extends PickerValidValue, TView extends
   views,
   autoFocus,
   focusedView: inFocusedView,
-  onFocusedViewChange
+  onFocusedViewChange,
+  getStepNavigation
 }: UseViewsOptions<TValue, TView>): UseViewsResponse<TValue, TView>;
 export {};

package/internals/hooks/useViews.js

@@ -1,14 +1,16 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useViews = useViews;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useControlled = _interopRequireDefault(require("@mui/utils/useControlled"));
+var _createStepNavigation = require("../utils/createStepNavigation");
 let warnedOnceNotValidView = false;
 function useViews({
   onChange,
@@ -18,7 +20,8 @@ function useViews({
   views,
   autoFocus,
   focusedView: inFocusedView,
-  onFocusedViewChange
+  onFocusedViewChange,
+  getStepNavigation
 }) {
   if (process.env.NODE_ENV !== 'production') {
     if (!warnedOnceNotValidView) {
@@ -48,6 +51,12 @@ function useViews({
     controlled: inFocusedView,
     default: defaultFocusedView.current
   });
+  const stepNavigation = getStepNavigation ? getStepNavigation({
+    setView,
+    view,
+    defaultView: defaultView.current,
+    views
+  }) : _createStepNavigation.DEFAULT_STEP_NAVIGATION;
   React.useEffect(() => {
     // Update the current view when `openTo` or `views` props change
     if (previousOpenTo.current && previousOpenTo.current !== openTo || previousViews.current && previousViews.current.some(previousView => !views.includes(previousView))) {
@@ -94,19 +103,25 @@ function useViews({
     views.indexOf(selectedView) < views.length - 1 : Boolean(nextView);
     const globalSelectionState = isSelectionFinishedOnCurrentView && hasMoreViews ? 'partial' : currentViewSelectionState;
     onChange(value, globalSelectionState, selectedView);
-    // Detects if the selected view is not the active one.
-    // Can happen if multiple views are displayed, like in `DesktopDateTimePicker` or `MultiSectionDigitalClock`.
-    if (selectedView && selectedView !== view) {
-      const nextViewAfterSelected = views[views.indexOf(selectedView) + 1];
-      if (nextViewAfterSelected) {
-        // move to next view after the selected one
-        handleChangeView(nextViewAfterSelected);
-      }
+
+    // The selected view can be different from the active view,
+    // This can happen if multiple views are displayed, like in `DesktopDateTimePicker` or `MultiSectionDigitalClock`.
+    let currentView = null;
+    if (selectedView != null && selectedView !== view) {
+      currentView = selectedView;
     } else if (isSelectionFinishedOnCurrentView) {
-      goToNextView();
+      currentView = view;
     }
+    if (currentView == null) {
+      return;
+    }
+    const viewToNavigateTo = views[views.indexOf(currentView) + 1];
+    if (viewToNavigateTo == null || !stepNavigation.areViewsInSameStep(currentView, viewToNavigateTo)) {
+      return;
+    }
+    handleChangeView(viewToNavigateTo);
   });
-  return {
+  return (0, _extends2.default)({}, stepNavigation, {
     view,
     setView: handleChangeView,
     focusedView,
@@ -117,5 +132,5 @@ function useViews({
     defaultView: views.includes(openTo) ? openTo : views[0],
     goToNextView,
     setValueAndGoToNextView
-  };
+  });
 }

package/internals/utils/createNonRangePickerStepNavigation.js

@@ -11,17 +11,17 @@ function createNonRangePickerStepNavigation(parameters) {
   } = parameters;
   return (0, _createStepNavigation.createStepNavigation)({
     steps,
-    isCurrentViewMatchingStep: (view, step) => {
+    isViewMatchingStep: (view, step) => {
       return step.views == null || step.views.includes(view);
     },
     onStepChange: ({
       step,
-      initialView,
+      defaultView,
       setView,
       view,
       views
     }) => {
-      const targetView = step.views == null ? initialView : step.views.find(viewBis => views.includes(viewBis));
+      const targetView = step.views == null ? defaultView : step.views.find(viewBis => views.includes(viewBis));
       if (targetView !== view) {
         setView(targetView);
       }

package/internals/utils/createStepNavigation.d.ts

@@ -1,4 +1,10 @@
 import { DateOrTimeViewWithMeridiem } from "../models/index.js";
+export declare const DEFAULT_STEP_NAVIGATION: {
+  hasNextStep: boolean;
+  hasSeveralSteps: boolean;
+  goToNextStep: () => void;
+  areViewsInSameStep: () => boolean;
+};
 /**
  * Create an object that determines whether there is a next step and allows to go to the next step.
  * @param {CreateStepNavigationParameters<TStep>} parameters The parameters of the createStepNavigation function
@@ -7,7 +13,7 @@ import { DateOrTimeViewWithMeridiem } from "../models/index.js";
 export declare function createStepNavigation<TStep extends {}>(parameters: CreateStepNavigationParameters<TStep>): CreateStepNavigationReturnValue;
 interface CreateStepNavigationParameters<TStep extends {}> {
   steps: TStep[] | null;
-  isCurrentViewMatchingStep: (view: DateOrTimeViewWithMeridiem, step: TStep) => boolean;
+  isViewMatchingStep: (view: DateOrTimeViewWithMeridiem, step: TStep) => boolean;
   onStepChange: (parameters: UseRangePickerStepNavigationOnStepChangeParameters<TStep>) => void;
 }
 export type CreateStepNavigationReturnValue = (parameters: CreateStepNavigationReturnValueParameters) => {
@@ -15,13 +21,24 @@ export type CreateStepNavigationReturnValue = (parameters: CreateStepNavigationR
    * Whether there is a next step.
    */
   hasNextStep: boolean;
+  /**
+   * Whether there are several steps.
+   */
+  hasSeveralSteps: boolean;
   /**
    * Go to the next step if any.
    */
   goToNextStep: () => void;
+  /**
+   * Whether the two views are in the same step.
+   * @param {DateOrTimeViewWithMeridiem} viewA The first view to compare.
+   * @param {DateOrTimeViewWithMeridiem} viewB The second view to compare.
+   * @returns {boolean} Whether the two views are in the same step.
+   */
+  areViewsInSameStep: (viewA: DateOrTimeViewWithMeridiem, viewB: DateOrTimeViewWithMeridiem) => boolean;
 };
 export interface CreateStepNavigationReturnValueParameters {
-  initialView: DateOrTimeViewWithMeridiem;
+  defaultView: DateOrTimeViewWithMeridiem;
   view: DateOrTimeViewWithMeridiem;
   views: readonly DateOrTimeViewWithMeridiem[];
   setView: (view: any) => void;

package/internals/utils/createStepNavigation.js

@@ -4,8 +4,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.DEFAULT_STEP_NAVIGATION = void 0;
 exports.createStepNavigation = createStepNavigation;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+const DEFAULT_STEP_NAVIGATION = exports.DEFAULT_STEP_NAVIGATION = {
+  hasNextStep: false,
+  hasSeveralSteps: false,
+  goToNextStep: () => {},
+  areViewsInSameStep: () => true
+};
+
 /**
  * Create an object that determines whether there is a next step and allows to go to the next step.
  * @param {CreateStepNavigationParameters<TStep>} parameters The parameters of the createStepNavigation function
@@ -14,20 +22,18 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 function createStepNavigation(parameters) {
   const {
     steps,
-    isCurrentViewMatchingStep,
+    isViewMatchingStep,
     onStepChange
   } = parameters;
   return parametersBis => {
     if (steps == null) {
-      return {
-        hasNextStep: false,
-        goToNextStep: () => {}
-      };
+      return DEFAULT_STEP_NAVIGATION;
     }
-    const currentStepIndex = steps.findIndex(step => isCurrentViewMatchingStep(parametersBis.view, step));
+    const currentStepIndex = steps.findIndex(step => isViewMatchingStep(parametersBis.view, step));
     const nextStep = currentStepIndex === -1 || currentStepIndex === steps.length - 1 ? null : steps[currentStepIndex + 1];
     return {
       hasNextStep: nextStep != null,
+      hasSeveralSteps: steps.length > 1,
       goToNextStep: () => {
         if (nextStep == null) {
           return;
@@ -35,6 +41,11 @@ function createStepNavigation(parameters) {
         onStepChange((0, _extends2.default)({}, parametersBis, {
           step: nextStep
         }));
+      },
+      areViewsInSameStep: (viewA, viewB) => {
+        const stepA = steps.find(step => isViewMatchingStep(viewA, step));
+        const stepB = steps.find(step => isViewMatchingStep(viewB, step));
+        return stepA === stepB;
       }
     };
   };

package/locales/csCZ.js

@@ -37,7 +37,7 @@ const csCZPickers = {
   datePickerToolbarTitle: 'Vyberte datum',
   dateTimePickerToolbarTitle: 'Vyberte datum a čas',
   timePickerToolbarTitle: 'Vyberte čas',
-  dateRangePickerToolbarTitle: 'Vyberete rozmezí dat',
+  dateRangePickerToolbarTitle: 'Vyberte rozmezí dat',
   // timeRangePickerToolbarTitle: 'Select time range',
 
   // Clock labels

package/locales/skSK.js

@@ -14,8 +14,8 @@ const timeViews = {
 };
 const skSKPickers = {
   // Calendar navigation
-  previousMonth: 'Ďalší mesiac',
-  nextMonth: 'Predchádzajúci mesiac',
+  previousMonth: 'Predchádzajúci mesiac',
+  nextMonth: 'Ďalší mesiac',
   // View navigation
   openPreviousView: 'Otvoriť predchádzajúce zobrazenie',
   openNextView: 'Otvoriť ďalšie zobrazenie',
@@ -33,7 +33,7 @@ const skSKPickers = {
   clearButtonLabel: 'Vymazať',
   okButtonLabel: 'Potvrdiť',
   todayButtonLabel: 'Dnes',
-  nextStepButtonLabel: 'Predchádzajúci',
+  nextStepButtonLabel: 'Ďalší',
   // Toolbar titles
   datePickerToolbarTitle: 'Vyberte dátum',
   dateTimePickerToolbarTitle: 'Vyberte dátum a čas',

package/models/fields.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { TextFieldProps } from '@mui/material/TextField';
+import { FormControlOwnProps } from '@mui/material/FormControl';
 import type { ExportedPickersSectionListProps } from '../PickersSectionList';
 import type { UseFieldInternalProps, UseFieldReturnValue } from '../internals/hooks/useField';
 import type { PickersTextFieldProps } from '../PickersTextField';
@@ -69,6 +70,10 @@ export interface FieldSection {
    * For example, on Day.js, the `year` section of the format `[year] YYYY` has a start separator equal to `[year]`
    */
   endSeparator: string;
+  /**
+   * If `true`, the `endSeparator` is a format separator (i.e. ":" or "/").
+   */
+  isEndFormatSeparator?: boolean;
 }
 type IsAny<T> = boolean extends (T extends never ? true : false) ? true : false;
 export type InferFieldSection<TValue extends PickerValidValue> = IsAny<TValue> extends true ? FieldSection : TValue extends PickerRangeValue ? FieldRangeSection : FieldSection;
@@ -136,4 +141,42 @@ export type BaseSingleInputPickersTextFieldProps<TEnableAccessibleFieldDOMStruct
  * Props the built-in text field component can receive.
  */
 export type BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> = TEnableAccessibleFieldDOMStructure extends false ? Omit<TextFieldProps, 'autoComplete' | 'error' | 'maxRows' | 'minRows' | 'multiline' | 'placeholder' | 'rows' | 'select' | 'SelectProps' | 'type'> : Partial<Omit<PickersTextFieldProps, keyof ExportedPickersSectionListProps>>;
+export interface PickerTextFieldOwnerState extends FieldOwnerState {
+  /**
+   * `true` if the value of the field is currently empty.
+   */
+  isFieldValueEmpty: boolean;
+  /**
+   * `true` if the field is focused, `false` otherwise.
+   */
+  isFieldFocused: boolean;
+  /**
+   * `true` if the field has an error, `false` otherwise.
+   */
+  hasFieldError: boolean;
+  /**
+   * The size of the input.
+   */
+  inputSize: Exclude<FormControlOwnProps['size'], undefined>;
+  /**
+   * The color of the input.
+   */
+  inputColor: Exclude<FormControlOwnProps['color'], undefined>;
+  /**
+   * `true` if the input takes up the full width of its container.
+   */
+  isInputInFullWidth: boolean;
+  /**
+   * `true` if the input has a start adornment, `false` otherwise.
+   */
+  hasStartAdornment: boolean;
+  /**
+   * `true` if the input has an end adornment, `false` otherwise.
+   */
+  hasEndAdornment: boolean;
+  /**
+   * `true` if the input has a label, `false` otherwise.
+   */
+  inputHasLabel: boolean;
+}
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers",
-  "version": "8.0.0-beta.3",
+  "version": "8.1.0",
   "description": "The community edition of the Date and Time Picker components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -36,12 +36,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.27.0",
-    "@mui/utils": "^7.0.0",
+    "@mui/utils": "^7.0.2",
     "@types/react-transition-group": "^4.4.12",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
-    "@mui/x-internals": "8.0.0-beta.3"
+    "@mui/x-internals": "8.0.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
@@ -102,10 +102,6 @@
       "import": {
         "types": "./esm/index.d.ts",
         "default": "./esm/index.js"
-      },
-      "mui-modern": {
-        "types": "./modern/index.d.ts",
-        "default": "./modern/index.js"
       }
     },
     "./*": {
@@ -116,10 +112,6 @@
       "import": {
         "types": "./esm/*/index.d.ts",
         "default": "./esm/*/index.js"
-      },
-      "mui-modern": {
-        "types": "./modern/*/index.d.ts",
-        "default": "./modern/*/index.js"
       }
     },
     "./esm": null,

package/modern/AdapterDateFns/AdapterDateFns.d.ts

@@ -1,88 +0,0 @@
-import { Locale as DateFnsLocale } from 'date-fns/locale';
-import { AdapterFormats, AdapterOptions, MuiPickersAdapter } from "../models/index.js";
-import { AdapterDateFnsBase } from "../AdapterDateFnsBase/index.js";
-declare module '@mui/x-date-pickers/models' {
-  interface PickerValidDateLookup {
-    'date-fns': Date;
-  }
-}
-/**
- * Based on `@date-io/date-fns`
- *
- * MIT License
- *
- * Copyright (c) 2017 Dmitriy Kovalenko
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-export declare class AdapterDateFns extends AdapterDateFnsBase<DateFnsLocale> implements MuiPickersAdapter<DateFnsLocale> {
-  constructor({
-    locale,
-    formats
-  }?: AdapterOptions<DateFnsLocale, never>);
-  parse: (value: string, format: string) => Date | null;
-  isValid: (value: Date | null) => value is Date;
-  format: (value: Date, formatKey: keyof AdapterFormats) => string;
-  formatByString: (value: Date, formatString: string) => string;
-  isEqual: (value: Date | null, comparing: Date | null) => boolean;
-  isSameYear: (value: Date, comparing: Date) => boolean;
-  isSameMonth: (value: Date, comparing: Date) => boolean;
-  isSameDay: (value: Date, comparing: Date) => boolean;
-  isSameHour: (value: Date, comparing: Date) => boolean;
-  isAfter: (value: Date, comparing: Date) => boolean;
-  isAfterYear: (value: Date, comparing: Date) => boolean;
-  isAfterDay: (value: Date, comparing: Date) => boolean;
-  isBefore: (value: Date, comparing: Date) => boolean;
-  isBeforeYear: (value: Date, comparing: Date) => boolean;
-  isBeforeDay: (value: Date, comparing: Date) => boolean;
-  isWithinRange: (value: Date, [start, end]: [Date, Date]) => boolean;
-  startOfYear: (value: Date) => Date;
-  startOfMonth: (value: Date) => Date;
-  startOfWeek: (value: Date) => Date;
-  startOfDay: (value: Date) => Date;
-  endOfYear: (value: Date) => Date;
-  endOfMonth: (value: Date) => Date;
-  endOfWeek: (value: Date) => Date;
-  endOfDay: (value: Date) => Date;
-  addYears: (value: Date, amount: number) => Date;
-  addMonths: (value: Date, amount: number) => Date;
-  addWeeks: (value: Date, amount: number) => Date;
-  addDays: (value: Date, amount: number) => Date;
-  addHours: (value: Date, amount: number) => Date;
-  addMinutes: (value: Date, amount: number) => Date;
-  addSeconds: (value: Date, amount: number) => Date;
-  getYear: (value: Date) => number;
-  getMonth: (value: Date) => number;
-  getDate: (value: Date) => number;
-  getHours: (value: Date) => number;
-  getMinutes: (value: Date) => number;
-  getSeconds: (value: Date) => number;
-  getMilliseconds: (value: Date) => number;
-  setYear: (value: Date, year: number) => Date;
-  setMonth: (value: Date, month: number) => Date;
-  setDate: (value: Date, date: number) => Date;
-  setHours: (value: Date, hours: number) => Date;
-  setMinutes: (value: Date, minutes: number) => Date;
-  setSeconds: (value: Date, seconds: number) => Date;
-  setMilliseconds: (value: Date, milliseconds: number) => Date;
-  getDaysInMonth: (value: Date) => number;
-  getWeekArray: (value: Date) => Date[][];
-  getWeekNumber: (value: Date) => number;
-  getYearRange: ([start, end]: [Date, Date]) => Date[];
-}