Update combobox docs (#154)

Author: stephannv

Gemfile.lock

@@ -14,7 +14,7 @@ GIT
 
 GIT
   remote: https://github.com/ruby-ui/ruby_ui.git
-  revision: 6c79d377e1c550b606f28987c8e04587cb7221ac
+  revision: d29fac6edc255c352beb688c38e8365c1b277c4b
   branch: main
   specs:
     ruby_ui (1.0.0.beta1)

app/components/ruby_ui/combobox.rb

@@ -2,6 +2,11 @@
 
 module RubyUI
   class Combobox < Base
+    def initialize(term: "items", **)
+      @term = term
+      super(**)
+    end
+
     def view_template(&)
       div(**attrs, &)
     end
@@ -10,14 +15,11 @@ def view_template(&)
 
     def default_attrs
       {
+        role: "combobox",
         data: {
           controller: "ruby-ui--combobox",
-          ruby_ui__combobox_open_value: "false",
-          action: "click@window->ruby-ui--combobox#onClickOutside",
-          ruby_ui__combobox_ruby_ui__combobox_content_outlet: ".combobox-content",
-          ruby_ui__combobox_ruby_ui__combobox_item_outlet: ".combobox-item"
-        },
-        class: "group/combobox w-full relative"
+          ruby_ui__combobox_term_value: @term.to_s
+        }
       }
     end
   end

app/components/ruby_ui/combobox/combobox_checkbox.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxCheckbox < Base
+    def view_template
+      input(type: "checkbox", **attrs)
+    end
+
+    private
+
+    def default_attrs
+      {
+        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"
+        }
+      }
+    end
+  end
+end

app/components/ruby_ui/combobox/combobox_content.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module RubyUI
-  class ComboboxEmpty < Base
+  class ComboboxEmptyState < Base
     def view_template(&)
       div(**attrs, &)
     end
@@ -13,7 +13,7 @@ def default_attrs
         role: "presentation",
         class: "hidden py-6 text-center text-sm",
         data: {
-          ruby_ui__combobox_content_target: "empty"
+          ruby_ui__combobox_target: "emptyState"
         }
       }
     end

app/components/ruby_ui/combobox/combobox_empty.rb renamed to app/components/ruby_ui/combobox/combobox_empty_state.rb

@@ -2,51 +2,23 @@
 
 module RubyUI
   class ComboboxItem < Base
-    def initialize(value: nil, **attrs)
-      @value = value
-      super(**attrs)
-    end
-
-    def view_template(&block)
-      div(**attrs) do
-        div(class: "invisible group-aria-selected:visible") { icon }
-        block.call
-      end
+    def view_template(&)
+      label(**attrs, &)
     end
 
     private
 
-    def icon
-      svg(
-        xmlns: "http://www.w3.org/2000/svg",
-        viewbox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        class: "mr-2 h-4 w-4",
-        stroke_width: "2",
-        stroke_linecap: "round",
-        stroke_linejoin: "round"
-      ) do |s|
-        s.path(
-          d: "M20 6 9 17l-5-5"
-        )
-      end
-    end
-
     def default_attrs
       {
+        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",
-        tabindex: "0",
-        class:
-          "combobox-item group relative flex cursor-pointer select-none items-center gap-x-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground aria-[current]:bg-accent aria-[current]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
         data: {
-          value: @value,
-          ruby_ui__combobox_target: "item",
-          ruby_ui__combobox_content_target: "item",
-          controller: "ruby-ui--combobox-item",
-          action: "click->ruby-ui--combobox#onItemSelected"
-        },
-        aria_selected: "false"
+          ruby_ui__combobox_target: "item"
+        }
       }
     end
   end

app/components/ruby_ui/combobox/combobox_group.rb

@@ -2,11 +2,6 @@
 
 module RubyUI
   class ComboboxList < Base
-    def initialize(**attrs)
-      @id = "list#{SecureRandom.hex(4)}"
-      super
-    end
-
     def view_template(&)
       div(**attrs, &)
     end
@@ -15,12 +10,8 @@ def view_template(&)
 
     def default_attrs
       {
-        id: @id,
-        data: {
-          ruby_ui__combobox_target: "list"
-        },
-        role: "listbox",
-        tabindex: "-1"
+        class: "flex flex-col gap-1 p-1 max-h-72 overflow-y-auto text-foreground",
+        role: "listbox"
       }
     end
   end

app/components/ruby_ui/combobox/combobox_input.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxListGroup < Base
+    LABEL_CLASSES = "before:content-[attr(label)] before:px-2 before:py-1.5 before:text-xs before:font-medium before:text-muted-foreground before:not-italic"
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: ["hidden has-[label:not(.hidden)]:flex flex-col py-1 gap-1 border-b", LABEL_CLASSES],
+        role: "group"
+      }
+    end
+  end
+end