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

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;

package/cjs/core/Tree/TreeNode.js

@@ -0,0 +1,169 @@
+"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.TreeNode = 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 TreeNodeExpander_1 = require("./TreeNodeExpander");
+var TreeContext_1 = require("./TreeContext");
+/**
+ * `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 />}
+  />
+ */
+var TreeNode = function (props) {
+    var nodeId = props.nodeId, label = props.label, sublabel = props.sublabel, children = props.children, className = props.className, icon = props.icon, _a = props.hasSubNodes, hasSubNodes = _a === void 0 ? false : _a, _b = props.isDisabled, isDisabled = _b === void 0 ? false : _b, _c = props.isExpanded, isExpanded = _c === void 0 ? false : _c, _d = props.isSelected, isSelected = _d === void 0 ? false : _d, onSelected = props.onSelected, onExpanded = props.onExpanded, checkbox = props.checkbox, expander = props.expander, rest = __rest(props, ["nodeId", "label", "sublabel", "children", "className", "icon", "hasSubNodes", "isDisabled", "isExpanded", "isSelected", "onSelected", "onExpanded", "checkbox", "expander"]);
+    (0, utils_1.useTheme)();
+    var _e = (0, TreeContext_1.useTreeContext)(), nodeDepth = _e.nodeDepth, _f = _e.subNodeIds, subNodeIds = _f === void 0 ? [] : _f, parentNodeId = _e.parentNodeId, groupSize = _e.groupSize, indexInGroup = _e.indexInGroup;
+    var _g = react_1.default.useState(false), isFocused = _g[0], setIsFocused = _g[1];
+    var nodeRef = react_1.default.useRef(null);
+    var styleDepth = react_1.default.useMemo(function () {
+        var _a, _b, _c;
+        return ((_c = (_b = (_a = (0, utils_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, "--level: " + nodeDepth))
+            ? { '--level': nodeDepth }
+            : { marginLeft: nodeDepth ? nodeDepth * 28 : 0 };
+    }, [nodeDepth]);
+    var onKeyDown = function (event) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        var isNodeFocused = nodeRef.current === ((_a = nodeRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.activeElement);
+        switch (event.key) {
+            case 'ArrowLeft': {
+                event.preventDefault();
+                if (isNodeFocused) {
+                    if (isExpanded) {
+                        onExpanded(nodeId, false);
+                        break;
+                    }
+                    if (parentNodeId) {
+                        var parentNode = (_b = nodeRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.querySelector("#" + parentNodeId);
+                        parentNode === null || parentNode === void 0 ? void 0 : parentNode.focus();
+                        break;
+                    }
+                    // If it is top level node (doesn't have parent node), then do nothing.
+                    break;
+                }
+                var focusableElements = (0, utils_1.getFocusableElements)(nodeRef.current);
+                var currentIndex = focusableElements.indexOf((_c = nodeRef.current) === null || _c === void 0 ? void 0 : _c.ownerDocument.activeElement);
+                if (currentIndex === 0) {
+                    (_d = nodeRef.current) === null || _d === void 0 ? void 0 : _d.focus();
+                }
+                else {
+                    (_e = focusableElements[currentIndex - 1]) === null || _e === void 0 ? void 0 : _e.focus();
+                }
+                break;
+            }
+            case 'ArrowRight': {
+                event.preventDefault();
+                var focusableElements = (0, utils_1.getFocusableElements)(nodeRef.current);
+                if (isNodeFocused) {
+                    if (!isExpanded && hasSubNodes) {
+                        onExpanded(nodeId, true);
+                        break;
+                    }
+                    (_f = focusableElements[0]) === null || _f === void 0 ? void 0 : _f.focus();
+                    break;
+                }
+                var currentIndex = focusableElements.indexOf((_g = nodeRef.current) === null || _g === void 0 ? void 0 : _g.ownerDocument.activeElement);
+                if (currentIndex < focusableElements.length - 1) {
+                    focusableElements[currentIndex + 1].focus();
+                    break;
+                }
+                break;
+            }
+            case ' ':
+            case 'Spacebar':
+            case 'Enter': {
+                // Ignore if it is called on the element inside, e.g. checkbox or expander
+                if (event.target !== nodeRef.current) {
+                    break;
+                }
+                event.preventDefault();
+                if (!isDisabled) {
+                    onSelected === null || onSelected === void 0 ? void 0 : onSelected(nodeId, !isSelected);
+                }
+                break;
+            }
+            default:
+                break;
+        }
+    };
+    var onExpanderClick = react_1.default.useCallback(function (event) {
+        onExpanded(nodeId, !isExpanded);
+        event.stopPropagation();
+    }, [isExpanded, nodeId, onExpanded]);
+    return (react_1.default.createElement("li", __assign({ role: 'treeitem', className: (0, classnames_1.default)('iui-tree-item', className), id: nodeId, "aria-expanded": hasSubNodes ? isExpanded : undefined, "aria-disabled": isDisabled, "aria-selected": isSelected, "aria-level": nodeDepth + 1, "aria-setsize": groupSize, "aria-posinset": indexInGroup + 1, tabIndex: -1, onFocus: function (e) {
+            setIsFocused(true);
+            // Prevents from triggering onFocus on parent Tree
+            e.stopPropagation();
+        }, onBlur: function () {
+            setIsFocused(false);
+        }, ref: nodeRef, onKeyDown: onKeyDown }, rest),
+        react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-tree-node', {
+                'iui-active': isSelected,
+                'iui-disabled': isDisabled,
+            }), style: styleDepth, onClick: function () { return !isDisabled && (onSelected === null || onSelected === void 0 ? void 0 : onSelected(nodeId, !isSelected)); } },
+            checkbox && react_1.default.isValidElement(checkbox)
+                ? react_1.default.cloneElement(checkbox, {
+                    className: (0, classnames_1.default)('iui-tree-node-checkbox', checkbox.props.className),
+                    tabIndex: isFocused ? 0 : -1,
+                })
+                : checkbox,
+            react_1.default.createElement("div", { className: 'iui-tree-node-content' },
+                hasSubNodes && expander,
+                hasSubNodes && !expander && (react_1.default.createElement(TreeNodeExpander_1.TreeNodeExpander, { isExpanded: isExpanded, disabled: isDisabled, onClick: onExpanderClick, tabIndex: isFocused ? 0 : -1 })),
+                icon &&
+                    react_1.default.cloneElement(icon, {
+                        className: (0, classnames_1.default)('iui-tree-node-content-icon', icon.props.className),
+                    }),
+                react_1.default.createElement("span", { className: 'iui-tree-node-content-label' },
+                    react_1.default.createElement("div", { className: 'iui-tree-node-content-title' }, label),
+                    sublabel && (react_1.default.createElement("div", { className: 'iui-tree-node-content-caption' }, sublabel))),
+                children)),
+        hasSubNodes && (react_1.default.createElement("ul", { className: 'iui-sub-tree', role: 'group', "aria-owns": subNodeIds.join(',') }))));
+};
+exports.TreeNode = TreeNode;
+exports.default = exports.TreeNode;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { IconButtonProps } from '../Buttons/IconButton';
+import '@itwin/itwinui-css/css/tree.css';
+export declare type TreeNodeExpanderProps = {
+    isExpanded?: boolean;
+} & IconButtonProps;
+export declare const TreeNodeExpander: (props: TreeNodeExpanderProps) => JSX.Element;
+export default TreeNodeExpander;

package/cjs/core/Tree/TreeNodeExpander.js

@@ -0,0 +1,46 @@
+"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.TreeNodeExpander = 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 classnames_1 = __importDefault(require("classnames"));
+var ChevronRight_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/ChevronRight"));
+var IconButton_1 = require("../Buttons/IconButton");
+require("@itwin/itwinui-css/css/tree.css");
+var TreeNodeExpander = function (props) {
+    var isExpanded = props.isExpanded, rest = __rest(props, ["isExpanded"]);
+    return (react_1.default.createElement(IconButton_1.IconButton, __assign({ styleType: 'borderless', size: 'small', "aria-label": isExpanded ? 'Collapse' : 'Expand' }, rest),
+        react_1.default.createElement(ChevronRight_1.default, { className: (0, classnames_1.default)('iui-tree-node-content-expander-icon', {
+                'iui-tree-node-content-expander-icon-expanded': isExpanded,
+            }) })));
+};
+exports.TreeNodeExpander = TreeNodeExpander;
+exports.default = exports.TreeNodeExpander;

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

@@ -0,0 +1,6 @@
+export { Tree } from './Tree';
+export type { TreeProps, NodeData, NodeRenderProps } from './Tree';
+export { TreeNode } from './TreeNode';
+export type { TreeNodeProps } from './TreeNode';
+export { TreeNodeExpander } from './TreeNodeExpander';
+export type { TreeNodeExpanderProps } from './TreeNodeExpander';

package/cjs/core/Tree/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeNodeExpander = exports.TreeNode = 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 Tree_1 = require("./Tree");
+Object.defineProperty(exports, "Tree", { enumerable: true, get: function () { return Tree_1.Tree; } });
+var TreeNode_1 = require("./TreeNode");
+Object.defineProperty(exports, "TreeNode", { enumerable: true, get: function () { return TreeNode_1.TreeNode; } });
+var TreeNodeExpander_1 = require("./TreeNodeExpander");
+Object.defineProperty(exports, "TreeNodeExpander", { enumerable: true, get: function () { return TreeNodeExpander_1.TreeNodeExpander; } });

package/cjs/core/index.d.ts

@@ -80,6 +80,8 @@ export { ToggleSwitch } from './ToggleSwitch';
 export type { ToggleSwitchProps } from './ToggleSwitch';
 export { Tooltip } from './Tooltip';
 export type { TooltipProps } from './Tooltip';
+export { Tree, TreeNode, TreeNodeExpander } from './Tree';
+export type { TreeProps, TreeNodeProps, TreeNodeExpanderProps, NodeData, NodeRenderProps, } from './Tree';
 export { Anchor, Body, Headline, Leading, Small, Subheading, Title, Blockquote, Code, Kbd, KbdKeys, Text, } from './Typography';
 export type { BodyProps, HeadlineProps, LeadingProps, SmallProps, SubheadingProps, TitleProps, BlockquoteProps, CodeProps, KbdProps, TextProps, } from './Typography';
 export { UserIcon } from './UserIcon';

package/cjs/core/index.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalButtonBar = exports.Modal = exports.MenuExtraContent = exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = exports.InputGroup = exports.LabeledInput = exports.Label = exports.Input = exports.InformationPanelContent = exports.InformationPanelBody = exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = exports.HorizontalTab = exports.HorizontalTabs = exports.Tab = exports.VerticalTabs = exports.HeaderLogo = exports.HeaderButton = exports.HeaderBreadcrumbs = exports.Header = exports.Footer = exports.FileUploadTemplate = exports.FileUpload = exports.Fieldset = exports.ExpandableBlock = exports.ErrorPage = exports.DropdownMenu = exports.generateLocalizedStrings = exports.DatePicker = exports.ComboBox = exports.ColorPalette = exports.ColorInputPanel = exports.ColorBuilder = exports.ColorSwatch = exports.ColorPicker = exports.Checkbox = exports.ButtonGroup = exports.SplitButton = exports.IdeasButton = exports.IconButton = exports.DropdownButton = exports.Button = exports.Breadcrumbs = exports.Badge = exports.Alert = void 0;
-exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = exports.Wizard = exports.UserIconGroup = exports.UserIcon = exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = exports.Blockquote = exports.Title = exports.Subheading = exports.Small = exports.Leading = exports.Headline = exports.Body = exports.Anchor = exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.toaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.tableFilters = exports.Table = exports.Slider = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = void 0;
+exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = exports.Wizard = exports.UserIconGroup = exports.UserIcon = exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = exports.Blockquote = exports.Title = exports.Subheading = exports.Small = exports.Leading = exports.Headline = exports.Body = exports.Anchor = exports.TreeNodeExpander = exports.TreeNode = exports.Tree = exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.toaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.tableFilters = exports.Table = exports.Slider = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -126,6 +126,10 @@ var ToggleSwitch_1 = require("./ToggleSwitch");
 Object.defineProperty(exports, "ToggleSwitch", { enumerable: true, get: function () { return ToggleSwitch_1.ToggleSwitch; } });
 var Tooltip_1 = require("./Tooltip");
 Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return Tooltip_1.Tooltip; } });
+var Tree_1 = require("./Tree");
+Object.defineProperty(exports, "Tree", { enumerable: true, get: function () { return Tree_1.Tree; } });
+Object.defineProperty(exports, "TreeNode", { enumerable: true, get: function () { return Tree_1.TreeNode; } });
+Object.defineProperty(exports, "TreeNodeExpander", { enumerable: true, get: function () { return Tree_1.TreeNodeExpander; } });
 var Typography_1 = require("./Typography");
 Object.defineProperty(exports, "Anchor", { enumerable: true, get: function () { return Typography_1.Anchor; } });
 Object.defineProperty(exports, "Body", { enumerable: true, get: function () { return Typography_1.Body; } });

package/cjs/core/utils/functions/focusable.js

@@ -15,7 +15,9 @@ var getTabbableElements = function (container) {
     }
     var elements = container.querySelectorAll(tabbableElementsSelector);
     return Array.from(elements).filter(function (el) {
-        return !el.hasAttribute('disabled') && !el.classList.contains('iui-disabled');
+        return !el.hasAttribute('disabled') &&
+            !el.classList.contains('iui-disabled') &&
+            el.getAttribute('aria-disabled') !== 'true';
     });
 };
 exports.getTabbableElements = getTabbableElements;
@@ -28,7 +30,9 @@ var getFocusableElements = function (container) {
     }
     var elements = container.querySelectorAll(tabbableElementsSelector + ", [tabindex=\"-1\"]");
     return Array.from(elements).filter(function (el) {
-        return !el.hasAttribute('disabled') && !el.classList.contains('iui-disabled');
+        return !el.hasAttribute('disabled') &&
+            !el.classList.contains('iui-disabled') &&
+            el.getAttribute('aria-disabled') !== 'true';
     });
 };
 exports.getFocusableElements = getFocusableElements;

package/esm/core/Checkbox/Checkbox.d.ts

@@ -30,16 +30,23 @@ export declare type CheckboxProps = {
     isLoading?: boolean;
     /**
      * Custom CSS class name for the checkmark element.
+     *
+     * @deprecated As of 1.32.0, this is applied on the actual checkbox `<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 checkbox `<input>` element.
+     * The checkmark has been moved into a pseudo-element.
      */
     checkmarkStyle?: React.CSSProperties;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'>;
 /**
  * Simple input checkbox
  * @example
+ * <Checkbox />
  * <Checkbox label='Basic Checkbox' />
  * <Checkbox label='Disabled Checkbox' disabled />
  * <Checkbox label='Checked' checked />
@@ -78,10 +85,16 @@ export declare const Checkbox: React.ForwardRefExoticComponent<{
     isLoading?: boolean | undefined;
     /**
      * Custom CSS class name for the checkmark element.
+     *
+     * @deprecated As of 1.32.0, this is applied on the actual checkbox `<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 checkbox `<input>` element.
+     * The checkmark has been moved into a pseudo-element.
      */
     checkmarkStyle?: React.CSSProperties | undefined;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & React.RefAttributes<HTMLInputElement>>;