@guardian/interactive-component-library 0.4.4 → 0.4.5

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

@@ -36,14 +36,13 @@ class MapRenderer {
       }
       viewState.projection = projection;
     };
-    const baseLayers = visibleLayers.filter((layer) => !layer.declutter);
-    for (const layer of baseLayers) {
-      renderLayer(layer);
-    }
     const declutterTree = new RBush();
-    const layersToDeclutter = [...visibleLayers].filter((layer) => !!layer.declutter).reverse();
-    for (const layer of layersToDeclutter) {
-      renderLayer(layer, declutterTree);
+    for (const layer of visibleLayers) {
+      if (layer.declutter) {
+        renderLayer(layer, declutterTree);
+      } else {
+        renderLayer(layer);
+      }
     }
     replaceChildren(this._element, mapElements);
   }

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

@@ -43,10 +43,12 @@ class TextLayerRenderer {
         x: relativeX * viewPortSize[0],
         y: relativeY * viewPortSize[1]
       });
-      if (declutterTree.collides(bbox)) {
-        continue;
+      if (declutterTree) {
+        if (declutterTree.collides(bbox)) {
+          continue;
+        }
+        declutterTree.insert(bbox);
       }
-      declutterTree.insert(bbox);
       if (this.layer.drawCollisionBoxes) {
         const collisionBoxDebugElement = this.getCollisionBoxElement(bbox);
         textElements.push(collisionBoxDebugElement);

package/dist/components/molecules/option-picker/style.module.css.js

@@ -1,13 +1,13 @@
-const optionPicker = "_optionPicker_1b561_1";
-const title = "_title_1b561_13";
-const options = "_options_1b561_20";
-const option = "_option_1b561_1";
-const selected = "_selected_1b561_46";
-const optionIconContainer = "_optionIconContainer_1b561_55";
-const optionIcon = "_optionIcon_1b561_55";
-const optionTitle = "_optionTitle_1b561_67";
-const checkmark = "_checkmark_1b561_78";
-const checkmarkPath = "_checkmarkPath_1b561_82";
+const optionPicker = "_optionPicker_1c1rh_1";
+const title = "_title_1c1rh_13";
+const options = "_options_1c1rh_20";
+const option = "_option_1c1rh_1";
+const selected = "_selected_1c1rh_47";
+const optionIconContainer = "_optionIconContainer_1c1rh_56";
+const optionIcon = "_optionIcon_1c1rh_56";
+const optionTitle = "_optionTitle_1c1rh_68";
+const checkmark = "_checkmark_1c1rh_79";
+const checkmarkPath = "_checkmarkPath_1c1rh_83";
 const defaultStyles = {
   optionPicker,
   title,

package/dist/style.css

@@ -3009,7 +3009,7 @@ body.android {
   cursor: auto;
   background-color: var(--tertiary-bg-color);
 }
-._optionPicker_1b561_1 {
+._optionPicker_1c1rh_1 {
   background-color: rgba(255, 255, 255, 0.6);
   border: 1px solid var(--border-divider-color);
   border-radius: 8px;
@@ -3021,31 +3021,32 @@ body.android {
   row-gap: 4px;
 }
 
-._title_1b561_13 {
+._title_1c1rh_13 {
   color: var(--secondary-text-color);
   font-family: var(--text-sans);
   font-size: var(--sans-xxsmall);
   line-height: var(--sans-line-height);
 }
 
-._options_1b561_20 {
+._options_1c1rh_20 {
   display: flex;
   flex-direction: row;
   justify-content: stretch;
   gap: var(--space-2);
 }
 
-._options_1b561_20.vertical {
+._options_1c1rh_20.vertical {
   flex-direction: column;
 }
 
-._option_1b561_1 {
+._option_1c1rh_1 {
+  flex: 1;
+
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--space-2);
   min-height: 70px;
-  max-width: 124px;
 
   border: 1px solid var(--border-divider-color);
   border-radius: 8px;
@@ -3054,16 +3055,16 @@ body.android {
   background-color: var(--primary-bg-color);
 }
 
-._option_1b561_1._selected_1b561_46 {
+._option_1c1rh_1._selected_1c1rh_47 {
   border: 1px solid var(--primary-text-color);
 }
 
-._option_1b561_1:hover:enabled {
+._option_1c1rh_1:hover:enabled {
   background-color: var(--news-grey-05);
   cursor: pointer;
 }
 
-._optionIconContainer_1b561_55 {
+._optionIconContainer_1c1rh_56 {
   width: 100%;
   display: flex;
   flex-direction: row;
@@ -3071,26 +3072,26 @@ body.android {
   gap: var(--space-1);
 }
 
-._optionIcon_1b561_55 {
+._optionIcon_1c1rh_56 {
   width: 100%;
 }
 
-._optionTitle_1b561_67 {
+._optionTitle_1c1rh_68 {
   color: var(--primary-text-color);
   font-family: var(--text-sans);
   font-size: var(--sans-xxsmall);
   line-height: var(--sans-line-height);
 }
 
-._option_1b561_1._selected_1b561_46 ._optionTitle_1b561_67 {
+._option_1c1rh_1._selected_1c1rh_47 ._optionTitle_1c1rh_68 {
   font-weight: 700;
 }
 
-._checkmark_1b561_78 {
+._checkmark_1c1rh_79 {
   width: 11px;
 }
 
-._checkmarkPath_1b561_82 {
+._checkmarkPath_1c1rh_83 {
   fill: var(--primary-text-color);
 }
 body {

package/package.json

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