modal_stack 0.4.1 → 0.4.3

data/app/javascript/modal_stack/state.js

@@ -371,11 +371,13 @@ export function pop(state) {
   const newTop = newLayers[newLayers.length - 1] ?? null;
   const commands = [];
   if (newTop) {
+    // Persist early so a page reload during the animation restores the
+    // correct (already-popped) stack rather than the stale one.
+    commands.push({ type: "persistSnapshot" });
     commands.push({ type: "unmountTopLayer" });
     commands.push({ type: "clearFrameCache", layerId: popped.id });
     commands.push({ type: "historyBack", n: framesToWalkBack });
     commands.push({ type: "inertLayer", layerId: newTop.id, value: false });
-    commands.push({ type: "persistSnapshot" });
   } else {
     // closeDialog first so the dialog's exit transition (opacity +
     // backdrop background + display/overlay allow-discrete) starts
@@ -385,11 +387,13 @@ export function pop(state) {
     // fade kicks in for *another* 220ms — visually the backdrop fades
     // after the modal is gone.
     commands.push({ type: "closeDialog" });
+    // Clear early so a page reload during the animation does not restore
+    // the modal that is already being dismissed.
+    commands.push({ type: "clearSnapshot" });
     commands.push({ type: "unmountTopLayer" });
     commands.push({ type: "clearFrameCache", layerId: popped.id });
     commands.push({ type: "historyBack", n: framesToWalkBack });
     commands.push({ type: "unlockScroll" });
-    commands.push({ type: "clearSnapshot" });
   }
   return { state: { ...state, layers: newLayers }, commands };
 }
@@ -480,13 +484,15 @@ export function closeAll(state) {
     state: { ...state, layers: Object.freeze([]) },
     // closeDialog first so the dialog's exit transition runs in
     // parallel with the layers' [data-leaving] transitions.
+    // clearSnapshot comes before unmountAllLayers so a reload during
+    // the animation does not restore a stack that is already closing.
     commands: [
       { type: "closeDialog" },
+      { type: "clearSnapshot" },
       { type: "unmountAllLayers" },
       ...cacheClears,
       { type: "unlockScroll" },
       { type: "historyBack", n },
-      { type: "clearSnapshot" },
     ],
   };
 }
@@ -511,13 +517,13 @@ export function handlePopstate(state, { historyState, locationHref }) {
     }));
     return {
       state: { ...state, layers: Object.freeze([]) },
-      // closeDialog first — see closeAll() for rationale.
+      // closeDialog and clearSnapshot first — see closeAll() for rationale.
       commands: [
         { type: "closeDialog" },
+        { type: "clearSnapshot" },
         { type: "unmountAllLayers" },
         ...cacheClears,
         { type: "unlockScroll" },
-        { type: "clearSnapshot" },
       ],
     };
   }
@@ -532,10 +538,19 @@ export function handlePopstate(state, { historyState, locationHref }) {
     const newLayers = Object.freeze(state.layers.slice(0, targetDepth));
     const newTop = newLayers[newLayers.length - 1] ?? null;
     const commands = [];
-    // When popping back to the root via popstate, fire closeDialog
-    // first so the dialog's exit transition runs alongside the
-    // sequential unmountTopLayer cascade.
-    if (!newTop) commands.push({ type: "closeDialog" });
+    if (newTop) {
+      // Persist before animation so a reload during the transition
+      // restores the correct remaining stack.
+      commands.push({ type: "persistSnapshot" });
+    } else {
+      // When popping back to the root via popstate, fire closeDialog
+      // first so the dialog's exit transition runs alongside the
+      // sequential unmountTopLayer cascade.
+      commands.push({ type: "closeDialog" });
+      // Clear before animation so a reload during the transition does
+      // not restore the stack that is already being dismissed.
+      commands.push({ type: "clearSnapshot" });
+    }
     for (let i = 0; i < droppedLayers.length; i++) {
       commands.push({ type: "unmountTopLayer" });
     }
@@ -544,10 +559,8 @@ export function handlePopstate(state, { historyState, locationHref }) {
     }
     if (newTop) {
       commands.push({ type: "inertLayer", layerId: newTop.id, value: false });
-      commands.push({ type: "persistSnapshot" });
     } else {
       commands.push({ type: "unlockScroll" });
-      commands.push({ type: "clearSnapshot" });
     }
     return { state: { ...state, layers: newLayers }, commands };
   }

data/app/javascript/modal_stack/state.test.js

@@ -492,15 +492,15 @@ describe("pop", () => {
     const first = pushed(freshStack()).state;
     const { state, commands } = pop(first);
     expect(state.layers).toEqual([]);
-    // closeDialog comes first so its exit transition runs in parallel
-    // with the layer's [data-leaving] transition.
+    // closeDialog and clearSnapshot come first so a reload during the
+    // exit animation does not restore the modal that is already closing.
     expect(commands).toEqual([
       { type: "closeDialog" },
+      { type: "clearSnapshot" },
       { type: "unmountTopLayer" },
       { type: "clearFrameCache", layerId: "L1" },
       { type: "historyBack", n: 1 },
       { type: "unlockScroll" },
-      { type: "clearSnapshot" },
     ]);
   });
 
@@ -509,12 +509,14 @@ describe("pop", () => {
     s = push(s, { id: "L2", url: "/clients/new" }).state;
     const { state, commands } = pop(s);
     expect(state.layers).toHaveLength(1);
+    // persistSnapshot comes first so a reload during the animation
+    // restores the correct remaining stack (without the popped layer).
     expect(commands).toEqual([
+      { type: "persistSnapshot" },
       { type: "unmountTopLayer" },
       { type: "clearFrameCache", layerId: "L2" },
       { type: "historyBack", n: 1 },
       { type: "inertLayer", layerId: "L1", value: false },
-      { type: "persistSnapshot" },
     ]);
   });
 
@@ -526,11 +528,11 @@ describe("pop", () => {
     expect(state.layers).toEqual([]);
     expect(commands).toEqual([
       { type: "closeDialog" },
+      { type: "clearSnapshot" },
       { type: "unmountTopLayer" },
       { type: "clearFrameCache", layerId: "L1" },
       { type: "historyBack", n: 3 },
       { type: "unlockScroll" },
-      { type: "clearSnapshot" },
     ]);
   });
 });
@@ -658,13 +660,13 @@ describe("closeAll", () => {
     expect(state.layers).toEqual([]);
     expect(commands).toEqual([
       { type: "closeDialog" },
+      { type: "clearSnapshot" },
       { type: "unmountAllLayers" },
       { type: "clearFrameCache", layerId: "L1" },
       { type: "clearFrameCache", layerId: "L2" },
       { type: "clearFrameCache", layerId: "L3" },
       { type: "unlockScroll" },
       { type: "historyBack", n: 3 },
-      { type: "clearSnapshot" },
     ]);
   });
 
@@ -694,11 +696,11 @@ describe("handlePopstate", () => {
     expect(state.layers).toEqual([]);
     expect(commands).toEqual([
       { type: "closeDialog" },
+      { type: "clearSnapshot" },
       { type: "unmountAllLayers" },
       { type: "clearFrameCache", layerId: "L1" },
       { type: "clearFrameCache", layerId: "L2" },
       { type: "unlockScroll" },
-      { type: "clearSnapshot" },
     ]);
   });
 
@@ -718,10 +720,10 @@ describe("handlePopstate", () => {
     });
     expect(state.layers.map((l) => l.id)).toEqual(["L1"]);
     expect(commands).toEqual([
+      { type: "persistSnapshot" },
       { type: "unmountTopLayer" },
       { type: "clearFrameCache", layerId: "L2" },
       { type: "inertLayer", layerId: "L1", value: false },
-      { type: "persistSnapshot" },
     ]);
     expect(commands).not.toContainEqual({ type: "historyBack", n: 1 });
   });
@@ -735,12 +737,12 @@ describe("handlePopstate", () => {
     expect(state.layers).toEqual([]);
     expect(commands).toEqual([
       { type: "closeDialog" },
+      { type: "clearSnapshot" },
       { type: "unmountTopLayer" },
       { type: "unmountTopLayer" },
       { type: "clearFrameCache", layerId: "L1" },
       { type: "clearFrameCache", layerId: "L2" },
       { type: "unlockScroll" },
-      { type: "clearSnapshot" },
     ]);
   });
 

data/app/views/modal_stack/_panel.html.erb

@@ -1,4 +1,17 @@
 <%= content_tag(:div, wrapper_attrs) do %>
+  <% if local_assigns[:title].present? || local_assigns[:show_close] %>
+    <header class="modal-stack__panel-header">
+      <% if local_assigns[:title].present? %>
+        <h2 class="modal-stack__panel-title"><%= title %></h2>
+      <% end %>
+      <% if local_assigns[:show_close] %>
+        <button type="button"
+                class="modal-stack__panel-close"
+                data-action="click->modal-stack#pop"
+                aria-label="<%= I18n.t("modal_stack.close", default: "Close") %>">&#215;</button>
+      <% end %>
+    </header>
+  <% end %>
   <%= back_button %>
   <%= content %>
 <% end %>

data/lib/modal_stack/helpers/modal_stack_assets_helper.rb

@@ -39,6 +39,12 @@ module ModalStack
         data = existing.merge(controller: controllers)
         data[:modal_stack_max_depth_value] ||= config.max_depth if config.max_depth
         data[:modal_stack_max_depth_strategy_value] ||= config.max_depth_strategy.to_s
+        # Preserve dialog across Turbo Drive page-restores (which fire on
+        # popstate when the destination history entry was set by Turbo). Without
+        # this, the Stimulus controller disconnects mid-close, the runtime is
+        # rebuilt from scratch, and any in-flight state (animations, focused
+        # element, click-event propagation) is lost.
+        data[:turbo_permanent] = "" unless data.key?(:turbo_permanent)
         data
       end
 

data/lib/modal_stack/helpers/modal_stack_container_helper.rb

@@ -13,15 +13,18 @@ module ModalStack
       DEFAULT_SIZE = :md
 
       def modal_stack_container(size: DEFAULT_SIZE, dismissible: true, variant: :modal, side: nil, width: nil, height: nil,
-                                back: false, transition: nil, html: {}, &)
+                                back: false, transition: nil, html: {},
+                                title: nil, close_button: nil, &)
         attrs = build_panel_attrs(size: size, variant: variant, side: side,
                                   dismissible: dismissible, width: width,
                                   height: height, transition: transition, html: html)
         body = capture(&)
         back_html = back ? modal_stack_container_back_button : nil
+        show_close = close_button.nil? ? dismissible : close_button
 
         render partial: "modal_stack/panel", locals: {
           content: body, back_button: back_html, wrapper_attrs: attrs,
+          title: title, show_close: show_close,
           size: size, variant: variant, dismissible: dismissible,
           side: side, width: width, height: height, transition: transition
         }

data/lib/modal_stack/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ModalStack
-  VERSION = "0.4.1"
+  VERSION = "0.4.3"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: modal_stack
 version: !ruby/object:Gem::Version
-  version: 0.4.1
+  version: 0.4.3
 platform: ruby
 authors:
 - Florian Gagnaire
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2026-05-15 00:00:00.000000000 Z
+date: 2026-05-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties