@wix/design-system/dist/esm/Drawer/Drawer.js

@wix/design-system

import React, { useState } from 'react';
import { Drawer as VaulDrawer } from 'vaul';
import { classes, st } from './Drawer.st.css.js';
import PropTypes from 'prop-types';
import { DATA_HOOKS } from './Drawer.constants';
import { ZIndex } from '../common/ZIndex';
const Drawer = ({ open, backdrop = true, renderBackdrop = true, resizable = true, margin = true, onClose, role = 'dialog', ariaLabelledBy, children, snapPoints, dismissible = true, dataHook, zIndex = ZIndex.popover, scrollable = true, repositionInputs = true, }) => {
    const [snap, setSnap] = useState(snapPoints?.[0] ?? null);
    const snapProps = snapPoints?.length
        ? {
            snapPoints,
            activeSnapPoint: snap,
            setActiveSnapPoint: setSnap,
            fadeFromIndex: 0,
        }
        : {};
    return (React.createElement("div", { "data-hook": dataHook },
        React.createElement(VaulDrawer.Root, { open: open, onOpenChange: onClose, container: typeof window !== 'undefined' ? window.document.body : null, handleOnly: true, repositionInputs: repositionInputs, ...snapProps },
            React.createElement(VaulDrawer.Portal, null,
                renderBackdrop && (React.createElement(VaulDrawer.Overlay, { "data-hook": DATA_HOOKS.OVERLAY, className: st(classes.overlay, {
                        backdrop,
                    }), style: { zIndex } })),
                React.createElement(VaulDrawer.Content, { "data-hook": DATA_HOOKS.CONTENT, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, role: role, className: st(classes.content, { margin }), onInteractOutside: dismissible ? undefined : e => e.preventDefault(), style: { zIndex } },
                    React.createElement(VaulDrawer.Title, { className: classes.title }),
                    resizable && (React.createElement(VaulDrawer.Handle, { className: classes.handle, "data-hook": DATA_HOOKS.HANDLE })),
                    scrollable ? (React.createElement("div", { className: st(classes.contentWrapper, { margin }) }, children)) : (children))))));
};
Drawer.displayName = 'Drawer';
Drawer.propTypes = {
    dataHook: PropTypes.string,
    open: PropTypes.bool.isRequired,
    onClose: PropTypes.func.isRequired,
    backdrop: PropTypes.bool,
    renderBackdrop: PropTypes.bool,
    resizable: PropTypes.bool,
    margin: PropTypes.bool,
    role: PropTypes.string,
    ariaLabelledBy: PropTypes.string,
    children: PropTypes.node.isRequired,
    snapPoints: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
    dismissible: PropTypes.bool,
    scrollable: PropTypes.bool,
    repositionInputs: PropTypes.bool,
};
export default Drawer;
//# sourceMappingURL=Drawer.js.map