Function ModalOverlayInner

packages/react-aria-components/src/Modal.tsx:227–287

({UNSTABLE_portalContainer, ...props}: ModalOverlayInnerProps)

);

function ModalOverlayInner({UNSTABLE_portalContainer, ...props}: ModalOverlayInnerProps) {
  let modalRef = props.modalRef;
  let {state} = props;
  let {modalProps, underlayProps} = useModalOverlay(props, state, modalRef);

  let entering = useEnterAnimation(props.overlayRef) || props.isEntering || false;
  let renderProps = useRenderProps({
    ...props,
    defaultClassName: 'react-aria-ModalOverlay',
    values: {
      isEntering: entering,
      isExiting: props.isExiting,
      state
    }
  });

  let viewport = useViewportSize();
  let pageWidth: number | undefined = undefined;
  let pageHeight: number | undefined = undefined;
  if (typeof document !== 'undefined') {
    let scrollingElement = isScrollable(document.body)
      ? document.body
      : document.scrollingElement || document.documentElement;
    // Prevent Firefox from adding scrollbars when the page has a fractional width/height.
    let fractionalWidthDifference = scrollingElement.getBoundingClientRect().width % 1;
    let fractionalHeightDifference = scrollingElement.getBoundingClientRect().height % 1;
    pageWidth = scrollingElement.scrollWidth - fractionalWidthDifference;
    pageHeight = scrollingElement.scrollHeight - fractionalHeightDifference;
  }

  let style = {
    ...renderProps.style,
    '--visual-viewport-width': viewport.width + 'px',
    '--visual-viewport-height': viewport.height + 'px',
    '--page-width': pageWidth !== undefined ? pageWidth + 'px' : undefined,
    '--page-height': pageHeight !== undefined ? pageHeight + 'px' : undefined
  };

  return (
    <Overlay isExiting={props.isExiting} portalContainer={UNSTABLE_portalContainer}>
      <dom.div
        {...mergeProps(filterDOMProps(props, {global: true}), underlayProps)}
        {...renderProps}
        style={style}
        ref={props.overlayRef}
        data-entering={entering || undefined}
        data-exiting={props.isExiting || undefined}>
        <Provider
          values={[
            [
              InternalModalContext,
              {modalProps, modalRef, isExiting: props.isExiting, isDismissable: props.isDismissable}
            ],
            [OverlayTriggerStateContext, state]
          ]}>
          {renderProps.children}
        </Provider>
      </dom.div>