@itwin/tree-widget-react 4.0.0-alpha.15 → 4.0.0-alpha.16

package/CHANGELOG.md

@@ -1,9 +1,63 @@
 # Change Log - @itwin/tree-widget-react
 
-<!-- This log was last generated on Thu, 07 Aug 2025 12:12:57 GMT and should not be manually modified. -->
+<!-- This log was last generated on Tue, 07 Oct 2025 08:45:29 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## 3.15.1
+
+Tue, 07 Oct 2025 08:45:29 GMT
+
+### Patches
+
+- Models tree: Fixed visibility change incorrectly setting visibility when `alwaysDrawn` exclusive flag is set to `true`. Now, before making any visibility changes to the desired node, `alwaysDrawn` exclusive flag is reset to `false`, all categories are turned off, never drawn list is cleared and all per-model category overrides are removed. ([#1467](https://github.com/iTwin/viewer-components-react/pull/1467))
+
+## 3.15.0
+
+Fri, 03 Oct 2025 11:22:06 GMT
+
+### Minor changes
+
+- Introduce an extra state to `TreeNodeCheckboxState` interface - `{ isLoading: true }`. When such state is returned, the "eye" checkboxes are not rendered by `<VisibilityTreeRenderer />` and `<TreeNodeRenderer />`. Previously, we were returning "disabled" state, resulting in disabled checkboxes being briefly shown until the states were loaded. ([#1458](https://github.com/iTwin/viewer-components-react/pull/1458))
+
+### Patches
+
+- Models tree: reduce tree visibility icon flickering when changing visibility. ([#1462](https://github.com/iTwin/viewer-components-react/pull/1462))
+- Models tree: Fixed adding elements to always/never drawn lists would cause model to not load its' visibility. ([#1461](https://github.com/iTwin/viewer-components-react/pull/1461))
+
+## 3.14.2
+
+Tue, 16 Sep 2025 11:13:44 GMT
+
+### Patches
+
+- Models tree: Fixed turning on category visibility under a hidden model causing categories of child elements to also become visible. ([#1452](https://github.com/iTwin/viewer-components-react/pull/1452))
+- Fix a query being unnecessarily executed after every node visibility change. ([#1439](https://github.com/iTwin/viewer-components-react/pull/1439))
+
+## 3.14.1
+
+Thu, 28 Aug 2025 19:47:46 GMT
+
+### Patches
+
+- Adjust models and categories trees in tree widget. They no longer re-query information after users clear active hierarchy filter. ([#1431](https://github.com/iTwin/viewer-components-react/pull/1431))
+
+## 3.14.0
+
+Thu, 21 Aug 2025 11:00:38 GMT
+
+### Minor changes
+
+- Allow Model tree's `getFilteredPaths` prop function to return `undefined` paths. In that case, it's considered that filtering should not be applied, and the full unfiltered tree should be loaded. ([#1417](https://github.com/iTwin/viewer-components-react/pull/1417))
+
+## 3.13.2
+
+Thu, 07 Aug 2025 18:43:06 GMT
+
+### Patches
+
+- Models tree: Stop unnecessarily executing an expensive model elements' count query, whose results we weren't even using.
+
 ## 3.13.1
 
 Thu, 07 Aug 2025 12:12:57 GMT

package/README.md

@@ -285,39 +285,65 @@ Use `getFilteredPaths` when you need more control over filtering behaviour. Here
   }
   ```
 
-- **Apply custom logic to generate instance keys**: Generate instance keys using custom implementation. For example: query elements that have specified filter in their user label and provide them as targetItems.
+- **Apply custom logic to generate instance keys**: Generate instance keys using custom implementation. For example: only apply the given filter string to `bis.Subject` and `bis.Model` instances, but not others (`bis.Category`, `bis.GeometricElement`).
 
   ```tsx
   function CustomModelsTreeComponentWithFilterAndTargetItems({
     viewport,
     selectionStorage,
     imodel,
+    filter,
   }: {
     viewport: Viewport;
     selectionStorage: SelectionStorage;
     imodel: IModelConnection;
+    filter: string | undefined;
   }) {
     const getFilteredPaths = useCallback<GetFilteredPathsType>(
-      async ({ createInstanceKeyPaths, filter }) => {
+      async ({ createInstanceKeyPaths, filter: activeFilter }) => {
+        if (!activeFilter) {
+          // if filter is not defined, return `undefined` to avoid applying empty filter
+          return undefined;
+        }
         const targetItems = new Array<InstanceKey>();
         for await (const row of imodel.createQueryReader(
           `
-            SELECT ec_classname(e.ECClassId, 's.c') className, e.ECInstanceId id
-            FROM BisCore.Element e
-            WHERE UserLabel LIKE '%${filter ?? ""}%'
+            SELECT ClassName, Id
+            FROM (
+              SELECT
+                ec_classname(e.ECClassId, 's.c') ClassName,
+                e.ECInstanceId Id,
+                COALESCE(e.UserLabel, e.CodeValue) Label
+              FROM BisCore.Subject e
+  
+              UNION ALL
+  
+              SELECT
+                ec_classname(m.ECClassId, 's.c') ClassName,
+                m.ECInstanceId Id,
+                COALESCE(e.UserLabel, e.CodeValue) Label
+              FROM BisCore.GeometricModel3d m
+              JOIN BisCore.Element e ON e.ECInstanceId = m.ModeledElement.Id
+              WHERE NOT m.IsPrivate
+                AND EXISTS (SELECT 1 FROM BisCore.Element WHERE Model.Id = m.ECInstanceId)
+                AND json_extract(e.JsonProperties, '$.PhysicalPartition.Model.Content') IS NULL
+                AND json_extract(e.JsonProperties, '$.GraphicalPartition3d.Model.Content') IS NULL
+            )
+            WHERE Label LIKE '%${activeFilter.replaceAll(/[%_\\]/g, "\\$&")}%' ESCAPE '\\'
           `,
           undefined,
           { rowFormat: QueryRowFormat.UseJsPropertyNames },
         )) {
-          targetItems.push({ id: row.id, className: row.className });
+          targetItems.push({ id: row.Id, className: row.ClassName });
         }
-        return createInstanceKeyPaths({ targetItems });
+        // `createInstanceKeyPaths` doesn't automatically set the `autoExpand` flag - set it here
+        const paths = await createInstanceKeyPaths({ targetItems });
+        return paths.map((path) => ({ ...path, options: { autoExpand: true } }));
       },
       [imodel],
     );
 
-    const { modelsTreeProps, rendererProps } = useModelsTree({ activeView: viewport, getFilteredPaths, filter: "test" });
-
+    const { modelsTreeProps, rendererProps } = useModelsTree({ activeView: viewport, getFilteredPaths, filter });
     return (
       <VisibilityTree
         {...modelsTreeProps}
@@ -709,6 +735,8 @@ Components from this package allows consumers to track the usage of specific fea
 
 This can be achieved by passing `onFeatureUsed` function to `CategoriesTreeComponent`, `ModelsTreeComponent`, `IModelContentTreeComponent`. The function is invoked with feature id as the component is being used. List of tracked features:
 
+<!-- cspell:disable -->
+
 - `"choose-{tree}"` - when a tree is selected in the tree selector.
 - `"use-{tree}"` - when an interaction with a tree hierarchy happens. This includes any kind of interaction with nodes, including them being expanded/collapsed, selected, filtered, their visibility change, etc.
 - `"{tree}-visibility-change"` - when visibility is toggled using an "eye" button.
@@ -727,6 +755,7 @@ This can be achieved by passing `onFeatureUsed` function to `CategoriesTreeCompo
 - `"categories-tree-showall"` - when "Show All" button is used in `CategoriesTreeComponent`.
 - `"categories-tree-hideall"` - when "Hide All" button is used in `CategoriesTreeComponent`.
 - `"categories-tree-invert"` - when "Invert" button is used in `CategoriesTreeComponent`.
+<!-- cspell:enable -->
 
 Where `{tree}` specifies which tree component the feature is of.
 

package/lib/esm/tree-widget-react/components/tree-header/SelectableTree.d.ts

@@ -1,16 +1,16 @@
 import "./SelectableTree.css";
-import type { Viewport } from "@itwin/core-frontend";
 import type { PropsWithChildren, ReactNode } from "react";
+import type { TreeWidgetViewport } from "../trees/common/TreeWidgetViewport.js";
 /** @public */
 export interface TreeToolbarButtonProps {
-    viewport: Viewport;
+    viewport: TreeWidgetViewport;
     onFeatureUsed?: (feature: string) => void;
 }
 /** @beta */
-interface TreehHeaderProps {
+interface TreeHeaderProps {
     buttons?: ReactNode;
 }
 /** @beta */
-export declare function SelectableTree({ buttons, children }: PropsWithChildren<TreehHeaderProps>): import("react/jsx-runtime").JSX.Element;
+export declare function SelectableTree({ buttons, children }: PropsWithChildren<TreeHeaderProps>): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=SelectableTree.d.ts.map

package/lib/esm/tree-widget-react/components/tree-header/SelectableTree.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectableTree.js","sourceRoot":"","sources":["../../../../../src/tree-widget-react/components/tree-header/SelectableTree.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,sBAAsB,CAAC;AAC9B,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAgB7C,YAAY;AACZ,MAAM,UAAU,cAAc,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAuC;IACvF,OAAO,CACL,eAAK,SAAS,EAAE,sBAAsB,aACnC,OAAO,CAAC,CAAC,CAAC,cAAK,SAAS,EAAE,iBAAiB,YAAG,OAAO,GAAO,CAAC,CAAC,CAAC,mBAAK,EACrE,KAAC,OAAO,KAAG,EACX,KAAC,aAAa,IAAC,iBAAiB,EAAE,UAAU,YAC1C,cAAK,SAAS,EAAC,iBAAiB,YAAE,QAAQ,GAAO,GACnC,IACZ,CACP,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport \"./SelectableTree.css\";\nimport { ErrorBoundary } from \"react-error-boundary\";\nimport { Divider } from \"@stratakit/bricks\";\nimport { ErrorState } from \"./ErrorState.js\";\n\nimport type { Viewport } from \"@itwin/core-frontend\";\nimport type { PropsWithChildren, ReactNode } from \"react\";\n\n/** @public */\nexport interface TreeToolbarButtonProps {\n  viewport: Viewport;\n  onFeatureUsed?: (feature: string) => void;\n}\n\n/** @beta */\ninterface TreehHeaderProps {\n  buttons?: ReactNode;\n}\n\n/** @beta */\nexport function SelectableTree({ buttons, children }: PropsWithChildren<TreehHeaderProps>) {\n  return (\n    <div className={\"tw-tree-with-toolbar\"}>\n      {buttons ? <div className={\"tw-tree-toolbar\"}>{buttons}</div> : <></>}\n      <Divider />\n      <ErrorBoundary FallbackComponent={ErrorState}>\n        <div className=\"tw-tree-content\">{children}</div>\n      </ErrorBoundary>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"SelectableTree.js","sourceRoot":"","sources":["../../../../../src/tree-widget-react/components/tree-header/SelectableTree.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,sBAAsB,CAAC;AAC9B,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAgB7C,YAAY;AACZ,MAAM,UAAU,cAAc,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAsC;IACtF,OAAO,CACL,eAAK,SAAS,EAAE,sBAAsB,aACnC,OAAO,CAAC,CAAC,CAAC,cAAK,SAAS,EAAE,iBAAiB,YAAG,OAAO,GAAO,CAAC,CAAC,CAAC,mBAAK,EACrE,KAAC,OAAO,KAAG,EACX,KAAC,aAAa,IAAC,iBAAiB,EAAE,UAAU,YAC1C,cAAK,SAAS,EAAC,iBAAiB,YAAE,QAAQ,GAAO,GACnC,IACZ,CACP,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport \"./SelectableTree.css\";\nimport { ErrorBoundary } from \"react-error-boundary\";\nimport { Divider } from \"@stratakit/bricks\";\nimport { ErrorState } from \"./ErrorState.js\";\n\nimport type { PropsWithChildren, ReactNode } from \"react\";\nimport type { TreeWidgetViewport } from \"../trees/common/TreeWidgetViewport.js\";\n\n/** @public */\nexport interface TreeToolbarButtonProps {\n  viewport: TreeWidgetViewport;\n  onFeatureUsed?: (feature: string) => void;\n}\n\n/** @beta */\ninterface TreeHeaderProps {\n  buttons?: ReactNode;\n}\n\n/** @beta */\nexport function SelectableTree({ buttons, children }: PropsWithChildren<TreeHeaderProps>) {\n  return (\n    <div className={\"tw-tree-with-toolbar\"}>\n      {buttons ? <div className={\"tw-tree-toolbar\"}>{buttons}</div> : <></>}\n      <Divider />\n      <ErrorBoundary FallbackComponent={ErrorState}>\n        <div className=\"tw-tree-content\">{children}</div>\n      </ErrorBoundary>\n    </div>\n  );\n}\n"]}

package/lib/esm/tree-widget-react/components/tree-header/WidgetHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"WidgetHeader.js","sourceRoot":"","sources":["../../../../../src/tree-widget-react/components/tree-header/WidgetHeader.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAkCpD;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAAC,EAAE,wBAAwB,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAqB;IACrG,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,wBAAwB,CAAC,CAAC;IACrF,MAAM,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,iBAAiB,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC;IAClF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAEjE,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,eAAe,CAAC,EAAE,KAAK,SAAS,EAAE,CAAC;QAC3D,OAAO,KAAC,aAAa,KAAG,CAAC;IAC3B,CAAC;IAED,OAAO,CACL,eAAK,SAAS,EAAC,mBAAmB,aAC/B,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,YAAY,IAAI,CACpC,KAAC,MAAM,CAAC,IAAI,IAAC,SAAS,EAAE,4BAA4B,YAClD,KAAC,MAAM,CAAC,UAAU,IAChB,KAAK,EAAE,iBAAiB,EACxB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;wBACd,MAAM,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;wBAC9B,QAAQ,CAAC,MAAM,CAAC,CAAC;wBACjB,oBAAoB,CAAC,MAAM,CAAC,CAAC;oBAC/B,CAAC,YAEA,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,iBAAsB,KAAK,EAAE,IAAI,CAAC,EAAE,YACjC,IAAI,CAAC,KAAK,IADA,IAAI,CAAC,EAAE,CAEX,CACV,CAAC,GACgB,GACR,CACf,EACA,eAAe,CAAC,YAAY,IAAI,CAC/B,KAAC,kBAAkB,IAAC,SAAS,EAAE,0BAA0B,EAAE,QAAQ,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,GAAI,CACnJ,IACG,CACP,CAAC;AACJ,CAAC;AAED,SAAS,aAAa;IACpB,OAAO,CACL,eAAK,SAAS,EAAC,mBAAmB,aAChC,KAAC,QAAQ,IAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAI,EAC7C,KAAC,QAAQ,IAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,GAAI,IAC3C,CACP,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport \"./WidgetHeader.css\";\nimport { useState } from \"react\";\nimport { Select, Skeleton } from \"@stratakit/bricks\";\nimport { DebouncedSearchBox } from \"./SearchBox.js\";\n\nimport type { TreeRenderProps } from \"../TreeWidgetComponentImpl.js\";\n\n/**\n * A definition for trees displayed in `WidgetWithHeader`\n * @internal\n */\nexport interface TreeContentDefinition {\n  id: string;\n  label: string;\n  isSearchable?: boolean;\n  render: (props: TreeRenderProps) => React.ReactNode;\n}\n\n/**\n * Props for `WidgetWithHeader`\n * @internal\n */\nexport interface TreeSelectionProps {\n  defaultSelectedContentId: string;\n  trees: TreeContentDefinition[];\n}\n\n/**\n * Props for `WidgetWithHeader`\n * @internal\n */\nexport type WidgetHeaderProps = {\n  onSearch: (value?: string) => void;\n  onSelect: (value: string) => void;\n  isLoading?: boolean;\n} & TreeSelectionProps;\n\n/**\n * A component that accepts a list of trees and renders a select box at the top,\n * allowing to choose which of the provided tree components should be rendered at the bottom.\n * @internal\n */\nexport function WidgetHeader({ defaultSelectedContentId, trees, onSelect, onSearch }: WidgetHeaderProps) {\n  const [selectedContentId, setSelectedContentId] = useState(defaultSelectedContentId);\n  const selectedContent = trees.find((c) => c.id === selectedContentId) ?? trees[0];\n  const [isSearchOpen, setIsSearchOpen] = useState<boolean>(false);\n\n  if (trees.length === 0 || selectedContent.id === \"loading\") {\n    return <LoadingHeader />;\n  }\n\n  return (\n    <div className=\"tw-content-header\">\n      {trees.length > 0 && !isSearchOpen && (\n        <Select.Root className={\"tw-content-header-selector\"}>\n          <Select.HtmlSelect\n            value={selectedContentId}\n            onChange={(e) => {\n              const treeId = e.target.value;\n              onSelect(treeId);\n              setSelectedContentId(treeId);\n            }}\n          >\n            {trees.map((tree) => (\n              <option key={tree.id} value={tree.id}>\n                {tree.label}\n              </option>\n            ))}\n          </Select.HtmlSelect>\n        </Select.Root>\n      )}\n      {selectedContent.isSearchable && (\n        <DebouncedSearchBox className={\"tw-content-header-search\"} isOpened={isSearchOpen} setIsOpened={setIsSearchOpen} onSearch={onSearch} delay={20} />\n      )}\n    </div>\n  );\n}\n\nfunction LoadingHeader() {\n  return (\n    <div className=\"tw-content-header\">\n      <Skeleton variant={\"text\"} size={\"xlarge\"} />\n      <Skeleton variant={\"object\"} size={\"medium\"} />\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"WidgetHeader.js","sourceRoot":"","sources":["../../../../../src/tree-widget-react/components/tree-header/WidgetHeader.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAoCpD;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAAC,EAAE,wBAAwB,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAqB;IACrG,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,wBAAwB,CAAC,CAAC;IACrF,MAAM,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,iBAAiB,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC;IAClF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAEjE,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,eAAe,CAAC,EAAE,KAAK,SAAS,EAAE,CAAC;QAC3D,OAAO,KAAC,aAAa,KAAG,CAAC;IAC3B,CAAC;IAED,OAAO,CACL,eAAK,SAAS,EAAC,mBAAmB,aAC/B,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,YAAY,IAAI,CACpC,KAAC,MAAM,CAAC,IAAI,IAAC,SAAS,EAAE,4BAA4B,YAClD,KAAC,MAAM,CAAC,UAAU,IAChB,KAAK,EAAE,iBAAiB,EACxB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;wBACd,MAAM,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;wBAC9B,QAAQ,CAAC,MAAM,CAAC,CAAC;wBACjB,oBAAoB,CAAC,MAAM,CAAC,CAAC;oBAC/B,CAAC,YAEA,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,iBAAsB,KAAK,EAAE,IAAI,CAAC,EAAE,YACjC,IAAI,CAAC,KAAK,IADA,IAAI,CAAC,EAAE,CAEX,CACV,CAAC,GACgB,GACR,CACf,EACA,eAAe,CAAC,YAAY,IAAI,CAC/B,KAAC,kBAAkB,IAAC,SAAS,EAAE,0BAA0B,EAAE,QAAQ,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,GAAI,CACnJ,IACG,CACP,CAAC;AACJ,CAAC;AAED,SAAS,aAAa;IACpB,OAAO,CACL,eAAK,SAAS,EAAC,mBAAmB,aAChC,KAAC,QAAQ,IAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAI,EAC7C,KAAC,QAAQ,IAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,GAAI,IAC3C,CACP,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport \"./WidgetHeader.css\";\nimport { useState } from \"react\";\nimport { Select, Skeleton } from \"@stratakit/bricks\";\nimport { DebouncedSearchBox } from \"./SearchBox.js\";\n\nimport type { TreeRenderProps } from \"../TreeWidgetComponentImpl.js\";\n\n// cspell:words xlarge\n\n/**\n * A definition for trees displayed in `WidgetWithHeader`\n * @internal\n */\nexport interface TreeContentDefinition {\n  id: string;\n  label: string;\n  isSearchable?: boolean;\n  render: (props: TreeRenderProps) => React.ReactNode;\n}\n\n/**\n * Props for `WidgetWithHeader`\n * @internal\n */\nexport interface TreeSelectionProps {\n  defaultSelectedContentId: string;\n  trees: TreeContentDefinition[];\n}\n\n/**\n * Props for `WidgetWithHeader`\n * @internal\n */\nexport type WidgetHeaderProps = {\n  onSearch: (value?: string) => void;\n  onSelect: (value: string) => void;\n  isLoading?: boolean;\n} & TreeSelectionProps;\n\n/**\n * A component that accepts a list of trees and renders a select box at the top,\n * allowing to choose which of the provided tree components should be rendered at the bottom.\n * @internal\n */\nexport function WidgetHeader({ defaultSelectedContentId, trees, onSelect, onSearch }: WidgetHeaderProps) {\n  const [selectedContentId, setSelectedContentId] = useState(defaultSelectedContentId);\n  const selectedContent = trees.find((c) => c.id === selectedContentId) ?? trees[0];\n  const [isSearchOpen, setIsSearchOpen] = useState<boolean>(false);\n\n  if (trees.length === 0 || selectedContent.id === \"loading\") {\n    return <LoadingHeader />;\n  }\n\n  return (\n    <div className=\"tw-content-header\">\n      {trees.length > 0 && !isSearchOpen && (\n        <Select.Root className={\"tw-content-header-selector\"}>\n          <Select.HtmlSelect\n            value={selectedContentId}\n            onChange={(e) => {\n              const treeId = e.target.value;\n              onSelect(treeId);\n              setSelectedContentId(treeId);\n            }}\n          >\n            {trees.map((tree) => (\n              <option key={tree.id} value={tree.id}>\n                {tree.label}\n              </option>\n            ))}\n          </Select.HtmlSelect>\n        </Select.Root>\n      )}\n      {selectedContent.isSearchable && (\n        <DebouncedSearchBox className={\"tw-content-header-search\"} isOpened={isSearchOpen} setIsOpened={setIsSearchOpen} onSearch={onSearch} delay={20} />\n      )}\n    </div>\n  );\n}\n\nfunction LoadingHeader() {\n  return (\n    <div className=\"tw-content-header\">\n      <Skeleton variant={\"text\"} size={\"xlarge\"} />\n      <Skeleton variant={\"object\"} size={\"medium\"} />\n    </div>\n  );\n}\n"]}

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

@@ -1,7 +1,7 @@
-import type { CategoryInfo } from "../common/CategoriesVisibilityUtils.js";
-import type { TreeToolbarButtonProps } from "../../tree-header/SelectableTree.js";
-import type { Viewport } from "@itwin/core-frontend";
 import type { Id64Array } from "@itwin/core-bentley";
+import type { TreeToolbarButtonProps } from "../../tree-header/SelectableTree.js";
+import type { CategoryInfo } from "../common/CategoriesVisibilityUtils.js";
+import type { TreeWidgetViewport } from "../common/TreeWidgetViewport.js";
 /**
  * Props that get passed to `CategoriesTreeComponent` header button renderer.
  * @see CategoriesTreeComponentProps.headerButtons
@@ -32,7 +32,7 @@ export interface CategoriesTreeHeaderButtonProps extends TreeToolbarButtonProps
  * @public
  */
 export declare function useCategoriesTreeButtonProps({ viewport }: {
-    viewport: Viewport;
+    viewport: TreeWidgetViewport;
 }): {
     buttonProps: Pick<CategoriesTreeHeaderButtonProps, "categories" | "viewport" | "models">;
     onCategoriesFiltered: (props: {
@@ -49,5 +49,5 @@ export declare function HideAllButton(props: CategoriesTreeHeaderButtonProps): i
 /** @public */
 export declare function InvertAllButton(props: CategoriesTreeHeaderButtonProps): import("react/jsx-runtime").JSX.Element;
 /** @internal */
-export declare function useCategories(viewport: Viewport): CategoryInfo[];
+export declare function useCategories(viewport: TreeWidgetViewport): CategoryInfo[];
 //# sourceMappingURL=CategoriesTreeButtons.d.ts.map

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

@@ -53,6 +53,7 @@ export function useCategoriesTreeButtonProps({ viewport }) {
 /** @public */
 export function ShowAllButton(props) {
     return (_jsx(IconButton, { variant: "ghost", label: TreeWidget.translate("categoriesTree.buttons.showAll.tooltip"), onClick: () => {
+            // cspell:disable-next-line
             props.onFeatureUsed?.(`categories-tree-showall`);
             void showAll({ models: props.models, viewport: props.viewport, categories: props.categories.map((category) => category.categoryId) });
         }, icon: visibilityShowSvg }));
@@ -60,9 +61,10 @@ export function ShowAllButton(props) {
 /** @public */
 export function HideAllButton(props) {
     return (_jsx(IconButton, { variant: "ghost", label: TreeWidget.translate("categoriesTree.buttons.hideAll.tooltip"), onClick: () => {
+            // cspell:disable-next-line
             props.onFeatureUsed?.(`categories-tree-hideall`);
             void hideAllCategories(props.categories.map((category) => category.categoryId), props.viewport);
-            void hideAllModels(props.models, props.viewport);
+            hideAllModels(props.models, props.viewport);
         }, icon: visibilityHideSvg }));
 }
 /** @public */
@@ -81,7 +83,7 @@ export function useCategories(viewport) {
 function useAvailableModels(viewport) {
     const [availableModels, setAvailableModels] = useState([]);
     const imodel = viewport.iModel;
-    const viewType = viewport.view.is2d() ? "2d" : "3d";
+    const viewType = viewport.viewType === "2d" ? "2d" : "3d";
     useEffect(() => {
         queryModelsForHeaderActions(imodel, viewType)
             .then((models) => {

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

@@ -1 +1 @@
-{"version":3,"file":"CategoriesTreeButtons.js","sourceRoot":"","sources":["../../../../../../src/tree-widget-react/components/trees/categories-tree/CategoriesTreeButtons.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, useEffect, useMemo, useState } from \"react\";\nimport { useAsyncValue } from \"@itwin/components-react\";\nimport { QueryRowFormat } from \"@itwin/core-common\";\nimport { IconButton } from \"@stratakit/bricks\";\nimport visibilityHideSvg from \"@stratakit/icons/visibility-hide.svg\";\nimport visibilityInvertSvg from \"@stratakit/icons/visibility-invert.svg\";\nimport visibilityShowSvg from \"@stratakit/icons/visibility-show.svg\";\nimport { TreeWidget } from \"../../../TreeWidget.js\";\nimport { hideAllCategories, invertAllCategories } from \"../common/CategoriesVisibilityUtils.js\";\nimport { getClassesByView } from \"../common/internal/Utils.js\";\nimport { loadCategoriesFromViewport } from \"../common/internal/VisibilityUtils.js\";\nimport { hideAllModels, showAll } from \"../common/Utils.js\";\n\nimport type { CategoryInfo } from \"../common/CategoriesVisibilityUtils.js\";\nimport type { TreeToolbarButtonProps } from \"../../tree-header/SelectableTree.js\";\nimport type { IModelConnection, Viewport } from \"@itwin/core-frontend\";\nimport type { Id64Array } from \"@itwin/core-bentley\";\nimport type { ModelId } from \"../common/internal/Types.js\";\n\n/**\n * Props that get passed to `CategoriesTreeComponent` header button renderer.\n * @see CategoriesTreeComponentProps.headerButtons\n * @public\n */\nexport interface CategoriesTreeHeaderButtonProps extends TreeToolbarButtonProps {\n  /** A list of categories available in the iModel */\n  categories: CategoryInfo[];\n  /** A list of models available in the iModel. */\n  models: Id64Array;\n}\n\n/**\n * Custom hook that creates props required to render `CategoriesTreeComponent` header button.\n *\n * Example:\n * ```tsx\n * const { buttonProps, onCategoriesFiltered } = useCategoriesTreeButtonProps({ viewport });\n * <TreeWithHeader\n *   buttons={[\n *     <CategoriesTreeComponent.ShowAllButton {...buttonProps} />,\n *     <CategoriesTreeComponent.HideAllButton {...buttonProps} />,\n *   ]}\n * >\n *   <CategoriesTree {...treeProps} onCategoriesFiltered={onCategoriesFiltered} />\n * </TreeWithHeader>\n * ```\n *\n * @public\n */\nexport function useCategoriesTreeButtonProps({ viewport }: { viewport: Viewport }): {\n  buttonProps: Pick<CategoriesTreeHeaderButtonProps, \"categories\" | \"viewport\" | \"models\">;\n  onCategoriesFiltered: (props: { categories: CategoryInfo[] | undefined; models?: Id64Array }) => void;\n} {\n  const [filteredCategories, setFilteredCategories] = useState<CategoryInfo[] | undefined>();\n  const [filteredModels, setFilteredModels] = useState<Id64Array | undefined>();\n  const categories = useCategories(viewport);\n  const models = useAvailableModels(viewport);\n  return {\n    buttonProps: {\n      viewport,\n      categories: filteredCategories ?? categories,\n      models: filteredModels ?? models,\n    },\n    onCategoriesFiltered: useCallback((props) => {\n      setFilteredCategories(props.categories);\n      setFilteredModels(props.models);\n    }, []),\n  };\n}\n\n/** @public */\nexport type CategoriesTreeHeaderButtonType = (props: CategoriesTreeHeaderButtonProps) => React.ReactElement | null;\n\n/** @public */\nexport function ShowAllButton(props: CategoriesTreeHeaderButtonProps) {\n  return (\n    <IconButton\n      variant={\"ghost\"}\n      label={TreeWidget.translate(\"categoriesTree.buttons.showAll.tooltip\")}\n      onClick={() => {\n        props.onFeatureUsed?.(`categories-tree-showall`);\n        void showAll({ models: props.models, viewport: props.viewport, categories: props.categories.map((category) => category.categoryId) });\n      }}\n      icon={visibilityShowSvg}\n    />\n  );\n}\n\n/** @public */\nexport function HideAllButton(props: CategoriesTreeHeaderButtonProps) {\n  return (\n    <IconButton\n      variant={\"ghost\"}\n      label={TreeWidget.translate(\"categoriesTree.buttons.hideAll.tooltip\")}\n      onClick={() => {\n        props.onFeatureUsed?.(`categories-tree-hideall`);\n        void hideAllCategories(\n          props.categories.map((category) => category.categoryId),\n          props.viewport,\n        );\n        void hideAllModels(props.models, props.viewport);\n      }}\n      icon={visibilityHideSvg}\n    />\n  );\n}\n\n/** @public */\nexport function InvertAllButton(props: CategoriesTreeHeaderButtonProps) {\n  return (\n    <IconButton\n      variant={\"ghost\"}\n      label={TreeWidget.translate(\"categoriesTree.buttons.invert.tooltip\")}\n      onClick={() => {\n        props.onFeatureUsed?.(`categories-tree-invert`);\n        void invertAllCategories(props.categories, props.viewport);\n      }}\n      icon={visibilityInvertSvg}\n    />\n  );\n}\n\nconst EMPTY_CATEGORIES_ARRAY: CategoryInfo[] = [];\n\n/** @internal */\nexport function useCategories(viewport: Viewport) {\n  const categoriesPromise = useMemo(async () => loadCategoriesFromViewport(viewport), [viewport]);\n  return useAsyncValue(categoriesPromise) ?? EMPTY_CATEGORIES_ARRAY;\n}\n\nfunction useAvailableModels(viewport: Viewport): Array<ModelId> {\n  const [availableModels, setAvailableModels] = useState<Array<ModelId>>([]);\n  const imodel = viewport.iModel;\n  const viewType = viewport.view.is2d() ? \"2d\" : \"3d\";\n  useEffect(() => {\n    queryModelsForHeaderActions(imodel, viewType)\n      .then((models) => {\n        setAvailableModels(models);\n      })\n      .catch(() => {\n        setAvailableModels([]);\n      });\n  }, [imodel, viewType]);\n\n  return availableModels;\n}\n\nasync function queryModelsForHeaderActions(iModel: IModelConnection, viewType: \"2d\" | \"3d\"): Promise<Array<ModelId>> {\n  const { modelClass } = getClassesByView(viewType);\n  const models = new Array<ModelId>();\n  const query = `\n    SELECT\n      m.ECInstanceId id\n    FROM\n      ${modelClass} m\n    WHERE\n      m.IsPrivate = false\n  `;\n  for await (const _row of iModel.createQueryReader(query, undefined, {\n    restartToken: \"tree-widget/categories-tree/all-models-query\",\n    rowFormat: QueryRowFormat.UseECSqlPropertyNames,\n  })) {\n    models.push(_row.id);\n  }\n  return models;\n}\n"]}
+{"version":3,"file":"CategoriesTreeButtons.js","sourceRoot":"","sources":["../../../../../../src/tree-widget-react/components/trees/categories-tree/CategoriesTreeButtons.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,iBAAiB,MAAM,sCAAsC,CAAC;AACrE,OAAO,mBAAmB,MAAM,wCAAwC,CAAC;AACzE,OAAO,iBAAiB,MAAM,sCAAsC,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAChG,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,0BAA0B,EAAE,MAAM,uCAAuC,CAAC;AACnF,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAqB5D;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,4BAA4B,CAAC,EAAE,QAAQ,EAAoC;IAIzF,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,EAA8B,CAAC;IAC3F,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,EAAyB,CAAC;IAE9E,MAAM,UAAU,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC3C,MAAM,MAAM,GAAG,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IAC5C,OAAO;QACL,WAAW,EAAE;YACX,QAAQ;YACR,UAAU,EAAE,kBAAkB,IAAI,UAAU;YAC5C,MAAM,EAAE,cAAc,IAAI,MAAM;SACjC;QACD,oBAAoB,EAAE,WAAW,CAAC,CAAC,KAAK,EAAE,EAAE;YAC1C,qBAAqB,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;YACxC,iBAAiB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAClC,CAAC,EAAE,EAAE,CAAC;KACP,CAAC;AACJ,CAAC;AAKD,cAAc;AACd,MAAM,UAAU,aAAa,CAAC,KAAsC;IAClE,OAAO,CACL,KAAC,UAAU,IACT,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,wCAAwC,CAAC,EACrE,OAAO,EAAE,GAAG,EAAE;YACZ,2BAA2B;YAC3B,KAAK,CAAC,aAAa,EAAE,CAAC,yBAAyB,CAAC,CAAC;YACjD,KAAK,OAAO,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;QACxI,CAAC,EACD,IAAI,EAAE,iBAAiB,GACvB,CACH,CAAC;AACJ,CAAC;AAED,cAAc;AACd,MAAM,UAAU,aAAa,CAAC,KAAsC;IAClE,OAAO,CACL,KAAC,UAAU,IACT,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,wCAAwC,CAAC,EACrE,OAAO,EAAE,GAAG,EAAE;YACZ,2BAA2B;YAC3B,KAAK,CAAC,aAAa,EAAE,CAAC,yBAAyB,CAAC,CAAC;YACjD,KAAK,iBAAiB,CACpB,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC,EACvD,KAAK,CAAC,QAAQ,CACf,CAAC;YACF,aAAa,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;QAC9C,CAAC,EACD,IAAI,EAAE,iBAAiB,GACvB,CACH,CAAC;AACJ,CAAC;AAED,cAAc;AACd,MAAM,UAAU,eAAe,CAAC,KAAsC;IACpE,OAAO,CACL,KAAC,UAAU,IACT,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,uCAAuC,CAAC,EACpE,OAAO,EAAE,GAAG,EAAE;YACZ,KAAK,CAAC,aAAa,EAAE,CAAC,wBAAwB,CAAC,CAAC;YAChD,KAAK,mBAAmB,CAAC,KAAK,CAAC,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;QAC7D,CAAC,EACD,IAAI,EAAE,mBAAmB,GACzB,CACH,CAAC;AACJ,CAAC;AAED,MAAM,sBAAsB,GAAmB,EAAE,CAAC;AAElD,gBAAgB;AAChB,MAAM,UAAU,aAAa,CAAC,QAA4B;IACxD,MAAM,iBAAiB,GAAG,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,0BAA0B,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAChG,OAAO,aAAa,CAAC,iBAAiB,CAAC,IAAI,sBAAsB,CAAC;AACpE,CAAC;AAED,SAAS,kBAAkB,CAAC,QAA4B;IACtD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAiB,EAAE,CAAC,CAAC;IAC3E,MAAM,MAAM,GAAG,QAAQ,CAAC,MAAM,CAAC;IAC/B,MAAM,QAAQ,GAAG,QAAQ,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IAC1D,SAAS,CAAC,GAAG,EAAE;QACb,2BAA2B,CAAC,MAAM,EAAE,QAAQ,CAAC;aAC1C,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE;YACf,kBAAkB,CAAC,MAAM,CAAC,CAAC;QAC7B,CAAC,CAAC;aACD,KAAK,CAAC,GAAG,EAAE;YACV,kBAAkB,CAAC,EAAE,CAAC,CAAC;QACzB,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEvB,OAAO,eAAe,CAAC;AACzB,CAAC;AAED,KAAK,UAAU,2BAA2B,CAAC,MAAwB,EAAE,QAAqB;IACxF,MAAM,EAAE,UAAU,EAAE,GAAG,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAClD,MAAM,MAAM,GAAG,IAAI,KAAK,EAAW,CAAC;IACpC,MAAM,KAAK,GAAG;;;;QAIR,UAAU;;;GAGf,CAAC;IACF,IAAI,KAAK,EAAE,MAAM,IAAI,IAAI,MAAM,CAAC,iBAAiB,CAAC,KAAK,EAAE,SAAS,EAAE;QAClE,YAAY,EAAE,8CAA8C;QAC5D,SAAS,EAAE,cAAc,CAAC,qBAAqB;KAChD,CAAC,EAAE,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACvB,CAAC;IACD,OAAO,MAAM,CAAC;AAChB,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 { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { useAsyncValue } from \"@itwin/components-react\";\nimport { QueryRowFormat } from \"@itwin/core-common\";\nimport { IconButton } from \"@stratakit/bricks\";\nimport visibilityHideSvg from \"@stratakit/icons/visibility-hide.svg\";\nimport visibilityInvertSvg from \"@stratakit/icons/visibility-invert.svg\";\nimport visibilityShowSvg from \"@stratakit/icons/visibility-show.svg\";\nimport { TreeWidget } from \"../../../TreeWidget.js\";\nimport { hideAllCategories, invertAllCategories } from \"../common/CategoriesVisibilityUtils.js\";\nimport { getClassesByView } from \"../common/internal/Utils.js\";\nimport { loadCategoriesFromViewport } from \"../common/internal/VisibilityUtils.js\";\nimport { hideAllModels, showAll } from \"../common/Utils.js\";\n\nimport type { IModelConnection } from \"@itwin/core-frontend\";\nimport type { Id64Array } from \"@itwin/core-bentley\";\nimport type { TreeToolbarButtonProps } from \"../../tree-header/SelectableTree.js\";\nimport type { CategoryInfo } from \"../common/CategoriesVisibilityUtils.js\";\nimport type { ModelId } from \"../common/internal/Types.js\";\nimport type { TreeWidgetViewport } from \"../common/TreeWidgetViewport.js\";\n\n/**\n * Props that get passed to `CategoriesTreeComponent` header button renderer.\n * @see CategoriesTreeComponentProps.headerButtons\n * @public\n */\nexport interface CategoriesTreeHeaderButtonProps extends TreeToolbarButtonProps {\n  /** A list of categories available in the iModel */\n  categories: CategoryInfo[];\n  /** A list of models available in the iModel. */\n  models: Id64Array;\n}\n\n/**\n * Custom hook that creates props required to render `CategoriesTreeComponent` header button.\n *\n * Example:\n * ```tsx\n * const { buttonProps, onCategoriesFiltered } = useCategoriesTreeButtonProps({ viewport });\n * <TreeWithHeader\n *   buttons={[\n *     <CategoriesTreeComponent.ShowAllButton {...buttonProps} />,\n *     <CategoriesTreeComponent.HideAllButton {...buttonProps} />,\n *   ]}\n * >\n *   <CategoriesTree {...treeProps} onCategoriesFiltered={onCategoriesFiltered} />\n * </TreeWithHeader>\n * ```\n *\n * @public\n */\nexport function useCategoriesTreeButtonProps({ viewport }: { viewport: TreeWidgetViewport }): {\n  buttonProps: Pick<CategoriesTreeHeaderButtonProps, \"categories\" | \"viewport\" | \"models\">;\n  onCategoriesFiltered: (props: { categories: CategoryInfo[] | undefined; models?: Id64Array }) => void;\n} {\n  const [filteredCategories, setFilteredCategories] = useState<CategoryInfo[] | undefined>();\n  const [filteredModels, setFilteredModels] = useState<Id64Array | undefined>();\n\n  const categories = useCategories(viewport);\n  const models = useAvailableModels(viewport);\n  return {\n    buttonProps: {\n      viewport,\n      categories: filteredCategories ?? categories,\n      models: filteredModels ?? models,\n    },\n    onCategoriesFiltered: useCallback((props) => {\n      setFilteredCategories(props.categories);\n      setFilteredModels(props.models);\n    }, []),\n  };\n}\n\n/** @public */\nexport type CategoriesTreeHeaderButtonType = (props: CategoriesTreeHeaderButtonProps) => React.ReactElement | null;\n\n/** @public */\nexport function ShowAllButton(props: CategoriesTreeHeaderButtonProps) {\n  return (\n    <IconButton\n      variant={\"ghost\"}\n      label={TreeWidget.translate(\"categoriesTree.buttons.showAll.tooltip\")}\n      onClick={() => {\n        // cspell:disable-next-line\n        props.onFeatureUsed?.(`categories-tree-showall`);\n        void showAll({ models: props.models, viewport: props.viewport, categories: props.categories.map((category) => category.categoryId) });\n      }}\n      icon={visibilityShowSvg}\n    />\n  );\n}\n\n/** @public */\nexport function HideAllButton(props: CategoriesTreeHeaderButtonProps) {\n  return (\n    <IconButton\n      variant={\"ghost\"}\n      label={TreeWidget.translate(\"categoriesTree.buttons.hideAll.tooltip\")}\n      onClick={() => {\n        // cspell:disable-next-line\n        props.onFeatureUsed?.(`categories-tree-hideall`);\n        void hideAllCategories(\n          props.categories.map((category) => category.categoryId),\n          props.viewport,\n        );\n        hideAllModels(props.models, props.viewport);\n      }}\n      icon={visibilityHideSvg}\n    />\n  );\n}\n\n/** @public */\nexport function InvertAllButton(props: CategoriesTreeHeaderButtonProps) {\n  return (\n    <IconButton\n      variant={\"ghost\"}\n      label={TreeWidget.translate(\"categoriesTree.buttons.invert.tooltip\")}\n      onClick={() => {\n        props.onFeatureUsed?.(`categories-tree-invert`);\n        void invertAllCategories(props.categories, props.viewport);\n      }}\n      icon={visibilityInvertSvg}\n    />\n  );\n}\n\nconst EMPTY_CATEGORIES_ARRAY: CategoryInfo[] = [];\n\n/** @internal */\nexport function useCategories(viewport: TreeWidgetViewport) {\n  const categoriesPromise = useMemo(async () => loadCategoriesFromViewport(viewport), [viewport]);\n  return useAsyncValue(categoriesPromise) ?? EMPTY_CATEGORIES_ARRAY;\n}\n\nfunction useAvailableModels(viewport: TreeWidgetViewport): Array<ModelId> {\n  const [availableModels, setAvailableModels] = useState<Array<ModelId>>([]);\n  const imodel = viewport.iModel;\n  const viewType = viewport.viewType === \"2d\" ? \"2d\" : \"3d\";\n  useEffect(() => {\n    queryModelsForHeaderActions(imodel, viewType)\n      .then((models) => {\n        setAvailableModels(models);\n      })\n      .catch(() => {\n        setAvailableModels([]);\n      });\n  }, [imodel, viewType]);\n\n  return availableModels;\n}\n\nasync function queryModelsForHeaderActions(iModel: IModelConnection, viewType: \"2d\" | \"3d\"): Promise<Array<ModelId>> {\n  const { modelClass } = getClassesByView(viewType);\n  const models = new Array<ModelId>();\n  const query = `\n    SELECT\n      m.ECInstanceId id\n    FROM\n      ${modelClass} m\n    WHERE\n      m.IsPrivate = false\n  `;\n  for await (const _row of iModel.createQueryReader(query, undefined, {\n    restartToken: \"tree-widget/categories-tree/all-models-query\",\n    rowFormat: QueryRowFormat.UseECSqlPropertyNames,\n  })) {\n    models.push(_row.id);\n  }\n  return models;\n}\n"]}

package/lib/esm/tree-widget-react/components/trees/categories-tree/CategoriesTreeComponent.d.ts

@@ -1,3 +1,4 @@
+import type { TreeWidgetViewport } from "../common/TreeWidgetViewport.js";
 import type { CategoriesTreeProps } from "./CategoriesTree.js";
 import type { CategoriesTreeHeaderButtonProps, CategoriesTreeHeaderButtonType } from "./CategoriesTreeButtons.js";
 /** @public */
@@ -13,6 +14,12 @@ interface CategoriesTreeComponentProps extends Pick<CategoriesTreeProps, "select
      * ```
      */
     headerButtons?: Array<(props: CategoriesTreeHeaderButtonProps) => React.ReactNode>;
+    /**
+     * Viewport used for visibility controls.
+     *
+     * When viewport is not provided, `IModelApp.viewManager.selectedView` will be used.
+     */
+    viewport?: TreeWidgetViewport;
     onPerformanceMeasured?: (featureId: string, duration: number) => void;
     onFeatureUsed?: (feature: string) => void;
 }

package/lib/esm/tree-widget-react/components/trees/categories-tree/CategoriesTreeComponent.js

@@ -8,7 +8,7 @@ import { Fragment } from "react";
 import { useActiveIModelConnection } from "@itwin/appui-react";
 import { TreeWidget } from "../../../TreeWidget.js";
 import { SelectableTree } from "../../tree-header/SelectableTree.js";
-import { useActiveViewport } from "../common/internal/UseActiveViewport.js";
+import { useActiveTreeWidgetViewport } from "../common/internal/UseActiveTreeWidgetViewport.js";
 import { TelemetryContextProvider } from "../common/UseTelemetryContext.js";
 import { CategoriesTree } from "./CategoriesTree.js";
 import { HideAllButton, InvertAllButton, ShowAllButton, useCategoriesTreeButtonProps } from "./CategoriesTreeButtons.js";
@@ -18,7 +18,7 @@ import { HideAllButton, InvertAllButton, ShowAllButton, useCategoriesTreeButtonP
  */
 export const CategoriesTreeComponent = (props) => {
     const iModel = useActiveIModelConnection();
-    const viewport = useActiveViewport();
+    const viewport = useActiveTreeWidgetViewport({ treeWidgetViewport: props.viewport });
     if (!iModel || !viewport) {
         return null;
     }

package/lib/esm/tree-widget-react/components/trees/categories-tree/CategoriesTreeComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"CategoriesTreeComponent.js","sourceRoot":"","sources":["../../../../../../src/tree-widget-react/components/trees/categories-tree/CategoriesTreeComponent.tsx"],"names":[],"mappings":";;AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AACrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AAC5E,OAAO,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,aAAa,EAAE,4BAA4B,EAAE,MAAM,4BAA4B,CAAC;AAoCzH;;;GAGG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAmC,EAAE,EAAE;IAC7E,MAAM,MAAM,GAAG,yBAAyB,EAAE,CAAC;IAC3C,MAAM,QAAQ,GAAG,iBAAiB,EAAE,CAAC;IAErC,IAAI,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAC;QACzB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,KAAC,2BAA2B,OAAK,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;AACxF,CAAC,CAAC;AAEF;;;GAGG;AACH,uBAAuB,CAAC,aAAa,GAAG,aAA+C,CAAC;AAExF;;;GAGG;AACH,uBAAuB,CAAC,aAAa,GAAG,aAA+C,CAAC;AAExF;;;GAGG;AACH,uBAAuB,CAAC,eAAe,GAAG,eAAiD,CAAC;AAE5F;;;GAGG;AACH,uBAAuB,CAAC,EAAE,GAAG,oBAAoB,CAAC;AAElD;;;GAGG;AACH,uBAAuB,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC,sBAAsB,CAAC,CAAC;AAEtF,SAAS,2BAA2B,CAAC,EACnC,MAAM,EACN,QAAQ,EACR,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,MAAM,EACN,GAAG,SAAS,EAC0E;IACtF,MAAM,EAAE,WAAW,EAAE,oBAAoB,EAAE,GAAG,4BAA4B,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;IAEzF,MAAM,OAAO,GAAc,aAAa;QACtC,CAAC,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,KAAC,QAAQ,cAAc,GAAG,CAAC,EAAE,GAAG,WAAW,EAAE,aAAa,EAAE,CAAC,IAA9C,KAAK,CAAqD,CAAC;QAC9G,CAAC,CAAC;YACE,eAAC,aAAa,OAAK,WAAW,EAAE,GAAG,EAAC,cAAc,EAAC,aAAa,EAAE,aAAa,GAAI;YACnF,eAAC,aAAa,OAAK,WAAW,EAAE,GAAG,EAAC,cAAc,EAAC,aAAa,EAAE,aAAa,GAAI;YACnF,eAAC,eAAe,OAAK,WAAW,EAAE,GAAG,EAAC,gBAAgB,EAAC,aAAa,EAAE,aAAa,GAAI;SACxF,CAAC;IAEN,OAAO,CACL,KAAC,wBAAwB,IAAC,mBAAmB,EAAE,uBAAuB,CAAC,EAAE,EAAE,aAAa,EAAE,aAAa,EAAE,qBAAqB,EAAE,qBAAqB,YACnJ,KAAC,cAAc,IAAC,OAAO,EAAE,OAAO,YAC9B,KAAC,cAAc,OAAK,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,oBAAoB,EAAE,oBAAoB,GAAI,GACpH,GACQ,CAC5B,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 { Fragment } from \"react\";\nimport { useActiveIModelConnection } from \"@itwin/appui-react\";\nimport { TreeWidget } from \"../../../TreeWidget.js\";\nimport { SelectableTree } from \"../../tree-header/SelectableTree.js\";\nimport { useActiveViewport } from \"../common/internal/UseActiveViewport.js\";\nimport { TelemetryContextProvider } from \"../common/UseTelemetryContext.js\";\nimport { CategoriesTree } from \"./CategoriesTree.js\";\nimport { HideAllButton, InvertAllButton, ShowAllButton, useCategoriesTreeButtonProps } from \"./CategoriesTreeButtons.js\";\n\nimport type { CategoriesTreeProps } from \"./CategoriesTree.js\";\nimport type { ReactNode } from \"react\";\nimport type { IModelConnection, ScreenViewport } from \"@itwin/core-frontend\";\nimport type { CategoriesTreeHeaderButtonProps, CategoriesTreeHeaderButtonType } from \"./CategoriesTreeButtons.js\";\n\n/** @public */\ninterface CategoriesTreeComponentProps\n  extends Pick<\n    CategoriesTreeProps,\n    | \"selectionStorage\"\n    | \"hierarchyLevelConfig\"\n    | \"selectionMode\"\n    | \"filter\"\n    | \"emptyTreeContent\"\n    | \"getInlineActions\"\n    | \"getMenuActions\"\n    | \"getDecorations\"\n    | \"hierarchyConfig\"\n  > {\n  /**\n   * Renderers of header buttons. Defaults to:\n   * ```ts\n   * [\n   *   CategoriesTreeComponent.ShowAllButton,\n   *   CategoriesTreeComponent.HideAllButton,\n   *   CategoriesTreeComponent.InvertAllButton,\n   * ]\n   * ```\n   */\n  headerButtons?: Array<(props: CategoriesTreeHeaderButtonProps) => React.ReactNode>;\n  onPerformanceMeasured?: (featureId: string, duration: number) => void;\n  onFeatureUsed?: (feature: string) => void;\n}\n\n/**\n * A component that renders `CategoriesTree` and a header with filtering capabilities and header buttons.\n * @public\n */\nexport const CategoriesTreeComponent = (props: CategoriesTreeComponentProps) => {\n  const iModel = useActiveIModelConnection();\n  const viewport = useActiveViewport();\n\n  if (!iModel || !viewport) {\n    return null;\n  }\n\n  return <CategoriesTreeComponentImpl {...props} iModel={iModel} viewport={viewport} />;\n};\n\n/**\n * Renders a \"Show all\" button that enables display of all categories and their subcategories.\n * @public\n */\nCategoriesTreeComponent.ShowAllButton = ShowAllButton as CategoriesTreeHeaderButtonType;\n\n/**\n * Renders a \"Hide all\" button that disables display of all categories.\n * @public\n */\nCategoriesTreeComponent.HideAllButton = HideAllButton as CategoriesTreeHeaderButtonType;\n\n/**\n * Renders an \"Invert all\" button that inverts display of all categories.\n * @public\n */\nCategoriesTreeComponent.InvertAllButton = InvertAllButton as CategoriesTreeHeaderButtonType;\n\n/**\n * Id of the component. May be used when a creating a `TreeDefinition` for `SelectableTree`.\n * @public\n */\nCategoriesTreeComponent.id = \"categories-tree-v2\";\n\n/**\n * Label of the component. May be used when a creating a `TreeDefinition` for `SelectableTree`.\n * @public\n */\nCategoriesTreeComponent.getLabel = () => TreeWidget.translate(\"categoriesTree.label\");\n\nfunction CategoriesTreeComponentImpl({\n  iModel,\n  viewport,\n  headerButtons,\n  onPerformanceMeasured,\n  onFeatureUsed,\n  filter,\n  ...treeProps\n}: CategoriesTreeComponentProps & { iModel: IModelConnection; viewport: ScreenViewport }) {\n  const { buttonProps, onCategoriesFiltered } = useCategoriesTreeButtonProps({ viewport });\n\n  const buttons: ReactNode = headerButtons\n    ? headerButtons.map((btn, index) => <Fragment key={index}>{btn({ ...buttonProps, onFeatureUsed })}</Fragment>)\n    : [\n        <ShowAllButton {...buttonProps} key=\"show-all-btn\" onFeatureUsed={onFeatureUsed} />,\n        <HideAllButton {...buttonProps} key=\"hide-all-btn\" onFeatureUsed={onFeatureUsed} />,\n        <InvertAllButton {...buttonProps} key=\"invert-all-btn\" onFeatureUsed={onFeatureUsed} />,\n      ];\n\n  return (\n    <TelemetryContextProvider componentIdentifier={CategoriesTreeComponent.id} onFeatureUsed={onFeatureUsed} onPerformanceMeasured={onPerformanceMeasured}>\n      <SelectableTree buttons={buttons}>\n        <CategoriesTree {...treeProps} imodel={iModel} activeView={viewport} filter={filter} onCategoriesFiltered={onCategoriesFiltered} />\n      </SelectableTree>\n    </TelemetryContextProvider>\n  );\n}\n"]}
+{"version":3,"file":"CategoriesTreeComponent.js","sourceRoot":"","sources":["../../../../../../src/tree-widget-react/components/trees/categories-tree/CategoriesTreeComponent.tsx"],"names":[],"mappings":";;AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AACrE,OAAO,EAAE,2BAA2B,EAAE,MAAM,mDAAmD,CAAC;AAChG,OAAO,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,aAAa,EAAE,4BAA4B,EAAE,MAAM,4BAA4B,CAAC;AA2CzH;;;GAGG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAmC,EAAE,EAAE;IAC7E,MAAM,MAAM,GAAG,yBAAyB,EAAE,CAAC;IAC3C,MAAM,QAAQ,GAAG,2BAA2B,CAAC,EAAE,kBAAkB,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;IAErF,IAAI,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAC;QACzB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,KAAC,2BAA2B,OAAK,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;AACxF,CAAC,CAAC;AAEF;;;GAGG;AACH,uBAAuB,CAAC,aAAa,GAAG,aAA+C,CAAC;AAExF;;;GAGG;AACH,uBAAuB,CAAC,aAAa,GAAG,aAA+C,CAAC;AAExF;;;GAGG;AACH,uBAAuB,CAAC,eAAe,GAAG,eAAiD,CAAC;AAE5F;;;GAGG;AACH,uBAAuB,CAAC,EAAE,GAAG,oBAAoB,CAAC;AAElD;;;GAGG;AACH,uBAAuB,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC,sBAAsB,CAAC,CAAC;AAEtF,SAAS,2BAA2B,CAAC,EACnC,MAAM,EACN,QAAQ,EACR,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,MAAM,EACN,GAAG,SAAS,EAC8E;IAC1F,MAAM,EAAE,WAAW,EAAE,oBAAoB,EAAE,GAAG,4BAA4B,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;IAEzF,MAAM,OAAO,GAAc,aAAa;QACtC,CAAC,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,KAAC,QAAQ,cAAc,GAAG,CAAC,EAAE,GAAG,WAAW,EAAE,aAAa,EAAE,CAAC,IAA9C,KAAK,CAAqD,CAAC;QAC9G,CAAC,CAAC;YACE,eAAC,aAAa,OAAK,WAAW,EAAE,GAAG,EAAC,cAAc,EAAC,aAAa,EAAE,aAAa,GAAI;YACnF,eAAC,aAAa,OAAK,WAAW,EAAE,GAAG,EAAC,cAAc,EAAC,aAAa,EAAE,aAAa,GAAI;YACnF,eAAC,eAAe,OAAK,WAAW,EAAE,GAAG,EAAC,gBAAgB,EAAC,aAAa,EAAE,aAAa,GAAI;SACxF,CAAC;IAEN,OAAO,CACL,KAAC,wBAAwB,IAAC,mBAAmB,EAAE,uBAAuB,CAAC,EAAE,EAAE,aAAa,EAAE,aAAa,EAAE,qBAAqB,EAAE,qBAAqB,YACnJ,KAAC,cAAc,IAAC,OAAO,EAAE,OAAO,YAC9B,KAAC,cAAc,OAAK,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,oBAAoB,EAAE,oBAAoB,GAAI,GACpH,GACQ,CAC5B,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 { Fragment } from \"react\";\nimport { useActiveIModelConnection } from \"@itwin/appui-react\";\nimport { TreeWidget } from \"../../../TreeWidget.js\";\nimport { SelectableTree } from \"../../tree-header/SelectableTree.js\";\nimport { useActiveTreeWidgetViewport } from \"../common/internal/UseActiveTreeWidgetViewport.js\";\nimport { TelemetryContextProvider } from \"../common/UseTelemetryContext.js\";\nimport { CategoriesTree } from \"./CategoriesTree.js\";\nimport { HideAllButton, InvertAllButton, ShowAllButton, useCategoriesTreeButtonProps } from \"./CategoriesTreeButtons.js\";\n\nimport type { ReactNode } from \"react\";\nimport type { IModelConnection } from \"@itwin/core-frontend\";\nimport type { TreeWidgetViewport } from \"../common/TreeWidgetViewport.js\";\nimport type { CategoriesTreeProps } from \"./CategoriesTree.js\";\nimport type { CategoriesTreeHeaderButtonProps, CategoriesTreeHeaderButtonType } from \"./CategoriesTreeButtons.js\";\n\n/** @public */\ninterface CategoriesTreeComponentProps\n  extends Pick<\n    CategoriesTreeProps,\n    | \"selectionStorage\"\n    | \"hierarchyLevelConfig\"\n    | \"selectionMode\"\n    | \"filter\"\n    | \"emptyTreeContent\"\n    | \"getInlineActions\"\n    | \"getMenuActions\"\n    | \"getDecorations\"\n    | \"hierarchyConfig\"\n  > {\n  /**\n   * Renderers of header buttons. Defaults to:\n   * ```ts\n   * [\n   *   CategoriesTreeComponent.ShowAllButton,\n   *   CategoriesTreeComponent.HideAllButton,\n   *   CategoriesTreeComponent.InvertAllButton,\n   * ]\n   * ```\n   */\n  headerButtons?: Array<(props: CategoriesTreeHeaderButtonProps) => React.ReactNode>;\n  /**\n   * Viewport used for visibility controls.\n   *\n   * When viewport is not provided, `IModelApp.viewManager.selectedView` will be used.\n   */\n  viewport?: TreeWidgetViewport;\n  onPerformanceMeasured?: (featureId: string, duration: number) => void;\n  onFeatureUsed?: (feature: string) => void;\n}\n\n/**\n * A component that renders `CategoriesTree` and a header with filtering capabilities and header buttons.\n * @public\n */\nexport const CategoriesTreeComponent = (props: CategoriesTreeComponentProps) => {\n  const iModel = useActiveIModelConnection();\n  const viewport = useActiveTreeWidgetViewport({ treeWidgetViewport: props.viewport });\n\n  if (!iModel || !viewport) {\n    return null;\n  }\n\n  return <CategoriesTreeComponentImpl {...props} iModel={iModel} viewport={viewport} />;\n};\n\n/**\n * Renders a \"Show all\" button that enables display of all categories and their subcategories.\n * @public\n */\nCategoriesTreeComponent.ShowAllButton = ShowAllButton as CategoriesTreeHeaderButtonType;\n\n/**\n * Renders a \"Hide all\" button that disables display of all categories.\n * @public\n */\nCategoriesTreeComponent.HideAllButton = HideAllButton as CategoriesTreeHeaderButtonType;\n\n/**\n * Renders an \"Invert all\" button that inverts display of all categories.\n * @public\n */\nCategoriesTreeComponent.InvertAllButton = InvertAllButton as CategoriesTreeHeaderButtonType;\n\n/**\n * Id of the component. May be used when a creating a `TreeDefinition` for `SelectableTree`.\n * @public\n */\nCategoriesTreeComponent.id = \"categories-tree-v2\";\n\n/**\n * Label of the component. May be used when a creating a `TreeDefinition` for `SelectableTree`.\n * @public\n */\nCategoriesTreeComponent.getLabel = () => TreeWidget.translate(\"categoriesTree.label\");\n\nfunction CategoriesTreeComponentImpl({\n  iModel,\n  viewport,\n  headerButtons,\n  onPerformanceMeasured,\n  onFeatureUsed,\n  filter,\n  ...treeProps\n}: CategoriesTreeComponentProps & { iModel: IModelConnection; viewport: TreeWidgetViewport }) {\n  const { buttonProps, onCategoriesFiltered } = useCategoriesTreeButtonProps({ viewport });\n\n  const buttons: ReactNode = headerButtons\n    ? headerButtons.map((btn, index) => <Fragment key={index}>{btn({ ...buttonProps, onFeatureUsed })}</Fragment>)\n    : [\n        <ShowAllButton {...buttonProps} key=\"show-all-btn\" onFeatureUsed={onFeatureUsed} />,\n        <HideAllButton {...buttonProps} key=\"hide-all-btn\" onFeatureUsed={onFeatureUsed} />,\n        <InvertAllButton {...buttonProps} key=\"invert-all-btn\" onFeatureUsed={onFeatureUsed} />,\n      ];\n\n  return (\n    <TelemetryContextProvider componentIdentifier={CategoriesTreeComponent.id} onFeatureUsed={onFeatureUsed} onPerformanceMeasured={onPerformanceMeasured}>\n      <SelectableTree buttons={buttons}>\n        <CategoriesTree {...treeProps} imodel={iModel} activeView={viewport} filter={filter} onCategoriesFiltered={onCategoriesFiltered} />\n      </SelectableTree>\n    </TelemetryContextProvider>\n  );\n}\n"]}

package/lib/esm/tree-widget-react/components/trees/categories-tree/CategoriesTreeDefinition.d.ts

@@ -1,7 +1,8 @@
 import { ProcessedHierarchyNode } from "@itwin/presentation-hierarchies";
-import type { DefineHierarchyLevelProps, HierarchyDefinition, HierarchyFilteringPath, HierarchyLevelDefinition, LimitingECSqlQueryExecutor } from "@itwin/presentation-hierarchies";
+import type { DefineHierarchyLevelProps, HierarchyDefinition, HierarchyLevelDefinition, LimitingECSqlQueryExecutor } from "@itwin/presentation-hierarchies";
 import type { ECClassHierarchyInspector, ECSchemaProvider } from "@itwin/presentation-shared";
 import type { CategoriesTreeIdsCache } from "./internal/CategoriesTreeIdsCache.js";
+import type { NormalizedHierarchyFilteringPath } from "../common/Utils.js";
 interface CategoriesTreeDefinitionProps {
     imodelAccess: ECSchemaProvider & ECClassHierarchyInspector & LimitingECSqlQueryExecutor;
     viewType: "2d" | "3d";
@@ -53,7 +54,7 @@ export declare class CategoriesTreeDefinition implements HierarchyDefinition {
     private createSubCategoriesQuery;
     private createCategoryElementsQuery;
     private createElementChildrenQuery;
-    static createInstanceKeyPaths(props: CategoriesTreeInstanceKeyPathsFromInstanceLabelProps): Promise<HierarchyFilteringPath[]>;
+    static createInstanceKeyPaths(props: CategoriesTreeInstanceKeyPathsFromInstanceLabelProps): Promise<NormalizedHierarchyFilteringPath[]>;
 }
 export {};
 //# sourceMappingURL=CategoriesTreeDefinition.d.ts.map

package/lib/esm/tree-widget-react/components/trees/categories-tree/CategoriesTreeDefinition.js

@@ -2,7 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import { bufferCount, defaultIfEmpty, defer, EMPTY, firstValueFrom, from, fromEvent, identity, lastValueFrom, map, merge, mergeMap, of, reduce, takeUntil, toArray, } from "rxjs";
+import { bufferCount, defaultIfEmpty, defer, EMPTY, firstValueFrom, from, fromEvent, identity, lastValueFrom, map, merge, mergeMap, reduce, takeUntil, toArray, } from "rxjs";
 import { assert } from "@itwin/core-bentley";
 import { createNodesQueryClauseFactory, createPredicateBasedHierarchyDefinition, ProcessedHierarchyNode } from "@itwin/presentation-hierarchies";
 import { createBisInstanceLabelSelectClauseFactory, ECSql } from "@itwin/presentation-shared";
@@ -681,7 +681,7 @@ function createGeometricElementInstanceKeyPaths(imodelAccess, idsCache, hierarch
     const separator = ";";
     const { categoryClass, elementClass, modelClass } = getClassesByView(viewType);
     if (targetItems.length === 0 || !hierarchyConfig.showElements) {
-        return of([]);
+        return EMPTY;
     }
     return defer(() => {
         const ctes = [