@itwin/tree-widget-react 2.3.2 → 3.0.0-dev.1

package/lib/esm/components/TreeWidgetUiItemsProvider.js

@@ -4,68 +4,66 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import "./TreeWidgetUiItemsProvider.scss";
+import { useRef } from "react";
 import { ErrorBoundary } from "react-error-boundary";
-import { StagePanelLocation, StagePanelSection, StageUsage } from "@itwin/appui-react";
+import { StagePanelLocation, StagePanelSection, useTransientState } from "@itwin/appui-react";
 import { SvgHierarchyTree } from "@itwin/itwinui-icons-react";
 import { SvgError } from "@itwin/itwinui-illustrations-react";
 import { Button, NonIdealState } from "@itwin/itwinui-react";
 import { TreeWidget } from "../TreeWidget";
 import { SelectableTree } from "./SelectableTree";
-import { CategoriesTreeComponent } from "./trees/category-tree/CategoriesTreeComponent";
-import { ModelsTreeComponent } from "./trees/models-tree/ModelsTreeComponent";
-import { useTreeTransientState } from "./utils/UseTreeTransientState";
 /**
- * Id of the tree widget created by [[TreeWidgetUiItemsProvider]].
+ * Creates a tree widget definition that should be returned from `UiItemsProvider.getWidgets()`.
  * @public
  */
-export const TreeWidgetId = "tree-widget-react:trees";
-/**
- * A [[UiItemsProvider]] implementation that provides a [[SelectableTree]] into a stage panel.
- * @public
- */
-export class TreeWidgetUiItemsProvider {
-    constructor(_treeWidgetOptions) {
-        this._treeWidgetOptions = _treeWidgetOptions;
-        this.id = "TreeWidgetUiItemsProvider";
-    }
-    provideWidgets(_stageId, stageUsage, location, section) {
-        const preferredLocation = this._treeWidgetOptions?.defaultPanelLocation ?? StagePanelLocation.Right;
-        const preferredPanelSection = this._treeWidgetOptions?.defaultPanelSection ?? StagePanelSection.Start;
-        if (location !== preferredLocation || section !== preferredPanelSection || stageUsage !== StageUsage.General) {
-            return [];
-        }
-        const trees = this._treeWidgetOptions?.trees ?? [
-            {
-                id: ModelsTreeComponent.id,
-                getLabel: ModelsTreeComponent.getLabel,
-                render: (props) => _jsx(ModelsTreeComponent, { ...props }),
-            },
-            {
-                id: CategoriesTreeComponent.id,
-                getLabel: CategoriesTreeComponent.getLabel,
-                render: (props) => _jsx(CategoriesTreeComponent, { ...props }),
+export function createTreeWidget(props) {
+    return {
+        id: "tree-widget-react:trees",
+        label: TreeWidget.translate("widget.label"),
+        icon: _jsx(SvgHierarchyTree, {}),
+        layouts: {
+            standard: {
+                section: StagePanelSection.Start,
+                location: StagePanelLocation.Right,
             },
-        ];
-        return [
-            {
-                id: TreeWidgetId,
-                label: TreeWidget.translate("treeview"),
-                content: (_jsx(TreeWidgetComponent, { trees: trees, density: this._treeWidgetOptions?.density, onPerformanceMeasured: this._treeWidgetOptions?.onPerformanceMeasured, onFeatureUsed: this._treeWidgetOptions?.onFeatureUsed })),
-                icon: _jsx(SvgHierarchyTree, {}),
-                priority: this._treeWidgetOptions?.defaultTreeWidgetPriority,
-            },
-        ];
-    }
+        },
+        content: (_jsx(TreeWidgetComponent, { trees: props.trees, density: props.density, onPerformanceMeasured: props.onPerformanceMeasured, onFeatureUsed: props.onFeatureUsed })),
+    };
 }
 /**
  * Tree widget component which allows selecting which tree to render.
  * @public
  */
 export function TreeWidgetComponent(props) {
-    const ref = useTreeTransientState();
+    const ref = useTreeWidgetTransientState();
     return (_jsx("div", { ref: ref, className: "tree-widget", children: _jsx(ErrorBoundary, { FallbackComponent: ErrorState, children: _jsx(SelectableTree, { ...props }) }) }));
 }
 function ErrorState({ resetErrorBoundary }) {
-    return (_jsx(NonIdealState, { svg: _jsx(SvgError, {}), heading: TreeWidget.translate("error"), description: TreeWidget.translate("generic-error-description"), actions: _jsx(Button, { styleType: "high-visibility", onClick: resetErrorBoundary, children: TreeWidget.translate("retry") }) }));
+    return (_jsx(NonIdealState, { svg: _jsx(SvgError, {}), heading: TreeWidget.translate("errorState.title"), description: TreeWidget.translate("errorState.description"), actions: _jsx(Button, { styleType: "high-visibility", onClick: resetErrorBoundary, children: TreeWidget.translate("errorState.retryButtonLabel") }) }));
+}
+function useTreeWidgetTransientState() {
+    const { ref, persist, restore } = useTreeStorage();
+    useTransientState(persist, restore);
+    return ref;
+}
+function useTreeStorage() {
+    const ref = useRef(null);
+    const scrollTop = useRef();
+    const getContainer = () => {
+        return ref.current?.querySelector("#tw-tree-renderer-container");
+    };
+    const persist = () => {
+        const container = getContainer();
+        scrollTop.current = container?.scrollTop;
+    };
+    const restore = () => {
+        setTimeout(() => {
+            const container = getContainer();
+            if (container && scrollTop.current) {
+                container.scrollTop = scrollTop.current;
+            }
+        });
+    };
+    return { ref, persist, restore };
 }
 //# 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\nimport \"./TreeWidgetUiItemsProvider.scss\";\nimport { ErrorBoundary } from \"react-error-boundary\";\nimport { StagePanelLocation, StagePanelSection, StageUsage } from \"@itwin/appui-react\";\nimport { SvgHierarchyTree } from \"@itwin/itwinui-icons-react\";\nimport { SvgError } from \"@itwin/itwinui-illustrations-react\";\nimport { Button, NonIdealState } from \"@itwin/itwinui-react\";\nimport { TreeWidget } from \"../TreeWidget\";\nimport { SelectableTree } from \"./SelectableTree\";\nimport { CategoriesTreeComponent } from \"./trees/category-tree/CategoriesTreeComponent\";\nimport { ModelsTreeComponent } from \"./trees/models-tree/ModelsTreeComponent\";\nimport { useTreeTransientState } from \"./utils/UseTreeTransientState\";\n\nimport type { UiItemsProvider, Widget } from \"@itwin/appui-react\";\nimport type { SelectableTreeProps, TreeDefinition } from \"./SelectableTree\";\nimport type { FallbackProps } from \"react-error-boundary\";\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  /** Modifies the density of the tree widget. `enlarged` widget contains larger content */\n  density?: \"enlarged\" | \"default\";\n  /** Callback that is invoked when performance of tracked feature is measured. */\n  onPerformanceMeasured?: (feature: string, elapsedTime: number) => void;\n  /** Callback that is invoked when a tracked feature is used. */\n  onFeatureUsed?: (feature: string) => void;\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(_stageId: string, stageUsage: string, location: StagePanelLocation, section?: StagePanelSection): 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: (props) => <ModelsTreeComponent {...props} />,\n      },\n      {\n        id: CategoriesTreeComponent.id,\n        getLabel: CategoriesTreeComponent.getLabel,\n        render: (props) => <CategoriesTreeComponent {...props} />,\n      },\n    ];\n\n    return [\n      {\n        id: TreeWidgetId,\n        label: TreeWidget.translate(\"treeview\"),\n        content: (\n          <TreeWidgetComponent\n            trees={trees}\n            density={this._treeWidgetOptions?.density}\n            onPerformanceMeasured={this._treeWidgetOptions?.onPerformanceMeasured}\n            onFeatureUsed={this._treeWidgetOptions?.onFeatureUsed}\n          />\n        ),\n        icon: <SvgHierarchyTree />,\n        priority: this._treeWidgetOptions?.defaultTreeWidgetPriority,\n      },\n    ];\n  }\n}\n\n/**\n * Tree widget component which allows selecting which tree to render.\n * @public\n */\nexport function TreeWidgetComponent(props: SelectableTreeProps) {\n  const ref = useTreeTransientState<HTMLDivElement>();\n\n  return (\n    <div ref={ref} className=\"tree-widget\">\n      <ErrorBoundary FallbackComponent={ErrorState}>\n        <SelectableTree {...props} />\n      </ErrorBoundary>\n    </div>\n  );\n}\n\nfunction ErrorState({ resetErrorBoundary }: FallbackProps) {\n  return (\n    <NonIdealState\n      svg={<SvgError />}\n      heading={TreeWidget.translate(\"error\")}\n      description={TreeWidget.translate(\"generic-error-description\")}\n      actions={\n        <Button styleType={\"high-visibility\"} onClick={resetErrorBoundary}>\n          {TreeWidget.translate(\"retry\")}\n        </Button>\n      }\n    />\n  );\n}\n"]}
+{"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\nimport \"./TreeWidgetUiItemsProvider.scss\";\nimport { useRef } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\nimport { StagePanelLocation, StagePanelSection, useTransientState } from \"@itwin/appui-react\";\nimport { SvgHierarchyTree } from \"@itwin/itwinui-icons-react\";\nimport { SvgError } from \"@itwin/itwinui-illustrations-react\";\nimport { Button, NonIdealState } from \"@itwin/itwinui-react\";\nimport { TreeWidget } from \"../TreeWidget\";\nimport { SelectableTree } from \"./SelectableTree\";\n\nimport type { Widget } from \"@itwin/appui-react\";\nimport type { SelectableTreeProps, TreeDefinition } from \"./SelectableTree\";\nimport type { FallbackProps } from \"react-error-boundary\";\nimport type { Ref } from \"react\";\n\n/**\n * Props for `createWidget`.\n */\ninterface TreeWidgetProps {\n  /**\n   * Trees to show in the widget.\n   * @see ModelsTreeComponent\n   * @see CategoriesTreeComponent\n   * @see ExternalSourcesTreeComponent\n   * @see IModelContentTreeComponent\n   */\n  trees: TreeDefinition[];\n  /** Modifies the density of the tree widget. `enlarged` widget contains larger content */\n  density?: \"enlarged\" | \"default\";\n  /** Callback that is invoked when performance of tracked feature is measured. */\n  onPerformanceMeasured?: (feature: string, elapsedTime: number) => void;\n  /** Callback that is invoked when a tracked feature is used. */\n  onFeatureUsed?: (feature: string) => void;\n}\n\n/**\n * Creates a tree widget definition that should be returned from `UiItemsProvider.getWidgets()`.\n * @public\n */\nexport function createTreeWidget(props: TreeWidgetProps): Widget {\n  return {\n    id: \"tree-widget-react:trees\",\n    label: TreeWidget.translate(\"widget.label\"),\n    icon: <SvgHierarchyTree />,\n    layouts: {\n      standard: {\n        section: StagePanelSection.Start,\n        location: StagePanelLocation.Right,\n      },\n    },\n    content: (\n      <TreeWidgetComponent\n        trees={props.trees}\n        density={props.density}\n        onPerformanceMeasured={props.onPerformanceMeasured}\n        onFeatureUsed={props.onFeatureUsed}\n      />\n    ),\n  };\n}\n\n/**\n * Tree widget component which allows selecting which tree to render.\n * @public\n */\nexport function TreeWidgetComponent(props: SelectableTreeProps) {\n  const ref = useTreeWidgetTransientState();\n  return (\n    <div ref={ref} className=\"tree-widget\">\n      <ErrorBoundary FallbackComponent={ErrorState}>\n        <SelectableTree {...props} />\n      </ErrorBoundary>\n    </div>\n  );\n}\n\nfunction ErrorState({ resetErrorBoundary }: FallbackProps) {\n  return (\n    <NonIdealState\n      svg={<SvgError />}\n      heading={TreeWidget.translate(\"errorState.title\")}\n      description={TreeWidget.translate(\"errorState.description\")}\n      actions={\n        <Button styleType={\"high-visibility\"} onClick={resetErrorBoundary}>\n          {TreeWidget.translate(\"errorState.retryButtonLabel\")}\n        </Button>\n      }\n    />\n  );\n}\n\nfunction useTreeWidgetTransientState() {\n  const { ref, persist, restore } = useTreeStorage();\n  useTransientState(persist, restore);\n  return ref;\n}\n\ninterface UseTreeStorageResult {\n  ref: Ref<HTMLDivElement>;\n  persist: () => void;\n  restore: () => void;\n}\n\nfunction useTreeStorage(): UseTreeStorageResult {\n  const ref = useRef<HTMLDivElement>(null);\n  const scrollTop = useRef<number | undefined>();\n\n  const getContainer = () => {\n    return ref.current?.querySelector(\"#tw-tree-renderer-container\");\n  };\n\n  const persist = () => {\n    const container = getContainer();\n    scrollTop.current = container?.scrollTop;\n  };\n\n  const restore = () => {\n    setTimeout(() => {\n      const container = getContainer();\n      if (container && scrollTop.current) {\n        container.scrollTop = scrollTop.current;\n      }\n    });\n  };\n\n  return { ref, persist, restore };\n}\n"]}

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

@@ -9,14 +9,23 @@ 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";
+import { useFocusedInstancesContext } from "../trees/common/FocusedInstancesContext";
 /** @internal */
 export function TreeHeader(props) {
     const { onFilterStart, onFilterClear, resultCount, selectedIndex, onSelectedChanged, children, density, className } = props;
     const [isSearchOpen, setIsSearchOpen] = useState(false);
-    const isEnlarged = density === "enlarged";
-    return (_jsxs("div", { className: classnames("tree-widget-tree-header", className, isEnlarged && "enlarge"), children: [_jsx(HeaderButtons, { contracted: isSearchOpen, isEnlarged: isEnlarged, 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, size: isEnlarged ? "large" : "small" })] }));
+    const { enabled: instanceFocusEnabled } = useFocusedInstancesContext();
+    const size = density === "enlarged" ? "large" : "small";
+    useEffect(() => {
+        // istanbul ignore if
+        if (instanceFocusEnabled) {
+            onFilterClear();
+            setIsSearchOpen(false);
+        }
+    }, [instanceFocusEnabled, onFilterClear]);
+    return (_jsxs("div", { className: classnames("tree-widget-tree-header", className), children: [_jsx(HeaderButtons, { contracted: isSearchOpen, size: size, 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, size: size, isDisabled: instanceFocusEnabled })] }));
 }
-function DebouncedSearchBox({ isOpened, selectedResultIndex, resultCount, onSelectedResultChanged, onChange, onOpen, onClose, delay, size, }) {
+function DebouncedSearchBox({ isOpened, selectedResultIndex, resultCount, onSelectedResultChanged, onChange, onOpen, onClose, delay, size, isDisabled, }) {
     const [inputValue, setInputValue] = useState("");
     const onChangeRef = useRef(onChange);
     // save latest `onChange` reference into `useRef` to avoid restarting timeout when `onChange` reference changes.
@@ -33,28 +42,27 @@ function DebouncedSearchBox({ isOpened, selectedResultIndex, resultCount, onSele
             clearTimeout(timeoutId);
         };
     }, [inputValue, delay]);
-    return (_jsxs(SearchBox, { expandable: true, onExpand: onOpen, onCollapse: onClose, size: size, 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: size, styleType: "borderless" }) }), _jsxs(SearchBox.ExpandedState, { children: [_jsx(SearchBox.Input, { placeholder: TreeWidget.translate("searchBox.search"), onChange: (e) => setInputValue(e.currentTarget.value) }), _jsx(SearchResultStepper, { selectedIndex: selectedResultIndex, total: resultCount, onStep: onSelectedResultChanged, size: size }), _jsx(SearchBox.CollapseButton, { onClick: () => {
+    return (_jsxs(SearchBox, { expandable: true, isExpanded: isOpened, onExpand: onOpen, onCollapse: onClose, size: size, className: classnames("tree-widget-search-box", !isOpened && "contracted"), isDisabled: isDisabled, children: [_jsx(SearchBox.CollapsedState, { children: _jsx(SearchBox.ExpandButton, { title: TreeWidget.translate("header.searchBox.searchForSomething"), "aria-label": TreeWidget.translate("header.searchBox.open"), size: size, styleType: "borderless" }) }), _jsxs(SearchBox.ExpandedState, { children: [_jsx(SearchBox.Input, { placeholder: TreeWidget.translate("header.searchBox.search"), onChange: (e) => setInputValue(e.currentTarget.value) }), _jsx(SearchResultStepper, { selectedIndex: selectedResultIndex, total: resultCount, onStep: onSelectedResultChanged, size: size }), _jsx(SearchBox.CollapseButton, { onClick: () => {
                             setInputValue("");
                             onClose();
-                        }, size: size, "aria-label": TreeWidget.translate("searchBox.close") })] })] }));
+                        }, size: size, "aria-label": TreeWidget.translate("header.searchBox.close") })] })] }));
 }
 function HeaderButtons(props) {
     const className = classnames("button-container", props.contracted && "contracted");
-    const dropdownClassName = classnames("dropdown-item", props.isEnlarged && "enlarge");
     return (_jsx(ButtonGroup, { className: className, overflowButton: (overflowStart) => (_jsx(DropdownMenu, { menuItems: () => Children.toArray(props.children)
                 .slice(overflowStart)
-                .map((btn, index) => (_jsx("li", { className: dropdownClassName, role: "menuitem", children: btn }, index))), className: "tree-header-button-dropdown-container", children: _jsx(IconButton, { title: TreeWidget.translate("dropdownMore"), styleType: "borderless", size: props.isEnlarged ? undefined : "small", children: _jsx(SvgMore, {}) }) })), children: props.children }));
+                .map((btn, index) => (_jsx("li", { className: "dropdown-item", role: "menuitem", children: btn }, index))), className: "tree-header-button-dropdown-container", children: _jsx(IconButton, { title: TreeWidget.translate("header.dropdownMore"), styleType: "borderless", size: props.size, 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: props.size, onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: "searchbox-stepping-count", children: `${selectedIndex}/${total}` }), _jsx(Divider, { orientation: "vertical" }), _jsx(SearchBox.Button, { title: TreeWidget.translate("header.searchBox.previous"), size: props.size, onClick: () => {
                     if (selectedIndex > 1) {
                         onStep(selectedIndex - 1);
                     }
-                }, children: _jsx(SvgCaretUpSmall, {}) }), _jsx(SearchBox.Button, { title: TreeWidget.translate("searchBox.next"), size: props.size, onClick: () => {
+                }, children: _jsx(SvgCaretUpSmall, {}) }), _jsx(SearchBox.Button, { title: TreeWidget.translate("header.searchBox.next"), size: props.size, onClick: () => {
                     if (selectedIndex < total) {
                         onStep(selectedIndex + 1);
                     }

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, 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  density?: \"default\" | \"enlarged\";\n  onFeatureUsed?: (feature: string) => void;\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  /** Modifies the density of tree header. `enlarged` header contains larger content */\n  density?: \"default\" | \"enlarged\";\n}\n\n/** @internal */\nexport function TreeHeader(props: TreeHeaderProps) {\n  const { onFilterStart, onFilterClear, resultCount, selectedIndex, onSelectedChanged, children, density, className } = props;\n  const [isSearchOpen, setIsSearchOpen] = useState<boolean>(false);\n  const isEnlarged = density === \"enlarged\";\n  return (\n    <div className={classnames(\"tree-widget-tree-header\", className, isEnlarged && \"enlarge\")}>\n      <HeaderButtons contracted={isSearchOpen} isEnlarged={isEnlarged}>\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        size={isEnlarged ? \"large\" : \"small\"}\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  size?: \"large\" | \"small\";\n}\n\nfunction DebouncedSearchBox({\n  isOpened,\n  selectedResultIndex,\n  resultCount,\n  onSelectedResultChanged,\n  onChange,\n  onOpen,\n  onClose,\n  delay,\n  size,\n}: 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 (\n    <SearchBox expandable onExpand={onOpen} onCollapse={onClose} size={size} className={classnames(\"tree-widget-search-box\", !isOpened && \"contracted\")}>\n      <SearchBox.CollapsedState>\n        <SearchBox.ExpandButton\n          title={TreeWidget.translate(\"searchBox.searchForSomething\")}\n          aria-label={TreeWidget.translate(\"searchBox.open\")}\n          size={size}\n          styleType=\"borderless\"\n        />\n      </SearchBox.CollapsedState>\n      <SearchBox.ExpandedState>\n        <SearchBox.Input placeholder={TreeWidget.translate(\"searchBox.search\")} onChange={(e) => setInputValue(e.currentTarget.value)} />\n        <SearchResultStepper selectedIndex={selectedResultIndex} total={resultCount} onStep={onSelectedResultChanged} size={size} />\n        <SearchBox.CollapseButton\n          onClick={() => {\n            setInputValue(\"\");\n            onClose();\n          }}\n          size={size}\n          aria-label={TreeWidget.translate(\"searchBox.close\")}\n        />\n      </SearchBox.ExpandedState>\n    </SearchBox>\n  );\n}\n\ninterface HeaderButtonsProps {\n  contracted: boolean;\n  children?: React.ReactNode;\n  isEnlarged?: boolean;\n}\n\nfunction HeaderButtons(props: HeaderButtonsProps) {\n  const className = classnames(\"button-container\", props.contracted && \"contracted\");\n  const dropdownClassName = classnames(\"dropdown-item\", props.isEnlarged && \"enlarge\");\n\n  return (\n    <ButtonGroup\n      className={className}\n      overflowButton={(overflowStart) => (\n        <DropdownMenu\n          menuItems={() =>\n            Children.toArray(props.children)\n              .slice(overflowStart)\n              .map((btn, index) => (\n                <li key={index} className={dropdownClassName} role=\"menuitem\">\n                  {btn}\n                </li>\n              ))\n          }\n          className=\"tree-header-button-dropdown-container\"\n        >\n          <IconButton title={TreeWidget.translate(\"dropdownMore\")} styleType=\"borderless\" size={props.isEnlarged ? undefined : \"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  size?: \"large\" | \"small\";\n}\n\nfunction SearchResultStepper(props: SearchResultStepperProps) {\n  const { selectedIndex = 1, total, onStep } = props;\n  if (!total) {\n    return null;\n  }\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={props.size}\n        onClick={() => {\n          if (selectedIndex > 1) {\n            onStep(selectedIndex - 1);\n          }\n        }}\n      >\n        <SvgCaretUpSmall />\n      </SearchBox.Button>\n      <SearchBox.Button\n        title={TreeWidget.translate(\"searchBox.next\")}\n        size={props.size}\n        onClick={() => {\n          if (selectedIndex < total) {\n            onStep(selectedIndex + 1);\n          }\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\";\nimport { useFocusedInstancesContext } from \"../trees/common/FocusedInstancesContext\";\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  density?: \"default\" | \"enlarged\";\n  onFeatureUsed?: (feature: string) => void;\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  /** Modifies the density of tree header. `enlarged` header contains larger content */\n  density?: \"default\" | \"enlarged\";\n}\n\n/** @internal */\nexport function TreeHeader(props: TreeHeaderProps) {\n  const { onFilterStart, onFilterClear, resultCount, selectedIndex, onSelectedChanged, children, density, className } = props;\n  const [isSearchOpen, setIsSearchOpen] = useState<boolean>(false);\n  const { enabled: instanceFocusEnabled } = useFocusedInstancesContext();\n  const size = density === \"enlarged\" ? \"large\" : \"small\";\n\n  useEffect(() => {\n    // istanbul ignore if\n    if (instanceFocusEnabled) {\n      onFilterClear();\n      setIsSearchOpen(false);\n    }\n  }, [instanceFocusEnabled, onFilterClear]);\n\n  return (\n    <div className={classnames(\"tree-widget-tree-header\", className)}>\n      <HeaderButtons contracted={isSearchOpen} size={size}>\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        size={size}\n        isDisabled={instanceFocusEnabled}\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  size: \"large\" | \"small\";\n  isDisabled?: boolean;\n}\n\nfunction DebouncedSearchBox({\n  isOpened,\n  selectedResultIndex,\n  resultCount,\n  onSelectedResultChanged,\n  onChange,\n  onOpen,\n  onClose,\n  delay,\n  size,\n  isDisabled,\n}: 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 (\n    <SearchBox\n      expandable\n      isExpanded={isOpened}\n      onExpand={onOpen}\n      onCollapse={onClose}\n      size={size}\n      className={classnames(\"tree-widget-search-box\", !isOpened && \"contracted\")}\n      isDisabled={isDisabled}\n    >\n      <SearchBox.CollapsedState>\n        <SearchBox.ExpandButton\n          title={TreeWidget.translate(\"header.searchBox.searchForSomething\")}\n          aria-label={TreeWidget.translate(\"header.searchBox.open\")}\n          size={size}\n          styleType=\"borderless\"\n        />\n      </SearchBox.CollapsedState>\n      <SearchBox.ExpandedState>\n        <SearchBox.Input placeholder={TreeWidget.translate(\"header.searchBox.search\")} onChange={(e) => setInputValue(e.currentTarget.value)} />\n        <SearchResultStepper selectedIndex={selectedResultIndex} total={resultCount} onStep={onSelectedResultChanged} size={size} />\n        <SearchBox.CollapseButton\n          onClick={() => {\n            setInputValue(\"\");\n            onClose();\n          }}\n          size={size}\n          aria-label={TreeWidget.translate(\"header.searchBox.close\")}\n        />\n      </SearchBox.ExpandedState>\n    </SearchBox>\n  );\n}\n\ninterface HeaderButtonsProps {\n  contracted: boolean;\n  children?: React.ReactNode;\n  size: \"large\" | \"small\";\n}\n\nfunction HeaderButtons(props: HeaderButtonsProps) {\n  const className = classnames(\"button-container\", props.contracted && \"contracted\");\n\n  return (\n    <ButtonGroup\n      className={className}\n      overflowButton={(overflowStart) => (\n        <DropdownMenu\n          menuItems={() =>\n            Children.toArray(props.children)\n              .slice(overflowStart)\n              .map((btn, index) => (\n                <li key={index} className=\"dropdown-item\" role=\"menuitem\">\n                  {btn}\n                </li>\n              ))\n          }\n          className=\"tree-header-button-dropdown-container\"\n        >\n          <IconButton title={TreeWidget.translate(\"header.dropdownMore\")} styleType=\"borderless\" size={props.size}>\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  size: \"large\" | \"small\";\n}\n\nfunction SearchResultStepper(props: SearchResultStepperProps) {\n  const { selectedIndex = 1, total, onStep } = props;\n  if (!total) {\n    return null;\n  }\n\n  return (\n    <>\n      <span className=\"searchbox-stepping-count\">{`${selectedIndex}/${total}`}</span>\n      <Divider orientation=\"vertical\" />\n      <SearchBox.Button\n        title={TreeWidget.translate(\"header.searchBox.previous\")}\n        size={props.size}\n        onClick={() => {\n          if (selectedIndex > 1) {\n            onStep(selectedIndex - 1);\n          }\n        }}\n      >\n        <SvgCaretUpSmall />\n      </SearchBox.Button>\n      <SearchBox.Button\n        title={TreeWidget.translate(\"header.searchBox.next\")}\n        size={props.size}\n        onClick={() => {\n          if (selectedIndex < total) {\n            onStep(selectedIndex + 1);\n          }\n        }}\n      >\n        <SvgCaretDownSmall />\n      </SearchBox.Button>\n    </>\n  );\n}\n"]}

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

@@ -12,34 +12,25 @@
 
   .dropdown-item {
     width: 100%;
-    height: var(--iui-size-xl);
-
-    &.enlarge {
-      height: calc(var(--iui-size-xl) + var(--iui-size-m));
-    }
 
     > * {
       width: 100%;
       height: 100%;
     }
-
-    &:hover {
-      background-color: transparent;
-      cursor: default;
-    }
   }
 }
 
 .tree-widget-tree-header {
+  --tree-header-height-inner: var(--tree-header-height, --iui-size-xl);
+  --tree-header-contracted-width-inner: var(--tree-header-contracted-width, --iui-size-xl);
+
   display: flex;
   align-items: center;
-  height: var(--iui-size-xl);
+  height: var(--tree-header-height-inner);
   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));
+    width: calc(100% - var(--tree-header-contracted-width-inner));
 
     &.contracted {
       width: unset;
@@ -57,35 +48,10 @@
   }
 
   .button-container {
-    height: 100%;
-    width: calc(100% - var(--iui-size-l));
+    width: calc(100% - var(--tree-header-contracted-width-inner));
 
     &.contracted {
-      width: var(--iui-size-xl);
-    }
-  }
-
-  &.enlarge {
-    --enlarged-header-height: calc(var(--iui-size-xl) + var(--iui-size-m));
-
-    height: var(--enlarged-header-height);
-    min-width: calc(100% - var(--enlarged-header-height));
-
-    .tree-widget-search-box {
-      height: var(--enlarged-header-height);
-      width: calc(100% - var(--enlarged-header-height));
-
-      &.contracted {
-        width: unset;
-      }
-    }
-
-    .button-container {
-      width: calc(100% - var(--enlarged-header-height));
-
-      &.contracted {
-        width: var(--enlarged-header-height);
-      }
+      width: var(--tree-header-contracted-width-inner);
     }
   }
 }

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

@@ -0,0 +1,23 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+.tw-tree-with-header {
+  --tree-header-height: var(--iui-size-xl);
+  --tree-header-contracted-width: var(--iui-size-xl);
+
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  &.enlarge {
+    --tree-header-height: calc(var(--iui-size-xl) + var(--iui-size-l));
+    --tree-header-contracted-width: calc(var(--iui-size-xl) + var(--iui-size-l));
+  }
+
+  .tw-tree-content {
+    height: calc(100% - var(--tree-header-height));
+  }
+}

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

@@ -0,0 +1,22 @@
+import { VisibilityTree } from "../common/components/VisibilityTree";
+import type { CategoryInfo } from "../common/CategoriesVisibilityUtils";
+import type { ComponentPropsWithoutRef } from "react";
+import type { ViewManager, Viewport } from "@itwin/core-frontend";
+interface CategoriesTreeOwnProps {
+    filter: string;
+    activeView: Viewport;
+    categories: CategoryInfo[];
+    viewManager?: ViewManager;
+    allViewports?: boolean;
+    hierarchyLevelConfig?: {
+        sizeLimit?: number;
+    };
+    onPerformanceMeasured?: (featureId: string, duration: number) => void;
+    onFeatureUsed?: (feature: string) => void;
+}
+type VisibilityTreeProps = ComponentPropsWithoutRef<typeof VisibilityTree>;
+type ModelsTreeProps = CategoriesTreeOwnProps & Pick<VisibilityTreeProps, "imodel" | "getSchemaContext" | "height" | "width" | "density" | "selectionMode">;
+/** @internal */
+export declare function CategoriesTree({ imodel, viewManager, categories, allViewports, getSchemaContext, height, width, activeView, filter, density, hierarchyLevelConfig, selectionMode, onPerformanceMeasured, onFeatureUsed, }: ModelsTreeProps): JSX.Element;
+export {};
+//# sourceMappingURL=CategoriesTree.d.ts.map

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

@@ -0,0 +1,74 @@
+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 { useCallback, useMemo, useState } from "react";
+import { IModelApp } from "@itwin/core-frontend";
+import { SvgLayers } from "@itwin/itwinui-icons-react";
+import { Text } from "@itwin/itwinui-react";
+import { TreeWidget } from "../../../TreeWidget";
+import { VisibilityTree } from "../common/components/VisibilityTree";
+import { useFeatureReporting } from "../common/UseFeatureReporting";
+import { CategoriesTreeComponent } from "./CategoriesTreeComponent";
+import { CategoriesTreeDefinition } from "./CategoriesTreeDefinition";
+import { CategoriesVisibilityHandler } from "./CategoriesVisibilityHandler";
+/** @internal */
+export function CategoriesTree({ imodel, viewManager, categories, allViewports, getSchemaContext, height, width, activeView, filter, density, hierarchyLevelConfig, selectionMode, onPerformanceMeasured, onFeatureUsed, }) {
+    const [filteringError, setFilteringError] = useState();
+    const visibilityHandlerFactory = useCallback(() => {
+        const visibilityHandler = new CategoriesVisibilityHandler({
+            imodel,
+            viewport: activeView,
+            viewManager: viewManager ?? IModelApp.viewManager,
+            categories,
+            allViewports,
+        });
+        return {
+            getVisibilityStatus: async (node) => visibilityHandler.getVisibilityStatus(node),
+            changeVisibility: async (node, on) => visibilityHandler.changeVisibility(node, on),
+            onVisibilityChange: visibilityHandler.onVisibilityChange,
+            dispose: () => visibilityHandler.dispose(),
+        };
+    }, [activeView, allViewports, categories, imodel, viewManager]);
+    const { reportUsage } = useFeatureReporting({ onFeatureUsed, treeIdentifier: CategoriesTreeComponent.id });
+    const getDefinitionsProvider = useCallback((props) => {
+        return new CategoriesTreeDefinition({ ...props, viewType: activeView.view.is2d() ? "2d" : "3d" });
+    }, [activeView]);
+    const getSearchFilteredPaths = useMemo(() => {
+        setFilteringError(undefined);
+        if (!filter) {
+            return undefined;
+        }
+        return async ({ imodelAccess }) => {
+            reportUsage?.({ featureId: "filtering", reportInteraction: true });
+            try {
+                return await CategoriesTreeDefinition.createInstanceKeyPaths({ imodelAccess, label: filter, viewType: activeView.view.is2d() ? "2d" : "3d" });
+            }
+            catch (e) {
+                const newError = e instanceof Error && e.message.match(/Filter matches more than \d+ items/) ? "tooManyFilterMatches" : "unknownFilterError";
+                setFilteringError(newError);
+                return [];
+            }
+        };
+    }, [filter, activeView, reportUsage]);
+    return (_jsx(VisibilityTree, { height: height, width: width, imodel: imodel, treeName: CategoriesTreeComponent.id, getSchemaContext: getSchemaContext, visibilityHandlerFactory: visibilityHandlerFactory, getHierarchyDefinition: getDefinitionsProvider, getFilteredPaths: getSearchFilteredPaths, hierarchyLevelSizeLimit: hierarchyLevelConfig?.sizeLimit, getSublabel: getSublabel, getIcon: getIcon, density: density, noDataMessage: getNoDataMessage(filter, filteringError), selectionMode: selectionMode ?? "none", onPerformanceMeasured: (action, duration) => {
+            onPerformanceMeasured?.(`${CategoriesTreeComponent.id}-${action}`, duration);
+        }, reportUsage: reportUsage, searchText: filter }));
+}
+function getNoDataMessage(filter, error) {
+    if (error) {
+        return _jsx(Text, { children: TreeWidget.translate(`categoriesTree.filtering.${error}`) });
+    }
+    if (filter) {
+        return _jsx(Text, { children: TreeWidget.translate("categoriesTree.filtering.noMatches", { filter }) });
+    }
+    return undefined;
+}
+function getIcon() {
+    return _jsx(SvgLayers, {});
+}
+function getSublabel(node) {
+    return node.extendedData?.description;
+}
+//# sourceMappingURL=CategoriesTree.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CategoriesTree.js","sourceRoot":"","sources":["../../../../../src/components/trees/categories-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 { useCallback, useMemo, useState } from \"react\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { SvgLayers } from \"@itwin/itwinui-icons-react\";\nimport { Text } from \"@itwin/itwinui-react\";\nimport { TreeWidget } from \"../../../TreeWidget\";\nimport { VisibilityTree } from \"../common/components/VisibilityTree\";\nimport { useFeatureReporting } from \"../common/UseFeatureReporting\";\nimport { CategoriesTreeComponent } from \"./CategoriesTreeComponent\";\nimport { CategoriesTreeDefinition } from \"./CategoriesTreeDefinition\";\nimport { CategoriesVisibilityHandler } from \"./CategoriesVisibilityHandler\";\n\nimport type { CategoryInfo } from \"../common/CategoriesVisibilityUtils\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport type { ViewManager, Viewport } from \"@itwin/core-frontend\";\nimport type { HierarchyNode } from \"@itwin/presentation-hierarchies\";\nimport type { PresentationHierarchyNode } from \"@itwin/presentation-hierarchies-react\";\n\ntype CategoriesTreeFilteringError = \"tooManyFilterMatches\" | \"unknownFilterError\";\n\ninterface CategoriesTreeOwnProps {\n  filter: string;\n  activeView: Viewport;\n  categories: CategoryInfo[];\n  viewManager?: ViewManager;\n  allViewports?: boolean;\n  hierarchyLevelConfig?: {\n    sizeLimit?: number;\n  };\n  onPerformanceMeasured?: (featureId: string, duration: number) => void;\n  onFeatureUsed?: (feature: string) => void;\n}\n\ntype VisibilityTreeProps = ComponentPropsWithoutRef<typeof VisibilityTree>;\ntype GetFilteredPathsCallback = VisibilityTreeProps[\"getFilteredPaths\"];\ntype GetHierarchyDefinitionCallback = VisibilityTreeProps[\"getHierarchyDefinition\"];\n\ntype ModelsTreeProps = CategoriesTreeOwnProps & Pick<VisibilityTreeProps, \"imodel\" | \"getSchemaContext\" | \"height\" | \"width\" | \"density\" | \"selectionMode\">;\n\n/** @internal */\nexport function CategoriesTree({\n  imodel,\n  viewManager,\n  categories,\n  allViewports,\n  getSchemaContext,\n  height,\n  width,\n  activeView,\n  filter,\n  density,\n  hierarchyLevelConfig,\n  selectionMode,\n  onPerformanceMeasured,\n  onFeatureUsed,\n}: ModelsTreeProps) {\n  const [filteringError, setFilteringError] = useState<CategoriesTreeFilteringError | undefined>();\n  const visibilityHandlerFactory = useCallback(() => {\n    const visibilityHandler = new CategoriesVisibilityHandler({\n      imodel,\n      viewport: activeView,\n      viewManager: viewManager ?? IModelApp.viewManager,\n      categories,\n      allViewports,\n    });\n    return {\n      getVisibilityStatus: async (node: HierarchyNode) => visibilityHandler.getVisibilityStatus(node),\n      changeVisibility: async (node: HierarchyNode, on: boolean) => visibilityHandler.changeVisibility(node, on),\n      onVisibilityChange: visibilityHandler.onVisibilityChange,\n      dispose: () => visibilityHandler.dispose(),\n    };\n  }, [activeView, allViewports, categories, imodel, viewManager]);\n\n  const { reportUsage } = useFeatureReporting({ onFeatureUsed, treeIdentifier: CategoriesTreeComponent.id });\n\n  const getDefinitionsProvider = useCallback(\n    (props: Parameters<GetHierarchyDefinitionCallback>[0]) => {\n      return new CategoriesTreeDefinition({ ...props, viewType: activeView.view.is2d() ? \"2d\" : \"3d\" });\n    },\n    [activeView],\n  );\n\n  const getSearchFilteredPaths = useMemo<GetFilteredPathsCallback | undefined>(() => {\n    setFilteringError(undefined);\n    if (!filter) {\n      return undefined;\n    }\n    return async ({ imodelAccess }) => {\n      reportUsage?.({ featureId: \"filtering\", reportInteraction: true });\n      try {\n        return await CategoriesTreeDefinition.createInstanceKeyPaths({ imodelAccess, label: filter, viewType: activeView.view.is2d() ? \"2d\" : \"3d\" });\n      } catch (e) {\n        const newError = e instanceof Error && e.message.match(/Filter matches more than \\d+ items/) ? \"tooManyFilterMatches\" : \"unknownFilterError\";\n        setFilteringError(newError);\n        return [];\n      }\n    };\n  }, [filter, activeView, reportUsage]);\n\n  return (\n    <VisibilityTree\n      height={height}\n      width={width}\n      imodel={imodel}\n      treeName={CategoriesTreeComponent.id}\n      getSchemaContext={getSchemaContext}\n      visibilityHandlerFactory={visibilityHandlerFactory}\n      getHierarchyDefinition={getDefinitionsProvider}\n      getFilteredPaths={getSearchFilteredPaths}\n      hierarchyLevelSizeLimit={hierarchyLevelConfig?.sizeLimit}\n      getSublabel={getSublabel}\n      getIcon={getIcon}\n      density={density}\n      noDataMessage={getNoDataMessage(filter, filteringError)}\n      selectionMode={selectionMode ?? \"none\"}\n      onPerformanceMeasured={(action, duration) => {\n        onPerformanceMeasured?.(`${CategoriesTreeComponent.id}-${action}`, duration);\n      }}\n      reportUsage={reportUsage}\n      searchText={filter}\n    />\n  );\n}\n\nfunction getNoDataMessage(filter: string, error?: CategoriesTreeFilteringError) {\n  if (error) {\n    return <Text>{TreeWidget.translate(`categoriesTree.filtering.${error}`)}</Text>;\n  }\n  if (filter) {\n    return <Text>{TreeWidget.translate(\"categoriesTree.filtering.noMatches\", { filter })}</Text>;\n  }\n  return undefined;\n}\n\nfunction getIcon() {\n  return <SvgLayers />;\n}\n\nfunction getSublabel(node: PresentationHierarchyNode) {\n  return node.extendedData?.description;\n}\n"]}

package/lib/esm/components/trees/categories-tree/CategoriesTreeButtons.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import type { CategoryInfo } from "../common/CategoriesVisibilityUtils";
+import type { TreeHeaderButtonProps } from "../../tree-header/TreeHeader";
+/**
+ * Props that get passed to `CategoriesTreeComponent` header button renderer.
+ * @see CategoriesTreeComponentProps.headerButtons
+ * @public
+ */
+export interface CategoriesTreeHeaderButtonProps extends TreeHeaderButtonProps {
+    /** A list of categories available in the iModel */
+    categories: CategoryInfo[];
+    /** In case the tree is filtered, a list of filtered categories. */
+    filteredCategories?: CategoryInfo[];
+}
+/** @internal */
+export declare function ShowAllButton(props: CategoriesTreeHeaderButtonProps): JSX.Element;
+/** @internal */
+export declare function HideAllButton(props: CategoriesTreeHeaderButtonProps): JSX.Element;
+/** @internal */
+export declare function InvertAllButton(props: CategoriesTreeHeaderButtonProps): JSX.Element;
+//# sourceMappingURL=CategoriesTreeButtons.d.ts.map

package/lib/esm/components/trees/categories-tree/CategoriesTreeButtons.js

@@ -0,0 +1,31 @@
+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 { SvgVisibilityHalf, SvgVisibilityHide, SvgVisibilityShow } from "@itwin/itwinui-icons-react";
+import { IconButton } from "@itwin/itwinui-react";
+import { TreeWidget } from "../../../TreeWidget";
+import { hideAllCategories, invertAllCategories, showAllCategories } from "../common/CategoriesVisibilityUtils";
+/** @internal */
+export function ShowAllButton(props) {
+    return (_jsx(IconButton, { size: props.density === "enlarged" ? "large" : "small", styleType: "borderless", title: TreeWidget.translate("categoriesTree.buttons.showAll.tooltip"), onClick: () => {
+            props.onFeatureUsed?.(`categories-tree-showall`);
+            void showAllCategories((props.filteredCategories ?? props.categories).map((category) => category.categoryId), props.viewport);
+        }, children: _jsx(SvgVisibilityShow, {}) }));
+}
+/** @internal */
+export function HideAllButton(props) {
+    return (_jsx(IconButton, { size: props.density === "enlarged" ? "large" : "small", styleType: "borderless", title: TreeWidget.translate("categoriesTree.buttons.hideAll.tooltip"), onClick: () => {
+            props.onFeatureUsed?.(`categories-tree-hideall`);
+            void hideAllCategories((props.filteredCategories ?? props.categories).map((category) => category.categoryId), props.viewport);
+        }, children: _jsx(SvgVisibilityHide, {}) }));
+}
+/** @internal */
+export function InvertAllButton(props) {
+    return (_jsx(IconButton, { title: TreeWidget.translate("categoriesTree.buttons.invert.tooltip"), size: props.density === "enlarged" ? "large" : "small", styleType: "borderless", onClick: () => {
+            props.onFeatureUsed?.(`categories-tree-invert`);
+            void invertAllCategories(props.filteredCategories ?? props.categories, props.viewport);
+        }, children: _jsx(SvgVisibilityHalf, {}) }));
+}
+//# sourceMappingURL=CategoriesTreeButtons.js.map

package/lib/esm/components/trees/categories-tree/CategoriesTreeButtons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategoriesTreeButtons.js","sourceRoot":"","sources":["../../../../../src/components/trees/categories-tree/CategoriesTreeButtons.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AACrG,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AAiBhH,gBAAgB;AAChB,MAAM,UAAU,aAAa,CAAC,KAAsC;IAClE,OAAO,CACL,KAAC,UAAU,IACT,IAAI,EAAE,KAAK,CAAC,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,EACtD,SAAS,EAAC,YAAY,EACtB,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,wCAAwC,CAAC,EACrE,OAAO,EAAE,GAAG,EAAE;YACZ,KAAK,CAAC,aAAa,EAAE,CAAC,yBAAyB,CAAC,CAAC;YACjD,KAAK,iBAAiB,CACpB,CAAC,KAAK,CAAC,kBAAkB,IAAI,KAAK,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC,EACrF,KAAK,CAAC,QAAQ,CACf,CAAC;QACJ,CAAC,YAED,KAAC,iBAAiB,KAAG,GACV,CACd,CAAC;AACJ,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,aAAa,CAAC,KAAsC;IAClE,OAAO,CACL,KAAC,UAAU,IACT,IAAI,EAAE,KAAK,CAAC,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,EACtD,SAAS,EAAC,YAAY,EACtB,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,wCAAwC,CAAC,EACrE,OAAO,EAAE,GAAG,EAAE;YACZ,KAAK,CAAC,aAAa,EAAE,CAAC,yBAAyB,CAAC,CAAC;YACjD,KAAK,iBAAiB,CACpB,CAAC,KAAK,CAAC,kBAAkB,IAAI,KAAK,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC,EACrF,KAAK,CAAC,QAAQ,CACf,CAAC;QACJ,CAAC,YAED,KAAC,iBAAiB,KAAG,GACV,CACd,CAAC;AACJ,CAAC;AAED,gBAAgB;AAChB,MAAM,UAAU,eAAe,CAAC,KAAsC;IACpE,OAAO,CACL,KAAC,UAAU,IACT,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,uCAAuC,CAAC,EACpE,IAAI,EAAE,KAAK,CAAC,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,EACtD,SAAS,EAAC,YAAY,EACtB,OAAO,EAAE,GAAG,EAAE;YACZ,KAAK,CAAC,aAAa,EAAE,CAAC,wBAAwB,CAAC,CAAC;YAChD,KAAK,mBAAmB,CAAC,KAAK,CAAC,kBAAkB,IAAI,KAAK,CAAC,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;QACzF,CAAC,YAED,KAAC,iBAAiB,KAAG,GACV,CACd,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport { SvgVisibilityHalf, SvgVisibilityHide, SvgVisibilityShow } from \"@itwin/itwinui-icons-react\";\nimport { IconButton } from \"@itwin/itwinui-react\";\nimport { TreeWidget } from \"../../../TreeWidget\";\nimport { hideAllCategories, invertAllCategories, showAllCategories } from \"../common/CategoriesVisibilityUtils\";\n\nimport type { CategoryInfo } from \"../common/CategoriesVisibilityUtils\";\nimport type { TreeHeaderButtonProps } from \"../../tree-header/TreeHeader\";\n\n/**\n * Props that get passed to `CategoriesTreeComponent` header button renderer.\n * @see CategoriesTreeComponentProps.headerButtons\n * @public\n */\nexport interface CategoriesTreeHeaderButtonProps extends TreeHeaderButtonProps {\n  /** A list of categories available in the iModel */\n  categories: CategoryInfo[];\n  /** In case the tree is filtered, a list of filtered categories. */\n  filteredCategories?: CategoryInfo[];\n}\n\n/** @internal */\nexport function ShowAllButton(props: CategoriesTreeHeaderButtonProps) {\n  return (\n    <IconButton\n      size={props.density === \"enlarged\" ? \"large\" : \"small\"}\n      styleType=\"borderless\"\n      title={TreeWidget.translate(\"categoriesTree.buttons.showAll.tooltip\")}\n      onClick={() => {\n        props.onFeatureUsed?.(`categories-tree-showall`);\n        void showAllCategories(\n          (props.filteredCategories ?? props.categories).map((category) => category.categoryId),\n          props.viewport,\n        );\n      }}\n    >\n      <SvgVisibilityShow />\n    </IconButton>\n  );\n}\n\n/** @internal */\nexport function HideAllButton(props: CategoriesTreeHeaderButtonProps) {\n  return (\n    <IconButton\n      size={props.density === \"enlarged\" ? \"large\" : \"small\"}\n      styleType=\"borderless\"\n      title={TreeWidget.translate(\"categoriesTree.buttons.hideAll.tooltip\")}\n      onClick={() => {\n        props.onFeatureUsed?.(`categories-tree-hideall`);\n        void hideAllCategories(\n          (props.filteredCategories ?? props.categories).map((category) => category.categoryId),\n          props.viewport,\n        );\n      }}\n    >\n      <SvgVisibilityHide />\n    </IconButton>\n  );\n}\n\n/** @internal */\nexport function InvertAllButton(props: CategoriesTreeHeaderButtonProps) {\n  return (\n    <IconButton\n      title={TreeWidget.translate(\"categoriesTree.buttons.invert.tooltip\")}\n      size={props.density === \"enlarged\" ? \"large\" : \"small\"}\n      styleType=\"borderless\"\n      onClick={() => {\n        props.onFeatureUsed?.(`categories-tree-invert`);\n        void invertAllCategories(props.filteredCategories ?? props.categories, props.viewport);\n      }}\n    >\n      <SvgVisibilityHalf />\n    </IconButton>\n  );\n}\n"]}