@itwin/core-react 4.0.0-dev.8 → 4.0.0

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";
-@import "~@itwin/itwinui-css/scss/style/typography";
-@import "~@itwin/itwinui-css/scss/style/variables";
-@import "~@itwin/itwinui-css/scss/text/mixins";
-
-// cspell:ignore titlebar outoffocus nwse
-
-.core-dialog {
-  @include iui-font-family;
-
-  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 $buic-background-dialog-stroke;
-      border-radius: $iui-border-radius;
-      background-color: $buic-background-dialog;
-      color: $buic-text-color;
-      padding: 0;
-
-      > .core-dialog-head {
-        flex-shrink: 0;
-        align-items: center;
-        background-color: $buic-background-titlebar; /* $buic-background-titlebar-outoffocus; */
-        color: $buic-text-color;
-        display: flex;
-        padding: 4px;
-
-        /* padding: $uicore-unbordered-padding; */
-        &.core-dialog-movable {
-          cursor: move;
-        }
-
-        > .core-dialog-title {
-          flex: 1 1;
-
-          @include iui-text(leading);
-
-          margin: 0;
-          margin-left: 4px;
-        }
-
-        &.core-dialog-modal {
-          background-color: $buic-background-dialog;
-
-          > .core-dialog-title {
-            @include iui-text(subheading);
-          }
-        }
-
-        > .core-dialog-close {
-          cursor: pointer;
-          height: $iui-font-size-title;
-          width: $iui-font-size-title;
-          line-height: $iui-font-size-title;
-          flex: 0 0 $uicore-icons-medium;
-          text-align: center;
-          color: $buic-text-color-muted;
-          border: none;
-          background-color: transparent;
-
-          &:hover,
-          &:focus {
-            color: $buic-foreground-activehover;
-          }
-          &:focus {
-            outline: 1px solid $buic-foreground-focus;
-          }
-        }
-      }
-
-      > .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;
-            }
-          }
-        }
-      }
-
-      /*
-      &:focus-within {
-        .core-dialog-head {
-          background-color: $buic-background-titlebar;
-        }
-      }
-      */
-    }
-
-    $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

@@ -1,29 +1,29 @@
-/** @packageDocumentation
- * @module Dialog
- */
-import * as React from "react";
-import { DialogProps } from "./Dialog";
-/** Properties for the [[GlobalDialog]] component
- * @public
- */
-export interface GlobalDialogProps extends DialogProps {
-    identifier?: string;
-}
-/** State properties for the [[GlobalDialog]] component
- * @public
- */
-export interface GlobalDialogState {
-    parentDocument: Document | null;
-}
-/** GlobalDialog React component used to display a [[Dialog]] on the top of screen
- * @public
- */
-export declare class GlobalDialog extends React.Component<GlobalDialogProps, GlobalDialogState> {
-    private _container?;
-    readonly state: GlobalDialogState;
-    constructor(props: GlobalDialogProps);
-    private _handleRefSet;
-    componentWillUnmount(): void;
-    render(): React.ReactNode;
-}
+/** @packageDocumentation
+ * @module Dialog
+ */
+import * as React from "react";
+import { DialogProps } from "./Dialog";
+/** Properties for the [[GlobalDialog]] component
+ * @public
+ */
+export interface GlobalDialogProps extends DialogProps {
+    identifier?: string;
+}
+/** State properties for the [[GlobalDialog]] component
+ * @public
+ */
+export interface GlobalDialogState {
+    parentDocument: Document | null;
+}
+/** GlobalDialog React component used to display a [[Dialog]] on the top of screen
+ * @public
+ */
+export declare class GlobalDialog extends React.Component<GlobalDialogProps, GlobalDialogState> {
+    private _container?;
+    readonly state: GlobalDialogState;
+    constructor(props: GlobalDialogProps);
+    private _handleRefSet;
+    componentWillUnmount(): void;
+    render(): React.ReactNode;
+}
 //# sourceMappingURL=GlobalDialog.d.ts.map

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

@@ -1,50 +1,50 @@
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-import { Dialog } from "./Dialog";
-/** GlobalDialog React component used to display a [[Dialog]] on the top of screen
- * @public
- */
-export class GlobalDialog extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            parentDocument: null,
-        };
-        this._handleRefSet = (popupDiv) => {
-            var _a;
-            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";
-                let rt = parentDocument.getElementById("core-dialog-root");
-                if (!rt) {
-                    rt = parentDocument.createElement("div");
-                    rt.id = "core-dialog-root";
-                    parentDocument.body.appendChild(rt);
-                }
-                rt.appendChild(this._container);
-                // used to support component rendering in pop-out window
-                this.setState({ parentDocument });
-            }
-        };
-    }
-    componentWillUnmount() {
-        // istanbul ignore else
-        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
-        return (React.createElement("div", { ref: this._handleRefSet }, this.state.parentDocument &&
-            ReactDOM.createPortal(React.createElement(Dialog, { ...props }), this.state.parentDocument.body)));
-    }
-}
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { Dialog } from "./Dialog";
+/** GlobalDialog React component used to display a [[Dialog]] on the top of screen
+ * @public
+ */
+export class GlobalDialog extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            parentDocument: null,
+        };
+        this._handleRefSet = (popupDiv) => {
+            var _a;
+            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";
+                let rt = parentDocument.getElementById("core-dialog-root");
+                if (!rt) {
+                    rt = parentDocument.createElement("div");
+                    rt.id = "core-dialog-root";
+                    parentDocument.body.appendChild(rt);
+                }
+                rt.appendChild(this._container);
+                // used to support component rendering in pop-out window
+                this.setState({ parentDocument });
+            }
+        };
+    }
+    componentWillUnmount() {
+        // istanbul ignore else
+        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
+        return (React.createElement("div", { ref: this._handleRefSet }, this.state.parentDocument &&
+            ReactDOM.createPortal(React.createElement(Dialog, { ...props }), this.state.parentDocument.body)));
+    }
+}
 //# sourceMappingURL=GlobalDialog.js.map