@carbon/react
Version:
React components for the Carbon Design System
169 lines (167 loc) • 7.08 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_usePrefix = require("../../internal/usePrefix.js");
const require_Text = require("../Text/Text.js");
const require_keys = require("../../internal/keyboard/keys.js");
const require_match = require("../../internal/keyboard/match.js");
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let react_jsx_runtime = require("react/jsx-runtime");
let _carbon_icons_react = require("@carbon/icons-react");
//#region src/components/ProgressIndicator/ProgressIndicator.tsx
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const translationIds = {
"carbon.progress-step.complete": "carbon.progress-step.complete",
"carbon.progress-step.incomplete": "carbon.progress-step.incomplete",
"carbon.progress-step.current": "carbon.progress-step.current",
"carbon.progress-step.invalid": "carbon.progress-step.invalid"
};
const defaultTranslations = {
[translationIds["carbon.progress-step.complete"]]: "Complete",
[translationIds["carbon.progress-step.incomplete"]]: "Incomplete",
[translationIds["carbon.progress-step.current"]]: "Current",
[translationIds["carbon.progress-step.invalid"]]: "Invalid"
};
const defaultTranslateWithId = (messageId) => {
return defaultTranslations[messageId];
};
function ProgressIndicator({ children, className: customClassName, currentIndex: controlledIndex = 0, onChange, spaceEqually, vertical, ...rest }) {
const prefix = require_usePrefix.usePrefix();
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
className: (0, classnames.default)({
[`${prefix}--progress`]: true,
[`${prefix}--progress--vertical`]: vertical,
[`${prefix}--progress--space-equal`]: spaceEqually && !vertical,
[customClassName ?? ""]: customClassName
}),
...rest,
children: react.default.Children.map(children, (child, index) => {
if (!react.default.isValidElement(child)) return null;
const onClick = onChange ? () => onChange(index) : void 0;
if (index === controlledIndex) return react.default.cloneElement(child, {
complete: child.props.complete,
current: !child.props.complete,
index,
onClick
});
if (index < controlledIndex) return react.default.cloneElement(child, {
complete: true,
index,
onClick
});
if (index > controlledIndex) return react.default.cloneElement(child, {
complete: child.props.complete || false,
index,
onClick
});
return null;
})
});
}
ProgressIndicator.propTypes = {
children: prop_types.default.node,
className: prop_types.default.string,
currentIndex: prop_types.default.number,
onChange: prop_types.default.func,
spaceEqually: prop_types.default.bool,
vertical: prop_types.default.bool
};
function ProgressStep({ label, description, className, current, complete, invalid, secondaryLabel, disabled, onClick, translateWithId: t = defaultTranslateWithId, ...rest }) {
const prefix = require_usePrefix.usePrefix();
const classes = (0, classnames.default)({
[`${prefix}--progress-step`]: true,
[`${prefix}--progress-step--current`]: current,
[`${prefix}--progress-step--complete`]: complete,
[`${prefix}--progress-step--incomplete`]: !complete && !current,
[`${prefix}--progress-step--disabled`]: disabled,
[className ?? ""]: className
});
const handleKeyDown = (e) => {
if (require_match.matches(e, [require_keys.Enter, require_keys.Space]) && onClick) onClick(e);
};
const SVGIcon = ({ complete, current, description, invalid, prefix }) => {
if (invalid) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.Warning, {
className: `${prefix}--progress__warning`,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("title", { children: description })
});
if (current) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.Incomplete, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("title", { children: description }) });
if (complete) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.CheckmarkOutline, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("title", { children: description }) });
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.CircleDash, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("title", { children: description }) });
};
let message = t("carbon.progress-step.incomplete");
if (current) message = t("carbon.progress-step.current");
if (complete) message = t("carbon.progress-step.complete");
if (invalid) message = t("carbon.progress-step.invalid");
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
className: classes,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
type: "button",
className: (0, classnames.default)(`${prefix}--progress-step-button`, { [`${prefix}--progress-step-button--unclickable`]: !onClick || current }),
disabled,
"aria-disabled": disabled,
tabIndex: disabled ? -1 : 0,
onClick: !current ? onClick : void 0,
onKeyDown: handleKeyDown,
title: label,
...rest,
children: [
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SVGIcon, {
complete,
current,
description,
invalid,
prefix
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
className: `${prefix}--progress-text`,
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
as: "span",
className: `${prefix}--progress-label`,
children: label
}), secondaryLabel !== null && secondaryLabel !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
as: "span",
className: `${prefix}--progress-optional`,
children: secondaryLabel
}) : null]
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
className: `${prefix}--assistive-text`,
children: message
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `${prefix}--progress-line` })
]
})
});
}
ProgressStep.propTypes = {
className: prop_types.default.string,
complete: prop_types.default.bool,
current: prop_types.default.bool,
description: prop_types.default.string,
disabled: prop_types.default.bool,
index: prop_types.default.number,
invalid: prop_types.default.bool,
label: prop_types.default.node.isRequired,
onClick: prop_types.default.func,
overflowTooltipProps: prop_types.default.object,
secondaryLabel: prop_types.default.string,
tooltipId: prop_types.default.string,
translateWithId: prop_types.default.func
};
//#endregion
exports.ProgressIndicator = ProgressIndicator;
exports.ProgressStep = ProgressStep;