Fix miTransitionLevel using recoil

packages/map-template/CHANGELOG.md

@@ -5,6 +5,18 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.66.4] - 2025-01-23
+
+## Fixed
+
+- Fix `miTransitionLevel` prop breaking the React Component package.
+
+## [1.66.3] - 2025-01-23
+
+## Fixed
+
+- Fix package-lock issues.
+
 ## [1.66.2] - 2025-01-21
 
 ## Fixed

packages/map-template/src/components/MapWrapper/MapWrapper.jsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useRecoilState, useRecoilValue } from 'recoil';
 import MIMap from '@mapsindoors/react-components/src/components/MIMap/MIMap';
 import { mapTypes } from "../../constants/mapTypes";
@@ -20,6 +20,7 @@ import solutionState from '../../atoms/solutionState';
 import notificationMessageState from '../../atoms/notificationMessageState';
 import useMapBoundsDeterminer from '../../hooks/useMapBoundsDeterminer';
 import hideNonMatchesState from "../../atoms/hideNonMatchesState";
+import miTransitionLevelState from "../../atoms/miTransitionLevelState";
 
 /**
  * Private variable used for storing the tile style.
@@ -57,6 +58,8 @@ function MapWrapper({ onLocationClick, onMapPositionKnown, useMapProviderModule,
     const solution = useRecoilValue(solutionState);
     const [, setErrorMessage] = useRecoilState(notificationMessageState);
     const hideNonMatches = useRecoilValue(hideNonMatchesState);
+    const [mapOptions, setMapOptions] = useState({});
+    const miTransitionLevel = useRecoilValue(miTransitionLevelState);
 
     useLiveData(apiKey);
 
@@ -274,13 +277,23 @@ function MapWrapper({ onLocationClick, onMapPositionKnown, useMapProviderModule,
         onTileStyleChanged(mapsIndoorsInstance);
     }, [tileStyle]);
 
+    /**
+     * React on changes in the miTransitionLevel prop.
+     */
+    useEffect(() => {
+        if (!isNaN(parseInt(miTransitionLevel))) {
+            setMapOptions({ miTransitionLevel: miTransitionLevel})
+        }
+    }, [miTransitionLevel])
+
     return (<>
         {apiKey && <MIMap
             apiKey={apiKey}
             mapboxAccessToken={mapType === mapTypes.Mapbox ? mapboxAccessToken : undefined}
             gmApiKey={mapType === mapTypes.Google ? gmApiKey : undefined}
             onInitialized={onInitialized}
             resetUICounter={resetCount}
+            mapOptions={mapOptions}
         />}
     </>)
 };

packages/react-components/src/components/MIMap/MapboxMap/MapboxMap.jsx

@@ -6,8 +6,6 @@ import './MapboxMap.scss';
 import ViewModeSwitch from './ViewModeSwitch/ViewModeSwitch';
 import { useIsDesktop } from '../../../hooks/useIsDesktop';
 import isNullOrUndefined from '../../../../../map-template/src/helpers/isNullOrUndefined';
-import { useRecoilValue } from 'recoil';
-import miTransitionLevelState from '../../../../../map-template/src/atoms/miTransitionLevelState';
 
 MapboxMap.propTypes = {
     accessToken: PropTypes.string.isRequired,
@@ -46,7 +44,6 @@ function MapboxMap({ accessToken, onInitialized, onPositionControl, center, zoom
     const [hasPositionControl, setHasPositionControl] = useState(false);
     const [hasZoomControl, setHasZoomControl] = useState(false);
     const isDesktop = useIsDesktop();
-    const miTransitionLevel = useRecoilValue(miTransitionLevelState);
 
     /*
      * React on any props that are used to control the position of the map.
@@ -138,8 +135,8 @@ function MapboxMap({ accessToken, onInitialized, onPositionControl, center, zoom
         };
 
         // If miTransitionLevel exists and it's a number, set it in the mapViewOptions
-        if (miTransitionLevel && !isNaN(parseInt(miTransitionLevel))) {
-            mapViewOptions.mapsIndoorsTransitionLevel = parseInt(miTransitionLevel);
+        if (mapOptions?.miTransitionLevel && !isNaN(parseInt(mapOptions?.miTransitionLevel))) {
+            mapViewOptions.mapsIndoorsTransitionLevel = parseInt(mapOptions.miTransitionLevel);
         }
 
         const mapView = new window.mapsindoors.mapView.MapboxV3View(mapViewOptions);

packages/react-components/src/main.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.jsx'
 import './index.css'