phlex_kit 0.11.0 → 0.13.0

data/app/components/phlex_kit/toast/toaster_controller.js

@@ -63,12 +63,26 @@ export default class extends Controller {
     // _setExpanded's state change left auto-dismiss running under the cursor.
     this._onPointerEnter = () => { this._setPaused(true); this._setExpanded(true) }
     this._onPointerLeave = () => { this._setPaused(false); if (!this.expandValue) this._setExpanded(false) }
-    this._onWindowToast = (e) => this._spawn(e.detail || {})
+    this._onWindowToast = (e) => {
+      const detail = e.detail || {}
+      // Routing: toast(msg, { region: "<id>" }) targets the region whose
+      // wrapper or list carries that id. Without region only the page's
+      // FIRST region spawns — the event is a window broadcast, so every
+      // region hears it and an unguarded spawn would duplicate the toast
+      // once per region.
+      if (!this._handlesRegion(detail.region)) return
+      this._spawn(detail)
+    }
     this._onWindowDismissAll = () => this._dismissById(null)
+    // Dismiss-by-id is a broadcast too: _dismissById only acts on a toast in
+    // its OWN list, so whichever region owns the id handles it — the api
+    // registration (last region wins) no longer has to be the owner.
+    this._onWindowDismissId = (e) => this._dismissById(e.detail?.id)
     this._onKey = this._onKey.bind(this)
 
     window.addEventListener("phlex-kit:toast", this._onWindowToast)
     window.addEventListener("phlex-kit:toast:dismiss-all", this._onWindowDismissAll)
+    window.addEventListener("phlex-kit:toast:dismiss", this._onWindowDismissId)
     this._listEl.addEventListener("pointerenter", this._onPointerEnter)
     this._listEl.addEventListener("pointerleave", this._onPointerLeave)
     document.addEventListener("keydown", this._onKey)
@@ -81,6 +95,7 @@ export default class extends Controller {
   disconnect() {
     window.removeEventListener("phlex-kit:toast", this._onWindowToast)
     window.removeEventListener("phlex-kit:toast:dismiss-all", this._onWindowDismissAll)
+    window.removeEventListener("phlex-kit:toast:dismiss", this._onWindowDismissId)
     this._listEl?.removeEventListener("pointerenter", this._onPointerEnter)
     this._listEl?.removeEventListener("pointerleave", this._onPointerLeave)
     document.removeEventListener("keydown", this._onKey)
@@ -165,6 +180,15 @@ export default class extends Controller {
     return node.id
   }
 
+  // True when this region should act on a toast event carrying `region`
+  // (the list's base id or the wrapper's "<id>-region" both match). Without
+  // an explicit region, only the page's first region in DOM order handles
+  // the broadcast — single-region pages are unaffected.
+  _handlesRegion(region) {
+    if (region) return region === this.element.id || region === this._listEl?.id
+    return this.element === document.querySelector("[data-controller~='phlex-kit--toaster']")
+  }
+
   _dismissById(id) {
     if (!id) {
       this.toastTargets.forEach((el) =>
@@ -172,6 +196,7 @@ export default class extends Controller {
       )
       return
     }
+    if (!this._listEl) return
     const el = this._listEl.querySelector(`#${CSS.escape(id)}`)
     if (el) el.dispatchEvent(new CustomEvent("phlex-kit:toast:force-dismiss", { bubbles: true }))
   }
@@ -310,12 +335,14 @@ export default class extends Controller {
     api.info = (m, o) => fire("info", m, o)
     api.loading = (m, o = {}) => fire("loading", m, { ...o, duration: o.duration ?? 0 })
     api.dismiss = (id) => {
-      if (id) this._dismissById(id)
+      // Both broadcasts: whichever region owns the id dismisses it — the
+      // api may be registered by a different region than the owner.
+      if (id) window.dispatchEvent(new CustomEvent("phlex-kit:toast:dismiss", { detail: { id } }))
       else window.dispatchEvent(new CustomEvent("phlex-kit:toast:dismiss-all"))
     }
     api.promise = (p, msgs = {}) => {
       const id = `toast-${this._uuid()}`
-      fire("loading", typeof msgs.loading === "function" ? msgs.loading() : (msgs.loading || "Loading..."), { id, duration: 0 })
+      fire("loading", typeof msgs.loading === "function" ? msgs.loading() : (msgs.loading || "Loading..."), { id, duration: 0, region: msgs.region })
       Promise.resolve(p).then(
         (val) => this._mutate(id, "success", typeof msgs.success === "function" ? msgs.success(val) : msgs.success),
         (err) => this._mutate(id, "error", typeof msgs.error === "function" ? msgs.error(err) : msgs.error)
@@ -329,8 +356,11 @@ export default class extends Controller {
   }
 
   _mutate(id, variant, text) {
-    const el = this._listEl.querySelector(`#${CSS.escape(id)}`)
-    if (!el) return
+    // Document-scoped: promise()'s loading toast spawns in whichever region
+    // the broadcast routed it to, which need not be the region that
+    // registered the api this closure belongs to.
+    const el = document.getElementById(id)
+    if (!el || !el.closest(".pk-toast-list")) return
     el.dataset.variant = variant
     el.setAttribute("role", variant === "error" ? "alert" : "status")
     this._swapIcon(el, variant)

data/app/components/phlex_kit/toggle_group/toggle_group.rb

@@ -28,13 +28,28 @@ module PhlexKit
 
     def item_context
       { type: @type, variant: @variant, size: @size, disabled: @disabled,
-        selected_values: selected_values, spacing: @spacing, orientation: @orientation }
+        selected_values: selected_values, spacing: @spacing, orientation: @orientation,
+        group: self }
     end
 
     def ToggleGroupItem(**kwargs, &block)
       render PhlexKit::ToggleGroupItem.new(group_context: item_context, **kwargs), &block
     end
 
+    # Roving-tabindex initial stop (single-type, nothing selected): the FIRST
+    # enabled item claims tabindex="0" server-side, mirroring what
+    # toggle_group_controller.js's reconcile() computes at runtime
+    # (`pressed || enabledItems()[0]`). Items call this once each, in render
+    # order, as they're constructed — a single-threaded sequential claim, not
+    # a lookahead over siblings not yet rendered.
+    def claim_tab_stop(item_disabled)
+      return false unless selected_values.empty?
+      return false if item_disabled
+      return false if @tab_stop_claimed
+      @tab_stop_claimed = true
+      true
+    end
+
     private
 
     def selected_values

data/app/components/phlex_kit/toggle_group/toggle_group_controller.js

@@ -33,14 +33,17 @@ export default class extends Controller {
     if (items.length === 0) return
     const currentIndex = items.indexOf(event.currentTarget)
     let nextIndex = currentIndex
-    switch (event.key) {
-      case "ArrowRight": case "ArrowDown": nextIndex = (currentIndex + 1) % items.length; break
-      case "ArrowLeft": case "ArrowUp": nextIndex = (currentIndex - 1 + items.length) % items.length; break
-      case "Home": nextIndex = 0; break
-      case "End": nextIndex = items.length - 1; break
-      case " ": case "Enter": event.preventDefault(); event.currentTarget.click(); return
-      default: return
-    }
+    // In RTL the horizontal arrows mirror (physical LEFT = next); Up/Down are
+    // unaffected. Runtime dir check is reliable after a dynamic flip.
+    const rtl = getComputedStyle(this.element).direction === "rtl"
+    const fwd = rtl ? "ArrowLeft" : "ArrowRight"
+    const back = rtl ? "ArrowRight" : "ArrowLeft"
+    if (event.key === fwd || event.key === "ArrowDown") nextIndex = (currentIndex + 1) % items.length
+    else if (event.key === back || event.key === "ArrowUp") nextIndex = (currentIndex - 1 + items.length) % items.length
+    else if (event.key === "Home") nextIndex = 0
+    else if (event.key === "End") nextIndex = items.length - 1
+    else if (event.key === " " || event.key === "Enter") { event.preventDefault(); event.currentTarget.click(); return }
+    else return
     event.preventDefault()
     const next = items[nextIndex]
     this.updateRovingTabindex(next)

data/app/components/phlex_kit/toggle_group/toggle_group_item.rb

@@ -1,19 +1,27 @@
 module PhlexKit
   class ToggleGroupItem < Toggle
     def initialize(value:, group_context:, variant: nil, size: nil, **attrs)
-      # Toggle kwargs this item renders no markup for — inheriting them
-      # silently discarded the caller's input.
-      unsupported = attrs.keys & %i[wrapper name unpressed_value]
+      # Toggle kwargs this item renders no markup for, or that the group
+      # derives itself (pressed: comes from the group's selected_values) —
+      # inheriting them silently discarded the caller's input.
+      unsupported = attrs.keys & %i[wrapper name unpressed_value pressed]
       if unsupported.any?
         raise ArgumentError, "ToggleGroupItem does not support #{unsupported.join(", ")} (group items render a bare button)"
       end
       @item_value = value.to_s
       @group_context = group_context
       pressed = group_context[:selected_values].include?(@item_value)
+      item_disabled = attrs.key?(:disabled) ? attrs.delete(:disabled) : group_context[:disabled]
+      # Roving tabindex initial stop: when nothing is selected yet, the first
+      # enabled item claims tabindex="0" (see ToggleGroup#claim_tab_stop).
+      # group_context[:group] is nil for a hand-built context (bypassing
+      # ToggleGroup#item_context) — treat that as "no tab-stop claim" rather
+      # than raising, since standalone tests construct contexts by hand.
+      @is_first_tab_stop = group_context[:group]&.claim_tab_stop(item_disabled) || false
       super(pressed: pressed, name: nil, value: @item_value,
             variant: variant || group_context[:variant],
             size: size || group_context[:size],
-            disabled: group_context[:disabled], **attrs)
+            disabled: item_disabled, **attrs)
     end
 
     def view_template(&block)
@@ -34,7 +42,9 @@ module PhlexKit
         a[:aria] = { checked: @pressed.to_s }
         # A disabled button can't take focus — giving the tab stop to a
         # pressed-but-disabled item made the whole group Tab-unreachable.
-        a[:tabindex] = (@pressed && !@disabled) ? "0" : "-1"
+        # When nothing is selected, the first enabled item claims the initial
+        # roving-tabindex stop instead of every item defaulting to -1.
+        a[:tabindex] = (@pressed && !@disabled) || @is_first_tab_stop ? "0" : "-1"
       else
         a[:aria] = { pressed: @pressed.to_s }
         a[:tabindex] = "0"

data/app/javascript/phlex_kit/controllers/index.js

@@ -24,6 +24,7 @@ import ContextMenuController from "phlex_kit/controllers/context_menu_controller
 import DataTableController from "phlex_kit/controllers/data_table_controller"
 import DataTableColumnVisibilityController from "phlex_kit/controllers/data_table_column_visibility_controller"
 import DataTableSearchController from "phlex_kit/controllers/data_table_search_controller"
+import DatePickerController from "phlex_kit/controllers/date_picker_controller"
 import DialogController from "phlex_kit/controllers/dialog_controller"
 import DropdownMenuController from "phlex_kit/controllers/dropdown_menu_controller"
 import FormFieldController from "phlex_kit/controllers/form_field_controller"
@@ -65,6 +66,7 @@ export function registerPhlexKitControllers(application) {
   application.register("phlex-kit--data-table", DataTableController)
   application.register("phlex-kit--data-table-column-visibility", DataTableColumnVisibilityController)
   application.register("phlex-kit--data-table-search", DataTableSearchController)
+  application.register("phlex-kit--date-picker", DatePickerController)
   application.register("phlex-kit--dialog", DialogController)
   application.register("phlex-kit--dropdown-menu", DropdownMenuController)
   application.register("phlex-kit--form-field", FormFieldController)

data/lib/phlex_kit/base_component.rb

@@ -31,17 +31,36 @@ module PhlexKit
       end
     end
 
+    # True when the caller supplied their own value for a plain attribute in
+    # @attrs — symbol or string spelling. A component with a generated default
+    # for that attribute must skip it then: `mix` merges duplicate attrs
+    # (role="dialog region") instead of overriding. Aria attributes have their
+    # own check (aria_key_set?) covering the aria: hash spelling too.
+    def attr_set?(key)
+      @attrs.key?(key) || @attrs.key?(key.to_s)
+    end
+
     # True when the caller supplied an accessible name in @attrs — via the
     # aria: hash or flat aria_label/aria-label(ledby) keys. Components with a
     # generated default label must skip it then: `mix` merges duplicate string
     # attrs ("pagination Résultats") instead of overriding.
     def aria_labelled?
+      aria_key_set?(:label) || aria_key_set?(:labelledby)
+    end
+
+    # True when the caller already supplied their own value for a given aria
+    # attribute — via the aria: hash (aria: { <key>: ... }) or the flat
+    # "aria-<key>"/aria_<key> spelling. A component with a generated default
+    # for that attribute must skip it then: `mix` merges duplicate attrs
+    # (aria-modal="true false") instead of overriding.
+    def aria_key_set?(key)
       aria = @attrs[:aria] || @attrs["aria"]
       if aria.is_a?(Hash)
-        return true if %i[label labelledby].any? { |k| aria[k] || aria[k.to_s] }
+        return true if aria.key?(key) || aria.key?(key.to_s)
       end
-      [ :aria_label, "aria_label", "aria-label",
-        :aria_labelledby, "aria_labelledby", "aria-labelledby" ].any? { |k| @attrs[k] }
+      dashed = "aria-#{key}"
+      underscored = "aria_#{key}"
+      [ dashed.to_sym, dashed, underscored.to_sym, underscored ].any? { |k| @attrs[k] }
     end
   end
 end

data/lib/phlex_kit/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module PhlexKit
-  VERSION = "0.11.0"
+  VERSION = "0.13.0"
 end

data/lib/phlex_kit.rb

@@ -3,6 +3,7 @@
 require "json" # Carousel serializes its options value standalone (no Rails to_json)
 require "securerandom" # DatePicker generates a default input id
 require "cgi" # DataTable sort/pagination build query strings standalone
+require "date" # Phlex 2.4's attribute type-dispatch references Date on every render
 # phlex-rails references ActiveSupport::SafeBuffer at require time; in a Rails
 # app it's already loaded, but a bare `require "phlex_kit"` (script/console)
 # crashes with "uninitialized constant Phlex::ActiveSupport" without these.

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: phlex_kit
 version: !ruby/object:Gem::Version
-  version: 0.11.0
+  version: 0.13.0
 platform: ruby
 authors:
 - Matt Kennedy
@@ -306,6 +306,7 @@ files:
 - app/components/phlex_kit/data_table/data_table_toolbar.rb
 - app/components/phlex_kit/date_picker/date_picker.css
 - app/components/phlex_kit/date_picker/date_picker.rb
+- app/components/phlex_kit/date_picker/date_picker_controller.js
 - app/components/phlex_kit/dialog/dialog.css
 - app/components/phlex_kit/dialog/dialog.rb
 - app/components/phlex_kit/dialog/dialog_close.rb