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

package/esm/DigitalClock/DigitalClock.js

@@ -1,480 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["ampm", "timeStep", "autoFocus", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableTime", "onChange", "view", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "classes", "disabled", "readOnly", "views", "skipDisabled", "timezone"];
-import * as React from 'react';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-import useSlotProps from '@mui/utils/useSlotProps';
-import { alpha, styled, useThemeProps } from '@mui/material/styles';
-import useEventCallback from '@mui/utils/useEventCallback';
-import composeClasses from '@mui/utils/composeClasses';
-import MenuItem from '@mui/material/MenuItem';
-import MenuList from '@mui/material/MenuList';
-import useForkRef from '@mui/utils/useForkRef';
-import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import { usePickerAdapter, usePickerTranslations } from "../hooks/index.js";
-import { useNow } from "../internals/hooks/useUtils.js";
-import { createIsAfterIgnoreDatePart } from "../internals/utils/time-utils.js";
-import { PickerViewRoot } from "../internals/components/PickerViewRoot/index.js";
-import { getDigitalClockUtilityClass } from "./digitalClockClasses.js";
-import { useViews } from "../internals/hooks/useViews.js";
-import { DIGITAL_CLOCK_VIEW_HEIGHT } from "../internals/constants/dimensions.js";
-import { useControlledValue } from "../internals/hooks/useControlledValue.js";
-import { singleItemValueManager } from "../internals/utils/valueManagers.js";
-import { useClockReferenceDate } from "../internals/hooks/useClockReferenceDate.js";
-import { getFocusedListItemIndex } from "../internals/utils/utils.js";
-import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = classes => {
-  const slots = {
-    root: ['root'],
-    list: ['list'],
-    item: ['item']
-  };
-  return composeClasses(slots, getDigitalClockUtilityClass, classes);
-};
-const DigitalClockRoot = styled(PickerViewRoot, {
-  name: 'MuiDigitalClock',
-  slot: 'Root'
-})({
-  overflowY: 'auto',
-  width: '100%',
-  scrollbarWidth: 'thin',
-  '@media (prefers-reduced-motion: no-preference)': {
-    scrollBehavior: 'auto'
-  },
-  maxHeight: DIGITAL_CLOCK_VIEW_HEIGHT,
-  variants: [{
-    props: {
-      hasDigitalClockAlreadyBeenRendered: true
-    },
-    style: {
-      '@media (prefers-reduced-motion: no-preference)': {
-        scrollBehavior: 'smooth'
-      }
-    }
-  }]
-});
-const DigitalClockList = styled(MenuList, {
-  name: 'MuiDigitalClock',
-  slot: 'List'
-})({
-  padding: 0
-});
-export const DigitalClockItem = styled(MenuItem, {
-  name: 'MuiDigitalClock',
-  slot: 'Item',
-  shouldForwardProp: prop => prop !== 'itemValue' && prop !== 'formattedValue'
-})(({
-  theme
-}) => ({
-  padding: '8px 16px',
-  margin: '2px 4px',
-  '&:first-of-type': {
-    marginTop: 4
-  },
-  '&:hover': {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity)
-  },
-  '&.Mui-selected': {
-    backgroundColor: (theme.vars || theme).palette.primary.main,
-    color: (theme.vars || theme).palette.primary.contrastText,
-    '&:focus-visible, &:hover': {
-      backgroundColor: (theme.vars || theme).palette.primary.dark
-    }
-  },
-  '&.Mui-focusVisible': {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.focusOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.focusOpacity)
-  }
-}));
-/**
- * Demos:
- *
- * - [TimePicker](https://mui.com/x/react-date-pickers/time-picker/)
- * - [DigitalClock](https://mui.com/x/react-date-pickers/digital-clock/)
- *
- * API:
- *
- * - [DigitalClock API](https://mui.com/x/api/date-pickers/digital-clock/)
- */
-export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(inProps, ref) {
-  const adapter = usePickerAdapter();
-  const containerRef = React.useRef(null);
-  const handleRef = useForkRef(ref, containerRef);
-  const listRef = React.useRef(null);
-  const props = useThemeProps({
-    props: inProps,
-    name: 'MuiDigitalClock'
-  });
-  const {
-      ampm = adapter.is12HourCycleInCurrentLocale(),
-      timeStep = 30,
-      autoFocus,
-      slots,
-      slotProps,
-      value: valueProp,
-      defaultValue,
-      referenceDate: referenceDateProp,
-      disableIgnoringDatePartForTimeValidation = false,
-      maxTime,
-      minTime,
-      disableFuture,
-      disablePast,
-      minutesStep = 1,
-      shouldDisableTime,
-      onChange,
-      view: inView,
-      openTo,
-      onViewChange,
-      focusedView,
-      onFocusedViewChange,
-      className,
-      classes: classesProp,
-      disabled,
-      readOnly,
-      views = ['hours'],
-      skipDisabled = false,
-      timezone: timezoneProp
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const {
-    value,
-    handleValueChange: handleRawValueChange,
-    timezone
-  } = useControlledValue({
-    name: 'DigitalClock',
-    timezone: timezoneProp,
-    value: valueProp,
-    defaultValue,
-    referenceDate: referenceDateProp,
-    onChange,
-    valueManager: singleItemValueManager
-  });
-  const translations = usePickerTranslations();
-  const now = useNow(timezone);
-  const {
-    ownerState: pickerOwnerState
-  } = usePickerPrivateContext();
-  const ownerState = _extends({}, pickerOwnerState, {
-    hasDigitalClockAlreadyBeenRendered: !!containerRef.current
-  });
-  const classes = useUtilityClasses(classesProp);
-  const ClockItem = slots?.digitalClockItem ?? DigitalClockItem;
-  const clockItemProps = useSlotProps({
-    elementType: ClockItem,
-    externalSlotProps: slotProps?.digitalClockItem,
-    ownerState,
-    className: classes.item
-  });
-  const valueOrReferenceDate = useClockReferenceDate({
-    value,
-    referenceDate: referenceDateProp,
-    adapter,
-    props,
-    timezone
-  });
-  const handleValueChange = useEventCallback(newValue => handleRawValueChange(newValue, 'finish', 'hours'));
-  const {
-    setValueAndGoToNextView
-  } = useViews({
-    view: inView,
-    views,
-    openTo,
-    onViewChange,
-    onChange: handleValueChange,
-    focusedView,
-    onFocusedViewChange
-  });
-  const handleItemSelect = useEventCallback(newValue => {
-    setValueAndGoToNextView(newValue, 'finish');
-  });
-  useEnhancedEffect(() => {
-    if (containerRef.current === null) {
-      return;
-    }
-    const activeItem = containerRef.current.querySelector('[role="listbox"] [role="option"][tabindex="0"], [role="listbox"] [role="option"][aria-selected="true"]');
-    if (!activeItem) {
-      return;
-    }
-    const offsetTop = activeItem.offsetTop;
-    if (autoFocus || !!focusedView) {
-      activeItem.focus();
-    }
-
-    // Subtracting the 4px of extra margin intended for the first visible section item
-    containerRef.current.scrollTop = offsetTop - 4;
-  });
-  const isTimeDisabled = React.useCallback(valueToCheck => {
-    const isAfter = createIsAfterIgnoreDatePart(disableIgnoringDatePartForTimeValidation, adapter);
-    const containsValidTime = () => {
-      if (minTime && isAfter(minTime, valueToCheck)) {
-        return false;
-      }
-      if (maxTime && isAfter(valueToCheck, maxTime)) {
-        return false;
-      }
-      if (disableFuture && isAfter(valueToCheck, now)) {
-        return false;
-      }
-      if (disablePast && isAfter(now, valueToCheck)) {
-        return false;
-      }
-      return true;
-    };
-    const isValidValue = () => {
-      if (adapter.getMinutes(valueToCheck) % minutesStep !== 0) {
-        return false;
-      }
-      if (shouldDisableTime) {
-        return !shouldDisableTime(valueToCheck, 'hours');
-      }
-      return true;
-    };
-    return !containsValidTime() || !isValidValue();
-  }, [disableIgnoringDatePartForTimeValidation, adapter, minTime, maxTime, disableFuture, now, disablePast, minutesStep, shouldDisableTime]);
-  const timeOptions = React.useMemo(() => {
-    const result = [];
-    const startOfDay = adapter.startOfDay(valueOrReferenceDate);
-    let nextTimeStepOption = startOfDay;
-    while (adapter.isSameDay(valueOrReferenceDate, nextTimeStepOption)) {
-      result.push(nextTimeStepOption);
-      nextTimeStepOption = adapter.addMinutes(nextTimeStepOption, timeStep);
-    }
-    return result;
-  }, [valueOrReferenceDate, timeStep, adapter]);
-  const focusedOptionIndex = timeOptions.findIndex(option => adapter.isEqual(option, valueOrReferenceDate));
-  const handleKeyDown = event => {
-    switch (event.key) {
-      case 'PageUp':
-        {
-          const newIndex = getFocusedListItemIndex(listRef.current) - 5;
-          const children = listRef.current.children;
-          const newFocusedIndex = Math.max(0, newIndex);
-          const childToFocus = children[newFocusedIndex];
-          if (childToFocus) {
-            childToFocus.focus();
-          }
-          event.preventDefault();
-          break;
-        }
-      case 'PageDown':
-        {
-          const newIndex = getFocusedListItemIndex(listRef.current) + 5;
-          const children = listRef.current.children;
-          const newFocusedIndex = Math.min(children.length - 1, newIndex);
-          const childToFocus = children[newFocusedIndex];
-          if (childToFocus) {
-            childToFocus.focus();
-          }
-          event.preventDefault();
-          break;
-        }
-      default:
-    }
-  };
-  return /*#__PURE__*/_jsx(DigitalClockRoot, _extends({
-    ref: handleRef,
-    className: clsx(classes.root, className),
-    ownerState: ownerState
-  }, other, {
-    children: /*#__PURE__*/_jsx(DigitalClockList, {
-      ref: listRef,
-      role: "listbox",
-      "aria-label": translations.timePickerToolbarTitle,
-      className: classes.list,
-      onKeyDown: handleKeyDown,
-      children: timeOptions.map((option, index) => {
-        const optionDisabled = isTimeDisabled(option);
-        if (skipDisabled && optionDisabled) {
-          return null;
-        }
-        const isSelected = adapter.isEqual(option, value);
-        const formattedValue = adapter.format(option, ampm ? 'fullTime12h' : 'fullTime24h');
-        const isFocused = focusedOptionIndex === index || focusedOptionIndex === -1 && index === 0;
-        const tabIndex = isFocused ? 0 : -1;
-        return /*#__PURE__*/_jsx(ClockItem, _extends({
-          onClick: () => !readOnly && handleItemSelect(option),
-          selected: isSelected,
-          disabled: disabled || optionDisabled,
-          disableRipple: readOnly,
-          role: "option"
-          // aria-readonly is not supported here and does not have any effect
-          ,
-          "aria-disabled": readOnly,
-          "aria-selected": isSelected,
-          tabIndex: tabIndex,
-          itemValue: option,
-          formattedValue: formattedValue
-        }, clockItemProps, {
-          children: formattedValue
-        }), `${option.valueOf()}-${formattedValue}`);
-      })
-    })
-  }));
-});
-if (process.env.NODE_ENV !== "production") DigitalClock.displayName = "DigitalClock";
-process.env.NODE_ENV !== "production" ? DigitalClock.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * 12h/24h view for hour selection clock.
-   * @default adapter.is12HourCycleInCurrentLocale()
-   */
-  ampm: PropTypes.bool,
-  /**
-   * If `true`, the main element is focused during the first mount.
-   * This main element is:
-   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
-   * - the `input` element if there is a field rendered.
-   */
-  autoFocus: PropTypes.bool,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  className: PropTypes.string,
-  /**
-   * The default selected value.
-   * Used when the component is not controlled.
-   */
-  defaultValue: PropTypes.object,
-  /**
-   * If `true`, the component is disabled.
-   * When disabled, the value cannot be changed and no interaction is possible.
-   * @default false
-   */
-  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.bool,
-  /**
-   * Do not ignore date part when validating min/max time.
-   * @default false
-   */
-  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.bool,
-  /**
-   * Controlled focused view.
-   */
-  focusedView: PropTypes.oneOf(['hours']),
-  /**
-   * Maximal selectable time.
-   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
-   */
-  maxTime: PropTypes.object,
-  /**
-   * Minimal selectable time.
-   * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
-   */
-  minTime: PropTypes.object,
-  /**
-   * Step over minutes.
-   * @default 1
-   */
-  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.
-   * @template TView The view type. Will be one of date or time views.
-   * @param {TValue} value The new value.
-   * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.
-   * @param {TView | undefined} selectedView Indicates the view in which the selection has been made.
-   */
-  onChange: PropTypes.func,
-  /**
-   * Callback fired on focused view change.
-   * @template TView Type of the view. It will vary based on the Picker type and the `views` it uses.
-   * @param {TView} view The new view to focus or not.
-   * @param {boolean} hasFocus `true` if the view should be focused.
-   */
-  onFocusedViewChange: PropTypes.func,
-  /**
-   * Callback fired on view change.
-   * @template TView Type of the view. It will vary based on the Picker type and the `views` it uses.
-   * @param {TView} view The new view.
-   */
-  onViewChange: PropTypes.func,
-  /**
-   * The default visible view.
-   * Used when the component view is not controlled.
-   * Must be a valid option from `views` list.
-   */
-  openTo: PropTypes.oneOf(['hours']),
-  /**
-   * 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.bool,
-  /**
-   * The date used to generate the new value when both `value` and `defaultValue` are empty.
-   * @default The closest valid time using the validation props, except callbacks such as `shouldDisableTime`.
-   */
-  referenceDate: PropTypes.object,
-  /**
-   * 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.func,
-  /**
-   * If `true`, disabled digital clock items will not be rendered.
-   * @default false
-   */
-  skipDisabled: PropTypes.bool,
-  /**
-   * The props used for each component slot.
-   * @default {}
-   */
-  slotProps: PropTypes.object,
-  /**
-   * Overrideable 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]),
-  /**
-   * The time steps between two time options.
-   * For example, if `timeStep = 45`, then the available time options will be `[00:00, 00:45, 01:30, 02:15, 03:00, etc.]`.
-   * @default 30
-   */
-  timeStep: PropTypes.number,
-  /**
-   * Choose which timezone to use for the value.
-   * Example: "default", "system", "UTC", "America/New_York".
-   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
-   * @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.string,
-  /**
-   * The selected value.
-   * Used when the component is controlled.
-   */
-  value: PropTypes.object,
-  /**
-   * The visible view.
-   * Used when the component view is controlled.
-   * Must be a valid option from `views` list.
-   */
-  view: PropTypes.oneOf(['hours']),
-  /**
-   * Available views.
-   * @default ['hours']
-   */
-  views: PropTypes.arrayOf(PropTypes.oneOf(['hours']))
-} : void 0;

package/esm/DigitalClock/DigitalClock.types.d.ts

@@ -1,54 +0,0 @@
-import * as React from 'react';
-import { SlotComponentProps } from '@mui/utils/types';
-import MenuItem from '@mui/material/MenuItem';
-import { DigitalClockClasses } from "./digitalClockClasses.js";
-import { BaseClockProps, DigitalClockOnlyProps, ExportedBaseClockProps } from "../internals/models/props/time.js";
-import { PickerOwnerState, TimeView, PickerValidDate } from "../models/index.js";
-export interface ExportedDigitalClockProps extends ExportedBaseClockProps, DigitalClockOnlyProps {}
-export interface DigitalClockSlots {
-  /**
-   * Component responsible for rendering a single digital clock item.
-   * @default MenuItem from '@mui/material'
-   */
-  digitalClockItem?: React.JSXElementConstructor<DigitalClockItemProps>;
-}
-export interface DigitalClockSlotProps {
-  digitalClockItem?: SlotComponentProps<typeof MenuItem, {}, DigitalClockOwnerState>;
-}
-export interface DigitalClockProps extends ExportedDigitalClockProps, BaseClockProps<Extract<TimeView, 'hours'>> {
-  /**
-   * Available views.
-   * @default ['hours']
-   */
-  views?: readonly 'hours'[];
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes?: Partial<DigitalClockClasses>;
-  /**
-   * Overrideable component slots.
-   * @default {}
-   */
-  slots?: DigitalClockSlots;
-  /**
-   * The props used for each component slot.
-   * @default {}
-   */
-  slotProps?: DigitalClockSlotProps;
-}
-export interface DigitalClockOwnerState extends PickerOwnerState {
-  /**
-   * `true` if this is not the initial render of the digital clock.
-   */
-  hasDigitalClockAlreadyBeenRendered: boolean;
-}
-export interface DigitalClockItemProps {
-  itemValue: PickerValidDate;
-  formattedValue: string;
-  onClick: () => void;
-  selected: boolean;
-  disabled: boolean;
-  readOnly?: boolean;
-  tabIndex: number;
-  [x: `data-${string}`]: string;
-}

package/esm/DigitalClock/index.d.ts

@@ -1,4 +0,0 @@
-export { DigitalClock, DigitalClockItem } from "./DigitalClock.js";
-export type { DigitalClockProps, DigitalClockSlots, DigitalClockSlotProps, ExportedDigitalClockProps, DigitalClockItemProps } from "./DigitalClock.types.js";
-export { digitalClockClasses, getDigitalClockUtilityClass } from "./digitalClockClasses.js";
-export type { DigitalClockClasses, DigitalClockClassKey } from "./digitalClockClasses.js";

package/esm/DigitalClock/index.js

@@ -1,2 +0,0 @@
-export { DigitalClock, DigitalClockItem } from "./DigitalClock.js";
-export { digitalClockClasses, getDigitalClockUtilityClass } from "./digitalClockClasses.js";

package/esm/LocalizationProvider/LocalizationProvider.d.ts

@@ -1,61 +0,0 @@
-import * as React from 'react';
-import { AdapterFormats, MuiPickersAdapter, PickerValidDate } from "../models/index.js";
-import { PickersInputLocaleText } from "../locales/index.js";
-export interface PickersAdapterContextValue {
-  defaultDates: {
-    minDate: PickerValidDate;
-    maxDate: PickerValidDate;
-  };
-  utils: MuiPickersAdapter;
-  adapter: MuiPickersAdapter;
-  localeText: PickersInputLocaleText | undefined;
-}
-export type PickerAdapterContextNullableValue = { [K in keyof PickersAdapterContextValue]: PickersAdapterContextValue[K] | null };
-export declare const PickerAdapterContext: React.Context<PickerAdapterContextNullableValue | null>;
-/**
- * The context that provides the date adapter and default dates to the pickers.
- * @deprecated Use `usePickersAdapter` hook if you need access to the adapter instead.
- */
-export declare const MuiPickersAdapterContext: React.Context<PickerAdapterContextNullableValue | null>;
-export interface LocalizationProviderProps<TLocale> {
-  children?: React.ReactNode;
-  /**
-   * Date library adapter class function.
-   * @see See the localization provider {@link https://mui.com/x/react-date-pickers/quickstart/#integrate-provider-and-adapter date adapter setup section} for more details.
-   */
-  dateAdapter?: new (...args: any) => MuiPickersAdapter<TLocale>;
-  /** Formats that are used for any child pickers */
-  dateFormats?: Partial<AdapterFormats>;
-  /**
-   * Date library instance you are using, if it has some global overrides
-   * ```jsx
-   * dateLibInstance={momentTimeZone}
-   * ```
-   */
-  dateLibInstance?: any;
-  /**
-   * Locale for the date library you are using
-   */
-  adapterLocale?: TLocale;
-  /**
-   * Locale for components texts
-   */
-  localeText?: PickersInputLocaleText;
-}
-type LocalizationProviderComponent = (<TLocale>(props: LocalizationProviderProps<TLocale>) => React.JSX.Element) & {
-  propTypes?: any;
-};
-/**
- * Demos:
- *
- * - [Date format and localization](https://mui.com/x/react-date-pickers/adapters-locale/)
- * - [Calendar systems](https://mui.com/x/react-date-pickers/calendar-systems/)
- * - [Translated components](https://mui.com/x/react-date-pickers/localization/)
- * - [UTC and timezones](https://mui.com/x/react-date-pickers/timezone/)
- *
- * API:
- *
- * - [LocalizationProvider API](https://mui.com/x/api/date-pickers/localization-provider/)
- */
-export declare const LocalizationProvider: LocalizationProviderComponent;
-export {};