Function PopoverInner

packages/react-aria-components/src/Popover.tsx:210–358

({
  state,
  isExiting,
  UNSTABLE_portalContainer,
  clearContexts,
  ...props
}: PopoverInnerProps)

}

function PopoverInner({
  state,
  isExiting,
  UNSTABLE_portalContainer,
  clearContexts,
  ...props
}: PopoverInnerProps) {
  // Calculate the arrow size internally (and remove props.arrowSize from PopoverProps)
  // Referenced from: packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx
  let arrowRef = useRef<HTMLDivElement>(null);
  let containerRef = useRef<HTMLDivElement | null>(null);
  let groupCtx = useContext(PopoverGroupContext);
  let isSubPopover = groupCtx && props.trigger === 'SubmenuTrigger';

  let {popoverProps, underlayProps, arrowProps, placement, triggerAnchorPoint} = usePopover(
    {
      ...props,
      offset: props.offset ?? 8,
      arrowRef,
      // If this is a submenu/subdialog, use the root popover's container
      // to detect outside interaction and add aria-hidden.
      groupRef: isSubPopover ? groupCtx! : containerRef
    },
    state
  );

  let ref = props.popoverRef as RefObject<HTMLDivElement | null>;
  let isEntering = useEnterAnimation(ref, !!placement) || props.isEntering || false;
  let renderProps = useRenderProps({
    ...props,
    defaultClassName: 'react-aria-Popover',
    values: {
      trigger: props.trigger || null,
      placement,
      isEntering,
      isExiting
    }
  });

  // Automatically render Popover with role=dialog except when isNonModal is true,
  // or a dialog is already nested inside the popover.
  let shouldBeDialog = !props.isNonModal || props.trigger === 'SubmenuTrigger';
  let [isDialog, setDialog] = useState(false);
  useLayoutEffect(() => {
    if (ref.current) {
      setDialog(shouldBeDialog && !ref.current.querySelector('[role=dialog]'));
    }
  }, [ref, shouldBeDialog]);

  // Focus the popover itself on mount, unless a child element is already focused.
  // Skip this for submenus since hovering a submenutrigger should keep focus on the trigger
  useEffect(() => {
    if (
      isDialog &&
      (props.trigger !== 'SubmenuTrigger' || getInteractionModality() !== 'pointer') &&
      ref.current &&
      !isFocusWithin(ref.current)
    ) {