@invoicebox/ui 0.1.0-alpha.302 → 0.1.0-alpha.304

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.
@@ -34,10 +34,10 @@ var InputLabel = exports.InputLabel = function InputLabel(_ref) {
34
34
  }, label && /*#__PURE__*/_react["default"].createElement(S.Label, {
35
35
  $palette: palette,
36
36
  $inFocus: inFocus,
37
- variant: size && useModernStyles ? _constants.MODERN_STYLE_SIZE_PARAMS_MAP[size].labelVariant : 'captionRegular',
37
+ variant: size && useModernStyles ? _constants.MODERN_STYLE_SIZE_PARAMS_MAP[size].$labelVariant : 'captionRegular',
38
38
  $required: required,
39
39
  $useModernStyles: useModernStyles,
40
- $paddingTop: size && useModernStyles ? _constants.MODERN_STYLE_SIZE_PARAMS_MAP[size].labelPaddingTop : 0,
40
+ $paddingTop: size && useModernStyles ? _constants.MODERN_STYLE_SIZE_PARAMS_MAP[size].$labelPaddingTop : 0,
41
41
  $left: left
42
42
  }, label), children);
43
43
  };
@@ -14,6 +14,6 @@ var generatePureInputPalette = exports.generatePureInputPalette = function gener
14
14
  error: abstractPalette.error,
15
15
  border: (0, _hexToRgba["default"])(abstractPalette.neutralBrutal, 0.3),
16
16
  borderFocus: abstractPalette.primary,
17
- placeholder: (0, _hexToRgba["default"])(abstractPalette.primary, 0.3)
17
+ placeholder: (0, _hexToRgba["default"])(abstractPalette.primary, 0.5)
18
18
  };
19
19
  };
@@ -34,6 +34,17 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
34
34
  required = _ref.required,
35
35
  _ref$useModernStyles = _ref.useModernStyles,
36
36
  useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles;
37
+ var inputLabel = (0, _react.useMemo)(function () {
38
+ if (useModernStyles) {
39
+ if (value || inFocus) {
40
+ return label;
41
+ } else {
42
+ return undefined;
43
+ }
44
+ } else {
45
+ return label;
46
+ }
47
+ }, [inFocus, label, value, useModernStyles]);
37
48
  var isShowResetIcon = !!value && !!onReset;
38
49
  var isModernPlaceholderVisible = (0, _react.useMemo)(function () {
39
50
  return useModernStyles && !isOpen && !value;
@@ -50,7 +61,7 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
50
61
  }, [value, isOpen, useModernStyles, size, label]);
51
62
  return /*#__PURE__*/_react["default"].createElement(_InputLabel.InputLabel, {
52
63
  inFocus: inFocus,
53
- label: label,
64
+ label: inputLabel,
54
65
  required: required,
55
66
  useModernStyles: useModernStyles,
56
67
  size: size
@@ -210,22 +210,11 @@ var Select = exports.Select = function Select(_ref) {
210
210
  if (!renderValue || !(selectedOption !== null && selectedOption !== void 0 && selectedOption.entity)) return;
211
211
  return renderValue(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.entity);
212
212
  }, [renderValue, selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.entity]);
213
- var inputLabel = (0, _react.useMemo)(function () {
214
- if (useModernStyles) {
215
- if (selectedOption || isOpen) {
216
- return label;
217
- } else {
218
- return undefined;
219
- }
220
- } else {
221
- return label;
222
- }
223
- }, [isOpen, label, selectedOption, useModernStyles]);
224
213
  return /*#__PURE__*/_react["default"].createElement(S.Wrapper, {
225
214
  ref: isDrawerOptions ? undefined : wrapperRef
226
215
  }, /*#__PURE__*/_react["default"].createElement(S.InputWrapper, null, /*#__PURE__*/_react["default"].createElement(_Input.Input, {
227
216
  ref: inputRef,
228
- label: inputLabel,
217
+ label: label,
229
218
  hasError: hasError,
230
219
  inFocus: inFocus,
231
220
  placeholder: placeholder,
@@ -9,6 +9,6 @@ export declare const MODERN_STYLE_SIZE_PARAMS_MAP: Record<TSizes, {
9
9
  paddingTop: number;
10
10
  paddingBottom: number;
11
11
  variant: keyof typeof typography;
12
- labelVariant: keyof typeof typography;
13
- labelPaddingTop: number;
12
+ $labelVariant: keyof typeof typography;
13
+ $labelPaddingTop: number;
14
14
  }>;
@@ -26,21 +26,21 @@ var MODERN_STYLE_SIZE_PARAMS_MAP = exports.MODERN_STYLE_SIZE_PARAMS_MAP = {
26
26
  paddingTop: 20,
27
27
  paddingBottom: 12,
28
28
  variant: 'bodyMRegular',
29
- labelVariant: 'captionRegular',
30
- labelPaddingTop: 14
29
+ $labelVariant: 'captionRegular',
30
+ $labelPaddingTop: 14
31
31
  },
32
32
  M: {
33
33
  paddingTop: 20,
34
34
  paddingBottom: 6,
35
35
  variant: 'bodyMRegular',
36
- labelVariant: 'captionRegular',
37
- labelPaddingTop: 12
36
+ $labelVariant: 'captionRegular',
37
+ $labelPaddingTop: 12
38
38
  },
39
39
  XS: {
40
40
  paddingTop: 16,
41
41
  paddingBottom: 4,
42
42
  variant: 'labelsHintsRegular',
43
- labelVariant: 'captionSRegular',
44
- labelPaddingTop: 12
43
+ $labelVariant: 'captionSRegular',
44
+ $labelPaddingTop: 12
45
45
  }
46
46
  };
@@ -24,10 +24,10 @@ export var InputLabel = function InputLabel(_ref) {
24
24
  }, label && /*#__PURE__*/React.createElement(S.Label, {
25
25
  $palette: palette,
26
26
  $inFocus: inFocus,
27
- variant: size && useModernStyles ? MODERN_STYLE_SIZE_PARAMS_MAP[size].labelVariant : 'captionRegular',
27
+ variant: size && useModernStyles ? MODERN_STYLE_SIZE_PARAMS_MAP[size].$labelVariant : 'captionRegular',
28
28
  $required: required,
29
29
  $useModernStyles: useModernStyles,
30
- $paddingTop: size && useModernStyles ? MODERN_STYLE_SIZE_PARAMS_MAP[size].labelPaddingTop : 0,
30
+ $paddingTop: size && useModernStyles ? MODERN_STYLE_SIZE_PARAMS_MAP[size].$labelPaddingTop : 0,
31
31
  $left: left
32
32
  }, label), children);
33
33
  };
@@ -7,6 +7,6 @@ export var generatePureInputPalette = function generatePureInputPalette(abstract
7
7
  error: abstractPalette.error,
8
8
  border: hexToRgba(abstractPalette.neutralBrutal, 0.3),
9
9
  borderFocus: abstractPalette.primary,
10
- placeholder: hexToRgba(abstractPalette.primary, 0.3)
10
+ placeholder: hexToRgba(abstractPalette.primary, 0.5)
11
11
  };
12
12
  };
@@ -25,6 +25,17 @@ export var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
25
25
  required = _ref.required,
26
26
  _ref$useModernStyles = _ref.useModernStyles,
27
27
  useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles;
28
+ var inputLabel = useMemo(function () {
29
+ if (useModernStyles) {
30
+ if (value || inFocus) {
31
+ return label;
32
+ } else {
33
+ return undefined;
34
+ }
35
+ } else {
36
+ return label;
37
+ }
38
+ }, [inFocus, label, value, useModernStyles]);
28
39
  var isShowResetIcon = !!value && !!onReset;
29
40
  var isModernPlaceholderVisible = useMemo(function () {
30
41
  return useModernStyles && !isOpen && !value;
@@ -41,7 +52,7 @@ export var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
41
52
  }, [value, isOpen, useModernStyles, size, label]);
42
53
  return /*#__PURE__*/React.createElement(InputLabel, {
43
54
  inFocus: inFocus,
44
- label: label,
55
+ label: inputLabel,
45
56
  required: required,
46
57
  useModernStyles: useModernStyles,
47
58
  size: size
@@ -200,22 +200,11 @@ export var Select = function Select(_ref) {
200
200
  if (!renderValue || !(selectedOption !== null && selectedOption !== void 0 && selectedOption.entity)) return;
201
201
  return renderValue(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.entity);
202
202
  }, [renderValue, selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.entity]);
203
- var inputLabel = useMemo(function () {
204
- if (useModernStyles) {
205
- if (selectedOption || isOpen) {
206
- return label;
207
- } else {
208
- return undefined;
209
- }
210
- } else {
211
- return label;
212
- }
213
- }, [isOpen, label, selectedOption, useModernStyles]);
214
203
  return /*#__PURE__*/React.createElement(S.Wrapper, {
215
204
  ref: isDrawerOptions ? undefined : wrapperRef
216
205
  }, /*#__PURE__*/React.createElement(S.InputWrapper, null, /*#__PURE__*/React.createElement(Input, {
217
206
  ref: inputRef,
218
- label: inputLabel,
207
+ label: label,
219
208
  hasError: hasError,
220
209
  inFocus: inFocus,
221
210
  placeholder: placeholder,
@@ -20,21 +20,21 @@ export var MODERN_STYLE_SIZE_PARAMS_MAP = {
20
20
  paddingTop: 20,
21
21
  paddingBottom: 12,
22
22
  variant: 'bodyMRegular',
23
- labelVariant: 'captionRegular',
24
- labelPaddingTop: 14
23
+ $labelVariant: 'captionRegular',
24
+ $labelPaddingTop: 14
25
25
  },
26
26
  M: {
27
27
  paddingTop: 20,
28
28
  paddingBottom: 6,
29
29
  variant: 'bodyMRegular',
30
- labelVariant: 'captionRegular',
31
- labelPaddingTop: 12
30
+ $labelVariant: 'captionRegular',
31
+ $labelPaddingTop: 12
32
32
  },
33
33
  XS: {
34
34
  paddingTop: 16,
35
35
  paddingBottom: 4,
36
36
  variant: 'labelsHintsRegular',
37
- labelVariant: 'captionSRegular',
38
- labelPaddingTop: 12
37
+ $labelVariant: 'captionSRegular',
38
+ $labelPaddingTop: 12
39
39
  }
40
40
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@invoicebox/ui",
3
- "version": "0.1.0-alpha.302",
3
+ "version": "0.1.0-alpha.304",
4
4
  "description": "Invoicebox UI",
5
5
  "license": "Apache License 2.0",
6
6
  "scripts": {