@itwin/itwinui-react 2.0.0-dev.1 → 2.0.0-dev.3

package/esm/core/LabeledInput/LabeledInput.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -36,11 +14,11 @@ import '@itwin/itwinui-css/css/input.css';
  * <LabeledInput status='positive' label='Positive' />
  * <LabeledInput status='negative' label='Negative' setFocus />
  */
-export var LabeledInput = React.forwardRef(function (props, ref) {
-    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, style = props.style, inputClassName = props.inputClassName, inputStyle = props.inputStyle, _b = props.displayStyle, displayStyle = _b === void 0 ? 'default' : _b, _c = props.iconDisplayStyle, iconDisplayStyle = _c === void 0 ? displayStyle === 'default' ? 'block' : 'inline' : _c, _d = props.required, required = _d === void 0 ? false : _d, rest = __rest(props, ["className", "disabled", "label", "message", "status", "svgIcon", "style", "inputClassName", "inputStyle", "displayStyle", "iconDisplayStyle", "required"]);
+export const LabeledInput = React.forwardRef((props, ref) => {
+    const { className, disabled = false, label, message, status, svgIcon, style, inputClassName, inputStyle, displayStyle = 'default', iconDisplayStyle = displayStyle === 'default' ? 'block' : 'inline', required = false, ...rest } = props;
     useTheme();
-    var icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && StatusIconMap[status]());
+    const icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && StatusIconMap[status]());
     return (React.createElement(InputContainer, { as: 'label', label: label, disabled: disabled, required: required, status: status, message: message, icon: icon, isLabelInline: displayStyle === 'inline', isIconInline: iconDisplayStyle === 'inline', className: className, style: style },
-        React.createElement(Input, __assign({ disabled: disabled, className: inputClassName, style: inputStyle, required: required, ref: ref }, rest))));
+        React.createElement(Input, { disabled: disabled, className: inputClassName, style: inputStyle, required: required, ref: ref, ...rest })));
 });
 export default LabeledInput;

package/esm/core/LabeledSelect/LabeledSelect.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -61,10 +39,10 @@ import '@itwin/itwinui-css/css/select.css';
  *   svgIcon={<SvgCamera />}
  * />
  */
-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"]);
+export const LabeledSelect = (props) => {
+    const { className, disabled = false, label, message, status, svgIcon, displayStyle = 'default', style, selectClassName, selectStyle, required = false, ...rest } = props;
     useTheme();
-    var icon = function () {
+    const icon = () => {
         if (svgIcon) {
             return React.cloneElement(svgIcon, { 'aria-hidden': true });
         }
@@ -74,6 +52,6 @@ export var LabeledSelect = function (props) {
         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))));
+        React.createElement(Select, { disabled: disabled, className: selectClassName, style: selectStyle, ...rest })));
 };
 export default LabeledSelect;

package/esm/core/LabeledTextarea/LabeledTextarea.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -49,11 +27,11 @@ import '@itwin/itwinui-css/css/input.css';
  *  status='negative'
  * />
  */
-export var LabeledTextarea = React.forwardRef(function (props, ref) {
-    var className = props.className, style = props.style, _a = props.disabled, disabled = _a === void 0 ? false : _a, label = props.label, message = props.message, status = props.status, textareaClassName = props.textareaClassName, textareaStyle = props.textareaStyle, _b = props.displayStyle, displayStyle = _b === void 0 ? 'default' : _b, _c = props.iconDisplayStyle, iconDisplayStyle = _c === void 0 ? displayStyle === 'default' ? 'block' : 'inline' : _c, svgIcon = props.svgIcon, _d = props.required, required = _d === void 0 ? false : _d, textareaProps = __rest(props, ["className", "style", "disabled", "label", "message", "status", "textareaClassName", "textareaStyle", "displayStyle", "iconDisplayStyle", "svgIcon", "required"]);
+export const LabeledTextarea = React.forwardRef((props, ref) => {
+    const { className, style, disabled = false, label, message, status, textareaClassName, textareaStyle, displayStyle = 'default', iconDisplayStyle = displayStyle === 'default' ? 'block' : 'inline', svgIcon, required = false, ...textareaProps } = props;
     useTheme();
-    var icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && StatusIconMap[status]());
+    const icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && StatusIconMap[status]());
     return (React.createElement(InputContainer, { as: 'label', label: label, disabled: disabled, required: required, status: status, message: message, icon: icon, isLabelInline: displayStyle === 'inline', isIconInline: iconDisplayStyle === 'inline', className: className, style: style },
-        React.createElement(Textarea, __assign({ disabled: disabled, className: textareaClassName, style: textareaStyle, required: required }, textareaProps, { ref: ref }))));
+        React.createElement(Textarea, { disabled: disabled, className: textareaClassName, style: textareaStyle, required: required, ...textareaProps, ref: ref })));
 });
 export default LabeledTextarea;

package/esm/core/Menu/Menu.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -31,35 +9,35 @@ import '@itwin/itwinui-css/css/menu.css';
 /**
  * Basic menu component. Can be used for select or dropdown components.
  */
-export var Menu = React.forwardRef(function (props, ref) {
-    var children = props.children, _a = props.role, role = _a === void 0 ? 'menu' : _a, _b = props.setFocus, setFocus = _b === void 0 ? true : _b, className = props.className, style = props.style, rest = __rest(props, ["children", "role", "setFocus", "className", "style"]);
+export const Menu = React.forwardRef((props, ref) => {
+    const { children, role = 'menu', setFocus = true, className, style, ...rest } = props;
     useTheme();
-    var _c = React.useState(), focusedIndex = _c[0], setFocusedIndex = _c[1];
-    var menuRef = React.useRef(null);
-    var refs = useMergedRefs(menuRef, ref);
-    var getFocusableNodes = React.useCallback(function () {
-        var focusableItems = getFocusableElements(menuRef.current);
+    const [focusedIndex, setFocusedIndex] = React.useState();
+    const menuRef = React.useRef(null);
+    const refs = useMergedRefs(menuRef, ref);
+    const getFocusableNodes = React.useCallback(() => {
+        const focusableItems = getFocusableElements(menuRef.current);
         // Filter out focusable elements that are inside each menu item, e.g. checkbox, anchor
-        return focusableItems.filter(function (i) { return !focusableItems.some(function (p) { return p.contains(i.parentElement); }); });
+        return focusableItems.filter((i) => !focusableItems.some((p) => p.contains(i.parentElement)));
     }, []);
-    React.useEffect(function () {
+    React.useEffect(() => {
         var _a;
-        var items = getFocusableNodes();
+        const items = getFocusableNodes();
         if (focusedIndex != null) {
             (_a = items === null || items === void 0 ? void 0 : items[focusedIndex]) === null || _a === void 0 ? void 0 : _a.focus();
             return;
         }
-        var selectedIndex = items.findIndex(function (el) { return el.getAttribute('aria-selected') === 'true'; });
+        const selectedIndex = items.findIndex((el) => el.getAttribute('aria-selected') === 'true');
         if (setFocus) {
             setFocusedIndex(selectedIndex > -1 ? selectedIndex : 0);
         }
     }, [setFocus, focusedIndex, getFocusableNodes]);
-    var onKeyDown = function (event) {
-        var items = getFocusableNodes();
+    const onKeyDown = (event) => {
+        const items = getFocusableNodes();
         if (!(items === null || items === void 0 ? void 0 : items.length)) {
             return;
         }
-        var currentIndex = focusedIndex !== null && focusedIndex !== void 0 ? focusedIndex : 0;
+        const currentIndex = focusedIndex !== null && focusedIndex !== void 0 ? focusedIndex : 0;
         switch (event.key) {
             case 'ArrowDown': {
                 setFocusedIndex(Math.min(currentIndex + 1, items.length - 1));
@@ -77,6 +55,6 @@ export var Menu = React.forwardRef(function (props, ref) {
                 break;
         }
     };
-    return (React.createElement("ul", __assign({ className: cx('iui-menu', className), style: style, role: role, onKeyDown: onKeyDown, ref: refs }, rest), children));
+    return (React.createElement("ul", { className: cx('iui-menu', className), style: style, role: role, onKeyDown: onKeyDown, ref: refs, ...rest }, children));
 });
 export default Menu;

package/esm/core/Menu/MenuDivider.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -43,9 +21,9 @@ import '@itwin/itwinui-css/css/menu.css';
  *   ]}
  * </Menu>
  */
-export var MenuDivider = function (props) {
-    var className = props.className, rest = __rest(props, ["className"]);
+export const MenuDivider = (props) => {
+    const { className, ...rest } = props;
     useTheme();
-    return (React.createElement("li", __assign({ role: 'separator', className: cx('iui-menu-divider', className) }, rest)));
+    return (React.createElement("li", { role: 'separator', className: cx('iui-menu-divider', className), ...rest }));
 };
 export default MenuDivider;

package/esm/core/Menu/MenuExtraContent.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -48,9 +26,9 @@ import '@itwin/itwinui-css/css/menu.css';
  *   ]}
  * </Menu>
  */
-export var MenuExtraContent = function (props) {
-    var children = props.children, className = props.className, rest = __rest(props, ["children", "className"]);
+export const MenuExtraContent = (props) => {
+    const { children, className, ...rest } = props;
     useTheme();
-    return (React.createElement("li", __assign({ className: cx('iui-menu-content', className), role: 'presentation' }, rest), children));
+    return (React.createElement("li", { className: cx('iui-menu-content', className), role: 'presentation', ...rest }, children));
 };
 export default MenuExtraContent;

package/esm/core/Menu/MenuItem.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -32,19 +10,19 @@ import { Menu } from './Menu';
 /**
  * Context used to provide menu item ref to sub-menu items.
  */
-var MenuItemContext = React.createContext({ ref: undefined });
+const MenuItemContext = React.createContext({ ref: undefined });
 /**
  * Basic menu item component. Should be used inside `Menu` component for each item.
  */
-export var MenuItem = React.forwardRef(function (props, ref) {
-    var children = props.children, isSelected = props.isSelected, disabled = props.disabled, value = props.value, onClick = props.onClick, sublabel = props.sublabel, _a = props.size, size = _a === void 0 ? !!sublabel ? 'large' : 'default' : _a, icon = props.icon, badge = props.badge, className = props.className, style = props.style, _b = props.role, role = _b === void 0 ? 'menuitem' : _b, _c = props.subMenuItems, subMenuItems = _c === void 0 ? [] : _c, rest = __rest(props, ["children", "isSelected", "disabled", "value", "onClick", "sublabel", "size", "icon", "badge", "className", "style", "role", "subMenuItems"]);
+export const MenuItem = React.forwardRef((props, ref) => {
+    const { children, isSelected, disabled, value, onClick, sublabel, size = !!sublabel ? 'large' : 'default', icon, badge, className, style, role = 'menuitem', subMenuItems = [], ...rest } = props;
     useTheme();
-    var menuItemRef = React.useRef(null);
-    var refs = useMergedRefs(menuItemRef, ref);
-    var parentMenuItemRef = React.useContext(MenuItemContext).ref;
-    var subMenuRef = React.useRef(null);
-    var _d = React.useState(false), isSubmenuVisible = _d[0], setIsSubmenuVisible = _d[1];
-    var onKeyDown = function (event) {
+    const menuItemRef = React.useRef(null);
+    const refs = useMergedRefs(menuItemRef, ref);
+    const { ref: parentMenuItemRef } = React.useContext(MenuItemContext);
+    const subMenuRef = React.useRef(null);
+    const [isSubmenuVisible, setIsSubmenuVisible] = React.useState(false);
+    const onKeyDown = (event) => {
         var _a;
         if (event.altKey) {
             return;
@@ -75,17 +53,17 @@ export var MenuItem = React.forwardRef(function (props, ref) {
                 break;
         }
     };
-    var listItem = (React.createElement("li", __assign({ className: cx('iui-menu-item', {
+    const listItem = (React.createElement("li", { className: cx('iui-menu-item', {
             'iui-large': size === 'large',
             'iui-active': isSelected,
             'iui-disabled': disabled,
-        }, className), onClick: function () { return !disabled && (onClick === null || onClick === void 0 ? void 0 : onClick(value)); }, ref: refs, style: style, role: role, tabIndex: disabled || role === 'presentation' ? undefined : -1, "aria-selected": isSelected, "aria-haspopup": subMenuItems.length > 0, "aria-disabled": disabled, onKeyDown: onKeyDown, onMouseEnter: function () { return setIsSubmenuVisible(true); }, onMouseLeave: function (e) {
+        }, className), onClick: () => !disabled && (onClick === null || onClick === void 0 ? void 0 : onClick(value)), ref: refs, style: style, role: role, tabIndex: disabled || role === 'presentation' ? undefined : -1, "aria-selected": isSelected, "aria-haspopup": subMenuItems.length > 0, "aria-disabled": disabled, onKeyDown: onKeyDown, onMouseEnter: () => setIsSubmenuVisible(true), onMouseLeave: (e) => {
             var _a;
             if (!(e.relatedTarget instanceof Node) ||
                 !((_a = subMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))) {
                 setIsSubmenuVisible(false);
             }
-        } }, rest),
+        }, ...rest },
         icon &&
             React.cloneElement(icon, {
                 className: cx(icon.props.className, 'iui-icon'),
@@ -99,7 +77,7 @@ export var MenuItem = React.forwardRef(function (props, ref) {
                 className: cx(badge.props.className, 'iui-icon'),
             })));
     return subMenuItems.length === 0 ? (listItem) : (React.createElement(MenuItemContext.Provider, { value: { ref: menuItemRef } },
-        React.createElement(Popover, { placement: 'right-start', visible: isSubmenuVisible, appendTo: 'parent', content: React.createElement("div", { onMouseLeave: function () { return setIsSubmenuVisible(false); }, onBlur: function (e) {
+        React.createElement(Popover, { placement: 'right-start', visible: isSubmenuVisible, appendTo: 'parent', content: React.createElement("div", { onMouseLeave: () => setIsSubmenuVisible(false), onBlur: (e) => {
                     var _a, _b;
                     !!(e.relatedTarget instanceof Node) &&
                         !((_a = subMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)) &&

package/esm/core/Menu/MenuItemSkeleton.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -31,12 +9,15 @@ import '@itwin/itwinui-css/css/menu.css';
 /**
  * Menu item that uses skeletons to indicate loading state.
  */
-export var MenuItemSkeleton = function (props) {
-    var hasSublabel = props.hasSublabel, hasIcon = props.hasIcon, contentWidth = props.contentWidth, _a = props.translatedStrings, translatedStrings = _a === void 0 ? { loading: 'Loading…' } : _a, className = props.className, style = props.style, rest = __rest(props, ["hasSublabel", "hasIcon", "contentWidth", "translatedStrings", "className", "style"]);
+export const MenuItemSkeleton = (props) => {
+    const { hasSublabel, hasIcon, contentWidth, translatedStrings = { loading: 'Loading…' }, className, style, ...rest } = props;
     useTheme();
-    return (React.createElement("li", __assign({ className: cx('iui-menu-item', 'iui-menu-item-skeleton', { 'iui-large': hasSublabel }, className), style: __assign({
-            '--iui-menu-item-content-skeleton-max-width': contentWidth,
-        }, style) }, rest),
+    return (React.createElement("li", { className: cx('iui-menu-item', 'iui-menu-item-skeleton', { 'iui-large': hasSublabel }, className), style: {
+            ...{
+                '--iui-menu-item-content-skeleton-max-width': contentWidth,
+            },
+            ...style,
+        }, ...rest },
         hasIcon && React.createElement("div", { className: 'iui-icon iui-skeleton', "aria-hidden": true }),
         React.createElement("span", { className: 'iui-content' },
             React.createElement("div", { className: 'iui-menu-label iui-skeleton', "aria-hidden": true }),

package/esm/core/Modal/Modal.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -50,13 +28,17 @@ import { Dialog } from '../Dialog';
  *   </ModalButtonBar>
  * </Modal>
  */
-export var Modal = function (props) {
-    var _a = props.isOpen, isOpen = _a === void 0 ? false : _a, _b = props.isDismissible, isDismissible = _b === void 0 ? true : _b, _c = props.closeOnEsc, closeOnEsc = _c === void 0 ? true : _c, _d = props.closeOnExternalClick, closeOnExternalClick = _d === void 0 ? true : _d, onClose = props.onClose, title = props.title, children = props.children, _e = props.modalRootId, modalRootId = _e === void 0 ? 'iui-react-portal-container' : _e, _f = props.ownerDocument, ownerDocument = _f === void 0 ? getDocument() : _f, rest = __rest(props, ["isOpen", "isDismissible", "closeOnEsc", "closeOnExternalClick", "onClose", "title", "children", "modalRootId", "ownerDocument"]);
+export const Modal = (props) => {
+    const { isOpen = false, isDismissible = true, closeOnEsc = true, closeOnExternalClick = true, onClose, title, children, modalRootId = 'iui-react-portal-container', ownerDocument = getDocument(), ...rest } = props;
     useTheme();
-    var container = getContainer(modalRootId, ownerDocument);
+    const [container, setContainer] = React.useState();
+    React.useEffect(() => {
+        setContainer(getContainer(modalRootId, ownerDocument));
+        return () => setContainer(undefined);
+    }, [ownerDocument, modalRootId]);
     return !!container ? (ReactDOM.createPortal(React.createElement(Dialog, { isOpen: isOpen, closeOnEsc: closeOnEsc, closeOnExternalClick: closeOnExternalClick, isDismissible: isDismissible, onClose: onClose, preventDocumentScroll: true, trapFocus: true, setFocus: true },
         React.createElement(Dialog.Backdrop, null),
-        React.createElement(Dialog.Main, __assign({ "aria-modal": true }, rest),
+        React.createElement(Dialog.Main, { "aria-modal": true, ...rest },
             React.createElement(Dialog.TitleBar, { titleText: title }),
             children)), container)) : (React.createElement(React.Fragment, null));
 };

package/esm/core/Modal/ModalButtonBar.js

@@ -2,5 +2,5 @@ import { DialogButtonBar } from '../Dialog/DialogButtonBar';
 /**
  * Container for Buttons in modal.
  */
-export var ModalButtonBar = DialogButtonBar;
+export const ModalButtonBar = DialogButtonBar;
 export default ModalButtonBar;

package/esm/core/Modal/ModalContent.js

@@ -2,5 +2,5 @@ import { DialogContent } from '../Dialog/DialogContent';
 /**
  * Container for content in `Modal`.
  */
-export var ModalContent = DialogContent;
+export const ModalContent = DialogContent;
 export default ModalContent;

package/esm/core/{ErrorPage → NonIdealState}/ErrorPage.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import { CommonProps } from '../utils';
-import '@itwin/itwinui-css/css/non-ideal-state.css';
+/** @deprecated Use `NonIdealState` instead. */
 export declare type ErrorPageType = '300' | '301' | '302' | '303' | '304' | '305' | '307' | '308' | '401' | '403' | '404' | '408' | '500' | '502' | '503' | '504' | 'generic';
+/** @deprecated Use `NonIdealState` instead. */
 export declare type ErrorTypeTranslations = {
     badGateway: string;
     error: string;
@@ -13,6 +14,7 @@ export declare type ErrorTypeTranslations = {
     timedOut?: string;
     unauthorized: string;
 };
+/** @deprecated Use `NonIdealState` instead. */
 export declare type ErrorPageProps = {
     /**
      * Type of error controls image and default text
@@ -50,6 +52,8 @@ export declare type ErrorPageProps = {
     translatedErrorMessages?: ErrorTypeTranslations;
 } & Omit<CommonProps, 'title'>;
 /**
+ * @deprecated Use `NonIdealState` instead for a smaller client bundle.
+ *
  * A stylized display to communicate common http errors.
  * @example
  * <ErrorPage errorType='401' />