@salutejs/plasma-new-hope 0.159.0-canary.1443.11138999097.0 → 0.159.0-canary.1443.11140129684.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Steps/ui/StepItem/StepItem.js +3 -1
- package/cjs/components/Steps/ui/StepItem/StepItem.js.map +1 -1
- package/emotion/cjs/components/Steps/ui/StepItem/StepItem.js +3 -1
- package/emotion/cjs/examples/plasma_b2c/components/Steps/Steps.stories.tsx +8 -1
- package/emotion/cjs/examples/plasma_web/components/Steps/Steps.stories.tsx +8 -1
- package/emotion/es/components/Steps/ui/StepItem/StepItem.js +3 -1
- package/emotion/es/examples/plasma_b2c/components/Steps/Steps.stories.tsx +8 -1
- package/emotion/es/examples/plasma_web/components/Steps/Steps.stories.tsx +8 -1
- package/es/components/Steps/ui/StepItem/StepItem.js +3 -1
- package/es/components/Steps/ui/StepItem/StepItem.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Steps/ui/StepItem/StepItem.js +3 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Steps/Steps.stories.tsx +8 -1
- package/styled-components/cjs/examples/plasma_web/components/Steps/Steps.stories.tsx +8 -1
- package/styled-components/es/components/Steps/ui/StepItem/StepItem.js +3 -1
- package/styled-components/es/examples/plasma_b2c/components/Steps/Steps.stories.tsx +8 -1
- package/styled-components/es/examples/plasma_web/components/Steps/Steps.stories.tsx +8 -1
- package/types/components/Steps/ui/StepItem/StepItem.types.d.ts +7 -5
- package/types/components/Steps/ui/StepItem/StepItem.types.d.ts.map +1 -1
@@ -59,6 +59,8 @@ var StepItem = function StepItem(_ref) {
|
|
59
59
|
resultIndicatorSize = isActive ? 16 : 8;
|
60
60
|
}
|
61
61
|
var indentToken = indicatorSizesIndentsMap[resultIndicatorSize];
|
62
|
+
|
63
|
+
// todo заменить на callback с условиями внутри
|
62
64
|
var onMouseOver = clickable && !isDisabled ? function () {
|
63
65
|
if (isDisabled) {
|
64
66
|
setIsHovered(false);
|
@@ -105,7 +107,7 @@ var StepItem = function StepItem(_ref) {
|
|
105
107
|
onBlur: onMouseOut,
|
106
108
|
onMouseOver: onMouseOver,
|
107
109
|
onMouseOut: onMouseOut
|
108
|
-
}, title), content && /*#__PURE__*/React.createElement(StepItem_styles.StepItemContent, null, typeof content === 'function'
|
110
|
+
}, title), content && /*#__PURE__*/React.createElement(StepItem_styles.StepItemContent, null, typeof content === 'function' ? content(status, index, items) : content))), isSimple && !isLast && /*#__PURE__*/React.createElement(StepItem_styles.StepItemDivider, {
|
109
111
|
className: cls(Steps_tokens.classes.simple, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, Steps_tokens.classes.verticalOrientation, isVertical), Steps_tokens.classes.transparentDivider, !hasLine), Steps_tokens.classes.inactive, isInactive || isNextInactive))
|
110
112
|
}));
|
111
113
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"StepItem.js","sources":["../../../../../src/components/Steps/ui/StepItem/StepItem.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport cls from 'classnames';\n\nimport { classes, tokens } from '../../Steps.tokens';\nimport { StepsContent, StepsContentAlign, StepsOrientation } from '../../Steps.types';\n\nimport type { StepItemProps } from './StepItem.types';\nimport {\n Bullet,\n BulletIndicator,\n BulletIndicatorWrapper,\n StepItemContent,\n StepItemContentWrapper,\n StepItemDivider,\n StepItemStyled,\n StepItemTitle,\n SpinnerStyled,\n} from './StepItem.styles';\n\n// todo попробовать заменить через baseline выравнивание\nconst indicatorSizesIndentsMap = {\n 8: `var(${tokens.smallBulletIndentHeight})`,\n 16: `var(${tokens.largeBulletIndentHeight})`,\n 24: `var(${tokens.smallIndicatorIndentHeight})`,\n 36: `var(${tokens.largeIndicatorIndentHeight})`,\n} as const;\n\nexport const StepItem: React.FC<\n StepItemProps & {\n index: number;\n items: StepItemProps[];\n size: string;\n hasLine?: boolean;\n hasContent?: StepsContent;\n hasLoader?: boolean;\n isFirst?: boolean;\n isLast?: boolean;\n onClick?: (item: StepItemProps, index: number) => void;\n contentAlign?: StepsContentAlign;\n orientation?: StepsOrientation;\n }\n> = ({\n index,\n title,\n content,\n indicator,\n status = 'inactive',\n size,\n orientation,\n contentAlign,\n hasLine,\n hasLoader,\n onClick,\n items,\n}) => {\n const [isHovered, setIsHovered] = useState(false);\n\n const isFirst = index === 0;\n const isLast = index === items.length - 1;\n\n const prevItem = items[index - 1];\n const nextItem = items[index + 1];\n\n const isActive = status === 'active';\n const isInactive = status === 'inactive';\n const isPrevInactive = (prevItem && !prevItem?.status) || prevItem?.status === 'inactive';\n const isNextInactive = !nextItem?.status || nextItem?.status === 'inactive';\n\n const hasIndicator = indicator != null;\n\n const BulletNode = hasIndicator ? BulletIndicator : Bullet;\n\n const item = items[index];\n const isSimple = !title && !content;\n const clickable = Boolean(onClick);\n const isVertical = orientation === 'vertical';\n const isCentered = contentAlign === 'center';\n const isDisabled = item.disabled;\n\n const onClickHandler = onClick && !isDisabled ? () => onClick(item, index) : undefined;\n\n let resultIndicatorSize: keyof typeof indicatorSizesIndentsMap;\n if (hasIndicator) {\n resultIndicatorSize = isActive ? 36 : 24;\n } else {\n resultIndicatorSize = isActive ? 16 : 8;\n }\n\n const indentToken = indicatorSizesIndentsMap[resultIndicatorSize];\n\n const onMouseOver =\n clickable && !isDisabled\n ? () => {\n if (isDisabled) {\n setIsHovered(false);\n }\n\n setIsHovered(true);\n }\n : undefined;\n\n const onMouseOut =\n clickable && !isDisabled\n ? () => {\n setIsHovered(false);\n }\n : undefined;\n\n useEffect(() => {\n if (isDisabled) {\n setIsHovered(false);\n }\n }, [isDisabled]);\n\n return (\n <>\n <StepItemStyled\n className={cls({\n [classes.simple]: isSimple,\n [classes.active]: isActive,\n [classes.hovered]: isHovered && !isActive,\n [classes.inactive]: isInactive,\n [classes.centered]: isCentered,\n [classes.disabled]: isDisabled,\n [classes.clickable]: clickable && !isActive,\n [classes.hasIndicator]: hasIndicator,\n [classes.verticalOrientation]: isVertical,\n })}\n >\n <BulletIndicatorWrapper\n className={cls({\n [classes.verticalOrientation]: isVertical,\n [classes.centered]: isCentered,\n [classes.simple]: isSimple,\n [classes.hasIndicator]: hasIndicator,\n })}\n onClick={onClickHandler}\n onFocus={onMouseOver}\n onBlur={onMouseOut}\n onMouseOver={onMouseOver}\n onMouseOut={onMouseOut}\n >\n {contentAlign === 'center' && !isSimple && (\n <StepItemDivider\n className={cls({\n [classes.simple]: isSimple,\n [classes.transparentDivider]: !hasLine || isFirst,\n [classes.inactive]: isInactive || isPrevInactive,\n })}\n />\n )}\n\n {isVertical && (isSimple ? !isFirst : true) && (\n <StepItemDivider\n className={cls(classes.indentDivider, {\n [classes.simple]: isSimple,\n [classes.transparentDivider]: !hasLine || isFirst,\n [classes.inactive]: isInactive || isPrevInactive,\n })}\n indentToken={indentToken}\n />\n )}\n\n {hasLoader && <SpinnerStyled hasIndicator={hasIndicator} />}\n\n {!hasLoader && (\n <BulletNode\n className={cls({\n [classes.active]: isActive,\n [classes.inactive]: isInactive,\n })}\n >\n {typeof indicator === 'function' && indicator({ status, item, size })}\n {typeof indicator !== 'function' && indicator}\n </BulletNode>\n )}\n\n {!isSimple && (\n <StepItemDivider\n className={cls({\n [classes.simple]: isSimple,\n [classes.transparentDivider]: !hasLine || isLast,\n [classes.inactive]: isInactive || isNextInactive,\n })}\n />\n )}\n </BulletIndicatorWrapper>\n\n {!isSimple && (\n <StepItemContentWrapper\n className={cls({\n [classes.verticalOrientation]: isVertical,\n [classes.centered]: isCentered,\n [classes.active]: isActive,\n [classes.hasIndicator]: hasIndicator,\n })}\n >\n <StepItemTitle\n onClick={onClickHandler}\n onFocus={onMouseOver}\n onBlur={onMouseOut}\n onMouseOver={onMouseOver}\n onMouseOut={onMouseOut}\n >\n {title}\n </StepItemTitle>\n\n {content && (\n <StepItemContent>\n {typeof content === 'function' && content(status, index, items)}\n {typeof content !== 'function' && content}\n </StepItemContent>\n )}\n </StepItemContentWrapper>\n )}\n </StepItemStyled>\n {isSimple && !isLast && (\n <StepItemDivider\n className={cls(classes.simple, {\n [classes.verticalOrientation]: isVertical,\n [classes.transparentDivider]: !hasLine,\n [classes.inactive]: isInactive || isNextInactive,\n })}\n />\n )}\n </>\n );\n};\n"],"names":["indicatorSizesIndentsMap","concat","tokens","smallBulletIndentHeight","largeBulletIndentHeight","smallIndicatorIndentHeight","largeIndicatorIndentHeight","StepItem","_ref","index","title","content","indicator","_ref$status","status","size","orientation","contentAlign","hasLine","hasLoader","onClick","items","_useState","useState","_useState2","_slicedToArray","isHovered","setIsHovered","isFirst","isLast","length","prevItem","nextItem","isActive","isInactive","isPrevInactive","isNextInactive","hasIndicator","BulletNode","BulletIndicator","Bullet","item","isSimple","clickable","Boolean","isVertical","isCentered","isDisabled","disabled","onClickHandler","undefined","resultIndicatorSize","indentToken","onMouseOver","onMouseOut","useEffect","React","createElement","Fragment","StepItemStyled","className","cls","_defineProperty","classes","simple","active","hovered","inactive","centered","verticalOrientation","BulletIndicatorWrapper","onFocus","onBlur","StepItemDivider","transparentDivider","indentDivider","SpinnerStyled","StepItemContentWrapper","StepItemTitle","StepItemContent"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"StepItem.js","sources":["../../../../../src/components/Steps/ui/StepItem/StepItem.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport cls from 'classnames';\n\nimport { classes, tokens } from '../../Steps.tokens';\nimport { StepsContent, StepsContentAlign, StepsOrientation } from '../../Steps.types';\n\nimport type { StepItemProps } from './StepItem.types';\nimport {\n Bullet,\n BulletIndicator,\n BulletIndicatorWrapper,\n StepItemContent,\n StepItemContentWrapper,\n StepItemDivider,\n StepItemStyled,\n StepItemTitle,\n SpinnerStyled,\n} from './StepItem.styles';\n\n// todo попробовать заменить через baseline выравнивание\nconst indicatorSizesIndentsMap = {\n 8: `var(${tokens.smallBulletIndentHeight})`,\n 16: `var(${tokens.largeBulletIndentHeight})`,\n 24: `var(${tokens.smallIndicatorIndentHeight})`,\n 36: `var(${tokens.largeIndicatorIndentHeight})`,\n} as const;\n\nexport const StepItem: React.FC<\n StepItemProps & {\n index: number;\n items: StepItemProps[];\n size: string;\n hasLine?: boolean;\n hasContent?: StepsContent;\n hasLoader?: boolean;\n isFirst?: boolean;\n isLast?: boolean;\n onClick?: (item: StepItemProps, index: number) => void;\n contentAlign?: StepsContentAlign;\n orientation?: StepsOrientation;\n }\n> = ({\n index,\n title,\n content,\n indicator,\n status = 'inactive',\n size,\n orientation,\n contentAlign,\n hasLine,\n hasLoader,\n onClick,\n items,\n}) => {\n const [isHovered, setIsHovered] = useState(false);\n\n const isFirst = index === 0;\n const isLast = index === items.length - 1;\n\n const prevItem = items[index - 1];\n const nextItem = items[index + 1];\n\n const isActive = status === 'active';\n const isInactive = status === 'inactive';\n const isPrevInactive = (prevItem && !prevItem?.status) || prevItem?.status === 'inactive';\n const isNextInactive = !nextItem?.status || nextItem?.status === 'inactive';\n\n const hasIndicator = indicator != null;\n\n const BulletNode = hasIndicator ? BulletIndicator : Bullet;\n\n const item = items[index];\n const isSimple = !title && !content;\n const clickable = Boolean(onClick);\n const isVertical = orientation === 'vertical';\n const isCentered = contentAlign === 'center';\n const isDisabled = item.disabled;\n\n const onClickHandler = onClick && !isDisabled ? () => onClick(item, index) : undefined;\n\n let resultIndicatorSize: keyof typeof indicatorSizesIndentsMap;\n if (hasIndicator) {\n resultIndicatorSize = isActive ? 36 : 24;\n } else {\n resultIndicatorSize = isActive ? 16 : 8;\n }\n\n const indentToken = indicatorSizesIndentsMap[resultIndicatorSize];\n\n // todo заменить на callback с условиями внутри\n const onMouseOver =\n clickable && !isDisabled\n ? () => {\n if (isDisabled) {\n setIsHovered(false);\n }\n\n setIsHovered(true);\n }\n : undefined;\n\n const onMouseOut =\n clickable && !isDisabled\n ? () => {\n setIsHovered(false);\n }\n : undefined;\n\n useEffect(() => {\n if (isDisabled) {\n setIsHovered(false);\n }\n }, [isDisabled]);\n\n return (\n <>\n <StepItemStyled\n className={cls({\n [classes.simple]: isSimple,\n [classes.active]: isActive,\n [classes.hovered]: isHovered && !isActive,\n [classes.inactive]: isInactive,\n [classes.centered]: isCentered,\n [classes.disabled]: isDisabled,\n [classes.clickable]: clickable && !isActive,\n [classes.hasIndicator]: hasIndicator,\n [classes.verticalOrientation]: isVertical,\n })}\n >\n <BulletIndicatorWrapper\n className={cls({\n [classes.verticalOrientation]: isVertical,\n [classes.centered]: isCentered,\n [classes.simple]: isSimple,\n [classes.hasIndicator]: hasIndicator,\n })}\n onClick={onClickHandler}\n onFocus={onMouseOver}\n onBlur={onMouseOut}\n onMouseOver={onMouseOver}\n onMouseOut={onMouseOut}\n >\n {contentAlign === 'center' && !isSimple && (\n <StepItemDivider\n className={cls({\n [classes.simple]: isSimple,\n [classes.transparentDivider]: !hasLine || isFirst,\n [classes.inactive]: isInactive || isPrevInactive,\n })}\n />\n )}\n\n {isVertical && (isSimple ? !isFirst : true) && (\n <StepItemDivider\n className={cls(classes.indentDivider, {\n [classes.simple]: isSimple,\n [classes.transparentDivider]: !hasLine || isFirst,\n [classes.inactive]: isInactive || isPrevInactive,\n })}\n indentToken={indentToken}\n />\n )}\n\n {hasLoader && <SpinnerStyled hasIndicator={hasIndicator} />}\n\n {!hasLoader && (\n <BulletNode\n className={cls({\n [classes.active]: isActive,\n [classes.inactive]: isInactive,\n })}\n >\n {typeof indicator === 'function' && indicator({ status, item, size })}\n {typeof indicator !== 'function' && indicator}\n </BulletNode>\n )}\n\n {!isSimple && (\n <StepItemDivider\n className={cls({\n [classes.simple]: isSimple,\n [classes.transparentDivider]: !hasLine || isLast,\n [classes.inactive]: isInactive || isNextInactive,\n })}\n />\n )}\n </BulletIndicatorWrapper>\n\n {!isSimple && (\n <StepItemContentWrapper\n className={cls({\n [classes.verticalOrientation]: isVertical,\n [classes.centered]: isCentered,\n [classes.active]: isActive,\n [classes.hasIndicator]: hasIndicator,\n })}\n >\n <StepItemTitle\n onClick={onClickHandler}\n onFocus={onMouseOver}\n onBlur={onMouseOut}\n onMouseOver={onMouseOver}\n onMouseOut={onMouseOut}\n >\n {title}\n </StepItemTitle>\n\n {content && (\n <StepItemContent>\n {typeof content === 'function' ? content(status, index, items) : content}\n </StepItemContent>\n )}\n </StepItemContentWrapper>\n )}\n </StepItemStyled>\n {isSimple && !isLast && (\n <StepItemDivider\n className={cls(classes.simple, {\n [classes.verticalOrientation]: isVertical,\n [classes.transparentDivider]: !hasLine,\n [classes.inactive]: isInactive || isNextInactive,\n })}\n />\n )}\n </>\n );\n};\n"],"names":["indicatorSizesIndentsMap","concat","tokens","smallBulletIndentHeight","largeBulletIndentHeight","smallIndicatorIndentHeight","largeIndicatorIndentHeight","StepItem","_ref","index","title","content","indicator","_ref$status","status","size","orientation","contentAlign","hasLine","hasLoader","onClick","items","_useState","useState","_useState2","_slicedToArray","isHovered","setIsHovered","isFirst","isLast","length","prevItem","nextItem","isActive","isInactive","isPrevInactive","isNextInactive","hasIndicator","BulletNode","BulletIndicator","Bullet","item","isSimple","clickable","Boolean","isVertical","isCentered","isDisabled","disabled","onClickHandler","undefined","resultIndicatorSize","indentToken","onMouseOver","onMouseOut","useEffect","React","createElement","Fragment","StepItemStyled","className","cls","_defineProperty","classes","simple","active","hovered","inactive","centered","verticalOrientation","BulletIndicatorWrapper","onFocus","onBlur","StepItemDivider","transparentDivider","indentDivider","SpinnerStyled","StepItemContentWrapper","StepItemTitle","StepItemContent"],"mappings":"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"}
|
@@ -72,6 +72,8 @@ var StepItem = exports.StepItem = function StepItem(_ref) {
|
|
72
72
|
resultIndicatorSize = isActive ? 16 : 8;
|
73
73
|
}
|
74
74
|
var indentToken = indicatorSizesIndentsMap[resultIndicatorSize];
|
75
|
+
|
76
|
+
// todo заменить на callback с условиями внутри
|
75
77
|
var onMouseOver = clickable && !isDisabled ? function () {
|
76
78
|
if (isDisabled) {
|
77
79
|
setIsHovered(false);
|
@@ -118,7 +120,7 @@ var StepItem = exports.StepItem = function StepItem(_ref) {
|
|
118
120
|
onBlur: onMouseOut,
|
119
121
|
onMouseOver: onMouseOver,
|
120
122
|
onMouseOut: onMouseOut
|
121
|
-
}, title), content && /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemContent, null, typeof content === 'function'
|
123
|
+
}, title), content && /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemContent, null, typeof content === 'function' ? content(status, index, items) : content))), isSimple && !isLast && /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemDivider, {
|
122
124
|
className: (0, _classnames["default"])(_Steps.classes.simple, _defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.verticalOrientation, isVertical), _Steps.classes.transparentDivider, !hasLine), _Steps.classes.inactive, isInactive || isNextInactive))
|
123
125
|
}));
|
124
126
|
};
|
@@ -112,7 +112,14 @@ const DefaultStory = (args) => {
|
|
112
112
|
|
113
113
|
return (
|
114
114
|
<div style={{ maxWidth }}>
|
115
|
-
<Steps
|
115
|
+
<Steps
|
116
|
+
size={size}
|
117
|
+
items={items}
|
118
|
+
onChange={onChange}
|
119
|
+
hasLoader={loading}
|
120
|
+
hasContent={hasContent}
|
121
|
+
{...rest}
|
122
|
+
/>
|
116
123
|
</div>
|
117
124
|
);
|
118
125
|
};
|
@@ -112,7 +112,14 @@ const DefaultStory = (args) => {
|
|
112
112
|
|
113
113
|
return (
|
114
114
|
<div style={{ maxWidth }}>
|
115
|
-
<Steps
|
115
|
+
<Steps
|
116
|
+
size={size}
|
117
|
+
items={items}
|
118
|
+
onChange={onChange}
|
119
|
+
hasLoader={loading}
|
120
|
+
hasContent={hasContent}
|
121
|
+
{...rest}
|
122
|
+
/>
|
116
123
|
</div>
|
117
124
|
);
|
118
125
|
};
|
@@ -64,6 +64,8 @@ export var StepItem = function StepItem(_ref) {
|
|
64
64
|
resultIndicatorSize = isActive ? 16 : 8;
|
65
65
|
}
|
66
66
|
var indentToken = indicatorSizesIndentsMap[resultIndicatorSize];
|
67
|
+
|
68
|
+
// todo заменить на callback с условиями внутри
|
67
69
|
var onMouseOver = clickable && !isDisabled ? function () {
|
68
70
|
if (isDisabled) {
|
69
71
|
setIsHovered(false);
|
@@ -110,7 +112,7 @@ export var StepItem = function StepItem(_ref) {
|
|
110
112
|
onBlur: onMouseOut,
|
111
113
|
onMouseOver: onMouseOver,
|
112
114
|
onMouseOut: onMouseOut
|
113
|
-
}, title), content && /*#__PURE__*/React.createElement(StepItemContent, null, typeof content === 'function'
|
115
|
+
}, title), content && /*#__PURE__*/React.createElement(StepItemContent, null, typeof content === 'function' ? content(status, index, items) : content))), isSimple && !isLast && /*#__PURE__*/React.createElement(StepItemDivider, {
|
114
116
|
className: cls(classes.simple, _defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, isVertical), classes.transparentDivider, !hasLine), classes.inactive, isInactive || isNextInactive))
|
115
117
|
}));
|
116
118
|
};
|
@@ -112,7 +112,14 @@ const DefaultStory = (args) => {
|
|
112
112
|
|
113
113
|
return (
|
114
114
|
<div style={{ maxWidth }}>
|
115
|
-
<Steps
|
115
|
+
<Steps
|
116
|
+
size={size}
|
117
|
+
items={items}
|
118
|
+
onChange={onChange}
|
119
|
+
hasLoader={loading}
|
120
|
+
hasContent={hasContent}
|
121
|
+
{...rest}
|
122
|
+
/>
|
116
123
|
</div>
|
117
124
|
);
|
118
125
|
};
|
@@ -112,7 +112,14 @@ const DefaultStory = (args) => {
|
|
112
112
|
|
113
113
|
return (
|
114
114
|
<div style={{ maxWidth }}>
|
115
|
-
<Steps
|
115
|
+
<Steps
|
116
|
+
size={size}
|
117
|
+
items={items}
|
118
|
+
onChange={onChange}
|
119
|
+
hasLoader={loading}
|
120
|
+
hasContent={hasContent}
|
121
|
+
{...rest}
|
122
|
+
/>
|
116
123
|
</div>
|
117
124
|
);
|
118
125
|
};
|
@@ -55,6 +55,8 @@ var StepItem = function StepItem(_ref) {
|
|
55
55
|
resultIndicatorSize = isActive ? 16 : 8;
|
56
56
|
}
|
57
57
|
var indentToken = indicatorSizesIndentsMap[resultIndicatorSize];
|
58
|
+
|
59
|
+
// todo заменить на callback с условиями внутри
|
58
60
|
var onMouseOver = clickable && !isDisabled ? function () {
|
59
61
|
if (isDisabled) {
|
60
62
|
setIsHovered(false);
|
@@ -101,7 +103,7 @@ var StepItem = function StepItem(_ref) {
|
|
101
103
|
onBlur: onMouseOut,
|
102
104
|
onMouseOver: onMouseOver,
|
103
105
|
onMouseOut: onMouseOut
|
104
|
-
}, title), content && /*#__PURE__*/React.createElement(StepItemContent, null, typeof content === 'function'
|
106
|
+
}, title), content && /*#__PURE__*/React.createElement(StepItemContent, null, typeof content === 'function' ? content(status, index, items) : content))), isSimple && !isLast && /*#__PURE__*/React.createElement(StepItemDivider, {
|
105
107
|
className: cls(classes.simple, _defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, isVertical), classes.transparentDivider, !hasLine), classes.inactive, isInactive || isNextInactive))
|
106
108
|
}));
|
107
109
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"StepItem.js","sources":["../../../../../src/components/Steps/ui/StepItem/StepItem.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport cls from 'classnames';\n\nimport { classes, tokens } from '../../Steps.tokens';\nimport { StepsContent, StepsContentAlign, StepsOrientation } from '../../Steps.types';\n\nimport type { StepItemProps } from './StepItem.types';\nimport {\n Bullet,\n BulletIndicator,\n BulletIndicatorWrapper,\n StepItemContent,\n StepItemContentWrapper,\n StepItemDivider,\n StepItemStyled,\n StepItemTitle,\n SpinnerStyled,\n} from './StepItem.styles';\n\n// todo попробовать заменить через baseline выравнивание\nconst indicatorSizesIndentsMap = {\n 8: `var(${tokens.smallBulletIndentHeight})`,\n 16: `var(${tokens.largeBulletIndentHeight})`,\n 24: `var(${tokens.smallIndicatorIndentHeight})`,\n 36: `var(${tokens.largeIndicatorIndentHeight})`,\n} as const;\n\nexport const StepItem: React.FC<\n StepItemProps & {\n index: number;\n items: StepItemProps[];\n size: string;\n hasLine?: boolean;\n hasContent?: StepsContent;\n hasLoader?: boolean;\n isFirst?: boolean;\n isLast?: boolean;\n onClick?: (item: StepItemProps, index: number) => void;\n contentAlign?: StepsContentAlign;\n orientation?: StepsOrientation;\n }\n> = ({\n index,\n title,\n content,\n indicator,\n status = 'inactive',\n size,\n orientation,\n contentAlign,\n hasLine,\n hasLoader,\n onClick,\n items,\n}) => {\n const [isHovered, setIsHovered] = useState(false);\n\n const isFirst = index === 0;\n const isLast = index === items.length - 1;\n\n const prevItem = items[index - 1];\n const nextItem = items[index + 1];\n\n const isActive = status === 'active';\n const isInactive = status === 'inactive';\n const isPrevInactive = (prevItem && !prevItem?.status) || prevItem?.status === 'inactive';\n const isNextInactive = !nextItem?.status || nextItem?.status === 'inactive';\n\n const hasIndicator = indicator != null;\n\n const BulletNode = hasIndicator ? BulletIndicator : Bullet;\n\n const item = items[index];\n const isSimple = !title && !content;\n const clickable = Boolean(onClick);\n const isVertical = orientation === 'vertical';\n const isCentered = contentAlign === 'center';\n const isDisabled = item.disabled;\n\n const onClickHandler = onClick && !isDisabled ? () => onClick(item, index) : undefined;\n\n let resultIndicatorSize: keyof typeof indicatorSizesIndentsMap;\n if (hasIndicator) {\n resultIndicatorSize = isActive ? 36 : 24;\n } else {\n resultIndicatorSize = isActive ? 16 : 8;\n }\n\n const indentToken = indicatorSizesIndentsMap[resultIndicatorSize];\n\n const onMouseOver =\n clickable && !isDisabled\n ? () => {\n if (isDisabled) {\n setIsHovered(false);\n }\n\n setIsHovered(true);\n }\n : undefined;\n\n const onMouseOut =\n clickable && !isDisabled\n ? () => {\n setIsHovered(false);\n }\n : undefined;\n\n useEffect(() => {\n if (isDisabled) {\n setIsHovered(false);\n }\n }, [isDisabled]);\n\n return (\n <>\n <StepItemStyled\n className={cls({\n [classes.simple]: isSimple,\n [classes.active]: isActive,\n [classes.hovered]: isHovered && !isActive,\n [classes.inactive]: isInactive,\n [classes.centered]: isCentered,\n [classes.disabled]: isDisabled,\n [classes.clickable]: clickable && !isActive,\n [classes.hasIndicator]: hasIndicator,\n [classes.verticalOrientation]: isVertical,\n })}\n >\n <BulletIndicatorWrapper\n className={cls({\n [classes.verticalOrientation]: isVertical,\n [classes.centered]: isCentered,\n [classes.simple]: isSimple,\n [classes.hasIndicator]: hasIndicator,\n })}\n onClick={onClickHandler}\n onFocus={onMouseOver}\n onBlur={onMouseOut}\n onMouseOver={onMouseOver}\n onMouseOut={onMouseOut}\n >\n {contentAlign === 'center' && !isSimple && (\n <StepItemDivider\n className={cls({\n [classes.simple]: isSimple,\n [classes.transparentDivider]: !hasLine || isFirst,\n [classes.inactive]: isInactive || isPrevInactive,\n })}\n />\n )}\n\n {isVertical && (isSimple ? !isFirst : true) && (\n <StepItemDivider\n className={cls(classes.indentDivider, {\n [classes.simple]: isSimple,\n [classes.transparentDivider]: !hasLine || isFirst,\n [classes.inactive]: isInactive || isPrevInactive,\n })}\n indentToken={indentToken}\n />\n )}\n\n {hasLoader && <SpinnerStyled hasIndicator={hasIndicator} />}\n\n {!hasLoader && (\n <BulletNode\n className={cls({\n [classes.active]: isActive,\n [classes.inactive]: isInactive,\n })}\n >\n {typeof indicator === 'function' && indicator({ status, item, size })}\n {typeof indicator !== 'function' && indicator}\n </BulletNode>\n )}\n\n {!isSimple && (\n <StepItemDivider\n className={cls({\n [classes.simple]: isSimple,\n [classes.transparentDivider]: !hasLine || isLast,\n [classes.inactive]: isInactive || isNextInactive,\n })}\n />\n )}\n </BulletIndicatorWrapper>\n\n {!isSimple && (\n <StepItemContentWrapper\n className={cls({\n [classes.verticalOrientation]: isVertical,\n [classes.centered]: isCentered,\n [classes.active]: isActive,\n [classes.hasIndicator]: hasIndicator,\n })}\n >\n <StepItemTitle\n onClick={onClickHandler}\n onFocus={onMouseOver}\n onBlur={onMouseOut}\n onMouseOver={onMouseOver}\n onMouseOut={onMouseOut}\n >\n {title}\n </StepItemTitle>\n\n {content && (\n <StepItemContent>\n {typeof content === 'function' && content(status, index, items)}\n {typeof content !== 'function' && content}\n </StepItemContent>\n )}\n </StepItemContentWrapper>\n )}\n </StepItemStyled>\n {isSimple && !isLast && (\n <StepItemDivider\n className={cls(classes.simple, {\n [classes.verticalOrientation]: isVertical,\n [classes.transparentDivider]: !hasLine,\n [classes.inactive]: isInactive || isNextInactive,\n })}\n />\n )}\n </>\n );\n};\n"],"names":["indicatorSizesIndentsMap","concat","tokens","smallBulletIndentHeight","largeBulletIndentHeight","smallIndicatorIndentHeight","largeIndicatorIndentHeight","StepItem","_ref","index","title","content","indicator","_ref$status","status","size","orientation","contentAlign","hasLine","hasLoader","onClick","items","_useState","useState","_useState2","_slicedToArray","isHovered","setIsHovered","isFirst","isLast","length","prevItem","nextItem","isActive","isInactive","isPrevInactive","isNextInactive","hasIndicator","BulletNode","BulletIndicator","Bullet","item","isSimple","clickable","Boolean","isVertical","isCentered","isDisabled","disabled","onClickHandler","undefined","resultIndicatorSize","indentToken","onMouseOver","onMouseOut","useEffect","React","createElement","Fragment","StepItemStyled","className","cls","_defineProperty","classes","simple","active","hovered","inactive","centered","verticalOrientation","BulletIndicatorWrapper","onFocus","onBlur","StepItemDivider","transparentDivider","indentDivider","SpinnerStyled","StepItemContentWrapper","StepItemTitle","StepItemContent"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"StepItem.js","sources":["../../../../../src/components/Steps/ui/StepItem/StepItem.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport cls from 'classnames';\n\nimport { classes, tokens } from '../../Steps.tokens';\nimport { StepsContent, StepsContentAlign, StepsOrientation } from '../../Steps.types';\n\nimport type { StepItemProps } from './StepItem.types';\nimport {\n Bullet,\n BulletIndicator,\n BulletIndicatorWrapper,\n StepItemContent,\n StepItemContentWrapper,\n StepItemDivider,\n StepItemStyled,\n StepItemTitle,\n SpinnerStyled,\n} from './StepItem.styles';\n\n// todo попробовать заменить через baseline выравнивание\nconst indicatorSizesIndentsMap = {\n 8: `var(${tokens.smallBulletIndentHeight})`,\n 16: `var(${tokens.largeBulletIndentHeight})`,\n 24: `var(${tokens.smallIndicatorIndentHeight})`,\n 36: `var(${tokens.largeIndicatorIndentHeight})`,\n} as const;\n\nexport const StepItem: React.FC<\n StepItemProps & {\n index: number;\n items: StepItemProps[];\n size: string;\n hasLine?: boolean;\n hasContent?: StepsContent;\n hasLoader?: boolean;\n isFirst?: boolean;\n isLast?: boolean;\n onClick?: (item: StepItemProps, index: number) => void;\n contentAlign?: StepsContentAlign;\n orientation?: StepsOrientation;\n }\n> = ({\n index,\n title,\n content,\n indicator,\n status = 'inactive',\n size,\n orientation,\n contentAlign,\n hasLine,\n hasLoader,\n onClick,\n items,\n}) => {\n const [isHovered, setIsHovered] = useState(false);\n\n const isFirst = index === 0;\n const isLast = index === items.length - 1;\n\n const prevItem = items[index - 1];\n const nextItem = items[index + 1];\n\n const isActive = status === 'active';\n const isInactive = status === 'inactive';\n const isPrevInactive = (prevItem && !prevItem?.status) || prevItem?.status === 'inactive';\n const isNextInactive = !nextItem?.status || nextItem?.status === 'inactive';\n\n const hasIndicator = indicator != null;\n\n const BulletNode = hasIndicator ? BulletIndicator : Bullet;\n\n const item = items[index];\n const isSimple = !title && !content;\n const clickable = Boolean(onClick);\n const isVertical = orientation === 'vertical';\n const isCentered = contentAlign === 'center';\n const isDisabled = item.disabled;\n\n const onClickHandler = onClick && !isDisabled ? () => onClick(item, index) : undefined;\n\n let resultIndicatorSize: keyof typeof indicatorSizesIndentsMap;\n if (hasIndicator) {\n resultIndicatorSize = isActive ? 36 : 24;\n } else {\n resultIndicatorSize = isActive ? 16 : 8;\n }\n\n const indentToken = indicatorSizesIndentsMap[resultIndicatorSize];\n\n // todo заменить на callback с условиями внутри\n const onMouseOver =\n clickable && !isDisabled\n ? () => {\n if (isDisabled) {\n setIsHovered(false);\n }\n\n setIsHovered(true);\n }\n : undefined;\n\n const onMouseOut =\n clickable && !isDisabled\n ? () => {\n setIsHovered(false);\n }\n : undefined;\n\n useEffect(() => {\n if (isDisabled) {\n setIsHovered(false);\n }\n }, [isDisabled]);\n\n return (\n <>\n <StepItemStyled\n className={cls({\n [classes.simple]: isSimple,\n [classes.active]: isActive,\n [classes.hovered]: isHovered && !isActive,\n [classes.inactive]: isInactive,\n [classes.centered]: isCentered,\n [classes.disabled]: isDisabled,\n [classes.clickable]: clickable && !isActive,\n [classes.hasIndicator]: hasIndicator,\n [classes.verticalOrientation]: isVertical,\n })}\n >\n <BulletIndicatorWrapper\n className={cls({\n [classes.verticalOrientation]: isVertical,\n [classes.centered]: isCentered,\n [classes.simple]: isSimple,\n [classes.hasIndicator]: hasIndicator,\n })}\n onClick={onClickHandler}\n onFocus={onMouseOver}\n onBlur={onMouseOut}\n onMouseOver={onMouseOver}\n onMouseOut={onMouseOut}\n >\n {contentAlign === 'center' && !isSimple && (\n <StepItemDivider\n className={cls({\n [classes.simple]: isSimple,\n [classes.transparentDivider]: !hasLine || isFirst,\n [classes.inactive]: isInactive || isPrevInactive,\n })}\n />\n )}\n\n {isVertical && (isSimple ? !isFirst : true) && (\n <StepItemDivider\n className={cls(classes.indentDivider, {\n [classes.simple]: isSimple,\n [classes.transparentDivider]: !hasLine || isFirst,\n [classes.inactive]: isInactive || isPrevInactive,\n })}\n indentToken={indentToken}\n />\n )}\n\n {hasLoader && <SpinnerStyled hasIndicator={hasIndicator} />}\n\n {!hasLoader && (\n <BulletNode\n className={cls({\n [classes.active]: isActive,\n [classes.inactive]: isInactive,\n })}\n >\n {typeof indicator === 'function' && indicator({ status, item, size })}\n {typeof indicator !== 'function' && indicator}\n </BulletNode>\n )}\n\n {!isSimple && (\n <StepItemDivider\n className={cls({\n [classes.simple]: isSimple,\n [classes.transparentDivider]: !hasLine || isLast,\n [classes.inactive]: isInactive || isNextInactive,\n })}\n />\n )}\n </BulletIndicatorWrapper>\n\n {!isSimple && (\n <StepItemContentWrapper\n className={cls({\n [classes.verticalOrientation]: isVertical,\n [classes.centered]: isCentered,\n [classes.active]: isActive,\n [classes.hasIndicator]: hasIndicator,\n })}\n >\n <StepItemTitle\n onClick={onClickHandler}\n onFocus={onMouseOver}\n onBlur={onMouseOut}\n onMouseOver={onMouseOver}\n onMouseOut={onMouseOut}\n >\n {title}\n </StepItemTitle>\n\n {content && (\n <StepItemContent>\n {typeof content === 'function' ? content(status, index, items) : content}\n </StepItemContent>\n )}\n </StepItemContentWrapper>\n )}\n </StepItemStyled>\n {isSimple && !isLast && (\n <StepItemDivider\n className={cls(classes.simple, {\n [classes.verticalOrientation]: isVertical,\n [classes.transparentDivider]: !hasLine,\n [classes.inactive]: isInactive || isNextInactive,\n })}\n />\n )}\n </>\n );\n};\n"],"names":["indicatorSizesIndentsMap","concat","tokens","smallBulletIndentHeight","largeBulletIndentHeight","smallIndicatorIndentHeight","largeIndicatorIndentHeight","StepItem","_ref","index","title","content","indicator","_ref$status","status","size","orientation","contentAlign","hasLine","hasLoader","onClick","items","_useState","useState","_useState2","_slicedToArray","isHovered","setIsHovered","isFirst","isLast","length","prevItem","nextItem","isActive","isInactive","isPrevInactive","isNextInactive","hasIndicator","BulletNode","BulletIndicator","Bullet","item","isSimple","clickable","Boolean","isVertical","isCentered","isDisabled","disabled","onClickHandler","undefined","resultIndicatorSize","indentToken","onMouseOver","onMouseOut","useEffect","React","createElement","Fragment","StepItemStyled","className","cls","_defineProperty","classes","simple","active","hovered","inactive","centered","verticalOrientation","BulletIndicatorWrapper","onFocus","onBlur","StepItemDivider","transparentDivider","indentDivider","SpinnerStyled","StepItemContentWrapper","StepItemTitle","StepItemContent"],"mappings":"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"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@salutejs/plasma-new-hope",
|
3
|
-
"version": "0.159.0-canary.1443.
|
3
|
+
"version": "0.159.0-canary.1443.11140129684.0",
|
4
4
|
"description": "Salute Design System blueprint",
|
5
5
|
"main": "cjs/index.js",
|
6
6
|
"module": "es/index.js",
|
@@ -124,5 +124,5 @@
|
|
124
124
|
"react-popper": "2.3.0",
|
125
125
|
"storeon": "3.1.5"
|
126
126
|
},
|
127
|
-
"gitHead": "
|
127
|
+
"gitHead": "5c09cb7e77fffdf9c9b9520a5f39adb14c17a17d"
|
128
128
|
}
|
@@ -72,6 +72,8 @@ var StepItem = exports.StepItem = function StepItem(_ref) {
|
|
72
72
|
resultIndicatorSize = isActive ? 16 : 8;
|
73
73
|
}
|
74
74
|
var indentToken = indicatorSizesIndentsMap[resultIndicatorSize];
|
75
|
+
|
76
|
+
// todo заменить на callback с условиями внутри
|
75
77
|
var onMouseOver = clickable && !isDisabled ? function () {
|
76
78
|
if (isDisabled) {
|
77
79
|
setIsHovered(false);
|
@@ -118,7 +120,7 @@ var StepItem = exports.StepItem = function StepItem(_ref) {
|
|
118
120
|
onBlur: onMouseOut,
|
119
121
|
onMouseOver: onMouseOver,
|
120
122
|
onMouseOut: onMouseOut
|
121
|
-
}, title), content && /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemContent, null, typeof content === 'function'
|
123
|
+
}, title), content && /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemContent, null, typeof content === 'function' ? content(status, index, items) : content))), isSimple && !isLast && /*#__PURE__*/_react["default"].createElement(_StepItem.StepItemDivider, {
|
122
124
|
className: (0, _classnames["default"])(_Steps.classes.simple, _defineProperty(_defineProperty(_defineProperty({}, _Steps.classes.verticalOrientation, isVertical), _Steps.classes.transparentDivider, !hasLine), _Steps.classes.inactive, isInactive || isNextInactive))
|
123
125
|
}));
|
124
126
|
};
|
@@ -112,7 +112,14 @@ const DefaultStory = (args) => {
|
|
112
112
|
|
113
113
|
return (
|
114
114
|
<div style={{ maxWidth }}>
|
115
|
-
<Steps
|
115
|
+
<Steps
|
116
|
+
size={size}
|
117
|
+
items={items}
|
118
|
+
onChange={onChange}
|
119
|
+
hasLoader={loading}
|
120
|
+
hasContent={hasContent}
|
121
|
+
{...rest}
|
122
|
+
/>
|
116
123
|
</div>
|
117
124
|
);
|
118
125
|
};
|
@@ -112,7 +112,14 @@ const DefaultStory = (args) => {
|
|
112
112
|
|
113
113
|
return (
|
114
114
|
<div style={{ maxWidth }}>
|
115
|
-
<Steps
|
115
|
+
<Steps
|
116
|
+
size={size}
|
117
|
+
items={items}
|
118
|
+
onChange={onChange}
|
119
|
+
hasLoader={loading}
|
120
|
+
hasContent={hasContent}
|
121
|
+
{...rest}
|
122
|
+
/>
|
116
123
|
</div>
|
117
124
|
);
|
118
125
|
};
|
@@ -64,6 +64,8 @@ export var StepItem = function StepItem(_ref) {
|
|
64
64
|
resultIndicatorSize = isActive ? 16 : 8;
|
65
65
|
}
|
66
66
|
var indentToken = indicatorSizesIndentsMap[resultIndicatorSize];
|
67
|
+
|
68
|
+
// todo заменить на callback с условиями внутри
|
67
69
|
var onMouseOver = clickable && !isDisabled ? function () {
|
68
70
|
if (isDisabled) {
|
69
71
|
setIsHovered(false);
|
@@ -110,7 +112,7 @@ export var StepItem = function StepItem(_ref) {
|
|
110
112
|
onBlur: onMouseOut,
|
111
113
|
onMouseOver: onMouseOver,
|
112
114
|
onMouseOut: onMouseOut
|
113
|
-
}, title), content && /*#__PURE__*/React.createElement(StepItemContent, null, typeof content === 'function'
|
115
|
+
}, title), content && /*#__PURE__*/React.createElement(StepItemContent, null, typeof content === 'function' ? content(status, index, items) : content))), isSimple && !isLast && /*#__PURE__*/React.createElement(StepItemDivider, {
|
114
116
|
className: cls(classes.simple, _defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, isVertical), classes.transparentDivider, !hasLine), classes.inactive, isInactive || isNextInactive))
|
115
117
|
}));
|
116
118
|
};
|
@@ -112,7 +112,14 @@ const DefaultStory = (args) => {
|
|
112
112
|
|
113
113
|
return (
|
114
114
|
<div style={{ maxWidth }}>
|
115
|
-
<Steps
|
115
|
+
<Steps
|
116
|
+
size={size}
|
117
|
+
items={items}
|
118
|
+
onChange={onChange}
|
119
|
+
hasLoader={loading}
|
120
|
+
hasContent={hasContent}
|
121
|
+
{...rest}
|
122
|
+
/>
|
116
123
|
</div>
|
117
124
|
);
|
118
125
|
};
|
@@ -112,7 +112,14 @@ const DefaultStory = (args) => {
|
|
112
112
|
|
113
113
|
return (
|
114
114
|
<div style={{ maxWidth }}>
|
115
|
-
<Steps
|
115
|
+
<Steps
|
116
|
+
size={size}
|
117
|
+
items={items}
|
118
|
+
onChange={onChange}
|
119
|
+
hasLoader={loading}
|
120
|
+
hasContent={hasContent}
|
121
|
+
{...rest}
|
122
|
+
/>
|
116
123
|
</div>
|
117
124
|
);
|
118
125
|
};
|
@@ -1,5 +1,10 @@
|
|
1
1
|
import { ReactNode } from 'react';
|
2
2
|
export declare type StepStatus = 'active' | 'inactive' | 'completed';
|
3
|
+
declare type StepIndicatorFunc = ({ status, item, size, }: {
|
4
|
+
status: StepStatus;
|
5
|
+
item: StepItemProps;
|
6
|
+
size: string;
|
7
|
+
}) => ReactNode;
|
3
8
|
export interface StepItemProps {
|
4
9
|
/**
|
5
10
|
* Заголовок
|
@@ -12,11 +17,7 @@ export interface StepItemProps {
|
|
12
17
|
/**
|
13
18
|
* Индикатор шага, может быть как React компонентом, так и функцией
|
14
19
|
*/
|
15
|
-
indicator?: number | string | ReactNode |
|
16
|
-
status: StepStatus;
|
17
|
-
item: StepItemProps;
|
18
|
-
size: string;
|
19
|
-
}) => ReactNode);
|
20
|
+
indicator?: number | string | ReactNode | StepIndicatorFunc;
|
20
21
|
/**
|
21
22
|
* Статус шага
|
22
23
|
* @description
|
@@ -31,4 +32,5 @@ export interface StepItemProps {
|
|
31
32
|
*/
|
32
33
|
disabled?: boolean;
|
33
34
|
}
|
35
|
+
export {};
|
34
36
|
//# sourceMappingURL=StepItem.types.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"StepItem.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Steps/ui/StepItem/StepItem.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,oBAAY,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,WAAW,CAAC;AAE7D,MAAM,WAAW,aAAa;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,CAAC,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,SAAS,CAAC,CAAC;IAC1G;;OAEG;IACH,SAAS,CAAC,
|
1
|
+
{"version":3,"file":"StepItem.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Steps/ui/StepItem/StepItem.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,oBAAY,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,WAAW,CAAC;AAE7D,aAAK,iBAAiB,GAAG,CAAC,EACtB,MAAM,EACN,IAAI,EACJ,IAAI,GACP,EAAE;IACC,MAAM,EAAE,UAAU,CAAC;IACnB,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;CAChB,KAAK,SAAS,CAAC;AAEhB,MAAM,WAAW,aAAa;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,CAAC,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,SAAS,CAAC,CAAC;IAC1G;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,iBAAiB,CAAC;IAC5D;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB"}
|