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

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

import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
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 var styles = function styles(theme) {
  return createStyles({
    root: {
      zIndex: theme.zIndex.modal
    },
    paper: {
      transformOrigin: 'top center',
      '&:focus': _defineProperty({}, IS_TOUCH_DEVICE_MEDIA, {
        outline: 0
      })
    },
    topTransition: {
      transformOrigin: 'bottom center'
    }
  });
};

var PickersPopper = function PickersPopper(props) {
  var anchorEl = props.anchorEl,
      children = props.children,
      classes = props.classes,
      _props$containerRef = props.containerRef,
      containerRef = _props$containerRef === void 0 ? null : _props$containerRef,
      onClose = props.onClose,
      onOpen = props.onOpen,
      open = props.open,
      PopperProps = props.PopperProps,
      role = props.role,
      _props$TransitionComp = props.TransitionComponent,
      TransitionComponent = _props$TransitionComp === void 0 ? Grow : _props$TransitionComp,
      TrapFocusProps = props.TrapFocusProps;
  var paperRef = React.useRef(null);
  var handleRef = useForkRef(paperRef, containerRef);
  var lastFocusedElementRef = React.useRef(null);
  var handlePaperRef = useEventCallback(function (node) {
    setRef(handleRef, node);

    if (node) {
      onOpen();
    }
  });
  useGlobalKeyDown(open, _defineProperty({}, keycode.Esc, onClose));
  React.useEffect(function () {
    if (role === 'tooltip') {
      return;
    }

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

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


    executeInTheNextEventLoopTick(function () {
      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), function (_ref) {
    var TransitionProps = _ref.TransitionProps,
        placement = _ref.placement;
    return /*#__PURE__*/React.createElement(TrapFocus, _extends({
      open: open,
      disableAutoFocus: true,
      disableEnforceFocus: role === 'tooltip',
      isEnabled: function isEnabled() {
        return true;
      },
      getDoc: function 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);