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

package/internals/utils/createMultiInputRangeField/createMultiInputRangeField.types.d.ts

@@ -5,68 +5,69 @@ import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { PickersTextFieldProps } from '@mui/x-date-pickers/PickersTextField';
 import { FieldOwnerState } from '@mui/x-date-pickers/models';
 import { PickerManagerEnableAccessibleFieldDOMStructure, PickerManagerFieldInternalProps } from '@mui/x-date-pickers/internals';
-import { FieldType, MultiInputFieldRefs, RangeFieldSeparatorProps, RangePosition } from '../../../models';
-import { PickerAnyRangeManager } from '../../models/managers';
-export type MultiInputRangeFieldProps<TManager extends PickerAnyRangeManager> = MultiInputFieldRefs & RangeFieldSeparatorProps & Omit<PickerManagerFieldInternalProps<TManager>, 'unstableFieldRef' | 'clearable' | 'onClear'> & Omit<StackProps, 'position' | keyof PickerManagerFieldInternalProps<TManager>> & {
-    /**
-     * If `true`, the field is focused during the first mount.
-     * @default false
-     */
-    autoFocus?: boolean;
-    className?: string;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<MultiInputRangeFieldClasses>;
-    /**
-     * Overridable component slots.
-     * @default {}
-     */
-    slots?: MultiInputRangeFieldSlots;
-    /**
-     * The props used for each component slot.
-     * @default {}
-     */
-    slotProps?: MultiInputRangeFieldSlotProps;
+import { FieldType, MultiInputFieldRefs, RangeFieldSeparatorProps, RangePosition } from "../../../models/index.js";
+import { PickerAnyRangeManager } from "../../models/managers.js";
+export type MultiInputRangeFieldProps<TManager extends PickerAnyRangeManager> = MultiInputFieldRefs & RangeFieldSeparatorProps & Omit<PickerManagerFieldInternalProps<TManager>, 'unstableFieldRef' | 'clearable' | 'onClear' | 'focused'> & Omit<StackProps, 'position' | keyof PickerManagerFieldInternalProps<TManager>> & {
+  /**
+   * If `true`, the field is focused during the first mount.
+   * @default false
+   */
+  autoFocus?: boolean;
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<MultiInputRangeFieldClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: MultiInputRangeFieldSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: MultiInputRangeFieldSlotProps;
 };
 export interface MultiInputRangeFieldSlots {
-    /**
-     * Element rendered at the root.
-     * @default MultiInputRangeFieldRoot
-     */
-    root?: React.ElementType;
-    /**
-     * Form control with an input to render a date.
-     * It is rendered twice: once for the start date and once for the end date.
-     * @default <PickersTextField />, or <TextField /> from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`.
-     */
-    textField?: React.ElementType;
-    /**
-     * Element rendered between the two inputs.
-     * @default MultiInputRangeFieldSeparator
-     */
-    separator?: React.ElementType;
+  /**
+   * Element rendered at the root.
+   * @default MultiInputRangeFieldRoot
+   */
+  root?: React.ElementType;
+  /**
+   * Form control with an input to render a date.
+   * It is rendered twice: once for the start date and once for the end date.
+   * @default <PickersTextField />, or <TextField /> from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`.
+   */
+  textField?: React.ElementType;
+  /**
+   * Element rendered between the two inputs.
+   * @default MultiInputRangeFieldSeparator
+   */
+  separator?: React.ElementType;
 }
 export interface MultiInputRangeFieldSlotProps {
-    root?: SlotComponentPropsFromProps<StackProps, {}, FieldOwnerState>;
-    textField?: SlotComponentPropsFromProps<PickersTextFieldProps | TextFieldProps, {}, FieldOwnerState & {
-        position: RangePosition;
-    }>;
-    separator?: SlotComponentPropsFromProps<TypographyProps, {}, FieldOwnerState>;
+  root?: SlotComponentPropsFromProps<StackProps, {}, FieldOwnerState>;
+  textField?: SlotComponentPropsFromProps<PickersTextFieldProps | TextFieldProps, {}, FieldOwnerState & {
+    position: RangePosition;
+  }>;
+  separator?: SlotComponentPropsFromProps<TypographyProps, {}, FieldOwnerState>;
 }
 export interface MultiInputRangeFieldClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the separator element. */
-    separator: string;
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the separator element. */
+  separator: string;
 }
 export interface CreateMultiInputRangeFieldParameters<TManager extends PickerAnyRangeManager> {
-    name: string;
-    getUtilityClass: (slot: string) => string;
-    useManager: (params: RangeFieldSeparatorProps & {
-        enableAccessibleFieldDOMStructure: PickerManagerEnableAccessibleFieldDOMStructure<TManager>;
-    }) => TManager;
+  name: string;
+  getUtilityClass: (slot: string) => string;
+  useManager: (params: RangeFieldSeparatorProps & {
+    enableAccessibleFieldDOMStructure: PickerManagerEnableAccessibleFieldDOMStructure<TManager>;
+  }) => TManager;
+  allowTriggerShifting?: boolean;
 }
 export type CreateMultiInputRangeFieldReturnValue<TManager extends PickerAnyRangeManager> = ((props: MultiInputRangeFieldProps<TManager> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
-    fieldType?: FieldType;
-};
+  fieldType?: FieldType;
+};

package/internals/utils/createMultiInputRangeField/createMultiInputRangeField.types.js

@@ -1 +1,5 @@
-export {};
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/internals/utils/createMultiInputRangeField/index.d.ts

@@ -1,3 +1,3 @@
-export { createMultiInputRangeField } from './createMultiInputRangeField';
-export type { MultiInputRangeFieldProps, MultiInputRangeFieldSlots, MultiInputRangeFieldSlotProps, MultiInputRangeFieldClasses, } from './createMultiInputRangeField.types';
-export { useMultiInputRangeField as unstable_useMultiInputRangeField } from '../../../hooks/useMultiInputRangeField/useMultiInputRangeField';
+export { createMultiInputRangeField } from "./createMultiInputRangeField.js";
+export type { MultiInputRangeFieldProps, MultiInputRangeFieldSlots, MultiInputRangeFieldSlotProps, MultiInputRangeFieldClasses } from './createMultiInputRangeField.types';
+export { useMultiInputRangeField as unstable_useMultiInputRangeField } from "../../../hooks/useMultiInputRangeField/useMultiInputRangeField.js";

package/internals/utils/createMultiInputRangeField/index.js

@@ -1,2 +1,19 @@
-export { createMultiInputRangeField } from "./createMultiInputRangeField.js";
-export { useMultiInputRangeField as unstable_useMultiInputRangeField } from "../../../hooks/useMultiInputRangeField/useMultiInputRangeField.js";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "createMultiInputRangeField", {
+  enumerable: true,
+  get: function () {
+    return _createMultiInputRangeField.createMultiInputRangeField;
+  }
+});
+Object.defineProperty(exports, "unstable_useMultiInputRangeField", {
+  enumerable: true,
+  get: function () {
+    return _useMultiInputRangeField.useMultiInputRangeField;
+  }
+});
+var _createMultiInputRangeField = require("./createMultiInputRangeField");
+var _useMultiInputRangeField = require("../../../hooks/useMultiInputRangeField/useMultiInputRangeField");

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

@@ -0,0 +1,14 @@
+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,
+  allowTriggerShifting
+}: {
+  slotProps: MultiInputRangeFieldSlotProps | undefined;
+  ownerState: FieldOwnerState;
+  position: 'start' | 'end';
+  allowTriggerShifting?: boolean;
+}): PickersTextFieldProps;

package/internals/utils/createMultiInputRangeField/useTextFieldProps.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTextFieldProps = useTextFieldProps;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
+var _PickersTextField = require("@mui/x-date-pickers/PickersTextField");
+var _hooks = require("@mui/x-date-pickers/hooks");
+var _internals = require("@mui/x-date-pickers/internals");
+var _useNullablePickerRangePositionContext = require("../../hooks/useNullablePickerRangePositionContext");
+function useTextFieldProps({
+  slotProps,
+  ownerState,
+  position,
+  allowTriggerShifting
+}) {
+  const pickerContext = (0, _internals.useNullablePickerContext)();
+  const translations = (0, _hooks.usePickerTranslations)();
+  const pickerFieldUIContext = React.useContext(_internals.PickerFieldUIContext);
+  const rangePositionContext = (0, _useNullablePickerRangePositionContext.useNullablePickerRangePositionContext)();
+  const textFieldProps = (0, _useSlotProps.default)({
+    elementType: _PickersTextField.PickersTextField,
+    externalSlotProps: (0, _internals.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: (0, _extends2.default)({}, ownerState, {
+      position
+    })
+  });
+  if (!textFieldProps.InputProps) {
+    textFieldProps.InputProps = {};
+  }
+  if (pickerContext) {
+    if (!allowTriggerShifting) {
+      if (position === 'start') {
+        textFieldProps.InputProps.ref = pickerContext.triggerRef;
+      }
+    } else if (rangePositionContext?.rangePosition === position) {
+      textFieldProps.InputProps.ref = pickerContext.triggerRef;
+    }
+  }
+  return textFieldProps;
+}

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

@@ -1,20 +1,23 @@
 import { FieldRangeSection } from '@mui/x-date-pickers/internals';
 export declare const splitDateRangeSections: (sections: FieldRangeSection[]) => {
-    startDate: FieldRangeSection[];
-    endDate: FieldRangeSection[];
+  startDate: FieldRangeSection[];
+  endDate: FieldRangeSection[];
 };
 export declare const removeLastSeparator: (dateSections: FieldRangeSection[]) => (FieldRangeSection | {
-    separator: null;
-    dateName: import("@mui/x-date-pickers/internals").RangePosition;
-    value: string;
-    format: string;
-    maxLength: number | null;
-    placeholder: string;
-    type: import("@mui/x-date-pickers").FieldSectionType;
-    contentType: import("@mui/x-date-pickers").FieldSectionContentType;
-    hasLeadingZerosInFormat: boolean;
-    hasLeadingZerosInInput: boolean;
-    modified: boolean;
-    startSeparator: string;
-    endSeparator: string;
+  separator: null;
+  dateName: import("@mui/x-date-pickers/internals").RangePosition;
+  value: string;
+  format: string;
+  maxLength: number | null;
+  placeholder: string;
+  type: import("@mui/x-date-pickers").FieldSectionType;
+  contentType: import("@mui/x-date-pickers").FieldSectionContentType;
+  hasLeadingZerosInFormat: boolean;
+  hasLeadingZerosInInput: boolean;
+  modified: boolean;
+  startSeparator: string;
+  endSeparator: string;
 })[];
+export declare function getRangeFieldType(field: React.ElementType & {
+  fieldType?: 'single-input' | 'multi-input';
+}): "single-input" | "multi-input";

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

@@ -1,5 +1,13 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-export const splitDateRangeSections = sections => {
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getRangeFieldType = getRangeFieldType;
+exports.splitDateRangeSections = exports.removeLastSeparator = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+const splitDateRangeSections = sections => {
   const startDateSections = [];
   const endDateSections = [];
   sections.forEach(section => {
@@ -14,11 +22,17 @@ export const splitDateRangeSections = sections => {
     endDate: endDateSections
   };
 };
-export const removeLastSeparator = dateSections => dateSections.map((section, sectionIndex) => {
+exports.splitDateRangeSections = splitDateRangeSections;
+const removeLastSeparator = dateSections => dateSections.map((section, sectionIndex) => {
   if (sectionIndex === dateSections.length - 1) {
-    return _extends({}, section, {
+    return (0, _extends2.default)({}, section, {
       separator: null
     });
   }
   return section;
-});
+});
+exports.removeLastSeparator = removeLastSeparator;
+function getRangeFieldType(field) {
+  const fieldType = field.fieldType ?? 'multi-input';
+  return fieldType;
+}

package/internals/utils/date-range-manager.d.ts

@@ -1,24 +1,32 @@
 import { MuiPickersAdapter, PickerValidDate } from '@mui/x-date-pickers/models';
 import { PickerRangeValue } from '@mui/x-date-pickers/internals';
-import { RangePosition } from '../../models';
+import { RangePosition } from "../../models/index.js";
 interface CalculateRangeChangeOptions {
-    utils: MuiPickersAdapter;
-    range: PickerRangeValue;
-    newDate: PickerValidDate | null;
-    rangePosition: RangePosition;
-    /**
-     * Should allow flipping range `start` and `end` dates if the `newDate` would result in a new range creation.
-     *
-     * It is used to allow dragging range `start` date past `end` date essentially becoming the new `end` date and vice versa.
-     */
-    allowRangeFlip?: boolean;
-    shouldMergeDateAndTime?: boolean;
-    referenceDate?: PickerValidDate;
+  utils: MuiPickersAdapter;
+  range: PickerRangeValue;
+  newDate: PickerValidDate | null;
+  rangePosition: RangePosition;
+  /**
+   * Should allow flipping range `start` and `end` dates if the `newDate` would result in a new range creation.
+   *
+   * It is used to allow dragging range `start` date past `end` date essentially becoming the new `end` date and vice versa.
+   */
+  allowRangeFlip?: boolean;
+  shouldMergeDateAndTime?: boolean;
+  referenceDate?: PickerValidDate;
 }
 interface CalculateRangeChangeResponse {
-    nextSelection: RangePosition;
-    newRange: PickerRangeValue;
+  nextSelection: RangePosition;
+  newRange: PickerRangeValue;
 }
-export declare function calculateRangeChange({ utils, range, newDate: selectedDate, rangePosition, allowRangeFlip, shouldMergeDateAndTime, referenceDate, }: CalculateRangeChangeOptions): CalculateRangeChangeResponse;
+export declare function calculateRangeChange({
+  utils,
+  range,
+  newDate: selectedDate,
+  rangePosition,
+  allowRangeFlip,
+  shouldMergeDateAndTime,
+  referenceDate
+}: CalculateRangeChangeOptions): CalculateRangeChangeResponse;
 export declare function calculateRangePreview(options: CalculateRangeChangeOptions): PickerRangeValue;
-export {};
+export {};

package/internals/utils/date-range-manager.js

@@ -1,5 +1,12 @@
-import { mergeDateAndTime } from '@mui/x-date-pickers/internals';
-export function calculateRangeChange({
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.calculateRangeChange = calculateRangeChange;
+exports.calculateRangePreview = calculateRangePreview;
+var _internals = require("@mui/x-date-pickers/internals");
+function calculateRangeChange({
   utils,
   range,
   newDate: selectedDate,
@@ -13,13 +20,13 @@ export function calculateRangeChange({
   if (shouldMergeDateAndTime && selectedDate) {
     // If there is a date already selected, then we want to keep its time
     if (start && rangePosition === 'start') {
-      selectedDate = mergeDateAndTime(utils, selectedDate, start);
+      selectedDate = (0, _internals.mergeDateAndTime)(utils, selectedDate, start);
     }
     if (end && rangePosition === 'end') {
-      selectedDate = mergeDateAndTime(utils, selectedDate, end);
+      selectedDate = (0, _internals.mergeDateAndTime)(utils, selectedDate, end);
     }
   }
-  const newSelectedDate = referenceDate && selectedDate && shouldMergeDateAndTime ? mergeDateAndTime(utils, selectedDate, referenceDate) : selectedDate;
+  const newSelectedDate = referenceDate && selectedDate && shouldMergeDateAndTime ? (0, _internals.mergeDateAndTime)(utils, selectedDate, referenceDate) : selectedDate;
   if (rangePosition === 'start') {
     const truthyResult = allowRangeFlip ? {
       nextSelection: 'start',
@@ -45,7 +52,7 @@ export function calculateRangeChange({
     newRange: [start, newSelectedDate]
   };
 }
-export function calculateRangePreview(options) {
+function calculateRangePreview(options) {
   if (options.newDate == null) {
     return [null, null];
   }

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

@@ -1,6 +1,7 @@
-import { MuiPickersAdapter, PickerValidDate } from '@mui/x-date-pickers/models';
-import { PickerRangeValue } from '@mui/x-date-pickers/internals';
-export declare const isRangeValid: (utils: MuiPickersAdapter, range: PickerRangeValue | null) => range is [PickerValidDate, PickerValidDate];
-export declare const isWithinRange: (utils: MuiPickersAdapter, day: PickerValidDate, range: PickerRangeValue | null) => boolean;
-export declare const isStartOfRange: (utils: MuiPickersAdapter, day: PickerValidDate, range: PickerRangeValue | null) => boolean;
-export declare const isEndOfRange: (utils: MuiPickersAdapter, day: PickerValidDate, range: PickerRangeValue | null) => boolean;
+import { AdapterFormats, MuiPickersAdapter, PickerValidDate } from '@mui/x-date-pickers/models';
+import { PickerNonNullableRangeValue, PickerRangeValue } from '@mui/x-date-pickers/internals';
+export declare const isRangeValid: (utils: MuiPickersAdapter, range: PickerRangeValue) => range is PickerNonNullableRangeValue;
+export declare const isWithinRange: (utils: MuiPickersAdapter, day: PickerValidDate, range: PickerRangeValue) => boolean;
+export declare const isStartOfRange: (utils: MuiPickersAdapter, day: PickerValidDate, range: PickerRangeValue) => boolean;
+export declare const isEndOfRange: (utils: MuiPickersAdapter, day: PickerValidDate, range: PickerRangeValue) => boolean;
+export declare const formatRange: (utils: MuiPickersAdapter, range: PickerRangeValue, formatKey: keyof AdapterFormats) => string | null;

package/internals/utils/date-utils.js

@@ -1,12 +1,29 @@
-export const isRangeValid = (utils, range) => {
-  return Boolean(range && range[0] && range[1] && !utils.isBefore(range[1], range[0]));
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isWithinRange = exports.isStartOfRange = exports.isRangeValid = exports.isEndOfRange = exports.formatRange = void 0;
+const isRangeValid = (utils, range) => {
+  return utils.isValid(range[0]) && utils.isValid(range[1]) && !utils.isBefore(range[1], range[0]);
 };
-export const isWithinRange = (utils, day, range) => {
+exports.isRangeValid = isRangeValid;
+const isWithinRange = (utils, day, range) => {
   return isRangeValid(utils, range) && utils.isWithinRange(day, range);
 };
-export const isStartOfRange = (utils, day, range) => {
+exports.isWithinRange = isWithinRange;
+const isStartOfRange = (utils, day, range) => {
   return isRangeValid(utils, range) && utils.isSameDay(day, range[0]);
 };
-export const isEndOfRange = (utils, day, range) => {
+exports.isStartOfRange = isStartOfRange;
+const isEndOfRange = (utils, day, range) => {
   return isRangeValid(utils, range) && utils.isSameDay(day, range[1]);
-};
+};
+exports.isEndOfRange = isEndOfRange;
+const formatRange = (utils, range, formatKey) => {
+  if (!isRangeValid(utils, range)) {
+    return null;
+  }
+  return `${utils.format(range[0], formatKey)} - ${utils.format(range[1], formatKey)}`;
+};
+exports.formatRange = formatRange;

package/internals/utils/releaseInfo.d.ts

@@ -1 +1 @@
-export declare const getReleaseInfo: () => any;
+export declare const getReleaseInfo: () => any;

package/internals/utils/releaseInfo.js

@@ -1,13 +1,20 @@
-import { ponyfillGlobal } from '@mui/utils';
-export const getReleaseInfo = () => {
-  const releaseInfo = "MTczNzY1ODgwMDAwMA==";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getReleaseInfo = void 0;
+var _utils = require("@mui/utils");
+const getReleaseInfo = () => {
+  const releaseInfo = "MTc0MjUxNTIwMDAwMA==";
   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
     if (releaseInfo === '__RELEASE' + '_INFO__') {
       // eslint-disable-next-line no-underscore-dangle
-      return ponyfillGlobal.__MUI_RELEASE_INFO__;
+      return _utils.ponyfillGlobal.__MUI_RELEASE_INFO__;
     }
   }
   return releaseInfo;
-};
+};
+exports.getReleaseInfo = getReleaseInfo;

package/internals/utils/valueManagers.d.ts

@@ -2,7 +2,9 @@ import { PickerValueManager, FieldValueManager, PickerRangeValue } from '@mui/x-
 import type { DateRangeValidationError, DateTimeRangeValidationError, TimeRangeValidationError } from '../../models';
 type RangePickerValueManager<TError extends DateRangeValidationError | TimeRangeValidationError | DateTimeRangeValidationError = any> = PickerValueManager<PickerRangeValue, TError>;
 export declare const rangeValueManager: RangePickerValueManager;
-export declare const getRangeFieldValueManager: ({ dateSeparator, }: {
-    dateSeparator: string | undefined;
+export declare const getRangeFieldValueManager: ({
+  dateSeparator
+}: {
+  dateSeparator: string | undefined;
 }) => FieldValueManager<PickerRangeValue>;
-export {};
+export {};