fernandes-ui 0.1.1 → 0.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 436386cb9aedd0c0d4210ee7d89273f2f1edb3b7113a9623af14c2ca52154dc9
-  data.tar.gz: 8e4648b61fca5e049180035807b8369099b91487b4edd7e963dadd5c0fb4c586
+  metadata.gz: a5e204a6fcf76008dccc34ec8487f8b2bd80ba924a43aeecd59a44802d744ade
+  data.tar.gz: f470c5ab397812019513fdbb08d6c77166613f06be3e5f22ec801905b32860c7
 SHA512:
-  metadata.gz: 3e0f6d156f7396006300fb59f63fff5d541da6a4af4903ce5c77dea65b29ae56a8becbf699a6be115345f57c5322453d44e344e282213bd314e01c71cc7d8e70
-  data.tar.gz: b9a1b0896a7ec775734ca5879b423c71b46ef2b984b0b2f234a2ee26bd11a3475b12ad32b853358be467b67379931b16ea5e9065230c60d2f28bdf1634d9e040
+  metadata.gz: dfce0d35ccdb4fcc6a09108aef9eb7e197046a9c2bed89545cc5a979f7d7e870f593ba545f632cdf3021557a726f4c1d7d726a0cf08a31f51a9896c376a35fa8
+  data.tar.gz: 22dee7451abe1a42880c98ec161c33e5baf43b264ded6399e8d3c5a24c6f55d9a0bf7355ff684e5c90a4121924babcc6f39dac98a5c48788e00624c413125ca8

data/README.md

@@ -39,6 +39,13 @@ pin_all_from "ui/controllers", under: "ui/controllers"
 
 The gem automatically provides these pins via the engine.
 
+Then setup the JS controllers
+
+```javascript
+import { registerControllers } from "ui"
+registerControllers(application)
+```
+
 ### JavaScript (jsbundling-rails)
 
 For apps using Bun, esbuild, or Webpack:

data/app/assets/javascripts/ui.esm.js

@@ -1703,11 +1703,9 @@ class DropdownController extends Controller {
   openSubmenuHandler(event) {
     const trigger = event.currentTarget;
     const submenu = trigger.nextElementSibling;
-    if (document.activeElement && document.activeElement.hasAttribute("role") && document.activeElement.getAttribute("role") === "menuitem") {
-      document.activeElement.blur();
-    }
     clearAllTabindexes(this.element);
     trigger.setAttribute("tabindex", "0");
+    trigger.focus();
     this.lastHoveredItem = trigger;
     if (this.closeSubmenuTimeouts.has(trigger)) {
       clearTimeout(this.closeSubmenuTimeouts.get(trigger));
@@ -1740,11 +1738,9 @@ class DropdownController extends Controller {
   }
   trackHoveredItem(event) {
     const item = event.currentTarget;
-    if (document.activeElement && document.activeElement.hasAttribute("role") && document.activeElement.getAttribute("role") === "menuitem") {
-      document.activeElement.blur();
-    }
     clearAllTabindexes(this.element);
     item.setAttribute("tabindex", "0");
+    item.focus();
     this.lastHoveredItem = item;
   }
   toggleCheckbox(event) {
@@ -2331,8 +2327,10 @@ class AccordionController extends Controller {
       const content = this.contentTargets[index];
       if (content) {
         const isOpen = item.dataset.state === "open";
-        content.style.height = isOpen ? `${content.scrollHeight}px` : "0px";
-        if (!isOpen) {
+        if (isOpen) {
+          content.style.height = "auto";
+        } else {
+          content.style.height = "0px";
           content.setAttribute("hidden", "");
         }
       }
@@ -2367,6 +2365,9 @@ class AccordionController extends Controller {
       content.removeAttribute("hidden");
       content.style.height = `${content.scrollHeight}px`;
     } else {
+      const currentHeight = content.scrollHeight;
+      content.style.height = `${currentHeight}px`;
+      content.offsetHeight;
       content.style.height = "0px";
       content.addEventListener("transitionend", () => {
         if (content.dataset.state === "closed") {
@@ -2797,6 +2798,7 @@ class CollapsibleController extends Controller {
       content.dataset.state = state;
       if (isOpen) {
         content.removeAttribute("hidden");
+        void content.offsetHeight;
         content.style.height = `${content.scrollHeight}px`;
       } else {
         if (animate) {
@@ -2914,6 +2916,10 @@ class CommandController extends Controller {
     loop: {
       type: Boolean,
       default: true
+    },
+    autofocus: {
+      type: Boolean,
+      default: false
     }
   };
   connect() {
@@ -2927,7 +2933,7 @@ class CommandController extends Controller {
     this.element.removeEventListener("drawer:show", this.handleShow.bind(this));
   }
   handleShow() {
-    if (this.hasInputTarget) {
+    if (this.autofocusValue && this.hasInputTarget) {
       this.inputTarget.focus();
     }
     const visibleItems = this.visibleItems;

data/app/assets/javascripts/ui.js

@@ -1588,11 +1588,9 @@
     openSubmenuHandler(event) {
       const trigger = event.currentTarget;
       const submenu = trigger.nextElementSibling;
-      if (document.activeElement && document.activeElement.hasAttribute("role") && document.activeElement.getAttribute("role") === "menuitem") {
-        document.activeElement.blur();
-      }
       clearAllTabindexes(this.element);
       trigger.setAttribute("tabindex", "0");
+      trigger.focus();
       this.lastHoveredItem = trigger;
       if (this.closeSubmenuTimeouts.has(trigger)) {
         clearTimeout(this.closeSubmenuTimeouts.get(trigger));
@@ -1625,11 +1623,9 @@
     }
     trackHoveredItem(event) {
       const item = event.currentTarget;
-      if (document.activeElement && document.activeElement.hasAttribute("role") && document.activeElement.getAttribute("role") === "menuitem") {
-        document.activeElement.blur();
-      }
       clearAllTabindexes(this.element);
       item.setAttribute("tabindex", "0");
+      item.focus();
       this.lastHoveredItem = item;
     }
     toggleCheckbox(event) {
@@ -2211,8 +2207,10 @@
         const content = this.contentTargets[index];
         if (content) {
           const isOpen = item.dataset.state === "open";
-          content.style.height = isOpen ? `${content.scrollHeight}px` : "0px";
-          if (!isOpen) {
+          if (isOpen) {
+            content.style.height = "auto";
+          } else {
+            content.style.height = "0px";
             content.setAttribute("hidden", "");
           }
         }
@@ -2247,6 +2245,9 @@
         content.removeAttribute("hidden");
         content.style.height = `${content.scrollHeight}px`;
       } else {
+        const currentHeight = content.scrollHeight;
+        content.style.height = `${currentHeight}px`;
+        content.offsetHeight;
         content.style.height = "0px";
         content.addEventListener("transitionend", () => {
           if (content.dataset.state === "closed") {
@@ -2656,6 +2657,7 @@
         content.dataset.state = state;
         if (isOpen) {
           content.removeAttribute("hidden");
+          void content.offsetHeight;
           content.style.height = `${content.scrollHeight}px`;
         } else {
           if (animate) {
@@ -2771,6 +2773,10 @@
       loop: {
         type: Boolean,
         default: true
+      },
+      autofocus: {
+        type: Boolean,
+        default: false
       }
     };
     connect() {
@@ -2784,7 +2790,7 @@
       this.element.removeEventListener("drawer:show", this.handleShow.bind(this));
     }
     handleShow() {
-      if (this.hasInputTarget) {
+      if (this.autofocusValue && this.hasInputTarget) {
         this.inputTarget.focus();
       }
       const visibleItems = this.visibleItems;

data/app/behaviors/ui/accordion_behavior.rb

@@ -1,30 +1,54 @@
 # frozen_string_literal: true
 
-    # Shared behavior for Accordion container component
-    # Handles Stimulus controller setup and data attributes
-    module UI::AccordionBehavior
-      # Generate Stimulus controller data attributes
-      def accordion_data_attributes
-        {
-          controller: "ui--accordion",
-          ui__accordion_type_value: @type || "single",
-          ui__accordion_collapsible_value: @collapsible || false
-        }
-      end
+# UI::AccordionBehavior
+#
+# @ui_component Accordion
+# @ui_description Accordion container component (Phlex) Wraps collapsible accordion items with Stimulus controller
+# @ui_category data-display
+#
+# @ui_anatomy Accordion - Root container with state management (required)
+# @ui_anatomy Content - Main content container (required)
+# @ui_anatomy Item - Individual item element
+# @ui_anatomy Trigger - Button or element that activates the component (required)
+#
+# @ui_feature Keyboard navigation with arrow keys
+# @ui_feature Animation support
+#
+# @ui_aria_pattern Accordion
+# @ui_aria_reference https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
+#
+# @ui_keyboard Enter Activates the focused element
+# @ui_keyboard ArrowDown Moves focus to next item
+# @ui_keyboard ArrowUp Moves focus to previous item
+# @ui_keyboard Home Moves focus to first item
+# @ui_keyboard End Moves focus to last item
+#
+# @ui_related collapsible
+# @ui_related tabs
+#
+module UI::AccordionBehavior
+  # Generate Stimulus controller data attributes
+  def accordion_data_attributes
+    {
+      controller: "ui--accordion",
+      ui__accordion_type_value: @type || "single",
+      ui__accordion_collapsible_value: @collapsible || false
+    }
+  end
 
-      # Merge user-provided data attributes with accordion controller data
-      def merged_data_attributes
-        user_data = @attributes&.fetch(:data, {}) || {}
-        user_data.merge(accordion_data_attributes)
-      end
+  # Merge user-provided data attributes with accordion controller data
+  def merged_data_attributes
+    user_data = @attributes&.fetch(:data, {}) || {}
+    user_data.merge(accordion_data_attributes)
+  end
 
-      # Build complete HTML attributes hash for accordion container
-      def accordion_html_attributes
-        base_attrs = @attributes&.except(:data) || {}
-        base_attrs.merge(
-          class: @classes || "",
-          "data-orientation": @orientation || "vertical",
-          data: merged_data_attributes
-        )
-      end
-    end
+  # Build complete HTML attributes hash for accordion container
+  def accordion_html_attributes
+    base_attrs = @attributes&.except(:data) || {}
+    base_attrs.merge(
+      class: @classes || "",
+      "data-orientation": @orientation || "vertical",
+      data: merged_data_attributes
+    )
+  end
+end

data/app/behaviors/ui/accordion_content_behavior.rb

@@ -2,71 +2,71 @@
 
 require "tailwind_merge"
 
-    # Shared behavior for Accordion Content component
-    # Handles classes, ARIA attributes, and animations
-    module UI::AccordionContentBehavior
-      # Base CSS classes for content area with animations
-      # Using transition with Radix UI timing (300ms, cubic-bezier(0.87, 0, 0.13, 1))
-      def content_base_classes
-        "overflow-hidden text-sm transition-[height] duration-[var(--duration-accordion)] ease-[var(--ease-accordion)] data-[state=closed]:h-0"
-      end
+# Shared behavior for Accordion Content component
+# Handles classes, ARIA attributes, and animations
+module UI::AccordionContentBehavior
+  # Base CSS classes for content area with animations
+  # Using transition with Radix UI timing (300ms, cubic-bezier(0.87, 0, 0.13, 1))
+  def content_base_classes
+    "overflow-hidden text-sm transition-[height] duration-[var(--duration-accordion)] ease-[var(--ease-accordion)] data-[state=closed]:h-0"
+  end
 
-      # Merge base classes with custom classes using TailwindMerge
-      def content_classes
-        TailwindMerge::Merger.new.merge([content_base_classes, @classes].compact.join(" "))
-      end
+  # Merge base classes with custom classes using TailwindMerge
+  def content_classes
+    TailwindMerge::Merger.new.merge([content_base_classes, @classes].compact.join(" "))
+  end
 
-      # Generate unique IDs for ARIA relationships (matching trigger)
-      def trigger_id
-        @trigger_id ||= "accordion-trigger-#{item_value}"
-      end
+  # Generate unique IDs for ARIA relationships (matching trigger)
+  def trigger_id
+    @trigger_id ||= "accordion-trigger-#{item_value}"
+  end
 
-      def content_id
-        @content_id ||= "accordion-content-#{item_value}"
-      end
+  def content_id
+    @content_id ||= "accordion-content-#{item_value}"
+  end
 
-      # Get item value from context (set by parent AccordionItem)
-      def item_value
-        @item_value || SecureRandom.hex(4)
-      end
+  # Get item value from context (set by parent AccordionItem)
+  def item_value
+    @item_value || SecureRandom.hex(4)
+  end
 
-      # Determine initial state from context
-      def content_state
-        @initial_open ? "open" : "closed"
-      end
+  # Determine initial state from context
+  def content_state
+    @initial_open ? "open" : "closed"
+  end
 
-      # Data attributes for Stimulus
-      def content_data_attributes
-        {
-          ui__accordion_target: "content"
-        }
-      end
+  # Data attributes for Stimulus
+  def content_data_attributes
+    {
+      ui__accordion_target: "content"
+    }
+  end
 
-      # Merge user-provided data attributes
-      def merged_content_data_attributes
-        user_data = @attributes&.fetch(:data, {}) || {}
-        user_data.merge(content_data_attributes)
-      end
+  # Merge user-provided data attributes
+  def merged_content_data_attributes
+    user_data = @attributes&.fetch(:data, {}) || {}
+    user_data.merge(content_data_attributes)
+  end
 
-      # Build complete HTML attributes hash for content container
-      def content_html_attributes
-        base_attrs = @attributes&.except(:data) || {}
-        attrs = base_attrs.merge(
-          class: content_classes,
-          id: content_id,
-          role: "region",
-          "aria-labelledby": trigger_id,
-          "data-state": content_state,
-          "data-orientation": @orientation || "vertical",
-          data: merged_content_data_attributes
-        )
+  # Build complete HTML attributes hash for content container
+  def content_html_attributes
+    base_attrs = @attributes&.except(:data) || {}
+    attrs = base_attrs.merge(
+      class: content_classes,
+      id: content_id,
+      role: "region",
+      "aria-labelledby": trigger_id,
+      "data-state": content_state,
+      "data-orientation": @orientation || "vertical",
+      data: merged_content_data_attributes
+    )
 
-        # Add hidden attribute for closed state to prevent flash on initial load
-        # JavaScript will handle the CSS variable for height
-        if content_state == "closed"
-          attrs[:hidden] = true
-        end
-
-        attrs
-      end
+    # Add hidden attribute for closed state to prevent flash on initial load
+    # JavaScript will handle the CSS variable for height
+    if content_state == "closed"
+      attrs[:hidden] = true
     end
+
+    attrs
+  end
+end

data/app/behaviors/ui/accordion_item_behavior.rb

@@ -2,46 +2,46 @@
 
 require "tailwind_merge"
 
-    # Shared behavior for Accordion Item component
-    # Handles classes, states, and data attributes
-    module UI::AccordionItemBehavior
-      # Base CSS classes for accordion item
-      def item_base_classes
-        "border-b border-border last:border-b-0"
-      end
+# Shared behavior for Accordion Item component
+# Handles classes, states, and data attributes
+module UI::AccordionItemBehavior
+  # Base CSS classes for accordion item
+  def item_base_classes
+    "border-b border-border last:border-b-0"
+  end
 
-      # Merge base classes with custom classes using TailwindMerge
-      def item_classes
-        TailwindMerge::Merger.new.merge([item_base_classes, @classes].compact.join(" "))
-      end
+  # Merge base classes with custom classes using TailwindMerge
+  def item_classes
+    TailwindMerge::Merger.new.merge([item_base_classes, @classes].compact.join(" "))
+  end
 
-      # Data attributes for Stimulus target
-      def item_data_attributes
-        {
-          ui__accordion_target: "item",
-          value: @value || ""
-        }
-      end
+  # Data attributes for Stimulus target
+  def item_data_attributes
+    {
+      ui__accordion_target: "item",
+      value: @value || ""
+    }
+  end
 
-      # Merge user-provided data attributes
-      def merged_item_data_attributes
-        user_data = @attributes&.fetch(:data, {}) || {}
-        user_data.merge(item_data_attributes)
-      end
+  # Merge user-provided data attributes
+  def merged_item_data_attributes
+    user_data = @attributes&.fetch(:data, {}) || {}
+    user_data.merge(item_data_attributes)
+  end
 
-      # Determine initial state
-      def item_state
-        @initial_open ? "open" : "closed"
-      end
+  # Determine initial state
+  def item_state
+    @initial_open ? "open" : "closed"
+  end
 
-      # Build complete HTML attributes hash for accordion item
-      def item_html_attributes
-        base_attrs = @attributes&.except(:data) || {}
-        base_attrs.merge(
-          class: item_classes,
-          "data-state": item_state,
-          "data-orientation": @orientation || "vertical",
-          data: merged_item_data_attributes
-        )
-      end
-    end
+  # Build complete HTML attributes hash for accordion item
+  def item_html_attributes
+    base_attrs = @attributes&.except(:data) || {}
+    base_attrs.merge(
+      class: item_classes,
+      "data-state": item_state,
+      "data-orientation": @orientation || "vertical",
+      data: merged_item_data_attributes
+    )
+  end
+end

data/app/behaviors/ui/accordion_trigger_behavior.rb

@@ -2,78 +2,78 @@
 
 require "tailwind_merge"
 
-    # Shared behavior for Accordion Trigger (button) component
-    # Handles classes, ARIA attributes, and unique IDs
-    module UI::AccordionTriggerBehavior
-      # Base CSS classes for trigger button
-      def trigger_base_classes
-        "flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:underline [&[data-state=open]>svg]:rotate-180"
-      end
+# Shared behavior for Accordion Trigger (button) component
+# Handles classes, ARIA attributes, and unique IDs
+module UI::AccordionTriggerBehavior
+  # Base CSS classes for trigger button
+  def trigger_base_classes
+    "flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:underline [&[data-state=open]>svg]:rotate-180"
+  end
 
-      # Merge base classes with custom classes using TailwindMerge
-      def trigger_classes
-        TailwindMerge::Merger.new.merge([trigger_base_classes, @classes].compact.join(" "))
-      end
+  # Merge base classes with custom classes using TailwindMerge
+  def trigger_classes
+    TailwindMerge::Merger.new.merge([trigger_base_classes, @classes].compact.join(" "))
+  end
 
-      # Generate unique IDs for ARIA relationships
-      def trigger_id
-        @trigger_id ||= "accordion-trigger-#{item_value}"
-      end
+  # Generate unique IDs for ARIA relationships
+  def trigger_id
+    @trigger_id ||= "accordion-trigger-#{item_value}"
+  end
 
-      def content_id
-        @content_id ||= "accordion-content-#{item_value}"
-      end
+  def content_id
+    @content_id ||= "accordion-content-#{item_value}"
+  end
 
-      # Get item value from context (set by parent AccordionItem)
-      def item_value
-        @item_value || SecureRandom.hex(4)
-      end
+  # Get item value from context (set by parent AccordionItem)
+  def item_value
+    @item_value || SecureRandom.hex(4)
+  end
 
-      # Determine initial state from context
-      def trigger_state
-        @initial_open ? "open" : "closed"
-      end
+  # Determine initial state from context
+  def trigger_state
+    @initial_open ? "open" : "closed"
+  end
 
-      # Determine aria-expanded value
-      def aria_expanded
-        @initial_open ? "true" : "false"
-      end
+  # Determine aria-expanded value
+  def aria_expanded
+    @initial_open ? "true" : "false"
+  end
 
-      # Data attributes for Stimulus
-      def trigger_data_attributes
-        {
-          ui__accordion_target: "trigger",
-          action: "click->ui--accordion#toggle"
-        }
-      end
+  # Data attributes for Stimulus
+  def trigger_data_attributes
+    {
+      ui__accordion_target: "trigger",
+      action: "click->ui--accordion#toggle"
+    }
+  end
 
-      # Merge user-provided data attributes
-      def merged_trigger_data_attributes
-        user_data = @attributes&.fetch(:data, {}) || {}
-        user_data.merge(trigger_data_attributes)
-      end
+  # Merge user-provided data attributes
+  def merged_trigger_data_attributes
+    user_data = @attributes&.fetch(:data, {}) || {}
+    user_data.merge(trigger_data_attributes)
+  end
 
-      # Build complete HTML attributes hash for trigger button
-      def trigger_html_attributes
-        base_attrs = @attributes&.except(:data) || {}
-        base_attrs.merge(
-          class: trigger_classes,
-          type: "button",
-          id: trigger_id,
-          "aria-expanded": aria_expanded,
-          "aria-controls": content_id,
-          "data-state": trigger_state,
-          "data-orientation": @orientation || "vertical",
-          data: merged_trigger_data_attributes
-        )
-      end
+  # Build complete HTML attributes hash for trigger button
+  def trigger_html_attributes
+    base_attrs = @attributes&.except(:data) || {}
+    base_attrs.merge(
+      class: trigger_classes,
+      type: "button",
+      id: trigger_id,
+      "aria-expanded": aria_expanded,
+      "aria-controls": content_id,
+      "data-state": trigger_state,
+      "data-orientation": @orientation || "vertical",
+      data: merged_trigger_data_attributes
+    )
+  end
 
-      # SVG caret icon (rotation handled by Tailwind's [&[data-state=open]>svg] variant)
-      def caret_svg
-        <<~SVG.html_safe
-          <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="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-[var(--duration-accordion)]">
-            <polyline points="6 9 12 15 18 9"></polyline>
-          </svg>
-        SVG
-      end
-    end
+  # SVG caret icon (rotation handled by Tailwind's [&[data-state=open]>svg] variant)
+  def caret_svg
+    <<~SVG.html_safe
+      <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="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-[var(--duration-accordion)]">
+        <polyline points="6 9 12 15 18 9"></polyline>
+      </svg>
+    SVG
+  end
+end