@lion/ui 0.18.1 → 0.20.0-menu-system.0

package/components/overlays/src/OverlayMixin.js

@@ -33,10 +33,7 @@ export const OverlayMixinImplementation = superclass => {
   class OverlayMixin extends superclass {
     static get properties() {
       return {
-        opened: {
-          type: Boolean,
-          reflect: true,
-        },
+        opened: { type: Boolean, reflect: true },
       };
     }
 
@@ -62,6 +59,17 @@ export const OverlayMixinImplementation = superclass => {
       this.open = this.open.bind(this);
       /** @type {EventListener} */
       this.close = this.close.bind(this);
+
+      // // By default, we go for disclosure behavior
+      // // TODO: in the future, bring disclosure behavior to a controller (and therefore directive).
+      // // Take inspiration from VisibilityToggleCtrl of portal elements
+      // /**
+      //  * Terminology aligned with https://open-ui.org/components/openable.explainer/
+      //  * @type {'disclosure'|'overlay'}
+      //  */
+      // this.openableMode = 'disclosure';
+
+      // allow hybrid disclosure/overlay components
     }
 
     get config() {
@@ -70,6 +78,7 @@ export const OverlayMixinImplementation = superclass => {
 
     /** @param {OverlayConfig} value */
     set config(value) {
+      // TODO: built-in in overlayCtrl now... delete here
       const shouldUpdate = !isEqualConfig(this.config, value);
 
       if (this._overlayCtrl && shouldUpdate) {
@@ -161,6 +170,8 @@ export const OverlayMixinImplementation = superclass => {
      */
     // eslint-disable-next-line class-methods-use-this
     _setupOpenCloseListeners() {
+      // Keeps the close-overlay event private for the controller.
+      // (we already have )
       /**
        * @param {{ stopPropagation: () => void; }} ev
        */
@@ -218,11 +229,11 @@ export const OverlayMixinImplementation = superclass => {
     // @ts-expect-error
     static enabledWarnings = super.enabledWarnings?.filter(w => w !== 'change-in-update') || [];
 
-    get _overlayInvokerNode() {
-      return /** @type {HTMLElement | undefined} */ (
-        Array.from(this.children).find(child => child.slot === 'invoker')
-      );
-    }
+    // get _overlayInvokerNode() {
+    //   return /** @type {HTMLElement | undefined} */ (
+    //     Array.from(this.children).find(child => child.slot === 'invoker')
+    //   );
+    // }
 
     /**
      * @overridable
@@ -256,13 +267,46 @@ export const OverlayMixinImplementation = superclass => {
       );
     }
 
+    /**
+     * @param {Element} focusableElOrWrapper
+     * @returns {Element|null}
+     */
+    static _getFocusableInvokerEl(focusableElOrWrapper) {
+      // return focusableElOrWrapper;
+      return (
+        focusableElOrWrapper &&
+        (focusableElOrWrapper.hasAttribute('tabindex') || focusableElOrWrapper.tagName === 'BUTTON'
+          ? focusableElOrWrapper
+          : focusableElOrWrapper.querySelector('[role=button], button'))
+      );
+    }
+
+    get _overlayInvokerNode() {
+      const ctor = /** @type {typeof OverlayMixin} */ (this.constructor);
+      if (!this.__invokerNode) {
+        const slottedNode = Array.from(this.children).find(child => child.slot === 'invoker');
+        if (slottedNode) {
+          this.__invokerNode = ctor._getFocusableInvokerEl(slottedNode);
+        } else {
+          // Look for preceeding sibling with [data-invoker] attribute, and try to find a focusable element in it (either itself or a child)
+          this.__invokerNode =
+            this.previousElementSibling?.hasAttribute('data-invoker') &&
+            ctor._getFocusableInvokerEl(this.previousElementSibling);
+        }
+      }
+      return this.__invokerNode;
+    }
+
     /** @protected */
     _setupOverlayCtrl() {
       if (this.#hasSetup) return;
+
+      const invokerNode = this._overlayInvokerNode;
+
       const config = {
         contentNode: this._overlayContentNode,
         contentWrapperNode: this._overlayContentWrapperNode,
-        invokerNode: this._overlayInvokerNode,
+        invokerNode: invokerNode && invokerNode instanceof HTMLElement ? invokerNode : undefined,
         referenceNode: this._overlayReferenceNode,
         backdropNode: this._overlayBackdropNode,
       };
@@ -282,6 +326,8 @@ export const OverlayMixinImplementation = superclass => {
 
     /** @protected */
     _teardownOverlayCtrl() {
+      // Make sure that dynamic behavior (e.g. responsive) is possible by allowing multiple setups and teardowns of the overlay controller.
+      this.#hasSetup = false;
       if (!this._overlayCtrl) return;
 
       this._teardownOpenCloseListeners();
@@ -434,6 +480,7 @@ export const OverlayMixinImplementation = superclass => {
   for (const postProcessor of overlayMixinPostProcessors) {
     postProcessor(OverlayMixin);
   }
-  return /** @type {* & OverlayMixin} */ (OverlayMixin);
+  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
+  return OverlayMixin;
 };
 export const OverlayMixin = dedupeMixin(OverlayMixinImplementation);

package/components/overlays/src/OverlaysManager.js

@@ -209,9 +209,9 @@ export class OverlaysManager {
           const newMarginBottom = this.__bodySizeVars.marginBottom + scrollbarHeight;
           // @ts-expect-error [external]: CSS not yet typed
           if (window.CSS?.number && document.body.attributeStyleMap?.set) {
-            // @ts-ignore
+            // @ts-ignore - CSS Typed OM not fully typed
             document.body.attributeStyleMap.set('margin-right', CSS.px(newMarginRight));
-            // @ts-ignore
+            // @ts-ignore - CSS Typed OM not fully typed
             document.body.attributeStyleMap.set('margin-bottom', CSS.px(newMarginBottom));
           } else {
             document.body.style.marginRight = `${newMarginRight}px`;

package/components/overlays/src/configurations/visibility-trigger-partials/withHoverInteraction.js

@@ -5,14 +5,27 @@
 
 // N.B. Below logic is tested in LionTooltip
 
+// TODO: this is copied from menu system. Move them to common ancestor entrypoint (maybe a core entrypoint for all interactive controls)
+/**
+ * @param {HTMLElement|undefined} item
+ */
+export function isDisabled(item) {
+  return item && (item.hasAttribute('disabled') || item.getAttribute('aria-disabled') === 'true');
+}
+
 /**
  * Use for tooltips and [flyout menus](https://www.w3.org/WAI/tutorials/menus/flyout/).
  * Note that it handles both mouse hover and focus interaction.
  * Provide delayIn and delayOut when the content needs a small delay before being showed
- * @param {{ delayIn?: number, delayOut?: number  }} options
+ * @param {{ isHoverSupported?: boolean, longpressDuration?: number, delayIn?: number, delayOut?: number  }} options
  * @returns {Partial<OverlayConfig>}
  */
-export function withHoverInteraction({ delayIn = 0, delayOut = 300 }) {
+export function withHoverInteraction({
+  isHoverSupported = window.matchMedia('(hover: hover)').matches,
+  longpressDuration = 500,
+  delayOut = 300,
+  delayIn = 0,
+} = {}) {
   return {
     visibilityTriggerFunction: (
       /** @type {{ controller: OverlayController }} */ { controller },
@@ -20,53 +33,114 @@ export function withHoverInteraction({ delayIn = 0, delayOut = 300 }) {
       let isFocused = false;
       let isHovered = false;
       /** @type {NodeJS.Timeout} */
-      let delayTimeout;
+      let pendingDelayTimeout;
+      /** @type {NodeJS.Timeout} */
+      let pendingLongpressTimeout;
+      let longpressCompleted = false;
 
       function resetActive() {
         isFocused = false;
         isHovered = false;
+        longpressCompleted = false;
       }
 
       /**
-       * @param {Event} event
+       * @param {{ shouldOpen: boolean, openTimeout?: number, closeTimeout?: number }} cfg
        */
-      function handleOpenClosed(event) {
-        const { type } = event;
+      function openClose({ shouldOpen, openTimeout = 0, closeTimeout = 0 }) {
+        clearTimeout(pendingDelayTimeout);
+        if (shouldOpen && !isDisabled(controller.invokerNode)) {
+          pendingDelayTimeout = setTimeout(() => controller.show(), openTimeout);
+        } else {
+          pendingDelayTimeout = setTimeout(() => controller.hide(), closeTimeout);
+        }
+      }
 
-        clearTimeout(delayTimeout);
+      /**
+       * @param {Event|PointerEvent} event
+       */
+      async function handleHoverAndFocus(event) {
+        const { type } = event;
         isFocused = type === 'focusout' ? false : isFocused || type === 'focusin';
         isHovered = type === 'mouseleave' ? false : isHovered || type === 'mouseenter';
+        // On touch devices, only open on keyboard-triggered focus, not tap-triggered focus
+        if (
+          !isHoverSupported &&
+          type === 'focusin' &&
+          !controller.invokerNode?.matches(':focus-visible')
+        )
+          return;
         const shouldOpen = isFocused || isHovered;
+        openClose({ shouldOpen, openTimeout: delayIn, closeTimeout: delayOut });
+      }
+
+      /** @param {Event} e */
+      function preventContextMenu(e) {
+        e.preventDefault();
+      }
+
+      /** @param {PointerEvent} event */
+      async function handleLongpress(event) {
+        clearTimeout(pendingLongpressTimeout);
+        if (event.pointerType !== 'touch') return;
+        const { type } = event;
 
-        if (shouldOpen && !controller._hasDisabledInvoker()) {
-          delayTimeout = setTimeout(() => {
-            controller.show();
-          }, delayIn);
+        if (type === 'pointerdown') {
+          longpressCompleted = false;
+          pendingLongpressTimeout = setTimeout(() => {
+            longpressCompleted = true;
+            openClose({ shouldOpen: true });
+          }, longpressDuration);
         } else {
-          delayTimeout = setTimeout(() => {
-            controller.hide();
-          }, delayOut);
+          openClose({
+            shouldOpen: false,
+            closeTimeout: longpressCompleted ? longpressDuration : 0,
+          });
         }
       }
 
       return {
         init: () => {
           controller.addEventListener('hide', resetActive);
-          controller.contentNode?.addEventListener('mouseenter', handleOpenClosed);
-          controller.contentNode?.addEventListener('mouseleave', handleOpenClosed);
-          controller.invokerNode?.addEventListener('mouseenter', handleOpenClosed);
-          controller.invokerNode?.addEventListener('mouseleave', handleOpenClosed);
-          controller.invokerNode?.addEventListener('focusin', handleOpenClosed);
-          controller.invokerNode?.addEventListener('focusout', handleOpenClosed);
+
+          controller.invokerNode?.addEventListener('focusin', handleHoverAndFocus);
+          controller.invokerNode?.addEventListener('focusout', handleHoverAndFocus);
+
+          if (isHoverSupported) {
+            controller.contentNode?.addEventListener('mouseenter', handleHoverAndFocus);
+            controller.contentNode?.addEventListener('mouseleave', handleHoverAndFocus);
+            controller.invokerNode?.addEventListener('mouseenter', handleHoverAndFocus);
+            controller.invokerNode?.addEventListener('mouseleave', handleHoverAndFocus);
+          } else {
+            controller.invokerNode?.style.setProperty('-webkit-touch-callout', 'none');
+            controller.invokerNode?.style.setProperty('user-select', 'none');
+            controller.invokerNode?.style.setProperty('-webkit-user-select', 'none');
+            controller.invokerNode?.addEventListener('contextmenu', preventContextMenu);
+            controller.invokerNode?.addEventListener('pointerdown', handleLongpress);
+            controller.invokerNode?.addEventListener('pointerup', handleLongpress);
+            controller.invokerNode?.addEventListener('pointerleave', handleLongpress);
+          }
         },
         teardown: () => {
           controller.removeEventListener('hide', resetActive);
-          controller.contentNode?.removeEventListener('mouseenter', handleOpenClosed);
-          controller.contentNode?.removeEventListener('mouseleave', handleOpenClosed);
-          controller.invokerNode?.removeEventListener('mouseenter', handleOpenClosed);
-          controller.invokerNode?.removeEventListener('mouseleave', handleOpenClosed);
-          controller.invokerNode?.removeEventListener('focusin', handleOpenClosed);
-          controller.invokerNode?.removeEventListener('focusout', handleOpenClosed);
+
+          controller.invokerNode?.removeEventListener('focusin', handleHoverAndFocus);
+          controller.invokerNode?.removeEventListener('focusout', handleHoverAndFocus);
+
+          if (isHoverSupported) {
+            controller.contentNode?.removeEventListener('mouseenter', handleHoverAndFocus);
+            controller.contentNode?.removeEventListener('mouseleave', handleHoverAndFocus);
+            controller.invokerNode?.removeEventListener('mouseenter', handleHoverAndFocus);
+            controller.invokerNode?.removeEventListener('mouseleave', handleHoverAndFocus);
+          } else {
+            controller.invokerNode?.style.removeProperty('-webkit-touch-callout');
+            controller.invokerNode?.style.removeProperty('user-select');
+            controller.invokerNode?.style.removeProperty('-webkit-user-select');
+            controller.invokerNode?.removeEventListener('contextmenu', preventContextMenu);
+            controller.invokerNode?.removeEventListener('pointerdown', handleLongpress);
+            controller.invokerNode?.removeEventListener('pointerup', handleLongpress);
+            controller.invokerNode?.removeEventListener('pointerleave', handleLongpress);
+          }
         },
       };
     },

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

@@ -56,7 +56,8 @@ function adoptStyleWhenAdoptedStylesheetsNotSupported(
     const styleEl = document.createElement('style');
     // keep notation, so it's not renamed in minification/build
     // eslint-disable-next-line dot-notation
-    const nonce = window['litNonce'];
+    // @ts-ignore - litNonce is a custom property
+    const nonce = window.litNonce;
     if (nonce !== undefined) {
       styleEl.setAttribute('nonce', nonce);
     }
@@ -124,7 +125,7 @@ export function adoptStyle(renderRoot, style, { teardown = false } = {}) {
   if (!teardown) {
     // @ts-ignore
     // eslint-disable-next-line no-param-reassign
-    renderRoot.adoptedStyleSheets = [...renderRoot.adoptedStyleSheets, sheet];
+    renderRoot.adoptedStyleSheets = [...(renderRoot.adoptedStyleSheets || []), sheet];
   } else if (renderRoot.adoptedStyleSheets.includes(sheet)) {
     // @ts-ignore
     // eslint-disable-next-line no-param-reassign

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

@@ -8,6 +8,7 @@ import { isVisible } from './is-visible.js';
 import { sortByTabIndex } from './sort-by-tabindex.js';
 
 // IE11 supports matches as 'msMatchesSelector'
+/** @type {'matches' | 'msMatchesSelector'} */
 const matchesFunc = 'matches' in Element.prototype ? 'matches' : 'msMatchesSelector';
 
 /**
@@ -16,11 +17,14 @@ const matchesFunc = 'matches' in Element.prototype ? 'matches' : 'msMatchesSelec
  */
 function isFocusable(element) {
   // Elements that cannot be focused if they have [disabled] attribute.
+  // @ts-ignore - msMatchesSelector is legacy
   if (element[matchesFunc]('input, select, textarea, button, object')) {
+    // @ts-ignore
     return element[matchesFunc](':not([disabled])');
   }
 
   // Elements that can be focused even if they have [disabled] attribute.
+  // @ts-ignore
   return element[matchesFunc]('a[href], area[href], iframe, [tabindex], [contentEditable]');
 }
 

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

@@ -12,13 +12,17 @@
  */
 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 a === b;
   }
-  const aProps = Object.keys(a);
-  const bProps = Object.keys(b);
-  if (aProps.length !== bProps.length) {
-    return false;
+  if (a instanceof Node && b instanceof Node) {
+    return a === b;
   }
-  const isEqual = /** @param {string} prop */ prop => isEqualConfig(a[prop], b[prop]);
-  return aProps.every(isEqual);
+
+  return Array.from(new Set([...Object.keys(a), ...Object.keys(b)])).every(prop =>
+    // @ts-ignore - dynamic property access
+    isEqualConfig(a[prop], b[prop], prop),
+  );
 }

package/components/overlays/test/OverlayController.test.js

@@ -115,26 +115,35 @@ const withLocalTestConfig = () =>
  */
 async function createNestedEscControllers(parentContent) {
   const childContent = /** @type {HTMLDivElement} */ (parentContent.querySelector('div[id]'));
-  // Assert valid fixure
-  const isValidFixture =
-    (parentContent.id.startsWith('parent-overlay--hidesOnEsc') ||
-      parentContent.id.startsWith('parent-overlay--hidesOnOutsideEsc')) &&
-    (childContent.id.startsWith('child-overlay--hidesOnEsc') ||
-      childContent.id.startsWith('child-overlay--hidesOnOutsideEsc'));
-  if (!isValidFixture) {
-    throw new Error('Provide a valid fixture');
-  }
 
   if (parentContent.hasAttribute('data-convert-to-shadow-root')) {
     const shadowRootParent = parentContent.attachShadow({ mode: 'open' });
     shadowRootParent.appendChild(childContent);
   }
 
+  const parentConfig = {};
+  const childConfig = {};
+
   const parentHasOutsideOnEsc = parentContent.id.startsWith('parent-overlay--hidesOnOutsideEsc');
   const childHasOutsideOnEsc = childContent.id.startsWith('child-overlay--hidesOnOutsideEsc');
 
-  const parentConfig = parentHasOutsideOnEsc ? { hidesOnOutsideEsc: true } : { hidesOnEsc: true };
-  const childConfig = childHasOutsideOnEsc ? { hidesOnOutsideEsc: true } : { hidesOnEsc: true };
+  if (parentHasOutsideOnEsc) {
+    parentConfig.hidesOnOutsideEsc = true;
+  } else {
+    parentConfig.hidesOnEsc = true;
+  }
+  if (childHasOutsideOnEsc) {
+    childConfig.hidesOnOutsideEsc = true;
+  } else {
+    childConfig.hidesOnEsc = true;
+  }
+
+  const parentHasSyncChildrenCloseState =
+    parentContent.dataset.syncChildrenCloseState !== undefined;
+
+  if (parentHasSyncChildrenCloseState) {
+    parentConfig.syncChildrenCloseState = true;
+  }
 
   const parentOverlay = new OverlayController({
     ...withGlobalTestConfig(),
@@ -283,8 +292,9 @@ describe('OverlayController', () => {
             contentNode,
           });
         };
+
         expect(createOverlayController).to.throw(
-          '[OverlayController] Could not find a render target, since the provided contentNode is not connected to the DOM. Make sure that it is connected, e.g. by doing "document.body.appendChild(contentNode)", before passing it on.',
+          '[OverlayController] Could not find a render target, makes sure contentNode has a parent element (or contentWrapperNode is connected)',
         );
       });
 
@@ -346,6 +356,21 @@ describe('OverlayController', () => {
       await ctrl.hide();
       expect(ctrl.isShown).to.be.false;
     });
+
+    // it('cleans up the dom structure it created', async () => {
+    //   const contentNode = /** @type {HTMLElement} */ (fixtureSync(html`<div>my content</div>`));
+    //   const ctrl = new OverlayController({
+    //     placementMode: 'global',
+    //     contentNode,
+    //   });
+    //   await ctrl.show();
+    //   expect(ctrl.contentWrapperNode).to.exist;
+    //   expect(ctrl.__wrappingDialogNode).to.exist;
+
+    //   await ctrl.teardown();
+    //   expect(ctrl.contentWrapperNode).to.not.exist;
+    //   expect(ctrl.__wrappingDialogNode).to.not.exist;
+    // });
   });
 
   describe('Node Configuration', () => {
@@ -403,7 +428,7 @@ describe('OverlayController', () => {
               { ignoreAttributes: ['closedby'] },
             );
 
-            expect(el).lightDom.to.equal(`<div slot="content">projected</div>`);
+            expect(el).lightDom.to.equal(`<div data-content="" slot="content">projected</div>`);
           });
         });
 
@@ -425,7 +450,7 @@ describe('OverlayController', () => {
               `
               <dialog data-overlay-outer-wrapper="" open="" role="none" style="${wrappingDialogNodeStyle}">
                 <div data-id="content-wrapper">
-                  <div id="content">non projected</div>
+                  <div data-content="" id="content">non projected</div>
                 </div>
               </dialog>
           `,
@@ -620,6 +645,7 @@ describe('OverlayController', () => {
     });
   });
 
+  // TODO: make features modular (so they can be treeshaken) and test their lifecycle within this desrcibe
   describe('Feature Configuration', () => {
     describe('trapsKeyboardFocus', () => {
       it('focuses the overlay on show', async () => {
@@ -988,6 +1014,7 @@ describe('OverlayController', () => {
         });
       });
     });
+
     describe('hidesOnOutsideClick', () => {
       it('hides on outside click', async () => {
         const contentNode = /** @type {HTMLElement} */ (await fixture('<div>Content</div>'));
@@ -1708,6 +1735,91 @@ describe('OverlayController', () => {
         expect(ctrl1.hasActiveBackdrop).to.be.true;
       });
     });
+
+    describe('focusContentOnOpen', () => {
+      it('adds tabindex="-1" to the content node when focusContentOnOpen is true', async () => {
+        const ctrl = new OverlayController({
+          ...withGlobalTestConfig(),
+          isBlocking: false,
+          focusContentOnOpen: true,
+        });
+        const contentNode = /** @type {HTMLElement} */ (await fixture('<div>Content</div>'));
+        ctrl.updateConfig({ contentNode });
+        await ctrl.show();
+        expect(contentNode.getAttribute('tabindex')).to.equal('-1');
+      });
+
+      it('makes contentNode the root of "next tab flow"', async () => {
+        const ctrl = new OverlayController({
+          ...withGlobalTestConfig(),
+          isBlocking: false,
+          focusContentOnOpen: true,
+        });
+        const contentNode = /** @type {HTMLElement} */ (
+          await fixture('<div><button>Button</button></div>')
+        );
+        ctrl.updateConfig({ contentNode });
+        await ctrl.show();
+        const button = /** @type {HTMLButtonElement} */ (contentNode.querySelector('button'));
+        button.focus();
+        expect(isActiveElement(button)).to.be.true;
+      });
+    });
+
+    describe('syncChildrenCloseState', () => {
+      it('does not close all children of nested controllers when syncChildrenCloseState is false', async () => {
+        const parentContent = /** @type {HTMLDivElement} */ (
+          await fixture(
+            html` <!-- -->
+              <div data-sync-children-close-state id="parent-overlay">
+                <div id="child-overlay">we open our child and it will close when parent does</div>
+              </div>`,
+          )
+        );
+        const { parentOverlay, childOverlay } = await createNestedEscControllers(parentContent);
+        expect(parentOverlay.isShown).to.be.true;
+        expect(childOverlay.isShown).to.be.true;
+
+        await parentOverlay.hide();
+        await childOverlay._hideComplete;
+        expect(parentOverlay.isShown).to.be.false;
+        expect(childOverlay.isShown).to.be.false;
+      });
+
+      it('does not close all children of nested controllers when syncChildrenCloseState is false', async () => {
+        const parentContent = /** @type {HTMLDivElement} */ (
+          await fixture(
+            html` <!-- -->
+              <div id="parent-overlay">
+                <div id="child-overlay">
+                  we open our child and it will not close when parent does
+                </div>
+              </div>`,
+          )
+        );
+        const { parentOverlay, childOverlay } = await createNestedEscControllers(parentContent);
+        expect(parentOverlay.isShown).to.be.true;
+        expect(childOverlay.isShown).to.be.true;
+
+        await parentOverlay.hide();
+        expect(parentOverlay.isShown).to.be.false;
+        expect(childOverlay.isShown).to.be.true;
+      });
+    });
+
+    describe('isActivated', () => {
+      it('allows to conditionally disable overlay/openable functionality (for responsive context like nav menus, accordions/collapsibles vs plain headings/content etc.)', async () => {
+        const ctrl = new OverlayController({
+          ...withGlobalTestConfig(),
+          isActivated: false,
+        });
+        expect(ctrl.__hasSetup).to.be.false;
+        ctrl.updateConfig({
+          isActivated: true,
+        });
+        expect(ctrl.__hasSetup).to.be.true;
+      });
+    });
   });
 
   describe('Show / Hide / Toggle', () => {
@@ -2298,6 +2410,7 @@ describe('OverlayController', () => {
     });
 
     it('should run with scroll prevention', async () => {
+      await overlayControllerPreventsScroll.hide();
       await overlayControllerPreventsScroll.show();
 
       expect(

package/components/overlays/test/utils-tests/is-equal-config.test.js

@@ -48,7 +48,7 @@ describe('isEqualConfig()', () => {
     expect(isEqualConfig({ ...config, isBlocking: true }, config)).eql(false);
   });
 
-  it('regards missing props different from ones with undefined value', () => {
+  it.skip('regards missing props different from ones with undefined value', () => {
     const config = TestConfig();
     expect(isEqualConfig(config, { ...config, referenceNode: undefined })).eql(false);
   });