@itwin/core-react 4.1.0 → 4.2.0-dev.1

package/lib/esm/core-react/dialog/Dialog.scss

@@ -1,245 +1,245 @@
-/*---------------------------------------------------------------------------------------------
-* 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 "../inputs/variables";
-@import "../style/themecolors";
-@import "../text/block";
-@import "../z-index";
-@import "../scrollbar";
-
-// cspell:ignore titlebar outoffocus nwse
-
-.core-dialog {
-  font-family: var(--iui-font-sans);
-
-  display: none;
-  position: fixed;
-
-  @include uicore-z-index(dialog);
-
-  left: 0px;
-  top: 0px;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  background: rgba(0, 0, 0, 0.4);
-
-  &.core-dialog-opened {
-    display: block;
-  }
-
-  &.core-dialog-hidden {
-    background-color: transparent;
-    pointer-events: none;
-
-    & > * {
-      pointer-events: all;
-    }
-  }
-
-  .core-dialog-container {
-    position: fixed;
-
-    &.core-dialog-top-left {
-      top: 0;
-      left: 0;
-    }
-
-    &.core-dialog-top {
-      top: 0;
-      left: 0;
-      right: 0;
-    }
-
-    &.core-dialog-top-right {
-      top: 0;
-      right: 0;
-    }
-
-    &.core-dialog-left {
-      left: 0;
-      top: 50%;
-      transform: translateY(-50%);
-    }
-
-    &.core-dialog-center {
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    }
-
-    &.core-dialog-right {
-      right: 0;
-      top: 50%;
-      transform: translateY(-50%);
-    }
-
-    &.core-dialog-bottom-left {
-      bottom: 0;
-      left: 0;
-    }
-
-    &.core-dialog-bottom {
-      bottom: 0;
-      left: 0;
-      right: 0;
-    }
-
-    &.core-dialog-bottom-right {
-      bottom: 0;
-      right: 0;
-    }
-
-    margin: auto;
-    width: 60%;
-    display: flex;
-    flex-direction: column;
-    height: fit-content;
-
-    .core-dialog-area {
-      position: relative;
-      display: flex;
-      flex-grow: 1;
-      flex-direction: column;
-      border: 1px solid var(--iui-color-border);
-      border-radius: var(--iui-border-radius-1);
-      background-color: var(--iui-color-background);
-      color: var(--iui-color-text);
-      padding: 0;
-
-      > .core-dialog-head {
-        flex-shrink: 0;
-        align-items: center;
-        background-color: var(--iui-color-background-backdrop);
-        color: var(--iui-color-text);
-        display: flex;
-        padding: 4px;
-
-        /* padding: $uicore-unbordered-padding; */
-        &.core-dialog-movable {
-          cursor: move;
-        }
-
-        > .core-dialog-title {
-          flex: 1 1;
-
-          padding: 0;
-          border: none;
-          vertical-align: baseline;
-          font-size: var(--iui-font-size-2);
-          font-weight: var(--iui-font-weight-normal);
-          line-height: var(--iui-size-l);
-
-          margin: 0;
-          margin-left: 4px;
-        }
-
-        &.core-dialog-modal {
-          background-color: var(--iui-color-background);
-
-          > .core-dialog-title {
-            margin: 0;
-            padding: 0;
-            border: none;
-            vertical-align: baseline;
-            font-size: var(--iui-font-size-3);
-            font-weight: var(--iui-font-weight-normal);
-            line-height: calc(1.5 * var(--iui-size-l));
-          }
-        }
-
-        > .core-dialog-close {
-          cursor: pointer;
-          height: var(--iui-font-size-4);
-          width: var(--iui-font-size-4);
-          line-height: var(--iui-font-size-4);
-          flex: 0 0 $uicore-icons-medium;
-          text-align: center;
-          color: var(--iui-color-icon);
-          border: none;
-          background-color: transparent;
-
-          &:hover,
-          &:focus {
-            color: var(--iui-color-icon-hover);
-          }
-          &:focus {
-            outline: 1px solid var(--iui-color-border-accent);
-          }
-        }
-      }
-
-      > .core-dialog-content {
-        overflow: auto;
-        flex: 1 1;
-
-        @include uicore-text-block;
-
-        padding: $uicore-unbordered-padding;
-        margin: 0;
-
-        @include uicore-touch-scrolling;
-        @include uicore-scrollbar();
-
-        &.core-dialog-content-no-inset {
-          padding: 0;
-        }
-      }
-
-      > .core-dialog-footer {
-        flex-shrink: 0;
-        padding: 0 $uicore-unbordered-padding $uicore-unbordered-padding
-          $uicore-unbordered-padding;
-
-        > .core-dialog-buttons {
-          display: flex;
-          justify-content: flex-end;
-
-          > * {
-            min-width: 80px;
-
-            &:not(:first-child) {
-              margin-left: $uicore-inputs-margin;
-            }
-          }
-        }
-      }
-    }
-
-    $dialog-resize-bar-width: 8px;
-
-    .core-dialog-drag {
-      position: absolute;
-      z-index: auto;
-      padding: 0px;
-
-      &:not(.core-dialog-drag-enabled) {
-        display: none;
-      }
-
-      &.core-dialog-drag-right {
-        right: -$dialog-resize-bar-width * 0.5;
-        width: $dialog-resize-bar-width;
-        height: 100%;
-        cursor: ew-resize;
-      }
-
-      &.core-dialog-drag-bottom-mid {
-        bottom: -$dialog-resize-bar-width * 0.5;
-        height: $dialog-resize-bar-width;
-        width: 100%;
-        cursor: ns-resize;
-      }
-
-      &.core-dialog-drag-bottom-right {
-        right: -$dialog-resize-bar-width * 0.5;
-        bottom: -$dialog-resize-bar-width * 0.5;
-        height: $dialog-resize-bar-width;
-        width: $dialog-resize-bar-width;
-        cursor: nwse-resize;
-      }
-    }
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* 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 "../inputs/variables";
+@import "../style/themecolors";
+@import "../text/block";
+@import "../z-index";
+@import "../scrollbar";
+
+// cspell:ignore titlebar outoffocus nwse
+
+.core-dialog {
+  font-family: var(--iui-font-sans);
+
+  display: none;
+  position: fixed;
+
+  @include uicore-z-index(dialog);
+
+  left: 0px;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background: rgba(0, 0, 0, 0.4);
+
+  &.core-dialog-opened {
+    display: block;
+  }
+
+  &.core-dialog-hidden {
+    background-color: transparent;
+    pointer-events: none;
+
+    & > * {
+      pointer-events: all;
+    }
+  }
+
+  .core-dialog-container {
+    position: fixed;
+
+    &.core-dialog-top-left {
+      top: 0;
+      left: 0;
+    }
+
+    &.core-dialog-top {
+      top: 0;
+      left: 0;
+      right: 0;
+    }
+
+    &.core-dialog-top-right {
+      top: 0;
+      right: 0;
+    }
+
+    &.core-dialog-left {
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    &.core-dialog-center {
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    &.core-dialog-right {
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    &.core-dialog-bottom-left {
+      bottom: 0;
+      left: 0;
+    }
+
+    &.core-dialog-bottom {
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+
+    &.core-dialog-bottom-right {
+      bottom: 0;
+      right: 0;
+    }
+
+    margin: auto;
+    width: 60%;
+    display: flex;
+    flex-direction: column;
+    height: fit-content;
+
+    .core-dialog-area {
+      position: relative;
+      display: flex;
+      flex-grow: 1;
+      flex-direction: column;
+      border: 1px solid var(--iui-color-border);
+      border-radius: var(--iui-border-radius-1);
+      background-color: var(--iui-color-background);
+      color: var(--iui-color-text);
+      padding: 0;
+
+      > .core-dialog-head {
+        flex-shrink: 0;
+        align-items: center;
+        background-color: var(--iui-color-background-backdrop);
+        color: var(--iui-color-text);
+        display: flex;
+        padding: 4px;
+
+        /* padding: $uicore-unbordered-padding; */
+        &.core-dialog-movable {
+          cursor: move;
+        }
+
+        > .core-dialog-title {
+          flex: 1 1;
+
+          padding: 0;
+          border: none;
+          vertical-align: baseline;
+          font-size: var(--iui-font-size-2);
+          font-weight: var(--iui-font-weight-normal);
+          line-height: var(--iui-size-l);
+
+          margin: 0;
+          margin-left: 4px;
+        }
+
+        &.core-dialog-modal {
+          background-color: var(--iui-color-background);
+
+          > .core-dialog-title {
+            margin: 0;
+            padding: 0;
+            border: none;
+            vertical-align: baseline;
+            font-size: var(--iui-font-size-3);
+            font-weight: var(--iui-font-weight-normal);
+            line-height: calc(1.5 * var(--iui-size-l));
+          }
+        }
+
+        > .core-dialog-close {
+          cursor: pointer;
+          height: var(--iui-font-size-4);
+          width: var(--iui-font-size-4);
+          line-height: var(--iui-font-size-4);
+          flex: 0 0 $uicore-icons-medium;
+          text-align: center;
+          color: var(--iui-color-icon);
+          border: none;
+          background-color: transparent;
+
+          &:hover,
+          &:focus {
+            color: var(--iui-color-icon-hover);
+          }
+          &:focus {
+            outline: 1px solid var(--iui-color-border-accent);
+          }
+        }
+      }
+
+      > .core-dialog-content {
+        overflow: auto;
+        flex: 1 1;
+
+        @include uicore-text-block;
+
+        padding: $uicore-unbordered-padding;
+        margin: 0;
+
+        @include uicore-touch-scrolling;
+        @include uicore-scrollbar();
+
+        &.core-dialog-content-no-inset {
+          padding: 0;
+        }
+      }
+
+      > .core-dialog-footer {
+        flex-shrink: 0;
+        padding: 0 $uicore-unbordered-padding $uicore-unbordered-padding
+          $uicore-unbordered-padding;
+
+        > .core-dialog-buttons {
+          display: flex;
+          justify-content: flex-end;
+
+          > * {
+            min-width: 80px;
+
+            &:not(:first-child) {
+              margin-left: $uicore-inputs-margin;
+            }
+          }
+        }
+      }
+    }
+
+    $dialog-resize-bar-width: 8px;
+
+    .core-dialog-drag {
+      position: absolute;
+      z-index: auto;
+      padding: 0px;
+
+      &:not(.core-dialog-drag-enabled) {
+        display: none;
+      }
+
+      &.core-dialog-drag-right {
+        right: -$dialog-resize-bar-width * 0.5;
+        width: $dialog-resize-bar-width;
+        height: 100%;
+        cursor: ew-resize;
+      }
+
+      &.core-dialog-drag-bottom-mid {
+        bottom: -$dialog-resize-bar-width * 0.5;
+        height: $dialog-resize-bar-width;
+        width: 100%;
+        cursor: ns-resize;
+      }
+
+      &.core-dialog-drag-bottom-right {
+        right: -$dialog-resize-bar-width * 0.5;
+        bottom: -$dialog-resize-bar-width * 0.5;
+        height: $dialog-resize-bar-width;
+        width: $dialog-resize-bar-width;
+        cursor: nwse-resize;
+      }
+    }
+  }
+}

package/lib/esm/core-react/dialog/GlobalDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalDialog.d.ts","sourceRoot":"","sources":["../../../../src/core-react/dialog/GlobalDialog.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,cAAc,EAAE,QAAQ,GAAG,IAAI,CAAC;CACjC;AAED;;GAEG;AACH,qBAAa,YAAa,SAAQ,KAAK,CAAC,SAAS,CAAC,iBAAiB,EAAE,iBAAiB,CAAC;IACrF,OAAO,CAAC,UAAU,CAAC,CAAiB;IAEpC,SAAyB,KAAK,EAAE,iBAAiB,CAE/C;gBAEU,KAAK,EAAE,iBAAiB;IAIpC,OAAO,CAAC,aAAa,CAgBnB;IAEc,oBAAoB;IAOpB,MAAM,IAAI,KAAK,CAAC,SAAS;CAS1C"}
+{"version":3,"file":"GlobalDialog.d.ts","sourceRoot":"","sources":["../../../../src/core-react/dialog/GlobalDialog.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,cAAc,EAAE,QAAQ,GAAG,IAAI,CAAC;CACjC;AAED;;GAEG;AACH,qBAAa,YAAa,SAAQ,KAAK,CAAC,SAAS,CAC/C,iBAAiB,EACjB,iBAAiB,CAClB;IACC,OAAO,CAAC,UAAU,CAAC,CAAiB;IAEpC,SAAyB,KAAK,EAAE,iBAAiB,CAE/C;gBAEU,KAAK,EAAE,iBAAiB;IAIpC,OAAO,CAAC,aAAa,CAqBnB;IAEc,oBAAoB;IAQpB,MAAM,IAAI,KAAK,CAAC,SAAS;CAY1C"}

package/lib/esm/core-react/dialog/GlobalDialog.js

@@ -1,7 +1,7 @@
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 /** @packageDocumentation
  * @module Dialog
  */
@@ -22,7 +22,10 @@ export class GlobalDialog extends React.Component {
             const parentDocument = (_a = popupDiv === null || popupDiv === void 0 ? void 0 : popupDiv.ownerDocument) !== null && _a !== void 0 ? _a : null;
             if (parentDocument) {
                 this._container = parentDocument.createElement("div");
-                this._container.id = this.props.identifier !== undefined ? `dialog-${this.props.identifier}` : "core-dialog";
+                this._container.id =
+                    this.props.identifier !== undefined
+                        ? `dialog-${this.props.identifier}`
+                        : "core-dialog";
                 let rt = parentDocument.getElementById("core-dialog-root");
                 if (!rt) {
                     rt = parentDocument.createElement("div");
@@ -37,12 +40,13 @@ export class GlobalDialog extends React.Component {
     }
     componentWillUnmount() {
         // istanbul ignore else
-        if (this._container && this._container.parentElement) { // cleanup
+        if (this._container && this._container.parentElement) {
+            // cleanup
             this._container.parentElement.removeChild(this._container);
         }
     }
     render() {
-        const { identifier, ...props } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars
+        const { identifier, ...props } = this.props;
         return (React.createElement("div", { ref: this._handleRefSet }, this.state.parentDocument &&
             ReactDOM.createPortal(React.createElement(Dialog, { ...props }), this.state.parentDocument.body)));
     }

package/lib/esm/core-react/dialog/GlobalDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalDialog.js","sourceRoot":"","sources":["../../../../src/core-react/dialog/GlobalDialog.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,QAAQ,MAAM,WAAW,CAAC;AAEtC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAgBlC;;GAEG;AACH,MAAM,OAAO,YAAa,SAAQ,KAAK,CAAC,SAA+C;IAOrF,YAAY,KAAwB;QAClC,KAAK,CAAC,KAAK,CAAC,CAAC;QALU,UAAK,GAAsB;YAClD,cAAc,EAAE,IAAI;SACrB,CAAC;QAMM,kBAAa,GAAG,CAAC,QAA4B,EAAE,EAAE;;YACvD,MAAM,cAAc,GAAG,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,aAAa,mCAAI,IAAI,CAAC;YACvD,IAAI,cAAc,EAAE;gBAClB,IAAI,CAAC,UAAU,GAAG,cAAc,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;gBACtD,IAAI,CAAC,UAAU,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC;gBAC7G,IAAI,EAAE,GAAG,cAAc,CAAC,cAAc,CAAC,kBAAkB,CAAmB,CAAC;gBAC7E,IAAI,CAAC,EAAE,EAAE;oBACP,EAAE,GAAG,cAAc,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;oBACzC,EAAE,CAAC,EAAE,GAAG,kBAAkB,CAAC;oBAC3B,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;iBACrC;gBACD,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;gBAEhC,wDAAwD;gBACxD,IAAI,CAAC,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC,CAAC;aACnC;QACH,CAAC,CAAC;IAlBF,CAAC;IAoBe,oBAAoB;QAClC,uBAAuB;QACvB,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,EAAE,UAAU;YAChE,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;SAC5D;IACH,CAAC;IAEe,MAAM;QACpB,MAAM,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,wDAAwD;QACrG,OAAO,CACL,6BAAK,GAAG,EAAE,IAAI,CAAC,aAAa,IACzB,IAAI,CAAC,KAAK,CAAC,cAAc;YACxB,QAAQ,CAAC,YAAY,CAAC,oBAAC,MAAM,OAAK,KAAK,GAAI,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAC1E,CACP,CAAC;IACJ,CAAC;CACF","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 * as React from \"react\";\r\nimport * as ReactDOM from \"react-dom\";\r\nimport type { DialogProps } from \"./Dialog\";\r\nimport { Dialog } from \"./Dialog\";\r\n\r\n/** Properties for the [[GlobalDialog]] component\r\n * @public\r\n */\r\nexport interface GlobalDialogProps extends DialogProps {\r\n  identifier?: string;\r\n}\r\n\r\n/** State properties for the [[GlobalDialog]] component\r\n * @public\r\n */\r\nexport interface GlobalDialogState {\r\n  parentDocument: Document | null;\r\n}\r\n\r\n/** GlobalDialog React component used to display a [[Dialog]] on the top of screen\r\n * @public\r\n */\r\nexport class GlobalDialog extends React.Component<GlobalDialogProps, GlobalDialogState> {\r\n  private _container?: HTMLDivElement;\r\n\r\n  public override readonly state: GlobalDialogState = {\r\n    parentDocument: null,\r\n  };\r\n\r\n  constructor(props: GlobalDialogProps) {\r\n    super(props);\r\n  }\r\n\r\n  private _handleRefSet = (popupDiv: HTMLElement | null) => {\r\n    const parentDocument = popupDiv?.ownerDocument ?? null;\r\n    if (parentDocument) {\r\n      this._container = parentDocument.createElement(\"div\");\r\n      this._container.id = this.props.identifier !== undefined ? `dialog-${this.props.identifier}` : \"core-dialog\";\r\n      let rt = parentDocument.getElementById(\"core-dialog-root\") as HTMLDivElement;\r\n      if (!rt) {\r\n        rt = parentDocument.createElement(\"div\");\r\n        rt.id = \"core-dialog-root\";\r\n        parentDocument.body.appendChild(rt);\r\n      }\r\n      rt.appendChild(this._container);\r\n\r\n      // used to support component rendering in pop-out window\r\n      this.setState({ parentDocument });\r\n    }\r\n  };\r\n\r\n  public override componentWillUnmount() {\r\n    // istanbul ignore else\r\n    if (this._container && this._container.parentElement) { // cleanup\r\n      this._container.parentElement.removeChild(this._container);\r\n    }\r\n  }\r\n\r\n  public override render(): React.ReactNode {\r\n    const { identifier, ...props } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars\r\n    return (\r\n      <div ref={this._handleRefSet}>\r\n        {this.state.parentDocument &&\r\n          ReactDOM.createPortal(<Dialog {...props} />, this.state.parentDocument.body)}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"GlobalDialog.js","sourceRoot":"","sources":["../../../../src/core-react/dialog/GlobalDialog.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,QAAQ,MAAM,WAAW,CAAC;AAEtC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAgBlC;;GAEG;AACH,MAAM,OAAO,YAAa,SAAQ,KAAK,CAAC,SAGvC;IAOC,YAAY,KAAwB;QAClC,KAAK,CAAC,KAAK,CAAC,CAAC;QALU,UAAK,GAAsB;YAClD,cAAc,EAAE,IAAI;SACrB,CAAC;QAMM,kBAAa,GAAG,CAAC,QAA4B,EAAE,EAAE;;YACvD,MAAM,cAAc,GAAG,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,aAAa,mCAAI,IAAI,CAAC;YACvD,IAAI,cAAc,EAAE;gBAClB,IAAI,CAAC,UAAU,GAAG,cAAc,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;gBACtD,IAAI,CAAC,UAAU,CAAC,EAAE;oBAChB,IAAI,CAAC,KAAK,CAAC,UAAU,KAAK,SAAS;wBACjC,CAAC,CAAC,UAAU,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE;wBACnC,CAAC,CAAC,aAAa,CAAC;gBACpB,IAAI,EAAE,GAAG,cAAc,CAAC,cAAc,CACpC,kBAAkB,CACD,CAAC;gBACpB,IAAI,CAAC,EAAE,EAAE;oBACP,EAAE,GAAG,cAAc,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;oBACzC,EAAE,CAAC,EAAE,GAAG,kBAAkB,CAAC;oBAC3B,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;iBACrC;gBACD,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;gBAEhC,wDAAwD;gBACxD,IAAI,CAAC,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC,CAAC;aACnC;QACH,CAAC,CAAC;IAvBF,CAAC;IAyBe,oBAAoB;QAClC,uBAAuB;QACvB,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE;YACpD,UAAU;YACV,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;SAC5D;IACH,CAAC;IAEe,MAAM;QACpB,MAAM,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC5C,OAAO,CACL,6BAAK,GAAG,EAAE,IAAI,CAAC,aAAa,IACzB,IAAI,CAAC,KAAK,CAAC,cAAc;YACxB,QAAQ,CAAC,YAAY,CACnB,oBAAC,MAAM,OAAK,KAAK,GAAI,EACrB,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAC/B,CACC,CACP,CAAC;IACJ,CAAC;CACF","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Dialog\n */\n\nimport * as React from \"react\";\nimport * as ReactDOM from \"react-dom\";\nimport type { DialogProps } from \"./Dialog\";\nimport { Dialog } from \"./Dialog\";\n\n/** Properties for the [[GlobalDialog]] component\n * @public\n */\nexport interface GlobalDialogProps extends DialogProps {\n  identifier?: string;\n}\n\n/** State properties for the [[GlobalDialog]] component\n * @public\n */\nexport interface GlobalDialogState {\n  parentDocument: Document | null;\n}\n\n/** GlobalDialog React component used to display a [[Dialog]] on the top of screen\n * @public\n */\nexport class GlobalDialog extends React.Component<\n  GlobalDialogProps,\n  GlobalDialogState\n> {\n  private _container?: HTMLDivElement;\n\n  public override readonly state: GlobalDialogState = {\n    parentDocument: null,\n  };\n\n  constructor(props: GlobalDialogProps) {\n    super(props);\n  }\n\n  private _handleRefSet = (popupDiv: HTMLElement | null) => {\n    const parentDocument = popupDiv?.ownerDocument ?? null;\n    if (parentDocument) {\n      this._container = parentDocument.createElement(\"div\");\n      this._container.id =\n        this.props.identifier !== undefined\n          ? `dialog-${this.props.identifier}`\n          : \"core-dialog\";\n      let rt = parentDocument.getElementById(\n        \"core-dialog-root\"\n      ) as HTMLDivElement;\n      if (!rt) {\n        rt = parentDocument.createElement(\"div\");\n        rt.id = \"core-dialog-root\";\n        parentDocument.body.appendChild(rt);\n      }\n      rt.appendChild(this._container);\n\n      // used to support component rendering in pop-out window\n      this.setState({ parentDocument });\n    }\n  };\n\n  public override componentWillUnmount() {\n    // istanbul ignore else\n    if (this._container && this._container.parentElement) {\n      // cleanup\n      this._container.parentElement.removeChild(this._container);\n    }\n  }\n\n  public override render(): React.ReactNode {\n    const { identifier, ...props } = this.props;\n    return (\n      <div ref={this._handleRefSet}>\n        {this.state.parentDocument &&\n          ReactDOM.createPortal(\n            <Dialog {...props} />,\n            this.state.parentDocument.body\n          )}\n      </div>\n    );\n  }\n}\n"]}

package/lib/esm/core-react/dialog/SimpleDialog.d.ts

@@ -0,0 +1,68 @@
+/** @packageDocumentation
+ * @module Dialog
+ */
+import "./Dialog.scss";
+import * as React from "react";
+import type { DialogButtonDef } from "@itwin/appui-abstract";
+import type { CommonProps } from "../utils/Props";
+import type { Omit } from "../utils/typeUtils";
+import { Dialog as CoreDialog } from "./Dialog";
+/** Properties of [[SimpleDialog]] component.
+ * @internal
+ */
+export interface SimpleDialogProps extends Omit<React.AllHTMLAttributes<HTMLDivElement>, "title">, CommonProps {
+    /** Indicates whether to show dialog or not */
+    opened: boolean;
+    /** Indicates whether the focus should be trapped within the dialog. Default: false */
+    trapFocus?: boolean;
+    /** Whether the hide the header. Default: false */
+    hideHeader?: boolean;
+    /** Title to show in title bar of dialog */
+    title?: string | JSX.Element;
+    /** List of DialogButtonDef objects specifying buttons and associated onClick events */
+    buttonCluster?: DialogButtonDef[];
+    /** onClick event for X button for dialog */
+    onClose?: () => void;
+    /** 'keyup' event for Esc key */
+    onEscape?: () => void;
+    /** Triggered when a click is triggered outside of this dialog. */
+    onOutsideClick?: (event: MouseEvent) => any;
+    /** Whether to show background overlay. Default: true.
+     * @note Modeless dialogs require an id and an implementation of onModelessPointerDown.
+     */
+    modal?: boolean;
+    /** An id for a modeless dialog */
+    modelessId?: string;
+    /** Pointer Down event handler when modeless (modal = false) */
+    onModelessPointerDown?: (event: React.PointerEvent, id: string) => void;
+    /** Initial width of dialog. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. Default: "50%" */
+    width?: string | number;
+    /** Initial height of dialog. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. */
+    height?: string | number;
+    /** Minimum width that the dialog may be resized to. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. Default: 300px */
+    minWidth?: string | number;
+    /** Minimum height that the dialog may be resized to. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. Default: 100px */
+    minHeight?: string | number;
+    /** Maximum width that the dialog may be resized to. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. */
+    maxWidth?: string | number;
+    /** Maximum height that the dialog may be resized to. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. */
+    maxHeight?: string | number;
+    /** Custom CSS Style for overlay */
+    backgroundStyle?: React.CSSProperties;
+    /** Custom CSS Style for title */
+    titleStyle?: React.CSSProperties;
+    /** Custom CSS Style for footer */
+    footerStyle?: React.CSSProperties;
+    /** Custom CSS class name for the content */
+    contentClassName?: string;
+    /** Custom CSS Style for the content */
+    contentStyle?: React.CSSProperties;
+}
+/** itwinui-react [[Dialog]] wrapper that excludes buggy features and adds features from core-react [[Dialog]].
+ * @internal
+ */
+export declare class SimpleDialog extends CoreDialog {
+    constructor(props: SimpleDialogProps);
+    render(): JSX.Element;
+}
+//# sourceMappingURL=SimpleDialog.d.ts.map

package/lib/esm/core-react/dialog/SimpleDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleDialog.d.ts","sourceRoot":"","sources":["../../../../src/core-react/dialog/SimpleDialog.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,eAAe,CAAC;AACvB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE7D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,UAAU,CAAC;AAGhD;;GAEG;AACH,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EAC5D,WAAW;IACb,8CAA8C;IAC9C,MAAM,EAAE,OAAO,CAAC;IAChB,sFAAsF;IACtF,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,kDAAkD;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,uFAAuF;IACvF,aAAa,CAAC,EAAE,eAAe,EAAE,CAAC;IAElC,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,kEAAkE;IAClE,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,GAAG,CAAC;IAE5C;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,+DAA+D;IAC/D,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAExE,gIAAgI;IAChI,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,kHAAkH;IAClH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,wJAAwJ;IACxJ,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,yJAAyJ;IACzJ,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,yIAAyI;IACzI,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,0IAA0I;IAC1I,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B,mCAAmC;IACnC,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACtC,iCAAiC;IACjC,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACjC,kCAAkC;IAClC,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAClC,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uCAAuC;IACvC,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACpC;AAED;;GAEG;AACH,qBAAa,YAAa,SAAQ,UAAU;gBAC9B,KAAK,EAAE,iBAAiB;IAIpB,MAAM,IAAI,GAAG,CAAC,OAAO;CAkFtC"}