@y14e/portal 1.2.0 → 1.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -36,3 +36,7 @@ const cleanup = createPortal(host, container);
36
36
  // host: Element
37
37
  // container (optional): Element (default: <body>)
38
38
  ```
39
+
40
+ ## Demo
41
+
42
+ https://y14e.github.io/portal/
package/dist/index.cjs CHANGED
@@ -384,7 +384,7 @@ var Portal = class {
384
384
  const focusables = this.#getFocusables();
385
385
  if (!focusables.length) {
386
386
  event.preventDefault();
387
- (event.shiftKey ? this.#entranceSentinel : this.#exitSentinel).focus();
387
+ this.#focusSentinel(event.shiftKey);
388
388
  return;
389
389
  }
390
390
  const index = focusables.indexOf(active);
@@ -396,13 +396,13 @@ var Portal = class {
396
396
  if (focusable) {
397
397
  focusElement(focusable);
398
398
  } else {
399
- (event.shiftKey ? this.#entranceSentinel : this.#exitSentinel).focus();
399
+ this.#focusSentinel(event.shiftKey);
400
400
  }
401
401
  };
402
402
  #update() {
403
403
  const current = /* @__PURE__ */ new Set([
404
- ...getFocusables(this.#host, { composed: true }),
405
- ...this.#getFocusables()
404
+ ...this.#getFocusables(),
405
+ ...getFocusables(this.#host, { composed: true })
406
406
  ]);
407
407
  this.#focusables.forEach((focusable) => {
408
408
  if (current.has(focusable)) {
@@ -436,12 +436,15 @@ var Portal = class {
436
436
  sentinel.style.cssText += VISUALLY_HIDDEN_CSS;
437
437
  return sentinel;
438
438
  }
439
+ #focusSentinel(isPrevious) {
440
+ requestAnimationFrame(
441
+ () => (isPrevious ? this.#entranceSentinel : this.#exitSentinel).focus()
442
+ );
443
+ }
439
444
  #getFocusables() {
440
445
  return getFocusables(this.#host, {
441
446
  composed: true,
442
- include: (element) => {
443
- return this.#focusables.has(element);
444
- }
447
+ include: (element) => this.#focusables.has(element)
445
448
  });
446
449
  }
447
450
  #moveFocus(direction) {
@@ -478,7 +481,7 @@ function getActiveElement2() {
478
481
  * Lightweight DOM portal (teleport) utility with fully focus management.
479
482
  * Designed for accessible dialogs, menus, overlays, popovers.
480
483
  *
481
- * @version 1.2.0
484
+ * @version 1.2.2
482
485
  * @author Yusuke Kamiyamane
483
486
  * @license MIT
484
487
  * @copyright Copyright (c) Yusuke Kamiyamane
package/dist/index.d.cts CHANGED
@@ -3,7 +3,7 @@
3
3
  * Lightweight DOM portal (teleport) utility with fully focus management.
4
4
  * Designed for accessible dialogs, menus, overlays, popovers.
5
5
  *
6
- * @version 1.2.0
6
+ * @version 1.2.2
7
7
  * @author Yusuke Kamiyamane
8
8
  * @license MIT
9
9
  * @copyright Copyright (c) Yusuke Kamiyamane
package/dist/index.d.ts CHANGED
@@ -3,7 +3,7 @@
3
3
  * Lightweight DOM portal (teleport) utility with fully focus management.
4
4
  * Designed for accessible dialogs, menus, overlays, popovers.
5
5
  *
6
- * @version 1.2.0
6
+ * @version 1.2.2
7
7
  * @author Yusuke Kamiyamane
8
8
  * @license MIT
9
9
  * @copyright Copyright (c) Yusuke Kamiyamane
package/dist/index.js CHANGED
@@ -382,7 +382,7 @@ var Portal = class {
382
382
  const focusables = this.#getFocusables();
383
383
  if (!focusables.length) {
384
384
  event.preventDefault();
385
- (event.shiftKey ? this.#entranceSentinel : this.#exitSentinel).focus();
385
+ this.#focusSentinel(event.shiftKey);
386
386
  return;
387
387
  }
388
388
  const index = focusables.indexOf(active);
@@ -394,13 +394,13 @@ var Portal = class {
394
394
  if (focusable) {
395
395
  focusElement(focusable);
396
396
  } else {
397
- (event.shiftKey ? this.#entranceSentinel : this.#exitSentinel).focus();
397
+ this.#focusSentinel(event.shiftKey);
398
398
  }
399
399
  };
400
400
  #update() {
401
401
  const current = /* @__PURE__ */ new Set([
402
- ...getFocusables(this.#host, { composed: true }),
403
- ...this.#getFocusables()
402
+ ...this.#getFocusables(),
403
+ ...getFocusables(this.#host, { composed: true })
404
404
  ]);
405
405
  this.#focusables.forEach((focusable) => {
406
406
  if (current.has(focusable)) {
@@ -434,12 +434,15 @@ var Portal = class {
434
434
  sentinel.style.cssText += VISUALLY_HIDDEN_CSS;
435
435
  return sentinel;
436
436
  }
437
+ #focusSentinel(isPrevious) {
438
+ requestAnimationFrame(
439
+ () => (isPrevious ? this.#entranceSentinel : this.#exitSentinel).focus()
440
+ );
441
+ }
437
442
  #getFocusables() {
438
443
  return getFocusables(this.#host, {
439
444
  composed: true,
440
- include: (element) => {
441
- return this.#focusables.has(element);
442
- }
445
+ include: (element) => this.#focusables.has(element)
443
446
  });
444
447
  }
445
448
  #moveFocus(direction) {
@@ -476,7 +479,7 @@ function getActiveElement2() {
476
479
  * Lightweight DOM portal (teleport) utility with fully focus management.
477
480
  * Designed for accessible dialogs, menus, overlays, popovers.
478
481
  *
479
- * @version 1.2.0
482
+ * @version 1.2.2
480
483
  * @author Yusuke Kamiyamane
481
484
  * @license MIT
482
485
  * @copyright Copyright (c) Yusuke Kamiyamane
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@y14e/portal",
3
- "version": "1.2.0",
3
+ "version": "1.2.2",
4
4
  "description": "Lightweight DOM portal (teleport) utility with fully focus management",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",