@itwin/core-react 4.0.0-dev.1 → 4.0.0-dev.10

package/lib/cjs/core-react/tree/Branch.js

@@ -1,24 +1,24 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Tree
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TreeBranch = void 0;
-require("./Branch.scss");
-const classnames_1 = require("classnames");
-const React = require("react");
-/** Presentation React component for a Tree branch
- * @public
- */
-class TreeBranch extends React.PureComponent {
-    render() {
-        const className = (0, classnames_1.default)("core-tree-branch", this.props.className);
-        return (React.createElement("div", { className: className, style: this.props.style }, this.props.children));
-    }
-}
-exports.TreeBranch = TreeBranch;
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Tree
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeBranch = void 0;
+require("./Branch.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+/** Presentation React component for a Tree branch
+ * @public
+ */
+class TreeBranch extends React.PureComponent {
+    render() {
+        const className = (0, classnames_1.default)("core-tree-branch", this.props.className);
+        return (React.createElement("div", { className: className, style: this.props.style }, this.props.children));
+    }
+}
+exports.TreeBranch = TreeBranch;
 //# sourceMappingURL=Branch.js.map

package/lib/cjs/core-react/tree/Branch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Branch.js","sourceRoot":"","sources":["../../../../src/core-react/tree/Branch.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,yBAAuB;AACvB,2CAAoC;AACpC,+BAA+B;AAW/B;;GAEG;AACH,MAAa,UAAW,SAAQ,KAAK,CAAC,aAA8B;IAClD,MAAM;QACpB,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,kBAAkB,EAClB,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAExB,OAAO,CACL,6BACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAEtB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAChB,CACP,CAAC;IACJ,CAAC;CACF;AAfD,gCAeC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Tree\r\n */\r\n\r\nimport \"./Branch.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps } from \"../utils/Props\";\r\n\r\n/** Properties for [[TreeBranch]] React component\r\n * @public\r\n */\r\nexport interface TreeBranchProps extends CommonProps {\r\n  /** Child nodes of the tree branch */\r\n  children?: React.ReactNode;\r\n}\r\n\r\n/** Presentation React component for a Tree branch\r\n * @public\r\n */\r\nexport class TreeBranch extends React.PureComponent<TreeBranchProps> {\r\n  public override render() {\r\n    const className = classnames(\r\n      \"core-tree-branch\",\r\n      this.props.className);\r\n\r\n    return (\r\n      <div\r\n        className={className}\r\n        style={this.props.style}\r\n      >\r\n        {this.props.children}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"Branch.js","sourceRoot":"","sources":["../../../../src/core-react/tree/Branch.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,yBAAuB;AACvB,2CAAoC;AACpC,+BAA+B;AAW/B;;GAEG;AACH,MAAa,UAAW,SAAQ,KAAK,CAAC,aAA8B;IAClD,MAAM;QACpB,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,kBAAkB,EAClB,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAExB,OAAO,CACL,6BACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAEtB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAChB,CACP,CAAC;IACJ,CAAC;CACF;AAfD,gCAeC","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/** @packageDocumentation\n * @module Tree\n */\n\nimport \"./Branch.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { CommonProps } from \"../utils/Props\";\n\n/** Properties for [[TreeBranch]] React component\n * @public\n */\nexport interface TreeBranchProps extends CommonProps {\n  /** Child nodes of the tree branch */\n  children?: React.ReactNode;\n}\n\n/** Presentation React component for a Tree branch\n * @public\n */\nexport class TreeBranch extends React.PureComponent<TreeBranchProps> {\n  public override render() {\n    const className = classnames(\n      \"core-tree-branch\",\n      this.props.className);\n\n    return (\n      <div\n        className={className}\n        style={this.props.style}\n      >\n        {this.props.children}\n      </div>\n    );\n  }\n}\n"]}

package/lib/cjs/core-react/tree/Branch.scss

@@ -1,13 +1,13 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-
-.core-tree-branch {
-  display: block;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0 0 0 20px;
-  width: fit-content;
-  min-width: 100%;
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+.core-tree-branch {
+  display: block;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0 0 0 20px;
+  width: fit-content;
+  min-width: 100%;
 }

package/lib/cjs/core-react/tree/ExpansionToggle.d.ts

@@ -1,21 +1,21 @@
-/** @packageDocumentation
- * @module Tree
- */
-import "./ExpansionToggle.scss";
-import * as React from "react";
-import { CommonProps } from "../utils/Props";
-/** Properties for the [[ExpansionToggle]] component
- * @public
- */
-export interface ExpansionToggleProps extends CommonProps {
-    isExpanded?: boolean;
-    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
-    ["data-testid"]?: string;
-}
-/** ExpansionToggle React component used by the [[TreeNode]] component to show collapsed or expanded state
- * @public
- */
-export declare class ExpansionToggle extends React.PureComponent<ExpansionToggleProps> {
-    render(): JSX.Element;
-}
+/** @packageDocumentation
+ * @module Tree
+ */
+import "./ExpansionToggle.scss";
+import * as React from "react";
+import { CommonProps } from "../utils/Props";
+/** Properties for the [[ExpansionToggle]] component
+ * @public
+ */
+export interface ExpansionToggleProps extends CommonProps {
+    isExpanded?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    ["data-testid"]?: string;
+}
+/** ExpansionToggle React component used by the [[TreeNode]] component to show collapsed or expanded state
+ * @public
+ */
+export declare class ExpansionToggle extends React.PureComponent<ExpansionToggleProps> {
+    render(): JSX.Element;
+}
 //# sourceMappingURL=ExpansionToggle.d.ts.map

package/lib/cjs/core-react/tree/ExpansionToggle.js

@@ -1,29 +1,29 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Tree
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExpansionToggle = void 0;
-require("./ExpansionToggle.scss");
-const classnames_1 = require("classnames");
-const React = require("react");
-const UiCore_1 = require("../UiCore");
-/** ExpansionToggle React component used by the [[TreeNode]] component to show collapsed or expanded state
- * @public
- */
-class ExpansionToggle extends React.PureComponent {
-    render() {
-        const className = (0, classnames_1.default)("core-tree-expansionToggle", this.props.isExpanded && "is-expanded", this.props.className);
-        const label = UiCore_1.UiCore.translate(this.props.isExpanded ? "tree.collapse" : "tree.expand");
-        return (
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-        React.createElement("div", { onClick: this.props.onClick, className: className, style: this.props.style, "data-testid": this.props["data-testid"], role: "button", tabIndex: -1, "aria-label": label },
-            React.createElement("i", { className: "toggle icon icon-chevron-right" })));
-    }
-}
-exports.ExpansionToggle = ExpansionToggle;
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Tree
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExpansionToggle = void 0;
+require("./ExpansionToggle.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const UiCore_1 = require("../UiCore");
+/** ExpansionToggle React component used by the [[TreeNode]] component to show collapsed or expanded state
+ * @public
+ */
+class ExpansionToggle extends React.PureComponent {
+    render() {
+        const className = (0, classnames_1.default)("core-tree-expansionToggle", this.props.isExpanded && "is-expanded", this.props.className);
+        const label = UiCore_1.UiCore.translate(this.props.isExpanded ? "tree.collapse" : "tree.expand");
+        return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+        React.createElement("div", { onClick: this.props.onClick, className: className, style: this.props.style, "data-testid": this.props["data-testid"], role: "button", tabIndex: -1, "aria-label": label },
+            React.createElement("i", { className: "toggle icon icon-chevron-right" })));
+    }
+}
+exports.ExpansionToggle = ExpansionToggle;
 //# sourceMappingURL=ExpansionToggle.js.map

package/lib/cjs/core-react/tree/ExpansionToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpansionToggle.js","sourceRoot":"","sources":["../../../../src/core-react/tree/ExpansionToggle.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,kCAAgC;AAChC,2CAAoC;AACpC,+BAA+B;AAE/B,sCAAmC;AAWnC;;GAEG;AACH,MAAa,eAAgB,SAAQ,KAAK,CAAC,aAAmC;IAC5D,MAAM;QACpB,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,2BAA2B,EAC3B,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,aAAa,EACtC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QACxB,MAAM,KAAK,GAAG,eAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;QAExF,OAAO;QACL,iEAAiE;QACjE,6BACE,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAC3B,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,iBACV,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,EACtC,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,CAAC,gBACA,KAAK;YAEjB,2BAAG,SAAS,EAAC,gCAAgC,GAAG,CAC5C,CACP,CAAC;IACJ,CAAC;CACF;AAvBD,0CAuBC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Tree\r\n */\r\n\r\nimport \"./ExpansionToggle.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport { UiCore } from \"../UiCore\";\r\n\r\n/** Properties for the [[ExpansionToggle]] component\r\n * @public\r\n */\r\nexport interface ExpansionToggleProps extends CommonProps {\r\n  isExpanded?: boolean;\r\n  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;\r\n  [\"data-testid\"]?: string;\r\n}\r\n\r\n/** ExpansionToggle React component used by the [[TreeNode]] component to show collapsed or expanded state\r\n * @public\r\n */\r\nexport class ExpansionToggle extends React.PureComponent<ExpansionToggleProps> {\r\n  public override render() {\r\n    const className = classnames(\r\n      \"core-tree-expansionToggle\",\r\n      this.props.isExpanded && \"is-expanded\",\r\n      this.props.className);\r\n    const label = UiCore.translate(this.props.isExpanded ? \"tree.collapse\" : \"tree.expand\");\r\n\r\n    return (\r\n      // eslint-disable-next-line jsx-a11y/click-events-have-key-events\r\n      <div\r\n        onClick={this.props.onClick}\r\n        className={className}\r\n        style={this.props.style}\r\n        data-testid={this.props[\"data-testid\"]}\r\n        role=\"button\"\r\n        tabIndex={-1}\r\n        aria-label={label}\r\n      >\r\n        <i className=\"toggle icon icon-chevron-right\" />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"ExpansionToggle.js","sourceRoot":"","sources":["../../../../src/core-react/tree/ExpansionToggle.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,kCAAgC;AAChC,2CAAoC;AACpC,+BAA+B;AAE/B,sCAAmC;AAWnC;;GAEG;AACH,MAAa,eAAgB,SAAQ,KAAK,CAAC,aAAmC;IAC5D,MAAM;QACpB,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,2BAA2B,EAC3B,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,aAAa,EACtC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QACxB,MAAM,KAAK,GAAG,eAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;QAExF,OAAO;QACL,iEAAiE;QACjE,6BACE,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAC3B,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,iBACV,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,EACtC,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,CAAC,gBACA,KAAK;YAEjB,2BAAG,SAAS,EAAC,gCAAgC,GAAG,CAC5C,CACP,CAAC;IACJ,CAAC;CACF;AAvBD,0CAuBC","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/** @packageDocumentation\n * @module Tree\n */\n\nimport \"./ExpansionToggle.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { CommonProps } from \"../utils/Props\";\nimport { UiCore } from \"../UiCore\";\n\n/** Properties for the [[ExpansionToggle]] component\n * @public\n */\nexport interface ExpansionToggleProps extends CommonProps {\n  isExpanded?: boolean;\n  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;\n  [\"data-testid\"]?: string;\n}\n\n/** ExpansionToggle React component used by the [[TreeNode]] component to show collapsed or expanded state\n * @public\n */\nexport class ExpansionToggle extends React.PureComponent<ExpansionToggleProps> {\n  public override render() {\n    const className = classnames(\n      \"core-tree-expansionToggle\",\n      this.props.isExpanded && \"is-expanded\",\n      this.props.className);\n    const label = UiCore.translate(this.props.isExpanded ? \"tree.collapse\" : \"tree.expand\");\n\n    return (\n      // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n      <div\n        onClick={this.props.onClick}\n        className={className}\n        style={this.props.style}\n        data-testid={this.props[\"data-testid\"]}\n        role=\"button\"\n        tabIndex={-1}\n        aria-label={label}\n      >\n        <i className=\"toggle icon icon-chevron-right\" />\n      </div>\n    );\n  }\n}\n"]}

package/lib/cjs/core-react/tree/ExpansionToggle.scss

@@ -1,28 +1,28 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "../style/themecolors.scss";
-
-.core-tree-expansionToggle {
-  &:focus {
-    outline: none;
-  }
-
-  > .toggle {
-
-    display: block;
-    width: 24px;
-    height: 24px;
-    padding: 7px;
-    font-size: 12px;
-    box-sizing: border-box;
-    transform: rotate(0);
-    transition: transform 100ms ease;
-    color: $buic-foreground-body;
-  }
-
-  &.is-expanded > .toggle {
-    transform: rotate( 90deg );
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../style/themecolors.scss";
+
+.core-tree-expansionToggle {
+  &:focus {
+    outline: none;
+  }
+
+  > .toggle {
+
+    display: block;
+    width: 24px;
+    height: 24px;
+    padding: 7px;
+    font-size: 12px;
+    box-sizing: border-box;
+    transform: rotate(0);
+    transition: transform 100ms ease;
+    color: $buic-foreground-body;
+  }
+
+  &.is-expanded > .toggle {
+    transform: rotate( 90deg );
+  }
+}

package/lib/cjs/core-react/tree/Node.d.ts

@@ -1,80 +1,80 @@
-/** @packageDocumentation
- * @module Tree
- */
-import "./Node.scss";
-import * as React from "react";
-import { CheckboxProps } from "@itwin/itwinui-react";
-import { CheckBoxState } from "../enums/CheckBoxState";
-import { CommonProps } from "../utils/Props";
-import { Omit } from "../utils/typeUtils";
-/** Props for node Checkbox renderer
- * @public
- */
-export declare type NodeCheckboxRenderProps = Omit<CheckboxProps, "onChange" | "onClick"> & {
-    onChange: (checked: boolean) => void;
-    onClick: (e: React.MouseEvent) => void;
-};
-/** Type for node Checkbox renderer
- * @public
- */
-export declare type NodeCheckboxRenderer = (props: NodeCheckboxRenderProps) => React.ReactNode;
-/** Number of pixels the node gets offset per each hierarchy level
- * @internal
- */
-export declare const LEVEL_OFFSET = 20;
-/** Properties for Tree Node CheckBox
- * @public
- */
-export interface NodeCheckboxProps {
-    /** State of the checkbox */
-    state?: CheckBoxState;
-    /** Click event callback */
-    onClick?: (newState: CheckBoxState) => void;
-    /** Indicates whether checkbox is disabled */
-    isDisabled?: boolean;
-    /** Tooltip to be displayed when mouse is hovered over checkbox */
-    tooltip?: string;
-}
-/** Properties for the [[TreeNode]] React component
- * @public
- */
-export interface TreeNodeProps extends CommonProps {
-    label: React.ReactNode;
-    level: number;
-    icon?: React.ReactChild;
-    /** Properties for the checkbox.
-     * @public */
-    checkboxProps?: NodeCheckboxProps;
-    isLeaf?: boolean;
-    isLoading?: boolean;
-    isExpanded?: boolean;
-    isFocused?: boolean;
-    isSelected?: boolean;
-    isHoverDisabled?: boolean;
-    onClick?: (e: React.MouseEvent) => void;
-    onContextMenu?: (e: React.MouseEvent) => void;
-    onMouseMove?: (e: React.MouseEvent) => void;
-    onMouseDown?: (e: React.MouseEvent) => void;
-    onMouseUp?: (e: React.MouseEvent) => void;
-    onClickExpansionToggle?: () => void;
-    children?: React.ReactNode;
-    /** Contains render overrides for different pieces of the node component. */
-    renderOverrides?: {
-        /** Callback to render a checkbox. Only called when checkbox is displayed. */
-        renderCheckbox?: NodeCheckboxRenderer;
-    };
-    ["data-testid"]?: string;
-}
-/** Presentation React component for a Tree node
- * @public
- */
-export declare class TreeNode extends React.Component<TreeNodeProps> {
-    constructor(props: TreeNodeProps);
-    render(): JSX.Element;
-    private createSubComponentTestId;
-    private _onCheckboxChange;
-    private _onCheckboxClick;
-    private _onClickExpansionToggle;
-    private _onClick;
-}
+/** @packageDocumentation
+ * @module Tree
+ */
+import "./Node.scss";
+import * as React from "react";
+import { CheckboxProps } from "@itwin/itwinui-react";
+import { CheckBoxState } from "../enums/CheckBoxState";
+import { CommonProps } from "../utils/Props";
+import { Omit } from "../utils/typeUtils";
+/** Props for node Checkbox renderer
+ * @public
+ */
+export declare type NodeCheckboxRenderProps = Omit<CheckboxProps, "onChange" | "onClick"> & {
+    onChange: (checked: boolean) => void;
+    onClick: (e: React.MouseEvent) => void;
+};
+/** Type for node Checkbox renderer
+ * @public
+ */
+export declare type NodeCheckboxRenderer = (props: NodeCheckboxRenderProps) => React.ReactNode;
+/** Number of pixels the node gets offset per each hierarchy level
+ * @internal
+ */
+export declare const LEVEL_OFFSET = 20;
+/** Properties for Tree Node CheckBox
+ * @public
+ */
+export interface NodeCheckboxProps {
+    /** State of the checkbox */
+    state?: CheckBoxState;
+    /** Click event callback */
+    onClick?: (newState: CheckBoxState) => void;
+    /** Indicates whether checkbox is disabled */
+    isDisabled?: boolean;
+    /** Tooltip to be displayed when mouse is hovered over checkbox */
+    tooltip?: string;
+}
+/** Properties for the [[TreeNode]] React component
+ * @public
+ */
+export interface TreeNodeProps extends CommonProps {
+    label: React.ReactNode;
+    level: number;
+    icon?: React.ReactChild;
+    /** Properties for the checkbox.
+     * @public */
+    checkboxProps?: NodeCheckboxProps;
+    isLeaf?: boolean;
+    isLoading?: boolean;
+    isExpanded?: boolean;
+    isFocused?: boolean;
+    isSelected?: boolean;
+    isHoverDisabled?: boolean;
+    onClick?: (e: React.MouseEvent) => void;
+    onContextMenu?: (e: React.MouseEvent) => void;
+    onMouseMove?: (e: React.MouseEvent) => void;
+    onMouseDown?: (e: React.MouseEvent) => void;
+    onMouseUp?: (e: React.MouseEvent) => void;
+    onClickExpansionToggle?: () => void;
+    children?: React.ReactNode;
+    /** Contains render overrides for different pieces of the node component. */
+    renderOverrides?: {
+        /** Callback to render a checkbox. Only called when checkbox is displayed. */
+        renderCheckbox?: NodeCheckboxRenderer;
+    };
+    ["data-testid"]?: string;
+}
+/** Presentation React component for a Tree node
+ * @public
+ */
+export declare class TreeNode extends React.Component<TreeNodeProps> {
+    constructor(props: TreeNodeProps);
+    render(): JSX.Element;
+    private createSubComponentTestId;
+    private _onCheckboxChange;
+    private _onCheckboxClick;
+    private _onClickExpansionToggle;
+    private _onClick;
+}
 //# sourceMappingURL=Node.d.ts.map

package/lib/cjs/core-react/tree/Node.js

@@ -1,89 +1,89 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Tree
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TreeNode = exports.LEVEL_OFFSET = void 0;
-require("./Node.scss");
-const classnames_1 = require("classnames");
-const React = require("react");
-const itwinui_react_1 = require("@itwin/itwinui-react");
-const CheckBoxState_1 = require("../enums/CheckBoxState");
-const ExpansionToggle_1 = require("./ExpansionToggle");
-/** Number of pixels the node gets offset per each hierarchy level
- * @internal
- */
-exports.LEVEL_OFFSET = 20;
-const EXPANSION_TOGGLE_WIDTH = 24;
-/** Presentation React component for a Tree node
- * @public
- */
-class TreeNode extends React.Component {
-    constructor(props) {
-        super(props);
-        this._onCheckboxChange = (checked) => {
-            if (this.props.checkboxProps && this.props.checkboxProps.onClick && !this.props.checkboxProps.isDisabled)
-                this.props.checkboxProps.onClick(checked ? CheckBoxState_1.CheckBoxState.On : CheckBoxState_1.CheckBoxState.Off);
-        };
-        this._onCheckboxClick = (e) => {
-            e.stopPropagation();
-        };
-        this._onClickExpansionToggle = (e) => {
-            e.stopPropagation();
-            if (this.props.onClickExpansionToggle)
-                this.props.onClickExpansionToggle();
-        };
-        this._onClick = (e) => {
-            var _a, _b;
-            e.stopPropagation();
-            (_b = (_a = this.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-        };
-    }
-    render() {
-        const className = (0, classnames_1.default)("core-tree-node", this.props.isFocused && "is-focused", this.props.isSelected && "is-selected", this.props.isHoverDisabled && "is-hover-disabled", this.props.className);
-        let offset = this.props.level * exports.LEVEL_OFFSET;
-        if (!this.props.isLoading && this.props.isLeaf)
-            offset += EXPANSION_TOGGLE_WIDTH; // Add expansion toggle/loader width if they're not rendered
-        let checkbox;
-        if (this.props.checkboxProps) {
-            const props = {
-                label: "",
-                checked: this.props.checkboxProps.state === CheckBoxState_1.CheckBoxState.On,
-                indeterminate: this.props.checkboxProps.state === CheckBoxState_1.CheckBoxState.Partial,
-                disabled: this.props.checkboxProps.isDisabled,
-                title: this.props.checkboxProps.tooltip,
-                onClick: this._onCheckboxClick,
-                onChange: this._onCheckboxChange,
-            };
-            if (this.props.renderOverrides && this.props.renderOverrides.renderCheckbox) {
-                checkbox = this.props.renderOverrides.renderCheckbox(props);
-            }
-            else {
-                checkbox = (React.createElement(itwinui_react_1.Checkbox, { ...props, onChange: (e) => this._onCheckboxChange(e.target.checked), "data-testid": this.createSubComponentTestId("checkbox") }));
-            }
-        }
-        const icon = this.props.icon ? (React.createElement("div", { className: "core-tree-node-icon" }, this.props.icon)) : undefined;
-        const toggle = (this.props.isLoading || this.props.isLeaf) ? undefined : (React.createElement(ExpansionToggle_1.ExpansionToggle, { className: "expansion-toggle", "data-testid": this.createSubComponentTestId("expansion-toggle"), onClick: this._onClickExpansionToggle, isExpanded: this.props.isExpanded }));
-        return (
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-        React.createElement("div", { className: className, style: this.props.style, "data-testid": this.props["data-testid"], onClick: this._onClick, onContextMenu: this.props.onContextMenu, onMouseDown: this.props.onMouseDown, onMouseUp: this.props.onMouseUp, onMouseMove: this.props.onMouseMove, role: "treeitem", tabIndex: -1 },
-            React.createElement("div", { className: "contents", style: { marginLeft: offset }, "data-testid": this.createSubComponentTestId("contents") },
-                this.props.isLoading && React.createElement(itwinui_react_1.ProgressRadial, { size: "x-small", indeterminate: true }),
-                toggle,
-                checkbox,
-                icon,
-                this.props.label),
-            this.props.children));
-    }
-    createSubComponentTestId(subId) {
-        if (!this.props["data-testid"])
-            return undefined;
-        return `${this.props["data-testid"]}-${subId}`;
-    }
-}
-exports.TreeNode = TreeNode;
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Tree
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeNode = exports.LEVEL_OFFSET = void 0;
+require("./Node.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const CheckBoxState_1 = require("../enums/CheckBoxState");
+const ExpansionToggle_1 = require("./ExpansionToggle");
+/** Number of pixels the node gets offset per each hierarchy level
+ * @internal
+ */
+exports.LEVEL_OFFSET = 20;
+const EXPANSION_TOGGLE_WIDTH = 24;
+/** Presentation React component for a Tree node
+ * @public
+ */
+class TreeNode extends React.Component {
+    constructor(props) {
+        super(props);
+        this._onCheckboxChange = (checked) => {
+            if (this.props.checkboxProps && this.props.checkboxProps.onClick && !this.props.checkboxProps.isDisabled)
+                this.props.checkboxProps.onClick(checked ? CheckBoxState_1.CheckBoxState.On : CheckBoxState_1.CheckBoxState.Off);
+        };
+        this._onCheckboxClick = (e) => {
+            e.stopPropagation();
+        };
+        this._onClickExpansionToggle = (e) => {
+            e.stopPropagation();
+            if (this.props.onClickExpansionToggle)
+                this.props.onClickExpansionToggle();
+        };
+        this._onClick = (e) => {
+            var _a, _b;
+            e.stopPropagation();
+            (_b = (_a = this.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+        };
+    }
+    render() {
+        const className = (0, classnames_1.default)("core-tree-node", this.props.isFocused && "is-focused", this.props.isSelected && "is-selected", this.props.isHoverDisabled && "is-hover-disabled", this.props.className);
+        let offset = this.props.level * exports.LEVEL_OFFSET;
+        if (!this.props.isLoading && this.props.isLeaf)
+            offset += EXPANSION_TOGGLE_WIDTH; // Add expansion toggle/loader width if they're not rendered
+        let checkbox;
+        if (this.props.checkboxProps) {
+            const props = {
+                label: "",
+                checked: this.props.checkboxProps.state === CheckBoxState_1.CheckBoxState.On,
+                indeterminate: this.props.checkboxProps.state === CheckBoxState_1.CheckBoxState.Partial,
+                disabled: this.props.checkboxProps.isDisabled,
+                title: this.props.checkboxProps.tooltip,
+                onClick: this._onCheckboxClick,
+                onChange: this._onCheckboxChange,
+            };
+            if (this.props.renderOverrides && this.props.renderOverrides.renderCheckbox) {
+                checkbox = this.props.renderOverrides.renderCheckbox(props);
+            }
+            else {
+                checkbox = (React.createElement(itwinui_react_1.Checkbox, { ...props, onChange: (e) => this._onCheckboxChange(e.target.checked), "data-testid": this.createSubComponentTestId("checkbox") }));
+            }
+        }
+        const icon = this.props.icon ? (React.createElement("div", { className: "core-tree-node-icon" }, this.props.icon)) : undefined;
+        const toggle = (this.props.isLoading || this.props.isLeaf) ? undefined : (React.createElement(ExpansionToggle_1.ExpansionToggle, { className: "expansion-toggle", "data-testid": this.createSubComponentTestId("expansion-toggle"), onClick: this._onClickExpansionToggle, isExpanded: this.props.isExpanded }));
+        return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+        React.createElement("div", { className: className, style: this.props.style, "data-testid": this.props["data-testid"], onClick: this._onClick, onContextMenu: this.props.onContextMenu, onMouseDown: this.props.onMouseDown, onMouseUp: this.props.onMouseUp, onMouseMove: this.props.onMouseMove, role: "treeitem", tabIndex: -1 },
+            React.createElement("div", { className: "contents", style: { marginLeft: offset }, "data-testid": this.createSubComponentTestId("contents") },
+                this.props.isLoading && React.createElement(itwinui_react_1.ProgressRadial, { size: "x-small", indeterminate: true }),
+                toggle,
+                checkbox,
+                icon,
+                this.props.label),
+            this.props.children));
+    }
+    createSubComponentTestId(subId) {
+        if (!this.props["data-testid"])
+            return undefined;
+        return `${this.props["data-testid"]}-${subId}`;
+    }
+}
+exports.TreeNode = TreeNode;
 //# sourceMappingURL=Node.js.map