feat(combobox): add useFloatingMenu hook for menu positioning

Author: yordan-st

packages/pluggableWidgets/combobox-web/src/hooks/__mocks__/useFloatingMenu.ts

@@ -0,0 +1,18 @@
+import { useRef } from "react";
+
+// Jest mock for useFloatingMenu: returns stable refs and a marker style so specs can
+// assert wiring without depending on a real layout engine (jsdom has none).
+export function useFloatingMenu(_open: boolean): any {
+    const reference = useRef<HTMLDivElement>(null);
+    const floating = useRef<HTMLDivElement>(null);
+    return {
+        refs: {
+            setReference: reference,
+            setFloating: floating
+        },
+        floatingStyles: {
+            "--this-is-mocked-from-unit-tests": "true"
+        },
+        isPositioned: true
+    };
+}

packages/pluggableWidgets/combobox-web/src/hooks/useFloatingMenu.ts

@@ -0,0 +1,47 @@
+import { autoUpdate, flip, offset, size, useFloating } from "@floating-ui/react";
+import { useMemo } from "react";
+
+// Menu can grow to at most this height; floating-ui shrinks it further when the
+// available viewport space is smaller. Mirrors the previous SCSS cap.
+const MAX_MENU_HEIGHT = 320;
+// Gap between the input and the menu, and breathing room from the viewport edge.
+const MENU_OFFSET = 4;
+const VIEWPORT_PADDING = 8;
+
+export function useFloatingMenu(open: boolean): ReturnType<typeof useFloating> {
+    const middleware = useMemo(
+        () => [
+            offset(MENU_OFFSET),
+            flip({
+                crossAxis: false,
+                fallbackStrategy: "bestFit",
+                padding: VIEWPORT_PADDING
+            }),
+            size({
+                padding: VIEWPORT_PADDING,
+                apply({ rects, elements, availableHeight }) {
+                    Object.assign(elements.floating.style, {
+                        width: `${rects.reference.width}px`,
+                        maxHeight: `${Math.min(availableHeight, MAX_MENU_HEIGHT)}px`
+                    });
+                }
+            })
+        ],
+        []
+    );
+
+    const result = useFloating({
+        open,
+        placement: "bottom-start",
+        strategy: "fixed",
+        middleware,
+        whileElementsMounted: autoUpdate
+    });
+
+    const floatingStyles =
+        open && result.isPositioned
+            ? result.floatingStyles
+            : { ...result.floatingStyles, visibility: "hidden" as const };
+
+    return { ...result, floatingStyles };
+}