chore(deps): Bump react from 19.2.4 to 19.2.5

Bumps [react](https://github.com/facebook/react/tree/HEAD/packages/react) from 19.2.4 to 19.2.5.
- [Release notes](https://github.com/facebook/react/releases)
- [Changelog](https://github.com/facebook/react/blob/main/CHANGELOG.md)
- [Commits](https://github.com/facebook/react/commits/v19.2.5/packages/react)

---
updated-dependencies:
- dependency-name: react
  dependency-version: 19.2.5
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

.github/workflows/ci.yml

@@ -56,7 +56,7 @@ jobs:
 
       # Build and upload desktop CLI artifacts
       - name: Set up Go
-        uses: actions/setup-go@4a3601121dd01d1626a1e23e37211e3254c1c06c # v6.4.0
+        uses: actions/setup-go@4b73464bb391d4059bd26b0524d20df3927bd417 # v6.3.0
         with:
           go-version: ^1.23.x
           cache-dependency-path: desktop/go.sum
@@ -118,7 +118,7 @@ jobs:
           node-version-file: '.nvmrc'
       - run: npm ci
       - name: Cypress run
-        uses: cypress-io/github-action@b7a7441d775af8f8b9d19945c10dd689a51dba68 # v7.2.0
+        uses: cypress-io/github-action@c495c3ddffba403ba11be95fffb67e25203b3799 # v7.1.10
         with:
           build: npm run build
           start: npm run start
@@ -142,7 +142,7 @@ jobs:
           node-version-file: '.nvmrc'
       - run: npm ci
       - name: Cypress run
-        uses: cypress-io/github-action@b7a7441d775af8f8b9d19945c10dd689a51dba68 # v7.2.0
+        uses: cypress-io/github-action@c495c3ddffba403ba11be95fffb67e25203b3799 # v7.1.10
         with:
           build: docker build -t maputnik .
           start: docker run --rm --network host maputnik --port=8888

.github/workflows/release.yml

@@ -54,7 +54,7 @@ jobs:
           registry-url: "https://registry.npmjs.org"
 
       - name: Set up Go for desktop build
-        uses: actions/setup-go@4a3601121dd01d1626a1e23e37211e3254c1c06c # v6.4.0
+        uses: actions/setup-go@4b73464bb391d4059bd26b0524d20df3927bd417 # v6.3.0
         with:
           go-version: ^1.23.x
           cache-dependency-path: desktop/go.sum

CHANGELOG.md

@@ -18,7 +18,6 @@
 
 ### 🐞 Bug fixes
 
-- Improved the local style open modal and local file upload.
 - Fixed the Expression editor (for long expressions) being able to be float under other components further down
 - Fixed an issue when clicking on a popup and then clicking on the map again
 - Fix modal close button position

cypress/e2e/maputnik-cypress-helper.ts

@@ -43,12 +43,6 @@ export default class MaputnikCypressHelper {
         }
       });
     },
-    dropFileByFixture: (fixture: string, dropzoneTestId: string) => {
-      this.helper.get.elementByTestId(dropzoneTestId).selectFile("cypress/fixtures/" + fixture, {
-        action: "drag-drop",
-        force: true,
-      });
-    },
     ...this.helper.when,
   };
 

cypress/e2e/maputnik-driver.ts

@@ -143,12 +143,7 @@ export class MaputnikDriver {
     },
     chooseExampleFile: () => {
       this.helper.given.fixture("example-style.json", "example-style.json");
-      this.helper.when.openFileByFixture("example-style.json", "modal:open.dropzone", "modal:open.file.input");
-      this.helper.when.wait(200);
-    },
-    dropExampleFile: () => {
-      this.helper.given.fixture("example-style.json", "example-style.json");
-      this.helper.when.dropFileByFixture("example-style.json", "modal:open.dropzone");
+      this.helper.when.openFileByFixture("example-style.json", "modal:open.file.button", "modal:open.file.input");
       this.helper.when.wait(200);
     },
     setStyle: (

cypress/e2e/modals.cy.ts

@@ -23,11 +23,6 @@ describe("modals", () => {
       then(get.fixture("example-style.json")).shouldEqualToStoredStyle();
     });
 
-    it("upload via drag and drop", () => {
-      when.dropExampleFile();
-      then(get.fixture("example-style.json")).shouldEqualToStoredStyle();
-    });
-
     describe("when click open url", () => {
       beforeEach(() => {
         const styleFileUrl = get.exampleFileUrl();

package-lock.json

@@ -20,7 +20,7 @@
         "@mapbox/mapbox-gl-rtl-text": "^0.4.0",
         "@maplibre/maplibre-gl-geocoder": "^1.9.4",
         "@maplibre/maplibre-gl-inspect": "^1.8.2",
-        "@maplibre/maplibre-gl-style-spec": "^24.8.5",
+        "@maplibre/maplibre-gl-style-spec": "^24.8.4",
         "array-move": "^4.0.0",
         "buffer": "^6.0.3",
         "classnames": "^2.5.1",
@@ -48,7 +48,7 @@
         "ol-mapbox-style": "^13.4.1",
         "pmtiles": "^4.4.1",
         "prop-types": "^15.8.1",
-        "react": "^19.2.4",
+        "react": "^19.2.5",
         "react-accessible-accordion": "^5.0.1",
         "react-aria-menubutton": "^8.0.0",
         "react-aria-modal": "^5.0.2",
@@ -2033,9 +2033,9 @@
       }
     },
     "node_modules/@maplibre/maplibre-gl-style-spec": {
-      "version": "24.8.5",
-      "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-24.8.5.tgz",
-      "integrity": "sha512-EzEJmMt6thioRH7GI9LWS7ahXTcAhAPGWCe6oTP2Ps4YnsXOOAfeqx854lZaiDnwURfHmcCKV1mr6oo0i23x6w==",
+      "version": "24.8.4",
+      "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-24.8.4.tgz",
+      "integrity": "sha512-kvtUcthzQGn7nzwiwIggB7lzHbXIprMboLdsem8yNCRIZluyxs7aNzvMHgmdl/lAuX8bkGrSUMiy/lIBysajmg==",
       "license": "ISC",
       "dependencies": {
         "@mapbox/jsonlint-lines-primitives": "~2.0.2",
@@ -12453,9 +12453,9 @@
       }
     },
     "node_modules/react": {
-      "version": "19.2.4",
-      "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
-      "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
+      "version": "19.2.5",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.5.tgz",
+      "integrity": "sha512-llUJLzz1zTUBrskt2pwZgLq59AemifIftw4aB7JxOqf1HY2FDaGDxgwpAPVzHU1kdWabH7FauP4i1oEeer2WCA==",
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"

package.json

@@ -37,7 +37,7 @@
     "@mapbox/mapbox-gl-rtl-text": "^0.4.0",
     "@maplibre/maplibre-gl-geocoder": "^1.9.4",
     "@maplibre/maplibre-gl-inspect": "^1.8.2",
-    "@maplibre/maplibre-gl-style-spec": "^24.8.5",
+    "@maplibre/maplibre-gl-style-spec": "^24.8.4",
     "array-move": "^4.0.0",
     "buffer": "^6.0.3",
     "classnames": "^2.5.1",
@@ -65,7 +65,7 @@
     "ol-mapbox-style": "^13.4.1",
     "pmtiles": "^4.4.1",
     "prop-types": "^15.8.1",
-    "react": "^19.2.4",
+    "react": "^19.2.5",
     "react-accessible-accordion": "^5.0.1",
     "react-aria-menubutton": "^8.0.0",
     "react-aria-modal": "^5.0.2",

src/components/modals/ModalOpen.tsx

@@ -1,4 +1,4 @@
-import React, { type DragEvent, type FormEvent } from "react";
+import React, { type FormEvent } from "react";
 import { MdFileUpload } from "react-icons/md";
 import { MdAddCircleOutline } from "react-icons/md";
 import { Trans, type WithTranslation, withTranslation } from "react-i18next";
@@ -51,20 +51,16 @@ type ModalOpenInternalProps = {
 
 type ModalOpenState = {
   styleUrl: string
-  isDragOver: boolean
   error?: string | null
   activeRequest?: any
   activeRequestUrl?: string | null
 };
 
 class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpenState> {
-  private fileInputRef = React.createRef<HTMLInputElement>();
-
   constructor(props: ModalOpenInternalProps) {
     super(props);
     this.state = {
-      styleUrl: "",
-      isDragOver: false,
+      styleUrl: ""
     };
   }
 
@@ -202,45 +198,12 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
 
   onOpenToggle() {
     this.setState({
-      styleUrl: "",
-      isDragOver: false,
+      styleUrl: ""
     });
     this.clearError();
     this.props.onOpenToggle();
   }
 
-  onBrowseClick = async () => {
-    if (typeof window.showOpenFilePicker === "function") {
-      await this.onOpenFile();
-      return;
-    }
-
-    this.fileInputRef.current?.click();
-  };
-
-  onFileDragOver = (e: DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    if (!this.state.isDragOver) {
-      this.setState({ isDragOver: true });
-    }
-  };
-
-  onFileDragLeave = (e: DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    this.setState({ isDragOver: false });
-  };
-
-  onFileDrop = (e: DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    this.setState({ isDragOver: false });
-    this.onFileChanged(e.dataTransfer.files);
-  };
-
   onChangeUrl = (url: string) => {
     this.setState({
       styleUrl: url,
@@ -281,35 +244,19 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
           <section className="maputnik-modal-section">
             <h1>{t("Open local Style")}</h1>
             <p>{t("Open a local JSON style from your computer.")}</p>
-            <div
-              data-wd-key="modal:open.dropzone"
-              className={`maputnik-upload-dropzone${this.state.isDragOver ? " maputnik-upload-dropzone--active" : ""}`}
-              role="button"
-              tabIndex={0}
-              onDragOver={this.onFileDragOver}
-              onDragLeave={this.onFileDragLeave}
-              onDrop={this.onFileDrop}
-              onClick={() => void this.onBrowseClick()}
-              onKeyDown={(e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  void this.onBrowseClick();
-                }
-              }}
-            >
-              <div className="maputnik-upload-dropzone-content">
-                <MdFileUpload className="maputnik-upload-dropzone-icon" aria-hidden="true" />
-                <p className="maputnik-upload-dropzone-text">
-                  {t("Drag and drop a style JSON file here or click to browse")}
-                </p>
-              </div>
-              <input
-                ref={this.fileInputRef}
-                data-wd-key="modal:open.file.input"
-                type="file"
-                style={{ display: "none" }}
-                onChange={(e) => this.onFileChanged(e.target.files)}
-              />
+            <div>
+              {typeof window.showOpenFilePicker === "function" ? (
+                <InputButton
+                  data-wd-key="modal:open.file.button"
+                  className="maputnik-big-button"
+                  onClick={this.onOpenFile}><MdFileUpload /> {t("Open Style")}
+                </InputButton>
+              ) : (
+                <label>
+                  <a className="maputnik-button maputnik-upload-button" aria-label={t("Open Style")}><MdFileUpload /> {t("Open Style")}</a>
+                  <input data-wd-key="modal:open.file.input" type="file" style={{ display: "none" }} onChange={(e) => this.onFileChanged(e.target.files)} />
+                </label>
+              )}
             </div>
           </section>
 

src/locales/de/translation.json

@@ -199,6 +199,5 @@
   "Video URL": "Video-URL",
   "View": "Ansicht",
   "You've entered an old style filter.": "Du hast einen alten Filter-Stil eingegeben.",
-  "Zoom": "Zoom",
-  "Drag and drop a style JSON file here or click to browse": "Ziehen Sie eine Style-JSON-Datei hierher oder klicken Sie, um zu durchsuchen"
+  "Zoom": "Zoom"
 }

src/locales/en/translation.json

@@ -1,3 +0,0 @@
-{
-  "Drag and drop a style JSON file here or click to browse": "Drag and drop a style JSON file here or click to browse"
-}

src/locales/fr/translation.json

@@ -199,6 +199,5 @@
   "Video URL": "URL de la vidéo",
   "View": "Vue",
   "You've entered an old style filter.": "Vous avez entré un ancien style de filtre.",
-  "Zoom": "Zoom",
-  "Drag and drop a style JSON file here or click to browse": "Faites glisser un fichier JSON de style ici ou cliquez pour parcourir"
+  "Zoom": "Zoom"
 }

src/locales/he/translation.json

@@ -199,6 +199,5 @@
   "Video URL": "כתובת וידאו",
   "View": "תצוגה",
   "You've entered an old style filter.": "הכנסתם סינון מסוג ישן,",
-  "Zoom": "זום",
-  "Drag and drop a style JSON file here or click to browse": "גרור ושחרר כאן קובץ JSON של סגנון או לחץ כדי לעיין"
+  "Zoom": "זום"
 }

src/locales/it/translation.json

@@ -199,6 +199,5 @@
   "Video URL": "Indirizzo video",
   "View": "Vista",
   "You've entered an old style filter.": "Hai inserito uno stile filtro obsoleto.",
-  "Zoom": "Zoom",
-  "Drag and drop a style JSON file here or click to browse": "Trascina e rilascia qui un file JSON dello stile o fai clic per sfogliare"
+  "Zoom": "Zoom"
 }

src/locales/ja/translation.json

@@ -199,6 +199,5 @@
   "Video URL": "動画URL",
   "View": "表示",
   "You've entered an old style filter.": "旧型フィルタを使用しております。",
-  "Zoom": "ズーム",
-  "Drag and drop a style JSON file here or click to browse": "ここにスタイルのJSONファイルをドラッグ＆ドロップするか、クリックして参照してください"
+  "Zoom": "ズーム"
 }

src/locales/ko/translation.json

@@ -199,6 +199,5 @@
   "Video URL": "비디오 URL",
   "View": "보기",
   "You've entered an old style filter.": "이전 스타일 필터를 입력했습니다.",
-  "Zoom": "줌",
-  "Drag and drop a style JSON file here or click to browse": "여기에 스타일 JSON 파일을 끌어다 놓거나 클릭하여 찾아보세요"
+  "Zoom": "줌"
 }

src/locales/zh/translation.json

@@ -199,6 +199,5 @@
   "Video URL": "视频URL",
   "View": "视图",
   "You've entered an old style filter.": "您输入了一个旧风格的过滤器。",
-  "Zoom": "缩放",
-  "Drag and drop a style JSON file here or click to browse": "将样式 JSON 文件拖放到此处或点击以浏览"
+  "Zoom": "缩放"
 }

src/styles/_modal.scss

@@ -88,47 +88,6 @@
   @extend .maputnik-big-button !optional; /* stylelint-disable-line */
 }
 
-.maputnik-upload-dropzone {
-  border: 2px dashed vars.$color-midgray;
-  border-radius: 6px;
-  padding: vars.$margin-4 vars.$margin-3;
-  text-align: center;
-  cursor: pointer;
-  transition: border-color 120ms ease, background-color 120ms ease;
-
-  &:hover,
-  &:focus-visible {
-    border-color: vars.$color-lowgray;
-    background-color: rgba(255, 255, 255, 0.03);
-  }
-
-  &:focus-visible {
-    outline: 2px solid vars.$color-lowgray;
-    outline-offset: 2px;
-  }
-}
-
-.maputnik-upload-dropzone--active {
-  border-color: vars.$color-lowgray;
-  background-color: rgba(255, 255, 255, 0.04);
-}
-
-.maputnik-upload-dropzone-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.maputnik-upload-dropzone-icon {
-  font-size: 28px;
-  color: vars.$color-midgray;
-}
-
-.maputnik-upload-dropzone-text {
-  margin: vars.$margin-2 0 0;
-  color: vars.$color-lowgray;
-}
-
 .maputnik-style-gallery-container {
   flex-shrink: 1;
 }