@actabldesign/bellhop-core 0.0.3 → 0.0.6

package/dist/collection/components/bh-dropdown/bh-dropdown.js

@@ -0,0 +1,569 @@
+import { h, } from "@stencil/core";
+import { computePosition, flip, shift, offset, autoUpdate, } from "@floating-ui/dom";
+export class BhDropdown {
+    el;
+    triggerRef;
+    menuRef;
+    cleanupAutoUpdate;
+    /**
+     * Size of the dropdown trigger
+     */
+    size = 'md';
+    /**
+     * State of the dropdown
+     */
+    state = 'default';
+    /**
+     * Visual variant of the dropdown trigger
+     */
+    variant = 'outlined';
+    /**
+     * Label for the dropdown button
+     */
+    label = 'Options';
+    /**
+     * Icon name for icon-only variants
+     */
+    iconName = 'more_vert';
+    /**
+     * Whether the dropdown is disabled
+     */
+    disabled = false;
+    /**
+     * Menu items (JSON string or array)
+     */
+    menuItems = [];
+    /**
+     * Header configuration (JSON string or object)
+     */
+    header;
+    /**
+     * Avatar image source for avatar variant
+     */
+    avatarSrc = '';
+    /**
+     * Avatar alt text
+     */
+    avatarAlt = 'Avatar';
+    /**
+     * Avatar size for avatar variant
+     */
+    avatarSize = 'md';
+    /**
+     * Avatar name for header
+     */
+    avatarName;
+    /**
+     * Avatar email for header
+     */
+    avatarEmail;
+    /**
+     * Whether to show icons in menu items
+     */
+    showIcons = true;
+    isOpen = false;
+    menuPosition = { x: 0, y: 0 };
+    /**
+     * Event emitted when a menu item is clicked
+     */
+    bhItemClick;
+    handleClickOutside(event) {
+        const path = event.composedPath();
+        const clickedInside = path.includes(this.el);
+        if (this.isOpen && !clickedInside) {
+            this.isOpen = false;
+        }
+    }
+    handleOpenChange(newValue) {
+        if (newValue) {
+            this.setupFloatingUI();
+        }
+        else {
+            this.cleanupFloating();
+        }
+    }
+    disconnectedCallback() {
+        this.cleanupFloating();
+    }
+    setupFloatingUI() {
+        if (!this.triggerRef || !this.menuRef)
+            return;
+        const placement = this.variant === 'avatar' ? 'right-end' : 'bottom-end';
+        const updatePosition = async () => {
+            if (!this.triggerRef || !this.menuRef)
+                return;
+            const { x, y } = await computePosition(this.triggerRef, this.menuRef, {
+                placement,
+                middleware: [
+                    offset(8),
+                    flip({ fallbackPlacements: ['top-end', 'bottom-start', 'top-start'] }),
+                    shift({ padding: 8 }),
+                ],
+            });
+            this.menuPosition = { x, y };
+        };
+        updatePosition();
+        this.cleanupAutoUpdate = autoUpdate(this.triggerRef, this.menuRef, updatePosition);
+    }
+    cleanupFloating() {
+        if (this.cleanupAutoUpdate) {
+            this.cleanupAutoUpdate();
+            this.cleanupAutoUpdate = undefined;
+        }
+    }
+    get parsedMenuItems() {
+        if (typeof this.menuItems === 'string') {
+            try {
+                return JSON.parse(this.menuItems);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.menuItems || [];
+    }
+    get parsedHeader() {
+        if (this.variant === 'avatar') {
+            return {
+                avatarGroup: true,
+                avatarSrc: this.avatarSrc,
+                name: this.avatarName,
+                email: this.avatarEmail,
+            };
+        }
+        if (!this.header)
+            return undefined;
+        if (typeof this.header === 'string') {
+            try {
+                return JSON.parse(this.header);
+            }
+            catch {
+                return undefined;
+            }
+        }
+        return this.header;
+    }
+    toggleDropdown = () => {
+        if (this.disabled)
+            return;
+        this.isOpen = !this.isOpen;
+    };
+    handleMenuItemClick = (event) => {
+        const item = event.detail;
+        if (!item.disabled) {
+            this.bhItemClick.emit(item);
+            this.isOpen = false;
+        }
+    };
+    get isIconOnly() {
+        return (this.variant === 'icon-only-outlined' ||
+            this.variant === 'icon-only-ghost');
+    }
+    get showAvatar() {
+        return this.variant === 'avatar';
+    }
+    get buttonHierarchy() {
+        return this.variant === 'ghost' || this.variant === 'icon-only-ghost'
+            ? 'tertiary'
+            : 'secondary';
+    }
+    render() {
+        const containerClasses = {
+            'dropdown-container': true,
+            'dropdown-open': this.isOpen,
+            'dropdown-avatar-variant': this.variant === 'avatar',
+        };
+        const avatarClasses = {
+            'dropdown-avatar': true,
+            'dropdown-avatar-focus': this.isOpen,
+            'dropdown-avatar-disabled': this.disabled,
+        };
+        const menuStyle = {
+            position: 'fixed',
+            left: `${this.menuPosition.x}px`,
+            top: `${this.menuPosition.y}px`,
+            zIndex: '9999',
+        };
+        return (h("div", { key: '72b74114a40b815346fbac4bc318c1a8c521c3bb', class: containerClasses }, !this.showAvatar && (h("div", { key: 'b7c5750fd9541b41ef7d44f080f5d54c443f36b5', ref: (el) => (this.triggerRef = el) }, h("bh-button", { key: 'bb1261290773322b49f84247a11f154f5805d79f', hierarchy: this.buttonHierarchy, icon: this.isIconOnly ? 'only' : 'trailing', size: this.size, label: this.isIconOnly ? '' : this.label, iconName: this.isIconOnly ? this.iconName : 'expand_more', disabled: this.disabled, onClick: this.toggleDropdown }))), this.showAvatar && (h("div", { key: '0a160fb08b45336d5f7a6bd34869f46c5e3e60a4', ref: (el) => (this.triggerRef = el), class: avatarClasses, onClick: (e) => {
+                if (!this.disabled) {
+                    e.stopPropagation();
+                    this.toggleDropdown();
+                }
+            }, role: "button", tabindex: this.disabled ? -1 : 0, onKeyDown: (e) => {
+                if (!this.disabled && (e.key === 'Enter' || e.key === ' ')) {
+                    e.preventDefault();
+                    this.toggleDropdown();
+                }
+            } }, h("bh-avatar", { key: 'cffa687bee8d8e8c67fe301aa69aacb422fc80a6', type: "image", size: this.avatarSize, imageSrc: this.avatarSrc, alt: this.avatarAlt }))), h("bh-dropdown-menu", { key: 'a382a01f558fbd84cffa1dd65a191427ad027509', ref: (el) => (this.menuRef = el), style: this.isOpen ? menuStyle : { display: 'none' }, visible: this.isOpen, showIcons: this.showIcons, menuItems: JSON.stringify(this.parsedMenuItems), header: this.parsedHeader ? JSON.stringify(this.parsedHeader) : undefined, onBhItemClick: this.handleMenuItemClick })));
+    }
+    static get is() { return "bh-dropdown"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-dropdown.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-dropdown.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownSize",
+                    "resolved": "\"md\" | \"sm\"",
+                    "references": {
+                        "DropdownSize": {
+                            "location": "local",
+                            "path": "/Users/brunabites/localsites/bellhopOS/packages/bellhop-core/src/components/bh-dropdown/bh-dropdown.tsx",
+                            "id": "src/components/bh-dropdown/bh-dropdown.tsx::DropdownSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the dropdown trigger"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownState",
+                    "resolved": "\"default\" | \"disabled\" | \"focus\"",
+                    "references": {
+                        "DropdownState": {
+                            "location": "local",
+                            "path": "/Users/brunabites/localsites/bellhopOS/packages/bellhop-core/src/components/bh-dropdown/bh-dropdown.tsx",
+                            "id": "src/components/bh-dropdown/bh-dropdown.tsx::DropdownState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "State of the dropdown"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "state",
+                "defaultValue": "'default'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownVariant",
+                    "resolved": "\"avatar\" | \"ghost\" | \"icon-only-ghost\" | \"icon-only-outlined\" | \"outlined\"",
+                    "references": {
+                        "DropdownVariant": {
+                            "location": "local",
+                            "path": "/Users/brunabites/localsites/bellhopOS/packages/bellhop-core/src/components/bh-dropdown/bh-dropdown.tsx",
+                            "id": "src/components/bh-dropdown/bh-dropdown.tsx::DropdownVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual variant of the dropdown trigger"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'outlined'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the dropdown button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'Options'"
+            },
+            "iconName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon name for icon-only variants"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-name",
+                "defaultValue": "'more_vert'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the dropdown is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "menuItems": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownMenuItem[] | string",
+                    "resolved": "DropdownMenuItem[] | string",
+                    "references": {
+                        "DropdownMenuItem": {
+                            "location": "import",
+                            "path": "../bh-dropdown-menu/bh-dropdown-menu",
+                            "id": "src/components/bh-dropdown-menu/bh-dropdown-menu.tsx::DropdownMenuItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Menu items (JSON string or array)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "menu-items",
+                "defaultValue": "[]"
+            },
+            "header": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownMenuHeader | string",
+                    "resolved": "DropdownMenuHeader | string | undefined",
+                    "references": {
+                        "DropdownMenuHeader": {
+                            "location": "import",
+                            "path": "../bh-dropdown-menu/bh-dropdown-menu",
+                            "id": "src/components/bh-dropdown-menu/bh-dropdown-menu.tsx::DropdownMenuHeader"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Header configuration (JSON string or object)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "header"
+            },
+            "avatarSrc": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Avatar image source for avatar variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "avatar-src",
+                "defaultValue": "''"
+            },
+            "avatarAlt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Avatar alt text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "avatar-alt",
+                "defaultValue": "'Avatar'"
+            },
+            "avatarSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Avatar size for avatar variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "avatar-size",
+                "defaultValue": "'md'"
+            },
+            "avatarName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Avatar name for header"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "avatar-name"
+            },
+            "avatarEmail": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Avatar email for header"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "avatar-email"
+            },
+            "showIcons": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show icons in menu items"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-icons",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "menuPosition": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bhItemClick",
+                "name": "bhItemClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when a menu item is clicked"
+                },
+                "complexType": {
+                    "original": "DropdownMenuItem",
+                    "resolved": "DropdownMenuItem",
+                    "references": {
+                        "DropdownMenuItem": {
+                            "location": "import",
+                            "path": "../bh-dropdown-menu/bh-dropdown-menu",
+                            "id": "src/components/bh-dropdown-menu/bh-dropdown-menu.tsx::DropdownMenuItem"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "isOpen",
+                "methodName": "handleOpenChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleClickOutside",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=bh-dropdown.js.map

package/dist/collection/components/bh-dropdown/bh-dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-dropdown.js","sourceRoot":"","sources":["../../../src/components/bh-dropdown/bh-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Element,\n  h,\n  Listen,\n  Watch,\n} from '@stencil/core';\nimport {\n  computePosition,\n  flip,\n  shift,\n  offset,\n  autoUpdate,\n  Placement,\n} from '@floating-ui/dom';\nimport type {\n  DropdownMenuItem,\n  DropdownMenuHeader,\n} from '../bh-dropdown-menu/bh-dropdown-menu';\n\nexport type DropdownSize = 'sm' | 'md';\nexport type DropdownState = 'default' | 'focus' | 'disabled';\nexport type DropdownVariant =\n  | 'outlined'\n  | 'ghost'\n  | 'icon-only-outlined'\n  | 'icon-only-ghost'\n  | 'avatar';\n\n@Component({\n  tag: 'bh-dropdown',\n  styleUrl: 'bh-dropdown.css',\n  shadow: true,\n})\nexport class BhDropdown {\n  @Element() el!: HTMLElement;\n\n  private triggerRef?: HTMLElement;\n  private menuRef?: HTMLBhDropdownMenuElement;\n  private cleanupAutoUpdate?: () => void;\n\n  /**\n   * Size of the dropdown trigger\n   */\n  @Prop() size: DropdownSize = 'md';\n\n  /**\n   * State of the dropdown\n   */\n  @Prop() state: DropdownState = 'default';\n\n  /**\n   * Visual variant of the dropdown trigger\n   */\n  @Prop() variant: DropdownVariant = 'outlined';\n\n  /**\n   * Label for the dropdown button\n   */\n  @Prop() label: string = 'Options';\n\n  /**\n   * Icon name for icon-only variants\n   */\n  @Prop() iconName: string = 'more_vert';\n\n  /**\n   * Whether the dropdown is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Menu items (JSON string or array)\n   */\n  @Prop() menuItems: DropdownMenuItem[] | string = [];\n\n  /**\n   * Header configuration (JSON string or object)\n   */\n  @Prop() header?: DropdownMenuHeader | string;\n\n  /**\n   * Avatar image source for avatar variant\n   */\n  @Prop() avatarSrc: string = '';\n\n  /**\n   * Avatar alt text\n   */\n  @Prop() avatarAlt: string = 'Avatar';\n\n  /**\n   * Avatar size for avatar variant\n   */\n  @Prop() avatarSize: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Avatar name for header\n   */\n  @Prop() avatarName?: string;\n\n  /**\n   * Avatar email for header\n   */\n  @Prop() avatarEmail?: string;\n\n  /**\n   * Whether to show icons in menu items\n   */\n  @Prop() showIcons: boolean = true;\n\n  @State() isOpen: boolean = false;\n  @State() menuPosition: { x: number; y: number } = { x: 0, y: 0 };\n\n  /**\n   * Event emitted when a menu item is clicked\n   */\n  @Event() bhItemClick!: EventEmitter<DropdownMenuItem>;\n\n  @Listen('click', { target: 'document' })\n  handleClickOutside(event: MouseEvent) {\n    const path = event.composedPath();\n    const clickedInside = path.includes(this.el);\n    if (this.isOpen && !clickedInside) {\n      this.isOpen = false;\n    }\n  }\n\n  @Watch('isOpen')\n  handleOpenChange(newValue: boolean) {\n    if (newValue) {\n      this.setupFloatingUI();\n    } else {\n      this.cleanupFloating();\n    }\n  }\n\n  disconnectedCallback() {\n    this.cleanupFloating();\n  }\n\n  private setupFloatingUI() {\n    if (!this.triggerRef || !this.menuRef) return;\n\n    const placement: Placement =\n      this.variant === 'avatar' ? 'right-end' : 'bottom-end';\n\n    const updatePosition = async () => {\n      if (!this.triggerRef || !this.menuRef) return;\n\n      const { x, y } = await computePosition(this.triggerRef, this.menuRef, {\n        placement,\n        middleware: [\n          offset(8),\n          flip({ fallbackPlacements: ['top-end', 'bottom-start', 'top-start'] }),\n          shift({ padding: 8 }),\n        ],\n      });\n\n      this.menuPosition = { x, y };\n    };\n\n    updatePosition();\n\n    this.cleanupAutoUpdate = autoUpdate(\n      this.triggerRef,\n      this.menuRef,\n      updatePosition\n    );\n  }\n\n  private cleanupFloating() {\n    if (this.cleanupAutoUpdate) {\n      this.cleanupAutoUpdate();\n      this.cleanupAutoUpdate = undefined;\n    }\n  }\n\n  private get parsedMenuItems(): DropdownMenuItem[] {\n    if (typeof this.menuItems === 'string') {\n      try {\n        return JSON.parse(this.menuItems);\n      } catch {\n        return [];\n      }\n    }\n    return this.menuItems || [];\n  }\n\n  private get parsedHeader(): DropdownMenuHeader | undefined {\n    if (this.variant === 'avatar') {\n      return {\n        avatarGroup: true,\n        avatarSrc: this.avatarSrc,\n        name: this.avatarName,\n        email: this.avatarEmail,\n      };\n    }\n    if (!this.header) return undefined;\n    if (typeof this.header === 'string') {\n      try {\n        return JSON.parse(this.header);\n      } catch {\n        return undefined;\n      }\n    }\n    return this.header;\n  }\n\n  private toggleDropdown = () => {\n    if (this.disabled) return;\n    this.isOpen = !this.isOpen;\n  };\n\n  private handleMenuItemClick = (event: CustomEvent<DropdownMenuItem>) => {\n    const item = event.detail;\n    if (!item.disabled) {\n      this.bhItemClick.emit(item);\n      this.isOpen = false;\n    }\n  };\n\n  private get isIconOnly(): boolean {\n    return (\n      this.variant === 'icon-only-outlined' ||\n      this.variant === 'icon-only-ghost'\n    );\n  }\n\n  private get showAvatar(): boolean {\n    return this.variant === 'avatar';\n  }\n\n  private get buttonHierarchy(): 'secondary' | 'tertiary' {\n    return this.variant === 'ghost' || this.variant === 'icon-only-ghost'\n      ? 'tertiary'\n      : 'secondary';\n  }\n\n  render() {\n    const containerClasses = {\n      'dropdown-container': true,\n      'dropdown-open': this.isOpen,\n      'dropdown-avatar-variant': this.variant === 'avatar',\n    };\n\n    const avatarClasses = {\n      'dropdown-avatar': true,\n      'dropdown-avatar-focus': this.isOpen,\n      'dropdown-avatar-disabled': this.disabled,\n    };\n\n    const menuStyle = {\n      position: 'fixed' as const,\n      left: `${this.menuPosition.x}px`,\n      top: `${this.menuPosition.y}px`,\n      zIndex: '9999',\n    };\n\n    return (\n      <div class={containerClasses}>\n        {/* Button variants */}\n        {!this.showAvatar && (\n          <div ref={(el) => (this.triggerRef = el)}>\n            <bh-button\n              hierarchy={this.buttonHierarchy}\n              icon={this.isIconOnly ? 'only' : 'trailing'}\n              size={this.size}\n              label={this.isIconOnly ? '' : this.label}\n              iconName={this.isIconOnly ? this.iconName : 'expand_more'}\n              disabled={this.disabled}\n              onClick={this.toggleDropdown}\n            />\n          </div>\n        )}\n\n        {/* Avatar variant */}\n        {this.showAvatar && (\n          <div\n            ref={(el) => (this.triggerRef = el)}\n            class={avatarClasses}\n            onClick={(e) => {\n              if (!this.disabled) {\n                e.stopPropagation();\n                this.toggleDropdown();\n              }\n            }}\n            role=\"button\"\n            tabindex={this.disabled ? -1 : 0}\n            onKeyDown={(e: KeyboardEvent) => {\n              if (!this.disabled && (e.key === 'Enter' || e.key === ' ')) {\n                e.preventDefault();\n                this.toggleDropdown();\n              }\n            }}\n          >\n            <bh-avatar\n              type=\"image\"\n              size={this.avatarSize}\n              imageSrc={this.avatarSrc}\n              alt={this.avatarAlt}\n            />\n          </div>\n        )}\n\n        {/* Menu with fixed positioning from Floating UI */}\n        <bh-dropdown-menu\n          ref={(el) => (this.menuRef = el)}\n          style={this.isOpen ? menuStyle : { display: 'none' }}\n          visible={this.isOpen}\n          showIcons={this.showIcons}\n          menuItems={JSON.stringify(this.parsedMenuItems)}\n          header={\n            this.parsedHeader ? JSON.stringify(this.parsedHeader) : undefined\n          }\n          onBhItemClick={this.handleMenuItemClick}\n        />\n      </div>\n    );\n  }\n}\n"]}