@lion/ui 0.23.0 → 0.24.0

package/components/overlays/src/configurations/withPopoverConfig.js

@@ -4,29 +4,31 @@ import { withClickInteraction } from './visibility-trigger-partials/withClickInt
  * @typedef {import('../../types/OverlayConfig.js').OverlayConfig} OverlayConfig
  */
 
-export const withPopoverConfig = ({ horizontalFallback = true, placement = 'auto' } = {}) =>
-  /** @type {OverlayConfig} */ ({
-    placementMode: 'local',
-    inheritsReferenceWidth: 'min',
-    hidesOnOutsideClick: true,
-    hidesOnEsc: true,
-    popperConfig: {
-      placement,
-      modifiers: [
-        {
-          name: 'offset',
-          enabled: false,
+export const withPopoverConfig = ({
+  horizontalFallback = true,
+  placement = 'auto',
+} = {}) => /** @type {OverlayConfig} */ ({
+  placementMode: 'local',
+  inheritsReferenceWidth: 'min',
+  hidesOnOutsideClick: true,
+  hidesOnEsc: true,
+  popperConfig: {
+    placement,
+    modifiers: [
+      {
+        name: 'offset',
+        enabled: false,
+      },
+      {
+        name: 'flip',
+        options: {
+          fallbackPlacements: horizontalFallback
+            ? ['bottom', 'top', 'right', 'left']
+            : ['bottom', 'top'],
         },
-        {
-          name: 'flip',
-          options: {
-            fallbackPlacements: horizontalFallback
-              ? ['bottom', 'top', 'right', 'left']
-              : ['bottom', 'top'],
-          },
-        },
-      ],
-    },
-    handlesAccessibility: true,
-    ...withClickInteraction(),
-  });
+      },
+    ],
+  },
+  handlesAccessibility: true,
+  ...withClickInteraction(),
+});

package/components/overlays/src/configurations/withTooltipConfig.js

@@ -13,16 +13,18 @@ export const withTooltipConfig = ({
   invokerRelation = 'description',
   delayIn = 300,
   delayOut = 300,
-} = {}) =>
-  /** @type {OverlayConfig} */ ({
-    placementMode: 'local',
-    elementToFocusAfterHide: undefined,
-    hidesOnEsc: true,
-    handlesAccessibility: true,
-    isTooltip: true,
-    invokerRelation,
-    popperConfig: {
-      strategy: 'absolute',
-    },
-    ...withHoverInteraction({ delayIn, delayOut }),
-  });
+} = {}) => /** @type {OverlayConfig} */ ({
+  placementMode: 'local',
+  elementToFocusAfterHide: undefined,
+  hidesOnEsc: true,
+  handlesAccessibility: true,
+  isTooltip: true,
+  invokerRelation,
+  popperConfig: {
+    strategy: 'absolute',
+  },
+  ...withHoverInteraction({
+    delayIn,
+    delayOut,
+  }),
+});

package/components/overlays/src/overlayDocumentStyle.js

@@ -1,5 +1,4 @@
 import { css } from 'lit';
-
 export const overlayDocumentStyle = css`
   body > *[inert] {
     -webkit-user-select: none;
@@ -15,6 +14,7 @@ export const overlayDocumentStyle = css`
 
   body.overlays-scroll-lock-ios-fix {
     position: fixed;
+    top: var(--scroll-y-compensation, none); /* This variable is set in OverlaysManager */
     width: 100%;
   }
 

package/components/overlays/src/overlayShadowDomStyle.js

@@ -1,5 +1,4 @@
 import { css } from 'lit';
-
 export const overlayShadowDomStyle = css`
   .overlays {
     position: fixed;

package/components/overlays/src/singleton.js

@@ -9,8 +9,6 @@ function getOverlaysManager() {
     const overlaysManager = new OverlaysManager();
     singletonManager.set('@lion/ui::overlays::0.x', overlaysManager);
   }
-
   return singletonManager.get('@lion/ui::overlays::0.x');
 }
-
 export const overlays = lazifyInstantiation(getOverlaysManager);

package/components/overlays/src/utils/adopt-styles.js

@@ -24,7 +24,6 @@ export const _adoptStyleUtils = {
   // @ts-ignore
   adoptStyles: undefined,
 };
-
 const styleCache = new WeakMap();
 
 /**
@@ -32,7 +31,7 @@ const styleCache = new WeakMap();
  */
 export function serializeConstructableStylesheet(cssStyleSheet) {
   return Array.from(cssStyleSheet.cssRules)
-    .map(r => r.cssText)
+    .map((r) => r.cssText)
     .join('');
 }
 
@@ -46,17 +45,16 @@ function adoptStyleWhenAdoptedStylesheetsNotSupported(
   style,
   { teardown = false } = {},
 ) {
-  const adoptRoot = /** @type {ShadowRoot|Document['body']} */ (
-    renderRoot === document ? document.body : renderRoot
-  );
+  const adoptRoot =
+    /** @type {ShadowRoot|Document['body']} */
+    renderRoot === document ? document.body : renderRoot;
   // @ts-ignore
   const styleText = style.cssText || serializeConstructableStylesheet(style);
-
   if (!teardown) {
     const styleEl = document.createElement('style');
     // keep notation, so it's not renamed in minification/build
     // eslint-disable-next-line dot-notation
-    const nonce = /** @type {{ litNonce?: string }} */ (window)['litNonce'];
+    const nonce = /** @type {{ litNonce?: string }} */ window['litNonce'];
     if (nonce !== undefined) {
       styleEl.setAttribute('nonce', nonce);
     }
@@ -64,7 +62,6 @@ function adoptStyleWhenAdoptedStylesheetsNotSupported(
     adoptRoot.appendChild(styleEl);
   } else {
     const foundStyleEls = Array.from(adoptRoot.querySelectorAll('style'));
-
     for (const foundStyleEl of foundStyleEls) {
       if (foundStyleEl.textContent === styleText) {
         foundStyleEl.remove();
@@ -88,7 +85,6 @@ function handleCache(renderRoot, style, { teardown = false } = {}) {
   const foundStyle = addedStylesForRoot.find(
     (/** @type {import("lit").CSSResultOrNative} */ addedStyle) => style === addedStyle,
   );
-
   if (foundStyle && teardown) {
     addedStylesForRoot.splice(addedStylesForRoot.indexOf(style), 1);
   } else if (!foundStyle && !teardown) {
@@ -97,13 +93,16 @@ function handleCache(renderRoot, style, { teardown = false } = {}) {
     // Already removed or added. We're done
     haltFurtherExecution = true;
   }
-
-  return { haltFurtherExecution };
+  return {
+    haltFurtherExecution,
+  };
 }
 
 /** @type {AdoptStyleFn} */
 export function adoptStyle(renderRoot, style, { teardown = false } = {}) {
-  const { haltFurtherExecution } = handleCache(renderRoot, style, { teardown });
+  const { haltFurtherExecution } = handleCache(renderRoot, style, {
+    teardown,
+  });
   if (haltFurtherExecution) {
     return;
   }
@@ -112,15 +111,15 @@ export function adoptStyle(renderRoot, style, { teardown = false } = {}) {
   // while others are ignored so the overlays are rendered incorrectly, to mitigate it we use
   // traditional "stylesheet".
   if (!_adoptStyleUtils.supportsAdoptingStyleSheets || browserDetection.isIOS) {
-    adoptStyleWhenAdoptedStylesheetsNotSupported(renderRoot, style, { teardown });
+    adoptStyleWhenAdoptedStylesheetsNotSupported(renderRoot, style, {
+      teardown,
+    });
     return;
   }
-
   const sheet = style instanceof CSSStyleSheet ? style : style.styleSheet;
   if (!sheet) {
     throw new Error(`Please provide a CSSResultOrNative style`);
   }
-
   if (!teardown) {
     // @ts-ignore
     // eslint-disable-next-line no-param-reassign
@@ -128,16 +127,17 @@ export function adoptStyle(renderRoot, style, { teardown = false } = {}) {
   } else if (renderRoot.adoptedStyleSheets.includes(sheet)) {
     // @ts-ignore
     // eslint-disable-next-line no-param-reassign
-    renderRoot.adoptedStyleSheets = renderRoot.adoptedStyleSheets.filter(s => s !== sheet);
+    renderRoot.adoptedStyleSheets = renderRoot.adoptedStyleSheets.filter((s) => s !== sheet);
   }
 }
 
 /** @type {AdoptStylesFn} */
 export function adoptStyles(renderRoot, styles, { teardown = false } = {}) {
   for (const style of styles) {
-    _adoptStyleUtils.adoptStyle(renderRoot, style, { teardown });
+    _adoptStyleUtils.adoptStyle(renderRoot, style, {
+      teardown,
+    });
   }
 }
-
 _adoptStyleUtils.adoptStyle = adoptStyle;
 _adoptStyleUtils.adoptStyles = adoptStyles;

package/components/overlays/src/utils/deep-contains.js

@@ -35,12 +35,11 @@ export function deepContains(el, targetEl, cache = {}) {
     if (slotName) {
       const cachedItemsWithSameName = cache[slotName];
       if (cachedItemsWithSameName) {
-        result = cachedItemsWithSameName.filter(item => item?.element === element)[0] || null;
+        result = cachedItemsWithSameName.filter((item) => item?.element === element)[0] || null;
       }
     }
     return result;
   }
-
   const cachedItem = getCachedItem(el);
   if (cachedItem) {
     return cachedItem.deepContains;
@@ -59,10 +58,12 @@ export function deepContains(el, targetEl, cache = {}) {
     if (slotName) {
       // eslint-disable-next-line no-param-reassign
       cache[slotName] = cache[slotName] || [];
-      cache[slotName].push({ element: el, deepContains: contains });
+      cache[slotName].push({
+        element: el,
+        deepContains: contains,
+      });
     }
   }
-
   let containsTarget = el.contains(targetEl);
   if (containsTarget) {
     cacheItem(true);
@@ -100,7 +101,7 @@ export function deepContains(el, targetEl, cache = {}) {
    * @returns {Element[]}
    * */
   function getSlotProjections(htmlElement) {
-    return isSlot(htmlElement) ? /** @type {Element[]}  */ (htmlElement.assignedElements()) : [];
+    return isSlot(htmlElement) ? /** @type {Element[]}  */ htmlElement.assignedElements() : [];
   }
 
   /**
@@ -135,7 +136,7 @@ export function deepContains(el, targetEl, cache = {}) {
   /** @param {HTMLElement|ShadowRoot} elem */
   function checkChildren(elem) {
     for (let i = 0; i < elem.children.length; i += 1) {
-      const child = /** @type {HTMLElement}  */ (elem.children[i]);
+      const child = /** @type {HTMLElement}  */ elem.children[i];
       const cachedChild = getCachedItem(child);
       if (cachedChild) {
         containsTarget = cachedChild.deepContains || containsTarget;

package/components/overlays/src/utils/get-focusable-elements.js

@@ -50,10 +50,11 @@ function getTabindex(element) {
  */
 function getChildNodes(element) {
   if (element.localName === 'slot') {
-    const slot = /** @type {HTMLSlotElement} */ (element);
-    return slot.assignedNodes({ flatten: true });
+    const slot = /** @type {HTMLSlotElement} */ element;
+    return slot.assignedNodes({
+      flatten: true,
+    });
   }
-
   const { children } = element.shadowRoot || element;
   // On IE11, SVGElement.prototype.children is undefined
   return children || [];
@@ -73,8 +74,7 @@ function isVisibleElement(element) {
   if (element.localName === 'slot') {
     return true;
   }
-
-  return isVisible(/** @type {HTMLElement} */ (element));
+  return isVisible(/** @type {HTMLElement} */ element);
 }
 
 /**
@@ -91,15 +91,13 @@ function collectFocusableElements(element, nodes) {
   if (!isVisibleElement(element)) {
     return false;
   }
-
-  const el = /** @type {HTMLElement} */ (element);
+  const el = /** @type {HTMLElement} */ element;
   const tabIndex = getTabindex(el);
   let needsSort = tabIndex > 0;
   if (tabIndex >= 0) {
     nodes.push(el);
   }
-
-  const childNodes = /** @type {Element[]} */ (getChildNodes(el));
+  const childNodes = /** @type {Element[]} */ getChildNodes(el);
   for (let i = 0; i < childNodes.length; i += 1) {
     needsSort = collectFocusableElements(childNodes[i], nodes) || needsSort;
   }
@@ -113,7 +111,6 @@ function collectFocusableElements(element, nodes) {
 export function getFocusableElements(element) {
   /** @type {HTMLElement[]} */
   const nodes = [];
-
   const needsSort = collectFocusableElements(element, nodes);
   return needsSort ? sortByTabIndex(nodes) : nodes;
 }

package/components/overlays/src/utils/inert-siblings.js

@@ -8,10 +8,9 @@
  * @param {HTMLElement} element
  */
 export function setSiblingsInert(element) {
-  const parentChildren = /** @type {HTMLCollection} */ (element.parentElement?.children);
+  const parentChildren = /** @type {HTMLCollection} */ element.parentElement?.children;
   for (let i = 0; i < parentChildren.length; i += 1) {
     const sibling = parentChildren[i];
-
     if (sibling !== element) {
       sibling.setAttribute('inert', '');
       sibling.setAttribute('aria-hidden', 'true');
@@ -24,10 +23,9 @@ export function setSiblingsInert(element) {
  * @param {HTMLElement} element
  */
 export function unsetSiblingsInert(element) {
-  const parentChildren = /** @type {HTMLCollection} */ (element.parentElement?.children);
+  const parentChildren = /** @type {HTMLCollection} */ element.parentElement?.children;
   for (let i = 0; i < parentChildren.length; i += 1) {
     const sibling = parentChildren[i];
-
     if (sibling !== element) {
       sibling.removeAttribute('inert');
       sibling.removeAttribute('aria-hidden');

package/components/overlays/src/utils/is-equal-config.js

@@ -13,21 +13,20 @@
 export function isEqualConfig(a, b) {
   if (typeof a !== 'object' || typeof b !== 'object' || a === null || b === null) {
     if (typeof a === 'function' && typeof b === 'function') {
-      return /** @type {Function} */ (a).toString() === /** @type {Function} */ (b).toString();
+      return /** @type {Function} */ a.toString() === /** @type {Function} */ b.toString();
     }
     return a === b;
   }
   if (a instanceof Node && b instanceof Node) {
     return a === b;
   }
-
   const aProps = Object.keys(a);
   const bProps = Object.keys(b);
   if (aProps.length !== bProps.length) {
     return false;
   }
   return aProps.every(
-    prop =>
+    (prop) =>
       Object.prototype.hasOwnProperty.call(b, prop) &&
       // @ts-ignore - dynamic property access
       isEqualConfig(a[prop], b[prop]),

package/components/overlays/src/utils/is-visible.js

@@ -28,7 +28,6 @@ export function isVisible(element) {
   if (!hasStyleVisibility(element.style)) {
     return false;
   }
-
   const computedStyle = window.getComputedStyle(element);
 
   // Check computed styles

package/components/overlays/src/utils/simulate-tab.js

@@ -1,14 +1,11 @@
 import { getFocusableElements } from './get-focusable-elements.js';
-
 export function simulateTab(node = document.body) {
-  const current = /** @type {HTMLElement} */ (document.activeElement);
+  const current = /** @type {HTMLElement} */ document.activeElement;
   const all = getFocusableElements(node);
-
   const currentIndex = all.indexOf(current);
   let nextIndex = currentIndex + 1;
   if (nextIndex === all.length) {
     nextIndex = 0;
   }
-
   all[nextIndex].focus();
 }

package/components/overlays/src/utils/sort-by-tabindex.js

@@ -28,12 +28,11 @@ function mergeSortByTabIndex(left, right) {
   const result = [];
   while (left.length > 0 && right.length > 0) {
     if (hasLowerTabOrder(left[0], right[0])) {
-      result.push(/** @type {HTMLElement} */ (right.shift()));
+      result.push(/** @type {HTMLElement} */ right.shift());
     } else {
-      result.push(/** @type {HTMLElement} */ (left.shift()));
+      result.push(/** @type {HTMLElement} */ left.shift());
     }
   }
-
   return [...result, ...left, ...right];
 }
 
@@ -48,7 +47,6 @@ export function sortByTabIndex(elements) {
   if (len < 2) {
     return elements;
   }
-
   const pivot = Math.ceil(len / 2);
   const left = sortByTabIndex(elements.slice(0, pivot));
   const right = sortByTabIndex(elements.slice(pivot));

package/components/overlays/test/ArrowMixin.test.js

@@ -1,7 +1,6 @@
 import { expect, fixture } from '@open-wc/testing';
 import { LitElement, html } from 'lit';
 import { ArrowMixin, OverlayMixin } from '@lion/ui/overlays.js';
-
 describe('ArrowMixin', () => {
   class ArrowTest extends ArrowMixin(OverlayMixin(LitElement)) {
     /**
@@ -20,24 +19,20 @@ describe('ArrowMixin', () => {
         },
       };
     }
-
     constructor() {
       super();
       this.__toggle = this.__toggle.bind(this);
     }
-
     __toggle() {
       // @ts-ignore [ts7-2565] TS7 checks definite assignment on this inferred field; Lit reactive property: read through a typed local instead (e.g. const next = this.x ?? DEFAULT) - a class field would shadow the accessor Lit creates from static properties
       this.opened = !this.opened;
     }
-
     _setupOpenCloseListeners() {
       super._setupOpenCloseListeners();
       if (this._overlayInvokerNode) {
         this._overlayInvokerNode.addEventListener('click', this.__toggle);
       }
     }
-
     _teardownOpenCloseListeners() {
       super._teardownOpenCloseListeners();
       if (this._overlayInvokerNode) {
@@ -48,75 +43,68 @@ describe('ArrowMixin', () => {
   before(() => {
     customElements.define('arrow-test', ArrowTest);
   });
-
   it('shows by default', async () => {
-    const el = /** @type {ArrowTest} */ (
+    const el =
+      /** @type {ArrowTest} */
       await fixture(html`
         <arrow-test>
           <div slot="content">This is a tooltip</div>
           <button slot="invoker">Tooltip button</button>
         </arrow-test>
-      `)
-    );
+      `);
     expect(el.hasAttribute('has-arrow')).to.be.true;
-    const arrowNode = /** @type {Element} */ (el._arrowNode);
+    const arrowNode = /** @type {Element} */ el._arrowNode;
     expect(window.getComputedStyle(arrowNode).getPropertyValue('display')).to.equal('block');
   });
-
   it('hides for screen readers', async () => {
-    const el = /** @type {ArrowTest} */ (
+    const el =
+      /** @type {ArrowTest} */
       await fixture(html`
         <arrow-test>
           <div slot="content">This is a tooltip</div>
           <button slot="invoker">Tooltip button</button>
         </arrow-test>
-      `)
-    );
-
-    const arrowNode = /** @type {Element} */ (el._arrowNode);
+      `);
+    const arrowNode = /** @type {Element} */ el._arrowNode;
     expect(arrowNode.getAttribute('aria-hidden')).to.equal('true');
   });
-
   it('hides the arrow when has-arrow is false', async () => {
-    const el = /** @type {ArrowTest} */ (
+    const el =
+      /** @type {ArrowTest} */
       await fixture(html`
         <arrow-test>
           <div slot="content">This is a tooltip</div>
           <button slot="invoker">Tooltip button</button>
         </arrow-test>
-      `)
-    );
+      `);
     el.hasArrow = false;
     await el.updateComplete;
     expect(el.hasAttribute('has-arrow')).to.be.false;
-    const arrowNode = /** @type {Element} */ (el._arrowNode);
+    const arrowNode = /** @type {Element} */ el._arrowNode;
     expect(window.getComputedStyle(arrowNode).getPropertyValue('display')).to.equal('none');
   });
-
   it('makes sure positioning of the arrow is correct', async () => {
-    const el = /** @type {ArrowTest} */ (
+    const el =
+      /** @type {ArrowTest} */
       await fixture(html`
         <arrow-test
           .config="${
-            /** @type {import('../types/OverlayConfig.js').OverlayConfig} */ ({
+            /** @type {import('../types/OverlayConfig.js').OverlayConfig} */ {
               popperConfig: {
                 placement: 'right',
               },
-            })
+            }
           }"
           style="position: relative; top: 10px;"
         >
           <div slot="content" style="height: 30px; background-color: red;">Hey there</div>
           <button slot="invoker" style="height: 30px;">Tooltip button</button>
         </arrow-test>
-      `)
-    );
-
+      `);
     el.opened = true;
-
     await el.repositionComplete;
     expect(
-      getComputedStyle(/** @type {HTMLElement} */ (el._arrowNode)).getPropertyValue('left'),
+      getComputedStyle(/** @type {HTMLElement} */ el._arrowNode).getPropertyValue('left'),
     ).to.equal(
       '-10px',
       `