@mui/x-date-pickers 8.0.0-alpha.6 → 8.0.0-alpha.7

package/modern/internals/index.js

@@ -11,7 +11,7 @@ export { pickersPopperClasses } from "./components/pickersPopperClasses.js";
 export { PickersToolbarButton } from "./components/PickersToolbarButton.js";
 export { DAY_MARGIN, DIALOG_WIDTH, VIEW_HEIGHT } from "./constants/dimensions.js";
 export { useControlledValueWithTimezone } from "./hooks/useValueWithTimezone.js";
-export { useField, createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from "./hooks/useField/index.js";
+export { useField, useFieldInternalPropsWithDefaults, createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from "./hooks/useField/index.js";
 export { useFieldOwnerState } from "./hooks/useFieldOwnerState.js";
 export { usePicker } from "./hooks/usePicker/index.js";
 export { usePickerPrivateContext } from "./hooks/usePickerPrivateContext.js";
@@ -25,10 +25,12 @@ export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual, getTodayDate
 export { resolveTimeViewsResponse, resolveDateTimeFormat } from "./utils/date-time-utils.js";
 export { getDefaultReferenceDate } from "./utils/getDefaultReferenceDate.js";
 export { executeInTheNextEventLoopTick, getActiveElement, onSpaceOrEnter, DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from "./utils/utils.js";
-export { useDefaultizedDateField, useDefaultizedTimeField, useDefaultizedDateTimeField } from "./hooks/defaultizedFieldProps.js";
 export { useDefaultReduceAnimations } from "./hooks/useDefaultReduceAnimations.js";
 export { applyDefaultViewProps } from "./utils/views.js";
 export { DayCalendar } from "../DateCalendar/DayCalendar.js";
 export { useCalendarState } from "../DateCalendar/useCalendarState.js";
 export { isInternalTimeView, isTimeView } from "./utils/time-utils.js";
-export { DateTimePickerToolbarOverrideContext } from "../DateTimePicker/DateTimePickerToolbar.js";
+export { DateTimePickerToolbarOverrideContext } from "../DateTimePicker/DateTimePickerToolbar.js";
+export { getDateFieldInternalPropsDefaults } from "../managers/useDateManager.js";
+export { getTimeFieldInternalPropsDefaults } from "../managers/useTimeManager.js";
+export { getDateTimeFieldInternalPropsDefaults } from "../managers/useDateTimeManager.js";

package/modern/internals/models/index.js

@@ -1,4 +1,5 @@
 export * from "./fields.js";
 export * from "./common.js";
 export * from "./value.js";
-export * from "./formProps.js";
+export * from "./formProps.js";
+export * from "./manager.js";

package/modern/internals/models/manager.js

@@ -0,0 +1 @@
+export {};

package/modern/internals/utils/date-utils.js

@@ -58,7 +58,7 @@ export const findClosestEnabledDate = ({
   }
   return null;
 };
-export const replaceInvalidDateByNull = (utils, value) => value == null || !utils.isValid(value) ? null : value;
+export const replaceInvalidDateByNull = (utils, value) => !utils.isValid(value) ? null : value;
 export const applyDefaultDate = (utils, value, defaultValue) => {
   if (value == null || !utils.isValid(value)) {
     return defaultValue;

package/modern/internals/utils/valueManagers.js

@@ -12,7 +12,7 @@ export const singleItemValueManager = {
         referenceDate
       } = _ref,
       params = _objectWithoutPropertiesLoose(_ref, _excluded);
-    if (value != null && params.utils.isValid(value)) {
+    if (params.utils.isValid(value)) {
       return value;
     }
     if (referenceDate != null) {
@@ -25,11 +25,11 @@ export const singleItemValueManager = {
   isSameError: (a, b) => a === b,
   hasError: error => error != null,
   defaultErrorState: null,
-  getTimezone: (utils, value) => value == null || !utils.isValid(value) ? null : utils.getTimezone(value),
+  getTimezone: (utils, value) => utils.isValid(value) ? utils.getTimezone(value) : null,
   setTimezone: (utils, timezone, value) => value == null ? null : utils.setTimezone(value, timezone)
 };
 export const singleItemFieldValueManager = {
-  updateReferenceValue: (utils, value, prevReferenceValue) => value == null || !utils.isValid(value) ? prevReferenceValue : value,
+  updateReferenceValue: (utils, value, prevReferenceValue) => !utils.isValid(value) ? prevReferenceValue : value,
   getSectionsFromValue: (utils, date, prevSections, getSectionsFromDate) => {
     const shouldReUsePrevDateSections = !utils.isValid(date) && !!prevSections;
     if (shouldReUsePrevDateSections) {
@@ -45,7 +45,7 @@ export const singleItemFieldValueManager = {
     getSections: sections => sections,
     getNewValuesFromNewActiveDate: newActiveDate => ({
       value: newActiveDate,
-      referenceValue: newActiveDate == null || !utils.isValid(newActiveDate) ? state.referenceValue : newActiveDate
+      referenceValue: utils.isValid(newActiveDate) ? newActiveDate : state.referenceValue
     })
   }),
   parseValueStr: (valueStr, referenceValue, parseDate) => parseDate(valueStr.trim(), referenceValue)

package/modern/locales/index.js

@@ -36,4 +36,5 @@ export * from "./urPK.js";
 export * from "./viVN.js";
 export * from "./zhCN.js";
 export * from "./zhHK.js";
+export * from "./zhTW.js";
 export * from "./utils/pickersLocaleTextApi.js";

package/modern/locales/nbNO.js

@@ -16,11 +16,10 @@ const nbNOPickers = {
   // DateRange labels
   start: 'Start',
   end: 'Slutt',
-  // startDate: 'Start date',
-  // startTime: 'Start time',
-  // endDate: 'End date',
-  // endTime: 'End time',
-
+  startDate: 'Startdato',
+  startTime: 'Starttid',
+  endDate: 'Sluttdato',
+  endTime: 'Slutttid',
   // Action bar
   cancelButtonLabel: 'Avbryt',
   clearButtonLabel: 'Fjern',
@@ -46,8 +45,7 @@ const nbNOPickers = {
   // Open picker labels
   openDatePickerDialogue: formattedDate => formattedDate ? `Velg dato, valgt dato er ${formattedDate}` : 'Velg dato',
   openTimePickerDialogue: formattedTime => formattedTime ? `Velg tid, valgt tid er ${formattedTime}` : 'Velg tid',
-  // fieldClearLabel: 'Clear',
-
+  fieldClearLabel: 'Slett',
   // Table labels
   timeTableLabel: 'velg tid',
   dateTableLabel: 'velg dato',
@@ -59,19 +57,17 @@ const nbNOPickers = {
   fieldHoursPlaceholder: () => 'tt',
   fieldMinutesPlaceholder: () => 'mm',
   fieldSecondsPlaceholder: () => 'ss',
-  fieldMeridiemPlaceholder: () => 'aa'
-
+  fieldMeridiemPlaceholder: () => 'aa',
   // View names
-  // year: 'Year',
-  // month: 'Month',
-  // day: 'Day',
-  // weekDay: 'Week day',
-  // hours: 'Hours',
-  // minutes: 'Minutes',
-  // seconds: 'Seconds',
-  // meridiem: 'Meridiem',
-
+  year: 'År',
+  month: 'Måned',
+  day: 'Dag',
+  weekDay: 'Ukedag',
+  hours: 'Timer',
+  minutes: 'Minutter',
+  seconds: 'Sekunder',
+  meridiem: 'Meridiem',
   // Common
-  // empty: 'Empty',
+  empty: 'Tøm'
 };
 export const nbNO = getPickersLocalization(nbNOPickers);

package/modern/locales/utils/getPickersLocalization.js

@@ -18,7 +18,7 @@ export const buildGetOpenDialogAriaText = params => {
     propsTranslation
   } = params;
   return value => {
-    const formattedValue = value !== null && utils.isValid(value) ? utils.format(value, formatKey) : null;
+    const formattedValue = utils.isValid(value) ? utils.format(value, formatKey) : null;
     const translation = propsTranslation ?? contextTranslation;
     return translation(formattedValue);
   };

package/modern/locales/zhTW.js

@@ -0,0 +1,73 @@
+import { getPickersLocalization } from "./utils/getPickersLocalization.js";
+const views = {
+  hours: '小時',
+  minutes: '分鐘',
+  seconds: '秒',
+  meridiem: '十二小時制'
+};
+const zhTWPickers = {
+  // Calendar navigation
+  previousMonth: '上個月',
+  nextMonth: '下個月',
+  // View navigation
+  openPreviousView: '前一個視圖',
+  openNextView: '下一個視圖',
+  calendarViewSwitchingButtonAriaLabel: view => view === 'year' ? '年視圖已打開，切換為日曆視圖' : '日曆視圖已打開，切換為年視圖',
+  // DateRange labels
+  start: '開始',
+  end: '結束',
+  startDate: '開始日期',
+  startTime: '開始時間',
+  endDate: '結束日期',
+  endTime: '結束時間',
+  // Action bar
+  cancelButtonLabel: '取消',
+  clearButtonLabel: '清除',
+  okButtonLabel: '確認',
+  todayButtonLabel: '今天',
+  // Toolbar titles
+  datePickerToolbarTitle: '選擇日期',
+  dateTimePickerToolbarTitle: '選擇日期和時間',
+  timePickerToolbarTitle: '選擇時間',
+  dateRangePickerToolbarTitle: '選擇時間範圍',
+  // Clock labels
+  clockLabelText: (view, formattedTime) => `選擇 ${views[view]}. ${!formattedTime ? '未選擇時間' : `已選擇${formattedTime}`}`,
+  hoursClockNumberText: hours => `${hours}小時`,
+  minutesClockNumberText: minutes => `${minutes}分鐘`,
+  secondsClockNumberText: seconds => `${seconds}秒`,
+  // Digital clock labels
+  selectViewText: view => `選擇 ${views[view]}`,
+  // Calendar labels
+  calendarWeekNumberHeaderLabel: '週數',
+  calendarWeekNumberHeaderText: '#',
+  calendarWeekNumberAriaLabelText: weekNumber => `第${weekNumber}週`,
+  calendarWeekNumberText: weekNumber => `${weekNumber}`,
+  // Open picker labels
+  openDatePickerDialogue: formattedDate => formattedDate ? `選擇日期，已選擇${formattedDate}` : '選擇日期',
+  openTimePickerDialogue: formattedTime => formattedTime ? `選擇時間，已選擇${formattedTime}` : '選擇時間',
+  fieldClearLabel: '清除',
+  // Table labels
+  timeTableLabel: '選擇時間',
+  dateTableLabel: '選擇日期',
+  // Field section placeholders
+  fieldYearPlaceholder: params => 'Y'.repeat(params.digitAmount),
+  fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'MMMM' : 'MM',
+  fieldDayPlaceholder: () => 'DD',
+  fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',
+  fieldHoursPlaceholder: () => 'hh',
+  fieldMinutesPlaceholder: () => 'mm',
+  fieldSecondsPlaceholder: () => 'ss',
+  fieldMeridiemPlaceholder: () => 'aa',
+  // View names
+  year: '年份',
+  month: '月份',
+  day: '日期',
+  weekDay: '星期',
+  hours: '時',
+  minutes: '分',
+  seconds: '秒',
+  meridiem: '十二小時制',
+  // Common
+  empty: '空'
+};
+export const zhTW = getPickersLocalization(zhTWPickers);

package/modern/managers/index.js

@@ -0,0 +1,3 @@
+export { useDateManager } from "./useDateManager.js";
+export { useTimeManager } from "./useTimeManager.js";
+export { useDateTimeManager } from "./useDateTimeManager.js";

package/modern/managers/useDateManager.js

@@ -0,0 +1,47 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { applyDefaultDate } from "../internals/utils/date-utils.js";
+import { singleItemFieldValueManager, singleItemValueManager } from "../internals/utils/valueManagers.js";
+import { validateDate } from "../validation/index.js";
+export function useDateManager(parameters = {}) {
+  const {
+    enableAccessibleFieldDOMStructure = true
+  } = parameters;
+  return React.useMemo(() => ({
+    valueType: 'date',
+    validator: validateDate,
+    internal_valueManager: singleItemValueManager,
+    internal_fieldValueManager: singleItemFieldValueManager,
+    internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
+    internal_applyDefaultsToFieldInternalProps: ({
+      internalProps,
+      utils,
+      defaultDates
+    }) => _extends({}, internalProps, getDateFieldInternalPropsDefaults({
+      defaultDates,
+      utils,
+      internalProps
+    }))
+  }), [enableAccessibleFieldDOMStructure]);
+}
+
+/**
+ * Private utility function to get the default internal props for the fields with date editing.
+ * Is used by the `useDateManager` and `useDateRangeManager` hooks.
+ */
+export function getDateFieldInternalPropsDefaults(parameters) {
+  const {
+    defaultDates,
+    utils,
+    internalProps
+  } = parameters;
+  return {
+    format: internalProps.format ?? utils.formats.keyboardDate,
+    disablePast: internalProps.disablePast ?? false,
+    disableFuture: internalProps.disableFuture ?? false,
+    minDate: applyDefaultDate(utils, internalProps.minDate, defaultDates.minDate),
+    maxDate: applyDefaultDate(utils, internalProps.maxDate, defaultDates.maxDate)
+  };
+}

package/modern/managers/useDateTimeManager.js

@@ -0,0 +1,52 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { applyDefaultDate } from "../internals/utils/date-utils.js";
+import { singleItemFieldValueManager, singleItemValueManager } from "../internals/utils/valueManagers.js";
+import { validateDateTime } from "../validation/index.js";
+export function useDateTimeManager(parameters = {}) {
+  const {
+    enableAccessibleFieldDOMStructure = true
+  } = parameters;
+  return React.useMemo(() => ({
+    valueType: 'date-time',
+    validator: validateDateTime,
+    internal_valueManager: singleItemValueManager,
+    internal_fieldValueManager: singleItemFieldValueManager,
+    internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
+    internal_applyDefaultsToFieldInternalProps: ({
+      internalProps,
+      utils,
+      defaultDates
+    }) => _extends({}, internalProps, getDateTimeFieldInternalPropsDefaults({
+      internalProps,
+      utils,
+      defaultDates
+    }))
+  }), [enableAccessibleFieldDOMStructure]);
+}
+
+/**
+ * Private utility function to get the default internal props for the field with date time editing.
+ * Is used by the `useDateTimeManager` and `useDateTimeRangeManager` hooks.
+ */
+export function getDateTimeFieldInternalPropsDefaults(parameters) {
+  const {
+    defaultDates,
+    utils,
+    internalProps
+  } = parameters;
+  const ampm = internalProps.ampm ?? utils.is12HourCycleInCurrentLocale();
+  const defaultFormat = ampm ? utils.formats.keyboardDateTime12h : utils.formats.keyboardDateTime24h;
+  return {
+    disablePast: internalProps.disablePast ?? false,
+    disableFuture: internalProps.disableFuture ?? false,
+    format: internalProps.format ?? defaultFormat,
+    disableIgnoringDatePartForTimeValidation: Boolean(internalProps.minDateTime || internalProps.maxDateTime),
+    minDate: applyDefaultDate(utils, internalProps.minDateTime ?? internalProps.minDate, defaultDates.minDate),
+    maxDate: applyDefaultDate(utils, internalProps.maxDateTime ?? internalProps.maxDate, defaultDates.maxDate),
+    minTime: internalProps.minDateTime ?? internalProps.minTime,
+    maxTime: internalProps.maxDateTime ?? internalProps.maxTime
+  };
+}

package/modern/managers/useTimeManager.js

@@ -0,0 +1,43 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { singleItemFieldValueManager, singleItemValueManager } from "../internals/utils/valueManagers.js";
+import { validateTime } from "../validation/index.js";
+export function useTimeManager(parameters = {}) {
+  const {
+    enableAccessibleFieldDOMStructure = true
+  } = parameters;
+  return React.useMemo(() => ({
+    valueType: 'time',
+    validator: validateTime,
+    internal_valueManager: singleItemValueManager,
+    internal_fieldValueManager: singleItemFieldValueManager,
+    internal_enableAccessibleFieldDOMStructure: enableAccessibleFieldDOMStructure,
+    internal_applyDefaultsToFieldInternalProps: ({
+      internalProps,
+      utils
+    }) => _extends({}, internalProps, getTimeFieldInternalPropsDefaults({
+      utils,
+      internalProps
+    }))
+  }), [enableAccessibleFieldDOMStructure]);
+}
+
+/**
+ * Private utility function to get the default internal props for the fields with time editing.
+ * Is used by the `useTimeManager` and `useTimeRangeManager` hooks.
+ */
+export function getTimeFieldInternalPropsDefaults(parameters) {
+  const {
+    utils,
+    internalProps
+  } = parameters;
+  const ampm = internalProps.ampm ?? utils.is12HourCycleInCurrentLocale();
+  const defaultFormat = ampm ? utils.formats.fullTime12h : utils.formats.fullTime24h;
+  return {
+    disablePast: internalProps.disablePast ?? false,
+    disableFuture: internalProps.disableFuture ?? false,
+    format: internalProps.format ?? defaultFormat
+  };
+}

package/modern/models/index.js

@@ -5,6 +5,7 @@ export * from "./views.js";
 export * from "./adapters.js";
 export * from "./common.js";
 export * from "./pickers.js";
+export * from "./manager.js";
 
 // Utils shared across the X packages
 export {};

package/modern/models/manager.js

@@ -0,0 +1 @@
+export {};