@itwin/map-layers 4.0.0-dev.44 → 4.0.0-dev.47

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

@@ -1 +1 @@
-{"version":3,"file":"SelectMapFormat.js","sourceRoot":"","sources":["../../../../src/ui/widget/SelectMapFormat.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F,8BAA8B;;;AAE9B,wDAAkF;AAClF,+BAA+B;AAE/B,+BAA6B;AAC7B,gFAAyE;AACzE,+CAA8C;AAC9C,wDAAiD;AAEjD,QAAQ;AACR,wEAAwE;AACxE,4EAA4E;AAC5E,wDAAwD;AAC3C,QAAA,SAAS,GAAG;IACvB,GAAG,EAAE,KAAK;IACV,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;IAClB,aAAa,EAAE,eAAe;CAC/B,CAAC;AASF,gEAAgE;AAChE,SAAgB,eAAe,CAAC,KAA2B;IAEzD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,iBAAS,CAAC,MAAM,CAAC,CAAC;IAClF,MAAM,CAAC,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,uBAAW,CAAC,YAAY,CAAC,kBAAkB,CAAC,gDAAgD,CAAC,CAAC,CAAC;IAE3I,MAAM,CAAC,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAA2B,EAAE;QAC/D,MAAM,OAAO,GAA2B;YACtC,EAAE,KAAK,EAAE,iBAAS,CAAC,MAAM,EAAS,KAAK,EAAE,iBAAS,CAAC,MAAM,EAAE;YAC3D,EAAE,KAAK,EAAE,iBAAS,CAAC,GAAG,EAAY,KAAK,EAAE,iBAAS,CAAC,GAAG,EAAE;YACxD,EAAE,KAAK,EAAE,iBAAS,CAAC,IAAI,EAAW,KAAK,EAAE,iBAAS,CAAC,IAAI,EAAE;SAC1D,CAAC;QACF,IAAI,KAAK,CAAC,eAAe,EAAE,cAAc;YACvC,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,iBAAS,CAAC,OAAO,EAAE,KAAK,EAAE,iBAAS,CAAC,OAAO,EAAE,CAAC,CAAC;QAEvE,IAAI,yBAAS,CAAC,sBAAsB,CAAC,YAAY,CAAC,iBAAS,CAAC,aAAa,CAAC;YACxE,OAAO,CAAC,IAAI,CAAE,EAAE,KAAK,EAAE,iBAAS,CAAC,aAAa,EAAE,KAAK,EAAE,iBAAS,CAAC,aAAa,EAAE,EAAE,EAAC,aAAa,EAAE,CAAC,CAAC;QAEtG,OAAO,OAAO,CAAC;IACjB,CAAC,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAa,EAAE,EAAE;QACzD,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,IAAI,KAAK,CAAC,QAAQ,EAAE;YAClB,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;SACvB;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CAEL,oBAAC,sBAAM,IACL,SAAS,EAAC,yBAAyB,EACnC,OAAO,EAAE,UAAU,EACnB,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,cAAc,EACxB,IAAI,EAAC,OAAO,EACZ,YAAY,EACV,CAAC,MAAM,EAAE,EAAE,CAAC,CACV,oBAAC,wBAAQ,IACP,KAAK,EAAE,MAAM,CAAC,EAAE,EAAE,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;gBACzC,6BAAK,KAAK,EAAE,kBAAkB;oBAC5B,oBAAC,0BAAU,IAAC,SAAS,EAAC,sCAAsC,EAAE,IAAI,EAAC,OAAO;wBACxE,oBAAC,mDAAuB,OAAG,CAChB,CACT;gBACN,CAAC,CAAC,SAAS,IACZ,MAAM,CAAC,KAAK,CACJ,CAAC,GAChB,CACH,CAAC;AACJ,CAAC;AAlDD,0CAkDC","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// cSpell:ignore Modeless WMTS\r\n\r\nimport { IconButton, MenuItem, Select, SelectOption } from \"@itwin/itwinui-react\";\r\nimport * as React from \"react\";\r\nimport { MapTypesOptions } from \"../Interfaces\";\r\nimport \"./MapUrlDialog.scss\";\r\nimport {SvgTechnicalPreviewMini} from \"@itwin/itwinui-icons-color-react\";\r\nimport { MapLayersUI } from \"../../mapLayers\";\r\nimport { IModelApp } from \"@itwin/core-frontend\";\r\n\r\n// TODO:\r\n// Remove this structure and iterate over the registry's active formats.\r\n// Still need a proper way to exclude some format, like we currently do with\r\n// 'TileUrl' without the need to hardcode any format Id.\r\nexport const MAP_TYPES = {\r\n  wms: \"WMS\",\r\n  arcGis: \"ArcGIS\",\r\n  wmts: \"WMTS\",\r\n  tileUrl: \"TileURL\",\r\n  arcGisFeature: \"ArcGISFeature\",\r\n};\r\n\r\ninterface SelectMapFormatProps {\r\n  value?: string;\r\n  disabled?: boolean;\r\n  mapTypesOptions?: MapTypesOptions;\r\n  onChange?: (mapType: string) => void;\r\n}\r\n\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport function SelectMapFormat(props: SelectMapFormatProps) {\r\n\r\n  const [mapFormat, setMapFormat] = React.useState(props.value ?? MAP_TYPES.arcGis);\r\n  const [techPreviewTooltip] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:CustomAttach.TechPreviewBadgeTooltip\"));\r\n\r\n  const [mapFormats] = React.useState((): SelectOption<string>[] => {\r\n    const formats: SelectOption<string>[] = [\r\n      { value: MAP_TYPES.arcGis,        label: MAP_TYPES.arcGis },\r\n      { value: MAP_TYPES.wms,           label: MAP_TYPES.wms },\r\n      { value: MAP_TYPES.wmts,          label: MAP_TYPES.wmts },\r\n    ];\r\n    if (props.mapTypesOptions?.supportTileUrl)\r\n      formats.push({ value: MAP_TYPES.tileUrl, label: MAP_TYPES.tileUrl });\r\n\r\n    if (IModelApp.mapLayerFormatRegistry.isRegistered(MAP_TYPES.arcGisFeature))\r\n      formats.push( { value: MAP_TYPES.arcGisFeature, label: MAP_TYPES.arcGisFeature, id:\"techPreview\" });\r\n\r\n    return formats;\r\n  });\r\n\r\n  const handleOnChange = React.useCallback((value: string) => {\r\n    setMapFormat(value);\r\n    if (props.onChange) {\r\n      props.onChange(value);\r\n    }\r\n  }, [props]);\r\n\r\n  return (\r\n\r\n    <Select\r\n      className=\"map-layer-source-select\"\r\n      options={mapFormats}\r\n      value={mapFormat}\r\n      disabled={props.disabled}\r\n      onChange={handleOnChange}\r\n      size=\"small\"\r\n      itemRenderer={\r\n        (option) => (\r\n          <MenuItem\r\n            badge={option.id?.includes(\"techPreview\") ?\r\n              <div title={techPreviewTooltip}>\r\n                <IconButton className=\"map-layer-source-select-previewBadge\"  size=\"small\">\r\n                  <SvgTechnicalPreviewMini />\r\n                </IconButton>\r\n              </div>\r\n              : undefined}>\r\n            {option.label}\r\n          </MenuItem>) }\r\n    />\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"SelectMapFormat.js","sourceRoot":"","sources":["../../../../src/ui/widget/SelectMapFormat.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F,8BAA8B;;;AAE9B,wDAAkF;AAClF,+BAA+B;AAE/B,+BAA6B;AAC7B,gFAAyE;AACzE,+CAA8C;AAC9C,wDAAiD;AAEjD,QAAQ;AACR,wEAAwE;AACxE,4EAA4E;AAC5E,wDAAwD;AAC3C,QAAA,SAAS,GAAG;IACvB,GAAG,EAAE,KAAK;IACV,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;IAClB,aAAa,EAAE,eAAe;CAC/B,CAAC;AASF,gEAAgE;AAChE,SAAgB,eAAe,CAAC,KAA2B;IAEzD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,iBAAS,CAAC,MAAM,CAAC,CAAC;IAClF,MAAM,CAAC,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,uBAAW,CAAC,YAAY,CAAC,kBAAkB,CAAC,gDAAgD,CAAC,CAAC,CAAC;IAE3I,MAAM,CAAC,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAA2B,EAAE;QAC/D,MAAM,OAAO,GAA2B;YACtC,EAAE,KAAK,EAAE,iBAAS,CAAC,MAAM,EAAS,KAAK,EAAE,iBAAS,CAAC,MAAM,EAAE;YAC3D,EAAE,KAAK,EAAE,iBAAS,CAAC,GAAG,EAAY,KAAK,EAAE,iBAAS,CAAC,GAAG,EAAE;YACxD,EAAE,KAAK,EAAE,iBAAS,CAAC,IAAI,EAAW,KAAK,EAAE,iBAAS,CAAC,IAAI,EAAE;SAC1D,CAAC;QACF,IAAI,KAAK,CAAC,eAAe,EAAE,cAAc;YACvC,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,iBAAS,CAAC,OAAO,EAAE,KAAK,EAAE,iBAAS,CAAC,OAAO,EAAE,CAAC,CAAC;QAEvE,IAAI,yBAAS,CAAC,sBAAsB,CAAC,YAAY,CAAC,iBAAS,CAAC,aAAa,CAAC;YACxE,OAAO,CAAC,IAAI,CAAE,EAAE,KAAK,EAAE,iBAAS,CAAC,aAAa,EAAE,KAAK,EAAE,iBAAS,CAAC,aAAa,EAAE,EAAE,EAAC,aAAa,EAAE,CAAC,CAAC;QAEtG,OAAO,OAAO,CAAC;IACjB,CAAC,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAa,EAAE,EAAE;QACzD,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,IAAI,KAAK,CAAC,QAAQ,EAAE;YAClB,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;SACvB;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CAEL,oBAAC,sBAAM,IACL,SAAS,EAAC,yBAAyB,EACnC,OAAO,EAAE,UAAU,EACnB,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,cAAc,EACxB,IAAI,EAAC,OAAO,EACZ,YAAY,EACV,CAAC,MAAM,EAAE,EAAE,CAAC,CACV,oBAAC,wBAAQ,IACP,KAAK,EAAE,MAAM,CAAC,EAAE,EAAE,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;gBACzC,6BAAK,KAAK,EAAE,kBAAkB;oBAC5B,oBAAC,0BAAU,IAAC,SAAS,EAAC,sCAAsC,EAAE,IAAI,EAAC,OAAO;wBACxE,oBAAC,mDAAuB,OAAG,CAChB,CACT;gBACN,CAAC,CAAC,SAAS,IACZ,MAAM,CAAC,KAAK,CACJ,CAAC,GAChB,CACH,CAAC;AACJ,CAAC;AAlDD,0CAkDC","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 Modeless WMTS\n\nimport { IconButton, MenuItem, Select, SelectOption } from \"@itwin/itwinui-react\";\nimport * as React from \"react\";\nimport { MapTypesOptions } from \"../Interfaces\";\nimport \"./MapUrlDialog.scss\";\nimport {SvgTechnicalPreviewMini} from \"@itwin/itwinui-icons-color-react\";\nimport { MapLayersUI } from \"../../mapLayers\";\nimport { IModelApp } from \"@itwin/core-frontend\";\n\n// TODO:\n// Remove this structure and iterate over the registry's active formats.\n// Still need a proper way to exclude some format, like we currently do with\n// 'TileUrl' without the need to hardcode any format Id.\nexport const MAP_TYPES = {\n  wms: \"WMS\",\n  arcGis: \"ArcGIS\",\n  wmts: \"WMTS\",\n  tileUrl: \"TileURL\",\n  arcGisFeature: \"ArcGISFeature\",\n};\n\ninterface SelectMapFormatProps {\n  value?: string;\n  disabled?: boolean;\n  mapTypesOptions?: MapTypesOptions;\n  onChange?: (mapType: string) => void;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function SelectMapFormat(props: SelectMapFormatProps) {\n\n  const [mapFormat, setMapFormat] = React.useState(props.value ?? MAP_TYPES.arcGis);\n  const [techPreviewTooltip] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:CustomAttach.TechPreviewBadgeTooltip\"));\n\n  const [mapFormats] = React.useState((): SelectOption<string>[] => {\n    const formats: SelectOption<string>[] = [\n      { value: MAP_TYPES.arcGis,        label: MAP_TYPES.arcGis },\n      { value: MAP_TYPES.wms,           label: MAP_TYPES.wms },\n      { value: MAP_TYPES.wmts,          label: MAP_TYPES.wmts },\n    ];\n    if (props.mapTypesOptions?.supportTileUrl)\n      formats.push({ value: MAP_TYPES.tileUrl, label: MAP_TYPES.tileUrl });\n\n    if (IModelApp.mapLayerFormatRegistry.isRegistered(MAP_TYPES.arcGisFeature))\n      formats.push( { value: MAP_TYPES.arcGisFeature, label: MAP_TYPES.arcGisFeature, id:\"techPreview\" });\n\n    return formats;\n  });\n\n  const handleOnChange = React.useCallback((value: string) => {\n    setMapFormat(value);\n    if (props.onChange) {\n      props.onChange(value);\n    }\n  }, [props]);\n\n  return (\n\n    <Select\n      className=\"map-layer-source-select\"\n      options={mapFormats}\n      value={mapFormat}\n      disabled={props.disabled}\n      onChange={handleOnChange}\n      size=\"small\"\n      itemRenderer={\n        (option) => (\n          <MenuItem\n            badge={option.id?.includes(\"techPreview\") ?\n              <div title={techPreviewTooltip}>\n                <IconButton className=\"map-layer-source-select-previewBadge\"  size=\"small\">\n                  <SvgTechnicalPreviewMini />\n                </IconButton>\n              </div>\n              : undefined}>\n            {option.label}\n          </MenuItem>) }\n    />\n  );\n}\n"]}

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

@@ -1,21 +1,19 @@
-import { BeEvent } from "@itwin/core-bentley";
-import { MapSubLayerProps } from "@itwin/core-common";
-import { ITreeDataProvider, TreeDataChangesListener, TreeNodeItem } from "@itwin/components-react";
-import { StyleMapLayerSettings } from "../Interfaces";
-/**
- * Data provider that returns some fake nodes to show in tree.
- */
-export declare class SubLayersDataProvider implements ITreeDataProvider {
-    private readonly _nodeMap;
-    private readonly _mapLayer;
-    constructor(mapLayer: StyleMapLayerSettings);
-    static isUnnamedGroup(subLayer: MapSubLayerProps | undefined): boolean;
-    private createId;
-    private createNode;
-    private loadChildNodes;
-    private loadNodes;
-    onTreeNodeChanged: BeEvent<TreeDataChangesListener>;
-    getNodesCount(parent?: TreeNodeItem): Promise<number>;
-    getNodes(parent?: TreeNodeItem): Promise<TreeNodeItem[]>;
-}
+import { MapSubLayerProps } from "@itwin/core-common";
+import { ITreeDataProvider, TreeNodeItem } from "@itwin/components-react";
+import { StyleMapLayerSettings } from "../Interfaces";
+/**
+ * Data provider that returns some fake nodes to show in tree.
+ */
+export declare class SubLayersDataProvider implements ITreeDataProvider {
+    private readonly _nodeMap;
+    private readonly _mapLayer;
+    constructor(mapLayer: StyleMapLayerSettings);
+    static isUnnamedGroup(subLayer: MapSubLayerProps | undefined): boolean;
+    private createId;
+    private createNode;
+    private loadChildNodes;
+    private loadNodes;
+    getNodesCount(parent?: TreeNodeItem): Promise<number>;
+    getNodes(parent?: TreeNodeItem): Promise<TreeNodeItem[]>;
+}
 //# sourceMappingURL=SubLayersDataProvider.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SubLayersDataProvider.d.ts","sourceRoot":"","sources":["../../../../src/ui/widget/SubLayersDataProvider.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,EAA6B,MAAM,qBAAqB,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAc,MAAM,oBAAoB,CAAC;AAElE,OAAO,EAA2B,iBAAiB,EAAE,uBAAuB,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE5H,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAEtD;;GAEG;AACH,qBAAa,qBAAsB,YAAW,iBAAiB;IAC7D,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAqC;IAC9D,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAwB;gBAEtC,QAAQ,EAAE,qBAAqB;WAK7B,cAAc,CAAC,QAAQ,EAAE,gBAAgB,GAAG,SAAS,GAAG,OAAO;IAO7E,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,UAAU;IAclB,OAAO,CAAC,cAAc;IAqBtB,OAAO,CAAC,SAAS;IAOV,iBAAiB,mCAA0C;IAErD,aAAa,CAAC,MAAM,CAAC,EAAE,YAAY;IAQnC,QAAQ,CAAC,MAAM,CAAC,EAAE,YAAY;CAO5C"}
+{"version":3,"file":"SubLayersDataProvider.d.ts","sourceRoot":"","sources":["../../../../src/ui/widget/SubLayersDataProvider.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,gBAAgB,EAAc,MAAM,oBAAoB,CAAC;AAElE,OAAO,EAA2B,iBAAiB,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEnG,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAEtD;;GAEG;AACH,qBAAa,qBAAsB,YAAW,iBAAiB;IAC7D,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAqC;IAC9D,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAwB;gBAEtC,QAAQ,EAAE,qBAAqB;WAK7B,cAAc,CAAC,QAAQ,EAAE,gBAAgB,GAAG,SAAS,GAAG,OAAO;IAO7E,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,UAAU;IAclB,OAAO,CAAC,cAAc;IAqBtB,OAAO,CAAC,SAAS;IAOJ,aAAa,CAAC,MAAM,CAAC,EAAE,YAAY;IAQnC,QAAQ,CAAC,MAAM,CAAC,EAAE,YAAY;CAO5C"}

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

@@ -1,76 +1,75 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SubLayersDataProvider = void 0;
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-const core_bentley_1 = require("@itwin/core-bentley");
-const appui_abstract_1 = require("@itwin/appui-abstract");
-const core_react_1 = require("@itwin/core-react");
-/**
- * Data provider that returns some fake nodes to show in tree.
- */
-class SubLayersDataProvider {
-    constructor(mapLayer) {
-        this._nodeMap = new Map();
-        this.onTreeNodeChanged = new core_bentley_1.BeEvent();
-        this._mapLayer = mapLayer;
-        this.loadNodes(mapLayer.subLayers);
-    }
-    static isUnnamedGroup(subLayer) {
-        if (!subLayer)
-            return false;
-        return (!subLayer.name || subLayer.name.length === 0) && (subLayer.children !== undefined && subLayer.children.length > 0);
-    }
-    createId(props) {
-        return undefined !== props.id ? `${props.id}` : props.name ? props.name : "no-id";
-    }
-    createNode(props, expanded, isCheckboxDisabled, icon) {
-        return {
-            id: this.createId(props),
-            label: appui_abstract_1.PropertyRecord.fromString(props.title ?? props.name ?? "unknown"),
-            hasChildren: !!props.children,
-            isCheckboxVisible: true,
-            checkBoxState: props.visible && !isCheckboxDisabled ? core_react_1.CheckBoxState.On : core_react_1.CheckBoxState.Off,
-            extendedData: { subLayerId: props.id },
-            isCheckboxDisabled,
-            autoExpand: expanded,
-            icon,
-        };
-    }
-    loadChildNodes(allSubLayers, parentId) {
-        const filteredProps = allSubLayers.filter((props) => parentId === props.parent);
-        if (filteredProps.length) {
-            filteredProps?.sort((a, b) => (0, core_bentley_1.compareStringsOrUndefined)(a.title, b.title));
-            const treeNodes = [];
-            filteredProps.forEach((props) => {
-                treeNodes.push(this.createNode(props, (!parentId && props?.children !== undefined) ? true : undefined, // expand root group only (i.e. not the entire tree),
-                undefined, SubLayersDataProvider.isUnnamedGroup(props) ? "icon-folder" : "icon-layers"));
-                if (props.children)
-                    this.loadChildNodes(allSubLayers, props.id);
-            });
-            this._nodeMap.set(undefined !== parentId ? `${parentId}` : "", treeNodes);
-        }
-    }
-    loadNodes(subLayerNodes) {
-        subLayerNodes?.sort((a, b) => (0, core_bentley_1.compareStringsOrUndefined)(a.title, b.title));
-        if (subLayerNodes) {
-            this.loadChildNodes(subLayerNodes, undefined);
-        }
-    }
-    async getNodesCount(parent) {
-        const nodeArray = parent ? this._nodeMap.get(parent.id) : this._nodeMap.get("");
-        if (nodeArray)
-            return nodeArray.length;
-        return 0;
-    }
-    async getNodes(parent) {
-        const nodeArray = parent ? this._nodeMap.get(parent.id) : this._nodeMap.get("");
-        if (nodeArray)
-            return nodeArray;
-        return [];
-    }
-}
-exports.SubLayersDataProvider = SubLayersDataProvider;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SubLayersDataProvider = void 0;
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+const core_bentley_1 = require("@itwin/core-bentley");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const core_react_1 = require("@itwin/core-react");
+/**
+ * Data provider that returns some fake nodes to show in tree.
+ */
+class SubLayersDataProvider {
+    constructor(mapLayer) {
+        this._nodeMap = new Map();
+        this._mapLayer = mapLayer;
+        this.loadNodes(mapLayer.subLayers);
+    }
+    static isUnnamedGroup(subLayer) {
+        if (!subLayer)
+            return false;
+        return (!subLayer.name || subLayer.name.length === 0) && (subLayer.children !== undefined && subLayer.children.length > 0);
+    }
+    createId(props) {
+        return undefined !== props.id ? `${props.id}` : props.name ? props.name : "no-id";
+    }
+    createNode(props, expanded, isCheckboxDisabled, icon) {
+        return {
+            id: this.createId(props),
+            label: appui_abstract_1.PropertyRecord.fromString(props.title ?? props.name ?? "unknown"),
+            hasChildren: !!props.children,
+            isCheckboxVisible: true,
+            checkBoxState: props.visible && !isCheckboxDisabled ? core_react_1.CheckBoxState.On : core_react_1.CheckBoxState.Off,
+            extendedData: { subLayerId: props.id },
+            isCheckboxDisabled,
+            autoExpand: expanded,
+            icon,
+        };
+    }
+    loadChildNodes(allSubLayers, parentId) {
+        const filteredProps = allSubLayers.filter((props) => parentId === props.parent);
+        if (filteredProps.length) {
+            filteredProps?.sort((a, b) => (0, core_bentley_1.compareStringsOrUndefined)(a.title, b.title));
+            const treeNodes = [];
+            filteredProps.forEach((props) => {
+                treeNodes.push(this.createNode(props, (!parentId && props?.children !== undefined) ? true : undefined, // expand root group only (i.e. not the entire tree),
+                undefined, SubLayersDataProvider.isUnnamedGroup(props) ? "icon-folder" : "icon-layers"));
+                if (props.children)
+                    this.loadChildNodes(allSubLayers, props.id);
+            });
+            this._nodeMap.set(undefined !== parentId ? `${parentId}` : "", treeNodes);
+        }
+    }
+    loadNodes(subLayerNodes) {
+        subLayerNodes?.sort((a, b) => (0, core_bentley_1.compareStringsOrUndefined)(a.title, b.title));
+        if (subLayerNodes) {
+            this.loadChildNodes(subLayerNodes, undefined);
+        }
+    }
+    async getNodesCount(parent) {
+        const nodeArray = parent ? this._nodeMap.get(parent.id) : this._nodeMap.get("");
+        if (nodeArray)
+            return nodeArray.length;
+        return 0;
+    }
+    async getNodes(parent) {
+        const nodeArray = parent ? this._nodeMap.get(parent.id) : this._nodeMap.get("");
+        if (nodeArray)
+            return nodeArray;
+        return [];
+    }
+}
+exports.SubLayersDataProvider = SubLayersDataProvider;
 //# sourceMappingURL=SubLayersDataProvider.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SubLayersDataProvider.js","sourceRoot":"","sources":["../../../../src/ui/widget/SubLayersDataProvider.ts"],"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 { BeEvent, compareStringsOrUndefined } from \"@itwin/core-bentley\";\r\nimport { MapSubLayerProps, SubLayerId } from \"@itwin/core-common\";\r\nimport { PropertyRecord } from \"@itwin/appui-abstract\";\r\nimport { DelayLoadedTreeNodeItem, ITreeDataProvider, TreeDataChangesListener, TreeNodeItem } from \"@itwin/components-react\";\r\nimport { CheckBoxState } from \"@itwin/core-react\";\r\nimport { StyleMapLayerSettings } from \"../Interfaces\";\r\n\r\n/**\r\n * Data provider that returns some fake nodes to show in tree.\r\n */\r\nexport class SubLayersDataProvider implements ITreeDataProvider {\r\n  private readonly _nodeMap = new Map<string, TreeNodeItem[]>();\r\n  private readonly _mapLayer: StyleMapLayerSettings;\r\n\r\n  constructor(mapLayer: StyleMapLayerSettings) {\r\n    this._mapLayer = mapLayer;\r\n    this.loadNodes(mapLayer.subLayers);\r\n  }\r\n\r\n  public static isUnnamedGroup(subLayer: MapSubLayerProps | undefined): boolean {\r\n    if (!subLayer)\r\n      return false;\r\n\r\n    return (!subLayer.name || subLayer.name.length === 0) && (subLayer.children !== undefined && subLayer.children.length > 0);\r\n  }\r\n\r\n  private createId(props: MapSubLayerProps): string {\r\n    return undefined !== props.id ? `${props.id}` : props.name ? props.name : \"no-id\";\r\n  }\r\n\r\n  private createNode(props: MapSubLayerProps, expanded?: boolean, isCheckboxDisabled?: boolean, icon?: string): DelayLoadedTreeNodeItem {\r\n    return {\r\n      id: this.createId(props),\r\n      label: PropertyRecord.fromString(props.title ?? props.name ?? \"unknown\"),\r\n      hasChildren: !!props.children,\r\n      isCheckboxVisible: true,\r\n      checkBoxState: props.visible && !isCheckboxDisabled ? CheckBoxState.On : CheckBoxState.Off,\r\n      extendedData: { subLayerId: props.id },\r\n      isCheckboxDisabled,\r\n      autoExpand: expanded,\r\n      icon,\r\n    };\r\n  }\r\n\r\n  private loadChildNodes(allSubLayers: MapSubLayerProps[], parentId?: SubLayerId) {\r\n    const filteredProps = allSubLayers.filter((props) => parentId === props.parent);\r\n    if (filteredProps.length) {\r\n      filteredProps?.sort((a: MapSubLayerProps, b: MapSubLayerProps) => compareStringsOrUndefined(a.title, b.title));\r\n      const treeNodes: TreeNodeItem[] = [];\r\n\r\n      filteredProps.forEach((props) => {\r\n        treeNodes.push(this.createNode(props,\r\n          (!parentId && props?.children !== undefined) ? true : undefined, // expand root group only (i.e. not the entire tree),\r\n          undefined,\r\n          SubLayersDataProvider.isUnnamedGroup(props) ? \"icon-folder\" : \"icon-layers\"\r\n\r\n        ));\r\n        if (props.children)\r\n          this.loadChildNodes(allSubLayers, props.id);\r\n      });\r\n\r\n      this._nodeMap.set(undefined !== parentId ? `${parentId}` : \"\", treeNodes);\r\n    }\r\n  }\r\n\r\n  private loadNodes(subLayerNodes: MapSubLayerProps[] | undefined) {\r\n    subLayerNodes?.sort((a: MapSubLayerProps, b: MapSubLayerProps) => compareStringsOrUndefined(a.title, b.title));\r\n    if (subLayerNodes) {\r\n      this.loadChildNodes(subLayerNodes, undefined);\r\n    }\r\n  }\r\n\r\n  public onTreeNodeChanged = new BeEvent<TreeDataChangesListener>();\r\n\r\n  public async getNodesCount(parent?: TreeNodeItem) {\r\n    const nodeArray: TreeNodeItem[] | undefined = parent ? this._nodeMap.get(parent.id) : this._nodeMap.get(\"\");\r\n    if (nodeArray)\r\n      return nodeArray.length;\r\n\r\n    return 0;\r\n  }\r\n\r\n  public async getNodes(parent?: TreeNodeItem) {\r\n    const nodeArray: TreeNodeItem[] | undefined = parent ? this._nodeMap.get(parent.id) : this._nodeMap.get(\"\");\r\n    if (nodeArray)\r\n      return nodeArray;\r\n\r\n    return [];\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"SubLayersDataProvider.js","sourceRoot":"","sources":["../../../../src/ui/widget/SubLayersDataProvider.ts"],"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 { compareStringsOrUndefined } from \"@itwin/core-bentley\";\nimport { MapSubLayerProps, SubLayerId } from \"@itwin/core-common\";\nimport { PropertyRecord } from \"@itwin/appui-abstract\";\nimport { DelayLoadedTreeNodeItem, ITreeDataProvider, TreeNodeItem } from \"@itwin/components-react\";\nimport { CheckBoxState } from \"@itwin/core-react\";\nimport { StyleMapLayerSettings } from \"../Interfaces\";\n\n/**\n * Data provider that returns some fake nodes to show in tree.\n */\nexport class SubLayersDataProvider implements ITreeDataProvider {\n  private readonly _nodeMap = new Map<string, TreeNodeItem[]>();\n  private readonly _mapLayer: StyleMapLayerSettings;\n\n  constructor(mapLayer: StyleMapLayerSettings) {\n    this._mapLayer = mapLayer;\n    this.loadNodes(mapLayer.subLayers);\n  }\n\n  public static isUnnamedGroup(subLayer: MapSubLayerProps | undefined): boolean {\n    if (!subLayer)\n      return false;\n\n    return (!subLayer.name || subLayer.name.length === 0) && (subLayer.children !== undefined && subLayer.children.length > 0);\n  }\n\n  private createId(props: MapSubLayerProps): string {\n    return undefined !== props.id ? `${props.id}` : props.name ? props.name : \"no-id\";\n  }\n\n  private createNode(props: MapSubLayerProps, expanded?: boolean, isCheckboxDisabled?: boolean, icon?: string): DelayLoadedTreeNodeItem {\n    return {\n      id: this.createId(props),\n      label: PropertyRecord.fromString(props.title ?? props.name ?? \"unknown\"),\n      hasChildren: !!props.children,\n      isCheckboxVisible: true,\n      checkBoxState: props.visible && !isCheckboxDisabled ? CheckBoxState.On : CheckBoxState.Off,\n      extendedData: { subLayerId: props.id },\n      isCheckboxDisabled,\n      autoExpand: expanded,\n      icon,\n    };\n  }\n\n  private loadChildNodes(allSubLayers: MapSubLayerProps[], parentId?: SubLayerId) {\n    const filteredProps = allSubLayers.filter((props) => parentId === props.parent);\n    if (filteredProps.length) {\n      filteredProps?.sort((a: MapSubLayerProps, b: MapSubLayerProps) => compareStringsOrUndefined(a.title, b.title));\n      const treeNodes: TreeNodeItem[] = [];\n\n      filteredProps.forEach((props) => {\n        treeNodes.push(this.createNode(props,\n          (!parentId && props?.children !== undefined) ? true : undefined, // expand root group only (i.e. not the entire tree),\n          undefined,\n          SubLayersDataProvider.isUnnamedGroup(props) ? \"icon-folder\" : \"icon-layers\"\n\n        ));\n        if (props.children)\n          this.loadChildNodes(allSubLayers, props.id);\n      });\n\n      this._nodeMap.set(undefined !== parentId ? `${parentId}` : \"\", treeNodes);\n    }\n  }\n\n  private loadNodes(subLayerNodes: MapSubLayerProps[] | undefined) {\n    subLayerNodes?.sort((a: MapSubLayerProps, b: MapSubLayerProps) => compareStringsOrUndefined(a.title, b.title));\n    if (subLayerNodes) {\n      this.loadChildNodes(subLayerNodes, undefined);\n    }\n  }\n\n  public async getNodesCount(parent?: TreeNodeItem) {\n    const nodeArray: TreeNodeItem[] | undefined = parent ? this._nodeMap.get(parent.id) : this._nodeMap.get(\"\");\n    if (nodeArray)\n      return nodeArray.length;\n\n    return 0;\n  }\n\n  public async getNodes(parent?: TreeNodeItem) {\n    const nodeArray: TreeNodeItem[] | undefined = parent ? this._nodeMap.get(parent.id) : this._nodeMap.get(\"\");\n    if (nodeArray)\n      return nodeArray;\n\n    return [];\n  }\n}\n"]}

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

@@ -1,11 +1,10 @@
-/// <reference types="react" />
-import { ScreenViewport } from "@itwin/core-frontend";
-import { StyleMapLayerSettings } from "../Interfaces";
-/** @internal */
-export interface SubLayersPopupButtonProps {
-    mapLayerSettings: StyleMapLayerSettings;
-    activeViewport: ScreenViewport;
-}
-/** @internal */
-export declare function SubLayersPopupButton({ mapLayerSettings, activeViewport }: SubLayersPopupButtonProps): JSX.Element;
+import { ScreenViewport } from "@itwin/core-frontend";
+import { StyleMapLayerSettings } from "../Interfaces";
+/** @internal */
+export interface SubLayersPopupButtonProps {
+    mapLayerSettings: StyleMapLayerSettings;
+    activeViewport: ScreenViewport;
+}
+/** @internal */
+export declare function SubLayersPopupButton({ mapLayerSettings, activeViewport }: SubLayersPopupButtonProps): JSX.Element;
 //# sourceMappingURL=SubLayersPopupButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SubLayersPopupButton.d.ts","sourceRoot":"","sources":["../../../../src/ui/widget/SubLayersPopupButton.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAItD,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAMtD,gBAAgB;AAChB,MAAM,WAAW,yBAAyB;IACxC,gBAAgB,EAAE,qBAAqB,CAAC;IACxC,cAAc,EAAE,cAAc,CAAC;CAChC;AAED,gBAAgB;AAEhB,wBAAgB,oBAAoB,CAAC,EAAE,gBAAgB,EAAE,cAAc,EAAE,EAAE,yBAAyB,eA0CnG"}
+{"version":3,"file":"SubLayersPopupButton.d.ts","sourceRoot":"","sources":["../../../../src/ui/widget/SubLayersPopupButton.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAItD,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAMtD,gBAAgB;AAChB,MAAM,WAAW,yBAAyB;IACxC,gBAAgB,EAAE,qBAAqB,CAAC;IACxC,cAAc,EAAE,cAAc,CAAC;CAChC;AAED,gBAAgB;AAEhB,wBAAgB,oBAAoB,CAAC,EAAE,gBAAgB,EAAE,cAAc,EAAE,EAAE,yBAAyB,eA0CnG"}

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

@@ -1,41 +1,41 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SubLayersPopupButton = void 0;
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-const React = require("react");
-const appui_abstract_1 = require("@itwin/appui-abstract");
-const core_react_1 = require("@itwin/core-react");
-const SubLayersTree_1 = require("./SubLayersTree");
-const mapLayers_1 = require("../../mapLayers");
-const itwinui_react_1 = require("@itwin/itwinui-react");
-/** @internal */
-// eslint-disable-next-line @typescript-eslint/naming-convention
-function SubLayersPopupButton({ mapLayerSettings, activeViewport }) {
-    const [showSubLayersLabel] = React.useState(mapLayers_1.MapLayersUI.localization.getLocalizedString("mapLayers:SubLayers.Show"));
-    const [hideSubLayersLabel] = React.useState(mapLayers_1.MapLayersUI.localization.getLocalizedString("mapLayers:SubLayers.Hide"));
-    const [popupOpen, setPopupOpen] = React.useState(false);
-    const buttonRef = React.useRef(null);
-    const togglePopup = React.useCallback(() => {
-        setPopupOpen(!popupOpen);
-    }, [popupOpen]);
-    const onOutsideClick = React.useCallback(() => {
-        setPopupOpen(false);
-    }, []);
-    const isOutsideEvent = React.useCallback((e) => {
-        // if clicking on button that open panel - don't trigger outside click processing
-        return !!buttonRef.current && (e.target instanceof Node) && !buttonRef.current.contains(e.target);
-    }, []);
-    const panelRef = (0, core_react_1.useOnOutsideClick)(onOutsideClick, isOutsideEvent);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(itwinui_react_1.Button, { size: "small", styleType: "borderless", ref: buttonRef, className: "map-manager-item-sub-layer-button", title: popupOpen ? hideSubLayersLabel : showSubLayersLabel, onClick: togglePopup },
-            React.createElement(core_react_1.WebFontIcon, { iconName: "icon-layers" })),
-        React.createElement(core_react_1.Popup, { isOpen: popupOpen, position: appui_abstract_1.RelativePosition.BottomRight, onClose: onOutsideClick, target: buttonRef.current },
-            React.createElement("div", { className: "map-transparency-popup-panel" },
-                React.createElement("div", { ref: panelRef, className: "map-manager-sublayer-panel" },
-                    React.createElement(SubLayersTree_1.SubLayersPanel, { mapLayer: mapLayerSettings, viewport: activeViewport }))))));
-}
-exports.SubLayersPopupButton = SubLayersPopupButton;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SubLayersPopupButton = void 0;
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+const React = require("react");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const core_react_1 = require("@itwin/core-react");
+const SubLayersTree_1 = require("./SubLayersTree");
+const mapLayers_1 = require("../../mapLayers");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+/** @internal */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function SubLayersPopupButton({ mapLayerSettings, activeViewport }) {
+    const [showSubLayersLabel] = React.useState(mapLayers_1.MapLayersUI.localization.getLocalizedString("mapLayers:SubLayers.Show"));
+    const [hideSubLayersLabel] = React.useState(mapLayers_1.MapLayersUI.localization.getLocalizedString("mapLayers:SubLayers.Hide"));
+    const [popupOpen, setPopupOpen] = React.useState(false);
+    const buttonRef = React.useRef(null);
+    const togglePopup = React.useCallback(() => {
+        setPopupOpen(!popupOpen);
+    }, [popupOpen]);
+    const onOutsideClick = React.useCallback(() => {
+        setPopupOpen(false);
+    }, []);
+    const isOutsideEvent = React.useCallback((e) => {
+        // if clicking on button that open panel - don't trigger outside click processing
+        return !!buttonRef.current && (e.target instanceof Node) && !buttonRef.current.contains(e.target);
+    }, []);
+    const panelRef = (0, core_react_1.useOnOutsideClick)(onOutsideClick, isOutsideEvent);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(itwinui_react_1.Button, { size: "small", styleType: "borderless", ref: buttonRef, className: "map-manager-item-sub-layer-button", title: popupOpen ? hideSubLayersLabel : showSubLayersLabel, onClick: togglePopup },
+            React.createElement(core_react_1.WebFontIcon, { iconName: "icon-layers" })),
+        React.createElement(core_react_1.Popup, { isOpen: popupOpen, position: appui_abstract_1.RelativePosition.BottomRight, onClose: onOutsideClick, target: buttonRef.current },
+            React.createElement("div", { className: "map-transparency-popup-panel" },
+                React.createElement("div", { ref: panelRef, className: "map-manager-sublayer-panel" },
+                    React.createElement(SubLayersTree_1.SubLayersPanel, { mapLayer: mapLayerSettings, viewport: activeViewport }))))));
+}
+exports.SubLayersPopupButton = SubLayersPopupButton;
 //# sourceMappingURL=SubLayersPopupButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SubLayersPopupButton.js","sourceRoot":"","sources":["../../../../src/ui/widget/SubLayersPopupButton.tsx"],"names":[],"mappings":";;;AAAA;;;+FAG+F;AAC/F,+BAA+B;AAE/B,0DAAyD;AACzD,kDAA6F;AAC7F,mDAAiD;AAEjD,+CAA8C;AAC9C,wDAA8C;AAU9C,gBAAgB;AAChB,gEAAgE;AAChE,SAAgB,oBAAoB,CAAC,EAAE,gBAAgB,EAAE,cAAc,EAA6B;IAElG,MAAM,CAAC,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,uBAAW,CAAC,YAAY,CAAC,kBAAkB,CAAC,0BAA0B,CAAC,CAAC,CAAC;IACrH,MAAM,CAAC,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,uBAAW,CAAC,YAAY,CAAC,kBAAkB,CAAC,0BAA0B,CAAC,CAAC,CAAC;IACrH,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAoB,IAAI,CAAC,CAAC;IAExD,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,YAAY,CAAC,CAAC,SAAS,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC5C,YAAY,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAoB,EAAE,EAAE;QAChE,iFAAiF;QACjF,OAAO,CAAC,CAAC,SAAS,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,MAAM,YAAY,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IACpG,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,QAAQ,GAAG,IAAA,8BAAiB,EAAiB,cAAc,EAAE,cAAc,CAAC,CAAC;IAEnF,OAAO,CACL;QACE,oBAAC,sBAAM,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,YAAY,EAAC,GAAG,EAAE,SAAS,EAAE,SAAS,EAAC,mCAAmC,EAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,kBAAkB,EAClK,OAAO,EAAE,WAAW;YACpB,oBAAC,wBAAW,IAAC,QAAQ,EAAC,aAAa,GAAG,CAC/B;QACT,oBAAC,kBAAK,IACJ,MAAM,EAAE,SAAS,EACjB,QAAQ,EAAE,iCAAgB,CAAC,WAAW,EACtC,OAAO,EAAE,cAAc,EACvB,MAAM,EAAE,SAAS,CAAC,OAAO;YAEzB,6BAAK,SAAS,EAAC,8BAA8B;gBAC3C,6BAAK,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAC,4BAA4B;oBACxD,oBAAC,8BAAc,IAAC,QAAQ,EAAE,gBAAgB,EAAE,QAAQ,EAAE,cAAc,GAAI,CACpE,CACF,CACC,CACR,CACJ,CAAC;AACJ,CAAC;AA1CD,oDA0CC","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 { RelativePosition } from \"@itwin/appui-abstract\";\r\nimport { OutsideClickEvent, Popup, useOnOutsideClick, WebFontIcon } from \"@itwin/core-react\";\r\nimport { SubLayersPanel } from \"./SubLayersTree\";\r\nimport { StyleMapLayerSettings } from \"../Interfaces\";\r\nimport { MapLayersUI } from \"../../mapLayers\";\r\nimport { Button } from \"@itwin/itwinui-react\";\r\n\r\n// cSpell:ignore droppable Sublayer\r\n\r\n/** @internal */\r\nexport interface SubLayersPopupButtonProps {\r\n  mapLayerSettings: StyleMapLayerSettings;\r\n  activeViewport: ScreenViewport;\r\n}\r\n\r\n/** @internal */\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport function SubLayersPopupButton({ mapLayerSettings, activeViewport }: SubLayersPopupButtonProps) {\r\n\r\n  const [showSubLayersLabel] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:SubLayers.Show\"));\r\n  const [hideSubLayersLabel] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:SubLayers.Hide\"));\r\n  const [popupOpen, setPopupOpen] = React.useState(false);\r\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\r\n\r\n  const togglePopup = React.useCallback(() => {\r\n    setPopupOpen(!popupOpen);\r\n  }, [popupOpen]);\r\n\r\n  const onOutsideClick = React.useCallback(() => {\r\n    setPopupOpen(false);\r\n  }, []);\r\n\r\n  const isOutsideEvent = React.useCallback((e: OutsideClickEvent) => {\r\n    // if clicking on button that open panel - don't trigger outside click processing\r\n    return !!buttonRef.current && (e.target instanceof Node) && !buttonRef.current.contains(e.target);\r\n  }, []);\r\n\r\n  const panelRef = useOnOutsideClick<HTMLDivElement>(onOutsideClick, isOutsideEvent);\r\n\r\n  return (\r\n    <>\r\n      <Button size=\"small\" styleType=\"borderless\" ref={buttonRef} className=\"map-manager-item-sub-layer-button\" title={popupOpen ? hideSubLayersLabel : showSubLayersLabel}\r\n        onClick={togglePopup}>\r\n        <WebFontIcon iconName=\"icon-layers\" />\r\n      </Button>\r\n      <Popup\r\n        isOpen={popupOpen}\r\n        position={RelativePosition.BottomRight}\r\n        onClose={onOutsideClick}\r\n        target={buttonRef.current}\r\n      >\r\n        <div className=\"map-transparency-popup-panel\">\r\n          <div ref={panelRef} className=\"map-manager-sublayer-panel\">\r\n            <SubLayersPanel mapLayer={mapLayerSettings} viewport={activeViewport} />\r\n          </div>\r\n        </div>\r\n      </Popup >\r\n    </>\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"SubLayersPopupButton.js","sourceRoot":"","sources":["../../../../src/ui/widget/SubLayersPopupButton.tsx"],"names":[],"mappings":";;;AAAA;;;+FAG+F;AAC/F,+BAA+B;AAE/B,0DAAyD;AACzD,kDAA6F;AAC7F,mDAAiD;AAEjD,+CAA8C;AAC9C,wDAA8C;AAU9C,gBAAgB;AAChB,gEAAgE;AAChE,SAAgB,oBAAoB,CAAC,EAAE,gBAAgB,EAAE,cAAc,EAA6B;IAElG,MAAM,CAAC,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,uBAAW,CAAC,YAAY,CAAC,kBAAkB,CAAC,0BAA0B,CAAC,CAAC,CAAC;IACrH,MAAM,CAAC,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,uBAAW,CAAC,YAAY,CAAC,kBAAkB,CAAC,0BAA0B,CAAC,CAAC,CAAC;IACrH,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAoB,IAAI,CAAC,CAAC;IAExD,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,YAAY,CAAC,CAAC,SAAS,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC5C,YAAY,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAoB,EAAE,EAAE;QAChE,iFAAiF;QACjF,OAAO,CAAC,CAAC,SAAS,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,MAAM,YAAY,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IACpG,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,QAAQ,GAAG,IAAA,8BAAiB,EAAiB,cAAc,EAAE,cAAc,CAAC,CAAC;IAEnF,OAAO,CACL;QACE,oBAAC,sBAAM,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,YAAY,EAAC,GAAG,EAAE,SAAS,EAAE,SAAS,EAAC,mCAAmC,EAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,kBAAkB,EAClK,OAAO,EAAE,WAAW;YACpB,oBAAC,wBAAW,IAAC,QAAQ,EAAC,aAAa,GAAG,CAC/B;QACT,oBAAC,kBAAK,IACJ,MAAM,EAAE,SAAS,EACjB,QAAQ,EAAE,iCAAgB,CAAC,WAAW,EACtC,OAAO,EAAE,cAAc,EACvB,MAAM,EAAE,SAAS,CAAC,OAAO;YAEzB,6BAAK,SAAS,EAAC,8BAA8B;gBAC3C,6BAAK,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAC,4BAA4B;oBACxD,oBAAC,8BAAc,IAAC,QAAQ,EAAE,gBAAgB,EAAE,QAAQ,EAAE,cAAc,GAAI,CACpE,CACF,CACC,CACR,CACJ,CAAC;AACJ,CAAC;AA1CD,oDA0CC","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 { RelativePosition } from \"@itwin/appui-abstract\";\nimport { OutsideClickEvent, Popup, useOnOutsideClick, WebFontIcon } from \"@itwin/core-react\";\nimport { SubLayersPanel } from \"./SubLayersTree\";\nimport { StyleMapLayerSettings } from \"../Interfaces\";\nimport { MapLayersUI } from \"../../mapLayers\";\nimport { Button } from \"@itwin/itwinui-react\";\n\n// cSpell:ignore droppable Sublayer\n\n/** @internal */\nexport interface SubLayersPopupButtonProps {\n  mapLayerSettings: StyleMapLayerSettings;\n  activeViewport: ScreenViewport;\n}\n\n/** @internal */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function SubLayersPopupButton({ mapLayerSettings, activeViewport }: SubLayersPopupButtonProps) {\n\n  const [showSubLayersLabel] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:SubLayers.Show\"));\n  const [hideSubLayersLabel] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:SubLayers.Hide\"));\n  const [popupOpen, setPopupOpen] = React.useState(false);\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n\n  const togglePopup = React.useCallback(() => {\n    setPopupOpen(!popupOpen);\n  }, [popupOpen]);\n\n  const onOutsideClick = React.useCallback(() => {\n    setPopupOpen(false);\n  }, []);\n\n  const isOutsideEvent = React.useCallback((e: OutsideClickEvent) => {\n    // if clicking on button that open panel - don't trigger outside click processing\n    return !!buttonRef.current && (e.target instanceof Node) && !buttonRef.current.contains(e.target);\n  }, []);\n\n  const panelRef = useOnOutsideClick<HTMLDivElement>(onOutsideClick, isOutsideEvent);\n\n  return (\n    <>\n      <Button size=\"small\" styleType=\"borderless\" ref={buttonRef} className=\"map-manager-item-sub-layer-button\" title={popupOpen ? hideSubLayersLabel : showSubLayersLabel}\n        onClick={togglePopup}>\n        <WebFontIcon iconName=\"icon-layers\" />\n      </Button>\n      <Popup\n        isOpen={popupOpen}\n        position={RelativePosition.BottomRight}\n        onClose={onOutsideClick}\n        target={buttonRef.current}\n      >\n        <div className=\"map-transparency-popup-panel\">\n          <div ref={panelRef} className=\"map-manager-sublayer-panel\">\n            <SubLayersPanel mapLayer={mapLayerSettings} viewport={activeViewport} />\n          </div>\n        </div>\n      </Popup >\n    </>\n  );\n}\n"]}

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

@@ -1,16 +1,15 @@
-/// <reference types="react" />
-import { ScreenViewport } from "@itwin/core-frontend";
-import { StyleMapLayerSettings } from "../Interfaces";
-import "./SubLayersTree.scss";
-export declare function SubLayersPanel({ mapLayer, viewport }: {
-    mapLayer: StyleMapLayerSettings;
-    viewport: ScreenViewport | undefined;
-}): JSX.Element;
-/**
- * Tree Control that displays sub-layer hierarchy
- * @internal
- */
-export declare function SubLayersTree(props: {
-    mapLayer: StyleMapLayerSettings;
-}): JSX.Element;
+import { ScreenViewport } from "@itwin/core-frontend";
+import { StyleMapLayerSettings } from "../Interfaces";
+import "./SubLayersTree.scss";
+export declare function SubLayersPanel({ mapLayer, viewport }: {
+    mapLayer: StyleMapLayerSettings;
+    viewport: ScreenViewport | undefined;
+}): JSX.Element;
+/**
+ * Tree Control that displays sub-layer hierarchy
+ * @internal
+ */
+export declare function SubLayersTree(props: {
+    mapLayer: StyleMapLayerSettings;
+}): JSX.Element;
 //# sourceMappingURL=SubLayersTree.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SubLayersTree.d.ts","sourceRoot":"","sources":["../../../../src/ui/widget/SubLayersTree.tsx"],"names":[],"mappings":";AAaA,OAAO,EAA8C,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAIlG,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAEtD,OAAO,sBAAsB,CAAC;AAkE9B,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,qBAAqB,CAAC;IAAC,QAAQ,EAAE,cAAc,GAAG,SAAS,CAAA;CAAE,eAW/H;AAsBD;;;GAGG;AAEH,wBAAgB,aAAa,CAAC,KAAK,EAAE;IAAE,QAAQ,EAAE,qBAAqB,CAAA;CAAE,eAoGvE"}
+{"version":3,"file":"SubLayersTree.d.ts","sourceRoot":"","sources":["../../../../src/ui/widget/SubLayersTree.tsx"],"names":[],"mappings":"AAaA,OAAO,EAA8C,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAIlG,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAEtD,OAAO,sBAAsB,CAAC;AAkE9B,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,qBAAqB,CAAC;IAAC,QAAQ,EAAE,cAAc,GAAG,SAAS,CAAA;CAAE,eAW/H;AAsBD;;;GAGG;AAEH,wBAAgB,aAAa,CAAC,KAAK,EAAE;IAAE,QAAQ,EAAE,qBAAqB,CAAA;CAAE,eAoGvE"}