@cimpress-ui/react 1.9.2 → 1.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/commonjs/components/stepper/stepper-item.d.ts +6 -6
- package/dist/commonjs/components/stepper/stepper-item.d.ts.map +1 -1
- package/dist/commonjs/components/stepper/stepper-item.js +35 -27
- package/dist/commonjs/components/stepper/stepper-item.js.map +1 -1
- package/dist/commonjs/components/stepper/stepper.d.ts +1 -1
- package/dist/commonjs/components/stepper/stepper.d.ts.map +1 -1
- package/dist/commonjs/components/stepper/stepper.js +2 -2
- package/dist/commonjs/components/stepper/stepper.js.map +1 -1
- package/dist/commonjs/components/stepper/types.d.ts +1 -1
- package/dist/commonjs/components/stepper/types.d.ts.map +1 -1
- package/dist/commonjs/components/stepper/types.js.map +1 -1
- package/dist/esm/components/stepper/stepper-item.d.ts +6 -6
- package/dist/esm/components/stepper/stepper-item.d.ts.map +1 -1
- package/dist/esm/components/stepper/stepper-item.js +35 -27
- package/dist/esm/components/stepper/stepper-item.js.map +1 -1
- package/dist/esm/components/stepper/stepper.d.ts +1 -1
- package/dist/esm/components/stepper/stepper.d.ts.map +1 -1
- package/dist/esm/components/stepper/stepper.js +2 -2
- package/dist/esm/components/stepper/stepper.js.map +1 -1
- package/dist/esm/components/stepper/types.d.ts +1 -1
- package/dist/esm/components/stepper/types.d.ts.map +1 -1
- package/dist/esm/components/stepper/types.js.map +1 -1
- package/dist-styles/core.css +1 -1
- package/dist-styles/styles.css +1 -1
- package/package.json +1 -1
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import type
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
import type { CommonProps, StringLikeChildren } from '../types.js';
|
|
2
3
|
import type { StepperStatus } from './types.js';
|
|
3
4
|
export interface UNSTABLE_StepperItemProps extends CommonProps {
|
|
4
5
|
/** The title of the step. */
|
|
5
|
-
|
|
6
|
-
/** The description of the step. */
|
|
7
|
-
description?:
|
|
6
|
+
children: StringLikeChildren;
|
|
7
|
+
/** The description of the step. Optionally, you can pass a React node to render rich text. */
|
|
8
|
+
description?: ReactNode;
|
|
8
9
|
/** The status of the step. */
|
|
9
10
|
status?: StepperStatus;
|
|
10
11
|
}
|
|
11
12
|
/**
|
|
12
13
|
* Represents a single step in a stepper component.
|
|
13
14
|
*/
|
|
14
|
-
declare
|
|
15
|
-
export { _UNSTABLE_StepperItem as UNSTABLE_StepperItem };
|
|
15
|
+
export declare function UNSTABLE_StepperItem({ children, description, status: overrideStatus, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_StepperItemProps): import("react/jsx-runtime").JSX.Element;
|
|
16
16
|
//# sourceMappingURL=stepper-item.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stepper-item.d.ts","sourceRoot":"","sources":["../../../../src/components/stepper/stepper-item.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"stepper-item.d.ts","sourceRoot":"","sources":["../../../../src/components/stepper/stepper-item.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAuC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGnE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAwChD,MAAM,WAAW,yBAA0B,SAAQ,WAAW;IAC5D,6BAA6B;IAC7B,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,8FAA8F;IAC9F,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,WAAW,EACX,MAAM,EAAE,cAAc,EACtB,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,yBAAyB,2CAiC3B"}
|
|
@@ -4,34 +4,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
5
5
|
};
|
|
6
6
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
-
exports.UNSTABLE_StepperItem =
|
|
7
|
+
exports.UNSTABLE_StepperItem = UNSTABLE_StepperItem;
|
|
8
8
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
9
9
|
const clsx_1 = __importDefault(require("clsx"));
|
|
10
10
|
const react_1 = require("react");
|
|
11
|
-
const
|
|
12
|
-
const forward_ref_js_1 = require("../../forward-ref.js");
|
|
11
|
+
const react_aria_components_1 = require("react-aria-components");
|
|
13
12
|
const index_js_1 = require("../../icons/index.js");
|
|
14
|
-
const with_style_props_js_1 = require("../../with-style-props.js");
|
|
15
13
|
const text_js_1 = require("../typography/text.js");
|
|
16
14
|
const context_js_1 = require("./context.js");
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
return ((0, jsx_runtime_1.jsxs)("li", { ...props, ref: ref, className: (0, clsx_1.default)('cim-stepper-item', UNSAFE_className), style: UNSAFE_style, "data-status": status, "aria-current": isCurrent, children: [(0, jsx_runtime_1.jsxs)("div", { className: "cim-stepper-item-icon-container", children: [isNavigable ? ((0, jsx_runtime_1.jsx)("button", { className: "cim-stepper-item-icon-button", type: "button", onClick: onChange, "aria-labelledby": labelId, children: iconElement })) : (iconElement), !isLast && orientation === 'vertical' && (0, jsx_runtime_1.jsx)("div", { className: "cim-stepper-item-tail" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "cim-stepper-item-content", children: [isNavigable ? ((0, jsx_runtime_1.jsx)("button", { className: "cim-stepper-item-title-button", type: "button", onClick: onChange, tabIndex: -1, children: titleElement })) : (titleElement), description && ((0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "div", UNSAFE_className: "cim-stepper-item-description", variant: "medium", tone: "muted", children: description }))] })] }));
|
|
28
|
-
}
|
|
29
|
-
/**
|
|
30
|
-
* Represents a single step in a stepper component.
|
|
31
|
-
*/
|
|
32
|
-
const _UNSTABLE_StepperItem = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(UNSTABLE_StepperItem), 'StepperItem');
|
|
33
|
-
exports.UNSTABLE_StepperItem = _UNSTABLE_StepperItem;
|
|
34
|
-
const statusToIcon = {
|
|
15
|
+
// TODO: move to translations
|
|
16
|
+
const assistiveTextMap = {
|
|
17
|
+
incomplete: 'Incomplete',
|
|
18
|
+
complete: 'Completed',
|
|
19
|
+
error: 'Invalid',
|
|
20
|
+
warning: 'Warning',
|
|
21
|
+
'in-progress': 'In progress',
|
|
22
|
+
};
|
|
23
|
+
const statusIconMap = {
|
|
24
|
+
incomplete: react_1.Fragment,
|
|
35
25
|
complete: index_js_1.IconCheckBold,
|
|
36
26
|
// TODO: replace with icon from library when available
|
|
37
27
|
error: () => ((0, jsx_runtime_1.jsxs)("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M24.1421 21.1421C24.9232 21.9232 24.9232 23.1895 24.1421 23.9706C23.3611 24.7516 22.0948 24.7516 21.3137 23.9706L8.58579 11.2426C7.80474 10.4616 7.80474 9.19526 8.58579 8.41421C9.36684 7.63316 10.6332 7.63316 11.4142 8.41421L24.1421 21.1421Z", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("path", { d: "M21.1421 8.85786C21.9232 8.07682 23.1895 8.07682 23.9706 8.85786C24.7516 9.63891 24.7516 10.9052 23.9706 11.6863L11.2426 24.4142C10.4616 25.1953 9.19526 25.1953 8.41421 24.4142C7.63316 23.6332 7.63316 22.3668 8.41421 21.5858L21.1421 8.85786Z", fill: "currentColor" })] })),
|
|
@@ -39,12 +29,30 @@ const statusToIcon = {
|
|
|
39
29
|
warning: () => ((0, jsx_runtime_1.jsxs)("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M18 24C18 25.1046 17.1046 26 16 26C14.8954 26 14 25.1046 14 24C14 22.8954 14.8954 22 16 22C17.1046 22 18 22.8954 18 24Z", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("line", { x1: "16", y1: "8", x2: "16", y2: "18", stroke: "currentColor", strokeWidth: "4", strokeLinecap: "round" })] })),
|
|
40
30
|
'in-progress': index_js_1.IconCircleBoldFill,
|
|
41
31
|
};
|
|
32
|
+
/**
|
|
33
|
+
* Represents a single step in a stepper component.
|
|
34
|
+
*/
|
|
35
|
+
function UNSTABLE_StepperItem({ children, description, status: overrideStatus, UNSAFE_className, UNSAFE_style, ...props }) {
|
|
36
|
+
const { currentStep, stepIndex, onChange, stepCount, orientation } = (0, react_1.useContext)(context_js_1.StepContext);
|
|
37
|
+
const isCurrent = stepIndex === currentStep;
|
|
38
|
+
const isPrevious = stepIndex < currentStep;
|
|
39
|
+
const isLast = stepIndex === stepCount - 1;
|
|
40
|
+
const status = overrideStatus ?? (isCurrent ? 'in-progress' : isPrevious ? 'complete' : 'incomplete');
|
|
41
|
+
const isNavigable = !isCurrent && onChange != null && (overrideStatus != null || isPrevious);
|
|
42
|
+
return ((0, jsx_runtime_1.jsxs)("div", { ...props, role: "listitem", className: (0, clsx_1.default)('cim-stepper-item', UNSAFE_className), style: UNSAFE_style, "data-status": status, "aria-current": isCurrent, children: [(0, jsx_runtime_1.jsxs)("div", { className: "cim-stepper-item-icon-container", "aria-hidden": true, children: [(0, jsx_runtime_1.jsx)(StepperItemIndicator, { status: status, isNavigable: isNavigable, isCurrent: isCurrent, onChange: onChange }), !isLast && orientation === 'vertical' && (0, jsx_runtime_1.jsx)("div", { className: "cim-stepper-item-tail" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "cim-stepper-item-content", children: [(0, jsx_runtime_1.jsx)(StepperItemTitle, { status: status, isNavigable: isNavigable, isCurrent: isCurrent, onChange: onChange, children: children }), description && ((0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "div", UNSAFE_className: "cim-stepper-item-description", variant: "medium", tone: "muted", children: description }))] })] }));
|
|
43
|
+
}
|
|
42
44
|
// eslint-disable-next-line react-refresh/only-export-components
|
|
43
|
-
function
|
|
44
|
-
const
|
|
45
|
-
if (
|
|
46
|
-
return
|
|
45
|
+
function StepperItemIndicator({ status, isNavigable, isCurrent, onChange, }) {
|
|
46
|
+
const icon = ((0, jsx_runtime_1.jsx)("div", { className: "cim-stepper-item-icon", children: status === 'in-progress' && !isCurrent ? null : (0, react_1.createElement)(statusIconMap[status]) }));
|
|
47
|
+
if (isNavigable) {
|
|
48
|
+
return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Button, { className: "cim-stepper-item-icon-button", type: "button", onClick: onChange, excludeFromTabOrder: true, children: icon }));
|
|
47
49
|
}
|
|
48
|
-
return (0, jsx_runtime_1.jsx)(
|
|
50
|
+
return (0, jsx_runtime_1.jsx)("div", { className: "cim-stepper-item-icon-button", children: icon });
|
|
51
|
+
}
|
|
52
|
+
// eslint-disable-next-line react-refresh/only-export-components
|
|
53
|
+
function StepperItemTitle({ children, status, isNavigable, isCurrent, onChange, }) {
|
|
54
|
+
const assistiveText = assistiveTextMap[status];
|
|
55
|
+
const titleElement = ((0, jsx_runtime_1.jsxs)(text_js_1.Text, { as: "span", variant: isCurrent ? 'body-semibold' : 'body', UNSAFE_className: "cim-stepper-item-title", children: [(0, jsx_runtime_1.jsxs)(react_aria_components_1.VisuallyHidden, { children: [assistiveText, ": "] }), children] }));
|
|
56
|
+
return isNavigable ? ((0, jsx_runtime_1.jsx)(react_aria_components_1.Button, { className: "cim-stepper-item-title-button", type: "button", onClick: onChange, children: titleElement })) : ((0, jsx_runtime_1.jsx)("div", { className: "cim-stepper-item-title-button", children: titleElement }));
|
|
49
57
|
}
|
|
50
58
|
//# sourceMappingURL=stepper-item.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stepper-item.js","sourceRoot":"","sources":["../../../../src/components/stepper/stepper-item.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC
|
|
1
|
+
{"version":3,"file":"stepper-item.js","sourceRoot":"","sources":["../../../../src/components/stepper/stepper-item.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { createElement, Fragment, useContext, type ReactNode } from 'react';\nimport { Button as RACButton, VisuallyHidden as RACVisuallyHidden } from 'react-aria-components';\nimport { IconCheckBold, IconCircleBoldFill } from '../../icons/index.js';\nimport type { CommonProps, StringLikeChildren } from '../types.js';\nimport { Text } from '../typography/text.js';\nimport { StepContext } from './context.js';\nimport type { StepperStatus } from './types.js';\n\n// TODO: move to translations\nconst assistiveTextMap: Record<StepperStatus, string> = {\n incomplete: 'Incomplete',\n complete: 'Completed',\n error: 'Invalid',\n warning: 'Warning',\n 'in-progress': 'In progress',\n};\n\nconst statusIconMap: Record<StepperStatus, React.ElementType> = {\n incomplete: Fragment,\n complete: IconCheckBold,\n // TODO: replace with icon from library when available\n error: () => (\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M24.1421 21.1421C24.9232 21.9232 24.9232 23.1895 24.1421 23.9706C23.3611 24.7516 22.0948 24.7516 21.3137 23.9706L8.58579 11.2426C7.80474 10.4616 7.80474 9.19526 8.58579 8.41421C9.36684 7.63316 10.6332 7.63316 11.4142 8.41421L24.1421 21.1421Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M21.1421 8.85786C21.9232 8.07682 23.1895 8.07682 23.9706 8.85786C24.7516 9.63891 24.7516 10.9052 23.9706 11.6863L11.2426 24.4142C10.4616 25.1953 9.19526 25.1953 8.41421 24.4142C7.63316 23.6332 7.63316 22.3668 8.41421 21.5858L21.1421 8.85786Z\"\n fill=\"currentColor\"\n />\n </svg>\n ),\n // TODO: replace with icon from library when available\n warning: () => (\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M18 24C18 25.1046 17.1046 26 16 26C14.8954 26 14 25.1046 14 24C14 22.8954 14.8954 22 16 22C17.1046 22 18 22.8954 18 24Z\"\n fill=\"currentColor\"\n />\n <line x1=\"16\" y1=\"8\" x2=\"16\" y2=\"18\" stroke=\"currentColor\" strokeWidth=\"4\" strokeLinecap=\"round\" />\n </svg>\n ),\n 'in-progress': IconCircleBoldFill,\n};\n\nexport interface UNSTABLE_StepperItemProps extends CommonProps {\n /** The title of the step. */\n children: StringLikeChildren;\n /** The description of the step. Optionally, you can pass a React node to render rich text. */\n description?: ReactNode;\n /** The status of the step. */\n status?: StepperStatus;\n}\n\n/**\n * Represents a single step in a stepper component.\n */\nexport function UNSTABLE_StepperItem({\n children,\n description,\n status: overrideStatus,\n UNSAFE_className,\n UNSAFE_style,\n ...props\n}: UNSTABLE_StepperItemProps) {\n const { currentStep, stepIndex, onChange, stepCount, orientation } = useContext(StepContext);\n const isCurrent = stepIndex === currentStep;\n const isPrevious = stepIndex < currentStep;\n const isLast = stepIndex === stepCount - 1;\n const status = overrideStatus ?? (isCurrent ? 'in-progress' : isPrevious ? 'complete' : 'incomplete');\n const isNavigable = !isCurrent && onChange != null && (overrideStatus != null || isPrevious);\n\n return (\n <div\n {...props}\n role=\"listitem\"\n className={clsx('cim-stepper-item', UNSAFE_className)}\n style={UNSAFE_style}\n data-status={status}\n aria-current={isCurrent}\n >\n <div className=\"cim-stepper-item-icon-container\" aria-hidden>\n <StepperItemIndicator status={status} isNavigable={isNavigable} isCurrent={isCurrent} onChange={onChange} />\n {!isLast && orientation === 'vertical' && <div className=\"cim-stepper-item-tail\" />}\n </div>\n <div className=\"cim-stepper-item-content\">\n <StepperItemTitle status={status} isNavigable={isNavigable} isCurrent={isCurrent} onChange={onChange}>\n {children}\n </StepperItemTitle>\n {description && (\n <Text as=\"div\" UNSAFE_className=\"cim-stepper-item-description\" variant=\"medium\" tone=\"muted\">\n {description}\n </Text>\n )}\n </div>\n </div>\n );\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nfunction StepperItemIndicator({\n status,\n isNavigable,\n isCurrent,\n onChange,\n}: {\n status: StepperStatus;\n isNavigable: boolean;\n isCurrent: boolean;\n onChange?: () => void;\n}) {\n const icon = (\n <div className=\"cim-stepper-item-icon\">\n {status === 'in-progress' && !isCurrent ? null : createElement(statusIconMap[status])}\n </div>\n );\n\n if (isNavigable) {\n return (\n <RACButton className=\"cim-stepper-item-icon-button\" type=\"button\" onClick={onChange} excludeFromTabOrder>\n {icon}\n </RACButton>\n );\n }\n\n return <div className=\"cim-stepper-item-icon-button\">{icon}</div>;\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nfunction StepperItemTitle({\n children,\n status,\n isNavigable,\n isCurrent,\n onChange,\n}: {\n children: StringLikeChildren;\n status: StepperStatus;\n isNavigable: boolean;\n isCurrent: boolean;\n onChange?: () => void;\n}) {\n const assistiveText = assistiveTextMap[status];\n\n const titleElement = (\n <Text as=\"span\" variant={isCurrent ? 'body-semibold' : 'body'} UNSAFE_className=\"cim-stepper-item-title\">\n <RACVisuallyHidden>{assistiveText}: </RACVisuallyHidden>\n {children}\n </Text>\n );\n\n return isNavigable ? (\n <RACButton className=\"cim-stepper-item-title-button\" type=\"button\" onClick={onChange}>\n {titleElement}\n </RACButton>\n ) : (\n <div className=\"cim-stepper-item-title-button\">{titleElement}</div>\n );\n}\n"]}
|
|
@@ -16,6 +16,6 @@ export interface UNSTABLE_StepperProps extends CommonProps {
|
|
|
16
16
|
/**
|
|
17
17
|
* Displays a series of steps in a process.
|
|
18
18
|
*/
|
|
19
|
-
declare const _UNSTABLE_Stepper: (props: UNSTABLE_StepperProps & import("react").RefAttributes<
|
|
19
|
+
declare const _UNSTABLE_Stepper: (props: UNSTABLE_StepperProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
|
|
20
20
|
export { _UNSTABLE_Stepper as UNSTABLE_Stepper };
|
|
21
21
|
//# sourceMappingURL=stepper.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../../src/components/stepper/stepper.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAmD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,MAAM,WAAW,qBAAsB,SAAQ,WAAW;IACxD,2CAA2C;IAC3C,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;CACzC;
|
|
1
|
+
{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../../src/components/stepper/stepper.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAmD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,MAAM,WAAW,qBAAsB,SAAQ,WAAW;IACxD,2CAA2C;IAC3C,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;CACzC;AAqDD;;GAEG;AACH,QAAA,MAAM,iBAAiB,uKAA0D,CAAC;AAElF,OAAO,EAAE,iBAAiB,IAAI,gBAAgB,EAAE,CAAC"}
|
|
@@ -13,7 +13,7 @@ const with_style_props_js_1 = require("../../with-style-props.js");
|
|
|
13
13
|
const context_js_1 = require("./context.js");
|
|
14
14
|
function UNSTABLE_Stepper({ children, currentStep, onChange, orientation = 'horizontal', UNSAFE_className, UNSAFE_style, ...props }, ref) {
|
|
15
15
|
const stepCount = react_1.Children.count(children);
|
|
16
|
-
return ((0, jsx_runtime_1.jsx)("
|
|
16
|
+
return ((0, jsx_runtime_1.jsx)("div", { ...props, role: "list", ref: ref, className: (0, clsx_1.default)('cim-stepper', UNSAFE_className), style: { ...UNSAFE_style, '--cim-stepper-step-count': stepCount }, "data-orientation": orientation, children: react_1.Children.map(children, (child, stepIndex) => {
|
|
17
17
|
const isLast = stepIndex === stepCount - 1;
|
|
18
18
|
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(context_js_1.StepContext.Provider, { value: {
|
|
19
19
|
orientation,
|
|
@@ -24,7 +24,7 @@ function UNSTABLE_Stepper({ children, currentStep, onChange, orientation = 'hori
|
|
|
24
24
|
(() => {
|
|
25
25
|
onChange(stepIndex);
|
|
26
26
|
}),
|
|
27
|
-
}, children: child }), !isLast && orientation === 'horizontal' && (0, jsx_runtime_1.jsx)("div", { className: "cim-stepper-item-tail" })] }));
|
|
27
|
+
}, children: child }), !isLast && orientation === 'horizontal' && (0, jsx_runtime_1.jsx)("div", { className: "cim-stepper-item-tail", role: "presentation" })] }));
|
|
28
28
|
}) }));
|
|
29
29
|
}
|
|
30
30
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stepper.js","sourceRoot":"","sources":["../../../../src/components/stepper/stepper.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AACxB,iCAAwF;AACxF,yDAAkD;AAClD,mEAA2D;AAE3D,6CAA2C;AAgB3C,SAAS,gBAAgB,CACvB,EACE,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,WAAW,GAAG,YAAY,EAC1B,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACc,EACxB,
|
|
1
|
+
{"version":3,"file":"stepper.js","sourceRoot":"","sources":["../../../../src/components/stepper/stepper.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AACxB,iCAAwF;AACxF,yDAAkD;AAClD,mEAA2D;AAE3D,6CAA2C;AAgB3C,SAAS,gBAAgB,CACvB,EACE,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,WAAW,GAAG,YAAY,EAC1B,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACc,EACxB,GAAiC;IAEjC,MAAM,SAAS,GAAG,gBAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAE3C,OAAO,CACL,mCACM,KAAK,EACT,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,aAAa,EAAE,gBAAgB,CAAC,EAChD,KAAK,EAAE,EAAE,GAAG,YAAY,EAAE,0BAA0B,EAAE,SAAS,EAAmB,sBAChE,WAAW,YAE5B,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE;YAC3C,MAAM,MAAM,GAAG,SAAS,KAAK,SAAS,GAAG,CAAC,CAAC;YAE3C,OAAO,CACL,6DACE,uBAAC,wBAAW,CAAC,QAAQ,IACnB,KAAK,EAAE;4BACL,WAAW;4BACX,SAAS,EAAE,gBAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC;4BACnC,WAAW,EAAE,WAAW,IAAI,CAAC,CAAC;4BAC9B,SAAS;4BACT,QAAQ,EACN,QAAQ;gCACR,CAAC,GAAG,EAAE;oCACJ,QAAQ,CAAC,SAAS,CAAC,CAAC;gCACtB,CAAC,CAAC;yBACL,YAEA,KAAK,GACe,EACtB,CAAC,MAAM,IAAI,WAAW,KAAK,YAAY,IAAI,gCAAK,SAAS,EAAC,uBAAuB,EAAC,IAAI,EAAC,cAAc,GAAG,IACxG,CACJ,CAAC;QACJ,CAAC,CAAC,GACE,CACP,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,iBAAiB,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,gBAAgB,CAAC,EAAE,SAAS,CAAC,CAAC;AAEpD,6CAAgB","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { Children, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { CommonProps } from '../types.js';\nimport { StepContext } from './context.js';\n\nexport interface UNSTABLE_StepperProps extends CommonProps {\n /** The steps to display in the stepper. */\n children: ReactNode;\n /** The index of the active step. */\n currentStep?: number;\n /** The callback to call when the current step changes. */\n onChange?: (step: number) => void;\n /** The orientation of the stepper.\n *\n * @default 'horizontal'\n */\n orientation?: 'vertical' | 'horizontal';\n}\n\nfunction UNSTABLE_Stepper(\n {\n children,\n currentStep,\n onChange,\n orientation = 'horizontal',\n UNSAFE_className,\n UNSAFE_style,\n ...props\n }: UNSTABLE_StepperProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const stepCount = Children.count(children);\n\n return (\n <div\n {...props}\n role=\"list\"\n ref={ref}\n className={clsx('cim-stepper', UNSAFE_className)}\n style={{ ...UNSAFE_style, '--cim-stepper-step-count': stepCount } as CSSProperties}\n data-orientation={orientation}\n >\n {Children.map(children, (child, stepIndex) => {\n const isLast = stepIndex === stepCount - 1;\n\n return (\n <>\n <StepContext.Provider\n value={{\n orientation,\n stepCount: Children.count(children),\n currentStep: currentStep ?? -1,\n stepIndex,\n onChange:\n onChange &&\n (() => {\n onChange(stepIndex);\n }),\n }}\n >\n {child}\n </StepContext.Provider>\n {!isLast && orientation === 'horizontal' && <div className=\"cim-stepper-item-tail\" role=\"presentation\" />}\n </>\n );\n })}\n </div>\n );\n}\n\n/**\n * Displays a series of steps in a process.\n */\nconst _UNSTABLE_Stepper = withStyleProps(forwardRef(UNSTABLE_Stepper), 'Stepper');\n\nexport { _UNSTABLE_Stepper as UNSTABLE_Stepper };\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export type StepperStatus = 'complete' | 'error' | 'warning' | 'in-progress';
|
|
1
|
+
export type StepperStatus = 'incomplete' | 'complete' | 'error' | 'warning' | 'in-progress';
|
|
2
2
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/stepper/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,aAAa,CAAC"}
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/stepper/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,YAAY,GAAG,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,aAAa,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/stepper/types.ts"],"names":[],"mappings":"","sourcesContent":["export type StepperStatus = 'complete' | 'error' | 'warning' | 'in-progress';\n"]}
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/stepper/types.ts"],"names":[],"mappings":"","sourcesContent":["export type StepperStatus = 'incomplete' | 'complete' | 'error' | 'warning' | 'in-progress';\n"]}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import type
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
import type { CommonProps, StringLikeChildren } from '../types.js';
|
|
2
3
|
import type { StepperStatus } from './types.js';
|
|
3
4
|
export interface UNSTABLE_StepperItemProps extends CommonProps {
|
|
4
5
|
/** The title of the step. */
|
|
5
|
-
|
|
6
|
-
/** The description of the step. */
|
|
7
|
-
description?:
|
|
6
|
+
children: StringLikeChildren;
|
|
7
|
+
/** The description of the step. Optionally, you can pass a React node to render rich text. */
|
|
8
|
+
description?: ReactNode;
|
|
8
9
|
/** The status of the step. */
|
|
9
10
|
status?: StepperStatus;
|
|
10
11
|
}
|
|
11
12
|
/**
|
|
12
13
|
* Represents a single step in a stepper component.
|
|
13
14
|
*/
|
|
14
|
-
declare
|
|
15
|
-
export { _UNSTABLE_StepperItem as UNSTABLE_StepperItem };
|
|
15
|
+
export declare function UNSTABLE_StepperItem({ children, description, status: overrideStatus, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_StepperItemProps): import("react/jsx-runtime").JSX.Element;
|
|
16
16
|
//# sourceMappingURL=stepper-item.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stepper-item.d.ts","sourceRoot":"","sources":["../../../../src/components/stepper/stepper-item.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"stepper-item.d.ts","sourceRoot":"","sources":["../../../../src/components/stepper/stepper-item.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAuC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGnE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAwChD,MAAM,WAAW,yBAA0B,SAAQ,WAAW;IAC5D,6BAA6B;IAC7B,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,8FAA8F;IAC9F,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,WAAW,EACX,MAAM,EAAE,cAAc,EACtB,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,yBAAyB,2CAiC3B"}
|
|
@@ -1,31 +1,21 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import clsx from 'clsx';
|
|
4
|
-
import { useContext } from 'react';
|
|
5
|
-
import {
|
|
6
|
-
import { forwardRef } from '../../forward-ref.js';
|
|
4
|
+
import { createElement, Fragment, useContext } from 'react';
|
|
5
|
+
import { Button as RACButton, VisuallyHidden as RACVisuallyHidden } from 'react-aria-components';
|
|
7
6
|
import { IconCheckBold, IconCircleBoldFill } from '../../icons/index.js';
|
|
8
|
-
import { withStyleProps } from '../../with-style-props.js';
|
|
9
7
|
import { Text } from '../typography/text.js';
|
|
10
8
|
import { StepContext } from './context.js';
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
return (_jsxs("li", { ...props, ref: ref, className: clsx('cim-stepper-item', UNSAFE_className), style: UNSAFE_style, "data-status": status, "aria-current": isCurrent, children: [_jsxs("div", { className: "cim-stepper-item-icon-container", children: [isNavigable ? (_jsx("button", { className: "cim-stepper-item-icon-button", type: "button", onClick: onChange, "aria-labelledby": labelId, children: iconElement })) : (iconElement), !isLast && orientation === 'vertical' && _jsx("div", { className: "cim-stepper-item-tail" })] }), _jsxs("div", { className: "cim-stepper-item-content", children: [isNavigable ? (_jsx("button", { className: "cim-stepper-item-title-button", type: "button", onClick: onChange, tabIndex: -1, children: titleElement })) : (titleElement), description && (_jsx(Text, { as: "div", UNSAFE_className: "cim-stepper-item-description", variant: "medium", tone: "muted", children: description }))] })] }));
|
|
22
|
-
}
|
|
23
|
-
/**
|
|
24
|
-
* Represents a single step in a stepper component.
|
|
25
|
-
*/
|
|
26
|
-
const _UNSTABLE_StepperItem = withStyleProps(forwardRef(UNSTABLE_StepperItem), 'StepperItem');
|
|
27
|
-
export { _UNSTABLE_StepperItem as UNSTABLE_StepperItem };
|
|
28
|
-
const statusToIcon = {
|
|
9
|
+
// TODO: move to translations
|
|
10
|
+
const assistiveTextMap = {
|
|
11
|
+
incomplete: 'Incomplete',
|
|
12
|
+
complete: 'Completed',
|
|
13
|
+
error: 'Invalid',
|
|
14
|
+
warning: 'Warning',
|
|
15
|
+
'in-progress': 'In progress',
|
|
16
|
+
};
|
|
17
|
+
const statusIconMap = {
|
|
18
|
+
incomplete: Fragment,
|
|
29
19
|
complete: IconCheckBold,
|
|
30
20
|
// TODO: replace with icon from library when available
|
|
31
21
|
error: () => (_jsxs("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M24.1421 21.1421C24.9232 21.9232 24.9232 23.1895 24.1421 23.9706C23.3611 24.7516 22.0948 24.7516 21.3137 23.9706L8.58579 11.2426C7.80474 10.4616 7.80474 9.19526 8.58579 8.41421C9.36684 7.63316 10.6332 7.63316 11.4142 8.41421L24.1421 21.1421Z", fill: "currentColor" }), _jsx("path", { d: "M21.1421 8.85786C21.9232 8.07682 23.1895 8.07682 23.9706 8.85786C24.7516 9.63891 24.7516 10.9052 23.9706 11.6863L11.2426 24.4142C10.4616 25.1953 9.19526 25.1953 8.41421 24.4142C7.63316 23.6332 7.63316 22.3668 8.41421 21.5858L21.1421 8.85786Z", fill: "currentColor" })] })),
|
|
@@ -33,12 +23,30 @@ const statusToIcon = {
|
|
|
33
23
|
warning: () => (_jsxs("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M18 24C18 25.1046 17.1046 26 16 26C14.8954 26 14 25.1046 14 24C14 22.8954 14.8954 22 16 22C17.1046 22 18 22.8954 18 24Z", fill: "currentColor" }), _jsx("line", { x1: "16", y1: "8", x2: "16", y2: "18", stroke: "currentColor", strokeWidth: "4", strokeLinecap: "round" })] })),
|
|
34
24
|
'in-progress': IconCircleBoldFill,
|
|
35
25
|
};
|
|
26
|
+
/**
|
|
27
|
+
* Represents a single step in a stepper component.
|
|
28
|
+
*/
|
|
29
|
+
export function UNSTABLE_StepperItem({ children, description, status: overrideStatus, UNSAFE_className, UNSAFE_style, ...props }) {
|
|
30
|
+
const { currentStep, stepIndex, onChange, stepCount, orientation } = useContext(StepContext);
|
|
31
|
+
const isCurrent = stepIndex === currentStep;
|
|
32
|
+
const isPrevious = stepIndex < currentStep;
|
|
33
|
+
const isLast = stepIndex === stepCount - 1;
|
|
34
|
+
const status = overrideStatus ?? (isCurrent ? 'in-progress' : isPrevious ? 'complete' : 'incomplete');
|
|
35
|
+
const isNavigable = !isCurrent && onChange != null && (overrideStatus != null || isPrevious);
|
|
36
|
+
return (_jsxs("div", { ...props, role: "listitem", className: clsx('cim-stepper-item', UNSAFE_className), style: UNSAFE_style, "data-status": status, "aria-current": isCurrent, children: [_jsxs("div", { className: "cim-stepper-item-icon-container", "aria-hidden": true, children: [_jsx(StepperItemIndicator, { status: status, isNavigable: isNavigable, isCurrent: isCurrent, onChange: onChange }), !isLast && orientation === 'vertical' && _jsx("div", { className: "cim-stepper-item-tail" })] }), _jsxs("div", { className: "cim-stepper-item-content", children: [_jsx(StepperItemTitle, { status: status, isNavigable: isNavigable, isCurrent: isCurrent, onChange: onChange, children: children }), description && (_jsx(Text, { as: "div", UNSAFE_className: "cim-stepper-item-description", variant: "medium", tone: "muted", children: description }))] })] }));
|
|
37
|
+
}
|
|
36
38
|
// eslint-disable-next-line react-refresh/only-export-components
|
|
37
|
-
function
|
|
38
|
-
const
|
|
39
|
-
if (
|
|
40
|
-
return
|
|
39
|
+
function StepperItemIndicator({ status, isNavigable, isCurrent, onChange, }) {
|
|
40
|
+
const icon = (_jsx("div", { className: "cim-stepper-item-icon", children: status === 'in-progress' && !isCurrent ? null : createElement(statusIconMap[status]) }));
|
|
41
|
+
if (isNavigable) {
|
|
42
|
+
return (_jsx(RACButton, { className: "cim-stepper-item-icon-button", type: "button", onClick: onChange, excludeFromTabOrder: true, children: icon }));
|
|
41
43
|
}
|
|
42
|
-
return _jsx(
|
|
44
|
+
return _jsx("div", { className: "cim-stepper-item-icon-button", children: icon });
|
|
45
|
+
}
|
|
46
|
+
// eslint-disable-next-line react-refresh/only-export-components
|
|
47
|
+
function StepperItemTitle({ children, status, isNavigable, isCurrent, onChange, }) {
|
|
48
|
+
const assistiveText = assistiveTextMap[status];
|
|
49
|
+
const titleElement = (_jsxs(Text, { as: "span", variant: isCurrent ? 'body-semibold' : 'body', UNSAFE_className: "cim-stepper-item-title", children: [_jsxs(RACVisuallyHidden, { children: [assistiveText, ": "] }), children] }));
|
|
50
|
+
return isNavigable ? (_jsx(RACButton, { className: "cim-stepper-item-title-button", type: "button", onClick: onChange, children: titleElement })) : (_jsx("div", { className: "cim-stepper-item-title-button", children: titleElement }));
|
|
43
51
|
}
|
|
44
52
|
//# sourceMappingURL=stepper-item.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stepper-item.js","sourceRoot":"","sources":["../../../../src/components/stepper/stepper-item.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,UAAU,
|
|
1
|
+
{"version":3,"file":"stepper-item.js","sourceRoot":"","sources":["../../../../src/components/stepper/stepper-item.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { createElement, Fragment, useContext, type ReactNode } from 'react';\nimport { Button as RACButton, VisuallyHidden as RACVisuallyHidden } from 'react-aria-components';\nimport { IconCheckBold, IconCircleBoldFill } from '../../icons/index.js';\nimport type { CommonProps, StringLikeChildren } from '../types.js';\nimport { Text } from '../typography/text.js';\nimport { StepContext } from './context.js';\nimport type { StepperStatus } from './types.js';\n\n// TODO: move to translations\nconst assistiveTextMap: Record<StepperStatus, string> = {\n incomplete: 'Incomplete',\n complete: 'Completed',\n error: 'Invalid',\n warning: 'Warning',\n 'in-progress': 'In progress',\n};\n\nconst statusIconMap: Record<StepperStatus, React.ElementType> = {\n incomplete: Fragment,\n complete: IconCheckBold,\n // TODO: replace with icon from library when available\n error: () => (\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M24.1421 21.1421C24.9232 21.9232 24.9232 23.1895 24.1421 23.9706C23.3611 24.7516 22.0948 24.7516 21.3137 23.9706L8.58579 11.2426C7.80474 10.4616 7.80474 9.19526 8.58579 8.41421C9.36684 7.63316 10.6332 7.63316 11.4142 8.41421L24.1421 21.1421Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M21.1421 8.85786C21.9232 8.07682 23.1895 8.07682 23.9706 8.85786C24.7516 9.63891 24.7516 10.9052 23.9706 11.6863L11.2426 24.4142C10.4616 25.1953 9.19526 25.1953 8.41421 24.4142C7.63316 23.6332 7.63316 22.3668 8.41421 21.5858L21.1421 8.85786Z\"\n fill=\"currentColor\"\n />\n </svg>\n ),\n // TODO: replace with icon from library when available\n warning: () => (\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M18 24C18 25.1046 17.1046 26 16 26C14.8954 26 14 25.1046 14 24C14 22.8954 14.8954 22 16 22C17.1046 22 18 22.8954 18 24Z\"\n fill=\"currentColor\"\n />\n <line x1=\"16\" y1=\"8\" x2=\"16\" y2=\"18\" stroke=\"currentColor\" strokeWidth=\"4\" strokeLinecap=\"round\" />\n </svg>\n ),\n 'in-progress': IconCircleBoldFill,\n};\n\nexport interface UNSTABLE_StepperItemProps extends CommonProps {\n /** The title of the step. */\n children: StringLikeChildren;\n /** The description of the step. Optionally, you can pass a React node to render rich text. */\n description?: ReactNode;\n /** The status of the step. */\n status?: StepperStatus;\n}\n\n/**\n * Represents a single step in a stepper component.\n */\nexport function UNSTABLE_StepperItem({\n children,\n description,\n status: overrideStatus,\n UNSAFE_className,\n UNSAFE_style,\n ...props\n}: UNSTABLE_StepperItemProps) {\n const { currentStep, stepIndex, onChange, stepCount, orientation } = useContext(StepContext);\n const isCurrent = stepIndex === currentStep;\n const isPrevious = stepIndex < currentStep;\n const isLast = stepIndex === stepCount - 1;\n const status = overrideStatus ?? (isCurrent ? 'in-progress' : isPrevious ? 'complete' : 'incomplete');\n const isNavigable = !isCurrent && onChange != null && (overrideStatus != null || isPrevious);\n\n return (\n <div\n {...props}\n role=\"listitem\"\n className={clsx('cim-stepper-item', UNSAFE_className)}\n style={UNSAFE_style}\n data-status={status}\n aria-current={isCurrent}\n >\n <div className=\"cim-stepper-item-icon-container\" aria-hidden>\n <StepperItemIndicator status={status} isNavigable={isNavigable} isCurrent={isCurrent} onChange={onChange} />\n {!isLast && orientation === 'vertical' && <div className=\"cim-stepper-item-tail\" />}\n </div>\n <div className=\"cim-stepper-item-content\">\n <StepperItemTitle status={status} isNavigable={isNavigable} isCurrent={isCurrent} onChange={onChange}>\n {children}\n </StepperItemTitle>\n {description && (\n <Text as=\"div\" UNSAFE_className=\"cim-stepper-item-description\" variant=\"medium\" tone=\"muted\">\n {description}\n </Text>\n )}\n </div>\n </div>\n );\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nfunction StepperItemIndicator({\n status,\n isNavigable,\n isCurrent,\n onChange,\n}: {\n status: StepperStatus;\n isNavigable: boolean;\n isCurrent: boolean;\n onChange?: () => void;\n}) {\n const icon = (\n <div className=\"cim-stepper-item-icon\">\n {status === 'in-progress' && !isCurrent ? null : createElement(statusIconMap[status])}\n </div>\n );\n\n if (isNavigable) {\n return (\n <RACButton className=\"cim-stepper-item-icon-button\" type=\"button\" onClick={onChange} excludeFromTabOrder>\n {icon}\n </RACButton>\n );\n }\n\n return <div className=\"cim-stepper-item-icon-button\">{icon}</div>;\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nfunction StepperItemTitle({\n children,\n status,\n isNavigable,\n isCurrent,\n onChange,\n}: {\n children: StringLikeChildren;\n status: StepperStatus;\n isNavigable: boolean;\n isCurrent: boolean;\n onChange?: () => void;\n}) {\n const assistiveText = assistiveTextMap[status];\n\n const titleElement = (\n <Text as=\"span\" variant={isCurrent ? 'body-semibold' : 'body'} UNSAFE_className=\"cim-stepper-item-title\">\n <RACVisuallyHidden>{assistiveText}: </RACVisuallyHidden>\n {children}\n </Text>\n );\n\n return isNavigable ? (\n <RACButton className=\"cim-stepper-item-title-button\" type=\"button\" onClick={onChange}>\n {titleElement}\n </RACButton>\n ) : (\n <div className=\"cim-stepper-item-title-button\">{titleElement}</div>\n );\n}\n"]}
|
|
@@ -16,6 +16,6 @@ export interface UNSTABLE_StepperProps extends CommonProps {
|
|
|
16
16
|
/**
|
|
17
17
|
* Displays a series of steps in a process.
|
|
18
18
|
*/
|
|
19
|
-
declare const _UNSTABLE_Stepper: (props: UNSTABLE_StepperProps & import("react").RefAttributes<
|
|
19
|
+
declare const _UNSTABLE_Stepper: (props: UNSTABLE_StepperProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
|
|
20
20
|
export { _UNSTABLE_Stepper as UNSTABLE_Stepper };
|
|
21
21
|
//# sourceMappingURL=stepper.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../../src/components/stepper/stepper.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAmD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,MAAM,WAAW,qBAAsB,SAAQ,WAAW;IACxD,2CAA2C;IAC3C,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;CACzC;
|
|
1
|
+
{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../../src/components/stepper/stepper.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAmD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,MAAM,WAAW,qBAAsB,SAAQ,WAAW;IACxD,2CAA2C;IAC3C,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;CACzC;AAqDD;;GAEG;AACH,QAAA,MAAM,iBAAiB,uKAA0D,CAAC;AAElF,OAAO,EAAE,iBAAiB,IAAI,gBAAgB,EAAE,CAAC"}
|
|
@@ -7,7 +7,7 @@ import { withStyleProps } from '../../with-style-props.js';
|
|
|
7
7
|
import { StepContext } from './context.js';
|
|
8
8
|
function UNSTABLE_Stepper({ children, currentStep, onChange, orientation = 'horizontal', UNSAFE_className, UNSAFE_style, ...props }, ref) {
|
|
9
9
|
const stepCount = Children.count(children);
|
|
10
|
-
return (_jsx("
|
|
10
|
+
return (_jsx("div", { ...props, role: "list", ref: ref, className: clsx('cim-stepper', UNSAFE_className), style: { ...UNSAFE_style, '--cim-stepper-step-count': stepCount }, "data-orientation": orientation, children: Children.map(children, (child, stepIndex) => {
|
|
11
11
|
const isLast = stepIndex === stepCount - 1;
|
|
12
12
|
return (_jsxs(_Fragment, { children: [_jsx(StepContext.Provider, { value: {
|
|
13
13
|
orientation,
|
|
@@ -18,7 +18,7 @@ function UNSTABLE_Stepper({ children, currentStep, onChange, orientation = 'hori
|
|
|
18
18
|
(() => {
|
|
19
19
|
onChange(stepIndex);
|
|
20
20
|
}),
|
|
21
|
-
}, children: child }), !isLast && orientation === 'horizontal' && _jsx("div", { className: "cim-stepper-item-tail" })] }));
|
|
21
|
+
}, children: child }), !isLast && orientation === 'horizontal' && _jsx("div", { className: "cim-stepper-item-tail", role: "presentation" })] }));
|
|
22
22
|
}) }));
|
|
23
23
|
}
|
|
24
24
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stepper.js","sourceRoot":"","sources":["../../../../src/components/stepper/stepper.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAyD,MAAM,OAAO,CAAC;AACxF,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAgB3C,SAAS,gBAAgB,CACvB,EACE,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,WAAW,GAAG,YAAY,EAC1B,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACc,EACxB,
|
|
1
|
+
{"version":3,"file":"stepper.js","sourceRoot":"","sources":["../../../../src/components/stepper/stepper.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAyD,MAAM,OAAO,CAAC;AACxF,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAgB3C,SAAS,gBAAgB,CACvB,EACE,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,WAAW,GAAG,YAAY,EAC1B,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACc,EACxB,GAAiC;IAEjC,MAAM,SAAS,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAE3C,OAAO,CACL,iBACM,KAAK,EACT,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,gBAAgB,CAAC,EAChD,KAAK,EAAE,EAAE,GAAG,YAAY,EAAE,0BAA0B,EAAE,SAAS,EAAmB,sBAChE,WAAW,YAE5B,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE;YAC3C,MAAM,MAAM,GAAG,SAAS,KAAK,SAAS,GAAG,CAAC,CAAC;YAE3C,OAAO,CACL,8BACE,KAAC,WAAW,CAAC,QAAQ,IACnB,KAAK,EAAE;4BACL,WAAW;4BACX,SAAS,EAAE,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC;4BACnC,WAAW,EAAE,WAAW,IAAI,CAAC,CAAC;4BAC9B,SAAS;4BACT,QAAQ,EACN,QAAQ;gCACR,CAAC,GAAG,EAAE;oCACJ,QAAQ,CAAC,SAAS,CAAC,CAAC;gCACtB,CAAC,CAAC;yBACL,YAEA,KAAK,GACe,EACtB,CAAC,MAAM,IAAI,WAAW,KAAK,YAAY,IAAI,cAAK,SAAS,EAAC,uBAAuB,EAAC,IAAI,EAAC,cAAc,GAAG,IACxG,CACJ,CAAC;QACJ,CAAC,CAAC,GACE,CACP,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,iBAAiB,GAAG,cAAc,CAAC,UAAU,CAAC,gBAAgB,CAAC,EAAE,SAAS,CAAC,CAAC;AAElF,OAAO,EAAE,iBAAiB,IAAI,gBAAgB,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { Children, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { CommonProps } from '../types.js';\nimport { StepContext } from './context.js';\n\nexport interface UNSTABLE_StepperProps extends CommonProps {\n /** The steps to display in the stepper. */\n children: ReactNode;\n /** The index of the active step. */\n currentStep?: number;\n /** The callback to call when the current step changes. */\n onChange?: (step: number) => void;\n /** The orientation of the stepper.\n *\n * @default 'horizontal'\n */\n orientation?: 'vertical' | 'horizontal';\n}\n\nfunction UNSTABLE_Stepper(\n {\n children,\n currentStep,\n onChange,\n orientation = 'horizontal',\n UNSAFE_className,\n UNSAFE_style,\n ...props\n }: UNSTABLE_StepperProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const stepCount = Children.count(children);\n\n return (\n <div\n {...props}\n role=\"list\"\n ref={ref}\n className={clsx('cim-stepper', UNSAFE_className)}\n style={{ ...UNSAFE_style, '--cim-stepper-step-count': stepCount } as CSSProperties}\n data-orientation={orientation}\n >\n {Children.map(children, (child, stepIndex) => {\n const isLast = stepIndex === stepCount - 1;\n\n return (\n <>\n <StepContext.Provider\n value={{\n orientation,\n stepCount: Children.count(children),\n currentStep: currentStep ?? -1,\n stepIndex,\n onChange:\n onChange &&\n (() => {\n onChange(stepIndex);\n }),\n }}\n >\n {child}\n </StepContext.Provider>\n {!isLast && orientation === 'horizontal' && <div className=\"cim-stepper-item-tail\" role=\"presentation\" />}\n </>\n );\n })}\n </div>\n );\n}\n\n/**\n * Displays a series of steps in a process.\n */\nconst _UNSTABLE_Stepper = withStyleProps(forwardRef(UNSTABLE_Stepper), 'Stepper');\n\nexport { _UNSTABLE_Stepper as UNSTABLE_Stepper };\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export type StepperStatus = 'complete' | 'error' | 'warning' | 'in-progress';
|
|
1
|
+
export type StepperStatus = 'incomplete' | 'complete' | 'error' | 'warning' | 'in-progress';
|
|
2
2
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/stepper/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,aAAa,CAAC"}
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/stepper/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,YAAY,GAAG,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,aAAa,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/stepper/types.ts"],"names":[],"mappings":"","sourcesContent":["export type StepperStatus = 'complete' | 'error' | 'warning' | 'in-progress';\n"]}
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/stepper/types.ts"],"names":[],"mappings":"","sourcesContent":["export type StepperStatus = 'incomplete' | 'complete' | 'error' | 'warning' | 'in-progress';\n"]}
|