ultimate_turbo_modal 2.0.4 → 2.1.1

data/javascript/modal_controller.js

@@ -1,5 +1,6 @@
 import { Controller } from '@hotwired/stimulus';
 import { enter, leave } from 'el-transition';
+import { createFocusTrap } from 'focus-trap';
 
 // This placeholder will be replaced by rollup
 const PACKAGE_VERSION = '__PACKAGE_VERSION__';
@@ -16,6 +17,9 @@ export default class extends Controller {
 
     this.#checkVersions();
 
+    // Initialize focus trap instance variable
+    this.focusTrapInstance = null;
+
     this.showModal();
 
     this.turboFrame = this.element.closest('turbo-frame');
@@ -29,11 +33,18 @@ export default class extends Controller {
   }
 
   disconnect() {
+    // Clean up focus trap if it exists
+    if (this.focusTrapInstance) {
+      this.#deactivateFocusTrap();
+    }
     window.modal = undefined;
   }
 
   showModal() {
-    enter(this.containerTarget);
+    enter(this.containerTarget).then(() => {
+      // Activate focus trap after the modal transition is complete
+      this.#activateFocusTrap();
+    });
 
     if (this.advanceUrlValue && !this.#hasHistoryAdvanced()) {
       this.#setHistoryAdvanced();
@@ -51,7 +62,15 @@ export default class extends Controller {
 
     let event = new Event('modal:closing', { cancelable: true });
     this.turboFrame.dispatchEvent(event);
-    if (event.defaultPrevented) return
+    if (event.defaultPrevented) {
+      this.hidingModal = false;
+      return
+    }
+
+    // Deactivate focus trap only after confirming modal will close
+    if (this.focusTrapInstance) {
+      this.#deactivateFocusTrap();
+    }
 
     this.#resetModalElement();
 
@@ -126,4 +145,46 @@ export default class extends Controller {
       );
     }
   }
+
+  #activateFocusTrap() {
+    try {
+      // Create focus trap if it doesn't exist
+      if (!this.focusTrapInstance) {
+        this.focusTrapInstance = createFocusTrap(this.contentTarget, {
+          allowOutsideClick: true,
+          escapeDeactivates: false, // Let our ESC handler manage this
+          fallbackFocus: this.contentTarget,
+          returnFocusOnDeactivate: true,
+          clickOutsideDeactivates: false, // Let our click outside handler manage this
+          preventScroll: false,
+          initialFocus: () => {
+            // Try to focus the first focusable element, or the modal itself
+            const firstFocusable = this.contentTarget.querySelector(
+              'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+            );
+            return firstFocusable || this.contentTarget;
+          }
+        });
+      }
+
+      // Activate the trap
+      this.focusTrapInstance.activate();
+    } catch (error) {
+      console.error('[UltimateTurboModal] Failed to activate focus trap:', error);
+      // Don't break the modal if focus trap fails
+      this.focusTrapInstance = null;
+    }
+  }
+
+  #deactivateFocusTrap() {
+    try {
+      if (this.focusTrapInstance && this.focusTrapInstance.active) {
+        this.focusTrapInstance.deactivate();
+      }
+    } catch (error) {
+      console.error('[UltimateTurboModal] Failed to deactivate focus trap:', error);
+    } finally {
+      this.focusTrapInstance = null;
+    }
+  }
 }

data/javascript/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ultimate_turbo_modal",
-  "version": "2.0.4",
+  "version": "2.1.0",
   "description": "The ultimate Turbo / Stimulus / Hotwire modal window for Rails",
   "main": "dist/ultimate_turbo_modal.min.js",
   "module": "dist/ultimate_turbo_modal.min.js",
@@ -35,6 +35,7 @@
     "@hotwired/stimulus": "^3.2.2",
     "@hotwired/turbo-rails": "^8.0.0",
     "el-transition": "^0.0.7",
+    "focus-trap": "^7.6.5",
     "idiomorph": "^0.7.3"
   },
   "devDependencies": {
@@ -44,5 +45,6 @@
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-css-only": "^4.3.0",
     "rollup-plugin-terser": "^7.0.2"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

data/javascript/yarn.lock

@@ -262,6 +262,13 @@ fill-range@^7.1.1:
   dependencies:
     to-regex-range "^5.0.1"
 
+focus-trap@^7.6.5:
+  version "7.6.5"
+  resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-7.6.5.tgz#56f0814286d43c1a2688e9bc4f31f17ae047fb76"
+  integrity sha512-7Ke1jyybbbPZyZXFxEftUtxFGLMpE2n6A+z//m4CRDlj0hW+o3iYSmh8nFlYMurOiJVDmJRilUQtJr08KfIxlg==
+  dependencies:
+    tabbable "^6.2.0"
+
 fs-extra@^8.1.0:
   version "8.1.0"
   resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz"
@@ -593,6 +600,11 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+tabbable@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
+  integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
+
 terser@^5.0.0:
   version "5.39.0"
   resolved "https://registry.npmjs.org/terser/-/terser-5.39.0.tgz"

data/lib/ultimate_turbo_modal/configuration.rb

@@ -66,6 +66,7 @@ module UltimateTurboModal
       raise ArgumentError.new("Value must be a boolean.") unless [true, false].include?(footer_divider)
       @footer_divider = footer_divider
     end
+
   end
 end
 

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: ultimate_turbo_modal
 version: !ruby/object:Gem::Version
-  version: 2.0.4
+  version: 2.1.1
 platform: ruby
 authors:
 - Carl Mercier
 bindir: bin
 cert_chain: []
-date: 2025-06-20 00:00:00.000000000 Z
+date: 1980-01-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: phlex-rails
@@ -24,7 +24,35 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
-  name: rails
+  name: actionpack
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: activesupport
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: railties
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -73,17 +101,169 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
+- ".claude/TM_COMMANDS_GUIDE.md"
+- ".claude/commands/tm/add-dependency/add-dependency.md"
+- ".claude/commands/tm/add-subtask/add-subtask.md"
+- ".claude/commands/tm/add-subtask/convert-task-to-subtask.md"
+- ".claude/commands/tm/add-task/add-task.md"
+- ".claude/commands/tm/analyze-complexity/analyze-complexity.md"
+- ".claude/commands/tm/clear-subtasks/clear-all-subtasks.md"
+- ".claude/commands/tm/clear-subtasks/clear-subtasks.md"
+- ".claude/commands/tm/complexity-report/complexity-report.md"
+- ".claude/commands/tm/expand/expand-all-tasks.md"
+- ".claude/commands/tm/expand/expand-task.md"
+- ".claude/commands/tm/fix-dependencies/fix-dependencies.md"
+- ".claude/commands/tm/generate/generate-tasks.md"
+- ".claude/commands/tm/help.md"
+- ".claude/commands/tm/init/init-project-quick.md"
+- ".claude/commands/tm/init/init-project.md"
+- ".claude/commands/tm/learn.md"
+- ".claude/commands/tm/list/list-tasks-by-status.md"
+- ".claude/commands/tm/list/list-tasks-with-subtasks.md"
+- ".claude/commands/tm/list/list-tasks.md"
+- ".claude/commands/tm/models/setup-models.md"
+- ".claude/commands/tm/models/view-models.md"
+- ".claude/commands/tm/next/next-task.md"
+- ".claude/commands/tm/parse-prd/parse-prd-with-research.md"
+- ".claude/commands/tm/parse-prd/parse-prd.md"
+- ".claude/commands/tm/remove-dependency/remove-dependency.md"
+- ".claude/commands/tm/remove-subtask/remove-subtask.md"
+- ".claude/commands/tm/remove-task/remove-task.md"
+- ".claude/commands/tm/set-status/to-cancelled.md"
+- ".claude/commands/tm/set-status/to-deferred.md"
+- ".claude/commands/tm/set-status/to-done.md"
+- ".claude/commands/tm/set-status/to-in-progress.md"
+- ".claude/commands/tm/set-status/to-pending.md"
+- ".claude/commands/tm/set-status/to-review.md"
+- ".claude/commands/tm/setup/install-taskmaster.md"
+- ".claude/commands/tm/setup/quick-install-taskmaster.md"
+- ".claude/commands/tm/show/show-task.md"
+- ".claude/commands/tm/status/project-status.md"
+- ".claude/commands/tm/sync-readme/sync-readme.md"
+- ".claude/commands/tm/tm-main.md"
+- ".claude/commands/tm/update/update-single-task.md"
+- ".claude/commands/tm/update/update-task.md"
+- ".claude/commands/tm/update/update-tasks-from-id.md"
+- ".claude/commands/tm/utils/analyze-project.md"
+- ".claude/commands/tm/validate-dependencies/validate-dependencies.md"
+- ".claude/commands/tm/workflows/auto-implement-tasks.md"
+- ".claude/commands/tm/workflows/command-pipeline.md"
+- ".claude/commands/tm/workflows/smart-workflow.md"
+- ".cursor/rules/taskmaster/dev_workflow.mdc"
+- ".cursor/rules/taskmaster/taskmaster.mdc"
+- ".env.example"
 - ".rubocop.yml"
 - ".ruby-version"
 - ".standard.yml"
+- ".taskmaster/CLAUDE.md"
+- ".taskmaster/config.json"
+- ".taskmaster/templates/example_prd.txt"
 - ".tool-versions"
 - CHANGELOG.md
+- CLAUDE.md
 - Gemfile
 - Gemfile.lock
 - LICENSE.txt
 - README.md
 - Rakefile
+- UPGRADING.md
 - VERSION
+- demo-app/.gitattributes
+- demo-app/.gitignore
+- demo-app/.ruby-version
+- demo-app/.tool-versions
+- demo-app/Gemfile
+- demo-app/Gemfile.lock
+- demo-app/Procfile.dev
+- demo-app/README.md
+- demo-app/Rakefile
+- demo-app/app/assets/builds/.keep
+- demo-app/app/assets/images/.keep
+- demo-app/app/assets/stylesheets/application.css
+- demo-app/app/controllers/application_controller.rb
+- demo-app/app/controllers/concerns/.keep
+- demo-app/app/controllers/concerns/set_flavor.rb
+- demo-app/app/controllers/hide_from_backends_controller.rb
+- demo-app/app/controllers/modal_controller.rb
+- demo-app/app/controllers/posts_controller.rb
+- demo-app/app/controllers/welcome_controller.rb
+- demo-app/app/helpers/application_helper.rb
+- demo-app/app/javascript/application.js
+- demo-app/app/javascript/controllers/application.js
+- demo-app/app/javascript/controllers/dark_mode_controller.js
+- demo-app/app/javascript/controllers/flash_controller.js
+- demo-app/app/javascript/controllers/hello_controller.js
+- demo-app/app/javascript/controllers/index.js
+- demo-app/app/models/application_record.rb
+- demo-app/app/models/concerns/.keep
+- demo-app/app/models/post.rb
+- demo-app/app/views/hide_from_backends/_notice.html.erb
+- demo-app/app/views/hide_from_backends/create.turbo_stream.erb
+- demo-app/app/views/hide_from_backends/new.html.erb
+- demo-app/app/views/layouts/application.html.erb
+- demo-app/app/views/modal/index.html.erb
+- demo-app/app/views/modal/show.html.erb
+- demo-app/app/views/posts/_form.html.erb
+- demo-app/app/views/posts/_post.html.erb
+- demo-app/app/views/posts/edit.html.erb
+- demo-app/app/views/posts/index.html.erb
+- demo-app/app/views/posts/new.html.erb
+- demo-app/app/views/posts/show.html.erb
+- demo-app/app/views/shared/_flash.html.erb
+- demo-app/app/views/welcome/index.html.erb
+- demo-app/bin/bundle
+- demo-app/bin/dev
+- demo-app/bin/rails
+- demo-app/bin/rake
+- demo-app/bin/setup
+- demo-app/config.ru
+- demo-app/config/application.rb
+- demo-app/config/boot.rb
+- demo-app/config/credentials.yml.enc
+- demo-app/config/database.yml
+- demo-app/config/environment.rb
+- demo-app/config/environments/development.rb
+- demo-app/config/environments/production.rb
+- demo-app/config/environments/test.rb
+- demo-app/config/initializers/assets.rb
+- demo-app/config/initializers/content_security_policy.rb
+- demo-app/config/initializers/filter_parameter_logging.rb
+- demo-app/config/initializers/inflections.rb
+- demo-app/config/initializers/new_framework_defaults_8_0.rb
+- demo-app/config/initializers/permissions_policy.rb
+- demo-app/config/initializers/ultimate_turbo_modal.rb
+- demo-app/config/initializers/ultimate_turbo_modal_tailwind.rb
+- demo-app/config/initializers/ultimate_turbo_modal_vanilla.rb
+- demo-app/config/locales/en.yml
+- demo-app/config/puma.rb
+- demo-app/config/routes.rb
+- demo-app/db/migrate/20230331002502_create_posts.rb
+- demo-app/db/migrate/20231031012703_add_post.rb
+- demo-app/db/migrate/20231128141054_add_publish_on_to_posts.rb
+- demo-app/db/schema.rb
+- demo-app/lib/assets/.keep
+- demo-app/lib/tasks/.keep
+- demo-app/log/.keep
+- demo-app/package.json
+- demo-app/postcss.config.js
+- demo-app/public/400.html
+- demo-app/public/404.html
+- demo-app/public/406-unsupported-browser.html
+- demo-app/public/422.html
+- demo-app/public/500.html
+- demo-app/public/apple-touch-icon-precomposed.png
+- demo-app/public/apple-touch-icon.png
+- demo-app/public/favicon.ico
+- demo-app/public/icon.png
+- demo-app/public/icon.svg
+- demo-app/public/img/bootstrap-logo-shadow.png
+- demo-app/public/img/unicat.jpg
+- demo-app/public/img/vanilla.png
+- demo-app/public/robots.txt
+- demo-app/tmp/.keep
+- demo-app/tmp/pids/.keep
+- demo-app/vendor/.keep
+- demo-app/yarn.lock
 - javascript/index.js
 - javascript/modal_controller.js
 - javascript/package.json
@@ -131,7 +311,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.6.2
+rubygems_version: 3.6.7
 specification_version: 4
 summary: UTMR aims to be the be-all and end-all of Turbo Modals.
 test_files: []