@itwin/tree-widget-react 1.0.0-dev.3 → 1.0.0-dev.4

package/lib/{cjs/components/TreeWidgetComponent.scss → esm/components/SelectableTree.scss}

@@ -4,7 +4,7 @@
 *--------------------------------------------------------------------------------------------*/
 @import "~@itwin/itwinui-variables";
 
-.tree-widget-visibility-widget {
+.tree-widget-selectable-tree {
   padding: var(--iui-size-xs);
   width: 100%;
   height: 100%;
@@ -28,17 +28,3 @@
     height: 100%;
   }
 }
-
-.tree-widget-select {
-  padding-bottom: var(--iui-size-2xs);
-}
-
-.tree-widget-tree-container {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-.tree-widget-search-bar {
-  padding-bottom: var(--iui-size-2xs);
-}

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

@@ -1,6 +1,7 @@
+import "./TreeWidgetUiItemsProvider.scss";
 import { StagePanelLocation, StagePanelSection } from "@itwin/appui-react";
 import type { UiItemsProvider, Widget } from "@itwin/appui-react";
-import type { TreeDefinition } from "./TreeWidgetComponent";
+import type { TreeDefinition } from "./SelectableTree";
 /**
  * Parameters for creating a [[TreeWidgetUiItemsProvider]].
  * @public
@@ -21,7 +22,7 @@ export interface TreeWidgetOptions {
  */
 export declare const TreeWidgetId = "tree-widget-react:trees";
 /**
- * A [[UiItemsProvider]] implementation that provides a [[TreeWidgetComponent]] into a stage panel.
+ * A [[UiItemsProvider]] implementation that provides a [[SelectableTree]] into a stage panel.
  * @public
  */
 export declare class TreeWidgetUiItemsProvider implements UiItemsProvider {

package/lib/esm/components/TreeWidgetUiItemsProvider.js

@@ -3,19 +3,21 @@ 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.
 *--------------------------------------------------------------------------------------------*/
+import "./TreeWidgetUiItemsProvider.scss";
 import { StagePanelLocation, StagePanelSection, StageUsage } from "@itwin/appui-react";
 import { SvgHierarchyTree } from "@itwin/itwinui-icons-react";
 import { TreeWidget } from "../TreeWidget";
 import { CategoriesTreeComponent } from "./trees/category-tree/CategoriesTreeComponent";
 import { ModelsTreeComponent } from "./trees/models-tree/ModelsTreeComponent";
-import { TreeWidgetComponent } from "./TreeWidgetComponent";
+import { SelectableTree } from "./SelectableTree";
+import { useTreeTransientState } from "./utils/UseTreeTransientState";
 /**
  * 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.
+ * A [[UiItemsProvider]] implementation that provides a [[SelectableTree]] into a stage panel.
  * @public
  */
 export class TreeWidgetUiItemsProvider {
@@ -44,10 +46,14 @@ export class TreeWidgetUiItemsProvider {
         return [{
                 id: TreeWidgetId,
                 label: TreeWidget.translate("treeview"),
-                content: _jsx(TreeWidgetComponent, { trees: trees }),
+                content: _jsx(SelectableTreeWidget, { trees: trees }),
                 icon: _jsx(SvgHierarchyTree, {}),
                 priority: this._treeWidgetOptions?.defaultTreeWidgetPriority,
             }];
     }
 }
+function SelectableTreeWidget(props) {
+    const ref = useTreeTransientState();
+    return (_jsx("div", { ref: ref, className: "tree-widget", children: _jsx(SelectableTree, { ...props }) }));
+}
 //# 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":";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"]}
+{"version":3,"file":"TreeWidgetUiItemsProvider.js","sourceRoot":"","sources":["../../../src/components/TreeWidgetUiItemsProvider.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAE/F,OAAO,kCAAkC,CAAC;AAC1C,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,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAoBtE;;;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,oBAAoB,IAAC,KAAK,EAAE,KAAK,GAAI;gBAC/C,IAAI,EAAE,KAAC,gBAAgB,KAAG;gBAC1B,QAAQ,EAAE,IAAI,CAAC,kBAAkB,EAAE,yBAAyB;aAC7D,CAAC,CAAC;IACL,CAAC;CACF;AAED,SAAS,oBAAoB,CAAC,KAA0B;IACtD,MAAM,GAAG,GAAG,qBAAqB,EAAkB,CAAC;IAEpD,OAAO,CAAC,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,aAAa,YAC5C,KAAC,cAAc,OAAK,KAAK,GAAI,GACzB,CAAC,CAAC;AACV,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*--------------------------------------------------------------------------------------------*/\n\nimport \"./TreeWidgetUiItemsProvider.scss\";\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 { SelectableTree } from \"./SelectableTree\";\nimport { useTreeTransientState } from \"./utils/UseTreeTransientState\";\n\nimport type { UiItemsProvider, Widget } from \"@itwin/appui-react\";\nimport type { SelectableTreeProps, TreeDefinition } from \"./SelectableTree\";\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 [[SelectableTree]] 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: <SelectableTreeWidget trees={trees} />,\n      icon: <SvgHierarchyTree />,\n      priority: this._treeWidgetOptions?.defaultTreeWidgetPriority,\n    }];\n  }\n}\n\nfunction SelectableTreeWidget(props: SelectableTreeProps) {\n  const ref = useTreeTransientState<HTMLDivElement>();\n\n  return (<div ref={ref} className=\"tree-widget\">\n    <SelectableTree {...props} />\n  </div>);\n}\n"]}

package/lib/esm/components/TreeWidgetUiItemsProvider.scss

@@ -0,0 +1,9 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+.tree-widget {
+  height: 100%;
+  width: 100%;
+}

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

@@ -5,7 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 *--------------------------------------------------------------------------------------------*/
 import "./TreeHeader.scss";
 import classnames from "classnames";
-import { Children, useState } from "react";
+import { Children, useEffect, useRef, 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";
@@ -13,7 +13,29 @@ import { TreeWidget } from "../../TreeWidget";
 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") })] })] })] }));
+    return (_jsxs("div", { className: classnames("tree-widget-tree-header", className), children: [_jsx(HeaderButtons, { contracted: isSearchOpen, children: children }), _jsx(DebouncedSearchBox, { isOpened: isSearchOpen, onOpen: () => setIsSearchOpen(true), onClose: () => setIsSearchOpen(false), onChange: (value) => value ? onFilterStart(value) : onFilterClear(), delay: 500, selectedResultIndex: selectedIndex, resultCount: resultCount, onSelectedResultChanged: onSelectedChanged })] }));
+}
+function DebouncedSearchBox({ isOpened, selectedResultIndex, resultCount, onSelectedResultChanged, onChange, onOpen, onClose, delay }) {
+    const [inputValue, setInputValue] = useState("");
+    const onChangeRef = useRef(onChange);
+    // save latest `onChange` reference into `useRef` to avoid restarting timeout when `onChange` reference changes.
+    onChangeRef.current = onChange;
+    useEffect(() => {
+        if (!inputValue) {
+            onChangeRef.current("");
+            return;
+        }
+        const timeoutId = setTimeout(() => {
+            onChangeRef.current(inputValue);
+        }, delay);
+        return () => {
+            clearTimeout(timeoutId);
+        };
+    }, [inputValue, delay]);
+    return _jsxs(SearchBox, { expandable: true, onExpand: onOpen, onCollapse: onClose, className: classnames("tree-widget-search-box", !isOpened && "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) => setInputValue(e.currentTarget.value), className: "search-input" }), _jsx(SearchResultStepper, { selectedIndex: selectedResultIndex, total: resultCount, onStep: onSelectedResultChanged }), _jsx(SearchBox.CollapseButton, { onClick: () => {
+                            setInputValue("");
+                            onClose();
+                        }, size: "small", "aria-label": TreeWidget.translate("searchBox.close") })] })] });
 }
 function HeaderButtons(props) {
     const className = classnames("button-container", props.contracted && "contracted");

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

@@ -1 +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"]}
+{"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, useEffect, useRef, 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      <DebouncedSearchBox\n        isOpened={isSearchOpen}\n        onOpen={() => setIsSearchOpen(true)}\n        onClose={() => setIsSearchOpen(false)}\n        onChange={(value) => value ? onFilterStart(value) : onFilterClear()}\n        delay={500}\n        selectedResultIndex={selectedIndex}\n        resultCount={resultCount}\n        onSelectedResultChanged={onSelectedChanged}\n      />\n    </div>\n  );\n}\n\ninterface DebouncedSearchBoxProps {\n  isOpened: boolean;\n  onOpen: () => void;\n  onClose: () => void;\n  onChange: (value: string) => void;\n  delay: number;\n  selectedResultIndex?: number;\n  resultCount?: number;\n  onSelectedResultChanged: (index: number) => void;\n}\n\nfunction DebouncedSearchBox({ isOpened, selectedResultIndex, resultCount, onSelectedResultChanged, onChange, onOpen, onClose, delay }: DebouncedSearchBoxProps) {\n  const [inputValue, setInputValue] = useState<string>(\"\");\n  const onChangeRef = useRef(onChange);\n  // save latest `onChange` reference into `useRef` to avoid restarting timeout when `onChange` reference changes.\n  onChangeRef.current = onChange;\n\n  useEffect(() => {\n    if (!inputValue) {\n      onChangeRef.current(\"\");\n      return;\n    }\n\n    const timeoutId = setTimeout(() => {\n      onChangeRef.current(inputValue);\n    }, delay);\n\n    return () => {\n      clearTimeout(timeoutId);\n    };\n  }, [inputValue, delay]);\n\n  return <SearchBox\n    expandable\n    onExpand={onOpen}\n    onCollapse={onClose}\n    className={classnames(\"tree-widget-search-box\", !isOpened && \"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) => setInputValue(e.currentTarget.value)}\n        className=\"search-input\"\n      />\n      <SearchResultStepper\n        selectedIndex={selectedResultIndex}\n        total={resultCount}\n        onStep={onSelectedResultChanged}\n      />\n      <SearchBox.CollapseButton\n        onClick={() => {\n          setInputValue(\"\");\n          onClose();\n        }}\n        size=\"small\"\n        aria-label={TreeWidget.translate(\"searchBox.close\")}\n      />\n    </SearchBox.ExpandedState>\n  </SearchBox>;\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/trees/Common.d.ts

@@ -1,3 +1,6 @@
+import type { IModelConnection } from "@itwin/core-frontend";
+import type { SelectionMode } from "@itwin/components-react";
+import type { IPresentationTreeDataProvider } from "@itwin/presentation-components";
 /**
  * An option of how class grouping should work in a component.
  * @public
@@ -18,4 +21,28 @@ export interface VisibilityTreeFilterInfo {
     filter: string;
     activeMatchIndex?: number;
 }
+/**
+ * Base props for tree components.
+ * @public
+ */
+export interface BaseTreeProps {
+    /** An iModel to pull data from. */
+    iModel: IModelConnection;
+    /** Width of the component. */
+    width: number;
+    /** Height of the component. */
+    height: number;
+    /** Selection mode in the tree. */
+    selectionMode?: SelectionMode;
+}
+/**
+ * Base props for filterable tree components.
+ * @public
+ */
+export interface BaseFilterableTreeProps extends BaseTreeProps {
+    /** Information for tree filtering. */
+    filterInfo?: VisibilityTreeFilterInfo;
+    /** Callback invoked when tree is filtered. */
+    onFilterApplied?: (filteredDataProvider: IPresentationTreeDataProvider, matchesCount: number) => void;
+}
 //# sourceMappingURL=Common.d.ts.map

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 * @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"]}
+{"version":3,"file":"Common.js","sourceRoot":"","sources":["../../../../src/components/trees/Common.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAM/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\nimport type { IModelConnection } from \"@itwin/core-frontend\";\nimport type { SelectionMode } from \"@itwin/components-react\";\nimport type { IPresentationTreeDataProvider } from \"@itwin/presentation-components\";\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\n/**\n * Base props for tree components.\n * @public\n */\nexport interface BaseTreeProps {\n  /** An iModel to pull data from. */\n  iModel: IModelConnection;\n  /** Width of the component. */\n  width: number;\n  /** Height of the component. */\n  height: number;\n  /** Selection mode in the tree. */\n  selectionMode?: SelectionMode;\n}\n\n/**\n * Base props for filterable tree components.\n * @public\n */\nexport interface BaseFilterableTreeProps extends BaseTreeProps {\n  /** Information for tree filtering. */\n  filterInfo?: VisibilityTreeFilterInfo;\n  /** Callback invoked when tree is filtered. */\n  onFilterApplied?: (filteredDataProvider: IPresentationTreeDataProvider, matchesCount: number) => void;\n}\n"]}

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

@@ -4,10 +4,18 @@ import type { NodeCheckboxRenderProps } from "@itwin/core-react";
 import type { IPresentationTreeDataProvider } from "@itwin/presentation-components";
 import type { VisibilityTreeFilterInfo } from "./Common";
 /**
- * Props for visibility tree node renderer.
+ * Props for visibility tree renderer.
  * @public
  */
 export interface VisibilityTreeRendererProps {
+    /** Props for single node renderer. */
+    nodeRendererProps: VisibilityTreeNodeRendererProps;
+}
+/**
+ * Props for visibility tree node renderer.
+ * @public
+ */
+export interface VisibilityTreeNodeRendererProps {
     /**
      * Specifies whether the icon at the left of the node label should be rendered.
      */
@@ -31,22 +39,22 @@ export interface VisibilityTreeRendererProps {
  * Creates Visibility tree renderer which renders nodes with eye checkbox.
  * @public
  */
-export declare const createVisibilityTreeRenderer: (visibilityTreeRendererProps: VisibilityTreeRendererProps) => (props: TreeRendererProps) => JSX.Element;
+export declare function createVisibilityTreeRenderer({ nodeRendererProps }: VisibilityTreeRendererProps): (props: TreeRendererProps) => JSX.Element;
 /**
  * Creates node renderer which renders node with eye checkbox.
  * @public
  */
-export declare const createVisibilityTreeNodeRenderer: ({ levelOffset, disableRootNodeCollapse, descriptionEnabled, iconsEnabled }: VisibilityTreeRendererProps) => (treeNodeProps: TreeNodeRendererProps) => JSX.Element;
+export declare function createVisibilityTreeNodeRenderer({ levelOffset, disableRootNodeCollapse, descriptionEnabled, iconsEnabled }: VisibilityTreeNodeRendererProps): (treeNodeProps: TreeNodeRendererProps) => JSX.Element;
 /**
  * Checkbox renderer that renders an eye.
  * @public
  */
-export declare const VisibilityTreeNodeCheckbox: (props: NodeCheckboxRenderProps) => JSX.Element;
+export declare function VisibilityTreeNodeCheckbox(props: NodeCheckboxRenderProps): JSX.Element;
 /**
  * Filters data provider used in supplied node loader and invokes onFilterApplied when filtering is completed.
  * @public
  */
-export declare const useVisibilityTreeFiltering: (nodeLoader: AbstractTreeNodeLoaderWithProvider<IPresentationTreeDataProvider>, filterInfo?: VisibilityTreeFilterInfo, onFilterApplied?: ((filteredDataProvider: IPresentationTreeDataProvider, matchesCount: number) => void) | undefined) => {
+export declare function useVisibilityTreeFiltering(nodeLoader: AbstractTreeNodeLoaderWithProvider<IPresentationTreeDataProvider>, filterInfo?: VisibilityTreeFilterInfo, onFilterApplied?: (filteredDataProvider: IPresentationTreeDataProvider, matchesCount: number) => void): {
     filteredNodeLoader: AbstractTreeNodeLoaderWithProvider<IPresentationTreeDataProvider>;
     isFiltering: boolean;
     nodeHighlightingProps: import("@itwin/components-react").HighlightableTreeProps | undefined;

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

@@ -19,33 +19,34 @@ const EXPANSION_TOGGLE_WIDTH = 24;
  * Creates Visibility tree renderer which renders nodes with eye checkbox.
  * @public
  */
-export const createVisibilityTreeRenderer = (visibilityTreeRendererProps) => {
-    const nodeRenderer = createVisibilityTreeNodeRenderer(visibilityTreeRendererProps);
+export function createVisibilityTreeRenderer({ nodeRendererProps }) {
     return function VisibilityTreeRenderer(props) {
-        return (_jsx(TreeRenderer, { ...props, nodeRenderer: nodeRenderer }));
+        return (_jsx(TreeRenderer, { ...props, nodeRenderer: createVisibilityTreeNodeRenderer(nodeRendererProps) }));
     };
-};
+}
 const imageLoader = new TreeImageLoader();
 /**
  * Creates node renderer which renders node with eye checkbox.
  * @public
  */
-export const createVisibilityTreeNodeRenderer = ({ levelOffset = 20, disableRootNodeCollapse = false, descriptionEnabled, iconsEnabled }) => {
+export function createVisibilityTreeNodeRenderer({ levelOffset = 20, disableRootNodeCollapse = false, descriptionEnabled, iconsEnabled }) {
     return function VisibilityTreeNodeRenderer(treeNodeProps) {
         const nodeOffset = treeNodeProps.node.depth * levelOffset + (treeNodeProps.node.numChildren === 0 ? EXPANSION_TOGGLE_WIDTH : 0);
         return (_jsx(TreeNodeRenderer, { ...treeNodeProps, node: { ...treeNodeProps.node, depth: 0, numChildren: 1 }, checkboxRenderer: (checkboxProps) => (_jsx("div", { className: "visibility-tree-checkbox-container", style: { marginRight: `${nodeOffset}px` }, children: _jsx(VisibilityTreeNodeCheckbox, { ...checkboxProps }) })), descriptionEnabled: descriptionEnabled, imageLoader: iconsEnabled ? imageLoader : undefined, className: classNames("with-checkbox", (treeNodeProps.node.numChildren === 0 || (disableRootNodeCollapse && treeNodeProps.node.parentId === undefined)) && "disable-expander", treeNodeProps.className) }));
     };
-};
+}
 /**
  * Checkbox renderer that renders an eye.
  * @public
  */
-export const VisibilityTreeNodeCheckbox = (props) => (_jsx(Checkbox, { className: "visibility-tree-checkbox", variant: "eyeball", checked: props.checked, onChange: (e) => props.onChange(e.currentTarget.checked), disabled: props.disabled, title: props.title }));
+export function VisibilityTreeNodeCheckbox(props) {
+    return _jsx(Checkbox, { className: "visibility-tree-checkbox", variant: "eyeball", checked: props.checked, onChange: (e) => props.onChange(e.currentTarget.checked), disabled: props.disabled, title: props.title });
+}
 /**
  * Filters data provider used in supplied node loader and invokes onFilterApplied when filtering is completed.
  * @public
  */
-export const useVisibilityTreeFiltering = (nodeLoader, filterInfo, onFilterApplied) => {
+export function useVisibilityTreeFiltering(nodeLoader, filterInfo, onFilterApplied) {
     const { filter, activeMatchIndex } = filterInfo ?? { filter: undefined, activeMatchIndex: undefined };
     const { filteredNodeLoader, isFiltering, matchesCount, nodeHighlightingProps, } = useControlledPresentationTreeFiltering({ nodeLoader, filter, activeMatchIndex });
     useEffect(() => {
@@ -53,7 +54,7 @@ export const useVisibilityTreeFiltering = (nodeLoader, filterInfo, onFilterAppli
             onFilterApplied && onFilterApplied(filteredNodeLoader.dataProvider, matchesCount);
     }, [filter, matchesCount, nodeLoader, filteredNodeLoader, onFilterApplied]);
     return { filteredNodeLoader, isFiltering, nodeHighlightingProps };
-};
+}
 /**
  * Renders message that no nodes was found for filter.
  * @public

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

@@ -1 +1 @@
-{"version":3,"file":"VisibilityTreeRenderer.js","sourceRoot":"","sources":["../../../../src/components/trees/VisibilityTreeRenderer.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 { useEffect } from \"react\";\nimport { TreeImageLoader, TreeNodeRenderer, TreeRenderer } from \"@itwin/components-react\";\nimport { Checkbox } from \"@itwin/itwinui-react\";\nimport { useControlledPresentationTreeFiltering } from \"@itwin/presentation-components\";\nimport classNames from \"classnames\";\n\nimport type { AbstractTreeNodeLoaderWithProvider, TreeNodeRendererProps, TreeRendererProps } from \"@itwin/components-react\";\nimport type { NodeCheckboxRenderProps } from \"@itwin/core-react\";\nimport type { IPresentationTreeDataProvider } from \"@itwin/presentation-components\";\nimport type { VisibilityTreeFilterInfo } from \"./Common\";\n\n/**\n * This constant is taken from `@itwin/core-react`.\n * Defines the size in pixels of the expansion toggle.\n * It is used to keep same hierarchy nodes with children and nodes without children in the same line.\n * @note This value applies only to the leaf nodes.\n */\nconst EXPANSION_TOGGLE_WIDTH = 24;\n\n/**\n * Props for visibility tree node renderer.\n * @public\n */\nexport interface VisibilityTreeRendererProps {\n  /**\n   * Specifies whether the icon at the left of the node label should be rendered.\n   */\n  iconsEnabled: boolean;\n  /**\n   * Specifies whether node description should be enabled.\n   */\n  descriptionEnabled: boolean;\n  /**\n   * Defines the offset in pixels of how much each hierarchy level should be offset to the right from the checkbox.\n   * Defaults to `20`.\n   */\n  levelOffset?: number;\n  /**\n   * Specifies whether the root node be expanded at all times.\n   * Defaults to `false`.\n   */\n  disableRootNodeCollapse?: boolean;\n}\n\n/**\n * Creates Visibility tree renderer which renders nodes with eye checkbox.\n * @public\n */\nexport const createVisibilityTreeRenderer = (visibilityTreeRendererProps: VisibilityTreeRendererProps) => {\n  const nodeRenderer = createVisibilityTreeNodeRenderer(visibilityTreeRendererProps);\n  return function VisibilityTreeRenderer(props: TreeRendererProps) {\n    return (\n      <TreeRenderer\n        {...props}\n        nodeRenderer={nodeRenderer}\n      />\n    );\n  };\n};\n\nconst imageLoader = new TreeImageLoader();\n\n/**\n * Creates node renderer which renders node with eye checkbox.\n * @public\n */\nexport const createVisibilityTreeNodeRenderer = ({ levelOffset = 20, disableRootNodeCollapse = false, descriptionEnabled, iconsEnabled }: VisibilityTreeRendererProps) => {\n  return function VisibilityTreeNodeRenderer(treeNodeProps: TreeNodeRendererProps) {\n    const nodeOffset = treeNodeProps.node.depth * levelOffset + (treeNodeProps.node.numChildren === 0 ? EXPANSION_TOGGLE_WIDTH : 0);\n    return (\n      <TreeNodeRenderer\n        {...treeNodeProps}\n        node={{ ...treeNodeProps.node, depth: 0, numChildren: 1 }} // if we want to disable TreeNodeRenderer style calculations for tree nodes, we need to override these values.\n        checkboxRenderer={(checkboxProps: NodeCheckboxRenderProps) => (\n          <div className=\"visibility-tree-checkbox-container\" style={{ marginRight: `${nodeOffset}px` }}>\n            <VisibilityTreeNodeCheckbox { ...checkboxProps }/>\n          </div>\n        )}\n        descriptionEnabled={descriptionEnabled}\n        imageLoader={iconsEnabled ? imageLoader : undefined}\n        className={classNames(\"with-checkbox\", (treeNodeProps.node.numChildren === 0 || (disableRootNodeCollapse && treeNodeProps.node.parentId === undefined)) && \"disable-expander\", treeNodeProps.className)}\n      />\n    );\n  };\n};\n\n/**\n * Checkbox renderer that renders an eye.\n * @public\n */\nexport const VisibilityTreeNodeCheckbox = (props: NodeCheckboxRenderProps) => (\n  <Checkbox\n    className=\"visibility-tree-checkbox\"\n    variant=\"eyeball\"\n    checked={props.checked}\n    onChange={(e) => props.onChange(e.currentTarget.checked)}\n    disabled={props.disabled}\n    title={props.title}\n  />\n);\n\n/**\n * Filters data provider used in supplied node loader and invokes onFilterApplied when filtering is completed.\n * @public\n */\nexport const useVisibilityTreeFiltering = (\n  nodeLoader: AbstractTreeNodeLoaderWithProvider<IPresentationTreeDataProvider>,\n  filterInfo?: VisibilityTreeFilterInfo,\n  onFilterApplied?: (filteredDataProvider: IPresentationTreeDataProvider, matchesCount: number) => void,\n) => {\n  const { filter, activeMatchIndex } = filterInfo ?? { filter: undefined, activeMatchIndex: undefined };\n  const {\n    filteredNodeLoader,\n    isFiltering,\n    matchesCount,\n    nodeHighlightingProps,\n  } = useControlledPresentationTreeFiltering({ nodeLoader, filter, activeMatchIndex });\n\n  useEffect(\n    () => {\n      if (filter && matchesCount !== undefined && filteredNodeLoader !== nodeLoader)\n        onFilterApplied && onFilterApplied(filteredNodeLoader.dataProvider, matchesCount);\n    },\n    [filter, matchesCount, nodeLoader, filteredNodeLoader, onFilterApplied],\n  );\n\n  return { filteredNodeLoader, isFiltering, nodeHighlightingProps };\n};\n\n/**\n * Properties for [[VisibilityTreeNoFilteredData]] component.\n * @public\n */\nexport interface VisibilityTreeNoFilteredDataProps {\n  title: string;\n  message: string;\n}\n\n/**\n * Renders message that no nodes was found for filter.\n * @public\n */\nexport function VisibilityTreeNoFilteredData(props: VisibilityTreeNoFilteredDataProps) {\n  return (\n    <div className=\"components-tree-errormessage\">\n      <span className=\"errormessage-header\">{props.title}</span>\n      <span className=\"errormessage-body\">{props.message}</span>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"VisibilityTreeRenderer.js","sourceRoot":"","sources":["../../../../src/components/trees/VisibilityTreeRenderer.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 { useEffect } from \"react\";\nimport { TreeImageLoader, TreeNodeRenderer, TreeRenderer } from \"@itwin/components-react\";\nimport { Checkbox } from \"@itwin/itwinui-react\";\nimport { useControlledPresentationTreeFiltering } from \"@itwin/presentation-components\";\nimport classNames from \"classnames\";\n\nimport type { AbstractTreeNodeLoaderWithProvider, TreeNodeRendererProps, TreeRendererProps } from \"@itwin/components-react\";\nimport type { NodeCheckboxRenderProps } from \"@itwin/core-react\";\nimport type { IPresentationTreeDataProvider } from \"@itwin/presentation-components\";\nimport type { VisibilityTreeFilterInfo } from \"./Common\";\n\n/**\n * This constant is taken from `@itwin/core-react`.\n * Defines the size in pixels of the expansion toggle.\n * It is used to keep same hierarchy nodes with children and nodes without children in the same line.\n * @note This value applies only to the leaf nodes.\n */\nconst EXPANSION_TOGGLE_WIDTH = 24;\n\n/**\n * Props for visibility tree renderer.\n * @public\n */\nexport interface VisibilityTreeRendererProps {\n  /** Props for single node renderer. */\n  nodeRendererProps: VisibilityTreeNodeRendererProps;\n}\n\n/**\n * Props for visibility tree node renderer.\n * @public\n */\nexport interface VisibilityTreeNodeRendererProps {\n  /**\n   * Specifies whether the icon at the left of the node label should be rendered.\n   */\n  iconsEnabled: boolean;\n  /**\n   * Specifies whether node description should be enabled.\n   */\n  descriptionEnabled: boolean;\n  /**\n   * Defines the offset in pixels of how much each hierarchy level should be offset to the right from the checkbox.\n   * Defaults to `20`.\n   */\n  levelOffset?: number;\n  /**\n   * Specifies whether the root node be expanded at all times.\n   * Defaults to `false`.\n   */\n  disableRootNodeCollapse?: boolean;\n}\n\n/**\n * Creates Visibility tree renderer which renders nodes with eye checkbox.\n * @public\n */\nexport function createVisibilityTreeRenderer({ nodeRendererProps }: VisibilityTreeRendererProps) {\n  return function VisibilityTreeRenderer(props: TreeRendererProps) {\n    return (\n      <TreeRenderer\n        {...props}\n        nodeRenderer={createVisibilityTreeNodeRenderer(nodeRendererProps)}\n      />\n    );\n  };\n}\n\nconst imageLoader = new TreeImageLoader();\n\n/**\n * Creates node renderer which renders node with eye checkbox.\n * @public\n */\nexport function createVisibilityTreeNodeRenderer({ levelOffset = 20, disableRootNodeCollapse = false, descriptionEnabled, iconsEnabled }: VisibilityTreeNodeRendererProps) {\n  return function VisibilityTreeNodeRenderer(treeNodeProps: TreeNodeRendererProps) {\n    const nodeOffset = treeNodeProps.node.depth * levelOffset + (treeNodeProps.node.numChildren === 0 ? EXPANSION_TOGGLE_WIDTH : 0);\n    return (\n      <TreeNodeRenderer\n        {...treeNodeProps}\n        node={{ ...treeNodeProps.node, depth: 0, numChildren: 1 }} // if we want to disable TreeNodeRenderer style calculations for tree nodes, we need to override these values.\n        checkboxRenderer={(checkboxProps: NodeCheckboxRenderProps) => (\n          <div className=\"visibility-tree-checkbox-container\" style={{ marginRight: `${nodeOffset}px` }}>\n            <VisibilityTreeNodeCheckbox { ...checkboxProps }/>\n          </div>\n        )}\n        descriptionEnabled={descriptionEnabled}\n        imageLoader={iconsEnabled ? imageLoader : undefined}\n        className={classNames(\"with-checkbox\", (treeNodeProps.node.numChildren === 0 || (disableRootNodeCollapse && treeNodeProps.node.parentId === undefined)) && \"disable-expander\", treeNodeProps.className)}\n      />\n    );\n  };\n}\n\n/**\n * Checkbox renderer that renders an eye.\n * @public\n */\nexport function VisibilityTreeNodeCheckbox(props: NodeCheckboxRenderProps) {\n  return <Checkbox\n    className=\"visibility-tree-checkbox\"\n    variant=\"eyeball\"\n    checked={props.checked}\n    onChange={(e) => props.onChange(e.currentTarget.checked)}\n    disabled={props.disabled}\n    title={props.title}\n  />;\n}\n\n/**\n * Filters data provider used in supplied node loader and invokes onFilterApplied when filtering is completed.\n * @public\n */\nexport function useVisibilityTreeFiltering(\n  nodeLoader: AbstractTreeNodeLoaderWithProvider<IPresentationTreeDataProvider>,\n  filterInfo?: VisibilityTreeFilterInfo,\n  onFilterApplied?: (filteredDataProvider: IPresentationTreeDataProvider, matchesCount: number) => void,\n) {\n  const { filter, activeMatchIndex } = filterInfo ?? { filter: undefined, activeMatchIndex: undefined };\n  const {\n    filteredNodeLoader,\n    isFiltering,\n    matchesCount,\n    nodeHighlightingProps,\n  } = useControlledPresentationTreeFiltering({ nodeLoader, filter, activeMatchIndex });\n\n  useEffect(\n    () => {\n      if (filter && matchesCount !== undefined && filteredNodeLoader !== nodeLoader)\n        onFilterApplied && onFilterApplied(filteredNodeLoader.dataProvider, matchesCount);\n    },\n    [filter, matchesCount, nodeLoader, filteredNodeLoader, onFilterApplied],\n  );\n\n  return { filteredNodeLoader, isFiltering, nodeHighlightingProps };\n}\n\n/**\n * Properties for [[VisibilityTreeNoFilteredData]] component.\n * @public\n */\nexport interface VisibilityTreeNoFilteredDataProps {\n  title: string;\n  message: string;\n}\n\n/**\n * Renders message that no nodes was found for filter.\n * @public\n */\nexport function VisibilityTreeNoFilteredData(props: VisibilityTreeNoFilteredDataProps) {\n  return (\n    <div className=\"components-tree-errormessage\">\n      <span className=\"errormessage-header\">{props.title}</span>\n      <span className=\"errormessage-body\">{props.message}</span>\n    </div>\n  );\n}\n"]}

package/lib/esm/components/trees/category-tree/Categories.json

@@ -13,12 +13,10 @@
               "classes": [
                 {
                   "schemaName": "BisCore",
-                  "classNames": [
-                    "SpatialCategory"
-                  ]
+                  "classNames": ["SpatialCategory"],
+                  "arePolymorphic": true
                 }
               ],
-              "arePolymorphic": true,
               "relatedInstances": [
                 {
                   "relationshipPath": {
@@ -46,12 +44,10 @@
               "classes": [
                 {
                   "schemaName": "BisCore",
-                  "classNames": [
-                    "DrawingCategory"
-                  ]
+                  "classNames": ["DrawingCategory"],
+                  "arePolymorphic": true
                 }
               ],
-              "arePolymorphic": true,
               "relatedInstances": [
                 {
                   "relationshipPath": {

package/lib/esm/components/trees/category-tree/CategoriesTree.d.ts

@@ -1,10 +1,9 @@
 /// <reference types="react" />
 import "../VisibilityTreeBase.scss";
 import { CategoryVisibilityHandler } from "./CategoryVisibilityHandler";
-import type { IModelConnection, ViewManager, Viewport } from "@itwin/core-frontend";
+import type { ViewManager, Viewport } from "@itwin/core-frontend";
 import type { Ruleset } from "@itwin/presentation-common";
-import type { IPresentationTreeDataProvider } from "@itwin/presentation-components";
-import type { VisibilityTreeFilterInfo } from "../Common";
+import type { BaseFilterableTreeProps } from "../Common";
 import type { CategoryInfo } from "./CategoryVisibilityHandler";
 /**
  * Presentation rules used by ControlledCategoriesTree
@@ -15,28 +14,11 @@ export declare const RULESET_CATEGORIES: Ruleset;
  * Properties for the [[CategoryTree]] component
  * @public
  */
-export interface CategoryTreeProps {
+export interface CategoryTreeProps extends BaseFilterableTreeProps {
     /** Flag for accommodating all viewports */
     allViewports?: boolean;
     /** Active viewport */
     activeView: Viewport;
-    /**
-     * An IModel to pull data from
-     */
-    iModel: IModelConnection;
-    /** Width of the component */
-    width: number;
-    /** Height of the component */
-    height: number;
-    /**
-     * Information for tree filtering.
-     * @alpha
-     */
-    filterInfo?: VisibilityTreeFilterInfo;
-    /**
-     * Callback invoked when tree is filtered.
-     */
-    onFilterApplied?: (filteredDataProvider: IPresentationTreeDataProvider, matchesCount: number) => void;
     /**
      * Available iModel categories
      */

package/lib/esm/components/trees/category-tree/CategoriesTree.js

@@ -43,13 +43,19 @@ export function CategoryTree(props) {
         visibilityHandler,
     }), [filteredNodeLoader, visibilityHandler]));
     const treeModel = useTreeModel(filteredNodeLoader.modelSource);
-    const treeRenderer = createVisibilityTreeRenderer({ iconsEnabled: false, descriptionEnabled: true, levelOffset: 10 });
+    const treeRenderer = createVisibilityTreeRenderer({
+        nodeRendererProps: {
+            iconsEnabled: false,
+            descriptionEnabled: true,
+            levelOffset: 10,
+        },
+    });
     const overlay = isFiltering ? _jsx("div", { className: "filteredTreeOverlay" }) : undefined;
     const filterApplied = filteredNodeLoader !== nodeLoader;
     const noFilteredDataRenderer = useCallback(() => {
         return _jsx(VisibilityTreeNoFilteredData, { title: TreeWidget.translate("categoriesTree.noCategoryFound"), message: TreeWidget.translate("categoriesTree.noMatchingCategoryNames") });
     }, []);
-    return (_jsxs("div", { className: "tree-widget-visibility-tree-base", children: [_jsx(ControlledTree, { nodeLoader: filteredNodeLoader, model: treeModel, selectionMode: SelectionMode.None, eventsHandler: eventHandler, treeRenderer: treeRenderer, descriptionsEnabled: true, nodeHighlightingProps: nodeHighlightingProps, noDataRenderer: filterApplied ? noFilteredDataRenderer : undefined, width: props.width, height: props.height }), overlay] }));
+    return (_jsxs("div", { className: "tree-widget-visibility-tree-base", children: [_jsx(ControlledTree, { nodeLoader: filteredNodeLoader, model: treeModel, selectionMode: props.selectionMode ?? SelectionMode.None, eventsHandler: eventHandler, treeRenderer: treeRenderer, descriptionsEnabled: true, nodeHighlightingProps: nodeHighlightingProps, noDataRenderer: filterApplied ? noFilteredDataRenderer : undefined, width: props.width, height: props.height }), overlay] }));
 }
 function useCategoryVisibilityHandler(viewManager, imodel, categories, activeView, allViewports, visibilityHandler) {
     const defaultVisibilityHandler = useDisposable(useCallback(() => new CategoryVisibilityHandler({ viewManager, imodel, categories, activeView, allViewports }), [viewManager, imodel, categories, activeView, allViewports]));

package/lib/esm/components/trees/category-tree/CategoriesTree.js.map

@@ -1 +1 @@
-{"version":3,"file":"CategoriesTree.js","sourceRoot":"","sources":["../../../../../src/components/trees/category-tree/CategoriesTree.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n\nimport \"../VisibilityTreeBase.scss\";\nimport { useCallback, useEffect } from \"react\";\nimport { ControlledTree, SelectionMode, useTreeModel } from \"@itwin/components-react\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { useDisposable } from \"@itwin/core-react\";\nimport { usePresentationTreeNodeLoader } from \"@itwin/presentation-components\";\nimport { Presentation } from \"@itwin/presentation-frontend\";\nimport { TreeWidget } from \"../../../TreeWidget\";\nimport { VisibilityTreeEventHandler } from \"../VisibilityTreeEventHandler\";\nimport { createVisibilityTreeRenderer, useVisibilityTreeFiltering, VisibilityTreeNoFilteredData } from \"../VisibilityTreeRenderer\";\nimport { CategoryVisibilityHandler } from \"./CategoryVisibilityHandler\";\n\nimport type { IModelConnection, SpatialViewState, ViewManager, Viewport } from \"@itwin/core-frontend\";\nimport type { Ruleset } from \"@itwin/presentation-common\";\nimport type { IPresentationTreeDataProvider } from \"@itwin/presentation-components\";\nimport type { VisibilityTreeFilterInfo } from \"../Common\";\nimport type { CategoryInfo } from \"./CategoryVisibilityHandler\";\n\nconst PAGING_SIZE = 20;\n\n/**\n * Presentation rules used by ControlledCategoriesTree\n * @internal\n */\nexport const RULESET_CATEGORIES: Ruleset = require(\"./Categories.json\"); // eslint-disable-line @typescript-eslint/no-var-requires\n\n/**\n * Properties for the [[CategoryTree]] component\n * @public\n */\nexport interface CategoryTreeProps {\n  /** Flag for accommodating all viewports */\n  allViewports?: boolean;\n  /** Active viewport */\n  activeView: Viewport;\n  /**\n   * An IModel to pull data from\n   */\n  iModel: IModelConnection;\n  /** Width of the component */\n  width: number;\n  /** Height of the component */\n  height: number;\n  /**\n   * Information for tree filtering.\n   * @alpha\n   */\n  filterInfo?: VisibilityTreeFilterInfo;\n  /**\n   * Callback invoked when tree is filtered.\n   */\n  onFilterApplied?: (filteredDataProvider: IPresentationTreeDataProvider, matchesCount: number) => void;\n  /**\n   * Available iModel categories\n   */\n  categories: CategoryInfo[];\n  /**\n   * Custom category visibility handler to use for testing\n   * @internal\n   */\n  categoryVisibilityHandler?: CategoryVisibilityHandler;\n  /**\n   * Custom view manager to use for testing\n   * @internal\n   */\n  viewManager?: ViewManager;\n}\n\n/**\n * Tree which displays and manages display of categories contained in an iModel.\n * @public\n */\nexport function CategoryTree(props: CategoryTreeProps) {\n  const { nodeLoader } = usePresentationTreeNodeLoader({\n    imodel: props.iModel,\n    ruleset: RULESET_CATEGORIES,\n    pagingSize: PAGING_SIZE,\n  });\n\n  const { filteredNodeLoader, isFiltering, nodeHighlightingProps } = useVisibilityTreeFiltering(nodeLoader, props.filterInfo, props.onFilterApplied);\n  // istanbul ignore next\n  const viewManager = props.viewManager ?? IModelApp.viewManager;\n  const { activeView, allViewports, categoryVisibilityHandler } = props;\n  const visibilityHandler = useCategoryVisibilityHandler(viewManager, props.iModel, props.categories, activeView, allViewports, categoryVisibilityHandler);\n\n  useEffect(() => {\n    setViewType(activeView); // eslint-disable-line @typescript-eslint/no-floating-promises\n  }, [activeView]);\n\n  const eventHandler = useDisposable(useCallback(() => new VisibilityTreeEventHandler({\n    nodeLoader: filteredNodeLoader,\n    visibilityHandler,\n  }), [filteredNodeLoader, visibilityHandler]));\n\n  const treeModel = useTreeModel(filteredNodeLoader.modelSource);\n  const treeRenderer = createVisibilityTreeRenderer({ iconsEnabled: false, descriptionEnabled: true, levelOffset: 10 });\n  const overlay = isFiltering ? <div className=\"filteredTreeOverlay\" /> : undefined;\n  const filterApplied = filteredNodeLoader !== nodeLoader;\n\n  const noFilteredDataRenderer = useCallback(() => {\n    return <VisibilityTreeNoFilteredData\n      title={TreeWidget.translate(\"categoriesTree.noCategoryFound\")}\n      message={TreeWidget.translate(\"categoriesTree.noMatchingCategoryNames\")}\n    />;\n  }, []);\n\n  return (\n    <div className=\"tree-widget-visibility-tree-base\">\n      <ControlledTree\n        nodeLoader={filteredNodeLoader}\n        model={treeModel}\n        selectionMode={SelectionMode.None}\n        eventsHandler={eventHandler}\n        treeRenderer={treeRenderer}\n        descriptionsEnabled={true}\n        nodeHighlightingProps={nodeHighlightingProps}\n        noDataRenderer={filterApplied ? noFilteredDataRenderer : undefined}\n        width={props.width}\n        height={props.height}\n      />\n      {overlay}\n    </div>\n  );\n}\n\nfunction useCategoryVisibilityHandler(viewManager: ViewManager, imodel: IModelConnection, categories: CategoryInfo[], activeView: Viewport, allViewports?: boolean, visibilityHandler?: CategoryVisibilityHandler) {\n  const defaultVisibilityHandler = useDisposable(useCallback(\n    () =>\n      new CategoryVisibilityHandler({ viewManager, imodel, categories, activeView, allViewports }),\n    [viewManager, imodel, categories, activeView, allViewports]),\n  );\n  // istanbul ignore next\n  return visibilityHandler ?? defaultVisibilityHandler;\n}\n\nasync function setViewType(activeView: Viewport) {\n  const view = activeView.view as SpatialViewState;\n  // TODO: remove this eslint rule when tree-widget uses itwinjs-core 4.0.0 version\n  const viewType = view.is3d() ? \"3d\" : \"2d\"; // eslint-disable-line @itwin/no-internal\n  await Presentation.presentation.vars(RULESET_CATEGORIES.id).setString(\"ViewType\", viewType);\n}\n"]}
+{"version":3,"file":"CategoriesTree.js","sourceRoot":"","sources":["../../../../../src/components/trees/category-tree/CategoriesTree.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n\nimport \"../VisibilityTreeBase.scss\";\nimport { useCallback, useEffect } from \"react\";\nimport { ControlledTree, SelectionMode, useTreeModel } from \"@itwin/components-react\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { useDisposable } from \"@itwin/core-react\";\nimport { usePresentationTreeNodeLoader } from \"@itwin/presentation-components\";\nimport { Presentation } from \"@itwin/presentation-frontend\";\nimport { TreeWidget } from \"../../../TreeWidget\";\nimport { VisibilityTreeEventHandler } from \"../VisibilityTreeEventHandler\";\nimport { createVisibilityTreeRenderer, useVisibilityTreeFiltering, VisibilityTreeNoFilteredData } from \"../VisibilityTreeRenderer\";\nimport { CategoryVisibilityHandler } from \"./CategoryVisibilityHandler\";\n\nimport type { IModelConnection, SpatialViewState, ViewManager, Viewport } from \"@itwin/core-frontend\";\nimport type { Ruleset } from \"@itwin/presentation-common\";\nimport type { BaseFilterableTreeProps } from \"../Common\";\nimport type { CategoryInfo } from \"./CategoryVisibilityHandler\";\n\nconst PAGING_SIZE = 20;\n\n/**\n * Presentation rules used by ControlledCategoriesTree\n * @internal\n */\nexport const RULESET_CATEGORIES: Ruleset = require(\"./Categories.json\"); // eslint-disable-line @typescript-eslint/no-var-requires\n\n/**\n * Properties for the [[CategoryTree]] component\n * @public\n */\nexport interface CategoryTreeProps extends BaseFilterableTreeProps {\n  /** Flag for accommodating all viewports */\n  allViewports?: boolean;\n  /** Active viewport */\n  activeView: Viewport;\n  /**\n   * Available iModel categories\n   */\n  categories: CategoryInfo[];\n  /**\n   * Custom category visibility handler to use for testing\n   * @internal\n   */\n  categoryVisibilityHandler?: CategoryVisibilityHandler;\n  /**\n   * Custom view manager to use for testing\n   * @internal\n   */\n  viewManager?: ViewManager;\n}\n\n/**\n * Tree which displays and manages display of categories contained in an iModel.\n * @public\n */\nexport function CategoryTree(props: CategoryTreeProps) {\n  const { nodeLoader } = usePresentationTreeNodeLoader({\n    imodel: props.iModel,\n    ruleset: RULESET_CATEGORIES,\n    pagingSize: PAGING_SIZE,\n  });\n\n  const { filteredNodeLoader, isFiltering, nodeHighlightingProps } = useVisibilityTreeFiltering(nodeLoader, props.filterInfo, props.onFilterApplied);\n  // istanbul ignore next\n  const viewManager = props.viewManager ?? IModelApp.viewManager;\n  const { activeView, allViewports, categoryVisibilityHandler } = props;\n  const visibilityHandler = useCategoryVisibilityHandler(viewManager, props.iModel, props.categories, activeView, allViewports, categoryVisibilityHandler);\n\n  useEffect(() => {\n    setViewType(activeView); // eslint-disable-line @typescript-eslint/no-floating-promises\n  }, [activeView]);\n\n  const eventHandler = useDisposable(useCallback(() => new VisibilityTreeEventHandler({\n    nodeLoader: filteredNodeLoader,\n    visibilityHandler,\n  }), [filteredNodeLoader, visibilityHandler]));\n\n  const treeModel = useTreeModel(filteredNodeLoader.modelSource);\n  const treeRenderer = createVisibilityTreeRenderer({\n    nodeRendererProps: {\n      iconsEnabled: false,\n      descriptionEnabled: true,\n      levelOffset: 10,\n    },\n  });\n  const overlay = isFiltering ? <div className=\"filteredTreeOverlay\" /> : undefined;\n  const filterApplied = filteredNodeLoader !== nodeLoader;\n\n  const noFilteredDataRenderer = useCallback(() => {\n    return <VisibilityTreeNoFilteredData\n      title={TreeWidget.translate(\"categoriesTree.noCategoryFound\")}\n      message={TreeWidget.translate(\"categoriesTree.noMatchingCategoryNames\")}\n    />;\n  }, []);\n\n  return (\n    <div className=\"tree-widget-visibility-tree-base\">\n      <ControlledTree\n        nodeLoader={filteredNodeLoader}\n        model={treeModel}\n        selectionMode={props.selectionMode ?? SelectionMode.None}\n        eventsHandler={eventHandler}\n        treeRenderer={treeRenderer}\n        descriptionsEnabled={true}\n        nodeHighlightingProps={nodeHighlightingProps}\n        noDataRenderer={filterApplied ? noFilteredDataRenderer : undefined}\n        width={props.width}\n        height={props.height}\n      />\n      {overlay}\n    </div>\n  );\n}\n\nfunction useCategoryVisibilityHandler(viewManager: ViewManager, imodel: IModelConnection, categories: CategoryInfo[], activeView: Viewport, allViewports?: boolean, visibilityHandler?: CategoryVisibilityHandler) {\n  const defaultVisibilityHandler = useDisposable(useCallback(\n    () =>\n      new CategoryVisibilityHandler({ viewManager, imodel, categories, activeView, allViewports }),\n    [viewManager, imodel, categories, activeView, allViewports]),\n  );\n  // istanbul ignore next\n  return visibilityHandler ?? defaultVisibilityHandler;\n}\n\nasync function setViewType(activeView: Viewport) {\n  const view = activeView.view as SpatialViewState;\n  // TODO: remove this eslint rule when tree-widget uses itwinjs-core 4.0.0 version\n  const viewType = view.is3d() ? \"3d\" : \"2d\"; // eslint-disable-line @itwin/no-internal\n  await Presentation.presentation.vars(RULESET_CATEGORIES.id).setString(\"ViewType\", viewType);\n}\n"]}

package/lib/esm/components/trees/category-tree/CategoriesTreeComponent.d.ts

@@ -54,12 +54,12 @@ export declare const CategoriesTreeComponent: {
      */
     InvertAllButton: typeof InvertAllButton;
     /**
-     * Id of the component. May be used when a creating a [[TreeDefinition]] for [[TreeWidgetComponent]].
+     * Id of the component. May be used when a creating a [[TreeDefinition]] for [[SelectableTree]].
      * @public
      */
     id: string;
     /**
-     * Label of the component. May be used when a creating a [[TreeDefinition]] for [[TreeWidgetComponent]].
+     * Label of the component. May be used when a creating a [[TreeDefinition]] for [[SelectableTree]].
      * @public
      */
     getLabel(): string;

package/lib/esm/components/trees/category-tree/CategoriesTreeComponent.js

@@ -45,12 +45,12 @@ CategoriesTreeComponent.HideAllButton = HideAllButton;
  */
 CategoriesTreeComponent.InvertAllButton = InvertAllButton;
 /**
- * Id of the component. May be used when a creating a [[TreeDefinition]] for [[TreeWidgetComponent]].
+ * Id of the component. May be used when a creating a [[TreeDefinition]] for [[SelectableTree]].
  * @public
  */
 CategoriesTreeComponent.id = "categories-tree";
 /**
- * Label of the component. May be used when a creating a [[TreeDefinition]] for [[TreeWidgetComponent]].
+ * Label of the component. May be used when a creating a [[TreeDefinition]] for [[SelectableTree]].
  * @public
  */
 CategoriesTreeComponent.getLabel = () => TreeWidget.translate("categories");