@props([
    'id' => '',
    'width' => 'md',
    'disabled' => false,
    'hasShadow' => true,
    'focusable' => false,
    'direction' => \App\Enums\EDirection::DOWN
])
<div class="flex items-center relative h-full w-full overflow-x-visible"
     x-data="{open : false}"
>
    <x-buttons.simple class="h-full w-full" :$hasShadow :$disabled :$focusable
                      @keydown.enter.prevent=""
                      focus-changeable
                      @click.outside="open = false"
                      @click="isSafari() ? (open = !open) : ''"
                      @focusin="!isSafari() && (open = true)"
                      @focusout="!isSafari() && setTimeout(() => {
                        $event.target.parentElement.contains($focus.focused()) ? '' : open = false
                    }, 300);"
    >

        {{$header}}
        <i class="fa {{$direction->arrowIcon()}} pl-2"></i>
    </x-buttons.simple>
    <div id="{{$id . '-dropdown'}}"
         x-show="open" x-cloak @click.stop=""
         class="absolute {{$direction->position()}} z-10 bg-white rounded-lg shadow
         @switch($width)
            @case('sm')
                w-48
                @break
            @case('md')
                w-96
                @break
            @default
                {{ $width }}
           @endswitch
         "
    >
        {{$slot}}
    </div>
</div>