@itwin/map-layers 5.4.4 → 5.6.0

package/lib/cjs/ui/widget/MapLayerManager.js

@@ -1,15 +1,39 @@
 "use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-// cSpell:ignore droppable Sublayer Basemap
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MapLayerManager = exports.useSourceMapContext = exports.SourceMapContext = exports.defaultBaseMapLayers = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+// cSpell:ignore droppable Sublayer Basemap
 // the following quiet warning caused by react-beautiful-dnd package
 /* eslint-disable @typescript-eslint/unbound-method */
 require("./MapLayerManager.scss");
-const React = require("react");
+const React = __importStar(require("react"));
 const react_beautiful_dnd_1 = require("react-beautiful-dnd");
 const core_bentley_1 = require("@itwin/core-bentley");
 const core_common_1 = require("@itwin/core-common");
@@ -24,6 +48,7 @@ const MapLayerActionButtons_1 = require("./MapLayerActionButtons");
 const MapLayerDroppable_1 = require("./MapLayerDroppable");
 const MapLayerSettingsPopupButton_1 = require("./MapLayerSettingsPopupButton");
 const MapManagerMapLayersHeader_1 = require("./MapManagerMapLayersHeader");
+const MapLayersActionIds_1 = require("../../MapLayersActionIds");
 /** @internal */
 exports.defaultBaseMapLayers = [
     core_common_1.BaseMapLayerSettings.fromProvider(core_common_1.BackgroundMapProvider.fromJSON({ name: "BingProvider", type: core_common_1.BackgroundMapType.Aerial })),
@@ -32,6 +57,7 @@ exports.defaultBaseMapLayers = [
 ];
 /** @internal */
 exports.SourceMapContext = React.createContext({
+    // eslint-disable-line @typescript-eslint/naming-convention
     sources: [],
     loadingSources: false,
     bases: [],
@@ -47,16 +73,17 @@ function getSubLayerProps(subLayerSettings) {
 }
 function getMapLayerSettingsFromViewport(viewport, getBackgroundMap, populateSubLayers = true) {
     const displayStyle = viewport.displayStyle;
-    if (!displayStyle)
+    if (!displayStyle) {
         return undefined;
+    }
     const layers = new Array();
-    const displayStyleLayers = (getBackgroundMap ? displayStyle.settings.mapImagery.backgroundLayers : displayStyle.settings.mapImagery.overlayLayers);
+    const displayStyleLayers = getBackgroundMap ? displayStyle.settings.mapImagery.backgroundLayers : displayStyle.settings.mapImagery.overlayLayers;
     for (let layerIndex = 0; layerIndex < displayStyleLayers.length; layerIndex++) {
         const layerSettings = displayStyleLayers[layerIndex];
         const isOverlay = !getBackgroundMap;
         const layerProvider = viewport.getMapLayerImageryProvider({ index: layerIndex, isOverlay });
         const treeVisibility = viewport.getMapLayerScaleRangeVisibility({ index: layerIndex, isOverlay });
-        const popSubLayers = populateSubLayers && (layerSettings instanceof core_common_1.ImageMapLayerSettings);
+        const popSubLayers = populateSubLayers && layerSettings instanceof core_common_1.ImageMapLayerSettings;
         layers.push({
             visible: layerSettings.visible,
             treeVisibility,
@@ -126,14 +153,17 @@ function MapLayerManager(props) {
     React.useEffect(() => {
         const handleScaleRangeVisibilityChanged = (layerIndexes) => {
             const updateLayers = (array) => {
-                if (array === undefined)
+                if (array === undefined) {
                     return undefined;
+                }
                 return array.map((curStyledLayer) => {
                     const foundScaleRangeVisibility = layerIndexes.find((layerIdx) => layerIdx.index === curStyledLayer.layerIndex && layerIdx.isOverlay === curStyledLayer.isOverlay);
-                    if (undefined === foundScaleRangeVisibility)
+                    if (undefined === foundScaleRangeVisibility) {
                         return curStyledLayer;
-                    else
+                    }
+                    else {
                         return { ...curStyledLayer, treeVisibility: foundScaleRangeVisibility.visibility };
+                    }
                 });
             };
             setBackgroundMapLayers(updateLayers(backgroundMapLayers));
@@ -144,10 +174,11 @@ function MapLayerManager(props) {
     // Setup onMapImageryChanged events listening.
     React.useEffect(() => {
         const handleMapImageryChanged = (args) => {
-            if (args.backgroundLayers.length !== (backgroundMapLayers ? backgroundMapLayers.length : 0)
-                || args.overlayLayers.length !== (overlayMapLayers ? overlayMapLayers.length : 0)) {
+            if (args.backgroundLayers.length !== (backgroundMapLayers ? backgroundMapLayers.length : 0) ||
+                args.overlayLayers.length !== (overlayMapLayers ? overlayMapLayers.length : 0)) {
                 loadMapLayerSettingsFromViewport(activeViewport);
             }
+            core_frontend_1.IModelApp.toolAdmin.dispatchUiSyncEvent(MapLayersActionIds_1.MapLayersSyncUiEventId.MapImageryChanged);
         };
         return activeViewport?.displayStyle.settings.onMapImageryChanged.addListener(handleMapImageryChanged);
     }, [activeViewport, backgroundMapLayers, loadMapLayerSettingsFromViewport, overlayMapLayers]);
@@ -156,11 +187,19 @@ function MapLayerManager(props) {
     }, [loadMapLayerSettingsFromViewport, activeViewport]);
     // Triggered whenever a provider status change
     React.useEffect(() => {
-        backgroundMapLayers?.forEach((layer) => { layer.provider?.onStatusChanged.addListener(handleProviderStatusChanged); });
-        overlayMapLayers?.forEach((layer) => { layer.provider?.onStatusChanged.addListener(handleProviderStatusChanged); });
+        backgroundMapLayers?.forEach((layer) => {
+            layer.provider?.onStatusChanged.addListener(handleProviderStatusChanged);
+        });
+        overlayMapLayers?.forEach((layer) => {
+            layer.provider?.onStatusChanged.addListener(handleProviderStatusChanged);
+        });
         return () => {
-            backgroundMapLayers?.forEach((layer) => { layer.provider?.onStatusChanged.removeListener(handleProviderStatusChanged); });
-            overlayMapLayers?.forEach((layer) => { layer.provider?.onStatusChanged.removeListener(handleProviderStatusChanged); });
+            backgroundMapLayers?.forEach((layer) => {
+                layer.provider?.onStatusChanged.removeListener(handleProviderStatusChanged);
+            });
+            overlayMapLayers?.forEach((layer) => {
+                layer.provider?.onStatusChanged.removeListener(handleProviderStatusChanged);
+            });
         };
     }, [backgroundMapLayers, overlayMapLayers, activeViewport, loadMapLayerSettingsFromViewport, handleProviderStatusChanged]);
     // Monitor viewport updates, and refresh the widget accordingly.
@@ -174,7 +213,7 @@ function MapLayerManager(props) {
     React.useEffect(() => {
         async function fetchSources() {
             let preferenceSources = [];
-            const sourceLayers = await core_frontend_1.MapLayerSources.create(undefined, (fetchPublicMapLayerSources && !hideExternalMapLayersSection));
+            const sourceLayers = await core_frontend_1.MapLayerSources.create(undefined, fetchPublicMapLayerSources && !hideExternalMapLayersSection);
             const iModel = activeViewport.iModel;
             try {
                 if (iModel?.iTwinId !== undefined) {
@@ -206,30 +245,33 @@ function MapLayerManager(props) {
             setMapSources(sources);
         }
         setLoadingSources(true);
-        fetchSources().then(() => {
+        fetchSources()
+            .then(() => {
             if (isMounted.current) {
                 setLoadingSources(false);
             }
-        }).catch(() => {
+        })
+            .catch(() => {
             if (isMounted.current) {
                 setLoadingSources(false);
             }
         });
     }, [setMapSources, fetchPublicMapLayerSources, hideExternalMapLayersSection, activeViewport.iModel]);
     /**
-    * Handle change events in the MapLayerPreferences
-    */
+     * Handle change events in the MapLayerPreferences
+     */
     React.useEffect(() => {
         const handleLayerSourceChange = async (changeType, oldSource, newSource) => {
-            const removeSource = (changeType === MapLayerPreferences_1.MapLayerSourceChangeType.Replaced || changeType === MapLayerPreferences_1.MapLayerSourceChangeType.Removed);
-            const addSource = (changeType === MapLayerPreferences_1.MapLayerSourceChangeType.Replaced || changeType === MapLayerPreferences_1.MapLayerSourceChangeType.Added);
-            let tmpSources = (mapSources ? [...mapSources] : undefined);
+            const removeSource = changeType === MapLayerPreferences_1.MapLayerSourceChangeType.Replaced || changeType === MapLayerPreferences_1.MapLayerSourceChangeType.Removed;
+            const addSource = changeType === MapLayerPreferences_1.MapLayerSourceChangeType.Replaced || changeType === MapLayerPreferences_1.MapLayerSourceChangeType.Added;
+            let tmpSources = mapSources ? [...mapSources] : undefined;
             if (removeSource) {
                 if (oldSource && tmpSources) {
                     tmpSources = tmpSources.filter((source) => source.name !== oldSource.name);
                     // We don't update state in case of replacement... it will be done when the source is re-added right after.
-                    if (changeType !== MapLayerPreferences_1.MapLayerSourceChangeType.Replaced)
+                    if (changeType !== MapLayerPreferences_1.MapLayerSourceChangeType.Replaced) {
                         setMapSources(tmpSources);
+                    }
                 }
             }
             if (addSource) {
@@ -250,22 +292,27 @@ function MapLayerManager(props) {
         return activeViewport?.onDisplayStyleChanged.addListener(handleDisplayStyleChange);
     }, [activeViewport, loadMapLayerSettingsFromViewport]);
     const handleOnMenuItemSelection = React.useCallback((action, mapLayerSettings) => {
-        if (!activeViewport || !activeViewport.displayStyle)
+        if (!activeViewport || !activeViewport.displayStyle) {
             return;
+        }
         const indexInDisplayStyle = activeViewport.displayStyle.findMapLayerIndexByNameAndSource(mapLayerSettings.name, mapLayerSettings.source, mapLayerSettings.isOverlay);
-        if (indexInDisplayStyle < 0)
+        if (indexInDisplayStyle < 0) {
             return;
+        }
         switch (action) {
             case "delete":
                 activeViewport.displayStyle.detachMapLayerByIndex({ index: indexInDisplayStyle, isOverlay: mapLayerSettings.isOverlay });
                 break;
             case "zoom-to-layer":
-                activeViewport.viewMapLayerRange({ index: indexInDisplayStyle, isOverlay: mapLayerSettings.isOverlay }, activeViewport).then((status) => {
+                activeViewport
+                    .viewMapLayerRange({ index: indexInDisplayStyle, isOverlay: mapLayerSettings.isOverlay }, activeViewport)
+                    .then((status) => {
                     if (!status) {
                         const msg = mapLayers_1.MapLayersUI.localization.getLocalizedString("mapLayers:Messages.NoRangeDefined");
                         core_frontend_1.IModelApp.notifications.outputMessage(new core_frontend_1.NotifyMessageDetails(core_frontend_1.OutputMessagePriority.Error, `${msg} [${mapLayerSettings.name}]`));
                     }
-                }).catch((_error) => { });
+                })
+                    .catch((_error) => { });
                 break;
         }
         // force UI to update
@@ -289,38 +336,49 @@ function MapLayerManager(props) {
             const newState = !backgroundMapVisible;
             activeViewport.viewFlags = activeViewport.viewFlags.with("backgroundMap", newState);
             setBackgroundMapVisible(newState);
+            core_frontend_1.IModelApp.toolAdmin.dispatchUiSyncEvent(MapLayersActionIds_1.MapLayersSyncUiEventId.MapImageryChanged);
         }
     }, [backgroundMapVisible, setBackgroundMapVisible, activeViewport]);
     const handleOnMapLayerDragEnd = React.useCallback((result /* ,  _provided: ResponderProvided*/) => {
         const { destination, source } = result;
-        if (!destination) // dropped outside of list
+        if (!destination) {
+            // dropped outside of list
             return;
+        }
         // item was not moved
-        if (destination.droppableId === source.droppableId && destination.index === source.index)
+        if (destination.droppableId === source.droppableId && destination.index === source.index) {
             return;
+        }
         let fromMapLayer;
-        if (source.droppableId === "overlayMapLayers" && overlayMapLayers)
+        if (source.droppableId === "overlayMapLayers" && overlayMapLayers) {
             fromMapLayer = overlayMapLayers[source.index];
-        else if (source.droppableId === "backgroundMapLayers" && backgroundMapLayers)
+        }
+        else if (source.droppableId === "backgroundMapLayers" && backgroundMapLayers) {
             fromMapLayer = backgroundMapLayers[source.index];
-        if (!fromMapLayer || !activeViewport)
+        }
+        if (!fromMapLayer || !activeViewport) {
             return;
+        }
         const displayStyle = activeViewport.displayStyle;
         let toMapLayer;
         let toIndexInDisplayStyle = -1;
         // If destination.index is undefined then the user dropped the map at the end of list of maps. To get the "actual" index in the style, look up index in style by name.
         // We need to do this because the order of layers in UI are reversed so higher layers appear above lower layers.
         if (undefined !== destination.index) {
-            if (destination.droppableId === "overlayMapLayers" && overlayMapLayers)
+            if (destination.droppableId === "overlayMapLayers" && overlayMapLayers) {
                 toMapLayer = overlayMapLayers[destination.index];
-            else if (destination.droppableId === "backgroundMapLayers" && backgroundMapLayers)
+            }
+            else if (destination.droppableId === "backgroundMapLayers" && backgroundMapLayers) {
                 toMapLayer = backgroundMapLayers[destination.index];
-            if (toMapLayer)
+            }
+            if (toMapLayer) {
                 toIndexInDisplayStyle = displayStyle.findMapLayerIndexByNameAndSource(toMapLayer.name, toMapLayer.source, toMapLayer.isOverlay);
+            }
         }
         const fromIndexInDisplayStyle = displayStyle.findMapLayerIndexByNameAndSource(fromMapLayer.name, fromMapLayer.source, fromMapLayer.isOverlay);
-        if (fromIndexInDisplayStyle < 0)
+        if (fromIndexInDisplayStyle < 0) {
             return;
+        }
         if (destination.droppableId !== source.droppableId) {
             // see if we moved from "overlayMapLayers" to "backgroundMapLayers" or vice-versa
             const settings = activeViewport.displayStyle.mapLayerAtIndex({ index: fromIndexInDisplayStyle, isOverlay: fromMapLayer.isOverlay });
@@ -342,8 +400,9 @@ function MapLayerManager(props) {
             }
             else {
                 if (toMapLayer) {
-                    if (toIndexInDisplayStyle !== -1)
+                    if (toIndexInDisplayStyle !== -1) {
                         displayStyle.moveMapLayerToIndex(fromIndexInDisplayStyle, toIndexInDisplayStyle, toMapLayer.isOverlay);
+                    }
                 }
             }
         }
@@ -353,77 +412,105 @@ function MapLayerManager(props) {
         loadMapLayerSettingsFromViewport(activeViewport);
     }, [loadMapLayerSettingsFromViewport, activeViewport, overlayMapLayers, backgroundMapLayers]);
     const handleRefreshFromStyle = React.useCallback(() => {
-        if (activeViewport)
+        if (activeViewport) {
             loadMapLayerSettingsFromViewport(activeViewport);
+        }
     }, [activeViewport, loadMapLayerSettingsFromViewport]);
     const handleItemSelected = React.useCallback((isOverlay, _index) => {
         if (isOverlay) {
-            if (overlayMapLayers)
+            if (overlayMapLayers) {
                 setOverlayMapLayers([...overlayMapLayers]);
+            }
         }
         else {
-            if (backgroundMapLayers)
+            if (backgroundMapLayers) {
                 setBackgroundMapLayers([...backgroundMapLayers]);
+            }
         }
     }, [backgroundMapLayers, overlayMapLayers]);
     const hasItemSelected = React.useCallback((isOverlay) => {
-        const layerList = (isOverlay ? overlayMapLayers : backgroundMapLayers);
-        if (!layerList)
+        const layerList = isOverlay ? overlayMapLayers : backgroundMapLayers;
+        if (!layerList) {
             return false;
+        }
         return undefined !== layerList?.find((value) => value.selected === true);
     }, [backgroundMapLayers, overlayMapLayers]);
     const changeLayerVisibility = React.useCallback((visible, index, isOverlay) => {
         activeViewport.displayStyle.changeMapLayerProps({ visible }, { index, isOverlay });
     }, [activeViewport]);
     const changeAllLayerVisibility = React.useCallback(async (visible, isOverlay) => {
-        if (isOverlay === undefined || !isOverlay)
+        if (isOverlay === undefined || !isOverlay) {
             backgroundMapLayers?.forEach((layer) => changeLayerVisibility(visible, layer.layerIndex, layer.isOverlay));
-        if (isOverlay === undefined || isOverlay)
+        }
+        if (isOverlay === undefined || isOverlay) {
             overlayMapLayers?.forEach((layer) => changeLayerVisibility(visible, layer.layerIndex, layer.isOverlay));
+        }
     }, [backgroundMapLayers, overlayMapLayers, changeLayerVisibility]);
     const invertAllLayerVisibility = React.useCallback(async (isOverlay) => {
-        if (isOverlay === undefined || !isOverlay)
+        if (isOverlay === undefined || !isOverlay) {
             backgroundMapLayers?.forEach((layer) => changeLayerVisibility(!layer.visible, layer.layerIndex, layer.isOverlay));
-        if (isOverlay === undefined || isOverlay)
+        }
+        if (isOverlay === undefined || isOverlay) {
             overlayMapLayers?.forEach((layer) => changeLayerVisibility(!layer.visible, layer.layerIndex, layer.isOverlay));
+        }
     }, [backgroundMapLayers, overlayMapLayers, changeLayerVisibility]);
     const detachSelectedLayers = React.useCallback(async (isOverlay) => {
-        const layerList = (isOverlay ? overlayMapLayers : backgroundMapLayers);
-        if (!layerList || layerList.length === 0)
+        const layerList = isOverlay ? overlayMapLayers : backgroundMapLayers;
+        if (!layerList || layerList.length === 0) {
             return;
+        }
         for (let i = 0; i < layerList.length; i++) {
             if (layerList[i].selected) {
-                const index = (layerList.length - 1) - i; // Layers are reverted order is display style
+                const index = layerList.length - 1 - i; // Layers are reverted order is display style
                 activeViewport.displayStyle.detachMapLayerByIndex({ isOverlay, index });
             }
         }
     }, [activeViewport, overlayMapLayers, backgroundMapLayers]);
     const selectAllLayers = React.useCallback(async (isOverlay) => {
-        if (!overlayMapLayers || !backgroundMapLayers)
+        if (!overlayMapLayers || !backgroundMapLayers) {
             return;
-        const layerList = (isOverlay ? [...overlayMapLayers] : [...backgroundMapLayers]);
+        }
+        const layerList = isOverlay ? [...overlayMapLayers] : [...backgroundMapLayers];
         const hasCheckedLayer = undefined !== layerList?.find((value) => value.selected === true);
-        layerList.forEach((layer) => { layer.selected = !hasCheckedLayer; });
-        if (isOverlay)
+        layerList.forEach((layer) => {
+            layer.selected = !hasCheckedLayer;
+        });
+        if (isOverlay) {
             setOverlayMapLayers(layerList);
-        else
+        }
+        else {
             setBackgroundMapLayers(layerList);
+        }
     }, [overlayMapLayers, backgroundMapLayers]);
     const renderMapLayersList = React.useCallback((options) => {
-        if (!overlayMapLayers || !backgroundMapLayers)
-            return React.createElement(React.Fragment, null);
+        if (!overlayMapLayers || !backgroundMapLayers) {
+            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+        }
         const { isOverlay } = options;
-        const layerList = (isOverlay ? [...overlayMapLayers] : [...backgroundMapLayers]);
-        const label = (isOverlay ? overlaysLabel : underlaysLabel);
-        return (React.createElement("div", { className: "map-manager-layer-wrapper", "data-testid": "map-manager-layer-section" },
-            React.createElement(MapManagerMapLayersHeader_1.MapManagerLayersHeader, { label: label, isOverlay: isOverlay, disabled: !backgroundMapVisible }),
-            (layerList && layerList.length > 0) &&
-                React.createElement(React.Fragment, null,
-                    React.createElement(MapLayerActionButtons_1.MapLayerActionButtons, { disabled: !backgroundMapVisible, disabledUnlink: !hasItemSelected(isOverlay), hideAll: async () => changeAllLayerVisibility(false, isOverlay), showAll: async () => changeAllLayerVisibility(true, isOverlay), invert: async () => invertAllLayerVisibility(isOverlay), selectAll: async () => selectAllLayers(isOverlay), unlink: async () => detachSelectedLayers(isOverlay), checked: hasItemSelected(isOverlay) })),
-            React.createElement(MapLayerDroppable_1.MapLayerDroppable, { disabled: !backgroundMapVisible, isOverlay: isOverlay, layersList: layerList, mapLayerOptions: props.mapLayerOptions, getContainerForClone: props.getContainerForClone, activeViewport: props.activeViewport, onMenuItemSelected: handleOnMenuItemSelection, onItemVisibilityToggleClicked: handleLayerVisibilityChange, onItemSelected: handleItemSelected, onItemEdited: handleRefreshFromStyle })));
-    }, [backgroundMapLayers, backgroundMapVisible, changeAllLayerVisibility, detachSelectedLayers, handleItemSelected, handleLayerVisibilityChange, handleOnMenuItemSelection, handleRefreshFromStyle, hasItemSelected, invertAllLayerVisibility, overlayMapLayers, overlaysLabel, props.activeViewport, props.getContainerForClone, props.mapLayerOptions, selectAllLayers, underlaysLabel]);
+        const layerList = isOverlay ? [...overlayMapLayers] : [...backgroundMapLayers];
+        const label = isOverlay ? overlaysLabel : underlaysLabel;
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "map-manager-layer-wrapper", "data-testid": "map-manager-layer-section", children: [(0, jsx_runtime_1.jsx)(MapManagerMapLayersHeader_1.MapManagerLayersHeader, { label: label, isOverlay: isOverlay, disabled: !backgroundMapVisible }), layerList && layerList.length > 0 && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(MapLayerActionButtons_1.MapLayerActionButtons, { disabled: !backgroundMapVisible, disabledUnlink: !hasItemSelected(isOverlay), hideAll: async () => changeAllLayerVisibility(false, isOverlay), showAll: async () => changeAllLayerVisibility(true, isOverlay), invert: async () => invertAllLayerVisibility(isOverlay), selectAll: async () => selectAllLayers(isOverlay), unlink: async () => detachSelectedLayers(isOverlay), checked: hasItemSelected(isOverlay) }) })), (0, jsx_runtime_1.jsx)(MapLayerDroppable_1.MapLayerDroppable, { disabled: !backgroundMapVisible, isOverlay: isOverlay, layersList: layerList, mapLayerOptions: props.mapLayerOptions, getContainerForClone: props.getContainerForClone, activeViewport: props.activeViewport, onMenuItemSelected: handleOnMenuItemSelection, onItemVisibilityToggleClicked: handleLayerVisibilityChange, onItemSelected: handleItemSelected, onItemEdited: handleRefreshFromStyle })] }));
+    }, [
+        backgroundMapLayers,
+        backgroundMapVisible,
+        changeAllLayerVisibility,
+        detachSelectedLayers,
+        handleItemSelected,
+        handleLayerVisibilityChange,
+        handleOnMenuItemSelection,
+        handleRefreshFromStyle,
+        hasItemSelected,
+        invertAllLayerVisibility,
+        overlayMapLayers,
+        overlaysLabel,
+        props.activeViewport,
+        props.getContainerForClone,
+        props.mapLayerOptions,
+        selectAllLayers,
+        underlaysLabel,
+    ]);
     const [baseMapPanelLabel] = React.useState(mapLayers_1.MapLayersUI.localization.getLocalizedString("mapLayers:Basemap.BaseMapPanelTitle"));
-    return (React.createElement(exports.SourceMapContext.Provider, { value: {
+    return ((0, jsx_runtime_1.jsxs)(exports.SourceMapContext.Provider, { value: {
             activeViewport,
             loadingSources,
             sources: mapSources ? mapSources : [],
@@ -432,20 +519,7 @@ function MapLayerManager(props) {
             backgroundLayers: backgroundMapLayers,
             overlayLayers: overlayMapLayers,
             mapLayerOptions,
-        } },
-        React.createElement("div", { className: "map-manager-top-header" },
-            React.createElement("span", { className: "map-manager-header-label" }, baseMapPanelLabel),
-            React.createElement("div", { className: "map-manager-header-buttons-group" },
-                React.createElement(itwinui_react_1.ToggleSwitch, { className: "map-manager-toggle", checked: backgroundMapVisible, onChange: handleMapLayersToggle }),
-                React.createElement(MapLayerSettingsPopupButton_1.MapLayerSettingsPopupButton, { disabled: !backgroundMapVisible }))),
-        React.createElement("div", { className: "map-manager-container" },
-            React.createElement("div", { className: "map-manager-basemap" },
-                React.createElement(BasemapPanel_1.BasemapPanel, { disabled: !backgroundMapVisible })),
-            !hideExternalMapLayersSection &&
-                React.createElement("div", null,
-                    React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: handleOnMapLayerDragEnd },
-                        renderMapLayersList({ isOverlay: false }),
-                        renderMapLayersList({ isOverlay: true }))))));
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "map-manager-top-header", children: [(0, jsx_runtime_1.jsx)("span", { className: "map-manager-header-label", children: baseMapPanelLabel }), (0, jsx_runtime_1.jsxs)("div", { className: "map-manager-header-buttons-group", children: [(0, jsx_runtime_1.jsx)(itwinui_react_1.ToggleSwitch, { className: "map-manager-toggle", checked: backgroundMapVisible, onChange: handleMapLayersToggle }), (0, jsx_runtime_1.jsx)(MapLayerSettingsPopupButton_1.MapLayerSettingsPopupButton, { disabled: !backgroundMapVisible })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "map-manager-container", children: [(0, jsx_runtime_1.jsx)("div", { className: "map-manager-basemap", children: (0, jsx_runtime_1.jsx)(BasemapPanel_1.BasemapPanel, { disabled: !backgroundMapVisible }) }), !hideExternalMapLayersSection && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(react_beautiful_dnd_1.DragDropContext, { onDragEnd: handleOnMapLayerDragEnd, children: [renderMapLayersList({ isOverlay: false }), renderMapLayersList({ isOverlay: true })] }) }))] })] }));
 }
 exports.MapLayerManager = MapLayerManager;
 //# sourceMappingURL=MapLayerManager.js.map