@itwin/itwinui-react 1.31.0 → 1.33.0

package/esm/core/ComboBox/ComboBox.js

@@ -29,9 +29,10 @@ 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';
+import { StatusMessage } from '../StatusMessage';
 /**
  * ComboBox component that allows typing a value to filter the options in dropdown list.
  * Values can be selected either using mouse clicks or using the Enter key.
@@ -46,7 +47,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, message = props.message, status = props.status, _a = props.emptyStateMessage, emptyStateMessage = _a === void 0 ? 'No options found' : _a, itemRenderer = props.itemRenderer, rest = __rest(props, ["options", "value", "onChange", "filterFunction", "className", "inputProps", "dropdownMenuProps", "message", "status", "emptyStateMessage", "itemRenderer"]);
     // Generate a stateful random id if not specified
     var id = React.useState(function () {
         var _a, _b;
@@ -61,16 +62,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 +165,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 +199,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 +219,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,11 +263,14 @@ export var ComboBox = function (props) {
         filteredOptions,
         emptyStateMessage,
         options,
-        focusedIndex,
+        getOptionId,
         selectedValue,
+        focusedIndex,
+        itemRenderer,
         memoizedItems,
     ]);
-    return (React.createElement(InputContainer, __assign({ className: className, isIconInline: true }, rest, { id: id }),
+    return (React.createElement(InputContainer, __assign({ className: className, status: status, statusMessage: typeof message === 'string' ? (React.createElement(StatusMessage, { status: status }, message)) : (React.isValidElement(message) &&
+            React.cloneElement(message, { status: status })) }, 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;

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/Footer/Footer.d.ts

@@ -11,8 +11,10 @@ export declare type TitleTranslations = {
 export declare type FooterProps = {
     /**
      * Customize footer elements.
+     * Providing a `FooterElement[]` will append the custom elements to the end of the default elements.
+     * Providing a function that returns a `FooterElement[]` allows further customization - whatever is returned from the function is displayed in the footer with no amendments.
      */
-    customElements?: FooterElement[];
+    customElements?: FooterElement[] | ((defaultElements: FooterElement[]) => FooterElement[]);
     /**
      * Provide localized strings.
      */
@@ -27,13 +29,23 @@ export declare type FooterElement = {
      * URL of the footer element.
      */
     url?: string;
+    /**
+     * Key of the footer element.
+     */
+    key?: keyof TitleTranslations | 'copyright' | (string & Record<never, never>);
 };
 /**
  * Footer element with all needed legal and info links.
  * Be sure to place it manually at the bottom of your page.
  * You can use position 'absolute' with relative body or set the height of the content and place footer at the end.
- * @example
+ * @example <caption>Appending custom element after default elements</caption>
  * <Footer customElements={[{title: 'Bentley', url: 'https://www.bentley.com/'}]} />
+ * @example <caption>Returning only custom elements</caption>
+ * <Footer customElements={() => newFooterElements)} />
+ * @example <caption>Filtering out a specific element</caption>
+ * <Footer customElements={(defaultElements) => defaultElements.filter(({ key }) => key !== 'privacy' )} />
+ * @example <caption>Changing a url</caption>
+ * <Footer customElements={(defaultElements) => defaultElements.map(element => ({ ...element, url: element.key === 'privacy' ? customPrivacyUrl : element.url }))} />
  */
 export declare const Footer: (props: FooterProps) => JSX.Element;
 export default Footer;

package/esm/core/Footer/Footer.js

@@ -48,39 +48,62 @@ var footerTranslations = {
  * Footer element with all needed legal and info links.
  * Be sure to place it manually at the bottom of your page.
  * You can use position 'absolute' with relative body or set the height of the content and place footer at the end.
- * @example
+ * @example <caption>Appending custom element after default elements</caption>
  * <Footer customElements={[{title: 'Bentley', url: 'https://www.bentley.com/'}]} />
+ * @example <caption>Returning only custom elements</caption>
+ * <Footer customElements={() => newFooterElements)} />
+ * @example <caption>Filtering out a specific element</caption>
+ * <Footer customElements={(defaultElements) => defaultElements.filter(({ key }) => key !== 'privacy' )} />
+ * @example <caption>Changing a url</caption>
+ * <Footer customElements={(defaultElements) => defaultElements.map(element => ({ ...element, url: element.key === 'privacy' ? customPrivacyUrl : element.url }))} />
  */
 export var Footer = function (props) {
     var customElements = props.customElements, translatedTitles = props.translatedTitles, className = props.className, rest = __rest(props, ["customElements", "translatedTitles", "className"]);
     useTheme();
-    var today = new Date();
     var titles = __assign(__assign({}, footerTranslations), translatedTitles);
     var defaultElements = [
         {
+            key: 'copyright',
+            title: "\u00A9 " + new Date().getFullYear() + " Bentley Systems, Incorporated",
+        },
+        {
+            key: 'termsOfService',
             title: titles.termsOfService,
             url: 'https://connect-agreementportal.bentley.com/AgreementApp/Home/Eula/view/readonly/BentleyConnect',
         },
-        { title: titles.privacy, url: 'https://www.bentley.com/en/privacy-policy' },
         {
+            key: 'privacy',
+            title: titles.privacy,
+            url: 'https://www.bentley.com/en/privacy-policy',
+        },
+        {
+            key: 'termsOfUse',
             title: titles.termsOfUse,
             url: 'https://www.bentley.com/en/terms-of-use-and-select-online-agreement',
         },
-        { title: titles.cookies, url: 'https://www.bentley.com/en/cookie-policy' },
-        { title: titles.legalNotices, url: 'https://connect.bentley.com/Legal' },
+        {
+            key: 'cookies',
+            title: titles.cookies,
+            url: 'https://www.bentley.com/en/cookie-policy',
+        },
+        {
+            key: 'legalNotices',
+            title: titles.legalNotices,
+            url: 'https://connect.bentley.com/Legal',
+        },
     ];
-    var elements = customElements
-        ? __spreadArray(__spreadArray([], defaultElements, true), customElements, true) : defaultElements;
+    var elements = defaultElements;
+    if (customElements) {
+        elements =
+            typeof customElements === 'function'
+                ? customElements(defaultElements)
+                : __spreadArray(__spreadArray([], defaultElements, true), customElements, true);
+    }
     return (React.createElement("footer", __assign({ className: cx('iui-legal-footer', className) }, rest),
-        React.createElement("ul", null,
-            React.createElement("li", null,
-                "\u00A9 ",
-                today.getFullYear(),
-                " Bentley Systems, Incorporated"),
-            elements.map(function (element, index) {
-                return (React.createElement("li", { key: element.title + "-" + index },
-                    React.createElement("span", { className: 'iui-separator' }),
-                    element.url ? (React.createElement("a", { href: element.url, target: '_blank', rel: 'noreferrer' }, element.title)) : (element.title)));
-            }))));
+        React.createElement("ul", null, elements.map(function (element, index) {
+            return (React.createElement("li", { key: element.key || element.title + "-" + index },
+                index > 0 && React.createElement("span", { className: 'iui-separator' }),
+                element.url ? (React.createElement("a", { href: element.url, target: '_blank', rel: 'noreferrer' }, element.title)) : (element.title)));
+        }))));
 };
 export default Footer;

package/esm/core/InputGroup/InputGroup.js

@@ -45,8 +45,18 @@ import '@itwin/itwinui-css/css/inputs.css';
 export var InputGroup = function (props) {
     var children = props.children, _a = props.disabled, disabled = _a === void 0 ? false : _a, _b = props.displayStyle, displayStyle = _b === void 0 ? 'default' : _b, label = props.label, message = props.message, status = props.status, svgIcon = props.svgIcon, className = props.className, style = props.style, _c = props.required, required = _c === void 0 ? false : _c, rest = __rest(props, ["children", "disabled", "displayStyle", "label", "message", "status", "svgIcon", "className", "style", "required"]);
     useTheme();
-    var icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && StatusIconMap[status]());
-    return (React.createElement(InputContainer, __assign({ label: label, disabled: disabled, required: required, status: status, message: message, icon: icon ? React.cloneElement(icon, { 'aria-hidden': true }) : undefined, isLabelInline: displayStyle === 'inline', className: className, style: style }, rest),
+    var icon = function () {
+        if (svgIcon) {
+            return React.cloneElement(svgIcon, { 'aria-hidden': true });
+        }
+        if (status && message) {
+            return React.cloneElement(StatusIconMap[status](), {
+                'aria-hidden': true,
+            });
+        }
+        return undefined;
+    };
+    return (React.createElement(InputContainer, __assign({ label: label, disabled: disabled, required: required, status: status, message: message, icon: icon(), isLabelInline: displayStyle === 'inline', className: className, style: style }, rest),
         React.createElement("div", { className: 'iui-input-group' }, children)));
 };
 export default InputGroup;

package/esm/core/LabeledSelect/LabeledSelect.js

@@ -64,10 +64,16 @@ import '@itwin/itwinui-css/css/inputs.css';
 export var LabeledSelect = function (props) {
     var className = props.className, _a = props.disabled, disabled = _a === void 0 ? false : _a, label = props.label, message = props.message, status = props.status, svgIcon = props.svgIcon, _b = props.displayStyle, displayStyle = _b === void 0 ? 'default' : _b, style = props.style, selectClassName = props.selectClassName, selectStyle = props.selectStyle, _c = props.required, required = _c === void 0 ? false : _c, rest = __rest(props, ["className", "disabled", "label", "message", "status", "svgIcon", "displayStyle", "style", "selectClassName", "selectStyle", "required"]);
     useTheme();
-    var icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && StatusIconMap[status]());
-    return (React.createElement(InputContainer, { label: label, disabled: disabled, required: required, status: status, message: message, icon: displayStyle === 'default' && icon
-            ? React.cloneElement(icon, { 'aria-hidden': true })
-            : undefined, isLabelInline: displayStyle === 'inline', className: className, style: style },
+    var icon = function () {
+        if (svgIcon) {
+            return React.cloneElement(svgIcon, { 'aria-hidden': true });
+        }
+        if (status && message) {
+            return StatusIconMap[status]();
+        }
+        return undefined;
+    };
+    return (React.createElement(InputContainer, { label: label, disabled: disabled, required: required, status: status, message: message, icon: displayStyle === 'default' ? icon() : undefined, isLabelInline: displayStyle === 'inline', className: className, style: style },
         React.createElement(Select, __assign({ disabled: disabled, className: selectClassName, style: selectStyle }, rest))));
 };
 export default LabeledSelect;

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/StatusMessage/StatusMessage.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+export declare type StatusMessageProps = {
+    /**
+     * Custom icon to be displayed at the beginning.
+     * It will default to the `status` icon, if it's set.
+     */
+    startIcon?: JSX.Element;
+    /**
+     * Message content.
+     */
+    children: React.ReactNode;
+    /**
+     * Status of the message.
+     */
+    status?: 'positive' | 'warning' | 'negative';
+};
+/**
+ * Component to display icon and text below the `Combobox` component.
+ * @example
+ * <StatusMessage>This is the text</StatusMessage>
+ * <StatusMessage startIcon={<SvgStar />}>This is the text</StatusMessage>
+ */
+export declare const StatusMessage: ({ startIcon: userStartIcon, children, status, }: StatusMessageProps) => JSX.Element;
+export default StatusMessage;

package/esm/core/StatusMessage/StatusMessage.js

@@ -0,0 +1,32 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 { StatusIconMap, useTheme } from '../utils';
+import cx from 'classnames';
+/**
+ * Component to display icon and text below the `Combobox` component.
+ * @example
+ * <StatusMessage>This is the text</StatusMessage>
+ * <StatusMessage startIcon={<SvgStar />}>This is the text</StatusMessage>
+ */
+export var StatusMessage = function (_a) {
+    var userStartIcon = _a.startIcon, children = _a.children, status = _a.status;
+    useTheme();
+    var StartIcon = function () {
+        var _a;
+        var icon = userStartIcon !== null && userStartIcon !== void 0 ? userStartIcon : (status && StatusIconMap[status]());
+        if (!icon) {
+            return null;
+        }
+        return React.cloneElement(icon, {
+            className: cx('iui-input-icon', (_a = icon.props) === null || _a === void 0 ? void 0 : _a.className),
+            'aria-hidden': true,
+        });
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(StartIcon, null),
+        React.createElement("div", { className: 'iui-message' }, children)));
+};
+export default StatusMessage;

package/esm/core/StatusMessage/index.d.ts

@@ -0,0 +1,4 @@
+export { StatusMessage } from './StatusMessage';
+export type { StatusMessageProps } from './StatusMessage';
+declare const _default: "./StatusMessage";
+export default _default;

package/esm/core/StatusMessage/index.js

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

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