@lion/overlays - npm Package Compare versions

Comparing version 0.25.2 to 0.26.0

CHANGELOG.md

 # Change Log
 
+## 0.26.0
+
+### Minor Changes
+
+- 43e4bb81: Type fixes and enhancements:
+
+  - all protected/private entries added to form-core type definitions, and their dependents were fixed
+  - a lot @ts-expect-error and @ts-ignore (all `get slots()` and `get modelValue()` issues are fixed)
+  - categorized @ts-expect-error / @ts-ignore into:
+    - [external]: when a 3rd party didn't ship types (could also be browser specs)
+    - [allow-protected]: when we are allowed to know about protected methods. For instance when code
+      resides in the same package
+    - [allow-private]: when we need to check a private value inside a test
+    - [allow]: miscellaneous allows
+    - [editor]: when the editor complains, but the cli/ci doesn't
+
+### Patch Changes
+
+- 77a04245: add protected and private type info
+- Updated dependencies [77a04245]
+- Updated dependencies [43e4bb81]
+  - @lion/core@0.16.0
+  - singleton-manager@1.4.1
+
 ## 0.25.2
@@ -4,0 +28,0 @@

docs/configuration.md

@@ -71,3 +71,3 @@ # Systems >> Overlays >> Configuration ||40
 
-As specified in the [overlay rationale](https://github.com/ing-bank/lion/blob/1f025d5fe71d9e3e074ebdc6a83f934339c10633/docs/docs/systems/overlays/rationale.md) there are only two official types of overlays: dialogs and tooltips. And their main differences are:
+As specified in the [overlay rationale](https://github.com/ing-bank/lion/blob/d65ffd3c04a456407df98b68b8ff860de5fe5cf8/docs/docs/systems/overlays/rationale.md) there are only two official types of overlays: dialogs and tooltips. And their main differences are:
 
@@ -363,3 +363,3 @@ - Dialogs have a modal option, tooltips don’t
 > This also means that if you use the arrow feature, you are in charge of styling it properly, use the data-popper-placement attribute for this.
-> An example implementation can be found in [lion-tooltip](https://github.com/ing-bank/lion/blob/1f025d5fe71d9e3e074ebdc6a83f934339c10633/docs/components/interaction/tooltip/overview.md), where an arrow is set by default.
+> An example implementation can be found in [lion-tooltip](https://github.com/ing-bank/lion/blob/d65ffd3c04a456407df98b68b8ff860de5fe5cf8/docs/components/interaction/tooltip/overview.md), where an arrow is set by default.
 
@@ -366,0 +366,0 @@ To override the default options we set for local mode, you add a `popperConfig` object to the config passed to the OverlayController.

docs/features.md

@@ -24,3 +24,3 @@ # Systems >> Overlays >> Features ||20
 
-For a detailed rationale, please consult [Rationale](https://github.com/ing-bank/lion/blob/1f025d5fe71d9e3e074ebdc6a83f934339c10633/docs/docs/systems/overlays/rationale.md).
+For a detailed rationale, please consult [Rationale](https://github.com/ing-bank/lion/blob/d65ffd3c04a456407df98b68b8ff860de5fe5cf8/docs/docs/systems/overlays/rationale.md).
 
@@ -71,3 +71,3 @@ ```js preview-story
 
-We also export a few [preset configuration objects](https://github.com/ing-bank/lion/blob/1f025d5fe71d9e3e074ebdc6a83f934339c10633/docs/docs/systems/overlays/configuration.md).
+We also export a few [preset configuration objects](https://github.com/ing-bank/lion/blob/d65ffd3c04a456407df98b68b8ff860de5fe5cf8/docs/docs/systems/overlays/configuration.md).
 
@@ -74,0 +74,0 @@ - withModalDialogConfig

docs/overview.md

@@ -9,3 +9,3 @@ # Systems >> Overlays >> Overview ||10
 
-See [lion-dialog](../../../components/interaction/dialog/overview.md) and [lion-tooltip](https://github.com/ing-bank/lion/blob/1f025d5fe71d9e3e074ebdc6a83f934339c10633/docs/components/interaction/tooltip/overview.md) for example Web Component implementations using the Overlay System.
+See [lion-dialog](../../../components/interaction/dialog/overview.md) and [lion-tooltip](https://github.com/ing-bank/lion/blob/d65ffd3c04a456407df98b68b8ff860de5fe5cf8/docs/components/interaction/tooltip/overview.md) for example Web Component implementations using the Overlay System.
 
@@ -22,5 +22,5 @@ ## Features
   - Have a `.config` object to set or update the OverlayController's configuration
-- [**OverlaysManager**](https://github.com/ing-bank/lion/blob/1f025d5fe71d9e3e074ebdc6a83f934339c10633/docs/docs/systems/overlays/features.md#overlaysmanager), a global repository keeping track of all different types of overlays
-- [**OverlayController**](https://github.com/ing-bank/lion/blob/1f025d5fe71d9e3e074ebdc6a83f934339c10633/docs/docs/systems/overlays/features.md#overlaycontroller), a single controller class for handling overlays
-- [**OverlayMixin**](https://github.com/ing-bank/lion/blob/1f025d5fe71d9e3e074ebdc6a83f934339c10633/docs/docs/systems/overlays/features.md#overlaymixin), a mixin that can be used to create webcomponents that use the OverlayController under the hood
+- [**OverlaysManager**](https://github.com/ing-bank/lion/blob/d65ffd3c04a456407df98b68b8ff860de5fe5cf8/docs/docs/systems/overlays/features.md#overlaysmanager), a global repository keeping track of all different types of overlays
+- [**OverlayController**](https://github.com/ing-bank/lion/blob/d65ffd3c04a456407df98b68b8ff860de5fe5cf8/docs/docs/systems/overlays/features.md#overlaycontroller), a single controller class for handling overlays
+- [**OverlayMixin**](https://github.com/ing-bank/lion/blob/d65ffd3c04a456407df98b68b8ff860de5fe5cf8/docs/docs/systems/overlays/features.md#overlaymixin), a mixin that can be used to create webcomponents that use the OverlayController under the hood
 
@@ -116,3 +116,3 @@ Usually you will use `lion-dialog` (or `lion-tooltip` if this makes more sense).
 
-Please check the [system rationals](https://github.com/ing-bank/lion/blob/1f025d5fe71d9e3e074ebdc6a83f934339c10633/docs/docs/systems/overlays/rationale.md) folder, where we go more in-depth.
+Please check the [system rationals](https://github.com/ing-bank/lion/blob/d65ffd3c04a456407df98b68b8ff860de5fe5cf8/docs/docs/systems/overlays/rationale.md) folder, where we go more in-depth.
 
@@ -119,0 +119,0 @@ ### Aria roles

package.json

 {
   "name": "@lion/overlays",
-  "version": "0.25.2",
+  "version": "0.26.0",
   "description": "Overlays System using lit-html for rendering",
@@ -40,5 +40,5 @@ "license": "MIT",
   "dependencies": {
-    "@lion/core": "0.15.0",
+    "@lion/core": "0.16.0",
     "@popperjs/core": "^2.5.4",
-    "singleton-manager": "1.4.0"
+    "singleton-manager": "1.4.1"
   },
@@ -57,5 +57,5 @@ "keywords": [
     "./translations/*": "./translations/*",
-    "./test-helpers": "./test-helpers.js",
+    "./test-helpers": "./test-helpers/index.js",
     "./docs/": "./docs/"
   }
 }

README.md

@@ -9,3 +9,3 @@ # Systems >> Overlays >> Overview ||10
 
-See [lion-dialog](../../../components/interaction/dialog/overview.md) and [lion-tooltip](https://github.com/ing-bank/lion/blob/1f025d5fe71d9e3e074ebdc6a83f934339c10633/docs/components/interaction/tooltip/overview.md) for example Web Component implementations using the Overlay System.
+See [lion-dialog](../../../components/interaction/dialog/overview.md) and [lion-tooltip](https://github.com/ing-bank/lion/blob/d65ffd3c04a456407df98b68b8ff860de5fe5cf8/docs/components/interaction/tooltip/overview.md) for example Web Component implementations using the Overlay System.
 
@@ -22,5 +22,5 @@ ## Features
   - Have a `.config` object to set or update the OverlayController's configuration
-- [**OverlaysManager**](https://github.com/ing-bank/lion/blob/1f025d5fe71d9e3e074ebdc6a83f934339c10633/docs/docs/systems/overlays/features.md#overlaysmanager), a global repository keeping track of all different types of overlays
-- [**OverlayController**](https://github.com/ing-bank/lion/blob/1f025d5fe71d9e3e074ebdc6a83f934339c10633/docs/docs/systems/overlays/features.md#overlaycontroller), a single controller class for handling overlays
-- [**OverlayMixin**](https://github.com/ing-bank/lion/blob/1f025d5fe71d9e3e074ebdc6a83f934339c10633/docs/docs/systems/overlays/features.md#overlaymixin), a mixin that can be used to create webcomponents that use the OverlayController under the hood
+- [**OverlaysManager**](https://github.com/ing-bank/lion/blob/d65ffd3c04a456407df98b68b8ff860de5fe5cf8/docs/docs/systems/overlays/features.md#overlaysmanager), a global repository keeping track of all different types of overlays
+- [**OverlayController**](https://github.com/ing-bank/lion/blob/d65ffd3c04a456407df98b68b8ff860de5fe5cf8/docs/docs/systems/overlays/features.md#overlaycontroller), a single controller class for handling overlays
+- [**OverlayMixin**](https://github.com/ing-bank/lion/blob/d65ffd3c04a456407df98b68b8ff860de5fe5cf8/docs/docs/systems/overlays/features.md#overlaymixin), a mixin that can be used to create webcomponents that use the OverlayController under the hood
 
@@ -116,3 +116,3 @@ Usually you will use `lion-dialog` (or `lion-tooltip` if this makes more sense).
 
-Please check the [system rationals](https://github.com/ing-bank/lion/blob/1f025d5fe71d9e3e074ebdc6a83f934339c10633/docs/docs/systems/overlays/rationale.md) folder, where we go more in-depth.
+Please check the [system rationals](https://github.com/ing-bank/lion/blob/d65ffd3c04a456407df98b68b8ff860de5fe5cf8/docs/docs/systems/overlays/rationale.md) folder, where we go more in-depth.
 
@@ -119,0 +119,0 @@ ### Aria roles

src/ArrowMixin.js

@@ -95,2 +95,3 @@ import { css, html, dedupeMixin } from '@lion/core';
       this.hasArrow = true;
+      /** @private */
       this.__setupRepositionCompletePromise();
@@ -109,2 +110,3 @@ }
 
+    /** @protected */
     _arrowNodeTemplate() {
@@ -114,2 +116,3 @@ return html` <div class="arrow" data-popper-arrow>${this._arrowTemplate()}</div> `;
 
+    /** @protected */
     // eslint-disable-next-line class-methods-use-this
@@ -129,2 +132,3 @@ _arrowTemplate() {
      * @returns {OverlayConfig}
+     * @protected
      */
@@ -150,2 +154,3 @@ // eslint-disable-next-line
      * @returns {Partial<PopperOptions>}
+     * @protected
      */
@@ -185,2 +190,3 @@ _getPopperArrowConfig(popperConfigToExtendFrom) {
 
+    /** @private */
     __setupRepositionCompletePromise() {
@@ -198,2 +204,3 @@ this.repositionComplete = new Promise(resolve => {
      * @param {Partial<import('@popperjs/core/lib/popper').State>} data
+     * @private
      */
@@ -200,0 +207,0 @@ __syncFromPopperState(data) {

src/OverlayController.d.ts

@@ -67,14 +67,26 @@ /**
     manager: any;
-    __sharedConfig: import("../types/OverlayConfig.js").OverlayConfig;
-    /** @type {OverlayConfig} */
-    _defaultConfig: OverlayConfig;
-    _contentId: string;
-    __originalAttrs: Map<any, any>;
+    /** @private */
+    private __sharedConfig;
+    /**
+     * @type {OverlayConfig}
+     * @protected
+     */
+    protected _defaultConfig: OverlayConfig;
+    /** @protected */
+    protected _contentId: string;
+    /** @private */
+    private __originalAttrs;
     __isContentNodeProjected: boolean;
-    __hasActiveTrapsKeyboardFocus: boolean;
-    __hasActiveBackdrop: boolean;
-    /** @type {HTMLElement | undefined} */
-    __backdropNodeToBeTornDown: HTMLElement | undefined;
-    __escKeyHandler(ev: KeyboardEvent): false | Promise<void>;
+    /** @private */
+    private __hasActiveTrapsKeyboardFocus;
+    /** @private */
+    private __hasActiveBackdrop;
     /**
+     * @type {HTMLElement | undefined}
+     * @private
+     */
+    private __backdropNodeToBeTornDown;
+    /** @private */
+    private __escKeyHandler;
+    /**
      * The invokerNode
@@ -214,9 +226,11 @@ * @type {HTMLElement | undefined}
      * @type {HTMLElement}
+     * @protected
      */
-    get _renderTarget(): HTMLElement;
+    protected get _renderTarget(): HTMLElement;
     /**
      * @desc The element our local overlay will be positioned relative to.
      * @type {HTMLElement | undefined}
+     * @protected
      */
-    get _referenceNode(): HTMLElement | undefined;
+    protected get _referenceNode(): HTMLElement | undefined;
     /**
@@ -238,18 +252,25 @@ * @param {string} value
     updateConfig(cfgToAdd: OverlayConfig): void;
+    /**
+     * @type {OverlayConfig}
+     * @private
+     */
+    private __prevConfig;
     /** @type {OverlayConfig} */
-    __prevConfig: import("../types/OverlayConfig.js").OverlayConfig | undefined;
-    /** @type {OverlayConfig} */
     config: import("../types/OverlayConfig.js").OverlayConfig | undefined;
-    __elementToFocusAfterHide: HTMLElement | undefined;
+    /** @private */
+    private __elementToFocusAfterHide;
     /**
      * @param {OverlayConfig} newConfig
+     * @private
      */
-    __validateConfiguration(newConfig: OverlayConfig): void;
+    private __validateConfiguration;
     /**
      * @param {{ cfgToAdd: OverlayConfig }} options
+     * @protected
      */
-    _init({ cfgToAdd }: {
+    protected _init({ cfgToAdd }: {
         cfgToAdd: OverlayConfig;
     }): void;
-    __initConnectionTarget(): void;
+    /** @private */
+    private __initConnectionTarget;
     /**
@@ -259,6 +280,5 @@ * Cleanup ._contentWrapperNode. We do this, because creating a fresh wrapper
      * @param {{ cfgToAdd: OverlayConfig }} options
+     * @private
      */
-    __initContentWrapperNode({ cfgToAdd }: {
-        cfgToAdd: OverlayConfig;
-    }): void;
+    private __initContentWrapperNode;
     /** config [l2],[l3],[l4] */
@@ -271,4 +291,5 @@ __contentWrapperNode: HTMLElement | undefined;
      * @param {{ phase: OverlayPhase }} config
+     * @protected
      */
-    _handleZIndex({ phase }: {
+    protected _handleZIndex({ phase }: {
         phase: OverlayPhase;
@@ -278,12 +299,13 @@ }): void;
      * @param {{ phase: OverlayPhase }} config
+     * @private
      */
-    __setupTeardownAccessibility({ phase }: {
-        phase: OverlayPhase;
-    }): void;
+    private __setupTeardownAccessibility;
     /**
      * @param {HTMLElement} node
      * @param {string[]} attrs
+     * @private
      */
-    __storeOriginalAttrs(node: HTMLElement, attrs: string[]): void;
-    __restoreOriginalAttrs(): void;
+    private __storeOriginalAttrs;
+    /** @private */
+    private __restoreOriginalAttrs;
     get isShown(): boolean;
@@ -300,4 +322,5 @@ /**
      * @param {{ phase: OverlayPhase }} config
+     * @protected
      */
-    _handlePosition({ phase }: {
+    protected _handlePosition({ phase }: {
         phase: OverlayPhase;
@@ -307,4 +330,5 @@ }): Promise<void>;
      * @param {{ phase: OverlayPhase }} config
+     * @protected
      */
-    _keepBodySize({ phase }: {
+    protected _keepBodySize({ phase }: {
         phase: OverlayPhase;
@@ -336,4 +360,5 @@ }): void;
      * @param {{backdropNode:HTMLElement, contentNode:HTMLElement}} hideConfig
+     * @protected
      */
-    _transitionHide(hideConfig: {
+    protected _transitionHide(hideConfig: {
         backdropNode: HTMLElement;
@@ -359,3 +384,4 @@ contentNode: HTMLElement;
     }): Promise<void>;
-    _restoreFocus(): void;
+    /** @protected */
+    protected _restoreFocus(): void;
     toggle(): Promise<void>;
@@ -365,4 +391,5 @@ /**
      * @param {{ phase: OverlayPhase }} config
+     * @protected
      */
-    _handleFeatures({ phase }: {
+    protected _handleFeatures({ phase }: {
         phase: OverlayPhase;
@@ -372,4 +399,5 @@ }): void;
      * @param {{ phase: OverlayPhase }} config
+     * @protected
      */
-    _handlePreventsScroll({ phase }: {
+    protected _handlePreventsScroll({ phase }: {
         phase: OverlayPhase;
@@ -379,4 +407,5 @@ }): void;
      * @param {{ phase: OverlayPhase }} config
+     * @protected
      */
-    _handleBlocking({ phase }: {
+    protected _handleBlocking({ phase }: {
         phase: OverlayPhase;
@@ -390,4 +419,5 @@ }): void;
      * @param {{ animation?: boolean, phase: OverlayPhase }} config
+     * @protected
      */
-    _handleBackdrop({ phase }: {
+    protected _handleBackdrop({ phase }: {
         animation?: boolean | undefined;
@@ -400,4 +430,5 @@ phase: OverlayPhase;
      * @param {{ phase: OverlayPhase }} config
+     * @protected
      */
-    _handleTrapsKeyboardFocus({ phase }: {
+    protected _handleTrapsKeyboardFocus({ phase }: {
         phase: OverlayPhase;
@@ -414,4 +445,5 @@ }): void;
      * @param {{ phase: OverlayPhase }} config
+     * @protected
      */
-    _handleHidesOnEsc({ phase }: {
+    protected _handleHidesOnEsc({ phase }: {
         phase: OverlayPhase;
@@ -421,11 +453,14 @@ }): void;
      * @param {{ phase: OverlayPhase }} config
+     * @protected
      */
-    _handleHidesOnOutsideEsc({ phase }: {
+    protected _handleHidesOnOutsideEsc({ phase }: {
         phase: OverlayPhase;
     }): void;
-    _handleInheritsReferenceWidth(): void;
+    /** @protected */
+    protected _handleInheritsReferenceWidth(): void;
     /**
      * @param {{ phase: OverlayPhase }} config
+     * @protected
      */
-    _handleHidesOnOutsideClick({ phase }: {
+    protected _handleHidesOnOutsideClick({ phase }: {
         phase: OverlayPhase;
@@ -440,13 +475,16 @@ }): void;
      * @param {{ phase: OverlayPhase }} config
+     * @protected
      */
-    _handleAccessibility({ phase }: {
+    protected _handleAccessibility({ phase }: {
         phase: OverlayPhase;
     }): void;
     teardown(): void;
-    _teardownContentWrapperNode(): void;
-    __createPopperInstance(): Promise<void>;
+    /** @protected */
+    protected _teardownContentWrapperNode(): void;
+    /** @private */
+    private __createPopperInstance;
     _popper: any;
 }
 export namespace OverlayController {
-    export const popperModule: PopperModule | undefined;
+    export const popperModule: Promise<PopperModule> | undefined;
 }
@@ -453,0 +491,0 @@ export type OverlayConfig = import("../types/OverlayConfig.js").OverlayConfig;

src/OverlayController.js

@@ -21,4 +21,4 @@ import '@lion/core/differentKeyEventNamesShimIE';
 async function preloadPopper() {
-  // @ts-ignore import complains about untyped module, but we typecast it ourselves
-  return /** @type {Promise<PopperModule>} */ (import('@popperjs/core/dist/esm/popper.js'));
+  // @ts-ignore [external]: import complains about untyped module, but we typecast it ourselves
+  return /** @type {* & Promise<PopperModule>} */ (import('@popperjs/core/dist/esm/popper.js'));
 }
@@ -28,3 +28,3 @@
 const GLOBAL_OVERLAYS_CLASS = 'global-overlays__overlay';
-// @ts-expect-error CSS not yet typed
+// @ts-expect-error [external]: CSS not yet typed
 const supportsCSSTypedObject = window.CSS && CSS.number;
@@ -99,5 +99,9 @@
     this.manager = manager;
+    /** @private */
     this.__sharedConfig = config;
 
-    /** @type {OverlayConfig} */
+    /**
+     * @type {OverlayConfig}
+     * @protected
+     */
     this._defaultConfig = {
@@ -161,3 +165,5 @@ placementMode: undefined,
     this.manager.add(this);
+    /** @protected */
     this._contentId = `overlay-content--${Math.random().toString(36).substr(2, 10)}`;
+    /** @private */
     this.__originalAttrs = new Map();
@@ -173,7 +179,13 @@ if (this._defaultConfig.contentNode) {
     this.updateConfig(config);
+    /** @private */
     this.__hasActiveTrapsKeyboardFocus = false;
+    /** @private */
     this.__hasActiveBackdrop = true;
-    /** @type {HTMLElement | undefined} */
+    /**
+     * @type {HTMLElement | undefined}
+     * @private
+     */
     this.__backdropNodeToBeTornDown = undefined;
 
+    /** @private */
     this.__escKeyHandler = this.__escKeyHandler.bind(this);
@@ -385,2 +397,3 @@ }
    * @type {HTMLElement}
+   * @protected
    */
@@ -394,3 +407,3 @@ get _renderTarget() {
     if (this.__isContentNodeProjected) {
-      // @ts-expect-error
+      // @ts-expect-error [external]: fix Node types
       return this.__originalContentParent?.getRootNode().host;
@@ -405,2 +418,3 @@ }
    * @type {HTMLElement | undefined}
+   * @protected
    */
@@ -441,3 +455,6 @@ get _referenceNode() {
 
-    /** @type {OverlayConfig} */
+    /**
+     * @type {OverlayConfig}
+     * @private
+     */
     this.__prevConfig = this.config || {};
@@ -464,6 +481,9 @@
 
+    /** @private */
     this.__validateConfiguration(/** @type {OverlayConfig} */ (this.config));
     // TODO: remove this, so we only have the getters (no setters)
     // Object.assign(this, this.config);
+    /** @protected */
     this._init({ cfgToAdd });
+    /** @private */
     this.__elementToFocusAfterHide = undefined;
@@ -474,2 +494,3 @@ }
    * @param {OverlayConfig} newConfig
+   * @private
    */
@@ -513,2 +534,3 @@ // eslint-disable-next-line class-methods-use-this
    * @param {{ cfgToAdd: OverlayConfig }} options
+   * @protected
    */
@@ -522,3 +544,3 @@ _init({ cfgToAdd }) {
       if (!OverlayController.popperModule) {
-        // @ts-expect-error FIXME: for some reason createPopper is missing here
+        // a@ts-expect-error FIXME: for some reason createPopper is missing here
         OverlayController.popperModule = preloadPopper();
@@ -530,2 +552,3 @@ }
 
+  /** @private */
   __initConnectionTarget() {
@@ -561,2 +584,3 @@ // Now, add our node to the right place in dom (renderTarget)
    * @param {{ cfgToAdd: OverlayConfig }} options
+   * @private
    */
@@ -596,2 +620,3 @@ __initContentWrapperNode({ cfgToAdd }) {
    * @param {{ phase: OverlayPhase }} config
+   * @protected
    */
@@ -613,2 +638,3 @@ _handleZIndex({ phase }) {
    * @param {{ phase: OverlayPhase }} config
+   * @private
    */
@@ -654,2 +680,3 @@ __setupTeardownAccessibility({ phase }) {
    * @param {string[]} attrs
+   * @private
    */
@@ -664,2 +691,3 @@ __storeOriginalAttrs(node, attrs) {
 
+  /** @private */
   __restoreOriginalAttrs() {
@@ -728,2 +756,3 @@ for (const [node, attrMap] of this.__originalAttrs) {
    * @param {{ phase: OverlayPhase }} config
+   * @protected
    */
@@ -752,2 +781,3 @@ async _handlePosition({ phase }) {
    * @param {{ phase: OverlayPhase }} config
+   * @protected
    */
@@ -778,5 +808,5 @@ _keepBodySize({ phase }) {
         if (supportsCSSTypedObject) {
-          // @ts-expect-error types attributeStyleMap + CSS.px not available yet
+          // @ts-expect-error [external]: types attributeStyleMap + CSS.px not available yet
           document.body.attributeStyleMap.set('margin-right', CSS.px(newMarginRight));
-          // @ts-expect-error types attributeStyleMap + CSS.px not available yet
+          // @ts-expect-error [external]: types attributeStyleMap + CSS.px not available yet
           document.body.attributeStyleMap.set('margin-bottom', CSS.px(newMarginBottom));
@@ -842,2 +872,3 @@ } else {
    * @param {{backdropNode:HTMLElement, contentNode:HTMLElement}} hideConfig
+   * @protected
    */
@@ -900,2 +931,3 @@ // eslint-disable-next-line class-methods-use-this, no-empty-function, no-unused-vars
 
+  /** @protected */
   _restoreFocus() {
@@ -921,2 +953,3 @@ // We only are allowed to move focus if we (still) 'own' it.
    * @param {{ phase: OverlayPhase }} config
+   * @protected
    */
@@ -957,2 +990,3 @@ _handleFeatures({ phase }) {
    * @param {{ phase: OverlayPhase }} config
+   * @protected
    */
@@ -973,2 +1007,3 @@ _handlePreventsScroll({ phase }) {
    * @param {{ phase: OverlayPhase }} config
+   * @protected
    */
@@ -996,2 +1031,3 @@ _handleBlocking({ phase }) {
    * @param {{ animation?: boolean, phase: OverlayPhase }} config
+   * @protected
    */
@@ -1057,2 +1093,3 @@ _handleBackdrop({ phase }) {
    * @param {{ phase: OverlayPhase }} config
+   * @protected
    */
@@ -1095,2 +1132,3 @@ _handleTrapsKeyboardFocus({ phase }) {
 
+  /** @private */
   __escKeyHandler(/** @type {KeyboardEvent} */ ev) {
@@ -1102,2 +1140,3 @@ return ev.key === 'Escape' && this.hide();
    * @param {{ phase: OverlayPhase }} config
+   * @protected
    */
@@ -1120,2 +1159,3 @@ _handleHidesOnEsc({ phase }) {
    * @param {{ phase: OverlayPhase }} config
+   * @protected
    */
@@ -1132,2 +1172,3 @@ _handleHidesOnOutsideEsc({ phase }) {
 
+  /** @protected */
   _handleInheritsReferenceWidth() {
@@ -1155,2 +1196,3 @@ if (!this._referenceNode || this.placementMode === 'global') {
    * @param {{ phase: OverlayPhase }} config
+   * @protected
    */
@@ -1247,2 +1289,3 @@ _handleHidesOnOutsideClick({ phase }) {
    * @param {{ phase: OverlayPhase }} config
+   * @protected
    */
@@ -1269,2 +1312,3 @@ _handleAccessibility({ phase }) {
 
+  /** @protected */
   _teardownContentWrapperNode() {
@@ -1280,2 +1324,3 @@ if (
 
+  /** @private */
   async __createPopperInstance() {
@@ -1295,3 +1340,3 @@ if (this._popper) {
 }
-/** @type {PopperModule | undefined} */
+/** @type {Promise<PopperModule> | undefined} */
 OverlayController.popperModule = undefined;

src/OverlayMixin.js

@@ -29,2 +29,3 @@ import { dedupeMixin } from '@lion/core';
       this.opened = false;
+      /** @private */
       this.__needsSetup = true;
@@ -77,2 +78,3 @@ /** @type {OverlayConfig} */
      * @returns {OverlayController}
+     * @protected
      */
@@ -107,2 +109,3 @@ // eslint-disable-next-line
      * @returns {OverlayConfig}
+     * @protected
      */
@@ -131,2 +134,3 @@ // eslint-disable-next-line
      * For example, set a click event listener on _overlayInvokerNode to set opened to true
+     * @protected
      */
@@ -153,2 +157,3 @@ // eslint-disable-next-line class-methods-use-this
      * @desc use this method to tear down your event listeners
+     * @protected
      */
@@ -215,2 +220,3 @@ // eslint-disable-next-line class-methods-use-this
 
+    /** @protected */
     _setupOverlayCtrl() {
@@ -230,2 +236,3 @@ /** @type {OverlayController} */
 
+    /** @protected */
     _teardownOverlayCtrl() {
@@ -244,2 +251,3 @@ this._teardownOpenCloseListeners();
      * @param {boolean} newOpened
+     * @protected
      */
@@ -253,2 +261,3 @@ async _setOpenedWithoutPropertyEffects(newOpened) {
 
+    /** @private */
     __setupSyncFromOverlayController() {
@@ -304,2 +313,3 @@ this.__onOverlayCtrlShow = () => {
 
+    /** @private */
     __teardownSyncFromOverlayController() {
@@ -325,2 +335,3 @@ /** @type {OverlayController} */
 
+    /** @private */
     __syncToOverlayController() {
@@ -327,0 +338,0 @@ if (this.opened) {

src/OverlaysManager.d.ts

@@ -22,10 +22,20 @@ /**
     get shownList(): import("./OverlayController.js").OverlayController[];
-    /** @type {OverlayController[]} */
-    __list: OverlayController[];
-    /** @type {OverlayController[]} */
-    __shownList: OverlayController[];
-    __siblingsInert: boolean;
-    /** @type {WeakMap<OverlayController, OverlayController[]>} */
-    __blockingMap: WeakMap<OverlayController, OverlayController[]>;
     /**
+     * @type {OverlayController[]}
+     * @private
+     */
+    private __list;
+    /**
+     * @type {OverlayController[]}
+     * @private
+     */
+    private __shownList;
+    /** @private */
+    private __siblingsInert;
+    /**
+     * @type {WeakMap<OverlayController, OverlayController[]>}
+     * @private
+     */
+    private __blockingMap;
+    /**
      * Registers an overlay controller.
@@ -56,6 +66,9 @@ * @param {OverlayController} ctrlToAdd controller of the newly added overlay
     informTrapsKeyboardFocusGotEnabled(placementMode: 'local' | 'global' | undefined): void;
+    /**
+     * @param {{ disabledCtrl?:OverlayController, findNewTrap?:boolean }} [options]
+     */
     informTrapsKeyboardFocusGotDisabled({ disabledCtrl, findNewTrap }?: {
-        disabledCtrl: any;
+        disabledCtrl?: import("./OverlayController.js").OverlayController | undefined;
         findNewTrap?: boolean | undefined;
-    }): void;
+    } | undefined): void;
     /** PreventsScroll */
@@ -62,0 +75,0 @@ requestToPreventScroll(): void;

src/OverlaysManager.js

@@ -59,8 +59,18 @@ import { unsetSiblingsInert, setSiblingsInert } from './utils/inert-siblings.js';
   constructor() {
-    /** @type {OverlayController[]} */
+    /**
+     * @type {OverlayController[]}
+     * @private
+     */
     this.__list = [];
-    /** @type {OverlayController[]} */
+    /**
+     * @type {OverlayController[]}
+     * @private
+     */
     this.__shownList = [];
+    /** @private */
     this.__siblingsInert = false;
-    /** @type {WeakMap<OverlayController, OverlayController[]>} */
+    /**
+     * @type {WeakMap<OverlayController, OverlayController[]>}
+     * @private
+     */
     this.__blockingMap = new WeakMap();
@@ -169,3 +179,5 @@ }
 
-  // @ts-ignore
+  /**
+   * @param {{ disabledCtrl?:OverlayController, findNewTrap?:boolean }} [options]
+   */
   informTrapsKeyboardFocusGotDisabled({ disabledCtrl, findNewTrap = true } = {}) {
@@ -172,0 +184,0 @@ const next = this.shownList.find(

src/utils/sort-by-tabindex.js

@@ -31,7 +31,5 @@ /**
     if (hasLowerTabOrder(left[0], right[0])) {
-      // @ts-ignore
-      result.push(right.shift());
+      result.push(/** @type {HTMLElement} */ (right.shift()));
     } else {
-      // @ts-ignore
-      result.push(left.shift());
+      result.push(/** @type {HTMLElement} */ (left.shift()));
     }
@@ -38,0 +36,0 @@ }

test/OverlayController.test.js

@@ -11,3 +11,3 @@ /* eslint-disable no-new */
 import { simulateTab } from '../src/utils/simulate-tab.js';
-import { mimicClick } from '../test-helpers.js';
+import { mimicClick } from '../test-helpers/index.js';
 
@@ -19,2 +19,14 @@ /**
 
+/**
+ * @param {OverlayController} overlayControllerEl
+ */
+function getProtectedMembers(overlayControllerEl) {
+  // @ts-ignore
+  const { _contentId: contentId, _renderTarget: renderTarget } = overlayControllerEl;
+  return {
+    contentId,
+    renderTarget,
+  };
+}
+
 const withGlobalTestConfig = () =>
@@ -138,3 +150,4 @@ /** @type {OverlayConfig} */ ({
         });
-        expect(ctrl._renderTarget).to.equal(overlays.globalRootNode);
+        const { renderTarget } = getProtectedMembers(ctrl);
+        expect(renderTarget).to.equal(overlays.globalRootNode);
       });
@@ -147,3 +160,4 @@
         });
-        expect(ctrl._renderTarget).to.be.undefined;
+        const { renderTarget } = getProtectedMembers(ctrl);
+        expect(renderTarget).to.be.undefined;
         expect(ctrl.content).to.equal(ctrl.invokerNode?.nextElementSibling);
@@ -163,3 +177,4 @@ });
         });
-        expect(ctrl._renderTarget).to.equal(parentNode);
+        const { renderTarget } = getProtectedMembers(ctrl);
+        expect(renderTarget).to.equal(parentNode);
       });
@@ -187,4 +202,6 @@
         });
+        const { renderTarget } = getProtectedMembers(overlay);
+
         expect(overlay.contentNode.isConnected).to.be.true;
-        expect(overlay._renderTarget).to.not.be.undefined;
+        expect(renderTarget).to.not.be.undefined;
       });
@@ -1274,3 +1291,4 @@ });
       });
-      expect(ctrl.contentNode.id).to.contain(ctrl._contentId);
+      const { contentId } = getProtectedMembers(ctrl);
+      expect(ctrl.contentNode.id).to.contain(contentId);
     });
@@ -1428,3 +1446,5 @@
         });
-        expect(ctrl.invokerNode?.getAttribute('aria-describedby')).to.equal(ctrl._contentId);
+        const { contentId } = getProtectedMembers(ctrl);
+
+        expect(ctrl.invokerNode?.getAttribute('aria-describedby')).to.equal(contentId);
       });
@@ -1443,4 +1463,6 @@
         });
+        const { contentId } = getProtectedMembers(ctrl);
+
         expect(ctrl.invokerNode?.getAttribute('aria-describedby')).to.equal(null);
-        expect(ctrl.invokerNode?.getAttribute('aria-labelledby')).to.equal(ctrl._contentId);
+        expect(ctrl.invokerNode?.getAttribute('aria-labelledby')).to.equal(contentId);
       });
@@ -1447,0 +1469,0 @@

types/ArrowMixinTypes.d.ts

@@ -21,9 +21,9 @@ import { Constructor } from '@open-wc/dedupe-mixin';
   render(): TemplateResult;
-  _arrowTemplate(): TemplateResult;
-  _arrowNodeTemplate(): TemplateResult;
-  _defineOverlayConfig(): OverlayConfig;
-  _getPopperArrowConfig(popperConfigToExtendFrom: Partial<PopperOptions>): Partial<PopperOptions>;
-  __setupRepositionCompletePromise(): void;
+  protected _arrowTemplate(): TemplateResult;
+  protected _arrowNodeTemplate(): TemplateResult;
+  protected _defineOverlayConfig(): OverlayConfig;
+  protected _getPopperArrowConfig(popperConfigToExtendFrom: Partial<PopperOptions>): Partial<PopperOptions>;
+  private __setupRepositionCompletePromise(): void;
   get _arrowNode(): Element | null;
-  __syncFromPopperState(data: Partial<State>): void;
+  private __syncFromPopperState(data: Partial<State>): void;
 }
@@ -30,0 +30,0 @@

No alert changes

Improved metrics

Total package byte prevSize

345183

increased by1.09%

Lines of code

6737

increased by2.15%

Dependency changes

• + Added@lion/core@0.16.0(transitive)

• + Addedsingleton-manager@1.4.1(transitive)

• - Removed@lion/core@0.15.0(transitive)

• - Removedsingleton-manager@1.4.0(transitive)

• Updated@lion/core@0.16.0

• Updatedsingleton-manager@1.4.1