@guardian/interactive-component-library 0.7.2 → 0.7.4

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/components/molecules/result-summary/index.d.ts

@@ -1,4 +1,4 @@
-export function ResultSummary({ previous, next, title, text, timestamp, onClick, isSlim, styles, }: {
+export function ResultSummary({ previous, next, title, text, timestamp, onClick, isSlim, lineClamp, styles, }: {
     previous: any;
     next: any;
     title: any;
@@ -6,5 +6,6 @@ export function ResultSummary({ previous, next, title, text, timestamp, onClick,
     timestamp: any;
     onClick: any;
     isSlim?: boolean;
+    lineClamp?: boolean;
     styles: any;
 }): import("preact").JSX.Element;

package/dist/components/molecules/result-summary/index.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "preact/jsx-runtime";
+import { jsx, jsxs } from "preact/jsx-runtime";
 import "preact/hooks";
 import { mergeStyles } from "../../../styles/helpers/mergeStyles.js";
 import "preact/compat";
@@ -30,17 +30,18 @@ function ResultSummary({
   timestamp,
   onClick,
   isSlim = false,
+  lineClamp = false,
   styles
 }) {
   styles = mergeStyles({ ...defaultStyles }, styles);
   if (isSlim) {
     let hasChanged = next !== previous;
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(
       "div",
       {
         className: `${styles.container} ${styles.containerSlim}`,
         onClick,
-        children: [
+        children: /* @__PURE__ */ jsxs("p", { className: `${styles.titleSlim} ${lineClamp && styles.lineClamp}`, children: [
           hasChanged ? /* @__PURE__ */ jsx(
             GradientIcon,
             {
@@ -52,18 +53,17 @@ function ResultSummary({
               }
             }
           ) : /* @__PURE__ */ jsx(CircleIcon, { styles: { circle: `fill-color--${next}` } }),
-          /* @__PURE__ */ jsxs("p", { className: styles.titleSlim, children: [
-            title,
-            " "
-          ] }),
+          " ",
+          title,
+          " ",
           /* @__PURE__ */ jsx(RelativeTimeSentence, { timeStamp: timestamp })
-        ]
+        ] })
       }
     );
   } else {
     return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
       /* @__PURE__ */ jsx(ControlChange, { previous, next, text: title }),
-      /* @__PURE__ */ jsx("p", { className: styles.paragraph, children: text }),
+      /* @__PURE__ */ jsx("p", { className: `${styles.paragraph} ${lineClamp && styles.lineClamp}`, children: text }),
       /* @__PURE__ */ jsx(RelativeTimeSentence, { timeStamp: timestamp })
     ] });
   }

package/dist/components/molecules/result-summary/style.module.css.js

@@ -1,12 +1,14 @@
-const container = "_container_14h9i_1";
-const containerSlim = "_containerSlim_14h9i_12";
-const titleSlim = "_titleSlim_14h9i_17";
-const dateStampLinePosition = "_dateStampLinePosition_14h9i_27";
-const paragraph = "_paragraph_14h9i_31";
+const container = "_container_32bi7_1";
+const containerSlim = "_containerSlim_32bi7_12";
+const titleSlim = "_titleSlim_32bi7_17";
+const lineClamp = "_lineClamp_32bi7_27";
+const dateStampLinePosition = "_dateStampLinePosition_32bi7_40";
+const paragraph = "_paragraph_32bi7_44";
 const defaultStyles = {
   container,
   containerSlim,
   titleSlim,
+  lineClamp,
   dateStampLinePosition,
   paragraph
 };
@@ -15,6 +17,7 @@ export {
   containerSlim,
   dateStampLinePosition,
   defaultStyles as default,
+  lineClamp,
   paragraph,
   titleSlim
 };

package/dist/style.css

@@ -2455,7 +2455,7 @@ body ._header_1xpz0_150._fullWidth_1xpz0_39 {
   color: var(--primary-text-color);
   margin-top: var(--space-2);
 }
-._container_14h9i_1 {
+._container_32bi7_1 {
   background-color: var(--quaternary-bg-color);
   border-radius: 4px;
   padding: 4px 8px 6px 8px;
@@ -2466,12 +2466,12 @@ body ._header_1xpz0_150._fullWidth_1xpz0_39 {
   height: 100%;
 }
 
-._containerSlim_14h9i_12 {
+._containerSlim_32bi7_12 {
   min-width: 260px;
   display: inline-block;
 }
 
-._titleSlim_14h9i_17 {
+._titleSlim_32bi7_17 {
   display: inline;
   color: var(--primary-text-color) !important;
   font-family: var(--text-sans) !important;
@@ -2481,11 +2481,24 @@ body ._header_1xpz0_150._fullWidth_1xpz0_39 {
   margin-left: var(--space-1) !important;
 }
 
-._dateStampLinePosition_14h9i_27 {
+._lineClamp_32bi7_27 {
+  /* restrict lines of text to 2, or else add ellipses */
+  display: -webkit-inline-box !important;
+  display: -moz-inline-box !important;
+  -webkit-box-orient: vertical;
+  -moz-box-orient: vertical;
+  line-clamp: 2;
+  -webkit-line-clamp: 2;
+  -moz-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+._dateStampLinePosition_32bi7_40 {
   display: block;
 }
 
-._paragraph_14h9i_31 {
+._paragraph_32bi7_44 {
   font-family: var(--text-sans);
   font-size: var(--sans-xsmall);
   line-height: var(--sans-line-height);

package/package.json

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