@mlola-ui/behavior 1.1.10 → 1.1.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mlola-ui/behavior",
-  "version": "1.1.10",
+  "version": "1.1.11",
   "description": "Framework-free behavior for Mlola UI markup: standard DOM, no runtime peers",
   "type": "module",
   "main": "./src/index.js",

package/src/index.js

@@ -21,6 +21,7 @@ import {
   clampToStep,
   focusTrapIndex,
   percentOf,
+  fitMenu,
   fitTooltip,
   isSidewaysDrag,
   placeFloating,
@@ -156,11 +157,24 @@ const behaviors = {
         (item) => !item.disabled && item.getAttribute("aria-disabled") !== "true",
       );
 
+    // CSS hangs the menu under the trigger; this keeps it on screen.
+    const fit = () => {
+      const rect = root.getBoundingClientRect();
+      const { side, shift } = fitMenu(
+        { x: rect.left, y: rect.top, width: rect.width, height: rect.height },
+        { width: menu.offsetWidth, height: menu.offsetHeight },
+        { width: window.innerWidth, height: window.innerHeight },
+        menu.dataset.align === "end" ? "end" : "start",
+      );
+      menu.style.setProperty("--ml-dropdown-shift", `${shift}px`);
+      menu.dataset.side = side;
+    };
     const setOpen = (open) => {
       root.dataset.state = open ? "open" : "closed";
       menu.dataset.state = open ? "open" : "closed";
       menu.hidden = !open;
       trigger.setAttribute("aria-expanded", String(open));
+      if (open) fit();
       if (!open) for (const item of items()) delete item.dataset.highlighted;
     };
     const isOpen = () => root.dataset.state === "open";
@@ -207,6 +221,9 @@ const behaviors = {
       on(document, "pointerdown", (event) => {
         if (isOpen() && !root.contains(event.target)) setOpen(false);
       }),
+      on(window, "resize", () => {
+        if (isOpen()) fit();
+      }),
     ];
   },
 

package/src/interaction.js

@@ -177,6 +177,18 @@ export function placeFloating(anchor, floating, viewport, { side = "bottom", ali
   return { x: Math.round(x), y: Math.round(y), side: chosen };
 }
 
+/**
+ * Where a menu anchored under its trigger by CSS should sit to stay on
+ * screen: the side it opens on (above when there is no room below), and how
+ * far to slide it sideways from where CSS put it (its start edge on the
+ * anchor's start, or its end edge on the anchor's end).
+ */
+export function fitMenu(anchor, menu, viewport, align = "start", { offset = 6, padding = 8 } = {}) {
+  const placed = placeFloating(anchor, menu, viewport, { side: "bottom", align, offset, padding });
+  const cssX = align === "end" ? anchor.x + anchor.width - menu.width : anchor.x;
+  return { side: placed.side, shift: Math.round(placed.x - cssX) };
+}
+
 /**
  * Where a tooltip anchored beside its trigger by CSS should sit to stay on
  * screen: the side it opens on (flipped when the other has more room, or

package/src/logic.d.ts

@@ -136,6 +136,15 @@ export function placeFloating(
   options?: { side?: Side; align?: Align; offset?: number; padding?: number },
 ): Placement;
 
+/** A CSS-anchored menu's side (bottom, or top without room) and its sideways slide to stay on screen. */
+export function fitMenu(
+  anchor: Rect,
+  menu: { width: number; height: number },
+  viewport: { width: number; height: number },
+  align?: "start" | "end",
+  options?: { offset?: number; padding?: number },
+): { side: Side; shift: number };
+
 /** A CSS-anchored tooltip's side and its slide along that edge to stay on screen. */
 export function fitTooltip(
   anchor: Rect,