@guardian/interactive-component-library 0.7.0 → 0.7.1

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

@@ -26,6 +26,9 @@ export class TextLayer {
      * called with the hovered feature, and the mouse event.
      *
      * The callback can optionally return a cleanup function that will be called when the mouse leaves this feature.
+     *
+     * Note that this callback is attached to the "pointerover" and "pointerout" events, so touch
+     * events will not trigger it.
      * @param {boolean} [params.restyleOnHover] If true, the layer will re-render when the mouse hovers over a feature.
      *
      * The provided style function will be called with the `isHovering` parameter set to `true` for the hovered feature.

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

@@ -89,6 +89,9 @@ class TextLayer {
    * called with the hovered feature, and the mouse event.
    *
    * The callback can optionally return a cleanup function that will be called when the mouse leaves this feature.
+   *
+   * Note that this callback is attached to the "pointerover" and "pointerout" events, so touch
+   * events will not trigger it.
    * @param {boolean} [params.restyleOnHover] If true, the layer will re-render when the mouse hovers over a feature.
    *
    * The provided style function will be called with the `isHovering` parameter set to `true` for the hovered feature.

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

@@ -276,7 +276,7 @@ class TextLayerRenderer {
       });
     }
     if (this.layer.onHover) {
-      this._element.addEventListener("mouseover", (event) => {
+      this._element.addEventListener("pointerover", (event) => {
         if (!event.target) return;
         const hoveredFeature = this.layer.source.getFeatures().find((feature) => {
           var _a;
@@ -285,14 +285,14 @@ class TextLayerRenderer {
         if (!hoveredFeature) return;
         const onHoverLeave = this.layer.onHover(hoveredFeature, event);
         if (onHoverLeave) {
-          this._element.addEventListener("mouseout", onHoverLeave, {
+          this._element.addEventListener("pointerout", onHoverLeave, {
             once: true
           });
         }
       });
     }
     if (this.layer.restyleOnHover) {
-      this._element.addEventListener("mouseover", (event) => {
+      this._element.addEventListener("pointerover", (event) => {
         if (!event.target) return;
         const hoveredFeature = this.layer.source.getFeatures().find((feature) => {
           var _a;
@@ -302,7 +302,7 @@ class TextLayerRenderer {
         this._hoveredFeature = hoveredFeature;
         this.layer.dispatcher.dispatch(MapEvent.CHANGE);
         this._element.addEventListener(
-          "mouseout",
+          "pointerout",
           () => {
             this._hoveredFeature = void 0;
             this.layer.dispatcher.dispatch(MapEvent.CHANGE);

package/package.json

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