@itwin/core-react 4.0.0-dev.3 → 4.0.0-dev.6

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

@@ -1,244 +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/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: var(--iui-border-radius-1);
-      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: 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: $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";
+@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;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,47 @@
+/** @packageDocumentation
+ * @module Dialog
+ */
+/** Enum for button types. Determines button label, and default button style.
+  * @public
+  * @deprecated in 3.0. Use [DialogButtonType]($appui-abstract) instead
+  */
+export declare enum DialogButtonType {
+    None = "",
+    Close = "close",
+    OK = "ok",
+    Cancel = "cancel",
+    Yes = "yes",
+    No = "no",
+    Retry = "retry",
+    Next = "next",
+    Previous = "previous"
+}
+/** Enum for button style.
+  * @public
+  * @deprecated in 3.0. Use [DialogButtonStyle]($appui-abstract) instead
+  */
+export declare enum DialogButtonStyle {
+    None = "",
+    Primary = "iui-cta",
+    Hollow = "iui-default",
+    Blue = "iui-high-visibility"
+}
+/** Interface for a dialog button in a button cluster
+  * @public
+  * @deprecated in 3.0. Use [DialogButtonDef]($appui-abstract) instead
+  */
+export interface DialogButtonDef {
+    /** type of button */
+    type: DialogButtonType;
+    /** Triggered on button click */
+    onClick: () => void;
+    /** Which button style to decorate button width */
+    buttonStyle?: DialogButtonStyle;
+    /** Disable the button */
+    disabled?: boolean;
+    /** Custom label */
+    label?: string;
+    /** Custom CSS class */
+    className?: string;
+}
+//# sourceMappingURL=DialogButtonDef.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DialogButtonDef.d.ts","sourceRoot":"","sources":["../../../../src/core-react/dialog/DialogButtonDef.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH;;;IAGI;AACJ,oBAAY,gBAAgB;IAC1B,IAAI,KAAK;IACT,KAAK,UAAU;IACf,EAAE,OAAO;IACT,MAAM,WAAW;IACjB,GAAG,QAAQ;IACX,EAAE,OAAO;IACT,KAAK,UAAU;IACf,IAAI,SAAS;IACb,QAAQ,aAAa;CACtB;AAED;;;IAGI;AACJ,oBAAY,iBAAiB;IAC3B,IAAI,KAAK;IACT,OAAO,YAAY;IACnB,MAAM,gBAAgB;IACtB,IAAI,wBAAwB;CAC7B;AAED;;;IAGI;AACJ,MAAM,WAAW,eAAe;IAC9B,qBAAqB;IACrB,IAAI,EAAE,gBAAgB,CAAC;IACvB,gCAAgC;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,kDAAkD;IAClD,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

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

@@ -0,0 +1,35 @@
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+/** Enum for button types. Determines button label, and default button style.
+  * @public
+  * @deprecated in 3.0. Use [DialogButtonType]($appui-abstract) instead
+  */
+export var DialogButtonType;
+(function (DialogButtonType) {
+    DialogButtonType["None"] = "";
+    DialogButtonType["Close"] = "close";
+    DialogButtonType["OK"] = "ok";
+    DialogButtonType["Cancel"] = "cancel";
+    DialogButtonType["Yes"] = "yes";
+    DialogButtonType["No"] = "no";
+    DialogButtonType["Retry"] = "retry";
+    DialogButtonType["Next"] = "next";
+    DialogButtonType["Previous"] = "previous";
+})(DialogButtonType || (DialogButtonType = {}));
+/** Enum for button style.
+  * @public
+  * @deprecated in 3.0. Use [DialogButtonStyle]($appui-abstract) instead
+  */
+export var DialogButtonStyle;
+(function (DialogButtonStyle) {
+    DialogButtonStyle["None"] = "";
+    DialogButtonStyle["Primary"] = "iui-cta";
+    DialogButtonStyle["Hollow"] = "iui-default";
+    DialogButtonStyle["Blue"] = "iui-high-visibility";
+})(DialogButtonStyle || (DialogButtonStyle = {}));
+//# sourceMappingURL=DialogButtonDef.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DialogButtonDef.js","sourceRoot":"","sources":["../../../../src/core-react/dialog/DialogButtonDef.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH;;;IAGI;AACJ,MAAM,CAAN,IAAY,gBAUX;AAVD,WAAY,gBAAgB;IAC1B,6BAAS,CAAA;IACT,mCAAe,CAAA;IACf,6BAAS,CAAA;IACT,qCAAiB,CAAA;IACjB,+BAAW,CAAA;IACX,6BAAS,CAAA;IACT,mCAAe,CAAA;IACf,iCAAa,CAAA;IACb,yCAAqB,CAAA;AACvB,CAAC,EAVW,gBAAgB,KAAhB,gBAAgB,QAU3B;AAED;;;IAGI;AACJ,MAAM,CAAN,IAAY,iBAKX;AALD,WAAY,iBAAiB;IAC3B,8BAAS,CAAA;IACT,wCAAmB,CAAA;IACnB,2CAAsB,CAAA;IACtB,iDAA4B,CAAA;AAC9B,CAAC,EALW,iBAAiB,KAAjB,iBAAiB,QAK5B","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\n/** Enum for button types. Determines button label, and default button style.\r\n  * @public\r\n  * @deprecated in 3.0. Use [DialogButtonType]($appui-abstract) instead\r\n  */\r\nexport enum DialogButtonType {\r\n  None = \"\",\r\n  Close = \"close\",\r\n  OK = \"ok\",\r\n  Cancel = \"cancel\",\r\n  Yes = \"yes\",\r\n  No = \"no\",\r\n  Retry = \"retry\",\r\n  Next = \"next\",\r\n  Previous = \"previous\"\r\n}\r\n\r\n/** Enum for button style.\r\n  * @public\r\n  * @deprecated in 3.0. Use [DialogButtonStyle]($appui-abstract) instead\r\n  */\r\nexport enum DialogButtonStyle {\r\n  None = \"\",\r\n  Primary = \"iui-cta\",\r\n  Hollow = \"iui-default\",\r\n  Blue = \"iui-high-visibility\",\r\n}\r\n\r\n/** Interface for a dialog button in a button cluster\r\n  * @public\r\n  * @deprecated in 3.0. Use [DialogButtonDef]($appui-abstract) instead\r\n  */\r\nexport interface DialogButtonDef {\r\n  /** type of button */\r\n  type: DialogButtonType;             // eslint-disable-line deprecation/deprecation\r\n  /** Triggered on button click */\r\n  onClick: () => void;\r\n  /** Which button style to decorate button width */\r\n  buttonStyle?: DialogButtonStyle;    // eslint-disable-line deprecation/deprecation\r\n  /** Disable the button */\r\n  disabled?: boolean;\r\n  /** Custom label */\r\n  label?: string;\r\n  /** Custom CSS class */\r\n  className?: string;\r\n}\r\n"]}

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