@atlaskit/popup/dist/esm/popup.js

A popup displays brief content in an overlay.

/* popup.tsx generated by @compiled/babel-plugin v0.36.1 */
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import "./popup.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
/* eslint-disable @repo/internal/react/require-jsdoc */

import { memo, useCallback, useState } from 'react';
import { useId } from '@atlaskit/ds-lib/use-id';
import { Layering } from '@atlaskit/layering';
import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
import { fg } from '@atlaskit/platform-feature-flags';
import { Manager, Reference } from '@atlaskit/popper';
import Portal from '@atlaskit/portal';
import { Box } from '@atlaskit/primitives/compiled';
import PopperWrapper from './popper-wrapper';
import { usePopupAppearance } from './use-appearance';
import { useGetMemoizedMergedTriggerRef } from './use-get-memoized-merged-trigger-ref';
import { useGetMemoizedMergedTriggerRefNew } from './use-get-memoized-merged-trigger-ref-new';
var defaultLayer = 400;
var wrapperStyles = {
  root: "_kqswh2mm"
};
export var Popup = /*#__PURE__*/memo(function (_ref) {
  var xcss = _ref.xcss,
    _ref$appearance = _ref.appearance,
    inAppearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
    isOpen = _ref.isOpen,
    providedId = _ref.id,
    offset = _ref.offset,
    testId = _ref.testId,
    trigger = _ref.trigger,
    content = _ref.content,
    onClose = _ref.onClose,
    boundary = _ref.boundary,
    _ref$rootBoundary = _ref.rootBoundary,
    rootBoundary = _ref$rootBoundary === void 0 ? 'viewport' : _ref$rootBoundary,
    _ref$shouldFlip = _ref.shouldFlip,
    shouldFlip = _ref$shouldFlip === void 0 ? true : _ref$shouldFlip,
    _ref$placement = _ref.placement,
    placement = _ref$placement === void 0 ? 'auto' : _ref$placement,
    fallbackPlacements = _ref.fallbackPlacements,
    PopupContainer = _ref.popupComponent,
    _ref$autoFocus = _ref.autoFocus,
    autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
    _ref$zIndex = _ref.zIndex,
    zIndex = _ref$zIndex === void 0 ? defaultLayer : _ref$zIndex,
    _ref$shouldUseCapture = _ref.shouldUseCaptureOnOutsideClick,
    shouldUseCaptureOnOutsideClick = _ref$shouldUseCapture === void 0 ? false : _ref$shouldUseCapture,
    _ref$shouldRenderToPa = _ref.shouldRenderToParent,
    inShouldRenderToParent = _ref$shouldRenderToPa === void 0 ? false : _ref$shouldRenderToPa,
    _ref$shouldFitContain = _ref.shouldFitContainer,
    shouldFitContainer = _ref$shouldFitContain === void 0 ? false : _ref$shouldFitContain,
    _ref$shouldDisableFoc = _ref.shouldDisableFocusLock,
    shouldDisableFocusLock = _ref$shouldDisableFoc === void 0 ? false : _ref$shouldDisableFoc,
    _ref$shouldReturnFocu = _ref.shouldReturnFocus,
    shouldReturnFocus = _ref$shouldReturnFocu === void 0 ? true : _ref$shouldReturnFocu,
    strategy = _ref.strategy,
    role = _ref.role,
    label = _ref.label,
    titleId = _ref.titleId,
    modifiers = _ref.modifiers,
    shouldFitViewport = _ref.shouldFitViewport;
  var _useState = useState(null),
    _useState2 = _slicedToArray(_useState, 2),
    triggerRef = _useState2[0],
    setTriggerRef = _useState2[1];
  var getMergedTriggerRef = useGetMemoizedMergedTriggerRef();
  var getMergedTriggerRefNew = useGetMemoizedMergedTriggerRefNew();
  var generatedId = useId();
  var _usePopupAppearance = usePopupAppearance({
      appearance: inAppearance,
      shouldRenderToParent: inShouldRenderToParent
    }),
    appearance = _usePopupAppearance.appearance,
    shouldRenderToParent = _usePopupAppearance.shouldRenderToParent;
  var id = providedId || generatedId;
  var handleOpenLayerObserverCloseSignal = useCallback(function () {
    onClose === null || onClose === void 0 || onClose(null);
  }, [onClose]);
  useNotifyOpenLayerObserver({
    isOpen: isOpen,
    onClose: handleOpenLayerObserverCloseSignal
  });
  var renderPopperWrapper = /*#__PURE__*/React.createElement(Layering, {
    isDisabled: false
  }, /*#__PURE__*/React.createElement(PopperWrapper, {
    xcss: xcss,
    appearance: appearance,
    content: content,
    isOpen: isOpen,
    placement: placement,
    fallbackPlacements: fallbackPlacements,
    boundary: boundary,
    rootBoundary: rootBoundary,
    shouldFlip: shouldFlip,
    offset: offset,
    popupComponent: PopupContainer,
    id: id,
    testId: testId,
    onClose: onClose,
    autoFocus: autoFocus,
    shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
    shouldRenderToParent: shouldRenderToParent || shouldFitContainer,
    shouldFitContainer: shouldFitContainer,
    shouldDisableFocusLock: shouldDisableFocusLock,
    shouldReturnFocus: shouldReturnFocus,
    triggerRef: triggerRef,
    strategy: shouldFitContainer ? 'absolute' : strategy,
    role: role,
    label: label,
    titleId: titleId,
    modifiers: modifiers,
    shouldFitViewport: shouldFitViewport
  }));
  var popupContent = /*#__PURE__*/React.createElement(Manager, null, /*#__PURE__*/React.createElement(Reference, null, function (_ref2) {
    var ref = _ref2.ref;
    return trigger({
      ref: !fg('platform-design-system-popup-ref') ? getMergedTriggerRef(ref, setTriggerRef, isOpen) : getMergedTriggerRefNew(ref, setTriggerRef),
      'aria-controls': isOpen ? id : undefined,
      'aria-expanded': isOpen,
      'aria-haspopup': role === 'dialog' && fg('platform_dst_popup-disable-focuslock') ? 'dialog' : true
    });
  }), isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(Portal, {
    zIndex: zIndex
  }, renderPopperWrapper)));
  if (shouldFitContainer) {
    return /*#__PURE__*/React.createElement(Box, {
      xcss: wrapperStyles.root
    }, popupContent);
  }
  return popupContent;
});