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

package/{node → esm}/MultiInputTimeRangeField/MultiInputTimeRangeField.js

@@ -1,15 +1,11 @@
-"use strict";
 'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.MultiInputTimeRangeField = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _managers = require("../managers");
-var _createMultiInputRangeField = require("../internals/utils/createMultiInputRangeField");
-var _multiInputTimeRangeFieldClasses = require("./multiInputTimeRangeFieldClasses");
+import PropTypes from 'prop-types';
+import { useTimeRangeManager } from "../managers/index.js";
+import {
+// The alias is needed to have the doc gen working.
+createMultiInputRangeField as createMultiInputTimeRangeField } from "../internals/utils/createMultiInputRangeField/index.js";
+import { getMultiInputTimeRangeFieldUtilityClass } from "./multiInputTimeRangeFieldClasses.js";
 /**
  * Demos:
  *
@@ -20,10 +16,11 @@ var _multiInputTimeRangeFieldClasses = require("./multiInputTimeRangeFieldClasse
  *
  * - [MultiInputTimeRangeField API](https://mui.com/x/api/multi-input-time-range-field/)
  */
-const MultiInputTimeRangeField = exports.MultiInputTimeRangeField = (0, _createMultiInputRangeField.createMultiInputRangeField)({
+const MultiInputTimeRangeField = createMultiInputTimeRangeField({
   name: 'MuiMultiInputTimeRangeField',
-  getUtilityClass: _multiInputTimeRangeFieldClasses.getMultiInputTimeRangeFieldUtilityClass,
-  useManager: _managers.useTimeRangeManager
+  getUtilityClass: getMultiInputTimeRangeFieldUtilityClass,
+  useManager: useTimeRangeManager,
+  allowTriggerShifting: true
 });
 MultiInputTimeRangeField.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -34,87 +31,87 @@ MultiInputTimeRangeField.propTypes = {
    * 12h/24h view for hour selection clock.
    * @default utils.is12HourCycleInCurrentLocale()
    */
-  ampm: _propTypes.default.bool,
+  ampm: PropTypes.bool,
   /**
    * If `true`, the `input` element is focused during the first mount.
    * @default false
    */
-  autoFocus: _propTypes.default.bool,
+  autoFocus: PropTypes.bool,
   /**
    * Override or extend the styles applied to the component.
    */
-  classes: _propTypes.default.object,
-  className: _propTypes.default.string,
-  component: _propTypes.default.elementType,
+  classes: PropTypes.object,
+  className: PropTypes.string,
+  component: PropTypes.elementType,
   /**
    * String displayed between the start and the end dates.
    * @default "–"
    */
-  dateSeparator: _propTypes.default.string,
+  dateSeparator: PropTypes.string,
   /**
    * The default value. Use when the component is not controlled.
    */
-  defaultValue: _propTypes.default.arrayOf(_propTypes.default.object),
+  defaultValue: PropTypes.arrayOf(PropTypes.object),
   /**
    * Defines the `flex-direction` style property.
    * It is applied for all screen sizes.
    * @default 'column'
    */
-  direction: _propTypes.default.oneOfType([_propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), _propTypes.default.arrayOf(_propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), _propTypes.default.object]),
+  direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
   /**
    * If `true`, the component is disabled.
    * When disabled, the value cannot be changed and no interaction is possible.
    * @default false
    */
-  disabled: _propTypes.default.bool,
+  disabled: PropTypes.bool,
   /**
    * If `true`, disable values after the current date for date components, time for time components and both for date time components.
    * @default false
    */
-  disableFuture: _propTypes.default.bool,
+  disableFuture: PropTypes.bool,
   /**
    * Do not ignore date part when validating min/max time.
    * @default false
    */
-  disableIgnoringDatePartForTimeValidation: _propTypes.default.bool,
+  disableIgnoringDatePartForTimeValidation: PropTypes.bool,
   /**
    * If `true`, disable values before the current date for date components, time for time components and both for date time components.
    * @default false
    */
-  disablePast: _propTypes.default.bool,
+  disablePast: PropTypes.bool,
   /**
    * Add an element between each child.
    */
-  divider: _propTypes.default.node,
+  divider: PropTypes.node,
   /**
    * @default true
    */
-  enableAccessibleFieldDOMStructure: _propTypes.default.bool,
+  enableAccessibleFieldDOMStructure: PropTypes.bool,
   /**
    * Format of the date when rendered in the input(s).
    */
-  format: _propTypes.default.string,
+  format: PropTypes.string,
   /**
    * Density of the format when rendered in the input.
    * Setting `formatDensity` to `"spacious"` will add a space before and after each `/`, `-` and `.` character.
    * @default "dense"
    */
-  formatDensity: _propTypes.default.oneOf(['dense', 'spacious']),
+  formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Maximal selectable time.
    * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
    */
-  maxTime: _propTypes.default.object,
+  maxTime: PropTypes.object,
   /**
    * Minimal selectable time.
    * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
    */
-  minTime: _propTypes.default.object,
+  minTime: PropTypes.object,
   /**
    * Step over minutes.
    * @default 1
    */
-  minutesStep: _propTypes.default.number,
+  minutesStep: PropTypes.number,
   /**
    * Callback fired when the value changes.
    * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
@@ -122,7 +119,7 @@ MultiInputTimeRangeField.propTypes = {
    * @param {TValue} value The new value.
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
-  onChange: _propTypes.default.func,
+  onChange: PropTypes.func,
   /**
    * Callback fired when the error associated with the current value changes.
    * When a validation error is detected, the `error` parameter contains a non-null value.
@@ -132,24 +129,24 @@ MultiInputTimeRangeField.propTypes = {
    * @param {TError} error The reason why the current value is not valid.
    * @param {TValue} value The value associated with the error.
    */
-  onError: _propTypes.default.func,
+  onError: PropTypes.func,
   /**
    * Callback fired when the selected sections change.
    * @param {FieldSelectedSections} newValue The new selected sections.
    */
-  onSelectedSectionsChange: _propTypes.default.func,
+  onSelectedSectionsChange: PropTypes.func,
   /**
    * If `true`, the component is read-only.
    * When read-only, the value cannot be changed but the user can interact with the interface.
    * @default false
    */
-  readOnly: _propTypes.default.bool,
+  readOnly: PropTypes.bool,
   /**
    * The date used to generate a part of the new value that is not present in the format when both `value` and `defaultValue` are empty.
    * For example, on time fields it will be used to determine the date to set.
    * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
    */
-  referenceDate: _propTypes.default.object,
+  referenceDate: PropTypes.object,
   /**
    * The currently selected sections.
    * This prop accepts four formats:
@@ -159,14 +156,14 @@ MultiInputTimeRangeField.propTypes = {
    * 4. If `null` is provided, no section will be selected.
    * If not provided, the selected sections will be handled internally.
    */
-  selectedSections: _propTypes.default.oneOfType([_propTypes.default.oneOf(['all', 'day', 'empty', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), _propTypes.default.number]),
+  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'empty', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number]),
   /**
    * Disable specific time.
    * @param {PickerValidDate} value The value to check.
    * @param {TimeView} view The clock type of the timeValue.
    * @returns {boolean} If `true` the time will be disabled.
    */
-  shouldDisableTime: _propTypes.default.func,
+  shouldDisableTime: PropTypes.func,
   /**
    * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
    * If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
@@ -181,27 +178,27 @@ MultiInputTimeRangeField.propTypes = {
    *
    * @default false
    */
-  shouldRespectLeadingZeros: _propTypes.default.bool,
+  shouldRespectLeadingZeros: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}
    */
-  slotProps: _propTypes.default.object,
+  slotProps: PropTypes.object,
   /**
    * Overridable component slots.
    * @default {}
    */
-  slots: _propTypes.default.object,
+  slots: PropTypes.object,
   /**
    * Defines the space between immediate children.
    * @default 0
    */
-  spacing: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.string]),
-  style: _propTypes.default.object,
+  spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+  style: PropTypes.object,
   /**
    * The system prop, which allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   /**
    * Choose which timezone to use for the value.
    * Example: "default", "system", "UTC", "America/New_York".
@@ -209,9 +206,9 @@ MultiInputTimeRangeField.propTypes = {
    * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documentation} for more details.
    * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
    */
-  timezone: _propTypes.default.string,
-  unstableEndFieldRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
-  unstableStartFieldRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  timezone: PropTypes.string,
+  unstableEndFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  unstableStartFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
    *
@@ -221,10 +218,11 @@ MultiInputTimeRangeField.propTypes = {
    * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.
    * @default false
    */
-  useFlexGap: _propTypes.default.bool,
+  useFlexGap: PropTypes.bool,
   /**
    * The selected value.
    * Used when the component is controlled.
    */
-  value: _propTypes.default.arrayOf(_propTypes.default.object)
-};
+  value: PropTypes.arrayOf(PropTypes.object)
+};
+export { MultiInputTimeRangeField };

package/esm/MultiInputTimeRangeField/index.d.ts

@@ -0,0 +1,5 @@
+export { MultiInputTimeRangeField } from "./MultiInputTimeRangeField.js";
+export type { MultiInputTimeRangeFieldProps } from './MultiInputTimeRangeField';
+export { multiInputTimeRangeFieldClasses, getMultiInputTimeRangeFieldUtilityClass } from "./multiInputTimeRangeFieldClasses.js";
+export type { MultiInputTimeRangeFieldClassKey, MultiInputTimeRangeFieldClasses } from './multiInputTimeRangeFieldClasses';
+export type { MultiInputRangeFieldSlots as MultiInputTimeRangeFieldSlots, MultiInputRangeFieldSlotProps as MultiInputTimeRangeFieldSlotProps } from '../internals/utils/createMultiInputRangeField';

package/esm/MultiInputTimeRangeField/index.js

@@ -0,0 +1,2 @@
+export { MultiInputTimeRangeField } from "./MultiInputTimeRangeField.js";
+export { multiInputTimeRangeFieldClasses, getMultiInputTimeRangeFieldUtilityClass } from "./multiInputTimeRangeFieldClasses.js";

package/esm/MultiInputTimeRangeField/multiInputTimeRangeFieldClasses.d.ts

@@ -0,0 +1,5 @@
+import { MultiInputRangeFieldClasses } from "../internals/utils/createMultiInputRangeField/index.js";
+export interface MultiInputTimeRangeFieldClasses extends MultiInputRangeFieldClasses {}
+export type MultiInputTimeRangeFieldClassKey = keyof MultiInputRangeFieldClasses;
+export declare const multiInputTimeRangeFieldClasses: MultiInputRangeFieldClasses;
+export declare const getMultiInputTimeRangeFieldUtilityClass: (slot: string) => string;

package/esm/MultiInputTimeRangeField/multiInputTimeRangeFieldClasses.js

@@ -0,0 +1,4 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export const multiInputTimeRangeFieldClasses = generateUtilityClasses('MuiMultiInputTimeRangeField', ['root', 'separator']);
+export const getMultiInputTimeRangeFieldUtilityClass = slot => generateUtilityClass('MuiMultiInputTimeRangeField', slot);

package/esm/PickersRangeCalendarHeader/PickersRangeCalendarHeader.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { PickersRangeCalendarHeaderProps } from "./PickersRangeCalendarHeader.types.js";
+type PickersRangeCalendarHeaderComponent = ((props: PickersRangeCalendarHeaderProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+  propTypes?: any;
+};
+declare const PickersRangeCalendarHeader: PickersRangeCalendarHeaderComponent;
+export { PickersRangeCalendarHeader };

package/esm/PickersRangeCalendarHeader/PickersRangeCalendarHeader.js

@@ -0,0 +1,137 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["calendars", "month", "monthIndex", "labelId"],
+  _excluded2 = ["format", "slots", "slotProps", "currentMonth", "onMonthChange", "disableFuture", "disablePast", "minDate", "maxDate", "timezone", "reduceAnimations", "views", "view"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import { PickersCalendarHeader } from '@mui/x-date-pickers/PickersCalendarHeader';
+import { PickersArrowSwitcher, useNextMonthDisabled, usePreviousMonthDisabled, useUtils } from '@mui/x-date-pickers/internals';
+import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
+import { jsx as _jsx } from "react/jsx-runtime";
+const PickersRangeCalendarHeaderContentMultipleCalendars = styled(PickersArrowSwitcher)({
+  padding: '12px 16px 4px 16px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between'
+});
+const PickersRangeCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersRangeCalendarHeader(props, ref) {
+  const utils = useUtils();
+  const translations = usePickerTranslations();
+  const {
+      calendars,
+      month,
+      monthIndex,
+      labelId
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+      format,
+      slots,
+      slotProps,
+      currentMonth,
+      onMonthChange,
+      disableFuture,
+      disablePast,
+      minDate,
+      maxDate,
+      timezone
+      // omit props that are not used in the PickersArrowSwitcher
+    } = other,
+    otherRangeProps = _objectWithoutPropertiesLoose(other, _excluded2);
+  const isNextMonthDisabled = useNextMonthDisabled(currentMonth, {
+    disableFuture,
+    maxDate,
+    timezone
+  });
+  const isPreviousMonthDisabled = usePreviousMonthDisabled(currentMonth, {
+    disablePast,
+    minDate,
+    timezone
+  });
+  if (calendars === 1) {
+    return /*#__PURE__*/_jsx(PickersCalendarHeader, _extends({}, other, {
+      labelId: labelId,
+      ref: ref
+    }));
+  }
+  const selectNextMonth = () => onMonthChange(utils.addMonths(currentMonth, 1));
+  const selectPreviousMonth = () => onMonthChange(utils.addMonths(currentMonth, -1));
+  return /*#__PURE__*/_jsx(PickersRangeCalendarHeaderContentMultipleCalendars, _extends({}, otherRangeProps, {
+    ref: ref,
+    onGoToPrevious: selectPreviousMonth,
+    onGoToNext: selectNextMonth,
+    isPreviousHidden: monthIndex !== 0,
+    isPreviousDisabled: isPreviousMonthDisabled,
+    previousLabel: translations.previousMonth,
+    isNextHidden: monthIndex !== calendars - 1,
+    isNextDisabled: isNextMonthDisabled,
+    nextLabel: translations.nextMonth,
+    slots: slots,
+    slotProps: slotProps,
+    labelId: labelId,
+    children: utils.formatByString(month, format ?? `${utils.formats.month} ${utils.formats.year}`)
+  }));
+});
+process.env.NODE_ENV !== "production" ? PickersRangeCalendarHeader.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The number of calendars rendered.
+   */
+  calendars: PropTypes.oneOf([1, 2, 3]).isRequired,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  className: PropTypes.string,
+  currentMonth: PropTypes.object.isRequired,
+  disabled: PropTypes.bool,
+  disableFuture: PropTypes.bool,
+  disablePast: PropTypes.bool,
+  /**
+   * Format used to display the date.
+   * @default `${adapter.formats.month} ${adapter.formats.year}`
+   */
+  format: PropTypes.string,
+  /**
+   * Id of the calendar text element.
+   * It is used to establish an `aria-labelledby` relationship with the calendar `grid` element.
+   */
+  labelId: PropTypes.string,
+  maxDate: PropTypes.object.isRequired,
+  minDate: PropTypes.object.isRequired,
+  /**
+   * Month used for this header.
+   */
+  month: PropTypes.object.isRequired,
+  /**
+   * Index of the month used for this header.
+   */
+  monthIndex: PropTypes.number.isRequired,
+  onMonthChange: PropTypes.func.isRequired,
+  onViewChange: PropTypes.func,
+  reduceAnimations: PropTypes.bool.isRequired,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  timezone: PropTypes.string.isRequired,
+  view: PropTypes.oneOf(['day', 'month', 'year']).isRequired,
+  views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired).isRequired
+} : void 0;
+export { PickersRangeCalendarHeader };

package/esm/PickersRangeCalendarHeader/PickersRangeCalendarHeader.types.d.ts

@@ -0,0 +1,17 @@
+import { PickerValidDate } from '@mui/x-date-pickers/models';
+import { ExportedPickersCalendarHeaderProps, PickersCalendarHeaderProps } from '@mui/x-date-pickers/PickersCalendarHeader';
+export interface PickersRangeCalendarHeaderProps extends PickersCalendarHeaderProps {
+  /**
+   * The number of calendars rendered.
+   */
+  calendars: 1 | 2 | 3;
+  /**
+   * Month used for this header.
+   */
+  month: PickerValidDate;
+  /**
+   * Index of the month used for this header.
+   */
+  monthIndex: number;
+}
+export interface ExportedPickersRangeCalendarHeaderProps extends ExportedPickersCalendarHeaderProps {}

package/esm/PickersRangeCalendarHeader/PickersRangeCalendarHeader.types.js

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

package/esm/PickersRangeCalendarHeader/index.d.ts

@@ -0,0 +1,2 @@
+export { PickersRangeCalendarHeader } from "./PickersRangeCalendarHeader.js";
+export type { PickersRangeCalendarHeaderProps, ExportedPickersRangeCalendarHeaderProps } from './PickersRangeCalendarHeader.types';

package/esm/PickersRangeCalendarHeader/index.js

@@ -0,0 +1 @@
+export { PickersRangeCalendarHeader } from "./PickersRangeCalendarHeader.js";

package/esm/SingleInputDateRangeField/SingleInputDateRangeField.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { SingleInputDateRangeFieldProps } from "./SingleInputDateRangeField.types.js";
+import { FieldType } from "../models/index.js";
+type DateRangeFieldComponent = (<TEnableAccessibleFieldDOMStructure extends boolean = true>(props: SingleInputDateRangeFieldProps<TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+  propTypes?: any;
+  fieldType?: FieldType;
+};
+/**
+ * Demos:
+ *
+ * - [DateRangeField](http://mui.com/x/react-date-pickers/date-range-field/)
+ * - [Fields](https://mui.com/x/react-date-pickers/fields/)
+ *
+ * API:
+ *
+ * - [SingleInputDateRangeField API](https://mui.com/x/api/single-input-date-range-field/)
+ */
+declare const SingleInputDateRangeField: DateRangeFieldComponent;
+export { SingleInputDateRangeField };