@itwin/itwinui-react 1.30.0 → 1.32.0

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/Select/Select.js

@@ -36,6 +36,7 @@ var DropdownMenu_1 = require("../DropdownMenu");
 var MenuItem_1 = require("../Menu/MenuItem");
 var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/inputs.css");
+var CaretDownSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall"));
 /**
  * Select component to select value from options.
  * Generic type is used for value. It prevents you from mistakenly using other types in `options`, `value` and `onChange`.
@@ -97,6 +98,7 @@ var Select = function (props) {
     var _f = react_1.default.useState(0), minWidth = _f[0], setMinWidth = _f[1];
     var toggle = function () { return setIsOpen(function (open) { return !open; }); };
     var selectRef = react_1.default.useRef(null);
+    var toggleButtonRef = react_1.default.useRef(null);
     var onShowHandler = react_1.default.useCallback(function (instance) {
         setIsOpen(true);
         onShow === null || onShow === void 0 ? void 0 : onShow(instance);
@@ -143,13 +145,20 @@ var Select = function (props) {
         }
         return options.find(function (option) { return option.value === value; });
     }, [options, value]);
-    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-select', (_a = {}, _a["iui-" + size] = !!size, _a), className), "aria-expanded": isOpen, "aria-haspopup": 'listbox', style: style }, rest),
-        react_1.default.createElement(DropdownMenu_1.DropdownMenu, __assign({ menuItems: menuItems, placement: 'bottom-start', className: (0, classnames_1.default)('iui-scroll', menuClassName), style: __assign({ minWidth: minWidth, maxWidth: "min(" + minWidth * 2 + "px, 90vw)", maxHeight: "300px" }, menuStyle), role: 'listbox', onShow: onShowHandler, onHide: onHideHandler, disabled: disabled }, popoverProps, { visible: isOpen }),
-            react_1.default.createElement("div", { ref: selectRef, className: (0, classnames_1.default)('iui-select-button', {
-                    'iui-placeholder': !selectedItem && !!placeholder,
-                    'iui-disabled': disabled,
-                    'iui-active': isOpen,
-                }), onClick: function () { return !disabled && toggle(); }, onKeyDown: function (e) { return !disabled && onKeyDown(e, toggle); }, tabIndex: !disabled ? 0 : undefined },
+    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-input-with-icon', className), "aria-expanded": isOpen, "aria-haspopup": 'listbox', style: style }, rest),
+        react_1.default.createElement(DropdownMenu_1.DropdownMenu, __assign({ menuItems: menuItems, placement: 'bottom-start', className: (0, classnames_1.default)('iui-scroll', menuClassName), style: __assign({ minWidth: minWidth, maxWidth: "min(" + minWidth * 2 + "px, 90vw)", maxHeight: "300px" }, menuStyle), role: 'listbox', onShow: onShowHandler, onHide: onHideHandler, disabled: disabled }, popoverProps, { visible: isOpen, onClickOutside: function (_, _a) {
+                var _b;
+                var target = _a.target;
+                if (!((_b = toggleButtonRef.current) === null || _b === void 0 ? void 0 : _b.contains(target))) {
+                    setIsOpen(false);
+                }
+            } }),
+            react_1.default.createElement("div", { ref: selectRef, className: (0, classnames_1.default)('iui-select-button', (_a = {
+                        'iui-placeholder': !selectedItem && !!placeholder,
+                        'iui-disabled': disabled
+                    },
+                    _a["iui-" + size] = !!size,
+                    _a)), onClick: function () { return !disabled && toggle(); }, onKeyDown: function (e) { return !disabled && onKeyDown(e, toggle); }, tabIndex: !disabled ? 0 : undefined },
                 !selectedItem && react_1.default.createElement("span", { className: 'iui-content' }, placeholder),
                 selectedItem &&
                     selectedItemRenderer &&
@@ -159,7 +168,13 @@ var Select = function (props) {
                         react_1.default.cloneElement(selectedItem.icon, {
                             className: (0, classnames_1.default)(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon.props.className, 'iui-icon'),
                         }),
-                    react_1.default.createElement("span", { className: 'iui-content' }, selectedItem.label)))))));
+                    react_1.default.createElement("span", { className: 'iui-content' }, selectedItem.label))))),
+        react_1.default.createElement("span", { ref: toggleButtonRef, className: (0, classnames_1.default)('iui-end-icon', {
+                'iui-actionable': !disabled,
+                'iui-disabled': disabled,
+                'iui-open': isOpen,
+            }), onClick: function () { return !disabled && toggle(); } },
+            react_1.default.createElement(CaretDownSmall_1.default, { "aria-hidden": true }))));
 };
 exports.Select = Select;
 exports.default = exports.Select;

package/cjs/core/Table/TablePaginator.js

@@ -85,11 +85,10 @@ var TablePaginator = function (props) {
     var buttonSize = size != 'default' ? 'small' : undefined;
     var pageButton = react_1.default.useCallback(function (index, tabIndex) {
         if (tabIndex === void 0) { tabIndex = index === focusedIndex ? 0 : -1; }
-        return (react_1.default.createElement("div", { key: index },
-            react_1.default.createElement("button", { className: (0, classnames_1.default)('iui-paginator-page-button', {
-                    'iui-active': index === currentPage,
-                    'iui-paginator-page-button-small': buttonSize === 'small',
-                }), onClick: function () { return onPageChange(index); }, "aria-current": index === currentPage, "aria-label": localization.goToPageLabel(index + 1), tabIndex: tabIndex }, index + 1)));
+        return (react_1.default.createElement("button", { key: index, className: (0, classnames_1.default)('iui-paginator-page-button', {
+                'iui-active': index === currentPage,
+                'iui-paginator-page-button-small': buttonSize === 'small',
+            }), onClick: function () { return onPageChange(index); }, "aria-current": index === currentPage, "aria-label": localization.goToPageLabel(index + 1), tabIndex: tabIndex }, index + 1));
     }, [focusedIndex, currentPage, localization, buttonSize, onPageChange]);
     var totalPagesCount = Math.ceil(totalRowsCount / pageSize);
     var pageList = react_1.default.useMemo(function () {
@@ -151,10 +150,9 @@ var TablePaginator = function (props) {
     var hasNoRows = totalPagesCount === 0;
     var showPagesList = totalPagesCount > 1 || isLoading;
     var showPageSizeList = pageSizeList && onPageSizeChange && !!totalRowsCount;
-    var ellipsis = (react_1.default.createElement("div", null,
-        react_1.default.createElement("span", { className: (0, classnames_1.default)('iui-paginator-ellipsis', {
-                'iui-paginator-ellipsis-small': size === 'small',
-            }) }, "\u2026")));
+    var ellipsis = (react_1.default.createElement("span", { className: (0, classnames_1.default)('iui-paginator-ellipsis', {
+            'iui-paginator-ellipsis-small': size === 'small',
+        }) }, "\u2026"));
     var noRowsContent = (react_1.default.createElement(react_1.default.Fragment, null, isLoading ? (react_1.default.createElement(ProgressIndicators_1.ProgressRadial, { indeterminate: true, size: 'small' })) : (react_1.default.createElement(Buttons_1.Button, { styleType: 'borderless', disabled: true, size: buttonSize }, "1"))));
     if (!showPagesList && !showPageSizeList) {
         return null;

package/cjs/core/Table/filters/DateRangeFilter/DatePickerInput.js

@@ -68,7 +68,7 @@ var DatePickerInput = function (props) {
             if (!((_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
                 close();
             }
-        } },
+        }, appendTo: 'parent' },
         react_1.default.createElement(LabeledInput_1.LabeledInput, __assign({ displayStyle: 'inline', value: inputValue, onChange: onInputChange, onClick: close, svgIcon: react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', onClick: function () { return setIsVisible(function (v) { return !v; }); }, ref: buttonRef },
                 react_1.default.createElement(Calendar_1.default, null)) }, rest))));
 };

package/cjs/core/Tile/Tile.js

@@ -88,7 +88,6 @@ var Tile = function (props) {
             moreOptions && (react_1.default.createElement(DropdownMenu_1.DropdownMenu, { onShow: showMenu, onHide: hideMenu, menuItems: function (close) {
                     return moreOptions.map(function (option) {
                         return react_1.default.cloneElement(option, {
-                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             onClick: function (value) {
                                 var _a, _b;
                                 close();
@@ -97,10 +96,11 @@ var Tile = function (props) {
                         });
                     });
                 } },
-                react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', size: 'small', className: (0, classnames_1.default)('iui-tile-more-options', {
+                react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-tile-more-options', {
                         'iui-visible': isMenuVisible,
-                    }), "aria-label": 'More options' },
-                    react_1.default.createElement(More_1.default, null)))),
+                    }) },
+                    react_1.default.createElement(Buttons_1.IconButton, { styleType: 'borderless', size: 'small', "aria-label": 'More options' },
+                        react_1.default.createElement(More_1.default, null))))),
             children),
         buttons && react_1.default.createElement("div", { className: 'iui-tile-buttons' }, buttons)));
 };

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;