npm - @itwin/tree-widget-react - Versions diffs - 4.0.0-alpha.2 → 4.0.0-alpha.20 - Mend

@itwin/tree-widget-react 4.0.0-alpha.2 → 4.0.0-alpha.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (309) hide show

package/lib/esm/tree-widget-react/components/TreeWidgetComponentImpl.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TreeWidgetComponentImpl.js","sourceRoot":"","sources":["../../../../src/tree-widget-react/components/TreeWidgetComponentImpl.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 \"./TreeWidgetComponentImpl.css\";\nimport { useEffect, useState } from \"react\";\nimport { useActiveIModelConnection } from \"@itwin/appui-react\";\nimport { Spinner } from \"@itwin/itwinui-react/bricks\";\nimport { TreeWidget } from \"../TreeWidget.js\";\nimport { WidgetHeader } from \"./tree-header/WidgetHeader.js\";\n\nimport type { PropsWithChildren } from \"react\";\nimport type { IModelConnection } from \"@itwin/core-frontend\";\nimport type { TreeContentDefinition, WidgetHeaderProps } from \"./tree-header/WidgetHeader.js\";\n/*\n Props for rendering trees\n * @public\n /\nexport interface TreeRenderProps {\n filter?: string;\n onPerformanceMeasured?: (featureId: string, elapsedTime: number) => void;\n onFeatureUsed?: (feature: string) => void;\n}\n\n// TODO: fix interface so startIcon type is taken from this interface for `TreeSelector`\n/\n Definition of a tree component displayed in `SelectableTree`.\n * @public\n /\nexport interface TreeDefinition {\n /* Id of the tree /\n id: string;\n /* Callback that is used to get tree label /\n getLabel: () => string;\n /* Callback that is used to render tree component /\n render: (props: TreeRenderProps) => React.ReactNode;\n /\n Callback that is used to determine if tree should be shown for current active iModel connection.\n * If callback is `undefined` tree is shown for all iModel connections.\n /\n shouldShow?: (imodel: IModelConnection) => Promise<boolean>;\n /* Icon to render before tree label in tree selector /\n startIcon?: React.ReactNode;\n}\n\n/\n Props for `TreeWidgetComponent`\n * @internal\n /\nexport interface TreeWidgetComponentImplProps {\n trees: TreeDefinition[];\n onPerformanceMeasured?: (feature: string, elapsedTime: number) => void;\n onFeatureUsed?: (feature: string) => void;\n}\n\n/\n A component that renders a tree (combo box) selector and the selected tree component.\n * @internal\n /\nexport function TreeWidgetComponentImpl(props: TreeWidgetComponentImplProps) {\n const imodel = useActiveIModelConnection();\n if (!imodel) {\n return null;\n }\n return <SelectableTreeContent {...props} imodel={imodel} />;\n}\n\nfunction SelectableTreeContent(props: TreeWidgetComponentImplProps & { imodel: IModelConnection }) {\n const { trees: treeDefinitions, imodel } = props;\n const trees = useActiveTrees(treeDefinitions, imodel);\n\n // TODO: move tree content rendering here\n return (\n <div className=\"tree-widget-selectable-tree\">\n <WidgetHeader {...getWidgetWithHeaderProps(trees)} onPerformanceMeasured={props.onPerformanceMeasured} onFeatureUsed={props.onFeatureUsed} />\n </div>\n );\n}\n\nfunction useActiveTrees(treeDefinitions: TreeDefinition[], imodel: IModelConnection) {\n const [trees, setTrees] = useState<TreeContentDefinition[]>();\n\n useEffect(() => {\n let disposed = false;\n void (async () => {\n const visibleTrees = await getActiveTrees(treeDefinitions, imodel);\n if (!disposed) {\n setTrees(visibleTrees);\n }\n })();\n\n return () => {\n disposed = true;\n };\n }, [treeDefinitions, imodel]);\n\n return trees;\n}\n\nasync function getActiveTrees(treeDefinitions: TreeDefinition[], imodel: IModelConnection): Promise<TreeContentDefinition[]> {\n const handleDefinition = async (treeDef: TreeDefinition) => {\n if (treeDef.shouldShow !== undefined && !(await treeDef.shouldShow(imodel))) {\n return undefined;\n }\n return {\n id: treeDef.id,\n label: treeDef.getLabel(),\n render: treeDef.render,\n startIcon: treeDef.startIcon,\n };\n };\n\n return (await Promise.all(treeDefinitions.map(handleDefinition))).filter((tree) => tree !== undefined) as TreeContentDefinition[];\n}\n\nfunction getWidgetWithHeaderProps(trees?: TreeContentDefinition[]): WidgetHeaderProps {\n if (trees === undefined) {\n return {\n defaultSelectedContentId: \"loading\",\n trees: [\n {\n id: \"loading\",\n label: \"\",\n render: () => (\n <Delayed>\n {/ <ProgressLinear indeterminate={true} /> */}\n <Spinner />\n </Delayed>\n ),\n },\n ],\n };\n }\n\n if (trees.length === 0) {\n return {\n defaultSelectedContentId: \"no-trees\",\n trees: [\n {\n id: \"no-trees\",\n label: \"\",\n render: () => (\n <div style={{ display: \"flex\", justifyContent: \"center\", alignItems: \"center\" }} className=\"tree-widget-no-trees-container\">\n {TreeWidget.translate(\"selectableTree.noTrees\")}\n </div>\n ),\n },\n ],\n };\n }\n\n return {\n defaultSelectedContentId: trees[0].id,\n trees,\n };\n}\n\nfunction Delayed({ delay = 200, children }: PropsWithChildren<{ delay?: number }>) {\n const [show, setShow] = useState(false);\n\n useEffect(() => {\n const id = setTimeout(() => {\n setShow(true);\n }, delay);\n return () => {\n clearTimeout(id);\n };\n }, [delay]);\n\n if (!show) {\n return null;\n }\n\n return <>{children}</>;\n}\n"]}
1	+ {"version":3,"file":"TreeWidgetComponentImpl.js","sourceRoot":"","sources":["../../../../src/tree-widget-react/components/TreeWidgetComponentImpl.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 \"./TreeWidgetComponentImpl.css\";\n\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { useActiveIModelConnection } from \"@itwin/appui-react\";\nimport { Skeleton } from \"@stratakit/bricks\";\nimport { TreeWidget } from \"../TreeWidget.js\";\nimport { SelectableTree } from \"./tree-header/SelectableTree.js\";\nimport { WidgetHeader } from \"./tree-header/WidgetHeader.js\";\nimport { SkeletonTree } from \"./trees/common/components/SkeletonTree.js\";\n\nimport type { IModelConnection } from \"@itwin/core-frontend\";\nimport type { TreeContentDefinition, TreeSelectionProps } from \"./tree-header/WidgetHeader.js\";\n\n/*\n Props for rendering trees\n * @public\n /\nexport interface TreeRenderProps {\n filter?: string;\n treeLabel: string;\n onPerformanceMeasured?: (featureId: string, elapsedTime: number) => void;\n onFeatureUsed?: (feature: string) => void;\n}\n\n// TODO: fix interface so startIcon type is taken from this interface for `TreeSelector`\n/\n Definition of a tree component displayed in `SelectableTree`.\n * @public\n /\nexport interface TreeDefinition {\n /* Id of the tree /\n id: string;\n /* Callback that is used to get tree label /\n getLabel: () => string;\n /* Callback that is used to render tree component /\n render: (props: TreeRenderProps) => React.ReactNode;\n /\n Callback that is used to determine if tree should be shown for current active iModel connection.\n * If callback is `undefined` tree is shown for all iModel connections.\n /\n shouldShow?: (imodel: IModelConnection) => Promise<boolean>;\n /\n Flag to determine if search box should be rendered.\n * - false or undefined, the search box will not be rendered.\n * - true, the search box will be rendered.\n /\n isSearchable?: boolean;\n /* Icon to render before tree label in tree selector /\n startIcon?: React.ReactNode;\n}\n\n/\n Props for `TreeWidgetComponent`\n * @internal\n /\nexport interface TreeWidgetComponentImplProps {\n trees: TreeDefinition[];\n onPerformanceMeasured?: (feature: string, elapsedTime: number) => void;\n onFeatureUsed?: (feature: string) => void;\n}\n\n/\n A component that renders a tree (combo box) selector and the selected tree component.\n * @internal\n */\nexport function TreeWidgetComponentImpl(props: TreeWidgetComponentImplProps) {\n const imodel = useActiveIModelConnection();\n if (!imodel) {\n return null;\n }\n return <SelectableTreeContent {...props} imodel={imodel} />;\n}\n\nfunction SelectableTreeContent({\n onPerformanceMeasured,\n onFeatureUsed,\n trees: treeDefinitions,\n imodel,\n}: TreeWidgetComponentImplProps & { imodel: IModelConnection }) {\n const activeTrees = useActiveTrees(treeDefinitions, imodel);\n const { trees, defaultSelectedContentId } = useMemo(() => getWidgetWithHeaderProps(activeTrees), [activeTrees]);\n const [searchValue, setSearchValue] = useState<string \| undefined>(undefined);\n const [selectedContentId, setSelectedContentId] = useState<string \| undefined>(defaultSelectedContentId);\n const selectedContent = useMemo(() => trees.find((c) => c.id === selectedContentId) ?? trees[0], [selectedContentId, trees]);\n\n const onSelect = useCallback(\n (treeId: string) => {\n onFeatureUsed?.(`choose-${treeId}`);\n setSelectedContentId(treeId);\n },\n [onFeatureUsed],\n );\n\n return (\n <div className=\"tree-widget-selectable-tree\">\n <div className=\"tw-content\">\n <WidgetHeader\n trees={trees}\n defaultSelectedContentId={defaultSelectedContentId}\n onSearch={setSearchValue}\n onSelect={onSelect}\n isLoading={selectedContent.id === \"loading\"}\n />\n <div className=\"tw-content-wrapper\">\n {selectedContent?.render({ onPerformanceMeasured, onFeatureUsed, filter: searchValue, treeLabel: selectedContent.label })}\n </div>\n </div>\n </div>\n );\n}\n\nfunction useActiveTrees(treeDefinitions: TreeDefinition[], imodel: IModelConnection) {\n const [trees, setTrees] = useState<TreeContentDefinition[]>();\n\n useEffect(() => {\n let disposed = false;\n void (async () => {\n const visibleTrees = await getActiveTrees(treeDefinitions, imodel);\n if (!disposed) {\n setTrees(visibleTrees);\n }\n })();\n\n return () => {\n disposed = true;\n };\n }, [treeDefinitions, imodel]);\n\n return trees;\n}\n\nasync function getActiveTrees(treeDefinitions: TreeDefinition[], imodel: IModelConnection): Promise<TreeContentDefinition[]> {\n const handleDefinition = async (treeDef: TreeDefinition) => {\n if (treeDef.shouldShow !== undefined && !(await treeDef.shouldShow(imodel))) {\n return undefined;\n }\n return {\n id: treeDef.id,\n isSearchable: treeDef.isSearchable,\n label: treeDef.getLabel(),\n render: treeDef.render,\n startIcon: treeDef.startIcon,\n };\n };\n\n return (await Promise.all(treeDefinitions.map(handleDefinition))).filter((tree) => tree !== undefined) as TreeContentDefinition[];\n}\n\nfunction getWidgetWithHeaderProps(trees?: TreeContentDefinition[]): TreeSelectionProps {\n if (trees === undefined) {\n return {\n defaultSelectedContentId: \"loading\",\n trees: [\n {\n id: \"loading\",\n label: \"\",\n isSearchable: false,\n render: () => <LoadingTree />,\n },\n ],\n };\n }\n\n if (trees.length === 0) {\n return {\n defaultSelectedContentId: \"no-trees\",\n trees: [\n {\n id: \"no-trees\",\n isSearchable: false,\n label: \"\",\n render: () => (\n <div style={{ display: \"flex\", justifyContent: \"center\", alignItems: \"center\" }} className=\"tree-widget-no-trees-container\">\n {TreeWidget.translate(\"selectableTree.noTrees\")}\n </div>\n ),\n },\n ],\n };\n }\n\n return {\n defaultSelectedContentId: trees[0].id,\n trees,\n };\n}\n\nfunction LoadingTree() {\n return (\n <SelectableTree\n buttons={\n <>\n <Skeleton variant={\"object\"} size={\"medium\"} />\n <Skeleton variant={\"object\"} size={\"medium\"} />\n <Skeleton variant={\"object\"} size={\"medium\"} />\n <Skeleton variant={\"object\"} size={\"medium\"} />\n <Skeleton variant={\"object\"} size={\"medium\"} />\n <Skeleton variant={\"object\"} size={\"medium\"} />\n </>\n }\n >\n <SkeletonTree />\n </SelectableTree>\n );\n}\n"]}

package/lib/esm/tree-widget-react/components/TreeWidgetUiItemsProvider.js CHANGED Viewed

@@ -7,7 +7,8 @@ import "./TreeWidgetUiItemsProvider.css";
 import { useRef } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { StagePanelLocation, StagePanelSection, useTransientState } from "@itwin/appui-react";
-import { SvgHierarchyTree } from "@itwin/itwinui-icons-react";
+import { Icon } from "@stratakit/foundations";
+import hierarchyTreeSvg from "@stratakit/icons/hierarchy-tree.svg";
 import { TreeWidget } from "../TreeWidget.js";
 import { ErrorState } from "./tree-header/ErrorState.js";
 import { TreeWidgetComponentImpl } from "./TreeWidgetComponentImpl.js";
@@ -19,7 +20,7 @@ export function createTreeWidget(props) {
     return {
         id: "tree-widget-react:trees",
         label: TreeWidget.translate("widget.label"),
-        icon: _jsx(SvgHierarchyTree, {}),
+        icon: _jsx(Icon, { href: hierarchyTreeSvg }),
         layouts: {
             standard: {
                 section: StagePanelSection.Start,
@@ -46,7 +47,7 @@ function useTreeStorage() {
     const ref = useRef(null);
     const scrollTop = useRef();
     const getContainer = () => {
-        return ref.current?.querySelector("#tw-tree-renderer-container");
+        return ref.current?.querySelector("#tw-tree-renderer");
     };
     const persist = () => {
         const container = getContainer();

package/lib/esm/tree-widget-react/components/TreeWidgetUiItemsProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TreeWidgetUiItemsProvider.js","sourceRoot":"","sources":["../../../../src/tree-widget-react/components/TreeWidgetUiItemsProvider.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,iCAAiC,CAAC;~~AACzC~~,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC9F,OAAO,EAAE,~~gBAAgB~~,EAAE,MAAM,~~4BAA4B~~,CAAC;~~AAC9D~~,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AAyBvE;;;GAGG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAAsB;IACrD,OAAO;QACL,EAAE,EAAE,yBAAyB;QAC7B,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,cAAc,CAAC;QAC3C,IAAI,EAAE,KAAC,gBAAgB,~~KAAG~~;~~QAC1B~~,OAAO,EAAE;YACP,QAAQ,EAAE;gBACR,OAAO,EAAE,iBAAiB,CAAC,KAAK;gBAChC,QAAQ,EAAE,kBAAkB,CAAC,KAAK;aACnC;SACF;QACD,OAAO,EAAE,KAAC,mBAAmB,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,qBAAqB,EAAE,KAAK,CAAC,qBAAqB,EAAE,aAAa,EAAE,KAAK,CAAC,aAAa,GAAI;KAC7I,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,mBAAmB,CAAC,KAAsB;IACxD,MAAM,GAAG,GAAG,2BAA2B,EAAE,CAAC;IAC1C,OAAO,CACL,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,aAAa,YACpC,KAAC,aAAa,IAAC,iBAAiB,EAAE,UAAU,YAC1C,KAAC,uBAAuB,OAAK,KAAK,GAAI,GACxB,GACZ,CACP,CAAC;AACJ,CAAC;AAED,SAAS,2BAA2B;IAClC,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,cAAc,EAAE,CAAC;IACnD,iBAAiB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACpC,OAAO,GAAG,CAAC;AACb,CAAC;AAQD,SAAS,cAAc;IACrB,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,MAAM,SAAS,GAAG,MAAM,EAAsB,CAAC;IAE/C,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,OAAO,GAAG,CAAC,OAAO,EAAE,aAAa,CAAC,~~6BAA6B~~,CAAC,CAAC;~~IACnE~~,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;QACjC,SAAS,CAAC,OAAO,GAAG,SAAS,EAAE,SAAS,CAAC;IAC3C,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,UAAU,CAAC,GAAG,EAAE;YACd,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;YACjC,IAAI,SAAS,IAAI,SAAS,CAAC,OAAO,EAAE;~~gBAClC~~,SAAS,CAAC,SAAS,GAAG,SAAS,CAAC,OAAO,CAAC;~~aACzC~~;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC;AACnC,CAAC","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n --------------------------------------------------------------------------------------------/\n\nimport \"./TreeWidgetUiItemsProvider.css\";\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 { TreeWidget } from \"../TreeWidget.js\";\nimport { ErrorState } from \"./tree-header/ErrorState.js\";\nimport { TreeWidgetComponentImpl } from \"./TreeWidgetComponentImpl.js\";\n\nimport type { Ref } from \"react\";\nimport type { Widget } from \"@itwin/appui-react\";\nimport type { TreeDefinition } from \"./TreeWidgetComponentImpl.js\";\n\n/*\n Props for `createWidget`.\n * @public\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 /* 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: <TreeWidgetComponent trees={props.trees} onPerformanceMeasured={props.onPerformanceMeasured} onFeatureUsed={props.onFeatureUsed} />,\n };\n}\n\n/\n Tree widget component which allows selecting which tree to render.\n * @public\n */\nexport function TreeWidgetComponent(props: TreeWidgetProps) {\n const ref = useTreeWidgetTransientState();\n return (\n <div ref={ref} className=\"tree-widget\">\n <ErrorBoundary FallbackComponent={ErrorState}>\n <TreeWidgetComponentImpl {...props} />\n </ErrorBoundary>\n </div>\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"]}
1	+ {"version":3,"file":"TreeWidgetUiItemsProvider.js","sourceRoot":"","sources":["../../../../src/tree-widget-react/components/TreeWidgetUiItemsProvider.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,iCAAiC,CAAC;AAEzC,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC9F,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,gBAAgB,MAAM,qCAAqC,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AAyBvE;;;GAGG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAAsB;IACrD,OAAO;QACL,EAAE,EAAE,yBAAyB;QAC7B,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,cAAc,CAAC;QAC3C,IAAI,EAAE,KAAC,IAAI,IAAC,IAAI,EAAE,gBAAgB,GAAI;QACtC,OAAO,EAAE;YACP,QAAQ,EAAE;gBACR,OAAO,EAAE,iBAAiB,CAAC,KAAK;gBAChC,QAAQ,EAAE,kBAAkB,CAAC,KAAK;aACnC;SACF;QACD,OAAO,EAAE,KAAC,mBAAmB,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,qBAAqB,EAAE,KAAK,CAAC,qBAAqB,EAAE,aAAa,EAAE,KAAK,CAAC,aAAa,GAAI;KAC7I,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,mBAAmB,CAAC,KAAsB;IACxD,MAAM,GAAG,GAAG,2BAA2B,EAAE,CAAC;IAC1C,OAAO,CACL,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,aAAa,YACpC,KAAC,aAAa,IAAC,iBAAiB,EAAE,UAAU,YAC1C,KAAC,uBAAuB,OAAK,KAAK,GAAI,GACxB,GACZ,CACP,CAAC;AACJ,CAAC;AAED,SAAS,2BAA2B;IAClC,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,cAAc,EAAE,CAAC;IACnD,iBAAiB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACpC,OAAO,GAAG,CAAC;AACb,CAAC;AAQD,SAAS,cAAc;IACrB,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,MAAM,SAAS,GAAG,MAAM,EAAsB,CAAC;IAE/C,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,OAAO,GAAG,CAAC,OAAO,EAAE,aAAa,CAAC,mBAAmB,CAAC,CAAC;IACzD,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;QACjC,SAAS,CAAC,OAAO,GAAG,SAAS,EAAE,SAAS,CAAC;IAC3C,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,UAAU,CAAC,GAAG,EAAE;YACd,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;YACjC,IAAI,SAAS,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;gBACnC,SAAS,CAAC,SAAS,GAAG,SAAS,CAAC,OAAO,CAAC;YAC1C,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC;AACnC,CAAC","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n --------------------------------------------------------------------------------------------/\n\nimport \"./TreeWidgetUiItemsProvider.css\";\n\nimport { useRef } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\nimport { StagePanelLocation, StagePanelSection, useTransientState } from \"@itwin/appui-react\";\nimport { Icon } from \"@stratakit/foundations\";\nimport hierarchyTreeSvg from \"@stratakit/icons/hierarchy-tree.svg\";\nimport { TreeWidget } from \"../TreeWidget.js\";\nimport { ErrorState } from \"./tree-header/ErrorState.js\";\nimport { TreeWidgetComponentImpl } from \"./TreeWidgetComponentImpl.js\";\n\nimport type { Ref } from \"react\";\nimport type { Widget } from \"@itwin/appui-react\";\nimport type { TreeDefinition } from \"./TreeWidgetComponentImpl.js\";\n\n/*\n Props for `createWidget`.\n * @public\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 /* 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: <Icon href={hierarchyTreeSvg} />,\n layouts: {\n standard: {\n section: StagePanelSection.Start,\n location: StagePanelLocation.Right,\n },\n },\n content: <TreeWidgetComponent trees={props.trees} onPerformanceMeasured={props.onPerformanceMeasured} onFeatureUsed={props.onFeatureUsed} />,\n };\n}\n\n/\n Tree widget component which allows selecting which tree to render.\n * @public\n */\nexport function TreeWidgetComponent(props: TreeWidgetProps) {\n const ref = useTreeWidgetTransientState();\n return (\n <div ref={ref} className=\"tree-widget\">\n <ErrorBoundary FallbackComponent={ErrorState}>\n <TreeWidgetComponentImpl {...props} />\n </ErrorBoundary>\n </div>\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\");\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/tree-widget-react/components/tree-header/ErrorState.js CHANGED Viewed

@@ -3,11 +3,12 @@ import { jsx as _jsx, jsxs as _jsxs } 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 { Button, Icon, Text } from "@itwin/itwinui-react/bricks";
+import { Button, Text } from "@stratakit/bricks";
+import { Icon } from "@stratakit/foundations";
+import errorSvg from "@stratakit/icons/status-error.svg";
 import { TreeWidget } from "../../TreeWidget.js";
-const errorIcon = new URL("@itwin/itwinui-icons/status-error.svg", import.meta.url).href;
 /** @internal */
 export function ErrorState({ resetErrorBoundary }) {
-    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%", gap: "0.5rem" }, children: [_jsx(Icon, { href: errorIcon, size: "large" }), _jsx(Text, { children: TreeWidget.translate("errorState.description") }), _jsx(Button, { onClick: resetErrorBoundary, children: TreeWidget.translate("errorState.retryButtonLabel") })] }));
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%", gap: "0.5rem" }, children: [_jsx(Icon, { href: errorSvg, size: "large" }), _jsx(Text, { variant: "body-sm", children: TreeWidget.translate("errorState.description") }), _jsx(Button, { onClick: resetErrorBoundary, children: TreeWidget.translate("errorState.retryButtonLabel") })] }));
 }
 //# sourceMappingURL=ErrorState.js.map

package/lib/esm/tree-widget-react/components/tree-header/ErrorState.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ErrorState.js","sourceRoot":"","sources":["../../../../../src/tree-widget-react/components/tree-header/ErrorState.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,~~IAAI,EAAE,~~MAAM,~~6BAA6B~~,CAAC;~~AACjE~~,OAAO,EAAE,~~UAAU~~,EAAE,MAAM,~~qBAAqB~~,CAAC;~~AAIjD~~,~~MAAM~~,~~SAAS~~,~~GAAG~~,~~IAAI~~,~~GAAG,~~CAAC,~~uCAAuC~~,EAAE,~~MAAM~~,~~CAAC~~,~~IAAI~~,~~CAAC~~,~~GAAG,~~CAAC~~,CAAC,IAAI,CAAC~~;~~AAEzF~~,gBAAgB;AAChB,MAAM,UAAU,UAAU,CAAC,EAAE,kBAAkB,EAAiB;IAC9D,OAAO,CACL,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,aACrI,KAAC,IAAI,IAAC,IAAI,EAAE,~~SAAS~~,EAAE,IAAI,EAAC,OAAO,GAAG,~~EACtC~~,KAAC,IAAI,~~cAAE~~,UAAU,CAAC,SAAS,CAAC,wBAAwB,CAAC,GAAQ,~~EAC7D~~,KAAC,MAAM,IAAC,OAAO,EAAE,kBAAkB,YAAG,UAAU,CAAC,SAAS,CAAC,6BAA6B,CAAC,GAAU,IAC/F,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 { Button, ~~Icon,~~ Text } from \"@~~itwin~~/~~itwinui-react/~~bricks\";\nimport { TreeWidget } from \"../../TreeWidget.js\";\n\nimport type { FallbackProps } from \"react-error-boundary\";\n\~~nconst errorIcon = new URL(\"@itwin/itwinui-icons/status-error.svg\", import.meta.url).href;\~~n\n/** @internal */\nexport function ErrorState({ resetErrorBoundary }: FallbackProps) {\n return (\n <div style={{ display: \"flex\", flexDirection: \"column\", alignItems: \"center\", justifyContent: \"center\", height: \"100%\", gap: \"0.5rem\" }}>\n <Icon href={~~errorIcon~~} size=\"large\" />\n <Text>{TreeWidget.translate(\"errorState.description\")}</Text>\n <Button onClick={resetErrorBoundary}>{TreeWidget.translate(\"errorState.retryButtonLabel\")}</Button>\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"ErrorState.js","sourceRoot":"","sources":["../../../../../src/tree-widget-react/components/tree-header/ErrorState.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,QAAQ,MAAM,mCAAmC,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAIjD,gBAAgB;AAChB,MAAM,UAAU,UAAU,CAAC,EAAE,kBAAkB,EAAiB;IAC9D,OAAO,CACL,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,aACrI,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,OAAO,GAAG,EACrC,KAAC,IAAI,IAAC,OAAO,EAAE,SAAS,YAAG,UAAU,CAAC,SAAS,CAAC,wBAAwB,CAAC,GAAQ,EACjF,KAAC,MAAM,IAAC,OAAO,EAAE,kBAAkB,YAAG,UAAU,CAAC,SAAS,CAAC,6BAA6B,CAAC,GAAU,IAC/F,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 { Button, Text } from \"@stratakit/bricks\";\nimport { Icon } from \"@stratakit/foundations\";\nimport errorSvg from \"@stratakit/icons/status-error.svg\";\nimport { TreeWidget } from \"../../TreeWidget.js\";\n\nimport type { FallbackProps } from \"react-error-boundary\";\n\n/** @internal */\nexport function ErrorState({ resetErrorBoundary }: FallbackProps) {\n return (\n <div style={{ display: \"flex\", flexDirection: \"column\", alignItems: \"center\", justifyContent: \"center\", height: \"100%\", gap: \"0.5rem\" }}>\n <Icon href={errorSvg} size=\"large\" />\n <Text variant={\"body-sm\"}>{TreeWidget.translate(\"errorState.description\")}</Text>\n <Button onClick={resetErrorBoundary}>{TreeWidget.translate(\"errorState.retryButtonLabel\")}</Button>\n </div>\n );\n}\n"]}

package/lib/esm/tree-widget-react/components/tree-header/SearchBox.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-import "./SearchBox.css";
 interface DebouncedSearchBoxProps {
     isOpened: boolean;
     setIsOpened: (value: boolean) => void;
@@ -6,6 +5,7 @@ interface DebouncedSearchBoxProps {
     delay: number;
     className?: string;
 }
+/** @internal */
 export declare function DebouncedSearchBox({ isOpened, onSearch, setIsOpened, delay, className }: DebouncedSearchBoxProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=SearchBox.d.ts.map

package/lib/esm/tree-widget-react/components/tree-header/SearchBox.js CHANGED Viewed

@@ -3,12 +3,12 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import "./SearchBox.css";
 import { useEffect, useRef, useState } from "react";
-import { IconButton, TextBox } from "@itwin/itwinui-react/bricks";
+import { IconButton, TextBox } from "@stratakit/bricks";
+import dismissSvg from "@stratakit/icons/dismiss.svg";
+import searchSvg from "@stratakit/icons/search.svg";
 import { TreeWidget } from "../../TreeWidget.js";
-const searchIcon = new URL("@itwin/itwinui-icons/search.svg", import.meta.url).href;
-const dismissIcon = new URL("@itwin/itwinui-icons/dismiss.svg", import.meta.url).href;
+/** @internal */
 export function DebouncedSearchBox({ isOpened, onSearch, setIsOpened, delay, className }) {
     const [inputValue, setInputValue] = useState(undefined);
     const onChangeRef = useRef(onSearch);
@@ -22,10 +22,10 @@ export function DebouncedSearchBox({ isOpened, onSearch, setIsOpened, delay, cla
             clearTimeout(timeoutId);
         };
     }, [inputValue, delay]);
-    return !isOpened ? (_jsx(IconButton, { className: "tw-search-box-button", variant: "ghost", label: TreeWidget.translate("header.searchBox.searchForSomething"), icon: searchIcon, onClick: () => {
+    return !isOpened ? (_jsx(IconButton, { className: "tw-search-box-button", variant: "ghost", label: TreeWidget.translate("header.searchBox.searchForSomething"), icon: searchSvg, onClick: () => {
             setIsOpened(true);
             setInputValue("");
-        } })) : (_jsxs(_Fragment, { children: [_jsx(TextBox.Root, { className: className, children: _jsx(TextBox.Input, { type: "text", onChange: (e) => setInputValue(e.currentTarget.value), placeholder: TreeWidget.translate("header.searchBox.search") }) }), _jsx(IconButton, { className: "tw-search-box-button", variant: "ghost", label: TreeWidget.translate("header.searchBox.close"), icon: dismissIcon, onClick: () => {
+        } })) : (_jsxs(_Fragment, { children: [_jsx(TextBox.Root, { className: className, children: _jsx(TextBox.Input, { type: "text", onChange: (e) => setInputValue(e.currentTarget.value), placeholder: TreeWidget.translate("header.searchBox.search") }) }), _jsx(IconButton, { className: "tw-search-box-button", variant: "ghost", label: TreeWidget.translate("header.searchBox.close"), icon: dismissSvg, onClick: () => {
                     setIsOpened(false);
                     setInputValue(undefined);
                 } })] }));

package/lib/esm/tree-widget-react/components/tree-header/SearchBox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchBox.js","sourceRoot":"","sources":["../../../../../src/tree-widget-react/components/tree-header/SearchBox.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,~~iBAAiB,CAAC;AACzB,OAAO,~~EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,~~6BAA6B~~,CAAC;~~AAClE~~,OAAO,~~EAAE,~~UAAU,~~EAAE,~~MAAM,~~qBAAqB~~,CAAC;~~AAEjD~~,~~MAAM~~,~~UAAU~~,~~GAAG,IAAI,GAAG,CAAC,iCAAiC,EAAE,~~MAAM,~~CAAC~~,~~IAAI,~~CAAC~~,GAAG,CAAC,CAAC,IAAI,CAAC~~;~~AACpF~~,~~MAAM~~,~~WAAW~~,~~GAAG~~,~~IAAI,GAAG,CAAC,kCAAkC,~~EAAE,MAAM,~~CAAC~~,~~IAAI,~~CAAC,~~GAAG,CAAC,CAAC,IAAI,CAAC~~;~~AAUtF~~,MAAM,UAAU,kBAAkB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAA2B;IAC/G,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC,CAAC;IAC5E,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IACrC,gHAAgH;IAChH,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;IAE/B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,UAAU,CAAC,GAAG,EAAE;YAChC,WAAW,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;QAClC,CAAC,EAAE,KAAK,CAAC,CAAC;QAEV,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,SAAS,CAAC,CAAC;QAC1B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;IAExB,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CACjB,KAAC,UAAU,IACT,SAAS,EAAE,sBAAsB,EACjC,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,qCAAqC,CAAC,EAClE,IAAI,EAAE,~~UAAU~~,~~EAChB~~,OAAO,EAAE,GAAG,EAAE;YACZ,WAAW,CAAC,IAAI,CAAC,CAAC;YAClB,aAAa,CAAC,EAAE,CAAC,CAAC;QACpB,CAAC,GACD,CACH,CAAC,CAAC,CAAC,CACF,8BACE,KAAC,OAAO,CAAC,IAAI,IAAC,SAAS,EAAE,SAAS,YAChC,KAAC,OAAO,CAAC,KAAK,IAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,WAAW,EAAE,UAAU,CAAC,SAAS,CAAC,yBAAyB,CAAC,GAAI,GACvI,EACf,KAAC,UAAU,IACT,SAAS,EAAE,sBAAsB,EACjC,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,wBAAwB,CAAC,EACrD,IAAI,EAAE,~~WAAW~~,~~EACjB~~,OAAO,EAAE,GAAG,EAAE;oBACZ,WAAW,CAAC,KAAK,CAAC,CAAC;oBACnB,aAAa,CAAC,SAAS,CAAC,CAAC;gBAC3B,CAAC,GACD,IACD,CACJ,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 ~~\"./SearchBox.css\";\nimport~~ { useEffect, useRef, useState } from \"react\";\nimport { IconButton, TextBox } from \"@~~itwin~~/~~itwinui-react/~~bricks\";\nimport { ~~TreeWidget }~~ from \"~~../../TreeWidget~~.js\";\~~n\nconst~~ ~~searchIcon~~ = ~~new URL(~~\"@~~itwin~~/~~itwinui-~~icons/search.svg\"~~, import.meta.url).href~~;\~~nconst~~ ~~dismissIcon~~ = ~~new~~ ~~URL(~~\"~~@itwin/itwinui-icons/dismiss~~.~~svg~~\"~~, import.meta.url).href~~;\n\ninterface DebouncedSearchBoxProps {\n isOpened: boolean;\n setIsOpened: (value: boolean) => void;\n onSearch: (value?: string) => void;\n delay: number;\n className?: string;\n}\n\nexport function DebouncedSearchBox({ isOpened, onSearch, setIsOpened, delay, className }: DebouncedSearchBoxProps) {\n const [inputValue, setInputValue] = useState<string \| undefined>(undefined);\n const onChangeRef = useRef(onSearch);\n // save latest `onChange` reference into `useRef` to avoid restarting timeout when `onChange` reference changes.\n onChangeRef.current = onSearch;\n\n useEffect(() => {\n const timeoutId = setTimeout(() => {\n onChangeRef.current(inputValue);\n }, delay);\n\n return () => {\n clearTimeout(timeoutId);\n };\n }, [inputValue, delay]);\n\n return !isOpened ? (\n <IconButton\n className={\"tw-search-box-button\"}\n variant={\"ghost\"}\n label={TreeWidget.translate(\"header.searchBox.searchForSomething\")}\n icon={~~searchIcon~~}\n onClick={() => {\n setIsOpened(true);\n setInputValue(\"\");\n }}\n />\n ) : (\n <>\n <TextBox.Root className={className}>\n <TextBox.Input type={\"text\"} onChange={(e) => setInputValue(e.currentTarget.value)} placeholder={TreeWidget.translate(\"header.searchBox.search\")} />\n </TextBox.Root>\n <IconButton\n className={\"tw-search-box-button\"}\n variant={\"ghost\"}\n label={TreeWidget.translate(\"header.searchBox.close\")}\n icon={~~dismissIcon~~}\n onClick={() => {\n setIsOpened(false);\n setInputValue(undefined);\n }}\n />\n </>\n );\n}\n"]}
1	+ {"version":3,"file":"SearchBox.js","sourceRoot":"","sources":["../../../../../src/tree-widget-react/components/tree-header/SearchBox.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,UAAU,MAAM,8BAA8B,CAAC;AACtD,OAAO,SAAS,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAUjD,gBAAgB;AAChB,MAAM,UAAU,kBAAkB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAA2B;IAC/G,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC,CAAC;IAC5E,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IACrC,gHAAgH;IAChH,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;IAE/B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,UAAU,CAAC,GAAG,EAAE;YAChC,WAAW,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;QAClC,CAAC,EAAE,KAAK,CAAC,CAAC;QAEV,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,SAAS,CAAC,CAAC;QAC1B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;IAExB,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CACjB,KAAC,UAAU,IACT,SAAS,EAAE,sBAAsB,EACjC,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,qCAAqC,CAAC,EAClE,IAAI,EAAE,SAAS,EACf,OAAO,EAAE,GAAG,EAAE;YACZ,WAAW,CAAC,IAAI,CAAC,CAAC;YAClB,aAAa,CAAC,EAAE,CAAC,CAAC;QACpB,CAAC,GACD,CACH,CAAC,CAAC,CAAC,CACF,8BACE,KAAC,OAAO,CAAC,IAAI,IAAC,SAAS,EAAE,SAAS,YAChC,KAAC,OAAO,CAAC,KAAK,IAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,WAAW,EAAE,UAAU,CAAC,SAAS,CAAC,yBAAyB,CAAC,GAAI,GACvI,EACf,KAAC,UAAU,IACT,SAAS,EAAE,sBAAsB,EACjC,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,wBAAwB,CAAC,EACrD,IAAI,EAAE,UAAU,EAChB,OAAO,EAAE,GAAG,EAAE;oBACZ,WAAW,CAAC,KAAK,CAAC,CAAC;oBACnB,aAAa,CAAC,SAAS,CAAC,CAAC;gBAC3B,CAAC,GACD,IACD,CACJ,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 { useEffect, useRef, useState } from \"react\";\nimport { IconButton, TextBox } from \"@stratakit/bricks\";\nimport dismissSvg from \"@stratakit/icons/dismiss.svg\";\nimport searchSvg from \"@stratakit/icons/search.svg\";\nimport { TreeWidget } from \"../../TreeWidget.js\";\n\ninterface DebouncedSearchBoxProps {\n isOpened: boolean;\n setIsOpened: (value: boolean) => void;\n onSearch: (value?: string) => void;\n delay: number;\n className?: string;\n}\n\n/** @internal */\nexport function DebouncedSearchBox({ isOpened, onSearch, setIsOpened, delay, className }: DebouncedSearchBoxProps) {\n const [inputValue, setInputValue] = useState<string \| undefined>(undefined);\n const onChangeRef = useRef(onSearch);\n // save latest `onChange` reference into `useRef` to avoid restarting timeout when `onChange` reference changes.\n onChangeRef.current = onSearch;\n\n useEffect(() => {\n const timeoutId = setTimeout(() => {\n onChangeRef.current(inputValue);\n }, delay);\n\n return () => {\n clearTimeout(timeoutId);\n };\n }, [inputValue, delay]);\n\n return !isOpened ? (\n <IconButton\n className={\"tw-search-box-button\"}\n variant={\"ghost\"}\n label={TreeWidget.translate(\"header.searchBox.searchForSomething\")}\n icon={searchSvg}\n onClick={() => {\n setIsOpened(true);\n setInputValue(\"\");\n }}\n />\n ) : (\n <>\n <TextBox.Root className={className}>\n <TextBox.Input type={\"text\"} onChange={(e) => setInputValue(e.currentTarget.value)} placeholder={TreeWidget.translate(\"header.searchBox.search\")} />\n </TextBox.Root>\n <IconButton\n className={\"tw-search-box-button\"}\n variant={\"ghost\"}\n label={TreeWidget.translate(\"header.searchBox.close\")}\n icon={dismissSvg}\n onClick={() => {\n setIsOpened(false);\n setInputValue(undefined);\n }}\n />\n </>\n );\n}\n"]}

package/lib/esm/tree-widget-react/components/tree-header/SelectableTree.css CHANGED Viewed

@@ -6,18 +6,19 @@
 .tw-tree-with-toolbar {
   width: 100%;
   height: 100%;
+  overflow: hidden;
   display: flex;
   flex-direction: column;
   .tw-tree-toolbar {
-    padding: 0 var(--iui-size-s) var(--iui-size-xs)  var(--iui-size-s);
+    padding: 0 var(--iui-size-s) var(--iui-size-xs) var(--iui-size-s);
     display: flex;
     align-items: center;
     gap: var(--iui-size-2xs);
   }
   .tw-tree-content {
-    padding-top: var(--iui-size-xs);
     height: 100%;
+    overflow: hidden;
   }
 }

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

@@ -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 CHANGED Viewed

@@ -5,7 +5,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  *--------------------------------------------------------------------------------------------*/
 import "./SelectableTree.css";
 import { ErrorBoundary } from "react-error-boundary";
-import { Divider } from "@itwin/itwinui-react/bricks";
+import { Divider } from "@stratakit/bricks";
 import { ErrorState } from "./ErrorState.js";
 /** @beta */
 export function SelectableTree({ buttons, children }) {

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

	@@ -1 +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,~~6BAA6B~~,CAAC;~~AACtD~~,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 \"@~~itwin~~/~~itwinui-react/~~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"]}
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;AAE9B,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\";\n\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.css CHANGED Viewed

@@ -13,6 +13,7 @@
     display: flex;
     vertical-align: middle;
     padding: var(--iui-size-s) var(--iui-size-s) var(--iui-size-xs) var(--iui-size-s);
+    gap: var(--iui-size-s);
     .tw-content-header-selector {
       width: 100%;

package/lib/esm/tree-widget-react/components/tree-header/WidgetHeader.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./WidgetHeader.css";
 import type { TreeRenderProps } from "../TreeWidgetComponentImpl.js";
 /**
@@ -8,22 +7,30 @@ import type { TreeRenderProps } from "../TreeWidgetComponentImpl.js";
 export interface TreeContentDefinition {
     id: string;
     label: string;
+    isSearchable?: boolean;
     render: (props: TreeRenderProps) => React.ReactNode;
 }
 /**
  * Props for `WidgetWithHeader`
  * @internal
  */
-export interface WidgetHeaderProps {
+export interface TreeSelectionProps {
     defaultSelectedContentId: string;
     trees: TreeContentDefinition[];
-    onPerformanceMeasured?: (feature: string, elapsedTime: number) => void;
-    onFeatureUsed?: (feature: string) => void;
 }
+/**
+ * Props for `WidgetWithHeader`
+ * @internal
+ */
+export type WidgetHeaderProps = {
+    onSearch: (value?: string) => void;
+    onSelect: (value: string) => void;
+    isLoading?: boolean;
+} & TreeSelectionProps;
 /**
  * A component that accepts a list of trees and renders a select box at the top,
  * allowing to choose which of the provided tree components should be rendered at the bottom.
  * @internal
  */
-export declare function WidgetHeader({ defaultSelectedContentId, trees, onFeatureUsed, onPerformanceMeasured }: WidgetHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function WidgetHeader({ defaultSelectedContentId, trees, onSelect, onSearch }: WidgetHeaderProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=WidgetHeader.d.ts.map

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

@@ -5,23 +5,27 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *--------------------------------------------------------------------------------------------*/
 import "./WidgetHeader.css";
 import { useState } from "react";
-import { Select } from "@itwin/itwinui-react/bricks";
+import { Select, Skeleton } from "@stratakit/bricks";
 import { DebouncedSearchBox } from "./SearchBox.js";
-// TODO: move tree content rendering outside
 /**
  * A component that accepts a list of trees and renders a select box at the top,
  * allowing to choose which of the provided tree components should be rendered at the bottom.
  * @internal
  */
-export function WidgetHeader({ defaultSelectedContentId, trees, onFeatureUsed, onPerformanceMeasured }) {
+export function WidgetHeader({ defaultSelectedContentId, trees, onSelect, onSearch }) {
     const [selectedContentId, setSelectedContentId] = useState(defaultSelectedContentId);
     const selectedContent = trees.find((c) => c.id === selectedContentId) ?? trees[0];
     const [isSearchOpen, setIsSearchOpen] = useState(false);
-    const [searchValue, setSearchValue] = useState(undefined);
-    return (_jsxs("div", { className: "tw-content", children: [_jsxs("div", { className: "tw-content-header", children: [trees.length > 0 && !isSearchOpen && (_jsx(Select.Root, { className: "tw-content-header-selector", children: _jsx(Select.HtmlSelect, { value: selectedContent.id, onChange: (e) => {
-                                const treeId = e.target.value;
-                                onFeatureUsed?.(`choose-${treeId}`);
-                                setSelectedContentId(treeId);
-                            }, children: trees.map((tree) => (_jsx("option", { value: tree.id, children: tree.label }, tree.id))) }) })), _jsx(DebouncedSearchBox, { className: "tw-content-header-search", isOpened: isSearchOpen, setIsOpened: setIsSearchOpen, onSearch: setSearchValue, delay: 20 })] }), _jsx("div", { className: "tw-content-wrapper", children: selectedContent?.render({ onPerformanceMeasured, onFeatureUsed, filter: searchValue }) })] }));
+    if (trees.length === 0 || selectedContent.id === "loading") {
+        return _jsx(LoadingHeader, {});
+    }
+    return (_jsxs("div", { className: "tw-content-header", children: [trees.length > 0 && !isSearchOpen && (_jsx(Select.Root, { className: "tw-content-header-selector", children: _jsx(Select.HtmlSelect, { value: selectedContentId, onChange: (e) => {
+                        const treeId = e.target.value;
+                        onSelect(treeId);
+                        setSelectedContentId(treeId);
+                    }, children: trees.map((tree) => (_jsx("option", { value: tree.id, children: tree.label }, tree.id))) }) })), selectedContent.isSearchable && (_jsx(DebouncedSearchBox, { className: "tw-content-header-search", isOpened: isSearchOpen, setIsOpened: setIsSearchOpen, onSearch: onSearch, delay: 20 }))] }));
+}
+function LoadingHeader() {
+    return (_jsxs("div", { className: "tw-content-header", children: [_jsx(Skeleton, { variant: "text", size: "xlarge" }), _jsx(Skeleton, { variant: "object", size: "medium" })] }));
 }
 //# sourceMappingURL=WidgetHeader.js.map

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

	@@ -1 +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,MAAM,~~6BAA6B~~,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;~~AAyBpD,4CAA4C;AAC5C~~;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAAC,EAAE,wBAAwB,EAAE,KAAK,EAAE,~~aAAa~~,EAAE,~~qBAAqB~~,EAAqB;~~IACvH~~,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;~~IACjE~~,MAAM,CAAC,~~WAAW~~,~~EAAE~~,~~cAAc,~~CAAC,~~GAAG~~,~~QAAQ~~,~~CAAqB,~~SAAS,~~CAAC~~,CAAC;~~IAE9E~~,OAAO,~~CACL~~,~~eAAK~~,~~SAAS~~,~~EAAC~~,~~YAAY~~,~~aACzB~~,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,~~eAAe~~,~~CAAC~~,~~EAAE,EACzB,~~QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;~~gCACd~~,MAAM,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;~~gCAC9B~~,~~aAAa~~,~~EAAE,~~CAAC,~~UAAU,~~MAAM,~~EAAE,~~CAAC,CAAC;~~gCACpC~~,oBAAoB,CAAC,MAAM,CAAC,CAAC;~~4BAC~~/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,~~EACD~~,KAAC,kBAAkB,IAAC,SAAS,EAAE,0BAA0B,EAAE,QAAQ,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,QAAQ,EAAE,~~cAAc~~,EAAE,KAAK,EAAE,EAAE,GAAI,~~IACpJ~~,~~EACN~~,~~cAAK~~,SAAS,EAAC,~~oBAAoB~~,~~YAAE~~,~~eAAe~~,EAAE,MAAM,~~CAAC,~~EAAE,~~qBAAqB~~,EAAE,~~aAAa~~,EAAE,~~MAAM~~,EAAE,~~WAAW~~,EAAE,~~CAAC~~,~~GAAO~~,~~IAC9H~~,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 } from \"@~~itwin~~/~~itwinui-react/~~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 render: (props: TreeRenderProps) => React.ReactNode;\n}\n\n/\n Props for `WidgetWithHeader`\n * @internal\n /\nexport interface ~~WidgetHeaderProps~~ {\n defaultSelectedContentId: string;\n trees: TreeContentDefinition[];\n ~~onPerformanceMeasured?:~~ (~~feature:~~ string~~, elapsedTime: number~~) => void;\n ~~onFeatureUsed?:~~ (~~feature~~: string) => void;\n}~~\n\n//~~ ~~TODO:~~ ~~move tree content rendering outside~~\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, ~~onFeatureUsed~~, ~~onPerformanceMeasured~~ }: 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 ~~const~~ ~~[searchValue,~~ ~~setSearchValue]~~ = ~~useState<string~~ \| ~~undefined>(undefined~~);\n\n return (\n <div className=\"tw-content~~\">\n <div className=\"tw~~-~~content-~~header\">\n {trees.length > 0 && !isSearchOpen && (\n <Select.Root className={\"tw-content-header-selector\"}>\n <Select.HtmlSelect\n value={~~selectedContent.id~~}\n onChange={(e) => {\n const treeId = e.target.value;\n ~~onFeatureUsed?.~~(~~`choose-${~~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 <DebouncedSearchBox className={\"tw-content-header-search\"} isOpened={isSearchOpen} setIsOpened={setIsSearchOpen} onSearch={~~setSearchValue~~} delay={20} />\n </div>\n <div className=\"tw-content-~~wrapper~~\">{~~selectedContent?.render(~~{ ~~onPerformanceMeasured,~~ ~~onFeatureUsed,~~ ~~filter:~~ ~~searchValue })}</div>\~~n </div>\n );\n}\n"]}
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;AAE5B,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\";\n\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/CategoriesTree.d.ts CHANGED Viewed

@@ -1,12 +1,12 @@
+import type { VisibilityTreeProps } from "../common/components/VisibilityTree.js";
 import type { VisibilityTreeRendererProps } from "../common/components/VisibilityTreeRenderer.js";
 import type { UseCategoriesTreeProps } from "./UseCategoriesTree.js";
-import type { VisibilityTreeProps } from "../common/components/VisibilityTree.js";
 /** @beta */
-export type CategoriesTreeProps = Pick<VisibilityTreeProps, "imodel" | "getSchemaContext" | "selectionStorage" | "selectionMode" | "emptyTreeContent"> & Pick<VisibilityTreeRendererProps, "actions"> & UseCategoriesTreeProps & {
+export type CategoriesTreeProps = Pick<VisibilityTreeProps, "imodel" | "selectionStorage" | "selectionMode" | "emptyTreeContent"> & Pick<VisibilityTreeRendererProps, "getInlineActions" | "getMenuActions" | "getContextMenuActions" | "getDecorations" | "treeLabel"> & UseCategoriesTreeProps & {
     hierarchyLevelConfig?: {
         sizeLimit?: number;
     };
 };
 /** @beta */
-export declare function CategoriesTree({ imodel, getSchemaContext, selectionStorage, activeView, filter, hierarchyLevelConfig, selectionMode, onCategoriesFiltered, emptyTreeContent, }: CategoriesTreeProps): import("react/jsx-runtime").JSX.Element;
+export declare function CategoriesTree({ imodel, selectionStorage, activeView, filter, hierarchyLevelConfig, hierarchyConfig, selectionMode, onCategoriesFiltered, emptyTreeContent, getDecorations, getInlineActions, getMenuActions, getContextMenuActions, treeLabel, }: CategoriesTreeProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CategoriesTree.d.ts.map

package/lib/esm/tree-widget-react/components/trees/categories-tree/CategoriesTree.js CHANGED Viewed

@@ -7,13 +7,14 @@ import { VisibilityTree } from "../common/components/VisibilityTree.js";
 import { VisibilityTreeRenderer } from "../common/components/VisibilityTreeRenderer.js";
 import { useCategoriesTree } from "./UseCategoriesTree.js";
 /** @beta */
-export function CategoriesTree({ imodel, getSchemaContext, selectionStorage, activeView, filter, hierarchyLevelConfig, selectionMode, onCategoriesFiltered, emptyTreeContent, }) {
+export function CategoriesTree({ imodel, selectionStorage, activeView, filter, hierarchyLevelConfig, hierarchyConfig, selectionMode, onCategoriesFiltered, emptyTreeContent, getDecorations, getInlineActions, getMenuActions, getContextMenuActions, treeLabel, }) {
     const { categoriesTreeProps, rendererProps } = useCategoriesTree({
         filter,
         activeView,
         onCategoriesFiltered,
         emptyTreeContent,
+        hierarchyConfig,
     });
-    return (_jsx(VisibilityTree, { ...categoriesTreeProps, imodel: imodel, selectionStorage: selectionStorage, getSchemaContext: getSchemaContext, hierarchyLevelSizeLimit: hierarchyLevelConfig?.sizeLimit, selectionMode: selectionMode ?? "none", treeRenderer: (treeProps) => _jsx(VisibilityTreeRenderer, { ...treeProps, ...rendererProps }) }));
+    return (_jsx(VisibilityTree, { ...categoriesTreeProps, imodel: imodel, selectionStorage: selectionStorage, hierarchyLevelSizeLimit: hierarchyLevelConfig?.sizeLimit, selectionMode: selectionMode ?? "none", treeRenderer: (treeProps) => (_jsx(VisibilityTreeRenderer, { ...treeProps, ...rendererProps, treeLabel: treeLabel, getInlineActions: getInlineActions, getMenuActions: getMenuActions, getContextMenuActions: getContextMenuActions, getDecorations: getDecorations ?? rendererProps.getDecorations })) }));
 }
 //# sourceMappingURL=CategoriesTree.js.map

package/lib/esm/tree-widget-react/components/trees/categories-tree/CategoriesTree.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CategoriesTree.js","sourceRoot":"","sources":["../../../../../../src/tree-widget-react/components/trees/categories-tree/CategoriesTree.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,EAAE,sBAAsB,EAAE,MAAM,gDAAgD,CAAC;AACxF,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAe3D,YAAY;AACZ,MAAM,UAAU,cAAc,CAAC,EAC7B,MAAM,EACN,gBAAgB,EAChB,~~gBAAgB,EAChB,~~UAAU,EACV,MAAM,EACN,oBAAoB,EACpB,aAAa,EACb,oBAAoB,EACpB,gBAAgB,~~GACI~~;IACpB,MAAM,EAAE,mBAAmB,EAAE,aAAa,EAAE,GAAG,iBAAiB,CAAC;QAC/D,MAAM;QACN,UAAU;QACV,oBAAoB;QACpB,gBAAgB;~~KACjB~~,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,cAAc,OACT,mBAAmB,EACvB,MAAM,EAAE,MAAM,EACd,gBAAgB,EAAE,gBAAgB,EAClC,~~gBAAgB,EAAE,gBAAgB,EAClC,~~uBAAuB,EAAE,oBAAoB,EAAE,SAAS,EACxD,aAAa,EAAE,aAAa,IAAI,MAAM,EACtC,YAAY,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,KAAC,sBAAsB,~~OAAK~~,SAAS,~~KAAM~~,aAAa,~~GAAI~~,~~GACzF~~,CACH,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 { VisibilityTree } from \"../common/components/VisibilityTree.js\";\nimport { VisibilityTreeRenderer } from \"../common/components/VisibilityTreeRenderer.js\";\nimport { useCategoriesTree } from \"./UseCategoriesTree.js\";\n\nimport type { ~~VisibilityTreeRendererProps~~ } from \"../common/components/~~VisibilityTreeRenderer~~.js\";\nimport type { ~~UseCategoriesTreeProps~~ } from \"~~./UseCategoriesTree~~.js\";\nimport type { ~~VisibilityTreeProps~~ } from \"~~../common/components/VisibilityTree~~.js\";\n\n/** @beta /\nexport type CategoriesTreeProps = Pick<VisibilityTreeProps, \"imodel\" \| \"~~getSchemaContext\" \| \"~~selectionStorage\" \| \"selectionMode\" \| \"emptyTreeContent\"> &\n Pick<VisibilityTreeRendererProps, \"~~actions~~\"> &\n UseCategoriesTreeProps & {\n hierarchyLevelConfig?: {\n sizeLimit?: number;\n };\n };\n\n/* @beta */\nexport function CategoriesTree({\n imodel,\n ~~getSchemaContext,\n~~ selectionStorage,\n activeView,\n filter,\n hierarchyLevelConfig,\n selectionMode,\n onCategoriesFiltered,\n emptyTreeContent,\n}: CategoriesTreeProps) {\n const { categoriesTreeProps, rendererProps } = useCategoriesTree({\n filter,\n activeView,\n onCategoriesFiltered,\n emptyTreeContent,\n });\n\n return (\n <VisibilityTree\n {...categoriesTreeProps}\n imodel={imodel}\n selectionStorage={selectionStorage}\n ~~getSchemaContext={getSchemaContext}\n~~ hierarchyLevelSizeLimit={hierarchyLevelConfig?.sizeLimit}\n selectionMode={selectionMode ?? \"none\"}\n treeRenderer={(treeProps) => <VisibilityTreeRenderer {...treeProps} {...rendererProps} />}\n />\n );\n}\n"]}
1	+ {"version":3,"file":"CategoriesTree.js","sourceRoot":"","sources":["../../../../../../src/tree-widget-react/components/trees/categories-tree/CategoriesTree.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,EAAE,sBAAsB,EAAE,MAAM,gDAAgD,CAAC;AACxF,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAe3D,YAAY;AACZ,MAAM,UAAU,cAAc,CAAC,EAC7B,MAAM,EACN,gBAAgB,EAChB,UAAU,EACV,MAAM,EACN,oBAAoB,EACpB,eAAe,EACf,aAAa,EACb,oBAAoB,EACpB,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAChB,cAAc,EACd,qBAAqB,EACrB,SAAS,GACW;IACpB,MAAM,EAAE,mBAAmB,EAAE,aAAa,EAAE,GAAG,iBAAiB,CAAC;QAC/D,MAAM;QACN,UAAU;QACV,oBAAoB;QACpB,gBAAgB;QAChB,eAAe;KAChB,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,cAAc,OACT,mBAAmB,EACvB,MAAM,EAAE,MAAM,EACd,gBAAgB,EAAE,gBAAgB,EAClC,uBAAuB,EAAE,oBAAoB,EAAE,SAAS,EACxD,aAAa,EAAE,aAAa,IAAI,MAAM,EACtC,YAAY,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,CAC3B,KAAC,sBAAsB,OACjB,SAAS,KACT,aAAa,EACjB,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,gBAAgB,EAClC,cAAc,EAAE,cAAc,EAC9B,qBAAqB,EAAE,qBAAqB,EAC5C,cAAc,EAAE,cAAc,IAAI,aAAa,CAAC,cAAc,GAC9D,CACH,GACD,CACH,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 { VisibilityTree } from \"../common/components/VisibilityTree.js\";\nimport { VisibilityTreeRenderer } from \"../common/components/VisibilityTreeRenderer.js\";\nimport { useCategoriesTree } from \"./UseCategoriesTree.js\";\n\nimport type { VisibilityTreeProps } from \"../common/components/VisibilityTree.js\";\nimport type { VisibilityTreeRendererProps } from \"../common/components/VisibilityTreeRenderer.js\";\nimport type { UseCategoriesTreeProps } from \"./UseCategoriesTree.js\";\n\n/** @beta /\nexport type CategoriesTreeProps = Pick<VisibilityTreeProps, \"imodel\" \| \"selectionStorage\" \| \"selectionMode\" \| \"emptyTreeContent\"> &\n Pick<VisibilityTreeRendererProps, \"getInlineActions\" \| \"getMenuActions\" \| \"getContextMenuActions\" \| \"getDecorations\" \| \"treeLabel\"> &\n UseCategoriesTreeProps & {\n hierarchyLevelConfig?: {\n sizeLimit?: number;\n };\n };\n\n/* @beta */\nexport function CategoriesTree({\n imodel,\n selectionStorage,\n activeView,\n filter,\n hierarchyLevelConfig,\n hierarchyConfig,\n selectionMode,\n onCategoriesFiltered,\n emptyTreeContent,\n getDecorations,\n getInlineActions,\n getMenuActions,\n getContextMenuActions,\n treeLabel,\n}: CategoriesTreeProps) {\n const { categoriesTreeProps, rendererProps } = useCategoriesTree({\n filter,\n activeView,\n onCategoriesFiltered,\n emptyTreeContent,\n hierarchyConfig,\n });\n\n return (\n <VisibilityTree\n {...categoriesTreeProps}\n imodel={imodel}\n selectionStorage={selectionStorage}\n hierarchyLevelSizeLimit={hierarchyLevelConfig?.sizeLimit}\n selectionMode={selectionMode ?? \"none\"}\n treeRenderer={(treeProps) => (\n <VisibilityTreeRenderer\n {...treeProps}\n {...rendererProps}\n treeLabel={treeLabel}\n getInlineActions={getInlineActions}\n getMenuActions={getMenuActions}\n getContextMenuActions={getContextMenuActions}\n getDecorations={getDecorations ?? rendererProps.getDecorations}\n />\n )}\n />\n );\n}\n"]}

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

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-import type { CategoryInfo } from "../common/CategoriesVisibilityUtils.js";
+import type { Id64Array } from "@itwin/core-bentley";
 import type { TreeToolbarButtonProps } from "../../tree-header/SelectableTree.js";
-import type { Viewport } from "@itwin/core-frontend";
+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
@@ -10,6 +10,8 @@ import type { Viewport } from "@itwin/core-frontend";
 export interface CategoriesTreeHeaderButtonProps extends TreeToolbarButtonProps {
     /** A list of categories available in the iModel */
     categories: CategoryInfo[];
+    /** A list of models available in the iModel. */
+    models: Id64Array;
 }
 /**
  * Custom hook that creates props required to render `CategoriesTreeComponent` header button.
@@ -30,10 +32,13 @@ export interface CategoriesTreeHeaderButtonProps extends TreeToolbarButtonProps
  * @public
  */
 export declare function useCategoriesTreeButtonProps({ viewport }: {
-    viewport: Viewport;
+    viewport: TreeWidgetViewport;
 }): {
-    buttonProps: Pick<CategoriesTreeHeaderButtonProps, "categories" | "viewport">;
-    onCategoriesFiltered: (categories: CategoryInfo[] | undefined) => void;
+    buttonProps: Pick<CategoriesTreeHeaderButtonProps, "categories" | "viewport" | "models">;
+    onCategoriesFiltered: (props: {
+        categories: CategoryInfo[] | undefined;
+        models?: Id64Array;
+    }) => void;
 };
 /** @public */
 export type CategoriesTreeHeaderButtonType = (props: CategoriesTreeHeaderButtonProps) => React.ReactElement | null;
@@ -43,5 +48,4 @@ export declare function ShowAllButton(props: CategoriesTreeHeaderButtonProps): i
 export declare function HideAllButton(props: CategoriesTreeHeaderButtonProps): import("react/jsx-runtime").JSX.Element;
 /** @public */
 export declare function InvertAllButton(props: CategoriesTreeHeaderButtonProps): import("react/jsx-runtime").JSX.Element;
-export declare function useCategories(viewport: Viewport): CategoryInfo[];
 //# sourceMappingURL=CategoriesTreeButtons.d.ts.map