/** * Web Component wrapper for Drawer (auto-generated). * Custom element: * * @generated by scripts/generate-wc-components.ts * DO NOT EDIT MANUALLY */ import React from 'react'; import { Drawer, DrawerPopup, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, } from '../components/organisms/overlays/Drawer'; import { BaseCompoundWC, camelToKebab, installPropAccessors, type PropDefs, registerWC, portalNode, dispatchEvent, } from './_shared'; const PROP_DEFS: PropDefs = { defaultOpen: 'boolean', direction: 'string', disableAnimation: 'boolean', disableBackdropBlur: 'boolean', }; class DrawerWC extends BaseCompoundWC { get propDefs() { return PROP_DEFS; } static get observedAttributes() { return Object.keys(PROP_DEFS).map(camelToKebab); } protected _renderReact(): React.ReactElement { const props = this._readAllProps(); const triggerSlot = this._getSlot('trigger'); const titleSlot = this._getSlot('title'); const descriptionSlot = this._getSlot('description'); const bodySlot = this._getSlot('body'); const footerSlot = this._getSlot('footer'); const contentChildren: React.ReactElement[] = []; const hasHeader = titleSlot || descriptionSlot; if (hasHeader) { const headerChildren: React.ReactElement[] = []; if (titleSlot) { headerChildren.push( React.createElement(DrawerTitle, { key: 'title' }, portalNode(titleSlot)), ); } if (descriptionSlot) { headerChildren.push( React.createElement( DrawerDescription, { key: 'description' }, portalNode(descriptionSlot), ), ); } contentChildren.push( React.createElement(DrawerHeader, { key: 'header' }, ...headerChildren), ); } if (bodySlot) { contentChildren.push( React.createElement( 'div', { key: 'body', className: 'flex-1 overflow-y-auto px-4' }, portalNode(bodySlot), ), ); } const defaultSlot = this._getDefaultSlot(); if (defaultSlot && !bodySlot) { contentChildren.push( React.createElement( 'div', { key: 'default-body', className: 'flex-1 overflow-y-auto px-4' }, portalNode(defaultSlot), ), ); } if (footerSlot) { contentChildren.push( React.createElement(DrawerFooter, { key: 'footer' }, portalNode(footerSlot)), ); } const drawerChildren: React.ReactElement[] = []; if (triggerSlot) { drawerChildren.push( React.createElement(DrawerTrigger, { key: 'trigger', render: React.createElement('span', { style: { display: 'contents' } }, portalNode(triggerSlot)), }), ); } drawerChildren.push( React.createElement( DrawerPopup, { key: 'content', disableAnimation: (props.disableAnimation as boolean) || false, disableBackdropBlur: (props.disableBackdropBlur as boolean) || false, }, ...contentChildren, ), ); return React.createElement( Drawer, { direction: (props.direction as 'top' | 'right' | 'bottom' | 'left') || 'bottom', defaultOpen: (props.defaultOpen as boolean) || false, onOpenChange: (open: boolean) => dispatchEvent(this, 'open-change', open), }, ...drawerChildren, ); } } installPropAccessors(DrawerWC, PROP_DEFS); registerWC('hf-drawer', DrawerWC); export { DrawerWC }; export default DrawerWC;