@cratis/components 2.6.1 → 2.6.2

package/dist/cjs/useOverlayZIndex.js

@@ -5,19 +5,31 @@ var React = require('react');
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 /**
- * Hook to force a specific z-index on PrimeReact overlay components.
- * This is a workaround for PrimeReact's automatic z-index calculation
- * which can cause overlays to appear behind dialogs.
+ * Hook that keeps a PrimeReact overlay panel at or above a minimum z-index.
+ *
+ * PrimeReact computes overlay z-indexes relative to whatever is currently open — in an application that
+ * configures the PrimeReact z-index tiers this already stacks panels above dialogs correctly. This hook is
+ * the safety net for applications that do not: when PrimeReact's computed value is *below* the floor, the
+ * panel is raised to it.
+ *
+ * It is strictly raise-only. It must never lower a value PrimeReact computed, for two reasons: the computed
+ * value is what stacks the panel above an open dialog's mask, and PrimeReact's `ZIndexUtils.clear()`
+ * un-registers an overlay by reading its inline z-index back — overwriting it with a different number makes
+ * that lookup miss, leaks the registry entry, and every dialog opened afterwards escalates its mask's
+ * z-index further above the panels until dropdowns render behind the very dialogs that host them.
  *
  * @param className - The CSS class name to target (e.g., 'location-autocomplete-overlay')
- * @param zIndex - The desired z-index value (default: 10000)
+ * @param minimumZIndex - The floor the panel must not sit below (default: 10000)
  */
-function useOverlayZIndex(className, zIndex = 10000) {
+function useOverlayZIndex(className, minimumZIndex = 10000) {
     React.useEffect(() => {
         const observer = new MutationObserver(() => {
             const panel = document.querySelector(`.${className}`);
-            if (panel instanceof HTMLElement && panel.style.zIndex !== zIndex.toString()) {
-                panel.style.zIndex = zIndex.toString();
+            if (!(panel instanceof HTMLElement))
+                return;
+            const raised = raisedOverlayZIndex(panel.style.zIndex, minimumZIndex);
+            if (raised !== undefined) {
+                panel.style.zIndex = raised;
             }
         });
         observer.observe(document.body, {
@@ -27,8 +39,27 @@ function useOverlayZIndex(className, zIndex = 10000) {
             attributeFilter: ['style']
         });
         return () => observer.disconnect();
-    }, [className, zIndex]);
+    }, [className, minimumZIndex]);
+}
+/**
+ * Decides whether an overlay panel's inline z-index must be raised to the floor.
+ *
+ * Raise-only by design: a value PrimeReact computed at or above the floor is left untouched, both because
+ * it is what stacks the panel above an open dialog and because PrimeReact reads it back to un-register the
+ * overlay when it closes.
+ *
+ * @param currentZIndex - The panel's current inline z-index value, possibly empty.
+ * @param minimumZIndex - The floor the panel must not sit below.
+ * @returns The value to assign, or undefined when the current value must be left alone.
+ */
+function raisedOverlayZIndex(currentZIndex, minimumZIndex) {
+    const current = Number.parseInt(currentZIndex, 10);
+    if (Number.isNaN(current) || current < minimumZIndex) {
+        return minimumZIndex.toString();
+    }
+    return undefined;
 }
 
+exports.raisedOverlayZIndex = raisedOverlayZIndex;
 exports.useOverlayZIndex = useOverlayZIndex;
 //# sourceMappingURL=useOverlayZIndex.js.map

package/dist/cjs/useOverlayZIndex.js.map

@@ -1 +1 @@
-{"version":3,"file":"useOverlayZIndex.js","sources":["../../useOverlayZIndex.ts"],"sourcesContent":[null],"names":["useEffect"],"mappings":";;;;AAAA;AACA;AAIA;;;;;;;AAOG;SACa,gBAAgB,CAAC,SAAiB,EAAE,SAAiB,KAAK,EAAA;IACtEA,eAAS,CAAC,MAAK;AACX,QAAA,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,MAAK;YACvC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAA,CAAA,EAAI,SAAS,CAAA,CAAE,CAAC;AACrD,YAAA,IAAI,KAAK,YAAY,WAAW,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,KAAK,MAAM,CAAC,QAAQ,EAAE,EAAE;gBAC1E,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,QAAQ,EAAE;YAC1C;AACJ,QAAA,CAAC,CAAC;AAEF,QAAA,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE;AAC5B,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,OAAO;AAC5B,SAAA,CAAC;AAEF,QAAA,OAAO,MAAM,QAAQ,CAAC,UAAU,EAAE;AACtC,IAAA,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;AAC3B;;;;"}
+{"version":3,"file":"useOverlayZIndex.js","sources":["../../useOverlayZIndex.ts"],"sourcesContent":[null],"names":["useEffect"],"mappings":";;;;AAAA;AACA;AAIA;;;;;;;;;;;;;;;;AAgBG;SACa,gBAAgB,CAAC,SAAiB,EAAE,gBAAwB,KAAK,EAAA;IAC7EA,eAAS,CAAC,MAAK;AACX,QAAA,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,MAAK;YACvC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAA,CAAA,EAAI,SAAS,CAAA,CAAE,CAAC;AACrD,YAAA,IAAI,EAAE,KAAK,YAAY,WAAW,CAAC;gBAAE;AAErC,YAAA,MAAM,MAAM,GAAG,mBAAmB,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,aAAa,CAAC;AACrE,YAAA,IAAI,MAAM,KAAK,SAAS,EAAE;AACtB,gBAAA,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM;YAC/B;AACJ,QAAA,CAAC,CAAC;AAEF,QAAA,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE;AAC5B,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,OAAO;AAC5B,SAAA,CAAC;AAEF,QAAA,OAAO,MAAM,QAAQ,CAAC,UAAU,EAAE;AACtC,IAAA,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;AAClC;AAEA;;;;;;;;;;AAUG;AACG,SAAU,mBAAmB,CAAC,aAAqB,EAAE,aAAqB,EAAA;IAC5E,MAAM,OAAO,GAAG,MAAM,CAAC,QAAQ,CAAC,aAAa,EAAE,EAAE,CAAC;IAClD,IAAI,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,OAAO,GAAG,aAAa,EAAE;AAClD,QAAA,OAAO,aAAa,CAAC,QAAQ,EAAE;IACnC;AAEA,IAAA,OAAO,SAAS;AACpB;;;;;"}