From 8675f1d43ed315699b11524b646ff8757761cf0d Mon Sep 17 00:00:00 2001 From: Lucaci-Andrei Date: Thu, 9 Jan 2025 09:54:59 +0100 Subject: [PATCH 01/10] fix: add handling for clicks outside of MapsIndoors data in the Categories component --- .../Search/Categories/Categories.jsx | 22 ++++++++++++++++++- .../src/components/Search/Search.jsx | 1 + 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/packages/map-template/src/components/Search/Categories/Categories.jsx b/packages/map-template/src/components/Search/Categories/Categories.jsx index 0d7b7617c..4a3d62c4d 100644 --- a/packages/map-template/src/components/Search/Categories/Categories.jsx +++ b/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 - Whether 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,20 @@ function Categories({ onSetSize, getFilteredLocations, searchFieldRef }) { }); } + useEffect(() => { + if (clickedOutsideMapsIndoorsData && selectedCategory) { + setSelectedCategory(null); + setSearchResults([]); + setFilteredLocations([]); + setSize(snapPoints.FIT); + + // If search field has value, trigger search without category filter + if (searchFieldRef.current?.getValue()) { + searchFieldRef.current.triggerSearch(); + } + } + }, [clickedOutsideMapsIndoorsData]); + /** * Add event listener for scrolling in the categories list */ diff --git a/packages/map-template/src/components/Search/Search.jsx b/packages/map-template/src/components/Search/Search.jsx index 3592d984a..7439d44b1 100644 --- a/packages/map-template/src/components/Search/Search.jsx +++ b/packages/map-template/src/components/Search/Search.jsx @@ -416,6 +416,7 @@ function Search({ onSetSize, isOpen }) { {categories.length > 0 && getFilteredLocations(category)} + isOpen={!!selectedCategory} />} From 29930263245acba662596e53fa3ea59f4b2c4adf Mon Sep 17 00:00:00 2001 From: Lucaci-Andrei Date: Thu, 9 Jan 2025 14:00:54 +0100 Subject: [PATCH 02/10] refactor: Fix JSDoc description Co-authored-by: Andreea Ceachir <113503166+andreeaceachir142@users.noreply.github.com> --- .../src/components/Search/Categories/Categories.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/map-template/src/components/Search/Categories/Categories.jsx b/packages/map-template/src/components/Search/Categories/Categories.jsx index 4a3d62c4d..7a9f388ea 100644 --- a/packages/map-template/src/components/Search/Categories/Categories.jsx +++ b/packages/map-template/src/components/Search/Categories/Categories.jsx @@ -24,7 +24,7 @@ import mapsIndoorsInstanceState from "../../../atoms/mapsIndoorsInstanceState"; * @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 - Whether the Categories window is open or not + * @param {boolean} props.isOpen - Determines wheteher the Categories window is open or not. */ function Categories({ onSetSize, getFilteredLocations, searchFieldRef, isOpen }) { /** Referencing the categories results container DOM element */ From ffb77e70b63d1cd65bb65c35e368b0116b41b711 Mon Sep 17 00:00:00 2001 From: Lucaci-Andrei Date: Thu, 9 Jan 2025 14:20:54 +0100 Subject: [PATCH 03/10] bugfix: add comments to cleanup useEffect in the Categories component and call clear function if searchField has any text. --- .../components/Search/Categories/Categories.jsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/map-template/src/components/Search/Categories/Categories.jsx b/packages/map-template/src/components/Search/Categories/Categories.jsx index 7a9f388ea..962ab53da 100644 --- a/packages/map-template/src/components/Search/Categories/Categories.jsx +++ b/packages/map-template/src/components/Search/Categories/Categories.jsx @@ -130,6 +130,17 @@ function Categories({ onSetSize, getFilteredLocations, searchFieldRef, isOpen }) }); } + /** + * 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); @@ -137,9 +148,9 @@ function Categories({ onSetSize, getFilteredLocations, searchFieldRef, isOpen }) setFilteredLocations([]); setSize(snapPoints.FIT); - // If search field has value, trigger search without category filter + // If search field has a value, clear the search field. if (searchFieldRef.current?.getValue()) { - searchFieldRef.current.triggerSearch(); + searchFieldRef.current.clear(); } } }, [clickedOutsideMapsIndoorsData]); From 88a69eab9da9243e26758a4200023a46b6fb1900 Mon Sep 17 00:00:00 2001 From: Mateusz Banaszak Date: Mon, 13 Jan 2025 10:22:10 +0100 Subject: [PATCH 04/10] add: logic to respect miTransitionLevel prop --- .../src/components/MIMap/MapboxMap/MapboxMap.jsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/react-components/src/components/MIMap/MapboxMap/MapboxMap.jsx b/packages/react-components/src/components/MIMap/MapboxMap/MapboxMap.jsx index b0fd16ac3..6456387b9 100644 --- a/packages/react-components/src/components/MIMap/MapboxMap/MapboxMap.jsx +++ b/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 '../../../../../../packages/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); From 685b492e691ea0679754735990fe45c9b8d1614b Mon Sep 17 00:00:00 2001 From: Mateusz Banaszak Date: Mon, 13 Jan 2025 10:24:39 +0100 Subject: [PATCH 05/10] add: changelog --- packages/map-template/CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/map-template/CHANGELOG.md b/packages/map-template/CHANGELOG.md index b7b8d1795..1e299de20 100644 --- a/packages/map-template/CHANGELOG.md +++ b/packages/map-template/CHANGELOG.md @@ -5,6 +5,12 @@ 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.2] - 2025-01-13 + +## Fixed + +- An issue where miTransitionLevel is not respected for Mapbox map. + ## [1.65.1] - 2025-01-08 ## Fixed From 78f967ee9e4f978674fdbe8cec9f80797638e1e7 Mon Sep 17 00:00:00 2001 From: andreeaceachir Date: Mon, 13 Jan 2025 10:50:21 +0100 Subject: [PATCH 06/10] chore: Update path. --- .../src/components/MIMap/MapboxMap/MapboxMap.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/src/components/MIMap/MapboxMap/MapboxMap.jsx b/packages/react-components/src/components/MIMap/MapboxMap/MapboxMap.jsx index 6456387b9..05c2f2bb6 100644 --- a/packages/react-components/src/components/MIMap/MapboxMap/MapboxMap.jsx +++ b/packages/react-components/src/components/MIMap/MapboxMap/MapboxMap.jsx @@ -7,7 +7,7 @@ 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 '../../../../../../packages/map-template/src/atoms/miTransitionLevelState' +import miTransitionLevelState from '../../../../../map-template/src/atoms/miTransitionLevelState'; MapboxMap.propTypes = { accessToken: PropTypes.string.isRequired, From 431c4226602cf6f658c565b9334a8caf6c16284e Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 13 Jan 2025 10:20:47 +0000 Subject: [PATCH 07/10] Release @mapsindoors/map-template@1.65.2 --- packages/map-template/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/map-template/package.json b/packages/map-template/package.json index cd3d39fcb..e713e7b2c 100644 --- a/packages/map-template/package.json +++ b/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.2", "private": false, "files": [ "dist/*.js", From a246f074dabc1ce5f2598863a1ac6dac6678cc6b Mon Sep 17 00:00:00 2001 From: Lucaci-Andrei Date: Wed, 15 Jan 2025 10:19:39 +0100 Subject: [PATCH 08/10] chore: Update Changelog --- packages/map-template/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/map-template/CHANGELOG.md b/packages/map-template/CHANGELOG.md index 1e299de20..202dd83fa 100644 --- a/packages/map-template/CHANGELOG.md +++ b/packages/map-template/CHANGELOG.md @@ -5,6 +5,10 @@ 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 issue of clicking outside of MapsIndoors data to close the Categories tab + ## [1.65.2] - 2025-01-13 ## Fixed From 2277c0d58bce763a7eb8daebfb98d131e871c2c7 Mon Sep 17 00:00:00 2001 From: Lucaci-Andrei Date: Wed, 15 Jan 2025 10:21:59 +0100 Subject: [PATCH 09/10] chore: Update CHANGELOG for version 1.65.3 --- packages/map-template/CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/map-template/CHANGELOG.md b/packages/map-template/CHANGELOG.md index 202dd83fa..857dc7bc2 100644 --- a/packages/map-template/CHANGELOG.md +++ b/packages/map-template/CHANGELOG.md @@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [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 From 21a4f0aee75c8b1ac58402b053c76b0e835e600f Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Wed, 15 Jan 2025 09:35:22 +0000 Subject: [PATCH 10/10] Release @mapsindoors/map-template@1.65.3 --- packages/map-template/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/map-template/package.json b/packages/map-template/package.json index e713e7b2c..7bcd6c439 100644 --- a/packages/map-template/package.json +++ b/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.2", + "version": "1.65.3", "private": false, "files": [ "dist/*.js",