Menus

# Brok UI: Dropdown Menu (`dropdown`)

Accessible menu with roving focus, type-ahead, click-outside dismissal and Escape handling. Sub-parts cover labels, groups, shortcuts, checkbox/radio items and nested submenus. Opt into `anchored` to teleport the panel past a clipping/scrolling ancestor.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add dropdown
```

## Usage

```blade
<x-ui.dropdown>
    <x-ui.dropdown.trigger class="inline-flex h-10 items-center justify-center gap-2 rounded-md border border-border bg-background px-4 text-sm font-medium text-foreground transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background">
        {{ __('Options') }}
        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><path d="m6 9 6 6 6-6" /></svg>
    </x-ui.dropdown.trigger>

    <x-ui.dropdown.content>
        <x-ui.dropdown.label>{{ __('My Account') }}</x-ui.dropdown.label>
        <x-ui.dropdown.item>{{ __('Profile') }}</x-ui.dropdown.item>
        <x-ui.dropdown.item>{{ __('Billing') }}</x-ui.dropdown.item>
        <x-ui.dropdown.item>{{ __('Settings') }}</x-ui.dropdown.item>
        <x-ui.dropdown.separator />
        <x-ui.dropdown.item>{{ __('Sign out') }}</x-ui.dropdown.item>
    </x-ui.dropdown.content>
</x-ui.dropdown>
```

## Props

- `anchored` (bool, default `false`) — Teleport the menu to <body> and position it against the trigger's measured bounding rect, flipping/clamping to stay in the viewport. Use inside a scrollable or `overflow`-clipping ancestor (e.g. a data-table row).
- `align` (start|center|end, default `start`) — Documented catalog control used by the preview workbench.
- `disabled` (false|true, default `false`) — Documented catalog control used by the preview workbench.
- `variant` (mixed|null, default `null`) — Declared by @props in the registry Blade source.
- `size` (string, default `md`) — Declared by @props in the registry Blade source.
- `label` (mixed|null, default `null`) — Declared by @props in the registry Blade source.
- `description` (mixed|null, default `null`) — Declared by @props in the registry Blade source.
- `anchor` (string, default `trigger`) — Declared by @props in the registry Blade source.
- `show` (string, default `open`) — Declared by @props in the registry Blade source.
- `href` (mixed|null, default `null`) — Declared by @props in the registry Blade source.
- `type` (string, default `button`) — Declared by @props in the registry Blade source.
- `keys` (mixed|null, default `null`) — Declared by @props in the registry Blade source.
- `checked` (bool, default `false`) — Declared by @props in the registry Blade source.

## Use when

- Use for secondary actions when compact access is more important than constant visibility.
- Grouping several related actions or options behind a single trigger button.
- Needing checkbox items, radio groups, shortcuts, or nested submenus inside a menu.

## Avoid when

- Do not hide the most frequent or highest-value actions in a menu when discoverability matters.
- The options should be visible at a glance without a click; use a visible group of buttons or radio-tabs.
- Right-click is the expected trigger instead of a visible button; use context-menu.

## Anti-patterns

- Hiding primary actions in menus

## Rules

- Use the `<brok:dropdown>` tag (or `<x-ui.dropdown>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/dropdown
- Registry JSON (files, props, contract): https://brokui.dev/r/open/dropdown.json

@props([
    'anchored' => false,
])

@php
    // Outside-click detection normally just checks containment in this root,
    // which is correct while the content panel renders as its DOM child. In
    // `anchored` mode the content teleports to <body> (so it can escape a
    // clipping/scrolling ancestor such as a data-table row), so it is no
    // longer a descendant of this root — a click inside it would otherwise be
    // misread as "outside" and close the menu instantly. Extending the check
    // to the teleported `$refs.menu` covers both cases from one expression,
    // and reduces to the original behaviour byte-for-byte when unanchored.
    $outsideClick = $anchored ? "if (!\$refs.menu?.contains(\$event.target)) close()" : 'close()';

    // A component that composes this one needs the root to carry ITS name:
    // `status-select`, `saved-views`, `color-dropdown` and `turn-into-menu` all
    // pass `data-slot="<their name>"`. That used to print a SECOND `data-slot`
    // attribute on this same tag, and the browser keeps only the first — so
    // `[data-slot="status-select"]` matched nothing in the DOM even though the
    // manifest documents it as that component's anatomy, and any consumer CSS
    // or script keyed on it silently did nothing. Read the override out of the
    // bag and print exactly one.
    $slotName = (string) ($attributes->get('data-slot') ?: 'dropdown');
@endphp

{{--
    Dropdown menu (spec §17 dropdown keyboard navigation + §19 behavior).
    Root holds open state and menu keyboard handling. Click-outside and Escape
    close the menu and return focus to the trigger.

    `anchored` (opt-in, default false): teleports the content panel to <body>
    and positions it against the trigger's measured bounding rect instead of
    CSS `absolute` positioning inside this relatively-positioned root. Use it
    when the trigger lives inside a container that clips overflow (a
    scrollable table, a `overflow-hidden` card, …). Keyboard behaviour, roving
    focus, typeahead and submenus are identical in both modes; only how the
    panel is placed in the DOM/viewport differs. See `content.blade.php` for
    the placement math.
--}}
<div
    x-data="{{ $anchored ? 'uiDropdown(true)' : 'uiDropdown()' }}"
    x-modelable="open"
    data-slot="{{ $slotName }}"
    @keydown.escape="if (open) { $event.stopPropagation(); closeAndFocus() }"
    @click.outside="{{ $outsideClick }}"
    {{ $attributes->except('data-slot')->merge(['class' => 'relative inline-block text-start']) }}
>
    {{ $slot }}
</div>

@props([
    // Optional button look for the trigger, from the shared button recipe:
    // default | secondary | outline | ghost | link | destructive. Null (the
    // default) keeps the bare, unstyled trigger exactly as before, so a
    // consumer can still style it through `class`.
    //
    // `row` is the menu-row look of a sidebar header or footer menu (the
    // workspace or the user menu): full width, start-aligned, a quiet hover
    // like a sidebar row, a two-line label and an up-down chevron at the end.
    // The slot is the leading mark (a logo or an avatar). Inside a collapsed
    // `sidebar` (the icon rail) the row folds to the mark alone: a square
    // icon button named by `label` (kept for assistive tech and as its title).
    // Outside a sidebar it is always the full row.
    'variant' => null,
    // Button size when `variant` is set: sm | md | lg | icon | icon-sm | icon-lg.
    // For `row`: sm (32px, one line reads best) or md (48px, two lines).
    'size' => 'md',
    // With variant="row": the first line (the workspace or person) and an
    // optional second, muted line (the plan, the email).
    'label' => null,
    'description' => null,
])

@php
    $classes = 'inline-flex items-center justify-center';
    $isRow = $variant === 'row';
    if ($isRow) {
        $size = $size === 'sm' ? 'sm' : 'md';
        $classes = 'flex w-full min-w-0 items-center gap-2 rounded-md px-2 text-start text-sm text-foreground outline-none transition-colors '
            .'hover:bg-accent/60 aria-expanded:bg-accent focus-visible:ring-[length:var(--ring-width)] focus-visible:ring-ring motion-reduce:transition-none '
            .($size === 'sm' ? 'min-h-8 py-1' : 'min-h-12 py-2').' '
            // Collapsed sidebar rail: only the mark, centred in a square.
            .'group-data-[state=collapsed]/sidebar:mx-auto group-data-[state=collapsed]/sidebar:min-h-0 group-data-[state=collapsed]/sidebar:justify-center group-data-[state=collapsed]/sidebar:gap-0 group-data-[state=collapsed]/sidebar:p-0 '
            .($size === 'sm' ? 'group-data-[state=collapsed]/sidebar:size-8' : 'group-data-[state=collapsed]/sidebar:size-10');
    } elseif (filled($variant)) {
        $styles = require base_path(config('ui.component_path', 'resources/views/components/ui').'/_styles.php');
        $button = $styles['button'];
        $variant = $styles['normalizeVariant']($variant);
        $variant = array_key_exists($variant, $button['variants']) ? $variant : 'ghost';
        $size = array_key_exists((string) $size, $button['sizes']) ? (string) $size : 'md';
        $classes = trim($button['base'].' '.$button['variants'][$variant].' '.($variant === 'link' ? $button['linkSizes'][$size] : $button['sizes'][$size]));
    }
@endphp

<button
    type="button"
    data-slot="dropdown-trigger"
    @if (filled($variant)) data-variant="{{ $variant }}" data-size="{{ $size }}" @endif
    x-ref="trigger"
    aria-haspopup="menu"
    :aria-expanded="open"
    @if ($isRow && filled($label)) :title="$el.closest('[data-slot=sidebar]') && typeof expanded !== 'undefined' && !expanded ? @js($label) : null" @endif
    @click="toggle()"
    @keydown.arrow-down.prevent="show()"
    @keydown.arrow-up.prevent="show()"
    {{ $attributes->merge(['class' => $classes]) }}
>
    {{ $slot }}
    @if ($isRow)
        @if (filled($label) || filled($description))
            <span data-slot="dropdown-trigger-label" class="flex min-w-0 flex-1 flex-col group-data-[state=collapsed]/sidebar:sr-only">
                @if (filled($label))
                    <span class="truncate font-medium leading-tight">{{ $label }}</span>
                @endif
                @if (filled($description))
                    <span class="truncate text-xs leading-tight text-muted-foreground group-data-[state=collapsed]/sidebar:hidden">{{ $description }}</span>
                @endif
            </span>
        @endif
        <svg class="ms-auto size-4 shrink-0 text-muted-foreground group-data-[state=collapsed]/sidebar:hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
    @endif
</button>

@aware([
    // Read from the dropdown root; null (not false) so a host that composes
    // this panel outside a dropdown (menubar, context-menu) can pass
    // `:anchored="true"` as a prop instead — see the prop below.
    'anchored' => null,
])

@props([
    // Declared as a prop too: the root's value wins when there is one, and a
    // host outside a dropdown sets it directly. (Left in the attribute bag it
    // would be printed on the panel and unset the aware variable.)
    'anchored' => null,
    'align' => 'start',
    // What the anchored panel is placed against: the trigger's box
    // (`trigger`) or a point the host's script supplies (`point`, a context
    // menu at the pointer). Read by the shared `overlay-position.js` engine
    // through `data-anchor`; it only changes the panel's transform origin here.
    'anchor' => 'trigger',
    // Alpine expression for the panel's open state. A dropdown owns a single
    // `open`; a menubar shows one panel per menu id (`isOpen(menuId)`).
    'show' => 'open',
])

@php
    $anchored = (bool) $anchored;
    $styles = require base_path(config('ui.component_path', 'resources/views/components/ui').'/_styles.php');
    // Both branches used to build their recipe classes with `@class([...])`
    // and then render `$attributes->except('class')` — dropping any consumer
    // `class` on the floor instead of merging it. `@class` prints its own
    // literal `class="…"` attribute; appending `$attributes` unfiltered would
    // have printed a SECOND `class="…"` attribute on the same tag (invalid
    // HTML, and not a merge either way), so `except('class')` was reached for
    // to avoid that duplicate — at the cost of silently discarding every
    // consumer class, including layout-critical ones like `max-h-*`. The fix
    // is the pattern the rest of this registry already uses for a panel with
    // conditional classes (`dialog/content.blade.php`, `sheet/content.blade.php`):
    // build one class string in PHP and pass it through a single
    // `$attributes->merge(['class' => $classes])`, so the consumer's class is
    // appended after the recipe rather than lost. Ordinary conflicting
    // utilities still resolve by generated stylesheet order, not source order
    // (see CLAUDE.md) — a consumer needing to force a structural class to lose
    // reaches for the `!` important modifier, same as everywhere else here.
    // No overflow clipping on the panel: a nested submenu floats beside it and
    // would be cut off; rows truncate their own long labels.
    $anchorKey = $anchor === 'point' ? 'point' : 'trigger';
    $anchoredOrigin = $anchorKey === 'point'
        ? 'origin-top-left rtl:origin-top-right data-[side=top]:origin-bottom-left rtl:data-[side=top]:origin-bottom-right'
        : 'origin-top data-[side=top]:origin-bottom';
    $anchoredClasses = 'fixed '.$anchoredOrigin.' '.$styles['menu']['surface'];

    // menubar and context-menu compose this panel under their own name; the
    // browser keeps only the first of two identical attributes, so read the
    // override out of the bag and print exactly one (see dropdown.item).
    $slotName = (string) ($attributes->get('data-slot') ?: 'dropdown-content');

    $alignClass = match ($align) {
        'start' => 'start-0',
        'end' => 'end-0',
        default => '',
    };
    $unanchoredClasses = trim('absolute mt-2 origin-top '.$styles['menu']['surface'].' '.$alignClass);
@endphp

@if ($anchored)
    {{--
        Anchored mode: teleported to <body> so an `overflow`-clipping ancestor
        (a scrollable data-table row, a card with `overflow-hidden`, …) can
        never cut the menu off. The shared `overlay-position.js` engine
        (called from `dropdown.js`'s `reposition()`, and from menubar.js /
        context-menu.js, which compose this same panel with `show`/`anchor`)
        measures the anchor + this panel and sets `position: fixed` top/left
        directly (mirroring `popover.js`'s measured-overflow flip test rather
        than a naive always-clamp), so no Tailwind position/inset utility is
        needed here — only `data-align`/`data-anchor` for it to read. Escape uses `.window` because
        a teleported node no longer bubbles keydowns through the dropdown
        root; roving-focus/typeahead (`onKey`) and Tab-to-close keep working
        unchanged because they listen on this element directly, and menu items
        remain its real DOM descendants regardless of where it renders.
    --}}
    <template x-teleport="body">
        <div
            data-slot="{{ $slotName }}"
            data-align="{{ $align }}"
            data-anchor="{{ $anchorKey }}"
            role="menu"
            x-ref="menu"
            x-show="{{ $show }}"
            x-cloak
            @keydown="onKey($event)"
            @keydown.tab="close()"
            @keydown.escape.window="({{ $show }}) && closeAndFocus()"
            x-on:click="onItemClick($event)"
            x-transition:enter="motion-safe:transition motion-safe:duration-100 motion-safe:ease-out"
            x-transition:enter-start="opacity-0 scale-95"
            x-transition:enter-end="opacity-100 scale-100"
            x-transition:leave="motion-safe:transition motion-safe:duration-75 motion-safe:ease-in"
            x-transition:leave-start="opacity-100 scale-100"
            x-transition:leave-end="opacity-0 scale-95"
            {{ $attributes->except('data-slot')->merge(['class' => $anchoredClasses]) }}
        >
            {{ $slot }}
        </div>
    </template>
@else
<div
    data-slot="{{ $slotName }}"
    role="menu"
    x-ref="menu"
    x-show="open"
    x-cloak
    @keydown="onKey($event)"
    @keydown.tab="close()"
    x-on:click="onItemClick($event)"
    x-transition:enter="motion-safe:transition motion-safe:duration-100 motion-safe:ease-out"
    x-transition:enter-start="opacity-0 scale-95"
    x-transition:enter-end="opacity-100 scale-100"
    x-transition:leave="motion-safe:transition motion-safe:duration-75 motion-safe:ease-in"
    x-transition:leave-start="opacity-100 scale-100"
    x-transition:leave-end="opacity-0 scale-95"
    {{ $attributes->except('data-slot')->merge(['class' => $unanchoredClasses]) }}
>
    {{ $slot }}
</div>
@endif

@props([
    'href' => null,
    'disabled' => false,
    'type' => 'button',
    // default | destructive. Destructive paints the label and icon in the
    // destructive text token and tints the hover/focus row, for a delete or
    // remove row; the confirmation still belongs to the action it runs.
    'variant' => 'default',
])

{{--
    Fixed-height row by design: `items-center` + `text-sm` keep every item in
    a menu the same control height, so a list of items reads as one aligned
    stack rather than a ragged one — the same "fixed control tiers" rule
    `_styles.php` recipes follow elsewhere. A two-line entry (label plus a
    description) is a real, supported case, but it belongs to the *content*,
    not this root: wrap it in a child `<span class="flex min-w-0 flex-col">`
    (see `select-advanced/option.blade.php`'s rich option, or `slash-menu`)
    so the row still aligns its icon/leading edge at the top of a taller item
    while sibling single-line items keep their normal height. Switching the
    root itself to `items-start` would misalign every plain single-line item
    in the same menu, which is a worse default for the common case to fix an
    uncommon one.
--}}
{{-- Choosing an item closes the menu: the content panel listens for the
     click (see `onItemClick` in dropdown.js) so a consumer's own `@click` /
     `x-on:click` on the item is never shadowed by a duplicate attribute. --}}
@php
    $styles = require base_path(config('ui.component_path', 'resources/views/components/ui').'/_styles.php');
    $tag = $href ? 'a' : 'button';
    $variant = $styles['normalizeVariant']($variant) === 'destructive' ? 'destructive' : 'default';
    $classes = $variant === 'destructive'
        // The base row paints text-popover-foreground; drop it so the
        // destructive colour never depends on stylesheet order, and let the
        // icon take the same colour instead of the muted one.
        ? trim(str_replace('text-popover-foreground', '', $styles['menu']['item'])).' text-destructive-text hover:bg-destructive/10 focus:bg-destructive/10 [&>[data-slot=icon]]:size-4 [&>[data-slot=icon]]:shrink-0'
        : $styles['menu']['item'].' '.$styles['menu']['itemActive'].' '.$styles['menu']['itemIcon'];
    // menubar and context-menu compose this row under their own name; the
    // browser keeps only the first of two identical attributes, so read the
    // override out of the bag and print exactly one.
    $slotName = (string) ($attributes->get('data-slot') ?: 'dropdown-item');
@endphp

<{{ $tag }}
    data-slot="{{ $slotName }}"
    @if ($variant === 'destructive') data-variant="destructive" @endif
    role="menuitem"
    tabindex="-1"
    @if ($tag === 'a') href="{{ $href }}" @else type="{{ $type }}" @endif
    @if ($disabled) data-disabled="true" aria-disabled="true" @endif
    {{ $attributes->except('data-slot')->merge(['class' => $classes]) }}
>
    {{ $slot }}
</{{ $tag }}>

@props([
    // A hotkey string ("mod+k", "shift+d", "g p"): `+` joins a chord, a space
    // separates the two steps of a sequence, `mod` is Ctrl here and ⌘ on
    // macOS. It renders as kbd keys with the non-macOS labels; when the
    // hotkeys registry is installed (`$store.hotkeys`) the labels swap to
    // this platform's once Alpine starts. The slot stays the free-text
    // fallback when `keys` is not set.
    'keys' => null,
])

@php
    $styles = require base_path(config('ui.component_path', 'resources/views/components/ui').'/_styles.php');
    $slotName = (string) ($attributes->get('data-slot') ?: 'dropdown-shortcut');

    $steps = [];
    if (filled($keys)) {
        // Same key grammar and labels as hotkeys.hint (kept here because a
        // core menu cannot depend on the hotkeys pattern).
        $aliases = [
            'cmd' => 'meta', 'command' => 'meta', 'super' => 'meta', 'win' => 'meta',
            'control' => 'ctrl', 'ctl' => 'ctrl', 'option' => 'alt', 'opt' => 'alt',
            'esc' => 'escape', 'return' => 'enter', 'up' => 'arrowup', 'down' => 'arrowdown',
            'left' => 'arrowleft', 'right' => 'arrowright', 'space' => ' ', 'spacebar' => ' ',
            'del' => 'delete', 'plus' => '+',
        ];
        $keyLabels = [
            ' ' => 'Space', 'enter' => 'Enter', 'escape' => 'Esc', 'tab' => 'Tab', 'backspace' => 'Backspace',
            'delete' => 'Delete', 'arrowup' => '↑', 'arrowdown' => '↓', 'arrowleft' => '←', 'arrowright' => '→',
            'home' => 'Home', 'end' => 'End', 'pageup' => 'Page Up', 'pagedown' => 'Page Down',
        ];
        $modifierLabels = ['ctrl' => 'Ctrl', 'meta' => 'Win', 'alt' => 'Alt', 'shift' => 'Shift'];
        foreach (array_slice(preg_split('/\s+/', trim((string) $keys), -1, PREG_SPLIT_NO_EMPTY), 0, 2) as $step) {
            $parts = explode('+', mb_strtolower($step));
            if (count($parts) > 1 && end($parts) === '' && $parts[count($parts) - 2] === '') {
                array_splice($parts, -2, 2, ['+']);
            }
            $chord = ['ctrl' => false, 'meta' => false, 'alt' => false, 'shift' => false];
            $key = '';
            foreach ($parts as $part) {
                $part = $aliases[$part] ?? $part;
                if ($part === 'mod') {
                    $chord['ctrl'] = true;
                } elseif (array_key_exists($part, $chord)) {
                    $chord[$part] = true;
                } else {
                    $key = $part;
                }
            }
            $label = $keyLabels[$key] ?? (mb_strlen($key) === 1 ? mb_strtoupper($key) : ucfirst($key));
            $steps[] = [...array_values(array_map(fn ($m) => $modifierLabels[$m], array_keys(array_filter($chord)))), $label];
        }
    }
@endphp

{{--
    Inline keyboard-shortcut hint for a menu item. Purely presentational
    (decorative), pushed to the inline end with `ms-auto` so it mirrors in RTL.
    Name the shortcut on the item itself with `aria-keyshortcuts`.
    With `keys` and the hotkeys registry installed, a shortcut without Ctrl,
    Cmd or Alt hides while character-key shortcuts are switched off.
--}}
@if ($steps !== [])
    <span
        data-slot="{{ $slotName }}"
        data-keys="{{ $keys }}"
        aria-hidden="true"
        dir="ltr"
        x-data="{ steps: null }"
        x-init="steps = $store.hotkeys?.format({{ \Illuminate\Support\Js::from((string) $keys) }}) ?? null"
        x-show="$store.hotkeys?.showsHint?.({{ \Illuminate\Support\Js::from((string) $keys) }}) ?? true"
        {{ $attributes->except('data-slot')->merge(['class' => 'ms-auto inline-flex shrink-0 items-center gap-1 text-xs text-muted-foreground']) }}
    >
        @foreach ($steps as $s => $labels)
            @if ($s > 0)
                <span>{{ __('then') }}</span>
            @endif
            <x-ui.kbd.group>
                @foreach ($labels as $i => $label)
                    <x-ui.kbd x-text="steps?.[{{ $s }}]?.[{{ $i }}] ?? {{ \Illuminate\Support\Js::from($label) }}">{{ $label }}</x-ui.kbd>
                @endforeach
            </x-ui.kbd.group>
        @endforeach
    </span>
@else
    <span
        data-slot="{{ $slotName }}"
        aria-hidden="true"
        {{ $attributes->except('data-slot')->merge(['class' => $styles['menu']['shortcut']]) }}
    >{{ $slot }}</span>
@endif

@props([
    'checked' => false,
    'disabled' => false,
])

{{--
    Checkable menu item (role="menuitemcheckbox"). The leading slot reserves
    space for a check mark, shown only when checked. `checked`/`disabled` accept
    a boolean (static) or, when set as a bound Alpine attribute (`:checked`),
    an expression — the indicator toggles off `aria-checked`/`data-state` via CSS.
--}}
@php
    $classes = 'group relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-2 pe-2 ps-8 text-start text-sm text-popover-foreground outline-none transition-colors focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50';
@endphp

<button
    type="button"
    data-slot="dropdown-checkbox-item"
    role="menuitemcheckbox"
    tabindex="-1"
    @if ($checked) aria-checked="true" data-state="checked" @else aria-checked="false" data-state="unchecked" @endif
    @if ($disabled) data-disabled="true" aria-disabled="true" @endif
    {{ $attributes->merge(['class' => $classes]) }}
>
    <span class="pointer-events-none absolute inset-y-0 start-2 flex items-center opacity-0 group-aria-checked:opacity-100">
        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><path d="M20 6 9 17l-5-5" /></svg>
    </span>
    {{ $slot }}
</button>

@props([
    'checked' => false,
    'disabled' => false,
])

{{--
    Single-choice menu item (role="menuitemradio"). Pair several inside an
    <x-ui.dropdown.radio-group>. The leading dot indicator shows only for the
    selected item, toggled purely off `aria-checked` via CSS (no JS required).
--}}
@php
    $classes = 'group relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-2 pe-2 ps-8 text-start text-sm text-popover-foreground outline-none transition-colors focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50';
@endphp

<button
    type="button"
    data-slot="dropdown-radio-item"
    role="menuitemradio"
    tabindex="-1"
    @if ($checked) aria-checked="true" data-state="checked" @else aria-checked="false" data-state="unchecked" @endif
    @if ($disabled) data-disabled="true" aria-disabled="true" @endif
    {{ $attributes->merge(['class' => $classes]) }}
>
    <span class="pointer-events-none absolute inset-y-0 start-2 flex items-center opacity-0 group-aria-checked:opacity-100">
        <svg aria-hidden="true" viewBox="0 0 24 24" fill="currentColor" class="size-2"><circle cx="12" cy="12" r="10" /></svg>
    </span>
    {{ $slot }}
</button>

@props([
    'disabled' => false,
])

{{--
    Opens its sibling <x-ui.dropdown.sub-content>. Stays a menuitem in the parent
    menu's roving focus (role="menuitem"), exposes aria-haspopup/aria-expanded,
    and opens on ArrowRight (ArrowLeft closes). The trailing chevron points to the
    inline end and flips automatically under dir="rtl" (rtl:rotate-180). A leading
    <x-ui.icon> gets the same 16px muted treatment as a dropdown item (menu.itemIcon).
--}}
@php
    $styles = require base_path(config('ui.component_path', 'resources/views/components/ui').'/_styles.php');
    $classes = 'flex w-full cursor-default items-center gap-2 rounded-sm px-2 py-2 text-start text-sm text-popover-foreground outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 '.$styles['menu']['itemIcon'];
@endphp

<button
    type="button"
    data-slot="dropdown-sub-trigger"
    role="menuitem"
    tabindex="-1"
    aria-haspopup="menu"
    :aria-expanded="subOpen"
    :data-state="subOpen ? 'open' : 'closed'"
    @if ($disabled) data-disabled="true" aria-disabled="true" @endif
    @click="openSub(); focusFirst()"
    @keydown="onTriggerKey($event)"
    {{ $attributes->merge(['class' => $classes]) }}
>
    {{ $slot }}
    <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ms-auto size-4 rtl:rotate-180"><path d="m9 18 6-6-6-6" /></svg>
</button>

/**
 * Dropdown menu behavior (spec §17 dropdown keyboard navigation).
 *
 * Opening focuses the first menu item. ArrowUp/Down/Home/End move a roving
 * focus across enabled items; printable keys type-ahead to a matching item;
 * Escape and outside click close. Selecting an item closes the menu and
 * returns focus to the trigger. Nested submenus use the `uiDropdownSub`
 * component (inline-end opens, inline-start/Escape closes, including RTL).
 *
 * v1.4.0 adds an opt-in `anchored` mode (see `dropdown.blade.php` /
 * `content.blade.php`): the content panel teleports to <body> and
 * `reposition()` measures the trigger + panel rects to place it with
 * `position: fixed`, flipping above the trigger when it would overflow the
 * viewport below (and there is more room above) and clamping the aligned
 * edge into the viewport otherwise. This mirrors `popover.js`'s
 * measured-overflow collision test — flip only on real overflow, choosing
 * the side with more room, rather than a naive always-clamp against an
 * estimated box size — rather than duplicating a weaker implementation.
 * Listeners are only attached in anchored mode and are torn down on close
 * and in `destroy()`. The placement math lives in `overlay-position.js`,
 * shared with menubar and context-menu, which compose the same panel.
 */
import { placeOverlay, trackOverlayPosition } from './overlay-position.js';

document.addEventListener('alpine:init', () => {
    // Enabled, focusable menu items across the three menu-item roles. Excludes
    // items that live inside a closed nested submenu so roving focus skips them.
    const enabledItems = (menu) => {
        if (!menu) {
            return [];
        }
        const selector =
            '[role="menuitem"]:not([aria-disabled="true"]),' +
            '[role="menuitemcheckbox"]:not([aria-disabled="true"]),' +
            '[role="menuitemradio"]:not([aria-disabled="true"])';
        return Array.from(menu.querySelectorAll(selector)).filter((el) => {
            const subContent = el.closest('[data-slot="dropdown-sub-content"]');
            // Items in a sub-content that belongs to *this* menu are only
            // reachable once that sub-content is visible (x-show toggles it).
            return !subContent || subContent.offsetParent !== null;
        });
    };

    // Move roving focus on Arrow/Home/End, or type-ahead on a printable key.
    // Returns true if the event was handled.
    const handleMenuKey = (event, getItems) => {
        const items = getItems();
        if (items.length === 0) {
            return false;
        }
        const current = items.indexOf(document.activeElement);

        let next;
        switch (event.key) {
            case 'ArrowDown':
                next = (current + 1) % items.length;
                break;
            case 'ArrowUp':
                next = (current - 1 + items.length) % items.length;
                break;
            case 'Home':
                next = 0;
                break;
            case 'End':
                next = items.length - 1;
                break;
            default:
                // Single printable character → type-ahead to next match.
                if (event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey) {
                    const needle = event.key.toLowerCase();
                    const start = current + 1;
                    for (let i = 0; i < items.length; i++) {
                        const item = items[(start + i) % items.length];
                        if ((item.textContent || '').trim().toLowerCase().startsWith(needle)) {
                            event.preventDefault();
                            item.focus();
                            return true;
                        }
                    }
                }
                return false;
        }

        event.preventDefault();
        items[next].focus();
        return true;
    };

    window.Alpine.data('uiDropdown', (anchored = false) => ({
        open: false,
        anchored,
        // Teardown for the resize/scroll tracker attached on open (anchored
        // mode only) and removed on close/destroy.
        _untrack: null,
        // Bumped on every open and close; the deferred open work checks it,
        // so a close (or a close and re-open) before the next tick cancels it.
        _openSeq: 0,

        toggle() {
            this.open ? this.close() : this.show();
        },

        show() {
            if (this.open) return;
            this.open = true;
            const openSeq = ++this._openSeq;
            this.$nextTick(() => {
                if (!this.open || openSeq !== this._openSeq) {
                    return;
                }
                this.items()[0]?.focus();
                if (!this.anchored) {
                    return;
                }
                this.reposition();
                this.teardownReposition();
                this._untrack = trackOverlayPosition(() => this.reposition());
            });
        },

        close() {
            this.open = false;
            this._openSeq++;
            this.teardownReposition();
        },

        // A click on a plain menu item (not a checkbox / radio row, which stay
        // open for further toggles) chooses it: the consumer's own handler on
        // the item has already run by the time the click bubbles here.
        onItemClick(event) {
            const item = event.target.closest('[data-slot="dropdown-item"]');
            if (!item || item.dataset.disabled === 'true' || event.defaultPrevented) return;
            this.closeAndFocus();
        },

        /**
         * Close and return focus to the trigger. Focus moves synchronously,
         * before the menu hides: a deferred focus left a gap in which a fast
         * Enter still activated an item of the closing menu, or a quick
         * re-open ran its own deferred focus in the wrong order.
         */
        closeAndFocus() {
            this.$refs.trigger?.focus();
            this.close();
        },

        teardownReposition() {
            if (this._untrack) {
                this._untrack();
                this._untrack = null;
            }
        },

        /**
         * Place the (teleported, `position: fixed`) panel against the trigger
         * so it stays visible — see `placeOverlay()` for the flip/clamp rules.
         */
        reposition() {
            const panel = this.$refs.menu;
            const trigger = this.$refs.trigger;
            if (!panel || !trigger || !this.open || !this.anchored) {
                return;
            }

            placeOverlay(panel, trigger.getBoundingClientRect());
        },

        items() {
            return enabledItems(this.$refs.menu);
        },

        onKey(event) {
            handleMenuKey(event, () => this.items());
        },

        destroy() {
            this.teardownReposition();
        },
    }));

    // Nested submenu. Lives inside a dropdown-content; opens on hover or
    // ArrowRight from its trigger, closes on ArrowLeft/Escape/pointer-leave.
    window.Alpine.data('uiDropdownSub', () => ({
        subOpen: false,
        _closeTimer: null,

        // Named openSub/closeSub, never open/close: Alpine resolves a method
        // through the nearest scope, so a sub `close()` would shadow the parent
        // dropdown's own close() when a row inside the submenu is chosen.
        openSub() {
            clearTimeout(this._closeTimer);
            this.subOpen = true;
        },

        closeSub() {
            clearTimeout(this._closeTimer);
            this.subOpen = false;
        },

        /**
         * Pointer-leave close with a short grace period, so crossing the gap
         * between the row and the floating panel (or a diagonal move towards
         * it) does not slam the submenu shut; re-entering cancels it.
         */
        closeSoon() {
            clearTimeout(this._closeTimer);
            this._closeTimer = setTimeout(() => {
                this.subOpen = false;
            }, 150);
        },

        toggle() {
            this.subOpen = !this.subOpen;
        },

        destroy() {
            clearTimeout(this._closeTimer);
        },

        subItems() {
            return enabledItems(this.$refs.subMenu);
        },

        focusFirst() {
            this.$nextTick(() => this.subItems()[0]?.focus());
        },

        isRtl() {
            return getComputedStyle(this.$el).direction === 'rtl';
        },

        onTriggerKey(event) {
            const openKey = this.isRtl() ? 'ArrowLeft' : 'ArrowRight';
            const closeKey = this.isRtl() ? 'ArrowRight' : 'ArrowLeft';
            if (event.key === openKey) {
                event.preventDefault();
                event.stopPropagation();
                this.openSub();
                this.focusFirst();
            } else if (event.key === closeKey || event.key === 'Escape') {
                event.preventDefault();
                event.stopPropagation();
                this.closeSub();
            }
        },

        onSubKey(event) {
            const closeKey = this.isRtl() ? 'ArrowRight' : 'ArrowLeft';
            if (event.key === closeKey || event.key === 'Escape') {
                event.preventDefault();
                event.stopPropagation();
                this.closeSub();
                this.$nextTick(() => this.$el.parentElement?.querySelector('[data-slot="dropdown-sub-trigger"]')?.focus());
                return;
            }
            handleMenuKey(event, () => this.subItems());
        },
    }));
});

/**
 * Shared placement engine for a teleported, `position: fixed` floating panel
 * (dropdown, menubar, context-menu). Ships with the dropdown item and is
 * imported by every menu that composes `<x-ui.dropdown.content>` in anchored
 * mode.
 *
 * `placeOverlay()` measures the panel and the viewport and writes fixed
 * top/left plus `data-side`. Vertical placement prefers below the anchor and
 * flips above it only when that would overflow the viewport AND there is more
 * room above than below — the same measured-overflow test `popover.js` uses,
 * rather than a naive always-clamp against an estimated box. Horizontal
 * placement follows the logical `align` (mirrored for RTL) and is clamped
 * into the viewport as a last resort.
 *
 * The anchor is either a box (a trigger's `getBoundingClientRect()`) or a
 * point (`{ x, y }`, a context menu at the pointer): a point is a zero-size
 * box, so the panel's start corner lands on it.
 *
 * `trackOverlayPosition()` re-runs a callback on resize and on any scroll
 * (`capture: true` on `window` also catches a nested scrollable ancestor)
 * and returns the teardown, so a menu can attach it on open and drop it on
 * close and in `destroy()`.
 */
export function placeOverlay(panel, anchor, options = {}) {
    if (!panel || !anchor) {
        return null;
    }

    const align = options.align || panel.getAttribute('data-align') || 'start';
    const margin = options.margin ?? 8; // gutter kept from the viewport edge
    const gap = options.gap ?? 8; // matches the unanchored mode's `mt-2` trigger gap

    const box = 'width' in anchor
        ? anchor
        : { top: anchor.y, bottom: anchor.y, left: anchor.x, right: anchor.x, width: 0, height: 0 };

    const isRtl = getComputedStyle(panel).direction === 'rtl';
    const vw = document.documentElement.clientWidth;
    const vh = document.documentElement.clientHeight;
    // Layout size, not the bounding rect: placement runs while the enter
    // transition still scales the panel, and a scaled rect would put a
    // flipped panel a few pixels over its anchor.
    const r = { width: panel.offsetWidth, height: panel.offsetHeight };

    let side = 'bottom';
    let top = box.bottom + gap;
    if (top + r.height + margin > vh) {
        const spaceBelow = vh - box.bottom;
        const spaceAbove = box.top;
        if (spaceAbove > spaceBelow) {
            side = 'top';
            top = box.top - r.height - gap;
        }
    }
    // Last-resort clamp so an oversized panel never leaves the viewport entirely.
    top = Math.min(Math.max(top, margin), Math.max(margin, vh - r.height - margin));

    // `start` is the anchor's left edge in LTR, right edge in RTL — and the
    // opposite for `end` — the same logical resolution `popover.js` applies.
    const alignStart = (align === 'start') !== isRtl;
    let left = alignStart ? box.left : box.right - r.width;
    left = Math.min(Math.max(left, margin), Math.max(margin, vw - r.width - margin));

    panel.style.position = 'fixed';
    panel.style.top = `${Math.round(top)}px`;
    panel.style.left = `${Math.round(left)}px`;
    panel.dataset.side = side;

    return side;
}

export function trackOverlayPosition(callback) {
    window.addEventListener('resize', callback, { passive: true });
    window.addEventListener('scroll', callback, { passive: true, capture: true });

    return () => {
        window.removeEventListener('resize', callback);
        window.removeEventListener('scroll', callback, { capture: true });
    };
}