@rogieking/figui3 2.21.0 → 2.22.1

package/fig.js

@@ -1072,7 +1072,7 @@ class FigPopup extends HTMLDialogElement {
   constructor() {
     super();
     this.#boundReposition = this.#queueReposition.bind(this);
-    this.#boundScroll = this.#queueReposition.bind(this);
+    this.#boundScroll = () => { if (this.open) this.#positionPopup(); };
     this.#boundOutsidePointerDown = this.#handleOutsidePointerDown.bind(this);
     this.#boundPointerDown = this.#handlePointerDown.bind(this);
     this.#boundPointerMove = this.#handlePointerMove.bind(this);
@@ -1177,8 +1177,6 @@ class FigPopup extends HTMLDialogElement {
         this.#setupDragListeners();
       } else {
         this.#removeDragListeners();
-        const header = this.querySelector("fig-header, header");
-        if (header) header.style.cursor = "";
       }
       return;
     }
@@ -1267,7 +1265,7 @@ class FigPopup extends HTMLDialogElement {
     }
 
     window.addEventListener("resize", this.#boundReposition);
-    window.addEventListener("scroll", this.#boundScroll, true);
+    window.addEventListener("scroll", this.#boundScroll, { capture: true, passive: true });
   }
 
   #teardownObservers() {
@@ -1284,7 +1282,7 @@ class FigPopup extends HTMLDialogElement {
       this.#mutationObserver = null;
     }
     window.removeEventListener("resize", this.#boundReposition);
-    window.removeEventListener("scroll", this.#boundScroll, true);
+    window.removeEventListener("scroll", this.#boundScroll, { capture: true, passive: true });
   }
 
   #handleOutsidePointerDown(event) {
@@ -1298,19 +1296,32 @@ class FigPopup extends HTMLDialogElement {
     const anchor = this.#resolveAnchor();
     if (anchor && anchor.contains(target)) return;
 
+    if (this.#isInsideDescendantPopup(target)) return;
+
     this.open = false;
   }
 
+  #isInsideDescendantPopup(target) {
+    const targetDialog = target.closest?.('dialog[is="fig-popup"]');
+    if (!targetDialog || targetDialog === this) return false;
+
+    let current = targetDialog;
+    const visited = new Set();
+    while (current && !visited.has(current)) {
+      visited.add(current);
+      const popupAnchor = current.anchor;
+      if (!(popupAnchor instanceof Element)) break;
+      if (this.contains(popupAnchor)) return true;
+      current = popupAnchor.closest?.('dialog[is="fig-popup"]');
+    }
+    return false;
+  }
+
   // ---- Drag support ----
 
   #setupDragListeners() {
     if (this.drag) {
       this.addEventListener("pointerdown", this.#boundPointerDown);
-      const handleSelector = this.getAttribute("handle");
-      const handleEl = handleSelector
-        ? this.querySelector(handleSelector)
-        : this.querySelector("fig-header, header");
-      if (handleEl) handleEl.style.cursor = "grab";
     }
   }
 
@@ -1527,53 +1538,67 @@ class FigPopup extends HTMLDialogElement {
     };
   }
 
-  #getOrder(preferred, axis) {
-    const verticalMap = {
-      top: ["top", "bottom", "center"],
-      center: ["center", "top", "bottom"],
-      bottom: ["bottom", "top", "center"],
-    };
-    const horizontalMap = {
-      left: ["left", "right", "center"],
-      center: ["center", "left", "right"],
-      right: ["right", "left", "center"],
-    };
+  #getPlacementCandidates(vertical, horizontal, shorthand) {
+    const opp = { top: "bottom", bottom: "top", left: "right", right: "left", center: "center" };
+
+    if (shorthand) {
+      const isHorizontal = shorthand === "left" || shorthand === "right";
+      const perp = isHorizontal ? ["top", "bottom"] : ["left", "right"];
+      return [
+        { v: vertical, h: horizontal, s: shorthand },
+        { v: vertical, h: horizontal, s: opp[shorthand] },
+        { v: vertical, h: horizontal, s: perp[0] },
+        { v: vertical, h: horizontal, s: perp[1] },
+      ];
+    }
 
-    return axis === "vertical"
-      ? verticalMap[preferred] || verticalMap.top
-      : horizontalMap[preferred] || horizontalMap.center;
+    if (vertical === "center") {
+      return [
+        { v: "center", h: horizontal, s: null },
+        { v: "center", h: opp[horizontal], s: null },
+        { v: "top", h: horizontal, s: null },
+        { v: "bottom", h: horizontal, s: null },
+        { v: "top", h: opp[horizontal], s: null },
+        { v: "bottom", h: opp[horizontal], s: null },
+      ];
+    }
+
+    if (horizontal === "center") {
+      return [
+        { v: vertical, h: "center", s: null },
+        { v: opp[vertical], h: "center", s: null },
+        { v: vertical, h: "left", s: null },
+        { v: vertical, h: "right", s: null },
+        { v: opp[vertical], h: "left", s: null },
+        { v: opp[vertical], h: "right", s: null },
+      ];
+    }
+
+    return [
+      { v: vertical, h: horizontal, s: null },
+      { v: opp[vertical], h: horizontal, s: null },
+      { v: vertical, h: opp[horizontal], s: null },
+      { v: opp[vertical], h: opp[horizontal], s: null },
+    ];
   }
 
   #computeCoords(anchorRect, popupRect, vertical, horizontal, offset, shorthand) {
     let top;
     let left;
 
-    // Shorthand support:
-    // position="right" => top edges aligned, popup sits to the right of anchor.
-    // position="left"  => top edges aligned, popup sits to the left of anchor.
-    if (shorthand === "right") {
-      return {
-        top: anchorRect.top,
-        left: anchorRect.right + offset.xPx,
-      };
+    if (shorthand === "left" || shorthand === "right") {
+      left = shorthand === "left"
+        ? anchorRect.left - popupRect.width - offset.xPx
+        : anchorRect.right + offset.xPx;
+      top = anchorRect.top;
+      return { top, left };
     }
-    if (shorthand === "left") {
-      return {
-        top: anchorRect.top,
-        left: anchorRect.left - popupRect.width - offset.xPx,
-      };
-    }
-    if (shorthand === "top") {
-      return {
-        top: anchorRect.top - popupRect.height - offset.yPx,
-        left: anchorRect.left,
-      };
-    }
-    if (shorthand === "bottom") {
-      return {
-        top: anchorRect.bottom + offset.yPx,
-        left: anchorRect.left,
-      };
+    if (shorthand === "top" || shorthand === "bottom") {
+      top = shorthand === "top"
+        ? anchorRect.top - popupRect.height - offset.yPx
+        : anchorRect.bottom + offset.yPx;
+      left = anchorRect.left;
+      return { top, left };
     }
 
     if (vertical === "top") {
@@ -1695,8 +1720,6 @@ class FigPopup extends HTMLDialogElement {
     const popupRect = this.getBoundingClientRect();
     const offset = this.#parseOffset();
     const { vertical, horizontal, shorthand } = this.#parsePosition();
-    const verticalOrder = this.#getOrder(vertical, "vertical");
-    const horizontalOrder = this.#getOrder(horizontal, "horizontal");
     const anchor = this.#resolveAnchor();
 
     if (!anchor) {
@@ -1712,31 +1735,38 @@ class FigPopup extends HTMLDialogElement {
     }
 
     const anchorRect = anchor.getBoundingClientRect();
+    const candidates = this.#getPlacementCandidates(vertical, horizontal, shorthand);
     let best = null;
     let bestSide = "top";
     let bestScore = Number.POSITIVE_INFINITY;
 
-    for (const v of verticalOrder) {
-      for (const h of horizontalOrder) {
-        const coords = this.#computeCoords(
-          anchorRect,
-          popupRect,
-          v,
-          h,
-          offset,
-          shorthand
-        );
-        const placementSide = this.#getPlacementSide(v, h, shorthand);
+    for (const { v, h, s } of candidates) {
+      const coords = this.#computeCoords(anchorRect, popupRect, v, h, offset, s);
+      const placementSide = this.#getPlacementSide(v, h, s);
+
+      if (s) {
+        // Shorthand: clamp cross-axis to viewport, check primary axis fit
+        const clamped = this.#clamp(coords, popupRect);
+        const primaryFits = (s === "left" || s === "right")
+          ? (coords.left >= this.#viewportPadding && coords.left + popupRect.width <= window.innerWidth - this.#viewportPadding)
+          : (coords.top >= this.#viewportPadding && coords.top + popupRect.height <= window.innerHeight - this.#viewportPadding);
+        if (primaryFits) {
+          this.style.left = `${clamped.left}px`;
+          this.style.top = `${clamped.top}px`;
+          this.#updatePopoverBeak(anchorRect, popupRect, clamped.left, clamped.top, placementSide);
+          return;
+        }
+        const score = this.#overflowScore(coords, popupRect);
+        if (score < bestScore) {
+          bestScore = score;
+          best = clamped;
+          bestSide = placementSide;
+        }
+      } else {
         if (this.#fits(coords, popupRect)) {
           this.style.left = `${coords.left}px`;
           this.style.top = `${coords.top}px`;
-          this.#updatePopoverBeak(
-            anchorRect,
-            popupRect,
-            coords.left,
-            coords.top,
-            placementSide
-          );
+          this.#updatePopoverBeak(anchorRect, popupRect, coords.left, coords.top, placementSide);
           return;
         }
         const score = this.#overflowScore(coords, popupRect);
@@ -1751,13 +1781,7 @@ class FigPopup extends HTMLDialogElement {
     const clamped = this.#clamp(best || { left: 0, top: 0 }, popupRect);
     this.style.left = `${clamped.left}px`;
     this.style.top = `${clamped.top}px`;
-    this.#updatePopoverBeak(
-      anchorRect,
-      popupRect,
-      clamped.left,
-      clamped.top,
-      bestSide
-    );
+    this.#updatePopoverBeak(anchorRect, popupRect, clamped.left, clamped.top, bestSide);
   }
 
   #queueReposition() {
@@ -3352,6 +3376,8 @@ class FigInputColor extends HTMLElement {
     const showAlpha = this.getAttribute("alpha") === "true";
     const experimental = this.getAttribute("experimental");
     const expAttr = experimental ? `experimental="${experimental}"` : "";
+    const dialogPos = this.getAttribute("dialog-position") || "left";
+    const dialogPosAttr = `dialog-position="${dialogPos}"`;
 
     let html = ``;
     if (this.getAttribute("text")) {
@@ -3376,7 +3402,7 @@ class FigInputColor extends HTMLElement {
       let swatchElement = "";
       if (!hidePicker) {
         swatchElement = useFigmaPicker
-          ? `<fig-fill-picker mode="solid" dialog-position="left" ${expAttr} ${
+          ? `<fig-fill-picker mode="solid" ${dialogPosAttr} ${expAttr} ${
               showAlpha ? "" : 'alpha="false"'
             } value='{"type":"solid","color":"${this.hexOpaque}","opacity":${
               this.alpha
@@ -3394,7 +3420,7 @@ class FigInputColor extends HTMLElement {
         html = ``;
       } else {
         html = useFigmaPicker
-          ? `<fig-fill-picker mode="solid" dialog-position="left" ${expAttr} ${
+          ? `<fig-fill-picker mode="solid" ${dialogPosAttr} ${expAttr} ${
               showAlpha ? "" : 'alpha="false"'
             } value='{"type":"solid","color":"${this.hexOpaque}","opacity":${
               this.alpha
@@ -3586,7 +3612,7 @@ class FigInputColor extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ["value", "style", "mode", "picker", "experimental"];
+    return ["value", "style", "mode", "picker", "experimental", "dialog-position"];
   }
 
   get mode() {
@@ -6957,7 +6983,7 @@ class FigFillPicker extends HTMLElement {
         <fig-input-number class="fig-fill-picker-stop-position" min="0" max="100" value="${
           stop.position
         }" units="%"></fig-input-number>
-        <fig-input-color class="fig-fill-picker-stop-color" text="true" alpha="true" picker="figma" value="${
+        <fig-input-color class="fig-fill-picker-stop-color" text="true" alpha="true" picker="figma" dialog-position="right" value="${
           stop.color
         }"></fig-input-color>
         <fig-button icon variant="ghost" class="fig-fill-picker-stop-remove" ${

package/index.html

@@ -24,7 +24,9 @@
 
         nav {
             position: fixed;
-            width: 240px;
+            width: 20vw;
+            min-width: 128px;
+            max-width: 320px;
             height: 100vh;
             overflow-y: auto;
             background: var(--figma-color-bg-secondary);
@@ -105,7 +107,7 @@
         }
 
         main {
-            margin-left: 240px;
+            margin-left: clamp(128px, 20vw, 320px);
             padding: 24px 32px;
             max-width: 800px;
             min-height: 100vh;
@@ -1806,6 +1808,13 @@
                              alpha="true"
                              picker="figma"></fig-input-color>
 
+            <h4>Figma Picker (Experimental Modern)</h4>
+            <fig-input-color value="#E84393"
+                             text="true"
+                             alpha="true"
+                             picker="figma"
+                             experimental="modern"></fig-input-color>
+
             <h4>No Picker (text input only)</h4>
             <fig-input-color value="#9747FF"
                              text="true"
@@ -1995,6 +2004,10 @@
             <h3>Webcam Fill</h3>
             <fig-input-fill value='{"type":"webcam","webcam":{"opacity":1}}'></fig-input-fill>
 
+            <h3>Experimental Modern</h3>
+            <fig-input-fill experimental="modern"
+                            value='{"type":"solid","color":"#E84393","alpha":1}'></fig-input-fill>
+
             <h3>Disabled</h3>
             <fig-input-fill disabled
                             value='{"type":"solid","color":"#AA96DA","alpha":1}'></fig-input-fill>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "2.21.0",
+  "version": "2.22.1",
   "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
   "author": "Rogie King",
   "license": "MIT",