@props(['align' => 'right', 'width' => 'w-56'])

{{-- A menu that closes on outside click and on Escape, and that flips above the
     trigger when there is not room below — without which the last rows of a
     table open a menu that is cut off by the scroll container. --}}
<div x-data="{
        open: false,
        up: false,
        toggle() {
            if (this.open) { this.open = false; return; }
            const box = this.$refs.trigger.getBoundingClientRect();
            this.up = (window.innerHeight - box.bottom) < 260;
            this.open = true;
        },
     }"
     @keydown.escape.window="open = false"
     @click.outside="open = false"
     class="relative inline-block text-left">

    <div x-ref="trigger" @click="toggle()">
        {{ $trigger }}
    </div>

    <div x-show="open"
         x-cloak
         x-transition:enter="transition ease-out duration-100"
         x-transition:enter-start="opacity-0 scale-95"
         x-transition:enter-end="opacity-100 scale-100"
         x-transition:leave="transition ease-in duration-75"
         x-transition:leave-start="opacity-100 scale-100"
         x-transition:leave-end="opacity-0 scale-95"
         :class="up ? 'bottom-full mb-2' : 'top-full mt-2'"
         @click="open = false"
         class="absolute z-50 {{ $width }} {{ $align === 'right' ? 'right-0' : 'left-0' }}
                origin-top-right rounded-xl border border-slate-200 bg-white p-1.5 shadow-xl
                dark:border-slate-700 dark:bg-slate-800">
        {{ $slot }}
    </div>
</div>