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

package/internals/hooks/useNullableFieldPrivateContext.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PickerFieldPrivateContext = void 0;
+exports.useNullableFieldPrivateContext = useNullableFieldPrivateContext;
+var React = _interopRequireWildcard(require("react"));
+const PickerFieldPrivateContext = exports.PickerFieldPrivateContext = /*#__PURE__*/React.createContext(null);
+function useNullableFieldPrivateContext() {
+  return React.useContext(PickerFieldPrivateContext);
+}

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

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

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

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOrientation = useOrientation;
+var React = _interopRequireWildcard(require("react"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _utils = require("../../../utils/utils");
+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';
+}
+function useOrientation(views, customOrientation) {
+  const [orientation, setOrientation] = React.useState(getOrientation);
+  (0, _useEnhancedEffect.default)(() => {
+    const eventHandler = () => {
+      setOrientation(getOrientation());
+    };
+    window.addEventListener('orientationchange', eventHandler);
+    return () => {
+      window.removeEventListener('orientationchange', eventHandler);
+    };
+  }, []);
+  if ((0, _utils.arrayIncludes)(views, ['hours', 'minutes', 'seconds'])) {
+    // could not display 13:34:44 in landscape mode
+    return 'portrait';
+  }
+  return customOrientation ?? orientation;
+}

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

@@ -0,0 +1,19 @@
+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;
+};
+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/internals/hooks/usePicker/{usePickerValue.js → hooks/useValueAndOpenStates.js}

@@ -5,108 +5,126 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.usePickerValue = void 0;
+exports.useValueAndOpenStates = useValueAndOpenStates;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _warning = require("@mui/x-internals/warning");
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
-var _useOpenState = require("../useOpenState");
-var _useUtils = require("../useUtils");
-var _validation = require("../../../validation");
-var _useValueWithTimezone = require("../useValueWithTimezone");
-/**
- * Manage the value lifecycle of all the pickers.
- */
-const usePickerValue = ({
-  props,
-  valueManager,
-  valueType,
-  validator
-}) => {
+var _useValueWithTimezone = require("../../useValueWithTimezone");
+var _useUtils = require("../../useUtils");
+var _validation = require("../../../../validation");
+function useValueAndOpenStates(parameters) {
   const {
-    onAccept,
+    props,
+    valueManager,
+    validator
+  } = parameters;
+  const {
+    value: valueProp,
+    defaultValue: defaultValueProp,
     onChange,
-    value: inValueWithoutRenderTimezone,
-    defaultValue: inDefaultValue,
-    closeOnSelect = false,
+    referenceDate,
     timezone: timezoneProp,
-    referenceDate
+    onAccept,
+    closeOnSelect,
+    open: openProp,
+    onOpen,
+    onClose
   } = props;
   const {
     current: defaultValue
-  } = React.useRef(inDefaultValue);
+  } = React.useRef(defaultValueProp);
+  const {
+    current: isValueControlled
+  } = React.useRef(valueProp !== undefined);
   const {
-    current: isControlled
-  } = React.useRef(inValueWithoutRenderTimezone !== undefined);
+    current: isOpenControlled
+  } = React.useRef(openProp !== undefined);
   const [previousTimezoneProp, setPreviousTimezoneProp] = React.useState(timezoneProp);
+  const utils = (0, _useUtils.useUtils)();
+  if (process.env.NODE_ENV !== 'production') {
+    if (props.renderInput != null) {
+      (0, _warning.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 (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'));
+      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'));
       }
-    }, [inValueWithoutRenderTimezone]);
+    }, [valueProp]);
     React.useEffect(() => {
-      if (!isControlled && defaultValue !== inDefaultValue) {
+      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 utils = (0, _useUtils.useUtils)();
-  const adapter = (0, _useUtils.useLocalizationContext)();
-  const {
-    open,
-    setOpen
-  } = (0, _useOpenState.useOpenState)(props);
   const {
     timezone,
-    value: inValueWithTimezoneToRender,
+    value: valuePropWithTimezoneToRender,
     handleValueChange
   } = (0, _useValueWithTimezone.useValueWithTimezone)({
     timezone: timezoneProp,
-    value: inValueWithoutRenderTimezone,
+    value: valueProp,
     defaultValue,
     referenceDate,
     onChange,
     valueManager
   });
-  const [dateState, setDateState] = React.useState(() => {
+  const [state, setState] = React.useState(() => {
     let initialValue;
-    if (inValueWithTimezoneToRender !== undefined) {
-      initialValue = inValueWithTimezoneToRender;
+    if (valuePropWithTimezoneToRender !== undefined) {
+      initialValue = valuePropWithTimezoneToRender;
     } else if (defaultValue !== undefined) {
       initialValue = defaultValue;
     } else {
       initialValue = valueManager.emptyValue;
     }
     return {
+      open: false,
       draft: initialValue,
       lastPublishedValue: initialValue,
       lastCommittedValue: initialValue,
-      lastControlledValue: inValueWithoutRenderTimezone,
+      lastControlledValue: valueProp,
       hasBeenModifiedSinceMount: false
     };
   });
-  const timezoneFromDraftValue = valueManager.getTimezone(utils, dateState.draft);
-  if (previousTimezoneProp !== timezoneProp) {
-    setPreviousTimezoneProp(timezoneProp);
-    if (timezoneProp && timezoneFromDraftValue && timezoneProp !== timezoneFromDraftValue) {
-      setDateState(prev => (0, _extends2.default)({}, prev, {
-        draft: valueManager.setTimezone(utils, timezoneProp, prev.draft)
-      }));
-    }
-  }
   const {
     getValidationErrorForNewValue
   } = (0, _validation.useValidation)({
     props,
     validator,
     timezone,
-    value: dateState.draft,
+    value: state.draft,
     onError: props.onError
   });
+  const timezoneFromDraftValue = valueManager.getTimezone(utils, state.draft);
+  if (previousTimezoneProp !== timezoneProp) {
+    setPreviousTimezoneProp(timezoneProp);
+    if (timezoneProp && timezoneFromDraftValue && timezoneProp !== timezoneFromDraftValue) {
+      setState(prev => (0, _extends2.default)({}, prev, {
+        draft: valueManager.setTimezone(utils, timezoneProp, prev.draft)
+      }));
+    }
+  }
+  const setOpen = (0, _useEventCallback.default)(action => {
+    const newOpen = typeof action === 'function' ? action(state.open) : action;
+    if (!isOpenControlled) {
+      setState(prevState => (0, _extends2.default)({}, prevState, {
+        open: newOpen
+      }));
+    }
+    if (newOpen && onOpen) {
+      onOpen();
+    }
+    if (!newOpen && onClose) {
+      onClose();
+    }
+  });
   const setValue = (0, _useEventCallback.default)((newValue, options) => {
     const {
       changeImportance = 'accept',
@@ -117,16 +135,16 @@ const usePickerValue = ({
     } = options ?? {};
     let shouldPublish;
     let shouldCommit;
-    if (!skipPublicationIfPristine && !isControlled && !dateState.hasBeenModifiedSinceMount) {
+    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`
       shouldPublish = true;
       shouldCommit = changeImportance === 'accept';
     } else {
-      shouldPublish = !valueManager.areValuesEqual(utils, newValue, dateState.lastPublishedValue);
-      shouldCommit = changeImportance === 'accept' && !valueManager.areValuesEqual(utils, newValue, dateState.lastCommittedValue);
+      shouldPublish = !valueManager.areValuesEqual(utils, newValue, state.lastPublishedValue);
+      shouldCommit = changeImportance === 'accept' && !valueManager.areValuesEqual(utils, newValue, state.lastCommittedValue);
     }
-    setDateState(prev => (0, _extends2.default)({}, prev, {
+    setState(prev => (0, _extends2.default)({}, prev, {
       draft: newValue,
       lastPublishedValue: shouldPublish ? newValue : prev.lastPublishedValue,
       lastCommittedValue: shouldCommit ? newValue : prev.lastCommittedValue,
@@ -154,41 +172,21 @@ const usePickerValue = ({
       setOpen(false);
     }
   });
-  if (dateState.lastControlledValue !== inValueWithoutRenderTimezone) {
-    const isUpdateComingFromPicker = valueManager.areValuesEqual(utils, dateState.draft, inValueWithTimezoneToRender);
-    setDateState(prev => (0, _extends2.default)({}, prev, {
-      lastControlledValue: inValueWithoutRenderTimezone
+  if (state.lastControlledValue !== valueProp) {
+    const isUpdateComingFromPicker = valueManager.areValuesEqual(utils, state.draft, valuePropWithTimezoneToRender);
+    setState(prev => (0, _extends2.default)({}, prev, {
+      lastControlledValue: valueProp
     }, isUpdateComingFromPicker ? {} : {
-      lastCommittedValue: inValueWithTimezoneToRender,
-      lastPublishedValue: inValueWithTimezoneToRender,
-      draft: inValueWithTimezoneToRender,
+      lastCommittedValue: valuePropWithTimezoneToRender,
+      lastPublishedValue: valuePropWithTimezoneToRender,
+      draft: valuePropWithTimezoneToRender,
       hasBeenModifiedSinceMount: true
     }));
   }
-  const isValid = testedValue => {
-    const error = validator({
-      adapter,
-      value: testedValue,
-      timezone,
-      props
-    });
-    return !valueManager.hasError(error);
-  };
-  const clearValue = (0, _useEventCallback.default)(() => setValue(valueManager.emptyValue));
-  const setValueToToday = (0, _useEventCallback.default)(() => setValue(valueManager.getTodayValue(utils, timezone, valueType)));
-  const acceptValueChanges = (0, _useEventCallback.default)(() => setValue(dateState.lastPublishedValue));
-  const cancelValueChanges = (0, _useEventCallback.default)(() => setValue(dateState.lastCommittedValue, {
-    skipPublicationIfPristine: true
-  }));
-  const dismissViews = (0, _useEventCallback.default)(() => {
-    setValue(dateState.lastPublishedValue, {
-      skipPublicationIfPristine: true
-    });
-  });
   const setValueFromView = (0, _useEventCallback.default)((newValue, selectionState = 'partial') => {
     // TODO: Expose a new method (private?) like `setView` that only updates the draft value.
     if (selectionState === 'shallow') {
-      setDateState(prev => (0, _extends2.default)({}, prev, {
+      setState(prev => (0, _extends2.default)({}, prev, {
         draft: newValue,
         hasBeenModifiedSinceMount: true
       }));
@@ -197,39 +195,24 @@ const usePickerValue = ({
       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(() => (0, _extends2.default)({}, 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
-  };
+
+  // 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 => (0, _extends2.default)({}, prevState, {
+        open: openProp
+      }));
+    }
+  }, [isOpenControlled, openProp]);
   return {
-    viewProps: viewResponse,
-    provider: providerParams
+    timezone,
+    state,
+    setValue,
+    setValueFromView,
+    setOpen
   };
-};
-exports.usePickerValue = usePickerValue;
+}

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

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

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

@@ -1,4 +1,4 @@
-import { UsePickerParams, UsePickerProps, UsePickerReturnValue } from "./usePicker.types.js";
+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,
@@ -8,7 +8,7 @@ export declare const usePicker: <TValue extends PickerValidValue, TView extends
   variant,
   validator,
   autoFocusView,
-  rendererInterceptor,
-  fieldRef,
-  localeText
-}: UsePickerParams<TValue, TView, TExternalProps>) => UsePickerReturnValue<TValue>;
+  rendererInterceptor: RendererInterceptor,
+  localeText,
+  viewContainerRole
+}: UsePickerParameters<TValue, TView, TExternalProps>) => UsePickerReturnValue<TValue>;