@mui/x-date-pickers-pro 8.0.0-alpha.1 → 8.0.0-alpha.11

package/modern/hooks/useMultiInputRangeField/useMultiInputRangeField.js

@@ -0,0 +1,149 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import useEventCallback from '@mui/utils/useEventCallback';
+import { useControlledValueWithTimezone, useFieldInternalPropsWithDefaults } from '@mui/x-date-pickers/internals';
+import { useValidation } from '@mui/x-date-pickers/validation';
+import { useMultiInputRangeFieldTextFieldProps } from "./useMultiInputRangeFieldTextFieldProps.js";
+import { useMultiInputRangeFieldSelectedSections } from "./useMultiInputRangeFieldSelectedSections.js";
+/**
+ * Basic example:
+ *
+ * ```tsx
+ * import Box from '@mui/material/Box';
+ * import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
+ * import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
+ * import { useDateRangeManager } from '@mui/x-date-pickers-pro/managers';
+ *
+ * function MultiInputField(props) {
+ *   const manager = useDateRangeManager();
+ *   const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
+ *   const { startDate, endDate } = useMultiInputRangeField({
+ *     manager,
+ *     internalProps,
+ *     startForwardedProps: forwardedProps,
+ *     endForwardedProps: forwardedProps,
+ *   });
+ *
+ *   return (
+ *     <Box {...forwardedProps}>
+ *       <PickersTextField {...startDate} />
+ *       <span>{' – '}</span>
+ *       <PickersTextField {...endDate} />
+ *     </Box>
+ *   );
+ * }
+ * ```
+ *
+ * @param {UseMultiInputRangeFieldParameters<TManager, TForwardedProps>} parameters The parameters of the hook.
+ * @param {TManager} parameters.manager The manager of the field.
+ * @param {PickerManagerFieldInternalProps<TManager>} parameters.internalProps The internal props of the field.
+ * @param {TForwardedProps} parameters.startForwardedProps The forwarded props of the start field.
+ * @param {TForwardedProps} parameters.endForwardedProps The forwarded props of the end field.
+ * @returns {UseMultiInputRangeFieldReturnValue<TManager, TForwardedProps>} The props to pass to the start and the end components.
+ */
+export function useMultiInputRangeField(parameters) {
+  const {
+    manager,
+    internalProps,
+    startForwardedProps,
+    endForwardedProps
+  } = parameters;
+  const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({
+    manager,
+    internalProps
+  });
+  const {
+    value: valueProp,
+    defaultValue,
+    format,
+    formatDensity,
+    shouldRespectLeadingZeros,
+    onChange,
+    disabled,
+    readOnly,
+    selectedSections,
+    onSelectedSectionsChange,
+    timezone: timezoneProp,
+    enableAccessibleFieldDOMStructure,
+    autoFocus,
+    referenceDate,
+    unstableStartFieldRef,
+    unstableEndFieldRef
+  } = internalPropsWithDefaults;
+  const {
+    value,
+    handleValueChange,
+    timezone
+  } = useControlledValueWithTimezone({
+    name: 'useMultiInputRangeField',
+    timezone: timezoneProp,
+    value: valueProp,
+    defaultValue,
+    referenceDate,
+    onChange,
+    valueManager: manager.internal_valueManager
+  });
+  const {
+    validationError,
+    getValidationErrorForNewValue
+  } = useValidation({
+    props: internalPropsWithDefaults,
+    value,
+    timezone,
+    validator: manager.validator,
+    onError: internalPropsWithDefaults.onError
+  });
+  const buildChangeHandler = index => {
+    return (newSingleValue, rawContext) => {
+      const newRange = index === 0 ? [newSingleValue, value[1]] : [value[0], newSingleValue];
+      const context = _extends({}, rawContext, {
+        validationError: getValidationErrorForNewValue(newRange)
+      });
+      handleValueChange(newRange, context);
+    };
+  };
+  const handleStartDateChange = useEventCallback(buildChangeHandler(0));
+  const handleEndDateChange = useEventCallback(buildChangeHandler(1));
+  const selectedSectionsResponse = useMultiInputRangeFieldSelectedSections({
+    selectedSections,
+    onSelectedSectionsChange,
+    unstableStartFieldRef,
+    unstableEndFieldRef
+  });
+  const sharedProps = {
+    disabled,
+    readOnly,
+    timezone,
+    format,
+    formatDensity,
+    shouldRespectLeadingZeros,
+    enableAccessibleFieldDOMStructure
+  };
+  const startDateProps = useMultiInputRangeFieldTextFieldProps({
+    valueType: manager.valueType,
+    fieldProps: _extends({
+      error: !!validationError[0]
+    }, startForwardedProps, selectedSectionsResponse.start, sharedProps, {
+      value: valueProp === undefined ? undefined : valueProp[0],
+      defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
+      onChange: handleStartDateChange,
+      autoFocus // Do not add on end field.
+    })
+  });
+  const endDateProps = useMultiInputRangeFieldTextFieldProps({
+    valueType: manager.valueType,
+    fieldProps: _extends({
+      error: !!validationError[1]
+    }, endForwardedProps, selectedSectionsResponse.end, sharedProps, {
+      value: valueProp === undefined ? undefined : valueProp[1],
+      defaultValue: defaultValue === undefined ? undefined : defaultValue[1],
+      onChange: handleEndDateChange
+    })
+  });
+  return {
+    startDate: startDateProps,
+    endDate: endDateProps,
+    enableAccessibleFieldDOMStructure
+  };
+}

package/{internals/hooks/useMultiInputFieldSelectedSections.js → modern/hooks/useMultiInputRangeField/useMultiInputRangeFieldSelectedSections.js}

@@ -1,10 +1,12 @@
+'use client';
+
 import * as React from 'react';
 import useForkRef from '@mui/utils/useForkRef';
 import useEventCallback from '@mui/utils/useEventCallback';
-export const useMultiInputFieldSelectedSections = params => {
+export const useMultiInputRangeFieldSelectedSections = parameters => {
   const unstableEndFieldRef = React.useRef(null);
-  const handleUnstableEndFieldRef = useForkRef(params.unstableEndFieldRef, unstableEndFieldRef);
-  const [startSelectedSection, setStartSelectedSection] = React.useState(params.selectedSections ?? null);
+  const handleUnstableEndFieldRef = useForkRef(parameters.unstableEndFieldRef, unstableEndFieldRef);
+  const [startSelectedSection, setStartSelectedSection] = React.useState(parameters.selectedSections ?? null);
   const [endSelectedSection, setEndSelectedSection] = React.useState(null);
   const getActiveField = () => {
     if (unstableEndFieldRef.current && unstableEndFieldRef.current.isFieldFocused()) {
@@ -15,25 +17,25 @@ export const useMultiInputFieldSelectedSections = params => {
   const handleStartSelectedSectionChange = useEventCallback(newSelectedSections => {
     setStartSelectedSection(newSelectedSections);
     if (getActiveField() === 'start') {
-      params.onSelectedSectionsChange?.(newSelectedSections);
+      parameters.onSelectedSectionsChange?.(newSelectedSections);
     }
   });
   const handleEndSelectedSectionChange = useEventCallback(newSelectedSections => {
     setEndSelectedSection(newSelectedSections);
     if (getActiveField() === 'end') {
-      params.onSelectedSectionsChange?.(newSelectedSections);
+      parameters.onSelectedSectionsChange?.(newSelectedSections);
     }
   });
   const activeField = getActiveField();
   return {
     start: {
-      unstableFieldRef: params.unstableStartFieldRef,
-      selectedSections: activeField === 'start' && params.selectedSections !== undefined ? params.selectedSections : startSelectedSection,
+      unstableFieldRef: parameters.unstableStartFieldRef,
+      selectedSections: activeField === 'start' && parameters.selectedSections !== undefined ? parameters.selectedSections : startSelectedSection,
       onSelectedSectionsChange: handleStartSelectedSectionChange
     },
     end: {
       unstableFieldRef: handleUnstableEndFieldRef,
-      selectedSections: activeField === 'end' && params.selectedSections !== undefined ? params.selectedSections : endSelectedSection,
+      selectedSections: activeField === 'end' && parameters.selectedSections !== undefined ? parameters.selectedSections : endSelectedSection,
       onSelectedSectionsChange: handleEndSelectedSectionChange
     }
   };

package/modern/hooks/useMultiInputRangeField/useMultiInputRangeFieldTextFieldProps.js

@@ -0,0 +1,59 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["clearable", "onClear"];
+import { useDateManager, useDateTimeManager, useTimeManager } from '@mui/x-date-pickers/managers';
+import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
+import { useField, useFieldInternalPropsWithDefaults } from '@mui/x-date-pickers/internals';
+/**
+ * @ignore - internal hook.
+ */
+export function useMultiInputRangeFieldTextFieldProps(parameters) {
+  const {
+    fieldProps,
+    valueType
+  } = parameters;
+  let useManager;
+  switch (valueType) {
+    case 'date':
+      {
+        useManager = useDateManager;
+        break;
+      }
+    case 'time':
+      {
+        useManager = useTimeManager;
+        break;
+      }
+    case 'date-time':
+      {
+        useManager = useDateTimeManager;
+        break;
+      }
+    default:
+      {
+        throw new Error(`Unknown valueType: ${valueType}`);
+      }
+  }
+  const manager = useManager({
+    enableAccessibleFieldDOMStructure: fieldProps.enableAccessibleFieldDOMStructure
+  });
+  const {
+    forwardedProps,
+    internalProps
+  } = useSplitFieldProps(fieldProps, 'date');
+  const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({
+    manager,
+    internalProps
+  });
+  const _ref = useField({
+      forwardedProps,
+      internalProps: internalPropsWithDefaults,
+      valueManager: manager.internal_valueManager,
+      fieldValueManager: manager.internal_fieldValueManager,
+      validator: manager.validator,
+      valueType: manager.valueType,
+      // TODO v8: Add a real aria label before moving the opening logic to the field on range pickers.
+      getOpenPickerButtonAriaLabel: () => ''
+    }),
+    fieldResponse = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return fieldResponse;
+}

package/modern/hooks/usePickerRangePositionContext.js

@@ -0,0 +1,15 @@
+'use client';
+
+import * as React from 'react';
+export const PickerRangePositionContext = /*#__PURE__*/React.createContext(null);
+
+/**
+ * Returns information about the range position of the picker that wraps the current component.
+ */
+export function usePickerRangePositionContext() {
+  const value = React.useContext(PickerRangePositionContext);
+  if (value == null) {
+    throw new Error(['MUI X: The `usePickerRangePositionContext` can only be called in components that are used inside a picker component'].join('\n'));
+  }
+  return value;
+}

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v8.0.0-alpha.1
+ * @mui/x-date-pickers-pro v8.0.0-alpha.11
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the
@@ -32,4 +32,6 @@ export * from "./MobileDateTimeRangePicker/index.js";
 // View renderers
 export * from "./dateRangeViewRenderers/index.js";
 export * from "./models/index.js";
-export * from "./validation/index.js";
+export * from "./hooks/index.js";
+export * from "./validation/index.js";
+export * from "./managers/index.js";

package/modern/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js

@@ -1,14 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["props"];
+const _excluded = ["props"],
+  _excluded2 = ["ownerState"];
 import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
 import { useLicenseVerifier } from '@mui/x-license';
 import { PickersLayout } from '@mui/x-date-pickers/PickersLayout';
-import { executeInTheNextEventLoopTick, getActiveElement, usePicker, PickersPopper, PickerProvider } from '@mui/x-date-pickers/internals';
-import { useEnrichedRangePickerFieldProps } from "../useEnrichedRangePickerFieldProps.js";
+import { executeInTheNextEventLoopTick, getActiveElement, usePicker, PickerPopper, PickerProvider, PickerFieldUIContextProvider } from '@mui/x-date-pickers/internals';
+import { useEnrichedRangePickerField } from "../useEnrichedRangePickerField.js";
 import { getReleaseInfo } from "../../utils/releaseInfo.js";
 import { useRangePosition } from "../useRangePosition.js";
+import { PickerRangePositionContext } from "../../../hooks/usePickerRangePositionContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const releaseInfo = getReleaseInfo();
 export const useDesktopRangePicker = _ref => {
@@ -20,58 +22,45 @@ export const useDesktopRangePicker = _ref => {
   const {
     slots,
     slotProps,
-    className,
-    sx,
-    format,
-    formatDensity,
-    enableAccessibleFieldDOMStructure,
-    selectedSections,
-    onSelectedSectionsChange,
-    timezone,
-    label,
     inputRef,
-    name,
     readOnly,
-    disabled,
     autoFocus,
     disableOpenPicker,
-    localeText,
-    reduceAnimations
+    localeText
   } = props;
   const fieldContainerRef = React.useRef(null);
-  const anchorRef = React.useRef(null);
   const popperRef = React.useRef(null);
   const startFieldRef = React.useRef(null);
   const endFieldRef = React.useRef(null);
+  const singleInputFieldRef = React.useRef(null);
   const initialView = React.useRef(props.openTo ?? null);
   const fieldType = slots.field.fieldType ?? 'multi-input';
+  const rangePositionResponse = useRangePosition(props, fieldType === 'single-input' ? singleInputFieldRef : undefined);
+  let fieldRef;
+  if (fieldType === 'single-input') {
+    fieldRef = singleInputFieldRef;
+  } else if (rangePositionResponse.rangePosition === 'start') {
+    fieldRef = startFieldRef;
+  } else {
+    fieldRef = endFieldRef;
+  }
   const {
-    rangePosition,
-    onRangePositionChange
-  } = useRangePosition(props, fieldType === 'single-input' ? startFieldRef : undefined);
-  const {
-    open,
-    actions,
-    layoutProps,
     providerProps,
     renderCurrentView,
-    shouldRestoreFocus,
-    fieldProps: pickerFieldProps,
     ownerState
   } = usePicker(_extends({}, pickerParams, {
     props,
     variant: 'desktop',
     autoFocusView: false,
-    fieldRef: rangePosition === 'start' ? startFieldRef : endFieldRef,
-    localeText,
-    additionalViewProps: {
-      rangePosition,
-      onRangePositionChange
-    }
+    fieldRef,
+    localeText
   }));
+
+  // Temporary hack to hide the opening button on the range pickers until we have migrate them to the new opening logic.
+  providerProps.contextValue.triggerStatus = 'hidden';
   React.useEffect(() => {
-    if (layoutProps.view) {
-      initialView.current = layoutProps.view;
+    if (providerProps.contextValue.view) {
+      initialView.current = providerProps.contextValue.view;
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -80,90 +69,69 @@ export const useDesktopRangePicker = _ref => {
       if (fieldContainerRef.current?.contains(getActiveElement(document)) || popperRef.current?.contains(getActiveElement(document))) {
         return;
       }
-      actions.onDismiss();
+
+      // This direct access to `providerProps` will go away once the range fields stop having their views in a tooltip.
+      providerProps.privateContextValue.dismissViews();
     });
   };
   const Field = slots.field;
-  const fieldProps = useSlotProps({
-    elementType: Field,
-    externalSlotProps: slotProps?.field,
-    additionalProps: _extends({
-      // Internal props
-      readOnly,
-      disabled,
-      format,
-      formatDensity,
-      enableAccessibleFieldDOMStructure,
-      selectedSections,
-      onSelectedSectionsChange,
-      timezone,
-      autoFocus: autoFocus && !props.open
-    }, pickerFieldProps, {
-      // onChange and value
-
-      // Forwarded props
-      className,
-      sx,
-      ref: fieldContainerRef
-    }, fieldType === 'single-input' && !!inputRef && {
-      inputRef
-    }, fieldType === 'single-input' && {
-      name
+  const _useSlotProps = useSlotProps({
+      elementType: Field,
+      externalSlotProps: slotProps?.field,
+      additionalProps: {
+        // Internal props
+        readOnly,
+        autoFocus: autoFocus && !props.open,
+        // Forwarded props
+        ref: fieldContainerRef
+      },
+      ownerState
     }),
-    ownerState
-  });
-  const enrichedFieldProps = useEnrichedRangePickerFieldProps({
+    fieldProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
+  const enrichedFieldResponse = useEnrichedRangePickerField(_extends({
     variant: 'desktop',
     fieldType,
-    open,
-    actions,
+    // These direct access to `providerProps` will go away once the range fields handle the picker opening
+    contextValue: providerProps.contextValue,
+    fieldPrivateContextValue: providerProps.fieldPrivateContextValue,
     readOnly,
     disableOpenPicker,
-    label,
     localeText,
     onBlur: handleBlur,
-    rangePosition,
-    onRangePositionChange,
     pickerSlotProps: slotProps,
     pickerSlots: slots,
     fieldProps,
-    anchorRef,
+    anchorRef: providerProps.contextValue.triggerRef,
     startFieldRef,
     endFieldRef,
-    currentView: layoutProps.view !== props.openTo ? layoutProps.view : undefined,
-    initialView: initialView.current ?? undefined,
-    onViewChange: layoutProps.onViewChange
-  });
-  const slotPropsForLayout = _extends({}, slotProps, {
-    tabs: _extends({}, slotProps?.tabs, {
-      rangePosition,
-      onRangePositionChange
-    }),
-    toolbar: _extends({}, slotProps?.toolbar, {
-      rangePosition,
-      onRangePositionChange
-    })
-  });
+    singleInputFieldRef,
+    currentView: providerProps.contextValue.view !== props.openTo ? providerProps.contextValue.view : undefined,
+    initialView: initialView.current ?? undefined
+  }, rangePositionResponse));
   const Layout = slots?.layout ?? PickersLayout;
-  const renderPicker = () => /*#__PURE__*/_jsxs(PickerProvider, _extends({}, providerProps, {
-    children: [/*#__PURE__*/_jsx(Field, _extends({}, enrichedFieldProps)), /*#__PURE__*/_jsx(PickersPopper, _extends({
-      role: "tooltip",
-      placement: "bottom-start",
-      containerRef: popperRef,
-      anchorEl: anchorRef.current,
-      onBlur: handleBlur
-    }, actions, {
-      open: open,
+  const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
+    // This override will go away once the range fields handle the picker opening
+    fieldPrivateContextValue: _extends({}, providerProps.fieldPrivateContextValue, enrichedFieldResponse.fieldPrivateContextValue),
+    children: /*#__PURE__*/_jsx(PickerFieldUIContextProvider, {
       slots: slots,
       slotProps: slotProps,
-      shouldRestoreFocus: shouldRestoreFocus,
-      reduceAnimations: reduceAnimations,
-      children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps?.layout, {
-        slots: slots,
-        slotProps: slotPropsForLayout,
-        children: renderCurrentView()
-      }))
-    }))]
+      inputRef: inputRef,
+      children: /*#__PURE__*/_jsxs(PickerRangePositionContext.Provider, {
+        value: rangePositionResponse,
+        children: [/*#__PURE__*/_jsx(Field, _extends({}, enrichedFieldResponse.fieldProps)), /*#__PURE__*/_jsx(PickerPopper, {
+          role: "tooltip",
+          containerRef: popperRef,
+          onBlur: handleBlur,
+          slots: slots,
+          slotProps: slotProps,
+          children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
+            slots: slots,
+            slotProps: slotProps,
+            children: renderCurrentView()
+          }))
+        })]
+      })
+    })
   }));
   return {
     renderPicker