@streamoid/ui 0.6.32 → 0.6.33

package/dist/docs/ScWorkspaceAccountMenu.md

@@ -196,6 +196,23 @@ Two things will bite you:
 `arrow` is `null` until the panel has been measured; `ScPopoverArrow` renders
 nothing for it, so there is no flash of a caret in the wrong place.
 
+### Two popovers on one rail
+
+Pass `alignRef` — the rail — to both, and they open on the same vertical line
+while each caret still points at its own trigger:
+
+```tsx
+const { style, arrow } = useStreamoidAnchoredPopover(triggerRef, panelRef, {
+  width: 320,
+  alignRef: railRef,
+});
+```
+
+Without it each panel hangs off its own button, and those sit at different
+insets (each inside a control with its own padding) — so the pair opens about
+twenty pixels apart, one flush to the rail and the other overlapping it, which
+reads as sloppy rather than as one pattern.
+
 Use the same hook for **every** popover a rail owns. Mixing it with
 `useStreamoidSidebarPopoverPosition` (which pins to the sidebar CARD's edge)
 puts two menus from the same rail in visibly different places — one tethered to

package/dist/index.d.mts

@@ -835,6 +835,17 @@ interface StreamoidAnchorRect {
 }
 interface StreamoidAnchoredPopoverGeometry {
     anchor: StreamoidAnchorRect;
+    /** Sets the horizontal placement when the trigger should not.
+     *
+     *  A rail with two popovers — a workspace menu at the top, an app switcher at
+     *  the foot — has two triggers at different insets, because each sits inside
+     *  a button with its own padding. Anchored to those, the two panels open a
+     *  dozen pixels apart and the pair reads as sloppy rather than as one
+     *  pattern. Align both to the RAIL and they open on the same line, while the
+     *  caret still points at whichever trigger was used.
+     *
+     *  Defaults to `anchor`, which is the single-popover case. */
+    align?: StreamoidAnchorRect;
     viewportWidth: number;
     viewportHeight: number;
     /** Panel width in pixels. */
@@ -849,6 +860,10 @@ interface StreamoidAnchoredPopoverGeometry {
 interface StreamoidAnchoredPopoverPositionOptions {
     /** Panel width in pixels. */
     width: number;
+    /** Element whose edges set the horizontal placement, when the trigger should
+     *  not. See `align` on the geometry — pass the rail to line two of its
+     *  popovers up with each other. */
+    alignRef?: RefObject<HTMLElement | null>;
     /** Gap between the trigger and the panel. Defaults to 8px. */
     gap?: number;
     /** Keep-out margin from the viewport edges. Defaults to 16px. */
@@ -900,7 +915,7 @@ declare function resolveAnchoredPopoverArrow({ anchor, panelLeft, panelTop, pane
  * below. Nothing else re-places it, so the panel is always visibly attached to
  * the button that opened it rather than parked against a container edge.
  */
-declare function resolveAnchoredPopoverPosition({ anchor, viewportWidth, viewportHeight, width, height, gap, inset, }: StreamoidAnchoredPopoverGeometry): {
+declare function resolveAnchoredPopoverPosition({ anchor, align, viewportWidth, viewportHeight, width, height, gap, inset, }: StreamoidAnchoredPopoverGeometry): {
     left: number;
     top: number;
     width: number;
@@ -920,7 +935,7 @@ declare function resolveAnchoredPopoverPosition({ anchor, viewportWidth, viewpor
  */
 /** The position and the caret, measured together — a caret measured on a later
  *  render can point somewhere the panel no longer is. */
-declare function useStreamoidAnchoredPopover(anchorRef: RefObject<HTMLElement | null>, panelRef: RefObject<HTMLElement | null>, { width, gap, inset }: StreamoidAnchoredPopoverPositionOptions): StreamoidAnchoredPopover;
+declare function useStreamoidAnchoredPopover(anchorRef: RefObject<HTMLElement | null>, panelRef: RefObject<HTMLElement | null>, { width, gap, inset, alignRef, }: StreamoidAnchoredPopoverPositionOptions): StreamoidAnchoredPopover;
 declare function useStreamoidAnchoredPopoverPosition(anchorRef: RefObject<HTMLElement | null>, panelRef: RefObject<HTMLElement | null>, { width, gap, inset }: StreamoidAnchoredPopoverPositionOptions): StreamoidAnchoredPopoverPosition;
 
 interface IScPopoverArrowProps {

package/dist/index.d.ts

@@ -835,6 +835,17 @@ interface StreamoidAnchorRect {
 }
 interface StreamoidAnchoredPopoverGeometry {
     anchor: StreamoidAnchorRect;
+    /** Sets the horizontal placement when the trigger should not.
+     *
+     *  A rail with two popovers — a workspace menu at the top, an app switcher at
+     *  the foot — has two triggers at different insets, because each sits inside
+     *  a button with its own padding. Anchored to those, the two panels open a
+     *  dozen pixels apart and the pair reads as sloppy rather than as one
+     *  pattern. Align both to the RAIL and they open on the same line, while the
+     *  caret still points at whichever trigger was used.
+     *
+     *  Defaults to `anchor`, which is the single-popover case. */
+    align?: StreamoidAnchorRect;
     viewportWidth: number;
     viewportHeight: number;
     /** Panel width in pixels. */
@@ -849,6 +860,10 @@ interface StreamoidAnchoredPopoverGeometry {
 interface StreamoidAnchoredPopoverPositionOptions {
     /** Panel width in pixels. */
     width: number;
+    /** Element whose edges set the horizontal placement, when the trigger should
+     *  not. See `align` on the geometry — pass the rail to line two of its
+     *  popovers up with each other. */
+    alignRef?: RefObject<HTMLElement | null>;
     /** Gap between the trigger and the panel. Defaults to 8px. */
     gap?: number;
     /** Keep-out margin from the viewport edges. Defaults to 16px. */
@@ -900,7 +915,7 @@ declare function resolveAnchoredPopoverArrow({ anchor, panelLeft, panelTop, pane
  * below. Nothing else re-places it, so the panel is always visibly attached to
  * the button that opened it rather than parked against a container edge.
  */
-declare function resolveAnchoredPopoverPosition({ anchor, viewportWidth, viewportHeight, width, height, gap, inset, }: StreamoidAnchoredPopoverGeometry): {
+declare function resolveAnchoredPopoverPosition({ anchor, align, viewportWidth, viewportHeight, width, height, gap, inset, }: StreamoidAnchoredPopoverGeometry): {
     left: number;
     top: number;
     width: number;
@@ -920,7 +935,7 @@ declare function resolveAnchoredPopoverPosition({ anchor, viewportWidth, viewpor
  */
 /** The position and the caret, measured together — a caret measured on a later
  *  render can point somewhere the panel no longer is. */
-declare function useStreamoidAnchoredPopover(anchorRef: RefObject<HTMLElement | null>, panelRef: RefObject<HTMLElement | null>, { width, gap, inset }: StreamoidAnchoredPopoverPositionOptions): StreamoidAnchoredPopover;
+declare function useStreamoidAnchoredPopover(anchorRef: RefObject<HTMLElement | null>, panelRef: RefObject<HTMLElement | null>, { width, gap, inset, alignRef, }: StreamoidAnchoredPopoverPositionOptions): StreamoidAnchoredPopover;
 declare function useStreamoidAnchoredPopoverPosition(anchorRef: RefObject<HTMLElement | null>, panelRef: RefObject<HTMLElement | null>, { width, gap, inset }: StreamoidAnchoredPopoverPositionOptions): StreamoidAnchoredPopoverPosition;
 
 interface IScPopoverArrowProps {

package/dist/index.js

@@ -5913,6 +5913,7 @@ var DEFAULT_GAP = 8;
 var DEFAULT_INSET = 16;
 function resolveAnchoredPopoverPosition({
   anchor,
+  align,
   viewportWidth,
   viewportHeight,
   width,
@@ -5922,8 +5923,9 @@ function resolveAnchoredPopoverPosition({
 }) {
   const available = Math.max(0, viewportWidth - inset * 2);
   const panelWidth = Math.min(width, available);
-  const rightOfAnchor = anchor.right + gap;
-  const leftOfAnchor = anchor.left - gap - panelWidth;
+  const beside = align ?? anchor;
+  const rightOfAnchor = beside.right + gap;
+  const leftOfAnchor = beside.left - gap - panelWidth;
   const fitsRight = rightOfAnchor + panelWidth <= viewportWidth - inset;
   const preferredLeft = fitsRight ? rightOfAnchor : leftOfAnchor >= inset ? leftOfAnchor : rightOfAnchor;
   const left = Math.max(
@@ -5941,7 +5943,12 @@ function resolveAnchoredPopoverPosition({
   );
   return { left, top, width: panelWidth };
 }
-function useStreamoidAnchoredPopover(anchorRef, panelRef, { width, gap = DEFAULT_GAP, inset = DEFAULT_INSET }) {
+function useStreamoidAnchoredPopover(anchorRef, panelRef, {
+  width,
+  gap = DEFAULT_GAP,
+  inset = DEFAULT_INSET,
+  alignRef
+}) {
   const [state, setState] = (0, import_react16.useState)({
     style: {
       position: "fixed",
@@ -5962,6 +5969,7 @@ function useStreamoidAnchoredPopover(anchorRef, panelRef, { width, gap = DEFAULT
       const panelHeight = panelRef.current?.offsetHeight;
       const { left, top, width: panelWidth } = resolveAnchoredPopoverPosition({
         anchor: bounds,
+        align: alignRef?.current?.getBoundingClientRect(),
         viewportWidth: window.innerWidth,
         viewportHeight: window.innerHeight,
         width,
@@ -5994,12 +6002,13 @@ function useStreamoidAnchoredPopover(anchorRef, panelRef, { width, gap = DEFAULT
     const resizeObserver = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
     resizeObserver?.observe(anchor);
     if (panelRef.current) resizeObserver?.observe(panelRef.current);
+    if (alignRef?.current) resizeObserver?.observe(alignRef.current);
     return () => {
       window.removeEventListener("resize", measure);
       window.removeEventListener("scroll", measure, true);
       resizeObserver?.disconnect();
     };
-  }, [anchorRef, panelRef, width, gap, inset]);
+  }, [anchorRef, panelRef, alignRef, width, gap, inset]);
   return state;
 }
 function useStreamoidAnchoredPopoverPosition(anchorRef, panelRef, { width, gap = DEFAULT_GAP, inset = DEFAULT_INSET }) {

package/dist/index.mjs

@@ -5740,6 +5740,7 @@ var DEFAULT_GAP = 8;
 var DEFAULT_INSET = 16;
 function resolveAnchoredPopoverPosition({
   anchor,
+  align,
   viewportWidth,
   viewportHeight,
   width,
@@ -5749,8 +5750,9 @@ function resolveAnchoredPopoverPosition({
 }) {
   const available = Math.max(0, viewportWidth - inset * 2);
   const panelWidth = Math.min(width, available);
-  const rightOfAnchor = anchor.right + gap;
-  const leftOfAnchor = anchor.left - gap - panelWidth;
+  const beside = align ?? anchor;
+  const rightOfAnchor = beside.right + gap;
+  const leftOfAnchor = beside.left - gap - panelWidth;
   const fitsRight = rightOfAnchor + panelWidth <= viewportWidth - inset;
   const preferredLeft = fitsRight ? rightOfAnchor : leftOfAnchor >= inset ? leftOfAnchor : rightOfAnchor;
   const left = Math.max(
@@ -5768,7 +5770,12 @@ function resolveAnchoredPopoverPosition({
   );
   return { left, top, width: panelWidth };
 }
-function useStreamoidAnchoredPopover(anchorRef, panelRef, { width, gap = DEFAULT_GAP, inset = DEFAULT_INSET }) {
+function useStreamoidAnchoredPopover(anchorRef, panelRef, {
+  width,
+  gap = DEFAULT_GAP,
+  inset = DEFAULT_INSET,
+  alignRef
+}) {
   const [state, setState] = useState13({
     style: {
       position: "fixed",
@@ -5789,6 +5796,7 @@ function useStreamoidAnchoredPopover(anchorRef, panelRef, { width, gap = DEFAULT
       const panelHeight = panelRef.current?.offsetHeight;
       const { left, top, width: panelWidth } = resolveAnchoredPopoverPosition({
         anchor: bounds,
+        align: alignRef?.current?.getBoundingClientRect(),
         viewportWidth: window.innerWidth,
         viewportHeight: window.innerHeight,
         width,
@@ -5821,12 +5829,13 @@ function useStreamoidAnchoredPopover(anchorRef, panelRef, { width, gap = DEFAULT
     const resizeObserver = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
     resizeObserver?.observe(anchor);
     if (panelRef.current) resizeObserver?.observe(panelRef.current);
+    if (alignRef?.current) resizeObserver?.observe(alignRef.current);
     return () => {
       window.removeEventListener("resize", measure);
       window.removeEventListener("scroll", measure, true);
       resizeObserver?.disconnect();
     };
-  }, [anchorRef, panelRef, width, gap, inset]);
+  }, [anchorRef, panelRef, alignRef, width, gap, inset]);
   return state;
 }
 function useStreamoidAnchoredPopoverPosition(anchorRef, panelRef, { width, gap = DEFAULT_GAP, inset = DEFAULT_INSET }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamoid/ui",
-  "version": "0.6.32",
+  "version": "0.6.33",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",