react-threat-map 0.1.1 → 0.1.2

package/dist/index.cjs

@@ -454,6 +454,40 @@ function useReducedMotion() {
   }, []);
   return reduced;
 }
+function configEqual(a, b) {
+  const aKeys = Object.keys(a);
+  if (aKeys.length !== Object.keys(b).length) return false;
+  for (const key of aKeys) {
+    const av = a[key];
+    const bv = b[key];
+    if (Object.is(av, bv)) continue;
+    if (isPlainObject(av) && isPlainObject(bv)) {
+      if (!shallowEqual(av, bv)) return false;
+      continue;
+    }
+    return false;
+  }
+  return true;
+}
+function shallowEqual(a, b) {
+  const aKeys = Object.keys(a);
+  if (aKeys.length !== Object.keys(b).length) return false;
+  for (const key of aKeys) {
+    if (!Object.is(a[key], b[key])) return false;
+  }
+  return true;
+}
+function isPlainObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function useStableConfig(defaults, overrides) {
+  const resolved = mergeDefined(defaults, overrides);
+  const ref = react.useRef(resolved);
+  if (!configEqual(ref.current, resolved)) {
+    ref.current = resolved;
+  }
+  return ref.current;
+}
 function drawBaseMap(options) {
   const { ctx, width, height, projection, geo, theme, regions } = options;
   ctx.clearRect(0, 0, width, height);
@@ -1195,17 +1229,23 @@ function ThreatMap(props) {
     ariaLabel = "Cyberattack threat map"
   } = props;
   const containerRef = react.useRef(null);
-  const theme = react.useMemo(() => {
-    const merged = mergeDefined(defaultTheme, props.theme);
-    return props.theme?.severityColors ? { ...merged, severityColors: { ...defaultTheme.severityColors, ...props.theme.severityColors } } : merged;
+  const themeOverrides = react.useMemo(() => {
+    if (!props.theme?.severityColors) return props.theme;
+    return { ...props.theme, severityColors: { ...defaultTheme.severityColors, ...props.theme.severityColors } };
   }, [props.theme]);
-  const line = react.useMemo(() => mergeDefined(defaultLineStyle, props.line), [props.line]);
-  const regions = react.useMemo(() => mergeDefined(defaultRegions, props.regions), [props.regions]);
+  const theme = useStableConfig(defaultTheme, themeOverrides);
+  const line = useStableConfig(defaultLineStyle, props.line);
+  const regions = useStableConfig(defaultRegions, props.regions);
   const reducedMotion = useReducedMotion();
-  const animation = react.useMemo(() => {
-    const merged = mergeDefined(defaultAnimation, props.animation);
-    return merged.respectReducedMotion && reducedMotion ? { ...merged, enabled: false } : merged;
-  }, [props.animation, reducedMotion]);
+  const baseAnimation = useStableConfig(defaultAnimation, props.animation);
+  const animation = react.useMemo(
+    () => (
+      // Someone who has asked their OS for less motion should not be handed a
+      // screen of racing lines. The arcs still render; they just hold still.
+      baseAnimation.respectReducedMotion && reducedMotion ? { ...baseAnimation, enabled: false } : baseAnimation
+    ),
+    [baseAnimation, reducedMotion]
+  );
   const measured = useElementSize(containerRef, widthProp === void 0 || heightProp === void 0);
   const pixelRatio = usePixelRatio();
   const width = widthProp ?? measured?.width ?? 0;

package/dist/index.js

@@ -453,6 +453,40 @@ function useReducedMotion() {
   }, []);
   return reduced;
 }
+function configEqual(a, b) {
+  const aKeys = Object.keys(a);
+  if (aKeys.length !== Object.keys(b).length) return false;
+  for (const key of aKeys) {
+    const av = a[key];
+    const bv = b[key];
+    if (Object.is(av, bv)) continue;
+    if (isPlainObject(av) && isPlainObject(bv)) {
+      if (!shallowEqual(av, bv)) return false;
+      continue;
+    }
+    return false;
+  }
+  return true;
+}
+function shallowEqual(a, b) {
+  const aKeys = Object.keys(a);
+  if (aKeys.length !== Object.keys(b).length) return false;
+  for (const key of aKeys) {
+    if (!Object.is(a[key], b[key])) return false;
+  }
+  return true;
+}
+function isPlainObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function useStableConfig(defaults, overrides) {
+  const resolved = mergeDefined(defaults, overrides);
+  const ref = useRef(resolved);
+  if (!configEqual(ref.current, resolved)) {
+    ref.current = resolved;
+  }
+  return ref.current;
+}
 function drawBaseMap(options) {
   const { ctx, width, height, projection, geo, theme, regions } = options;
   ctx.clearRect(0, 0, width, height);
@@ -1194,17 +1228,23 @@ function ThreatMap(props) {
     ariaLabel = "Cyberattack threat map"
   } = props;
   const containerRef = useRef(null);
-  const theme = useMemo(() => {
-    const merged = mergeDefined(defaultTheme, props.theme);
-    return props.theme?.severityColors ? { ...merged, severityColors: { ...defaultTheme.severityColors, ...props.theme.severityColors } } : merged;
+  const themeOverrides = useMemo(() => {
+    if (!props.theme?.severityColors) return props.theme;
+    return { ...props.theme, severityColors: { ...defaultTheme.severityColors, ...props.theme.severityColors } };
   }, [props.theme]);
-  const line = useMemo(() => mergeDefined(defaultLineStyle, props.line), [props.line]);
-  const regions = useMemo(() => mergeDefined(defaultRegions, props.regions), [props.regions]);
+  const theme = useStableConfig(defaultTheme, themeOverrides);
+  const line = useStableConfig(defaultLineStyle, props.line);
+  const regions = useStableConfig(defaultRegions, props.regions);
   const reducedMotion = useReducedMotion();
-  const animation = useMemo(() => {
-    const merged = mergeDefined(defaultAnimation, props.animation);
-    return merged.respectReducedMotion && reducedMotion ? { ...merged, enabled: false } : merged;
-  }, [props.animation, reducedMotion]);
+  const baseAnimation = useStableConfig(defaultAnimation, props.animation);
+  const animation = useMemo(
+    () => (
+      // Someone who has asked their OS for less motion should not be handed a
+      // screen of racing lines. The arcs still render; they just hold still.
+      baseAnimation.respectReducedMotion && reducedMotion ? { ...baseAnimation, enabled: false } : baseAnimation
+    ),
+    [baseAnimation, reducedMotion]
+  );
   const measured = useElementSize(containerRef, widthProp === void 0 || heightProp === void 0);
   const pixelRatio = usePixelRatio();
   const width = widthProp ?? measured?.width ?? 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-threat-map",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "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",