phlex-reactive 0.16.5 → 0.16.7

data/app/javascript/phlex/reactive/runtime.js

@@ -1490,16 +1490,36 @@ function previewFile(input, args, resolveTargets) {
   // `invalid` event fired into the app's own listeners.
   const files = [...(args.valid === true && input.validity?.valid === false ? [] : (input.files ?? []))]
   const accepts = previewAccepts(input, args.accept)
-  const listed = files.filter((f) => typeof f?.type === "string" && accepts(f))
-  // Only an image is painted: a listed PDF clears the preview, unrefused.
-  let file = listed.find((f) => f.type.startsWith("image/"))
-  // A refused file (issue #391) clears like an empty pick and says why. The
-  // input keeps its files and its validity: the page owns the reset. Size is
-  // read BEFORE an object URL exists, so an over-size file never gets one.
-  let reason = files.length > 0 && listed.length === 0 ? "type" : null
-  if (file && Number.isInteger(args.max_bytes) && file.size > args.max_bytes) reason = "size"
-  const refused = reason === "size" ? file : files[0]
-  if (reason) file = null
+  // Size is read BEFORE an object URL exists, so an over-size file never gets one.
+  const oversize = (f) => Number.isInteger(args.max_bytes) && f.size > args.max_bytes
+  const rejected = []
+  let file
+  if (args.per_file === true && input.multiple) {
+    // Several files (issue #439): every file is checked, accept then
+    // max_bytes. The refused ones leave input.files here, synchronously, so an
+    // action bound after the op on the same event posts only the kept ones.
+    const kept = files.filter((f, index) => {
+      const reason = typeof f?.type === "string" && accepts(f) ? oversize(f) && "size" : "type"
+      if (reason) rejected.push({ reason, file: f, index })
+      return !reason
+    })
+    // remaining: the files the input keeps, and so the ones an action posts.
+    const remaining = rejected.length > 0 && !keepFiles(input, kept) ? files.length : kept.length
+    for (const detail of rejected) detail.remaining = remaining
+    file = kept.find((f) => f.type.startsWith("image/"))
+  } else {
+    const listed = files.filter((f) => typeof f?.type === "string" && accepts(f))
+    // Only an image is painted: a listed PDF clears the preview, unrefused.
+    file = listed.find((f) => f.type.startsWith("image/"))
+    // A refused file (issue #391) clears like an empty pick and says why. The
+    // input keeps its files and its validity: the page owns the reset.
+    let reason = files.length > 0 && listed.length === 0 ? "type" : null
+    if (file && oversize(file)) reason = "size"
+    if (reason) {
+      rejected.push({ reason, file: reason === "size" ? file : files[0] })
+      file = null
+    }
+  }
   forgetPreview(img)
   if (file) {
     const url = URL.createObjectURL(file)
@@ -1516,9 +1536,23 @@ function previewFile(input, args, resolveTargets) {
   if (args.name != null) {
     for (const node of resolveTargets({ ...args, to: args.name })) node.textContent = file ? file.name : ""
   }
-  if (reason) {
-    input.dispatchEvent(new CustomEvent("reactive:file-rejected", { bubbles: true, detail: { reason, file: refused } }))
+  for (const detail of rejected) input.dispatchEvent(new CustomEvent("reactive:file-rejected", { bubbles: true, detail }))
+}
+
+// Rebuild input.files from the kept files (issue #439); true once it did. A
+// DataTransfer is the one way to make a FileList; without one the refused
+// files stay in the input (the rejections still fire), and a verbose root is told.
+function keepFiles(input, kept) {
+  if (typeof DataTransfer !== "function") {
+    if (input.closest?.('[data-reactive-verbose="true"], [data-reactive-debug="true"]')) {
+      warnPreview("per_file: has no DataTransfer to drop the refused files from the input")
+    }
+    return false
   }
+  const transfer = new DataTransfer()
+  for (const f of kept) transfer.items.add(f)
+  input.files = transfer.files
+  return true
 }
 
 // Which files the page takes: an image by default. accept: true reads the
@@ -3223,7 +3257,7 @@ export default class extends Controller {
     // modifier params (issue #80). The client decides preventDefault behavior
     // from event.params — set by the Ruby on() — never by sniffing the
     // Stimulus descriptor.
-    const { action, params, debounce, throttle, confirm, confirmWhen, outside, window: windowBound, optimistic } =
+    const { action, params, debounce, throttle, confirm, confirmWhen, outside, window: windowBound, optimistic, prevent } =
       event.params
     if (!action) return
 
@@ -3276,7 +3310,11 @@ export default class extends Controller {
     // A shortcut (issue #357) IS prevented: its key filter has already narrowed
     // the window binding to one chord the page claims (mod+s must not also open
     // the browser's save dialog).
-    if ((shortcut != null || !windowBound) && !this.#keepsNativeToggle(optimistic, target))
+    //
+    // `prevent: false` (issue #433) opts an element-bound trigger out too: the
+    // event keeps its native default (a drop still reaches a file input). A
+    // shortcut stays prevented whatever the markup says.
+    if ((shortcut != null || (!windowBound && prevent !== false)) && !this.#keepsNativeToggle(optimistic, target))
       preventTrigger(event, shortcut)
 
     // A reactive_lazy(on:) shell's trigger (issue #276) goes through the one
@@ -3395,12 +3433,12 @@ export default class extends Controller {
     if (controller) return controller.dispatch(event)
     // Held past this event's dispatch: cancel its native default NOW, by
     // dispatch()'s own rule, or a submit/link would act before the request.
-    const { shortcut, window: windowBound, optimistic } = event.params
+    const { shortcut, window: windowBound, optimistic, prevent } = event.params
     // A shortcut that does not apply (the other twin, a field, a key handled
     // first) is neither prevented nor held, as dispatch() would leave it.
     if (shortcut != null && !shortcutApplies(shortcut, event, this.application?.schema?.keyMappings)) return
     const target = event.currentTarget ?? event.target
-    if ((shortcut != null || !windowBound) && !this.#keepsNativeToggle(optimistic, target))
+    if ((shortcut != null || (!windowBound && prevent !== false)) && !this.#keepsNativeToggle(optimistic, target))
       preventTrigger(event, shortcut)
     heldForwards.set(root, [...(heldForwards.get(root) ?? []), [event, target]])
     const data = root.dataset
@@ -3463,9 +3501,10 @@ export default class extends Controller {
         continue
       if (onceBindingSpent(this, event, record)) continue
       // A legacy attr reads its flags element-wide — but never a mix-ed on()'s
-      // debounce/throttle params (issue #393): those belong to the dispatch.
+      // debounce/throttle (issue #393) or prevent (issue #433) params: those
+      // belong to the dispatch.
       this.#runBinding(
-        record.legacy ? { ...params, ops: record.ops, debounce: undefined, throttle: undefined } : record,
+        record.legacy ? { ...params, ops: record.ops, debounce: undefined, throttle: undefined, prevent: undefined } : record,
         event,
         trigger,
         records.indexOf(record),
@@ -3476,7 +3515,7 @@ export default class extends Controller {
   // One on_client binding (issue #95): its outside guard, preventDefault rule,
   // confirm gate, then its ops — every flag read from the binding itself.
   #runBinding(record, event, trigger, ordinal) {
-    const { ops, confirm, confirmWhen, outside, window: windowBound, shortcut } = record
+    const { ops, confirm, confirmWhen, outside, window: windowBound, shortcut, prevent } = record
     // Outside guard FIRST — identical semantics to dispatch() (issue #80): an
     // outside: trigger is a COMPLETE no-op for events inside this root, before
     // preventDefault and before any op runs.
@@ -3489,7 +3528,8 @@ export default class extends Controller {
     // (possibly async) confirm gate below — a native default can't wait for a
     // pending dialog (same ordering as dispatch()).
     // A shortcut (issue #357) is prevented: it is one chord the page claims.
-    if (shortcut != null || !windowBound) preventTrigger(event, shortcut)
+    // A record with `prevent: false` (issue #433) keeps the native default.
+    if (shortcut != null || (!windowBound && prevent !== false)) preventTrigger(event, shortcut)
 
     // Resolve the effective confirm message — static string, or the conditional
     // Hash form (issue #179) evaluated over collected fields (a promise of it
@@ -4352,12 +4392,22 @@ export default class extends Controller {
   // #ownershipFilter for SERVER params (issue #410): nested client-only roots
   // are transparent, so a control under one is this root's when the first
   // token-bearing root above it is this.element. A nested token-bearing root
-  // keeps its own fields (issue #15). Bindings, computes and listnav keep the
-  // strict nearest-root #ownershipFilter.
+  // keeps its own fields (issue #15), except a control marked
+  // data-reactive-shared-field (issue #434): this root collects it too when
+  // the control's own server root sits directly below this one. One level: a
+  // grand-host never sees it. Whatever reads #collectFields sees it too: the
+  // request, and the conditional confirm (it judges the fields the action is
+  // about to post). Bindings, computes, listnav, dirty tracking and persist
+  // keep the strict nearest-root #ownershipFilter / #ownsField.
   #serverFieldFilter() {
     const nested = this.element.querySelectorAll(AWAKE_ROOT)
     if (nested.length === 0 || [...nested].every(clientOnlyRoot)) return () => true
-    return (el) => serverRoot(el, AWAKE_ROOT, this.element) === this.element
+    return (el) => {
+      const own = serverRoot(el, AWAKE_ROOT, this.element)
+      if (own === this.element) return true
+      return el.getAttribute("data-reactive-shared-field") != null &&
+        serverRoot(own.parentElement, AWAKE_ROOT, this.element) === this.element
+    }
   }
 
   // One walk over THIS root's named controls (not a nested reactive root's),

data/lib/phlex/reactive/component/helpers.rb

@@ -20,6 +20,7 @@ module Phlex
         include ImageFallbackBinding
         include CountdownBinding
         include CssVarsBinding
+        include SharedField
         include FieldReferences
         include ShowOptions
 
@@ -321,6 +322,16 @@ module Phlex
         #   span(**on(:close, shortcut: { keys: "esc", in_editable: true }))
         #   span(**on(:leave, shortcut: { keys: "esc", handled: true }))
         #
+        # `prevent: false` (issue #433, also RESERVED) lets an ELEMENT-BOUND
+        # trigger keep the event's native default: the client skips its
+        # preventDefault, so a drop still reaches a native file input inside
+        # the trigger. Default `true` (today's behaviour, no attribute). A
+        # window-bound or outside: trigger never prevents, so there it is a
+        # no-op; with shortcut: (a chord the page claims) it raises. The
+        # forced type="button" of a click trigger stays. With confirm:, this
+        # trigger does not cancel the default; the dialog gates only its action.
+        #   div(**on(:track, event: "drop", prevent: false))
+        #
         # `optimistic:` (issue #98) — a small, ALWAYS-REVERSIBLE vocabulary of
         # COSMETIC hints the client applies the instant the trigger fires and
         # REVERTS if the round trip fails, so a click/toggle gives instant feedback
@@ -367,7 +378,7 @@ module Phlex
         #   button(**on(:destroy, confirm: "Sure?", busy: { add_class: "opacity-50" })) { "Delete" }
         def on(action_name, event: nil, debounce: nil, throttle: nil, confirm: nil,
                window: false, once: false, outside: false, optimistic: nil, busy: nil,
-               shortcut: nil, **params)
+               shortcut: nil, prevent: true, **params)
           reject_removed_on_kwargs!(action_name, params)
           # A typo'd or forgotten action renders fine and only surfaces as an
           # opaque 403 at CLICK time (the endpoint's default-deny). Under
@@ -401,6 +412,7 @@ module Phlex
 
           # Guarded here, not inside: building the caller label allocates (on() is a hot path).
           shortcut = shortcut_for!("on(#{action_name.inspect})", shortcut, event:, window:, outside:) unless shortcut.nil?
+          keeps_default!("on(#{action_name.inspect})", prevent, shortcut) unless prevent == true
           event ||= "click"
           window_bound = window || outside || !shortcut.nil?
           action = trigger_descriptors(event, shortcut, window_bound, "dispatch", once)
@@ -424,6 +436,10 @@ module Phlex
           # The client decides preventDefault behavior from event.params (never by
           # sniffing the descriptor), so EVERY window binding flags the param.
           attrs[:data][:reactive_window_param] = "true" if window_bound
+          # Issue #433: the STRING "false" (Phlex drops a false attribute;
+          # Stimulus typecasts "false" back to false). A window binding never
+          # prevents, so it carries nothing.
+          attrs[:data][:reactive_prevent_param] = "false" unless prevent || window_bound
           # Issue #357: the client reads the shortcut to pick the twin for its
           # platform, skip editable targets and prevent the chord.
           attrs[:data][:reactive_shortcut_param] = shortcut_param_attr(shortcut) if shortcut
@@ -481,6 +497,13 @@ module Phlex
         #   input(**on_client(:input, js.submit("#search"), debounce: 300))
         #   div(**on_client(:scroll, js.add_class("#bar", "stuck"), window: true, throttle: 250))
         #
+        # Issue #433: `prevent: false` lets an element-bound binding keep the
+        # event's native default (on()'s rule): a drop on a native file input
+        # inside the element still sets the input's files while the ops run.
+        # It rides on the record ("prevent":false, right after "on"); a no-op
+        # on a window-bound binding, an ArgumentError with shortcut:.
+        #   div(**on_client(:drop, js.remove_class("#zone", "is-over"), prevent: false))
+        #
         # Ops are EPHEMERAL UI: any server re-render of the component (an action
         # reply, a broadcast, a morph) rebuilds from server state and resets
         # whatever they toggled — by design (the LiveView JS-commands caveat). Use
@@ -490,7 +513,7 @@ module Phlex
         # accepted — a dead trigger should fail at render, not no-op in the
         # browser.
         def on_client(event, ops, window: false, once: false, outside: false, confirm: nil, detail: nil,
-                      shortcut: nil, debounce: nil, throttle: nil)
+                      shortcut: nil, debounce: nil, throttle: nil, prevent: true)
           unless ops.is_a?(Phlex::Reactive::JS)
             raise ArgumentError,
               "on_client expects a Phlex::Reactive::JS chain (e.g. js.toggle(\"#menu\")), " \
@@ -508,8 +531,10 @@ module Phlex
               "(change/input), or gate it behind a reducer's $ops / reactive_on_complete."
           end
           shortcut = client_shortcut!(event, shortcut, window:, outside:)
+          keeps_default!("on_client(#{event.inspect})", prevent, shortcut) unless prevent == true
           window_bound = window || outside || !shortcut.nil?
-          record = client_binding_record(event, ops, window_bound:, outside:, once:, confirm:, detail:)
+          keep_default = !prevent && !window_bound
+          record = client_binding_record(event, ops, window_bound:, outside:, once:, confirm:, detail:, keep_default:)
           client_binding_wait!(record, event, debounce, throttle) unless debounce.nil? && throttle.nil?
           # The record's `on` stays the bare keydown: the client reads a key
           # filter from `on`, and `mod` is not a key.
@@ -1571,8 +1596,11 @@ module Phlex
         # overridable confirmResolver on(:action, confirm:) uses (#52/#55); the
         # client prompts BEFORE applying the ops. Issue #179: a Hash confirm: is
         # CONDITIONAL, compiled by the shared compile_conditional_confirm.
-        def client_binding_record(event, ops, window_bound:, outside:, once:, confirm:, detail:)
+        def client_binding_record(event, ops, window_bound:, outside:, once:, confirm:, detail:, keep_default:)
           record = { "on" => event }
+          # Issue #433: RIGHT AFTER "on" — phlex/reactive/early reads the pair
+          # `"on":"<event>","prevent":false` off the raw attribute before connect.
+          record["prevent"] = false if keep_default
           record["window"] = true if window_bound
           record["outside"] = true if outside
           # A mix-ed regular sibling keeps calling runOps after Stimulus drops
@@ -1889,6 +1917,17 @@ module Phlex
           Phlex::Reactive::Shortcut.parse(shortcut)
         end
 
+        # Issue #433: validate prevent: once it is not the default true — only
+        # false is left, and a shortcut (a chord the page claims) refuses it.
+        def keeps_default!(caller, prevent, shortcut)
+          raise ArgumentError, "#{caller} prevent: must be true or false, got #{prevent.inspect}" unless prevent == false
+          return if shortcut.nil?
+
+          raise ArgumentError,
+            "#{caller} got shortcut: with prevent: false — a shortcut is a chord the page claims, " \
+            "so it is always prevented; drop prevent:"
+        end
+
         # on_client's event is positional: with shortcut: it must be the bare
         # keydown (the key filter comes from the shortcut).
         def client_shortcut!(event, shortcut, window:, outside:)

data/lib/phlex/reactive/component/shared_field.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module Phlex
+  module Reactive
+    module Component
+      # A field a nested component shares with its host (issue #434). A reactive
+      # component rendered inside another is its own root, and its named fields
+      # are its own (issue #15). A form widget with actions of its own (a picker
+      # that stores the chosen id in a hidden field) still has to post that value
+      # with the form around it:
+      #
+      #   input(type: "hidden", **reactive_shared_field(name: "item[choice]", value: @choice))
+      #   # => name="item[choice]" value="…" data-reactive-shared-field
+      #
+      # The marked control is collected by its own root's actions AND by the
+      # next token-bearing root above it (client-only roots in between are
+      # transparent, issue #410). One level only: a grand-host collects it only
+      # when the host marks a copy of its own. A native <form> posts it anyway,
+      # as it does any named control.
+      #
+      # The name is the HOST's param and goes on the wire verbatim, never
+      # re-scoped under this component's reactive_scope.
+      module SharedField
+        def reactive_shared_field(name:, value: nil, **attrs)
+          unless (name.is_a?(String) || name.is_a?(Symbol)) && !name.to_s.strip.empty?
+            raise ArgumentError,
+              "reactive_shared_field needs a non-blank String or Symbol name: " \
+              "(the host's param, e.g. name: \"item[choice]\"), " \
+              "got #{name.inspect}"
+          end
+
+          binding = { name: name.to_s }
+          binding[:value] = value unless value.nil?
+          binding[:data] = { reactive_shared_field: true }
+          mix(binding, attrs)
+        end
+      end
+    end
+  end
+end

data/lib/phlex/reactive/js.rb

@@ -329,8 +329,21 @@ module Phlex
       #   input(type: "file", id: "photo-file", accept: "image/png,image/jpeg",
       #     **on_client(:change, js.preview_file("#photo-file", into: "#photo",
       #       wrap: "#photo-frame", max_bytes: 2_000_000, accept: true)))
-
-      def preview_file(to, into:, name: nil, global: false, valid: false, wrap: nil, max_bytes: nil, accept: nil)
+      #
+      # Several files (issue #439): `per_file: true` on an input with
+      # `multiple` checks EVERY file (accept, then max_bytes), rebuilds
+      # input.files from the accepted ones (synchronously, so an
+      # `on(:action, event: "change")` mixed in AFTER the op posts only those),
+      # dispatches one `reactive:file-rejected` per refused file
+      # (detail.reason, file, index — its place in the pick — and remaining,
+      # how many files the input keeps), and paints the first accepted image.
+      # A single input, or per_file: omitted, keeps the behaviour above.
+      #   input(type: "file", id: "pick", name: "file", multiple: true, accept: "image/png",
+      #     **mix(on_client(:change, js.preview_file("#pick", into: "#shot", max_bytes: 1_000_000,
+      #       accept: true, per_file: true)), on(:upload, event: "change")))
+
+      def preview_file(to, into:, name: nil, global: false, valid: false, wrap: nil, max_bytes: nil, accept: nil,
+                       per_file: false)
         if [:root, ROOT_SENTINEL].include?(to)
           raise ArgumentError,
             "#{self.class}: preview_file reads a file input, not the component root — " \
@@ -344,6 +357,7 @@ module Phlex
         args["wrap"] = preview_selector(:wrap, wrap) unless wrap.nil?
         args["max_bytes"] = preview_max_bytes(max_bytes) unless max_bytes.nil?
         args["accept"] = preview_accept(accept) unless accept.nil? || accept == false
+        args["per_file"] = true if preview_per_file(per_file)
         append("preview_file", args.freeze)
       end
 
@@ -560,6 +574,15 @@ module Phlex
           "#{self.class}: preview_file max_bytes: must be a positive Integer, got #{bytes.inspect}"
       end
 
+      # per_file: is a strict boolean (nil, like the other keywords, means
+      # omitted): a typo'd truthy value must not change which files an upload posts.
+      def preview_per_file(per_file)
+        return per_file == true if [true, false, nil].include?(per_file)
+
+        raise ArgumentError,
+          "#{self.class}: preview_file per_file: must be true, false or nil, got #{per_file.inspect}"
+      end
+
       # true reads the input's accept attribute; a String is the list itself.
       def preview_accept(accept)
         return accept if accept == true || (accept.is_a?(String) && !accept.strip.empty?)

data/lib/phlex/reactive/version.rb

@@ -2,6 +2,6 @@
 
 module Phlex
   module Reactive
-    VERSION = "0.16.5"
+    VERSION = "0.16.7"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: phlex-reactive
 version: !ruby/object:Gem::Version
-  version: 0.16.5
+  version: 0.16.7
 platform: ruby
 authors:
 - Mikael Henriksson
@@ -214,6 +214,7 @@ files:
 - lib/phlex/reactive/component/presence_declaration.rb
 - lib/phlex/reactive/component/registry.rb
 - lib/phlex/reactive/component/selection.rb
+- lib/phlex/reactive/component/shared_field.rb
 - lib/phlex/reactive/component/show_options.rb
 - lib/phlex/reactive/component/sortable.rb
 - lib/phlex/reactive/defer.rb