@itwin/tree-widget-react 0.1.1

package/lib/esm/components/IconButton.scss

@@ -0,0 +1,73 @@
+/*---------------------------------------------------------------------------------------------
+* 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";
+@import "~@itwin/appui-layout-react/lib/esm/appui-layout-react/footer/_variables";
+
+.tree-widget-icon-button {
+  display: inline-block;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 0;
+  color: $buic-icon-color;
+  background-color: transparent;
+  outline: none;
+  box-shadow: none;
+  font-family: $uicore-font-family;
+  font-size: $uicore-font-size;
+  text-decoration: none;
+  cursor: pointer;
+  transition: color 0.25s;
+
+  &:hover {
+    text-decoration: none;
+    color: $buic-foreground-primary;
+  }
+
+  &:active {
+    outline: none;
+    box-shadow: none;
+    text-decoration: none;
+    background-color: transparent;
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: none;
+    text-decoration: none;
+    background-color: transparent;
+  }
+
+  &[disabled],
+  &[disabled]:hover,
+  &[disabled]:active,
+  &[disabled]:focus {
+    opacity: 0.4;
+    color: $uicore-gray;
+    background: transparent;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}
+
+.tree-widget-icon-label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  font-family: $uicore-font-family;
+  font-size: $uicore-font-size;
+  color: $buic-icon-color;
+  margin-left: 5px;
+
+  &[disabled] {
+    opacity: 0.4;
+    color: $uicore-gray;
+    background: transparent;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}

package/lib/esm/components/TreeFilteringState.d.ts

@@ -0,0 +1,16 @@
+import { IPresentationTreeDataProvider } from "@itwin/presentation-components";
+export interface SearchOptions {
+    isFiltering: boolean;
+    onFilterCancel: () => void;
+    onFilterStart: (newFilter: string) => void;
+    onResultSelectedChanged: (index: number) => void;
+    matchedResultCount: number | undefined;
+}
+export declare const useTreeFilteringState: () => {
+    searchOptions: SearchOptions;
+    filterString: string;
+    activeMatchIndex: number | undefined;
+    onFilterApplied: (provider: IPresentationTreeDataProvider, matches: number) => void;
+    filteredProvider: IPresentationTreeDataProvider | undefined;
+};
+//# sourceMappingURL=TreeFilteringState.d.ts.map

package/lib/esm/components/TreeFilteringState.js

@@ -0,0 +1,44 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import React, { useState } from "react";
+export const useTreeFilteringState = () => {
+    const [filterString, setFilterString] = useState("");
+    const [matchedResultCount, setMatchedResultCount] = useState();
+    const [activeMatchIndex, setActiveMatchIndex] = useState();
+    const [filteredProvider, setFilteredProvider] = useState();
+    const onFilterCancel = React.useCallback(() => {
+        setFilterString("");
+        setMatchedResultCount(undefined);
+        setFilteredProvider(undefined);
+    }, []);
+    const onFilterStart = React.useCallback((newFilter) => {
+        setFilterString(newFilter);
+        setMatchedResultCount(undefined);
+        setFilteredProvider(undefined);
+    }, []);
+    const onResultSelectedChanged = React.useCallback((index) => {
+        setActiveMatchIndex(index);
+    }, []);
+    const onFilterApplied = React.useCallback((provider, matches) => {
+        setFilteredProvider(provider);
+        setMatchedResultCount(matches);
+    }, []);
+    const isFiltering = !!filterString && matchedResultCount === undefined;
+    const searchOptions = {
+        isFiltering,
+        onFilterCancel,
+        onFilterStart,
+        onResultSelectedChanged,
+        matchedResultCount,
+    };
+    return {
+        searchOptions,
+        filterString,
+        activeMatchIndex,
+        onFilterApplied,
+        filteredProvider,
+    };
+};
+//# sourceMappingURL=TreeFilteringState.js.map

package/lib/esm/components/TreeFilteringState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeFilteringState.js","sourceRoot":"","sources":["../../../src/components/TreeFilteringState.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAWxC,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,EAAE;IACxC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACrD,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,EAAU,CAAC;IACvE,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,EAAU,CAAC;IACnE,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,EAAiC,CAAC;IAE1F,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC5C,eAAe,CAAC,EAAE,CAAC,CAAC;QACpB,qBAAqB,CAAC,SAAS,CAAC,CAAC;QACjC,mBAAmB,CAAC,SAAS,CAAC,CAAC;IACjC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,SAAiB,EAAE,EAAE;QAC5D,eAAe,CAAC,SAAS,CAAC,CAAC;QAC3B,qBAAqB,CAAC,SAAS,CAAC,CAAC;QACjC,mBAAmB,CAAC,SAAS,CAAC,CAAC;IACjC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,uBAAuB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAa,EAAE,EAAE;QAClE,mBAAmB,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,QAAuC,EAAE,OAAe,EAAE,EAAE;QACrG,mBAAmB,CAAC,QAAQ,CAAC,CAAC;QAC9B,qBAAqB,CAAC,OAAO,CAAC,CAAC;IACjC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,WAAW,GAAG,CAAC,CAAC,YAAY,IAAI,kBAAkB,KAAK,SAAS,CAAC;IACvE,MAAM,aAAa,GAAkB;QACnC,WAAW;QACX,cAAc;QACd,aAAa;QACb,uBAAuB;QACvB,kBAAkB;KACnB,CAAC;IAEF,OAAO;QACL,aAAa;QACb,YAAY;QACZ,gBAAgB;QAChB,eAAe;QACf,gBAAgB;KACjB,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 React, { useState } from \"react\";\nimport { IPresentationTreeDataProvider } from \"@itwin/presentation-components\";\n\nexport interface SearchOptions {\n  isFiltering: boolean;\n  onFilterCancel: () => void;\n  onFilterStart: (newFilter: string) => void;\n  onResultSelectedChanged: (index: number) => void;\n  matchedResultCount: number | undefined;\n}\n\nexport const useTreeFilteringState = () => {\n  const [filterString, setFilterString] = useState(\"\");\n  const [matchedResultCount, setMatchedResultCount] = useState<number>();\n  const [activeMatchIndex, setActiveMatchIndex] = useState<number>();\n  const [filteredProvider, setFilteredProvider] = useState<IPresentationTreeDataProvider>();\n\n  const onFilterCancel = React.useCallback(() => {\n    setFilterString(\"\");\n    setMatchedResultCount(undefined);\n    setFilteredProvider(undefined);\n  }, []);\n\n  const onFilterStart = React.useCallback((newFilter: string) => {\n    setFilterString(newFilter);\n    setMatchedResultCount(undefined);\n    setFilteredProvider(undefined);\n  }, []);\n\n  const onResultSelectedChanged = React.useCallback((index: number) => {\n    setActiveMatchIndex(index);\n  }, []);\n\n  const onFilterApplied = React.useCallback((provider: IPresentationTreeDataProvider, matches: number) => {\n    setFilteredProvider(provider);\n    setMatchedResultCount(matches);\n  }, []);\n\n  const isFiltering = !!filterString && matchedResultCount === undefined;\n  const searchOptions: SearchOptions = {\n    isFiltering,\n    onFilterCancel,\n    onFilterStart,\n    onResultSelectedChanged,\n    matchedResultCount,\n  };\n\n  return {\n    searchOptions,\n    filterString,\n    activeMatchIndex,\n    onFilterApplied,\n    filteredProvider,\n  };\n};\n"]}

package/lib/esm/components/TreeWidgetComponent.d.ts

@@ -0,0 +1,8 @@
+import "./TreeWidgetComponent.scss";
+import { SelectableContentDefinition } from "@itwin/components-react";
+interface TreeWidgetComponentProps {
+    trees?: SelectableContentDefinition[];
+}
+export declare function TreeWidgetComponent(props: TreeWidgetComponentProps): JSX.Element;
+export {};
+//# sourceMappingURL=TreeWidgetComponent.d.ts.map

package/lib/esm/components/TreeWidgetComponent.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 * as React from "react";
+import "./TreeWidgetComponent.scss";
+import { SelectableContent, } from "@itwin/components-react";
+export function TreeWidgetComponent(props) {
+    const trees = [];
+    if (props.trees && props.trees.length !== 0) {
+        for (const entry of props.trees) {
+            trees.push(entry);
+        }
+    }
+    return (React.createElement("div", { className: "tree-widget-visibility-widget" },
+        React.createElement(SelectableContent, { children: trees, defaultSelectedContentId: trees[0].id })));
+}
+//# sourceMappingURL=TreeWidgetComponent.js.map

package/lib/esm/components/TreeWidgetComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeWidgetComponent.js","sourceRoot":"","sources":["../../../src/components/TreeWidgetComponent.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,4BAA4B,CAAC;AAEpC,OAAO,EACL,iBAAiB,GAElB,MAAM,yBAAyB,CAAC;AAMjC,MAAM,UAAU,mBAAmB,CAAC,KAA+B;IACjE,MAAM,KAAK,GAAkC,EAAE,CAAC;IAEhD,IAAI,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QAC3C,KAAK,MAAM,KAAK,IAAI,KAAK,CAAC,KAAK,EAAE;YAC/B,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACnB;KACF;IAED,OAAO,CACL,6BAAK,SAAS,EAAC,+BAA+B;QAC5C,oBAAC,iBAAiB,IAChB,QAAQ,EAAE,KAAK,EACf,wBAAwB,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,GACrC,CACE,CACP,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 \"./TreeWidgetComponent.scss\";\nimport { useState } from \"react\";\nimport {\n  SelectableContent,\n  SelectableContentDefinition,\n} from \"@itwin/components-react\";\n\ninterface TreeWidgetComponentProps {\n  trees?: SelectableContentDefinition[];\n}\n\nexport function TreeWidgetComponent(props: TreeWidgetComponentProps) {\n  const trees: SelectableContentDefinition[] = [];\n\n  if (props.trees && props.trees.length !== 0) {\n    for (const entry of props.trees) {\n      trees.push(entry);\n    }\n  }\n\n  return (\n    <div className=\"tree-widget-visibility-widget\">\n      <SelectableContent\n        children={trees}\n        defaultSelectedContentId={trees[0].id}\n      />\n    </div>\n  );\n}\n"]}

package/lib/esm/components/TreeWidgetComponent.scss

@@ -0,0 +1,64 @@
+/*---------------------------------------------------------------------------------------------
+* 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-visibility-widget {
+  padding: $uicore-s;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  .components-selectable-content {
+    flex: 1;
+  }
+
+  .components-selectable-content-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: $uicore-xs;
+
+    .uicore-reactSelectTop {
+      flex: 1;
+    }
+  }
+
+  .components-selectable-content-wrapper {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    height: 100%;
+  }
+
+  .visibility-tree-toolbar {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: $uicore-xs;
+
+    .tree-toolbar-searchbox {
+      margin-left: auto;
+
+      .components-filtering-input {
+        margin: 0;
+      }
+    }
+  }
+}
+
+.tree-widget-select {
+  margin-bottom: $uicore-xs;
+}
+
+.tree-widget-tree-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.tree-widget-search-bar {
+  margin-bottom: $uicore-s;
+}

package/lib/esm/components/TreeWidgetControl.d.ts

@@ -0,0 +1,25 @@
+import { WidgetControl, ConfigurableCreateInfo } from "@itwin/appui-react";
+import React from "react";
+import { IModelConnection, Viewport } from "@itwin/core-frontend";
+import { SelectableContentDefinition } from "@itwin/components-react";
+export interface TreeWidgetControlOptions {
+    iModelConnection: IModelConnection;
+    activeView?: Viewport;
+    enableElementsClassGrouping?: boolean;
+    allViewports?: boolean;
+    additionalTrees?: SelectableContentDefinition[];
+    additionalProps?: {
+        modelsTree?: {};
+        categoriesTree?: {};
+        spatialTree?: {};
+    };
+    treeReplacements?: {
+        modelsTree?: () => React.ReactNode;
+        categoriesTree?: () => React.ReactNode;
+        spatialTree?: () => React.ReactNode;
+    };
+}
+export declare class TreeWidgetControl extends WidgetControl {
+    constructor(info: ConfigurableCreateInfo, options: TreeWidgetControlOptions);
+}
+//# sourceMappingURL=TreeWidgetControl.d.ts.map

package/lib/esm/components/TreeWidgetControl.js

@@ -0,0 +1,57 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import { WidgetControl, ClassGroupingOption, } from "@itwin/appui-react";
+import React from "react";
+import { ModelsTreeComponent, CategoriesTreeComponent, SpatialTreeComponent, } from "./trees";
+import { TreeWidgetComponent } from "./TreeWidgetComponent";
+import { TreeWidget } from "../TreeWidget";
+export class TreeWidgetControl extends WidgetControl {
+    constructor(info, options) {
+        var _a, _b, _c, _d, _e, _f;
+        super(info, options);
+        const { iModelConnection: imodel, activeView } = options;
+        const modelsTreeProps = (_a = options.additionalProps) === null || _a === void 0 ? void 0 : _a.modelsTree;
+        const categoriesTreeProps = (_b = options.additionalProps) === null || _b === void 0 ? void 0 : _b.categoriesTree;
+        const spatialTreeProps = (_c = options.additionalProps) === null || _c === void 0 ? void 0 : _c.spatialTree;
+        const enableElementsClassGrouping = options.enableElementsClassGrouping;
+        const allViewPorts = options.allViewports;
+        const additionalTrees = options.additionalTrees;
+        const modelsTreeReplacement = (_d = options.treeReplacements) === null || _d === void 0 ? void 0 : _d.modelsTree;
+        const categoriesTreeReplacement = (_e = options.treeReplacements) === null || _e === void 0 ? void 0 : _e.categoriesTree;
+        const spatialTreeReplacement = (_f = options.treeReplacements) === null || _f === void 0 ? void 0 : _f.spatialTree;
+        const modelsTreeComponent = (React.createElement(ModelsTreeComponent, { iModel: imodel, allViewports: allViewPorts, activeView: activeView, enableElementsClassGrouping: enableElementsClassGrouping, ...modelsTreeProps }));
+        const categoriesTreeComponent = (React.createElement(CategoriesTreeComponent, { iModel: imodel, allViewports: allViewPorts, activeView: activeView, ...categoriesTreeProps }));
+        const spatialContainmentComponent = (React.createElement(SpatialTreeComponent, { iModel: imodel, enableElementsClassGrouping: enableElementsClassGrouping
+                ? ClassGroupingOption.Yes
+                : ClassGroupingOption.No, ...spatialTreeProps }));
+        const trees = [
+            {
+                label: TreeWidget.translate("modeltree"),
+                id: "model-tree",
+                render: modelsTreeReplacement
+                    ? modelsTreeReplacement
+                    : () => modelsTreeComponent,
+            },
+            {
+                label: TreeWidget.translate("categories"),
+                id: "categories-tree",
+                render: categoriesTreeReplacement
+                    ? categoriesTreeReplacement
+                    : () => categoriesTreeComponent,
+            },
+            {
+                label: TreeWidget.translate("containment"),
+                id: "spatial-containment-tree",
+                render: spatialTreeReplacement
+                    ? spatialTreeReplacement
+                    : () => spatialContainmentComponent,
+            },
+        ];
+        if (additionalTrees)
+            trees.push(...additionalTrees);
+        this.reactNode = React.createElement(TreeWidgetComponent, { trees: trees });
+    }
+}
+//# sourceMappingURL=TreeWidgetControl.js.map

package/lib/esm/components/TreeWidgetControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeWidgetControl.js","sourceRoot":"","sources":["../../../src/components/TreeWidgetControl.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 {\n  WidgetControl,\n  ConfigurableCreateInfo,\n  ClassGroupingOption,\n} from \"@itwin/appui-react\";\nimport React from \"react\";\nimport {\n  ModelsTreeComponent,\n  CategoriesTreeComponent,\n  SpatialTreeComponent,\n} from \"./trees\";\nimport { IModelConnection, Viewport } from \"@itwin/core-frontend\";\nimport { TreeWidgetComponent } from \"./TreeWidgetComponent\";\nimport { SelectableContentDefinition } from \"@itwin/components-react\";\nimport { TreeWidget } from \"../TreeWidget\";\n\nexport interface TreeWidgetControlOptions {\n  iModelConnection: IModelConnection;\n  activeView?: Viewport;\n  enableElementsClassGrouping?: boolean;\n  allViewports?: boolean;\n  additionalTrees?: SelectableContentDefinition[];\n  additionalProps?: {\n    modelsTree?: {};\n    categoriesTree?: {};\n    spatialTree?: {};\n  };\n  treeReplacements?: {\n    modelsTree?: () => React.ReactNode;\n    categoriesTree?: () => React.ReactNode;\n    spatialTree?: () => React.ReactNode;\n  };\n}\n\nexport class TreeWidgetControl extends WidgetControl {\n  constructor(info: ConfigurableCreateInfo, options: TreeWidgetControlOptions) {\n    super(info, options);\n\n    const { iModelConnection: imodel, activeView } = options;\n    const modelsTreeProps = options.additionalProps?.modelsTree;\n    const categoriesTreeProps = options.additionalProps?.categoriesTree;\n    const spatialTreeProps = options.additionalProps?.spatialTree;\n    const enableElementsClassGrouping = options.enableElementsClassGrouping;\n    const allViewPorts = options.allViewports;\n    const additionalTrees = options.additionalTrees;\n    const modelsTreeReplacement = options.treeReplacements?.modelsTree;\n    const categoriesTreeReplacement = options.treeReplacements?.categoriesTree;\n    const spatialTreeReplacement = options.treeReplacements?.spatialTree;\n\n    const modelsTreeComponent = (\n      <ModelsTreeComponent\n        iModel={imodel}\n        allViewports={allViewPorts}\n        activeView={activeView}\n        enableElementsClassGrouping={enableElementsClassGrouping}\n        {...modelsTreeProps}\n      />\n    );\n\n    const categoriesTreeComponent = (\n      <CategoriesTreeComponent\n        iModel={imodel}\n        allViewports={allViewPorts}\n        activeView={activeView}\n        {...categoriesTreeProps}\n      />\n    );\n\n    const spatialContainmentComponent = (\n      <SpatialTreeComponent\n        iModel={imodel}\n        enableElementsClassGrouping={\n          enableElementsClassGrouping\n            ? ClassGroupingOption.Yes\n            : ClassGroupingOption.No\n        }\n        {...spatialTreeProps}\n      />\n    );\n\n    const trees: SelectableContentDefinition[] = [\n      {\n        label: TreeWidget.translate(\"modeltree\"),\n        id: \"model-tree\",\n        render: modelsTreeReplacement\n          ? modelsTreeReplacement\n          : () => modelsTreeComponent,\n      },\n      {\n        label: TreeWidget.translate(\"categories\"),\n        id: \"categories-tree\",\n        render: categoriesTreeReplacement\n          ? categoriesTreeReplacement\n          : () => categoriesTreeComponent,\n      },\n      {\n        label: TreeWidget.translate(\"containment\"),\n        id: \"spatial-containment-tree\",\n        render: spatialTreeReplacement\n          ? spatialTreeReplacement\n          : () => spatialContainmentComponent,\n      },\n    ];\n\n    if (additionalTrees) trees.push(...additionalTrees);\n\n    this.reactNode = <TreeWidgetComponent trees={trees} />;\n  }\n}\n"]}

package/lib/esm/components/TreeWidgetUiItemsProvider.d.ts

@@ -0,0 +1,19 @@
+import { AbstractWidgetProps, StagePanelLocation, StagePanelSection, UiItemsProvider } from "@itwin/appui-abstract";
+import { TreeWidgetControlOptions } from "./TreeWidgetControl";
+export declare class TreeWidgetUiItemsProvider implements UiItemsProvider {
+    readonly id = "TreeWidgetUiitemsProvider";
+    private _imodel?;
+    private _activeView?;
+    private _enableElementsClassGrouping?;
+    private _allViewports?;
+    private _additionalTrees?;
+    private _modelsTreeProps?;
+    private _categoriesTreeProps?;
+    private _spatialTreeProps?;
+    private _modelsTreeReplacement?;
+    private _categoriesTreeReplacement?;
+    private _spatialTreeReplacement?;
+    constructor(props?: Partial<TreeWidgetControlOptions>);
+    provideWidgets(_stageId: string, stageUsage: string, location: StagePanelLocation, _section: StagePanelSection | undefined): ReadonlyArray<AbstractWidgetProps>;
+}
+//# sourceMappingURL=TreeWidgetUiItemsProvider.d.ts.map

package/lib/esm/components/TreeWidgetUiItemsProvider.js

@@ -0,0 +1,74 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import { StagePanelLocation, StageUsage, } from "@itwin/appui-abstract";
+import { ClassGroupingOption, UiFramework } from "@itwin/appui-react";
+import React from "react";
+import { TreeWidgetComponent } from "./TreeWidgetComponent";
+import { ModelsTreeComponent, CategoriesTreeComponent, SpatialTreeComponent, } from "./trees";
+import { TreeWidget } from "../TreeWidget";
+export 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 = UiFramework.getIModelConnection();
+        if (stageUsage === StageUsage.General &&
+            location === StagePanelLocation.Right &&
+            imodel !== undefined) {
+            const modelsTreeComponent = (React.createElement(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.createElement(CategoriesTreeComponent, { iModel: (_b = this._imodel) !== null && _b !== void 0 ? _b : imodel, allViewports: this._allViewports, activeView: this._activeView, ...this._categoriesTreeProps }));
+            const spatialContainmentComponent = (React.createElement(SpatialTreeComponent, { iModel: (_c = this._imodel) !== null && _c !== void 0 ? _c : imodel, enableElementsClassGrouping: this._enableElementsClassGrouping
+                    ? ClassGroupingOption.Yes
+                    : ClassGroupingOption.No, ...this._spatialTreeProps }));
+            const trees = [
+                {
+                    label: TreeWidget.translate("modeltree"),
+                    id: "model-tree",
+                    render: this._modelsTreeReplacement
+                        ? this._modelsTreeReplacement
+                        : () => modelsTreeComponent,
+                },
+                {
+                    label: TreeWidget.translate("categories"),
+                    id: "categories-tree",
+                    render: this._categoriesTreeReplacement
+                        ? this._categoriesTreeReplacement
+                        : () => categoriesTreeComponent,
+                },
+                {
+                    label: 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.translate("treeview"),
+                getWidgetContent: () => React.createElement(TreeWidgetComponent, { trees: trees }),
+            });
+        }
+        return widgets;
+    }
+}
+//# sourceMappingURL=TreeWidgetUiItemsProvider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TreeWidgetUiItemsProvider.js","sourceRoot":"","sources":["../../../src/components/TreeWidgetUiItemsProvider.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,OAAO,EAEL,kBAAkB,EAElB,UAAU,GAEX,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACtE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EACL,mBAAmB,EACnB,uBAAuB,EACvB,oBAAoB,GACrB,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG3C,MAAM,OAAO,yBAAyB;IAepC,YAAY,KAAyC;;QAdrC,OAAE,GAAG,2BAA2B,CAAC;QAe/C,IAAI,CAAC,OAAO,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,gBAAgB,CAAC;QACvC,IAAI,CAAC,WAAW,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,UAAU,CAAC;QACrC,IAAI,CAAC,4BAA4B,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,2BAA2B,CAAC;QACvE,IAAI,CAAC,aAAa,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,YAAY,CAAC;QACzC,IAAI,CAAC,gBAAgB,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,CAAC;QAC/C,IAAI,CAAC,gBAAgB,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,0CAAE,UAAU,CAAC;QAC3D,IAAI,CAAC,oBAAoB,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,0CAAE,cAAc,CAAC;QACnE,IAAI,CAAC,iBAAiB,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,0CAAE,WAAW,CAAC;QAC7D,IAAI,CAAC,sBAAsB,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,gBAAgB,0CAAE,UAAU,CAAC;QAClE,IAAI,CAAC,0BAA0B,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,gBAAgB,0CAAE,cAAc,CAAC;QAC1E,IAAI,CAAC,uBAAuB,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,gBAAgB,0CAAE,WAAW,CAAC;IACtE,CAAC;IAEM,cAAc,CACnB,QAAgB,EAChB,UAAkB,EAClB,QAA4B,EAC5B,QAAuC;;QAEvC,MAAM,OAAO,GAA0B,EAAE,CAAC;QAC1C,MAAM,MAAM,GAAG,WAAW,CAAC,mBAAmB,EAAE,CAAC;QACjD,IACE,UAAU,KAAK,UAAU,CAAC,OAAO;YACjC,QAAQ,KAAK,kBAAkB,CAAC,KAAK;YACrC,MAAM,KAAK,SAAS,EACpB;YACA,MAAM,mBAAmB,GAAG,CAC1B,oBAAC,mBAAmB,IAClB,MAAM,EAAE,MAAA,IAAI,CAAC,OAAO,mCAAI,MAAM,EAC9B,YAAY,EAAE,IAAI,CAAC,aAAa,EAChC,UAAU,EAAE,IAAI,CAAC,WAAW,EAC5B,2BAA2B,EAAE,IAAI,CAAC,4BAA4B,KAC1D,IAAI,CAAC,gBAAgB,GACzB,CACH,CAAC;YAEF,MAAM,uBAAuB,GAAG,CAC9B,oBAAC,uBAAuB,IACtB,MAAM,EAAE,MAAA,IAAI,CAAC,OAAO,mCAAI,MAAM,EAC9B,YAAY,EAAE,IAAI,CAAC,aAAa,EAChC,UAAU,EAAE,IAAI,CAAC,WAAW,KACxB,IAAI,CAAC,oBAAoB,GAC7B,CACH,CAAC;YAEF,MAAM,2BAA2B,GAAG,CAClC,oBAAC,oBAAoB,IACnB,MAAM,EAAE,MAAA,IAAI,CAAC,OAAO,mCAAI,MAAM,EAC9B,2BAA2B,EACzB,IAAI,CAAC,4BAA4B;oBAC/B,CAAC,CAAC,mBAAmB,CAAC,GAAG;oBACzB,CAAC,CAAC,mBAAmB,CAAC,EAAE,KAExB,IAAI,CAAC,iBAAiB,GAC1B,CACH,CAAC;YAEF,MAAM,KAAK,GAAkC;gBAC3C;oBACE,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,WAAW,CAAC;oBACxC,EAAE,EAAE,YAAY;oBAChB,MAAM,EAAE,IAAI,CAAC,sBAAsB;wBACjC,CAAC,CAAC,IAAI,CAAC,sBAAsB;wBAC7B,CAAC,CAAC,GAAG,EAAE,CAAC,mBAAmB;iBAC9B;gBACD;oBACE,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,YAAY,CAAC;oBACzC,EAAE,EAAE,iBAAiB;oBACrB,MAAM,EAAE,IAAI,CAAC,0BAA0B;wBACrC,CAAC,CAAC,IAAI,CAAC,0BAA0B;wBACjC,CAAC,CAAC,GAAG,EAAE,CAAC,uBAAuB;iBAClC;gBACD;oBACE,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,aAAa,CAAC;oBAC1C,EAAE,EAAE,0BAA0B;oBAC9B,MAAM,EAAE,IAAI,CAAC,uBAAuB;wBAClC,CAAC,CAAC,IAAI,CAAC,uBAAuB;wBAC9B,CAAC,CAAC,GAAG,EAAE,CAAC,2BAA2B;iBACtC;aACF,CAAC;YAEF,IAAI,IAAI,CAAC,gBAAgB,EAAE;gBACzB,KAAK,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC;aACtC;YAED,OAAO,CAAC,IAAI,CAAC;gBACX,EAAE,EAAE,MAAM;gBACV,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,UAAU,CAAC;gBACvC,gBAAgB,EAAE,GAAG,EAAE,CAAC,oBAAC,mBAAmB,IAAC,KAAK,EAAE,KAAK,GAAI;aAC9D,CAAC,CAAC;SACJ;QAED,OAAO,OAAO,CAAC;IACjB,CAAC;CACF","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/esm/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/esm/components/header/TreeHeader.js

@@ -0,0 +1,20 @@
+/*---------------------------------------------------------------------------------------------
+* 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 { IconButton } from "../IconButton";
+import { SearchBar } from "../search-bar/SearchBar";
+import { TreeWidget } from "../../TreeWidget";
+import "./TreeHeader.scss";
+export function TreeHeaderComponent({ searchOptions, showAll, hideAll, invert, toggle2D, toggle2DIcon, toggle3D, toggle3DIcon, }) {
+    var _a;
+    return (React.createElement(SearchBar, { value: "", className: "tree-widget-header-tree-search-bar", valueChangedDelay: 500, placeholder: TreeWidget.translate("search"), title: 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, { className: "tree-widget-header-tree-toolbar-icon", key: "show-all-btn", icon: "icon-visibility", title: TreeWidget.translate("showAll"), onClick: showAll })),
+            hideAll && (React.createElement(IconButton, { className: "tree-widget-header-tree-toolbar-icon", key: "hide-all-btn", icon: "icon-visibility-hide-2", title: TreeWidget.translate("hideAll"), onClick: hideAll })),
+            invert && (React.createElement(IconButton, { key: "invert-all-btn", className: "tree-widget-header-tree-toolbar-icon", title: TreeWidget.translate("invert"), icon: "icon-visibility-invert", onClick: invert })),
+            toggle2D && toggle2DIcon && (React.createElement(IconButton, { className: "tree-widget-header-tree-toolbar-icon", key: "view-2d-btn", icon: toggle2DIcon, title: TreeWidget.translate("toggle2DViews"), onClick: toggle2D, label: TreeWidget.translate("label2D") })),
+            toggle3D && toggle3DIcon && (React.createElement(IconButton, { className: "tree-widget-header-tree-toolbar-icon", key: "view-3d-btn", icon: toggle3DIcon, title: TreeWidget.translate("toggle3DViews"), onClick: toggle3D, label: TreeWidget.translate("label3D") })))));
+}
+//# sourceMappingURL=TreeHeader.js.map

package/lib/esm/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,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,mBAAmB,CAAC;AAa3B,MAAM,UAAU,mBAAmB,CAAC,EAClC,aAAa,EACb,OAAO,EACP,OAAO,EACP,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,YAAY,GACa;;IACzB,OAAO,CACL,oBAAC,SAAS,IACR,KAAK,EAAC,EAAE,EACR,SAAS,EAAC,oCAAoC,EAC9C,iBAAiB,EAAE,GAAG,EACtB,WAAW,EAAE,UAAU,CAAC,SAAS,CAAC,QAAQ,CAAC,EAC3C,KAAK,EAAE,UAAU,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,UAAU,IACT,SAAS,EAAE,sCAAsC,EACjD,GAAG,EAAC,cAAc,EAClB,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,EACtC,OAAO,EAAE,OAAO,GAChB,CACH;YACA,OAAO,IAAI,CACV,oBAAC,UAAU,IACT,SAAS,EAAE,sCAAsC,EACjD,GAAG,EAAC,cAAc,EAClB,IAAI,EAAC,wBAAwB,EAC7B,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,EACtC,OAAO,EAAE,OAAO,GAChB,CACH;YACA,MAAM,IAAI,CACT,oBAAC,UAAU,IACT,GAAG,EAAC,gBAAgB,EACpB,SAAS,EAAE,sCAAsC,EACjD,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,QAAQ,CAAC,EACrC,IAAI,EAAC,wBAAwB,EAC7B,OAAO,EAAE,MAAM,GACf,CACH;YACA,QAAQ,IAAI,YAAY,IAAI,CAC3B,oBAAC,UAAU,IACT,SAAS,EAAE,sCAAsC,EACjD,GAAG,EAAC,aAAa,EACjB,IAAI,EAAE,YAAY,EAClB,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,eAAe,CAAC,EAC5C,OAAO,EAAE,QAAQ,EACjB,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,GACtC,CACH;YACA,QAAQ,IAAI,YAAY,IAAI,CAC3B,oBAAC,UAAU,IACT,SAAS,EAAE,sCAAsC,EACjD,GAAG,EAAC,aAAa,EACjB,IAAI,EAAE,YAAY,EAClB,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,eAAe,CAAC,EAC5C,OAAO,EAAE,QAAQ,EACjB,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,GACtC,CACH,CACG,CACI,CACb,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 { 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/esm/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%;
+}