{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "menubar", "title": "Menubar", "type": "registry:ui", "files": [ { "path": "packages/registry-angular/components/menubar/menubar.component.ts", "content": "import {\n Component,\n Directive,\n ElementRef,\n EventEmitter,\n Input,\n OnChanges,\n OnDestroy,\n OnInit,\n Output,\n TemplateRef,\n ViewChild,\n ViewContainerRef,\n booleanAttribute,\n inject,\n signal,\n ChangeDetectionStrategy,\n} from '@angular/core'\nimport { cn } from '@/lib/utils'\nimport {\n BodyPortal,\n afterExitAnimation,\n autoPlace,\n computePlacement,\n pushDismissableLayer,\n uniqueId,\n type PopperAlign,\n type PopperSide,\n type PlaceOptions,\n} from '@/ui/popper/popper'\n\nexport type MenubarItemVariant = 'default' | 'destructive'\nexport type MenubarCheckedState = boolean | 'indeterminate'\nexport type MenubarDir = 'ltr' | 'rtl'\nexport type MenubarSide = PopperSide\nexport type MenubarAlign = PopperAlign\n\n/**\n * autoPlace() positions on the next animation frame; place once synchronously too so the\n * panel never paints (or catches a fast click's pointerup) at the viewport origin.\n */\nfunction placeAndTrack(anchor: Element, panel: HTMLElement, options: () => PlaceOptions, prefix: string): () => void {\n const stop = autoPlace(anchor, panel, options, prefix)\n const p = computePlacement(\n anchor.getBoundingClientRect(),\n { width: panel.offsetWidth, height: panel.offsetHeight },\n options(),\n )\n panel.style.left = `${Math.round(p.x)}px`\n panel.style.top = `${Math.round(p.y)}px`\n panel.setAttribute('data-side', p.side)\n panel.setAttribute('data-align', p.align)\n return stop\n}\n\n/*\n * Angular port of UIPKGE Menubar with Radix Menubar behaviour: a row of menus whose\n * triggers share one roving tab stop (ArrowLeft / ArrowRight / Home / End between them).\n * Pressing a trigger (or Enter / Space / ArrowDown) opens its menu in a body portal under\n * it; while one menu is open, hovering another trigger switches to it and ArrowLeft /\n * ArrowRight inside a menu move to the neighbouring menu. Items, checkbox / radio items,\n * labels, separators, shortcuts and hover / ArrowRight submenus behave like the Radix\n * menu (roving focus, typeahead, pointer grace area). Escape and outside presses close;\n * closing from inside hands focus back to the trigger. Class strings match React.\n */\n\n// ---------------------------------------------------------------------------------------\n// Shared menu machinery (Radix Menu): roving focus, typeahead, pointer grace area.\n// ---------------------------------------------------------------------------------------\n\ninterface Point {\n x: number\n y: number\n}\ninterface GraceIntent {\n area: Point[]\n side: 'left' | 'right'\n}\n\nfunction isPointInPolygon(point: Point, polygon: Point[]): boolean {\n let inside = false\n for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {\n const a = polygon[i]!\n const b = polygon[j]!\n if (a.y > point.y !== b.y > point.y && point.x < ((b.x - a.x) * (point.y - a.y)) / (b.y - a.y) + a.x)\n inside = !inside\n }\n return inside\n}\n\nconst isMouse = (event: PointerEvent) => event.pointerType === 'mouse'\nconst FIRST_KEYS = ['ArrowDown', 'PageUp', 'Home']\nconst LAST_KEYS = ['ArrowUp', 'PageDown', 'End']\n\n/** Keyboard + pointer state of one menu panel (root content or a submenu). */\nclass MenuPanel {\n el?: HTMLElement\n openSub?: UiMenubarSubComponent\n /** Typeahead buffer; while non-empty a Space extends the search instead of selecting. */\n search = ''\n private searchTimer: ReturnType | undefined\n private lastX = 0\n private pointerDir: 'left' | 'right' = 'right'\n private grace: GraceIntent | null = null\n private graceTimer: ReturnType | undefined\n\n constructor(private readonly loop: () => boolean) {}\n\n items(): HTMLElement[] {\n if (!this.el) return []\n return [...this.el.querySelectorAll('[role^=\"menuitem\"]')].filter(\n (el) => !el.hasAttribute('data-disabled'),\n )\n }\n\n focusFirst(): void {\n this.items()[0]?.focus({ preventScroll: true })\n }\n\n focusPanel(): void {\n this.el?.focus({ preventScroll: true })\n }\n\n keydown(event: KeyboardEvent): void {\n const panel = this.el\n const target = event.target as HTMLElement\n if (!panel) return\n if (target.closest('[role=\"menu\"]') === panel) {\n if (event.key === 'Tab') event.preventDefault()\n if (!event.ctrlKey && !event.altKey && !event.metaKey && event.key.length === 1) this.typeahead(event.key)\n }\n const items = this.items()\n if (target === panel) {\n // Menu itself focused (pointer open): the first arrow press enters the list.\n if (FIRST_KEYS.includes(event.key)) items[0]?.focus({ preventScroll: true })\n else if (LAST_KEYS.includes(event.key)) items[items.length - 1]?.focus({ preventScroll: true })\n else return\n event.preventDefault()\n return\n }\n if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return\n const current = items.indexOf(target)\n if (current < 0) return\n let next: number\n if (event.key === 'ArrowDown') next = current + 1\n else if (event.key === 'ArrowUp') next = current - 1\n else if (event.key === 'Home' || event.key === 'PageUp') next = 0\n else if (event.key === 'End' || event.key === 'PageDown') next = items.length - 1\n else return\n event.preventDefault()\n if (this.loop()) next = (next + items.length) % items.length\n else next = Math.min(Math.max(next, 0), items.length - 1)\n items[next]?.focus({ preventScroll: true })\n }\n\n /** Radix typeahead: accumulate for 1s, a repeated single character cycles matches. */\n private typeahead(key: string): void {\n const search = this.search + key\n const items = this.items()\n const text = (el: HTMLElement) => (el.getAttribute('data-text-value') ?? el.textContent ?? '').trim()\n const current = items.find((el) => el === document.activeElement)\n const repeated = search.length > 1 && [...search].every((c) => c === search[0])\n const needle = (repeated ? search[0]! : search).toLowerCase()\n const start = current ? items.indexOf(current) : 0\n let candidates = [...items.slice(start), ...items.slice(0, start)]\n if (needle.length === 1) candidates = candidates.filter((el) => el !== current)\n const match = candidates.find((el) => text(el).toLowerCase().startsWith(needle))\n this.search = search\n clearTimeout(this.searchTimer)\n this.searchTimer = setTimeout(() => (this.search = ''), 1000)\n if (match && match !== current) setTimeout(() => match.focus({ preventScroll: true }))\n }\n\n pointerMove(event: PointerEvent): void {\n if (!isMouse(event) || !this.el?.contains(event.target as Node) || event.clientX === this.lastX) return\n this.pointerDir = event.clientX > this.lastX ? 'right' : 'left'\n this.lastX = event.clientX\n }\n\n /** True while the pointer travels from a sub-trigger toward its open submenu. */\n isMovingToSub(event: PointerEvent): boolean {\n const g = this.grace\n return !!g && this.pointerDir === g.side && isPointInPolygon({ x: event.clientX, y: event.clientY }, g.area)\n }\n\n setGrace(intent: GraceIntent | null): void {\n this.grace = intent\n clearTimeout(this.graceTimer)\n if (intent) this.graceTimer = setTimeout(() => (this.grace = null), 300)\n }\n\n /** Radix `onItemLeave`: the pointer left an item, so the menu itself takes focus. */\n itemLeave(event: PointerEvent): void {\n if (this.isMovingToSub(event)) return\n this.focusPanel()\n }\n\n /** Focus landing anywhere in this panel except the open sub's trigger closes that sub. */\n focusMoved(target: EventTarget | null): void {\n const sub = this.openSub\n if (sub && target !== sub.trigger) sub.setOpen(false)\n }\n\n destroy(): void {\n clearTimeout(this.searchTimer)\n clearTimeout(this.graceTimer)\n this.search = ''\n this.grace = null\n }\n}\n\n// ---------------------------------------------------------------------------------------\n// Root, menu, trigger, content\n// ---------------------------------------------------------------------------------------\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-menubar, [ui-menubar]',\n standalone: true,\n host: {\n '[attr.data-slot]': '\"menubar\"',\n '[attr.data-uipkge]': '\"\"',\n '[attr.role]': '\"menubar\"',\n '[attr.data-orientation]': '\"horizontal\"',\n '[attr.tabindex]': 'tabbingBackOut || !menus.size ? -1 : 0',\n '[class]': 'hostClass',\n '(mousedown)': 'clickFocus = true',\n '(focusin)': 'onFocus($event)',\n '(focusout)': 'onFocusOut()',\n },\n template: ``,\n})\nexport class UiMenubarComponent {\n private readonly el = inject>(ElementRef)\n @Input('class') className?: string\n /** The open menu's `value` ('' when every menu is closed). */\n @Input() value?: string\n @Input() defaultValue = ''\n @Input({ transform: booleanAttribute }) loop = true\n @Input() dir: MenubarDir = 'ltr'\n @Output() valueChange = new EventEmitter()\n\n private readonly _value = signal(null)\n /** Roving tab stop: the trigger Tab lands on (the last focused / opened one). */\n readonly tabStop = signal(null)\n readonly menus = new Map()\n tabbingBackOut = false\n clickFocus = false\n\n get currentValue(): string {\n return this.value ?? this._value() ?? this.defaultValue\n }\n\n get hostClass(): string {\n return cn('bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs', this.className)\n }\n\n setValue(value: string): void {\n const previous = this.currentValue\n if (value === previous) return\n this._value.set(value)\n this.valueChange.emit(value)\n for (const menu of this.menus.values()) if (menu.value === previous || menu.value === value) menu.sync()\n }\n\n /** Radix `onMenuOpen`: open this menu (closing any other) and make its trigger the tab stop. */\n openMenu(value: string): void {\n this.setValue(value)\n this.tabStop.set(value)\n }\n\n closeMenus(): void {\n this.setValue('')\n }\n\n /** Triggers in DOM order (the roving-focus / ArrowLeft-Right order). */\n triggers(): { el: HTMLElement; menu: UiMenubarMenuComponent }[] {\n return [...this.el.nativeElement.querySelectorAll('[data-slot=\"menubar-trigger\"]')]\n .map((el) => ({ el, menu: this.menus.get(el)! }))\n .filter((t) => !!t.menu)\n }\n\n enabledTriggers(): { el: HTMLElement; menu: UiMenubarMenuComponent }[] {\n return this.triggers().filter((t) => !t.el.hasAttribute('data-disabled'))\n }\n\n /** Radix RovingFocusGroup entry: tabbing onto the bar lands on the tab-stop trigger. */\n onFocus(event: FocusEvent): void {\n const isKeyboardFocus = !this.clickFocus\n this.clickFocus = false\n if (event.target !== this.el.nativeElement || !isKeyboardFocus) return\n const items = this.enabledTriggers()\n const target = items.find((t) => t.menu.value === this.tabStop()) ?? items[0]\n target?.el.focus()\n }\n\n /** Arrow / Home / End between triggers (horizontal roving focus). */\n moveFocus(from: HTMLElement, key: string): boolean {\n const items = this.enabledTriggers().map((t) => t.el)\n const i = items.indexOf(from)\n const prev = this.dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft'\n const next = this.dir === 'rtl' ? 'ArrowLeft' : 'ArrowRight'\n let target: number\n if (key === next) target = i + 1\n else if (key === prev) target = i - 1\n else if (key === 'Home' || key === 'PageUp') target = 0\n else if (key === 'End' || key === 'PageDown') target = items.length - 1\n else return false\n if (this.loop) target = (target + items.length) % items.length\n else target = Math.min(Math.max(target, 0), items.length - 1)\n items[target]?.focus()\n return true\n }\n\n onFocusOut(): void {\n this.tabbingBackOut = false\n this.el.nativeElement.setAttribute('tabindex', this.menus.size ? '0' : '-1')\n }\n\n /** Shift+Tab out of the bar must not land on the bar itself (Radix `isTabbingBackOut`). */\n tabBackOut(): void {\n this.tabbingBackOut = true\n this.el.nativeElement.setAttribute('tabindex', '-1')\n }\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-menubar-menu, [ui-menubar-menu]',\n standalone: true,\n host: {\n '[attr.data-slot]': '\"menubar-menu\"',\n '[attr.data-uipkge]': '\"\"',\n // Radix Menu renders no element: keep the wrapper out of layout.\n class: 'contents',\n },\n template: ``,\n})\nexport class UiMenubarMenuComponent implements OnInit {\n readonly bar = inject(UiMenubarComponent)\n /** Identifies the menu in the bar's `value`; auto-generated when not set. */\n @Input() value = ''\n readonly triggerId = uniqueId('menubar-trigger')\n readonly contentId = uniqueId('menubar-content')\n trigger?: HTMLElement\n content?: UiMenubarContentComponent\n /** Radix `wasKeyboardTriggerOpenRef`: Enter / Space / ArrowDown on the trigger focus the first item. */\n wasKeyboardTriggerOpen = false\n\n ngOnInit(): void {\n if (!this.value) this.value = uniqueId('menubar-menu')\n }\n\n get dir(): MenubarDir {\n return this.bar.dir\n }\n\n get isOpen(): boolean {\n return !!this.value && this.bar.currentValue === this.value\n }\n\n /** Item family API (select closes, Escape closes). */\n setOpen(value: boolean): void {\n if (value) this.bar.openMenu(this.value)\n else if (this.isOpen) this.bar.closeMenus()\n }\n\n sync(): void {\n if (!this.isOpen) this.wasKeyboardTriggerOpen = false\n this.content?.sync()\n }\n}\n\n/** A directive, so it sits on any `