@itwin/itwinui-react 1.30.0 → 1.32.0

package/esm/core/ComboBox/ComboBox.js

@@ -29,7 +29,7 @@ import cx from 'classnames';
 import { Input } from '../Input';
 import { Menu, MenuExtraContent, MenuItem } from '../Menu';
 import { Text } from '../Typography';
-import { InputContainer, useTheme, Popover, getFocusableElements, getRandomValue, } from '../utils';
+import { InputContainer, useTheme, Popover, getFocusableElements, getRandomValue, mergeRefs, } from '../utils';
 import SvgCaretDownSmall from '@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall';
 import 'tippy.js/animations/shift-away.css';
 /**
@@ -46,7 +46,7 @@ import 'tippy.js/animations/shift-away.css';
  * />
  */
 export var ComboBox = function (props) {
-    var options = props.options, value = props.value, onChange = props.onChange, filterFunction = props.filterFunction, className = props.className, inputProps = props.inputProps, dropdownMenuProps = props.dropdownMenuProps, _a = props.emptyStateMessage, emptyStateMessage = _a === void 0 ? 'No options found' : _a, rest = __rest(props, ["options", "value", "onChange", "filterFunction", "className", "inputProps", "dropdownMenuProps", "emptyStateMessage"]);
+    var options = props.options, value = props.value, onChange = props.onChange, filterFunction = props.filterFunction, className = props.className, inputProps = props.inputProps, dropdownMenuProps = props.dropdownMenuProps, _a = props.emptyStateMessage, emptyStateMessage = _a === void 0 ? 'No options found' : _a, itemRenderer = props.itemRenderer, rest = __rest(props, ["options", "value", "onChange", "filterFunction", "className", "inputProps", "dropdownMenuProps", "emptyStateMessage", "itemRenderer"]);
     // Generate a stateful random id if not specified
     var id = React.useState(function () {
         var _a, _b;
@@ -61,16 +61,31 @@ export var ComboBox = function (props) {
             return value === options[index].value;
         });
     }, [options, id]);
+    var userOnChange = React.useRef(onChange);
     var memoizedItems = React.useMemo(function () {
-        return options.map(function (_a, index) {
-            var label = _a.label, value = _a.value, rest = __rest(_a, ["label", "value"]);
-            return (React.createElement(MenuItem, __assign({ id: getOptionId(index), key: getOptionId(index), value: value, role: 'option', onClick: function (value) {
+        return options.map(function (option, index) {
+            var label = option.label, value = option.value, rest = __rest(option, ["label", "value"]);
+            var additionalProps = {
+                value: value,
+                role: 'option',
+                onClick: function () {
+                    var _a;
                     setSelectedValue(value);
-                    onChange === null || onChange === void 0 ? void 0 : onChange(value);
+                    (_a = userOnChange.current) === null || _a === void 0 ? void 0 : _a.call(userOnChange, value);
                     setIsOpen(false);
-                } }, rest), label));
+                },
+            };
+            if (itemRenderer) {
+                return React.cloneElement(itemRenderer(option, {
+                    id: getOptionId(index),
+                    index: index,
+                    isSelected: false,
+                    isFocused: false,
+                }), additionalProps);
+            }
+            return (React.createElement(MenuItem, __assign({ id: getOptionId(index), key: getOptionId(index) }, additionalProps, rest), label));
         });
-    }, [options, getOptionId, onChange]);
+    }, [options, getOptionId, itemRenderer]);
     var inputRef = React.useRef(null);
     var menuRef = React.useRef(null);
     var toggleButtonRef = React.useRef(null);
@@ -149,6 +164,7 @@ export var ComboBox = function (props) {
         });
     }, [inputValue, options, selectedValue, isOpen, filterFunction]);
     var onKeyDown = React.useCallback(function (event) {
+        var _a;
         var focusableOptions = getFocusableElements(menuRef.current);
         var focusedIndexInFilteredList = focusableOptions.findIndex(function (_a) {
             var _b;
@@ -182,7 +198,7 @@ export var ComboBox = function (props) {
             case 'Enter':
                 if (isOpen) {
                     setSelectedValue(options[focusedIndex].value);
-                    onChange === null || onChange === void 0 ? void 0 : onChange(options[focusedIndex].value);
+                    (_a = userOnChange.current) === null || _a === void 0 ? void 0 : _a.call(userOnChange, options[focusedIndex].value);
                 }
                 setIsOpen(function (open) { return !open; });
                 event.preventDefault();
@@ -202,26 +218,41 @@ export var ComboBox = function (props) {
                 }
                 break;
         }
-    }, [focusedIndex, isOpen, options, getOptionId, onChange]);
+    }, [focusedIndex, isOpen, options, getOptionId]);
     var menuItems = React.useMemo(function () {
         if (filteredOptions.length === 0) {
-            return (React.createElement(MenuExtraContent, null,
-                React.createElement(Text, { isMuted: true }, emptyStateMessage)));
+            return [
+                React.createElement(MenuExtraContent, { key: 0 },
+                    React.createElement(Text, { isMuted: true }, emptyStateMessage)),
+            ];
         }
         return filteredOptions.map(function (option) {
+            var _a;
             var index = options.findIndex(function (_a) {
                 var value = _a.value;
                 return option.value === value;
             });
             if (index < 0) {
-                return;
+                return React.createElement(React.Fragment, null);
             }
-            if (selectedValue === option.value || focusedIndex === index) {
-                return React.cloneElement(memoizedItems[index], {
-                    isSelected: selectedValue === option.value,
-                    className: cx({ 'iui-focused': focusedIndex === index }),
-                    ref: function (el) {
-                        return focusedIndex === index && (el === null || el === void 0 ? void 0 : el.scrollIntoView(false));
+            var id = getOptionId(index);
+            var isSelected = selectedValue === option.value;
+            var isFocused = focusedIndex === index;
+            var focusScrollRef = function (el) {
+                return isFocused && (el === null || el === void 0 ? void 0 : el.scrollIntoView({ block: 'nearest' }));
+            };
+            if (isSelected || isFocused) {
+                var item = (_a = itemRenderer === null || itemRenderer === void 0 ? void 0 : itemRenderer(option, { index: index, id: id, isSelected: isSelected, isFocused: isFocused })) !== null && _a !== void 0 ? _a : React.cloneElement(memoizedItems[index], { isSelected: isSelected });
+                return React.cloneElement(item, {
+                    className: cx({ 'iui-focused': isFocused }, item.props.className),
+                    ref: mergeRefs(focusScrollRef, item.props.ref),
+                    value: option.value,
+                    role: 'option',
+                    onClick: function () {
+                        var _a;
+                        setSelectedValue(option.value);
+                        (_a = userOnChange.current) === null || _a === void 0 ? void 0 : _a.call(userOnChange, option.value);
+                        setIsOpen(false);
                     },
                 });
             }
@@ -231,45 +262,52 @@ export var ComboBox = function (props) {
         filteredOptions,
         emptyStateMessage,
         options,
-        focusedIndex,
+        getOptionId,
         selectedValue,
+        focusedIndex,
+        itemRenderer,
         memoizedItems,
     ]);
-    return (React.createElement(InputContainer, __assign({ className: className, isIconInline: true, icon: React.useMemo(function () { return (React.createElement("span", { ref: toggleButtonRef, className: cx({
-                'iui-actionable': !(inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled),
-                'iui-open': isOpen,
-            }), onClick: function () {
-                var _a;
-                if (isOpen) {
-                    setIsOpen(false);
-                }
-                else {
-                    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                }
-            } },
-            React.createElement(SvgCaretDownSmall, { "aria-hidden": true }))); }, [inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled, isOpen]) }, rest, { id: id }),
-        React.createElement(Popover, __assign({ placement: 'bottom-start', visible: isOpen, onClickOutside: function (_, _a) {
-                var _b;
-                var target = _a.target;
-                if (!((_b = toggleButtonRef.current) === null || _b === void 0 ? void 0 : _b.contains(target))) {
-                    setIsOpen(false);
-                }
-            }, animation: 'shift-away', duration: 200 }, dropdownMenuProps, { content: React.createElement(Menu, { id: id + "-list", className: 'iui-scroll', style: {
-                    minWidth: minWidth,
-                    maxWidth: "min(" + minWidth * 2 + "px, 90vw)",
-                    maxHeight: 300,
-                }, setFocus: false, role: 'listbox', ref: menuRef }, menuItems), onHide: function (instance) {
-                var _a;
-                var selectedIndex = options.findIndex(function (_a) {
-                    var value = _a.value;
-                    return value === selectedValue;
-                });
-                setFocusedIndex(selectedIndex);
-                if (selectedIndex > -1) {
-                    setInputValue(options[selectedIndex].label); // update input value to be same as selected value
-                }
-                (_a = dropdownMenuProps === null || dropdownMenuProps === void 0 ? void 0 : dropdownMenuProps.onHide) === null || _a === void 0 ? void 0 : _a.call(dropdownMenuProps, instance);
-            } }),
-            React.createElement(Input, __assign({ ref: inputRef, onKeyDown: onKeyDown, onFocus: function () { return setIsOpen(true); }, onChange: onInput, value: inputValue, "aria-activedescendant": isOpen && focusedIndex > -1 ? getOptionId(focusedIndex) : undefined, role: 'combobox', "aria-controls": isOpen ? id + "-list" : undefined, "aria-autocomplete": 'list', spellCheck: false, autoCapitalize: 'none', autoCorrect: 'off' }, inputProps)))));
+    return (React.createElement(InputContainer, __assign({ className: className, isIconInline: true }, rest, { id: id }),
+        React.createElement("div", { className: 'iui-input-with-icon' },
+            React.createElement(Popover, __assign({ placement: 'bottom-start', visible: isOpen, onClickOutside: function (_, _a) {
+                    var _b;
+                    var target = _a.target;
+                    if (!((_b = toggleButtonRef.current) === null || _b === void 0 ? void 0 : _b.contains(target))) {
+                        setIsOpen(false);
+                    }
+                }, animation: 'shift-away', duration: 200 }, dropdownMenuProps, { content: React.createElement(Menu, { id: id + "-list", className: 'iui-scroll', style: {
+                        minWidth: minWidth,
+                        maxWidth: "min(" + minWidth * 2 + "px, 90vw)",
+                        maxHeight: 300,
+                    }, setFocus: false, role: 'listbox', ref: menuRef }, menuItems), onHide: function (instance) {
+                    var _a;
+                    var selectedIndex = options.findIndex(function (_a) {
+                        var value = _a.value;
+                        return value === selectedValue;
+                    });
+                    setFocusedIndex(selectedIndex);
+                    if (selectedIndex > -1) {
+                        setInputValue(options[selectedIndex].label); // update input value to be same as selected value
+                    }
+                    (_a = dropdownMenuProps === null || dropdownMenuProps === void 0 ? void 0 : dropdownMenuProps.onHide) === null || _a === void 0 ? void 0 : _a.call(dropdownMenuProps, instance);
+                } }),
+                React.createElement(Input, __assign({ ref: inputRef, onKeyDown: onKeyDown, onFocus: function () { return setIsOpen(true); }, onChange: onInput, value: inputValue, "aria-activedescendant": isOpen && focusedIndex > -1
+                        ? getOptionId(focusedIndex)
+                        : undefined, role: 'combobox', "aria-controls": isOpen ? id + "-list" : undefined, "aria-autocomplete": 'list', spellCheck: false, autoCapitalize: 'none', autoCorrect: 'off' }, inputProps))),
+            React.createElement("span", { ref: toggleButtonRef, className: cx('iui-end-icon', {
+                    'iui-actionable': !(inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled),
+                    'iui-disabled': inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled,
+                    'iui-open': isOpen,
+                }), onClick: function () {
+                    var _a;
+                    if (isOpen) {
+                        setIsOpen(false);
+                    }
+                    else {
+                        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                    }
+                } },
+                React.createElement(SvgCaretDownSmall, { "aria-hidden": true })))));
 };
 export default ComboBox;

package/esm/core/ExpandableBlock/ExpandableBlock.d.ts

@@ -38,6 +38,12 @@ export declare type ExpandableBlockProps = {
      * @default 'default'
      */
     size?: 'default' | 'small';
+    /**
+     * Style of the ExpandableBlock.
+     * Use 'borderless' to hide outline.
+     * @default 'default'
+     */
+    styleType?: 'default' | 'borderless';
 } & Omit<CommonProps, 'title'>;
 /**
  * Container that allows content to be hidden behind a brief title and a caption.

package/esm/core/ExpandableBlock/ExpandableBlock.js

@@ -40,10 +40,10 @@ import '@itwin/itwinui-css/css/expandable-block.css';
  */
 export var ExpandableBlock = function (props) {
     var _a;
-    var caption = props.caption, children = props.children, className = props.className, title = props.title, onToggle = props.onToggle, style = props.style, _b = props.isExpanded, isExpanded = _b === void 0 ? false : _b, endIcon = props.endIcon, status = props.status, _c = props.size, size = _c === void 0 ? 'default' : _c, rest = __rest(props, ["caption", "children", "className", "title", "onToggle", "style", "isExpanded", "endIcon", "status", "size"]);
+    var caption = props.caption, children = props.children, className = props.className, title = props.title, onToggle = props.onToggle, style = props.style, _b = props.isExpanded, isExpanded = _b === void 0 ? false : _b, endIcon = props.endIcon, status = props.status, _c = props.size, size = _c === void 0 ? 'default' : _c, _d = props.styleType, styleType = _d === void 0 ? 'default' : _d, rest = __rest(props, ["caption", "children", "className", "title", "onToggle", "style", "isExpanded", "endIcon", "status", "size", "styleType"]);
     useTheme();
     var icon = endIcon !== null && endIcon !== void 0 ? endIcon : (status && StatusIconMap[status]());
-    var _d = React.useState(isExpanded), expanded = _d[0], setExpanded = _d[1];
+    var _e = React.useState(isExpanded), expanded = _e[0], setExpanded = _e[1];
     React.useEffect(function () {
         setExpanded(isExpanded);
     }, [isExpanded]);
@@ -62,6 +62,7 @@ export var ExpandableBlock = function (props) {
             'iui-with-caption': !!caption,
             'iui-expanded': expanded,
             'iui-small': size === 'small',
+            'iui-borderless': styleType === 'borderless',
         }, className), style: style }, rest),
         React.createElement("div", { "aria-expanded": expanded, className: 'iui-header', tabIndex: 0, onClick: handleToggle, onKeyDown: onKeyDown },
             React.createElement(SvgChevronRight, { className: 'iui-icon', "aria-hidden": true }),

package/esm/core/Menu/Menu.js

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

package/esm/core/Menu/MenuItem.js

@@ -100,7 +100,7 @@ export var MenuItem = React.forwardRef(function (props, ref) {
                 className: cx(badge.props.className, 'iui-icon'),
             })));
     return subMenuItems.length === 0 ? (listItem) : (React.createElement(MenuItemContext.Provider, { value: { ref: menuItemRef } },
-        React.createElement(Popover, { placement: 'right-start', visible: isSubmenuVisible, content: React.createElement("div", { onMouseLeave: function () { return setIsSubmenuVisible(false); }, onBlur: function (e) {
+        React.createElement(Popover, { placement: 'right-start', visible: isSubmenuVisible, appendTo: 'parent', content: React.createElement("div", { onMouseLeave: function () { return setIsSubmenuVisible(false); }, onBlur: function (e) {
                     var _a, _b;
                     !!(e.relatedTarget instanceof Node) &&
                         !((_a = subMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)) &&

package/esm/core/Radio/Radio.d.ts

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

package/esm/core/Radio/Radio.js

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

package/esm/core/Select/Select.js

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

package/esm/core/Table/TablePaginator.js

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

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

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

package/esm/core/Tile/Tile.js

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

package/esm/core/Tree/Tree.d.ts

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