@broberg/app-shell 0.20.0 → 0.21.0

package/README.md

@@ -176,6 +176,9 @@ const [open, setOpen] = useState(false);
 testids: `<prefix>-menu`, `<prefix>-action-<id>`, `<prefix>-back`, `<prefix>-input`, `<prefix>-save` — so the
 anchor's own testid must not be `<prefix>-menu`.
 
+**0.21.0** — `placement: "up-start"` (F092.31): above the anchor, left edge = the anchor's left edge (clamped
+8px inside the viewport); below if there is no room above. For a «+» in a composer. `auto`/`down` unchanged.
+
 ## 0.11.1 — the palette list floats over the menu (F001.25)
 
 Christian 10/10: «Kunne denne ikke være en pop-over ting så dialogen ikke bliver

package/css/app-shell.css

@@ -70,8 +70,11 @@
 .bas-sidebar {
   /* sticky makes its own stacking context, so the rail's flyout can only rise
    * as high as the sidebar does; without this <main> paints over it and takes
-   * its clicks (appkit, Lens 839394b1). Below the top bar (50). */
-  z-index: 20;
+   * its clicks (appkit, Lens 839394b1). Below the top bar (50).
+   * F092.30 — and ABOVE the inset content header (30): every popover that opens
+   * from the sidebar (user menu, row menu, flyout) lives in this context, so at
+   * 20 the header's line and blur ran over the user menu (scout #2779). */
+  z-index: 40;
   flex: 0 0 240px; width: 240px;
   position: sticky; top: var(--bas-top); align-self: flex-start;
   height: calc(100dvh - var(--bas-top));

package/dist/preact.cjs

@@ -579,9 +579,12 @@ function ItemActionsMenu(props) {
     const vw = window.innerWidth, vh = window.innerHeight, m = 8;
     const w = Math.min(240, vw - 2 * m);
     const h = menu.current?.offsetHeight ?? 0;
-    const left = Math.max(m, Math.min(r.right - w, vw - w - m));
+    const start = props.placement === "up-start";
+    const left = Math.max(m, Math.min(start ? r.left : r.right - w, vw - w - m));
     const fitsBelow = r.bottom + 4 + h <= vh - m;
-    const top = props.placement === "down" || fitsBelow || r.top - 4 - h < m ? Math.min(r.bottom + 4, vh - m - h) : r.top - 4 - h;
+    const fitsAbove = r.top - 4 - h >= m;
+    const below = start ? !fitsAbove : props.placement === "down" || fitsBelow || !fitsAbove;
+    const top = below ? Math.min(r.bottom + 4, vh - m - h) : r.top - 4 - h;
     setPos({ position: "fixed", left: `${left}px`, top: `${Math.max(m, top)}px`, width: `${w}px` });
   }, [stack.length]);
   hooks.useLayoutEffect(() => {