@lion/ui 0.18.0-menu-system.1 → 0.18.0-menu-system.4

package/components/menu/src/InteractiveListMixin.js

@@ -457,7 +457,7 @@ const InteractiveListMixinImplementation = superclass =>
          * menuitemradios or -checkboxes.
          * When no role at all, we might deal with a wrapped node (for instance triggering a
          * submenu)
-         * Alternatively, when _activeMode is ['disclosure'](https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-navigation.html),
+         * Alternatively, when _activeMode is ['tabbable-disclosure'](https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-navigation.html),
          * we search for a[href]
          */
         if (node.getAttribute('role') === 'group') {

package/components/menu/src/MoreButtonMenuMixin.js

@@ -1,62 +1,31 @@
-// @ts-nocheck
-/**
- * @param {any} superclass
- */
-/** @type {any} */
-
-const styles = `
-  <style>
-    /** More button is hidden by default */
-    [data-more-button-wrapper] {
-      display: none;
-    }
-
-    [data-more-button-menu]:has([role='listitem'] [active]:focus):not(
-        :has([role='listitem'] [active][aria-expanded='true'])
-      ) {
-      overflow: visible;
-      width: auto;
-      height: auto;
-      position: absolute;
-      top: 100%;
-      background-color: var(--oj2_bg_default);
-    }
-    [data-more-button-menu],
-    [data-more-button-menu]:has([role='listitem'] [active][aria-expanded='true']) {
-      overflow: hidden;
-      width: 1px;
-      height: 1px;
-    }
-
-    :host([responsive-mode='desktop']) [level='1'] > [slot='list'] > [role='listitem'] > button,
-    :host([responsive-mode='desktop']) [level='1'] > [slot='list'] > [role='listitem'] > a,
-    :host([responsive-mode='desktop'])
-      [level='1']
-      > [slot='list']
-      > [data-more-button-wrapper]
-      > [role='listitem']
-      > button,
-    :host([responsive-mode='desktop'])
-      [level='1']
-      > [slot='list']
-      > [data-more-button-wrapper]
-      > [role='listitem']
-      > a {
-      white-space: nowrap;
-    }
-    /**
-    * TODO listitem rigth margin/gap is not taken at the account ATM
-    */
-    /**
-     * More button relies on the fact that the menu items do not break the line
-     * TODO is it optimal?
-     */
-    :host([responsive-mode='desktop']) > [role='list'] > [role='listitem'] > button,
-    :host([responsive-mode='desktop']) > [role='list'] > [role='listitem'] > a {
-      white-space: nowrap;
-    }    
-  </style>
-  `;
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { css } from 'lit';
+
+const styles = css`
+  /** More button is hidden by default */
+  [data-more-button-wrapper] {
+    display: none;
+  }
+
+  [data-more-button-menu][data-open]:not(:has([role='listitem'] [aria-expanded='true'])) {
+    position: absolute;
+    overflow: visible;
+    height: auto;
+    width: auto;
+    top: 100%;
+  }
+
+  /** N.B. this is a simplified version of sr-only. when we move to overlayctrl, we should build this into overlayctrl */
+  [data-more-button-menu] {
+    overflow: hidden;
+    height: 1px;
+    width: 1px;
+  }
+
+  [role='list']:has(> [data-more-button-wrapper]) > [role='listitem'] > :is(button, a) {
+    white-space: nowrap;
+  }
+`;
 
 // @ts-ignore - JS mixin typing
 export const MoreButtonMenuMixin = superclass =>
@@ -85,7 +54,7 @@ export const MoreButtonMenuMixin = superclass =>
     // eslint-disable-next-line class-methods-use-this
     _getDeepActiveElement() {
       let host = document.activeElement || document.body;
-      while (host && host.shadowRoot && host.shadowRoot.activeElement) {
+      while (host?.shadowRoot?.activeElement) {
         host = host.shadowRoot.activeElement;
       }
       return host;
@@ -94,7 +63,7 @@ export const MoreButtonMenuMixin = superclass =>
     _createMoreButtonWrapper() {
       const moreButtonWrapper = document.createElement('div');
       const style = document.createElement('style');
-      style.textContent = styles;
+      style.textContent = styles.cssText;
       moreButtonWrapper.appendChild(style);
       moreButtonWrapper.setAttribute('data-more-button-wrapper', '');
       [...this.getMoreButtonSlotProjection().childNodes].forEach(node =>
@@ -107,32 +76,38 @@ export const MoreButtonMenuMixin = superclass =>
       const moreButtonMenu = document.createElement('div');
       moreButtonMenu.setAttribute('data-more-button-menu', '');
       moreButtonWrapper.appendChild(moreButtonMenu);
-      moreButtonMenu.setAttribute('role', 'none');
       this._listNode.appendChild(moreButtonWrapper);
 
-      const isElementDirectFocusableItemUnderMoreButtonMenu = element => {
-        const targetTagName = element?.tagName;
-        return (
-          element?.parentElement?.parentElement === moreButtonMenu &&
-          (targetTagName === 'BUTTON' || targetTagName === 'A')
-        );
-      };
+      const isElementDirectFocusableItemUnderMoreButtonMenu = (/** @type {Element} */ element) =>
+        this.listItems.includes(element) && moreButtonMenu.contains(element);
 
-      moreButtonMenu.addEventListener('focusin', event => {
-        const target = event?.target;
-        if (isElementDirectFocusableItemUnderMoreButtonMenu(target)) {
+      moreButtonMenu.addEventListener(
+        'focusin',
+        /** @type {FocusEvent} */ event => {
+          const target = /** @type {HTMLElement} */ (event?.target);
+          if (!isElementDirectFocusableItemUnderMoreButtonMenu(target)) return;
+
+          // A user did `Shift + Tab` from L2 menu to More menu
           if (target?.getAttribute('aria-expanded') === 'true') {
+            // close L2 menu
             target?.click();
           }
           moreButton?.setAttribute('aria-expanded', 'true');
-        }
-      });
+          moreButtonMenu.setAttribute('data-open', '');
+        },
+      );
 
-      moreButtonMenu.addEventListener('focusout', event => {
-        const target = event?.target;
-        if (isElementDirectFocusableItemUnderMoreButtonMenu(target)) {
+      moreButtonMenu.addEventListener('focusout', () => {
+        // We need this timeout for Safari/WebKit.
+        // Unfortunately, an in progress click gets canceled when overflow:hidden is applied.
+        // Although mousedown would work instead, the consuming developer should have the freedom to apply all possible interaction pattterns.
+        // Especially, we should be compatible with 'withClickInteraction'
+        setTimeout(() => {
+          if (isElementDirectFocusableItemUnderMoreButtonMenu(this._getDeepActiveElement())) return;
           moreButton?.setAttribute('aria-expanded', 'false');
-        }
+
+          moreButtonMenu.removeAttribute('data-open');
+        }, 100);
       });
 
       this.hasMoreButtonMenuAnyFocusedFirstLevelItems = false;
@@ -140,22 +115,26 @@ export const MoreButtonMenuMixin = superclass =>
       moreButton?.addEventListener('mousedown', () => {
         this.hasMoreButtonMenuAnyFocusedFirstLevelItems = false;
         const focusableFirstLevelItems = moreButtonMenu.querySelectorAll(
-          ':scope > [role="listitem"] > a, :scope > [role="listitem"] > button',
+          ':scope > [role="listitem"] > :is(a, button)',
         );
 
-        [...focusableFirstLevelItems]?.forEach(focusableFirstLevelItem => {
+        // @ts-ignore Type 'NodeListOf<Element>' must have a '[Symbol.iterator]()' method that returns an iterator.
+        for (const focusableFirstLevelItem of focusableFirstLevelItems) {
           if (this._getDeepActiveElement() === focusableFirstLevelItem) {
             this.hasMoreButtonMenuAnyFocusedFirstLevelItems = true;
           }
-        });
+        }
       });
 
       moreButton?.addEventListener('click', () => {
-        if (!this.hasMoreButtonMenuAnyFocusedFirstLevelItems) {
-          moreButtonMenu
-            .querySelector(':scope > [role="listitem"] > a, :scope > [role="listitem"] > button')
-            ?.focus();
-        }
+        if (this.hasMoreButtonMenuAnyFocusedFirstLevelItems) return;
+        /** @type {HTMLElement | null} */
+        const firstInteractiveItem = moreButtonMenu.querySelector(
+          ':scope > [role="listitem"] > :is(a, button)',
+        );
+
+        firstInteractiveItem?.focus();
+        moreButtonMenu.setAttribute('data-open', '');
       });
     }
 
@@ -232,13 +211,13 @@ export const MoreButtonMenuMixin = superclass =>
       return fragment;
     };
 
-    moveItemToMoreButtonMenuFromMainMenu() {
-      const moreButtonMenuElement = this.getMoreButtonMenu();
-      const listItems = this._listNode.querySelectorAll(':scope > [role="listitem"]');
-      const listItem = listItems[listItems.length - 1];
-
+    /**
+     * @param {{ moreButtonMenuElement: HTMLButtonElement, listItem: HTMLElement }} opts
+     */
+    moveItemToMoreButtonMenuFromMainMenu({ moreButtonMenuElement, listItem }) {
       const fragment = this.getListItemWithAdjacentNodes(listItem);
       moreButtonMenuElement.prepend(fragment);
+      // eslint-disable-next-line no-param-reassign
       listItem.style.display = '';
       this.displayMoreButton();
     }
@@ -268,9 +247,15 @@ export const MoreButtonMenuMixin = superclass =>
       return hiddenItemsCount;
     }
 
+    /**
+     * @param {number} hiddenItemsCount
+     */
     moveHiddenItemsFromMainMenuToMoreButtonMenu(hiddenItemsCount) {
+      const moreButtonMenuElement = this.getMoreButtonMenu();
+      const listItems = this._listNode.querySelectorAll(':scope > [role="listitem"]');
       for (let i = 0; i < hiddenItemsCount; i += 1) {
-        this.moveItemToMoreButtonMenuFromMainMenu();
+        const listItem = listItems[listItems.length - 1 - i];
+        this.moveItemToMoreButtonMenuFromMainMenu({ moreButtonMenuElement, listItem });
       }
     }
 
@@ -279,6 +264,8 @@ export const MoreButtonMenuMixin = superclass =>
         return;
       }
 
+      this.style.visibility = 'hidden';
+
       this.__resizeTimeout = setTimeout(() => {
         this.__resizeTimeout = null;
 
@@ -286,12 +273,15 @@ export const MoreButtonMenuMixin = superclass =>
         this.hideMoreButton();
 
         if (this.doItemsFit()) {
+          this.style.visibility = '';
           return;
         }
 
+        this.style.visibility = 'hidden';
         this.displayMoreButton();
         const hiddenItemsCount = this.hideItemsOneByOneInMainMenuUntilTheyFit();
         this.moveHiddenItemsFromMainMenuToMoreButtonMenu(hiddenItemsCount);
+        this.style.visibility = '';
       }, 50);
     }
   };

package/components/menu/src/MultiLevelListMixin.js

@@ -214,7 +214,7 @@ const MultiLevelListMixinImplementation = superclass =>
           if (
             this.orientation === 'horizontal' &&
             subListOfActiveItem &&
-            this._activeMode !== 'disclosure'
+            this._activeMode !== 'tabbable-disclosure'
           ) {
             this.activeItem.click();
           }

package/components/navigation-bar/src/LionNavigationBar.js

@@ -199,7 +199,7 @@ export class LionNavigationBar extends ScopedElementsMixin(LitElement) {
           openableConfig: {
             // We want to do the absolute positioning ourselves, popper is not suited for this...
             placementMode: 'custom',
-            isOpenable: false,
+            isActivated: false,
             hidesOnOutsideClick: false,
             inheritsReferenceWidth: 'none',
           },
@@ -231,7 +231,7 @@ export class LionNavigationBar extends ScopedElementsMixin(LitElement) {
           // We want disclosure behavior
           placementMode: 'custom',
           // N.B. we don't have an invoker...
-          isOpenable: false,
+          isActivated: false,
           inheritsReferenceWidth: 'none',
           focusContentOnOpen: true,
         },

package/components/overlays/src/OverlayController.js

@@ -237,8 +237,7 @@ export class OverlayController extends EventTarget {
         placement: 'center',
       },
       zIndex: 9999,
-      // TODO: rename to isActivated
-      isOpenable: true,
+      isActivated: true,
       focusContentOnOpen: false,
       // This means that content will have visually-hidden / sr-only styles. This is handy for:
       // - hidden menus that should be "indexable" by screen readers (like the Links list in VO: https://support.apple.com/en-gb/guide/voiceover/mchlp2719/mac)
@@ -247,6 +246,11 @@ export class OverlayController extends EventTarget {
       // @ts-ignore - hideVisually is an extension property
       hideVisually: false,
       requireConnectedNodes: true,
+
+      // hides children overlays when parent is closed...
+      syncChildrenCloseState: false,
+      // // In next major, we remove this prop. Now we disable it for backwards compatibility and enable it in the places we need it internally
+      // _shouldTeardownDomStructure: false,
     };
 
     /** @protected */
@@ -272,7 +276,7 @@ export class OverlayController extends EventTarget {
     this.__escKeyHandlerCalled = false;
   }
 
-  #hasSetup = false;
+  __hasSetup = false;
 
   /**
    * The invokerNode
@@ -540,7 +544,7 @@ export class OverlayController extends EventTarget {
       },
     };
 
-    const shouldUpdate = !this.#hasSetup || !isEqualConfig(prevConfig, newConfig);
+    const shouldUpdate = !this.__hasSetup || !isEqualConfig(prevConfig, newConfig);
     if (!shouldUpdate) return;
     // Teardown all previous configs
 
@@ -592,7 +596,7 @@ export class OverlayController extends EventTarget {
    * @protected
    */
   _init() {
-    if (!this.config.isOpenable) return;
+    if (!this.config.isActivated) return;
 
     // TODO: should not be behind a flag when we are fully tearing down...
     // TODO 2: When we move away from dialog (use popover to paint to top layer)
@@ -627,7 +631,7 @@ export class OverlayController extends EventTarget {
     // Use event delegation to listen for clicks on close buttons...
     this.contentNode.addEventListener('click', this.#hideOnCloseButtonClick);
 
-    this.#hasSetup = true;
+    this.__hasSetup = true;
   }
 
   #hideOnCloseButtonClick = (/** @type {{ target: any; }} */ ev) => {
@@ -981,7 +985,7 @@ export class OverlayController extends EventTarget {
    */
   async hide() {
     // Function like a no-op for dynamic edge cases...
-    if (!this.config.isOpenable) return;
+    if (!this.config.isActivated) return;
 
     this._hideComplete = new Promise(resolve => {
       this._hideResolve = resolve;
@@ -1135,24 +1139,53 @@ export class OverlayController extends EventTarget {
     if (this.visibilityTriggerFunction) {
       this._handleVisibilityTriggers({ phase });
     }
-
-    if (phase === 'init' && this.config.focusContentOnOpen) {
-      this.contentNode?.setAttribute('tabindex', '-1');
+    if (this.config.syncChildrenCloseState) {
+      this._handleSyncChildrenCloseState({ phase });
     }
+    if (this.config.focusContentOnOpen) {
+      this._handleFocusContentOnOpen({ phase });
+    }
+  }
 
-    if (phase === 'teardown' && this.config.focusContentOnOpen) {
+  /**
+   * @param {{phase: OverlayPhase}} opts
+   * @returns {void}
+   */
+  _handleFocusContentOnOpen({ phase }) {
+    if (phase === 'init') {
+      this.contentNode?.setAttribute('tabindex', '-1');
+    } else if (phase === 'teardown') {
       // TODO: capture initial attr, use Resettable mechanism of VisibilityToggleCtrl in whole Controller
       this.contentNode?.removeAttribute('tabindex');
     }
   }
 
+  /**
+   * @param {{phase: OverlayPhase}} opts
+   * @returns {void}
+   */
+  _handleSyncChildrenCloseState({ phase }) {
+    if (phase !== 'hide') return;
+
+    const visibleChildren = this.manager.shownList.filter(
+      ctrl => ctrl !== this && deepContains(this.contentNode, ctrl.contentNode),
+    );
+    visibleChildren.forEach(ctrl => ctrl.hide());
+  }
+
   /**
    * @param {{ phase: OverlayPhase }} config
    */
   _handleVisibilityTriggers({ phase }) {
     if (typeof this.visibilityTriggerFunction !== 'function') return;
 
-    this.visibilityTriggerFunction({ controller: this })?.[phase]?.();
+    // Here we initialize the __visibilityTriggerHandler of our invokerNode. It's important that we ONLY do this on init,
+    // otherwise we risk not being able to properly clean up listeners...
+    if (phase === 'init') {
+      this.__visibilityTriggerHandler = this.visibilityTriggerFunction({ controller: this });
+    }
+    // Here we run the appropriate lifecycle, if defined in our handler
+    this.__visibilityTriggerHandler[phase]?.();
   }
 
   /**
@@ -1562,7 +1595,7 @@ export class OverlayController extends EventTarget {
   }
 
   teardown() {
-    if (!this.#hasSetup) return;
+    if (!this.__hasSetup) return;
     this.__handleOverlayStyles({ phase: 'teardown' });
     if (this.isShown) {
       this._keepBodySize({ phase: 'teardown' });
@@ -1574,10 +1607,12 @@ export class OverlayController extends EventTarget {
 
     this.contentNode?.removeEventListener('click', this.#hideOnCloseButtonClick);
 
+    // if (this.config._shouldTeardownDomStructure) {
     this.__rearrangeNodesCleanup?.();
+    // }
     this.__teardownVisibility();
 
-    this.#hasSetup = false;
+    this.__hasSetup = false;
   }
 
   /** @private */

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(),
@@ -347,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', () => {
@@ -621,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 () => {
@@ -983,6 +1008,7 @@ describe('OverlayController', () => {
         });
       });
     });
+
     describe('hidesOnOutsideClick', () => {
       it('hides on outside click', async () => {
         const contentNode = /** @type {HTMLElement} */ (await fixture('<div>Content</div>'));
@@ -1703,6 +1729,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', () => {

package/components/overlays/types/ArrowMixinTypes.ts

@@ -26,7 +26,9 @@ export declare class ArrowHost {
 
   protected _defineOverlayConfig(): OverlayConfig;
 
-  protected _getPopperArrowConfig(popperConfigToExtendFrom: Partial<PopperOptions>): Partial<PopperOptions>;
+  protected _getPopperArrowConfig(
+    popperConfigToExtendFrom: Partial<PopperOptions>,
+  ): Partial<PopperOptions>;
 
   private __setupRepositionCompletePromise(): void;
 

package/components/overlays/types/OverlayConfig.ts

@@ -111,11 +111,15 @@ export interface OverlayConfig {
    * By default, we function either as overlay or disclosure. In some cases, this should be dynamically set (think of responsive changes).
    * or it depends on the context (a top level menu is not openable (unless it's a context menu), its children menus are).
    */
-  isOpenable?: boolean;
+  isActivated?: boolean;
 
   /**
    * By default, an error is thrown when contentNode is not connected to the DOM.
    * This allows to prepare nodes and later connect them to dom.
    */
   requireConnectedNodes?: boolean;
+
+  syncChildrenCloseState?: boolean;
+
+  _shouldTeardownDomStructure?: boolean;
 }