@material-ui/lab/internal/pickers/PickersPopper.js

Material-UI Lab - Incubator for Material-UI React components.

import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from 'react';
import clsx from 'clsx';
import Grow from '@material-ui/core/Grow';
import Paper from '@material-ui/core/Paper';
import Popper from '@material-ui/core/Popper';
import TrapFocus from '@material-ui/core/Unstable_TrapFocus';
import { useForkRef, setRef, useEventCallback } from '@material-ui/core/utils';
import { createStyles, withStyles } from '@material-ui/core/styles';
import { useGlobalKeyDown, keycode } from './hooks/useKeyDown';
import { IS_TOUCH_DEVICE_MEDIA } from './constants/dimensions';
import { executeInTheNextEventLoopTick } from './utils';
export const styles = theme => createStyles({
  root: {
    zIndex: theme.zIndex.modal
  },
  paper: {
    transformOrigin: 'top center',
    '&:focus': {
      [IS_TOUCH_DEVICE_MEDIA]: {
        outline: 0
      }
    }
  },
  topTransition: {
    transformOrigin: 'bottom center'
  }
});

const PickersPopper = props => {
  const {
    anchorEl,
    children,
    classes,
    containerRef = null,
    onClose,
    onOpen,
    open,
    PopperProps,
    role,
    TransitionComponent = Grow,
    TrapFocusProps
  } = props;
  const paperRef = React.useRef(null);
  const handleRef = useForkRef(paperRef, containerRef);
  const lastFocusedElementRef = React.useRef(null);
  const handlePaperRef = useEventCallback(node => {
    setRef(handleRef, node);

    if (node) {
      onOpen();
    }
  });
  useGlobalKeyDown(open, {
    [keycode.Esc]: onClose
  });
  React.useEffect(() => {
    if (role === 'tooltip') {
      return;
    }

    if (open) {
      lastFocusedElementRef.current = document.activeElement;
    } else if (lastFocusedElementRef.current && lastFocusedElementRef.current instanceof HTMLElement) {
      lastFocusedElementRef.current.focus();
    }
  }, [open, role]);

  const handleBlur = () => {
    if (!open) {
      return;
    } // document.activeElement is updating on the next tick after `blur` called


    executeInTheNextEventLoopTick(() => {
      var _paperRef$current;

      if ((_paperRef$current = paperRef.current) === null || _paperRef$current === void 0 ? void 0 : _paperRef$current.contains(document.activeElement)) {
        return;
      }

      onClose();
    });
  };

  return /*#__PURE__*/React.createElement(Popper, _extends({
    transition: true,
    role: role,
    open: open,
    anchorEl: anchorEl,
    className: clsx(classes.root, PopperProps === null || PopperProps === void 0 ? void 0 : PopperProps.className)
  }, PopperProps), ({
    TransitionProps,
    placement
  }) => /*#__PURE__*/React.createElement(TrapFocus, _extends({
    open: open,
    disableAutoFocus: true,
    disableEnforceFocus: role === 'tooltip',
    isEnabled: () => true,
    getDoc: () => {
      var _paperRef$current$own, _paperRef$current2;

      return (_paperRef$current$own = (_paperRef$current2 = paperRef.current) === null || _paperRef$current2 === void 0 ? void 0 : _paperRef$current2.ownerDocument) !== null && _paperRef$current$own !== void 0 ? _paperRef$current$own : document;
    }
  }, TrapFocusProps), /*#__PURE__*/React.createElement(TransitionComponent, TransitionProps, /*#__PURE__*/React.createElement(Paper, {
    tabIndex: -1,
    elevation: 8,
    ref: handlePaperRef,
    className: clsx(classes.paper, placement === 'top' && classes.topTransition),
    onBlur: handleBlur
  }, children))));
};

export default withStyles(styles, {
  name: 'MuiPickersPopper'
})(PickersPopper);