@itwin/map-layers 5.0.0 → 5.1.0

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

@@ -32,6 +32,6 @@ export function SubLayersPopupButton(props) {
         React.createElement(Popup, { isOpen: popupOpen, position: 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(SubLayersPanel, { ...props }))))));
+                    React.createElement(SubLayersPanel, { ...props, width: 390, height: 350 }))))));
 }
 //# sourceMappingURL=SubLayersPopupButton.js.map

package/lib/esm/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,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAqB,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC7F,OAAO,EAAE,cAAc,EAAuB,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAQ9C,gBAAgB;AAChB,gEAAgE;AAChE,MAAM,UAAU,oBAAoB,CAAC,KAAgC;IAEnE,MAAM,CAAC,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,YAAY,CAAC,kBAAkB,CAAC,0BAA0B,CAAC,CAAC,CAAC;IACrH,MAAM,CAAC,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,WAAW,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,iBAAiB,CAAiB,cAAc,EAAE,cAAc,CAAC,CAAC;IAEnF,OAAO,CACL;QACE,oBAAC,MAAM,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,WAAW,IAAC,QAAQ,EAAC,aAAa,GAAG,CAC/B;QACT,oBAAC,KAAK,IACJ,MAAM,EAAE,SAAS,EACjB,QAAQ,EAAE,gBAAgB,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,cAAc,OAAK,KAAK,GAAI,CACzB,CACF,CACC,CACR,CACJ,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*--------------------------------------------------------------------------------------------*/\nimport * as React from \"react\";\n\nimport { RelativePosition } from \"@itwin/appui-abstract\";\nimport { OutsideClickEvent, Popup, useOnOutsideClick, WebFontIcon } from \"@itwin/core-react\";\nimport { SubLayersPanel, SubLayersPanelProps } from \"./SubLayersTree\";\nimport { MapLayersUI } from \"../../mapLayers\";\nimport { Button } from \"@itwin/itwinui-react\";\n\n// cSpell:ignore droppable Sublayer\n\n/** @internal */\n\nexport type SubLayersPopupButtonProps = SubLayersPanelProps;\n\n/** @internal */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function SubLayersPopupButton(props: 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 {...props} />\n          </div>\n        </div>\n      </Popup >\n    </>\n  );\n}\n"]}
+{"version":3,"file":"SubLayersPopupButton.js","sourceRoot":"","sources":["../../../../src/ui/widget/SubLayersPopupButton.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAqB,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC7F,OAAO,EAAE,cAAc,EAAuB,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAQ9C,gBAAgB;AAChB,gEAAgE;AAChE,MAAM,UAAU,oBAAoB,CAAC,KAAgC;IAEnE,MAAM,CAAC,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,YAAY,CAAC,kBAAkB,CAAC,0BAA0B,CAAC,CAAC,CAAC;IACrH,MAAM,CAAC,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,WAAW,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,iBAAiB,CAAiB,cAAc,EAAE,cAAc,CAAC,CAAC;IAEnF,OAAO,CACL;QACE,oBAAC,MAAM,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,WAAW,IAAC,QAAQ,EAAC,aAAa,GAAG,CAC/B;QACT,oBAAC,KAAK,IACJ,MAAM,EAAE,SAAS,EACjB,QAAQ,EAAE,gBAAgB,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,cAAc,OAAK,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,GAAG,CACjD,CACF,CACC,CACR,CACJ,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*--------------------------------------------------------------------------------------------*/\nimport * as React from \"react\";\n\nimport { RelativePosition } from \"@itwin/appui-abstract\";\nimport { OutsideClickEvent, Popup, useOnOutsideClick, WebFontIcon } from \"@itwin/core-react\";\nimport { SubLayersPanel, SubLayersPanelProps } from \"./SubLayersTree\";\nimport { MapLayersUI } from \"../../mapLayers\";\nimport { Button } from \"@itwin/itwinui-react\";\n\n// cSpell:ignore droppable Sublayer\n\n/** @internal */\n\nexport type SubLayersPopupButtonProps = SubLayersPanelProps;\n\n/** @internal */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function SubLayersPopupButton(props: 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 {...props} width={390} height={350}/>\n          </div>\n        </div>\n      </Popup >\n    </>\n  );\n}\n"]}

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

@@ -1,4 +1,5 @@
 import { MapSubLayerProps, SubLayerId } from "@itwin/core-common";
+import { SubLayersTreeExpandMode } from "./SubLayersDataProvider";
 import "./SubLayersTree.scss";
 export declare type OnSubLayerStateChangeType = (subLayerId: SubLayerId, isSelected: boolean) => void;
 export interface SubLayersPanelProps extends Omit<SubLayersTreeProps, "subLayers"> {
@@ -6,9 +7,13 @@ export interface SubLayersPanelProps extends Omit<SubLayersTreeProps, "subLayers
 }
 export declare function SubLayersPanel(props: SubLayersPanelProps): JSX.Element;
 export interface SubLayersTreeProps {
+    checkboxStyle: "standard" | "eye";
+    expandMode: SubLayersTreeExpandMode;
     subLayers: MapSubLayerProps[];
     singleVisibleSubLayer?: boolean;
     onSubLayerStateChange?: OnSubLayerStateChangeType;
+    height?: number;
+    width?: number;
 }
 /**
  * Tree Control that displays sub-layer hierarchy

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

@@ -1 +1 @@
-{"version":3,"file":"SubLayersTree.d.ts","sourceRoot":"","sources":["../../../../src/ui/widget/SubLayersTree.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAKlE,OAAO,sBAAsB,CAAC;AAgE9B,oBAAY,yBAAyB,GAAG,CAAC,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;AAC9F,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,WAAW,CAAC;IAChF,SAAS,CAAC,EAAE,gBAAgB,EAAE,CAAC;CAChC;AAGD,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eAWxD;AAED,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,gBAAgB,EAAE,CAAC;IAC9B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,qBAAqB,CAAC,EAAE,yBAAyB,CAAC;CACnD;AACD;;;GAGG;AAEH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eAiFtD"}
+{"version":3,"file":"SubLayersTree.d.ts","sourceRoot":"","sources":["../../../../src/ui/widget/SubLayersTree.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAIlE,OAAO,EAAyB,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AACzF,OAAO,sBAAsB,CAAC;AAsB9B,oBAAY,yBAAyB,GAAG,CAAC,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;AAC9F,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,WAAW,CAAC;IAChF,SAAS,CAAC,EAAE,gBAAgB,EAAE,CAAC;CAChC;AAGD,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eAWxD;AAED,MAAM,WAAW,kBAAkB;IACjC,aAAa,EAAE,UAAU,GAAG,KAAK,CAAC;IAClC,UAAU,EAAE,uBAAuB,CAAC;IACpC,SAAS,EAAE,gBAAgB,EAAE,CAAC;IAC9B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,qBAAqB,CAAC,EAAE,yBAAyB,CAAC;IAClD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;GAGG;AAEH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eAqFtD"}

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

@@ -4,41 +4,12 @@
 *--------------------------------------------------------------------------------------------*/
 import { PropertyValueFormat } from "@itwin/appui-abstract";
 import { ControlledTree, SelectionMode, TreeEventHandler, TreeImageLoader, TreeModelSource, TreeNodeLoader, TreeNodeRenderer, TreeRenderer, useTreeModel, } from "@itwin/components-react";
-import { CheckBoxState, ImageCheckBox, useDisposable, WebFontIcon } from "@itwin/core-react";
+import { CheckBoxState, ImageCheckBox, ResizableContainerObserver, useDisposable, WebFontIcon } from "@itwin/core-react";
 import { Button, Input } from "@itwin/itwinui-react";
 import * as React from "react";
 import { SubLayersDataProvider } from "./SubLayersDataProvider";
 import "./SubLayersTree.scss";
 import { MapLayersUI } from "../../mapLayers";
-const getWindow = () => {
-    return typeof window === "undefined" ? undefined : window;
-};
-const useResizeObserver = (onResize) => {
-    const resizeObserver = React.useRef();
-    const elementRef = React.useCallback((element) => {
-        if (!getWindow()?.ResizeObserver) {
-            return;
-        }
-        resizeObserver.current?.disconnect();
-        if (element) {
-            resizeObserver.current = new ResizeObserver(([{ contentRect }]) => onResize(contentRect));
-            resizeObserver.current?.observe(element);
-        }
-    }, [onResize]);
-    return [elementRef, resizeObserver.current];
-};
-/** Mimic processing of `react-resize-detector` to return width and height.
- * @internal
- */
-function useResizeDetector() {
-    const [width, setWidth] = React.useState();
-    const [height, setHeight] = React.useState();
-    const [ref] = useResizeObserver(React.useCallback((size) => {
-        setWidth(size.width);
-        setHeight(size.height);
-    }, []));
-    return { width, height, ref };
-}
 // eslint-disable-next-line @typescript-eslint/naming-convention
 function Toolbar(props) {
     return (React.createElement("div", { className: "map-manager-sublayer-tree-toolbar" },
@@ -62,14 +33,17 @@ export function SubLayersPanel(props) {
  */
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export function SubLayersTree(props) {
+    const [width, setWidth] = React.useState(props.width);
+    const [height, setHeight] = React.useState(props.height);
     const [placeholderLabel] = React.useState(MapLayersUI.localization.getLocalizedString("mapLayers:SubLayers.SearchPlaceholder"));
+    const [noResults] = React.useState(MapLayersUI.localization.getLocalizedString("mapLayers:SubLayers.NoResults"));
     const [allOnLabel] = React.useState(MapLayersUI.localization.getLocalizedString("mapLayers:SubLayers.AllOn"));
     const [allOffLabel] = React.useState(MapLayersUI.localization.getLocalizedString("mapLayers:SubLayers.AllOff"));
     const [subLayers, setSubLayers] = React.useState(props.subLayers);
     const [layerFilterString, setLayerFilterString] = React.useState("");
     // create data provider to get some nodes to show in tree
     // `React.useMemo' is used avoid creating new object on each render cycle
-    const dataProvider = React.useMemo(() => new SubLayersDataProvider(subLayers), [subLayers]);
+    const dataProvider = React.useMemo(() => new SubLayersDataProvider(subLayers, props.expandMode), [subLayers, props.expandMode]);
     const { modelSource, nodeLoader, nodeHighlightingProps, } = useTreeFiltering(dataProvider, layerFilterString);
     // create custom event handler. It handles all tree event same as `TreeEventHandler` but additionally
     // it selects/deselects node when checkbox is checked/unchecked and vice versa.
@@ -93,16 +67,18 @@ export function SubLayersTree(props) {
     const handleFilterTextChanged = React.useCallback((event) => {
         setLayerFilterString(event.target.value);
     }, []);
-    const { width, height, ref: containerRef } = useResizeDetector();
     return React.createElement(React.Fragment, null,
         React.createElement("div", { className: "map-manager-sublayer-tree" },
-            React.createElement(Toolbar, { searchField: React.createElement(Input, { type: "text", className: "map-manager-source-list-filter", placeholder: placeholderLabel, value: layerFilterString, onChange: handleFilterTextChanged, size: "small" }) }, props.singleVisibleSubLayer ? undefined : [
+            React.createElement(Toolbar, { searchField: React.createElement(Input, { type: "text", className: "map-manager-sublayer-tree-searchbox", placeholder: placeholderLabel, value: layerFilterString, onChange: handleFilterTextChanged, size: "small" }) }, props.singleVisibleSubLayer ? undefined : [
                 React.createElement(Button, { size: "small", styleType: "borderless", key: "show-all-btn", title: allOnLabel, onClick: async () => changeAll(true) },
-                    React.createElement(WebFontIcon, { iconName: "icon-visibility" })),
+                    React.createElement(WebFontIcon, { iconName: props.checkboxStyle === "eye" ? "icon-visibility" : "icon-checkbox-select" })),
                 React.createElement(Button, { size: "small", styleType: "borderless", key: "hide-all-btn", title: allOffLabel, onClick: async () => changeAll(false) },
-                    React.createElement(WebFontIcon, { iconName: "icon-visibility-hide-2" })),
+                    React.createElement(WebFontIcon, { iconName: props.checkboxStyle === "eye" ? "icon-visibility-hide-2" : "icon-checkbox-deselect" })),
             ]),
-            React.createElement("div", { ref: containerRef, className: "map-manager-sublayer-tree-content" }, width !== undefined && height !== undefined && React.createElement(ControlledTree, { nodeLoader: nodeLoader, selectionMode: SelectionMode.None, eventsHandler: eventHandler, model: treeModel, treeRenderer: nodeWithEyeCheckboxTreeRenderer, nodeHighlightingProps: nodeHighlightingProps, width: width, height: height }))));
+            React.createElement("div", { className: "map-manager-sublayer-tree-content" },
+                (props.width === undefined && props.height === undefined) && React.createElement(ResizableContainerObserver, { onResize: (w, h) => { setWidth(w); setHeight(h); } }),
+                (width !== undefined && height !== undefined)
+                    && React.createElement(ControlledTree, { nodeLoader: nodeLoader, selectionMode: SelectionMode.None, eventsHandler: eventHandler, model: treeModel, treeRenderer: props.checkboxStyle === "eye" ? nodeWithEyeCheckboxTreeRenderer : undefined, nodeHighlightingProps: nodeHighlightingProps, width: width, height: height, noDataRenderer: () => (React.createElement("p", { className: "components-controlledTree-errorMessage" }, noResults)) }))));
 }
 /** TreeEventHandler derived class that handler processing changes to subLayer visibility */
 class SubLayerCheckboxHandler extends TreeEventHandler {
@@ -220,7 +196,7 @@ class SubLayerCheckboxHandler extends TreeEventHandler {
                     }
                     // Update sublayer object, otherwise state would get out of sync with DisplayStyle each time the TreeView is re-rendered
                     this._subLayers?.forEach((curSubLayer) => {
-                        if (curSubLayer.id) {
+                        if (curSubLayer.id !== undefined) {
                             if (curSubLayer.id === subLayerId)
                                 curSubLayer.visible = isSelected;
                             else if (prevVisibleSubLayers.includes(curSubLayer.id))

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

@@ -1 +1 @@
-{"version":3,"file":"SubLayersTree.js","sourceRoot":"","sources":["../../../../src/ui/widget/SubLayersTree.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 { PropertyValueFormat } from \"@itwin/appui-abstract\";\nimport {\n  AbstractTreeNodeLoaderWithProvider, ControlledTree, DelayLoadedTreeNodeItem, HighlightableTreeProps, ITreeDataProvider,\n  MutableTreeModel, MutableTreeModelNode, SelectionMode, TreeCheckboxStateChangeEventArgs, TreeDataProvider,\n  TreeEventHandler, TreeImageLoader, TreeModel, TreeModelChanges, TreeModelSource, TreeNodeItem, TreeNodeLoader,\n  TreeNodeRenderer, TreeNodeRendererProps, TreeRenderer, TreeRendererProps, useTreeModel,\n} from \"@itwin/components-react\";\nimport { MapSubLayerProps, SubLayerId } from \"@itwin/core-common\";\nimport { CheckBoxState, ImageCheckBox, NodeCheckboxRenderProps, useDisposable, WebFontIcon } from \"@itwin/core-react\";\nimport { Button, Input } from \"@itwin/itwinui-react\";\nimport * as React from \"react\";\nimport { SubLayersDataProvider } from \"./SubLayersDataProvider\";\nimport \"./SubLayersTree.scss\";\nimport { MapLayersUI } from \"../../mapLayers\";\n\nconst getWindow = () => {\n  return typeof window === \"undefined\" ? undefined : window;\n};\n\nconst useResizeObserver = <T extends HTMLElement>(\n  onResize: (size: DOMRectReadOnly) => void,\n) => {\n  const resizeObserver = React.useRef<ResizeObserver>();\n\n  const elementRef = React.useCallback(\n    (element: T | null) => {\n      if (!getWindow()?.ResizeObserver) {\n        return;\n      }\n\n      resizeObserver.current?.disconnect();\n      if (element) {\n        resizeObserver.current = new ResizeObserver(([{ contentRect }]) =>\n          onResize(contentRect),\n        );\n        resizeObserver.current?.observe(element);\n      }\n    },\n    [onResize],\n  );\n\n  return [elementRef, resizeObserver.current] as const;\n};\n\n/** Mimic processing of `react-resize-detector` to return width and height.\n * @internal\n */\nfunction useResizeDetector(): { width: number | undefined, height: number | undefined, ref: React.Ref<HTMLDivElement> } {\n  const [width, setWidth] = React.useState<number>();\n  const [height, setHeight] = React.useState<number>();\n  const [ref] = useResizeObserver(React.useCallback((size: DOMRectReadOnly) => {\n    setWidth(size.width);\n    setHeight(size.height);\n  }, []));\n  return { width, height, ref };\n}\n\ninterface ToolbarProps {\n  searchField?: React.ReactNode;\n  children?: React.ReactNode[];\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction Toolbar(props: ToolbarProps) {\n  return (\n    <div className=\"map-manager-sublayer-tree-toolbar\">\n      <div className=\"tree-toolbar-action-buttons\">\n        {props.children}\n      </div>\n      {props.searchField && <div className=\"tree-toolbar-searchbox\">\n        {props.searchField}\n      </div>}\n    </div>\n  );\n}\n\nexport type OnSubLayerStateChangeType = (subLayerId: SubLayerId, isSelected: boolean) => void;\nexport interface SubLayersPanelProps extends Omit<SubLayersTreeProps, \"subLayers\"> {\n  subLayers?: MapSubLayerProps[];\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function SubLayersPanel(props: SubLayersPanelProps) {\n  const [noneAvailableLabel] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:SubLayers.NoSubLayers\"));\n  if (undefined === props.subLayers || 0 === props.subLayers.length) {\n    return <div className=\"map-manager-sublayer-panel\">\n      <div>{noneAvailableLabel}</div>\n    </div>;\n  } else {\n    return (\n      <SubLayersTree subLayers={props.subLayers} {...props} />\n    );\n  }\n}\n\nexport interface SubLayersTreeProps {\n  subLayers: MapSubLayerProps[];\n  singleVisibleSubLayer?: boolean;\n  onSubLayerStateChange?: OnSubLayerStateChangeType;\n}\n/**\n * Tree Control that displays sub-layer hierarchy\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function SubLayersTree(props: SubLayersTreeProps) {\n\n  const [placeholderLabel] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:SubLayers.SearchPlaceholder\"));\n  const [allOnLabel] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:SubLayers.AllOn\"));\n  const [allOffLabel] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:SubLayers.AllOff\"));\n  const [subLayers, setSubLayers] = React.useState(props.subLayers);\n  const [layerFilterString, setLayerFilterString] = React.useState<string>(\"\");\n\n  // create data provider to get some nodes to show in tree\n  // `React.useMemo' is used avoid creating new object on each render cycle\n  const dataProvider = React.useMemo(() => new SubLayersDataProvider(subLayers), [subLayers]);\n\n  const {\n    modelSource,\n    nodeLoader,\n    nodeHighlightingProps,\n  } = useTreeFiltering(dataProvider, layerFilterString);\n\n  // create custom event handler. It handles all tree event same as `TreeEventHandler` but additionally\n  // it selects/deselects node when checkbox is checked/unchecked and vice versa.\n  // `useDisposable` takes care of disposing old event handler when new is created in case 'nodeLoader' has changed\n  // `React.useCallback` is used to avoid creating new callback that creates handler on each render\n  const eventHandler = useDisposable(React.useCallback(() => new SubLayerCheckboxHandler(subLayers, props.singleVisibleSubLayer ?? false, nodeLoader, props.onSubLayerStateChange), [nodeLoader, subLayers, props.onSubLayerStateChange, props.singleVisibleSubLayer]));\n\n  // Get an immutable tree model from the model source. The model is regenerated every time the model source\n  // emits the `onModelChanged` event.\n  const treeModel = useTreeModel(modelSource);\n  const changeAll = React.useCallback(async (visible: boolean) => {\n    const tmpSubLayers = [...subLayers];    // deep copy to trigger state change\n    if (tmpSubLayers) {\n      tmpSubLayers?.forEach((subLayer: MapSubLayerProps) => {\n        subLayer.visible = visible;\n      });\n\n      setSubLayers(tmpSubLayers);\n    }\n\n    if (props.onSubLayerStateChange)\n      props.onSubLayerStateChange(-1, visible);\n  }, [subLayers, props]);\n\n  const handleFilterTextChanged = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n    setLayerFilterString(event.target.value);\n  }, []);\n\n  const { width, height, ref: containerRef } = useResizeDetector();\n\n  return <>\n    <div className=\"map-manager-sublayer-tree\">\n      <Toolbar\n        searchField={\n          <Input type=\"text\" className=\"map-manager-source-list-filter\"\n            placeholder={placeholderLabel}\n            value={layerFilterString}\n            onChange={handleFilterTextChanged}\n            size=\"small\" />\n        }\n      >\n        {props.singleVisibleSubLayer ? undefined : [\n          <Button size=\"small\" styleType=\"borderless\" key=\"show-all-btn\" title={allOnLabel} onClick={async () => changeAll(true)}>\n            <WebFontIcon iconName=\"icon-visibility\" />\n          </Button>,\n          <Button size=\"small\" styleType=\"borderless\" key=\"hide-all-btn\" title={allOffLabel} onClick={async () => changeAll(false)}>\n            <WebFontIcon iconName=\"icon-visibility-hide-2\" />\n          </Button>,\n        ]}\n      </Toolbar>\n      <div ref={containerRef} className=\"map-manager-sublayer-tree-content\">\n        {width !== undefined && height !== undefined && <ControlledTree\n          nodeLoader={nodeLoader}\n          selectionMode={SelectionMode.None}\n          eventsHandler={eventHandler}\n          model={treeModel}\n          treeRenderer={nodeWithEyeCheckboxTreeRenderer}\n          nodeHighlightingProps={nodeHighlightingProps}\n          width={width}\n          height={height}\n        />}\n      </div>\n    </div >\n  </>;\n}\n\n/** TreeEventHandler derived class that handler processing changes to subLayer visibility */\nclass SubLayerCheckboxHandler extends TreeEventHandler {\n  private _removeModelChangedListener: () => void;\n  private _onSubLayerStateChange?: OnSubLayerStateChangeType;\n  private _subLayers: MapSubLayerProps[];\n  private _singleVisibleSubLayer?: boolean;\n\n  constructor(subLayers: MapSubLayerProps[], singleVisibleSubLayer: boolean, nodeLoader: AbstractTreeNodeLoaderWithProvider<TreeDataProvider>, onSubLayerStateChange?: OnSubLayerStateChangeType) {\n    super({ modelSource: nodeLoader.modelSource, nodeLoader, collapsedChildrenDisposalEnabled: true });\n    this._subLayers = subLayers;\n    this._singleVisibleSubLayer = singleVisibleSubLayer;\n    this._onSubLayerStateChange = onSubLayerStateChange;\n    this._removeModelChangedListener = this.modelSource.onModelChanged.addListener(this.onModelChanged);\n  }\n\n  public override dispose() {\n    this._removeModelChangedListener();\n    super.dispose();\n  }\n\n  // Cascade state\n  // Children on unnamed groups must get disabled in the tree view, because\n  // they get rendered anyway.\n  private cascadeStateToAllChildren(model: MutableTreeModel, parentId?: string) {\n    const children = model.getChildren(parentId);\n    if (children === undefined)\n      return;\n\n    for (const childID of children) {\n      const childNode = childID ? model.getNode(childID) : undefined;\n\n      if (childNode)\n        this.syncNodeStateWithParent(model, childNode);\n\n      // Drill down the tree.\n      this.cascadeStateToAllChildren(model, childID);\n    }\n  }\n\n  private applyMutualExclusiveState(model: MutableTreeModel, nodeId: string) {\n    const changedNode = model.getNode(nodeId);\n    if (changedNode?.checkbox.state === CheckBoxState.Off)\n      return;\n\n    for (const node of model.iterateTreeModelNodes()) {\n      if (node.id === changedNode?.id)\n        continue;\n\n      if (node && node.checkbox.state === CheckBoxState.On)\n        node.checkbox.state = CheckBoxState.Off;\n    }\n  }\n\n  //-----------------------------------------------------------------------\n  // Listen to model changes\n  //------------------------------------------------------------------------\n  // This is required because nodes are delay loaded in the model until\n  // they are made visible (i.e. parent node is expanded).  So even though\n  // you might have created nodes in the data provided with a proper\n  // initial state, by the time it gets loaded, their state might have became\n  // out of date in the TreeView's active model.  So whenever a node\n  // is added, when must confirm its state matches the current model\n  // (i.e. state of their parent.)\n  public onModelChanged = (args: [TreeModel, TreeModelChanges]) => {\n    this.modelSource.modifyModel((model) => {\n      const addedNodes = args[1].addedNodeIds.map((id) => model.getNode(id));\n      addedNodes.forEach((node) => {\n        if (!node)\n          return;\n\n        this.syncNodeStateWithParent(model, node);\n      });\n    });\n  };\n\n  private 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  // Ensure the state of changed node matches the state of its parent.\n  private syncNodeStateWithParent(model: MutableTreeModel, changedNode: MutableTreeModelNode) {\n    // Lookup node parent. If non exists, I assume thats the root node,\n    // and it must have a proper initial state.\n    const parentNode = changedNode.parentId ? model.getNode(changedNode.parentId) : undefined;\n    if (!parentNode)\n      return;\n\n    if (!changedNode.checkbox)\n      return; // don't see why this would happen, but if there is no checkbox, we cant do much here.\n\n    const parentLayerId = undefined !== parentNode.item.extendedData?.subLayerId ? parentNode.item.extendedData?.subLayerId : parentNode.item.id;\n    const parentSubLayer = this._subLayers?.find((subLayer) => subLayer.id === parentLayerId);\n\n    // If parent is disabled, then children must be too.\n    // Also, Non-visible unnamed group must have their children disabled (unamed groups have visibility inherence)\n    if (parentNode.checkbox.isDisabled || (SubLayerCheckboxHandler.isUnnamedGroup(parentSubLayer) && parentNode.checkbox.state === CheckBoxState.Off)) {\n      changedNode.checkbox.isDisabled = true;\n      changedNode.checkbox.state = CheckBoxState.Off;\n    } else {\n      // Visibility state from StyleMapLayerSettings applies\n      const subLayerId = undefined !== changedNode.item.extendedData?.subLayerId ? changedNode.item.extendedData?.subLayerId : changedNode.item.id;\n      const foundSubLayer = this._subLayers?.find((subLayer) => subLayer.id === subLayerId);\n      changedNode.checkbox.isDisabled = false;\n      changedNode.checkbox.state = foundSubLayer?.visible ? CheckBoxState.On : CheckBoxState.Off;\n    }\n  }\n\n  /** Changes nodes checkboxes states until event is handled or handler is disposed */\n  public override onCheckboxStateChanged({ stateChanges }: TreeCheckboxStateChangeEventArgs) {\n    // call base checkbox handling\n    const baseHandling = super.onCheckboxStateChanged({ stateChanges });\n\n    // subscribe to checkbox state changes to new checkbox states and do some additional work with them\n    const selectionHandling = stateChanges.subscribe({\n      next: (changes) => {\n        changes.forEach((change) => {\n          const isSelected = (change.newState === CheckBoxState.On);\n          const subLayerId = undefined !== change.nodeItem.extendedData?.subLayerId ? change.nodeItem.extendedData?.subLayerId : change.nodeItem.id;\n\n          // Get the previously visible node if we are in 'singleVisibleSubLayer' node\n          let prevVisibleSubLayers: SubLayerId[] = [];\n          if (this._singleVisibleSubLayer) {\n            prevVisibleSubLayers = this._subLayers.reduce((filtered: SubLayerId[], subLayer) => {\n              if (subLayer.visible && subLayer.id !== undefined)\n                filtered.push(subLayer.id);\n              return filtered;\n            }, []);\n          }\n\n          // Inform caller that subLayer state is going to change (i.e. update display style state)\n          if (this._onSubLayerStateChange) {\n            for (const slId of prevVisibleSubLayers)\n              this._onSubLayerStateChange(slId, false);\n\n            this._onSubLayerStateChange(subLayerId, isSelected);\n          }\n\n          // Update sublayer object, otherwise state would get out of sync with DisplayStyle each time the TreeView is re-rendered\n          this._subLayers?.forEach((curSubLayer) => {\n            if (curSubLayer.id) {\n              if (curSubLayer.id === subLayerId)\n                curSubLayer.visible = isSelected;\n              else if  (prevVisibleSubLayers.includes(curSubLayer.id))\n                curSubLayer.visible = false;\n            }\n          });\n\n          // Cascade state\n          this.modelSource.modifyModel((model) => {\n            if (this._singleVisibleSubLayer)\n              this.applyMutualExclusiveState(model, change.nodeItem.id);\n            this.cascadeStateToAllChildren(model, change.nodeItem.id);\n          });\n        });\n      },\n    });\n    // stop handling selection when checkboxes handling is stopped\n    baseHandling?.add(selectionHandling);\n    return baseHandling;\n  }\n}\n\n/** Custom checkbox renderer that renders checkbox as an eye */\nconst eyeCheckboxRenderer = (props: NodeCheckboxRenderProps) => (\n  <ImageCheckBox\n    checked={props.checked}\n    disabled={props.disabled}\n    imageOn=\"icon-visibility\"\n    imageOff=\"icon-visibility-hide-2\"\n    onClick={props.onChange}\n    tooltip={props.title}\n  />\n);\n\n/** Custom node renderer. It uses default 'TreeNodeRenderer' but overrides default checkbox renderer to render checkbox as an eye */\nconst imageLoader = new TreeImageLoader();\nconst nodeWithEyeCheckboxRenderer = (props: TreeNodeRendererProps) => (\n  <TreeNodeRenderer\n    {...props}\n    checkboxRenderer={eyeCheckboxRenderer}\n    imageLoader={imageLoader}\n  />\n);\n\n/** Custom tree renderer. It uses default `TreeRenderer` but overrides default node renderer to render node with custom checkbox */\nconst nodeWithEyeCheckboxTreeRenderer = (props: TreeRendererProps) => (\n  <TreeRenderer\n    {...props}\n    nodeRenderer={nodeWithEyeCheckboxRenderer}\n  />\n);\n\nfunction useTreeFiltering(\n  dataProvider: ITreeDataProvider,\n  filter: string,\n) {\n  const nodeLoader = useFilteredProvider(dataProvider, filter);\n  const nodeHighlightingProps = useNodeHighlightingProps(filter);\n  return {\n    nodeLoader,\n    modelSource: nodeLoader.modelSource,\n    nodeHighlightingProps,\n  };\n}\n\nfunction useFilteredProvider(\n  dataProvider: ITreeDataProvider,\n  filter: string,\n) {\n  const filteredProvider = React.useMemo(() => {\n    return new FilteredTreeDataProvider(dataProvider, filter);\n  }, [dataProvider, filter]);\n\n  const nodeLoader = React.useMemo(() => {\n    return new TreeNodeLoader(filteredProvider, new TreeModelSource());\n  }, [filteredProvider]);\n\n  return nodeLoader;\n}\n\nfunction useNodeHighlightingProps(\n  filter: string,\n) {\n  const [nodeHighlightingProps, setNodeHighlightingProps] = React.useState<HighlightableTreeProps>();\n\n  React.useEffect(() => {\n    if (filter === \"\") {\n      setNodeHighlightingProps(undefined);\n      return;\n    }\n    setNodeHighlightingProps({\n      searchText: filter,\n      activeMatch: undefined,\n    });\n  }, [filter]);\n\n  return nodeHighlightingProps;\n}\n\nclass FullTreeHierarchy {\n  private _dataProvider: ITreeDataProvider;\n  private _hierarchy = new Map<string | undefined, DelayLoadedTreeNodeItem[]>();\n  private _init: Promise<void>;\n\n  public constructor(dataProvider: ITreeDataProvider) {\n    this._dataProvider = dataProvider;\n\n    this._init = (async () => {\n      await this.initNode();\n    })();\n  }\n\n  private async initNode(parent?: TreeNodeItem) {\n    const nodes = await this._dataProvider.getNodes(parent);\n    this._hierarchy.set(parent?.id, nodes);\n    for (const node of nodes) {\n      await this.initNode(node);\n    }\n  }\n\n  public async getHierarchy() {\n    await this._init;\n    return this._hierarchy;\n  }\n}\n\nclass FilteredTreeHierarchy {\n  private _fullHierarchy: FullTreeHierarchy;\n  private _filter: string;\n  private _filtered = new Map<string | undefined, DelayLoadedTreeNodeItem[]>();\n  private _init: Promise<void>;\n\n  public constructor(dataProvider: ITreeDataProvider, filter: string) {\n    this._fullHierarchy = new FullTreeHierarchy(dataProvider);\n    this._filter = filter;\n\n    this._init = (async () => {\n      await this.init();\n    })();\n  }\n\n  private async init() {\n    const hierarchy = await this._fullHierarchy.getHierarchy();\n    if (this._filter === \"\") {\n      this._filtered = hierarchy;\n      return;\n    }\n    this.filterNodes(hierarchy);\n  }\n\n  /** Initializes `this._filtered` field. Returns a node if it matches a filter. */\n  private filterNodes(hierarchy: Map<string | undefined, DelayLoadedTreeNodeItem[]>, current?: DelayLoadedTreeNodeItem): DelayLoadedTreeNodeItem | undefined {\n    const matches = current ? this.matchesFilter(current) : false;\n    const children = hierarchy.get(current?.id);\n    if (!children)\n      return matches ? current : undefined;\n\n    const matchedChildren = new Array<DelayLoadedTreeNodeItem>();\n    for (const child of children) {\n      const matchedChild = this.filterNodes(hierarchy, child);\n      matchedChild && matchedChildren.push(matchedChild);\n    }\n\n    const hasChildren = matchedChildren.length > 0;\n    const included = matches || hasChildren;\n    let filtered: DelayLoadedTreeNodeItem | undefined;\n    if (included) {\n      this._filtered.set(current?.id, matchedChildren);\n\n      // Return a modified copy of current node (to persist initial hierarchy when filter is cleared).\n      if (current) {\n        filtered = {\n          ...current,\n          hasChildren,\n          autoExpand: hasChildren ? true : current.autoExpand,\n        };\n      }\n    }\n    return filtered;\n  }\n\n  private matchesFilter(node: TreeNodeItem) {\n    if (node.label.value.valueFormat !== PropertyValueFormat.Primitive)\n      return false;\n\n    const value = node.label.value.displayValue?.toLowerCase();\n    if (!value)\n      return false;\n    return value.includes(this._filter.toLowerCase());\n  }\n\n  public async getHierarchy() {\n    await this._init;\n    return this._filtered;\n  }\n}\n\nclass FilteredTreeDataProvider implements ITreeDataProvider {\n  private _hierarchy: FilteredTreeHierarchy;\n\n  public constructor(\n    parentDataProvider: ITreeDataProvider,\n    filter: string,\n  ) {\n    this._hierarchy = new FilteredTreeHierarchy(parentDataProvider, filter);\n  }\n\n  public async getNodes(parent?: TreeNodeItem) {\n    const hierarchy = await this._hierarchy.getHierarchy();\n    const nodes = hierarchy.get(parent?.id);\n    return nodes || [];\n  }\n\n  public async getNodesCount(parent?: TreeNodeItem) {\n    const hierarchy = await this._hierarchy.getHierarchy();\n    const nodes = hierarchy.get(parent?.id);\n    return nodes?.length || 0;\n  }\n}\n"]}
+{"version":3,"file":"SubLayersTree.js","sourceRoot":"","sources":["../../../../src/ui/widget/SubLayersTree.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 { PropertyValueFormat } from \"@itwin/appui-abstract\";\nimport {\n  AbstractTreeNodeLoaderWithProvider, ControlledTree, DelayLoadedTreeNodeItem, HighlightableTreeProps, ITreeDataProvider,\n  MutableTreeModel, MutableTreeModelNode, SelectionMode, TreeCheckboxStateChangeEventArgs, TreeDataProvider,\n  TreeEventHandler, TreeImageLoader, TreeModel, TreeModelChanges, TreeModelSource, TreeNodeItem, TreeNodeLoader,\n  TreeNodeRenderer, TreeNodeRendererProps, TreeRenderer, TreeRendererProps, useTreeModel,\n} from \"@itwin/components-react\";\nimport { MapSubLayerProps, SubLayerId } from \"@itwin/core-common\";\nimport { CheckBoxState, ImageCheckBox, NodeCheckboxRenderProps, ResizableContainerObserver, useDisposable, WebFontIcon } from \"@itwin/core-react\";\nimport { Button, Input } from \"@itwin/itwinui-react\";\nimport * as React from \"react\";\nimport { SubLayersDataProvider, SubLayersTreeExpandMode } from \"./SubLayersDataProvider\";\nimport \"./SubLayersTree.scss\";\nimport { MapLayersUI } from \"../../mapLayers\";\n\ninterface ToolbarProps {\n  searchField?: React.ReactNode;\n  children?: React.ReactNode[];\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nfunction Toolbar(props: ToolbarProps) {\n  return (\n    <div className=\"map-manager-sublayer-tree-toolbar\">\n      <div className=\"tree-toolbar-action-buttons\">\n        {props.children}\n      </div>\n      {props.searchField && <div className=\"tree-toolbar-searchbox\">\n        {props.searchField}\n      </div>}\n    </div>\n  );\n}\n\nexport type OnSubLayerStateChangeType = (subLayerId: SubLayerId, isSelected: boolean) => void;\nexport interface SubLayersPanelProps extends Omit<SubLayersTreeProps, \"subLayers\"> {\n  subLayers?: MapSubLayerProps[];\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function SubLayersPanel(props: SubLayersPanelProps) {\n  const [noneAvailableLabel] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:SubLayers.NoSubLayers\"));\n  if (undefined === props.subLayers || 0 === props.subLayers.length) {\n    return <div className=\"map-manager-sublayer-panel\">\n      <div>{noneAvailableLabel}</div>\n    </div>;\n  } else {\n    return (\n      <SubLayersTree subLayers={props.subLayers} {...props} />\n    );\n  }\n}\n\nexport interface SubLayersTreeProps {\n  checkboxStyle: \"standard\" | \"eye\";\n  expandMode: SubLayersTreeExpandMode;\n  subLayers: MapSubLayerProps[];\n  singleVisibleSubLayer?: boolean;\n  onSubLayerStateChange?: OnSubLayerStateChangeType;\n  height?: number;\n  width?: number;\n}\n\n/**\n * Tree Control that displays sub-layer hierarchy\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function SubLayersTree(props: SubLayersTreeProps) {\n  const [width, setWidth] = React.useState<number|undefined>(props.width);\n  const [height, setHeight] = React.useState<number|undefined>(props.height);\n\n  const [placeholderLabel] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:SubLayers.SearchPlaceholder\"));\n  const [noResults] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:SubLayers.NoResults\"));\n  const [allOnLabel] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:SubLayers.AllOn\"));\n  const [allOffLabel] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:SubLayers.AllOff\"));\n  const [subLayers, setSubLayers] = React.useState(props.subLayers);\n  const [layerFilterString, setLayerFilterString] = React.useState<string>(\"\");\n\n  // create data provider to get some nodes to show in tree\n  // `React.useMemo' is used avoid creating new object on each render cycle\n  const dataProvider = React.useMemo(() => new SubLayersDataProvider(subLayers, props.expandMode), [subLayers, props.expandMode]);\n\n  const {\n    modelSource,\n    nodeLoader,\n    nodeHighlightingProps,\n  } = useTreeFiltering(dataProvider, layerFilterString);\n\n  // create custom event handler. It handles all tree event same as `TreeEventHandler` but additionally\n  // it selects/deselects node when checkbox is checked/unchecked and vice versa.\n  // `useDisposable` takes care of disposing old event handler when new is created in case 'nodeLoader' has changed\n  // `React.useCallback` is used to avoid creating new callback that creates handler on each render\n  const eventHandler = useDisposable(React.useCallback(() => new SubLayerCheckboxHandler(subLayers, props.singleVisibleSubLayer ?? false, nodeLoader, props.onSubLayerStateChange), [nodeLoader, subLayers, props.onSubLayerStateChange, props.singleVisibleSubLayer]));\n\n  // Get an immutable tree model from the model source. The model is regenerated every time the model source\n  // emits the `onModelChanged` event.\n  const treeModel = useTreeModel(modelSource);\n  const changeAll = React.useCallback(async (visible: boolean) => {\n    const tmpSubLayers = [...subLayers];    // deep copy to trigger state change\n    if (tmpSubLayers) {\n      tmpSubLayers?.forEach((subLayer: MapSubLayerProps) => {\n        subLayer.visible = visible;\n      });\n\n      setSubLayers(tmpSubLayers);\n    }\n\n    if (props.onSubLayerStateChange)\n      props.onSubLayerStateChange(-1, visible);\n  }, [subLayers, props]);\n\n  const handleFilterTextChanged = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n    setLayerFilterString(event.target.value);\n  }, []);\n\n  return <>\n    <div className=\"map-manager-sublayer-tree\">\n      <Toolbar\n        searchField={\n          <Input type=\"text\" className=\"map-manager-sublayer-tree-searchbox\"\n            placeholder={placeholderLabel}\n            value={layerFilterString}\n            onChange={handleFilterTextChanged}\n            size=\"small\" />\n        }\n      >\n        {props.singleVisibleSubLayer ? undefined : [\n          <Button size=\"small\" styleType=\"borderless\" key=\"show-all-btn\" title={allOnLabel} onClick={async () => changeAll(true)}>\n            <WebFontIcon iconName={props.checkboxStyle === \"eye\" ? \"icon-visibility\" : \"icon-checkbox-select\" } />\n          </Button>,\n          <Button size=\"small\" styleType=\"borderless\" key=\"hide-all-btn\" title={allOffLabel} onClick={async () => changeAll(false)}>\n            <WebFontIcon iconName={props.checkboxStyle === \"eye\" ? \"icon-visibility-hide-2\" : \"icon-checkbox-deselect\" } />\n          </Button>,\n        ]}\n      </Toolbar>\n      <div className=\"map-manager-sublayer-tree-content\" >\n        {(props.width === undefined && props.height === undefined) && <ResizableContainerObserver onResize={(w, h) => {setWidth(w); setHeight(h);} }/> }\n        {(width !== undefined && height !== undefined)\n        && <ControlledTree\n          nodeLoader={nodeLoader}\n          selectionMode={SelectionMode.None}\n          eventsHandler={eventHandler}\n          model={treeModel}\n          treeRenderer={props.checkboxStyle === \"eye\" ? nodeWithEyeCheckboxTreeRenderer : undefined}\n          nodeHighlightingProps={nodeHighlightingProps}\n          width={width}\n          height={height}\n          noDataRenderer={()=>(<p className=\"components-controlledTree-errorMessage\">{noResults}</p>)}\n        />}\n      </div>\n    </div >\n  </>;\n}\n\n/** TreeEventHandler derived class that handler processing changes to subLayer visibility */\nclass SubLayerCheckboxHandler extends TreeEventHandler {\n  private _removeModelChangedListener: () => void;\n  private _onSubLayerStateChange?: OnSubLayerStateChangeType;\n  private _subLayers: MapSubLayerProps[];\n  private _singleVisibleSubLayer?: boolean;\n\n  constructor(subLayers: MapSubLayerProps[], singleVisibleSubLayer: boolean, nodeLoader: AbstractTreeNodeLoaderWithProvider<TreeDataProvider>, onSubLayerStateChange?: OnSubLayerStateChangeType) {\n    super({ modelSource: nodeLoader.modelSource, nodeLoader, collapsedChildrenDisposalEnabled: true });\n    this._subLayers = subLayers;\n    this._singleVisibleSubLayer = singleVisibleSubLayer;\n    this._onSubLayerStateChange = onSubLayerStateChange;\n    this._removeModelChangedListener = this.modelSource.onModelChanged.addListener(this.onModelChanged);\n  }\n\n  public override dispose() {\n    this._removeModelChangedListener();\n    super.dispose();\n  }\n\n  // Cascade state\n  // Children on unnamed groups must get disabled in the tree view, because\n  // they get rendered anyway.\n  private cascadeStateToAllChildren(model: MutableTreeModel, parentId?: string) {\n    const children = model.getChildren(parentId);\n    if (children === undefined)\n      return;\n\n    for (const childID of children) {\n      const childNode = childID ? model.getNode(childID) : undefined;\n\n      if (childNode)\n        this.syncNodeStateWithParent(model, childNode);\n\n      // Drill down the tree.\n      this.cascadeStateToAllChildren(model, childID);\n    }\n  }\n\n  private applyMutualExclusiveState(model: MutableTreeModel, nodeId: string) {\n    const changedNode = model.getNode(nodeId);\n    if (changedNode?.checkbox.state === CheckBoxState.Off)\n      return;\n\n    for (const node of model.iterateTreeModelNodes()) {\n      if (node.id === changedNode?.id)\n        continue;\n\n      if (node && node.checkbox.state === CheckBoxState.On)\n        node.checkbox.state = CheckBoxState.Off;\n    }\n  }\n\n  //-----------------------------------------------------------------------\n  // Listen to model changes\n  //------------------------------------------------------------------------\n  // This is required because nodes are delay loaded in the model until\n  // they are made visible (i.e. parent node is expanded).  So even though\n  // you might have created nodes in the data provided with a proper\n  // initial state, by the time it gets loaded, their state might have became\n  // out of date in the TreeView's active model.  So whenever a node\n  // is added, when must confirm its state matches the current model\n  // (i.e. state of their parent.)\n  public onModelChanged = (args: [TreeModel, TreeModelChanges]) => {\n    this.modelSource.modifyModel((model) => {\n      const addedNodes = args[1].addedNodeIds.map((id) => model.getNode(id));\n      addedNodes.forEach((node) => {\n        if (!node)\n          return;\n\n        this.syncNodeStateWithParent(model, node);\n      });\n    });\n  };\n\n  private 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  // Ensure the state of changed node matches the state of its parent.\n  private syncNodeStateWithParent(model: MutableTreeModel, changedNode: MutableTreeModelNode) {\n    // Lookup node parent. If non exists, I assume thats the root node,\n    // and it must have a proper initial state.\n    const parentNode = changedNode.parentId ? model.getNode(changedNode.parentId) : undefined;\n    if (!parentNode)\n      return;\n\n    if (!changedNode.checkbox)\n      return; // don't see why this would happen, but if there is no checkbox, we cant do much here.\n\n    const parentLayerId = undefined !== parentNode.item.extendedData?.subLayerId ? parentNode.item.extendedData?.subLayerId : parentNode.item.id;\n    const parentSubLayer = this._subLayers?.find((subLayer) => subLayer.id === parentLayerId);\n\n    // If parent is disabled, then children must be too.\n    // Also, Non-visible unnamed group must have their children disabled (unamed groups have visibility inherence)\n    if (parentNode.checkbox.isDisabled || (SubLayerCheckboxHandler.isUnnamedGroup(parentSubLayer) && parentNode.checkbox.state === CheckBoxState.Off)) {\n      changedNode.checkbox.isDisabled = true;\n      changedNode.checkbox.state = CheckBoxState.Off;\n    } else {\n      // Visibility state from StyleMapLayerSettings applies\n      const subLayerId = undefined !== changedNode.item.extendedData?.subLayerId ? changedNode.item.extendedData?.subLayerId : changedNode.item.id;\n      const foundSubLayer = this._subLayers?.find((subLayer) => subLayer.id === subLayerId);\n      changedNode.checkbox.isDisabled = false;\n      changedNode.checkbox.state = foundSubLayer?.visible ? CheckBoxState.On : CheckBoxState.Off;\n    }\n  }\n\n  /** Changes nodes checkboxes states until event is handled or handler is disposed */\n  public override onCheckboxStateChanged({ stateChanges }: TreeCheckboxStateChangeEventArgs) {\n    // call base checkbox handling\n    const baseHandling = super.onCheckboxStateChanged({ stateChanges });\n\n    // subscribe to checkbox state changes to new checkbox states and do some additional work with them\n    const selectionHandling = stateChanges.subscribe({\n      next: (changes) => {\n        changes.forEach((change) => {\n          const isSelected = (change.newState === CheckBoxState.On);\n          const subLayerId = undefined !== change.nodeItem.extendedData?.subLayerId ? change.nodeItem.extendedData?.subLayerId : change.nodeItem.id;\n\n          // Get the previously visible node if we are in 'singleVisibleSubLayer' node\n          let prevVisibleSubLayers: SubLayerId[] = [];\n          if (this._singleVisibleSubLayer) {\n            prevVisibleSubLayers = this._subLayers.reduce((filtered: SubLayerId[], subLayer) => {\n              if (subLayer.visible && subLayer.id !== undefined)\n                filtered.push(subLayer.id);\n              return filtered;\n            }, []);\n          }\n\n          // Inform caller that subLayer state is going to change (i.e. update display style state)\n          if (this._onSubLayerStateChange) {\n            for (const slId of prevVisibleSubLayers)\n              this._onSubLayerStateChange(slId, false);\n\n            this._onSubLayerStateChange(subLayerId, isSelected);\n          }\n\n          // Update sublayer object, otherwise state would get out of sync with DisplayStyle each time the TreeView is re-rendered\n          this._subLayers?.forEach((curSubLayer) => {\n            if (curSubLayer.id !== undefined) {\n              if (curSubLayer.id === subLayerId)\n                curSubLayer.visible = isSelected;\n              else if  (prevVisibleSubLayers.includes(curSubLayer.id))\n                curSubLayer.visible = false;\n            }\n          });\n\n          // Cascade state\n          this.modelSource.modifyModel((model) => {\n            if (this._singleVisibleSubLayer)\n              this.applyMutualExclusiveState(model, change.nodeItem.id);\n            this.cascadeStateToAllChildren(model, change.nodeItem.id);\n          });\n        });\n      },\n    });\n    // stop handling selection when checkboxes handling is stopped\n    baseHandling?.add(selectionHandling);\n    return baseHandling;\n  }\n}\n\n/** Custom checkbox renderer that renders checkbox as an eye */\nconst eyeCheckboxRenderer = (props: NodeCheckboxRenderProps) => (\n  <ImageCheckBox\n    checked={props.checked}\n    disabled={props.disabled}\n    imageOn=\"icon-visibility\"\n    imageOff=\"icon-visibility-hide-2\"\n    onClick={props.onChange}\n    tooltip={props.title}\n  />\n);\n\n/** Custom node renderer. It uses default 'TreeNodeRenderer' but overrides default checkbox renderer to render checkbox as an eye */\nconst imageLoader = new TreeImageLoader();\nconst nodeWithEyeCheckboxRenderer = (props: TreeNodeRendererProps) => (\n  <TreeNodeRenderer\n    {...props}\n    checkboxRenderer={eyeCheckboxRenderer}\n    imageLoader={imageLoader}\n  />\n);\n\n/** Custom tree renderer. It uses default `TreeRenderer` but overrides default node renderer to render node with custom checkbox */\nconst nodeWithEyeCheckboxTreeRenderer = (props: TreeRendererProps) => (\n  <TreeRenderer\n    {...props}\n    nodeRenderer={nodeWithEyeCheckboxRenderer}\n  />\n);\n\nfunction useTreeFiltering(\n  dataProvider: ITreeDataProvider,\n  filter: string,\n) {\n  const nodeLoader = useFilteredProvider(dataProvider, filter);\n  const nodeHighlightingProps = useNodeHighlightingProps(filter);\n  return {\n    nodeLoader,\n    modelSource: nodeLoader.modelSource,\n    nodeHighlightingProps,\n  };\n}\n\nfunction useFilteredProvider(\n  dataProvider: ITreeDataProvider,\n  filter: string,\n) {\n  const filteredProvider = React.useMemo(() => {\n    return new FilteredTreeDataProvider(dataProvider, filter);\n  }, [dataProvider, filter]);\n\n  const nodeLoader = React.useMemo(() => {\n    return new TreeNodeLoader(filteredProvider, new TreeModelSource());\n  }, [filteredProvider]);\n\n  return nodeLoader;\n}\n\nfunction useNodeHighlightingProps(\n  filter: string,\n) {\n  const [nodeHighlightingProps, setNodeHighlightingProps] = React.useState<HighlightableTreeProps>();\n\n  React.useEffect(() => {\n    if (filter === \"\") {\n      setNodeHighlightingProps(undefined);\n      return;\n    }\n    setNodeHighlightingProps({\n      searchText: filter,\n      activeMatch: undefined,\n    });\n  }, [filter]);\n\n  return nodeHighlightingProps;\n}\n\nclass FullTreeHierarchy {\n  private _dataProvider: ITreeDataProvider;\n  private _hierarchy = new Map<string | undefined, DelayLoadedTreeNodeItem[]>();\n  private _init: Promise<void>;\n\n  public constructor(dataProvider: ITreeDataProvider) {\n    this._dataProvider = dataProvider;\n\n    this._init = (async () => {\n      await this.initNode();\n    })();\n  }\n\n  private async initNode(parent?: TreeNodeItem) {\n    const nodes = await this._dataProvider.getNodes(parent);\n    this._hierarchy.set(parent?.id, nodes);\n    for (const node of nodes) {\n      await this.initNode(node);\n    }\n  }\n\n  public async getHierarchy() {\n    await this._init;\n    return this._hierarchy;\n  }\n}\n\nclass FilteredTreeHierarchy {\n  private _fullHierarchy: FullTreeHierarchy;\n  private _filter: string;\n  private _filtered = new Map<string | undefined, DelayLoadedTreeNodeItem[]>();\n  private _init: Promise<void>;\n\n  public constructor(dataProvider: ITreeDataProvider, filter: string) {\n    this._fullHierarchy = new FullTreeHierarchy(dataProvider);\n    this._filter = filter;\n\n    this._init = (async () => {\n      await this.init();\n    })();\n  }\n\n  private async init() {\n    const hierarchy = await this._fullHierarchy.getHierarchy();\n    if (this._filter === \"\") {\n      this._filtered = hierarchy;\n      return;\n    }\n    this.filterNodes(hierarchy);\n  }\n\n  /** Initializes `this._filtered` field. Returns a node if it matches a filter. */\n  private filterNodes(hierarchy: Map<string | undefined, DelayLoadedTreeNodeItem[]>, current?: DelayLoadedTreeNodeItem): DelayLoadedTreeNodeItem | undefined {\n    const matches = current ? this.matchesFilter(current) : false;\n    const children = hierarchy.get(current?.id);\n    if (!children)\n      return matches ? current : undefined;\n\n    const matchedChildren = new Array<DelayLoadedTreeNodeItem>();\n    for (const child of children) {\n      const matchedChild = this.filterNodes(hierarchy, child);\n      matchedChild && matchedChildren.push(matchedChild);\n    }\n\n    const hasChildren = matchedChildren.length > 0;\n    const included = matches || hasChildren;\n    let filtered: DelayLoadedTreeNodeItem | undefined;\n    if (included) {\n      this._filtered.set(current?.id, matchedChildren);\n\n      // Return a modified copy of current node (to persist initial hierarchy when filter is cleared).\n      if (current) {\n        filtered = {\n          ...current,\n          hasChildren,\n          autoExpand: hasChildren ? true : current.autoExpand,\n        };\n      }\n    }\n    return filtered;\n  }\n\n  private matchesFilter(node: TreeNodeItem) {\n    if (node.label.value.valueFormat !== PropertyValueFormat.Primitive)\n      return false;\n\n    const value = node.label.value.displayValue?.toLowerCase();\n    if (!value)\n      return false;\n    return value.includes(this._filter.toLowerCase());\n  }\n\n  public async getHierarchy() {\n    await this._init;\n    return this._filtered;\n  }\n}\n\nclass FilteredTreeDataProvider implements ITreeDataProvider {\n  private _hierarchy: FilteredTreeHierarchy;\n\n  public constructor(\n    parentDataProvider: ITreeDataProvider,\n    filter: string,\n  ) {\n    this._hierarchy = new FilteredTreeHierarchy(parentDataProvider, filter);\n  }\n\n  public async getNodes(parent?: TreeNodeItem) {\n    const hierarchy = await this._hierarchy.getHierarchy();\n    const nodes = hierarchy.get(parent?.id);\n    return nodes || [];\n  }\n\n  public async getNodesCount(parent?: TreeNodeItem) {\n    const hierarchy = await this._hierarchy.getHierarchy();\n    const nodes = hierarchy.get(parent?.id);\n    return nodes?.length || 0;\n  }\n}\n"]}

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

@@ -65,7 +65,16 @@
 
 .map-manager-sublayer-tree-content {
   flex-grow: 1;
-  width: "100%";
-  height: "100%";
-  overflow: "hidden"
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+.map-manager-sublayer-tree-searchbox {
+  padding-top: 3.3px;
+  padding-bottom: 3.3px;
+
+  // We override the default padding of the search box input otherwise it
+  // makes the vertical scrollbar of the tree of padded too, and doesnt look good.
+  padding-inline: 0px;
+  padding-inline-start: 4px;
 }

package/lib/public/locales/en/mapLayers.json

@@ -39,15 +39,18 @@
     "MissingCredentials": "This layer requires credentials to be provided",
     "Name": "Name",
     "NameInputPlaceHolder": "Enter Map Name",
+    "NoLayersSelected": "Please select at least one layer",
     "RemoveLayerDefButtonTitle": "Delete layer definition",
     "RemoveLayerDefDialogMessage": "Are you sure you want to delete {{layerName}} ?",
     "RemoveLayerDefDialogTitle": "Delete layer definition",
     "RemoveLayerDefError": "Could not delete map layer definition: {{layerName}}",
     "RemoveLayerDefSuccess": "Successfully deleted map layer definition: {{layerName}}",
     "SearchPlaceholder": "Search...",
+    "SelectLayersToCreate": "Select layers to be created",
     "StoreOnModelSettings": "Store on Model Settings",
     "StoreOnITwinSettings": "Store on iTwin Settings",
     "TechPreviewBadgeTooltip": "Technology preview",
+    "TooManyLayersSelected": "There are currently {{layerCount}} layers selected; Adding too many layers may impact performance.",
     "Type": "Type",
     "URL": "URL",
     "UrlInputPlaceHolder": "Enter Map Source URL",
@@ -64,9 +67,10 @@
     "NotSupported": "No active viewport or geo-located iModel available.",
     "NoRangeDefined": "No range is defined for Map Layer",
     "Start": "Map Layers Extension Loaded",
-    "MapLayerAttached": "Map layer {{sourceName}} attached from URL: {{sourceUrl}}",
+    "MapLayerAttached": "Map layer {{layerNames}} attached",
+    "MapLayersAttached": "Map layers ({{sourceName}}) attached",
     "MapLayerAttachedRequiresAuth": "Map layer {{sourceName}} attached, but requires credentials to be provided",
-    "MapLayerAttachError": "Error '{{error}}' occurred attaching MapLayer from URL: {{sourceUrl}}",
+    "MapLayerAttachError": "Error '{{error}}' occurred attaching MapLayer '{{sourceName}}'",
     "MapLayerAttachMissingViewOrSource": "Missing view or source",
     "MapLayerEditError": "Failed to edit '{{layerName}}'",
     "MapLayerLayerSettingsConversionError": "Conversion to layer settings failed",
@@ -119,6 +123,7 @@
     "AllOn": "Turn on all Sub-layers",
     "AllOff": "Turn off all Sub-layers",
     "Hide": "Hide Sub-layers",
+    "NoResults": "No Results",
     "NoSubLayers": "No Sub-layers Available",
     "SearchPlaceholder": "Search...",
     "Show": "Show Sub-layers"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/map-layers",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "Extension that adds a Map Layers Widget",
   "main": "lib/cjs/map-layers.js",
   "module": "lib/esm/map-layers.js",
@@ -26,27 +26,29 @@
     "react-beautiful-dnd": "^13.0.0"
   },
   "devDependencies": {
-    "@itwin/appui-abstract": "^4.0.0",
+    "@itwin/appui-abstract": "^4.0.6",
     "@itwin/appui-layout-react": "^4.0.1",
     "@itwin/appui-react": "^4.0.1",
-    "@itwin/build-tools": "^4.0.0",
+    "@itwin/build-tools": "^4.0.6",
     "@itwin/components-react": "^4.0.1",
-    "@itwin/core-bentley": "^4.0.0",
-    "@itwin/core-common": "^4.0.0",
-    "@itwin/core-frontend": "^4.0.0",
-    "@itwin/core-geometry": "^4.0.0",
-    "@itwin/core-orbitgt": "^4.0.0",
-    "@itwin/core-quantity": "^4.0.0",
+    "@itwin/core-bentley": "^4.0.6",
+    "@itwin/core-common": "^4.0.6",
+    "@itwin/core-frontend": "^4.0.6",
+    "@itwin/core-geometry": "^4.0.6",
+    "@itwin/core-orbitgt": "^4.0.6",
+    "@itwin/core-quantity": "^4.0.6",
     "@itwin/core-react": "^4.0.1",
-    "@itwin/core-telemetry": "^4.0.0",
+    "@itwin/core-telemetry": "^4.0.6",
     "@itwin/eslint-plugin": "^4.0.0-dev.38",
     "@itwin/imodel-components-react": "^4.0.1",
     "@itwin/itwinui-variables": "^2.0.0",
     "@itwin/itwinui-react": "^2.11.2",
-    "@itwin/webgl-compatibility": "^4.0.0",
+    "@itwin/webgl-compatibility": "^4.0.6",
+    "@testing-library/dom": "^8.12.0",
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^7.0.2",
-    "@types/chai": "4.3.1",
+    "@types/chai": "4.3.5",
+    "@types/jsdom-global": "^3.0.4",
     "@types/enzyme": "3.9.3",
     "@types/mocha": "^8.2.2",
     "@types/node": "^18.11.5",
@@ -55,15 +57,14 @@
     "@types/sinon": "^9.0.0",
     "@types/sinon-chai": "^3.2.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
-    "chai": "^4.1.2",
+    "chai": "^4.3.7",
     "chai-as-promised": "^7",
-    "chai-jest-snapshot": "^2.0.0",
     "chai-spies": "1.0.0",
     "cpx2": "^3.0.0",
     "enzyme": "3.10.0",
     "enzyme-to-json": "^3.3.4",
     "eslint": "^7.11.0",
-    "jsdom": "^19.0.0",
+    "jsdom": "^22.1.0",
     "jsdom-global": "3.0.2",
     "mocha": "^10.0.0",
     "nyc": "^15.1.0",