@mui/x-date-pickers 9.0.0-alpha.4 → 9.0.0-rc.0

package/internals/hooks/useField/useField.utils.mjs

@@ -222,26 +222,9 @@ export const getDateFromDateSections = (adapter, sections, localizedDigits) => {
   const dateWithoutSeparatorStr = sectionValues.join(' ');
   return adapter.parse(dateWithoutSeparatorStr, formatWithoutSeparator);
 };
-export const createDateStrForV7HiddenInputFromSections = sections => sections.map(section => {
+export const createDateStrForHiddenInputFromSections = sections => sections.map(section => {
   return `${section.startSeparator}${section.value || section.placeholder}${section.endSeparator}`;
 }).join('');
-export const createDateStrForV6InputFromSections = (sections, localizedDigits, isRtl) => {
-  const formattedSections = sections.map(section => {
-    const dateValue = getSectionVisibleValue(section, isRtl ? 'input-rtl' : 'input-ltr', localizedDigits);
-    return `${section.startSeparator}${dateValue}${section.endSeparator}`;
-  });
-  const dateStr = formattedSections.join('');
-  if (!isRtl) {
-    return dateStr;
-  }
-
-  // \u2066: start left-to-right isolation
-  // \u2067: start right-to-left isolation
-  // \u2068: start first strong character isolation
-  // \u2069: pop isolation
-  // wrap into an isolated group such that separators can split the string in smaller ones by adding \u2069\u2068
-  return `\u2066${dateStr}\u2069`;
-};
 export const getSectionsBoundaries = (adapter, localizedDigits, timezone) => {
   const today = adapter.date(undefined, timezone);
   const endOfYear = adapter.endOfYear(today);
@@ -428,50 +411,11 @@ export const mergeDateIntoReferenceDate = (adapter, dateToTransferFrom, sections
   return mergedDate;
 }, referenceDate);
 export const isAndroid = () => navigator.userAgent.toLowerCase().includes('android');
-
-// TODO v9: Remove
-export const getSectionOrder = (sections, shouldApplyRTL) => {
+export const getSectionOrder = sections => {
   const neighbors = {};
-  if (!shouldApplyRTL) {
-    sections.forEach((_, index) => {
-      const leftIndex = index === 0 ? null : index - 1;
-      const rightIndex = index === sections.length - 1 ? null : index + 1;
-      neighbors[index] = {
-        leftIndex,
-        rightIndex
-      };
-    });
-    return {
-      neighbors,
-      startIndex: 0,
-      endIndex: sections.length - 1
-    };
-  }
-  const rtl2ltr = {};
-  const ltr2rtl = {};
-  let groupedSectionsStart = 0;
-  let groupedSectionsEnd = 0;
-  let RTLIndex = sections.length - 1;
-  while (RTLIndex >= 0) {
-    groupedSectionsEnd = sections.findIndex(
-    // eslint-disable-next-line @typescript-eslint/no-loop-func
-    (section, index) => index >= groupedSectionsStart && section.endSeparator?.includes(' ') &&
-    // Special case where the spaces were not there in the initial input
-    section.endSeparator !== ' / ');
-    if (groupedSectionsEnd === -1) {
-      groupedSectionsEnd = sections.length - 1;
-    }
-    for (let i = groupedSectionsEnd; i >= groupedSectionsStart; i -= 1) {
-      ltr2rtl[i] = RTLIndex;
-      rtl2ltr[RTLIndex] = i;
-      RTLIndex -= 1;
-    }
-    groupedSectionsStart = groupedSectionsEnd + 1;
-  }
   sections.forEach((_, index) => {
-    const rtlIndex = ltr2rtl[index];
-    const leftIndex = rtlIndex === 0 ? null : rtl2ltr[rtlIndex - 1];
-    const rightIndex = rtlIndex === sections.length - 1 ? null : rtl2ltr[rtlIndex + 1];
+    const leftIndex = index === 0 ? null : index - 1;
+    const rightIndex = index === sections.length - 1 ? null : index + 1;
     neighbors[index] = {
       leftIndex,
       rightIndex
@@ -479,8 +423,8 @@ export const getSectionOrder = (sections, shouldApplyRTL) => {
   });
   return {
     neighbors,
-    startIndex: rtl2ltr[0],
-    endIndex: rtl2ltr[sections.length - 1]
+    startIndex: 0,
+    endIndex: sections.length - 1
   };
 };
 export const parseSelectedSections = (selectedSections, sections) => {

package/internals/hooks/useField/useFieldHiddenInputProps.d.mts

@@ -1,16 +1,14 @@
 import * as React from 'react';
-import { PickerManager } from "../../../models/index.mjs";
+import { PickerAnyManager } from "../../models/manager.mjs";
 import { UseFieldStateReturnValue } from "./useFieldState.mjs";
 /**
  * Generate the props to pass to the hidden input element of the field.
- * It is not used by the non-accessible DOM structure (with an <input /> element for editing).
- * It should be used in the MUI accessible DOM structure and the Base UI implementation.
  * @param {UseFieldHiddenInputPropsParameters} parameters The parameters of the hook.
  * @returns {UseFieldHiddenInputPropsReturnValue} The props to forward to the hidden input element of the field.
  */
 export declare function useFieldHiddenInputProps(parameters: UseFieldHiddenInputPropsParameters): UseFieldHiddenInputPropsReturnValue;
 interface UseFieldHiddenInputPropsParameters {
-  manager: PickerManager<any, any, any, any, any>;
+  manager: PickerAnyManager;
   stateResponse: UseFieldStateReturnValue<any>;
 }
 interface UseFieldHiddenInputPropsReturnValue {

package/internals/hooks/useField/useFieldHiddenInputProps.d.ts

@@ -1,16 +1,14 @@
 import * as React from 'react';
-import { PickerManager } from "../../../models/index.js";
+import { PickerAnyManager } from "../../models/manager.js";
 import { UseFieldStateReturnValue } from "./useFieldState.js";
 /**
  * Generate the props to pass to the hidden input element of the field.
- * It is not used by the non-accessible DOM structure (with an <input /> element for editing).
- * It should be used in the MUI accessible DOM structure and the Base UI implementation.
  * @param {UseFieldHiddenInputPropsParameters} parameters The parameters of the hook.
  * @returns {UseFieldHiddenInputPropsReturnValue} The props to forward to the hidden input element of the field.
  */
 export declare function useFieldHiddenInputProps(parameters: UseFieldHiddenInputPropsParameters): UseFieldHiddenInputPropsReturnValue;
 interface UseFieldHiddenInputPropsParameters {
-  manager: PickerManager<any, any, any, any, any>;
+  manager: PickerAnyManager;
   stateResponse: UseFieldStateReturnValue<any>;
 }
 interface UseFieldHiddenInputPropsReturnValue {

package/internals/hooks/useField/useFieldHiddenInputProps.js

@@ -10,8 +10,6 @@ var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 /**
  * Generate the props to pass to the hidden input element of the field.
- * It is not used by the non-accessible DOM structure (with an <input /> element for editing).
- * It should be used in the MUI accessible DOM structure and the Base UI implementation.
  * @param {UseFieldHiddenInputPropsParameters} parameters The parameters of the hook.
  * @returns {UseFieldHiddenInputPropsReturnValue} The props to forward to the hidden input element of the field.
  */
@@ -31,7 +29,7 @@ function useFieldHiddenInputProps(parameters) {
   const handleChange = (0, _useEventCallback.default)(event => {
     updateValueFromValueStr(event.target.value);
   });
-  const valueStr = React.useMemo(() => areAllSectionsEmpty ? '' : fieldValueManager.getV7HiddenInputValueFromSections(state.sections), [areAllSectionsEmpty, state.sections, fieldValueManager]);
+  const valueStr = React.useMemo(() => areAllSectionsEmpty ? '' : fieldValueManager.getHiddenInputValueFromSections(state.sections), [areAllSectionsEmpty, state.sections, fieldValueManager]);
   return {
     value: valueStr,
     onChange: handleChange

package/internals/hooks/useField/useFieldHiddenInputProps.mjs

@@ -2,8 +2,6 @@ import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 /**
  * Generate the props to pass to the hidden input element of the field.
- * It is not used by the non-accessible DOM structure (with an <input /> element for editing).
- * It should be used in the MUI accessible DOM structure and the Base UI implementation.
  * @param {UseFieldHiddenInputPropsParameters} parameters The parameters of the hook.
  * @returns {UseFieldHiddenInputPropsReturnValue} The props to forward to the hidden input element of the field.
  */
@@ -23,7 +21,7 @@ export function useFieldHiddenInputProps(parameters) {
   const handleChange = useEventCallback(event => {
     updateValueFromValueStr(event.target.value);
   });
-  const valueStr = React.useMemo(() => areAllSectionsEmpty ? '' : fieldValueManager.getV7HiddenInputValueFromSections(state.sections), [areAllSectionsEmpty, state.sections, fieldValueManager]);
+  const valueStr = React.useMemo(() => areAllSectionsEmpty ? '' : fieldValueManager.getHiddenInputValueFromSections(state.sections), [areAllSectionsEmpty, state.sections, fieldValueManager]);
   return {
     value: valueStr,
     onChange: handleChange

package/internals/hooks/useField/useFieldInternalPropsWithDefaults.js

@@ -48,7 +48,6 @@ function useFieldInternalPropsWithDefaults(parameters) {
         focused: pickerContext.open ? true : undefined,
         format: pickerContext.fieldFormat,
         formatDensity: fieldPrivateContext.formatDensity,
-        enableAccessibleFieldDOMStructure: fieldPrivateContext.enableAccessibleFieldDOMStructure,
         selectedSections: fieldPrivateContext.selectedSections,
         onSelectedSectionsChange: fieldPrivateContext.onSelectedSectionsChange,
         fieldRef: handleFieldRef

package/internals/hooks/useField/useFieldInternalPropsWithDefaults.mjs

@@ -41,7 +41,6 @@ export function useFieldInternalPropsWithDefaults(parameters) {
         focused: pickerContext.open ? true : undefined,
         format: pickerContext.fieldFormat,
         formatDensity: fieldPrivateContext.formatDensity,
-        enableAccessibleFieldDOMStructure: fieldPrivateContext.enableAccessibleFieldDOMStructure,
         selectedSections: fieldPrivateContext.selectedSections,
         onSelectedSectionsChange: fieldPrivateContext.onSelectedSectionsChange,
         fieldRef: handleFieldRef

package/internals/hooks/useField/useFieldRootProps.d.mts

@@ -1,20 +1,20 @@
-import { PickerManager } from "../../../models/index.mjs";
 import { UseFieldDOMGetters, UseFieldInternalProps } from "./useField.types.mjs";
 import { UseFieldStateReturnValue } from "./useFieldState.mjs";
 import { UseFieldCharacterEditingReturnValue } from "./useFieldCharacterEditing.mjs";
+import { PickerAnyManager } from "../../models/index.mjs";
 /**
  * Generate the props to pass to the root element of the field.
- * It is not used by the non-accessible DOM structure (with an <input /> element for editing).
- * It should be used in the MUI accessible DOM structure and the Base UI implementation.
  * @param {UseFieldRootPropsParameters} parameters The parameters of the hook.
  * @returns {UseFieldRootPropsReturnValue} The props to forward to the root element of the field.
  */
 export declare function useFieldRootProps(parameters: UseFieldRootPropsParameters): UseFieldRootPropsReturnValue;
 interface UseFieldRootPropsParameters {
-  manager: PickerManager<any, any, any, any, any>;
+  manager: PickerAnyManager;
   stateResponse: UseFieldStateReturnValue<any>;
   applyCharacterEditing: UseFieldCharacterEditingReturnValue;
-  internalPropsWithDefaults: UseFieldInternalProps<any, any, any>;
+  internalPropsWithDefaults: UseFieldInternalProps<any, any> & {
+    minutesStep?: number;
+  };
   domGetters: UseFieldDOMGetters;
   focused: boolean;
   setFocused: (focused: boolean) => void;

package/internals/hooks/useField/useFieldRootProps.d.ts

@@ -1,20 +1,20 @@
-import { PickerManager } from "../../../models/index.js";
 import { UseFieldDOMGetters, UseFieldInternalProps } from "./useField.types.js";
 import { UseFieldStateReturnValue } from "./useFieldState.js";
 import { UseFieldCharacterEditingReturnValue } from "./useFieldCharacterEditing.js";
+import { PickerAnyManager } from "../../models/index.js";
 /**
  * Generate the props to pass to the root element of the field.
- * It is not used by the non-accessible DOM structure (with an <input /> element for editing).
- * It should be used in the MUI accessible DOM structure and the Base UI implementation.
  * @param {UseFieldRootPropsParameters} parameters The parameters of the hook.
  * @returns {UseFieldRootPropsReturnValue} The props to forward to the root element of the field.
  */
 export declare function useFieldRootProps(parameters: UseFieldRootPropsParameters): UseFieldRootPropsReturnValue;
 interface UseFieldRootPropsParameters {
-  manager: PickerManager<any, any, any, any, any>;
+  manager: PickerAnyManager;
   stateResponse: UseFieldStateReturnValue<any>;
   applyCharacterEditing: UseFieldCharacterEditingReturnValue;
-  internalPropsWithDefaults: UseFieldInternalProps<any, any, any>;
+  internalPropsWithDefaults: UseFieldInternalProps<any, any> & {
+    minutesStep?: number;
+  };
   domGetters: UseFieldDOMGetters;
   focused: boolean;
   setFocused: (focused: boolean) => void;

package/internals/hooks/useField/useFieldRootProps.js

@@ -7,19 +7,20 @@ Object.defineProperty(exports, "__esModule", {
 exports.useFieldRootProps = useFieldRootProps;
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useTimeout = _interopRequireDefault(require("@mui/utils/useTimeout"));
-var _useFieldRootHandleKeyDown = require("./useFieldRootHandleKeyDown");
 var _utils = require("../../utils/utils");
 var _syncSelectionToDOM = require("./syncSelectionToDOM");
+var _usePickerAdapter = require("../../../hooks/usePickerAdapter");
+var _useField = require("./useField.utils");
 /**
  * Generate the props to pass to the root element of the field.
- * It is not used by the non-accessible DOM structure (with an <input /> element for editing).
- * It should be used in the MUI accessible DOM structure and the Base UI implementation.
  * @param {UseFieldRootPropsParameters} parameters The parameters of the hook.
  * @returns {UseFieldRootPropsReturnValue} The props to forward to the root element of the field.
  */
 function useFieldRootProps(parameters) {
   const {
-    manager,
+    manager: {
+      internal_fieldValueManager: fieldValueManager
+    },
     focused,
     setFocused,
     domGetters,
@@ -29,25 +30,118 @@ function useFieldRootProps(parameters) {
     stateResponse: {
       // States and derived states
       parsedSelectedSections,
+      sectionsValueBoundaries,
       sectionOrder,
       state,
+      value,
+      activeSectionIndex,
+      localizedDigits,
+      timezone,
       // Methods to update the states
       clearValue,
+      clearActiveSection,
       setCharacterQuery,
       setSelectedSections,
-      updateValueFromValueStr
+      updateValueFromValueStr,
+      updateSectionValue
     },
     internalPropsWithDefaults: {
       disabled = false,
-      readOnly = false
+      readOnly = false,
+      minutesStep
     }
   } = parameters;
+  const adapter = (0, _usePickerAdapter.usePickerAdapter)();
+  const handleKeyDown = (0, _useEventCallback.default)(event => {
+    if (disabled) {
+      return;
+    }
 
-  // TODO: Inline onContainerKeyDown once the old DOM structure is removed
-  const handleKeyDown = (0, _useFieldRootHandleKeyDown.useFieldRootHandleKeyDown)({
-    manager,
-    internalPropsWithDefaults,
-    stateResponse
+    // eslint-disable-next-line default-case
+    switch (true) {
+      // Select all
+      case (event.ctrlKey || event.metaKey) && String.fromCharCode(event.keyCode) === 'A' && !event.shiftKey && !event.altKey:
+        {
+          // prevent default to make sure that the next line "select all" while updating
+          // the internal state at the same time.
+          event.preventDefault();
+          setSelectedSections('all');
+          break;
+        }
+
+      // Move selection to next section
+      case event.key === 'ArrowRight':
+        {
+          event.preventDefault();
+          if (parsedSelectedSections == null) {
+            setSelectedSections(sectionOrder.startIndex);
+          } else if (parsedSelectedSections === 'all') {
+            setSelectedSections(sectionOrder.endIndex);
+          } else {
+            const nextSectionIndex = sectionOrder.neighbors[parsedSelectedSections].rightIndex;
+            if (nextSectionIndex !== null) {
+              setSelectedSections(nextSectionIndex);
+            }
+          }
+          break;
+        }
+
+      // Move selection to previous section
+      case event.key === 'ArrowLeft':
+        {
+          event.preventDefault();
+          if (parsedSelectedSections == null) {
+            setSelectedSections(sectionOrder.endIndex);
+          } else if (parsedSelectedSections === 'all') {
+            setSelectedSections(sectionOrder.startIndex);
+          } else {
+            const nextSectionIndex = sectionOrder.neighbors[parsedSelectedSections].leftIndex;
+            if (nextSectionIndex !== null) {
+              setSelectedSections(nextSectionIndex);
+            }
+          }
+          break;
+        }
+
+      // Reset the value of the selected section
+      case event.key === 'Delete':
+        {
+          event.preventDefault();
+          if (readOnly) {
+            break;
+          }
+          if (parsedSelectedSections == null || parsedSelectedSections === 'all') {
+            clearValue();
+          } else {
+            clearActiveSection();
+          }
+          break;
+        }
+
+      // Increment / decrement the selected section value
+      case ['ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown'].includes(event.key):
+        {
+          event.preventDefault();
+          if (readOnly || activeSectionIndex == null) {
+            break;
+          }
+
+          // if all sections are selected, mark the currently editing one as selected
+          if (parsedSelectedSections === 'all') {
+            setSelectedSections(activeSectionIndex);
+          }
+          const activeSection = state.sections[activeSectionIndex];
+          const newSectionValue = adjustSectionValue(adapter, timezone, activeSection, event.key, sectionsValueBoundaries, localizedDigits, fieldValueManager.getDateFromSection(value, activeSection), {
+            minutesStep
+          });
+          updateSectionValue({
+            section: activeSection,
+            newSectionValue,
+            shouldGoToNextSection: false
+          });
+          break;
+        }
+    }
   });
   const containerClickTimeout = (0, _useTimeout.default)();
   const handleClick = (0, _useEventCallback.default)(event => {
@@ -154,4 +248,82 @@ function useFieldRootProps(parameters) {
     contentEditable: parsedSelectedSections === 'all',
     tabIndex: internalPropsWithDefaults.disabled || parsedSelectedSections === 0 ? -1 : 0 // TODO: Try to set to undefined when there is a section selected.
   };
+}
+function getDeltaFromKeyCode(keyCode) {
+  switch (keyCode) {
+    case 'ArrowUp':
+      return 1;
+    case 'ArrowDown':
+      return -1;
+    case 'PageUp':
+      return 5;
+    case 'PageDown':
+      return -5;
+    default:
+      return 0;
+  }
+}
+function adjustSectionValue(adapter, timezone, section, keyCode, sectionsValueBoundaries, localizedDigits, activeDate, stepsAttributes) {
+  const delta = getDeltaFromKeyCode(keyCode);
+  const isStart = keyCode === 'Home';
+  const isEnd = keyCode === 'End';
+  const shouldSetAbsolute = section.value === '' || isStart || isEnd;
+  const adjustDigitSection = () => {
+    const sectionBoundaries = sectionsValueBoundaries[section.type]({
+      currentDate: activeDate,
+      format: section.format,
+      contentType: section.contentType
+    });
+    const getCleanValue = value => (0, _useField.cleanDigitSectionValue)(adapter, value, sectionBoundaries, localizedDigits, section);
+    const step = section.type === 'minutes' && stepsAttributes?.minutesStep ? stepsAttributes.minutesStep : 1;
+    let newSectionValueNumber;
+    if (shouldSetAbsolute) {
+      if (section.type === 'year' && !isEnd && !isStart) {
+        return adapter.formatByString(adapter.date(undefined, timezone), section.format);
+      }
+      if (delta > 0 || isStart) {
+        newSectionValueNumber = sectionBoundaries.minimum;
+      } else {
+        newSectionValueNumber = sectionBoundaries.maximum;
+      }
+    } else {
+      const currentSectionValue = parseInt((0, _useField.removeLocalizedDigits)(section.value, localizedDigits), 10);
+      newSectionValueNumber = currentSectionValue + delta * step;
+    }
+    if (newSectionValueNumber % step !== 0) {
+      if (delta < 0 || isStart) {
+        newSectionValueNumber += step - (step + newSectionValueNumber) % step; // for JS -3 % 5 = -3 (should be 2)
+      }
+      if (delta > 0 || isEnd) {
+        newSectionValueNumber -= newSectionValueNumber % step;
+      }
+    }
+    if (newSectionValueNumber > sectionBoundaries.maximum) {
+      return getCleanValue(sectionBoundaries.minimum + (newSectionValueNumber - sectionBoundaries.maximum - 1) % (sectionBoundaries.maximum - sectionBoundaries.minimum + 1));
+    }
+    if (newSectionValueNumber < sectionBoundaries.minimum) {
+      return getCleanValue(sectionBoundaries.maximum - (sectionBoundaries.minimum - newSectionValueNumber - 1) % (sectionBoundaries.maximum - sectionBoundaries.minimum + 1));
+    }
+    return getCleanValue(newSectionValueNumber);
+  };
+  const adjustLetterSection = () => {
+    const options = (0, _useField.getLetterEditingOptions)(adapter, timezone, section.type, section.format);
+    if (options.length === 0) {
+      return section.value;
+    }
+    if (shouldSetAbsolute) {
+      if (delta > 0 || isStart) {
+        return options[0];
+      }
+      return options[options.length - 1];
+    }
+    const currentOptionIndex = options.indexOf(section.value);
+    const newOptionIndex = (currentOptionIndex + delta) % options.length;
+    const clampedIndex = (newOptionIndex + options.length) % options.length;
+    return options[clampedIndex];
+  };
+  if (section.contentType === 'digit' || section.contentType === 'digit-with-letter') {
+    return adjustDigitSection();
+  }
+  return adjustLetterSection();
 }