@itwin/tree-widget-react 0.10.0 → 1.0.0-dev.1

package/lib/esm/components/TreeWidgetComponent.scss

@@ -14,16 +14,11 @@
 
   .components-selectable-content {
     flex: 1;
+    overflow: hidden;
   }
 
   .components-selectable-content-header {
-    display: flex;
-    align-items: center;
-    margin-bottom: var(--iui-size-2xs);
-
-    .uicore-reactSelectTop {
-      flex: 1;
-    }
+    padding-bottom: var(--iui-size-2xs);
   }
 
   .components-selectable-content-wrapper {
@@ -32,25 +27,10 @@
     flex-grow: 1;
     height: 100%;
   }
-
-  .visibility-tree-toolbar {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    margin-bottom: var(--iui-size-2xs);
-
-    .tree-toolbar-searchbox {
-      margin-left: auto;
-
-      .components-filtering-input {
-        margin: 0;
-      }
-    }
-  }
 }
 
 .tree-widget-select {
-  margin-bottom: var(--iui-size-2xs);
+  padding-bottom: var(--iui-size-2xs);
 }
 
 .tree-widget-tree-container {
@@ -60,5 +40,5 @@
 }
 
 .tree-widget-search-bar {
-  margin-bottom: var(--iui-size-2xs);
+  padding-bottom: var(--iui-size-2xs);
 }

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

@@ -1,6 +1,29 @@
-import { StagePanelLocation, StagePanelSection, UiItemsProvider, Widget } from "@itwin/appui-react";
-import { TreeWidgetOptions } from "../types";
+import { StagePanelLocation, StagePanelSection } from "@itwin/appui-react";
+import type { UiItemsProvider, Widget } from "@itwin/appui-react";
+import type { TreeDefinition } from "./TreeWidgetComponent";
+/**
+ * Parameters for creating a [[TreeWidgetUiItemsProvider]].
+ * @public
+ */
+export interface TreeWidgetOptions {
+    /** The stage panel to place the widget in. Defaults to `StagePanelLocation.Right`. */
+    defaultPanelLocation?: StagePanelLocation;
+    /** The stage panel section to place the widget in. Defaults to `StagePanelSection.Start`. */
+    defaultPanelSection?: StagePanelSection;
+    /** Widget priority in the stage panel. */
+    defaultTreeWidgetPriority?: number;
+    /** Trees to show in the widget. Defaults to [[ModelsTreeComponent]] and [[CategoriesTreeComponent]]. */
+    trees?: TreeDefinition[];
+}
+/**
+ * Id of the tree widget created by [[TreeWidgetUiItemsProvider]].
+ * @public
+ */
 export declare const TreeWidgetId = "tree-widget-react:trees";
+/**
+ * A [[UiItemsProvider]] implementation that provides a [[TreeWidgetComponent]] into a stage panel.
+ * @public
+ */
 export declare class TreeWidgetUiItemsProvider implements UiItemsProvider {
     private _treeWidgetOptions?;
     readonly id = "TreeWidgetUiItemsProvider";

package/lib/esm/components/TreeWidgetUiItemsProvider.js

@@ -1,65 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 /*---------------------------------------------------------------------------------------------
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-/* eslint-disable react/display-name */
-import React from "react";
 import { StagePanelLocation, StagePanelSection, StageUsage } from "@itwin/appui-react";
+import { SvgHierarchyTree } from "@itwin/itwinui-icons-react";
 import { TreeWidget } from "../TreeWidget";
-import { CategoriesTreeId, ModelsTreeId } from "../types";
 import { CategoriesTreeComponent } from "./trees/category-tree/CategoriesTreeComponent";
-import { ClassGroupingOption } from "./trees/Common";
 import { ModelsTreeComponent } from "./trees/models-tree/ModelsTreeComponent";
 import { TreeWidgetComponent } from "./TreeWidgetComponent";
+/**
+ * Id of the tree widget created by [[TreeWidgetUiItemsProvider]].
+ * @public
+ */
 export const TreeWidgetId = "tree-widget-react:trees";
+/**
+ * A [[UiItemsProvider]] implementation that provides a [[TreeWidgetComponent]] into a stage panel.
+ * @public
+ */
 export class TreeWidgetUiItemsProvider {
     constructor(_treeWidgetOptions) {
         this._treeWidgetOptions = _treeWidgetOptions;
         this.id = "TreeWidgetUiItemsProvider";
     }
     provideWidgets(_stageId, stageUsage, location, section) {
-        const widgets = [];
         const preferredLocation = this._treeWidgetOptions?.defaultPanelLocation ?? StagePanelLocation.Right;
         const preferredPanelSection = this._treeWidgetOptions?.defaultPanelSection ?? StagePanelSection.Start;
-        if (location === preferredLocation &&
-            section === preferredPanelSection &&
-            stageUsage === StageUsage.General) {
-            const trees = [];
-            if (!this._treeWidgetOptions?.hideTrees?.modelsTree) {
-                trees.push({
-                    label: TreeWidget.translate("models"),
-                    id: ModelsTreeId,
-                    render: () => (React.createElement(ModelsTreeComponent, { enableElementsClassGrouping: this._treeWidgetOptions?.enableElementsClassGrouping
-                            ? ClassGroupingOption.YesWithCounts
-                            : ClassGroupingOption.No, ...this._treeWidgetOptions?.modelsTreeProps })),
-                });
-            }
-            if (!this._treeWidgetOptions?.hideTrees?.categoriesTree) {
-                trees.push({
-                    label: TreeWidget.translate("categories"),
-                    id: CategoriesTreeId,
-                    render: () => (React.createElement(CategoriesTreeComponent, { ...this._treeWidgetOptions?.categoriesTreeProps })),
-                });
-            }
-            if (this._treeWidgetOptions?.additionalTrees) {
-                trees.push(...this._treeWidgetOptions.additionalTrees);
-            }
-            if (this._treeWidgetOptions?.defaultTreeId && trees.length !== 0) {
-                // Adding the defaultTree to first index
-                const { defaultTreeId } = this._treeWidgetOptions;
-                const extractedDefaultTree = trees.filter((tree) => tree.id === defaultTreeId)[0];
-                const index = trees.indexOf(extractedDefaultTree);
-                trees.unshift(trees.splice(index, 1)[0]);
-            }
-            widgets.push({
+        if (location !== preferredLocation || section !== preferredPanelSection || stageUsage !== StageUsage.General) {
+            return [];
+        }
+        const trees = this._treeWidgetOptions?.trees ?? [
+            {
+                id: ModelsTreeComponent.id,
+                getLabel: ModelsTreeComponent.getLabel,
+                render: () => _jsx(ModelsTreeComponent, {}),
+            },
+            {
+                id: CategoriesTreeComponent.id,
+                getLabel: CategoriesTreeComponent.getLabel,
+                render: () => _jsx(CategoriesTreeComponent, {}),
+            },
+        ];
+        return [{
                 id: TreeWidgetId,
                 label: TreeWidget.translate("treeview"),
-                content: React.createElement(TreeWidgetComponent, { trees: trees }),
-                icon: "icon-hierarchy-tree",
+                content: _jsx(TreeWidgetComponent, { trees: trees }),
+                icon: _jsx(SvgHierarchyTree, {}),
                 priority: this._treeWidgetOptions?.defaultTreeWidgetPriority,
-            });
-        }
-        return widgets;
+            }];
     }
 }
 //# sourceMappingURL=TreeWidgetUiItemsProvider.js.map

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

@@ -1 +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*--------------------------------------------------------------------------------------------*/\n/* eslint-disable react/display-name */\n\nimport React from \"react\";\nimport { StagePanelLocation, StagePanelSection, StageUsage, UiItemsProvider, Widget } from \"@itwin/appui-react\";\nimport { SelectableContentDefinition } from \"@itwin/components-react\";\nimport { TreeWidget } from \"../TreeWidget\";\nimport { CategoriesTreeId, ModelsTreeId, TreeWidgetOptions } from \"../types\";\nimport { CategoriesTreeComponent } from \"./trees/category-tree/CategoriesTreeComponent\";\nimport { ClassGroupingOption } from \"./trees/Common\";\nimport { ModelsTreeComponent } from \"./trees/models-tree/ModelsTreeComponent\";\nimport { TreeWidgetComponent } from \"./TreeWidgetComponent\";\n\nexport const TreeWidgetId = \"tree-widget-react:trees\";\nexport class TreeWidgetUiItemsProvider implements UiItemsProvider {\n  public readonly id = \"TreeWidgetUiItemsProvider\";\n\n  constructor(private _treeWidgetOptions?: TreeWidgetOptions) { }\n\n  public provideWidgets(\n    _stageId: string,\n    stageUsage: string,\n    location: StagePanelLocation,\n    section?: StagePanelSection\n  ): ReadonlyArray<Widget> {\n    const widgets: Widget[] = [];\n    const preferredLocation = this._treeWidgetOptions?.defaultPanelLocation ?? StagePanelLocation.Right;\n    const preferredPanelSection = this._treeWidgetOptions?.defaultPanelSection ?? StagePanelSection.Start;\n    if (\n      location === preferredLocation &&\n      section === preferredPanelSection &&\n      stageUsage === StageUsage.General\n    ) {\n      const trees: SelectableContentDefinition[] = [];\n\n      if (!this._treeWidgetOptions?.hideTrees?.modelsTree) {\n        trees.push({\n          label: TreeWidget.translate(\"models\"),\n          id: ModelsTreeId,\n          render: () => (\n            <ModelsTreeComponent\n              enableElementsClassGrouping={\n                this._treeWidgetOptions?.enableElementsClassGrouping\n                  ? ClassGroupingOption.YesWithCounts\n                  : ClassGroupingOption.No\n              }\n              {...this._treeWidgetOptions?.modelsTreeProps}\n            />\n          ),\n        });\n      }\n\n      if (!this._treeWidgetOptions?.hideTrees?.categoriesTree) {\n        trees.push({\n          label: TreeWidget.translate(\"categories\"),\n          id: CategoriesTreeId,\n          render: () => (\n            <CategoriesTreeComponent {...this._treeWidgetOptions?.categoriesTreeProps} />\n          ),\n        });\n      }\n\n      if (this._treeWidgetOptions?.additionalTrees) {\n        trees.push(...this._treeWidgetOptions.additionalTrees);\n      }\n\n      if (this._treeWidgetOptions?.defaultTreeId && trees.length !== 0) {\n        // Adding the defaultTree to first index\n        const { defaultTreeId } = this._treeWidgetOptions;\n        const extractedDefaultTree = trees.filter((tree) => tree.id === defaultTreeId)[0];\n        const index = trees.indexOf(extractedDefaultTree);\n        trees.unshift(trees.splice(index, 1)[0]);\n      }\n\n      widgets.push({\n        id: TreeWidgetId,\n        label: TreeWidget.translate(\"treeview\"),\n        content: <TreeWidgetComponent trees={trees} />,\n        icon: \"icon-hierarchy-tree\",\n        priority: this._treeWidgetOptions?.defaultTreeWidgetPriority,\n      });\n    }\n\n    return widgets;\n  }\n}\n"]}
+{"version":3,"file":"TreeWidgetUiItemsProvider.js","sourceRoot":"","sources":["../../../src/components/TreeWidgetUiItemsProvider.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAE/F,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACvF,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,uBAAuB,EAAE,MAAM,+CAA+C,CAAC;AACxF,OAAO,EAAE,mBAAmB,EAAE,MAAM,yCAAyC,CAAC;AAC9E,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAoB5D;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,yBAAyB,CAAC;AAEtD;;;GAGG;AACH,MAAM,OAAO,yBAAyB;IAGpC,YAAoB,kBAAsC;QAAtC,uBAAkB,GAAlB,kBAAkB,CAAoB;QAF1C,OAAE,GAAG,2BAA2B,CAAC;IAEa,CAAC;IAExD,cAAc,CACnB,QAAgB,EAChB,UAAkB,EAClB,QAA4B,EAC5B,OAA2B;QAE3B,MAAM,iBAAiB,GAAG,IAAI,CAAC,kBAAkB,EAAE,oBAAoB,IAAI,kBAAkB,CAAC,KAAK,CAAC;QACpG,MAAM,qBAAqB,GAAG,IAAI,CAAC,kBAAkB,EAAE,mBAAmB,IAAI,iBAAiB,CAAC,KAAK,CAAC;QAEtG,IAAI,QAAQ,KAAK,iBAAiB,IAAI,OAAO,KAAK,qBAAqB,IAAI,UAAU,KAAK,UAAU,CAAC,OAAO,EAAE;YAC5G,OAAO,EAAE,CAAC;SACX;QAED,MAAM,KAAK,GAAqB,IAAI,CAAC,kBAAkB,EAAE,KAAK,IAAI;YAChE;gBACE,EAAE,EAAE,mBAAmB,CAAC,EAAE;gBAC1B,QAAQ,EAAE,mBAAmB,CAAC,QAAQ;gBACtC,MAAM,EAAE,GAAG,EAAE,CAAC,KAAC,mBAAmB,KAAG;aACtC;YACD;gBACE,EAAE,EAAE,uBAAuB,CAAC,EAAE;gBAC9B,QAAQ,EAAE,uBAAuB,CAAC,QAAQ;gBAC1C,MAAM,EAAE,GAAG,EAAE,CAAC,KAAC,uBAAuB,KAAG;aAC1C;SACF,CAAC;QAEF,OAAO,CAAC;gBACN,EAAE,EAAE,YAAY;gBAChB,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,UAAU,CAAC;gBACvC,OAAO,EAAE,KAAC,mBAAmB,IAAC,KAAK,EAAE,KAAK,GAAI;gBAC9C,IAAI,EAAE,KAAC,gBAAgB,KAAG;gBAC1B,QAAQ,EAAE,IAAI,CAAC,kBAAkB,EAAE,yBAAyB;aAC7D,CAAC,CAAC;IACL,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*--------------------------------------------------------------------------------------------*/\n\nimport { StagePanelLocation, StagePanelSection, StageUsage } from \"@itwin/appui-react\";\nimport { SvgHierarchyTree } from \"@itwin/itwinui-icons-react\";\nimport { TreeWidget } from \"../TreeWidget\";\nimport { CategoriesTreeComponent } from \"./trees/category-tree/CategoriesTreeComponent\";\nimport { ModelsTreeComponent } from \"./trees/models-tree/ModelsTreeComponent\";\nimport { TreeWidgetComponent } from \"./TreeWidgetComponent\";\n\nimport type { UiItemsProvider, Widget } from \"@itwin/appui-react\";\nimport type { TreeDefinition } from \"./TreeWidgetComponent\";\n\n/**\n * Parameters for creating a [[TreeWidgetUiItemsProvider]].\n * @public\n */\nexport interface TreeWidgetOptions {\n  /** The stage panel to place the widget in. Defaults to `StagePanelLocation.Right`. */\n  defaultPanelLocation?: StagePanelLocation;\n  /** The stage panel section to place the widget in. Defaults to `StagePanelSection.Start`. */\n  defaultPanelSection?: StagePanelSection;\n  /** Widget priority in the stage panel. */\n  defaultTreeWidgetPriority?: number;\n  /** Trees to show in the widget. Defaults to [[ModelsTreeComponent]] and [[CategoriesTreeComponent]]. */\n  trees?: TreeDefinition[];\n}\n\n/**\n * Id of the tree widget created by [[TreeWidgetUiItemsProvider]].\n * @public\n */\nexport const TreeWidgetId = \"tree-widget-react:trees\";\n\n/**\n * A [[UiItemsProvider]] implementation that provides a [[TreeWidgetComponent]] into a stage panel.\n * @public\n */\nexport class TreeWidgetUiItemsProvider implements UiItemsProvider {\n  public readonly id = \"TreeWidgetUiItemsProvider\";\n\n  constructor(private _treeWidgetOptions?: TreeWidgetOptions) { }\n\n  public provideWidgets(\n    _stageId: string,\n    stageUsage: string,\n    location: StagePanelLocation,\n    section?: StagePanelSection\n  ): ReadonlyArray<Widget> {\n    const preferredLocation = this._treeWidgetOptions?.defaultPanelLocation ?? StagePanelLocation.Right;\n    const preferredPanelSection = this._treeWidgetOptions?.defaultPanelSection ?? StagePanelSection.Start;\n\n    if (location !== preferredLocation || section !== preferredPanelSection || stageUsage !== StageUsage.General) {\n      return [];\n    }\n\n    const trees: TreeDefinition[] = this._treeWidgetOptions?.trees ?? [\n      {\n        id: ModelsTreeComponent.id,\n        getLabel: ModelsTreeComponent.getLabel,\n        render: () => <ModelsTreeComponent />,\n      },\n      {\n        id: CategoriesTreeComponent.id,\n        getLabel: CategoriesTreeComponent.getLabel,\n        render: () => <CategoriesTreeComponent />,\n      },\n    ];\n\n    return [{\n      id: TreeWidgetId,\n      label: TreeWidget.translate(\"treeview\"),\n      content: <TreeWidgetComponent trees={trees} />,\n      icon: <SvgHierarchyTree />,\n      priority: this._treeWidgetOptions?.defaultTreeWidgetPriority,\n    }];\n  }\n}\n"]}

package/lib/esm/components/tree-header/TreeHeader.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import "./TreeHeader.scss";
+import type { Viewport } from "@itwin/core-frontend";
+import type { CommonProps } from "@itwin/core-react";
+/** @internal */
+export interface TreeHeaderButtonProps {
+    viewport: Viewport;
+}
+/** @internal */
+export interface TreeHeaderProps extends CommonProps {
+    /** Filtering is cleared after everything's loaded */
+    onFilterStart: (newFilter: string) => void;
+    /** listens for onClick event for Clear (x) icon */
+    onFilterClear: () => void;
+    /** Total number of results/entries */
+    resultCount?: number;
+    /** Current selected result index */
+    selectedIndex?: number;
+    /** Callback to currently selected result/entry change */
+    onSelectedChanged: (index: number) => void;
+    /** Header buttons */
+    children?: React.ReactNode;
+}
+/** @internal */
+export declare function TreeHeader(props: TreeHeaderProps): JSX.Element;
+//# sourceMappingURL=TreeHeader.d.ts.map

package/lib/esm/components/tree-header/TreeHeader.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import "./TreeHeader.scss";
+import classnames from "classnames";
+import { Children, useState } from "react";
+import { SvgCaretDownSmall, SvgCaretUpSmall, SvgMore } from "@itwin/itwinui-icons-react";
+import { ButtonGroup, Divider, DropdownMenu, IconButton, SearchBox } from "@itwin/itwinui-react";
+import { TreeWidget } from "../../TreeWidget";
+/** @internal */
+export function TreeHeader(props) {
+    const { onFilterStart, onFilterClear, resultCount, selectedIndex, onSelectedChanged, children, className } = props;
+    const [isSearchOpen, setIsSearchOpen] = useState(false);
+    return (_jsxs("div", { className: classnames("tree-widget-tree-header", className), children: [_jsx(HeaderButtons, { contracted: isSearchOpen, children: children }), _jsxs(SearchBox, { expandable: true, onExpand: () => setIsSearchOpen(true), onCollapse: () => setIsSearchOpen(false), className: classnames("tree-widget-search-box", !isSearchOpen && "contracted"), children: [_jsx(SearchBox.CollapsedState, { children: _jsx(SearchBox.ExpandButton, { title: TreeWidget.translate("searchBox.searchForSomething"), "aria-label": TreeWidget.translate("searchBox.open"), size: "small" }) }), _jsxs(SearchBox.ExpandedState, { children: [_jsx(SearchBox.Input, { placeholder: TreeWidget.translate("searchBox.search"), onChange: (e) => e.currentTarget.value ? onFilterStart(e.currentTarget.value) : onFilterClear(), className: "search-input" }), _jsx(SearchResultStepper, { selectedIndex: selectedIndex, total: resultCount, onStep: onSelectedChanged }), _jsx(SearchBox.CollapseButton, { onClick: onFilterClear, size: "small", "aria-label": TreeWidget.translate("searchBox.close") })] })] })] }));
+}
+function HeaderButtons(props) {
+    const className = classnames("button-container", props.contracted && "contracted");
+    return (_jsx(ButtonGroup, { className: className, overflowButton: (overflowStart) => (_jsx(DropdownMenu, { menuItems: () => Children.toArray(props.children)
+                .slice(overflowStart === 0 ? overflowStart : overflowStart - 1)
+                .map((btn, index) => _jsx("li", { className: "dropdown-item", role: "menuitem", children: btn }, index)), className: "tree-header-button-dropdown-container", children: _jsx(IconButton, { styleType: "borderless", size: "small", children: _jsx(SvgMore, {}) }) })), children: props.children }));
+}
+function SearchResultStepper(props) {
+    const { selectedIndex = 1, total, onStep } = props;
+    if (!total)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: "searchbox-stepping-count", children: `${selectedIndex}/${total}` }), _jsx(Divider, { orientation: "vertical" }), _jsx(SearchBox.Button, { title: TreeWidget.translate("searchBox.previous"), size: "small", onClick: () => {
+                    if (selectedIndex > 1)
+                        onStep(selectedIndex - 1);
+                }, children: _jsx(SvgCaretUpSmall, {}) }), _jsx(SearchBox.Button, { title: TreeWidget.translate("searchBox.next"), size: "small", onClick: () => {
+                    if (selectedIndex < total)
+                        onStep(selectedIndex + 1);
+                }, children: _jsx(SvgCaretDownSmall, {}) })] }));
+}
+//# sourceMappingURL=TreeHeader.js.map

package/lib/esm/components/tree-header/TreeHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeHeader.js","sourceRoot":"","sources":["../../../../src/components/tree-header/TreeHeader.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 \"./TreeHeader.scss\";\nimport classnames from \"classnames\";\nimport { Children, useState } from \"react\";\nimport { SvgCaretDownSmall, SvgCaretUpSmall, SvgMore } from \"@itwin/itwinui-icons-react\";\nimport { ButtonGroup, Divider, DropdownMenu, IconButton, SearchBox } from \"@itwin/itwinui-react\";\nimport { TreeWidget } from \"../../TreeWidget\";\n\nimport type { Viewport } from \"@itwin/core-frontend\";\nimport type { CommonProps } from \"@itwin/core-react\";\n\n/** @internal */\nexport interface TreeHeaderButtonProps {\n  viewport: Viewport;\n}\n\n/** @internal */\nexport interface TreeHeaderProps extends CommonProps {\n  /** Filtering is cleared after everything's loaded */\n  onFilterStart: (newFilter: string) => void;\n  /** listens for onClick event for Clear (x) icon */\n  onFilterClear: () => void;\n  /** Total number of results/entries */\n  resultCount?: number;\n  /** Current selected result index */\n  selectedIndex?: number;\n  /** Callback to currently selected result/entry change */\n  onSelectedChanged: (index: number) => void;\n  /** Header buttons */\n  children?: React.ReactNode;\n}\n\n/** @internal */\nexport function TreeHeader(props: TreeHeaderProps) {\n  const { onFilterStart, onFilterClear, resultCount, selectedIndex, onSelectedChanged, children, className } = props;\n  const [isSearchOpen, setIsSearchOpen] = useState<boolean>(false);\n  return (\n    <div className={classnames(\"tree-widget-tree-header\", className)}>\n      <HeaderButtons contracted={isSearchOpen}>\n        {children}\n      </HeaderButtons>\n      <SearchBox\n        expandable\n        onExpand={() => setIsSearchOpen(true)}\n        onCollapse={() => setIsSearchOpen(false)}\n        className={classnames(\"tree-widget-search-box\", !isSearchOpen && \"contracted\")}\n      >\n        <SearchBox.CollapsedState>\n          <SearchBox.ExpandButton\n            title={TreeWidget.translate(\"searchBox.searchForSomething\")}\n            aria-label={TreeWidget.translate(\"searchBox.open\")}\n            size=\"small\"\n          />\n        </SearchBox.CollapsedState>\n        <SearchBox.ExpandedState >\n          <SearchBox.Input\n            placeholder={TreeWidget.translate(\"searchBox.search\")}\n            onChange={(e) => e.currentTarget.value ? onFilterStart(e.currentTarget.value) : onFilterClear()}\n            className=\"search-input\"\n          />\n          <SearchResultStepper\n            selectedIndex={selectedIndex}\n            total={resultCount}\n            onStep={onSelectedChanged}\n          />\n          <SearchBox.CollapseButton\n            onClick={onFilterClear}\n            size=\"small\"\n            aria-label={TreeWidget.translate(\"searchBox.close\")}\n          />\n        </SearchBox.ExpandedState>\n      </SearchBox>\n    </div>\n  );\n}\n\ninterface HeaderButtonsProps {\n  contracted: boolean;\n  children?: React.ReactNode;\n}\n\nfunction HeaderButtons(props: HeaderButtonsProps) {\n  const className = classnames(\n    \"button-container\",\n    props.contracted && \"contracted\",\n  );\n\n  return (\n    <ButtonGroup\n      className={className}\n      overflowButton={(overflowStart) => (\n        <DropdownMenu\n          menuItems={() =>\n            Children.toArray(props.children)\n              .slice(overflowStart === 0 ? overflowStart : overflowStart - 1)\n              .map((btn, index) => <li key={index} className=\"dropdown-item\" role=\"menuitem\">{btn}</li>)\n          }\n          className=\"tree-header-button-dropdown-container\"\n        >\n          <IconButton styleType=\"borderless\" size=\"small\">\n            <SvgMore />\n          </IconButton>\n        </DropdownMenu>\n      )}\n    >\n      {props.children}\n    </ButtonGroup>\n  );\n}\n\ninterface SearchResultStepperProps {\n  total?: number;\n  onStep: (newIndex: number) => void;\n  selectedIndex?: number;\n}\n\nfunction SearchResultStepper(props: SearchResultStepperProps) {\n  const { selectedIndex = 1, total, onStep } = props;\n  if (!total)\n    return null;\n\n  return (\n    <>\n      <span className=\"searchbox-stepping-count\">{`${selectedIndex}/${total}`}</span>\n      <Divider orientation=\"vertical\" />\n      <SearchBox.Button\n        title={TreeWidget.translate(\"searchBox.previous\")}\n        size=\"small\"\n        onClick={() => {\n          if (selectedIndex > 1)\n            onStep(selectedIndex - 1);\n        }}\n      >\n        <SvgCaretUpSmall />\n      </SearchBox.Button>\n      <SearchBox.Button\n        title={TreeWidget.translate(\"searchBox.next\")}\n        size=\"small\"\n        onClick={() => {\n          if (selectedIndex < total)\n            onStep(selectedIndex + 1);\n        }}\n      >\n        <SvgCaretDownSmall />\n      </SearchBox.Button>\n    </>\n  );\n}\n"]}

package/lib/esm/components/tree-header/TreeHeader.scss

@@ -0,0 +1,69 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+// Buttons dropdown container
+.tree-header-button-dropdown-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: calc(var(--iui-size-2xs) + var(--iui-size-3xs));
+
+  .dropdown-item {
+    width: 100%;
+    height: var(--iui-size-xl);
+
+    > * {
+      width: 100%;
+      height: 100%;
+    }
+
+    &:hover {
+      background-color: transparent;
+      cursor: default;
+    }
+  }
+}
+
+.tree-widget-tree-header {
+  display: flex;
+  align-items: center;
+  height: var(--iui-size-xl);
+  justify-content: space-between;
+
+  .tree-widget-search-box {
+    height: calc(var(--iui-size-l) + var(--iui-size-3xs) * 3);
+    padding: 0;
+    width: calc(100% - var(--iui-size-xl));
+
+    &.contracted {
+      outline: none;
+      width: var(--iui-size-l);
+
+      &::before {
+        border: none;
+      }
+    }
+
+    .searchbox-stepping-count {
+      font-size: var(--iui-size-s);
+      color: var(--iui-color-text);
+      margin-right: var(--iui-size-2xs);
+    }
+
+    .search-input {
+      margin-right: var(--iui-size-xs);
+      padding: 0 var(--iui-size-xs);
+    }
+  }
+
+  .button-container {
+    height: 100%;
+    width: calc(100% - var(--iui-size-l));
+
+    &.contracted {
+      width: var(--iui-size-xl);
+    }
+  }
+}

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

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

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

@@ -7,7 +7,7 @@ import { PerModelCategoryVisibility } from "@itwin/core-frontend";
 const EMPTY_CATEGORIES_ARRAY = [];
 /**
  * Toggles visibility of categories to show or hide.
- * @alpha
+ * @internal
  */
 export async function toggleAllCategories(viewManager, imodel, display, viewport, forAllViewports) {
     // istanbul ignore next
@@ -20,13 +20,16 @@ export async function toggleAllCategories(viewManager, imodel, display, viewport
 }
 /**
  * Gets ids of all categories from specified imodel and viewport.
- * @alpha
+ * @internal
  */
 export async function getCategories(imodel, viewport) {
     const categories = await loadCategoriesFromViewport(imodel, viewport);
     return categories.map((category) => category.categoryId);
 }
-/** Changes category display in the viewport */
+/**
+ * Changes category display in the viewport.
+ * @internal
+ */
 export async function enableCategory(viewManager, imodel, ids, enabled, forAllViewports, enableAllSubCategories = true) {
     if (!viewManager.selectedView)
         return;
@@ -61,7 +64,10 @@ export async function enableCategory(viewManager, imodel, ids, enabled, forAllVi
         await updateViewport(viewManager.selectedView);
     }
 }
-/** Changes subcategory display in the viewport */
+/**
+ * Changes subcategory display in the viewport
+ * @internal
+ */
 export function enableSubCategory(viewManager, key, enabled, forAllViewports) {
     if (!viewManager.selectedView)
         return;

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

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

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

@@ -1,6 +1,6 @@
 /**
  * An option of how class grouping should work in a component.
- * @beta
+ * @public
  */
 export declare enum ClassGroupingOption {
     /** Class grouping is disabled */
@@ -12,7 +12,7 @@ export declare enum ClassGroupingOption {
 }
 /**
  * Data structure that describes info used to filter visibility tree.
- * @alpha
+ * @public
  */
 export interface VisibilityTreeFilterInfo {
     filter: string;

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

@@ -4,7 +4,7 @@
 *--------------------------------------------------------------------------------------------*/
 /**
  * An option of how class grouping should work in a component.
- * @beta
+ * @public
  */
 export var ClassGroupingOption;
 (function (ClassGroupingOption) {

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

@@ -1 +1 @@
-{"version":3,"file":"Common.js","sourceRoot":"","sources":["../../../../src/components/trees/Common.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAE/F;;;GAGG;AACH,MAAM,CAAN,IAAY,mBAOX;AAPD,WAAY,mBAAmB;IAC7B,iCAAiC;IACjC,yDAAE,CAAA;IACF,gCAAgC;IAChC,2DAAG,CAAA;IACH,4EAA4E;IAC5E,+EAAa,CAAA;AACf,CAAC,EAPW,mBAAmB,KAAnB,mBAAmB,QAO9B","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\n/**\n * An option of how class grouping should work in a component.\n * @beta\n */\nexport enum ClassGroupingOption {\n  /** Class grouping is disabled */\n  No,\n  /** Class grouping is enabled */\n  Yes,\n  /** Class grouping is enabled and grouping node shows grouped items count */\n  YesWithCounts,\n}\n\n/**\n * Data structure that describes info used to filter visibility tree.\n * @alpha\n */\nexport interface VisibilityTreeFilterInfo {\n  filter: string;\n  activeMatchIndex?: number;\n}\n"]}
+{"version":3,"file":"Common.js","sourceRoot":"","sources":["../../../../src/components/trees/Common.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAE/F;;;GAGG;AACH,MAAM,CAAN,IAAY,mBAOX;AAPD,WAAY,mBAAmB;IAC7B,iCAAiC;IACjC,yDAAE,CAAA;IACF,gCAAgC;IAChC,2DAAG,CAAA;IACH,4EAA4E;IAC5E,+EAAa,CAAA;AACf,CAAC,EAPW,mBAAmB,KAAnB,mBAAmB,QAO9B","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\n/**\n * An option of how class grouping should work in a component.\n * @public\n */\nexport enum ClassGroupingOption {\n  /** Class grouping is disabled */\n  No,\n  /** Class grouping is enabled */\n  Yes,\n  /** Class grouping is enabled and grouping node shows grouped items count */\n  YesWithCounts,\n}\n\n/**\n * Data structure that describes info used to filter visibility tree.\n * @public\n */\nexport interface VisibilityTreeFilterInfo {\n  filter: string;\n  activeMatchIndex?: number;\n}\n"]}

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

@@ -3,6 +3,19 @@
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 
+.tree-widget-tree-with-header {
+  width: 100%;
+  height: 100%;
+
+  .tree-widget-tree-header {
+    height: var(--iui-size-xl);
+  }
+
+  .tree-widget-tree-content {
+    height: calc(100% - var(--iui-size-xl));
+  }
+}
+
 .tree-widget-visibility-tree-base {
   height: 100%;
   width: 100%;
@@ -10,19 +23,63 @@
   flex-direction: column;
   position: relative;
 
-  .core-tree-node.with-checkbox {
-    >.contents {
-      padding-left: var(--iui-size-xl);
+  .ReactWindow__VariableSizeList {
+    >div {
+      min-width: max-content !important; // to override inline class
     }
   }
+  .core-tree-node {
+    &.with-checkbox {
+      >.contents {
+        padding-left: calc(var(--iui-size-3xs) / 2);
+      }
+    }
 
-  .contents > .visibility-tree-checkbox {
-    position: absolute;
-    top: unset;
-    left: 5px;
+    &.disable-expander {
+      >.contents {
+        >.core-tree-expansionToggle {
+          display: none;
+        }
+      }
+    }
 
-    &:hover, &:disabled {
-      background-color: transparent;
+    &.is-selected {
+      >.contents {
+        >.visibility-tree-checkbox-container {
+          background-color: var(--iui-color-background-accent-muted)
+        }
+      }
+    }
+  }
+
+  .contents {
+    &:hover {
+      > .visibility-tree-checkbox-container {
+        background-color: var(--iui-color-background-hover);
+      }
+    }
+
+    > .visibility-tree-checkbox-container {
+      height: var(--iui-size-l);
+      width: var(--iui-size-l);
+      position: sticky;
+      order: -1;
+      left: 0;
+      background-color: var(--iui-color-background);
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .visibility-tree-checkbox {
+        &:disabled {
+          background-color: transparent;
+        }
+
+        &:hover {
+          background-color: transparent;
+        }
+      }
     }
   }
 
@@ -51,5 +108,4 @@
       font-weight: bold;
     }
   }
-
 }