@mui/x-date-pickers 8.0.0-beta.2 → 8.0.0

package/modern/internals/hooks/useMobilePicker/useMobilePicker.d.ts

@@ -1,15 +0,0 @@
-import * as React from 'react';
-import { UseMobilePickerParams, UseMobilePickerProps } from "./useMobilePicker.types.js";
-import { DateOrTimeViewWithMeridiem } from "../../models/index.js";
-/**
- * Hook managing all the single-date mobile pickers:
- * - MobileDatePicker
- * - MobileDateTimePicker
- * - MobileTimePicker
- */
-export declare const useMobilePicker: <TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobilePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>>({
-  props,
-  ...pickerParams
-}: UseMobilePickerParams<TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
-  renderPicker: () => React.JSX.Element;
-};

package/modern/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -1,91 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["props"],
-  _excluded2 = ["ownerState"];
-import * as React from 'react';
-import useSlotProps from '@mui/utils/useSlotProps';
-import { PickersModalDialog } from "../../components/PickersModalDialog.js";
-import { usePicker } from "../usePicker/index.js";
-import { PickersLayout } from "../../../PickersLayout/index.js";
-import { PickerProvider } from "../../components/PickerProvider.js";
-import { PickerFieldUIContextProvider } from "../../components/PickerFieldUI.js";
-
-/**
- * Hook managing all the single-date mobile pickers:
- * - MobileDatePicker
- * - MobileDateTimePicker
- * - MobileTimePicker
- */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const useMobilePicker = _ref => {
-  let {
-      props
-    } = _ref,
-    pickerParams = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const {
-    slots,
-    slotProps: innerSlotProps,
-    label,
-    inputRef,
-    localeText
-  } = props;
-  const {
-    providerProps,
-    renderCurrentView,
-    ownerState
-  } = usePicker(_extends({}, pickerParams, {
-    props,
-    localeText,
-    autoFocusView: true,
-    viewContainerRole: 'dialog',
-    variant: 'mobile'
-  }));
-  const labelId = providerProps.privateContextValue.labelId;
-  const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
-  const Field = slots.field;
-  const _useSlotProps = useSlotProps({
-      elementType: Field,
-      externalSlotProps: innerSlotProps?.field,
-      additionalProps: _extends({}, isToolbarHidden && {
-        id: labelId
-      }),
-      ownerState
-    }),
-    fieldProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
-  const Layout = slots.layout ?? PickersLayout;
-  let labelledById = labelId;
-  if (isToolbarHidden) {
-    if (label) {
-      labelledById = `${labelId}-label`;
-    } else {
-      labelledById = undefined;
-    }
-  }
-  const slotProps = _extends({}, innerSlotProps, {
-    toolbar: _extends({}, innerSlotProps?.toolbar, {
-      titleId: labelId
-    }),
-    mobilePaper: _extends({
-      'aria-labelledby': labelledById
-    }, innerSlotProps?.mobilePaper)
-  });
-  const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
-    children: /*#__PURE__*/_jsxs(PickerFieldUIContextProvider, {
-      slots: slots,
-      slotProps: slotProps,
-      inputRef: inputRef,
-      children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps)), /*#__PURE__*/_jsx(PickersModalDialog, {
-        slots: slots,
-        slotProps: slotProps,
-        children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
-          slots: slots,
-          slotProps: slotProps,
-          children: renderCurrentView()
-        }))
-      })]
-    })
-  }));
-  return {
-    renderPicker
-  };
-};

package/modern/internals/hooks/useMobilePicker/useMobilePicker.types.d.ts

@@ -1,35 +0,0 @@
-import * as React from 'react';
-import { MakeRequired, SlotComponentPropsFromProps } from '@mui/x-internals/types';
-import { BasePickerProps } from "../../models/props/basePickerProps.js";
-import { PickersModalDialogSlots, PickersModalDialogSlotProps } from "../../components/PickersModalDialog.js";
-import { UsePickerParameters, UsePickerNonStaticProps, UsePickerProps } from "../usePicker/index.js";
-import { PickerFieldSlotProps, PickerOwnerState } from "../../../models/index.js";
-import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, PickersLayoutSlotProps } from "../../../PickersLayout/PickersLayout.types.js";
-import { DateOrTimeViewWithMeridiem, PickerValue } from "../../models/index.js";
-import { PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from "../../components/PickerFieldUI.js";
-export interface UseMobilePickerSlots extends PickersModalDialogSlots, ExportedPickersLayoutSlots<PickerValue>, PickerFieldUISlotsFromContext {
-  /**
-   * Component used to enter the date with the keyboard.
-   */
-  field: React.ElementType;
-}
-export interface ExportedUseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends PickersModalDialogSlotProps, ExportedPickersLayoutSlotProps<PickerValue>, PickerFieldUISlotPropsFromContext {
-  field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerValue, TEnableAccessibleFieldDOMStructure>, {}, PickerOwnerState>;
-}
-export interface UseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerValue>, 'toolbar'> {}
-export interface MobileOnlyPickerProps extends UsePickerNonStaticProps {}
-export interface UseMobilePickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerProps<PickerValue, TView, TError, any>> extends BasePickerProps<PickerValue, TView, TError, TExternalProps>, MakeRequired<MobileOnlyPickerProps, 'format'> {
-  /**
-   * Overridable component slots.
-   * @default {}
-   */
-  slots: UseMobilePickerSlots;
-  /**
-   * The props used for each component slot.
-   * @default {}
-   */
-  slotProps?: UseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
-}
-export interface UseMobilePickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobilePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParameters<PickerValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator' | 'ref'> {
-  props: TExternalProps;
-}

package/modern/internals/hooks/useMobilePicker/useMobilePicker.types.js

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

package/modern/internals/hooks/useNullableFieldPrivateContext.d.ts

@@ -1,9 +0,0 @@
-import * as React from 'react';
-import type { UseFieldInternalProps } from './useField';
-import { FieldRef } from "../../models/index.js";
-import { PickerRangeValue, PickerValue } from "../models/index.js";
-export declare const PickerFieldPrivateContext: React.Context<PickerFieldPrivateContextValue | null>;
-export declare function useNullableFieldPrivateContext(): PickerFieldPrivateContextValue | null;
-export interface PickerFieldPrivateContextValue extends Pick<UseFieldInternalProps<any, any, any>, 'formatDensity' | 'enableAccessibleFieldDOMStructure' | 'selectedSections' | 'onSelectedSectionsChange'> {
-  fieldRef: React.RefObject<FieldRef<PickerValue> | FieldRef<PickerRangeValue> | null>;
-}

package/modern/internals/hooks/useNullableFieldPrivateContext.js

@@ -1,5 +0,0 @@
-import * as React from 'react';
-export const PickerFieldPrivateContext = /*#__PURE__*/React.createContext(null);
-export function useNullableFieldPrivateContext() {
-  return React.useContext(PickerFieldPrivateContext);
-}

package/modern/internals/hooks/useNullablePickerContext.d.ts

@@ -1,5 +0,0 @@
-/**
- * Returns the context passed by the Picker wrapping the current component.
- * If the context is not found, returns `null`.
- */
-export declare const useNullablePickerContext: () => import("..").PickerContextValue<any, any, any> | null;

package/modern/internals/hooks/useNullablePickerContext.js

@@ -1,10 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { PickerContext } from "../../hooks/usePickerContext.js";
-
-/**
- * Returns the context passed by the Picker wrapping the current component.
- * If the context is not found, returns `null`.
- */
-export const useNullablePickerContext = () => React.useContext(PickerContext);

package/modern/internals/hooks/usePicker/hooks/useOrientation.d.ts

@@ -1,2 +0,0 @@
-import { DateOrTimeViewWithMeridiem, PickerOrientation } from "../../../models/index.js";
-export declare function useOrientation(views: readonly DateOrTimeViewWithMeridiem[], customOrientation: PickerOrientation | undefined): PickerOrientation;

package/modern/internals/hooks/usePicker/hooks/useOrientation.js

@@ -1,34 +0,0 @@
-import * as React from 'react';
-import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import { arrayIncludes } from "../../../utils/utils.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 function useOrientation(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;
-}

package/modern/internals/hooks/usePicker/hooks/useValueAndOpenStates.d.ts

@@ -1,21 +0,0 @@
-import * as React from 'react';
-import { DateOrTimeViewWithMeridiem, PickerValidValue, PickerValueManager } from "../../../models/index.js";
-import { PickerSelectionState, UsePickerProps, UsePickerState } from "../usePicker.types.js";
-import { InferError } from "../../../../models/index.js";
-import { SetValueActionOptions } from "../../../components/PickerProvider.js";
-import { Validator } from "../../../../validation/index.js";
-export declare function useValueAndOpenStates<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerProps<TValue, TView, any, any>>(parameters: UsePickerDateStateParameters<TValue, TView, TExternalProps>): {
-  timezone: string;
-  state: UsePickerState<TValue>;
-  setValue: (newValue: TValue, options?: SetValueActionOptions<InferError<TExternalProps>>) => void;
-  setValueFromView: (newValue: TValue, selectionState?: PickerSelectionState) => void;
-  setOpen: (action: React.SetStateAction<boolean>) => void;
-  value: TValue;
-  viewValue: TValue;
-};
-interface UsePickerDateStateParameters<TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerProps<TValue, TView, any, any>> {
-  props: TExternalProps;
-  valueManager: PickerValueManager<TValue, InferError<TExternalProps>>;
-  validator: Validator<TValue, InferError<TExternalProps>, TExternalProps>;
-}
-export {};

package/modern/internals/hooks/usePicker/hooks/useValueAndOpenStates.js

@@ -1,191 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { warnOnce } from '@mui/x-internals/warning';
-import useEventCallback from '@mui/utils/useEventCallback';
-import { useControlledValue } from "../../useControlledValue.js";
-import { useUtils } from "../../useUtils.js";
-import { useValidation } from "../../../../validation/index.js";
-export function useValueAndOpenStates(parameters) {
-  const {
-    props,
-    valueManager,
-    validator
-  } = parameters;
-  const {
-    value: valueProp,
-    defaultValue: defaultValueProp,
-    onChange,
-    referenceDate,
-    timezone: timezoneProp,
-    onAccept,
-    closeOnSelect,
-    open: openProp,
-    onOpen,
-    onClose
-  } = props;
-  const {
-    current: defaultValue
-  } = React.useRef(defaultValueProp);
-  const {
-    current: isValueControlled
-  } = React.useRef(valueProp !== undefined);
-  const {
-    current: isOpenControlled
-  } = React.useRef(openProp !== undefined);
-  const utils = useUtils();
-  if (process.env.NODE_ENV !== 'production') {
-    if (props.renderInput != null) {
-      warnOnce(['MUI X: The `renderInput` prop has been removed in version 6.0 of the Date and Time Pickers.', 'You can replace it with the `textField` component slot in most cases.', 'For more information, please have a look at the migration guide (https://mui.com/x/migration/migration-pickers-v5/#input-renderer-required-in-v5).']);
-    }
-  }
-
-  /* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
-  if (process.env.NODE_ENV !== 'production') {
-    React.useEffect(() => {
-      if (isValueControlled !== (valueProp !== undefined)) {
-        console.error([`MUI X: A component is changing the ${isValueControlled ? '' : 'un'}controlled value of a Picker to be ${isValueControlled ? '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'));
-      }
-    }, [valueProp]);
-    React.useEffect(() => {
-      if (!isValueControlled && defaultValue !== defaultValueProp) {
-        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 {
-    timezone,
-    value,
-    handleValueChange
-  } = useControlledValue({
-    name: 'a picker component',
-    timezone: timezoneProp,
-    value: valueProp,
-    defaultValue,
-    referenceDate,
-    onChange,
-    valueManager
-  });
-  const [state, setState] = React.useState(() => ({
-    open: false,
-    lastExternalValue: value,
-    clockShallowValue: undefined,
-    lastCommittedValue: value,
-    hasBeenModifiedSinceMount: false
-  }));
-  const {
-    getValidationErrorForNewValue
-  } = useValidation({
-    props,
-    validator,
-    timezone,
-    value,
-    onError: props.onError
-  });
-  const setOpen = useEventCallback(action => {
-    const newOpen = typeof action === 'function' ? action(state.open) : action;
-    if (!isOpenControlled) {
-      setState(prevState => _extends({}, prevState, {
-        open: newOpen
-      }));
-    }
-    if (newOpen && onOpen) {
-      onOpen();
-    }
-    if (!newOpen && onClose) {
-      onClose();
-    }
-  });
-  const setValue = useEventCallback((newValue, options) => {
-    const {
-      changeImportance = 'accept',
-      skipPublicationIfPristine = false,
-      validationError,
-      shortcut,
-      shouldClose = changeImportance === 'accept'
-    } = options ?? {};
-    let shouldFireOnChange;
-    let shouldFireOnAccept;
-    if (!skipPublicationIfPristine && !isValueControlled && !state.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`
-      shouldFireOnChange = true;
-      shouldFireOnAccept = changeImportance === 'accept';
-    } else {
-      shouldFireOnChange = !valueManager.areValuesEqual(utils, newValue, value);
-      shouldFireOnAccept = changeImportance === 'accept' && !valueManager.areValuesEqual(utils, newValue, state.lastCommittedValue);
-    }
-    setState(prevState => _extends({}, prevState, {
-      // We reset the shallow value whenever we fire onChange.
-      clockShallowValue: shouldFireOnChange ? undefined : prevState.clockShallowValue,
-      lastCommittedValue: shouldFireOnAccept ? value : prevState.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 (shouldFireOnChange) {
-      handleValueChange(newValue, getContext());
-    }
-    if (shouldFireOnAccept && onAccept) {
-      onAccept(newValue, getContext());
-    }
-    if (shouldClose) {
-      setOpen(false);
-    }
-  });
-
-  // If `prop.value` changes, we update the state to reflect the new value
-  if (value !== state.lastExternalValue) {
-    setState(prevState => _extends({}, prevState, {
-      lastExternalValue: value,
-      clockShallowValue: undefined,
-      hasBeenModifiedSinceMount: true
-    }));
-  }
-  const setValueFromView = useEventCallback((newValue, selectionState = 'partial') => {
-    // TODO: Expose a new method (private?) like `setView` that only updates the clock shallow value.
-    if (selectionState === 'shallow') {
-      setState(prev => _extends({}, prev, {
-        clockShallowValue: newValue,
-        hasBeenModifiedSinceMount: true
-      }));
-    }
-    setValue(newValue, {
-      changeImportance: selectionState === 'finish' && closeOnSelect ? 'accept' : 'set'
-    });
-  });
-
-  // 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 (isOpenControlled) {
-      if (openProp === undefined) {
-        throw new Error('You must not mix controlling and uncontrolled mode for `open` prop');
-      }
-      setState(prevState => _extends({}, prevState, {
-        open: openProp
-      }));
-    }
-  }, [isOpenControlled, openProp]);
-  const viewValue = React.useMemo(() => valueManager.cleanValue(utils, state.clockShallowValue === undefined ? value : state.clockShallowValue), [utils, valueManager, state.clockShallowValue, value]);
-  return {
-    timezone,
-    state,
-    setValue,
-    setValueFromView,
-    setOpen,
-    value,
-    viewValue
-  };
-}

package/modern/internals/hooks/usePicker/index.d.ts

@@ -1,2 +0,0 @@
-export { usePicker } from "./usePicker.js";
-export type { UsePickerProps, UsePickerBaseProps, UsePickerParameters, PickerSelectionState, PickerViewsRendererProps, PickerViewRendererLookup, PickerRendererInterceptorProps, PickerViewRenderer, UsePickerNonStaticProps } from './usePicker.types';

package/modern/internals/hooks/usePicker/index.js

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

package/modern/internals/hooks/usePicker/usePicker.d.ts

@@ -1,14 +0,0 @@
-import { UsePickerParameters, UsePickerProps, UsePickerReturnValue } from "./usePicker.types.js";
-import { DateOrTimeViewWithMeridiem, PickerValidValue } from "../../models/index.js";
-export declare const usePicker: <TValue extends PickerValidValue, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UsePickerProps<TValue, TView, any, any>>({
-  ref,
-  props,
-  valueManager,
-  valueType,
-  variant,
-  validator,
-  autoFocusView,
-  rendererInterceptor: RendererInterceptor,
-  localeText,
-  viewContainerRole
-}: UsePickerParameters<TValue, TView, TExternalProps>) => UsePickerReturnValue<TValue>;