ultimate_turbo_modal 3.0.5 → 3.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f50e8f99fb5d81b57e66ea6f46ee536d73ce52f4b637188450c044122b1d22a1
-  data.tar.gz: 9b9d701149f0d326c3d775d4efca7d875982bbd2a630049dc2b4672816b84536
+  metadata.gz: e94fa20d1e6e7f5cf6939cb0a346af7159673c25dc287c88eaf58b08f65aab8c
+  data.tar.gz: 95a8f4beb5bbe52a39bca43a905e2e3bb2723d21e49e719896a318cf6302fcc0
 SHA512:
-  metadata.gz: 2ddefb505bf8ce82a392f7338a74be53ec21c3bd70380234a6366d8662ceab4ee877c958cf676c3f7418f121981e32dab6ba10f6933bdd22fb524166e01b86a4
-  data.tar.gz: b752b7d73e1812cff76bdab0102a5f00491373b3d2688c1a1172207f681fd3a84ac42ae00ed636564bd9c6da7609385331edae0d9997ac373294bf66736ac24d
+  metadata.gz: b3acb970be04442953aff94efbbf9f422c36d979a9d54993b697074b853ed2fb801f73d963f82dd7523c93f65728f05a646642398b6531a41a197bb10c98de98
+  data.tar.gz: 52e151ca88edc805d9d7d450c9a14ca09d58b7b3bb6ffedbdb40d59b5ea43cd60e4da12d0af70cb5a1570b5479f41601ff06c9d909747374603cd73e7a2761a3

data/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [Unreleased]
+
+## [3.1.0] - 2026-05-01
+
+- Tweaked vertically centering of modals on desktop (≥640px) with a slight optical-center bias, instead of anchoring them near the top.
+- Added support for opening a modal from inside a drawer. See [docs/modal-from-drawer.md](docs/modal-from-drawer.md).
+- Fixed a race in `closeAllDialogs` when a stacked modal redirected off-page, which could leave a dialog open or animations in a bad state.
+
 ## [3.0.5] - 2026-04-22
 
 - Fixed modal being dismissed when a body-appended widget (e.g. flatpickr, Select2, Tippy) opens over its trigger between mousedown and mouseup. The browser fires `click` on the dialog (common ancestor), which was treated as a backdrop dismissal. The dialog now tracks mousedown origin and skips dismissal when the press started inside content.

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    ultimate_turbo_modal (3.0.5)
+    ultimate_turbo_modal (3.1.0)
       actionpack (>= 8.0)
       activesupport (>= 8.0)
       phlex-rails (>= 2.0)

data/README.md

@@ -203,6 +203,49 @@ Link to it the same way as a modal:
 | CSS string | Custom value, e.g. `"500px"` or `"50vw"` |
 
 
+## Opening a Modal from a Drawer
+
+You can open a regular modal that stacks on top of an open drawer. This is built in — no setup or opt-in required.
+
+Inside any drawer, link to a modal action with `data-turbo-frame="drawer-modal"`:
+
+```erb
+<%= drawer(title: "Notifications") do %>
+  <p>Activity list here…</p>
+  <%= link_to "Edit preferences",
+        edit_preferences_path,
+        data: { turbo_frame: "drawer-modal" } %>
+<% end %>
+```
+
+The destination is rendered with the same `modal()` helper you use elsewhere:
+
+```erb
+<%= modal(title: "Notification preferences") do %>
+  <p>Form here…</p>
+<% end %>
+```
+
+The gem detects the request and renders the modal into a stacked `<dialog>` that sits visually on top of the drawer.
+
+### Behavior
+
+- **ESC** closes the modal first, then the drawer (native top-layer behavior).
+- **Click outside** the modal closes the modal only; the drawer stays open.
+- **`turbo_stream.modal(:close)`** closes the topmost dialog (the modal).
+- **Form submission with same-page redirect** closes the modal smoothly; the drawer stays.
+- **Form submission with a different-page redirect** closes both dialogs, then navigates.
+- **Closing the drawer** (via close button, ESC after the modal closes, etc.) also tears down any modal opened from it.
+
+### Constraints
+
+- Modal-from-drawer only. You cannot open a drawer from inside a modal, and you cannot stack a modal on top of another modal. The `drawer-modal` frame is only rendered inside drawers.
+- Stacked modals always force `advance: false` (history is not pushed). All other modal options (overlay, padding, header, footer, etc.) work normally.
+- Both backdrops are drawn when both dialogs have `overlay: true`. Pass `overlay: false` to the inner modal if you don't want the drawer to look slightly darker while the modal is open.
+
+For a full lifecycle walkthrough and edge-case notes, see [docs/modal-from-drawer.md](docs/modal-from-drawer.md).
+
+
 ## Features and capabilities
 
 - Extremely easy to use

data/VERSION

@@ -1 +1 @@
-3.0.5
+3.1.0

data/lib/generators/ultimate_turbo_modal/templates/flavors/tailwind.rb

@@ -1,14 +1,19 @@
 # frozen_string_literal: true
 
 # Tailwind CSS v4
+#
+# Group selectors are scoped with the named groups `group/utmr-modal` and
+# `group/utmr-drawer` so that when a modal stacks on top of an open drawer,
+# the inner modal's transition styles don't pick up the outer drawer's
+# `data-entered` state (which would prevent the modal from animating out).
 module UltimateTurboModal::Flavors
   class Tailwind < UltimateTurboModal::Base
-    STYLES = "html:has(dialog#modal-container[open]) { overflow: hidden; }"
+    STYLES = "html:has(dialog#modal-container[open]), html:has(dialog#modal-container-stacked[open]) { overflow: hidden; }"
 
     # Modal constants
 
     MODAL_DIALOG_CLASSES = [
-      "group",
+      "group/utmr-modal",
       # Dialog reset
       "fixed inset-0 p-0 m-0 border-none bg-transparent",
       "max-w-[100vw] max-h-dvh w-full h-full overflow-y-auto",
@@ -21,23 +26,23 @@ module UltimateTurboModal::Flavors
     ].join(" ")
 
     MODAL_INNER_CLASSES = [
-      "flex min-h-full items-start justify-center pt-[10vh] sm:p-4",
+      "flex min-h-full items-start justify-center pt-[10vh] sm:items-center sm:pt-0 sm:p-4 sm:pb-[10vh]",
       # Transition
       "transition duration-300 ease-out",
-      "group-data-[closing]:duration-200 group-data-[closing]:ease-in",
+      "group-data-[closing]/utmr-modal:duration-200 group-data-[closing]/utmr-modal:ease-in",
       # Default state (closed): faded + shifted
       "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
       # Entered state
-      "group-data-[entered]:opacity-100 group-data-[entered]:translate-y-0 group-data-[entered]:scale-100"
+      "group-data-[entered]/utmr-modal:opacity-100 group-data-[entered]/utmr-modal:translate-y-0 group-data-[entered]/utmr-modal:scale-100"
     ].join(" ")
 
-    MODAL_CONTENT_CLASSES = "relative transform max-h-screen overflow-hidden rounded-lg bg-white text-left shadow-lg transition-all sm:my-8 sm:max-w-3xl dark:bg-gray-800 dark:text-white"
-    MODAL_MAIN_CLASSES = "group-data-[padding=true]:p-4 group-data-[padding=true]:pt-2 overflow-y-auto max-h-[75vh]"
-    MODAL_HEADER_CLASSES = "flex justify-between items-center w-full py-4 rounded-t dark:border-gray-600 group-data-[header-divider=true]:border-b group-data-[header=false]:absolute"
+    MODAL_CONTENT_CLASSES = "relative transform max-h-screen overflow-hidden rounded-lg bg-white text-left shadow-lg transition-all sm:max-w-3xl dark:bg-gray-800 dark:text-white"
+    MODAL_MAIN_CLASSES = "group-data-[padding=true]/utmr-modal:p-4 group-data-[padding=true]/utmr-modal:pt-2 overflow-y-auto max-h-[75vh]"
+    MODAL_HEADER_CLASSES = "flex justify-between items-center w-full py-4 rounded-t dark:border-gray-600 group-data-[header-divider=true]/utmr-modal:border-b group-data-[header=false]/utmr-modal:absolute"
     MODAL_TITLE_CLASSES = "pl-4"
-    MODAL_TITLE_H_CLASSES = "group-data-[title=false]:hidden text-lg font-semibold text-gray-900 dark:text-white"
-    MODAL_FOOTER_CLASSES = "flex p-4 rounded-b dark:border-gray-600 group-data-[footer-divider=true]:border-t"
-    MODAL_CLOSE_CLASSES = "mr-4 group-data-[close-button=false]:hidden"
+    MODAL_TITLE_H_CLASSES = "group-data-[title=false]/utmr-modal:hidden text-lg font-semibold text-gray-900 dark:text-white"
+    MODAL_FOOTER_CLASSES = "flex p-4 rounded-b dark:border-gray-600 group-data-[footer-divider=true]/utmr-modal:border-t"
+    MODAL_CLOSE_CLASSES = "mr-4 group-data-[close-button=false]/utmr-modal:hidden"
     MODAL_CLOSE_SR_CLASSES = "sr-only"
     MODAL_CLOSE_BUTTON_CLASSES = "text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
     MODAL_CLOSE_ICON_CLASSES = "w-5 h-5"
@@ -45,7 +50,7 @@ module UltimateTurboModal::Flavors
     # Drawer constants
 
     DRAWER_DIALOG_CLASSES = [
-      "group",
+      "group/utmr-drawer",
       # Dialog reset
       "fixed inset-0 p-0 m-0 border-none bg-transparent",
       "max-w-[100vw] max-h-dvh w-full h-full overflow-y-auto",
@@ -75,30 +80,30 @@ module UltimateTurboModal::Flavors
     DRAWER_PANEL_CLASSES = [
       "absolute inset-y-0",
       # Position based on direction
-      "group-data-[drawer=left]:left-0 group-data-[drawer=right]:right-0",
+      "group-data-[drawer=left]/utmr-drawer:left-0 group-data-[drawer=right]/utmr-drawer:right-0",
       # Width (size variable + gutter)
       "w-[min(var(--utmr-w),calc(100vw_-_var(--utmr-gutter)))]",
       # Default: translated off-screen
       "[translate:var(--utmr-hide)]",
       # Entered: in place
-      "group-data-[entered]:[translate:0]",
+      "group-data-[entered]/utmr-drawer:[translate:0]",
       # Closing: back off-screen
-      "group-data-[closing]:[translate:var(--utmr-hide)]",
+      "group-data-[closing]/utmr-drawer:[translate:var(--utmr-hide)]",
       # Transition
       "transition-[translate] duration-250 ease-in-out sm:duration-400",
       "will-change-[translate]",
       # Hidden before animation ready
-      "group-[&:not([data-enter-ready]):not([data-entered])]:invisible"
+      "group-[&:not([data-enter-ready]):not([data-entered])]/utmr-drawer:invisible"
     ].join(" ")
 
-    DRAWER_CONTENT_CLASSES = "relative flex h-full w-full flex-col bg-white group-data-[padding=true]:pt-6 shadow-xl dark:bg-gray-800 dark:text-white"
+    DRAWER_CONTENT_CLASSES = "relative flex h-full w-full flex-col bg-white group-data-[padding=true]/utmr-drawer:pt-6 shadow-xl dark:bg-gray-800 dark:text-white"
 
-    DRAWER_HEADER_CLASSES = "flex items-start justify-between w-full px-4 sm:px-6 group-data-[header-divider=true]:pb-4 group-data-[header-divider=true]:border-b group-data-[header-divider=true]:border-gray-200 dark:group-data-[header-divider=true]:border-gray-600 group-data-[header=false]:hidden"
+    DRAWER_HEADER_CLASSES = "flex items-start justify-between w-full px-4 sm:px-6 group-data-[header-divider=true]/utmr-drawer:pb-4 group-data-[header-divider=true]/utmr-drawer:border-b group-data-[header-divider=true]/utmr-drawer:border-gray-200 dark:group-data-[header-divider=true]/utmr-drawer:border-gray-600 group-data-[header=false]/utmr-drawer:hidden"
     DRAWER_TITLE_CLASSES = ""
-    DRAWER_TITLE_H_CLASSES = "group-data-[title=false]:hidden text-base font-semibold text-gray-900 dark:text-white"
-    DRAWER_MAIN_CLASSES = "relative group-data-[padding=true]:mt-6 flex-1 overflow-y-auto group-data-[padding=true]:px-4 group-data-[padding=true]:sm:px-6 group-data-[padding=true]:pb-6"
-    DRAWER_FOOTER_CLASSES = "flex shrink-0 px-4 py-4 sm:px-6 group-data-[footer-divider=true]:border-t group-data-[footer-divider=true]:border-gray-200 dark:group-data-[footer-divider=true]:border-gray-600"
-    DRAWER_CLOSE_CLASSES = "ml-3 flex h-7 items-center group-data-[close-button=false]:hidden"
+    DRAWER_TITLE_H_CLASSES = "group-data-[title=false]/utmr-drawer:hidden text-base font-semibold text-gray-900 dark:text-white"
+    DRAWER_MAIN_CLASSES = "relative group-data-[padding=true]/utmr-drawer:mt-6 flex-1 overflow-y-auto group-data-[padding=true]/utmr-drawer:px-4 group-data-[padding=true]/utmr-drawer:sm:px-6 group-data-[padding=true]/utmr-drawer:pb-6"
+    DRAWER_FOOTER_CLASSES = "flex shrink-0 px-4 py-4 sm:px-6 group-data-[footer-divider=true]/utmr-drawer:border-t group-data-[footer-divider=true]/utmr-drawer:border-gray-200 dark:group-data-[footer-divider=true]/utmr-drawer:border-gray-600"
+    DRAWER_CLOSE_CLASSES = "ml-3 flex h-7 items-center group-data-[close-button=false]/utmr-drawer:hidden"
     DRAWER_CLOSE_BUTTON_CLASSES = "relative rounded-md text-gray-400 hover:text-gray-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
     DRAWER_CLOSE_SR_CLASSES = MODAL_CLOSE_SR_CLASSES
     DRAWER_CLOSE_ICON_CLASSES = "size-6"

data/lib/generators/ultimate_turbo_modal/templates/flavors/vanilla.rb

@@ -5,7 +5,7 @@
 # Set STYLES to a CSS string if you need additional inline styles.
 module UltimateTurboModal::Flavors
   class Vanilla < UltimateTurboModal::Base
-    STYLES = "html:has(dialog#modal-container[open]) { overflow: hidden; }"
+    STYLES = "html:has(dialog#modal-container[open]), html:has(dialog#modal-container-stacked[open]) { overflow: hidden; }"
 
     MODAL_DIALOG_CLASSES = "modal-container"
     MODAL_INNER_CLASSES = "modal-inner"

data/lib/ultimate_turbo_modal/base.rb

@@ -39,6 +39,9 @@ class UltimateTurboModal::Base < Phlex::HTML
     request: nil, title: nil
   )
     @drawer = drawer_position
+    @request = request
+
+    raise ArgumentError, "Cannot render a drawer into the drawer-modal frame (drawers cannot be opened from inside another drawer or modal)" if drawer? && stacked?
 
     if drawer?
       cfg = UltimateTurboModal.configuration.drawer_config
@@ -60,11 +63,15 @@ class UltimateTurboModal::Base < Phlex::HTML
     @overlay = overlay.nil? ? cfg.overlay : overlay
     @padding = padding.nil? ? cfg.padding : padding
 
+    if stacked?
+      @advance = false
+      @advance_url = nil
+    end
+
     @allowed_click_outside_selector = allowed_click_outside_selector
     @close_button_data_action = close_button_data_action
     @close_button_sr_label = close_button_sr_label
     @content_div_data = content_div_data
-    @request = request
     @title = title
 
     self.class.include_turbo_helpers
@@ -84,7 +91,7 @@ class UltimateTurboModal::Base < Phlex::HTML
 
   def view_template(&block)
     if turbo_frame?
-      turbo_frame_tag("modal") do
+      turbo_frame_tag(turbo_frame_name) do
         drawer? ? render_drawer(&block) : render_modal(&block)
       end
     else
@@ -92,6 +99,10 @@ class UltimateTurboModal::Base < Phlex::HTML
     end
   end
 
+  def turbo_frame_name
+    stacked? ? "drawer-modal" : "modal"
+  end
+
   def title(&block)
     @title_block = block
   end
@@ -145,6 +156,16 @@ class UltimateTurboModal::Base < Phlex::HTML
 
   def drawer? = !!@drawer
 
+  def stacked? = request&.headers&.[]("Turbo-Frame") == "drawer-modal"
+
+  def dialog_id = stacked? ? "modal-container-stacked" : "modal-container"
+
+  def inner_id = stacked? ? "modal-inner-stacked" : "modal-inner"
+
+  # Suffix inner ids so they don't collide with the drawer's ids when the
+  # stacked modal is rendered inside the drawer's DOM.
+  def scoped_id(name) = stacked? ? "#{name}-stacked" : name
+
   def drawer_position = @drawer || :right
 
   def overlay? = !!@overlay
@@ -262,11 +283,11 @@ class UltimateTurboModal::Base < Phlex::HTML
       inline_style = "--utmr-w: #{@drawer_size}"
     end
 
-    dialog(id: "modal-container",
+    dialog(id: dialog_id,
       class: dialog_classes,
       style: inline_style,
       aria: {
-        labelledby: "modal-title-h"
+        labelledby: scoped_id("modal-title-h")
       },
       data: data_attributes, &block)
   end
@@ -274,14 +295,14 @@ class UltimateTurboModal::Base < Phlex::HTML
   ## Modal-specific elements
 
   def modal_inner(&block)
-    maybe_turbo_frame("modal-inner") do
-      div(id: "modal-inner", class: self.class::MODAL_INNER_CLASSES, &block)
+    maybe_turbo_frame(inner_id) do
+      div(id: inner_id, class: self.class::MODAL_INNER_CLASSES, &block)
     end
   end
 
   def modal_content(&block)
     data = (content_div_data || {}).merge({modal_target: "content"})
-    div(id: "modal-content", class: self.class::MODAL_CONTENT_CLASSES, data: data, &block)
+    div(id: scoped_id("modal-content"), class: self.class::MODAL_CONTENT_CLASSES, data: data, &block)
   end
 
   def modal_main(&block) = render_main(&block)
@@ -294,7 +315,12 @@ class UltimateTurboModal::Base < Phlex::HTML
 
   def drawer_wrapper(&block)
     maybe_turbo_frame("modal-inner") do
-      div(id: "drawer-wrapper", class: self.class::DRAWER_WRAPPER_CLASSES, &block)
+      div(id: "drawer-wrapper", class: self.class::DRAWER_WRAPPER_CLASSES) do
+        yield
+        # Empty frame so links inside the drawer can target a stacked modal
+        # via data-turbo-frame="drawer-modal". Always rendered.
+        turbo_frame_tag("drawer-modal")
+      end
     end
   end
 
@@ -320,34 +346,34 @@ class UltimateTurboModal::Base < Phlex::HTML
   ## Shared rendering
 
   def render_main(&block)
-    div(id: "modal-main", class: classes_for("MAIN_CLASSES"), &block)
+    div(id: scoped_id("modal-main"), class: classes_for("MAIN_CLASSES"), &block)
   end
 
   def render_header
-    div(id: "modal-header", class: classes_for("HEADER_CLASSES")) do
+    div(id: scoped_id("modal-header"), class: classes_for("HEADER_CLASSES")) do
       render_title
       drawer? ? drawer_close : modal_close
     end
   end
 
   def render_title
-    div(id: "modal-title", class: classes_for("TITLE_CLASSES")) do
+    div(id: scoped_id("modal-title"), class: classes_for("TITLE_CLASSES")) do
       if @title_block.present?
         render @title_block
       else
-        h3(id: "modal-title-h", class: classes_for("TITLE_H_CLASSES")) { @title }
+        h3(id: scoped_id("modal-title-h"), class: classes_for("TITLE_H_CLASSES")) { @title }
       end
     end
   end
 
   def render_footer
-    div(id: "modal-footer", class: classes_for("FOOTER_CLASSES")) do
+    div(id: scoped_id("modal-footer"), class: classes_for("FOOTER_CLASSES")) do
       render @footer
     end
   end
 
   def render_close
-    div(id: "modal-close", class: classes_for("CLOSE_CLASSES")) do
+    div(id: scoped_id("modal-close"), class: classes_for("CLOSE_CLASSES")) do
       close_button_tag(classes_for("CLOSE_BUTTON_CLASSES")) do
         yield if block_given?
         close_icon_svg(classes_for("CLOSE_ICON_CLASSES"))

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: ultimate_turbo_modal
 version: !ruby/object:Gem::Version
-  version: 3.0.5
+  version: 3.1.0
 platform: ruby
 authors:
 - Carl Mercier