@invoicebox/ui 0.1.0-alpha.302 → 0.1.0-alpha.303
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.
- package/dist/components/form/InputLabel/index.js +2 -2
- package/dist/components/form/Select/components/Input/index.js +12 -1
- package/dist/components/form/Select/index.js +1 -12
- package/dist/components/form/constants.d.ts +2 -2
- package/dist/components/form/constants.js +6 -6
- package/dist/esm/components/form/InputLabel/index.js +2 -2
- package/dist/esm/components/form/Select/components/Input/index.js +12 -1
- package/dist/esm/components/form/Select/index.js +1 -12
- package/dist/esm/components/form/constants.js +6 -6
- package/package.json +1 -1
|
@@ -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]
|
|
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]
|
|
40
|
+
$paddingTop: size && useModernStyles ? _constants.MODERN_STYLE_SIZE_PARAMS_MAP[size].$labelPaddingTop : 0,
|
|
41
41
|
$left: left
|
|
42
42
|
}, label), children);
|
|
43
43
|
};
|
|
@@ -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:
|
|
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:
|
|
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]
|
|
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]
|
|
30
|
+
$paddingTop: size && useModernStyles ? MODERN_STYLE_SIZE_PARAMS_MAP[size].$labelPaddingTop : 0,
|
|
31
31
|
$left: left
|
|
32
32
|
}, label), children);
|
|
33
33
|
};
|
|
@@ -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:
|
|
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:
|
|
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
|
};
|