phoenix_live_view 0.20.2 → 0.20.4

package/priv/static/phoenix_live_view.cjs.js

@@ -24,7 +24,8 @@ var PHX_EVENT_CLASSES = [
   "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";
@@ -56,6 +57,7 @@ var PHX_VIEWPORT_TOP = "viewport-top";
 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"];
@@ -311,7 +313,9 @@ var DOM = {
     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);
@@ -505,7 +509,9 @@ var DOM = {
           });
         }
         if (this.once(el, "bind-debounce")) {
-          el.addEventListener("blur", () => this.triggerCycle(el, DEBOUNCE_TRIGGER));
+          el.addEventListener("blur", () => {
+            callback();
+          });
         }
     }
   },
@@ -538,16 +544,39 @@ var DOM = {
       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));
@@ -578,11 +607,19 @@ var DOM = {
   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);
@@ -597,20 +634,27 @@ var DOM = {
     }
   },
   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 {
@@ -634,6 +678,9 @@ var DOM = {
     return el.setSelectionRange && (el.type === "text" || el.type === "textarea");
   },
   restoreFocus(focused, selectionStart, selectionEnd) {
+    if (focused instanceof HTMLSelectElement) {
+      focused.focus();
+    }
     if (!DOM.isTextualInput(focused)) {
       return;
     }
@@ -757,15 +804,22 @@ var dom_default = DOM;
 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;
@@ -932,12 +986,16 @@ var LiveUploader = class {
     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() {
@@ -1078,23 +1136,50 @@ var Hooks = {
     }
   }
 };
-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;
@@ -1108,22 +1193,26 @@ Hooks.InfiniteScroll = {
       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();
@@ -1141,17 +1230,25 @@ Hooks.InfiniteScroll = {
       } 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;
@@ -1598,6 +1695,7 @@ function morphdomFactory(morphAttrs2) {
                           removeNode(curFromNodeChild, fromEl, true);
                         }
                         curFromNodeChild = matchingFromEl;
+                        curFromNodeKey = getNodeKey(curFromNodeChild);
                       }
                     } else {
                       isCompatible = false;
@@ -1730,6 +1828,7 @@ var DOMPatch = class {
     this.html = html;
     this.streams = streams;
     this.streamInserts = {};
+    this.streamComponentRestore = {};
     this.targetCID = targetCID;
     this.cidPatch = isCid(this.targetCID);
     this.pendingRemoves = [];
@@ -1759,7 +1858,6 @@ var DOMPatch = class {
   }
   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, "");
     });
@@ -1774,12 +1872,13 @@ var DOMPatch = class {
     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;
@@ -1787,16 +1886,12 @@ var DOMPatch = class {
     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) => {
@@ -1806,6 +1901,17 @@ var DOMPatch = class {
           }
         });
       });
+      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) => {
@@ -1821,11 +1927,17 @@ var DOMPatch = class {
           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) {
@@ -1834,18 +1946,6 @@ var DOMPatch = class {
             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);
@@ -1854,7 +1954,7 @@ var DOMPatch = class {
         },
         onNodeAdded: (el) => {
           if (el.getAttribute) {
-            this.maybeReOrderStream(el);
+            this.maybeReOrderStream(el, true);
           }
           if (el instanceof HTMLImageElement && el.srcset) {
             el.srcset = el.srcset;
@@ -1865,32 +1965,13 @@ var DOMPatch = class {
             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) {
@@ -1912,12 +1993,13 @@ var DOMPatch = class {
             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)) {
@@ -1953,22 +2035,26 @@ var DOMPatch = class {
           }
           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;
@@ -1984,7 +2070,7 @@ var DOMPatch = class {
         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));
@@ -2012,6 +2098,11 @@ var DOMPatch = class {
   }
   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);
     }
@@ -2020,12 +2111,18 @@ var DOMPatch = class {
     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) {
@@ -2042,6 +2139,16 @@ var DOMPatch = class {
         }
       }
     }
+    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;
@@ -2059,6 +2166,20 @@ var DOMPatch = class {
       });
     }
   }
+  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;
   }
@@ -2100,66 +2221,42 @@ var VOID_TAGS = new Set([
   "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) {
@@ -2234,6 +2331,11 @@ var Rendered = class {
   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 = {};
@@ -2361,8 +2463,8 @@ var Rendered = class {
     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 = { [PHX_MAGIC_ID]: rendered.magicId, ...rootAttrs };
       } else {
         attrs = rootAttrs;
@@ -2412,8 +2514,9 @@ var Rendered = class {
     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];
   }
 };
@@ -2497,6 +2600,7 @@ var ViewHook = class {
 
 // 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 }];
@@ -2518,7 +2622,7 @@ var JS = {
     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);
@@ -2534,14 +2638,14 @@ var JS = {
     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);
@@ -2586,6 +2690,24 @@ var JS = {
   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);
   },
@@ -2615,6 +2737,7 @@ var JS = {
     }
   },
   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) {
@@ -2668,7 +2791,16 @@ var JS = {
       }
     }
   },
+  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 = () => {
@@ -2722,24 +2854,37 @@ var js_default = JS;
 
 // js/phoenix_live_view/view.js
 var serializeForm = (form, metadata, onlyNames = []) => {
-  let { submitter, ...meta } = metadata;
-  let formData = new FormData(form);
-  if (submitter && submitter.hasAttribute("name") && submitter.form && submitter.form === form) {
-    formData.append(submitter.name, submitter.value);
-  }
-  let toRemove = [];
+  const { submitter, ...meta } = metadata;
+  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]);
   }
@@ -2943,6 +3088,9 @@ var View = class {
       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) {
@@ -3022,6 +3170,9 @@ var View = class {
     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);
@@ -3398,10 +3549,11 @@ var View = class {
     }
     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) {
@@ -3443,6 +3595,7 @@ var View = class {
         if (disableText !== "") {
           el.innerText = disableText;
         }
+        el.setAttribute(PHX_DISABLED, el.getAttribute(PHX_DISABLED) || el.disabled);
         el.setAttribute("disabled", "");
       }
     });
@@ -3544,6 +3697,9 @@ var View = class {
     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, { _target: opts._target, ...meta }, [inputEl.name]);
     } else {
@@ -3568,6 +3724,7 @@ var View = class {
           this.uploadFiles(inputEl.form, targetCtx, ref, cid, (_uploads) => {
             callback && callback(resp);
             this.triggerAwaitingSubmit(inputEl.form);
+            this.undoRefs(ref);
           });
         }
       } else {
@@ -3766,7 +3923,7 @@ var View = class {
     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)];
@@ -3776,18 +3933,19 @@ var View = class {
     }).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);
           });
         }
@@ -4103,22 +4261,26 @@ var LiveSocket = class {
     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");
     });
@@ -4334,6 +4496,8 @@ var LiveSocket = class {
       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);
@@ -4363,7 +4527,7 @@ var LiveSocket = class {
     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) }]);
@@ -4455,7 +4619,7 @@ var LiveSocket = class {
     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) => {
@@ -4474,7 +4638,7 @@ var LiveSocket = class {
     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)) {
@@ -4575,9 +4739,11 @@ var LiveSocket = class {
       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) {