@patreon/studio/module/components/Takeover/Takeover.jsx

Patreon Studio Design System

import React from 'react';
import { DialogContainer } from '../Dialog/components/DialogContainer';
import { DialogNavigation } from '../Dialog/components/DialogNavigation';
import { Root, Wrapper, Area } from './styled-components';
/** @deprecated use the `OverlayTriggerToggle` + `OverlayTakeover` components instead */
export function Takeover({ children, id, isOpen, ariaLabel, 'data-tag': dataTag, onCloseRequest, onCloseAnimationComplete, onOpenAnimationComplete, showCloseButton = true, onBackRequest, contentWidth, backgroundColor = 'default', flow = 'fullscreen', }) {
    return (<DialogContainer id={id} isOpen={isOpen} ariaLabel={ariaLabel} onCloseRequest={onCloseRequest} onOpenAnimationComplete={onOpenAnimationComplete} onCloseAnimationComplete={onCloseAnimationComplete} flow={flow}>
      {/* TODO (legacied @typescript-eslint/no-shadow)
           This failure is legacied in and should be updated. DO NOT COPY. */}
      {/* eslint-disable-next-line @typescript-eslint/no-shadow */}
      {({ id, ariaProps, contentId, handleClose, transitionPhase, viewport }) => (<Root id={id} tabIndex={0} data-tag={dataTag} $isOpen={isOpen} $transitionPhase={transitionPhase} $viewportHeight={viewport.height} backgroundColor={backgroundColor} {...ariaProps}>
          <Wrapper id={contentId}>
            <DialogNavigation handleClose={handleClose} onBackRequest={onBackRequest} showCloseButton={showCloseButton} location="takeover" buttonProps={{
                variant: 'secondary',
                unfilled: false,
            }}/>
            <Area contentWidth={contentWidth}>{children}</Area>
          </Wrapper>
        </Root>)}
    </DialogContainer>);
}
//# sourceMappingURL=Takeover.jsx.map