npm - @itwin/tree-widget-react - Versions diffs - 3.0.0-dev.2 → 3.0.0-dev.4 - Mend

@itwin/tree-widget-react 3.0.0-dev.2 → 3.0.0-dev.4

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

package/lib/esm/components/tree-header/TreeHeader.d.ts CHANGED Viewed

@@ -1,15 +1,15 @@
-/// <reference types="react" />
 import "./TreeHeader.scss";
+import type { PropsWithChildren } from "react";
 import type { Viewport } from "@itwin/core-frontend";
 import type { CommonProps } from "@itwin/core-react";
-/** @internal */
+/** @public */
 export interface TreeHeaderButtonProps {
     viewport: Viewport;
     density?: "default" | "enlarged";
     onFeatureUsed?: (feature: string) => void;
 }
-/** @internal */
-export interface TreeHeaderProps extends CommonProps {
+/** @beta */
+export interface TreeFilteringProps {
     /** Filtering is cleared after everything's loaded */
     onFilterStart: (newFilter: string) => void;
     /** listens for onClick event for Clear (x) icon */
@@ -19,12 +19,14 @@ export interface TreeHeaderProps extends CommonProps {
     /** Current selected result index */
     selectedIndex?: number;
     /** Callback to currently selected result/entry change */
-    onSelectedChanged: (index: number) => void;
-    /** Header buttons */
-    children?: React.ReactNode;
+    onSelectedChanged?: (index: number) => void;
+    isDisabled?: boolean;
+}
+interface TreeHeaderProps extends CommonProps {
+    filteringProps?: TreeFilteringProps;
     /** Modifies the density of tree header. `enlarged` header contains larger content */
     density?: "default" | "enlarged";
 }
-/** @internal */
-export declare function TreeHeader(props: TreeHeaderProps): JSX.Element;
+export declare function TreeHeader(props: PropsWithChildren<TreeHeaderProps>): JSX.Element;
+export {};
 //# sourceMappingURL=TreeHeader.d.ts.map

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

@@ -10,20 +10,18 @@ import { SvgCaretDownSmall, SvgCaretUpSmall, SvgMore } from "@itwin/itwinui-icon
 import { ButtonGroup, Divider, DropdownMenu, IconButton, SearchBox } from "@itwin/itwinui-react";
 import { TreeWidget } from "../../TreeWidget";
 import { useFocusedInstancesContext } from "../trees/common/FocusedInstancesContext";
-/** @internal */
 export function TreeHeader(props) {
-    const { onFilterStart, onFilterClear, resultCount, selectedIndex, onSelectedChanged, children, density, className } = props;
+    const { filteringProps, density, className, children } = props;
     const [isSearchOpen, setIsSearchOpen] = useState(false);
     const { enabled: instanceFocusEnabled } = useFocusedInstancesContext();
     const size = density === "enlarged" ? "large" : "small";
     useEffect(() => {
         // istanbul ignore if
-        if (instanceFocusEnabled) {
-            onFilterClear();
+        if (filteringProps?.isDisabled) {
             setIsSearchOpen(false);
         }
-    }, [instanceFocusEnabled, onFilterClear]);
-    return (_jsxs("div", { className: classnames("tree-widget-tree-header", className), children: [_jsx(HeaderButtons, { contracted: isSearchOpen, size: size, children: children }), _jsx(DebouncedSearchBox, { isOpened: isSearchOpen, onOpen: () => setIsSearchOpen(true), onClose: () => setIsSearchOpen(false), onChange: (value) => (value ? onFilterStart(value) : onFilterClear()), delay: 500, selectedResultIndex: selectedIndex, resultCount: resultCount, onSelectedResultChanged: onSelectedChanged, size: size, isDisabled: instanceFocusEnabled })] }));
+    }, [filteringProps?.isDisabled]);
+    return (_jsxs("div", { className: classnames("tree-widget-tree-header", className), children: [_jsx(HeaderButtons, { contracted: isSearchOpen, size: size, children: children }), filteringProps ? (_jsx(DebouncedSearchBox, { isOpened: isSearchOpen, onOpen: () => setIsSearchOpen(true), onClose: () => setIsSearchOpen(false), onChange: (value) => (value ? filteringProps.onFilterStart(value) : filteringProps.onFilterClear()), delay: 500, selectedResultIndex: filteringProps.selectedIndex, resultCount: filteringProps.resultCount, onSelectedResultChanged: (index) => filteringProps.onSelectedChanged?.(index), size: size, isDisabled: instanceFocusEnabled })) : null] }));
 }
 function DebouncedSearchBox({ isOpened, selectedResultIndex, resultCount, onSelectedResultChanged, onChange, onOpen, onClose, delay, size, isDisabled, }) {
     const [inputValue, setInputValue] = useState("");

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TreeHeader.js","sourceRoot":"","sources":["../../../../src/components/tree-header/TreeHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n --------------------------------------------------------------------------------------------/\n\nimport \"./TreeHeader.scss\";\nimport classnames from \"classnames\";\nimport { Children, useEffect, useRef, useState } from \"react\";\nimport { SvgCaretDownSmall, SvgCaretUpSmall, SvgMore } from \"@itwin/itwinui-icons-react\";\nimport { ButtonGroup, Divider, DropdownMenu, IconButton, SearchBox } from \"@itwin/itwinui-react\";\nimport { TreeWidget } from \"../../TreeWidget\";\nimport { useFocusedInstancesContext } from \"../trees/common/FocusedInstancesContext\";\n\nimport type { Viewport } from \"@itwin/core-frontend\";\nimport type { CommonProps } from \"@itwin/core-react\";\n\n/** @internal /\nexport interface TreeHeaderButtonProps {\n viewport: Viewport;\n density?: \"default\" \| \"enlarged\";\n onFeatureUsed?: (feature: string) => void;\n}\n\n/* @internal /\nexport interface TreeHeaderProps extends CommonProps {\n /* Filtering is cleared after everything's loaded /\n onFilterStart: (newFilter: string) => void;\n /* listens for onClick event for Clear (x) icon /\n onFilterClear: () => void;\n /* Total number of results/entries /\n resultCount?: number;\n /* Current selected result index /\n selectedIndex?: number;\n /* Callback to currently selected result/entry change /\n onSelectedChanged: (index: number) => void;\n /* Header buttons /\n children?: React.ReactNode;\n /* Modifies the density of tree header. `enlarged` header contains larger content /\n density?: \"default\" \| \"enlarged\";\n}\n\n/* @internal */\nexport function TreeHeader(props: TreeHeaderProps) {\n const { onFilterStart, onFilterClear, resultCount, selectedIndex, onSelectedChanged, children, density, className } = props;\n const [isSearchOpen, setIsSearchOpen] = useState<boolean>(false);\n const { enabled: instanceFocusEnabled } = useFocusedInstancesContext();\n const size = density === \"enlarged\" ? \"large\" : \"small\";\n\n useEffect(() => {\n // istanbul ignore if\n if (instanceFocusEnabled) {\n onFilterClear();\n setIsSearchOpen(false);\n }\n }, [instanceFocusEnabled, onFilterClear]);\n\n return (\n <div className={classnames(\"tree-widget-tree-header\", className)}>\n <HeaderButtons contracted={isSearchOpen} size={size}>\n {children}\n </HeaderButtons>\n <DebouncedSearchBox\n isOpened={isSearchOpen}\n onOpen={() => setIsSearchOpen(true)}\n onClose={() => setIsSearchOpen(false)}\n onChange={(value) => (value ? onFilterStart(value) : onFilterClear())}\n delay={500}\n selectedResultIndex={selectedIndex}\n resultCount={resultCount}\n onSelectedResultChanged={onSelectedChanged}\n size={size}\n isDisabled={instanceFocusEnabled}\n />\n </div>\n );\n}\n\ninterface DebouncedSearchBoxProps {\n isOpened: boolean;\n onOpen: () => void;\n onClose: () => void;\n onChange: (value: string) => void;\n delay: number;\n selectedResultIndex?: number;\n resultCount?: number;\n onSelectedResultChanged: (index: number) => void;\n size: \"large\" \| \"small\";\n isDisabled?: boolean;\n}\n\nfunction DebouncedSearchBox({\n isOpened,\n selectedResultIndex,\n resultCount,\n onSelectedResultChanged,\n onChange,\n onOpen,\n onClose,\n delay,\n size,\n isDisabled,\n}: DebouncedSearchBoxProps) {\n const [inputValue, setInputValue] = useState<string>(\"\");\n const onChangeRef = useRef(onChange);\n // save latest `onChange` reference into `useRef` to avoid restarting timeout when `onChange` reference changes.\n onChangeRef.current = onChange;\n\n useEffect(() => {\n if (!inputValue) {\n onChangeRef.current(\"\");\n return;\n }\n\n const timeoutId = setTimeout(() => {\n onChangeRef.current(inputValue);\n }, delay);\n\n return () => {\n clearTimeout(timeoutId);\n };\n }, [inputValue, delay]);\n\n return (\n <SearchBox\n expandable\n isExpanded={isOpened}\n onExpand={onOpen}\n onCollapse={onClose}\n size={size}\n className={classnames(\"tree-widget-search-box\", !isOpened && \"contracted\")}\n isDisabled={isDisabled}\n >\n <SearchBox.CollapsedState>\n <SearchBox.ExpandButton\n title={TreeWidget.translate(\"header.searchBox.searchForSomething\")}\n aria-label={TreeWidget.translate(\"header.searchBox.open\")}\n size={size}\n styleType=\"borderless\"\n />\n </SearchBox.CollapsedState>\n <SearchBox.ExpandedState>\n <SearchBox.Input placeholder={TreeWidget.translate(\"header.searchBox.search\")} onChange={(e) => setInputValue(e.currentTarget.value)} />\n <SearchResultStepper selectedIndex={selectedResultIndex} total={resultCount} onStep={onSelectedResultChanged} size={size} />\n <SearchBox.CollapseButton\n onClick={() => {\n setInputValue(\"\");\n onClose();\n }}\n size={size}\n aria-label={TreeWidget.translate(\"header.searchBox.close\")}\n />\n </SearchBox.ExpandedState>\n </SearchBox>\n );\n}\n\ninterface HeaderButtonsProps {\n contracted: boolean;\n children?: React.ReactNode;\n size: \"large\" \| \"small\";\n}\n\nfunction HeaderButtons(props: HeaderButtonsProps) {\n const className = classnames(\"button-container\", props.contracted && \"contracted\");\n\n return (\n <ButtonGroup\n className={className}\n overflowButton={(overflowStart) => (\n <DropdownMenu\n menuItems={() =>\n Children.toArray(props.children)\n .slice(overflowStart)\n .map((btn, index) => (\n <li key={index} className=\"dropdown-item\" role=\"menuitem\">\n {btn}\n </li>\n ))\n }\n className=\"tree-header-button-dropdown-container\"\n >\n <IconButton title={TreeWidget.translate(\"header.dropdownMore\")} styleType=\"borderless\" size={props.size}>\n <SvgMore />\n </IconButton>\n </DropdownMenu>\n )}\n >\n {props.children}\n </ButtonGroup>\n );\n}\n\ninterface SearchResultStepperProps {\n total?: number;\n onStep: (newIndex: number) => void;\n selectedIndex?: number;\n size: \"large\" \| \"small\";\n}\n\nfunction SearchResultStepper(props: SearchResultStepperProps) {\n const { selectedIndex = 1, total, onStep } = props;\n if (!total) {\n return null;\n }\n\n return (\n <>\n <span className=\"searchbox-stepping-count\">{`${selectedIndex}/${total}`}</span>\n <Divider orientation=\"vertical\" />\n <SearchBox.Button\n title={TreeWidget.translate(\"header.searchBox.previous\")}\n size={props.size}\n onClick={() => {\n if (selectedIndex > 1) {\n onStep(selectedIndex - 1);\n }\n }}\n >\n <SvgCaretUpSmall />\n </SearchBox.Button>\n <SearchBox.Button\n title={TreeWidget.translate(\"header.searchBox.next\")}\n size={props.size}\n onClick={() => {\n if (selectedIndex < total) {\n onStep(selectedIndex + 1);\n }\n }}\n >\n <SvgCaretDownSmall />\n </SearchBox.Button>\n </>\n );\n}\n"]}
1	+ {"version":3,"file":"TreeHeader.js","sourceRoot":"","sources":["../../../../src/components/tree-header/TreeHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n --------------------------------------------------------------------------------------------/\n\nimport \"./TreeHeader.scss\";\nimport classnames from \"classnames\";\nimport { Children, useEffect, useRef, useState } from \"react\";\nimport { SvgCaretDownSmall, SvgCaretUpSmall, SvgMore } from \"@itwin/itwinui-icons-react\";\nimport { ButtonGroup, Divider, DropdownMenu, IconButton, SearchBox } from \"@itwin/itwinui-react\";\nimport { TreeWidget } from \"../../TreeWidget\";\nimport { useFocusedInstancesContext } from \"../trees/common/FocusedInstancesContext\";\n\nimport type { PropsWithChildren } from \"react\";\nimport type { Viewport } from \"@itwin/core-frontend\";\nimport type { CommonProps } from \"@itwin/core-react\";\n\n/** @public /\nexport interface TreeHeaderButtonProps {\n viewport: Viewport;\n density?: \"default\" \| \"enlarged\";\n onFeatureUsed?: (feature: string) => void;\n}\n\n/* @beta /\nexport interface TreeFilteringProps {\n /* Filtering is cleared after everything's loaded /\n onFilterStart: (newFilter: string) => void;\n /* listens for onClick event for Clear (x) icon /\n onFilterClear: () => void;\n /* Total number of results/entries /\n resultCount?: number;\n /* Current selected result index /\n selectedIndex?: number;\n /* Callback to currently selected result/entry change /\n onSelectedChanged?: (index: number) => void;\n isDisabled?: boolean;\n}\n\ninterface TreeHeaderProps extends CommonProps {\n filteringProps?: TreeFilteringProps;\n /* Modifies the density of tree header. `enlarged` header contains larger content */\n density?: \"default\" \| \"enlarged\";\n}\n\nexport function TreeHeader(props: PropsWithChildren<TreeHeaderProps>) {\n const { filteringProps, density, className, children } = props;\n const [isSearchOpen, setIsSearchOpen] = useState<boolean>(false);\n const { enabled: instanceFocusEnabled } = useFocusedInstancesContext();\n const size = density === \"enlarged\" ? \"large\" : \"small\";\n\n useEffect(() => {\n // istanbul ignore if\n if (filteringProps?.isDisabled) {\n setIsSearchOpen(false);\n }\n }, [filteringProps?.isDisabled]);\n\n return (\n <div className={classnames(\"tree-widget-tree-header\", className)}>\n <HeaderButtons contracted={isSearchOpen} size={size}>\n {children}\n </HeaderButtons>\n {filteringProps ? (\n <DebouncedSearchBox\n isOpened={isSearchOpen}\n onOpen={() => setIsSearchOpen(true)}\n onClose={() => setIsSearchOpen(false)}\n onChange={(value) => (value ? filteringProps.onFilterStart(value) : filteringProps.onFilterClear())}\n delay={500}\n selectedResultIndex={filteringProps.selectedIndex}\n resultCount={filteringProps.resultCount}\n onSelectedResultChanged={(index) => filteringProps.onSelectedChanged?.(index)}\n size={size}\n isDisabled={instanceFocusEnabled}\n />\n ) : null}\n </div>\n );\n}\n\ninterface DebouncedSearchBoxProps {\n isOpened: boolean;\n onOpen: () => void;\n onClose: () => void;\n onChange: (value: string) => void;\n delay: number;\n selectedResultIndex?: number;\n resultCount?: number;\n onSelectedResultChanged: (index: number) => void;\n size: \"large\" \| \"small\";\n isDisabled?: boolean;\n}\n\nfunction DebouncedSearchBox({\n isOpened,\n selectedResultIndex,\n resultCount,\n onSelectedResultChanged,\n onChange,\n onOpen,\n onClose,\n delay,\n size,\n isDisabled,\n}: DebouncedSearchBoxProps) {\n const [inputValue, setInputValue] = useState<string>(\"\");\n const onChangeRef = useRef(onChange);\n // save latest `onChange` reference into `useRef` to avoid restarting timeout when `onChange` reference changes.\n onChangeRef.current = onChange;\n\n useEffect(() => {\n if (!inputValue) {\n onChangeRef.current(\"\");\n return;\n }\n\n const timeoutId = setTimeout(() => {\n onChangeRef.current(inputValue);\n }, delay);\n\n return () => {\n clearTimeout(timeoutId);\n };\n }, [inputValue, delay]);\n\n return (\n <SearchBox\n expandable\n isExpanded={isOpened}\n onExpand={onOpen}\n onCollapse={onClose}\n size={size}\n className={classnames(\"tree-widget-search-box\", !isOpened && \"contracted\")}\n isDisabled={isDisabled}\n >\n <SearchBox.CollapsedState>\n <SearchBox.ExpandButton\n title={TreeWidget.translate(\"header.searchBox.searchForSomething\")}\n aria-label={TreeWidget.translate(\"header.searchBox.open\")}\n size={size}\n styleType=\"borderless\"\n />\n </SearchBox.CollapsedState>\n <SearchBox.ExpandedState>\n <SearchBox.Input placeholder={TreeWidget.translate(\"header.searchBox.search\")} onChange={(e) => setInputValue(e.currentTarget.value)} />\n <SearchResultStepper selectedIndex={selectedResultIndex} total={resultCount} onStep={onSelectedResultChanged} size={size} />\n <SearchBox.CollapseButton\n onClick={() => {\n setInputValue(\"\");\n onClose();\n }}\n size={size}\n aria-label={TreeWidget.translate(\"header.searchBox.close\")}\n />\n </SearchBox.ExpandedState>\n </SearchBox>\n );\n}\n\ninterface HeaderButtonsProps {\n contracted: boolean;\n size: \"large\" \| \"small\";\n}\n\nfunction HeaderButtons(props: PropsWithChildren<HeaderButtonsProps>) {\n const className = classnames(\"button-container\", props.contracted && \"contracted\");\n\n return (\n <ButtonGroup\n className={className}\n overflowButton={(overflowStart) => (\n <DropdownMenu\n menuItems={() =>\n Children.toArray(props.children)\n .slice(overflowStart)\n .map((btn, index) => (\n <li key={index} className=\"dropdown-item\" role=\"menuitem\">\n {btn}\n </li>\n ))\n }\n className=\"tree-header-button-dropdown-container\"\n >\n <IconButton title={TreeWidget.translate(\"header.dropdownMore\")} styleType=\"borderless\" size={props.size}>\n <SvgMore />\n </IconButton>\n </DropdownMenu>\n )}\n >\n {props.children}\n </ButtonGroup>\n );\n}\n\ninterface SearchResultStepperProps {\n total?: number;\n onStep: (newIndex: number) => void;\n selectedIndex?: number;\n size: \"large\" \| \"small\";\n}\n\nfunction SearchResultStepper(props: SearchResultStepperProps) {\n const { selectedIndex = 1, total, onStep } = props;\n if (!total) {\n return null;\n }\n\n return (\n <>\n <span className=\"searchbox-stepping-count\">{`${selectedIndex}/${total}`}</span>\n <Divider orientation=\"vertical\" />\n <SearchBox.Button\n title={TreeWidget.translate(\"header.searchBox.previous\")}\n size={props.size}\n onClick={() => {\n if (selectedIndex > 1) {\n onStep(selectedIndex - 1);\n }\n }}\n >\n <SvgCaretUpSmall />\n </SearchBox.Button>\n <SearchBox.Button\n title={TreeWidget.translate(\"header.searchBox.next\")}\n size={props.size}\n onClick={() => {\n if (selectedIndex < total) {\n onStep(selectedIndex + 1);\n }\n }}\n >\n <SvgCaretDownSmall />\n </SearchBox.Button>\n </>\n );\n}\n"]}

package/lib/esm/components/tree-header/TreeWithHeader.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import "./TreeWithHeader.scss";
+import type { PropsWithChildren, ReactNode } from "react";
+import type { TreeFilteringProps } from "./TreeHeader";
+/** @beta */
+interface TreeWithHeaderProps {
+    density?: "enlarged" | "default";
+    filteringProps?: TreeFilteringProps;
+    buttons?: ReactNode;
+}
+/** @beta */
+export declare function TreeWithHeader({ filteringProps, buttons, density, children }: PropsWithChildren<TreeWithHeaderProps>): JSX.Element;
+export {};
+//# sourceMappingURL=TreeWithHeader.d.ts.map

package/lib/esm/components/tree-header/TreeWithHeader.js ADDED Viewed

@@ -0,0 +1,13 @@
+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 "./TreeWithHeader.scss";
+import classNames from "classnames";
+import { TreeHeader } from "./TreeHeader";
+/** @beta */
+export function TreeWithHeader({ filteringProps, buttons, density, children }) {
+    return (_jsxs("div", { className: classNames("tw-tree-with-header", density === "enlarged" && "enlarge"), children: [_jsx(TreeHeader, { filteringProps: filteringProps, density: density, children: buttons }), _jsx("div", { className: "tw-tree-content", children: children })] }));
+}
+//# sourceMappingURL=TreeWithHeader.js.map

package/lib/esm/components/tree-header/TreeWithHeader.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TreeWithHeader.js","sourceRoot":"","sources":["../../../../src/components/tree-header/TreeWithHeader.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,uBAAuB,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAY1C,YAAY;AACZ,MAAM,UAAU,cAAc,CAAC,EAAE,cAAc,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAA0C;IACnH,OAAO,CACL,eAAK,SAAS,EAAE,UAAU,CAAC,qBAAqB,EAAE,OAAO,KAAK,UAAU,IAAI,SAAS,CAAC,aACpF,KAAC,UAAU,IAAC,cAAc,EAAE,cAAc,EAAE,OAAO,EAAE,OAAO,YACzD,OAAO,GACG,EACb,cAAK,SAAS,EAAC,iBAAiB,YAAE,QAAQ,GAAO,IAC7C,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 \"./TreeWithHeader.scss\";\nimport classNames from \"classnames\";\nimport { TreeHeader } from \"./TreeHeader\";\n\nimport type { PropsWithChildren, ReactNode } from \"react\";\nimport type { TreeFilteringProps } from \"./TreeHeader\";\n\n/** @beta */\ninterface TreeWithHeaderProps {\n density?: \"enlarged\" | \"default\";\n filteringProps?: TreeFilteringProps;\n buttons?: ReactNode;\n}\n\n/** @beta */\nexport function TreeWithHeader({ filteringProps, buttons, density, children }: PropsWithChildren<TreeWithHeaderProps>) {\n return (\n <div className={classNames(\"tw-tree-with-header\", density === \"enlarged\" && \"enlarge\")}>\n <TreeHeader filteringProps={filteringProps} density={density}>\n {buttons}\n </TreeHeader>\n <div className=\"tw-tree-content\">{children}</div>\n </div>\n );\n}\n"]}

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

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

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

@@ -3,72 +3,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import { useCallback, useMemo, useState } from "react";
-import { IModelApp } from "@itwin/core-frontend";
-import { SvgLayers } from "@itwin/itwinui-icons-react";
-import { Text } from "@itwin/itwinui-react";
-import { TreeWidget } from "../../../TreeWidget";
 import { VisibilityTree } from "../common/components/VisibilityTree";
-import { useFeatureReporting } from "../common/UseFeatureReporting";
-import { CategoriesTreeComponent } from "./CategoriesTreeComponent";
-import { CategoriesTreeDefinition } from "./CategoriesTreeDefinition";
-import { CategoriesVisibilityHandler } from "./CategoriesVisibilityHandler";
-/** @internal */
-export function CategoriesTree({ imodel, viewManager, categories, allViewports, getSchemaContext, height, width, activeView, filter, density, hierarchyLevelConfig, selectionMode, onPerformanceMeasured, onFeatureUsed, }) {
-    const [filteringError, setFilteringError] = useState();
-    const visibilityHandlerFactory = useCallback(() => {
-        const visibilityHandler = new CategoriesVisibilityHandler({
-            imodel,
-            viewport: activeView,
-            viewManager: viewManager ?? IModelApp.viewManager,
-            categories,
-            allViewports,
-        });
-        return {
-            getVisibilityStatus: async (node) => visibilityHandler.getVisibilityStatus(node),
-            changeVisibility: async (node, on) => visibilityHandler.changeVisibility(node, on),
-            onVisibilityChange: visibilityHandler.onVisibilityChange,
-            dispose: () => visibilityHandler.dispose(),
-        };
-    }, [activeView, allViewports, categories, imodel, viewManager]);
-    const { reportUsage } = useFeatureReporting({ onFeatureUsed, treeIdentifier: CategoriesTreeComponent.id });
-    const getDefinitionsProvider = useCallback((props) => {
-        return new CategoriesTreeDefinition({ ...props, viewType: activeView.view.is2d() ? "2d" : "3d" });
-    }, [activeView]);
-    const getSearchFilteredPaths = useMemo(() => {
-        setFilteringError(undefined);
-        if (!filter) {
-            return undefined;
-        }
-        return async ({ imodelAccess }) => {
-            reportUsage?.({ featureId: "filtering", reportInteraction: true });
-            try {
-                return await CategoriesTreeDefinition.createInstanceKeyPaths({ imodelAccess, label: filter, viewType: activeView.view.is2d() ? "2d" : "3d" });
-            }
-            catch (e) {
-                const newError = e instanceof Error && e.message.match(/Filter matches more than \d+ items/) ? "tooManyFilterMatches" : "unknownFilterError";
-                setFilteringError(newError);
-                return [];
-            }
-        };
-    }, [filter, activeView, reportUsage]);
-    return (_jsx(VisibilityTree, { height: height, width: width, imodel: imodel, treeName: CategoriesTreeComponent.id, getSchemaContext: getSchemaContext, visibilityHandlerFactory: visibilityHandlerFactory, getHierarchyDefinition: getDefinitionsProvider, getFilteredPaths: getSearchFilteredPaths, hierarchyLevelSizeLimit: hierarchyLevelConfig?.sizeLimit, getSublabel: getSublabel, getIcon: getIcon, density: density, noDataMessage: getNoDataMessage(filter, filteringError), selectionMode: selectionMode ?? "none", onPerformanceMeasured: (action, duration) => {
-            onPerformanceMeasured?.(`${CategoriesTreeComponent.id}-${action}`, duration);
-        }, reportUsage: reportUsage, searchText: filter }));
-}
-function getNoDataMessage(filter, error) {
-    if (error) {
-        return _jsx(Text, { children: TreeWidget.translate(`categoriesTree.filtering.${error}`) });
-    }
-    if (filter) {
-        return _jsx(Text, { children: TreeWidget.translate("categoriesTree.filtering.noMatches", { filter }) });
-    }
-    return undefined;
-}
-function getIcon() {
-    return _jsx(SvgLayers, {});
-}
-function getSublabel(node) {
-    return node.extendedData?.description;
+import { VisibilityTreeRenderer } from "../common/components/VisibilityTreeRenderer";
+import { useCategoriesTree } from "./UseCategoriesTree";
+/** @beta */
+export function CategoriesTree({ imodel, getSchemaContext, selectionStorage, activeView, filter, density, hierarchyLevelConfig, selectionMode, }) {
+    const { categoriesTreeProps, rendererProps } = useCategoriesTree({
+        filter,
+        activeView,
+    });
+    return (_jsx(VisibilityTree, { ...categoriesTreeProps, imodel: imodel, selectionStorage: selectionStorage, getSchemaContext: getSchemaContext, hierarchyLevelSizeLimit: hierarchyLevelConfig?.sizeLimit, density: density, selectionMode: selectionMode ?? "none", treeRenderer: (treeProps) => _jsx(VisibilityTreeRenderer, { ...treeProps, ...rendererProps }) }));
 }
 //# sourceMappingURL=CategoriesTree.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CategoriesTree.js","sourceRoot":"","sources":["../../../../../src/components/trees/categories-tree/CategoriesTree.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AACrE,OAAO,EAAE,~~mBAAmB~~,EAAE,MAAM~~,+BAA+B~~,~~CAAC;AACpE~~,~~OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,~~CAAC;~~AACpE~~,OAAO,EAAE,~~wBAAwB~~,EAAE,MAAM,~~4BAA4B~~,CAAC;~~AACtE~~,~~OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC~~;~~AA6B5E~~,~~gBAAgB;AAChB,~~MAAM,UAAU,cAAc,CAAC,EAC7B,MAAM,EACN,~~WAAW~~,~~EACX~~,~~UAAU,EACV,YAAY,EACZ,~~gBAAgB,EAChB,~~MAAM,EACN,KAAK,EACL,~~UAAU,EACV,MAAM,EACN,OAAO,EACP,oBAAoB,EACpB,aAAa,~~EACb,qBAAqB,EACrB,aAAa,GACG~~;~~IAChB~~,MAAM,~~CAAC,cAAc,~~EAAE,iBAAiB,CAAC,GAAG,QAAQ,EAA4C,CAAC;IACjG,MAAM,wBAAwB,GAAG,WAAW,CAAC,GAAG,EAAE;QAChD,MAAM,iBAAiB,GAAG,IAAI,2BAA2B,CAAC;YACxD,MAAM;YACN,QAAQ,EAAE,UAAU;YACpB,WAAW,EAAE,WAAW,IAAI,SAAS,CAAC,WAAW;YACjD,UAAU;YACV,YAAY;SACb,CAAC,CAAC;QACH,OAAO;YACL,mBAAmB,EAAE,KAAK,EAAE,IAAmB,EAAE,EAAE,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,IAAI,CAAC;YAC/F,gBAAgB,EAAE,KAAK,EAAE,IAAmB,EAAE,EAAW,EAAE,EAAE,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,IAAI,EAAE,EAAE,CAAC;YAC1G,kBAAkB,EAAE,iBAAiB,CAAC,kBAAkB;YACxD,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,OAAO,EAAE;SAC3C,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC;IAEhE,MAAM,EAAE,WAAW,EAAE,GAAG,mBAAmB,CAAC,EAAE,aAAa,EAAE,~~cAAc,EAAE,uBAAuB,CAAC,EAAE,EAAE,CAAC,CAAC;IAE3G,MAAM,sBAAsB,~~GAAG,WAAW,CACxC,CAAC,KAAoD,EAAE,EAAE;QACvD,OAAO,IAAI,wBAAwB,CAAC,EAAE,GAAG,KAAK,EAAE,QAAQ,EAAE,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;IACpG,CAAC,EACD,CAAC,UAAU,CAAC,CACb,CAAC;IAEF,MAAM,sBAAsB,GAAG,OAAO,CAAuC,GAAG,EAAE;QAChF,iBAAiB,CAAC~~,SAAS,CAAC,CAAC~~;~~QAC7B~~,~~IAAI,CAAC,~~MAAM~~,EAAE~~;~~YACX~~,OAAO,SAAS,CAAC;SAClB;QACD,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE;YAChC,WAAW,EAAE,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,iBAAiB,EAAE,IAAI,EAAE,CAAC,CAAC;YACnE,IAAI;gBACF,OAAO,MAAM,wBAAwB,CAAC,sBAAsB,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU~~,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC~~;~~aAC/I;YAAC~~,~~OAAO,~~CAAC,~~EAAE;gBACV,MAAM,QAAQ,GAAG,~~CAAC~~,YAAY,KAAK,IAAI,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,oCAAoC,CAAC,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,oBAAoB,CAAC~~;~~gBAC7I~~,~~iBAAiB,CAAC,QAAQ,CAAC,CAAC;gBAC5B,~~OAAO,~~EAAE,CAAC;aACX;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC;IAEtC,OAAO,~~CACL,KAAC,cAAc,~~IACb~~,~~MAAM~~,~~EAAE~~,MAAM,~~EACd,KAAK,~~EAAE,~~KAAK,EACZ,~~MAAM,~~EAAE,MAAM,~~EACd,~~QAAQ,EAAE,uBAAuB,CAAC,EAAE,EACpC,~~gBAAgB,EAAE,gBAAgB,EAClC,~~wBAAwB~~,EAAE,~~wBAAwB,EAClD,sBAAsB,EAAE,sBAAsB,EAC9C,~~gBAAgB,~~EAAE~~,~~sBAAsB,EACxC,~~uBAAuB,EAAE,oBAAoB,EAAE,SAAS,EACxD,~~WAAW,EAAE,WAAW,EACxB,~~OAAO,EAAE,OAAO,EAChB,~~OAAO,EAAE,OAAO,EAChB,~~aAAa,EAAE,~~gBAAgB,CAAC,MAAM,EAAE,cAAc,CAAC,EACvD,~~aAAa,~~EAAE,aAAa,~~IAAI,MAAM,EACtC,~~qBAAqB~~,EAAE,CAAC,~~MAAM,EAAE,QAAQ,EAAE,EAAE;YAC1C,qBAAqB,EAAE,CAAC,GAAG,uBAAuB,CAAC,EAAE,IAAI,MAAM,EAAE,EAAE,QAAQ,CAAC,CAAC;QAC/E,CAAC,EACD,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,MAAM,GAClB,CACH,CAAC;AACJ,CAAC;AAED,~~SAAS,~~gBAAgB,CAAC,MAAc,~~EAAE,~~KAAoC;IAC5E,IAAI,KAAK,~~EAAE~~;QACT~~,~~OAAO,KAAC,IAAI,cAAE,UAAU,~~CAAC,~~SAAS,CAAC,4BAA4B,KAAK,EAAE,CAAC,GAAQ,CAAC;KACjF;IACD,IAAI,MAAM,EAAE;QACV,OAAO,~~KAAC,~~IAAI~~,~~cAAE~~,~~UAAU,CAAC,~~SAAS,~~CAAC~~,~~oCAAoC~~,~~EAAE~~,~~EAAE~~,~~MAAM~~,~~EAAE,~~CAAC~~,GAAQ,CAAC~~;~~KAC9F;IACD~~,~~OAAO,SAAS,~~CAAC~~;AACnB,CAAC;AAED,SAAS,OAAO;IACd,OAAO,KAAC,SAAS,KAAG,CAAC;AACvB,CAAC;AAED,SAAS,WAAW,CAAC,IAA+B;IAClD,OAAO,IAAI,CAAC,YAAY,EAAE,WAAW,CAAC;AACxC,CAAC~~","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n --------------------------------------------------------------------------------------------/\n\nimport { useCallback, useMemo, useState } from \"react\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { SvgLayers } from \"@itwin/itwinui-icons-react\";\nimport { Text } from \"@itwin/itwinui-react\";\nimport { TreeWidget } from \"../../../TreeWidget\";\nimport { VisibilityTree } from \"../common/components/VisibilityTree\";\nimport { ~~useFeatureReporting~~ } from \"../common/~~UseFeatureReporting~~\";\nimport { ~~CategoriesTreeComponent~~ } from \"./~~CategoriesTreeComponent~~\";\~~nimport { CategoriesTreeDefinition } from \"./CategoriesTreeDefinition\";\nimport { CategoriesVisibilityHandler } from \"./CategoriesVisibilityHandler\";\~~n\nimport type { ~~CategoryInfo } from \"../common/CategoriesVisibilityUtils\";\nimport type {~~ ComponentPropsWithoutRef } from \"react\";\nimport type { ~~ViewManager,~~ Viewport } from \"@itwin/core-frontend\";\~~nimport type { HierarchyNode } from~~ \~~"@itwin/presentation-hierarchies\";\nimport~~ ~~type { PresentationHierarchyNode } from \"~~@~~itwin/presentation-hierarchies-react\";\n\ntype~~ ~~CategoriesTreeFilteringError = \"tooManyFilterMatches\" \| \"unknownFilterError\";\n\~~ninterface CategoriesTreeOwnProps {\n filter: string;\n activeView: Viewport;\n ~~categories: CategoryInfo[];\n viewManager?: ViewManager;\n allViewports?: boolean;\n~~ hierarchyLevelConfig?: {\n sizeLimit?: number;\n };\n ~~onPerformanceMeasured?: (featureId: string, duration: number) => void;\n onFeatureUsed?: (feature: string) => void;\n~~}\n\ntype VisibilityTreeProps = ComponentPropsWithoutRef<typeof VisibilityTree>;\~~ntype GetFilteredPathsCallback = VisibilityTreeProps[~~\~~"getFilteredPaths\"];\ntype~~ ~~GetHierarchyDefinitionCallback~~ ~~= VisibilityTreeProps[\"getHierarchyDefinition\"];\n\~~ntype ~~ModelsTreeProps~~ = CategoriesTreeOwnProps & Pick<VisibilityTreeProps, \"imodel\" \| \"getSchemaContext\" \| \"~~height~~\" \| \"~~width\" \| \"~~density\" \| \"selectionMode\">;\n\n/** @~~internal~~ */\nexport function CategoriesTree({\n imodel,\n ~~viewManager,\n categories,\n allViewports,\n~~ getSchemaContext,\n ~~height~~,\n ~~width,\n~~ activeView,\n filter,\n density,\n hierarchyLevelConfig,\n selectionMode,\n ~~onPerformanceMeasured,\n onFeatureUsed,\n~~}: ~~ModelsTreeProps~~) {\n const ~~[filteringError, setFilteringError] = useState<CategoriesTreeFilteringError \| undefined>();\n const visibilityHandlerFactory = useCallback(() =>~~ {~~\n const~~ visibilityHandler = new CategoriesVisibilityHandler({\n imodel,\n viewport: activeView,\n viewManager: viewManager ?? IModelApp.viewManager,\n categories,\n allViewports,\n });\n return {\n getVisibilityStatus: async (node: HierarchyNode) => visibilityHandler.getVisibilityStatus(node),\n changeVisibility: async (node: HierarchyNode, ~~on:~~ ~~boolean) => visibilityHandler.changeVisibility(node, on),\n onVisibilityChange: visibilityHandler.onVisibilityChange,\n dispose: () => visibilityHandler.dispose(),\n~~ }~~;\n },~~ ~~[activeView, allViewports, categories, imodel, viewManager]);\n\n const { reportUsage }~~ = ~~useFeatureReporting~~({ ~~onFeatureUsed, treeIdentifier: CategoriesTreeComponent.id });\n~~\n ~~const getDefinitionsProvider = useCallback(\n~~ ~~(props: Parameters<GetHierarchyDefinitionCallback>[0]) => {\n return new CategoriesTreeDefinition({ ...props, viewType: activeView.view.is2d() ? \"2d\" : \"3d\" });\n }~~,\n [activeView],\n ~~);\n\n const getSearchFilteredPaths = useMemo<GetFilteredPathsCallback \| undefined>(() => {\n setFilteringError(undefined);\n if (!filter) {\n return undefined;\n~~ }~~\n return async ({ imodelAccess }~~) ~~=> {\n reportUsage?.({ featureId: \"filtering\", reportInteraction: true })~~;\n ~~try {~~\n return await CategoriesTreeDefinition.createInstanceKeyPaths({ imodelAccess, label: filter, viewType: activeView.view.is2d() ? \"2d\" : \"3d\" });\n } catch (e) {\n const newError = e instanceof Error && e.message.match(/Filter matches more than \\d+ items/) ? \"tooManyFilterMatches\" : \"unknownFilterError\";\n setFilteringError(newError);\n return [];\n }\n };\n ~~}, [filter, activeView, reportUsage]);\n\n~~ return (\n <VisibilityTree\n ~~height=~~{~~height~~}\n ~~width={width}\n~~ imodel={imodel}\n ~~treeName~~={~~CategoriesTreeComponent.id~~}\n getSchemaContext={getSchemaContext}\n ~~visibilityHandlerFactory={visibilityHandlerFactory}\n getHierarchyDefinition={getDefinitionsProvider}\n getFilteredPaths={getSearchFilteredPaths}\n~~ hierarchyLevelSizeLimit={hierarchyLevelConfig?.sizeLimit}\n ~~getSublabel={getSublabel}\n getIcon={getIcon}\n~~ density={density}\n ~~noDataMessage={getNoDataMessage(filter, filteringError)}\n~~ selectionMode={selectionMode ?? \"none\"}\n ~~onPerformanceMeasured~~={(~~action, duration~~) => {~~\n onPerformanceMeasured?.(`${CategoriesTreeComponent.id~~}-${~~action~~}`, ~~duration);\n~~ }}\n ~~reportUsage={reportUsage}\n searchText={filter}\n~~ />\n );\n}\n\nfunction getNoDataMessage(filter: string, error?: CategoriesTreeFilteringError) {\n if (error) {\n return <Text>{TreeWidget.translate(`categoriesTree.filtering.${error}`)}</Text>;\n }\n if (filter) {\n return <Text>{TreeWidget.translate(\"categoriesTree.filtering.noMatches\", { filter })}</Text>;\n }\n return undefined;\n}\n\nfunction getIcon() {\n return <SvgLayers />;\n}\n\nfunction getSublabel(node: PresentationHierarchyNode) {\n return node.extendedData?.description;\n}\n"]}
1	+ {"version":3,"file":"CategoriesTree.js","sourceRoot":"","sources":["../../../../../src/components/trees/categories-tree/CategoriesTree.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AACrE,OAAO,EAAE,sBAAsB,EAAE,MAAM,6CAA6C,CAAC;AACrF,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAoBxD,YAAY;AACZ,MAAM,UAAU,cAAc,CAAC,EAC7B,MAAM,EACN,gBAAgB,EAChB,gBAAgB,EAChB,UAAU,EACV,MAAM,EACN,OAAO,EACP,oBAAoB,EACpB,aAAa,GACO;IACpB,MAAM,EAAE,mBAAmB,EAAE,aAAa,EAAE,GAAG,iBAAiB,CAAC;QAC/D,MAAM;QACN,UAAU;KACX,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,OAAO,EAAE,OAAO,EAChB,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\";\nimport { VisibilityTreeRenderer } from \"../common/components/VisibilityTreeRenderer\";\nimport { useCategoriesTree } from \"./UseCategoriesTree\";\n\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport type { Viewport } from \"@itwin/core-frontend\";\n\n/** @beta /\ninterface CategoriesTreeOwnProps {\n filter: string;\n activeView: Viewport;\n hierarchyLevelConfig?: {\n sizeLimit?: number;\n };\n}\n\n/* @beta /\ntype VisibilityTreeProps = ComponentPropsWithoutRef<typeof VisibilityTree>;\n\n/* @beta /\ntype CategoriesTreeProps = CategoriesTreeOwnProps & Pick<VisibilityTreeProps, \"imodel\" \| \"getSchemaContext\" \| \"selectionStorage\" \| \"density\" \| \"selectionMode\">;\n\n/* @beta */\nexport function CategoriesTree({\n imodel,\n getSchemaContext,\n selectionStorage,\n activeView,\n filter,\n density,\n hierarchyLevelConfig,\n selectionMode,\n}: CategoriesTreeProps) {\n const { categoriesTreeProps, rendererProps } = useCategoriesTree({\n filter,\n activeView,\n });\n\n return (\n <VisibilityTree\n {...categoriesTreeProps}\n imodel={imodel}\n selectionStorage={selectionStorage}\n getSchemaContext={getSchemaContext}\n hierarchyLevelSizeLimit={hierarchyLevelConfig?.sizeLimit}\n density={density}\n selectionMode={selectionMode ?? \"none\"}\n treeRenderer={(treeProps) => <VisibilityTreeRenderer {...treeProps} {...rendererProps} />}\n />\n );\n}\n"]}

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import type { CategoryInfo } from "../common/CategoriesVisibilityUtils";
 import type { TreeHeaderButtonProps } from "../../tree-header/TreeHeader";
+import type { Viewport } from "@itwin/core-frontend";
 /**
  * Props that get passed to `CategoriesTreeComponent` header button renderer.
  * @see CategoriesTreeComponentProps.headerButtons
@@ -9,13 +10,19 @@ import type { TreeHeaderButtonProps } from "../../tree-header/TreeHeader";
 export interface CategoriesTreeHeaderButtonProps extends TreeHeaderButtonProps {
     /** A list of categories available in the iModel */
     categories: CategoryInfo[];
-    /** In case the tree is filtered, a list of filtered categories. */
-    filteredCategories?: CategoryInfo[];
 }
-/** @internal */
+/**
+ * Custom hook that creates props required to render `CategoriesTreeComponent` header button.
+ * @public
+ */
+export declare function useCategoriesTreeButtonProps({ viewport }: {
+    viewport: Viewport;
+}): Pick<CategoriesTreeHeaderButtonProps, "categories" | "viewport">;
+/** @public */
 export declare function ShowAllButton(props: CategoriesTreeHeaderButtonProps): JSX.Element;
-/** @internal */
+/** @public */
 export declare function HideAllButton(props: CategoriesTreeHeaderButtonProps): JSX.Element;
-/** @internal */
+/** @public */
 export declare function InvertAllButton(props: CategoriesTreeHeaderButtonProps): JSX.Element;
+export declare function useCategories(viewport: Viewport): CategoryInfo[];
 //# sourceMappingURL=CategoriesTreeButtons.d.ts.map

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

@@ -3,29 +3,47 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
+import { useMemo } from "react";
+import { useAsyncValue } from "@itwin/components-react";
 import { SvgVisibilityHalf, SvgVisibilityHide, SvgVisibilityShow } from "@itwin/itwinui-icons-react";
 import { IconButton } from "@itwin/itwinui-react";
 import { TreeWidget } from "../../../TreeWidget";
-import { hideAllCategories, invertAllCategories, showAllCategories } from "../common/CategoriesVisibilityUtils";
-/** @internal */
+import { hideAllCategories, invertAllCategories, loadCategoriesFromViewport, showAllCategories } from "../common/CategoriesVisibilityUtils";
+/**
+ * Custom hook that creates props required to render `CategoriesTreeComponent` header button.
+ * @public
+ */
+export function useCategoriesTreeButtonProps({ viewport }) {
+    const categories = useCategories(viewport);
+    return {
+        viewport,
+        categories,
+    };
+}
+/** @public */
 export function ShowAllButton(props) {
     return (_jsx(IconButton, { size: props.density === "enlarged" ? "large" : "small", styleType: "borderless", title: TreeWidget.translate("categoriesTree.buttons.showAll.tooltip"), onClick: () => {
             props.onFeatureUsed?.(`categories-tree-showall`);
-            void showAllCategories((props.filteredCategories ?? props.categories).map((category) => category.categoryId), props.viewport);
+            void showAllCategories(props.categories.map((category) => category.categoryId), props.viewport);
         }, children: _jsx(SvgVisibilityShow, {}) }));
 }
-/** @internal */
+/** @public */
 export function HideAllButton(props) {
     return (_jsx(IconButton, { size: props.density === "enlarged" ? "large" : "small", styleType: "borderless", title: TreeWidget.translate("categoriesTree.buttons.hideAll.tooltip"), onClick: () => {
             props.onFeatureUsed?.(`categories-tree-hideall`);
-            void hideAllCategories((props.filteredCategories ?? props.categories).map((category) => category.categoryId), props.viewport);
+            void hideAllCategories(props.categories.map((category) => category.categoryId), props.viewport);
         }, children: _jsx(SvgVisibilityHide, {}) }));
 }
-/** @internal */
+/** @public */
 export function InvertAllButton(props) {
     return (_jsx(IconButton, { title: TreeWidget.translate("categoriesTree.buttons.invert.tooltip"), size: props.density === "enlarged" ? "large" : "small", styleType: "borderless", onClick: () => {
             props.onFeatureUsed?.(`categories-tree-invert`);
-            void invertAllCategories(props.filteredCategories ?? props.categories, props.viewport);
+            void invertAllCategories(props.categories, props.viewport);
         }, children: _jsx(SvgVisibilityHalf, {}) }));
 }
+const EMPTY_CATEGORIES_ARRAY = [];
+export function useCategories(viewport) {
+    const categoriesPromise = useMemo(async () => loadCategoriesFromViewport(viewport), [viewport]);
+    return useAsyncValue(categoriesPromise) ?? EMPTY_CATEGORIES_ARRAY;
+}
 //# sourceMappingURL=CategoriesTreeButtons.js.map

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

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

package/lib/esm/components/trees/categories-tree/CategoriesTreeComponent.d.ts CHANGED Viewed

@@ -1,11 +1,9 @@
-import "../Tree.scss";
 import { CategoriesTree } from "./CategoriesTree";
 import { HideAllButton, InvertAllButton, ShowAllButton } from "./CategoriesTreeButtons";
 import type { ComponentPropsWithoutRef } from "react";
-import type { SelectionStorage } from "@itwin/presentation-hierarchies-react";
 import type { CategoriesTreeHeaderButtonProps } from "./CategoriesTreeButtons";
-type CategoriesTreeProps = ComponentPropsWithoutRef<typeof CategoriesTree>;
-interface CategoriesTreeComponentProps extends Pick<CategoriesTreeProps, "getSchemaContext" | "density" | "hierarchyLevelConfig" | "selectionMode" | "onPerformanceMeasured" | "onFeatureUsed"> {
+/** @public */
+interface CategoriesTreeComponentProps extends Pick<ComponentPropsWithoutRef<typeof CategoriesTree>, "getSchemaContext" | "selectionStorage" | "density" | "hierarchyLevelConfig" | "selectionMode"> {
     /**
      * Renderers of header buttons. Defaults to:
      * ```ts
@@ -17,7 +15,8 @@ interface CategoriesTreeComponentProps extends Pick<CategoriesTreeProps, "getSch
      * ```
      */
     headerButtons?: Array<(props: CategoriesTreeHeaderButtonProps) => React.ReactNode>;
-    selectionStorage: SelectionStorage;
+    onPerformanceMeasured?: (featureId: string, duration: number) => void;
+    onFeatureUsed?: (feature: string) => void;
 }
 /**
  * A component that renders `CategoriesTree` and a header with filtering capabilities and header buttons.

package/lib/esm/components/trees/categories-tree/CategoriesTreeComponent.js CHANGED Viewed

@@ -1,21 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import "../Tree.scss";
-import classNames from "classnames";
 import { Fragment } from "react";
 import { useActiveIModelConnection, useActiveViewport } from "@itwin/appui-react";
-import { IModelApp } from "@itwin/core-frontend";
-import { UnifiedSelectionProvider } from "@itwin/presentation-hierarchies-react";
 import { TreeWidget } from "../../../TreeWidget";
-import { TreeHeader } from "../../tree-header/TreeHeader";
-import { AutoSizer } from "../../utils/AutoSizer";
+import { TreeWithHeader } from "../../tree-header/TreeWithHeader";
 import { useFiltering } from "../common/UseFiltering";
+import { TelemetryContextProvider } from "../common/UseTelemetryContext";
 import { CategoriesTree } from "./CategoriesTree";
-import { HideAllButton, InvertAllButton, ShowAllButton } from "./CategoriesTreeButtons";
-import { useCategories } from "./UseCategories";
+import { HideAllButton, InvertAllButton, ShowAllButton, useCategoriesTreeButtonProps } from "./CategoriesTreeButtons";
 /**
  * A component that renders `CategoriesTree` and a header with filtering capabilities and header buttons.
  * @public
@@ -53,16 +49,20 @@ CategoriesTreeComponent.id = "categories-tree-v2";
  * @public
  */
 CategoriesTreeComponent.getLabel = () => TreeWidget.translate("categoriesTree.label");
-function CategoriesTreeComponentImpl({ iModel, viewport, headerButtons, selectionStorage, ...treeProps }) {
-    const categories = useCategories(IModelApp.viewManager, iModel, viewport);
+function CategoriesTreeComponentImpl({ iModel, viewport, headerButtons, onPerformanceMeasured, onFeatureUsed, ...treeProps }) {
+    const buttonProps = useCategoriesTreeButtonProps({ viewport });
     const { filter, applyFilter, clearFilter } = useFiltering();
     const density = treeProps.density;
-    return (_jsx("div", { className: classNames("tw-tree-with-header", density === "enlarged" && "enlarge"), children: _jsxs(UnifiedSelectionProvider, { storage: selectionStorage, children: [_jsx(TreeHeader, { onFilterStart: applyFilter, onFilterClear: clearFilter, onSelectedChanged: () => { }, density: density, children: headerButtons
-                        ? headerButtons.map((btn, index) => _jsx(Fragment, { children: btn({ viewport, categories, onFeatureUsed: treeProps.onFeatureUsed }) }, index))
-                        : [
-                            _jsx(ShowAllButton, { viewport: viewport, categories: categories, density: density, onFeatureUsed: treeProps.onFeatureUsed }, "show-all-btn"),
-                            _jsx(HideAllButton, { viewport: viewport, categories: categories, density: density, onFeatureUsed: treeProps.onFeatureUsed }, "hide-all-btn"),
-                            _jsx(InvertAllButton, { viewport: viewport, categories: categories, density: density, onFeatureUsed: treeProps.onFeatureUsed }, "invert-all-btn"),
-                        ] }), _jsx("div", { className: "tw-tree-content", children: _jsx(AutoSizer, { children: ({ width, height }) => (_jsx(CategoriesTree, { ...treeProps, imodel: iModel, categories: categories, activeView: viewport, width: width, height: height, filter: filter })) }) })] }) }));
+    const buttons = headerButtons
+        ? headerButtons.map((btn, index) => _jsx(Fragment, { children: btn({ ...buttonProps, onFeatureUsed }) }, index))
+        : [
+            _createElement(ShowAllButton, { ...buttonProps, key: "show-all-btn", density: density, onFeatureUsed: onFeatureUsed }),
+            _createElement(HideAllButton, { ...buttonProps, key: "hide-all-btn", density: density, onFeatureUsed: onFeatureUsed }),
+            _createElement(InvertAllButton, { ...buttonProps, key: "invert-all-btn", density: density, onFeatureUsed: onFeatureUsed }),
+        ];
+    return (_jsx(TelemetryContextProvider, { componentIdentifier: CategoriesTreeComponent.id, onFeatureUsed: onFeatureUsed, onPerformanceMeasured: onPerformanceMeasured, children: _jsx(TreeWithHeader, { buttons: buttons, density: density, filteringProps: {
+                onFilterStart: applyFilter,
+                onFilterClear: clearFilter,
+            }, children: _jsx(CategoriesTree, { ...treeProps, imodel: iModel, activeView: viewport, filter: filter }) }) }));
 }
 //# sourceMappingURL=CategoriesTreeComponent.js.map

package/lib/esm/components/trees/categories-tree/CategoriesTreeComponent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CategoriesTreeComponent.js","sourceRoot":"","sources":["../../../../../src/components/trees/categories-tree/CategoriesTreeComponent.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,~~cAAc,CAAC;AACtB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,~~EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,yBAAyB,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAClF,OAAO,EAAE,~~SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,wBAAwB,EAAE,MAAM,uCAAuC,CAAC;AACjF,OAAO,EAAE,~~UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,~~UAAU~~,EAAE,MAAM,~~8BAA8B~~,CAAC;~~AAC1D~~,OAAO,EAAE,~~SAAS~~,EAAE,MAAM,~~uBAAuB~~,CAAC;~~AAClD~~,OAAO,EAAE,~~YAAY~~,EAAE,MAAM,~~wBAAwB,~~CAAC;~~AACtD~~,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,aAAa,EAAE,~~MAAM~~,~~yBAAyB,CAAC;AACxF,OAAO,~~EAAE,~~aAAa,EAAE,~~MAAM,~~iBAAiB~~,CAAC;~~AAyBhD~~;;;GAGG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAmC,EAAE,EAAE;IAC7E,MAAM,MAAM,GAAG,yBAAyB,EAAE,CAAC;IAC3C,MAAM,QAAQ,GAAG,iBAAiB,EAAE,CAAC;IAErC,IAAI,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE;QACxB,OAAO,IAAI,CAAC;KACb;IAED,OAAO,KAAC,2BAA2B,OAAK,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;AACxF,CAAC,CAAC;AAEF;;;GAGG;AACH,uBAAuB,CAAC,aAAa,GAAG,aAAa,CAAC;AAEtD;;;GAGG;AACH,uBAAuB,CAAC,aAAa,GAAG,aAAa,CAAC;AAEtD;;;GAGG;AACH,uBAAuB,CAAC,eAAe,GAAG,eAAe,CAAC;AAE1D;;;GAGG;AACH,uBAAuB,CAAC,EAAE,GAAG,oBAAoB,CAAC;AAElD;;;GAGG;AACH,uBAAuB,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC,sBAAsB,CAAC,CAAC;AAEtF,SAAS,2BAA2B,CAAC,EACnC,MAAM,EACN,QAAQ,EACR,aAAa,EACb,~~gBAAgB~~,~~EAChB~~,GAAG,SAAS,EAC0E;IACtF,MAAM,~~UAAU~~,GAAG,~~aAAa~~,CAAC,~~SAAS,CAAC,WAAW,~~EAAE,~~MAAM~~,EAAE,~~QAAQ,~~CAAC,CAAC;~~IAC1E~~,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,YAAY,EAAE,CAAC;IAC5D,MAAM,OAAO,GAAG,SAAS,CAAC,OAAO,CAAC;~~IAClC~~,~~OAAO~~,~~CACL,cAAK,SAAS,EAAE,UAAU,CAAC,qBAAqB,EAAE,~~OAAO,~~KAAK~~,~~UAAU,IAAI,SAAS,CAAC,YACpF,MAAC,wBAAwB,IAAC,OAAO,EAAE,gBAAgB,aACjD,KAAC,UAAU,IAAC,~~aAAa~~,EAAE,WAAW,EAAE,aAAa,EAAE,WAAW,EAAE,iBAAiB,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE,OAAO,EAAE,OAAO,YAC9G,aAAa~~;~~wBACZ~~,CAAC,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,KAAC,QAAQ,cAAc,GAAG,CAAC,EAAE,~~QAAQ~~,~~EAAE~~,~~UAAU,~~EAAE,aAAa,EAAE,~~SAAS,~~CAAC,~~aAAa~~,~~EAAE,CAAC,IAA7E,~~KAAK,~~CAAoF~~,CAAC;~~wBAC7I~~,CAAC,CAAC;~~4BACE~~,~~KAAC~~,aAAa,~~IAAC~~,~~QAAQ~~,EAAE,~~QAAQ~~,~~EAAE~~,~~UAAU~~,~~EAAE~~,~~UAAU,EAAqB,~~OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,~~SAAS,CAAC,~~aAAa,~~IAAvE,cAAc,CAA6D~~;~~4BAC1I~~,~~KAAC~~,aAAa,~~IAAC~~,~~QAAQ~~,EAAE,~~QAAQ~~,~~EAAE~~,~~UAAU~~,~~EAAE~~,~~UAAU,EAAqB,~~OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,~~SAAS,CAAC,~~aAAa,~~IAAvE,cAAc,CAA6D~~;~~4BAC1I~~,~~KAAC~~,eAAe,~~IAAC~~,~~QAAQ~~,EAAE,~~QAAQ~~,~~EAAE~~,~~UAAU~~,~~EAAE~~,~~UAAU,EAAuB,~~OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,~~SAAS,CAAC,~~aAAa,~~IAAzE~~,~~gBAAgB,CAA6D~~;~~yBAC/I~~,~~GACM~~,~~EACb~~,~~cAAK~~,~~SAAS~~,~~EAAC~~,~~iBAAiB~~,~~YAC9B~~,~~KAAC~~,~~SAAS,cACP,~~CAAC,EAAE,~~KAAK,~~EAAE,~~MAAM~~,EAAE,EAAE,EAAE,~~CAAC~~,~~CACtB~~,KAAC,cAAc,~~OAAK~~,~~SAAS~~,EAAE,~~MAAM~~,~~EAAE~~,~~MAAM~~,EAAE,~~UAAU~~,~~EAAE~~,~~UAAU~~,EAAE,~~UAAU~~,EAAE,~~QAAQ~~,EAAE,~~KAAK~~,~~EAAE~~,~~KAAK~~,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAI,~~CAC9I~~,~~GACS~~,~~GACR~~,~~IACmB,GACvB,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 ~~\"../Tree.scss\";\nimport classNames from \"classnames\";\nimport~~ { Fragment } from \"react\";\nimport { useActiveIModelConnection, useActiveViewport } from \"@itwin/appui-react\";\nimport { ~~IModelApp } from \"@itwin/core-frontend\";\nimport { UnifiedSelectionProvider } from \"@itwin/presentation-hierarchies-react\";\nimport {~~ TreeWidget } from \"../../../TreeWidget\";\nimport { ~~TreeHeader~~ } from \"../../tree-header/~~TreeHeader~~\";\nimport { ~~AutoSizer~~ } from \"~~../../utils~~/~~AutoSizer~~\";\nimport { ~~useFiltering~~ } from \"../common/~~UseFiltering~~\";\nimport { CategoriesTree } from \"./CategoriesTree\";\nimport { HideAllButton, InvertAllButton, ShowAllButton } from \"./CategoriesTreeButtons\";\~~nimport { useCategories } from \"./UseCategories\";\~~n\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport type { IModelConnection, ScreenViewport } from \"@itwin/core-frontend\";\nimport type { ~~SelectionStorage } from \"@itwin/presentation-hierarchies-react\";\nimport type {~~ CategoriesTreeHeaderButtonProps } from \"./CategoriesTreeButtons\";\n\~~ntype~~ ~~CategoriesTreeProps~~ ~~= ComponentPropsWithoutRef<typeof CategoriesTree>;\n\~~ninterface CategoriesTreeComponentProps\n extends Pick<~~CategoriesTreeProps,~~ \"getSchemaContext\" \| \"~~density~~\" \| \"~~hierarchyLevelConfig~~\" \| \"~~selectionMode~~\" \| \"~~onPerformanceMeasured~~\" \| \~~"onFeatureUsed\"~~> {\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 ~~selectionStorage~~: ~~SelectionStorage~~;\n}\n\n/\n A component that renders `CategoriesTree` and a header with filtering capabilities and header buttons.\n * @public\n /\nexport const CategoriesTreeComponent = (props: CategoriesTreeComponentProps) => {\n const iModel = useActiveIModelConnection();\n const viewport = useActiveViewport();\n\n if (!iModel \|\| !viewport) {\n return null;\n }\n\n return <CategoriesTreeComponentImpl {...props} iModel={iModel} viewport={viewport} />;\n};\n\n/\n Renders a \"Show all\" button that enables display of all categories and their subcategories.\n * @public\n /\nCategoriesTreeComponent.ShowAllButton = ShowAllButton;\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-v2\";\n\n/\n Label of the component. May be used when a creating a `TreeDefinition` for `SelectableTree`.\n * @public\n */\nCategoriesTreeComponent.getLabel = () => TreeWidget.translate(\"categoriesTree.label\");\n\nfunction CategoriesTreeComponentImpl({\n iModel,\n viewport,\n headerButtons,\n ~~selectionStorage~~,\n ...treeProps\n}: CategoriesTreeComponentProps & { iModel: IModelConnection; viewport: ScreenViewport }) {\n const ~~categories~~ = ~~useCategories~~(~~IModelApp.viewManager,~~ ~~iModel,~~ ~~viewport~~);\n const { filter, applyFilter, clearFilter } = useFiltering();\n const density = treeProps.density;\n ~~return (~~\n ~~<div~~ ~~className={classNames(\"tw-tree-with-header\",~~ ~~density~~ ~~=== \"enlarged\" && \"enlarge\")}>\n <UnifiedSelectionProvider storage~~=~~{selectionStorage}>\n <TreeHeader~~ ~~onFilterStart={applyFilter} onFilterClear={clearFilter} onSelectedChanged={() => {}} density={density}>\n {~~headerButtons\n ? headerButtons.map((btn, index) => <Fragment key={index}>{btn({ ~~viewport~~, ~~categories,~~ onFeatureUsed: ~~treeProps.onFeatureUsed~~ })}</Fragment>)\n : [\n <ShowAllButton ~~viewport=~~{~~viewport~~} ~~categories={categories}~~ key=\"show-all-btn\" density={density} onFeatureUsed={~~treeProps.~~onFeatureUsed} />,\n <HideAllButton ~~viewport=~~{~~viewport~~} ~~categories={categories}~~ key=\"hide-all-btn\" density={density} onFeatureUsed={~~treeProps.~~onFeatureUsed} />,\n <InvertAllButton ~~viewport=~~{~~viewport~~} ~~categories={categories}~~ key=\"invert-all-btn\" density={density} onFeatureUsed={~~treeProps.~~onFeatureUsed} />,\n ]}\n ~~</TreeHeader>\~~n <~~div~~ ~~className=\"tw-tree-content\"~~>\n <~~AutoSizer>\~~n {({ ~~width,~~ ~~height~~ }~~) => (~~\n <CategoriesTree {...treeProps} imodel={iModel} ~~categories={categories}~~ activeView={viewport} ~~width={width} height={height}~~ filter={filter} />\n ~~)}\n </AutoSizer>\n </div>\n~~ </~~UnifiedSelectionProvider~~>\n </~~div~~>\n );\n}\n"]}
1	+ {"version":3,"file":"CategoriesTreeComponent.js","sourceRoot":"","sources":["../../../../../src/components/trees/categories-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 { Fragment } from \"react\";\nimport { useActiveIModelConnection, useActiveViewport } from \"@itwin/appui-react\";\nimport { TreeWidget } from \"../../../TreeWidget\";\nimport { TreeWithHeader } from \"../../tree-header/TreeWithHeader\";\nimport { useFiltering } from \"../common/UseFiltering\";\nimport { TelemetryContextProvider } from \"../common/UseTelemetryContext\";\nimport { CategoriesTree } from \"./CategoriesTree\";\nimport { HideAllButton, InvertAllButton, ShowAllButton, useCategoriesTreeButtonProps } from \"./CategoriesTreeButtons\";\n\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport type { IModelConnection, ScreenViewport } from \"@itwin/core-frontend\";\nimport type { CategoriesTreeHeaderButtonProps } from \"./CategoriesTreeButtons\";\n\n/** @public /\ninterface CategoriesTreeComponentProps\n extends Pick<\n ComponentPropsWithoutRef<typeof CategoriesTree>,\n \"getSchemaContext\" \| \"selectionStorage\" \| \"density\" \| \"hierarchyLevelConfig\" \| \"selectionMode\"\n > {\n /\n Renderers of header buttons. Defaults to:\n * ```ts\n * [\n * CategoriesTreeComponent.ShowAllButton,\n * CategoriesTreeComponent.HideAllButton,\n * CategoriesTreeComponent.InvertAllButton,\n * ]\n * ```\n /\n headerButtons?: Array<(props: CategoriesTreeHeaderButtonProps) => React.ReactNode>;\n onPerformanceMeasured?: (featureId: string, duration: number) => void;\n onFeatureUsed?: (feature: string) => void;\n}\n\n/\n A component that renders `CategoriesTree` and a header with filtering capabilities and header buttons.\n * @public\n /\nexport const CategoriesTreeComponent = (props: CategoriesTreeComponentProps) => {\n const iModel = useActiveIModelConnection();\n const viewport = useActiveViewport();\n\n if (!iModel \|\| !viewport) {\n return null;\n }\n\n return <CategoriesTreeComponentImpl {...props} iModel={iModel} viewport={viewport} />;\n};\n\n/\n Renders a \"Show all\" button that enables display of all categories and their subcategories.\n * @public\n /\nCategoriesTreeComponent.ShowAllButton = ShowAllButton;\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-v2\";\n\n/\n Label of the component. May be used when a creating a `TreeDefinition` for `SelectableTree`.\n * @public\n */\nCategoriesTreeComponent.getLabel = () => TreeWidget.translate(\"categoriesTree.label\");\n\nfunction CategoriesTreeComponentImpl({\n iModel,\n viewport,\n headerButtons,\n onPerformanceMeasured,\n onFeatureUsed,\n ...treeProps\n}: CategoriesTreeComponentProps & { iModel: IModelConnection; viewport: ScreenViewport }) {\n const buttonProps = useCategoriesTreeButtonProps({ viewport });\n const { filter, applyFilter, clearFilter } = useFiltering();\n const density = treeProps.density;\n\n const buttons: ReactNode = headerButtons\n ? headerButtons.map((btn, index) => <Fragment key={index}>{btn({ ...buttonProps, onFeatureUsed })}</Fragment>)\n : [\n <ShowAllButton {...buttonProps} key=\"show-all-btn\" density={density} onFeatureUsed={onFeatureUsed} />,\n <HideAllButton {...buttonProps} key=\"hide-all-btn\" density={density} onFeatureUsed={onFeatureUsed} />,\n <InvertAllButton {...buttonProps} key=\"invert-all-btn\" density={density} onFeatureUsed={onFeatureUsed} />,\n ];\n\n return (\n <TelemetryContextProvider componentIdentifier={CategoriesTreeComponent.id} onFeatureUsed={onFeatureUsed} onPerformanceMeasured={onPerformanceMeasured}>\n <TreeWithHeader\n buttons={buttons}\n density={density}\n filteringProps={{\n onFilterStart: applyFilter,\n onFilterClear: clearFilter,\n }}\n >\n <CategoriesTree {...treeProps} imodel={iModel} activeView={viewport} filter={filter} />\n </TreeWithHeader>\n </TelemetryContextProvider>\n );\n}\n"]}

package/lib/esm/components/trees/categories-tree/CategoriesVisibilityHandler.d.ts CHANGED Viewed

@@ -1,22 +1,14 @@
 import { BeEvent } from "@itwin/core-bentley";
 import { HierarchyNode } from "@itwin/presentation-hierarchies";
-import type { CategoryInfo } from "../common/CategoriesVisibilityUtils";
-import type { IModelConnection, ViewManager, Viewport } from "@itwin/core-frontend";
+import type { Viewport } from "@itwin/core-frontend";
 import type { HierarchyVisibilityHandler, VisibilityStatus } from "../common/UseHierarchyVisibility";
 interface CategoriesVisibilityHandlerProps {
-    viewManager: ViewManager;
-    imodel: IModelConnection;
-    categories: CategoryInfo[];
     viewport: Viewport;
-    allViewports?: boolean;
 }
 /** @internal */
 export declare class CategoriesVisibilityHandler implements HierarchyVisibilityHandler {
-    private _viewManager;
-    private _imodel;
     private _pendingVisibilityChange;
     private _viewport;
-    private _useAllViewports;
     constructor(props: CategoriesVisibilityHandlerProps);
     dispose(): void;
     onVisibilityChange: BeEvent<import("@itwin/core-bentley").Listener>;