@itwin/itwinui-react 1.30.0 → 1.32.0

package/esm/core/Tree/Tree.js

@@ -0,0 +1,170 @@
+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;
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import { useTheme, getFocusableElements } from '../utils';
+import '@itwin/itwinui-css/css/tree.css';
+import cx from 'classnames';
+import { TreeContext } from './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])}
+  />
+ */
+export var Tree = function (props) {
+    var data = props.data, className = props.className, nodeRenderer = props.nodeRenderer, getNode = props.getNode, rest = __rest(props, ["data", "className", "nodeRenderer", "getNode"]);
+    useTheme();
+    var treeRef = React.useRef(null);
+    var focusedIndex = React.useRef(0);
+    React.useEffect(function () {
+        focusedIndex.current = 0;
+    }, [data]);
+    var getFocusableNodes = React.useCallback(function () {
+        var focusableItems = 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.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.createElement("ul", __assign({ className: cx('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.createElement(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)));
+    })));
+};
+export default Tree;

package/esm/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/esm/core/Tree/TreeContext.js

@@ -0,0 +1,13 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+export var TreeContext = React.createContext(undefined);
+export var useTreeContext = function () {
+    var context = React.useContext(TreeContext);
+    if (context == undefined) {
+        throw new Error('TreeContext must be used within a TreeContext.Provider');
+    }
+    return context;
+};

package/esm/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/esm/core/Tree/TreeNode.js

@@ -0,0 +1,162 @@
+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;
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import { getFocusableElements, getWindow, useTheme, } from '../utils';
+import '@itwin/itwinui-css/css/tree.css';
+import cx from 'classnames';
+import { TreeNodeExpander } from './TreeNodeExpander';
+import { useTreeContext } from './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 />}
+  />
+ */
+export 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"]);
+    useTheme();
+    var _e = useTreeContext(), nodeDepth = _e.nodeDepth, _f = _e.subNodeIds, subNodeIds = _f === void 0 ? [] : _f, parentNodeId = _e.parentNodeId, groupSize = _e.groupSize, indexInGroup = _e.indexInGroup;
+    var _g = React.useState(false), isFocused = _g[0], setIsFocused = _g[1];
+    var nodeRef = React.useRef(null);
+    var styleDepth = React.useMemo(function () {
+        var _a, _b, _c;
+        return ((_c = (_b = (_a = 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 = 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 = 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.useCallback(function (event) {
+        onExpanded(nodeId, !isExpanded);
+        event.stopPropagation();
+    }, [isExpanded, nodeId, onExpanded]);
+    return (React.createElement("li", __assign({ role: 'treeitem', className: cx('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.createElement("div", { className: cx('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.isValidElement(checkbox)
+                ? React.cloneElement(checkbox, {
+                    className: cx('iui-tree-node-checkbox', checkbox.props.className),
+                    tabIndex: isFocused ? 0 : -1,
+                })
+                : checkbox,
+            React.createElement("div", { className: 'iui-tree-node-content' },
+                hasSubNodes && expander,
+                hasSubNodes && !expander && (React.createElement(TreeNodeExpander, { isExpanded: isExpanded, disabled: isDisabled, onClick: onExpanderClick, tabIndex: isFocused ? 0 : -1 })),
+                icon &&
+                    React.cloneElement(icon, {
+                        className: cx('iui-tree-node-content-icon', icon.props.className),
+                    }),
+                React.createElement("span", { className: 'iui-tree-node-content-label' },
+                    React.createElement("div", { className: 'iui-tree-node-content-title' }, label),
+                    sublabel && (React.createElement("div", { className: 'iui-tree-node-content-caption' }, sublabel))),
+                children)),
+        hasSubNodes && (React.createElement("ul", { className: 'iui-sub-tree', role: 'group', "aria-owns": subNodeIds.join(',') }))));
+};
+export default TreeNode;

package/esm/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/esm/core/Tree/TreeNodeExpander.js

@@ -0,0 +1,39 @@
+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;
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import cx from 'classnames';
+import SvgChevronRight from '@itwin/itwinui-icons-react/cjs/icons/ChevronRight';
+import { IconButton } from '../Buttons/IconButton';
+import '@itwin/itwinui-css/css/tree.css';
+export var TreeNodeExpander = function (props) {
+    var isExpanded = props.isExpanded, rest = __rest(props, ["isExpanded"]);
+    return (React.createElement(IconButton, __assign({ styleType: 'borderless', size: 'small', "aria-label": isExpanded ? 'Collapse' : 'Expand' }, rest),
+        React.createElement(SvgChevronRight, { className: cx('iui-tree-node-content-expander-icon', {
+                'iui-tree-node-content-expander-icon-expanded': isExpanded,
+            }) })));
+};
+export default TreeNodeExpander;

package/esm/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/esm/core/Tree/index.js

@@ -0,0 +1,7 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+export { Tree } from './Tree';
+export { TreeNode } from './TreeNode';
+export { TreeNodeExpander } from './TreeNodeExpander';

package/esm/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/esm/core/index.js

@@ -43,6 +43,7 @@ export { default as toaster } from './Toast';
 export { ThemeProvider } from './ThemeProvider';
 export { ToggleSwitch } from './ToggleSwitch';
 export { Tooltip } from './Tooltip';
+export { Tree, TreeNode, TreeNodeExpander } from './Tree';
 export { Anchor, Body, Headline, Leading, Small, Subheading, Title, Blockquote, Code, Kbd, KbdKeys, Text, } from './Typography';
 export { UserIcon } from './UserIcon';
 export { UserIconGroup } from './UserIconGroup';

package/esm/core/utils/components/Popover.js

@@ -53,7 +53,7 @@ export var Popover = React.forwardRef(function (props, ref) {
             },
         }); },
     };
-    var computedProps = __assign(__assign({ allowHTML: true, animation: false, appendTo: 'parent', arrow: false, duration: 0, interactive: true, role: undefined, offset: [0, 0], maxWidth: '' }, props), { className: cx('iui-popover', props.className), plugins: __spreadArray([
+    var computedProps = __assign(__assign({ allowHTML: true, animation: false, appendTo: function (el) { return el.ownerDocument.body; }, arrow: false, duration: 0, interactive: true, role: undefined, offset: [0, 0], maxWidth: '', zIndex: 99999 }, props), { className: cx('iui-popover', props.className), plugins: __spreadArray([
             lazyLoad,
             removeTabIndex,
             hideOnEscOrTab

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

@@ -12,7 +12,9 @@ export 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';
     });
 };
 /**
@@ -24,6 +26,8 @@ export 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';
     });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "1.30.0",
+  "version": "1.32.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",
@@ -40,7 +40,7 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
-    "@itwin/itwinui-css": "^0.45.0",
+    "@itwin/itwinui-css": "^0.48.2",
     "@itwin/itwinui-icons-react": "^1.5.0",
     "@itwin/itwinui-illustrations-react": "^1.0.1",
     "@tippyjs/react": "^4.2.5",