@itwin/core-react 3.0.0-dev.77 → 3.0.0-dev.81

package/lib/esm/core-react/popup/Popup.scss

@@ -0,0 +1,231 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../inputs/variables";
+@import "../z-index";
+
+.core-popup {
+ top: 0;
+ left: 0;
+ display: block;
+ box-sizing: border-box;
+ position: absolute;
+ border-radius: 4px;
+ border: 1px solid $buic-background-panel-stroke;
+ background: $buic-background-panel;
+ color: $buic-text-color;
+ animation-duration: .2s;
+ animation-timing-function: ease;
+ animation-fill-mode: forwards;
+ cursor: default;
+
+ @include uicore-z-index(dialog-popup);
+
+ &.core-popup-animation-none {
+  animation-duration: 0s;
+ }
+}
+
+.core-popup.arrow::after, .core-popup.arrow::before {
+ border: solid transparent;
+ content: " ";
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
+ color: $buic-background-panel;
+}
+
+.core-popup.core-popup-bottom-left.arrow::after,
+.core-popup.core-popup-bottom-left.arrow::before {
+ bottom: 100%;
+ left: 25%;
+}
+
+.core-popup.core-popup-bottom-right.arrow::after,
+.core-popup.core-popup-bottom-right.arrow::before {
+ bottom: 100%;
+ left: 75%;
+}
+
+.core-popup.core-popup-bottom.arrow::after,
+.core-popup.core-popup-bottom.arrow::before {
+ bottom: 100%;
+ left: 50%;
+}
+
+.core-popup.core-popup-top.arrow::after,
+.core-popup.core-popup-top.arrow::before {
+ top: 100%;
+ left: 50%;
+}
+
+.core-popup.core-popup-top-left.arrow::after,
+.core-popup.core-popup-top-left.arrow::before {
+ top: 100%;
+ left: 25%;
+}
+
+.core-popup.core-popup-top-right.arrow::after,
+.core-popup.core-popup-top-right.arrow::before {
+ top: 100%;
+ left: 75%;
+}
+
+.core-popup.core-popup-left.arrow::after,
+.core-popup.core-popup-left.arrow::before {
+ top: 50%;
+ left: 100%;
+}
+
+.core-popup.core-popup-right.arrow::after,
+.core-popup.core-popup-right.arrow::before {
+ top: 50%;
+ right: 100%;
+}
+
+.core-popup.core-popup-bottom.arrow::before,
+.core-popup.core-popup-bottom-left.arrow::before,
+.core-popup.core-popup-bottom-right.arrow::before {
+ border-bottom-color: inherit;
+ border-width: 9px;
+ margin-left: -9px;
+}
+
+.core-popup.core-popup-top.arrow::before,
+.core-popup.core-popup-top-left.arrow::before,
+.core-popup.core-popup-top-right.arrow::before {
+ border-top-color: inherit;
+ border-width: 9px;
+ margin-left: -9px;
+}
+
+.core-popup.core-popup-left.arrow::before {
+ border-left-color: inherit;
+ border-width: 9px;
+ margin-top: -9px;
+}
+
+.core-popup.core-popup-right.arrow::before {
+ border-right-color: inherit;
+ border-width: 9px;
+ margin-top: -9px;
+}
+
+.core-popup.core-popup-bottom.arrow::after,
+.core-popup.core-popup-bottom-left.arrow::after,
+.core-popup.core-popup-bottom-right.arrow::after {
+ border-bottom-color: currentColor;
+ border-width: 8px;
+ margin-left: -8px;
+}
+
+.core-popup.core-popup-top.arrow::after,
+.core-popup.core-popup-top-left.arrow::after,
+.core-popup.core-popup-top-right.arrow::after {
+ border-top-color: currentColor;
+ border-width: 8px;
+ margin-left: -8px;
+}
+
+.core-popup.core-popup-left.arrow::after {
+ border-left-color: currentColor;
+ border-width: 8px;
+ margin-top: -8px;
+}
+
+.core-popup.core-popup-right.arrow::after {
+ border-right-color: currentColor;
+ border-width: 8px;
+ margin-top: -8px;
+}
+
+.core-popup-shadow {
+ -webkit-box-shadow: 0 3px 6px $buic-popup-boxshadow;
+ box-shadow: 0px 3px 6px $buic-popup-boxshadow;
+ background-clip: padding-box;
+}
+
+.core-popup-top-left {
+ transform-origin: left bottom 0px;
+ animation-name: animate-corner;
+}
+
+.core-popup-top-right {
+ transform-origin: right bottom 0px;
+ animation-name: animate-corner;
+}
+
+.core-popup-bottom-left {
+ transform-origin: left top 0px;
+ animation-name: animate-corner;
+}
+
+.core-popup-bottom-right {
+ transform-origin: right top 0px;
+ animation-name: animate-corner;
+}
+
+.core-popup-left {
+ transform-origin: right;
+ animation-name: animate-horizontal;
+}
+
+.core-popup-left-top {
+  transform-origin: right top 0px;
+  animation-name: animate-corner;
+ }
+
+.core-popup-right {
+ transform-origin: left;
+ animation-name: animate-horizontal;
+}
+
+.core-popup-right-top {
+  transform-origin: left top 0px;
+  animation-name: animate-corner;
+}
+
+.core-popup-top {
+ transform-origin: bottom;
+ animation-name: animate-vertical;
+};
+
+.core-popup-bottom {
+ transform-origin: top;
+ animation-name: animate-vertical;
+}
+
+@keyframes animate-vertical {
+ from {
+   visibility: hidden;
+   transform: scale(1,.5);
+ }
+ to {
+   visibility: visible;
+   transform: scale(1);
+ }
+}
+
+@keyframes animate-corner {
+ from {
+   visibility: hidden;
+   transform: scale(.5,.5);
+ }
+ to {
+   visibility: visible;
+   transform: scale(1,1);
+ }
+}
+
+@keyframes animate-horizontal {
+ from {
+   visibility: hidden;
+   transform: scale(.5,1);
+ }
+ to {
+   visibility: visible;
+   transform: scale(1,1);
+ }
+}

package/lib/esm/core-react/progress-indicators/ProgressBar.d.ts

@@ -0,0 +1,29 @@
+/** @packageDocumentation
+ * @module Loading
+ */
+/// <reference types="react" />
+import { CommonProps } from "../utils/Props";
+/** Properties for [[ProgressBar]] component
+ * @beta
+ * @deprecated Use ProgressLinearProps in itwinui-react instead.
+ */
+export interface ProgressBarProps extends CommonProps {
+    /** Height (in pixels) of the progress bar. (defaults to 4px) */
+    barHeight?: number;
+    /** Indicates whether the progress bar is determinate showing a percentage or indeterminate continuously animating. (defaults to false) */
+    indeterminate?: boolean;
+    /** One of two possible labels. If only one label is given it will be centered. Otherwise, this label is shown on the left. */
+    labelLeft?: string;
+    /** One of two possible labels. If only one label is given it will be centered. Otherwise, this label is shown on the right. */
+    labelRight?: string;
+    /** Percent for determinate progress bar. */
+    percent?: number;
+}
+/**
+ * ProgressBar React component shows a horizontal progress bar.
+ * The determinate bar reflects a percentage and the indeterminate bar continuously animates.
+ * @beta
+ * @deprecated Use ProgressLinear in itwinui-react instead.
+ */
+export declare function ProgressBar(props: ProgressBarProps): JSX.Element;
+//# sourceMappingURL=ProgressBar.d.ts.map

package/lib/esm/core-react/progress-indicators/ProgressBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../../src/core-react/progress-indicators/ProgressBar.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAIH,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C;;;GAGG;AACH,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,gEAAgE;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0IAA0I;IAC1I,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,8HAA8H;IAC9H,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+HAA+H;IAC/H,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,eA8BlD"}

package/lib/esm/core-react/progress-indicators/ProgressBar.js

@@ -0,0 +1,44 @@
+/*---------------------------------------------------------------------------------------------
+* 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 classnames from "classnames";
+import * as React from "react";
+import { percentInRange } from "../loading/LoadingBar";
+/**
+ * ProgressBar React component shows a horizontal progress bar.
+ * The determinate bar reflects a percentage and the indeterminate bar continuously animates.
+ * @beta
+ * @deprecated Use ProgressLinear in itwinui-react instead.
+ */
+export function ProgressBar(props) {
+    const percent = props.percent !== undefined ? percentInRange(props.percent) : 0;
+    const outerStyle = {
+        ...props.style,
+        height: props.barHeight !== undefined ? `${props.barHeight}px` : undefined,
+    };
+    const innerStyle = {
+        width: !props.indeterminate ? `${percent}%` : undefined,
+    };
+    const innerClass = !props.indeterminate ? "uicore-progress-bar-determinate" : "uicore-progress-bar-indeterminate";
+    const hasLabel = props.labelLeft !== undefined || props.labelRight !== undefined;
+    const multipleLabels = props.labelLeft !== undefined && props.labelRight !== undefined;
+    const bar = (React.createElement("div", { className: classnames("uicore-progress-bar", props.className), style: outerStyle },
+        React.createElement("div", { className: innerClass, style: innerStyle })));
+    const content = !hasLabel ?
+        bar :
+        (React.createElement("div", { className: "uicore-progress-bar-labeled" },
+            bar,
+            React.createElement("div", { className: "uicore-label" },
+                multipleLabels && React.createElement(React.Fragment, null,
+                    React.createElement("span", null, props.labelLeft),
+                    React.createElement("span", null, props.labelRight)),
+                !multipleLabels && React.createElement(React.Fragment, null,
+                    props.labelLeft,
+                    props.labelRight))));
+    return content;
+}
+//# sourceMappingURL=ProgressBar.js.map

package/lib/esm/core-react/progress-indicators/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../../../src/core-react/progress-indicators/ProgressBar.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAmBvD;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAChF,MAAM,UAAU,GAAwB;QACtC,GAAG,KAAK,CAAC,KAAK;QACd,MAAM,EAAE,KAAK,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,IAAI,CAAC,CAAC,CAAC,SAAS;KAC3E,CAAC;IACF,MAAM,UAAU,GAAwB;QACtC,KAAK,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,OAAO,GAAG,CAAC,CAAC,CAAC,SAAS;KACxD,CAAC;IACF,MAAM,UAAU,GAAG,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,mCAAmC,CAAC;IAClH,MAAM,QAAQ,GAAG,KAAK,CAAC,SAAS,KAAK,SAAS,IAAI,KAAK,CAAC,UAAU,KAAK,SAAS,CAAC;IACjF,MAAM,cAAc,GAAG,KAAK,CAAC,SAAS,KAAK,SAAS,IAAI,KAAK,CAAC,UAAU,KAAK,SAAS,CAAC;IACvF,MAAM,GAAG,GAAG,CACV,6BAAK,SAAS,EAAE,UAAU,CAAC,qBAAqB,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,UAAU;QACnF,6BAAK,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,GAAI,CAC7C,CACP,CAAC;IACF,MAAM,OAAO,GAAG,CAAC,QAAQ,CAAC,CAAC;QACzB,GAAG,CAAC,CAAC;QACL,CACE,6BAAK,SAAS,EAAC,6BAA6B;YACzC,GAAG;YACJ,6BAAK,SAAS,EAAC,cAAc;gBAC1B,cAAc,IAAI;oBAAE,kCAAO,KAAK,CAAC,SAAS,CAAQ;oBAAA,kCAAO,KAAK,CAAC,UAAU,CAAQ,CAAG;gBACpF,CAAC,cAAc,IAAI;oBAAG,KAAK,CAAC,SAAS;oBAAE,KAAK,CAAC,UAAU,CAAI,CACxD,CACF,CACP,CAAC;IAEJ,OAAO,OAAO,CAAC;AACjB,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 classnames from \"classnames\";\nimport * as React from \"react\";\nimport { CommonProps } from \"../utils/Props\";\nimport { percentInRange } from \"../loading/LoadingBar\";\n\n/** Properties for [[ProgressBar]] component\n * @beta\n * @deprecated Use ProgressLinearProps in itwinui-react instead.\n */\nexport interface ProgressBarProps extends CommonProps {\n  /** Height (in pixels) of the progress bar. (defaults to 4px) */\n  barHeight?: number;\n  /** Indicates whether the progress bar is determinate showing a percentage or indeterminate continuously animating. (defaults to false) */\n  indeterminate?: boolean;\n  /** One of two possible labels. If only one label is given it will be centered. Otherwise, this label is shown on the left. */\n  labelLeft?: string;\n  /** One of two possible labels. If only one label is given it will be centered. Otherwise, this label is shown on the right. */\n  labelRight?: string;\n  /** Percent for determinate progress bar. */\n  percent?: number;\n}\n\n/**\n * ProgressBar React component shows a horizontal progress bar.\n * The determinate bar reflects a percentage and the indeterminate bar continuously animates.\n * @beta\n * @deprecated Use ProgressLinear in itwinui-react instead.\n */\nexport function ProgressBar(props: ProgressBarProps) {    // eslint-disable-line deprecation/deprecation\n  const percent = props.percent !== undefined ? percentInRange(props.percent) : 0;\n  const outerStyle: React.CSSProperties = {\n    ...props.style,\n    height: props.barHeight !== undefined ? `${props.barHeight}px` : undefined,\n  };\n  const innerStyle: React.CSSProperties = {\n    width: !props.indeterminate ? `${percent}%` : undefined,\n  };\n  const innerClass = !props.indeterminate ? \"uicore-progress-bar-determinate\" : \"uicore-progress-bar-indeterminate\";\n  const hasLabel = props.labelLeft !== undefined || props.labelRight !== undefined;\n  const multipleLabels = props.labelLeft !== undefined && props.labelRight !== undefined;\n  const bar = (\n    <div className={classnames(\"uicore-progress-bar\", props.className)} style={outerStyle}>\n      <div className={innerClass} style={innerStyle} />\n    </div>\n  );\n  const content = !hasLabel ?\n    bar :\n    (\n      <div className=\"uicore-progress-bar-labeled\">\n        {bar}\n        <div className=\"uicore-label\">\n          {multipleLabels && <><span>{props.labelLeft}</span><span>{props.labelRight}</span></>}\n          {!multipleLabels && <>{props.labelLeft}{props.labelRight}</>}\n        </div>\n      </div>\n    );\n\n  return content;\n}\n"]}

package/lib/esm/core-react/progress-indicators/ProgressSpinner.d.ts

@@ -0,0 +1,49 @@
+/** @packageDocumentation
+ * @module Loading
+ */
+import * as React from "react";
+import { CommonProps } from "../utils/Props";
+import { SpinnerSize } from "../loading/Spinner";
+/**
+ * Properties for [[ProgressSpinner]] component
+ * @beta
+ * @deprecated Use ProgressRadialProps in itwinui-react instead.
+ */
+export interface ProgressSpinnerProps extends CommonProps {
+    /**
+     * Spinner percentage. Should be a number between 0 and 100.
+     * @default 0
+     */
+    value?: number;
+    /**
+     * Spinner variant. If true, value will be ignored.
+     * @default false
+     */
+    indeterminate?: boolean;
+    /**
+     * If true, spinner will be full, green, and display a checkmark.
+     * @default false
+     */
+    success?: boolean;
+    /**
+     * If true, spinner will be full, red, and display an X.
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Size of spinner
+     * @default width/height of 40px
+     */
+    size?: SpinnerSize;
+    /**
+     * Child components
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Circular Progress Indicator that supports determinate and indeterminate modes.
+ * @beta
+ * @deprecated Use ProgressRadial in itwinui-react instead.
+ */
+export declare function ProgressSpinner(props: ProgressSpinnerProps): JSX.Element;
+//# sourceMappingURL=ProgressSpinner.d.ts.map

package/lib/esm/core-react/progress-indicators/ProgressSpinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressSpinner.d.ts","sourceRoot":"","sources":["../../../../src/core-react/progress-indicators/ProgressSpinner.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAGH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEjD;;;;GAIG;AACH,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAoD1D"}

package/lib/esm/core-react/progress-indicators/ProgressSpinner.js

@@ -0,0 +1,70 @@
+/*---------------------------------------------------------------------------------------------
+* 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 classnames from "classnames";
+import * as React from "react";
+import { Icon } from "../icons/IconComponent";
+import { SpinnerSize } from "../loading/Spinner";
+/**
+ * Circular Progress Indicator that supports determinate and indeterminate modes.
+ * @beta
+ * @deprecated Use ProgressRadial in itwinui-react instead.
+ */
+export function ProgressSpinner(props) {
+    const { value = 0, indeterminate = false, success = false, error = false, style = {}, size, children, } = props;
+    let outerClassName = classnames("uicore-progress-spinner");
+    const outerStyle = { ...style };
+    const fillStyle = {};
+    // Ensure value is bounded 0 - 100;
+    const dashOffset = 100 - Math.min(Math.max(value, 0), 100);
+    let content;
+    if (error) {
+        outerClassName = classnames(outerClassName, "error");
+        content = React.createElement(Icon, { iconSpec: "icon-close-2" });
+    }
+    else if (success) {
+        outerClassName = classnames(outerClassName, "success");
+        content = (React.createElement(Icon, { iconSpec: "icon-checkmark" }));
+    }
+    else if (indeterminate) {
+        outerClassName = classnames(outerClassName, "indeterminate");
+        content = children;
+    }
+    else {
+        outerClassName = classnames(outerClassName, "determinate");
+        fillStyle.strokeDashoffset = dashOffset;
+        content = children;
+    }
+    setDefaultDimensions(outerStyle, size);
+    return (React.createElement("div", { className: outerClassName, style: outerStyle },
+        React.createElement("svg", { className: "spinner", viewBox: "0 0 40 40" },
+            React.createElement("circle", { className: "shape", cx: "20", cy: "20", r: "15.91549" }),
+            React.createElement("circle", { className: "fill", cx: "20", cy: "20", r: "15.91549", style: fillStyle })),
+        content && React.createElement("span", { className: "uicore-progress-spinner-content" }, content)));
+}
+const setDefaultDimensions = (style, inSize) => {
+    let size = 40;
+    if (inSize !== undefined) {
+        switch (inSize) {
+            case SpinnerSize.Small: // eslint-disable-line deprecation/deprecation
+                size = 16;
+                break;
+            case SpinnerSize.Medium: // eslint-disable-line deprecation/deprecation
+                size = 32;
+                break;
+            case SpinnerSize.Large: // eslint-disable-line deprecation/deprecation
+                size = 64;
+                break;
+            case SpinnerSize.XLarge: // eslint-disable-line deprecation/deprecation
+                size = 96;
+                break;
+        }
+    }
+    style.width = style.width ? style.width : size;
+    style.height = style.height ? style.height : size;
+};
+//# sourceMappingURL=ProgressSpinner.js.map

package/lib/esm/core-react/progress-indicators/ProgressSpinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressSpinner.js","sourceRoot":"","sources":["../../../../src/core-react/progress-indicators/ProgressSpinner.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 Loading\n */\n\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { CommonProps } from \"../utils/Props\";\nimport { Icon } from \"../icons/IconComponent\";\nimport { SpinnerSize } from \"../loading/Spinner\";\n\n/**\n * Properties for [[ProgressSpinner]] component\n * @beta\n * @deprecated Use ProgressRadialProps in itwinui-react instead.\n */\nexport interface ProgressSpinnerProps extends CommonProps {\n  /**\n   * Spinner percentage. Should be a number between 0 and 100.\n   * @default 0\n   */\n  value?: number;\n  /**\n   * Spinner variant. If true, value will be ignored.\n   * @default false\n   */\n  indeterminate?: boolean;\n  /**\n   * If true, spinner will be full, green, and display a checkmark.\n   * @default false\n   */\n  success?: boolean;\n  /**\n   * If true, spinner will be full, red, and display an X.\n   * @default false\n   */\n  error?: boolean;\n  /**\n   * Size of spinner\n   * @default width/height of 40px\n   */\n  size?: SpinnerSize; // eslint-disable-line deprecation/deprecation\n  /**\n   * Child components\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Circular Progress Indicator that supports determinate and indeterminate modes.\n * @beta\n * @deprecated Use ProgressRadial in itwinui-react instead.\n */\nexport function ProgressSpinner(props: ProgressSpinnerProps) {    // eslint-disable-line deprecation/deprecation\n  const {\n    value = 0,\n    indeterminate = false,\n    success = false,\n    error = false,\n    style = {},\n    size,\n    children,\n  } = props;\n\n  let outerClassName = classnames(\"uicore-progress-spinner\");\n  const outerStyle = { ...style };\n  const fillStyle: React.CSSProperties = {};\n  // Ensure value is bounded 0 - 100;\n  const dashOffset = 100 - Math.min(Math.max(value, 0), 100);\n  let content: React.ReactNode;\n\n  if (error) {\n    outerClassName = classnames(outerClassName, \"error\");\n    content = <Icon iconSpec=\"icon-close-2\" />;\n  } else if (success) {\n    outerClassName = classnames(outerClassName, \"success\");\n    content = (\n      <Icon iconSpec=\"icon-checkmark\" />\n    );\n  } else if (indeterminate) {\n    outerClassName = classnames(outerClassName, \"indeterminate\");\n    content = children;\n  } else {\n    outerClassName = classnames(outerClassName, \"determinate\");\n    fillStyle.strokeDashoffset = dashOffset;\n    content = children;\n  }\n\n  setDefaultDimensions(outerStyle, size);\n\n  return (\n    <div className={outerClassName} style={outerStyle}>\n      <svg className=\"spinner\" viewBox=\"0 0 40 40\">\n        <circle className=\"shape\" cx=\"20\" cy=\"20\" r=\"15.91549\" />\n        <circle\n          className=\"fill\"\n          cx=\"20\"\n          cy=\"20\"\n          r=\"15.91549\"\n          style={fillStyle}\n        />\n      </svg>\n      {content && <span className=\"uicore-progress-spinner-content\">{content}</span>}\n    </div>\n  );\n}\n\nconst setDefaultDimensions = (style: React.CSSProperties, inSize?: SpinnerSize) => {  // eslint-disable-line deprecation/deprecation\n  let size = 40;\n\n  if (inSize !== undefined) {\n    switch (inSize) {\n      case SpinnerSize.Small:   // eslint-disable-line deprecation/deprecation\n        size = 16;\n        break;\n      case SpinnerSize.Medium:  // eslint-disable-line deprecation/deprecation\n        size = 32;\n        break;\n      case SpinnerSize.Large:   // eslint-disable-line deprecation/deprecation\n        size = 64;\n        break;\n      case SpinnerSize.XLarge:  // eslint-disable-line deprecation/deprecation\n        size = 96;\n        break;\n    }\n  }\n  style.width = style.width ? style.width : size;\n  style.height = style.height ? style.height : size;\n};\n"]}

package/lib/esm/core-react/progress-indicators/classes.scss

@@ -0,0 +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 './index';
+
+.uicore-progress-bar {
+  @include uicore-progress-bar;
+}
+
+.uicore-progress-bar-determinate {
+  @include uicore-progress-bar-determinate;
+}
+
+.uicore-progress-bar-indeterminate {
+  @include uicore-progress-bar-indeterminate;
+}
+
+.uicore-progress-bar-labeled {
+  @include uicore-progress-bar-labeled;
+}
+
+.uicore-progress-spinner {
+  @include uicore-progress-spinner;
+
+  &.determinate {
+    @include uicore-progress-spinner-determinate;
+  }
+
+  &.indeterminate {
+    @include uicore-progress-spinner-indeterminate;
+  }
+}

package/lib/esm/core-react/progress-indicators/index.scss

@@ -0,0 +1,6 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import './progress-bar';
+@import './progress-spinner';

package/lib/esm/core-react/progress-indicators/progress-bar.scss

@@ -0,0 +1,91 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import '../style/index';
+@import "~@itwin/itwinui-css/scss/style/space";
+@import "~@itwin/itwinui-css/scss/style/typography";
+
+@mixin uicore-progress-bar($height: 4px) {
+  text-align: left;
+  display: block;
+  height: $height;
+  width: 100%;
+  background: $buic-background-5;
+  overflow: hidden;
+
+  > * {
+    display: inline-block;
+    background: $buic-foreground-primary;
+    height: 100%;
+    vertical-align: top;
+  }
+
+  &.success {
+    background: $buic-foreground-success;
+
+    > * {
+      background: $buic-foreground-success;
+    }
+  }
+
+  &.warning {
+    background: $buic-foreground-warning;
+
+    > * {
+      background: $buic-foreground-warning;
+    }
+  }
+
+  &.error {
+    background: $buic-foreground-alert;
+
+    > * {
+      background: $buic-foreground-alert;
+    }
+  }
+}
+
+@mixin uicore-progress-bar-determinate($speed: 2s) {
+  transition: width $speed ease-in-out;
+}
+
+@mixin uicore-progress-bar-indeterminate() {
+  @keyframes uicore-progress-bar-animate-indeterminate {
+    0% {
+      transform: translateX(-60%) scaleX(0);
+    }
+
+    40% {
+      transform: translateX(-40%) scaleX(0.4);
+    }
+
+    100% {
+      transform: translateX(100%) scaleX(0.5);
+    }
+  }
+  width: 100%;
+  animation: uicore-progress-bar-animate-indeterminate 1.5s infinite linear;
+}
+
+@mixin uicore-progress-bar-labeled() {
+  width: 100%;
+
+  > .uicore-label {
+    text-align: center;
+    width: 100%;
+    overflow: hidden;
+    margin-top: $iui-xs;
+    display: block;
+    font-size: $iui-font-size-small;
+
+    > :first-child {
+      float: left;
+    }
+
+    > :last-child {
+      float: right;
+      user-select: none;
+    }
+  }
+}