phoenix_live_view 0.20.2 → 0.20.4

package/priv/static/phoenix_live_view.js

@@ -53,7 +53,8 @@ var LiveView = (() => {
     "phx-keydown-loading",
     "phx-keyup-loading",
     "phx-blur-loading",
-    "phx-focus-loading"
+    "phx-focus-loading",
+    "phx-hook-loading"
   ];
   var PHX_COMPONENT = "data-phx-component";
   var PHX_LIVE_LINK = "data-phx-link";
@@ -85,6 +86,7 @@ var LiveView = (() => {
   var PHX_VIEWPORT_BOTTOM = "viewport-bottom";
   var PHX_TRIGGER_ACTION = "trigger-action";
   var PHX_FEEDBACK_FOR = "feedback-for";
+  var PHX_FEEDBACK_GROUP = "feedback-group";
   var PHX_HAS_FOCUSED = "phx-has-focused";
   var FOCUSABLE_INPUTS = ["text", "textarea", "number", "email", "password", "search", "tel", "url", "date", "time", "datetime-local", "color", "range"];
   var CHECKABLE_INPUTS = ["checkbox", "radio"];
@@ -340,7 +342,9 @@ var LiveView = (() => {
       return inputEl.hasAttribute("data-phx-auto-upload");
     },
     findUploadInputs(node) {
-      return this.all(node, `input[type="file"][${PHX_UPLOAD_REF}]`);
+      const formId = node.id;
+      const inputsOutsideForm = this.all(document, `input[type="file"][${PHX_UPLOAD_REF}][form="${formId}"]`);
+      return this.all(node, `input[type="file"][${PHX_UPLOAD_REF}]`).concat(inputsOutsideForm);
     },
     findComponentNodeList(node, cid) {
       return this.filterWithinSameLiveView(this.all(node, `[${PHX_COMPONENT}="${cid}"]`), node);
@@ -534,7 +538,9 @@ var LiveView = (() => {
             });
           }
           if (this.once(el, "bind-debounce")) {
-            el.addEventListener("blur", () => this.triggerCycle(el, DEBOUNCE_TRIGGER));
+            el.addEventListener("blur", () => {
+              callback();
+            });
           }
       }
     },
@@ -567,16 +573,39 @@ var LiveView = (() => {
         el.setAttribute("data-phx-hook", "Phoenix.InfiniteScroll");
       }
     },
-    maybeHideFeedback(container, inputs, phxFeedbackFor) {
+    maybeHideFeedback(container, forms, phxFeedbackFor, phxFeedbackGroup) {
       let feedbacks = [];
-      inputs.forEach((input) => {
-        if (!(this.private(input, PHX_HAS_FOCUSED) || this.private(input, PHX_HAS_SUBMITTED))) {
-          feedbacks.push(input.name);
-          if (input.name.endsWith("[]")) {
-            feedbacks.push(input.name.slice(0, -2));
+      let inputNamesFocused = {};
+      let feedbackGroups = {};
+      forms.forEach((form) => {
+        Array.from(form.elements).forEach((input) => {
+          const group = input.getAttribute(phxFeedbackGroup);
+          if (group && !(group in feedbackGroups)) {
+            feedbackGroups[group] = true;
           }
-        }
+          if (!(input.name in inputNamesFocused)) {
+            inputNamesFocused[input.name] = false;
+          }
+          if (this.private(input, PHX_HAS_FOCUSED) || this.private(input, PHX_HAS_SUBMITTED)) {
+            inputNamesFocused[input.name] = true;
+            if (group) {
+              feedbackGroups[group] = false;
+            }
+          }
+        });
       });
+      for (const [name, focused] of Object.entries(inputNamesFocused)) {
+        if (!focused) {
+          feedbacks.push(name);
+          if (name.endsWith("[]")) {
+            feedbacks.push(name.slice(0, -2));
+          }
+        }
+      }
+      for (const [group, noFeedback] of Object.entries(feedbackGroups)) {
+        if (noFeedback)
+          feedbacks.push(group);
+      }
       if (feedbacks.length > 0) {
         let selector = feedbacks.map((f) => `[${phxFeedbackFor}="${f}"]`).join(", ");
         DOM.all(container, selector, (el) => el.classList.add(PHX_NO_FEEDBACK_CLASS));
@@ -607,11 +636,19 @@ var LiveView = (() => {
     isPhxSticky(node) {
       return node.getAttribute && node.getAttribute(PHX_STICKY) !== null;
     },
+    isChildOfAny(el, parents) {
+      return !!parents.find((parent) => parent.contains(el));
+    },
     firstPhxChild(el) {
       return this.isPhxChild(el) ? el : this.all(el, `[${PHX_PARENT_ID}]`)[0];
     },
     dispatchEvent(target, name, opts = {}) {
-      let bubbles = opts.bubbles === void 0 ? true : !!opts.bubbles;
+      let defaultBubble = true;
+      let isUploadTarget = target.nodeName === "INPUT" && target.type === "file";
+      if (isUploadTarget && name === "click") {
+        defaultBubble = false;
+      }
+      let bubbles = opts.bubbles === void 0 ? defaultBubble : !!opts.bubbles;
       let eventOpts = { bubbles, cancelable: true, detail: opts.detail || {} };
       let event = name === "click" ? new MouseEvent("click", eventOpts) : new CustomEvent(name, eventOpts);
       target.dispatchEvent(event);
@@ -626,20 +663,27 @@ var LiveView = (() => {
       }
     },
     mergeAttrs(target, source, opts = {}) {
-      let exclude = opts.exclude || [];
+      let exclude = new Set(opts.exclude || []);
       let isIgnored = opts.isIgnored;
       let sourceAttrs = source.attributes;
       for (let i = sourceAttrs.length - 1; i >= 0; i--) {
         let name = sourceAttrs[i].name;
-        if (exclude.indexOf(name) < 0) {
-          target.setAttribute(name, source.getAttribute(name));
+        if (!exclude.has(name)) {
+          const sourceValue = source.getAttribute(name);
+          if (target.getAttribute(name) !== sourceValue && (!isIgnored || isIgnored && name.startsWith("data-"))) {
+            target.setAttribute(name, sourceValue);
+          }
+        } else {
+          if (name === "value" && target.value === source.value) {
+            target.setAttribute("value", source.getAttribute(name));
+          }
         }
       }
       let targetAttrs = target.attributes;
       for (let i = targetAttrs.length - 1; i >= 0; i--) {
         let name = targetAttrs[i].name;
         if (isIgnored) {
-          if (name.startsWith("data-") && !source.hasAttribute(name)) {
+          if (name.startsWith("data-") && !source.hasAttribute(name) && ![PHX_REF, PHX_REF_SRC].includes(name)) {
             target.removeAttribute(name);
           }
         } else {
@@ -663,6 +707,9 @@ var LiveView = (() => {
       return el.setSelectionRange && (el.type === "text" || el.type === "textarea");
     },
     restoreFocus(focused, selectionStart, selectionEnd) {
+      if (focused instanceof HTMLSelectElement) {
+        focused.focus();
+      }
       if (!DOM.isTextualInput(focused)) {
         return;
       }
@@ -786,15 +833,22 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
   var UploadEntry = class {
     static isActive(fileEl, file) {
       let isNew = file._phxRef === void 0;
+      let isPreflightInProgress = UploadEntry.isPreflightInProgress(file);
       let activeRefs = fileEl.getAttribute(PHX_ACTIVE_ENTRY_REFS).split(",");
       let isActive = activeRefs.indexOf(LiveUploader.genFileRef(file)) >= 0;
-      return file.size > 0 && (isNew || isActive);
+      return file.size > 0 && (isNew || isActive || !isPreflightInProgress);
     }
     static isPreflighted(fileEl, file) {
       let preflightedRefs = fileEl.getAttribute(PHX_PREFLIGHTED_REFS).split(",");
       let isPreflighted = preflightedRefs.indexOf(LiveUploader.genFileRef(file)) >= 0;
       return isPreflighted && this.isActive(fileEl, file);
     }
+    static isPreflightInProgress(file) {
+      return file._preflightInProgress === true;
+    }
+    static markPreflightInProgress(file) {
+      file._preflightInProgress = true;
+    }
     constructor(fileEl, file, view) {
       this.ref = LiveUploader.genFileRef(file);
       this.fileEl = fileEl;
@@ -961,12 +1015,16 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       return Array.from(fileInputs).filter((input) => this.filesAwaitingPreflight(input).length > 0);
     }
     static filesAwaitingPreflight(input) {
-      return this.activeFiles(input).filter((f) => !UploadEntry.isPreflighted(input, f));
+      return this.activeFiles(input).filter((f) => !UploadEntry.isPreflighted(input, f) && !UploadEntry.isPreflightInProgress(f));
+    }
+    static markPreflightInProgress(entries) {
+      entries.forEach((entry) => UploadEntry.markPreflightInProgress(entry.file));
     }
     constructor(inputEl, view, onComplete) {
       this.view = view;
       this.onComplete = onComplete;
       this._entries = Array.from(LiveUploader.filesAwaitingPreflight(inputEl) || []).map((file) => new UploadEntry(inputEl, file, view));
+      LiveUploader.markPreflightInProgress(this._entries);
       this.numEntriesInProgress = this._entries.length;
     }
     entries() {
@@ -1107,23 +1165,50 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       }
     }
   };
-  var scrollTop = () => document.documentElement.scrollTop || document.body.scrollTop;
-  var winHeight = () => window.innerHeight || document.documentElement.clientHeight;
-  var isAtViewportTop = (el) => {
+  var findScrollContainer = (el) => {
+    if (["scroll", "auto"].indexOf(getComputedStyle(el).overflowY) >= 0)
+      return el;
+    if (document.documentElement === el)
+      return null;
+    return findScrollContainer(el.parentElement);
+  };
+  var scrollTop = (scrollContainer) => {
+    if (scrollContainer) {
+      return scrollContainer.scrollTop;
+    } else {
+      return document.documentElement.scrollTop || document.body.scrollTop;
+    }
+  };
+  var bottom = (scrollContainer) => {
+    if (scrollContainer) {
+      return scrollContainer.getBoundingClientRect().bottom;
+    } else {
+      return window.innerHeight || document.documentElement.clientHeight;
+    }
+  };
+  var top = (scrollContainer) => {
+    if (scrollContainer) {
+      return scrollContainer.getBoundingClientRect().top;
+    } else {
+      return 0;
+    }
+  };
+  var isAtViewportTop = (el, scrollContainer) => {
     let rect = el.getBoundingClientRect();
-    return rect.top >= 0 && rect.left >= 0 && rect.top <= winHeight();
+    return rect.top >= top(scrollContainer) && rect.left >= 0 && rect.top <= bottom(scrollContainer);
   };
-  var isAtViewportBottom = (el) => {
+  var isAtViewportBottom = (el, scrollContainer) => {
     let rect = el.getBoundingClientRect();
-    return rect.right >= 0 && rect.left >= 0 && rect.bottom <= winHeight();
+    return rect.right >= top(scrollContainer) && rect.left >= 0 && rect.bottom <= bottom(scrollContainer);
   };
-  var isWithinViewport = (el) => {
+  var isWithinViewport = (el, scrollContainer) => {
     let rect = el.getBoundingClientRect();
-    return rect.top >= 0 && rect.left >= 0 && rect.top <= winHeight();
+    return rect.top >= top(scrollContainer) && rect.left >= 0 && rect.top <= bottom(scrollContainer);
   };
   Hooks.InfiniteScroll = {
     mounted() {
-      let scrollBefore = scrollTop();
+      this.scrollContainer = findScrollContainer(this.el);
+      let scrollBefore = scrollTop(this.scrollContainer);
       let topOverran = false;
       let throttleInterval = 500;
       let pendingOp = null;
@@ -1137,22 +1222,26 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         pendingOp = () => firstChild.scrollIntoView({ block: "start" });
         this.liveSocket.execJSHookPush(this.el, topEvent, { id: firstChild.id }, () => {
           pendingOp = null;
-          if (!isWithinViewport(firstChild)) {
-            firstChild.scrollIntoView({ block: "start" });
-          }
+          window.requestAnimationFrame(() => {
+            if (!isWithinViewport(firstChild, this.scrollContainer)) {
+              firstChild.scrollIntoView({ block: "start" });
+            }
+          });
         });
       });
       let onLastChildAtBottom = this.throttle(throttleInterval, (bottomEvent, lastChild) => {
         pendingOp = () => lastChild.scrollIntoView({ block: "end" });
         this.liveSocket.execJSHookPush(this.el, bottomEvent, { id: lastChild.id }, () => {
           pendingOp = null;
-          if (!isWithinViewport(lastChild)) {
-            lastChild.scrollIntoView({ block: "end" });
-          }
+          window.requestAnimationFrame(() => {
+            if (!isWithinViewport(lastChild, this.scrollContainer)) {
+              lastChild.scrollIntoView({ block: "end" });
+            }
+          });
         });
       });
-      this.onScroll = (e) => {
-        let scrollNow = scrollTop();
+      this.onScroll = (_e) => {
+        let scrollNow = scrollTop(this.scrollContainer);
         if (pendingOp) {
           scrollBefore = scrollNow;
           return pendingOp();
@@ -1170,17 +1259,25 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         } else if (isScrollingDown && topOverran && rect.top <= 0) {
           topOverran = false;
         }
-        if (topEvent && isScrollingUp && isAtViewportTop(firstChild)) {
+        if (topEvent && isScrollingUp && isAtViewportTop(firstChild, this.scrollContainer)) {
           onFirstChildAtTop(topEvent, firstChild);
-        } else if (bottomEvent && isScrollingDown && isAtViewportBottom(lastChild)) {
+        } else if (bottomEvent && isScrollingDown && isAtViewportBottom(lastChild, this.scrollContainer)) {
           onLastChildAtBottom(bottomEvent, lastChild);
         }
         scrollBefore = scrollNow;
       };
-      window.addEventListener("scroll", this.onScroll);
+      if (this.scrollContainer) {
+        this.scrollContainer.addEventListener("scroll", this.onScroll);
+      } else {
+        window.addEventListener("scroll", this.onScroll);
+      }
     },
     destroyed() {
-      window.removeEventListener("scroll", this.onScroll);
+      if (this.scrollContainer) {
+        this.scrollContainer.removeEventListener("scroll", this.onScroll);
+      } else {
+        window.removeEventListener("scroll", this.onScroll);
+      }
     },
     throttle(interval, callback) {
       let lastCallAt = 0;
@@ -1627,6 +1724,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
                             removeNode(curFromNodeChild, fromEl, true);
                           }
                           curFromNodeChild = matchingFromEl;
+                          curFromNodeKey = getNodeKey(curFromNodeChild);
                         }
                       } else {
                         isCompatible = false;
@@ -1759,6 +1857,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       this.html = html;
       this.streams = streams;
       this.streamInserts = {};
+      this.streamComponentRestore = {};
       this.targetCID = targetCID;
       this.cidPatch = isCid(this.targetCID);
       this.pendingRemoves = [];
@@ -1788,7 +1887,6 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
     }
     markPrunableContentForRemoval() {
       let phxUpdate = this.liveSocket.binding(PHX_UPDATE);
-      dom_default.all(this.container, `[${phxUpdate}=${PHX_STREAM}]`, (el) => el.innerHTML = "");
       dom_default.all(this.container, `[${phxUpdate}=append] > *, [${phxUpdate}=prepend] > *`, (el) => {
         el.setAttribute(PHX_PRUNE, "");
       });
@@ -1803,12 +1901,13 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       let { selectionStart, selectionEnd } = focused && dom_default.hasSelectionRange(focused) ? focused : {};
       let phxUpdate = liveSocket.binding(PHX_UPDATE);
       let phxFeedbackFor = liveSocket.binding(PHX_FEEDBACK_FOR);
+      let phxFeedbackGroup = liveSocket.binding(PHX_FEEDBACK_GROUP);
       let disableWith = liveSocket.binding(PHX_DISABLE_WITH);
       let phxViewportTop = liveSocket.binding(PHX_VIEWPORT_TOP);
       let phxViewportBottom = liveSocket.binding(PHX_VIEWPORT_BOTTOM);
       let phxTriggerExternal = liveSocket.binding(PHX_TRIGGER_ACTION);
       let added = [];
-      let trackedInputs = [];
+      let trackedForms = new Set();
       let updates = [];
       let appendPrependUpdates = [];
       let externalFormTriggered = null;
@@ -1816,16 +1915,12 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       this.trackBefore("updated", container, container);
       liveSocket.time("morphdom", () => {
         this.streams.forEach(([ref, inserts, deleteIds, reset]) => {
-          Object.entries(inserts).forEach(([key, [streamAt, limit]]) => {
-            this.streamInserts[key] = { ref, streamAt, limit, resetKept: false };
+          inserts.forEach(([key, streamAt, limit]) => {
+            this.streamInserts[key] = { ref, streamAt, limit, reset };
           });
           if (reset !== void 0) {
             dom_default.all(container, `[${PHX_STREAM_REF}="${ref}"]`, (child) => {
-              if (inserts[child.id]) {
-                this.streamInserts[child.id].resetKept = true;
-              } else {
-                this.removeStreamChildElement(child);
-              }
+              this.removeStreamChildElement(child);
             });
           }
           deleteIds.forEach((id) => {
@@ -1835,6 +1930,17 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
             }
           });
         });
+        if (isJoinPatch) {
+          dom_default.all(this.container, `[${phxUpdate}=${PHX_STREAM}]`, (el) => {
+            this.liveSocket.owner(el, (view2) => {
+              if (view2 === this.view) {
+                Array.from(el.children).forEach((child) => {
+                  this.removeStreamChildElement(child);
+                });
+              }
+            });
+          });
+        }
         morphdom_esm_default(targetContainer, html, {
           childrenOnly: targetContainer.getAttribute(PHX_COMPONENT) === null,
           getNodeKey: (node) => {
@@ -1850,11 +1956,17 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
             return from.getAttribute(phxUpdate) === PHX_STREAM;
           },
           addChild: (parent, child) => {
-            let { ref, streamAt, limit } = this.getStreamInsert(child);
+            let { ref, streamAt } = this.getStreamInsert(child);
             if (ref === void 0) {
               return parent.appendChild(child);
             }
-            dom_default.putSticky(child, PHX_STREAM_REF, (el) => el.setAttribute(PHX_STREAM_REF, ref));
+            this.setStreamRef(child, ref);
+            child.querySelectorAll(`[${PHX_MAGIC_ID}][${PHX_SKIP}]`).forEach((el) => {
+              const component = this.streamComponentRestore[el.getAttribute(PHX_MAGIC_ID)];
+              if (component) {
+                el.replaceWith(component);
+              }
+            });
             if (streamAt === 0) {
               parent.insertAdjacentElement("afterbegin", child);
             } else if (streamAt === -1) {
@@ -1863,18 +1975,6 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
               let sibling = Array.from(parent.children)[streamAt];
               parent.insertBefore(child, sibling);
             }
-            let children = limit !== null && Array.from(parent.children);
-            let childrenToRemove = [];
-            if (limit && limit < 0 && children.length > limit * -1) {
-              childrenToRemove = children.slice(0, children.length + limit);
-            } else if (limit && limit >= 0 && children.length > limit) {
-              childrenToRemove = children.slice(limit);
-            }
-            childrenToRemove.forEach((removeChild) => {
-              if (!this.streamInserts[removeChild.id]) {
-                this.removeStreamChildElement(removeChild);
-              }
-            });
           },
           onBeforeNodeAdded: (el) => {
             dom_default.maybeAddPrivateHooks(el, phxViewportTop, phxViewportBottom);
@@ -1883,7 +1983,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
           },
           onNodeAdded: (el) => {
             if (el.getAttribute) {
-              this.maybeReOrderStream(el);
+              this.maybeReOrderStream(el, true);
             }
             if (el instanceof HTMLImageElement && el.srcset) {
               el.srcset = el.srcset;
@@ -1894,32 +1994,13 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
               externalFormTriggered = el;
             }
             if (el.getAttribute && el.getAttribute("name") && dom_default.isFormInput(el)) {
-              trackedInputs.push(el);
+              trackedForms.add(el.form);
             }
             if (dom_default.isPhxChild(el) && view.ownsElement(el) || dom_default.isPhxSticky(el) && view.ownsElement(el.parentNode)) {
               this.trackAfter("phxChildAdded", el);
             }
             added.push(el);
           },
-          onBeforeElChildrenUpdated: (fromEl, toEl) => {
-            if (fromEl.getAttribute(phxUpdate) === PHX_STREAM) {
-              let toIds = Array.from(toEl.children).map((child) => child.id);
-              Array.from(fromEl.children).filter((child) => {
-                let { resetKept } = this.getStreamInsert(child);
-                return resetKept;
-              }).sort((a, b) => {
-                let aIdx = toIds.indexOf(a.id);
-                let bIdx = toIds.indexOf(b.id);
-                if (aIdx === bIdx) {
-                  return 0;
-                } else if (aIdx < bIdx) {
-                  return -1;
-                } else {
-                  return 1;
-                }
-              }).forEach((child) => fromEl.appendChild(child));
-            }
-          },
           onNodeDiscarded: (el) => this.onNodeDiscarded(el),
           onBeforeNodeDiscarded: (el) => {
             if (el.getAttribute && el.getAttribute(PHX_PRUNE) !== null) {
@@ -1941,12 +2022,13 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
               externalFormTriggered = el;
             }
             updates.push(el);
-            this.maybeReOrderStream(el);
+            this.maybeReOrderStream(el, false);
           },
           onBeforeElUpdated: (fromEl, toEl) => {
             dom_default.maybeAddPrivateHooks(toEl, phxViewportTop, phxViewportBottom);
             dom_default.cleanChildNodes(toEl, phxUpdate);
             if (this.skipCIDSibling(toEl)) {
+              this.maybeReOrderStream(fromEl);
               return false;
             }
             if (dom_default.isPhxSticky(fromEl)) {
@@ -1982,22 +2064,26 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
             }
             dom_default.copyPrivates(toEl, fromEl);
             let isFocusedFormEl = focused && fromEl.isSameNode(focused) && dom_default.isFormInput(fromEl);
-            if (isFocusedFormEl && fromEl.type !== "hidden") {
+            let focusedSelectChanged = isFocusedFormEl && this.isChangedSelect(fromEl, toEl);
+            if (isFocusedFormEl && fromEl.type !== "hidden" && !focusedSelectChanged) {
               this.trackBefore("updated", fromEl, toEl);
               dom_default.mergeFocusedInput(fromEl, toEl);
               dom_default.syncAttrsToProps(fromEl);
               updates.push(fromEl);
               dom_default.applyStickyOperations(fromEl);
-              trackedInputs.push(fromEl);
+              trackedForms.add(fromEl.form);
               return false;
             } else {
+              if (focusedSelectChanged) {
+                fromEl.blur();
+              }
               if (dom_default.isPhxUpdate(toEl, phxUpdate, ["append", "prepend"])) {
                 appendPrependUpdates.push(new DOMPostMorphRestorer(fromEl, toEl, toEl.getAttribute(phxUpdate)));
               }
               dom_default.syncAttrsToProps(toEl);
               dom_default.applyStickyOperations(toEl);
               if (toEl.getAttribute("name") && dom_default.isFormInput(toEl)) {
-                trackedInputs.push(toEl);
+                trackedForms.add(toEl.form);
               }
               this.trackBefore("updated", fromEl, toEl);
               return true;
@@ -2013,7 +2099,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
           appendPrependUpdates.forEach((update) => update.perform());
         });
       }
-      dom_default.maybeHideFeedback(targetContainer, trackedInputs, phxFeedbackFor);
+      dom_default.maybeHideFeedback(targetContainer, trackedForms, phxFeedbackFor, phxFeedbackGroup);
       liveSocket.silenceEvents(() => dom_default.restoreFocus(focused, selectionStart, selectionEnd));
       dom_default.dispatchEvent(document, "phx:update");
       added.forEach((el) => this.trackAfter("added", el));
@@ -2041,6 +2127,11 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
     }
     removeStreamChildElement(child) {
       if (!this.maybePendingRemove(child)) {
+        if (this.streamInserts[child.id]) {
+          child.querySelectorAll(`[${PHX_MAGIC_ID}]`).forEach((el) => {
+            this.streamComponentRestore[el.getAttribute(PHX_MAGIC_ID)] = el;
+          });
+        }
         child.remove();
         this.onNodeDiscarded(child);
       }
@@ -2049,12 +2140,18 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       let insert = el.id ? this.streamInserts[el.id] : {};
       return insert || {};
     }
-    maybeReOrderStream(el) {
-      let { ref, streamAt, limit } = this.getStreamInsert(el);
+    setStreamRef(el, ref) {
+      dom_default.putSticky(el, PHX_STREAM_REF, (el2) => el2.setAttribute(PHX_STREAM_REF, ref));
+    }
+    maybeReOrderStream(el, isNew) {
+      let { ref, streamAt, reset } = this.getStreamInsert(el);
       if (streamAt === void 0) {
         return;
       }
-      dom_default.putSticky(el, PHX_STREAM_REF, (el2) => el2.setAttribute(PHX_STREAM_REF, ref));
+      this.setStreamRef(el, ref);
+      if (!reset && !isNew) {
+        return;
+      }
       if (streamAt === 0) {
         el.parentElement.insertBefore(el, el.parentElement.firstElementChild);
       } else if (streamAt > 0) {
@@ -2071,6 +2168,16 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
           }
         }
       }
+      this.maybeLimitStream(el);
+    }
+    maybeLimitStream(el) {
+      let { limit } = this.getStreamInsert(el);
+      let children = limit !== null && Array.from(el.parentElement.children);
+      if (limit && limit < 0 && children.length > limit * -1) {
+        children.slice(0, children.length + limit).forEach((child) => this.removeStreamChildElement(child));
+      } else if (limit && limit >= 0 && children.length > limit) {
+        children.slice(limit).forEach((child) => this.removeStreamChildElement(child));
+      }
     }
     transitionPendingRemoves() {
       let { pendingRemoves, liveSocket } = this;
@@ -2088,6 +2195,20 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         });
       }
     }
+    isChangedSelect(fromEl, toEl) {
+      if (!(fromEl instanceof HTMLSelectElement) || fromEl.multiple) {
+        return false;
+      }
+      if (fromEl.options.length !== toEl.options.length) {
+        return true;
+      }
+      let fromSelected = fromEl.selectedOptions[0];
+      let toSelected = toEl.selectedOptions[0];
+      if (fromSelected && fromSelected.hasAttribute("selected")) {
+        toSelected.setAttribute("selected", fromSelected.getAttribute("selected"));
+      }
+      return !fromEl.isEqualNode(toEl);
+    }
     isCIDPatch() {
       return this.cidPatch;
     }
@@ -2129,66 +2250,42 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
     "track",
     "wbr"
   ]);
-  var endingTagNameChars = new Set([">", "/", " ", "\n", "	", "\r"]);
   var quoteChars = new Set(["'", '"']);
   var modifyRoot = (html, attrs, clearInnerHTML) => {
     let i = 0;
     let insideComment = false;
     let beforeTag, afterTag, tag, tagNameEndsAt, id, newHTML;
-    while (i < html.length) {
-      let char = html.charAt(i);
-      if (insideComment) {
-        if (char === "-" && html.slice(i, i + 3) === "-->") {
-          insideComment = false;
-          i += 3;
-        } else {
-          i++;
-        }
-      } else if (char === "<" && html.slice(i, i + 4) === "<!--") {
-        insideComment = true;
-        i += 4;
-      } else if (char === "<") {
-        beforeTag = html.slice(0, i);
-        let iAtOpen = i;
+    let lookahead = html.match(/^(\s*(?:<!--.*?-->\s*)*)<([^\s\/>]+)/);
+    if (lookahead === null) {
+      throw new Error(`malformed html ${html}`);
+    }
+    i = lookahead[0].length;
+    beforeTag = lookahead[1];
+    tag = lookahead[2];
+    tagNameEndsAt = i;
+    for (i; i < html.length; i++) {
+      if (html.charAt(i) === ">") {
+        break;
+      }
+      if (html.charAt(i) === "=") {
+        let isId = html.slice(i - 3, i) === " id";
         i++;
-        for (i; i < html.length; i++) {
-          if (endingTagNameChars.has(html.charAt(i))) {
-            break;
+        let char = html.charAt(i);
+        if (quoteChars.has(char)) {
+          let attrStartsAt = i;
+          i++;
+          for (i; i < html.length; i++) {
+            if (html.charAt(i) === char) {
+              break;
+            }
           }
-        }
-        tagNameEndsAt = i;
-        tag = html.slice(iAtOpen + 1, tagNameEndsAt);
-        for (i; i < html.length; i++) {
-          if (html.charAt(i) === ">") {
+          if (isId) {
+            id = html.slice(attrStartsAt + 1, i);
             break;
           }
-          if (html.charAt(i) === "=") {
-            let isId = html.slice(i - 3, i) === " id";
-            i++;
-            let char2 = html.charAt(i);
-            if (quoteChars.has(char2)) {
-              let attrStartsAt = i;
-              i++;
-              for (i; i < html.length; i++) {
-                if (html.charAt(i) === char2) {
-                  break;
-                }
-              }
-              if (isId) {
-                id = html.slice(attrStartsAt + 1, i);
-                break;
-              }
-            }
-          }
         }
-        break;
-      } else {
-        i++;
       }
     }
-    if (!tag) {
-      throw new Error(`malformed html ${html}`);
-    }
     let closeAt = html.length - 1;
     insideComment = false;
     while (closeAt >= beforeTag.length + tag.length) {
@@ -2263,6 +2360,11 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
     getComponent(diff, cid) {
       return diff[COMPONENTS][cid];
     }
+    resetRender(cid) {
+      if (this.rendered[COMPONENTS][cid]) {
+        this.rendered[COMPONENTS][cid].reset = true;
+      }
+    }
     mergeDiff(diff) {
       let newc = diff[COMPONENTS];
       let cache = {};
@@ -2390,8 +2492,8 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       if (isRoot) {
         let skip = false;
         let attrs;
-        if (changeTracking || Object.keys(rootAttrs).length > 0) {
-          skip = !rendered.newRender;
+        if (changeTracking || rendered.magicId) {
+          skip = changeTracking && !rendered.newRender;
           attrs = __spreadValues({ [PHX_MAGIC_ID]: rendered.magicId }, rootAttrs);
         } else {
           attrs = rootAttrs;
@@ -2441,8 +2543,9 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       let skip = onlyCids && !onlyCids.has(cid);
       component.newRender = !skip;
       component.magicId = `${this.parentViewId()}-c-${cid}`;
-      let changeTracking = true;
+      let changeTracking = !component.reset;
       let [html, streams] = this.recursiveToString(component, components, onlyCids, changeTracking, attrs);
+      delete component.reset;
       return [html, streams];
     }
   };
@@ -2526,6 +2629,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
 
   // js/phoenix_live_view/js.js
   var focusStack = null;
+  var default_transition_time = 200;
   var JS = {
     exec(eventType, phxEvent, view, sourceEl, defaults) {
       let [defaultKind, defaultArgs] = defaults || [null, { callback: defaults && defaults.callback }];
@@ -2547,7 +2651,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       const rect = el.getBoundingClientRect();
       return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
     },
-    exec_exec(eventType, phxEvent, view, sourceEl, el, [attr, to]) {
+    exec_exec(eventType, phxEvent, view, sourceEl, el, { attr, to }) {
       let nodes = to ? dom_default.all(document, to) : [sourceEl];
       nodes.forEach((node) => {
         let encodedJS = node.getAttribute(attr);
@@ -2563,14 +2667,14 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       dom_default.dispatchEvent(el, event, { detail, bubbles });
     },
     exec_push(eventType, phxEvent, view, sourceEl, el, args) {
-      if (!view.isConnected()) {
-        return;
-      }
       let { event, data, target, page_loading, loading, value, dispatcher, callback } = args;
       let pushOpts = { loading, value, target, page_loading: !!page_loading };
       let targetSrc = eventType === "change" && dispatcher ? dispatcher : sourceEl;
       let phxTarget = target || targetSrc.getAttribute(view.binding("target")) || targetSrc;
       view.withinTargets(phxTarget, (targetView, targetCtx) => {
+        if (!targetView.isConnected()) {
+          return;
+        }
         if (eventType === "change") {
           let { newCid, _target } = args;
           _target = _target || (dom_default.isFormInput(sourceEl) ? sourceEl.name : void 0);
@@ -2615,6 +2719,24 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
     exec_remove_class(eventType, phxEvent, view, sourceEl, el, { names, transition, time }) {
       this.addOrRemoveClasses(el, [], names, transition, time, view);
     },
+    exec_toggle_class(eventType, phxEvent, view, sourceEl, el, { to, names, transition, time }) {
+      this.toggleClasses(el, names, transition, view);
+    },
+    exec_toggle_attr(eventType, phxEvent, view, sourceEl, el, { attr: [attr, val1, val2] }) {
+      if (el.hasAttribute(attr)) {
+        if (val2 !== void 0) {
+          if (el.getAttribute(attr) === val1) {
+            this.setOrRemoveAttrs(el, [[attr, val2]], []);
+          } else {
+            this.setOrRemoveAttrs(el, [[attr, val1]], []);
+          }
+        } else {
+          this.setOrRemoveAttrs(el, [], [attr]);
+        }
+      } else {
+        this.setOrRemoveAttrs(el, [[attr, val1]], []);
+      }
+    },
     exec_transition(eventType, phxEvent, view, sourceEl, el, { time, transition }) {
       this.addOrRemoveClasses(el, [], [], transition, time, view);
     },
@@ -2644,6 +2766,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       }
     },
     toggle(eventType, view, el, display, ins, outs, time) {
+      time = time || default_transition_time;
       let [inClasses, inStartClasses, inEndClasses] = ins || [[], [], []];
       let [outClasses, outStartClasses, outEndClasses] = outs || [[], [], []];
       if (inClasses.length > 0 || outClasses.length > 0) {
@@ -2697,7 +2820,16 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         }
       }
     },
+    toggleClasses(el, classes, transition, time, view) {
+      window.requestAnimationFrame(() => {
+        let [prevAdds, prevRemoves] = dom_default.getSticky(el, "classes", [[], []]);
+        let newAdds = classes.filter((name) => prevAdds.indexOf(name) < 0 && !el.classList.contains(name));
+        let newRemoves = classes.filter((name) => prevRemoves.indexOf(name) < 0 && el.classList.contains(name));
+        this.addOrRemoveClasses(el, newAdds, newRemoves, transition, time, view);
+      });
+    },
     addOrRemoveClasses(el, adds, removes, transition, time, view) {
+      time = time || default_transition_time;
       let [transitionRun, transitionStart, transitionEnd] = transition || [[], [], []];
       if (transitionRun.length > 0) {
         let onStart = () => {
@@ -2751,24 +2883,37 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
 
   // js/phoenix_live_view/view.js
   var serializeForm = (form, metadata, onlyNames = []) => {
-    let _a = metadata, { submitter } = _a, meta = __objRest(_a, ["submitter"]);
-    let formData = new FormData(form);
-    if (submitter && submitter.hasAttribute("name") && submitter.form && submitter.form === form) {
-      formData.append(submitter.name, submitter.value);
-    }
-    let toRemove = [];
+    const _a = metadata, { submitter } = _a, meta = __objRest(_a, ["submitter"]);
+    let injectedElement;
+    if (submitter && submitter.name) {
+      const input = document.createElement("input");
+      input.type = "hidden";
+      const formId = submitter.getAttribute("form");
+      if (formId) {
+        input.setAttribute("form", form);
+      }
+      input.name = submitter.name;
+      input.value = submitter.value;
+      submitter.parentElement.insertBefore(input, submitter);
+      injectedElement = input;
+    }
+    const formData = new FormData(form);
+    const toRemove = [];
     formData.forEach((val, key, _index) => {
       if (val instanceof File) {
         toRemove.push(key);
       }
     });
     toRemove.forEach((key) => formData.delete(key));
-    let params = new URLSearchParams();
+    const params = new URLSearchParams();
     for (let [key, val] of formData.entries()) {
       if (onlyNames.length === 0 || onlyNames.indexOf(key) >= 0) {
         params.append(key, val);
       }
     }
+    if (submitter && injectedElement) {
+      submitter.parentElement.removeChild(injectedElement);
+    }
     for (let metaKey in meta) {
       params.append(metaKey, meta[metaKey]);
     }
@@ -2972,6 +3117,9 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         if (phxStatic) {
           toEl.setAttribute(PHX_STATIC, phxStatic);
         }
+        if (fromEl) {
+          fromEl.setAttribute(PHX_ROOT_ID, this.root.id);
+        }
         return this.joinChild(toEl);
       });
       if (newChildren.length === 0) {
@@ -3051,6 +3199,9 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       let updatedHookIds = new Set();
       patch.after("added", (el) => {
         this.liveSocket.triggerDOM("onNodeAdded", [el]);
+        let phxViewportTop = this.binding(PHX_VIEWPORT_TOP);
+        let phxViewportBottom = this.binding(PHX_VIEWPORT_BOTTOM);
+        dom_default.maybeAddPrivateHooks(el, phxViewportTop, phxViewportBottom);
         this.maybeAddNewHook(el);
         if (el.getAttribute) {
           this.maybeMounted(el);
@@ -3427,10 +3578,11 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       }
       dom_default.all(document, `[${PHX_REF_SRC}="${this.id}"][${PHX_REF}="${ref}"]`, (el) => {
         let disabledVal = el.getAttribute(PHX_DISABLED);
+        let readOnlyVal = el.getAttribute(PHX_READONLY);
         el.removeAttribute(PHX_REF);
         el.removeAttribute(PHX_REF_SRC);
-        if (el.getAttribute(PHX_READONLY) !== null) {
-          el.readOnly = false;
+        if (readOnlyVal !== null) {
+          el.readOnly = readOnlyVal === "true" ? true : false;
           el.removeAttribute(PHX_READONLY);
         }
         if (disabledVal !== null) {
@@ -3472,6 +3624,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
           if (disableText !== "") {
             el.innerText = disableText;
           }
+          el.setAttribute(PHX_DISABLED, el.getAttribute(PHX_DISABLED) || el.disabled);
           el.setAttribute("disabled", "");
         }
       });
@@ -3573,6 +3726,9 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       let refGenerator = () => this.putRef([inputEl, inputEl.form], "change", opts);
       let formData;
       let meta = this.extractMeta(inputEl.form);
+      if (inputEl instanceof HTMLButtonElement) {
+        meta.submitter = inputEl;
+      }
       if (inputEl.getAttribute(this.binding("change"))) {
         formData = serializeForm(inputEl.form, __spreadValues({ _target: opts._target }, meta), [inputEl.name]);
       } else {
@@ -3597,6 +3753,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
             this.uploadFiles(inputEl.form, targetCtx, ref, cid, (_uploads) => {
               callback && callback(resp);
               this.triggerAwaitingSubmit(inputEl.form);
+              this.undoRefs(ref);
             });
           }
         } else {
@@ -3795,7 +3952,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       let template = document.createElement("template");
       template.innerHTML = html;
       return dom_default.all(this.el, `form[${phxChange}]`).filter((form) => form.id && this.ownsElement(form)).filter((form) => form.elements.length > 0).filter((form) => form.getAttribute(this.binding(PHX_AUTO_RECOVER)) !== "ignore").map((form) => {
-        const phxChangeValue = form.getAttribute(phxChange).replaceAll(/([\[\]"])/g, "\\$1");
+        const phxChangeValue = CSS.escape(form.getAttribute(phxChange));
         let newForm = template.content.querySelector(`form[id="${form.id}"][${phxChange}="${phxChangeValue}"]`);
         if (newForm) {
           return [form, newForm, this.targetComponentID(newForm)];
@@ -3805,18 +3962,19 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       }).filter(([form, newForm, newCid]) => newForm);
     }
     maybePushComponentsDestroyed(destroyedCIDs) {
-      let willDestroyCIDs = destroyedCIDs.filter((cid) => {
+      let willDestroyCIDs = destroyedCIDs.concat(this.pruningCIDs).filter((cid) => {
         return dom_default.findComponentNodeList(this.el, cid).length === 0;
       });
+      this.pruningCIDs = willDestroyCIDs.concat([]);
       if (willDestroyCIDs.length > 0) {
-        this.pruningCIDs.push(...willDestroyCIDs);
+        willDestroyCIDs.forEach((cid) => this.rendered.resetRender(cid));
         this.pushWithReply(null, "cids_will_destroy", { cids: willDestroyCIDs }, () => {
-          this.pruningCIDs = this.pruningCIDs.filter((cid) => willDestroyCIDs.indexOf(cid) !== -1);
           let completelyDestroyCIDs = willDestroyCIDs.filter((cid) => {
             return dom_default.findComponentNodeList(this.el, cid).length === 0;
           });
           if (completelyDestroyCIDs.length > 0) {
             this.pushWithReply(null, "cids_destroyed", { cids: completelyDestroyCIDs }, (resp) => {
+              this.pruningCIDs = this.pruningCIDs.filter((cid) => resp.cids.indexOf(cid) === -1);
               this.rendered.pruneCIDs(resp.cids);
             });
           }
@@ -4132,22 +4290,26 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       this.main.destroy();
       this.main = this.newRootView(newMainEl, flash, liveReferer);
       this.main.setRedirect(href);
-      this.transitionRemoves();
+      this.transitionRemoves(null, true);
       this.main.join((joinCount, onDone) => {
         if (joinCount === 1 && this.commitPendingLink(linkRef)) {
           this.requestDOMUpdate(() => {
             dom_default.findPhxSticky(document).forEach((el) => newMainEl.appendChild(el));
             this.outgoingMainEl.replaceWith(newMainEl);
             this.outgoingMainEl = null;
-            callback && requestAnimationFrame(() => callback(linkRef));
+            callback && callback(linkRef);
             onDone();
           });
         }
       });
     }
-    transitionRemoves(elements) {
+    transitionRemoves(elements, skipSticky) {
       let removeAttr = this.binding("remove");
       elements = elements || dom_default.all(document, `[${removeAttr}]`);
+      if (skipSticky) {
+        const stickies = dom_default.findPhxSticky(document) || [];
+        elements = elements.filter((el) => !dom_default.isChildOfAny(el, stickies));
+      }
       elements.forEach((el) => {
         this.execJS(el, el.getAttribute(removeAttr), "remove");
       });
@@ -4363,6 +4525,8 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         if (capture) {
           target = e.target.matches(`[${click}]`) ? e.target : e.target.querySelector(`[${click}]`);
         } else {
+          if (e.detail === 0)
+            this.clickStartedAtTarget = e.target;
           let clickStartedAtTarget = this.clickStartedAtTarget || e.target;
           target = closestPhxBinding(clickStartedAtTarget, click);
           this.dispatchClickAway(e, clickStartedAtTarget);
@@ -4392,7 +4556,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       let phxClickAway = this.binding("click-away");
       dom_default.all(document, `[${phxClickAway}]`, (el) => {
         if (!(el.isSameNode(clickStartedAt) || el.contains(clickStartedAt))) {
-          this.withinOwners(e.target, (view) => {
+          this.withinOwners(el, (view) => {
             let phxEvent = el.getAttribute(phxClickAway);
             if (js_default.isVisible(el) && js_default.isInViewport(el)) {
               js_default.exec("click", phxEvent, view, el, ["push", { data: this.eventMeta("click", e, e.target) }]);
@@ -4484,7 +4648,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       return callback ? callback(done) : done;
     }
     pushHistoryPatch(href, linkState, targetEl) {
-      if (!this.isConnected()) {
+      if (!this.isConnected() || !this.main.isMain()) {
         return browser_default.redirect(href);
       }
       this.withPageLoading({ to: href, kind: "patch" }, (done) => {
@@ -4503,7 +4667,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
       this.registerNewLocation(window.location);
     }
     historyRedirect(href, linkState, flash) {
-      if (!this.isConnected()) {
+      if (!this.isConnected() || !this.main.isMain()) {
         return browser_default.redirect(href, flash);
       }
       if (/^\/$|^\/[^\/]+.*$/.test(href)) {
@@ -4604,9 +4768,11 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         let form = e.target;
         dom_default.resetForm(form, this.binding(PHX_FEEDBACK_FOR));
         let input = Array.from(form.elements).find((el) => el.type === "reset");
-        window.requestAnimationFrame(() => {
-          input.dispatchEvent(new Event("input", { bubbles: true, cancelable: false }));
-        });
+        if (input) {
+          window.requestAnimationFrame(() => {
+            input.dispatchEvent(new Event("input", { bubbles: true, cancelable: false }));
+          });
+        }
       });
     }
     debounce(el, event, eventType, callback) {