ruby_ui 1.2.0 → 1.3.0

data/lib/ruby_ui/combobox/combobox_controller.js

@@ -4,7 +4,8 @@ import { computePosition, autoUpdate, offset, flip } from "@floating-ui/dom";
 // Connects to data-controller="ruby-ui--combobox"
 export default class extends Controller {
   static values = {
-    term: String
+    term: String,
+    minPopoverWidth: { type: Number, default: 240 }
   }
 
   static targets = [
@@ -15,276 +16,90 @@ export default class extends Controller {
     "emptyState",
     "searchInput",
     "trigger",
-    "triggerContent",
-    "badgeContainer",
-    "clearButton",
-    "badgeInput",
-    "inputTrigger"
+    "triggerContent"
   ]
 
   selectedItemIndex = null
 
   connect() {
     this.updateTriggerContent()
-    this.updateBadges()
-    this.updateClearButton()
-    this.updateInputTrigger()
-
-    // Track mouse state to distinguish click-focus from tab-focus
-    this._mouseDown = false
-    this.element.addEventListener("mousedown", () => { this._mouseDown = true })
-    this.element.addEventListener("mouseup", () => { setTimeout(() => { this._mouseDown = false }, 0) })
   }
 
   disconnect() {
     if (this.cleanup) { this.cleanup() }
   }
 
-  // Popover
-
-  togglePopover(event) {
-    event.preventDefault()
-
-    if (this.triggerTarget.ariaExpanded === "true") {
-      this.closePopover()
-    } else {
-      this.openPopover(event)
-    }
-  }
-
-  openPopover(event) {
-    if (event && event.type !== "focusin" && event.type !== "focus") event.preventDefault()
-
-    // focusin/focus: only open on keyboard focus (tab), not mouse click
-    if (event && (event.type === "focusin" || event.type === "focus")) {
-      if (this._mouseDown || this.triggerTarget.ariaExpanded === "true" || this._closingPopover) return
-    }
-
-    this.updatePopoverPosition()
-    this.updatePopoverWidth()
-    this.triggerTarget.ariaExpanded = "true"
-    this.selectedItemIndex = null
-    this.itemTargets.forEach(item => item.ariaCurrent = "false")
-    this.popoverTarget.showPopover()
-
-    // Always show all items on open; filter only on user typing
-    this.applyFilter("")
-
-    if (this.hasBadgeInputTarget) {
-      this.badgeInputTarget.value = ""
-    }
-  }
-
-  closePopover() {
-    this._closingPopover = true
-    this.triggerTarget.ariaExpanded = "false"
-    this.popoverTarget.hidePopover()
-    setTimeout(() => this._closingPopover = false, 200)
-  }
-
   handlePopoverToggle(event) {
     // Keep ariaExpanded in sync with the actual popover state
     this.triggerTarget.ariaExpanded = event.newState === 'open' ? 'true' : 'false'
   }
 
-  updatePopoverPosition() {
-    this.cleanup = autoUpdate(this.triggerTarget, this.popoverTarget, () => {
-      computePosition(this.triggerTarget, this.popoverTarget, {
-        placement: 'bottom-start',
-        middleware: [offset(4), flip()],
-      }).then(({ x, y }) => {
-        Object.assign(this.popoverTarget.style, {
-          left: `${x}px`,
-          top: `${y}px`,
-        });
-      });
-    });
-  }
-
-  updatePopoverWidth() {
-    this.popoverTarget.style.width = `${this.triggerTarget.offsetWidth}px`
-  }
-
-  // Selection
-
   inputChanged(e) {
     this.updateTriggerContent()
 
     if (e.target.type == "radio") {
       this.closePopover()
-      this.updateInputTrigger()
     }
 
     if (this.hasToggleAllTarget && !e.target.checked) {
       this.toggleAllTarget.checked = false
     }
+  }
 
-    this.updateBadges()
-    this.updateClearButton()
+  inputContent(input) {
+    return input.dataset.text || input.parentElement.textContent
   }
 
   toggleAllItems() {
     const isChecked = this.toggleAllTarget.checked
     this.inputTargets.forEach(input => input.checked = isChecked)
     this.updateTriggerContent()
-    this.updateBadges()
-    this.updateClearButton()
-  }
-
-  clearAll(event) {
-    if (event) event.preventDefault()
-
-    this.inputTargets.forEach(input => input.checked = false)
-    this.updateBadges()
-    this.updateClearButton()
-    this.updateTriggerContent()
-    this.updateInputTrigger()
-  }
-
-  removeBadge(event) {
-    event.preventDefault()
-    event.stopPropagation()
-
-    const value = event.currentTarget.closest('[data-value]').dataset.value
-    const input = this.inputTargets.find(input => input.value === value)
-
-    if (input) {
-      input.checked = false
-      input.dispatchEvent(new Event("change", { bubbles: true }))
-    }
-  }
-
-  // Display
-
-  inputContent(input) {
-    return input.dataset.text || input.parentElement.textContent
   }
 
   updateTriggerContent() {
-    if (!this.hasTriggerContentTarget) return
-
     const checkedInputs = this.inputTargets.filter(input => input.checked)
 
     if (checkedInputs.length === 0) {
       this.triggerContentTarget.innerText = this.triggerTarget.dataset.placeholder
-      this.triggerContentTarget.classList.add("text-muted-foreground")
     } else if (this.termValue && checkedInputs.length > 1) {
       this.triggerContentTarget.innerText = `${checkedInputs.length} ${this.termValue}`
-      this.triggerContentTarget.classList.remove("text-muted-foreground")
     } else {
       this.triggerContentTarget.innerText = checkedInputs.map((input) => this.inputContent(input)).join(", ")
-      this.triggerContentTarget.classList.remove("text-muted-foreground")
     }
   }
 
-  updateInputTrigger() {
-    if (!this.hasInputTriggerTarget) return
-    const checked = this.inputTargets.find(i => i.checked)
-    this.inputTriggerTarget.value = checked ? this.inputContent(checked) : ""
-  }
-
-  // NOTE: badge classes mirror ComboboxBadge Ruby component. Update both if styles change.
-  updateBadges() {
-    if (!this.hasBadgeContainerTarget) return
-
-    // Remove existing badges
-    this.triggerTarget.querySelectorAll("[data-combobox-badge]").forEach(el => el.remove())
-
-    const checkedInputs = this.inputTargets.filter(input => input.checked)
-
-    // Toggle trigger height: h-9 when empty, h-auto min-h-9 when badges exist
-    if (checkedInputs.length > 0) {
-      this.triggerTarget.classList.remove("h-9")
-      this.triggerTarget.classList.add("h-auto", "min-h-9")
-    } else {
-      this.triggerTarget.classList.remove("h-auto", "min-h-9", "pt-1.5")
-      this.triggerTarget.classList.add("h-9")
-    }
-
-    checkedInputs.forEach(input => {
-      const badge = document.createElement("span")
-      badge.setAttribute("data-combobox-badge", "")
-      badge.className = "inline-flex items-center gap-1 rounded-md border bg-secondary px-1.5 py-0.5 text-xs font-medium text-secondary-foreground"
-      badge.dataset.value = input.value
-
-      badge.appendChild(document.createTextNode(this.inputContent(input).trim()))
-
-      const btn = document.createElement("button")
-      btn.type = "button"
-      btn.setAttribute("aria-label", "Remove")
-      btn.className = "rounded-sm opacity-50 hover:opacity-100 focus-visible:outline-none"
-
-      btn.addEventListener("click", (e) => {
-        e.preventDefault()
-        e.stopPropagation()
-        e.stopImmediatePropagation()
-        const target = this.inputTargets.find(i => i.value === input.value)
-        if (target) {
-          target.checked = false
-          this.updateBadges()
-          this.updateClearButton()
-        }
-      })
-
-      const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
-      svg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
-      svg.setAttribute("width", "12")
-      svg.setAttribute("height", "12")
-      svg.setAttribute("viewBox", "0 0 24 24")
-      svg.setAttribute("fill", "none")
-      svg.setAttribute("stroke", "currentColor")
-      svg.setAttribute("stroke-width", "2")
-      svg.setAttribute("stroke-linecap", "round")
-      svg.setAttribute("stroke-linejoin", "round")
-      svg.classList.add("pointer-events-none")
-
-      const path1 = document.createElementNS("http://www.w3.org/2000/svg", "path")
-      path1.setAttribute("d", "M18 6 6 18")
-      const path2 = document.createElementNS("http://www.w3.org/2000/svg", "path")
-      path2.setAttribute("d", "m6 6 12 12")
-
-      svg.appendChild(path1)
-      svg.appendChild(path2)
-      btn.appendChild(svg)
-      badge.appendChild(btn)
-
-      // Insert badge directly in trigger, before the text input
-      this.badgeInputTarget.insertAdjacentElement("beforebegin", badge)
-    })
+  togglePopover(event) {
+    event.preventDefault()
 
-    // Add top padding only when badges wrap to multiple lines
-    // Class "pt-1.5" is referenced in ComboboxBadgeTrigger for Tailwind to compile it
-    const badges = this.triggerTarget.querySelectorAll("[data-combobox-badge]")
-    if (badges.length > 0 && this.badgeInputTarget.offsetTop > badges[0].offsetTop) {
-      this.triggerTarget.classList.add("pt-1.5")
+    if (this.triggerTarget.ariaExpanded === "true") {
+      this.closePopover()
     } else {
-      this.triggerTarget.classList.remove("pt-1.5")
+      this.openPopover(event)
     }
   }
 
-  updateClearButton() {
-    if (!this.hasClearButtonTarget) return
+  openPopover(event) {
+    if (event) event.preventDefault()
 
-    const hasChecked = this.inputTargets.some(input => input.checked)
-    this.clearButtonTarget.classList.toggle("hidden", !hasChecked)
+    this.updatePopoverPosition()
+    this.updatePopoverWidth()
+    this.triggerTarget.ariaExpanded = "true"
+    this.selectedItemIndex = null
+    this.itemTargets.forEach(item => item.ariaCurrent = "false")
+    this.popoverTarget.showPopover()
   }
 
-  // Filter
+  closePopover() {
+    this.triggerTarget.ariaExpanded = "false"
+    this.popoverTarget.hidePopover()
+  }
 
   filterItems(e) {
-    if (["ArrowDown", "ArrowUp", "Tab", "Enter"].includes(e.key)) return
-
-    const term = this.hasBadgeInputTarget
-      ? this.badgeInputTarget.value
-      : this.hasInputTriggerTarget
-        ? this.inputTriggerTarget.value
-        : this.searchInputTarget.value
-
-    this.applyFilter(term)
-  }
+    if (["ArrowDown", "ArrowUp", "Tab", "Enter"].includes(e.key)) {
+      return
+    }
 
-  applyFilter(term) {
-    const filterTerm = term.toLowerCase()
+    const filterTerm = this.searchInputTarget.value.toLowerCase()
 
     if (this.hasToggleAllTarget) {
       if (filterTerm) this.toggleAllTarget.parentElement.classList.add("hidden")
@@ -292,10 +107,12 @@ export default class extends Controller {
     }
 
     let resultCount = 0
+
     this.selectedItemIndex = null
 
     this.inputTargets.forEach((input) => {
       const text = this.inputContent(input).toLowerCase()
+
       if (text.indexOf(filterTerm) > -1) {
         input.parentElement.classList.remove("hidden")
         resultCount++
@@ -305,20 +122,9 @@ export default class extends Controller {
     })
 
     this.emptyStateTarget.classList.toggle("hidden", resultCount !== 0)
-
-    // Auto-highlight first visible result (without scrolling to avoid page jump)
-    this.itemTargets.forEach(item => item.ariaCurrent = "false")
-    const firstVisible = this.inputTargets.find(i => !i.parentElement.classList.contains("hidden"))
-    if (firstVisible) {
-      this.selectedItemIndex = 0
-      firstVisible.parentElement.ariaCurrent = "true"
-    }
   }
 
-  // Keyboard
-
-  keyDownPressed(event) {
-    event.preventDefault()
+  keyDownPressed() {
     if (this.selectedItemIndex !== null) {
       this.selectedItemIndex++
     } else {
@@ -328,8 +134,7 @@ export default class extends Controller {
     this.focusSelectedInput()
   }
 
-  keyUpPressed(event) {
-    event.preventDefault()
+  keyUpPressed() {
     if (this.selectedItemIndex !== null) {
       this.selectedItemIndex--
     } else {
@@ -339,15 +144,6 @@ export default class extends Controller {
     this.focusSelectedInput()
   }
 
-  keyEnterPressed(event) {
-    event.preventDefault()
-    const option = this.itemTargets.find(item => item.ariaCurrent === "true")
-
-    if (option) {
-      option.click()
-    }
-  }
-
   focusSelectedInput() {
     const visibleInputs = this.inputTargets.filter(input => !input.parentElement.classList.contains("hidden"))
 
@@ -363,19 +159,35 @@ export default class extends Controller {
     })
   }
 
+  keyEnterPressed(event) {
+    event.preventDefault()
+    const option = this.itemTargets.find(item => item.ariaCurrent === "true")
+
+    if (option) {
+      option.click()
+    }
+  }
+
   wrapSelectedInputIndex(length) {
     this.selectedItemIndex = ((this.selectedItemIndex % length) + length) % length
   }
 
-  handleBadgeInputBackspace(event) {
-    if (this.badgeInputTarget.value !== "") return
-
-    const checkedInputs = this.inputTargets.filter(input => input.checked)
-    const lastChecked = checkedInputs[checkedInputs.length - 1]
+  updatePopoverPosition() {
+    this.cleanup = autoUpdate(this.triggerTarget, this.popoverTarget, () => {
+      computePosition(this.triggerTarget, this.popoverTarget, {
+        placement: 'bottom-start',
+        middleware: [offset(4), flip()],
+      }).then(({ x, y }) => {
+        Object.assign(this.popoverTarget.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        });
+      });
+    });
+  }
 
-    if (lastChecked) {
-      lastChecked.checked = false
-      lastChecked.dispatchEvent(new Event("change", { bubbles: true }))
-    }
+  updatePopoverWidth() {
+    const width = Math.max(this.triggerTarget.offsetWidth, this.minPopoverWidthValue)
+    this.popoverTarget.style.width = `${width}px`
   }
 }

data/lib/ruby_ui/combobox/combobox_item.rb

@@ -3,17 +3,19 @@
 module RubyUI
   class ComboboxItem < Base
     def view_template(&)
-      label(**attrs) do
-        yield if block_given?
-        render ComboboxItemIndicator.new
-      end
+      label(**attrs, &)
     end
 
     private
 
     def default_attrs
       {
-        class: "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground aria-[current=true]:bg-accent has-[input:disabled]:opacity-50 has-[input:disabled]:cursor-not-allowed",
+        class: [
+          "flex flex-row w-full text-wrap [&>span,&>div]:truncate gap-2 items-center rounded-sm px-2 py-1 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",
+          "has-disabled:opacity-50 has-disabled:cursor-not-allowed"
+        ],
         role: "option",
         data: {
           ruby_ui__combobox_target: "item"

data/lib/ruby_ui/combobox/combobox_list_group.rb

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

data/lib/ruby_ui/combobox/combobox_popover.rb

@@ -12,11 +12,16 @@ module RubyUI
       {
         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: %w[
             toggle->ruby-ui--combobox#handlePopoverToggle
+            keydown.down->ruby-ui--combobox#keyDownPressed
+            keydown.up->ruby-ui--combobox#keyUpPressed
+            keydown.enter->ruby-ui--combobox#keyEnterPressed
+            keydown.esc->ruby-ui--combobox#closePopover:prevent
             resize@window->ruby-ui--combobox#updatePopoverWidth
           ]
         }

data/lib/ruby_ui/combobox/combobox_radio.rb

@@ -10,7 +10,14 @@ module RubyUI
 
     def default_attrs
       {
-        class: "peer sr-only",
+        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",
+          "checked:bg-primary checked:text-primary-foreground",
+          "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none"
+        ],
         data: {
           ruby_ui__combobox_target: "input",
           ruby_ui__form_field_target: "input",

data/lib/ruby_ui/combobox/combobox_toggle_all_checkbox.rb

@@ -10,7 +10,13 @@ module RubyUI
 
     def default_attrs
       {
-        class: "peer sr-only disabled:cursor-not-allowed",
+        class: [
+          "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background accent-primary",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "checked:bg-primary checked:text-primary-foreground",
+          "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+        ],
         data: {
           ruby_ui__combobox_target: "toggleAll",
           action: "change->ruby-ui--combobox#toggleAllItems"

data/lib/ruby_ui/combobox/combobox_trigger.rb

@@ -9,7 +9,7 @@ module RubyUI
 
     def view_template
       button(**attrs) do
-        span(class: "truncate text-muted-foreground", data: {ruby_ui__combobox_target: "triggerContent"}) do
+        span(class: "truncate", data: {ruby_ui__combobox_target: "triggerContent"}) do
           @placeholder
         end
         icon
@@ -26,13 +26,12 @@ module RubyUI
           "hover:bg-accent hover:text-accent-foreground",
           "disabled:pointer-events-none disabled:opacity-50",
           "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-          "aria-invalid:border-destructive"
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
         ],
         data: {
           placeholder: @placeholder,
           ruby_ui__combobox_target: "trigger",
-          action: "click->ruby-ui--combobox#togglePopover focus->ruby-ui--combobox#openPopover"
+          action: "ruby-ui--combobox#togglePopover"
         },
         aria: {
           haspopup: "listbox",
@@ -42,21 +41,22 @@ module RubyUI
     end
 
     def icon
-      span(class: "shrink-0 flex items-center justify-center size-6 rounded-sm hover:bg-muted hover:text-foreground") do
-        svg(
-          xmlns: "http://www.w3.org/2000/svg",
-          width: "24",
-          height: "24",
-          viewbox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          stroke_width: "2",
-          stroke_linecap: "round",
-          stroke_linejoin: "round",
-          class: "pointer-events-none size-4 text-muted-foreground"
-        ) do |s|
-          s.path(d: "m6 9 6 6 6-6")
-        end
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        class: "ml-2 h-4 w-4 shrink-0 opacity-50",
+        stroke_width: "2",
+        stroke_linecap: "round",
+        stroke_linejoin: "round"
+      ) do |s|
+        s.path(
+          d: "m7 15 5 5 5-5"
+        )
+        s.path(
+          d: "m7 9 5-5 5 5"
+        )
       end
     end
   end

data/lib/ruby_ui/command/command_controller.js

@@ -3,31 +3,18 @@ import Fuse from "fuse.js";
 
 // Connects to data-controller="ruby-ui--command"
 export default class extends Controller {
-  static targets = ["input", "group", "item", "empty", "content"];
-
-  static values = {
-    open: {
-      type: Boolean,
-      default: false,
-    },
-  };
+  static targets = ["input", "group", "item", "empty"];
 
   connect() {
-    this.inputTarget.focus();
-    this.searchIndex = this.buildSearchIndex();
-    this.toggleVisibility(this.emptyTargets, false);
     this.selectedIndex = -1;
 
-    if (this.openValue) {
-      this.open();
+    if (!this.hasInputTarget) {
+      return;
     }
-  }
 
-  open(e) {
-    e.preventDefault();
-    document.body.insertAdjacentHTML("beforeend", this.contentTarget.innerHTML);
-    // prevent scroll on body
-    document.body.classList.add("overflow-hidden");
+    this.inputTarget.focus();
+    this.searchIndex = this.buildSearchIndex();
+    this.toggleVisibility(this.emptyTargets, false);
   }
 
   dismiss() {
@@ -37,6 +24,10 @@ export default class extends Controller {
     this.element.remove();
   }
 
+  focusInput() {
+    this.inputTarget?.focus();
+  }
+
   filter(e) {
     // Deselect any previously selected item
     this.deselectAll();

data/lib/ruby_ui/command/command_dialog.rb

@@ -10,7 +10,10 @@ module RubyUI
 
     def default_attrs
       {
-        data: {controller: "ruby-ui--command"}
+        data: {
+          controller: "ruby-ui--command-dialog",
+          ruby_ui__command_dialog_ruby_ui__command_outlet: "[data-ruby-ui--command-dialog-instance]"
+        }
       }
     end
   end

data/lib/ruby_ui/command/command_dialog_content.rb

@@ -17,8 +17,8 @@ module RubyUI
     end
 
     def view_template(&block)
-      template(data: {ruby_ui__command_target: "content"}) do
-        div(data: {controller: "ruby-ui--command"}) do
+      template(data: {ruby_ui__command_dialog_target: "content"}) do
+        div(data: {controller: "ruby-ui--command", ruby_ui__command_dialog_instance: true}) do
           backdrop
           div(**attrs, &block)
         end

data/lib/ruby_ui/command/command_dialog_controller.js

@@ -0,0 +1,34 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="ruby-ui--command-dialog"
+export default class extends Controller {
+  static targets = ["content"];
+  static outlets = ["ruby-ui--command"];
+
+  rubyUiCommandOutletConnected(controller) {
+    this.openOutlet = controller;
+  }
+
+  rubyUiCommandOutletDisconnected() {
+    this.openOutlet = null;
+  }
+
+  open(e) {
+    if (e) {
+      e.preventDefault();
+    }
+
+    if (!this.hasContentTarget) {
+      return;
+    }
+
+    if (this.openOutlet) {
+      this.openOutlet.focusInput();
+      return;
+    }
+
+    document.body.insertAdjacentHTML("beforeend", this.contentTarget.innerHTML);
+    // prevent scroll on body
+    document.body.classList.add("overflow-hidden");
+  }
+}