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

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

@@ -62,6 +62,8 @@ export { SideNavigation, SidenavButton, SidenavSubmenu, SidenavSubmenuHeader, }
 export type { SideNavigationProps, SidenavButtonProps, SidenavSubmenuProps, SidenavSubmenuHeaderProps, } from './SideNavigation';
 export { Slider } from './Slider';
 export type { SliderProps } from './Slider';
+export { StatusMessage } from './StatusMessage';
+export type { StatusMessageProps } from './StatusMessage';
 export { Table, tableFilters, FilterButtonBar, DefaultCell, EditableCell, TablePaginator, } from './Table';
 export type { TableProps, TableFilterProps, TableFilterValue, DateRangeFilterOptions, FilterButtonBarProps, DefaultCellProps, EditableCellProps, TablePaginatorProps, TablePaginatorRendererProps, } from './Table';
 export { Tag, TagContainer } from './Tag';
@@ -80,6 +82,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.StatusMessage = 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.
@@ -102,6 +102,8 @@ Object.defineProperty(exports, "SidenavSubmenu", { enumerable: true, get: functi
 Object.defineProperty(exports, "SidenavSubmenuHeader", { enumerable: true, get: function () { return SideNavigation_1.SidenavSubmenuHeader; } });
 var Slider_1 = require("./Slider");
 Object.defineProperty(exports, "Slider", { enumerable: true, get: function () { return Slider_1.Slider; } });
+var StatusMessage_1 = require("./StatusMessage");
+Object.defineProperty(exports, "StatusMessage", { enumerable: true, get: function () { return StatusMessage_1.StatusMessage; } });
 var Table_1 = require("./Table");
 Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return Table_1.Table; } });
 Object.defineProperty(exports, "tableFilters", { enumerable: true, get: function () { return Table_1.tableFilters; } });
@@ -126,6 +128,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/components/InputContainer.d.ts

@@ -9,6 +9,7 @@ export declare type InputContainerProps<T extends React.ElementType = 'div'> = {
     icon?: JSX.Element;
     isLabelInline?: boolean;
     isIconInline?: boolean;
+    statusMessage?: React.ReactNode;
 } & React.ComponentPropsWithoutRef<T>;
 /**
  * Input container to wrap inputs with label, and add optional message and icon.

package/cjs/core/utils/components/InputContainer.js

@@ -39,23 +39,24 @@ var classnames_1 = __importDefault(require("classnames"));
 var InputContainer = function (props) {
     var _a;
     var _b;
-    var _c = props.as, Element = _c === void 0 ? 'div' : _c, label = props.label, disabled = props.disabled, required = props.required, status = props.status, message = props.message, icon = props.icon, isLabelInline = props.isLabelInline, isIconInline = props.isIconInline, children = props.children, className = props.className, style = props.style, rest = __rest(props, ["as", "label", "disabled", "required", "status", "message", "icon", "isLabelInline", "isIconInline", "children", "className", "style"]);
+    var _c = props.as, Element = _c === void 0 ? 'div' : _c, label = props.label, disabled = props.disabled, required = props.required, status = props.status, message = props.message, icon = props.icon, isLabelInline = props.isLabelInline, isIconInline = props.isIconInline, children = props.children, className = props.className, style = props.style, statusMessage = props.statusMessage, rest = __rest(props, ["as", "label", "disabled", "required", "status", "message", "icon", "isLabelInline", "isIconInline", "children", "className", "style", "statusMessage"]);
     return (react_1.default.createElement(Element, __assign({ className: (0, classnames_1.default)('iui-input-container', (_a = {
                 'iui-disabled': disabled
             },
             _a["iui-" + status] = !!status,
             _a['iui-inline-label'] = isLabelInline,
             _a['iui-inline-icon'] = isIconInline,
-            _a['iui-with-message'] = !!message && !isLabelInline,
+            _a['iui-with-message'] = (!!message || !!icon || !!statusMessage) && !isLabelInline,
             _a), className), style: style }, rest),
         label && (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-label', {
                 'iui-required': required,
             }) }, label)),
         children,
-        icon &&
-            react_1.default.cloneElement(icon, {
-                className: (0, classnames_1.default)('iui-input-icon', (_b = icon.props) === null || _b === void 0 ? void 0 : _b.className),
-            }),
-        message && !isLabelInline && (react_1.default.createElement("div", { className: 'iui-message' }, message))));
+        statusMessage ? (statusMessage) : (react_1.default.createElement(react_1.default.Fragment, null,
+            icon &&
+                react_1.default.cloneElement(icon, {
+                    className: (0, classnames_1.default)('iui-input-icon', (_b = icon.props) === null || _b === void 0 ? void 0 : _b.className),
+                }),
+            message && !isLabelInline && (react_1.default.createElement("div", { className: 'iui-message' }, message))))));
 };
 exports.InputContainer = InputContainer;

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/cjs/core/utils/hooks/useIntersection.d.ts

@@ -1,7 +1,8 @@
 /**
  * Hook that uses `IntersectionObserver` to trigger `onIntersect` callback when element is in viewport.
- * Callback is called only once.
- * Hook returns a function that you need to use to set a reference of the element you want to observe.
+ * Callback is called only once by default (can be changed using the `once` parameter).
+ * @returns a callback ref that needs to be set on the element you want to observe.
+ * @private
  * @example
  * const onIntersection = React.useCallback(() => {
  *   console.log('Element is in viewport!');
@@ -9,4 +10,4 @@
  * const ref = useIntersection(onIntersection);
  * return (<div ref={ref}>One of many elements</div>);
  */
-export declare const useIntersection: (onIntersect: () => void, options?: IntersectionObserverInit) => (node: HTMLElement | null) => void;
+export declare const useIntersection: (onIntersect: () => void, options?: IntersectionObserverInit, once?: boolean) => (node: HTMLElement | null) => void;

package/cjs/core/utils/hooks/useIntersection.js

@@ -12,8 +12,9 @@ var react_1 = __importDefault(require("react"));
 var dom_1 = require("../functions/dom");
 /**
  * Hook that uses `IntersectionObserver` to trigger `onIntersect` callback when element is in viewport.
- * Callback is called only once.
- * Hook returns a function that you need to use to set a reference of the element you want to observe.
+ * Callback is called only once by default (can be changed using the `once` parameter).
+ * @returns a callback ref that needs to be set on the element you want to observe.
+ * @private
  * @example
  * const onIntersection = React.useCallback(() => {
  *   console.log('Element is in viewport!');
@@ -21,8 +22,9 @@ var dom_1 = require("../functions/dom");
  * const ref = useIntersection(onIntersection);
  * return (<div ref={ref}>One of many elements</div>);
  */
-var useIntersection = function (onIntersect, options) {
+var useIntersection = function (onIntersect, options, once) {
     if (options === void 0) { options = {}; }
+    if (once === void 0) { once = true; }
     var root = options.root, rootMargin = options.rootMargin, threshold = options.threshold;
     var observer = react_1.default.useRef();
     var setRef = react_1.default.useCallback(function (node) {
@@ -39,12 +41,15 @@ var useIntersection = function (onIntersect, options) {
         observer.current = new IntersectionObserver(function (_a, obs) {
             var entry = _a[0];
             if (entry.isIntersecting) {
-                obs.disconnect();
+                if (once) {
+                    obs.disconnect();
+                }
                 onIntersect();
             }
         }, { root: root, rootMargin: rootMargin, threshold: threshold });
         observer.current.observe(node);
-    }, [onIntersect, root, rootMargin, threshold]);
+    }, [onIntersect, once, root, rootMargin, threshold]);
+    react_1.default.useEffect(function () { return function () { var _a; return (_a = observer.current) === null || _a === void 0 ? void 0 : _a.disconnect(); }; }, []);
     return setRef;
 };
 exports.useIntersection = useIntersection;

package/cjs/core/utils/hooks/useOverflow.d.ts

@@ -1,13 +1,14 @@
 import React from 'react';
 /**
  * Hook that observes the size of an element and returns the number of items
- * that should be visible based on the width of the container element.
+ * that should be visible based on the size of the container element.
  *
  * The returned number should be used to render the element with fewer items.
  *
  * @private
  * @param items Items that this element contains.
  * @param disabled Set to true to disconnect the observer.
+ * @param dimension 'horizontal' (default) or 'vertical'
  * @returns [callback ref to set on container, stateful count of visible items]
  *
  * @example
@@ -20,4 +21,4 @@ import React from 'react';
  *   </div>
  * );
  */
-export declare const useOverflow: <T extends HTMLElement>(items: React.ReactNode[] | string, disabled?: boolean) => readonly [(instance: T | null) => void, number];
+export declare const useOverflow: <T extends HTMLElement>(items: React.ReactNode[] | string, disabled?: boolean, orientation?: 'horizontal' | 'vertical') => readonly [(instance: T | null) => void, number];

package/cjs/core/utils/hooks/useOverflow.js

@@ -14,13 +14,14 @@ var useResizeObserver_1 = require("./useResizeObserver");
 var STARTING_MAX_ITEMS_COUNT = 20;
 /**
  * Hook that observes the size of an element and returns the number of items
- * that should be visible based on the width of the container element.
+ * that should be visible based on the size of the container element.
  *
  * The returned number should be used to render the element with fewer items.
  *
  * @private
  * @param items Items that this element contains.
  * @param disabled Set to true to disconnect the observer.
+ * @param dimension 'horizontal' (default) or 'vertical'
  * @returns [callback ref to set on container, stateful count of visible items]
  *
  * @example
@@ -33,20 +34,21 @@ var STARTING_MAX_ITEMS_COUNT = 20;
  *   </div>
  * );
  */
-var useOverflow = function (items, disabled) {
+var useOverflow = function (items, disabled, orientation) {
     if (disabled === void 0) { disabled = false; }
+    if (orientation === void 0) { orientation = 'horizontal'; }
     var containerRef = react_1.default.useRef(null);
     var _a = react_1.default.useState(function () {
         return disabled ? items.length : Math.min(items.length, STARTING_MAX_ITEMS_COUNT);
     }), visibleCount = _a[0], setVisibleCount = _a[1];
     var needsFullRerender = react_1.default.useRef(true);
-    var _b = react_1.default.useState(0), containerWidth = _b[0], setContainerWidth = _b[1];
-    var previousContainerWidth = react_1.default.useRef(0);
-    var updateContainerWidth = react_1.default.useCallback(function (_a) {
-        var width = _a.width;
-        return setContainerWidth(width);
-    }, []);
-    var _c = (0, useResizeObserver_1.useResizeObserver)(updateContainerWidth), resizeRef = _c[0], observer = _c[1];
+    var _b = react_1.default.useState(0), containerSize = _b[0], setContainerSize = _b[1];
+    var previousContainerSize = react_1.default.useRef(0);
+    var updateContainerSize = react_1.default.useCallback(function (_a) {
+        var width = _a.width, height = _a.height;
+        return setContainerSize(orientation === 'horizontal' ? width : height);
+    }, [orientation]);
+    var _c = (0, useResizeObserver_1.useResizeObserver)(updateContainerSize), resizeRef = _c[0], observer = _c[1];
     var resizeObserverRef = react_1.default.useRef(observer);
     react_1.default.useLayoutEffect(function () {
         if (disabled) {
@@ -56,7 +58,7 @@ var useOverflow = function (items, disabled) {
             setVisibleCount(Math.min(items.length, STARTING_MAX_ITEMS_COUNT));
             needsFullRerender.current = true;
         }
-    }, [containerWidth, disabled, items]);
+    }, [containerSize, disabled, items]);
     var mergedRefs = (0, useMergedRefs_1.useMergedRefs)(containerRef, resizeRef);
     react_1.default.useLayoutEffect(function () {
         var _a;
@@ -64,25 +66,26 @@ var useOverflow = function (items, disabled) {
             (_a = resizeObserverRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
             return;
         }
-        var availableWidth = containerRef.current.offsetWidth;
-        var requiredWidth = containerRef.current.scrollWidth;
-        if (availableWidth < requiredWidth) {
-            var avgItemWidth = requiredWidth / visibleCount;
-            var visibleItems = Math.floor(availableWidth / avgItemWidth);
+        var dimension = orientation === 'horizontal' ? 'Width' : 'Height';
+        var availableSize = containerRef.current["offset" + dimension];
+        var requiredSize = containerRef.current["scroll" + dimension];
+        if (availableSize < requiredSize) {
+            var avgItemSize = requiredSize / visibleCount;
+            var visibleItems = Math.floor(availableSize / avgItemSize);
             setVisibleCount(visibleItems);
         }
         else if (needsFullRerender.current) {
-            var childrenWidth = Array.from(containerRef.current.children).reduce(function (sum, child) { return sum + child.offsetWidth; }, 0);
-            var avgItemWidth = childrenWidth / visibleCount;
-            var visibleItems = Math.floor(availableWidth / avgItemWidth);
+            var childrenSize = Array.from(containerRef.current.children).reduce(function (sum, child) { return sum + child["offset" + dimension]; }, 0);
+            var avgItemSize = childrenSize / visibleCount;
+            var visibleItems = Math.floor(availableSize / avgItemSize);
             // Doubling the visible items to overflow the container. Just to be safe.
             setVisibleCount(Math.min(items.length, visibleItems * 2));
         }
         needsFullRerender.current = false;
-    }, [containerWidth, visibleCount, disabled, items.length]);
+    }, [containerSize, visibleCount, disabled, items.length, orientation]);
     react_1.default.useLayoutEffect(function () {
-        previousContainerWidth.current = containerWidth;
-    }, [containerWidth]);
+        previousContainerSize.current = containerSize;
+    }, [containerSize]);
     return [mergedRefs, visibleCount];
 };
 exports.useOverflow = useOverflow;

package/esm/core/ButtonGroup/ButtonGroup.d.ts

@@ -20,6 +20,11 @@ export declare type ButtonGroupProps = {
      * @default 'end'
      */
     overflowPlacement?: 'start' | 'end';
+    /**
+     * Should the buttons be placed in a horizontal or vertical layout?
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
 } & React.ComponentPropsWithRef<'div'>;
 /**
  * Group buttons together for common actions.
@@ -49,5 +54,5 @@ export declare type ButtonGroupProps = {
  *   {buttons}
  * </ButtonGroup>
  */
-export declare const ButtonGroup: React.ForwardRefExoticComponent<Pick<ButtonGroupProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "overflowButton" | "overflowPlacement"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ButtonGroup: React.ForwardRefExoticComponent<Pick<ButtonGroupProps, "orientation" | "key" | keyof React.HTMLAttributes<HTMLDivElement> | "overflowButton" | "overflowPlacement"> & React.RefAttributes<HTMLDivElement>>;
 export default ButtonGroup;

package/esm/core/ButtonGroup/ButtonGroup.js

@@ -57,12 +57,15 @@ import '@itwin/itwinui-css/css/button.css';
  * </ButtonGroup>
  */
 export var ButtonGroup = React.forwardRef(function (props, ref) {
-    var children = props.children, className = props.className, style = props.style, overflowButton = props.overflowButton, _a = props.overflowPlacement, overflowPlacement = _a === void 0 ? 'end' : _a, rest = __rest(props, ["children", "className", "style", "overflowButton", "overflowPlacement"]);
+    var children = props.children, className = props.className, overflowButton = props.overflowButton, _a = props.overflowPlacement, overflowPlacement = _a === void 0 ? 'end' : _a, _b = props.orientation, orientation = _b === void 0 ? 'horizontal' : _b, rest = __rest(props, ["children", "className", "overflowButton", "overflowPlacement", "orientation"]);
     var items = React.useMemo(function () { var _a; return (_a = React.Children.map(children, function (child) { return React.createElement("div", null, child); })) !== null && _a !== void 0 ? _a : []; }, [children]);
     useTheme();
-    var _b = useOverflow(items, !overflowButton), overflowRef = _b[0], visibleCount = _b[1];
+    var _c = useOverflow(items, !overflowButton, orientation), overflowRef = _c[0], visibleCount = _c[1];
     var refs = useMergedRefs(overflowRef, ref);
-    return (React.createElement("div", __assign({ className: cx('iui-button-group', className), style: __assign(__assign({}, (!!overflowButton && { width: '100%' })), style), ref: refs }, rest), !!overflowButton && visibleCount < items.length ? (React.createElement(React.Fragment, null,
+    return (React.createElement("div", __assign({ className: cx({
+            'iui-button-group': orientation === 'horizontal',
+            'iui-button-group-vertical': orientation === 'vertical',
+        }, className), "aria-orientation": orientation, ref: refs }, rest), !!overflowButton && visibleCount < items.length ? (React.createElement(React.Fragment, null,
         overflowButton && overflowPlacement === 'start' && (React.createElement("div", null, overflowButton(visibleCount))),
         items.slice(0, visibleCount - 1),
         overflowButton && overflowPlacement === 'end' && (React.createElement("div", null, overflowButton(visibleCount))))) : (items)));

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>>;