ruby_ui 1.4.0 → 1.6.0

data/lib/ruby_ui/popover/popover_controller.js

@@ -19,13 +19,20 @@ export default class extends Controller {
     this.closeTimeout = null;
     this.cleanup = null;
     this.addEventListeners();
+    // openValue lives in the DOM, so a reconnect (frame swap, morph, moved element)
+    // arrives already open. Re-arm the parts that live on the controller instead of
+    // the markup — the keydown listener and the autoUpdate positioning.
+    if (this.openValue) this.showPopover();
   }
 
+  // Teardown that cannot fail comes first: resolving a target throws once the
+  // element is gone, and Stimulus swallows that, skipping the rest of disconnect.
   disconnect() {
-    this.removeEventListeners();
-    if (this.cleanup) {
-      this.cleanup();
-    }
+    clearTimeout(this.closeTimeout);
+    document.removeEventListener("keydown", this.handleKeydown);
+    document.removeEventListener("click", this.handleOutsideClick);
+    this.stopAutoUpdate();
+    this.removeElementEventListeners();
   }
 
   addEventListeners() {
@@ -40,68 +47,124 @@ export default class extends Controller {
     }
   }
 
-  removeEventListeners() {
-    this.triggerTarget.removeEventListener("mouseenter", this.handleMouseEnter);
-    this.triggerTarget.removeEventListener("mouseleave", this.handleMouseLeave);
-    this.contentTarget.removeEventListener("mouseenter", this.handleMouseEnter);
-    this.contentTarget.removeEventListener("mouseleave", this.handleMouseLeave);
-    this.triggerTarget.removeEventListener("click", this.handleClick);
-    document.removeEventListener("click", this.handleOutsideClick);
+  // Each target is guarded on its own: losing one of them must not strand the
+  // listeners attached to the other.
+  removeElementEventListeners() {
+    if (this.hasTriggerTarget) {
+      this.triggerTarget.removeEventListener("mouseenter", this.handleMouseEnter);
+      this.triggerTarget.removeEventListener("mouseleave", this.handleMouseLeave);
+      this.triggerTarget.removeEventListener("click", this.handleClick);
+    }
+
+    if (this.hasContentTarget) {
+      this.contentTarget.removeEventListener("mouseenter", this.handleMouseEnter);
+      this.contentTarget.removeEventListener("mouseleave", this.handleMouseLeave);
+    }
   }
 
   handleMouseEnter = () => {
     clearTimeout(this.closeTimeout);
-    this.openValue = true;
     this.showPopover();
   };
 
   handleMouseLeave = () => {
-    this.closeTimeout = setTimeout(() => {
-      this.openValue = false;
-      this.hidePopover();
-    }, 100);
+    this.closeTimeout = setTimeout(() => this.hidePopover(), 100);
   };
 
   handleClick = (event) => {
     event.stopPropagation();
-    this.openValue = !this.openValue;
-    this.openValue ? this.showPopover() : this.hidePopover();
+    this.openValue ? this.hidePopover() : this.showPopover();
   };
 
   handleOutsideClick = (event) => {
-    if (!this.element.contains(event.target) && this.openValue) {
-      this.openValue = false;
-      this.hidePopover();
-    }
+    if (this.element.contains(event.target)) return;
+    if (!this.openValue) return;
+
+    this.hidePopover();
   };
 
+  handleKeydown = (event) => {
+    if (event.key !== "Escape") return;
+    if (!this.openValue) return;
+
+    clearTimeout(this.closeTimeout);
+    this.hidePopover();
+  };
+
+  // openValue is set here rather than by the callers, so a guarded early return can
+  // never leave the DOM claiming the popover is open while nothing is wired up.
   showPopover() {
+    if (!this.hasTriggerTarget || !this.hasContentTarget) return;
+
+    this.openValue = true;
     this.contentTarget.classList.remove("hidden");
+    this.contentTarget.dataset.state = "open";
+    document.addEventListener("keydown", this.handleKeydown);
     this.updatePosition();
   }
 
+  // Same rule as disconnect(): release what is held outside the element first, so a
+  // missing content target cannot leave the keydown listener or autoUpdate running.
   hidePopover() {
+    this.openValue = false;
+    document.removeEventListener("keydown", this.handleKeydown);
+    this.stopAutoUpdate();
+
+    if (!this.hasContentTarget) return;
+
     this.contentTarget.classList.add("hidden");
-    if (this.cleanup) {
-      this.cleanup();
-    }
+    this.contentTarget.dataset.state = "closed";
   }
 
   updatePosition() {
-    if (this.cleanup) {
-      this.cleanup();
-    }
+    this.stopAutoUpdate();
+
+    // Hold the exact pair this run positions. A target can be detached or swapped
+    // while the controller stays connected, and the stale element must not be
+    // written to by an observer callback or an in-flight computePosition.
+    const trigger = this.triggerTarget;
+    const content = this.contentTarget;
+
+    // Deferred teardown is bound to this run's own handle, so a newer positioning
+    // run installed before the microtask drains is never torn down by an older one.
+    let stop = null;
+    const releaseThisRun = () => {
+      stop?.();
+      if (this.cleanup === stop) this.cleanup = null;
+    };
 
-    this.cleanup = autoUpdate(this.triggerTarget, this.contentTarget, () => {
-      computePosition(this.triggerTarget, this.contentTarget, {
+    stop = autoUpdate(trigger, content, () => {
+      if (!trigger.isConnected || !content.isConnected) {
+        // Release the observers instead of throwing on every scroll and resize.
+        // Deferred because autoUpdate runs this once synchronously, before the
+        // handle below has been assigned.
+        queueMicrotask(releaseThisRun);
+        return;
+      }
+
+      computePosition(trigger, content, {
         placement: this.optionsValue.placement || "bottom",
         middleware: [flip(), shift(), offset(8)],
-      }).then(({ x, y }) => {
-        Object.assign(this.contentTarget.style, {
+      }).then(({ x, y, placement }) => {
+        if (!content.isConnected) return;
+
+        Object.assign(content.style, {
           left: `${x}px`,
           top: `${y}px`,
         });
+        // flip() can resolve to the opposite side of the requested placement,
+        // so the directional slide-in classes must follow the resolved value.
+        content.dataset.side = placement.split("-")[0];
       });
     });
+
+    this.cleanup = stop;
+  }
+
+  stopAutoUpdate() {
+    if (!this.cleanup) return;
+
+    this.cleanup();
+    this.cleanup = null;
   }
 }

data/lib/ruby_ui/toast/toaster_controller.js

@@ -39,9 +39,13 @@ export default class extends Controller {
     dir: { type: String, default: "ltr" },
   }
 
-  connect() {
+  initialize() {
+    this._expanded = false
     this._heights = new Map()
     this._resizeObservers = new WeakMap()
+  }
+
+  connect() {
     this._expanded = this.expandValue
     this._listEl = this.element.querySelector("ol") || (this.element.tagName === "OL" ? this.element : null)
     this._registerGlobalApi()
@@ -59,6 +63,8 @@ export default class extends Controller {
     this._listEl.addEventListener("pointerenter", this._onPointerEnter)
     this._listEl.addEventListener("pointerleave", this._onPointerLeave)
     document.addEventListener("keydown", this._onKey)
+
+    this._reflow()
   }
 
   disconnect() {
@@ -67,9 +73,21 @@ export default class extends Controller {
     this._listEl?.removeEventListener("pointerenter", this._onPointerEnter)
     this._listEl?.removeEventListener("pointerleave", this._onPointerLeave)
     document.removeEventListener("keydown", this._onKey)
+    this._listEl = null
+  }
+
+  positionValueChanged(value) {
+    this.element.setAttribute("data-position", value)
+    this._reflow()
+  }
+
+  expandValueChanged(value) {
+    this._expanded = value
+    this._reflow()
   }
 
   toastTargetConnected(el) {
+    this._resizeObservers.get(el)?.disconnect()
     if (typeof ResizeObserver !== "undefined") {
       const ro = new ResizeObserver(() => {
         this._heights.set(el, el.offsetHeight)
@@ -90,13 +108,11 @@ export default class extends Controller {
   }
 
   _spawn(detail) {
+    if (!this._listEl) return null
     const variant = VARIANTS.includes(detail.variant) ? detail.variant : "default"
     const tpl = this._skeletonFor(variant)
     if (!tpl) return null
-    if (detail.position) {
-      this.element.setAttribute("data-position", detail.position)
-      this.positionValue = detail.position
-    }
+    if (detail.position) this.positionValue = detail.position
     const node = tpl.content.firstElementChild.cloneNode(true)
 
     node.id = detail.id || `toast-${this._uuid()}`
@@ -151,7 +167,7 @@ export default class extends Controller {
       )
       return
     }
-    const el = this._listEl.querySelector(`#${CSS.escape(id)}`)
+    const el = this._listEl?.querySelector(`#${CSS.escape(id)}`)
     if (el) el.dispatchEvent(new CustomEvent("ruby-ui:toast:force-dismiss", { bubbles: true }))
   }
 
@@ -243,7 +259,7 @@ export default class extends Controller {
     if (wantCtrl !== e.ctrlKey) return
     if (wantMeta !== e.metaKey) return
     e.preventDefault()
-    const first = this._listEl.firstElementChild
+    const first = this._listEl?.firstElementChild
     first?.focus()
   }
 
@@ -278,7 +294,7 @@ export default class extends Controller {
   }
 
   _mutate(id, variant, text) {
-    const el = this._listEl.querySelector(`#${CSS.escape(id)}`)
+    const el = this._listEl?.querySelector(`#${CSS.escape(id)}`)
     if (!el) return
     el.dataset.variant = variant
     el.setAttribute("role", variant === "error" ? "alert" : "status")

data/lib/ruby_ui.rb

@@ -3,5 +3,5 @@
 require "date"
 
 module RubyUI
-  VERSION = "1.4.0"
+  VERSION = "1.6.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: ruby_ui
 version: !ruby/object:Gem::Version
-  version: 1.4.0
+  version: 1.6.0
 platform: ruby
 authors:
 - George Kettle
@@ -159,6 +159,11 @@ files:
 - lib/ruby_ui/breadcrumb/breadcrumb_list.rb
 - lib/ruby_ui/breadcrumb/breadcrumb_page.rb
 - lib/ruby_ui/breadcrumb/breadcrumb_separator.rb
+- lib/ruby_ui/bubble/bubble.rb
+- lib/ruby_ui/bubble/bubble_content.rb
+- lib/ruby_ui/bubble/bubble_docs.rb
+- lib/ruby_ui/bubble/bubble_group.rb
+- lib/ruby_ui/bubble/bubble_reactions.rb
 - lib/ruby_ui/button/button.rb
 - lib/ruby_ui/button/button_docs.rb
 - lib/ruby_ui/calendar/calendar.rb
@@ -291,6 +296,13 @@ files:
 - lib/ruby_ui/dropdown_menu/dropdown_menu_label.rb
 - lib/ruby_ui/dropdown_menu/dropdown_menu_separator.rb
 - lib/ruby_ui/dropdown_menu/dropdown_menu_trigger.rb
+- lib/ruby_ui/empty/empty.rb
+- lib/ruby_ui/empty/empty_content.rb
+- lib/ruby_ui/empty/empty_description.rb
+- lib/ruby_ui/empty/empty_docs.rb
+- lib/ruby_ui/empty/empty_header.rb
+- lib/ruby_ui/empty/empty_media.rb
+- lib/ruby_ui/empty/empty_title.rb
 - lib/ruby_ui/form/form.rb
 - lib/ruby_ui/form/form_docs.rb
 - lib/ruby_ui/form/form_field.rb
@@ -305,11 +317,32 @@ files:
 - lib/ruby_ui/hover_card/hover_card_trigger.rb
 - lib/ruby_ui/input/input.rb
 - lib/ruby_ui/input/input_docs.rb
+- lib/ruby_ui/input_otp/input_otp.rb
+- lib/ruby_ui/input_otp/input_otp_controller.js
+- lib/ruby_ui/input_otp/input_otp_docs.rb
+- lib/ruby_ui/input_otp/input_otp_group.rb
+- lib/ruby_ui/input_otp/input_otp_separator.rb
+- lib/ruby_ui/input_otp/input_otp_slot.rb
 - lib/ruby_ui/link/link.rb
 - lib/ruby_ui/link/link_docs.rb
 - lib/ruby_ui/masked_input/masked_input.rb
 - lib/ruby_ui/masked_input/masked_input_controller.js
 - lib/ruby_ui/masked_input/masked_input_docs.rb
+- lib/ruby_ui/message/message.rb
+- lib/ruby_ui/message/message_avatar.rb
+- lib/ruby_ui/message/message_content.rb
+- lib/ruby_ui/message/message_docs.rb
+- lib/ruby_ui/message/message_footer.rb
+- lib/ruby_ui/message/message_group.rb
+- lib/ruby_ui/message/message_header.rb
+- lib/ruby_ui/message_scroller/message_scroller.rb
+- lib/ruby_ui/message_scroller/message_scroller_button.rb
+- lib/ruby_ui/message_scroller/message_scroller_content.rb
+- lib/ruby_ui/message_scroller/message_scroller_controller.js
+- lib/ruby_ui/message_scroller/message_scroller_docs.rb
+- lib/ruby_ui/message_scroller/message_scroller_item.rb
+- lib/ruby_ui/message_scroller/message_scroller_provider.rb
+- lib/ruby_ui/message_scroller/message_scroller_viewport.rb
 - lib/ruby_ui/native_select/native_select.rb
 - lib/ruby_ui/native_select/native_select_docs.rb
 - lib/ruby_ui/native_select/native_select_group.rb