@mui/x-date-pickers-pro 8.0.0-alpha.12 → 8.0.0-alpha.13

package/modern/internals/utils/createMultiInputRangeField/useTextFieldProps.d.ts

@@ -0,0 +1,12 @@
+import { PickersTextFieldProps } from '@mui/x-date-pickers/PickersTextField';
+import { FieldOwnerState } from '@mui/x-date-pickers/models';
+import { MultiInputRangeFieldSlotProps } from "./createMultiInputRangeField.types.js";
+export declare function useTextFieldProps({
+  slotProps,
+  ownerState,
+  position
+}: {
+  slotProps: MultiInputRangeFieldSlotProps | undefined;
+  ownerState: FieldOwnerState;
+  position: 'start' | 'end';
+}): PickersTextFieldProps;

package/modern/internals/utils/createMultiInputRangeField/useTextFieldProps.js

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useSlotProps from '@mui/utils/useSlotProps';
+import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
+import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
+import { PickerFieldUIContext, useNullablePickerContext, mergeSlotProps } from '@mui/x-date-pickers/internals';
+import { useNullablePickerRangePositionContext } from "../../hooks/useNullablePickerRangePositionContext.js";
+export function useTextFieldProps({
+  slotProps,
+  ownerState,
+  position
+}) {
+  const pickerContext = useNullablePickerContext();
+  const translations = usePickerTranslations();
+  const pickerFieldUIContext = React.useContext(PickerFieldUIContext);
+  const rangePositionContext = useNullablePickerRangePositionContext();
+  const textFieldProps = useSlotProps({
+    elementType: PickersTextField,
+    externalSlotProps: mergeSlotProps(pickerFieldUIContext.slotProps.textField, slotProps?.textField),
+    additionalProps: {
+      // TODO: Decide if we also want to set the default labels on standalone fields.
+      label: pickerContext ? translations[position] : undefined,
+      focused: pickerContext?.open ? rangePositionContext?.rangePosition === position : undefined
+    },
+    ownerState: _extends({}, ownerState, {
+      position
+    })
+  });
+  if (!textFieldProps.InputProps) {
+    textFieldProps.InputProps = {};
+  }
+  if (pickerContext && position === 'start') {
+    textFieldProps.InputProps.ref = pickerContext.triggerRef;
+  }
+  return textFieldProps;
+}

package/modern/internals/utils/date-fields-utils.d.ts

@@ -17,4 +17,7 @@ export declare const removeLastSeparator: (dateSections: FieldRangeSection[]) =>
   modified: boolean;
   startSeparator: string;
   endSeparator: string;
-})[];
+})[];
+export declare function getRangeFieldType(field: React.ElementType & {
+  fieldType?: 'single-input' | 'multi-input';
+}): "single-input" | "multi-input";

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

@@ -21,4 +21,8 @@ export const removeLastSeparator = dateSections => dateSections.map((section, se
     });
   }
   return section;
-});
+});
+export function getRangeFieldType(field) {
+  const fieldType = field.fieldType ?? 'multi-input';
+  return fieldType;
+}

package/modern/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTczOTc0NjgwMDAwMA==";
+  const releaseInfo = "MTc0MDY5NzIwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/modern/managers/useDateRangeManager.js

@@ -28,6 +28,13 @@ export function useDateRangeManager(parameters = {}) {
       internalProps
     })),
     // TODO v8: Add a real aria label before moving the opening logic to the field on range pickers.
-    internal_getOpenPickerButtonAriaLabel: () => ''
+    internal_getOpenPickerButtonAriaLabel: ({
+      value,
+      utils,
+      localeText
+    }) => {
+      const formattedValue = utils.isValid(value[0]) ? utils.format(value[0], 'fullDate') : null;
+      return localeText.openDatePickerDialogue(formattedValue);
+    }
   }), [enableAccessibleFieldDOMStructure, dateSeparator]);
 }

package/modern/managers/useDateTimeRangeManager.js

@@ -28,6 +28,13 @@ export function useDateTimeRangeManager(parameters = {}) {
       defaultDates
     })),
     // TODO v8: Add a real aria label before moving the opening logic to the field on range pickers.
-    internal_getOpenPickerButtonAriaLabel: () => ''
+    internal_getOpenPickerButtonAriaLabel: ({
+      value,
+      utils,
+      localeText
+    }) => {
+      const formattedValue = utils.isValid(value[0]) ? utils.format(value[0], 'fullDate') : null;
+      return localeText.openDatePickerDialogue(formattedValue);
+    }
   }), [enableAccessibleFieldDOMStructure, dateSeparator]);
 }

package/modern/managers/useTimeRangeManager.js

@@ -26,6 +26,15 @@ export function useTimeRangeManager(parameters = {}) {
       internalProps
     })),
     // TODO v8: Add a real aria label before moving the opening logic to the field on range pickers.
-    internal_getOpenPickerButtonAriaLabel: () => ''
+    internal_getOpenPickerButtonAriaLabel: ({
+      value,
+      utils,
+      localeText
+    }) => {
+      // TODO: Use ampm prop?
+      const ampm = utils.is12HourCycleInCurrentLocale();
+      const formattedValue = utils.isValid(value[0]) ? utils.format(value[0], ampm ? 'fullTime12h' : 'fullTime24h') : null;
+      return localeText.openTimePickerDialogue(formattedValue);
+    }
   }), [enableAccessibleFieldDOMStructure, dateSeparator]);
 }

package/modern/models/fields.d.ts

@@ -1,24 +1,16 @@
 import * as React from 'react';
-import { UseFieldResponse, FormProps, PickerValue, PickerRangeValue } from '@mui/x-date-pickers/internals';
+import { PickerValue, PickerRangeValue } from '@mui/x-date-pickers/internals';
 import { FieldRef, PickerFieldSlotProps } from '@mui/x-date-pickers/models';
+import type { UseMultiInputRangeFieldTextFieldProps } from '../hooks/useMultiInputRangeField';
 export type { FieldRangeSection } from '@mui/x-date-pickers/internals';
 export type FieldType = 'single-input' | 'multi-input';
 /**
  * Props the `textField` slot of the multi input field can receive when used inside a picker.
  */
-export interface MultiInputFieldSlotTextFieldProps extends FormProps {
+export type MultiInputFieldSlotTextFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = UseMultiInputRangeFieldTextFieldProps<TEnableAccessibleFieldDOMStructure, {
   label?: React.ReactNode;
-  id?: string;
-  onKeyDown?: React.KeyboardEventHandler;
-  onClick?: React.MouseEventHandler;
-  onFocus?: React.FocusEventHandler;
   focused?: boolean;
-  InputProps?: {
-    ref?: React.Ref<any>;
-    endAdornment?: React.ReactNode;
-    startAdornment?: React.ReactNode;
-  };
-}
+}>;
 /**
  * Props the `root` slot of the multi input field can receive when used inside a picker.
  */
@@ -39,9 +31,4 @@ export interface RangeFieldSeparatorProps {
 /**
  * Props the `slotProps.field` of a range picker component can receive.
  */
-export type PickerRangeFieldSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> = PickerFieldSlotProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure> & RangeFieldSeparatorProps;
-/**
- * Props the text field receives when used with a multi input picker.
- * Only contains what the MUI components are passing to the text field, not what users can pass using the `props.slotProps.textField`.
- */
-export type BaseMultiInputPickersTextFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> = Omit<UseFieldResponse<TEnableAccessibleFieldDOMStructure, MultiInputFieldSlotTextFieldProps>, 'slots' | 'slotProps' | 'clearable' | 'onClear' | 'openPickerButtonPosition' | 'clearButtonPosition' | 'openPickerAriaLabel'>;
+export type PickerRangeFieldSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> = PickerFieldSlotProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure> & RangeFieldSeparatorProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers-pro",
-  "version": "8.0.0-alpha.12",
+  "version": "8.0.0-alpha.13",
   "description": "The Pro plan edition of the Date and Time Picker components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -37,9 +37,9 @@
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
-    "@mui/x-date-pickers": "8.0.0-alpha.12",
-    "@mui/x-internals": "8.0.0-alpha.12",
-    "@mui/x-license": "8.0.0-alpha.12"
+    "@mui/x-date-pickers": "8.0.0-alpha.13",
+    "@mui/x-license": "8.0.0-alpha.13",
+    "@mui/x-internals": "8.0.0-alpha.13"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",