@alfalab/core-components-steps 1.7.5 → 1.8.1-snapshot-f57d3d0

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 (177) hide show
  1. package/Component.d.ts +11 -38
  2. package/Component.js +10 -8
  3. package/Component.js.map +1 -0
  4. package/components/step/Component.d.ts +11 -35
  5. package/components/step/Component.js +54 -43
  6. package/components/step/Component.js.map +1 -0
  7. package/components/step/index.css +46 -59
  8. package/components/step/index.d.ts +1 -1
  9. package/components/step/index.js +3 -2
  10. package/components/step/index.js.map +1 -0
  11. package/components/step/index.module.css.js +8 -0
  12. package/components/step/index.module.css.js.map +1 -0
  13. package/components/step-indicator/Component.d.ts +3 -5
  14. package/components/step-indicator/Component.js +3 -4
  15. package/components/step-indicator/Component.js.map +1 -0
  16. package/components/step-indicator/index.css +3 -22
  17. package/components/step-indicator/index.d.ts +1 -1
  18. package/components/step-indicator/index.js +3 -2
  19. package/components/step-indicator/index.js.map +1 -0
  20. package/components/step-indicator/index.module.css.js +8 -0
  21. package/components/step-indicator/index.module.css.js.map +1 -0
  22. package/cssm/Component.d.ts +11 -38
  23. package/cssm/Component.js +7 -3
  24. package/cssm/Component.js.map +1 -0
  25. package/cssm/components/step/Component.d.ts +11 -35
  26. package/cssm/components/step/Component.js +33 -20
  27. package/cssm/components/step/Component.js.map +1 -0
  28. package/cssm/components/step/index.d.ts +1 -1
  29. package/cssm/components/step/index.js +3 -2
  30. package/cssm/components/step/index.js.map +1 -0
  31. package/cssm/components/step/index.module.css +24 -36
  32. package/cssm/components/step-indicator/Component.d.ts +3 -5
  33. package/cssm/components/step-indicator/Component.js +3 -2
  34. package/cssm/components/step-indicator/Component.js.map +1 -0
  35. package/cssm/components/step-indicator/index.d.ts +1 -1
  36. package/cssm/components/step-indicator/index.js +3 -2
  37. package/cssm/components/step-indicator/index.js.map +1 -0
  38. package/cssm/components/step-indicator/index.module.css +3 -21
  39. package/cssm/index.d.ts +1 -1
  40. package/cssm/index.js +1 -0
  41. package/cssm/index.js.map +1 -0
  42. package/cssm/index.module.css +1 -20
  43. package/cssm/shared/index.d.ts +1 -0
  44. package/cssm/shared/index.js +10 -0
  45. package/cssm/shared/index.js.map +1 -0
  46. package/cssm/types/common-props.d.ts +40 -0
  47. package/cssm/types/common-props.js +3 -0
  48. package/cssm/types/common-props.js.map +1 -0
  49. package/cssm/utils/getStepsTestIds.d.ts +4 -0
  50. package/cssm/utils/getStepsTestIds.js +15 -0
  51. package/cssm/utils/getStepsTestIds.js.map +1 -0
  52. package/esm/Component.d.ts +11 -38
  53. package/esm/Component.js +7 -5
  54. package/esm/Component.js.map +1 -0
  55. package/esm/components/step/Component.d.ts +11 -35
  56. package/esm/components/step/Component.js +27 -16
  57. package/esm/components/step/Component.js.map +1 -0
  58. package/esm/components/step/index.css +46 -59
  59. package/esm/components/step/index.d.ts +1 -1
  60. package/esm/components/step/index.js +1 -0
  61. package/esm/components/step/index.js.map +1 -0
  62. package/esm/components/step/index.module.css.js +6 -0
  63. package/esm/components/step/index.module.css.js.map +1 -0
  64. package/esm/components/step-indicator/Component.d.ts +3 -5
  65. package/esm/components/step-indicator/Component.js +2 -3
  66. package/esm/components/step-indicator/Component.js.map +1 -0
  67. package/esm/components/step-indicator/index.css +3 -22
  68. package/esm/components/step-indicator/index.d.ts +1 -1
  69. package/esm/components/step-indicator/index.js +1 -0
  70. package/esm/components/step-indicator/index.js.map +1 -0
  71. package/esm/components/step-indicator/index.module.css.js +6 -0
  72. package/esm/components/step-indicator/index.module.css.js.map +1 -0
  73. package/esm/index.css +2 -22
  74. package/esm/index.d.ts +1 -1
  75. package/esm/index.js +1 -0
  76. package/esm/index.js.map +1 -0
  77. package/esm/index.module.css.js +6 -0
  78. package/esm/index.module.css.js.map +1 -0
  79. package/esm/shared/index.d.ts +1 -0
  80. package/esm/shared/index.js +2 -0
  81. package/esm/shared/index.js.map +1 -0
  82. package/esm/types/common-props.d.ts +40 -0
  83. package/esm/types/common-props.js +2 -0
  84. package/esm/types/common-props.js.map +1 -0
  85. package/esm/utils/getStepsTestIds.d.ts +4 -0
  86. package/esm/utils/getStepsTestIds.js +11 -0
  87. package/esm/utils/getStepsTestIds.js.map +1 -0
  88. package/index.css +2 -22
  89. package/index.d.ts +1 -1
  90. package/index.js +1 -0
  91. package/index.js.map +1 -0
  92. package/index.module.css.js +8 -0
  93. package/index.module.css.js.map +1 -0
  94. package/modern/Component.d.ts +11 -38
  95. package/modern/Component.js +7 -5
  96. package/modern/Component.js.map +1 -0
  97. package/modern/components/step/Component.d.ts +11 -35
  98. package/modern/components/step/Component.js +28 -15
  99. package/modern/components/step/Component.js.map +1 -0
  100. package/modern/components/step/index.css +46 -59
  101. package/modern/components/step/index.d.ts +1 -1
  102. package/modern/components/step/index.js +1 -0
  103. package/modern/components/step/index.js.map +1 -0
  104. package/modern/components/step/index.module.css.js +6 -0
  105. package/modern/components/step/index.module.css.js.map +1 -0
  106. package/modern/components/step-indicator/Component.d.ts +3 -5
  107. package/modern/components/step-indicator/Component.js +2 -3
  108. package/modern/components/step-indicator/Component.js.map +1 -0
  109. package/modern/components/step-indicator/index.css +3 -22
  110. package/modern/components/step-indicator/index.d.ts +1 -1
  111. package/modern/components/step-indicator/index.js +1 -0
  112. package/modern/components/step-indicator/index.js.map +1 -0
  113. package/modern/components/step-indicator/index.module.css.js +6 -0
  114. package/modern/components/step-indicator/index.module.css.js.map +1 -0
  115. package/modern/index.css +2 -22
  116. package/modern/index.d.ts +1 -1
  117. package/modern/index.js +1 -0
  118. package/modern/index.js.map +1 -0
  119. package/modern/index.module.css.js +6 -0
  120. package/modern/index.module.css.js.map +1 -0
  121. package/modern/shared/index.d.ts +1 -0
  122. package/modern/shared/index.js +2 -0
  123. package/modern/shared/index.js.map +1 -0
  124. package/modern/types/common-props.d.ts +40 -0
  125. package/modern/types/common-props.js +2 -0
  126. package/modern/types/common-props.js.map +1 -0
  127. package/modern/utils/getStepsTestIds.d.ts +4 -0
  128. package/modern/utils/getStepsTestIds.js +11 -0
  129. package/modern/utils/getStepsTestIds.js.map +1 -0
  130. package/moderncssm/Component.d.ts +11 -38
  131. package/moderncssm/Component.js +6 -2
  132. package/moderncssm/Component.js.map +1 -0
  133. package/moderncssm/components/step/Component.d.ts +11 -35
  134. package/moderncssm/components/step/Component.js +27 -12
  135. package/moderncssm/components/step/Component.js.map +1 -0
  136. package/moderncssm/components/step/index.d.ts +1 -1
  137. package/moderncssm/components/step/index.js +1 -0
  138. package/moderncssm/components/step/index.js.map +1 -0
  139. package/moderncssm/components/step/index.module.css +19 -20
  140. package/moderncssm/components/step-indicator/Component.d.ts +3 -5
  141. package/moderncssm/components/step-indicator/Component.js +1 -0
  142. package/moderncssm/components/step-indicator/Component.js.map +1 -0
  143. package/moderncssm/components/step-indicator/index.d.ts +1 -1
  144. package/moderncssm/components/step-indicator/index.js +1 -0
  145. package/moderncssm/components/step-indicator/index.js.map +1 -0
  146. package/moderncssm/components/step-indicator/index.module.css +0 -2
  147. package/moderncssm/index.d.ts +1 -1
  148. package/moderncssm/index.js +1 -0
  149. package/moderncssm/index.js.map +1 -0
  150. package/moderncssm/index.module.css +0 -2
  151. package/moderncssm/shared/index.d.ts +1 -0
  152. package/moderncssm/shared/index.js +2 -0
  153. package/moderncssm/shared/index.js.map +1 -0
  154. package/moderncssm/types/common-props.d.ts +40 -0
  155. package/moderncssm/types/common-props.js +2 -0
  156. package/moderncssm/types/common-props.js.map +1 -0
  157. package/moderncssm/utils/getStepsTestIds.d.ts +4 -0
  158. package/moderncssm/utils/getStepsTestIds.js +11 -0
  159. package/moderncssm/utils/getStepsTestIds.js.map +1 -0
  160. package/package.json +5 -4
  161. package/shared/index.d.ts +1 -0
  162. package/shared/index.js +10 -0
  163. package/shared/index.js.map +1 -0
  164. package/shared/package.json +3 -0
  165. package/src/Component.tsx +18 -40
  166. package/src/components/step/Component.tsx +49 -57
  167. package/src/components/step/index.module.css +19 -17
  168. package/src/shared/index.ts +1 -0
  169. package/src/shared/package.json +3 -0
  170. package/src/types/common-props.ts +48 -0
  171. package/src/utils/getStepsTestIds.ts +8 -0
  172. package/types/common-props.d.ts +40 -0
  173. package/types/common-props.js +3 -0
  174. package/types/common-props.js.map +1 -0
  175. package/utils/getStepsTestIds.d.ts +4 -0
  176. package/utils/getStepsTestIds.js +15 -0
  177. package/utils/getStepsTestIds.js.map +1 -0
package/Component.d.ts CHANGED
@@ -1,16 +1,11 @@
1
- /// <reference types="react" />
2
1
  import React from 'react';
3
- import { ReactNode } from "react";
4
- import { StepIndicatorProps } from "./components/step-indicator/index";
5
- type StepsProps = {
2
+ import { StepIndicatorProps } from './components/step-indicator';
3
+ import { CommonProps } from './types/common-props';
4
+ export declare type StepsProps = {
6
5
  /**
7
6
  * Дополнительный класс
8
7
  */
9
8
  className?: string;
10
- /**
11
- * Дочерние элементы
12
- */
13
- children: ReactNode;
14
9
  /**
15
10
  * Активный шаг, указанный по умолчанию
16
11
  * @default 1
@@ -25,29 +20,6 @@ type StepsProps = {
25
20
  * @default true
26
21
  */
27
22
  isMarkCompletedSteps?: boolean;
28
- /**
29
- * Управление ориентацией компонента
30
- * @default false
31
- */
32
- isVerticalAlign?: boolean;
33
- /**
34
- * Управление отображением номера шага
35
- */
36
- ordered?: boolean;
37
- /**
38
- * Включение / отключение интерактивности шагов
39
- */
40
- interactive?: boolean;
41
- /**
42
- * Растягивание шагов на всю ширину блока для вертикальной ориентации
43
- * @default false
44
- */
45
- fullWidth?: boolean;
46
- /**
47
- * Минимальное расстояние между шагами
48
- * @default 24
49
- */
50
- minSpaceBetweenSteps?: 8 | 16 | 24;
51
23
  /**
52
24
  * Кастомный метод для управления состоянием disabled шага и
53
25
  * возможностью перехода на этот шаг
@@ -61,6 +33,12 @@ type StepsProps = {
61
33
  * @return Флаг состояния error
62
34
  */
63
35
  checkIsStepError?: (stepNumber: number) => boolean;
36
+ /**
37
+ * Кастомный метод для управления состоянием шага criticalError
38
+ * @param stepNumber - номер шага
39
+ * @return Флаг состояния error
40
+ */
41
+ checkIsStepCriticalError?: (stepNumber: number) => boolean;
64
42
  /**
65
43
  * Кастомный метод для управления состоянием шага warning
66
44
  * @param stepNumber - номер шага
@@ -90,10 +68,5 @@ type StepsProps = {
90
68
  * @param stepNumber - номер активного шага
91
69
  */
92
70
  onChange?: (stepNumber: number) => void;
93
- /**
94
- * Идентификатор для систем автоматизированного тестирования
95
- */
96
- dataTestId?: string;
97
- };
98
- declare const Steps: React.FC<StepsProps>;
99
- export { StepsProps, Steps };
71
+ } & CommonProps;
72
+ export declare const Steps: React.FC<StepsProps>;
package/Component.js CHANGED
@@ -4,19 +4,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var React = require('react');
6
6
  var cn = require('classnames');
7
- var components_step_Component = require('./components/step/Component.js');
7
+ var Component = require('./components/step/Component.js');
8
+ var index_module = require('./index.module.css.js');
8
9
 
9
10
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
10
11
 
11
12
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
12
13
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
13
14
 
14
- var styles = {"component":"steps__component_eyi6g","vertical":"steps__vertical_eyi6g"};
15
- require('./index.css')
16
-
17
15
  var Steps = function (_a) {
18
16
  var _b;
19
- var className = _a.className, children = _a.children, _c = _a.defaultActiveStep, defaultActiveStep = _c === void 0 ? 1 : _c, activeStepProp = _a.activeStep, _d = _a.isMarkCompletedSteps, isMarkCompletedSteps = _d === void 0 ? true : _d, _e = _a.isVerticalAlign, isVerticalAlign = _e === void 0 ? false : _e, _f = _a.ordered, ordered = _f === void 0 ? true : _f, _g = _a.interactive, interactive = _g === void 0 ? true : _g, _h = _a.fullWidth, fullWidth = _h === void 0 ? false : _h, _j = _a.minSpaceBetweenSteps, minSpaceBetweenSteps = _j === void 0 ? 24 : _j, checkIsStepDisabled = _a.checkIsStepDisabled, checkIsStepError = _a.checkIsStepError, checkIsStepWarning = _a.checkIsStepWarning, checkIsStepWaiting = _a.checkIsStepWaiting, checkIsStepPositive = _a.checkIsStepPositive, checkIsStepCustom = _a.checkIsStepCustom, onChange = _a.onChange, dataTestId = _a.dataTestId;
17
+ var className = _a.className, children = _a.children, _c = _a.defaultActiveStep, defaultActiveStep = _c === void 0 ? 1 : _c, activeStepProp = _a.activeStep, _d = _a.isMarkCompletedSteps, isMarkCompletedSteps = _d === void 0 ? true : _d, _e = _a.isVerticalAlign, isVerticalAlign = _e === void 0 ? false : _e, _f = _a.ordered, ordered = _f === void 0 ? true : _f, _g = _a.interactive, interactive = _g === void 0 ? true : _g, _h = _a.fullWidth, fullWidth = _h === void 0 ? false : _h, _j = _a.minSpaceBetweenSteps, minSpaceBetweenSteps = _j === void 0 ? 24 : _j, checkIsStepDisabled = _a.checkIsStepDisabled, checkIsStepError = _a.checkIsStepError, checkIsStepCriticalError = _a.checkIsStepCriticalError, checkIsStepWarning = _a.checkIsStepWarning, checkIsStepWaiting = _a.checkIsStepWaiting, checkIsStepPositive = _a.checkIsStepPositive, checkIsStepCustom = _a.checkIsStepCustom, onChange = _a.onChange, dataTestId = _a.dataTestId, completedDashColor = _a.completedDashColor;
20
18
  var uncontrolled = activeStepProp === undefined;
21
19
  var _k = React.useState(defaultActiveStep), activeStep = _k[0], setActiveStep = _k[1];
22
20
  var stepsLength = React__default.default.Children.count(children);
@@ -31,8 +29,8 @@ var Steps = function (_a) {
31
29
  if (!stepsLength)
32
30
  return null;
33
31
  var visibleActiveStep = uncontrolled ? activeStep : activeStepProp;
34
- return (React__default.default.createElement("div", { className: cn__default.default(className, styles.component, (_b = {},
35
- _b[styles.vertical] = isVerticalAlign,
32
+ return (React__default.default.createElement("div", { className: cn__default.default(className, index_module.component, (_b = {},
33
+ _b[index_module.vertical] = isVerticalAlign,
36
34
  _b)), "data-test-id": dataTestId }, React__default.default.Children.map(children, function (step, index) {
37
35
  var stepNumber = index + 1;
38
36
  var isSelected = stepNumber === visibleActiveStep;
@@ -40,13 +38,17 @@ var Steps = function (_a) {
40
38
  var disabled = checkIsStepDisabled ? checkIsStepDisabled(stepNumber) : false;
41
39
  var isPositive = checkIsStepPositive ? checkIsStepPositive(stepNumber) : false;
42
40
  var isError = checkIsStepError ? checkIsStepError(stepNumber) : false;
41
+ var isCriticalError = checkIsStepCriticalError
42
+ ? checkIsStepCriticalError(stepNumber)
43
+ : false;
43
44
  var isWarning = checkIsStepWarning ? checkIsStepWarning(stepNumber) : false;
44
45
  var isWaiting = checkIsStepWaiting ? checkIsStepWaiting(stepNumber) : false;
45
46
  var customStepIndicator = checkIsStepCustom && checkIsStepCustom(stepNumber);
46
47
  var isNotLastStep = stepsLength !== stepNumber;
47
48
  var isInteractive = !disabled && interactive;
48
- return (React__default.default.createElement(components_step_Component.Step, { stepNumber: stepNumber, isSelected: isSelected, isStepCompleted: isStepCompleted, disabled: disabled, isPositive: isPositive, isError: isError, isWarning: isWarning, isWaiting: isWaiting, customStepIndicator: customStepIndicator, onClick: handleStepClick, ordered: ordered, interactive: isInteractive, isVerticalAlign: isVerticalAlign, isNotLastStep: isNotLastStep, key: stepNumber, fullWidth: fullWidth, minSpaceBetweenSteps: minSpaceBetweenSteps }, step));
49
+ return (React__default.default.createElement(Component.Step, { stepNumber: stepNumber, isSelected: isSelected, isStepCompleted: isStepCompleted, disabled: disabled, isPositive: isPositive, isError: isError, isCriticalError: isCriticalError, isWarning: isWarning, isWaiting: isWaiting, customStepIndicator: customStepIndicator, onClick: handleStepClick, ordered: ordered, interactive: isInteractive, isVerticalAlign: isVerticalAlign, isNotLastStep: isNotLastStep, key: stepNumber, fullWidth: fullWidth, minSpaceBetweenSteps: minSpaceBetweenSteps, completedDashColor: completedDashColor, dataTestId: dataTestId }, step));
49
50
  })));
50
51
  };
51
52
 
52
53
  exports.Steps = Steps;
54
+ //# sourceMappingURL=Component.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Component.js","sources":["src/Component.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport cn from 'classnames';\n\nimport { Step } from './components/step';\nimport { StepIndicatorProps } from './components/step-indicator';\nimport { CommonProps } from './types/common-props';\n\nimport styles from './index.module.css';\n\nexport type StepsProps = {\n /**\n * Дополнительный класс\n */\n className?: string;\n\n /**\n * Активный шаг, указанный по умолчанию\n * @default 1\n */\n defaultActiveStep?: number;\n\n /**\n * Активный шаг\n */\n activeStep?: number;\n\n /**\n * Управление возможностью отключения пометки пройденного шага\n * @default true\n */\n isMarkCompletedSteps?: boolean;\n\n /**\n * Кастомный метод для управления состоянием disabled шага и\n * возможностью перехода на этот шаг\n * @param stepNumber - номер шага\n * @return Флаг состояния disabled\n */\n checkIsStepDisabled?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага error\n * @param stepNumber - номер шага\n * @return Флаг состояния error\n */\n checkIsStepError?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага criticalError\n * @param stepNumber - номер шага\n * @return Флаг состояния error\n */\n checkIsStepCriticalError?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага warning\n * @param stepNumber - номер шага\n * @return Флаг состояния warning\n */\n checkIsStepWarning?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага waiting\n * @param stepNumber - номер шага\n * @return Флаг состояния waiting\n */\n checkIsStepWaiting?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для управления состоянием шага positive\n * @param stepNumber - номер шага\n * @return Флаг состояния positive\n */\n checkIsStepPositive?: (stepNumber: number) => boolean;\n\n /**\n * Кастомный метод для установки кастомного индикатора шага\n * @param stepNumber - номер шага\n * @return Объект StepIndicatorProps { className, content, iconColor } или null\n */\n checkIsStepCustom?: (stepNumber: number) => StepIndicatorProps | null;\n\n /**\n * Обработчик клика на шаг\n * @param stepNumber - номер активного шага\n */\n onChange?: (stepNumber: number) => void;\n} & CommonProps;\n\nexport const Steps: React.FC<StepsProps> = ({\n className,\n children,\n defaultActiveStep = 1,\n activeStep: activeStepProp,\n isMarkCompletedSteps = true,\n isVerticalAlign = false,\n ordered = true,\n interactive = true,\n fullWidth = false,\n minSpaceBetweenSteps = 24,\n checkIsStepDisabled,\n checkIsStepError,\n checkIsStepCriticalError,\n checkIsStepWarning,\n checkIsStepWaiting,\n checkIsStepPositive,\n checkIsStepCustom,\n onChange,\n dataTestId,\n completedDashColor,\n}) => {\n const uncontrolled = activeStepProp === undefined;\n const [activeStep, setActiveStep] = useState(defaultActiveStep);\n\n const stepsLength = React.Children.count(children);\n\n const handleStepClick = (stepNumber: number) => {\n if (uncontrolled) {\n setActiveStep(stepNumber);\n }\n\n if (onChange) {\n onChange(stepNumber);\n }\n };\n\n if (!stepsLength) return null;\n\n const visibleActiveStep = uncontrolled ? activeStep : activeStepProp;\n\n return (\n <div\n className={cn(className, styles.component, {\n [styles.vertical]: isVerticalAlign,\n })}\n data-test-id={dataTestId}\n >\n {React.Children.map(children, (step, index) => {\n const stepNumber = index + 1;\n const isSelected = stepNumber === visibleActiveStep;\n const isStepCompleted = isMarkCompletedSteps && stepNumber < visibleActiveStep;\n const disabled = checkIsStepDisabled ? checkIsStepDisabled(stepNumber) : false;\n const isPositive = checkIsStepPositive ? checkIsStepPositive(stepNumber) : false;\n const isError = checkIsStepError ? checkIsStepError(stepNumber) : false;\n const isCriticalError = checkIsStepCriticalError\n ? checkIsStepCriticalError(stepNumber)\n : false;\n const isWarning = checkIsStepWarning ? checkIsStepWarning(stepNumber) : false;\n const isWaiting = checkIsStepWaiting ? checkIsStepWaiting(stepNumber) : false;\n const customStepIndicator = checkIsStepCustom && checkIsStepCustom(stepNumber);\n const isNotLastStep = stepsLength !== stepNumber;\n const isInteractive = !disabled && interactive;\n\n return (\n <Step\n stepNumber={stepNumber}\n isSelected={isSelected}\n isStepCompleted={isStepCompleted}\n disabled={disabled}\n isPositive={isPositive}\n isError={isError}\n isCriticalError={isCriticalError}\n isWarning={isWarning}\n isWaiting={isWaiting}\n customStepIndicator={customStepIndicator}\n onClick={handleStepClick}\n ordered={ordered}\n interactive={isInteractive}\n isVerticalAlign={isVerticalAlign}\n isNotLastStep={isNotLastStep}\n key={stepNumber}\n fullWidth={fullWidth}\n minSpaceBetweenSteps={minSpaceBetweenSteps}\n completedDashColor={completedDashColor}\n dataTestId={dataTestId}\n >\n {step}\n </Step>\n );\n })}\n </div>\n );\n};\n"],"names":["useState","React","cn","styles","Step"],"mappings":";;;;;;;;;;;;;;AAyFO,IAAM,KAAK,GAAyB,UAAC,EAqB3C,EAAA;;AApBG,IAAA,IAAA,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,EAAA,GAAA,EAAA,CAAA,iBAAqB,EAArB,iBAAiB,GAAA,EAAA,KAAA,MAAA,GAAG,CAAC,GAAA,EAAA,EACT,cAAc,GAAA,EAAA,CAAA,UAAA,EAC1B,EAA2B,GAAA,EAAA,CAAA,oBAAA,EAA3B,oBAAoB,GAAG,EAAA,KAAA,MAAA,GAAA,IAAI,GAAA,EAAA,EAC3B,uBAAuB,EAAvB,eAAe,mBAAG,KAAK,GAAA,EAAA,EACvB,EAAc,GAAA,EAAA,CAAA,OAAA,EAAd,OAAO,GAAA,EAAA,KAAA,MAAA,GAAG,IAAI,GAAA,EAAA,EACd,mBAAkB,EAAlB,WAAW,mBAAG,IAAI,GAAA,EAAA,EAClB,EAAA,GAAA,EAAA,CAAA,SAAiB,EAAjB,SAAS,GAAA,EAAA,KAAA,MAAA,GAAG,KAAK,GAAA,EAAA,EACjB,4BAAyB,EAAzB,oBAAoB,GAAG,EAAA,KAAA,MAAA,GAAA,EAAE,KAAA,EACzB,mBAAmB,yBAAA,EACnB,gBAAgB,sBAAA,EAChB,wBAAwB,GAAA,EAAA,CAAA,wBAAA,EACxB,kBAAkB,GAAA,EAAA,CAAA,kBAAA,EAClB,kBAAkB,GAAA,EAAA,CAAA,kBAAA,EAClB,mBAAmB,GAAA,EAAA,CAAA,mBAAA,EACnB,iBAAiB,GAAA,EAAA,CAAA,iBAAA,EACjB,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,kBAAkB,GAAA,EAAA,CAAA,kBAAA;AAElB,IAAA,IAAM,YAAY,GAAG,cAAc,KAAK,SAAS;IAC3C,IAAA,EAAA,GAA8BA,cAAQ,CAAC,iBAAiB,CAAC,EAAxD,UAAU,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,aAAa,GAAA,EAAA,CAAA,CAAA,CAA+B;IAE/D,IAAM,WAAW,GAAGC,sBAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC;IAElD,IAAM,eAAe,GAAG,UAAC,UAAkB,EAAA;AACvC,QAAA,IAAI,YAAY,EAAE;YACd,aAAa,CAAC,UAAU,CAAC;AAC5B;AAED,QAAA,IAAI,QAAQ,EAAE;YACV,QAAQ,CAAC,UAAU,CAAC;AACvB;AACL,KAAC;AAED,IAAA,IAAI,CAAC,WAAW;AAAE,QAAA,OAAO,IAAI;IAE7B,IAAM,iBAAiB,GAAG,YAAY,GAAG,UAAU,GAAG,cAAc;IAEpE,QACIA,sBACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,mBAAE,CAAC,SAAS,EAAEC,YAAM,CAAC,SAAS,GAAA,EAAA,GAAA,EAAA;AACrC,YAAA,EAAA,CAACA,YAAM,CAAC,QAAQ,CAAA,GAAG,eAAe;AACpC,YAAA,EAAA,EAAA,EAAA,cAAA,EACY,UAAU,EAAA,EAEvBF,sBAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,IAAI,EAAE,KAAK,EAAA;AACtC,QAAA,IAAM,UAAU,GAAG,KAAK,GAAG,CAAC;AAC5B,QAAA,IAAM,UAAU,GAAG,UAAU,KAAK,iBAAiB;AACnD,QAAA,IAAM,eAAe,GAAG,oBAAoB,IAAI,UAAU,GAAG,iBAAiB;AAC9E,QAAA,IAAM,QAAQ,GAAG,mBAAmB,GAAG,mBAAmB,CAAC,UAAU,CAAC,GAAG,KAAK;AAC9E,QAAA,IAAM,UAAU,GAAG,mBAAmB,GAAG,mBAAmB,CAAC,UAAU,CAAC,GAAG,KAAK;AAChF,QAAA,IAAM,OAAO,GAAG,gBAAgB,GAAG,gBAAgB,CAAC,UAAU,CAAC,GAAG,KAAK;QACvE,IAAM,eAAe,GAAG;AACpB,cAAE,wBAAwB,CAAC,UAAU;cACnC,KAAK;AACX,QAAA,IAAM,SAAS,GAAG,kBAAkB,GAAG,kBAAkB,CAAC,UAAU,CAAC,GAAG,KAAK;AAC7E,QAAA,IAAM,SAAS,GAAG,kBAAkB,GAAG,kBAAkB,CAAC,UAAU,CAAC,GAAG,KAAK;QAC7E,IAAM,mBAAmB,GAAG,iBAAiB,IAAI,iBAAiB,CAAC,UAAU,CAAC;AAC9E,QAAA,IAAM,aAAa,GAAG,WAAW,KAAK,UAAU;AAChD,QAAA,IAAM,aAAa,GAAG,CAAC,QAAQ,IAAI,WAAW;AAE9C,QAAA,QACIA,sBAAC,CAAA,aAAA,CAAAG,cAAI,IACD,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,mBAAmB,EAAE,mBAAmB,EACxC,OAAO,EAAE,eAAe,EACxB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,aAAa,EAC1B,eAAe,EAAE,eAAe,EAChC,aAAa,EAAE,aAAa,EAC5B,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,SAAS,EACpB,oBAAoB,EAAE,oBAAoB,EAC1C,kBAAkB,EAAE,kBAAkB,EACtC,UAAU,EAAE,UAAU,IAErB,IAAI,CACF;KAEd,CAAC,CACA;AAEd;;;;"}
@@ -1,12 +1,7 @@
1
- /// <reference types="react" />
2
- import React from 'react';
3
- import { ReactNode } from "react";
4
- import { StepIndicatorProps } from "../step-indicator/index";
5
- type StepProps = {
6
- /**
7
- * Название шага
8
- */
9
- children: ReactNode;
1
+ import { FC } from 'react';
2
+ import { CommonProps } from '../../types/common-props';
3
+ import { StepIndicatorProps } from '../step-indicator';
4
+ declare type StepProps = {
10
5
  /**
11
6
  * Номер шага
12
7
  */
@@ -19,14 +14,6 @@ type StepProps = {
19
14
  * Маркер того, что текущий шаг доступен для клика
20
15
  */
21
16
  disabled: boolean;
22
- /**
23
- * Управление отображением номера шага
24
- */
25
- ordered?: boolean;
26
- /**
27
- * Включение / отключение интерактивности шагов
28
- */
29
- interactive?: boolean;
30
17
  /**
31
18
  * Маркер того, что текущий шаг находится в состоянии "Positive"
32
19
  */
@@ -35,6 +22,10 @@ type StepProps = {
35
22
  * Маркер того, что текущий шаг находится в состоянии "Error"
36
23
  */
37
24
  isError: boolean;
25
+ /**
26
+ * Маркер того, что текущий шаг находится в состоянии "isCriticalError"
27
+ */
28
+ isCriticalError: boolean;
38
29
  /**
39
30
  * Маркер того, что текущий шаг находится в состоянии "Warning"
40
31
  */
@@ -51,30 +42,15 @@ type StepProps = {
51
42
  * Свойства кастомного индикатора текущего шага
52
43
  */
53
44
  customStepIndicator?: StepIndicatorProps | null;
54
- /**
55
- * Управление ориентацией компонента
56
- * @default false
57
- */
58
- isVerticalAlign?: boolean;
59
45
  /**
60
46
  * Указывает, является ли текущий шаг последним в списке
61
47
  */
62
48
  isNotLastStep?: boolean;
63
- /**
64
- * Маркер того, что шаг растягивается на всю ширину блока
65
- * для вертикальной ориентации
66
- */
67
- fullWidth?: boolean;
68
- /**
69
- * Минимальное расстояние между шагами
70
- * @default 24
71
- */
72
- minSpaceBetweenSteps?: 8 | 16 | 24;
73
49
  /**
74
50
  * Обработчик нажатия на текущей шаг
75
51
  * @param stepNumber - номер шага
76
52
  */
77
53
  onClick: (stepNumber: number) => void;
78
- };
79
- declare const Step: React.FC<StepProps>;
80
- export { StepProps, Step };
54
+ } & CommonProps;
55
+ export declare const Step: FC<StepProps>;
56
+ export {};
@@ -5,28 +5,23 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var tslib = require('tslib');
6
6
  var React = require('react');
7
7
  var cn = require('classnames');
8
+ var coreComponentsShared = require('@alfalab/core-components-shared');
8
9
  var hooks = require('@alfalab/hooks');
9
10
  var CheckmarkCircleMIcon = require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
10
11
  var ClockMIcon = require('@alfalab/icons-glyph/ClockMIcon');
12
+ var CrossCompactMIcon = require('@alfalab/icons-glyph/CrossCompactMIcon');
11
13
  var ExclamationCircleMIcon = require('@alfalab/icons-glyph/ExclamationCircleMIcon');
12
- var components_stepIndicator_Component = require('../step-indicator/Component.js');
14
+ var Component = require('../step-indicator/Component.js');
15
+ var index_module = require('./index.module.css.js');
13
16
 
14
17
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
15
18
 
16
19
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
17
20
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
18
21
 
19
- var styles = {"step":"steps__step_13yrt","vertical":"steps__vertical_13yrt","interactive":"steps__interactive_13yrt","disabled":"steps__disabled_13yrt","text":"steps__text_13yrt","indicator":"steps__indicator_13yrt","option":"steps__option_13yrt","dash":"steps__dash_13yrt","size-16":"steps__size-16_13yrt","size-8":"steps__size-8_13yrt","completed":"steps__completed_13yrt","focused":"steps__focused_13yrt","selected":"steps__selected_13yrt","checkbox":"steps__checkbox_13yrt","dot":"steps__dot_13yrt","error":"steps__error_13yrt","unordered":"steps__unordered_13yrt","completedIndicator":"steps__completedIndicator_13yrt","fullWidth":"steps__fullWidth_13yrt"};
20
- require('./index.css')
21
-
22
- var SIZE_TO_CLASSNAME_MAP = {
23
- 8: 'size-8',
24
- 16: 'size-16',
25
- 24: 'size-24',
26
- };
27
22
  var Step = function (_a) {
28
- var _b, _c, _d, _e;
29
- var children = _a.children, stepNumber = _a.stepNumber, isSelected = _a.isSelected, disabled = _a.disabled, ordered = _a.ordered, isPositive = _a.isPositive, isError = _a.isError, isWarning = _a.isWarning, isWaiting = _a.isWaiting, customStepIndicator = _a.customStepIndicator, isStepCompleted = _a.isStepCompleted, onClick = _a.onClick, interactive = _a.interactive, isVerticalAlign = _a.isVerticalAlign, isNotLastStep = _a.isNotLastStep, fullWidth = _a.fullWidth, _f = _a.minSpaceBetweenSteps, minSpaceBetweenSteps = _f === void 0 ? 24 : _f;
23
+ var _b, _c, _d, _e, _f;
24
+ var children = _a.children, stepNumber = _a.stepNumber, isSelected = _a.isSelected, disabled = _a.disabled, ordered = _a.ordered, isPositive = _a.isPositive, isError = _a.isError, isCriticalError = _a.isCriticalError, isWarning = _a.isWarning, isWaiting = _a.isWaiting, customStepIndicator = _a.customStepIndicator, isStepCompleted = _a.isStepCompleted, onClick = _a.onClick, interactive = _a.interactive, isVerticalAlign = _a.isVerticalAlign, isNotLastStep = _a.isNotLastStep, fullWidth = _a.fullWidth, _g = _a.minSpaceBetweenSteps, minSpaceBetweenSteps = _g === void 0 ? 24 : _g, completedDashColor = _a.completedDashColor, dataTestId = _a.dataTestId;
30
25
  var stepRef = React.useRef(null);
31
26
  var focused = hooks.useFocus(stepRef, 'keyboard')[0];
32
27
  var handleButtonClick = function () {
@@ -46,61 +41,77 @@ var Step = function (_a) {
46
41
  };
47
42
  var getStepIndicator = function () {
48
43
  if (customStepIndicator) {
49
- return React__default.default.createElement(components_stepIndicator_Component.StepIndicator, tslib.__assign({}, customStepIndicator));
44
+ return React__default.default.createElement(Component.StepIndicator, tslib.__assign({}, customStepIndicator));
45
+ }
46
+ if (isCriticalError) {
47
+ return React__default.default.createElement(Component.StepIndicator, { iconColor: 'negative', content: React__default.default.createElement(CrossCompactMIcon.CrossCompactMIcon, null) });
50
48
  }
51
49
  if (isError) {
52
- return React__default.default.createElement(components_stepIndicator_Component.StepIndicator, { iconColor: 'negative', content: React__default.default.createElement(ExclamationCircleMIcon.ExclamationCircleMIcon, null) });
50
+ return React__default.default.createElement(Component.StepIndicator, { iconColor: 'negative', content: React__default.default.createElement(ExclamationCircleMIcon.ExclamationCircleMIcon, null) });
53
51
  }
54
52
  if (isWarning) {
55
- return React__default.default.createElement(components_stepIndicator_Component.StepIndicator, { iconColor: 'attention', content: React__default.default.createElement(ExclamationCircleMIcon.ExclamationCircleMIcon, null) });
53
+ return React__default.default.createElement(Component.StepIndicator, { iconColor: 'attention', content: React__default.default.createElement(ExclamationCircleMIcon.ExclamationCircleMIcon, null) });
56
54
  }
57
55
  if (isWaiting) {
58
- return React__default.default.createElement(components_stepIndicator_Component.StepIndicator, { iconColor: 'secondary', content: React__default.default.createElement(ClockMIcon.ClockMIcon, null) });
56
+ return React__default.default.createElement(Component.StepIndicator, { iconColor: 'secondary', content: React__default.default.createElement(ClockMIcon.ClockMIcon, null) });
59
57
  }
60
58
  if (isPositive) {
61
- return React__default.default.createElement(components_stepIndicator_Component.StepIndicator, { iconColor: 'positive', content: React__default.default.createElement(CheckmarkCircleMIcon.CheckmarkCircleMIcon, null) });
59
+ return React__default.default.createElement(Component.StepIndicator, { iconColor: 'positive', content: React__default.default.createElement(CheckmarkCircleMIcon.CheckmarkCircleMIcon, null) });
62
60
  }
63
61
  if (isStepCompleted) {
64
- return (React__default.default.createElement(components_stepIndicator_Component.StepIndicator, { iconColor: 'positive', content: React__default.default.createElement(CheckmarkCircleMIcon.CheckmarkCircleMIcon, null), className: styles.completedIndicator }));
62
+ return (React__default.default.createElement(Component.StepIndicator, { iconColor: 'positive', content: React__default.default.createElement(CheckmarkCircleMIcon.CheckmarkCircleMIcon, null), className: index_module.completedIndicator }));
65
63
  }
66
64
  if (!ordered) {
67
- return (React__default.default.createElement("div", { className: styles.checkbox },
68
- React__default.default.createElement("span", { className: styles.dot })));
65
+ return (React__default.default.createElement("div", { className: index_module.checkbox },
66
+ React__default.default.createElement("span", { className: index_module.dot })));
69
67
  }
70
68
  return stepNumber;
71
69
  };
70
+ var getCustomDashColor = function () {
71
+ if (isStepCompleted && completedDashColor) {
72
+ return {
73
+ borderColor: completedDashColor,
74
+ };
75
+ }
76
+ return {};
77
+ };
72
78
  var renderDash = function () {
73
79
  var _a;
74
- return (React__default.default.createElement("div", { className: cn__default.default(styles.dash, (_a = {},
75
- _a[styles.vertical] = isVerticalAlign,
76
- _a[styles.completed] = isStepCompleted,
77
- _a), styles[SIZE_TO_CLASSNAME_MAP[minSpaceBetweenSteps]]) }));
80
+ return (React__default.default.createElement("div", { className: cn__default.default(index_module.dash, (_a = {},
81
+ _a[index_module.vertical] = isVerticalAlign,
82
+ _a[index_module.completed] = isStepCompleted,
83
+ _a)), style: tslib.__assign({}, getCustomDashColor()) }));
78
84
  };
79
- return (React__default.default.createElement("div", { role: 'button', tabIndex: 0, ref: stepRef, className: cn__default.default(styles.step, (_b = {},
80
- _b[styles.completed] = isStepCompleted,
81
- _b[styles.error] = isError,
82
- _b[styles.selected] = isSelected,
83
- _b[styles.disabled] = disabled,
84
- _b[styles.focused] = focused,
85
- _b[styles.vertical] = isVerticalAlign,
86
- _b[styles.interactive] = interactive,
87
- _b[styles.fullWidth] = fullWidth && isVerticalAlign,
85
+ return (React__default.default.createElement("div", { "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'step'), role: 'button', tabIndex: 0, ref: stepRef, className: cn__default.default(index_module.step, (_b = {},
86
+ _b[index_module.completed] = isStepCompleted,
87
+ _b[index_module.error] = isError,
88
+ _b[index_module.selected] = isSelected,
89
+ _b[index_module.disabled] = disabled,
90
+ _b[index_module.focused] = focused,
91
+ _b[index_module.vertical] = isVerticalAlign,
92
+ _b[index_module.interactive] = interactive,
93
+ _b[index_module.fullWidth] = fullWidth && isVerticalAlign,
94
+ _b[index_module.horizontal] = !isVerticalAlign,
88
95
  _b)), onClick: handleButtonClick, onKeyDown: handleKeyDown },
89
- React__default.default.createElement("div", { className: cn__default.default(styles.indicator, (_c = {},
90
- _c[styles.vertical] = isVerticalAlign,
91
- _c[styles.interactive] = interactive,
96
+ React__default.default.createElement("div", { className: cn__default.default(index_module.indicator, (_c = {},
97
+ _c[index_module.vertical] = isVerticalAlign,
98
+ _c[index_module.interactive] = interactive,
92
99
  _c)) },
93
- React__default.default.createElement("div", { className: cn__default.default(styles.option, (_d = {},
94
- _d[styles.unordered] = !ordered,
95
- _d[styles.vertical] = isVerticalAlign,
96
- _d[styles.error] = isError,
100
+ React__default.default.createElement("div", { className: cn__default.default(index_module.option, (_d = {},
101
+ _d[index_module.unordered] = !ordered,
102
+ _d[index_module.vertical] = isVerticalAlign,
103
+ _d[index_module.error] = isError,
97
104
  _d)) }, getStepIndicator()),
98
105
  isNotLastStep && isVerticalAlign && renderDash()),
99
- React__default.default.createElement("div", { className: cn__default.default(styles.text, (_e = {},
100
- _e[styles.interactive] = interactive,
101
- _e[styles.fullWidth] = fullWidth && isVerticalAlign,
102
- _e)), onClick: handleTextClick }, children),
106
+ React__default.default.createElement("div", { className: cn__default.default(index_module.textWrapper, index_module["gap-".concat(minSpaceBetweenSteps)], (_e = {},
107
+ _e[index_module.vertical] = isVerticalAlign,
108
+ _e)) },
109
+ React__default.default.createElement("div", { className: cn__default.default(index_module.text, (_f = {},
110
+ _f[index_module.interactive] = interactive,
111
+ _f[index_module.fullWidth] = fullWidth && isVerticalAlign,
112
+ _f)), onClick: handleTextClick }, children)),
103
113
  isNotLastStep && !isVerticalAlign && renderDash()));
104
114
  };
105
115
 
106
116
  exports.Step = Step;
117
+ //# sourceMappingURL=Component.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Component.js","sources":["../../src/components/step/Component.tsx"],"sourcesContent":["import React, { FC, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { useFocus } from '@alfalab/hooks';\nimport { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';\nimport { ClockMIcon } from '@alfalab/icons-glyph/ClockMIcon';\nimport { CrossCompactMIcon } from '@alfalab/icons-glyph/CrossCompactMIcon';\nimport { ExclamationCircleMIcon } from '@alfalab/icons-glyph/ExclamationCircleMIcon';\n\nimport { CommonProps } from '../../types/common-props';\nimport { StepIndicator, StepIndicatorProps } from '../step-indicator';\n\nimport styles from './index.module.css';\n\ntype StepProps = {\n /**\n * Номер шага\n */\n stepNumber: number;\n\n /**\n * Маркер того, что текущий шаг выбран\n */\n isSelected: boolean;\n\n /**\n * Маркер того, что текущий шаг доступен для клика\n */\n disabled: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Positive\"\n */\n isPositive: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Error\"\n */\n isError: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"isCriticalError\"\n */\n isCriticalError: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Warning\"\n */\n isWarning: boolean;\n\n /**\n * Маркер того, что текущий шаг находится в состоянии \"Waiting\"\n */\n isWaiting: boolean;\n\n /**\n * Маркер того, что текущий шаг нужно пометить как завершенный\n */\n isStepCompleted: boolean;\n\n /**\n * Свойства кастомного индикатора текущего шага\n */\n customStepIndicator?: StepIndicatorProps | null;\n\n /**\n * Указывает, является ли текущий шаг последним в списке\n */\n isNotLastStep?: boolean;\n\n /**\n * Обработчик нажатия на текущей шаг\n * @param stepNumber - номер шага\n */\n onClick: (stepNumber: number) => void;\n} & CommonProps;\n\nexport const Step: FC<StepProps> = ({\n children,\n stepNumber,\n isSelected,\n disabled,\n ordered,\n isPositive,\n isError,\n isCriticalError,\n isWarning,\n isWaiting,\n customStepIndicator,\n isStepCompleted,\n onClick,\n interactive,\n isVerticalAlign,\n isNotLastStep,\n fullWidth,\n minSpaceBetweenSteps = 24,\n completedDashColor,\n dataTestId,\n}) => {\n const stepRef = useRef<HTMLDivElement>(null);\n\n const [focused] = useFocus(stepRef, 'keyboard');\n\n const handleButtonClick = () => {\n if (!disabled && interactive && onClick) {\n onClick(stepNumber);\n }\n };\n\n const handleTextClick = (e: React.MouseEvent<HTMLElement>) => {\n if (!interactive) {\n e.stopPropagation();\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (event.key === 'Enter') {\n handleButtonClick();\n }\n };\n\n const getStepIndicator = () => {\n if (customStepIndicator) {\n return <StepIndicator {...customStepIndicator} />;\n }\n if (isCriticalError) {\n return <StepIndicator iconColor='negative' content={<CrossCompactMIcon />} />;\n }\n if (isError) {\n return <StepIndicator iconColor='negative' content={<ExclamationCircleMIcon />} />;\n }\n if (isWarning) {\n return <StepIndicator iconColor='attention' content={<ExclamationCircleMIcon />} />;\n }\n if (isWaiting) {\n return <StepIndicator iconColor='secondary' content={<ClockMIcon />} />;\n }\n if (isPositive) {\n return <StepIndicator iconColor='positive' content={<CheckmarkCircleMIcon />} />;\n }\n if (isStepCompleted) {\n return (\n <StepIndicator\n iconColor='positive'\n content={<CheckmarkCircleMIcon />}\n className={styles.completedIndicator}\n />\n );\n }\n if (!ordered) {\n return (\n <div className={styles.checkbox}>\n <span className={styles.dot} />\n </div>\n );\n }\n\n return stepNumber;\n };\n\n const getCustomDashColor = () => {\n if (isStepCompleted && completedDashColor) {\n return {\n borderColor: completedDashColor,\n };\n }\n\n return {};\n };\n\n const renderDash = () => (\n <div\n className={cn(styles.dash, {\n [styles.vertical]: isVerticalAlign,\n [styles.completed]: isStepCompleted,\n })}\n style={{\n ...getCustomDashColor(),\n }}\n />\n );\n\n return (\n <div\n data-test-id={getDataTestId(dataTestId, 'step')}\n role='button'\n tabIndex={0}\n ref={stepRef}\n className={cn(styles.step, {\n [styles.completed]: isStepCompleted,\n [styles.error]: isError,\n [styles.selected]: isSelected,\n [styles.disabled]: disabled,\n [styles.focused]: focused,\n [styles.vertical]: isVerticalAlign,\n [styles.interactive]: interactive,\n [styles.fullWidth]: fullWidth && isVerticalAlign,\n [styles.horizontal]: !isVerticalAlign,\n })}\n onClick={handleButtonClick}\n onKeyDown={handleKeyDown}\n >\n <div\n className={cn(styles.indicator, {\n [styles.vertical]: isVerticalAlign,\n [styles.interactive]: interactive,\n })}\n >\n <div\n className={cn(styles.option, {\n [styles.unordered]: !ordered,\n [styles.vertical]: isVerticalAlign,\n [styles.error]: isError,\n })}\n >\n {getStepIndicator()}\n </div>\n {isNotLastStep && isVerticalAlign && renderDash()}\n </div>\n <div\n className={cn(styles.textWrapper, styles[`gap-${minSpaceBetweenSteps}`], {\n [styles.vertical]: isVerticalAlign,\n })}\n >\n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n <div\n className={cn(styles.text, {\n [styles.interactive]: interactive,\n [styles.fullWidth]: fullWidth && isVerticalAlign,\n })}\n onClick={handleTextClick}\n >\n {children}\n </div>\n </div>\n {isNotLastStep && !isVerticalAlign && renderDash()}\n </div>\n );\n};\n"],"names":["useRef","useFocus","React","StepIndicator","__assign","CrossCompactMIcon","ExclamationCircleMIcon","ClockMIcon","CheckmarkCircleMIcon","styles","cn","getDataTestId"],"mappings":"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"}