@itwin/tree-widget-react 0.1.1

package/lib/cjs/components/trees/ModelsTree.js

@@ -0,0 +1,135 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModelsTreeComponent = void 0;
+const react_1 = __importStar(require("react"));
+const appui_react_1 = require("@itwin/appui-react");
+const TreeFilteringState_1 = require("../TreeFilteringState");
+require("./ModelsTree.scss");
+const TreeHeader_1 = require("../header/TreeHeader");
+const core_react_1 = require("@itwin/core-react");
+const ModelsTreeComponent = (props) => {
+    const { iModel } = props;
+    const [is2dToggleActive, setIs2dToggleActive] = react_1.useState(false);
+    const [is3dToggleActive, setIs3dToggleActive] = react_1.useState(false);
+    const [icon2dToggle, setIcon2dToggle] = react_1.useState("icon-visibility");
+    const [icon3dToggle, setIcon3dToggle] = react_1.useState("icon-visibility");
+    const [available2dModels, setAvailable2dModels] = react_1.useState([]);
+    const [available3dModels, setAvailable3dModels] = react_1.useState([]);
+    const [availableModels, setAvailableModels] = react_1.useState([]);
+    const viewport = appui_react_1.useActiveViewport();
+    const { searchOptions, filterString, activeMatchIndex, onFilterApplied } = TreeFilteringState_1.useTreeFilteringState();
+    const [height, setHeight] = react_1.useState(0);
+    const [width, setWidth] = react_1.useState(0);
+    const handleResize = react_1.useCallback((w, h) => {
+        setHeight(h);
+        setWidth(w);
+    }, []);
+    const ref = core_react_1.useResizeObserver(handleResize);
+    const queryModels = react_1.useCallback(async (vp) => {
+        if (vp === undefined)
+            return [];
+        const queryParams = {
+            from: "BisCore.GeometricModel3d",
+            wantPrivate: false,
+        };
+        const modelProps = await iModel.models.queryProps(queryParams);
+        return modelProps
+            .map(({ id, isPlanProjection }) => ({ id, isPlanProjection }))
+            .filter(({ id }) => id);
+    }, [iModel]);
+    react_1.useEffect(() => {
+        queryModels(viewport)
+            .then((modelInfos) => {
+            setAvailableModels(modelInfos.map(({ id }) => id));
+            const { models2d, models3d } = modelInfos.reduce((acc, { id, isPlanProjection }) => {
+                isPlanProjection ? acc.models2d.push(id) : acc.models3d.push(id);
+                return acc;
+            }, { models2d: [], models3d: [] });
+            setAvailable2dModels(models2d);
+            setAvailable3dModels(models3d);
+        })
+            .catch((_e) => {
+            setAvailableModels([]);
+        });
+    }, [queryModels, viewport]);
+    const invert = react_1.useCallback(async () => {
+        if (availableModels.length === 0)
+            return;
+        const notViewedModels = [];
+        const models = [];
+        availableModels.forEach((id) => {
+            if (viewport === null || viewport === void 0 ? void 0 : viewport.viewsModel(id))
+                models.push(id);
+            else
+                notViewedModels.push(id);
+        });
+        await (viewport === null || viewport === void 0 ? void 0 : viewport.addViewedModels(notViewedModels));
+        viewport === null || viewport === void 0 ? void 0 : viewport.changeModelDisplay(models, false);
+        viewport === null || viewport === void 0 ? void 0 : viewport.invalidateScene();
+    }, [viewport, availableModels]);
+    const hideAll = react_1.useCallback(() => {
+        viewport === null || viewport === void 0 ? void 0 : viewport.changeModelDisplay(availableModels, false);
+        viewport === null || viewport === void 0 ? void 0 : viewport.invalidateScene();
+    }, [viewport, availableModels]);
+    const showAll = react_1.useCallback(async () => {
+        await (viewport === null || viewport === void 0 ? void 0 : viewport.addViewedModels(availableModels));
+        viewport === null || viewport === void 0 ? void 0 : viewport.invalidateScene();
+    }, [viewport, availableModels]);
+    const viewToggle2D = react_1.useCallback(async () => {
+        if (is2dToggleActive) {
+            viewport === null || viewport === void 0 ? void 0 : viewport.changeModelDisplay(available2dModels, false);
+            setIs2dToggleActive(false);
+            setIcon2dToggle("icon-visibility-hide-2");
+        }
+        else {
+            await (viewport === null || viewport === void 0 ? void 0 : viewport.addViewedModels(available2dModels));
+            setIs2dToggleActive(true);
+            setIcon2dToggle("icon-visibility");
+        }
+        viewport === null || viewport === void 0 ? void 0 : viewport.invalidateScene();
+    }, [is2dToggleActive, viewport, available2dModels]);
+    const viewToggle3D = react_1.useCallback(async () => {
+        if (is3dToggleActive) {
+            viewport === null || viewport === void 0 ? void 0 : viewport.changeModelDisplay(available3dModels, false);
+            setIs3dToggleActive(false);
+            setIcon3dToggle("icon-visibility-hide-2");
+        }
+        else {
+            await (viewport === null || viewport === void 0 ? void 0 : viewport.addViewedModels(available3dModels));
+            setIs3dToggleActive(true);
+            setIcon3dToggle("icon-visibility");
+        }
+        viewport === null || viewport === void 0 ? void 0 : viewport.invalidateScene();
+    }, [is3dToggleActive, viewport, available3dModels]);
+    return (!(iModel && viewport) ? null : (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(TreeHeader_1.TreeHeaderComponent, { searchOptions: searchOptions, showAll: showAll, hideAll: hideAll, invert: invert, toggle2D: viewToggle2D, toggle2DIcon: icon2dToggle, toggle3D: viewToggle3D, toggle3DIcon: icon3dToggle }),
+        react_1.default.createElement("div", { className: "tree-widget-models-tree-container" },
+            react_1.default.createElement("div", { ref: ref, style: { width: "100%", height: "100%" } }, width && height && (react_1.default.createElement(appui_react_1.ModelsTree, { ...props, filterInfo: { filter: filterString, activeMatchIndex }, onFilterApplied: onFilterApplied, activeView: viewport, enableElementsClassGrouping: props.enableElementsClassGrouping
+                    ? appui_react_1.ClassGroupingOption.YesWithCounts
+                    : appui_react_1.ClassGroupingOption.No, width: width, height: height })))))));
+};
+exports.ModelsTreeComponent = ModelsTreeComponent;
+//# sourceMappingURL=ModelsTree.js.map

package/lib/cjs/components/trees/ModelsTree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModelsTree.js","sourceRoot":"","sources":["../../../../src/components/trees/ModelsTree.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;;;;;;;;;;;;;;;;;;;;;;AAE/F,+CAAgE;AAEhE,oDAAwF;AACxF,8DAA8D;AAC9D,6BAA2B;AAK3B,qDAA2D;AAC3D,kDAAsD;AAc/C,MAAM,mBAAmB,GAAG,CAAC,KAAqB,EAAE,EAAE;IAC3D,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAEzB,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,gBAAQ,CAAU,KAAK,CAAC,CAAC;IACzE,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,gBAAQ,CAAU,KAAK,CAAC,CAAC;IACzE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,gBAAQ,CAAS,iBAAiB,CAAC,CAAC;IAC5E,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,gBAAQ,CAAS,iBAAiB,CAAC,CAAC;IAE5E,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,gBAAQ,CAAW,EAAE,CAAC,CAAC;IACzE,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,gBAAQ,CAAW,EAAE,CAAC,CAAC;IACzE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,gBAAQ,CAAW,EAAE,CAAC,CAAC;IAErE,MAAM,QAAQ,GAAG,+BAAiB,EAAE,CAAC;IAErC,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,GACtE,0CAAqB,EAAE,CAAC;IAE1B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,gBAAQ,CAAC,CAAC,CAAC,CAAC;IACxC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,gBAAQ,CAAC,CAAC,CAAC,CAAC;IACtC,MAAM,YAAY,GAAG,mBAAW,CAAC,CAAC,CAAS,EAAE,CAAS,EAAE,EAAE;QACxD,SAAS,CAAC,CAAC,CAAC,CAAC;QACb,QAAQ,CAAC,CAAC,CAAC,CAAC;IACd,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,GAAG,GAAG,8BAAiB,CAAiB,YAAY,CAAC,CAAC;IAE5D,MAAM,WAAW,GAAG,mBAAW,CAAC,KAAK,EACnC,EAAwB,EACM,EAAE;QAChC,IAAI,EAAE,KAAK,SAAS;YAAE,OAAO,EAAE,CAAC;QAEhC,MAAM,WAAW,GAAqB;YACpC,IAAI,EAAE,0BAA0B;YAChC,WAAW,EAAE,KAAK;SACnB,CAAC;QACF,MAAM,UAAU,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;QAC/D,OAAO,UAAU;aACd,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,gBAAgB,EAAyB,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,gBAAgB,EAAE,CAAC,CAAC;aACpF,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,CAAwB,CAAC;IACnD,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,iBAAS,CAAC,GAAG,EAAE;QACb,WAAW,CAAC,QAAQ,CAAC;aAClB,IAAI,CAAC,CAAC,UAA+B,EAAE,EAAE;YACxC,kBAAkB,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;YAEnD,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,EAAE,EAAE,gBAAgB,EAAE,EAAE,EAAE;gBACjF,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;gBACjE,OAAO,GAAG,CAAC;YACb,CAAC,EAAE,EAAE,QAAQ,EAAE,EAAc,EAAE,QAAQ,EAAE,EAAc,EAAE,CAAC,CAAC;YAE3D,oBAAoB,CAAC,QAAQ,CAAC,CAAC;YAC/B,oBAAoB,CAAC,QAAQ,CAAC,CAAC;QACjC,CAAC,CAAC;aACD,KAAK,CAAC,CAAC,EAAE,EAAE,EAAE;YACZ,kBAAkB,CAAC,EAAE,CAAC,CAAC;QACzB,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE5B,MAAM,MAAM,GAAG,mBAAW,CAAC,KAAK,IAAI,EAAE;QACpC,IAAI,eAAe,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QACzC,MAAM,eAAe,GAAa,EAAE,CAAC;QACrC,MAAM,MAAM,GAAa,EAAE,CAAC;QAC5B,eAAe,CAAC,OAAO,CAAC,CAAC,EAAU,EAAE,EAAE;YACrC,IAAI,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,UAAU,CAAC,EAAE,CAAC;gBAAE,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;;gBACzC,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAChC,CAAC,CAAC,CAAC;QACH,MAAM,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,eAAe,CAAC,eAAe,CAAC,CAAA,CAAC;QACjD,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,kBAAkB,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QAC5C,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,eAAe,EAAE,CAAC;IAC9B,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC;IAEhC,MAAM,OAAO,GAAG,mBAAW,CAAC,GAAG,EAAE;QAC/B,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,kBAAkB,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC;QACrD,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,eAAe,EAAE,CAAC;IAC9B,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC;IAEhC,MAAM,OAAO,GAAG,mBAAW,CAAC,KAAK,IAAI,EAAE;QACrC,MAAM,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,eAAe,CAAC,eAAe,CAAC,CAAA,CAAC;QACjD,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,eAAe,EAAE,CAAC;IAC9B,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC;IAEhC,MAAM,YAAY,GAAG,mBAAW,CAAC,KAAK,IAAI,EAAE;QAC1C,IAAI,gBAAgB,EAAE;YACpB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,kBAAkB,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAC;YACvD,mBAAmB,CAAC,KAAK,CAAC,CAAC;YAC3B,eAAe,CAAC,wBAAwB,CAAC,CAAC;SAC3C;aAAM;YACL,MAAM,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,eAAe,CAAC,iBAAiB,CAAC,CAAA,CAAC;YACnD,mBAAmB,CAAC,IAAI,CAAC,CAAC;YAC1B,eAAe,CAAC,iBAAiB,CAAC,CAAC;SACpC;QACD,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,eAAe,EAAE,CAAC;IAC9B,CAAC,EAAE,CAAC,gBAAgB,EAAE,QAAQ,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAEpD,MAAM,YAAY,GAAG,mBAAW,CAAC,KAAK,IAAI,EAAE;QAC1C,IAAI,gBAAgB,EAAE;YACpB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,kBAAkB,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAC;YACvD,mBAAmB,CAAC,KAAK,CAAC,CAAC;YAC3B,eAAe,CAAC,wBAAwB,CAAC,CAAC;SAC3C;aAAM;YACL,MAAM,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,eAAe,CAAC,iBAAiB,CAAC,CAAA,CAAC;YACnD,mBAAmB,CAAC,IAAI,CAAC,CAAC;YAC1B,eAAe,CAAC,iBAAiB,CAAC,CAAC;SACpC;QACD,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,eAAe,EAAE,CAAC;IAC9B,CAAC,EAAE,CAAC,gBAAgB,EAAE,QAAQ,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAEpD,OAAO,CAAC,CAAC,CAAC,MAAM,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACrC;QACE,8BAAC,gCAAmB,IAClB,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,YAAY,EACtB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,YAAY,EACtB,YAAY,EAAE,YAAY,GAC1B;QACF,uCAAK,SAAS,EAAC,mCAAmC;YAChD,uCAAK,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IACpD,KAAK,IAAI,MAAM,IAAI,CAClB,8BAAC,wBAAU,OACL,KAAK,EACT,UAAU,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE,gBAAgB,EAAE,EACtD,eAAe,EAAE,eAAe,EAChC,UAAU,EAAE,QAAQ,EACpB,2BAA2B,EACzB,KAAK,CAAC,2BAA2B;oBAC/B,CAAC,CAAC,iCAAmB,CAAC,aAAa;oBACnC,CAAC,CAAC,iCAAmB,CAAC,EAAE,EAE5B,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,GACd,CACH,CACG,CACF,CACL,CACJ,CAAC,CAAC;AACL,CAAC,CAAC;AA5IW,QAAA,mBAAmB,uBA4I9B","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 React, { useCallback, useEffect, useState } from \"react\";\nimport { IModelConnection, Viewport } from \"@itwin/core-frontend\";\nimport { ModelsTree, ClassGroupingOption, useActiveViewport } from \"@itwin/appui-react\";\nimport { useTreeFilteringState } from \"../TreeFilteringState\";\nimport \"./ModelsTree.scss\";\nimport {\n  GeometricModel3dProps,\n  ModelQueryParams,\n} from \"@itwin/core-common\";\nimport { TreeHeaderComponent } from \"../header/TreeHeader\";\nimport { useResizeObserver } from \"@itwin/core-react\";\n\nexport interface ModelTreeProps {\n  iModel: IModelConnection;\n  allViewports?: boolean;\n  activeView?: Viewport;\n  enableElementsClassGrouping?: boolean;\n}\n\ninterface TreeViewModelInfo {\n  id: string;\n  isPlanProjection?: boolean;\n}\n\nexport const ModelsTreeComponent = (props: ModelTreeProps) => {\n  const { iModel } = props;\n\n  const [is2dToggleActive, setIs2dToggleActive] = useState<boolean>(false);\n  const [is3dToggleActive, setIs3dToggleActive] = useState<boolean>(false);\n  const [icon2dToggle, setIcon2dToggle] = useState<string>(\"icon-visibility\");\n  const [icon3dToggle, setIcon3dToggle] = useState<string>(\"icon-visibility\");\n\n  const [available2dModels, setAvailable2dModels] = useState<string[]>([]);\n  const [available3dModels, setAvailable3dModels] = useState<string[]>([]);\n  const [availableModels, setAvailableModels] = useState<string[]>([]);\n\n  const viewport = useActiveViewport();\n\n  const { searchOptions, filterString, activeMatchIndex, onFilterApplied } =\n    useTreeFilteringState();\n\n  const [height, setHeight] = useState(0);\n  const [width, setWidth] = useState(0);\n  const handleResize = useCallback((w: number, h: number) => {\n    setHeight(h);\n    setWidth(w);\n  }, []);\n  const ref = useResizeObserver<HTMLDivElement>(handleResize);\n\n  const queryModels = useCallback(async (\n    vp: Viewport | undefined\n  ): Promise<TreeViewModelInfo[]> => {\n    if (vp === undefined) return [];\n\n    const queryParams: ModelQueryParams = {\n      from: \"BisCore.GeometricModel3d\",\n      wantPrivate: false,\n    };\n    const modelProps = await iModel.models.queryProps(queryParams);\n    return modelProps\n      .map(({ id, isPlanProjection }: GeometricModel3dProps) => ({ id, isPlanProjection }))\n      .filter(({ id }) => id) as TreeViewModelInfo[];\n  }, [iModel]);\n\n  useEffect(() => {\n    queryModels(viewport)\n      .then((modelInfos: TreeViewModelInfo[]) => {\n        setAvailableModels(modelInfos.map(({ id }) => id));\n\n        const { models2d, models3d } = modelInfos.reduce((acc, { id, isPlanProjection }) => {\n          isPlanProjection ? acc.models2d.push(id) : acc.models3d.push(id);\n          return acc;\n        }, { models2d: [] as string[], models3d: [] as string[] });\n\n        setAvailable2dModels(models2d);\n        setAvailable3dModels(models3d);\n      })\n      .catch((_e) => {\n        setAvailableModels([]);\n      });\n  }, [queryModels, viewport]);\n\n  const invert = useCallback(async () => {\n    if (availableModels.length === 0) return;\n    const notViewedModels: string[] = [];\n    const models: string[] = [];\n    availableModels.forEach((id: string) => {\n      if (viewport?.viewsModel(id)) models.push(id);\n      else notViewedModels.push(id);\n    });\n    await viewport?.addViewedModels(notViewedModels);\n    viewport?.changeModelDisplay(models, false);\n    viewport?.invalidateScene();\n  }, [viewport, availableModels]);\n\n  const hideAll = useCallback(() => {\n    viewport?.changeModelDisplay(availableModels, false);\n    viewport?.invalidateScene();\n  }, [viewport, availableModels]);\n\n  const showAll = useCallback(async () => {\n    await viewport?.addViewedModels(availableModels);\n    viewport?.invalidateScene();\n  }, [viewport, availableModels]);\n\n  const viewToggle2D = useCallback(async () => {\n    if (is2dToggleActive) {\n      viewport?.changeModelDisplay(available2dModels, false);\n      setIs2dToggleActive(false);\n      setIcon2dToggle(\"icon-visibility-hide-2\");\n    } else {\n      await viewport?.addViewedModels(available2dModels);\n      setIs2dToggleActive(true);\n      setIcon2dToggle(\"icon-visibility\");\n    }\n    viewport?.invalidateScene();\n  }, [is2dToggleActive, viewport, available2dModels]);\n\n  const viewToggle3D = useCallback(async () => {\n    if (is3dToggleActive) {\n      viewport?.changeModelDisplay(available3dModels, false);\n      setIs3dToggleActive(false);\n      setIcon3dToggle(\"icon-visibility-hide-2\");\n    } else {\n      await viewport?.addViewedModels(available3dModels);\n      setIs3dToggleActive(true);\n      setIcon3dToggle(\"icon-visibility\");\n    }\n    viewport?.invalidateScene();\n  }, [is3dToggleActive, viewport, available3dModels]);\n\n  return (!(iModel && viewport) ? null : (\n    <>\n      <TreeHeaderComponent\n        searchOptions={searchOptions}\n        showAll={showAll}\n        hideAll={hideAll}\n        invert={invert}\n        toggle2D={viewToggle2D}\n        toggle2DIcon={icon2dToggle}\n        toggle3D={viewToggle3D}\n        toggle3DIcon={icon3dToggle}\n      />\n      <div className=\"tree-widget-models-tree-container\">\n        <div ref={ref} style={{ width: \"100%\", height: \"100%\" }}>\n          {width && height && (\n            <ModelsTree\n              {...props}\n              filterInfo={{ filter: filterString, activeMatchIndex }}\n              onFilterApplied={onFilterApplied}\n              activeView={viewport}\n              enableElementsClassGrouping={\n                props.enableElementsClassGrouping\n                  ? ClassGroupingOption.YesWithCounts\n                  : ClassGroupingOption.No\n              }\n              width={width}\n              height={height}\n            />\n          )}\n        </div>\n      </div>\n    </>\n  ));\n};\n"]}

package/lib/cjs/components/trees/ModelsTree.scss

@@ -0,0 +1,14 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+@import "~@itwin/core-react/lib/esm/core-react/index";
+
+.tree-widget-models-tree-container {
+  flex: 1;
+}
+
+.tree-widget-models-tree-toolbar-icon {
+  color: $buic-icon-color;
+}

package/lib/cjs/components/trees/SpatialTree.d.ts

@@ -0,0 +1,3 @@
+import { SpatialContainmentTreeProps } from "@itwin/appui-react";
+export declare const SpatialTreeComponent: (props: Omit<SpatialContainmentTreeProps, "width" | "height">) => JSX.Element;
+//# sourceMappingURL=SpatialTree.d.ts.map

package/lib/cjs/components/trees/SpatialTree.js

@@ -0,0 +1,41 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpatialTreeComponent = void 0;
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+const appui_react_1 = require("@itwin/appui-react");
+const core_react_1 = require("@itwin/core-react");
+const react_1 = __importStar(require("react"));
+const SpatialTreeComponent = (props) => {
+    const [height, setHeight] = react_1.useState(0);
+    const [width, setWidth] = react_1.useState(0);
+    const handleResize = react_1.useCallback((w, h) => {
+        setHeight(h);
+        setWidth(w);
+    }, []);
+    const ref = core_react_1.useResizeObserver(handleResize);
+    return (react_1.default.createElement("div", { ref: ref, style: { width: "100%", height: "100%" } }, width && height && (react_1.default.createElement(appui_react_1.SpatialContainmentTree, { ...props, width: width, height: height }))));
+};
+exports.SpatialTreeComponent = SpatialTreeComponent;
+//# sourceMappingURL=SpatialTree.js.map

package/lib/cjs/components/trees/SpatialTree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpatialTree.js","sourceRoot":"","sources":["../../../../src/components/trees/SpatialTree.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;+FAG+F;AAC/F,oDAG4B;AAC5B,kDAAsD;AACtD,+CAAqD;AAE9C,MAAM,oBAAoB,GAAG,CAClC,KAA4D,EAC5D,EAAE;IACF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,gBAAQ,CAAC,CAAC,CAAC,CAAC;IACxC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,gBAAQ,CAAC,CAAC,CAAC,CAAC;IACtC,MAAM,YAAY,GAAG,mBAAW,CAAC,CAAC,CAAS,EAAE,CAAS,EAAE,EAAE;QACxD,SAAS,CAAC,CAAC,CAAC,CAAC;QACb,QAAQ,CAAC,CAAC,CAAC,CAAC;IACd,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,GAAG,GAAG,8BAAiB,CAAiB,YAAY,CAAC,CAAC;IAE5D,OAAO,CACL,uCAAK,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IACpD,KAAK,IAAI,MAAM,IAAI,CAClB,8BAAC,oCAAsB,OAAK,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,GAAI,CACpE,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AAlBW,QAAA,oBAAoB,wBAkB/B","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*--------------------------------------------------------------------------------------------*/\nimport {\n  SpatialContainmentTree,\n  SpatialContainmentTreeProps,\n} from \"@itwin/appui-react\";\nimport { useResizeObserver } from \"@itwin/core-react\";\nimport React, { useCallback, useState } from \"react\";\n\nexport const SpatialTreeComponent = (\n  props: Omit<SpatialContainmentTreeProps, \"width\" | \"height\">\n) => {\n  const [height, setHeight] = useState(0);\n  const [width, setWidth] = useState(0);\n  const handleResize = useCallback((w: number, h: number) => {\n    setHeight(h);\n    setWidth(w);\n  }, []);\n  const ref = useResizeObserver<HTMLDivElement>(handleResize);\n\n  return (\n    <div ref={ref} style={{ width: \"100%\", height: \"100%\" }}>\n      {width && height && (\n        <SpatialContainmentTree {...props} width={width} height={height} />\n      )}\n    </div>\n  );\n};\n"]}

package/lib/cjs/components/trees/TreeWithRuleset.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+import { Ruleset } from "@itwin/presentation-common";
+import { IPresentationTreeDataProvider } from "@itwin/presentation-components";
+import "./TreeWithRulesetTree.scss";
+import { IModelConnection } from "@itwin/core-frontend";
+export interface ControlledTreeProps {
+    iModel: IModelConnection;
+    dataProvider: IPresentationTreeDataProvider;
+    rulesetId: string;
+    pageSize?: number;
+}
+export interface TreeProps {
+    imodel: IModelConnection;
+    ruleSet: Ruleset;
+    dataProvider: IPresentationTreeDataProvider;
+}
+export interface TreeState {
+    initialized: false;
+    dataProvider?: IPresentationTreeDataProvider;
+}
+export declare abstract class TreeWithRuleset<T extends TreeProps, S extends TreeState> extends React.Component<T, S> {
+    private _ruleset?;
+    /** @internal */
+    componentDidMount(): Promise<void>;
+    componentDidUpdate(prevProps: any): Promise<void>;
+    componentWillUnmount(): void;
+    private removeRuleset;
+    private _setRuleSet;
+}
+export declare class SimpleTreeWithRuleset extends TreeWithRuleset<TreeProps, TreeState> {
+    constructor(props: TreeProps);
+    render(): JSX.Element;
+}
+export declare const ControlledTreeWrapper: React.FC<ControlledTreeProps>;
+//# sourceMappingURL=TreeWithRuleset.d.ts.map

package/lib/cjs/components/trees/TreeWithRuleset.js

@@ -0,0 +1,108 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ControlledTreeWrapper = exports.SimpleTreeWithRuleset = exports.TreeWithRuleset = void 0;
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+const react_1 = __importStar(require("react"));
+const presentation_components_1 = require("@itwin/presentation-components");
+const components_react_1 = require("@itwin/components-react");
+const presentation_frontend_1 = require("@itwin/presentation-frontend");
+require("./TreeWithRulesetTree.scss");
+const core_react_1 = require("@itwin/core-react");
+class TreeWithRuleset extends react_1.default.Component {
+    constructor() {
+        super(...arguments);
+        this._setRuleSet = async () => {
+            return presentation_frontend_1.Presentation.presentation
+                .rulesets()
+                .add(this.props.ruleSet) // tslint:disable-line:no-floating-promises
+                .then((ruleset) => {
+                this._ruleset = ruleset;
+                const dataProvider = this.props.dataProvider;
+                this.setState({ dataProvider });
+            });
+        };
+    }
+    /** @internal */
+    async componentDidMount() {
+        await this._setRuleSet();
+    }
+    async componentDidUpdate(prevProps) {
+        if (this.props.ruleSet !== prevProps.ruleSet) {
+            this.removeRuleset();
+            await this._setRuleSet();
+        }
+    }
+    componentWillUnmount() {
+        this.removeRuleset();
+    }
+    removeRuleset() {
+        if (this._ruleset)
+            presentation_frontend_1.Presentation.presentation.rulesets().remove(this._ruleset); // tslint:disable-line:no-floating-promises
+    }
+}
+exports.TreeWithRuleset = TreeWithRuleset;
+class SimpleTreeWithRuleset extends TreeWithRuleset {
+    constructor(props) {
+        super(props);
+        this.state = {
+            initialized: false,
+        };
+    }
+    render() {
+        const dataProvider = this.state
+            .dataProvider;
+        if (!dataProvider)
+            return react_1.default.createElement("div", null);
+        else {
+            return (react_1.default.createElement("div", { className: "spatial-tree" },
+                react_1.default.createElement(exports.ControlledTreeWrapper, { rulesetId: this.props.ruleSet.id, iModel: this.props.imodel, dataProvider: dataProvider, pageSize: dataProvider.pagingSize })));
+        }
+    }
+}
+exports.SimpleTreeWithRuleset = SimpleTreeWithRuleset;
+// tslint:disable-next-line:variable-name naming-convention
+const ControlledTreeWrapper = (props) => {
+    const { nodeLoader } = presentation_components_1.usePresentationTreeNodeLoader({
+        imodel: props.iModel,
+        ruleset: props.rulesetId,
+        pagingSize: props.pageSize || 20,
+    });
+    const modelSource = nodeLoader.modelSource;
+    const unifiedSelectionEventHandler = presentation_components_1.useUnifiedSelectionTreeEventHandler({
+        nodeLoader,
+        collapsedChildrenDisposalEnabled: true,
+    });
+    const [height, setHeight] = react_1.useState(0);
+    const [width, setWidth] = react_1.useState(0);
+    const handleResize = react_1.useCallback((w, h) => {
+        setHeight(h);
+        setWidth(w);
+    }, []);
+    const ref = core_react_1.useResizeObserver(handleResize);
+    const treeModel = components_react_1.useTreeModel(modelSource);
+    return (react_1.default.createElement("div", { ref: ref, style: { width: "100%", height: "100%" } }, width && height && (react_1.default.createElement(components_react_1.ControlledTree, { model: treeModel, nodeLoader: nodeLoader, eventsHandler: unifiedSelectionEventHandler, selectionMode: components_react_1.SelectionMode.Extended, width: width, height: height }))));
+};
+exports.ControlledTreeWrapper = ControlledTreeWrapper;
+//# sourceMappingURL=TreeWithRuleset.js.map

package/lib/cjs/components/trees/TreeWithRuleset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeWithRuleset.js","sourceRoot":"","sources":["../../../../src/components/trees/TreeWithRuleset.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*--------------------------------------------------------------------------------------------*/\nimport React, { useCallback, useState } from \"react\";\nimport { RegisteredRuleset, Ruleset } from \"@itwin/presentation-common\";\nimport {\n  IPresentationTreeDataProvider,\n  usePresentationTreeNodeLoader,\n  useUnifiedSelectionTreeEventHandler,\n  PresentationTreeDataProvider,\n} from \"@itwin/presentation-components\";\nimport {\n  SelectionMode,\n  ControlledTree,\n  useTreeModel,\n} from \"@itwin/components-react\";\nimport { Presentation } from \"@itwin/presentation-frontend\";\nimport \"./TreeWithRulesetTree.scss\";\nimport { IModelConnection } from \"@itwin/core-frontend\";\nimport { useResizeObserver } from \"@itwin/core-react\";\n\nexport interface ControlledTreeProps {\n  iModel: IModelConnection;\n  dataProvider: IPresentationTreeDataProvider;\n  rulesetId: string;\n  pageSize?: number;\n}\n\nexport interface TreeProps {\n  imodel: IModelConnection;\n  ruleSet: Ruleset;\n  dataProvider: IPresentationTreeDataProvider;\n}\n\nexport interface TreeState {\n  initialized: false;\n  dataProvider?: IPresentationTreeDataProvider;\n}\n\nexport abstract class TreeWithRuleset<\n  T extends TreeProps,\n  S extends TreeState\n  > extends React.Component<T, S> {\n  private _ruleset?: RegisteredRuleset;\n  /** @internal */\n  public async componentDidMount() {\n    await this._setRuleSet();\n  }\n\n  public async componentDidUpdate(prevProps: any) {\n    if (this.props.ruleSet !== prevProps.ruleSet) {\n      this.removeRuleset();\n      await this._setRuleSet();\n    }\n  }\n\n  public componentWillUnmount() {\n    this.removeRuleset();\n  }\n\n  private removeRuleset() {\n    if (this._ruleset)\n      Presentation.presentation.rulesets().remove(this._ruleset); // tslint:disable-line:no-floating-promises\n  }\n\n  private _setRuleSet = async () => {\n    return Presentation.presentation\n      .rulesets()\n      .add(this.props.ruleSet) // tslint:disable-line:no-floating-promises\n      .then((ruleset: RegisteredRuleset) => {\n        this._ruleset = ruleset;\n        const dataProvider = this.props.dataProvider;\n        this.setState({ dataProvider });\n      });\n  };\n}\n\nexport class SimpleTreeWithRuleset extends TreeWithRuleset<\n  TreeProps,\n  TreeState\n> {\n  constructor(props: TreeProps) {\n    super(props);\n    this.state = {\n      initialized: false,\n    };\n  }\n\n  public render() {\n    const dataProvider = this.state\n      .dataProvider as PresentationTreeDataProvider;\n    if (!dataProvider) return <div />;\n    else {\n      return (\n        <div className=\"spatial-tree\">\n          <ControlledTreeWrapper\n            rulesetId={this.props.ruleSet.id}\n            iModel={this.props.imodel}\n            dataProvider={dataProvider}\n            pageSize={(dataProvider as PresentationTreeDataProvider).pagingSize}\n          />\n        </div>\n      );\n    }\n  }\n}\n\n// tslint:disable-next-line:variable-name naming-convention\nexport const ControlledTreeWrapper: React.FC<ControlledTreeProps> = (\n  props: ControlledTreeProps\n) => {\n  const { nodeLoader } = usePresentationTreeNodeLoader({\n    imodel: props.iModel,\n    ruleset: props.rulesetId,\n    pagingSize: props.pageSize || 20,\n  });\n\n  const modelSource = nodeLoader.modelSource;\n  const unifiedSelectionEventHandler = useUnifiedSelectionTreeEventHandler({\n    nodeLoader,\n    collapsedChildrenDisposalEnabled: true,\n  });\n\n  const [height, setHeight] = useState(0);\n  const [width, setWidth] = useState(0);\n  const handleResize = useCallback((w: number, h: number) => {\n    setHeight(h);\n    setWidth(w);\n  }, []);\n  const ref = useResizeObserver<HTMLDivElement>(handleResize);\n\n  const treeModel = useTreeModel(modelSource);\n\n  return (\n    <div ref={ref} style={{ width: \"100%\", height: \"100%\" }}>\n      {width && height && (\n        <ControlledTree\n          model={treeModel}\n          nodeLoader={nodeLoader}\n          eventsHandler={unifiedSelectionEventHandler}\n          selectionMode={SelectionMode.Extended}\n          width={width}\n          height={height}\n        />\n      )}\n    </div>\n  );\n};\n\n"]}

package/lib/cjs/components/trees/TreeWithRulesetTree.scss

@@ -0,0 +1,17 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/esm/core-react/index";
+.spatial-tree {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.components-tree-node-content {
+  height: $uicore-l;
+  line-height: $uicore-font-size-small;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}

package/lib/cjs/components/trees/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./ModelsTree";
+export * from "./CategoriesTree";
+export * from "./SpatialTree";
+export * from "./ClassificationsTree";
+export * from "./TreeWithRuleset";
+//# sourceMappingURL=index.d.ts.map

package/lib/cjs/components/trees/index.js

@@ -0,0 +1,22 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+__exportStar(require("./ModelsTree"), exports);
+__exportStar(require("./CategoriesTree"), exports);
+__exportStar(require("./SpatialTree"), exports);
+__exportStar(require("./ClassificationsTree"), exports);
+__exportStar(require("./TreeWithRuleset"), exports);
+//# sourceMappingURL=index.js.map

package/lib/cjs/components/trees/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/trees/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;+FAG+F;AAC/F,+CAA6B;AAC7B,mDAAiC;AACjC,gDAA8B;AAC9B,wDAAsC;AACtC,oDAAkC","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*--------------------------------------------------------------------------------------------*/\nexport * from \"./ModelsTree\";\nexport * from \"./CategoriesTree\";\nexport * from \"./SpatialTree\";\nexport * from \"./ClassificationsTree\";\nexport * from \"./TreeWithRuleset\";"]}

package/lib/cjs/tree-widget-react.d.ts

@@ -0,0 +1,7 @@
+export * from "./TreeWidget";
+export * from "./components/TreeWidgetControl";
+export * from "./components/TreeWidgetComponent";
+export * from "./components/header/TreeHeader";
+export * from "./components/trees";
+export * from "./components/TreeWidgetUiItemsProvider";
+//# sourceMappingURL=tree-widget-react.d.ts.map

package/lib/cjs/tree-widget-react.js

@@ -0,0 +1,23 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./TreeWidget"), exports);
+__exportStar(require("./components/TreeWidgetControl"), exports);
+__exportStar(require("./components/TreeWidgetComponent"), exports);
+__exportStar(require("./components/header/TreeHeader"), exports);
+__exportStar(require("./components/trees"), exports);
+__exportStar(require("./components/TreeWidgetUiItemsProvider"), exports);
+//# sourceMappingURL=tree-widget-react.js.map

package/lib/cjs/tree-widget-react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-widget-react.js","sourceRoot":"","sources":["../../src/tree-widget-react.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;;;;;;;;;;;;AAE/F,+CAA6B;AAC7B,iEAA+C;AAC/C,mEAAiD;AACjD,iEAA+C;AAC/C,qDAAmC;AACnC,yEAAuD","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\nexport * from \"./TreeWidget\";\nexport * from \"./components/TreeWidgetControl\";\nexport * from \"./components/TreeWidgetComponent\";\nexport * from \"./components/header/TreeHeader\";\nexport * from \"./components/trees\";\nexport * from \"./components/TreeWidgetUiItemsProvider\";\n"]}

package/lib/esm/TreeWidget.d.ts

@@ -0,0 +1,27 @@
+import { Localization } from "@itwin/core-common";
+import { LocalizationOptions } from "@itwin/core-i18n";
+/**
+ * Entry point for static initialization required by various components used in the package.
+ * @public
+ */
+export declare class TreeWidget {
+    private static _i18n?;
+    private static _initialized?;
+    /**
+     * Called by IModelApp to initialize the Tree Widget
+     * @param i18n - The internationalization service created by the IModelApp.
+     */
+    static initialize(i18n?: Localization): Promise<void>;
+    /** Unregisters the TreeWidget internationalization service namespace */
+    static terminate(): void;
+    /** The internationalization service created by the IModelApp. */
+    static get i18n(): Localization;
+    /** The internationalization service namespace. */
+    static get i18nNamespace(): string;
+    static get packageName(): string;
+    /** Calls i18n.translateWithNamespace with the "TreeWidget" namespace. Do NOT include the namespace in the key.
+     */
+    static translate(key: string | string[], options?: LocalizationOptions): string;
+    static loggerCategory(obj: any): string;
+}
+//# sourceMappingURL=TreeWidget.d.ts.map

package/lib/esm/TreeWidget.js

@@ -0,0 +1,53 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import { UiError, getClassName } from "@itwin/appui-abstract";
+import { IModelApp } from "@itwin/core-frontend";
+/**
+ * Entry point for static initialization required by various components used in the package.
+ * @public
+ */
+export class TreeWidget {
+    /**
+     * Called by IModelApp to initialize the Tree Widget
+     * @param i18n - The internationalization service created by the IModelApp.
+     */
+    static async initialize(i18n) {
+        if (this._initialized)
+            return;
+        this._initialized = true;
+        TreeWidget._i18n = i18n !== null && i18n !== void 0 ? i18n : IModelApp.localization;
+        return TreeWidget._i18n.registerNamespace(TreeWidget.i18nNamespace);
+    }
+    /** Unregisters the TreeWidget internationalization service namespace */
+    static terminate() {
+        if (TreeWidget._i18n)
+            TreeWidget._i18n.unregisterNamespace(TreeWidget.i18nNamespace);
+        TreeWidget._i18n = undefined;
+    }
+    /** The internationalization service created by the IModelApp. */
+    static get i18n() {
+        if (!TreeWidget._i18n)
+            throw new UiError(TreeWidget.loggerCategory(this), "TreeWidget not initialized");
+        return TreeWidget._i18n;
+    }
+    /** The internationalization service namespace. */
+    static get i18nNamespace() {
+        return "TreeWidget";
+    }
+    static get packageName() {
+        return "tree-widget-react";
+    }
+    /** Calls i18n.translateWithNamespace with the "TreeWidget" namespace. Do NOT include the namespace in the key.
+     */
+    static translate(key, options) {
+        return TreeWidget.i18n.getLocalizedStringWithNamespace(TreeWidget.i18nNamespace, key, options);
+    }
+    static loggerCategory(obj) {
+        const className = getClassName(obj);
+        const category = TreeWidget.packageName + (className ? `.${className}` : "");
+        return category;
+    }
+}
+//# sourceMappingURL=TreeWidget.js.map

package/lib/esm/TreeWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeWidget.js","sourceRoot":"","sources":["../../src/TreeWidget.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAE/F,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAIjD;;;GAGG;AACH,MAAM,OAAO,UAAU;IAIrB;;;OAGG;IACI,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,IAAmB;QAChD,IAAI,IAAI,CAAC,YAAY;YAAE,OAAO;QAE9B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,UAAU,CAAC,KAAK,GAAG,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,SAAS,CAAC,YAAY,CAAC;QAElD,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;YAClB,UAAU,CAAC,KAAK,CAAC,mBAAmB,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;QACjE,UAAU,CAAC,KAAK,GAAG,SAAS,CAAC;IAC/B,CAAC;IAED,iEAAiE;IAC1D,MAAM,KAAK,IAAI;QACpB,IAAI,CAAC,UAAU,CAAC,KAAK;YACnB,MAAM,IAAI,OAAO,CACf,UAAU,CAAC,cAAc,CAAC,IAAI,CAAC,EAC/B,4BAA4B,CAC7B,CAAC;QACJ,OAAO,UAAU,CAAC,KAAK,CAAC;IAC1B,CAAC;IAED,kDAAkD;IAC3C,MAAM,KAAK,aAAa;QAC7B,OAAO,YAAY,CAAC;IACtB,CAAC;IAEM,MAAM,KAAK,WAAW;QAC3B,OAAO,mBAAmB,CAAC;IAC7B,CAAC;IAED;OACG;IACI,MAAM,CAAC,SAAS,CACrB,GAAsB,EACtB,OAA6B;QAE7B,OAAO,UAAU,CAAC,IAAI,CAAC,+BAA+B,CACpD,UAAU,CAAC,aAAa,EACxB,GAAG,EACH,OAAO,CACR,CAAC;IACJ,CAAC;IAEM,MAAM,CAAC,cAAc,CAAC,GAAQ;QACnC,MAAM,SAAS,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;QACpC,MAAM,QAAQ,GACZ,UAAU,CAAC,WAAW,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QAC9D,OAAO,QAAQ,CAAC;IAClB,CAAC;CACF","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 { UiError, getClassName } from \"@itwin/appui-abstract\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { Localization } from \"@itwin/core-common\";\nimport { LocalizationOptions } from \"@itwin/core-i18n\";\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) return;\n\n    this._initialized = true;\n    TreeWidget._i18n = i18n ?? IModelApp.localization;\n\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  /** The internationalization service created by the IModelApp. */\n  public static get i18n(): Localization {\n    if (!TreeWidget._i18n)\n      throw new UiError(\n        TreeWidget.loggerCategory(this),\n        \"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  public static get packageName(): string {\n    return \"tree-widget-react\";\n  }\n\n  /** Calls i18n.translateWithNamespace with the \"TreeWidget\" namespace. Do NOT include the namespace in the key.\n   */\n  public static translate(\n    key: string | string[],\n    options?: LocalizationOptions\n  ): string {\n    return TreeWidget.i18n.getLocalizedStringWithNamespace(\n      TreeWidget.i18nNamespace,\n      key,\n      options\n    );\n  }\n\n  public static loggerCategory(obj: any): string {\n    const className = getClassName(obj);\n    const category =\n      TreeWidget.packageName + (className ? `.${className}` : \"\");\n    return category;\n  }\n}\n"]}

package/lib/esm/components/IconButton.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { CommonProps } from "@itwin/core-react";
+import "./IconButton.scss";
+/** Properties for [[IconButton]] component */
+export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {
+    /** Icon name */
+    icon: string;
+    /** A function to be run when the element is clicked */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    label?: string;
+}
+/** Generic icon button component */
+export declare function IconButton({ className, icon, onClick, label, ...otherProps }: IconButtonProps): JSX.Element;
+//# sourceMappingURL=IconButton.d.ts.map

package/lib/esm/components/IconButton.js

@@ -0,0 +1,16 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import * as React from "react";
+import classnames from "classnames";
+import "./IconButton.scss";
+/** Generic icon button component */
+export function IconButton({ className, icon, onClick, label, ...otherProps }) {
+    return (React.createElement(React.Fragment, null,
+        label &&
+            React.createElement("span", { className: classnames("tree-widget-icon-label", className) }, label),
+        React.createElement("button", { ...otherProps, className: classnames("tree-widget-icon-button", className), onClick: onClick },
+            React.createElement("span", { className: classnames("icon", icon) }))));
+}
+//# sourceMappingURL=IconButton.js.map

package/lib/esm/components/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../../src/components/IconButton.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,mBAAmB,CAAC;AAc3B,oCAAoC;AACpC,MAAM,UAAU,UAAU,CAAC,EACzB,SAAS,EACT,IAAI,EACJ,OAAO,EACP,KAAK,EACL,GAAG,UAAU,EACG;IAChB,OAAO,CACL;QACG,KAAK;YACJ,8BAAM,SAAS,EAAE,UAAU,CAAC,wBAAwB,EAAE,SAAS,CAAC,IAC7D,KAAK,CACD;QAET,mCACM,UAAU,EACd,SAAS,EAAE,UAAU,CAAC,yBAAyB,EAAE,SAAS,CAAC,EAC3D,OAAO,EAAE,OAAO;YAEhB,8BAAM,SAAS,EAAE,UAAU,CAAC,MAAM,EAAE,IAAI,CAAC,GAAI,CACtC,CACR,CACJ,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport * as React from \"react\";\nimport classnames from \"classnames\";\nimport { CommonProps } from \"@itwin/core-react\";\nimport \"./IconButton.scss\";\n\n/** Properties for [[IconButton]] component */\nexport interface IconButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n  CommonProps {\n  /** Icon name */\n  icon: string;\n  /** A function to be run when the element is clicked */\n  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  //** An optional text label to display to the left of the button  */\n  label?: string;\n}\n\n/** Generic icon button component */\nexport function IconButton({\n  className,\n  icon,\n  onClick,\n  label,\n  ...otherProps\n}: IconButtonProps) {\n  return (\n    <>\n      {label &&\n        <span className={classnames(\"tree-widget-icon-label\", className)}>\n          {label}\n        </span>\n      }\n      <button\n        {...otherProps}\n        className={classnames(\"tree-widget-icon-button\", className)}\n        onClick={onClick}\n      >\n        <span className={classnames(\"icon\", icon)} />\n      </button>\n    </>\n  );\n}\n"]}