@mui/x-date-pickers 9.0.0-alpha.1 → 9.0.0-alpha.2

package/PickersActionBar/PickersActionBar.mjs

@@ -0,0 +1,117 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["actions"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import Button from '@mui/material/Button';
+import DialogActions from '@mui/material/DialogActions';
+import { usePickerTranslations } from "../hooks/usePickerTranslations.mjs";
+import { usePickerContext } from "../hooks/index.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+const PickersActionBarRoot = styled(DialogActions, {
+  name: 'MuiPickersLayout',
+  slot: 'ActionBar'
+})({});
+
+/**
+ * Demos:
+ *
+ * - [Custom slots and subcomponents](https://mui.com/x/react-date-pickers/custom-components/)
+ * - [Custom layout](https://mui.com/x/react-date-pickers/custom-layout/)
+ *
+ * API:
+ *
+ * - [PickersActionBar API](https://mui.com/x/api/date-pickers/pickers-action-bar/)
+ */
+function PickersActionBarComponent(props) {
+  const {
+      actions
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const translations = usePickerTranslations();
+  const {
+    clearValue,
+    setValueToToday,
+    acceptValueChanges,
+    cancelValueChanges,
+    goToNextStep,
+    hasNextStep
+  } = usePickerContext();
+  if (actions == null || actions.length === 0) {
+    return null;
+  }
+  const buttons = actions?.map(actionType => {
+    switch (actionType) {
+      case 'clear':
+        return /*#__PURE__*/_jsx(Button, {
+          onClick: clearValue,
+          children: translations.clearButtonLabel
+        }, actionType);
+      case 'cancel':
+        return /*#__PURE__*/_jsx(Button, {
+          onClick: cancelValueChanges,
+          children: translations.cancelButtonLabel
+        }, actionType);
+      case 'accept':
+        return /*#__PURE__*/_jsx(Button, {
+          onClick: acceptValueChanges,
+          children: translations.okButtonLabel
+        }, actionType);
+      case 'today':
+        return /*#__PURE__*/_jsx(Button, {
+          onClick: setValueToToday,
+          children: translations.todayButtonLabel
+        }, actionType);
+      case 'next':
+        return /*#__PURE__*/_jsx(Button, {
+          onClick: goToNextStep,
+          children: translations.nextStepButtonLabel
+        }, actionType);
+      case 'nextOrAccept':
+        if (hasNextStep) {
+          return /*#__PURE__*/_jsx(Button, {
+            onClick: goToNextStep,
+            children: translations.nextStepButtonLabel
+          }, actionType);
+        }
+        return /*#__PURE__*/_jsx(Button, {
+          onClick: acceptValueChanges,
+          children: translations.okButtonLabel
+        }, actionType);
+      default:
+        return null;
+    }
+  });
+  return /*#__PURE__*/_jsx(PickersActionBarRoot, _extends({}, other, {
+    children: buttons
+  }));
+}
+process.env.NODE_ENV !== "production" ? PickersActionBarComponent.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Ordered array of actions to display.
+   * If empty, does not display that action bar.
+   * @default
+   * - `[]` for Pickers with one selection step which `closeOnSelect`.
+   * - `['cancel', 'nextOrAccept']` for all other Pickers.
+   */
+  actions: PropTypes.arrayOf(PropTypes.oneOf(['accept', 'cancel', 'clear', 'next', 'nextOrAccept', 'today']).isRequired),
+  /**
+   * If `true`, the actions do not have additional margin.
+   * @default false
+   */
+  disableSpacing: PropTypes.bool,
+  /**
+   * 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])
+} : void 0;
+const PickersActionBar = /*#__PURE__*/React.memo(PickersActionBarComponent);
+if (process.env.NODE_ENV !== "production") PickersActionBar.displayName = "PickersActionBar";
+export { PickersActionBar };

package/PickersActionBar/index.d.mts

@@ -0,0 +1,2 @@
+export { PickersActionBar } from "./PickersActionBar.mjs";
+export type { PickersActionBarProps, PickersActionBarAction } from "./PickersActionBar.mjs";

package/PickersActionBar/index.mjs

@@ -0,0 +1 @@
+export { PickersActionBar } from "./PickersActionBar.mjs";

package/PickersCalendarHeader/PickersCalendarHeader.d.mts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { PickersCalendarHeaderProps } from "./PickersCalendarHeader.types.mjs";
+type PickersCalendarHeaderComponent = ((props: PickersCalendarHeaderProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+  propTypes?: any;
+};
+/**
+ * Demos:
+ *
+ * - [DateCalendar](https://mui.com/x/react-date-pickers/date-calendar/)
+ * - [DateRangeCalendar](https://mui.com/x/react-date-pickers/date-range-calendar/)
+ * - [Custom slots and subcomponents](https://mui.com/x/react-date-pickers/custom-components/)
+ *
+ * API:
+ *
+ * - [PickersCalendarHeader API](https://mui.com/x/api/date-pickers/pickers-calendar-header/)
+ */
+declare const PickersCalendarHeader: PickersCalendarHeaderComponent;
+export { PickersCalendarHeader };

package/PickersCalendarHeader/PickersCalendarHeader.mjs

@@ -0,0 +1,277 @@
+'use client';
+
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["slots", "slotProps", "currentMonth", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onMonthChange", "onViewChange", "view", "reduceAnimations", "views", "labelId", "className", "classes", "timezone", "format"],
+  _excluded2 = ["ownerState"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import Fade from '@mui/material/Fade';
+import { styled, useThemeProps } from '@mui/material/styles';
+import useSlotProps from '@mui/utils/useSlotProps';
+import composeClasses from '@mui/utils/composeClasses';
+import IconButton from '@mui/material/IconButton';
+import { usePickerAdapter, usePickerTranslations } from "../hooks/index.mjs";
+import { PickersFadeTransitionGroup } from "../DateCalendar/PickersFadeTransitionGroup.mjs";
+import { ArrowDropDownIcon } from "../icons/index.mjs";
+import { PickersArrowSwitcher } from "../internals/components/PickersArrowSwitcher/index.mjs";
+import { usePreviousMonthDisabled, useNextMonthDisabled } from "../internals/hooks/date-helpers-hooks.mjs";
+import { getPickersCalendarHeaderUtilityClass, pickersCalendarHeaderClasses } from "./pickersCalendarHeaderClasses.mjs";
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.mjs";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useUtilityClasses = classes => {
+  const slots = {
+    root: ['root'],
+    labelContainer: ['labelContainer'],
+    label: ['label'],
+    switchViewButton: ['switchViewButton'],
+    switchViewIcon: ['switchViewIcon']
+  };
+  return composeClasses(slots, getPickersCalendarHeaderUtilityClass, classes);
+};
+const PickersCalendarHeaderRoot = styled('div', {
+  name: 'MuiPickersCalendarHeader',
+  slot: 'Root'
+})({
+  display: 'flex',
+  alignItems: 'center',
+  marginTop: 12,
+  marginBottom: 4,
+  paddingLeft: 24,
+  paddingRight: 12,
+  // prevent jumping in safari
+  maxHeight: 40,
+  minHeight: 40
+});
+const PickersCalendarHeaderLabelContainer = styled('div', {
+  name: 'MuiPickersCalendarHeader',
+  slot: 'LabelContainer'
+})(({
+  theme
+}) => _extends({
+  display: 'flex',
+  overflow: 'hidden',
+  alignItems: 'center',
+  cursor: 'pointer',
+  marginRight: 'auto'
+}, theme.typography.body1, {
+  fontWeight: theme.typography.fontWeightMedium
+}));
+const PickersCalendarHeaderLabel = styled('div', {
+  name: 'MuiPickersCalendarHeader',
+  slot: 'Label'
+})({
+  marginRight: 6
+});
+const PickersCalendarHeaderSwitchViewButton = styled(IconButton, {
+  name: 'MuiPickersCalendarHeader',
+  slot: 'SwitchViewButton'
+})({
+  marginRight: 'auto',
+  variants: [{
+    props: {
+      view: 'year'
+    },
+    style: {
+      [`.${pickersCalendarHeaderClasses.switchViewIcon}`]: {
+        transform: 'rotate(180deg)'
+      }
+    }
+  }]
+});
+const PickersCalendarHeaderSwitchViewIcon = styled(ArrowDropDownIcon, {
+  name: 'MuiPickersCalendarHeader',
+  slot: 'SwitchViewIcon'
+})(({
+  theme
+}) => ({
+  willChange: 'transform',
+  transition: theme.transitions.create('transform'),
+  transform: 'rotate(0deg)'
+}));
+/**
+ * Demos:
+ *
+ * - [DateCalendar](https://mui.com/x/react-date-pickers/date-calendar/)
+ * - [DateRangeCalendar](https://mui.com/x/react-date-pickers/date-range-calendar/)
+ * - [Custom slots and subcomponents](https://mui.com/x/react-date-pickers/custom-components/)
+ *
+ * API:
+ *
+ * - [PickersCalendarHeader API](https://mui.com/x/api/date-pickers/pickers-calendar-header/)
+ */
+const PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCalendarHeader(inProps, ref) {
+  const translations = usePickerTranslations();
+  const adapter = usePickerAdapter();
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiPickersCalendarHeader'
+  });
+  const {
+      slots,
+      slotProps,
+      currentMonth: month,
+      disabled,
+      disableFuture,
+      disablePast,
+      maxDate,
+      minDate,
+      onMonthChange,
+      onViewChange,
+      view,
+      reduceAnimations,
+      views,
+      labelId,
+      className,
+      classes: classesProp,
+      timezone,
+      format = `${adapter.formats.month} ${adapter.formats.year}`
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    ownerState
+  } = usePickerPrivateContext();
+  const classes = useUtilityClasses(classesProp);
+  const SwitchViewButton = slots?.switchViewButton ?? PickersCalendarHeaderSwitchViewButton;
+  const switchViewButtonProps = useSlotProps({
+    elementType: SwitchViewButton,
+    externalSlotProps: slotProps?.switchViewButton,
+    additionalProps: {
+      size: 'small',
+      'aria-label': translations.calendarViewSwitchingButtonAriaLabel(view)
+    },
+    ownerState: _extends({}, ownerState, {
+      view
+    }),
+    className: classes.switchViewButton
+  });
+  const SwitchViewIcon = slots?.switchViewIcon ?? PickersCalendarHeaderSwitchViewIcon;
+  // The spread is here to avoid this bug mui/material-ui#34056
+  const _useSlotProps = useSlotProps({
+      elementType: SwitchViewIcon,
+      externalSlotProps: slotProps?.switchViewIcon,
+      ownerState,
+      className: classes.switchViewIcon
+    }),
+    switchViewIconProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
+  const selectNextMonth = () => onMonthChange(adapter.addMonths(month, 1));
+  const selectPreviousMonth = () => onMonthChange(adapter.addMonths(month, -1));
+  const isNextMonthDisabled = useNextMonthDisabled(month, {
+    disableFuture,
+    maxDate,
+    timezone
+  });
+  const isPreviousMonthDisabled = usePreviousMonthDisabled(month, {
+    disablePast,
+    minDate,
+    timezone
+  });
+  const handleToggleView = () => {
+    if (views.length === 1 || !onViewChange || disabled) {
+      return;
+    }
+    if (views.length === 2) {
+      onViewChange(views.find(el => el !== view) || views[0]);
+    } else {
+      // switching only between first 2
+      const nextIndexToOpen = views.indexOf(view) !== 0 ? 0 : 1;
+      onViewChange(views[nextIndexToOpen]);
+    }
+  };
+
+  // No need to display more information
+  if (views.length === 1 && views[0] === 'year') {
+    return null;
+  }
+  const label = adapter.formatByString(month, format);
+  return /*#__PURE__*/_jsxs(PickersCalendarHeaderRoot, _extends({}, other, {
+    ownerState: ownerState,
+    className: clsx(classes.root, className),
+    ref: ref,
+    children: [/*#__PURE__*/_jsxs(PickersCalendarHeaderLabelContainer, {
+      role: "presentation",
+      onClick: handleToggleView,
+      ownerState: ownerState
+      // putting this on the label item element below breaks when using transition
+      ,
+      "aria-live": "polite",
+      className: classes.labelContainer,
+      children: [/*#__PURE__*/_jsx(PickersFadeTransitionGroup, {
+        reduceAnimations: reduceAnimations,
+        transKey: label,
+        children: /*#__PURE__*/_jsx(PickersCalendarHeaderLabel, {
+          id: labelId,
+          ownerState: ownerState,
+          className: classes.label,
+          children: label
+        })
+      }), views.length > 1 && !disabled && /*#__PURE__*/_jsx(SwitchViewButton, _extends({}, switchViewButtonProps, {
+        children: /*#__PURE__*/_jsx(SwitchViewIcon, _extends({}, switchViewIconProps))
+      }))]
+    }), /*#__PURE__*/_jsx(Fade, {
+      in: view === 'day',
+      appear: !reduceAnimations,
+      enter: !reduceAnimations,
+      children: /*#__PURE__*/_jsx(PickersArrowSwitcher, {
+        slots: slots,
+        slotProps: slotProps,
+        onGoToPrevious: selectPreviousMonth,
+        isPreviousDisabled: isPreviousMonthDisabled,
+        previousLabel: translations.previousMonth,
+        onGoToNext: selectNextMonth,
+        isNextDisabled: isNextMonthDisabled,
+        nextLabel: translations.nextMonth
+      })
+    })]
+  }));
+});
+if (process.env.NODE_ENV !== "production") PickersCalendarHeader.displayName = "PickersCalendarHeader";
+process.env.NODE_ENV !== "production" ? PickersCalendarHeader.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * 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,
+  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 { PickersCalendarHeader };

package/PickersCalendarHeader/PickersCalendarHeader.types.d.mts

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { SlotComponentProps } from '@mui/utils/types';
+import IconButton from '@mui/material/IconButton';
+import SvgIcon from '@mui/material/SvgIcon';
+import { SxProps, Theme } from '@mui/material/styles';
+import { ExportedPickersArrowSwitcherProps, PickersArrowSwitcherSlots, PickersArrowSwitcherSlotProps } from "../internals/components/PickersArrowSwitcher/index.mjs";
+import { MonthValidationOptions } from "../internals/hooks/date-helpers-hooks.mjs";
+import { PickerValidDate, DateView, PickerOwnerState } from "../models/index.mjs";
+import { PickersCalendarHeaderClasses } from "./pickersCalendarHeaderClasses.mjs";
+export interface PickersCalendarHeaderSlots extends PickersArrowSwitcherSlots {
+  /**
+   * Button displayed to switch between different calendar views.
+   * @default IconButton
+   */
+  switchViewButton?: React.ElementType;
+  /**
+   * Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`.
+   * @default ArrowDropDown
+   */
+  switchViewIcon?: React.ElementType;
+}
+export interface PickersCalendarHeaderSlotPropsOverrides {}
+export interface PickersCalendarHeaderSlotProps extends PickersArrowSwitcherSlotProps {
+  switchViewButton?: SlotComponentProps<typeof IconButton, PickersCalendarHeaderSlotPropsOverrides, PickerOwnerState>;
+  switchViewIcon?: SlotComponentProps<typeof SvgIcon, PickersCalendarHeaderSlotPropsOverrides, PickerOwnerState>;
+}
+export interface PickersCalendarHeaderProps extends ExportedPickersArrowSwitcherProps, MonthValidationOptions {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: PickersCalendarHeaderSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: PickersCalendarHeaderSlotProps;
+  currentMonth: PickerValidDate;
+  disabled?: boolean;
+  views: readonly DateView[];
+  onMonthChange: (date: PickerValidDate) => void;
+  view: DateView;
+  reduceAnimations: boolean;
+  onViewChange?: (view: DateView) => void;
+  /**
+   * Id of the calendar text element.
+   * It is used to establish an `aria-labelledby` relationship with the calendar `grid` element.
+   */
+  labelId?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<PickersCalendarHeaderClasses>;
+  className?: string;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+export type ExportedPickersCalendarHeaderProps = Pick<PickersCalendarHeaderProps, 'classes' | 'slots' | 'slotProps'>;

package/PickersCalendarHeader/index.d.mts

@@ -0,0 +1,4 @@
+export { pickersCalendarHeaderClasses } from "./pickersCalendarHeaderClasses.mjs";
+export type { PickersCalendarHeaderClassKey, PickersCalendarHeaderClasses } from "./pickersCalendarHeaderClasses.mjs";
+export { PickersCalendarHeader } from "./PickersCalendarHeader.mjs";
+export type { PickersCalendarHeaderProps, PickersCalendarHeaderSlots, PickersCalendarHeaderSlotProps, ExportedPickersCalendarHeaderProps } from "./PickersCalendarHeader.types.mjs";

package/PickersCalendarHeader/index.mjs

@@ -0,0 +1,2 @@
+export { pickersCalendarHeaderClasses } from "./pickersCalendarHeaderClasses.mjs";
+export { PickersCalendarHeader } from "./PickersCalendarHeader.mjs";

package/PickersDay/PickersDay.d.mts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { PickersDayProps } from "./PickersDay.types.mjs";
+type PickersDayComponent = ((props: PickersDayProps & React.RefAttributes<HTMLButtonElement>) => React.JSX.Element) & {
+  propTypes?: any;
+};
+/**
+ * Demos:
+ *
+ * - [DateCalendar](https://mui.com/x/react-date-pickers/date-calendar/)
+ * API:
+ *
+ * - [PickersDay API](https://mui.com/x/api/date-pickers/pickers-day/)
+ */
+export declare const PickersDay: PickersDayComponent;
+export {};