@itwin/map-layers 5.4.4 → 5.5.0

package/lib/cjs/ui/widget/MapLayerDroppable.js.map

@@ -1 +1 @@
-{"version":3,"file":"MapLayerDroppable.js","sourceRoot":"","sources":["../../../../src/ui/widget/MapLayerDroppable.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n// cSpell:ignore droppable Sublayer Basemap\n\n// the following quiet warning caused by react-beautiful-dnd package\n/* eslint-disable @typescript-eslint/unbound-method */\n\nimport \"./MapLayerManager.scss\";\nimport * as React from \"react\";\nimport { Draggable, DraggableChildrenFn, Droppable, DroppableProvided, DroppableStateSnapshot } from \"react-beautiful-dnd\";\nimport { UiFramework } from \"@itwin/appui-react\";\nimport { assert } from \"@itwin/core-bentley\";\nimport { ImageMapLayerSettings, SubLayerId } from \"@itwin/core-common\";\nimport {\n  IModelApp, MapLayerImageryProviderStatus, MapLayerIndex, MapTileTreeScaleRangeVisibility, NotifyMessageDetails, OutputMessagePriority,\n  ScreenViewport,\n} from \"@itwin/core-frontend\";\nimport { Icon } from \"@itwin/core-react\";\nimport { Button, Checkbox } from \"@itwin/itwinui-react\";\nimport { MapLayersUI } from \"../../mapLayers\";\nimport { MapLayerOptions, StyleMapLayerSettings } from \"../Interfaces\";\nimport { AttachLayerButtonType, AttachLayerPopupButton } from \"./AttachLayerPopupButton\";\nimport { MapLayerSettingsMenu } from \"./MapLayerSettingsMenu\";\nimport { MapUrlDialog, SourceState } from \"./MapUrlDialog\";\nimport { SubLayersPopupButton } from \"./SubLayersPopupButton\";\n\n/** @internal */\ninterface MapLayerDroppableProps {\n  isOverlay: boolean;\n  layersList?: StyleMapLayerSettings[];\n  mapLayerOptions?: MapLayerOptions;\n  getContainerForClone: () => HTMLElement;\n  activeViewport: ScreenViewport;\n  onMenuItemSelected: (action: string, mapLayerSettings: StyleMapLayerSettings) => void;\n  onItemVisibilityToggleClicked: (mapLayerSettings: StyleMapLayerSettings) => void;\n  onItemSelected: (isOverlay: boolean, index: number) => void;\n  onItemEdited: ( ) => void;\n  disabled?: boolean;\n}\n\nconst changeVisibilityByElementId = (element: Element|null, visible: boolean) => {\n  if (element)\n    element.setAttribute(\"style\", `visibility: ${visible ? \"visible\" : \"hidden\"}`);\n};\n\n/** @internal */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function MapLayerDroppable(props: MapLayerDroppableProps) {\n  const containsLayer = props.layersList && props.layersList.length > 0;\n  const droppableId = props.isOverlay ? \"overlayMapLayers\" : \"backgroundMapLayers\";\n  const [toggleVisibility] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Widget.ToggleVisibility\"));\n  const [requireAuthTooltip] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Widget.RequireAuthTooltip\"));\n  const [noBackgroundMapsSpecifiedLabel] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Widget.NoBackgroundLayers\"));\n  const [noUnderlaysSpecifiedLabel] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Widget.NoOverlayLayers\"));\n  const [dropLayerLabel] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Widget.DropLayerLabel\"));\n  const [outOfRangeTitle] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Widget.layerOutOfRange\"));\n\n  const onSubLayerStateChange = (activeLayer: StyleMapLayerSettings, subLayerId: SubLayerId, isSelected: boolean) => {\n    const mapLayerStyleIdx =  props.activeViewport.displayStyle.findMapLayerIndexByNameAndSource(activeLayer.name, activeLayer.source, activeLayer.isOverlay);\n    if (mapLayerStyleIdx !== -1 && activeLayer.subLayers)\n      props.activeViewport.displayStyle.changeMapSubLayerProps({ visible: isSelected }, subLayerId, { index: mapLayerStyleIdx, isOverlay: activeLayer.isOverlay });\n  };\n\n  const handleOk = React.useCallback((index: MapLayerIndex, sourceState?: SourceState) => {\n    UiFramework.dialogs.modal.close();\n\n    const source = sourceState?.source;\n    const vp = props?.activeViewport;\n    if (vp === undefined || sourceState === undefined || source === undefined) {\n      const error = MapLayersUI.localization.getLocalizedString(\"mapLayers:Messages.MapLayerAttachMissingViewOrSource\");\n      const msg = MapLayersUI.localization.getLocalizedString(\"mapLayers:Messages.MapLayerAttachError\", { error, sourceName: source?.name ?? \"\" });\n      IModelApp.notifications.outputMessage(new NotifyMessageDetails(OutputMessagePriority.Error, msg));\n      return;\n    }\n\n    const validation = sourceState.validation;\n\n    // Layer is already attached,\n    // This calls invalidateRenderPlan()\n    vp.displayStyle.changeMapLayerProps({subLayers: validation.subLayers}, index);\n    vp.displayStyle.changeMapLayerCredentials(index, source.userName, source.password);\n\n    // Either initial attach/initialize failed or the layer failed to load at least one tile\n    // because of an invalid token; in both cases tile tree needs to be fully reset\n    const provider = vp.getMapLayerImageryProvider(index);\n    provider?.resetStatus();\n    vp.resetMapLayer(index);\n\n    props.onItemEdited();\n  }, [props]);\n\n  const changeSettingsMenuVisibility = (event: React.MouseEvent<HTMLDivElement, MouseEvent>, visible: boolean)=>{\n    changeVisibilityByElementId(event.currentTarget.querySelector(\"#MapLayerSettingsMenuWrapper\"), visible);\n    changeVisibilityByElementId(event.currentTarget.querySelector(\"#MapLayerSettingsSubLayersMenu\"), visible);\n  };\n\n  const renderItem: DraggableChildrenFn = (dragProvided, _, rubric) => {\n    assert(props.layersList !== undefined);\n    const activeLayer = props.layersList[rubric.source.index];\n    const outOfRange = activeLayer.treeVisibility === MapTileTreeScaleRangeVisibility.Hidden;\n\n    return (\n      <div className=\"map-manager-source-item\" data-id={rubric.source.index} key={activeLayer.name}\n        {...dragProvided.draggableProps}\n        ref={dragProvided.innerRef}\n        onMouseEnter={(event)=>changeSettingsMenuVisibility(event, true)}\n        onMouseLeave={(event)=>changeSettingsMenuVisibility(event, false)} >\n\n        {/* Checkbox */}\n        <Checkbox data-testid={\"select-item-checkbox\"} checked={activeLayer.selected} onChange={(event: React.ChangeEvent<HTMLInputElement>) => {\n          activeLayer.selected = event.target.checked;\n          props.onItemSelected(props.isOverlay, rubric.source.index);\n        }\n\n        }></Checkbox>\n        {/* Visibility icon */}\n        <Button disabled={props.disabled} size=\"small\" styleType=\"borderless\" className=\"map-manager-item-visibility map-manager-visibility-icon\" title={toggleVisibility} onClick={() => { props.onItemVisibilityToggleClicked(activeLayer); }}>\n          <Icon iconSpec={activeLayer.visible ? \"icon-visibility\" : \"icon-visibility-hide-2\"} />\n        </Button>\n\n        {/* Label */}\n        <span className={props.disabled || outOfRange ? \"map-manager-item-label-disabled\" : \"map-manager-item-label\"}\n          title={outOfRange ? outOfRangeTitle : undefined}\n          {...dragProvided.dragHandleProps}\n\n        >\n          {activeLayer.name}\n          {activeLayer.provider?.status === MapLayerImageryProviderStatus.RequireAuth &&\n          <Button\n            disabled={props.disabled}\n            size=\"small\"\n            styleType=\"borderless\"\n            onClick={() => {\n              const indexInDisplayStyle = props.activeViewport?.displayStyle.findMapLayerIndexByNameAndSource(activeLayer.name, activeLayer.source, activeLayer.isOverlay);\n              if (indexInDisplayStyle !== undefined && indexInDisplayStyle >= 0) {\n                const index = { index: indexInDisplayStyle, isOverlay: activeLayer.isOverlay };\n                const layer = props.activeViewport.displayStyle.mapLayerAtIndex(index);\n                if (layer instanceof ImageMapLayerSettings) {\n                  UiFramework.dialogs.modal.open(\n                    <MapUrlDialog\n                      activeViewport={props.activeViewport}\n                      isOverlay={props.isOverlay}\n                      signInModeArgs={{layer}}\n                      onOkResult={(sourceState?: SourceState) => handleOk(index, sourceState)}\n                      onCancelResult={() => {UiFramework.dialogs.modal.close();}}\n                      mapLayerOptions={props.mapLayerOptions} />\n                  );\n                }\n              }\n\n            }}\n            title={requireAuthTooltip}\n          >\n            <Icon className=\"map-layer-source-item-warnMessage-icon\" iconSpec=\"icon-status-warning\" />\n          </Button>\n          }\n        </span>\n\n        {/* SubLayersPopupButton */}\n        <div id=\"MapLayerSettingsSubLayersMenu\" style={{visibility: \"hidden\"}}  className=\"map-manager-item-sub-layer-container\" >\n          {activeLayer.subLayers && activeLayer.subLayers.length > 1 &&\n            <SubLayersPopupButton\n              checkboxStyle=\"eye\"\n              expandMode=\"rootGroupOnly\"\n              subLayers={props.activeViewport ? activeLayer.subLayers : undefined}\n              singleVisibleSubLayer={activeLayer.provider?.mutualExclusiveSubLayer}\n              onSubLayerStateChange={(subLayerId: SubLayerId, isSelected: boolean) => { onSubLayerStateChange(activeLayer, subLayerId, isSelected); }}\n            />\n          }\n        </div>\n        {activeLayer.provider?.status === MapLayerImageryProviderStatus.RequireAuth &&\n          <Button\n            disabled={props.disabled}\n            size=\"small\"\n            styleType=\"borderless\"\n            onClick={() => {\n              const indexInDisplayStyle = props.activeViewport?.displayStyle.findMapLayerIndexByNameAndSource(activeLayer.name, activeLayer.source, activeLayer.isOverlay);\n              if (indexInDisplayStyle !== undefined && indexInDisplayStyle >= 0) {\n                const index = { index: indexInDisplayStyle, isOverlay: activeLayer.isOverlay };\n                const layer = props.activeViewport.displayStyle.mapLayerAtIndex(index);\n                if (layer instanceof ImageMapLayerSettings) {\n                  UiFramework.dialogs.modal.open(\n                    <MapUrlDialog\n                      activeViewport={props.activeViewport}\n                      isOverlay={props.isOverlay}\n                      signInModeArgs={{layer}}\n                      onOkResult={(sourceState?: SourceState) => handleOk(index, sourceState)}\n                      onCancelResult={() => {UiFramework.dialogs.modal.close();}}\n                      mapLayerOptions={props.mapLayerOptions} />\n                  );\n                }\n              }\n\n            }}\n            title={requireAuthTooltip}\n          >\n            <Icon className=\"map-layer-source-item-warnMessage-icon\" iconSpec=\"icon-status-warning\" />\n          </Button>\n        }\n        <div id=\"MapLayerSettingsMenuWrapper\" style={{visibility: \"hidden\"}} >\n          <MapLayerSettingsMenu activeViewport={props.activeViewport} mapLayerSettings={activeLayer} onMenuItemSelection={props.onMenuItemSelected} disabled={props.disabled} />\n        </div>\n\n      </div>\n    );\n  };\n\n  function renderDraggableContent(snapshot: DroppableStateSnapshot): React.ReactNode {\n    let node: React.ReactNode;\n    if (containsLayer) {\n      // Render a <Draggable>\n      node = (props.layersList?.map((mapLayerSettings, i) =>\n        <Draggable isDragDisabled={props.disabled} key={mapLayerSettings.name} draggableId={mapLayerSettings.name} index={i}>\n          {renderItem}\n        </Draggable>));\n    } else {\n      // Render a label that provide a 'Drop here' hint\n      const label = props.isOverlay ? noUnderlaysSpecifiedLabel : noBackgroundMapsSpecifiedLabel;\n      node =\n        <div title={label} className=\"map-manager-no-layers-container\">\n          {snapshot.isDraggingOver ?\n            <span className=\"map-manager-no-layers-label\">{dropLayerLabel}</span>\n            :\n            <>\n              <span className=\"map-manager-no-layers-label\">{label}</span>\n              <AttachLayerPopupButton disabled={props.disabled} buttonType={AttachLayerButtonType.Blue} isOverlay={props.isOverlay} />\n            </>\n          }\n        </div>;\n    }\n    return node;\n  }\n\n  function renderDraggable(dropProvided: DroppableProvided, dropSnapshot: DroppableStateSnapshot): React.ReactElement<HTMLElement> {\n    return (\n      <div className={`map-manager-attachments${dropSnapshot.isDraggingOver && containsLayer ? \" is-dragging-map-over\" : \"\"}`} ref={dropProvided.innerRef} {...dropProvided.droppableProps} >\n\n        {renderDraggableContent(dropSnapshot)}\n\n        {\n          /* We don't want a placeholder when displaying the 'Drop here' message\n              Unfortunately, if don't add it, 'react-beautiful-dnd' show an error message in the console.\n              So I simply make it hidden. See https://github.com/atlassian/react-beautiful-dnd/issues/518 */\n        }\n        <div style={containsLayer ? undefined : { display: \"none\" }}>{dropProvided.placeholder}</div>\n      </div>);\n  }\n\n  return (\n    <Droppable\n      droppableId={droppableId}\n      renderClone={renderItem}\n      getContainerForClone={props.getContainerForClone as any}\n    >\n      {renderDraggable}\n    </Droppable>\n  );\n}\n"]}
+{"version":3,"file":"MapLayerDroppable.js","sourceRoot":"","sources":["../../../../src/ui/widget/MapLayerDroppable.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n// cSpell:ignore droppable Sublayer Basemap\n\n// the following quiet warning caused by react-beautiful-dnd package\n/* eslint-disable @typescript-eslint/unbound-method */\n\nimport \"./MapLayerManager.scss\";\nimport * as React from \"react\";\nimport { Draggable, Droppable } from \"react-beautiful-dnd\";\nimport { UiFramework } from \"@itwin/appui-react\";\nimport { assert } from \"@itwin/core-bentley\";\nimport { ImageMapLayerSettings } from \"@itwin/core-common\";\nimport {\n  IModelApp,\n  MapLayerImageryProviderStatus,\n  MapTileTreeScaleRangeVisibility,\n  NotifyMessageDetails,\n  OutputMessagePriority,\n} from \"@itwin/core-frontend\";\nimport { Icon } from \"@itwin/core-react\";\nimport { Button, Checkbox } from \"@itwin/itwinui-react\";\nimport { MapLayersUI } from \"../../mapLayers\";\nimport { AttachLayerButtonType, AttachLayerPopupButton } from \"./AttachLayerPopupButton\";\nimport { MapLayerSettingsMenu } from \"./MapLayerSettingsMenu\";\nimport { MapUrlDialog } from \"./MapUrlDialog\";\nimport { SubLayersPopupButton } from \"./SubLayersPopupButton\";\n\nimport type { DraggableChildrenFn, DroppableProvided, DroppableStateSnapshot } from \"react-beautiful-dnd\";\nimport type { SubLayerId } from \"@itwin/core-common\";\nimport type { MapLayerIndex, ScreenViewport } from \"@itwin/core-frontend\";\nimport type { MapLayerOptions, StyleMapLayerSettings } from \"../Interfaces\";\nimport type { SourceState } from \"./MapUrlDialog\";\n/** @internal */\ninterface MapLayerDroppableProps {\n  isOverlay: boolean;\n  layersList?: StyleMapLayerSettings[];\n  mapLayerOptions?: MapLayerOptions;\n  getContainerForClone: () => HTMLElement;\n  activeViewport: ScreenViewport;\n  onMenuItemSelected: (action: string, mapLayerSettings: StyleMapLayerSettings) => void;\n  onItemVisibilityToggleClicked: (mapLayerSettings: StyleMapLayerSettings) => void;\n  onItemSelected: (isOverlay: boolean, index: number) => void;\n  onItemEdited: () => void;\n  disabled?: boolean;\n}\n\nconst changeVisibilityByElementId = (element: Element | null, visible: boolean) => {\n  if (element) {\n    element.setAttribute(\"style\", `visibility: ${visible ? \"visible\" : \"hidden\"}`);\n  }\n};\n\n/** @internal */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function MapLayerDroppable(props: MapLayerDroppableProps) {\n  const containsLayer = props.layersList && props.layersList.length > 0;\n  const droppableId = props.isOverlay ? \"overlayMapLayers\" : \"backgroundMapLayers\";\n  const [toggleVisibility] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Widget.ToggleVisibility\"));\n  const [requireAuthTooltip] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Widget.RequireAuthTooltip\"));\n  const [noBackgroundMapsSpecifiedLabel] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Widget.NoBackgroundLayers\"));\n  const [noUnderlaysSpecifiedLabel] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Widget.NoOverlayLayers\"));\n  const [dropLayerLabel] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Widget.DropLayerLabel\"));\n  const [outOfRangeTitle] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Widget.layerOutOfRange\"));\n\n  const onSubLayerStateChange = (activeLayer: StyleMapLayerSettings, subLayerId: SubLayerId, isSelected: boolean) => {\n    const mapLayerStyleIdx = props.activeViewport.displayStyle.findMapLayerIndexByNameAndSource(activeLayer.name, activeLayer.source, activeLayer.isOverlay);\n    if (mapLayerStyleIdx !== -1 && activeLayer.subLayers) {\n      props.activeViewport.displayStyle.changeMapSubLayerProps({ visible: isSelected }, subLayerId, {\n        index: mapLayerStyleIdx,\n        isOverlay: activeLayer.isOverlay,\n      });\n    }\n  };\n\n  const handleOk = React.useCallback(\n    (index: MapLayerIndex, sourceState?: SourceState) => {\n      UiFramework.dialogs.modal.close();\n\n      const source = sourceState?.source;\n      const vp = props?.activeViewport;\n      if (vp === undefined || sourceState === undefined || source === undefined) {\n        const error = MapLayersUI.localization.getLocalizedString(\"mapLayers:Messages.MapLayerAttachMissingViewOrSource\");\n        const msg = MapLayersUI.localization.getLocalizedString(\"mapLayers:Messages.MapLayerAttachError\", { error, sourceName: source?.name ?? \"\" });\n        IModelApp.notifications.outputMessage(new NotifyMessageDetails(OutputMessagePriority.Error, msg));\n        return;\n      }\n\n      const validation = sourceState.validation;\n\n      // Layer is already attached,\n      // This calls invalidateRenderPlan()\n      vp.displayStyle.changeMapLayerProps({ subLayers: validation.subLayers }, index);\n      vp.displayStyle.changeMapLayerCredentials(index, source.userName, source.password);\n\n      // Either initial attach/initialize failed or the layer failed to load at least one tile\n      // because of an invalid token; in both cases tile tree needs to be fully reset\n      const provider = vp.getMapLayerImageryProvider(index);\n      provider?.resetStatus();\n      vp.resetMapLayer(index);\n\n      props.onItemEdited();\n    },\n    [props],\n  );\n\n  const changeSettingsMenuVisibility = (event: React.MouseEvent<HTMLDivElement, MouseEvent>, visible: boolean) => {\n    changeVisibilityByElementId(event.currentTarget.querySelector(\"#MapLayerSettingsMenuWrapper\"), visible);\n    changeVisibilityByElementId(event.currentTarget.querySelector(\"#MapLayerSettingsSubLayersMenu\"), visible);\n  };\n\n  const renderItem: DraggableChildrenFn = (dragProvided, _, rubric) => {\n    assert(props.layersList !== undefined);\n    const activeLayer = props.layersList[rubric.source.index];\n    const outOfRange = activeLayer.treeVisibility === MapTileTreeScaleRangeVisibility.Hidden;\n\n    return (\n      <div\n        className=\"map-manager-source-item\"\n        data-id={rubric.source.index}\n        key={activeLayer.name}\n        {...dragProvided.draggableProps}\n        ref={dragProvided.innerRef}\n        onMouseEnter={(event) => changeSettingsMenuVisibility(event, true)}\n        onMouseLeave={(event) => changeSettingsMenuVisibility(event, false)}\n      >\n        {/* Checkbox */}\n        <Checkbox\n          data-testid={\"select-item-checkbox\"}\n          checked={activeLayer.selected}\n          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {\n            activeLayer.selected = event.target.checked;\n            props.onItemSelected(props.isOverlay, rubric.source.index);\n          }}\n        ></Checkbox>\n        {/* Visibility icon */}\n        <Button\n          disabled={props.disabled}\n          size=\"small\"\n          styleType=\"borderless\"\n          className=\"map-manager-item-visibility map-manager-visibility-icon\"\n          title={toggleVisibility}\n          onClick={() => {\n            props.onItemVisibilityToggleClicked(activeLayer);\n          }}\n        >\n          <Icon iconSpec={activeLayer.visible ? \"icon-visibility\" : \"icon-visibility-hide-2\"} />\n        </Button>\n\n        {/* Label */}\n        <span\n          className={props.disabled || outOfRange ? \"map-manager-item-label-disabled\" : \"map-manager-item-label\"}\n          title={outOfRange ? outOfRangeTitle : undefined}\n          {...dragProvided.dragHandleProps}\n        >\n          {activeLayer.name}\n          {/* eslint-disable-next-line @itwin/no-internal */}\n          {activeLayer.provider?.status === MapLayerImageryProviderStatus.RequireAuth && (\n            <Button\n              disabled={props.disabled}\n              size=\"small\"\n              styleType=\"borderless\"\n              onClick={() => {\n                const indexInDisplayStyle = props.activeViewport?.displayStyle.findMapLayerIndexByNameAndSource(\n                  activeLayer.name,\n                  activeLayer.source,\n                  activeLayer.isOverlay,\n                );\n                if (indexInDisplayStyle !== undefined && indexInDisplayStyle >= 0) {\n                  const index = { index: indexInDisplayStyle, isOverlay: activeLayer.isOverlay };\n                  const layer = props.activeViewport.displayStyle.mapLayerAtIndex(index);\n                  if (layer instanceof ImageMapLayerSettings) {\n                    UiFramework.dialogs.modal.open(\n                      <MapUrlDialog\n                        activeViewport={props.activeViewport}\n                        isOverlay={props.isOverlay}\n                        signInModeArgs={{ layer }}\n                        onOkResult={(sourceState?: SourceState) => handleOk(index, sourceState)}\n                        onCancelResult={() => {\n                          UiFramework.dialogs.modal.close();\n                        }}\n                        mapLayerOptions={props.mapLayerOptions}\n                      />,\n                    );\n                  }\n                }\n              }}\n              title={requireAuthTooltip}\n            >\n              <Icon className=\"map-layer-source-item-warnMessage-icon\" iconSpec=\"icon-status-warning\" />\n            </Button>\n          )}\n        </span>\n\n        {/* SubLayersPopupButton */}\n        <div id=\"MapLayerSettingsSubLayersMenu\" style={{ visibility: \"hidden\" }} className=\"map-manager-item-sub-layer-container\">\n          {activeLayer.subLayers && activeLayer.subLayers.length > 1 && (\n            <SubLayersPopupButton\n              checkboxStyle=\"eye\"\n              expandMode=\"rootGroupOnly\"\n              subLayers={props.activeViewport ? activeLayer.subLayers : undefined}\n              singleVisibleSubLayer={activeLayer.provider?.mutualExclusiveSubLayer}\n              onSubLayerStateChange={(subLayerId: SubLayerId, isSelected: boolean) => {\n                onSubLayerStateChange(activeLayer, subLayerId, isSelected);\n              }}\n            />\n          )}\n        </div>\n        {/* eslint-disable-next-line @itwin/no-internal */}\n        {activeLayer.provider?.status === MapLayerImageryProviderStatus.RequireAuth && (\n          <Button\n            disabled={props.disabled}\n            size=\"small\"\n            styleType=\"borderless\"\n            onClick={() => {\n              const indexInDisplayStyle = props.activeViewport?.displayStyle.findMapLayerIndexByNameAndSource(\n                activeLayer.name,\n                activeLayer.source,\n                activeLayer.isOverlay,\n              );\n              if (indexInDisplayStyle !== undefined && indexInDisplayStyle >= 0) {\n                const index = { index: indexInDisplayStyle, isOverlay: activeLayer.isOverlay };\n                const layer = props.activeViewport.displayStyle.mapLayerAtIndex(index);\n                if (layer instanceof ImageMapLayerSettings) {\n                  UiFramework.dialogs.modal.open(\n                    <MapUrlDialog\n                      activeViewport={props.activeViewport}\n                      isOverlay={props.isOverlay}\n                      signInModeArgs={{ layer }}\n                      onOkResult={(sourceState?: SourceState) => handleOk(index, sourceState)}\n                      onCancelResult={() => {\n                        UiFramework.dialogs.modal.close();\n                      }}\n                      mapLayerOptions={props.mapLayerOptions}\n                    />,\n                  );\n                }\n              }\n            }}\n            title={requireAuthTooltip}\n          >\n            <Icon className=\"map-layer-source-item-warnMessage-icon\" iconSpec=\"icon-status-warning\" />\n          </Button>\n        )}\n        <div id=\"MapLayerSettingsMenuWrapper\" style={{ visibility: \"hidden\" }}>\n          <MapLayerSettingsMenu\n            activeViewport={props.activeViewport}\n            mapLayerSettings={activeLayer}\n            onMenuItemSelection={props.onMenuItemSelected}\n            disabled={props.disabled}\n          />\n        </div>\n      </div>\n    );\n  };\n\n  function renderDraggableContent(snapshot: DroppableStateSnapshot): React.ReactNode {\n    let node: React.ReactNode;\n    if (containsLayer) {\n      // Render a <Draggable>\n      node = props.layersList?.map((mapLayerSettings, i) => (\n        <Draggable isDragDisabled={props.disabled} key={mapLayerSettings.name} draggableId={mapLayerSettings.name} index={i}>\n          {renderItem}\n        </Draggable>\n      ));\n    } else {\n      // Render a label that provide a 'Drop here' hint\n      const label = props.isOverlay ? noUnderlaysSpecifiedLabel : noBackgroundMapsSpecifiedLabel;\n      node = (\n        <div title={label} className=\"map-manager-no-layers-container\">\n          {snapshot.isDraggingOver ? (\n            <span className=\"map-manager-no-layers-label\">{dropLayerLabel}</span>\n          ) : (\n            <>\n              <span className=\"map-manager-no-layers-label\">{label}</span>\n              <AttachLayerPopupButton disabled={props.disabled} buttonType={AttachLayerButtonType.Blue} isOverlay={props.isOverlay} />\n            </>\n          )}\n        </div>\n      );\n    }\n    return node;\n  }\n\n  function renderDraggable(dropProvided: DroppableProvided, dropSnapshot: DroppableStateSnapshot): React.ReactElement<HTMLElement> {\n    return (\n      <div\n        className={`map-manager-attachments${dropSnapshot.isDraggingOver && containsLayer ? \" is-dragging-map-over\" : \"\"}`}\n        ref={dropProvided.innerRef}\n        {...dropProvided.droppableProps}\n      >\n        {renderDraggableContent(dropSnapshot)}\n\n        {/* We don't want a placeholder when displaying the 'Drop here' message\n              Unfortunately, if don't add it, 'react-beautiful-dnd' show an error message in the console.\n              So I simply make it hidden. See https://github.com/atlassian/react-beautiful-dnd/issues/518 */}\n        <div style={containsLayer ? undefined : { display: \"none\" }}>{dropProvided.placeholder}</div>\n      </div>\n    );\n  }\n\n  return (\n    <Droppable droppableId={droppableId} renderClone={renderItem} getContainerForClone={props.getContainerForClone as any}>\n      {renderDraggable}\n    </Droppable>\n  );\n}\n"]}

package/lib/cjs/ui/widget/MapLayerManager.d.ts

@@ -1,8 +1,8 @@
 import "./MapLayerManager.scss";
 import * as React from "react";
 import { BaseMapLayerSettings } from "@itwin/core-common";
-import { MapLayerSource, ScreenViewport } from "@itwin/core-frontend";
-import { MapLayerOptions, StyleMapLayerSettings } from "../Interfaces";
+import type { MapLayerSource, ScreenViewport } from "@itwin/core-frontend";
+import type { MapLayerOptions, StyleMapLayerSettings } from "../Interfaces";
 /** @internal */
 export interface SourceMapContextProps {
     readonly sources: MapLayerSource[];

package/lib/cjs/ui/widget/MapLayerManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MapLayerManager.d.ts","sourceRoot":"","sources":["../../../../src/ui/widget/MapLayerManager.tsx"],"names":[],"mappings":"AASA,OAAO,wBAAwB,CAAC;AAChC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EACqC,oBAAoB,EAC/D,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACiF,cAAc,EAC7E,cAAc,EACtC,MAAM,sBAAsB,CAAC;AAM9B,OAAO,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAOvE,gBAAgB;AAChB,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,OAAO,EAAE,cAAc,EAAE,CAAC;IACnC,QAAQ,CAAC,cAAc,EAAE,OAAO,CAAC;IACjC,QAAQ,CAAC,KAAK,EAAE,oBAAoB,EAAE,CAAC;IACvC,QAAQ,CAAC,gBAAgB,EAAE,MAAM,IAAI,CAAC;IACtC,QAAQ,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC;IACzC,QAAQ,CAAC,gBAAgB,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACpD,QAAQ,CAAC,aAAa,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACjD,QAAQ,CAAC,eAAe,CAAC,EAAE,eAAe,CAAC;CAC5C;AAED,gBAAgB;AAChB,eAAO,MAAM,oBAAoB,wBAIhC,CAAC;AAEF,gBAAgB;AAChB,eAAO,MAAM,gBAAgB,sCAK3B,CAAC;AAEH,gBAAgB;AAChB,wBAAgB,mBAAmB,IAAI,qBAAqB,CAE3D;AAwCD,UAAU,oBAAoB;IAC5B,oBAAoB,EAAE,MAAM,WAAW,CAAC;IACxC,cAAc,EAAE,cAAc,CAAC;IAC/B,eAAe,CAAC,EAAE,eAAe,CAAC;CACnC;AAGD,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eA2e1D"}
+{"version":3,"file":"MapLayerManager.d.ts","sourceRoot":"","sources":["../../../../src/ui/widget/MapLayerManager.tsx"],"names":[],"mappings":"AASA,OAAO,wBAAwB,CAAC;AAChC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAA4C,oBAAoB,EAAyB,MAAM,oBAAoB,CAAC;AAC3H,OAAO,KAAK,EAAyD,cAAc,EAAE,cAAc,EAA2B,MAAM,sBAAsB,CAAC;AAO3J,OAAO,KAAK,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAQ5E,gBAAgB;AAChB,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,OAAO,EAAE,cAAc,EAAE,CAAC;IACnC,QAAQ,CAAC,cAAc,EAAE,OAAO,CAAC;IACjC,QAAQ,CAAC,KAAK,EAAE,oBAAoB,EAAE,CAAC;IACvC,QAAQ,CAAC,gBAAgB,EAAE,MAAM,IAAI,CAAC;IACtC,QAAQ,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC;IACzC,QAAQ,CAAC,gBAAgB,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACpD,QAAQ,CAAC,aAAa,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACjD,QAAQ,CAAC,eAAe,CAAC,EAAE,eAAe,CAAC;CAC5C;AAED,gBAAgB;AAChB,eAAO,MAAM,oBAAoB,wBAIhC,CAAC;AAEF,gBAAgB;AAChB,eAAO,MAAM,gBAAgB,sCAM3B,CAAC;AAEH,gBAAgB;AAChB,wBAAgB,mBAAmB,IAAI,qBAAqB,CAE3D;AAyCD,UAAU,oBAAoB;IAC5B,oBAAoB,EAAE,MAAM,WAAW,CAAC;IACxC,cAAc,EAAE,cAAc,CAAC;IAC/B,eAAe,CAAC,EAAE,eAAe,CAAC;CACnC;AAGD,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eA8kB1D"}

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