feat(overlays): expose "repositionOverlay()" on OverlayMixin

.changeset/calm-paws-taste.md

@@ -0,0 +1,5 @@
+---
+'@lion/overlays': minor
+---
+
+expose "repositionOverlay()" on OverlayMixin

packages/overlays/src/OverlayController.js

@@ -471,8 +471,6 @@ export class OverlayController extends EventTargetShim {
 
     /** @private */
     this.__validateConfiguration(/** @type {OverlayConfig} */ (this.config));
-    // TODO: remove this, so we only have the getters (no setters)
-    // Object.assign(this, this.config);
     /** @protected */
     this._init({ cfgToAdd });
     /** @private */

packages/overlays/src/OverlayMixin.js

@@ -79,7 +79,6 @@ export const OverlayMixinImplementation = superclass =>
     // eslint-disable-next-line
     _defineOverlay({ contentNode, invokerNode, referenceNode, backdropNode, contentWrapperNode }) {
       const overlayConfig = this._defineOverlayConfig() || {};
-
       return new OverlayController({
         contentNode,
         invokerNode,
@@ -353,5 +352,17 @@ export const OverlayMixinImplementation = superclass =>
     async close() {
       await /** @type {OverlayController} */ (this._overlayCtrl).hide();
     }
+
+    /**
+     * Sometimes it's needed to recompute Popper position of an overlay, for instance when we have
+     * an opened combobox and the surrounding context changes (the space consumed by the textbox
+     * increases vertically)
+     */
+    repositionOverlay() {
+      const ctrl = /** @type {OverlayController} */ (this._overlayCtrl);
+      if (ctrl.placementMode === 'local' && ctrl._popper) {
+        ctrl._popper.update();
+      }
+    }
   };
 export const OverlayMixin = dedupeMixin(OverlayMixinImplementation);

packages/overlays/test-suites/OverlayMixin.suite.js

@@ -1,7 +1,6 @@
 import { expect, fixture, html, nextFrame, aTimeout } from '@open-wc/testing';
 import sinon from 'sinon';
 import { overlays } from '../src/overlays.js';
-// eslint-disable-next-line no-unused-vars
 import { OverlayController } from '../src/OverlayController.js';
 
 /**
@@ -171,7 +170,7 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
       expect(el.opened).to.be.true;
     });
 
-    it('allows to call `preventDefault()` on "before-opened"/"before-closed" events', async () => {
+    it('allows to call "preventDefault()" on "before-opened"/"before-closed" events', async () => {
       function preventer(/** @type Event */ ev) {
         ev.preventDefault();
       }
@@ -215,7 +214,7 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
     });
 
     // See https://github.com/ing-bank/lion/discussions/1095
-    it('exposes open(), close() and toggle() methods', async () => {
+    it('exposes "open()", "close()" and "toggle()" methods', async () => {
       const el = /** @type {OverlayEl} */ (await fixture(html`
         <${tag}>
           <div slot="content">content</div>
@@ -240,6 +239,25 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
       expect(el.opened).to.be.false;
     });
 
+    it('exposes "repositionOverlay()" method', async () => {
+      const el = /** @type {OverlayEl} */ (await fixture(html`
+        <${tag} opened .config="${{ placementMode: 'local' }}">
+          <div slot="content">content</div>
+          <button slot="invoker">invoker button</button>
+        </${tag}>
+      `));
+      await OverlayController.popperModule;
+      sinon.spy(el._overlayCtrl._popper, 'update');
+      el.repositionOverlay();
+      expect(el._overlayCtrl._popper.update).to.have.been.been.calledOnce;
+
+      if (!el._overlayCtrl.isTooltip) {
+        el.config = { ...el.config, placementMode: 'global' };
+        el.repositionOverlay();
+        expect(el._overlayCtrl._popper.update).to.have.been.been.calledOnce;
+      }
+    });
+
     /** See: https://github.com/ing-bank/lion/issues/1075 */
     it('stays open after config update', async () => {
       const el = /** @type {OverlayEl} */ (await fixture(html`
@@ -250,6 +268,7 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
       `));
       el.open();
       await el._overlayCtrl._showComplete;
+
       el.config = { ...el.config, hidesOnOutsideClick: !el.config.hidesOnOutsideClick };
       await nextFrame();
       expect(el.opened).to.be.true;

packages/overlays/types/OverlayMixinTypes.d.ts

@@ -17,14 +17,19 @@ export interface DefineOverlayConfig {
 }
 
 export declare class OverlayHost {
-  public opened: Boolean;
+  opened: Boolean;
+  get config(): OverlayConfig;
+  set config(value: OverlayConfig);
 
-  public get config(): OverlayConfig;
+  open(): void;
-  public set config(value: OverlayConfig);
+  close(): void;
-
+  toggle(): void;
-  public open(): void;
+  /**
-  public close(): void;
+   * Sometimes it's needed to recompute Popper position of an overlay, for instance when we have
-  public toggle(): void;
+   * an opened combobox and the surrounding context changes (the space consumed by the textbox
+   * increases vertically)
+   */
+  repositionOverlay(): void;
 
   protected _overlayCtrl: OverlayController;