@lion/ui 0.0.10 → 0.0.12

package/components/accordion/src/LionAccordion.js

@@ -210,10 +210,10 @@ export class LionAccordion extends LitElement {
    */
   __rearrangeInvokersAndContent() {
     const invokers = /** @type {HTMLElement[]} */ (
-      Array.from(this.querySelectorAll('[slot="invoker"]'))
+      Array.from(this.children).filter(child => child.slot === 'invoker')
     );
     const contents = /** @type {HTMLElement[]} */ (
-      Array.from(this.querySelectorAll('[slot="content"]'))
+      Array.from(this.children).filter(child => child.slot === 'content')
     );
     const accordion = this.shadowRoot?.querySelector('slot[name=_accordion]');
     if (accordion) {

package/components/dialog/src/LionDialog.js

@@ -2,14 +2,6 @@ import { html, LitElement } from 'lit';
 import { OverlayMixin, withModalDialogConfig } from '@lion/ui/overlays.js';
 
 export class LionDialog extends OverlayMixin(LitElement) {
-  constructor() {
-    super();
-    /** @private */
-    this.__toggle = () => {
-      this.opened = !this.opened;
-    };
-  }
-
   /**
    * @protected
    */
@@ -20,26 +12,6 @@ export class LionDialog extends OverlayMixin(LitElement) {
     };
   }
 
-  /**
-   * @protected
-   */
-  _setupOpenCloseListeners() {
-    super._setupOpenCloseListeners();
-    if (this._overlayInvokerNode) {
-      this._overlayInvokerNode.addEventListener('click', this.__toggle);
-    }
-  }
-
-  /**
-   * @protected
-   */
-  _teardownOpenCloseListeners() {
-    super._teardownOpenCloseListeners();
-    if (this._overlayInvokerNode) {
-      this._overlayInvokerNode.removeEventListener('click', this.__toggle);
-    }
-  }
-
   render() {
     return html`
       <slot name="invoker"></slot>

package/components/dialog/test/lion-dialog.test.js

@@ -39,7 +39,8 @@ describe('lion-dialog', () => {
       `);
       const invoker = /** @type {HTMLElement} */ (el.querySelector('[slot="invoker"]'));
       invoker.click();
-
+      // @ts-expect-error [allow-protected-in-tests]
+      await el._overlayCtrl._showComplete;
       expect(el.opened).to.be.true;
     });
 
@@ -57,14 +58,18 @@ describe('lion-dialog', () => {
         </lion-dialog>
       `);
 
-      // @ts-expect-error [allow-protected] in tests
+      // @ts-expect-error [allow-protected-in-tests]
       el._overlayInvokerNode.click();
+      // @ts-expect-error [allow-protected-in-tests]
+      await el._overlayCtrl._showComplete;
       expect(el.opened).to.be.true;
 
-      const nestedDialog = /** @type {LionDialog} */ (el.querySelector('lion-dialog'));
+      const nestedDialogEl = /** @type {LionDialog} */ (el.querySelector('lion-dialog'));
       // @ts-expect-error you're not allowed to call protected _overlayInvokerNode in public context, but for testing it's okay
-      nestedDialog?._overlayInvokerNode.click();
-      expect(nestedDialog.opened).to.be.true;
+      nestedDialogEl?._overlayInvokerNode.click();
+      // @ts-expect-error [allow-protected-in-tests]
+      await nestedDialogEl._overlayCtrl._showComplete;
+      expect(nestedDialogEl.opened).to.be.true;
     });
   });
 });

package/components/input-datepicker/src/LionInputDatepicker.js

@@ -305,6 +305,7 @@ export class LionInputDatepicker extends ScopedElementsMixin(
       return {
         ...withModalDialogConfig(),
         hidesOnOutsideClick: true,
+        visibilityTriggerFunction: undefined,
         ...super._defineOverlayConfig(),
         popperConfig: {
           ...super._defineOverlayConfig().popperConfig,
@@ -379,10 +380,7 @@ export class LionInputDatepicker extends ScopedElementsMixin(
     // On every validator change, synchronize disabled dates: this means
     // we need to extract minDate, maxDate, minMaxDate and disabledDates validators
     validators.forEach(v => {
-      const vctor =
-        /** @type {typeof import('../../form-core/src/validate/Validator.js').Validator} */ (
-          v.constructor
-        );
+      const vctor = /** @type {typeof import('@lion/ui/form-core.js').Validator} */ (v.constructor);
       if (vctor.validatorName === 'MinDate') {
         this.__calendarMinDate = v.param;
       } else if (vctor.validatorName === 'MaxDate') {

package/components/localize/src/singleton.js

@@ -4,7 +4,7 @@ import { LocalizeManager } from './LocalizeManager.js';
 /** @type {LocalizeManager} */
 // eslint-disable-next-line import/no-mutable-exports
 export const localize =
-  singletonManager.get('@lion/ui::localize::0.x') ||
+  /** @type {LocalizeManager} */ (singletonManager.get('@lion/ui::localize::0.x')) ||
   new LocalizeManager({
     autoLoadOnLocaleChange: true,
     fallbackLocale: 'en-GB',

package/components/overlays/src/OverlayController.js

@@ -1,4 +1,3 @@
-import { EventTargetShim } from '@lion/ui/core.js';
 import { adoptStyles } from 'lit';
 import { overlays } from './singleton.js';
 import { containFocus } from './utils/contain-focus.js';
@@ -14,6 +13,22 @@ import { overlayShadowDomStyle } from './overlayShadowDomStyle.js';
  * @typedef {'setup'|'init'|'teardown'|'before-show'|'show'|'hide'|'add'|'remove'} OverlayPhase
  */
 
+const rootNodeStylesMap = new WeakSet();
+
+/**
+ * Returns element that adopts stylesheet
+ * @param {Element} shadowOrBodyEl
+ * @returns {ShadowRoot}
+ */
+function getRootNodeOrBodyElThatAdoptsStylesheet(shadowOrBodyEl) {
+  const rootNode = /** @type {* & DocumentOrShadowRoot} */ (shadowOrBodyEl.getRootNode());
+  if (rootNode === document) {
+    // @ts-ignore
+    return document.body;
+  }
+  return rootNode;
+}
+
 /**
  * From:
  * - wrappingDialogNodeL1: `<dialog role="none"/>`
@@ -42,7 +57,7 @@ function rearrangeNodes({ wrappingDialogNodeL1, contentWrapperNodeL2, contentNod
   }
 
   let parentElement;
-  const tempMarker = document.createComment('temp-marker');
+  const tempMarker = document.createComment('tempMarker');
 
   if (contentWrapperNodeL2.isConnected) {
     // This is the case when contentWrapperNode (living in shadow dom, wrapping <slot name="my-content-outlet">) is already provided via controller.
@@ -113,7 +128,7 @@ const supportsCSSTypedObject = window.CSS?.number && document.body.attributeStyl
  * bottom/top/left/right sheets etc.
  *
  */
-export class OverlayController extends EventTargetShim {
+export class OverlayController extends EventTarget {
   /**
    * @constructor
    * @param {OverlayConfig} config initial config. Will be remembered as shared config
@@ -150,7 +165,7 @@ export class OverlayController extends EventTargetShim {
       hidesOnOutsideClick: false,
       isTooltip: false,
       invokerRelation: 'description',
-      // handlesUserInteraction: false,
+      visibilityTriggerFunction: undefined,
       handlesAccessibility: false,
       popperConfig: {
         placement: 'top',
@@ -403,6 +418,10 @@ export class OverlayController extends EventTargetShim {
     return /** @type {ViewportConfig} */ (this.config?.viewportConfig);
   }
 
+  get visibilityTriggerFunction() {
+    return /** @type {function} */ (this.config?.visibilityTriggerFunction);
+  }
+
   /**
    * @desc The element our local overlay will be positioned relative to.
    * @type {HTMLElement | undefined}
@@ -454,11 +473,9 @@ export class OverlayController extends EventTargetShim {
         ...(this.__sharedConfig.popperConfig || {}),
         ...(cfgToAdd.popperConfig || {}),
         modifiers: [
-          ...((this._defaultConfig.popperConfig && this._defaultConfig.popperConfig.modifiers) ||
-            []),
-          ...((this.__sharedConfig.popperConfig && this.__sharedConfig.popperConfig.modifiers) ||
-            []),
-          ...((cfgToAdd.popperConfig && cfgToAdd.popperConfig.modifiers) || []),
+          ...(this._defaultConfig.popperConfig?.modifiers || []),
+          ...(this.__sharedConfig.popperConfig?.modifiers || []),
+          ...(cfgToAdd.popperConfig?.modifiers || []),
         ],
       },
     };
@@ -514,16 +531,24 @@ export class OverlayController extends EventTargetShim {
     this.contentWrapperNode.removeAttribute('class');
 
     if (this.placementMode === 'local') {
-      // Lazily load Popper if not done yet
+      // Lazily load Popper as soon as the first local overlay is used...
       if (!OverlayController.popperModule) {
         OverlayController.popperModule = preloadPopper();
       }
     }
-    const rootNode = /** @type {ShadowRoot} */ (this.contentWrapperNode.getRootNode());
-    adoptStyles(rootNode, [...(rootNode.adoptedStyleSheets || []), overlayShadowDomStyle]);
+    this.__initOverlayStyles();
     this._handleFeatures({ phase: 'init' });
   }
 
+  __initOverlayStyles() {
+    const rootNode = getRootNodeOrBodyElThatAdoptsStylesheet(this.contentWrapperNode);
+    if (!rootNodeStylesMap.has(rootNode)) {
+      // TODO: ideally we should also support a teardown
+      adoptStyles(rootNode, [...(rootNode.adoptedStyleSheets || []), overlayShadowDomStyle]);
+      rootNodeStylesMap.add(rootNode);
+    }
+  }
+
   /**
    * Here we arrange our content node via:
    * 1. HTMLDialogElement: the content will always be painted to the browser's top layer
@@ -710,7 +735,7 @@ export class OverlayController extends EventTargetShim {
     this.dispatchEvent(event);
     if (!event.defaultPrevented) {
       if (this.__wrappingDialogNode instanceof HTMLDialogElement) {
-        this.__wrappingDialogNode.show();
+        this.__wrappingDialogNode.open = true;
       }
       // @ts-ignore
       this.__wrappingDialogNode.style.display = '';
@@ -947,6 +972,26 @@ export class OverlayController extends EventTargetShim {
     if (this.inheritsReferenceWidth) {
       this._handleInheritsReferenceWidth();
     }
+    if (this.visibilityTriggerFunction) {
+      this._handleVisibilityTriggers({ phase });
+    }
+  }
+
+  /**
+   * @param {{ phase: OverlayPhase }} config
+   */
+  _handleVisibilityTriggers({ phase }) {
+    if (typeof this.visibilityTriggerFunction === 'function') {
+      if (phase === 'init') {
+        this.__visibilityTriggerHandler = this.visibilityTriggerFunction({
+          phase,
+          controller: this,
+        });
+      }
+      if (this.__visibilityTriggerHandler[phase]) {
+        this.__visibilityTriggerHandler[phase]();
+      }
+    }
   }
 
   /**
@@ -1009,10 +1054,14 @@ export class OverlayController extends EventTargetShim {
         break;
       }
       case 'show':
-        this.backdropNode.classList.add(`overlays__backdrop--visible`);
+        if (this.config.hasBackdrop) {
+          this.backdropNode.classList.add(`overlays__backdrop--visible`);
+        }
         this.__hasActiveBackdrop = true;
         break;
       case 'hide':
+      case 'teardown':
+        this.backdropNode.classList.remove(`overlays__backdrop--visible`);
         this.__hasActiveBackdrop = false;
         break;
     }
@@ -1252,6 +1301,16 @@ export class OverlayController extends EventTargetShim {
       });
     }
   }
+
+  _hasDisabledInvoker() {
+    if (this.invokerNode) {
+      return (
+        /** @type {HTMLElement & { disabled: boolean }} */ (this.invokerNode).disabled ||
+        this.invokerNode.getAttribute('aria-disabled') === 'true'
+      );
+    }
+    return false;
+  }
 }
 /** @type {Promise<PopperModule> | undefined} */
 OverlayController.popperModule = undefined;

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

@@ -0,0 +1,32 @@
+/**
+ * @typedef {import('@lion/ui/types/overlays.js').OverlayConfig} OverlayConfig
+ * @typedef {import('@lion/ui/overlays.js').OverlayController} OverlayController
+ */
+
+/**
+ * Use for popovers/dropdowns, (modal) dialogs etc...
+ * @returns {Partial<OverlayConfig>}
+ */
+export function withClickInteraction() {
+  return {
+    visibilityTriggerFunction: (
+      /** @type {{ controller: OverlayController }} */ { controller },
+    ) => {
+      function handleOpenClosed() {
+        if (controller._hasDisabledInvoker()) {
+          return;
+        }
+        controller.toggle();
+      }
+
+      return {
+        init: () => {
+          controller.invokerNode?.addEventListener('click', handleOpenClosed);
+        },
+        teardown: () => {
+          controller.invokerNode?.removeEventListener('click', handleOpenClosed);
+        },
+      };
+    },
+  };
+}

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

@@ -0,0 +1,76 @@
+/**
+ * @typedef {import('@lion/ui/types/overlays.js').OverlayConfig} OverlayConfig
+ * @typedef {import('@lion/ui/overlays.js').OverlayController} OverlayController
+ */
+
+// N.B. Below logic is tested in LionTooltip
+
+/**
+ * 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
+ * @returns {Partial<OverlayConfig>}
+ */
+export function withHoverInteraction({ delayIn = 0, delayOut = 300 }) {
+  return {
+    visibilityTriggerFunction: (
+      /** @type {{ controller: OverlayController }} */ { controller },
+    ) => {
+      let isFocused = false;
+      let isHovered = false;
+      /** @type {NodeJS.Timeout} */
+      let delayTimeout;
+
+      function resetActive() {
+        isFocused = false;
+        isHovered = false;
+      }
+
+      /**
+       * @param {Event} event
+       */
+      function handleOpenClosed(event) {
+        const { type } = event;
+        if (controller._hasDisabledInvoker()) {
+          return;
+        }
+        clearTimeout(delayTimeout);
+        isFocused = type === 'focusout' ? false : isFocused || type === 'focusin';
+        isHovered = type === 'mouseleave' ? false : isHovered || type === 'mouseenter';
+        const shouldOpen = isFocused || isHovered;
+
+        if (shouldOpen) {
+          delayTimeout = setTimeout(() => {
+            controller.show();
+          }, delayIn);
+        } else {
+          delayTimeout = setTimeout(() => {
+            controller.hide();
+          }, delayOut);
+        }
+      }
+
+      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);
+        },
+        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);
+        },
+      };
+    },
+  };
+}

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

@@ -1,3 +1,5 @@
+import { withClickInteraction } from './visibility-trigger-partials/withClickInteraction.js';
+
 /**
  * @typedef {import('../../types/OverlayConfig.js').OverlayConfig} OverlayConfig
  */
@@ -13,4 +15,5 @@ export const withBottomSheetConfig = () =>
       placement: 'bottom',
     },
     handlesAccessibility: true,
+    ...withClickInteraction(),
   });

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

@@ -1,3 +1,5 @@
+import { withClickInteraction } from './visibility-trigger-partials/withClickInteraction.js';
+
 /**
  * @typedef {import('../../types/OverlayConfig.js').OverlayConfig} OverlayConfig
  */
@@ -19,4 +21,5 @@ export const withDropdownConfig = () =>
       ],
     },
     handlesAccessibility: true,
+    ...withClickInteraction(),
   });

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

@@ -1,3 +1,5 @@
+import { withClickInteraction } from './visibility-trigger-partials/withClickInteraction.js';
+
 /**
  * @typedef {import('../../types/OverlayConfig.js').OverlayConfig} OverlayConfig
  */
@@ -13,4 +15,5 @@ export const withModalDialogConfig = () =>
     trapsKeyboardFocus: true,
     hidesOnEsc: true,
     handlesAccessibility: true,
+    ...withClickInteraction(),
   });

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

@@ -0,0 +1,29 @@
+import { withHoverInteraction } from './visibility-trigger-partials/withHoverInteraction.js';
+
+/**
+ * @typedef {import('@lion/ui/types/overlays.js').OverlayConfig} OverlayConfig
+ * @typedef {import('@lion/ui/overlays.js').OverlayController} OverlayController
+ */
+
+/**
+ *
+ * @param {{invokerRelation?: 'description'| 'label', delayIn?: number, delayOut?: number  }} options
+ */
+export const withTooltipConfig = ({
+  invokerRelation = 'description',
+  delayIn = 300,
+  delayOut = 300,
+} = {}) =>
+  /** @type {OverlayConfig} */ ({
+    placementMode: 'local',
+    elementToFocusAfterHide: undefined,
+    hidesOnEsc: true,
+    hidesOnOutsideEsc: true,
+    handlesAccessibility: true,
+    isTooltip: true,
+    invokerRelation,
+    popperConfig: {
+      strategy: 'absolute',
+    },
+    ...withHoverInteraction({ delayIn, delayOut }),
+  });

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

@@ -11,7 +11,7 @@ import {
 import sinon from 'sinon';
 import { OverlayController, overlays } from '@lion/ui/overlays.js';
 import { mimicClick } from '@lion/ui/overlays-test-helpers.js';
-
+import { overlayShadowDomStyle } from '../src/overlayShadowDomStyle.js';
 import { keyCodes } from '../src/utils/key-codes.js';
 import { simulateTab } from '../src/utils/simulate-tab.js';
 
@@ -23,6 +23,22 @@ import { simulateTab } from '../src/utils/simulate-tab.js';
 const wrappingDialogNodeStyle = 'display: none; z-index: 9999;';
 
 /**
+ * Returns element that adopts stylesheet
+ * @param {Element} shadowOrBodyEl
+ * @returns {ShadowRoot}
+ */
+function getRootNodeOrBodyElThatAdoptsStylesheet(shadowOrBodyEl) {
+  const rootNode = /** @type {* & DocumentOrShadowRoot} */ (shadowOrBodyEl.getRootNode());
+  if (rootNode === document) {
+    // @ts-ignore
+    return document.body;
+  }
+  return rootNode;
+}
+
+/**
+ * Make sure that all browsers serialize html in a similar way
+ * (Firefox tends to output empty style attrs)
  * @param {HTMLElement} node
  */
 function normalizeOverlayContentWapper(node) {
@@ -80,6 +96,55 @@ describe('OverlayController', () => {
       expect(ctrl.contentNode.parentElement).to.equal(ctrl.contentWrapperNode);
     });
 
+    describe('Stylesheets', () => {
+      it('adds a stylesheet to the body when contentWrapper is located there', async () => {
+        new OverlayController({
+          ...withLocalTestConfig(),
+        });
+        // @ts-ignore
+        if (document.body.adoptedStyleSheets) {
+          // @ts-ignore
+          expect(document.body.adoptedStyleSheets).to.include(overlayShadowDomStyle.styleSheet);
+        }
+      });
+
+      it('adds a stylesheet to the shadowRoot when contentWrappeNode is located there', async () => {
+        const contentNode = /** @type {HTMLElement} */ (await fixture('<div>contentful</div>'));
+        const shadowHost = document.createElement('div');
+        shadowHost.attachShadow({ mode: 'open' });
+        /** @type {ShadowRoot} */ (shadowHost.shadowRoot).innerHTML = `<slot></slot>`;
+        shadowHost.appendChild(contentNode);
+        document.body.appendChild(shadowHost);
+        const ctrl = new OverlayController({
+          ...withLocalTestConfig(),
+          contentNode,
+        });
+
+        const rootNodeOrBody = getRootNodeOrBodyElThatAdoptsStylesheet(ctrl.contentWrapperNode);
+        expect(rootNodeOrBody).to.not.equal(document.body);
+
+        if (rootNodeOrBody.adoptedStyleSheets) {
+          expect(rootNodeOrBody.adoptedStyleSheets).to.include(overlayShadowDomStyle.styleSheet);
+        }
+        document.body.removeChild(shadowHost);
+      });
+
+      it('does not add same stylesheet twice', async () => {
+        // @ts-ignore
+        if (!document.body.adoptedStyleSheets) {
+          return;
+        }
+
+        new OverlayController({ ...withLocalTestConfig() });
+        // @ts-ignore
+        const amountOfStylesheetsAfterOneInit = document.body.adoptedStyleSheets.length;
+
+        new OverlayController({ ...withLocalTestConfig() });
+        // @ts-ignore
+        expect(document.body.adoptedStyleSheets.length).to.equal(amountOfStylesheetsAfterOneInit);
+      });
+    });
+
     describe('Z-index on local overlays', () => {
       /** @type {HTMLElement} */
       let contentNode;
@@ -895,11 +960,11 @@ describe('OverlayController', () => {
           await fixture('<div><textarea></textarea></div>')
         );
 
-        const shadowEl = document.createElement('div');
-        shadowEl.attachShadow({ mode: 'open' });
-        /** @type {ShadowRoot} */ (shadowEl.shadowRoot).innerHTML = `<slot></slot>`;
-        shadowEl.appendChild(contentNode);
-        document.body.appendChild(shadowEl);
+        const shadowHost = document.createElement('div');
+        shadowHost.attachShadow({ mode: 'open' });
+        /** @type {ShadowRoot} */ (shadowHost.shadowRoot).innerHTML = `<slot></slot>`;
+        shadowHost.appendChild(contentNode);
+        document.body.appendChild(shadowHost);
 
         const ctrl = new OverlayController({
           ...withGlobalTestConfig(),
@@ -915,7 +980,7 @@ describe('OverlayController', () => {
         await ctrl.hide();
         expect(document.activeElement).to.equal(input);
 
-        document.body.removeChild(shadowEl);
+        document.body.removeChild(shadowHost);
       });
 
       it(`only sets focus when outside world didn't take over already`, async () => {
@@ -1450,6 +1515,22 @@ describe('OverlayController', () => {
       expect(ctrl.contentWrapperNode.classList.contains('overlays__overlay-container--top-right'));
       expect(ctrl.isShown).to.be.true;
     });
+
+    it('disables backdrop when switching to hasBackrop "false"', async () => {
+      const ctrl = new OverlayController({
+        ...withLocalTestConfig(),
+        contentNode: /** @type {HTMLElement} */ (await fixture(html`<div>content1</div>`)),
+        hasBackdrop: true,
+      });
+      await ctrl.show(); // Popper adds inline styles
+      expect(ctrl.backdropNode).not.to.be.undefined;
+      expect(Array.from(ctrl.backdropNode.classList)).to.include('overlays__backdrop--visible');
+
+      ctrl.updateConfig({
+        hasBackdrop: false,
+      });
+      expect(Array.from(ctrl.backdropNode.classList)).to.not.include('overlays__backdrop--visible');
+    });
   });
 
   describe('Accessibility', () => {

package/components/overlays/types/OverlayConfig.ts

@@ -72,6 +72,12 @@ export interface OverlayConfig {
 
   /** render a div instead of dialog */
   _noDialogEl?: Boolean;
+
+  /**
+   * Determines the conditions hiding/showing should be based on. It gets the OverlayController as input and returns an object with
+   * functions with Overlay phases as keys
+   */
+  visibilityTriggerFunction?: Function;
 }
 
 export type ViewportPlacement =

package/components/select-rich/src/LionSelectRich.js

@@ -336,6 +336,8 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
   _defineOverlayConfig() {
     return {
       ...withDropdownConfig(),
+      // Needs more advanced behavior (see `__invokerOnClick`)
+      visibilityTriggerFunction: undefined,
     };
   }