@itwin/core-react 4.0.0-dev.1 → 4.0.0-dev.11

package/lib/cjs/core-react/listbox/Listbox.scss

@@ -4,7 +4,7 @@
 *--------------------------------------------------------------------------------------------*/
 @import "../index";
 
-$uicore-list-item-height: $uicore-baseline * 2; ///  22px; /// ~1.618;
+$uicore-list-item-height: calc(var(--iui-size-s) * 2);
 
 ul.core-listbox {
   list-style: none;
@@ -17,19 +17,19 @@ ul.core-listbox {
   display: flex;
   flex-direction: column;
   overflow: auto;
-  color: $buic-foreground-body;
-  border: 1px solid $buic-foreground-disabled; // default border: disabled or muted foreground
+  color: var(--iui-color-text);
+  border: 1px solid var(--iui-color-border);
   position: relative; // required to properly set scrollTop position
 
   @include uicore-touch-scrolling;
   @include uicore-scrollbar();
 
   &:focus {
-    border-color: $buic-foreground-focus;
+    border-color: var(--iui-color-border-accent);
 
     li.core-listbox-item.focused {
-      background-color: $buic-row-hover;
-      border: 1px solid $buic-foreground-primary;
+      background-color: var(--iui-color-background-accent-muted);
+      border: 1px solid var(--iui-color-border-accent);
     }
   }
 
@@ -38,17 +38,17 @@ ul.core-listbox {
     line-height: $uicore-list-item-height;
     padding-left: 4px;
 
-    &[aria-selected='true'] {
-      background-color: $buic-row-selection;
+    &[aria-selected="true"] {
+      background-color: var(--iui-color-background-accent-muted);
     }
 
     &[aria-disabled="true"] {
       pointer-events: none;
-      color: $buic-foreground-disabled;
+      color: var(--iui-color-text-disabled);
     }
 
     &:hover {
-      background-color: $buic-row-hover;
+      background-color: var(--iui-color-background-hover);
     }
   }
-}
+}

package/lib/cjs/core-react/loading/LoadingPrompt.scss

@@ -17,13 +17,13 @@
     font-size: 32px;
     font-weight: 600;
     margin-bottom: 10px;
-    color: $buic-foreground-body;
+    color: var(--iui-color-text);
   }
 
   .message {
     font-size: 14px;
     margin-bottom: 1.75em;
-    color: $buic-foreground-body;
+    color: var(--iui-color-text);
   }
 }
 

package/lib/cjs/core-react/loading/LoadingSpinner.d.ts

@@ -4,7 +4,6 @@
 import "./LoadingSpinner.scss";
 import * as React from "react";
 import { ProgressRadialProps } from "@itwin/itwinui-react";
-import { SpinnerSize } from "./Spinner";
 /** Type for ProgressRadialProps.size
  * @public
  */
@@ -21,7 +20,7 @@ export interface LoadingSpinnerProps extends Omit<ProgressRadialProps, "size"> {
        * Size of the progress indicator. Defaults to medium size.
        * @default ''
        */
-    size?: RadialSizeType | SpinnerSize;
+    size?: RadialSizeType;
 }
 /**
  * A loading spinner component that optionally shows a text message.

package/lib/cjs/core-react/loading/LoadingSpinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingSpinner.d.ts","sourceRoot":"","sources":["../../../../src/core-react/loading/LoadingSpinner.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAC/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAkB,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC;;GAEG;AACH,oBAAY,cAAc,GAAG,mBAAmB,CAAC,MAAM,CAAC,CAAC;AAEzD;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,mBAAmB,EAAE,MAAM,CAAC;IAC5E,+BAA+B;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;SAGK;IACL,IAAI,CAAC,EAAE,cAAc,GAAG,WAAW,CAAC;CACrC;AAED;;;GAGG;AACH,qBAAa,cAAe,SAAQ,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC;IAC1E,OAAc,YAAY,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAEtD;IAEc,MAAM;CA0BvB"}
+{"version":3,"file":"LoadingSpinner.d.ts","sourceRoot":"","sources":["../../../../src/core-react/loading/LoadingSpinner.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAC/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAkB,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAE3E;;GAEG;AACH,oBAAY,cAAc,GAAG,mBAAmB,CAAC,MAAM,CAAC,CAAC;AAEzD;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,mBAAmB,EAAE,MAAM,CAAC;IAC5E,+BAA+B;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;SAGK;IACL,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB;AAED;;;GAGG;AACH,qBAAa,cAAe,SAAQ,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC;IAC1E,OAAc,YAAY,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAEtD;IAEc,MAAM;CAUvB"}

package/lib/cjs/core-react/loading/LoadingSpinner.js

@@ -11,7 +11,6 @@ exports.LoadingSpinner = void 0;
 require("./LoadingSpinner.scss");
 const React = require("react");
 const itwinui_react_1 = require("@itwin/itwinui-react");
-const Spinner_1 = require("./Spinner");
 /**
  * A loading spinner component that optionally shows a text message.
  * @public
@@ -19,23 +18,9 @@ const Spinner_1 = require("./Spinner");
 class LoadingSpinner extends React.PureComponent {
     render() {
         const { message, messageOnTop, size, ...rest } = this.props;
-        const getRadialSize = (sizeProp) => {
-            if (sizeProp === undefined || typeof sizeProp === "string")
-                return sizeProp;
-            else {
-                switch (sizeProp) {
-                    case Spinner_1.SpinnerSize.Large: // eslint-disable-line deprecation/deprecation
-                    case Spinner_1.SpinnerSize.XLarge: // eslint-disable-line deprecation/deprecation
-                        return "large";
-                    case Spinner_1.SpinnerSize.Small: // eslint-disable-line deprecation/deprecation
-                        return "x-small";
-                }
-            }
-            return undefined;
-        };
         return (React.createElement("div", { className: "core-ls" },
             (message && messageOnTop) && React.createElement("span", { className: "ls-message-top" }, message),
-            React.createElement(itwinui_react_1.ProgressRadial, { size: getRadialSize(size), ...rest, indeterminate: true }),
+            React.createElement(itwinui_react_1.ProgressRadial, { size: size, ...rest, indeterminate: true }),
             (message && !messageOnTop) && React.createElement("span", { className: "ls-message-bottom" }, message)));
     }
 }

package/lib/cjs/core-react/loading/LoadingSpinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingSpinner.js","sourceRoot":"","sources":["../../../../src/core-react/loading/LoadingSpinner.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,iCAA+B;AAC/B,+BAA+B;AAC/B,wDAA2E;AAC3E,uCAAwC;AAsBxC;;;GAGG;AACH,MAAa,cAAe,SAAQ,KAAK,CAAC,aAAkC;IAK1D,MAAM;QACpB,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAE5D,MAAM,aAAa,GAAG,CAAC,QAAkB,EAAE,EAAE;YAC3C,IAAI,QAAQ,KAAK,SAAS,IAAI,OAAO,QAAQ,KAAK,QAAQ;gBACxD,OAAO,QAAQ,CAAC;iBACb;gBACH,QAAQ,QAAQ,EAAE;oBAChB,KAAK,qBAAW,CAAC,KAAK,CAAC,CAAG,8CAA8C;oBACxE,KAAK,qBAAW,CAAC,MAAM,EAAG,8CAA8C;wBACtE,OAAO,OAAO,CAAC;oBACjB,KAAK,qBAAW,CAAC,KAAK,EAAI,8CAA8C;wBACtE,OAAO,SAAS,CAAC;iBACpB;aACF;YACD,OAAO,SAAS,CAAC;QACnB,CAAC,CAAC;QAEF,OAAO,CACL,6BAAK,SAAS,EAAC,SAAS;YACrB,CAAC,OAAO,IAAI,YAAY,CAAC,IAAI,8BAAM,SAAS,EAAC,gBAAgB,IAAE,OAAO,CAAQ;YAC/E,oBAAC,8BAAc,IAAC,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,KAAM,IAAI,EAAE,aAAa,SAAG;YACpE,CAAC,OAAO,IAAI,CAAC,YAAY,CAAC,IAAI,8BAAM,SAAS,EAAC,mBAAmB,IAAE,OAAO,CAAQ,CAC/E,CACP,CAAC;IACJ,CAAC;;AA9BH,wCA+BC;AA9Be,2BAAY,GAAiC;IACzD,YAAY,EAAE,KAAK;CACpB,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Loading\r\n */\r\n\r\nimport \"./LoadingSpinner.scss\";\r\nimport * as React from \"react\";\r\nimport { ProgressRadial, ProgressRadialProps } from \"@itwin/itwinui-react\";\r\nimport { SpinnerSize } from \"./Spinner\";\r\n\r\n/** Type for ProgressRadialProps.size\r\n * @public\r\n */\r\nexport type RadialSizeType = ProgressRadialProps[\"size\"];\r\n\r\n/** Properties for [[LoadingSpinner]] component\r\n * @public\r\n */\r\nexport interface LoadingSpinnerProps extends Omit<ProgressRadialProps, \"size\"> {\r\n  /** Message (text) displayed */\r\n  message?: string;\r\n  /** Position the message above or below the spinner (defaults to bottom) */\r\n  messageOnTop?: boolean;\r\n  /**\r\n     * Size of the progress indicator. Defaults to medium size.\r\n     * @default ''\r\n     */\r\n  size?: RadialSizeType | SpinnerSize; // eslint-disable-line deprecation/deprecation\r\n}\r\n\r\n/**\r\n * A loading spinner component that optionally shows a text message.\r\n * @public\r\n */\r\nexport class LoadingSpinner extends React.PureComponent<LoadingSpinnerProps> {\r\n  public static defaultProps: Partial<LoadingSpinnerProps> = {\r\n    messageOnTop: false,\r\n  };\r\n\r\n  public override render() {\r\n    const { message, messageOnTop, size, ...rest } = this.props;\r\n    type SizeType = LoadingSpinnerProps[\"size\"];\r\n    const getRadialSize = (sizeProp: SizeType) => {\r\n      if (sizeProp === undefined || typeof sizeProp === \"string\")\r\n        return sizeProp;\r\n      else {\r\n        switch (sizeProp) {\r\n          case SpinnerSize.Large:   // eslint-disable-line deprecation/deprecation\r\n          case SpinnerSize.XLarge:  // eslint-disable-line deprecation/deprecation\r\n            return \"large\";\r\n          case SpinnerSize.Small:   // eslint-disable-line deprecation/deprecation\r\n            return \"x-small\";\r\n        }\r\n      }\r\n      return undefined;\r\n    };\r\n\r\n    return (\r\n      <div className=\"core-ls\">\r\n        {(message && messageOnTop) && <span className=\"ls-message-top\">{message}</span>}\r\n        <ProgressRadial size={getRadialSize(size)} {...rest} indeterminate />\r\n        {(message && !messageOnTop) && <span className=\"ls-message-bottom\">{message}</span>}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"LoadingSpinner.js","sourceRoot":"","sources":["../../../../src/core-react/loading/LoadingSpinner.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,iCAA+B;AAC/B,+BAA+B;AAC/B,wDAA2E;AAsB3E;;;GAGG;AACH,MAAa,cAAe,SAAQ,KAAK,CAAC,aAAkC;IAK1D,MAAM;QACpB,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC5D,OAAO,CACL,6BAAK,SAAS,EAAC,SAAS;YACrB,CAAC,OAAO,IAAI,YAAY,CAAC,IAAI,8BAAM,SAAS,EAAC,gBAAgB,IAAE,OAAO,CAAQ;YAC/E,oBAAC,8BAAc,IAAC,IAAI,EAAE,IAAI,KAAM,IAAI,EAAE,aAAa,SAAG;YACrD,CAAC,OAAO,IAAI,CAAC,YAAY,CAAC,IAAI,8BAAM,SAAS,EAAC,mBAAmB,IAAE,OAAO,CAAQ,CAC/E,CACP,CAAC;IACJ,CAAC;;AAdH,wCAeC;AAde,2BAAY,GAAiC;IACzD,YAAY,EAAE,KAAK;CACpB,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Loading\r\n */\r\n\r\nimport \"./LoadingSpinner.scss\";\r\nimport * as React from \"react\";\r\nimport { ProgressRadial, ProgressRadialProps } from \"@itwin/itwinui-react\";\r\n\r\n/** Type for ProgressRadialProps.size\r\n * @public\r\n */\r\nexport type RadialSizeType = ProgressRadialProps[\"size\"];\r\n\r\n/** Properties for [[LoadingSpinner]] component\r\n * @public\r\n */\r\nexport interface LoadingSpinnerProps extends Omit<ProgressRadialProps, \"size\"> {\r\n  /** Message (text) displayed */\r\n  message?: string;\r\n  /** Position the message above or below the spinner (defaults to bottom) */\r\n  messageOnTop?: boolean;\r\n  /**\r\n     * Size of the progress indicator. Defaults to medium size.\r\n     * @default ''\r\n     */\r\n  size?: RadialSizeType;\r\n}\r\n\r\n/**\r\n * A loading spinner component that optionally shows a text message.\r\n * @public\r\n */\r\nexport class LoadingSpinner extends React.PureComponent<LoadingSpinnerProps> {\r\n  public static defaultProps: Partial<LoadingSpinnerProps> = {\r\n    messageOnTop: false,\r\n  };\r\n\r\n  public override render() {\r\n    const { message, messageOnTop, size, ...rest } = this.props;\r\n    return (\r\n      <div className=\"core-ls\">\r\n        {(message && messageOnTop) && <span className=\"ls-message-top\">{message}</span>}\r\n        <ProgressRadial size={size} {...rest} indeterminate />\r\n        {(message && !messageOnTop) && <span className=\"ls-message-bottom\">{message}</span>}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/lib/cjs/core-react/loading/LoadingSpinner.scss

@@ -3,25 +3,24 @@
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 @import "../style/themecolors";
-@import "~@itwin/itwinui-css/scss/style/space";
 
- .core-ls{
+.core-ls {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
 
   .ls-message {
-    color: $buic-foreground-body;
+    color: var(--iui-color-text);
   }
 
   .ls-message-top {
     @extend .ls-message;
-    margin-bottom: $iui-sm;
+    margin-bottom: var(--iui-size-s);
   }
 
   .ls-message-bottom {
     @extend .ls-message;
-    margin-top: $iui-sm;
+    margin-top: var(--iui-size-s);
   }
-}
+}

package/lib/cjs/core-react/messagebox/MessageBox.d.ts

@@ -5,6 +5,7 @@ import "./MessageBox.scss";
 import * as React from "react";
 import { DialogButtonDef, MessageSeverity } from "@itwin/appui-abstract";
 import { CommonProps } from "../utils/Props";
+import { IconSpec } from "../icons/IconComponent";
 /** Properties for the [[MessageBox]] component
  * @public
  */
@@ -41,6 +42,8 @@ export interface MessageBoxProps extends CommonProps {
     contentClassName?: string;
     /** Custom CSS Style for the content */
     contentStyle?: React.CSSProperties;
+    /** Message content */
+    children?: React.ReactNode;
 }
 /** Message Box React component.
  * @public
@@ -54,12 +57,25 @@ export declare class MessageBox extends React.PureComponent<MessageBoxProps> {
  */
 export interface MessageContainerProps extends CommonProps {
     severity: MessageSeverity;
+    /** Message Content */
+    children?: React.ReactNode;
 }
 /** Message Container React component.
  * @public
  */
 export declare class MessageContainer extends React.PureComponent<MessageContainerProps> {
-    static getIconClassName(severity: MessageSeverity, hollow?: boolean): string;
+    /** Returns the class name associated with the WebFont icon corresponding to the MessageSeverity.
+     * @param severity MessageSeverity
+     * @param _hollow @deprecated in 4.0. Ignored.
+     * @deprecated in 4.0. Please use getIcon method
+     */
+    static getIconClassName(severity: MessageSeverity, _hollow?: boolean): string;
+    /** Returns the React icon corresponding to the MessageSeverity.
+     * @param severity MessageSeverity
+     * @param hollow set to true to return the hollow form of the icon.
+     * @returns IconSpec
+     */
+    static getIcon(severity: MessageSeverity, hollow?: boolean): IconSpec;
     render(): JSX.Element;
 }
 //# sourceMappingURL=MessageBox.d.ts.map

package/lib/cjs/core-react/messagebox/MessageBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageBox.d.ts","sourceRoot":"","sources":["../../../../src/core-react/messagebox/MessageBox.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,mBAAmB,CAAC;AAE3B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAEzE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD,6BAA6B;IAC7B,QAAQ,EAAE,eAAe,CAAC;IAC1B,oCAAoC;IACpC,MAAM,EAAE,OAAO,CAAC;IAChB,2FAA2F;IAC3F,aAAa,EAAE,eAAe,EAAE,CAAC;IACjC,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qEAAqE;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,wDAAwD;IACxD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uCAAuC;IACvC,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACpC;AAED;;GAEG;AACH,qBAAa,UAAW,SAAQ,KAAK,CAAC,aAAa,CAAC,eAAe,CAAC;IAClE,OAAc,YAAY,EAAE,OAAO,CAAC,eAAe,CAAC,CAKlD;IAEc,MAAM,IAAI,GAAG,CAAC,OAAO;CAkBtC;AAED;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,WAAW;IACxD,QAAQ,EAAE,eAAe,CAAC;CAC3B;AAED;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC;WAChE,gBAAgB,CAAC,QAAQ,EAAE,eAAe,EAAE,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM;IA8BnE,MAAM,IAAI,GAAG,CAAC,OAAO;CAgBtC"}
+{"version":3,"file":"MessageBox.d.ts","sourceRoot":"","sources":["../../../../src/core-react/messagebox/MessageBox.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,mBAAmB,CAAC;AAE3B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAEzE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAI7C,OAAO,EAAQ,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAExD;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD,6BAA6B;IAC7B,QAAQ,EAAE,eAAe,CAAC;IAC1B,oCAAoC;IACpC,MAAM,EAAE,OAAO,CAAC;IAChB,2FAA2F;IAC3F,aAAa,EAAE,eAAe,EAAE,CAAC;IACjC,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qEAAqE;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,wDAAwD;IACxD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uCAAuC;IACvC,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,sBAAsB;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,qBAAa,UAAW,SAAQ,KAAK,CAAC,aAAa,CAAC,eAAe,CAAC;IAClE,OAAc,YAAY,EAAE,OAAO,CAAC,eAAe,CAAC,CAKlD;IAEc,MAAM,IAAI,GAAG,CAAC,OAAO;CAkBtC;AAED;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,WAAW;IACxD,QAAQ,EAAE,eAAe,CAAC;IAC1B,sBAAsB;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC;IAC9E;;;;OAIG;WAEW,gBAAgB,CAAC,QAAQ,EAAE,eAAe,EAAE,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM;IA8BpF;;;;OAIG;WAGW,OAAO,CAAC,QAAQ,EAAE,eAAe,EAAE,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ;IA4B5D,MAAM,IAAI,GAAG,CAAC,OAAO;CAiBtC"}

package/lib/cjs/core-react/messagebox/MessageBox.js

@@ -13,6 +13,8 @@ const classnames_1 = require("classnames");
 const React = require("react");
 const appui_abstract_1 = require("@itwin/appui-abstract");
 const Dialog_1 = require("../dialog/Dialog");
+const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
+const IconComponent_1 = require("../icons/IconComponent");
 /** Message Box React component.
  * @public
  */
@@ -33,37 +35,79 @@ MessageBox.defaultProps = {
  * @public
  */
 class MessageContainer extends React.PureComponent {
-    static getIconClassName(severity, hollow) {
+    /** Returns the class name associated with the WebFont icon corresponding to the MessageSeverity.
+     * @param severity MessageSeverity
+     * @param _hollow @deprecated in 4.0. Ignored.
+     * @deprecated in 4.0. Please use getIcon method
+     */
+    /* istanbul ignore next */
+    static getIconClassName(severity, _hollow) {
         let iconClassName = "";
         switch (severity) {
             case appui_abstract_1.MessageSeverity.None:
-                iconClassName = " ";
+                iconClassName = "";
                 break;
             case appui_abstract_1.MessageSeverity.Success:
-                iconClassName = hollow ? "icon-status-success-hollow" : "icon-status-success" + " core-message-box-success";
+                iconClassName = "core-message-box-success";
                 break;
             case appui_abstract_1.MessageSeverity.Information:
-                iconClassName = hollow ? "icon-info-hollow" : "icon-info" + " core-message-box-information";
+                iconClassName = "core-message-box-information";
                 break;
             case appui_abstract_1.MessageSeverity.Question:
-                iconClassName = hollow ? "icon-help-hollow" : "icon-help" + " core-message-box-question";
+                iconClassName = "core-message-box-question";
                 break;
             case appui_abstract_1.MessageSeverity.Warning:
-                iconClassName = hollow ? "icon-status-warning" : "icon-status-warning" + " core-message-box-warning"; // TODO - need icon-status-warning-hollow icon
+                iconClassName = "core-message-box-warning"; // TODO - need icon-status-warning-hollow icon
                 break;
             case appui_abstract_1.MessageSeverity.Error:
-                iconClassName = hollow ? "icon-status-error-hollow" : "icon-status-error" + " core-message-box-error";
+                iconClassName = "core-message-box-error";
                 break;
             case appui_abstract_1.MessageSeverity.Fatal:
-                iconClassName = hollow ? "icon-status-rejected" : "icon-status-rejected" + " core-message-box-fatal";
+                iconClassName = "core-message-box-fatal";
                 break;
         }
         return iconClassName;
     }
+    /** Returns the React icon corresponding to the MessageSeverity.
+     * @param severity MessageSeverity
+     * @param hollow set to true to return the hollow form of the icon.
+     * @returns IconSpec
+     */
+    /* ignore for unit tests and replace with visual testing */
+    /* istanbul ignore next */
+    static getIcon(severity, hollow) {
+        let iconSpec = "";
+        switch (severity) {
+            case appui_abstract_1.MessageSeverity.None:
+                iconSpec = "";
+                break;
+            case appui_abstract_1.MessageSeverity.Success:
+                iconSpec = hollow ? React.createElement(itwinui_icons_react_1.SvgStatusSuccessHollow, null) : React.createElement(itwinui_icons_react_1.SvgStatusSuccess, null);
+                break;
+            case appui_abstract_1.MessageSeverity.Information:
+                iconSpec = hollow ? React.createElement(itwinui_icons_react_1.SvgInfoCircularHollow, null) : React.createElement(itwinui_icons_react_1.SvgInfoCircular, null);
+                break;
+            case appui_abstract_1.MessageSeverity.Question:
+                iconSpec = hollow ? React.createElement(itwinui_icons_react_1.SvgHelpCircularHollow, null) : React.createElement(itwinui_icons_react_1.SvgHelpCircular, null);
+                break;
+            case appui_abstract_1.MessageSeverity.Warning:
+                iconSpec = React.createElement(itwinui_icons_react_1.SvgStatusWarning, null); // TODO - need icon-status-warning-hollow icon
+                break;
+            case appui_abstract_1.MessageSeverity.Error:
+                iconSpec = hollow ? React.createElement(itwinui_icons_react_1.SvgStatusErrorHollow, null) : React.createElement(itwinui_icons_react_1.SvgStatusError, null);
+                break;
+            case appui_abstract_1.MessageSeverity.Fatal:
+                iconSpec = hollow ? React.createElement(itwinui_icons_react_1.SvgStatusRejectedHollow, null) : React.createElement(itwinui_icons_react_1.SvgStatusRejected, null);
+                break;
+        }
+        return iconSpec;
+    }
     render() {
-        const iconClassName = (0, classnames_1.default)("icon", "core-message-box-icon", MessageContainer.getIconClassName(this.props.severity));
+        const iconClassName = (0, classnames_1.default)("icon", "core-message-box-icon");
+        const iconSpec = MessageContainer.getIcon(this.props.severity);
         return (React.createElement("div", { className: "core-message-box-container" },
-            React.createElement("div", { className: iconClassName }),
+            React.createElement("div", { className: iconClassName },
+                React.createElement(IconComponent_1.Icon, { iconSpec: iconSpec })),
             React.createElement("div", { className: (0, classnames_1.default)("core-message-box-content", this.props.className), style: this.props.style }, this.props.children)));
     }
 }

package/lib/cjs/core-react/messagebox/MessageBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageBox.js","sourceRoot":"","sources":["../../../../src/core-react/messagebox/MessageBox.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Dialog\r\n */\r\n\r\nimport \"./MessageBox.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { DialogButtonDef, MessageSeverity } from \"@itwin/appui-abstract\";\r\nimport { Dialog } from \"../dialog/Dialog\";\r\nimport { CommonProps } from \"../utils/Props\";\r\n\r\n/** Properties for the [[MessageBox]] component\r\n * @public\r\n */\r\nexport interface MessageBoxProps extends CommonProps {\r\n  /** Severity of MessageBox */\r\n  severity: MessageSeverity;\r\n  /** whether to show dialog or not */\r\n  opened: boolean;\r\n  /** List of [[DialogButtonDef]] objects specifying buttons and associated onClick events */\r\n  buttonCluster: DialogButtonDef[];\r\n  /** Title to show in title bar of dialog  */\r\n  title?: string | JSX.Element;\r\n  /** onClick event for X button for dialog */\r\n  onClose?: () => void;\r\n  /** 'keyup' event for <Esc> key */\r\n  onEscape?: () => void;\r\n  /** minimum width that the dialog may be resized to. Default: 400 */\r\n  minWidth?: number;\r\n  /** minimum height that the dialog may be resized to. Default: 400 */\r\n  minHeight?: number;\r\n  /** initial width of dialog.\r\n   * Displayed in px if value is a number, otherwise displayed in specified CSS unit.\r\n   * Default: \"50%\"\r\n   */\r\n  width?: string | number;\r\n  /** initial height of dialog.\r\n   * Displayed in px if value is a number, otherwise displayed in specified CSS unit.\r\n   * Default: \"\"\r\n   */\r\n  height?: string | number;\r\n  /** Whether to show background overlay. Default: true */\r\n  modal?: boolean;\r\n  /** Custom CSS class name for the content */\r\n  contentClassName?: string;\r\n  /** Custom CSS Style for the content */\r\n  contentStyle?: React.CSSProperties;\r\n}\r\n\r\n/** Message Box React component.\r\n * @public\r\n */\r\nexport class MessageBox extends React.PureComponent<MessageBoxProps> {\r\n  public static defaultProps: Partial<MessageBoxProps> = {\r\n    minWidth: 400,\r\n    minHeight: 400,\r\n    width: \"512px\",\r\n    modal: true,\r\n  };\r\n\r\n  public override render(): JSX.Element {\r\n    return (\r\n      <Dialog\r\n        title={this.props.title}\r\n        buttonCluster={this.props.buttonCluster}\r\n        opened={this.props.opened}\r\n        width={this.props.width}\r\n        onClose={this.props.onClose}\r\n        onEscape={this.props.onEscape}\r\n        modal={this.props.modal}\r\n        className={this.props.className}\r\n        style={this.props.style} >\r\n        <MessageContainer severity={this.props.severity} className={this.props.contentClassName} style={this.props.contentStyle}>\r\n          {this.props.children}\r\n        </MessageContainer>\r\n      </Dialog>\r\n    );\r\n  }\r\n}\r\n\r\n/** Properties for the [[MessageContainer]] component\r\n * @public\r\n */\r\nexport interface MessageContainerProps extends CommonProps {\r\n  severity: MessageSeverity;\r\n}\r\n\r\n/** Message Container React component.\r\n * @public\r\n */\r\nexport class MessageContainer extends React.PureComponent<MessageContainerProps> {\r\n  public static getIconClassName(severity: MessageSeverity, hollow?: boolean): string {\r\n    let iconClassName = \"\";\r\n\r\n    switch (severity) {\r\n      case MessageSeverity.None:\r\n        iconClassName = \" \";\r\n        break;\r\n      case MessageSeverity.Success:\r\n        iconClassName = hollow ? \"icon-status-success-hollow\" : \"icon-status-success\" + \" core-message-box-success\";\r\n        break;\r\n      case MessageSeverity.Information:\r\n        iconClassName = hollow ? \"icon-info-hollow\" : \"icon-info\" + \" core-message-box-information\";\r\n        break;\r\n      case MessageSeverity.Question:\r\n        iconClassName = hollow ? \"icon-help-hollow\" : \"icon-help\" + \" core-message-box-question\";\r\n        break;\r\n      case MessageSeverity.Warning:\r\n        iconClassName = hollow ? \"icon-status-warning\" : \"icon-status-warning\" + \" core-message-box-warning\";  // TODO - need icon-status-warning-hollow icon\r\n        break;\r\n      case MessageSeverity.Error:\r\n        iconClassName = hollow ? \"icon-status-error-hollow\" : \"icon-status-error\" + \" core-message-box-error\";\r\n        break;\r\n      case MessageSeverity.Fatal:\r\n        iconClassName = hollow ? \"icon-status-rejected\" : \"icon-status-rejected\" + \" core-message-box-fatal\";\r\n        break;\r\n    }\r\n\r\n    return iconClassName;\r\n  }\r\n\r\n  public override render(): JSX.Element {\r\n    const iconClassName = classnames(\r\n      \"icon\",\r\n      \"core-message-box-icon\",\r\n      MessageContainer.getIconClassName(this.props.severity),\r\n    );\r\n\r\n    return (\r\n      <div className=\"core-message-box-container\">\r\n        <div className={iconClassName} />\r\n        <div className={classnames(\"core-message-box-content\", this.props.className)} style={this.props.style}>\r\n          {this.props.children}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"MessageBox.js","sourceRoot":"","sources":["../../../../src/core-react/messagebox/MessageBox.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Dialog\r\n */\r\n\r\nimport \"./MessageBox.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { DialogButtonDef, MessageSeverity } from \"@itwin/appui-abstract\";\r\nimport { Dialog } from \"../dialog/Dialog\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport { SvgHelpCircular, SvgHelpCircularHollow, SvgInfoCircular, SvgInfoCircularHollow, SvgStatusError, SvgStatusErrorHollow, SvgStatusRejected,\r\n  SvgStatusRejectedHollow,\r\n  SvgStatusSuccess, SvgStatusSuccessHollow, SvgStatusWarning } from \"@itwin/itwinui-icons-react\";\r\nimport { Icon, IconSpec } from \"../icons/IconComponent\";\r\n\r\n/** Properties for the [[MessageBox]] component\r\n * @public\r\n */\r\nexport interface MessageBoxProps extends CommonProps {\r\n  /** Severity of MessageBox */\r\n  severity: MessageSeverity;\r\n  /** whether to show dialog or not */\r\n  opened: boolean;\r\n  /** List of [[DialogButtonDef]] objects specifying buttons and associated onClick events */\r\n  buttonCluster: DialogButtonDef[];\r\n  /** Title to show in title bar of dialog  */\r\n  title?: string | JSX.Element;\r\n  /** onClick event for X button for dialog */\r\n  onClose?: () => void;\r\n  /** 'keyup' event for <Esc> key */\r\n  onEscape?: () => void;\r\n  /** minimum width that the dialog may be resized to. Default: 400 */\r\n  minWidth?: number;\r\n  /** minimum height that the dialog may be resized to. Default: 400 */\r\n  minHeight?: number;\r\n  /** initial width of dialog.\r\n   * Displayed in px if value is a number, otherwise displayed in specified CSS unit.\r\n   * Default: \"50%\"\r\n   */\r\n  width?: string | number;\r\n  /** initial height of dialog.\r\n   * Displayed in px if value is a number, otherwise displayed in specified CSS unit.\r\n   * Default: \"\"\r\n   */\r\n  height?: string | number;\r\n  /** Whether to show background overlay. Default: true */\r\n  modal?: boolean;\r\n  /** Custom CSS class name for the content */\r\n  contentClassName?: string;\r\n  /** Custom CSS Style for the content */\r\n  contentStyle?: React.CSSProperties;\r\n  /** Message content */\r\n  children?: React.ReactNode;\r\n}\r\n\r\n/** Message Box React component.\r\n * @public\r\n */\r\nexport class MessageBox extends React.PureComponent<MessageBoxProps> {\r\n  public static defaultProps: Partial<MessageBoxProps> = {\r\n    minWidth: 400,\r\n    minHeight: 400,\r\n    width: \"512px\",\r\n    modal: true,\r\n  };\r\n\r\n  public override render(): JSX.Element {\r\n    return (\r\n      <Dialog\r\n        title={this.props.title}\r\n        buttonCluster={this.props.buttonCluster}\r\n        opened={this.props.opened}\r\n        width={this.props.width}\r\n        onClose={this.props.onClose}\r\n        onEscape={this.props.onEscape}\r\n        modal={this.props.modal}\r\n        className={this.props.className}\r\n        style={this.props.style} >\r\n        <MessageContainer severity={this.props.severity} className={this.props.contentClassName} style={this.props.contentStyle}>\r\n          {this.props.children}\r\n        </MessageContainer>\r\n      </Dialog>\r\n    );\r\n  }\r\n}\r\n\r\n/** Properties for the [[MessageContainer]] component\r\n * @public\r\n */\r\nexport interface MessageContainerProps extends CommonProps {\r\n  severity: MessageSeverity;\r\n  /** Message Content */\r\n  children?: React.ReactNode;\r\n}\r\n\r\n/** Message Container React component.\r\n * @public\r\n */\r\nexport class MessageContainer extends React.PureComponent<MessageContainerProps> {\r\n  /** Returns the class name associated with the WebFont icon corresponding to the MessageSeverity.\r\n   * @param severity MessageSeverity\r\n   * @param _hollow @deprecated in 4.0. Ignored.\r\n   * @deprecated in 4.0. Please use getIcon method\r\n   */\r\n  /* istanbul ignore next */\r\n  public static getIconClassName(severity: MessageSeverity, _hollow?: boolean): string {\r\n    let iconClassName = \"\";\r\n\r\n    switch (severity) {\r\n      case MessageSeverity.None:\r\n        iconClassName = \"\";\r\n        break;\r\n      case MessageSeverity.Success:\r\n        iconClassName = \"core-message-box-success\";\r\n        break;\r\n      case MessageSeverity.Information:\r\n        iconClassName = \"core-message-box-information\";\r\n        break;\r\n      case MessageSeverity.Question:\r\n        iconClassName = \"core-message-box-question\";\r\n        break;\r\n      case MessageSeverity.Warning:\r\n        iconClassName = \"core-message-box-warning\";  // TODO - need icon-status-warning-hollow icon\r\n        break;\r\n      case MessageSeverity.Error:\r\n        iconClassName = \"core-message-box-error\";\r\n        break;\r\n      case MessageSeverity.Fatal:\r\n        iconClassName = \"core-message-box-fatal\";\r\n        break;\r\n    }\r\n\r\n    return iconClassName;\r\n  }\r\n\r\n  /** Returns the React icon corresponding to the MessageSeverity.\r\n   * @param severity MessageSeverity\r\n   * @param hollow set to true to return the hollow form of the icon.\r\n   * @returns IconSpec\r\n   */\r\n  /* ignore for unit tests and replace with visual testing */\r\n  /* istanbul ignore next */\r\n  public static getIcon(severity: MessageSeverity, hollow?: boolean): IconSpec {\r\n    let iconSpec: IconSpec = \"\";\r\n    switch (severity) {\r\n      case MessageSeverity.None:\r\n        iconSpec = \"\";\r\n        break;\r\n      case MessageSeverity.Success:\r\n        iconSpec = hollow ? <SvgStatusSuccessHollow /> : <SvgStatusSuccess />;\r\n        break;\r\n      case MessageSeverity.Information:\r\n        iconSpec = hollow ? <SvgInfoCircularHollow /> : <SvgInfoCircular />;\r\n        break;\r\n      case MessageSeverity.Question:\r\n        iconSpec = hollow ? <SvgHelpCircularHollow /> : <SvgHelpCircular />;\r\n        break;\r\n      case MessageSeverity.Warning:\r\n        iconSpec = <SvgStatusWarning />; // TODO - need icon-status-warning-hollow icon\r\n        break;\r\n      case MessageSeverity.Error:\r\n        iconSpec = hollow ? <SvgStatusErrorHollow /> : <SvgStatusError />;\r\n        break;\r\n      case MessageSeverity.Fatal:\r\n        iconSpec = hollow ? <SvgStatusRejectedHollow /> : <SvgStatusRejected />;\r\n        break;\r\n    }\r\n    return iconSpec;\r\n  }\r\n\r\n  public override render(): JSX.Element {\r\n    const iconClassName = classnames(\r\n      \"icon\",\r\n      \"core-message-box-icon\"\r\n    );\r\n\r\n    const iconSpec = MessageContainer.getIcon(this.props.severity);\r\n\r\n    return (\r\n      <div className=\"core-message-box-container\">\r\n        <div className={iconClassName} ><Icon iconSpec={iconSpec} /></div>\r\n        <div className={classnames(\"core-message-box-content\", this.props.className)} style={this.props.style}>\r\n          {this.props.children}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/lib/cjs/core-react/messagebox/MessageBox.scss

@@ -2,19 +2,19 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
- @import "../icons/variables";
- @import "../style/colors";
- @import "../style/themecolors";
- @import "../style/baseline";
+@import "../icons/variables";
+@import "../style/colors";
+@import "../style/baseline";
 
 .core-message-box-container {
   display: flex;
-  color: $buic-foreground-body;
+  color: var(--iui-color-text);
 
   .core-message-box-icon {
     flex: 0 0;
     font-size: $uicore-icons-medium;
-    padding: 0 $uicore-unbordered-padding $uicore-unbordered-padding $uicore-unbordered-padding;
+    padding: 0 $uicore-unbordered-padding $uicore-unbordered-padding
+      $uicore-unbordered-padding;
     margin-top: 10px;
   }
 
@@ -22,23 +22,33 @@
     display: flex;
     align-items: center;
     flex: 1 1;
+
+    a {
+      // iTwinUI anchor link style
+      color: var(--iui-color-text-accent);
+      -webkit-tap-highlight-color: hsl(
+        var(--iui-color-accent-hsl) / var(--iui-opacity-6)
+      );
+      border-radius: var(--iui-border-radius-1);
+      cursor: pointer;
+      text-decoration: none;
+    }
   }
 }
 
 .core-message-box-success {
-  color: $buic-foreground-success;
-}
-.core-message-box-information {
-  color: $buic-foreground-primary;
+  color: var(--iui-color-text-positive);
 }
+.core-message-box-information,
 .core-message-box-question {
-  color: $uicore-yellow;
+  color: var(--iui-color-text-informational);
 }
 .core-message-box-warning {
-  color: $buic-foreground-warning;
+  color: var(--iui-color-text-warning);
 }
-.core-message-box-error, .core-message-box-fatal {
-  color: $buic-foreground-alert;
+.core-message-box-error,
+.core-message-box-fatal {
+  color: var(--iui-color-text-negative);
 }
 
 .notifymessage-icon {

package/lib/cjs/core-react/popup/Popup.d.ts

@@ -65,6 +65,8 @@ export interface PopupProps extends CommonProps {
      * @beta
      * */
     repositionOnResize?: boolean;
+    /** Content */
+    children?: React.ReactNode;
 }
 /** @internal */
 interface PopupState {

package/lib/cjs/core-react/popup/Popup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../../src/core-react/popup/Popup.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../../src/core-react/popup/Popup.tsx"],"names":[],"mappings":"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"}

package/lib/cjs/core-react/popup/Popup.js

@@ -385,6 +385,7 @@ class Popup extends React.Component {
         return newPosition;
     }
     render() {
+        var _a;
         const animate = this.props.animate !== undefined ? this.props.animate : true;
         const className = (0, classnames_1.default)("core-popup", this._getClassNameByPosition(this.state.position), this.props.showShadow && "core-popup-shadow", this.props.showArrow && "arrow", !animate && "core-popup-animation-none", this.props.className, this.state.animationEnded && "core-animation-ended", (!this.props.isOpen && this.props.keepContentsMounted) && "core-popup-hidden");
         const style = {
@@ -397,7 +398,9 @@ class Popup extends React.Component {
             return null;
         }
         return ReactDOM.createPortal((React.createElement("div", { className: className, "data-testid": "core-popup", ref: (element) => { this._popup = element; }, style: style, role: role, "aria-modal": true, tabIndex: -1, "aria-label": this.props.ariaLabel, onAnimationEnd: this._handleAnimationEnd },
-            React.createElement(FocusTrap_1.FocusTrap, { active: !!this.props.moveFocus, initialFocusElement: this.props.focusTarget, returnFocusOnDeactivate: true }, this.props.children))), this.state.parentDocument.body);
+            React.createElement(FocusTrap_1.FocusTrap, { active: !!this.props.moveFocus, initialFocusElement: this.props.focusTarget, returnFocusOnDeactivate: true }, this.props.children))), 
+        // istanbul ignore next
+        (_a = this.state.parentDocument.body.querySelector('[data-root-container="iui-root-id"]')) !== null && _a !== void 0 ? _a : this.state.parentDocument.body);
     }
 }
 exports.Popup = Popup;