@xsolla/xui-stepper 0.158.0 → 0.160.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.
Files changed (14) hide show
  1. package/README.md +56 -51
  2. package/native/index.d.mts +8 -0
  3. package/native/index.d.ts +8 -0
  4. package/native/index.js +18 -7
  5. package/native/index.js.map +1 -1
  6. package/native/index.mjs +18 -7
  7. package/native/index.mjs.map +1 -1
  8. package/package.json +4 -4
  9. package/web/index.d.mts +8 -0
  10. package/web/index.d.ts +8 -0
  11. package/web/index.js +21 -7
  12. package/web/index.js.map +1 -1
  13. package/web/index.mjs +21 -7
  14. package/web/index.mjs.map +1 -1
package/README.md CHANGED
@@ -19,7 +19,7 @@ import {
19
19
  Step,
20
20
  ProgressStep,
21
21
  ProgressStepItem,
22
- } from '@xsolla/xui-stepper';
22
+ } from "@xsolla/xui-stepper";
23
23
  import type {
24
24
  StepperProps,
25
25
  StepType,
@@ -33,16 +33,16 @@ import type {
33
33
  ProgressStepItemProps,
34
34
  ProgressStepItemState,
35
35
  ProgressStepSize,
36
- } from '@xsolla/xui-stepper';
36
+ } from "@xsolla/xui-stepper";
37
37
  ```
38
38
 
39
39
  ## Quick start
40
40
 
41
41
  ```tsx
42
42
  const steps = [
43
- { title: 'Account', state: 'complete' as const },
44
- { title: 'Payment', state: 'current' as const },
45
- { title: 'Review', state: 'incomplete' as const },
43
+ { title: "Account", state: "complete" as const },
44
+ { title: "Payment", state: "current" as const },
45
+ { title: "Review", state: "incomplete" as const },
46
46
  ];
47
47
 
48
48
  <Stepper steps={steps} />;
@@ -52,17 +52,18 @@ const steps = [
52
52
 
53
53
  ### `<Stepper>`
54
54
 
55
- | Prop | Type | Default | Description |
56
- | --- | --- | --- | --- |
57
- | `steps` | `StepType[]` | — | Step definitions. |
58
- | `direction` | `'horizontal' \| 'vertical'` | `'horizontal'` | Layout direction. |
59
- | `size` | `'sm' \| 'md'` | `'md'` | Step size. |
60
- | `variantUI` | `'current' \| 'simple'` | `'current'` | Visual variant. |
61
- | `palette` | `'brand' \| 'brandSecondary'` | `'brand'` | Colour palette. |
62
- | `tail` | `boolean` | `false` | Show connecting lines (simple variant). |
63
- | `onClick` | `StepClickType` | — | Fired when a step is clicked. |
64
- | `className` | `string` | — | Class applied to the root container; `customClass` is also accepted and concatenated for backwards compatibility. |
65
- | `aria-label` | `string` | — | Accessible label for the stepper. |
55
+ | Prop | Type | Default | Description |
56
+ | ------------ | ----------------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------- |
57
+ | `testID` | `string` | — | Test ID for testing frameworks. On web this renders as `data-testid`; on React Native it renders as `testID`. |
58
+ | `steps` | `StepType[]` | — | Step definitions. |
59
+ | `direction` | `'horizontal' \| 'vertical'` | `'horizontal'` | Layout direction. |
60
+ | `size` | `'sm' \| 'md'` | `'md'` | Step size. |
61
+ | `variantUI` | `'current' \| 'simple'` | `'current'` | Visual variant. |
62
+ | `palette` | `'brand' \| 'brandSecondary'` | `'brand'` | Colour palette. |
63
+ | `tail` | `boolean` | `false` | Show connecting lines (simple variant). |
64
+ | `onClick` | `StepClickType` | — | Fired when a step is clicked. |
65
+ | `className` | `string` | — | Class applied to the root container; `customClass` is also accepted and concatenated for backwards compatibility. |
66
+ | `aria-label` | `string` | — | Accessible label for the stepper. |
66
67
 
67
68
  `Stepper` also accepts standard `BoxProps` (excluding `onClick`).
68
69
 
@@ -72,14 +73,14 @@ Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
72
73
 
73
74
  A compact arrow-style progress indicator.
74
75
 
75
- | Prop | Type | Default | Description |
76
- | --- | --- | --- | --- |
77
- | `count` | `number` | — | Total number of steps. |
78
- | `activeStep` | `number` | — | Zero-based active step index. |
79
- | `size` | `'sm' \| 'md'` | `'md'` | Indicator size. |
80
- | `arrows` | `boolean` | `true` | Show prev/next arrow buttons. |
81
- | `onStepPress` | `(step: number) => void` | — | Fired when navigation moves to a step. |
82
- | `className` | `string` | — | Class on the root container. |
76
+ | Prop | Type | Default | Description |
77
+ | ------------- | ------------------------ | ------- | -------------------------------------- |
78
+ | `count` | `number` | — | Total number of steps. |
79
+ | `activeStep` | `number` | — | Zero-based active step index. |
80
+ | `size` | `'sm' \| 'md'` | `'md'` | Indicator size. |
81
+ | `arrows` | `boolean` | `true` | Show prev/next arrow buttons. |
82
+ | `onStepPress` | `(step: number) => void` | — | Fired when navigation moves to a step. |
83
+ | `className` | `string` | — | Class on the root container. |
83
84
 
84
85
  Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
85
86
 
@@ -87,14 +88,14 @@ Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
87
88
 
88
89
  Single dot used by `ProgressStep`; can be composed manually.
89
90
 
90
- | Prop | Type | Default | Description |
91
- | --- | --- | --- | --- |
92
- | `state` | `'active' \| 'default' \| 'hover'` | `'default'` | Visual state. |
93
- | `size` | `'sm' \| 'md'` | `'md'` | Dot size. |
94
- | `onPress` | `() => void` | — | Press handler. |
95
- | `onMouseEnter` | `() => void` | — | Mouse-enter handler. |
96
- | `onMouseLeave` | `() => void` | — | Mouse-leave handler. |
97
- | `className` | `string` | — | Custom class. |
91
+ | Prop | Type | Default | Description |
92
+ | -------------- | ---------------------------------- | ----------- | -------------------- |
93
+ | `state` | `'active' \| 'default' \| 'hover'` | `'default'` | Visual state. |
94
+ | `size` | `'sm' \| 'md'` | `'md'` | Dot size. |
95
+ | `onPress` | `() => void` | — | Press handler. |
96
+ | `onMouseEnter` | `() => void` | — | Mouse-enter handler. |
97
+ | `onMouseLeave` | `() => void` | — | Mouse-leave handler. |
98
+ | `className` | `string` | — | Custom class. |
98
99
 
99
100
  ### `<Step>`
100
101
 
@@ -103,17 +104,17 @@ Internal step renderer used by `Stepper`; exported for advanced layouts. Props m
103
104
  ### Types
104
105
 
105
106
  ```ts
106
- type StepperDirectionType = 'horizontal' | 'vertical';
107
- type StepperUIVariantType = 'current' | 'simple';
108
- type StepperPaletteType = 'brand' | 'brandSecondary';
109
- type StepperSize = 'sm' | 'md';
107
+ type StepperDirectionType = "horizontal" | "vertical";
108
+ type StepperUIVariantType = "current" | "simple";
109
+ type StepperPaletteType = "brand" | "brandSecondary";
110
+ type StepperSize = "sm" | "md";
110
111
  type StepStateType =
111
- | 'current'
112
- | 'incomplete'
113
- | 'loading'
114
- | 'complete'
115
- | 'alert'
116
- | 'warning';
112
+ | "current"
113
+ | "incomplete"
114
+ | "loading"
115
+ | "complete"
116
+ | "alert"
117
+ | "warning";
117
118
  type StepClickType = (args: { number: number; step: StepType }) => void;
118
119
 
119
120
  interface StepType {
@@ -134,9 +135,13 @@ interface StepType {
134
135
  <Stepper
135
136
  direction="vertical"
136
137
  steps={[
137
- { title: 'Email', description: 'Verify your email', state: 'complete' },
138
- { title: 'Profile', description: 'Set up your profile', state: 'current' },
139
- { title: 'Preferences', description: 'Customise settings', state: 'incomplete' },
138
+ { title: "Email", description: "Verify your email", state: "complete" },
139
+ { title: "Profile", description: "Set up your profile", state: "current" },
140
+ {
141
+ title: "Preferences",
142
+ description: "Customise settings",
143
+ state: "incomplete",
144
+ },
140
145
  ]}
141
146
  />
142
147
  ```
@@ -146,12 +151,12 @@ interface StepType {
146
151
  ```tsx
147
152
  <Stepper
148
153
  steps={[
149
- { title: 'Complete', state: 'complete' },
150
- { title: 'Warning', state: 'warning' },
151
- { title: 'Alert', state: 'alert' },
152
- { title: 'Loading', state: 'loading' },
153
- { title: 'Current', state: 'current' },
154
- { title: 'Incomplete', state: 'incomplete' },
154
+ { title: "Complete", state: "complete" },
155
+ { title: "Warning", state: "warning" },
156
+ { title: "Alert", state: "alert" },
157
+ { title: "Loading", state: "loading" },
158
+ { title: "Current", state: "current" },
159
+ { title: "Incomplete", state: "incomplete" },
155
160
  ]}
156
161
  />
157
162
  ```
package/native/index.d.mts CHANGED
@@ -21,6 +21,8 @@ interface ProgressStepItemProps {
21
21
  onPress?: () => void;
22
22
  onMouseEnter?: () => void;
23
23
  onMouseLeave?: () => void;
24
+ /** Test ID for testing frameworks */
25
+ testID?: string;
24
26
  }
25
27
  interface ProgressStepProps {
26
28
  count: number;
@@ -29,6 +31,8 @@ interface ProgressStepProps {
29
31
  arrows?: boolean;
30
32
  onStepPress?: (step: number) => void;
31
33
  className?: string;
34
+ /** Test ID for testing frameworks */
35
+ testID?: string;
32
36
  }
33
37
  type StepType = {
34
38
  title: string | ReactElement;
@@ -49,6 +53,8 @@ interface StepProps extends StepType {
49
53
  isLast?: boolean;
50
54
  isFirstColoredTail?: boolean;
51
55
  isLastColoredTail?: boolean;
56
+ /** Test ID for testing frameworks */
57
+ testID?: string;
52
58
  }
53
59
  interface StepperProps extends Omit<BoxProps, "onClick"> {
54
60
  /**
@@ -79,6 +85,8 @@ interface StepperProps extends Omit<BoxProps, "onClick"> {
79
85
  * Accessibility label for the stepper. If not provided, a default label will be used.
80
86
  */
81
87
  "aria-label"?: string;
88
+ /** Test ID for testing frameworks */
89
+ testID?: string;
82
90
  }
83
91
 
84
92
  declare const Stepper: React.ForwardRefExoticComponent<StepperProps & ThemeOverrideProps & React.RefAttributes<any>>;
package/native/index.d.ts CHANGED
@@ -21,6 +21,8 @@ interface ProgressStepItemProps {
21
21
  onPress?: () => void;
22
22
  onMouseEnter?: () => void;
23
23
  onMouseLeave?: () => void;
24
+ /** Test ID for testing frameworks */
25
+ testID?: string;
24
26
  }
25
27
  interface ProgressStepProps {
26
28
  count: number;
@@ -29,6 +31,8 @@ interface ProgressStepProps {
29
31
  arrows?: boolean;
30
32
  onStepPress?: (step: number) => void;
31
33
  className?: string;
34
+ /** Test ID for testing frameworks */
35
+ testID?: string;
32
36
  }
33
37
  type StepType = {
34
38
  title: string | ReactElement;
@@ -49,6 +53,8 @@ interface StepProps extends StepType {
49
53
  isLast?: boolean;
50
54
  isFirstColoredTail?: boolean;
51
55
  isLastColoredTail?: boolean;
56
+ /** Test ID for testing frameworks */
57
+ testID?: string;
52
58
  }
53
59
  interface StepperProps extends Omit<BoxProps, "onClick"> {
54
60
  /**
@@ -79,6 +85,8 @@ interface StepperProps extends Omit<BoxProps, "onClick"> {
79
85
  * Accessibility label for the stepper. If not provided, a default label will be used.
80
86
  */
81
87
  "aria-label"?: string;
88
+ /** Test ID for testing frameworks */
89
+ testID?: string;
82
90
  }
83
91
 
84
92
  declare const Stepper: React.ForwardRefExoticComponent<StepperProps & ThemeOverrideProps & React.RefAttributes<any>>;
package/native/index.js CHANGED
@@ -231,6 +231,8 @@ var Text = ({
231
231
  numberOfLines,
232
232
  id,
233
233
  role,
234
+ testID,
235
+ "data-testid": dataTestId,
234
236
  style: styleProp,
235
237
  ...props
236
238
  }) => {
@@ -260,7 +262,7 @@ var Text = ({
260
262
  {
261
263
  style: baseStyle,
262
264
  numberOfLines,
263
- testID: id,
265
+ testID: dataTestId || testID || id,
264
266
  accessibilityRole,
265
267
  children
266
268
  }
@@ -306,7 +308,9 @@ var Divider = ({
306
308
  height,
307
309
  width,
308
310
  vertical,
309
- dashStroke
311
+ dashStroke,
312
+ testID,
313
+ "data-testid": dataTestId
310
314
  }) => {
311
315
  const style = {
312
316
  backgroundColor: dashStroke ? "transparent" : color || "rgba(255, 255, 255, 0.15)",
@@ -319,7 +323,7 @@ var Divider = ({
319
323
  ...vertical ? { borderLeftWidth: typeof width === "number" ? width : 1 } : { borderTopWidth: typeof height === "number" ? height : 1 }
320
324
  }
321
325
  };
322
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style });
326
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style, testID: dataTestId || testID });
323
327
  };
324
328
 
325
329
  // ../../foundation/primitives-native/src/index.tsx
@@ -762,6 +766,7 @@ var Step = ({
762
766
  isLast = false,
763
767
  isFirstColoredTail = false,
764
768
  isLastColoredTail = false,
769
+ testID,
765
770
  themeMode,
766
771
  themeProductContext
767
772
  }) => {
@@ -993,7 +998,7 @@ var Step = ({
993
998
  onKeyDown: isWeb && isInteractive ? handleKeyDown : void 0,
994
999
  onKeyUp: isWeb && isInteractive ? handleKeyUp : void 0,
995
1000
  disabled,
996
- "data-testid": "step",
1001
+ testID: testID || "step",
997
1002
  className: stepClassName,
998
1003
  flexDirection: "column",
999
1004
  alignItems: "flex-start",
@@ -1099,7 +1104,7 @@ var Step = ({
1099
1104
  onKeyDown: isWeb && isInteractive ? handleKeyDown : void 0,
1100
1105
  onKeyUp: isWeb && isInteractive ? handleKeyUp : void 0,
1101
1106
  disabled,
1102
- "data-testid": "step",
1107
+ testID: testID || "step",
1103
1108
  className: stepClassName,
1104
1109
  flexDirection: "row",
1105
1110
  alignItems: "flex-start",
@@ -1187,7 +1192,7 @@ var Step = ({
1187
1192
  onKeyDown: isWeb && isInteractive ? handleKeyDown : void 0,
1188
1193
  onKeyUp: isWeb && isInteractive ? handleKeyUp : void 0,
1189
1194
  disabled,
1190
- "data-testid": "step",
1195
+ testID: testID || "step",
1191
1196
  className: stepClassName,
1192
1197
  flexDirection: "row",
1193
1198
  alignItems: "flex-start",
@@ -1291,7 +1296,7 @@ var Step = ({
1291
1296
  onKeyDown: isWeb && isInteractive ? handleKeyDown : void 0,
1292
1297
  onKeyUp: isWeb && isInteractive ? handleKeyUp : void 0,
1293
1298
  disabled,
1294
- "data-testid": "step",
1299
+ testID: testID || "step",
1295
1300
  className: stepClassName,
1296
1301
  flexDirection: "row",
1297
1302
  alignItems: "flex-start",
@@ -1370,6 +1375,7 @@ var Stepper = (0, import_react3.forwardRef)(
1370
1375
  customClass,
1371
1376
  palette = "brand",
1372
1377
  "aria-label": ariaLabel,
1378
+ testID,
1373
1379
  themeMode,
1374
1380
  themeProductContext,
1375
1381
  ...rest
@@ -1384,6 +1390,7 @@ var Stepper = (0, import_react3.forwardRef)(
1384
1390
  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1385
1391
  Box,
1386
1392
  {
1393
+ testID,
1387
1394
  ref,
1388
1395
  role: "navigation",
1389
1396
  "aria-label": stepperAriaLabel,
@@ -1460,6 +1467,7 @@ var ProgressStepItem = ({
1460
1467
  onPress,
1461
1468
  onMouseEnter,
1462
1469
  onMouseLeave,
1470
+ testID,
1463
1471
  themeMode,
1464
1472
  themeProductContext
1465
1473
  }) => {
@@ -1479,6 +1487,7 @@ var ProgressStepItem = ({
1479
1487
  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
1480
1488
  Box,
1481
1489
  {
1490
+ testID,
1482
1491
  className,
1483
1492
  width,
1484
1493
  height,
@@ -1502,6 +1511,7 @@ var ProgressStep = ({
1502
1511
  arrows = true,
1503
1512
  onStepPress,
1504
1513
  className,
1514
+ testID,
1505
1515
  themeMode,
1506
1516
  themeProductContext
1507
1517
  }) => {
@@ -1523,6 +1533,7 @@ var ProgressStep = ({
1523
1533
  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
1524
1534
  Box,
1525
1535
  {
1536
+ testID,
1526
1537
  className,
1527
1538
  flexDirection: "row",
1528
1539
  alignItems: "center",