@pedidopago/ui 1.3.15 → 1.3.18
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/DateInput/index.js +1 -1
- package/dist/components/MultipleSelect/index.d.ts.map +1 -1
- package/dist/components/MultipleSelect/index.js +0 -6
- package/dist/components/Select/types.d.ts +1 -1
- package/dist/components/Select/types.d.ts.map +1 -1
- package/dist/components/Switch/index.d.ts.map +1 -1
- package/dist/components/Switch/index.js +23 -68
- package/dist/components/Switch/styles.d.ts.map +1 -1
- package/dist/components/Switch/styles.js +8 -23
- package/dist/components/Switch/switch.test.js +10 -33
- package/dist/components/Switch/types.d.ts +3 -6
- package/dist/components/Switch/types.d.ts.map +1 -1
- package/dist/components/Typography/styles.d.ts +1 -1
- package/dist/components/Typography/types.d.ts +1 -1
- package/dist/components/Typography/types.d.ts.map +1 -1
- package/package.json +1 -1
- package/dist/components/MultipleSelect/components/OptionsArea/OptionsArea.d.ts +0 -19
- package/dist/components/MultipleSelect/components/OptionsArea/OptionsArea.d.ts.map +0 -1
- package/dist/components/MultipleSelect/components/OptionsArea/OptionsArea.js +0 -101
- package/dist/components/MultipleSelect/components/SelectArea/Label.d.ts +0 -7
- package/dist/components/MultipleSelect/components/SelectArea/Label.d.ts.map +0 -1
- package/dist/components/MultipleSelect/components/SelectArea/Label.js +0 -36
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MultipleSelect/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,wBAAwB,EACxB,EAAE,EAOH,MAAM,OAAO,CAAC;AAEf,OAAO,EAAa,iBAAiB,EAAc,MAAM,SAAS,CAAC;AAEnE,aAAK,KAAK,GAAG,wBAAwB,CAAC,GAAG,CAAC,CAAC;AAI3C,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,iBAAiB,GAAG,KAAK,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MultipleSelect/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,wBAAwB,EACxB,EAAE,EAOH,MAAM,OAAO,CAAC;AAEf,OAAO,EAAa,iBAAiB,EAAc,MAAM,SAAS,CAAC;AAEnE,aAAK,KAAK,GAAG,wBAAwB,CAAC,GAAG,CAAC,CAAC;AAI3C,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,iBAAiB,GAAG,KAAK,CA+HjD,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -107,12 +107,6 @@ var MultipleSelect = function MultipleSelect(_ref) {
|
|
|
107
107
|
(0, _react.useEffect)(function () {
|
|
108
108
|
!!value && setSelectedOptions(value);
|
|
109
109
|
}, [value]);
|
|
110
|
-
(0, _react.useEffect)(function () {
|
|
111
|
-
onChangeValue === null || onChangeValue === void 0 ? void 0 : onChangeValue(selectedOptions);
|
|
112
|
-
}, [onChangeValue]);
|
|
113
|
-
(0, _react.useEffect)(function () {
|
|
114
|
-
!!disabled && setShowOptionsArea(false);
|
|
115
|
-
}, [disabled]);
|
|
116
110
|
var scrollHandler = (0, _react.useCallback)(function (event) {
|
|
117
111
|
var _ref2 = event.target,
|
|
118
112
|
clientHeight = _ref2.clientHeight,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export declare type SelectAlertType = 'success' | 'error' | 'warning' | 'informative' | 'critical' | 'success_secondary' | 'warning_secondary';
|
|
2
2
|
export interface SelectOption {
|
|
3
3
|
label: string;
|
|
4
|
-
value: string;
|
|
4
|
+
value: string | number;
|
|
5
5
|
}
|
|
6
6
|
export declare type sizeSelect = 'sm' | 'md';
|
|
7
7
|
export interface SelectProps {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/types.ts"],"names":[],"mappings":"AAAA,oBAAY,eAAe,GACvB,SAAS,GACT,OAAO,GACP,SAAS,GACT,aAAa,GACb,UAAU,GACV,mBAAmB,GACnB,mBAAmB,CAAC;AAExB,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/types.ts"],"names":[],"mappings":"AAAA,oBAAY,eAAe,GACvB,SAAS,GACT,OAAO,GACP,SAAS,GACT,aAAa,GACb,UAAU,GACV,mBAAmB,GACnB,mBAAmB,CAAC;AAExB,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,oBAAY,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC;AAErC,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IACjC,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IACjC,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,EAAE,EAAkD,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,EAAE,EAAkD,MAAM,OAAO,CAAC;AAKrF,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,WAAW,CAgDhC,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -7,10 +7,10 @@ exports.default = void 0;
|
|
|
7
7
|
|
|
8
8
|
var _react = require("react");
|
|
9
9
|
|
|
10
|
-
var _styles = require("./styles");
|
|
11
|
-
|
|
12
10
|
var _Icon = _interopRequireDefault(require("../Icon"));
|
|
13
11
|
|
|
12
|
+
var _styles = require("./styles");
|
|
13
|
+
|
|
14
14
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
15
15
|
|
|
16
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -28,83 +28,38 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
|
|
|
28
28
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
29
29
|
|
|
30
30
|
var SwitchInput = function SwitchInput(_ref) {
|
|
31
|
-
var
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
_ref$alert = _ref.alert,
|
|
35
|
-
alert = _ref$alert === void 0 ? false : _ref$alert,
|
|
36
|
-
SwitchType = _ref.SwitchType,
|
|
31
|
+
var disabled = _ref.disabled,
|
|
32
|
+
helperText = _ref.helperText,
|
|
33
|
+
type = _ref.type,
|
|
37
34
|
onChangeValue = _ref.onChangeValue,
|
|
38
|
-
_ref$defaultValue = _ref.defaultValue,
|
|
39
|
-
defaultValue = _ref$defaultValue === void 0 ? false : _ref$defaultValue,
|
|
40
35
|
_ref$checked = _ref.checked,
|
|
41
|
-
checked = _ref$checked === void 0 ? false : _ref$checked
|
|
42
|
-
onError = _ref.onError;
|
|
36
|
+
checked = _ref$checked === void 0 ? false : _ref$checked;
|
|
43
37
|
|
|
44
|
-
var _useState = (0, _react.useState)(
|
|
38
|
+
var _useState = (0, _react.useState)(checked),
|
|
45
39
|
_useState2 = _slicedToArray(_useState, 2),
|
|
46
40
|
isActive = _useState2[0],
|
|
47
41
|
setIsActive = _useState2[1];
|
|
48
42
|
|
|
49
43
|
(0, _react.useEffect)(function () {
|
|
50
|
-
|
|
44
|
+
setIsActive(checked);
|
|
51
45
|
}, [checked]);
|
|
52
|
-
(0, _react.useEffect)(function () {
|
|
53
|
-
!!defaultValue && setIsActive(defaultValue);
|
|
54
|
-
}, [defaultValue]);
|
|
55
|
-
(0, _react.useEffect)(function () {
|
|
56
|
-
!!onChangeValue && onChangeValue(isActive);
|
|
57
|
-
}, [isActive, onChangeValue]);
|
|
58
|
-
(0, _react.useEffect)(function () {
|
|
59
|
-
if (disabled || alert) {
|
|
60
|
-
setIsActive(false);
|
|
61
|
-
}
|
|
62
|
-
}, [disabled, setIsActive, alert]);
|
|
63
46
|
|
|
64
47
|
function handleOnKeyDown(e) {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
switch (e.code) {
|
|
73
|
-
case 'Enter':
|
|
74
|
-
case 'Space':
|
|
75
|
-
setIsActive(function (o) {
|
|
76
|
-
return !o;
|
|
77
|
-
});
|
|
78
|
-
break;
|
|
79
|
-
|
|
80
|
-
case 'ArrowLeft':
|
|
81
|
-
case 'ArrowDown':
|
|
82
|
-
setIsActive(false);
|
|
83
|
-
break;
|
|
84
|
-
|
|
85
|
-
case 'ArrowRight':
|
|
86
|
-
case 'ArrowUp':
|
|
87
|
-
setIsActive(true);
|
|
88
|
-
break;
|
|
89
|
-
|
|
90
|
-
default:
|
|
91
|
-
break;
|
|
92
|
-
}
|
|
48
|
+
switch (e.code) {
|
|
49
|
+
case 'Enter':
|
|
50
|
+
case 'Space':
|
|
51
|
+
return setIsActive(function (o) {
|
|
52
|
+
onChangeValue === null || onChangeValue === void 0 ? void 0 : onChangeValue(!o);
|
|
53
|
+
return !o;
|
|
54
|
+
});
|
|
93
55
|
}
|
|
94
56
|
}
|
|
95
57
|
|
|
96
58
|
function handleOnClick() {
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
}
|
|
101
|
-
setIsActive(false);
|
|
102
|
-
!!onError && onError('try click with disabled');
|
|
103
|
-
} else {
|
|
104
|
-
setIsActive(function (o) {
|
|
105
|
-
return !o;
|
|
106
|
-
});
|
|
107
|
-
}
|
|
59
|
+
setIsActive(function (o) {
|
|
60
|
+
onChangeValue === null || onChangeValue === void 0 ? void 0 : onChangeValue(!o);
|
|
61
|
+
return !o;
|
|
62
|
+
});
|
|
108
63
|
}
|
|
109
64
|
|
|
110
65
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.SwitchWrapper, {
|
|
@@ -115,18 +70,18 @@ var SwitchInput = function SwitchInput(_ref) {
|
|
|
115
70
|
onClick: handleOnClick,
|
|
116
71
|
onKeyDown: handleOnKeyDown,
|
|
117
72
|
disabled: disabled,
|
|
118
|
-
isActive:
|
|
73
|
+
isActive: isActive,
|
|
119
74
|
tabIndex: 0,
|
|
120
|
-
|
|
75
|
+
type: type,
|
|
121
76
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.SwitchToken, {
|
|
122
77
|
className: "switch-token",
|
|
123
78
|
children: isActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
|
|
124
79
|
name: "check"
|
|
125
80
|
})
|
|
126
81
|
})
|
|
127
|
-
}),
|
|
82
|
+
}), helperText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.HelpText, {
|
|
128
83
|
disabled: disabled,
|
|
129
|
-
children:
|
|
84
|
+
children: helperText
|
|
130
85
|
})]
|
|
131
86
|
});
|
|
132
87
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAGtC,eAAO,MAAM,aAAa;;;uHAOzB,CAAC;AAEF,eAAO,MAAM,MAAM;;;
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAGtC,eAAO,MAAM,aAAa;;;uHAOzB,CAAC;AAEF,eAAO,MAAM,MAAM;;;uHAqBlB,CAAC;AAEF,eAAO,MAAM,WAAW;;;uHAgBvB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;yHAGpB,CAAC"}
|
|
@@ -27,10 +27,7 @@ exports.SwitchWrapper = SwitchWrapper;
|
|
|
27
27
|
var Switch = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n box-sizing: border-box;\n padding: 4px 2px;\n position: relative;\n outline: 0;\n\n width: 40px;\n height: 24px;\n border-radius: 80px;\n cursor: pointer;\n\n border: 2px solid\n ", ";\n\n transition: all ease-in-out 0.2s;\n\n ", "\n\n ", "\n"])), function (_ref2) {
|
|
28
28
|
var theme = _ref2.theme,
|
|
29
29
|
isActive = _ref2.isActive;
|
|
30
|
-
return
|
|
31
|
-
dark: isActive ? theme.colors.body.light : theme.colors.neutral.neutral5,
|
|
32
|
-
light: isActive ? theme.colors.body.light : theme.colors.neutral.neutral2
|
|
33
|
-
}[theme.colorMode];
|
|
30
|
+
return isActive ? theme.colors.body.light : theme.colors.neutral.neutral2;
|
|
34
31
|
}, function (_ref3) {
|
|
35
32
|
var isActive = _ref3.isActive,
|
|
36
33
|
disabled = _ref3.disabled;
|
|
@@ -44,10 +41,7 @@ exports.Switch = Switch;
|
|
|
44
41
|
|
|
45
42
|
var SwitchToken = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n width: 16px;\n height: 16px;\n border-radius: 80px;\n transition: all ease-in-out 0.2s;\n\n justify-content: center;\n align-items: center;\n\n svg {\n width: 80%;\n height: 80%;\n }\n\n background-color: ", ";\n"])), function (_ref5) {
|
|
46
43
|
var theme = _ref5.theme;
|
|
47
|
-
return
|
|
48
|
-
dark: theme.colors.neutral.neutral2,
|
|
49
|
-
light: theme.colors.neutral.neutral4
|
|
50
|
-
}[theme.colorMode];
|
|
44
|
+
return theme.colors.neutral.neutral4;
|
|
51
45
|
});
|
|
52
46
|
|
|
53
47
|
exports.SwitchToken = SwitchToken;
|
|
@@ -68,25 +62,16 @@ function SwitchEffects(_ref7) {
|
|
|
68
62
|
|
|
69
63
|
function ActiveEffects(_ref8) {
|
|
70
64
|
var theme = _ref8.theme,
|
|
71
|
-
|
|
65
|
+
type = _ref8.type;
|
|
72
66
|
if (!theme) return '';
|
|
73
|
-
var idleColor =
|
|
74
|
-
var hoverColor =
|
|
75
|
-
var focusColor =
|
|
76
|
-
return (0, _react.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n border-color: ", ";\n background-color: ", ";\n div.switch-token {\n transform: translateX(16px);\n background-color: ", ";\n }\n svg {\n color: ", ";\n }\n\n :hover {\n background-color: ", ";\n border-color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n :focus {\n background-color: ", ";\n border-color: ", ";\n box-shadow: 0 0 0 2px
|
|
67
|
+
var idleColor = type ? theme.colors[type].default : theme.colors.primary.default;
|
|
68
|
+
var hoverColor = type ? (0, _colorFunctions.hoverFunction)(theme.colors[type].default) : theme.colors.primary.hover;
|
|
69
|
+
var focusColor = type ? (0, _colorFunctions.focusFunction)(theme.colors[type].default) : theme.colors.primary.focus;
|
|
70
|
+
return (0, _react.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n border-color: ", ";\n background-color: ", ";\n div.switch-token {\n transform: translateX(16px);\n background-color: ", ";\n }\n svg {\n color: ", ";\n }\n\n :hover {\n background-color: ", ";\n border-color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n :focus {\n background-color: ", ";\n border-color: ", ";\n box-shadow: 0 0 0 2px ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), idleColor, idleColor, theme.colors.body.light, idleColor, hoverColor, hoverColor, hoverColor, focusColor, focusColor, type ? theme.colors[type].blurred : theme.colors.primary.disabled, focusColor);
|
|
77
71
|
}
|
|
78
72
|
|
|
79
73
|
function disabledStyle(_ref9) {
|
|
80
74
|
var theme = _ref9.theme;
|
|
81
75
|
if (!theme) return '';
|
|
82
|
-
return (0, _react.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n border-color: ", ";\n\n background-color: ", ";\n\n
|
|
83
|
-
dark: theme.colors.neutral.neutral4,
|
|
84
|
-
light: theme.colors.neutral.neutral2
|
|
85
|
-
}[theme.colorMode], {
|
|
86
|
-
dark: theme.colors.neutral.neutral5,
|
|
87
|
-
light: theme.colors.neutral.neutral1
|
|
88
|
-
}[theme.colorMode], {
|
|
89
|
-
dark: theme.colors.neutral.neutral3,
|
|
90
|
-
light: theme.colors.neutral.neutral2
|
|
91
|
-
}[theme.colorMode]);
|
|
76
|
+
return (0, _react.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n border-color: ", ";\n background-color: ", ";\n pointer-events: none;\n cursor: default;\n\n div {\n background-color: ", ";\n }\n\n .switch-token {\n background-color: ", " !important;\n\n svg {\n color: ", ";\n }\n }\n "])), theme.colors.neutral.neutral2, theme.colors.neutral.neutral1, theme.colors.neutral.neutral2, theme.colors.neutral.neutral2, theme.colors.neutral.neutral3);
|
|
92
77
|
}
|
|
@@ -52,9 +52,7 @@ describe('Switch', function () {
|
|
|
52
52
|
var onError = jest.fn();
|
|
53
53
|
|
|
54
54
|
var _setup3 = setup({
|
|
55
|
-
onChangeValue: onChangeValue
|
|
56
|
-
onError: onError,
|
|
57
|
-
alert: true
|
|
55
|
+
onChangeValue: onChangeValue
|
|
58
56
|
}),
|
|
59
57
|
SwitchElement = _setup3.SwitchElement;
|
|
60
58
|
|
|
@@ -188,9 +186,7 @@ describe('Switch', function () {
|
|
|
188
186
|
var keysToTest = ['Enter', 'Space'];
|
|
189
187
|
|
|
190
188
|
var _setup8 = setup({
|
|
191
|
-
onChangeValue: onChangeValue
|
|
192
|
-
alert: true,
|
|
193
|
-
onError: onError
|
|
189
|
+
onChangeValue: onChangeValue
|
|
194
190
|
}),
|
|
195
191
|
SwitchElement = _setup8.SwitchElement;
|
|
196
192
|
|
|
@@ -209,8 +205,7 @@ describe('Switch', function () {
|
|
|
209
205
|
|
|
210
206
|
var _setup9 = setup({
|
|
211
207
|
onChangeValue: onChangeValue,
|
|
212
|
-
disabled: true
|
|
213
|
-
onError: onError
|
|
208
|
+
disabled: true
|
|
214
209
|
}),
|
|
215
210
|
SwitchElement = _setup9.SwitchElement;
|
|
216
211
|
|
|
@@ -227,48 +222,30 @@ describe('Switch', function () {
|
|
|
227
222
|
expect(onError).toBeCalledWith('try click with disabled');
|
|
228
223
|
});
|
|
229
224
|
it('Should render the HelpText', function () {
|
|
230
|
-
var
|
|
225
|
+
var helperText = 'Quer batata no almoço?';
|
|
231
226
|
|
|
232
227
|
var _setup10 = setup({
|
|
233
|
-
|
|
228
|
+
helperText: helperText
|
|
234
229
|
}),
|
|
235
230
|
SwitchWrapper = _setup10.SwitchWrapper;
|
|
236
231
|
|
|
237
232
|
var helpTextElement = SwitchWrapper.querySelector('span');
|
|
238
|
-
expect(helpTextElement === null || helpTextElement === void 0 ? void 0 : helpTextElement.innerHTML).toEqual(
|
|
239
|
-
});
|
|
240
|
-
it('Should receive a defaultValue state', function () {
|
|
241
|
-
var _setup11 = setup({
|
|
242
|
-
defaultValue: true
|
|
243
|
-
}),
|
|
244
|
-
SwitchElement = _setup11.SwitchElement;
|
|
245
|
-
|
|
246
|
-
var checkedIcon = SwitchElement.querySelector('svg');
|
|
247
|
-
expect(checkedIcon).toBeInTheDocument();
|
|
248
|
-
});
|
|
249
|
-
it('Should receive a false defaultValue state', function () {
|
|
250
|
-
var _setup12 = setup({
|
|
251
|
-
defaultValue: false
|
|
252
|
-
}),
|
|
253
|
-
SwitchElement = _setup12.SwitchElement;
|
|
254
|
-
|
|
255
|
-
var checkedIcon = SwitchElement.querySelector('svg');
|
|
256
|
-
expect(checkedIcon).not.toBeInTheDocument();
|
|
233
|
+
expect(helpTextElement === null || helpTextElement === void 0 ? void 0 : helpTextElement.innerHTML).toEqual(helperText);
|
|
257
234
|
});
|
|
258
235
|
it('Should receive a checked state', function () {
|
|
259
|
-
var
|
|
236
|
+
var _setup11 = setup({
|
|
260
237
|
checked: true
|
|
261
238
|
}),
|
|
262
|
-
SwitchElement =
|
|
239
|
+
SwitchElement = _setup11.SwitchElement;
|
|
263
240
|
|
|
264
241
|
var checkedIcon = SwitchElement.querySelector('svg');
|
|
265
242
|
expect(checkedIcon).toBeInTheDocument();
|
|
266
243
|
});
|
|
267
244
|
it('Should receive a false checked state', function () {
|
|
268
|
-
var
|
|
245
|
+
var _setup12 = setup({
|
|
269
246
|
checked: false
|
|
270
247
|
}),
|
|
271
|
-
SwitchElement =
|
|
248
|
+
SwitchElement = _setup12.SwitchElement;
|
|
272
249
|
|
|
273
250
|
var checkedIcon = SwitchElement.querySelector('svg');
|
|
274
251
|
expect(checkedIcon).not.toBeInTheDocument();
|
|
@@ -3,16 +3,13 @@ export declare type IStyleProps = {
|
|
|
3
3
|
theme?: Theme;
|
|
4
4
|
disabled?: boolean;
|
|
5
5
|
isActive?: boolean;
|
|
6
|
-
|
|
6
|
+
type?: 'success' | 'error' | 'warning' | 'informative' | 'critical' | 'success_secondary' | 'warning_secondary';
|
|
7
7
|
};
|
|
8
8
|
export declare type IInputProps = {
|
|
9
9
|
disabled?: boolean;
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
SwitchType?: 'success' | 'error' | 'warning' | 'informative' | 'critical' | 'success_secondary' | 'warning_secondary';
|
|
13
|
-
onError?: (error: string) => void;
|
|
10
|
+
helperText?: string;
|
|
11
|
+
type?: 'success' | 'error' | 'warning' | 'informative' | 'critical' | 'success_secondary' | 'warning_secondary';
|
|
14
12
|
onChangeValue?: (value: boolean) => void;
|
|
15
|
-
defaultValue?: boolean;
|
|
16
13
|
checked?: boolean;
|
|
17
14
|
};
|
|
18
15
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEvC,oBAAY,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEvC,oBAAY,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EACD,SAAS,GACT,OAAO,GACP,SAAS,GACT,aAAa,GACb,UAAU,GACV,mBAAmB,GACnB,mBAAmB,CAAC;CACzB,CAAC;AAEF,oBAAY,WAAW,GAAG;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EACD,SAAS,GACT,OAAO,GACP,SAAS,GACT,aAAa,GACb,UAAU,GACV,mBAAmB,GACnB,mBAAmB,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC"}
|
|
@@ -4,7 +4,7 @@ export declare const StyledText: import("@emotion/styled").StyledComponent<{
|
|
|
4
4
|
theme?: import("@emotion/react").Theme | undefined;
|
|
5
5
|
as?: import("react").ElementType<any> | undefined;
|
|
6
6
|
} & GenericStyledProps & import("react").ClassAttributes<HTMLParagraphElement> & import("react").HTMLAttributes<HTMLParagraphElement> & {
|
|
7
|
-
variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | undefined;
|
|
7
|
+
variant?: "small" | "caption" | "em" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "p" | "span" | "strong" | undefined;
|
|
8
8
|
color?: import("../..").GlobalColorsProps | (string & {}) | undefined;
|
|
9
9
|
fontSize?: number | "display" | "tiny" | "xxxs" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl" | "giant" | undefined;
|
|
10
10
|
fontWeight?: "400" | "700" | "100" | "200" | "300" | "500" | "600" | "800" | "900" | "bold" | "normal" | undefined;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react';
|
|
2
2
|
import { GlobalColorsProps, defaultTheme } from './../../shared/theme';
|
|
3
3
|
export declare type TypographyProps = DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement> & {
|
|
4
|
-
variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
|
|
4
|
+
variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'label' | 'caption' | 'small' | 'strong' | 'em';
|
|
5
5
|
color?: GlobalColorsProps | (string & {});
|
|
6
6
|
fontSize?: keyof typeof defaultTheme.fontSizes | number;
|
|
7
7
|
fontWeight?: keyof typeof defaultTheme.fontWeight;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEvE,oBAAY,eAAe,GAAG,iBAAiB,CAC7C,cAAc,CAAC,oBAAoB,CAAC,EACpC,oBAAoB,CACrB,GAAG;IACF,OAAO,CAAC,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEvE,oBAAY,eAAe,GAAG,iBAAiB,CAC7C,cAAc,CAAC,oBAAoB,CAAC,EACpC,oBAAoB,CACrB,GAAG;IACF,OAAO,CAAC,EACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,GAAG,GACH,MAAM,GACN,OAAO,GACP,SAAS,GACT,OAAO,GACP,QAAQ,GACR,IAAI,CAAC;IACT,KAAK,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC1C,QAAQ,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC,SAAS,GAAG,MAAM,CAAC;IACxD,UAAU,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC,UAAU,CAAC;IAClD,SAAS,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;IACpE,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACvC,aAAa,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,YAAY,GAAG,MAAM,CAAC;IAClE,cAAc,CAAC,EAAE,WAAW,GAAG,cAAc,GAAG,MAAM,CAAC;IACvD,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { IStyleProps } from '../../types';
|
|
3
|
-
export declare const OptionsAreaWrapper: import("@emotion/styled").StyledComponent<{
|
|
4
|
-
theme?: import("@emotion/react").Theme | undefined;
|
|
5
|
-
as?: import("react").ElementType<any> | undefined;
|
|
6
|
-
} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
7
|
-
export declare const AutoCompleteInput: import("@emotion/styled").StyledComponent<{
|
|
8
|
-
theme?: import("@emotion/react").Theme | undefined;
|
|
9
|
-
as?: import("react").ElementType<any> | undefined;
|
|
10
|
-
} & IStyleProps, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
|
|
11
|
-
export declare const Span: import("@emotion/styled").StyledComponent<{
|
|
12
|
-
theme?: import("@emotion/react").Theme | undefined;
|
|
13
|
-
as?: import("react").ElementType<any> | undefined;
|
|
14
|
-
} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
15
|
-
export declare const OptionItem: import("react").NamedExoticComponent<{
|
|
16
|
-
theme?: import("@emotion/react").Theme | undefined;
|
|
17
|
-
as?: import("react").ElementType<any> | undefined;
|
|
18
|
-
} & IStyleProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
|
|
19
|
-
//# sourceMappingURL=OptionsArea.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"OptionsArea.d.ts","sourceRoot":"","sources":["../../../../../src/components/MultipleSelect/components/OptionsArea/OptionsArea.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,eAAO,MAAM,kBAAkB;;;uHAwC9B,CAAC;AA+BF,eAAO,MAAM,iBAAiB;;;gIAe7B,CAAC;AAEF,eAAO,MAAM,IAAI;;;yHAGhB,CAAC;AAEF,eAAO,MAAM,UAAU;;;mHAErB,CAAC"}
|
|
@@ -1,101 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.Span = exports.OptionsAreaWrapper = exports.OptionItem = exports.AutoCompleteInput = void 0;
|
|
7
|
-
|
|
8
|
-
var _styled = _interopRequireDefault(require("@emotion/styled"));
|
|
9
|
-
|
|
10
|
-
var _react = require("react");
|
|
11
|
-
|
|
12
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
13
|
-
|
|
14
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
-
|
|
16
|
-
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
17
|
-
|
|
18
|
-
var OptionsAreaWrapper = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: absolute;\n top: 54px;\n left: 0;\n z-index: ", ";\n\n display: flex;\n scroll-behavior: smooth;\n\n flex-direction: column;\n box-sizing: border-box;\n background-color: ", ";\n\n color: ", ";\n\n width: 100%;\n max-height: 248px;\n border-radius: ", ";\n\n overflow-y: auto;\n\n padding: 8px;\n\n box-shadow: ", ";\n\n &::-webkit-scrollbar {\n width: 6px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: ", ";\n }\n"])), function (props) {
|
|
19
|
-
return props.theme.zIndex.level2;
|
|
20
|
-
}, function (_ref) {
|
|
21
|
-
var theme = _ref.theme;
|
|
22
|
-
return {
|
|
23
|
-
dark: theme.colors.neutral.neutral6,
|
|
24
|
-
light: theme.colors.body.light
|
|
25
|
-
}[theme.colorMode];
|
|
26
|
-
}, function (_ref2) {
|
|
27
|
-
var theme = _ref2.theme;
|
|
28
|
-
return {
|
|
29
|
-
dark: theme.colors.neutral.white,
|
|
30
|
-
light: theme.colors.neutral.black
|
|
31
|
-
}[theme.colorMode];
|
|
32
|
-
}, function (_ref3) {
|
|
33
|
-
var theme = _ref3.theme;
|
|
34
|
-
return theme.borderRadius.default;
|
|
35
|
-
}, function (_ref4) {
|
|
36
|
-
var theme = _ref4.theme;
|
|
37
|
-
return {
|
|
38
|
-
dark: "0px 16px 32px ".concat(theme.colors.neutral.black),
|
|
39
|
-
light: theme.shadow.level3
|
|
40
|
-
}[theme.colorMode];
|
|
41
|
-
}, function (_ref5) {
|
|
42
|
-
var theme = _ref5.theme,
|
|
43
|
-
selectType = _ref5.selectType;
|
|
44
|
-
return selectType ? theme.colors[selectType].default : theme.colors.primary.default;
|
|
45
|
-
}, function (_ref6) {
|
|
46
|
-
var theme = _ref6.theme;
|
|
47
|
-
return theme.borderRadius.default;
|
|
48
|
-
});
|
|
49
|
-
|
|
50
|
-
exports.OptionsAreaWrapper = OptionsAreaWrapper;
|
|
51
|
-
|
|
52
|
-
var OptionItemStyle = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n box-sizing: border-box;\n\n height: 58px;\n\n padding: 16px 24px;\n\n outline: 0;\n background: none;\n border: 0;\n\n font-size: ", ";\n font-weight: ", ";\n\n cursor: pointer;\n\n :focus,\n :hover {\n background-color: ", ";\n\n border-radius: ", ";\n }\n"])), function (_ref7) {
|
|
53
|
-
var theme = _ref7.theme;
|
|
54
|
-
return theme.fontSizes.xs;
|
|
55
|
-
}, function (_ref8) {
|
|
56
|
-
var theme = _ref8.theme;
|
|
57
|
-
return theme.fontWeight['500'];
|
|
58
|
-
}, function (_ref9) {
|
|
59
|
-
var theme = _ref9.theme;
|
|
60
|
-
return {
|
|
61
|
-
dark: theme.colors.neutral.neutral5,
|
|
62
|
-
light: theme.colors.neutral.neutral1
|
|
63
|
-
}[theme.colorMode];
|
|
64
|
-
}, function (_ref10) {
|
|
65
|
-
var theme = _ref10.theme;
|
|
66
|
-
return theme.borderRadius.default;
|
|
67
|
-
});
|
|
68
|
-
|
|
69
|
-
var AutoCompleteInput = _styled.default.input(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n padding: 8px;\n outline: 0;\n color: ", ";\n\n background: ", ";\n\n margin-bottom: 8px;\n\n border: 2px solid\n ", ";\n\n border-radius: ", "; ;\n"])), function (_ref11) {
|
|
70
|
-
var theme = _ref11.theme;
|
|
71
|
-
return {
|
|
72
|
-
dark: theme.colors.neutral.white,
|
|
73
|
-
light: ''
|
|
74
|
-
}[theme.colorMode];
|
|
75
|
-
}, function (_ref12) {
|
|
76
|
-
var theme = _ref12.theme;
|
|
77
|
-
return {
|
|
78
|
-
dark: theme.colors.neutral.neutral3,
|
|
79
|
-
light: ''
|
|
80
|
-
}[theme.colorMode];
|
|
81
|
-
}, function (_ref13) {
|
|
82
|
-
var theme = _ref13.theme,
|
|
83
|
-
selectType = _ref13.selectType;
|
|
84
|
-
return selectType ? theme.colors[selectType].blurred : theme.colors.primary.disabled;
|
|
85
|
-
}, function (_ref14) {
|
|
86
|
-
var theme = _ref14.theme;
|
|
87
|
-
return theme.borderRadius.default;
|
|
88
|
-
});
|
|
89
|
-
|
|
90
|
-
exports.AutoCompleteInput = AutoCompleteInput;
|
|
91
|
-
|
|
92
|
-
var Span = _styled.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n font-size: ", ";\n text-align: center;\n"])), function (_ref15) {
|
|
93
|
-
var theme = _ref15.theme;
|
|
94
|
-
return theme.fontSizes.xxxs;
|
|
95
|
-
});
|
|
96
|
-
|
|
97
|
-
exports.Span = Span;
|
|
98
|
-
var OptionItem = /*#__PURE__*/(0, _react.memo)(OptionItemStyle, function (prevProps, nextProps) {
|
|
99
|
-
return prevProps.active === nextProps.active;
|
|
100
|
-
});
|
|
101
|
-
exports.OptionItem = OptionItem;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { IStyleProps } from '../../types';
|
|
3
|
-
export declare const Label: import("@emotion/styled").StyledComponent<{
|
|
4
|
-
theme?: import("@emotion/react").Theme | undefined;
|
|
5
|
-
as?: import("react").ElementType<any> | undefined;
|
|
6
|
-
} & IStyleProps, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
|
|
7
|
-
//# sourceMappingURL=Label.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../../src/components/MultipleSelect/components/SelectArea/Label.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,eAAO,MAAM,KAAK;;;gIAyBjB,CAAC"}
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.Label = void 0;
|
|
7
|
-
|
|
8
|
-
var _styled = _interopRequireDefault(require("@emotion/styled"));
|
|
9
|
-
|
|
10
|
-
var _react = require("@emotion/react");
|
|
11
|
-
|
|
12
|
-
var _templateObject, _templateObject2;
|
|
13
|
-
|
|
14
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
-
|
|
16
|
-
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
17
|
-
|
|
18
|
-
var Label = _styled.default.label(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: absolute;\n box-sizing: border-box;\n\n color: ", ";\n transition: all ease-in-out 0.2s;\n\n font-weight: ", ";\n font-size: ", ";\n\n padding: 0 8px;\n\n ", ";\n"])), function (_ref) {
|
|
19
|
-
var theme = _ref.theme;
|
|
20
|
-
return {
|
|
21
|
-
dark: theme.colors.neutral.white,
|
|
22
|
-
light: theme.colors.neutral.neutral5
|
|
23
|
-
}[theme.colorMode];
|
|
24
|
-
}, function (_ref2) {
|
|
25
|
-
var theme = _ref2.theme;
|
|
26
|
-
return theme.fontWeight['500'];
|
|
27
|
-
}, function (_ref3) {
|
|
28
|
-
var theme = _ref3.theme;
|
|
29
|
-
return theme.fontSizes.xxs;
|
|
30
|
-
}, function (_ref4) {
|
|
31
|
-
var animate = _ref4.animate,
|
|
32
|
-
theme = _ref4.theme;
|
|
33
|
-
return animate ? (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n transform: translate(-12px, -11px) scale(0.8);\n background-color: ", ";\n height: 20px;\n "])), theme.colorMode === 'dark' ? theme.colors.neutral.black : theme.colors.neutral.white) : '';
|
|
34
|
-
});
|
|
35
|
-
|
|
36
|
-
exports.Label = Label;
|