@itwin/tree-widget-react 0.1.1

package/lib/cjs/components/search-bar/SearchBox.d.ts

@@ -0,0 +1,76 @@
+/** @module SearchBox */
+import * as React from "react";
+import { CommonProps } from "@itwin/core-react";
+import "./SearchBox.scss";
+export interface SearchBoxProps extends CommonProps {
+    /** value to set SearchBox */
+    searchText?: string;
+    /** placeholder value to show in gray before anything is entered in */
+    placeholder?: string;
+    /** frequency to poll for changes in value */
+    valueChangedDelay?: number;
+    /** listens for <Enter> keypress */
+    onEnterPressed?: () => void;
+    /** listens for <Esc> keypress */
+    onEscPressed?: () => void;
+    /** listens for onClick event for Clear (x) icon */
+    onClear?: () => void;
+    /** Search or clear icon click */
+    onIconClick?: () => void;
+    /** Filtering is cleared after everything's loaded */
+    onFilterStart: (newFilter: string) => void;
+    /** Filtering is cleared after everything's loaded */
+    onFilterClear?: () => void;
+    /** Filtering is cleared after everything's loaded */
+    onFilterCancel?: () => void;
+    /** Tells the component if parent component is still handling the filtering */
+    filteringInProgress?: boolean;
+    /** Total number of results/entries */
+    resultCount: number;
+    /** Callback to currently selected result/entry change */
+    onSelectedChanged: (index: number) => void;
+    /** Specify that the <input> element should automatically get focus */
+    autoFocus?: boolean;
+}
+/**
+ * Enumeration of possible component contexts
+ * @internal
+ */
+export declare enum InputContext {
+    /** Component is ready to filter */
+    ReadyToFilter = 0,
+    /** Component's parent is currently filtering */
+    FilteringInProgress = 1,
+    /** Component's parent has finished filtering */
+    FilteringFinished = 2,
+    /** Component's parent has finished filtering, but ResultSelector(stepping through results) is not enabled */
+    FilteringFinishedWithNoStepping = 3
+}
+interface SearchBoxState {
+    searchText?: string;
+    /** @internal */
+    context: InputContext;
+    /** Currently selected index */
+    selectedIndex: number;
+}
+export declare class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxState> {
+    private _inputElement;
+    private _timeoutId;
+    constructor(props: SearchBoxProps);
+    focus(): void;
+    private _trackChange;
+    private _handleKeyDown;
+    private _handleIconClick;
+    private _unsetTimeout;
+    componentDidUpdate(prevProps: SearchBoxProps): Promise<void>;
+    componentWillUnmount(): void;
+    /** @internal */
+    static getDerivedStateFromProps(props: SearchBoxProps, state: SearchBoxState): {
+        context: InputContext;
+    } | null;
+    private _onPrevClick;
+    private _onNextClick;
+    render(): JSX.Element;
+}
+export {};
+//# sourceMappingURL=SearchBox.d.ts.map

package/lib/cjs/components/search-bar/SearchBox.js

@@ -0,0 +1,184 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @module SearchBox */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchBox = exports.InputContext = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const IconButton_1 = require("../IconButton");
+require("./SearchBox.scss");
+const TreeWidget_1 = require("../../TreeWidget");
+/**
+ * Enumeration of possible component contexts
+ * @internal
+ */
+var InputContext;
+(function (InputContext) {
+    /** Component is ready to filter */
+    InputContext[InputContext["ReadyToFilter"] = 0] = "ReadyToFilter";
+    /** Component's parent is currently filtering */
+    InputContext[InputContext["FilteringInProgress"] = 1] = "FilteringInProgress";
+    /** Component's parent has finished filtering */
+    InputContext[InputContext["FilteringFinished"] = 2] = "FilteringFinished";
+    /** Component's parent has finished filtering, but ResultSelector(stepping through results) is not enabled */
+    InputContext[InputContext["FilteringFinishedWithNoStepping"] = 3] = "FilteringFinishedWithNoStepping";
+})(InputContext = exports.InputContext || (exports.InputContext = {}));
+class SearchBox extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this._inputElement = null;
+        this._timeoutId = 0;
+        this._trackChange = (_event) => {
+            let searchText = "";
+            // istanbul ignore else
+            if (this._inputElement)
+                searchText = this._inputElement.value;
+            this.setState((_prevState) => {
+                return { searchText };
+            }, () => {
+                if (this.props.valueChangedDelay) {
+                    this._unsetTimeout();
+                    this._timeoutId = window.setTimeout(() => {
+                        this.setState({
+                            context: InputContext.ReadyToFilter,
+                            selectedIndex: 0,
+                        });
+                        this.props.onSelectedChanged(0);
+                        this.props.onFilterStart(this.state.searchText);
+                    }, this.props.valueChangedDelay);
+                }
+                else {
+                    this.setState({ context: InputContext.ReadyToFilter });
+                    this.props.onFilterStart(this.state.searchText);
+                }
+            });
+        };
+        this._handleKeyDown = (e) => {
+            switch (e.key) {
+                case "Escape":
+                    // istanbul ignore else
+                    if (this.props.onEscPressed)
+                        this.props.onEscPressed();
+                    break;
+                case "Enter":
+                    // istanbul ignore else
+                    if (this.props.onEnterPressed)
+                        this.props.onEnterPressed();
+                    break;
+            }
+        };
+        this._handleIconClick = (_event) => {
+            // istanbul ignore else
+            if (this._inputElement) {
+                const clear = this.state.searchText !== "";
+                this._inputElement.value = "";
+                // istanbul ignore else
+                if (clear && this.props.onClear)
+                    this.props.onClear();
+                this._inputElement.focus();
+            }
+            this._trackChange();
+            if (this.props.onIconClick)
+                this.props.onIconClick();
+        };
+        this._unsetTimeout = () => {
+            if (this._timeoutId) {
+                window.clearTimeout(this._timeoutId);
+                this._timeoutId = 0;
+            }
+        };
+        this._onPrevClick = () => {
+            if (this.state.selectedIndex > 1) {
+                this.props.onSelectedChanged(this.state.selectedIndex - 1);
+                this.setState((state) => ({ selectedIndex: state.selectedIndex - 1 }));
+            }
+        };
+        this._onNextClick = () => {
+            if (this.state.selectedIndex < this.props.resultCount) {
+                this.props.onSelectedChanged(this.state.selectedIndex + 1);
+                this.setState((state) => ({ selectedIndex: state.selectedIndex + 1 }));
+            }
+        };
+        this.state = {
+            searchText: this.props.searchText,
+            context: InputContext.ReadyToFilter,
+            selectedIndex: 0,
+        };
+    }
+    focus() {
+        // istanbul ignore else
+        if (this._inputElement) {
+            this._inputElement.focus();
+        }
+    }
+    async componentDidUpdate(prevProps) {
+        if (prevProps.searchText !== this.props.searchText) {
+            const searchText = this.props.searchText;
+            this.setState({ searchText });
+        }
+        this.focus();
+    }
+    componentWillUnmount() {
+        this._unsetTimeout();
+    }
+    /** @internal */
+    static getDerivedStateFromProps(props, state) {
+        if (state.context === InputContext.FilteringInProgress &&
+            !props.filteringInProgress) {
+            if (state.searchText)
+                return { context: InputContext.FilteringFinished };
+            else
+                return { context: InputContext.FilteringFinishedWithNoStepping };
+        }
+        else if (state.context === InputContext.ReadyToFilter &&
+            props.filteringInProgress) {
+            return { context: InputContext.FilteringInProgress };
+        }
+        return null;
+    }
+    render() {
+        const { autoFocus, className, style, resultCount, placeholder, } = this.props;
+        const { searchText, selectedIndex } = this.state;
+        const searchClassName = classnames_1.default("tree-widget-searchbox", className);
+        const showCount = resultCount > 0;
+        const isPrevEnabled = selectedIndex > 1;
+        const isNextEnabled = selectedIndex < resultCount;
+        return (React.createElement("div", { className: searchClassName, style: style },
+            React.createElement("input", { value: searchText, ref: (el) => {
+                    this._inputElement = el;
+                }, autoFocus: autoFocus, onChange: this._trackChange, onKeyDown: this._handleKeyDown, onPaste: this._trackChange, onCut: this._trackChange, placeholder: placeholder ? placeholder : TreeWidget_1.TreeWidget.translate("searchbox.search") }),
+            React.createElement("div", { className: "searchbox-stepping-container" },
+                showCount && (React.createElement("span", { className: "searchbox-stepping-count" }, `${selectedIndex}/${resultCount}`)),
+                React.createElement("div", { className: "searchbox-separator" }),
+                React.createElement(IconButton_1.IconButton, { className: "searchbox-step-button", icon: "icon-chevron-up", disabled: !isPrevEnabled, onClick: this._onPrevClick, title: "Previous" }),
+                React.createElement(IconButton_1.IconButton, { className: "searchbox-step-button", icon: "icon-chevron-down", disabled: !isNextEnabled, onClick: this._onNextClick, title: "Next" })),
+            React.createElement("span", { className: "searchbox-step-button icon icon-close searchbox-close-button", onClick: this._handleIconClick })));
+    }
+}
+exports.SearchBox = SearchBox;
+//# sourceMappingURL=SearchBox.js.map

package/lib/cjs/components/search-bar/SearchBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBox.js","sourceRoot":"","sources":["../../../../src/components/search-bar/SearchBox.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/** @module SearchBox */\n\nimport * as React from \"react\";\nimport classnames from \"classnames\";\nimport { CommonProps } from \"@itwin/core-react\";\nimport { IconButton } from \"../IconButton\";\nimport \"./SearchBox.scss\";\nimport { TreeWidget } from \"../../TreeWidget\";\n\nexport interface SearchBoxProps extends CommonProps {\n  /** value to set SearchBox */\n  searchText?: string;\n  /** placeholder value to show in gray before anything is entered in */\n  placeholder?: string;\n  /** frequency to poll for changes in value */\n  valueChangedDelay?: number;\n  /** listens for <Enter> keypress */\n  onEnterPressed?: () => void;\n  /** listens for <Esc> keypress */\n  onEscPressed?: () => void;\n  /** listens for onClick event for Clear (x) icon */\n  onClear?: () => void;\n  /** Search or clear icon click */\n  onIconClick?: () => void;\n  /** Filtering is cleared after everything's loaded */\n  onFilterStart: (newFilter: string) => void;\n  /** Filtering is cleared after everything's loaded */\n  onFilterClear?: () => void;\n  /** Filtering is cleared after everything's loaded */\n  onFilterCancel?: () => void;\n  /** Tells the component if parent component is still handling the filtering */\n  filteringInProgress?: boolean;\n  /** Total number of results/entries */\n  resultCount: number;\n  /** Callback to currently selected result/entry change */\n  onSelectedChanged: (index: number) => void;\n  /** Specify that the <input> element should automatically get focus */\n  autoFocus?: boolean;\n}\n\n/**\n * Enumeration of possible component contexts\n * @internal\n */\nexport enum InputContext {\n  /** Component is ready to filter */\n  ReadyToFilter,\n  /** Component's parent is currently filtering */\n  FilteringInProgress,\n  /** Component's parent has finished filtering */\n  FilteringFinished,\n  /** Component's parent has finished filtering, but ResultSelector(stepping through results) is not enabled */\n  FilteringFinishedWithNoStepping,\n}\n\ninterface SearchBoxState {\n  searchText?: string;\n  /** @internal */\n  context: InputContext;\n  /** Currently selected index */\n  selectedIndex: number;\n}\n\nexport class SearchBox extends React.PureComponent<\n  SearchBoxProps,\n  SearchBoxState\n> {\n  private _inputElement: HTMLInputElement | null = null;\n  private _timeoutId: number = 0;\n\n  constructor(props: SearchBoxProps) {\n    super(props);\n\n    this.state = {\n      searchText: this.props.searchText,\n      context: InputContext.ReadyToFilter,\n      selectedIndex: 0,\n    };\n  }\n\n  public focus() {\n    // istanbul ignore else\n    if (this._inputElement) {\n      this._inputElement.focus();\n    }\n  }\n\n  private _trackChange = (_event?: any): void => {\n    let searchText = \"\";\n\n    // istanbul ignore else\n    if (this._inputElement) searchText = this._inputElement.value;\n\n    this.setState(\n      (_prevState) => {\n        return { searchText };\n      },\n      () => {\n        if (this.props.valueChangedDelay) {\n          this._unsetTimeout();\n          this._timeoutId = window.setTimeout(() => {\n            this.setState({\n              context: InputContext.ReadyToFilter,\n              selectedIndex: 0,\n            });\n            this.props.onSelectedChanged(0);\n            this.props.onFilterStart(this.state.searchText!);\n          }, this.props.valueChangedDelay);\n        } else {\n          this.setState({ context: InputContext.ReadyToFilter });\n          this.props.onFilterStart(this.state.searchText!);\n        }\n      }\n    );\n  };\n\n  private _handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    switch (e.key) {\n      case \"Escape\":\n        // istanbul ignore else\n        if (this.props.onEscPressed) this.props.onEscPressed();\n        break;\n      case \"Enter\":\n        // istanbul ignore else\n        if (this.props.onEnterPressed) this.props.onEnterPressed();\n        break;\n    }\n  };\n\n  private _handleIconClick = (_event: React.MouseEvent<HTMLElement>): void => {\n    // istanbul ignore else\n    if (this._inputElement) {\n      const clear = this.state.searchText !== \"\";\n      this._inputElement.value = \"\";\n      // istanbul ignore else\n      if (clear && this.props.onClear) this.props.onClear();\n      this._inputElement.focus();\n    }\n    this._trackChange();\n    if (this.props.onIconClick) this.props.onIconClick();\n  };\n\n  private _unsetTimeout = (): void => {\n    if (this._timeoutId) {\n      window.clearTimeout(this._timeoutId);\n      this._timeoutId = 0;\n    }\n  };\n\n  public async componentDidUpdate(prevProps: SearchBoxProps) {\n    if (prevProps.searchText !== this.props.searchText) {\n      const searchText = this.props.searchText;\n      this.setState({ searchText });\n    }\n\n    this.focus();\n  }\n\n  public componentWillUnmount() {\n    this._unsetTimeout();\n  }\n\n  /** @internal */\n  public static getDerivedStateFromProps(\n    props: SearchBoxProps,\n    state: SearchBoxState\n  ) {\n    if (\n      state.context === InputContext.FilteringInProgress &&\n      !props.filteringInProgress\n    ) {\n      if (state.searchText) return { context: InputContext.FilteringFinished };\n      else return { context: InputContext.FilteringFinishedWithNoStepping };\n    } else if (\n      state.context === InputContext.ReadyToFilter &&\n      props.filteringInProgress\n    ) {\n      return { context: InputContext.FilteringInProgress };\n    }\n    return null;\n  }\n\n  private _onPrevClick = () => {\n    if (this.state.selectedIndex > 1) {\n      this.props.onSelectedChanged(this.state.selectedIndex - 1);\n      this.setState((state) => ({ selectedIndex: state.selectedIndex - 1 }));\n    }\n  };\n\n  private _onNextClick = () => {\n    if (this.state.selectedIndex < this.props.resultCount) {\n      this.props.onSelectedChanged(this.state.selectedIndex + 1);\n      this.setState((state) => ({ selectedIndex: state.selectedIndex + 1 }));\n    }\n  };\n\n  public render() {\n    const {\n      autoFocus,\n      className,\n      style,\n      resultCount,\n      placeholder,\n    } = this.props;\n    const { searchText, selectedIndex } = this.state;\n    const searchClassName = classnames(\"tree-widget-searchbox\", className);\n    const showCount = resultCount > 0;\n    const isPrevEnabled = selectedIndex > 1;\n    const isNextEnabled = selectedIndex < resultCount;\n\n    return (\n      <div className={searchClassName} style={style}>\n        <input\n          value={searchText}\n          ref={(el) => {\n            this._inputElement = el;\n          }}\n          autoFocus={autoFocus}\n          onChange={this._trackChange}\n          onKeyDown={this._handleKeyDown}\n          onPaste={this._trackChange}\n          onCut={this._trackChange}\n          placeholder={\n            placeholder ? placeholder : TreeWidget.translate(\"searchbox.search\")\n          }\n        />\n        <div className=\"searchbox-stepping-container\">\n          {showCount && (\n            <span className=\"searchbox-stepping-count\">{`${selectedIndex}/${resultCount}`}</span>\n          )}\n          <div className=\"searchbox-separator\" />\n          <IconButton\n            className=\"searchbox-step-button\"\n            icon=\"icon-chevron-up\"\n            disabled={!isPrevEnabled}\n            onClick={this._onPrevClick}\n            title=\"Previous\"\n          />\n          <IconButton\n            className=\"searchbox-step-button\"\n            icon=\"icon-chevron-down\"\n            disabled={!isNextEnabled}\n            onClick={this._onNextClick}\n            title=\"Next\"\n          />\n        </div>\n        <span\n          className=\"searchbox-step-button icon icon-close searchbox-close-button\"\n          onClick={this._handleIconClick}\n        />\n      </div>\n    );\n  }\n}\n"]}

package/lib/cjs/components/search-bar/SearchBox.scss

@@ -0,0 +1,91 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/esm/core-react/index";
+
+.tree-widget-searchbox {
+  @include uicore-font-family;
+  display: flex;
+  align-items: center;
+  position: relative;
+  //default values (height, width, font-size, color)
+  height: 34px;
+  width: 12em;
+  font-size: $uicore-font-size;
+  color: $buic-text-color-reverse;
+  background: $buic-background-control;
+  border: 1px solid $buic-inputs-border;
+
+  input {
+    padding: 0 $uicore-s;
+    height: 100%;
+    width: 100%;
+    flex: 1;
+    background: $buic-background-control;
+    margin-right: $uicore-s;
+    color: $buic-text-color;
+    font-size: inherit;
+    box-sizing: border-box;
+    border: 0;
+
+    &::placeholder {
+      color: $buic-foreground-disabled;
+    }
+
+    &:focus-within,
+    &:focus,
+    &:active,
+    &[disabled],
+    &[disabled]:hover,
+    &[disabled]:active,
+    &[disabled]:focus {
+      border: 0;
+      outline: none;
+      outline-width: 0;
+      box-shadow: none;
+    }
+  }
+
+  .searchbox-stepping-container {
+    display: flex;
+    align-items: center;
+    right: 32px;
+    height: 100%;
+
+    .searchbox-stepping-count {
+      font-size: 12px;
+      color: $buic-text-color;
+      margin-right: $uicore-xs;
+      position: relative;
+      word-wrap: none;
+    }
+
+    .searchbox-separator {
+      height: 75%;
+      width: 1px;
+      margin: 0 $uicore-s;
+      background: $buic-inputs-border;
+    }
+  }
+
+  .searchbox-step-button {
+    height: 100%;
+    width: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    color: $buic-icon-color;
+    font-size: $uicore-font-size-small;
+    cursor: pointer;
+
+    &:hover {
+      color: $buic-accessory-primary;
+    }
+  }
+
+  .searchbox-close-button {
+    z-index: 1000;
+  }
+}

package/lib/cjs/components/trees/CategoriesTree.d.ts

@@ -0,0 +1,9 @@
+import { IModelConnection, Viewport } from "@itwin/core-frontend";
+import "./CategoriesTree.scss";
+export interface CategoriesTreeComponentProps {
+    iModel: IModelConnection;
+    allViewports?: boolean;
+    activeView?: Viewport;
+}
+export declare function CategoriesTreeComponent(props: CategoriesTreeComponentProps): JSX.Element;
+//# sourceMappingURL=CategoriesTree.d.ts.map

package/lib/cjs/components/trees/CategoriesTree.js

@@ -0,0 +1,76 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CategoriesTreeComponent = void 0;
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+const react_1 = __importStar(require("react"));
+const core_frontend_1 = require("@itwin/core-frontend");
+const appui_react_1 = require("@itwin/appui-react");
+const TreeFilteringState_1 = require("../TreeFilteringState");
+require("./CategoriesTree.scss");
+const TreeHeader_1 = require("../header/TreeHeader");
+const appui_react_2 = require("@itwin/appui-react");
+const core_react_1 = require("@itwin/core-react");
+function CategoriesTreeComponent(props) {
+    const { searchOptions, filterString, activeMatchIndex, onFilterApplied, filteredProvider, } = TreeFilteringState_1.useTreeFilteringState();
+    const [height, setHeight] = react_1.useState(0);
+    const [width, setWidth] = react_1.useState(0);
+    const handleResize = react_1.useCallback((w, h) => {
+        setHeight(h);
+        setWidth(w);
+    }, []);
+    const ref = core_react_1.useResizeObserver(handleResize);
+    const showAll = react_1.useCallback(async () => {
+        return appui_react_1.toggleAllCategories(core_frontend_1.IModelApp.viewManager, props.iModel, true, undefined, true, filteredProvider);
+    }, [props.iModel, filteredProvider]);
+    const hideAll = react_1.useCallback(async () => {
+        return appui_react_1.toggleAllCategories(core_frontend_1.IModelApp.viewManager, props.iModel, false, undefined, true, filteredProvider);
+    }, [props.iModel, filteredProvider]);
+    const invert = react_1.useCallback(async () => {
+        const activeView = core_frontend_1.IModelApp.viewManager.getFirstOpenView();
+        if (!activeView) {
+            return;
+        }
+        const ids = await appui_react_1.getCategories(props.iModel, activeView, filteredProvider);
+        let enabled = [];
+        let disabled = [];
+        for (const id of ids) {
+            if (activeView.view.viewsCategory(id)) {
+                enabled.push(id);
+            }
+            else {
+                disabled.push(id);
+            }
+        }
+        // Disable enabled
+        appui_react_2.CategoryVisibilityHandler.enableCategory(core_frontend_1.IModelApp.viewManager, props.iModel, enabled, false, true);
+        // Enable disabled
+        appui_react_2.CategoryVisibilityHandler.enableCategory(core_frontend_1.IModelApp.viewManager, props.iModel, disabled, true, true);
+    }, [props.iModel, filteredProvider]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(TreeHeader_1.TreeHeaderComponent, { searchOptions: searchOptions, showAll: showAll, hideAll: hideAll, invert: invert }),
+        react_1.default.createElement("div", { ref: ref, style: { width: "100%", height: "100%" } }, width && height && (react_1.default.createElement(appui_react_1.CategoryTree, { ...props, filterInfo: { filter: filterString, activeMatchIndex }, onFilterApplied: onFilterApplied, width: width, height: height })))));
+}
+exports.CategoriesTreeComponent = CategoriesTreeComponent;
+//# sourceMappingURL=CategoriesTree.js.map

package/lib/cjs/components/trees/CategoriesTree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategoriesTree.js","sourceRoot":"","sources":["../../../../src/components/trees/CategoriesTree.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 React, { useCallback, useState } from \"react\";\nimport {\n  IModelApp,\n  IModelConnection,\n  Viewport,\n} from \"@itwin/core-frontend\";\nimport {\n  CategoryTree,\n  toggleAllCategories,\n  getCategories,\n} from \"@itwin/appui-react\";\nimport { useTreeFilteringState } from \"../TreeFilteringState\";\nimport \"./CategoriesTree.scss\";\nimport { TreeHeaderComponent } from \"../header/TreeHeader\";\nimport { CategoryVisibilityHandler } from \"@itwin/appui-react\";\nimport { useResizeObserver } from \"@itwin/core-react\";\n\nexport interface CategoriesTreeComponentProps {\n  iModel: IModelConnection;\n  allViewports?: boolean;\n  activeView?: Viewport;\n}\n\nexport function CategoriesTreeComponent(props: CategoriesTreeComponentProps) {\n  const {\n    searchOptions,\n    filterString,\n    activeMatchIndex,\n    onFilterApplied,\n    filteredProvider,\n  } = useTreeFilteringState();\n\n  const [height, setHeight] = useState(0);\n  const [width, setWidth] = useState(0);\n  const handleResize = useCallback((w: number, h: number) => {\n    setHeight(h);\n    setWidth(w);\n  }, []);\n  const ref = useResizeObserver<HTMLDivElement>(handleResize);\n\n  const showAll = useCallback(async () => {\n    return toggleAllCategories(\n      IModelApp.viewManager,\n      props.iModel,\n      true,\n      undefined,\n      true,\n      filteredProvider\n    );\n  }, [props.iModel, filteredProvider]);\n\n  const hideAll = useCallback(async () => {\n    return toggleAllCategories(\n      IModelApp.viewManager,\n      props.iModel,\n      false,\n      undefined,\n      true,\n      filteredProvider\n    );\n  }, [props.iModel, filteredProvider]);\n\n  const invert = useCallback(async () => {\n    const activeView = IModelApp.viewManager.getFirstOpenView();\n    if (!activeView) {\n      return;\n    }\n\n    const ids = await getCategories(props.iModel, activeView, filteredProvider);\n    let enabled: string[] = [];\n    let disabled: string[] = [];\n    for (const id of ids) {\n      if (activeView.view.viewsCategory(id)) {\n        enabled.push(id);\n      } else {\n        disabled.push(id);\n      }\n    }\n    // Disable enabled\n    CategoryVisibilityHandler.enableCategory(\n      IModelApp.viewManager,\n      props.iModel,\n      enabled,\n      false,\n      true\n    );\n    // Enable disabled\n    CategoryVisibilityHandler.enableCategory(\n      IModelApp.viewManager,\n      props.iModel,\n      disabled,\n      true,\n      true\n    );\n  }, [props.iModel, filteredProvider]);\n\n  return (\n    <>\n      <TreeHeaderComponent\n        searchOptions={searchOptions}\n        showAll={showAll}\n        hideAll={hideAll}\n        invert={invert}\n      />\n      <div ref={ref} style={{ width: \"100%\", height: \"100%\" }}>\n        {width && height && (\n          <CategoryTree\n            {...props}\n            filterInfo={{ filter: filterString, activeMatchIndex }}\n            onFilterApplied={onFilterApplied}\n            width={width}\n            height={height}\n          />\n        )}\n      </div>\n    </>\n  );\n}\n"]}

package/lib/cjs/components/trees/CategoriesTree.scss

@@ -0,0 +1,13 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/esm/core-react/index";
+
+.tree-widget-category-tree-search-bar {
+  margin-bottom: $uicore-s;
+}
+
+.tree-widget-category-tree-toolbar-icon {
+  color: $buic-icon-color;
+}

package/lib/cjs/components/trees/ClassificationsTree.d.ts

@@ -0,0 +1,6 @@
+import { IModelConnection } from "@itwin/core-frontend";
+export interface ClassificationsTreeComponentProps {
+    iModel: IModelConnection;
+}
+export declare function ClassificationsTreeComponent(props: ClassificationsTreeComponentProps): JSX.Element;
+//# sourceMappingURL=ClassificationsTree.d.ts.map

package/lib/cjs/components/trees/ClassificationsTree.js

@@ -0,0 +1,43 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClassificationsTreeComponent = void 0;
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+const React = __importStar(require("react"));
+const TreeWithRuleset_1 = require("./TreeWithRuleset");
+const presentation_components_1 = require("@itwin/presentation-components");
+const ClassificationSystems_json_1 = __importDefault(require("../rulesets/ClassificationSystems.json"));
+function ClassificationsTreeComponent(props) {
+    const dataProvider = new presentation_components_1.PresentationTreeDataProvider({
+        imodel: props.iModel,
+        ruleset: ClassificationSystems_json_1.default.id,
+        pagingSize: 20,
+    });
+    return (React.createElement(TreeWithRuleset_1.SimpleTreeWithRuleset, { imodel: props.iModel, ruleSet: ClassificationSystems_json_1.default, dataProvider: dataProvider }));
+}
+exports.ClassificationsTreeComponent = ClassificationsTreeComponent;
+//# sourceMappingURL=ClassificationsTree.js.map

package/lib/cjs/components/trees/ClassificationsTree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClassificationsTree.js","sourceRoot":"","sources":["../../../../src/components/trees/ClassificationsTree.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;+FAG+F;AAC/F,6CAA+B;AAE/B,uDAA0D;AAE1D,4EAA8E;AAC9E,wGAAyE;AAMzE,SAAgB,4BAA4B,CAC1C,KAAwC;IAExC,MAAM,YAAY,GAAG,IAAI,sDAA4B,CAAC;QACpD,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,OAAO,EAAE,oCAAmB,CAAC,EAAE;QAC/B,UAAU,EAAE,EAAE;KACf,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,uCAAqB,IACpB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,OAAO,EAAE,oCAA8B,EACvC,YAAY,EAAE,YAAY,GAC1B,CACH,CAAC;AACJ,CAAC;AAhBD,oEAgBC","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 { Ruleset } from \"@itwin/presentation-common\";\nimport { SimpleTreeWithRuleset } from \"./TreeWithRuleset\";\nimport { IModelConnection } from \"@itwin/core-frontend\";\nimport { PresentationTreeDataProvider } from \"@itwin/presentation-components\";\nimport classificationRules from \"../rulesets/ClassificationSystems.json\";\n\nexport interface ClassificationsTreeComponentProps {\n  iModel: IModelConnection;\n}\n\nexport function ClassificationsTreeComponent(\n  props: ClassificationsTreeComponentProps\n) {\n  const dataProvider = new PresentationTreeDataProvider({\n    imodel: props.iModel,\n    ruleset: classificationRules.id,\n    pagingSize: 20,\n  });\n\n  return (\n    <SimpleTreeWithRuleset\n      imodel={props.iModel}\n      ruleSet={classificationRules as Ruleset}\n      dataProvider={dataProvider}\n    />\n  );\n}\n"]}

package/lib/cjs/components/trees/ModelsTree.d.ts

@@ -0,0 +1,10 @@
+import { IModelConnection, Viewport } from "@itwin/core-frontend";
+import "./ModelsTree.scss";
+export interface ModelTreeProps {
+    iModel: IModelConnection;
+    allViewports?: boolean;
+    activeView?: Viewport;
+    enableElementsClassGrouping?: boolean;
+}
+export declare const ModelsTreeComponent: (props: ModelTreeProps) => JSX.Element | null;
+//# sourceMappingURL=ModelsTree.d.ts.map