@atlaskit/popup/dist/es2019/popup.js

A popup displays brief content in an overlay.

/* popup.tsx generated by @compiled/babel-plugin v0.39.1 */
/* eslint-disable @repo/internal/react/require-jsdoc */
import "./popup.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
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 ExitingPersistence from '@atlaskit/motion/exiting-persistence';
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';
const defaultLayer = 400;
const wrapperStyles = {
  root: "_kqswh2mm"
};
export const Popup = /*#__PURE__*/memo(({
  xcss,
  appearance: inAppearance = 'default',
  isOpen,
  id: providedId,
  offset,
  testId,
  trigger,
  content,
  onClose,
  boundary,
  rootBoundary = 'viewport',
  shouldFlip = true,
  placement = 'auto',
  fallbackPlacements,
  popupComponent: PopupContainer,
  autoFocus = true,
  zIndex = defaultLayer,
  shouldUseCaptureOnOutsideClick = false,
  shouldRenderToParent: inShouldRenderToParent = false,
  shouldFitContainer = false,
  shouldDisableFocusLock = false,
  shouldReturnFocus = true,
  strategy,
  role,
  label,
  titleId,
  modifiers,
  shouldFitViewport
}) => {
  const [triggerRef, setTriggerRef] = useState(null);
  const getMergedTriggerRef = useGetMemoizedMergedTriggerRef();
  const getMergedTriggerRefNew = useGetMemoizedMergedTriggerRefNew();
  const generatedId = useId();
  const {
    appearance,
    shouldRenderToParent
  } = usePopupAppearance({
    appearance: inAppearance,
    shouldRenderToParent: inShouldRenderToParent
  });
  const id = providedId || generatedId;
  const handleOpenLayerObserverCloseSignal = useCallback(() => {
    onClose === null || onClose === void 0 ? void 0 : onClose(null);
  }, [onClose]);
  useNotifyOpenLayerObserver({
    isOpen,
    onClose: handleOpenLayerObserverCloseSignal,
    type: 'popup'
  });
  const 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
  }));
  const popupContent = /*#__PURE__*/React.createElement(Manager, null, /*#__PURE__*/React.createElement(Reference, null, ({
    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
    });
  }), !fg('platform-dst-motion-uplift') && isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(Portal, {
    zIndex: zIndex
  }, renderPopperWrapper)), fg('platform-dst-motion-uplift') && /*#__PURE__*/React.createElement(ExitingPersistence, null, isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(Portal, {
    zIndex: zIndex
  }, renderPopperWrapper))));
  if (shouldFitContainer) {
    return /*#__PURE__*/React.createElement(Box, {
      xcss: wrapperStyles.root
    }, popupContent);
  }
  return popupContent;
});