From 2379e73ae220ce2b4285c4746abc511cee202798 Mon Sep 17 00:00:00 2001
From: Zep Fietje <hey@zepfietje.com>
Date: Tue, 9 Aug 2022 13:19:08 +0200
Subject: [PATCH] very wip

---
 .../layouts/app/topbar/user-menu.blade.php    |  2 +
 .../views/components/builder.blade.php        | 29 +++++----
 .../components/builder/block-picker.blade.php | 31 +++-------
 .../views/components/dropdown/index.blade.php | 10 ++++
 .../views/components/actions/group.blade.php  | 58 +++++++-----------
 .../views/components/dropdown/index.blade.php | 56 +++++++++++++++++
 .../components/bulk-actions/index.blade.php   | 35 +++--------
 .../components/bulk-actions/trigger.blade.php |  1 -
 .../views/components/dropdown/index.blade.php | 10 ++++
 .../components/filters/popover.blade.php      | 60 +++++--------------
 .../components/filters/trigger.blade.php      |  1 -
 .../components/toggleable/index.blade.php     | 46 +++-----------
 .../components/toggleable/trigger.blade.php   |  1 -
 13 files changed, 157 insertions(+), 183 deletions(-)
 create mode 100644 packages/forms/resources/views/components/dropdown/index.blade.php
 create mode 100644 packages/support/resources/views/components/dropdown/index.blade.php
 create mode 100644 packages/tables/resources/views/components/dropdown/index.blade.php

diff --git a/packages/admin/resources/views/components/layouts/app/topbar/user-menu.blade.php b/packages/admin/resources/views/components/layouts/app/topbar/user-menu.blade.php
index 7dbf666c77..42ce115035 100644
--- a/packages/admin/resources/views/components/layouts/app/topbar/user-menu.blade.php
+++ b/packages/admin/resources/views/components/layouts/app/topbar/user-menu.blade.php
@@ -1,3 +1,5 @@
+{{-- TODO: use dropdown here --}}
+
 @php
     $user = \Filament\Facades\Filament::auth()->user();
 @endphp
diff --git a/packages/forms/resources/views/components/builder.blade.php b/packages/forms/resources/views/components/builder.blade.php
index 984b47492f..8840bf207a 100644
--- a/packages/forms/resources/views/components/builder.blade.php
+++ b/packages/forms/resources/views/components/builder.blade.php
@@ -188,19 +188,22 @@ class="space-y-12"
                                 class="absolute inset-x-0 bottom-0 z-10 flex items-center justify-center h-12 -mb-12"
                             >
                                 <div x-data class="relative flex justify-center">
-                                    <x-forms::icon-button
-                                        :label="$getCreateItemBetweenButtonLabel()"
-                                        icon="heroicon-o-plus"
-                                        x-on:click="$refs.panel.toggle"
-                                        type="button"
-                                    />
-
-                                    <x-forms::builder.block-picker
-                                        :blocks="$getBlocks()"
-                                        :create-after-item="$uuid"
-                                        :state-path="$getStatePath()"
-                                        class="py-2"
-                                    />
+                                    <x-forms::dropdown>
+                                        <x-slot name="trigger">
+                                            <x-forms::icon-button
+                                                :label="$getCreateItemBetweenButtonLabel()"
+                                                icon="heroicon-o-plus"
+                                                type="button"
+                                            />
+                                        </x-slot>
+
+                                        <x-forms::builder.block-picker
+                                            :blocks="$getBlocks()"
+                                            :create-after-item="$uuid"
+                                            :state-path="$getStatePath()"
+                                            class="py-2"
+                                        />
+                                    </x-forms::dropdown>
                                 </div>
                             </div>
                         @endif
diff --git a/packages/forms/resources/views/components/builder/block-picker.blade.php b/packages/forms/resources/views/components/builder/block-picker.blade.php
index 75ff5c095d..723e371990 100644
--- a/packages/forms/resources/views/components/builder/block-picker.blade.php
+++ b/packages/forms/resources/views/components/builder/block-picker.blade.php
@@ -4,26 +4,13 @@
     'statePath',
 ])
 
-<div
-    x-ref="panel"
-    x-transition
-    x-cloak
-    x-float.placement.bottom.flip.offset="{ offset: 8 }"
-    {{ $attributes->class([
-        'absolute hidden z-20 w-52 filament-forms-builder-component-block-picker',
-    ]) }}
->
-    <ul @class([
-        'py-1 space-y-1 bg-white shadow rounded-xl shadow-xl ring-1 ring-gray-900/10 overflow-hidden rounded-xl',
-        'dark:bg-gray-700 dark:divide-gray-600 dark:ring-white/20' => config('forms.dark_mode'),
-    ])>
-        @foreach ($blocks as $block)
-            <x-forms::dropdown.item
-                :wire:click="'dispatchFormEvent(\'builder::createItem\', \'' . $statePath . '\', \'' . $block->getName() . '\'' . ($createAfterItem ? ', \'' . $createAfterItem . '\'' : '') . ')'"
-                :icon="$block->getIcon()"
-            >
-                {{ $block->getLabel() }}
-            </x-forms::dropdown.item>
-        @endforeach
-    </ul>
+<div {{ $attributes->class('filament-forms-builder-component-block-picker') }}>
+    @foreach ($blocks as $block)
+        <x-forms::dropdown.item
+            :wire:click="'dispatchFormEvent(\'builder::createItem\', \'' . $statePath . '\', \'' . $block->getName() . '\'' . ($createAfterItem ? ', \'' . $createAfterItem . '\'' : '') . ')'"
+            :icon="$block->getIcon()"
+        >
+            {{ $block->getLabel() }}
+        </x-forms::dropdown.item>
+    @endforeach
 </div>
diff --git a/packages/forms/resources/views/components/dropdown/index.blade.php b/packages/forms/resources/views/components/dropdown/index.blade.php
new file mode 100644
index 0000000000..afa391ef44
--- /dev/null
+++ b/packages/forms/resources/views/components/dropdown/index.blade.php
@@ -0,0 +1,10 @@
+@captureSlots([
+    'trigger',
+])
+
+<x-filament-support::dropdown
+    :attributes="\Filament\Support\prepare_inherited_attributes($attributes)->merge($slots)"
+    :dark-mode="config('forms.dark_mode')"
+>
+    {{ $slot }}
+</x-filament-support::dropdown>
diff --git a/packages/support/resources/views/components/actions/group.blade.php b/packages/support/resources/views/components/actions/group.blade.php
index 701f30a096..5ef72fab8f 100644
--- a/packages/support/resources/views/components/actions/group.blade.php
+++ b/packages/support/resources/views/components/actions/group.blade.php
@@ -7,39 +7,27 @@
     'tooltip' => null,
 ])
 
-<div x-data {{ $attributes->class(['relative']) }}>
-    <x-filament-support::icon-button
-        x-on:click="$refs.panel.toggle"
-        :color="$color"
-        :dark-mode="$darkMode"
-        :icon="$icon"
-        :tooltip="$tooltip"
-        class="-my-2"
-    >
-        <x-slot name="label">
-            {{ $label }}
-        </x-slot>
-    </x-filament-support::icon-button>
+<x-filament-support::dropdown
+    :attributes="$attributes"
+    :dark-mode="$darkMode"
+>
+    <x-slot name="trigger">
+        <x-filament-support::icon-button
+            :color="$color"
+            :dark-mode="$darkMode"
+            :icon="$icon"
+            :tooltip="$tooltip"
+            class="-my-2"
+        >
+            <x-slot name="label">
+                {{ $label }}
+            </x-slot>
+        </x-filament-support::icon-button>
+    </x-slot>
 
-    <div
-        x-ref="panel"
-        x-transition
-        x-cloak
-        x-float.placement.bottom-end.flip.offset.shift.teleport="{ offset: 8 }"
-        @class([
-            'absolute hidden z-20 shadow-xl ring-1 ring-gray-900/10 overflow-hidden rounded-xl w-52 filament-action-group-dropdown',
-            'dark:ring-white/20' => $darkMode,
-        ])
-    >
-        <ul @class([
-            'py-1 space-y-1 bg-white shadow rounded-xl',
-            'dark:bg-gray-700 dark:divide-gray-600' => $darkMode,
-        ])>
-            @foreach ($actions as $action)
-                @if (! $action->isHidden())
-                    {{ $action }}
-                @endif
-            @endforeach
-        </ul>
-    </div>
-</div>
+    @foreach ($actions as $action)
+        @if (! $action->isHidden())
+            {{ $action }}
+        @endif
+    @endforeach
+</x-filament-support::dropdown>
diff --git a/packages/support/resources/views/components/dropdown/index.blade.php b/packages/support/resources/views/components/dropdown/index.blade.php
new file mode 100644
index 0000000000..054a21cf61
--- /dev/null
+++ b/packages/support/resources/views/components/dropdown/index.blade.php
@@ -0,0 +1,56 @@
+@props([
+    'darkMode' => false,
+    'width' => 'sm',
+    'trigger' => null,
+])
+
+<div {{ $attributes->class('relative filament-dropdown') }} x-data="{}">
+    @isset($trigger)
+        <div
+            x-on:click="$refs.panel.toggle"
+            {{ $trigger->attributes->class(['filament-dropdown-trigger']) }}
+        >
+            {{ $trigger }}
+        </div>
+    @endisset
+
+    <div
+        x-ref="panel"
+        x-cloak
+        x-transition
+        x-transition:enter="transition"
+        x-transition:enter-start="-translate-y-1 opacity-0"
+        x-transition:enter-end="translate-y-0 opacity-100"
+        x-transition:leave="transition"
+        x-transition:leave-start="translate-y-0 opacity-100"
+        x-transition:leave-end="-translate-y-1 opacity-0"
+        {{-- x-float.placement.bottom.flip.offset="{ offset: 8 }" --}}
+        {{-- x-float.placement.bottom-start.flip.offset="{ offset: 8 }" --}}
+        {{-- x-float.placement.bottom-end.flip.offset.shift.teleport="{ offset: 8 }" --}}
+        {{-- x-float.placement.bottom-end.offset="{ offset: 8 }" --}}
+        x-float.placement.bottom-end.offset="{ offset: 8 }"
+        @class([
+            'filament-dropdown-panel absolute hidden z-20 w-screen shadow-xl rounded-xl top-full',
+            match ($width) {
+                'xs' => 'max-w-xs',
+                'md' => 'max-w-md',
+                'lg' => 'max-w-lg',
+                'xl' => 'max-w-xl',
+                '2xl' => 'max-w-2xl',
+                '3xl' => 'max-w-3xl',
+                '4xl' => 'max-w-4xl',
+                '5xl' => 'max-w-5xl',
+                '6xl' => 'max-w-6xl',
+                '7xl' => 'max-w-7xl',
+                default => 'max-w-sm',
+            },
+        ])
+    >
+        <ul @class([
+            'py-1 space-y-1 bg-white shadow rounded-xl shadow-xl ring-1 ring-gray-900/10 overflow-hidden rounded-xl',
+            'dark:bg-gray-700 dark:divide-gray-600 dark:ring-white/20' => $darkMode,
+        ])>
+            {{ $slot }}
+        </ul>
+    </div>
+</div>
diff --git a/packages/tables/resources/views/components/bulk-actions/index.blade.php b/packages/tables/resources/views/components/bulk-actions/index.blade.php
index f671e8c696..49700e3301 100644
--- a/packages/tables/resources/views/components/bulk-actions/index.blade.php
+++ b/packages/tables/resources/views/components/bulk-actions/index.blade.php
@@ -2,31 +2,12 @@
     'actions',
 ])
 
-<div
-    x-data="{}"
-    x-cloak
-    {{ $attributes->class(['relative filament-tables-bulk-actions']) }}
->
-    <x-tables::bulk-actions.trigger />
+<x-tables::dropdown :attributes="$attributes->class('filament-tables-bulk-actions')">
+    <x-slot name="trigger">
+        <x-tables::bulk-actions.trigger />
+    </x-slot>
 
-    <div
-        x-ref="panel"
-        x-float.placement.bottom-start.flip.offset="{ offset: 8 }"
-        x-transition:enter="transition"
-        x-transition:enter-start="-translate-y-1 opacity-0"
-        x-transition:enter-end="translate-y-0 opacity-100"
-        x-transition:leave="transition"
-        x-transition:leave-start="translate-y-0 opacity-100"
-        x-transition:leave-end="-translate-y-1 opacity-0"
-        class="absolute z-10 hidden shadow-xl rounded-xl w-52"
-    >
-        <ul @class([
-            'py-1 space-y-1 overflow-hidden bg-white shadow rounded-xl',
-            'dark:border-gray-600 dark:bg-gray-700' => config('tables.dark_mode'),
-        ])>
-            @foreach ($actions as $action)
-                {{ $action }}
-            @endforeach
-        </ul>
-    </div>
-</div>
+    @foreach ($actions as $action)
+        {{ $action }}
+    @endforeach
+</x-tables::dropdown>
diff --git a/packages/tables/resources/views/components/bulk-actions/trigger.blade.php b/packages/tables/resources/views/components/bulk-actions/trigger.blade.php
index 61e26580a1..b53c55447e 100644
--- a/packages/tables/resources/views/components/bulk-actions/trigger.blade.php
+++ b/packages/tables/resources/views/components/bulk-actions/trigger.blade.php
@@ -1,6 +1,5 @@
 <x-tables::icon-button
     icon="heroicon-o-dots-vertical"
-    x-on:click="$refs.panel.toggle"
     :label="__('tables::table.buttons.open_actions.label')"
     {{ $attributes->class(['filament-tables-bulk-actions-trigger']) }}
 />
diff --git a/packages/tables/resources/views/components/dropdown/index.blade.php b/packages/tables/resources/views/components/dropdown/index.blade.php
new file mode 100644
index 0000000000..bb608dd75d
--- /dev/null
+++ b/packages/tables/resources/views/components/dropdown/index.blade.php
@@ -0,0 +1,10 @@
+@captureSlots([
+    'trigger',
+])
+
+<x-filament-support::dropdown
+    :attributes="\Filament\Support\prepare_inherited_attributes($attributes)->merge($slots)"
+    :dark-mode="config('tables.dark_mode')"
+>
+    {{ $slot }}
+</x-filament-support::dropdown>
diff --git a/packages/tables/resources/views/components/filters/popover.blade.php b/packages/tables/resources/views/components/filters/popover.blade.php
index 2522ba7d34..9276a5d610 100644
--- a/packages/tables/resources/views/components/filters/popover.blade.php
+++ b/packages/tables/resources/views/components/filters/popover.blade.php
@@ -3,54 +3,24 @@
     'width' => 'sm',
 ])
 
-<div
-    x-data="{}"
-    {{ $attributes->class(['relative inline-block filament-tables-filters']) }}
->
-    <x-tables::filters.trigger />
+<x-tables::dropdown :attributes="$attributes->class(['filament-tables-filters'])">
+    <x-slot name="trigger">
+        <x-tables::filters.trigger />
+    </x-slot>
 
     <div
-        x-ref="popoverPanel"
-        x-float.placement.bottom-end.offset="{ offset: 8 }"
+        class="px-6 py-4 space-y-6"
         wire:ignore.self
-        wire:key="{{ $this->id }}.table.filters.panel"
-        x-cloak
-        x-transition:enter="ease duration-300"
-        x-transition:enter-start="opacity-0 -translate-y-2"
-        x-transition:enter-end="opacity-100 translate-y-0"
-        x-transition:leave="ease duration-300"
-        x-transition:leave-start="opacity-100 translate-y-0"
-        x-transition:leave-end="opacity-0 translate-y-2"
-        @class([
-            'absolute hidden z-10 w-screen top-full transition',
-            match ($width) {
-                'xs' => 'max-w-xs',
-                'md' => 'max-w-md',
-                'lg' => 'max-w-lg',
-                'xl' => 'max-w-xl',
-                '2xl' => 'max-w-2xl',
-                '3xl' => 'max-w-3xl',
-                '4xl' => 'max-w-4xl',
-                '5xl' => 'max-w-5xl',
-                '6xl' => 'max-w-6xl',
-                '7xl' => 'max-w-7xl',
-                default => 'max-w-sm',
-            },
-        ])
+        wire:key="{{ $this->id }}.table.filters"
     >
-        <div @class([
-            'px-6 py-4 bg-white border border-gray-300 space-y-6 shadow-xl rounded-xl',
-            'dark:bg-gray-800 dark:border-gray-700' => config('tables.dark_mode'),
-        ]) wire:ignore.self>
-            <x-tables::icon-button
-                icon="heroicon-o-x"
-                x-on:click="$refs.popoverPanel.close"
-                :label=" __('tables::table.filters.buttons.close.label')"
-                color="secondary"
-                {{ $attributes->class(['absolute top-3 right-3 rtl:right-auto rtl:left-3']) }}
-            />
+        <x-tables::icon-button
+            icon="heroicon-o-x"
+            x-on:click="$refs.popoverPanel.close"
+            :label=" __('tables::table.filters.buttons.close.label')"
+            color="secondary"
+            class="absolute top-3 right-3 rtl:right-auto rtl:left-3"
+        />
 
-            <x-tables::filters :form="$form" />
-        </div>
+        <x-tables::filters :form="$form" />
     </div>
-</div>
+</x-tables::dropdown>
diff --git a/packages/tables/resources/views/components/filters/trigger.blade.php b/packages/tables/resources/views/components/filters/trigger.blade.php
index c10dc23fe7..a40d8b6547 100644
--- a/packages/tables/resources/views/components/filters/trigger.blade.php
+++ b/packages/tables/resources/views/components/filters/trigger.blade.php
@@ -1,6 +1,5 @@
 <x-tables::icon-button
     icon="heroicon-o-filter"
-    x-on:click="$refs.popoverPanel.toggle"
     :label="__('tables::table.buttons.filter.label')"
     {{ $attributes->class(['filament-tables-filters-trigger']) }}
 />
diff --git a/packages/tables/resources/views/components/toggleable/index.blade.php b/packages/tables/resources/views/components/toggleable/index.blade.php
index 52771f0ba4..b561b1c78e 100644
--- a/packages/tables/resources/views/components/toggleable/index.blade.php
+++ b/packages/tables/resources/views/components/toggleable/index.blade.php
@@ -3,46 +3,16 @@
     'width' => 'sm',
 ])
 
-<div
-    x-data
-    {{ $attributes->class(['relative inline-block filament-tables-column-toggling']) }}
->
-    <x-tables::toggleable.trigger />
+<x-tables::dropdown :attributes="$attributes->class(['filament-tables-column-toggling'])">
+    <x-slot name="trigger">
+        <x-tables::toggleable.trigger />
+    </x-slot>
 
     <div
-        x-ref="toggleablePanel"
-        x-float.placement.bottom-end.offset="{ offset: 8 }"
+        class="px-6 py-4 space-y-6"
         wire:ignore.self
-        wire:key="{{ $this->id }}.table.toggle.panel"
-        x-cloak
-        x-transition:enter="ease duration-300"
-        x-transition:enter-start="opacity-0 -translate-y-2"
-        x-transition:enter-end="opacity-100 translate-y-0"
-        x-transition:leave="ease duration-300"
-        x-transition:leave-start="opacity-100 translate-y-0"
-        x-transition:leave-end="opacity-0 translate-y-2"
-        @class([
-            'absolute hidden z-10 w-screen top-full transition',
-            match ($width) {
-                'xs' => 'max-w-xs',
-                'md' => 'max-w-md',
-                'lg' => 'max-w-lg',
-                'xl' => 'max-w-xl',
-                '2xl' => 'max-w-2xl',
-                '3xl' => 'max-w-3xl',
-                '4xl' => 'max-w-4xl',
-                '5xl' => 'max-w-5xl',
-                '6xl' => 'max-w-6xl',
-                '7xl' => 'max-w-7xl',
-                default => 'max-w-sm',
-            },
-        ])
+        wire:key="{{ $this->id }}.table.toggle.form"
     >
-        <div @class([
-            'px-6 py-4 bg-white border border-gray-300 space-y-6 shadow-xl rounded-xl',
-            'dark:bg-gray-800 dark:border-gray-700' => config('tables.dark_mode'),
-        ])>
-            {{ $form }}
-        </div>
+        {{ $form }}
     </div>
-</div>
+</x-tables::dropdown>
diff --git a/packages/tables/resources/views/components/toggleable/trigger.blade.php b/packages/tables/resources/views/components/toggleable/trigger.blade.php
index 638b4a52a4..0e76914b8b 100644
--- a/packages/tables/resources/views/components/toggleable/trigger.blade.php
+++ b/packages/tables/resources/views/components/toggleable/trigger.blade.php
@@ -1,6 +1,5 @@
 <x-tables::icon-button
     icon="heroicon-o-view-boards"
-    x-on:click="$refs.toggleablePanel.toggle"
     :label="__('tables::table.buttons.toggle_columns.label')"
     {{ $attributes->class(['filament-tables-column-toggling-trigger']) }}
 />