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

package/internals/components/PickerPopper/PickerPopper.d.ts

@@ -4,68 +4,65 @@ import { PopperProps as MuiPopperProps, PopperPlacementType, PopperProps } from
 import { TrapFocusProps as MuiTrapFocusProps } from '@mui/material/Unstable_TrapFocus';
 import { TransitionProps as MuiTransitionProps } from '@mui/material/transitions';
 import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
-import { PickerPopperClasses } from './pickerPopperClasses';
-import { PickerOwnerState } from '../../../models';
+import { PickerPopperClasses } from "./pickerPopperClasses.js";
+import { PickerOwnerState } from "../../../models/index.js";
 interface PickerPopperOwnerState extends PickerOwnerState {
-    popperPlacement: PopperPlacementType;
+  popperPlacement: PopperPlacementType;
 }
 export interface PickerPopperSlots {
-    /**
-     * Custom component for the paper rendered inside the desktop picker's Popper.
-     * @default PickerPopperPaper
-     */
-    desktopPaper?: React.JSXElementConstructor<MuiPaperProps>;
-    /**
-     * Custom component for the desktop popper [Transition](https://mui.com/material-ui/transitions/).
-     * @default Grow or Fade from '@mui/material' when `reduceAnimations` is `true`.
-     */
-    desktopTransition?: React.JSXElementConstructor<MuiTransitionProps>;
-    /**
-     * Custom component for trapping the focus inside the views on desktop.
-     * @default TrapFocus from '@mui/material'.
-     */
-    desktopTrapFocus?: React.JSXElementConstructor<MuiTrapFocusProps>;
-    /**
-     * Custom component for the popper inside which the views are rendered on desktop.
-     * @default Popper from '@mui/material'.
-     */
-    popper?: React.ElementType<MuiPopperProps>;
+  /**
+   * Custom component for the paper rendered inside the desktop picker's Popper.
+   * @default PickerPopperPaper
+   */
+  desktopPaper?: React.JSXElementConstructor<MuiPaperProps>;
+  /**
+   * Custom component for the desktop popper [Transition](https://mui.com/material-ui/transitions/).
+   * @default Grow or Fade from '@mui/material' when `reduceAnimations` is `true`.
+   */
+  desktopTransition?: React.JSXElementConstructor<MuiTransitionProps>;
+  /**
+   * Custom component for trapping the focus inside the views on desktop.
+   * @default TrapFocus from '@mui/material'.
+   */
+  desktopTrapFocus?: React.JSXElementConstructor<MuiTrapFocusProps>;
+  /**
+   * Custom component for the popper inside which the views are rendered on desktop.
+   * @default Popper from '@mui/material'.
+   */
+  popper?: React.ElementType<MuiPopperProps>;
 }
 export interface PickerPopperSlotProps {
-    /**
-     * Props passed down to the desktop [Paper](https://mui.com/material-ui/api/paper/) component.
-     */
-    desktopPaper?: SlotComponentPropsFromProps<PaperProps, {}, PickerPopperOwnerState>;
-    /**
-     * Props passed down to the desktop [Transition](https://mui.com/material-ui/transitions/) component.
-     */
-    desktopTransition?: Partial<MuiTransitionProps>;
-    /**
-     * Props passed down to the [FocusTrap](https://mui.com/base-ui/react-focus-trap/) component on desktop.
-     */
-    desktopTrapFocus?: Partial<MuiTrapFocusProps>;
-    /**
-     * Props passed down to [Popper](https://mui.com/material-ui/api/popper/) component.
-     */
-    popper?: SlotComponentPropsFromProps<PopperProps, {}, PickerPopperOwnerState>;
+  /**
+   * Props passed down to the desktop [Paper](https://mui.com/material-ui/api/paper/) component.
+   */
+  desktopPaper?: SlotComponentPropsFromProps<PaperProps, {}, PickerPopperOwnerState>;
+  /**
+   * Props passed down to the desktop [Transition](https://mui.com/material-ui/transitions/) component.
+   */
+  desktopTransition?: Partial<MuiTransitionProps>;
+  /**
+   * Props passed down to the [FocusTrap](https://mui.com/base-ui/react-focus-trap/) component on desktop.
+   */
+  desktopTrapFocus?: Partial<MuiTrapFocusProps>;
+  /**
+   * Props passed down to [Popper](https://mui.com/material-ui/api/popper/) component.
+   */
+  popper?: SlotComponentPropsFromProps<PopperProps, {}, PickerPopperOwnerState>;
 }
 export interface ExportedPickerPopperProps {
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<PickerPopperClasses>;
-    /**
-     * @default "bottom-start"
-     */
-    placement?: MuiPopperProps['placement'];
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<PickerPopperClasses>;
+  /**
+   * @default "bottom-start"
+   */
+  placement?: MuiPopperProps['placement'];
 }
 export interface PickerPopperProps extends ExportedPickerPopperProps {
-    role: 'tooltip' | 'dialog';
-    containerRef?: React.Ref<HTMLDivElement>;
-    children?: React.ReactNode;
-    onBlur?: () => void;
-    slots?: PickerPopperSlots;
-    slotProps?: PickerPopperSlotProps;
+  children?: React.ReactNode;
+  slots?: PickerPopperSlots;
+  slotProps?: PickerPopperSlotProps;
 }
 export declare function PickerPopper(inProps: PickerPopperProps): React.JSX.Element;
-export {};
+export {};

package/internals/components/PickerPopper/PickerPopper.js

@@ -1,28 +1,36 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+"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.PickerPopper = PickerPopper;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
+var _Grow = _interopRequireDefault(require("@mui/material/Grow"));
+var _Fade = _interopRequireDefault(require("@mui/material/Fade"));
+var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
+var _Popper = _interopRequireDefault(require("@mui/material/Popper"));
+var _Unstable_TrapFocus = _interopRequireDefault(require("@mui/material/Unstable_TrapFocus"));
+var _utils = require("@mui/utils");
+var _styles = require("@mui/material/styles");
+var _pickerPopperClasses = require("./pickerPopperClasses");
+var _utils2 = require("../../utils/utils");
+var _usePickerPrivateContext = require("../../hooks/usePickerPrivateContext");
+var _hooks = require("../../../hooks");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["PaperComponent", "ownerState", "children", "paperSlotProps", "paperClasses", "onPaperClick", "onPaperTouchStart"];
-import * as React from 'react';
-import useSlotProps from '@mui/utils/useSlotProps';
-import Grow from '@mui/material/Grow';
-import Fade from '@mui/material/Fade';
-import MuiPaper from '@mui/material/Paper';
-import MuiPopper from '@mui/material/Popper';
-import BaseFocusTrap from '@mui/material/Unstable_TrapFocus';
-import { unstable_useForkRef as useForkRef, unstable_useEventCallback as useEventCallback, unstable_ownerDocument as ownerDocument, unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled, useThemeProps } from '@mui/material/styles';
-import { getPickerPopperUtilityClass } from "./pickerPopperClasses.js";
-import { getActiveElement } from "../../utils/utils.js";
-import { usePickerPrivateContext } from "../../hooks/usePickerPrivateContext.js";
-import { usePickerContext } from "../../../hooks/index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     paper: ['paper']
   };
-  return composeClasses(slots, getPickerPopperUtilityClass, classes);
+  return (0, _utils.unstable_composeClasses)(slots, _pickerPopperClasses.getPickerPopperUtilityClass, classes);
 };
-const PickerPopperRoot = styled(MuiPopper, {
+const PickerPopperRoot = (0, _styles.styled)(_Popper.default, {
   name: 'MuiPickerPopper',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
@@ -31,7 +39,7 @@ const PickerPopperRoot = styled(MuiPopper, {
 }) => ({
   zIndex: theme.zIndex.modal
 }));
-const PickerPopperPaper = styled(MuiPaper, {
+const PickerPopperPaper = (0, _styles.styled)(_Paper.default, {
   name: 'MuiPickerPopper',
   slot: 'Paper',
   overridesResolver: (_, styles) => styles.paper
@@ -87,7 +95,7 @@ function useClickAwayListener(active, onClickAway) {
   // clicking a checkbox to check it, hitting a button to submit a form,
   // and hitting left arrow to move the cursor in a text input etc.
   // Only special HTML elements have these default behaviors.
-  const handleClickAway = useEventCallback(event => {
+  const handleClickAway = (0, _utils.unstable_useEventCallback)(event => {
     if (!activatedRef.current) {
       return;
     }
@@ -96,7 +104,7 @@ function useClickAwayListener(active, onClickAway) {
     // we can only be confident with a positive value.
     const insideReactTree = syntheticEventRef.current;
     syntheticEventRef.current = false;
-    const doc = ownerDocument(nodeRef.current);
+    const doc = (0, _utils.unstable_ownerDocument)(nodeRef.current);
 
     // 1. IE11 support, which trigger the handleClickAway even after the unbind
     // 2. The child might render null.
@@ -131,7 +139,7 @@ function useClickAwayListener(active, onClickAway) {
   };
   React.useEffect(() => {
     if (active) {
-      const doc = ownerDocument(nodeRef.current);
+      const doc = (0, _utils.unstable_ownerDocument)(nodeRef.current);
       const handleTouchMove = () => {
         movedRef.current = true;
       };
@@ -150,7 +158,7 @@ function useClickAwayListener(active, onClickAway) {
     // Or if this is a timing related issues due to different Transition components
     // Once we get rid of all the manual scheduling (for example setTimeout(update, 0)) we can revisit this code+test.
     if (active) {
-      const doc = ownerDocument(nodeRef.current);
+      const doc = (0, _utils.unstable_ownerDocument)(nodeRef.current);
       doc.addEventListener('click', handleClickAway);
       return () => {
         doc.removeEventListener('click', handleClickAway);
@@ -174,8 +182,8 @@ const PickerPopperPaperWrapper = /*#__PURE__*/React.forwardRef((props, ref) => {
       // picks up the style props provided by `Transition`
       // https://mui.com/material-ui/transitions/#child-requirement
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const paperProps = useSlotProps({
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const paperProps = (0, _useSlotProps.default)({
     elementType: PaperComponent,
     externalSlotProps: paperSlotProps,
     additionalProps: {
@@ -186,7 +194,7 @@ const PickerPopperPaperWrapper = /*#__PURE__*/React.forwardRef((props, ref) => {
     className: paperClasses,
     ownerState
   });
-  return /*#__PURE__*/_jsx(PaperComponent, _extends({}, other, paperProps, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PaperComponent, (0, _extends2.default)({}, other, paperProps, {
     onClick: event => {
       onPaperClick(event);
       paperProps.onClick?.(event);
@@ -199,16 +207,13 @@ const PickerPopperPaperWrapper = /*#__PURE__*/React.forwardRef((props, ref) => {
     children: children
   }));
 });
-export function PickerPopper(inProps) {
-  const props = useThemeProps({
+function PickerPopper(inProps) {
+  const props = (0, _styles.useThemeProps)({
     props: inProps,
     name: 'MuiPickerPopper'
   });
   const {
     children,
-    containerRef = null,
-    onBlur,
-    role,
     placement = 'bottom-start',
     slots,
     slotProps,
@@ -217,12 +222,14 @@ export function PickerPopper(inProps) {
   const {
     open,
     triggerRef,
+    popupRef,
     reduceAnimations
-  } = usePickerContext();
+  } = (0, _hooks.usePickerContext)();
   const {
     dismissViews,
-    doesTheCurrentViewHasAnUI
-  } = usePickerPrivateContext();
+    doesTheCurrentViewHasAnUI,
+    viewContainerRole
+  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
   React.useEffect(() => {
     function handleKeyDown(nativeEvent) {
       if (open && nativeEvent.key === 'Escape') {
@@ -236,11 +243,11 @@ export function PickerPopper(inProps) {
   }, [dismissViews, open]);
   const lastFocusedElementRef = React.useRef(null);
   React.useEffect(() => {
-    if (role === 'tooltip' || !doesTheCurrentViewHasAnUI()) {
+    if (viewContainerRole === 'tooltip' || !doesTheCurrentViewHasAnUI()) {
       return;
     }
     if (open) {
-      lastFocusedElementRef.current = getActiveElement(document);
+      lastFocusedElementRef.current = (0, _utils2.getActiveElement)(document);
     } else if (lastFocusedElementRef.current && lastFocusedElementRef.current instanceof HTMLElement) {
       // make sure the button is flushed with updated label, before returning focus to it
       // avoids issue, where screen reader could fail to announce selected date after selection
@@ -250,18 +257,31 @@ export function PickerPopper(inProps) {
         }
       });
     }
-  }, [open, role, doesTheCurrentViewHasAnUI]);
-  const [clickAwayRef, onPaperClick, onPaperTouchStart] = useClickAwayListener(open, onBlur ?? dismissViews);
-  const paperRef = React.useRef(null);
-  const handleRef = useForkRef(paperRef, containerRef);
-  const handlePaperRef = useForkRef(handleRef, clickAwayRef);
+  }, [open, viewContainerRole, doesTheCurrentViewHasAnUI]);
   const classes = useUtilityClasses(classesProp);
   const {
-    ownerState: pickerOwnerState
-  } = usePickerPrivateContext();
-  const ownerState = _extends({}, pickerOwnerState, {
+    ownerState: pickerOwnerState,
+    rootRefObject
+  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
+  const ownerState = (0, _extends2.default)({}, pickerOwnerState, {
     popperPlacement: placement
   });
+  const handleClickAway = (0, _utils.unstable_useEventCallback)(() => {
+    if (viewContainerRole === 'tooltip') {
+      (0, _utils2.executeInTheNextEventLoopTick)(() => {
+        if (rootRefObject.current?.contains((0, _utils2.getActiveElement)(document)) || popupRef.current?.contains((0, _utils2.getActiveElement)(document))) {
+          return;
+        }
+        dismissViews();
+      });
+    } else {
+      dismissViews();
+    }
+  });
+  const [clickAwayRef, onPaperClick, onPaperTouchStart] = useClickAwayListener(open, handleClickAway);
+  const paperRef = React.useRef(null);
+  const handleRef = (0, _utils.unstable_useForkRef)(paperRef, popupRef);
+  const handlePaperRef = (0, _utils.unstable_useForkRef)(handleRef, clickAwayRef);
   const handleKeyDown = event => {
     if (event.key === 'Escape') {
       // stop the propagation to avoid closing parent modal
@@ -269,16 +289,16 @@ export function PickerPopper(inProps) {
       dismissViews();
     }
   };
-  const Transition = slots?.desktopTransition ?? reduceAnimations ? Fade : Grow;
-  const FocusTrap = slots?.desktopTrapFocus ?? BaseFocusTrap;
+  const Transition = slots?.desktopTransition ?? reduceAnimations ? _Fade.default : _Grow.default;
+  const FocusTrap = slots?.desktopTrapFocus ?? _Unstable_TrapFocus.default;
   const Paper = slots?.desktopPaper ?? PickerPopperPaper;
   const Popper = slots?.popper ?? PickerPopperRoot;
-  const popperProps = useSlotProps({
+  const popperProps = (0, _useSlotProps.default)({
     elementType: Popper,
     externalSlotProps: slotProps?.popper,
     additionalProps: {
       transition: true,
-      role,
+      role: viewContainerRole == null ? undefined : viewContainerRole,
       open,
       placement,
       anchorEl: triggerRef.current,
@@ -287,10 +307,10 @@ export function PickerPopper(inProps) {
     className: classes.root,
     ownerState
   });
-  return /*#__PURE__*/_jsx(Popper, _extends({}, popperProps, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Popper, (0, _extends2.default)({}, popperProps, {
     children: ({
       TransitionProps
-    }) => /*#__PURE__*/_jsx(FocusTrap, _extends({
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(FocusTrap, (0, _extends2.default)({
       open: open,
       disableAutoFocus: true
       // pickers are managing focus position manually
@@ -298,11 +318,11 @@ export function PickerPopper(inProps) {
       // which would force screen readers to read too old label
       ,
       disableRestoreFocus: true,
-      disableEnforceFocus: role === 'tooltip',
+      disableEnforceFocus: viewContainerRole === 'tooltip',
       isEnabled: () => true
     }, slotProps?.desktopTrapFocus, {
-      children: /*#__PURE__*/_jsx(Transition, _extends({}, TransitionProps, slotProps?.desktopTransition, {
-        children: /*#__PURE__*/_jsx(PickerPopperPaperWrapper, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Transition, (0, _extends2.default)({}, TransitionProps, slotProps?.desktopTransition, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PickerPopperPaperWrapper, {
           PaperComponent: Paper,
           ownerState: ownerState,
           ref: handlePaperRef,

package/internals/components/PickerPopper/index.d.ts

@@ -1,4 +1,4 @@
-export { PickerPopper } from './PickerPopper';
+export { PickerPopper } from "./PickerPopper.js";
 export type { ExportedPickerPopperProps } from './PickerPopper';
-export { pickerPopperClasses, getPickerPopperUtilityClass } from './pickerPopperClasses';
-export type { PickerPopperClassKey, PickerPopperClasses } from './pickerPopperClasses';
+export { pickerPopperClasses, getPickerPopperUtilityClass } from "./pickerPopperClasses.js";
+export type { PickerPopperClassKey, PickerPopperClasses } from './pickerPopperClasses';

package/internals/components/PickerPopper/index.js

@@ -1,2 +1,25 @@
-export { PickerPopper } from "./PickerPopper.js";
-export { pickerPopperClasses, getPickerPopperUtilityClass } from "./pickerPopperClasses.js";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "PickerPopper", {
+  enumerable: true,
+  get: function () {
+    return _PickerPopper.PickerPopper;
+  }
+});
+Object.defineProperty(exports, "getPickerPopperUtilityClass", {
+  enumerable: true,
+  get: function () {
+    return _pickerPopperClasses.getPickerPopperUtilityClass;
+  }
+});
+Object.defineProperty(exports, "pickerPopperClasses", {
+  enumerable: true,
+  get: function () {
+    return _pickerPopperClasses.pickerPopperClasses;
+  }
+});
+var _PickerPopper = require("./PickerPopper");
+var _pickerPopperClasses = require("./pickerPopperClasses");

package/internals/components/PickerPopper/pickerPopperClasses.d.ts

@@ -1,9 +1,9 @@
 export interface PickerPopperClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the paper element. */
-    paper: string;
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
 }
 export type PickerPopperClassKey = keyof PickerPopperClasses;
 export declare function getPickerPopperUtilityClass(slot: string): string;
-export declare const pickerPopperClasses: Record<"root" | "paper", string>;
+export declare const pickerPopperClasses: Record<"root" | "paper", string>;

package/internals/components/PickerPopper/pickerPopperClasses.js

@@ -1,6 +1,14 @@
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-export function getPickerPopperUtilityClass(slot) {
-  return generateUtilityClass('MuiPickerPopper', slot);
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPickerPopperUtilityClass = getPickerPopperUtilityClass;
+exports.pickerPopperClasses = void 0;
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+function getPickerPopperUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiPickerPopper', slot);
 }
-export const pickerPopperClasses = generateUtilityClasses('MuiPickerPopper', ['root', 'paper']);
+const pickerPopperClasses = exports.pickerPopperClasses = (0, _generateUtilityClasses.default)('MuiPickerPopper', ['root', 'paper']);