@itwin/itwinui-react 2.0.0-dev.2 → 2.0.0-dev.4

package/cjs/core/Menu/MenuItem.js

@@ -1,26 +1,4 @@
 "use strict";
-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;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,27 +8,27 @@ exports.MenuItem = 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"));
-var utils_1 = require("../utils");
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/menu.css");
-var Menu_1 = require("./Menu");
+const Menu_1 = require("./Menu");
 /**
  * Context used to provide menu item ref to sub-menu items.
  */
-var MenuItemContext = react_1.default.createContext({ ref: undefined });
+const MenuItemContext = react_1.default.createContext({ ref: undefined });
 /**
  * Basic menu item component. Should be used inside `Menu` component for each item.
  */
-exports.MenuItem = react_1.default.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"]);
+exports.MenuItem = react_1.default.forwardRef((props, ref) => {
+    const { children, isSelected, disabled, value, onClick, sublabel, size = !!sublabel ? 'large' : 'default', icon, badge, className, style, role = 'menuitem', subMenuItems = [], ...rest } = props;
     (0, utils_1.useTheme)();
-    var menuItemRef = react_1.default.useRef(null);
-    var refs = (0, utils_1.useMergedRefs)(menuItemRef, ref);
-    var parentMenuItemRef = react_1.default.useContext(MenuItemContext).ref;
-    var subMenuRef = react_1.default.useRef(null);
-    var _d = react_1.default.useState(false), isSubmenuVisible = _d[0], setIsSubmenuVisible = _d[1];
-    var onKeyDown = function (event) {
+    const menuItemRef = react_1.default.useRef(null);
+    const refs = (0, utils_1.useMergedRefs)(menuItemRef, ref);
+    const { ref: parentMenuItemRef } = react_1.default.useContext(MenuItemContext);
+    const subMenuRef = react_1.default.useRef(null);
+    const [isSubmenuVisible, setIsSubmenuVisible] = react_1.default.useState(false);
+    const onKeyDown = (event) => {
         var _a;
         if (event.altKey) {
             return;
@@ -81,17 +59,17 @@ exports.MenuItem = react_1.default.forwardRef(function (props, ref) {
                 break;
         }
     };
-    var listItem = (react_1.default.createElement("li", __assign({ className: (0, classnames_1.default)('iui-menu-item', {
+    const listItem = (react_1.default.createElement("li", { className: (0, classnames_1.default)('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_1.default.cloneElement(icon, {
                 className: (0, classnames_1.default)(icon.props.className, 'iui-icon'),
@@ -105,7 +83,7 @@ exports.MenuItem = react_1.default.forwardRef(function (props, ref) {
                 className: (0, classnames_1.default)(badge.props.className, 'iui-icon'),
             })));
     return subMenuItems.length === 0 ? (listItem) : (react_1.default.createElement(MenuItemContext.Provider, { value: { ref: menuItemRef } },
-        react_1.default.createElement(utils_1.Popover, { placement: 'right-start', visible: isSubmenuVisible, appendTo: 'parent', content: react_1.default.createElement("div", { onMouseLeave: function () { return setIsSubmenuVisible(false); }, onBlur: function (e) {
+        react_1.default.createElement(utils_1.Popover, { placement: 'right-start', visible: isSubmenuVisible, appendTo: 'parent', content: react_1.default.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/cjs/core/Menu/MenuItemSkeleton.js

@@ -1,26 +1,4 @@
 "use strict";
-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;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,19 +8,22 @@ exports.MenuItemSkeleton = 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"));
-var utils_1 = require("../utils");
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/menu.css");
 /**
  * Menu item that uses skeletons to indicate loading state.
  */
-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"]);
+const MenuItemSkeleton = (props) => {
+    const { hasSublabel, hasIcon, contentWidth, translatedStrings = { loading: 'Loading…' }, className, style, ...rest } = props;
     (0, utils_1.useTheme)();
-    return (react_1.default.createElement("li", __assign({ className: (0, classnames_1.default)('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_1.default.createElement("li", { className: (0, classnames_1.default)('iui-menu-item', 'iui-menu-item-skeleton', { 'iui-large': hasSublabel }, className), style: {
+            ...{
+                '--iui-menu-item-content-skeleton-max-width': contentWidth,
+            },
+            ...style,
+        }, ...rest },
         hasIcon && react_1.default.createElement("div", { className: 'iui-icon iui-skeleton', "aria-hidden": true }),
         react_1.default.createElement("span", { className: 'iui-content' },
             react_1.default.createElement("div", { className: 'iui-menu-label iui-skeleton', "aria-hidden": true }),

package/cjs/core/Modal/Modal.js

@@ -1,26 +1,4 @@
 "use strict";
-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;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,11 +8,11 @@ exports.Modal = 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 react_dom_1 = __importDefault(require("react-dom"));
-var utils_1 = require("../utils");
+const react_1 = __importDefault(require("react"));
+const react_dom_1 = __importDefault(require("react-dom"));
+const utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/dialog.css");
-var Dialog_1 = require("../Dialog");
+const Dialog_1 = require("../Dialog");
 /**
  * Modal component which can wrap any content.
  * @example
@@ -56,13 +34,17 @@ var Dialog_1 = require("../Dialog");
  *   </ModalButtonBar>
  * </Modal>
  */
-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 ? (0, utils_1.getDocument)() : _f, rest = __rest(props, ["isOpen", "isDismissible", "closeOnEsc", "closeOnExternalClick", "onClose", "title", "children", "modalRootId", "ownerDocument"]);
+const Modal = (props) => {
+    const { isOpen = false, isDismissible = true, closeOnEsc = true, closeOnExternalClick = true, onClose, title, children, modalRootId = 'iui-react-portal-container', ownerDocument = (0, utils_1.getDocument)(), ...rest } = props;
     (0, utils_1.useTheme)();
-    var container = (0, utils_1.getContainer)(modalRootId, ownerDocument);
+    const [container, setContainer] = react_1.default.useState();
+    react_1.default.useEffect(() => {
+        setContainer((0, utils_1.getContainer)(modalRootId, ownerDocument));
+        return () => setContainer(undefined);
+    }, [ownerDocument, modalRootId]);
     return !!container ? (react_dom_1.default.createPortal(react_1.default.createElement(Dialog_1.Dialog, { isOpen: isOpen, closeOnEsc: closeOnEsc, closeOnExternalClick: closeOnExternalClick, isDismissible: isDismissible, onClose: onClose, preventDocumentScroll: true, trapFocus: true, setFocus: true },
         react_1.default.createElement(Dialog_1.Dialog.Backdrop, null),
-        react_1.default.createElement(Dialog_1.Dialog.Main, __assign({ "aria-modal": true }, rest),
+        react_1.default.createElement(Dialog_1.Dialog.Main, { "aria-modal": true, ...rest },
             react_1.default.createElement(Dialog_1.Dialog.TitleBar, { titleText: title }),
             children)), container)) : (react_1.default.createElement(react_1.default.Fragment, null));
 };

package/cjs/core/Modal/ModalButtonBar.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalButtonBar = void 0;
-var DialogButtonBar_1 = require("../Dialog/DialogButtonBar");
+const DialogButtonBar_1 = require("../Dialog/DialogButtonBar");
 /**
  * Container for Buttons in modal.
  */

package/cjs/core/Modal/ModalContent.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalContent = void 0;
-var DialogContent_1 = require("../Dialog/DialogContent");
+const DialogContent_1 = require("../Dialog/DialogContent");
 /**
  * Container for content in `Modal`.
  */

package/cjs/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' />

package/cjs/core/NonIdealState/ErrorPage.js

@@ -0,0 +1,144 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorPage = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+const react_1 = __importDefault(require("react"));
+const Button_1 = require("../Buttons/Button");
+const NonIdealState_1 = require("./NonIdealState");
+const itwinui_illustrations_react_1 = require("@itwin/itwinui-illustrations-react");
+/**
+ * @deprecated Use `NonIdealState` instead for a smaller client bundle.
+ *
+ * A stylized display to communicate common http errors.
+ * @example
+ * <ErrorPage errorType='401' />
+ */
+const ErrorPage = (props) => {
+    const { errorType, errorName, errorMessage, primaryButtonHandle, primaryButtonLabel, secondaryButtonHandle, secondaryButtonLabel, translatedErrorMessages, ...rest } = props;
+    const defaultErrorMessages = {
+        badGateway: 'Bad gateway',
+        error: 'Error',
+        forbidden: 'Forbidden',
+        internalServerError: 'Internal server error',
+        redirect: 'Redirect',
+        pageNotFound: 'Page not found',
+        serviceUnavailable: 'Service unavailable',
+        timedOut: 'Timed out',
+        unauthorized: 'Unauthorized',
+        ...translatedErrorMessages,
+    };
+    function getErrorIcon() {
+        switch (errorType) {
+            case '300':
+            case '301':
+            case '302':
+            case '303':
+            case '304':
+            case '305':
+            case '307':
+            case '308': {
+                return react_1.default.createElement(itwinui_illustrations_react_1.SvgRedirect, null);
+            }
+            case '401': {
+                return react_1.default.createElement(itwinui_illustrations_react_1.Svg401, null);
+            }
+            case '403': {
+                return react_1.default.createElement(itwinui_illustrations_react_1.Svg403, null);
+            }
+            case '404': {
+                return react_1.default.createElement(itwinui_illustrations_react_1.Svg404, null);
+            }
+            case '408':
+            case '504': {
+                return react_1.default.createElement(itwinui_illustrations_react_1.SvgTimedOut, null);
+            }
+            case '500': {
+                return react_1.default.createElement(itwinui_illustrations_react_1.Svg500, null);
+            }
+            case '502': {
+                return react_1.default.createElement(itwinui_illustrations_react_1.Svg502, null);
+            }
+            case '503': {
+                return react_1.default.createElement(itwinui_illustrations_react_1.Svg503, null);
+            }
+            case 'generic':
+            default: {
+                return react_1.default.createElement(itwinui_illustrations_react_1.SvgError, null);
+            }
+        }
+    }
+    function getHeadingMessage() {
+        if (errorName) {
+            return errorName;
+        }
+        switch (errorType) {
+            case '300':
+            case '301':
+            case '302':
+            case '303':
+            case '304':
+            case '305':
+            case '307':
+            case '308': {
+                return defaultErrorMessages.redirect || '';
+            }
+            case '401': {
+                return defaultErrorMessages.unauthorized;
+            }
+            case '403': {
+                return defaultErrorMessages.forbidden;
+            }
+            case '404': {
+                return defaultErrorMessages.pageNotFound;
+            }
+            case '408':
+            case '504': {
+                return defaultErrorMessages.timedOut || '';
+            }
+            case '500': {
+                return defaultErrorMessages.internalServerError;
+            }
+            case '502': {
+                return defaultErrorMessages.badGateway;
+            }
+            case '503': {
+                return defaultErrorMessages.serviceUnavailable;
+            }
+            case 'generic':
+            default: {
+                return defaultErrorMessages.error;
+            }
+        }
+    }
+    function getPrimaryButton() {
+        if (!primaryButtonHandle || !primaryButtonLabel) {
+            return undefined;
+        }
+        return (react_1.default.createElement(Button_1.Button, { styleType: 'high-visibility', onClick: primaryButtonHandle }, primaryButtonLabel));
+    }
+    function getSecondaryButton() {
+        if (!secondaryButtonHandle || !secondaryButtonLabel) {
+            return undefined;
+        }
+        return (react_1.default.createElement(Button_1.Button, { styleType: 'default', onClick: secondaryButtonHandle }, secondaryButtonLabel));
+    }
+    function getActions() {
+        const primaryButton = getPrimaryButton();
+        const secondaryButton = getSecondaryButton();
+        if (!primaryButton && !secondaryButton) {
+            return undefined;
+        }
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            primaryButton,
+            secondaryButton));
+    }
+    return (react_1.default.createElement(NonIdealState_1.NonIdealState, { svg: getErrorIcon(), heading: getHeadingMessage(), description: errorMessage, actions: getActions(), ...rest }));
+};
+exports.ErrorPage = ErrorPage;
+exports.default = exports.ErrorPage;

package/cjs/core/NonIdealState/NonIdealState.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import '@itwin/itwinui-css/css/non-ideal-state.css';
+export declare type NonIdealStateProps = {
+    /**
+     * An svg component, preferably from @itwin/itwinui-illustrations-react.
+     *
+     * @example
+     * import { Svg404 } from '@itwin/itwinui-illustrations-react';
+     * <NonIdealState svg={<Svg404 />} heading='Not found' />
+     */
+    svg: React.ReactNode;
+    /**
+     * Primary heading for the error page
+     */
+    heading?: React.ReactNode;
+    /**
+     * Secondary text to explain the error
+     * Can include html in order to provide a hyperlink
+     * E.g. `Please visit <a href="https://www.bentley.com/help">our support page</a> for help.`
+     */
+    description?: React.ReactNode;
+    /**
+     * Actions to provide the user with a way to recover from the error.
+     * Typically should be a primary and secondary button.
+     *
+     * @example
+     * <ErrorPage
+     *  actions={
+     *   <>
+     *    <Button styleType={'high-visibility'}>Retry</Button>
+     *    <Button>Contact us</Button>
+     *   </>
+     *  }
+     * />
+     */
+    actions?: React.ReactNode;
+} & React.ComponentPropsWithoutRef<'div'>;
+/**
+ * A stylized display to communicate common http errors and other non-ideal states.
+ * Works well with svgs from @itwin/itwinui-illustrations-react.
+ *
+ * @example
+ * <NonIdealState svg={<Svg404 />} heading='Not found' />
+ */
+export declare const NonIdealState: (props: NonIdealStateProps) => JSX.Element;
+export default NonIdealState;

package/cjs/core/NonIdealState/NonIdealState.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NonIdealState = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../utils");
+const classnames_1 = __importDefault(require("classnames"));
+require("@itwin/itwinui-css/css/non-ideal-state.css");
+/**
+ * A stylized display to communicate common http errors and other non-ideal states.
+ * Works well with svgs from @itwin/itwinui-illustrations-react.
+ *
+ * @example
+ * <NonIdealState svg={<Svg404 />} heading='Not found' />
+ */
+const NonIdealState = (props) => {
+    const { className, svg, heading, description, actions, ...rest } = props;
+    (0, utils_1.useTheme)();
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-non-ideal-state', className), ...rest },
+        react_1.default.createElement("div", { className: 'iui-non-ideal-state-illustration' }, svg),
+        heading && react_1.default.createElement("div", { className: 'iui-non-ideal-state-title' }, heading),
+        description && (react_1.default.createElement("div", { className: 'iui-non-ideal-state-description' }, description)),
+        actions && react_1.default.createElement("div", { className: 'iui-non-ideal-state-actions' }, actions)));
+};
+exports.NonIdealState = NonIdealState;
+exports.default = exports.NonIdealState;

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

@@ -1,4 +1,6 @@
 export { ErrorPage } from './ErrorPage';
 export type { ErrorPageProps, ErrorPageType, ErrorTypeTranslations, } from './ErrorPage';
-declare const _default: "./ErrorPage";
+export { NonIdealState } from './NonIdealState';
+export type { NonIdealStateProps } from './NonIdealState';
+declare const _default: "./NonIdealState";
 export default _default;

package/cjs/core/{ErrorPage → NonIdealState}/index.js

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

package/cjs/core/ProgressIndicators/ProgressLinear/ProgressLinear.js

@@ -1,26 +1,4 @@
 "use strict";
-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;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,9 +8,9 @@ exports.ProgressLinear = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var react_1 = __importDefault(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
-var utils_1 = require("../../utils");
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const utils_1 = require("../../utils");
 require("@itwin/itwinui-css/css/progress-indicator.css");
 /**
  * Shows progress on a linear bar
@@ -49,20 +27,19 @@ require("@itwin/itwinui-css/css/progress-indicator.css");
  * <ProgressLinear status='positive' labels={['Upload done!', <SvgStatusSuccessHollow />]} />
  * <ProgressLinear status='negative' />
  */
-var ProgressLinear = function (props) {
-    var _a;
-    var _b = props.value, value = _b === void 0 ? 0 : _b, _c = props.indeterminate, indeterminate = _c === void 0 ? false : _c, _d = props.labels, labels = _d === void 0 ? [] : _d, _e = props.isAnimated, isAnimated = _e === void 0 ? false : _e, status = props.status, className = props.className, style = props.style, rest = __rest(props, ["value", "indeterminate", "labels", "isAnimated", "status", "className", "style"]);
+const ProgressLinear = (props) => {
+    const { value = 0, indeterminate = false, labels = [], isAnimated = false, status, className, style, ...rest } = props;
     (0, utils_1.useTheme)();
-    var boundedValue = Math.min(100, Math.max(0, value));
-    return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-progress-indicator-linear', (_a = {},
-            _a["iui-".concat(status)] = !!status,
-            _a), className), style: style }, rest),
+    const boundedValue = Math.min(100, Math.max(0, value));
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-progress-indicator-linear', {
+            [`iui-${status}`]: !!status,
+        }, className), style: style, ...rest },
         react_1.default.createElement("div", { className: 'iui-track' },
             react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-fill', {
                     'iui-determinate': !indeterminate && isAnimated,
                     'iui-indeterminate': indeterminate,
-                }), style: { width: indeterminate ? '100%' : "".concat(boundedValue, "%") } })),
-        labels.length > 0 && (react_1.default.createElement("div", { className: 'iui-label' }, labels.map(function (label, index) { return (react_1.default.createElement("span", { key: index }, label)); })))));
+                }), style: { width: indeterminate ? '100%' : `${boundedValue}%` } })),
+        labels.length > 0 && (react_1.default.createElement("div", { className: 'iui-label' }, labels.map((label, index) => (react_1.default.createElement("span", { key: index }, label)))))));
 };
 exports.ProgressLinear = ProgressLinear;
 exports.default = exports.ProgressLinear;