@linzjs/windows 11.3.0 → 12.0.0

package/dist/index.js

@@ -10679,6 +10679,26 @@ const makePopoutId = (str) => str
     .toLowerCase();
 const popoutWindowDivId = (windowTitle) => `popoutWindow-${makePopoutId(windowTitle)}`;
 
+// Shared patch for CSSStyleSheet.insertRule so multiple concurrent popouts don't stomp each other.
+// Emotion (used by react-select) injects styles via insertRule, bypassing DOM mutations entirely.
+const insertRuleListeners = new Set();
+const originalInsertRule = CSSStyleSheet.prototype.insertRule;
+const addInsertRuleListener = (fn) => {
+    if (insertRuleListeners.size === 0) {
+        CSSStyleSheet.prototype.insertRule = function (rule, index) {
+            const result = originalInsertRule.call(this, rule, index);
+            insertRuleListeners.forEach((listener) => listener());
+            return result;
+        };
+    }
+    insertRuleListeners.add(fn);
+};
+const removeInsertRuleListener = (fn) => {
+    insertRuleListeners.delete(fn);
+    if (insertRuleListeners.size === 0) {
+        CSSStyleSheet.prototype.insertRule = originalInsertRule;
+    }
+};
 // Copy the app's styles into the new window
 const copyStyleSheets = (newHeadMountElement) => {
     const stylesheets = Array.from(document.styleSheets);
@@ -10706,19 +10726,15 @@ const copyStyleSheets = (newHeadMountElement) => {
  * This works by listening to any changes to the head element
  * If there are any changes it replaces all the styles in the floating window
  * at most every 100ms
- * @param newHeadMountElement
+ * @param onStyleChange throttled callback to trigger a style copy
  */
-const observeStyleSheetChanges = (newHeadMountElement) => {
+const observeStyleSheetChanges = (onStyleChange) => {
     const targetNode = document.querySelector('head');
     if (!targetNode) {
         return null;
     }
     // Options for the observer (which mutations to observe)
     const config = { /*attributes: true,*/ childList: true /*, subtree: true */ };
-    //throttle the copying of the all the styles at most 100ms
-    const throttleCopyStyleSheets = throttle(() => {
-        copyStyleSheets(newHeadMountElement);
-    }, 100);
     // Callback function to execute when mutations are observed
     const callback = function (mutationList) {
         for (const mutation of mutationList) {
@@ -10729,7 +10745,7 @@ const observeStyleSheetChanges = (newHeadMountElement) => {
                 //floating window is complicated, so the easiest way is to just wait for modifications for finish
                 //updating, then replace them all
                 //we could probably just copy all style on every modification, by that might have a performance hit
-                throttleCopyStyleSheets();
+                onStyleChange();
             } /*else if (mutation.type === "attributes") {
                     //Do we need to handle attribute modifications?
                     // console.log("The " + mutation.attributeName + " attribute was modified.");
@@ -10790,11 +10806,19 @@ const openExternalWindow = ({ title, size, setContainerElement, setHeadElement,
         // so the modal shows up in the popped out window instead the main window
         newMountElement.id = popoutWindowDivId(title);
         copyStyleSheets(newHeadMountElement);
+        // Always intercept insertRule so styles injected after the initial copy (e.g. react-select
+        // rendering after the window opens) are synced to the popout. Uses a shared throttled
+        // callback so both this and the optional MutationObserver drive the same copy call.
+        const throttledCopy = throttle(() => copyStyleSheets(newHeadMountElement), 100);
+        addInsertRuleListener(throttledCopy);
         let observer = null;
         if (observeStyleChanges) {
-            observer = observeStyleSheetChanges(newHeadMountElement);
+            observer = observeStyleSheetChanges(throttledCopy);
         }
-        externalWindow.onbeforeunload = () => observer?.disconnect();
+        externalWindow.onbeforeunload = () => {
+            observer?.disconnect();
+            removeInsertRuleListener(throttledCopy);
+        };
         response.onCloseExternalWindow = () => {
             // Make sure the window closes when the component unmounts
             externalWindow.close();
@@ -10861,9 +10885,14 @@ const PopoutWindow = ({ name, title = name, size, popInPanelPosition, popInPanel
     // The `@emotion/react/CacheProvider`provides a cache derived from createCache for inline styles
     // these will be generated into the `container` and prefixed with the `key` below, ensuring
     // the styles are in the popout rather than the root window.
-    const myCache = createCache({ key: makePopoutId(name), container: headElement });
-    const wrappedChildren = jsx(CacheProvider, { value: myCache, children: children });
-    return containerElement ? createPortal(wrappedChildren, containerElement) : null;
+    // Memoised so the cache (and its deduplication tracking) is stable across re-renders,
+    // and only created once headElement is defined — if container is undefined Emotion falls
+    // back to document.head, causing styles to be orphaned in the root window.
+    const myCache = useMemo(() => (headElement ? createCache({ key: makePopoutId(name), container: headElement }) : null), [headElement, name]);
+    if (!containerElement || !myCache) {
+        return null;
+    }
+    return createPortal(jsx(CacheProvider, { value: myCache, children: children }), containerElement);
 };
 
 const defaultInitialSize = { width: 320, height: 200 };