@awsui/components-react/app-layout/drawer.js

AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A

import clsx from 'clsx';
import React, { useEffect, useRef } from 'react';
import { AppLayoutButton, CloseButton, togglesConfig } from './toggles';
import styles from './styles.css.js';
import { AnnouncementPopover } from './tools-panel-annotation';
export function Drawer(_a) {
    var _b;
    var contentClassName = _a.contentClassName, toggleClassName = _a.toggleClassName, closeClassName = _a.closeClassName, width = _a.width, type = _a.type, activeElement = _a.activeElement, topOffset = _a.topOffset, bottomOffset = _a.bottomOffset, ariaLabels = _a.ariaLabels, children = _a.children, isOpen = _a.isOpen, isMobile = _a.isMobile, onToggle = _a.onToggle, onClick = _a.onClick;
    var _c = togglesConfig[type], TagName = _c.TagName, iconName = _c.iconName, getLabels = _c.getLabels;
    var _d = getLabels(ariaLabels), mainLabel = _d.mainLabel, closeLabel = _d.closeLabel, openLabel = _d.openLabel;
    var drawerWidth = isOpen && !isMobile ? width : undefined;
    var toggleRef = useRef(null);
    var toggleWrapperRef = useRef(null);
    var closeRef = useRef(null);
    var announcementPopoverTargetRef = useRef(null);
    useEffect(function () {
        if (activeElement) {
            var _a = activeElement.split('-'), drawerType = _a[0], element = _a[1];
            if (type === drawerType) {
                if (element === 'toggle' && toggleRef.current) {
                    toggleRef.current.focus();
                }
                if (element === 'close' && closeRef.current) {
                    closeRef.current.focus();
                }
            }
        }
    }, [activeElement, type]);
    return (React.createElement("div", { className: clsx(styles.drawer, (_b = {},
            _b[styles['drawer-closed']] = !isOpen,
            _b[styles['drawer-mobile']] = isMobile,
            _b)), style: { width: drawerWidth }, onClick: function (event) {
            if (onClick) {
                onClick(event);
            }
            if (!isOpen) {
                onToggle(true);
            }
        } },
        React.createElement("div", { style: { width: drawerWidth, top: topOffset, bottom: bottomOffset }, className: clsx(styles['drawer-content'], contentClassName) },
            !isMobile && type === 'tools' && (React.createElement(React.Fragment, null,
                React.createElement(AnnouncementPopover, { track: announcementPopoverTargetRef }),
                React.createElement("div", { className: styles['announcement-popover-target'], ref: announcementPopoverTargetRef }))),
            !isMobile && (React.createElement(TagName, { "aria-label": mainLabel, className: clsx(styles.toggle), "aria-hidden": isOpen, ref: toggleWrapperRef },
                React.createElement(AppLayoutButton, { ref: toggleRef, className: toggleClassName, iconName: iconName, ariaLabel: openLabel, onClick: function () { return onToggle(true); }, ariaExpanded: false }))),
            React.createElement(TagName, { "aria-label": mainLabel, "aria-hidden": !isOpen },
                React.createElement(CloseButton, { ref: closeRef, className: closeClassName, ariaLabel: closeLabel, onClick: function () { return onToggle(false); } }),
                children))));
}