@mui/x-date-pickers-pro 7.16.0 → 7.17.0

package/CHANGELOG.md

@@ -3,6 +3,93 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.17.0
+
+_Sep 13, 2024_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Charts performance improvement
+- 🧑‍💻 New Data Grid [custom columns demo](https://mui.com/x/react-data-grid/custom-columns/#full-example)
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+- 🌍 Improve Hungarian (hu-HU) locale on the Data Grid
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.17.0`
+
+- [DataGrid] Add "does not equal" and "does not contain" filter operators (#14489) @KenanYusuf
+- [DataGrid] Add demo to the "Custom columns" page that does not use generator (#13695) @arminmeh
+- [DataGrid] Fix Voice Over reading the column name twice (#14482) @arminmeh
+- [DataGrid] Fix bug in CRUD example (#14513) @michelengelen
+- [DataGrid] Fix failing jsdom tests caused by `:has()` selectors (#14559) @KenanYusuf
+- [DataGrid] Refactor string operator filter functions (#14564) @KenanYusuf
+- [l10n] Improve Hungarian (hu-HU) locale (#14506) @ntamas
+
+#### `@mui/x-data-grid-pro@7.17.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.17.0`.
+
+#### `@mui/x-data-grid-premium@7.17.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.17.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.17.0`
+
+- [fields] Improve `useSplitFieldProps` and make it public (#14514) @flaviendelangle
+- [pickers] Improve clear action label (#14243) @oliviertassinari
+- [pickers] Add `"use client"` directive to every public component and hook (#14562) @flaviendelangle
+- [pickers] Allow custom fields to validate the value (#14486) @flaviendelangle
+- [pickers] Stop using utils in locales (#14505) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@7.17.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.17.0`, plus:
+
+- [DateRangePicker] Fix `currentMonthCalendarPosition` not scrolling to future sibling (#14442) @GMchris
+
+### Charts
+
+#### `@mui/x-charts@7.17.0`
+
+- [charts] Add `"use client"` directive to every public component and hook (#14578) @flaviendelangle
+- [charts] Allow `onItemClick` on the `Legend` component (#14231) @JCQuintas
+- [charts] Fix `onAxisClick` with `layout='horizontal'` (#14547) @alexfauquette
+- [charts] Replace `path` with `circle` for performance improvement (#14518) @alexfauquette
+
+#### `@mui/x-charts-pro@7.0.0-beta.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@7.17.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@7.17.0`
+
+- [TreeView] Make `useTreeItem2` stable (#14498) @flaviendelangle
+
+### Docs
+
+- [docs] Add missing callout on "Imperative API" tree view sections (#14503) @flaviendelangle
+- [docs] Fix broken redirection to MUI X v5 @oliviertassinari
+- [docs] Fix multiple `console.error` messages on `charts` docs (#14554) @JCQuintas
+- [docs] Fixed typo in Row Grouping recipes (#14549) @Miodini
+- [docs] Match title with blog posts @oliviertassinari
+
+### Core
+
+- [core] Move warning methods to `@mui/x-internals` (#14528) @k-rajat19
+- [core] Sync with core release flow @oliviertassinari
+- [code-infra] Fix charts benchmark workflow (#14573) @JCQuintas
+- [docs-infra] Type interface API pages (#14138) @alexfauquette
+- [infra] Create `ESLint plugins` renovate group (#14574) @LukasTy
+- [license] Clean-up terminology to match codebase (#14531) @oliviertassinari
+- [test] Remove dead `act()` logic (#14529) @oliviertassinari
+
 ## 7.16.0
 
 _Sep 5, 2024_

package/DateRangeCalendar/DateRangeCalendar.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["value", "defaultValue", "referenceDate", "onChange", "className", "disableFuture", "disablePast", "minDate", "maxDate", "shouldDisableDate", "reduceAnimations", "onMonthChange", "rangePosition", "defaultRangePosition", "onRangePositionChange", "calendars", "currentMonthCalendarPosition", "slots", "slotProps", "loading", "renderLoading", "disableHighlightToday", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber", "disableDragEditing", "displayWeekNumber", "timezone", "availableRangePositions", "views", "view", "openTo", "onViewChange"],
@@ -13,7 +15,8 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import useId from '@mui/utils/useId';
 import { Watermark } from '@mui/x-license';
-import { applyDefaultDate, DayCalendar, useDefaultReduceAnimations, useCalendarState, useDefaultDates, useUtils, useNow, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, warnOnce, useControlledValueWithTimezone, useViews } from '@mui/x-date-pickers/internals';
+import { applyDefaultDate, DayCalendar, useDefaultReduceAnimations, useCalendarState, useDefaultDates, useUtils, useNow, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, useControlledValueWithTimezone, useViews } from '@mui/x-date-pickers/internals';
+import { warnOnce } from '@mui/x-internals/warning';
 import { getReleaseInfo } from "../internals/utils/releaseInfo.js";
 import { dateRangeCalendarClasses, getDateRangeCalendarUtilityClass } from "./dateRangeCalendarClasses.js";
 import { isEndOfRange, isRangeValid, isStartOfRange, isWithinRange } from "../internals/utils/date-utils.js";
@@ -321,7 +324,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     if (disableAutoMonthSwitching && prevDate && utils.isEqual(prevDate, date)) {
       return;
     }
-    const displayingMonthRange = calendars - 1;
+    const displayingMonthRange = calendars - currentMonthCalendarPosition;
     const currentMonthNumber = utils.getMonth(calendarState.currentMonth);
     const requestedMonthNumber = utils.getMonth(date);
     if (!utils.isSameYear(calendarState.currentMonth, date) || requestedMonthNumber < currentMonthNumber || requestedMonthNumber > currentMonthNumber + displayingMonthRange) {

package/DateRangeCalendar/useDragRange.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';

package/DateRangePicker/DateRangePicker.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["desktopModeMediaQuery"];

package/DateRangePicker/DateRangePickerToolbar.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["value", "rangePosition", "onRangePositionChange", "toolbarFormat", "className", "onViewChange", "view", "views"];

package/DateRangePickerDay/DateRangePickerDay.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["className", "day", "outsideCurrentMonth", "isEndOfHighlighting", "isEndOfPreviewing", "isHighlighting", "isPreviewing", "isStartOfHighlighting", "isStartOfPreviewing", "selected", "isVisuallySelected", "sx", "draggable", "isFirstVisibleCell", "isLastVisibleCell"];

package/DateTimeRangePicker/DateTimeRangePicker.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["desktopModeMediaQuery"];

package/DateTimeRangePicker/DateTimeRangePickerTabs.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';

package/DateTimeRangePicker/DateTimeRangePickerToolbar.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["value", "rangePosition", "onRangePositionChange", "className", "onViewChange", "toolbarVariant", "onChange", "classes", "view", "isLandscape", "views", "ampm", "disabled", "readOnly", "hidden", "toolbarFormat", "toolbarPlaceholder", "titleId", "sx"];

package/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -1,7 +1,9 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { extractValidationProps } from '@mui/x-date-pickers/internals';
+import { extractValidationProps } from '@mui/x-date-pickers/validation';
 import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import { refType } from '@mui/utils';
 import { rangeValueManager } from "../internals/utils/valueManagers.js";
@@ -9,7 +11,7 @@ import { useDateRangePickerDefaultizedProps } from "../DateRangePicker/shared.js
 import { renderDateRangeViewCalendar } from "../dateRangeViewRenderers/index.js";
 import { MultiInputDateRangeField } from "../MultiInputDateRangeField/index.js";
 import { useDesktopRangePicker } from "../internals/hooks/useDesktopRangePicker/index.js";
-import { validateDateRange } from "../internals/utils/validation/validateDateRange.js";
+import { validateDateRange } from "../validation/index.js";
 /**
  * Demos:
  *

package/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js

@@ -1,9 +1,12 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["openTo", "rangePosition"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { extractValidationProps, isDatePickerView, isInternalTimeView, resolveDateTimeFormat, useUtils } from '@mui/x-date-pickers/internals';
+import { isDatePickerView, isInternalTimeView, resolveDateTimeFormat, useUtils } from '@mui/x-date-pickers/internals';
+import { extractValidationProps } from '@mui/x-date-pickers/validation';
 import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import { refType } from '@mui/utils';
 import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from '@mui/x-date-pickers/timeViewRenderers';
@@ -14,7 +17,7 @@ import { DesktopDateTimePickerLayout } from '@mui/x-date-pickers/DesktopDateTime
 import { rangeValueManager } from "../internals/utils/valueManagers.js";
 import { renderDateRangeViewCalendar } from "../dateRangeViewRenderers/index.js";
 import { useDesktopRangePicker } from "../internals/hooks/useDesktopRangePicker/index.js";
-import { validateDateTimeRange } from "../internals/utils/validation/validateDateTimeRange.js";
+import { validateDateTimeRange } from "../validation/index.js";
 import { useDateTimeRangePickerDefaultizedProps } from "../DateTimeRangePicker/shared.js";
 import { MultiInputDateTimeRangeField } from "../MultiInputDateTimeRangeField/index.js";
 import { DateTimeRangePickerTimeWrapper } from "../DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js";

package/MobileDateRangePicker/MobileDateRangePicker.js

@@ -1,7 +1,9 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { extractValidationProps } from '@mui/x-date-pickers/internals';
+import { extractValidationProps } from '@mui/x-date-pickers/validation';
 import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import { refType } from '@mui/utils';
 import { rangeValueManager } from "../internals/utils/valueManagers.js";
@@ -9,7 +11,7 @@ import { useDateRangePickerDefaultizedProps } from "../DateRangePicker/shared.js
 import { renderDateRangeViewCalendar } from "../dateRangeViewRenderers/index.js";
 import { MultiInputDateRangeField } from "../MultiInputDateRangeField/index.js";
 import { useMobileRangePicker } from "../internals/hooks/useMobileRangePicker/index.js";
-import { validateDateRange } from "../internals/utils/validation/validateDateRange.js";
+import { validateDateRange } from "../validation/index.js";
 /**
  * Demos:
  *

package/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js

@@ -1,10 +1,13 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["view", "openTo", "rangePosition"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { refType } from '@mui/utils';
-import { DIALOG_WIDTH, VIEW_HEIGHT, extractValidationProps, isInternalTimeView, isDatePickerView, resolveDateTimeFormat, useUtils } from '@mui/x-date-pickers/internals';
+import { DIALOG_WIDTH, VIEW_HEIGHT, isInternalTimeView, isDatePickerView, resolveDateTimeFormat, useUtils } from '@mui/x-date-pickers/internals';
+import { extractValidationProps } from '@mui/x-date-pickers/validation';
 import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from '@mui/x-date-pickers/timeViewRenderers';
 import { multiSectionDigitalClockClasses, multiSectionDigitalClockSectionClasses } from '@mui/x-date-pickers/MultiSectionDigitalClock';
@@ -12,7 +15,7 @@ import { digitalClockClasses } from '@mui/x-date-pickers/DigitalClock';
 import { rangeValueManager } from "../internals/utils/valueManagers.js";
 import { renderDateRangeViewCalendar } from "../dateRangeViewRenderers/index.js";
 import { useMobileRangePicker } from "../internals/hooks/useMobileRangePicker/index.js";
-import { validateDateTimeRange } from "../internals/utils/validation/validateDateTimeRange.js";
+import { validateDateTimeRange } from "../validation/index.js";
 import { useDateTimeRangePickerDefaultizedProps } from "../DateTimeRangePicker/shared.js";
 import { MultiInputDateTimeRangeField } from "../MultiInputDateTimeRangeField/index.js";
 import { DateTimeRangePickerTimeWrapper } from "../DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js";

package/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["slots", "slotProps", "unstableStartFieldRef", "unstableEndFieldRef", "className"];
@@ -10,7 +12,8 @@ import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import useSlotProps from '@mui/utils/useSlotProps';
 import { unstable_composeClasses as composeClasses, unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-import { splitFieldInternalAndForwardedProps, convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals';
+import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals';
+import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
 import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
 import { useMultiInputDateRangeField } from "../internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -61,7 +64,7 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
   const {
     internalProps,
     forwardedProps
-  } = splitFieldInternalAndForwardedProps(themeProps, 'date');
+  } = useSplitFieldProps(themeProps, 'date');
   const {
       slots,
       slotProps,

package/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["slots", "slotProps", "unstableStartFieldRef", "unstableEndFieldRef", "className"];
@@ -10,7 +12,8 @@ import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import useSlotProps from '@mui/utils/useSlotProps';
 import { unstable_composeClasses as composeClasses, unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-import { splitFieldInternalAndForwardedProps, convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals';
+import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals';
+import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
 import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
 import { useMultiInputDateTimeRangeField } from "../internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -61,7 +64,7 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
   const {
     internalProps,
     forwardedProps
-  } = splitFieldInternalAndForwardedProps(themeProps, 'date-time');
+  } = useSplitFieldProps(themeProps, 'date-time');
   const {
       slots,
       slotProps,

package/MultiInputTimeRangeField/MultiInputTimeRangeField.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["slots", "slotProps", "unstableStartFieldRef", "unstableEndFieldRef", "className"];
@@ -10,7 +12,8 @@ import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import useSlotProps from '@mui/utils/useSlotProps';
 import { unstable_composeClasses as composeClasses, unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-import { splitFieldInternalAndForwardedProps, convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals';
+import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals';
+import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
 import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
 import { useMultiInputTimeRangeField } from "../internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -61,7 +64,7 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
   const {
     internalProps,
     forwardedProps
-  } = splitFieldInternalAndForwardedProps(themeProps, 'time');
+  } = useSplitFieldProps(themeProps, 'time');
   const {
       slots,
       slotProps,

package/PickersRangeCalendarHeader/PickersRangeCalendarHeader.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["calendars", "month", "monthIndex", "labelId"],

package/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["slots", "slotProps", "InputProps", "inputProps"];

package/SingleInputDateRangeField/useSingleInputDateRangeField.d.ts

@@ -1,3 +1,3 @@
 import { PickerValidDate } from '@mui/x-date-pickers/models';
 import { UseSingleInputDateRangeFieldProps } from './SingleInputDateRangeField.types';
-export declare const useSingleInputDateRangeField: <TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseSingleInputDateRangeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>>(inProps: TAllProps) => import("@mui/x-date-pickers/internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps & Omit<UseSingleInputDateRangeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, keyof import("@mui/x-date-pickers/internals/hooks/defaultizedFieldProps").UseDefaultizedDateFieldBaseProps<any>> & Required<Pick<UseSingleInputDateRangeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, keyof import("@mui/x-date-pickers/internals/hooks/defaultizedFieldProps").UseDefaultizedDateFieldBaseProps<any>>>, keyof UseSingleInputDateRangeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>>>;
+export declare const useSingleInputDateRangeField: <TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseSingleInputDateRangeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>>(inProps: TAllProps) => import("@mui/x-date-pickers/internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps & Omit<UseSingleInputDateRangeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, keyof import("@mui/x-date-pickers/internals/hooks/defaultizedFieldProps").UseDefaultizedDateFieldBaseProps<any>> & Required<Pick<UseSingleInputDateRangeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, keyof import("@mui/x-date-pickers/internals/hooks/defaultizedFieldProps").UseDefaultizedDateFieldBaseProps<any>>>, "disabled" | "format" | "onChange" | "onError" | "defaultValue" | "value" | "readOnly" | "referenceDate" | "timezone" | "formatDensity" | "enableAccessibleFieldDOMStructure" | "selectedSections" | "onSelectedSectionsChange" | "shouldRespectLeadingZeros" | "unstableFieldRef" | "shouldDisableDate" | "shouldDisableMonth" | "shouldDisableYear" | keyof import("@mui/x-date-pickers/internals").BaseDateValidationProps<any> | "dateSeparator">>;

package/SingleInputDateRangeField/useSingleInputDateRangeField.js

@@ -1,13 +1,16 @@
+'use client';
+
 import * as React from 'react';
-import { useField, splitFieldInternalAndForwardedProps, useDefaultizedDateField } from '@mui/x-date-pickers/internals';
+import { useField, useDefaultizedDateField } from '@mui/x-date-pickers/internals';
+import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
 import { rangeValueManager, getRangeFieldValueManager } from "../internals/utils/valueManagers.js";
-import { validateDateRange } from "../internals/utils/validation/validateDateRange.js";
+import { validateDateRange } from "../validation/index.js";
 export const useSingleInputDateRangeField = inProps => {
   const props = useDefaultizedDateField(inProps);
   const {
     forwardedProps,
     internalProps
-  } = splitFieldInternalAndForwardedProps(props, 'date');
+  } = useSplitFieldProps(props, 'date');
   const fieldValueManager = React.useMemo(() => getRangeFieldValueManager({
     dateSeparator: internalProps.dateSeparator
   }), [internalProps.dateSeparator]);

package/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["slots", "slotProps", "InputProps", "inputProps"];

package/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.d.ts

@@ -1,3 +1,3 @@
 import { PickerValidDate } from '@mui/x-date-pickers/models';
 import { UseSingleInputDateTimeRangeFieldProps } from './SingleInputDateTimeRangeField.types';
-export declare const useSingleInputDateTimeRangeField: <TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseSingleInputDateTimeRangeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>>(inProps: TAllProps) => import("@mui/x-date-pickers/internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps & Omit<UseSingleInputDateTimeRangeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, keyof import("@mui/x-date-pickers/internals/hooks/defaultizedFieldProps").UseDefaultizedDateTimeFieldBaseProps<any>> & Required<Pick<UseSingleInputDateTimeRangeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, keyof import("@mui/x-date-pickers/internals/hooks/defaultizedFieldProps").UseDefaultizedDateTimeFieldBaseProps<any>>>, keyof UseSingleInputDateTimeRangeFieldProps<any, any>>>;
+export declare const useSingleInputDateTimeRangeField: <TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseSingleInputDateTimeRangeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>>(inProps: TAllProps) => import("@mui/x-date-pickers/internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps & Omit<UseSingleInputDateTimeRangeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, keyof import("@mui/x-date-pickers/internals/hooks/defaultizedFieldProps").UseDefaultizedDateTimeFieldBaseProps<any>> & Required<Pick<UseSingleInputDateTimeRangeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, keyof import("@mui/x-date-pickers/internals/hooks/defaultizedFieldProps").UseDefaultizedDateTimeFieldBaseProps<any>>>, "disabled" | "format" | "onChange" | "onError" | "defaultValue" | "value" | "readOnly" | "referenceDate" | "timezone" | "formatDensity" | "enableAccessibleFieldDOMStructure" | "selectedSections" | "onSelectedSectionsChange" | "shouldRespectLeadingZeros" | "unstableFieldRef" | "ampm" | "disableFuture" | "maxDate" | "disablePast" | "minDate" | "minTime" | "maxTime" | "minutesStep" | "shouldDisableTime" | "disableIgnoringDatePartForTimeValidation" | "minDateTime" | "maxDateTime" | "shouldDisableDate" | "shouldDisableMonth" | "shouldDisableYear" | "dateSeparator">>;

package/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.js

@@ -1,13 +1,16 @@
+'use client';
+
 import * as React from 'react';
-import { useField, splitFieldInternalAndForwardedProps, useDefaultizedDateTimeField } from '@mui/x-date-pickers/internals';
+import { useField, useDefaultizedDateTimeField } from '@mui/x-date-pickers/internals';
+import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
 import { rangeValueManager, getRangeFieldValueManager } from "../internals/utils/valueManagers.js";
-import { validateDateTimeRange } from "../internals/utils/validation/validateDateTimeRange.js";
+import { validateDateTimeRange } from "../validation/index.js";
 export const useSingleInputDateTimeRangeField = inProps => {
   const props = useDefaultizedDateTimeField(inProps);
   const {
     forwardedProps,
     internalProps
-  } = splitFieldInternalAndForwardedProps(props, 'date-time');
+  } = useSplitFieldProps(props, 'date-time');
   const fieldValueManager = React.useMemo(() => getRangeFieldValueManager({
     dateSeparator: internalProps.dateSeparator
   }), [internalProps.dateSeparator]);

package/SingleInputTimeRangeField/SingleInputTimeRangeField.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["slots", "slotProps", "InputProps", "inputProps"];

package/SingleInputTimeRangeField/useSingleInputTimeRangeField.d.ts

@@ -1,3 +1,3 @@
 import { PickerValidDate } from '@mui/x-date-pickers/models';
 import { UseSingleInputTimeRangeFieldProps } from './SingleInputTimeRangeField.types';
-export declare const useSingleInputTimeRangeField: <TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseSingleInputTimeRangeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>>(inProps: TAllProps) => import("@mui/x-date-pickers/internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps & Omit<UseSingleInputTimeRangeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, keyof import("@mui/x-date-pickers/internals/hooks/defaultizedFieldProps").UseDefaultizedTimeFieldBaseProps> & Required<Pick<UseSingleInputTimeRangeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, keyof import("@mui/x-date-pickers/internals/hooks/defaultizedFieldProps").UseDefaultizedTimeFieldBaseProps>>, keyof UseSingleInputTimeRangeFieldProps<any, any>>>;
+export declare const useSingleInputTimeRangeField: <TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseSingleInputTimeRangeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>>(inProps: TAllProps) => import("@mui/x-date-pickers/internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps & Omit<UseSingleInputTimeRangeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, keyof import("@mui/x-date-pickers/internals/hooks/defaultizedFieldProps").UseDefaultizedTimeFieldBaseProps> & Required<Pick<UseSingleInputTimeRangeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>, keyof import("@mui/x-date-pickers/internals/hooks/defaultizedFieldProps").UseDefaultizedTimeFieldBaseProps>>, "disabled" | "format" | "onChange" | "onError" | "defaultValue" | "value" | "readOnly" | "referenceDate" | "timezone" | "formatDensity" | "enableAccessibleFieldDOMStructure" | "selectedSections" | "onSelectedSectionsChange" | "shouldRespectLeadingZeros" | "unstableFieldRef" | "ampm" | keyof import("@mui/x-date-pickers/internals").BaseTimeValidationProps | keyof import("@mui/x-date-pickers/internals").TimeValidationProps<any> | "dateSeparator">>;

package/SingleInputTimeRangeField/useSingleInputTimeRangeField.js

@@ -1,13 +1,16 @@
+'use client';
+
 import * as React from 'react';
-import { useField, splitFieldInternalAndForwardedProps, useDefaultizedTimeField } from '@mui/x-date-pickers/internals';
+import { useField, useDefaultizedTimeField } from '@mui/x-date-pickers/internals';
+import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
 import { rangeValueManager, getRangeFieldValueManager } from "../internals/utils/valueManagers.js";
-import { validateTimeRange } from "../internals/utils/validation/validateTimeRange.js";
+import { validateTimeRange } from "../validation/index.js";
 export const useSingleInputTimeRangeField = inProps => {
   const props = useDefaultizedTimeField(inProps);
   const {
     forwardedProps,
     internalProps
-  } = splitFieldInternalAndForwardedProps(props, 'time');
+  } = useSplitFieldProps(props, 'time');
   const fieldValueManager = React.useMemo(() => getRangeFieldValueManager({
     dateSeparator: internalProps.dateSeparator
   }), [internalProps.dateSeparator]);

package/StaticDateRangePicker/StaticDateRangePicker.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -5,7 +7,7 @@ import { useStaticRangePicker } from "../internals/hooks/useStaticRangePicker/in
 import { useDateRangePickerDefaultizedProps } from "../DateRangePicker/shared.js";
 import { renderDateRangeViewCalendar } from "../dateRangeViewRenderers/index.js";
 import { rangeValueManager } from "../internals/utils/valueManagers.js";
-import { validateDateRange } from "../internals/utils/validation/validateDateRange.js";
+import { validateDateRange } from "../validation/index.js";
 /**
  * Demos:
  *

package/index.d.ts

@@ -24,3 +24,4 @@ export * from './DesktopDateTimeRangePicker';
 export * from './MobileDateTimeRangePicker';
 export * from './dateRangeViewRenderers';
 export * from './models';
+export * from './validation';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v7.16.0
+ * @mui/x-date-pickers-pro v7.17.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the
@@ -37,4 +37,5 @@ export * from "./MobileDateTimeRangePicker/index.js";
 
 // View renderers
 export * from "./dateRangeViewRenderers/index.js";
-export * from "./models/index.js";
+export * from "./models/index.js";
+export * from "./validation/index.js";

package/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import useEventCallback from '@mui/utils/useEventCallback';
 import { unstable_useDateField as useDateField } from '@mui/x-date-pickers/DateField';
-import { useLocalizationContext, useValidation, useControlledValueWithTimezone, useDefaultizedDateField } from '@mui/x-date-pickers/internals';
-import { validateDateRange } from "../../utils/validation/validateDateRange.js";
+import { useControlledValueWithTimezone, useDefaultizedDateField } from '@mui/x-date-pickers/internals';
+import { useValidation } from '@mui/x-date-pickers/validation';
+import { validateDateRange } from "../../../validation/index.js";
 import { rangeValueManager } from "../../utils/valueManagers.js";
 import { excludeProps } from "./shared.js";
 import { useMultiInputFieldSelectedSections } from "../useMultiInputFieldSelectedSections.js";
@@ -14,7 +15,6 @@ export const useMultiInputDateRangeField = ({
   unstableEndFieldRef
 }) => {
   const sharedProps = useDefaultizedDateField(inSharedProps);
-  const adapter = useLocalizationContext();
   const {
     value: valueProp,
     defaultValue,
@@ -42,29 +42,29 @@ export const useMultiInputDateRangeField = ({
     onChange,
     valueManager: rangeValueManager
   });
+  const {
+    validationError,
+    getValidationErrorForNewValue
+  } = useValidation({
+    props: sharedProps,
+    value,
+    timezone,
+    validator: validateDateRange,
+    onError: sharedProps.onError
+  });
 
   // TODO: Maybe export utility from `useField` instead of copy/pasting the logic
   const buildChangeHandler = index => {
     return (newDate, rawContext) => {
       const newDateRange = index === 0 ? [newDate, value[1]] : [value[0], newDate];
       const context = _extends({}, rawContext, {
-        validationError: validateDateRange({
-          adapter,
-          value: newDateRange,
-          props: _extends({}, sharedProps, {
-            timezone
-          })
-        })
+        validationError: getValidationErrorForNewValue(newDateRange)
       });
       handleValueChange(newDateRange, context);
     };
   };
   const handleStartDateChange = useEventCallback(buildChangeHandler(0));
   const handleEndDateChange = useEventCallback(buildChangeHandler(1));
-  const validationError = useValidation(_extends({}, sharedProps, {
-    value,
-    timezone
-  }), validateDateRange, rangeValueManager.isSameError, rangeValueManager.defaultErrorState);
   const selectedSectionsResponse = useMultiInputFieldSelectedSections({
     selectedSections,
     onSelectedSectionsChange,

package/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import useEventCallback from '@mui/utils/useEventCallback';
 import { unstable_useDateTimeField as useDateTimeField } from '@mui/x-date-pickers/DateTimeField';
-import { useLocalizationContext, useValidation, useControlledValueWithTimezone, useDefaultizedDateTimeField } from '@mui/x-date-pickers/internals';
-import { validateDateTimeRange } from "../../utils/validation/validateDateTimeRange.js";
+import { useControlledValueWithTimezone, useDefaultizedDateTimeField } from '@mui/x-date-pickers/internals';
+import { useValidation } from '@mui/x-date-pickers/validation';
+import { validateDateTimeRange } from "../../../validation/index.js";
 import { rangeValueManager } from "../../utils/valueManagers.js";
 import { excludeProps } from "./shared.js";
 import { useMultiInputFieldSelectedSections } from "../useMultiInputFieldSelectedSections.js";
@@ -14,7 +15,6 @@ export const useMultiInputDateTimeRangeField = ({
   unstableEndFieldRef
 }) => {
   const sharedProps = useDefaultizedDateTimeField(inSharedProps);
-  const adapter = useLocalizationContext();
   const {
     value: valueProp,
     defaultValue,
@@ -42,29 +42,29 @@ export const useMultiInputDateTimeRangeField = ({
     onChange,
     valueManager: rangeValueManager
   });
+  const {
+    validationError,
+    getValidationErrorForNewValue
+  } = useValidation({
+    props: sharedProps,
+    value,
+    timezone,
+    validator: validateDateTimeRange,
+    onError: sharedProps.onError
+  });
 
   // TODO: Maybe export utility from `useField` instead of copy/pasting the logic
   const buildChangeHandler = index => {
     return (newDate, rawContext) => {
       const newDateRange = index === 0 ? [newDate, value[1]] : [value[0], newDate];
       const context = _extends({}, rawContext, {
-        validationError: validateDateTimeRange({
-          adapter,
-          value: newDateRange,
-          props: _extends({}, sharedProps, {
-            timezone
-          })
-        })
+        validationError: getValidationErrorForNewValue(newDateRange)
       });
       handleValueChange(newDateRange, context);
     };
   };
   const handleStartDateChange = useEventCallback(buildChangeHandler(0));
   const handleEndDateChange = useEventCallback(buildChangeHandler(1));
-  const validationError = useValidation(_extends({}, sharedProps, {
-    value,
-    timezone
-  }), validateDateTimeRange, rangeValueManager.isSameError, rangeValueManager.defaultErrorState);
   const selectedSectionsResponse = useMultiInputFieldSelectedSections({
     selectedSections,
     onSelectedSectionsChange,