@flytedan/flytebot-design-system 0.11.1 → 0.11.3

package/dist/index.cjs

@@ -288,7 +288,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";
@@ -345,9 +345,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 = {
@@ -357,6 +358,7 @@ function usePopoverPosition(open, anchorRef, opts) {
         top,
         bottom,
         maxH,
+        maxW,
         side,
         anchorWidth: r.width
       };
@@ -381,6 +383,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 (0, import_react_dom.createPortal)(node, document.body);
   return node;
@@ -472,7 +475,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
@@ -3370,15 +3380,20 @@ function TransferList({
                 if (isBeingDragged) {
                   return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "fd-erow-placeholder", "aria-hidden": "true" });
                 }
+                const content = renderRow(item);
+                const destination = (side === "left" ? right : left).label || "the other list";
                 return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                   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)
                     }