Merge branch 'main' into codex/replace-react-sortable-hoc-with-dnd-kit

2026-02-11 07:00:00 +00:00 · 2025-07-05 14:44:44 +02:00
parent 5a2b81a830 eb985f4d95
commit f3bc0955d2
19 changed files with 299 additions and 120 deletions
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -0,0 +1,43 @@
+Maputnik is a MapLibre style editor written using React and TypeScript.
+
+To get started, install all npm packages:
+
+```
+npm install
+```
+
+Verify code correctness by running ESLint:
+
+```
+npm run lint
+```
+
+Or try fixing lint issues with:
+
+```
+npm run lint -- --fix
+```
+
+The project type checked and built with:
+
+```
+npm run build
+```
+
+To run the tests make sure that xvfb is installed:
+
+```
+apt run xvfb
+```
+
+Run the development server in the background with Vite:
+
+```
+nohup npm run start &
+```
+
+Then start the Cypress tests with:
+
+```
+xvfb-run -a npm run test
+```
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,11 +14,13 @@
 - When loading a style into localStorage that causes a QuotaExceededError, purge localStorage and retry
 - Remove react-autobind dependency
 - Remove usage of legacy `childContextTypes` API
+- Replace react-autocomplete with Downshift in the autocomplete component
 - _...Add new stuff here..._

 ### 🐞 Bug fixes

 - Fix incorrect handing of network error response (#944)
+- Show an error when adding a layer with a duplicate ID
 - _...Add new stuff here..._

 ## 2.1.1
--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -8,6 +8,7 @@ export default defineConfig({
      exclude: "cypress/**/*.*",
    },
  },
+
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
@@ -20,4 +21,11 @@ export default defineConfig({
      openMode: 0,
    },
  },
+
+  component: {
+    devServer: {
+      framework: "react",
+      bundler: "vite",
+    },
+  },
 });
--- a/cypress/e2e/modals.cy.ts
+++ b/cypress/e2e/modals.cy.ts
@@ -272,6 +272,22 @@ describe("modals", () => {

  });

+  describe("add layer", () => {
+    beforeEach(() => {
+      when.setStyle("layer");
+      when.modal.open();
+    });
+
+    it("shows duplicate id error", () => {
+      when.setValue("add-layer.layer-id.input", "background");
+      when.click("add-layer");
+      then(get.elementByTestId("modal:add-layer")).shouldExist();
+      then(get.element(".maputnik-modal-error")).shouldContainText(
+        "Layer ID already exists"
+      );
+    });
+  });
+
  describe("sources", () => {
    it("toggle");
  });
--- a/cypress/support/component-index.html
+++ b/cypress/support/component-index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>
--- a/cypress/support/component.ts
+++ b/cypress/support/component.ts
@@ -0,0 +1,37 @@
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+import { mount } from 'cypress/react'
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  /* eslint-disable @typescript-eslint/no-namespace */
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(<MyComponent />)
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
        "codemirror": "^5.65.19",
        "color": "^5.0.0",
        "detect-browser": "^5.3.0",
+        "downshift": "^9.0.9",
        "events": "^3.3.0",
        "file-saver": "^2.0.5",
        "i18next": "^25.3.1",
@@ -48,7 +49,6 @@
        "react-accessible-accordion": "^5.0.1",
        "react-aria-menubutton": "^7.0.3",
        "react-aria-modal": "^5.0.2",
-        "react-autocomplete": "^1.8.1",
        "react-collapse": "^5.1.1",
        "react-color": "^2.19.3",
        "react-dom": "^18.2.0",
@@ -83,7 +83,6 @@
        "@types/react": "^18.2.67",
        "@types/react-aria-menubutton": "^6.2.14",
        "@types/react-aria-modal": "^5.0.0",
-        "@types/react-autocomplete": "^1.8.11",
        "@types/react-collapse": "^5.0.4",
        "@types/react-color": "^3.0.13",
        "@types/react-dom": "^18.2.22",
@@ -3168,16 +3167,6 @@
        "focus-trap": "^7.4.3"
      }
    },
-    "node_modules/@types/react-autocomplete": {
-      "version": "1.8.11",
-      "resolved": "https://registry.npmjs.org/@types/react-autocomplete/-/react-autocomplete-1.8.11.tgz",
-      "integrity": "sha512-JYaD/OGfVFMK5NaGOCAd25QRs4MEevapn38xvYWjwo5brxrUMo2PucYmShTfuTX99r80UtncCMDrFZ9MGIVyvQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
    "node_modules/@types/react-collapse": {
      "version": "5.0.4",
      "resolved": "https://registry.npmjs.org/@types/react-collapse/-/react-collapse-5.0.4.tgz",
@@ -4744,6 +4733,12 @@
      "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
      "dev": true
    },
+    "node_modules/compute-scroll-into-view": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.1.1.tgz",
+      "integrity": "sha512-VRhuHOLoKYOy4UbilLbUzbYg93XLjv2PncJC50EuTWPA3gaja1UjBsUP/D/9/juV3vQFr6XBEzn9KCAHdUvOHw==",
+      "license": "MIT"
+    },
    "node_modules/concat-map": {
      "version": "0.0.1",
      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -5265,11 +5260,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/dom-scroll-into-view": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/dom-scroll-into-view/-/dom-scroll-into-view-1.0.1.tgz",
-      "integrity": "sha512-1Dmy6uH1vRcm2+Lvggyrlc04cMh+mr+VA+qcgs085hAEZp+v+6NT/xhRjfc6vRc7965sCSDdQcw063VkG+eNmQ=="
-    },
    "node_modules/dom-serializer": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
@@ -5335,6 +5325,28 @@
        "url": "https://github.com/fb55/domutils?sponsor=1"
      }
    },
+    "node_modules/downshift": {
+      "version": "9.0.9",
+      "resolved": "https://registry.npmjs.org/downshift/-/downshift-9.0.9.tgz",
+      "integrity": "sha512-ygOT8blgiz5liDuEFAIaPeU4dDEa+w9p6PHVUisPIjrkF5wfR59a52HpGWAVVMoWnoFO8po2mZSScKZueihS7g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.24.5",
+        "compute-scroll-into-view": "^3.1.0",
+        "prop-types": "^15.8.1",
+        "react-is": "18.2.0",
+        "tslib": "^2.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.12.0"
+      }
+    },
+    "node_modules/downshift/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
+      "license": "MIT"
+    },
    "node_modules/dunder-proto": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -10817,19 +10829,6 @@
        "react-dom": ">=16.3.0"
      }
    },
-    "node_modules/react-autocomplete": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/react-autocomplete/-/react-autocomplete-1.8.1.tgz",
-      "integrity": "sha512-YQGVN5POdcI3G89wUVWnJhk9rLF6JeB6Ik6xnNpfvSMG4tJkksBzqOE4mkFNGqEz+2AaQw13xNmVXresg9E3zg==",
-      "dependencies": {
-        "dom-scroll-into-view": "1.0.1",
-        "prop-types": "^15.5.10"
-      },
-      "peerDependencies": {
-        "react": "^0.14.7 || ^15.0.0-0 || ^16.0.0-0",
-        "react-dom": "^0.14.7 || ^15.0.0-0 || ^16.0.0-0"
-      }
-    },
    "node_modules/react-collapse": {
      "version": "5.1.1",
      "resolved": "https://registry.npmjs.org/react-collapse/-/react-collapse-5.1.1.tgz",
--- a/package.json
+++ b/package.json
@@ -60,7 +60,7 @@
    "react-accessible-accordion": "^5.0.1",
    "react-aria-menubutton": "^7.0.3",
    "react-aria-modal": "^5.0.2",
-    "react-autocomplete": "^1.8.1",
+    "downshift": "^9.0.9",
    "react-collapse": "^5.1.1",
    "react-color": "^2.19.3",
    "react-dom": "^18.2.0",
@@ -114,7 +114,6 @@
    "@types/react": "^18.2.67",
    "@types/react-aria-menubutton": "^6.2.14",
    "@types/react-aria-modal": "^5.0.0",
-    "@types/react-autocomplete": "^1.8.11",
    "@types/react-collapse": "^5.0.4",
    "@types/react-color": "^3.0.13",
    "@types/react-dom": "^18.2.22",
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -876,8 +876,8 @@ export default class App extends React.Component<any, AppState> {
    this.setModal(modalName, !this.state.isOpen[modalName]);
  }

-  onSetFileHandle(fileHandle: FileSystemFileHandle | null) {
-    this.setState({fileHandle: fileHandle});
+  onSetFileHandle = (fileHandle: FileSystemFileHandle | null) => {
+    this.setState({ fileHandle });
  }

  onChangeOpenlayersDebug = (key: keyof AppState["openlayersDebugOptions"], value: boolean) => {
--- a/src/components/FieldSourceLayer.tsx
+++ b/src/components/FieldSourceLayer.tsx
@@ -29,7 +29,6 @@ class FieldSourceLayerInternal extends React.Component<FieldSourceLayerInternalP
      error={this.props.error}
    >
      <InputAutocomplete
-        keepMenuWithinWindowBounds={!!this.props.isFixed}
        value={this.props.value}
        onChange={this.props.onChange}
        options={this.props.sourceLayerIds?.map(l => [l, l])}
--- a/src/components/InputAutocomplete.cy.tsx
+++ b/src/components/InputAutocomplete.cy.tsx
@@ -0,0 +1,18 @@
+import InputAutocomplete from './InputAutocomplete'
+import { mount } from 'cypress/react'
+
+const fruits = ['apple', 'banana', 'cherry'];
+
+describe('<InputAutocomplete />', () => {
+  it('filters options when typing', () => {
+    mount(
+      <InputAutocomplete aria-label="Fruit" options={fruits.map(f => [f, f])} />
+    );
+    cy.get('input').focus();
+    cy.get('.maputnik-autocomplete-menu-item').should('have.length', 3);
+    cy.get('input').type('ch');
+    cy.get('.maputnik-autocomplete-menu-item').should('have.length', 1).and('contain', 'cherry');
+    cy.get('.maputnik-autocomplete-menu-item').click();
+    cy.get('input').should('have.value', 'cherry');
+  });
+});
--- a/src/components/InputAutocomplete.tsx
+++ b/src/components/InputAutocomplete.tsx
@@ -1,100 +1,116 @@
 import React from 'react'
 import classnames from 'classnames'
-import Autocomplete from 'react-autocomplete'
+import {useCombobox} from 'downshift'

-
-const MAX_HEIGHT = 140;
+const MAX_HEIGHT = 140

 export type InputAutocompleteProps = {
  value?: string
-  options: any[]
-  onChange(value: string | undefined): unknown
-  keepMenuWithinWindowBounds?: boolean
+  options?: any[]
+  onChange?(value: string | undefined): unknown
  'aria-label'?: string
 };

-export default class InputAutocomplete extends React.Component<InputAutocompleteProps> {
-  state = {
-    maxHeight: MAX_HEIGHT
-  }
+export default function InputAutocomplete({
+  value,
+  options = [],
+  onChange = () => {},
+  'aria-label': ariaLabel,
+}: InputAutocompleteProps) {
+  const [input, setInput] = React.useState(value || '')
+  const menuRef = React.useRef<HTMLDivElement>(null)
+  const [maxHeight, setMaxHeight] = React.useState(MAX_HEIGHT)

-  autocompleteMenuEl: HTMLDivElement | null = null;
+  const filteredItems = React.useMemo(() => {
+    const lv = input.toLowerCase()
+    return options.filter((item) => item[0].toLowerCase().includes(lv))
+  }, [options, input])

-  static defaultProps = {
-    onChange: () => {},
-    options: [],
-  }
-
-  calcMaxHeight() {
-    if(this.props.keepMenuWithinWindowBounds) {
-      const maxHeight = window.innerHeight - this.autocompleteMenuEl!.getBoundingClientRect().top;
-      const limitedMaxHeight = Math.min(maxHeight, MAX_HEIGHT);
-
-      if(limitedMaxHeight != this.state.maxHeight) {
-        this.setState({
-          maxHeight: limitedMaxHeight
-        })
-      }
+  const calcMaxHeight = React.useCallback(() => {
+    if (menuRef.current) {
+      const space = window.innerHeight - menuRef.current.getBoundingClientRect().top
+      setMaxHeight(Math.min(space, MAX_HEIGHT))
    }
-  }
+  }, [])

-  componentDidMount() {
-    this.calcMaxHeight();
-  }
+  const {
+    isOpen,
+    getMenuProps,
+    getInputProps,
+    getItemProps,
+    highlightedIndex,
+    openMenu,
+  } = useCombobox({
+    items: filteredItems,
+    inputValue: input,
+    itemToString: (item) => (item ? item[0] : ''),
+    stateReducer: (_state, action) => {
+      if (action.type === useCombobox.stateChangeTypes.InputClick) {
+        return {...action.changes, isOpen: true}
+      }
+      return action.changes
+    },
+    onSelectedItemChange: ({selectedItem}) => {
+      const v = selectedItem ? selectedItem[0] : ''
+      setInput(v)
+      onChange(selectedItem ? selectedItem[0] : undefined)
+    },
+    onInputValueChange: ({inputValue: v}) => {
+      if (typeof v === 'string') {
+        setInput(v)
+        onChange(v === '' ? undefined : v)
+        openMenu()
+      }
+    },
+  })

-  componentDidUpdate() {
-    this.calcMaxHeight();
-  }
+  React.useEffect(() => {
+    if (isOpen) {
+      calcMaxHeight()
+    }
+  }, [isOpen, calcMaxHeight])

-  onChange(v: string) {
-    this.props.onChange(v === "" ? undefined : v);
-  }
+  React.useEffect(() => {
+    window.addEventListener('resize', calcMaxHeight)
+    return () => window.removeEventListener('resize', calcMaxHeight)
+  }, [calcMaxHeight])

-  render() {
-    return <div
-      ref={(el) => {
-        this.autocompleteMenuEl = el;
-      }}
-    >
-      <Autocomplete
-        menuStyle={{
-          position: "fixed",
-          overflow: "auto",
-          maxHeight: this.state.maxHeight,
-          zIndex: '998'
-        }}
-        wrapperProps={{
-          className: "maputnik-autocomplete",
-          style: {}
-        }}
-        inputProps={{
-          'aria-label': this.props['aria-label'],
-          className: "maputnik-string",
-          spellCheck: false
-        }}
-        value={this.props.value}
-        items={this.props.options}
-        getItemValue={(item) => item[0]}
-        onSelect={v => this.onChange(v)}
-        onChange={(_e, v) => this.onChange(v)}
-        shouldItemRender={(item, value="") => {
-          if (typeof(value) === "string") {
-            return item[0].toLowerCase().indexOf(value.toLowerCase()) > -1
-          }
-          return false
-        }}
-        renderItem={(item, isHighlighted) => (
-          <div
-            key={item[0]}
-            className={classnames({
-              "maputnik-autocomplete-menu-item": true,
-              "maputnik-autocomplete-menu-item-selected": isHighlighted,
-            })}
-          >
-            {item[1]}
-          </div>
-        )}
+  React.useEffect(() => {
+    setInput(value || '')
+  }, [value])
+
+  return (
+    <div className="maputnik-autocomplete">
+      <input
+        {...getInputProps({
+          'aria-label': ariaLabel,
+          className: 'maputnik-string',
+          spellCheck: false,
+          onFocus: () => openMenu(),
+        })}
      />
+      <div
+        {...getMenuProps({}, {suppressRefError: true})}
+        ref={menuRef}
+        style={{position: 'fixed', overflow: 'auto', maxHeight, zIndex: 998}}
+        className="maputnik-autocomplete-menu"
+      >
+        {isOpen &&
+          filteredItems.map((item, index) => (
+            <div
+              key={item[0]}
+              {...getItemProps({
+                item,
+                index,
+                className: classnames('maputnik-autocomplete-menu-item', {
+                  'maputnik-autocomplete-menu-item-selected': highlightedIndex === index,
+                }),
+              })}
+            >
+              {item[1]}
+            </div>
+          ))}
+      </div>
    </div>
-  }
+  )
 }
--- a/src/components/ModalAdd.tsx
+++ b/src/components/ModalAdd.tsx
@@ -23,10 +23,16 @@ type ModalAddState = {
  id: string
  source?: string
  'source-layer'?: string
+  error?: string | null
 };

 class ModalAddInternal extends React.Component<ModalAddInternalProps, ModalAddState> {
  addLayer = () => {
+    if (this.props.layers.some(l => l.id === this.state.id)) {
+      this.setState({ error: this.props.t('Layer ID already exists') })
+      return
+    }
+
    const changedLayers = this.props.layers.slice(0)
    const layer: ModalAddState = {
      id: this.state.id,
@@ -41,9 +47,10 @@ class ModalAddInternal extends React.Component<ModalAddInternalProps, ModalAddSt
    }

    changedLayers.push(layer as LayerSpecification)
-
-    this.props.onLayersChange(changedLayers)
-    this.props.onOpenToggle(false)
+    this.setState({ error: null }, () => {
+      this.props.onLayersChange(changedLayers)
+      this.props.onOpenToggle(false)
+    })
  }

  constructor(props: ModalAddInternalProps) {
@@ -51,6 +58,7 @@ class ModalAddInternal extends React.Component<ModalAddInternalProps, ModalAddSt
    const state: ModalAddState = {
      type: 'fill',
      id: '',
+      error: null,
    }

    if(props.sources.length > 0) {
@@ -129,6 +137,21 @@ class ModalAddInternal extends React.Component<ModalAddInternalProps, ModalAddSt
    const t = this.props.t;
    const sources = this.getSources(this.state.type);
    const layers = this.getLayersForSource(this.state.source!);
+    let errorElement;
+    if (this.state.error) {
+      errorElement = (
+        <div className="maputnik-modal-error">
+          {this.state.error}
+          <a
+            href="#"
+            onClick={() => this.setState({ error: null })}
+            className="maputnik-modal-error-close"
+          >
+            ×
+          </a>
+        </div>
+      );
+    }

    return <Modal
      isOpen={this.props.isOpen}
@@ -137,12 +160,13 @@ class ModalAddInternal extends React.Component<ModalAddInternalProps, ModalAddSt
      data-wd-key="modal:add-layer"
      className="maputnik-add-modal"
    >
+      {errorElement}
      <div className="maputnik-add-layer">
        <FieldId
          value={this.state.id}
          wdKey="add-layer.layer-id"
          onChange={(v: string) => {
-            this.setState({ id: v })
+            this.setState({ id: v, error: null })
          }}
        />
        <FieldType
--- a/src/locales/de/translation.json
+++ b/src/locales/de/translation.json
@@ -72,6 +72,7 @@
  "Collapse": "Einklappen",
  "Expand": "Ausklappen",
  "Add Layer": "Ebene hinzufügen",
+  "Layer ID already exists": "Layer-ID existiert bereits",
  "Search": "Suche",
  "Zoom:": "Zoom:",
  "Close popup": "Popup schließen",
--- a/src/locales/fr/translation.json
+++ b/src/locales/fr/translation.json
@@ -72,6 +72,7 @@
  "Collapse": "Réduire",
  "Expand": "Développer",
  "Add Layer": "Ajouter un calque",
+  "Layer ID already exists": "L'identifiant du calque existe déjà",
  "Search": "Recherche",
  "Zoom:": "Zoom :",
  "Close popup": "Fermer la fenêtre",
--- a/src/locales/he/translation.json
+++ b/src/locales/he/translation.json
@@ -72,6 +72,7 @@
  "Collapse": "הקטנה",
  "Expand": "הגדלה",
  "Add Layer": "הוספת שכבה",
+  "Layer ID already exists": "מזהה השכבה כבר קיים",
  "Search": "חיפוש",
  "Zoom:": "זום:",
  "Close popup": "סגירת החלון",
--- a/src/locales/it/translation.json
+++ b/src/locales/it/translation.json
@@ -72,6 +72,7 @@
  "Collapse": "Coprimi",
  "Expand": "Espandi",
  "Add Layer": "Aggiungi Livello",
+  "Layer ID already exists": "L'ID del layer esiste già",
  "Search": "Cerca",
  "Zoom:": "Zoom:",
  "Close popup": "Chiudi popup",
--- a/src/locales/ja/translation.json
+++ b/src/locales/ja/translation.json
@@ -72,6 +72,7 @@
  "Collapse": "畳む",
  "Expand": "展開",
  "Add Layer": "レイヤー追加",
+  "Layer ID already exists": "レイヤーIDは既に存在します",
  "Search": "検索",
  "Zoom:": "ズーム:",
  "Close popup": "ポップアップを閉じる",
--- a/src/locales/zh/translation.json
+++ b/src/locales/zh/translation.json
@@ -72,6 +72,7 @@
  "Collapse": "折叠",
  "Expand": "展开",
  "Add Layer": "添加图层",
+  "Layer ID already exists": "图层ID已存在",
  "Search": "搜索",
  "Zoom:": "缩放:",
  "Close popup": "关闭弹出窗口",