@guardian/interactive-component-library 0.4.0 → 0.4.2

package/dist/components/molecules/canvas-map/context/MapContext.d.ts

@@ -1,3 +1,5 @@
+import { Layer } from '../lib/layers';
+import { ReactNode } from 'preact/compat';
 /**
  * @param {Object} params
  * @param {import('../lib/Map').Map} params.map
@@ -8,10 +10,18 @@ export function MapProvider({ map, children }: {
     children: import('preact').ComponentChildren;
 }): import("preact").JSX.Element;
 export type MapContext = {
-    registerLayer: ((layer: import('../lib/layers').Layer) => void) | null;
+    registerLayer: ((layer: Layer, comp: ReactNode) => void) | null;
+    unregisterLayer: ((layer: Layer) => void) | null;
 };
 /**
- * @typedef {{ registerLayer: ((layer: import("../lib/layers").Layer) => void) | null }} MapContext
+ * @import { Layer } from "../lib/layers"
+ * @import { ReactNode } from "preact/compat"
+ */
+/**
+ * @typedef {{
+ *   registerLayer: ((layer: Layer, comp: ReactNode) => void) | null,
+ *   unregisterLayer: ((layer: Layer) => void) | null
+ * }} MapContext
  */
 /**
  * @type {import('preact').Context<MapContext | null>}

package/dist/components/molecules/canvas-map/context/MapContext.js

@@ -1,18 +1,52 @@
 import { jsx } from "preact/jsx-runtime";
 import { createContext } from "preact";
-import { useEffect } from "preact/hooks";
+import { useState, useEffect } from "preact/hooks";
 const MapContext = createContext(null);
 function MapProvider({ map, children }) {
-  const registeredLayers = [];
-  const registerLayer = (layer) => {
-    registeredLayers.push(layer);
+  const [layers, setLayers] = useState([]);
+  const registerLayer = (layer, comp) => {
+    if (!layers.includes(layer)) {
+      const position = getCompTreePosition(comp, children);
+      if (position === null) return;
+      setLayers((prevLayers) => {
+        const newLayers = [...prevLayers];
+        newLayers.splice(position, 0, layer);
+        return newLayers;
+      });
+    }
+  };
+  const unregisterLayer = (layerToRemove) => {
+    setLayers(
+      (prevLayers) => prevLayers.filter((layer) => layer !== layerToRemove)
+    );
   };
   useEffect(() => {
-    if (map && !map.hasLayers(registeredLayers)) {
-      map.setLayers(registeredLayers);
+    if (!map) return;
+    map.setLayers(layers);
+  }, [map, layers]);
+  return /* @__PURE__ */ jsx(MapContext.Provider, { value: { registerLayer, unregisterLayer }, children });
+}
+function getCompTreePosition(targetComponent, children) {
+  let index = 0;
+  function traverse(nodes) {
+    var _a, _b;
+    for (const node of nodes) {
+      const childNodes = (_b = (_a = node == null ? void 0 : node.__c) == null ? void 0 : _a.__v) == null ? void 0 : _b.__k;
+      if (childNodes && childNodes.length > 1 && childNodes[0] !== null) {
+        const result = traverse(childNodes);
+        if (result !== null) {
+          return result;
+        }
+      } else {
+        if ((node == null ? void 0 : node.__c) === targetComponent) {
+          return index;
+        }
+        index++;
+      }
     }
-  }, [map, children]);
-  return /* @__PURE__ */ jsx(MapContext.Provider, { value: { registerLayer }, children });
+    return null;
+  }
+  return traverse(Array.isArray(children) ? children : [children]);
 }
 export {
   MapContext,

package/dist/components/molecules/canvas-map/lib/layers/TextLayer.d.ts

@@ -6,7 +6,7 @@ import { Dispatcher } from '../events/Dispatcher';
 /** @typedef {TextLayerOptions & { features: import("../Feature").Feature[] | import("../FeatureCollection").FeatureCollection }} TextLayerComponentProps */
 export class TextLayer {
     /** @param {TextLayerComponentProps} props */
-    static Component({ features: featureCollection, style, minZoom, opacity, declutter, drawCollisionBoxes, }: TextLayerComponentProps): any;
+    static Component({ features: featureCollection, style, minZoom, opacity, declutter, drawCollisionBoxes, }: TextLayerComponentProps): boolean;
     /**
      * @param {import("../Feature").Feature[]} features
      * @param {TextLayerOptions} options

package/dist/components/molecules/canvas-map/lib/layers/TextLayer.js

@@ -18,7 +18,7 @@ class TextLayer {
     declutter,
     drawCollisionBoxes
   }) {
-    const { registerLayer } = useContext(MapContext);
+    const { registerLayer, unregisterLayer } = useContext(MapContext);
     const layer = useMemo(
       () => {
         const features = featureCollection instanceof FeatureCollection ? featureCollection.features : (
@@ -36,11 +36,16 @@ class TextLayer {
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [featureCollection, minZoom, opacity, declutter, drawCollisionBoxes]
     );
-    registerLayer(layer);
+    useEffect(() => {
+      registerLayer(layer, this);
+      return () => {
+        unregisterLayer(layer);
+      };
+    }, [layer]);
     useEffect(() => {
       layer.style = style;
     }, [style]);
-    return null;
+    return false;
   }
   /**
    * @param {import("../Feature").Feature[]} features

package/dist/components/molecules/canvas-map/lib/layers/VectorLayer.d.ts

@@ -6,7 +6,7 @@ import { VectorSource } from '../sources/VectorSource';
 /** @typedef {VectorLayerOptions & { features: import("../Feature").Feature[] | import("../FeatureCollection").FeatureCollection }} VectorLayerComponentProps */
 export class VectorLayer {
     /** @param {VectorLayerComponentProps} props */
-    static Component({ features: featureCollection, style, minZoom, opacity, hitDetectionEnabled, }: VectorLayerComponentProps): any;
+    static Component({ features: featureCollection, style, minZoom, opacity, hitDetectionEnabled, }: VectorLayerComponentProps): boolean;
     /**
      * @param {import("../Feature").Feature[]} features
      * @param {VectorLayerOptions} options

package/dist/components/molecules/canvas-map/lib/layers/VectorLayer.js

@@ -17,7 +17,7 @@ class VectorLayer {
     opacity,
     hitDetectionEnabled = true
   }) {
-    const { registerLayer } = useContext(MapContext);
+    const { registerLayer, unregisterLayer } = useContext(MapContext);
     const layer = useMemo(
       () => {
         const features = featureCollection instanceof FeatureCollection ? featureCollection.features : (
@@ -34,11 +34,16 @@ class VectorLayer {
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [featureCollection, minZoom, opacity, hitDetectionEnabled]
     );
-    registerLayer(layer);
+    useEffect(() => {
+      registerLayer(layer, this);
+      return () => {
+        unregisterLayer(layer);
+      };
+    }, [layer]);
     useEffect(() => {
       layer.style = style;
     }, [style]);
-    return null;
+    return false;
   }
   /**
    * @param {import("../Feature").Feature[]} features

package/dist/components/particles/circle-icon/index.d.ts

@@ -1,6 +1,14 @@
-export function CircleIcon({ color, pulse, diameter, styles }: {
+export function CircleIcon({ color, pulse, diameter, styles, splitColor, }: {
     color: any;
     pulse?: boolean;
     diameter?: number;
     styles: any;
+    splitColor: any;
 }): import("preact").JSX.Element;
+export type CircleIconProps = {
+    color: string;
+    pulse?: boolean;
+    diameter?: number;
+    splitColor?: string;
+    styles?: any;
+};

package/dist/components/particles/circle-icon/index.js

@@ -1,11 +1,17 @@
-import { jsx } from "preact/jsx-runtime";
+import { jsxs, jsx } from "preact/jsx-runtime";
 import defaultStyles from "./style.module.css.js";
 import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
-const CircleIcon = ({ color, pulse = false, diameter = 11, styles }) => {
+const CircleIcon = ({
+  color,
+  pulse = false,
+  diameter = 11,
+  styles,
+  splitColor
+}) => {
   styles = mergeStyles(defaultStyles, styles);
   let radius = diameter / 2;
   let padding = 2;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "svg",
     {
       style: styles.svg,
@@ -14,16 +20,26 @@ const CircleIcon = ({ color, pulse = false, diameter = 11, styles }) => {
       viewBox: `0 0 ${diameter + padding} ${diameter + padding}`,
       width: diameter + padding,
       xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ jsx(
-        "circle",
-        {
-          className: [styles.circle, pulse && styles.pulse].join(" "),
-          style: { fill: color },
-          r: radius,
-          cx: radius + padding / 2,
-          cy: radius + padding / 2
-        }
-      )
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            className: [styles.circle, pulse && styles.pulse].join(" "),
+            style: { fill: color },
+            r: radius,
+            cx: radius + padding / 2,
+            cy: radius + padding / 2
+          }
+        ),
+        splitColor && /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: `M ${radius + padding / 2} ${padding / 2} A ${radius} ${radius} 0 0 1 ${radius + padding / 2} ${diameter + padding / 2} L ${radius + padding / 2} ${radius + padding / 2} Z`,
+            fill: splitColor,
+            transform: `rotate(45 ${radius + padding / 2} ${radius + padding / 2})`
+          }
+        )
+      ]
     }
   );
 };

package/dist/shared/hooks/useContainerSize.js

@@ -8,7 +8,11 @@ function useContainerSize(containerRef) {
       for (let entry of entries) {
         setContainerSize({
           width: entry.contentRect.width,
-          height: entry.contentRect.height
+          height: entry.contentRect.height,
+          left: entry.contentRect.left,
+          right: entry.contentRect.right,
+          bottom: entry.contentRect.bottom,
+          top: entry.contentRect.top
         });
       }
     });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@guardian/interactive-component-library",
   "private": false,
-  "version": "0.4.0",
+  "version": "0.4.2",
   "packageManager": "pnpm@8.4.0",
   "repository": {
     "type": "git",