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/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

@@ -21,6 +21,11 @@ export default class MaputnikCypressHelper {
       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

@@ -92,7 +92,7 @@
         "@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",
@@ -4839,9 +4839,9 @@
       "dev": true
     },
     "node_modules/cypress": {
-      "version": "15.1.0",
+      "version": "15.2.0",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-15.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-15.2.0.tgz",
-      "integrity": "sha512-jS4EfyOa2W5KXCN02WBdmy4bpBBmLGe+INhZeCvzRksfJuzBSYp3rNg2G+hfOwPzM+wwMwOYCo/kEnH+5RsSjA==",
+      "integrity": "sha512-J4ehSzOSb58SkXyldCe9y/oZ8ep8Bl6+q9kDUjnkqNqc2ZKzDq5KSbhIc2lHFAFR5Jtj10oNqr9JRAZbr8DA8A==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",

package.json

@@ -124,7 +124,7 @@
     "@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 ModalSettings from './modals/ModalSettings'
-import ModalExport from './ModalExport'
+import ModalExport from './modals/ModalExport'
-import ModalSources from './ModalSources'
+import ModalSources from './modals/ModalSources'
-import ModalOpen from './ModalOpen'
+import ModalOpen from './modals/ModalOpen'
-import ModalShortcuts from './ModalShortcuts'
+import ModalShortcuts from './modals/ModalShortcuts'
-import ModalDebug from './ModalDebug'
+import ModalDebug from './modals/ModalDebug'
 
 import {downloadGlyphsMetadata, downloadSpriteMetadata} from '../libs/metadata'
 import style from '../libs/style'

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/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,10 +0,0 @@
-import React, { type CSSProperties } from 'react'
-import { BsDiamondFill } from 'react-icons/bs';
-
-const IconBackground: React.FC<{style: CSSProperties | undefined}> = (props) => {
-  return (
-    <BsDiamondFill {...props} />
-  )
-}
-
-export default IconBackground;

src/components/IconCircle.tsx

@@ -1,9 +0,0 @@
-import React, { type CSSProperties } from 'react'
-import {MdOutlineCircle} from 'react-icons/md'
-
-const IconCircle: React.FC<{style: CSSProperties | undefined}> = (props) => {
-  return (
-    <MdOutlineCircle {...props} />
-  )
-}
-export default IconCircle;

src/components/IconFill.tsx

@@ -1,10 +0,0 @@
-import React, { type CSSProperties } from 'react'
-import { BsDiamond } from 'react-icons/bs';
-
-
-const IconFill: React.FC<{style: CSSProperties | undefined}> = (props) => {
-  return (
-    <BsDiamond {...props} />
-  )
-}
-export default IconFill;

src/components/IconLayer.tsx

@@ -1,12 +1,9 @@
 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
@@ -17,16 +14,16 @@ type IconLayerProps = {
 const IconLayer: React.FC<IconLayerProps> = (props) => {
   const iconProps = { style: props.style }
   switch(props.type) {
-  case 'fill-extrusion': return <IconBackground {...iconProps} />
+  case 'fill-extrusion': return <BsDiamondFill {...iconProps} />
-  case 'raster': return <IconFill {...iconProps} />
+  case 'raster': return <BsDiamond {...iconProps} />
-  case 'hillshade': return <IconFill {...iconProps} />
+  case 'hillshade': return <BsDiamond {...iconProps} />
-  case 'heatmap': return <IconFill {...iconProps} />
+  case 'heatmap': return <BsDiamond {...iconProps} />
-  case 'fill': return <IconFill {...iconProps} />
+  case 'fill': return <BsDiamond {...iconProps} />
-  case 'background': return <IconBackground {...iconProps} />
+  case 'background': return <BsDiamondFill {...iconProps} />
-  case 'line': return <IconLine {...iconProps} />
+  case 'line': return <IoAnalyticsOutline {...iconProps} />
-  case 'symbol': return <IconSymbol {...iconProps} />
+  case 'symbol': return <BsFonts {...iconProps} />
-  case 'circle': return <IconCircle {...iconProps} />
+  case 'circle': return <MdOutlineCircle {...iconProps} />
-  default: return <IconMissing {...iconProps} />
+  default: return <MdPriorityHigh {...iconProps} />
   }
 }
 

src/components/IconLine.tsx

@@ -1,11 +0,0 @@
-import React, { type CSSProperties } from 'react'
-import { IoAnalyticsOutline } from 'react-icons/io5';
-
-
-const IconLine: React.FC<{style: CSSProperties | undefined}> = (props) => {
-  return (
-    <IoAnalyticsOutline {...props} />
-  )
-}
-
-export default IconLine;

src/components/IconMissing.tsx

@@ -1,9 +0,0 @@
-import React, { type CSSProperties } from 'react'
-import {MdPriorityHigh} from 'react-icons/md'
-
-const IconMissing: React.FC<{style: CSSProperties | undefined}> = (props) => {
-  return (
-    <MdPriorityHigh {...props} />
-  )
-}
-export default IconMissing;

src/components/IconSymbol.tsx

@@ -1,10 +0,0 @@
-import React, { type CSSProperties } from 'react'
-import { BsFonts } from 'react-icons/bs';
-
-
-const IconSymbol: React.FC<{style: CSSProperties | undefined}> = (props) => {
-  return (
-    <BsFonts {...props} />
-  )
-}
-export default IconSymbol;

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/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);
+const InputDynamicArray = withTranslation()(InputDynamicArrayInternal);
-export default FieldDynamicArray;
+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/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 InputArray, { InputArrayProps } from './InputArray'
-import InputDynamicArray, { FieldDynamicArrayProps } from './InputDynamicArray'
+import InputDynamicArray, { InputDynamicArrayProps } from './InputDynamicArray'
-import InputFont, { FieldFontProps } from './InputFont'
+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

@@ -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);
+const InputUrl = withTranslation()(InputUrlInternal);
-export default FieldUrl;
+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';

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",
@@ -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(
+          inspectPopup.once('open', () => {
-            <MapMaplibreGlFeaturePropertyPopup features={features} />,
+            root.render(<MapMaplibreGlFeaturePropertyPopup features={features} />);
-            tmpNode,
+          });
-            inspectPopup
+          return tmpNode;
-          );
         } else {
-          return renderPopup(
+          inspectPopup.once('open', () => {
-            <MapMaplibreGlLayerPopup
+            root.render(<MapMaplibreGlLayerPopup
               features={features}
               onLayerSelect={this.onLayerSelectById}
               zoom={this.state.zoom}
-            />,
+            />,);
-            tmpNode,
+          });
-            inspectPopup
+          return tmpNode;
-          );
         }
       }
     })

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/_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 FieldString from '../FieldString'
-import InputButton from './InputButton'
+import InputButton from '../InputButton'
 import Modal from './Modal'
-import style from '../libs/style'
+import style from '../../libs/style'
-import fieldSpecAdditional from '../libs/field-spec-additional'
+import fieldSpecAdditional from '../../libs/field-spec-additional'
-import type {OnStyleChangedCallback, StyleSpecificationWithId} from '../libs/definitions'
+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 InputButton from '../InputButton'
-import InputUrl from './InputUrl'
+import InputUrl from '../InputUrl'
 
-import style from '../libs/style'
+import style from '../../libs/style'
-import publicStyles from '../config/styles.json'
+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 FieldArray from '../FieldArray'
-import FieldNumber from './FieldNumber'
+import FieldNumber from '../FieldNumber'
-import FieldString from './FieldString'
+import FieldString from '../FieldString'
-import FieldUrl from './FieldUrl'
+import FieldUrl from '../FieldUrl'
-import FieldSelect from './FieldSelect'
+import FieldSelect from '../FieldSelect'
-import FieldEnum from './FieldEnum'
+import FieldEnum from '../FieldEnum'
-import FieldColor from './FieldColor'
+import FieldColor from '../FieldColor'
 import Modal from './Modal'
-import fieldSpecAdditional from '../libs/field-spec-additional'
+import fieldSpecAdditional from '../../libs/field-spec-additional'
-import type {OnStyleChangedCallback, StyleSpecificationWithId} from '../libs/definitions';
+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 InputButton from '../InputButton'
-import FieldString from './FieldString'
+import FieldString from '../FieldString'
-import FieldSelect from './FieldSelect'
+import FieldSelect from '../FieldSelect'
 import ModalSourcesTypeEditor, { EditorMode } from './ModalSourcesTypeEditor'
 
-import style from '../libs/style'
+import style from '../../libs/style'
-import { deleteSource, addSource, changeSource } from '../libs/source'
+import { deleteSource, addSource, changeSource } from '../../libs/source'
-import publicSources from '../config/tilesets.json'
+import publicSources from '../../config/tilesets.json'
-import { OnStyleChangedCallback, StyleSpecificationWithId } from '../libs/definitions';
+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": "שפה",
+  "Language": "שפה"
-  "<0>Open in OSM</0> — Opens the current view on openstreetmap.org": "<0>פתיחה ב-OSM</0> - פתיחה של התצוגה הנוכחית ב- openstreetmap.org"
 }

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/_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 */