@vectara/vectara-ui/lib/components/drawer/Drawer.js

Vectara's design system, codified as a React and Sass component library

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef, useState } from "react";
import classNames from "classnames";
import { FocusOn } from "react-focus-on";
import { BiX } from "react-icons/bi";
import { VuiFlexContainer } from "../flex/FlexContainer";
import { VuiFlexItem } from "../flex/FlexItem";
import { VuiIconButton } from "../button/IconButton";
import { VuiIcon } from "../icon/Icon";
import { VuiPortal } from "../portal/Portal";
import { VuiScreenBlock } from "../screenBlock/ScreenBlock";
import { useVuiContext } from "../context/Context";
import { getOverlayProps } from "../../utils/getOverlayProps";
const COLOR = ["primary", "danger"];
export const VuiDrawer = (_a) => {
    var { className, color = "primary", title, icon, children, isOpen, onClose, footer } = _a, rest = __rest(_a, ["className", "color", "title", "icon", "children", "isOpen", "onClose", "footer"]);
    const { DrawerTitle } = useVuiContext();
    const returnFocusElRef = useRef(null);
    // Uncouple open state from visibile state so that when the popover is closed,
    // we can set the button to be unselected immediately while the popover content
    // is still transitioning out.
    const [showTransition, setShowTransition] = useState(false);
    const [isContentVisible, setIsContentVisible] = useState(false);
    // Return focus on unmount.
    useEffect(() => {
        var _a;
        if (isOpen) {
            returnFocusElRef.current = document.activeElement;
            setIsContentVisible(true);
            requestAnimationFrame(() => {
                setShowTransition(true);
            });
        }
        else {
            (_a = returnFocusElRef.current) === null || _a === void 0 ? void 0 : _a.focus();
            returnFocusElRef.current = null;
            setShowTransition(false);
            // Wait for the transition to complete before unmounting.
            // This duration should match the CSS transition speed.
            window.setTimeout(() => {
                setIsContentVisible(false);
            }, 200);
        }
    }, [isOpen]);
    // Allow contents to respond to blur events before unmounting.
    const onCloseDelayed = () => {
        window.setTimeout(() => {
            onClose === null || onClose === void 0 ? void 0 : onClose();
        }, 0);
    };
    // Handle outside clicks, but ignore clicks on notifications.
    const handleClickOutside = (event) => {
        const target = event.target;
        // Check if the click is within a notification.
        if (target.closest("[data-awareness='notification']")) {
            return;
        }
        onCloseDelayed();
    };
    const classes = classNames("vuiDrawer", `vuiDrawer--${color}`, className, {
        "vuiDrawer-isLoaded": showTransition
    });
    return (_jsx(VuiPortal, { children: (isOpen || isContentVisible || showTransition) && (_jsx(VuiScreenBlock, Object.assign({ isHidden: !isOpen }, { children: _jsx(FocusOn
            // Disable the focus guard as soon as the drawer begins closing
            // so it doesn't intercept clicks while transitioning out.
            , Object.assign({ 
                // Disable the focus guard as soon as the drawer begins closing
                // so it doesn't intercept clicks while transitioning out.
                enabled: isOpen, onEscapeKey: onCloseDelayed, onClickOutside: handleClickOutside, 
                // Enable manual focus return to work.
                returnFocus: false, 
                // Enable focus on contents when it's open,
                // but enable manual focus return to work when it's closed.
                autoFocus: isOpen }, { children: _jsxs("div", Object.assign({ className: classes }, rest, getOverlayProps("drawerTitle"), { children: [_jsx("div", Object.assign({ className: "vuiDrawerHeader" }, { children: _jsxs(VuiFlexContainer, Object.assign({ justifyContent: "spaceBetween", alignItems: "center" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [icon && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIcon, Object.assign({ size: "l" }, { children: icon })) }))), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx("div", Object.assign({ className: "vuiDrawerHeader__title", "data-testid": "drawerTitle" }, { children: _jsx(DrawerTitle, Object.assign({ id: "drawerTitle" }, { children: title })) })) }))] })) })), onClose && (_jsx(VuiFlexItem, { children: _jsx(VuiIconButton, { "aria-label": "Close", "data-testid": "drawerCloseButton", onClick: onCloseDelayed, color: "neutral", icon: _jsx(VuiIcon, Object.assign({ size: "m", color: "neutral" }, { children: _jsx(BiX, {}) })) }) }))] })) })), _jsx("div", Object.assign({ className: "vuiDrawerContent" }, { children: _jsx("div", Object.assign({ className: "vuiDrawerContent__inner" }, { children: children })) })), footer && _jsx("div", Object.assign({ className: "vuiDrawerFooter" }, { children: footer }))] })) })) }))) }));
};