@itwin/itwinui-react 1.18.0 → 1.19.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [1.19.0](https://www.github.com/iTwin/iTwinUI-react/compare/v1.18.0...v1.19.0) (2021-09-21)
+
+### What's new
+
+* **LabeledInput** and **LabeledTextarea**: Add new `iconDisplayStyle` prop to allow hybrid layouts. ([#309](https://www.github.com/iTwin/iTwinUI-react/issues/309)) ([45b82c2](https://www.github.com/iTwin/iTwinUI-react/commit/45b82c2232c09c4b54b2db14eb53bb3be3bd276a))
+* **Toasts**: Add new `animateOutTo` prop for improved exit animation. ([#316](https://www.github.com/iTwin/iTwinUI-react/issues/316)) ([886efff](https://www.github.com/iTwin/iTwinUI-react/commit/886efff098d0cee98d0bcd9bd096c20f8f51d931))
+
 ## [1.18.0](https://www.github.com/iTwin/iTwinUI-react/compare/v1.17.0...v1.18.0) (2021-09-13)
 
 ### What's new

package/cjs/core/Alert/Alert.js

@@ -48,9 +48,9 @@ var common_1 = require("../utils/common");
  */
 var Alert = function (props) {
     var children = props.children, className = props.className, _a = props.type, type = _a === void 0 ? 'informational' : _a, clickableText = props.clickableText, onClick = props.onClick, onClose = props.onClose, style = props.style, _b = props.isSticky, isSticky = _b === void 0 ? false : _b, rest = __rest(props, ["children", "className", "type", "clickableText", "onClick", "onClose", "style", "isSticky"]);
-    useTheme_1.useTheme();
+    (0, useTheme_1.useTheme)();
     var StatusIcon = common_1.StatusIconMap[type];
-    return (react_1.default.createElement("div", __assign({ className: classnames_1.default('iui-alert', "iui-" + type, { 'iui-sticky': isSticky }, className), style: style }, rest),
+    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-alert', "iui-" + type, { 'iui-sticky': isSticky }, className), style: style }, rest),
         react_1.default.createElement(StatusIcon, { className: 'iui-icon' }),
         react_1.default.createElement("span", { className: 'iui-message' },
             children,

package/cjs/core/Badge/Badge.js

@@ -52,7 +52,7 @@ var getBadgeColorValue = function (color) {
         case 'warning':
             return '#F9D7AB';
         default:
-            return common_1.isSoftBackground(color) ? common_1.SoftBackgrounds[color] : color;
+            return (0, common_1.isSoftBackground)(color) ? common_1.SoftBackgrounds[color] : color;
     }
 };
 /**
@@ -65,11 +65,11 @@ var getBadgeColorValue = function (color) {
 var Badge = function (props) {
     var _a, _b, _c;
     var backgroundColor = props.backgroundColor, style = props.style, className = props.className, children = props.children, rest = __rest(props, ["backgroundColor", "style", "className", "children"]);
-    useTheme_1.useTheme();
+    (0, useTheme_1.useTheme)();
     var _style = backgroundColor &&
-        ((_c = (_b = (_a = common_1.getWindow()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, "--badge-color: " + backgroundColor))
+        ((_c = (_b = (_a = (0, common_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, "--badge-color: " + backgroundColor))
         ? __assign({ '--badge-color': getBadgeColorValue(backgroundColor) }, style) : __assign({ backgroundColor: getBadgeColorValue(backgroundColor) }, style);
-    return (react_1.default.createElement("span", __assign({ className: classnames_1.default('iui-badge', className), style: _style }, rest), children));
+    return (react_1.default.createElement("span", __assign({ className: (0, classnames_1.default)('iui-badge', className), style: _style }, rest), children));
 };
 exports.Badge = Badge;
 exports.default = exports.Badge;

package/cjs/core/Breadcrumbs/Breadcrumbs.js

@@ -61,15 +61,15 @@ var useOverflow_1 = require("../utils/hooks/useOverflow");
  */
 exports.Breadcrumbs = react_1.default.forwardRef(function (props, ref) {
     var items = props.children, _a = props.currentIndex, currentIndex = _a === void 0 ? items.length - 1 : _a, separator = props.separator, className = props.className, rest = __rest(props, ["children", "currentIndex", "separator", "className"]);
-    useTheme_1.useTheme();
-    var _b = useOverflow_1.useOverflow(items), overflowRef = _b[0], visibleCount = _b[1];
-    var refs = useMergedRefs_1.useMergedRefs(overflowRef, ref);
+    (0, useTheme_1.useTheme)();
+    var _b = (0, useOverflow_1.useOverflow)(items), overflowRef = _b[0], visibleCount = _b[1];
+    var refs = (0, useMergedRefs_1.useMergedRefs)(overflowRef, ref);
     var Separator = function () { return (react_1.default.createElement("li", { className: 'iui-breadcrumbs-separator', "aria-hidden": true }, separator !== null && separator !== void 0 ? separator : react_1.default.createElement(ChevronRight_1.default, null))); };
     var ListItem = function (_a) {
         var _b;
         var index = _a.index;
         var item = items[index];
-        return (react_1.default.createElement("li", { className: classnames_1.default('iui-breadcrumbs-item', {
+        return (react_1.default.createElement("li", { className: (0, classnames_1.default)('iui-breadcrumbs-item', {
                 'iui-current': currentIndex === index,
             }) }, react_1.default.isValidElement(item)
             ? react_1.default.cloneElement(item, {
@@ -79,7 +79,7 @@ exports.Breadcrumbs = react_1.default.forwardRef(function (props, ref) {
             })
             : item));
     };
-    return (react_1.default.createElement("nav", __assign({ className: classnames_1.default('iui-breadcrumbs', className), ref: refs, "aria-label": 'Breadcrumb' }, rest),
+    return (react_1.default.createElement("nav", __assign({ className: (0, classnames_1.default)('iui-breadcrumbs', className), ref: refs, "aria-label": 'Breadcrumb' }, rest),
         react_1.default.createElement("ol", { className: 'iui-breadcrumbs-list' },
             visibleCount > 1 && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(ListItem, { index: 0 }),

package/cjs/core/ButtonGroup/ButtonGroup.js

@@ -68,9 +68,9 @@ var ButtonGroup = function (props) {
     var items = react_1.default.useMemo(function () { return react_1.default.Children.toArray(children); }, [
         children,
     ]);
-    useTheme_1.useTheme();
-    var _a = useOverflow_1.useOverflow(items, !overflowButton), overflowRef = _a[0], visibleCount = _a[1];
-    return (react_1.default.createElement("div", __assign({ className: classnames_1.default('iui-button-group', className), style: __assign(__assign({}, (!!overflowButton && { width: '100%' })), style), ref: overflowRef }, rest), !!overflowButton && visibleCount < items.length ? (react_1.default.createElement(react_1.default.Fragment, null,
+    (0, useTheme_1.useTheme)();
+    var _a = (0, useOverflow_1.useOverflow)(items, !overflowButton), overflowRef = _a[0], visibleCount = _a[1];
+    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-button-group', className), style: __assign(__assign({}, (!!overflowButton && { width: '100%' })), style), ref: overflowRef }, rest), !!overflowButton && visibleCount < items.length ? (react_1.default.createElement(react_1.default.Fragment, null,
         items.slice(0, visibleCount - 1),
         overflowButton(visibleCount))) : (children)));
 };

package/cjs/core/Buttons/Button/Button.js

@@ -46,19 +46,19 @@ require("@itwin/itwinui-css/css/button.css");
 exports.Button = react_1.default.forwardRef(function (props, ref) {
     var _a;
     var children = props.children, className = props.className, size = props.size, style = props.style, _b = props.styleType, styleType = _b === void 0 ? 'default' : _b, _c = props.type, type = _c === void 0 ? 'button' : _c, startIcon = props.startIcon, endIcon = props.endIcon, rest = __rest(props, ["children", "className", "size", "style", "styleType", "type", "startIcon", "endIcon"]);
-    useTheme_1.useTheme();
-    return (react_1.default.createElement("button", __assign({ ref: ref, className: classnames_1.default('iui-button', (_a = {},
+    (0, useTheme_1.useTheme)();
+    return (react_1.default.createElement("button", __assign({ ref: ref, className: (0, classnames_1.default)('iui-button', (_a = {},
             _a["iui-" + size] = !!size,
             _a["iui-" + styleType] = styleType !== 'default',
             _a), className), style: style, type: type }, rest),
         startIcon &&
             react_1.default.cloneElement(startIcon, {
-                className: classnames_1.default('iui-icon', startIcon.props.className),
+                className: (0, classnames_1.default)('iui-icon', startIcon.props.className),
             }),
         children && react_1.default.createElement("span", { className: 'iui-label' }, children),
         endIcon &&
             react_1.default.cloneElement(endIcon, {
-                className: classnames_1.default('iui-icon', endIcon.props.className),
+                className: (0, classnames_1.default)('iui-icon', endIcon.props.className),
             })));
 });
 exports.default = exports.Button;

package/cjs/core/Buttons/DropdownButton/DropdownButton.js

@@ -50,17 +50,17 @@ require("@itwin/itwinui-css/css/button.css");
  */
 exports.DropdownButton = react_1.default.forwardRef(function (props, ref) {
     var menuItems = props.menuItems, className = props.className, size = props.size, styleType = props.styleType, children = props.children, rest = __rest(props, ["menuItems", "className", "size", "styleType", "children"]);
-    useTheme_1.useTheme();
+    (0, useTheme_1.useTheme)();
     var _a = react_1.default.useState(false), isMenuOpen = _a[0], setIsMenuOpen = _a[1];
     var _b = react_1.default.useState(0), menuWidth = _b[0], setMenuWidth = _b[1];
     var buttonRef = react_1.default.useRef(null);
-    var refs = useMergedRefs_1.useMergedRefs(ref, buttonRef);
+    var refs = (0, useMergedRefs_1.useMergedRefs)(ref, buttonRef);
     react_1.default.useEffect(function () {
         if (buttonRef.current) {
             setMenuWidth(buttonRef.current.offsetWidth);
         }
     }, [children, size, styleType]);
     return (react_1.default.createElement(DropdownMenu_1.DropdownMenu, { menuItems: menuItems, style: { minWidth: menuWidth }, onShow: function () { return setIsMenuOpen(true); }, onHide: function () { return setIsMenuOpen(false); } },
-        react_1.default.createElement(Button_1.Button, __assign({ className: classnames_1.default('iui-dropdown', className), size: size, styleType: styleType, endIcon: isMenuOpen ? (react_1.default.createElement(CaretUpSmall_1.default, { "aria-hidden": true })) : (react_1.default.createElement(CaretDownSmall_1.default, { "aria-hidden": true })), ref: refs, "aria-label": 'Dropdown' }, rest), children)));
+        react_1.default.createElement(Button_1.Button, __assign({ className: (0, classnames_1.default)('iui-dropdown', className), size: size, styleType: styleType, endIcon: isMenuOpen ? (react_1.default.createElement(CaretUpSmall_1.default, { "aria-hidden": true })) : (react_1.default.createElement(CaretDownSmall_1.default, { "aria-hidden": true })), ref: refs, "aria-label": 'Dropdown' }, rest), children)));
 });
 exports.default = exports.DropdownButton;

package/cjs/core/Buttons/IconButton/IconButton.js

@@ -43,13 +43,13 @@ require("@itwin/itwinui-css/css/button.css");
 exports.IconButton = react_1.default.forwardRef(function (props, ref) {
     var _a;
     var isActive = props.isActive, children = props.children, _b = props.styleType, styleType = _b === void 0 ? 'default' : _b, size = props.size, _c = props.type, type = _c === void 0 ? 'button' : _c, className = props.className, rest = __rest(props, ["isActive", "children", "styleType", "size", "type", "className"]);
-    useTheme_1.useTheme();
-    return (react_1.default.createElement("button", __assign({ ref: ref, className: classnames_1.default('iui-button', (_a = {},
+    (0, useTheme_1.useTheme)();
+    return (react_1.default.createElement("button", __assign({ ref: ref, className: (0, classnames_1.default)('iui-button', (_a = {},
             _a["iui-" + size] = !!size,
             _a["iui-" + styleType] = styleType !== 'default',
             _a['iui-active'] = isActive,
             _a), className), type: type }, rest), react_1.default.cloneElement(children, {
-        className: classnames_1.default('iui-icon', children.props.className),
+        className: (0, classnames_1.default)('iui-icon', children.props.className),
         'aria-hidden': true,
     })));
 });

package/cjs/core/Buttons/IdeasButton/IdeasButton.js

@@ -41,7 +41,7 @@ var Button_1 = require("../Button");
  */
 exports.IdeasButton = react_1.default.forwardRef(function (props, ref) {
     var _a = props.feedbackLabel, feedbackLabel = _a === void 0 ? 'Feedback' : _a, onClick = props.onClick, rest = __rest(props, ["feedbackLabel", "onClick"]);
-    useTheme_1.useTheme();
+    (0, useTheme_1.useTheme)();
     return (react_1.default.createElement(Button_1.Button, __assign({ ref: ref, className: 'iui-idea', onClick: onClick, startIcon: react_1.default.createElement(SmileyHappy_1.default, { "aria-hidden": true }) }, rest), feedbackLabel));
 });
 exports.default = exports.IdeasButton;

package/cjs/core/Buttons/SplitButton/SplitButton.js

@@ -51,7 +51,7 @@ require("@itwin/itwinui-css/css/button.css");
  */
 var SplitButton = function (props) {
     var onClick = props.onClick, menuItems = props.menuItems, className = props.className, _a = props.menuPlacement, menuPlacement = _a === void 0 ? 'bottom-end' : _a, _b = props.styleType, styleType = _b === void 0 ? 'default' : _b, size = props.size, children = props.children, style = props.style, title = props.title, rest = __rest(props, ["onClick", "menuItems", "className", "menuPlacement", "styleType", "size", "children", "style", "title"]);
-    useTheme_1.useTheme();
+    (0, useTheme_1.useTheme)();
     var _c = react_1.default.useState(false), isMenuOpen = _c[0], setIsMenuOpen = _c[1];
     var _d = react_1.default.useState(0), menuWidth = _d[0], setMenuWidth = _d[1];
     var ref = react_1.default.useRef(null);
@@ -60,7 +60,7 @@ var SplitButton = function (props) {
             setMenuWidth(ref.current.offsetWidth);
         }
     }, [children, size]);
-    return (react_1.default.createElement("span", { className: classnames_1.default(className, 'iui-button-split-menu', {
+    return (react_1.default.createElement("span", { className: (0, classnames_1.default)(className, 'iui-button-split-menu', {
             'iui-disabled': props.disabled,
         }), style: style, title: title, ref: ref },
         react_1.default.createElement(Button_1.Button, __assign({ styleType: styleType, size: size, onClick: onClick }, rest), children),

package/cjs/core/Checkbox/Checkbox.js

@@ -49,9 +49,9 @@ require("@itwin/itwinui-css/css/inputs.css");
 exports.Checkbox = react_1.default.forwardRef(function (props, ref) {
     var _a;
     var className = props.className, _b = props.disabled, disabled = _b === void 0 ? false : _b, _c = props.indeterminate, indeterminate = _c === void 0 ? false : _c, label = props.label, status = props.status, setFocus = props.setFocus, _d = props.isLoading, isLoading = _d === void 0 ? false : _d, style = props.style, checkmarkClassName = props.checkmarkClassName, checkmarkStyle = props.checkmarkStyle, rest = __rest(props, ["className", "disabled", "indeterminate", "label", "status", "setFocus", "isLoading", "style", "checkmarkClassName", "checkmarkStyle"]);
-    useTheme_1.useTheme();
+    (0, useTheme_1.useTheme)();
     var inputElementRef = react_1.default.useRef(null);
-    var refs = useMergedRefs_1.useMergedRefs(inputElementRef, ref);
+    var refs = (0, useMergedRefs_1.useMergedRefs)(inputElementRef, ref);
     react_1.default.useEffect(function () {
         if (inputElementRef.current && setFocus) {
             inputElementRef.current.focus();
@@ -65,18 +65,18 @@ exports.Checkbox = react_1.default.forwardRef(function (props, ref) {
                 : inputElementRef.current.checked;
         }
     });
-    return (react_1.default.createElement("label", { className: classnames_1.default('iui-checkbox', (_a = {
+    return (react_1.default.createElement("label", { className: (0, classnames_1.default)('iui-checkbox', (_a = {
                 'iui-disabled': disabled
             },
             _a["iui-" + status] = !!status,
             _a['iui-loading'] = isLoading,
             _a), className), style: style },
         react_1.default.createElement("input", __assign({ disabled: disabled || isLoading, type: 'checkbox', ref: refs }, rest)),
-        react_1.default.createElement("span", { className: classnames_1.default('iui-checkbox-checkmark', checkmarkClassName), style: checkmarkStyle },
+        react_1.default.createElement("span", { className: (0, classnames_1.default)('iui-checkbox-checkmark', checkmarkClassName), style: checkmarkStyle },
             isLoading && react_1.default.createElement(ProgressIndicators_1.ProgressRadial, { indeterminate: true }),
             !isLoading && (react_1.default.createElement("svg", { viewBox: '0 0 16 16', "aria-hidden": 'true', focusable: 'false' },
                 react_1.default.createElement("path", { className: 'iui-check', d: 'M6,14L0,8l2-2l4,4l8-8l2,2L6,14z' }),
                 react_1.default.createElement("path", { className: 'iui-check-partial', d: 'm1 6.5h14v3h-14z' })))),
-        label && react_1.default.createElement("div", { className: 'iui-label' }, label)));
+        label && react_1.default.createElement("span", { className: 'iui-label' }, label)));
 });
 exports.default = exports.Checkbox;

package/cjs/core/DatePicker/DatePicker.js

@@ -128,7 +128,7 @@ exports.generateLocalizedStrings = generateLocalizedStrings;
 var DatePicker = function (props) {
     var _a, _b, _c;
     var date = props.date, onChange = props.onChange, localizedNames = props.localizedNames, className = props.className, style = props.style, _d = props.setFocus, setFocus = _d === void 0 ? false : _d, _e = props.showTime, showTime = _e === void 0 ? false : _e, _f = props.use12Hours, use12Hours = _f === void 0 ? false : _f, precision = props.precision, hourStep = props.hourStep, minuteStep = props.minuteStep, secondStep = props.secondStep, rest = __rest(props, ["date", "onChange", "localizedNames", "className", "style", "setFocus", "showTime", "use12Hours", "precision", "hourStep", "minuteStep", "secondStep"]);
-    useTheme_1.useTheme();
+    (0, useTheme_1.useTheme)();
     var monthNames = (_a = localizedNames === null || localizedNames === void 0 ? void 0 : localizedNames.months) !== null && _a !== void 0 ? _a : defaultMonths;
     var shortDays = (_b = localizedNames === null || localizedNames === void 0 ? void 0 : localizedNames.shortDays) !== null && _b !== void 0 ? _b : defaultShortDays;
     var longDays = (_c = localizedNames === null || localizedNames === void 0 ? void 0 : localizedNames.days) !== null && _c !== void 0 ? _c : defaultLongDays;
@@ -253,7 +253,7 @@ var DatePicker = function (props) {
                 break;
         }
     };
-    return (react_1.default.createElement("div", __assign({ className: classnames_1.default('iui-date-picker', className), style: style }, rest),
+    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-date-picker', className), style: style }, rest),
         react_1.default.createElement("div", { className: 'iui-calendar' },
             react_1.default.createElement("div", { className: 'iui-header' },
                 react_1.default.createElement("div", { className: 'iui-month-year' },
@@ -269,7 +269,7 @@ var DatePicker = function (props) {
             react_1.default.createElement("div", { className: 'iui-dates', onKeyDown: handleCalendarKeyDown, role: 'listbox' }, weeks.map(function (weekDays, weekIndex) {
                 return (react_1.default.createElement("div", { key: "week-" + displayedMonthIndex + "-" + weekIndex, className: 'iui-week' }, weekDays.map(function (weekDay, dayIndex) {
                     var dateValue = weekDay.getDate();
-                    return (react_1.default.createElement("div", { key: "day-" + displayedMonthIndex + "-" + dayIndex, className: classnames_1.default('iui-date', {
+                    return (react_1.default.createElement("div", { key: "day-" + displayedMonthIndex + "-" + dayIndex, className: (0, classnames_1.default)('iui-date', {
                             'iui-outside-month': weekDay.getMonth() !== displayedMonthIndex,
                             'iui-today': isSameDay(weekDay, new Date()),
                             'iui-selected': isSameDay(weekDay, selectedDay),

package/cjs/core/DropdownMenu/DropdownMenu.js

@@ -73,9 +73,9 @@ var DropdownMenu = function (props) {
         (_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         onHide === null || onHide === void 0 ? void 0 : onHide(instance);
     }, [onHide]);
-    useTheme_1.useTheme();
+    (0, useTheme_1.useTheme)();
     return (react_1.default.createElement(Popover_1.Popover, __assign({ content: react_1.default.createElement(Menu_1.Menu, { className: className, style: style, role: role, id: id }, react_1.default.useMemo(function () { return menuItems(close); }, [menuItems, close])), visible: trigger === undefined ? isVisible : undefined, onClickOutside: close, placement: placement, onShow: onShowHandler, onHide: onHideHandler, trigger: visible === undefined ? trigger : undefined }, rest), react_1.default.cloneElement(children, {
-        ref: useMergedRefs_1.mergeRefs(targetRef, props.children.ref),
+        ref: (0, useMergedRefs_1.mergeRefs)(targetRef, props.children.ref),
         onClick: function (args) {
             var _a, _b;
             trigger === undefined && (isVisible ? close() : open());

package/cjs/core/ErrorPage/ErrorPage.js

@@ -48,7 +48,7 @@ require("@itwin/itwinui-css/css/non-ideal-state.css");
  */
 var ErrorPage = function (props) {
     var errorType = props.errorType, errorName = props.errorName, errorMessage = props.errorMessage, primaryButtonHandle = props.primaryButtonHandle, primaryButtonLabel = props.primaryButtonLabel, secondaryButtonHandle = props.secondaryButtonHandle, secondaryButtonLabel = props.secondaryButtonLabel, translatedErrorMessages = props.translatedErrorMessages, rest = __rest(props, ["errorType", "errorName", "errorMessage", "primaryButtonHandle", "primaryButtonLabel", "secondaryButtonHandle", "secondaryButtonLabel", "translatedErrorMessages"]);
-    useTheme_1.useTheme();
+    (0, useTheme_1.useTheme)();
     var defaultErrorMessages = __assign({ badGateway: 'Bad gateway', error: 'Error', forbidden: 'Forbidden', internalServerError: 'Internal server error', pageNotFound: 'Page not found', serviceUnavailable: 'Service unavailable', unauthorized: 'Unauthorized' }, translatedErrorMessages);
     function getErrorIcon() {
         switch (errorType) {

package/cjs/core/ExpandableBlock/ExpandableBlock.js

@@ -49,7 +49,7 @@ var common_1 = require("../utils/common");
 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, rest = __rest(props, ["caption", "children", "className", "title", "onToggle", "style", "isExpanded", "endIcon", "status"]);
-    useTheme_1.useTheme();
+    (0, useTheme_1.useTheme)();
     var icon = endIcon !== null && endIcon !== void 0 ? endIcon : (status && common_1.StatusIconMap[status]());
     var _c = react_1.default.useState(isExpanded), expanded = _c[0], setExpanded = _c[1];
     react_1.default.useEffect(function () {
@@ -67,7 +67,7 @@ var ExpandableBlock = function (props) {
             handleToggle();
         }
     };
-    return (react_1.default.createElement("div", __assign({ className: classnames_1.default('iui-expandable-block', { 'iui-with-caption': !!caption }, { 'iui-expanded': expanded }, className), style: style }, rest),
+    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-expandable-block', { 'iui-with-caption': !!caption }, { 'iui-expanded': expanded }, className), style: style }, rest),
         react_1.default.createElement("div", { "aria-expanded": expanded, className: 'iui-header', tabIndex: 0, onClick: handleToggle, onKeyDown: onKeyDown },
             react_1.default.createElement(ChevronRight_1.default, { className: 'iui-icon', "aria-hidden": true }),
             react_1.default.createElement("span", { className: 'iui-expandable-block-label' },
@@ -75,7 +75,7 @@ var ExpandableBlock = function (props) {
                 caption && react_1.default.createElement("div", { className: 'iui-caption' }, caption)),
             icon &&
                 react_1.default.cloneElement(icon, {
-                    className: classnames_1.default('iui-status-icon', (_a = {}, _a["iui-" + status] = !!status, _a), icon.props.className),
+                    className: (0, classnames_1.default)('iui-status-icon', (_a = {}, _a["iui-" + status] = !!status, _a), icon.props.className),
                 })),
         react_1.default.createElement(react_transition_group_1.CSSTransition, { in: expanded, timeout: 200, unmountOnExit: true, onEnter: function (node) { return (node.style.height = "0px"); }, onEntering: function (node) {
                 return (node.style.height = expandedHeight.current + "px");

package/cjs/core/Fieldset/Fieldset.js

@@ -47,8 +47,8 @@ require("@itwin/itwinui-css/css/fieldset.css");
  */
 var Fieldset = function (props) {
     var children = props.children, className = props.className, disabled = props.disabled, legend = props.legend, rest = __rest(props, ["children", "className", "disabled", "legend"]);
-    useTheme_1.useTheme();
-    return (react_1.default.createElement("fieldset", __assign({ className: classnames_1.default('iui-fieldset', className), disabled: disabled }, rest),
+    (0, useTheme_1.useTheme)();
+    return (react_1.default.createElement("fieldset", __assign({ className: (0, classnames_1.default)('iui-fieldset', className), disabled: disabled }, rest),
         legend && react_1.default.createElement("legend", null, legend),
         disabled
             ? react_1.default.Children.map(children, function (child) {

package/cjs/core/FileUpload/FileUpload.js

@@ -44,10 +44,10 @@ require("@itwin/itwinui-css/css/file-upload.css");
  */
 exports.FileUpload = react_1.default.forwardRef(function (props, ref) {
     var dragContent = props.dragContent, children = props.children, onFileDropped = props.onFileDropped, className = props.className, rest = __rest(props, ["dragContent", "children", "onFileDropped", "className"]);
-    useTheme_1.useTheme();
+    (0, useTheme_1.useTheme)();
     var _a = react_1.default.useState(false), isDragActive = _a[0], setIsDragActive = _a[1];
     var fileUploadRef = react_1.default.useRef(null);
-    var refs = useMergedRefs_1.useMergedRefs(fileUploadRef, ref);
+    var refs = (0, useMergedRefs_1.useMergedRefs)(fileUploadRef, ref);
     var onDragOverHandler = function (e) {
         e.preventDefault();
         e.stopPropagation();
@@ -80,7 +80,7 @@ exports.FileUpload = react_1.default.forwardRef(function (props, ref) {
             onFileDropped((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files);
         }
     };
-    return (react_1.default.createElement("div", __assign({ className: classnames_1.default('iui-file-upload', { 'iui-drag': isDragActive }, className), onDragEnter: onDragEnterHandler, onDragOver: onDragOverHandler, onDragLeave: onDragLeaveHandler, onDrop: onDropHandler, ref: refs }, rest),
+    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-file-upload', { 'iui-drag': isDragActive }, className), onDragEnter: onDragEnterHandler, onDragOver: onDragOverHandler, onDragLeave: onDragLeaveHandler, onDrop: onDropHandler, ref: refs }, rest),
         dragContent ? children : react_1.default.createElement("div", { className: 'iui-content' }, children),
         dragContent && react_1.default.createElement("div", { className: 'iui-content' }, dragContent)));
 });

package/cjs/core/FileUpload/FileUploadTemplate.js

@@ -20,7 +20,7 @@ var Upload_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/Upl
  */
 var FileUploadTemplate = function (props) {
     var onChange = props.onChange, _a = props.acceptMultiple, acceptMultiple = _a === void 0 ? true : _a, acceptType = props.acceptType, _b = props.label, label = _b === void 0 ? 'Choose a file' : _b, _c = props.subtitle, subtitle = _c === void 0 ? 'or drag & drop it here.' : _c, children = props.children;
-    useTheme_1.useTheme();
+    (0, useTheme_1.useTheme)();
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(Upload_1.default, { className: 'iui-icon', "aria-hidden": true }),
         react_1.default.createElement("div", { className: 'iui-template-text' },

package/cjs/core/Footer/Footer.js

@@ -21,10 +21,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
@@ -55,7 +59,7 @@ var footerTranslations = {
  */
 var Footer = function (props) {
     var customElements = props.customElements, translatedTitles = props.translatedTitles, className = props.className, rest = __rest(props, ["customElements", "translatedTitles", "className"]);
-    useTheme_1.useTheme();
+    (0, useTheme_1.useTheme)();
     var today = new Date();
     var titles = __assign(__assign({}, footerTranslations), translatedTitles);
     var defaultElements = [
@@ -72,8 +76,8 @@ var Footer = function (props) {
         { title: titles.legalNotices, url: 'https://connect.bentley.com/Legal' },
     ];
     var elements = customElements
-        ? __spreadArray(__spreadArray([], defaultElements), customElements) : defaultElements;
-    return (react_1.default.createElement("footer", __assign({ className: classnames_1.default('iui-legal-footer', className) }, rest),
+        ? __spreadArray(__spreadArray([], defaultElements, true), customElements, true) : defaultElements;
+    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 ",

package/cjs/core/Header/Header.js

@@ -71,9 +71,9 @@ var defaultTranslations = {
  */
 var Header = function (props) {
     var appLogo = props.appLogo, breadcrumbs = props.breadcrumbs, _a = props.isSlim, isSlim = _a === void 0 ? false : _a, actions = props.actions, userIcon = props.userIcon, menuItems = props.menuItems, translatedStrings = props.translatedStrings, className = props.className, children = props.children, rest = __rest(props, ["appLogo", "breadcrumbs", "isSlim", "actions", "userIcon", "menuItems", "translatedStrings", "className", "children"]);
-    useTheme_1.useTheme();
+    (0, useTheme_1.useTheme)();
     var headerTranslations = __assign(__assign({}, defaultTranslations), translatedStrings);
-    return (react_1.default.createElement("header", __assign({ className: classnames_1.default('iui-page-header', { 'iui-slim': isSlim }, className) }, rest),
+    return (react_1.default.createElement("header", __assign({ className: (0, classnames_1.default)('iui-page-header', { 'iui-slim': isSlim }, className) }, rest),
         react_1.default.createElement("div", { className: 'iui-left' },
             appLogo,
             breadcrumbs && react_1.default.createElement("div", { className: 'iui-divider' }),

package/cjs/core/Header/HeaderBreadcrumbs.js

@@ -21,10 +21,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
@@ -51,11 +55,11 @@ require("@itwin/itwinui-css/css/header.css");
  */
 var HeaderBreadcrumbs = function (props) {
     var items = props.items, rest = __rest(props, ["items"]);
-    useTheme_1.useTheme();
-    return (react_1.default.createElement("nav", __assign({ "aria-label": 'breadcrumbs' }, rest), items.reduce(function (previous, current, index) { return __spreadArray(__spreadArray([], previous), [
+    (0, useTheme_1.useTheme)();
+    return (react_1.default.createElement("nav", __assign({ "aria-label": 'breadcrumbs' }, rest), items.reduce(function (previous, current, index) { return __spreadArray(__spreadArray([], previous, true), [
         current,
         index !== items.length - 1 && (react_1.default.createElement(ChevronRight_1.default, { key: "chevron" + index, "aria-hidden": true, className: 'iui-chevron' })),
-    ]); }, [])));
+    ], false); }, [])));
 };
 exports.HeaderBreadcrumbs = HeaderBreadcrumbs;
 exports.default = exports.HeaderBreadcrumbs;

package/cjs/core/Header/HeaderButton.js

@@ -53,12 +53,12 @@ var isDropdownButton = function (props) {
  */
 var HeaderButton = function (props) {
     var name = props.name, description = props.description, _a = props.isActive, isActive = _a === void 0 ? false : _a, className = props.className, startIcon = props.startIcon, menuItems = props.menuItems, rest = __rest(props, ["name", "description", "isActive", "className", "startIcon", "menuItems"]);
-    useTheme_1.useTheme();
+    (0, useTheme_1.useTheme)();
     var buttonProps = __assign(__assign({ startIcon: react_1.default.isValidElement(startIcon)
             ? react_1.default.cloneElement(startIcon, {
-                className: classnames_1.default('iui-header-button-icon', startIcon.props.className),
+                className: (0, classnames_1.default)('iui-header-button-icon', startIcon.props.className),
             })
-            : undefined, styleType: 'borderless', className: classnames_1.default({
+            : undefined, styleType: 'borderless', className: (0, classnames_1.default)({
             'iui-header-button': !isSplitButton(props),
             'iui-header-split-button': isSplitButton(props),
             'iui-active': isActive,

package/cjs/core/Header/HeaderLogo.js

@@ -51,11 +51,11 @@ var HeaderLogo = function (props) {
             onClick();
         }
     };
-    useTheme_1.useTheme();
-    return (react_1.default.createElement("div", __assign({ className: classnames_1.default('iui-header-logo', className), role: onClick && 'button', tabIndex: onClick && 0, onKeyDown: keyDownHandler, onClick: onClick }, rest),
+    (0, useTheme_1.useTheme)();
+    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-header-logo', className), role: onClick && 'button', tabIndex: onClick && 0, onKeyDown: keyDownHandler, onClick: onClick }, rest),
         react_1.default.isValidElement(logo)
             ? react_1.default.cloneElement(logo, {
-                className: classnames_1.default('iui-header-button-icon', logo.props.className),
+                className: (0, classnames_1.default)('iui-header-button-icon', logo.props.className),
             })
             : undefined,
         children && react_1.default.createElement("span", { className: 'iui-label' }, children)));

package/cjs/core/Input/Input.js

@@ -45,14 +45,14 @@ require("@itwin/itwinui-css/css/inputs.css");
 exports.Input = react_1.default.forwardRef(function (props, ref) {
     var _a;
     var _b = props.setFocus, setFocus = _b === void 0 ? false : _b, size = props.size, className = props.className, rest = __rest(props, ["setFocus", "size", "className"]);
-    useTheme_1.useTheme();
+    (0, useTheme_1.useTheme)();
     var inputRef = react_1.default.useRef(null);
-    var refs = useMergedRefs_1.useMergedRefs(inputRef, ref);
+    var refs = (0, useMergedRefs_1.useMergedRefs)(inputRef, ref);
     react_1.default.useEffect(function () {
         if (inputRef.current && setFocus) {
             inputRef.current.focus();
         }
     }, [setFocus]);
-    return (react_1.default.createElement("input", __assign({ className: classnames_1.default('iui-input', (_a = {}, _a["iui-" + size] = !!size, _a), className), ref: refs }, rest)));
+    return (react_1.default.createElement("input", __assign({ className: (0, classnames_1.default)('iui-input', (_a = {}, _a["iui-" + size] = !!size, _a), className), ref: refs }, rest)));
 });
 exports.default = exports.Input;

package/cjs/core/InputGroup/InputGroup.js

@@ -30,10 +30,10 @@ exports.InputGroup = 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 classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
 var common_1 = require("../utils/common");
 var useTheme_1 = require("../utils/hooks/useTheme");
+var InputContainer_1 = require("../utils/InputContainer");
 require("@itwin/itwinui-css/css/inputs.css");
 /**
  * Group Checkbox/Radio components together
@@ -51,23 +51,11 @@ require("@itwin/itwinui-css/css/inputs.css");
  * </InputGroup>
  */
 var InputGroup = function (props) {
-    var _a;
-    var children = props.children, _b = props.disabled, disabled = _b === void 0 ? false : _b, _c = props.displayStyle, displayStyle = _c === void 0 ? 'default' : _c, label = props.label, message = props.message, status = props.status, svgIcon = props.svgIcon, className = props.className, style = props.style, _d = props.required, required = _d === void 0 ? false : _d, rest = __rest(props, ["children", "disabled", "displayStyle", "label", "message", "status", "svgIcon", "className", "style", "required"]);
-    useTheme_1.useTheme();
+    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, useTheme_1.useTheme)();
     var icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && common_1.StatusIconMap[status]());
-    return (react_1.default.createElement("div", __assign({ className: classnames_1.default('iui-input-container', (_a = {
-                'iui-disabled': disabled
-            },
-            _a["iui-" + status] = !!status,
-            _a["iui-" + displayStyle] = displayStyle !== 'default',
-            _a), className), style: style }, rest),
-        label && (react_1.default.createElement("div", { className: classnames_1.default('iui-label', {
-                'iui-required': required,
-            }) }, label)),
-        children,
-        (message || icon) && (react_1.default.createElement("div", { className: 'iui-message' },
-            icon,
-            displayStyle === 'default' && message))));
+    return (react_1.default.createElement(InputContainer_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),
+        react_1.default.createElement("div", { className: 'iui-input-group' }, children)));
 };
 exports.InputGroup = InputGroup;
 exports.default = exports.InputGroup;

package/cjs/core/LabeledInput/LabeledInput.d.ts

@@ -15,7 +15,7 @@ export declare type LabeledInputProps = {
      */
     status?: 'positive' | 'warning' | 'negative';
     /**
-     * Custom svg icon. If input has status, default status icon is used instead.
+     * Custom svg icon. Will override status icon if specified.
      */
     svgIcon?: JSX.Element;
     /**
@@ -27,10 +27,22 @@ export declare type LabeledInputProps = {
      */
     inputStyle?: React.CSSProperties;
     /**
-     * You can choose between default and inline.
+     * Set display style of label.
+     * Supported values:
+     * - 'default' - label appears above input.
+     * - 'inline' - appears in the same line as input.
      * @default 'default'
      */
     displayStyle?: 'default' | 'inline';
+    /**
+     * Set display style of icon.
+     * Supported values:
+     * - 'block' - icon appears below input.
+     * - 'inline' - icon appears inside input (at the end).
+     *
+     * Defaults to 'block' if `displayStyle` is `default`, else 'inline'.
+     */
+    iconDisplayStyle?: 'block' | 'inline';
 } & InputProps;
 /**
  * Basic labeled input component
@@ -54,7 +66,7 @@ export declare const LabeledInput: React.ForwardRefExoticComponent<{
      */
     status?: "positive" | "warning" | "negative" | undefined;
     /**
-     * Custom svg icon. If input has status, default status icon is used instead.
+     * Custom svg icon. Will override status icon if specified.
      */
     svgIcon?: JSX.Element | undefined;
     /**
@@ -66,10 +78,22 @@ export declare const LabeledInput: React.ForwardRefExoticComponent<{
      */
     inputStyle?: React.CSSProperties | undefined;
     /**
-     * You can choose between default and inline.
+     * Set display style of label.
+     * Supported values:
+     * - 'default' - label appears above input.
+     * - 'inline' - appears in the same line as input.
      * @default 'default'
      */
     displayStyle?: "default" | "inline" | undefined;
+    /**
+     * Set display style of icon.
+     * Supported values:
+     * - 'block' - icon appears below input.
+     * - 'inline' - icon appears inside input (at the end).
+     *
+     * Defaults to 'block' if `displayStyle` is `default`, else 'inline'.
+     */
+    iconDisplayStyle?: "inline" | "block" | undefined;
 } & {
     setFocus?: boolean | undefined;
     size?: "small" | "large" | undefined;