@flytedan/flytebot-design-system 0.11.1 → 0.11.3

package/dist/index.d.cts

@@ -88,6 +88,10 @@ interface PopoverPosition {
     top: number | null;
     bottom: number | null;
     maxH: number;
+    /** The widest the layer may be: the viewport less its margins. A fixed `width`, a
+     *  `minWidth` or an anchor-matched width wider than the screen is capped to this, so the
+     *  surface — and the action in its footer — never runs past the viewport edge. */
+    maxW: number;
     side: "top" | "bottom";
     anchorWidth: number;
 }
@@ -1501,7 +1505,9 @@ interface TransferListProps<T> {
      *  ghost that follows the cursor: with per-field props that second call has to
      *  remember to pass each of them, and the version of this component that did exactly
      *  that quietly dropped every field but title and meta off the dragged card. Handing
-     *  the same object to both render sites makes that class of bug unrepresentable. */
+     *  the same object to both render sites makes that class of bug unrepresentable.
+     *  The row's `title` also names its +/- action, with the destination side's `label`:
+     *  "Move Alpha to In audience". */
     renderRow: (item: T) => EntityRowContent;
     /** Fired by both a drag-drop and the equivalent +/- click. The caller owns actually
      *  moving the item between whatever backing lists it maintains — this component never

package/dist/index.d.ts

@@ -88,6 +88,10 @@ interface PopoverPosition {
     top: number | null;
     bottom: number | null;
     maxH: number;
+    /** The widest the layer may be: the viewport less its margins. A fixed `width`, a
+     *  `minWidth` or an anchor-matched width wider than the screen is capped to this, so the
+     *  surface — and the action in its footer — never runs past the viewport edge. */
+    maxW: number;
     side: "top" | "bottom";
     anchorWidth: number;
 }
@@ -1501,7 +1505,9 @@ interface TransferListProps<T> {
      *  ghost that follows the cursor: with per-field props that second call has to
      *  remember to pass each of them, and the version of this component that did exactly
      *  that quietly dropped every field but title and meta off the dragged card. Handing
-     *  the same object to both render sites makes that class of bug unrepresentable. */
+     *  the same object to both render sites makes that class of bug unrepresentable.
+     *  The row's `title` also names its +/- action, with the destination side's `label`:
+     *  "Move Alpha to In audience". */
     renderRow: (item: T) => EntityRowContent;
     /** Fired by both a drag-drop and the equivalent +/- click. The caller owns actually
      *  moving the item between whatever backing lists it maintains — this component never

package/dist/index.js

@@ -85,7 +85,7 @@ var parsePlacement = (p) => {
 };
 var samePosition = (a, b) => {
   if (!a || !b) return a === b;
-  return a.left === b.left && a.top === b.top && a.bottom === b.bottom && a.width === b.width && a.minWidth === b.minWidth && a.maxH === b.maxH && a.side === b.side && a.anchorWidth === b.anchorWidth;
+  return a.left === b.left && a.top === b.top && a.bottom === b.bottom && a.width === b.width && a.minWidth === b.minWidth && a.maxH === b.maxH && a.maxW === b.maxW && a.side === b.side && a.anchorWidth === b.anchorWidth;
 };
 var SCROLL_REGIONS = ".fd-pop-body, .fd-pop-list";
 var PINNED_REGIONS = ":scope > .fd-pop-header, :scope > .fd-pop-footer";
@@ -142,9 +142,10 @@ function usePopoverPosition(open, anchorRef, opts) {
       const top = side === "bottom" ? beside ? r.bottom + offset : edge : null;
       const bottom = side === "top" ? beside ? vh - r.top + offset : edge : null;
       const maxH = beside ? room : vh - MARGIN - edge;
+      const maxW = Math.max(0, window.innerWidth - 2 * MARGIN);
       const exact = o.matchWidth === true;
       const width = exact ? r.width : Math.max(o.width || 0, o.minWidth || 0, o.matchWidth === "min" ? r.width : 0);
-      const w = exact || o.width ? width : Math.max(layer.width, width) || o.estWidth || 260;
+      const w = Math.min(maxW, exact || o.width ? width : Math.max(layer.width, width) || o.estWidth || 260);
       let left = align === "end" ? r.right - w : align === "center" ? r.left + r.width / 2 - w / 2 : r.left;
       left = Math.max(MARGIN, Math.min(left, window.innerWidth - w - MARGIN));
       const next = {
@@ -154,6 +155,7 @@ function usePopoverPosition(open, anchorRef, opts) {
         top,
         bottom,
         maxH,
+        maxW,
         side,
         anchorWidth: r.width
       };
@@ -178,6 +180,7 @@ function usePopoverPosition(open, anchorRef, opts) {
   }, [open, o.placement, o.offset, o.matchWidth, o.width, o.minWidth, o.maxHeight, o.estHeight]);
   return pos;
 }
+var capWidth = (value, max) => value == null ? void 0 : Math.min(value, max);
 var portal = (node) => {
   if (typeof document !== "undefined") return createPortal(node, document.body);
   return node;
@@ -269,7 +272,14 @@ function Popover({
           top: pos.top == null ? "auto" : pos.top,
           bottom: pos.bottom == null ? "auto" : pos.bottom,
           width: matchWidth === true ? pos.width : width,
-          minWidth: matchWidth === "min" ? Math.max(pos.anchorWidth, minWidth || 0) : minWidth || (matchWidth ? void 0 : 200),
+          // CSS lets min-width win over max-width, so every minimum is capped to the viewport too.
+          minWidth: capWidth(
+            matchWidth === "min" ? Math.max(pos.anchorWidth, minWidth || 0) : minWidth || (matchWidth ? void 0 : 200),
+            pos.maxW
+          ),
+          // The surface never runs past the viewport edge, whatever fixed `width` a caller asked
+          // for: pos.maxW is the viewport less its margins, and `left` is clamped against it.
+          maxWidth: pos.maxW,
           // Size to content by default — cap only at real available room between the
           // anchor and the viewport edge (pos.maxH, computed by usePopoverPosition).
           // A caller-supplied `maxHeight` narrows that further (e.g. a long menu that
@@ -3167,15 +3177,20 @@ function TransferList({
                 if (isBeingDragged) {
                   return /* @__PURE__ */ jsx43("div", { className: "fd-erow-placeholder", "aria-hidden": "true" });
                 }
+                const content = renderRow(item);
+                const destination = (side === "left" ? right : left).label || "the other list";
                 return /* @__PURE__ */ jsx43(
                   EntityRow,
                   {
-                    ...renderRow(item),
+                    ...content,
                     draggable: true,
                     onPointerDown: (e) => beginDrag(e, item, side),
                     action: {
                       icon: side === "left" ? "plus" : "minus",
-                      label: (side === "left" ? "Move to " : "Move from ") + (side === "left" ? right.label || "the other list" : left.label || "the other list"),
+                      // Names the row AND where it goes. A list repeats this button on every
+                      // row, so a name without the row's title is the same word fifty times
+                      // over to a screen reader, with nothing to tell one button from the next.
+                      label: "Move " + content.title + " to " + destination,
                       tone: side === "left" ? "add" : "remove",
                       onClick: () => onMove(item, side, opposite)
                     }