@octopusdeploy/design-system-components/dist/src/components/Progress/CircularProgress.js

The design systems component library.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CircularProgress = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const CircularProgress_1 = __importDefault(require("@mui/material/CircularProgress"));
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
/**
 * @example
 * ```tsx
 * <CircularProgressProps size="small" />
 * ```
 * Or for determinate progress:
 * <CircularProgress size="small" determinate >
 */
const CircularProgress = (props) => {
    const { size } = props;
    if (isDeterminateCircularProgress(props)) {
        return (0, jsx_runtime_1.jsx)(CircularProgress_1.default, { classes: { root: rootStyles }, role: "progressbar", "aria-label": "Progress", size: getProgressSize(size), variant: "determinate", value: props.value, thickness: 6 });
    }
    return (0, jsx_runtime_1.jsx)(CircularProgress_1.default, { classes: { root: rootStyles }, role: "progressbar", "aria-label": "Progress", size: getProgressSize(size), variant: "indeterminate", thickness: 6 });
};
exports.CircularProgress = CircularProgress;
function isDeterminateCircularProgress(props) {
    return !!props.determinate;
}
const circularProgressClasses = {
    root: "MuiCircularProgress-root",
};
const rootStyles = (0, css_1.css)({
    [`&.${circularProgressClasses.root}`]: {
        color: design_system_tokens_1.themeTokens.color.progress.foreground.circular,
        // If the circular progress is used in a flex container, the explicit size may by ignored due to the default flex-shrink value of 1.
        // We can disable this by setting flex-shrink to 0, so that this component is reliably sized in a flex container.
        flexShrink: 0,
    },
});
function getProgressSize(size) {
    switch (size) {
        case "small":
            return "1.375rem";
        case "large":
            return "2.75rem";
        case "container":
            return "100%";
    }
}
exports.CircularProgress.displayName = "CircularProgress";