@itwin/itwinui-react 3.0.0-dev.1 → 3.0.0-dev.10

package/cjs/core/Menu/index.js

@@ -1,17 +1,47 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuItemSkeleton = exports.MenuExtraContent = exports.MenuDivider = exports.MenuItem = exports.Menu = void 0;
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.MenuItemSkeleton =
+  exports.MenuExtraContent =
+  exports.MenuDivider =
+  exports.MenuItem =
+  exports.Menu =
+    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 Menu_js_1 = require("./Menu.js");
-Object.defineProperty(exports, "Menu", { enumerable: true, get: function () { return Menu_js_1.Menu; } });
-var MenuItem_js_1 = require("./MenuItem.js");
-Object.defineProperty(exports, "MenuItem", { enumerable: true, get: function () { return MenuItem_js_1.MenuItem; } });
-var MenuDivider_js_1 = require("./MenuDivider.js");
-Object.defineProperty(exports, "MenuDivider", { enumerable: true, get: function () { return MenuDivider_js_1.MenuDivider; } });
-var MenuExtraContent_js_1 = require("./MenuExtraContent.js");
-Object.defineProperty(exports, "MenuExtraContent", { enumerable: true, get: function () { return MenuExtraContent_js_1.MenuExtraContent; } });
-var MenuItemSkeleton_js_1 = require("./MenuItemSkeleton.js");
-Object.defineProperty(exports, "MenuItemSkeleton", { enumerable: true, get: function () { return MenuItemSkeleton_js_1.MenuItemSkeleton; } });
+var Menu_js_1 = require('./Menu.js');
+Object.defineProperty(exports, 'Menu', {
+  enumerable: true,
+  get: function () {
+    return Menu_js_1.Menu;
+  },
+});
+var MenuItem_js_1 = require('./MenuItem.js');
+Object.defineProperty(exports, 'MenuItem', {
+  enumerable: true,
+  get: function () {
+    return MenuItem_js_1.MenuItem;
+  },
+});
+var MenuDivider_js_1 = require('./MenuDivider.js');
+Object.defineProperty(exports, 'MenuDivider', {
+  enumerable: true,
+  get: function () {
+    return MenuDivider_js_1.MenuDivider;
+  },
+});
+var MenuExtraContent_js_1 = require('./MenuExtraContent.js');
+Object.defineProperty(exports, 'MenuExtraContent', {
+  enumerable: true,
+  get: function () {
+    return MenuExtraContent_js_1.MenuExtraContent;
+  },
+});
+var MenuItemSkeleton_js_1 = require('./MenuItemSkeleton.js');
+Object.defineProperty(exports, 'MenuItemSkeleton', {
+  enumerable: true,
+  get: function () {
+    return MenuItemSkeleton_js_1.MenuItemSkeleton;
+  },
+});

package/cjs/core/Modal/Modal.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import type { DialogMainProps } from '../Dialog/DialogMain.js';
-declare type ModalProps = {
+type ModalProps = {
     /**
      * Modal title.
      */
@@ -30,16 +30,15 @@ declare type ModalProps = {
      */
     onKeyDown?: React.KeyboardEventHandler;
     /**
-     * Id of the root where the modal will be rendered in.
-     * @default 'iui-react-portal-container'
-     */
-    modalRootId?: string;
-    /**
-     * Document where the modal will be rendered.
-     * Can be specified to render in a different document (e.g. a popup window).
-     * @default document
+     * If true, the dialog will be portaled into a <div> inside the nearest `ThemeProvider`.
+     *
+     * Can be set to an object with a `to` property to portal into a specific element.
+     *
+     * @default true
      */
-    ownerDocument?: Document;
+    portal?: boolean | {
+        to: HTMLElement;
+    };
     /**
      * Content of the modal.
      */

package/cjs/core/Modal/Modal.js

@@ -1,40 +1,13 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.Modal = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const react_dom_1 = __importDefault(require("react-dom"));
-const index_js_1 = require("../utils/index.js");
-const index_js_2 = require("../Dialog/index.js");
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../Dialog/index.js');
 /**
  * Modal component which can wrap any content.
  * @example
@@ -57,16 +30,38 @@ const index_js_2 = require("../Dialog/index.js");
  * </Modal>
  */
 exports.Modal = React.forwardRef((props, forwardedRef) => {
-    const { isOpen = false, isDismissible = true, closeOnEsc = true, closeOnExternalClick = true, onClose, title, children, modalRootId = 'iui-react-portal-container', ownerDocument = (0, index_js_1.getDocument)(), ...rest } = props;
-    const [container, setContainer] = React.useState();
-    React.useEffect(() => {
-        setContainer((0, index_js_1.getContainer)(modalRootId, ownerDocument));
-        return () => setContainer(undefined);
-    }, [ownerDocument, modalRootId]);
-    return !!container ? (react_dom_1.default.createPortal(React.createElement(index_js_2.Dialog, { isOpen: isOpen, closeOnEsc: closeOnEsc, closeOnExternalClick: closeOnExternalClick, isDismissible: isDismissible, onClose: onClose, preventDocumentScroll: true, trapFocus: true, setFocus: true, ref: forwardedRef },
-        React.createElement(index_js_2.Dialog.Backdrop, null),
-        React.createElement(index_js_2.Dialog.Main, { "aria-modal": true, ...rest },
-            React.createElement(index_js_2.Dialog.TitleBar, { titleText: title }),
-            children)), container)) : (React.createElement(React.Fragment, null));
+  const {
+    isOpen = false,
+    isDismissible = true,
+    closeOnEsc = true,
+    closeOnExternalClick = true,
+    onClose,
+    title,
+    children,
+    portal = true,
+    ...rest
+  } = props;
+  return React.createElement(
+    index_js_1.Dialog,
+    {
+      isOpen: isOpen,
+      closeOnEsc: closeOnEsc,
+      closeOnExternalClick: closeOnExternalClick,
+      isDismissible: isDismissible,
+      onClose: onClose,
+      preventDocumentScroll: true,
+      trapFocus: true,
+      setFocus: true,
+      ref: forwardedRef,
+      portal: portal,
+    },
+    React.createElement(index_js_1.Dialog.Backdrop, null),
+    React.createElement(
+      index_js_1.Dialog.Main,
+      { 'aria-modal': true, ...rest },
+      React.createElement(index_js_1.Dialog.TitleBar, { titleText: title }),
+      children,
+    ),
+  );
 });
 exports.default = exports.Modal;

package/cjs/core/Modal/ModalButtonBar.js

@@ -1,13 +1,16 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.ModalButtonBar = 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 DialogButtonBar_js_1 = require("../Dialog/DialogButtonBar.js");
+const DialogButtonBar_js_1 = require('../Dialog/DialogButtonBar.js');
 /**
  * Container for Buttons in modal.
  */
-exports.ModalButtonBar = Object.assign({}, DialogButtonBar_js_1.DialogButtonBar);
+exports.ModalButtonBar = Object.assign(
+  {},
+  DialogButtonBar_js_1.DialogButtonBar,
+);
 exports.default = exports.ModalButtonBar;

package/cjs/core/Modal/ModalContent.js

@@ -1,11 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.ModalContent = 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 DialogContent_js_1 = require("../Dialog/DialogContent.js");
+const DialogContent_js_1 = require('../Dialog/DialogContent.js');
 /**
  * Container for content in `Modal`.
  */

package/cjs/core/Modal/index.js

@@ -1,14 +1,29 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.ModalContent = exports.ModalButtonBar = 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 Modal_js_1 = require("./Modal.js");
-Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return Modal_js_1.Modal; } });
-var ModalButtonBar_js_1 = require("./ModalButtonBar.js");
-Object.defineProperty(exports, "ModalButtonBar", { enumerable: true, get: function () { return ModalButtonBar_js_1.ModalButtonBar; } });
-var ModalContent_js_1 = require("./ModalContent.js");
-Object.defineProperty(exports, "ModalContent", { enumerable: true, get: function () { return ModalContent_js_1.ModalContent; } });
+var Modal_js_1 = require('./Modal.js');
+Object.defineProperty(exports, 'Modal', {
+  enumerable: true,
+  get: function () {
+    return Modal_js_1.Modal;
+  },
+});
+var ModalButtonBar_js_1 = require('./ModalButtonBar.js');
+Object.defineProperty(exports, 'ModalButtonBar', {
+  enumerable: true,
+  get: function () {
+    return ModalButtonBar_js_1.ModalButtonBar;
+  },
+});
+var ModalContent_js_1 = require('./ModalContent.js');
+Object.defineProperty(exports, 'ModalContent', {
+  enumerable: true,
+  get: function () {
+    return ModalContent_js_1.ModalContent;
+  },
+});
 exports.default = './Modal';

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import type { CommonProps } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 /** @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';
+export 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 = {
+export type ErrorTypeTranslations = {
     badGateway: string;
     error: string;
     forbidden: string;
@@ -14,8 +14,7 @@ export declare type ErrorTypeTranslations = {
     timedOut?: string;
     unauthorized: string;
 };
-/** @deprecated Use `NonIdealState` instead. */
-export declare type ErrorPageProps = {
+type ErrorPageProps = {
     /**
      * Type of error controls image and default text
      */
@@ -50,7 +49,7 @@ export declare type ErrorPageProps = {
      * Used to translate default error messages, if no specific @errorName passed in
      */
     translatedErrorMessages?: ErrorTypeTranslations;
-} & Omit<CommonProps, 'title'>;
+};
 /**
  * @deprecated Use `NonIdealState` instead for a smaller client bundle.
  *
@@ -58,5 +57,5 @@ export declare type ErrorPageProps = {
  * @example
  * <ErrorPage errorType='401' />
  */
-export declare const ErrorPage: (props: ErrorPageProps) => JSX.Element;
+export declare const ErrorPage: PolymorphicForwardRefComponent<"div", ErrorPageProps>;
 export default ErrorPage;

package/cjs/core/NonIdealState/ErrorPage.js

@@ -1,37 +1,47 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.ErrorPage = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const index_js_1 = require("../Buttons/Button/index.js");
-const NonIdealState_js_1 = require("./NonIdealState.js");
-const itwinui_illustrations_react_1 = require("@itwin/itwinui-illustrations-react");
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../Buttons/Button/index.js');
+const NonIdealState_js_1 = require('./NonIdealState.js');
+const index_js_2 = require('../ProgressIndicators/index.js');
+const index_js_3 = require('../utils/index.js');
+const Svg401 = React.lazy(() =>
+  (0, index_js_3.dynamicImport)('@itwin/itwinui-illustrations-react/Svg401'),
+);
+const Svg403 = React.lazy(() =>
+  (0, index_js_3.dynamicImport)('@itwin/itwinui-illustrations-react/Svg403'),
+);
+const Svg404 = React.lazy(() =>
+  (0, index_js_3.dynamicImport)('@itwin/itwinui-illustrations-react/Svg404'),
+);
+const Svg500 = React.lazy(() =>
+  (0, index_js_3.dynamicImport)('@itwin/itwinui-illustrations-react/Svg500'),
+);
+const Svg502 = React.lazy(() =>
+  (0, index_js_3.dynamicImport)('@itwin/itwinui-illustrations-react/Svg502'),
+);
+const Svg503 = React.lazy(() =>
+  (0, index_js_3.dynamicImport)('@itwin/itwinui-illustrations-react/Svg503'),
+);
+const SvgError = React.lazy(() =>
+  (0, index_js_3.dynamicImport)('@itwin/itwinui-illustrations-react/SvgError'),
+);
+const SvgRedirect = React.lazy(() =>
+  (0, index_js_3.dynamicImport)(
+    '@itwin/itwinui-illustrations-react/SvgRedirect',
+  ),
+);
+const SvgTimedOut = React.lazy(() =>
+  (0, index_js_3.dynamicImport)(
+    '@itwin/itwinui-illustrations-react/SvgTimedOut',
+  ),
+);
 /**
  * @deprecated Use `NonIdealState` instead for a smaller client bundle.
  *
@@ -39,126 +49,157 @@ const itwinui_illustrations_react_1 = require("@itwin/itwinui-illustrations-reac
  * @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.createElement(itwinui_illustrations_react_1.SvgRedirect, null);
-            }
-            case '401': {
-                return React.createElement(itwinui_illustrations_react_1.Svg401, null);
-            }
-            case '403': {
-                return React.createElement(itwinui_illustrations_react_1.Svg403, null);
-            }
-            case '404': {
-                return React.createElement(itwinui_illustrations_react_1.Svg404, null);
-            }
-            case '408':
-            case '504': {
-                return React.createElement(itwinui_illustrations_react_1.SvgTimedOut, null);
-            }
-            case '500': {
-                return React.createElement(itwinui_illustrations_react_1.Svg500, null);
-            }
-            case '502': {
-                return React.createElement(itwinui_illustrations_react_1.Svg502, null);
-            }
-            case '503': {
-                return React.createElement(itwinui_illustrations_react_1.Svg503, null);
-            }
-            case 'generic':
-            default: {
-                return React.createElement(itwinui_illustrations_react_1.SvgError, null);
-            }
-        }
+exports.ErrorPage = React.forwardRef((props, forwardedRef) => {
+  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.createElement(SvgRedirect, null);
+      }
+      case '401': {
+        return React.createElement(Svg401, null);
+      }
+      case '403': {
+        return React.createElement(Svg403, null);
+      }
+      case '404': {
+        return React.createElement(Svg404, null);
+      }
+      case '408':
+      case '504': {
+        return React.createElement(SvgTimedOut, null);
+      }
+      case '500': {
+        return React.createElement(Svg500, null);
+      }
+      case '502': {
+        return React.createElement(Svg502, null);
+      }
+      case '503': {
+        return React.createElement(Svg503, null);
+      }
+      case 'generic':
+      default: {
+        return React.createElement(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 getHeadingMessage() {
+    if (errorName) {
+      return errorName;
     }
-    function getPrimaryButton() {
-        if (!primaryButtonHandle || !primaryButtonLabel) {
-            return undefined;
-        }
-        return (React.createElement(index_js_1.Button, { styleType: 'high-visibility', onClick: primaryButtonHandle }, primaryButtonLabel));
+    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 getSecondaryButton() {
-        if (!secondaryButtonHandle || !secondaryButtonLabel) {
-            return undefined;
-        }
-        return (React.createElement(index_js_1.Button, { styleType: 'default', onClick: secondaryButtonHandle }, secondaryButtonLabel));
+  }
+  function getPrimaryButton() {
+    if (!primaryButtonHandle || !primaryButtonLabel) {
+      return undefined;
     }
-    function getActions() {
-        const primaryButton = getPrimaryButton();
-        const secondaryButton = getSecondaryButton();
-        if (!primaryButton && !secondaryButton) {
-            return undefined;
-        }
-        return (React.createElement(React.Fragment, null,
-            primaryButton,
-            secondaryButton));
+    return React.createElement(
+      index_js_1.Button,
+      { styleType: 'high-visibility', onClick: primaryButtonHandle },
+      primaryButtonLabel,
+    );
+  }
+  function getSecondaryButton() {
+    if (!secondaryButtonHandle || !secondaryButtonLabel) {
+      return undefined;
     }
-    return (React.createElement(NonIdealState_js_1.NonIdealState, { svg: getErrorIcon(), heading: getHeadingMessage(), description: errorMessage, actions: getActions(), ...rest }));
-};
-exports.ErrorPage = ErrorPage;
+    return React.createElement(
+      index_js_1.Button,
+      { styleType: 'default', onClick: secondaryButtonHandle },
+      secondaryButtonLabel,
+    );
+  }
+  function getActions() {
+    const primaryButton = getPrimaryButton();
+    const secondaryButton = getSecondaryButton();
+    if (!primaryButton && !secondaryButton) {
+      return undefined;
+    }
+    return React.createElement(
+      React.Fragment,
+      null,
+      primaryButton,
+      secondaryButton,
+    );
+  }
+  return React.createElement(NonIdealState_js_1.NonIdealState, {
+    svg: React.createElement(
+      React.Suspense,
+      { fallback: React.createElement(index_js_2.ProgressRadial, null) },
+      getErrorIcon(),
+    ),
+    heading: getHeadingMessage(),
+    description: errorMessage,
+    actions: getActions(),
+    ref: forwardedRef,
+    ...rest,
+  });
+});
 exports.default = exports.ErrorPage;