@itwin/tree-widget-react 0.1.1

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

@@ -0,0 +1,158 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @module SearchBox */
+import * as React from "react";
+import classnames from "classnames";
+import { IconButton } from "../IconButton";
+import "./SearchBox.scss";
+import { TreeWidget } from "../../TreeWidget";
+/**
+ * Enumeration of possible component contexts
+ * @internal
+ */
+export 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 || (InputContext = {}));
+export 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("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.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, { className: "searchbox-step-button", icon: "icon-chevron-up", disabled: !isPrevEnabled, onClick: this._onPrevClick, title: "Previous" }),
+                React.createElement(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 })));
+    }
+}
+//# sourceMappingURL=SearchBox.js.map

package/lib/esm/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/esm/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/esm/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/esm/components/trees/CategoriesTree.js

@@ -0,0 +1,53 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import React, { useCallback, useState } from "react";
+import { IModelApp, } from "@itwin/core-frontend";
+import { CategoryTree, toggleAllCategories, getCategories, } from "@itwin/appui-react";
+import { useTreeFilteringState } from "../TreeFilteringState";
+import "./CategoriesTree.scss";
+import { TreeHeaderComponent } from "../header/TreeHeader";
+import { CategoryVisibilityHandler } from "@itwin/appui-react";
+import { useResizeObserver } from "@itwin/core-react";
+export function CategoriesTreeComponent(props) {
+    const { searchOptions, filterString, activeMatchIndex, onFilterApplied, filteredProvider, } = useTreeFilteringState();
+    const [height, setHeight] = useState(0);
+    const [width, setWidth] = useState(0);
+    const handleResize = useCallback((w, h) => {
+        setHeight(h);
+        setWidth(w);
+    }, []);
+    const ref = useResizeObserver(handleResize);
+    const showAll = useCallback(async () => {
+        return toggleAllCategories(IModelApp.viewManager, props.iModel, true, undefined, true, filteredProvider);
+    }, [props.iModel, filteredProvider]);
+    const hideAll = useCallback(async () => {
+        return toggleAllCategories(IModelApp.viewManager, props.iModel, false, undefined, true, filteredProvider);
+    }, [props.iModel, filteredProvider]);
+    const invert = useCallback(async () => {
+        const activeView = IModelApp.viewManager.getFirstOpenView();
+        if (!activeView) {
+            return;
+        }
+        const ids = await 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
+        CategoryVisibilityHandler.enableCategory(IModelApp.viewManager, props.iModel, enabled, false, true);
+        // Enable disabled
+        CategoryVisibilityHandler.enableCategory(IModelApp.viewManager, props.iModel, disabled, true, true);
+    }, [props.iModel, filteredProvider]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(TreeHeaderComponent, { searchOptions: searchOptions, showAll: showAll, hideAll: hideAll, invert: invert }),
+        React.createElement("div", { ref: ref, style: { width: "100%", height: "100%" } }, width && height && (React.createElement(CategoryTree, { ...props, filterInfo: { filter: filterString, activeMatchIndex }, onFilterApplied: onFilterApplied, width: width, height: height })))));
+}
+//# sourceMappingURL=CategoriesTree.js.map

package/lib/esm/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/esm/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/esm/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/esm/components/trees/ClassificationsTree.js

@@ -0,0 +1,17 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import * as React from "react";
+import { SimpleTreeWithRuleset } from "./TreeWithRuleset";
+import { PresentationTreeDataProvider } from "@itwin/presentation-components";
+import classificationRules from "../rulesets/ClassificationSystems.json";
+export function ClassificationsTreeComponent(props) {
+    const dataProvider = new PresentationTreeDataProvider({
+        imodel: props.iModel,
+        ruleset: classificationRules.id,
+        pagingSize: 20,
+    });
+    return (React.createElement(SimpleTreeWithRuleset, { imodel: props.iModel, ruleSet: classificationRules, dataProvider: dataProvider }));
+}
+//# sourceMappingURL=ClassificationsTree.js.map

package/lib/esm/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,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAC9E,OAAO,mBAAmB,MAAM,wCAAwC,CAAC;AAMzE,MAAM,UAAU,4BAA4B,CAC1C,KAAwC;IAExC,MAAM,YAAY,GAAG,IAAI,4BAA4B,CAAC;QACpD,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,OAAO,EAAE,mBAAmB,CAAC,EAAE;QAC/B,UAAU,EAAE,EAAE;KACf,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,qBAAqB,IACpB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,OAAO,EAAE,mBAA8B,EACvC,YAAY,EAAE,YAAY,GAC1B,CACH,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport * as React from \"react\";\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/esm/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

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

@@ -0,0 +1,112 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import React, { useCallback, useEffect, useState } from "react";
+import { ModelsTree, ClassGroupingOption, useActiveViewport } from "@itwin/appui-react";
+import { useTreeFilteringState } from "../TreeFilteringState";
+import "./ModelsTree.scss";
+import { TreeHeaderComponent } from "../header/TreeHeader";
+import { useResizeObserver } from "@itwin/core-react";
+export const ModelsTreeComponent = (props) => {
+    const { iModel } = props;
+    const [is2dToggleActive, setIs2dToggleActive] = useState(false);
+    const [is3dToggleActive, setIs3dToggleActive] = useState(false);
+    const [icon2dToggle, setIcon2dToggle] = useState("icon-visibility");
+    const [icon3dToggle, setIcon3dToggle] = useState("icon-visibility");
+    const [available2dModels, setAvailable2dModels] = useState([]);
+    const [available3dModels, setAvailable3dModels] = useState([]);
+    const [availableModels, setAvailableModels] = useState([]);
+    const viewport = useActiveViewport();
+    const { searchOptions, filterString, activeMatchIndex, onFilterApplied } = useTreeFilteringState();
+    const [height, setHeight] = useState(0);
+    const [width, setWidth] = useState(0);
+    const handleResize = useCallback((w, h) => {
+        setHeight(h);
+        setWidth(w);
+    }, []);
+    const ref = useResizeObserver(handleResize);
+    const queryModels = useCallback(async (vp) => {
+        if (vp === undefined)
+            return [];
+        const queryParams = {
+            from: "BisCore.GeometricModel3d",
+            wantPrivate: false,
+        };
+        const modelProps = await iModel.models.queryProps(queryParams);
+        return modelProps
+            .map(({ id, isPlanProjection }) => ({ id, isPlanProjection }))
+            .filter(({ id }) => id);
+    }, [iModel]);
+    useEffect(() => {
+        queryModels(viewport)
+            .then((modelInfos) => {
+            setAvailableModels(modelInfos.map(({ id }) => id));
+            const { models2d, models3d } = modelInfos.reduce((acc, { id, isPlanProjection }) => {
+                isPlanProjection ? acc.models2d.push(id) : acc.models3d.push(id);
+                return acc;
+            }, { models2d: [], models3d: [] });
+            setAvailable2dModels(models2d);
+            setAvailable3dModels(models3d);
+        })
+            .catch((_e) => {
+            setAvailableModels([]);
+        });
+    }, [queryModels, viewport]);
+    const invert = useCallback(async () => {
+        if (availableModels.length === 0)
+            return;
+        const notViewedModels = [];
+        const models = [];
+        availableModels.forEach((id) => {
+            if (viewport === null || viewport === void 0 ? void 0 : viewport.viewsModel(id))
+                models.push(id);
+            else
+                notViewedModels.push(id);
+        });
+        await (viewport === null || viewport === void 0 ? void 0 : viewport.addViewedModels(notViewedModels));
+        viewport === null || viewport === void 0 ? void 0 : viewport.changeModelDisplay(models, false);
+        viewport === null || viewport === void 0 ? void 0 : viewport.invalidateScene();
+    }, [viewport, availableModels]);
+    const hideAll = useCallback(() => {
+        viewport === null || viewport === void 0 ? void 0 : viewport.changeModelDisplay(availableModels, false);
+        viewport === null || viewport === void 0 ? void 0 : viewport.invalidateScene();
+    }, [viewport, availableModels]);
+    const showAll = useCallback(async () => {
+        await (viewport === null || viewport === void 0 ? void 0 : viewport.addViewedModels(availableModels));
+        viewport === null || viewport === void 0 ? void 0 : viewport.invalidateScene();
+    }, [viewport, availableModels]);
+    const viewToggle2D = useCallback(async () => {
+        if (is2dToggleActive) {
+            viewport === null || viewport === void 0 ? void 0 : viewport.changeModelDisplay(available2dModels, false);
+            setIs2dToggleActive(false);
+            setIcon2dToggle("icon-visibility-hide-2");
+        }
+        else {
+            await (viewport === null || viewport === void 0 ? void 0 : viewport.addViewedModels(available2dModels));
+            setIs2dToggleActive(true);
+            setIcon2dToggle("icon-visibility");
+        }
+        viewport === null || viewport === void 0 ? void 0 : viewport.invalidateScene();
+    }, [is2dToggleActive, viewport, available2dModels]);
+    const viewToggle3D = useCallback(async () => {
+        if (is3dToggleActive) {
+            viewport === null || viewport === void 0 ? void 0 : viewport.changeModelDisplay(available3dModels, false);
+            setIs3dToggleActive(false);
+            setIcon3dToggle("icon-visibility-hide-2");
+        }
+        else {
+            await (viewport === null || viewport === void 0 ? void 0 : viewport.addViewedModels(available3dModels));
+            setIs3dToggleActive(true);
+            setIcon3dToggle("icon-visibility");
+        }
+        viewport === null || viewport === void 0 ? void 0 : viewport.invalidateScene();
+    }, [is3dToggleActive, viewport, available3dModels]);
+    return (!(iModel && viewport) ? null : (React.createElement(React.Fragment, null,
+        React.createElement(TreeHeaderComponent, { searchOptions: searchOptions, showAll: showAll, hideAll: hideAll, invert: invert, toggle2D: viewToggle2D, toggle2DIcon: icon2dToggle, toggle3D: viewToggle3D, toggle3DIcon: icon3dToggle }),
+        React.createElement("div", { className: "tree-widget-models-tree-container" },
+            React.createElement("div", { ref: ref, style: { width: "100%", height: "100%" } }, width && height && (React.createElement(ModelsTree, { ...props, filterInfo: { filter: filterString, activeMatchIndex }, onFilterApplied: onFilterApplied, activeView: viewport, enableElementsClassGrouping: props.enableElementsClassGrouping
+                    ? ClassGroupingOption.YesWithCounts
+                    : ClassGroupingOption.No, width: width, height: height })))))));
+};
+//# sourceMappingURL=ModelsTree.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModelsTree.js","sourceRoot":"","sources":["../../../../src/components/trees/ModelsTree.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 React, { useCallback, useEffect, useState } from \"react\";\nimport { IModelConnection, Viewport } from \"@itwin/core-frontend\";\nimport { ModelsTree, ClassGroupingOption, useActiveViewport } from \"@itwin/appui-react\";\nimport { useTreeFilteringState } from \"../TreeFilteringState\";\nimport \"./ModelsTree.scss\";\nimport {\n  GeometricModel3dProps,\n  ModelQueryParams,\n} from \"@itwin/core-common\";\nimport { TreeHeaderComponent } from \"../header/TreeHeader\";\nimport { useResizeObserver } from \"@itwin/core-react\";\n\nexport interface ModelTreeProps {\n  iModel: IModelConnection;\n  allViewports?: boolean;\n  activeView?: Viewport;\n  enableElementsClassGrouping?: boolean;\n}\n\ninterface TreeViewModelInfo {\n  id: string;\n  isPlanProjection?: boolean;\n}\n\nexport const ModelsTreeComponent = (props: ModelTreeProps) => {\n  const { iModel } = props;\n\n  const [is2dToggleActive, setIs2dToggleActive] = useState<boolean>(false);\n  const [is3dToggleActive, setIs3dToggleActive] = useState<boolean>(false);\n  const [icon2dToggle, setIcon2dToggle] = useState<string>(\"icon-visibility\");\n  const [icon3dToggle, setIcon3dToggle] = useState<string>(\"icon-visibility\");\n\n  const [available2dModels, setAvailable2dModels] = useState<string[]>([]);\n  const [available3dModels, setAvailable3dModels] = useState<string[]>([]);\n  const [availableModels, setAvailableModels] = useState<string[]>([]);\n\n  const viewport = useActiveViewport();\n\n  const { searchOptions, filterString, activeMatchIndex, onFilterApplied } =\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 queryModels = useCallback(async (\n    vp: Viewport | undefined\n  ): Promise<TreeViewModelInfo[]> => {\n    if (vp === undefined) return [];\n\n    const queryParams: ModelQueryParams = {\n      from: \"BisCore.GeometricModel3d\",\n      wantPrivate: false,\n    };\n    const modelProps = await iModel.models.queryProps(queryParams);\n    return modelProps\n      .map(({ id, isPlanProjection }: GeometricModel3dProps) => ({ id, isPlanProjection }))\n      .filter(({ id }) => id) as TreeViewModelInfo[];\n  }, [iModel]);\n\n  useEffect(() => {\n    queryModels(viewport)\n      .then((modelInfos: TreeViewModelInfo[]) => {\n        setAvailableModels(modelInfos.map(({ id }) => id));\n\n        const { models2d, models3d } = modelInfos.reduce((acc, { id, isPlanProjection }) => {\n          isPlanProjection ? acc.models2d.push(id) : acc.models3d.push(id);\n          return acc;\n        }, { models2d: [] as string[], models3d: [] as string[] });\n\n        setAvailable2dModels(models2d);\n        setAvailable3dModels(models3d);\n      })\n      .catch((_e) => {\n        setAvailableModels([]);\n      });\n  }, [queryModels, viewport]);\n\n  const invert = useCallback(async () => {\n    if (availableModels.length === 0) return;\n    const notViewedModels: string[] = [];\n    const models: string[] = [];\n    availableModels.forEach((id: string) => {\n      if (viewport?.viewsModel(id)) models.push(id);\n      else notViewedModels.push(id);\n    });\n    await viewport?.addViewedModels(notViewedModels);\n    viewport?.changeModelDisplay(models, false);\n    viewport?.invalidateScene();\n  }, [viewport, availableModels]);\n\n  const hideAll = useCallback(() => {\n    viewport?.changeModelDisplay(availableModels, false);\n    viewport?.invalidateScene();\n  }, [viewport, availableModels]);\n\n  const showAll = useCallback(async () => {\n    await viewport?.addViewedModels(availableModels);\n    viewport?.invalidateScene();\n  }, [viewport, availableModels]);\n\n  const viewToggle2D = useCallback(async () => {\n    if (is2dToggleActive) {\n      viewport?.changeModelDisplay(available2dModels, false);\n      setIs2dToggleActive(false);\n      setIcon2dToggle(\"icon-visibility-hide-2\");\n    } else {\n      await viewport?.addViewedModels(available2dModels);\n      setIs2dToggleActive(true);\n      setIcon2dToggle(\"icon-visibility\");\n    }\n    viewport?.invalidateScene();\n  }, [is2dToggleActive, viewport, available2dModels]);\n\n  const viewToggle3D = useCallback(async () => {\n    if (is3dToggleActive) {\n      viewport?.changeModelDisplay(available3dModels, false);\n      setIs3dToggleActive(false);\n      setIcon3dToggle(\"icon-visibility-hide-2\");\n    } else {\n      await viewport?.addViewedModels(available3dModels);\n      setIs3dToggleActive(true);\n      setIcon3dToggle(\"icon-visibility\");\n    }\n    viewport?.invalidateScene();\n  }, [is3dToggleActive, viewport, available3dModels]);\n\n  return (!(iModel && viewport) ? null : (\n    <>\n      <TreeHeaderComponent\n        searchOptions={searchOptions}\n        showAll={showAll}\n        hideAll={hideAll}\n        invert={invert}\n        toggle2D={viewToggle2D}\n        toggle2DIcon={icon2dToggle}\n        toggle3D={viewToggle3D}\n        toggle3DIcon={icon3dToggle}\n      />\n      <div className=\"tree-widget-models-tree-container\">\n        <div ref={ref} style={{ width: \"100%\", height: \"100%\" }}>\n          {width && height && (\n            <ModelsTree\n              {...props}\n              filterInfo={{ filter: filterString, activeMatchIndex }}\n              onFilterApplied={onFilterApplied}\n              activeView={viewport}\n              enableElementsClassGrouping={\n                props.enableElementsClassGrouping\n                  ? ClassGroupingOption.YesWithCounts\n                  : ClassGroupingOption.No\n              }\n              width={width}\n              height={height}\n            />\n          )}\n        </div>\n      </div>\n    </>\n  ));\n};\n"]}

package/lib/esm/components/trees/ModelsTree.scss

@@ -0,0 +1,14 @@
+/*---------------------------------------------------------------------------------------------
+* 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-models-tree-container {
+  flex: 1;
+}
+
+.tree-widget-models-tree-toolbar-icon {
+  color: $buic-icon-color;
+}

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

@@ -0,0 +1,3 @@
+import { SpatialContainmentTreeProps } from "@itwin/appui-react";
+export declare const SpatialTreeComponent: (props: Omit<SpatialContainmentTreeProps, "width" | "height">) => JSX.Element;
+//# sourceMappingURL=SpatialTree.d.ts.map

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

@@ -0,0 +1,18 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import { SpatialContainmentTree, } from "@itwin/appui-react";
+import { useResizeObserver } from "@itwin/core-react";
+import React, { useCallback, useState } from "react";
+export const SpatialTreeComponent = (props) => {
+    const [height, setHeight] = useState(0);
+    const [width, setWidth] = useState(0);
+    const handleResize = useCallback((w, h) => {
+        setHeight(h);
+        setWidth(w);
+    }, []);
+    const ref = useResizeObserver(handleResize);
+    return (React.createElement("div", { ref: ref, style: { width: "100%", height: "100%" } }, width && height && (React.createElement(SpatialContainmentTree, { ...props, width: width, height: height }))));
+};
+//# sourceMappingURL=SpatialTree.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpatialTree.js","sourceRoot":"","sources":["../../../../src/components/trees/SpatialTree.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,OAAO,EACL,sBAAsB,GAEvB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErD,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAClC,KAA4D,EAC5D,EAAE;IACF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACxC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACtC,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,CAAS,EAAE,CAAS,EAAE,EAAE;QACxD,SAAS,CAAC,CAAC,CAAC,CAAC;QACb,QAAQ,CAAC,CAAC,CAAC,CAAC;IACd,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,GAAG,GAAG,iBAAiB,CAAiB,YAAY,CAAC,CAAC;IAE5D,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IACpD,KAAK,IAAI,MAAM,IAAI,CAClB,oBAAC,sBAAsB,OAAK,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,GAAI,CACpE,CACG,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport {\n  SpatialContainmentTree,\n  SpatialContainmentTreeProps,\n} from \"@itwin/appui-react\";\nimport { useResizeObserver } from \"@itwin/core-react\";\nimport React, { useCallback, useState } from \"react\";\n\nexport const SpatialTreeComponent = (\n  props: Omit<SpatialContainmentTreeProps, \"width\" | \"height\">\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  return (\n    <div ref={ref} style={{ width: \"100%\", height: \"100%\" }}>\n      {width && height && (\n        <SpatialContainmentTree {...props} width={width} height={height} />\n      )}\n    </div>\n  );\n};\n"]}