react-threat-map 0.2.3 → 0.2.4

package/README.md

@@ -32,6 +32,7 @@ import { ThreatMap } from 'react-threat-map';
 ## Contents
 
 - [Install](#install)
+- [Browser support](#browser-support)
 - [Quick start](#quick-start)
 - [Aggregation](#aggregation)
 - [Customization](#customization)
@@ -62,6 +63,41 @@ React 16.14, 17, 18, and 19 are all supported.
 
 ---
 
+## Browser support
+
+| Browser | Minimum |
+| --- | --- |
+| Chrome / Edge | 88 |
+| Firefox | 89 |
+| Safari (macOS) | 15 |
+| Safari (iOS) | 15 |
+
+The floor is set by CSS [`aspect-ratio`][ar], which is how a `<ThreatMap>` given no
+height derives one — the canvases are absolutely positioned, so nothing else in the
+box has a height to contribute. Below that, the component falls back to a
+`min-height` computed from the measured width, so it still renders; the map just
+stops responding to a container whose height is set purely in CSS.
+
+Everything else the library touches is older than that floor: Canvas 2D with
+`Path2D` and the `lighter` composite operation, `ResizeObserver` (feature-detected,
+with a `getBoundingClientRect` fallback), and `matchMedia` (both the modern
+`addEventListener` and the `addListener` form Safari needed before 14). The
+published bundle is ES2020 and ships no polyfills.
+
+Two things degrade quietly rather than breaking, both on Safari below 16:
+
+- The `resolution` media feature is missing, so the canvas is not re-sharpened when
+  a window moves to a display with a different pixel ratio. The ratio picked at
+  mount stays.
+- `prefers-reduced-motion` still works — that query has been supported since Safari
+  10.1.
+
+There is no IE11 support and none is planned; `Path2D` alone rules it out.
+
+[ar]: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
+
+---
+
 ## Quick start
 
 The only required prop is `attacks`. The map sizes itself to its container, loads its own

package/dist/index.cjs

@@ -430,17 +430,24 @@ function usePixelRatio() {
   const [ratio, setRatio] = react.useState(currentRatio);
   react.useEffect(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
-    let query;
+    let unlisten;
     const update = () => {
+      unlisten?.();
       setRatio(currentRatio());
       listen();
     };
     const listen = () => {
-      query = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
-      query.addEventListener("change", update, { once: true });
+      const query = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+      if (typeof query.addEventListener === "function") {
+        query.addEventListener("change", update);
+        unlisten = () => query.removeEventListener("change", update);
+        return;
+      }
+      query.addListener(update);
+      unlisten = () => query.removeListener(update);
     };
     listen();
-    return () => query?.removeEventListener("change", update);
+    return () => unlisten?.();
   }, []);
   return ratio;
 }
@@ -452,11 +459,23 @@ function useReducedMotion() {
     const query = window.matchMedia(QUERY);
     setReduced(query.matches);
     const update = (event) => setReduced(event.matches);
-    query.addEventListener("change", update);
-    return () => query.removeEventListener("change", update);
+    if (typeof query.addEventListener === "function") {
+      query.addEventListener("change", update);
+      return () => query.removeEventListener("change", update);
+    }
+    query.addListener(update);
+    return () => query.removeListener(update);
   }, []);
   return reduced;
 }
+function useSupportsAspectRatio() {
+  const [supported, setSupported] = react.useState(true);
+  react.useEffect(() => {
+    if (typeof CSS === "undefined" || typeof CSS.supports !== "function") return;
+    setSupported(CSS.supports("aspect-ratio", "1"));
+  }, []);
+  return supported;
+}
 function configEqual(a, b) {
   const aKeys = Object.keys(a);
   if (aKeys.length !== Object.keys(b).length) return false;
@@ -579,7 +598,7 @@ function BaseMapCanvas(props) {
       ref: canvasRef,
       width: Math.max(1, Math.round(width * pixelRatio)),
       height: Math.max(1, Math.round(height * pixelRatio)),
-      style: { position: "absolute", inset: 0, width: "100%", height: "100%" },
+      style: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%" },
       "aria-hidden": "true"
     }
   );
@@ -1224,7 +1243,9 @@ function ThreatCanvas(props) {
       height: Math.max(1, Math.round(height * pixelRatio)),
       style: {
         position: "absolute",
-        inset: 0,
+        // Longhand: the `inset` shorthand is Safari 14.1+.
+        top: 0,
+        left: 0,
         width: "100%",
         height: "100%",
         // Without handlers the canvas must not eat pointer events aimed at
@@ -1274,6 +1295,7 @@ function ThreatMap(props) {
   );
   const measured = useElementSize(containerRef, widthProp === void 0 || heightProp === void 0);
   const pixelRatio = usePixelRatio();
+  const supportsAspectRatio = useSupportsAspectRatio();
   const width = widthProp ?? measured?.width ?? 0;
   const height = heightProp ?? (measured && measured.height > 0 ? measured.height : width > 0 ? defaultHeightFor(projectionProp, width) : 0);
   const projection = react.useMemo(
@@ -1331,7 +1353,14 @@ function ThreatMap(props) {
         // a flex parent, or the consumer's own `style` below — so it sets a
         // floor without taking the decision away from them. The value is a string
         // for React 16.14/17's sake; see aspectRatioStyleFor.
-        ...heightProp !== void 0 ? { height: heightProp } : { aspectRatio: aspectRatioStyleFor(projectionProp) },
+        //
+        // Where `aspect-ratio` is not implemented at all (Safari/iOS <15, Chrome
+        // <88, Firefox <89) the declaration is dropped and the wrapper collapses,
+        // so fall back to a `min-height` derived from the width. `min-height`
+        // rather than `height` keeps the "floor, not a decision" property, and
+        // deriving it from the *width* rather than the measured height is what
+        // stops it feeding back into its own measurement.
+        ...heightProp !== void 0 ? { height: heightProp } : supportsAspectRatio ? { aspectRatio: aspectRatioStyleFor(projectionProp) } : width > 0 ? { minHeight: defaultHeightFor(projectionProp, width) } : {},
         ...style
       },
       role: "img",

package/dist/index.js

@@ -429,17 +429,24 @@ function usePixelRatio() {
   const [ratio, setRatio] = useState(currentRatio);
   useEffect(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
-    let query;
+    let unlisten;
     const update = () => {
+      unlisten?.();
       setRatio(currentRatio());
       listen();
     };
     const listen = () => {
-      query = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
-      query.addEventListener("change", update, { once: true });
+      const query = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+      if (typeof query.addEventListener === "function") {
+        query.addEventListener("change", update);
+        unlisten = () => query.removeEventListener("change", update);
+        return;
+      }
+      query.addListener(update);
+      unlisten = () => query.removeListener(update);
     };
     listen();
-    return () => query?.removeEventListener("change", update);
+    return () => unlisten?.();
   }, []);
   return ratio;
 }
@@ -451,11 +458,23 @@ function useReducedMotion() {
     const query = window.matchMedia(QUERY);
     setReduced(query.matches);
     const update = (event) => setReduced(event.matches);
-    query.addEventListener("change", update);
-    return () => query.removeEventListener("change", update);
+    if (typeof query.addEventListener === "function") {
+      query.addEventListener("change", update);
+      return () => query.removeEventListener("change", update);
+    }
+    query.addListener(update);
+    return () => query.removeListener(update);
   }, []);
   return reduced;
 }
+function useSupportsAspectRatio() {
+  const [supported, setSupported] = useState(true);
+  useEffect(() => {
+    if (typeof CSS === "undefined" || typeof CSS.supports !== "function") return;
+    setSupported(CSS.supports("aspect-ratio", "1"));
+  }, []);
+  return supported;
+}
 function configEqual(a, b) {
   const aKeys = Object.keys(a);
   if (aKeys.length !== Object.keys(b).length) return false;
@@ -578,7 +597,7 @@ function BaseMapCanvas(props) {
       ref: canvasRef,
       width: Math.max(1, Math.round(width * pixelRatio)),
       height: Math.max(1, Math.round(height * pixelRatio)),
-      style: { position: "absolute", inset: 0, width: "100%", height: "100%" },
+      style: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%" },
       "aria-hidden": "true"
     }
   );
@@ -1223,7 +1242,9 @@ function ThreatCanvas(props) {
       height: Math.max(1, Math.round(height * pixelRatio)),
       style: {
         position: "absolute",
-        inset: 0,
+        // Longhand: the `inset` shorthand is Safari 14.1+.
+        top: 0,
+        left: 0,
         width: "100%",
         height: "100%",
         // Without handlers the canvas must not eat pointer events aimed at
@@ -1273,6 +1294,7 @@ function ThreatMap(props) {
   );
   const measured = useElementSize(containerRef, widthProp === void 0 || heightProp === void 0);
   const pixelRatio = usePixelRatio();
+  const supportsAspectRatio = useSupportsAspectRatio();
   const width = widthProp ?? measured?.width ?? 0;
   const height = heightProp ?? (measured && measured.height > 0 ? measured.height : width > 0 ? defaultHeightFor(projectionProp, width) : 0);
   const projection = useMemo(
@@ -1330,7 +1352,14 @@ function ThreatMap(props) {
         // a flex parent, or the consumer's own `style` below — so it sets a
         // floor without taking the decision away from them. The value is a string
         // for React 16.14/17's sake; see aspectRatioStyleFor.
-        ...heightProp !== void 0 ? { height: heightProp } : { aspectRatio: aspectRatioStyleFor(projectionProp) },
+        //
+        // Where `aspect-ratio` is not implemented at all (Safari/iOS <15, Chrome
+        // <88, Firefox <89) the declaration is dropped and the wrapper collapses,
+        // so fall back to a `min-height` derived from the width. `min-height`
+        // rather than `height` keeps the "floor, not a decision" property, and
+        // deriving it from the *width* rather than the measured height is what
+        // stops it feeding back into its own measurement.
+        ...heightProp !== void 0 ? { height: heightProp } : supportsAspectRatio ? { aspectRatio: aspectRatioStyleFor(projectionProp) } : width > 0 ? { minHeight: defaultHeightFor(projectionProp, width) } : {},
         ...style
       },
       role: "img",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-threat-map",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "A React component that renders animated cyberattack threats on a static world map, with intelligent per-region aggregation and first-class US state support.",
   "keywords": [
     "react",