@itwin/tree-widget-react 0.6.1 → 0.7.0

package/lib/esm/components/search-bar/SearchBar.js

@@ -4,11 +4,10 @@
 *--------------------------------------------------------------------------------------------*/
 import * as React from "react";
 import classnames from "classnames";
-import { RelativePosition } from "@itwin/appui-abstract";
-import { Popup } from "./Popup";
 import { SearchBox } from "./SearchBox";
-import { IconButton } from "../IconButton";
 import "./SearchBar.scss";
+import { ButtonGroup, DropdownMenu, IconButton, MenuItem, } from "@itwin/itwinui-react";
+import { SvgMore, SvgSearch } from "@itwin/itwinui-icons-react";
 export var Alignment;
 (function (Alignment) {
     Alignment[Alignment["Left"] = 0] = "Left";
@@ -18,7 +17,6 @@ export var Alignment;
 export class SearchBar extends React.PureComponent {
     constructor(props) {
         super(props);
-        this._target = null;
         this._searchBox = React.createRef();
         this._onToggleSearch = (_event) => {
             const showSearch = !this.state.showSearch;
@@ -30,12 +28,6 @@ export class SearchBar extends React.PureComponent {
                     }, 100); // timeout allows the search bar animation to complete!
             });
         };
-        this._onCloseDropdown = () => {
-            this.setState({ showDropdown: false });
-        };
-        this._onToggleDropdown = () => {
-            this.setState((prevState) => ({ showDropdown: !prevState.showDropdown }));
-        };
         this.state = { showSearch: props.showSearch, showDropdown: false };
     }
     async componentDidUpdate(prevProps) {
@@ -44,28 +36,25 @@ export class SearchBar extends React.PureComponent {
     }
     render() {
         const { value, alignment, valueChangedDelay, placeholder, enableGrouping, title, } = this.props;
-        const { showSearch, showDropdown } = this.state;
+        const { showSearch } = this.state;
         const classes = classnames("tree-widget-search-bar", this.props.className);
         const searchBoxClassName = classnames("search-bar-search-box", showSearch && "show");
         const searchIconClassName = classnames("search-bar-search-icon", showSearch ? "hide" : "show");
-        const groupButtonClassName = classnames("search-bar-group-button2", showSearch && enableGrouping && "show");
-        const contentClassName = classnames("search-bar-button-container", showSearch && "hide", alignment === Alignment.Right && "right");
-        const searchBarContainerClassName = classnames("search-bar-search-container", enableGrouping && "search-bar-grouping-enabled");
+        const contentClassName = classnames("search-bar-button-container", showSearch && "contracted", alignment === Alignment.Right && "right");
         return (React.createElement("div", { className: classes },
-            React.createElement("div", { className: groupButtonClassName, ref: (element) => {
-                    this._target = element;
-                } },
-                React.createElement(IconButton, { icon: "icon-more-2", onClick: this._onToggleDropdown })),
-            React.createElement("div", { className: contentClassName }, this.props.children),
-            React.createElement("div", { className: searchBarContainerClassName },
-                React.createElement(SearchBox, { ref: this._searchBox, className: searchBoxClassName, searchText: value, valueChangedDelay: valueChangedDelay, placeholder: placeholder, onFilterCancel: this.props.onFilterCancel, onFilterClear: this.props.onFilterClear, onFilterStart: this.props.onFilterStart, resultCount: this.props.resultCount, onIconClick: this._onToggleSearch, onSelectedChanged: this.props.onSelectedChanged })),
-            React.createElement(IconButton, { className: searchIconClassName, icon: "icon-search", onClick: this._onToggleSearch, title: title }),
-            showSearch && (React.createElement(Popup, { isShown: showDropdown, position: RelativePosition.BottomLeft, onClose: this._onCloseDropdown, context: this._target },
-                React.createElement("div", { className: "search-bar-dropdown-container" }, this.props.children)))));
+            enableGrouping && React.createElement("div", { className: contentClassName },
+                React.createElement(ButtonGroup, { overflowButton: (overflowStart) => (React.createElement(DropdownMenu, { menuItems: () => React.Children.toArray(this.props.children)
+                            .slice(overflowStart === 0 ? 0 : overflowStart - 1)
+                            .map((btn, index) => React.createElement(MenuItem, { key: index }, btn)), className: "search-bar-dropdown-container" },
+                        React.createElement(IconButton, { styleType: "borderless", size: "small" },
+                            React.createElement(SvgMore, null)))) }, this.props.children)),
+            showSearch ? (React.createElement("div", { className: "search-bar-search-container" },
+                React.createElement(SearchBox, { ref: this._searchBox, className: searchBoxClassName, searchText: value, valueChangedDelay: valueChangedDelay, placeholder: placeholder, onFilterCancel: this.props.onFilterCancel, onFilterClear: this.props.onFilterClear, onFilterStart: this.props.onFilterStart, resultCount: this.props.resultCount, onIconClick: this._onToggleSearch, onSelectedChanged: this.props.onSelectedChanged }))) : (React.createElement(IconButton, { className: searchIconClassName, onClick: this._onToggleSearch, title: title, styleType: "borderless", size: "small" },
+                React.createElement(SvgSearch, null)))));
     }
 }
 SearchBar.defaultProps = {
-    alignment: Alignment.Left,
+    alignment: Alignment.Right,
     enableGrouping: true,
 };
 //# sourceMappingURL=SearchBar.js.map

package/lib/esm/components/search-bar/SearchBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../../../src/components/search-bar/SearchBar.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport * as React from \"react\";\nimport classnames from \"classnames\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\nimport { Popup } from \"./Popup\";\nimport { SearchBox } from \"./SearchBox\";\nimport { IconButton } from \"../IconButton\";\nimport \"./SearchBar.scss\";\n\nexport enum Alignment {\n  Left = 0,\n  Right = 1,\n}\n\nexport interface SearchBarProps extends CommonProps {\n  /** value to set SearchBox */\n  value?: string;\n  /** Enable or disable dropdown functionality. If disabled, searchbox simply expands without displaying the group button */\n  enableGrouping: boolean;\n  /** show the search box in the open (expanded) state */\n  showSearch?: boolean;\n  /** alignment content to the left or right of the search bar */\n  alignment?: Alignment;\n  /** searchbox frequency to poll for changes in value (milliseconds) */\n  valueChangedDelay?: number;\n  /** searchbox placeholder value to show in gray before anything is entered in */\n  placeholder?: string;\n  /** title (tooltip) */\n  title?: string;\n  /** Tells the component if parent component is still handling the filtering */\n  filteringInProgress?: boolean;\n  /** Filtering is cleared after everything's loaded */\n  onFilterStart: (newFilter: string) => void;\n  /** Filtering is cleared after everything's loaded */\n  onFilterCancel?: () => void;\n  /** Filtering is cleared after everything's loaded */\n  onFilterClear?: () => void;\n  /** Total number of results/entries */\n  resultCount: number;\n  /** Callback to currently selected result/entry change */\n  onSelectedChanged: (index: number) => void;\n}\n\ninterface SearchBarState {\n  showSearch: boolean;\n  showDropdown: boolean;\n}\n\n/** SearchBox with expanding search box capability */\nexport class SearchBar extends React.PureComponent<\nSearchBarProps,\nSearchBarState\n> {\n  private _target: HTMLElement | null = null;\n  private _searchBox = React.createRef<SearchBox>();\n\n  public static defaultProps: Partial<SearchBarProps> = {\n    alignment: Alignment.Left,\n    enableGrouping: true,\n  };\n\n  constructor(props: any) {\n    super(props);\n\n    this.state = { showSearch: props.showSearch, showDropdown: false };\n  }\n\n  public async componentDidUpdate(prevProps: SearchBarProps) {\n    if (prevProps.value !== this.props.value) {\n    }\n  }\n\n  private _onToggleSearch = (\n    _event?: React.MouseEvent<HTMLButtonElement, MouseEvent>\n  ) => {\n    const showSearch = !this.state.showSearch;\n    this.setState({ showSearch }, () => {\n      if (showSearch && this._searchBox.current)\n        setTimeout(() => {\n          if (this._searchBox.current) this._searchBox.current.focus();\n        }, 100); // timeout allows the search bar animation to complete!\n    });\n  };\n\n  private _onCloseDropdown = () => {\n    this.setState({ showDropdown: false });\n  };\n\n  private _onToggleDropdown = () => {\n    this.setState((prevState) => ({ showDropdown: !prevState.showDropdown }));\n  };\n\n  public render() {\n    const {\n      value,\n      alignment,\n      valueChangedDelay,\n      placeholder,\n      enableGrouping,\n      title,\n    } = this.props;\n    const { showSearch, showDropdown } = this.state;\n\n    const classes = classnames(\"tree-widget-search-bar\", this.props.className);\n    const searchBoxClassName = classnames(\n      \"search-bar-search-box\",\n      showSearch && \"show\"\n    );\n    const searchIconClassName = classnames(\n      \"search-bar-search-icon\",\n      showSearch ? \"hide\" : \"show\"\n    );\n    const groupButtonClassName = classnames(\n      \"search-bar-group-button2\",\n      showSearch && enableGrouping && \"show\"\n    );\n    const contentClassName = classnames(\n      \"search-bar-button-container\",\n      showSearch && \"hide\",\n      alignment === Alignment.Right && \"right\"\n    );\n    const searchBarContainerClassName = classnames(\n      \"search-bar-search-container\",\n      enableGrouping && \"search-bar-grouping-enabled\",\n    );\n\n    return (\n      <div className={classes}>\n        <div\n          className={groupButtonClassName}\n          ref={(element) => {\n            this._target = element;\n          }}\n        >\n          <IconButton icon=\"icon-more-2\" onClick={this._onToggleDropdown} />\n        </div>\n        <div className={contentClassName}>{this.props.children}</div>\n        <div className={searchBarContainerClassName}>\n          <SearchBox\n            ref={this._searchBox}\n            className={searchBoxClassName}\n            searchText={value}\n            valueChangedDelay={valueChangedDelay}\n            placeholder={placeholder}\n            onFilterCancel={this.props.onFilterCancel}\n            onFilterClear={this.props.onFilterClear}\n            onFilterStart={this.props.onFilterStart}\n            resultCount={this.props.resultCount}\n            onIconClick={this._onToggleSearch}\n            onSelectedChanged={this.props.onSelectedChanged}\n          />\n        </div>\n        <IconButton\n          className={searchIconClassName}\n          icon=\"icon-search\"\n          onClick={this._onToggleSearch}\n          title={title}\n        />\n        {showSearch && (\n          <Popup\n            isShown={showDropdown}\n            position={RelativePosition.BottomLeft}\n            onClose={this._onCloseDropdown}\n            context={this._target}\n          >\n            <div className=\"search-bar-dropdown-container\">\n              {this.props.children}\n            </div>\n          </Popup>\n        )}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../../../src/components/search-bar/SearchBar.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport * as React from \"react\";\nimport classnames from \"classnames\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { SearchBox } from \"./SearchBox\";\nimport \"./SearchBar.scss\";\nimport {\n  ButtonGroup,\n  DropdownMenu,\n  IconButton,\n  MenuItem,\n} from \"@itwin/itwinui-react\";\nimport { SvgMore, SvgSearch } from \"@itwin/itwinui-icons-react\";\n\nexport enum Alignment {\n  Left = 0,\n  Right = 1,\n}\n\nexport interface SearchBarProps extends CommonProps {\n  /** value to set SearchBox */\n  value?: string;\n  /** Enable or disable dropdown functionality. If disabled, searchbox simply expands without displaying the group button */\n  enableGrouping: boolean;\n  /** show the search box in the open (expanded) state */\n  showSearch?: boolean;\n  /** alignment content to the left or right of the search bar */\n  alignment?: Alignment;\n  /** searchbox frequency to poll for changes in value (milliseconds) */\n  valueChangedDelay?: number;\n  /** searchbox placeholder value to show in gray before anything is entered in */\n  placeholder?: string;\n  /** title (tooltip) */\n  title?: string;\n  /** Tells the component if parent component is still handling the filtering */\n  filteringInProgress?: boolean;\n  /** Filtering is cleared after everything's loaded */\n  onFilterStart: (newFilter: string) => void;\n  /** Filtering is cleared after everything's loaded */\n  onFilterCancel?: () => void;\n  /** Filtering is cleared after everything's loaded */\n  onFilterClear?: () => void;\n  /** Total number of results/entries */\n  resultCount: number;\n  /** Callback to currently selected result/entry change */\n  onSelectedChanged: (index: number) => void;\n}\n\ninterface SearchBarState {\n  showSearch: boolean;\n  showDropdown: boolean;\n}\n\n/** SearchBox with expanding search box capability */\nexport class SearchBar extends React.PureComponent<\nSearchBarProps,\nSearchBarState\n> {\n  private _searchBox = React.createRef<SearchBox>();\n\n  public static defaultProps: Partial<SearchBarProps> = {\n    alignment: Alignment.Right,\n    enableGrouping: true,\n  };\n\n  constructor(props: any) {\n    super(props);\n\n    this.state = { showSearch: props.showSearch, showDropdown: false };\n  }\n\n  public async componentDidUpdate(prevProps: SearchBarProps) {\n    if (prevProps.value !== this.props.value) {\n    }\n  }\n\n  private _onToggleSearch = (\n    _event?: React.MouseEvent<HTMLButtonElement, MouseEvent>\n  ) => {\n    const showSearch = !this.state.showSearch;\n    this.setState({ showSearch }, () => {\n      if (showSearch && this._searchBox.current)\n        setTimeout(() => {\n          if (this._searchBox.current) this._searchBox.current.focus();\n        }, 100); // timeout allows the search bar animation to complete!\n    });\n  };\n\n  public render() {\n    const {\n      value,\n      alignment,\n      valueChangedDelay,\n      placeholder,\n      enableGrouping,\n      title,\n    } = this.props;\n    const { showSearch } = this.state;\n\n    const classes = classnames(\"tree-widget-search-bar\", this.props.className);\n    const searchBoxClassName = classnames(\n      \"search-bar-search-box\",\n      showSearch && \"show\"\n    );\n    const searchIconClassName = classnames(\n      \"search-bar-search-icon\",\n      showSearch ? \"hide\" : \"show\"\n    );\n    const contentClassName = classnames(\n      \"search-bar-button-container\",\n      showSearch && \"contracted\",\n      alignment === Alignment.Right && \"right\"\n    );\n\n    return (\n      <div className={classes}>\n        {enableGrouping && <div className={contentClassName}>\n          <ButtonGroup\n            overflowButton={(overflowStart) => (\n              <DropdownMenu\n                menuItems={() =>\n                  React.Children.toArray(this.props.children)\n                    .slice(overflowStart === 0 ? 0 : overflowStart - 1)\n                    .map((btn, index) => <MenuItem key={index}>{btn}</MenuItem>)\n                }\n                className=\"search-bar-dropdown-container\"\n              >\n                <IconButton styleType=\"borderless\" size=\"small\">\n                  <SvgMore />\n                </IconButton>\n              </DropdownMenu>\n            )}\n          >\n            {this.props.children}\n          </ButtonGroup>\n        </div>}\n        {showSearch ? (\n          <div className=\"search-bar-search-container\">\n            <SearchBox\n              ref={this._searchBox}\n              className={searchBoxClassName}\n              searchText={value}\n              valueChangedDelay={valueChangedDelay}\n              placeholder={placeholder}\n              onFilterCancel={this.props.onFilterCancel}\n              onFilterClear={this.props.onFilterClear}\n              onFilterStart={this.props.onFilterStart}\n              resultCount={this.props.resultCount}\n              onIconClick={this._onToggleSearch}\n              onSelectedChanged={this.props.onSelectedChanged}\n            />\n          </div>\n        ) : (\n          <IconButton\n            className={searchIconClassName}\n            onClick={this._onToggleSearch}\n            title={title}\n            styleType=\"borderless\"\n            size=\"small\"\n          >\n            <SvgSearch />\n          </IconButton>\n        )}\n      </div>\n    );\n  }\n}\n"]}

package/lib/esm/components/search-bar/SearchBar.scss

@@ -4,54 +4,45 @@
 *--------------------------------------------------------------------------------------------*/
 @import "~@itwin/core-react/lib/cjs/core-react/index";
 
-.tree-widget-search-bar {
+// Buttons dropdown container
+.search-bar-dropdown-container {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  position: relative;
+  margin-top: 6px;
+}
 
-  // "..." group button
-  .search-bar-group-button2 {
-    opacity: 0;
-    display: none;
-    animation: hide ease-in 0.1s;
-    animation-fill-mode: forwards;
+.tree-widget-header-tree-toolbar-icon {
+  color: $buic-icon-color;
+}
 
-    &.search-bar-group-button2.show {
-      animation: show ease-in 0.25s;
-      animation-delay: 0.1s;
-      animation-fill-mode: forwards;
-      display: block;
-    }
-  }
+.tree-widget-search-bar {
+  display: flex;
+  align-items: center;
+  position: relative;
 
   // button container
   .search-bar-button-container {
     display: flex;
     align-items: center;
+    width: calc(100% - 26px);
 
     &.right {
       justify-content: flex-end;
     }
 
-    &.hide {
-      display: none;
+    &.contracted {
+      width: 32px;
     }
   }
 
-  // dropdown container
-  .search-bar-dropdown-container {
-    display: flex;
-    align-items: center;
-    padding: 0 $uicore-s;
-  }
-
   // override of the search box styling
   .search-bar-search-icon {
-    position: absolute;
-    right: 0;
     opacity: 0;
     transition: all 0.2s ease;
     color: $buic-icon-color;
+    height: 32px;
+
     &.show {
       opacity: 1;
     }
@@ -61,9 +52,6 @@
   .search-bar-search-container {
     flex: 1;
     height: 100%;
-    position: absolute;
-    left: 0;
-    right: 0;
 
     .search-bar-search-box {
       height: 32px;
@@ -79,13 +67,9 @@
       &.show {
         visibility: visible;
         opacity: 1;
-        width: 100%;
+        width: 100%
       }
     }
-
-    &.search-bar-grouping-enabled {
-      left: 32px;
-    }
   }
 }
 

package/lib/esm/components/trees/CategoriesVisibilityUtils.d.ts

@@ -0,0 +1,19 @@
+import { IModelConnection, ViewManager, Viewport } from "@itwin/core-frontend";
+import { CategoryInfo } from "./category-tree/CategoryVisibilityHandler";
+/**
+ * Toggles visibility of categories to show or hide.
+ * @alpha
+ */
+export declare function toggleAllCategories(viewManager: ViewManager, imodel: IModelConnection, display: boolean, viewport?: Viewport, forAllViewports?: boolean): Promise<void>;
+/**
+ * Gets ids of all categories from specified imodel and viewport.
+ * @alpha
+ */
+export declare function getCategories(imodel: IModelConnection, viewport?: Viewport): Promise<string[]>;
+/** Changes category display in the viewport */
+export declare function enableCategory(viewManager: ViewManager, imodel: IModelConnection, ids: string[], enabled: boolean, forAllViewports: boolean, enableAllSubCategories?: boolean): void;
+/** Changes subcategory display in the viewport */
+export declare function enableSubCategory(viewManager: ViewManager, key: string, enabled: boolean, forAllViewports?: boolean): void;
+/** @internal */
+export declare function loadCategoriesFromViewport(iModel?: IModelConnection, vp?: Viewport): Promise<CategoryInfo[]>;
+//# sourceMappingURL=CategoriesVisibilityUtils.d.ts.map

package/lib/esm/components/trees/CategoriesVisibilityUtils.js

@@ -0,0 +1,110 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import { QueryRowFormat } from "@itwin/core-common";
+import { PerModelCategoryVisibility } from "@itwin/core-frontend";
+const EMPTY_CATEGORIES_ARRAY = [];
+/**
+ * Toggles visibility of categories to show or hide.
+ * @alpha
+ */
+export async function toggleAllCategories(viewManager, imodel, display, viewport, forAllViewports) {
+    // istanbul ignore next
+    const activeView = viewport !== null && viewport !== void 0 ? viewport : viewManager.getFirstOpenView();
+    const ids = await getCategories(imodel, activeView);
+    // istanbul ignore else
+    if (ids.length > 0) {
+        enableCategory(viewManager, imodel, ids, display, forAllViewports !== null && forAllViewports !== void 0 ? forAllViewports : false);
+    }
+}
+/**
+ * Gets ids of all categories from specified imodel and viewport.
+ * @alpha
+ */
+export async function getCategories(imodel, viewport) {
+    const categories = await loadCategoriesFromViewport(imodel, viewport);
+    return categories.map((category) => category.categoryId);
+}
+/** Changes category display in the viewport */
+export function enableCategory(viewManager, imodel, ids, enabled, forAllViewports, enableAllSubCategories = true) {
+    if (!viewManager.selectedView)
+        return;
+    const updateViewport = (vp) => {
+        // Only act on viewports that are both 3D or both 2D. Important if we have multiple viewports opened and we
+        // are using 'allViewports' property
+        if (viewManager.selectedView && viewManager.selectedView.view.is3d() === vp.view.is3d()) {
+            vp.changeCategoryDisplay(ids, enabled, enableAllSubCategories);
+            // remove category overrides per model
+            const modelsContainingOverrides = [];
+            for (const ovr of vp.perModelCategoryVisibility) {
+                // istanbul ignore else
+                if (ids.findIndex((id) => id === ovr.categoryId) !== -1)
+                    modelsContainingOverrides.push(ovr.modelId);
+            }
+            vp.perModelCategoryVisibility.setOverride(modelsContainingOverrides, ids, PerModelCategoryVisibility.Override.None);
+            // changeCategoryDisplay only enables subcategories, it does not disabled them. So we must do that ourselves.
+            if (false === enabled) {
+                ids.forEach((id) => {
+                    const subCategoryIds = imodel.subcategories.getSubCategories(id);
+                    // istanbul ignore else
+                    if (subCategoryIds) {
+                        subCategoryIds.forEach((subCategoryId) => enableSubCategory(viewManager, subCategoryId, false, forAllViewports));
+                    }
+                });
+            }
+        }
+    };
+    // This property let us act on all viewports or just on the selected one, configurable by the app
+    if (forAllViewports) {
+        for (const viewport of viewManager) {
+            updateViewport(viewport);
+        }
+    }
+    else {
+        updateViewport(viewManager.selectedView);
+    }
+}
+/** Changes subcategory display in the viewport */
+export function enableSubCategory(viewManager, key, enabled, forAllViewports) {
+    if (!viewManager.selectedView)
+        return;
+    const updateViewport = (vp) => {
+        // Only act on viewports that are both 3D or both 2D. Important if we have multiple viewports opened and we
+        // are using 'allViewports' property
+        if (viewManager.selectedView && viewManager.selectedView.view.is3d() === vp.view.is3d()) {
+            vp.changeSubCategoryDisplay(key, enabled);
+        }
+    };
+    // This property let us act on all viewports or just on the selected one, configurable by the app
+    if (forAllViewports) {
+        for (const viewport of viewManager) {
+            updateViewport(viewport);
+        }
+    }
+    else {
+        updateViewport(viewManager.selectedView);
+    }
+}
+/** @internal */
+export async function loadCategoriesFromViewport(iModel, vp) {
+    if (!vp)
+        return EMPTY_CATEGORIES_ARRAY;
+    // Query categories and add them to state
+    const selectUsedSpatialCategoryIds = "SELECT DISTINCT Category.Id as id from BisCore.GeometricElement3d WHERE Category.Id IN (SELECT ECInstanceId from BisCore.SpatialCategory)";
+    const selectUsedDrawingCategoryIds = "SELECT DISTINCT Category.Id as id from BisCore.GeometricElement2d WHERE Model.Id=? AND Category.Id IN (SELECT ECInstanceId from BisCore.DrawingCategory)";
+    const ecsql = vp.view.is3d() ? selectUsedSpatialCategoryIds : selectUsedDrawingCategoryIds;
+    const ecsql2 = `SELECT ECInstanceId as id, UserLabel as label, CodeValue as code FROM ${vp.view.is3d() ? "BisCore.SpatialCategory" : "BisCore.DrawingCategory"} WHERE ECInstanceId IN (${ecsql})`;
+    const categories = [];
+    // istanbul ignore else
+    if (iModel) {
+        const rowIterator = iModel.query(ecsql2, undefined, { rowFormat: QueryRowFormat.UseJsPropertyNames });
+        // istanbul ignore next
+        for await (const row of rowIterator) {
+            const subCategoryIds = iModel.subcategories.getSubCategories(row.id);
+            categories.push({ categoryId: row.id, subCategoryIds: (subCategoryIds) ? [...subCategoryIds] : undefined });
+        }
+    }
+    return categories;
+}
+//# sourceMappingURL=CategoriesVisibilityUtils.js.map

package/lib/esm/components/trees/CategoriesVisibilityUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategoriesVisibilityUtils.js","sourceRoot":"","sources":["../../../../src/components/trees/CategoriesVisibilityUtils.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*--------------------------------------------------------------------------------------------*/\n\nimport { QueryRowFormat } from \"@itwin/core-common\";\nimport { IModelConnection, PerModelCategoryVisibility, ViewManager, Viewport } from \"@itwin/core-frontend\";\nimport { CategoryInfo  } from \"./category-tree/CategoryVisibilityHandler\";\n\nconst EMPTY_CATEGORIES_ARRAY: CategoryInfo[] = [];\n\n/**\n * Toggles visibility of categories to show or hide.\n * @alpha\n */\nexport async function toggleAllCategories(viewManager: ViewManager, imodel: IModelConnection, display: boolean, viewport?: Viewport, forAllViewports?: boolean) {\n  // istanbul ignore next\n  const activeView = viewport ?? viewManager.getFirstOpenView();\n  const ids = await getCategories(imodel, activeView);\n\n  // istanbul ignore else\n  if (ids.length > 0) {\n    enableCategory(viewManager, imodel, ids, display, forAllViewports ?? false);\n  }\n}\n\n/**\n * Gets ids of all categories from specified imodel and viewport.\n * @alpha\n */\nexport async function getCategories(imodel: IModelConnection, viewport?: Viewport) {\n  const categories = await loadCategoriesFromViewport(imodel, viewport);\n  return categories.map((category) => category.categoryId);\n}\n\n/** Changes category display in the viewport */\nexport function enableCategory(viewManager: ViewManager, imodel: IModelConnection, ids: string[], enabled: boolean, forAllViewports: boolean, enableAllSubCategories = true) {\n  if (!viewManager.selectedView)\n    return;\n\n  const updateViewport = (vp: Viewport) => {\n    // Only act on viewports that are both 3D or both 2D. Important if we have multiple viewports opened and we\n    // are using 'allViewports' property\n    if (viewManager.selectedView && viewManager.selectedView.view.is3d() === vp.view.is3d()) {\n      vp.changeCategoryDisplay(ids, enabled, enableAllSubCategories);\n\n      // remove category overrides per model\n      const modelsContainingOverrides: string[] = [];\n      for (const ovr of vp.perModelCategoryVisibility) {\n        // istanbul ignore else\n        if (ids.findIndex((id) => id === ovr.categoryId) !== -1)\n          modelsContainingOverrides.push(ovr.modelId);\n      }\n      vp.perModelCategoryVisibility.setOverride(modelsContainingOverrides, ids, PerModelCategoryVisibility.Override.None);\n\n      // changeCategoryDisplay only enables subcategories, it does not disabled them. So we must do that ourselves.\n      if (false === enabled) {\n        ids.forEach((id) => {\n          const subCategoryIds = imodel.subcategories.getSubCategories(id);\n          // istanbul ignore else\n          if (subCategoryIds) {\n            subCategoryIds.forEach((subCategoryId) => enableSubCategory(viewManager, subCategoryId, false, forAllViewports));\n          }\n        });\n      }\n    }\n  };\n\n  // This property let us act on all viewports or just on the selected one, configurable by the app\n  if (forAllViewports) {\n    for (const viewport of viewManager) {\n      updateViewport(viewport);\n    }\n  } else {\n    updateViewport(viewManager.selectedView);\n  }\n}\n\n/** Changes subcategory display in the viewport */\nexport function enableSubCategory(viewManager: ViewManager, key: string, enabled: boolean, forAllViewports?: boolean) {\n  if (!viewManager.selectedView)\n    return;\n\n  const updateViewport = (vp: Viewport) => {\n    // Only act on viewports that are both 3D or both 2D. Important if we have multiple viewports opened and we\n    // are using 'allViewports' property\n    if (viewManager.selectedView && viewManager.selectedView.view.is3d() === vp.view.is3d()) {\n      vp.changeSubCategoryDisplay(key, enabled);\n    }\n  };\n\n  // This property let us act on all viewports or just on the selected one, configurable by the app\n  if (forAllViewports) {\n    for (const viewport of viewManager) {\n      updateViewport(viewport);\n    }\n  } else {\n    updateViewport(viewManager.selectedView);\n  }\n}\n\n/** @internal */\nexport async function loadCategoriesFromViewport(iModel?: IModelConnection, vp?: Viewport) {\n  if (!vp)\n    return EMPTY_CATEGORIES_ARRAY;\n\n  // Query categories and add them to state\n  const selectUsedSpatialCategoryIds = \"SELECT DISTINCT Category.Id as id from BisCore.GeometricElement3d WHERE Category.Id IN (SELECT ECInstanceId from BisCore.SpatialCategory)\";\n  const selectUsedDrawingCategoryIds = \"SELECT DISTINCT Category.Id as id from BisCore.GeometricElement2d WHERE Model.Id=? AND Category.Id IN (SELECT ECInstanceId from BisCore.DrawingCategory)\";\n  const ecsql = vp.view.is3d() ? selectUsedSpatialCategoryIds : selectUsedDrawingCategoryIds;\n  const ecsql2 = `SELECT ECInstanceId as id, UserLabel as label, CodeValue as code FROM ${vp.view.is3d() ? \"BisCore.SpatialCategory\" : \"BisCore.DrawingCategory\"} WHERE ECInstanceId IN (${ecsql})`;\n\n  const categories: CategoryInfo [] = [];\n\n  // istanbul ignore else\n  if (iModel) {\n    const rowIterator = iModel.query(ecsql2, undefined, { rowFormat: QueryRowFormat.UseJsPropertyNames });\n    // istanbul ignore next\n    for await (const row of rowIterator) {\n      const subCategoryIds = iModel.subcategories.getSubCategories(row.id);\n      categories.push({ categoryId: row.id, subCategoryIds: (subCategoryIds) ? [...subCategoryIds] : undefined });\n    }\n  }\n\n  return categories;\n}\n"]}

package/lib/esm/components/trees/VisibilityTreeEventHandler.d.ts

@@ -1,11 +1,10 @@
 /** @packageDocumentation
  * @module IModelComponents
  */
-import { UnifiedSelectionTreeEventHandler } from "@itwin/presentation-components";
-import type { TreeCheckboxStateChangeEventArgs, TreeNodeItem, TreeSelectionModificationEventArgs, TreeSelectionReplacementEventArgs } from "@itwin/components-react";
-import type { BeEvent, IDisposable } from "@itwin/core-bentley";
-import type { NodeKey } from "@itwin/presentation-common";
-import type { UnifiedSelectionTreeEventHandlerParams } from "@itwin/presentation-components";
+import { TreeCheckboxStateChangeEventArgs, TreeNodeItem, TreeSelectionModificationEventArgs, TreeSelectionReplacementEventArgs } from "@itwin/components-react";
+import { BeEvent, IDisposable } from "@itwin/core-bentley";
+import { NodeKey } from "@itwin/presentation-common";
+import { UnifiedSelectionTreeEventHandler, UnifiedSelectionTreeEventHandlerParams } from "@itwin/presentation-components";
 /**
  * Data structure that describes instance visibility status.
  * @alpha

package/lib/esm/components/trees/VisibilityTreeEventHandler.js

@@ -5,11 +5,11 @@
 /** @packageDocumentation
  * @module IModelComponents
  */
+import { Observable } from "rxjs";
 import { EMPTY } from "rxjs/internal/observable/empty";
 import { from } from "rxjs/internal/observable/from";
 import { map } from "rxjs/internal/operators/map";
 import { mergeMap } from "rxjs/internal/operators/mergeMap";
-import { toRxjsObservable } from "@itwin/components-react";
 import { CheckBoxState, isPromiseLike } from "@itwin/core-react";
 import { UnifiedSelectionTreeEventHandler } from "@itwin/presentation-components";
 /**
@@ -46,7 +46,7 @@ export class VisibilityTreeEventHandler extends UnifiedSelectionTreeEventHandler
         return items.filter((item) => this._selectionPredicate(this.getNodeKey(item), item));
     }
     onSelectionModified({ modifications }) {
-        const filteredModification = toRxjsObservable(modifications).pipe(map(({ selectedNodeItems, deselectedNodeItems }) => {
+        const filteredModification = new Observable((subscriber) => modifications.subscribe(subscriber)).pipe(map(({ selectedNodeItems, deselectedNodeItems }) => {
             return {
                 selectedNodeItems: this.filterSelectionItems(selectedNodeItems),
                 deselectedNodeItems: this.filterSelectionItems(deselectedNodeItems),
@@ -55,7 +55,7 @@ export class VisibilityTreeEventHandler extends UnifiedSelectionTreeEventHandler
         return super.onSelectionModified({ modifications: filteredModification });
     }
     onSelectionReplaced({ replacements }) {
-        const filteredReplacements = toRxjsObservable(replacements).pipe(map(({ selectedNodeItems }) => {
+        const filteredReplacements = new Observable((subscriber) => replacements.subscribe(subscriber)).pipe(map(({ selectedNodeItems }) => {
             return {
                 selectedNodeItems: this.filterSelectionItems(selectedNodeItems),
             };
@@ -70,8 +70,12 @@ export class VisibilityTreeEventHandler extends UnifiedSelectionTreeEventHandler
         // istanbul ignore if
         if (!this._visibilityHandler)
             return undefined;
+        // eslint-disable-next-line deprecation/deprecation
         from(event.stateChanges)
-            .pipe(mergeMap((changes) => this.changeVisibility(changes)))
+            .pipe(
+        // eslint-disable-next-line deprecation/deprecation
+        mergeMap((changes) => this.changeVisibility(changes)))
+            // eslint-disable-next-line deprecation/deprecation
             .subscribe({
             complete: handleStateChanged,
             error: handleStateChanged,
@@ -79,12 +83,16 @@ export class VisibilityTreeEventHandler extends UnifiedSelectionTreeEventHandler
         return undefined;
     }
     changeVisibility(changes) {
+        // eslint-disable-next-line deprecation/deprecation
         return from(changes)
-            .pipe(mergeMap(({ nodeItem, newState }) => {
+            .pipe(
+        // eslint-disable-next-line deprecation/deprecation
+        mergeMap(({ nodeItem, newState }) => {
             // istanbul ignore if
             if (!this._visibilityHandler)
                 return EMPTY;
             this._isChangingVisibility = true;
+            // eslint-disable-next-line deprecation/deprecation
             return from(this._visibilityHandler.changeVisibility(nodeItem, this.getNodeKey(nodeItem), newState === CheckBoxState.On));
         }, 1));
     }

package/lib/esm/components/trees/VisibilityTreeEventHandler.js.map

@@ -1 +1 @@
-{"version":3,"file":"VisibilityTreeEventHandler.js","sourceRoot":"","sources":["../../../../src/components/trees/VisibilityTreeEventHandler.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*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module IModelComponents\n */\n\nimport { EMPTY } from \"rxjs/internal/observable/empty\";\nimport { from } from \"rxjs/internal/observable/from\";\nimport { map } from \"rxjs/internal/operators/map\";\nimport { mergeMap } from \"rxjs/internal/operators/mergeMap\";\nimport { toRxjsObservable } from \"@itwin/components-react\";\nimport { CheckBoxState, isPromiseLike } from \"@itwin/core-react\";\nimport { UnifiedSelectionTreeEventHandler } from \"@itwin/presentation-components\";\nimport type {\n  CheckBoxInfo, CheckboxStateChange, TreeCheckboxStateChangeEventArgs, TreeModelNode, TreeNodeItem,\n  TreeSelectionModificationEventArgs, TreeSelectionReplacementEventArgs,\n} from \"@itwin/components-react\";\nimport type { BeEvent, IDisposable } from \"@itwin/core-bentley\";\nimport type { NodeKey } from \"@itwin/presentation-common\";\nimport type { UnifiedSelectionTreeEventHandlerParams } from \"@itwin/presentation-components\";\n\n/**\n * Data structure that describes instance visibility status.\n * @alpha\n */\nexport interface VisibilityStatus {\n  state: \"visible\" | \"partial\" | \"hidden\";\n  isDisabled?: boolean;\n  tooltip?: string;\n}\n\n/**\n * Type definition of visibility change event listener.\n * @alpha\n */\nexport type VisibilityChangeListener = (nodeIds?: string[], visibilityStatus?: Map<string, VisibilityStatus>) => void;\n\n/**\n * Visibility handler used to change or get visibility of instances represented by the tree node.\n * @alpha\n */\nexport interface IVisibilityHandler extends IDisposable {\n  getVisibilityStatus(node: TreeNodeItem, nodeKey: NodeKey): VisibilityStatus | Promise<VisibilityStatus>;\n  changeVisibility(node: TreeNodeItem, nodeKey: NodeKey, shouldDisplay: boolean): Promise<void>;\n  onVisibilityChange: BeEvent<VisibilityChangeListener>;\n}\n\n/**\n * Type definition of predicate used to decide if node can be selected.\n * @alpha\n */\nexport type VisibilityTreeSelectionPredicate = (key: NodeKey, node: TreeNodeItem) => boolean;\n\n/**\n * Parameters for [[VisibilityTreeEventHandler]]\n * @alpha\n */\nexport interface VisibilityTreeEventHandlerParams extends UnifiedSelectionTreeEventHandlerParams {\n  visibilityHandler: IVisibilityHandler | undefined;\n  selectionPredicate?: VisibilityTreeSelectionPredicate;\n}\n\n/**\n * Base event handler for visibility tree.\n * @alpha\n */\nexport class VisibilityTreeEventHandler extends UnifiedSelectionTreeEventHandler {\n  private _visibilityHandler: IVisibilityHandler | undefined;\n  private _selectionPredicate?: VisibilityTreeSelectionPredicate;\n  private _listeners = new Array<() => void>();\n  private _isChangingVisibility: boolean;\n\n  constructor(params: VisibilityTreeEventHandlerParams) {\n    super(params);\n    this._visibilityHandler = params.visibilityHandler;\n    this._selectionPredicate = params.selectionPredicate;\n    this._isChangingVisibility = false;\n\n    if (this._visibilityHandler) {\n      this._listeners.push(this._visibilityHandler.onVisibilityChange.addListener(async (nodeIds, visibilityStatus) => {\n        if (this._isChangingVisibility)\n          return;\n        void this.updateCheckboxes(nodeIds, visibilityStatus);\n      }));\n    }\n\n    this._listeners.push(this.modelSource.onModelChanged.addListener(async ([_, changes]) => {\n      void this.updateCheckboxes([...changes.addedNodeIds, ...changes.modifiedNodeIds]);\n    }));\n    this.updateCheckboxes(); // eslint-disable-line @typescript-eslint/no-floating-promises\n  }\n\n  public override dispose() {\n    super.dispose();\n    this._listeners.forEach((disposeFunc) => disposeFunc());\n  }\n\n  private filterSelectionItems(items: TreeNodeItem[]) {\n    // istanbul ignore if\n    if (!this._selectionPredicate)\n      return items;\n\n    return items.filter((item) => this._selectionPredicate!(this.getNodeKey(item), item));\n  }\n\n  public override onSelectionModified({ modifications }: TreeSelectionModificationEventArgs) {\n    const filteredModification = toRxjsObservable(modifications).pipe(\n      map(({ selectedNodeItems, deselectedNodeItems }) => {\n        return {\n          selectedNodeItems: this.filterSelectionItems(selectedNodeItems),\n          deselectedNodeItems: this.filterSelectionItems(deselectedNodeItems),\n        };\n      }),\n    );\n    return super.onSelectionModified({ modifications: filteredModification });\n  }\n\n  public override onSelectionReplaced({ replacements }: TreeSelectionReplacementEventArgs) {\n    const filteredReplacements = toRxjsObservable(replacements).pipe(\n      map(({ selectedNodeItems }) => {\n        return {\n          selectedNodeItems: this.filterSelectionItems(selectedNodeItems),\n        };\n      }),\n    );\n    return super.onSelectionReplaced({ replacements: filteredReplacements });\n  }\n\n  public override onCheckboxStateChanged(event: TreeCheckboxStateChangeEventArgs) {\n    const handleStateChanged = () => {\n      this._isChangingVisibility = false;\n      void this.updateCheckboxes();\n    };\n    // istanbul ignore if\n    if (!this._visibilityHandler)\n      return undefined;\n\n    from(event.stateChanges)\n      .pipe(\n        mergeMap((changes) => this.changeVisibility(changes)),\n      )\n      .subscribe({\n        complete: handleStateChanged,\n        error: handleStateChanged,\n      });\n    return undefined;\n  }\n\n  private changeVisibility(changes: CheckboxStateChange[]) {\n    return from(changes)\n      .pipe(\n        mergeMap(({ nodeItem, newState }) => {\n          // istanbul ignore if\n          if (!this._visibilityHandler)\n            return EMPTY;\n          this._isChangingVisibility = true;\n          return from(this._visibilityHandler.changeVisibility(nodeItem, this.getNodeKey(nodeItem), newState === CheckBoxState.On));\n        }, 1),\n      );\n  }\n\n  private async updateCheckboxes(affectedNodes?: string[], visibilityStatus?: Map<string, VisibilityStatus>) {\n    const changes = await (affectedNodes ? this.collectAffectedNodesCheckboxInfos(affectedNodes, visibilityStatus) : this.collectAllNodesCheckboxInfos(visibilityStatus));\n    this.updateModel(changes);\n  }\n\n  private updateModel(changes: Map<string, CheckBoxInfo>) {\n    this.modelSource.modifyModel((model) => {\n      for (const [nodeId, checkboxInfo] of changes) {\n        const node = model.getNode(nodeId);\n        // istanbul ignore if\n        if (!node)\n          continue;\n\n        node.checkbox.isDisabled = checkboxInfo.isDisabled;\n        node.checkbox.isVisible = checkboxInfo.isVisible;\n        node.checkbox.state = checkboxInfo.state;\n        node.checkbox.tooltip = checkboxInfo.tooltip;\n      }\n    });\n  }\n\n  private async collectAffectedNodesCheckboxInfos(affectedNodes: string[], visibilityStatus?: Map<string, VisibilityStatus>) {\n    const nodeStates = new Map<string, CheckBoxInfo>();\n    if (affectedNodes.length === 0)\n      return nodeStates;\n\n    await Promise.all(affectedNodes.map(async (nodeId) => {\n      const node = this.modelSource.getModel().getNode(nodeId);\n      // istanbul ignore else\n      if (node)\n        nodeStates.set(nodeId, await this.getNodeCheckBoxInfo(node, visibilityStatus));\n    }));\n    return nodeStates;\n  }\n\n  private async collectAllNodesCheckboxInfos(visibilityStatus?: Map<string, VisibilityStatus>) {\n    const nodeStates = new Map<string, CheckBoxInfo>();\n    for (const node of this.modelSource.getModel().iterateTreeModelNodes()) {\n      nodeStates.set(node.id, await this.getNodeCheckBoxInfo(node, visibilityStatus));\n    }\n    return nodeStates;\n  }\n\n  private async getNodeCheckBoxInfo(node: TreeModelNode, visibilityStatus?: Map<string, VisibilityStatus>): Promise<CheckBoxInfo> {\n    if (!this._visibilityHandler)\n      return { ...node.checkbox, isVisible: false };\n\n    const result = visibilityStatus?.get(node.id) ?? this._visibilityHandler.getVisibilityStatus(node.item, this.getNodeKey(node.item));\n\n    if (isPromiseLike(result))\n      return this.createCheckboxInfo(await result);\n    return this.createCheckboxInfo(result);\n  }\n\n  private createCheckboxInfo(status: VisibilityStatus): CheckBoxInfo {\n    return {\n      state: visibilityStateToCheckboxState(status),\n      isDisabled: status.isDisabled || false,\n      isVisible: true,\n      tooltip: status.tooltip,\n    };\n  }\n}\n\nconst visibilityStateToCheckboxState = (status: VisibilityStatus) => {\n  switch (status.state) {\n    case \"visible\":\n      return CheckBoxState.On;\n    // istanbul ignore next\n    case \"partial\":\n      return CheckBoxState.Partial;\n    case \"hidden\":\n    default:\n      return CheckBoxState.Off;\n  }\n};\n"]}
+{"version":3,"file":"VisibilityTreeEventHandler.js","sourceRoot":"","sources":["../../../../src/components/trees/VisibilityTreeEventHandler.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*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module IModelComponents\n */\n\nimport { Observable } from \"rxjs\";\nimport { EMPTY } from \"rxjs/internal/observable/empty\";\nimport { from } from \"rxjs/internal/observable/from\";\nimport { map } from \"rxjs/internal/operators/map\";\nimport { mergeMap } from \"rxjs/internal/operators/mergeMap\";\nimport {\n  CheckBoxInfo, CheckboxStateChange, TreeCheckboxStateChangeEventArgs, TreeModelNode, TreeNodeItem, TreeSelectionChange,\n  TreeSelectionModificationEventArgs, TreeSelectionReplacementEventArgs,\n} from \"@itwin/components-react\";\nimport { BeEvent, IDisposable } from \"@itwin/core-bentley\";\nimport { CheckBoxState, isPromiseLike } from \"@itwin/core-react\";\nimport { NodeKey } from \"@itwin/presentation-common\";\nimport { UnifiedSelectionTreeEventHandler, UnifiedSelectionTreeEventHandlerParams } from \"@itwin/presentation-components\";\n\n/**\n * Data structure that describes instance visibility status.\n * @alpha\n */\nexport interface VisibilityStatus {\n  state: \"visible\" | \"partial\" | \"hidden\";\n  isDisabled?: boolean;\n  tooltip?: string;\n}\n\n/**\n * Type definition of visibility change event listener.\n * @alpha\n */\nexport type VisibilityChangeListener = (nodeIds?: string[], visibilityStatus?: Map<string, VisibilityStatus>) => void;\n\n/**\n * Visibility handler used to change or get visibility of instances represented by the tree node.\n * @alpha\n */\nexport interface IVisibilityHandler extends IDisposable {\n  getVisibilityStatus(node: TreeNodeItem, nodeKey: NodeKey): VisibilityStatus | Promise<VisibilityStatus>;\n  changeVisibility(node: TreeNodeItem, nodeKey: NodeKey, shouldDisplay: boolean): Promise<void>;\n  onVisibilityChange: BeEvent<VisibilityChangeListener>;\n}\n\n/**\n * Type definition of predicate used to decide if node can be selected.\n * @alpha\n */\nexport type VisibilityTreeSelectionPredicate = (key: NodeKey, node: TreeNodeItem) => boolean;\n\n/**\n * Parameters for [[VisibilityTreeEventHandler]]\n * @alpha\n */\nexport interface VisibilityTreeEventHandlerParams extends UnifiedSelectionTreeEventHandlerParams {\n  visibilityHandler: IVisibilityHandler | undefined;\n  selectionPredicate?: VisibilityTreeSelectionPredicate;\n}\n\n/**\n * Base event handler for visibility tree.\n * @alpha\n */\nexport class VisibilityTreeEventHandler extends UnifiedSelectionTreeEventHandler {\n  private _visibilityHandler: IVisibilityHandler | undefined;\n  private _selectionPredicate?: VisibilityTreeSelectionPredicate;\n  private _listeners = new Array<() => void>();\n  private _isChangingVisibility: boolean;\n\n  constructor(params: VisibilityTreeEventHandlerParams) {\n    super(params);\n    this._visibilityHandler = params.visibilityHandler;\n    this._selectionPredicate = params.selectionPredicate;\n    this._isChangingVisibility = false;\n\n    if (this._visibilityHandler) {\n      this._listeners.push(this._visibilityHandler.onVisibilityChange.addListener(async (nodeIds, visibilityStatus) => {\n        if (this._isChangingVisibility)\n          return;\n        void this.updateCheckboxes(nodeIds, visibilityStatus);\n      }));\n    }\n\n    this._listeners.push(this.modelSource.onModelChanged.addListener(async ([_, changes]) => {\n      void this.updateCheckboxes([...changes.addedNodeIds, ...changes.modifiedNodeIds]);\n    }));\n    this.updateCheckboxes(); // eslint-disable-line @typescript-eslint/no-floating-promises\n  }\n\n  public override dispose() {\n    super.dispose();\n    this._listeners.forEach((disposeFunc) => disposeFunc());\n  }\n\n  private filterSelectionItems(items: TreeNodeItem[]) {\n    // istanbul ignore if\n    if (!this._selectionPredicate)\n      return items;\n\n    return items.filter((item) => this._selectionPredicate!(this.getNodeKey(item), item));\n  }\n\n  public override onSelectionModified({ modifications }: TreeSelectionModificationEventArgs) {\n    const filteredModification = new Observable<TreeSelectionChange>((subscriber) => modifications.subscribe(subscriber)).pipe(\n      map(({ selectedNodeItems, deselectedNodeItems }) => {\n        return {\n          selectedNodeItems: this.filterSelectionItems(selectedNodeItems),\n          deselectedNodeItems: this.filterSelectionItems(deselectedNodeItems),\n        };\n      }),\n    );\n    return super.onSelectionModified({ modifications: filteredModification });\n  }\n\n  public override onSelectionReplaced({ replacements }: TreeSelectionReplacementEventArgs) {\n    const filteredReplacements = new Observable<{ selectedNodeItems: TreeNodeItem[] }>((subscriber) => replacements.subscribe(subscriber)).pipe(\n      map(({ selectedNodeItems }) => {\n        return {\n          selectedNodeItems: this.filterSelectionItems(selectedNodeItems),\n        };\n      }),\n    );\n    return super.onSelectionReplaced({ replacements: filteredReplacements });\n  }\n\n  public override onCheckboxStateChanged(event: TreeCheckboxStateChangeEventArgs) {\n    const handleStateChanged = () => {\n      this._isChangingVisibility = false;\n      void this.updateCheckboxes();\n    };\n    // istanbul ignore if\n    if (!this._visibilityHandler)\n      return undefined;\n\n    // eslint-disable-next-line deprecation/deprecation\n    from(event.stateChanges)\n      .pipe(\n        // eslint-disable-next-line deprecation/deprecation\n        mergeMap((changes) => this.changeVisibility(changes)),\n      )\n      // eslint-disable-next-line deprecation/deprecation\n      .subscribe({\n        complete: handleStateChanged,\n        error: handleStateChanged,\n      });\n    return undefined;\n  }\n\n  private changeVisibility(changes: CheckboxStateChange[]) {\n    // eslint-disable-next-line deprecation/deprecation\n    return from(changes)\n      .pipe(\n        // eslint-disable-next-line deprecation/deprecation\n        mergeMap(({ nodeItem, newState }) => {\n          // istanbul ignore if\n          if (!this._visibilityHandler)\n            return EMPTY;\n          this._isChangingVisibility = true;\n          // eslint-disable-next-line deprecation/deprecation\n          return from(this._visibilityHandler.changeVisibility(nodeItem, this.getNodeKey(nodeItem), newState === CheckBoxState.On));\n        }, 1),\n      );\n  }\n\n  private async updateCheckboxes(affectedNodes?: string[], visibilityStatus?: Map<string, VisibilityStatus>) {\n    const changes = await (affectedNodes ? this.collectAffectedNodesCheckboxInfos(affectedNodes, visibilityStatus) : this.collectAllNodesCheckboxInfos(visibilityStatus));\n    this.updateModel(changes);\n  }\n\n  private updateModel(changes: Map<string, CheckBoxInfo>) {\n    this.modelSource.modifyModel((model) => {\n      for (const [nodeId, checkboxInfo] of changes) {\n        const node = model.getNode(nodeId);\n        // istanbul ignore if\n        if (!node)\n          continue;\n\n        node.checkbox.isDisabled = checkboxInfo.isDisabled;\n        node.checkbox.isVisible = checkboxInfo.isVisible;\n        node.checkbox.state = checkboxInfo.state;\n        node.checkbox.tooltip = checkboxInfo.tooltip;\n      }\n    });\n  }\n\n  private async collectAffectedNodesCheckboxInfos(affectedNodes: string[], visibilityStatus?: Map<string, VisibilityStatus>) {\n    const nodeStates = new Map<string, CheckBoxInfo>();\n    if (affectedNodes.length === 0)\n      return nodeStates;\n\n    await Promise.all(affectedNodes.map(async (nodeId) => {\n      const node = this.modelSource.getModel().getNode(nodeId);\n      // istanbul ignore else\n      if (node)\n        nodeStates.set(nodeId, await this.getNodeCheckBoxInfo(node, visibilityStatus));\n    }));\n    return nodeStates;\n  }\n\n  private async collectAllNodesCheckboxInfos(visibilityStatus?: Map<string, VisibilityStatus>) {\n    const nodeStates = new Map<string, CheckBoxInfo>();\n    for (const node of this.modelSource.getModel().iterateTreeModelNodes()) {\n      nodeStates.set(node.id, await this.getNodeCheckBoxInfo(node, visibilityStatus));\n    }\n    return nodeStates;\n  }\n\n  private async getNodeCheckBoxInfo(node: TreeModelNode, visibilityStatus?: Map<string, VisibilityStatus>): Promise<CheckBoxInfo> {\n    if (!this._visibilityHandler)\n      return { ...node.checkbox, isVisible: false };\n\n    const result = visibilityStatus?.get(node.id) ?? this._visibilityHandler.getVisibilityStatus(node.item, this.getNodeKey(node.item));\n\n    if (isPromiseLike(result))\n      return this.createCheckboxInfo(await result);\n    return this.createCheckboxInfo(result);\n  }\n\n  private createCheckboxInfo(status: VisibilityStatus): CheckBoxInfo {\n    return {\n      state: visibilityStateToCheckboxState(status),\n      isDisabled: status.isDisabled || false,\n      isVisible: true,\n      tooltip: status.tooltip,\n    };\n  }\n}\n\nconst visibilityStateToCheckboxState = (status: VisibilityStatus) => {\n  switch (status.state) {\n    case \"visible\":\n      return CheckBoxState.On;\n    // istanbul ignore next\n    case \"partial\":\n      return CheckBoxState.Partial;\n    case \"hidden\":\n    default:\n      return CheckBoxState.Off;\n  }\n};\n"]}

package/lib/esm/components/trees/VisibilityTreeRenderer.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import type { IPresentationTreeDataProvider } from "@itwin/presentation-components";
-import type { AbstractTreeNodeLoaderWithProvider, TreeNodeRendererProps, TreeRendererProps } from "@itwin/components-react";
-import type { NodeCheckboxRenderProps } from "@itwin/core-react";
-import type { VisibilityTreeFilterInfo } from "./Common";
+import { AbstractTreeNodeLoaderWithProvider, TreeNodeRendererProps, TreeRendererProps } from "@itwin/components-react";
+import { NodeCheckboxRenderProps } from "@itwin/core-react";
+import { IPresentationTreeDataProvider } from "@itwin/presentation-components";
+import { VisibilityTreeFilterInfo } from "./Common";
 /**
  * Creates Visibility tree renderer which renders nodes with eye checkbox.
  * @alpha

package/lib/esm/components/trees/VisibilityTreeRenderer.js

@@ -3,7 +3,7 @@
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 import * as React from "react";
-import { TreeImageLoader, TreeNodeRenderer, TreeRenderer } from "@itwin/components-react";
+import { TreeImageLoader, TreeNodeRenderer, TreeRenderer, } from "@itwin/components-react";
 import { ImageCheckBox } from "@itwin/core-react";
 import { useControlledPresentationTreeFiltering } from "@itwin/presentation-components";
 /**

package/lib/esm/components/trees/VisibilityTreeRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"VisibilityTreeRenderer.js","sourceRoot":"","sources":["../../../../src/components/trees/VisibilityTreeRenderer.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n\nimport * as React from \"react\";\nimport { TreeImageLoader, TreeNodeRenderer, TreeRenderer } from \"@itwin/components-react\";\nimport { ImageCheckBox } from \"@itwin/core-react\";\nimport { useControlledPresentationTreeFiltering } from \"@itwin/presentation-components\";\nimport type { IPresentationTreeDataProvider } from \"@itwin/presentation-components\";\nimport type {\n  AbstractTreeNodeLoaderWithProvider, TreeNodeRendererProps, TreeRendererProps,\n} from \"@itwin/components-react\";\nimport type { NodeCheckboxRenderProps } from \"@itwin/core-react\";\nimport type { VisibilityTreeFilterInfo } from \"./Common\";\n\n/**\n * Creates Visibility tree renderer which renders nodes with eye checkbox.\n * @alpha\n */\nexport const useVisibilityTreeRenderer = (iconsEnabled: boolean, descriptionsEnabled: boolean) => {\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const nodeRenderer = React.useCallback(createVisibilityTreeNodeRenderer(iconsEnabled, descriptionsEnabled), [iconsEnabled, descriptionsEnabled]);\n  return React.useCallback((props: TreeRendererProps) => (\n    <TreeRenderer\n      {...props}\n      nodeRenderer={nodeRenderer}\n    />\n  ), [nodeRenderer]);\n};\n\nconst imageLoader = new TreeImageLoader();\n/**\n * Creates node renderer which renders node with eye checkbox.\n * @alpha\n */\nexport const createVisibilityTreeNodeRenderer = (iconsEnabled: boolean, descriptionEnabled: boolean) => {\n  return (props: TreeNodeRendererProps) => ( // eslint-disable-line react/display-name\n    <TreeNodeRenderer\n      {...props}\n      checkboxRenderer={visibilityTreeNodeCheckboxRenderer}\n      descriptionEnabled={descriptionEnabled}\n      imageLoader={iconsEnabled ? imageLoader : undefined}\n      className=\"with-checkbox\"\n    />\n  );\n};\n\n/**\n * Checkbox renderer that renders an eye.\n * @alpha\n */\nexport const visibilityTreeNodeCheckboxRenderer = (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/**\n * Filters data provider used in supplied node loader and invokes onFilterApplied when filtering is completed.\n * @alpha\n */\nexport const useVisibilityTreeFiltering = (\n  nodeLoader: AbstractTreeNodeLoaderWithProvider<IPresentationTreeDataProvider>,\n  filterInfo?: VisibilityTreeFilterInfo,\n  onFilterApplied?: (filteredDataProvider: IPresentationTreeDataProvider, matchesCount: number) => void,\n) => {\n  const { filter, activeMatchIndex } = filterInfo ?? { filter: undefined, activeMatchIndex: undefined };\n  const {\n    filteredNodeLoader,\n    isFiltering,\n    matchesCount,\n    nodeHighlightingProps,\n  } = useControlledPresentationTreeFiltering({ nodeLoader, filter, activeMatchIndex });\n\n  React.useEffect(\n    () => {\n      if (filter && matchesCount !== undefined && filteredNodeLoader !== nodeLoader)\n        onFilterApplied && onFilterApplied(filteredNodeLoader.dataProvider, matchesCount);\n    },\n    [filter, matchesCount, nodeLoader, filteredNodeLoader, onFilterApplied],\n  );\n\n  return { filteredNodeLoader, isFiltering, nodeHighlightingProps };\n};\n\n/**\n * Properties for [[VisibilityTreeNoFilteredData]] component.\n * @alpha\n */\nexport interface VisibilityTreeNoFilteredDataProps {\n  title: string;\n  message: string;\n}\n\n/**\n * Renders message that no nodes was found for filter.\n * @alpha\n */\nexport function VisibilityTreeNoFilteredData(props: VisibilityTreeNoFilteredDataProps) {\n  return (\n    <div className=\"components-tree-errormessage\">\n      <span className=\"errormessage-header\">{props.title}</span>\n      <span className=\"errormessage-body\">{props.message}</span>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"VisibilityTreeRenderer.js","sourceRoot":"","sources":["../../../../src/components/trees/VisibilityTreeRenderer.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n\nimport * as React from \"react\";\nimport {\n  AbstractTreeNodeLoaderWithProvider, TreeImageLoader, TreeNodeRenderer, TreeNodeRendererProps, TreeRenderer, TreeRendererProps,\n} from \"@itwin/components-react\";\nimport { ImageCheckBox, NodeCheckboxRenderProps } from \"@itwin/core-react\";\nimport { IPresentationTreeDataProvider, useControlledPresentationTreeFiltering } from \"@itwin/presentation-components\";\nimport { VisibilityTreeFilterInfo } from \"./Common\";\n\n/**\n * Creates Visibility tree renderer which renders nodes with eye checkbox.\n * @alpha\n */\nexport const useVisibilityTreeRenderer = (iconsEnabled: boolean, descriptionsEnabled: boolean) => {\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const nodeRenderer = React.useCallback(createVisibilityTreeNodeRenderer(iconsEnabled, descriptionsEnabled), [iconsEnabled, descriptionsEnabled]);\n  return React.useCallback((props: TreeRendererProps) => (\n    <TreeRenderer\n      {...props}\n      nodeRenderer={nodeRenderer}\n    />\n  ), [nodeRenderer]);\n};\n\nconst imageLoader = new TreeImageLoader();\n/**\n * Creates node renderer which renders node with eye checkbox.\n * @alpha\n */\nexport const createVisibilityTreeNodeRenderer = (iconsEnabled: boolean, descriptionEnabled: boolean) => {\n  return (props: TreeNodeRendererProps) => ( // eslint-disable-line react/display-name\n    <TreeNodeRenderer\n      {...props}\n      checkboxRenderer={visibilityTreeNodeCheckboxRenderer}\n      descriptionEnabled={descriptionEnabled}\n      imageLoader={iconsEnabled ? imageLoader : undefined}\n      className=\"with-checkbox\"\n    />\n  );\n};\n\n/**\n * Checkbox renderer that renders an eye.\n * @alpha\n */\nexport const visibilityTreeNodeCheckboxRenderer = (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/**\n * Filters data provider used in supplied node loader and invokes onFilterApplied when filtering is completed.\n * @alpha\n */\nexport const useVisibilityTreeFiltering = (\n  nodeLoader: AbstractTreeNodeLoaderWithProvider<IPresentationTreeDataProvider>,\n  filterInfo?: VisibilityTreeFilterInfo,\n  onFilterApplied?: (filteredDataProvider: IPresentationTreeDataProvider, matchesCount: number) => void,\n) => {\n  const { filter, activeMatchIndex } = filterInfo ?? { filter: undefined, activeMatchIndex: undefined };\n  const {\n    filteredNodeLoader,\n    isFiltering,\n    matchesCount,\n    nodeHighlightingProps,\n  } = useControlledPresentationTreeFiltering({ nodeLoader, filter, activeMatchIndex });\n\n  React.useEffect(\n    () => {\n      if (filter && matchesCount !== undefined && filteredNodeLoader !== nodeLoader)\n        onFilterApplied && onFilterApplied(filteredNodeLoader.dataProvider, matchesCount);\n    },\n    [filter, matchesCount, nodeLoader, filteredNodeLoader, onFilterApplied],\n  );\n\n  return { filteredNodeLoader, isFiltering, nodeHighlightingProps };\n};\n\n/**\n * Properties for [[VisibilityTreeNoFilteredData]] component.\n * @alpha\n */\nexport interface VisibilityTreeNoFilteredDataProps {\n  title: string;\n  message: string;\n}\n\n/**\n * Renders message that no nodes was found for filter.\n * @alpha\n */\nexport function VisibilityTreeNoFilteredData(props: VisibilityTreeNoFilteredDataProps) {\n  return (\n    <div className=\"components-tree-errormessage\">\n      <span className=\"errormessage-header\">{props.title}</span>\n      <span className=\"errormessage-body\">{props.message}</span>\n    </div>\n  );\n}\n"]}