@itwin/map-layers 4.0.0-dev.28 → 4.0.0-dev.32

package/lib/esm/ui/widget/MapLayerSettingsMenu.d.ts

@@ -1,13 +1,13 @@
-/// <reference types="react" />
-import { ScreenViewport } from "@itwin/core-frontend";
-import "./MapLayerManager.scss";
-import { StyleMapLayerSettings } from "../Interfaces";
-interface MapLayerSettingsMenuProps {
-    mapLayerSettings: StyleMapLayerSettings;
-    onMenuItemSelection: (action: string, mapLayerSettings: StyleMapLayerSettings) => void;
-    activeViewport: ScreenViewport;
-    disabled?: boolean;
-}
-export declare function MapLayerSettingsMenu({ mapLayerSettings, onMenuItemSelection, activeViewport, disabled }: MapLayerSettingsMenuProps): JSX.Element;
-export {};
+/// <reference types="react" />
+import { ScreenViewport } from "@itwin/core-frontend";
+import "./MapLayerManager.scss";
+import { StyleMapLayerSettings } from "../Interfaces";
+interface MapLayerSettingsMenuProps {
+    mapLayerSettings: StyleMapLayerSettings;
+    onMenuItemSelection: (action: string, mapLayerSettings: StyleMapLayerSettings) => void;
+    activeViewport: ScreenViewport;
+    disabled?: boolean;
+}
+export declare function MapLayerSettingsMenu({ mapLayerSettings, onMenuItemSelection, activeViewport, disabled }: MapLayerSettingsMenuProps): JSX.Element;
+export {};
 //# sourceMappingURL=MapLayerSettingsMenu.d.ts.map

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

@@ -1,79 +1,79 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-import * as React from "react";
-import { ContextMenu, ContextMenuItem } from "@itwin/core-react";
-import { Button, Slider } from "@itwin/itwinui-react";
-import "./MapLayerManager.scss";
-import { MapLayersUI } from "../../mapLayers";
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export function MapLayerSettingsMenu({ mapLayerSettings, onMenuItemSelection, activeViewport, disabled }) {
-    const [isSettingsOpen, setIsSettingsOpen] = React.useState(false);
-    const settingsRef = React.useRef(null);
-    const [labelDetach] = React.useState(MapLayersUI.localization.getLocalizedString("mapLayers:LayerMenu.Detach"));
-    const [labelZoomToLayer] = React.useState(MapLayersUI.localization.getLocalizedString("mapLayers:LayerMenu.ZoomToLayer"));
-    const [hasRangeData, setHasRangeData] = React.useState();
-    const [transparency, setTransparency] = React.useState(mapLayerSettings.transparency);
-    React.useEffect(() => {
-        async function fetchRangeData() {
-            let hasRange = false;
-            const indexInDisplayStyle = activeViewport?.displayStyle.findMapLayerIndexByNameAndSource(mapLayerSettings.name, mapLayerSettings.source, mapLayerSettings.isOverlay);
-            if (undefined !== indexInDisplayStyle) {
-                hasRange = (undefined !== await activeViewport.displayStyle.getMapLayerRange(indexInDisplayStyle, mapLayerSettings.isOverlay));
-            }
-            setHasRangeData(hasRange);
-        }
-        fetchRangeData(); // eslint-disable-line @typescript-eslint/no-floating-promises
-    }, [activeViewport, mapLayerSettings]);
-    const onSettingsClick = React.useCallback(() => {
-        setIsSettingsOpen((prev) => !prev);
-    }, [setIsSettingsOpen]);
-    const handleCloseSetting = React.useCallback(() => {
-        setIsSettingsOpen(false);
-    }, [setIsSettingsOpen]);
-    const handleRemoveLayer = React.useCallback(() => {
-        setIsSettingsOpen(false);
-        onMenuItemSelection("delete", mapLayerSettings);
-    }, [setIsSettingsOpen, onMenuItemSelection, mapLayerSettings]);
-    const handleZoomToLayer = React.useCallback(() => {
-        setIsSettingsOpen(false);
-        onMenuItemSelection("zoom-to-layer", mapLayerSettings);
-    }, [setIsSettingsOpen, onMenuItemSelection, mapLayerSettings]);
-    const applyTransparencyChange = React.useCallback((value) => {
-        if (activeViewport) {
-            const newTransparency = value;
-            const displayStyle = activeViewport.displayStyle;
-            const indexInDisplayStyle = displayStyle.findMapLayerIndexByNameAndSource(mapLayerSettings.name, mapLayerSettings.source, mapLayerSettings.isOverlay);
-            if (-1 !== indexInDisplayStyle) {
-                const styleTransparency = displayStyle.mapLayerAtIndex(indexInDisplayStyle, mapLayerSettings.isOverlay)?.transparency;
-                const styleTransparencyValue = styleTransparency ? styleTransparency : 0;
-                if (Math.abs(styleTransparencyValue - newTransparency) > 0.01) {
-                    // update the display style
-                    displayStyle.changeMapLayerProps({ transparency: newTransparency }, indexInDisplayStyle, mapLayerSettings.isOverlay);
-                    activeViewport.invalidateRenderPlan();
-                    // force UI to update
-                    // loadMapLayerSettingsFromStyle(activeViewport.displayStyle);
-                }
-            }
-        }
-    }, [activeViewport, mapLayerSettings]);
-    const handleTransparencyChange = React.useCallback((values) => {
-        if (values.length) {
-            const newTransparency = values[0] / 100.0;
-            if (newTransparency !== transparency) {
-                setTransparency(newTransparency);
-                applyTransparencyChange(newTransparency);
-            }
-        }
-    }, [transparency, applyTransparencyChange]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { disabled: disabled, size: "small", styleType: "borderless", "data-testid": "map-layer-settings", className: "map-layer-settings icon icon-more-vertical-2", ref: settingsRef, onClick: onSettingsClick }),
-        React.createElement(ContextMenu, { opened: isSettingsOpen && (undefined !== hasRangeData), onOutsideClick: handleCloseSetting },
-            React.createElement("div", { className: "map-manager-item-menu" },
-                React.createElement(ContextMenuItem, { hideIconContainer: true, key: 0, className: hasRangeData ? "" : "core-context-menu-disabled", onSelect: handleZoomToLayer }, labelZoomToLayer),
-                React.createElement(ContextMenuItem, { hideIconContainer: true, key: 1, onSelect: handleRemoveLayer }, labelDetach),
-                React.createElement(ContextMenuItem, { hideIconContainer: true, key: 2 },
-                    React.createElement(Slider, { min: 0, max: 100, values: [transparency * 100], step: 1, onChange: handleTransparencyChange }))))));
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import * as React from "react";
+import { ContextMenu, ContextMenuItem } from "@itwin/core-react";
+import { Button, Slider } from "@itwin/itwinui-react";
+import "./MapLayerManager.scss";
+import { MapLayersUI } from "../../mapLayers";
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function MapLayerSettingsMenu({ mapLayerSettings, onMenuItemSelection, activeViewport, disabled }) {
+    const [isSettingsOpen, setIsSettingsOpen] = React.useState(false);
+    const settingsRef = React.useRef(null);
+    const [labelDetach] = React.useState(MapLayersUI.localization.getLocalizedString("mapLayers:LayerMenu.Detach"));
+    const [labelZoomToLayer] = React.useState(MapLayersUI.localization.getLocalizedString("mapLayers:LayerMenu.ZoomToLayer"));
+    const [hasRangeData, setHasRangeData] = React.useState();
+    const [transparency, setTransparency] = React.useState(mapLayerSettings.transparency);
+    React.useEffect(() => {
+        async function fetchRangeData() {
+            let hasRange = false;
+            const indexInDisplayStyle = activeViewport?.displayStyle.findMapLayerIndexByNameAndSource(mapLayerSettings.name, mapLayerSettings.source, mapLayerSettings.isOverlay);
+            if (undefined !== indexInDisplayStyle) {
+                hasRange = (undefined !== await activeViewport.displayStyle.getMapLayerRange(indexInDisplayStyle, mapLayerSettings.isOverlay));
+            }
+            setHasRangeData(hasRange);
+        }
+        fetchRangeData(); // eslint-disable-line @typescript-eslint/no-floating-promises
+    }, [activeViewport, mapLayerSettings]);
+    const onSettingsClick = React.useCallback(() => {
+        setIsSettingsOpen((prev) => !prev);
+    }, [setIsSettingsOpen]);
+    const handleCloseSetting = React.useCallback(() => {
+        setIsSettingsOpen(false);
+    }, [setIsSettingsOpen]);
+    const handleRemoveLayer = React.useCallback(() => {
+        setIsSettingsOpen(false);
+        onMenuItemSelection("delete", mapLayerSettings);
+    }, [setIsSettingsOpen, onMenuItemSelection, mapLayerSettings]);
+    const handleZoomToLayer = React.useCallback(() => {
+        setIsSettingsOpen(false);
+        onMenuItemSelection("zoom-to-layer", mapLayerSettings);
+    }, [setIsSettingsOpen, onMenuItemSelection, mapLayerSettings]);
+    const applyTransparencyChange = React.useCallback((value) => {
+        if (activeViewport) {
+            const newTransparency = value;
+            const displayStyle = activeViewport.displayStyle;
+            const indexInDisplayStyle = displayStyle.findMapLayerIndexByNameAndSource(mapLayerSettings.name, mapLayerSettings.source, mapLayerSettings.isOverlay);
+            if (-1 !== indexInDisplayStyle) {
+                const styleTransparency = displayStyle.mapLayerAtIndex(indexInDisplayStyle, mapLayerSettings.isOverlay)?.transparency;
+                const styleTransparencyValue = styleTransparency ? styleTransparency : 0;
+                if (Math.abs(styleTransparencyValue - newTransparency) > 0.01) {
+                    // update the display style
+                    displayStyle.changeMapLayerProps({ transparency: newTransparency }, indexInDisplayStyle, mapLayerSettings.isOverlay);
+                    activeViewport.invalidateRenderPlan();
+                    // force UI to update
+                    // loadMapLayerSettingsFromStyle(activeViewport.displayStyle);
+                }
+            }
+        }
+    }, [activeViewport, mapLayerSettings]);
+    const handleTransparencyChange = React.useCallback((values) => {
+        if (values.length) {
+            const newTransparency = values[0] / 100.0;
+            if (newTransparency !== transparency) {
+                setTransparency(newTransparency);
+                applyTransparencyChange(newTransparency);
+            }
+        }
+    }, [transparency, applyTransparencyChange]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { disabled: disabled, size: "small", styleType: "borderless", "data-testid": "map-layer-settings", className: "map-layer-settings icon icon-more-vertical-2", ref: settingsRef, onClick: onSettingsClick }),
+        React.createElement(ContextMenu, { opened: isSettingsOpen && (undefined !== hasRangeData), onOutsideClick: handleCloseSetting },
+            React.createElement("div", { className: "map-manager-item-menu" },
+                React.createElement(ContextMenuItem, { hideIconContainer: true, key: 0, className: hasRangeData ? "" : "core-context-menu-disabled", onSelect: handleZoomToLayer }, labelZoomToLayer),
+                React.createElement(ContextMenuItem, { hideIconContainer: true, key: 1, onSelect: handleRemoveLayer }, labelDetach),
+                React.createElement(ContextMenuItem, { hideIconContainer: true, key: 2 },
+                    React.createElement(Slider, { min: 0, max: 100, values: [transparency * 100], step: 1, onChange: handleTransparencyChange }))))));
+}
 //# sourceMappingURL=MapLayerSettingsMenu.js.map

package/lib/esm/ui/widget/MapLayerSettingsMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"MapLayerSettingsMenu.js","sourceRoot":"","sources":["../../../../src/ui/widget/MapLayerSettingsMenu.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*--------------------------------------------------------------------------------------------*/\nimport * as React from \"react\";\nimport { ScreenViewport } from \"@itwin/core-frontend\";\nimport { ContextMenu, ContextMenuItem } from \"@itwin/core-react\";\nimport { Button, Slider } from \"@itwin/itwinui-react\";\nimport \"./MapLayerManager.scss\";\nimport { StyleMapLayerSettings } from \"../Interfaces\";\nimport { MapLayersUI } from \"../../mapLayers\";\n\ninterface MapLayerSettingsMenuProps {\n  mapLayerSettings: StyleMapLayerSettings;\n  onMenuItemSelection: (action: string, mapLayerSettings: StyleMapLayerSettings) => void;\n  activeViewport: ScreenViewport;\n  disabled?: boolean;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function MapLayerSettingsMenu({ mapLayerSettings, onMenuItemSelection, activeViewport, disabled }: MapLayerSettingsMenuProps) {\n  const [isSettingsOpen, setIsSettingsOpen] = React.useState(false);\n  const settingsRef = React.useRef<HTMLButtonElement>(null);\n  const [labelDetach] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:LayerMenu.Detach\"));\n  const [labelZoomToLayer] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:LayerMenu.ZoomToLayer\"));\n  const [hasRangeData, setHasRangeData] = React.useState<boolean | undefined>();\n  const [transparency, setTransparency] = React.useState(mapLayerSettings.transparency);\n\n  React.useEffect(() => {\n    async function fetchRangeData() {\n      let hasRange = false;\n      const indexInDisplayStyle = activeViewport?.displayStyle.findMapLayerIndexByNameAndSource(mapLayerSettings.name, mapLayerSettings.source, mapLayerSettings.isOverlay);\n      if (undefined !== indexInDisplayStyle) {\n        hasRange = (undefined !== await activeViewport.displayStyle.getMapLayerRange(indexInDisplayStyle, mapLayerSettings.isOverlay));\n      }\n      setHasRangeData(hasRange);\n    }\n    fetchRangeData(); // eslint-disable-line @typescript-eslint/no-floating-promises\n  }, [activeViewport, mapLayerSettings]);\n\n  const onSettingsClick = React.useCallback(() => {\n    setIsSettingsOpen((prev) => !prev);\n  }, [setIsSettingsOpen]);\n\n  const handleCloseSetting = React.useCallback(() => {\n    setIsSettingsOpen(false);\n  }, [setIsSettingsOpen]);\n\n  const handleRemoveLayer = React.useCallback(() => {\n    setIsSettingsOpen(false);\n    onMenuItemSelection(\"delete\", mapLayerSettings);\n  }, [setIsSettingsOpen, onMenuItemSelection, mapLayerSettings]);\n\n  const handleZoomToLayer = React.useCallback(() => {\n    setIsSettingsOpen(false);\n    onMenuItemSelection(\"zoom-to-layer\", mapLayerSettings);\n  }, [setIsSettingsOpen, onMenuItemSelection, mapLayerSettings]);\n\n  const applyTransparencyChange = React.useCallback((value: number) => {\n    if (activeViewport) {\n      const newTransparency = value;\n      const displayStyle = activeViewport.displayStyle;\n      const indexInDisplayStyle = displayStyle.findMapLayerIndexByNameAndSource(mapLayerSettings.name, mapLayerSettings.source, mapLayerSettings.isOverlay);\n      if (-1 !== indexInDisplayStyle) {\n        const styleTransparency = displayStyle.mapLayerAtIndex(indexInDisplayStyle, mapLayerSettings.isOverlay)?.transparency;\n        const styleTransparencyValue = styleTransparency ? styleTransparency : 0;\n        if (Math.abs(styleTransparencyValue - newTransparency) > 0.01) {\n          // update the display style\n          displayStyle.changeMapLayerProps({ transparency: newTransparency }, indexInDisplayStyle, mapLayerSettings.isOverlay);\n          activeViewport.invalidateRenderPlan();\n\n          // force UI to update\n          // loadMapLayerSettingsFromStyle(activeViewport.displayStyle);\n        }\n      }\n    }\n  }, [activeViewport, mapLayerSettings]);\n\n  const handleTransparencyChange = React.useCallback((values: readonly number[]) => {\n    if (values.length) {\n      const newTransparency = values[0] / 100.0;\n      if (newTransparency !== transparency) {\n        setTransparency(newTransparency);\n        applyTransparencyChange(newTransparency);\n      }\n    }\n  }, [transparency, applyTransparencyChange]);\n\n  return (\n    <>\n      <Button disabled={disabled} size=\"small\" styleType=\"borderless\" data-testid=\"map-layer-settings\" className=\"map-layer-settings icon icon-more-vertical-2\" ref={settingsRef} onClick={onSettingsClick} ></Button>\n      <ContextMenu opened={isSettingsOpen && (undefined !== hasRangeData)} onOutsideClick={handleCloseSetting} >\n        <div className=\"map-manager-item-menu\" >\n          <ContextMenuItem hideIconContainer={true} key={0} className={hasRangeData ? \"\" : \"core-context-menu-disabled\"} onSelect={handleZoomToLayer}>{labelZoomToLayer}</ContextMenuItem>\n          <ContextMenuItem hideIconContainer={true} key={1} onSelect={handleRemoveLayer}>{labelDetach}</ContextMenuItem>\n          <ContextMenuItem hideIconContainer={true} key={2} >\n            <Slider min={0} max={100} values={[transparency * 100]} step={1} onChange={handleTransparencyChange} />\n          </ContextMenuItem>\n        </div>\n      </ContextMenu>\n    </>\n  );\n}\n"]}
+{"version":3,"file":"MapLayerSettingsMenu.js","sourceRoot":"","sources":["../../../../src/ui/widget/MapLayerSettingsMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\nimport * as React from \"react\";\r\nimport { ScreenViewport } from \"@itwin/core-frontend\";\r\nimport { ContextMenu, ContextMenuItem } from \"@itwin/core-react\";\r\nimport { Button, Slider } from \"@itwin/itwinui-react\";\r\nimport \"./MapLayerManager.scss\";\r\nimport { StyleMapLayerSettings } from \"../Interfaces\";\r\nimport { MapLayersUI } from \"../../mapLayers\";\r\n\r\ninterface MapLayerSettingsMenuProps {\r\n  mapLayerSettings: StyleMapLayerSettings;\r\n  onMenuItemSelection: (action: string, mapLayerSettings: StyleMapLayerSettings) => void;\r\n  activeViewport: ScreenViewport;\r\n  disabled?: boolean;\r\n}\r\n\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport function MapLayerSettingsMenu({ mapLayerSettings, onMenuItemSelection, activeViewport, disabled }: MapLayerSettingsMenuProps) {\r\n  const [isSettingsOpen, setIsSettingsOpen] = React.useState(false);\r\n  const settingsRef = React.useRef<HTMLButtonElement>(null);\r\n  const [labelDetach] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:LayerMenu.Detach\"));\r\n  const [labelZoomToLayer] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:LayerMenu.ZoomToLayer\"));\r\n  const [hasRangeData, setHasRangeData] = React.useState<boolean | undefined>();\r\n  const [transparency, setTransparency] = React.useState(mapLayerSettings.transparency);\r\n\r\n  React.useEffect(() => {\r\n    async function fetchRangeData() {\r\n      let hasRange = false;\r\n      const indexInDisplayStyle = activeViewport?.displayStyle.findMapLayerIndexByNameAndSource(mapLayerSettings.name, mapLayerSettings.source, mapLayerSettings.isOverlay);\r\n      if (undefined !== indexInDisplayStyle) {\r\n        hasRange = (undefined !== await activeViewport.displayStyle.getMapLayerRange(indexInDisplayStyle, mapLayerSettings.isOverlay));\r\n      }\r\n      setHasRangeData(hasRange);\r\n    }\r\n    fetchRangeData(); // eslint-disable-line @typescript-eslint/no-floating-promises\r\n  }, [activeViewport, mapLayerSettings]);\r\n\r\n  const onSettingsClick = React.useCallback(() => {\r\n    setIsSettingsOpen((prev) => !prev);\r\n  }, [setIsSettingsOpen]);\r\n\r\n  const handleCloseSetting = React.useCallback(() => {\r\n    setIsSettingsOpen(false);\r\n  }, [setIsSettingsOpen]);\r\n\r\n  const handleRemoveLayer = React.useCallback(() => {\r\n    setIsSettingsOpen(false);\r\n    onMenuItemSelection(\"delete\", mapLayerSettings);\r\n  }, [setIsSettingsOpen, onMenuItemSelection, mapLayerSettings]);\r\n\r\n  const handleZoomToLayer = React.useCallback(() => {\r\n    setIsSettingsOpen(false);\r\n    onMenuItemSelection(\"zoom-to-layer\", mapLayerSettings);\r\n  }, [setIsSettingsOpen, onMenuItemSelection, mapLayerSettings]);\r\n\r\n  const applyTransparencyChange = React.useCallback((value: number) => {\r\n    if (activeViewport) {\r\n      const newTransparency = value;\r\n      const displayStyle = activeViewport.displayStyle;\r\n      const indexInDisplayStyle = displayStyle.findMapLayerIndexByNameAndSource(mapLayerSettings.name, mapLayerSettings.source, mapLayerSettings.isOverlay);\r\n      if (-1 !== indexInDisplayStyle) {\r\n        const styleTransparency = displayStyle.mapLayerAtIndex(indexInDisplayStyle, mapLayerSettings.isOverlay)?.transparency;\r\n        const styleTransparencyValue = styleTransparency ? styleTransparency : 0;\r\n        if (Math.abs(styleTransparencyValue - newTransparency) > 0.01) {\r\n          // update the display style\r\n          displayStyle.changeMapLayerProps({ transparency: newTransparency }, indexInDisplayStyle, mapLayerSettings.isOverlay);\r\n          activeViewport.invalidateRenderPlan();\r\n\r\n          // force UI to update\r\n          // loadMapLayerSettingsFromStyle(activeViewport.displayStyle);\r\n        }\r\n      }\r\n    }\r\n  }, [activeViewport, mapLayerSettings]);\r\n\r\n  const handleTransparencyChange = React.useCallback((values: readonly number[]) => {\r\n    if (values.length) {\r\n      const newTransparency = values[0] / 100.0;\r\n      if (newTransparency !== transparency) {\r\n        setTransparency(newTransparency);\r\n        applyTransparencyChange(newTransparency);\r\n      }\r\n    }\r\n  }, [transparency, applyTransparencyChange]);\r\n\r\n  return (\r\n    <>\r\n      <Button disabled={disabled} size=\"small\" styleType=\"borderless\" data-testid=\"map-layer-settings\" className=\"map-layer-settings icon icon-more-vertical-2\" ref={settingsRef} onClick={onSettingsClick} ></Button>\r\n      <ContextMenu opened={isSettingsOpen && (undefined !== hasRangeData)} onOutsideClick={handleCloseSetting} >\r\n        <div className=\"map-manager-item-menu\" >\r\n          <ContextMenuItem hideIconContainer={true} key={0} className={hasRangeData ? \"\" : \"core-context-menu-disabled\"} onSelect={handleZoomToLayer}>{labelZoomToLayer}</ContextMenuItem>\r\n          <ContextMenuItem hideIconContainer={true} key={1} onSelect={handleRemoveLayer}>{labelDetach}</ContextMenuItem>\r\n          <ContextMenuItem hideIconContainer={true} key={2} >\r\n            <Slider min={0} max={100} values={[transparency * 100]} step={1} onChange={handleTransparencyChange} />\r\n          </ContextMenuItem>\r\n        </div>\r\n      </ContextMenu>\r\n    </>\r\n  );\r\n}\r\n"]}

package/lib/esm/ui/widget/MapLayerSettingsPopupButton.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import "./MapLayerSettingsPopupButton.scss";
-export interface MapLayerSettingsPopupButtonProps {
-    disabled?: boolean;
-}
-/** @alpha */
-export declare function MapLayerSettingsPopupButton(props: MapLayerSettingsPopupButtonProps): JSX.Element;
+/// <reference types="react" />
+import "./MapLayerSettingsPopupButton.scss";
+export interface MapLayerSettingsPopupButtonProps {
+    disabled?: boolean;
+}
+/** @alpha */
+export declare function MapLayerSettingsPopupButton(props: MapLayerSettingsPopupButtonProps): JSX.Element;
 //# sourceMappingURL=MapLayerSettingsPopupButton.d.ts.map

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

@@ -1,62 +1,62 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-import * as React from "react";
-import { RelativePosition } from "@itwin/appui-abstract";
-import { Popup, WebFontIcon } from "@itwin/core-react";
-import { MapManagerSettings } from "./MapManagerSettings";
-import "./MapLayerSettingsPopupButton.scss";
-import { MapLayersUI } from "../../mapLayers";
-import { Button } from "@itwin/itwinui-react";
-/** @alpha */
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export function MapLayerSettingsPopupButton(props) {
-    const panelRef = React.useRef(null);
-    const [isSettingsOpen, setIsSettingsOpen] = React.useState(false);
-    const [buttonTooltip] = React.useState(MapLayersUI.localization.getLocalizedString("mapLayers:Widget.SettingsButtonTooltip"));
-    const buttonRef = React.useRef(null);
-    const togglePopupDisplay = React.useCallback((event) => {
-        event.preventDefault();
-        setIsSettingsOpen((prev) => !prev);
-    }, [setIsSettingsOpen]);
-    const handleCloseSetting = React.useCallback(() => {
-        setIsSettingsOpen(false);
-    }, [setIsSettingsOpen]);
-    const isInsideCoreDialog = React.useCallback((element) => {
-        if (element.nodeName === "DIV") {
-            if (element.classList && element.classList.contains("core-dialog"))
-                return true;
-            if (element.parentElement && isInsideCoreDialog(element.parentElement))
-                return true;
-        }
-        else {
-            // istanbul ignore else
-            if (element.parentElement && isInsideCoreDialog(element.parentElement))
-                return true;
-        }
-        return false;
-    }, []);
-    const handleOutsideClick = React.useCallback((event) => {
-        if (isInsideCoreDialog(event.target)) {
-            return;
-        }
-        // If clicking on button that open panel -  don't trigger outside click processing
-        if (buttonRef?.current && buttonRef?.current.contains(event.target)) {
-            return;
-        }
-        // If clicking the panel, this is not an outside clicked
-        if (panelRef.current && panelRef?.current.contains(event.target)) {
-            return;
-        }
-        // If we reach this point, we got an outside clicked, no close the popup
-        setIsSettingsOpen(false);
-    }, [isInsideCoreDialog]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { disabled: props.disabled, styleType: "borderless", title: buttonTooltip, className: "maplayers-settings-popup-button", onClick: togglePopupDisplay, ref: buttonRef },
-            React.createElement(WebFontIcon, { iconName: "icon-settings" })),
-        React.createElement(Popup, { isOpen: isSettingsOpen, position: RelativePosition.BottomRight, onClose: handleCloseSetting, target: buttonRef.current, onOutsideClick: handleOutsideClick, repositionOnResize: true },
-            React.createElement("div", { ref: panelRef, className: "maplayers-settings-popup-panel" },
-                React.createElement(MapManagerSettings, null)))));
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import * as React from "react";
+import { RelativePosition } from "@itwin/appui-abstract";
+import { Popup, WebFontIcon } from "@itwin/core-react";
+import { MapManagerSettings } from "./MapManagerSettings";
+import "./MapLayerSettingsPopupButton.scss";
+import { MapLayersUI } from "../../mapLayers";
+import { Button } from "@itwin/itwinui-react";
+/** @alpha */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function MapLayerSettingsPopupButton(props) {
+    const panelRef = React.useRef(null);
+    const [isSettingsOpen, setIsSettingsOpen] = React.useState(false);
+    const [buttonTooltip] = React.useState(MapLayersUI.localization.getLocalizedString("mapLayers:Widget.SettingsButtonTooltip"));
+    const buttonRef = React.useRef(null);
+    const togglePopupDisplay = React.useCallback((event) => {
+        event.preventDefault();
+        setIsSettingsOpen((prev) => !prev);
+    }, [setIsSettingsOpen]);
+    const handleCloseSetting = React.useCallback(() => {
+        setIsSettingsOpen(false);
+    }, [setIsSettingsOpen]);
+    const isInsideCoreDialog = React.useCallback((element) => {
+        if (element.nodeName === "DIV") {
+            if (element.classList && element.classList.contains("core-dialog"))
+                return true;
+            if (element.parentElement && isInsideCoreDialog(element.parentElement))
+                return true;
+        }
+        else {
+            // istanbul ignore else
+            if (element.parentElement && isInsideCoreDialog(element.parentElement))
+                return true;
+        }
+        return false;
+    }, []);
+    const handleOutsideClick = React.useCallback((event) => {
+        if (isInsideCoreDialog(event.target)) {
+            return;
+        }
+        // If clicking on button that open panel -  don't trigger outside click processing
+        if (buttonRef?.current && buttonRef?.current.contains(event.target)) {
+            return;
+        }
+        // If clicking the panel, this is not an outside clicked
+        if (panelRef.current && panelRef?.current.contains(event.target)) {
+            return;
+        }
+        // If we reach this point, we got an outside clicked, no close the popup
+        setIsSettingsOpen(false);
+    }, [isInsideCoreDialog]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { disabled: props.disabled, styleType: "borderless", title: buttonTooltip, className: "maplayers-settings-popup-button", onClick: togglePopupDisplay, ref: buttonRef },
+            React.createElement(WebFontIcon, { iconName: "icon-settings" })),
+        React.createElement(Popup, { isOpen: isSettingsOpen, position: RelativePosition.BottomRight, onClose: handleCloseSetting, target: buttonRef.current, onOutsideClick: handleOutsideClick, repositionOnResize: true },
+            React.createElement("div", { ref: panelRef, className: "maplayers-settings-popup-panel" },
+                React.createElement(MapManagerSettings, null)))));
+}
 //# sourceMappingURL=MapLayerSettingsPopupButton.js.map

package/lib/esm/ui/widget/MapLayerSettingsPopupButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"MapLayerSettingsPopupButton.js","sourceRoot":"","sources":["../../../../src/ui/widget/MapLayerSettingsPopupButton.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAE/F,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,OAAO,oCAAoC,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAK9C,aAAa;AACb,gEAAgE;AAChE,MAAM,UAAU,2BAA2B,CAAC,KAAuC;IACjF,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACpD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClE,MAAM,CAAC,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,YAAY,CAAC,kBAAkB,CAAC,wCAAwC,CAAC,CAAC,CAAC;IAE9H,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAoB,IAAI,CAAC,CAAC;IACxD,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAsD,EAAE,EAAE;QACtG,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,iBAAiB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAExB,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAChD,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAExB,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,OAAoB,EAAE,EAAE;QACpE,IAAI,OAAO,CAAC,QAAQ,KAAK,KAAK,EAAE;YAC9B,IAAI,OAAO,CAAC,SAAS,IAAI,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC;gBAChE,OAAO,IAAI,CAAC;YACd,IAAI,OAAO,CAAC,aAAa,IAAI,kBAAkB,CAAC,OAAO,CAAC,aAAa,CAAC;gBACpE,OAAO,IAAI,CAAC;SACf;aAAM;YACL,uBAAuB;YACvB,IAAI,OAAO,CAAC,aAAa,IAAI,kBAAkB,CAAC,OAAO,CAAC,aAAa,CAAC;gBACpE,OAAO,IAAI,CAAC;SACf;QACD,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAiB,EAAE,EAAE;QACjE,IAAI,kBAAkB,CAAC,KAAK,CAAC,MAAqB,CAAC,EAAE;YACnD,OAAO;SACR;QAED,kFAAkF;QAClF,IAAI,SAAS,EAAE,OAAO,IAAI,SAAS,EAAE,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;YAC3E,OAAO;SACR;QAED,wDAAwD;QACxD,IAAI,QAAQ,CAAC,OAAO,IAAI,QAAQ,EAAE,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;YACxE,OAAO;SACR;QAED,wEAAwE;QACxE,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAE3B,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAEzB,OAAO,CACL;QACE,oBAAC,MAAM,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,SAAS,EAAC,YAAY,EAAC,KAAK,EAAE,aAAa,EAAE,SAAS,EAAC,iCAAiC,EAAC,OAAO,EAAE,kBAAkB,EAAE,GAAG,EAAE,SAAS;YACpK,oBAAC,WAAW,IAAC,QAAQ,EAAC,eAAe,GAAG,CACjC;QACT,oBAAC,KAAK,IACJ,MAAM,EAAE,cAAc,EACtB,QAAQ,EAAE,gBAAgB,CAAC,WAAW,EACtC,OAAO,EAAE,kBAAkB,EAC3B,MAAM,EAAE,SAAS,CAAC,OAAO,EACzB,cAAc,EAAE,kBAAkB,EAClC,kBAAkB,EAAE,IAAI;YAExB,6BAAK,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAC,gCAAgC;gBAC5D,oBAAC,kBAAkB,OAAG,CAClB,CACC,CACP,CACL,CAAC;AACJ,CAAC","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\nimport * as React from \"react\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\nimport { Popup, WebFontIcon } from \"@itwin/core-react\";\nimport { MapManagerSettings } from \"./MapManagerSettings\";\n\nimport \"./MapLayerSettingsPopupButton.scss\";\nimport { MapLayersUI } from \"../../mapLayers\";\nimport { Button } from \"@itwin/itwinui-react\";\nexport interface MapLayerSettingsPopupButtonProps {\n  disabled?: boolean;\n}\n\n/** @alpha */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function MapLayerSettingsPopupButton(props: MapLayerSettingsPopupButtonProps) {\n  const panelRef = React.useRef<HTMLDivElement>(null);\n  const [isSettingsOpen, setIsSettingsOpen] = React.useState(false);\n  const [buttonTooltip] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Widget.SettingsButtonTooltip\"));\n\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n  const togglePopupDisplay = React.useCallback((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n    event.preventDefault();\n    setIsSettingsOpen((prev) => !prev);\n  }, [setIsSettingsOpen]);\n\n  const handleCloseSetting = React.useCallback(() => {\n    setIsSettingsOpen(false);\n  }, [setIsSettingsOpen]);\n\n  const isInsideCoreDialog = React.useCallback((element: HTMLElement) => {\n    if (element.nodeName === \"DIV\") {\n      if (element.classList && element.classList.contains(\"core-dialog\"))\n        return true;\n      if (element.parentElement && isInsideCoreDialog(element.parentElement))\n        return true;\n    } else {\n      // istanbul ignore else\n      if (element.parentElement && isInsideCoreDialog(element.parentElement))\n        return true;\n    }\n    return false;\n  }, []);\n\n  const handleOutsideClick = React.useCallback((event: MouseEvent) => {\n    if (isInsideCoreDialog(event.target as HTMLElement)) {\n      return;\n    }\n\n    // If clicking on button that open panel -  don't trigger outside click processing\n    if (buttonRef?.current && buttonRef?.current.contains(event.target as Node)) {\n      return;\n    }\n\n    // If clicking the panel, this is not an outside clicked\n    if (panelRef.current && panelRef?.current.contains(event.target as Node)) {\n      return;\n    }\n\n    // If we reach this point, we got an outside clicked, no close the popup\n    setIsSettingsOpen(false);\n\n  }, [isInsideCoreDialog]);\n\n  return (\n    <>\n      <Button disabled={props.disabled} styleType=\"borderless\" title={buttonTooltip} className=\"maplayers-settings-popup-button\" onClick={togglePopupDisplay} ref={buttonRef}>\n        <WebFontIcon iconName=\"icon-settings\" />\n      </Button>\n      <Popup\n        isOpen={isSettingsOpen}\n        position={RelativePosition.BottomRight}\n        onClose={handleCloseSetting}\n        target={buttonRef.current}\n        onOutsideClick={handleOutsideClick}\n        repositionOnResize={true}\n      >\n        <div ref={panelRef} className=\"maplayers-settings-popup-panel\">\n          <MapManagerSettings />\n        </div>\n      </Popup >\n    </ >\n  );\n}\n"]}
+{"version":3,"file":"MapLayerSettingsPopupButton.js","sourceRoot":"","sources":["../../../../src/ui/widget/MapLayerSettingsPopupButton.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n\r\nimport * as React from \"react\";\r\nimport { RelativePosition } from \"@itwin/appui-abstract\";\r\nimport { Popup, WebFontIcon } from \"@itwin/core-react\";\r\nimport { MapManagerSettings } from \"./MapManagerSettings\";\r\n\r\nimport \"./MapLayerSettingsPopupButton.scss\";\r\nimport { MapLayersUI } from \"../../mapLayers\";\r\nimport { Button } from \"@itwin/itwinui-react\";\r\nexport interface MapLayerSettingsPopupButtonProps {\r\n  disabled?: boolean;\r\n}\r\n\r\n/** @alpha */\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport function MapLayerSettingsPopupButton(props: MapLayerSettingsPopupButtonProps) {\r\n  const panelRef = React.useRef<HTMLDivElement>(null);\r\n  const [isSettingsOpen, setIsSettingsOpen] = React.useState(false);\r\n  const [buttonTooltip] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Widget.SettingsButtonTooltip\"));\r\n\r\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\r\n  const togglePopupDisplay = React.useCallback((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\r\n    event.preventDefault();\r\n    setIsSettingsOpen((prev) => !prev);\r\n  }, [setIsSettingsOpen]);\r\n\r\n  const handleCloseSetting = React.useCallback(() => {\r\n    setIsSettingsOpen(false);\r\n  }, [setIsSettingsOpen]);\r\n\r\n  const isInsideCoreDialog = React.useCallback((element: HTMLElement) => {\r\n    if (element.nodeName === \"DIV\") {\r\n      if (element.classList && element.classList.contains(\"core-dialog\"))\r\n        return true;\r\n      if (element.parentElement && isInsideCoreDialog(element.parentElement))\r\n        return true;\r\n    } else {\r\n      // istanbul ignore else\r\n      if (element.parentElement && isInsideCoreDialog(element.parentElement))\r\n        return true;\r\n    }\r\n    return false;\r\n  }, []);\r\n\r\n  const handleOutsideClick = React.useCallback((event: MouseEvent) => {\r\n    if (isInsideCoreDialog(event.target as HTMLElement)) {\r\n      return;\r\n    }\r\n\r\n    // If clicking on button that open panel -  don't trigger outside click processing\r\n    if (buttonRef?.current && buttonRef?.current.contains(event.target as Node)) {\r\n      return;\r\n    }\r\n\r\n    // If clicking the panel, this is not an outside clicked\r\n    if (panelRef.current && panelRef?.current.contains(event.target as Node)) {\r\n      return;\r\n    }\r\n\r\n    // If we reach this point, we got an outside clicked, no close the popup\r\n    setIsSettingsOpen(false);\r\n\r\n  }, [isInsideCoreDialog]);\r\n\r\n  return (\r\n    <>\r\n      <Button disabled={props.disabled} styleType=\"borderless\" title={buttonTooltip} className=\"maplayers-settings-popup-button\" onClick={togglePopupDisplay} ref={buttonRef}>\r\n        <WebFontIcon iconName=\"icon-settings\" />\r\n      </Button>\r\n      <Popup\r\n        isOpen={isSettingsOpen}\r\n        position={RelativePosition.BottomRight}\r\n        onClose={handleCloseSetting}\r\n        target={buttonRef.current}\r\n        onOutsideClick={handleOutsideClick}\r\n        repositionOnResize={true}\r\n      >\r\n        <div ref={panelRef} className=\"maplayers-settings-popup-panel\">\r\n          <MapManagerSettings />\r\n        </div>\r\n      </Popup >\r\n    </ >\r\n  );\r\n}\r\n"]}

package/lib/esm/ui/widget/MapLayerSettingsPopupButton.scss

@@ -1,21 +1,21 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/index";
-
-$hovered-icon-color: $buic-foreground-primary;
-
-.maplayers-settings-popup-panel {
-  z-index: 14000;
-  font-size: 12px;
-  margin: 0.5em;
-  width: 340px;
-}
-
-.map-manager-header-buttons-group {
-.maplayers-settings-popup-button {
-  position: relative;
-  top: 1px;
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/index";
+
+$hovered-icon-color: $buic-foreground-primary;
+
+.maplayers-settings-popup-panel {
+  z-index: 14000;
+  font-size: 12px;
+  margin: 0.5em;
+  width: 340px;
+}
+
+.map-manager-header-buttons-group {
+.maplayers-settings-popup-button {
+  position: relative;
+  top: 1px;
+}
 }

package/lib/esm/ui/widget/MapLayersWidget.d.ts

@@ -1,12 +1,12 @@
-/// <reference types="react" />
-import { MapLayerOptions } from "../Interfaces";
-/**
- * Widget to Manage Map Layers
- * @beta
- */
-interface MapLayersWidgetProps {
-    mapLayerOptions?: MapLayerOptions;
-}
-export declare function MapLayersWidget(props: MapLayersWidgetProps): JSX.Element;
-export {};
+/// <reference types="react" />
+import { MapLayerOptions } from "../Interfaces";
+/**
+ * Widget to Manage Map Layers
+ * @beta
+ */
+interface MapLayersWidgetProps {
+    mapLayerOptions?: MapLayerOptions;
+}
+export declare function MapLayersWidget(props: MapLayersWidgetProps): JSX.Element;
+export {};
 //# sourceMappingURL=MapLayersWidget.d.ts.map

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

@@ -1,28 +1,28 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-import * as React from "react";
-import { useActiveViewport } from "@itwin/appui-react";
-import { FillCentered } from "@itwin/core-react";
-import { MapLayerManager } from "./MapLayerManager";
-import { MapLayersUI } from "../../mapLayers";
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export function MapLayersWidget(props) {
-    const [notGeoLocatedMsg] = React.useState(MapLayersUI.localization.getLocalizedString("mapLayers:Messages.NotSupported"));
-    const activeViewport = useActiveViewport();
-    const ref = React.useRef(null);
-    const [isGeoLocated, setIsGeoLocated] = React.useState(!!activeViewport?.iModel.isGeoLocated);
-    React.useEffect(() => {
-        const updateIsGeoLocated = () => setIsGeoLocated(!!activeViewport?.iModel.isGeoLocated);
-        return activeViewport?.iModel.onEcefLocationChanged.addListener(updateIsGeoLocated);
-    }, [activeViewport?.iModel]);
-    if (activeViewport && isGeoLocated && activeViewport.view.isSpatialView())
-        return (React.createElement("div", { ref: ref, className: "map-manager-layer-host" },
-            React.createElement(MapLayerManager, { activeViewport: activeViewport, mapLayerOptions: props.mapLayerOptions, getContainerForClone: () => {
-                    return ref.current ? ref.current : document.body;
-                } })));
-    return (React.createElement(FillCentered, null,
-        React.createElement("div", { className: "map-manager-not-geo-located-text" }, notGeoLocatedMsg)));
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import * as React from "react";
+import { useActiveViewport } from "@itwin/appui-react";
+import { FillCentered } from "@itwin/core-react";
+import { MapLayerManager } from "./MapLayerManager";
+import { MapLayersUI } from "../../mapLayers";
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function MapLayersWidget(props) {
+    const [notGeoLocatedMsg] = React.useState(MapLayersUI.localization.getLocalizedString("mapLayers:Messages.NotSupported"));
+    const activeViewport = useActiveViewport();
+    const ref = React.useRef(null);
+    const [isGeoLocated, setIsGeoLocated] = React.useState(!!activeViewport?.iModel.isGeoLocated);
+    React.useEffect(() => {
+        const updateIsGeoLocated = () => setIsGeoLocated(!!activeViewport?.iModel.isGeoLocated);
+        return activeViewport?.iModel.onEcefLocationChanged.addListener(updateIsGeoLocated);
+    }, [activeViewport?.iModel]);
+    if (activeViewport && isGeoLocated && activeViewport.view.isSpatialView())
+        return (React.createElement("div", { ref: ref, className: "map-manager-layer-host" },
+            React.createElement(MapLayerManager, { activeViewport: activeViewport, mapLayerOptions: props.mapLayerOptions, getContainerForClone: () => {
+                    return ref.current ? ref.current : document.body;
+                } })));
+    return (React.createElement(FillCentered, null,
+        React.createElement("div", { className: "map-manager-not-geo-located-text" }, notGeoLocatedMsg)));
+}
 //# sourceMappingURL=MapLayersWidget.js.map

package/lib/esm/ui/widget/MapLayersWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"MapLayersWidget.js","sourceRoot":"","sources":["../../../../src/ui/widget/MapLayersWidget.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAE/F,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAS9C,gEAAgE;AAChE,MAAM,UAAU,eAAe,CAAC,KAA2B;IACzD,MAAM,CAAC,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,YAAY,CAAC,kBAAkB,CAAC,iCAAiC,CAAC,CAAC,CAAC;IAC1H,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAC;IAC3C,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC;IAE9F,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,kBAAkB,GAAG,GAAG,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC;QACxF,OAAO,cAAc,EAAE,MAAM,CAAC,qBAAqB,CAAC,WAAW,CAAC,kBAAkB,CAAC,CAAC;IACtF,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC,CAAC;IAE7B,IAAI,cAAc,IAAI,YAAY,IAAI,cAAc,CAAC,IAAI,CAAC,aAAa,EAAE;QACvE,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,wBAAwB;YAC/C,oBAAC,eAAe,IAAC,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,KAAK,CAAC,eAAe,EAAE,oBAAoB,EAAE,GAAG,EAAE;oBAClH,OAAO,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;gBACnD,CAAC,GAAI,CACD,CACP,CAAC;IAEJ,OAAO,CACL,oBAAC,YAAY;QAAC,6BAAK,SAAS,EAAC,kCAAkC,IAAE,gBAAgB,CAAO,CAAe,CACxG,CAAC;AACJ,CAAC","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\nimport * as React from \"react\";\nimport { useActiveViewport } from \"@itwin/appui-react\";\nimport { FillCentered } from \"@itwin/core-react\";\nimport { MapLayerOptions } from \"../Interfaces\";\nimport { MapLayerManager } from \"./MapLayerManager\";\nimport { MapLayersUI } from \"../../mapLayers\";\n\n/**\n * Widget to Manage Map Layers\n * @beta\n */\ninterface MapLayersWidgetProps {\n  mapLayerOptions?: MapLayerOptions;\n}\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function MapLayersWidget(props: MapLayersWidgetProps) {\n  const [notGeoLocatedMsg] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Messages.NotSupported\"));\n  const activeViewport = useActiveViewport();\n  const ref = React.useRef<HTMLDivElement>(null);\n  const [isGeoLocated, setIsGeoLocated] = React.useState(!!activeViewport?.iModel.isGeoLocated);\n\n  React.useEffect(() => {\n    const updateIsGeoLocated = () => setIsGeoLocated(!!activeViewport?.iModel.isGeoLocated);\n    return activeViewport?.iModel.onEcefLocationChanged.addListener(updateIsGeoLocated);\n  }, [activeViewport?.iModel]);\n\n  if (activeViewport && isGeoLocated && activeViewport.view.isSpatialView())\n    return (\n      <div ref={ref} className=\"map-manager-layer-host\">\n        <MapLayerManager activeViewport={activeViewport} mapLayerOptions={props.mapLayerOptions} getContainerForClone={() => {\n          return ref.current ? ref.current : document.body;\n        }} />\n      </div>\n    );\n\n  return (\n    <FillCentered><div className=\"map-manager-not-geo-located-text\">{notGeoLocatedMsg}</div></FillCentered>\n  );\n}\n"]}
+{"version":3,"file":"MapLayersWidget.js","sourceRoot":"","sources":["../../../../src/ui/widget/MapLayersWidget.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAE/F,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAS9C,gEAAgE;AAChE,MAAM,UAAU,eAAe,CAAC,KAA2B;IACzD,MAAM,CAAC,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,YAAY,CAAC,kBAAkB,CAAC,iCAAiC,CAAC,CAAC,CAAC;IAC1H,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAC;IAC3C,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC;IAE9F,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,kBAAkB,GAAG,GAAG,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC;QACxF,OAAO,cAAc,EAAE,MAAM,CAAC,qBAAqB,CAAC,WAAW,CAAC,kBAAkB,CAAC,CAAC;IACtF,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC,CAAC;IAE7B,IAAI,cAAc,IAAI,YAAY,IAAI,cAAc,CAAC,IAAI,CAAC,aAAa,EAAE;QACvE,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,wBAAwB;YAC/C,oBAAC,eAAe,IAAC,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,KAAK,CAAC,eAAe,EAAE,oBAAoB,EAAE,GAAG,EAAE;oBAClH,OAAO,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;gBACnD,CAAC,GAAI,CACD,CACP,CAAC;IAEJ,OAAO,CACL,oBAAC,YAAY;QAAC,6BAAK,SAAS,EAAC,kCAAkC,IAAE,gBAAgB,CAAO,CAAe,CACxG,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n\r\nimport * as React from \"react\";\r\nimport { useActiveViewport } from \"@itwin/appui-react\";\r\nimport { FillCentered } from \"@itwin/core-react\";\r\nimport { MapLayerOptions } from \"../Interfaces\";\r\nimport { MapLayerManager } from \"./MapLayerManager\";\r\nimport { MapLayersUI } from \"../../mapLayers\";\r\n\r\n/**\r\n * Widget to Manage Map Layers\r\n * @beta\r\n */\r\ninterface MapLayersWidgetProps {\r\n  mapLayerOptions?: MapLayerOptions;\r\n}\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport function MapLayersWidget(props: MapLayersWidgetProps) {\r\n  const [notGeoLocatedMsg] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Messages.NotSupported\"));\r\n  const activeViewport = useActiveViewport();\r\n  const ref = React.useRef<HTMLDivElement>(null);\r\n  const [isGeoLocated, setIsGeoLocated] = React.useState(!!activeViewport?.iModel.isGeoLocated);\r\n\r\n  React.useEffect(() => {\r\n    const updateIsGeoLocated = () => setIsGeoLocated(!!activeViewport?.iModel.isGeoLocated);\r\n    return activeViewport?.iModel.onEcefLocationChanged.addListener(updateIsGeoLocated);\r\n  }, [activeViewport?.iModel]);\r\n\r\n  if (activeViewport && isGeoLocated && activeViewport.view.isSpatialView())\r\n    return (\r\n      <div ref={ref} className=\"map-manager-layer-host\">\r\n        <MapLayerManager activeViewport={activeViewport} mapLayerOptions={props.mapLayerOptions} getContainerForClone={() => {\r\n          return ref.current ? ref.current : document.body;\r\n        }} />\r\n      </div>\r\n    );\r\n\r\n  return (\r\n    <FillCentered><div className=\"map-manager-not-geo-located-text\">{notGeoLocatedMsg}</div></FillCentered>\r\n  );\r\n}\r\n"]}

package/lib/esm/ui/widget/MapManagerSettings.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import "./MapManagerSettings.scss";
-export declare function MapManagerSettings(): JSX.Element;
+/// <reference types="react" />
+import "./MapManagerSettings.scss";
+export declare function MapManagerSettings(): JSX.Element;
 //# sourceMappingURL=MapManagerSettings.d.ts.map