@refinitiv-ui/elements 7.0.0 → 7.0.2

package/lib/overlay/elements/overlay.js

@@ -1,26 +1,26 @@
 var Overlay_1;
 import { __decorate } from "tslib";
-import { ResponsiveElement, html, css, triggerResize } from '@refinitiv-ui/core';
+import { ResponsiveElement, css, html, triggerResize } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { AnimationTaskRunner, MicroTaskRunner } from '@refinitiv-ui/utils/async.js';
 import { VERSION } from '../../version.js';
-import { MicroTaskRunner, AnimationTaskRunner } from '@refinitiv-ui/utils/async.js';
+import { valueOrNull, valueOrZero } from '../helpers/functions.js';
 import { DEFAULT_ALIGN, DEFAULT_TARGET_STRATEGY } from '../helpers/types.js';
-import { valueOrZero, valueOrNull } from '../helpers/functions.js';
+import { deregister as backdropDeregister, register as backdropRegister } from '../managers/backdrop-manager.js';
+import { deregister as closeDeregister, register as closeRegister } from '../managers/close-manager.js';
+import { deregister as focusableDeregister, register as focusableRegister } from '../managers/focus-manager.js';
 import { applyLock } from '../managers/interaction-lock-manager.js';
-import { register as viewportRegister, deregister as viewportDeregister, getViewAreaInfo } from '../managers/viewport-manager.js';
-import { register as zIndexRegister, deregister as zIndexDeregister, toFront } from '../managers/zindex-manager.js';
-import { register as backdropRegister, deregister as backdropDeregister } from '../managers/backdrop-manager.js';
-import { register as closeRegister, deregister as closeDeregister } from '../managers/close-manager.js';
-import { register as focusableRegister, deregister as focusableDeregister } from '../managers/focus-manager.js';
+import { getViewAreaInfo, deregister as viewportDeregister, register as viewportRegister } from '../managers/viewport-manager.js';
+import { toFront, deregister as zIndexDeregister, register as zIndexRegister } from '../managers/zindex-manager.js';
 /**
  * Possible states of the overlay
  */
 var OpenedState;
 (function (OpenedState) {
-    OpenedState[OpenedState["CLOSED"] = 0] = "CLOSED";
-    OpenedState[OpenedState["OPENING"] = 1] = "OPENING";
-    OpenedState[OpenedState["OPENED"] = 2] = "OPENED";
+    OpenedState[OpenedState["CLOSED"] = 0] = "CLOSED"; /* overlay is not visible on the screen */
+    OpenedState[OpenedState["OPENING"] = 1] = "OPENING"; /* overlay is visible on the screen, but opening animation is still running */
+    OpenedState[OpenedState["OPENED"] = 2] = "OPENED"; /* overlay is visible on the screen */
     OpenedState[OpenedState["CLOSING"] = 3] = "CLOSING"; /* overlay is visible on the screen, but closing animation is still running */
 })(OpenedState || (OpenedState = {}));
 /**
@@ -55,11 +55,28 @@ const hasNumberChanged = (newVal, oldVal) => oldVal === undefined ? false : newV
 /**
  * When these properties change render is called
  */
-const shouldUpdateProperties = ['withShadow', 'transparent', 'spacing', 'transitionStyle', 'fullScreen', 'zIndex'];
+const shouldUpdateProperties = [
+    'withShadow',
+    'transparent',
+    'spacing',
+    'transitionStyle',
+    'fullScreen',
+    'zIndex'
+];
 /**
  * When these properties change refit is called
  */
-const shouldRefitProperties = ['position', 'x', 'y', 'positionTarget', 'horizontalOffset', 'verticalOffset', 'offset', 'fullScreen', 'noOverlap'];
+const shouldRefitProperties = [
+    'position',
+    'x',
+    'y',
+    'positionTarget',
+    'horizontalOffset',
+    'verticalOffset',
+    'offset',
+    'fullScreen',
+    'noOverlap'
+];
 /**
  * Element to help building modals, dialogs and other overlay content
  * @fires closed - Fired when overlay becomes invisible and close animation finished
@@ -204,7 +221,7 @@ let Overlay = Overlay_1 = class Overlay extends ResponsiveElement {
       }
 
       :host(:not([animation-ready])) {
-        animation: none  !important;
+        animation: none !important;
         transition: none !important;
         transform: none !important;
         top: 0;
@@ -221,82 +238,104 @@ let Overlay = Overlay_1 = class Overlay extends ResponsiveElement {
       }
 
       @keyframes popup-scale {
-        from { transform: scale(0, 0); }
-        to { transform: scale(1, 1); }
+        from {
+          transform: scale(0, 0);
+        }
+        to {
+          transform: scale(1, 1);
+        }
       }
 
       @keyframes popup-scale-vertical {
-        from { transform: scaleY(0); }
-        to { transform: scaleY(1); }
+        from {
+          transform: scaleY(0);
+        }
+        to {
+          transform: scaleY(1);
+        }
       }
 
       @keyframes popup-scale-horizontal {
-        from { transform: scaleX(0); }
-        to { transform: scaleX(1); }
+        from {
+          transform: scaleX(0);
+        }
+        to {
+          transform: scaleX(1);
+        }
       }
 
       @keyframes popup-scale-fade {
-        from { opacity: 0; }
-        58% { opacity: 0.3; }
-        to { opacity: 1; }
+        from {
+          opacity: 0;
+        }
+        58% {
+          opacity: 0.3;
+        }
+        to {
+          opacity: 1;
+        }
       }
 
       @keyframes popup-fade {
-        from { opacity: 0; }
-        to { opacity: 1; }
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
       }
 
       /* set origins */
-      :host([transition-style="slide-down"]),
-      :host([transition-style="slide"][animation-position="bottom"]) {
+      :host([transition-style='slide-down']),
+      :host([transition-style='slide'][animation-position='bottom']) {
         transform-origin: center top;
       }
-      :host([transition-style="slide-up"]),
-      :host([transition-style="slide"][animation-position="top"]) {
+      :host([transition-style='slide-up']),
+      :host([transition-style='slide'][animation-position='top']) {
         transform-origin: center bottom;
       }
-      :host([transition-style="slide-left"]),
-      :host([transition-style="slide"][animation-position="left"]) {
+      :host([transition-style='slide-left']),
+      :host([transition-style='slide'][animation-position='left']) {
         transform-origin: right center;
       }
-      :host([transition-style="slide-right"]),
-      :host([transition-style="slide"][animation-position="right"]) {
+      :host([transition-style='slide-right']),
+      :host([transition-style='slide'][animation-position='right']) {
         transform-origin: left center;
       }
-      :host([transition-style="slide-right-down"]) {
+      :host([transition-style='slide-right-down']) {
         transform-origin: left top;
       }
-      :host([transition-style="slide-right-up"]) {
+      :host([transition-style='slide-right-up']) {
         transform-origin: left bottom;
       }
-      :host([transition-style="slide-left-down"]) {
+      :host([transition-style='slide-left-down']) {
         transform-origin: right top;
       }
-      :host([transition-style="slide-left-up"]) {
+      :host([transition-style='slide-left-up']) {
         transform-origin: right bottom;
       }
 
       /* set animation names */
-      :host([transition-style="slide-right-down"]),
-      :host([transition-style="slide-right-up"]),
-      :host([transition-style="slide-left-down"]),
-      :host([transition-style="slide-left-up"]),
-      :host([transition-style="zoom"]) {
+      :host([transition-style='slide-right-down']),
+      :host([transition-style='slide-right-up']),
+      :host([transition-style='slide-left-down']),
+      :host([transition-style='slide-left-up']),
+      :host([transition-style='zoom']) {
         animation-name: popup-scale, popup-scale-fade;
       }
-      :host([transition-style="fade"]) {
+      :host([transition-style='fade']) {
         animation-name: popup-fade;
       }
-      :host([transition-style="slide-down"]),
-      :host([transition-style="slide"][animation-position="bottom"]),
-      :host([transition-style="slide-up"]),
-      :host([transition-style="slide"][animation-position="top"]) {
+      :host([transition-style='slide-down']),
+      :host([transition-style='slide'][animation-position='bottom']),
+      :host([transition-style='slide-up']),
+      :host([transition-style='slide'][animation-position='top']) {
         animation-name: popup-scale-vertical, popup-scale-fade;
       }
-      :host([transition-style="slide-left"]),
-      :host([transition-style="slide"][animation-position="left"]),
-      :host([transition-style="slide-right"]),
-      :host([transition-style="slide"][animation-position="right"]) {
+      :host([transition-style='slide-left']),
+      :host([transition-style='slide'][animation-position='left']),
+      :host([transition-style='slide-right']),
+      :host([transition-style='slide'][animation-position='right']) {
         animation-name: popup-scale-horizontal, popup-scale-fade;
       }
 
@@ -343,7 +382,7 @@ let Overlay = Overlay_1 = class Overlay extends ResponsiveElement {
             return undefined;
         }
         const positionList = [...this.position];
-        const positionStrategy = this._positionStrategy = [];
+        const positionStrategy = (this._positionStrategy = []);
         while (positionList.length) {
             const position = positionList.shift();
             if (!position) {
@@ -369,7 +408,8 @@ let Overlay = Overlay_1 = class Overlay extends ResponsiveElement {
         const { viewHeight, viewWidth, viewOffsetTop, viewOffsetLeft } = this.viewAreaInfo;
         let left;
         let top;
-        if (this.fullScreen) { /* keep it for caching only to not break other algorithms */
+        if (this.fullScreen) {
+            /* keep it for caching only to not break other algorithms */
             return {
                 rect: {
                     top: 0,
@@ -534,7 +574,7 @@ let Overlay = Overlay_1 = class Overlay extends ResponsiveElement {
         let shouldUpdate = opening || closing || !this.hasUpdated || changedProperties.size === 0;
         // Element may need to be updated if other attributes has been changed while the overlay is opened
         if (!shouldUpdate && isOpened) {
-            if (shouldUpdateProperties.find(property => changedProperties.has(property))) {
+            if (shouldUpdateProperties.find((property) => changedProperties.has(property))) {
                 shouldUpdate = true;
             }
         }
@@ -546,7 +586,7 @@ let Overlay = Overlay_1 = class Overlay extends ResponsiveElement {
         }
         else if (this.opened) {
             // Explicitly call hard refit
-            if (shouldRefitProperties.find(property => changedProperties.has(property))) {
+            if (shouldRefitProperties.find((property) => changedProperties.has(property))) {
                 this.refit();
             }
         }
@@ -559,7 +599,8 @@ let Overlay = Overlay_1 = class Overlay extends ResponsiveElement {
      */
     openedChange() {
         if (!this.opened) {
-            if (this._fullyOpened === OpenedState.OPENED) { /* cannot set to closing if the overlay has not been fully opened */
+            if (this._fullyOpened === OpenedState.OPENED) {
+                /* cannot set to closing if the overlay has not been fully opened */
                 this._fullyOpened = OpenedState.CLOSING;
             }
             this.removeMainRegisters();
@@ -600,7 +641,10 @@ let Overlay = Overlay_1 = class Overlay extends ResponsiveElement {
         else if (disablingFocusManagement) {
             focusableDeregister(this);
         }
-        if (opening || changedProperties.has('noInteractionLock') || changedProperties.has('lockPositionTarget') || changedProperties.has('interactiveElements')) {
+        if (opening ||
+            changedProperties.has('noInteractionLock') ||
+            changedProperties.has('lockPositionTarget') ||
+            changedProperties.has('interactiveElements')) {
             applyLock();
         }
         const enablingBackdrop = (opening && this.withBackdrop) || (opened && changedProperties.get('withBackdrop') === false);
@@ -735,6 +779,7 @@ let Overlay = Overlay_1 = class Overlay extends ResponsiveElement {
             const style = this.style;
             // get minWidth and maxWidth
             this._sizingInfo = {
+                /* cache any sizing info defined in styles, as we may operate on these values */
                 computed: {
                     minWidth: valueOrNull(computeStyle.minWidth),
                     maxWidth: valueOrNull(computeStyle.maxWidth),
@@ -801,19 +846,23 @@ let Overlay = Overlay_1 = class Overlay extends ResponsiveElement {
         const limit = () => {
             const { width, height } = this.sizingRect;
             let secondRun = false;
-            if (computed.minWidth && computed.minWidth > maxWidth) { /* Adjust min-width to always fit */
+            if (computed.minWidth && computed.minWidth > maxWidth) {
+                /* Adjust min-width to always fit */
                 this.setPropertyIf('min-width', `${maxWidth}px`);
                 secondRun = true;
             }
-            if (width > viewAreaWidth) { /* Adjust max-width to always fit */
+            if (width > viewAreaWidth) {
+                /* Adjust max-width to always fit */
                 this.setPropertyIf('max-width', `${maxWidth}px`);
                 secondRun = true;
             }
-            if (computed.minHeight && computed.minHeight > maxHeight) { /* Adjust min-height to always fit */
+            if (computed.minHeight && computed.minHeight > maxHeight) {
+                /* Adjust min-height to always fit */
                 this.setPropertyIf('min-height', `${maxHeight}px`);
                 secondRun = true;
             }
-            if (height > viewAreaHeight) { /* Adjust max-height to always fit */
+            if (height > viewAreaHeight) {
+                /* Adjust max-height to always fit */
                 this.setPropertyIf('max-height', `${maxHeight}px`);
                 secondRun = true;
             }
@@ -902,7 +951,8 @@ let Overlay = Overlay_1 = class Overlay extends ResponsiveElement {
      */
     fitPositionTarget() {
         this.resetSizingInfo();
-        if (this.fullScreen) { /* no need to calculate anything else in full screen mode */
+        if (this.fullScreen) {
+            /* no need to calculate anything else in full screen mode */
             this.setPositionStyle({
                 top: 0,
                 left: 0,
@@ -924,10 +974,10 @@ let Overlay = Overlay_1 = class Overlay extends ResponsiveElement {
         const { viewHeight, viewWidth } = this.viewAreaInfo;
         const { width, height } = this.sizingRect;
         const calculatedPositionList = [];
-        const isOutsideView = targetRect.bottom < 0
-            || targetRect.top > viewHeight
-            || targetRect.right < 0
-            || targetRect.left > viewWidth; /* position target is outside view */
+        const isOutsideView = targetRect.bottom < 0 ||
+            targetRect.top > viewHeight ||
+            targetRect.right < 0 ||
+            targetRect.left > viewWidth; /* position target is outside view */
         const canAlignPosition = (isVertical, align) => {
             if (isVertical) {
                 let left;
@@ -996,10 +1046,10 @@ let Overlay = Overlay_1 = class Overlay extends ResponsiveElement {
                     }
                     const position = strategy[Position];
                     const align = strategy[Alignment];
-                    if ((isVertical && isBefore && position === 'bottom')
-                        || (isVertical && !isBefore && position === 'top')
-                        || (!isVertical && isBefore && position === 'right')
-                        || (!isVertical && !isBefore && position === 'left')) {
+                    if ((isVertical && isBefore && position === 'bottom') ||
+                        (isVertical && !isBefore && position === 'top') ||
+                        (!isVertical && isBefore && position === 'right') ||
+                        (!isVertical && !isBefore && position === 'left')) {
                         return align;
                     }
                 }
@@ -1023,14 +1073,16 @@ let Overlay = Overlay_1 = class Overlay extends ResponsiveElement {
                 position = 'left';
                 right = 0;
             }
-            if (top === undefined && bottom === undefined) { /* position target is outside left or right */
+            if (top === undefined && bottom === undefined) {
+                /* position target is outside left or right */
                 // always attach to the middle of the screen
                 const align = findAlignMatch(false, targetRect.right <= 0);
                 const alignPosition = canAlignPosition(false, align);
                 top = alignPosition.top;
                 bottom = alignPosition.bottom;
             }
-            if (right === undefined && left === undefined) { /* position target is outside top or bottom */
+            if (right === undefined && left === undefined) {
+                /* position target is outside top or bottom */
                 const align = findAlignMatch(true, targetRect.bottom <= 0);
                 const alignPosition = canAlignPosition(true, align);
                 left = alignPosition.left;
@@ -1080,10 +1132,10 @@ let Overlay = Overlay_1 = class Overlay extends ResponsiveElement {
                     area = Math.min(viewHeight, height) * targetRect.left;
                     canPosition = right >= 0 && right + width <= viewWidth;
                     break;
-                case 'center': /* noOverlap is not valid for center. Center can be always positioned */
+                case 'center' /* noOverlap is not valid for center. Center can be always positioned */:
                     top = targetRect.top + targetRect.height / 2 - height / 2 + positionVerticalOffset;
                     bottom = top + height > viewHeight ? 0 : undefined;
-                    top = top < 0 ? 0 : (bottom === undefined ? top : undefined);
+                    top = top < 0 ? 0 : bottom === undefined ? top : undefined;
                     canPosition = true; /* no overlap does not make sense here */
                     area = Infinity;
                     break;
@@ -1099,7 +1151,8 @@ let Overlay = Overlay_1 = class Overlay extends ResponsiveElement {
                 top = alignPosition.top;
                 bottom = alignPosition.bottom;
             }
-            if (canAlign && canPosition) { /* no need to continue */
+            if (canAlign && canPosition) {
+                /* no need to continue */
                 this.calculated.position = position;
                 this.setPositionStyle({
                     top,
@@ -1164,21 +1217,25 @@ let Overlay = Overlay_1 = class Overlay extends ResponsiveElement {
         const { isVertical, top, position, left, right, bottom } = calculatedPositionList[0];
         const getNewPosition = () => {
             if (isVertical) {
-                return position === 'bottom' ? {
-                    bottom: 0,
-                    top: null
-                } : {
-                    bottom: null,
-                    top: 0 /* position up-bottom */
-                };
+                return position === 'bottom'
+                    ? {
+                        bottom: 0 /* position bottom-up */,
+                        top: null
+                    }
+                    : {
+                        bottom: null,
+                        top: 0 /* position up-bottom */
+                    };
             }
-            return position === 'right' ? {
-                right: 0,
-                left: null
-            } : {
-                right: null,
-                left: 0 /* position left-right */
-            };
+            return position === 'right'
+                ? {
+                    right: 0 /* position right-left */,
+                    left: null
+                }
+                : {
+                    right: null,
+                    left: 0 /* position left-right */
+                };
         };
         this.calculated.position = position;
         this.setPositionStyle(Object.assign({
@@ -1238,10 +1295,12 @@ let Overlay = Overlay_1 = class Overlay extends ResponsiveElement {
             this.setResizeSizingInfo();
             this.fitNonThrottled();
             if (this.opened) {
-                if (this._fullyOpened === OpenedState.CLOSED) { /* cannot set to opening if the overlay has not been fully closed */
+                if (this._fullyOpened === OpenedState.CLOSED) {
+                    /* cannot set to opening if the overlay has not been fully closed */
                     this._fullyOpened = OpenedState.OPENING;
                 }
-                if (this.transitionStyle) { /* this must come last when all register actions are completed */
+                if (this.transitionStyle) {
+                    /* this must come last when all register actions are completed */
                     this.onOpenedChangedAnimation();
                 }
                 else {
@@ -1352,7 +1411,7 @@ __decorate([
             if (!oldVal || newVal.length !== oldVal.length) {
                 return true;
             }
-            return newVal.some(el => !oldVal.includes(el));
+            return newVal.some((el) => !oldVal.includes(el));
         }
     })
 ], Overlay.prototype, "interactiveElements", void 0);
@@ -1370,10 +1429,7 @@ __decorate([
         },
         converter: {
             fromAttribute: (value) => {
-                return value.toLocaleLowerCase()
-                    .replace(/ /g, '')
-                    .replace(/\|/g, ',')
-                    .split(',');
+                return value.toLocaleLowerCase().replace(/ /g, '').replace(/\|/g, ',').split(',');
             }
         }
     })

package/lib/overlay/helpers/types.d.ts

@@ -1,4 +1,4 @@
-type Position = ('top' | 'right' | 'bottom' | 'left' | 'center' | 'top-start' | 'top-middle' | 'top-end' | 'right-start' | 'right-middle' | 'right-end' | 'bottom-start' | 'bottom-middle' | 'bottom-end' | 'left-start' | 'left-middle' | 'left-end' | 'center-middle');
+type Position = 'top' | 'right' | 'bottom' | 'left' | 'center' | 'top-start' | 'top-middle' | 'top-end' | 'right-start' | 'right-middle' | 'right-end' | 'bottom-start' | 'bottom-middle' | 'bottom-end' | 'left-start' | 'left-middle' | 'left-end' | 'center-middle';
 type PositionTarget = HTMLElement | 'top' | 'right' | 'bottom' | 'left' | 'center' | 'top right' | 'right top' | 'top center' | 'center top' | 'top left' | 'left top' | 'bottom right' | 'right bottom' | 'bottom center' | 'center bottom' | 'bottom left' | 'left bottom' | 'center left' | 'left center' | 'center right' | 'right center' | 'center center';
 type TransitionStyle = 'slide' | 'fade' | 'zoom' | 'slide-down' | 'slide-up' | 'slide-right' | 'slide-left' | 'slide-right-down' | 'slide-right-up' | 'slide-left-down' | 'slide-left-up';
 type Calculated = {

package/lib/overlay/managers/backdrop-manager.d.ts

@@ -1,5 +1,5 @@
-import type { Overlay } from '../elements/overlay';
 import '../elements/overlay-backdrop.js';
+import type { Overlay } from '../elements/overlay';
 /**
  * Backdrop manager adds a backdrop to the body
  * @returns {void}

package/lib/overlay/managers/backdrop-manager.js

@@ -1,5 +1,5 @@
-import { getOverlayLayers } from './zindex-manager.js';
 import '../elements/overlay-backdrop.js';
+import { getOverlayLayers } from './zindex-manager.js';
 /**
  * Backdrop manager adds a backdrop to the body
  * @returns {void}
@@ -61,7 +61,7 @@ export class BackdropManager {
      * @returns {void}
      */
     clear() {
-        this.registry.forEach(overlay => this.deregister(overlay));
+        this.registry.forEach((overlay) => this.deregister(overlay));
     }
 }
 const backdropManager = new BackdropManager();

package/lib/overlay/managers/close-manager.js

@@ -39,7 +39,7 @@ export class CloseManager {
         };
     }
     get overlays() {
-        return getOverlays().filter(overlay => this.registry.has(overlay));
+        return getOverlays().filter((overlay) => this.registry.has(overlay));
     }
     getTopOverlay() {
         const overlay = this.overlays[0];
@@ -69,6 +69,7 @@ export class CloseManager {
         closeCallback();
     }
     register(overlay, closeCallback) {
+        /* we must pass closeCallback as it is a private function for overlay */
         if (!this.registry.size) {
             const eventOptions = {
                 capture: true,

package/lib/overlay/managers/focus-manager.js

@@ -1,6 +1,6 @@
+import { FocusableHelper, isBasicElement } from '@refinitiv-ui/core';
 import { AnimationTaskRunner } from '@refinitiv-ui/utils/async.js';
 import { getOverlays } from './zindex-manager.js';
-import { isBasicElement, FocusableHelper } from '@refinitiv-ui/core';
 /**
  * Focus manager ensures that the correct
  * element receives the focus
@@ -42,12 +42,12 @@ export class FocusManager {
         };
     }
     get overlays() {
-        return getOverlays().filter(overlay => this.registry.has(overlay));
+        return getOverlays().filter((overlay) => this.registry.has(overlay));
     }
     get focusBoundaryElements() {
         return getOverlays()
-            .map(overlay => overlay.focusBoundary)
-            .filter(focusBoundary => focusBoundary !== null);
+            .map((overlay) => overlay.focusBoundary)
+            .filter((focusBoundary) => focusBoundary !== null);
     }
     getTabbableElements(overlay) {
         return overlay.focusBoundary ? FocusableHelper.getTabbableNodes(overlay.focusBoundary) : [];
@@ -59,17 +59,19 @@ export class FocusManager {
         for (let i = 0; i < sorted.length; i += 1) {
             const overlay = sorted[i];
             const tabbable = this.getTabbableElements(overlay);
-            tabbable.forEach(node => tabbableMap.set(node, overlay));
+            tabbable.forEach((node) => tabbableMap.set(node, overlay));
             if (reverse) {
                 nodes.push(...tabbable);
             }
             else {
                 nodes.splice(0, 0, ...tabbable);
             }
-            if (overlay.withBackdrop) { /* if the overlay has backdrop all other overlays with smaller z-index are outside tab scope */
+            if (overlay.withBackdrop) {
+                /* if the overlay has backdrop all other overlays with smaller z-index are outside tab scope */
                 break;
             }
-            if (document.activeElement === overlay && nodes.length) { /* if overlay itself is in focus, try to always focus withing the focused overlay */
+            if (document.activeElement === overlay && nodes.length) {
+                /* if overlay itself is in focus, try to always focus withing the focused overlay */
                 break;
             }
         }
@@ -86,7 +88,8 @@ export class FocusManager {
         if (nodes.length === 0) {
             return;
         }
-        if (nodes.length === 1) { /* no other focusable nodes */
+        if (nodes.length === 1) {
+            /* no other focusable nodes */
             event.preventDefault();
             nodes[0].focus();
             return;
@@ -110,7 +113,9 @@ export class FocusManager {
         if (isBasicElement(activeElement) && activeElement.delegatesFocus) {
             activeElement = activeElement.tabbableElements[0] || activeElement;
         }
-        if (!activeElement || activeElement === nodes[nodes.length - 1] || !this.isFocusBoundaryDescendant(activeElement)) {
+        if (!activeElement ||
+            activeElement === nodes[nodes.length - 1] ||
+            !this.isFocusBoundaryDescendant(activeElement)) {
             return nodes[0];
         }
         return null;
@@ -128,17 +133,22 @@ export class FocusManager {
         const focusBoundaryElements = this.focusBoundaryElements;
         let node = element.assignedSlot || element.parentNode;
         while (node) {
-            if ((node instanceof HTMLElement || node instanceof ShadowRoot) && focusBoundaryElements.includes(node)) {
+            if ((node instanceof HTMLElement || node instanceof ShadowRoot) &&
+                focusBoundaryElements.includes(node)) {
                 return true;
             }
             // parenNode is not defined if the node is inside document fragment. Use host instead
-            node = node.nodeType === Node.DOCUMENT_FRAGMENT_NODE ? node.host : (node.assignedSlot || node.parentNode);
+            node =
+                node.nodeType === Node.DOCUMENT_FRAGMENT_NODE
+                    ? node.host
+                    : node.assignedSlot || node.parentNode;
         }
         return false;
     }
     register(overlay) {
         if (!this.registry.size) {
-            this.restoreFocusElement = this.getActiveElement(); /* store this only once, as overlay order may change */
+            this.restoreFocusElement =
+                this.getActiveElement(); /* store this only once, as overlay order may change */
             document.addEventListener('keydown', this.onDocumentKeyDown, { capture: true });
         }
         if (!this.registry.has(overlay)) {
@@ -199,7 +209,7 @@ export class FocusManager {
      * @returns {void}
      */
     clear() {
-        this.registry.forEach(overlay => this.deregister(overlay));
+        this.registry.forEach((overlay) => this.deregister(overlay));
     }
 }
 const focusManager = new FocusManager();

package/lib/overlay/managers/interaction-lock-manager.d.ts

@@ -131,8 +131,8 @@ export declare class ScrollLockManager {
     private shouldCancelScroll;
 }
 /**
-* Lock the screen and make top most overlay
-* and its position target interactive
-* @returns {void}
-*/
+ * Lock the screen and make top most overlay
+ * and its position target interactive
+ * @returns {void}
+ */
 export declare const applyLock: () => void;