@itwin/core-react 4.0.0-dev.2 → 4.0.0-dev.21

package/lib/cjs/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";
+
+// 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/cjs/core-react/dialog/GlobalDialog.js

@@ -21,8 +21,7 @@ class GlobalDialog extends React.Component {
             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;
+            const parentDocument = popupDiv?.ownerDocument ?? null;
             if (parentDocument) {
                 this._container = parentDocument.createElement("div");
                 this._container.id = this.props.identifier !== undefined ? `dialog-${this.props.identifier}` : "core-dialog";

package/lib/cjs/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,+BAA+B;AAC/B,sCAAsC;AACtC,qCAA+C;AAgB/C;;GAEG;AACH,MAAa,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,eAAM,OAAK,KAAK,GAAI,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAC1E,CACP,CAAC;IACJ,CAAC;CACF;AA7CD,oCA6CC","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 { Dialog, DialogProps } 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<GlobalDialogProps, GlobalDialogState> {\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 = this.props.identifier !== undefined ? `dialog-${this.props.identifier}` : \"core-dialog\";\n      let rt = parentDocument.getElementById(\"core-dialog-root\") 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) { // cleanup\n      this._container.parentElement.removeChild(this._container);\n    }\n  }\n\n  public override render(): React.ReactNode {\n    const { identifier, ...props } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars\n    return (\n      <div ref={this._handleRefSet}>\n        {this.state.parentDocument &&\n          ReactDOM.createPortal(<Dialog {...props} />, this.state.parentDocument.body)}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"GlobalDialog.js","sourceRoot":"","sources":["../../../../src/core-react/dialog/GlobalDialog.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,+BAA+B;AAC/B,sCAAsC;AACtC,qCAA+C;AAgB/C;;GAEG;AACH,MAAa,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,QAAQ,EAAE,aAAa,IAAI,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,eAAM,OAAK,KAAK,GAAI,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAC1E,CACP,CAAC;IACJ,CAAC;CACF;AA7CD,oCA6CC","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 { Dialog, DialogProps } 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"]}

package/lib/cjs/core-react/elementseparator/ElementSeparator.js

@@ -35,8 +35,8 @@ const useElementSeparatorPointerHandler = ({ onResizeHandleDragChanged, onResize
     const pointerOutOfBounds = (0, react_1.useRef)(false);
     const [isElementDragged, setIsDragged] = (0, react_1.useState)(false);
     const [isElementHovered, setIsHovered] = (0, react_1.useState)(false);
-    const isGroupDragged = isResizeHandleBeingDragged !== null && isResizeHandleBeingDragged !== void 0 ? isResizeHandleBeingDragged : isElementDragged;
-    const isGroupHovered = isResizeHandleHovered !== null && isResizeHandleHovered !== void 0 ? isResizeHandleHovered : isElementHovered;
+    const isGroupDragged = isResizeHandleBeingDragged ?? isElementDragged;
+    const isGroupHovered = isResizeHandleHovered ?? isElementHovered;
     useConditionalCleanup(isElementDragged && !!onResizeHandleDragChanged, () => onResizeHandleDragChanged(false));
     useConditionalCleanup(isElementHovered && !!onResizeHandleHoverChanged, () => onResizeHandleHoverChanged(false));
     if (isGroupHovered && pointerOutOfBounds.current)

package/lib/cjs/core-react/elementseparator/ElementSeparator.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElementSeparator.js","sourceRoot":"","sources":["../../../../src/core-react/elementseparator/ElementSeparator.tsx"],"names":[],"mappings":"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","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 ElementSeparator\n */\n\nimport \"./ElementSeparator.scss\";\nimport * as React from \"react\";\nimport { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\"; // eslint-disable-line no-duplicate-imports\nimport classnames from \"classnames\";\nimport { Orientation } from \"../enums/Orientation\";\nimport { CommonProps } from \"../utils/Props\";\nimport { useThrottledFn } from \"../utils/hooks/useThrottledFn\";\nimport { UiCore } from \"../UiCore\";\n\n/**\n * Results returned by onRatioChanged callback for determining new ratio and whether the ratio was updated.\n * @public\n */\nexport interface RatioChangeResult {\n  ratio: number;\n}\n\n/** Properties of [[ElementSeparator]] React component\n * @public\n */\nexport interface ElementSeparatorProps extends CommonProps {\n  /** Separator orientation */\n  orientation: Orientation;\n  /** Ratio between left cell and right cell */\n  ratio: number;\n  /** Area width or height (depending on orientation) in pixels */\n  movableArea?: number;\n  /** Separator width or height in pixels. 30 by default */\n  separatorSize?: number;\n  /** Callback to ratio changed event */\n  onRatioChanged?: (ratio: number) => void | RatioChangeResult;\n  /** Is resize handle hovered */\n  isResizeHandleHovered?: boolean;\n  /** Callback to hover event change */\n  onResizeHandleHoverChanged?: (isHovered: boolean) => void;\n  /** Is resize handle being dragged */\n  isResizeHandleBeingDragged?: boolean;\n  /** Callback to drag event change */\n  onResizeHandleDragChanged?: (isDragStarted: boolean) => void;\n}\n\nfunction getCurrentGlobalPosition(orientation: Orientation, e: PointerEvent | React.PointerEvent) {\n  return orientation === Orientation.Horizontal ? e.clientX : e.clientY;\n}\n\nconst useConditionalCleanup = (condition: boolean, cleanup: () => void) => {\n  const conditionRef = useRef(condition);\n  const cleanupRef = useRef(cleanup);\n\n  conditionRef.current = condition;\n  cleanupRef.current = cleanup;\n\n  useEffect(() => {\n    return () => {\n      if (conditionRef.current)\n        cleanupRef.current();\n    };\n  }, []);\n};\n\nconst useElementSeparatorPointerHandler = ({\n  onResizeHandleDragChanged,\n  onResizeHandleHoverChanged,\n  isResizeHandleBeingDragged,\n  isResizeHandleHovered,\n  movableArea,\n  ratio,\n  orientation,\n  onRatioChanged,\n}: ElementSeparatorProps) => {\n  const globalPosition = useRef(0);\n  const pointerOutOfBounds = useRef(false);\n\n  const [isElementDragged, setIsDragged] = useState(false);\n  const [isElementHovered, setIsHovered] = useState(false);\n  const isGroupDragged = isResizeHandleBeingDragged ?? isElementDragged;\n  const isGroupHovered = isResizeHandleHovered ?? isElementHovered;\n\n  useConditionalCleanup(isElementDragged && !!onResizeHandleDragChanged, () => onResizeHandleDragChanged!(false));\n  useConditionalCleanup(isElementHovered && !!onResizeHandleHoverChanged, () => onResizeHandleHoverChanged!(false));\n\n  if (isGroupHovered && pointerOutOfBounds.current)\n    pointerOutOfBounds.current = false;\n\n  const stopDrag = useCallback(() => {\n    // istanbul ignore else\n    if (isGroupDragged) {\n      setIsDragged(false);\n      if (onResizeHandleDragChanged)\n        onResizeHandleDragChanged(false);\n    }\n  }, [isGroupDragged, onResizeHandleDragChanged]);\n\n  const startDrag = useCallback((e: PointerEvent | React.PointerEvent) => {\n    globalPosition.current = getCurrentGlobalPosition(orientation, e);\n\n    // istanbul ignore else\n    if (!isGroupDragged) {\n      setIsDragged(true);\n      if (onResizeHandleDragChanged)\n        onResizeHandleDragChanged(true);\n    }\n  }, [isGroupDragged, orientation, onResizeHandleDragChanged]);\n\n  const onPointerUp = useCallback(() => {\n    stopDrag();\n  }, [stopDrag]);\n\n  const onThrottledPointerMove = useThrottledFn((e: PointerEvent | React.PointerEvent) => {\n    if (!movableArea) {\n      stopDrag();\n      return;\n    }\n\n    const currentPosition = getCurrentGlobalPosition(orientation, e);\n    const positionChange = currentPosition - globalPosition.current;\n\n    // Should not need to recalculate if position on our movement axis does not change\n    if (Math.abs(positionChange) < 1)\n      return;\n\n    const currentLocalPosition = movableArea * ratio + positionChange;\n    const newRatio = currentLocalPosition / movableArea;\n\n    globalPosition.current = currentPosition;\n    if (pointerOutOfBounds.current || !onRatioChanged)\n      return;\n\n    const result = onRatioChanged(newRatio);\n    if (result && result.ratio === ratio && !isGroupHovered && !pointerOutOfBounds.current)\n      pointerOutOfBounds.current = true;\n  }, 16, [stopDrag, isGroupHovered, ratio, movableArea, onRatioChanged, orientation]);\n\n  useEffect(() => {\n    return () => onThrottledPointerMove.cancel();\n  }, [onThrottledPointerMove]);\n\n  useLayoutEffect(() => {\n    if (isElementDragged) {\n      document.addEventListener(\"pointerup\", onPointerUp);\n      document.addEventListener(\"pointermove\", onThrottledPointerMove);\n    }\n\n    return () => {\n      document.removeEventListener(\"pointerup\", onPointerUp);\n      document.removeEventListener(\"pointermove\", onThrottledPointerMove);\n    };\n  }, [isElementDragged, onPointerUp, onThrottledPointerMove]);\n\n  const onPointerDown = useCallback((e: PointerEvent | React.PointerEvent) => {\n    if (!isGroupDragged) {\n      startDrag(e);\n    } else {\n      stopDrag();\n    }\n  }, [isGroupDragged, startDrag, stopDrag]);\n\n  const onPointerOver = useCallback(() => {\n    // istanbul ignore next\n    if (isGroupHovered)\n      return;\n\n    setIsHovered(true);\n    if (onResizeHandleHoverChanged)\n      onResizeHandleHoverChanged(true);\n\n  }, [isGroupHovered, onResizeHandleHoverChanged]);\n\n  const onPointerOut = useCallback(() => {\n    // istanbul ignore next\n    if (!isGroupHovered)\n      return;\n\n    setIsHovered(false);\n    if (onResizeHandleHoverChanged)\n      onResizeHandleHoverChanged(false);\n\n  }, [isGroupHovered, onResizeHandleHoverChanged]);\n\n  return {\n    isHovered: isGroupHovered,\n    isDragged: isGroupDragged,\n    onPointerDown,\n    onPointerOver,\n    onPointerOut,\n  };\n};\n\nfunction getStyle(orientation: Orientation, separatorSize?: number): React.CSSProperties {\n  separatorSize = separatorSize || 30;\n\n  if (orientation === Orientation.Horizontal)\n    return {\n      width: separatorSize,\n      margin: `0px ${-Math.floor(separatorSize / 2)}px`,\n    };\n  return {\n    height: separatorSize,\n    margin: `${-Math.floor(separatorSize / 2)}px 1px`,\n  };\n}\n\n/** A movable button, which allows to change the ratio between left element and right element\n * @public\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport const ElementSeparator = (props: ElementSeparatorProps) => {\n  const label = useRef(UiCore.translate(\"elementSeparator.label\"));\n  const [hasHoverHappened, setHasHoverHappened] = useState(false);\n  const { isDragged, isHovered, onPointerDown, onPointerOver, onPointerOut } = useElementSeparatorPointerHandler(props);\n\n  const isHoverNeeded = isHovered || isDragged;\n  if (!hasHoverHappened && isHoverNeeded)\n    setHasHoverHappened(isHoverNeeded);\n\n  // This is done to avoid fade-out animation when first rendering.\n  const unhoverClass = hasHoverHappened ? \"core-element-separator-group-unhovered\" : \"\";\n\n  const classNames = classnames(\n    \"core-element-separator\",\n    (props.orientation === Orientation.Horizontal) ? \"core-element-separator--horizontal\" : \"core-element-separator--vertical\",\n    props.className,\n    isHoverNeeded ? \"core-element-separator-group-hovered\" : unhoverClass,\n  );\n\n  const orientation = props.orientation;\n  const separatorSize = props.separatorSize;\n  const style = useMemo(() => getStyle(orientation, separatorSize), [orientation, separatorSize]);\n  const styles: React.CSSProperties = {\n    ...style,\n    ...props.style,\n  };\n\n  return (\n    <button\n      style={styles}\n      className={classNames}\n      onPointerDown={onPointerDown}\n      onPointerOver={onPointerOver}\n      onPointerOut={onPointerOut}\n      aria-label={label.current}\n    />\n  );\n};\n"]}
+{"version":3,"file":"ElementSeparator.js","sourceRoot":"","sources":["../../../../src/core-react/elementseparator/ElementSeparator.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 ElementSeparator\r\n */\r\n\r\nimport \"./ElementSeparator.scss\";\r\nimport * as React from \"react\";\r\nimport { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\"; // eslint-disable-line no-duplicate-imports\r\nimport classnames from \"classnames\";\r\nimport { Orientation } from \"../enums/Orientation\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport { useThrottledFn } from \"../utils/hooks/useThrottledFn\";\r\nimport { UiCore } from \"../UiCore\";\r\n\r\n/**\r\n * Results returned by onRatioChanged callback for determining new ratio and whether the ratio was updated.\r\n * @public\r\n */\r\nexport interface RatioChangeResult {\r\n  ratio: number;\r\n}\r\n\r\n/** Properties of [[ElementSeparator]] React component\r\n * @public\r\n */\r\nexport interface ElementSeparatorProps extends CommonProps {\r\n  /** Separator orientation */\r\n  orientation: Orientation;\r\n  /** Ratio between left cell and right cell */\r\n  ratio: number;\r\n  /** Area width or height (depending on orientation) in pixels */\r\n  movableArea?: number;\r\n  /** Separator width or height in pixels. 30 by default */\r\n  separatorSize?: number;\r\n  /** Callback to ratio changed event */\r\n  onRatioChanged?: (ratio: number) => void | RatioChangeResult;\r\n  /** Is resize handle hovered */\r\n  isResizeHandleHovered?: boolean;\r\n  /** Callback to hover event change */\r\n  onResizeHandleHoverChanged?: (isHovered: boolean) => void;\r\n  /** Is resize handle being dragged */\r\n  isResizeHandleBeingDragged?: boolean;\r\n  /** Callback to drag event change */\r\n  onResizeHandleDragChanged?: (isDragStarted: boolean) => void;\r\n}\r\n\r\nfunction getCurrentGlobalPosition(orientation: Orientation, e: PointerEvent | React.PointerEvent) {\r\n  return orientation === Orientation.Horizontal ? e.clientX : e.clientY;\r\n}\r\n\r\nconst useConditionalCleanup = (condition: boolean, cleanup: () => void) => {\r\n  const conditionRef = useRef(condition);\r\n  const cleanupRef = useRef(cleanup);\r\n\r\n  conditionRef.current = condition;\r\n  cleanupRef.current = cleanup;\r\n\r\n  useEffect(() => {\r\n    return () => {\r\n      if (conditionRef.current)\r\n        cleanupRef.current();\r\n    };\r\n  }, []);\r\n};\r\n\r\nconst useElementSeparatorPointerHandler = ({\r\n  onResizeHandleDragChanged,\r\n  onResizeHandleHoverChanged,\r\n  isResizeHandleBeingDragged,\r\n  isResizeHandleHovered,\r\n  movableArea,\r\n  ratio,\r\n  orientation,\r\n  onRatioChanged,\r\n}: ElementSeparatorProps) => {\r\n  const globalPosition = useRef(0);\r\n  const pointerOutOfBounds = useRef(false);\r\n\r\n  const [isElementDragged, setIsDragged] = useState(false);\r\n  const [isElementHovered, setIsHovered] = useState(false);\r\n  const isGroupDragged = isResizeHandleBeingDragged ?? isElementDragged;\r\n  const isGroupHovered = isResizeHandleHovered ?? isElementHovered;\r\n\r\n  useConditionalCleanup(isElementDragged && !!onResizeHandleDragChanged, () => onResizeHandleDragChanged!(false));\r\n  useConditionalCleanup(isElementHovered && !!onResizeHandleHoverChanged, () => onResizeHandleHoverChanged!(false));\r\n\r\n  if (isGroupHovered && pointerOutOfBounds.current)\r\n    pointerOutOfBounds.current = false;\r\n\r\n  const stopDrag = useCallback(() => {\r\n    // istanbul ignore else\r\n    if (isGroupDragged) {\r\n      setIsDragged(false);\r\n      if (onResizeHandleDragChanged)\r\n        onResizeHandleDragChanged(false);\r\n    }\r\n  }, [isGroupDragged, onResizeHandleDragChanged]);\r\n\r\n  const startDrag = useCallback((e: PointerEvent | React.PointerEvent) => {\r\n    globalPosition.current = getCurrentGlobalPosition(orientation, e);\r\n\r\n    // istanbul ignore else\r\n    if (!isGroupDragged) {\r\n      setIsDragged(true);\r\n      if (onResizeHandleDragChanged)\r\n        onResizeHandleDragChanged(true);\r\n    }\r\n  }, [isGroupDragged, orientation, onResizeHandleDragChanged]);\r\n\r\n  const onPointerUp = useCallback(() => {\r\n    stopDrag();\r\n  }, [stopDrag]);\r\n\r\n  const onThrottledPointerMove = useThrottledFn((e: PointerEvent | React.PointerEvent) => {\r\n    if (!movableArea) {\r\n      stopDrag();\r\n      return;\r\n    }\r\n\r\n    const currentPosition = getCurrentGlobalPosition(orientation, e);\r\n    const positionChange = currentPosition - globalPosition.current;\r\n\r\n    // Should not need to recalculate if position on our movement axis does not change\r\n    if (Math.abs(positionChange) < 1)\r\n      return;\r\n\r\n    const currentLocalPosition = movableArea * ratio + positionChange;\r\n    const newRatio = currentLocalPosition / movableArea;\r\n\r\n    globalPosition.current = currentPosition;\r\n    if (pointerOutOfBounds.current || !onRatioChanged)\r\n      return;\r\n\r\n    const result = onRatioChanged(newRatio);\r\n    if (result && result.ratio === ratio && !isGroupHovered && !pointerOutOfBounds.current)\r\n      pointerOutOfBounds.current = true;\r\n  }, 16, [stopDrag, isGroupHovered, ratio, movableArea, onRatioChanged, orientation]);\r\n\r\n  useEffect(() => {\r\n    return () => onThrottledPointerMove.cancel();\r\n  }, [onThrottledPointerMove]);\r\n\r\n  useLayoutEffect(() => {\r\n    if (isElementDragged) {\r\n      document.addEventListener(\"pointerup\", onPointerUp);\r\n      document.addEventListener(\"pointermove\", onThrottledPointerMove);\r\n    }\r\n\r\n    return () => {\r\n      document.removeEventListener(\"pointerup\", onPointerUp);\r\n      document.removeEventListener(\"pointermove\", onThrottledPointerMove);\r\n    };\r\n  }, [isElementDragged, onPointerUp, onThrottledPointerMove]);\r\n\r\n  const onPointerDown = useCallback((e: PointerEvent | React.PointerEvent) => {\r\n    if (!isGroupDragged) {\r\n      startDrag(e);\r\n    } else {\r\n      stopDrag();\r\n    }\r\n  }, [isGroupDragged, startDrag, stopDrag]);\r\n\r\n  const onPointerOver = useCallback(() => {\r\n    // istanbul ignore next\r\n    if (isGroupHovered)\r\n      return;\r\n\r\n    setIsHovered(true);\r\n    if (onResizeHandleHoverChanged)\r\n      onResizeHandleHoverChanged(true);\r\n\r\n  }, [isGroupHovered, onResizeHandleHoverChanged]);\r\n\r\n  const onPointerOut = useCallback(() => {\r\n    // istanbul ignore next\r\n    if (!isGroupHovered)\r\n      return;\r\n\r\n    setIsHovered(false);\r\n    if (onResizeHandleHoverChanged)\r\n      onResizeHandleHoverChanged(false);\r\n\r\n  }, [isGroupHovered, onResizeHandleHoverChanged]);\r\n\r\n  return {\r\n    isHovered: isGroupHovered,\r\n    isDragged: isGroupDragged,\r\n    onPointerDown,\r\n    onPointerOver,\r\n    onPointerOut,\r\n  };\r\n};\r\n\r\nfunction getStyle(orientation: Orientation, separatorSize?: number): React.CSSProperties {\r\n  separatorSize = separatorSize || 30;\r\n\r\n  if (orientation === Orientation.Horizontal)\r\n    return {\r\n      width: separatorSize,\r\n      margin: `0px ${-Math.floor(separatorSize / 2)}px`,\r\n    };\r\n  return {\r\n    height: separatorSize,\r\n    margin: `${-Math.floor(separatorSize / 2)}px 1px`,\r\n  };\r\n}\r\n\r\n/** A movable button, which allows to change the ratio between left element and right element\r\n * @public\r\n */\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const ElementSeparator = (props: ElementSeparatorProps) => {\r\n  const label = useRef(UiCore.translate(\"elementSeparator.label\"));\r\n  const [hasHoverHappened, setHasHoverHappened] = useState(false);\r\n  const { isDragged, isHovered, onPointerDown, onPointerOver, onPointerOut } = useElementSeparatorPointerHandler(props);\r\n\r\n  const isHoverNeeded = isHovered || isDragged;\r\n  if (!hasHoverHappened && isHoverNeeded)\r\n    setHasHoverHappened(isHoverNeeded);\r\n\r\n  // This is done to avoid fade-out animation when first rendering.\r\n  const unhoverClass = hasHoverHappened ? \"core-element-separator-group-unhovered\" : \"\";\r\n\r\n  const classNames = classnames(\r\n    \"core-element-separator\",\r\n    (props.orientation === Orientation.Horizontal) ? \"core-element-separator--horizontal\" : \"core-element-separator--vertical\",\r\n    props.className,\r\n    isHoverNeeded ? \"core-element-separator-group-hovered\" : unhoverClass,\r\n  );\r\n\r\n  const orientation = props.orientation;\r\n  const separatorSize = props.separatorSize;\r\n  const style = useMemo(() => getStyle(orientation, separatorSize), [orientation, separatorSize]);\r\n  const styles: React.CSSProperties = {\r\n    ...style,\r\n    ...props.style,\r\n  };\r\n\r\n  return (\r\n    <button\r\n      style={styles}\r\n      className={classNames}\r\n      onPointerDown={onPointerDown}\r\n      onPointerOver={onPointerOver}\r\n      onPointerOut={onPointerOut}\r\n      aria-label={label.current}\r\n    />\r\n  );\r\n};\r\n"]}