playbook_ui 16.2.0.pre.alpha.play284314650 → 16.2.0.pre.alpha.play284314659

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8cb000fca3484843059f2931860f4a6b637eb926c4d1342fad44896c5dd59f0e
-  data.tar.gz: 22905440ea6c5d23f981a0d9176a02ac355fe6f96b2955398f1b9c128fb80c78
+  metadata.gz: f12b618cfe899125e5b51f0cb0615e124d3df5a1396892c3114d4c82ce26703f
+  data.tar.gz: 5dc0bba31972163cb2c9c8b7ee23f25346f104d948fe8d863c3f7761c2984bb1
 SHA512:
-  metadata.gz: c9aca337d39326590c916cd62015fdc02dea42c9c7454e60e3505ae71169a19827f07c46d1ed29582cddd255442bcb20ddf759b944761d523201d7e267327456
-  data.tar.gz: 8ba322dfe0e345300ec7efab9fa19c4660754b94768e1f5e7c14a8d79efa3298d338343eb501d5836a3712fd37c0ea64e9947e0e52347eae9cc7f4d7cce1c73c
+  metadata.gz: ac99b0e45fa7fcec7af01e2d0d788a2052f69fc8bb2200b0bf7c8705ee0f94fecb253abd24cd987dc8d687c4b0e41dacd230794462040f811fa2cc2f6a94e5d3
+  data.tar.gz: 36c22534c654f7121e1b4e2652a70e39a06f89ab41d0795634db197a56b4b1490b13d62acfe3252d24ed250786ed43da7bdd943701b184eb6af3977835a446ec

data/app/pb_kits/playbook/pb_collapsible/index.js

@@ -11,9 +11,11 @@ export default class PbCollapsible extends PbEnhancedElement {
   }
 
   connect() {
-    this.element.addEventListener('click', () => {
+    this.clickHandler = () => {
       this.toggleElement(this.target)
-    })
+    }
+    this.element.addEventListener('click', this.clickHandler)
+    
      // Check the initial state of the collapsible content and set the arrow accordingly
      if (this.target.classList.contains('is-visible')) {
       this.displayUpArrow()
@@ -21,9 +23,19 @@ export default class PbCollapsible extends PbEnhancedElement {
       this.displayDownArrow()
     }
     // Listen for a custom event to toggle the collapsible
-    document.addEventListener(`${this.target.id}`, () => {
+    this.customEventHandler = () => {
       this.toggleElement(this.target)
-    })
+    }
+    document.addEventListener(`${this.target.id}`, this.customEventHandler)
+  }
+
+  disconnect() {
+    if (this.clickHandler) {
+      this.element.removeEventListener('click', this.clickHandler)
+    }
+    if (this.customEventHandler && this.target) {
+      document.removeEventListener(`${this.target.id}`, this.customEventHandler)
+    }
   }
 
   get target() {

data/app/pb_kits/playbook/pb_dialog/index.js

@@ -8,8 +8,16 @@ export default class PbDialog extends PbEnhancedElement {
   }
 
   connect() {
-    window.addEventListener("DOMContentLoaded", () => this.setupDialog())
-    window.addEventListener("turbo:frame-load", () => this.setupDialog())
+    // Store references to this instance's specific elements
+    this.dialogElement = this.element.querySelector(".pb_dialog_rails")
+    this.dialogId = this.dialogElement?.id
+    this.managedTriggers = new Set()
+    
+    this.domContentLoadedHandler = () => this.setupDialog()
+    this.turboFrameLoadHandler = () => this.setupDialog()
+    
+    window.addEventListener("DOMContentLoaded", this.domContentLoadedHandler)
+    window.addEventListener("turbo:frame-load", this.turboFrameLoadHandler)
 
     // Code for custom_event_type setup (can take multiple events in a string separated by commas)
     const customEventTypeString = this.element.dataset.customEventType
@@ -24,11 +32,38 @@ export default class PbDialog extends PbEnhancedElement {
   }
 
   disconnect() {
+    // Clean up window event listeners
+    if (this.domContentLoadedHandler) {
+      window.removeEventListener("DOMContentLoaded", this.domContentLoadedHandler)
+    }
+    if (this.turboFrameLoadHandler) {
+      window.removeEventListener("turbo:frame-load", this.turboFrameLoadHandler)
+    }
+
+    // Clean up custom event listeners
     if (this.customEventTypes && Array.isArray(this.customEventTypes)) {
       this.customEventTypes.forEach(eventType => {
         window.removeEventListener(eventType, this.handleCustomEvent)
       })
     }
+
+    // Clean up only the triggers that this instance managed
+    this.managedTriggers.forEach((trigger) => {
+      if (trigger._openDialogClickHandler) {
+        trigger.removeEventListener("click", trigger._openDialogClickHandler)
+        delete trigger._openDialogClickHandler
+      }
+      if (trigger._closeDialogClickHandler) {
+        trigger.removeEventListener("click", trigger._closeDialogClickHandler)
+        delete trigger._closeDialogClickHandler
+      }
+    })
+
+    // Clean up this dialog's outside click handler
+    if (this.dialogElement && this.dialogElement._outsideClickHandler) {
+      this.dialogElement.removeEventListener("mousedown", this.dialogElement._outsideClickHandler)
+      delete this.dialogElement._outsideClickHandler
+    }
   }
 
   handleCustomEvent = (event) => {
@@ -88,9 +123,12 @@ export default class PbDialog extends PbEnhancedElement {
   }
 
   setupDialog() {
-    const openTrigger = document.querySelectorAll("[data-open-dialog]");
-    const closeTrigger = document.querySelectorAll("[data-close-dialog]");
-    const dialogs = document.querySelectorAll(".pb_dialog_rails")
+    // Only set up triggers and dialogs that belong to this instance
+    if (!this.dialogId) return
+    
+    const openTrigger = document.querySelectorAll(`[data-open-dialog="${this.dialogId}"]`);
+    const closeTrigger = document.querySelectorAll(`[data-close-dialog="${this.dialogId}"]`);
+    const dialogs = this.dialogElement ? [this.dialogElement] : []
 
     const loadingButton = document.querySelector('[data-disable-with="Loading"]');
     if (loadingButton && !loadingButton.dataset.listenerAttached) {
@@ -126,6 +164,7 @@ export default class PbDialog extends PbEnhancedElement {
       };
 
       open.addEventListener("click", open._openDialogClickHandler)
+      this.managedTriggers.add(open)
     });
 
     closeTrigger.forEach((close) => {
@@ -139,6 +178,7 @@ export default class PbDialog extends PbEnhancedElement {
       };
 
       close.addEventListener("click", close._closeDialogClickHandler)
+      this.managedTriggers.add(close)
     });
 
     // Close dialog box on outside click

data/app/pb_kits/playbook/pb_dropdown/index.js

@@ -54,14 +54,66 @@ export default class PbDropdown extends PbEnhancedElement {
     this.isClearable = this.element.dataset.pbDropdownClearable !== "false";
     if (this.clearBtn) {
       this.clearBtn.style.display = "none";
-      this.clearBtn.addEventListener("click", (e) => {
+      this.clearBtnHandler = (e) => {
         e.stopPropagation();
         this.clearSelection();
-      });
+      }
+      this.clearBtn.addEventListener("click", this.clearBtnHandler);
     }
     this.updateClearButton();
   }
 
+  disconnect() {
+    // Clean up stored instance reference
+    if (this.element._pbDropdownInstance === this) {
+      delete this.element._pbDropdownInstance
+    }
+
+    // Clean up keyboard handler
+    if (this.keyboardHandler && typeof this.keyboardHandler.disconnect === 'function') {
+      this.keyboardHandler.disconnect()
+    }
+
+    // Clean up custom trigger click listener
+    if (this.customTriggerClickHandler) {
+      const customTrigger = this.element.querySelector(CUSTOM_DISPLAY_SELECTOR) || this.element
+      customTrigger.removeEventListener('click', this.customTriggerClickHandler)
+    }
+
+    // Clean up target click listener
+    if (this.handleOptionClickBound) {
+      this.target.removeEventListener('click', this.handleOptionClickBound)
+    }
+
+    // Clean up document click listener
+    if (this.handleDocumentClickBound) {
+      document.removeEventListener('click', this.handleDocumentClickBound, true)
+    }
+
+    // Clean up search bar listener
+    if (this.searchBar && this.searchBarHandler) {
+      this.searchBar.removeEventListener('input', this.searchBarHandler)
+    }
+
+    // Clean up search input listeners
+    if (this.searchInput) {
+      if (this.searchInputFocusHandler) {
+        const trigger = this.element.querySelector(TRIGGER_SELECTOR)
+        if (trigger) {
+          trigger.removeEventListener('click', this.searchInputFocusHandler)
+        }
+      }
+      if (this.searchInputHandler) {
+        this.searchInput.removeEventListener('input', this.searchInputHandler)
+      }
+    }
+
+    // Clean up clear button listener
+    if (this.clearBtn && this.clearBtnHandler) {
+      this.clearBtn.removeEventListener('click', this.clearBtnHandler)
+    }
+  }
+
   updateClearButton() {
     if (!this.clearBtn) return;
     if (!this.isClearable) {
@@ -78,7 +130,7 @@ export default class PbDropdown extends PbEnhancedElement {
   bindEventListeners() {
     const customTrigger =
       this.element.querySelector(CUSTOM_DISPLAY_SELECTOR) || this.element;
-    customTrigger.addEventListener("click", (e) => {
+    this.customTriggerClickHandler = (e) => {
       const label = e.target.closest(LABEL_SELECTOR);
       if (label && label.htmlFor) {
         const trigger = this.element.querySelector(
@@ -89,12 +141,16 @@ export default class PbDropdown extends PbEnhancedElement {
         }
       }
       this.toggleElement(this.target);
-    });
+    }
+    customTrigger.addEventListener("click", this.customTriggerClickHandler);
 
-    this.target.addEventListener("click", this.handleOptionClick.bind(this));
+    this.handleOptionClickBound = this.handleOptionClick.bind(this)
+    this.target.addEventListener("click", this.handleOptionClickBound);
+    
+    this.handleDocumentClickBound = this.handleDocumentClick.bind(this)
     document.addEventListener(
       "click",
-      this.handleDocumentClick.bind(this),
+      this.handleDocumentClickBound,
       true,
     );
   }
@@ -103,9 +159,8 @@ export default class PbDropdown extends PbEnhancedElement {
     this.searchBar = this.element.querySelector(SEARCH_BAR_SELECTOR);
     if (!this.searchBar) return;
 
-    this.searchBar.addEventListener("input", (e) =>
-      this.handleSearch(e.target.value),
-    );
+    this.searchBarHandler = (e) => this.handleSearch(e.target.value)
+    this.searchBar.addEventListener('input', this.searchBarHandler);
   }
 
   bindSearchInput() {
@@ -113,14 +168,14 @@ export default class PbDropdown extends PbEnhancedElement {
     if (!this.searchInput) return;
 
     // Focus the input when anyone clicks the wrapper
+    this.searchInputFocusHandler = () => this.searchInput.focus()
     this.element
       .querySelector(TRIGGER_SELECTOR)
-      ?.addEventListener("click", () => this.searchInput.focus());
+      ?.addEventListener('click', this.searchInputFocusHandler);
 
     // Live filter
-    this.searchInput.addEventListener("input", (e) =>
-      this.handleSearch(e.target.value),
-    );
+    this.searchInputHandler = (e) => this.handleSearch(e.target.value)
+    this.searchInput.addEventListener('input', this.searchInputHandler);
   }
 
   adjustDropdownHeight() {

data/app/pb_kits/playbook/pb_dropdown/keyboard_accessibility.js

@@ -12,19 +12,35 @@ export class PbDropdownKeyboard {
     this.searchInput = this.dropdownElement.querySelector(
       SEARCH_INPUT_SELECTOR
     );
+    // Store bound handlers for cleanup
+    this.handleKeyDownBound = this.handleKeyDown.bind(this);
+    this.handleSearchInputBound = () => this.openDropdownIfClosed();
     this.init();
   }
 
   init() {
     this.dropdownElement.addEventListener(
       "keydown",
-      this.handleKeyDown.bind(this)
+      this.handleKeyDownBound
     );
     if (this.searchInput) {
-      this.searchInput.addEventListener("input", () =>
-        this.openDropdownIfClosed()
+      this.searchInput.addEventListener("input", this.handleSearchInputBound);
+    }
+  }
+
+  disconnect() {
+    // Remove keydown listener
+    if (this.dropdownElement && this.handleKeyDownBound) {
+      this.dropdownElement.removeEventListener(
+        "keydown",
+        this.handleKeyDownBound
       );
     }
+    
+    // Remove search input listener
+    if (this.searchInput && this.handleSearchInputBound) {
+      this.searchInput.removeEventListener("input", this.handleSearchInputBound);
+    }
   }
 
   getVisibleOptions() {

data/app/pb_kits/playbook/pb_enhanced_element/element_observer.ts

@@ -23,7 +23,7 @@ export default class ElementObserver {
   }
 
   stop(): void {
-    this.mutationObserverdisconnect()
+    this.mutationObserver.disconnect()
   }
 
   catchup(): void {

data/app/pb_kits/playbook/pb_enhanced_element/index.ts

@@ -50,6 +50,7 @@ export default class PbEnhancedElement {
     const enhansedElement = this.elements.get(element)
     enhansedElement.disconnect()
     this.elements.delete(element)
+    delete element._pbEnhanced
   }
 
   static start(): void {
@@ -57,7 +58,7 @@ export default class PbEnhancedElement {
   }
 
   static stop(): void {
-    this.mutationObserver.stop()
+    this.observer.stop()
   }
 
   connect(): void {

data/app/pb_kits/playbook/pb_kit_registry/index.ts

@@ -0,0 +1,180 @@
+// eslint-disable-next-line
+// @ts-nocheck
+import PbEnhancedElement from "../pb_enhanced_element";
+
+type KitClass = typeof PbEnhancedElement;
+
+class PbKitRegistry {
+  private static instance: PbKitRegistry;
+
+  // array to avoid overwriting if multiple kits share a selector
+  private kits: Map<string, KitClass[]> = new Map();
+
+  private mutationObserver: MutationObserver | null = null;
+  private initialized = false;
+
+  // rAF batching to reduce jank during heavy DOM churn
+  private queued = false;
+  private pendingMutations: MutationRecord[] = [];
+
+  static getInstance(): PbKitRegistry {
+    if (!PbKitRegistry.instance) {
+      PbKitRegistry.instance = new PbKitRegistry();
+    }
+    return PbKitRegistry.instance;
+  }
+
+  register(kit: KitClass): void {
+    const selector = kit.selector;
+    if (!selector) {
+      console.warn("[PbKitRegistry] Kit missing selector:", kit.name);
+      return;
+    }
+
+    const list = this.kits.get(selector) || [];
+    list.push(kit);
+    this.kits.set(selector, list);
+  }
+
+  start(): void {
+    if (this.initialized) return;
+    this.initialized = true;
+
+    const target = document.documentElement || document;
+
+    // Single MutationObserver for ALL kits
+    // attributes OFF
+    this.mutationObserver = new MutationObserver((muts) => this.onMutations(muts));
+
+    this.mutationObserver.observe(target, {
+      childList: true,
+      subtree: true,
+      // attributes: false by omission
+    });
+
+    // Initial scan of document
+    this.scan(document);
+  }
+
+  stop(): void {
+    if (!this.initialized) return;
+
+    this.mutationObserver?.disconnect();
+    this.mutationObserver = null;
+
+    // Disconnect all kit instances safely (snapshot keys first)
+    this.kits.forEach((kitsForSelector) => {
+      kitsForSelector.forEach((kit) => {
+        if (!kit.elements) return;
+        const els = Array.from(kit.elements.keys());
+        els.forEach((el) => kit.removeMatch(el));
+      });
+    });
+
+    this.pendingMutations = [];
+    this.queued = false;
+    this.initialized = false;
+  }
+
+  // ---- Mutation batching ----
+
+  private onMutations(muts: MutationRecord[]): void {
+    this.pendingMutations.push(...muts);
+
+    if (this.queued) return;
+    this.queued = true;
+
+    requestAnimationFrame(() => {
+      this.queued = false;
+      const batch = this.pendingMutations;
+      this.pendingMutations = [];
+      this.processMutations(batch);
+    });
+  }
+
+  private processMutations(mutations: MutationRecord[]): void {
+    // We only care about added nodes here.
+    // Removals handled by cleanupDisconnected() (no selector queries on removed subtrees)
+    const addedRoots: Element[] = [];
+
+    for (const mutation of mutations) {
+      if (mutation.type !== "childList") continue;
+
+      mutation.addedNodes.forEach((node) => {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+          addedRoots.push(node as Element);
+        }
+      });
+    }
+
+    // Enhance anything newly inserted
+    if (addedRoots.length) {
+      for (const root of addedRoots) {
+        this.scan(root);
+      }
+    }
+
+    // Handle removals cheaply: only look at already-enhanced elements
+    this.cleanupDisconnected();
+  }
+
+  // ---- Scanning / enhancing ----
+
+  private scan(root: ParentNode): void {
+    // For each selector, query within root once and attach all kits registered to it
+    this.kits.forEach((kitsForSelector, selector) => {
+      let matches: NodeListOf<Element>;
+      try {
+        // querySelectorAll doesn’t include root itself, so we handle that below too
+        matches = (root as any).querySelectorAll
+          ? (root as any).querySelectorAll(selector)
+          : document.querySelectorAll(selector);
+      } catch (error) {
+        console.debug(`[PbKitRegistry] Invalid selector "${selector}"`, error);
+        return;
+      }
+
+      if (matches && matches.length) {
+        matches.forEach((el) => {
+          kitsForSelector.forEach((kit) => kit.addMatch(el));
+        });
+      }
+
+      // Include root itself if it matches
+      if ((root as any).matches?.(selector)) {
+        kitsForSelector.forEach((kit) => kit.addMatch(root as any));
+      }
+    });
+  }
+
+  // No selector queries on removals
+  // We just remove instances whose elements are no longer in the DOM
+  private cleanupDisconnected(): void {
+    this.kits.forEach((kitsForSelector) => {
+      kitsForSelector.forEach((kit) => {
+        if (!kit.elements) return;
+
+        // Snapshot keys to avoid mutate-while-iterating
+        const els = Array.from(kit.elements.keys());
+        for (const el of els) {
+          if (!el.isConnected) {
+            kit.removeMatch(el);
+          }
+        }
+      });
+    });
+  }
+
+  // Debug helpers
+  getRegisteredSelectors(): string[] {
+    return Array.from(this.kits.keys());
+  }
+
+  // Optional: manually rescan a subtree (useful if some page toggles data-* after insertion)
+  rescan(root: ParentNode = document): void {
+    if (!this.initialized) return;
+    this.scan(root);
+  }
+}
+
+export default PbKitRegistry.getInstance();

data/app/pb_kits/playbook/pb_tooltip/index.js

@@ -11,11 +11,14 @@ export default class PbTooltip extends PbEnhancedElement {
   }
 
   connect() {
+    this.triggerHandlers = new Map()
+    
     if (this.tooltipInteraction) {
-      document.addEventListener('mousemove', (e) => {
+      this.mouseMoveHandler = (e) => {
         this.lastMouseX = e.clientX
         this.lastMouseY = e.clientY
-      })
+      }
+      document.addEventListener('mousemove', this.mouseMoveHandler)
     }
     
     this.triggerElements.forEach((trigger) => {
@@ -23,7 +26,7 @@ export default class PbTooltip extends PbEnhancedElement {
       const interactionEnabled = this.tooltipInteraction
 
       if (method === 'click') {
-        trigger.addEventListener('click', (e) => {
+        const clickHandler = (e) => {
           if (this.useClickToOpen) {
             e.preventDefault()
             if (this.isTooltipVisible()) {
@@ -34,10 +37,12 @@ export default class PbTooltip extends PbEnhancedElement {
           } else {
             this.showTooltip(trigger)
           }
-        })
+        }
+        trigger.addEventListener('click', clickHandler)
+        this.triggerHandlers.set(trigger, { click: clickHandler })
       } else {
         if (!this.useClickToOpen) {
-          trigger.addEventListener('mouseenter', () => {
+          const mouseenterHandler = () => {
             clearSafeZoneListener(this)
             clearTimeout(this.mouseleaveTimeout)
             this.currentTrigger = trigger
@@ -48,9 +53,9 @@ export default class PbTooltip extends PbEnhancedElement {
                 this.checkCloseTooltip(trigger)
               }
             }, delayOpen)
-          })
+          }
 
-          trigger.addEventListener('mouseleave', () => {
+          const mouseleaveHandler = () => {
             clearTimeout(this.mouseenterTimeout)
             if (this.delayClose) {
               const delayClose = parseInt(this.delayClose)
@@ -68,22 +73,62 @@ export default class PbTooltip extends PbEnhancedElement {
                 this.hideTooltip()
               }
             }
-          })
+          }
 
-          if (interactionEnabled) {
-            this.tooltip.addEventListener('mouseenter', () => {
-              clearSafeZoneListener(this)
-            })
+          trigger.addEventListener('mouseenter', mouseenterHandler)
+          trigger.addEventListener('mouseleave', mouseleaveHandler)
+          this.triggerHandlers.set(trigger, { mouseenter: mouseenterHandler, mouseleave: mouseleaveHandler })
 
-            this.tooltip.addEventListener('mouseleave', () => {
-              this.attachSafeZoneListener()
-            })
+          if (interactionEnabled) {
+            if (!this.tooltipMouseenterHandler) {
+              this.tooltipMouseenterHandler = () => {
+                clearSafeZoneListener(this)
+              }
+              this.tooltipMouseleaveHandler = () => {
+                this.attachSafeZoneListener()
+              }
+              this.tooltip.addEventListener('mouseenter', this.tooltipMouseenterHandler)
+              this.tooltip.addEventListener('mouseleave', this.tooltipMouseleaveHandler)
+            }
           }
         }
       }
     })
   }
 
+  disconnect() {
+    // Clean up timers
+    clearTimeout(this.mouseenterTimeout)
+    clearTimeout(this.mouseleaveTimeout)
+    clearTimeout(this.autoHideTimeout)
+    clearSafeZoneListener(this)
+
+    // Clean up autoUpdate
+    if (this.cleanup) {
+      this.cleanup()
+      this.cleanup = null
+    }
+
+    // Clean up document mousemove listener
+    if (this.mouseMoveHandler) {
+      document.removeEventListener('mousemove', this.mouseMoveHandler)
+    }
+
+    // Clean up trigger element listeners
+    this.triggerHandlers.forEach((handlers, trigger) => {
+      Object.entries(handlers).forEach(([event, handler]) => {
+        trigger.removeEventListener(event, handler)
+      })
+    })
+    this.triggerHandlers.clear()
+
+    // Clean up tooltip listeners
+    if (this.tooltipMouseenterHandler) {
+      this.tooltip.removeEventListener('mouseenter', this.tooltipMouseenterHandler)
+      this.tooltip.removeEventListener('mouseleave', this.tooltipMouseleaveHandler)
+    }
+  }
+
   isTooltipVisible() {
     return this.tooltip && this.tooltip.classList.contains('show')
   }