/** * @author @Patreon/fe-core **/ 'use client'; import React from 'react'; import { TouchScrollable } from 'react-scrolllock'; import { useSwipe } from '../../hooks/useSwipe'; import { Backdrop } from '../Dialog/components/Backdrop'; import { DialogContainer } from '../Dialog/components/DialogContainer'; import { DialogFooter } from '../Dialog/components/DialogFooter'; import { DialogHeader } from '../Dialog/components/DialogHeader'; import { DialogNavigation } from '../Dialog/components/DialogNavigation'; import { HeadingText } from '../HeadingText'; import { Root, Body, BodyArea, Container, Wrapper, Content } from './styled-components'; /** @deprecated use the `OverlayTriggerToggle` + `OverlayDrawer` components instead */ export function Drawer({ children, id, isOpen, onCloseRequest, onBackRequest, onOpenAnimationComplete, onCloseAnimationComplete, size = 'lg', padding = 'default', scrollable = 'all', media, title, titleAlign = 'left', ariaLabel, showCloseButton, primaryAction, secondaryAction, tertiaryAction, actionLayout = 'horizontal', 'data-tag': dataTag, flow = 'fullscreen', }) { // handle swipe right to close useSwipe({ isActive: isOpen, handleSwipe: (ev, direction) => { if (direction === 'right') { // The use of `unknown` here is due to the fact that the `onCloseRequest` hook is typed to `TouchEvent` // and not `React.MouseEvent`. This decision was made to avoid the complexity of having to manage multiple // event types since this is the only place where a touch event is used. onCloseRequest?.(ev, 'swipe'); } }, }); // show header when media or title is defined const showHeader = media || title; const showFooter = primaryAction || secondaryAction || tertiaryAction; // with no children while scrollable all there is // no gap between headers and footers const useFullWrapper = scrollable === 'all' && !children; return ( {/* 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, titleId, contentId, handleClose, transitionPhase, viewport }) => { const bodyContent = ( {!showHeader && ()} {children} ); return ( {showHeader && ()} {!!children && (scrollable === 'all' ? (bodyContent) : ({bodyContent}))} {showFooter && ()} ); }} ); } /* expose default title component */ Drawer.Title = HeadingText; /* export content component for custom styles */ Drawer.Content = Content; //# sourceMappingURL=index.jsx.map