@itwin/core-react 3.1.0-dev.40 → 3.1.0-dev.44

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,6 +1,13 @@
1
1
  # Change Log - @itwin/core-react
2
2
 
3
- This log was last generated on Mon, 24 Jan 2022 14:00:52 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 24 Feb 2022 15:26:55 GMT and should not be manually modified.
4
+
5
+ ## 3.0.1
6
+ Thu, 24 Feb 2022 15:26:55 GMT
7
+
8
+ ### Updates
9
+
10
+ - `TreeNode`: Fix checkbox propagating click events to the parent element, resulting in unexpected TreeNodeProps.onClick invocations.
4
11
 
5
12
  ## 3.0.0
6
13
  Mon, 24 Jan 2022 14:00:52 GMT
@@ -69,7 +69,6 @@ export interface TreeNodeProps extends CommonProps {
69
69
  * @public
70
70
  */
71
71
  export declare class TreeNode extends React.Component<TreeNodeProps> {
72
- private checkboxWrapperRef;
73
72
  constructor(props: TreeNodeProps);
74
73
  render(): JSX.Element;
75
74
  private createSubComponentTestId;
@@ -1 +1 @@
1
- {"version":3,"file":"Node.d.ts","sourceRoot":"","sources":["../../../../src/core-react/tree/Node.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAY,aAAa,EAAkB,MAAM,sBAAsB,CAAC;AAC/E,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C;;GAEG;AACH,oBAAY,uBAAuB,GAAG,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,SAAS,CAAC,GAAG;IAClF,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF;;GAEG;AACH,oBAAY,oBAAoB,GAAG,CAAC,KAAK,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC;AAEvF;;GAEG;AACH,eAAO,MAAM,YAAY,KAAK,CAAC;AAI/B;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,4BAA4B;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAC;IAC5C,6CAA6C;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kEAAkE;IAClE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,WAAW;IAChD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC;IACxB;iBACa;IACb,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC1C,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,4EAA4E;IAC5E,eAAe,CAAC,EAAE;QAChB,6EAA6E;QAC7E,cAAc,CAAC,EAAE,oBAAoB,CAAC;KACvC,CAAC;IACF,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,qBAAa,QAAS,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;IAC1D,OAAO,CAAC,kBAAkB,CAAqC;gBAEnD,KAAK,EAAE,aAAa;IAIhB,MAAM;IA8EtB,OAAO,CAAC,wBAAwB;IAMhC,OAAO,CAAC,iBAAiB,CAGvB;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,uBAAuB,CAI7B;IAEF,OAAO,CAAC,QAAQ,CAQd;CACH"}
1
+ {"version":3,"file":"Node.d.ts","sourceRoot":"","sources":["../../../../src/core-react/tree/Node.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAY,aAAa,EAAkB,MAAM,sBAAsB,CAAC;AAC/E,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C;;GAEG;AACH,oBAAY,uBAAuB,GAAG,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,SAAS,CAAC,GAAG;IAClF,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF;;GAEG;AACH,oBAAY,oBAAoB,GAAG,CAAC,KAAK,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC;AAEvF;;GAEG;AACH,eAAO,MAAM,YAAY,KAAK,CAAC;AAI/B;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,4BAA4B;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAC;IAC5C,6CAA6C;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kEAAkE;IAClE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,WAAW;IAChD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC;IACxB;iBACa;IACb,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC1C,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,4EAA4E;IAC5E,eAAe,CAAC,EAAE;QAChB,6EAA6E;QAC7E,cAAc,CAAC,EAAE,oBAAoB,CAAC;KACvC,CAAC;IACF,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,qBAAa,QAAS,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;gBAC9C,KAAK,EAAE,aAAa;IAIhB,MAAM;IA4EtB,OAAO,CAAC,wBAAwB;IAMhC,OAAO,CAAC,iBAAiB,CAGvB;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,uBAAuB,CAI7B;IAEF,OAAO,CAAC,QAAQ,CAGd;CACH"}
@@ -25,7 +25,6 @@ const EXPANSION_TOGGLE_WIDTH = 24;
25
25
  class TreeNode extends React.Component {
26
26
  constructor(props) {
27
27
  super(props);
28
- this.checkboxWrapperRef = React.createRef();
29
28
  this._onCheckboxChange = (checked) => {
30
29
  if (this.props.checkboxProps && this.props.checkboxProps.onClick && !this.props.checkboxProps.isDisabled)
31
30
  this.props.checkboxProps.onClick(checked ? CheckBoxState_1.CheckBoxState.On : CheckBoxState_1.CheckBoxState.Off);
@@ -41,11 +40,7 @@ class TreeNode extends React.Component {
41
40
  this._onClick = (e) => {
42
41
  var _a, _b;
43
42
  e.stopPropagation();
44
- // ITwinUI-react has a bug that prevents us from stopping checkbox click event propagation to the parent element
45
- if (!this.checkboxWrapperRef.current
46
- || (e.target instanceof Element && !isDescendant(this.checkboxWrapperRef.current, e.target))) {
47
- (_b = (_a = this.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
48
- }
43
+ (_b = (_a = this.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
49
44
  };
50
45
  }
51
46
  render() {
@@ -68,8 +63,7 @@ class TreeNode extends React.Component {
68
63
  checkbox = this.props.renderOverrides.renderCheckbox(props);
69
64
  }
70
65
  else {
71
- checkbox = (React.createElement("div", { ref: this.checkboxWrapperRef },
72
- React.createElement(itwinui_react_1.Checkbox, { ...props, onChange: (e) => this._onCheckboxChange(e.target.checked), "data-testid": this.createSubComponentTestId("checkbox") })));
66
+ checkbox = (React.createElement(itwinui_react_1.Checkbox, { ...props, onChange: (e) => this._onCheckboxChange(e.target.checked), "data-testid": this.createSubComponentTestId("checkbox") }));
73
67
  }
74
68
  }
75
69
  const icon = this.props.icon ? (React.createElement("div", { className: "core-tree-node-icon" }, this.props.icon)) : undefined;
@@ -92,13 +86,4 @@ class TreeNode extends React.Component {
92
86
  }
93
87
  }
94
88
  exports.TreeNode = TreeNode;
95
- function isDescendant(ancestor, descendant) {
96
- while (descendant.parentElement !== null) {
97
- if (descendant === ancestor) {
98
- return true;
99
- }
100
- descendant = descendant.parentElement;
101
- }
102
- return false;
103
- }
104
89
  //# sourceMappingURL=Node.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Node.js","sourceRoot":"","sources":["../../../../src/core-react/tree/Node.tsx"],"names":[],"mappings":"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","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 \"./Node.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Checkbox, CheckboxProps, ProgressRadial } from \"@itwin/itwinui-react\";\r\nimport { CheckBoxState } from \"../enums/CheckBoxState\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport { Omit } from \"../utils/typeUtils\";\r\nimport { ExpansionToggle } from \"./ExpansionToggle\";\r\n\r\n/** Props for node Checkbox renderer\r\n * @public\r\n */\r\nexport type NodeCheckboxRenderProps = Omit<CheckboxProps, \"onChange\" | \"onClick\"> & {\r\n onChange: (checked: boolean) => void;\r\n onClick: (e: React.MouseEvent) => void;\r\n};\r\n\r\n/** Type for node Checkbox renderer\r\n * @public\r\n */\r\nexport type NodeCheckboxRenderer = (props: NodeCheckboxRenderProps) => React.ReactNode;\r\n\r\n/** Number of pixels the node gets offset per each hierarchy level\r\n * @internal\r\n */\r\nexport const LEVEL_OFFSET = 20;\r\n\r\nconst EXPANSION_TOGGLE_WIDTH = 24;\r\n\r\n/** Properties for Tree Node CheckBox\r\n * @public\r\n */\r\nexport interface NodeCheckboxProps {\r\n /** State of the checkbox */\r\n state?: CheckBoxState;\r\n /** Click event callback */\r\n onClick?: (newState: CheckBoxState) => void;\r\n /** Indicates whether checkbox is disabled */\r\n isDisabled?: boolean;\r\n /** Tooltip to be displayed when mouse is hovered over checkbox */\r\n tooltip?: string;\r\n}\r\n\r\n/** Properties for the [[TreeNode]] React component\r\n * @public\r\n */\r\nexport interface TreeNodeProps extends CommonProps {\r\n label: React.ReactNode;\r\n level: number;\r\n icon?: React.ReactChild;\r\n /** Properties for the checkbox.\r\n * @public */\r\n checkboxProps?: NodeCheckboxProps;\r\n isLeaf?: boolean;\r\n isLoading?: boolean;\r\n isExpanded?: boolean;\r\n isFocused?: boolean;\r\n isSelected?: boolean;\r\n isHoverDisabled?: boolean;\r\n onClick?: (e: React.MouseEvent) => void;\r\n onContextMenu?: (e: React.MouseEvent) => void;\r\n onMouseMove?: (e: React.MouseEvent) => void;\r\n onMouseDown?: (e: React.MouseEvent) => void;\r\n onMouseUp?: (e: React.MouseEvent) => void;\r\n onClickExpansionToggle?: () => void;\r\n children?: React.ReactNode;\r\n\r\n /** Contains render overrides for different pieces of the node component. */\r\n renderOverrides?: {\r\n /** Callback to render a checkbox. Only called when checkbox is displayed. */\r\n renderCheckbox?: NodeCheckboxRenderer;\r\n };\r\n [\"data-testid\"]?: string;\r\n}\r\n\r\n/** Presentation React component for a Tree node\r\n * @public\r\n */\r\nexport class TreeNode extends React.Component<TreeNodeProps> {\r\n private checkboxWrapperRef = React.createRef<HTMLDivElement>();\r\n\r\n constructor(props: TreeNodeProps) {\r\n super(props);\r\n }\r\n\r\n public override render() {\r\n const className = classnames(\r\n \"core-tree-node\",\r\n this.props.isFocused && \"is-focused\",\r\n this.props.isSelected && \"is-selected\",\r\n this.props.isHoverDisabled && \"is-hover-disabled\",\r\n this.props.className);\r\n let offset = this.props.level * LEVEL_OFFSET;\r\n if (!this.props.isLoading && this.props.isLeaf)\r\n offset += EXPANSION_TOGGLE_WIDTH; // Add expansion toggle/loader width if they're not rendered\r\n\r\n let checkbox: React.ReactNode;\r\n if (this.props.checkboxProps) {\r\n const props: NodeCheckboxRenderProps = {\r\n label: \"\",\r\n checked: this.props.checkboxProps.state === CheckBoxState.On,\r\n indeterminate: this.props.checkboxProps.state === CheckBoxState.Partial,\r\n disabled: this.props.checkboxProps.isDisabled,\r\n title: this.props.checkboxProps.tooltip,\r\n onClick: this._onCheckboxClick,\r\n onChange: this._onCheckboxChange,\r\n };\r\n if (this.props.renderOverrides && this.props.renderOverrides.renderCheckbox) {\r\n checkbox = this.props.renderOverrides.renderCheckbox(props);\r\n } else {\r\n checkbox = (\r\n <div ref={this.checkboxWrapperRef}>\r\n <Checkbox\r\n {...props}\r\n onChange={(e: React.ChangeEvent<HTMLInputElement>) => this._onCheckboxChange(e.target.checked)}\r\n data-testid={this.createSubComponentTestId(\"checkbox\")}\r\n />\r\n </div>\r\n );\r\n }\r\n }\r\n\r\n const icon = this.props.icon ? (<div className=\"core-tree-node-icon\">{this.props.icon}</div>) : undefined;\r\n\r\n const toggle = (this.props.isLoading || this.props.isLeaf) ? undefined : (\r\n <ExpansionToggle\r\n className=\"expansion-toggle\"\r\n data-testid={this.createSubComponentTestId(\"expansion-toggle\")}\r\n onClick={this._onClickExpansionToggle}\r\n isExpanded={this.props.isExpanded}\r\n />\r\n );\r\n\r\n return (\r\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events\r\n <div\r\n className={className}\r\n style={this.props.style}\r\n data-testid={this.props[\"data-testid\"]}\r\n onClick={this._onClick}\r\n onContextMenu={this.props.onContextMenu}\r\n onMouseDown={this.props.onMouseDown}\r\n onMouseUp={this.props.onMouseUp}\r\n onMouseMove={this.props.onMouseMove}\r\n role=\"treeitem\"\r\n tabIndex={-1}\r\n >\r\n <div\r\n className=\"contents\"\r\n style={{ marginLeft: offset }}\r\n data-testid={this.createSubComponentTestId(\"contents\")}\r\n >\r\n {this.props.isLoading && <ProgressRadial size=\"x-small\" indeterminate />}\r\n {toggle}\r\n {checkbox}\r\n {icon}\r\n {this.props.label}\r\n </div>\r\n {this.props.children}\r\n </div>\r\n );\r\n }\r\n\r\n private createSubComponentTestId(subId: string): string | undefined {\r\n if (!this.props[\"data-testid\"])\r\n return undefined;\r\n return `${this.props[\"data-testid\"]}-${subId}`;\r\n }\r\n\r\n private _onCheckboxChange = (checked: boolean) => {\r\n if (this.props.checkboxProps && this.props.checkboxProps.onClick && !this.props.checkboxProps.isDisabled)\r\n this.props.checkboxProps.onClick(checked ? CheckBoxState.On : CheckBoxState.Off);\r\n };\r\n\r\n private _onCheckboxClick = (e: React.MouseEvent) => {\r\n e.stopPropagation();\r\n };\r\n\r\n private _onClickExpansionToggle = (e: React.MouseEvent<HTMLDivElement>) => {\r\n e.stopPropagation();\r\n if (this.props.onClickExpansionToggle)\r\n this.props.onClickExpansionToggle();\r\n };\r\n\r\n private _onClick = (e: React.MouseEvent<HTMLDivElement>) => {\r\n e.stopPropagation();\r\n\r\n // ITwinUI-react has a bug that prevents us from stopping checkbox click event propagation to the parent element\r\n if (!this.checkboxWrapperRef.current\r\n || (e.target instanceof Element && !isDescendant(this.checkboxWrapperRef.current, e.target))) {\r\n this.props.onClick?.(e);\r\n }\r\n };\r\n}\r\n\r\nfunction isDescendant(ancestor: Element, descendant: Element): boolean {\r\n while (descendant.parentElement !== null) {\r\n if (descendant === ancestor) {\r\n return true;\r\n }\r\n\r\n descendant = descendant.parentElement;\r\n }\r\n\r\n return false;\r\n}\r\n"]}
1
+ {"version":3,"file":"Node.js","sourceRoot":"","sources":["../../../../src/core-react/tree/Node.tsx"],"names":[],"mappings":"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","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 \"./Node.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Checkbox, CheckboxProps, ProgressRadial } from \"@itwin/itwinui-react\";\r\nimport { CheckBoxState } from \"../enums/CheckBoxState\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport { Omit } from \"../utils/typeUtils\";\r\nimport { ExpansionToggle } from \"./ExpansionToggle\";\r\n\r\n/** Props for node Checkbox renderer\r\n * @public\r\n */\r\nexport type NodeCheckboxRenderProps = Omit<CheckboxProps, \"onChange\" | \"onClick\"> & {\r\n onChange: (checked: boolean) => void;\r\n onClick: (e: React.MouseEvent) => void;\r\n};\r\n\r\n/** Type for node Checkbox renderer\r\n * @public\r\n */\r\nexport type NodeCheckboxRenderer = (props: NodeCheckboxRenderProps) => React.ReactNode;\r\n\r\n/** Number of pixels the node gets offset per each hierarchy level\r\n * @internal\r\n */\r\nexport const LEVEL_OFFSET = 20;\r\n\r\nconst EXPANSION_TOGGLE_WIDTH = 24;\r\n\r\n/** Properties for Tree Node CheckBox\r\n * @public\r\n */\r\nexport interface NodeCheckboxProps {\r\n /** State of the checkbox */\r\n state?: CheckBoxState;\r\n /** Click event callback */\r\n onClick?: (newState: CheckBoxState) => void;\r\n /** Indicates whether checkbox is disabled */\r\n isDisabled?: boolean;\r\n /** Tooltip to be displayed when mouse is hovered over checkbox */\r\n tooltip?: string;\r\n}\r\n\r\n/** Properties for the [[TreeNode]] React component\r\n * @public\r\n */\r\nexport interface TreeNodeProps extends CommonProps {\r\n label: React.ReactNode;\r\n level: number;\r\n icon?: React.ReactChild;\r\n /** Properties for the checkbox.\r\n * @public */\r\n checkboxProps?: NodeCheckboxProps;\r\n isLeaf?: boolean;\r\n isLoading?: boolean;\r\n isExpanded?: boolean;\r\n isFocused?: boolean;\r\n isSelected?: boolean;\r\n isHoverDisabled?: boolean;\r\n onClick?: (e: React.MouseEvent) => void;\r\n onContextMenu?: (e: React.MouseEvent) => void;\r\n onMouseMove?: (e: React.MouseEvent) => void;\r\n onMouseDown?: (e: React.MouseEvent) => void;\r\n onMouseUp?: (e: React.MouseEvent) => void;\r\n onClickExpansionToggle?: () => void;\r\n children?: React.ReactNode;\r\n\r\n /** Contains render overrides for different pieces of the node component. */\r\n renderOverrides?: {\r\n /** Callback to render a checkbox. Only called when checkbox is displayed. */\r\n renderCheckbox?: NodeCheckboxRenderer;\r\n };\r\n [\"data-testid\"]?: string;\r\n}\r\n\r\n/** Presentation React component for a Tree node\r\n * @public\r\n */\r\nexport class TreeNode extends React.Component<TreeNodeProps> {\r\n constructor(props: TreeNodeProps) {\r\n super(props);\r\n }\r\n\r\n public override render() {\r\n const className = classnames(\r\n \"core-tree-node\",\r\n this.props.isFocused && \"is-focused\",\r\n this.props.isSelected && \"is-selected\",\r\n this.props.isHoverDisabled && \"is-hover-disabled\",\r\n this.props.className);\r\n let offset = this.props.level * LEVEL_OFFSET;\r\n if (!this.props.isLoading && this.props.isLeaf)\r\n offset += EXPANSION_TOGGLE_WIDTH; // Add expansion toggle/loader width if they're not rendered\r\n\r\n let checkbox: React.ReactNode;\r\n if (this.props.checkboxProps) {\r\n const props: NodeCheckboxRenderProps = {\r\n label: \"\",\r\n checked: this.props.checkboxProps.state === CheckBoxState.On,\r\n indeterminate: this.props.checkboxProps.state === CheckBoxState.Partial,\r\n disabled: this.props.checkboxProps.isDisabled,\r\n title: this.props.checkboxProps.tooltip,\r\n onClick: this._onCheckboxClick,\r\n onChange: this._onCheckboxChange,\r\n };\r\n if (this.props.renderOverrides && this.props.renderOverrides.renderCheckbox) {\r\n checkbox = this.props.renderOverrides.renderCheckbox(props);\r\n } else {\r\n checkbox = (\r\n <Checkbox\r\n {...props}\r\n onChange={(e: React.ChangeEvent<HTMLInputElement>) => this._onCheckboxChange(e.target.checked)}\r\n data-testid={this.createSubComponentTestId(\"checkbox\")}\r\n />\r\n );\r\n }\r\n }\r\n\r\n const icon = this.props.icon ? (<div className=\"core-tree-node-icon\">{this.props.icon}</div>) : undefined;\r\n\r\n const toggle = (this.props.isLoading || this.props.isLeaf) ? undefined : (\r\n <ExpansionToggle\r\n className=\"expansion-toggle\"\r\n data-testid={this.createSubComponentTestId(\"expansion-toggle\")}\r\n onClick={this._onClickExpansionToggle}\r\n isExpanded={this.props.isExpanded}\r\n />\r\n );\r\n\r\n return (\r\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events\r\n <div\r\n className={className}\r\n style={this.props.style}\r\n data-testid={this.props[\"data-testid\"]}\r\n onClick={this._onClick}\r\n onContextMenu={this.props.onContextMenu}\r\n onMouseDown={this.props.onMouseDown}\r\n onMouseUp={this.props.onMouseUp}\r\n onMouseMove={this.props.onMouseMove}\r\n role=\"treeitem\"\r\n tabIndex={-1}\r\n >\r\n <div\r\n className=\"contents\"\r\n style={{ marginLeft: offset }}\r\n data-testid={this.createSubComponentTestId(\"contents\")}\r\n >\r\n {this.props.isLoading && <ProgressRadial size=\"x-small\" indeterminate />}\r\n {toggle}\r\n {checkbox}\r\n {icon}\r\n {this.props.label}\r\n </div>\r\n {this.props.children}\r\n </div>\r\n );\r\n }\r\n\r\n private createSubComponentTestId(subId: string): string | undefined {\r\n if (!this.props[\"data-testid\"])\r\n return undefined;\r\n return `${this.props[\"data-testid\"]}-${subId}`;\r\n }\r\n\r\n private _onCheckboxChange = (checked: boolean) => {\r\n if (this.props.checkboxProps && this.props.checkboxProps.onClick && !this.props.checkboxProps.isDisabled)\r\n this.props.checkboxProps.onClick(checked ? CheckBoxState.On : CheckBoxState.Off);\r\n };\r\n\r\n private _onCheckboxClick = (e: React.MouseEvent) => {\r\n e.stopPropagation();\r\n };\r\n\r\n private _onClickExpansionToggle = (e: React.MouseEvent<HTMLDivElement>) => {\r\n e.stopPropagation();\r\n if (this.props.onClickExpansionToggle)\r\n this.props.onClickExpansionToggle();\r\n };\r\n\r\n private _onClick = (e: React.MouseEvent<HTMLDivElement>) => {\r\n e.stopPropagation();\r\n this.props.onClick?.(e);\r\n };\r\n}\r\n"]}
@@ -69,7 +69,6 @@ export interface TreeNodeProps extends CommonProps {
69
69
  * @public
70
70
  */
71
71
  export declare class TreeNode extends React.Component<TreeNodeProps> {
72
- private checkboxWrapperRef;
73
72
  constructor(props: TreeNodeProps);
74
73
  render(): JSX.Element;
75
74
  private createSubComponentTestId;
@@ -1 +1 @@
1
- {"version":3,"file":"Node.d.ts","sourceRoot":"","sources":["../../../../src/core-react/tree/Node.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAY,aAAa,EAAkB,MAAM,sBAAsB,CAAC;AAC/E,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C;;GAEG;AACH,oBAAY,uBAAuB,GAAG,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,SAAS,CAAC,GAAG;IAClF,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF;;GAEG;AACH,oBAAY,oBAAoB,GAAG,CAAC,KAAK,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC;AAEvF;;GAEG;AACH,eAAO,MAAM,YAAY,KAAK,CAAC;AAI/B;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,4BAA4B;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAC;IAC5C,6CAA6C;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kEAAkE;IAClE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,WAAW;IAChD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC;IACxB;iBACa;IACb,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC1C,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,4EAA4E;IAC5E,eAAe,CAAC,EAAE;QAChB,6EAA6E;QAC7E,cAAc,CAAC,EAAE,oBAAoB,CAAC;KACvC,CAAC;IACF,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,qBAAa,QAAS,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;IAC1D,OAAO,CAAC,kBAAkB,CAAqC;gBAEnD,KAAK,EAAE,aAAa;IAIhB,MAAM;IA8EtB,OAAO,CAAC,wBAAwB;IAMhC,OAAO,CAAC,iBAAiB,CAGvB;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,uBAAuB,CAI7B;IAEF,OAAO,CAAC,QAAQ,CAQd;CACH"}
1
+ {"version":3,"file":"Node.d.ts","sourceRoot":"","sources":["../../../../src/core-react/tree/Node.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAY,aAAa,EAAkB,MAAM,sBAAsB,CAAC;AAC/E,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C;;GAEG;AACH,oBAAY,uBAAuB,GAAG,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,SAAS,CAAC,GAAG;IAClF,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF;;GAEG;AACH,oBAAY,oBAAoB,GAAG,CAAC,KAAK,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC;AAEvF;;GAEG;AACH,eAAO,MAAM,YAAY,KAAK,CAAC;AAI/B;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,4BAA4B;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAC;IAC5C,6CAA6C;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kEAAkE;IAClE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,WAAW;IAChD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC;IACxB;iBACa;IACb,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC1C,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,4EAA4E;IAC5E,eAAe,CAAC,EAAE;QAChB,6EAA6E;QAC7E,cAAc,CAAC,EAAE,oBAAoB,CAAC;KACvC,CAAC;IACF,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,qBAAa,QAAS,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;gBAC9C,KAAK,EAAE,aAAa;IAIhB,MAAM;IA4EtB,OAAO,CAAC,wBAAwB;IAMhC,OAAO,CAAC,iBAAiB,CAGvB;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,uBAAuB,CAI7B;IAEF,OAAO,CAAC,QAAQ,CAGd;CACH"}
@@ -22,7 +22,6 @@ const EXPANSION_TOGGLE_WIDTH = 24;
22
22
  export class TreeNode extends React.Component {
23
23
  constructor(props) {
24
24
  super(props);
25
- this.checkboxWrapperRef = React.createRef();
26
25
  this._onCheckboxChange = (checked) => {
27
26
  if (this.props.checkboxProps && this.props.checkboxProps.onClick && !this.props.checkboxProps.isDisabled)
28
27
  this.props.checkboxProps.onClick(checked ? CheckBoxState.On : CheckBoxState.Off);
@@ -38,11 +37,7 @@ export class TreeNode extends React.Component {
38
37
  this._onClick = (e) => {
39
38
  var _a, _b;
40
39
  e.stopPropagation();
41
- // ITwinUI-react has a bug that prevents us from stopping checkbox click event propagation to the parent element
42
- if (!this.checkboxWrapperRef.current
43
- || (e.target instanceof Element && !isDescendant(this.checkboxWrapperRef.current, e.target))) {
44
- (_b = (_a = this.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
45
- }
40
+ (_b = (_a = this.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
46
41
  };
47
42
  }
48
43
  render() {
@@ -65,8 +60,7 @@ export class TreeNode extends React.Component {
65
60
  checkbox = this.props.renderOverrides.renderCheckbox(props);
66
61
  }
67
62
  else {
68
- checkbox = (React.createElement("div", { ref: this.checkboxWrapperRef },
69
- React.createElement(Checkbox, { ...props, onChange: (e) => this._onCheckboxChange(e.target.checked), "data-testid": this.createSubComponentTestId("checkbox") })));
63
+ checkbox = (React.createElement(Checkbox, { ...props, onChange: (e) => this._onCheckboxChange(e.target.checked), "data-testid": this.createSubComponentTestId("checkbox") }));
70
64
  }
71
65
  }
72
66
  const icon = this.props.icon ? (React.createElement("div", { className: "core-tree-node-icon" }, this.props.icon)) : undefined;
@@ -88,13 +82,4 @@ export class TreeNode extends React.Component {
88
82
  return `${this.props["data-testid"]}-${subId}`;
89
83
  }
90
84
  }
91
- function isDescendant(ancestor, descendant) {
92
- while (descendant.parentElement !== null) {
93
- if (descendant === ancestor) {
94
- return true;
95
- }
96
- descendant = descendant.parentElement;
97
- }
98
- return false;
99
- }
100
85
  //# sourceMappingURL=Node.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Node.js","sourceRoot":"","sources":["../../../../src/core-react/tree/Node.tsx"],"names":[],"mappings":"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","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 \"./Node.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Checkbox, CheckboxProps, ProgressRadial } from \"@itwin/itwinui-react\";\r\nimport { CheckBoxState } from \"../enums/CheckBoxState\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport { Omit } from \"../utils/typeUtils\";\r\nimport { ExpansionToggle } from \"./ExpansionToggle\";\r\n\r\n/** Props for node Checkbox renderer\r\n * @public\r\n */\r\nexport type NodeCheckboxRenderProps = Omit<CheckboxProps, \"onChange\" | \"onClick\"> & {\r\n onChange: (checked: boolean) => void;\r\n onClick: (e: React.MouseEvent) => void;\r\n};\r\n\r\n/** Type for node Checkbox renderer\r\n * @public\r\n */\r\nexport type NodeCheckboxRenderer = (props: NodeCheckboxRenderProps) => React.ReactNode;\r\n\r\n/** Number of pixels the node gets offset per each hierarchy level\r\n * @internal\r\n */\r\nexport const LEVEL_OFFSET = 20;\r\n\r\nconst EXPANSION_TOGGLE_WIDTH = 24;\r\n\r\n/** Properties for Tree Node CheckBox\r\n * @public\r\n */\r\nexport interface NodeCheckboxProps {\r\n /** State of the checkbox */\r\n state?: CheckBoxState;\r\n /** Click event callback */\r\n onClick?: (newState: CheckBoxState) => void;\r\n /** Indicates whether checkbox is disabled */\r\n isDisabled?: boolean;\r\n /** Tooltip to be displayed when mouse is hovered over checkbox */\r\n tooltip?: string;\r\n}\r\n\r\n/** Properties for the [[TreeNode]] React component\r\n * @public\r\n */\r\nexport interface TreeNodeProps extends CommonProps {\r\n label: React.ReactNode;\r\n level: number;\r\n icon?: React.ReactChild;\r\n /** Properties for the checkbox.\r\n * @public */\r\n checkboxProps?: NodeCheckboxProps;\r\n isLeaf?: boolean;\r\n isLoading?: boolean;\r\n isExpanded?: boolean;\r\n isFocused?: boolean;\r\n isSelected?: boolean;\r\n isHoverDisabled?: boolean;\r\n onClick?: (e: React.MouseEvent) => void;\r\n onContextMenu?: (e: React.MouseEvent) => void;\r\n onMouseMove?: (e: React.MouseEvent) => void;\r\n onMouseDown?: (e: React.MouseEvent) => void;\r\n onMouseUp?: (e: React.MouseEvent) => void;\r\n onClickExpansionToggle?: () => void;\r\n children?: React.ReactNode;\r\n\r\n /** Contains render overrides for different pieces of the node component. */\r\n renderOverrides?: {\r\n /** Callback to render a checkbox. Only called when checkbox is displayed. */\r\n renderCheckbox?: NodeCheckboxRenderer;\r\n };\r\n [\"data-testid\"]?: string;\r\n}\r\n\r\n/** Presentation React component for a Tree node\r\n * @public\r\n */\r\nexport class TreeNode extends React.Component<TreeNodeProps> {\r\n private checkboxWrapperRef = React.createRef<HTMLDivElement>();\r\n\r\n constructor(props: TreeNodeProps) {\r\n super(props);\r\n }\r\n\r\n public override render() {\r\n const className = classnames(\r\n \"core-tree-node\",\r\n this.props.isFocused && \"is-focused\",\r\n this.props.isSelected && \"is-selected\",\r\n this.props.isHoverDisabled && \"is-hover-disabled\",\r\n this.props.className);\r\n let offset = this.props.level * LEVEL_OFFSET;\r\n if (!this.props.isLoading && this.props.isLeaf)\r\n offset += EXPANSION_TOGGLE_WIDTH; // Add expansion toggle/loader width if they're not rendered\r\n\r\n let checkbox: React.ReactNode;\r\n if (this.props.checkboxProps) {\r\n const props: NodeCheckboxRenderProps = {\r\n label: \"\",\r\n checked: this.props.checkboxProps.state === CheckBoxState.On,\r\n indeterminate: this.props.checkboxProps.state === CheckBoxState.Partial,\r\n disabled: this.props.checkboxProps.isDisabled,\r\n title: this.props.checkboxProps.tooltip,\r\n onClick: this._onCheckboxClick,\r\n onChange: this._onCheckboxChange,\r\n };\r\n if (this.props.renderOverrides && this.props.renderOverrides.renderCheckbox) {\r\n checkbox = this.props.renderOverrides.renderCheckbox(props);\r\n } else {\r\n checkbox = (\r\n <div ref={this.checkboxWrapperRef}>\r\n <Checkbox\r\n {...props}\r\n onChange={(e: React.ChangeEvent<HTMLInputElement>) => this._onCheckboxChange(e.target.checked)}\r\n data-testid={this.createSubComponentTestId(\"checkbox\")}\r\n />\r\n </div>\r\n );\r\n }\r\n }\r\n\r\n const icon = this.props.icon ? (<div className=\"core-tree-node-icon\">{this.props.icon}</div>) : undefined;\r\n\r\n const toggle = (this.props.isLoading || this.props.isLeaf) ? undefined : (\r\n <ExpansionToggle\r\n className=\"expansion-toggle\"\r\n data-testid={this.createSubComponentTestId(\"expansion-toggle\")}\r\n onClick={this._onClickExpansionToggle}\r\n isExpanded={this.props.isExpanded}\r\n />\r\n );\r\n\r\n return (\r\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events\r\n <div\r\n className={className}\r\n style={this.props.style}\r\n data-testid={this.props[\"data-testid\"]}\r\n onClick={this._onClick}\r\n onContextMenu={this.props.onContextMenu}\r\n onMouseDown={this.props.onMouseDown}\r\n onMouseUp={this.props.onMouseUp}\r\n onMouseMove={this.props.onMouseMove}\r\n role=\"treeitem\"\r\n tabIndex={-1}\r\n >\r\n <div\r\n className=\"contents\"\r\n style={{ marginLeft: offset }}\r\n data-testid={this.createSubComponentTestId(\"contents\")}\r\n >\r\n {this.props.isLoading && <ProgressRadial size=\"x-small\" indeterminate />}\r\n {toggle}\r\n {checkbox}\r\n {icon}\r\n {this.props.label}\r\n </div>\r\n {this.props.children}\r\n </div>\r\n );\r\n }\r\n\r\n private createSubComponentTestId(subId: string): string | undefined {\r\n if (!this.props[\"data-testid\"])\r\n return undefined;\r\n return `${this.props[\"data-testid\"]}-${subId}`;\r\n }\r\n\r\n private _onCheckboxChange = (checked: boolean) => {\r\n if (this.props.checkboxProps && this.props.checkboxProps.onClick && !this.props.checkboxProps.isDisabled)\r\n this.props.checkboxProps.onClick(checked ? CheckBoxState.On : CheckBoxState.Off);\r\n };\r\n\r\n private _onCheckboxClick = (e: React.MouseEvent) => {\r\n e.stopPropagation();\r\n };\r\n\r\n private _onClickExpansionToggle = (e: React.MouseEvent<HTMLDivElement>) => {\r\n e.stopPropagation();\r\n if (this.props.onClickExpansionToggle)\r\n this.props.onClickExpansionToggle();\r\n };\r\n\r\n private _onClick = (e: React.MouseEvent<HTMLDivElement>) => {\r\n e.stopPropagation();\r\n\r\n // ITwinUI-react has a bug that prevents us from stopping checkbox click event propagation to the parent element\r\n if (!this.checkboxWrapperRef.current\r\n || (e.target instanceof Element && !isDescendant(this.checkboxWrapperRef.current, e.target))) {\r\n this.props.onClick?.(e);\r\n }\r\n };\r\n}\r\n\r\nfunction isDescendant(ancestor: Element, descendant: Element): boolean {\r\n while (descendant.parentElement !== null) {\r\n if (descendant === ancestor) {\r\n return true;\r\n }\r\n\r\n descendant = descendant.parentElement;\r\n }\r\n\r\n return false;\r\n}\r\n"]}
1
+ {"version":3,"file":"Node.js","sourceRoot":"","sources":["../../../../src/core-react/tree/Node.tsx"],"names":[],"mappings":"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","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 \"./Node.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Checkbox, CheckboxProps, ProgressRadial } from \"@itwin/itwinui-react\";\r\nimport { CheckBoxState } from \"../enums/CheckBoxState\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport { Omit } from \"../utils/typeUtils\";\r\nimport { ExpansionToggle } from \"./ExpansionToggle\";\r\n\r\n/** Props for node Checkbox renderer\r\n * @public\r\n */\r\nexport type NodeCheckboxRenderProps = Omit<CheckboxProps, \"onChange\" | \"onClick\"> & {\r\n onChange: (checked: boolean) => void;\r\n onClick: (e: React.MouseEvent) => void;\r\n};\r\n\r\n/** Type for node Checkbox renderer\r\n * @public\r\n */\r\nexport type NodeCheckboxRenderer = (props: NodeCheckboxRenderProps) => React.ReactNode;\r\n\r\n/** Number of pixels the node gets offset per each hierarchy level\r\n * @internal\r\n */\r\nexport const LEVEL_OFFSET = 20;\r\n\r\nconst EXPANSION_TOGGLE_WIDTH = 24;\r\n\r\n/** Properties for Tree Node CheckBox\r\n * @public\r\n */\r\nexport interface NodeCheckboxProps {\r\n /** State of the checkbox */\r\n state?: CheckBoxState;\r\n /** Click event callback */\r\n onClick?: (newState: CheckBoxState) => void;\r\n /** Indicates whether checkbox is disabled */\r\n isDisabled?: boolean;\r\n /** Tooltip to be displayed when mouse is hovered over checkbox */\r\n tooltip?: string;\r\n}\r\n\r\n/** Properties for the [[TreeNode]] React component\r\n * @public\r\n */\r\nexport interface TreeNodeProps extends CommonProps {\r\n label: React.ReactNode;\r\n level: number;\r\n icon?: React.ReactChild;\r\n /** Properties for the checkbox.\r\n * @public */\r\n checkboxProps?: NodeCheckboxProps;\r\n isLeaf?: boolean;\r\n isLoading?: boolean;\r\n isExpanded?: boolean;\r\n isFocused?: boolean;\r\n isSelected?: boolean;\r\n isHoverDisabled?: boolean;\r\n onClick?: (e: React.MouseEvent) => void;\r\n onContextMenu?: (e: React.MouseEvent) => void;\r\n onMouseMove?: (e: React.MouseEvent) => void;\r\n onMouseDown?: (e: React.MouseEvent) => void;\r\n onMouseUp?: (e: React.MouseEvent) => void;\r\n onClickExpansionToggle?: () => void;\r\n children?: React.ReactNode;\r\n\r\n /** Contains render overrides for different pieces of the node component. */\r\n renderOverrides?: {\r\n /** Callback to render a checkbox. Only called when checkbox is displayed. */\r\n renderCheckbox?: NodeCheckboxRenderer;\r\n };\r\n [\"data-testid\"]?: string;\r\n}\r\n\r\n/** Presentation React component for a Tree node\r\n * @public\r\n */\r\nexport class TreeNode extends React.Component<TreeNodeProps> {\r\n constructor(props: TreeNodeProps) {\r\n super(props);\r\n }\r\n\r\n public override render() {\r\n const className = classnames(\r\n \"core-tree-node\",\r\n this.props.isFocused && \"is-focused\",\r\n this.props.isSelected && \"is-selected\",\r\n this.props.isHoverDisabled && \"is-hover-disabled\",\r\n this.props.className);\r\n let offset = this.props.level * LEVEL_OFFSET;\r\n if (!this.props.isLoading && this.props.isLeaf)\r\n offset += EXPANSION_TOGGLE_WIDTH; // Add expansion toggle/loader width if they're not rendered\r\n\r\n let checkbox: React.ReactNode;\r\n if (this.props.checkboxProps) {\r\n const props: NodeCheckboxRenderProps = {\r\n label: \"\",\r\n checked: this.props.checkboxProps.state === CheckBoxState.On,\r\n indeterminate: this.props.checkboxProps.state === CheckBoxState.Partial,\r\n disabled: this.props.checkboxProps.isDisabled,\r\n title: this.props.checkboxProps.tooltip,\r\n onClick: this._onCheckboxClick,\r\n onChange: this._onCheckboxChange,\r\n };\r\n if (this.props.renderOverrides && this.props.renderOverrides.renderCheckbox) {\r\n checkbox = this.props.renderOverrides.renderCheckbox(props);\r\n } else {\r\n checkbox = (\r\n <Checkbox\r\n {...props}\r\n onChange={(e: React.ChangeEvent<HTMLInputElement>) => this._onCheckboxChange(e.target.checked)}\r\n data-testid={this.createSubComponentTestId(\"checkbox\")}\r\n />\r\n );\r\n }\r\n }\r\n\r\n const icon = this.props.icon ? (<div className=\"core-tree-node-icon\">{this.props.icon}</div>) : undefined;\r\n\r\n const toggle = (this.props.isLoading || this.props.isLeaf) ? undefined : (\r\n <ExpansionToggle\r\n className=\"expansion-toggle\"\r\n data-testid={this.createSubComponentTestId(\"expansion-toggle\")}\r\n onClick={this._onClickExpansionToggle}\r\n isExpanded={this.props.isExpanded}\r\n />\r\n );\r\n\r\n return (\r\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events\r\n <div\r\n className={className}\r\n style={this.props.style}\r\n data-testid={this.props[\"data-testid\"]}\r\n onClick={this._onClick}\r\n onContextMenu={this.props.onContextMenu}\r\n onMouseDown={this.props.onMouseDown}\r\n onMouseUp={this.props.onMouseUp}\r\n onMouseMove={this.props.onMouseMove}\r\n role=\"treeitem\"\r\n tabIndex={-1}\r\n >\r\n <div\r\n className=\"contents\"\r\n style={{ marginLeft: offset }}\r\n data-testid={this.createSubComponentTestId(\"contents\")}\r\n >\r\n {this.props.isLoading && <ProgressRadial size=\"x-small\" indeterminate />}\r\n {toggle}\r\n {checkbox}\r\n {icon}\r\n {this.props.label}\r\n </div>\r\n {this.props.children}\r\n </div>\r\n );\r\n }\r\n\r\n private createSubComponentTestId(subId: string): string | undefined {\r\n if (!this.props[\"data-testid\"])\r\n return undefined;\r\n return `${this.props[\"data-testid\"]}-${subId}`;\r\n }\r\n\r\n private _onCheckboxChange = (checked: boolean) => {\r\n if (this.props.checkboxProps && this.props.checkboxProps.onClick && !this.props.checkboxProps.isDisabled)\r\n this.props.checkboxProps.onClick(checked ? CheckBoxState.On : CheckBoxState.Off);\r\n };\r\n\r\n private _onCheckboxClick = (e: React.MouseEvent) => {\r\n e.stopPropagation();\r\n };\r\n\r\n private _onClickExpansionToggle = (e: React.MouseEvent<HTMLDivElement>) => {\r\n e.stopPropagation();\r\n if (this.props.onClickExpansionToggle)\r\n this.props.onClickExpansionToggle();\r\n };\r\n\r\n private _onClick = (e: React.MouseEvent<HTMLDivElement>) => {\r\n e.stopPropagation();\r\n this.props.onClick?.(e);\r\n };\r\n}\r\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itwin/core-react",
3
- "version": "3.1.0-dev.40",
3
+ "version": "3.1.0-dev.44",
4
4
  "description": "iTwin.js UI core components",
5
5
  "main": "lib/cjs/core-react.js",
6
6
  "module": "lib/esm/core-react.js",
@@ -23,8 +23,8 @@
23
23
  "url": "http://www.bentley.com"
24
24
  },
25
25
  "peerDependencies": {
26
- "@itwin/appui-abstract": "^3.1.0-dev.40",
27
- "@itwin/core-bentley": "^3.1.0-dev.40",
26
+ "@itwin/appui-abstract": "^3.1.0-dev.44",
27
+ "@itwin/core-bentley": "^3.1.0-dev.44",
28
28
  "react": "^17.0.0",
29
29
  "react-dom": "^17.0.0"
30
30
  },
@@ -33,12 +33,12 @@
33
33
  "NOTE: All tools used by scripts in this package must be listed as devDependencies"
34
34
  ],
35
35
  "devDependencies": {
36
- "@itwin/appui-abstract": "3.1.0-dev.40",
37
- "@itwin/build-tools": "3.1.0-dev.40",
38
- "@itwin/core-bentley": "3.1.0-dev.40",
39
- "@itwin/core-common": "3.1.0-dev.40",
40
- "@itwin/core-i18n": "3.1.0-dev.40",
41
- "@itwin/eslint-plugin": "3.1.0-dev.40",
36
+ "@itwin/appui-abstract": "3.1.0-dev.44",
37
+ "@itwin/build-tools": "3.1.0-dev.44",
38
+ "@itwin/core-bentley": "3.1.0-dev.44",
39
+ "@itwin/core-common": "3.1.0-dev.44",
40
+ "@itwin/core-i18n": "3.1.0-dev.44",
41
+ "@itwin/eslint-plugin": "3.1.0-dev.44",
42
42
  "@testing-library/react": "^12.0.0",
43
43
  "@testing-library/react-hooks": "^7.0.2",
44
44
  "@testing-library/user-event": "^13.2.1",