phlex_kit 0.11.0 → 0.12.0

data/app/components/phlex_kit/toast/toast_region.rb

@@ -10,6 +10,12 @@ module PhlexKit
   class ToastRegion < BaseComponent
     SKELETON_VARIANTS = %i[default success error warning info loading].freeze
 
+    # Sentinel default for dir: — distinguishes "caller didn't pass dir:" (omit
+    # the attribute, inherit from the page) from an explicit dir: :ltr (must
+    # render dir="ltr"), which a plain `:ltr` default can't tell apart.
+    DIR_UNSET = Object.new.freeze
+    private_constant :DIR_UNSET
+
     POSITIONS = {
       top_left: "top-left",
       top_center: "top-center",
@@ -30,7 +36,7 @@ module PhlexKit
       rich_colors: false,
       close_button: false,
       hotkey: %w[alt t],
-      dir: :ltr,
+      dir: DIR_UNSET,
       flash: nil,
       id: "pk-toaster",
       **attrs
@@ -53,7 +59,8 @@ module PhlexKit
       end
       @close_button = close_button
       @hotkey = hotkey
-      @dir = dir.to_sym
+      @dir_explicit = !dir.equal?(DIR_UNSET)
+      @dir = (@dir_explicit ? dir : :ltr).to_sym
       unless %i[ltr rtl auto].include?(@dir)
         raise ArgumentError, "ToastRegion dir: must be :ltr, :rtl or :auto"
       end
@@ -138,7 +145,9 @@ module PhlexKit
           phlex_kit__toaster_hotkey_value: Array(@hotkey).join("+")
         }
       }
-      base[:dir] = @dir.to_s unless @dir == :ltr
+      # Only an explicit dir: renders the attribute — the true default (no
+      # dir: passed) omits it so the toast inherits the page's direction.
+      base[:dir] = @dir.to_s if @dir_explicit
       base
     end
   end

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

@@ -172,6 +172,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 }))
   }
@@ -329,6 +330,7 @@ export default class extends Controller {
   }
 
   _mutate(id, variant, text) {
+    if (!this._listEl) return
     const el = this._listEl.querySelector(`#${CSS.escape(id)}`)
     if (!el) return
     el.dataset.variant = 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

@@ -36,12 +36,22 @@ module PhlexKit
     # 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.12.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.12.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