plutonium 0.54.0 → 0.56.0

data/app/assets/plutonium.js

@@ -11479,8 +11479,7 @@
       e4.preventDefault();
       const content = this.templateTarget.innerHTML.replace(/NEW_RECORD/g, (/* @__PURE__ */ new Date()).getTime().toString());
       this.targetTarget.insertAdjacentHTML("beforebegin", content);
-      const event = new CustomEvent("nested-resource-form-fields:add", { bubbles: true });
-      this.element.dispatchEvent(event);
+      this.dispatch("add");
       this.updateState();
     }
     remove(e4) {
@@ -11489,15 +11488,29 @@
       if (wrapper.dataset.newRecord !== void 0) {
         wrapper.remove();
       } else {
-        wrapper.style.display = "none";
-        wrapper.classList.remove(...wrapper.classList);
-        const input = wrapper.querySelector("input[name*='_destroy']");
-        input.value = "1";
+        this.toggleRemoved(wrapper, true);
       }
-      const event = new CustomEvent("nested-resource-form-fields:remove", { bubbles: true });
-      this.element.dispatchEvent(event);
+      this.dispatch("remove");
       this.updateState();
     }
+    restore(e4) {
+      e4.preventDefault();
+      const wrapper = e4.target.closest(this.wrapperSelectorValue);
+      this.toggleRemoved(wrapper, false);
+      this.dispatch("restore");
+      this.updateState();
+    }
+    // Collapse a persisted row to its "Removed" bar (or expand it back), keeping
+    // the `_destroy` flag and the removed-state marker in sync.
+    toggleRemoved(wrapper, removed) {
+      wrapper.toggleAttribute("data-removed", removed);
+      const content = wrapper.querySelector(":scope > [data-nested-content]");
+      const removedBar = wrapper.querySelector(":scope > [data-nested-removed]");
+      if (content) content.hidden = removed;
+      if (removedBar) removedBar.hidden = !removed;
+      const destroyInput = wrapper.querySelector("input[name*='_destroy']");
+      if (destroyInput) destroyInput.value = removed ? "1" : "0";
+    }
     updateState() {
       if (!this.hasAddButtonTarget || this.limitValue == 0) return;
       if (this.childCount >= this.limitValue)
@@ -11505,8 +11518,27 @@
       else
         this.addButtonTarget.style.display = "initial";
     }
+    // Removed rows keep their wrapper (so they can be restored) but are excluded
+    // from the count so the limit reflects rows that will actually be saved.
     get childCount() {
-      return this.element.querySelectorAll(this.wrapperSelectorValue).length;
+      return this.element.querySelectorAll(`${this.wrapperSelectorValue}:not([data-removed])`).length;
+    }
+  };
+
+  // src/js/controllers/structured_input_row_controller.js
+  var structured_input_row_controller_default = class extends Controller {
+    static targets = ["content", "removed"];
+    remove(e4) {
+      e4.preventDefault();
+      this.contentTarget.disabled = true;
+      this.contentTarget.hidden = true;
+      this.removedTarget.hidden = false;
+    }
+    restore(e4) {
+      e4.preventDefault();
+      this.contentTarget.disabled = false;
+      this.contentTarget.hidden = false;
+      this.removedTarget.hidden = true;
     }
   };
 
@@ -13007,7 +13039,9 @@
     }
     init() {
       if (this.triggerTarget && this.menuTarget && !this.initialized) {
-        this.popperInstance = createPopper(this.triggerTarget, this.menuTarget, {
+        this.menu = this.menuTarget;
+        this.menuHome = { parent: this.menu.parentNode, next: this.menu.nextSibling };
+        this.popperInstance = createPopper(this.triggerTarget, this.menu, {
           strategy: "fixed",
           placement: this.options.placement,
           modifiers: [
@@ -13045,15 +13079,35 @@
         }
         if (this.options.triggerType === "hover") {
           this.triggerTarget.removeEventListener("mouseenter", this.hoverShowTriggerHandler);
-          this.menuTarget.removeEventListener("mouseenter", this.hoverShowMenuHandler);
+          this.menu.removeEventListener("mouseenter", this.hoverShowMenuHandler);
           this.triggerTarget.removeEventListener("mouseleave", this.hoverHideHandler);
-          this.menuTarget.removeEventListener("mouseleave", this.hoverHideHandler);
+          this.menu.removeEventListener("mouseleave", this.hoverHideHandler);
         }
         this.removeClickOutsideListener();
+        this.restoreMenu();
+        if (this.menu.parentNode === document.body) {
+          this.menu.remove();
+        }
         this.popperInstance.destroy();
         this.initialized = false;
       }
     }
+    // Move the menu to <body> so no ancestor's overflow + containing-block
+    // (transform/filter/will-change) can clip it. popper's 'fixed' strategy
+    // positions relative to the viewport, but painting is still clipped by a
+    // transformed, overflow-hidden ancestor (e.g. grid cards) — teleporting
+    // sidesteps that entirely.
+    teleportMenu() {
+      if (this.menu.parentNode !== document.body) {
+        document.body.appendChild(this.menu);
+      }
+    }
+    restoreMenu() {
+      const home = this.menuHome;
+      if (home && home.parent && home.parent.isConnected && this.menu.parentNode !== home.parent) {
+        home.parent.insertBefore(this.menu, home.next);
+      }
+    }
     setupEventListeners() {
       this.clickHandler = this.toggle.bind(this);
       this.hoverShowTriggerHandler = (ev) => {
@@ -13070,7 +13124,7 @@
       };
       this.hoverHideHandler = () => {
         setTimeout(() => {
-          if (!this.menuTarget.matches(":hover")) {
+          if (!this.menu.matches(":hover")) {
             this.hide();
           }
         }, this.options.delay);
@@ -13079,9 +13133,9 @@
         this.triggerTarget.addEventListener("click", this.clickHandler);
       } else if (this.options.triggerType === "hover") {
         this.triggerTarget.addEventListener("mouseenter", this.hoverShowTriggerHandler);
-        this.menuTarget.addEventListener("mouseenter", this.hoverShowMenuHandler);
+        this.menu.addEventListener("mouseenter", this.hoverShowMenuHandler);
         this.triggerTarget.addEventListener("mouseleave", this.hoverHideHandler);
-        this.menuTarget.addEventListener("mouseleave", this.hoverHideHandler);
+        this.menu.addEventListener("mouseleave", this.hoverHideHandler);
       }
     }
     setupClickOutsideListener() {
@@ -13099,7 +13153,7 @@
           });
         }
         const isFloatingUI = clickedEl.closest(".flatpickr-calendar, .ss-main, .ss-content");
-        if (clickedEl !== this.menuTarget && !this.menuTarget.contains(clickedEl) && !this.triggerTarget.contains(clickedEl) && !isIgnored && !isFloatingUI && this.visible) {
+        if (clickedEl !== this.menu && !this.menu.contains(clickedEl) && !this.triggerTarget.contains(clickedEl) && !isIgnored && !isFloatingUI && this.visible) {
           this.hide();
         }
       };
@@ -13118,9 +13172,10 @@
       }
     }
     show() {
-      this.menuTarget.classList.remove("hidden");
-      this.menuTarget.classList.add("block");
-      this.menuTarget.removeAttribute("aria-hidden");
+      this.teleportMenu();
+      this.menu.classList.remove("hidden");
+      this.menu.classList.add("block");
+      this.menu.removeAttribute("aria-hidden");
       this.popperInstance.setOptions((options2) => ({
         ...options2,
         modifiers: [
@@ -13133,9 +13188,9 @@
       this.visible = true;
     }
     hide() {
-      this.menuTarget.classList.remove("block");
-      this.menuTarget.classList.add("hidden");
-      this.menuTarget.setAttribute("aria-hidden", "true");
+      this.menu.classList.remove("block");
+      this.menu.classList.add("hidden");
+      this.menu.setAttribute("aria-hidden", "true");
       this.popperInstance.setOptions((options2) => ({
         ...options2,
         modifiers: [
@@ -13144,6 +13199,7 @@
         ]
       }));
       this.removeClickOutsideListener();
+      this.restoreMenu();
       this.visible = false;
     }
   };
@@ -28181,20 +28237,34 @@ this.ifd0Offset: ${this.ifd0Offset}, file.byteLength: ${e4.byteLength}`), e4.tif
   // src/js/controllers/dirty_form_guard_controller.js
   var dirty_form_guard_controller_default = class extends Controller {
     static targets = ["confirmDialog"];
-    // Set by controllers, not the user — comparing them would flag
-    // every form as dirty on connect (return_to) or on submit (pre_submit).
+    // Set by controllers, not the user — they're already present (or absent)
+    // when the baseline is taken, so they never contribute to the diff; listed
+    // for safety against a controller writing them mid-edit.
     static IGNORED_KEYS = /* @__PURE__ */ new Set(["authenticity_token", "return_to", "pre_submit"]);
+    // Keys that move focus or dismiss the dialog rather than edit it — they
+    // must not, on their own, baseline the form.
+    static NON_EDITING_KEYS = /* @__PURE__ */ new Set([
+      "Tab",
+      "Escape",
+      "Shift",
+      "Control",
+      "Alt",
+      "Meta"
+    ]);
     connect() {
       this.dialog = this.element.closest("dialog");
       if (!this.dialog) return;
-      this.snapshot = this.#serialize();
+      this.baseline = null;
       this.forceClose = false;
       this.submitting = false;
+      this.onFirstIntent = this.#onFirstIntent.bind(this);
       this.onCancel = this.#onCancel.bind(this);
       this.onSubmit = this.#onSubmit.bind(this);
       this.onCloseButtonClick = this.#onCloseButtonClick.bind(this);
       this.onConfirmCancel = this.#onConfirmCancel.bind(this);
       this.onKeydown = this.#onKeydown.bind(this);
+      this.element.addEventListener("pointerdown", this.onFirstIntent, true);
+      this.element.addEventListener("keydown", this.onFirstIntent, true);
       document.addEventListener("keydown", this.onKeydown, true);
       this.dialog.addEventListener("cancel", this.onCancel, true);
       this.element.addEventListener("submit", this.onSubmit);
@@ -28207,6 +28277,8 @@ this.ifd0Offset: ${this.ifd0Offset}, file.byteLength: ${e4.byteLength}`), e4.tif
     }
     disconnect() {
       if (!this.dialog) return;
+      this.element.removeEventListener("pointerdown", this.onFirstIntent, true);
+      this.element.removeEventListener("keydown", this.onFirstIntent, true);
       document.removeEventListener("keydown", this.onKeydown, true);
       this.dialog.removeEventListener("cancel", this.onCancel, true);
       this.element.removeEventListener("submit", this.onSubmit);
@@ -28229,6 +28301,16 @@ this.ifd0Offset: ${this.ifd0Offset}, file.byteLength: ${e4.byteLength}`), e4.tif
       if (!this.dialog) return [];
       return this.dialog.querySelectorAll('[data-action~="remote-modal#close"]');
     }
+    // Capture the baseline the first time the user really touches the form —
+    // a trusted pointer or editing keystroke. The form has rendered (so widgets
+    // have settled) and the event fires before the value changes, so this is
+    // the settled, pre-edit state. Runs once; later interactions are no-ops.
+    #onFirstIntent(event) {
+      if (this.baseline != null) return;
+      if (!event.isTrusted) return;
+      if (event.type === "keydown" && this.constructor.NON_EDITING_KEYS.has(event.key)) return;
+      this.baseline = this.#serialize();
+    }
     #serialize() {
       const data = new FormData(this.element);
       const enc = encodeURIComponent;
@@ -28237,8 +28319,11 @@ this.ifd0Offset: ${this.ifd0Offset}, file.byteLength: ${e4.byteLength}`), e4.tif
         return `${enc(key)}=${enc(v4)}`;
       }).sort().join("&");
     }
+    // No interaction → no baseline → never dirty. Otherwise dirty iff the form
+    // now serializes differently than it did at first touch (so an edit reverted
+    // to its original value reads as clean).
     #isDirty() {
-      return this.#serialize() !== this.snapshot;
+      return this.baseline != null && this.#serialize() !== this.baseline;
     }
     #onSubmit() {
       this.submitting = true;
@@ -28318,6 +28403,7 @@ this.ifd0Offset: ${this.ifd0Offset}, file.byteLength: ${e4.byteLength}`), e4.tif
     application2.register("sidebar", sidebar_controller_default);
     application2.register("resource-header", resource_header_controller_default);
     application2.register("nested-resource-form-fields", nested_resource_form_fields_controller_default);
+    application2.register("structured-input-row", structured_input_row_controller_default);
     application2.register("form", form_controller_default);
     application2.register("resource-drop-down", resource_drop_down_controller_default);
     application2.register("resource-collapse", resource_collapse_controller_default);