Merge pull request #155 from yulinscottkang/v1/sdk-upgrade

chore: upgrade azure-maps-control and make it peerDependencies

MIGRATION.md

@@ -1,5 +1,12 @@
 ## Migrating from v0.x to v1.0
 
+### azure-maps-control dependency
+`azure-maps-control` is installed as a peerDependencies package, you will need to add it to your package.json.
+```
+npm install --save azure-maps-control@next
+```
+This will install `azure-maps-control` v3 to your application. You may upgrade it independently in the future. See [AzureMaps WebSDK release notes](https://learn.microsoft.com/azure/azure-maps/release-notes-map-control) for a list of new features and bug fixes.
+
 ### Styling
 v1.0 removes the internal css import from `azure-maps-control` to accommodate usage in Next.js. You will need to add the following stylesheet to your application manually. The stylesheet is required for the marker, popup and control components in `react-azure-maps` to work properly.
 ```javascript

__mocks__/azure-maps-control.js

@@ -67,6 +67,7 @@ module.exports = {
         isOpen: jest.fn(() => true),
         open: jest.fn(() => false),
         togglePopup: jest.fn(),
+        setOptions: jest.fn(),
         close: jest.fn()
       }
     }))

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-azure-maps",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.2",
   "description": "React Wrapper for Azure Maps",
   "keywords": [
     "react",
@@ -94,6 +94,7 @@
     "@types/jest": "^26.0.15",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
+    "azure-maps-control": "^3.0.0-preview.7",
     "babel-preset-env": "^1.7.0",
     "concurrently": "^5.3.0",
     "cross-env": "^7.0.2",
@@ -118,13 +119,11 @@
     "typescript": "^4.1.2"
   },
   "peerDependencies": {
-    "azure-maps-control": "^3.0.0-preview.6",
-    "guid-typescript": "^1.0.9",
+    "azure-maps-control": "^3.0.0-preview.7",
     "react": "^17.0.2 || ^18.0.0",
     "react-dom": "^17.0.2 || ^18.0.0"
   },
   "dependencies": {
-    "azure-maps-control": "^3.0.0-preview.6",
     "guid-typescript": "^1.0.9"
   }
 }

src/components/AzureMapMarkers/AzureMapHtmlMarker/AzureMapHtmlMarker.test.tsx

@@ -2,7 +2,7 @@ import { render } from '@testing-library/react'
 import { Map, Popup } from 'azure-maps-control'
 import React from 'react'
 import { AzureMapsContext } from '../../../contexts/AzureMapContext'
-import AzureMaphtmlMarker from './AzureMapHtmlMarker'
+import AzureMapHtmlMarker from './AzureMapHtmlMarker'
 import { IAzureMapHtmlMarker } from '../../../types'
 import atlas from 'azure-maps-control'
 
@@ -23,7 +23,7 @@ const wrapWithAzureMapContext = (props: IAzureMapHtmlMarker) => {
         mapRef
       }}
     >
-      <AzureMaphtmlMarker {...{ ...props }} />
+      <AzureMapHtmlMarker {...{ ...props }} />
     </AzureMapsContext.Provider>
   )
 }
@@ -81,13 +81,13 @@ describe('AzureMaphtmlMarker tests', () => {
       expect(markerRef.setOptions).toHaveBeenCalledWith({ htmlContent: '<div></div>' })
     })
 
-    it('should close marker popup', () => {
+    it('should open marker popup', () => {
       render(wrapWithAzureMapContext({ isPopupVisible: true, markerContent: <div /> }))
       // Currently we only check if getOptions get called @TODO
       expect(markerRef.getOptions).toHaveBeenCalled()
     })
 
-    it('should open marker popup', () => {
+    it('should close marker popup', () => {
       render(wrapWithAzureMapContext({ isPopupVisible: false, markerContent: <div /> }))
       // Currently we only check if getOptions get called @TODO
       expect(markerRef.getOptions).toHaveBeenCalled()

src/components/AzureMapMarkers/AzureMapHtmlMarker/AzureMapHtmlMarker.tsx

@@ -16,7 +16,7 @@ const AzureMapHtmlMarker = memo(
     )
     const { mapRef } = useContext<IAzureMapsContextProps>(AzureMapsContext)
 
-    useCheckRefMount<MapType, boolean>(mapRef, true, mref => {
+    useCheckRefMount<MapType, boolean>(mapRef, true, (mref) => {
       mref.markers.add(markerRef)
       events &&
         events.forEach(({ eventName, callback }) => {
@@ -38,13 +38,14 @@ const AzureMapHtmlMarker = memo(
 
     useEffect(() => {
       if (markerRef && markerRef.getOptions().popup && mapRef) {
-        const isMarkerPopupOpen = markerRef.getOptions().popup?.isOpen()
-        if (isMarkerPopupOpen && isPopupVisible) {
-          markerRef.getOptions().popup?.close()
-        } else if (isMarkerPopupOpen !== undefined) {
-          markerRef.getOptions().popup?.open()
-        } else if ((isPopupVisible && isMarkerPopupOpen) || isPopupVisible) {
-          markerRef.togglePopup()
+        const popupRef = markerRef.getOptions().popup
+        if (isPopupVisible) {
+          popupRef?.setOptions({
+            position: markerRef.getOptions().position
+          })
+          popupRef?.open(mapRef)
+        } else {
+          popupRef?.close()
         }
       }
     }, [isPopupVisible, options, mapRef])

yarn.lock

@@ -3,16 +3,16 @@
 
 
 "@azure/msal-browser@^2.32.1":
-  version "2.36.0"
-  resolved "https://registry.npmjs.org/@azure/msal-browser/-/msal-browser-2.36.0.tgz#a95af979da1dd8572b6b3cb9fc86d51713d8ad91"
-  integrity sha512-OrVDZ9ftO7ExqZVHripAt+doKg6G14YbP2LoSygiWQoSqoO4CejoXLRLqANc/HGg18N0p/oaRETw4IHZvwsxZw==
+  version "2.37.0"
+  resolved "https://registry.yarnpkg.com/@azure/msal-browser/-/msal-browser-2.37.0.tgz#32d7af74eef53f2692f8a9d6bd6818c78faf4c1b"
+  integrity sha512-YNGD/W/tw/5wDWlXOfmrVILaxVsorVLxYU2ovmL1PDvxkdudbQRyGk/76l4emqgDAl/kPQeqyivxjOU6w1YfvQ==
   dependencies:
-    "@azure/msal-common" "^12.1.0"
+    "@azure/msal-common" "13.0.0"
 
-"@azure/msal-common@^12.1.0":
-  version "12.1.0"
-  resolved "https://registry.npmjs.org/@azure/msal-common/-/msal-common-12.1.0.tgz#e253a4912a359193c52c570a1e2585cfd0213bff"
-  integrity sha512-9RUiv0evSHvYtvF7r9ksShw9FgCeT6Rf6JB/SOMbMzI0VySZDUBSE+0b9e7DgL2Ph8wSARIh3m8c5pCK9TRY3w==
+"@azure/msal-common@13.0.0":
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/@azure/msal-common/-/msal-common-13.0.0.tgz#9c39184903b5d0fd6e643ccc12193fae220e912b"
+  integrity sha512-GqCOg5H5bouvLij9NFXFkh+asRRxsPBRwnTDsfK7o0KcxYHJbuidKw8/VXpycahGXNxgtuhqtK/n5he+5NhyEA==
 
 "@babel/[email protected]":
   version "7.10.4"
@@ -3103,10 +3103,10 @@ axobject-query@^2.2.0:
   resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz"
   integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==
 
-azure-maps-control@^3.0.0-preview.6:
-  version "3.0.0-preview.6"
-  resolved "https://registry.yarnpkg.com/azure-maps-control/-/azure-maps-control-3.0.0-preview.6.tgz#e10591cfe7845f195b8884df210e96ca80b8d34c"
-  integrity sha512-+iQhVzdalQrXqFcUi3sSP2qD/Hj1ilg29/V1ajGqN3QzGjwgUr9yCNcr4VHdbXGnYJ2+thHk/TUlmXV8F09u0Q==
+azure-maps-control@^3.0.0-preview.7:
+  version "3.0.0-preview.7"
+  resolved "https://registry.yarnpkg.com/azure-maps-control/-/azure-maps-control-3.0.0-preview.7.tgz#7e96a5adb8f537a19a214c5e3ace433ddae62c89"
+  integrity sha512-PedAjZ8rUQcMXktT1ylnq+Rx+mIsRXVcxmcP9204sjPzH09tl8JC+EDPwt0y2XQ5y1jKussjv8aoteA/bLNrzw==
   dependencies:
     "@azure/msal-browser" "^2.32.1"