@rogieking/figui3 6.22.0 → 6.23.1

package/fig.js

@@ -105,9 +105,12 @@ function createFigOverflowButtons({
   startClass = "",
   endClass = "",
   chevronClass = "",
+  startLabel = "Scroll back",
+  endLabel = "Scroll forward",
 } = {}) {
   const makeButton = (direction, onPointerDown) => {
     const button = document.createElement("button");
+    button.type = "button";
     button.className = [
       "fig-overflow",
       `fig-overflow-${direction}`,
@@ -118,7 +121,10 @@ function createFigOverflowButtons({
     button.dataset.figOverflow = direction;
     if (owner) button.setAttribute(`data-fig-${owner}-nav`, direction);
     button.setAttribute("tabindex", "-1");
-    button.setAttribute("aria-label", direction === "start" ? "Scroll back" : "Scroll forward");
+    button.setAttribute(
+      "aria-label",
+      direction === "start" ? startLabel : endLabel,
+    );
     button.appendChild(
       createFigIcon("chevron", {
         size: "small",
@@ -164,6 +170,48 @@ function figScrollOverflowPage(scrollEl, axis = "x", direction = 1) {
   });
 }
 
+function figScrollElementToCenter(
+  scrollEl,
+  element,
+  axis = "y",
+  behavior = "auto",
+) {
+  if (!scrollEl || !element || !scrollEl.contains(element)) return;
+  requestAnimationFrame(() => {
+    if (!scrollEl.isConnected || !element.isConnected) return;
+    const isHorizontal = axis === "x";
+    const scrollSize = isHorizontal
+      ? scrollEl.scrollWidth
+      : scrollEl.scrollHeight;
+    const clientSize = isHorizontal
+      ? scrollEl.clientWidth
+      : scrollEl.clientHeight;
+    if (scrollSize <= clientSize + 1) {
+      figSyncOverflowState(scrollEl, scrollEl, axis);
+      return;
+    }
+    const elementRect = element.getBoundingClientRect();
+    const hostRect = scrollEl.getBoundingClientRect();
+    const currentScroll = isHorizontal
+      ? scrollEl.scrollLeft
+      : scrollEl.scrollTop;
+    const elementStart =
+      (isHorizontal ? elementRect.left - hostRect.left : elementRect.top - hostRect.top) +
+      currentScroll;
+    const elementSize = isHorizontal ? elementRect.width : elementRect.height;
+    const maxScroll = scrollSize - clientSize;
+    const nextScroll = Math.max(
+      0,
+      Math.min(elementStart + elementSize / 2 - clientSize / 2, maxScroll),
+    );
+    scrollEl.scrollTo({
+      [isHorizontal ? "left" : "top"]: nextScroll,
+      behavior,
+    });
+    figSyncOverflowState(scrollEl, scrollEl, axis);
+  });
+}
+
 function hasFigFillPicker() {
   return typeof customElements !== "undefined" && !!customElements.get("fig-fill-picker");
 }
@@ -234,7 +282,7 @@ function figUniqueId() {
 }
 
 /** Zero-size portal for fixed overlays so they never affect body layout metrics. */
-function figGetOverlayRoot(source) {
+function figGetOverlayRoot() {
   if (!document.body) return null;
   const attr = "data-figui-overlay-root";
   let root = document.body.querySelector(`:scope > [${attr}]`);
@@ -243,40 +291,9 @@ function figGetOverlayRoot(source) {
     root.setAttribute(attr, "");
     document.body.append(root);
   }
-  figSyncOverlayThemeFromSource(root, source);
   return root;
 }
 
-/** Copy PropsKit / FigUI theme onto the overlay portal so portaled popups stay themed. */
-function figSyncOverlayThemeFromSource(overlayRoot, source) {
-  if (!overlayRoot) return;
-  const panel =
-    (source instanceof Element
-      ? source.closest(".figui-root")
-      : null) || document.querySelector(".figui-root");
-  if (!panel) return;
-
-  const themeAttr = panel.getAttribute("theme");
-  const theme =
-    themeAttr === "light" || themeAttr === "dark" || themeAttr === "system"
-      ? themeAttr
-      : panel.classList.contains("figma-dark")
-        ? "dark"
-        : panel.classList.contains("figma-light")
-          ? "light"
-          : "system";
-
-  overlayRoot.classList.toggle("figma-light", theme === "light");
-  overlayRoot.classList.toggle("figma-dark", theme === "dark");
-  if (theme === "system") {
-    overlayRoot.style.setProperty("color-scheme", "light dark");
-  } else {
-    overlayRoot.style.setProperty("color-scheme", theme);
-  }
-  if (themeAttr) overlayRoot.setAttribute("theme", theme);
-  else overlayRoot.removeAttribute("theme");
-}
-
 let _figZCounter = 10000;
 function figGetHighestZIndex() {
   return _figZCounter++;
@@ -1065,13 +1082,13 @@ class FigTooltip extends HTMLElement {
     // - Without popover support, fall back to today's behavior: nearest open
     //   <dialog> ancestor if present, else document.body.
     if (supportsPopover) {
-      (figGetOverlayRoot(this) ?? document.body).append(this.popup);
+      (figGetOverlayRoot() ?? document.body).append(this.popup);
     } else {
       const parentDialog = this.closest("dialog");
       if (parentDialog && parentDialog.open) {
         parentDialog.append(this.popup);
       } else {
-        (figGetOverlayRoot(this) ?? document.body).append(this.popup);
+        (figGetOverlayRoot() ?? document.body).append(this.popup);
       }
     }
 
@@ -1463,13 +1480,13 @@ class FigTooltip extends HTMLElement {
       popup.append(content);
 
       if (supportsPopover) {
-        (figGetOverlayRoot(anchor) ?? document.body).append(popup);
+        (figGetOverlayRoot() ?? document.body).append(popup);
       } else {
         const parentDialog = anchor.closest?.("dialog");
         if (parentDialog && parentDialog.open) {
           parentDialog.append(popup);
         } else {
-          (figGetOverlayRoot(anchor) ?? document.body).append(popup);
+          (figGetOverlayRoot() ?? document.body).append(popup);
         }
       }
 
@@ -5220,57 +5237,6 @@ class FigSelectOption extends HTMLElement {
 }
 figDefineElement("fig-select-option", FigSelectOption);
 
-function figSelectSyncOverflowState(host, scrollEl, threshold = 2) {
-  if (!host || !scrollEl) return false;
-  const scrollable = scrollEl.scrollHeight - scrollEl.clientHeight > threshold;
-  const atStart = !scrollable || scrollEl.scrollTop <= threshold;
-  const atEnd =
-    !scrollable ||
-    scrollEl.scrollTop + scrollEl.clientHeight >=
-      scrollEl.scrollHeight - threshold;
-  host.classList.toggle("overflow-start", !atStart);
-  host.classList.toggle("overflow-end", !atEnd);
-  return scrollable;
-}
-
-function figSelectScrollOverflowPage(scrollEl, direction = 1) {
-  if (!scrollEl) return;
-  scrollEl.scrollBy({
-    top: scrollEl.clientHeight * 0.8 * direction,
-    behavior: "smooth",
-  });
-}
-
-function figSelectCreateOverflowButtons({ onStart, onEnd } = {}) {
-  const makeButton = (direction, onClick) => {
-    const button = document.createElement("button");
-    button.type = "button";
-    button.className = `fig-overflow fig-overflow-${direction}`;
-    button.dataset.figOverflow = direction;
-    button.setAttribute("data-fig-select-nav", direction);
-    button.setAttribute("tabindex", "-1");
-    button.setAttribute(
-      "aria-label",
-      direction === "start" ? "Scroll up" : "Scroll down",
-    );
-    const icon = document.createElement("fig-icon");
-    icon.setAttribute("name", "chevron");
-    icon.setAttribute("size", "small");
-    icon.className = "fig-overflow-chevron";
-    button.appendChild(icon);
-    button.addEventListener("click", (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-      onClick?.(event);
-    });
-    return button;
-  };
-  return {
-    start: makeButton("start", onStart),
-    end: makeButton("end", onEnd),
-  };
-}
-
 /** Light-DOM panel wrapper projected into fig-select's popup; owns overflow buttons. */
 class FigSelectOptions extends HTMLElement {
   #navStart = null;
@@ -5297,31 +5263,11 @@ class FigSelectOptions extends HTMLElement {
   }
 
   syncOverflow() {
-    return figSelectSyncOverflowState(this, this);
+    return figSyncOverflowState(this, this, "y");
   }
 
   scrollToOption(option, behavior = "auto") {
-    if (!option || !this.contains(option)) return;
-    requestAnimationFrame(() => {
-      if (!option.isConnected) return;
-      if (this.scrollHeight <= this.clientHeight + 1) {
-        this.syncOverflow();
-        return;
-      }
-      const optionRect = option.getBoundingClientRect();
-      const hostRect = this.getBoundingClientRect();
-      const optionTop = optionRect.top - hostRect.top + this.scrollTop;
-      const maxScroll = this.scrollHeight - this.clientHeight;
-      const top = Math.max(
-        0,
-        Math.min(
-          optionTop + optionRect.height / 2 - this.clientHeight / 2,
-          maxScroll,
-        ),
-      );
-      this.scrollTo({ top, behavior });
-      this.syncOverflow();
-    });
+    figScrollElementToCenter(this, option, "y", behavior);
   }
 
   #unwrapLegacyChooser() {
@@ -5343,9 +5289,12 @@ class FigSelectOptions extends HTMLElement {
       return;
     }
     this.#removeNavButtons();
-    const buttons = figSelectCreateOverflowButtons({
-      onStart: () => figSelectScrollOverflowPage(this, -1),
-      onEnd: () => figSelectScrollOverflowPage(this, 1),
+    const buttons = createFigOverflowButtons({
+      owner: "select",
+      startLabel: "Scroll up",
+      endLabel: "Scroll down",
+      onStart: () => figScrollOverflowPage(this, "y", -1),
+      onEnd: () => figScrollOverflowPage(this, "y", 1),
     });
     this.#navStart = buttons.start;
     this.#navEnd = buttons.end;
@@ -19366,14 +19315,19 @@ figDefineElement("fig-menu-separator", FigMenuSeparator);
 
 class FigMenu extends HTMLElement {
   #popup = null;
+  #panel = null;
   #trigger = null;
   #virtualAnchor = null;
   #observer = null;
+  #resizeObserver = null;
+  #navStart = null;
+  #navEnd = null;
   #boundTriggerClick;
   #boundTriggerContextMenu;
   #boundPopupClick;
   #boundMenuKeydown;
   #boundPopupClose;
+  #boundSyncOverflow = this.#syncOverflow.bind(this);
   #focusedIndex = -1;
 
   static get observedAttributes() {
@@ -19415,6 +19369,7 @@ class FigMenu extends HTMLElement {
     this.#createPopup();
     this.#moveItemsToPopup();
     this.#setupListeners();
+    this.#setupOverflow();
     this.#setupObserver();
     this.#syncDisabled();
 
@@ -19425,6 +19380,7 @@ class FigMenu extends HTMLElement {
 
   disconnectedCallback() {
     this.#teardownListeners();
+    this.#teardownOverflow();
     document.removeEventListener("keydown", this.#boundMenuKeydown, true);
     if (this.#observer) {
       this.#observer.disconnect();
@@ -19433,13 +19389,14 @@ class FigMenu extends HTMLElement {
     if (this.#popup) {
       this.#popup.removeEventListener("close", this.#boundPopupClose);
       const items = Array.from(
-        this.#popup.querySelectorAll(
+        this.#panel?.querySelectorAll(
           ":scope > fig-menu-item, :scope > fig-menu-separator",
-        ),
+        ) ?? [],
       );
       for (const item of items) this.insertBefore(item, this.#popup);
       this.#popup.remove();
       this.#popup = null;
+      this.#panel = null;
     }
   }
 
@@ -19487,6 +19444,7 @@ class FigMenu extends HTMLElement {
   #createPopup() {
     this.#popup = document.createElement("dialog", { is: "fig-popup" });
     this.#popup.setAttribute("is", "fig-popup");
+    this.#popup.classList.add("fig-menu-popup");
     this.#popup.setAttribute("theme", "menu");
     this.#popup.setAttribute("role", "menu");
     this.#popup.setAttribute("id", this.#popup.getAttribute("id") || figUniqueId());
@@ -19504,16 +19462,21 @@ class FigMenu extends HTMLElement {
       this.#popup.anchor = this.#trigger;
     }
 
+    this.#panel = document.createElement("div");
+    this.#panel.className = "fig-menu-options";
+    this.#panel.setAttribute("role", "presentation");
+    this.#popup.appendChild(this.#panel);
     this.#popup.addEventListener("close", this.#boundPopupClose);
     this.appendChild(this.#popup);
   }
 
   #moveItemsToPopup() {
+    if (!this.#panel) return;
     const items = Array.from(this.querySelectorAll(
       ":scope > fig-menu-item, :scope > fig-menu-separator"
     ));
     for (const item of items) {
-      this.#popup.appendChild(item);
+      this.#panel.appendChild(item);
     }
   }
 
@@ -19553,7 +19516,7 @@ class FigMenu extends HTMLElement {
             (node.tagName === "FIG-MENU-ITEM" || node.tagName === "FIG-MENU-SEPARATOR") &&
             node.parentElement === this
           ) {
-            this.#popup.appendChild(node);
+            this.#panel?.appendChild(node);
           } else if (!this.#trigger && node.parentElement === this) {
             this.#detectTrigger();
             if (this.#trigger) {
@@ -19568,13 +19531,68 @@ class FigMenu extends HTMLElement {
           }
         }
       }
+      this.#syncOverflow();
     });
     this.#observer.observe(this, { childList: true });
   }
 
+  #setupOverflow() {
+    if (!this.#panel) return;
+    this.#ensureNavButtons();
+    this.#panel.addEventListener("scroll", this.#boundSyncOverflow, {
+      passive: true,
+    });
+    this.#resizeObserver?.disconnect();
+    this.#resizeObserver = new ResizeObserver(() => this.#syncOverflow());
+    this.#resizeObserver.observe(this.#panel);
+    requestAnimationFrame(() => this.#syncOverflow());
+  }
+
+  #teardownOverflow() {
+    this.#panel?.removeEventListener("scroll", this.#boundSyncOverflow);
+    this.#resizeObserver?.disconnect();
+    this.#resizeObserver = null;
+    this.#removeNavButtons();
+  }
+
+  #syncOverflow() {
+    return figSyncOverflowState(this.#panel, this.#panel, "y");
+  }
+
+  #ensureNavButtons() {
+    if (
+      this.#navStart &&
+      this.#navEnd &&
+      this.#panel?.contains(this.#navStart) &&
+      this.#panel?.contains(this.#navEnd)
+    ) {
+      return;
+    }
+    this.#removeNavButtons();
+    const buttons = createFigOverflowButtons({
+      owner: "menu",
+      startLabel: "Scroll up",
+      endLabel: "Scroll down",
+      onStart: () => figScrollOverflowPage(this.#panel, "y", -1),
+      onEnd: () => figScrollOverflowPage(this.#panel, "y", 1),
+    });
+    this.#navStart = buttons.start;
+    this.#navEnd = buttons.end;
+    this.#panel.prepend(this.#navStart);
+    this.#panel.append(this.#navEnd);
+  }
+
+  #removeNavButtons() {
+    this.#navStart?.remove();
+    this.#navEnd?.remove();
+    this.#navStart = null;
+    this.#navEnd = null;
+    this.#panel?.classList.remove("overflow-start", "overflow-end");
+  }
+
   #getItems() {
-    if (!this.#popup) return [];
-    return Array.from(this.#popup.querySelectorAll("fig-menu-item")).filter(
+    if (!this.#panel) return [];
+    return Array.from(this.#panel.querySelectorAll("fig-menu-item")).filter(
       (item) =>
         !item.hasAttribute("disabled") || item.getAttribute("disabled") === "false",
     );
@@ -19598,7 +19616,9 @@ class FigMenu extends HTMLElement {
     if (!items.length) return;
     const wrapped = (index + items.length) % items.length;
     this.#focusedIndex = wrapped;
-    items[wrapped].focus();
+    const item = items[wrapped];
+    item.focus();
+    figScrollElementToCenter(this.#panel, item, "y");
   }
 
   #syncDisabled() {
@@ -19809,6 +19829,7 @@ class FigMenu extends HTMLElement {
     }
     this.#focusedIndex = -1;
     requestAnimationFrame(() => {
+      this.#syncOverflow();
       if (!this.#trigger?.matches?.(":focus-visible")) return;
       this.#focusItemAt(0);
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "6.22.0",
+  "version": "6.23.1",
   "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
   "author": "Rogie King",
   "license": "MIT",
@@ -19,15 +19,6 @@
     "./fig-lab.css": "./dist/fig-lab.css",
     "./base.css": "./dist/base.css",
     "./components.css": "./dist/components.css",
-    "./propskit": {
-      "types": "./propskit.d.ts",
-      "default": "./dist/propskit.js"
-    },
-    "./propskit.js": {
-      "types": "./propskit.d.ts",
-      "default": "./dist/propskit.js"
-    },
-    "./propskit.css": "./dist/propskit.css",
     "./src/fig.js": "./fig.js",
     "./src/fig-layer.js": "./fig-layer.js",
     "./src/fig-editor.js": "./fig-editor.js",
@@ -44,9 +35,6 @@
     "fig-layer.js",
     "fig-editor.js",
     "fig-lab.js",
-    "propskit.js",
-    "propskit-core.js",
-    "propskit.d.ts",
     "fig.css",
     "fig-layer.css",
     "fig-editor.css",
@@ -61,17 +49,14 @@
   ],
   "sideEffects": [
     "*.css",
-    "./propskit.js",
-    "./dist/propskit.js",
     "./fig.js",
     "./fig-lab.js",
     "./fig-editor.js"
   ],
   "scripts": {
     "dev": "bun --hot server.ts",
-    "build": "bun build fig.js --minify --outdir dist && bun build fig-layer.js --minify --outdir dist && bun build fig-editor.js --minify --outdir dist --external ./fig.js --external ./fig-lab.js && bun build fig-lab.js --minify --outdir dist --external ./fig.js --external ./fig-editor.js && bun build propskit.js --minify --outdir dist --external ./fig.js --external ./fig-lab.js --external ./fig-editor.js && npm run build:css && npm run build:propskit-css",
+    "build": "bun build fig.js --minify --outdir dist && bun build fig-layer.js --minify --outdir dist && bun build fig-editor.js --minify --outdir dist --external ./fig.js --external ./fig-lab.js && bun build fig-lab.js --minify --outdir dist --external ./fig.js --external ./fig-editor.js && npm run build:css",
     "build:css": "node scripts/build-css.mjs",
-    "build:propskit-css": "node scripts/build-propskit-css.mjs",
     "dev:playground": "node playground/dev.mjs",
     "build:playground": "cd playground && npm run build",
     "test": "npm run test:components",
@@ -125,17 +110,6 @@
     "playwright": "^1.58.2"
   },
   "peerDependencies": {
-    "typescript": "^5.0.0",
-    "react": ">=18",
-    "vue": ">=3.3",
-    "svelte": ">=5",
-    "solid-js": ">=1.8"
-  },
-  "peerDependenciesMeta": {
-    "react": { "optional": true },
-    "vue": { "optional": true },
-    "svelte": { "optional": true },
-    "solid-js": { "optional": true },
-    "typescript": { "optional": true }
+    "typescript": "^5.0.0"
   }
 }