@salutejs/plasma-new-hope 0.193.0-canary.1550.11805988388.0 → 0.193.0-canary.1556.11815100174.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Autocomplete/Autocomplete.css +17 -17
- package/cjs/components/Autocomplete/Autocomplete.js +7 -1
- package/cjs/components/Autocomplete/Autocomplete.js.map +1 -1
- package/cjs/components/Combobox/ComboboxNew/Combobox.css +17 -17
- package/cjs/components/Combobox/ComboboxNew/Combobox.js +7 -2
- package/cjs/components/Combobox/ComboboxNew/Combobox.js.map +1 -1
- package/cjs/components/Combobox/ComboboxNew/ui/Inner/Inner.css +17 -17
- package/cjs/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.css +17 -17
- package/cjs/components/DatePicker/RangeDate/RangeDate.css +17 -17
- package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +17 -17
- package/cjs/components/DatePicker/SingleDate/SingleDate.css +17 -17
- package/cjs/components/DatePicker/SingleDate/SingleDate.js +9 -4
- package/cjs/components/DatePicker/SingleDate/SingleDate.js.map +1 -1
- package/cjs/components/Pagination/Pagination.css +17 -17
- package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +17 -17
- package/cjs/components/Range/Range.css +17 -17
- package/cjs/components/Select/Select.css +17 -17
- package/cjs/components/Select/ui/Inner/Inner.css +17 -17
- package/cjs/components/Select/ui/Inner/ui/Item/Item.css +17 -17
- package/cjs/components/Select/ui/Target/Target.css +17 -17
- package/cjs/components/Select/ui/Target/Target.js +7 -0
- package/cjs/components/Select/ui/Target/Target.js.map +1 -1
- package/cjs/components/Select/ui/Target/ui/Button/Button.js +1 -3
- package/cjs/components/Select/ui/Target/ui/Button/Button.js.map +1 -1
- package/cjs/components/Select/ui/Target/ui/Textfield/Textfield.css +17 -17
- package/cjs/components/Slider/Slider.css +17 -17
- package/cjs/components/Slider/components/Double/Double.css +17 -17
- package/cjs/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.css +17 -17
- package/cjs/components/Steps/Steps.css +10 -10
- package/cjs/components/Steps/Steps.js +21 -14
- package/cjs/components/Steps/Steps.js.map +1 -1
- package/cjs/components/Steps/Steps.styles.js +1 -1
- package/cjs/components/Steps/Steps.styles.js.map +1 -1
- package/cjs/components/Steps/{Steps.styles_1xmqxqu.css → Steps.styles_wa45kj.css} +1 -1
- package/cjs/components/Steps/Steps.tokens.js +1 -0
- package/cjs/components/Steps/Steps.tokens.js.map +1 -1
- package/cjs/components/Steps/ui/StepItem/StepItem.css +9 -9
- package/cjs/components/Steps/ui/StepItem/StepItem.js +32 -8
- package/cjs/components/Steps/ui/StepItem/StepItem.js.map +1 -1
- package/cjs/components/Steps/ui/StepItem/StepItem.styles.js +6 -6
- package/cjs/components/Steps/ui/StepItem/StepItem.styles.js.map +1 -1
- package/cjs/components/Steps/ui/StepItem/StepItem.styles_acxstj.css +9 -0
- package/cjs/components/TextField/TextField.js +8 -4
- package/cjs/components/TextField/TextField.js.map +1 -1
- package/cjs/components/TextField/TextField.styles.js +20 -11
- package/cjs/components/TextField/TextField.styles.js.map +1 -1
- package/cjs/components/TextField/{TextField.styles_j7dqpn.css → TextField.styles_ppcxpx.css} +1 -1
- package/cjs/components/TextField/TextField.tokens.js +1 -0
- package/cjs/components/TextField/TextField.tokens.js.map +1 -1
- package/cjs/components/TextField/ui/Hint/Hint.css +20 -20
- package/cjs/components/TextField/variations/_label-placement/base.js +1 -1
- package/cjs/components/TextField/variations/_label-placement/base.js.map +1 -1
- package/cjs/components/TextField/variations/_label-placement/base_y1lvvc.css +1 -0
- package/cjs/index.css +28 -28
- package/emotion/cjs/components/Autocomplete/Autocomplete.js +7 -1
- package/emotion/cjs/components/Combobox/ComboboxNew/Combobox.js +7 -2
- package/emotion/cjs/components/DatePicker/SingleDate/SingleDate.js +9 -4
- package/emotion/cjs/components/Select/ui/Target/Target.js +7 -0
- package/emotion/cjs/components/Select/ui/Target/ui/Button/Button.js +1 -3
- package/emotion/cjs/components/Steps/Steps.js +23 -14
- package/emotion/cjs/components/Steps/Steps.styles.js +1 -1
- package/emotion/cjs/components/Steps/Steps.tokens.js +1 -0
- package/emotion/cjs/components/Steps/ui/StepItem/StepItem.js +32 -8
- package/emotion/cjs/components/Steps/ui/StepItem/StepItem.styles.js +22 -11
- package/emotion/cjs/components/TextField/TextField.js +9 -5
- package/emotion/cjs/components/TextField/TextField.styles.js +29 -26
- package/emotion/cjs/components/TextField/TextField.tokens.js +1 -0
- package/emotion/cjs/components/TextField/variations/_label-placement/base.js +1 -1
- package/emotion/cjs/examples/plasma_b2c/components/Steps/Steps.config.js +5 -5
- package/emotion/cjs/examples/plasma_b2c/components/Steps/Steps.stories.tsx +1 -1
- package/emotion/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +7 -0
- package/emotion/cjs/examples/plasma_web/components/Steps/Steps.config.js +5 -5
- package/emotion/cjs/examples/plasma_web/components/Steps/Steps.stories.tsx +1 -1
- package/emotion/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +9 -2
- package/emotion/es/components/Autocomplete/Autocomplete.js +7 -1
- package/emotion/es/components/Combobox/ComboboxNew/Combobox.js +7 -2
- package/emotion/es/components/DatePicker/SingleDate/SingleDate.js +9 -4
- package/emotion/es/components/Select/ui/Target/Target.js +7 -0
- package/emotion/es/components/Select/ui/Target/ui/Button/Button.js +1 -3
- package/emotion/es/components/Steps/Steps.js +24 -15
- package/emotion/es/components/Steps/Steps.styles.js +1 -1
- package/emotion/es/components/Steps/Steps.tokens.js +1 -0
- package/emotion/es/components/Steps/ui/StepItem/StepItem.js +32 -8
- package/emotion/es/components/Steps/ui/StepItem/StepItem.styles.js +22 -11
- package/emotion/es/components/TextField/TextField.js +9 -5
- package/emotion/es/components/TextField/TextField.styles.js +29 -26
- package/emotion/es/components/TextField/TextField.tokens.js +1 -0
- package/emotion/es/components/TextField/variations/_label-placement/base.js +1 -1
- package/emotion/es/examples/plasma_b2c/components/Steps/Steps.config.js +5 -5
- package/emotion/es/examples/plasma_b2c/components/Steps/Steps.stories.tsx +1 -1
- package/emotion/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +7 -0
- package/emotion/es/examples/plasma_web/components/Steps/Steps.config.js +5 -5
- package/emotion/es/examples/plasma_web/components/Steps/Steps.stories.tsx +1 -1
- package/emotion/es/examples/plasma_web/components/TextField/TextField.stories.tsx +9 -2
- package/es/components/Autocomplete/Autocomplete.css +17 -17
- package/es/components/Autocomplete/Autocomplete.js +7 -1
- package/es/components/Autocomplete/Autocomplete.js.map +1 -1
- package/es/components/Combobox/ComboboxNew/Combobox.css +17 -17
- package/es/components/Combobox/ComboboxNew/Combobox.js +7 -2
- package/es/components/Combobox/ComboboxNew/Combobox.js.map +1 -1
- package/es/components/Combobox/ComboboxNew/ui/Inner/Inner.css +17 -17
- package/es/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.css +17 -17
- package/es/components/DatePicker/RangeDate/RangeDate.css +17 -17
- package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +17 -17
- package/es/components/DatePicker/SingleDate/SingleDate.css +17 -17
- package/es/components/DatePicker/SingleDate/SingleDate.js +9 -4
- package/es/components/DatePicker/SingleDate/SingleDate.js.map +1 -1
- package/es/components/Pagination/Pagination.css +17 -17
- package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +17 -17
- package/es/components/Range/Range.css +17 -17
- package/es/components/Select/Select.css +17 -17
- package/es/components/Select/ui/Inner/Inner.css +17 -17
- package/es/components/Select/ui/Inner/ui/Item/Item.css +17 -17
- package/es/components/Select/ui/Target/Target.css +17 -17
- package/es/components/Select/ui/Target/Target.js +7 -0
- package/es/components/Select/ui/Target/Target.js.map +1 -1
- package/es/components/Select/ui/Target/ui/Button/Button.js +1 -3
- package/es/components/Select/ui/Target/ui/Button/Button.js.map +1 -1
- package/es/components/Select/ui/Target/ui/Textfield/Textfield.css +17 -17
- package/es/components/Slider/Slider.css +17 -17
- package/es/components/Slider/components/Double/Double.css +17 -17
- package/es/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.css +17 -17
- package/es/components/Steps/Steps.css +10 -10
- package/es/components/Steps/Steps.js +23 -16
- package/es/components/Steps/Steps.js.map +1 -1
- package/es/components/Steps/Steps.styles.js +1 -1
- package/es/components/Steps/Steps.styles.js.map +1 -1
- package/es/components/Steps/{Steps.styles_1xmqxqu.css → Steps.styles_wa45kj.css} +1 -1
- package/es/components/Steps/Steps.tokens.js +1 -0
- package/es/components/Steps/Steps.tokens.js.map +1 -1
- package/es/components/Steps/ui/StepItem/StepItem.css +9 -9
- package/es/components/Steps/ui/StepItem/StepItem.js +33 -9
- package/es/components/Steps/ui/StepItem/StepItem.js.map +1 -1
- package/es/components/Steps/ui/StepItem/StepItem.styles.js +6 -6
- package/es/components/Steps/ui/StepItem/StepItem.styles.js.map +1 -1
- package/es/components/Steps/ui/StepItem/StepItem.styles_acxstj.css +9 -0
- package/es/components/TextField/TextField.js +8 -4
- package/es/components/TextField/TextField.js.map +1 -1
- package/es/components/TextField/TextField.styles.js +20 -11
- package/es/components/TextField/TextField.styles.js.map +1 -1
- package/es/components/TextField/{TextField.styles_j7dqpn.css → TextField.styles_ppcxpx.css} +1 -1
- package/es/components/TextField/TextField.tokens.js +1 -0
- package/es/components/TextField/TextField.tokens.js.map +1 -1
- package/es/components/TextField/ui/Hint/Hint.css +20 -20
- package/es/components/TextField/variations/_label-placement/base.js +1 -1
- package/es/components/TextField/variations/_label-placement/base.js.map +1 -1
- package/es/components/TextField/variations/_label-placement/base_y1lvvc.css +1 -0
- package/es/index.css +28 -28
- package/package.json +2 -2
- package/styled-components/cjs/components/Autocomplete/Autocomplete.js +7 -1
- package/styled-components/cjs/components/Combobox/ComboboxNew/Combobox.js +7 -2
- package/styled-components/cjs/components/DatePicker/SingleDate/SingleDate.js +9 -4
- package/styled-components/cjs/components/Select/ui/Target/Target.js +7 -0
- package/styled-components/cjs/components/Select/ui/Target/ui/Button/Button.js +1 -3
- package/styled-components/cjs/components/Steps/Steps.js +23 -14
- package/styled-components/cjs/components/Steps/Steps.styles.js +1 -1
- package/styled-components/cjs/components/Steps/Steps.tokens.js +1 -0
- package/styled-components/cjs/components/Steps/ui/StepItem/StepItem.js +32 -8
- package/styled-components/cjs/components/Steps/ui/StepItem/StepItem.styles.js +17 -6
- package/styled-components/cjs/components/TextField/TextField.js +8 -4
- package/styled-components/cjs/components/TextField/TextField.styles.js +9 -6
- package/styled-components/cjs/components/TextField/TextField.tokens.js +1 -0
- package/styled-components/cjs/components/TextField/variations/_label-placement/base.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Steps/Steps.config.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Steps/Steps.stories.tsx +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +7 -0
- package/styled-components/cjs/examples/plasma_web/components/Steps/Steps.config.js +1 -1
- package/styled-components/cjs/examples/plasma_web/components/Steps/Steps.stories.tsx +1 -1
- package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +9 -2
- package/styled-components/es/components/Autocomplete/Autocomplete.js +7 -1
- package/styled-components/es/components/Combobox/ComboboxNew/Combobox.js +7 -2
- package/styled-components/es/components/DatePicker/SingleDate/SingleDate.js +9 -4
- package/styled-components/es/components/Select/ui/Target/Target.js +7 -0
- package/styled-components/es/components/Select/ui/Target/ui/Button/Button.js +1 -3
- package/styled-components/es/components/Steps/Steps.js +24 -15
- package/styled-components/es/components/Steps/Steps.styles.js +1 -1
- package/styled-components/es/components/Steps/Steps.tokens.js +1 -0
- package/styled-components/es/components/Steps/ui/StepItem/StepItem.js +32 -8
- package/styled-components/es/components/Steps/ui/StepItem/StepItem.styles.js +17 -6
- package/styled-components/es/components/TextField/TextField.js +8 -4
- package/styled-components/es/components/TextField/TextField.styles.js +9 -6
- package/styled-components/es/components/TextField/TextField.tokens.js +1 -0
- package/styled-components/es/components/TextField/variations/_label-placement/base.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Steps/Steps.config.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Steps/Steps.stories.tsx +1 -1
- package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +7 -0
- package/styled-components/es/examples/plasma_web/components/Steps/Steps.config.js +1 -1
- package/styled-components/es/examples/plasma_web/components/Steps/Steps.stories.tsx +1 -1
- package/styled-components/es/examples/plasma_web/components/TextField/TextField.stories.tsx +9 -2
- package/types/components/Autocomplete/Autocomplete.d.ts.map +1 -1
- package/types/components/Autocomplete/ui/TextField/TextField.styles.d.ts +717 -61
- package/types/components/Autocomplete/ui/TextField/TextField.styles.d.ts.map +1 -1
- package/types/components/Combobox/ComboboxNew/Combobox.d.ts.map +1 -1
- package/types/components/Combobox/ComboboxNew/Combobox.types.d.ts +30 -10
- package/types/components/Combobox/ComboboxNew/Combobox.types.d.ts.map +1 -1
- package/types/components/Combobox/ComboboxNew/ui/Target/Target.styles.d.ts +717 -61
- package/types/components/Combobox/ComboboxNew/ui/Target/Target.styles.d.ts.map +1 -1
- package/types/components/DatePicker/SingleDate/SingleDate.d.ts +2 -2
- package/types/components/DatePicker/SingleDate/SingleDate.d.ts.map +1 -1
- package/types/components/DatePicker/SingleDate/SingleDate.styles.d.ts +717 -61
- package/types/components/DatePicker/SingleDate/SingleDate.styles.d.ts.map +1 -1
- package/types/components/DatePicker/SingleDate/SingleDate.types.d.ts +28 -9
- package/types/components/DatePicker/SingleDate/SingleDate.types.d.ts.map +1 -1
- package/types/components/Range/Range.styles.d.ts +717 -61
- package/types/components/Range/Range.styles.d.ts.map +1 -1
- package/types/components/Select/ui/Target/Target.d.ts.map +1 -1
- package/types/components/Select/ui/Target/ui/Button/Button.d.ts.map +1 -1
- package/types/components/Select/ui/Target/ui/Textfield/Textfield.styles.d.ts +717 -61
- package/types/components/Select/ui/Target/ui/Textfield/Textfield.styles.d.ts.map +1 -1
- package/types/components/Slider/components/Double/Double.styles.d.ts +717 -61
- package/types/components/Slider/components/Double/Double.styles.d.ts.map +1 -1
- package/types/components/Steps/Steps.d.ts.map +1 -1
- package/types/components/Steps/Steps.styles.d.ts.map +1 -1
- package/types/components/Steps/Steps.tokens.d.ts +1 -0
- package/types/components/Steps/Steps.tokens.d.ts.map +1 -1
- package/types/components/Steps/ui/StepItem/StepItem.d.ts.map +1 -1
- package/types/components/Steps/ui/StepItem/StepItem.styles.d.ts +2 -2
- package/types/components/Steps/ui/StepItem/StepItem.styles.d.ts.map +1 -1
- package/types/components/TextField/TextField.d.ts.map +1 -1
- package/types/components/TextField/TextField.styles.d.ts +3 -1
- package/types/components/TextField/TextField.styles.d.ts.map +1 -1
- package/types/components/TextField/TextField.tokens.d.ts +1 -0
- package/types/components/TextField/TextField.tokens.d.ts.map +1 -1
- package/types/components/TextField/TextField.types.d.ts +43 -20
- package/types/components/TextField/TextField.types.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Autocomplete/Autocomplete.d.ts +2 -4
- package/types/examples/plasma_b2c/components/Autocomplete/Autocomplete.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Combobox/Combobox.d.ts +1021 -109
- package/types/examples/plasma_b2c/components/Combobox/Combobox.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/DatePicker/DatePicker.d.ts +47 -1
- package/types/examples/plasma_b2c/components/DatePicker/DatePicker.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Mask/Mask.d.ts +1246 -62
- package/types/examples/plasma_b2c/components/Mask/Mask.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Steps/Steps.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/TextField/TextField.d.ts +717 -61
- package/types/examples/plasma_b2c/components/TextField/TextField.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Autocomplete/Autocomplete.d.ts +2 -4
- package/types/examples/plasma_web/components/Autocomplete/Autocomplete.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Combobox/Combobox.d.ts +1021 -109
- package/types/examples/plasma_web/components/Combobox/Combobox.d.ts.map +1 -1
- package/types/examples/plasma_web/components/DatePicker/DatePicker.d.ts +47 -1
- package/types/examples/plasma_web/components/DatePicker/DatePicker.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Mask/Mask.d.ts +1246 -62
- package/types/examples/plasma_web/components/Mask/Mask.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Steps/Steps.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/TextField/TextField.d.ts +717 -61
- package/types/examples/plasma_web/components/TextField/TextField.d.ts.map +1 -1
- package/cjs/components/Steps/ui/StepItem/StepItem.styles_sp9rcd.css +0 -9
- package/cjs/components/TextField/variations/_label-placement/base_gttvto.css +0 -1
- package/es/components/Steps/ui/StepItem/StepItem.styles_sp9rcd.css +0 -9
- package/es/components/TextField/variations/_label-placement/base_gttvto.css +0 -1
@@ -43,6 +43,7 @@ export var StepItem = function StepItem(_ref) {
|
|
43
43
|
var prevItem = items[index - 1];
|
44
44
|
var nextItem = items[index + 1];
|
45
45
|
var isActive = status === 'active';
|
46
|
+
var isNextActive = (nextItem === null || nextItem === void 0 ? void 0 : nextItem.status) === 'active';
|
46
47
|
var isInactive = status === 'inactive';
|
47
48
|
var isPrevInactive = prevItem && !(prevItem !== null && prevItem !== void 0 && prevItem.status) || (prevItem === null || prevItem === void 0 ? void 0 : prevItem.status) === 'inactive';
|
48
49
|
var isNextInactive = !(nextItem !== null && nextItem !== void 0 && nextItem.status) || (nextItem === null || nextItem === void 0 ? void 0 : nextItem.status) === 'inactive';
|
@@ -80,8 +81,32 @@ export var StepItem = function StepItem(_ref) {
|
|
80
81
|
setIsHovered(false);
|
81
82
|
}
|
82
83
|
}, [isDisabled]);
|
84
|
+
if (isSimple) {
|
85
|
+
var _cls;
|
86
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StepItemStyled, {
|
87
|
+
className: cls((_cls = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_cls, classes.simple, isSimple), classes.active, isActive), classes.hovered, isHovered && !isActive), classes.inactive, isInactive), classes.centered, isCentered), classes.disabled, isDisabled), classes.clickable, clickable && !isActive), classes.hasIndicator, hasIndicator), classes.transparentDivider, !hasLine), classes.verticalOrientation, isVertical), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_cls, "isFirst", isFirst), "isLast", isLast), "isPrevInactive", isPrevInactive), "isNextInactive", isNextInactive)))
|
88
|
+
}, /*#__PURE__*/React.createElement(BulletIndicatorWrapper, {
|
89
|
+
className: cls(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, isVertical), classes.centered, isCentered), classes.simple, isSimple), classes.hasIndicator, hasIndicator)),
|
90
|
+
onClick: onClickHandler,
|
91
|
+
onFocus: onMouseOver,
|
92
|
+
onBlur: onMouseOut,
|
93
|
+
onMouseOver: onMouseOver,
|
94
|
+
onMouseOut: onMouseOut
|
95
|
+
}, hasLoader && /*#__PURE__*/React.createElement(SpinnerStyled, {
|
96
|
+
hasIndicator: hasIndicator
|
97
|
+
}), !hasLoader && /*#__PURE__*/React.createElement(BulletNode, {
|
98
|
+
className: cls(_defineProperty(_defineProperty({}, classes.active, isActive), classes.inactive, isInactive)),
|
99
|
+
disabled: isDisabled
|
100
|
+
}, typeof indicator === 'function' && indicator({
|
101
|
+
status: status,
|
102
|
+
item: item,
|
103
|
+
size: size
|
104
|
+
}), typeof indicator !== 'function' && indicator))), !isLast && /*#__PURE__*/React.createElement(StepItemDivider, {
|
105
|
+
className: cls(classes.simple, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, isVertical), classes.transparentDivider, !hasLine), classes.active, isActive), classes.inactive, isInactive || isNextInactive), classes.disabled, isDisabled))
|
106
|
+
}));
|
107
|
+
}
|
83
108
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StepItemStyled, {
|
84
|
-
className: cls(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classes.simple, isSimple), classes.active, isActive), classes.hovered, isHovered && !isActive), classes.inactive, isInactive), classes.centered, isCentered), classes.disabled, isDisabled), classes.clickable, clickable && !isActive), classes.hasIndicator, hasIndicator), classes.verticalOrientation, isVertical))
|
109
|
+
className: cls(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classes.simple, isSimple), classes.active, isActive), classes.hovered, isHovered && !isActive), classes.inactive, isInactive), classes.centered, isCentered), classes.disabled, isDisabled), classes.clickable, clickable && !isActive), classes.hasIndicator, hasIndicator), classes.verticalOrientation, isVertical), "isNextActive", isNextActive))
|
85
110
|
}, /*#__PURE__*/React.createElement(BulletIndicatorWrapper, {
|
86
111
|
className: cls(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, isVertical), classes.centered, isCentered), classes.simple, isSimple), classes.hasIndicator, hasIndicator)),
|
87
112
|
onClick: onClickHandler,
|
@@ -91,20 +116,21 @@ export var StepItem = function StepItem(_ref) {
|
|
91
116
|
onMouseOut: onMouseOut
|
92
117
|
}, contentAlign === 'center' && !isSimple && /*#__PURE__*/React.createElement(StepItemDivider, {
|
93
118
|
className: cls(_defineProperty(_defineProperty(_defineProperty({}, classes.simple, isSimple), classes.transparentDivider, !hasLine || isFirst), classes.inactive, isInactive || isPrevInactive))
|
94
|
-
}), isVertical &&
|
119
|
+
}), isVertical && /*#__PURE__*/React.createElement(StepItemDivider, {
|
95
120
|
className: cls(classes.indentDivider, _defineProperty(_defineProperty(_defineProperty({}, classes.simple, isSimple), classes.transparentDivider, !hasLine || isFirst), classes.inactive, isInactive || isPrevInactive)),
|
96
121
|
indentToken: indentToken
|
97
122
|
}), hasLoader && /*#__PURE__*/React.createElement(SpinnerStyled, {
|
98
123
|
hasIndicator: hasIndicator
|
99
124
|
}), !hasLoader && /*#__PURE__*/React.createElement(BulletNode, {
|
100
|
-
className: cls(_defineProperty(_defineProperty({}, classes.active, isActive), classes.inactive, isInactive))
|
125
|
+
className: cls(_defineProperty(_defineProperty({}, classes.active, isActive), classes.inactive, isInactive)),
|
126
|
+
disabled: isDisabled
|
101
127
|
}, typeof indicator === 'function' && indicator({
|
102
128
|
status: status,
|
103
129
|
item: item,
|
104
130
|
size: size
|
105
|
-
}), typeof indicator !== 'function' && indicator),
|
131
|
+
}), typeof indicator !== 'function' && indicator), /*#__PURE__*/React.createElement(StepItemDivider, {
|
106
132
|
className: cls(_defineProperty(_defineProperty(_defineProperty({}, classes.simple, isSimple), classes.transparentDivider, !hasLine || isLast), classes.inactive, isInactive || isNextInactive))
|
107
|
-
})),
|
133
|
+
})), /*#__PURE__*/React.createElement(StepItemContentWrapper, {
|
108
134
|
className: cls(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, isVertical), classes.centered, isCentered), classes.active, isActive), classes.hasIndicator, hasIndicator))
|
109
135
|
}, /*#__PURE__*/React.createElement(StepItemTitle, {
|
110
136
|
onClick: onClickHandler,
|
@@ -112,7 +138,5 @@ export var StepItem = function StepItem(_ref) {
|
|
112
138
|
onBlur: onMouseOut,
|
113
139
|
onMouseOver: onMouseOver,
|
114
140
|
onMouseOut: onMouseOut
|
115
|
-
}, title), content && /*#__PURE__*/React.createElement(StepItemContent, null, typeof content === 'function' ? content(status, index, items) : content)))
|
116
|
-
className: cls(classes.simple, _defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, isVertical), classes.transparentDivider, !hasLine), classes.inactive, isInactive || isNextInactive))
|
117
|
-
}));
|
141
|
+
}, title), content && /*#__PURE__*/React.createElement(StepItemContent, null, typeof content === 'function' ? content(status, index, items) : content))));
|
118
142
|
};
|
@@ -2,6 +2,7 @@ import styled from 'styled-components';
|
|
2
2
|
import { classes, tokens } from '../../Steps.tokens';
|
3
3
|
import { component, mergeConfig } from '../../../../engines';
|
4
4
|
import { spinnerConfig, spinnerTokens } from '../../../Spinner';
|
5
|
+
import { addFocus } from '../../../../mixins';
|
5
6
|
var mergedConfig = /*#__PURE__*/mergeConfig(spinnerConfig);
|
6
7
|
var Spinner = /*#__PURE__*/component(mergedConfig);
|
7
8
|
export var SpinnerStyled = /*#__PURE__*/styled(Spinner).withConfig({
|
@@ -18,16 +19,26 @@ export var StepItemContent = /*#__PURE__*/styled.div.withConfig({
|
|
18
19
|
})(["padding-top:var(", ");padding-right:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");word-break:break-word;color:var(", ");"], tokens.contentPaddingTop, tokens.contentSidePadding, tokens.contentFontFamily, tokens.contentFontSize, tokens.contentFontStyle, tokens.contentFontWeight, tokens.contentLetterSpacing, tokens.contentLineHeight, tokens.contentColor);
|
19
20
|
export var BulletIndicatorWrapper = /*#__PURE__*/styled.div.withConfig({
|
20
21
|
componentId: "plasma-new-hope__sc-bjma6z-3"
|
21
|
-
})(["display:flex;align-items:center;&:not(.", "){flex:0;&.", "{width:100%;min-height:var(", ");}&:not(.", "){width:100%;min-height:var(", ");}&.", "{padding-right:var(", ");}}&.", "{flex-direction:column;align-items:center;justify-content:center
|
22
|
-
export var BulletIndicator = /*#__PURE__*/styled.
|
22
|
+
})(["display:flex;align-items:center;&:not(.", "){flex:0;&.", "{width:100%;min-height:var(", ");}&:not(.", "){width:100%;min-height:var(", ");}&.", "{padding-right:var(", ");}}&.", "{flex:0;justify-content:center;&.", "{width:var(", ");}&:not(.", "){width:var(", ");}}&.", "{flex-direction:column;align-items:center;justify-content:center;&.", "{min-width:var(", ");}&:not(.", "){min-width:var(", ");}}&.", "{justify-content:center;}"], classes.simple, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.verticalOrientation, tokens.verticalContentPaddingLeft, classes.simple, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.verticalOrientation, classes.hasIndicator, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, classes.centered);
|
23
|
+
export var BulletIndicator = /*#__PURE__*/styled.button.withConfig({
|
23
24
|
componentId: "plasma-new-hope__sc-bjma6z-4"
|
24
|
-
})(["display:flex;align-items:center;justify-content:center;width:var(", ");height:var(", ");border-radius:50%;box-sizing:border-box;position:relative;color:var(", ");background-color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ")
|
25
|
+
})(["display:flex;align-items:center;justify-content:center;width:var(", ");height:var(", ");border-radius:50%;box-sizing:border-box;position:relative;outline:none;padding:0;margin:0;border:none;color:var(", ");background-color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");", " &.", "{width:var(", ");height:var(", ");border:var(", ") var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");color:var(", ");background:var(", ");", "}&.", "{color:var(", ");background:var(", ");&.", "{&:before,&:after{background:var(", ");}}}"], tokens.indicatorSize, tokens.indicatorSize, tokens.completedIndicatorColor, tokens.completedIndicatorBackground, tokens.indicatorFontFamily, tokens.indicatorFontSize, tokens.indicatorFontStyle, tokens.indicatorFontWeight, tokens.indicatorLetterSpacing, tokens.indicatorLineHeight, /*#__PURE__*/addFocus({
|
26
|
+
outlineOffset: '-0.0625rem',
|
27
|
+
outlineSize: '0.0625rem',
|
28
|
+
outlineRadius: '50%',
|
29
|
+
outlineColor: /*#__PURE__*/"var(".concat(tokens.focusColor, ")")
|
30
|
+
}), classes.active, tokens.activeIndicatorSize, tokens.activeIndicatorSize, tokens.dividerThickness, tokens.activeIndicatorBorder, tokens.activeIndicatorFontFamily, tokens.activeIndicatorFontSize, tokens.activeIndicatorFontStyle, tokens.activeIndicatorFontWeight, tokens.activeIndicatorLetterSpacing, tokens.activeIndicatorLineHeight, tokens.activeIndicatorColor, tokens.activeIndicatorBackground, /*#__PURE__*/addFocus({
|
31
|
+
outlineOffset: '-0.1875rem',
|
32
|
+
outlineSize: '0.0625rem',
|
33
|
+
outlineRadius: '50%',
|
34
|
+
outlineColor: /*#__PURE__*/"var(".concat(tokens.focusColor, ")")
|
35
|
+
}), classes.inactive, tokens.inactiveIndicatorColor, tokens.inactiveIndicatorBackground, classes.simple, tokens.inactiveIndicatorBackground);
|
25
36
|
export var Bullet = /*#__PURE__*/styled(BulletIndicator).withConfig({
|
26
37
|
componentId: "plasma-new-hope__sc-bjma6z-5"
|
27
|
-
})(["width:var(", ");height:var(", ");&.", "{width:var(", ");height:var(", ");border:var(", ") var(", ");background
|
38
|
+
})(["width:var(", ");height:var(", ");&.", "{width:var(", ");height:var(", ");border:var(", ") var(", ");background:var(", ");}"], tokens.bulletSize, tokens.bulletSize, classes.active, tokens.activeBulletSize, tokens.activeBulletSize, tokens.dividerThickness, tokens.activeIndicatorBorder, tokens.activeIndicatorBackground);
|
28
39
|
export var StepItemDivider = /*#__PURE__*/styled.div.withConfig({
|
29
40
|
componentId: "plasma-new-hope__sc-bjma6z-6"
|
30
|
-
})(["width:100%;height:var(", ");flex:1;background
|
41
|
+
})(["width:100%;height:var(", ");flex:1;background:var(", ");&.", "{background:var(", ");}&.", "{opacity:var(", ");}&.", "{background:transparent;}&.", "{width:var(", ");height:100%;}&.", "{height:", ";min-height:", ";max-height:", ";&.", "{height:auto;max-height:none;}}"], tokens.dividerThickness, tokens.activeIndicatorColor, classes.inactive, tokens.inactiveIndicatorBackground, classes.disabled, tokens.disabledOpacity, classes.transparentDivider, classes.verticalOrientation, tokens.dividerThickness, classes.indentDivider, function (_ref2) {
|
31
42
|
var indentToken = _ref2.indentToken;
|
32
43
|
return indentToken || '';
|
33
44
|
}, function (_ref3) {
|
@@ -42,4 +53,4 @@ export var StepItemContentWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
42
53
|
})(["&.", "{", "{padding-top:var(", ");padding-right:0;}", "{padding-top:var(", ");padding-bottom:var(", ");padding-right:0;}}"], classes.verticalOrientation, StepItemTitle, tokens.contentVerticalPadding, StepItemContent, tokens.contentVerticalPadding, tokens.contentVerticalPadding);
|
43
54
|
export var StepItemStyled = /*#__PURE__*/styled.div.withConfig({
|
44
55
|
componentId: "plasma-new-hope__sc-bjma6z-8"
|
45
|
-
})(["display:flex;flex-direction:column;align-items:flex-start;flex:1;&.", "{flex-direction:row;align-items:stretch;", "{width:var(", ");height:100%;}}&.", "{", "{color:var(", ");}}&.", "{", "{color:var(", ");}}&.", "{&:not(.", "){", "{cursor:pointer;color:var(", ");}", ",", "{color:var(", ");background:var(", ");}}&.", "{", "{color:var(", ");}", ",", "{color:var(", ");background:var(", ");}}", "{cursor:pointer;}}&.", "{align-items:center;", "{display:flex;flex-direction:column;align-items:center;padding-left:calc(var(", ") / 2);padding-right:calc(var(", ") / 2);", "{width:100%;}", ",", "{padding-right:0;text-align:center;}}}&.", "{
|
56
|
+
})(["position:relative;display:flex;flex-direction:column;align-items:flex-start;flex:1;color:var(", ");&.", "{flex-direction:row;align-items:stretch;", "{width:var(", ");height:100%;}}&.", "{", "{color:var(", ");}}&.", "{color:var(", ");", "{color:var(", ");}}&.", "{flex:0;align-items:center;justify-content:center;flex-direction:row;height:100%;&.", "{min-width:var(", ");min-height:var(", ");}&:not(.", "){width:var(", ");min-height:var(", ");}&.", ",&:not(.", "){&:before,&:after{content:'';display:block;width:calc((var(", ") - var(", ")) / 2);height:var(", ");background:var(", ");}&:not(.", "){&:before,&:after{width:calc((var(", ") - var(", ")) / 2);}}&.", "{flex-direction:column;&:before,&:after{width:var(", ");height:calc((var(", ") - var(", ")) / 2);margin:0 auto;align-self:auto;}&:not(.", "){&:before,&:after{height:calc((var(", ") - var(", ")) / 2);}}&:after{margin:0 auto;}}&.isFirst{&:before{background:transparent;}}&.isLast{&:after{background:transparent;}}}&.", "{&:after,&:before{background:var(", ");}}&.isPrevInactive{&:before{background:var(", ");}}&.isNextInactive{&:after{background:var(", ");}}&.", "{&:before,&:after{background:var(", ");opacity:1;}}&.", "{&:before,&:after{background:transparent;}}}&:not(.", "):not(.", "){&.isNextActive{", "{width:calc(100% - (var(", ") - var(", ")) / 2);}}&.", "{", "{margin-left:calc((var(", ") - var(", ")) / -2);width:calc(100% + (var(", ") - var(", ")) / 2);}}}&.", "{&:not(.", "){", "{cursor:pointer;color:var(", ");}", ",", "{color:var(", ");background:var(", ");}}&.", "{", "{color:var(", ");}", ",", "{color:var(", ");background:var(", ");}}", "{cursor:pointer;}}&.", "{align-items:center;", "{display:flex;flex-direction:column;align-items:center;padding-left:calc(var(", ") / 2);padding-right:calc(var(", ") / 2);", "{width:100%;}", ",", "{padding-right:0;text-align:center;}}}&.", "{opacity:var(", ");}"], tokens.activeIndicatorColor, classes.verticalOrientation, StepItemDivider, tokens.dividerThickness, classes.active, StepItemTitle, tokens.activeTitleColor, classes.inactive, tokens.inactiveIndicatorColor, StepItemTitle, tokens.inactiveTitleColor, classes.simple, classes.hasIndicator, tokens.activeIndicatorSize, tokens.activeIndicatorSize, classes.hasIndicator, tokens.activeBulletSize, tokens.activeBulletSize, classes.inactive, classes.active, tokens.activeIndicatorSize, tokens.indicatorSize, tokens.dividerThickness, tokens.activeIndicatorColor, classes.hasIndicator, tokens.activeBulletSize, tokens.bulletSize, classes.verticalOrientation, tokens.dividerThickness, tokens.activeIndicatorSize, tokens.indicatorSize, classes.hasIndicator, tokens.activeBulletSize, tokens.bulletSize, classes.inactive, tokens.inactiveIndicatorBackground, tokens.inactiveIndicatorBackground, tokens.inactiveIndicatorBackground, classes.disabled, tokens.inactiveIndicatorBackground, classes.transparentDivider, classes.simple, classes.verticalOrientation, BulletIndicatorWrapper, tokens.activeIndicatorSize, tokens.indicatorSize, classes.active, BulletIndicatorWrapper, tokens.activeIndicatorSize, tokens.indicatorSize, tokens.activeIndicatorSize, tokens.indicatorSize, classes.hovered, classes.active, StepItemTitle, tokens.activeTitleColorHover, BulletIndicator, Bullet, tokens.completedIndicatorColorHover, tokens.completedIndicatorBackgroundHover, classes.inactive, StepItemTitle, tokens.inactiveTitleColorHover, BulletIndicator, Bullet, tokens.inactiveIndicatorColorHover, tokens.inactiveIndicatorBackgroundHover, BulletIndicatorWrapper, classes.centered, StepItemContentWrapper, tokens.contentSidePadding, tokens.contentSidePadding, StepItemTitle, StepItemTitle, StepItemContent, classes.disabled, tokens.disabledOpacity);
|
@@ -1,4 +1,4 @@
|
|
1
|
-
var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "requiredPlacement", "titleCaption", "hintTrigger", "hintText", "hintView", "hintSize", "hintTargetIcon", "hintPlacement", "hintHasArrow", "hintOffset", "hintWidth", "hintContentLeft", "view", "size", "readOnly", "disabled", "required", "clear", "optional", "hasDivider", "value", "chips", "onChange", "onChangeChips", "onSearch", "onKeyDown"];
|
1
|
+
var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "hasInnerLabelPlaceholder", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "requiredPlacement", "titleCaption", "hintTrigger", "hintText", "hintView", "hintSize", "hintTargetIcon", "hintPlacement", "hintHasArrow", "hintOffset", "hintWidth", "hintContentLeft", "view", "size", "readOnly", "disabled", "required", "clear", "optional", "hasDivider", "value", "chips", "onChange", "onChangeChips", "onSearch", "onKeyDown"];
|
2
2
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
3
3
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
4
4
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
@@ -39,6 +39,7 @@ export var textFieldRoot = function textFieldRoot(Root) {
|
|
39
39
|
contentRight = _ref.contentRight,
|
40
40
|
label = _ref.label,
|
41
41
|
labelPlacement = _ref.labelPlacement,
|
42
|
+
hasInnerLabelPlaceholder = _ref.hasInnerLabelPlaceholder,
|
42
43
|
textBefore = _ref.textBefore,
|
43
44
|
textAfter = _ref.textAfter,
|
44
45
|
placeholder = _ref.placeholder,
|
@@ -114,7 +115,7 @@ export var textFieldRoot = function textFieldRoot(Root) {
|
|
114
115
|
var hasLabelValue = Boolean(label);
|
115
116
|
var hasInnerLabel = size !== 'xs' && labelPlacement === 'inner' && !isChipsVisible && hasLabelValue;
|
116
117
|
var hasOuterLabel = labelPlacement === 'outer' && hasLabelValue;
|
117
|
-
var hasPlaceholder = Boolean(placeholder) && !hasInnerLabel;
|
118
|
+
var hasPlaceholder = Boolean(placeholder) && (hasInnerLabelPlaceholder || !hasInnerLabel);
|
118
119
|
var innerLabelValue = hasInnerLabel || hasOuterLabel ? label : undefined;
|
119
120
|
var innerLabelPlacementValue = labelPlacement === 'inner' && !hasInnerLabel ? undefined : labelPlacement;
|
120
121
|
var innerPlaceholderValue = hasPlaceholder ? placeholder : undefined;
|
@@ -125,6 +126,7 @@ export var textFieldRoot = function textFieldRoot(Root) {
|
|
125
126
|
var requiredPlacementClass = requiredPlacement === 'right' ? classes.requiredAlignRight : undefined;
|
126
127
|
var labelPlacementClass = innerLabelPlacementValue ? classes["".concat(innerLabelPlacementValue, "LabelPlacement")] : undefined;
|
127
128
|
var hasValueClass = hasValue ? classes.hasValue : undefined;
|
129
|
+
var hasInnerLabelPlaceholderClass = hasInnerLabelPlaceholder && placeholderShown && classes.forcePlaceholder;
|
128
130
|
var wrapperWithoutLeftContent = !contentLeft && isChipsVisible ? classes.hasEmptyContentLeft : undefined;
|
129
131
|
var wrapperWithoutRightContent = !contentRight && isChipsVisible ? classes.hasEmptyContentRight : undefined;
|
130
132
|
var hintRef = useOutsideClick(function () {
|
@@ -333,7 +335,7 @@ export var textFieldRoot = function textFieldRoot(Root) {
|
|
333
335
|
"aria-labelledby": labelId,
|
334
336
|
"aria-describedby": helperTextId,
|
335
337
|
placeholder: innerPlaceholderValue,
|
336
|
-
className: cx(hasValueClass),
|
338
|
+
className: cx(hasValueClass, hasInnerLabelPlaceholderClass),
|
337
339
|
disabled: disabled,
|
338
340
|
readOnly: !disabled && readOnly,
|
339
341
|
onInput: handleInput,
|
@@ -342,7 +344,9 @@ export var textFieldRoot = function textFieldRoot(Root) {
|
|
342
344
|
}, rest)), hasInnerLabel && /*#__PURE__*/React.createElement(Label, {
|
343
345
|
id: labelId,
|
344
346
|
htmlFor: innerId
|
345
|
-
}, innerLabelValue, optionalTextNode), placeholderShown && !hasValue && /*#__PURE__*/React.createElement(InputPlaceholder,
|
347
|
+
}, innerLabelValue, optionalTextNode), placeholderShown && !hasValue && /*#__PURE__*/React.createElement(InputPlaceholder, {
|
348
|
+
hasInnerLabelPlaceholder: hasInnerLabelPlaceholder
|
349
|
+
}, innerPlaceholderValue, hasPlaceholderOptional && optionalTextNode)), textAfter && /*#__PURE__*/React.createElement(StyledTextAfter, null, textAfter)), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight)), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, {
|
346
350
|
id: helperTextId
|
347
351
|
}, leftHelper));
|
348
352
|
});
|
@@ -24,11 +24,14 @@ export var InputContainer = /*#__PURE__*/styled.div.withConfig({
|
|
24
24
|
})(["position:relative;flex:1;min-width:60%;"]);
|
25
25
|
export var InputPlaceholder = /*#__PURE__*/styled.div.withConfig({
|
26
26
|
componentId: "plasma-new-hope__sc-g4vxbb-6"
|
27
|
-
})(["position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;white-space:nowrap;pointer-events:none;user-select:none;font:inherit;letter-spacing:inherit;line-height:inherit;color:var(", ");"], tokens.placeholderColor)
|
27
|
+
})(["position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;white-space:nowrap;pointer-events:none;user-select:none;font:inherit;letter-spacing:inherit;line-height:inherit;color:var(", ");padding:", ";"], tokens.placeholderColor, function (_ref) {
|
28
|
+
var hasInnerLabelPlaceholder = _ref.hasInnerLabelPlaceholder;
|
29
|
+
return hasInnerLabelPlaceholder ? "var(".concat(tokens.contentLabelInnerPadding, ")") : '0';
|
30
|
+
});
|
28
31
|
export var OuterLabelWrapper = /*#__PURE__*/styled.div.withConfig({
|
29
32
|
componentId: "plasma-new-hope__sc-g4vxbb-7"
|
30
|
-
})(["display:flex;align-items:center;margin-bottom:", ";"], function (
|
31
|
-
var isInnerLabel =
|
33
|
+
})(["display:flex;align-items:center;margin-bottom:", ";"], function (_ref2) {
|
34
|
+
var isInnerLabel = _ref2.isInnerLabel;
|
32
35
|
return isInnerLabel ? "var(".concat(tokens.titleCaptionInnerLabelOffset, ")") : "var(".concat(tokens.labelOffset, ")");
|
33
36
|
});
|
34
37
|
export var TitleCaption = /*#__PURE__*/styled.div.withConfig({
|
@@ -42,9 +45,9 @@ export var Label = /*#__PURE__*/styled.label.withConfig({
|
|
42
45
|
})(["display:inline-flex;"]);
|
43
46
|
export var StyledContentLeft = /*#__PURE__*/styled.div.withConfig({
|
44
47
|
componentId: "plasma-new-hope__sc-g4vxbb-11"
|
45
|
-
})(["margin:var(", ");color:", ";line-height:0;"], tokens.leftContentMargin, function (
|
46
|
-
var isDefaultView =
|
47
|
-
isClear =
|
48
|
+
})(["margin:var(", ");color:", ";line-height:0;"], tokens.leftContentMargin, function (_ref3) {
|
49
|
+
var isDefaultView = _ref3.isDefaultView,
|
50
|
+
isClear = _ref3.isClear;
|
48
51
|
return !isDefaultView && isClear ? "var(".concat(tokens.clearColor, ")") : "var(".concat(tokens.contentSlotColor, ")");
|
49
52
|
});
|
50
53
|
export var StyledContentRight = /*#__PURE__*/styled.div.withConfig({
|
@@ -1,4 +1,4 @@
|
|
1
1
|
import { css } from 'styled-components';
|
2
2
|
import { classes, tokens } from '../../TextField.tokens';
|
3
3
|
import { Input, InputContainer, Label, StyledTextAfter, StyledTextBefore } from '../../TextField.styles';
|
4
|
-
export var base = /*#__PURE__*/css(["&.", "{", "{position:relative;display:inline-block;color:var(", ");}}&.", "{", "{padding:var(", ");}", ",", "{padding:var(", ");}", ":focus ~ ", ",", ".", " ~ ", "{color:var(", ");align-items:flex-start;padding:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{color:var(", ");pointer-events:none;position:absolute;top:0;display:flex;align-items:center;box-sizing:border-box;height:var(", ");padding-top:calc(calc(var(", ") - var(", ")) / 2);padding-bottom:calc(calc(var(", ") - var(", ")) / 2);}&.", " ", "{color:var(", ");}}"], classes.outerLabelPlacement, Label, tokens.labelColor, classes.innerLabelPlacement, InputContainer, tokens.contentLabelInnerPadding, StyledTextAfter, StyledTextBefore, tokens.contentLabelInnerPadding, Input, Label, Input, classes.hasValue, Label, tokens.placeholderColor, tokens.labelInnerPadding, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, Label, tokens.placeholderColor, tokens.height, tokens.height, tokens.labelLineHeight, tokens.height, tokens.labelLineHeight, classes.clear, Label, tokens.clearPlaceholderColor);
|
4
|
+
export var base = /*#__PURE__*/css(["&.", "{", "{position:relative;display:inline-block;color:var(", ");}}&.", "{", "{padding:var(", ");}", ",", "{padding:var(", ");}", ":focus ~ ", ",", ".", " ~ ", ",", ".", " ~ ", "{color:var(", ");align-items:flex-start;padding:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}", "{color:var(", ");pointer-events:none;position:absolute;top:0;display:flex;align-items:center;box-sizing:border-box;height:var(", ");padding-top:calc(calc(var(", ") - var(", ")) / 2);padding-bottom:calc(calc(var(", ") - var(", ")) / 2);}&.", " ", "{color:var(", ");}}"], classes.outerLabelPlacement, Label, tokens.labelColor, classes.innerLabelPlacement, InputContainer, tokens.contentLabelInnerPadding, StyledTextAfter, StyledTextBefore, tokens.contentLabelInnerPadding, Input, Label, Input, classes.hasValue, Label, Input, classes.forcePlaceholder, Label, tokens.placeholderColor, tokens.labelInnerPadding, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, Label, tokens.placeholderColor, tokens.height, tokens.height, tokens.labelLineHeight, tokens.height, tokens.labelLineHeight, classes.clear, Label, tokens.clearPlaceholderColor);
|
@@ -7,7 +7,7 @@ export var config = {
|
|
7
7
|
},
|
8
8
|
variations: {
|
9
9
|
view: {
|
10
|
-
"default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-primary-hover);", ":solid var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-clear);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--surface-solid-default-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-secondary);", ":0.4;"], tokens.activeTitleColor, tokens.activeTitleColorHover, tokens.activeIndicatorBorder, tokens.activeIndicatorColor, tokens.activeIndicatorBackground, tokens.completedIndicatorColor, tokens.completedIndicatorColorHover, tokens.completedIndicatorBackground, tokens.completedIndicatorBackgroundHover, tokens.inactiveTitleColor, tokens.inactiveTitleColorHover, tokens.inactiveIndicatorColor, tokens.inactiveIndicatorColorHover, tokens.inactiveIndicatorBackground, tokens.inactiveIndicatorBackgroundHover, tokens.contentColor, tokens.disabledOpacity)
|
10
|
+
"default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-primary-hover);", ":solid var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-clear);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--surface-solid-default-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-secondary);", ":var(--surface-accent);", ":0.4;"], tokens.activeTitleColor, tokens.activeTitleColorHover, tokens.activeIndicatorBorder, tokens.activeIndicatorColor, tokens.activeIndicatorBackground, tokens.completedIndicatorColor, tokens.completedIndicatorColorHover, tokens.completedIndicatorBackground, tokens.completedIndicatorBackgroundHover, tokens.inactiveTitleColor, tokens.inactiveTitleColorHover, tokens.inactiveIndicatorColor, tokens.inactiveIndicatorColorHover, tokens.inactiveIndicatorBackground, tokens.inactiveIndicatorBackgroundHover, tokens.contentColor, tokens.focusColor, tokens.disabledOpacity)
|
11
11
|
},
|
12
12
|
size: {
|
13
13
|
l: /*#__PURE__*/css(["", ":1.5rem;", ":2.25rem;", ":0.5rem;", ":1rem;", ":0.75rem;", ":0.375rem;", ":2rem;", ":1.0625rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":1.5rem;", ":1.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.125rem;"], tokens.indicatorSize, tokens.activeIndicatorSize, tokens.bulletSize, tokens.activeBulletSize, tokens.titlePaddingTop, tokens.contentPaddingTop, tokens.contentSidePadding, tokens.contentVerticalPadding, tokens.verticalContentPaddingLeft, tokens.smallIndicatorIndentHeight, tokens.largeIndicatorIndentHeight, tokens.smallBulletIndentHeight, tokens.largeBulletIndentHeight, tokens.indicatorFontFamily, tokens.indicatorFontSize, tokens.indicatorFontStyle, tokens.indicatorFontWeight, tokens.indicatorLetterSpacing, tokens.indicatorLineHeight, tokens.activeIndicatorFontFamily, tokens.activeIndicatorFontSize, tokens.activeIndicatorFontStyle, tokens.activeIndicatorFontWeight, tokens.activeIndicatorLetterSpacing, tokens.activeIndicatorLineHeight, tokens.titleFontFamily, tokens.titleFontSize, tokens.titleFontStyle, tokens.titleFontWeight, tokens.titleLetterSpacing, tokens.titleLineHeight, tokens.contentFontFamily, tokens.contentFontSize, tokens.contentFontStyle, tokens.contentFontWeight, tokens.contentLetterSpacing, tokens.contentLineHeight, tokens.dividerThickness),
|
@@ -87,6 +87,12 @@ const meta: Meta<typeof TextField> = {
|
|
87
87
|
type: 'inline-radio',
|
88
88
|
},
|
89
89
|
},
|
90
|
+
hasInnerLabelPlaceholder: {
|
91
|
+
control: {
|
92
|
+
type: 'boolean',
|
93
|
+
},
|
94
|
+
if: { arg: 'labelPlacement', equal: 'inner' },
|
95
|
+
},
|
90
96
|
size: {
|
91
97
|
options: sizes,
|
92
98
|
control: {
|
@@ -210,6 +216,7 @@ export const Default: StoryObj<StoryPropsDefault> = {
|
|
210
216
|
view: 'default',
|
211
217
|
label: 'Лейбл',
|
212
218
|
labelPlacement: 'outer',
|
219
|
+
hasInnerLabelPlaceholder: false,
|
213
220
|
titleCaption: 'Подпись к полю',
|
214
221
|
textBefore: '',
|
215
222
|
textAfter: '',
|
@@ -7,7 +7,7 @@ export var config = {
|
|
7
7
|
},
|
8
8
|
variations: {
|
9
9
|
view: {
|
10
|
-
"default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-primary-hover);", ":solid var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-clear);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--surface-solid-default-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-secondary);", ":0.4;"], tokens.activeTitleColor, tokens.activeTitleColorHover, tokens.activeIndicatorBorder, tokens.activeIndicatorColor, tokens.activeIndicatorBackground, tokens.completedIndicatorColor, tokens.completedIndicatorColorHover, tokens.completedIndicatorBackground, tokens.completedIndicatorBackgroundHover, tokens.inactiveTitleColor, tokens.inactiveTitleColorHover, tokens.inactiveIndicatorColor, tokens.inactiveIndicatorColorHover, tokens.inactiveIndicatorBackground, tokens.inactiveIndicatorBackgroundHover, tokens.contentColor, tokens.disabledOpacity)
|
10
|
+
"default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-primary-hover);", ":solid var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-clear);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--surface-solid-default-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-secondary);", ":var(--surface-accent);", ":0.4;"], tokens.activeTitleColor, tokens.activeTitleColorHover, tokens.activeIndicatorBorder, tokens.activeIndicatorColor, tokens.activeIndicatorBackground, tokens.completedIndicatorColor, tokens.completedIndicatorColorHover, tokens.completedIndicatorBackground, tokens.completedIndicatorBackgroundHover, tokens.inactiveTitleColor, tokens.inactiveTitleColorHover, tokens.inactiveIndicatorColor, tokens.inactiveIndicatorColorHover, tokens.inactiveIndicatorBackground, tokens.inactiveIndicatorBackgroundHover, tokens.contentColor, tokens.focusColor, tokens.disabledOpacity)
|
11
11
|
},
|
12
12
|
size: {
|
13
13
|
l: /*#__PURE__*/css(["", ":1.5rem;", ":2.25rem;", ":0.5rem;", ":1rem;", ":0.75rem;", ":0.375rem;", ":2rem;", ":1.0625rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":1.5rem;", ":1.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.125rem;"], tokens.indicatorSize, tokens.activeIndicatorSize, tokens.bulletSize, tokens.activeBulletSize, tokens.titlePaddingTop, tokens.contentPaddingTop, tokens.contentSidePadding, tokens.contentVerticalPadding, tokens.verticalContentPaddingLeft, tokens.smallIndicatorIndentHeight, tokens.largeIndicatorIndentHeight, tokens.smallBulletIndentHeight, tokens.largeBulletIndentHeight, tokens.indicatorFontFamily, tokens.indicatorFontSize, tokens.indicatorFontStyle, tokens.indicatorFontWeight, tokens.indicatorLetterSpacing, tokens.indicatorLineHeight, tokens.activeIndicatorFontFamily, tokens.activeIndicatorFontSize, tokens.activeIndicatorFontStyle, tokens.activeIndicatorFontWeight, tokens.activeIndicatorLetterSpacing, tokens.activeIndicatorLineHeight, tokens.titleFontFamily, tokens.titleFontSize, tokens.titleFontStyle, tokens.titleFontWeight, tokens.titleLetterSpacing, tokens.titleLineHeight, tokens.contentFontFamily, tokens.contentFontSize, tokens.contentFontStyle, tokens.contentFontWeight, tokens.contentLetterSpacing, tokens.contentLineHeight, tokens.dividerThickness),
|
@@ -87,6 +87,12 @@ const meta: Meta<typeof TextField> = {
|
|
87
87
|
type: 'inline-radio',
|
88
88
|
},
|
89
89
|
},
|
90
|
+
hasInnerLabelPlaceholder: {
|
91
|
+
control: {
|
92
|
+
type: 'boolean',
|
93
|
+
},
|
94
|
+
if: { arg: 'labelPlacement', equal: 'inner' },
|
95
|
+
},
|
90
96
|
size: {
|
91
97
|
options: sizes,
|
92
98
|
control: {
|
@@ -210,6 +216,7 @@ export const Default: StoryObj<StoryPropsDefault> = {
|
|
210
216
|
view: 'default',
|
211
217
|
label: 'Лейбл',
|
212
218
|
labelPlacement: 'outer',
|
219
|
+
hasInnerLabelPlaceholder: false,
|
213
220
|
titleCaption: 'Подпись к полю',
|
214
221
|
textBefore: '',
|
215
222
|
textAfter: '',
|
@@ -219,11 +226,11 @@ export const Default: StoryObj<StoryPropsDefault> = {
|
|
219
226
|
readOnly: false,
|
220
227
|
enableContentLeft: true,
|
221
228
|
enableContentRight: true,
|
222
|
-
clear: false,
|
223
|
-
hasDivider: false,
|
224
229
|
optional: false,
|
225
230
|
required: false,
|
226
231
|
requiredPlacement: 'right',
|
232
|
+
clear: false,
|
233
|
+
hasDivider: false,
|
227
234
|
hasHint: true,
|
228
235
|
hintText: 'Текст подсказки',
|
229
236
|
hintTrigger: 'hover',
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAIhE,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAM1C,OAAO,KAAK,EAAE,iBAAiB,EAAsB,MAAM,sBAAsB,CAAC;AAGlF;;GAEG;AACH,eAAO,MAAM,gBAAgB,SAAU,UAAU,gBAAgB,EAAE,iBAAiB,CAAC,+
|
1
|
+
{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAIhE,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAM1C,OAAO,KAAK,EAAE,iBAAiB,EAAsB,MAAM,sBAAsB,CAAC;AAGlF;;GAEG;AACH,eAAO,MAAM,gBAAgB,SAAU,UAAU,gBAAgB,EAAE,iBAAiB,CAAC,+FA8LhF,CAAC;AAEN,eAAO,MAAM,kBAAkB;;;mBAhMQ,UAAU,gBAAgB,EAAE,iBAAiB,CAAC;;;;;;;;;;;;CA+MpF,CAAC"}
|