@itwin/core-react 4.0.0-dev.10 → 4.0.0-dev.12

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

@@ -1,54 +1,54 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "../index";
-
-$uicore-list-item-height: calc(var(--iui-size-s) * 2);
-
-ul.core-listbox {
-  list-style: none;
-  outline: none;
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-  color: $buic-foreground-body;
-  border: 1px solid $buic-foreground-disabled; // default border: disabled or muted foreground
-  position: relative; // required to properly set scrollTop position
-
-  @include uicore-touch-scrolling;
-  @include uicore-scrollbar();
-
-  &:focus {
-    border-color: $buic-foreground-focus;
-
-    li.core-listbox-item.focused {
-      background-color: $buic-row-hover;
-      border: 1px solid $buic-foreground-primary;
-    }
-  }
-
-  li.core-listbox-item {
-    display: inline-flex;
-    line-height: $uicore-list-item-height;
-    padding-left: 4px;
-
-    &[aria-selected="true"] {
-      background-color: $buic-row-selection;
-    }
-
-    &[aria-disabled="true"] {
-      pointer-events: none;
-      color: $buic-foreground-disabled;
-    }
-
-    &:hover {
-      background-color: $buic-row-hover;
-    }
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../index";
+
+$uicore-list-item-height: calc(var(--iui-size-s) * 2);
+
+ul.core-listbox {
+  list-style: none;
+  outline: none;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  color: var(--iui-color-text);
+  border: 1px solid var(--iui-color-border);
+  position: relative; // required to properly set scrollTop position
+
+  @include uicore-touch-scrolling;
+  @include uicore-scrollbar();
+
+  &:focus {
+    border-color: var(--iui-color-border-accent);
+
+    li.core-listbox-item.focused {
+      background-color: var(--iui-color-background-accent-muted);
+      border: 1px solid var(--iui-color-border-accent);
+    }
+  }
+
+  li.core-listbox-item {
+    display: inline-flex;
+    line-height: $uicore-list-item-height;
+    padding-left: 4px;
+
+    &[aria-selected="true"] {
+      background-color: var(--iui-color-background-accent-muted);
+    }
+
+    &[aria-disabled="true"] {
+      pointer-events: none;
+      color: var(--iui-color-text-disabled);
+    }
+
+    &:hover {
+      background-color: var(--iui-color-background-hover);
+    }
+  }
+}

package/lib/esm/core-react/loading/LoadingBar.d.ts

@@ -1,30 +1,30 @@
-/** @packageDocumentation
- * @module Loading
- */
-import "./LoadingBar.scss";
-import * as React from "react";
-import { CommonProps } from "../utils/Props";
-/** Properties for [[LoadingBar]] component
- * @public
- */
-export interface LoadingBarProps extends CommonProps {
-    /** Percent */
-    percent: number;
-    /** Show percentage (optional) */
-    showPercentage?: boolean;
-    /** Height (in pixels) of the loading bar */
-    barHeight: number;
-}
-/**
- * A loading bar with optional percentage text.
- * @public
- */
-export declare class LoadingBar extends React.PureComponent<LoadingBarProps> {
-    static defaultProps: Partial<LoadingBarProps>;
-    render(): JSX.Element;
-}
-/** Sanity check to keep percentage between 0 & 100
- * @internal
- */
-export declare function percentInRange(percent: number): number;
+/** @packageDocumentation
+ * @module Loading
+ */
+import "./LoadingBar.scss";
+import * as React from "react";
+import { CommonProps } from "../utils/Props";
+/** Properties for [[LoadingBar]] component
+ * @public
+ */
+export interface LoadingBarProps extends CommonProps {
+    /** Percent */
+    percent: number;
+    /** Show percentage (optional) */
+    showPercentage?: boolean;
+    /** Height (in pixels) of the loading bar */
+    barHeight: number;
+}
+/**
+ * A loading bar with optional percentage text.
+ * @public
+ */
+export declare class LoadingBar extends React.PureComponent<LoadingBarProps> {
+    static defaultProps: Partial<LoadingBarProps>;
+    render(): JSX.Element;
+}
+/** Sanity check to keep percentage between 0 & 100
+ * @internal
+ */
+export declare function percentInRange(percent: number): number;
 //# sourceMappingURL=LoadingBar.d.ts.map

package/lib/esm/core-react/loading/LoadingBar.js

@@ -1,36 +1,36 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Loading
- */
-import "./LoadingBar.scss";
-import classnames from "classnames";
-import * as React from "react";
-/**
- * A loading bar with optional percentage text.
- * @public
- */
-export class LoadingBar extends React.PureComponent {
-    render() {
-        const percent = `${percentInRange(this.props.percent)}%`;
-        const containerClass = classnames(this.props.className, "core-lb");
-        return (React.createElement("div", { className: containerClass, style: this.props.style },
-            React.createElement("div", { className: "lb-container", style: { height: this.props.barHeight } },
-                React.createElement("div", { className: "fill", style: { width: percent } })),
-            this.props.showPercentage && React.createElement("span", { className: "percent" }, percent)));
-    }
-}
-LoadingBar.defaultProps = {
-    barHeight: 4,
-};
-/** Sanity check to keep percentage between 0 & 100
- * @internal
- */
-export function percentInRange(percent) {
-    let value = Math.min(percent, 100);
-    value = Math.max(value, 0);
-    return value;
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Loading
+ */
+import "./LoadingBar.scss";
+import classnames from "classnames";
+import * as React from "react";
+/**
+ * A loading bar with optional percentage text.
+ * @public
+ */
+export class LoadingBar extends React.PureComponent {
+    render() {
+        const percent = `${percentInRange(this.props.percent)}%`;
+        const containerClass = classnames(this.props.className, "core-lb");
+        return (React.createElement("div", { className: containerClass, style: this.props.style },
+            React.createElement("div", { className: "lb-container", style: { height: this.props.barHeight } },
+                React.createElement("div", { className: "fill", style: { width: percent } })),
+            this.props.showPercentage && React.createElement("span", { className: "percent" }, percent)));
+    }
+}
+LoadingBar.defaultProps = {
+    barHeight: 4,
+};
+/** Sanity check to keep percentage between 0 & 100
+ * @internal
+ */
+export function percentInRange(percent) {
+    let value = Math.min(percent, 100);
+    value = Math.max(value, 0);
+    return value;
+}
 //# sourceMappingURL=LoadingBar.js.map

package/lib/esm/core-react/loading/LoadingBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingBar.js","sourceRoot":"","sources":["../../../../src/core-react/loading/LoadingBar.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B;;;GAGG;AACH,MAAM,OAAO,UAAW,SAAQ,KAAK,CAAC,aAA8B;IAKlD,MAAM;QACpB,MAAM,OAAO,GAAG,GAAG,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;QACzD,MAAM,cAAc,GAAG,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QACnE,OAAO,CACL,6BAAK,SAAS,EAAE,cAAc,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YACrD,6BAAK,SAAS,EAAC,cAAc,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE;gBACnE,6BAAK,SAAS,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,GAAI,CAC/C;YACL,IAAI,CAAC,KAAK,CAAC,cAAc,IAAI,8BAAM,SAAS,EAAC,SAAS,IAAE,OAAO,CAAQ,CACpE,CACP,CAAC;IACJ,CAAC;;AAfa,uBAAY,GAA6B;IACrD,SAAS,EAAE,CAAC;CACb,CAAC;AAgBJ;;GAEG;AACH,MAAM,UAAU,cAAc,CAAC,OAAe;IAC5C,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;IACnC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAC3B,OAAO,KAAK,CAAC;AACf,CAAC","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 Loading\n */\n\nimport \"./LoadingBar.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { CommonProps } from \"../utils/Props\";\n\n/** Properties for [[LoadingBar]] component\n * @public\n */\nexport interface LoadingBarProps extends CommonProps {\n  /** Percent */\n  percent: number;\n  /** Show percentage (optional) */\n  showPercentage?: boolean;\n  /** Height (in pixels) of the loading bar */\n  barHeight: number;\n}\n\n/**\n * A loading bar with optional percentage text.\n * @public\n */\nexport class LoadingBar extends React.PureComponent<LoadingBarProps> {\n  public static defaultProps: Partial<LoadingBarProps> = {\n    barHeight: 4,\n  };\n\n  public override render() {\n    const percent = `${percentInRange(this.props.percent)}%`;\n    const containerClass = classnames(this.props.className, \"core-lb\");\n    return (\n      <div className={containerClass} style={this.props.style}>\n        <div className=\"lb-container\" style={{ height: this.props.barHeight }}>\n          <div className=\"fill\" style={{ width: percent }} />\n        </div>\n        {this.props.showPercentage && <span className=\"percent\">{percent}</span>}\n      </div>\n    );\n  }\n}\n\n/** Sanity check to keep percentage between 0 & 100\n * @internal\n */\nexport function percentInRange(percent: number): number {\n  let value = Math.min(percent, 100);\n  value = Math.max(value, 0);\n  return value;\n}\n"]}
+{"version":3,"file":"LoadingBar.js","sourceRoot":"","sources":["../../../../src/core-react/loading/LoadingBar.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B;;;GAGG;AACH,MAAM,OAAO,UAAW,SAAQ,KAAK,CAAC,aAA8B;IAKlD,MAAM;QACpB,MAAM,OAAO,GAAG,GAAG,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;QACzD,MAAM,cAAc,GAAG,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QACnE,OAAO,CACL,6BAAK,SAAS,EAAE,cAAc,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YACrD,6BAAK,SAAS,EAAC,cAAc,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE;gBACnE,6BAAK,SAAS,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,GAAI,CAC/C;YACL,IAAI,CAAC,KAAK,CAAC,cAAc,IAAI,8BAAM,SAAS,EAAC,SAAS,IAAE,OAAO,CAAQ,CACpE,CACP,CAAC;IACJ,CAAC;;AAfa,uBAAY,GAA6B;IACrD,SAAS,EAAE,CAAC;CACb,CAAC;AAgBJ;;GAEG;AACH,MAAM,UAAU,cAAc,CAAC,OAAe;IAC5C,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;IACnC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAC3B,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Loading\r\n */\r\n\r\nimport \"./LoadingBar.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps } from \"../utils/Props\";\r\n\r\n/** Properties for [[LoadingBar]] component\r\n * @public\r\n */\r\nexport interface LoadingBarProps extends CommonProps {\r\n  /** Percent */\r\n  percent: number;\r\n  /** Show percentage (optional) */\r\n  showPercentage?: boolean;\r\n  /** Height (in pixels) of the loading bar */\r\n  barHeight: number;\r\n}\r\n\r\n/**\r\n * A loading bar with optional percentage text.\r\n * @public\r\n */\r\nexport class LoadingBar extends React.PureComponent<LoadingBarProps> {\r\n  public static defaultProps: Partial<LoadingBarProps> = {\r\n    barHeight: 4,\r\n  };\r\n\r\n  public override render() {\r\n    const percent = `${percentInRange(this.props.percent)}%`;\r\n    const containerClass = classnames(this.props.className, \"core-lb\");\r\n    return (\r\n      <div className={containerClass} style={this.props.style}>\r\n        <div className=\"lb-container\" style={{ height: this.props.barHeight }}>\r\n          <div className=\"fill\" style={{ width: percent }} />\r\n        </div>\r\n        {this.props.showPercentage && <span className=\"percent\">{percent}</span>}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\n/** Sanity check to keep percentage between 0 & 100\r\n * @internal\r\n */\r\nexport function percentInRange(percent: number): number {\r\n  let value = Math.min(percent, 100);\r\n  value = Math.max(value, 0);\r\n  return value;\r\n}\r\n"]}

package/lib/esm/core-react/loading/LoadingBar.scss

@@ -1,29 +1,29 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "../style/themecolors";
-
-.core-lb {
-  display: flex;
-  align-items: center;
-
-  > .lb-container {
-    background-color: $buic-background-5;
-    flex: 1;
-
-    > .fill {
-      height: 100%;
-      background-color: $buic-foreground-primary;
-      transition: width .3s linear;
-    }
-  }
-
-  > .percent {
-    flex: initial;
-    opacity: 0.85;
-    width: 3em;
-    font-size: .9em;
-    margin-left: .3em;
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../style/themecolors";
+
+.core-lb {
+  display: flex;
+  align-items: center;
+
+  > .lb-container {
+    background-color: $buic-background-5;
+    flex: 1;
+
+    > .fill {
+      height: 100%;
+      background-color: $buic-foreground-primary;
+      transition: width .3s linear;
+    }
+  }
+
+  > .percent {
+    flex: initial;
+    opacity: 0.85;
+    width: 3em;
+    font-size: .9em;
+    margin-left: .3em;
+  }
+}

package/lib/esm/core-react/loading/LoadingPrompt.d.ts

@@ -1,40 +1,40 @@
-/** @packageDocumentation
- * @module Loading
- */
-import "./LoadingPrompt.scss";
-import * as React from "react";
-import { CommonProps } from "../utils/Props";
-/** Properties for [[LoadingPrompt]] component
- * @public
- */
-export interface LoadingPromptProps extends CommonProps {
-    /** Title */
-    title: string;
-    /** Message displayed below the title (optional) */
-    message?: string;
-    /** Determine if a percentage bar is displayed (isDeterminate=true), otherwise a loading spinner or indeterminate progress bar is shown. */
-    isDeterminate: boolean;
-    /** Show current status and percentage. Default is false (not shown) */
-    showStatus: boolean;
-    /** Show cancel button. Default is false (not shown) */
-    showCancel: boolean;
-    /** Current loading status text (optional). Only shown if showStatus=true and isDeterminate=true */
-    status: string;
-    /** Current percentage.  Only used if isDeterminate=true */
-    percent: number;
-    /** Show percentage at the end of the loading bar (optional). Only shown if isDeterminate=true and showStatus=false */
-    showPercentage: boolean;
-    /** Show indeterminate progress bar instead of loading spinner */
-    showIndeterminateBar: boolean;
-    /** Function called when Cancel button is clicked. */
-    onCancel?: () => void;
-}
-/**
- * A component to display during loading that optionally shows percentage, status text and a cancel button.
- * @public
- */
-export declare class LoadingPrompt extends React.PureComponent<LoadingPromptProps> {
-    static defaultProps: Partial<LoadingPromptProps>;
-    render(): JSX.Element;
-}
+/** @packageDocumentation
+ * @module Loading
+ */
+import "./LoadingPrompt.scss";
+import * as React from "react";
+import { CommonProps } from "../utils/Props";
+/** Properties for [[LoadingPrompt]] component
+ * @public
+ */
+export interface LoadingPromptProps extends CommonProps {
+    /** Title */
+    title: string;
+    /** Message displayed below the title (optional) */
+    message?: string;
+    /** Determine if a percentage bar is displayed (isDeterminate=true), otherwise a loading spinner or indeterminate progress bar is shown. */
+    isDeterminate: boolean;
+    /** Show current status and percentage. Default is false (not shown) */
+    showStatus: boolean;
+    /** Show cancel button. Default is false (not shown) */
+    showCancel: boolean;
+    /** Current loading status text (optional). Only shown if showStatus=true and isDeterminate=true */
+    status: string;
+    /** Current percentage.  Only used if isDeterminate=true */
+    percent: number;
+    /** Show percentage at the end of the loading bar (optional). Only shown if isDeterminate=true and showStatus=false */
+    showPercentage: boolean;
+    /** Show indeterminate progress bar instead of loading spinner */
+    showIndeterminateBar: boolean;
+    /** Function called when Cancel button is clicked. */
+    onCancel?: () => void;
+}
+/**
+ * A component to display during loading that optionally shows percentage, status text and a cancel button.
+ * @public
+ */
+export declare class LoadingPrompt extends React.PureComponent<LoadingPromptProps> {
+    static defaultProps: Partial<LoadingPromptProps>;
+    render(): JSX.Element;
+}
 //# sourceMappingURL=LoadingPrompt.d.ts.map

package/lib/esm/core-react/loading/LoadingPrompt.js

@@ -1,41 +1,41 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Loading
- */
-import "./LoadingPrompt.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { Button, ProgressLinear } from "@itwin/itwinui-react";
-import { LoadingBar } from "./LoadingBar";
-import { LoadingSpinner } from "./LoadingSpinner";
-import { LoadingStatus } from "./LoadingStatus";
-/**
- * A component to display during loading that optionally shows percentage, status text and a cancel button.
- * @public
- */
-export class LoadingPrompt extends React.PureComponent {
-    render() {
-        const isDeterminate = this.props.isDeterminate;
-        return (React.createElement("div", { className: classnames("core-loadingprompt", this.props.className), style: this.props.style },
-            React.createElement("span", { className: "title" }, this.props.title),
-            this.props.message && React.createElement("span", { className: "message" }, this.props.message),
-            isDeterminate && React.createElement(LoadingBar, { style: { width: "100%" }, percent: this.props.percent, showPercentage: this.props.showPercentage }),
-            (isDeterminate && this.props.showStatus) &&
-                React.createElement(LoadingStatus, { style: { marginTop: ".5em", width: "100%", fontSize: ".75em" }, percent: this.props.percent, message: this.props.status }),
-            !isDeterminate && (this.props.showIndeterminateBar ? React.createElement(ProgressLinear, { indeterminate: true }) : React.createElement(LoadingSpinner, null)),
-            this.props.showCancel && React.createElement(Button, { className: "loading-prompt-cancel", onClick: this.props.onCancel }, "Cancel")));
-    }
-}
-LoadingPrompt.defaultProps = {
-    showPercentage: false,
-    showStatus: false,
-    showCancel: false,
-    isDeterminate: false,
-    showIndeterminateBar: false,
-    percent: 0,
-    status: "",
-};
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Loading
+ */
+import "./LoadingPrompt.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { Button, ProgressLinear } from "@itwin/itwinui-react";
+import { LoadingBar } from "./LoadingBar";
+import { LoadingSpinner } from "./LoadingSpinner";
+import { LoadingStatus } from "./LoadingStatus";
+/**
+ * A component to display during loading that optionally shows percentage, status text and a cancel button.
+ * @public
+ */
+export class LoadingPrompt extends React.PureComponent {
+    render() {
+        const isDeterminate = this.props.isDeterminate;
+        return (React.createElement("div", { className: classnames("core-loadingprompt", this.props.className), style: this.props.style },
+            React.createElement("span", { className: "title" }, this.props.title),
+            this.props.message && React.createElement("span", { className: "message" }, this.props.message),
+            isDeterminate && React.createElement(LoadingBar, { style: { width: "100%" }, percent: this.props.percent, showPercentage: this.props.showPercentage }),
+            (isDeterminate && this.props.showStatus) &&
+                React.createElement(LoadingStatus, { style: { marginTop: ".5em", width: "100%", fontSize: ".75em" }, percent: this.props.percent, message: this.props.status }),
+            !isDeterminate && (this.props.showIndeterminateBar ? React.createElement(ProgressLinear, { indeterminate: true }) : React.createElement(LoadingSpinner, null)),
+            this.props.showCancel && React.createElement(Button, { className: "loading-prompt-cancel", onClick: this.props.onCancel }, "Cancel")));
+    }
+}
+LoadingPrompt.defaultProps = {
+    showPercentage: false,
+    showStatus: false,
+    showCancel: false,
+    isDeterminate: false,
+    showIndeterminateBar: false,
+    percent: 0,
+    status: "",
+};
 //# sourceMappingURL=LoadingPrompt.js.map

package/lib/esm/core-react/loading/LoadingPrompt.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingPrompt.js","sourceRoot":"","sources":["../../../../src/core-react/loading/LoadingPrompt.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAC9B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AA+BhD;;;GAGG;AACH,MAAM,OAAO,aAAc,SAAQ,KAAK,CAAC,aAAiC;IAWxD,MAAM;QACpB,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC;QAE/C,OAAO,CACL,6BAAK,SAAS,EAAE,UAAU,CAAC,oBAAoB,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YAC7F,8BAAM,SAAS,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAQ;YAChD,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,8BAAM,SAAS,EAAC,SAAS,IAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAQ;YAC3E,aAAa,IAAI,oBAAC,UAAU,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,GAAI;YACjI,CAAC,aAAa,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC;gBACvC,oBAAC,aAAa,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAI;YAC3I,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC,oBAAC,cAAc,IAAC,aAAa,SAAG,CAAC,CAAC,CAAC,oBAAC,cAAc,OAAG,CAAC;YAC3G,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,oBAAC,MAAM,IAAC,SAAS,EAAC,uBAAuB,EAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,aAAiB,CAC7G,CACP,CAAC;IACJ,CAAC;;AAxBa,0BAAY,GAAgC;IACxD,cAAc,EAAE,KAAK;IACrB,UAAU,EAAE,KAAK;IACjB,UAAU,EAAE,KAAK;IACjB,aAAa,EAAE,KAAK;IACpB,oBAAoB,EAAE,KAAK;IAC3B,OAAO,EAAE,CAAC;IACV,MAAM,EAAE,EAAE;CACX,CAAC","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 Loading\n */\n\nimport \"./LoadingPrompt.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Button, ProgressLinear } from \"@itwin/itwinui-react\";\nimport { LoadingBar } from \"./LoadingBar\";\nimport { LoadingSpinner } from \"./LoadingSpinner\";\nimport { LoadingStatus } from \"./LoadingStatus\";\nimport { CommonProps } from \"../utils/Props\";\n\n// cspell:ignore loadingprompt\n\n/** Properties for [[LoadingPrompt]] component\n * @public\n */\nexport interface LoadingPromptProps extends CommonProps {\n  /** Title */\n  title: string;\n  /** Message displayed below the title (optional) */\n  message?: string;\n  /** Determine if a percentage bar is displayed (isDeterminate=true), otherwise a loading spinner or indeterminate progress bar is shown. */\n  isDeterminate: boolean;\n  /** Show current status and percentage. Default is false (not shown) */\n  showStatus: boolean;\n  /** Show cancel button. Default is false (not shown) */\n  showCancel: boolean;\n  /** Current loading status text (optional). Only shown if showStatus=true and isDeterminate=true */\n  status: string;\n  /** Current percentage.  Only used if isDeterminate=true */\n  percent: number;\n  /** Show percentage at the end of the loading bar (optional). Only shown if isDeterminate=true and showStatus=false */\n  showPercentage: boolean;\n  /** Show indeterminate progress bar instead of loading spinner */\n  showIndeterminateBar: boolean;\n  /** Function called when Cancel button is clicked. */\n  onCancel?: () => void;\n}\n\n/**\n * A component to display during loading that optionally shows percentage, status text and a cancel button.\n * @public\n */\nexport class LoadingPrompt extends React.PureComponent<LoadingPromptProps> {\n  public static defaultProps: Partial<LoadingPromptProps> = {\n    showPercentage: false,\n    showStatus: false,\n    showCancel: false,\n    isDeterminate: false,\n    showIndeterminateBar: false,\n    percent: 0,\n    status: \"\",\n  };\n\n  public override render() {\n    const isDeterminate = this.props.isDeterminate;\n\n    return (\n      <div className={classnames(\"core-loadingprompt\", this.props.className)} style={this.props.style}>\n        <span className=\"title\">{this.props.title}</span>\n        {this.props.message && <span className=\"message\">{this.props.message}</span>}\n        {isDeterminate && <LoadingBar style={{ width: \"100%\" }} percent={this.props.percent} showPercentage={this.props.showPercentage} />}\n        {(isDeterminate && this.props.showStatus) &&\n          <LoadingStatus style={{ marginTop: \".5em\", width: \"100%\", fontSize: \".75em\" }} percent={this.props.percent} message={this.props.status} />}\n        {!isDeterminate && (this.props.showIndeterminateBar ? <ProgressLinear indeterminate /> : <LoadingSpinner />)}\n        {this.props.showCancel && <Button className=\"loading-prompt-cancel\" onClick={this.props.onCancel}>Cancel</Button>}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"LoadingPrompt.js","sourceRoot":"","sources":["../../../../src/core-react/loading/LoadingPrompt.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAC9B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AA+BhD;;;GAGG;AACH,MAAM,OAAO,aAAc,SAAQ,KAAK,CAAC,aAAiC;IAWxD,MAAM;QACpB,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC;QAE/C,OAAO,CACL,6BAAK,SAAS,EAAE,UAAU,CAAC,oBAAoB,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YAC7F,8BAAM,SAAS,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAQ;YAChD,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,8BAAM,SAAS,EAAC,SAAS,IAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAQ;YAC3E,aAAa,IAAI,oBAAC,UAAU,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,GAAI;YACjI,CAAC,aAAa,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC;gBACvC,oBAAC,aAAa,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAI;YAC3I,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC,oBAAC,cAAc,IAAC,aAAa,SAAG,CAAC,CAAC,CAAC,oBAAC,cAAc,OAAG,CAAC;YAC3G,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,oBAAC,MAAM,IAAC,SAAS,EAAC,uBAAuB,EAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,aAAiB,CAC7G,CACP,CAAC;IACJ,CAAC;;AAxBa,0BAAY,GAAgC;IACxD,cAAc,EAAE,KAAK;IACrB,UAAU,EAAE,KAAK;IACjB,UAAU,EAAE,KAAK;IACjB,aAAa,EAAE,KAAK;IACpB,oBAAoB,EAAE,KAAK;IAC3B,OAAO,EAAE,CAAC;IACV,MAAM,EAAE,EAAE;CACX,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Loading\r\n */\r\n\r\nimport \"./LoadingPrompt.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Button, ProgressLinear } from \"@itwin/itwinui-react\";\r\nimport { LoadingBar } from \"./LoadingBar\";\r\nimport { LoadingSpinner } from \"./LoadingSpinner\";\r\nimport { LoadingStatus } from \"./LoadingStatus\";\r\nimport { CommonProps } from \"../utils/Props\";\r\n\r\n// cspell:ignore loadingprompt\r\n\r\n/** Properties for [[LoadingPrompt]] component\r\n * @public\r\n */\r\nexport interface LoadingPromptProps extends CommonProps {\r\n  /** Title */\r\n  title: string;\r\n  /** Message displayed below the title (optional) */\r\n  message?: string;\r\n  /** Determine if a percentage bar is displayed (isDeterminate=true), otherwise a loading spinner or indeterminate progress bar is shown. */\r\n  isDeterminate: boolean;\r\n  /** Show current status and percentage. Default is false (not shown) */\r\n  showStatus: boolean;\r\n  /** Show cancel button. Default is false (not shown) */\r\n  showCancel: boolean;\r\n  /** Current loading status text (optional). Only shown if showStatus=true and isDeterminate=true */\r\n  status: string;\r\n  /** Current percentage.  Only used if isDeterminate=true */\r\n  percent: number;\r\n  /** Show percentage at the end of the loading bar (optional). Only shown if isDeterminate=true and showStatus=false */\r\n  showPercentage: boolean;\r\n  /** Show indeterminate progress bar instead of loading spinner */\r\n  showIndeterminateBar: boolean;\r\n  /** Function called when Cancel button is clicked. */\r\n  onCancel?: () => void;\r\n}\r\n\r\n/**\r\n * A component to display during loading that optionally shows percentage, status text and a cancel button.\r\n * @public\r\n */\r\nexport class LoadingPrompt extends React.PureComponent<LoadingPromptProps> {\r\n  public static defaultProps: Partial<LoadingPromptProps> = {\r\n    showPercentage: false,\r\n    showStatus: false,\r\n    showCancel: false,\r\n    isDeterminate: false,\r\n    showIndeterminateBar: false,\r\n    percent: 0,\r\n    status: \"\",\r\n  };\r\n\r\n  public override render() {\r\n    const isDeterminate = this.props.isDeterminate;\r\n\r\n    return (\r\n      <div className={classnames(\"core-loadingprompt\", this.props.className)} style={this.props.style}>\r\n        <span className=\"title\">{this.props.title}</span>\r\n        {this.props.message && <span className=\"message\">{this.props.message}</span>}\r\n        {isDeterminate && <LoadingBar style={{ width: \"100%\" }} percent={this.props.percent} showPercentage={this.props.showPercentage} />}\r\n        {(isDeterminate && this.props.showStatus) &&\r\n          <LoadingStatus style={{ marginTop: \".5em\", width: \"100%\", fontSize: \".75em\" }} percent={this.props.percent} message={this.props.status} />}\r\n        {!isDeterminate && (this.props.showIndeterminateBar ? <ProgressLinear indeterminate /> : <LoadingSpinner />)}\r\n        {this.props.showCancel && <Button className=\"loading-prompt-cancel\" onClick={this.props.onCancel}>Cancel</Button>}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -1,33 +1,33 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "../style/themecolors";
-
-// cspell:ignore loadingprompt
-
-.core-loadingprompt {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-
-  .title {
-    font-size: 32px;
-    font-weight: 600;
-    margin-bottom: 10px;
-    color: $buic-foreground-body;
-  }
-
-  .message {
-    font-size: 14px;
-    margin-bottom: 1.75em;
-    color: $buic-foreground-body;
-  }
-}
-
-/* cancel button */
-.loading-prompt-cancel {
-  margin-top: 2em;
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../style/themecolors";
+
+// cspell:ignore loadingprompt
+
+.core-loadingprompt {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+
+  .title {
+    font-size: 32px;
+    font-weight: 600;
+    margin-bottom: 10px;
+    color: var(--iui-color-text);
+  }
+
+  .message {
+    font-size: 14px;
+    margin-bottom: 1.75em;
+    color: var(--iui-color-text);
+  }
+}
+
+/* cancel button */
+.loading-prompt-cancel {
+  margin-top: 2em;
+}

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

@@ -1,33 +1,33 @@
-/** @packageDocumentation
- * @module Loading
- */
-import "./LoadingSpinner.scss";
-import * as React from "react";
-import { ProgressRadialProps } from "@itwin/itwinui-react";
-/** Type for ProgressRadialProps.size
- * @public
- */
-export declare type RadialSizeType = ProgressRadialProps["size"];
-/** Properties for [[LoadingSpinner]] component
- * @public
- */
-export interface LoadingSpinnerProps extends Omit<ProgressRadialProps, "size"> {
-    /** Message (text) displayed */
-    message?: string;
-    /** Position the message above or below the spinner (defaults to bottom) */
-    messageOnTop?: boolean;
-    /**
-       * Size of the progress indicator. Defaults to medium size.
-       * @default ''
-       */
-    size?: RadialSizeType;
-}
-/**
- * A loading spinner component that optionally shows a text message.
- * @public
- */
-export declare class LoadingSpinner extends React.PureComponent<LoadingSpinnerProps> {
-    static defaultProps: Partial<LoadingSpinnerProps>;
-    render(): JSX.Element;
-}
+/** @packageDocumentation
+ * @module Loading
+ */
+import "./LoadingSpinner.scss";
+import * as React from "react";
+import { ProgressRadialProps } from "@itwin/itwinui-react";
+/** Type for ProgressRadialProps.size
+ * @public
+ */
+export declare type RadialSizeType = ProgressRadialProps["size"];
+/** Properties for [[LoadingSpinner]] component
+ * @public
+ */
+export interface LoadingSpinnerProps extends Omit<ProgressRadialProps, "size"> {
+    /** Message (text) displayed */
+    message?: string;
+    /** Position the message above or below the spinner (defaults to bottom) */
+    messageOnTop?: boolean;
+    /**
+       * Size of the progress indicator. Defaults to medium size.
+       * @default ''
+       */
+    size?: RadialSizeType;
+}
+/**
+ * A loading spinner component that optionally shows a text message.
+ * @public
+ */
+export declare class LoadingSpinner extends React.PureComponent<LoadingSpinnerProps> {
+    static defaultProps: Partial<LoadingSpinnerProps>;
+    render(): JSX.Element;
+}
 //# sourceMappingURL=LoadingSpinner.d.ts.map