@itwin/tree-widget-react 0.1.1

package/lib/cjs/components/TreeWidgetUiItemsProvider.js

@@ -0,0 +1,81 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeWidgetUiItemsProvider = 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 appui_abstract_1 = require("@itwin/appui-abstract");
+const appui_react_1 = require("@itwin/appui-react");
+const react_1 = __importDefault(require("react"));
+const TreeWidgetComponent_1 = require("./TreeWidgetComponent");
+const trees_1 = require("./trees");
+const TreeWidget_1 = require("../TreeWidget");
+class TreeWidgetUiItemsProvider {
+    constructor(props) {
+        var _a, _b, _c, _d, _e, _f;
+        this.id = "TreeWidgetUiitemsProvider";
+        this._imodel = props === null || props === void 0 ? void 0 : props.iModelConnection;
+        this._activeView = props === null || props === void 0 ? void 0 : props.activeView;
+        this._enableElementsClassGrouping = props === null || props === void 0 ? void 0 : props.enableElementsClassGrouping;
+        this._allViewports = props === null || props === void 0 ? void 0 : props.allViewports;
+        this._additionalTrees = props === null || props === void 0 ? void 0 : props.additionalTrees;
+        this._modelsTreeProps = (_a = props === null || props === void 0 ? void 0 : props.additionalProps) === null || _a === void 0 ? void 0 : _a.modelsTree;
+        this._categoriesTreeProps = (_b = props === null || props === void 0 ? void 0 : props.additionalProps) === null || _b === void 0 ? void 0 : _b.categoriesTree;
+        this._spatialTreeProps = (_c = props === null || props === void 0 ? void 0 : props.additionalProps) === null || _c === void 0 ? void 0 : _c.spatialTree;
+        this._modelsTreeReplacement = (_d = props === null || props === void 0 ? void 0 : props.treeReplacements) === null || _d === void 0 ? void 0 : _d.modelsTree;
+        this._categoriesTreeReplacement = (_e = props === null || props === void 0 ? void 0 : props.treeReplacements) === null || _e === void 0 ? void 0 : _e.categoriesTree;
+        this._spatialTreeReplacement = (_f = props === null || props === void 0 ? void 0 : props.treeReplacements) === null || _f === void 0 ? void 0 : _f.spatialTree;
+    }
+    provideWidgets(_stageId, stageUsage, location, _section) {
+        var _a, _b, _c;
+        const widgets = [];
+        const imodel = appui_react_1.UiFramework.getIModelConnection();
+        if (stageUsage === appui_abstract_1.StageUsage.General &&
+            location === appui_abstract_1.StagePanelLocation.Right &&
+            imodel !== undefined) {
+            const modelsTreeComponent = (react_1.default.createElement(trees_1.ModelsTreeComponent, { iModel: (_a = this._imodel) !== null && _a !== void 0 ? _a : imodel, allViewports: this._allViewports, activeView: this._activeView, enableElementsClassGrouping: this._enableElementsClassGrouping, ...this._modelsTreeProps }));
+            const categoriesTreeComponent = (react_1.default.createElement(trees_1.CategoriesTreeComponent, { iModel: (_b = this._imodel) !== null && _b !== void 0 ? _b : imodel, allViewports: this._allViewports, activeView: this._activeView, ...this._categoriesTreeProps }));
+            const spatialContainmentComponent = (react_1.default.createElement(trees_1.SpatialTreeComponent, { iModel: (_c = this._imodel) !== null && _c !== void 0 ? _c : imodel, enableElementsClassGrouping: this._enableElementsClassGrouping
+                    ? appui_react_1.ClassGroupingOption.Yes
+                    : appui_react_1.ClassGroupingOption.No, ...this._spatialTreeProps }));
+            const trees = [
+                {
+                    label: TreeWidget_1.TreeWidget.translate("modeltree"),
+                    id: "model-tree",
+                    render: this._modelsTreeReplacement
+                        ? this._modelsTreeReplacement
+                        : () => modelsTreeComponent,
+                },
+                {
+                    label: TreeWidget_1.TreeWidget.translate("categories"),
+                    id: "categories-tree",
+                    render: this._categoriesTreeReplacement
+                        ? this._categoriesTreeReplacement
+                        : () => categoriesTreeComponent,
+                },
+                {
+                    label: TreeWidget_1.TreeWidget.translate("containment"),
+                    id: "spatial-containment-tree",
+                    render: this._spatialTreeReplacement
+                        ? this._spatialTreeReplacement
+                        : () => spatialContainmentComponent,
+                },
+            ];
+            if (this._additionalTrees) {
+                trees.push(...this._additionalTrees);
+            }
+            widgets.push({
+                id: "tree",
+                label: TreeWidget_1.TreeWidget.translate("treeview"),
+                getWidgetContent: () => react_1.default.createElement(TreeWidgetComponent_1.TreeWidgetComponent, { trees: trees }),
+            });
+        }
+        return widgets;
+    }
+}
+exports.TreeWidgetUiItemsProvider = TreeWidgetUiItemsProvider;
+//# sourceMappingURL=TreeWidgetUiItemsProvider.js.map

package/lib/cjs/components/TreeWidgetUiItemsProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeWidgetUiItemsProvider.js","sourceRoot":"","sources":["../../../src/components/TreeWidgetUiItemsProvider.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 {\n  AbstractWidgetProps,\n  StagePanelLocation,\n  StagePanelSection,\n  StageUsage,\n  UiItemsProvider,\n} from \"@itwin/appui-abstract\";\nimport { ClassGroupingOption, UiFramework } from \"@itwin/appui-react\";\nimport React from \"react\";\nimport { TreeWidgetComponent } from \"./TreeWidgetComponent\";\nimport {\n  ModelsTreeComponent,\n  CategoriesTreeComponent,\n  SpatialTreeComponent,\n} from \"./trees\";\nimport { IModelConnection, Viewport } from \"@itwin/core-frontend\";\nimport { SelectableContentDefinition } from \"@itwin/components-react\";\nimport { TreeWidget } from \"../TreeWidget\";\nimport { TreeWidgetControlOptions } from \"./TreeWidgetControl\";\n\nexport class TreeWidgetUiItemsProvider implements UiItemsProvider {\n  public readonly id = \"TreeWidgetUiitemsProvider\";\n\n  private _imodel?: IModelConnection;\n  private _activeView?: Viewport;\n  private _enableElementsClassGrouping?: boolean;\n  private _allViewports?: boolean;\n  private _additionalTrees?: SelectableContentDefinition[];\n  private _modelsTreeProps?: {};\n  private _categoriesTreeProps?: {};\n  private _spatialTreeProps?: {};\n  private _modelsTreeReplacement?: () => React.ReactNode;\n  private _categoriesTreeReplacement?: () => React.ReactNode;\n  private _spatialTreeReplacement?: () => React.ReactNode;\n\n  constructor(props?: Partial<TreeWidgetControlOptions>) {\n    this._imodel = props?.iModelConnection;\n    this._activeView = props?.activeView;\n    this._enableElementsClassGrouping = props?.enableElementsClassGrouping;\n    this._allViewports = props?.allViewports;\n    this._additionalTrees = props?.additionalTrees;\n    this._modelsTreeProps = props?.additionalProps?.modelsTree;\n    this._categoriesTreeProps = props?.additionalProps?.categoriesTree;\n    this._spatialTreeProps = props?.additionalProps?.spatialTree;\n    this._modelsTreeReplacement = props?.treeReplacements?.modelsTree;\n    this._categoriesTreeReplacement = props?.treeReplacements?.categoriesTree;\n    this._spatialTreeReplacement = props?.treeReplacements?.spatialTree;\n  }\n\n  public provideWidgets(\n    _stageId: string,\n    stageUsage: string,\n    location: StagePanelLocation,\n    _section: StagePanelSection | undefined\n  ): ReadonlyArray<AbstractWidgetProps> {\n    const widgets: AbstractWidgetProps[] = [];\n    const imodel = UiFramework.getIModelConnection();\n    if (\n      stageUsage === StageUsage.General &&\n      location === StagePanelLocation.Right &&\n      imodel !== undefined\n    ) {\n      const modelsTreeComponent = (\n        <ModelsTreeComponent\n          iModel={this._imodel ?? imodel}\n          allViewports={this._allViewports}\n          activeView={this._activeView}\n          enableElementsClassGrouping={this._enableElementsClassGrouping}\n          {...this._modelsTreeProps}\n        />\n      );\n\n      const categoriesTreeComponent = (\n        <CategoriesTreeComponent\n          iModel={this._imodel ?? imodel}\n          allViewports={this._allViewports}\n          activeView={this._activeView}\n          {...this._categoriesTreeProps}\n        />\n      );\n\n      const spatialContainmentComponent = (\n        <SpatialTreeComponent\n          iModel={this._imodel ?? imodel}\n          enableElementsClassGrouping={\n            this._enableElementsClassGrouping\n              ? ClassGroupingOption.Yes\n              : ClassGroupingOption.No\n          }\n          {...this._spatialTreeProps}\n        />\n      );\n\n      const trees: SelectableContentDefinition[] = [\n        {\n          label: TreeWidget.translate(\"modeltree\"),\n          id: \"model-tree\",\n          render: this._modelsTreeReplacement\n            ? this._modelsTreeReplacement\n            : () => modelsTreeComponent,\n        },\n        {\n          label: TreeWidget.translate(\"categories\"),\n          id: \"categories-tree\",\n          render: this._categoriesTreeReplacement\n            ? this._categoriesTreeReplacement\n            : () => categoriesTreeComponent,\n        },\n        {\n          label: TreeWidget.translate(\"containment\"),\n          id: \"spatial-containment-tree\",\n          render: this._spatialTreeReplacement\n            ? this._spatialTreeReplacement\n            : () => spatialContainmentComponent,\n        },\n      ];\n\n      if (this._additionalTrees) {\n        trees.push(...this._additionalTrees);\n      }\n\n      widgets.push({\n        id: \"tree\",\n        label: TreeWidget.translate(\"treeview\"),\n        getWidgetContent: () => <TreeWidgetComponent trees={trees} />,\n      });\n    }\n\n    return widgets;\n  }\n}\n"]}

package/lib/cjs/components/header/TreeHeader.d.ts

@@ -0,0 +1,14 @@
+import { SearchOptions } from "../TreeFilteringState";
+import "./TreeHeader.scss";
+export interface TreeHeaderComponentProps {
+    showAll?: () => void;
+    hideAll?: () => void;
+    invert?: () => void;
+    toggle2D?: () => void;
+    toggle2DIcon?: string;
+    toggle3D?: () => void;
+    toggle3DIcon?: string;
+    searchOptions: SearchOptions;
+}
+export declare function TreeHeaderComponent({ searchOptions, showAll, hideAll, invert, toggle2D, toggle2DIcon, toggle3D, toggle3DIcon, }: TreeHeaderComponentProps): JSX.Element;
+//# sourceMappingURL=TreeHeader.d.ts.map

package/lib/cjs/components/header/TreeHeader.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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeHeaderComponent = 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 IconButton_1 = require("../IconButton");
+const SearchBar_1 = require("../search-bar/SearchBar");
+const TreeWidget_1 = require("../../TreeWidget");
+require("./TreeHeader.scss");
+function TreeHeaderComponent({ searchOptions, showAll, hideAll, invert, toggle2D, toggle2DIcon, toggle3D, toggle3DIcon, }) {
+    var _a;
+    return (React.createElement(SearchBar_1.SearchBar, { value: "", className: "tree-widget-header-tree-search-bar", valueChangedDelay: 500, placeholder: TreeWidget_1.TreeWidget.translate("search"), title: TreeWidget_1.TreeWidget.translate("searchForSomething"), filteringInProgress: searchOptions.isFiltering, onFilterCancel: searchOptions.onFilterCancel, onFilterClear: searchOptions.onFilterCancel, onFilterStart: searchOptions.onFilterStart, onSelectedChanged: searchOptions.onResultSelectedChanged, resultCount: (_a = searchOptions.matchedResultCount) !== null && _a !== void 0 ? _a : 0 },
+        React.createElement("div", { className: "tree-widget-search-bar-button-container" },
+            showAll && (React.createElement(IconButton_1.IconButton, { className: "tree-widget-header-tree-toolbar-icon", key: "show-all-btn", icon: "icon-visibility", title: TreeWidget_1.TreeWidget.translate("showAll"), onClick: showAll })),
+            hideAll && (React.createElement(IconButton_1.IconButton, { className: "tree-widget-header-tree-toolbar-icon", key: "hide-all-btn", icon: "icon-visibility-hide-2", title: TreeWidget_1.TreeWidget.translate("hideAll"), onClick: hideAll })),
+            invert && (React.createElement(IconButton_1.IconButton, { key: "invert-all-btn", className: "tree-widget-header-tree-toolbar-icon", title: TreeWidget_1.TreeWidget.translate("invert"), icon: "icon-visibility-invert", onClick: invert })),
+            toggle2D && toggle2DIcon && (React.createElement(IconButton_1.IconButton, { className: "tree-widget-header-tree-toolbar-icon", key: "view-2d-btn", icon: toggle2DIcon, title: TreeWidget_1.TreeWidget.translate("toggle2DViews"), onClick: toggle2D, label: TreeWidget_1.TreeWidget.translate("label2D") })),
+            toggle3D && toggle3DIcon && (React.createElement(IconButton_1.IconButton, { className: "tree-widget-header-tree-toolbar-icon", key: "view-3d-btn", icon: toggle3DIcon, title: TreeWidget_1.TreeWidget.translate("toggle3DViews"), onClick: toggle3D, label: TreeWidget_1.TreeWidget.translate("label3D") })))));
+}
+exports.TreeHeaderComponent = TreeHeaderComponent;
+//# sourceMappingURL=TreeHeader.js.map

package/lib/cjs/components/header/TreeHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeHeader.js","sourceRoot":"","sources":["../../../../src/components/header/TreeHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;+FAG+F;AAC/F,6CAA+B;AAC/B,8CAA2C;AAC3C,uDAAoD;AAEpD,iDAA8C;AAC9C,6BAA2B;AAa3B,SAAgB,mBAAmB,CAAC,EAClC,aAAa,EACb,OAAO,EACP,OAAO,EACP,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,YAAY,GACa;;IACzB,OAAO,CACL,oBAAC,qBAAS,IACR,KAAK,EAAC,EAAE,EACR,SAAS,EAAC,oCAAoC,EAC9C,iBAAiB,EAAE,GAAG,EACtB,WAAW,EAAE,uBAAU,CAAC,SAAS,CAAC,QAAQ,CAAC,EAC3C,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,oBAAoB,CAAC,EACjD,mBAAmB,EAAE,aAAa,CAAC,WAAW,EAC9C,cAAc,EAAE,aAAa,CAAC,cAAc,EAC5C,aAAa,EAAE,aAAa,CAAC,cAAc,EAC3C,aAAa,EAAE,aAAa,CAAC,aAAa,EAC1C,iBAAiB,EAAE,aAAa,CAAC,uBAAuB,EACxD,WAAW,EAAE,MAAA,aAAa,CAAC,kBAAkB,mCAAI,CAAC;QAElD,6BAAK,SAAS,EAAC,yCAAyC;YACrD,OAAO,IAAI,CACV,oBAAC,uBAAU,IACT,SAAS,EAAE,sCAAsC,EACjD,GAAG,EAAC,cAAc,EAClB,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,SAAS,CAAC,EACtC,OAAO,EAAE,OAAO,GAChB,CACH;YACA,OAAO,IAAI,CACV,oBAAC,uBAAU,IACT,SAAS,EAAE,sCAAsC,EACjD,GAAG,EAAC,cAAc,EAClB,IAAI,EAAC,wBAAwB,EAC7B,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,SAAS,CAAC,EACtC,OAAO,EAAE,OAAO,GAChB,CACH;YACA,MAAM,IAAI,CACT,oBAAC,uBAAU,IACT,GAAG,EAAC,gBAAgB,EACpB,SAAS,EAAE,sCAAsC,EACjD,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,QAAQ,CAAC,EACrC,IAAI,EAAC,wBAAwB,EAC7B,OAAO,EAAE,MAAM,GACf,CACH;YACA,QAAQ,IAAI,YAAY,IAAI,CAC3B,oBAAC,uBAAU,IACT,SAAS,EAAE,sCAAsC,EACjD,GAAG,EAAC,aAAa,EACjB,IAAI,EAAE,YAAY,EAClB,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,eAAe,CAAC,EAC5C,OAAO,EAAE,QAAQ,EACjB,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,SAAS,CAAC,GACtC,CACH;YACA,QAAQ,IAAI,YAAY,IAAI,CAC3B,oBAAC,uBAAU,IACT,SAAS,EAAE,sCAAsC,EACjD,GAAG,EAAC,aAAa,EACjB,IAAI,EAAE,YAAY,EAClB,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,eAAe,CAAC,EAC5C,OAAO,EAAE,QAAQ,EACjB,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,SAAS,CAAC,GACtC,CACH,CACG,CACI,CACb,CAAC;AACJ,CAAC;AA3ED,kDA2EC","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 { IconButton } from \"../IconButton\";\nimport { SearchBar } from \"../search-bar/SearchBar\";\nimport { SearchOptions } from \"../TreeFilteringState\";\nimport { TreeWidget } from \"../../TreeWidget\";\nimport \"./TreeHeader.scss\";\n\nexport interface TreeHeaderComponentProps {\n  showAll?: () => void;\n  hideAll?: () => void;\n  invert?: () => void;\n  toggle2D?: () => void;\n  toggle2DIcon?: string;\n  toggle3D?: () => void;\n  toggle3DIcon?: string;\n  searchOptions: SearchOptions;\n}\n\nexport function TreeHeaderComponent({\n  searchOptions,\n  showAll,\n  hideAll,\n  invert,\n  toggle2D,\n  toggle2DIcon,\n  toggle3D,\n  toggle3DIcon,\n}: TreeHeaderComponentProps) {\n  return (\n    <SearchBar\n      value=\"\"\n      className=\"tree-widget-header-tree-search-bar\"\n      valueChangedDelay={500}\n      placeholder={TreeWidget.translate(\"search\")}\n      title={TreeWidget.translate(\"searchForSomething\")}\n      filteringInProgress={searchOptions.isFiltering}\n      onFilterCancel={searchOptions.onFilterCancel}\n      onFilterClear={searchOptions.onFilterCancel}\n      onFilterStart={searchOptions.onFilterStart}\n      onSelectedChanged={searchOptions.onResultSelectedChanged}\n      resultCount={searchOptions.matchedResultCount ?? 0}\n    >\n      <div className=\"tree-widget-search-bar-button-container\">\n        {showAll && (\n          <IconButton\n            className={\"tree-widget-header-tree-toolbar-icon\"}\n            key=\"show-all-btn\"\n            icon=\"icon-visibility\"\n            title={TreeWidget.translate(\"showAll\")}\n            onClick={showAll}\n          />\n        )}\n        {hideAll && (\n          <IconButton\n            className={\"tree-widget-header-tree-toolbar-icon\"}\n            key=\"hide-all-btn\"\n            icon=\"icon-visibility-hide-2\"\n            title={TreeWidget.translate(\"hideAll\")}\n            onClick={hideAll}\n          />\n        )}\n        {invert && (\n          <IconButton\n            key=\"invert-all-btn\"\n            className={\"tree-widget-header-tree-toolbar-icon\"}\n            title={TreeWidget.translate(\"invert\")}\n            icon=\"icon-visibility-invert\"\n            onClick={invert}\n          />\n        )}\n        {toggle2D && toggle2DIcon && (\n          <IconButton\n            className={\"tree-widget-header-tree-toolbar-icon\"}\n            key=\"view-2d-btn\"\n            icon={toggle2DIcon}\n            title={TreeWidget.translate(\"toggle2DViews\")}\n            onClick={toggle2D}\n            label={TreeWidget.translate(\"label2D\")}\n          />\n        )}\n        {toggle3D && toggle3DIcon && (\n          <IconButton\n            className={\"tree-widget-header-tree-toolbar-icon\"}\n            key=\"view-3d-btn\"\n            icon={toggle3DIcon}\n            title={TreeWidget.translate(\"toggle3DViews\")}\n            onClick={toggle3D}\n            label={TreeWidget.translate(\"label3D\")}\n          />\n        )}\n      </div>\n    </SearchBar>\n  );\n}\n"]}

package/lib/cjs/components/header/TreeHeader.scss

@@ -0,0 +1,19 @@
+/*---------------------------------------------------------------------------------------------
+* 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-header-tree-search-bar {
+  margin-bottom: $uicore-s;
+}
+
+.tree-widget-header-tree-toolbar-icon {
+  color: $buic-icon-color;
+}
+
+.tree-widget-search-bar-button-container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}

package/lib/cjs/components/rulesets/ClassificationSystems.json

@@ -0,0 +1,122 @@
+{
+    "id": "tree-widget-react/ClassificationSystems",
+    "rules": [
+        {
+            "ruleType": "RootNodes",
+            "specifications": [
+                {
+                    "specType": "InstanceNodesOfSpecificClasses",
+                    "classes": [
+                        {
+                            "schemaName": "ClassificationSystems",
+                            "classNames": [
+                                "ClassificationSystem"
+                            ]
+                        }
+                    ],
+                    "arePolymorphic": false,
+                    "groupByClass": false,
+                    "groupByLabel": false
+                }
+            ]
+        },
+        {
+            "ruleType": "ChildNodes",
+            "condition": "ParentNode.IsOfClass(\"ClassificationSystem\", \"ClassificationSystems\")",
+            "specifications": [
+                {
+                    "specType": "RelatedInstanceNodes",
+                    "relationships": {
+                        "schemaName": "ClassificationSystems",
+                        "classNames": [
+                            "ClassificationSystemOwnsClassificationTable"
+                        ]
+                    },
+                    "relatedClasses": {
+                        "schemaName": "ClassificationSystems",
+                        "classNames": [
+                            "ClassificationTable"
+                        ]
+                    },
+                    "requiredDirection": "Forward",
+                    "groupByClass": false,
+                    "groupByLabel": false,
+                    "doNotSort": true
+                }
+            ]
+        },
+        {
+            "ruleType": "ChildNodes",
+            "condition": "ParentNode.IsOfClass(\"ClassificationTable\", \"ClassificationSystems\")",
+            "specifications": [
+                {
+                    "specType": "RelatedInstanceNodes",
+                    "relationships": {
+                        "schemaName": "BisCore",
+                        "classNames": [
+                            "ModelModelsElement"
+                        ]
+                    },
+                    "relatedClasses": {
+                        "schemaName": "BisCore",
+                        "classNames": [
+                            "Model"
+                        ]
+                    },
+                    "requiredDirection": "Backward",
+                    "groupByClass": false,
+                    "groupByLabel": false,
+                    "hideNodesInHierarchy": true
+                }
+            ]
+        },
+        {
+            "ruleType": "ChildNodes",
+            "condition": "ParentNode.IsOfClass(\"Model\", \"BisCore\")",
+            "specifications": [
+                {
+                    "specType": "RelatedInstanceNodes",
+                    "relationships": {
+                        "schemaName": "BisCore",
+                        "classNames": [
+                            "ModelContainsElements"
+                        ]
+                    },
+                    "relatedClasses": {
+                        "schemaName": "ClassificationSystems",
+                        "classNames": [
+                            "Classification"
+                        ]
+                    },
+                    "requiredDirection": "Forward",
+                    "groupByClass": false,
+                    "groupByLabel": false
+                }
+            ]
+        },
+        {
+            "ruleType": "ChildNodes",
+            "condition": "ParentNode.IsOfClass(\"Classification\", \"ClassificationSystems\")",
+            "specifications": [
+                {
+                    "specType": "RelatedInstanceNodes",
+                    "relationships": {
+                        "schemaName": "ClassificationSystems",
+                        "classNames": [
+                            "ElementHasClassifications"
+                        ]
+                    },
+                    "relatedClasses": {
+                        "schemaName": "BisCore",
+                        "classNames": [
+                            "Element"
+                        ]
+                    },
+                    "requiredDirection": "Backward",
+                    "groupByClass": false,
+                    "groupByLabel": false
+                }
+            ]
+        }
+    ]
+}

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

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { CommonProps } from "@itwin/core-react";
+import { RelativePosition } from "@itwin/appui-abstract";
+import "./Popup.scss";
+/** Properties for the [[Popup]] component */
+export interface PopupProps extends CommonProps {
+    /**  show or hide the box shadow */
+    showShadow: boolean;
+    /** show or hide the arrow */
+    showArrow: boolean;
+    /** indicate if the popup is shown or not */
+    isShown: boolean;
+    /** Direction (relative to the target) to which the popup is expanded */
+    position: RelativePosition;
+    /** Fixed position in the viewport */
+    fixedPosition?: {
+        top: number;
+        left: number;
+    };
+    /** target element */
+    context: HTMLElement | null;
+    /** Function called when the popup is opened */
+    onOpen?: () => void;
+    /** Function called when the popup is closed */
+    onClose?: () => void;
+}
+interface PopupState {
+    isShown: boolean;
+    position: RelativePosition;
+}
+/** Popup React component */
+export declare class Popup extends React.Component<PopupProps, PopupState> {
+    private _popupRef;
+    private _targetElement?;
+    constructor(props: PopupProps, context?: any);
+    static defaultProps: Partial<PopupProps>;
+    componentDidMount(): void;
+    componentDidUpdate(previousProps: PopupProps): void;
+    componentWillUnmount(): void;
+    private _onBodyClick;
+    private _onEsc;
+    private _onShow;
+    private _onClose;
+    private _getContext;
+    private getPositionClassName;
+    private getPositionWithinViewport;
+    render(): JSX.Element;
+}
+export {};
+//# sourceMappingURL=Popup.d.ts.map

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

@@ -0,0 +1,246 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+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.Popup = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const appui_abstract_1 = require("@itwin/appui-abstract");
+require("./Popup.scss");
+/** Popup React component */
+class Popup extends React.Component {
+    constructor(props, context) {
+        super(props, context);
+        this._popupRef = React.createRef();
+        this._onBodyClick = (event) => {
+            const context = this._getContext();
+            // Ignore clicks on the popover or button
+            if (context === event.target) {
+                return;
+            }
+            if (context && context.contains(event.target)) {
+                return;
+            }
+            if (this._popupRef.current &&
+                (this._popupRef.current === event.target ||
+                    this._popupRef.current.contains(event.target))) {
+                return;
+            }
+            this._onClose();
+        };
+        this._onEsc = (event) => {
+            // Esc key
+            if (event.key === "Escape") {
+                this._onClose();
+            }
+        };
+        this._getContext = () => this.props.context || this._targetElement;
+        this.state = { isShown: this.props.isShown, position: this.props.position };
+    }
+    componentDidMount() {
+        const popupElement = this._popupRef.current;
+        if (popupElement && popupElement.parentElement) {
+            this._targetElement = popupElement.parentElement;
+        }
+    }
+    componentDidUpdate(previousProps) {
+        if (this.props.isShown === previousProps.isShown)
+            return;
+        if (this.props.isShown) {
+            this._onShow();
+        }
+        else {
+            this._onClose();
+        }
+    }
+    componentWillUnmount() {
+        document.body.removeEventListener("click", this._onBodyClick, false);
+        document.body.removeEventListener("keydown", this._onEsc, false);
+    }
+    _onShow() {
+        if (this.state.isShown) {
+            return;
+        }
+        document.addEventListener("click", this._onBodyClick, true);
+        document.addEventListener("keydown", this._onEsc, true);
+        const newPosition = this.getPositionWithinViewport();
+        this.setState({ position: newPosition, isShown: true }, () => {
+            if (this.props.onOpen)
+                this.props.onOpen();
+        });
+    }
+    _onClose() {
+        if (!this.state.isShown) {
+            return;
+        }
+        document.removeEventListener("click", this._onBodyClick, true);
+        document.removeEventListener("keydown", this._onEsc, true);
+        // tslint:disable-next-line:tslint-react-set-state-usage
+        this.setState({ isShown: false, position: this.props.position }, () => {
+            if (this.props.onClose)
+                this.props.onClose();
+        });
+    }
+    getPositionClassName(position) {
+        switch (position) {
+            case appui_abstract_1.RelativePosition.TopLeft:
+                return classnames_1.default("tree-widget-search-popup-top-left");
+            case appui_abstract_1.RelativePosition.TopRight:
+                return classnames_1.default("tree-widget-search-popup-top-right");
+            case appui_abstract_1.RelativePosition.BottomLeft:
+                return classnames_1.default("tree-widget-search-popup-bottom-left");
+            case appui_abstract_1.RelativePosition.BottomRight:
+                return classnames_1.default("tree-widget-search-popup-bottom-right");
+            case appui_abstract_1.RelativePosition.Top:
+                return classnames_1.default("tree-widget-search-popup-top");
+            case appui_abstract_1.RelativePosition.Left:
+                return classnames_1.default("tree-widget-search-popup-left");
+            case appui_abstract_1.RelativePosition.Right:
+                return classnames_1.default("tree-widget-search-popup-right");
+            default:
+                return classnames_1.default("tree-widget-search-popup-bottom");
+        }
+    }
+    getPositionWithinViewport() {
+        const popupElement = this._popupRef.current;
+        if (!popupElement || !this._targetElement)
+            return this.props.position;
+        // Note: Cannot use DOMRect yet since it's experimental and not available in all browsers (Nov. 2018)
+        const viewportRect = {
+            left: window.scrollX,
+            top: window.scrollY,
+            right: window.scrollX + window.innerWidth,
+            bottom: window.scrollY + window.innerHeight,
+        };
+        const targetRect = this._targetElement.getBoundingClientRect();
+        const popupRect = popupElement.getBoundingClientRect();
+        const containerStyle = window.getComputedStyle(this._targetElement);
+        const offset = this.props.showArrow ? 12 : 4;
+        switch (this.props.position) {
+            case appui_abstract_1.RelativePosition.BottomRight: {
+                const bottomMargin = containerStyle.marginBottom
+                    ? parseFloat(containerStyle.marginBottom)
+                    : 0;
+                if (targetRect.bottom + popupRect.height + bottomMargin + offset >
+                    viewportRect.bottom) {
+                    return appui_abstract_1.RelativePosition.TopRight;
+                }
+                break;
+            }
+            case appui_abstract_1.RelativePosition.TopRight: {
+                const topMargin = containerStyle.marginTop
+                    ? parseFloat(containerStyle.marginTop)
+                    : 0;
+                if (targetRect.top - popupRect.height - topMargin - offset <
+                    viewportRect.top) {
+                    return appui_abstract_1.RelativePosition.BottomRight;
+                }
+                break;
+            }
+            case appui_abstract_1.RelativePosition.TopLeft: {
+                const topMargin = containerStyle.marginTop
+                    ? parseFloat(containerStyle.marginTop)
+                    : 0;
+                if (targetRect.top - popupRect.height - topMargin - offset <
+                    viewportRect.top) {
+                    return appui_abstract_1.RelativePosition.BottomLeft;
+                }
+                break;
+            }
+            case appui_abstract_1.RelativePosition.BottomLeft: {
+                const bottomMargin = containerStyle.marginBottom
+                    ? parseFloat(containerStyle.marginBottom)
+                    : 0;
+                if (targetRect.bottom + popupRect.height + bottomMargin + offset >
+                    viewportRect.bottom) {
+                    return appui_abstract_1.RelativePosition.TopLeft;
+                }
+                break;
+            }
+            case appui_abstract_1.RelativePosition.Bottom: {
+                const bottomMargin = containerStyle.marginBottom
+                    ? parseFloat(containerStyle.marginBottom)
+                    : 0;
+                if (targetRect.bottom + popupRect.height + bottomMargin + offset >
+                    viewportRect.bottom) {
+                    return appui_abstract_1.RelativePosition.Top;
+                }
+                break;
+            }
+            case appui_abstract_1.RelativePosition.Top: {
+                const topMargin = containerStyle.marginTop
+                    ? parseFloat(containerStyle.marginTop)
+                    : 0;
+                if (targetRect.top - popupRect.height - topMargin - offset <
+                    viewportRect.top) {
+                    return appui_abstract_1.RelativePosition.Bottom;
+                }
+                break;
+            }
+            case appui_abstract_1.RelativePosition.Left: {
+                const leftMargin = containerStyle.marginLeft
+                    ? parseFloat(containerStyle.marginLeft)
+                    : 0;
+                if (targetRect.left - popupRect.width - leftMargin - offset <
+                    viewportRect.left) {
+                    return appui_abstract_1.RelativePosition.Right;
+                }
+                break;
+            }
+            case appui_abstract_1.RelativePosition.Right: {
+                const rightMargin = containerStyle.marginRight
+                    ? parseFloat(containerStyle.marginRight)
+                    : 0;
+                if (targetRect.right + popupRect.width + rightMargin + offset >
+                    viewportRect.right) {
+                    return appui_abstract_1.RelativePosition.Left;
+                }
+                break;
+            }
+        }
+        return this.props.position;
+    }
+    render() {
+        const className = classnames_1.default("tree-widget-search-popup", this.getPositionClassName(this.state.position), this.props.showShadow && "tree-widget-search-popup-shadow", this.state.isShown && "visible", this.props.showArrow && "arrow", this.props.className);
+        let style;
+        if (this.props.fixedPosition) {
+            style = {
+                top: this.props.fixedPosition.top,
+                left: this.props.fixedPosition.left,
+                position: "fixed",
+            };
+        }
+        return (React.createElement("div", { style: style, className: className, ref: this._popupRef }, this.props.children));
+    }
+}
+exports.Popup = Popup;
+Popup.defaultProps = {
+    position: appui_abstract_1.RelativePosition.Bottom,
+    showShadow: true,
+    showArrow: false,
+};
+//# sourceMappingURL=Popup.js.map