function Drawer(props) {
    const {
        id,
        isOpen,
        hideCloseButton,
        onRequestClose,
        onOpened,
        header,
        footer,
        size,
        slideFrom,
        children,
        className,
        style,
    } = props;
    const headerId = useUniqueIdentifier('drawer-header');
    const contentId = useUniqueIdentifier('drawer-content');
    const triggerRef = useRef(null);
    const drawerRef = useRef(null);
    const containerRef = useRef(null);
    const contentRef = useRef(null);
    const [drawerState, setDrawerState] = useState(
        isOpen ? DrawerState.OPENED : DrawerState.CLOSED,
    );

    useEffect(() => {
        const contentElement = contentRef.current;
        if (isOpen) {
            CounterManager.increment();
            disableBodyScroll(contentElement);
            triggerRef.current = document.activeElement;
            setDrawerState(DrawerState.OPENING);
        }

        return () => {
            if (isOpen) {
                CounterManager.decrement();
                if (triggerRef.current) triggerRef.current.focus();
                if (!CounterManager.hasModalsOpen()) {
                    enableBodyScroll(contentElement);
                }
                clearAllBodyScrollLocks();
                setDrawerState(DrawerState.CLOSING);
            }
        };
    }, [isOpen]);

    useEffect(() => {
        if (isOpen && drawerState === DrawerState.OPENED) {
            drawerRef.current.focus();
            onOpened();
        }
    }, [drawerState, isOpen, onOpened]);

    const onSlideEnd = () => {
        if (drawerState === DrawerState.OPENING) {
            setDrawerState(DrawerState.OPENED);
        } else if (drawerState === DrawerState.CLOSING) {
            setDrawerState(DrawerState.CLOSED);
        }
    };

    const closeDrawer = () => onRequestClose();

    const handleBackDropClick = useCallback(event => {
        if (drawerRef.current.contains(event.target)) {
            return null;
        }
        return closeDrawer();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    useEffect(() => {
        const node = containerRef.current;
        if (drawerState === 1) {
            node.addEventListener('click', handleBackDropClick);
        }
        return () => {
            if (node) {
                node.removeEventListener('click', handleBackDropClick);
            }
        };
    }, [drawerState, handleBackDropClick]);

    const handleKeyPressed = event => {
        event.stopPropagation();
        if (isOpen && event.keyCode === ESCAPE_KEY && containerRef.current.contains(event.target)) {
            closeDrawer();
        }
        if (event.keyCode === TAB_KEY) {
            manageTab(drawerRef.current, event);
        }
        return null;
    };

    const drawerIsOpen = [DrawerState.OPENING, DrawerState.OPENED].includes(drawerState);
    if (drawerState !== null && drawerState !== DrawerState.CLOSED) {
        return createPortal(
            <StyledBackDrop
                id={id}
                role="presentation"
                ref={containerRef}
                onKeyDown={handleKeyPressed}
            >
                <StyledContainer
                    role="dialog"
                    tabIndex={-1}
                    aria-labelledby={headerId}
                    aria-modal
                    aria-hidden={!drawerIsOpen}
                    aria-describedby={contentId}
                    className={className}
                    isOpen={drawerIsOpen}
                    style={style}
                    size={size}
                    slideFrom={getSlideFrom(slideFrom, 'left')}
                    ref={drawerRef}
                    onAnimationEnd={onSlideEnd}
                >
                    <Header id={headerId} content={header} />
                    <RenderIf isTrue={!hideCloseButton}>
                        <StyledCloseButton
                            id="drawer-close-button"
                            icon={<CloseIcon />}
                            title="Hide"
                            onClick={closeDrawer}
                        />
                    </RenderIf>
                    <StyledContent id={contentId} ref={contentRef}>
                        {children}
                    </StyledContent>
                    <RenderIf isTrue={footer}>
                        <StyledDivider />
                        <StyledFooter>{footer}</StyledFooter>
                    </RenderIf>
                </StyledContainer>
            </StyledBackDrop>,
            document.body,
        );
    }
    return <></>;
}
Drawers are surfaces containing supplementary content on your app.
@category Layout