@primer/components/lib/AnchoredOverlay/AnchoredOverlay.js

Primer react components

"use strict";

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

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

var _Overlay = _interopRequireDefault(require("../Overlay"));

var _useFocusTrap = require("../hooks/useFocusTrap");

var _useFocusZone = require("../hooks/useFocusZone");

var _hooks = require("../hooks");

var _ssr = require("@react-aria/ssr");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

/**
 * An `AnchoredOverlay` provides an anchor that will open a floating overlay positioned relative to the anchor.
 * The overlay can be opened and navigated using keyboard or mouse.
 */
const AnchoredOverlay = ({
  renderAnchor,
  anchorRef: externalAnchorRef,
  children,
  open,
  onOpen,
  onClose,
  height,
  width,
  overlayProps,
  focusTrapSettings,
  focusZoneSettings,
  side,
  align
}) => {
  const anchorRef = (0, _hooks.useProvidedRefOrCreate)(externalAnchorRef);
  const [overlayRef, updateOverlayRef] = (0, _hooks.useRenderForcingRef)();
  const anchorId = (0, _ssr.useSSRSafeId)();
  const onClickOutside = (0, _react.useCallback)(() => onClose === null || onClose === void 0 ? void 0 : onClose('click-outside'), [onClose]);
  const onEscape = (0, _react.useCallback)(() => onClose === null || onClose === void 0 ? void 0 : onClose('escape'), [onClose]);
  const onAnchorKeyDown = (0, _react.useCallback)(event => {
    if (!event.defaultPrevented) {
      if (!open && ['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(event.key)) {
        onOpen === null || onOpen === void 0 ? void 0 : onOpen('anchor-key-press');
        event.preventDefault();
      }
    }
  }, [open, onOpen]);
  const onAnchorClick = (0, _react.useCallback)(event => {
    if (event.defaultPrevented || event.button !== 0) {
      return;
    }

    if (!open) {
      onOpen === null || onOpen === void 0 ? void 0 : onOpen('anchor-click');
    } else {
      onClose === null || onClose === void 0 ? void 0 : onClose('anchor-click');
    }
  }, [open, onOpen, onClose]);
  const {
    position
  } = (0, _hooks.useAnchoredPosition)({
    anchorElementRef: anchorRef,
    floatingElementRef: overlayRef,
    side,
    align
  }, [overlayRef.current]);
  (0, _react.useEffect)(() => {
    // ensure overlay ref gets cleared when closed, so position can reset between closing/re-opening
    if (!open && overlayRef.current) {
      updateOverlayRef(null);
    }
  }, [open, overlayRef, updateOverlayRef]);
  (0, _useFocusZone.useFocusZone)({
    containerRef: overlayRef,
    disabled: !open || !position,
    ...focusZoneSettings
  });
  (0, _useFocusTrap.useFocusTrap)({
    containerRef: overlayRef,
    disabled: !open || !position,
    ...focusTrapSettings
  });
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderAnchor && renderAnchor({
    ref: anchorRef,
    id: anchorId,
    'aria-labelledby': anchorId,
    'aria-haspopup': 'true',
    tabIndex: 0,
    onClick: onAnchorClick,
    onKeyDown: onAnchorKeyDown
  }), open ? /*#__PURE__*/_react.default.createElement(_Overlay.default, _extends({
    returnFocusRef: anchorRef,
    onClickOutside: onClickOutside,
    ignoreClickRefs: [anchorRef],
    onEscape: onEscape,
    ref: updateOverlayRef,
    role: "none",
    visibility: position ? 'visible' : 'hidden',
    height: height,
    width: width,
    top: (position === null || position === void 0 ? void 0 : position.top) || 0,
    left: (position === null || position === void 0 ? void 0 : position.left) || 0,
    anchorSide: position === null || position === void 0 ? void 0 : position.anchorSide
  }, overlayProps), children) : null);
};

exports.AnchoredOverlay = AnchoredOverlay;
AnchoredOverlay.displayName = 'AnchoredOverlay';
AnchoredOverlay.defaultProps = {
  side: 'outside-bottom',
  align: 'start'
};