@itwin/itwinui-react 1.32.0-dev.0 → 1.33.1

package/cjs/core/Menu/Menu.js

@@ -43,6 +43,9 @@ exports.Menu = react_1.default.forwardRef(function (props, ref) {
     var _c = react_1.default.useState(), focusedIndex = _c[0], setFocusedIndex = _c[1];
     var menuRef = react_1.default.useRef(null);
     var refs = (0, utils_1.useMergedRefs)(menuRef, ref);
+    react_1.default.useEffect(function () {
+        setFocusedIndex(null);
+    }, [children]);
     react_1.default.useEffect(function () {
         var _a;
         var items = (0, utils_1.getFocusableElements)(menuRef.current);
@@ -55,9 +58,6 @@ exports.Menu = react_1.default.forwardRef(function (props, ref) {
             setFocusedIndex(selectedIndex > -1 ? selectedIndex : 0);
         }
     }, [setFocus, focusedIndex]);
-    react_1.default.useEffect(function () {
-        setFocusedIndex(null);
-    }, [children]);
     var onKeyDown = function (event) {
         var items = (0, utils_1.getFocusableElements)(menuRef.current);
         if (!(items === null || items === void 0 ? void 0 : items.length)) {

package/cjs/core/Radio/Radio.d.ts

@@ -11,10 +11,16 @@ export declare type RadioProps = {
     status?: 'positive' | 'warning' | 'negative';
     /**
      * Custom CSS class name for the checkmark element.
+     *
+     * @deprecated As of 1.32.0, this is applied on the actual radio `<input>` element.
+     * The checkmark has been moved into a pseudo-element.
      */
     checkmarkClassName?: string;
     /**
      * Custom CSS Style for the checkmark element.
+     *
+     * @deprecated As of 1.32.0, this is applied on the actual radio `<input>` element.
+     * The checkmark has been moved into a pseudo-element.
      */
     checkmarkStyle?: React.CSSProperties;
     /**
@@ -26,6 +32,7 @@ export declare type RadioProps = {
 /**
  * Basic radio input component
  * @example
+ * <Radio />
  * <Radio label='Radio' />
  * <Radio disabled={true} label='Radio' />
  * <Radio status='positive' label='Positive' />
@@ -43,10 +50,16 @@ export declare const Radio: React.ForwardRefExoticComponent<{
     status?: "positive" | "warning" | "negative" | undefined;
     /**
      * Custom CSS class name for the checkmark element.
+     *
+     * @deprecated As of 1.32.0, this is applied on the actual radio `<input>` element.
+     * The checkmark has been moved into a pseudo-element.
      */
     checkmarkClassName?: string | undefined;
     /**
      * Custom CSS Style for the checkmark element.
+     *
+     * @deprecated As of 1.32.0, this is applied on the actual radio `<input>` element.
+     * The checkmark has been moved into a pseudo-element.
      */
     checkmarkStyle?: React.CSSProperties | undefined;
     /**

package/cjs/core/Radio/Radio.js

@@ -37,6 +37,7 @@ require("@itwin/itwinui-css/css/inputs.css");
 /**
  * Basic radio input component
  * @example
+ * <Radio />
  * <Radio label='Radio' />
  * <Radio disabled={true} label='Radio' />
  * <Radio status='positive' label='Positive' />
@@ -44,8 +45,8 @@ require("@itwin/itwinui-css/css/inputs.css");
  * <Radio status='negative' label='Negative' />
  */
 exports.Radio = react_1.default.forwardRef(function (props, ref) {
-    var _a;
-    var className = props.className, _b = props.disabled, disabled = _b === void 0 ? false : _b, label = props.label, status = props.status, style = props.style, checkmarkClassName = props.checkmarkClassName, checkmarkStyle = props.checkmarkStyle, _c = props.setFocus, setFocus = _c === void 0 ? false : _c, rest = __rest(props, ["className", "disabled", "label", "status", "style", "checkmarkClassName", "checkmarkStyle", "setFocus"]);
+    var _a, _b;
+    var className = props.className, _c = props.disabled, disabled = _c === void 0 ? false : _c, label = props.label, status = props.status, style = props.style, checkmarkClassName = props.checkmarkClassName, checkmarkStyle = props.checkmarkStyle, _d = props.setFocus, setFocus = _d === void 0 ? false : _d, rest = __rest(props, ["className", "disabled", "label", "status", "style", "checkmarkClassName", "checkmarkStyle", "setFocus"]);
     (0, utils_1.useTheme)();
     var inputElementRef = react_1.default.useRef(null);
     var refs = (0, utils_1.useMergedRefs)(inputElementRef, ref);
@@ -54,11 +55,9 @@ exports.Radio = react_1.default.forwardRef(function (props, ref) {
             inputElementRef.current.focus();
         }
     }, [setFocus]);
-    return (react_1.default.createElement("label", { className: (0, classnames_1.default)('iui-radio', (_a = { 'iui-disabled': disabled }, _a["iui-" + status] = !!status, _a), className), style: style },
-        react_1.default.createElement("input", __assign({ disabled: disabled, type: 'radio', ref: refs }, rest)),
-        react_1.default.createElement("span", { className: (0, classnames_1.default)('iui-radio-dot', checkmarkClassName), style: checkmarkStyle },
-            react_1.default.createElement("svg", { viewBox: '0 0 16 16', "aria-hidden": 'true', focusable: 'false' },
-                react_1.default.createElement("circle", { cx: '8', cy: '8', r: '4' }))),
-        label && react_1.default.createElement("span", { className: 'iui-label' }, label)));
+    var radio = (react_1.default.createElement("input", __assign({ className: (0, classnames_1.default)('iui-radio', className && (_a = {}, _a[className] = !label, _a), checkmarkClassName), style: __assign(__assign({}, (!label && style)), checkmarkStyle), disabled: disabled, type: 'radio', ref: refs }, rest)));
+    return !label ? (radio) : (react_1.default.createElement("label", { className: (0, classnames_1.default)('iui-radio-wrapper', (_b = { 'iui-disabled': disabled }, _b["iui-" + status] = !!status, _b), className), style: style },
+        radio,
+        label && react_1.default.createElement("span", { className: 'iui-radio-label' }, label)));
 });
 exports.default = exports.Radio;

package/cjs/core/Slider/Slider.js

@@ -208,11 +208,20 @@ exports.Slider = react_1.default.forwardRef(function (props, ref) {
             newValues[closestValueIndex] = pointerValue;
             setCurrentValues(newValues);
             onChange === null || onChange === void 0 ? void 0 : onChange(newValues);
+            onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(newValues);
             focusThumb(containerRef.current, closestValueIndex);
             event.preventDefault();
             event.stopPropagation();
         }
-    }, [min, max, step, currentValues, getAllowableThumbRange, onChange]);
+    }, [
+        min,
+        max,
+        step,
+        currentValues,
+        getAllowableThumbRange,
+        onChange,
+        onUpdate,
+    ]);
     (0, utils_1.useEventListener)('pointermove', handlePointerMove, (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument);
     (0, utils_1.useEventListener)('pointerup', handlePointerUp, (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument);
     var tickMarkArea = react_1.default.useMemo(function () {

package/cjs/core/StatusMessage/StatusMessage.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+export declare type StatusMessageProps = {
+    /**
+     * Custom icon to be displayed at the beginning.
+     * It will default to the `status` icon, if it's set.
+     */
+    startIcon?: JSX.Element;
+    /**
+     * Message content.
+     */
+    children: React.ReactNode;
+    /**
+     * Status of the message.
+     */
+    status?: 'positive' | 'warning' | 'negative';
+};
+/**
+ * Component to display icon and text below the `Combobox` component.
+ * @example
+ * <StatusMessage>This is the text</StatusMessage>
+ * <StatusMessage startIcon={<SvgStar />}>This is the text</StatusMessage>
+ */
+export declare const StatusMessage: ({ startIcon: userStartIcon, children, status, }: StatusMessageProps) => JSX.Element;
+export default StatusMessage;

package/cjs/core/StatusMessage/StatusMessage.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusMessage = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var react_1 = __importDefault(require("react"));
+var utils_1 = require("../utils");
+var classnames_1 = __importDefault(require("classnames"));
+/**
+ * Component to display icon and text below the `Combobox` component.
+ * @example
+ * <StatusMessage>This is the text</StatusMessage>
+ * <StatusMessage startIcon={<SvgStar />}>This is the text</StatusMessage>
+ */
+var StatusMessage = function (_a) {
+    var userStartIcon = _a.startIcon, children = _a.children, status = _a.status;
+    (0, utils_1.useTheme)();
+    var StartIcon = function () {
+        var _a;
+        var icon = userStartIcon !== null && userStartIcon !== void 0 ? userStartIcon : (status && utils_1.StatusIconMap[status]());
+        if (!icon) {
+            return null;
+        }
+        return react_1.default.cloneElement(icon, {
+            className: (0, classnames_1.default)('iui-input-icon', (_a = icon.props) === null || _a === void 0 ? void 0 : _a.className),
+            'aria-hidden': true,
+        });
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(StartIcon, null),
+        react_1.default.createElement("div", { className: 'iui-message' }, children)));
+};
+exports.StatusMessage = StatusMessage;
+exports.default = exports.StatusMessage;

package/cjs/core/StatusMessage/index.d.ts

@@ -0,0 +1,4 @@
+export { StatusMessage } from './StatusMessage';
+export type { StatusMessageProps } from './StatusMessage';
+declare const _default: "./StatusMessage";
+export default _default;

package/cjs/core/StatusMessage/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusMessage = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var StatusMessage_1 = require("./StatusMessage");
+Object.defineProperty(exports, "StatusMessage", { enumerable: true, get: function () { return StatusMessage_1.StatusMessage; } });
+exports.default = './StatusMessage';

package/cjs/core/Table/hooks/useSelectionCell.js

@@ -55,8 +55,7 @@ var useSelectionCell = function (isSelectable, isRowDisabled) { return function
             },
             Cell: function (_a) {
                 var row = _a.row;
-                return (react_1.default.createElement("span", { onClick: function (e) { return e.stopPropagation(); } },
-                    react_1.default.createElement(Checkbox_1.Checkbox, __assign({}, row.getToggleRowSelectedProps(), { disabled: isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original) }))));
+                return (react_1.default.createElement(Checkbox_1.Checkbox, __assign({}, row.getToggleRowSelectedProps(), { disabled: isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original), onClick: function (e) { return e.stopPropagation(); } })));
             },
         }
     ], columns, true); });

package/cjs/core/Tree/Tree.d.ts

@@ -0,0 +1,123 @@
+/// <reference types="react" />
+import { CommonProps } from '../utils';
+import '@itwin/itwinui-css/css/tree.css';
+export declare type NodeData<T> = {
+    /**
+     * Array of the child nodes contained in the node.
+     */
+    subNodes?: Array<T>;
+    /**
+     * Unique id of the node.
+     */
+    nodeId: string;
+    /**
+     * Custom type used to map type `T` to `NodeData`
+     */
+    node: T;
+    /**
+     * Flag whether the node is expanded.
+     */
+    isExpanded?: boolean;
+    /**
+     * Flag whether the node is disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * Flag whether the node is selected.
+     */
+    isSelected?: boolean;
+    /**
+     * Flag whether the node has sub-nodes.
+     * Used to determine if node should be expandable.
+     */
+    hasSubNodes: boolean;
+};
+export declare type NodeRenderProps<T> = Omit<NodeData<T>, 'subNodes'>;
+export declare type TreeProps<T> = {
+    /**
+     * Render function that should return the node element.
+     * Recommended to use `TreeNode` component.
+     * Must be memoized.
+     * @example
+     * const nodeRenderer = React.useCallback(({ node, ...rest }: NodeRenderProps<DataType>) => (
+     *   <TreeNode
+     *     label={node.label}
+     *     onNodeExpanded={onNodeExpanded}
+     *     {...rest}
+     *   />
+     * ), [onNodeExpanded])
+     */
+    nodeRenderer: (props: NodeRenderProps<T>) => JSX.Element;
+    /**
+     * Array of custom data used for `TreeNodes` inside `Tree`.
+     */
+    data: T[];
+    /**
+     * Function that maps your `data` entry to `NodeData` that has all info about the node state.
+     * It will be used to render a tree node in `nodeRenderer`.
+     * Must be memoized.
+     * @example
+     * const getNode = React.useCallback((node: DemoData): NodeData<DemoData> => {
+     *   return {
+     *     subNodes: node.subItems,
+     *     nodeId: node.id,
+     *     node,
+     *     isExpanded: expandedNodes[node.id],
+     *     hasSubNodes: node.subItems.length > 0,
+     *   };
+     * }, [expandedNodes]);
+     */
+    getNode: (node: T) => NodeData<T>;
+} & Omit<CommonProps, 'title'>;
+/**
+ * Tree component used to display a hierarchical structure of `TreeNodes`.
+ * User should control state of expanded, selected and disabled nodes using `getNode` prop.
+ * @example
+  type DemoData = {
+    id: string;
+    label: string;
+    subItems: DemoData[];
+  };
+
+  const data: Array<DemoData> = [
+    {
+      id: 'Node-1',
+      label: 'Facility 1',
+      subItems: [{ id: 'Node-1-1', label: 'Unit 1', subItems: [] }],
+    },
+    {
+      id: 'Node-2',
+      label: 'Facility 2',
+      subItems: [{ id: 'Node-2-1', label: 'Unit 2', subItems: [] }],
+    },
+  ];
+
+  const [expandedNodes, setExpandedNodes] = React.useState<Record<string, boolean>>({});
+  const onNodeExpanded = React.useCallback((nodeId: string, isExpanded: boolean) => {
+    setExpandedNodes((oldExpanded) => ({ ...oldExpanded, [nodeId]: isExpanded }));
+  }, []);
+
+  const getNode = React.useCallback((node: DemoData): NodeData<DemoData> => {
+    return {
+      subNodes: node.subItems,
+      nodeId: node.id,
+      node,
+      isExpanded: expandedNodes[node.id],
+      hasSubNodes: node.subItems.length > 0,
+    };
+  }, [expandedNodes]);
+
+  <Tree<DemoData>
+    data={data}
+    getNode={getNode}
+    nodeRenderer={React.useCallback(({ node, ...rest }) => (
+      <TreeNode
+        label={node.label}
+        onNodeExpanded={onNodeExpanded}
+        {...rest}
+      />
+    ), [onNodeExpanded])}
+  />
+ */
+export declare const Tree: <T>(props: TreeProps<T>) => JSX.Element;
+export default Tree;

package/cjs/core/Tree/Tree.js

@@ -0,0 +1,177 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tree = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var react_1 = __importDefault(require("react"));
+var utils_1 = require("../utils");
+require("@itwin/itwinui-css/css/tree.css");
+var classnames_1 = __importDefault(require("classnames"));
+var TreeContext_1 = require("./TreeContext");
+/**
+ * Tree component used to display a hierarchical structure of `TreeNodes`.
+ * User should control state of expanded, selected and disabled nodes using `getNode` prop.
+ * @example
+  type DemoData = {
+    id: string;
+    label: string;
+    subItems: DemoData[];
+  };
+
+  const data: Array<DemoData> = [
+    {
+      id: 'Node-1',
+      label: 'Facility 1',
+      subItems: [{ id: 'Node-1-1', label: 'Unit 1', subItems: [] }],
+    },
+    {
+      id: 'Node-2',
+      label: 'Facility 2',
+      subItems: [{ id: 'Node-2-1', label: 'Unit 2', subItems: [] }],
+    },
+  ];
+
+  const [expandedNodes, setExpandedNodes] = React.useState<Record<string, boolean>>({});
+  const onNodeExpanded = React.useCallback((nodeId: string, isExpanded: boolean) => {
+    setExpandedNodes((oldExpanded) => ({ ...oldExpanded, [nodeId]: isExpanded }));
+  }, []);
+
+  const getNode = React.useCallback((node: DemoData): NodeData<DemoData> => {
+    return {
+      subNodes: node.subItems,
+      nodeId: node.id,
+      node,
+      isExpanded: expandedNodes[node.id],
+      hasSubNodes: node.subItems.length > 0,
+    };
+  }, [expandedNodes]);
+
+  <Tree<DemoData>
+    data={data}
+    getNode={getNode}
+    nodeRenderer={React.useCallback(({ node, ...rest }) => (
+      <TreeNode
+        label={node.label}
+        onNodeExpanded={onNodeExpanded}
+        {...rest}
+      />
+    ), [onNodeExpanded])}
+  />
+ */
+var Tree = function (props) {
+    var data = props.data, className = props.className, nodeRenderer = props.nodeRenderer, getNode = props.getNode, rest = __rest(props, ["data", "className", "nodeRenderer", "getNode"]);
+    (0, utils_1.useTheme)();
+    var treeRef = react_1.default.useRef(null);
+    var focusedIndex = react_1.default.useRef(0);
+    react_1.default.useEffect(function () {
+        focusedIndex.current = 0;
+    }, [data]);
+    var getFocusableNodes = react_1.default.useCallback(function () {
+        var focusableItems = (0, utils_1.getFocusableElements)(treeRef.current);
+        // Filter out focusable elements that are inside each node, e.g. checkbox
+        return focusableItems.filter(function (i) { return !focusableItems.some(function (p) { return p.contains(i.parentElement); }); });
+    }, []);
+    var handleKeyDown = function (event) {
+        var items = getFocusableNodes();
+        if (!(items === null || items === void 0 ? void 0 : items.length)) {
+            return;
+        }
+        var activeIndex = items.findIndex(function (el) { var _a; return el.contains((_a = treeRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.activeElement); });
+        var currentIndex = activeIndex > -1 ? activeIndex : 0;
+        switch (event.key) {
+            case 'ArrowUp': {
+                event.preventDefault();
+                var newIndex = Math.max(0, currentIndex - 1);
+                items[newIndex].focus();
+                focusedIndex.current = newIndex;
+                break;
+            }
+            case 'ArrowDown': {
+                event.preventDefault();
+                var newIndex = Math.min(items.length - 1, currentIndex + 1);
+                items[newIndex].focus();
+                focusedIndex.current = newIndex;
+                break;
+            }
+            default:
+                break;
+        }
+    };
+    var _a = react_1.default.useMemo(function () {
+        var flatList = [];
+        var firstLevelNodes = [];
+        var flattenNodes = function (nodes, depth, parentNode) {
+            if (nodes === void 0) { nodes = []; }
+            if (depth === void 0) { depth = 0; }
+            var nodeIdList = Array();
+            nodes.forEach(function (element, index) {
+                var _a = getNode(element), subNodes = _a.subNodes, nodeProps = __rest(_a, ["subNodes"]);
+                var flatNode = {
+                    nodeProps: nodeProps,
+                    depth: depth,
+                    parentNode: parentNode,
+                    indexInGroup: index,
+                };
+                nodeIdList.push(flatNode.nodeProps.nodeId);
+                flatList.push(flatNode);
+                if (depth === 0) {
+                    firstLevelNodes.push(flatNode);
+                }
+                if (flatNode.nodeProps.isExpanded) {
+                    var subNodeIds = flattenNodes(subNodes, depth + 1, flatNode);
+                    flatNode.subNodeIds = subNodeIds;
+                }
+            });
+            return nodeIdList;
+        };
+        flattenNodes(data);
+        return [flatList, firstLevelNodes];
+    }, [data, getNode]), flatNodesList = _a[0], firstLevelNodesList = _a[1];
+    return (react_1.default.createElement("ul", __assign({ className: (0, classnames_1.default)('iui-tree', className), role: 'tree', onKeyDown: handleKeyDown, ref: treeRef, tabIndex: 0, onFocus: function () {
+            var _a;
+            var items = getFocusableNodes();
+            if (items.length > 0) {
+                (_a = items[focusedIndex.current]) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        } }, rest), flatNodesList.map(function (flatNode) {
+        var _a, _b, _c, _d;
+        return (react_1.default.createElement(TreeContext_1.TreeContext.Provider, { key: flatNode.nodeProps.nodeId, value: {
+                nodeDepth: flatNode.depth,
+                subNodeIds: flatNode.subNodeIds,
+                groupSize: flatNode.depth === 0
+                    ? firstLevelNodesList.length
+                    : (_c = (_b = (_a = flatNode.parentNode) === null || _a === void 0 ? void 0 : _a.subNodeIds) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0,
+                indexInGroup: flatNode.indexInGroup,
+                parentNodeId: (_d = flatNode.parentNode) === null || _d === void 0 ? void 0 : _d.nodeProps.nodeId,
+            } }, nodeRenderer(flatNode.nodeProps)));
+    })));
+};
+exports.Tree = Tree;
+exports.default = exports.Tree;

package/cjs/core/Tree/TreeContext.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+export declare type TreeContextProps = {
+    /**
+     * Depth of the node.
+     */
+    nodeDepth: number;
+    /**
+     * List of sub-node IDs. Used for an accessibility attribute and keyboard navigation.
+     */
+    subNodeIds?: string[];
+    /**
+     * ID of the parent node. Used for keyboard navigation.
+     */
+    parentNodeId?: string;
+    /**
+     * Number of nodes that are under the same parent node or in the root. Used for an accessibility attribute.
+     */
+    groupSize: number;
+    /**
+     * Node index in the list of nodes under the same parent node or in the root. Used for an accessibility attribute.
+     */
+    indexInGroup: number;
+};
+export declare const TreeContext: React.Context<TreeContextProps | undefined>;
+export declare const useTreeContext: () => TreeContextProps;

package/cjs/core/Tree/TreeContext.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTreeContext = exports.TreeContext = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var react_1 = __importDefault(require("react"));
+exports.TreeContext = react_1.default.createContext(undefined);
+var useTreeContext = function () {
+    var context = react_1.default.useContext(exports.TreeContext);
+    if (context == undefined) {
+        throw new Error('TreeContext must be used within a TreeContext.Provider');
+    }
+    return context;
+};
+exports.useTreeContext = useTreeContext;

package/cjs/core/Tree/TreeNode.d.ts

@@ -0,0 +1,87 @@
+import React from 'react';
+import { CommonProps } from '../utils';
+import '@itwin/itwinui-css/css/tree.css';
+export declare type TreeNodeProps = {
+    /**
+     * Unique id of the node.
+     * It has to be compatible with HTML id attribute.
+     */
+    nodeId: string;
+    /**
+     * The main text displayed on the node.
+     */
+    label: React.ReactNode;
+    /**
+     * Small note displayed below main label.
+     */
+    sublabel?: React.ReactNode;
+    /**
+     * Icon shown before label and sublabel content.
+     */
+    icon?: JSX.Element;
+    /**
+     * Flag whether the node has child sub-nodes. It is used to show expander icon.
+     * @default false
+     */
+    hasSubNodes?: boolean;
+    /**
+     * Flag whether the node is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Flag whether the node is expanded.
+     * @default false
+     */
+    isExpanded?: boolean;
+    /**
+     * Flag whether the node is selected.
+     * @default false
+     */
+    isSelected?: boolean;
+    /**
+     * Callback fired when expanding or closing a TreeNode.
+     * Gives nodeId and new isExpanded value of specified node.
+     */
+    onExpanded: (nodeId: string, isExpanded: boolean) => void;
+    /**
+     * Callback fired when selecting a TreeNode.
+     * Gives nodeId and new isSelected value of specified node.
+     */
+    onSelected?: (nodeId: string, isSelected: boolean) => void;
+    /**
+     * Checkbox to be shown at the very beginning of the node.
+     * If undefined, checkbox will not be shown.
+     * Recommended to use `Checkbox` component.
+     */
+    checkbox?: React.ReactNode;
+    /**
+     * Custom expander element. If `hasSubNodes` is false, it won't be shown.
+     */
+    expander?: React.ReactNode;
+    /**
+     * Content shown after `TreeNode`.
+     */
+    children?: React.ReactNode;
+} & Omit<CommonProps, 'id'>;
+/**
+ * `TreeNode` component to display node content within a `Tree`.
+ * Must be used inside `Tree` component to correctly set node `depth` and `subNodes`.
+ * @example
+  <TreeNode
+    nodeId={props.nodeId}
+    label={props.node.label}
+    sublabel={props.node.sublabel}
+    onExpanded={onExpanded}
+    onSelected={onSelectedNodeChange}
+    isDisabled={props.isDisabled}
+    isExpanded={props.isExpanded}
+    isSelected={props.isSelected}
+    checkbox={
+      <Checkbox variant='eyeball' disabled={props.isDisabled} />
+    }
+    icon={<SvgPlaceholder />}
+  />
+ */
+export declare const TreeNode: (props: TreeNodeProps) => JSX.Element;
+export default TreeNode;