@itcase/ui 1.8.50 → 1.8.51

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/cjs/components/Cell.js +19 -17
  2. package/dist/components/Cell.js +19 -17
  3. package/dist/css/components/Cell/Cell.css +10 -0
  4. package/dist/types/components/Cell/appearance/cellSurface.d.ts +4 -0
  5. package/package.json +1 -1
package/dist/cjs/components/Cell.js CHANGED
@@ -30,31 +30,31 @@ require('../../Link_cjs_BqT6eVl6.js');
30
30
  var cellAppearanceSize = {
31
31
  sizeXL: {
32
32
  size: 'xl',
33
- titleLabelAppearanceSize: 'sizeS',
34
- titleTextSize: 'xl',
33
+ titleLabelAppearanceSize: 'sizeXS',
34
+ titleTextSize: 'l',
35
35
  valueLabelAppearanceSize: 'sizeS',
36
- valueTextSize: 's',
36
+ valueTextSize: 'xl',
37
37
  },
38
38
  sizeL: {
39
39
  size: 'l',
40
- titleLabelAppearanceSize: 'sizeS',
41
- titleTextSize: 'l',
40
+ titleLabelAppearanceSize: 'sizeXS',
41
+ titleTextSize: 'm',
42
42
  valueLabelAppearanceSize: 'sizeS',
43
- valueTextSize: 's',
43
+ valueTextSize: 'l',
44
44
  },
45
45
  sizeM: {
46
46
  size: 'm',
47
- titleLabelAppearanceSize: 'sizeS',
48
- titleTextSize: 'm',
47
+ titleLabelAppearanceSize: 'sizeXS',
48
+ titleTextSize: 's',
49
49
  valueLabelAppearanceSize: 'sizeS',
50
- valueTextSize: 's',
50
+ valueTextSize: 'm',
51
51
  },
52
52
  sizeS: {
53
53
  size: 's',
54
54
  titleLabelAppearanceSize: 'sizeXS',
55
- titleTextSize: 's',
56
- valueLabelAppearanceSize: 'sizeXS',
57
- valueTextSize: 'xs',
55
+ titleTextSize: 'xs',
56
+ valueLabelAppearanceSize: 'sizeS',
57
+ valueTextSize: 's',
58
58
  },
59
59
  sizeEqualL: {
60
60
  size: 'l',
@@ -93,9 +93,7 @@ var cellAppearanceStyle = {
93
93
  outlined: {
94
94
  fill: 'none',
95
95
  },
96
- full: {
97
- //
98
- },
96
+ full: {},
99
97
  ghost: {
100
98
  fill: 'none',
101
99
  borderColor: 'none',
@@ -109,6 +107,7 @@ var cellAppearanceSurface = {
109
107
  titleIconItemFill: 'surfaceItemPrimary',
110
108
  titleLabelAppearance: 'accentPrimary',
111
109
  labelTextColor: 'surfaceTextPrimary',
110
+ borderColor: 'surfaceBorderPrimary',
112
111
  valueIconItemFill: 'surfaceItemPrimary',
113
112
  valueLabelAppearance: 'accentPrimary',
114
113
  },
@@ -118,6 +117,7 @@ var cellAppearanceSurface = {
118
117
  titleIconItemFill: 'surfaceItemPrimary',
119
118
  titleLabelAppearance: 'accentPrimary',
120
119
  labelTextColor: 'surfaceTextPrimary',
120
+ borderColor: 'surfaceBorderPrimary',
121
121
  valueIconItemFill: 'surfaceItemPrimary',
122
122
  valueLabelAppearance: 'accentPrimary',
123
123
  },
@@ -127,6 +127,7 @@ var cellAppearanceSurface = {
127
127
  titleIconItemFill: 'surfaceItemPrimary',
128
128
  titleLabelAppearance: 'accentPrimary',
129
129
  labelTextColor: 'surfaceTextPrimary',
130
+ borderColor: 'surfaceBorderPrimary',
130
131
  valueIconItemFill: 'surfaceItemPrimary',
131
132
  valueLabelAppearance: 'accentPrimary',
132
133
  },
@@ -136,6 +137,7 @@ var cellAppearanceSurface = {
136
137
  titleIconItemFill: 'surfaceItemPrimary',
137
138
  titleLabelAppearance: 'accentPrimary',
138
139
  labelTextColor: 'surfaceTextPrimary',
140
+ borderColor: 'surfaceBorderPrimary',
139
141
  valueIconItemFill: 'surfaceItemPrimary',
140
142
  valueLabelAppearance: 'accentPrimary',
141
143
  },
@@ -153,7 +155,7 @@ function Cell(props) {
153
155
  var className = props.className, appearance = props.appearance, title = props.title, titleIcon = props.titleIcon, titleLabel = props.titleLabel, titleTag = props.titleTag, showTitleLabel = props.showTitleLabel, showValueLabel = props.showValueLabel, value = props.value, valueIcon = props.valueIcon, valueTag = props.valueTag, before = props.before, after = props.after, isActive = props.isActive, isEqual = props.isEqual, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
154
156
  var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, cellConfig);
155
157
  var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
156
- var directionClass = propsGenerator.directionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, titleIconFill = propsGenerator.titleIconFill, titleIconFillHover = propsGenerator.titleIconFillHover, titleIconFillSize = propsGenerator.titleIconFillSize, titleIconItemFill = propsGenerator.titleIconItemFill, titleIconShape = propsGenerator.titleIconShape, titleIconSrc = propsGenerator.titleIconSrc, titleLabelAppearance = propsGenerator.titleLabelAppearance, titleLabelAppearanceSize = propsGenerator.titleLabelAppearanceSize, titleLabelShape = propsGenerator.titleLabelShape, titleLabelSize = propsGenerator.titleLabelSize, titleLabelTextSize = propsGenerator.titleLabelTextSize, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, titleTextTruncate = propsGenerator.titleTextTruncate, titleTextWeight = propsGenerator.titleTextWeight, titleTextWrap = propsGenerator.titleTextWrap, borderColorActiveClass = propsGenerator.borderColorActiveClass, borderColorActiveHoverClass = propsGenerator.borderColorActiveHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, valueIconFill = propsGenerator.valueIconFill, valueIconFillHover = propsGenerator.valueIconFillHover, valueIconFillSize = propsGenerator.valueIconFillSize, valueIconItemFill = propsGenerator.valueIconItemFill, valueIconShape = propsGenerator.valueIconShape, valueIconSrc = propsGenerator.valueIconSrc, valueLabel = propsGenerator.valueLabel, valueLabelAppearance = propsGenerator.valueLabelAppearance, valueLabelAppearanceSize = propsGenerator.valueLabelAppearanceSize, valueLabelShape = propsGenerator.valueLabelShape, valueLabelSize = propsGenerator.valueLabelSize, valueLabelTextSize = propsGenerator.valueLabelTextSize, valueTextAlign = propsGenerator.valueTextAlign, valueTextColor = propsGenerator.valueTextColor, valueTextSize = propsGenerator.valueTextSize, valueTextTruncate = propsGenerator.valueTextTruncate, valueTextWeight = propsGenerator.valueTextWeight, valueTextWrap = propsGenerator.valueTextWrap, widthClass = propsGenerator.widthClass, zeroGap = propsGenerator.zeroGap, zeroPadding = propsGenerator.zeroPadding;
158
+ var directionClass = propsGenerator.directionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, titleIconFill = propsGenerator.titleIconFill, titleIconFillHover = propsGenerator.titleIconFillHover, titleIconFillSize = propsGenerator.titleIconFillSize, titleIconItemFill = propsGenerator.titleIconItemFill, titleIconShape = propsGenerator.titleIconShape, titleIconSrc = propsGenerator.titleIconSrc, titleLabelAppearance = propsGenerator.titleLabelAppearance, titleLabelAppearanceSize = propsGenerator.titleLabelAppearanceSize, titleLabelShape = propsGenerator.titleLabelShape, titleLabelSize = propsGenerator.titleLabelSize, titleLabelTextSize = propsGenerator.titleLabelTextSize, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, titleTextTruncate = propsGenerator.titleTextTruncate, titleTextWeight = propsGenerator.titleTextWeight, titleTextWrap = propsGenerator.titleTextWrap, borderColorActiveClass = propsGenerator.borderColorActiveClass, borderColorActiveHoverClass = propsGenerator.borderColorActiveHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, reverseClass = propsGenerator.reverseClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, valueIconFill = propsGenerator.valueIconFill, valueIconFillHover = propsGenerator.valueIconFillHover, valueIconFillSize = propsGenerator.valueIconFillSize, valueIconItemFill = propsGenerator.valueIconItemFill, valueIconShape = propsGenerator.valueIconShape, valueIconSrc = propsGenerator.valueIconSrc, valueLabel = propsGenerator.valueLabel, valueLabelAppearance = propsGenerator.valueLabelAppearance, valueLabelAppearanceSize = propsGenerator.valueLabelAppearanceSize, valueLabelShape = propsGenerator.valueLabelShape, valueLabelSize = propsGenerator.valueLabelSize, valueLabelTextSize = propsGenerator.valueLabelTextSize, valueTextAlign = propsGenerator.valueTextAlign, valueTextColor = propsGenerator.valueTextColor, valueTextSize = propsGenerator.valueTextSize, valueTextTruncate = propsGenerator.valueTextTruncate, valueTextWeight = propsGenerator.valueTextWeight, valueTextWrap = propsGenerator.valueTextWrap, widthClass = propsGenerator.widthClass, zeroGap = propsGenerator.zeroGap, zeroPadding = propsGenerator.zeroPadding;
157
159
  // @ts-expect-error
158
160
  var _a = useStyles.useStyles(props), dataStyles = _a.data, cellStyles = _a.styles;
159
161
  return (jsxRuntime.jsxs("div", { className: clsx(className, 'cell', sizeClass && "cell_size_".concat(sizeClass), !isActive
@@ -167,7 +169,7 @@ function Cell(props) {
167
169
  ? borderColorHoverClass &&
168
170
  "border-color_hover_".concat(borderColorHoverClass)
169
171
  : borderColorActiveHoverClass &&
170
- "border-color_active_hover_".concat(borderColorActiveHoverClass), shapeClass && "cell_shape_".concat(shapeClass), widthClass && "width_".concat(widthClass), zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap'), style: cellStyles, onClick: onClick, onMouseEnter: onMouseEnter, children: [before && jsxRuntime.jsx("div", { className: "cell__before", children: before }), jsxRuntime.jsxs("div", { className: clsx('cell__wrapper', directionClass && "cell__wrapper_direction_".concat(directionClass), isEqual && 'cell__wrapper-equal'), children: [title && (jsxRuntime.jsxs("div", { className: "cell__data", style: dataStyles, children: [jsxRuntime.jsx(Text.Text, { className: "cell__title", size: titleTextSize, textColor: titleTextColor, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, tag: titleTag, children: title }), (titleIcon || titleIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "cell__title-icon", fill: titleIconFill, fillSize: titleIconFillSize, iconFill: titleIconItemFill, iconFillHover: titleIconFillHover, imageSrc: titleIconSrc, shape: titleIconShape, SvgImage: titleIcon })), (showTitleLabel || titleLabel) && (jsxRuntime.jsx(Label.Label, { className: "cell__title-label", appearance: "".concat(titleLabelAppearance, " ").concat(titleLabelAppearanceSize), size: titleLabelSize, label: titleLabel, labelTextSize: titleLabelTextSize, shape: titleLabelShape }))] })), value && (jsxRuntime.jsxs("div", { className: "cell__data", style: dataStyles, children: [jsxRuntime.jsx(Text.Text, { className: "cell__value", size: valueTextSize, textAlign: valueTextAlign, textColor: valueTextColor, textTruncate: valueTextTruncate, textWeight: valueTextWeight, textWrap: valueTextWrap, tag: valueTag, children: value }), (valueIcon || valueIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "cell__value-icon", fill: valueIconFill, fillSize: valueIconFillSize, iconFill: valueIconItemFill, iconFillHover: valueIconFillHover, imageSrc: valueIconSrc, shape: valueIconShape, SvgImage: valueIcon })), (showValueLabel || valueLabel) && (jsxRuntime.jsx(Label.Label, { className: "cell__value-label", appearance: "".concat(valueLabelAppearance, " ").concat(valueLabelAppearanceSize), size: valueLabelSize, label: valueLabel, labelTextSize: valueLabelTextSize, shape: valueLabelShape }))] }))] }), after && jsxRuntime.jsx("div", { className: "cell__after", children: after })] }));
172
+ "border-color_active_hover_".concat(borderColorActiveHoverClass), reverseClass && "cell_reverse_".concat(reverseClass), shapeClass && "cell_shape_".concat(shapeClass), widthClass && "width_".concat(widthClass), zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap'), style: cellStyles, onClick: onClick, onMouseEnter: onMouseEnter, children: [before && jsxRuntime.jsx("div", { className: "cell__before", children: before }), jsxRuntime.jsxs("div", { className: clsx('cell__wrapper', directionClass && "cell__wrapper_direction_".concat(directionClass), isEqual && 'cell__wrapper-equal'), children: [title && (jsxRuntime.jsxs("div", { className: "cell__data", style: dataStyles, children: [jsxRuntime.jsx(Text.Text, { className: "cell__title", size: titleTextSize, textColor: titleTextColor, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, tag: titleTag, children: title }), (titleIcon || titleIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "cell__title-icon", fill: titleIconFill, fillSize: titleIconFillSize, iconFill: titleIconItemFill, iconFillHover: titleIconFillHover, imageSrc: titleIconSrc, shape: titleIconShape, SvgImage: titleIcon })), (showTitleLabel || titleLabel) && (jsxRuntime.jsx(Label.Label, { className: "cell__title-label", appearance: "".concat(titleLabelAppearance, " ").concat(titleLabelAppearanceSize), size: titleLabelSize, label: titleLabel, labelTextSize: titleLabelTextSize, shape: titleLabelShape }))] })), value && (jsxRuntime.jsxs("div", { className: "cell__data", style: dataStyles, children: [jsxRuntime.jsx(Text.Text, { className: "cell__value", size: valueTextSize, textAlign: valueTextAlign, textColor: valueTextColor, textTruncate: valueTextTruncate, textWeight: valueTextWeight, textWrap: valueTextWrap, tag: valueTag, children: value }), (valueIcon || valueIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "cell__value-icon", fill: valueIconFill, fillSize: valueIconFillSize, iconFill: valueIconItemFill, iconFillHover: valueIconFillHover, imageSrc: valueIconSrc, shape: valueIconShape, SvgImage: valueIcon })), (showValueLabel || valueLabel) && (jsxRuntime.jsx(Label.Label, { className: "cell__value-label", appearance: "".concat(valueLabelAppearance, " ").concat(valueLabelAppearanceSize), size: valueLabelSize, label: valueLabel, labelTextSize: valueLabelTextSize, shape: valueLabelShape }))] }))] }), after && jsxRuntime.jsx("div", { className: "cell__after", children: after })] }));
171
173
  }
172
174
 
173
175
  exports.Cell = Cell;
package/dist/components/Cell.js CHANGED
@@ -28,31 +28,31 @@ import '../Link_es_BnUIX0QT.js';
28
28
  var cellAppearanceSize = {
29
29
  sizeXL: {
30
30
  size: 'xl',
31
- titleLabelAppearanceSize: 'sizeS',
32
- titleTextSize: 'xl',
31
+ titleLabelAppearanceSize: 'sizeXS',
32
+ titleTextSize: 'l',
33
33
  valueLabelAppearanceSize: 'sizeS',
34
- valueTextSize: 's',
34
+ valueTextSize: 'xl',
35
35
  },
36
36
  sizeL: {
37
37
  size: 'l',
38
- titleLabelAppearanceSize: 'sizeS',
39
- titleTextSize: 'l',
38
+ titleLabelAppearanceSize: 'sizeXS',
39
+ titleTextSize: 'm',
40
40
  valueLabelAppearanceSize: 'sizeS',
41
- valueTextSize: 's',
41
+ valueTextSize: 'l',
42
42
  },
43
43
  sizeM: {
44
44
  size: 'm',
45
- titleLabelAppearanceSize: 'sizeS',
46
- titleTextSize: 'm',
45
+ titleLabelAppearanceSize: 'sizeXS',
46
+ titleTextSize: 's',
47
47
  valueLabelAppearanceSize: 'sizeS',
48
- valueTextSize: 's',
48
+ valueTextSize: 'm',
49
49
  },
50
50
  sizeS: {
51
51
  size: 's',
52
52
  titleLabelAppearanceSize: 'sizeXS',
53
- titleTextSize: 's',
54
- valueLabelAppearanceSize: 'sizeXS',
55
- valueTextSize: 'xs',
53
+ titleTextSize: 'xs',
54
+ valueLabelAppearanceSize: 'sizeS',
55
+ valueTextSize: 's',
56
56
  },
57
57
  sizeEqualL: {
58
58
  size: 'l',
@@ -91,9 +91,7 @@ var cellAppearanceStyle = {
91
91
  outlined: {
92
92
  fill: 'none',
93
93
  },
94
- full: {
95
- //
96
- },
94
+ full: {},
97
95
  ghost: {
98
96
  fill: 'none',
99
97
  borderColor: 'none',
@@ -107,6 +105,7 @@ var cellAppearanceSurface = {
107
105
  titleIconItemFill: 'surfaceItemPrimary',
108
106
  titleLabelAppearance: 'accentPrimary',
109
107
  labelTextColor: 'surfaceTextPrimary',
108
+ borderColor: 'surfaceBorderPrimary',
110
109
  valueIconItemFill: 'surfaceItemPrimary',
111
110
  valueLabelAppearance: 'accentPrimary',
112
111
  },
@@ -116,6 +115,7 @@ var cellAppearanceSurface = {
116
115
  titleIconItemFill: 'surfaceItemPrimary',
117
116
  titleLabelAppearance: 'accentPrimary',
118
117
  labelTextColor: 'surfaceTextPrimary',
118
+ borderColor: 'surfaceBorderPrimary',
119
119
  valueIconItemFill: 'surfaceItemPrimary',
120
120
  valueLabelAppearance: 'accentPrimary',
121
121
  },
@@ -125,6 +125,7 @@ var cellAppearanceSurface = {
125
125
  titleIconItemFill: 'surfaceItemPrimary',
126
126
  titleLabelAppearance: 'accentPrimary',
127
127
  labelTextColor: 'surfaceTextPrimary',
128
+ borderColor: 'surfaceBorderPrimary',
128
129
  valueIconItemFill: 'surfaceItemPrimary',
129
130
  valueLabelAppearance: 'accentPrimary',
130
131
  },
@@ -134,6 +135,7 @@ var cellAppearanceSurface = {
134
135
  titleIconItemFill: 'surfaceItemPrimary',
135
136
  titleLabelAppearance: 'accentPrimary',
136
137
  labelTextColor: 'surfaceTextPrimary',
138
+ borderColor: 'surfaceBorderPrimary',
137
139
  valueIconItemFill: 'surfaceItemPrimary',
138
140
  valueLabelAppearance: 'accentPrimary',
139
141
  },
@@ -151,7 +153,7 @@ function Cell(props) {
151
153
  var className = props.className, appearance = props.appearance, title = props.title, titleIcon = props.titleIcon, titleLabel = props.titleLabel, titleTag = props.titleTag, showTitleLabel = props.showTitleLabel, showValueLabel = props.showValueLabel, value = props.value, valueIcon = props.valueIcon, valueTag = props.valueTag, before = props.before, after = props.after, isActive = props.isActive, isEqual = props.isEqual, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
152
154
  var appearanceConfig = useAppearanceConfig(appearance, cellConfig);
153
155
  var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
154
- var directionClass = propsGenerator.directionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, titleIconFill = propsGenerator.titleIconFill, titleIconFillHover = propsGenerator.titleIconFillHover, titleIconFillSize = propsGenerator.titleIconFillSize, titleIconItemFill = propsGenerator.titleIconItemFill, titleIconShape = propsGenerator.titleIconShape, titleIconSrc = propsGenerator.titleIconSrc, titleLabelAppearance = propsGenerator.titleLabelAppearance, titleLabelAppearanceSize = propsGenerator.titleLabelAppearanceSize, titleLabelShape = propsGenerator.titleLabelShape, titleLabelSize = propsGenerator.titleLabelSize, titleLabelTextSize = propsGenerator.titleLabelTextSize, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, titleTextTruncate = propsGenerator.titleTextTruncate, titleTextWeight = propsGenerator.titleTextWeight, titleTextWrap = propsGenerator.titleTextWrap, borderColorActiveClass = propsGenerator.borderColorActiveClass, borderColorActiveHoverClass = propsGenerator.borderColorActiveHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, valueIconFill = propsGenerator.valueIconFill, valueIconFillHover = propsGenerator.valueIconFillHover, valueIconFillSize = propsGenerator.valueIconFillSize, valueIconItemFill = propsGenerator.valueIconItemFill, valueIconShape = propsGenerator.valueIconShape, valueIconSrc = propsGenerator.valueIconSrc, valueLabel = propsGenerator.valueLabel, valueLabelAppearance = propsGenerator.valueLabelAppearance, valueLabelAppearanceSize = propsGenerator.valueLabelAppearanceSize, valueLabelShape = propsGenerator.valueLabelShape, valueLabelSize = propsGenerator.valueLabelSize, valueLabelTextSize = propsGenerator.valueLabelTextSize, valueTextAlign = propsGenerator.valueTextAlign, valueTextColor = propsGenerator.valueTextColor, valueTextSize = propsGenerator.valueTextSize, valueTextTruncate = propsGenerator.valueTextTruncate, valueTextWeight = propsGenerator.valueTextWeight, valueTextWrap = propsGenerator.valueTextWrap, widthClass = propsGenerator.widthClass, zeroGap = propsGenerator.zeroGap, zeroPadding = propsGenerator.zeroPadding;
156
+ var directionClass = propsGenerator.directionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, titleIconFill = propsGenerator.titleIconFill, titleIconFillHover = propsGenerator.titleIconFillHover, titleIconFillSize = propsGenerator.titleIconFillSize, titleIconItemFill = propsGenerator.titleIconItemFill, titleIconShape = propsGenerator.titleIconShape, titleIconSrc = propsGenerator.titleIconSrc, titleLabelAppearance = propsGenerator.titleLabelAppearance, titleLabelAppearanceSize = propsGenerator.titleLabelAppearanceSize, titleLabelShape = propsGenerator.titleLabelShape, titleLabelSize = propsGenerator.titleLabelSize, titleLabelTextSize = propsGenerator.titleLabelTextSize, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, titleTextTruncate = propsGenerator.titleTextTruncate, titleTextWeight = propsGenerator.titleTextWeight, titleTextWrap = propsGenerator.titleTextWrap, borderColorActiveClass = propsGenerator.borderColorActiveClass, borderColorActiveHoverClass = propsGenerator.borderColorActiveHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, reverseClass = propsGenerator.reverseClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, valueIconFill = propsGenerator.valueIconFill, valueIconFillHover = propsGenerator.valueIconFillHover, valueIconFillSize = propsGenerator.valueIconFillSize, valueIconItemFill = propsGenerator.valueIconItemFill, valueIconShape = propsGenerator.valueIconShape, valueIconSrc = propsGenerator.valueIconSrc, valueLabel = propsGenerator.valueLabel, valueLabelAppearance = propsGenerator.valueLabelAppearance, valueLabelAppearanceSize = propsGenerator.valueLabelAppearanceSize, valueLabelShape = propsGenerator.valueLabelShape, valueLabelSize = propsGenerator.valueLabelSize, valueLabelTextSize = propsGenerator.valueLabelTextSize, valueTextAlign = propsGenerator.valueTextAlign, valueTextColor = propsGenerator.valueTextColor, valueTextSize = propsGenerator.valueTextSize, valueTextTruncate = propsGenerator.valueTextTruncate, valueTextWeight = propsGenerator.valueTextWeight, valueTextWrap = propsGenerator.valueTextWrap, widthClass = propsGenerator.widthClass, zeroGap = propsGenerator.zeroGap, zeroPadding = propsGenerator.zeroPadding;
155
157
  // @ts-expect-error
156
158
  var _a = useStyles(props), dataStyles = _a.data, cellStyles = _a.styles;
157
159
  return (jsxs("div", { className: clsx(className, 'cell', sizeClass && "cell_size_".concat(sizeClass), !isActive
@@ -165,7 +167,7 @@ function Cell(props) {
165
167
  ? borderColorHoverClass &&
166
168
  "border-color_hover_".concat(borderColorHoverClass)
167
169
  : borderColorActiveHoverClass &&
168
- "border-color_active_hover_".concat(borderColorActiveHoverClass), shapeClass && "cell_shape_".concat(shapeClass), widthClass && "width_".concat(widthClass), zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap'), style: cellStyles, onClick: onClick, onMouseEnter: onMouseEnter, children: [before && jsx("div", { className: "cell__before", children: before }), jsxs("div", { className: clsx('cell__wrapper', directionClass && "cell__wrapper_direction_".concat(directionClass), isEqual && 'cell__wrapper-equal'), children: [title && (jsxs("div", { className: "cell__data", style: dataStyles, children: [jsx(Text, { className: "cell__title", size: titleTextSize, textColor: titleTextColor, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, tag: titleTag, children: title }), (titleIcon || titleIconSrc) && (jsx(Icon, { className: "cell__title-icon", fill: titleIconFill, fillSize: titleIconFillSize, iconFill: titleIconItemFill, iconFillHover: titleIconFillHover, imageSrc: titleIconSrc, shape: titleIconShape, SvgImage: titleIcon })), (showTitleLabel || titleLabel) && (jsx(Label, { className: "cell__title-label", appearance: "".concat(titleLabelAppearance, " ").concat(titleLabelAppearanceSize), size: titleLabelSize, label: titleLabel, labelTextSize: titleLabelTextSize, shape: titleLabelShape }))] })), value && (jsxs("div", { className: "cell__data", style: dataStyles, children: [jsx(Text, { className: "cell__value", size: valueTextSize, textAlign: valueTextAlign, textColor: valueTextColor, textTruncate: valueTextTruncate, textWeight: valueTextWeight, textWrap: valueTextWrap, tag: valueTag, children: value }), (valueIcon || valueIconSrc) && (jsx(Icon, { className: "cell__value-icon", fill: valueIconFill, fillSize: valueIconFillSize, iconFill: valueIconItemFill, iconFillHover: valueIconFillHover, imageSrc: valueIconSrc, shape: valueIconShape, SvgImage: valueIcon })), (showValueLabel || valueLabel) && (jsx(Label, { className: "cell__value-label", appearance: "".concat(valueLabelAppearance, " ").concat(valueLabelAppearanceSize), size: valueLabelSize, label: valueLabel, labelTextSize: valueLabelTextSize, shape: valueLabelShape }))] }))] }), after && jsx("div", { className: "cell__after", children: after })] }));
170
+ "border-color_active_hover_".concat(borderColorActiveHoverClass), reverseClass && "cell_reverse_".concat(reverseClass), shapeClass && "cell_shape_".concat(shapeClass), widthClass && "width_".concat(widthClass), zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap'), style: cellStyles, onClick: onClick, onMouseEnter: onMouseEnter, children: [before && jsx("div", { className: "cell__before", children: before }), jsxs("div", { className: clsx('cell__wrapper', directionClass && "cell__wrapper_direction_".concat(directionClass), isEqual && 'cell__wrapper-equal'), children: [title && (jsxs("div", { className: "cell__data", style: dataStyles, children: [jsx(Text, { className: "cell__title", size: titleTextSize, textColor: titleTextColor, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, tag: titleTag, children: title }), (titleIcon || titleIconSrc) && (jsx(Icon, { className: "cell__title-icon", fill: titleIconFill, fillSize: titleIconFillSize, iconFill: titleIconItemFill, iconFillHover: titleIconFillHover, imageSrc: titleIconSrc, shape: titleIconShape, SvgImage: titleIcon })), (showTitleLabel || titleLabel) && (jsx(Label, { className: "cell__title-label", appearance: "".concat(titleLabelAppearance, " ").concat(titleLabelAppearanceSize), size: titleLabelSize, label: titleLabel, labelTextSize: titleLabelTextSize, shape: titleLabelShape }))] })), value && (jsxs("div", { className: "cell__data", style: dataStyles, children: [jsx(Text, { className: "cell__value", size: valueTextSize, textAlign: valueTextAlign, textColor: valueTextColor, textTruncate: valueTextTruncate, textWeight: valueTextWeight, textWrap: valueTextWrap, tag: valueTag, children: value }), (valueIcon || valueIconSrc) && (jsx(Icon, { className: "cell__value-icon", fill: valueIconFill, fillSize: valueIconFillSize, iconFill: valueIconItemFill, iconFillHover: valueIconFillHover, imageSrc: valueIconSrc, shape: valueIconShape, SvgImage: valueIcon })), (showValueLabel || valueLabel) && (jsx(Label, { className: "cell__value-label", appearance: "".concat(valueLabelAppearance, " ").concat(valueLabelAppearanceSize), size: valueLabelSize, label: valueLabel, labelTextSize: valueLabelTextSize, shape: valueLabelShape }))] }))] }), after && jsx("div", { className: "cell__after", children: after })] }));
169
171
  }
170
172
 
171
173
  export { Cell, cellAppearance, cellConfig };
package/dist/css/components/Cell/Cell.css CHANGED
@@ -105,6 +105,16 @@
105
105
  background-position: -200%;
106
106
  }
107
107
  }
108
+ .cell {
109
+ &_reverse {
110
+ &_true {
111
+ ^^&__wrapper {
112
+ display: flex;
113
+ flex-direction: column-reverse;
114
+ }
115
+ }
116
+ }
117
+ }
108
118
  :root {
109
119
  --cell-size-xl-padding: 4px 6px;
110
120
  --cell-size-xl-gap: 4px;
package/dist/types/components/Cell/appearance/cellSurface.d.ts CHANGED
@@ -5,6 +5,7 @@ declare const cellAppearanceSurface: {
5
5
  titleIconItemFill: string;
6
6
  titleLabelAppearance: string;
7
7
  labelTextColor: string;
8
+ borderColor: string;
8
9
  valueIconItemFill: string;
9
10
  valueLabelAppearance: string;
10
11
  };
@@ -14,6 +15,7 @@ declare const cellAppearanceSurface: {
14
15
  titleIconItemFill: string;
15
16
  titleLabelAppearance: string;
16
17
  labelTextColor: string;
18
+ borderColor: string;
17
19
  valueIconItemFill: string;
18
20
  valueLabelAppearance: string;
19
21
  };
@@ -23,6 +25,7 @@ declare const cellAppearanceSurface: {
23
25
  titleIconItemFill: string;
24
26
  titleLabelAppearance: string;
25
27
  labelTextColor: string;
28
+ borderColor: string;
26
29
  valueIconItemFill: string;
27
30
  valueLabelAppearance: string;
28
31
  };
@@ -32,6 +35,7 @@ declare const cellAppearanceSurface: {
32
35
  titleIconItemFill: string;
33
36
  titleLabelAppearance: string;
34
37
  labelTextColor: string;
38
+ borderColor: string;
35
39
  valueIconItemFill: string;
36
40
  valueLabelAppearance: string;
37
41
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itcase/ui",
3
- "version": "1.8.50",
3
+ "version": "1.8.51",
4
4
  "description": "UI components (Modal, Loader, Popup, etc)",
5
5
  "keywords": [
6
6
  "Modal",