@invoicebox/ui 0.1.0-alpha.300 → 0.1.0-alpha.301

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 (21) hide show
  1. package/dist/components/form/Autocomplete/components/Autocomplete/index.js +6 -10
  2. package/dist/components/form/Autocomplete/components/Autocomplete/index.stories.js +2 -1
  3. package/dist/components/form/CurrencyInput/CoreCurrencyInput/index.stories.js +2 -1
  4. package/dist/components/form/DateInput/index.js +3 -1
  5. package/dist/components/form/DateTimeInput/index.js +1 -1
  6. package/dist/components/form/PositiveIntegerInput/index.js +6 -10
  7. package/dist/components/form/Select/components/Input/index.js +5 -2
  8. package/dist/components/form/Select/index.stories.js +2 -1
  9. package/dist/components/form/TextInput/index.js +6 -10
  10. package/dist/components/form/TextInput/index.stories.js +2 -1
  11. package/dist/esm/components/form/Autocomplete/components/Autocomplete/index.js +6 -10
  12. package/dist/esm/components/form/Autocomplete/components/Autocomplete/index.stories.js +2 -1
  13. package/dist/esm/components/form/CurrencyInput/CoreCurrencyInput/index.stories.js +2 -1
  14. package/dist/esm/components/form/DateInput/index.js +3 -1
  15. package/dist/esm/components/form/DateTimeInput/index.js +1 -1
  16. package/dist/esm/components/form/PositiveIntegerInput/index.js +6 -10
  17. package/dist/esm/components/form/Select/components/Input/index.js +5 -2
  18. package/dist/esm/components/form/Select/index.stories.js +2 -1
  19. package/dist/esm/components/form/TextInput/index.js +6 -10
  20. package/dist/esm/components/form/TextInput/index.stories.js +2 -1
  21. package/package.json +1 -1
package/dist/components/form/Autocomplete/components/Autocomplete/index.js CHANGED
@@ -131,13 +131,9 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
131
131
  return _constants.SIZE_PARAMS_MAP[size];
132
132
  }
133
133
  }, [value, isOpen, useModernStyles, size, inputLabel]);
134
- var inputPlaceholder = (0, _react.useMemo)(function () {
135
- if (useModernStyles) {
136
- return undefined;
137
- } else {
138
- return placeholder;
139
- }
140
- }, [placeholder, useModernStyles]);
134
+ var modernInputPlaceholder = (0, _react.useMemo)(function () {
135
+ return placeholder || label;
136
+ }, [label, placeholder]);
141
137
  var isModernPlaceholderVisible = (0, _react.useMemo)(function () {
142
138
  return !isOpen && !value;
143
139
  }, [isOpen, value]);
@@ -203,13 +199,13 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
203
199
  useModernStyles: useModernStyles,
204
200
  size: size,
205
201
  left: useModernStyles ? inputPaddingLeft : undefined
206
- }, /*#__PURE__*/_react["default"].createElement(S.InputLabelContent, null, children ? /*#__PURE__*/_react["default"].createElement(S.ChildrenWrapper, null, children) : null, useModernStyles && placeholder && /*#__PURE__*/_react["default"].createElement(_ModernPlaceholder.ModernPlaceholder, {
202
+ }, /*#__PURE__*/_react["default"].createElement(S.InputLabelContent, null, children ? /*#__PURE__*/_react["default"].createElement(S.ChildrenWrapper, null, children) : null, useModernStyles && modernInputPlaceholder && /*#__PURE__*/_react["default"].createElement(_ModernPlaceholder.ModernPlaceholder, {
207
203
  visible: isModernPlaceholderVisible,
208
204
  paddingLeft: inputPaddingLeft !== null && inputPaddingLeft !== void 0 ? inputPaddingLeft : 20,
209
205
  paddingTop: _constants.SIZE_PARAMS_MAP[size].paddingTop,
210
206
  size: size,
211
207
  required: required
212
- }, placeholder), /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
208
+ }, modernInputPlaceholder), /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
213
209
  ref: ref,
214
210
  hasError: hasError,
215
211
  inFocus: inFocus,
@@ -218,7 +214,7 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
218
214
  onFocus: handleInputFocus,
219
215
  onBlur: handleBlur,
220
216
  name: name,
221
- placeholder: inputPlaceholder,
217
+ placeholder: useModernStyles ? undefined : placeholder,
222
218
  disabled: disabled,
223
219
  paddingLeft: inputPaddingLeft,
224
220
  maxLength: inputMaxLength,
package/dist/components/form/Autocomplete/components/Autocomplete/index.stories.js CHANGED
@@ -58,7 +58,8 @@ var Default = exports.Default = {
58
58
  isCustomOptionRender: false,
59
59
  children: 'children',
60
60
  inputPaddingLeft: 60,
61
- readOnly: false
61
+ readOnly: false,
62
+ useModernStyles: true
62
63
  },
63
64
  render: Component
64
65
  };
package/dist/components/form/CurrencyInput/CoreCurrencyInput/index.stories.js CHANGED
@@ -36,7 +36,8 @@ var Default = exports.Default = {
36
36
  args: {
37
37
  label: 'Label',
38
38
  size: 'L',
39
- disabled: false
39
+ disabled: false,
40
+ useModernStyles: true
40
41
  },
41
42
  render: Component
42
43
  };
package/dist/components/form/DateInput/index.js CHANGED
@@ -129,7 +129,9 @@ var DateInput = exports.DateInput = function DateInput(_ref) {
129
129
  return placeholder || _logic.logic.getPlaceholder();
130
130
  }
131
131
  }, [placeholder, useModernStyles]);
132
- var modernPlaceholderText = placeholder || _logic.logic.getPlaceholder();
132
+ var modernPlaceholderText = (0, _react.useMemo)(function () {
133
+ return placeholder || label || _logic.logic.getPlaceholder();
134
+ }, [label, placeholder]);
133
135
  var isModernPlaceholderVisible = (0, _react.useMemo)(function () {
134
136
  return !isOpen && !stringValue;
135
137
  }, [isOpen, stringValue]);
package/dist/components/form/DateTimeInput/index.js CHANGED
@@ -156,7 +156,7 @@ var DateTimeInput = exports.DateTimeInput = function DateTimeInput(_ref) {
156
156
  return placeholder || _logic.logic.getPlaceholder(withTime);
157
157
  }
158
158
  }, [placeholder, useModernStyles, withTime]);
159
- var modernPlaceholderText = placeholder || _logic.logic.getPlaceholder(withTime);
159
+ var modernPlaceholderText = placeholder || label || _logic.logic.getPlaceholder(withTime);
160
160
  var isModernPlaceholderVisible = (0, _react.useMemo)(function () {
161
161
  return !isOpen && !stringValue;
162
162
  }, [isOpen, stringValue]);
package/dist/components/form/PositiveIntegerInput/index.js CHANGED
@@ -72,13 +72,9 @@ var PositiveIntegerInput = exports.PositiveIntegerInput = function PositiveInteg
72
72
  var handleDown = (0, _react.useCallback)(function () {
73
73
  onChange(decrement(value));
74
74
  }, [decrement, value, onChange]);
75
- var inputPlaceholder = (0, _react.useMemo)(function () {
76
- if (useModernStyles) {
77
- return undefined;
78
- } else {
79
- return placeholder;
80
- }
81
- }, [placeholder, useModernStyles]);
75
+ var modernInputPlaceholder = (0, _react.useMemo)(function () {
76
+ return placeholder || label;
77
+ }, [label, placeholder]);
82
78
  var isModernPlaceholderVisible = (0, _react.useMemo)(function () {
83
79
  return !inFocus && value === null;
84
80
  }, [inFocus, value]);
@@ -105,15 +101,15 @@ var PositiveIntegerInput = exports.PositiveIntegerInput = function PositiveInteg
105
101
  label: inputLabel,
106
102
  useModernStyles: useModernStyles,
107
103
  size: size
108
- }, /*#__PURE__*/_react["default"].createElement(S.ControlWrapper, null, useModernStyles && placeholder && /*#__PURE__*/_react["default"].createElement(_ModernPlaceholder.ModernPlaceholder, {
104
+ }, /*#__PURE__*/_react["default"].createElement(S.ControlWrapper, null, useModernStyles && modernInputPlaceholder && /*#__PURE__*/_react["default"].createElement(_ModernPlaceholder.ModernPlaceholder, {
109
105
  visible: isModernPlaceholderVisible,
110
106
  paddingTop: _constants.SIZE_PARAMS_MAP[size].paddingTop,
111
107
  size: size
112
- }, placeholder), /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
108
+ }, modernInputPlaceholder), /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
113
109
  name: name,
114
110
  hasError: hasError,
115
111
  inFocus: inFocus,
116
- placeholder: inputPlaceholder,
112
+ placeholder: useModernStyles ? undefined : placeholder,
117
113
  onFocus: handleFocus,
118
114
  onBlur: handleBlur,
119
115
  value: normalizeFrom(value),
package/dist/components/form/Select/components/Input/index.js CHANGED
@@ -38,6 +38,9 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
38
38
  var isModernPlaceholderVisible = (0, _react.useMemo)(function () {
39
39
  return useModernStyles && !isOpen && !value;
40
40
  }, [isOpen, useModernStyles, value]);
41
+ var modernInputPlaceholder = (0, _react.useMemo)(function () {
42
+ return placeholder || label;
43
+ }, [label, placeholder]);
41
44
  var paddingOptions = (0, _react.useMemo)(function () {
42
45
  if ((value || isOpen) && useModernStyles && label) {
43
46
  return _constants.MODERN_STYLE_SIZE_PARAMS_MAP[size];
@@ -51,12 +54,12 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
51
54
  required: required,
52
55
  useModernStyles: useModernStyles,
53
56
  size: size
54
- }, /*#__PURE__*/_react["default"].createElement(S.ControlWrapper, null, useModernStyles && placeholder && /*#__PURE__*/_react["default"].createElement(_ModernPlaceholder.ModernPlaceholder, {
57
+ }, /*#__PURE__*/_react["default"].createElement(S.ControlWrapper, null, useModernStyles && modernInputPlaceholder && /*#__PURE__*/_react["default"].createElement(_ModernPlaceholder.ModernPlaceholder, {
55
58
  visible: isModernPlaceholderVisible,
56
59
  paddingTop: _constants.SIZE_PARAMS_MAP[size !== null && size !== void 0 ? size : 'M'].paddingTop,
57
60
  size: size !== null && size !== void 0 ? size : 'M',
58
61
  required: required
59
- }, placeholder), /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
62
+ }, modernInputPlaceholder), /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
60
63
  ref: ref,
61
64
  hasError: hasError,
62
65
  inFocus: inFocus,
package/dist/components/form/Select/index.stories.js CHANGED
@@ -138,7 +138,8 @@ var COMMON_ARGS = {
138
138
  id: 12,
139
139
  name: 'name option 12'
140
140
  }
141
- }]
141
+ }],
142
+ useModernStyles: true
142
143
  };
143
144
  var COLORS_BY_ID_MAP = {
144
145
  1: 'red',
package/dist/components/form/TextInput/index.js CHANGED
@@ -73,13 +73,9 @@ var TextInput = exports.TextInput = /*#__PURE__*/_react["default"].forwardRef(fu
73
73
  return _constants.SIZE_PARAMS_MAP[size];
74
74
  }
75
75
  }, [value, inFocus, useModernStyles, size, inputLabel]);
76
- var inputPlaceholder = (0, _react.useMemo)(function () {
77
- if (useModernStyles) {
78
- return undefined;
79
- } else {
80
- return placeholder;
81
- }
82
- }, [placeholder, useModernStyles]);
76
+ var modernInputPlaceholder = (0, _react.useMemo)(function () {
77
+ return placeholder || label;
78
+ }, [label, placeholder]);
83
79
  var isModernPlaceholderVisible = (0, _react.useMemo)(function () {
84
80
  return !inFocus && !value;
85
81
  }, [inFocus, value]);
@@ -90,12 +86,12 @@ var TextInput = exports.TextInput = /*#__PURE__*/_react["default"].forwardRef(fu
90
86
  required: required,
91
87
  size: size,
92
88
  useModernStyles: useModernStyles
93
- }, /*#__PURE__*/_react["default"].createElement(S.InputLabelContent, null, useModernStyles && placeholder && /*#__PURE__*/_react["default"].createElement(_ModernPlaceholder.ModernPlaceholder, {
89
+ }, /*#__PURE__*/_react["default"].createElement(S.InputLabelContent, null, useModernStyles && modernInputPlaceholder && /*#__PURE__*/_react["default"].createElement(_ModernPlaceholder.ModernPlaceholder, {
94
90
  visible: isModernPlaceholderVisible,
95
91
  paddingTop: _constants.SIZE_PARAMS_MAP[size].paddingTop,
96
92
  size: size,
97
93
  required: required
98
- }, placeholder), /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
94
+ }, modernInputPlaceholder), /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
99
95
  id: id,
100
96
  ref: ref,
101
97
  name: name,
@@ -106,7 +102,7 @@ var TextInput = exports.TextInput = /*#__PURE__*/_react["default"].forwardRef(fu
106
102
  onBlur: handleBlur,
107
103
  value: value,
108
104
  onChange: handleChange,
109
- placeholder: inputPlaceholder,
105
+ placeholder: useModernStyles ? undefined : placeholder,
110
106
  paddingRight: paddingRight,
111
107
  type: type,
112
108
  isOnlyNumbers: isOnlyNumbers,
package/dist/components/form/TextInput/index.stories.js CHANGED
@@ -45,7 +45,8 @@ var Default = exports.Default = {
45
45
  disabled: false,
46
46
  children: /*#__PURE__*/_react["default"].createElement("div", null, "Children"),
47
47
  size: 'L',
48
- autoFocus: false
48
+ autoFocus: false,
49
+ useModernStyles: true
49
50
  },
50
51
  render: Component
51
52
  };
package/dist/esm/components/form/Autocomplete/components/Autocomplete/index.js CHANGED
@@ -122,13 +122,9 @@ export var Autocomplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
122
122
  return SIZE_PARAMS_MAP[size];
123
123
  }
124
124
  }, [value, isOpen, useModernStyles, size, inputLabel]);
125
- var inputPlaceholder = useMemo(function () {
126
- if (useModernStyles) {
127
- return undefined;
128
- } else {
129
- return placeholder;
130
- }
131
- }, [placeholder, useModernStyles]);
125
+ var modernInputPlaceholder = useMemo(function () {
126
+ return placeholder || label;
127
+ }, [label, placeholder]);
132
128
  var isModernPlaceholderVisible = useMemo(function () {
133
129
  return !isOpen && !value;
134
130
  }, [isOpen, value]);
@@ -194,13 +190,13 @@ export var Autocomplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
194
190
  useModernStyles: useModernStyles,
195
191
  size: size,
196
192
  left: useModernStyles ? inputPaddingLeft : undefined
197
- }, /*#__PURE__*/React.createElement(S.InputLabelContent, null, children ? /*#__PURE__*/React.createElement(S.ChildrenWrapper, null, children) : null, useModernStyles && placeholder && /*#__PURE__*/React.createElement(ModernPlaceholder, {
193
+ }, /*#__PURE__*/React.createElement(S.InputLabelContent, null, children ? /*#__PURE__*/React.createElement(S.ChildrenWrapper, null, children) : null, useModernStyles && modernInputPlaceholder && /*#__PURE__*/React.createElement(ModernPlaceholder, {
198
194
  visible: isModernPlaceholderVisible,
199
195
  paddingLeft: inputPaddingLeft !== null && inputPaddingLeft !== void 0 ? inputPaddingLeft : 20,
200
196
  paddingTop: SIZE_PARAMS_MAP[size].paddingTop,
201
197
  size: size,
202
198
  required: required
203
- }, placeholder), /*#__PURE__*/React.createElement(PureInput, _extends({
199
+ }, modernInputPlaceholder), /*#__PURE__*/React.createElement(PureInput, _extends({
204
200
  ref: ref,
205
201
  hasError: hasError,
206
202
  inFocus: inFocus,
@@ -209,7 +205,7 @@ export var Autocomplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
209
205
  onFocus: handleInputFocus,
210
206
  onBlur: handleBlur,
211
207
  name: name,
212
- placeholder: inputPlaceholder,
208
+ placeholder: useModernStyles ? undefined : placeholder,
213
209
  disabled: disabled,
214
210
  paddingLeft: inputPaddingLeft,
215
211
  maxLength: inputMaxLength,
package/dist/esm/components/form/Autocomplete/components/Autocomplete/index.stories.js CHANGED
@@ -49,7 +49,8 @@ export var Default = {
49
49
  isCustomOptionRender: false,
50
50
  children: 'children',
51
51
  inputPaddingLeft: 60,
52
- readOnly: false
52
+ readOnly: false,
53
+ useModernStyles: true
53
54
  },
54
55
  render: Component
55
56
  };
package/dist/esm/components/form/CurrencyInput/CoreCurrencyInput/index.stories.js CHANGED
@@ -27,7 +27,8 @@ export var Default = {
27
27
  args: {
28
28
  label: 'Label',
29
29
  size: 'L',
30
- disabled: false
30
+ disabled: false,
31
+ useModernStyles: true
31
32
  },
32
33
  render: Component
33
34
  };
package/dist/esm/components/form/DateInput/index.js CHANGED
@@ -120,7 +120,9 @@ export var DateInput = function DateInput(_ref) {
120
120
  return placeholder || logic.getPlaceholder();
121
121
  }
122
122
  }, [placeholder, useModernStyles]);
123
- var modernPlaceholderText = placeholder || logic.getPlaceholder();
123
+ var modernPlaceholderText = useMemo(function () {
124
+ return placeholder || label || logic.getPlaceholder();
125
+ }, [label, placeholder]);
124
126
  var isModernPlaceholderVisible = useMemo(function () {
125
127
  return !isOpen && !stringValue;
126
128
  }, [isOpen, stringValue]);
package/dist/esm/components/form/DateTimeInput/index.js CHANGED
@@ -147,7 +147,7 @@ export var DateTimeInput = function DateTimeInput(_ref) {
147
147
  return placeholder || logic.getPlaceholder(withTime);
148
148
  }
149
149
  }, [placeholder, useModernStyles, withTime]);
150
- var modernPlaceholderText = placeholder || logic.getPlaceholder(withTime);
150
+ var modernPlaceholderText = placeholder || label || logic.getPlaceholder(withTime);
151
151
  var isModernPlaceholderVisible = useMemo(function () {
152
152
  return !isOpen && !stringValue;
153
153
  }, [isOpen, stringValue]);
package/dist/esm/components/form/PositiveIntegerInput/index.js CHANGED
@@ -63,13 +63,9 @@ export var PositiveIntegerInput = function PositiveIntegerInput(_ref) {
63
63
  var handleDown = useCallback(function () {
64
64
  onChange(decrement(value));
65
65
  }, [decrement, value, onChange]);
66
- var inputPlaceholder = useMemo(function () {
67
- if (useModernStyles) {
68
- return undefined;
69
- } else {
70
- return placeholder;
71
- }
72
- }, [placeholder, useModernStyles]);
66
+ var modernInputPlaceholder = useMemo(function () {
67
+ return placeholder || label;
68
+ }, [label, placeholder]);
73
69
  var isModernPlaceholderVisible = useMemo(function () {
74
70
  return !inFocus && value === null;
75
71
  }, [inFocus, value]);
@@ -96,15 +92,15 @@ export var PositiveIntegerInput = function PositiveIntegerInput(_ref) {
96
92
  label: inputLabel,
97
93
  useModernStyles: useModernStyles,
98
94
  size: size
99
- }, /*#__PURE__*/React.createElement(S.ControlWrapper, null, useModernStyles && placeholder && /*#__PURE__*/React.createElement(ModernPlaceholder, {
95
+ }, /*#__PURE__*/React.createElement(S.ControlWrapper, null, useModernStyles && modernInputPlaceholder && /*#__PURE__*/React.createElement(ModernPlaceholder, {
100
96
  visible: isModernPlaceholderVisible,
101
97
  paddingTop: SIZE_PARAMS_MAP[size].paddingTop,
102
98
  size: size
103
- }, placeholder), /*#__PURE__*/React.createElement(PureInput, _extends({
99
+ }, modernInputPlaceholder), /*#__PURE__*/React.createElement(PureInput, _extends({
104
100
  name: name,
105
101
  hasError: hasError,
106
102
  inFocus: inFocus,
107
- placeholder: inputPlaceholder,
103
+ placeholder: useModernStyles ? undefined : placeholder,
108
104
  onFocus: handleFocus,
109
105
  onBlur: handleBlur,
110
106
  value: normalizeFrom(value),
package/dist/esm/components/form/Select/components/Input/index.js CHANGED
@@ -29,6 +29,9 @@ export var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
29
29
  var isModernPlaceholderVisible = useMemo(function () {
30
30
  return useModernStyles && !isOpen && !value;
31
31
  }, [isOpen, useModernStyles, value]);
32
+ var modernInputPlaceholder = useMemo(function () {
33
+ return placeholder || label;
34
+ }, [label, placeholder]);
32
35
  var paddingOptions = useMemo(function () {
33
36
  if ((value || isOpen) && useModernStyles && label) {
34
37
  return MODERN_STYLE_SIZE_PARAMS_MAP[size];
@@ -42,12 +45,12 @@ export var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
42
45
  required: required,
43
46
  useModernStyles: useModernStyles,
44
47
  size: size
45
- }, /*#__PURE__*/React.createElement(S.ControlWrapper, null, useModernStyles && placeholder && /*#__PURE__*/React.createElement(ModernPlaceholder, {
48
+ }, /*#__PURE__*/React.createElement(S.ControlWrapper, null, useModernStyles && modernInputPlaceholder && /*#__PURE__*/React.createElement(ModernPlaceholder, {
46
49
  visible: isModernPlaceholderVisible,
47
50
  paddingTop: SIZE_PARAMS_MAP[size !== null && size !== void 0 ? size : 'M'].paddingTop,
48
51
  size: size !== null && size !== void 0 ? size : 'M',
49
52
  required: required
50
- }, placeholder), /*#__PURE__*/React.createElement(PureInput, _extends({
53
+ }, modernInputPlaceholder), /*#__PURE__*/React.createElement(PureInput, _extends({
51
54
  ref: ref,
52
55
  hasError: hasError,
53
56
  inFocus: inFocus,
package/dist/esm/components/form/Select/index.stories.js CHANGED
@@ -130,7 +130,8 @@ var COMMON_ARGS = {
130
130
  id: 12,
131
131
  name: 'name option 12'
132
132
  }
133
- }]
133
+ }],
134
+ useModernStyles: true
134
135
  };
135
136
  var COLORS_BY_ID_MAP = {
136
137
  1: 'red',
package/dist/esm/components/form/TextInput/index.js CHANGED
@@ -64,13 +64,9 @@ export var TextInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
64
64
  return SIZE_PARAMS_MAP[size];
65
65
  }
66
66
  }, [value, inFocus, useModernStyles, size, inputLabel]);
67
- var inputPlaceholder = useMemo(function () {
68
- if (useModernStyles) {
69
- return undefined;
70
- } else {
71
- return placeholder;
72
- }
73
- }, [placeholder, useModernStyles]);
67
+ var modernInputPlaceholder = useMemo(function () {
68
+ return placeholder || label;
69
+ }, [label, placeholder]);
74
70
  var isModernPlaceholderVisible = useMemo(function () {
75
71
  return !inFocus && !value;
76
72
  }, [inFocus, value]);
@@ -81,12 +77,12 @@ export var TextInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
81
77
  required: required,
82
78
  size: size,
83
79
  useModernStyles: useModernStyles
84
- }, /*#__PURE__*/React.createElement(S.InputLabelContent, null, useModernStyles && placeholder && /*#__PURE__*/React.createElement(ModernPlaceholder, {
80
+ }, /*#__PURE__*/React.createElement(S.InputLabelContent, null, useModernStyles && modernInputPlaceholder && /*#__PURE__*/React.createElement(ModernPlaceholder, {
85
81
  visible: isModernPlaceholderVisible,
86
82
  paddingTop: SIZE_PARAMS_MAP[size].paddingTop,
87
83
  size: size,
88
84
  required: required
89
- }, placeholder), /*#__PURE__*/React.createElement(PureInput, _extends({
85
+ }, modernInputPlaceholder), /*#__PURE__*/React.createElement(PureInput, _extends({
90
86
  id: id,
91
87
  ref: ref,
92
88
  name: name,
@@ -97,7 +93,7 @@ export var TextInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
97
93
  onBlur: handleBlur,
98
94
  value: value,
99
95
  onChange: handleChange,
100
- placeholder: inputPlaceholder,
96
+ placeholder: useModernStyles ? undefined : placeholder,
101
97
  paddingRight: paddingRight,
102
98
  type: type,
103
99
  isOnlyNumbers: isOnlyNumbers,
package/dist/esm/components/form/TextInput/index.stories.js CHANGED
@@ -36,7 +36,8 @@ export var Default = {
36
36
  disabled: false,
37
37
  children: /*#__PURE__*/React.createElement("div", null, "Children"),
38
38
  size: 'L',
39
- autoFocus: false
39
+ autoFocus: false,
40
+ useModernStyles: true
40
41
  },
41
42
  render: Component
42
43
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@invoicebox/ui",
3
- "version": "0.1.0-alpha.300",
3
+ "version": "0.1.0-alpha.301",
4
4
  "description": "Invoicebox UI",
5
5
  "license": "Apache License 2.0",
6
6
  "scripts": {