@guardian/interactive-component-library 0.1.0-alpha.44 → 0.1.0-alpha.46

package/dist/interactive-component-library.umd.cjs

@@ -6506,30 +6506,33 @@
       this.style = style;
     }
     render(frameState, feature, context) {
+      if (!this.style) {
+        return;
+      }
       const {
         projection,
         transform,
         pixelRatio
       } = frameState.viewState;
+      const {
+        stroke,
+        fill
+      } = this.style;
       this.drawingFunction.context(context);
       context.beginPath();
       const geometries = feature.getProjectedGeometries(projection);
       for (const geometry of geometries) {
         this.drawingFunction(geometry);
       }
-      const {
-        stroke,
-        fill
-      } = this.style;
+      if (fill) {
+        context.fillStyle = fill.getRgba();
+        context.fill();
+      }
       if (stroke) {
         context.lineWidth = stroke.width * pixelRatio / transform.k;
         context.strokeStyle = stroke.getRgba();
         context.stroke();
       }
-      if (fill) {
-        context.fillStyle = fill.getRgba();
-        context.fill();
-      }
     }
   }
   const textPadding = {
@@ -6662,6 +6665,13 @@
       this.fill = options == null ? void 0 : options.fill;
       this.text = options == null ? void 0 : options.text;
     }
+    clone() {
+      return new Style({
+        stroke: this.stroke,
+        fill: this.fill,
+        text: this.text
+      });
+    }
   }
   function memoise(fn) {
     let called = false;
@@ -7693,15 +7703,15 @@
       })]
     });
   }
-  const ticker = "_ticker_1as05_9";
-  const tickerItems = "_tickerItems_1as05_21";
-  const tickerScroll = "_tickerScroll_1as05_26";
-  const tickerItem = "_tickerItem_1as05_21";
-  const controls = "_controls_1as05_48";
-  const gradient = "_gradient_1as05_63";
-  const buttons = "_buttons_1as05_75";
-  const button = "_button_1as05_75";
-  const buttonInner = "_buttonInner_1as05_100";
+  const ticker = "_ticker_1jg88_9";
+  const tickerItems = "_tickerItems_1jg88_21";
+  const tickerScroll = "_tickerScroll_1jg88_26";
+  const tickerItem = "_tickerItem_1jg88_21";
+  const controls = "_controls_1jg88_48";
+  const gradient = "_gradient_1jg88_63";
+  const buttons = "_buttons_1jg88_75";
+  const button = "_button_1jg88_75";
+  const buttonInner = "_buttonInner_1jg88_101";
   const styles = {
     ticker,
     tickerItems,
@@ -7738,12 +7748,18 @@
       setPageWidth(pageWidth2);
       const numberOfPages2 = Math.ceil(tickerScrollRef.current.scrollWidth / pageWidth2);
       setNumberOfPages(numberOfPages2);
-    }, []);
+    }, [childArray]);
     hooks.useLayoutEffect(() => {
       const hideButtons2 = childArray.length < 4;
       setHideButtons(hideButtons2);
     }, [childArray]);
     function toggleExpandedState() {
+      if (expanded) {
+        tickerRef.current.scrollIntoView({
+          behavior: "smooth",
+          alignToTop: true
+        });
+      }
       setExpanded((expanded2) => {
         const newState = !expanded2;
         if (onStateChange)