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

package/validation/useValidation.d.ts

@@ -1,6 +1,6 @@
 import { MuiPickersAdapterContextValue } from "../LocalizationProvider/LocalizationProvider.js";
 import { OnErrorProps, PickersTimezone } from "../models/index.js";
-import type { PickerValueManager } from '../internals/hooks/usePicker';
+import type { PickerValueManager } from '../internals/models';
 import { PickerValidValue } from "../internals/models/index.js";
 export type Validator<TValue extends PickerValidValue, TError, TValidationProps> = {
   (params: {

package/esm/internals/hooks/useOpenState.d.ts

@@ -1,14 +0,0 @@
-import * as React from 'react';
-export interface OpenStateProps {
-  open?: boolean;
-  onOpen?: () => void;
-  onClose?: () => void;
-}
-export declare const useOpenState: ({
-  open,
-  onOpen,
-  onClose
-}: OpenStateProps) => {
-  open: boolean;
-  setOpen: (action: React.SetStateAction<boolean>) => void;
-};

package/esm/internals/hooks/useOpenState.js

@@ -1,37 +0,0 @@
-import * as React from 'react';
-import useEventCallback from '@mui/utils/useEventCallback';
-export const useOpenState = ({
-  open,
-  onOpen,
-  onClose
-}) => {
-  const isControllingOpenProp = React.useRef(typeof open === 'boolean').current;
-  const [openState, setOpenState] = React.useState(false);
-
-  // It is required to update inner state in useEffect in order to avoid situation when
-  // Our component is not mounted yet, but `open` state is set to `true` (for example initially opened)
-  React.useEffect(() => {
-    if (isControllingOpenProp) {
-      if (typeof open !== 'boolean') {
-        throw new Error('You must not mix controlling and uncontrolled mode for `open` prop');
-      }
-      setOpenState(open);
-    }
-  }, [isControllingOpenProp, open]);
-  const setOpen = useEventCallback(action => {
-    const newOpen = typeof action === 'function' ? action(openState) : action;
-    if (!isControllingOpenProp) {
-      setOpenState(newOpen);
-    }
-    if (newOpen && onOpen) {
-      onOpen();
-    }
-    if (!newOpen && onClose) {
-      onClose();
-    }
-  });
-  return {
-    open: openState,
-    setOpen
-  };
-};

package/esm/internals/hooks/usePicker/usePickerProvider.d.ts

@@ -1,65 +0,0 @@
-import * as React from 'react';
-import { PickerValueManager, UsePickerValueProviderParams } from "./usePickerValue.types.js";
-import { PickerProviderProps } from "../../components/PickerProvider.js";
-import type { UsePickerProps } from './usePicker.types';
-import { DateOrTimeViewWithMeridiem, FormProps, PickerOrientation, PickerValidValue, PickerVariant } from "../../models/index.js";
-import { UsePickerViewsProviderParams } from "./usePickerViews.js";
-import type { UseFieldInternalProps } from '../useField';
-import { ExportedBaseToolbarProps } from "../../models/props/toolbar.js";
-export declare const usePickerOrientation: (views: readonly DateOrTimeViewWithMeridiem[], customOrientation: PickerOrientation | undefined) => PickerOrientation;
-export declare function usePickerProvider<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError>(parameters: UsePickerProviderParameters<TValue, TView, TError>): UsePickerProviderReturnValue<TValue>;
-export interface UsePickerProviderParameters<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TError> extends Pick<PickerProviderProps<TValue>, 'localeText'> {
-  ref: React.ForwardedRef<HTMLDivElement> | undefined;
-  props: UsePickerProps<TValue, any, any, any> & UsePickerProviderNonStaticProps & {
-    slotProps?: {
-      toolbar?: ExportedBaseToolbarProps;
-    };
-  };
-  valueManager: PickerValueManager<TValue, any>;
-  variant: PickerVariant;
-  paramsFromUsePickerValue: UsePickerValueProviderParams<TValue, TError>;
-  paramsFromUsePickerViews: UsePickerViewsProviderParams<TView>;
-}
-export interface UsePickerProviderReturnValue<TValue extends PickerValidValue> extends Omit<PickerProviderProps<TValue>, 'children'> {}
-/**
- * Props used to create the picker's contexts.
- * Those props are exposed on all the pickers.
- */
-export interface UsePickerProviderProps extends FormProps {
-  /**
-   * Force rendering in particular orientation.
-   */
-  orientation?: PickerOrientation;
-  /**
-   * If `true`, disable heavy animations.
-   * @default `@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13
-   */
-  reduceAnimations?: boolean;
-}
-/**
- * Props used to create the picker's contexts and that are not available on static pickers.
- */
-export interface UsePickerProviderNonStaticProps extends Pick<UseFieldInternalProps<any, any, any>, 'formatDensity' | 'enableAccessibleFieldDOMStructure' | 'selectedSections' | 'onSelectedSectionsChange'> {
-  /**
-   * Format of the date when rendered in the input(s).
-   * Defaults to localized format based on the used `views`.
-   */
-  format?: string;
-  /**
-   * If `true`, the open picker button will not be rendered (renders only the field).
-   * @default false
-   */
-  disableOpenPicker?: boolean;
-  /**
-   * The label content.
-   */
-  label?: React.ReactNode;
-  /**
-   * Pass a ref to the `input` element.
-   */
-  inputRef?: React.Ref<HTMLInputElement>;
-  /**
-   * Name attribute used by the `input` element in the Field.
-   */
-  name?: string;
-}

package/esm/internals/hooks/usePicker/usePickerProvider.js

@@ -1,125 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import useForkRef from '@mui/utils/useForkRef';
-import useId from '@mui/utils/useId';
-import { useUtils } from "../useUtils.js";
-import { arrayIncludes } from "../../utils/utils.js";
-import { useReduceAnimations } from "../useReduceAnimations.js";
-function getOrientation() {
-  if (typeof window === 'undefined') {
-    return 'portrait';
-  }
-  if (window.screen && window.screen.orientation && window.screen.orientation.angle) {
-    return Math.abs(window.screen.orientation.angle) === 90 ? 'landscape' : 'portrait';
-  }
-
-  // Support IOS safari
-  if (window.orientation) {
-    return Math.abs(Number(window.orientation)) === 90 ? 'landscape' : 'portrait';
-  }
-  return 'portrait';
-}
-export const usePickerOrientation = (views, customOrientation) => {
-  const [orientation, setOrientation] = React.useState(getOrientation);
-  useEnhancedEffect(() => {
-    const eventHandler = () => {
-      setOrientation(getOrientation());
-    };
-    window.addEventListener('orientationchange', eventHandler);
-    return () => {
-      window.removeEventListener('orientationchange', eventHandler);
-    };
-  }, []);
-  if (arrayIncludes(views, ['hours', 'minutes', 'seconds'])) {
-    // could not display 13:34:44 in landscape mode
-    return 'portrait';
-  }
-  return customOrientation ?? orientation;
-};
-export function usePickerProvider(parameters) {
-  const {
-    ref,
-    props,
-    valueManager,
-    localeText,
-    variant,
-    paramsFromUsePickerValue,
-    paramsFromUsePickerViews
-  } = parameters;
-  const utils = useUtils();
-  const orientation = usePickerOrientation(paramsFromUsePickerViews.views, props.orientation);
-  const reduceAnimations = useReduceAnimations(props.reduceAnimations);
-  const triggerRef = React.useRef(null);
-  const popupRef = React.useRef(null);
-  const rootRefObject = React.useRef(null);
-  const rootRef = useForkRef(ref, rootRefObject);
-
-  /**
-   * TODO: Improve how we generate the aria-label and aria-labelledby attributes.
-   */
-  const labelId = useId();
-  const ownerState = React.useMemo(() => ({
-    isPickerValueEmpty: valueManager.areValuesEqual(utils, paramsFromUsePickerValue.value, valueManager.emptyValue),
-    isPickerOpen: paramsFromUsePickerValue.contextValue.open,
-    isPickerDisabled: props.disabled ?? false,
-    isPickerReadOnly: props.readOnly ?? false,
-    pickerOrientation: orientation,
-    pickerVariant: variant
-  }), [utils, valueManager, paramsFromUsePickerValue.value, paramsFromUsePickerValue.contextValue.open, orientation, variant, props.disabled, props.readOnly]);
-  const triggerStatus = React.useMemo(() => {
-    if (props.disableOpenPicker || !paramsFromUsePickerViews.hasUIView) {
-      return 'hidden';
-    }
-    if (props.disabled || props.readOnly) {
-      return 'disabled';
-    }
-    return 'enabled';
-  }, [props.disableOpenPicker, paramsFromUsePickerViews.hasUIView, props.disabled, props.readOnly]);
-  const contextValue = React.useMemo(() => _extends({}, paramsFromUsePickerValue.contextValue, paramsFromUsePickerViews.contextValue, {
-    disabled: props.disabled ?? false,
-    readOnly: props.readOnly ?? false,
-    autoFocus: props.autoFocus ?? false,
-    variant,
-    orientation,
-    popupRef,
-    reduceAnimations,
-    triggerRef,
-    triggerStatus,
-    fieldFormat: props.format ?? '',
-    name: props.name,
-    label: props.label,
-    rootSx: props.sx,
-    rootRef,
-    rootClassName: props.className
-  }), [paramsFromUsePickerValue.contextValue, paramsFromUsePickerViews.contextValue, rootRef, variant, orientation, reduceAnimations, props.disabled, props.readOnly, props.autoFocus, props.format, props.className, props.name, props.label, props.sx, triggerRef, triggerStatus]);
-  const privateContextValue = React.useMemo(() => _extends({}, paramsFromUsePickerValue.privateContextValue, paramsFromUsePickerViews.privateContextValue, {
-    ownerState,
-    rootRefObject,
-    labelId
-  }), [paramsFromUsePickerValue.privateContextValue, paramsFromUsePickerViews.privateContextValue, ownerState, labelId]);
-  const actionsContextValue = React.useMemo(() => _extends({}, paramsFromUsePickerValue.actionsContextValue, paramsFromUsePickerViews.actionsContextValue), [paramsFromUsePickerValue.actionsContextValue, paramsFromUsePickerViews.actionsContextValue]);
-  const fieldPrivateContextValue = React.useMemo(() => _extends({}, paramsFromUsePickerViews.fieldPrivateContextValue, {
-    formatDensity: props.formatDensity,
-    enableAccessibleFieldDOMStructure: props.enableAccessibleFieldDOMStructure,
-    selectedSections: props.selectedSections,
-    onSelectedSectionsChange: props.onSelectedSectionsChange
-  }), [paramsFromUsePickerViews.fieldPrivateContextValue, props.formatDensity, props.enableAccessibleFieldDOMStructure, props.selectedSections, props.onSelectedSectionsChange]);
-  return {
-    localeText,
-    contextValue,
-    privateContextValue,
-    actionsContextValue,
-    fieldPrivateContextValue,
-    isValidContextValue: paramsFromUsePickerValue.isValidContextValue
-  };
-}
-
-/**
- * Props used to create the picker's contexts.
- * Those props are exposed on all the pickers.
- */
-
-/**
- * Props used to create the picker's contexts and that are not available on static pickers.
- */

package/esm/internals/hooks/usePicker/usePickerValue.d.ts

@@ -1,12 +0,0 @@
-import { InferError } from "../../../models/index.js";
-import { UsePickerValueProps, UsePickerValueParams, UsePickerValueResponse } from "./usePickerValue.types.js";
-import { PickerValidValue } from "../../models/index.js";
-/**
- * Manage the value lifecycle of all the pickers.
- */
-export declare const usePickerValue: <TValue extends PickerValidValue, TExternalProps extends UsePickerValueProps<TValue, any>>({
-  props,
-  valueManager,
-  valueType,
-  validator
-}: UsePickerValueParams<TValue, TExternalProps>) => UsePickerValueResponse<TValue, InferError<TExternalProps>>;

package/esm/internals/hooks/usePicker/usePickerValue.js

@@ -1,226 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import useEventCallback from '@mui/utils/useEventCallback';
-import { useOpenState } from "../useOpenState.js";
-import { useLocalizationContext, useUtils } from "../useUtils.js";
-import { useValidation } from "../../../validation/index.js";
-import { useValueWithTimezone } from "../useValueWithTimezone.js";
-/**
- * Manage the value lifecycle of all the pickers.
- */
-export const usePickerValue = ({
-  props,
-  valueManager,
-  valueType,
-  validator
-}) => {
-  const {
-    onAccept,
-    onChange,
-    value: inValueWithoutRenderTimezone,
-    defaultValue: inDefaultValue,
-    closeOnSelect = false,
-    timezone: timezoneProp,
-    referenceDate
-  } = props;
-  const {
-    current: defaultValue
-  } = React.useRef(inDefaultValue);
-  const {
-    current: isControlled
-  } = React.useRef(inValueWithoutRenderTimezone !== undefined);
-  const [previousTimezoneProp, setPreviousTimezoneProp] = React.useState(timezoneProp);
-
-  /* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
-  if (process.env.NODE_ENV !== 'production') {
-    React.useEffect(() => {
-      if (isControlled !== (inValueWithoutRenderTimezone !== undefined)) {
-        console.error([`MUI X: A component is changing the ${isControlled ? '' : 'un'}controlled value of a picker to be ${isControlled ? 'un' : ''}controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', `Decide between using a controlled or uncontrolled value` + 'for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
-      }
-    }, [inValueWithoutRenderTimezone]);
-    React.useEffect(() => {
-      if (!isControlled && defaultValue !== inDefaultValue) {
-        console.error([`MUI X: A component is changing the defaultValue of an uncontrolled picker after being initialized. ` + `To suppress this warning opt to use a controlled value.`].join('\n'));
-      }
-    }, [JSON.stringify(defaultValue)]);
-  }
-  /* eslint-enable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
-
-  const utils = useUtils();
-  const adapter = useLocalizationContext();
-  const {
-    open,
-    setOpen
-  } = useOpenState(props);
-  const {
-    timezone,
-    value: inValueWithTimezoneToRender,
-    handleValueChange
-  } = useValueWithTimezone({
-    timezone: timezoneProp,
-    value: inValueWithoutRenderTimezone,
-    defaultValue,
-    referenceDate,
-    onChange,
-    valueManager
-  });
-  const [dateState, setDateState] = React.useState(() => {
-    let initialValue;
-    if (inValueWithTimezoneToRender !== undefined) {
-      initialValue = inValueWithTimezoneToRender;
-    } else if (defaultValue !== undefined) {
-      initialValue = defaultValue;
-    } else {
-      initialValue = valueManager.emptyValue;
-    }
-    return {
-      draft: initialValue,
-      lastPublishedValue: initialValue,
-      lastCommittedValue: initialValue,
-      lastControlledValue: inValueWithoutRenderTimezone,
-      hasBeenModifiedSinceMount: false
-    };
-  });
-  const timezoneFromDraftValue = valueManager.getTimezone(utils, dateState.draft);
-  if (previousTimezoneProp !== timezoneProp) {
-    setPreviousTimezoneProp(timezoneProp);
-    if (timezoneProp && timezoneFromDraftValue && timezoneProp !== timezoneFromDraftValue) {
-      setDateState(prev => _extends({}, prev, {
-        draft: valueManager.setTimezone(utils, timezoneProp, prev.draft)
-      }));
-    }
-  }
-  const {
-    getValidationErrorForNewValue
-  } = useValidation({
-    props,
-    validator,
-    timezone,
-    value: dateState.draft,
-    onError: props.onError
-  });
-  const setValue = useEventCallback((newValue, options) => {
-    const {
-      changeImportance = 'accept',
-      skipPublicationIfPristine = false,
-      validationError,
-      shortcut,
-      shouldClose = changeImportance === 'accept'
-    } = options ?? {};
-    let shouldPublish;
-    let shouldCommit;
-    if (!skipPublicationIfPristine && !isControlled && !dateState.hasBeenModifiedSinceMount) {
-      // If the value is not controlled and the value has never been modified before,
-      // Then clicking on any value (including the one equal to `defaultValue`) should call `onChange` and `onAccept`
-      shouldPublish = true;
-      shouldCommit = changeImportance === 'accept';
-    } else {
-      shouldPublish = !valueManager.areValuesEqual(utils, newValue, dateState.lastPublishedValue);
-      shouldCommit = changeImportance === 'accept' && !valueManager.areValuesEqual(utils, newValue, dateState.lastCommittedValue);
-    }
-    setDateState(prev => _extends({}, prev, {
-      draft: newValue,
-      lastPublishedValue: shouldPublish ? newValue : prev.lastPublishedValue,
-      lastCommittedValue: shouldCommit ? newValue : prev.lastCommittedValue,
-      hasBeenModifiedSinceMount: true
-    }));
-    let cachedContext = null;
-    const getContext = () => {
-      if (!cachedContext) {
-        cachedContext = {
-          validationError: validationError == null ? getValidationErrorForNewValue(newValue) : validationError
-        };
-        if (shortcut) {
-          cachedContext.shortcut = shortcut;
-        }
-      }
-      return cachedContext;
-    };
-    if (shouldPublish) {
-      handleValueChange(newValue, getContext());
-    }
-    if (shouldCommit && onAccept) {
-      onAccept(newValue, getContext());
-    }
-    if (shouldClose) {
-      setOpen(false);
-    }
-  });
-  if (dateState.lastControlledValue !== inValueWithoutRenderTimezone) {
-    const isUpdateComingFromPicker = valueManager.areValuesEqual(utils, dateState.draft, inValueWithTimezoneToRender);
-    setDateState(prev => _extends({}, prev, {
-      lastControlledValue: inValueWithoutRenderTimezone
-    }, isUpdateComingFromPicker ? {} : {
-      lastCommittedValue: inValueWithTimezoneToRender,
-      lastPublishedValue: inValueWithTimezoneToRender,
-      draft: inValueWithTimezoneToRender,
-      hasBeenModifiedSinceMount: true
-    }));
-  }
-  const isValid = testedValue => {
-    const error = validator({
-      adapter,
-      value: testedValue,
-      timezone,
-      props
-    });
-    return !valueManager.hasError(error);
-  };
-  const clearValue = useEventCallback(() => setValue(valueManager.emptyValue));
-  const setValueToToday = useEventCallback(() => setValue(valueManager.getTodayValue(utils, timezone, valueType)));
-  const acceptValueChanges = useEventCallback(() => setValue(dateState.lastPublishedValue));
-  const cancelValueChanges = useEventCallback(() => setValue(dateState.lastCommittedValue, {
-    skipPublicationIfPristine: true
-  }));
-  const dismissViews = useEventCallback(() => {
-    setValue(dateState.lastPublishedValue, {
-      skipPublicationIfPristine: true
-    });
-  });
-  const setValueFromView = useEventCallback((newValue, selectionState = 'partial') => {
-    // TODO: Expose a new method (private?) like `setView` that only updates the draft value.
-    if (selectionState === 'shallow') {
-      setDateState(prev => _extends({}, prev, {
-        draft: newValue,
-        hasBeenModifiedSinceMount: true
-      }));
-    }
-    setValue(newValue, {
-      changeImportance: selectionState === 'finish' && closeOnSelect ? 'accept' : 'set'
-    });
-  });
-  const valueWithoutError = React.useMemo(() => valueManager.cleanValue(utils, dateState.draft), [utils, valueManager, dateState.draft]);
-  const viewResponse = {
-    value: valueWithoutError,
-    onChange: setValueFromView,
-    open,
-    setOpen
-  };
-  const actionsContextValue = React.useMemo(() => ({
-    setValue,
-    setOpen,
-    clearValue,
-    setValueToToday,
-    acceptValueChanges,
-    cancelValueChanges
-  }), [setValue, setOpen, clearValue, setValueToToday, acceptValueChanges, cancelValueChanges]);
-  const contextValue = React.useMemo(() => _extends({}, actionsContextValue, {
-    value: dateState.draft,
-    timezone,
-    open
-  }), [actionsContextValue, timezone, open, dateState.draft]);
-  const privateContextValue = React.useMemo(() => ({
-    dismissViews
-  }), [dismissViews]);
-  const providerParams = {
-    value: dateState.draft,
-    contextValue,
-    actionsContextValue,
-    privateContextValue,
-    isValidContextValue: isValid
-  };
-  return {
-    viewProps: viewResponse,
-    provider: providerParams
-  };
-};