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

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

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.styles = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var React = _interopRequireWildcard(require("react"));

var _clsx = _interopRequireDefault(require("clsx"));

var _Grow = _interopRequireDefault(require("@material-ui/core/Grow"));

var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));

var _Popper = _interopRequireDefault(require("@material-ui/core/Popper"));

var _Unstable_TrapFocus = _interopRequireDefault(require("@material-ui/core/Unstable_TrapFocus"));

var _utils = require("@material-ui/core/utils");

var _styles = require("@material-ui/core/styles");

var _useKeyDown = require("./hooks/useKeyDown");

var _dimensions = require("./constants/dimensions");

var _utils2 = require("./utils");

const styles = theme => (0, _styles.createStyles)({
  root: {
    zIndex: theme.zIndex.modal
  },
  paper: {
    transformOrigin: 'top center',
    '&:focus': {
      [_dimensions.IS_TOUCH_DEVICE_MEDIA]: {
        outline: 0
      }
    }
  },
  topTransition: {
    transformOrigin: 'bottom center'
  }
});

exports.styles = styles;

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

    if (node) {
      onOpen();
    }
  });
  (0, _useKeyDown.useGlobalKeyDown)(open, {
    [_useKeyDown.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


    (0, _utils2.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.default, (0, _extends2.default)({
    transition: true,
    role: role,
    open: open,
    anchorEl: anchorEl,
    className: (0, _clsx.default)(classes.root, PopperProps === null || PopperProps === void 0 ? void 0 : PopperProps.className)
  }, PopperProps), ({
    TransitionProps,
    placement
  }) => /*#__PURE__*/React.createElement(_Unstable_TrapFocus.default, (0, _extends2.default)({
    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.default, {
    tabIndex: -1,
    elevation: 8,
    ref: handlePaperRef,
    className: (0, _clsx.default)(classes.paper, placement === 'top' && classes.topTransition),
    onBlur: handleBlur
  }, children))));
};

var _default = (0, _styles.withStyles)(styles, {
  name: 'MuiPickersPopper'
})(PickersPopper);

exports.default = _default;