Some improvements

Author: stephannv

lib/ruby_ui/combobox/combobox_checkbox.rb

@@ -10,7 +10,11 @@ def view_template
 
     def default_attrs
       {
-        class: "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 accent-primary",
+        class: [
+          "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background accent-primary",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "disabled:cursor-not-allowed disabled:opacity-50"
+        ],
         data: {
           ruby_ui__combobox_target: "input",
           action: "ruby-ui--combobox#inputChanged"

lib/ruby_ui/combobox/combobox_controller.js

@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus";
-import { computePosition, autoUpdate, offset } from "@floating-ui/dom";
+import { computePosition, autoUpdate, offset, flip } from "@floating-ui/dom";
 
 // Connects to data-controller="ruby-ui--combobox"
 export default class extends Controller {
@@ -54,7 +54,8 @@ export default class extends Controller {
   openPopover(event) {
     event.preventDefault()
 
-    this.popoverTarget.style.positionAnchor
+    this.updatePopoverPosition()
+    this.updatePopoverWidth()
     this.triggerTarget.ariaExpanded = "true"
     this.selectedItemIndex = null
     this.itemTargets.forEach(item => item.ariaCurrent = "false")
@@ -141,7 +142,8 @@ export default class extends Controller {
   updatePopoverPosition() {
     this.cleanup = autoUpdate(this.triggerTarget, this.popoverTarget, () => {
       computePosition(this.triggerTarget, this.popoverTarget, {
-        middleware: [offset(4)],
+        placement: 'bottom-start',
+        middleware: [offset(4), flip()],
       }).then(({ x, y }) => {
         Object.assign(this.popoverTarget.style, {
           left: `${x}px`,
@@ -150,4 +152,8 @@ export default class extends Controller {
       });
     });
   }
+
+  updatePopoverWidth() {
+    this.popoverTarget.style.width = `${this.triggerTarget.offsetWidth}px`
+  }
 }

lib/ruby_ui/combobox/combobox_item.rb

@@ -10,7 +10,11 @@ def view_template(&)
 
     def default_attrs
       {
-        class: "flex flex-row gap-2 items-center rounded-sm px-2 py-1.5 text-sm outline-none cursor-pointer select-none has-[:checked]:bg-accent hover:bg-accent p-2 [&>svg]:pointer-events-none [&>svg]:size-4 [&>svg]:shrink-0 aria-[current=true]:bg-accent aria-[current=true]:ring aria-[current=true]:ring-offset-2 ",
+        class: [
+          "flex flex-row w-full text-wrap truncate gap-2 items-center rounded-sm px-2 py-1.5 text-sm outline-none cursor-pointer",
+          "select-none has-[:checked]:bg-accent hover:bg-accent p-2",
+          "[&>svg]:pointer-events-none [&>svg]:size-4 [&>svg]:shrink-0 aria-[current=true]:bg-accent aria-[current=true]:ring aria-[current=true]:ring-offset-2"
+        ],
         role: "option",
         data: {
           ruby_ui__combobox_target: "item"

lib/ruby_ui/combobox/combobox_popover.rb

@@ -16,7 +16,13 @@ def default_attrs
         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"
+          action: %w[
+            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
+            resize@window->ruby-ui--combobox#updatePopoverWidth
+          ]
         }
       }
     end

lib/ruby_ui/combobox/combobox_radio.rb

@@ -13,7 +13,12 @@ def default_attrs
         class: "aspect-square h-4 w-4 rounded-full border border-primary accent-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
         data: {
           ruby_ui__combobox_target: "input",
-          action: "ruby-ui--combobox#inputChanged"
+          ruby_ui__form_field_target: "input",
+          action: %w[
+            ruby-ui--combobox#inputChanged
+            input->ruby-ui--form-field#onInput
+            invalid->ruby-ui--form-field#onInvalid
+          ]
         }
       }
     end

lib/ruby_ui/combobox/combobox_search_input.rb

@@ -19,7 +19,7 @@ def view_template
     def default_attrs
       {
         type: "search",
-        class: "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        class: "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none border-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
         role: "searchbox",
         placeholder: @placeholder,
         data: {

lib/ruby_ui/combobox/combobox_trigger.rb

@@ -9,7 +9,9 @@ def initialize(placeholder: "", **)
 
     def view_template
       button(**attrs) do
-        span(data: {ruby_ui__combobox_target: "triggerContent"}) { @placeholder }
+        span(class: "truncate", data: {ruby_ui__combobox_target: "triggerContent"}) do
+          @placeholder
+        end
         icon
       end
     end
@@ -19,7 +21,7 @@ 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",
+        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 justify-between",
         data: {
           placeholder: @placeholder,
           ruby_ui__combobox_target: "trigger",