@itwin/itwinui-react 1.18.0 → 1.19.0

package/cjs/core/Toast/Toast.js

@@ -47,11 +47,19 @@ var common_1 = require("../utils/common");
  * <Toast type='persisting' content='Job processing error.' category='negative' />
  */
 var Toast = function (props) {
-    var content = props.content, category = props.category, _a = props.type, type = _a === void 0 ? 'temporary' : _a, isVisible = props.isVisible, link = props.link, _b = props.duration, duration = _b === void 0 ? 7000 : _b, hasCloseButton = props.hasCloseButton, onRemove = props.onRemove;
-    useTheme_1.useTheme();
+    var content = props.content, category = props.category, _a = props.type, type = _a === void 0 ? 'temporary' : _a, isVisible = props.isVisible, link = props.link, _b = props.duration, duration = _b === void 0 ? 7000 : _b, hasCloseButton = props.hasCloseButton, onRemove = props.onRemove, animateOutTo = props.animateOutTo, placementPosition = props.placementPosition;
+    (0, useTheme_1.useTheme)();
     var closeTimeout = react_1.default.useRef(0);
     var _c = react_1.default.useState(isVisible), visible = _c[0], setVisible = _c[1];
     var _d = react_1.default.useState(0), height = _d[0], setHeight = _d[1];
+    var thisElement = react_1.default.useRef(null);
+    var _e = react_1.default.useState(0), margin = _e[0], setMargin = _e[1];
+    var marginStyle = function () {
+        if (placementPosition === 'top') {
+            return { marginBottom: margin };
+        }
+        return { marginTop: margin };
+    };
     react_1.default.useEffect(function () {
         if (type === 'temporary') {
             setCloseTimeout(duration);
@@ -64,12 +72,21 @@ var Toast = function (props) {
     react_1.default.useEffect(function () {
         setVisible(isVisible);
     }, [isVisible]);
+    react_1.default.useEffect(function () {
+        // if we don't have animateOutTo point and not isVisible, set negative margin to move other toasts up.
+        // Close all and close on toasts with no anchor.
+        if (!isVisible && !animateOutTo) {
+            setMargin(-height);
+        }
+    }, [isVisible, animateOutTo, setMargin, height]);
     var close = function () {
         clearCloseTimeout();
+        // move element up when this element is closed.
+        setMargin(-height);
         setVisible(false);
     };
     var setCloseTimeout = function (timeout) {
-        var definedWindow = common_1.getWindow();
+        var definedWindow = (0, common_1.getWindow)();
         if (!definedWindow) {
             return;
         }
@@ -79,7 +96,7 @@ var Toast = function (props) {
     };
     var clearCloseTimeout = function () {
         var _a;
-        (_a = common_1.getWindow()) === null || _a === void 0 ? void 0 : _a.clearTimeout(closeTimeout.current);
+        (_a = (0, common_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.clearTimeout(closeTimeout.current);
     };
     var onRef = function (ref) {
         if (ref) {
@@ -87,12 +104,34 @@ var Toast = function (props) {
             setHeight(height_1);
         }
     };
-    return (react_1.default.createElement(react_transition_group_1.Transition, { timeout: { enter: 240, exit: 120 }, in: visible, appear: true, unmountOnExit: true, onExited: onRemove }, function (state) { return (react_1.default.createElement("div", { className: classnames_1.default('iui-toast-all', "iui-toast-" + state), style: {
-            height: height,
-            marginBottom: visible ? '0' : -height,
-        } },
+    var calculateOutAnimation = function (node) {
+        // calculation translate x and y pixels.
+        var translateX = 0;
+        var translateY = 0;
+        if (animateOutTo && node) {
+            var _a = node.getBoundingClientRect(), startX = _a.x, startY = _a.y; // current element
+            var _b = animateOutTo.getBoundingClientRect(), endX = _b.x, endY = _b.y; // anchor point
+            translateX = endX - startX;
+            translateY = endY - startY;
+        }
+        return { translateX: translateX, translateY: translateY };
+    };
+    return (react_1.default.createElement(react_transition_group_1.Transition, { timeout: { enter: 240, exit: animateOutTo ? 400 : 120 }, in: visible, appear: true, unmountOnExit: true, onEnter: function (node) {
+            node.style.transform = 'translateY(15%)';
+            node.style.transitionTimingFunction = 'ease';
+        }, onEntered: function (node) {
+            node.style.transform = 'translateY(0)';
+        }, onExiting: function (node) {
+            var _a = calculateOutAnimation(node), translateX = _a.translateX, translateY = _a.translateY;
+            node.style.transform = animateOutTo
+                ? "scale(0.9) translate(" + translateX + "px," + translateY + "px)"
+                : "scale(0.9)";
+            node.style.opacity = '0';
+            node.style.transitionDuration = animateOutTo ? '400ms' : '120ms';
+            node.style.transitionTimingFunction = 'cubic-bezier(0.4, 0, 1, 1)';
+        }, onExited: onRemove }, react_1.default.createElement("div", { ref: thisElement, className: 'iui-toast-all', style: __assign({ height: height }, marginStyle()) },
         react_1.default.createElement("div", { ref: onRef },
-            react_1.default.createElement(exports.ToastPresentation, { category: category, content: content, link: link, type: type, hasCloseButton: hasCloseButton, onClose: close })))); }));
+            react_1.default.createElement(exports.ToastPresentation, { category: category, content: content, link: link, type: type, hasCloseButton: hasCloseButton, onClose: close })))));
 };
 exports.Toast = Toast;
 /**
@@ -102,7 +141,7 @@ exports.Toast = Toast;
 var ToastPresentation = function (props) {
     var content = props.content, category = props.category, _a = props.type, type = _a === void 0 ? 'temporary' : _a, link = props.link, hasCloseButton = props.hasCloseButton, onClose = props.onClose, className = props.className, rest = __rest(props, ["content", "category", "type", "link", "hasCloseButton", "onClose", "className"]);
     var StatusIcon = common_1.StatusIconMap[category];
-    return (react_1.default.createElement("div", __assign({ className: classnames_1.default("iui-toast iui-" + category, className) }, rest),
+    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)("iui-toast iui-" + category, className) }, rest),
         react_1.default.createElement("div", { className: 'iui-status-area' }, react_1.default.createElement(StatusIcon, { className: 'iui-icon' })),
         react_1.default.createElement("div", { className: 'iui-message' }, content),
         link && (react_1.default.createElement("a", { className: 'iui-anchor', onClick: link.onClick }, link.title)),

package/cjs/core/Toast/ToastWrapper.js

@@ -25,8 +25,9 @@ var classnames_1 = __importDefault(require("classnames"));
 var Toast_1 = __importDefault(require("./Toast"));
 var ToastWrapper = function (props) {
     var toasts = props.toasts, _a = props.placement, placement = _a === void 0 ? 'top' : _a;
-    return (react_1.default.createElement("span", { className: classnames_1.default("iui-toast-wrapper", "iui-placement-" + placement) }, toasts.map(function (toastProps) {
-        return react_1.default.createElement(Toast_1.default, __assign({ key: toastProps.id }, toastProps));
+    var placementPosition = placement.startsWith('top') ? 'top' : 'bottom';
+    return (react_1.default.createElement("span", { className: (0, classnames_1.default)("iui-toast-wrapper", "iui-placement-" + placement) }, toasts.map(function (toastProps) {
+        return (react_1.default.createElement(Toast_1.default, __assign({ key: toastProps.id, placementPosition: placementPosition }, toastProps)));
     })));
 };
 exports.ToastWrapper = ToastWrapper;

package/cjs/core/Toast/Toaster.js

@@ -10,10 +10,14 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-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 };
@@ -65,14 +69,13 @@ var Toaster = /** @class */ (function () {
         var _this = this;
         ++this.lastId;
         var currentId = this.lastId;
-        this.toasts = __spreadArray(__spreadArray(__spreadArray([], (this.settings.order === 'ascending' ? this.toasts : [])), [
-            __assign(__assign({}, options), { content: content,
-                category: category, onRemove: function () {
+        this.toasts = __spreadArray(__spreadArray(__spreadArray([], (this.settings.order === 'ascending' ? this.toasts : []), true), [
+            __assign(__assign({}, options), { content: content, category: category, onRemove: function () {
                     var _a;
                     _this.removeToast(currentId);
                     (_a = options === null || options === void 0 ? void 0 : options.onRemove) === null || _a === void 0 ? void 0 : _a.call(options);
                 }, id: currentId, isVisible: true })
-        ]), (this.settings.order === 'descending' ? this.toasts : []));
+        ], false), (this.settings.order === 'descending' ? this.toasts : []), true);
         this.updateView();
     };
     Toaster.prototype.removeToast = function (id) {
@@ -80,7 +83,7 @@ var Toaster = /** @class */ (function () {
         this.updateView();
     };
     Toaster.prototype.updateView = function () {
-        var container = common_1.getContainer(TOASTS_CONTAINER_ID);
+        var container = (0, common_1.getContainer)(TOASTS_CONTAINER_ID);
         if (!container) {
             return;
         }

package/cjs/core/ToggleSwitch/ToggleSwitch.js

@@ -55,21 +55,21 @@ require("@itwin/itwinui-css/css/toggle-switch.css");
  */
 exports.ToggleSwitch = react_1.default.forwardRef(function (props, ref) {
     var _a = props.disabled, disabled = _a === void 0 ? false : _a, _b = props.labelPosition, labelPosition = _b === void 0 ? 'right' : _b, icon = props.icon, label = props.label, _c = props.setFocus, setFocus = _c === void 0 ? false : _c, className = props.className, style = props.style, rest = __rest(props, ["disabled", "labelPosition", "icon", "label", "setFocus", "className", "style"]);
-    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();
         }
     }, [setFocus]);
-    return (react_1.default.createElement("label", { className: classnames_1.default('iui-toggle-switch', { 'iui-disabled': disabled }, className), style: style },
+    return (react_1.default.createElement("label", { className: (0, classnames_1.default)('iui-toggle-switch', { 'iui-disabled': disabled }, className), style: style },
         react_1.default.createElement("input", __assign({ type: 'checkbox', disabled: disabled, ref: refs }, rest)),
         labelPosition === 'left' && label && (react_1.default.createElement("span", { className: 'iui-label' }, label)),
         react_1.default.createElement("span", { className: 'iui-toggle' },
             icon &&
                 react_1.default.cloneElement(icon, {
-                    className: classnames_1.default('iui-icon', icon.props.className),
+                    className: (0, classnames_1.default)('iui-icon', icon.props.className),
                 }),
             react_1.default.createElement("span", { className: 'iui-handle' })),
         labelPosition === 'right' && label && (react_1.default.createElement("span", { className: 'iui-label' }, label))));

package/cjs/core/Tooltip/Tooltip.js

@@ -48,8 +48,8 @@ var Popover_1 = require("../utils/Popover");
  */
 var Tooltip = function (props) {
     var content = props.content, children = props.children, className = props.className, style = props.style, visible = props.visible, ref = props.ref, id = props.id, rest = __rest(props, ["content", "children", "className", "style", "visible", "ref", "id"]);
-    useTheme_1.useTheme();
-    return (react_1.default.createElement(Popover_1.Popover, __assign({ visible: visible, interactive: false, content: react_1.default.createElement("div", { className: classnames_1.default('iui-tooltip', className), style: style, role: 'tooltip', id: id }, content), offset: [0, 4], ref: ref }, rest), children && react_1.default.cloneElement(children, { title: undefined })));
+    (0, useTheme_1.useTheme)();
+    return (react_1.default.createElement(Popover_1.Popover, __assign({ visible: visible, interactive: false, content: react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-tooltip', className), style: style, role: 'tooltip', id: id }, content), offset: [0, 4], ref: ref }, rest), children && react_1.default.cloneElement(children, { title: undefined })));
 };
 exports.Tooltip = Tooltip;
 exports.default = exports.Tooltip;

package/cjs/core/Typography/Blockquote/Blockquote.js

@@ -44,8 +44,8 @@ require("@itwin/itwinui-css/css/blockquote.css");
  */
 exports.Blockquote = react_1.default.forwardRef(function (props, ref) {
     var className = props.className, children = props.children, footer = props.footer, rest = __rest(props, ["className", "children", "footer"]);
-    useTheme_1.useTheme();
-    return (react_1.default.createElement("blockquote", __assign({ className: classnames_1.default('iui-blockquote', className), ref: ref }, rest),
+    (0, useTheme_1.useTheme)();
+    return (react_1.default.createElement("blockquote", __assign({ className: (0, classnames_1.default)('iui-blockquote', className), ref: ref }, rest),
         children,
         footer && react_1.default.createElement("footer", null, footer)));
 });

package/cjs/core/Typography/Body/Body.js

@@ -42,8 +42,8 @@ require("@itwin/itwinui-css/css/text.css");
  */
 exports.Body = react_1.default.forwardRef(function (props, ref) {
     var className = props.className, _a = props.isMuted, isMuted = _a === void 0 ? false : _a, _b = props.isSkeleton, isSkeleton = _b === void 0 ? false : _b, rest = __rest(props, ["className", "isMuted", "isSkeleton"]);
-    useTheme_1.useTheme();
-    return (react_1.default.createElement("p", __assign({ ref: ref, className: classnames_1.default('iui-text-block', 'iui-text-spacing', {
+    (0, useTheme_1.useTheme)();
+    return (react_1.default.createElement("p", __assign({ ref: ref, className: (0, classnames_1.default)('iui-text-block', 'iui-text-spacing', {
             'iui-text-muted': isMuted,
             'iui-skeleton': isSkeleton,
         }, className) }, rest)));

package/cjs/core/Typography/Code/Code.js

@@ -41,8 +41,8 @@ require("@itwin/itwinui-css/css/code.css");
  */
 var Code = function (props) {
     var className = props.className, children = props.children, rest = __rest(props, ["className", "children"]);
-    useTheme_1.useTheme();
-    return (react_1.default.createElement("code", __assign({ className: classnames_1.default('iui-code', className) }, rest), children));
+    (0, useTheme_1.useTheme)();
+    return (react_1.default.createElement("code", __assign({ className: (0, classnames_1.default)('iui-code', className) }, rest), children));
 };
 exports.Code = Code;
 exports.default = exports.Code;

package/cjs/core/Typography/Headline/Headline.js

@@ -42,7 +42,7 @@ require("@itwin/itwinui-css/css/text.css");
  */
 exports.Headline = react_1.default.forwardRef(function (props, ref) {
     var className = props.className, _a = props.isMuted, isMuted = _a === void 0 ? false : _a, rest = __rest(props, ["className", "isMuted"]);
-    useTheme_1.useTheme();
-    return (react_1.default.createElement("h1", __assign({ ref: ref, className: classnames_1.default('iui-text-headline', 'iui-text-spacing', { 'iui-text-muted': isMuted }, className) }, rest)));
+    (0, useTheme_1.useTheme)();
+    return (react_1.default.createElement("h1", __assign({ ref: ref, className: (0, classnames_1.default)('iui-text-headline', 'iui-text-spacing', { 'iui-text-muted': isMuted }, className) }, rest)));
 });
 exports.default = exports.Headline;

package/cjs/core/Typography/Kbd/Kbd.js

@@ -60,8 +60,8 @@ exports.KbdKeys = {
  */
 var Kbd = function (props) {
     var className = props.className, children = props.children, rest = __rest(props, ["className", "children"]);
-    useTheme_1.useTheme();
-    return (react_1.default.createElement("kbd", __assign({ className: classnames_1.default('iui-keyboard', className) }, rest), children));
+    (0, useTheme_1.useTheme)();
+    return (react_1.default.createElement("kbd", __assign({ className: (0, classnames_1.default)('iui-keyboard', className) }, rest), children));
 };
 exports.Kbd = Kbd;
 exports.default = exports.Kbd;

package/cjs/core/Typography/Leading/Leading.js

@@ -42,7 +42,7 @@ require("@itwin/itwinui-css/css/text.css");
  */
 exports.Leading = react_1.default.forwardRef(function (props, ref) {
     var className = props.className, _a = props.isMuted, isMuted = _a === void 0 ? false : _a, rest = __rest(props, ["className", "isMuted"]);
-    useTheme_1.useTheme();
-    return (react_1.default.createElement("h3", __assign({ ref: ref, className: classnames_1.default('iui-text-leading', 'iui-text-spacing', { 'iui-text-muted': isMuted }, className) }, rest)));
+    (0, useTheme_1.useTheme)();
+    return (react_1.default.createElement("h3", __assign({ ref: ref, className: (0, classnames_1.default)('iui-text-leading', 'iui-text-spacing', { 'iui-text-muted': isMuted }, className) }, rest)));
 });
 exports.default = exports.Leading;

package/cjs/core/Typography/Small/Small.js

@@ -42,7 +42,7 @@ require("@itwin/itwinui-css/css/text.css");
  */
 exports.Small = react_1.default.forwardRef(function (props, ref) {
     var className = props.className, _a = props.isMuted, isMuted = _a === void 0 ? false : _a, rest = __rest(props, ["className", "isMuted"]);
-    useTheme_1.useTheme();
-    return (react_1.default.createElement("p", __assign({ ref: ref, className: classnames_1.default('iui-text-small', { 'iui-text-muted': isMuted }, className) }, rest)));
+    (0, useTheme_1.useTheme)();
+    return (react_1.default.createElement("p", __assign({ ref: ref, className: (0, classnames_1.default)('iui-text-small', { 'iui-text-muted': isMuted }, className) }, rest)));
 });
 exports.default = exports.Small;

package/cjs/core/Typography/Subheading/Subheading.js

@@ -42,7 +42,7 @@ require("@itwin/itwinui-css/css/text.css");
  */
 exports.Subheading = react_1.default.forwardRef(function (props, ref) {
     var className = props.className, _a = props.isMuted, isMuted = _a === void 0 ? false : _a, rest = __rest(props, ["className", "isMuted"]);
-    useTheme_1.useTheme();
-    return (react_1.default.createElement("h3", __assign({ ref: ref, className: classnames_1.default('iui-text-subheading', 'iui-text-spacing', { 'iui-text-muted': isMuted }, className) }, rest)));
+    (0, useTheme_1.useTheme)();
+    return (react_1.default.createElement("h3", __assign({ ref: ref, className: (0, classnames_1.default)('iui-text-subheading', 'iui-text-spacing', { 'iui-text-muted': isMuted }, className) }, rest)));
 });
 exports.default = exports.Subheading;

package/cjs/core/Typography/Text/Text.js

@@ -47,8 +47,8 @@ require("@itwin/itwinui-css/css/text.css");
 var Text = function (props) {
     var _a;
     var _b = props.variant, variant = _b === void 0 ? 'body' : _b, _c = props.as, Element = _c === void 0 ? 'div' : _c, className = props.className, _d = props.isMuted, isMuted = _d === void 0 ? false : _d, _e = props.isSkeleton, isSkeleton = _e === void 0 ? false : _e, rest = __rest(props, ["variant", "as", "className", "isMuted", "isSkeleton"]);
-    useTheme_1.useTheme();
-    return (react_1.default.createElement(Element, __assign({ className: classnames_1.default((_a = {},
+    (0, useTheme_1.useTheme)();
+    return (react_1.default.createElement(Element, __assign({ className: (0, classnames_1.default)((_a = {},
             _a["iui-text-" + variant] = variant !== 'body',
             _a['iui-text-block'] = variant === 'body',
             _a['iui-text-muted'] = isMuted,

package/cjs/core/Typography/Title/Title.js

@@ -42,7 +42,7 @@ require("@itwin/itwinui-css/css/text.css");
  */
 exports.Title = react_1.default.forwardRef(function (props, ref) {
     var className = props.className, _a = props.isMuted, isMuted = _a === void 0 ? false : _a, rest = __rest(props, ["className", "isMuted"]);
-    useTheme_1.useTheme();
-    return (react_1.default.createElement("h2", __assign({ ref: ref, className: classnames_1.default('iui-text-title', 'iui-text-spacing', { 'iui-text-muted': isMuted }, className) }, rest)));
+    (0, useTheme_1.useTheme)();
+    return (react_1.default.createElement("h2", __assign({ ref: ref, className: (0, classnames_1.default)('iui-text-title', 'iui-text-spacing', { 'iui-text-muted': isMuted }, className) }, rest)));
 });
 exports.default = exports.Title;

package/cjs/core/UserIcon/UserIcon.js

@@ -61,7 +61,7 @@ exports.defaultStatusTitles = {
 var UserIcon = function (props) {
     var _a, _b;
     var _c = props.size, size = _c === void 0 ? 'small' : _c, status = props.status, abbreviation = props.abbreviation, image = props.image, _d = props.backgroundColor, backgroundColor = _d === void 0 ? 'white' : _d, title = props.title, translatedStatusTitles = props.translatedStatusTitles, className = props.className, style = props.style, rest = __rest(props, ["size", "status", "abbreviation", "image", "backgroundColor", "title", "translatedStatusTitles", "className", "style"]);
-    useTheme_1.useTheme();
+    (0, useTheme_1.useTheme)();
     var statusTitles = __assign(__assign({}, exports.defaultStatusTitles), translatedStatusTitles);
     var iconMap = {
         away: react_1.default.createElement(Away_1.default, { className: 'iui-status-symbol', "aria-hidden": true }),
@@ -69,9 +69,9 @@ var UserIcon = function (props) {
         online: react_1.default.createElement(Checkmark_1.default, { className: 'iui-status-symbol', "aria-hidden": true }),
         busy: react_1.default.createElement(react_1.default.Fragment, null),
     };
-    return (react_1.default.createElement("span", __assign({ className: classnames_1.default('iui-user-icon', (_a = {}, _a["iui-" + size] = size !== 'medium', _a), className), title: title, style: style }, rest), image !== null && image !== void 0 ? image : (react_1.default.createElement("abbr", { className: 'iui-initials', style: { backgroundColor: backgroundColor } }, abbreviation === null || abbreviation === void 0 ? void 0 : abbreviation.substring(0, 2))),
+    return (react_1.default.createElement("span", __assign({ className: (0, classnames_1.default)('iui-user-icon', (_a = {}, _a["iui-" + size] = size !== 'medium', _a), className), title: title, style: style }, rest), image !== null && image !== void 0 ? image : (react_1.default.createElement("abbr", { className: 'iui-initials', style: { backgroundColor: backgroundColor } }, abbreviation === null || abbreviation === void 0 ? void 0 : abbreviation.substring(0, 2))),
         react_1.default.createElement("span", { className: 'iui-stroke' }),
-        status && (react_1.default.createElement("span", { title: statusTitles[status], className: classnames_1.default('iui-status', (_b = {},
+        status && (react_1.default.createElement("span", { title: statusTitles[status], className: (0, classnames_1.default)('iui-status', (_b = {},
                 _b["iui-" + status] = !!status,
                 _b)), "aria-label": statusTitles[status] }, iconMap[status]))));
 };

package/cjs/core/UserIconGroup/UserIconGroup.js

@@ -67,7 +67,7 @@ var UserIconGroup = function (props) {
     var children = props.children, _b = props.animated, animated = _b === void 0 ? false : _b, _c = props.stacked, stacked = _c === void 0 ? true : _c, _d = props.maxIcons, maxIcons = _d === void 0 ? 5 : _d, _e = props.iconSize, iconSize = _e === void 0 ? 'small' : _e, countIconProps = props.countIconProps, className = props.className, rest = __rest(props, ["children", "animated", "stacked", "maxIcons", "iconSize", "countIconProps", "className"]);
     var childrenArray = react_1.default.Children.toArray(children);
     var childrenLength = childrenArray.length;
-    useTheme_1.useTheme();
+    (0, useTheme_1.useTheme)();
     var getUserIconList = function (count) {
         return childrenArray.slice(0, count).map(function (child) {
             return react_1.default.cloneElement(child, {
@@ -77,14 +77,14 @@ var UserIconGroup = function (props) {
         });
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", __assign({ className: classnames_1.default('iui-user-icon-list', {
+        react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-user-icon-list', {
                 'iui-animated': animated,
                 'iui-stacked': stacked,
             }, className) }, rest),
             childrenArray.length <= maxIcons + 1 && getUserIconList(maxIcons + 1),
             childrenArray.length > maxIcons + 1 && (react_1.default.createElement(react_1.default.Fragment, null,
                 getUserIconList(maxIcons),
-                react_1.default.createElement("div", __assign({}, countIconProps, { className: classnames_1.default('iui-user-icon', (_a = {}, _a["iui-" + iconSize] = iconSize !== 'medium', _a), 'iui-user-icon-count', countIconProps === null || countIconProps === void 0 ? void 0 : countIconProps.className) }),
+                react_1.default.createElement("div", __assign({}, countIconProps, { className: (0, classnames_1.default)('iui-user-icon', (_a = {}, _a["iui-" + iconSize] = iconSize !== 'medium', _a), 'iui-user-icon-count', countIconProps === null || countIconProps === void 0 ? void 0 : countIconProps.className) }),
                     react_1.default.createElement("abbr", { className: 'iui-initials' }, childrenLength <= maxLength
                         ? "" + (childrenLength - maxIcons)
                         : maxLength + "+"),

package/cjs/core/Wizard/Step.js

@@ -51,7 +51,7 @@ var Step = function (props) {
             onCompletedClick();
         }
     };
-    var stepShape = (react_1.default.createElement("li", __assign({ className: classnames_1.default('iui-wizard-step', {
+    var stepShape = (react_1.default.createElement("li", __assign({ className: (0, classnames_1.default)('iui-wizard-step', {
             'iui-current': isActive,
             'iui-clickable': isClickable,
         }, className), style: __assign({ width: type === 'default' ? 100 / totalSteps + "%" : undefined }, style), onClick: onCompletedClick, onKeyDown: onKeyDown, "aria-current": isActive ? 'step' : undefined, tabIndex: isClickable ? 0 : undefined }, rest),

package/cjs/core/Wizard/Wizard.js

@@ -56,8 +56,8 @@ var defaultWizardLocalization = {
 exports.Wizard = react_1.default.forwardRef(function (props, ref) {
     var currentStep = props.currentStep, steps = props.steps, _a = props.type, type = _a === void 0 ? 'default' : _a, _b = props.localization, localization = _b === void 0 ? defaultWizardLocalization : _b, onStepClick = props.onStepClick, rest = __rest(props, ["currentStep", "steps", "type", "localization", "onStepClick"]);
     var boundedCurrentStep = Math.min(Math.max(0, currentStep !== null && currentStep !== void 0 ? currentStep : 0), steps.length - 1);
-    useTheme_1.useTheme();
-    return (react_1.default.createElement("div", __assign({ className: classnames_1.default('iui-wizard', {
+    (0, useTheme_1.useTheme)();
+    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-wizard', {
             'iui-long': type === 'long',
             'iui-workflow': type === 'workflow',
         }), ref: ref }, rest),

package/cjs/core/utils/FocusTrap.js

@@ -19,7 +19,7 @@ var FocusTrap = function (props) {
     var children = props.children;
     var childRef = react_1.default.useRef();
     var getFirstLastFocusables = function () {
-        var elements = common_1.getFocusableElements(childRef.current);
+        var elements = (0, common_1.getFocusableElements)(childRef.current);
         var firstElement = elements[0];
         var lastElement = elements[(elements.length || 1) - 1];
         return [firstElement, lastElement];
@@ -47,7 +47,7 @@ var FocusTrap = function (props) {
     return (react_1.default.createElement("div", null,
         react_1.default.createElement("div", { tabIndex: 0, onFocus: onFirstFocus, "aria-hidden": true }),
         react_1.default.cloneElement(children, {
-            ref: useMergedRefs_1.mergeRefs(children.ref, childRef),
+            ref: (0, useMergedRefs_1.mergeRefs)(children.ref, childRef),
         }),
         react_1.default.createElement("div", { tabIndex: 0, onFocus: onLastFocus, "aria-hidden": true })));
 };

package/cjs/core/utils/InputContainer.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export declare type InputContainerProps<T extends React.ElementType = 'div'> = {
+    as?: T;
+    label?: React.ReactNode;
+    disabled?: boolean;
+    required?: boolean;
+    status?: 'positive' | 'warning' | 'negative';
+    message?: React.ReactNode;
+    icon?: JSX.Element;
+    isLabelInline?: boolean;
+    isIconInline?: boolean;
+} & React.ComponentPropsWithoutRef<T>;
+/**
+ * Input container to wrap inputs with label, and add optional message and icon.
+ * @private
+ */
+export declare const InputContainer: <T extends React.ElementType<any> = "div">(props: InputContainerProps<T>) => JSX.Element;

package/cjs/core/utils/InputContainer.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.InputContainer = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+/**
+ * Input container to wrap inputs with label, and add optional message and icon.
+ * @private
+ */
+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;
+    return (react_1.default.createElement(Element, { 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), className), style: style },
+        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))));
+};
+exports.InputContainer = InputContainer;

package/cjs/core/utils/Popover.js

@@ -14,10 +14,14 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-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 };
@@ -35,7 +39,7 @@ var useMergedRefs_1 = require("./hooks/useMergedRefs");
 exports.Popover = react_1.default.forwardRef(function (props, ref) {
     var _a = react_1.default.useState(false), mounted = _a[0], setMounted = _a[1];
     var tippyRef = react_1.default.useRef(null);
-    var refs = useMergedRefs_1.useMergedRefs(tippyRef, ref);
+    var refs = (0, useMergedRefs_1.useMergedRefs)(tippyRef, ref);
     // Plugin to allow lazy mounting. See https://github.com/atomiks/tippyjs-react#lazy-mounting
     var lazyLoad = {
         fn: function () { return ({
@@ -59,7 +63,7 @@ exports.Popover = react_1.default.forwardRef(function (props, ref) {
             lazyLoad,
             removeTabIndex,
             exports.hideOnEscOrTab
-        ], (props.plugins || [])) });
+        ], (props.plugins || []), true) });
     if (props.render) {
         var render_1 = props.render;
         computedProps.render = function () {

package/cjs/core/utils/common.js

@@ -84,7 +84,7 @@ exports.getUserColor = getUserColor;
  */
 var getContainer = function (containerId, ownerDocument) {
     var _a;
-    if (ownerDocument === void 0) { ownerDocument = exports.getDocument(); }
+    if (ownerDocument === void 0) { ownerDocument = (0, exports.getDocument)(); }
     var container = (_a = ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.getElementById(containerId)) !== null && _a !== void 0 ? _a : undefined;
     if (container == null && !!ownerDocument) {
         container = ownerDocument.createElement('div');

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

@@ -27,7 +27,7 @@ var useIntersection = function (onIntersect, options) {
     var observer = react_1.default.useRef();
     var setRef = react_1.default.useCallback(function (node) {
         var _a;
-        if (!((_a = common_1.getWindow()) === null || _a === void 0 ? void 0 : _a.IntersectionObserver)) {
+        if (!((_a = (0, common_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.IntersectionObserver)) {
             return;
         }
         if (observer.current) {

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

@@ -1,8 +1,12 @@
 "use strict";
-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 };
@@ -43,6 +47,6 @@ var useMergedRefs = function () {
         refs[_i] = arguments[_i];
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    return react_1.default.useCallback(exports.mergeRefs.apply(void 0, refs), __spreadArray([], refs));
+    return react_1.default.useCallback(exports.mergeRefs.apply(void 0, refs), __spreadArray([], refs, true));
 };
 exports.useMergedRefs = useMergedRefs;

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

@@ -46,9 +46,9 @@ var useOverflow = function (items, disabled) {
         var width = _a.width;
         return setContainerWidth(width);
     }, []);
-    var _c = useResizeObserver_1.useResizeObserver(updateContainerWidth), resizeRef = _c[0], observer = _c[1];
+    var _c = (0, useResizeObserver_1.useResizeObserver)(updateContainerWidth), resizeRef = _c[0], observer = _c[1];
     var resizeObserverRef = react_1.default.useRef(observer);
-    var mergedRefs = useMergedRefs_1.useMergedRefs(containerRef, resizeRef);
+    var mergedRefs = (0, useMergedRefs_1.useMergedRefs)(containerRef, resizeRef);
     react_1.default.useLayoutEffect(function () {
         var _a;
         if (!containerRef.current || disabled) {

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

@@ -26,7 +26,7 @@ var useResizeObserver = function (onResize) {
     var resizeObserver = react_1.default.useRef();
     var elementRef = react_1.default.useCallback(function (element) {
         var _a, _b, _c;
-        if (!((_a = common_1.getWindow()) === null || _a === void 0 ? void 0 : _a.ResizeObserver)) {
+        if (!((_a = (0, common_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.ResizeObserver)) {
             return;
         }
         (_b = resizeObserver.current) === null || _b === void 0 ? void 0 : _b.disconnect();

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

@@ -19,7 +19,7 @@ var common_1 = require("../common");
  */
 var useTheme = function (theme, themeOptions) {
     var _a;
-    var ownerDocument = (_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.ownerDocument) !== null && _a !== void 0 ? _a : common_1.getDocument();
+    var ownerDocument = (_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.ownerDocument) !== null && _a !== void 0 ? _a : (0, common_1.getDocument)();
     react_1.default.useLayoutEffect(function () {
         if (!(ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body.classList.contains('iui-body'))) {
             ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body.classList.add('iui-body');
@@ -38,7 +38,7 @@ var useTheme = function (theme, themeOptions) {
                 addDarkTheme(ownerDocument);
                 break;
             case 'os':
-                if ((_b = (_a = common_1.getWindow()) === null || _a === void 0 ? void 0 : _a.matchMedia) === null || _b === void 0 ? void 0 : _b.call(_a, '(prefers-color-scheme: dark)').matches) {
+                if ((_b = (_a = (0, common_1.getWindow)()) === null || _a === void 0 ? void 0 : _a.matchMedia) === null || _b === void 0 ? void 0 : _b.call(_a, '(prefers-color-scheme: dark)').matches) {
                     addDarkTheme(ownerDocument);
                 }
                 else {

package/esm/core/Checkbox/Checkbox.js

@@ -71,6 +71,6 @@ export var Checkbox = React.forwardRef(function (props, ref) {
             !isLoading && (React.createElement("svg", { viewBox: '0 0 16 16', "aria-hidden": 'true', focusable: 'false' },
                 React.createElement("path", { className: 'iui-check', d: 'M6,14L0,8l2-2l4,4l8-8l2,2L6,14z' }),
                 React.createElement("path", { className: 'iui-check-partial', d: 'm1 6.5h14v3h-14z' })))),
-        label && React.createElement("div", { className: 'iui-label' }, label)));
+        label && React.createElement("span", { className: 'iui-label' }, label)));
 });
 export default Checkbox;