@guardian/interactive-component-library 0.7.1 → 0.7.3

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

@@ -10,30 +10,30 @@ export class Map {
      * @constructor
      * @param {Object} config - The configuration for the map.
      * @param {Object} config.view - The view configuration for the map.
-     * @param {boolean} config.debug - Whether to enable debug mode or not.
+     * @param {boolean} [config.debug] - Whether to enable debug mode or not.
      * @param {boolean} config.allowZoomPan - Whether to enable zoom and pan functionality or not.
-     * @param {HTMLElement} config.target - The target element to render the map into.
+     * @param {HTMLElement} [config.target] - The target element to render the map into.
      */
     constructor(config: {
         view: any;
-        debug: boolean;
+        debug?: boolean;
         allowZoomPan: boolean;
-        target: HTMLElement;
+        target?: HTMLElement;
     });
     allowZoomPan: boolean;
     options: {
         view: any;
-        debug: boolean;
+        debug?: boolean;
         allowZoomPan: boolean;
-        target: HTMLElement;
+        target?: HTMLElement;
     };
     view: View;
     target: HTMLElement;
     layers: any[];
     dispatcher: Dispatcher;
     _viewport: HTMLDivElement;
-    _renderer: MapRenderer;
     _resizeObserver: ResizeObserver;
+    _renderer: MapRenderer;
     destroy(): void;
     /** PUBLIC GETTERS */
     get size(): number[];
@@ -79,7 +79,8 @@ export class Map {
     _zoomBehaviour: any;
     _requestRender(): void;
     _animationFrameRequestID: number;
-    _renderFrame(): void;
+    _renderFrame(_: any, canvas: any): void;
+    renderToCanvas(canvas: any): void;
 }
 export namespace Map {
     let Component: any;

package/dist/components/molecules/canvas-map/lib/Map.js

@@ -14,9 +14,9 @@ class Map {
    * @constructor
    * @param {Object} config - The configuration for the map.
    * @param {Object} config.view - The view configuration for the map.
-   * @param {boolean} config.debug - Whether to enable debug mode or not.
+   * @param {boolean} [config.debug] - Whether to enable debug mode or not.
    * @param {boolean} config.allowZoomPan - Whether to enable zoom and pan functionality or not.
-   * @param {HTMLElement} config.target - The target element to render the map into.
+   * @param {HTMLElement} [config.target] - The target element to render the map into.
    */
   constructor(config) {
     if (config.debug) {
@@ -28,27 +28,31 @@ class Map {
     this.target = config.target;
     this.layers = [];
     this.dispatcher = new Dispatcher(this);
-    this._viewport = document.createElement("div");
-    this._viewport.className = "gv-map";
-    this._viewport.style.position = "relative";
-    this._viewport.style.overflow = "hidden";
-    this._viewport.style.width = "100%";
-    this._viewport.style.height = "100%";
-    this.target.appendChild(this._viewport);
+    const createViewport = () => {
+      this._viewport = document.createElement("div");
+      this._viewport.className = "gv-map";
+      this._viewport.style.position = "relative";
+      this._viewport.style.overflow = "hidden";
+      this._viewport.style.width = "100%";
+      this._viewport.style.height = "100%";
+      this.target.appendChild(this._viewport);
+      this._viewport.addEventListener("touchmove", (event) => {
+        if (event.targetTouches.length < 2 && this._collaborativeGesturesEnabled) {
+          this._filterEventCallback(true);
+        }
+      });
+      this._resizeObserver = new ResizeObserver(() => {
+        this._updateSize();
+      });
+      this._resizeObserver.observe(this.target);
+    };
+    if (this.target) createViewport();
     this._renderer = new MapRenderer(this);
-    this._resizeObserver = new ResizeObserver(() => {
-      this._updateSize();
-    });
-    this._resizeObserver.observe(this.target);
-    this._viewport.addEventListener("touchmove", (event) => {
-      if (event.targetTouches.length < 2 && this._collaborativeGesturesEnabled) {
-        this._filterEventCallback(true);
-      }
-    });
   }
   destroy() {
+    var _a;
     this._resizeObserver.disconnect();
-    this._viewport.remove();
+    (_a = this._viewport) == null ? void 0 : _a.remove();
   }
   /** PUBLIC GETTERS */
   get size() {
@@ -223,7 +227,8 @@ class Map {
     this._zoomBypassKey = navigator.userAgent.indexOf("Mac") !== -1 ? "metaKey" : "ctrlKey";
     this._zoomBehaviour = zoom().extent([[0, 0], viewPortSize]).translateExtent([[0, 0], viewPortSize]).scaleExtent(this.view.scaleExtent).filter((event) => {
       const filterEvent = (filter) => {
-        this._filterEventCallback(filter);
+        var _a;
+        (_a = this._filterEventCallback) == null ? void 0 : _a.call(this, filter);
         return !filter;
       };
       if (event.type === "wheel" && !event[this._zoomBypassKey]) {
@@ -250,21 +255,25 @@ class Map {
     select(this._viewport).call(this._zoomBehaviour);
   }
   _requestRender() {
-    if (!this._renderer || !!this._animationFrameRequestID || this._isTransitioning)
+    if (!this._renderer || !!this._animationFrameRequestID || this._isTransitioning || typeof window === "undefined")
       return;
     this._animationFrameRequestID = requestAnimationFrame(
       this._renderFrame.bind(this)
     );
   }
-  _renderFrame() {
+  _renderFrame(_, canvas) {
     const frameState = {
       size: this.size,
       viewState: this.view.getState(),
       debug: this.options.debug || false
     };
-    this._renderer.renderFrame(frameState);
+    this._renderer.renderFrame(frameState, canvas);
     this._animationFrameRequestID = null;
   }
+  renderToCanvas(canvas) {
+    this.view.viewPortSize = [canvas.width, canvas.height];
+    this._renderFrame(null, canvas);
+  }
 }
 Map.Component = void 0;
 export {

package/dist/components/molecules/canvas-map/lib/View.js

@@ -29,7 +29,7 @@ class View {
     this._transform = zoomIdentity;
     this._padding = padding;
     this._viewPortSize = [0, 0];
-    this.pixelRatio = window.devicePixelRatio;
+    this.pixelRatio = typeof window !== "undefined" ? window.devicePixelRatio : 1;
   }
   set viewPortSize(size) {
     const previousSize = this._viewPortSize;

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

@@ -73,7 +73,7 @@ export class VectorLayer {
      */
     getExtent(): import('../util').Extent | null;
     findFeatures(coordinate: any): any;
-    renderFrame(frameState: any, targetElement: any): any;
+    renderFrame(frameState: any, canvas: any): HTMLCanvasElement;
 }
 export namespace VectorLayer {
     /** @param {VectorLayerComponentProps} props */

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

@@ -135,8 +135,8 @@ class VectorLayer {
     if (!this.hitDetectionEnabled) return;
     return this.source.getFeaturesAtCoordinate(coordinate);
   }
-  renderFrame(frameState, targetElement) {
-    return this.renderer.renderFrame(frameState, targetElement);
+  renderFrame(frameState, canvas) {
+    return this.renderer.renderFrame(frameState, canvas);
   }
 }
 VectorLayer.Component.displayName = "VectorLayer";

package/dist/components/molecules/canvas-map/lib/renderers/MapRenderer.d.ts

@@ -10,7 +10,7 @@ export class MapRenderer {
     constructor(map: any);
     map: any;
     _element: HTMLDivElement;
-    renderFrame(frameState: any): void;
+    renderFrame(frameState: any, canvas: any): void;
 }
 export type CanvasSingleton = {
     getContext2d: () => CanvasRenderingContext2D;

package/dist/components/molecules/canvas-map/lib/renderers/MapRenderer.js

@@ -3,35 +3,37 @@ import RBush from "rbush";
 class MapRenderer {
   constructor(map) {
     this.map = map;
-    this._element = document.createElement("div");
-    this._element.className = "gv-layer-container";
-    const style = this._element.style;
-    style.position = "absolute";
-    style.width = "100%";
-    style.height = "100%";
-    style.zIndex = "0";
     const container = map.viewPort;
-    container.insertBefore(this._element, container.firstChild || null);
+    if (container) {
+      this._element = document.createElement("div");
+      this._element.className = "gv-layer-container";
+      const style = this._element.style;
+      style.position = "absolute";
+      style.width = "100%";
+      style.height = "100%";
+      style.zIndex = "0";
+      container.insertBefore(this._element, container.firstChild || null);
+    }
   }
-  renderFrame(frameState) {
+  renderFrame(frameState, canvas) {
     const { zoomLevel, projection, sizeInPixels } = frameState.viewState;
     const layers = this.map.layers;
     const mapElements = [];
+    const canvasElement = canvas || createCanvas(sizeInPixels);
     const visibleLayers = layers.filter((layer) => {
       return zoomLevel > (layer.minZoom || 0);
     });
-    const canvasSingleton = makeCanvasSingleton(sizeInPixels);
     const renderLayer = (layer, declutterTree2) => {
       const viewState = frameState.viewState;
       if (layer.projection) {
         viewState.projection = layer.projection;
       }
-      const newContainer = layer.renderFrame(
+      const element = layer.renderFrame(
         { ...frameState, viewState, declutterTree: declutterTree2 },
-        canvasSingleton
+        canvasElement
       );
-      if (newContainer) {
-        mapElements.push(newContainer);
+      if (element) {
+        mapElements.push(element);
       }
       viewState.projection = projection;
     };
@@ -43,53 +45,20 @@ class MapRenderer {
         renderLayer(layer);
       }
     }
-    if (canvasSingleton.isInitialised()) {
-      replaceChildren(this._element, [
-        canvasSingleton.getContainer(),
-        ...mapElements
-      ]);
-    } else {
-      replaceChildren(this._element, mapElements);
+    if (this._element) {
+      replaceChildren(this._element, [canvasElement, ...mapElements]);
     }
   }
 }
-function makeCanvasSingleton(sizeInPixels) {
-  let canvasLayer;
-  let canvasContext2d;
-  return {
-    getContext2d: () => {
-      if (!canvasLayer) {
-        canvasLayer = createCanvasMapLayer(sizeInPixels);
-        canvasContext2d = canvasLayer.firstElementChild.getContext("2d");
-      }
-      return canvasContext2d;
-    },
-    getContainer: () => {
-      if (!canvasLayer) {
-        canvasLayer = createCanvasMapLayer(sizeInPixels);
-        canvasContext2d = canvasLayer.firstElementChild.getContext("2d");
-      }
-      return canvasLayer;
-    },
-    isInitialised: () => !!canvasLayer
-  };
-}
-function createCanvasMapLayer(sizeInPixels) {
-  const container = document.createElement("div");
-  container.className = "gv-map-layer";
-  let style = container.style;
-  style.position = "absolute";
-  style.width = "100%";
-  style.height = "100%";
+function createCanvas(sizeInPixels) {
   const canvas = document.createElement("canvas");
-  style = canvas.style;
-  style.position = "absolute";
-  style.width = "100%";
-  style.height = "100%";
+  canvas.className = "gv-map-layer";
+  canvas.style.position = "absolute";
+  canvas.style.width = "100%";
+  canvas.style.height = "100%";
   canvas.width = sizeInPixels[0];
   canvas.height = sizeInPixels[1];
-  container.appendChild(canvas);
-  return container;
+  return canvas;
 }
 export {
   MapRenderer

package/dist/components/molecules/canvas-map/lib/renderers/TextLayerRenderer.d.ts

@@ -12,10 +12,16 @@ export class TextLayerRenderer {
     _element: HTMLDivElement;
     _mouseInteractionsEnabled: boolean | ((feature: import('../Feature').Feature, event: MouseEvent) => void);
     /**
-     * @param {import("./MapRenderer").CanvasSingleton} canvasSingleton
+     * @param {HTMLCanvasElement} canvas
      */
-    renderFrame(frameState: any, canvasSingleton: import('./MapRenderer').CanvasSingleton): HTMLDivElement;
-    getTextElementWithID(id: any): Element;
+    renderFrame(frameState: any, canvas: HTMLCanvasElement): HTMLDivElement;
+    /**
+     * Function that gets or creates a text element.
+     *
+     * @param {String} id
+     * @returns {HTMLDivElement}
+     */
+    getTextElementWithID(id: string): HTMLDivElement;
     /**
      * @param {HTMLDivElement} element
      * @param {import("../styles/Text").Text} textStyle

package/dist/components/molecules/canvas-map/lib/renderers/TextLayerRenderer.js

@@ -20,9 +20,9 @@ class TextLayerRenderer {
     this.attachClickAndHoverListeners();
   }
   /**
-   * @param {import("./MapRenderer").CanvasSingleton} canvasSingleton
+   * @param {HTMLCanvasElement} canvas
    */
-  renderFrame(frameState, canvasSingleton) {
+  renderFrame(frameState, canvas) {
     var _a, _b;
     if (this.layer.opacity === 0) return null;
     const { declutterTree } = frameState;
@@ -85,7 +85,7 @@ class TextLayerRenderer {
       const callout = (_a = featureStyle == null ? void 0 : featureStyle.text) == null ? void 0 : _a.callout;
       const icon = (_b = featureStyle == null ? void 0 : featureStyle.text) == null ? void 0 : _b.icon;
       if (callout || icon) {
-        canvasCtx ?? (canvasCtx = canvasSingleton.getContext2d());
+        canvasCtx ?? (canvasCtx = canvas.getContext("2d"));
       }
       if (callout) {
         const [originalX, originalY] = transform.apply(point.coordinates);
@@ -128,6 +128,12 @@ class TextLayerRenderer {
     replaceChildren(this._element, textElements);
     return this._element;
   }
+  /**
+   * Function that gets or creates a text element.
+   *
+   * @param {String} id
+   * @returns {HTMLDivElement}
+   */
   getTextElementWithID(id) {
     const elementId = `text-feature-${id}`;
     let textElement = this._element.querySelector(`#${elementId}`);

package/dist/components/molecules/canvas-map/lib/renderers/VectorLayerRenderer.d.ts

@@ -11,7 +11,7 @@ export class VectorLayerRenderer {
     layer: import('../layers').VectorLayer;
     featureRenderer: FeatureRenderer;
     /**
-     * @param {import("./MapRenderer").CanvasSingleton} canvasSingleton
+     * @param {HTMLCanvasElement} canvas
      */
-    renderFrame(frameState: any, canvasSingleton: import('./MapRenderer').CanvasSingleton): any;
+    renderFrame(frameState: any, canvas: HTMLCanvasElement): HTMLCanvasElement;
 }

package/dist/components/molecules/canvas-map/lib/renderers/VectorLayerRenderer.js

@@ -9,12 +9,12 @@ class VectorLayerRenderer {
     this.featureRenderer = new FeatureRenderer();
   }
   /**
-   * @param {import("./MapRenderer").CanvasSingleton} canvasSingleton
+   * @param {HTMLCanvasElement} canvas
    */
-  renderFrame(frameState, canvasSingleton) {
-    if (this.layer.opacity === 0) return null;
+  renderFrame(frameState, canvas) {
+    if (this.layer.opacity === 0) return canvas;
     const { projection, visibleExtent, transform } = frameState.viewState;
-    const context = canvasSingleton.getContext2d();
+    const context = canvas.getContext("2d");
     context.save();
     context.translate(transform.x, transform.y);
     context.scale(transform.k, transform.k);

package/dist/components/molecules/option-picker/index.d.ts

@@ -1,10 +1,16 @@
 /** @typedef { ("vertical" | "horizontal") } OptionLayoutDirection */
+/**
+ * @typedef { Object } Option
+ * @prop { String } title
+ * @prop { String } [description]
+ * @prop { String | import("preact").JSX.Element } icon
+ */
 /**
  * OptionPicker component
  *
  * @param {Object} props
  * @param {string} props.title
- * @param {Array<{ title: string, description: string, icon: string | JSX.Element }>} props.options
+ * @param {Option[]} props.options
  * @param {OptionLayoutDirection} [props.layoutDirection="horizontal"]
  * @param {number} [props.initialSelectedIndex=0]
  * @param {(index: number, option: Object) => void} [props.onSelect]
@@ -13,14 +19,15 @@
  */
 export function OptionPicker({ title, options, layoutDirection, initialSelectedIndex, onSelect, styles, }: {
     title: string;
-    options: Array<{
-        title: string;
-        description: string;
-        icon: string | JSX.Element;
-    }>;
+    options: Option[];
     layoutDirection?: OptionLayoutDirection;
     initialSelectedIndex?: number;
     onSelect?: (index: number, option: any) => void;
     styles?: any;
 }): import("preact").JSX.Element;
 export type OptionLayoutDirection = ("vertical" | "horizontal");
+export type Option = {
+    title: string;
+    description?: string;
+    icon: string | import("preact").JSX.Element;
+};

package/dist/style.css

@@ -1359,14 +1359,14 @@ body {
   --new-group-01: #333333;
   --dem: #093ca3;
   --gop: #c70000;
-  --oth: #707070;
+  --oth: #4d4d4d;
   --ind-dem: #7378d8;
   --lib: #c6b716;
   --grn: #0da498;
   --ken: #ef6f07;
   --dem-2: #dad7f5;
   --gop-2: #ffdbd4;
-  --oth-2: #e7e7e7;
+  --oth-2: #cccccc;
   --ind-dem-2: #dad7f5;
   --lib-2: #f4eac2;
   --grn-2: #cfedea;
@@ -1471,14 +1471,14 @@ body {
     --new-group-01: #cccccc;
     --dem: #3261db;
     --gop: #c70000;
-    --oth: #707070;
+    --oth: #cccccc;
     --ind-dem: #7389d8;
     --lib: #c6b716;
     --grn: #23b4a9;
     --ken: #ef6f07;
     --dem-2: #20366d;
     --gop-2: #5a0b0b;
-    --oth-2: #333333;
+    --oth-2: #4d4d4d;
     --ind-dem-2: #394261;
     --lib-2: #524d13;
     --grn-2: #19524e;

package/package.json

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