npm - @itwin/tree-widget-react - Versions diffs - 2.0.0-dev.0 → 2.0.0 - Mend

@itwin/tree-widget-react 2.0.0-dev.0 → 2.0.0

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 (57) hide show

package/lib/cjs/components/trees/category-tree/CategoriesTreeComponent.js CHANGED Viewed

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CategoriesTreeComponent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -19,6 +22,7 @@ const TreeFilteringState_1 = require("../../TreeFilteringState");
 const AutoSizer_1 = require("../../utils/AutoSizer");
 const CategoriesTree_1 = require("./CategoriesTree");
 const CategoryVisibilityHandler_1 = require("./CategoryVisibilityHandler");
+const classnames_1 = __importDefault(require("classnames"));
 /**
  * A component that renders [[CategoriesTree]] and a header with filtering capabilities
  * and header buttons.
@@ -62,6 +66,7 @@ function CategoriesTreeComponentImpl(props) {
     const categories = (0, CategoryVisibilityHandler_1.useCategories)(core_frontend_1.IModelApp.viewManager, props.iModel, props.viewport);
     const [filteredCategories, setFilteredCategories] = (0, react_1.useState)();
     const { searchOptions, filterString, onFilterApplied, filteredProvider } = (0, TreeFilteringState_1.useTreeFilteringState)();
+    const contentClassName = (0, classnames_1.default)("tree-widget-tree-content", props.density === "enlarged" && "enlarge");
     (0, react_1.useEffect)(() => {
         void (async () => {
             if (filteredProvider) {
@@ -72,13 +77,13 @@ function CategoriesTreeComponentImpl(props) {
             }
         })();
     }, [filteredProvider]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "tree-widget-tree-with-header", children: [(0, jsx_runtime_1.jsx)(TreeHeader_1.TreeHeader, { onFilterClear: searchOptions.onFilterCancel, onFilterStart: searchOptions.onFilterStart, onSelectedChanged: searchOptions.onResultSelectedChanged, resultCount: searchOptions.matchedResultCount, selectedIndex: searchOptions.activeMatchIndex, children: props.headerButtons
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "tree-widget-tree-with-header", children: [(0, jsx_runtime_1.jsx)(TreeHeader_1.TreeHeader, { onFilterClear: searchOptions.onFilterCancel, onFilterStart: searchOptions.onFilterStart, onSelectedChanged: searchOptions.onResultSelectedChanged, resultCount: searchOptions.matchedResultCount, selectedIndex: searchOptions.activeMatchIndex, density: props.density, children: props.headerButtons
                     ? props.headerButtons.map((btn, index) => (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: btn({ viewport: props.viewport, categories, filteredCategories }) }, index))
                     : [
-                        (0, jsx_runtime_1.jsx)(ShowAllButton, { viewport: props.viewport, categories: categories, filteredCategories: filteredCategories }, "show-all-btn"),
-                        (0, jsx_runtime_1.jsx)(HideAllButton, { viewport: props.viewport, categories: categories, filteredCategories: filteredCategories }, "hide-all-btn"),
-                        (0, jsx_runtime_1.jsx)(InvertAllButton, { viewport: props.viewport, categories: categories, filteredCategories: filteredCategories }, "invert-all-btn"),
-                    ] }), (0, jsx_runtime_1.jsx)("div", { className: "tree-widget-tree-content", children: (0, jsx_runtime_1.jsx)(AutoSizer_1.AutoSizer, { children: ({ width, height }) => ((0, jsx_runtime_1.jsx)(CategoriesTree_1.CategoryTree, { ...props, categories: categories, width: width, height: height, filterInfo: { filter: filterString, activeMatchIndex: searchOptions.activeMatchIndex }, onFilterApplied: onFilterApplied, activeView: props.viewport })) }) })] }));
+                        (0, jsx_runtime_1.jsx)(ShowAllButton, { viewport: props.viewport, categories: categories, filteredCategories: filteredCategories, density: props.density }, "show-all-btn"),
+                        (0, jsx_runtime_1.jsx)(HideAllButton, { viewport: props.viewport, categories: categories, filteredCategories: filteredCategories, density: props.density }, "hide-all-btn"),
+                        (0, jsx_runtime_1.jsx)(InvertAllButton, { viewport: props.viewport, categories: categories, filteredCategories: filteredCategories, density: props.density }, "invert-all-btn"),
+                    ] }), (0, jsx_runtime_1.jsx)("div", { className: contentClassName, children: (0, jsx_runtime_1.jsx)(AutoSizer_1.AutoSizer, { children: ({ width, height }) => ((0, jsx_runtime_1.jsx)(CategoriesTree_1.CategoryTree, { ...props, categories: categories, width: width, height: height, filterInfo: { filter: filterString, activeMatchIndex: searchOptions.activeMatchIndex }, onFilterApplied: onFilterApplied, activeView: props.viewport })) }) })] }));
 }
 async function getFilteredCategories(filteredProvider) {
     const filteredCategories = [];
@@ -98,12 +103,12 @@ async function getFilteredCategories(filteredProvider) {
     return filteredCategories;
 }
 function ShowAllButton(props) {
-    return ((0, jsx_runtime_1.jsx)(itwinui_react_1.IconButton, { size: "small", styleType: "borderless", title: TreeWidget_1.TreeWidget.translate("showAll"), onClick: () => void (0, CategoryVisibilityHandler_1.showAllCategories)((props.filteredCategories ?? props.categories).map((category) => category.categoryId), props.viewport), children: (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgVisibilityShow, {}) }));
+    return ((0, jsx_runtime_1.jsx)(itwinui_react_1.IconButton, { size: props.density === "enlarged" ? "large" : "small", styleType: "borderless", title: TreeWidget_1.TreeWidget.translate("showAll"), onClick: () => void (0, CategoryVisibilityHandler_1.showAllCategories)((props.filteredCategories ?? props.categories).map((category) => category.categoryId), props.viewport), children: (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgVisibilityShow, {}) }));
 }
 function HideAllButton(props) {
-    return ((0, jsx_runtime_1.jsx)(itwinui_react_1.IconButton, { size: "small", styleType: "borderless", title: TreeWidget_1.TreeWidget.translate("hideAll"), onClick: () => void (0, CategoryVisibilityHandler_1.hideAllCategories)((props.filteredCategories ?? props.categories).map((category) => category.categoryId), props.viewport), children: (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgVisibilityHide, {}) }));
+    return ((0, jsx_runtime_1.jsx)(itwinui_react_1.IconButton, { size: props.density === "enlarged" ? "large" : "small", styleType: "borderless", title: TreeWidget_1.TreeWidget.translate("hideAll"), onClick: () => void (0, CategoryVisibilityHandler_1.hideAllCategories)((props.filteredCategories ?? props.categories).map((category) => category.categoryId), props.viewport), children: (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgVisibilityHide, {}) }));
 }
 function InvertAllButton(props) {
-    return ((0, jsx_runtime_1.jsx)(itwinui_react_1.IconButton, { title: TreeWidget_1.TreeWidget.translate("invert"), size: "small", styleType: "borderless", onClick: () => void (0, CategoryVisibilityHandler_1.invertAllCategories)(props.filteredCategories ?? props.categories, props.viewport), children: (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgVisibilityHalf, {}) }));
+    return ((0, jsx_runtime_1.jsx)(itwinui_react_1.IconButton, { title: TreeWidget_1.TreeWidget.translate("invert"), size: props.density === "enlarged" ? "large" : "small", styleType: "borderless", onClick: () => void (0, CategoryVisibilityHandler_1.invertAllCategories)(props.filteredCategories ?? props.categories, props.viewport), children: (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgVisibilityHalf, {}) }));
 }
 //# sourceMappingURL=CategoriesTreeComponent.js.map

package/lib/cjs/components/trees/category-tree/CategoriesTreeComponent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CategoriesTreeComponent.js","sourceRoot":"","sources":["../../../../../src/components/trees/category-tree/CategoriesTreeComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n --------------------------------------------------------------------------------------------/\n\nimport \"../VisibilityTreeBase.scss\";\nimport { Fragment, useEffect, useState } from \"react\";\nimport { useActiveIModelConnection, useActiveViewport } from \"@itwin/appui-react\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { SvgVisibilityHalf, SvgVisibilityHide, SvgVisibilityShow } from \"@itwin/itwinui-icons-react\";\nimport { IconButton } from \"@itwin/itwinui-react\";\nimport { isPresentationTreeNodeItem } from \"@itwin/presentation-components\";\nimport { TreeWidget } from \"../../../TreeWidget\";\nimport { TreeHeader } from \"../../tree-header/TreeHeader\";\nimport { useTreeFilteringState } from \"../../TreeFilteringState\";\nimport { AutoSizer } from \"../../utils/AutoSizer\";\nimport { CategoryTree } from \"./CategoriesTree\";\nimport { CategoryVisibilityHandler, hideAllCategories, invertAllCategories, showAllCategories, useCategories } from \"./CategoryVisibilityHandler\";\n\nimport type { IModelConnection, ScreenViewport } from \"@itwin/core-frontend\";\nimport type { IPresentationTreeDataProvider } from \"@itwin/presentation-components\";\nimport type { TreeHeaderButtonProps } from \"../../tree-header/TreeHeader\";\nimport type { CategoryTreeProps } from \"./CategoriesTree\";\nimport type { CategoryInfo } from \"./CategoryVisibilityHandler\";\n\n/*\n Props that get passed to [[CategoriesTreeComponent]] header button renderer.\n * @see CategoriesTreeComponentProps.headerButtons\n * @public\n /\nexport interface CategoriesTreeHeaderButtonProps extends TreeHeaderButtonProps {\n /* A list of categories available in the iModel /\n categories: CategoryInfo[];\n /* In case the tree is filtered, a list of filtered categories. /\n filteredCategories?: CategoryInfo[];\n}\n\n/\n Props for [[CategoriesTreeComponent]].\n * @public\n /\nexport interface CategoriesTreeComponentProps\n extends Omit<\n CategoryTreeProps,\n \"iModel\" \| \"activeView\" \| \"width\" \| \"height\" \| \"filterInfo\" \| \"onFilterApplied\" \| \"categories\" \| \"categoryVisibilityHandler\" \| \"viewManager\"\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\n/\n A component that renders [[CategoriesTree]] and a header with filtering capabilities\n * 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;\n\n/\n Renders a \"Hide all\" button that disables display of all categories.\n * @public\n /\nCategoriesTreeComponent.HideAllButton = HideAllButton;\n\n/\n Renders an \"Invert all\" button that inverts display of all categories.\n * @public\n /\nCategoriesTreeComponent.InvertAllButton = InvertAllButton;\n\n/\n Id of the component. May be used when a creating a [[TreeDefinition]] for [[SelectableTree]].\n * @public\n /\nCategoriesTreeComponent.id = \"categories-tree\";\n\n/\n Label of the component. May be used when a creating a [[TreeDefinition]] for [[SelectableTree]].\n * @public\n */\nCategoriesTreeComponent.getLabel = () => TreeWidget.translate(\"categories\");\n\nfunction CategoriesTreeComponentImpl(props: CategoriesTreeComponentProps & { iModel: IModelConnection; viewport: ScreenViewport }) {\n const categories = useCategories(IModelApp.viewManager, props.iModel, props.viewport);\n const [filteredCategories, setFilteredCategories] = useState<CategoryInfo[]>();\n const { searchOptions, filterString, onFilterApplied, filteredProvider } = useTreeFilteringState();\n\n useEffect(() => {\n void (async () => {\n if (filteredProvider) {\n setFilteredCategories(await getFilteredCategories(filteredProvider));\n } else {\n setFilteredCategories(undefined);\n }\n })();\n }, [filteredProvider]);\n\n return (\n <div className=\"tree-widget-tree-with-header\">\n <TreeHeader\n onFilterClear={searchOptions.onFilterCancel}\n onFilterStart={searchOptions.onFilterStart}\n onSelectedChanged={searchOptions.onResultSelectedChanged}\n resultCount={searchOptions.matchedResultCount}\n selectedIndex={searchOptions.activeMatchIndex}\n >\n {props.headerButtons\n ? props.headerButtons.map((btn, index) => <Fragment key={index}>{btn({ viewport: props.viewport, categories, filteredCategories })}</Fragment>)\n : [\n <ShowAllButton viewport={props.viewport} categories={categories} filteredCategories={filteredCategories} key=\"show-all-btn\" />,\n <HideAllButton viewport={props.viewport} categories={categories} filteredCategories={filteredCategories} key=\"hide-all-btn\" />,\n <InvertAllButton viewport={props.viewport} categories={categories} filteredCategories={filteredCategories} key=\"invert-all-btn\" />,\n ]}\n </TreeHeader>\n <div className=\"tree-widget-tree-content\">\n <AutoSizer>\n {({ width, height }) => (\n <CategoryTree\n {...props}\n categories={categories}\n width={width}\n height={height}\n filterInfo={{ filter: filterString, activeMatchIndex: searchOptions.activeMatchIndex }}\n onFilterApplied={onFilterApplied}\n activeView={props.viewport}\n />\n )}\n </AutoSizer>\n </div>\n </div>\n );\n}\n\nasync function getFilteredCategories(filteredProvider: IPresentationTreeDataProvider) {\n const filteredCategories: CategoryInfo[] = [];\n const nodes = await filteredProvider.getNodes();\n for (const node of nodes) {\n if (!isPresentationTreeNodeItem(node)) {\n continue;\n }\n const filteredCategoryId = CategoryVisibilityHandler.getInstanceIdFromTreeNodeKey(node.key);\n const filteredSubCategoriesIds = node.hasChildren\n ? (await filteredProvider.getNodes(node))\n .filter(isPresentationTreeNodeItem)\n .map((child) => CategoryVisibilityHandler.getInstanceIdFromTreeNodeKey(child.key))\n : [];\n filteredCategories.push({ categoryId: filteredCategoryId, subCategoryIds: filteredSubCategoriesIds });\n }\n return filteredCategories;\n}\n\nfunction ShowAllButton(props: CategoriesTreeHeaderButtonProps) {\n return (\n <IconButton\n size=\"small\"\n styleType=\"borderless\"\n title={TreeWidget.translate(\"showAll\")}\n onClick={() =>\n void showAllCategories(\n (props.filteredCategories ?? props.categories).map((category) => category.categoryId),\n props.viewport,\n )\n }\n >\n <SvgVisibilityShow />\n </IconButton>\n );\n}\n\nfunction HideAllButton(props: CategoriesTreeHeaderButtonProps) {\n return (\n <IconButton\n size=\"small\"\n styleType=\"borderless\"\n title={TreeWidget.translate(\"hideAll\")}\n onClick={() =>\n void hideAllCategories(\n (props.filteredCategories ?? props.categories).map((category) => category.categoryId),\n props.viewport,\n )\n }\n >\n <SvgVisibilityHide />\n </IconButton>\n );\n}\n\nfunction InvertAllButton(props: CategoriesTreeHeaderButtonProps) {\n return (\n <IconButton\n title={TreeWidget.translate(\"invert\")}\n size=\"small\"\n styleType=\"borderless\"\n onClick={() => void invertAllCategories(props.filteredCategories ?? props.categories, props.viewport)}\n >\n <SvgVisibilityHalf />\n </IconButton>\n );\n}\n"]}
1	+ {"version":3,"file":"CategoriesTreeComponent.js","sourceRoot":"","sources":["../../../../../src/components/trees/category-tree/CategoriesTreeComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n --------------------------------------------------------------------------------------------/\n\nimport \"../VisibilityTreeBase.scss\";\nimport { Fragment, useEffect, useState } from \"react\";\nimport { useActiveIModelConnection, useActiveViewport } from \"@itwin/appui-react\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { SvgVisibilityHalf, SvgVisibilityHide, SvgVisibilityShow } from \"@itwin/itwinui-icons-react\";\nimport { IconButton } from \"@itwin/itwinui-react\";\nimport { isPresentationTreeNodeItem } from \"@itwin/presentation-components\";\nimport { TreeWidget } from \"../../../TreeWidget\";\nimport { TreeHeader } from \"../../tree-header/TreeHeader\";\nimport { useTreeFilteringState } from \"../../TreeFilteringState\";\nimport { AutoSizer } from \"../../utils/AutoSizer\";\nimport { CategoryTree } from \"./CategoriesTree\";\nimport { CategoryVisibilityHandler, hideAllCategories, invertAllCategories, showAllCategories, useCategories } from \"./CategoryVisibilityHandler\";\n\nimport type { IModelConnection, ScreenViewport } from \"@itwin/core-frontend\";\nimport type { IPresentationTreeDataProvider } from \"@itwin/presentation-components\";\nimport type { TreeHeaderButtonProps } from \"../../tree-header/TreeHeader\";\nimport type { CategoryTreeProps } from \"./CategoriesTree\";\nimport type { CategoryInfo } from \"./CategoryVisibilityHandler\";\nimport classNames from \"classnames\";\n\n/*\n Props that get passed to [[CategoriesTreeComponent]] header button renderer.\n * @see CategoriesTreeComponentProps.headerButtons\n * @public\n /\nexport interface CategoriesTreeHeaderButtonProps extends TreeHeaderButtonProps {\n /* A list of categories available in the iModel /\n categories: CategoryInfo[];\n /* In case the tree is filtered, a list of filtered categories. /\n filteredCategories?: CategoryInfo[];\n}\n\n/\n Props for [[CategoriesTreeComponent]].\n * @public\n /\nexport interface CategoriesTreeComponentProps\n extends Omit<\n CategoryTreeProps,\n \"iModel\" \| \"activeView\" \| \"width\" \| \"height\" \| \"filterInfo\" \| \"onFilterApplied\" \| \"categories\" \| \"categoryVisibilityHandler\" \| \"viewManager\"\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\n/\n A component that renders [[CategoriesTree]] and a header with filtering capabilities\n * 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;\n\n/\n Renders a \"Hide all\" button that disables display of all categories.\n * @public\n /\nCategoriesTreeComponent.HideAllButton = HideAllButton;\n\n/\n Renders an \"Invert all\" button that inverts display of all categories.\n * @public\n /\nCategoriesTreeComponent.InvertAllButton = InvertAllButton;\n\n/\n Id of the component. May be used when a creating a [[TreeDefinition]] for [[SelectableTree]].\n * @public\n /\nCategoriesTreeComponent.id = \"categories-tree\";\n\n/\n Label of the component. May be used when a creating a [[TreeDefinition]] for [[SelectableTree]].\n * @public\n */\nCategoriesTreeComponent.getLabel = () => TreeWidget.translate(\"categories\");\n\nfunction CategoriesTreeComponentImpl(props: CategoriesTreeComponentProps & { iModel: IModelConnection; viewport: ScreenViewport }) {\n const categories = useCategories(IModelApp.viewManager, props.iModel, props.viewport);\n const [filteredCategories, setFilteredCategories] = useState<CategoryInfo[]>();\n const { searchOptions, filterString, onFilterApplied, filteredProvider } = useTreeFilteringState();\n const contentClassName = classNames(\"tree-widget-tree-content\", props.density === \"enlarged\" && \"enlarge\");\n\n useEffect(() => {\n void (async () => {\n if (filteredProvider) {\n setFilteredCategories(await getFilteredCategories(filteredProvider));\n } else {\n setFilteredCategories(undefined);\n }\n })();\n }, [filteredProvider]);\n\n return (\n <div className=\"tree-widget-tree-with-header\">\n <TreeHeader\n onFilterClear={searchOptions.onFilterCancel}\n onFilterStart={searchOptions.onFilterStart}\n onSelectedChanged={searchOptions.onResultSelectedChanged}\n resultCount={searchOptions.matchedResultCount}\n selectedIndex={searchOptions.activeMatchIndex}\n density={props.density}\n >\n {props.headerButtons\n ? props.headerButtons.map((btn, index) => <Fragment key={index}>{btn({ viewport: props.viewport, categories, filteredCategories })}</Fragment>)\n : [\n <ShowAllButton\n viewport={props.viewport}\n categories={categories}\n filteredCategories={filteredCategories}\n key=\"show-all-btn\"\n density={props.density}\n />,\n <HideAllButton\n viewport={props.viewport}\n categories={categories}\n filteredCategories={filteredCategories}\n key=\"hide-all-btn\"\n density={props.density}\n />,\n <InvertAllButton\n viewport={props.viewport}\n categories={categories}\n filteredCategories={filteredCategories}\n key=\"invert-all-btn\"\n density={props.density}\n />,\n ]}\n </TreeHeader>\n <div className={contentClassName}>\n <AutoSizer>\n {({ width, height }) => (\n <CategoryTree\n {...props}\n categories={categories}\n width={width}\n height={height}\n filterInfo={{ filter: filterString, activeMatchIndex: searchOptions.activeMatchIndex }}\n onFilterApplied={onFilterApplied}\n activeView={props.viewport}\n />\n )}\n </AutoSizer>\n </div>\n </div>\n );\n}\n\nasync function getFilteredCategories(filteredProvider: IPresentationTreeDataProvider) {\n const filteredCategories: CategoryInfo[] = [];\n const nodes = await filteredProvider.getNodes();\n for (const node of nodes) {\n if (!isPresentationTreeNodeItem(node)) {\n continue;\n }\n const filteredCategoryId = CategoryVisibilityHandler.getInstanceIdFromTreeNodeKey(node.key);\n const filteredSubCategoriesIds = node.hasChildren\n ? (await filteredProvider.getNodes(node))\n .filter(isPresentationTreeNodeItem)\n .map((child) => CategoryVisibilityHandler.getInstanceIdFromTreeNodeKey(child.key))\n : [];\n filteredCategories.push({ categoryId: filteredCategoryId, subCategoryIds: filteredSubCategoriesIds });\n }\n return filteredCategories;\n}\n\nfunction ShowAllButton(props: CategoriesTreeHeaderButtonProps) {\n return (\n <IconButton\n size={props.density === \"enlarged\" ? \"large\" : \"small\"}\n styleType=\"borderless\"\n title={TreeWidget.translate(\"showAll\")}\n onClick={() =>\n void showAllCategories(\n (props.filteredCategories ?? props.categories).map((category) => category.categoryId),\n props.viewport,\n )\n }\n >\n <SvgVisibilityShow />\n </IconButton>\n );\n}\n\nfunction HideAllButton(props: CategoriesTreeHeaderButtonProps) {\n return (\n <IconButton\n size={props.density === \"enlarged\" ? \"large\" : \"small\"}\n styleType=\"borderless\"\n title={TreeWidget.translate(\"hideAll\")}\n onClick={() =>\n void hideAllCategories(\n (props.filteredCategories ?? props.categories).map((category) => category.categoryId),\n props.viewport,\n )\n }\n >\n <SvgVisibilityHide />\n </IconButton>\n );\n}\n\nfunction InvertAllButton(props: CategoriesTreeHeaderButtonProps) {\n return (\n <IconButton\n title={TreeWidget.translate(\"invert\")}\n size={props.density === \"enlarged\" ? \"large\" : \"small\"}\n styleType=\"borderless\"\n onClick={() => void invertAllCategories(props.filteredCategories ?? props.categories, props.viewport)}\n >\n <SvgVisibilityHalf />\n </IconButton>\n );\n}\n"]}

package/lib/cjs/components/trees/category-tree/CategoryVisibilityHandler.d.ts CHANGED Viewed

@@ -44,8 +44,8 @@ export declare class CategoryVisibilityHandler implements IVisibilityHandler {
     onVisibilityChange: BeEvent<VisibilityChangeListener>;
     getVisibilityStatus(node: TreeNodeItem): VisibilityStatus;
     changeVisibility(node: TreeNodeItem, shouldDisplay: boolean): Promise<void>;
-    getSubCategoryVisibility(id: string): "hidden" | "visible";
-    getCategoryVisibility(id: string): "hidden" | "visible";
+    getSubCategoryVisibility(id: string): "visible" | "hidden";
+    getCategoryVisibility(id: string): "visible" | "hidden";
     getParent(key: string): CategoryInfo | undefined;
     private onDisplayStyleChanged;
     private onViewedCategoriesChanged;

package/lib/cjs/components/trees/common/TreeRenderer.scss CHANGED Viewed

@@ -6,6 +6,8 @@
 .tree-widget-tree-with-header {
   width: 100%;
   height: 100%;
+  display: flex;
+  flex-direction: column;
   .tree-widget-tree-header {
     height: var(--iui-size-xl);
@@ -13,6 +15,10 @@
   .tree-widget-tree-content {
     height: calc(100% - var(--iui-size-xl));
+    &.enlarge {
+      height: calc(100% - var(--iui-size-xl) - var(--iui-size-m));
+    }
   }
 }
@@ -28,6 +34,12 @@
   }
   .core-tree-node {
+    > .contents {
+      .core-tree-node-icon {
+        line-height: 0;
+      }
+    }
     &.without-expander {
       > .contents {
         > .core-tree-node-icon {
@@ -49,10 +61,30 @@
         margin-left:  var(--enlarged-node-without-expander-margin);
       }
+      > .presentation-components-node-action-buttons {
+        height: var(--enlarged-node-height);
+        width: min-content;
+        .presentation-components-node-action-button {
+          height: var(--enlarged-node-height);
+          width: var(--enlarged-node-height);
+          svg {
+            height: var(--enlarged-node-height);
+            width: var(--enlarged-node-height);
+            padding: var(--iui-size-s);
+          }
+        }
+      }
       > .contents {
         height: var(--enlarged-node-height);
         font-size: var(--iui-font-size-2);
+        .core-progress-indicator {
+          margin: calc(var(--enlarged-node-icon-padding) / 2);
+        }
         /* stylelint-disable-next-line selector-class-pattern */
         .core-tree-expansionToggle {
           > .icon {

package/lib/cjs/components/trees/models-tree/ModelsTreeComponent.js CHANGED Viewed

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModelsTreeComponent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -18,6 +21,7 @@ const AutoSizer_1 = require("../../utils/AutoSizer");
 const ModelsTree_1 = require("./ModelsTree");
 const ModelsVisibilityHandler_1 = require("./ModelsVisibilityHandler");
 const Utils_1 = require("./Utils");
+const classnames_1 = __importDefault(require("classnames"));
 /**
  * A component that renders [[ModelsTree]] and a header with filtering capabilities
  * and header buttons.
@@ -71,6 +75,7 @@ function ModelsTreeComponentImpl(props) {
     const [availableModels, setAvailableModels] = (0, react_1.useState)([]);
     const { viewport, iModel } = props;
     const { searchOptions, filterString, onFilterApplied } = (0, TreeFilteringState_1.useTreeFilteringState)();
+    const contentClassName = (0, classnames_1.default)("tree-widget-tree-content", props.density === "enlarged" && "enlarge");
     (0, react_1.useEffect)(() => {
         (0, Utils_1.queryModelsForHeaderActions)(iModel)
             .then((modelInfos) => {
@@ -81,24 +86,24 @@ function ModelsTreeComponentImpl(props) {
         });
     }, [iModel]);
     const filterInfo = (0, react_1.useMemo)(() => ({ filter: filterString, activeMatchIndex: searchOptions.activeMatchIndex }), [filterString, searchOptions.activeMatchIndex]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "tree-widget-tree-with-header", children: [(0, jsx_runtime_1.jsx)(TreeHeader_1.TreeHeader, { onFilterClear: searchOptions.onFilterCancel, onFilterStart: searchOptions.onFilterStart, onSelectedChanged: searchOptions.onResultSelectedChanged, resultCount: searchOptions.matchedResultCount, selectedIndex: searchOptions.activeMatchIndex, children: props.headerButtons
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "tree-widget-tree-with-header", children: [(0, jsx_runtime_1.jsx)(TreeHeader_1.TreeHeader, { onFilterClear: searchOptions.onFilterCancel, onFilterStart: searchOptions.onFilterStart, onSelectedChanged: searchOptions.onResultSelectedChanged, resultCount: searchOptions.matchedResultCount, selectedIndex: searchOptions.activeMatchIndex, density: props.density, children: props.headerButtons
                     ? props.headerButtons.map((btn, index) => (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: btn({ viewport, models: availableModels }) }, index))
                     : [
-                        (0, jsx_runtime_1.jsx)(ShowAllButton, { viewport: viewport, models: availableModels }, "show-all-btn"),
-                        (0, jsx_runtime_1.jsx)(HideAllButton, { viewport: viewport, models: availableModels }, "hide-all-btn"),
-                        (0, jsx_runtime_1.jsx)(InvertButton, { viewport: viewport, models: availableModels }, "invert-all-btn"),
-                        (0, jsx_runtime_1.jsx)(View2DButton, { viewport: viewport, models: availableModels }, "view-2d-btn"),
-                        (0, jsx_runtime_1.jsx)(View3DButton, { viewport: viewport, models: availableModels }, "view-3d-btn"),
-                    ] }), (0, jsx_runtime_1.jsx)("div", { className: "tree-widget-tree-content", children: (0, jsx_runtime_1.jsx)(AutoSizer_1.AutoSizer, { children: ({ width, height }) => ((0, jsx_runtime_1.jsx)(ModelsTree_1.ModelsTree, { ...props, iModel: iModel, activeView: viewport, width: width, height: height, filterInfo: filterInfo, onFilterApplied: onFilterApplied })) }) })] }));
+                        (0, jsx_runtime_1.jsx)(ShowAllButton, { viewport: viewport, models: availableModels, density: props.density }, "show-all-btn"),
+                        (0, jsx_runtime_1.jsx)(HideAllButton, { viewport: viewport, models: availableModels, density: props.density }, "hide-all-btn"),
+                        (0, jsx_runtime_1.jsx)(InvertButton, { viewport: viewport, models: availableModels, density: props.density }, "invert-all-btn"),
+                        (0, jsx_runtime_1.jsx)(View2DButton, { viewport: viewport, models: availableModels, density: props.density }, "view-2d-btn"),
+                        (0, jsx_runtime_1.jsx)(View3DButton, { viewport: viewport, models: availableModels, density: props.density }, "view-3d-btn"),
+                    ] }), (0, jsx_runtime_1.jsx)("div", { className: contentClassName, children: (0, jsx_runtime_1.jsx)(AutoSizer_1.AutoSizer, { children: ({ width, height }) => ((0, jsx_runtime_1.jsx)(ModelsTree_1.ModelsTree, { ...props, iModel: iModel, activeView: viewport, width: width, height: height, filterInfo: filterInfo, onFilterApplied: onFilterApplied })) }) })] }));
 }
 function ShowAllButton(props) {
-    return ((0, jsx_runtime_1.jsx)(itwinui_react_1.IconButton, { size: "small", styleType: "borderless", title: TreeWidget_1.TreeWidget.translate("showAll"), onClick: () => void (0, ModelsVisibilityHandler_1.showAllModels)(props.models.map((model) => model.id), props.viewport), children: (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgVisibilityShow, {}) }));
+    return ((0, jsx_runtime_1.jsx)(itwinui_react_1.IconButton, { size: props.density === "enlarged" ? "large" : "small", styleType: "borderless", title: TreeWidget_1.TreeWidget.translate("showAll"), onClick: () => void (0, ModelsVisibilityHandler_1.showAllModels)(props.models.map((model) => model.id), props.viewport), children: (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgVisibilityShow, {}) }));
 }
 function HideAllButton(props) {
-    return ((0, jsx_runtime_1.jsx)(itwinui_react_1.IconButton, { size: "small", styleType: "borderless", title: TreeWidget_1.TreeWidget.translate("hideAll"), onClick: () => void (0, ModelsVisibilityHandler_1.hideAllModels)(props.models.map((model) => model.id), props.viewport), children: (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgVisibilityHide, {}) }));
+    return ((0, jsx_runtime_1.jsx)(itwinui_react_1.IconButton, { size: props.density === "enlarged" ? "large" : "small", styleType: "borderless", title: TreeWidget_1.TreeWidget.translate("hideAll"), onClick: () => void (0, ModelsVisibilityHandler_1.hideAllModels)(props.models.map((model) => model.id), props.viewport), children: (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgVisibilityHide, {}) }));
 }
 function InvertButton(props) {
-    return ((0, jsx_runtime_1.jsx)(itwinui_react_1.IconButton, { size: "small", styleType: "borderless", title: TreeWidget_1.TreeWidget.translate("invert"), onClick: () => void (0, ModelsVisibilityHandler_1.invertAllModels)(props.models.map((model) => model.id), props.viewport), children: (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgVisibilityHalf, {}) }));
+    return ((0, jsx_runtime_1.jsx)(itwinui_react_1.IconButton, { size: props.density === "enlarged" ? "large" : "small", styleType: "borderless", title: TreeWidget_1.TreeWidget.translate("invert"), onClick: () => void (0, ModelsVisibilityHandler_1.invertAllModels)(props.models.map((model) => model.id), props.viewport), children: (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgVisibilityHalf, {}) }));
 }
 function View2DButton(props) {
     const models2d = (0, react_1.useMemo)(() => {
@@ -109,7 +114,7 @@ function View2DButton(props) {
         setIs2dToggleActive((0, ModelsVisibilityHandler_1.areAllModelsVisible)(models2d, props.viewport));
         return props.viewport.onViewedModelsChanged.addListener((vp) => setIs2dToggleActive((0, ModelsVisibilityHandler_1.areAllModelsVisible)(models2d, vp)));
     }, [models2d, props.viewport]);
-    return ((0, jsx_runtime_1.jsx)(itwinui_react_1.Button, { size: "small", styleType: "borderless", title: TreeWidget_1.TreeWidget.translate("toggle2DViews"), onClick: () => void (0, ModelsVisibilityHandler_1.toggleModels)(models2d, is2dToggleActive, props.viewport), disabled: models2d.length === 0, endIcon: is2dToggleActive ? (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgVisibilityShow, {}) : (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgVisibilityHide, {}), children: TreeWidget_1.TreeWidget.translate("label2D") }));
+    return ((0, jsx_runtime_1.jsx)(itwinui_react_1.Button, { size: props.density === "enlarged" ? "large" : "small", styleType: "borderless", title: TreeWidget_1.TreeWidget.translate("toggle2DViews"), onClick: () => void (0, ModelsVisibilityHandler_1.toggleModels)(models2d, is2dToggleActive, props.viewport), disabled: models2d.length === 0, endIcon: is2dToggleActive ? (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgVisibilityShow, {}) : (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgVisibilityHide, {}), children: TreeWidget_1.TreeWidget.translate("label2D") }));
 }
 function View3DButton(props) {
     const models3d = (0, react_1.useMemo)(() => {
@@ -120,6 +125,6 @@ function View3DButton(props) {
         setIs3dToggleActive((0, ModelsVisibilityHandler_1.areAllModelsVisible)(models3d, props.viewport));
         return props.viewport.onViewedModelsChanged.addListener((vp) => setIs3dToggleActive((0, ModelsVisibilityHandler_1.areAllModelsVisible)(models3d, vp)));
     }, [models3d, props.viewport]);
-    return ((0, jsx_runtime_1.jsx)(itwinui_react_1.Button, { size: "small", styleType: "borderless", title: TreeWidget_1.TreeWidget.translate("toggle3DViews"), onClick: () => void (0, ModelsVisibilityHandler_1.toggleModels)(models3d, is3dToggleActive, props.viewport), disabled: models3d.length === 0, endIcon: is3dToggleActive ? (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgVisibilityShow, {}) : (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgVisibilityHide, {}), children: TreeWidget_1.TreeWidget.translate("label3D") }));
+    return ((0, jsx_runtime_1.jsx)(itwinui_react_1.Button, { size: props.density === "enlarged" ? "large" : "small", styleType: "borderless", title: TreeWidget_1.TreeWidget.translate("toggle3DViews"), onClick: () => void (0, ModelsVisibilityHandler_1.toggleModels)(models3d, is3dToggleActive, props.viewport), disabled: models3d.length === 0, endIcon: is3dToggleActive ? (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgVisibilityShow, {}) : (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgVisibilityHide, {}), children: TreeWidget_1.TreeWidget.translate("label3D") }));
 }
 //# sourceMappingURL=ModelsTreeComponent.js.map

package/lib/cjs/components/trees/models-tree/ModelsTreeComponent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ModelsTreeComponent.js","sourceRoot":"","sources":["../../../../../src/components/trees/models-tree/ModelsTreeComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n --------------------------------------------------------------------------------------------/\n\nimport \"../VisibilityTreeBase.scss\";\nimport { Fragment, useEffect, useMemo, useState } from \"react\";\nimport { useActiveIModelConnection, useActiveViewport } from \"@itwin/appui-react\";\nimport { SvgVisibilityHalf, SvgVisibilityHide, SvgVisibilityShow } from \"@itwin/itwinui-icons-react\";\nimport { Button, IconButton } from \"@itwin/itwinui-react\";\nimport { TreeWidget } from \"../../../TreeWidget\";\nimport { TreeHeader } from \"../../tree-header/TreeHeader\";\nimport { useTreeFilteringState } from \"../../TreeFilteringState\";\nimport { AutoSizer } from \"../../utils/AutoSizer\";\nimport { ModelsTree } from \"./ModelsTree\";\nimport { areAllModelsVisible, hideAllModels, invertAllModels, showAllModels, toggleModels } from \"./ModelsVisibilityHandler\";\nimport { queryModelsForHeaderActions } from \"./Utils\";\n\nimport type { IModelConnection, ScreenViewport, Viewport } from \"@itwin/core-frontend\";\nimport type { TreeHeaderButtonProps } from \"../../tree-header/TreeHeader\";\nimport type { ModelsTreeProps } from \"./ModelsTree\";\n/*\n Information about a single Model.\n * @public\n /\nexport interface ModelInfo {\n id: string;\n isPlanProjection?: boolean;\n}\n\n/\n Props that get passed to [[ModelsTreeComponent]] header button renderer.\n * @see ModelTreeComponentProps.headerButtons\n * @public\n /\nexport interface ModelsTreeHeaderButtonProps extends TreeHeaderButtonProps {\n /* A list of models available in the iModel. /\n models: ModelInfo[];\n}\n\n/\n Props for [[ModelsTreeComponent]].\n * @public\n /\nexport interface ModelTreeComponentProps extends Omit<ModelsTreeProps, \"iModel\" \| \"activeView\" \| \"width\" \| \"height\" \| \"filterInfo\" \| \"onFilterApplied\"> {\n /\n Renderers of header buttons. Defaults to:\n * ```ts\n * [\n * ModelsTreeComponent.ShowAllButton,\n * ModelsTreeComponent.HideAllButton,\n * ModelsTreeComponent.InvertButton,\n * ModelsTreeComponent.View2DButton,\n * ModelsTreeComponent.View3DButton,\n * ]\n * ```\n /\n headerButtons?: Array<(props: ModelsTreeHeaderButtonProps) => React.ReactNode>;\n}\n\n/\n A component that renders [[ModelsTree]] and a header with filtering capabilities\n * and header buttons.\n * @public\n /\nexport const ModelsTreeComponent = (props: ModelTreeComponentProps) => {\n const iModel = useActiveIModelConnection();\n const viewport = useActiveViewport();\n\n if (!iModel \|\| !viewport) {\n return null;\n }\n\n return <ModelsTreeComponentImpl {...props} iModel={iModel} viewport={viewport} />;\n};\n\n/\n Renders a \"Show all\" button that enables display of all models.\n * @public\n /\nModelsTreeComponent.ShowAllButton = ShowAllButton;\n\n/\n Renders a \"Hide all\" button that disables display of all models.\n * @public\n /\nModelsTreeComponent.HideAllButton = HideAllButton;\n\n/\n Renders an \"Invert all\" button that inverts display of all models.\n * @public\n /\nModelsTreeComponent.InvertButton = InvertButton;\n\n/\n Renders a \"View 2D\" button that enables display of all plan projection models and disables all others.\n * @public\n /\nModelsTreeComponent.View2DButton = View2DButton;\n\n/\n Renders a \"View 3D\" button that enables display of all non-plan projection models and disables all plan projection ones.\n * @public\n /\nModelsTreeComponent.View3DButton = View3DButton;\n\n/\n Id of the component. May be used when a creating a [[TreeDefinition]] for [[SelectableTree]].\n * @public\n /\nModelsTreeComponent.id = \"models-tree\";\n\n/\n Label of the component. May be used when a creating a [[TreeDefinition]] for [[SelectableTree]].\n * @public\n */\nModelsTreeComponent.getLabel = () => TreeWidget.translate(\"models\");\n\nfunction ModelsTreeComponentImpl(props: ModelTreeComponentProps & { iModel: IModelConnection; viewport: ScreenViewport }) {\n const [availableModels, setAvailableModels] = useState<ModelInfo[]>([]);\n\n const { viewport, iModel } = props;\n\n const { searchOptions, filterString, onFilterApplied } = useTreeFilteringState();\n\n useEffect(() => {\n queryModelsForHeaderActions(iModel)\n .then((modelInfos: ModelInfo[]) => {\n setAvailableModels(modelInfos);\n })\n .catch((_e) => {\n setAvailableModels([]);\n });\n }, [iModel]);\n\n const filterInfo = useMemo(\n () => ({ filter: filterString, activeMatchIndex: searchOptions.activeMatchIndex }),\n [filterString, searchOptions.activeMatchIndex],\n );\n\n return (\n <div className=\"tree-widget-tree-with-header\">\n <TreeHeader\n onFilterClear={searchOptions.onFilterCancel}\n onFilterStart={searchOptions.onFilterStart}\n onSelectedChanged={searchOptions.onResultSelectedChanged}\n resultCount={searchOptions.matchedResultCount}\n selectedIndex={searchOptions.activeMatchIndex}\n >\n {props.headerButtons\n ? props.headerButtons.map((btn, index) => <Fragment key={index}>{btn({ viewport, models: availableModels })}</Fragment>)\n : [\n <ShowAllButton viewport={viewport} models={availableModels} key=\"show-all-btn\" />,\n <HideAllButton viewport={viewport} models={availableModels} key=\"hide-all-btn\" />,\n <InvertButton viewport={viewport} models={availableModels} key=\"invert-all-btn\" />,\n <View2DButton viewport={viewport} models={availableModels} key=\"view-2d-btn\" />,\n <View3DButton viewport={viewport} models={availableModels} key=\"view-3d-btn\" />,\n ]}\n </TreeHeader>\n <div className=\"tree-widget-tree-content\">\n <AutoSizer>\n {({ width, height }) => (\n <ModelsTree\n {...props}\n iModel={iModel}\n activeView={viewport}\n width={width}\n height={height}\n filterInfo={filterInfo}\n onFilterApplied={onFilterApplied}\n />\n )}\n </AutoSizer>\n </div>\n </div>\n );\n}\n\nfunction ShowAllButton(props: ModelsTreeHeaderButtonProps) {\n return (\n <IconButton\n size=\"small\"\n styleType=\"borderless\"\n title={TreeWidget.translate(\"showAll\")}\n onClick={() =>\n void showAllModels(\n props.models.map((model) => model.id),\n props.viewport,\n )\n }\n >\n <SvgVisibilityShow />\n </IconButton>\n );\n}\n\nfunction HideAllButton(props: ModelsTreeHeaderButtonProps) {\n return (\n <IconButton\n size=\"small\"\n styleType=\"borderless\"\n title={TreeWidget.translate(\"hideAll\")}\n onClick={() =>\n void hideAllModels(\n props.models.map((model) => model.id),\n props.viewport,\n )\n }\n >\n <SvgVisibilityHide />\n </IconButton>\n );\n}\n\nfunction InvertButton(props: ModelsTreeHeaderButtonProps) {\n return (\n <IconButton\n size=\"small\"\n styleType=\"borderless\"\n title={TreeWidget.translate(\"invert\")}\n onClick={() =>\n void invertAllModels(\n props.models.map((model) => model.id),\n props.viewport,\n )\n }\n >\n <SvgVisibilityHalf />\n </IconButton>\n );\n}\n\nfunction View2DButton(props: ModelsTreeHeaderButtonProps) {\n const models2d = useMemo(() => {\n return props.models.filter((model) => model.isPlanProjection).map((model) => model.id);\n }, [props.models]);\n\n const [is2dToggleActive, setIs2dToggleActive] = useState(false);\n\n useEffect(() => {\n setIs2dToggleActive(areAllModelsVisible(models2d, props.viewport));\n return props.viewport.onViewedModelsChanged.addListener((vp: Viewport) => setIs2dToggleActive(areAllModelsVisible(models2d, vp)));\n }, [models2d, props.viewport]);\n\n return (\n <Button\n size=\"small\"\n styleType=\"borderless\"\n title={TreeWidget.translate(\"toggle2DViews\")}\n onClick={() => void toggleModels(models2d, is2dToggleActive, props.viewport)}\n disabled={models2d.length === 0}\n endIcon={is2dToggleActive ? <SvgVisibilityShow /> : <SvgVisibilityHide />}\n >\n {TreeWidget.translate(\"label2D\")}\n </Button>\n );\n}\n\nfunction View3DButton(props: ModelsTreeHeaderButtonProps) {\n const models3d = useMemo(() => {\n return props.models.filter((model) => !model.isPlanProjection).map((model) => model.id);\n }, [props.models]);\n\n const [is3dToggleActive, setIs3dToggleActive] = useState(false);\n\n useEffect(() => {\n setIs3dToggleActive(areAllModelsVisible(models3d, props.viewport));\n return props.viewport.onViewedModelsChanged.addListener((vp: Viewport) => setIs3dToggleActive(areAllModelsVisible(models3d, vp)));\n }, [models3d, props.viewport]);\n\n return (\n <Button\n size=\"small\"\n styleType=\"borderless\"\n title={TreeWidget.translate(\"toggle3DViews\")}\n onClick={() => void toggleModels(models3d, is3dToggleActive, props.viewport)}\n disabled={models3d.length === 0}\n endIcon={is3dToggleActive ? <SvgVisibilityShow /> : <SvgVisibilityHide />}\n >\n {TreeWidget.translate(\"label3D\")}\n </Button>\n );\n}\n"]}
1	+ {"version":3,"file":"ModelsTreeComponent.js","sourceRoot":"","sources":["../../../../../src/components/trees/models-tree/ModelsTreeComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n --------------------------------------------------------------------------------------------/\n\nimport \"../VisibilityTreeBase.scss\";\nimport { Fragment, useEffect, useMemo, useState } from \"react\";\nimport { useActiveIModelConnection, useActiveViewport } from \"@itwin/appui-react\";\nimport { SvgVisibilityHalf, SvgVisibilityHide, SvgVisibilityShow } from \"@itwin/itwinui-icons-react\";\nimport { Button, IconButton } from \"@itwin/itwinui-react\";\nimport { TreeWidget } from \"../../../TreeWidget\";\nimport { TreeHeader } from \"../../tree-header/TreeHeader\";\nimport { useTreeFilteringState } from \"../../TreeFilteringState\";\nimport { AutoSizer } from \"../../utils/AutoSizer\";\nimport { ModelsTree } from \"./ModelsTree\";\nimport { areAllModelsVisible, hideAllModels, invertAllModels, showAllModels, toggleModels } from \"./ModelsVisibilityHandler\";\nimport { queryModelsForHeaderActions } from \"./Utils\";\n\nimport type { IModelConnection, ScreenViewport, Viewport } from \"@itwin/core-frontend\";\nimport type { TreeHeaderButtonProps } from \"../../tree-header/TreeHeader\";\nimport type { ModelsTreeProps } from \"./ModelsTree\";\nimport classNames from \"classnames\";\n/*\n Information about a single Model.\n * @public\n /\nexport interface ModelInfo {\n id: string;\n isPlanProjection?: boolean;\n}\n\n/\n Props that get passed to [[ModelsTreeComponent]] header button renderer.\n * @see ModelTreeComponentProps.headerButtons\n * @public\n /\nexport interface ModelsTreeHeaderButtonProps extends TreeHeaderButtonProps {\n /* A list of models available in the iModel. /\n models: ModelInfo[];\n}\n\n/\n Props for [[ModelsTreeComponent]].\n * @public\n /\nexport interface ModelTreeComponentProps extends Omit<ModelsTreeProps, \"iModel\" \| \"activeView\" \| \"width\" \| \"height\" \| \"filterInfo\" \| \"onFilterApplied\"> {\n /\n Renderers of header buttons. Defaults to:\n * ```ts\n * [\n * ModelsTreeComponent.ShowAllButton,\n * ModelsTreeComponent.HideAllButton,\n * ModelsTreeComponent.InvertButton,\n * ModelsTreeComponent.View2DButton,\n * ModelsTreeComponent.View3DButton,\n * ]\n * ```\n /\n headerButtons?: Array<(props: ModelsTreeHeaderButtonProps) => React.ReactNode>;\n}\n\n/\n A component that renders [[ModelsTree]] and a header with filtering capabilities\n * and header buttons.\n * @public\n /\nexport const ModelsTreeComponent = (props: ModelTreeComponentProps) => {\n const iModel = useActiveIModelConnection();\n const viewport = useActiveViewport();\n\n if (!iModel \|\| !viewport) {\n return null;\n }\n\n return <ModelsTreeComponentImpl {...props} iModel={iModel} viewport={viewport} />;\n};\n\n/\n Renders a \"Show all\" button that enables display of all models.\n * @public\n /\nModelsTreeComponent.ShowAllButton = ShowAllButton;\n\n/\n Renders a \"Hide all\" button that disables display of all models.\n * @public\n /\nModelsTreeComponent.HideAllButton = HideAllButton;\n\n/\n Renders an \"Invert all\" button that inverts display of all models.\n * @public\n /\nModelsTreeComponent.InvertButton = InvertButton;\n\n/\n Renders a \"View 2D\" button that enables display of all plan projection models and disables all others.\n * @public\n /\nModelsTreeComponent.View2DButton = View2DButton;\n\n/\n Renders a \"View 3D\" button that enables display of all non-plan projection models and disables all plan projection ones.\n * @public\n /\nModelsTreeComponent.View3DButton = View3DButton;\n\n/\n Id of the component. May be used when a creating a [[TreeDefinition]] for [[SelectableTree]].\n * @public\n /\nModelsTreeComponent.id = \"models-tree\";\n\n/\n Label of the component. May be used when a creating a [[TreeDefinition]] for [[SelectableTree]].\n * @public\n */\nModelsTreeComponent.getLabel = () => TreeWidget.translate(\"models\");\n\nfunction ModelsTreeComponentImpl(props: ModelTreeComponentProps & { iModel: IModelConnection; viewport: ScreenViewport }) {\n const [availableModels, setAvailableModels] = useState<ModelInfo[]>([]);\n const { viewport, iModel } = props;\n const { searchOptions, filterString, onFilterApplied } = useTreeFilteringState();\n const contentClassName = classNames(\"tree-widget-tree-content\", props.density === \"enlarged\" && \"enlarge\");\n\n useEffect(() => {\n queryModelsForHeaderActions(iModel)\n .then((modelInfos: ModelInfo[]) => {\n setAvailableModels(modelInfos);\n })\n .catch((_e) => {\n setAvailableModels([]);\n });\n }, [iModel]);\n\n const filterInfo = useMemo(\n () => ({ filter: filterString, activeMatchIndex: searchOptions.activeMatchIndex }),\n [filterString, searchOptions.activeMatchIndex],\n );\n\n return (\n <div className=\"tree-widget-tree-with-header\">\n <TreeHeader\n onFilterClear={searchOptions.onFilterCancel}\n onFilterStart={searchOptions.onFilterStart}\n onSelectedChanged={searchOptions.onResultSelectedChanged}\n resultCount={searchOptions.matchedResultCount}\n selectedIndex={searchOptions.activeMatchIndex}\n density={props.density}\n >\n {props.headerButtons\n ? props.headerButtons.map((btn, index) => <Fragment key={index}>{btn({ viewport, models: availableModels })}</Fragment>)\n : [\n <ShowAllButton viewport={viewport} models={availableModels} key=\"show-all-btn\" density={props.density} />,\n <HideAllButton viewport={viewport} models={availableModels} key=\"hide-all-btn\" density={props.density} />,\n <InvertButton viewport={viewport} models={availableModels} key=\"invert-all-btn\" density={props.density} />,\n <View2DButton viewport={viewport} models={availableModels} key=\"view-2d-btn\" density={props.density} />,\n <View3DButton viewport={viewport} models={availableModels} key=\"view-3d-btn\" density={props.density} />,\n ]}\n </TreeHeader>\n <div className={contentClassName}>\n <AutoSizer>\n {({ width, height }) => (\n <ModelsTree\n {...props}\n iModel={iModel}\n activeView={viewport}\n width={width}\n height={height}\n filterInfo={filterInfo}\n onFilterApplied={onFilterApplied}\n />\n )}\n </AutoSizer>\n </div>\n </div>\n );\n}\n\nfunction ShowAllButton(props: ModelsTreeHeaderButtonProps) {\n return (\n <IconButton\n size={props.density === \"enlarged\" ? \"large\" : \"small\"}\n styleType=\"borderless\"\n title={TreeWidget.translate(\"showAll\")}\n onClick={() =>\n void showAllModels(\n props.models.map((model) => model.id),\n props.viewport,\n )\n }\n >\n <SvgVisibilityShow />\n </IconButton>\n );\n}\n\nfunction HideAllButton(props: ModelsTreeHeaderButtonProps) {\n return (\n <IconButton\n size={props.density === \"enlarged\" ? \"large\" : \"small\"}\n styleType=\"borderless\"\n title={TreeWidget.translate(\"hideAll\")}\n onClick={() =>\n void hideAllModels(\n props.models.map((model) => model.id),\n props.viewport,\n )\n }\n >\n <SvgVisibilityHide />\n </IconButton>\n );\n}\n\nfunction InvertButton(props: ModelsTreeHeaderButtonProps) {\n return (\n <IconButton\n size={props.density === \"enlarged\" ? \"large\" : \"small\"}\n styleType=\"borderless\"\n title={TreeWidget.translate(\"invert\")}\n onClick={() =>\n void invertAllModels(\n props.models.map((model) => model.id),\n props.viewport,\n )\n }\n >\n <SvgVisibilityHalf />\n </IconButton>\n );\n}\n\nfunction View2DButton(props: ModelsTreeHeaderButtonProps) {\n const models2d = useMemo(() => {\n return props.models.filter((model) => model.isPlanProjection).map((model) => model.id);\n }, [props.models]);\n\n const [is2dToggleActive, setIs2dToggleActive] = useState(false);\n\n useEffect(() => {\n setIs2dToggleActive(areAllModelsVisible(models2d, props.viewport));\n return props.viewport.onViewedModelsChanged.addListener((vp: Viewport) => setIs2dToggleActive(areAllModelsVisible(models2d, vp)));\n }, [models2d, props.viewport]);\n\n return (\n <Button\n size={props.density === \"enlarged\" ? \"large\" : \"small\"}\n styleType=\"borderless\"\n title={TreeWidget.translate(\"toggle2DViews\")}\n onClick={() => void toggleModels(models2d, is2dToggleActive, props.viewport)}\n disabled={models2d.length === 0}\n endIcon={is2dToggleActive ? <SvgVisibilityShow /> : <SvgVisibilityHide />}\n >\n {TreeWidget.translate(\"label2D\")}\n </Button>\n );\n}\n\nfunction View3DButton(props: ModelsTreeHeaderButtonProps) {\n const models3d = useMemo(() => {\n return props.models.filter((model) => !model.isPlanProjection).map((model) => model.id);\n }, [props.models]);\n\n const [is3dToggleActive, setIs3dToggleActive] = useState(false);\n\n useEffect(() => {\n setIs3dToggleActive(areAllModelsVisible(models3d, props.viewport));\n return props.viewport.onViewedModelsChanged.addListener((vp: Viewport) => setIs3dToggleActive(areAllModelsVisible(models3d, vp)));\n }, [models3d, props.viewport]);\n\n return (\n <Button\n size={props.density === \"enlarged\" ? \"large\" : \"small\"}\n styleType=\"borderless\"\n title={TreeWidget.translate(\"toggle3DViews\")}\n onClick={() => void toggleModels(models3d, is3dToggleActive, props.viewport)}\n disabled={models3d.length === 0}\n endIcon={is3dToggleActive ? <SvgVisibilityShow /> : <SvgVisibilityHide />}\n >\n {TreeWidget.translate(\"label3D\")}\n </Button>\n );\n}\n"]}

package/lib/esm/components/SelectableTree.d.ts CHANGED Viewed

@@ -1,6 +1,13 @@
 /// <reference types="react" />
 import "./SelectableTree.scss";
 import type { IModelConnection } from "@itwin/core-frontend";
+/**
+ * Props for rendering trees
+ * @public
+ */
+export interface TreeRenderProps {
+    density?: "enlarged" | "default";
+}
 /**
  * Definition of a tree component displayed in [[SelectableTree]]
  * @public
@@ -11,7 +18,7 @@ export interface TreeDefinition {
     /** Callback that is used to get tree label */
     getLabel: () => string;
     /** Callback that is used to render tree component */
-    render: () => React.ReactNode;
+    render: (props: TreeRenderProps) => React.ReactNode;
     /**
      * Callback that is used to determine if tree should be shown for current active iModel connection.
      * If callback is `undefined` tree is shown for all iModel connections.
@@ -24,6 +31,7 @@ export interface TreeDefinition {
  */
 export interface SelectableTreeProps {
     trees: TreeDefinition[];
+    density?: "enlarged" | "default";
 }
 /**
  * A component that renders a tree (combo box) selector and the selected tree component.

package/lib/esm/components/SelectableTree.js CHANGED Viewed

@@ -6,10 +6,10 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import "./SelectableTree.scss";
 import { useEffect, useState } from "react";
 import { useActiveIModelConnection } from "@itwin/appui-react";
-import { SelectableContent } from "@itwin/components-react";
 import { FillCentered } from "@itwin/core-react";
 import { ProgressLinear } from "@itwin/itwinui-react";
 import { TreeWidget } from "../TreeWidget";
+import { TreeSelector } from "./TreeSelector";
 /**
  * A component that renders a tree (combo box) selector and the selected tree component.
  * @public
@@ -24,7 +24,7 @@ export function SelectableTree(props) {
 function SelectableTreeContent(props) {
     const { trees: treeDefinitions, imodel } = props;
     const trees = useActiveTrees(treeDefinitions, imodel);
-    return (_jsx("div", { className: "tree-widget-selectable-tree", children: _jsx(SelectableContent, { ...getSelectableContentProps(trees) }) }));
+    return (_jsx("div", { className: "tree-widget-selectable-tree", children: _jsx(TreeSelector, { ...getTreeSelectorProps(trees), density: props.density }) }));
 }
 function useActiveTrees(treeDefinitions, imodel) {
     const [trees, setTrees] = useState();
@@ -56,11 +56,11 @@ async function getActiveTrees(treeDefinitions, imodel) {
     };
     return (await Promise.all(treeDefinitions.map(handleDefinition))).filter((tree) => tree !== undefined);
 }
-function getSelectableContentProps(trees) {
+function getTreeSelectorProps(trees) {
     if (trees === undefined) {
         return {
             defaultSelectedContentId: "loading",
-            children: [
+            trees: [
                 {
                     id: "loading",
                     label: "",
@@ -72,7 +72,7 @@ function getSelectableContentProps(trees) {
     if (trees.length === 0) {
         return {
             defaultSelectedContentId: "no-trees",
-            children: [
+            trees: [
                 {
                     id: "no-trees",
                     label: "",
@@ -83,7 +83,7 @@ function getSelectableContentProps(trees) {
     }
     return {
         defaultSelectedContentId: trees[0].id,
-        children: trees,
+        trees,
     };
 }
 function Delayed({ delay = 200, children }) {

package/lib/esm/components/SelectableTree.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectableTree.js","sourceRoot":"","sources":["../../../src/components/SelectableTree.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,~~iBAAiB~~,EAAE,MAAM,~~yBAAyB~~,CAAC;~~AAC5D~~,OAAO,EAAE,~~YAAY~~,EAAE,MAAM,~~mBAAmB~~,CAAC;~~AACjD~~,OAAO,EAAE,~~cAAc~~,EAAE,MAAM,~~sBAAsB~~,CAAC;~~AACtD~~,OAAO,EAAE,~~UAAU~~,EAAE,MAAM,~~eAAe~~,CAAC;~~AAgC3C~~;;;GAGG;AACH,MAAM,UAAU,cAAc,CAAC,KAA0B;IACvD,MAAM,MAAM,GAAG,yBAAyB,EAAE,CAAC;IAE3C,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,IAAI,CAAC;KACb;IAED,OAAO,KAAC,qBAAqB,OAAK,KAAK,EAAE,MAAM,EAAE,MAAM,GAAI,CAAC;AAC9D,CAAC;AAED,SAAS,qBAAqB,CAAC,KAAyD;IACtF,MAAM,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACjD,MAAM,KAAK,GAAG,cAAc,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;IAEtD,OAAO,CACL,cAAK,SAAS,EAAC,6BAA6B,YAC1C,KAAC,~~iBAAiB~~,OAAK,~~yBAAyB~~,CAAC,KAAK,CAAC,GAAI,~~GACvD~~,CACP,CAAC;AACJ,CAAC;AAED,SAAS,cAAc,CAAC,eAAiC,EAAE,MAAwB;IACjF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,~~EAAiC~~,CAAC;~~IAEpE~~,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ,GAAG,KAAK,CAAC;QACrB,KAAK,CAAC,KAAK,IAAI,EAAE;YACf,MAAM,YAAY,GAAG,MAAM,cAAc,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;YACnE,uBAAuB;YACvB,IAAI,CAAC,QAAQ,EAAE;gBACb,QAAQ,CAAC,YAAY,CAAC,CAAC;aACxB;QACH,CAAC,CAAC,EAAE,CAAC;QAEL,OAAO,GAAG,EAAE;YACV,QAAQ,GAAG,IAAI,CAAC;QAClB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC;IAE9B,OAAO,KAAK,CAAC;AACf,CAAC;AAED,KAAK,UAAU,cAAc,CAAC,eAAiC,EAAE,MAAwB;IACvF,MAAM,gBAAgB,GAAG,KAAK,EAAE,OAAuB,EAAE,EAAE;QACzD,IAAI,OAAO,CAAC,UAAU,KAAK,SAAS,IAAI,CAAC,CAAC,MAAM,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE;YAC3E,OAAO,SAAS,CAAC;SAClB;QACD,OAAO;YACL,EAAE,EAAE,OAAO,CAAC,EAAE;YACd,KAAK,EAAE,OAAO,CAAC,QAAQ,EAAE;YACzB,MAAM,EAAE,OAAO,CAAC,MAAM;SACvB,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CAAC,MAAM,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,SAAS,~~CAAkC~~,CAAC;~~AAC1I~~,CAAC;AAED,SAAS,~~yBAAyB~~,CAAC,~~KAAqC~~;~~IACtE~~,IAAI,KAAK,KAAK,SAAS,EAAE;QACvB,OAAO;YACL,wBAAwB,EAAE,SAAS;YACnC,~~QAAQ~~,EAAE;~~gBACR~~;oBACE,EAAE,EAAE,SAAS;oBACb,KAAK,EAAE,EAAE;oBACT,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,KAAC,OAAO,cACN,KAAC,cAAc,IAAC,aAAa,EAAE,IAAI,GAAI,GAC/B,CACX;iBACF;aACF;SACF,CAAC;KACH;IAED,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QACtB,OAAO;YACL,wBAAwB,EAAE,UAAU;YACpC,~~QAAQ~~,EAAE;~~gBACR~~;oBACE,EAAE,EAAE,UAAU;oBACd,KAAK,EAAE,EAAE;oBACT,MAAM,EAAE,GAAG,EAAE,CAAC,KAAC,YAAY,cAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,GAAgB;iBAC7E;aACF;SACF,CAAC;KACH;IAED,OAAO;QACL,wBAAwB,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE;QACrC,~~QAAQ,EAAE,~~KAAK;~~KAChB~~,CAAC;AACJ,CAAC;AAED,SAAS,OAAO,CAAC,EAAE,KAAK,GAAG,GAAG,EAAE,QAAQ,EAAyC;IAC/E,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAG,UAAU,CAAC,GAAG,EAAE;YACzB,OAAO,CAAC,IAAI,CAAC,CAAC;QAChB,CAAC,EAAE,KAAK,CAAC,CAAC;QACV,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,EAAE,CAAC,CAAC;QACnB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,IAAI,CAAC;KACb;IAED,OAAO,4BAAG,QAAQ,GAAI,CAAC;AACzB,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.scss\";\nimport { useEffect, useState } from \"react\";\nimport { useActiveIModelConnection } from \"@itwin/appui-react\";\nimport { ~~SelectableContent } from \"@itwin/components-react\";\nimport {~~ FillCentered } from \"@itwin/core-react\";\nimport { ProgressLinear } from \"@itwin/itwinui-react\";\nimport { TreeWidget } from \"../TreeWidget\";\n\nimport type { PropsWithChildren } from \"react\";\nimport type { ~~SelectableContentDefinition,~~ ~~SelectableContentProps~~ } from \"@itwin/~~components~~-~~react~~\";\nimport type { ~~IModelConnection~~ } from \"@~~itwin/core-frontend~~\";\n\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: () => 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\n/\n Props for [[SelectableTree]]\n * @public\n /\nexport interface SelectableTreeProps {\n trees: TreeDefinition[];\n}\n\n/\n A component that renders a tree (combo box) selector and the selected tree component.\n * @public\n */\nexport function SelectableTree(props: SelectableTreeProps) {\n const imodel = useActiveIModelConnection();\n\n if (!imodel) {\n return null;\n }\n\n return <SelectableTreeContent {...props} imodel={imodel} />;\n}\n\nfunction SelectableTreeContent(props: SelectableTreeProps & { imodel: IModelConnection }) {\n const { trees: treeDefinitions, imodel } = props;\n const trees = useActiveTrees(treeDefinitions, imodel);\n\n return (\n <div className=\"tree-widget-selectable-tree\">\n <~~SelectableContent~~ {...~~getSelectableContentProps~~(trees)} />\n </div>\n );\n}\n\nfunction useActiveTrees(treeDefinitions: TreeDefinition[], imodel: IModelConnection) {\n const [trees, setTrees] = useState<~~SelectableContentDefinition~~[]>();\n\n useEffect(() => {\n let disposed = false;\n void (async () => {\n const visibleTrees = await getActiveTrees(treeDefinitions, imodel);\n // istanbul ignore else\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<~~SelectableContentDefinition~~[]> {\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 };\n };\n\n return (await Promise.all(treeDefinitions.map(handleDefinition))).filter((tree) => tree !== undefined) as ~~SelectableContentDefinition~~[];\n}\n\nfunction ~~getSelectableContentProps~~(trees?: ~~SelectableContentDefinition~~[]): ~~SelectableContentProps~~ {\n if (trees === undefined) {\n return {\n defaultSelectedContentId: \"loading\",\n ~~children~~: [\n {\n id: \"loading\",\n label: \"\",\n render: () => (\n <Delayed>\n <ProgressLinear indeterminate={true} />\n </Delayed>\n ),\n },\n ],\n };\n }\n\n if (trees.length === 0) {\n return {\n defaultSelectedContentId: \"no-trees\",\n ~~children~~: [\n {\n id: \"no-trees\",\n label: \"\",\n render: () => <FillCentered>{TreeWidget.translate(\"noTrees\")}</FillCentered>,\n },\n ],\n };\n }\n\n return {\n defaultSelectedContentId: trees[0].id,\n ~~children:~~ 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":"SelectableTree.js","sourceRoot":"","sources":["../../../src/components/SelectableTree.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 \"./SelectableTree.scss\";\nimport { useEffect, useState } from \"react\";\nimport { useActiveIModelConnection } from \"@itwin/appui-react\";\nimport { FillCentered } from \"@itwin/core-react\";\nimport { ProgressLinear } from \"@itwin/itwinui-react\";\nimport { TreeWidget } from \"../TreeWidget\";\n\nimport type { PropsWithChildren } from \"react\";\nimport type { IModelConnection } from \"@itwin/core-frontend\";\nimport type { TreeContentDefinition, TreeSelectorProps } from \"./TreeSelector\";\nimport { TreeSelector } from \"./TreeSelector\";\n\n/*\n Props for rendering trees\n * @public\n /\nexport interface TreeRenderProps {\n density?: \"enlarged\" \| \"default\";\n}\n\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\n/\n Props for [[SelectableTree]]\n * @public\n /\nexport interface SelectableTreeProps {\n trees: TreeDefinition[];\n density?: \"enlarged\" \| \"default\";\n}\n\n/\n A component that renders a tree (combo box) selector and the selected tree component.\n * @public\n */\nexport function SelectableTree(props: SelectableTreeProps) {\n const imodel = useActiveIModelConnection();\n\n if (!imodel) {\n return null;\n }\n\n return <SelectableTreeContent {...props} imodel={imodel} />;\n}\n\nfunction SelectableTreeContent(props: SelectableTreeProps & { imodel: IModelConnection }) {\n const { trees: treeDefinitions, imodel } = props;\n const trees = useActiveTrees(treeDefinitions, imodel);\n\n return (\n <div className=\"tree-widget-selectable-tree\">\n <TreeSelector {...getTreeSelectorProps(trees)} density={props.density} />\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 // istanbul ignore else\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 };\n };\n\n return (await Promise.all(treeDefinitions.map(handleDefinition))).filter((tree) => tree !== undefined) as TreeContentDefinition[];\n}\n\nfunction getTreeSelectorProps(trees?: TreeContentDefinition[]): TreeSelectorProps {\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 </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: () => <FillCentered>{TreeWidget.translate(\"noTrees\")}</FillCentered>,\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"]}

package/lib/esm/components/SelectableTree.scss CHANGED Viewed

@@ -10,20 +10,4 @@
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  .components-selectable-content {
-    flex: 1;
-    overflow: hidden;
-  }
-  .components-selectable-content-header {
-    padding-bottom: var(--iui-size-2xs);
-  }
-  .components-selectable-content-wrapper {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    height: 100%;
-  }
 }

package/lib/esm/components/TreeSelector.d.ts ADDED Viewed

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import "./TreeSelector.scss";
+import type { TreeRenderProps } from "./SelectableTree";
+/**
+ * A definition for trees displayed in [[TreeSelector]]
+ * @internal
+ */
+export interface TreeContentDefinition {
+    id: string;
+    label: string;
+    render: (props: TreeRenderProps) => React.ReactNode;
+}
+/**
+ * Props for [[TreeSelector]]
+ * @internal
+ */
+export interface TreeSelectorProps {
+    defaultSelectedContentId: string;
+    trees: TreeContentDefinition[];
+    density?: "enlarged" | "default";
+}
+/**
+ * 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 TreeSelector(props: TreeSelectorProps): JSX.Element;
+//# sourceMappingURL=TreeSelector.d.ts.map

package/lib/esm/components/TreeSelector.js ADDED Viewed

@@ -0,0 +1,23 @@
+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 "./TreeSelector.scss";
+import { useMemo, useState } from "react";
+import { MenuItem, Select } from "@itwin/itwinui-react";
+/**
+ * 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 TreeSelector(props) {
+    const [selectedContentId, setSelectedContentId] = useState(props.defaultSelectedContentId);
+    const selectedContent = props.trees.find((c) => c.id === selectedContentId) ?? props.trees[0];
+    const isEnlarged = props.density === "enlarged";
+    const options = useMemo(() => {
+        return props.trees.map((c) => ({ label: c.label, value: c.id }));
+    }, [props.trees]);
+    return (_jsxs("div", { className: "presentation-components-tree-selector-content", children: [_jsx("div", { className: "presentation-components-tree-selector-content-header", children: options.length > 0 && (_jsx(Select, { onChange: setSelectedContentId, options: options, value: selectedContent.id, size: isEnlarged ? "large" : "small", itemRenderer: (option, itemProps) => (_jsx(MenuItem, { ...option, isSelected: itemProps.isSelected, size: isEnlarged ? "large" : "default", children: option.label })) })) }), _jsx("div", { className: "presentation-components-tree-selector-content-wrapper", children: selectedContent?.render({ density: props.density }) })] }));
+}
+//# sourceMappingURL=TreeSelector.js.map

package/lib/esm/components/TreeSelector.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TreeSelector.js","sourceRoot":"","sources":["../../../src/components/TreeSelector.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAyBxD;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC;IAC3F,MAAM,eAAe,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,iBAAiB,CAAC,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAC9F,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,KAAK,UAAU,CAAC;IAEhD,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,OAAO,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAA2B,CAAC;IAC7F,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,OAAO,CACL,eAAK,SAAS,EAAC,+CAA+C,aAC5D,cAAK,SAAS,EAAC,sDAAsD,YAClE,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CACrB,KAAC,MAAM,IACL,QAAQ,EAAE,oBAAoB,EAC9B,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,eAAe,CAAC,EAAE,EACzB,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,EACpC,YAAY,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,CAAC,CACnC,KAAC,QAAQ,OAAK,MAAM,EAAE,UAAU,EAAE,SAAS,CAAC,UAAU,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,YAC3F,MAAM,CAAC,KAAK,GACJ,CACZ,GACD,CACH,GACG,EACN,cAAK,SAAS,EAAC,uDAAuD,YAAE,eAAe,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,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 \"./TreeSelector.scss\";\nimport { useMemo, useState } from \"react\";\nimport { MenuItem, Select } from \"@itwin/itwinui-react\";\n\nimport type { SelectOption } from \"@itwin/itwinui-react\";\nimport type { TreeRenderProps } from \"./SelectableTree\";\n\n/**\n * A definition for trees displayed in [[TreeSelector]]\n * @internal\n */\nexport interface TreeContentDefinition {\n id: string;\n label: string;\n render: (props: TreeRenderProps) => React.ReactNode;\n}\n\n/**\n * Props for [[TreeSelector]]\n * @internal\n */\nexport interface TreeSelectorProps {\n defaultSelectedContentId: string;\n trees: TreeContentDefinition[];\n density?: \"enlarged\" | \"default\";\n}\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 TreeSelector(props: TreeSelectorProps) {\n const [selectedContentId, setSelectedContentId] = useState(props.defaultSelectedContentId);\n const selectedContent = props.trees.find((c) => c.id === selectedContentId) ?? props.trees[0];\n const isEnlarged = props.density === \"enlarged\";\n\n const options = useMemo(() => {\n return props.trees.map((c) => ({ label: c.label, value: c.id })) as SelectOption<string>[];\n }, [props.trees]);\n\n return (\n <div className=\"presentation-components-tree-selector-content\">\n <div className=\"presentation-components-tree-selector-content-header\">\n {options.length > 0 && (\n <Select\n onChange={setSelectedContentId}\n options={options}\n value={selectedContent.id}\n size={isEnlarged ? \"large\" : \"small\"}\n itemRenderer={(option, itemProps) => (\n <MenuItem {...option} isSelected={itemProps.isSelected} size={isEnlarged ? \"large\" : \"default\"}>\n {option.label}\n </MenuItem>\n )}\n />\n )}\n </div>\n <div className=\"presentation-components-tree-selector-content-wrapper\">{selectedContent?.render({ density: props.density })}</div>\n </div>\n );\n}\n"]}

package/lib/esm/components/TreeSelector.scss ADDED Viewed

@@ -0,0 +1,27 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+.presentation-components-tree-selector-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+  .presentation-components-tree-selector-content-header {
+    padding-bottom: var(--iui-size-2xs);
+    .presentation-components-tree-selector-content-selector {
+      width: 100%;
+    }
+  }
+  .presentation-components-tree-selector-content-wrapper {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    height: 100%;
+    overflow: hidden;
+  }
+}