[v7] Fix popup className update in mapbox v1/maplibre

src/components/popup.ts

@@ -62,6 +62,11 @@ export type PopupProps = {
   children?: React.ReactNode;
 };
 
+// Adapted from https://github.com/mapbox/mapbox-gl-js/blob/v1.13.0/src/ui/popup.js
+function getClassList(className: string) {
+  return new Set(className ? className.trim().split(/\s+/) : []);
+}
+
 function Popup(props: PopupProps) {
   const map = useContext(MapContext);
   const container = useMemo(() => {
@@ -102,15 +107,24 @@ function Popup(props: PopupProps) {
       popup.options.anchor = props.anchor;
       popup.setMaxWidth(props.maxWidth);
     }
-    // Adapted from https://github.com/mapbox/mapbox-gl-js/blob/main/src/ui/popup.js
     // @ts-ignore
     if (popup.options.className !== props.className) {
       // @ts-ignore
-      popup.options.className = props.className;
-      // @ts-ignore
-      popup._classList = new Set(props.className ? props.className.trim().split(/\s+/) : []);
+      const prevClassList = getClassList(popup.options.className);
+      const nextClassList = getClassList(props.className);
+
+      for (const c of prevClassList) {
+        if (!nextClassList.has(c)) {
+          popup.removeClassName(c);
+        }
+      }
+      for (const c of nextClassList) {
+        if (!prevClassList.has(c)) {
+          popup.addClassName(c);
+        }
+      }
       // @ts-ignore
-      popup._updateClassList();
+      popup.options.className = props.className;
     }
   }
 

test/src/components/popup.spec.js

@@ -57,6 +57,18 @@ test('Popup', t => {
   t.not(anchor, popup.options.anchor, 'anchor is updated');
   t.not(maxWidth, popup.options.maxWidth, 'maxWidth is updated');
 
+  act(() => {
+    map.update(
+      <Map ref={mapRef}>
+        <Popup longitude={-122} latitude={38} className="classA">
+          You are here
+        </Popup>
+      </Map>
+    );
+  });
+
+  t.is(popup.options.className, 'classA', 'className is updated');
+
   restoreMock();
 
   t.end();

test/src/utils/mapbox-gl-mock/popup.js

@@ -56,4 +56,11 @@ export default class Popup extends Evented {
     this.options.offset = value;
     return this;
   }
+
+  addClassName(className) {
+    this._classList.add(className);
+  }
+  removeClassName(className) {
+    this._classList.remove(className);
+  }
 }

tsconfig.es5.json

@@ -4,6 +4,7 @@
     "jsx": "react",
     "moduleResolution": "node",
     "module": "commonjs",
+    "downlevelIteration": true,
     "declaration": true,
     "sourceMap": true,
     "outDir": "./dist/es5"