@rogieking/figui3 11.6.6 → 11.6.8

package/fig.js

@@ -942,6 +942,13 @@ class FigDropdown extends HTMLElement {
   #boundHandleSelectInput;
   #boundHandleSelectChange;
   #boundHandleSelectKeydown;
+  #boundHandleSelectPointerDown;
+  #boundHandleSelectBlur;
+  #openButton = null;
+  #openButtonWasSelected = false;
+  #openSelectWasSelected = false;
+  #openStateActive = false;
+  #openStateFrame = 0;
 
   get label() {
     return this.#label;
@@ -958,6 +965,9 @@ class FigDropdown extends HTMLElement {
     this.#boundHandleSelectInput = this.#handleSelectInput.bind(this);
     this.#boundHandleSelectChange = this.#handleSelectChange.bind(this);
     this.#boundHandleSelectKeydown = this.#handleSelectKeydown.bind(this);
+    this.#boundHandleSelectPointerDown =
+      this.#handleSelectPointerDown.bind(this);
+    this.#boundHandleSelectBlur = this.#clearOpenState.bind(this);
     this.#boundSlotChange = this.slotChange.bind(this);
   }
 
@@ -965,6 +975,87 @@ class FigDropdown extends HTMLElement {
     this.select.addEventListener("input", this.#boundHandleSelectInput);
     this.select.addEventListener("change", this.#boundHandleSelectChange);
     this.select.addEventListener("keydown", this.#boundHandleSelectKeydown);
+    this.select.addEventListener(
+      "pointerdown",
+      this.#boundHandleSelectPointerDown,
+    );
+    this.select.addEventListener("blur", this.#boundHandleSelectBlur);
+  }
+
+  #markOpenState() {
+    const button = this.closest('fig-button[type="select"]');
+    if (this.#openStateActive && this.#openButton !== button) {
+      this.#clearOpenState();
+    }
+    if (!this.#openStateActive) {
+      this.#openSelectWasSelected =
+        this.select.hasAttribute("selected") &&
+        this.select.getAttribute("selected") !== "false";
+      this.#openStateActive = true;
+    }
+    this.select.setAttribute("selected", "");
+    if (!button) return;
+    if (this.#openButton !== button) {
+      this.#openButton = button;
+      this.#openButtonWasSelected =
+        button.hasAttribute("selected") &&
+        button.getAttribute("selected") !== "false";
+    }
+    button.setAttribute("selected", "");
+  }
+
+  #clearOpenState() {
+    if (this.#openStateFrame) {
+      cancelAnimationFrame(this.#openStateFrame);
+      this.#openStateFrame = 0;
+    }
+    if (this.#openButton && !this.#openButtonWasSelected) {
+      this.#openButton.removeAttribute("selected");
+    }
+    if (this.#openStateActive && !this.#openSelectWasSelected) {
+      this.select.removeAttribute("selected");
+    }
+    this.#openButton = null;
+    this.#openButtonWasSelected = false;
+    this.#openSelectWasSelected = false;
+    this.#openStateActive = false;
+  }
+
+  #watchOpenState() {
+    if (this.#openStateFrame) cancelAnimationFrame(this.#openStateFrame);
+    let attempts = 0;
+    let sawOpen = false;
+    const check = () => {
+      this.#openStateFrame = 0;
+      if (!this.isConnected) {
+        this.#clearOpenState();
+        return;
+      }
+      let open = false;
+      try {
+        open = this.select.matches(":open");
+      } catch {
+        return;
+      }
+      if (open) sawOpen = true;
+      if (sawOpen && !open) {
+        this.#clearOpenState();
+        return;
+      }
+      attempts += 1;
+      if (sawOpen || attempts < 4) {
+        this.#openStateFrame = requestAnimationFrame(check);
+      } else {
+        this.#clearOpenState();
+      }
+    };
+    this.#openStateFrame = requestAnimationFrame(check);
+  }
+
+  #handleSelectPointerDown(e) {
+    if (e.button !== 0 || this.select.disabled) return;
+    this.#markOpenState();
+    this.#watchOpenState();
   }
 
   #hasPersistentControl(optionEl) {
@@ -1081,6 +1172,7 @@ class FigDropdown extends HTMLElement {
       this.#keepPickerOpen();
       return;
     }
+    this.#clearOpenState();
 
     // Get the value before resetting (use stored value for dropdown type)
     const selectedValue =
@@ -1099,16 +1191,19 @@ class FigDropdown extends HTMLElement {
   }
 
   #handleSelectKeydown(e) {
-    if (this.closest('fig-button[type="select"]')) return;
     if (e.key !== "Enter" || e.defaultPrevented) return;
     if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
     if (this.select.disabled || this.select.multiple) return;
+    this.#markOpenState();
+    this.#watchOpenState();
+    if (this.closest('fig-button[type="select"]')) return;
     if (typeof this.select.showPicker !== "function") return;
     e.preventDefault();
     try {
       this.select.showPicker();
     } catch {
       // showPicker can be unavailable during non-user-initiated key events.
+      this.#clearOpenState();
     }
   }
 
@@ -1169,6 +1264,12 @@ class FigDropdown extends HTMLElement {
     this.select.removeEventListener("input", this.#boundHandleSelectInput);
     this.select.removeEventListener("change", this.#boundHandleSelectChange);
     this.select.removeEventListener("keydown", this.#boundHandleSelectKeydown);
+    this.select.removeEventListener(
+      "pointerdown",
+      this.#boundHandleSelectPointerDown,
+    );
+    this.select.removeEventListener("blur", this.#boundHandleSelectBlur);
+    this.#clearOpenState();
   }
 }
 
@@ -14977,6 +15078,7 @@ class FigMediaControls extends HTMLElement {
     if (!this.#playBtn) return;
     const playing = this.playing;
     this.#playBtn.setAttribute("aria-label", playing ? "Pause" : "Play");
+    this.#playBtn.toggleAttribute("selected", playing);
     this.#playTooltip?.setAttribute("text", playing ? "Pause" : "Play");
     const icon = this.#playBtn.querySelector("fig-icon");
     if (icon) {
@@ -15728,9 +15830,10 @@ const FIG_INPUT_FILE_VIDEO_EXTENSIONS = [
  * @attr {string} accepts - Native file chooser filter.
  * @attr {boolean} preview - Preview supported files or show their media-specific icon.
  * @attr {string} label - Upload button label. Defaults by known file type.
+ * @attr {boolean} remove - Show the remove button for a selected file. Defaults to true.
  */
 class FigInputFile extends HTMLElement {
-  static observedAttributes = ["accepts", "preview", "label", "disabled", "multiple", "variant", "url", "filename"];
+  static observedAttributes = ["accepts", "preview", "label", "disabled", "multiple", "variant", "url", "filename", "remove"];
 
   #fileInput = null;
   #filenameEl = null;
@@ -15783,6 +15886,10 @@ class FigInputFile extends HTMLElement {
     );
   }
 
+  get #removeEnabled() {
+    return this.getAttribute("remove") !== "false";
+  }
+
   get #largePreviewEnabled() {
     return this.getAttribute("preview")?.toLowerCase() === "large";
   }
@@ -16442,18 +16549,20 @@ class FigInputFile extends HTMLElement {
         this.appendChild(this.#uploadBtn);
       }
 
-      const clearTooltip = document.createElement("fig-tooltip");
-      clearTooltip.setAttribute("text", "Remove");
-      this.#clearBtn = document.createElement("fig-button");
-      this.#clearBtn.setAttribute("variant", variant === "overlay" ? "overlay" : "ghost");
-      this.#clearBtn.setAttribute("icon", "true");
-      this.#clearBtn.setAttribute("aria-label", "Remove");
-      this.#clearBtn.className = "fig-input-file-clear";
-      if (disabled) this.#clearBtn.setAttribute("disabled", "");
-      this.#clearBtn.replaceChildren(createFigIcon("minus"));
-      this.#clearBtn.addEventListener("click", this.#onClear);
-      clearTooltip.appendChild(this.#clearBtn);
-      this.appendChild(clearTooltip);
+      if (this.#removeEnabled) {
+        const clearTooltip = document.createElement("fig-tooltip");
+        clearTooltip.setAttribute("text", "Remove");
+        this.#clearBtn = document.createElement("fig-button");
+        this.#clearBtn.setAttribute("variant", variant === "overlay" ? "overlay" : "ghost");
+        this.#clearBtn.setAttribute("icon", "true");
+        this.#clearBtn.setAttribute("aria-label", "Remove");
+        this.#clearBtn.className = "fig-input-file-clear";
+        if (disabled) this.#clearBtn.setAttribute("disabled", "");
+        this.#clearBtn.replaceChildren(createFigIcon("minus"));
+        this.#clearBtn.addEventListener("click", this.#onClear);
+        clearTooltip.appendChild(this.#clearBtn);
+        this.appendChild(clearTooltip);
+      }
       if (showsAudioPreview) this.#renderAudioPreview();
     } else {
       const tooltipText = accepts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "11.6.6",
+  "version": "11.6.8",
   "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",