21 |
24 |
25 |
26 |
36 |
51 | ```
52 |
53 | ```js component
54 | import Component from '@glimmer/component';
55 | import { tracked } from '@glimmer/tracking';
56 |
57 | export default class Demo extends Component {
58 | @tracked isActive = false;
59 |
60 | activate = () => {
61 | this.isActive = true;
62 | };
63 |
64 | deactivate = () => {
65 | if (this.isActive) {
66 | this.isActive = false;
67 | }
68 | };
69 | }
70 | ```
71 |
--------------------------------------------------------------------------------
/site/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "site",
3 | "version": "1.1.1",
4 | "private": true,
5 | "description": "Small description for site goes here",
6 | "repository": "",
7 | "license": "MIT",
8 | "author": "",
9 | "directories": {
10 | "doc": "doc",
11 | "test": "tests"
12 | },
13 | "scripts": {
14 | "build": "ember build --environment=production",
15 | "lint:hbs": "ember-template-lint .",
16 | "start": "ember serve",
17 | "test": "ember test",
18 | "test:types": "echo 'no type tests'",
19 | "test:ember": "ember test"
20 | },
21 | "devDependencies": {
22 | "@docfy/ember": "^0.4.4",
23 | "@docfy/plugin-with-prose": "^0.4.4",
24 | "@ember/optional-features": "^2.0.0",
25 | "@ember/test-helpers": "^2.6.0",
26 | "@frontile/core": "^0.12.2",
27 | "@frontile/overlays": "^0.12.2",
28 | "@glimmer/component": "^1.0.4",
29 | "@glimmer/tracking": "^1.0.3",
30 | "@tailwindcss/typography": "^0.4.1",
31 | "autoprefixer": "^10.3.5",
32 | "broccoli-asset-rev": "^3.0.0",
33 | "docfy-theme-ember": "josemarluedke/docfy-theme-ember",
34 | "ember-auto-import": "^2.4.0",
35 | "ember-cli": "~6.0.0",
36 | "ember-cli-app-version": "^7.0.0",
37 | "ember-cli-babel": "^8.2.0",
38 | "ember-cli-dependency-checker": "^3.2.0",
39 | "ember-cli-fastboot": "^4.1.5",
40 | "ember-cli-htmlbars": "^6.0.1",
41 | "ember-cli-inject-live-reload": "^2.1.0",
42 | "ember-cli-postcss": "^8.0.0",
43 | "ember-cli-sri": "^2.1.1",
44 | "ember-cli-terser": "^4.0.2",
45 | "ember-focus-trap": "workspace:*",
46 | "ember-load-initializers": "^3.0.1",
47 | "ember-page-title": "^8.2.3",
48 | "ember-qunit": "^8.1.1",
49 | "ember-resolver": "^13.0.2",
50 | "ember-source": "~6.0.0",
51 | "ember-template-lint": "^3.15.0",
52 | "eslint-plugin-qunit": "^7.2.0",
53 | "loader.js": "^4.7.0",
54 | "postcss-import": "^16.1.0",
55 | "postcss-nested": "^7.0.2",
56 | "prember": "^2.1.0",
57 | "prettier": "^2.5.1",
58 | "qunit": "^2.17.2",
59 | "qunit-dom": "^3.3.0",
60 | "rehype-highlight": "^4.1.0",
61 | "remark-autolink-headings": "^6.0.1",
62 | "remark-code-titles": "^0.1.2",
63 | "tailwindcss": "^2.2.15",
64 | "webpack": "^5.67.0"
65 | },
66 | "engines": {
67 | "node": "12.* || 14.* || >= 16"
68 | },
69 | "ember": {
70 | "edition": "octane"
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
37 | Here is a focus trap
38 | with
39 | some
40 | focusable
41 | parts.
42 |
43 |
44 | Initially focused input
45 |
46 |
2 |
3 |
6 | 
7 | 
8 | 
9 |
42 |
53 | ```
54 |
55 | ### With Focus Trap Options
56 |
57 | ```hbs
58 | 43 | Here is a focus trap 44 | with 45 | some 46 | focusable 47 | parts. 48 |
49 |50 | 51 |
52 |
66 |
77 | ```
78 |
79 | ## Contributing
80 |
81 | See the [Contributing](CONTRIBUTING.md) guide for details.
82 |
83 | ## License
84 |
85 | This project is licensed under the [MIT License](LICENSE.md).
86 |
--------------------------------------------------------------------------------
/site/app/templates/index.hbs:
--------------------------------------------------------------------------------
1 | 67 | Here is a focus trap 68 | with 69 | some 70 | focusable 71 | parts. 72 |
73 |74 | 75 |
76 |
2 |
37 |
38 |
3 |
4 |
20 | Read the Docs
21 |
34 |
35 |
36 |
5 |
6 |
7 | 10 | Ember Focus Trap 11 |
12 |13 | A Ember modifier to trap your focus. 14 |
15 | 16 |
41 |
--------------------------------------------------------------------------------
/site/app/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
14 |
15 |
16 |
20 |
21 |
22 |
23 |
27 |
28 |
29 |
30 |
31 |
32 | {{content-for "head"}}
33 |
34 |
35 |
36 |
40 |
41 |
42 |
43 |
44 | {{content-for "head-footer"}}
45 |
68 |
69 |
70 |
71 | {{content-for "body"}}
72 |
73 |
74 |
75 |
76 | {{content-for "body-footer"}}
77 |
78 |
79 |
--------------------------------------------------------------------------------
/packages/ember-focus-trap/rollup.config.mjs:
--------------------------------------------------------------------------------
1 | import { babel } from '@rollup/plugin-babel';
2 | import copy from 'rollup-plugin-copy';
3 | import { Addon } from '@embroider/addon-dev/rollup';
4 |
5 | const addon = new Addon({
6 | srcDir: 'src',
7 | destDir: 'dist',
8 | });
9 |
10 | export default {
11 | // This provides defaults that work well alongside `publicEntrypoints` below.
12 | // You can augment this if you need to.
13 | output: addon.output(),
14 |
15 | plugins: [
16 | // These are the modules that users should be able to import from your
17 | // addon. Anything not listed here may get optimized away.
18 | // By default all your JavaScript modules (**/*.js) will be importable.
19 | // But you are encouraged to tweak this to only cover the modules that make
20 | // up your addon's public API. Also make sure your package.json#exports
21 | // is aligned to the config here.
22 | // See https://github.com/embroider-build/embroider/blob/main/docs/v2-faq.md#how-can-i-define-the-public-exports-of-my-addon
23 | addon.publicEntrypoints(['**/*.js', 'index.js', 'template-registry.js']),
24 |
25 | // These are the modules that should get reexported into the traditional
26 | // "app" tree. Things in here should also be in publicEntrypoints above, but
27 | // not everything in publicEntrypoints necessarily needs to go here.
28 | addon.appReexports([
29 | 'components/**/*.js',
30 | 'helpers/**/*.js',
31 | 'modifiers/**/*.js',
32 | 'services/**/*.js',
33 | ]),
34 |
35 | // Follow the V2 Addon rules about dependencies. Your code can import from
36 | // `dependencies` and `peerDependencies` as well as standard Ember-provided
37 | // package names.
38 | addon.dependencies(),
39 |
40 | // This babel config should *not* apply presets or compile away ES modules.
41 | // It exists only to provide development niceties for you, like automatic
42 | // template colocation.
43 | //
44 | // By default, this will load the actual babel config from the file
45 | // babel.config.json.
46 | babel({
47 | extensions: ['.js', '.gjs', '.ts', '.gts'],
48 | babelHelpers: 'bundled',
49 | }),
50 |
51 | // Ensure that standalone .hbs files are properly integrated as Javascript.
52 | addon.hbs(),
53 |
54 | // Ensure that .gjs files are properly integrated as Javascript
55 | addon.gjs(),
56 |
57 | // Emit .d.ts declaration files
58 | addon.declarations('declarations'),
59 |
60 | // addons are allowed to contain imports of .css files, which we want rollup
61 | // to leave alone and keep in the published output.
62 | addon.keepAssets(['**/*.css']),
63 |
64 | // Remove leftover build artifacts when starting a new build.
65 | addon.clean(),
66 |
67 | // Copy Readme and License into published package
68 | copy({
69 | targets: [
70 | { src: '../../README.md', dest: '.' },
71 | { src: '../../LICENSE.md', dest: '.' },
72 | ],
73 | }),
74 | ],
75 | };
76 |
--------------------------------------------------------------------------------
/packages/test-app/eslint.config.mjs:
--------------------------------------------------------------------------------
1 | /**
2 | * Debugging:
3 | * https://eslint.org/docs/latest/use/configure/debug
4 | * ----------------------------------------------------
5 | *
6 | * Print a file's calculated configuration
7 | *
8 | * npx eslint --print-config path/to/file.js
9 | *
10 | * Inspecting the config
11 | *
12 | * npx eslint --inspect-config
13 | *
14 | */
15 | import globals from 'globals';
16 | import js from '@eslint/js';
17 |
18 | import ember from 'eslint-plugin-ember/recommended';
19 | import prettier from 'eslint-plugin-prettier/recommended';
20 | import qunit from 'eslint-plugin-qunit';
21 | import n from 'eslint-plugin-n';
22 |
23 | import babelParser from '@babel/eslint-parser';
24 |
25 | const esmParserOptions = {
26 | ecmaFeatures: { modules: true },
27 | ecmaVersion: 'latest',
28 | requireConfigFile: false,
29 | babelOptions: {
30 | plugins: [
31 | ['@babel/plugin-proposal-decorators', { decoratorsBeforeExport: true }],
32 | ],
33 | },
34 | };
35 |
36 | export default [
37 | js.configs.recommended,
38 | prettier,
39 | ember.configs.base,
40 | ember.configs.gjs,
41 | /**
42 | * Ignores must be in their own object
43 | * https://eslint.org/docs/latest/use/configure/ignore
44 | */
45 | {
46 | ignores: ['dist/', 'node_modules/', 'coverage/', '!**/.*'],
47 | },
48 | /**
49 | * https://eslint.org/docs/latest/use/configure/configuration-files#configuring-linter-options
50 | */
51 | {
52 | linterOptions: {
53 | reportUnusedDisableDirectives: 'error',
54 | },
55 | },
56 | {
57 | files: ['**/*.js'],
58 | languageOptions: {
59 | parser: babelParser,
60 | },
61 | },
62 | {
63 | files: ['**/*.{js,gjs}'],
64 | languageOptions: {
65 | parserOptions: esmParserOptions,
66 | globals: {
67 | ...globals.browser,
68 | },
69 | },
70 | },
71 | {
72 | files: ['tests/**/*-test.{js,gjs}'],
73 | plugins: {
74 | qunit,
75 | },
76 | },
77 | /**
78 | * CJS node files
79 | */
80 | {
81 | files: [
82 | '**/*.cjs',
83 | 'config/**/*.js',
84 | 'testem.js',
85 | 'testem*.js',
86 | '.prettierrc.js',
87 | '.stylelintrc.js',
88 | '.template-lintrc.js',
89 | 'ember-cli-build.js',
90 | ],
91 | plugins: {
92 | n,
93 | },
94 |
95 | languageOptions: {
96 | sourceType: 'script',
97 | ecmaVersion: 'latest',
98 | globals: {
99 | ...globals.node,
100 | },
101 | },
102 | },
103 | /**
104 | * ESM node files
105 | */
106 | {
107 | files: ['**/*.mjs'],
108 | plugins: {
109 | n,
110 | },
111 |
112 | languageOptions: {
113 | sourceType: 'module',
114 | ecmaVersion: 'latest',
115 | parserOptions: esmParserOptions,
116 | globals: {
117 | ...globals.node,
118 | },
119 | },
120 | },
121 | ];
122 |
--------------------------------------------------------------------------------
/packages/test-app/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "test-app",
3 | "version": "0.0.0",
4 | "private": true,
5 | "description": "Small description for test-app goes here",
6 | "repository": "",
7 | "license": "MIT",
8 | "author": "",
9 | "directories": {
10 | "doc": "doc",
11 | "test": "tests"
12 | },
13 | "scripts": {
14 | "build": "ember build --environment=production",
15 | "lint": "concurrently \"pnpm:lint:*(!fix)\" --names \"lint:\" --prefixColors auto",
16 | "lint:css": "stylelint \"**/*.css\"",
17 | "lint:css:fix": "concurrently \"pnpm:lint:css -- --fix\"",
18 | "lint:fix": "concurrently \"pnpm:lint:*:fix\" --names \"fix:\" --prefixColors auto",
19 | "lint:hbs": "ember-template-lint .",
20 | "lint:hbs:fix": "ember-template-lint . --fix",
21 | "lint:js": "eslint . --cache",
22 | "lint:js:fix": "eslint . --fix",
23 | "start": "ember serve",
24 | "test": "concurrently \"pnpm:lint\" \"pnpm:test:*\" --names \"lint,test:\" --prefixColors auto",
25 | "test:ember": "ember test"
26 | },
27 | "devDependencies": {
28 | "@babel/core": "^7.26.9",
29 | "@babel/eslint-parser": "^7.26.5",
30 | "@babel/plugin-proposal-decorators": "^7.25.9",
31 | "@ember/optional-features": "^2.2.0",
32 | "@ember/test-helpers": "^5.1.0",
33 | "@embroider/test-setup": "^4.0.0",
34 | "@eslint/js": "^9.21.0",
35 | "@glimmer/component": "^2.0.0",
36 | "@glimmer/tracking": "^1.1.2",
37 | "broccoli-asset-rev": "^3.0.0",
38 | "concurrently": "^9.1.2",
39 | "ember-auto-import": "^2.10.0",
40 | "ember-cli": "~6.2.2",
41 | "ember-cli-app-version": "^7.0.0",
42 | "ember-cli-babel": "^8.2.0",
43 | "ember-cli-clean-css": "^3.0.0",
44 | "ember-cli-dependency-checker": "^3.3.3",
45 | "ember-cli-htmlbars": "^6.3.0",
46 | "ember-cli-inject-live-reload": "^2.1.0",
47 | "ember-cli-sri": "^2.1.1",
48 | "ember-cli-terser": "^4.0.2",
49 | "ember-data": "~5.3.11",
50 | "ember-fetch": "^8.1.2",
51 | "ember-focus-trap": "workspace:*",
52 | "ember-load-initializers": "^3.0.1",
53 | "ember-modifier": "^4.2.0",
54 | "ember-page-title": "^9.0.1",
55 | "ember-qunit": "^9.0.1",
56 | "ember-resolver": "^13.1.0",
57 | "ember-source": "~6.2.0",
58 | "ember-source-channel-url": "^3.0.0",
59 | "ember-template-imports": "^4.3.0",
60 | "ember-template-lint": "^7.0.0",
61 | "ember-try": "^3.0.0",
62 | "eslint": "^9.21.0",
63 | "eslint-config-prettier": "^10.0.2",
64 | "eslint-plugin-ember": "^12.5.0",
65 | "eslint-plugin-n": "^17.16.1",
66 | "eslint-plugin-prettier": "^5.2.3",
67 | "eslint-plugin-qunit": "^8.1.2",
68 | "globals": "^16.0.0",
69 | "loader.js": "^4.7.0",
70 | "prettier": "^3.5.3",
71 | "prettier-plugin-ember-template-tag": "^2.0.4",
72 | "qunit": "^2.24.1",
73 | "qunit-dom": "^3.4.0",
74 | "sinon": "^19.0.2",
75 | "stylelint": "^16.15.0",
76 | "stylelint-config-standard": "^37.0.0",
77 | "stylelint-prettier": "^5.0.3",
78 | "tracked-built-ins": "^4.0.0",
79 | "webpack": "^5.98.0"
80 | },
81 | "engines": {
82 | "node": ">= 18"
83 | },
84 | "ember": {
85 | "edition": "octane"
86 | }
87 | }
88 |
--------------------------------------------------------------------------------
/packages/ember-focus-trap/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ember-focus-trap",
3 | "version": "1.1.1",
4 | "description": "A Ember modifier to trap your focus.",
5 | "keywords": [
6 | "ember-addon"
7 | ],
8 | "homepage": "https://josemarluedke.github.io/ember-focus-trap",
9 | "repository": "https://github.com/josemarluedke/ember-focus-trap",
10 | "license": "MIT",
11 | "author": "Josemar Luedke
42 |
58 | We use 43 | focus-trap 44 | as a lower-level implementation. It is super lightweight and has minimal 45 | dependencies.
46 |Trap focus within a DOM node.
47 |There may come a time when you find it important to trap focus within a
48 | DOM node — so that when a user hits
49 | Tab
50 | or
51 | Shift+Tab
52 | or clicks around, she can"t escape a certain cycle of focusable elements.
Please read the 54 | focus-trap 55 | documentation to understand what a focus trap is, what happens when a 56 | focus trap is activated, and what happens when one is deactivated.
57 |
44 |
45 |
`,
46 | );
47 | assert.equal(this.fakeFocusTrap.callCount, 1, 'should have called once');
48 |
49 | assert.ok(
50 | this.fakeFocusTrap.calledWithExactly(find('[data-test]'), {
51 | onDeactivate: noop,
52 | returnFocusOnDeactivate: true,
53 | }),
54 | 'should have called with the element and options',
55 | );
56 | assert.equal(this.instance.activate.callCount, 1, 'should have called');
57 | });
58 |
59 | test('default activation ', async function (assert) {
60 | await render(
61 | hbs`
68 |
69 |
`,
70 | );
71 | assert.equal(this.fakeFocusTrap.callCount, 1, 'should have called once');
72 |
73 | assert.ok(
74 | this.fakeFocusTrap.calledWithExactly(find('[data-test]'), {
75 | onDeactivate: noop,
76 | returnFocusOnDeactivate: true,
77 | }),
78 | 'should have called with the element and options',
79 | );
80 | assert.equal(this.instance.activate.callCount, 1, 'should have called');
81 | });
82 |
83 | test('activation with additional elements', async function (assert) {
84 | await render(
85 | hbs`
93 |
94 |
`,
95 | );
96 | assert.equal(this.fakeFocusTrap.callCount, 1, 'should have called once');
97 |
98 | assert.ok(
99 | this.fakeFocusTrap.calledWithExactly(
100 | [find('[data-test]'), '#foo', '#bar'],
101 | {
102 | onDeactivate: noop,
103 | returnFocusOnDeactivate: true,
104 | },
105 | ),
106 | 'should have called with the element and options',
107 | );
108 | assert.equal(this.instance.activate.callCount, 1, 'should have called');
109 | });
110 |
111 | test('activation with initialFocus as selector', async function (assert) {
112 | await render(
113 | hbs`
123 |
124 |
`,
125 | );
126 | assert.equal(this.fakeFocusTrap.callCount, 1, 'should have called once');
127 | assert.ok(
128 | this.fakeFocusTrap.calledWithExactly(find('[data-test]'), {
129 | onDeactivate: noop,
130 | initialFocus: '#initial-focusee',
131 | returnFocusOnDeactivate: true,
132 | }),
133 | 'should have called with the element and options',
134 | );
135 | });
136 |
137 | test('when passing shouldSelfFocus', async function (assert) {
138 | await render(
139 | hbs`
146 |
147 |
`,
148 | );
149 | assert.equal(this.fakeFocusTrap.callCount, 1, 'should have called once');
150 |
151 | assert.ok(
152 | this.fakeFocusTrap.calledWithExactly(find('[data-test]'), {
153 | initialFocus: find('[data-test]'),
154 | returnFocusOnDeactivate: true,
155 | }),
156 | 'should have called with the element and options',
157 | );
158 | assert.equal(this.instance.activate.callCount, 1, 'should have called');
159 | });
160 |
161 | test('when passing isActive as false', async function (assert) {
162 | await render(
163 | hbs`
170 |
171 |
`,
172 | );
173 | assert.equal(this.fakeFocusTrap.callCount, 1, 'should have called once');
174 | assert.ok(
175 | this.fakeFocusTrap.calledWithExactly(find('[data-test]'), {
176 | returnFocusOnDeactivate: true,
177 | }),
178 | 'should have called with the element and options',
179 | );
180 | assert.equal(
181 | this.instance.activate.callCount,
182 | 0,
183 | 'should not have called',
184 | );
185 | });
186 |
187 | test('when passign isActive as true', async function (assert) {
188 | await render(
189 | hbs`
196 |
197 |
`,
198 | );
199 | assert.equal(this.fakeFocusTrap.callCount, 1, 'should have called once');
200 | assert.equal(
201 | this.instance.activate.callCount,
202 | 1,
203 | 'should have called activate',
204 | );
205 | });
206 |
207 | test('when passign isPaused as true', async function (assert) {
208 | await render(
209 | hbs`
216 |
217 |
`,
218 | );
219 | assert.equal(this.fakeFocusTrap.callCount, 1, 'should have called once');
220 | assert.equal(
221 | this.instance.pause.callCount,
222 | 1,
223 | 'should have called activate',
224 | );
225 | });
226 | });
227 |
228 | module('updateModifier', function () {
229 | test('it acivates when isActive is updated from false to true', async function (assert) {
230 | this.set('isActive', false);
231 | await render(
232 | hbs`
239 |
240 |
`,
241 | );
242 | assert.equal(this.fakeFocusTrap.callCount, 1, 'should have called once');
243 | assert.equal(
244 | this.instance.activate.callCount,
245 | 0,
246 | 'should not have called',
247 | );
248 |
249 | this.set('isActive', true);
250 |
251 | assert.equal(
252 | this.instance.activate.callCount,
253 | 1,
254 | 'should have called activate',
255 | );
256 | });
257 |
258 | test('it deactivates when isActive is updated from true to false', async function (assert) {
259 | this.set('isActive', true);
260 | await render(
261 | hbs`
268 |
269 |
`,
270 | );
271 | assert.equal(this.fakeFocusTrap.callCount, 1, 'should have called once');
272 | assert.equal(
273 | this.instance.deactivate.callCount,
274 | 0,
275 | 'should not have called diactive',
276 | );
277 |
278 | this.set('isActive', false);
279 |
280 | assert.equal(
281 | this.instance.deactivate.callCount,
282 | 1,
283 | 'should have called diactive',
284 | );
285 | });
286 |
287 | test('it deactivates when isActive is updated from true to false and back again', async function (assert) {
288 | this.set('isActive', true);
289 | await render(
290 | hbs`
297 |
298 |
`,
299 | );
300 | assert.equal(this.fakeFocusTrap.callCount, 1, 'should have called once');
301 | assert.equal(
302 | this.instance.deactivate.callCount,
303 | 0,
304 | 'should not have called deactivate',
305 | );
306 |
307 | this.set('isActive', false);
308 |
309 | assert.equal(
310 | this.instance.deactivate.callCount,
311 | 1,
312 | 'should have called deactivate',
313 | );
314 |
315 | this.set('isActive', true);
316 |
317 | assert.equal(
318 | this.instance.activate.callCount,
319 | 2,
320 | 'should have called activate',
321 | );
322 | });
323 |
324 | test('it respects returnFocusOnDeactivate default option', async function (assert) {
325 | this.set('isActive', true);
326 | await render(
327 | hbs`
334 |
335 |
`,
336 | );
337 | assert.equal(this.fakeFocusTrap.callCount, 1, 'should have called once');
338 | assert.ok(
339 | this.fakeFocusTrap.calledWithExactly(find('[data-test]'), {
340 | returnFocusOnDeactivate: true,
341 | }),
342 | 'should have called with the element and options',
343 | );
344 | assert.equal(
345 | this.instance.deactivate.callCount,
346 | 0,
347 | 'should not have called diactive',
348 | );
349 |
350 | this.set('isActive', false);
351 |
352 | assert.ok(
353 | this.instance.deactivate.calledWithExactly({ returnFocus: true }),
354 | 'should have called diactive with options',
355 | );
356 | });
357 |
358 | test('it respects returnFocusOnDeactivate when false', async function (assert) {
359 | this.set('isActive', true);
360 | await render(
361 | hbs`
369 |
370 |
`,
371 | );
372 | assert.equal(this.fakeFocusTrap.callCount, 1, 'should have called once');
373 | assert.ok(
374 | this.fakeFocusTrap.calledWithExactly(find('[data-test]'), {
375 | returnFocusOnDeactivate: false,
376 | }),
377 | 'should have called with the element and options',
378 | );
379 | assert.equal(
380 | this.instance.deactivate.callCount,
381 | 0,
382 | 'should not have called diactive',
383 | );
384 |
385 | this.set('isActive', false);
386 |
387 | assert.ok(
388 | this.instance.deactivate.calledWithExactly({ returnFocus: false }),
389 | 'should have called diactive with options',
390 | );
391 | });
392 |
393 | test('it pauses when isPaused is updated from false to true', async function (assert) {
394 | this.set('isPaused', false);
395 | await render(
396 | hbs`
404 |
405 |
`,
406 | );
407 | assert.equal(this.fakeFocusTrap.callCount, 1, 'should have called once');
408 | assert.equal(this.instance.pause.callCount, 0, 'should not have called');
409 |
410 | this.set('isPaused', true);
411 |
412 | assert.equal(
413 | this.instance.pause.callCount,
414 | 1,
415 | 'should have called pause',
416 | );
417 | });
418 |
419 | test('it unpauses when isPaused is updated from true to false', async function (assert) {
420 | this.set('isPaused', true);
421 | await render(
422 | hbs`
429 |
430 |
`,
431 | );
432 | assert.equal(this.fakeFocusTrap.callCount, 1, 'should have called once');
433 | assert.equal(
434 | this.instance.unpause.callCount,
435 | 0,
436 | 'should not have called unpause',
437 | );
438 |
439 | this.set('isPaused', false);
440 |
441 | assert.equal(
442 | this.instance.unpause.callCount,
443 | 1,
444 | 'should have called unpause',
445 | );
446 | });
447 |
448 | test('it unpauses when isPaused is updated from true to false and back again', async function (assert) {
449 | this.set('isPaused', true);
450 | await render(
451 | hbs`
458 |
459 |
`,
460 | );
461 | assert.equal(this.fakeFocusTrap.callCount, 1, 'should have called once');
462 | assert.equal(
463 | this.instance.unpause.callCount,
464 | 0,
465 | 'should not have called unpause',
466 | );
467 |
468 | this.set('isPaused', false);
469 |
470 | assert.equal(
471 | this.instance.unpause.callCount,
472 | 1,
473 | 'should have called unpause',
474 | );
475 |
476 | this.set('isPaused', true);
477 |
478 | assert.equal(
479 | this.instance.pause.callCount,
480 | 2,
481 | 'should not have called pause',
482 | );
483 | });
484 | });
485 |
486 | module('destroyModifier', function () {
487 | test('it diactives when removing focus-trap element', async function (assert) {
488 | this.set('isEnabled', true);
489 |
490 | await render(
491 | hbs`{{#if this.isEnabled}}
492 |
499 |
500 |
501 | {{/if}}`,
502 | );
503 | assert.equal(this.fakeFocusTrap.callCount, 1, 'should have called once');
504 | assert.equal(
505 | this.instance.deactivate.callCount,
506 | 0,
507 | 'should not have called deactivate',
508 | );
509 |
510 | this.set('isEnabled', false);
511 |
512 | assert.equal(
513 | this.instance.deactivate.callCount,
514 | 1,
515 | 'should have called deactivate',
516 | );
517 | });
518 | });
519 | });
520 |
--------------------------------------------------------------------------------