feat(dropdowns): added fixed strategy option

Author: agliga

.changeset/warm-glasses-sink.md

@@ -0,0 +1,5 @@
+---
+"@ebay/ebayui-core": minor
+---
+
+feat(dropdowns): added fixed strategy option

package-lock.json

@@ -100,7 +100,7 @@
         "@commitlint/cli": "^19",
         "@commitlint/config-conventional": "^19",
         "@ebay/browserslist-config": "^2.10.0",
-        "@ebay/skin": "~19.1.0",
+        "@ebay/skin": "~19.1.1",
         "@marko/compiler": "^5.39.12",
         "@marko/prettyprint": "^3.0.1",
         "@marko/testing-library": "^6",
@@ -145,7 +145,7 @@
         "vitest": "^3.0.7"
     },
     "peerDependencies": {
-        "@ebay/skin": "~19.0.0",
+        "@ebay/skin": "~19.1.1",
         "marko": "^4.27.0 || ^5.31.12"
     },
     "publishConfig": {

package.json

@@ -9,6 +9,7 @@ import {
 
 interface DropdownUtilOptions {
     reverse?: boolean;
+    strategy?: "absolute" | "fixed";
     offset?: number;
 }
 
@@ -39,7 +40,9 @@ export class DropdownUtil {
     update() {
         computePosition(this.host, this.overlay, {
             placement: this.options.reverse ? "bottom-end" : "bottom-start",
-            middleware: [offset(this.options.offset ?? 4), flip(), shift()],
+            strategy: this.options.strategy ?? "fixed",
+            middleware: [offset(this.options.offset ?? 4), flip({
+            }), shift()],
         }).then(({ x, y }) => {
             Object.assign(this.overlay.style, {
                 left: `${x}px`,

src/common/dropdown/index.ts

@@ -90,7 +90,16 @@ export default {
             description:
                 "If true, the option will always be shown even if it does not match the filter",
         },
-
+        strategy: {
+            control: { type: "select" },
+            options: ["absolute", "fixed"],
+            table: {
+                defaultValue: {
+                    summary: "absolute",
+                },
+            },
+            description: "Swap between fixed and absolute positioning strategy. Use fixed when dropdown is in contained in an overflow and needs to be visible as you scroll the screen.",
+        },
         onCollapse: {
             action: "on-collapse",
             table: {

src/components/ebay-combobox/combobox.stories.ts

@@ -28,6 +28,7 @@ interface ComboboxInput extends Omit<Marko.HTML.Input, `on${string}`> {
     autocomplete?: "list" | "none";
     "list-selection"?: "manual" | "automatic";
     "floating-label"?: AttrString;
+    strategy?: "fixed" | "absolute";
     button?: Marko.Input<"button"> &
         Marko.AttrTag<{
             htmlAttributes?: Record<string, unknown>;
@@ -319,6 +320,9 @@ export default class Combobox extends Marko.Component<Input, State> {
         this.dropdownUtil = new DropdownUtil(
             this.input.dropdownElement?.() ?? this.getEl("combobox"),
             this.getEl("listbox"),
+            {
+                strategy: this.input.strategy,
+            }
         );
         if (this.isExpanded()) {
             this.dropdownUtil.show();

src/components/ebay-combobox/component.ts

@@ -8,6 +8,7 @@ $ const {
     style,
     borderless,
     autocomplete,
+    strategy,
     option: options = [],
     dropdownElement,
     floatingLabel,
@@ -92,7 +93,7 @@ $ var id = inputId || component.getElId("input");
         </if>
     </span>
     <if(component._hasVisibleOptions())>
-        <div key="listbox" role="listbox" class="combobox__listbox">
+        <div key="listbox" role="listbox" class=["combobox__listbox", strategy === "fixed" && "combobox__listbox--fixed"]>
             <for|option| of=component._getVisibleOptions()>
                 $ const { text, value, class: optionClass, ...htmlOption } = option;
                 $ var isSelected = (

src/components/ebay-combobox/index.marko

@@ -458,6 +458,88 @@ exports[`combobox > renders with default actionable button 1`] = `
 </DocumentFragment>"
 `;
 
+exports[`combobox > renders with fixed strategy 1`] = `
+"<DocumentFragment>
+  <span
+    class="combobox"
+  >
+    <span
+      class="combobox__control"
+    >
+      <input
+        aria-autocomplete="list"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        autocomplete="off"
+        id="s0-input"
+        name="example1text"
+        role="combobox"
+        type="text"
+      />
+    </span>
+    <div
+      class="combobox__listbox combobox__listbox--fixed"
+      role="listbox"
+    >
+      <div
+        class="combobox__option"
+        role="option"
+        tabindex="-1"
+      >
+        <span>
+          August Campaign
+        </span>
+      </div>
+      <div
+        class="combobox__option"
+        role="option"
+        tabindex="-1"
+      >
+        <span>
+          4th of July Sale (paused)
+        </span>
+      </div>
+      <div
+        class="combobox__option"
+        role="option"
+        tabindex="-1"
+      >
+        <span>
+          Basic Offer
+        </span>
+      </div>
+      <div
+        class="combobox__option"
+        role="option"
+        tabindex="-1"
+      >
+        <span>
+          Basic Offer 2
+        </span>
+      </div>
+      <div
+        class="combobox__option"
+        role="option"
+        tabindex="-1"
+      >
+        <span>
+          Basic Offer 3
+        </span>
+      </div>
+      <div
+        class="combobox__option"
+        role="option"
+        tabindex="-1"
+      >
+        <span>
+          Basic Offer 4
+        </span>
+      </div>
+    </div>
+  </span>
+</DocumentFragment>"
+`;
+
 exports[`combobox > renders with floating label 1`] = `
 "<DocumentFragment>
   <span

src/components/ebay-combobox/test/__snapshots__/test.server.js.snap

@@ -18,6 +18,10 @@ describe("combobox", () => {
         await htmlSnap(Isolated, { option: [] });
     });
 
+    it("renders with fixed strategy", async () => {
+        await htmlSnap(Isolated, { strategy: "fixed" });
+    });
+
     it("renders with second item selected", async () => {
         await htmlSnap(Isolated, { value: Isolated.args.option[2].text });
     });

src/components/ebay-combobox/test/test.server.js

@@ -25,6 +25,7 @@ interface FakeMenuButtonInput extends Omit<Marko.HTML.Span, `on${string}`> {
     "text-align"?: "center";
     type?: FakeMenuInput["type"];
     reverse?: boolean;
+    strategy?: "absolute" | "fixed";
     "fix-width"?: boolean;
     item?: Marko.AttrTag<FakeMenuItem>;
     "collapse-on-select"?: boolean;
@@ -138,6 +139,7 @@ class FakeMenuButton extends Marko.Component<Input> {
             this.getEl("content"),
             {
                 reverse: this.input.reverse,
+                strategy: this.input.strategy,
             },
         );
     }