Merge branch 'main' into feature/upgrade-sdk

# Conflicts:
#	packages/map-template/CHANGELOG.md

packages/components/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mapsindoors/components",
-    "version": "13.24.1",
+    "version": "13.25.0",
     "description": "Web components for MapsIndoors",
     "main": "dist/index.js",
     "module": "dist/index.mjs",

packages/map-template/CHANGELOG.md

@@ -5,12 +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.64.1] - 2025-01-07
+## [1.65.1] - 2025-01-08
 
 ## Fixed
 
 - Upgrade to SDK v4.38.3.
 
+## [1.65.0] - 2025-01-08
+
+## Added
+
+- Added functionality to exit location details by clicking outside MapsIndoors data on the map for both Google Maps and Mapbox.
+
 ## [1.64.0] - 2025-01-02
 
 ## Added

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.64.0",
+  "version": "1.65.0",
   "private": false,
   "files": [
     "dist/*.js",

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

@@ -127,6 +127,7 @@ function BottomSheet({ directionsFromLocation, directionsToLocation, pushAppView
                 onBack={() => closeLocationDetails()}
                 snapPointSwiped={locationDetailsSheetSwiped}
                 onStartDirections={() => pushAppView(appViews.DIRECTIONS)}
+                isOpen={currentAppView === appViews.LOCATION_DETAILS}
             />
         </Sheet>,
         <Sheet

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

@@ -16,6 +16,7 @@ import kioskLocationState from '../../atoms/kioskLocationState';
 import accessibilityOnState from '../../atoms/accessibilityOnState';
 import { useIsDesktop } from '../../hooks/useIsDesktop';
 import showExternalIDsState from '../../atoms/showExternalIDsState';
+import useOutsideMapsIndoorsDataClick from '../../hooks/useOutsideMapsIndoorsDataClick';
 
 /**
  * Shows details for a MapsIndoors Location.
@@ -26,9 +27,10 @@ import showExternalIDsState from '../../atoms/showExternalIDsState';
  * @param {function} props.onSetSize - Callback that is fired when the toggle full description button is clicked and the Sheet size changes.
  * @param {function} props.snapPointSwiped - Changes value when user has swiped a Bottom sheet to a new snap point.
  * @param {function} props.onStartDirections - Callback that fires when user clicks the Start directions button.
+ * @param {boolean} props.isOpen - Whether the Location Details are open or not.
  *
  */
-function LocationDetails({ onBack, onStartWayfinding, onSetSize, snapPointSwiped, onStartDirections }) {
+function LocationDetails({ onBack, onStartWayfinding, onSetSize, snapPointSwiped, onStartDirections, isOpen }) {
     const { t } = useTranslation();
 
     const locationInfoElement = useRef(null);
@@ -69,6 +71,8 @@ function LocationDetails({ onBack, onStartWayfinding, onSetSize, snapPointSwiped
 
     const showExternalIDs = useRecoilValue(showExternalIDsState);
 
+    const clickedOutsideMapsIndoorsData = useOutsideMapsIndoorsDataClick(mapsIndoorsInstance, isOpen);
+
     useEffect(() => {
         return () => {
             setLocationDisplayRule(null);
@@ -121,6 +125,12 @@ function LocationDetails({ onBack, onStartWayfinding, onSetSize, snapPointSwiped
         }
     }, [snapPointSwiped]); // eslint-disable-line react-hooks/exhaustive-deps
 
+    useEffect(() => {
+        if (clickedOutsideMapsIndoorsData) {
+            onBack();
+        }
+    }, [clickedOutsideMapsIndoorsData]);
+
     /**
      * Toggle the description.
      */

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

@@ -105,6 +105,7 @@ function Sidebar({ directionsFromLocation, directionsToLocation, pushAppView, cu
                 onStartWayfinding={() => pushAppView(appViews.WAYFINDING)}
                 onBack={() => closeLocationDetails()}
                 onStartDirections={() => pushAppView(appViews.DIRECTIONS)}
+                isOpen={currentAppView === appViews.LOCATION_DETAILS}
             />
         </Modal>,
         <Modal isOpen={currentAppView === appViews.WAYFINDING} key="D">

packages/map-template/src/hooks/useOutsideMapsIndoorsDataClick.js

@@ -0,0 +1,93 @@
+import { useEffect, useState } from 'react';
+import mapTypeState from '../atoms/mapTypeState';
+import { useRecoilValue } from 'recoil';
+import { mapTypes } from '../constants/mapTypes';
+
+/**
+ * Custom hook that handles map click events and determines whether the user clicked outside MapsIndoors data.
+ *
+ * @param {Object} mapsIndoorsInstance - The MapsIndoors instance.
+ * @param {boolean} isOpen - Whether the sidebar or bottom sheet is open or not.
+ * @returns {boolean} Returns `true` if the user clicked outside MapsIndoors data, `false` otherwise.
+ */
+export default function useOutsideMapsIndoorsDataClick(mapsIndoorsInstance, isOpen) {
+    const mapType = useRecoilValue(mapTypeState);
+    const [clickedOutside, setClickedOutside] = useState(false);
+    const map = mapsIndoorsInstance.getMap();
+
+    // Reset clickedOutside state when the sidebar or bottom sheet is opened
+    useEffect(() => {
+        if (isOpen) {
+            setClickedOutside(false);
+        }
+    }, [isOpen]);
+
+    /**
+     * Attaches click listeners to a Mapbox map instance to handle clicks on MapsIndoors data.
+     *
+     * @param {Object} map - The Mapbox map instance.
+     * @param {Object} mapsIndoorsInstance - The MapsIndoors instance.
+     * @param {boolean} isOpen - Whether the sidebar or bottom sheet is open or not.
+     * @param {Function} setClickedOutside - A function to set the state when a click occurs outside MapsIndoors data.
+     * @returns {Function} A cleanup function to remove the attached listeners.
+     */
+    function attachMapboxClickListeners(map, mapsIndoorsInstance, isOpen, setClickedOutside) {
+        const mapboxClickHandler = (clickResult) => {
+            if (!isOpen) return;
+            const features = mapsIndoorsInstance.getMap().queryRenderedFeatures(clickResult.point);
+
+            if (features.length) {
+                setClickedOutside(false);
+            } else {
+                setClickedOutside(true);
+            }
+        };
+        map.on('click', mapboxClickHandler);
+
+        return () => {
+            map.off('click', mapboxClickHandler);
+        };
+    }
+
+    /**
+     * Attaches click listeners to the Google Maps and MapsIndoors instances.
+     *
+     * @param {object} map - The Google Maps instance.
+     * @param {object} mapsIndoorsInstance - The MapsIndoors instance.
+     * @param {boolean} isOpen - Whether the sidebar or bottom sheet is open or not.
+     * @param {function} setClickedOutside - A function to set the state when a click occurs outside MapsIndoors.
+     * @returns {function} A cleanup function to remove the attached listeners.
+     */
+    function attachGoogleClickListeners(map, mapsIndoorsInstance, isOpen, setClickedOutside) {
+        const googleMapsClickHandler = (clickResult) => {
+            if (!isOpen) return;
+            setClickedOutside(false);
+        };
+
+        const googleMapsIndoorsClickHandler = (clickResult) => {
+            if (!isOpen) return;
+            setClickedOutside(true);
+        };
+
+        mapsIndoorsInstance.addListener('click', googleMapsClickHandler);
+        const mapListener = map.addListener('click', googleMapsIndoorsClickHandler);
+
+        return () => {
+            mapsIndoorsInstance.removeListener('click', googleMapsClickHandler);
+            mapListener.remove();
+        };
+    }
+
+    useEffect(() => {
+        let detachMapClickListeners;
+        if (mapType === mapTypes.Mapbox) {
+            detachMapClickListeners = attachMapboxClickListeners(map, mapsIndoorsInstance, isOpen, setClickedOutside);
+        }
+        if (mapType === mapTypes.Google) {
+            detachMapClickListeners = attachGoogleClickListeners(map, mapsIndoorsInstance, isOpen, setClickedOutside);
+        }
+        return () => detachMapClickListeners?.();
+    }, [mapsIndoorsInstance, isOpen]);
+
+    return clickedOutside;
+}