npm - @itwin/tree-widget-react - Versions diffs - 3.2.4 → 3.4.0 - Mend

@itwin/tree-widget-react 3.2.4 → 3.4.0

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

Files changed (479) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,34 @@
 # 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 Tue, 04 Feb 2025 15:29:40 GMT and should not be manually modified.
 <!-- Start content -->
+## 3.4.0
+Tue, 04 Feb 2025 15:29:40 GMT
+### Minor changes
+- Expose `FocusedInstancesContextProvider` and `useFocusedInstancesContext` to allow using `ModelsTreeComponent.ToggleInstancesFocusButton` from outside of `ModelsTreeComponent` and accesing the context from other React components. ([#1175](https://github.com/iTwin/viewer-components-react/pull/1175))
+- Add `filterButtonsVisibility` prop to `TreeRenderer`. The prop allows to control visibility of hierarchy level filtering buttons in the tree: `show-on-hover` (default) shows them on hover or focus, `hide` only shows them when a node is filtered. ([#1178](https://github.com/iTwin/viewer-components-react/pull/1178))
+## 3.3.0
+Mon, 27 Jan 2025 18:30:40 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/README.md CHANGED Viewed

@@ -162,6 +162,7 @@ Example:
 <!-- BEGIN EXTRACTION -->
 ```tsx
+import { useCallback } from "react";
 import { TreeWithHeader, useModelsTree, useModelsTreeButtonProps, VisibilityTree, VisibilityTreeRenderer } from "@itwin/tree-widget-react";
 import type { SelectionStorage } from "@itwin/unified-selection";
 import type { IModelConnection, Viewport } from "@itwin/core-frontend";
@@ -324,11 +325,9 @@ function CustomCategoriesTreeRenderer(props: CustomCategoriesTreeRendererProps)
     },
     [getLabel],
   );
   const getSublabel = useCallback<Required<VisibilityTreeRendererProps>["getSublabel"]>(() => {
     return <>Custom sub label</>;
   }, []);
   return <VisibilityTreeRenderer {...props} getLabel={getLabelCallback} getSublabel={getSublabel} />;
 }
@@ -342,7 +341,6 @@ interface CustomCategoriesTreeProps {
 function CustomCategoriesTreeComponent({ imodel, viewport, getSchemaContext, selectionStorage }: CustomCategoriesTreeProps) {
   const { buttonProps } = useCategoriesTreeButtonProps({ viewport });
   const { categoriesTreeProps, rendererProps } = useCategoriesTree({ activeView: viewport, filter: "" });
   return (
     <TreeWithHeader
       buttons={[

package/lib/cjs/package.json ADDED Viewed

	@@ -0,0 +1 @@
1	+ { "type": "commonjs" }

package/lib/cjs/tree-widget-react/TreeWidget.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TreeWidget.js","sourceRoot":"","sources":["../../../src/tree-widget-react/TreeWidget.ts"],"names":[],"mappings":";AAAA;;;gGAGgG;;;AAEhG,oDAAiE;AACjE,wDAAiD;AAIjD;;;GAGG;AACH,MAAa,UAAU;IAIrB;;;OAGG;IACI,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,IAAmB;QAChD,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,OAAO;SACR;QAED,UAAU,CAAC,YAAY,GAAG,IAAI,CAAC;QAC/B,UAAU,CAAC,KAAK,GAAG,IAAI,IAAI,yBAAS,CAAC,YAAY,CAAC;QAClD,OAAO,UAAU,CAAC,KAAK,CAAC,iBAAiB,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IACtE,CAAC;IAED,wEAAwE;IACjE,MAAM,CAAC,SAAS;QACrB,IAAI,UAAU,CAAC,KAAK,EAAE;YACpB,UAAU,CAAC,KAAK,CAAC,mBAAmB,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;YAC/D,UAAU,CAAC,KAAK,GAAG,SAAS,CAAC;SAC9B;QAED,UAAU,CAAC,YAAY,GAAG,KAAK,CAAC;IAClC,CAAC;IAED,iEAAiE;IAC1D,MAAM,KAAK,IAAI;QACpB,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE;YACrB,MAAM,IAAI,0BAAY,CAAC,2BAAa,CAAC,KAAK,EAAE,4BAA4B,CAAC,CAAC;SAC3E;QACD,OAAO,UAAU,CAAC,KAAK,CAAC;IAC1B,CAAC;IAED,kDAAkD;IAC3C,MAAM,KAAK,aAAa;QAC7B,OAAO,YAAY,CAAC;IACtB,CAAC;IAED;OACG;IACI,MAAM,CAAC,SAAS,CAAC,GAAsB,EAAE,OAA4B;QAC1E,MAAM,SAAS,GAAG,GAAG,UAAU,CAAC,aAAa,IAAI,GAAG,EAAE,CAAC;QACvD,OAAO,UAAU,CAAC,IAAI,CAAC,kBAAkB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IAChE,CAAC;CACF;AA/CD,gCA+CC","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 { BentleyError, BentleyStatus } from \"@itwin/core-common\";\nimport { IModelApp } from \"@itwin/core-frontend\";\n\nimport type { Localization, TranslationOptions } from \"@itwin/core-common\";\n\n/**\n * Entry point for static initialization required by various components used in the package.\n * @public\n */\nexport class TreeWidget {\n private static _i18n?: Localization;\n private static _initialized?: boolean;\n\n /**\n * Called by IModelApp to initialize the Tree Widget\n * @param i18n - The internationalization service created by the IModelApp.\n */\n public static async initialize(i18n?: Localization): Promise<void> {\n if (this._initialized) {\n return;\n }\n\n TreeWidget._initialized = true;\n TreeWidget._i18n = i18n ?? IModelApp.localization;\n return TreeWidget._i18n.registerNamespace(TreeWidget.i18nNamespace);\n }\n\n /** Unregisters the TreeWidget internationalization service namespace */\n public static terminate() {\n if (TreeWidget._i18n) {\n TreeWidget._i18n.unregisterNamespace(TreeWidget.i18nNamespace);\n TreeWidget._i18n = undefined;\n }\n\n TreeWidget._initialized = false;\n }\n\n /** The internationalization service created by the IModelApp. */\n public static get i18n(): Localization {\n if (!TreeWidget._i18n) {\n throw new BentleyError(BentleyStatus.ERROR, \"TreeWidget not initialized\");\n }\n return TreeWidget._i18n;\n }\n\n /** The internationalization service namespace. */\n public static get i18nNamespace(): string {\n return \"TreeWidget\";\n }\n\n /** Calls i18n.translateWithNamespace with the \"TreeWidget\" namespace. Do NOT include the namespace in the key.\n */\n public static translate(key: string | string[], options?: TranslationOptions): string {\n const stringKey = `${TreeWidget.i18nNamespace}:${key}`;\n return TreeWidget.i18n.getLocalizedString(stringKey, options);\n }\n}\n"]}

package/lib/cjs/{components → tree-widget-react/components}/SelectableTree.js RENAMED Viewed

@@ -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/tree-widget-react/components/SelectableTree.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SelectableTree.js","sourceRoot":"","sources":["../../../../src/tree-widget-react/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/{esm → cjs/tree-widget-react}/components/TreeSelector.d.ts RENAMED Viewed

@@ -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/tree-widget-react/components/TreeSelector.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TreeSelector.js","sourceRoot":"","sources":["../../../../src/tree-widget-react/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 → tree-widget-react/components}/TreeWidgetUiItemsProvider.d.ts RENAMED Viewed

@@ -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 → tree-widget-react/components}/TreeWidgetUiItemsProvider.js RENAMED Viewed

@@ -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/tree-widget-react/components/TreeWidgetUiItemsProvider.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TreeWidgetUiItemsProvider.js","sourceRoot":"","sources":["../../../../src/tree-widget-react/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-widget-react/components}/tree-header/TreeHeader.js RENAMED Viewed

@@ -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/tree-widget-react/components/tree-header/TreeHeader.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TreeHeader.js","sourceRoot":"","sources":["../../../../../src/tree-widget-react/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-widget-react/components}/tree-header/TreeWithHeader.d.ts RENAMED Viewed

@@ -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-widget-react/components}/tree-header/TreeWithHeader.js RENAMED Viewed

@@ -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/tree-widget-react/components/tree-header/TreeWithHeader.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TreeWithHeader.js","sourceRoot":"","sources":["../../../../../src/tree-widget-react/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/{esm → cjs/tree-widget-react}/components/trees/categories-tree/CategoriesTree.d.ts RENAMED Viewed

@@ -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 → tree-widget-react/components}/trees/categories-tree/CategoriesTree.js RENAMED Viewed

@@ -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/tree-widget-react/components/trees/categories-tree/CategoriesTree.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CategoriesTree.js","sourceRoot":"","sources":["../../../../../../src/tree-widget-react/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/{esm → cjs/tree-widget-react}/components/trees/categories-tree/CategoriesTreeButtons.d.ts RENAMED Viewed

@@ -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 → tree-widget-react/components}/trees/categories-tree/CategoriesTreeButtons.js RENAMED Viewed

@@ -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/{esm → cjs/tree-widget-react}/components/trees/categories-tree/CategoriesTreeButtons.js.map RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CategoriesTreeButtons.js","sourceRoot":"","sources":["~~../../../../../~~src/components/trees/categories-tree/CategoriesTreeButtons.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,~~OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC~~;AAC1C,~~OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC~~;AACxD,~~OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC~~;AACrG,~~OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC~~;AAClD,~~OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC~~;~~AACjD~~,~~OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,0BAA0B,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC~~;~~AAgB5I~~;;;;;;;;;;;;;;;;;GAiBG;AACH,~~MAAM~~,~~UAAU,~~4BAA4B,CAAC,EAAE,QAAQ,EAA0B;IAI/E,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,~~QAAQ~~,~~EAA8B~~,CAAC;IAC3F,MAAM,UAAU,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC3C,OAAO;QACL,WAAW,EAAE;YACX,QAAQ;YACR,UAAU,EAAE,kBAAkB,IAAI,UAAU;SAC7C;QACD,oBAAoB,EAAE,qBAAqB;KAC5C,CAAC;AACJ,CAAC;AAKD,cAAc;AACd,~~MAAM~~,~~UAAU,~~aAAa,CAAC,KAAsC;IAClE,OAAO,CACL,~~KAAC~~,~~UAAU~~,IACT,IAAI,EAAE,KAAK,CAAC,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,EACtD,SAAS,EAAC,YAAY,EACtB,KAAK,EAAE,~~UAAU~~,CAAC,SAAS,CAAC,wCAAwC,CAAC,EACrE,OAAO,EAAE,GAAG,EAAE;YACZ,KAAK,CAAC,aAAa,EAAE,CAAC,yBAAyB,CAAC,CAAC;YACjD,KAAK,~~iBAAiB~~,~~CACpB~~,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC,EACvD,KAAK,CAAC,QAAQ,CACf,CAAC;QACJ,CAAC,YAED,~~KAAC~~,~~iBAAiB~~,KAAG,GACV,CACd,CAAC;AACJ,CAAC;AAED,cAAc;AACd,~~MAAM~~,~~UAAU,~~aAAa,CAAC,KAAsC;IAClE,OAAO,CACL,~~KAAC~~,~~UAAU~~,IACT,IAAI,EAAE,KAAK,CAAC,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,EACtD,SAAS,EAAC,YAAY,EACtB,KAAK,EAAE,~~UAAU~~,CAAC,SAAS,CAAC,wCAAwC,CAAC,EACrE,OAAO,EAAE,GAAG,EAAE;YACZ,KAAK,CAAC,aAAa,EAAE,CAAC,yBAAyB,CAAC,CAAC;YACjD,KAAK,~~iBAAiB~~,~~CACpB~~,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC,EACvD,KAAK,CAAC,QAAQ,CACf,CAAC;QACJ,CAAC,YAED,~~KAAC~~,~~iBAAiB~~,KAAG,GACV,CACd,CAAC;AACJ,CAAC;AAED,cAAc;AACd,~~MAAM~~,~~UAAU,~~eAAe,CAAC,KAAsC;IACpE,OAAO,CACL,~~KAAC~~,~~UAAU~~,IACT,KAAK,EAAE,~~UAAU~~,CAAC,SAAS,CAAC,uCAAuC,CAAC,EACpE,IAAI,EAAE,KAAK,CAAC,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,EACtD,SAAS,EAAC,YAAY,EACtB,OAAO,EAAE,GAAG,EAAE;YACZ,KAAK,CAAC,aAAa,EAAE,CAAC,wBAAwB,CAAC,CAAC;YAChD,KAAK,~~mBAAmB~~,~~CAAC~~,KAAK,CAAC,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;QAC7D,CAAC,YAED,~~KAAC~~,~~iBAAiB~~,KAAG,GACV,CACd,CAAC;AACJ,CAAC;AAED,MAAM,sBAAsB,GAAmB,EAAE,CAAC;AAElD,~~MAAM~~,~~UAAU,~~aAAa,CAAC,QAAkB;IAC9C,MAAM,iBAAiB,GAAG,~~OAAO~~,~~CAAC~~,KAAK,IAAI,EAAE,CAAC,~~0BAA0B~~,~~CAAC~~,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAChG,OAAO,~~aAAa~~,~~CAAC~~,iBAAiB,CAAC,IAAI,sBAAsB,CAAC;AACpE,CAAC","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"]}
1	+ {"version":3,"file":"CategoriesTreeButtons.js","sourceRoot":"","sources":["../../../../../../src/tree-widget-react/components/trees/categories-tree/CategoriesTreeButtons.tsx"],"names":[],"mappings":"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","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n --------------------------------------------------------------------------------------------/\n\nimport { 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 → tree-widget-react/components}/trees/categories-tree/CategoriesTreeComponent.d.ts RENAMED Viewed

@@ -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"> {
     /**

package/lib/cjs/{components → tree-widget-react/components}/trees/categories-tree/CategoriesTreeComponent.js RENAMED Viewed

@@ -9,20 +9,20 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  *--------------------------------------------------------------------------------------------*/
 const react_2 = require("react");
 const appui_react_1 = require("@itwin/appui-react");
-const TreeWidget_1 = require("../../../TreeWidget");
-const TreeWithHeader_1 = require("../../tree-header/TreeWithHeader");
-const UseActiveViewport_1 = require("../common/UseActiveViewport");
-const UseFiltering_1 = require("../common/UseFiltering");
-const UseTelemetryContext_1 = require("../common/UseTelemetryContext");
-const CategoriesTree_1 = require("./CategoriesTree");
-const CategoriesTreeButtons_1 = require("./CategoriesTreeButtons");
+const TreeWidget_js_1 = require("../../../TreeWidget.js");
+const TreeWithHeader_js_1 = require("../../tree-header/TreeWithHeader.js");
+const UseActiveViewport_js_1 = require("../common/UseActiveViewport.js");
+const UseFiltering_js_1 = require("../common/UseFiltering.js");
+const UseTelemetryContext_js_1 = require("../common/UseTelemetryContext.js");
+const CategoriesTree_js_1 = require("./CategoriesTree.js");
+const CategoriesTreeButtons_js_1 = require("./CategoriesTreeButtons.js");
 /**
  * A component that renders `CategoriesTree` and a header with filtering capabilities and header buttons.
  * @public
  */
 const CategoriesTreeComponent = (props) => {
     const iModel = (0, appui_react_1.useActiveIModelConnection)();
-    const viewport = (0, UseActiveViewport_1.useActiveViewport)();
+    const viewport = (0, UseActiveViewport_js_1.useActiveViewport)();
     if (!iModel || !viewport) {
         return null;
     }
@@ -33,17 +33,17 @@ exports.CategoriesTreeComponent = CategoriesTreeComponent;
  * Renders a "Show all" button that enables display of all categories and their subcategories.
  * @public
  */
-exports.CategoriesTreeComponent.ShowAllButton = CategoriesTreeButtons_1.ShowAllButton;
+exports.CategoriesTreeComponent.ShowAllButton = CategoriesTreeButtons_js_1.ShowAllButton;
 /**
  * Renders a "Hide all" button that disables display of all categories.
  * @public
  */
-exports.CategoriesTreeComponent.HideAllButton = CategoriesTreeButtons_1.HideAllButton;
+exports.CategoriesTreeComponent.HideAllButton = CategoriesTreeButtons_js_1.HideAllButton;
 /**
  * Renders an "Invert all" button that inverts display of all categories.
  * @public
  */
-exports.CategoriesTreeComponent.InvertAllButton = CategoriesTreeButtons_1.InvertAllButton;
+exports.CategoriesTreeComponent.InvertAllButton = CategoriesTreeButtons_js_1.InvertAllButton;
 /**
  * Id of the component. May be used when a creating a `TreeDefinition` for `SelectableTree`.
  * @public
@@ -53,21 +53,21 @@ exports.CategoriesTreeComponent.id = "categories-tree-v2";
  * Label of the component. May be used when a creating a `TreeDefinition` for `SelectableTree`.
  * @public
  */
-exports.CategoriesTreeComponent.getLabel = () => TreeWidget_1.TreeWidget.translate("categoriesTree.label");
+exports.CategoriesTreeComponent.getLabel = () => TreeWidget_js_1.TreeWidget.translate("categoriesTree.label");
 function CategoriesTreeComponentImpl({ iModel, viewport, headerButtons, onPerformanceMeasured, onFeatureUsed, ...treeProps }) {
-    const { buttonProps, onCategoriesFiltered } = (0, CategoriesTreeButtons_1.useCategoriesTreeButtonProps)({ viewport });
-    const { filter, applyFilter, clearFilter } = (0, UseFiltering_1.useFiltering)();
+    const { buttonProps, onCategoriesFiltered } = (0, CategoriesTreeButtons_js_1.useCategoriesTreeButtonProps)({ viewport });
+    const { filter, applyFilter, clearFilter } = (0, UseFiltering_js_1.useFiltering)();
     const density = treeProps.density;
     const buttons = headerButtons
         ? headerButtons.map((btn, index) => (0, jsx_runtime_1.jsx)(react_2.Fragment, { children: btn({ ...buttonProps, onFeatureUsed }) }, index))
         : [
-            (0, react_1.createElement)(CategoriesTreeButtons_1.ShowAllButton, { ...buttonProps, key: "show-all-btn", density: density, onFeatureUsed: onFeatureUsed }),
-            (0, react_1.createElement)(CategoriesTreeButtons_1.HideAllButton, { ...buttonProps, key: "hide-all-btn", density: density, onFeatureUsed: onFeatureUsed }),
-            (0, react_1.createElement)(CategoriesTreeButtons_1.InvertAllButton, { ...buttonProps, key: "invert-all-btn", density: density, onFeatureUsed: onFeatureUsed }),
+            (0, react_1.createElement)(CategoriesTreeButtons_js_1.ShowAllButton, { ...buttonProps, key: "show-all-btn", density: density, onFeatureUsed: onFeatureUsed }),
+            (0, react_1.createElement)(CategoriesTreeButtons_js_1.HideAllButton, { ...buttonProps, key: "hide-all-btn", density: density, onFeatureUsed: onFeatureUsed }),
+            (0, react_1.createElement)(CategoriesTreeButtons_js_1.InvertAllButton, { ...buttonProps, key: "invert-all-btn", density: density, onFeatureUsed: onFeatureUsed }),
         ];
-    return ((0, jsx_runtime_1.jsx)(UseTelemetryContext_1.TelemetryContextProvider, { componentIdentifier: exports.CategoriesTreeComponent.id, onFeatureUsed: onFeatureUsed, onPerformanceMeasured: onPerformanceMeasured, children: (0, jsx_runtime_1.jsx)(TreeWithHeader_1.TreeWithHeader, { buttons: buttons, density: density, filteringProps: {
+    return ((0, jsx_runtime_1.jsx)(UseTelemetryContext_js_1.TelemetryContextProvider, { componentIdentifier: exports.CategoriesTreeComponent.id, onFeatureUsed: onFeatureUsed, onPerformanceMeasured: onPerformanceMeasured, children: (0, jsx_runtime_1.jsx)(TreeWithHeader_js_1.TreeWithHeader, { buttons: buttons, density: density, filteringProps: {
                 onFilterStart: applyFilter,
                 onFilterClear: clearFilter,
-            }, children: (0, jsx_runtime_1.jsx)(CategoriesTree_1.CategoriesTree, { ...treeProps, imodel: iModel, activeView: viewport, filter: filter, onCategoriesFiltered: onCategoriesFiltered }) }) }));
+            }, children: (0, jsx_runtime_1.jsx)(CategoriesTree_js_1.CategoriesTree, { ...treeProps, imodel: iModel, activeView: viewport, filter: filter, onCategoriesFiltered: onCategoriesFiltered }) }) }));
 }
 //# sourceMappingURL=CategoriesTreeComponent.js.map