@itwin/tree-widget-react 3.2.4 → 3.3.0

package/CHANGELOG.md

@@ -1,12 +1,25 @@
 # Change Log - @itwin/tree-widget-react
 
-This log was last generated on Tue, 14 Jan 2025 02:50:44 GMT and should not be manually modified.
+This log was last generated on Mon, 27 Jan 2025 18:30:23 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.3.0
+
+Mon, 27 Jan 2025 18:30:23 GMT
+
+### Minor changes
+
+- Define `type` and `exports` attributes in `package.json`. The `exports attribute prohibits access to APIs that are not intended to be used by external consumers. The `type: "module"` attribute addition moves this package a step closer towards dropping CommonJS support - it's now transpiled from ESM to CommonJS instead of the opposite. ([#1147](https://github.com/iTwin/viewer-components-react/pull/1147))
+- Add support for AppUI 5.x ([#1147](https://github.com/iTwin/viewer-components-react/pull/1147))
+
+### Patches
+
+- Fix visibility button with no content rendering empty tooltip. ([#1145](https://github.com/iTwin/viewer-components-react/pull/1145))
+
 ## 3.2.4
 
-Tue, 14 Jan 2025 02:50:44 GMT
+Tue, 14 Jan 2025 02:51:04 GMT
 
 ### Patches
 

package/lib/cjs/components/SelectableTree.js

@@ -10,8 +10,8 @@ require("./SelectableTree.scss");
 const react_1 = require("react");
 const appui_react_1 = require("@itwin/appui-react");
 const itwinui_react_1 = require("@itwin/itwinui-react");
-const TreeWidget_1 = require("../TreeWidget");
-const TreeSelector_1 = require("./TreeSelector");
+const TreeWidget_js_1 = require("../TreeWidget.js");
+const TreeSelector_js_1 = require("./TreeSelector.js");
 /**
  * A component that renders a tree (combo box) selector and the selected tree component.
  * @public
@@ -27,7 +27,7 @@ exports.SelectableTree = SelectableTree;
 function SelectableTreeContent(props) {
     const { trees: treeDefinitions, imodel } = props;
     const trees = useActiveTrees(treeDefinitions, imodel);
-    return ((0, jsx_runtime_1.jsx)("div", { className: "tree-widget-selectable-tree", children: (0, jsx_runtime_1.jsx)(TreeSelector_1.TreeSelector, { ...getTreeSelectorProps(trees), density: props.density, onPerformanceMeasured: props.onPerformanceMeasured, onFeatureUsed: props.onFeatureUsed }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: "tree-widget-selectable-tree", children: (0, jsx_runtime_1.jsx)(TreeSelector_js_1.TreeSelector, { ...getTreeSelectorProps(trees), density: props.density, onPerformanceMeasured: props.onPerformanceMeasured, onFeatureUsed: props.onFeatureUsed }) }));
 }
 function useActiveTrees(treeDefinitions, imodel) {
     const [trees, setTrees] = (0, react_1.useState)();
@@ -35,7 +35,6 @@ function useActiveTrees(treeDefinitions, imodel) {
         let disposed = false;
         void (async () => {
             const visibleTrees = await getActiveTrees(treeDefinitions, imodel);
-            // istanbul ignore else
             if (!disposed) {
                 setTrees(visibleTrees);
             }
@@ -80,7 +79,7 @@ function getTreeSelectorProps(trees) {
                 {
                     id: "no-trees",
                     label: "",
-                    render: () => ((0, jsx_runtime_1.jsx)(itwinui_react_1.Flex, { justifyContent: "center", alignItems: "center", className: "tree-widget-no-trees-container", children: TreeWidget_1.TreeWidget.translate("selectableTree.noTrees") })),
+                    render: () => ((0, jsx_runtime_1.jsx)(itwinui_react_1.Flex, { justifyContent: "center", alignItems: "center", className: "tree-widget-no-trees-container", children: TreeWidget_js_1.TreeWidget.translate("selectableTree.noTrees") })),
                 },
             ],
         };

package/lib/cjs/components/SelectableTree.js.map

@@ -1 +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 { Flex, ProgressLinear } from \"@itwin/itwinui-react\";\nimport { TreeWidget } from \"../TreeWidget\";\nimport { TreeSelector } from \"./TreeSelector\";\n\nimport type { PropsWithChildren } from \"react\";\nimport type { IModelConnection } from \"@itwin/core-frontend\";\nimport type { TreeContentDefinition, TreeSelectorProps } from \"./TreeSelector\";\n\n/**\n * Props for rendering trees\n * @public\n */\nexport interface SelectableTreeRenderProps {\n  density?: \"enlarged\" | \"default\";\n  onPerformanceMeasured?: (featureId: string, elapsedTime: number) => void;\n  onFeatureUsed?: (feature: string) => void;\n}\n\n/**\n * Definition of a tree component displayed in `SelectableTree`.\n * @public\n */\nexport interface SelectableTreeDefinition {\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: SelectableTreeRenderProps) => React.ReactNode;\n  /**\n   * Callback that is used to determine if tree should be shown for current active iModel connection.\n   * If callback is `undefined` tree is shown for all iModel connections.\n   */\n  shouldShow?: (imodel: IModelConnection) => Promise<boolean>;\n  /** Icon to render before tree label in tree selector */\n  startIcon?: React.ReactNode;\n}\n\n/**\n * Props for `SelectableTree`\n * @public\n */\nexport interface SelectableTreeProps {\n  trees: SelectableTreeDefinition[];\n  density?: \"enlarged\" | \"default\";\n  onPerformanceMeasured?: (feature: string, elapsedTime: number) => void;\n  onFeatureUsed?: (feature: string) => void;\n}\n\n/**\n * A component that renders a tree (combo box) selector and the selected tree component.\n * @public\n */\nexport function SelectableTree(props: SelectableTreeProps) {\n  const imodel = useActiveIModelConnection();\n  if (!imodel) {\n    return null;\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\n        {...getTreeSelectorProps(trees)}\n        density={props.density}\n        onPerformanceMeasured={props.onPerformanceMeasured}\n        onFeatureUsed={props.onFeatureUsed}\n      />\n    </div>\n  );\n}\n\nfunction useActiveTrees(treeDefinitions: SelectableTreeDefinition[], 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: SelectableTreeDefinition[], imodel: IModelConnection): Promise<TreeContentDefinition[]> {\n  const handleDefinition = async (treeDef: SelectableTreeDefinition) => {\n    if (treeDef.shouldShow !== undefined && !(await treeDef.shouldShow(imodel))) {\n      return undefined;\n    }\n    return {\n      id: treeDef.id,\n      label: treeDef.getLabel(),\n      render: treeDef.render,\n      startIcon: treeDef.startIcon,\n    };\n  };\n\n  return (await Promise.all(treeDefinitions.map(handleDefinition))).filter((tree) => tree !== undefined) as TreeContentDefinition[];\n}\n\nfunction 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: () => (\n            <Flex justifyContent=\"center\" alignItems=\"center\" className=\"tree-widget-no-trees-container\">\n              {TreeWidget.translate(\"selectableTree.noTrees\")}\n            </Flex>\n          ),\n        },\n      ],\n    };\n  }\n\n  return {\n    defaultSelectedContentId: trees[0].id,\n    trees,\n  };\n}\n\nfunction Delayed({ delay = 200, children }: PropsWithChildren<{ delay?: number }>) {\n  const [show, setShow] = useState(false);\n\n  useEffect(() => {\n    const id = setTimeout(() => {\n      setShow(true);\n    }, delay);\n    return () => {\n      clearTimeout(id);\n    };\n  }, [delay]);\n\n  if (!show) {\n    return null;\n  }\n\n  return <>{children}</>;\n}\n"]}
+{"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 { Flex, ProgressLinear } from \"@itwin/itwinui-react\";\nimport { TreeWidget } from \"../TreeWidget.js\";\nimport { TreeSelector } from \"./TreeSelector.js\";\n\nimport type { PropsWithChildren } from \"react\";\nimport type { IModelConnection } from \"@itwin/core-frontend\";\nimport type { TreeContentDefinition, TreeSelectorProps } from \"./TreeSelector.js\";\n\n/**\n * Props for rendering trees\n * @public\n */\nexport interface SelectableTreeRenderProps {\n  density?: \"enlarged\" | \"default\";\n  onPerformanceMeasured?: (featureId: string, elapsedTime: number) => void;\n  onFeatureUsed?: (feature: string) => void;\n}\n\n/**\n * Definition of a tree component displayed in `SelectableTree`.\n * @public\n */\nexport interface SelectableTreeDefinition {\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: SelectableTreeRenderProps) => React.ReactNode;\n  /**\n   * Callback that is used to determine if tree should be shown for current active iModel connection.\n   * If callback is `undefined` tree is shown for all iModel connections.\n   */\n  shouldShow?: (imodel: IModelConnection) => Promise<boolean>;\n  /** Icon to render before tree label in tree selector */\n  startIcon?: React.ReactNode;\n}\n\n/**\n * Props for `SelectableTree`\n * @public\n */\nexport interface SelectableTreeProps {\n  trees: SelectableTreeDefinition[];\n  density?: \"enlarged\" | \"default\";\n  onPerformanceMeasured?: (feature: string, elapsedTime: number) => void;\n  onFeatureUsed?: (feature: string) => void;\n}\n\n/**\n * A component that renders a tree (combo box) selector and the selected tree component.\n * @public\n */\nexport function SelectableTree(props: SelectableTreeProps) {\n  const imodel = useActiveIModelConnection();\n  if (!imodel) {\n    return null;\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\n        {...getTreeSelectorProps(trees)}\n        density={props.density}\n        onPerformanceMeasured={props.onPerformanceMeasured}\n        onFeatureUsed={props.onFeatureUsed}\n      />\n    </div>\n  );\n}\n\nfunction useActiveTrees(treeDefinitions: SelectableTreeDefinition[], imodel: IModelConnection) {\n  const [trees, setTrees] = useState<TreeContentDefinition[]>();\n\n  useEffect(() => {\n    let disposed = false;\n    void (async () => {\n      const visibleTrees = await getActiveTrees(treeDefinitions, imodel);\n      if (!disposed) {\n        setTrees(visibleTrees);\n      }\n    })();\n\n    return () => {\n      disposed = true;\n    };\n  }, [treeDefinitions, imodel]);\n\n  return trees;\n}\n\nasync function getActiveTrees(treeDefinitions: SelectableTreeDefinition[], imodel: IModelConnection): Promise<TreeContentDefinition[]> {\n  const handleDefinition = async (treeDef: SelectableTreeDefinition) => {\n    if (treeDef.shouldShow !== undefined && !(await treeDef.shouldShow(imodel))) {\n      return undefined;\n    }\n    return {\n      id: treeDef.id,\n      label: treeDef.getLabel(),\n      render: treeDef.render,\n      startIcon: treeDef.startIcon,\n    };\n  };\n\n  return (await Promise.all(treeDefinitions.map(handleDefinition))).filter((tree) => tree !== undefined) as TreeContentDefinition[];\n}\n\nfunction 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: () => (\n            <Flex justifyContent=\"center\" alignItems=\"center\" className=\"tree-widget-no-trees-container\">\n              {TreeWidget.translate(\"selectableTree.noTrees\")}\n            </Flex>\n          ),\n        },\n      ],\n    };\n  }\n\n  return {\n    defaultSelectedContentId: trees[0].id,\n    trees,\n  };\n}\n\nfunction Delayed({ delay = 200, children }: PropsWithChildren<{ delay?: number }>) {\n  const [show, setShow] = useState(false);\n\n  useEffect(() => {\n    const id = setTimeout(() => {\n      setShow(true);\n    }, delay);\n    return () => {\n      clearTimeout(id);\n    };\n  }, [delay]);\n\n  if (!show) {\n    return null;\n  }\n\n  return <>{children}</>;\n}\n"]}

package/lib/cjs/components/TreeSelector.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import "./TreeSelector.scss";
-import type { SelectableTreeRenderProps } from "./SelectableTree";
+import type { SelectableTreeRenderProps } from "./SelectableTree.js";
 /**
  * A definition for trees displayed in `TreeSelector`
  * @internal

package/lib/cjs/components/TreeSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeSelector.js","sourceRoot":"","sources":["../../../src/components/TreeSelector.tsx"],"names":[],"mappings":";;;;AAAA;;;gGAGgG;AAEhG,+BAA6B;AAC7B,iCAA0C;AAC1C,wDAAwD;AA4BxD;;;;GAIG;AACH,SAAgB,YAAY,CAAC,KAAwB;IACnD,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,IAAA,gBAAQ,EAAC,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,IAAA,eAAO,EAAC,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,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,CAAC,CAA2B,CAAC;IACrH,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,OAAO,CACL,iCAAK,SAAS,EAAC,+CAA+C,aAC5D,gCAAK,SAAS,EAAC,sDAAsD,YAClE,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CACrB,uBAAC,sBAAM,IACL,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,eAAe,CAAC,EAAE,EACzB,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,EACpC,QAAQ,EAAE,CAAC,MAAc,EAAE,EAAE;wBAC3B,KAAK,CAAC,aAAa,EAAE,CAAC,UAAU,MAAM,EAAE,CAAC,CAAC;wBAC1C,oBAAoB,CAAC,MAAM,CAAC,CAAC;oBAC/B,CAAC,EACD,YAAY,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,CAAC,CACnC,uBAAC,wBAAQ,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,gCAAK,SAAS,EAAC,uDAAuD,YACnE,eAAe,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,qBAAqB,EAAE,KAAK,CAAC,qBAAqB,EAAE,aAAa,EAAE,KAAK,CAAC,aAAa,EAAE,CAAC,GACxI,IACF,CACP,CAAC;AACJ,CAAC;AAlCD,oCAkCC","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 { SelectableTreeRenderProps } 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: SelectableTreeRenderProps) => React.ReactNode;\n  startIcon?: 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  onPerformanceMeasured?: (feature: string, elapsedTime: number) => void;\n  onFeatureUsed?: (feature: string) => void;\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, startIcon: c.startIcon })) 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            options={options}\n            value={selectedContent.id}\n            size={isEnlarged ? \"large\" : \"small\"}\n            onChange={(treeId: string) => {\n              props.onFeatureUsed?.(`choose-${treeId}`);\n              setSelectedContentId(treeId);\n            }}\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\">\n        {selectedContent?.render({ density: props.density, onPerformanceMeasured: props.onPerformanceMeasured, onFeatureUsed: props.onFeatureUsed })}\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"TreeSelector.js","sourceRoot":"","sources":["../../../src/components/TreeSelector.tsx"],"names":[],"mappings":";;;;AAAA;;;gGAGgG;AAEhG,+BAA6B;AAC7B,iCAA0C;AAC1C,wDAAwD;AA4BxD;;;;GAIG;AACH,SAAgB,YAAY,CAAC,KAAwB;IACnD,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,IAAA,gBAAQ,EAAC,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,IAAA,eAAO,EAAC,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,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,CAAC,CAA2B,CAAC;IACrH,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,OAAO,CACL,iCAAK,SAAS,EAAC,+CAA+C,aAC5D,gCAAK,SAAS,EAAC,sDAAsD,YAClE,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CACrB,uBAAC,sBAAM,IACL,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,eAAe,CAAC,EAAE,EACzB,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,EACpC,QAAQ,EAAE,CAAC,MAAc,EAAE,EAAE;wBAC3B,KAAK,CAAC,aAAa,EAAE,CAAC,UAAU,MAAM,EAAE,CAAC,CAAC;wBAC1C,oBAAoB,CAAC,MAAM,CAAC,CAAC;oBAC/B,CAAC,EACD,YAAY,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,CAAC,CACnC,uBAAC,wBAAQ,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,gCAAK,SAAS,EAAC,uDAAuD,YACnE,eAAe,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,qBAAqB,EAAE,KAAK,CAAC,qBAAqB,EAAE,aAAa,EAAE,KAAK,CAAC,aAAa,EAAE,CAAC,GACxI,IACF,CACP,CAAC;AACJ,CAAC;AAlCD,oCAkCC","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 { SelectableTreeRenderProps } from \"./SelectableTree.js\";\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: SelectableTreeRenderProps) => React.ReactNode;\n  startIcon?: 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  onPerformanceMeasured?: (feature: string, elapsedTime: number) => void;\n  onFeatureUsed?: (feature: string) => void;\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, startIcon: c.startIcon })) 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            options={options}\n            value={selectedContent.id}\n            size={isEnlarged ? \"large\" : \"small\"}\n            onChange={(treeId: string) => {\n              props.onFeatureUsed?.(`choose-${treeId}`);\n              setSelectedContentId(treeId);\n            }}\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\">\n        {selectedContent?.render({ density: props.density, onPerformanceMeasured: props.onPerformanceMeasured, onFeatureUsed: props.onFeatureUsed })}\n      </div>\n    </div>\n  );\n}\n"]}

package/lib/cjs/components/TreeWidgetUiItemsProvider.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import "./TreeWidgetUiItemsProvider.scss";
 import type { Widget } from "@itwin/appui-react";
-import type { SelectableTreeDefinition, SelectableTreeProps } from "./SelectableTree";
+import type { SelectableTreeDefinition, SelectableTreeProps } from "./SelectableTree.js";
 /**
  * Props for `createWidget`.
  * @public

package/lib/cjs/components/TreeWidgetUiItemsProvider.js

@@ -13,8 +13,8 @@ const appui_react_1 = require("@itwin/appui-react");
 const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
 const itwinui_illustrations_react_1 = require("@itwin/itwinui-illustrations-react");
 const itwinui_react_1 = require("@itwin/itwinui-react");
-const TreeWidget_1 = require("../TreeWidget");
-const SelectableTree_1 = require("./SelectableTree");
+const TreeWidget_js_1 = require("../TreeWidget.js");
+const SelectableTree_js_1 = require("./SelectableTree.js");
 /**
  * Creates a tree widget definition that should be returned from `UiItemsProvider.getWidgets()`.
  * @public
@@ -22,7 +22,7 @@ const SelectableTree_1 = require("./SelectableTree");
 function createTreeWidget(props) {
     return {
         id: "tree-widget-react:trees",
-        label: TreeWidget_1.TreeWidget.translate("widget.label"),
+        label: TreeWidget_js_1.TreeWidget.translate("widget.label"),
         icon: (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgHierarchyTree, {}),
         layouts: {
             standard: {
@@ -40,11 +40,11 @@ exports.createTreeWidget = createTreeWidget;
  */
 function TreeWidgetComponent(props) {
     const ref = useTreeWidgetTransientState();
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: "tree-widget", children: (0, jsx_runtime_1.jsx)(react_error_boundary_1.ErrorBoundary, { FallbackComponent: ErrorState, children: (0, jsx_runtime_1.jsx)(SelectableTree_1.SelectableTree, { ...props }) }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: "tree-widget", children: (0, jsx_runtime_1.jsx)(react_error_boundary_1.ErrorBoundary, { FallbackComponent: ErrorState, children: (0, jsx_runtime_1.jsx)(SelectableTree_js_1.SelectableTree, { ...props }) }) }));
 }
 exports.TreeWidgetComponent = TreeWidgetComponent;
 function ErrorState({ resetErrorBoundary }) {
-    return ((0, jsx_runtime_1.jsx)(itwinui_react_1.NonIdealState, { svg: (0, jsx_runtime_1.jsx)(itwinui_illustrations_react_1.SvgError, {}), heading: TreeWidget_1.TreeWidget.translate("errorState.title"), description: TreeWidget_1.TreeWidget.translate("errorState.description"), actions: (0, jsx_runtime_1.jsx)(itwinui_react_1.Button, { styleType: "high-visibility", onClick: resetErrorBoundary, children: TreeWidget_1.TreeWidget.translate("errorState.retryButtonLabel") }) }));
+    return ((0, jsx_runtime_1.jsx)(itwinui_react_1.NonIdealState, { svg: (0, jsx_runtime_1.jsx)(itwinui_illustrations_react_1.SvgError, {}), heading: TreeWidget_js_1.TreeWidget.translate("errorState.title"), description: TreeWidget_js_1.TreeWidget.translate("errorState.description"), actions: (0, jsx_runtime_1.jsx)(itwinui_react_1.Button, { styleType: "high-visibility", onClick: resetErrorBoundary, children: TreeWidget_js_1.TreeWidget.translate("errorState.retryButtonLabel") }) }));
 }
 function useTreeWidgetTransientState() {
     const { ref, persist, restore } = useTreeStorage();

package/lib/cjs/components/TreeWidgetUiItemsProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeWidgetUiItemsProvider.js","sourceRoot":"","sources":["../../../src/components/TreeWidgetUiItemsProvider.tsx"],"names":[],"mappings":";;;;AAAA;;;gGAGgG;AAEhG,4CAA0C;AAC1C,iCAA+B;AAC/B,+DAAqD;AACrD,oDAA8F;AAC9F,oEAA8D;AAC9D,oFAA8D;AAC9D,wDAA6D;AAC7D,8CAA2C;AAC3C,qDAAkD;AA4BlD;;;GAGG;AACH,SAAgB,gBAAgB,CAAC,KAAsB;IACrD,OAAO;QACL,EAAE,EAAE,yBAAyB;QAC7B,KAAK,EAAE,uBAAU,CAAC,SAAS,CAAC,cAAc,CAAC;QAC3C,IAAI,EAAE,uBAAC,sCAAgB,KAAG;QAC1B,OAAO,EAAE;YACP,QAAQ,EAAE;gBACR,OAAO,EAAE,+BAAiB,CAAC,KAAK;gBAChC,QAAQ,EAAE,gCAAkB,CAAC,KAAK;aACnC;SACF;QACD,OAAO,EAAE,CACP,uBAAC,mBAAmB,IAClB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,qBAAqB,EAAE,KAAK,CAAC,qBAAqB,EAClD,aAAa,EAAE,KAAK,CAAC,aAAa,GAClC,CACH;KACF,CAAC;AACJ,CAAC;AApBD,4CAoBC;AAED;;;GAGG;AACH,SAAgB,mBAAmB,CAAC,KAA0B;IAC5D,MAAM,GAAG,GAAG,2BAA2B,EAAE,CAAC;IAC1C,OAAO,CACL,gCAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,aAAa,YACpC,uBAAC,oCAAa,IAAC,iBAAiB,EAAE,UAAU,YAC1C,uBAAC,+BAAc,OAAK,KAAK,GAAI,GACf,GACZ,CACP,CAAC;AACJ,CAAC;AATD,kDASC;AAED,SAAS,UAAU,CAAC,EAAE,kBAAkB,EAAiB;IACvD,OAAO,CACL,uBAAC,6BAAa,IACZ,GAAG,EAAE,uBAAC,sCAAQ,KAAG,EACjB,OAAO,EAAE,uBAAU,CAAC,SAAS,CAAC,kBAAkB,CAAC,EACjD,WAAW,EAAE,uBAAU,CAAC,SAAS,CAAC,wBAAwB,CAAC,EAC3D,OAAO,EACL,uBAAC,sBAAM,IAAC,SAAS,EAAE,iBAAiB,EAAE,OAAO,EAAE,kBAAkB,YAC9D,uBAAU,CAAC,SAAS,CAAC,6BAA6B,CAAC,GAC7C,GAEX,CACH,CAAC;AACJ,CAAC;AAED,SAAS,2BAA2B;IAClC,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,cAAc,EAAE,CAAC;IACnD,IAAA,+BAAiB,EAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACpC,OAAO,GAAG,CAAC;AACb,CAAC;AAQD,SAAS,cAAc;IACrB,MAAM,GAAG,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IACzC,MAAM,SAAS,GAAG,IAAA,cAAM,GAAsB,CAAC;IAE/C,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,OAAO,GAAG,CAAC,OAAO,EAAE,aAAa,CAAC,6BAA6B,CAAC,CAAC;IACnE,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;QACjC,SAAS,CAAC,OAAO,GAAG,SAAS,EAAE,SAAS,CAAC;IAC3C,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,UAAU,CAAC,GAAG,EAAE;YACd,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;YACjC,IAAI,SAAS,IAAI,SAAS,CAAC,OAAO,EAAE;gBAClC,SAAS,CAAC,SAAS,GAAG,SAAS,CAAC,OAAO,CAAC;aACzC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC;AACnC,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport \"./TreeWidgetUiItemsProvider.scss\";\nimport { useRef } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\nimport { StagePanelLocation, StagePanelSection, useTransientState } from \"@itwin/appui-react\";\nimport { SvgHierarchyTree } from \"@itwin/itwinui-icons-react\";\nimport { SvgError } from \"@itwin/itwinui-illustrations-react\";\nimport { Button, NonIdealState } from \"@itwin/itwinui-react\";\nimport { TreeWidget } from \"../TreeWidget\";\nimport { SelectableTree } from \"./SelectableTree\";\n\nimport type { Widget } from \"@itwin/appui-react\";\nimport type { SelectableTreeDefinition, SelectableTreeProps } from \"./SelectableTree\";\nimport type { FallbackProps } from \"react-error-boundary\";\nimport type { Ref } from \"react\";\n\n/**\n * Props for `createWidget`.\n * @public\n */\ninterface TreeWidgetProps {\n  /**\n   * Trees to show in the widget.\n   * @see ModelsTreeComponent\n   * @see CategoriesTreeComponent\n   * @see ExternalSourcesTreeComponent\n   * @see IModelContentTreeComponent\n   */\n  trees: SelectableTreeDefinition[];\n  /** Modifies the density of the tree widget. `enlarged` widget contains larger content */\n  density?: \"enlarged\" | \"default\";\n  /** Callback that is invoked when performance of tracked feature is measured. */\n  onPerformanceMeasured?: (feature: string, elapsedTime: number) => void;\n  /** Callback that is invoked when a tracked feature is used. */\n  onFeatureUsed?: (feature: string) => void;\n}\n\n/**\n * Creates a tree widget definition that should be returned from `UiItemsProvider.getWidgets()`.\n * @public\n */\nexport function createTreeWidget(props: TreeWidgetProps): Widget {\n  return {\n    id: \"tree-widget-react:trees\",\n    label: TreeWidget.translate(\"widget.label\"),\n    icon: <SvgHierarchyTree />,\n    layouts: {\n      standard: {\n        section: StagePanelSection.Start,\n        location: StagePanelLocation.Right,\n      },\n    },\n    content: (\n      <TreeWidgetComponent\n        trees={props.trees}\n        density={props.density}\n        onPerformanceMeasured={props.onPerformanceMeasured}\n        onFeatureUsed={props.onFeatureUsed}\n      />\n    ),\n  };\n}\n\n/**\n * Tree widget component which allows selecting which tree to render.\n * @public\n */\nexport function TreeWidgetComponent(props: SelectableTreeProps) {\n  const ref = useTreeWidgetTransientState();\n  return (\n    <div ref={ref} className=\"tree-widget\">\n      <ErrorBoundary FallbackComponent={ErrorState}>\n        <SelectableTree {...props} />\n      </ErrorBoundary>\n    </div>\n  );\n}\n\nfunction ErrorState({ resetErrorBoundary }: FallbackProps) {\n  return (\n    <NonIdealState\n      svg={<SvgError />}\n      heading={TreeWidget.translate(\"errorState.title\")}\n      description={TreeWidget.translate(\"errorState.description\")}\n      actions={\n        <Button styleType={\"high-visibility\"} onClick={resetErrorBoundary}>\n          {TreeWidget.translate(\"errorState.retryButtonLabel\")}\n        </Button>\n      }\n    />\n  );\n}\n\nfunction useTreeWidgetTransientState() {\n  const { ref, persist, restore } = useTreeStorage();\n  useTransientState(persist, restore);\n  return ref;\n}\n\ninterface UseTreeStorageResult {\n  ref: Ref<HTMLDivElement>;\n  persist: () => void;\n  restore: () => void;\n}\n\nfunction useTreeStorage(): UseTreeStorageResult {\n  const ref = useRef<HTMLDivElement>(null);\n  const scrollTop = useRef<number | undefined>();\n\n  const getContainer = () => {\n    return ref.current?.querySelector(\"#tw-tree-renderer-container\");\n  };\n\n  const persist = () => {\n    const container = getContainer();\n    scrollTop.current = container?.scrollTop;\n  };\n\n  const restore = () => {\n    setTimeout(() => {\n      const container = getContainer();\n      if (container && scrollTop.current) {\n        container.scrollTop = scrollTop.current;\n      }\n    });\n  };\n\n  return { ref, persist, restore };\n}\n"]}
+{"version":3,"file":"TreeWidgetUiItemsProvider.js","sourceRoot":"","sources":["../../../src/components/TreeWidgetUiItemsProvider.tsx"],"names":[],"mappings":";;;;AAAA;;;gGAGgG;AAEhG,4CAA0C;AAC1C,iCAA+B;AAC/B,+DAAqD;AACrD,oDAA8F;AAC9F,oEAA8D;AAC9D,oFAA8D;AAC9D,wDAA6D;AAC7D,oDAA8C;AAC9C,2DAAqD;AA4BrD;;;GAGG;AACH,SAAgB,gBAAgB,CAAC,KAAsB;IACrD,OAAO;QACL,EAAE,EAAE,yBAAyB;QAC7B,KAAK,EAAE,0BAAU,CAAC,SAAS,CAAC,cAAc,CAAC;QAC3C,IAAI,EAAE,uBAAC,sCAAgB,KAAG;QAC1B,OAAO,EAAE;YACP,QAAQ,EAAE;gBACR,OAAO,EAAE,+BAAiB,CAAC,KAAK;gBAChC,QAAQ,EAAE,gCAAkB,CAAC,KAAK;aACnC;SACF;QACD,OAAO,EAAE,CACP,uBAAC,mBAAmB,IAClB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,qBAAqB,EAAE,KAAK,CAAC,qBAAqB,EAClD,aAAa,EAAE,KAAK,CAAC,aAAa,GAClC,CACH;KACF,CAAC;AACJ,CAAC;AApBD,4CAoBC;AAED;;;GAGG;AACH,SAAgB,mBAAmB,CAAC,KAA0B;IAC5D,MAAM,GAAG,GAAG,2BAA2B,EAAE,CAAC;IAC1C,OAAO,CACL,gCAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,aAAa,YACpC,uBAAC,oCAAa,IAAC,iBAAiB,EAAE,UAAU,YAC1C,uBAAC,kCAAc,OAAK,KAAK,GAAI,GACf,GACZ,CACP,CAAC;AACJ,CAAC;AATD,kDASC;AAED,SAAS,UAAU,CAAC,EAAE,kBAAkB,EAAiB;IACvD,OAAO,CACL,uBAAC,6BAAa,IACZ,GAAG,EAAE,uBAAC,sCAAQ,KAAG,EACjB,OAAO,EAAE,0BAAU,CAAC,SAAS,CAAC,kBAAkB,CAAC,EACjD,WAAW,EAAE,0BAAU,CAAC,SAAS,CAAC,wBAAwB,CAAC,EAC3D,OAAO,EACL,uBAAC,sBAAM,IAAC,SAAS,EAAE,iBAAiB,EAAE,OAAO,EAAE,kBAAkB,YAC9D,0BAAU,CAAC,SAAS,CAAC,6BAA6B,CAAC,GAC7C,GAEX,CACH,CAAC;AACJ,CAAC;AAED,SAAS,2BAA2B;IAClC,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,cAAc,EAAE,CAAC;IACnD,IAAA,+BAAiB,EAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACpC,OAAO,GAAG,CAAC;AACb,CAAC;AAQD,SAAS,cAAc;IACrB,MAAM,GAAG,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IACzC,MAAM,SAAS,GAAG,IAAA,cAAM,GAAsB,CAAC;IAE/C,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,OAAO,GAAG,CAAC,OAAO,EAAE,aAAa,CAAC,6BAA6B,CAAC,CAAC;IACnE,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;QACjC,SAAS,CAAC,OAAO,GAAG,SAAS,EAAE,SAAS,CAAC;IAC3C,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,UAAU,CAAC,GAAG,EAAE;YACd,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;YACjC,IAAI,SAAS,IAAI,SAAS,CAAC,OAAO,EAAE;gBAClC,SAAS,CAAC,SAAS,GAAG,SAAS,CAAC,OAAO,CAAC;aACzC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC;AACnC,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport \"./TreeWidgetUiItemsProvider.scss\";\nimport { useRef } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\nimport { StagePanelLocation, StagePanelSection, useTransientState } from \"@itwin/appui-react\";\nimport { SvgHierarchyTree } from \"@itwin/itwinui-icons-react\";\nimport { SvgError } from \"@itwin/itwinui-illustrations-react\";\nimport { Button, NonIdealState } from \"@itwin/itwinui-react\";\nimport { TreeWidget } from \"../TreeWidget.js\";\nimport { SelectableTree } from \"./SelectableTree.js\";\n\nimport type { Widget } from \"@itwin/appui-react\";\nimport type { SelectableTreeDefinition, SelectableTreeProps } from \"./SelectableTree.js\";\nimport type { FallbackProps } from \"react-error-boundary\";\nimport type { Ref } from \"react\";\n\n/**\n * Props for `createWidget`.\n * @public\n */\ninterface TreeWidgetProps {\n  /**\n   * Trees to show in the widget.\n   * @see ModelsTreeComponent\n   * @see CategoriesTreeComponent\n   * @see ExternalSourcesTreeComponent\n   * @see IModelContentTreeComponent\n   */\n  trees: SelectableTreeDefinition[];\n  /** Modifies the density of the tree widget. `enlarged` widget contains larger content */\n  density?: \"enlarged\" | \"default\";\n  /** Callback that is invoked when performance of tracked feature is measured. */\n  onPerformanceMeasured?: (feature: string, elapsedTime: number) => void;\n  /** Callback that is invoked when a tracked feature is used. */\n  onFeatureUsed?: (feature: string) => void;\n}\n\n/**\n * Creates a tree widget definition that should be returned from `UiItemsProvider.getWidgets()`.\n * @public\n */\nexport function createTreeWidget(props: TreeWidgetProps): Widget {\n  return {\n    id: \"tree-widget-react:trees\",\n    label: TreeWidget.translate(\"widget.label\"),\n    icon: <SvgHierarchyTree />,\n    layouts: {\n      standard: {\n        section: StagePanelSection.Start,\n        location: StagePanelLocation.Right,\n      },\n    },\n    content: (\n      <TreeWidgetComponent\n        trees={props.trees}\n        density={props.density}\n        onPerformanceMeasured={props.onPerformanceMeasured}\n        onFeatureUsed={props.onFeatureUsed}\n      />\n    ),\n  };\n}\n\n/**\n * Tree widget component which allows selecting which tree to render.\n * @public\n */\nexport function TreeWidgetComponent(props: SelectableTreeProps) {\n  const ref = useTreeWidgetTransientState();\n  return (\n    <div ref={ref} className=\"tree-widget\">\n      <ErrorBoundary FallbackComponent={ErrorState}>\n        <SelectableTree {...props} />\n      </ErrorBoundary>\n    </div>\n  );\n}\n\nfunction ErrorState({ resetErrorBoundary }: FallbackProps) {\n  return (\n    <NonIdealState\n      svg={<SvgError />}\n      heading={TreeWidget.translate(\"errorState.title\")}\n      description={TreeWidget.translate(\"errorState.description\")}\n      actions={\n        <Button styleType={\"high-visibility\"} onClick={resetErrorBoundary}>\n          {TreeWidget.translate(\"errorState.retryButtonLabel\")}\n        </Button>\n      }\n    />\n  );\n}\n\nfunction useTreeWidgetTransientState() {\n  const { ref, persist, restore } = useTreeStorage();\n  useTransientState(persist, restore);\n  return ref;\n}\n\ninterface UseTreeStorageResult {\n  ref: Ref<HTMLDivElement>;\n  persist: () => void;\n  restore: () => void;\n}\n\nfunction useTreeStorage(): UseTreeStorageResult {\n  const ref = useRef<HTMLDivElement>(null);\n  const scrollTop = useRef<number | undefined>();\n\n  const getContainer = () => {\n    return ref.current?.querySelector(\"#tw-tree-renderer-container\");\n  };\n\n  const persist = () => {\n    const container = getContainer();\n    scrollTop.current = container?.scrollTop;\n  };\n\n  const restore = () => {\n    setTimeout(() => {\n      const container = getContainer();\n      if (container && scrollTop.current) {\n        container.scrollTop = scrollTop.current;\n      }\n    });\n  };\n\n  return { ref, persist, restore };\n}\n"]}

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

@@ -14,15 +14,14 @@ const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
 const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
 const itwinui_react_1 = require("@itwin/itwinui-react");
-const TreeWidget_1 = require("../../TreeWidget");
-const FocusedInstancesContext_1 = require("../trees/common/FocusedInstancesContext");
+const TreeWidget_js_1 = require("../../TreeWidget.js");
+const FocusedInstancesContext_js_1 = require("../trees/common/FocusedInstancesContext.js");
 function TreeHeader(props) {
     const { filteringProps, density, className, children } = props;
     const [isSearchOpen, setIsSearchOpen] = (0, react_1.useState)(false);
-    const { enabled: instanceFocusEnabled } = (0, FocusedInstancesContext_1.useFocusedInstancesContext)();
+    const { enabled: instanceFocusEnabled } = (0, FocusedInstancesContext_js_1.useFocusedInstancesContext)();
     const size = density === "enlarged" ? "large" : "small";
     (0, react_1.useEffect)(() => {
-        // istanbul ignore if
         if (filteringProps?.isDisabled) {
             setIsSearchOpen(false);
         }
@@ -47,27 +46,27 @@ function DebouncedSearchBox({ isOpened, selectedResultIndex, resultCount, onSele
             clearTimeout(timeoutId);
         };
     }, [inputValue, delay]);
-    return ((0, jsx_runtime_1.jsxs)(itwinui_react_1.SearchBox, { expandable: true, isExpanded: isOpened, onExpand: onOpen, onCollapse: onClose, size: size, className: (0, classnames_1.default)("tree-widget-search-box", !isOpened && "contracted"), isDisabled: isDisabled, children: [(0, jsx_runtime_1.jsx)(itwinui_react_1.SearchBox.CollapsedState, { children: (0, jsx_runtime_1.jsx)(itwinui_react_1.SearchBox.ExpandButton, { title: TreeWidget_1.TreeWidget.translate("header.searchBox.searchForSomething"), "aria-label": TreeWidget_1.TreeWidget.translate("header.searchBox.open"), size: size, styleType: "borderless" }) }), (0, jsx_runtime_1.jsxs)(itwinui_react_1.SearchBox.ExpandedState, { children: [(0, jsx_runtime_1.jsx)(itwinui_react_1.SearchBox.Input, { placeholder: TreeWidget_1.TreeWidget.translate("header.searchBox.search"), onChange: (e) => setInputValue(e.currentTarget.value) }), (0, jsx_runtime_1.jsx)(SearchResultStepper, { selectedIndex: selectedResultIndex, total: resultCount, onStep: onSelectedResultChanged, size: size }), (0, jsx_runtime_1.jsx)(itwinui_react_1.SearchBox.CollapseButton, { onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)(itwinui_react_1.SearchBox, { expandable: true, isExpanded: isOpened, onExpand: onOpen, onCollapse: onClose, size: size, className: (0, classnames_1.default)("tree-widget-search-box", !isOpened && "contracted"), isDisabled: isDisabled, children: [(0, jsx_runtime_1.jsx)(itwinui_react_1.SearchBox.CollapsedState, { children: (0, jsx_runtime_1.jsx)(itwinui_react_1.SearchBox.ExpandButton, { title: TreeWidget_js_1.TreeWidget.translate("header.searchBox.searchForSomething"), "aria-label": TreeWidget_js_1.TreeWidget.translate("header.searchBox.open"), size: size, styleType: "borderless" }) }), (0, jsx_runtime_1.jsxs)(itwinui_react_1.SearchBox.ExpandedState, { children: [(0, jsx_runtime_1.jsx)(itwinui_react_1.SearchBox.Input, { placeholder: TreeWidget_js_1.TreeWidget.translate("header.searchBox.search"), onChange: (e) => setInputValue(e.currentTarget.value) }), (0, jsx_runtime_1.jsx)(SearchResultStepper, { selectedIndex: selectedResultIndex, total: resultCount, onStep: onSelectedResultChanged, size: size }), (0, jsx_runtime_1.jsx)(itwinui_react_1.SearchBox.CollapseButton, { onClick: () => {
                             setInputValue("");
                             onClose();
-                        }, size: size, "aria-label": TreeWidget_1.TreeWidget.translate("header.searchBox.close") })] })] }));
+                        }, size: size, "aria-label": TreeWidget_js_1.TreeWidget.translate("header.searchBox.close") })] })] }));
 }
 function HeaderButtons(props) {
     const className = (0, classnames_1.default)("button-container", props.contracted && "contracted");
     return ((0, jsx_runtime_1.jsx)(itwinui_react_1.ButtonGroup, { className: className, overflowButton: (overflowStart) => ((0, jsx_runtime_1.jsx)(itwinui_react_1.DropdownMenu, { menuItems: () => react_1.Children.toArray(props.children)
                 .slice(overflowStart)
-                .map((btn, index) => ((0, jsx_runtime_1.jsx)("li", { className: "dropdown-item", role: "menuitem", children: btn }, index))), className: "tree-header-button-dropdown-container", children: (0, jsx_runtime_1.jsx)(itwinui_react_1.IconButton, { label: TreeWidget_1.TreeWidget.translate("header.dropdownMore"), styleType: "borderless", size: props.size, children: (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgMore, {}) }) })), children: props.children }));
+                .map((btn, index) => ((0, jsx_runtime_1.jsx)("li", { className: "dropdown-item", role: "menuitem", children: btn }, index))), className: "tree-header-button-dropdown-container", children: (0, jsx_runtime_1.jsx)(itwinui_react_1.IconButton, { label: TreeWidget_js_1.TreeWidget.translate("header.dropdownMore"), styleType: "borderless", size: props.size, children: (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgMore, {}) }) })), children: props.children }));
 }
 function SearchResultStepper(props) {
     const { selectedIndex = 1, total, onStep } = props;
     if (!total) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "searchbox-stepping-count", children: `${selectedIndex}/${total}` }), (0, jsx_runtime_1.jsx)(itwinui_react_1.Divider, { orientation: "vertical" }), (0, jsx_runtime_1.jsx)(itwinui_react_1.SearchBox.Button, { title: TreeWidget_1.TreeWidget.translate("header.searchBox.previous"), size: props.size, onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "searchbox-stepping-count", children: `${selectedIndex}/${total}` }), (0, jsx_runtime_1.jsx)(itwinui_react_1.Divider, { orientation: "vertical" }), (0, jsx_runtime_1.jsx)(itwinui_react_1.SearchBox.Button, { title: TreeWidget_js_1.TreeWidget.translate("header.searchBox.previous"), size: props.size, onClick: () => {
                     if (selectedIndex > 1) {
                         onStep(selectedIndex - 1);
                     }
-                }, children: (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgCaretUpSmall, {}) }), (0, jsx_runtime_1.jsx)(itwinui_react_1.SearchBox.Button, { title: TreeWidget_1.TreeWidget.translate("header.searchBox.next"), size: props.size, onClick: () => {
+                }, children: (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgCaretUpSmall, {}) }), (0, jsx_runtime_1.jsx)(itwinui_react_1.SearchBox.Button, { title: TreeWidget_js_1.TreeWidget.translate("header.searchBox.next"), size: props.size, onClick: () => {
                     if (selectedIndex < total) {
                         onStep(selectedIndex + 1);
                     }

package/lib/cjs/components/tree-header/TreeHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeHeader.js","sourceRoot":"","sources":["../../../../src/components/tree-header/TreeHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport \"./TreeHeader.scss\";\nimport classnames from \"classnames\";\nimport { Children, useEffect, useRef, useState } from \"react\";\nimport { SvgCaretDownSmall, SvgCaretUpSmall, SvgMore } from \"@itwin/itwinui-icons-react\";\nimport { ButtonGroup, Divider, DropdownMenu, IconButton, SearchBox } from \"@itwin/itwinui-react\";\nimport { TreeWidget } from \"../../TreeWidget\";\nimport { useFocusedInstancesContext } from \"../trees/common/FocusedInstancesContext\";\n\nimport type { PropsWithChildren } from \"react\";\nimport type { Viewport } from \"@itwin/core-frontend\";\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  /** Should the search box be disabled */\n  isDisabled?: boolean;\n}\n\ninterface TreeHeaderProps {\n  filteringProps?: TreeFilteringProps;\n  /** Modifies the density of tree header. `enlarged` header contains larger content */\n  density?: \"default\" | \"enlarged\";\n  className?: string;\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 || props.filteringProps?.isDisabled}\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 label={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"]}
+{"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.js\";\nimport { useFocusedInstancesContext } from \"../trees/common/FocusedInstancesContext.js\";\n\nimport type { PropsWithChildren } from \"react\";\nimport type { Viewport } from \"@itwin/core-frontend\";\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  /** Should the search box be disabled */\n  isDisabled?: boolean;\n}\n\ninterface TreeHeaderProps {\n  filteringProps?: TreeFilteringProps;\n  /** Modifies the density of tree header. `enlarged` header contains larger content */\n  density?: \"default\" | \"enlarged\";\n  className?: string;\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    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 || props.filteringProps?.isDisabled}\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 label={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/cjs/components/tree-header/TreeWithHeader.d.ts

@@ -1,6 +1,6 @@
 import "./TreeWithHeader.scss";
 import type { PropsWithChildren, ReactNode } from "react";
-import type { TreeFilteringProps } from "./TreeHeader";
+import type { TreeFilteringProps } from "./TreeHeader.js";
 /** @beta */
 interface TreeWithHeaderProps {
     density?: "enlarged" | "default";

package/lib/cjs/components/tree-header/TreeWithHeader.js

@@ -11,10 +11,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  *--------------------------------------------------------------------------------------------*/
 require("./TreeWithHeader.scss");
 const classnames_1 = __importDefault(require("classnames"));
-const TreeHeader_1 = require("./TreeHeader");
+const TreeHeader_js_1 = require("./TreeHeader.js");
 /** @beta */
 function TreeWithHeader({ filteringProps, buttons, density, children }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("tw-tree-with-header", density === "enlarged" && "enlarge"), children: [(0, jsx_runtime_1.jsx)(TreeHeader_1.TreeHeader, { filteringProps: filteringProps, density: density, children: buttons }), (0, jsx_runtime_1.jsx)("div", { className: "tw-tree-content", children: children })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("tw-tree-with-header", density === "enlarged" && "enlarge"), children: [(0, jsx_runtime_1.jsx)(TreeHeader_js_1.TreeHeader, { filteringProps: filteringProps, density: density, children: buttons }), (0, jsx_runtime_1.jsx)("div", { className: "tw-tree-content", children: children })] }));
 }
 exports.TreeWithHeader = TreeWithHeader;
 //# sourceMappingURL=TreeWithHeader.js.map

package/lib/cjs/components/tree-header/TreeWithHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeWithHeader.js","sourceRoot":"","sources":["../../../../src/components/tree-header/TreeWithHeader.tsx"],"names":[],"mappings":";;;;;;;AAAA;;;gGAGgG;AAEhG,iCAA+B;AAC/B,4DAAoC;AACpC,6CAA0C;AAY1C,YAAY;AACZ,SAAgB,cAAc,CAAC,EAAE,cAAc,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAA0C;IACnH,OAAO,CACL,iCAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,qBAAqB,EAAE,OAAO,KAAK,UAAU,IAAI,SAAS,CAAC,aACpF,uBAAC,uBAAU,IAAC,cAAc,EAAE,cAAc,EAAE,OAAO,EAAE,OAAO,YACzD,OAAO,GACG,EACb,gCAAK,SAAS,EAAC,iBAAiB,YAAE,QAAQ,GAAO,IAC7C,CACP,CAAC;AACJ,CAAC;AATD,wCASC","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"]}
+{"version":3,"file":"TreeWithHeader.js","sourceRoot":"","sources":["../../../../src/components/tree-header/TreeWithHeader.tsx"],"names":[],"mappings":";;;;;;;AAAA;;;gGAGgG;AAEhG,iCAA+B;AAC/B,4DAAoC;AACpC,mDAA6C;AAY7C,YAAY;AACZ,SAAgB,cAAc,CAAC,EAAE,cAAc,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAA0C;IACnH,OAAO,CACL,iCAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,qBAAqB,EAAE,OAAO,KAAK,UAAU,IAAI,SAAS,CAAC,aACpF,uBAAC,0BAAU,IAAC,cAAc,EAAE,cAAc,EAAE,OAAO,EAAE,OAAO,YACzD,OAAO,GACG,EACb,gCAAK,SAAS,EAAC,iBAAiB,YAAE,QAAQ,GAAO,IAC7C,CACP,CAAC;AACJ,CAAC;AATD,wCASC","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.js\";\n\nimport type { PropsWithChildren, ReactNode } from \"react\";\nimport type { TreeFilteringProps } from \"./TreeHeader.js\";\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/cjs/components/trees/categories-tree/CategoriesTree.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import type { UseCategoriesTreeProps } from "./UseCategoriesTree";
-import type { VisibilityTreeProps } from "../common/components/VisibilityTree";
+import type { UseCategoriesTreeProps } from "./UseCategoriesTree.js";
+import type { VisibilityTreeProps } from "../common/components/VisibilityTree.js";
 /** @beta */
 export type CategoriesTreeProps = Pick<VisibilityTreeProps, "imodel" | "getSchemaContext" | "selectionStorage" | "density" | "selectionMode"> & UseCategoriesTreeProps & {
     hierarchyLevelConfig?: {

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

@@ -6,17 +6,17 @@ const jsx_runtime_1 = require("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.
  *--------------------------------------------------------------------------------------------*/
-const VisibilityTree_1 = require("../common/components/VisibilityTree");
-const VisibilityTreeRenderer_1 = require("../common/components/VisibilityTreeRenderer");
-const UseCategoriesTree_1 = require("./UseCategoriesTree");
+const VisibilityTree_js_1 = require("../common/components/VisibilityTree.js");
+const VisibilityTreeRenderer_js_1 = require("../common/components/VisibilityTreeRenderer.js");
+const UseCategoriesTree_js_1 = require("./UseCategoriesTree.js");
 /** @beta */
 function CategoriesTree({ imodel, getSchemaContext, selectionStorage, activeView, filter, density, hierarchyLevelConfig, selectionMode, onCategoriesFiltered, }) {
-    const { categoriesTreeProps, rendererProps } = (0, UseCategoriesTree_1.useCategoriesTree)({
+    const { categoriesTreeProps, rendererProps } = (0, UseCategoriesTree_js_1.useCategoriesTree)({
         filter,
         activeView,
         onCategoriesFiltered,
     });
-    return ((0, jsx_runtime_1.jsx)(VisibilityTree_1.VisibilityTree, { ...categoriesTreeProps, imodel: imodel, selectionStorage: selectionStorage, getSchemaContext: getSchemaContext, hierarchyLevelSizeLimit: hierarchyLevelConfig?.sizeLimit, density: density, selectionMode: selectionMode ?? "none", treeRenderer: (treeProps) => (0, jsx_runtime_1.jsx)(VisibilityTreeRenderer_1.VisibilityTreeRenderer, { ...treeProps, ...rendererProps }) }));
+    return ((0, jsx_runtime_1.jsx)(VisibilityTree_js_1.VisibilityTree, { ...categoriesTreeProps, imodel: imodel, selectionStorage: selectionStorage, getSchemaContext: getSchemaContext, hierarchyLevelSizeLimit: hierarchyLevelConfig?.sizeLimit, density: density, selectionMode: selectionMode ?? "none", treeRenderer: (treeProps) => (0, jsx_runtime_1.jsx)(VisibilityTreeRenderer_js_1.VisibilityTreeRenderer, { ...treeProps, ...rendererProps }) }));
 }
 exports.CategoriesTree = CategoriesTree;
 //# sourceMappingURL=CategoriesTree.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CategoriesTree.js","sourceRoot":"","sources":["../../../../../src/components/trees/categories-tree/CategoriesTree.tsx"],"names":[],"mappings":";;;;AAAA;;;gGAGgG;AAEhG,wEAAqE;AACrE,wFAAqF;AACrF,2DAAwD;AAaxD,YAAY;AACZ,SAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,gBAAgB,EAChB,gBAAgB,EAChB,UAAU,EACV,MAAM,EACN,OAAO,EACP,oBAAoB,EACpB,aAAa,EACb,oBAAoB,GACA;IACpB,MAAM,EAAE,mBAAmB,EAAE,aAAa,EAAE,GAAG,IAAA,qCAAiB,EAAC;QAC/D,MAAM;QACN,UAAU;QACV,oBAAoB;KACrB,CAAC,CAAC;IAEH,OAAO,CACL,uBAAC,+BAAc,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,uBAAC,+CAAsB,OAAK,SAAS,KAAM,aAAa,GAAI,GACzF,CACH,CAAC;AACJ,CAAC;AA7BD,wCA6BC","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 { UseCategoriesTreeProps } from \"./UseCategoriesTree\";\nimport type { VisibilityTreeProps } from \"../common/components/VisibilityTree\";\n\n/** @beta */\nexport type CategoriesTreeProps = Pick<VisibilityTreeProps, \"imodel\" | \"getSchemaContext\" | \"selectionStorage\" | \"density\" | \"selectionMode\"> &\n  UseCategoriesTreeProps & {\n    hierarchyLevelConfig?: {\n      sizeLimit?: number;\n    };\n  };\n\n/** @beta */\nexport function CategoriesTree({\n  imodel,\n  getSchemaContext,\n  selectionStorage,\n  activeView,\n  filter,\n  density,\n  hierarchyLevelConfig,\n  selectionMode,\n  onCategoriesFiltered,\n}: CategoriesTreeProps) {\n  const { categoriesTreeProps, rendererProps } = useCategoriesTree({\n    filter,\n    activeView,\n    onCategoriesFiltered,\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"]}
+{"version":3,"file":"CategoriesTree.js","sourceRoot":"","sources":["../../../../../src/components/trees/categories-tree/CategoriesTree.tsx"],"names":[],"mappings":";;;;AAAA;;;gGAGgG;AAEhG,8EAAwE;AACxE,8FAAwF;AACxF,iEAA2D;AAa3D,YAAY;AACZ,SAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,gBAAgB,EAChB,gBAAgB,EAChB,UAAU,EACV,MAAM,EACN,OAAO,EACP,oBAAoB,EACpB,aAAa,EACb,oBAAoB,GACA;IACpB,MAAM,EAAE,mBAAmB,EAAE,aAAa,EAAE,GAAG,IAAA,wCAAiB,EAAC;QAC/D,MAAM;QACN,UAAU;QACV,oBAAoB;KACrB,CAAC,CAAC;IAEH,OAAO,CACL,uBAAC,kCAAc,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,uBAAC,kDAAsB,OAAK,SAAS,KAAM,aAAa,GAAI,GACzF,CACH,CAAC;AACJ,CAAC;AA7BD,wCA6BC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport { VisibilityTree } from \"../common/components/VisibilityTree.js\";\nimport { VisibilityTreeRenderer } from \"../common/components/VisibilityTreeRenderer.js\";\nimport { useCategoriesTree } from \"./UseCategoriesTree.js\";\n\nimport type { UseCategoriesTreeProps } from \"./UseCategoriesTree.js\";\nimport type { VisibilityTreeProps } from \"../common/components/VisibilityTree.js\";\n\n/** @beta */\nexport type CategoriesTreeProps = Pick<VisibilityTreeProps, \"imodel\" | \"getSchemaContext\" | \"selectionStorage\" | \"density\" | \"selectionMode\"> &\n  UseCategoriesTreeProps & {\n    hierarchyLevelConfig?: {\n      sizeLimit?: number;\n    };\n  };\n\n/** @beta */\nexport function CategoriesTree({\n  imodel,\n  getSchemaContext,\n  selectionStorage,\n  activeView,\n  filter,\n  density,\n  hierarchyLevelConfig,\n  selectionMode,\n  onCategoriesFiltered,\n}: CategoriesTreeProps) {\n  const { categoriesTreeProps, rendererProps } = useCategoriesTree({\n    filter,\n    activeView,\n    onCategoriesFiltered,\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/cjs/components/trees/categories-tree/CategoriesTreeButtons.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import type { CategoryInfo } from "../common/CategoriesVisibilityUtils";
-import type { TreeHeaderButtonProps } from "../../tree-header/TreeHeader";
+import type { CategoryInfo } from "../common/CategoriesVisibilityUtils.js";
+import type { TreeHeaderButtonProps } from "../../tree-header/TreeHeader.js";
 import type { Viewport } from "@itwin/core-frontend";
 /**
  * Props that get passed to `CategoriesTreeComponent` header button renderer.

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

@@ -10,8 +10,8 @@ const react_1 = require("react");
 const components_react_1 = require("@itwin/components-react");
 const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
 const itwinui_react_1 = require("@itwin/itwinui-react");
-const TreeWidget_1 = require("../../../TreeWidget");
-const CategoriesVisibilityUtils_1 = require("../common/CategoriesVisibilityUtils");
+const TreeWidget_js_1 = require("../../../TreeWidget.js");
+const CategoriesVisibilityUtils_js_1 = require("../common/CategoriesVisibilityUtils.js");
 /**
  * Custom hook that creates props required to render `CategoriesTreeComponent` header button.
  *
@@ -44,31 +44,31 @@ function useCategoriesTreeButtonProps({ viewport }) {
 exports.useCategoriesTreeButtonProps = useCategoriesTreeButtonProps;
 /** @public */
 function ShowAllButton(props) {
-    return ((0, jsx_runtime_1.jsx)(itwinui_react_1.IconButton, { size: props.density === "enlarged" ? "large" : "small", styleType: "borderless", label: TreeWidget_1.TreeWidget.translate("categoriesTree.buttons.showAll.tooltip"), onClick: () => {
+    return ((0, jsx_runtime_1.jsx)(itwinui_react_1.IconButton, { size: props.density === "enlarged" ? "large" : "small", styleType: "borderless", label: TreeWidget_js_1.TreeWidget.translate("categoriesTree.buttons.showAll.tooltip"), onClick: () => {
             props.onFeatureUsed?.(`categories-tree-showall`);
-            void (0, CategoriesVisibilityUtils_1.showAllCategories)(props.categories.map((category) => category.categoryId), props.viewport);
+            void (0, CategoriesVisibilityUtils_js_1.showAllCategories)(props.categories.map((category) => category.categoryId), props.viewport);
         }, children: (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgVisibilityShow, {}) }));
 }
 exports.ShowAllButton = ShowAllButton;
 /** @public */
 function HideAllButton(props) {
-    return ((0, jsx_runtime_1.jsx)(itwinui_react_1.IconButton, { size: props.density === "enlarged" ? "large" : "small", styleType: "borderless", label: TreeWidget_1.TreeWidget.translate("categoriesTree.buttons.hideAll.tooltip"), onClick: () => {
+    return ((0, jsx_runtime_1.jsx)(itwinui_react_1.IconButton, { size: props.density === "enlarged" ? "large" : "small", styleType: "borderless", label: TreeWidget_js_1.TreeWidget.translate("categoriesTree.buttons.hideAll.tooltip"), onClick: () => {
             props.onFeatureUsed?.(`categories-tree-hideall`);
-            void (0, CategoriesVisibilityUtils_1.hideAllCategories)(props.categories.map((category) => category.categoryId), props.viewport);
+            void (0, CategoriesVisibilityUtils_js_1.hideAllCategories)(props.categories.map((category) => category.categoryId), props.viewport);
         }, children: (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgVisibilityHide, {}) }));
 }
 exports.HideAllButton = HideAllButton;
 /** @public */
 function InvertAllButton(props) {
-    return ((0, jsx_runtime_1.jsx)(itwinui_react_1.IconButton, { label: TreeWidget_1.TreeWidget.translate("categoriesTree.buttons.invert.tooltip"), size: props.density === "enlarged" ? "large" : "small", styleType: "borderless", onClick: () => {
+    return ((0, jsx_runtime_1.jsx)(itwinui_react_1.IconButton, { label: TreeWidget_js_1.TreeWidget.translate("categoriesTree.buttons.invert.tooltip"), size: props.density === "enlarged" ? "large" : "small", styleType: "borderless", onClick: () => {
             props.onFeatureUsed?.(`categories-tree-invert`);
-            void (0, CategoriesVisibilityUtils_1.invertAllCategories)(props.categories, props.viewport);
+            void (0, CategoriesVisibilityUtils_js_1.invertAllCategories)(props.categories, props.viewport);
         }, children: (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgVisibilityHalf, {}) }));
 }
 exports.InvertAllButton = InvertAllButton;
 const EMPTY_CATEGORIES_ARRAY = [];
 function useCategories(viewport) {
-    const categoriesPromise = (0, react_1.useMemo)(async () => (0, CategoriesVisibilityUtils_1.loadCategoriesFromViewport)(viewport), [viewport]);
+    const categoriesPromise = (0, react_1.useMemo)(async () => (0, CategoriesVisibilityUtils_js_1.loadCategoriesFromViewport)(viewport), [viewport]);
     return (0, components_react_1.useAsyncValue)(categoriesPromise) ?? EMPTY_CATEGORIES_ARRAY;
 }
 exports.useCategories = useCategories;

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

@@ -1 +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, useState } 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 *\n * Example:\n * ```tsx\n * const { buttonProps, onCategoriesFiltered } = useCategoriesTreeButtonProps({ viewport });\n * <TreeWithHeader\n *   buttons={[\n *     <CategoriesTreeComponent.ShowAllButton {...buttonProps} />,\n *     <CategoriesTreeComponent.HideAllButton {...buttonProps} />,\n *   ]}\n * >\n *   <CategoriesTree {...treeProps} onCategoriesFiltered={onCategoriesFiltered} />\n * </TreeWithHeader>\n * ```\n *\n * @public\n */\nexport function useCategoriesTreeButtonProps({ viewport }: { viewport: Viewport }): {\n  buttonProps: Pick<CategoriesTreeHeaderButtonProps, \"categories\" | \"viewport\">;\n  onCategoriesFiltered: (categories: CategoryInfo[] | undefined) => void;\n} {\n  const [filteredCategories, setFilteredCategories] = useState<CategoryInfo[] | undefined>();\n  const categories = useCategories(viewport);\n  return {\n    buttonProps: {\n      viewport,\n      categories: filteredCategories ?? categories,\n    },\n    onCategoriesFiltered: setFilteredCategories,\n  };\n}\n\n/** @public */\nexport type CategoriesTreeHeaderButtonType = (props: CategoriesTreeHeaderButtonProps) => JSX.Element | null;\n\n/** @public */\nexport function ShowAllButton(props: CategoriesTreeHeaderButtonProps) {\n  return (\n    <IconButton\n      size={props.density === \"enlarged\" ? \"large\" : \"small\"}\n      styleType=\"borderless\"\n      label={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      label={TreeWidget.translate(\"categoriesTree.buttons.hideAll.tooltip\")}\n      onClick={() => {\n        props.onFeatureUsed?.(`categories-tree-hideall`);\n        void hideAllCategories(\n          props.categories.map((category) => category.categoryId),\n          props.viewport,\n        );\n      }}\n    >\n      <SvgVisibilityHide />\n    </IconButton>\n  );\n}\n\n/** @public */\nexport function InvertAllButton(props: CategoriesTreeHeaderButtonProps) {\n  return (\n    <IconButton\n      label={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"]}
+{"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, useState } 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.js\";\nimport { hideAllCategories, invertAllCategories, loadCategoriesFromViewport, showAllCategories } from \"../common/CategoriesVisibilityUtils.js\";\n\nimport type { CategoryInfo } from \"../common/CategoriesVisibilityUtils.js\";\nimport type { TreeHeaderButtonProps } from \"../../tree-header/TreeHeader.js\";\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 *\n * Example:\n * ```tsx\n * const { buttonProps, onCategoriesFiltered } = useCategoriesTreeButtonProps({ viewport });\n * <TreeWithHeader\n *   buttons={[\n *     <CategoriesTreeComponent.ShowAllButton {...buttonProps} />,\n *     <CategoriesTreeComponent.HideAllButton {...buttonProps} />,\n *   ]}\n * >\n *   <CategoriesTree {...treeProps} onCategoriesFiltered={onCategoriesFiltered} />\n * </TreeWithHeader>\n * ```\n *\n * @public\n */\nexport function useCategoriesTreeButtonProps({ viewport }: { viewport: Viewport }): {\n  buttonProps: Pick<CategoriesTreeHeaderButtonProps, \"categories\" | \"viewport\">;\n  onCategoriesFiltered: (categories: CategoryInfo[] | undefined) => void;\n} {\n  const [filteredCategories, setFilteredCategories] = useState<CategoryInfo[] | undefined>();\n  const categories = useCategories(viewport);\n  return {\n    buttonProps: {\n      viewport,\n      categories: filteredCategories ?? categories,\n    },\n    onCategoriesFiltered: setFilteredCategories,\n  };\n}\n\n/** @public */\nexport type CategoriesTreeHeaderButtonType = (props: CategoriesTreeHeaderButtonProps) => JSX.Element | null;\n\n/** @public */\nexport function ShowAllButton(props: CategoriesTreeHeaderButtonProps) {\n  return (\n    <IconButton\n      size={props.density === \"enlarged\" ? \"large\" : \"small\"}\n      styleType=\"borderless\"\n      label={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      label={TreeWidget.translate(\"categoriesTree.buttons.hideAll.tooltip\")}\n      onClick={() => {\n        props.onFeatureUsed?.(`categories-tree-hideall`);\n        void hideAllCategories(\n          props.categories.map((category) => category.categoryId),\n          props.viewport,\n        );\n      }}\n    >\n      <SvgVisibilityHide />\n    </IconButton>\n  );\n}\n\n/** @public */\nexport function InvertAllButton(props: CategoriesTreeHeaderButtonProps) {\n  return (\n    <IconButton\n      label={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/cjs/components/trees/categories-tree/CategoriesTreeComponent.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import type { CategoriesTreeProps } from "./CategoriesTree";
-import type { CategoriesTreeHeaderButtonProps, CategoriesTreeHeaderButtonType } from "./CategoriesTreeButtons";
+import type { CategoriesTreeProps } from "./CategoriesTree.js";
+import type { CategoriesTreeHeaderButtonProps, CategoriesTreeHeaderButtonType } from "./CategoriesTreeButtons.js";
 /** @public */
 interface CategoriesTreeComponentProps extends Pick<CategoriesTreeProps, "getSchemaContext" | "selectionStorage" | "density" | "hierarchyLevelConfig" | "selectionMode"> {
     /**