@lion/overlays - npm Package Compare versions

Comparing version 0.23.2 to 0.23.3

CHANGELOG.md

 # Change Log
 
+## 0.23.3
+
+### Patch Changes
+
+- 8fb7e7a1: Fix type issues where base constructors would not have the same return type. This allows us to remove a LOT of @ts-expect-errors/@ts-ignores across lion.
+- 9112d243: Fix missing types and update to latest scoped elements to fix constructor type.
+- 9352b577: Guard backdrop node parentNode when removing the backdrop node on teardown.
+- Updated dependencies [8fb7e7a1]
+- Updated dependencies [9112d243]
+  - @lion/core@0.13.8
+
 ## 0.23.2
@@ -4,0 +15,0 @@

package.json

 {
   "name": "@lion/overlays",
-  "version": "0.23.2",
+  "version": "0.23.3",
   "description": "Overlays System using lit-html for rendering",
@@ -38,3 +38,3 @@ "license": "MIT",
   "dependencies": {
-    "@lion/core": "0.13.7",
+    "@lion/core": "0.13.8",
     "@popperjs/core": "^2.5.4",
@@ -41,0 +41,0 @@ "singleton-manager": "1.2.1"

src/OverlayController.js

@@ -510,3 +510,3 @@ import '@lion/core/src/differentKeyEventNamesShimIE.js';
       if (!OverlayController.popperModule) {
-        // @ts-expect-error
+        // @ts-expect-error FIXME: for some reason createPopper is missing here
         OverlayController.popperModule = preloadPopper();
@@ -842,4 +842,4 @@ }
       );
-      /** @type {(ev:AnimationEvent) => void} */
-      let afterFadeOut;
+      /** @type {() => void} */
+      let afterFadeOut = () => {};
       hideConfig.backdropNode.classList.add(
@@ -862,3 +862,3 @@ `${this.placementMode}-overlays__backdrop--animation-out`,
       });
-      // @ts-expect-error
+
       hideConfig.backdropNode.addEventListener('animationend', afterFadeOut);
@@ -1022,4 +1022,4 @@ }
           this.__backdropAnimation.then(() => {
-            if (this.__backdropNodeToBeTornDown) {
-              /** @type {HTMLElement} */ (this.__backdropNodeToBeTornDown.parentNode).removeChild(
+            if (this.__backdropNodeToBeTornDown && this.__backdropNodeToBeTornDown.parentNode) {
+              this.__backdropNodeToBeTornDown.parentNode.removeChild(
                 this.__backdropNodeToBeTornDown,
@@ -1026,0 +1026,0 @@ );

src/utils/deep-contains.d.ts

 /**
  * Whether first element contains the second element, also goes through shadow roots
  * @param {HTMLElement|ShadowRoot} el
- * @param {HTMLElement} targetEl
+ * @param {HTMLElement|ShadowRoot} targetEl
  * @returns {boolean}
  */
-export function deepContains(el: HTMLElement | ShadowRoot, targetEl: HTMLElement): boolean;
+export function deepContains(el: HTMLElement | ShadowRoot, targetEl: HTMLElement | ShadowRoot): boolean;

src/utils/deep-contains.js

 /**
  * Whether first element contains the second element, also goes through shadow roots
  * @param {HTMLElement|ShadowRoot} el
- * @param {HTMLElement} targetEl
+ * @param {HTMLElement|ShadowRoot} targetEl
  * @returns {boolean}
@@ -6,0 +6,0 @@ */

src/utils/is-equal-config.d.ts

@@ -8,7 +8,7 @@ /**
  *
- * @param {OverlayConfig} a
- * @param {OverlayConfig} b
+ * @param {Partial<OverlayConfig>} a
+ * @param {Partial<OverlayConfig>} b
  * @returns {boolean} Whether the configs are equivalent
  */
-export function isEqualConfig(a: OverlayConfig, b: OverlayConfig): boolean;
+export function isEqualConfig(a: Partial<OverlayConfig>, b: Partial<OverlayConfig>): boolean;
 export type OverlayConfig = import("../../types/OverlayConfig").OverlayConfig;

src/utils/is-equal-config.js

@@ -9,4 +9,4 @@ /**
  *
- * @param {OverlayConfig} a
- * @param {OverlayConfig} b
+ * @param {Partial<OverlayConfig>} a
+ * @param {Partial<OverlayConfig>} b
  * @returns {boolean} Whether the configs are equivalent
@@ -13,0 +13,0 @@ */

test/utils-tests/contain-focus.test.js

 import { expect, fixture, html } from '@open-wc/testing';
-// @ts-expect-error
 import { renderLitAsNode } from '@lion/helpers';
@@ -75,5 +74,7 @@ import { getDeepActiveElement } from '../../src/utils/get-deep-active-element.js';
   `);
-  const rootElementShadow = shadowDomNode.querySelector('#rootElementShadow');
-  rootElementShadow.attachShadow({ mode: 'open' });
-  rootElementShadow.shadowRoot.appendChild(interactionElementsNode);
+  const rootElementShadow = shadowDomNode?.querySelector('#rootElementShadow');
+  rootElementShadow?.attachShadow({ mode: 'open' });
+  if (interactionElementsNode) {
+    rootElementShadow?.shadowRoot?.appendChild(interactionElementsNode);
+  }
   return shadowDomNode;
@@ -80,0 +81,0 @@ }

test/utils-tests/deep-contains.test.js

@@ -33,3 +33,8 @@ import { expect, fixture } from '@open-wc/testing';
     // Siblings
-    expect(deepContains(element.firstElementChild, element.lastElementChild)).to.be.false;
+    expect(
+      deepContains(
+        /** @type {HTMLElement} */ (element.firstElementChild),
+        /** @type {HTMLElement} */ (element.lastElementChild),
+      ),
+    ).to.be.false;
     // Unrelated
@@ -99,14 +104,17 @@ expect(deepContains(lightChildEl, shadowElementChild)).to.be.false;
 
-    expect(deepContains(element, element.firstElementChild)).to.be.true;
-    expect(deepContains(element, element.firstElementChild.shadowRoot)).to.be.true;
-    expect(deepContains(element, element.firstElementChild.shadowRoot.children[1])).to.be.true;
-    expect(deepContains(element, element.firstElementChild.shadowRoot.children[1].shadowRoot)).to.be
-      .true;
-    expect(
-      deepContains(
-        element,
-        element.firstElementChild.shadowRoot.children[1].shadowRoot.lastElementChild,
-      ),
-    ).to.be.true;
+    const elementFirstChild = /** @type {HTMLElement} */ (element.firstElementChild);
+    const elementFirstChildShadow = /** @type {ShadowRoot} */ (elementFirstChild.shadowRoot);
+    const elementFirstChildShadowChildren = /** @type {HTMLElement[]} */ (Array.from(
+      elementFirstChildShadow.children,
+    ));
+    const elementFirstChildShadowChildShadow = /** @type {ShadowRoot} */ (elementFirstChildShadowChildren[1]
+      .shadowRoot);
+    const elementFirstChildShadowChildShadowLastChild = /** @type {HTMLElement} */ (elementFirstChildShadowChildShadow.lastElementChild);
+
+    expect(deepContains(element, elementFirstChild)).to.be.true;
+    expect(deepContains(element, elementFirstChildShadow)).to.be.true;
+    expect(deepContains(element, elementFirstChildShadowChildren[1])).to.be.true;
+    expect(deepContains(element, elementFirstChildShadowChildShadow)).to.be.true;
+    expect(deepContains(element, elementFirstChildShadowChildShadowLastChild)).to.be.true;
   });
 });

test/utils-tests/is-equal-config.test.js

@@ -6,10 +6,11 @@ import { expect } from '@open-wc/testing';
   return {
-    placementMode: 'local',
+    placementMode: /** @type {'local'|'global'} */ ('local'),
     hidesOnOutsideClick: true,
     popperConfig: {
-      modifiers: {
-        offset: {
+      modifiers: [
+        {
+          name: 'offset',
           enabled: false,
         },
-      },
+      ],
     },
@@ -35,4 +36,4 @@ };
     const config = TestConfig();
-    expect(isEqualConfig(config, { ...config, extra: 'value' })).eql(false);
-    expect(isEqualConfig({ ...config, extra: 'value' }, config)).eql(false);
+    expect(isEqualConfig(config, { ...config, isBlocking: true })).eql(false);
+    expect(isEqualConfig({ ...config, isBlocking: true }, config)).eql(false);
   });
@@ -42,3 +43,3 @@
     const config = TestConfig();
-    expect(isEqualConfig(config, { ...config, extra: undefined })).eql(false);
+    expect(isEqualConfig(config, { ...config, referenceNode: undefined })).eql(false);
   });
@@ -52,8 +53,3 @@
         ...config.popperConfig,
-        modifiers: {
-          ...config.popperConfig.modifiers,
-          offset: {
-            ...config.popperConfig.modifiers.offset,
-          },
-        },
+        modifiers: [...config.popperConfig.modifiers],
       },
@@ -66,8 +62,9 @@ };
         ...config.popperConfig,
-        modifiers: {
+        modifiers: [
           ...config.popperConfig.modifiers,
-          offset: {
-            enabled: !config.popperConfig.modifiers.offset.enabled,
+          {
+            name: 'offset',
+            enabled: !config.popperConfig.modifiers.find(mod => mod.name === 'offset')?.enabled,
           },
-        },
+        ],
       },
@@ -74,0 +71,0 @@ };

types/ArrowMixinTypes.d.ts

@@ -8,2 +8,3 @@ import { Constructor } from '@open-wc/dedupe-mixin';
 export declare class ArrowHost {
+  constructor(...args: any[]);
   static get properties(): {
@@ -10,0 +11,0 @@ hasArrow: {

types/OverlayMixinTypes.d.ts

@@ -20,2 +20,3 @@ import { Constructor } from '@open-wc/dedupe-mixin';
 export declare class OverlayHost {
+  constructor(...args: any[]);
   public opened: Boolean;
@@ -70,4 +71,4 @@
   superclass: T,
-): T & Constructor<OverlayHost> & OverlayHost;
+): T & Constructor<OverlayHost> & typeof OverlayHost;
 
 export type OverlayMixin = typeof OverlayImplementation;

No alert changes

Improved metrics

Total package byte prevSize

321528

increased by0.38%

Lines of code

6345

increased by0.09%

Dependency changes

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

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

• Updated@lion/core@0.13.8