@itwin/itwinui-react 1.32.0 → 1.33.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [1.33.0](https://www.github.com/iTwin/iTwinUI-react/compare/v1.32.0...v1.33.0) (2022-03-07)
+
+### What's new
+
+* **ButtonGroup:** Add new `orientation` prop to allow showing vertical group ([#577](https://www.github.com/iTwin/iTwinUI-react/issues/577)) ([f6cd52f](https://www.github.com/iTwin/iTwinUI-react/commit/f6cd52f39dd139439281114d3ade99e486ab6bfb))
+* **ComboBox:** Add new `message` prop ([#554](https://www.github.com/iTwin/iTwinUI-react/issues/554)) ([8113860](https://www.github.com/iTwin/iTwinUI-react/commit/8113860499e6156d97992919204b3b8c7e46197b))
+  * This new prop can accept a string or the new `StatusMessage` component for customizing icon.
+* **Footer:** Allow overriding and removing default footer elements ([#544](https://www.github.com/iTwin/iTwinUI-react/issues/544)) ([76396a4](https://www.github.com/iTwin/iTwinUI-react/commit/76396a4cc0a88bb7680316cf4642b732729abd7a))
+
 ## [1.32.0](https://www.github.com/iTwin/iTwinUI-react/compare/v1.31.0...v1.32.0) (2022-02-25)
 
 ### What's new

package/cjs/core/ButtonGroup/ButtonGroup.d.ts

@@ -13,6 +13,8 @@ export declare type ButtonGroupProps = {
      * and returns the `ReactNode` to render.
      *
      * The placement of this button can be controlled using the `overflowPlacement` prop.
+     *
+     * *Note: this will not work with `orientation='vertical'`.*
      */
     overflowButton?: (firstOverflowingIndex: number) => React.ReactNode;
     /**
@@ -20,6 +22,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 +56,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/cjs/core/ButtonGroup/ButtonGroup.js

@@ -63,12 +63,16 @@ require("@itwin/itwinui-css/css/button.css");
  * </ButtonGroup>
  */
 exports.ButtonGroup = react_1.default.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, style = props.style, 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", "style", "overflowButton", "overflowPlacement", "orientation"]);
     var items = react_1.default.useMemo(function () { var _a; return (_a = react_1.default.Children.map(children, function (child) { return react_1.default.createElement("div", null, child); })) !== null && _a !== void 0 ? _a : []; }, [children]);
     (0, utils_1.useTheme)();
-    var _b = (0, utils_1.useOverflow)(items, !overflowButton), overflowRef = _b[0], visibleCount = _b[1];
+    var _c = (0, utils_1.useOverflow)(items, !overflowButton), overflowRef = _c[0], visibleCount = _c[1];
     var refs = (0, utils_1.useMergedRefs)(overflowRef, ref);
-    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-button-group', className), style: __assign(__assign({}, (!!overflowButton && { width: '100%' })), style), ref: refs }, rest), !!overflowButton && visibleCount < items.length ? (react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)({
+            'iui-button-group': orientation === 'horizontal',
+            'iui-button-group-vertical': orientation === 'vertical',
+        }, className), style: __assign(__assign({}, (!!overflowButton &&
+            orientation === 'horizontal' && { width: '100%' })), style), "aria-orientation": orientation, ref: refs }, rest), !!overflowButton && visibleCount < items.length ? (react_1.default.createElement(react_1.default.Fragment, null,
         overflowButton && overflowPlacement === 'start' && (react_1.default.createElement("div", null, overflowButton(visibleCount))),
         items.slice(0, visibleCount - 1),
         overflowButton && overflowPlacement === 'end' && (react_1.default.createElement("div", null, overflowButton(visibleCount))))) : (items)));

package/cjs/core/ComboBox/ComboBox.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { InputProps } from '../Input';
 import { SelectOption } from '../Select';
 import { PopoverProps, CommonProps, InputContainerProps } from '../utils';
@@ -12,6 +12,11 @@ export declare type ComboBoxProps<T> = {
      * Controlled value of ComboBox.
      */
     value?: T;
+    /**
+     * Message shown below the combobox.
+     * Use `StatusMessage` component.
+     */
+    message?: React.ReactNode;
     /**
      * Callback fired when selected value changes.
      */

package/cjs/core/ComboBox/ComboBox.js

@@ -38,6 +38,7 @@ var Typography_1 = require("../Typography");
 var utils_1 = require("../utils");
 var CaretDownSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall"));
 require("tippy.js/animations/shift-away.css");
+var StatusMessage_1 = require("../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.
@@ -52,7 +53,7 @@ require("tippy.js/animations/shift-away.css");
  * />
  */
 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, itemRenderer = props.itemRenderer, rest = __rest(props, ["options", "value", "onChange", "filterFunction", "className", "inputProps", "dropdownMenuProps", "emptyStateMessage", "itemRenderer"]);
+    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_1.default.useState(function () {
         var _a, _b;
@@ -274,7 +275,8 @@ var ComboBox = function (props) {
         itemRenderer,
         memoizedItems,
     ]);
-    return (react_1.default.createElement(utils_1.InputContainer, __assign({ className: className, isIconInline: true }, rest, { id: id }),
+    return (react_1.default.createElement(utils_1.InputContainer, __assign({ className: className, status: status, statusMessage: typeof message === 'string' ? (react_1.default.createElement(StatusMessage_1.StatusMessage, { status: status }, message)) : (react_1.default.isValidElement(message) &&
+            react_1.default.cloneElement(message, { status: status })) }, rest, { id: id }),
         react_1.default.createElement("div", { className: 'iui-input-with-icon' },
             react_1.default.createElement(utils_1.Popover, __assign({ placement: 'bottom-start', visible: isOpen, onClickOutside: function (_, _a) {
                     var _b;

package/cjs/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/cjs/core/Footer/Footer.js

@@ -54,40 +54,63 @@ 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 }))} />
  */
 var Footer = function (props) {
     var customElements = props.customElements, translatedTitles = props.translatedTitles, className = props.className, rest = __rest(props, ["customElements", "translatedTitles", "className"]);
     (0, utils_1.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_1.default.createElement("footer", __assign({ className: (0, classnames_1.default)('iui-legal-footer', className) }, rest),
-        react_1.default.createElement("ul", null,
-            react_1.default.createElement("li", null,
-                "\u00A9 ",
-                today.getFullYear(),
-                " Bentley Systems, Incorporated"),
-            elements.map(function (element, index) {
-                return (react_1.default.createElement("li", { key: element.title + "-" + index },
-                    react_1.default.createElement("span", { className: 'iui-separator' }),
-                    element.url ? (react_1.default.createElement("a", { href: element.url, target: '_blank', rel: 'noreferrer' }, element.title)) : (element.title)));
-            }))));
+        react_1.default.createElement("ul", null, elements.map(function (element, index) {
+            return (react_1.default.createElement("li", { key: element.key || element.title + "-" + index },
+                index > 0 && react_1.default.createElement("span", { className: 'iui-separator' }),
+                element.url ? (react_1.default.createElement("a", { href: element.url, target: '_blank', rel: 'noreferrer' }, element.title)) : (element.title)));
+        }))));
 };
 exports.Footer = Footer;
 exports.default = exports.Footer;

package/cjs/core/InputGroup/InputGroup.js

@@ -51,8 +51,18 @@ require("@itwin/itwinui-css/css/inputs.css");
 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"]);
     (0, utils_1.useTheme)();
-    var icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && utils_1.StatusIconMap[status]());
-    return (react_1.default.createElement(utils_1.InputContainer, __assign({ label: label, disabled: disabled, required: required, status: status, message: message, icon: icon ? react_1.default.cloneElement(icon, { 'aria-hidden': true }) : undefined, isLabelInline: displayStyle === 'inline', className: className, style: style }, rest),
+    var icon = function () {
+        if (svgIcon) {
+            return react_1.default.cloneElement(svgIcon, { 'aria-hidden': true });
+        }
+        if (status && message) {
+            return react_1.default.cloneElement(utils_1.StatusIconMap[status](), {
+                'aria-hidden': true,
+            });
+        }
+        return undefined;
+    };
+    return (react_1.default.createElement(utils_1.InputContainer, __assign({ label: label, disabled: disabled, required: required, status: status, message: message, icon: icon(), isLabelInline: displayStyle === 'inline', className: className, style: style }, rest),
         react_1.default.createElement("div", { className: 'iui-input-group' }, children)));
 };
 exports.InputGroup = InputGroup;

package/cjs/core/LabeledSelect/LabeledSelect.js

@@ -70,10 +70,16 @@ require("@itwin/itwinui-css/css/inputs.css");
 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"]);
     (0, utils_1.useTheme)();
-    var icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && utils_1.StatusIconMap[status]());
-    return (react_1.default.createElement(utils_1.InputContainer, { label: label, disabled: disabled, required: required, status: status, message: message, icon: displayStyle === 'default' && icon
-            ? react_1.default.cloneElement(icon, { 'aria-hidden': true })
-            : undefined, isLabelInline: displayStyle === 'inline', className: className, style: style },
+    var icon = function () {
+        if (svgIcon) {
+            return react_1.default.cloneElement(svgIcon, { 'aria-hidden': true });
+        }
+        if (status && message) {
+            return utils_1.StatusIconMap[status]();
+        }
+        return undefined;
+    };
+    return (react_1.default.createElement(utils_1.InputContainer, { label: label, disabled: disabled, required: required, status: status, message: message, icon: displayStyle === 'default' ? icon() : undefined, isLabelInline: displayStyle === 'inline', className: className, style: style },
         react_1.default.createElement(Select_1.Select, __assign({ disabled: disabled, className: selectClassName, style: selectStyle }, rest))));
 };
 exports.LabeledSelect = LabeledSelect;

package/cjs/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/cjs/core/StatusMessage/StatusMessage.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusMessage = 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");
+var classnames_1 = __importDefault(require("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>
+ */
+var StatusMessage = function (_a) {
+    var userStartIcon = _a.startIcon, children = _a.children, status = _a.status;
+    (0, utils_1.useTheme)();
+    var StartIcon = function () {
+        var _a;
+        var icon = userStartIcon !== null && userStartIcon !== void 0 ? userStartIcon : (status && utils_1.StatusIconMap[status]());
+        if (!icon) {
+            return null;
+        }
+        return react_1.default.cloneElement(icon, {
+            className: (0, classnames_1.default)('iui-input-icon', (_a = icon.props) === null || _a === void 0 ? void 0 : _a.className),
+            'aria-hidden': true,
+        });
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(StartIcon, null),
+        react_1.default.createElement("div", { className: 'iui-message' }, children)));
+};
+exports.StatusMessage = StatusMessage;
+exports.default = exports.StatusMessage;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusMessage = 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 StatusMessage_1 = require("./StatusMessage");
+Object.defineProperty(exports, "StatusMessage", { enumerable: true, get: function () { return StatusMessage_1.StatusMessage; } });
+exports.default = './StatusMessage';

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

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.TreeNodeExpander = exports.TreeNode = exports.Tree = exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.toaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.tableFilters = exports.Table = exports.Slider = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = void 0;
+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; } });

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/esm/core/ButtonGroup/ButtonGroup.d.ts

@@ -13,6 +13,8 @@ export declare type ButtonGroupProps = {
      * and returns the `ReactNode` to render.
      *
      * The placement of this button can be controlled using the `overflowPlacement` prop.
+     *
+     * *Note: this will not work with `orientation='vertical'`.*
      */
     overflowButton?: (firstOverflowingIndex: number) => React.ReactNode;
     /**
@@ -20,6 +22,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 +56,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,16 @@ 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, style = props.style, 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", "style", "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), 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), style: __assign(__assign({}, (!!overflowButton &&
+            orientation === 'horizontal' && { width: '100%' })), style), "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/ComboBox/ComboBox.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { InputProps } from '../Input';
 import { SelectOption } from '../Select';
 import { PopoverProps, CommonProps, InputContainerProps } from '../utils';
@@ -12,6 +12,11 @@ export declare type ComboBoxProps<T> = {
      * Controlled value of ComboBox.
      */
     value?: T;
+    /**
+     * Message shown below the combobox.
+     * Use `StatusMessage` component.
+     */
+    message?: React.ReactNode;
     /**
      * Callback fired when selected value changes.
      */

package/esm/core/ComboBox/ComboBox.js

@@ -32,6 +32,7 @@ import { Text } from '../Typography';
 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, itemRenderer = props.itemRenderer, rest = __rest(props, ["options", "value", "onChange", "filterFunction", "className", "inputProps", "dropdownMenuProps", "emptyStateMessage", "itemRenderer"]);
+    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;
@@ -268,7 +269,8 @@ export var ComboBox = function (props) {
         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/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/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/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';

package/esm/core/index.js

@@ -34,6 +34,7 @@ export { RadioTile, RadioTileGroup } from './RadioTiles';
 export { Select } from './Select';
 export { SideNavigation, SidenavButton, SidenavSubmenu, SidenavSubmenuHeader, } from './SideNavigation';
 export { Slider } from './Slider';
+export { StatusMessage } from './StatusMessage';
 export { Table, tableFilters, FilterButtonBar, DefaultCell, EditableCell, TablePaginator, } from './Table';
 export { Tag, TagContainer } from './Tag';
 export { Textarea } from './Textarea';

package/esm/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/esm/core/utils/components/InputContainer.js

@@ -33,22 +33,23 @@ import cx from 'classnames';
 export 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.createElement(Element, __assign({ className: cx('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.createElement("div", { className: cx('iui-label', {
                 'iui-required': required,
             }) }, label)),
         children,
-        icon &&
-            React.cloneElement(icon, {
-                className: cx('iui-input-icon', (_b = icon.props) === null || _b === void 0 ? void 0 : _b.className),
-            }),
-        message && !isLabelInline && (React.createElement("div", { className: 'iui-message' }, message))));
+        statusMessage ? (statusMessage) : (React.createElement(React.Fragment, null,
+            icon &&
+                React.cloneElement(icon, {
+                    className: cx('iui-input-icon', (_b = icon.props) === null || _b === void 0 ? void 0 : _b.className),
+                }),
+            message && !isLabelInline && (React.createElement("div", { className: 'iui-message' }, message))))));
 };

package/package.json

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