@itwin/tree-widget-react 3.4.1 → 4.0.0-alpha.0

package/lib/esm/tree-widget-react/components/trees/common/components/TreeNodeVisibilityButton.d.ts

@@ -0,0 +1,28 @@
+import "./TreeNodeVisibilityButton.css";
+import { IconButton } from "@itwin/itwinui-react/bricks";
+import type { PresentationHierarchyNode, PresentationTreeNode } from "@itwin/presentation-hierarchies-react";
+import type { ComponentPropsWithoutRef } from "react";
+/**
+ * Data structure that describes tree node checkbox state.
+ * @beta
+ */
+interface TreeItemVisibilityButtonState {
+    state: "visible" | "partial" | "hidden";
+    isDisabled?: boolean;
+    tooltip?: string;
+}
+/** @beta */
+export interface TreeItemVisibilityButtonProps {
+    /** Callback that should be invoked when checkbox is clicked. */
+    onVisibilityButtonClick: (node: PresentationHierarchyNode, state: TreeItemVisibilityButtonState["state"]) => void;
+    /** Callback that should be used to determine current checkbox state. */
+    getVisibilityButtonState: (node: PresentationHierarchyNode) => TreeItemVisibilityButtonState;
+}
+/** @internal */
+type TreeNodeCheckboxProps = TreeItemVisibilityButtonProps & Omit<ComponentPropsWithoutRef<typeof IconButton>, "onClick" | "aria-disabled" | "title" | "label" | "icon">;
+/** @internal */
+export declare function TreeItemVisibilityButton({ node, onVisibilityButtonClick, getVisibilityButtonState, ...props }: TreeNodeCheckboxProps & {
+    node: PresentationTreeNode;
+}): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=TreeNodeVisibilityButton.d.ts.map

package/lib/esm/tree-widget-react/components/trees/common/components/TreeNodeVisibilityButton.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import "./TreeNodeVisibilityButton.css";
+import cx from "classnames";
+import { IconButton } from "@itwin/itwinui-react/bricks";
+import { isPresentationHierarchyNode } from "@itwin/presentation-hierarchies-react";
+const visibilityShowIcon = new URL("@itwin/itwinui-icons/visibility-show.svg", import.meta.url).href;
+const visibilityHideIcon = new URL("@itwin/itwinui-icons/visibility-hide.svg", import.meta.url).href;
+const visibilityPartialIcon = new URL("@itwin/itwinui-icons/state-inherited-dot.svg", import.meta.url).href;
+/** @internal */
+export function TreeItemVisibilityButton({ node, onVisibilityButtonClick, getVisibilityButtonState, ...props }) {
+    if ("type" in node || !isPresentationHierarchyNode(node)) {
+        return null;
+    }
+    const checkboxState = getVisibilityButtonState(node);
+    const getIcon = () => {
+        switch (checkboxState.state) {
+            case "visible":
+                return visibilityShowIcon;
+            case "hidden":
+                return visibilityHideIcon;
+            case "partial":
+                return visibilityPartialIcon;
+        }
+    };
+    return (_jsx(IconButton, { ...props, label: checkboxState.tooltip ?? "Determining visibility...", variant: "ghost", className: cx(`tw-tree-node-visibility-button-${checkboxState.state}`, props.className), onClick: (e) => {
+            e.stopPropagation();
+            onVisibilityButtonClick(node, checkboxState.state);
+        }, "aria-disabled": checkboxState.isDisabled, icon: getIcon() }));
+}
+//# sourceMappingURL=TreeNodeVisibilityButton.js.map

package/lib/esm/tree-widget-react/components/trees/common/components/TreeNodeVisibilityButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeNodeVisibilityButton.js","sourceRoot":"","sources":["../../../../../../../src/tree-widget-react/components/trees/common/components/TreeNodeVisibilityButton.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,gCAAgC,CAAC;AACxC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,2BAA2B,EAAE,MAAM,uCAAuC,CAAC;AAKpF,MAAM,kBAAkB,GAAG,IAAI,GAAG,CAAC,0CAA0C,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;AACrG,MAAM,kBAAkB,GAAG,IAAI,GAAG,CAAC,0CAA0C,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;AACrG,MAAM,qBAAqB,GAAG,IAAI,GAAG,CAAC,8CAA8C,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;AAwB5G,gBAAgB;AAChB,MAAM,UAAU,wBAAwB,CAAC,EACvC,IAAI,EACJ,uBAAuB,EACvB,wBAAwB,EACxB,GAAG,KAAK,EAC+C;IACvD,IAAI,MAAM,IAAI,IAAI,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,EAAE;QACxD,OAAO,IAAI,CAAC;KACb;IACD,MAAM,aAAa,GAAG,wBAAwB,CAAC,IAAI,CAAC,CAAC;IAErD,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,QAAQ,aAAa,CAAC,KAAK,EAAE;YAC3B,KAAK,SAAS;gBACZ,OAAO,kBAAkB,CAAC;YAC5B,KAAK,QAAQ;gBACX,OAAO,kBAAkB,CAAC;YAC5B,KAAK,SAAS;gBACZ,OAAO,qBAAqB,CAAC;SAChC;IACH,CAAC,CAAC;IACF,OAAO,CACL,KAAC,UAAU,OACL,KAAK,EACT,KAAK,EAAE,aAAa,CAAC,OAAO,IAAI,2BAA2B,EAC3D,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,EAAE,CAAC,kCAAkC,aAAa,CAAC,KAAK,EAAE,EAAE,KAAK,CAAC,SAAS,CAAC,EACvF,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,uBAAuB,CAAC,IAAI,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;QACrD,CAAC,mBACc,aAAa,CAAC,UAAU,EACvC,IAAI,EAAE,OAAO,EAAE,GACf,CACH,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport \"./TreeNodeVisibilityButton.css\";\nimport cx from \"classnames\";\nimport { IconButton } from \"@itwin/itwinui-react/bricks\";\nimport { isPresentationHierarchyNode } from \"@itwin/presentation-hierarchies-react\";\n\nimport type { PresentationHierarchyNode, PresentationTreeNode } from \"@itwin/presentation-hierarchies-react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nconst visibilityShowIcon = new URL(\"@itwin/itwinui-icons/visibility-show.svg\", import.meta.url).href;\nconst visibilityHideIcon = new URL(\"@itwin/itwinui-icons/visibility-hide.svg\", import.meta.url).href;\nconst visibilityPartialIcon = new URL(\"@itwin/itwinui-icons/state-inherited-dot.svg\", import.meta.url).href;\n\n/**\n * Data structure that describes tree node checkbox state.\n * @beta\n */\ninterface TreeItemVisibilityButtonState {\n  state: \"visible\" | \"partial\" | \"hidden\";\n  isDisabled?: boolean;\n  tooltip?: string;\n}\n\n/** @beta */\nexport interface TreeItemVisibilityButtonProps {\n  /** Callback that should be invoked when checkbox is clicked. */\n  onVisibilityButtonClick: (node: PresentationHierarchyNode, state: TreeItemVisibilityButtonState[\"state\"]) => void;\n  /** Callback that should be used to determine current checkbox state. */\n  getVisibilityButtonState: (node: PresentationHierarchyNode) => TreeItemVisibilityButtonState;\n}\n\n/** @internal */\ntype TreeNodeCheckboxProps = TreeItemVisibilityButtonProps &\n  Omit<ComponentPropsWithoutRef<typeof IconButton>, \"onClick\" | \"aria-disabled\" | \"title\" | \"label\" | \"icon\">;\n\n/** @internal */\nexport function TreeItemVisibilityButton({\n  node,\n  onVisibilityButtonClick,\n  getVisibilityButtonState,\n  ...props\n}: TreeNodeCheckboxProps & { node: PresentationTreeNode }) {\n  if (\"type\" in node || !isPresentationHierarchyNode(node)) {\n    return null;\n  }\n  const checkboxState = getVisibilityButtonState(node);\n\n  const getIcon = () => {\n    switch (checkboxState.state) {\n      case \"visible\":\n        return visibilityShowIcon;\n      case \"hidden\":\n        return visibilityHideIcon;\n      case \"partial\":\n        return visibilityPartialIcon;\n    }\n  };\n  return (\n    <IconButton\n      {...props}\n      label={checkboxState.tooltip ?? \"Determining visibility...\"}\n      variant={\"ghost\"}\n      className={cx(`tw-tree-node-visibility-button-${checkboxState.state}`, props.className)}\n      onClick={(e) => {\n        e.stopPropagation();\n        onVisibilityButtonClick(node, checkboxState.state);\n      }}\n      aria-disabled={checkboxState.isDisabled}\n      icon={getIcon()}\n    />\n  );\n}\n"]}

package/lib/esm/tree-widget-react/components/trees/common/components/TreeRenderer.d.ts

@@ -1,19 +1,13 @@
-import { Tree } from "@itwin/itwinui-react";
-import type { TreeNodeRendererProps } from "./TreeNodeRenderer.js";
-import type { ComponentPropsWithoutRef } from "react";
-import type { PresentationHierarchyNode, PresentationTreeNode, RenderedTreeNode } from "@itwin/presentation-hierarchies-react";
+/// <reference types="react" />
+import { TreeRenderer as PresentationTree } from "@itwin/presentation-hierarchies-react";
+import type { TreeItemVisibilityButtonProps } from "./TreeNodeVisibilityButton.js";
 /** @beta */
-export type TreeRendererProps = Pick<TreeNodeRendererProps, "expandNode" | "onNodeClick" | "onNodeKeyDown" | "onFilterClick" | "getIcon" | "getLabel" | "getSublabel" | "getHierarchyLevelDetails" | "checkboxProps" | "reloadTree" | "filterButtonsVisibility"> & Omit<ComponentPropsWithoutRef<typeof Tree<RenderedTreeNode>>, "data" | "nodeRenderer" | "getNode"> & {
-    /** Tree nodes to render. */
-    rootNodes: PresentationTreeNode[];
-    /** Callback to check if specific node is selected. */
-    isNodeSelected: (nodeId: string) => boolean;
-    /** Callback that is invoked when node is double clicked. */
-    onNodeDoubleClick?: (node: PresentationHierarchyNode, isSelected: boolean) => void;
+export type TreeRendererProps = React.ComponentPropsWithoutRef<typeof PresentationTree> & {
+    visibilityButtonProps?: TreeItemVisibilityButtonProps;
 };
 /**
  * Default renderer for rendering tree data.
  * @beta
  */
-export declare function TreeRenderer({ rootNodes, expandNode, onNodeClick, onNodeKeyDown, onNodeDoubleClick, isNodeSelected, onFilterClick, getIcon, getLabel, getSublabel, getHierarchyLevelDetails, checkboxProps, filterButtonsVisibility, reloadTree, size, enableVirtualization, ...props }: TreeRendererProps): JSX.Element;
+export declare function TreeRenderer({ rootNodes, onNodeClick, expandNode, visibilityButtonProps, ...props }: TreeRendererProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TreeRenderer.d.ts.map

package/lib/esm/tree-widget-react/components/trees/common/components/TreeRenderer.js

@@ -3,42 +3,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import { useCallback } from "react";
-import { Tree } from "@itwin/itwinui-react";
-import { createRenderedTreeNodeData, LocalizationContextProvider } from "@itwin/presentation-hierarchies-react";
-import { TreeNodeRenderer } from "./TreeNodeRenderer.js";
+/* eslint-disable @itwin/no-internal */
+import { LocalizationContextProvider, TreeRenderer as PresentationTree } from "@itwin/presentation-hierarchies-react";
 import { useHierarchiesLocalization } from "../UseHierarchiesLocalization.js";
+import { TreeItemVisibilityButton } from "./TreeNodeVisibilityButton.js";
 /**
  * Default renderer for rendering tree data.
  * @beta
  */
-export function TreeRenderer({ rootNodes, expandNode, onNodeClick, onNodeKeyDown, onNodeDoubleClick, isNodeSelected, onFilterClick, getIcon, getLabel, getSublabel, getHierarchyLevelDetails, checkboxProps, filterButtonsVisibility, reloadTree, size, enableVirtualization, ...props }) {
+export function TreeRenderer({ rootNodes, onNodeClick, expandNode, visibilityButtonProps, ...props }) {
     const localizedStrings = useHierarchiesLocalization();
-    const nodeRenderer = useCallback((nodeProps) => {
-        return (_jsx(TreeNodeRenderer, { ...nodeProps, onNodeClick: (node, isSelected, event) => {
-                if (onNodeDoubleClick && event.detail === 2) {
-                    onNodeDoubleClick?.(node, !!nodeProps.isSelected);
-                    // Click node to not lose selection
-                    return onNodeClick?.(node, true, event);
-                }
-                onNodeClick?.(node, isSelected, event);
-            }, expandNode: expandNode, onNodeKeyDown: onNodeKeyDown, getIcon: getIcon, getLabel: getLabel, getSublabel: getSublabel, onFilterClick: onFilterClick, getHierarchyLevelDetails: getHierarchyLevelDetails, checkboxProps: checkboxProps, reloadTree: reloadTree, size: size, filterButtonsVisibility: filterButtonsVisibility }));
-    }, [
-        expandNode,
-        onNodeClick,
-        onNodeKeyDown,
-        onNodeDoubleClick,
-        getHierarchyLevelDetails,
-        getIcon,
-        getLabel,
-        getSublabel,
-        onFilterClick,
-        checkboxProps,
-        filterButtonsVisibility,
-        reloadTree,
-        size,
-    ]);
-    const getNode = useCallback((node) => createRenderedTreeNodeData(node, isNodeSelected), [isNodeSelected]);
-    return (_jsx(LocalizationContextProvider, { localizedStrings: localizedStrings, children: _jsx(Tree, { ...props, data: rootNodes, nodeRenderer: nodeRenderer, getNode: getNode, enableVirtualization: enableVirtualization ?? true, style: { height: "100%" }, size: size }) }));
+    return (_jsx(LocalizationContextProvider, { localizedStrings: localizedStrings, children: _jsx(PresentationTree, { ...props, onNodeClick: onNodeClick, expandNode: expandNode, rootNodes: rootNodes, actionsRenderer: visibilityButtonProps ? (node) => _jsx(TreeItemVisibilityButton, { ...visibilityButtonProps, node: node }) : undefined }) }));
 }
 //# sourceMappingURL=TreeRenderer.js.map

package/lib/esm/tree-widget-react/components/trees/common/components/TreeRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeRenderer.js","sourceRoot":"","sources":["../../../../../../../src/tree-widget-react/components/trees/common/components/TreeRenderer.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,0BAA0B,EAAE,2BAA2B,EAAE,MAAM,uCAAuC,CAAC;AAChH,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,0BAA0B,EAAE,MAAM,kCAAkC,CAAC;AA8B9E;;;GAGG;AACH,MAAM,UAAU,YAAY,CAAC,EAC3B,SAAS,EACT,UAAU,EACV,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,aAAa,EACb,OAAO,EACP,QAAQ,EACR,WAAW,EACX,wBAAwB,EACxB,aAAa,EACb,uBAAuB,EACvB,UAAU,EACV,IAAI,EACJ,oBAAoB,EACpB,GAAG,KAAK,EACU;IAClB,MAAM,gBAAgB,GAAG,0BAA0B,EAAE,CAAC;IACtD,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,SAAS,EAAE,EAAE;QACZ,OAAO,CACL,KAAC,gBAAgB,OACX,SAAS,EACb,WAAW,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE;gBACvC,IAAI,iBAAiB,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;oBAC3C,iBAAiB,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;oBAClD,mCAAmC;oBACnC,OAAO,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;iBACzC;gBACD,WAAW,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC;YACzC,CAAC,EACD,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAC5B,wBAAwB,EAAE,wBAAwB,EAClD,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,EACV,uBAAuB,EAAE,uBAAuB,GAChD,CACH,CAAC;IACJ,CAAC,EACD;QACE,UAAU;QACV,WAAW;QACX,aAAa;QACb,iBAAiB;QACjB,wBAAwB;QACxB,OAAO;QACP,QAAQ;QACR,WAAW;QACX,aAAa;QACb,aAAa;QACb,uBAAuB;QACvB,UAAU;QACV,IAAI;KACL,CACF,CAAC;IAEF,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,IAAI,EAAE,EAAE,CAAC,0BAA0B,CAAC,IAAI,EAAE,cAAc,CAAC,EAC1D,CAAC,cAAc,CAAC,CACjB,CAAC;IAEF,OAAO,CACL,KAAC,2BAA2B,IAAC,gBAAgB,EAAE,gBAAgB,YAC7D,KAAC,IAAI,OACC,KAAK,EACT,IAAI,EAAE,SAAS,EACf,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,oBAAoB,EAAE,oBAAoB,IAAI,IAAI,EAClD,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,EACzB,IAAI,EAAE,IAAI,GACV,GAC0B,CAC/B,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport { useCallback } from \"react\";\nimport { Tree } from \"@itwin/itwinui-react\";\nimport { createRenderedTreeNodeData, LocalizationContextProvider } from \"@itwin/presentation-hierarchies-react\";\nimport { TreeNodeRenderer } from \"./TreeNodeRenderer.js\";\nimport { useHierarchiesLocalization } from \"../UseHierarchiesLocalization.js\";\n\nimport type { TreeNodeRendererProps } from \"./TreeNodeRenderer.js\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport type { PresentationHierarchyNode, PresentationTreeNode, RenderedTreeNode } from \"@itwin/presentation-hierarchies-react\";\n\n/** @beta */\nexport type TreeRendererProps = Pick<\n  TreeNodeRendererProps,\n  | \"expandNode\"\n  | \"onNodeClick\"\n  | \"onNodeKeyDown\"\n  | \"onFilterClick\"\n  | \"getIcon\"\n  | \"getLabel\"\n  | \"getSublabel\"\n  | \"getHierarchyLevelDetails\"\n  | \"checkboxProps\"\n  | \"reloadTree\"\n  | \"filterButtonsVisibility\"\n> &\n  Omit<ComponentPropsWithoutRef<typeof Tree<RenderedTreeNode>>, \"data\" | \"nodeRenderer\" | \"getNode\"> & {\n    /** Tree nodes to render. */\n    rootNodes: PresentationTreeNode[];\n    /** Callback to check if specific node is selected. */\n    isNodeSelected: (nodeId: string) => boolean;\n    /** Callback that is invoked when node is double clicked. */\n    onNodeDoubleClick?: (node: PresentationHierarchyNode, isSelected: boolean) => void;\n  };\n\n/**\n * Default renderer for rendering tree data.\n * @beta\n */\nexport function TreeRenderer({\n  rootNodes,\n  expandNode,\n  onNodeClick,\n  onNodeKeyDown,\n  onNodeDoubleClick,\n  isNodeSelected,\n  onFilterClick,\n  getIcon,\n  getLabel,\n  getSublabel,\n  getHierarchyLevelDetails,\n  checkboxProps,\n  filterButtonsVisibility,\n  reloadTree,\n  size,\n  enableVirtualization,\n  ...props\n}: TreeRendererProps) {\n  const localizedStrings = useHierarchiesLocalization();\n  const nodeRenderer = useCallback<ComponentPropsWithoutRef<typeof Tree<RenderedTreeNode>>[\"nodeRenderer\"]>(\n    (nodeProps) => {\n      return (\n        <TreeNodeRenderer\n          {...nodeProps}\n          onNodeClick={(node, isSelected, event) => {\n            if (onNodeDoubleClick && event.detail === 2) {\n              onNodeDoubleClick?.(node, !!nodeProps.isSelected);\n              // Click node to not lose selection\n              return onNodeClick?.(node, true, event);\n            }\n            onNodeClick?.(node, isSelected, event);\n          }}\n          expandNode={expandNode}\n          onNodeKeyDown={onNodeKeyDown}\n          getIcon={getIcon}\n          getLabel={getLabel}\n          getSublabel={getSublabel}\n          onFilterClick={onFilterClick}\n          getHierarchyLevelDetails={getHierarchyLevelDetails}\n          checkboxProps={checkboxProps}\n          reloadTree={reloadTree}\n          size={size}\n          filterButtonsVisibility={filterButtonsVisibility}\n        />\n      );\n    },\n    [\n      expandNode,\n      onNodeClick,\n      onNodeKeyDown,\n      onNodeDoubleClick,\n      getHierarchyLevelDetails,\n      getIcon,\n      getLabel,\n      getSublabel,\n      onFilterClick,\n      checkboxProps,\n      filterButtonsVisibility,\n      reloadTree,\n      size,\n    ],\n  );\n\n  const getNode = useCallback<ComponentPropsWithoutRef<typeof Tree<RenderedTreeNode>>[\"getNode\"]>(\n    (node) => createRenderedTreeNodeData(node, isNodeSelected),\n    [isNodeSelected],\n  );\n\n  return (\n    <LocalizationContextProvider localizedStrings={localizedStrings}>\n      <Tree<RenderedTreeNode>\n        {...props}\n        data={rootNodes}\n        nodeRenderer={nodeRenderer}\n        getNode={getNode}\n        enableVirtualization={enableVirtualization ?? true}\n        style={{ height: \"100%\" }}\n        size={size}\n      />\n    </LocalizationContextProvider>\n  );\n}\n"]}
+{"version":3,"file":"TreeRenderer.js","sourceRoot":"","sources":["../../../../../../../src/tree-widget-react/components/trees/common/components/TreeRenderer.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG,uCAAuC;AAEvC,OAAO,EAAE,2BAA2B,EAAE,YAAY,IAAI,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AACtH,OAAO,EAAE,0BAA0B,EAAE,MAAM,kCAAkC,CAAC;AAC9E,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAMzE;;;GAGG;AACH,MAAM,UAAU,YAAY,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,qBAAqB,EAAE,GAAG,KAAK,EAAqB;IACrH,MAAM,gBAAgB,GAAG,0BAA0B,EAAE,CAAC;IACtD,OAAO,CACL,KAAC,2BAA2B,IAAC,gBAAgB,EAAE,gBAAgB,YAC7D,KAAC,gBAAgB,OACX,KAAK,EACT,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,KAAC,wBAAwB,OAAK,qBAAqB,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC,CAAC,CAAC,SAAS,GAClI,GAC0B,CAC/B,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/* eslint-disable @itwin/no-internal */\n\nimport { LocalizationContextProvider, TreeRenderer as PresentationTree } from \"@itwin/presentation-hierarchies-react\";\nimport { useHierarchiesLocalization } from \"../UseHierarchiesLocalization.js\";\nimport { TreeItemVisibilityButton } from \"./TreeNodeVisibilityButton.js\";\n\nimport type { TreeItemVisibilityButtonProps } from \"./TreeNodeVisibilityButton.js\";\n/** @beta */\nexport type TreeRendererProps = React.ComponentPropsWithoutRef<typeof PresentationTree> & { visibilityButtonProps?: TreeItemVisibilityButtonProps };\n\n/**\n * Default renderer for rendering tree data.\n * @beta\n */\nexport function TreeRenderer({ rootNodes, onNodeClick, expandNode, visibilityButtonProps, ...props }: TreeRendererProps) {\n  const localizedStrings = useHierarchiesLocalization();\n  return (\n    <LocalizationContextProvider localizedStrings={localizedStrings}>\n      <PresentationTree\n        {...props}\n        onNodeClick={onNodeClick}\n        expandNode={expandNode}\n        rootNodes={rootNodes}\n        actionsRenderer={visibilityButtonProps ? (node) => <TreeItemVisibilityButton {...visibilityButtonProps} node={node} /> : undefined}\n      />\n    </LocalizationContextProvider>\n  );\n}\n"]}

package/lib/esm/tree-widget-react/components/trees/common/components/UseVisibilityButtonHandler.d.ts

@@ -0,0 +1,13 @@
+import type { PresentationTreeNode } from "@itwin/presentation-hierarchies-react";
+import type { TreeItemVisibilityButtonProps } from "./TreeNodeVisibilityButton.js";
+interface UseVisibilityButtonHandlerProps {
+    rootNodes: PresentationTreeNode[] | undefined;
+    isNodeSelected?: (nodeId: string) => boolean;
+    onClick: TreeItemVisibilityButtonProps["onVisibilityButtonClick"];
+}
+interface UseVisibilityButtonHandlerResult {
+    onVisibilityButtonClick: TreeItemVisibilityButtonProps["onVisibilityButtonClick"];
+}
+export declare function useVisibilityButtonHandler({ rootNodes, isNodeSelected, onClick }: UseVisibilityButtonHandlerProps): UseVisibilityButtonHandlerResult;
+export {};
+//# sourceMappingURL=UseVisibilityButtonHandler.d.ts.map

package/lib/esm/tree-widget-react/components/trees/common/{UseMultiCheckboxHandler.js → components/UseVisibilityButtonHandler.js}

@@ -4,15 +4,15 @@
  *--------------------------------------------------------------------------------------------*/
 import { useCallback } from "react";
 import { isPresentationHierarchyNode } from "@itwin/presentation-hierarchies-react";
-export function useMultiCheckboxHandler({ rootNodes, isNodeSelected, onClick }) {
-    const onCheckboxClicked = useCallback((clickedNode, checked) => {
-        if (!isNodeSelected(clickedNode.id)) {
-            onClick(clickedNode, checked);
+export function useVisibilityButtonHandler({ rootNodes, isNodeSelected, onClick }) {
+    const onVisibilityButtonClick = useCallback((clickedNode, state) => {
+        if (!isNodeSelected?.(clickedNode.id)) {
+            onClick(clickedNode, state);
             return;
         }
-        rootNodes && forEachSelectedNode(rootNodes, isNodeSelected, (node) => onClick(node, checked));
+        rootNodes && forEachSelectedNode(rootNodes, isNodeSelected, (node) => onClick(node, state));
     }, [rootNodes, isNodeSelected, onClick]);
-    return { onCheckboxClicked };
+    return { onVisibilityButtonClick };
 }
 function forEachSelectedNode(nodes, isNodeSelected, callback) {
     nodes.forEach((node) => {
@@ -27,4 +27,4 @@ function forEachSelectedNode(nodes, isNodeSelected, callback) {
         }
     });
 }
-//# sourceMappingURL=UseMultiCheckboxHandler.js.map
+//# sourceMappingURL=UseVisibilityButtonHandler.js.map

package/lib/esm/tree-widget-react/components/trees/common/components/UseVisibilityButtonHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UseVisibilityButtonHandler.js","sourceRoot":"","sources":["../../../../../../../src/tree-widget-react/components/trees/common/components/UseVisibilityButtonHandler.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,2BAA2B,EAAE,MAAM,uCAAuC,CAAC;AAepF,MAAM,UAAU,0BAA0B,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,OAAO,EAAmC;IAChH,MAAM,uBAAuB,GAAG,WAAW,CACzC,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE;QACrB,IAAI,CAAC,cAAc,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE;YACrC,OAAO,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;YAC5B,OAAO;SACR;QACD,SAAS,IAAI,mBAAmB,CAAC,SAAS,EAAE,cAAc,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;IAC9F,CAAC,EACD,CAAC,SAAS,EAAE,cAAc,EAAE,OAAO,CAAC,CACrC,CAAC;IAEF,OAAO,EAAE,uBAAuB,EAAE,CAAC;AACrC,CAAC;AAED,SAAS,mBAAmB,CAC1B,KAAkC,EAClC,cAA2C,EAC3C,QAAmD;IAEnD,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;QACrB,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,EAAE;YACtC,OAAO;SACR;QACD,IAAI,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YAC3B,QAAQ,CAAC,IAAI,CAAC,CAAC;SAChB;QACD,IAAI,IAAI,CAAC,UAAU,IAAI,OAAO,IAAI,CAAC,QAAQ,KAAK,SAAS,EAAE;YACzD,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,cAAc,EAAE,QAAQ,CAAC,CAAC;SAC9D;IACH,CAAC,CAAC,CAAC;AACL,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport { useCallback } from \"react\";\nimport { isPresentationHierarchyNode } from \"@itwin/presentation-hierarchies-react\";\n\nimport type { PresentationHierarchyNode, PresentationTreeNode } from \"@itwin/presentation-hierarchies-react\";\nimport type { TreeItemVisibilityButtonProps } from \"./TreeNodeVisibilityButton.js\";\n\ninterface UseVisibilityButtonHandlerProps {\n  rootNodes: PresentationTreeNode[] | undefined;\n  isNodeSelected?: (nodeId: string) => boolean;\n  onClick: TreeItemVisibilityButtonProps[\"onVisibilityButtonClick\"];\n}\n\ninterface UseVisibilityButtonHandlerResult {\n  onVisibilityButtonClick: TreeItemVisibilityButtonProps[\"onVisibilityButtonClick\"];\n}\n\nexport function useVisibilityButtonHandler({ rootNodes, isNodeSelected, onClick }: UseVisibilityButtonHandlerProps): UseVisibilityButtonHandlerResult {\n  const onVisibilityButtonClick = useCallback<TreeItemVisibilityButtonProps[\"onVisibilityButtonClick\"]>(\n    (clickedNode, state) => {\n      if (!isNodeSelected?.(clickedNode.id)) {\n        onClick(clickedNode, state);\n        return;\n      }\n      rootNodes && forEachSelectedNode(rootNodes, isNodeSelected, (node) => onClick(node, state));\n    },\n    [rootNodes, isNodeSelected, onClick],\n  );\n\n  return { onVisibilityButtonClick };\n}\n\nfunction forEachSelectedNode(\n  nodes: Array<PresentationTreeNode>,\n  isNodeSelected: (nodeId: string) => boolean,\n  callback: (node: PresentationHierarchyNode) => void,\n) {\n  nodes.forEach((node) => {\n    if (!isPresentationHierarchyNode(node)) {\n      return;\n    }\n    if (isNodeSelected(node.id)) {\n      callback(node);\n    }\n    if (node.isExpanded && typeof node.children !== \"boolean\") {\n      forEachSelectedNode(node.children, isNodeSelected, callback);\n    }\n  });\n}\n"]}

package/lib/esm/tree-widget-react/components/trees/common/components/VisibilityTree.d.ts

@@ -11,11 +11,11 @@ export type VisibilityTreeProps = Omit<TreeProps, "treeRenderer" | "imodelAccess
         imodelAccess: ECClassHierarchyInspector;
     }) => HierarchyVisibilityHandler;
     /** Tree renderer that should be used to render tree data. */
-    treeRenderer: (treeProps: FunctionProps<TreeProps["treeRenderer"]> & Pick<VisibilityTreeRendererProps, "getCheckboxState" | "onCheckboxClicked">) => ReactNode;
+    treeRenderer: (treeProps: FunctionProps<TreeProps["treeRenderer"]> & Pick<VisibilityTreeRendererProps, "getVisibilityButtonState" | "onVisibilityButtonClick">) => ReactNode;
 };
 /**
  * Tree component that can control visibility of instances represented by tree nodes.
  * @beta
  */
-export declare function VisibilityTree({ visibilityHandlerFactory, treeRenderer, ...props }: VisibilityTreeProps): JSX.Element;
+export declare function VisibilityTree({ visibilityHandlerFactory, treeRenderer, ...props }: VisibilityTreeProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=VisibilityTree.d.ts.map

package/lib/esm/tree-widget-react/components/trees/common/components/VisibilityTree.js

@@ -14,9 +14,9 @@ import { Tree } from "./Tree.js";
 export function VisibilityTree({ visibilityHandlerFactory, treeRenderer, ...props }) {
     const { imodel, getSchemaContext } = props;
     const imodelAccess = useMemo(() => createIModelAccess({ imodel, getSchemaContext }), [imodel, getSchemaContext]);
-    const { getCheckboxState, onCheckboxClicked, triggerRefresh } = useHierarchyVisibility({
+    const { getVisibilityButtonState, onVisibilityButtonClick, triggerRefresh } = useHierarchyVisibility({
         visibilityHandlerFactory: useCallback(() => visibilityHandlerFactory({ imodelAccess }), [visibilityHandlerFactory, imodelAccess]),
     });
-    return (_jsx(Tree, { ...props, onReload: triggerRefresh, imodelAccess: imodelAccess, treeRenderer: (treeProps) => treeRenderer({ ...treeProps, getCheckboxState, onCheckboxClicked }) }));
+    return (_jsx(Tree, { ...props, onReload: triggerRefresh, imodelAccess: imodelAccess, treeRenderer: (treeProps) => treeRenderer({ ...treeProps, getVisibilityButtonState, onVisibilityButtonClick }) }));
 }
 //# sourceMappingURL=VisibilityTree.js.map

package/lib/esm/tree-widget-react/components/trees/common/components/VisibilityTree.js.map

@@ -1 +1 @@
-{"version":3,"file":"VisibilityTree.js","sourceRoot":"","sources":["../../../../../../../src/tree-widget-react/components/trees/common/components/VisibilityTree.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAmBjC;;;GAGG;AACH,MAAM,UAAU,cAAc,CAAC,EAAE,wBAAwB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAuB;IACtG,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAC;IAC3C,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,kBAAkB,CAAC,EAAE,MAAM,EAAE,gBAAgB,EAAE,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC;IACjH,MAAM,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,sBAAsB,CAAC;QACrF,wBAAwB,EAAE,WAAW,CAAC,GAAG,EAAE,CAAC,wBAAwB,CAAC,EAAE,YAAY,EAAE,CAAC,EAAE,CAAC,wBAAwB,EAAE,YAAY,CAAC,CAAC;KAClI,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,IAAI,OACC,KAAK,EACT,QAAQ,EAAE,cAAc,EACxB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,YAAY,CAAC,EAAE,GAAG,SAAS,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,CAAC,GAChG,CACH,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport { useCallback, useMemo } from \"react\";\nimport { useHierarchyVisibility } from \"../UseHierarchyVisibility.js\";\nimport { createIModelAccess } from \"../Utils.js\";\nimport { Tree } from \"./Tree.js\";\n\nimport type { FunctionProps } from \"../Utils.js\";\nimport type { TreeProps } from \"./Tree.js\";\nimport type { ReactNode } from \"react\";\nimport type { VisibilityTreeRendererProps } from \"./VisibilityTreeRenderer.js\";\nimport type { ECClassHierarchyInspector } from \"@itwin/presentation-shared\";\nimport type { HierarchyVisibilityHandler } from \"../UseHierarchyVisibility.js\";\n\n/** @beta */\nexport type VisibilityTreeProps = Omit<TreeProps, \"treeRenderer\" | \"imodelAccess\"> & {\n  /** Callback for creating visibility handler used to control visibility of instances represented by tree nodes. */\n  visibilityHandlerFactory: (props: { imodelAccess: ECClassHierarchyInspector }) => HierarchyVisibilityHandler;\n  /** Tree renderer that should be used to render tree data. */\n  treeRenderer: (\n    treeProps: FunctionProps<TreeProps[\"treeRenderer\"]> & Pick<VisibilityTreeRendererProps, \"getCheckboxState\" | \"onCheckboxClicked\">,\n  ) => ReactNode;\n};\n\n/**\n * Tree component that can control visibility of instances represented by tree nodes.\n * @beta\n */\nexport function VisibilityTree({ visibilityHandlerFactory, treeRenderer, ...props }: VisibilityTreeProps) {\n  const { imodel, getSchemaContext } = props;\n  const imodelAccess = useMemo(() => createIModelAccess({ imodel, getSchemaContext }), [imodel, getSchemaContext]);\n  const { getCheckboxState, onCheckboxClicked, triggerRefresh } = useHierarchyVisibility({\n    visibilityHandlerFactory: useCallback(() => visibilityHandlerFactory({ imodelAccess }), [visibilityHandlerFactory, imodelAccess]),\n  });\n\n  return (\n    <Tree\n      {...props}\n      onReload={triggerRefresh}\n      imodelAccess={imodelAccess}\n      treeRenderer={(treeProps) => treeRenderer({ ...treeProps, getCheckboxState, onCheckboxClicked })}\n    />\n  );\n}\n"]}
+{"version":3,"file":"VisibilityTree.js","sourceRoot":"","sources":["../../../../../../../src/tree-widget-react/components/trees/common/components/VisibilityTree.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAmBjC;;;GAGG;AACH,MAAM,UAAU,cAAc,CAAC,EAAE,wBAAwB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAuB;IACtG,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAC;IAC3C,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,kBAAkB,CAAC,EAAE,MAAM,EAAE,gBAAgB,EAAE,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC;IACjH,MAAM,EAAE,wBAAwB,EAAE,uBAAuB,EAAE,cAAc,EAAE,GAAG,sBAAsB,CAAC;QACnG,wBAAwB,EAAE,WAAW,CAAC,GAAG,EAAE,CAAC,wBAAwB,CAAC,EAAE,YAAY,EAAE,CAAC,EAAE,CAAC,wBAAwB,EAAE,YAAY,CAAC,CAAC;KAClI,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,IAAI,OACC,KAAK,EACT,QAAQ,EAAE,cAAc,EACxB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,YAAY,CAAC,EAAE,GAAG,SAAS,EAAE,wBAAwB,EAAE,uBAAuB,EAAE,CAAC,GAC9G,CACH,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport { useCallback, useMemo } from \"react\";\nimport { useHierarchyVisibility } from \"../UseHierarchyVisibility.js\";\nimport { createIModelAccess } from \"../Utils.js\";\nimport { Tree } from \"./Tree.js\";\n\nimport type { FunctionProps } from \"../Utils.js\";\nimport type { TreeProps } from \"./Tree.js\";\nimport type { ReactNode } from \"react\";\nimport type { VisibilityTreeRendererProps } from \"./VisibilityTreeRenderer.js\";\nimport type { ECClassHierarchyInspector } from \"@itwin/presentation-shared\";\nimport type { HierarchyVisibilityHandler } from \"../UseHierarchyVisibility.js\";\n\n/** @beta */\nexport type VisibilityTreeProps = Omit<TreeProps, \"treeRenderer\" | \"imodelAccess\"> & {\n  /** Callback for creating visibility handler used to control visibility of instances represented by tree nodes. */\n  visibilityHandlerFactory: (props: { imodelAccess: ECClassHierarchyInspector }) => HierarchyVisibilityHandler;\n  /** Tree renderer that should be used to render tree data. */\n  treeRenderer: (\n    treeProps: FunctionProps<TreeProps[\"treeRenderer\"]> & Pick<VisibilityTreeRendererProps, \"getVisibilityButtonState\" | \"onVisibilityButtonClick\">,\n  ) => ReactNode;\n};\n\n/**\n * Tree component that can control visibility of instances represented by tree nodes.\n * @beta\n */\nexport function VisibilityTree({ visibilityHandlerFactory, treeRenderer, ...props }: VisibilityTreeProps) {\n  const { imodel, getSchemaContext } = props;\n  const imodelAccess = useMemo(() => createIModelAccess({ imodel, getSchemaContext }), [imodel, getSchemaContext]);\n  const { getVisibilityButtonState, onVisibilityButtonClick, triggerRefresh } = useHierarchyVisibility({\n    visibilityHandlerFactory: useCallback(() => visibilityHandlerFactory({ imodelAccess }), [visibilityHandlerFactory, imodelAccess]),\n  });\n\n  return (\n    <Tree\n      {...props}\n      onReload={triggerRefresh}\n      imodelAccess={imodelAccess}\n      treeRenderer={(treeProps) => treeRenderer({ ...treeProps, getVisibilityButtonState, onVisibilityButtonClick })}\n    />\n  );\n}\n"]}

package/lib/esm/tree-widget-react/components/trees/common/components/VisibilityTreeRenderer.d.ts

@@ -1,11 +1,10 @@
-/// <reference types="react" />
 import type { TreeRendererProps } from "./TreeRenderer.js";
-import type { TreeCheckboxProps } from "./TreeNodeCheckbox.js";
+import type { TreeItemVisibilityButtonProps } from "./TreeNodeVisibilityButton.js";
 /** @beta */
-export type VisibilityTreeRendererProps = TreeRendererProps & TreeCheckboxProps;
+export type VisibilityTreeRendererProps = TreeRendererProps & TreeItemVisibilityButtonProps;
 /**
  * Tree renderer that renders tree nodes with eye checkboxes for controlling visibility of instances represented by tree nodes.
  * @beta
  */
-export declare function VisibilityTreeRenderer({ getCheckboxState, onCheckboxClicked: onClick, ...props }: VisibilityTreeRendererProps): JSX.Element;
+export declare function VisibilityTreeRenderer({ getVisibilityButtonState, onVisibilityButtonClick: onClick, ...props }: VisibilityTreeRendererProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=VisibilityTreeRenderer.d.ts.map

package/lib/esm/tree-widget-react/components/trees/common/components/VisibilityTreeRenderer.js

@@ -3,20 +3,21 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
+/* eslint-disable @itwin/no-internal */
 import { useMemo } from "react";
-import { useMultiCheckboxHandler } from "../UseMultiCheckboxHandler.js";
 import { TreeRenderer } from "./TreeRenderer.js";
+import { useVisibilityButtonHandler } from "./UseVisibilityButtonHandler.js";
 /**
  * Tree renderer that renders tree nodes with eye checkboxes for controlling visibility of instances represented by tree nodes.
  * @beta
  */
-export function VisibilityTreeRenderer({ getCheckboxState, onCheckboxClicked: onClick, ...props }) {
-    const { onCheckboxClicked } = useMultiCheckboxHandler({ rootNodes: props.rootNodes, isNodeSelected: props.isNodeSelected, onClick });
-    const checkboxProps = useMemo(() => ({
+export function VisibilityTreeRenderer({ getVisibilityButtonState, onVisibilityButtonClick: onClick, ...props }) {
+    const { onVisibilityButtonClick } = useVisibilityButtonHandler({ rootNodes: props.rootNodes, isNodeSelected: props.isNodeSelected, onClick });
+    const visibilityButtonProps = useMemo(() => ({
         variant: "eyeball",
-        getCheckboxState,
-        onCheckboxClicked,
-    }), [getCheckboxState, onCheckboxClicked]);
-    return _jsx(TreeRenderer, { ...props, checkboxProps: checkboxProps });
+        getVisibilityButtonState,
+        onVisibilityButtonClick,
+    }), [getVisibilityButtonState, onVisibilityButtonClick]);
+    return _jsx(TreeRenderer, { ...props, visibilityButtonProps: visibilityButtonProps });
 }
 //# sourceMappingURL=VisibilityTreeRenderer.js.map

package/lib/esm/tree-widget-react/components/trees/common/components/VisibilityTreeRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"VisibilityTreeRenderer.js","sourceRoot":"","sources":["../../../../../../../src/tree-widget-react/components/trees/common/components/VisibilityTreeRenderer.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,uBAAuB,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAQjD;;;GAGG;AACH,MAAM,UAAU,sBAAsB,CAAC,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,OAAO,EAAE,GAAG,KAAK,EAA+B;IAC5H,MAAM,EAAE,iBAAiB,EAAE,GAAG,uBAAuB,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,cAAc,EAAE,KAAK,CAAC,cAAc,EAAE,OAAO,EAAE,CAAC,CAAC;IAErI,MAAM,aAAa,GAAuC,OAAO,CAC/D,GAAG,EAAE,CAAC,CAAC;QACL,OAAO,EAAE,SAAS;QAClB,gBAAgB;QAChB,iBAAiB;KAClB,CAAC,EACF,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,CACtC,CAAC;IAEF,OAAO,KAAC,YAAY,OAAK,KAAK,EAAE,aAAa,EAAE,aAAa,GAAI,CAAC;AACnE,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 } from \"react\";\nimport { useMultiCheckboxHandler } from \"../UseMultiCheckboxHandler.js\";\nimport { TreeRenderer } from \"./TreeRenderer.js\";\n\nimport type { TreeRendererProps } from \"./TreeRenderer.js\";\nimport type { TreeCheckboxProps } from \"./TreeNodeCheckbox.js\";\n\n/** @beta */\nexport type VisibilityTreeRendererProps = TreeRendererProps & TreeCheckboxProps;\n\n/**\n * Tree renderer that renders tree nodes with eye checkboxes for controlling visibility of instances represented by tree nodes.\n * @beta\n */\nexport function VisibilityTreeRenderer({ getCheckboxState, onCheckboxClicked: onClick, ...props }: VisibilityTreeRendererProps) {\n  const { onCheckboxClicked } = useMultiCheckboxHandler({ rootNodes: props.rootNodes, isNodeSelected: props.isNodeSelected, onClick });\n\n  const checkboxProps: TreeRendererProps[\"checkboxProps\"] = useMemo(\n    () => ({\n      variant: \"eyeball\",\n      getCheckboxState,\n      onCheckboxClicked,\n    }),\n    [getCheckboxState, onCheckboxClicked],\n  );\n\n  return <TreeRenderer {...props} checkboxProps={checkboxProps} />;\n}\n"]}
+{"version":3,"file":"VisibilityTreeRenderer.js","sourceRoot":"","sources":["../../../../../../../src/tree-widget-react/components/trees/common/components/VisibilityTreeRenderer.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG,uCAAuC;AAEvC,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAO7E;;;GAGG;AACH,MAAM,UAAU,sBAAsB,CAAC,EAAE,wBAAwB,EAAE,uBAAuB,EAAE,OAAO,EAAE,GAAG,KAAK,EAA+B;IAC1I,MAAM,EAAE,uBAAuB,EAAE,GAAG,0BAA0B,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,cAAc,EAAE,KAAK,CAAC,cAAc,EAAE,OAAO,EAAE,CAAC,CAAC;IAC9I,MAAM,qBAAqB,GAAkC,OAAO,CAClE,GAAG,EAAE,CAAC,CAAC;QACL,OAAO,EAAE,SAAS;QAClB,wBAAwB;QACxB,uBAAuB;KACxB,CAAC,EACF,CAAC,wBAAwB,EAAE,uBAAuB,CAAC,CACpD,CAAC;IAEF,OAAO,KAAC,YAAY,OAAK,KAAK,EAAE,qBAAqB,EAAE,qBAAqB,GAAI,CAAC;AACnF,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/* eslint-disable @itwin/no-internal */\n\nimport { useMemo } from \"react\";\nimport { TreeRenderer } from \"./TreeRenderer.js\";\nimport { useVisibilityButtonHandler } from \"./UseVisibilityButtonHandler.js\";\n\nimport type { TreeRendererProps } from \"./TreeRenderer.js\";\nimport type { TreeItemVisibilityButtonProps } from \"./TreeNodeVisibilityButton.js\";\n/** @beta */\nexport type VisibilityTreeRendererProps = TreeRendererProps & TreeItemVisibilityButtonProps;\n\n/**\n * Tree renderer that renders tree nodes with eye checkboxes for controlling visibility of instances represented by tree nodes.\n * @beta\n */\nexport function VisibilityTreeRenderer({ getVisibilityButtonState, onVisibilityButtonClick: onClick, ...props }: VisibilityTreeRendererProps) {\n  const { onVisibilityButtonClick } = useVisibilityButtonHandler({ rootNodes: props.rootNodes, isNodeSelected: props.isNodeSelected, onClick });\n  const visibilityButtonProps: TreeItemVisibilityButtonProps = useMemo(\n    () => ({\n      variant: \"eyeball\",\n      getVisibilityButtonState,\n      onVisibilityButtonClick,\n    }),\n    [getVisibilityButtonState, onVisibilityButtonClick],\n  );\n\n  return <TreeRenderer {...props} visibilityButtonProps={visibilityButtonProps} />;\n}\n"]}

package/lib/esm/tree-widget-react/components/trees/external-sources-tree/ExternalSourcesTree.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { TreeProps } from "../common/components/Tree.js";
 /** @beta */
 export type ExternalSourcesTreeProps = Pick<TreeProps, "imodel" | "getSchemaContext" | "selectionStorage" | "density" | "selectionMode"> & {
@@ -7,5 +6,5 @@ export type ExternalSourcesTreeProps = Pick<TreeProps, "imodel" | "getSchemaCont
     };
 };
 /** @beta */
-export declare function ExternalSourcesTree(props: ExternalSourcesTreeProps): JSX.Element;
+export declare function ExternalSourcesTree(props: ExternalSourcesTreeProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ExternalSourcesTree.d.ts.map

package/lib/esm/tree-widget-react/components/trees/external-sources-tree/ExternalSourcesTreeComponent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ExternalSourcesTreeProps } from "./ExternalSourcesTree.js";
 /** @beta */
 interface ExternalSourcesTreeComponentProps extends Pick<ExternalSourcesTreeProps, "getSchemaContext" | "selectionStorage" | "selectionMode" | "density" | "hierarchyLevelConfig" | "selectionMode"> {
@@ -10,7 +9,7 @@ interface ExternalSourcesTreeComponentProps extends Pick<ExternalSourcesTreeProp
  * @beta
  */
 export declare const ExternalSourcesTreeComponent: {
-    ({ onFeatureUsed, onPerformanceMeasured, ...props }: ExternalSourcesTreeComponentProps): JSX.Element | null;
+    ({ onFeatureUsed, onPerformanceMeasured, ...props }: ExternalSourcesTreeComponentProps): import("react/jsx-runtime").JSX.Element | null;
     /**
      * Id of the component. May be used when a creating a `TreeDefinition` for `SelectableTree`.
      * @beta

package/lib/esm/tree-widget-react/components/trees/imodel-content-tree/IModelContentTree.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { TreeProps } from "../common/components/Tree.js";
 /** @beta */
 export type IModelContentTreeProps = Pick<TreeProps, "imodel" | "getSchemaContext" | "selectionStorage" | "density" | "selectionMode"> & {
@@ -7,5 +6,5 @@ export type IModelContentTreeProps = Pick<TreeProps, "imodel" | "getSchemaContex
     };
 };
 /** @beta */
-export declare function IModelContentTree(props: IModelContentTreeProps): JSX.Element;
+export declare function IModelContentTree(props: IModelContentTreeProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=IModelContentTree.d.ts.map

package/lib/esm/tree-widget-react/components/trees/imodel-content-tree/IModelContentTreeComponent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { IModelContentTreeProps } from "./IModelContentTree.js";
 /** @beta */
 interface IModelContentTreeComponentProps extends Pick<IModelContentTreeProps, "getSchemaContext" | "selectionStorage" | "density" | "hierarchyLevelConfig" | "selectionMode"> {
@@ -10,7 +9,7 @@ interface IModelContentTreeComponentProps extends Pick<IModelContentTreeProps, "
  * @beta
  */
 export declare const IModelContentTreeComponent: {
-    ({ onFeatureUsed, onPerformanceMeasured, ...props }: IModelContentTreeComponentProps): JSX.Element | null;
+    ({ onFeatureUsed, onPerformanceMeasured, ...props }: IModelContentTreeComponentProps): import("react/jsx-runtime").JSX.Element | null;
     /**
      * Id of the component. May be used when a creating a `TreeDefinition` for `SelectableTree`.
      * @beta

package/lib/esm/tree-widget-react/components/trees/index.d.ts

@@ -6,7 +6,6 @@ export { useModelsTree } from "./models-tree/UseModelsTree.js";
 export { useCategoriesTree } from "./categories-tree/UseCategoriesTree.js";
 export { useModelsTreeButtonProps } from "./models-tree/ModelsTreeButtons.js";
 export { useCategoriesTreeButtonProps } from "./categories-tree/CategoriesTreeButtons.js";
-export { FocusedInstancesContextProvider, useFocusedInstancesContext } from "./common/FocusedInstancesContext.js";
 export { Tree } from "./common/components/Tree.js";
 export { VisibilityTree } from "./common/components/VisibilityTree.js";
 export { TreeRenderer } from "./common/components/TreeRenderer.js";

package/lib/esm/tree-widget-react/components/trees/index.js

@@ -10,7 +10,6 @@ export { useModelsTree } from "./models-tree/UseModelsTree.js";
 export { useCategoriesTree } from "./categories-tree/UseCategoriesTree.js";
 export { useModelsTreeButtonProps } from "./models-tree/ModelsTreeButtons.js";
 export { useCategoriesTreeButtonProps } from "./categories-tree/CategoriesTreeButtons.js";
-export { FocusedInstancesContextProvider, useFocusedInstancesContext } from "./common/FocusedInstancesContext.js";
 export { Tree } from "./common/components/Tree.js";
 export { VisibilityTree } from "./common/components/VisibilityTree.js";
 export { TreeRenderer } from "./common/components/TreeRenderer.js";

package/lib/esm/tree-widget-react/components/trees/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/tree-widget-react/components/trees/index.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,uBAAuB,EAAE,MAAM,8CAA8C,CAAC;AACvF,OAAO,EAAE,0BAA0B,EAAE,MAAM,qDAAqD,CAAC;AACjG,OAAO,EAAE,4BAA4B,EAAE,MAAM,yDAAyD,CAAC;AAEvG,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,wCAAwC,CAAC;AAE3E,OAAO,EAAE,wBAAwB,EAAE,MAAM,oCAAoC,CAAC;AAC9E,OAAO,EAAE,4BAA4B,EAAE,MAAM,4CAA4C,CAAC;AAE1F,OAAO,EAAE,+BAA+B,EAAE,0BAA0B,EAAE,MAAM,qCAAqC,CAAC;AAElH,OAAO,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AACnE,OAAO,EAAE,sBAAsB,EAAE,MAAM,+CAA+C,CAAC;AAEvF,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,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\nexport { ModelsTreeComponent } from \"./models-tree/ModelsTreeComponent.js\";\nexport { CategoriesTreeComponent } from \"./categories-tree/CategoriesTreeComponent.js\";\nexport { IModelContentTreeComponent } from \"./imodel-content-tree/IModelContentTreeComponent.js\";\nexport { ExternalSourcesTreeComponent } from \"./external-sources-tree/ExternalSourcesTreeComponent.js\";\n\nexport { useModelsTree } from \"./models-tree/UseModelsTree.js\";\nexport { useCategoriesTree } from \"./categories-tree/UseCategoriesTree.js\";\n\nexport { useModelsTreeButtonProps } from \"./models-tree/ModelsTreeButtons.js\";\nexport { useCategoriesTreeButtonProps } from \"./categories-tree/CategoriesTreeButtons.js\";\n\nexport { FocusedInstancesContextProvider, useFocusedInstancesContext } from \"./common/FocusedInstancesContext.js\";\n\nexport { Tree } from \"./common/components/Tree.js\";\nexport { VisibilityTree } from \"./common/components/VisibilityTree.js\";\nexport { TreeRenderer } from \"./common/components/TreeRenderer.js\";\nexport { VisibilityTreeRenderer } from \"./common/components/VisibilityTreeRenderer.js\";\nexport { HierarchyVisibilityHandler, VisibilityStatus } from \"./common/UseHierarchyVisibility.js\";\nexport { TelemetryContextProvider } from \"./common/UseTelemetryContext.js\";\nexport { FilterLimitExceededError } from \"./common/TreeErrors.js\";\n\nexport { ModelsTreeVisibilityHandlerOverrides } from \"./models-tree/internal/ModelsTreeVisibilityHandler.js\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/tree-widget-react/components/trees/index.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,uBAAuB,EAAE,MAAM,8CAA8C,CAAC;AACvF,OAAO,EAAE,0BAA0B,EAAE,MAAM,qDAAqD,CAAC;AACjG,OAAO,EAAE,4BAA4B,EAAE,MAAM,yDAAyD,CAAC;AAEvG,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,wCAAwC,CAAC;AAE3E,OAAO,EAAE,wBAAwB,EAAE,MAAM,oCAAoC,CAAC;AAC9E,OAAO,EAAE,4BAA4B,EAAE,MAAM,4CAA4C,CAAC;AAE1F,OAAO,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AACnE,OAAO,EAAE,sBAAsB,EAAE,MAAM,+CAA+C,CAAC;AAEvF,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,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\nexport { ModelsTreeComponent } from \"./models-tree/ModelsTreeComponent.js\";\nexport { CategoriesTreeComponent } from \"./categories-tree/CategoriesTreeComponent.js\";\nexport { IModelContentTreeComponent } from \"./imodel-content-tree/IModelContentTreeComponent.js\";\nexport { ExternalSourcesTreeComponent } from \"./external-sources-tree/ExternalSourcesTreeComponent.js\";\n\nexport { useModelsTree } from \"./models-tree/UseModelsTree.js\";\nexport { useCategoriesTree } from \"./categories-tree/UseCategoriesTree.js\";\n\nexport { useModelsTreeButtonProps } from \"./models-tree/ModelsTreeButtons.js\";\nexport { useCategoriesTreeButtonProps } from \"./categories-tree/CategoriesTreeButtons.js\";\n\nexport { Tree } from \"./common/components/Tree.js\";\nexport { VisibilityTree } from \"./common/components/VisibilityTree.js\";\nexport { TreeRenderer } from \"./common/components/TreeRenderer.js\";\nexport { VisibilityTreeRenderer } from \"./common/components/VisibilityTreeRenderer.js\";\nexport { HierarchyVisibilityHandler, VisibilityStatus } from \"./common/UseHierarchyVisibility.js\";\nexport { TelemetryContextProvider } from \"./common/UseTelemetryContext.js\";\nexport { FilterLimitExceededError } from \"./common/TreeErrors.js\";\n\nexport { ModelsTreeVisibilityHandlerOverrides } from \"./models-tree/internal/ModelsTreeVisibilityHandler.js\";\n"]}

package/lib/esm/tree-widget-react/components/trees/models-tree/ModelsTree.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { UseModelsTreeProps } from "./UseModelsTree.js";
 import type { VisibilityTreeProps } from "../common/components/VisibilityTree.js";
 /** @beta */
@@ -8,5 +7,5 @@ export type ModelsTreeProps = Pick<VisibilityTreeProps, "imodel" | "getSchemaCon
     };
 };
 /** @beta */
-export declare function ModelsTree({ imodel, getSchemaContext, selectionStorage, activeView, filter, density, hierarchyLevelConfig, hierarchyConfig, selectionMode, selectionPredicate, visibilityHandlerOverrides, getFilteredPaths, onModelsFiltered, }: ModelsTreeProps): JSX.Element;
+export declare function ModelsTree({ imodel, getSchemaContext, selectionStorage, activeView, filter, density, hierarchyLevelConfig, hierarchyConfig, selectionMode, selectionPredicate, visibilityHandlerOverrides, getFilteredPaths, onModelsFiltered, }: ModelsTreeProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ModelsTree.d.ts.map

package/lib/esm/tree-widget-react/components/trees/models-tree/ModelsTreeButtons.d.ts

@@ -46,20 +46,19 @@ export declare function useModelsTreeButtonProps({ imodel, viewport }: {
     onModelsFiltered: (models: Id64String[] | undefined) => void;
 };
 /** @public */
-export type ModelsTreeHeaderButtonType = (props: ModelsTreeHeaderButtonProps) => JSX.Element | null;
+export type ModelsTreeHeaderButtonType = (props: ModelsTreeHeaderButtonProps) => React.ReactElement | null;
 /** @public */
-export declare function ShowAllButton(props: ModelsTreeHeaderButtonProps): JSX.Element;
+export declare function ShowAllButton(props: ModelsTreeHeaderButtonProps): import("react/jsx-runtime").JSX.Element;
 /** @public */
-export declare function HideAllButton(props: ModelsTreeHeaderButtonProps): JSX.Element;
+export declare function HideAllButton(props: ModelsTreeHeaderButtonProps): import("react/jsx-runtime").JSX.Element;
 /** @public */
-export declare function InvertButton(props: ModelsTreeHeaderButtonProps): JSX.Element;
+export declare function InvertButton(props: ModelsTreeHeaderButtonProps): import("react/jsx-runtime").JSX.Element;
 /** @public */
-export declare function View2DButton(props: ModelsTreeHeaderButtonProps): JSX.Element;
+export declare function View2DButton(props: ModelsTreeHeaderButtonProps): import("react/jsx-runtime").JSX.Element;
 /** @public */
-export declare function View3DButton(props: ModelsTreeHeaderButtonProps): JSX.Element;
+export declare function View3DButton(props: ModelsTreeHeaderButtonProps): import("react/jsx-runtime").JSX.Element;
 /** @public */
-export declare function ToggleInstancesFocusButton({ density, onFeatureUsed }: {
-    density?: "default" | "enlarged";
+export declare function ToggleInstancesFocusButton({ onFeatureUsed }: {
     onFeatureUsed?: (feature: string) => void;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ModelsTreeButtons.d.ts.map

package/lib/esm/tree-widget-react/components/trees/models-tree/ModelsTreeButtons.js

@@ -1,14 +1,17 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import { useEffect, useMemo, useState } from "react";
-import { SvgCursorClick, SvgVisibilityHalf, SvgVisibilityHide, SvgVisibilityShow } from "@itwin/itwinui-icons-react";
-import { Button, IconButton, Tooltip } from "@itwin/itwinui-react";
+import { Button, Icon, IconButton, Tooltip } from "@itwin/itwinui-react/bricks";
 import { TreeWidget } from "../../../TreeWidget.js";
 import { useFocusedInstancesContext } from "../common/FocusedInstancesContext.js";
 import { areAllModelsVisible, hideAllModels, invertAllModels, showAllModels, toggleModels } from "./internal/ModelsTreeVisibilityHandler.js";
+const visibilityShowIcon = new URL("@itwin/itwinui-icons/visibility-show.svg", import.meta.url).href;
+const visibilityHideIcon = new URL("@itwin/itwinui-icons/visibility-hide.svg", import.meta.url).href;
+const visibilityHalfIcon = new URL("@itwin/itwinui-icons/state-inherited-dot.svg", import.meta.url).href; // temporary icon
+const cursorClickIcon = new URL("@itwin/itwinui-icons/placeholder.svg", import.meta.url).href; // temporary icon
 /**
  * Custom hook that creates props required to render `ModelsTreeComponent` header button.
  *
@@ -71,24 +74,24 @@ async function queryModelsForHeaderActions(iModel) {
 }
 /** @public */
 export function ShowAllButton(props) {
-    return (_jsx(IconButton, { size: props.density === "enlarged" ? "large" : "small", styleType: "borderless", label: TreeWidget.translate("modelsTree.buttons.showAll.tooltip"), onClick: () => {
+    return (_jsx(IconButton, { label: TreeWidget.translate("modelsTree.buttons.showAll.tooltip"), onClick: () => {
             props.onFeatureUsed?.("models-tree-showall");
             void showAllModels(props.models.map((model) => model.id), props.viewport);
-        }, children: _jsx(SvgVisibilityShow, {}) }));
+        }, icon: visibilityShowIcon }));
 }
 /** @public */
 export function HideAllButton(props) {
-    return (_jsx(IconButton, { size: props.density === "enlarged" ? "large" : "small", styleType: "borderless", label: TreeWidget.translate("modelsTree.buttons.hideAll.tooltip"), onClick: () => {
+    return (_jsx(IconButton, { label: TreeWidget.translate("modelsTree.buttons.hideAll.tooltip"), onClick: () => {
             props.onFeatureUsed?.("models-tree-hideall");
             void hideAllModels(props.models.map((model) => model.id), props.viewport);
-        }, children: _jsx(SvgVisibilityHide, {}) }));
+        }, icon: visibilityHideIcon }));
 }
 /** @public */
 export function InvertButton(props) {
-    return (_jsx(IconButton, { size: props.density === "enlarged" ? "large" : "small", styleType: "borderless", label: TreeWidget.translate("modelsTree.buttons.invert.tooltip"), onClick: () => {
+    return (_jsx(IconButton, { label: TreeWidget.translate("modelsTree.buttons.invert.tooltip"), onClick: () => {
             props.onFeatureUsed?.("models-tree-invert");
             void invertAllModels(props.models.map((model) => model.id), props.viewport);
-        }, children: _jsx(SvgVisibilityHalf, {}) }));
+        }, icon: visibilityHalfIcon }));
 }
 /** @public */
 export function View2DButton(props) {
@@ -100,10 +103,10 @@ export function View2DButton(props) {
         setIs2dToggleActive(areAllModelsVisible(models2d, props.viewport));
         return props.viewport.onViewedModelsChanged.addListener((vp) => setIs2dToggleActive(areAllModelsVisible(models2d, vp)));
     }, [models2d, props.viewport]);
-    return (_jsx(Tooltip, { content: TreeWidget.translate("modelsTree.buttons.toggle2d.tooltip"), children: _jsx(Button, { size: props.density === "enlarged" ? "large" : "small", styleType: "borderless", onClick: () => {
+    return (_jsx(Tooltip, { content: TreeWidget.translate("modelsTree.buttons.toggle2d.tooltip"), children: _jsxs(Button, { onClick: () => {
                 props.onFeatureUsed?.("models-tree-view2d");
                 void toggleModels(models2d, is2dToggleActive, props.viewport);
-            }, disabled: models2d.length === 0, endIcon: is2dToggleActive ? _jsx(SvgVisibilityShow, {}) : _jsx(SvgVisibilityHide, {}), children: TreeWidget.translate("modelsTree.buttons.toggle2d.label") }) }));
+            }, disabled: models2d.length === 0, children: [TreeWidget.translate("modelsTree.buttons.toggle2d.label"), _jsx(Icon, { href: is2dToggleActive ? visibilityShowIcon : visibilityHideIcon })] }) }));
 }
 /** @public */
 export function View3DButton(props) {
@@ -115,20 +118,20 @@ export function View3DButton(props) {
         setIs3dToggleActive(areAllModelsVisible(models3d, props.viewport));
         return props.viewport.onViewedModelsChanged.addListener((vp) => setIs3dToggleActive(areAllModelsVisible(models3d, vp)));
     }, [models3d, props.viewport]);
-    return (_jsx(Tooltip, { content: TreeWidget.translate("modelsTree.buttons.toggle3d.tooltip"), children: _jsx(Button, { size: props.density === "enlarged" ? "large" : "small", styleType: "borderless", onClick: () => {
+    return (_jsx(Tooltip, { content: TreeWidget.translate("modelsTree.buttons.toggle3d.tooltip"), children: _jsxs(Button, { onClick: () => {
                 props.onFeatureUsed?.("models-tree-view3d");
                 void toggleModels(models3d, is3dToggleActive, props.viewport);
-            }, disabled: models3d.length === 0, endIcon: is3dToggleActive ? _jsx(SvgVisibilityShow, {}) : _jsx(SvgVisibilityHide, {}), children: TreeWidget.translate("modelsTree.buttons.toggle3d.label") }) }));
+            }, disabled: models3d.length === 0, children: [TreeWidget.translate("modelsTree.buttons.toggle3d.label"), _jsx(Icon, { href: is3dToggleActive ? visibilityShowIcon : visibilityHideIcon })] }) }));
 }
 /** @public */
-export function ToggleInstancesFocusButton({ density, onFeatureUsed }) {
+export function ToggleInstancesFocusButton({ onFeatureUsed }) {
     const { enabled, toggle } = useFocusedInstancesContext();
     const label = enabled
         ? TreeWidget.translate("modelsTree.buttons.toggleFocusMode.disable.tooltip")
         : TreeWidget.translate("modelsTree.buttons.toggleFocusMode.enable.tooltip");
-    return (_jsx(IconButton, { styleType: "borderless", size: density === "enlarged" ? "large" : "small", label: label, onClick: () => {
+    return (_jsx(IconButton, { variant: "ghost", label: label, onClick: () => {
             onFeatureUsed?.("models-tree-instancesfocus");
             toggle();
-        }, isActive: enabled, children: _jsx(SvgCursorClick, {}) }));
+        }, isActive: enabled, icon: cursorClickIcon }));
 }
 //# sourceMappingURL=ModelsTreeButtons.js.map