@rogieking/figui3 9.0.9 → 9.0.11

package/fig-editor.js

@@ -495,6 +495,7 @@ figEditorDefineElement("fig-select-options", FigSelectOptions);
  * A dropdown-styled select.
  * @attr {string} variant - Visual style. Use `ghost` for a borderless control.
  * @attr {string} size - Control size. Use `large` for a 32px-tall control.
+ * @event optionfocus - Fires with the focused option value during open-menu keyboard navigation.
  */
 class FigSelect extends HTMLElement {
   #button = null;
@@ -1467,20 +1468,20 @@ class FigSelect extends HTMLElement {
       case "ArrowDown":
         e.preventDefault();
         this.#syncFocusedIndex();
-        this.#focusOptionAt(this.#focusedIndex + 1);
+        this.#focusOptionAt(this.#focusedIndex + 1, true);
         break;
       case "ArrowUp":
         e.preventDefault();
         this.#syncFocusedIndex();
-        this.#focusOptionAt(this.#focusedIndex - 1);
+        this.#focusOptionAt(this.#focusedIndex - 1, true);
         break;
       case "Home":
         e.preventDefault();
-        this.#focusOptionAt(0);
+        this.#focusOptionAt(0, true);
         break;
       case "End":
         e.preventDefault();
-        this.#focusOptionAt(options.length - 1);
+        this.#focusOptionAt(options.length - 1, true);
         break;
       case "Escape":
         e.preventDefault();
@@ -1529,12 +1530,23 @@ class FigSelect extends HTMLElement {
     this.#focusedIndex = index >= 0 ? index : this.#focusedIndex;
   }
 
-  #focusOptionAt(index) {
+  #focusOptionAt(index, emitEvent = false) {
     const options = this.#getEnabledOptions();
     if (!options.length) return;
     const next = ((index % options.length) + options.length) % options.length;
+    const option = options[next];
+    const changed = document.activeElement !== option;
     this.#focusedIndex = next;
-    options[next]?.focus();
+    option?.focus();
+    if (emitEvent && changed) {
+      this.dispatchEvent(
+        new CustomEvent("optionfocus", {
+          detail: this.#optionValue(option),
+          bubbles: true,
+          composed: true,
+        }),
+      );
+    }
   }
 
   #syncPopupWidth() {

package/fig.js

@@ -18464,6 +18464,12 @@ class FigChooser extends HTMLElement {
       }
     };
 
+    const onDragStart = (e) => {
+      if (this.#dragState?.active) {
+        e.preventDefault();
+      }
+    };
+
     this.#dragState = {
       active: false,
       didDrag: false,
@@ -18478,6 +18484,7 @@ class FigChooser extends HTMLElement {
       onPointerUp,
       onClick,
       onPointerUpCapture,
+      onDragStart,
     };
 
     this.addEventListener("pointerdown", onPointerDown);
@@ -18485,6 +18492,7 @@ class FigChooser extends HTMLElement {
     window.addEventListener("pointerup", onPointerUp);
     this.addEventListener("pointerup", onPointerUpCapture, true);
     this.addEventListener("click", onClick, true);
+    this.addEventListener("dragstart", onDragStart);
   }
 
   #teardownDrag() {
@@ -18498,6 +18506,7 @@ class FigChooser extends HTMLElement {
       true,
     );
     this.removeEventListener("click", this.#dragState.onClick, true);
+    this.removeEventListener("dragstart", this.#dragState.onDragStart);
     this.style.cursor = "";
     this.style.userSelect = "";
     this.#dragState = null;

package/package.json

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