@itcase/ui 1.0.86 → 1.0.87

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 (7) hide show
  1. package/dist/components/Cell.js +16 -12
  2. package/dist/components/Choice.js +7 -1
  3. package/dist/components/Dropdown.js +4 -5
  4. package/dist/components/Icon.js +13 -1
  5. package/dist/components/Input.js +32 -5
  6. package/dist/css/components/Input/Input.css +16 -8
  7. package/package.json +1 -1
package/dist/components/Cell.js CHANGED
@@ -44,7 +44,7 @@ var clsx__default = /*#__PURE__*/_interopDefault(clsx);
44
44
  function Cell(props) {
45
45
  const {
46
46
  className,
47
- isShowTitleIcon,
47
+ showTitleIcon,
48
48
  titleIconFill,
49
49
  titleIconFillSize,
50
50
  titleIconIconFill,
@@ -53,7 +53,7 @@ function Cell(props) {
53
53
  titleIconSrc,
54
54
  titleIconShape,
55
55
  titleIcon,
56
- isShowValueIcon,
56
+ showValueIcon,
57
57
  valueIconFill,
58
58
  valueIconFillSize,
59
59
  valueIconIconFill,
@@ -78,7 +78,7 @@ function Cell(props) {
78
78
  titleTextSize,
79
79
  titleTextColor,
80
80
  titleTextWeight,
81
- isShowTitleLabel,
81
+ showTitleLabel,
82
82
  titleLabelAppearance,
83
83
  titleLabel,
84
84
  titleLabelTextSize,
@@ -90,9 +90,11 @@ function Cell(props) {
90
90
  valueLabelTextSize,
91
91
  valueLabelShape,
92
92
  valueLabelSize,
93
- isZeroPadding,
94
- isZeroGap,
95
- isReverse,
93
+ titleTextWrap,
94
+ valueTextWrap,
95
+ zeroPadding,
96
+ zeroGap,
97
+ reverse,
96
98
  onClick,
97
99
  onMouseEnter
98
100
  } = props;
@@ -145,7 +147,7 @@ function Cell(props) {
145
147
  propsKey: 'width'
146
148
  });
147
149
  return /*#__PURE__*/React__default.default.createElement("div", {
148
- className: clsx__default.default(className, 'cell', size && `cell_size_${size}`, set && `cell_set_${set}`, bgFillClass, bgFillHoverClass, isActive && bgFillActiveClass, isDisabled && bgFillDisabledClass, bgShapeClass, widthClass, isZeroPadding && 'cell_reset-padding', isZeroGap && 'cell_reset-gap', isReverse && 'cell_reverse'),
150
+ className: clsx__default.default(className, 'cell', size && `cell_size_${size}`, set && `cell_set_${set}`, bgFillClass, bgFillHoverClass, isActive && bgFillActiveClass, isDisabled && bgFillDisabledClass, bgShapeClass, widthClass, zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap', reverse && 'cell_reverse'),
149
151
  onClick: onClick,
150
152
  onMouseEnter: onMouseEnter
151
153
  }, before && /*#__PURE__*/React__default.default.createElement("div", {
@@ -159,8 +161,9 @@ function Cell(props) {
159
161
  size: titleTextSize,
160
162
  tag: titleTag,
161
163
  textColor: titleTextColor,
162
- textWeight: titleTextWeight
163
- }, title), isShowTitleIcon && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
164
+ textWeight: titleTextWeight,
165
+ textWrap: titleTextWrap
166
+ }, title), showTitleIcon && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
164
167
  className: "cell__icon",
165
168
  fill: titleIconFill,
166
169
  fillSize: titleIconFillSize,
@@ -170,7 +173,7 @@ function Cell(props) {
170
173
  imageSrc: titleIconSrc,
171
174
  shape: titleIconShape,
172
175
  SvgImage: titleIcon
173
- }), isShowTitleLabel && /*#__PURE__*/React__default.default.createElement(index$2.Label, {
176
+ }), showTitleLabel && /*#__PURE__*/React__default.default.createElement(index$2.Label, {
174
177
  appearance: titleLabelAppearance,
175
178
  label: titleLabel,
176
179
  labelTextSize: titleLabelTextSize,
@@ -183,8 +186,9 @@ function Cell(props) {
183
186
  size: valueTextSize,
184
187
  tag: valueTag,
185
188
  textColor: valueTextColor,
186
- textWeight: valueTextWeight
187
- }, value), isShowValueIcon && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
189
+ textWeight: valueTextWeight,
190
+ textWrap: valueTextWrap
191
+ }, value), showValueIcon && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
188
192
  className: "cell__icon",
189
193
  fill: valueIconFill,
190
194
  fillSize: valueIconFillSize,
package/dist/components/Choice.js CHANGED
@@ -46,6 +46,7 @@ const Choice = /*#__PURE__*/React__default.default.forwardRef(function Choice(pr
46
46
  type,
47
47
  options,
48
48
  active,
49
+ isDisabled,
49
50
  set,
50
51
  setActiveSegment,
51
52
  size,
@@ -55,6 +56,8 @@ const Choice = /*#__PURE__*/React__default.default.forwardRef(function Choice(pr
55
56
  before,
56
57
  after,
57
58
  icon,
59
+ iconFillDisabled,
60
+ iconStrokeDisabled,
58
61
  activeIcon,
59
62
  iconSize,
60
63
  activeIconItemFill,
@@ -110,6 +113,7 @@ const Choice = /*#__PURE__*/React__default.default.forwardRef(function Choice(pr
110
113
  className: "choice__item-radio",
111
114
  id: `${name}-${item.value}`,
112
115
  name: name,
116
+ disabled: isDisabled,
113
117
  type: isMultiple ? 'checkbox' : 'radio',
114
118
  value: item.value,
115
119
  onChange: event => onChange(event, item)
@@ -122,8 +126,10 @@ const Choice = /*#__PURE__*/React__default.default.forwardRef(function Choice(pr
122
126
  }, item.label), (icon || activeIcon) && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
123
127
  className: "choice__item-icon",
124
128
  iconFill: item.value === active.value ? activeIconItemFill : iconItemFill,
129
+ iconFillDisabled: isDisabled && iconFillDisabled,
125
130
  iconSize: iconSize,
126
- stroke: iconStroke,
131
+ iconStroke: iconStroke,
132
+ iconStrokeDisabled: isDisabled && iconStrokeDisabled,
127
133
  SvgImage: item.value === active.value ? activeIcon : icon
128
134
  }), after)))));
129
135
  });
package/dist/components/Dropdown.js CHANGED
@@ -112,11 +112,10 @@ function Dropdown(props) {
112
112
  className: clsx__default.default(className, 'dropdown', set && `dropdown_set_${set}`, shapeClass, elevationClass, isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className),
113
113
  ref: dropdownRef,
114
114
  style: styles
115
- }, children &&
116
-
117
- // Add "onAnimationEnd" only for wrapper for ignore dropdown button
118
- React__default.default.createElement("div", {
119
- className: clsx__default.default('dropdown__wrapper', fillClass, fillHoverClass),
115
+ }, children && /*#__PURE__*/React__default.default.createElement("div", {
116
+ className: clsx__default.default('dropdown__wrapper', fillClass, fillHoverClass)
117
+ // Add "onAnimationEnd" only for wrapper for ignore dropdown button
118
+ ,
120
119
  onAnimationEnd: onAnimationEnd
121
120
  }, children));
122
121
  }
package/dist/components/Icon.js CHANGED
@@ -82,6 +82,10 @@ const Icon = /*#__PURE__*/React__default.default.forwardRef(function Icon(props,
82
82
  prefix: 'fill_hover_',
83
83
  propsKey: 'fillHover'
84
84
  });
85
+ const fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
86
+ prefix: 'fill_disabled_',
87
+ propsKey: 'fillDisabled'
88
+ });
85
89
  const fillSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
86
90
  prefix: 'icon_fill_size_',
87
91
  propsKey: 'fillSize'
@@ -94,6 +98,10 @@ const Icon = /*#__PURE__*/React__default.default.forwardRef(function Icon(props,
94
98
  prefix: 'icon_fill_hover_',
95
99
  propsKey: 'iconFillHover'
96
100
  });
101
+ const iconFillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
102
+ prefix: 'icon_fill_disabled_',
103
+ propsKey: 'iconFillDisabled'
104
+ });
97
105
  const iconStrokeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
98
106
  prefix: 'icon_stroke_',
99
107
  propsKey: 'iconStroke'
@@ -102,6 +110,10 @@ const Icon = /*#__PURE__*/React__default.default.forwardRef(function Icon(props,
102
110
  prefix: 'icon_stroke_hover_',
103
111
  propsKey: 'iconStrokeHover'
104
112
  });
113
+ const iconStrokeDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
114
+ prefix: 'icon_stroke_disabled_',
115
+ propsKey: 'iconStrokeDisabled'
116
+ });
105
117
  const iconSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
106
118
  prefix: 'icon_size_',
107
119
  propsKey: 'iconSize'
@@ -147,7 +159,7 @@ const Icon = /*#__PURE__*/React__default.default.forwardRef(function Icon(props,
147
159
  return null;
148
160
  }, [SvgImage, imageSrc]);
149
161
  return /*#__PURE__*/React__default.default.createElement("div", {
150
- className: clsx__default.default(className, 'icon', fillClass, fillHoverClass, fillSizeClass, iconFillClass, iconFillHoverClass, shapeClass, iconStrokeClass, iconStrokeHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, cursorClass, Badge && 'icon_type_with-badge', (link || href || onClick) && 'cursor_type_pointer'),
162
+ className: clsx__default.default(className, 'icon', fillClass, fillHoverClass, fillSizeClass, fillDisabledClass, iconFillClass, iconFillHoverClass, iconFillDisabledClass, shapeClass, iconStrokeClass, iconStrokeHoverClass, iconStrokeDisabledClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, cursorClass, Badge && 'icon_type_with-badge', (link || href || onClick) && 'cursor_type_pointer'),
151
163
  "data-tour": dataTour,
152
164
  id: id,
153
165
  ref: ref,
package/dist/components/Input.js CHANGED
@@ -30,7 +30,7 @@ const Input = /*#__PURE__*/React__default.default.forwardRef(function Input(prop
30
30
  type,
31
31
  className,
32
32
  placeholder,
33
- disabled,
33
+ isDisabled,
34
34
  value,
35
35
  onBlur,
36
36
  onChange,
@@ -41,6 +41,10 @@ const Input = /*#__PURE__*/React__default.default.forwardRef(function Input(prop
41
41
  prefix: 'fill_',
42
42
  propsKey: 'fill'
43
43
  });
44
+ const fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
45
+ prefix: 'fill_disabled_',
46
+ propsKey: 'fillDisabled'
47
+ });
44
48
  const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
45
49
  prefix: 'input_size_',
46
50
  propsKey: 'size'
@@ -57,6 +61,10 @@ const Input = /*#__PURE__*/React__default.default.forwardRef(function Input(prop
57
61
  prefix: 'text-color_',
58
62
  propsKey: 'textColor'
59
63
  });
64
+ const textColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
65
+ prefix: 'text-color_disabled_',
66
+ propsKey: 'textColor'
67
+ });
60
68
  const caretClass = useDeviceTargetClass.useDeviceTargetClass(props, {
61
69
  prefix: 'caret-color_',
62
70
  propsKey: 'caret'
@@ -65,6 +73,10 @@ const Input = /*#__PURE__*/React__default.default.forwardRef(function Input(prop
65
73
  prefix: 'placeholder-text-color_',
66
74
  propsKey: 'placeholderTextColor'
67
75
  });
76
+ const placeholderTextColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
77
+ prefix: 'placeholder-text-color_disabled_',
78
+ propsKey: 'placeholderTextColorDisabled'
79
+ });
68
80
  const weightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
69
81
  prefix: 'text-weight_',
70
82
  propsKey: 'textWeight'
@@ -73,21 +85,36 @@ const Input = /*#__PURE__*/React__default.default.forwardRef(function Input(prop
73
85
  prefix: 'border-width_',
74
86
  propsKey: 'borderWidth'
75
87
  });
88
+ const borderWidthDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
89
+ prefix: 'border-width_disabled_',
90
+ propsKey: 'borderWidthDisabled'
91
+ });
76
92
  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
77
93
  prefix: 'border-color_',
78
94
  propsKey: 'borderColor'
79
95
  });
96
+ const borderColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
97
+ prefix: 'border-color_disabled_',
98
+ propsKey: 'borderColorDisabled'
99
+ });
80
100
  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
81
101
  prefix: 'width_',
82
102
  propsKey: 'width'
83
103
  });
104
+
105
+ // const disabledClasses = {
106
+ // 'borderColorClass': 'borderColorDisabledClass',
107
+ // 'placeholderTextColorClass': 'placeholderTextColorDisabledClass',
108
+ // 'textColorClass': 'textColorDisabledClass'
109
+ // }
110
+
84
111
  return /*#__PURE__*/React__default.default.createElement("input", {
85
- className: clsx__default.default(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, fillClass, shapeClass, textSizeClass, weightClass, widthClass, borderWidthClass, sizeClass, borderColorClass || inputConfig.state[state]?.borderColor && `border-color_${inputConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), placeholderTextColorClass || inputConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textColorClass || inputConfig.state[state]?.textColor && `text-color_${inputConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase()),
112
+ className: clsx__default.default(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, !isDisabled ? fillClass : fillDisabledClass, shapeClass, textSizeClass, weightClass, widthClass, !isDisabled ? borderWidthClass : borderWidthDisabledClass, sizeClass, !isDisabled ? borderColorClass || inputConfig.state[state]?.borderColor && `border-color_${inputConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : borderColorDisabledClass || inputConfig.state[state]?.borderColor && `border-color_disabled_${inputConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? placeholderTextColorClass || inputConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : placeholderTextColorDisabledClass || inputConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? textColorClass || inputConfig.state[state]?.textColor && `text-color_${inputConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : textColorDisabledClass || inputConfig.state[state]?.textColor && `text-color_${inputConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase()),
86
113
  type: type,
87
114
  id: id,
88
115
  index: index,
89
116
  ref: ref,
90
- disabled: disabled,
117
+ disabled: isDisabled,
91
118
  placeholder: placeholder,
92
119
  value: value,
93
120
  onBlur: onBlur,
@@ -102,7 +129,7 @@ Input.propTypes = {
102
129
  placeholder: PropTypes__default.default.string,
103
130
  value: PropTypes__default.default.string,
104
131
  checked: PropTypes__default.default.bool,
105
- disabled: PropTypes__default.default.bool,
132
+ isDisabled: PropTypes__default.default.bool,
106
133
  onBlur: PropTypes__default.default.func,
107
134
  onChange: PropTypes__default.default.func,
108
135
  onKeyDown: PropTypes__default.default.func,
@@ -170,7 +197,7 @@ Input.__docgenInfo = {
170
197
  },
171
198
  "required": false
172
199
  },
173
- "disabled": {
200
+ "isDisabled": {
174
201
  "description": "",
175
202
  "type": {
176
203
  "name": "bool"
package/dist/css/components/Input/Input.css CHANGED
@@ -1,32 +1,40 @@
1
1
  .input {
2
- border: none;
3
- appearance: none;
2
+ min-width: unset;
4
3
  padding: 0;
5
4
  margin: 0;
6
- min-width: unset;
5
+ border: none;
6
+ position: relative;
7
7
  box-shadow: none;
8
+ appearance: none;
8
9
  outline: 0;
9
- position: relative;
10
10
  caret-color: var(--input-caret-color);
11
+ &:disabled {
12
+ background: var(--input-state-disabled-background, #ECECEC);
13
+ border: solid 1px var(--input-state-disabled-border, #747474);
14
+ &:hover {
15
+ background: var(--input-state-disabled-background, #ECECEC);
16
+ border: solid 1px var(--input-state-disabled-border, #747474);
17
+ }
18
+ }
11
19
  &:focus {
12
20
  outline: none;
13
21
  }
14
22
  &:hover {
15
- border: solid 1px var(--input-state-hover-border);
16
23
  background: var(--input-state-hover-background);
24
+ border: solid 1px var(--input-state-hover-border);
17
25
  }
18
26
  &&_state {
19
27
  &_success {
20
- border: solid 1px var(--input-state-success-border);
21
28
  background: var(--input-state-success-background);
29
+ border: solid 1px var(--input-state-success-border);
22
30
  }
23
31
  &_error {
24
- border: solid 1px var(--input-state-error-border);
25
32
  background: var(--input-state-error-background);
33
+ border: solid 1px var(--input-state-error-border);
26
34
  }
27
35
  &_focus {
28
- border: solid 1px var(--input-state-focus-border);
29
36
  background: var(--input-state-focus-background);
37
+ border: solid 1px var(--input-state-focus-border);
30
38
  }
31
39
  }
32
40
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itcase/ui",
3
- "version": "1.0.86",
3
+ "version": "1.0.87",
4
4
  "description": "UI components (Modal, Loader, Popup, etc)",
5
5
  "keywords": [
6
6
  "Modal",