Replace modal with popover

Author: stephannv

lib/generators/ruby_ui/dependencies.yml

@@ -26,6 +26,10 @@ codeblock:
   gems:
     - "rouge"
 
+combobox:
+  js_packages:
+    - "@floating-ui/dom"
+
 command:
   js_packages:
     - "fuse.js"

lib/ruby_ui/combobox/combobox_controller.js

@@ -1,4 +1,5 @@
 import { Controller } from "@hotwired/stimulus";
+import { computePosition, autoUpdate, offset } from "@floating-ui/dom";
 
 // Connects to data-controller="ruby-ui--combobox"
 export default class extends Controller {
@@ -8,7 +9,7 @@ export default class extends Controller {
 
   static targets = [
     "input",
-    "dialog",
+    "popover",
     "item",
     "emptyState",
     "searchInput",
@@ -22,11 +23,15 @@ export default class extends Controller {
     this.updateTriggerContent()
   }
 
+  disconnect() {
+    this.cleanup();
+  }
+
   inputChanged(e) {
     this.updateTriggerContent()
 
     if (e.target.type == "radio") {
-      this.closeDialog()
+      this.closePopover()
     }
   }
 
@@ -46,26 +51,19 @@ export default class extends Controller {
     }
   }
 
-  openDialog(event) {
+  openPopover(event) {
     event.preventDefault()
 
-    document.body.classList.add('overflow-hidden')
+    this.popoverTarget.style.positionAnchor
     this.triggerTarget.ariaExpanded = "true"
-    this.dialogTarget.showModal()
-  }
-
-  closeDialog() {
-    document.body.classList.remove('overflow-hidden')
-    this.triggerTarget.ariaExpanded = "false"
     this.selectedItemIndex = null
     this.itemTargets.forEach(item => item.ariaCurrent = "false")
-    this.dialogTarget.close()
+    this.popoverTarget.showPopover()
   }
 
-  handleOutsideClick(event) {
-    if (event.target === this.dialogTarget) {
-      this.closeDialog()
-    }
+  closePopover() {
+    this.triggerTarget.ariaExpanded = "false"
+    this.popoverTarget.hidePopover()
   }
 
   filterItems(e) {
@@ -139,4 +137,17 @@ export default class extends Controller {
   wrapSelectedInputIndex(length) {
     this.selectedItemIndex = ((this.selectedItemIndex % length) + length) % length
   }
+
+  updatePopoverPosition() {
+    this.cleanup = autoUpdate(this.triggerTarget, this.popoverTarget, () => {
+      computePosition(this.triggerTarget, this.popoverTarget, {
+        middleware: [offset(4)],
+      }).then(({ x, y }) => {
+        Object.assign(this.popoverTarget.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        });
+      });
+    });
+  }
 }

lib/ruby_ui/combobox/combobox_dialog.rb

@@ -12,7 +12,7 @@ def view_template(&)
 
     def default_attrs
       {
-        class: ["hidden has-[label:not(.hidden)]:flex flex-col gap-1", LABEL_CLASSES],
+        class: ["hidden has-[label:not(.hidden)]:flex flex-col py-1 gap-1 border-b", LABEL_CLASSES],
         role: "group"
       }
     end

lib/ruby_ui/combobox/combobox_list_group.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxPopover < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "inset-auto m-0 absolute border bg-background shadow-lg rounded-lg",
+        role: "popover",
+        autofocus: true,
+        popover: true,
+        data: {
+          ruby_ui__combobox_target: "popover",
+          action: "keydown.down->ruby-ui--combobox#keyDownPressed keydown.up->ruby-ui--combobox#keyUpPressed keydown.enter->ruby-ui--combobox#keyEnterPressed keydown.esc->ruby-ui--combobox#closeDialog:prevent"
+        }
+      }
+    end
+  end
+end

lib/ruby_ui/combobox/combobox_popover.rb

@@ -24,7 +24,7 @@ def default_attrs
         placeholder: @placeholder,
         data: {
           ruby_ui__combobox_target: "searchInput",
-          action: "keyup->ruby-ui--combobox#filterItems"
+          action: "keyup->ruby-ui--combobox#filterItems search->ruby-ui--combobox#filterItems"
         },
         autocomplete: "off",
         autocorrect: "off",

lib/ruby_ui/combobox/combobox_search_input.rb

@@ -18,14 +18,15 @@ def view_template
 
     def default_attrs
       {
+        type: "button",
         class: "flex h-full w-full items-center whitespace-nowrap rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 w-[200px] justify-between",
         data: {
           placeholder: @placeholder,
           ruby_ui__combobox_target: "trigger",
-          action: "ruby-ui--combobox#openDialog"
+          action: "ruby-ui--combobox#openPopover"
         },
         aria: {
-          haspopup: "dialog",
+          haspopup: "listbox",
           expanded: "false"
         }
       }

lib/ruby_ui/combobox/combobox_trigger.rb

@@ -8,7 +8,7 @@ def test_render_with_radio_items
       RubyUI.Combobox(multiple: true, term: "frameworks") do
         RubyUI.ComboboxTrigger placeholder: "Select your framework"
 
-        RubyUI.ComboboxDialog do
+        RubyUI.ComboboxPopover do
           RubyUI.ComboboxSearchInput(placeholder: "Type the framework name")
 
           RubyUI.ComboboxList do
@@ -42,7 +42,7 @@ def test_render_with_checkbox_items
       RubyUI.Combobox(multiple: true, term: "frameworks") do
         RubyUI.ComboboxTrigger placeholder: "Select your framework"
 
-        RubyUI.ComboboxDialog do
+        RubyUI.ComboboxPopover do
           RubyUI.ComboboxSearchInput(placeholder: "Type the framework name")
 
           RubyUI.ComboboxList do