fix(overlays): add inheritsReferenceObjectWidth parameter

Author: gerjanvangeest

packages/overlays/src/LocalOverlayController.js

@@ -11,6 +11,7 @@ export class LocalOverlayController {
     this.constructor.popperModule = __preloadPopper();
     this.__mergePopperConfigs(params.popperConfig || {});
 
+    this.inheritsReferenceObjectWidth = params.inheritsReferenceObjectWidth;
     this.hidesOnEsc = params.hidesOnEsc;
     this.hidesOnOutsideClick = params.hidesOnOutsideClick;
     this.trapsKeyboardFocus = params.trapsKeyboardFocus;
@@ -148,6 +149,19 @@ export class LocalOverlayController {
       this.contentNode.style.zIndex = 1;
       this.invokerNode.setAttribute('aria-expanded', true);
 
+      if (this.inheritsReferenceObjectWidth) {
+        const referenceObjectWidth = `${this.invokerNode.clientWidth}px`;
+        switch (this.inheritsReferenceObjectWidth) {
+          case 'max':
+            this.contentNode.style.maxWidth = referenceObjectWidth;
+            break;
+          case 'full':
+            this.contentNode.style.width = referenceObjectWidth;
+            break;
+          default:
+            this.contentNode.style.minWidth = referenceObjectWidth;
+        }
+      }
       if (this.trapsKeyboardFocus) this._setupTrapsKeyboardFocus();
       if (this.hidesOnOutsideClick) this._setupHidesOnOutsideClick();
       if (this.hidesOnEsc) this._setupHidesOnEsc();

packages/overlays/test/LocalOverlayController.test.js

@@ -499,6 +499,27 @@ describe('LocalOverlayController', () => {
         'Popper positioning Y value should be 32 less than previous, due to the added 32px offset',
       );
     });
+
+    it('can set the contentNode minWidth as the invokerNode width', () => {
+      const controller = new LocalOverlayController({
+        inheritsReferenceObjectWidth: 'min',
+      });
+      expect(controller.contentNode.style.minWidth).to.equal(controller.invokerNode.style.width);
+    });
+
+    it('can set the contentNode maxWidth as the invokerNode width', () => {
+      const controller = new LocalOverlayController({
+        inheritsReferenceObjectWidth: 'max',
+      });
+      expect(controller.contentNode.style.maxWidth).to.equal(controller.invokerNode.style.width);
+    });
+
+    it('can set the contentNode width as the invokerNode width', () => {
+      const controller = new LocalOverlayController({
+        inheritsReferenceObjectWidth: 'full',
+      });
+      expect(controller.contentNode.style.width).to.equal(controller.invokerNode.style.width);
+    });
   });
 
   describe('a11y', () => {