@mui/x-date-pickers 7.15.0 → 7.17.0

package/node/locales/skSK.js

@@ -39,7 +39,7 @@ const skSKPickers = {
   timePickerToolbarTitle: 'Vyberte čas',
   dateRangePickerToolbarTitle: 'Vyberete rozmedzie dátumov',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `${timeViews[view] ?? view} vybraný. ${time === null ? 'Nie je vybraný čas' : `Vybraný čas je ${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `${timeViews[view] ?? view} vybraný. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Nie je vybraný čas' : `Vybraný čas je ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} hodín`,
   minutesClockNumberText: minutes => `${minutes} minút`,
   secondsClockNumberText: seconds => `${seconds} sekúnd`,
@@ -51,9 +51,9 @@ const skSKPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `${weekNumber} týždeň v roku`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Vyberte dátum, vybraný dátum je ${utils.format(value, 'fullDate')}` : 'Vyberte dátum',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Vyberte čas, vybraný čas je ${utils.format(value, 'fullTime')}` : 'Vyberte čas',
-  // fieldClearLabel: 'Clear value',
+  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `Vyberte dátum, vybraný dátum je ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Vyberte dátum',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Vyberte čas, vybraný čas je ${formattedTime ?? utils.format(value, 'fullTime')}` : 'Vyberte čas',
+  // fieldClearLabel: 'Clear',
 
   // Table labels
   timeTableLabel: 'vyberte čas',

package/node/locales/svSE.js

@@ -37,7 +37,7 @@ const svSEPickers = {
   timePickerToolbarTitle: 'Välj tid',
   dateRangePickerToolbarTitle: 'Välj datumintervall',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `Välj ${timeViews[view]}. ${time === null ? 'Ingen tid vald' : `Vald tid är ${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `Välj ${timeViews[view]}. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Ingen tid vald' : `Vald tid är ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} timmar`,
   minutesClockNumberText: minutes => `${minutes} minuter`,
   secondsClockNumberText: seconds => `${seconds} sekunder`,
@@ -49,8 +49,8 @@ const svSEPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `Vecka ${weekNumber}`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Välj datum, valt datum är ${utils.format(value, 'fullDate')}` : 'Välj datum',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Välj tid, vald tid är ${utils.format(value, 'fullTime')}` : 'Välj tid',
+  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `Välj datum, valt datum är ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Välj datum',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Välj tid, vald tid är ${formattedTime ?? utils.format(value, 'fullTime')}` : 'Välj tid',
   fieldClearLabel: 'Rensa värde',
   // Table labels
   timeTableLabel: 'välj tid',

package/node/locales/trTR.js

@@ -38,7 +38,7 @@ const trTRPickers = {
   timePickerToolbarTitle: 'Saat seç',
   dateRangePickerToolbarTitle: 'Tarih aralığı seçin',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `${timeViews[view]} seç.  ${time === null ? 'Zaman seçilmedi' : `Seçilen zaman: ${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `${timeViews[view]} seç.  ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Zaman seçilmedi' : `Seçilen zaman: ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} saat`,
   minutesClockNumberText: minutes => `${minutes} dakika`,
   secondsClockNumberText: seconds => `${seconds} saniye`,
@@ -50,9 +50,9 @@ const trTRPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `Hafta ${weekNumber}`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Tarih seçin, seçilen tarih: ${utils.format(value, 'fullDate')}` : 'Tarih seç',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Saat seçin, seçilen saat: ${utils.format(value, 'fullTime')}` : 'Saat seç',
-  // fieldClearLabel: 'Clear value',
+  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `Tarih seçin, seçilen tarih: ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Tarih seç',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Saat seçin, seçilen saat: ${formattedTime ?? utils.format(value, 'fullTime')}` : 'Saat seç',
+  // fieldClearLabel: 'Clear',
 
   // Table labels
   timeTableLabel: 'saat seç',

package/node/locales/ukUA.js

@@ -37,7 +37,7 @@ const ukUAPickers = {
   timePickerToolbarTitle: 'Вибрати час',
   dateRangePickerToolbarTitle: 'Вибрати календарний період',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `Вибрати ${timeViews[view]}. ${time === null ? 'Час не вибраний' : `Вибрано час ${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `Вибрати ${timeViews[view]}. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Час не вибраний' : `Вибрано час ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} годин`,
   minutesClockNumberText: minutes => `${minutes} хвилин`,
   secondsClockNumberText: seconds => `${seconds} секунд`,
@@ -49,8 +49,8 @@ const ukUAPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `Тиждень ${weekNumber}`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Оберіть дату, обрана дата  ${utils.format(value, 'fullDate')}` : 'Оберіть дату',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Оберіть час, обраний час  ${utils.format(value, 'fullTime')}` : 'Оберіть час',
+  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `Оберіть дату, обрана дата  ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Оберіть дату',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Оберіть час, обраний час  ${formattedTime ?? utils.format(value, 'fullTime')}` : 'Оберіть час',
   fieldClearLabel: 'Очистити дані',
   // Table labels
   timeTableLabel: 'оберіть час',

package/node/locales/urPK.js

@@ -38,7 +38,7 @@ const urPKPickers = {
   timePickerToolbarTitle: 'وقت منتخب کریں',
   dateRangePickerToolbarTitle: 'تاریخوں کی رینج منتخب کریں',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `${timeViews[view]} منتخب کریں ${time === null ? 'کوئی وقت منتخب نہیں' : `منتخب وقت ہے ${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `${timeViews[view]} منتخب کریں ${!formattedTime && (time === null || !utils.isValid(time)) ? 'کوئی وقت منتخب نہیں' : `منتخب وقت ہے ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} گھنٹے`,
   minutesClockNumberText: minutes => `${minutes} منٹ`,
   secondsClockNumberText: seconds => `${seconds} سیکنڈ`,
@@ -50,9 +50,9 @@ const urPKPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `ہفتہ ${weekNumber}`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `تاریخ منتخب کریں، منتخب شدہ تاریخ ہے ${utils.format(value, 'fullDate')}` : 'تاریخ منتخب کریں',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `وقت منتخب کریں، منتخب شدہ وقت ہے ${utils.format(value, 'fullTime')}` : 'وقت منتخب کریں',
-  // fieldClearLabel: 'Clear value',
+  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `تاریخ منتخب کریں، منتخب شدہ تاریخ ہے ${formattedDate ?? utils.format(value, 'fullDate')}` : 'تاریخ منتخب کریں',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `وقت منتخب کریں، منتخب شدہ وقت ہے ${formattedTime ?? utils.format(value, 'fullTime')}` : 'وقت منتخب کریں',
+  // fieldClearLabel: 'Clear',
 
   // Table labels
   timeTableLabel: 'وقت منتخب کریں',

package/node/locales/utils/getPickersLocalization.js

@@ -1,10 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getPickersLocalization = void 0;
+exports.getPickersLocalization = exports.buildGetOpenDialogAriaText = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 const getPickersLocalization = pickersTranslations => {
   return {
@@ -17,4 +17,18 @@ const getPickersLocalization = pickersTranslations => {
     }
   };
 };
-exports.getPickersLocalization = getPickersLocalization;
+exports.getPickersLocalization = getPickersLocalization;
+const buildGetOpenDialogAriaText = params => {
+  const {
+    utils,
+    formatKey,
+    contextTranslation,
+    propsTranslation
+  } = params;
+  return value => {
+    const formattedValue = value !== null && utils.isValid(value) ? utils.format(value, formatKey) : null;
+    const translation = propsTranslation ?? contextTranslation;
+    return translation(value, utils, formattedValue);
+  };
+};
+exports.buildGetOpenDialogAriaText = buildGetOpenDialogAriaText;

package/node/locales/viVN.js

@@ -37,7 +37,7 @@ const viVNPickers = {
   timePickerToolbarTitle: 'Chọn giờ',
   dateRangePickerToolbarTitle: 'Chọn khoảng ngày',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `Chọn ${views[view]}. ${time === null ? 'Không có giờ được chọn' : `Giờ được chọn là ${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `Chọn ${views[view]}. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Không có giờ được chọn' : `Giờ được chọn là ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours} giờ`,
   minutesClockNumberText: minutes => `${minutes} phút`,
   secondsClockNumberText: seconds => `${seconds} giây`,
@@ -49,8 +49,8 @@ const viVNPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `Tuần ${weekNumber}`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Chọn ngày, ngày đã chọn là ${utils.format(value, 'fullDate')}` : 'Chọn ngày',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `Chọn giờ, giờ đã chọn là ${utils.format(value, 'fullTime')}` : 'Chọn giờ',
+  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `Chọn ngày, ngày đã chọn là ${formattedDate ?? utils.format(value, 'fullDate')}` : 'Chọn ngày',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `Chọn giờ, giờ đã chọn là ${formattedTime ?? utils.format(value, 'fullTime')}` : 'Chọn giờ',
   fieldClearLabel: 'Xóa giá trị',
   // Table labels
   timeTableLabel: 'chọn giờ',

package/node/locales/zhCN.js

@@ -37,7 +37,7 @@ const zhCNPickers = {
   timePickerToolbarTitle: '选择时间',
   dateRangePickerToolbarTitle: '选择时间范围',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `选择 ${views[view]}. ${time === null ? '未选择时间' : `已选择${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `选择 ${views[view]}. ${!formattedTime && (time === null || !utils.isValid(time)) ? '未选择时间' : `已选择${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours}小时`,
   minutesClockNumberText: minutes => `${minutes}分钟`,
   secondsClockNumberText: seconds => `${seconds}秒`,
@@ -49,8 +49,8 @@ const zhCNPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `第${weekNumber}周`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `选择日期，已选择${utils.format(value, 'fullDate')}` : '选择日期',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `选择时间，已选择${utils.format(value, 'fullTime')}` : '选择时间',
+  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `选择日期，已选择${formattedDate ?? utils.format(value, 'fullDate')}` : '选择日期',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `选择时间，已选择${formattedTime ?? utils.format(value, 'fullTime')}` : '选择时间',
   fieldClearLabel: '清除',
   // Table labels
   timeTableLabel: '选择时间',

package/node/locales/zhHK.js

@@ -37,7 +37,7 @@ const zhHKPickers = {
   timePickerToolbarTitle: '選擇時間',
   dateRangePickerToolbarTitle: '選擇時間範圍',
   // Clock labels
-  clockLabelText: (view, time, adapter) => `選擇 ${views[view]}. ${time === null ? '未選擇時間' : `已選擇${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, time, utils, formattedTime) => `選擇 ${views[view]}. ${!formattedTime && (time === null || !utils.isValid(time)) ? '未選擇時間' : `已選擇${formattedTime ?? utils.format(time, 'fullTime')}`}`,
   hoursClockNumberText: hours => `${hours}小時`,
   minutesClockNumberText: minutes => `${minutes}分鐘`,
   secondsClockNumberText: seconds => `${seconds}秒`,
@@ -49,8 +49,8 @@ const zhHKPickers = {
   calendarWeekNumberAriaLabelText: weekNumber => `第${weekNumber}週`,
   calendarWeekNumberText: weekNumber => `${weekNumber}`,
   // Open picker labels
-  openDatePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `選擇日期，已選擇${utils.format(value, 'fullDate')}` : '選擇日期',
-  openTimePickerDialogue: (value, utils) => value !== null && utils.isValid(value) ? `選擇時間，已選擇${utils.format(value, 'fullTime')}` : '選擇時間',
+  openDatePickerDialogue: (value, utils, formattedDate) => formattedDate || value !== null && utils.isValid(value) ? `選擇日期，已選擇${formattedDate ?? utils.format(value, 'fullDate')}` : '選擇日期',
+  openTimePickerDialogue: (value, utils, formattedTime) => formattedTime || value !== null && utils.isValid(value) ? `選擇時間，已選擇${formattedTime ?? utils.format(value, 'fullTime')}` : '選擇時間',
   fieldClearLabel: '清除',
   // Table labels
   timeTableLabel: '選擇時間',

package/node/themeAugmentation/index.js

@@ -1,38 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _overrides = require("./overrides");
-Object.keys(_overrides).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _overrides[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _overrides[key];
-    }
-  });
-});
-var _props = require("./props");
-Object.keys(_props).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _props[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _props[key];
-    }
-  });
-});
-var _components = require("./components");
-Object.keys(_components).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _components[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _components[key];
-    }
-  });
-});
+"use strict";

package/node/timeViewRenderers/timeViewRenderers.js

@@ -1,5 +1,6 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -10,8 +11,6 @@ var _DigitalClock = require("../DigitalClock");
 var _MultiSectionDigitalClock = require("../MultiSectionDigitalClock");
 var _timeUtils = require("../internals/utils/time-utils");
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const renderTimeViewClock = ({
   view,
   onViewChange,

package/node/validation/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "extractValidationProps", {
+  enumerable: true,
+  get: function () {
+    return _extractValidationProps.extractValidationProps;
+  }
+});
+Object.defineProperty(exports, "useValidation", {
+  enumerable: true,
+  get: function () {
+    return _useValidation.useValidation;
+  }
+});
+Object.defineProperty(exports, "validateDate", {
+  enumerable: true,
+  get: function () {
+    return _validateDate.validateDate;
+  }
+});
+Object.defineProperty(exports, "validateDateTime", {
+  enumerable: true,
+  get: function () {
+    return _validateDateTime.validateDateTime;
+  }
+});
+Object.defineProperty(exports, "validateTime", {
+  enumerable: true,
+  get: function () {
+    return _validateTime.validateTime;
+  }
+});
+var _validateDate = require("./validateDate");
+var _validateTime = require("./validateTime");
+var _validateDateTime = require("./validateDateTime");
+var _extractValidationProps = require("./extractValidationProps");
+var _useValidation = require("./useValidation");

package/node/validation/useValidation.js

@@ -0,0 +1,61 @@
+"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.useValidation = useValidation;
+var React = _interopRequireWildcard(require("react"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _useUtils = require("../internals/hooks/useUtils");
+/**
+ * Utility hook to check if a given value is valid based on the provided validation props.
+ * @template TDate
+ * @template TValue The value type. It will be either the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+ * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+ * @param {UseValidationOptions<TValue, TDate, TError, TValidationProps>} options The options to configure the hook.
+ * @param {TValue} options.value The value to validate.
+ * @param {PickersTimezone} options.timezone The timezone to use for the validation.
+ * @param {Validator<TValue, TDate, TError, TValidationProps>} options.validator The validator function to use.
+ * @param {TValidationProps} options.props The validation props, they differ depending on the component.
+ * @param {(error: TError, value: TValue) => void} options.onError Callback fired when the error associated with the current value changes.
+ */
+function useValidation(options) {
+  const {
+    props,
+    validator,
+    value,
+    timezone,
+    onError
+  } = options;
+  const adapter = (0, _useUtils.useLocalizationContext)();
+  const previousValidationErrorRef = React.useRef(validator.valueManager.defaultErrorState);
+  const validationError = validator({
+    adapter,
+    value,
+    timezone,
+    props
+  });
+  const hasValidationError = validator.valueManager.hasError(validationError);
+  React.useEffect(() => {
+    if (onError && !validator.valueManager.isSameError(validationError, previousValidationErrorRef.current)) {
+      onError(validationError, value);
+    }
+    previousValidationErrorRef.current = validationError;
+  }, [validator, onError, validationError, value]);
+  const getValidationErrorForNewValue = (0, _useEventCallback.default)(newValue => {
+    return validator({
+      adapter,
+      value: newValue,
+      timezone,
+      props
+    });
+  });
+  return {
+    validationError,
+    hasValidationError,
+    getValidationErrorForNewValue
+  };
+}

package/node/{internals/utils/validation → validation}/validateDate.js

@@ -4,10 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.validateDate = void 0;
-var _dateUtils = require("../date-utils");
+var _dateUtils = require("../internals/utils/date-utils");
+var _valueManagers = require("../internals/utils/valueManagers");
 const validateDate = ({
   props,
   value,
+  timezone,
   adapter
 }) => {
   if (value === null) {
@@ -18,8 +20,7 @@ const validateDate = ({
     shouldDisableMonth,
     shouldDisableYear,
     disablePast,
-    disableFuture,
-    timezone
+    disableFuture
   } = props;
   const now = adapter.utils.date(undefined, timezone);
   const minDate = (0, _dateUtils.applyDefaultDate)(adapter.utils, props.minDate, adapter.defaultDates.minDate);
@@ -45,4 +46,5 @@ const validateDate = ({
       return null;
   }
 };
-exports.validateDate = validateDate;
+exports.validateDate = validateDate;
+validateDate.valueManager = _valueManagers.singleItemValueManager;

package/node/{internals/utils/validation → validation}/validateDateTime.js

@@ -6,14 +6,17 @@ Object.defineProperty(exports, "__esModule", {
 exports.validateDateTime = void 0;
 var _validateDate = require("./validateDate");
 var _validateTime = require("./validateTime");
+var _valueManagers = require("../internals/utils/valueManagers");
 const validateDateTime = ({
-  props,
+  adapter,
   value,
-  adapter
+  timezone,
+  props
 }) => {
   const dateValidationResult = (0, _validateDate.validateDate)({
     adapter,
     value,
+    timezone,
     props
   });
   if (dateValidationResult !== null) {
@@ -22,7 +25,9 @@ const validateDateTime = ({
   return (0, _validateTime.validateTime)({
     adapter,
     value,
+    timezone,
     props
   });
 };
-exports.validateDateTime = validateDateTime;
+exports.validateDateTime = validateDateTime;
+validateDateTime.valueManager = _valueManagers.singleItemValueManager;

package/node/{internals/utils/validation → validation}/validateTime.js

@@ -4,10 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.validateTime = void 0;
-var _timeUtils = require("../time-utils");
+var _timeUtils = require("../internals/utils/time-utils");
+var _valueManagers = require("../internals/utils/valueManagers");
 const validateTime = ({
   adapter,
   value,
+  timezone,
   props
 }) => {
   if (value === null) {
@@ -20,8 +22,7 @@ const validateTime = ({
     shouldDisableTime,
     disableIgnoringDatePartForTimeValidation = false,
     disablePast,
-    disableFuture,
-    timezone
+    disableFuture
   } = props;
   const now = adapter.utils.date(undefined, timezone);
   const isAfter = (0, _timeUtils.createIsAfterIgnoreDatePart)(disableIgnoringDatePartForTimeValidation, adapter.utils);
@@ -48,4 +49,5 @@ const validateTime = ({
       return null;
   }
 };
-exports.validateTime = validateTime;
+exports.validateTime = validateTime;
+validateTime.valueManager = _valueManagers.singleItemValueManager;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers",
-  "version": "7.15.0",
+  "version": "7.17.0",
   "description": "The community edition of the Date and Time Picker components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -35,12 +35,13 @@
     "directory": "packages/x-date-pickers"
   },
   "dependencies": {
-    "@babel/runtime": "^7.25.4",
+    "@babel/runtime": "^7.25.6",
     "@mui/utils": "^5.16.6",
     "@types/react-transition-group": "^4.4.11",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "react-transition-group": "^4.4.5"
+    "react-transition-group": "^4.4.5",
+    "@mui/x-internals": "7.17.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/themeAugmentation/index.d.ts

@@ -1,3 +1,3 @@
-export * from './overrides';
-export * from './props';
-export * from './components';
+export type * from './overrides';
+export type * from './props';
+export type * from './components';

package/themeAugmentation/index.js

@@ -1,3 +0,0 @@
-export * from './overrides';
-export * from './props';
-export * from './components';

package/timeViewRenderers/index.js

@@ -1 +1 @@
-export { renderTimeViewClock, renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from './timeViewRenderers';
+export { renderTimeViewClock, renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from "./timeViewRenderers.js";

package/timeViewRenderers/timeViewRenderers.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { TimeClock } from '../TimeClock';
-import { DigitalClock } from '../DigitalClock';
-import { MultiSectionDigitalClock } from '../MultiSectionDigitalClock';
-import { isTimeView } from '../internals/utils/time-utils';
+import { TimeClock } from "../TimeClock/index.js";
+import { DigitalClock } from "../DigitalClock/index.js";
+import { MultiSectionDigitalClock } from "../MultiSectionDigitalClock/index.js";
+import { isTimeView } from "../internals/utils/time-utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const renderTimeViewClock = ({
   view,

package/{internals/utils/validation → validation}/extractValidationProps.d.ts

@@ -1,4 +1,4 @@
-import { BaseDateValidationProps, BaseTimeValidationProps, DateTimeValidationProps, DayValidationProps, MonthValidationProps, TimeValidationProps, YearValidationProps } from '../../models/validation';
+import { BaseDateValidationProps, BaseTimeValidationProps, DateTimeValidationProps, DayValidationProps, MonthValidationProps, TimeValidationProps, YearValidationProps } from '../internals/models/validation';
 export declare const DATE_VALIDATION_PROP_NAMES: (keyof BaseDateValidationProps<any> | keyof YearValidationProps<any> | keyof MonthValidationProps<any> | keyof DayValidationProps<any>)[];
 export declare const TIME_VALIDATION_PROP_NAMES: (keyof BaseTimeValidationProps | keyof TimeValidationProps<any> | 'ampm')[];
 export declare const DATE_TIME_VALIDATION_PROP_NAMES: (keyof DateTimeValidationProps<any>)[];

package/validation/index.d.ts

@@ -0,0 +1,9 @@
+export { validateDate } from './validateDate';
+export type { ValidateDateProps } from './validateDate';
+export { validateTime } from './validateTime';
+export type { ValidateTimeProps } from './validateTime';
+export { validateDateTime } from './validateDateTime';
+export type { ValidateDateTimeProps } from './validateDateTime';
+export { extractValidationProps } from './extractValidationProps';
+export { useValidation } from './useValidation';
+export type { Validator } from './useValidation';

package/validation/index.js

@@ -0,0 +1,5 @@
+export { validateDate } from "./validateDate.js";
+export { validateTime } from "./validateTime.js";
+export { validateDateTime } from "./validateDateTime.js";
+export { extractValidationProps } from "./extractValidationProps.js";
+export { useValidation } from "./useValidation.js";

package/validation/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/validation/index.js",
+  "types": "./index.d.ts"
+}

package/validation/useValidation.d.ts

@@ -0,0 +1,68 @@
+import { MuiPickersAdapterContextValue } from '../LocalizationProvider/LocalizationProvider';
+import { OnErrorProps, PickersTimezone, PickerValidDate } from '../models';
+import type { PickerValueManager } from '../internals/hooks/usePicker';
+export type Validator<TValue, TDate extends PickerValidDate, TError, TValidationProps> = {
+    (params: {
+        adapter: MuiPickersAdapterContextValue<TDate>;
+        value: TValue;
+        timezone: PickersTimezone;
+        props: TValidationProps;
+    }): TError;
+    valueManager: PickerValueManager<TValue, TDate, any>;
+};
+interface UseValidationOptions<TValue, TDate extends PickerValidDate, TError, TValidationProps extends {}> extends OnErrorProps<TValue, TError> {
+    /**
+     * The value to validate.
+     */
+    value: TValue;
+    /**
+     * The timezone to use for the validation.
+     */
+    timezone: PickersTimezone;
+    /**
+     * The validator function to use.
+     * They can be imported from `@mui/x-date-pickers/validation` and `@mui/x-date-pickers-pro/validation`.
+     * It is recommended to only use the validator exported by the MUI X packages,
+     * otherwise you may have inconsistent behaviors between the field and the views.
+     */
+    validator: Validator<TValue, TDate, TError, TValidationProps>;
+    /**
+     * The validation props, they differ depending on the component.
+     * For example, the `validateTime` function supports `minTime`, `maxTime`, etc.
+     */
+    props: TValidationProps;
+}
+interface UseValidationReturnValue<TValue, TError> {
+    /**
+     * The validation error associated to the value passed to the `useValidation` hook.
+     */
+    validationError: TError;
+    /**
+     * `true` if the current error is not null.
+     * For single value components, it means that the value is invalid.
+     * For range components, it means that either start or end value is invalid.
+     */
+    hasValidationError: boolean;
+    /**
+     * Get the validation error for a new value.
+     * This can be used to validate the value in a change handler before updating the state.
+     * @template TValue The value type.
+     * @param {TValue} newValue The value to validate.
+     * @returns {TError} The validation error associated to the new value.
+     */
+    getValidationErrorForNewValue: (newValue: TValue) => TError;
+}
+/**
+ * Utility hook to check if a given value is valid based on the provided validation props.
+ * @template TDate
+ * @template TValue The value type. It will be either the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+ * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+ * @param {UseValidationOptions<TValue, TDate, TError, TValidationProps>} options The options to configure the hook.
+ * @param {TValue} options.value The value to validate.
+ * @param {PickersTimezone} options.timezone The timezone to use for the validation.
+ * @param {Validator<TValue, TDate, TError, TValidationProps>} options.validator The validator function to use.
+ * @param {TValidationProps} options.props The validation props, they differ depending on the component.
+ * @param {(error: TError, value: TValue) => void} options.onError Callback fired when the error associated with the current value changes.
+ */
+export declare function useValidation<TValue, TDate extends PickerValidDate, TError, TValidationProps extends {}>(options: UseValidationOptions<TValue, TDate, TError, TValidationProps>): UseValidationReturnValue<TValue, TError>;
+export {};