Merge branch 'main' into feature/map-template-fit-bounds-when-selecti…

…ng-category

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.65.3] - 2025-01-15
+
+## Fixed
+
+- Fixed issue of clicking outside of MapsIndoors data to close the Categories tab
+
+## [1.65.2] - 2025-01-13
+
+## Fixed
+
+- An issue where miTransitionLevel is not respected for Mapbox map.
+
 ## [1.65.1] - 2025-01-08
 
 ## Fixed

packages/map-template/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mapsindoors/map-template",
   "description": "Get a MapsIndoors map up and running in less than 10 mins.",
-  "version": "1.65.1",
+  "version": "1.65.3",
   "private": false,
   "files": [
     "dist/*.js",

packages/map-template/src/components/Search/Categories/Categories.jsx

@@ -14,6 +14,8 @@ import { useIsDesktop } from "../../../hooks/useIsDesktop";
 import getActiveCategory from "../../../helpers/GetActiveCategory";
 import isBottomSheetLoadedState from "../../../atoms/isBottomSheetLoadedState";
 import categoryState from "../../../atoms/categoryState";
+import useOutsideMapsIndoorsDataClick from "../../../hooks/useOutsideMapsIndoorsDataClick";
+import mapsIndoorsInstanceState from "../../../atoms/mapsIndoorsInstanceState";
 
 /**
  * Show the categories list.
@@ -22,8 +24,9 @@ import categoryState from "../../../atoms/categoryState";
  * @param {function} props.onSetSize - Callback that is fired when the categories are clicked.
  * @param {function} props.getFilteredLocations - Function that gets the filtered locations based on the category selected.
  * @param {object} props.searchFieldRef - The reference to the search input field.
+ * @param {boolean} props.isOpen - Determines wheteher the Categories window is open or not.
  */
-function Categories({ onSetSize, getFilteredLocations, searchFieldRef }) {
+function Categories({ onSetSize, getFilteredLocations, searchFieldRef, isOpen }) {
     /** Referencing the categories results container DOM element */
     const categoriesListRef = useRef();
 
@@ -50,6 +53,9 @@ function Categories({ onSetSize, getFilteredLocations, searchFieldRef }) {
     const isBottomSheetLoaded = useRecoilValue(isBottomSheetLoadedState);
     const category = useRecoilValue(categoryState);
 
+    const mapsIndoorsInstance = useRecoilValue(mapsIndoorsInstanceState);
+    const clickedOutsideMapsIndoorsData = useOutsideMapsIndoorsDataClick(mapsIndoorsInstance, isOpen);
+
     /**
      * Communicate size change to parent component.
      *
@@ -124,6 +130,31 @@ function Categories({ onSetSize, getFilteredLocations, searchFieldRef }) {
         });
     }
 
+    /**
+     * Handles cleanup when user clicks outside MapsIndoors data area.
+     * This effect will:
+     * 1. Clear the currently selected category
+     * 2. Reset all search/filter related states to empty
+     * 3. Collapse the view back to fit size
+     * 4. Clear any existing search input
+     * 
+     * Only triggers when:
+     * - There is a currently selected category and user clicks outside MapsIndoors data
+     */
+    useEffect(() => {
+        if (clickedOutsideMapsIndoorsData && selectedCategory) {
+            setSelectedCategory(null);
+            setSearchResults([]);
+            setFilteredLocations([]);
+            setSize(snapPoints.FIT);
+
+            // If search field has a value, clear the search field.
+            if (searchFieldRef.current?.getValue()) {
+                searchFieldRef.current.clear();
+            }
+        }
+    }, [clickedOutsideMapsIndoorsData]);
+
     /**
      * Add event listener for scrolling in the categories list
      */

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

@@ -461,6 +461,7 @@ function Search({ onSetSize, isOpen }) {
             {categories.length > 0 && <Categories onSetSize={onSetSize}
                 searchFieldRef={searchFieldRef}
                 getFilteredLocations={category => getFilteredLocations(category)}
+                isOpen={!!selectedCategory}
             />}
 
 

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

@@ -6,6 +6,8 @@ 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,
@@ -44,6 +46,7 @@ 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.
@@ -134,6 +137,11 @@ function MapboxMap({ accessToken, onInitialized, onPositionControl, center, zoom
             ...mapOptions
         };
 
+        // If miTransitionLevel exists and it's a number, set it in the mapViewOptions
+        if (miTransitionLevel && !isNaN(parseInt(miTransitionLevel))) {
+            mapViewOptions.mapsIndoorsTransitionLevel = parseInt(miTransitionLevel);
+        }
+
         const mapView = new window.mapsindoors.mapView.MapboxV3View(mapViewOptions);
 
         setMapViewInstance(mapView);