chore(deps-dev): Bump cypress from 15.1.0 to 15.2.0 (#1369)

Bumps [cypress](https://github.com/cypress-io/cypress) from 15.1.0 to
15.2.0.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/cypress-io/cypress/releases">cypress's
releases</a>.</em></p>
<blockquote>
<h2>v15.2.0</h2>
<p>Changelog: <a
href="https://docs.cypress.io/app/references/changelog#15.2.0">https://docs.cypress.io/app/references/changelog#15.2.0</a></p>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="https://github.com/cypress-io/cypress/commit/058e7d26c0a0a2402a15ad5638508cd38777b350"><code>058e7d2</code></a>
chore: release 15.2.0 (<a
href="https://redirect.github.com/cypress-io/cypress/issues/32453">#32453</a>)</li>
<li><a
href="https://github.com/cypress-io/cypress/commit/14199e09052c880650331e1916839358669247c5"><code>14199e0</code></a>
chore: updating v8 snapshot cache (<a
href="https://redirect.github.com/cypress-io/cypress/issues/32451">#32451</a>)</li>
<li><a
href="https://github.com/cypress-io/cypress/commit/d3279551c8f376d5a3fe311d81ded0c6a0197ec9"><code>d327955</code></a>
chore: updating v8 snapshot cache (<a
href="https://redirect.github.com/cypress-io/cypress/issues/32450">#32450</a>)</li>
<li><a
href="https://github.com/cypress-io/cypress/commit/0f65f181f38226c18271645066dc4cd9a9b81f92"><code>0f65f18</code></a>
chore: updating v8 snapshot cache (<a
href="https://redirect.github.com/cypress-io/cypress/issues/32449">#32449</a>)</li>
<li><a
href="https://github.com/cypress-io/cypress/commit/02fb0975588ca24a26fe57c67066830b758515d4"><code>02fb097</code></a>
chore: add --glob to rimraf command (<a
href="https://redirect.github.com/cypress-io/cypress/issues/32444">#32444</a>)</li>
<li><a
href="https://github.com/cypress-io/cypress/commit/9f0e71fced38c4f1b4c0f7748109e58ed03d16d9"><code>9f0e71f</code></a>
chore: Update styles in runner to not be fractional + only update
scrollbar s...</li>
<li><a
href="https://github.com/cypress-io/cypress/commit/a07062d13e536e3c6a77160bd6657deb0fd74304"><code>a07062d</code></a>
fix(dns-cache): prevent local family cache collisions (<a
href="https://redirect.github.com/cypress-io/cypress/issues/32403">#32403</a>)</li>
<li><a
href="https://github.com/cypress-io/cypress/commit/9ebdddad9e34d51ec4a2d96f782cc201e00fca55"><code>9ebddda</code></a>
chore: Migrate <code>@​packages/electron</code> to TS (<a
href="https://redirect.github.com/cypress-io/cypress/issues/32417">#32417</a>)</li>
<li><a
href="https://github.com/cypress-io/cypress/commit/4671317eb1b9830f61e2d32daeac3b55c01bb94c"><code>4671317</code></a>
feat: (studio) support <code>@cypress/grep</code> package in Cypress
Studio (<a
href="https://redirect.github.com/cypress-io/cypress/issues/32311">#32311</a>)</li>
<li><a
href="https://github.com/cypress-io/cypress/commit/8eda0c8153ba6543450862aea5a226050370af90"><code>8eda0c8</code></a>
chore: Update v8 snapshot cache - linux (<a
href="https://redirect.github.com/cypress-io/cypress/issues/32439">#32439</a>)</li>
<li>Additional commits viewable in <a
href="https://github.com/cypress-io/cypress/compare/v15.1.0...v15.2.0">compare
view</a></li>
</ul>
</details>
<br />


[![Dependabot compatibility
score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=cypress&package-manager=npm_and_yarn&previous-version=15.1.0&new-version=15.2.0)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)

Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.

[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)

---

<details>
<summary>Dependabot commands and options</summary>
<br />

You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot show <dependency name> ignore conditions` will show all
of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)


</details>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

CHANGELOG.md

@@ -1,10 +1,14 @@
 ## main
 
 ### ✨ Features and improvements
+- Added translation to "Links" in debug modal
 - _...Add new stuff here..._
 
 ### 🐞 Bug fixes
 
+- Fixed an issue when clicking on a popup and then clicking on the map again
+- Fix modal close button possition
+- Fixed an issue with the generation of tranlations
 - _...Add new stuff here..._
 
 ## 3.0.0

cypress/e2e/layers.cy.ts

@@ -97,8 +97,26 @@ describe("layers", () => {
           });
         });
       });
+
+      describe("when selecting a layer", () => {
+        let secondId: string;
+        beforeEach(() => {
+          when.modal.open();
+          secondId = when.modal.fillLayers({
+            id: "second-layer",
+            type: "background",
+          });
+        });
+        it("should show the selected layer in the editor", () => {
+          when.realClick("layer-list-item:" + secondId);
+          then(get.elementByTestId("layer-editor.layer-id.input")).shouldHaveValue(secondId);
+          when.realClick("layer-list-item:" + id);
+          then(get.elementByTestId("layer-editor.layer-id.input")).shouldHaveValue(id);
+        });
+      });
     });
   });
+
   describe("background", () => {
     it("add", () => {
       const id = when.modal.fillLayers({
@@ -588,7 +606,8 @@ describe("layers", () => {
         id: "c",
         type: "background",
       });
-      when.dragAndDrop(get.elementByTestId("layer-list-item:" + firstId), get.elementByTestId("layer-list-item:" + thirdId));
+
+      when.dragAndDropWithWait("layer-list-item:" + firstId, "layer-list-item:" + thirdId);
 
       then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
         layers: [

cypress/e2e/map.cy.ts

@@ -29,4 +29,23 @@ describe("map", () => {
       then(get.searchControl()).shouldBeVisible();
     });
   });
+
+  describe("popup", () => {
+    beforeEach(() => {
+      when.setStyle("rectangles");
+    })
+    it("should open on feature click", () => {
+      when.clickCenter("maplibre:map");
+      then(get.elementByTestId("feature-layer-popup")).shouldBeVisible();
+    });
+
+    it("should open a second feature after closing popup", () => {
+      when.clickCenter("maplibre:map");
+      then(get.elementByTestId("feature-layer-popup")).shouldBeVisible();
+      when.closePopup();
+      then(get.elementByTestId("feature-layer-popup")).shouldNotExist();
+      when.clickCenter("maplibre:map");
+      then(get.elementByTestId("feature-layer-popup")).shouldBeVisible();
+    });
+  });
 });

cypress/e2e/maputnik-cypress-helper.ts

@@ -1,4 +1,6 @@
+/// <reference types="cypress-real-events" />
 import { CypressHelper } from "@shellygo/cypress-test-utils";
+import 'cypress-real-events/support';
 
 export default class MaputnikCypressHelper {
   private helper = new CypressHelper({ defaultDataAttribute: "data-wd-key" });
@@ -12,6 +14,18 @@ export default class MaputnikCypressHelper {
   };
 
   public when = {
+    dragAndDropWithWait: (element: string, targetElement: string) => {
+      this.helper.get.elementByTestId(element).realMouseDown({ button: "left", position: "center" });
+      this.helper.get.elementByTestId(element).realMouseMove(0, 10, { position: "center" });
+      this.helper.get.elementByTestId(targetElement).realMouseMove(0, 0, { position: "center" })
+      this.helper.when.wait(1);
+      this.helper.get.elementByTestId(targetElement).realMouseUp();
+    },
+    clickCenter: (element: string) => {
+      this.helper.get.elementByTestId(element).realMouseDown({ button: "left", position: "center" });
+      this.helper.when.wait(200);
+      this.helper.get.elementByTestId(element).realMouseUp();
+    },
     ...this.helper.when,
   };
 

cypress/e2e/maputnik-driver.ts

@@ -78,6 +78,13 @@ export class MaputnikDriver {
           fixture: "geojson-raster-style.json",
         },
       });
+      this.helper.given.interceptAndMockResponse({
+        method: "GET",
+        url: baseUrl + "rectangles-style.json",
+        response: {
+          fixture: "rectangles-style.json",
+        },
+      });
       this.helper.given.interceptAndMockResponse({
         method: "GET",
         url: "*example.local/*",
@@ -107,7 +114,7 @@ export class MaputnikDriver {
         .selectFile("cypress/fixtures/example-style.json", { force: true });
     },
     setStyle: (
-      styleProperties: "geojson" | "raster" | "both" | "layer" | "",
+      styleProperties: "geojson" | "raster" | "both" | "layer" | "rectangles" | "",
       zoom?: number
     ) => {
       const url = new URL(baseUrl);
@@ -124,7 +131,11 @@ export class MaputnikDriver {
       case "layer":
         url.searchParams.set("style", baseUrl + "example-layer-style.json");
         break;
+      case "rectangles":
+        url.searchParams.set("style", baseUrl + "rectangles-style.json");
+        break;
       }
+
       if (zoom) {
         url.hash = `${zoom}/41.3805/2.1635`;
       }
@@ -164,6 +175,10 @@ export class MaputnikDriver {
         .clear()
         .type(text, { parseSpecialCharSequences: false });
     },
+
+    closePopup: () => {
+      this.helper.get.element(".maplibregl-popup-close-button").click();
+    }
   };
 
   public get = {

cypress/fixtures/rectangles-style.json

@@ -0,0 +1,92 @@
+{
+  "version": 8,
+  "sources": {
+    "rectangles": {
+      "type": "geojson",
+      "data": {
+        "type": "FeatureCollection",
+        "features": [
+          {
+            "type": "Feature",
+            "properties": {},
+            "geometry": {
+              "type": "Polygon",
+              "coordinates": [
+                [
+                  [
+                    -130.78125,
+                    -33.13755119234615
+                  ],
+                  [
+                    -130.78125,
+                    63.548552232036414
+                  ],
+                  [
+                    15.468749999999998,
+                    63.548552232036414
+                  ],
+                  [
+                    15.468749999999998,
+                    -33.13755119234615
+                  ],
+                  [
+                    -130.78125,
+                    -33.13755119234615
+                  ]
+                ]
+              ]
+            }
+          },
+          {
+            "type": "Feature",
+            "properties": {},
+            "geometry": {
+              "type": "Polygon",
+              "coordinates": [
+                [
+                  [
+                    -48.515625,
+                    -54.97761367069625
+                  ],
+                  [
+                    -48.515625,
+                    36.5978891330702
+                  ],
+                  [
+                    169.45312499999997,
+                    36.5978891330702
+                  ],
+                  [
+                    169.45312499999997,
+                    -54.97761367069625
+                  ],
+                  [
+                    -48.515625,
+                    -54.97761367069625
+                  ]
+                ]
+              ]
+            }
+          }
+        ]
+      }
+    }
+  },
+  "layers": [
+    {
+      "id": "background",
+      "type": "background",
+      "paint": {
+        "background-color": "white"
+      }
+    },
+    {
+      "id": "rectangles",
+      "type": "fill",
+      "source": "rectangles",
+      "paint": {
+        "fill-opacity": 0.3
+      }
+    }
+  ]
+}

package-lock.json

@@ -46,16 +46,15 @@
         "ol-mapbox-style": "^13.1.0",
         "pmtiles": "^4.3.0",
         "prop-types": "^15.8.1",
-        "react": "^18.2.0",
+        "react": "^19.1.1",
         "react-accessible-accordion": "^5.0.1",
         "react-aria-menubutton": "^7.0.3",
         "react-aria-modal": "^5.0.2",
         "react-collapse": "^5.1.1",
         "react-color": "^2.19.3",
-        "react-dom": "^18.2.0",
+        "react-dom": "^19.1.1",
         "react-file-reader-input": "^2.0.0",
         "react-i18next": "^15.7.3",
-        "react-icon-base": "^2.1.2",
         "react-icons": "^5.5.0",
         "reconnecting-websocket": "^4.4.0",
         "slugify": "^1.6.6",
@@ -81,20 +80,19 @@
         "@types/lodash.isequal": "^4.5.8",
         "@types/lodash.throttle": "^4.1.9",
         "@types/randomcolor": "^0.5.9",
-        "@types/react": "^18.2.67",
+        "@types/react": "^19.1.12",
         "@types/react-aria-menubutton": "^6.2.14",
         "@types/react-aria-modal": "^5.0.0",
         "@types/react-collapse": "^5.0.4",
         "@types/react-color": "^3.0.13",
-        "@types/react-dom": "^18.2.22",
+        "@types/react-dom": "^19.1.9",
         "@types/react-file-reader-input": "^2.0.4",
-        "@types/react-icon-base": "^2.1.6",
         "@types/string-hash": "^1.1.3",
         "@types/uuid": "^10.0.0",
         "@types/wicg-file-system-access": "^2023.10.6",
         "@vitejs/plugin-react": "^5.0.2",
         "cors": "^2.8.5",
-        "cypress": "^15.1.0",
+        "cypress": "^15.2.0",
         "cypress-plugin-tab": "^1.0.5",
         "eslint": "^9.35.0",
         "eslint-plugin-react": "^7.37.5",
@@ -2785,56 +2783,6 @@
         "cypress": ">=12.17.3"
       }
     },
-    "node_modules/@shellygo/cypress-test-utils/node_modules/@types/react": {
-      "version": "19.1.8",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.8.tgz",
-      "integrity": "sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "csstype": "^3.0.2"
-      }
-    },
-    "node_modules/@shellygo/cypress-test-utils/node_modules/@types/react-dom": {
-      "version": "19.1.9",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.9.tgz",
-      "integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==",
-      "dev": true,
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "^19.0.0"
-      }
-    },
-    "node_modules/@shellygo/cypress-test-utils/node_modules/react": {
-      "version": "19.1.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
-      "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/@shellygo/cypress-test-utils/node_modules/react-dom": {
-      "version": "19.1.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
-      "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "scheduler": "^0.26.0"
-      },
-      "peerDependencies": {
-        "react": "^19.1.0"
-      }
-    },
-    "node_modules/@shellygo/cypress-test-utils/node_modules/scheduler": {
-      "version": "0.26.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
-      "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/@simonsmith/cypress-image-snapshot": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/@simonsmith/cypress-image-snapshot/-/cypress-image-snapshot-9.1.0.tgz",
@@ -3128,12 +3076,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/prop-types": {
-      "version": "15.7.11",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
-      "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==",
-      "dev": true
-    },
     "node_modules/@types/randomcolor": {
       "version": "0.5.9",
       "resolved": "https://registry.npmjs.org/@types/randomcolor/-/randomcolor-0.5.9.tgz",
@@ -3147,13 +3089,12 @@
       "license": "MIT"
     },
     "node_modules/@types/react": {
-      "version": "18.3.20",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.20.tgz",
-      "integrity": "sha512-IPaCZN7PShZK/3t6Q87pfTkRm6oLTd4vztyoj+cbHUF1g3FfVb2tFIL79uCRKEfv16AhqDMBywP2VW3KIZUvcg==",
+      "version": "19.1.12",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.12.tgz",
+      "integrity": "sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@types/prop-types": "*",
         "csstype": "^3.0.2"
       }
     },
@@ -3200,12 +3141,13 @@
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.2.22",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.22.tgz",
-      "integrity": "sha512-fHkBXPeNtfvri6gdsMYyW+dW7RXFo6Ad09nLFK0VQWR7yGLai/Cyvyj696gbwYvBnhGtevUG9cET0pmUbMtoPQ==",
+      "version": "19.1.9",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.9.tgz",
+      "integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==",
       "dev": true,
-      "dependencies": {
-        "@types/react": "*"
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.0.0"
       }
     },
     "node_modules/@types/react-file-reader-input": {
@@ -3217,15 +3159,6 @@
         "@types/react": "*"
       }
     },
-    "node_modules/@types/react-icon-base": {
-      "version": "2.1.6",
-      "resolved": "https://registry.npmjs.org/@types/react-icon-base/-/react-icon-base-2.1.6.tgz",
-      "integrity": "sha512-ebbN1JjCm6RxBd3HdI1+8VCdiOI4qMjnl9DIHWJFrB/eYLF4mzIgdL34PIqCJBLY3vlwil9v6IHQvzsa8vgMsg==",
-      "dev": true,
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
     "node_modules/@types/reactcss": {
       "version": "1.2.12",
       "resolved": "https://registry.npmjs.org/@types/reactcss/-/reactcss-1.2.12.tgz",
@@ -4906,9 +4839,9 @@
       "dev": true
     },
     "node_modules/cypress": {
-      "version": "15.1.0",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-15.1.0.tgz",
-      "integrity": "sha512-jS4EfyOa2W5KXCN02WBdmy4bpBBmLGe+INhZeCvzRksfJuzBSYp3rNg2G+hfOwPzM+wwMwOYCo/kEnH+5RsSjA==",
+      "version": "15.2.0",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-15.2.0.tgz",
+      "integrity": "sha512-J4ehSzOSb58SkXyldCe9y/oZ8ep8Bl6+q9kDUjnkqNqc2ZKzDq5KSbhIc2lHFAFR5Jtj10oNqr9JRAZbr8DA8A==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
@@ -10716,13 +10649,10 @@
       }
     },
     "node_modules/react": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
-      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "version": "19.1.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz",
+      "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==",
       "license": "MIT",
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      },
       "engines": {
         "node": ">=0.10.0"
       }
@@ -10789,16 +10719,15 @@
       }
     },
     "node_modules/react-dom": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
-      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "version": "19.1.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz",
+      "integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==",
       "license": "MIT",
       "dependencies": {
-        "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.2"
+        "scheduler": "^0.26.0"
       },
       "peerDependencies": {
-        "react": "^18.3.1"
+        "react": "^19.1.1"
       }
     },
     "node_modules/react-file-reader-input": {
@@ -10874,15 +10803,6 @@
         }
       }
     },
-    "node_modules/react-icon-base": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/react-icon-base/-/react-icon-base-2.1.2.tgz",
-      "integrity": "sha512-NRlRo0RPxWRMQT7osj8UCBSSXsGOxhF1pre84ildhuft5S2U382NOs7tg29osWSjbO90L2a3VTCqadA/LnAzHQ==",
-      "peerDependencies": {
-        "prop-types": "*",
-        "react": "*"
-      }
-    },
     "node_modules/react-icons": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
@@ -11440,13 +11360,10 @@
       }
     },
     "node_modules/scheduler": {
-      "version": "0.23.2",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
-      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
-      "license": "MIT",
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      }
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
+      "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
+      "license": "MIT"
     },
     "node_modules/semver": {
       "version": "7.7.1",

package.json

@@ -61,16 +61,15 @@
     "ol-mapbox-style": "^13.1.0",
     "pmtiles": "^4.3.0",
     "prop-types": "^15.8.1",
-    "react": "^18.2.0",
+    "react": "^19.1.1",
     "react-accessible-accordion": "^5.0.1",
     "react-aria-menubutton": "^7.0.3",
     "react-aria-modal": "^5.0.2",
     "react-collapse": "^5.1.1",
     "react-color": "^2.19.3",
-    "react-dom": "^18.2.0",
+    "react-dom": "^19.1.1",
     "react-file-reader-input": "^2.0.0",
     "react-i18next": "^15.7.3",
-    "react-icon-base": "^2.1.2",
     "react-icons": "^5.5.0",
     "reconnecting-websocket": "^4.4.0",
     "slugify": "^1.6.6",
@@ -113,20 +112,19 @@
     "@types/lodash.isequal": "^4.5.8",
     "@types/lodash.throttle": "^4.1.9",
     "@types/randomcolor": "^0.5.9",
-    "@types/react": "^18.2.67",
+    "@types/react": "^19.1.12",
     "@types/react-aria-menubutton": "^6.2.14",
     "@types/react-aria-modal": "^5.0.0",
     "@types/react-collapse": "^5.0.4",
     "@types/react-color": "^3.0.13",
-    "@types/react-dom": "^18.2.22",
+    "@types/react-dom": "^19.1.9",
     "@types/react-file-reader-input": "^2.0.4",
-    "@types/react-icon-base": "^2.1.6",
     "@types/string-hash": "^1.1.3",
     "@types/uuid": "^10.0.0",
     "@types/wicg-file-system-access": "^2023.10.6",
     "@vitejs/plugin-react": "^5.0.2",
     "cors": "^2.8.5",
-    "cypress": "^15.1.0",
+    "cypress": "^15.2.0",
     "cypress-plugin-tab": "^1.0.5",
     "eslint": "^9.35.0",
     "eslint-plugin-react": "^7.37.5",

src/components/App.tsx

@@ -18,12 +18,12 @@ import AppToolbar, { MapState } from './AppToolbar'
 import AppLayout from './AppLayout'
 import MessagePanel from './AppMessagePanel'
 
-import ModalSettings from './ModalSettings'
-import ModalExport from './ModalExport'
-import ModalSources from './ModalSources'
-import ModalOpen from './ModalOpen'
-import ModalShortcuts from './ModalShortcuts'
-import ModalDebug from './ModalDebug'
+import ModalSettings from './modals/ModalSettings'
+import ModalExport from './modals/ModalExport'
+import ModalSources from './modals/ModalSources'
+import ModalOpen from './modals/ModalOpen'
+import ModalShortcuts from './modals/ModalShortcuts'
+import ModalDebug from './modals/ModalDebug'
 
 import {downloadGlyphsMetadata, downloadSpriteMetadata} from '../libs/metadata'
 import style from '../libs/style'
@@ -696,7 +696,7 @@ export default class App extends React.Component<any, AppState> {
         {...mapProps}
         onChange={this.onMapChange}
         debugToolbox={this.state.openlayersDebugOptions.debugToolbox}
-        onLayerSelect={this.onLayerSelect}
+        onLayerSelect={(layerId) => this.onLayerSelect(+layerId)}
       />
     } else {
 

src/components/AppMessagePanel.tsx

@@ -7,7 +7,7 @@ type AppMessagePanelInternalProps = {
   errors?: unknown[]
   infos?: string[]
   mapStyle?: StyleSpecification
-  onLayerSelect?(...args: unknown[]): unknown
+  onLayerSelect?(index: number): void;
   currentLayer?: LayerSpecification
   selectedLayerIndex?: number
 } & WithTranslation;

src/components/Block.tsx

@@ -88,7 +88,7 @@ export default class Block extends React.Component<BlockProps, BlockState> {
       <div className="maputnik-input-block-action">
         {this.props.action}
       </div>
-      <div className="maputnik-input-block-content" ref={el => this._blockEl = el}>
+      <div className="maputnik-input-block-content" ref={el => {this._blockEl = el}}>
         {this.props.children}
       </div>
       {this.props.fieldSpec &&

src/components/FieldArray.tsx

@@ -1,4 +1,4 @@
-import InputArray, { FieldArrayProps as InputArrayProps } from './InputArray'
+import InputArray, { InputArrayProps } from './InputArray'
 import Fieldset from './Fieldset'
 
 type FieldArrayProps = InputArrayProps & {

src/components/FieldDocLabel.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { JSX } from 'react'
 import {MdInfoOutline, MdHighlightOff} from 'react-icons/md'
 
 type FieldDocLabelProps = {

src/components/FieldDynamicArray.tsx

@@ -1,4 +1,4 @@
-import InputDynamicArray, {FieldDynamicArrayProps as InputDynamicArrayProps} from './InputDynamicArray'
+import InputDynamicArray, {InputDynamicArrayProps} from './InputDynamicArray'
 import Fieldset from './Fieldset'
 
 type FieldDynamicArrayProps = InputDynamicArrayProps & {

src/components/FieldSpec.tsx

@@ -1,5 +1,5 @@
 import Block from './Block'
-import InputSpec, { SpecFieldProps as InputFieldSpecProps } from './InputSpec'
+import InputSpec, { InputSpecProps } from './InputSpec'
 import Fieldset from './Fieldset'
 
 
@@ -15,11 +15,11 @@ const typeMap = {
   padding: () => Block,
 };
 
-export type SpecFieldProps = InputFieldSpecProps & {
+export type FieldSpecProps = InputSpecProps & {
   name?: string
 };
 
-const SpecField: React.FC<SpecFieldProps> = (props) => {
+const FieldSpec: React.FC<FieldSpecProps> = (props) => {
   const fieldType = props.fieldSpec?.type;
 
   const typeBlockFn = typeMap[fieldType!];
@@ -40,4 +40,4 @@ const SpecField: React.FC<SpecFieldProps> = (props) => {
   );
 };
 
-export default SpecField;
+export default FieldSpec;

src/components/IconBackground.tsx

@@ -1,13 +0,0 @@
-import React from 'react'
-import IconBase from 'react-icon-base'
-
-
-export default class IconBackground extends React.Component {
-  render() {
-    return (
-      <IconBase viewBox="0 0 20 20" {...this.props}>
-        <path d="m 1.821019,10.255581 7.414535,5.020197 c 0.372277,0.25206 0.958697,0.239771 1.30985,-0.02745 L 17.539255,9.926162 C 17.89041,9.658941 17.873288,9.238006 17.501015,8.985946 L 10.08648,3.9657402 C 9.714204,3.7136802 9.127782,3.7259703 8.776627,3.9931918 L 1.782775,9.315365 c -0.3511551,0.267221 -0.3340331,0.688156 0.03824,0.940216 z" />
-      </IconBase>
-    )
-  }
-}

src/components/IconCircle.tsx

@@ -1,13 +0,0 @@
-import React from 'react'
-import IconBase from 'react-icon-base'
-
-
-export default class IconCircle extends React.Component {
-  render() {
-    return (
-      <IconBase viewBox="0 0 20 20" {...this.props}>
-        <path transform="translate(2 2)" d="M7.5,0C11.6422,0,15,3.3578,15,7.5S11.6422,15,7.5,15 S0,11.6422,0,7.5S3.3578,0,7.5,0z M7.5,1.6666c-3.2217,0-5.8333,2.6117-5.8333,5.8334S4.2783,13.3334,7.5,13.3334 s5.8333-2.6117,5.8333-5.8334S10.7217,1.6666,7.5,1.6666z"></path>
-      </IconBase>
-    )
-  }
-}

src/components/IconFill.tsx

@@ -1,13 +0,0 @@
-import React from 'react'
-import IconBase from 'react-icon-base'
-
-
-export default class IconFill extends React.Component {
-  render() {
-    return (
-      <IconBase viewBox="0 0 20 20" {...this.props}>
-        <path d="M 2.84978,9.763512 9.462149,4.7316391 16.47225,9.478015 9.859886,14.509879 2.84978,9.763512 m -1.028761,0.492069 7.414535,5.020197 c 0.372277,0.25206 0.958697,0.239771 1.30985,-0.02745 L 17.539255,9.926162 C 17.89041,9.658941 17.873288,9.238006 17.501015,8.985946 L 10.08648,3.9657402 C 9.714204,3.7136802 9.127782,3.7259703 8.776627,3.9931918 L 1.782775,9.315365 c -0.3511551,0.267221 -0.3340331,0.688156 0.03824,0.940216 l 0,0 z" />
-      </IconBase>
-    )
-  }
-}

src/components/IconLayer.tsx

@@ -1,32 +1,30 @@
 import React from 'react'
 
-import IconLine from './IconLine'
-import IconFill from './IconFill'
-import IconSymbol from './IconSymbol'
-import IconBackground from './IconBackground'
-import IconCircle from './IconCircle'
-import IconMissing from './IconMissing'
+import type {CSSProperties} from 'react'
+import { BsDiamond, BsDiamondFill, BsFonts } from 'react-icons/bs'
+import { MdOutlineCircle, MdPriorityHigh } from 'react-icons/md'
+import { IoAnalyticsOutline } from 'react-icons/io5'
 
 type IconLayerProps = {
   type: string
-  style?: object
+  style?: CSSProperties
   className?: string
 };
 
-export default class IconLayer extends React.Component<IconLayerProps> {
-  render() {
-    const iconProps = { style: this.props.style }
-    switch(this.props.type) {
-    case 'fill-extrusion': return <IconBackground {...iconProps} />
-    case 'raster': return <IconFill {...iconProps} />
-    case 'hillshade': return <IconFill {...iconProps} />
-    case 'heatmap': return <IconFill {...iconProps} />
-    case 'fill': return <IconFill {...iconProps} />
-    case 'background': return <IconBackground {...iconProps} />
-    case 'line': return <IconLine {...iconProps} />
-    case 'symbol': return <IconSymbol {...iconProps} />
-    case 'circle': return <IconCircle {...iconProps} />
-    default: return <IconMissing {...iconProps} />
-    }
+const IconLayer: React.FC<IconLayerProps> = (props) => {
+  const iconProps = { style: props.style }
+  switch(props.type) {
+  case 'fill-extrusion': return <BsDiamondFill {...iconProps} />
+  case 'raster': return <BsDiamond {...iconProps} />
+  case 'hillshade': return <BsDiamond {...iconProps} />
+  case 'heatmap': return <BsDiamond {...iconProps} />
+  case 'fill': return <BsDiamond {...iconProps} />
+  case 'background': return <BsDiamondFill {...iconProps} />
+  case 'line': return <IoAnalyticsOutline {...iconProps} />
+  case 'symbol': return <BsFonts {...iconProps} />
+  case 'circle': return <MdOutlineCircle {...iconProps} />
+  default: return <MdPriorityHigh {...iconProps} />
   }
 }
+
+export default IconLayer;

src/components/IconLine.tsx

@@ -1,13 +0,0 @@
-import React from 'react'
-import IconBase from 'react-icon-base'
-
-
-export default class IconLine extends React.Component {
-  render() {
-    return (
-      <IconBase viewBox="0 0 20 20" {...this.props}>
-        <path d="M 12.34,1.29 C 12.5114,1.1076 12.7497,1.0029 13,1 13.5523,1 14,1.4477 14,2 14.0047,2.2478 13.907,2.4866 13.73,2.66 9.785626,6.5516986 6.6148407,9.7551593 2.65,13.72 2.4793,13.8963 2.2453,13.9971 2,14 1.4477,14 1,13.5523 1,13 0.9953,12.7522 1.093,12.5134 1.27,12.34 4.9761967,8.7018093 9.0356422,4.5930579 12.34,1.29 Z" transform="translate(2,2)" />
-      </IconBase>
-    )
-  }
-}

src/components/IconMissing.tsx

@@ -1,11 +0,0 @@
-import React from 'react'
-import {MdPriorityHigh} from 'react-icons/md'
-
-
-export default class IconMissing extends React.Component {
-  render() {
-    return (
-      <MdPriorityHigh {...this.props} />
-    )
-  }
-}

src/components/IconSymbol.tsx

@@ -1,15 +0,0 @@
-import React from 'react'
-import IconBase from 'react-icon-base'
-
-
-export default class IconSymbol extends React.Component {
-  render() {
-    return (
-      <IconBase viewBox="0 0 20 20" {...this.props}>
-        <g transform="matrix(1.2718518,0,0,1.2601269,16.559526,-7.4065264)">
-          <path d="m -9.7959773,11.060163 c -0.3734787,-0.724437 -0.3580577,-1.2147051 -0.00547,-1.8767873 l 8.6034029,-0.019416 c 0.39670292,0.6865644 0.38365934,1.4750693 -0.011097,1.8864953 l -3.1359613,-0.0033 -0.013695,7.1305 c -0.4055357,0.397083 -1.3146432,0.397083 -1.7769191,-0.02274 l 0.030226,-7.104422 z" />
-        </g>
-      </IconBase>
-    )
-  }
-}

src/components/InputArray.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import InputString from './InputString'
 import InputNumber from './InputNumber'
 
-export type FieldArrayProps = {
+export type InputArrayProps = {
   value: (string | number | undefined)[]
   type?: string
   length?: number
@@ -12,18 +12,18 @@ export type FieldArrayProps = {
   label?: string
 };
 
-type FieldArrayState = {
+type InputArrayState = {
   value: (string | number | undefined)[]
   initialPropsValue: unknown[]
 }
 
-export default class FieldArray extends React.Component<FieldArrayProps, FieldArrayState> {
+export default class InputArray extends React.Component<InputArrayProps, InputArrayState> {
   static defaultProps = {
     value: [],
     default: [],
   }
 
-  constructor (props: FieldArrayProps) {
+  constructor (props: InputArrayProps) {
     super(props);
     this.state = {
       value: this.props.value.slice(0),
@@ -32,7 +32,7 @@ export default class FieldArray extends React.Component<FieldArrayProps, FieldAr
     };
   }
 
-  static getDerivedStateFromProps(props: Readonly<FieldArrayProps>, state: FieldArrayState) {
+  static getDerivedStateFromProps(props: Readonly<InputArrayProps>, state: InputArrayState) {
     const value: any[] = [];
     const initialPropsValue = state.initialPropsValue.slice(0);
 

src/components/InputColor.tsx

@@ -122,7 +122,7 @@ export default class InputColor extends React.Component<InputColorProps> {
         spellCheck="false"
         autoComplete="off"
         className="maputnik-color"
-        ref={(input) => this.colorInput = input}
+        ref={(input) => {this.colorInput = input}}
         onClick={this.togglePicker}
         style={this.props.style}
         name={this.props.name}

src/components/InputDynamicArray.tsx

@@ -11,7 +11,7 @@ import InputEnum from './InputEnum'
 import InputUrl from './InputUrl'
 
 
-export type FieldDynamicArrayProps = {
+export type InputDynamicArrayProps = {
   value?: (string | number | undefined)[]
   type?: 'url' | 'number' | 'enum' | 'string'
   default?: (string | number | undefined)[]
@@ -24,9 +24,9 @@ export type FieldDynamicArrayProps = {
   label: string
 }
 
-type FieldDynamicArrayInternalProps = FieldDynamicArrayProps & WithTranslation;
+type InputDynamicArrayInternalProps = InputDynamicArrayProps & WithTranslation;
 
-class FieldDynamicArrayInternal extends React.Component<FieldDynamicArrayInternalProps> {
+class InputDynamicArrayInternal extends React.Component<InputDynamicArrayInternalProps> {
   changeValue(idx: number, newValue: string | number | undefined) {
     const values = this.values.slice(0)
     values[idx] = newValue
@@ -131,8 +131,8 @@ class FieldDynamicArrayInternal extends React.Component<FieldDynamicArrayInterna
   }
 }
 
-const FieldDynamicArray = withTranslation()(FieldDynamicArrayInternal);
-export default FieldDynamicArray;
+const InputDynamicArray = withTranslation()(InputDynamicArrayInternal);
+export default InputDynamicArray;
 
 type DeleteValueInputButtonProps = {
   onClick?(...args: unknown[]): unknown

src/components/InputFont.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import InputAutocomplete from './InputAutocomplete'
 
-export type FieldFontProps = {
+export type InputFontProps = {
   name: string
   value?: string[]
   default?: string[]
@@ -11,7 +11,7 @@ export type FieldFontProps = {
   'aria-label'?: string
 };
 
-export default class FieldFont extends React.Component<FieldFontProps> {
+export default class InputFont extends React.Component<InputFontProps> {
   static defaultProps = {
     fonts: []
   }

src/components/InputJson.tsx

@@ -173,7 +173,7 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
       </div>
       <div
         className={classnames("codemirror-container", this.props.className)}
-        ref={(el) => this._el = el}
+        ref={(el) => {this._el = el}}
         style={style}
       />
     </div>

src/components/InputSpec.tsx

@@ -4,16 +4,16 @@ import InputColor, { InputColorProps } from './InputColor'
 import InputNumber, { InputNumberProps } from './InputNumber'
 import InputCheckbox, { InputCheckboxProps } from './InputCheckbox'
 import InputString, { InputStringProps } from './InputString'
-import InputArray, { FieldArrayProps } from './InputArray'
-import InputDynamicArray, { FieldDynamicArrayProps } from './InputDynamicArray'
-import InputFont, { FieldFontProps } from './InputFont'
+import InputArray, { InputArrayProps } from './InputArray'
+import InputDynamicArray, { InputDynamicArrayProps } from './InputDynamicArray'
+import InputFont, { InputFontProps } from './InputFont'
 import InputAutocomplete, { InputAutocompleteProps } from './InputAutocomplete'
 import InputEnum, { InputEnumProps } from './InputEnum'
 import capitalize from 'lodash.capitalize'
 
 const iconProperties = ['background-pattern', 'fill-pattern', 'line-pattern', 'fill-extrusion-pattern', 'icon-image']
 
-export type SpecFieldProps = {
+export type InputSpecProps = {
   onChange?(fieldName: string | undefined, value: number | undefined | (string | number | undefined)[]): unknown
   fieldName?: string
   fieldSpec?: {
@@ -37,7 +37,7 @@ export type SpecFieldProps = {
 /** Display any field from the Maplibre GL style spec and
  * choose the correct field component based on the @{fieldSpec}
  * to display @{value}. */
-export default class SpecField extends React.Component<SpecFieldProps> {
+export default class InputSpec extends React.Component<InputSpecProps> {
 
   childNodes() {
     const commonProps = {
@@ -96,21 +96,21 @@ export default class SpecField extends React.Component<SpecFieldProps> {
     case 'array':
       if(this.props.fieldName === 'text-font') {
         return <InputFont
-          {...commonProps as FieldFontProps}
+          {...commonProps as InputFontProps}
           fonts={this.props.fieldSpec.values}
         />
       } else {
         if (this.props.fieldSpec.length) {
           return <InputArray
-            {...commonProps as FieldArrayProps}
+            {...commonProps as InputArrayProps}
             type={this.props.fieldSpec.value}
             length={this.props.fieldSpec.length}
           />
         } else {
           return <InputDynamicArray
-            {...commonProps as FieldDynamicArrayProps}
+            {...commonProps as InputDynamicArrayProps}
             fieldSpec={this.props.fieldSpec}
-            type={this.props.fieldSpec.value as FieldDynamicArrayProps['type']}
+            type={this.props.fieldSpec.value as InputDynamicArrayProps['type']}
           />
         }
       }

src/components/InputUrl.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { JSX } from 'react'
 import InputString from './InputString'
 import SmallError from './SmallError'
 import { Trans, WithTranslation, withTranslation } from 'react-i18next';
@@ -68,18 +68,18 @@ export type FieldUrlProps = {
   className?: string
 };
 
-type FieldUrlInternalProps = FieldUrlProps & WithTranslation;
+type InputUrlInternalProps = FieldUrlProps & WithTranslation;
 
-type FieldUrlState = {
+type InputUrlState = {
   error?: React.ReactNode
 }
 
-class FieldUrlInternal extends React.Component<FieldUrlInternalProps, FieldUrlState> {
+class InputUrlInternal extends React.Component<InputUrlInternalProps, InputUrlState> {
   static defaultProps = {
     onInput: () => {},
   }
 
-  constructor (props: FieldUrlInternalProps) {
+  constructor (props: InputUrlInternalProps) {
     super(props);
     this.state = {
       error: validate(props.value, props.t),
@@ -115,5 +115,5 @@ class FieldUrlInternal extends React.Component<FieldUrlInternalProps, FieldUrlSt
   }
 }
 
-const FieldUrl = withTranslation()(FieldUrlInternal);
-export default FieldUrl;
+const InputUrl = withTranslation()(InputUrlInternal);
+export default InputUrl;

src/components/LayerList.tsx

@@ -16,7 +16,7 @@ import {
 
 import LayerListGroup from './LayerListGroup'
 import LayerListItem from './LayerListItem'
-import ModalAdd from './ModalAdd'
+import ModalAdd from './modals/ModalAdd'
 
 import type {LayerSpecification, SourceSpecification} from 'maplibre-gl';
 import generateUniqueId from '../libs/document-uid';
@@ -28,7 +28,7 @@ type LayerListContainerProps = {
   layers: LayerSpecification[]
   selectedLayerIndex: number
   onLayersChange(layers: LayerSpecification[]): unknown
-  onLayerSelect(...args: unknown[]): unknown
+  onLayerSelect(index: number): void;
   onLayerDestroy?(...args: unknown[]): unknown
   onLayerCopy(...args: unknown[]): unknown
   onLayerVisibilityToggle(...args: unknown[]): unknown
@@ -50,7 +50,7 @@ class LayerListContainerInternal extends React.Component<LayerListContainerInter
     onLayerSelect: () => {},
   }
   selectedItemRef: React.RefObject<any>;
-  scrollContainerRef: React.RefObject<HTMLElement>;
+  scrollContainerRef: React.RefObject<HTMLElement | null>;
 
   constructor(props: LayerListContainerInternalProps) {
     super(props);
@@ -276,6 +276,7 @@ class LayerListContainerInternal extends React.Component<LayerListContainerInter
 
     return <section
       className="maputnik-layer-list"
+      data-wd-key="layer-list"
       role="complementary"
       aria-label={t("Layers list")}
       ref={this.scrollContainerRef}
@@ -336,7 +337,7 @@ type LayerListProps = LayerListContainerProps & {
 };
 
 const LayerList: React.FC<LayerListProps> = (props) => {
-  const sensors = useSensors(useSensor(PointerSensor));
+  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));
 
   const handleDragEnd = (event: DragEndEvent) => {
     const {active, over} = event;

src/components/LayerListItem.tsx

@@ -21,6 +21,7 @@ const DraggableLabel: React.FC<DraggableLabelProps> = (props) => {
     <IconLayer
       className="layer-handle__icon"
       type={props.layerType}
+      style={{ width: '1em', height: '1em', verticalAlign: 'middle' }}
     />
     <button className="maputnik-layer-list-item-id">
       {props.layerId}
@@ -79,7 +80,7 @@ type LayerListItemProps = {
   isSelected?: boolean
   visibility?: string
   className?: string
-  onLayerSelect(...args: unknown[]): unknown
+  onLayerSelect(index: number): void;
   onLayerCopy?(...args: unknown[]): unknown
   onLayerDestroy?(...args: unknown[]): unknown
   onLayerVisibilityToggle?(...args: unknown[]): unknown

src/components/MapMaplibreGl.tsx

@@ -1,4 +1,4 @@
-import React, {type JSX} from 'react'
+import React from 'react'
 import {createRoot} from 'react-dom/client'
 import MapLibreGl, {LayerSpecification, LngLat, Map, MapOptions, SourceSpecification, StyleSpecification} from 'maplibre-gl'
 import MaplibreInspect from '@maplibre/maplibre-gl-inspect'
@@ -17,17 +17,6 @@ import { withTranslation, WithTranslation } from 'react-i18next'
 import i18next from 'i18next'
 import { Protocol } from "pmtiles";
 
-function renderPopup(
-  popupElement: JSX.Element,
-  mountNode: HTMLElement,
-  popup: MapLibreGl.Popup
-): HTMLElement {
-  const root = createRoot(mountNode);
-  popup.once('close', () => root.unmount());
-  root.render(popupElement);
-  return mountNode as HTMLElement;
-}
-
 function buildInspectStyle(originalMapStyle: StyleSpecification, coloredLayers: HighlightedLayer[], highlightedLayer?: HighlightedLayer) {
   const backgroundLayer = {
     "id": "background",
@@ -61,7 +50,7 @@ function buildInspectStyle(originalMapStyle: StyleSpecification, coloredLayers:
 
 type MapMaplibreGlInternalProps = {
   onDataChange?(event: {map: Map | null}): unknown
-  onLayerSelect(...args: unknown[]): unknown
+  onLayerSelect(index: number): void
   mapStyle: StyleSpecification
   inspectModeEnabled: boolean
   highlightedLayer?: HighlightedLayer
@@ -179,6 +168,7 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
     map.addControl(nav, 'top-right');
 
     const tmpNode = document.createElement('div');
+    const root = createRoot(tmpNode);
 
     const inspectPopup = new MapLibreGl.Popup({
       closeOnClick: false
@@ -197,21 +187,19 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
       buildInspectStyle: (originalMapStyle: StyleSpecification, coloredLayers: HighlightedLayer[]) => buildInspectStyle(originalMapStyle, coloredLayers, this.props.highlightedLayer),
       renderPopup: (features: InspectFeature[]) => {
         if(this.props.inspectModeEnabled) {
-          return renderPopup(
-            <MapMaplibreGlFeaturePropertyPopup features={features} />,
-            tmpNode,
-            inspectPopup
-          );
+          inspectPopup.once('open', () => {
+            root.render(<MapMaplibreGlFeaturePropertyPopup features={features} />);
+          });
+          return tmpNode;
         } else {
-          return renderPopup(
-            <MapMaplibreGlLayerPopup
+          inspectPopup.once('open', () => {
+            root.render(<MapMaplibreGlLayerPopup
               features={features}
               onLayerSelect={this.onLayerSelectById}
               zoom={this.state.zoom}
-            />,
-            tmpNode,
-            inspectPopup
-          );
+            />,);
+          });
+          return tmpNode;
         }
       }
     })
@@ -306,7 +294,7 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
       className="maputnik-map__map"
       role="region"
       aria-label={t("Map view")}
-      ref={x => this.container = x}
+      ref={x => {this.container = x}}
       data-wd-key="maplibre:map"
     ></div>
   }

src/components/MapMaplibreGlFeaturePropertyPopup.tsx

@@ -66,7 +66,7 @@ type FeaturePropertyPopupProps = {
 class FeaturePropertyPopup extends React.Component<FeaturePropertyPopupProps> {
   render() {
     const features = removeDuplicatedFeatures(this.props.features)
-    return <div className="maputnik-feature-property-popup">
+    return <div className="maputnik-feature-property-popup" dir="ltr" data-wd-key="feature-property-popup">
       <table className="maputnik-popup-table">
         <tbody>
           {features.map(renderFeature)}

src/components/MapMaplibreGlLayerPopup.tsx

@@ -104,7 +104,7 @@ class FeatureLayerPopup extends React.Component<FeatureLayerPopupProps> {
       </div>
     })
 
-    return <div className="maputnik-feature-layer-popup">
+    return <div className="maputnik-feature-layer-popup" data-wd-key="feature-layer-popup" dir="ltr">
       {items}
     </div>
   }

src/components/MapOpenLayers.tsx

@@ -29,7 +29,7 @@ type MapOpenLayersInternalProps = {
   mapStyle: object
   accessToken?: string
   style?: object
-  onLayerSelect(...args: unknown[]): unknown
+  onLayerSelect(layerId: string): void
   debugToolbox: boolean
   replaceAccessTokens(...args: unknown[]): unknown
   onChange(...args: unknown[]): unknown
@@ -156,7 +156,7 @@ class MapOpenLayersInternal extends React.Component<MapOpenLayersInternalProps,
     const t = this.props.t;
     return <div className="maputnik-ol-container">
       <div
-        ref={x => this.popupContainer = x}
+        ref={x => {this.popupContainer = x}}
         style={{background: "black"}}
         className="maputnik-popup"
       >
@@ -193,7 +193,7 @@ class MapOpenLayersInternal extends React.Component<MapOpenLayersInternalProps,
       }
       <div
         className="maputnik-ol"
-        ref={x => this.container = x}
+        ref={x => {this.container = x}}
         role="region"
         aria-label={t("Map view")}
         style={{

src/components/_SpecProperty.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
 
-import SpecField, {SpecFieldProps} from './SpecField'
+import FieldSpec, {FieldSpecProps} from './FieldSpec'
 import FunctionButtons from './_FunctionButtons'
 
 import labelFromFieldName from '../libs/label-from-field-name'
 
 
-type SpecPropertyProps = SpecFieldProps & {
+type SpecPropertyProps = FieldSpecProps & {
   onZoomClick(...args: unknown[]): unknown
   onDataClick(...args: unknown[]): unknown
   fieldName?: string
@@ -35,7 +35,7 @@ export default class SpecProperty extends React.Component<SpecPropertyProps> {
 
     const error = errors![fieldType+"."+fieldName as any] as any;
 
-    return <SpecField
+    return <FieldSpec
       {...this.props}
       error={error}
       fieldSpec={this.props.fieldSpec}

src/components/modals/Modal.tsx

@@ -10,7 +10,6 @@ type ModalInternalProps = PropsWithChildren & {
   title: string
   onOpenToggle(value: boolean): unknown
   underlayClickExits?: boolean
-  underlayProps?: any
   className?: string
 } & WithTranslation;
 
@@ -37,18 +36,17 @@ class ModalInternal extends React.Component<ModalInternalProps> {
       return <AriaModal
         titleText={this.props.title}
         underlayClickExits={this.props.underlayClickExits}
-        // @ts-ignore
-        underlayProps={this.props.underlayProps}
         data-wd-key={this.props["data-wd-key"]}
         verticallyCenter={true}
         onExit={this.onClose}
+        dialogClass='maputnik-modal-container'
       >
         <div className={classnames("maputnik-modal", this.props.className)}
           data-wd-key={this.props["data-wd-key"]}
         >
           <header className="maputnik-modal-header">
             <h1 className="maputnik-modal-header-title">{this.props.title}</h1>
-            <span className="maputnik-modal-header-space"></span>
+            <span className="maputnik-space"></span>
             <button className="maputnik-modal-header-toggle"
               title={t("Close modal")}
               onClick={this.onClose}

src/components/modals/ModalAdd.tsx

@@ -1,14 +1,14 @@
 import React from 'react'
-
-import InputButton from './InputButton'
-import Modal from './Modal'
-import FieldType from './FieldType'
-import FieldId from './FieldId'
-import FieldSource from './FieldSource'
-import FieldSourceLayer from './FieldSourceLayer'
-import type {LayerSpecification, SourceSpecification} from 'maplibre-gl'
 import { WithTranslation, withTranslation } from 'react-i18next';
-import { NON_SOURCE_LAYERS } from '../libs/non-source-layers'
+import type {LayerSpecification, SourceSpecification} from 'maplibre-gl'
+
+import InputButton from '../InputButton'
+import Modal from './Modal'
+import FieldType from '../FieldType'
+import FieldId from '../FieldId'
+import FieldSource from '../FieldSource'
+import FieldSourceLayer from '../FieldSourceLayer'
+import { NON_SOURCE_LAYERS } from '../../libs/non-source-layers'
 
 type ModalAddInternalProps = {
   layers: LayerSpecification[]

src/components/modals/ModalDebug.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-
 import { Trans, WithTranslation, withTranslation } from 'react-i18next';
+
 import Modal from './Modal'
 
 
@@ -62,7 +62,7 @@ class ModalDebugInternal extends React.Component<ModalDebugInternalProps> {
         }
       </section>
       <section className="maputnik-modal-section">
-        <h1>Links</h1>
+        <h1>{t("Links")}</h1>
         <p>
           <Trans t={t}>
             <a
@@ -71,7 +71,7 @@ class ModalDebugInternal extends React.Component<ModalDebugInternalProps> {
               href={`https://www.openstreetmap.org/#map=${osmZoom}/${osmLat}/${osmLon}`}
             >
               Open in OSM
-            </a> &mdash; Opens the current view on openstreetmap.org
+            </a>. Opens the current view on openstreetmap.org
           </Trans>
         </p>
       </section>

src/components/modals/ModalExport.tsx

@@ -6,12 +6,12 @@ import {format} from '@maplibre/maplibre-gl-style-spec'
 import {MdMap, MdSave} from 'react-icons/md'
 import {WithTranslation, withTranslation} from 'react-i18next';
 
-import FieldString from './FieldString'
-import InputButton from './InputButton'
+import FieldString from '../FieldString'
+import InputButton from '../InputButton'
 import Modal from './Modal'
-import style from '../libs/style'
-import fieldSpecAdditional from '../libs/field-spec-additional'
-import type {OnStyleChangedCallback, StyleSpecificationWithId} from '../libs/definitions'
+import style from '../../libs/style'
+import fieldSpecAdditional from '../../libs/field-spec-additional'
+import type {OnStyleChangedCallback, StyleSpecificationWithId} from '../../libs/definitions'
 
 
 const MAPLIBRE_GL_VERSION = version;

src/components/modals/ModalLoading.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
-
-import InputButton from './InputButton'
-import Modal from './Modal'
 import { WithTranslation, withTranslation } from 'react-i18next';
 
+import InputButton from '../InputButton'
+import Modal from './Modal'
+
 
 type ModalLoadingInternalProps = {
   isOpen: boolean
@@ -14,21 +14,12 @@ type ModalLoadingInternalProps = {
 
 
 class ModalLoadingInternal extends React.Component<ModalLoadingInternalProps> {
-  underlayOnClick(e: Event) {
-    // This stops click events falling through to underlying modals.
-    e.stopPropagation();
-  }
-
   render() {
     const t = this.props.t;
     return <Modal
       data-wd-key="modal:loading"
       isOpen={this.props.isOpen}
       underlayClickExits={false}
-      underlayProps={{
-        // @ts-ignore
-        onClick: (e: Event) => underlayProps(e)
-      }}
       title={this.props.title}
       onOpenToggle={() => this.props.onCancel()}
     >

src/components/modals/ModalOpen.tsx

@@ -6,11 +6,11 @@ import { Trans, WithTranslation, withTranslation } from 'react-i18next';
 
 import ModalLoading from './ModalLoading'
 import Modal from './Modal'
-import InputButton from './InputButton'
-import InputUrl from './InputUrl'
+import InputButton from '../InputButton'
+import InputUrl from '../InputUrl'
 
-import style from '../libs/style'
-import publicStyles from '../config/styles.json'
+import style from '../../libs/style'
+import publicStyles from '../../config/styles.json'
 
 type PublicStyleProps = {
   url: string

src/components/modals/ModalSettings.tsx

@@ -3,16 +3,16 @@ import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
 import type {LightSpecification, StyleSpecification, TerrainSpecification, TransitionSpecification} from 'maplibre-gl'
 import { WithTranslation, withTranslation } from 'react-i18next';
 
-import FieldArray from './FieldArray'
-import FieldNumber from './FieldNumber'
-import FieldString from './FieldString'
-import FieldUrl from './FieldUrl'
-import FieldSelect from './FieldSelect'
-import FieldEnum from './FieldEnum'
-import FieldColor from './FieldColor'
+import FieldArray from '../FieldArray'
+import FieldNumber from '../FieldNumber'
+import FieldString from '../FieldString'
+import FieldUrl from '../FieldUrl'
+import FieldSelect from '../FieldSelect'
+import FieldEnum from '../FieldEnum'
+import FieldColor from '../FieldColor'
 import Modal from './Modal'
-import fieldSpecAdditional from '../libs/field-spec-additional'
-import type {OnStyleChangedCallback, StyleSpecificationWithId} from '../libs/definitions';
+import fieldSpecAdditional from '../../libs/field-spec-additional'
+import type {OnStyleChangedCallback, StyleSpecificationWithId} from '../../libs/definitions';
 
 type ModalSettingsInternalProps = {
   mapStyle: StyleSpecificationWithId

src/components/modals/ModalSources.tsx

@@ -5,15 +5,15 @@ import type {GeoJSONSourceSpecification, RasterDEMSourceSpecification, RasterSou
 import { WithTranslation, withTranslation } from 'react-i18next';
 
 import Modal from './Modal'
-import InputButton from './InputButton'
-import FieldString from './FieldString'
-import FieldSelect from './FieldSelect'
+import InputButton from '../InputButton'
+import FieldString from '../FieldString'
+import FieldSelect from '../FieldSelect'
 import ModalSourcesTypeEditor, { EditorMode } from './ModalSourcesTypeEditor'
 
-import style from '../libs/style'
-import { deleteSource, addSource, changeSource } from '../libs/source'
-import publicSources from '../config/tilesets.json'
-import { OnStyleChangedCallback, StyleSpecificationWithId } from '../libs/definitions';
+import style from '../../libs/style'
+import { deleteSource, addSource, changeSource } from '../../libs/source'
+import publicSources from '../../config/tilesets.json'
+import { OnStyleChangedCallback, StyleSpecificationWithId } from '../../libs/definitions';
 
 
 type PublicSourceProps = {

src/components/modals/ModalSourcesTypeEditor.tsx

@@ -1,16 +1,18 @@
 import React from 'react'
 import {latest} from '@maplibre/maplibre-gl-style-spec'
-import Block from './Block'
-import FieldUrl from './FieldUrl'
-import FieldNumber from './FieldNumber'
-import FieldSelect from './FieldSelect'
-import FieldDynamicArray from './FieldDynamicArray'
-import FieldArray from './FieldArray'
-import FieldJson from './FieldJson'
-import FieldCheckbox from './FieldCheckbox'
 import { WithTranslation, withTranslation } from 'react-i18next';
 import { TFunction } from 'i18next'
 
+import Block from '../Block'
+import FieldUrl from '../FieldUrl'
+import FieldNumber from '../FieldNumber'
+import FieldSelect from '../FieldSelect'
+import FieldDynamicArray from '../FieldDynamicArray'
+import FieldArray from '../FieldArray'
+import FieldJson from '../FieldJson'
+import FieldCheckbox from '../FieldCheckbox'
+
+
 export type EditorMode = "video" | "image" | "tilejson_vector" | "tile_raster" | "tilejson_raster" | "tilexyz_raster-dem" | "tilejson_raster-dem" | "pmtiles_vector" | "tile_vector" | "geojson_url" | "geojson_json" | null;
 
 type TileJSONSourceEditorProps = {

src/locales/de/translation.json

@@ -89,6 +89,8 @@
   "Layer ID already exists": "Layer-ID existiert bereits",
   "Debug": "Debug",
   "Options": "Optionen",
+  "Links": "Links",
+  "<0>Open in OSM</0>. Opens the current view on openstreetmap.org": "<0>In OSM öffnen</0>. Öffnet die aktuelle Ansicht auf openstreetmap.org",
   "Save Style": "Stil Speichern",
   "Save the JSON style to your computer.": "Speichere den JSON Stil auf deinem Computer.",
   "Save as": "Speichern unter",

src/locales/fr/translation.json

@@ -89,6 +89,8 @@
   "Layer ID already exists": "L'identifiant du calque existe déjà",
   "Debug": "Déboguer",
   "Options": "Options",
+  "Links": "Liens",
+  "<0>Open in OSM</0>. Opens the current view on openstreetmap.org": "<0>Ouvrir dans OSM</0>. Ouvre la vue actuelle sur openstreetmap.org",
   "Save Style": "Enregistrer le style",
   "Save the JSON style to your computer.": "Enregistrer le style JSON sur votre ordinateur.",
   "Save as": "Enregistrer sous",

src/locales/he/translation.json

@@ -89,6 +89,8 @@
   "Layer ID already exists": "מזהה השכבה כבר קיים",
   "Debug": "דיבאג",
   "Options": "אפשרויות",
+  "Links": "קישורים",
+  "<0>Open in OSM</0>. Opens the current view on openstreetmap.org": "<0>פתיחה ב-OSM</0>. פתיחה של התצוגה הנוכחית ב- openstreetmap.org",
   "Save Style": "שמירת הסטייל",
   "Save the JSON style to your computer.": "שמירת הסטייל JSON במחשב שלך.",
   "Save as": "שמירה בשם",
@@ -194,6 +196,5 @@
   "Public access token for LocationIQ services.": "Public access token for LocationIQ services.",
   "Style Renderer": "צייר הסטייל",
   "Choose the default Maputnik renderer for this style.": "בחירת צייר ברירת המחדל של מפוטניק עבור הסטייל הזה",
-  "Language": "שפה",
-  "<0>Open in OSM</0> — Opens the current view on openstreetmap.org": "<0>פתיחה ב-OSM</0> - פתיחה של התצוגה הנוכחית ב- openstreetmap.org"
+  "Language": "שפה"
 }

src/locales/it/translation.json

@@ -89,6 +89,8 @@
   "Layer ID already exists": "L'ID del layer esiste già",
   "Debug": "Debug",
   "Options": "Opzioni",
+  "Links": "Collegamenti",
+  "<0>Open in OSM</0>. Opens the current view on openstreetmap.org": "<0>Apri in OSM</0>. Apre la vista corrente su openstreetmap.org",
   "Save Style": "Opzioni stile",
   "Save the JSON style to your computer.": "Salva lo style JSON nel tuo computer.",
   "Save as": "Salva con nome",

src/locales/ja/translation.json

@@ -89,6 +89,8 @@
   "Layer ID already exists": "レイヤーIDは既に存在します",
   "Debug": "デバッグ",
   "Options": "設定",
+  "Links": "リンク",
+  "<0>Open in OSM</0>. Opens the current view on openstreetmap.org": "現在のビューを <0>openstreetmap.org で開く</0>",
   "Save Style": "スタイルを保存",
   "Save the JSON style to your computer.": "JSONスタイルをコンピュータに保存します。",
   "Save as": "名前を付けて保存",
@@ -195,6 +197,5 @@
   "Style Renderer": "スタイルレンダラ",
   "Choose the default Maputnik renderer for this style.": "このスタイルのデフォルトの Maputnik レンダラを選択してください",
   "Language": "言語",
-  "<0>Open in OSM</0> — Opens the current view on openstreetmap.org": "現在のビューを <0>openstreetmap.org で開く</0>",
   "Layer options": "レイヤー設定"
 }

src/locales/zh/translation.json

@@ -89,6 +89,8 @@
   "Layer ID already exists": "图层ID已存在",
   "Debug": "调试",
   "Options": "选项",
+  "Links": "链接",
+  "<0>Open in OSM</0>. Opens the current view on openstreetmap.org": "在 openstreetmap.org 打开当前视图",
   "Save Style": "保存样式",
   "Save the JSON style to your computer.": "将JSON样式保存到您的计算机。",
   "Save as": "另存为",
@@ -195,6 +197,5 @@
   "Style Renderer": "样式渲染器",
   "Choose the default Maputnik renderer for this style.": "为这种样式选择默认的Maputnik渲染器。",
   "Language": "语言",
-  "<0>Open in OSM</0> — Opens the current view on openstreetmap.org": "在 openstreetmap.org 打开当前视图",
   "Layer options": "图层选项"
 }

src/styles/_layer.scss

@@ -41,12 +41,19 @@
     flex: 1;
     display: flex;
     cursor: grab;
-
+    align-items: center;
     svg {
       margin-right: 4px;
     }
   }
 
+  [dir="rtl"] &-item-handle {
+    svg {
+      margin-right: 0;
+      margin-left: 4px;
+    }
+  }
+
   &-item {
     border: solid 1px transparent;
     font-weight: 400;
@@ -288,6 +295,11 @@
     min-width: 120px;
   }
 
+  [dir="rtl"] &__menu {
+    left: 0;
+    right: auto;
+  }
+
   &__button__svg {
     width: 24px;
     height: 24px;

src/styles/_modal.scss

@@ -2,6 +2,15 @@
 @use "vars";
 
 //MODAL
+
+.maputnik-modal-container {
+  text-align: left !important;
+}
+
+[dir="rtl"] .maputnik-modal-container {
+  text-align: right !important;
+}
+
 .maputnik-modal {
   min-width: 350px;
   max-width: 600px;
@@ -74,10 +83,6 @@
   @include mixins.flex-column;
 }
 
-.maputnik-modal-header-space {
-  @extend .maputnik-space !optional; /* stylelint-disable-line */
-}
-
 //OPEN MODAL
 .maputnik-upload-button {
   @extend .maputnik-big-button !optional; /* stylelint-disable-line */