Add popover settings to ProductSelect (#372)

web/app/components/inputs/product-select.hbs

@@ -33,6 +33,8 @@
         @placement={{@placement}}
         @isSaving={{@isSaving}}
         @renderOut={{@renderOut}}
+        @offset={{@offset}}
+        @matchAnchorWidth={{@matchAnchorWidth}}
         @secondaryFilterAttribute="abbreviation"
         class="product-select-dropdown-list w-[300px]"
         ...attributes

web/app/components/inputs/product-select.ts

@@ -1,7 +1,7 @@
 import { assert } from "@ember/debug";
 import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
-import { Placement } from "@floating-ui/dom";
+import { OffsetOptions, Placement } from "@floating-ui/dom";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { task } from "ember-concurrency";
@@ -10,6 +10,7 @@ import ProductAreasService, {
   ProductArea,
 } from "hermes/services/product-areas";
 import getProductId from "hermes/utils/get-product-id";
+import { MatchAnchorWidthOptions } from "../floating-u-i/content";
 
 interface InputsProductSelectSignature {
   Element: HTMLDivElement;
@@ -20,6 +21,8 @@ interface InputsProductSelectSignature {
     placement?: Placement;
     isSaving?: boolean;
     renderOut?: boolean;
+    offset?: OffsetOptions;
+    matchAnchorWidth?: MatchAnchorWidthOptions;
   };
 }
 

web/tests/integration/components/inputs/product-select-test.ts

@@ -1,13 +1,16 @@
 import { module, test } from "qunit";
 import { setupRenderingTest } from "ember-qunit";
 import { hbs } from "ember-cli-htmlbars";
-import { click, render } from "@ember/test-helpers";
+import { click, find, render } from "@ember/test-helpers";
 import { setupMirage } from "ember-cli-mirage/test-support";
 import { MirageTestContext } from "ember-cli-mirage/test-support";
 import { Placement } from "@floating-ui/dom";
 import { Response } from "miragejs";
+import { assert as emberAssert } from "@ember/debug";
+import htmlElement from "hermes/utils/html-element";
 
 const TOGGLE = "[data-test-x-dropdown-list-toggle-select]";
+const POPOVER = "[data-test-x-dropdown-list-content]";
 const DROPDOWN_PRODUCT =
   "[data-test-x-dropdown-list-content] [data-test-product-select-item]";
 
@@ -131,4 +134,55 @@ module("Integration | Component | inputs/product-select", function (hooks) {
       .dom("[data-test-product-select-failed-to-load-button]")
       .hasText("Retry");
   });
+
+  test("the standard select can match the anchor width", async function (this: InputsProductSelectContext, assert) {
+    await render<InputsProductSelectContext>(hbs`
+      <div style="width:800px;">
+        <Inputs::ProductSelect
+          @selected={{this.selected}}
+          @onChange={{this.onChange}}
+          @matchAnchorWidth={{true}}
+          style="width:100px; max-width: 100px;"
+        />
+      </div>
+    `);
+
+    /**
+     * We include `width` and `max-width` on the component
+     * to demonstrate that the popover is sized by `matchAnchorWidth`
+     */
+
+    await click(TOGGLE);
+
+    const buttonWidth = htmlElement(TOGGLE)?.offsetWidth;
+    const popoverWidth = htmlElement(POPOVER)?.offsetWidth;
+
+    assert.equal(buttonWidth, 800);
+    assert.equal(popoverWidth, 800);
+  });
+
+  test("the standard select can be positioned at an offset", async function (this: InputsProductSelectContext, assert) {
+    await render<InputsProductSelectContext>(hbs`
+      <Inputs::ProductSelect
+        @selected={{this.selected}}
+        @onChange={{this.onChange}}
+        @offset={{hash mainAxis=100 crossAxis=100}}
+      />
+    `);
+
+    const toggle = htmlElement(TOGGLE);
+
+    const toggleLeft = toggle.offsetLeft;
+    const toggleBottom = toggle.offsetTop + toggle.offsetHeight;
+
+    await click(TOGGLE);
+
+    const popover = htmlElement(POPOVER);
+
+    const popoverLeft = popover.offsetLeft;
+    const popoverTop = popover.offsetTop;
+
+    assert.equal(toggleLeft + 100, popoverLeft);
+    assert.equal(toggleBottom + 100, popoverTop);
+  });
 });