@itwin/map-layers 5.4.3 → 5.5.0

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

@@ -1,7 +1,8 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "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.
-*--------------------------------------------------------------------------------------------*/
+ * 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 */
@@ -9,8 +10,8 @@ import "./MapLayerManager.scss";
 import * as React from "react";
 import { DragDropContext } from "react-beautiful-dnd";
 import { BentleyError, compareStrings } from "@itwin/core-bentley";
-import { BackgroundMapProvider, BackgroundMapType, BaseMapLayerSettings, ImageMapLayerSettings, } from "@itwin/core-common";
-import { ImageryMapTileTree, IModelApp, MapLayerSources, NotifyMessageDetails, OutputMessagePriority, } from "@itwin/core-frontend";
+import { BackgroundMapProvider, BackgroundMapType, BaseMapLayerSettings, ImageMapLayerSettings } from "@itwin/core-common";
+import { ImageryMapTileTree, IModelApp, MapLayerSources, NotifyMessageDetails, OutputMessagePriority } from "@itwin/core-frontend";
 import { ToggleSwitch } from "@itwin/itwinui-react";
 import { CustomParamsMappingStorage } from "../../CustomParamsMappingStorage";
 import { CustomParamUtils } from "../../CustomParamUtils";
@@ -21,6 +22,7 @@ import { MapLayerActionButtons } from "./MapLayerActionButtons";
 import { MapLayerDroppable } from "./MapLayerDroppable";
 import { MapLayerSettingsPopupButton } from "./MapLayerSettingsPopupButton";
 import { MapManagerLayersHeader } from "./MapManagerMapLayersHeader";
+import { MapLayersSyncUiEventId } from "../../MapLayersActionIds";
 /** @internal */
 export const defaultBaseMapLayers = [
     BaseMapLayerSettings.fromProvider(BackgroundMapProvider.fromJSON({ name: "BingProvider", type: BackgroundMapType.Aerial })),
@@ -29,6 +31,7 @@ export const defaultBaseMapLayers = [
 ];
 /** @internal */
 export const SourceMapContext = React.createContext({
+    // eslint-disable-line @typescript-eslint/naming-convention
     sources: [],
     loadingSources: false,
     bases: [],
@@ -43,16 +46,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 ImageMapLayerSettings);
+        const popSubLayers = populateSubLayers && layerSettings instanceof ImageMapLayerSettings;
         layers.push({
             visible: layerSettings.visible,
             treeVisibility,
@@ -122,14 +126,17 @@ export 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));
@@ -140,10 +147,11 @@ export 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);
             }
+            IModelApp.toolAdmin.dispatchUiSyncEvent(MapLayersSyncUiEventId.MapImageryChanged);
         };
         return activeViewport?.displayStyle.settings.onMapImageryChanged.addListener(handleMapImageryChanged);
     }, [activeViewport, backgroundMapLayers, loadMapLayerSettingsFromViewport, overlayMapLayers]);
@@ -152,11 +160,19 @@ export 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.
@@ -170,7 +186,7 @@ export function MapLayerManager(props) {
     React.useEffect(() => {
         async function fetchSources() {
             let preferenceSources = [];
-            const sourceLayers = await MapLayerSources.create(undefined, (fetchPublicMapLayerSources && !hideExternalMapLayersSection));
+            const sourceLayers = await MapLayerSources.create(undefined, fetchPublicMapLayerSources && !hideExternalMapLayersSection);
             const iModel = activeViewport.iModel;
             try {
                 if (iModel?.iTwinId !== undefined) {
@@ -192,8 +208,8 @@ export function MapLayerManager(props) {
                 // Find existing entries to avoid adding duplicated sources
                 if (!sources.find((curSource) => source.name === curSource.name)) {
                     const cpMapping = cpMappingStorage.get(source.url.toLowerCase());
-                    if (cpMapping && cpMapping.length > 0) {
-                        CustomParamUtils.setSourceCustomParams(source, cpMapping[0].customParamNames);
+                    if (cpMapping && !Array.isArray(cpMapping)) {
+                        CustomParamUtils.setSourceCustomParams(source, cpMapping.customParamNames);
                     }
                     addSource(source);
                 }
@@ -202,30 +218,33 @@ export 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 === MapLayerSourceChangeType.Replaced || changeType === MapLayerSourceChangeType.Removed);
-            const addSource = (changeType === MapLayerSourceChangeType.Replaced || changeType === MapLayerSourceChangeType.Added);
-            let tmpSources = (mapSources ? [...mapSources] : undefined);
+            const removeSource = changeType === MapLayerSourceChangeType.Replaced || changeType === MapLayerSourceChangeType.Removed;
+            const addSource = changeType === MapLayerSourceChangeType.Replaced || changeType === 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 !== MapLayerSourceChangeType.Replaced)
+                    if (changeType !== MapLayerSourceChangeType.Replaced) {
                         setMapSources(tmpSources);
+                    }
                 }
             }
             if (addSource) {
@@ -246,22 +265,27 @@ export 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 = MapLayersUI.localization.getLocalizedString("mapLayers:Messages.NoRangeDefined");
                         IModelApp.notifications.outputMessage(new NotifyMessageDetails(OutputMessagePriority.Error, `${msg} [${mapLayerSettings.name}]`));
                     }
-                }).catch((_error) => { });
+                })
+                    .catch((_error) => { });
                 break;
         }
         // force UI to update
@@ -285,38 +309,49 @@ export function MapLayerManager(props) {
             const newState = !backgroundMapVisible;
             activeViewport.viewFlags = activeViewport.viewFlags.with("backgroundMap", newState);
             setBackgroundMapVisible(newState);
+            IModelApp.toolAdmin.dispatchUiSyncEvent(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 });
@@ -338,8 +373,9 @@ export function MapLayerManager(props) {
             }
             else {
                 if (toMapLayer) {
-                    if (toIndexInDisplayStyle !== -1)
+                    if (toIndexInDisplayStyle !== -1) {
                         displayStyle.moveMapLayerToIndex(fromIndexInDisplayStyle, toIndexInDisplayStyle, toMapLayer.isOverlay);
+                    }
                 }
             }
         }
@@ -349,77 +385,105 @@ export 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 _jsx(_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(MapManagerLayersHeader, { label: label, isOverlay: isOverlay, disabled: !backgroundMapVisible }),
-            (layerList && layerList.length > 0) &&
-                React.createElement(React.Fragment, null,
-                    React.createElement(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, { 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 (_jsxs("div", { className: "map-manager-layer-wrapper", "data-testid": "map-manager-layer-section", children: [_jsx(MapManagerLayersHeader, { label: label, isOverlay: isOverlay, disabled: !backgroundMapVisible }), layerList && layerList.length > 0 && (_jsx(_Fragment, { children: _jsx(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) }) })), _jsx(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(MapLayersUI.localization.getLocalizedString("mapLayers:Basemap.BaseMapPanelTitle"));
-    return (React.createElement(SourceMapContext.Provider, { value: {
+    return (_jsxs(SourceMapContext.Provider, { value: {
             activeViewport,
             loadingSources,
             sources: mapSources ? mapSources : [],
@@ -428,19 +492,6 @@ export 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(ToggleSwitch, { className: "map-manager-toggle", checked: backgroundMapVisible, onChange: handleMapLayersToggle }),
-                React.createElement(MapLayerSettingsPopupButton, { disabled: !backgroundMapVisible }))),
-        React.createElement("div", { className: "map-manager-container" },
-            React.createElement("div", { className: "map-manager-basemap" },
-                React.createElement(BasemapPanel, { disabled: !backgroundMapVisible })),
-            !hideExternalMapLayersSection &&
-                React.createElement("div", null,
-                    React.createElement(DragDropContext, { onDragEnd: handleOnMapLayerDragEnd },
-                        renderMapLayersList({ isOverlay: false }),
-                        renderMapLayersList({ isOverlay: true }))))));
+        }, children: [_jsxs("div", { className: "map-manager-top-header", children: [_jsx("span", { className: "map-manager-header-label", children: baseMapPanelLabel }), _jsxs("div", { className: "map-manager-header-buttons-group", children: [_jsx(ToggleSwitch, { className: "map-manager-toggle", checked: backgroundMapVisible, onChange: handleMapLayersToggle }), _jsx(MapLayerSettingsPopupButton, { disabled: !backgroundMapVisible })] })] }), _jsxs("div", { className: "map-manager-container", children: [_jsx("div", { className: "map-manager-basemap", children: _jsx(BasemapPanel, { disabled: !backgroundMapVisible }) }), !hideExternalMapLayersSection && (_jsx("div", { children: _jsxs(DragDropContext, { onDragEnd: handleOnMapLayerDragEnd, children: [renderMapLayersList({ isOverlay: false }), renderMapLayersList({ isOverlay: true })] }) }))] })] }));
 }
 //# sourceMappingURL=MapLayerManager.js.map