@pedidopago/ui 1.3.13 → 1.3.16
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/Button/styles.js +1 -1
- package/dist/components/ColorPicker/utils/parsers.js +18 -18
- package/dist/components/DatePicker/components/DatePickerContent.d.ts.map +1 -1
- package/dist/components/DatePicker/components/DatePickerContent.js +3 -2
- package/dist/components/DatePicker/index.d.ts.map +1 -1
- package/dist/components/DatePicker/index.js +7 -6
- package/dist/components/DatePicker/styles.d.ts.map +1 -1
- package/dist/components/DatePicker/styles.js +4 -6
- package/dist/components/Dropzone/utils/accepts.js +8 -8
- package/dist/components/Icon/scripts/build.js +2 -2
- package/dist/components/Icon/scripts/extractor.js +5 -5
- package/dist/components/Icon/scripts/writers.js +9 -9
- package/dist/components/Modal/index.d.ts.map +1 -1
- package/dist/components/Modal/index.js +1 -4
- package/dist/components/Modal/styles.d.ts +2 -0
- package/dist/components/Modal/styles.d.ts.map +1 -1
- package/dist/components/Modal/styles.js +1 -1
- package/dist/components/MultipleSelect/components/OptionsArea/index.js +10 -10
- package/dist/components/MultipleSelect/components/OptionsArea/{OptionsArea.d.ts → styles.d.ts} +1 -1
- package/dist/components/MultipleSelect/components/OptionsArea/styles.d.ts.map +1 -0
- package/dist/components/MultipleSelect/components/OptionsArea/{OptionsArea.js → styles.js} +0 -0
- package/dist/components/MultipleSelect/components/SelectArea/styles.js +1 -1
- package/dist/components/Rating/components/GradientIcon/scripts/build.js +4 -4
- package/dist/components/Rating/components/GradientIcon/scripts/extractor.js +5 -5
- package/dist/components/Rating/components/GradientIcon/scripts/writers.js +9 -9
- package/dist/components/Select/index.d.ts.map +1 -1
- package/dist/components/Select/index.js +20 -16
- package/dist/components/Select/styles.d.ts.map +1 -1
- package/dist/components/Select/styles.js +3 -3
- package/dist/components/Select/types.d.ts +3 -1
- package/dist/components/Select/types.d.ts.map +1 -1
- package/dist/components/Skeleton/styles.d.ts.map +1 -1
- package/dist/components/Skeleton/styles.js +3 -3
- 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/shared/hooks/useBreakpoint.js +5 -5
- package/dist/utils/GenerateKey.js +6 -6
- package/dist/utils/brightnessColorChange.js +6 -6
- package/dist/utils/colorCheck.js +24 -24
- package/dist/utils/getColorValue.js +8 -8
- package/dist/utils/invertColor.js +5 -5
- package/package.json +1 -1
- package/dist/components/MultipleSelect/components/OptionsArea/OptionsArea.d.ts.map +0 -1
- 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
|
@@ -58,7 +58,7 @@ var ButtonContainer = _styled.default.button(_templateObject || (_templateObject
|
|
|
58
58
|
|
|
59
59
|
switch (variant) {
|
|
60
60
|
case 'solid':
|
|
61
|
-
return (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n &:is(&:hover, &:focus):not(:disabled) {\n box-shadow: inset 0 0 40px 40px rgba(0, 0, 0, 0.
|
|
61
|
+
return (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n &:is(&:hover, &:focus):not(:disabled) {\n box-shadow: inset 0 0 40px 40px rgba(0, 0, 0, 0.08);\n }\n "])));
|
|
62
62
|
|
|
63
63
|
case 'outline':
|
|
64
64
|
return (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n background-color: transparent;\n color: ", ";\n border: 3px ", " solid;\n box-shadow: none;\n &:is(&:hover, &:focus):not(:disabled) {\n filter: var(--button-brightness);\n }\n "])), textColor || bgColor || theme.colors.primary.default, bgColor || textColor || theme.colors.primary.default);
|
|
@@ -15,10 +15,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
15
15
|
|
|
16
16
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
17
17
|
|
|
18
|
-
/**
|
|
19
|
-
* This function converts a string color to a hsva color object
|
|
20
|
-
* @param color : Color to convert to hsva;
|
|
21
|
-
* @returns : hsva color object
|
|
18
|
+
/**
|
|
19
|
+
* This function converts a string color to a hsva color object
|
|
20
|
+
* @param color : Color to convert to hsva;
|
|
21
|
+
* @returns : hsva color object
|
|
22
22
|
*/
|
|
23
23
|
var colorToHsva = function colorToHsva(color) {
|
|
24
24
|
// Check if the color is a hex string and convert it to rgba and then to hsva
|
|
@@ -53,10 +53,10 @@ var colorToHsva = function colorToHsva(color) {
|
|
|
53
53
|
a: 1
|
|
54
54
|
};
|
|
55
55
|
};
|
|
56
|
-
/**
|
|
57
|
-
* This function gets the color mode from the color string
|
|
58
|
-
* @param color : Color to check your output mode
|
|
59
|
-
* @returns : Color mode
|
|
56
|
+
/**
|
|
57
|
+
* This function gets the color mode from the color string
|
|
58
|
+
* @param color : Color to check your output mode
|
|
59
|
+
* @returns : Color mode
|
|
60
60
|
*/
|
|
61
61
|
|
|
62
62
|
|
|
@@ -85,11 +85,11 @@ var colorMode = function colorMode(color) {
|
|
|
85
85
|
|
|
86
86
|
return 'unknown';
|
|
87
87
|
};
|
|
88
|
-
/**
|
|
89
|
-
* This function converts a hsva color object to a string color
|
|
90
|
-
* @param hsva : hsva color object
|
|
91
|
-
* @param colorMode : Color output mode
|
|
92
|
-
* @returns : Color string
|
|
88
|
+
/**
|
|
89
|
+
* This function converts a hsva color object to a string color
|
|
90
|
+
* @param hsva : hsva color object
|
|
91
|
+
* @param colorMode : Color output mode
|
|
92
|
+
* @returns : Color string
|
|
93
93
|
*/
|
|
94
94
|
|
|
95
95
|
|
|
@@ -116,11 +116,11 @@ var colorFromHsva = function colorFromHsva(hsva, colorMode) {
|
|
|
116
116
|
return 'unknown';
|
|
117
117
|
}
|
|
118
118
|
};
|
|
119
|
-
/**
|
|
120
|
-
* This function converts a color string to output color mode
|
|
121
|
-
* @param color : Color string;
|
|
122
|
-
* @param outputMode : Color output mode;
|
|
123
|
-
* @returns : Color string
|
|
119
|
+
/**
|
|
120
|
+
* This function converts a color string to output color mode
|
|
121
|
+
* @param color : Color string;
|
|
122
|
+
* @param outputMode : Color output mode;
|
|
123
|
+
* @returns : Color string
|
|
124
124
|
*/
|
|
125
125
|
|
|
126
126
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePickerContent.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/components/DatePickerContent.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAElD,eAAO,MAAM,iBAAiB,4KAc3B,sBAAsB,
|
|
1
|
+
{"version":3,"file":"DatePickerContent.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/components/DatePickerContent.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAElD,eAAO,MAAM,iBAAiB,4KAc3B,sBAAsB,gBAiOxB,CAAC"}
|
|
@@ -181,7 +181,8 @@ var DatePickerContent = function DatePickerContent(_ref) {
|
|
|
181
181
|
var isToday = cellDate.toLocaleDateString() === new Date().toLocaleDateString();
|
|
182
182
|
var isStartDateOfRange = cellDate.toLocaleDateString() === startDate.toLocaleDateString();
|
|
183
183
|
var isEndDateOfRange = cellDate.toLocaleDateString() === endDate.toLocaleDateString();
|
|
184
|
-
var
|
|
184
|
+
var outOfCurrentMonthInRange = type === 'range' && (isPreviousMonth || isNextMonth);
|
|
185
|
+
var isDisabled = day === 0 || minDate && cellDate.getTime() < minDate.getTime() || maxDate && cellDate.getTime() > maxDate.getTime() || outOfCurrentMonthInRange;
|
|
185
186
|
var isExtended = variant === 'extended';
|
|
186
187
|
var removeZeros = days.filter(function (day) {
|
|
187
188
|
return day !== 0;
|
|
@@ -217,7 +218,7 @@ var DatePickerContent = function DatePickerContent(_ref) {
|
|
|
217
218
|
handleChangeSelectDate(cellDate);
|
|
218
219
|
},
|
|
219
220
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.DatePickerTableCellSpan, {
|
|
220
|
-
children: !
|
|
221
|
+
children: day !== 0 && !outOfCurrentMonthInRange && day
|
|
221
222
|
})
|
|
222
223
|
}, dayIndex);
|
|
223
224
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/index.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,QAAA,MAAM,UAAU,iEAQb,eAAe,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/index.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,QAAA,MAAM,UAAU,iEAQb,eAAe,gBAiKjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -59,14 +59,14 @@ var DatePicker = function DatePicker(_ref) {
|
|
|
59
59
|
setEndDate = _useState4[1];
|
|
60
60
|
|
|
61
61
|
var _useState5 = (0, _react.useState)(function () {
|
|
62
|
-
return new Date(startDate.getFullYear(), startDate.getMonth(), 1);
|
|
62
|
+
return new Date(startDate.getFullYear(), startDate.getMonth() - (variant === 'extended' ? 1 : 0), 1);
|
|
63
63
|
}),
|
|
64
64
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
65
65
|
firstCalendarDate = _useState6[0],
|
|
66
66
|
setFirstCalendarDate = _useState6[1];
|
|
67
67
|
|
|
68
68
|
var _useState7 = (0, _react.useState)(function () {
|
|
69
|
-
return new Date(
|
|
69
|
+
return new Date(startDate.getFullYear(), startDate.getMonth(), 1);
|
|
70
70
|
}),
|
|
71
71
|
_useState8 = _slicedToArray(_useState7, 2),
|
|
72
72
|
secondCalendarDate = _useState8[0],
|
|
@@ -126,6 +126,7 @@ var DatePicker = function DatePicker(_ref) {
|
|
|
126
126
|
}
|
|
127
127
|
};
|
|
128
128
|
|
|
129
|
+
var firstCalendarLimit = new Date(secondCalendarDate.getFullYear(), secondCalendarDate.getMonth(), 0);
|
|
129
130
|
var DatePickerContentProps = {
|
|
130
131
|
variant: variant,
|
|
131
132
|
type: type,
|
|
@@ -134,8 +135,8 @@ var DatePicker = function DatePicker(_ref) {
|
|
|
134
135
|
isInTheRange: isInTheRange,
|
|
135
136
|
handleMouseOver: handleMouseOver,
|
|
136
137
|
handleChange: handleChange,
|
|
137
|
-
minDate: minDate,
|
|
138
|
-
maxDate: maxDate
|
|
138
|
+
minDate: minDate && new Date(minDate),
|
|
139
|
+
maxDate: maxDate && new Date(maxDate)
|
|
139
140
|
};
|
|
140
141
|
|
|
141
142
|
var handleToggleYearPicker = function handleToggleYearPicker() {
|
|
@@ -156,14 +157,14 @@ var DatePicker = function DatePicker(_ref) {
|
|
|
156
157
|
enableYearPicker: !maxDate && !minDate
|
|
157
158
|
}), {}, {
|
|
158
159
|
date: firstCalendarDate,
|
|
159
|
-
maxDate: variant === 'extended' ? new Date(
|
|
160
|
+
maxDate: variant === 'extended' && !maxDate ? firstCalendarLimit : variant === 'extended' ? maxDate && new Date(maxDate).getTime() < firstCalendarLimit.getTime() ? DatePickerContentProps.maxDate : firstCalendarLimit : DatePickerContentProps.maxDate,
|
|
160
161
|
handleChangeDate: function handleChangeDate(newDate) {
|
|
161
162
|
return setFirstCalendarDate(newDate);
|
|
162
163
|
}
|
|
163
164
|
})), variant === 'extended' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePickerContent.DatePickerContent, _objectSpread(_objectSpread({}, DatePickerContentProps), {}, {
|
|
164
165
|
date: secondCalendarDate,
|
|
165
166
|
minDate: new Date(firstCalendarDate.getFullYear(), firstCalendarDate.getMonth() + 1, 1),
|
|
166
|
-
maxDate: maxDate,
|
|
167
|
+
maxDate: DatePickerContentProps.maxDate,
|
|
167
168
|
handleChangeDate: function handleChangeDate(newDate) {
|
|
168
169
|
setSecondCalendarDate(newDate);
|
|
169
170
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/styles.ts"],"names":[],"mappings":";AAOA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7C,eAAO,MAAM,0BAA0B;;;;gBACzB,OAAO;yGAkBpB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;yGAG/B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;yGAM5B,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;yGAqBjC,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;qHAqBlC,CAAC;AAEF,eAAO,MAAM,cAAc;;;yGAE1B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;uIAc/B,CAAC;AACF,eAAO,MAAM,kBAAkB;;;;;mHAkB9B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;+
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/styles.ts"],"names":[],"mappings":";AAOA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7C,eAAO,MAAM,0BAA0B;;;;gBACzB,OAAO;yGAkBpB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;yGAG/B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;yGAM5B,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;yGAqBjC,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;qHAqBlC,CAAC;AAEF,eAAO,MAAM,cAAc;;;yGAE1B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;uIAc/B,CAAC;AACF,eAAO,MAAM,kBAAkB;;;;;mHAkB9B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;+HAiJ/B,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;gIAGnC,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;yGAGnC,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;yGAG9B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;yGA+B9B,CAAC"}
|
|
@@ -73,14 +73,12 @@ var DatePickerTableRow = _styled.default.tr(_templateObject8 || (_templateObject
|
|
|
73
73
|
|
|
74
74
|
exports.DatePickerTableRow = DatePickerTableRow;
|
|
75
75
|
|
|
76
|
-
var DatePickerTableCell = _styled.default.td(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n position: relative;\n height: 0;\n padding: 12px;\n text-align: center;\n font-family: inherit;\n font-size: 0.75rem;\n font-weight: 600;\n border-radius: 50%;\n cursor: pointer;\n background-color: ", ";\n\n color: ", ";\n
|
|
77
|
-
return !props.isPrevNextMonth && (props.isSelected || props.isEndDateOfRange) ? (0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme) : 'transparent';
|
|
76
|
+
var DatePickerTableCell = _styled.default.td(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n position: relative;\n height: 0;\n padding: 12px;\n text-align: center;\n font-family: inherit;\n font-size: 0.75rem;\n font-weight: 600;\n border-radius: 50%;\n cursor: pointer;\n background-color: ", ";\n\n color: ", ";\n\n user-select: none;\n\n transition: background 150ms ease;\n\n ", "\n\n ", "\n\n ", "\n\n &:hover {\n background-color: ", ";\n }\n\n ", "\n\n &.is-current {\n &:before {\n border-radius: 0 50% 50% 0 !important;\n }\n }\n"])), function (props) {
|
|
77
|
+
return !props.isPrevNextMonth && !props.disabled && (props.isSelected || props.isEndDateOfRange) ? (0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme) : 'transparent';
|
|
78
78
|
}, function (props) {
|
|
79
|
-
return props.isPrevNextMonth ?
|
|
79
|
+
return props.isPrevNextMonth ? props.theme.colors.neutral.neutral2 : props.isSelected || props.isEndDateOfRange ? props.theme.colors.body.light : props['aria-selected'] ? (0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme) : props.theme.colors.neutral.black;
|
|
80
80
|
}, function (props) {
|
|
81
|
-
return props.
|
|
82
|
-
}, function (props) {
|
|
83
|
-
return props.disabled && "\n background:none;\n cursor: default; \n pointer-events: none;\n ";
|
|
81
|
+
return props.disabled && "\n pointer-events: none;\n cursor: default;\n color: ".concat(props.theme.colors.neutral.neutral1, ";\n ");
|
|
84
82
|
}, function (props) {
|
|
85
83
|
return props.isToday && !props.isSelected && !props.isEndDateOfRange && "\n &:after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n border: solid 1px ".concat(props.theme.colors.neutral.neutral2, ";\n transform: translate(-50%, -50%);\n }\n ");
|
|
86
84
|
}, function (props) {
|
|
@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.accepts = void 0;
|
|
7
7
|
|
|
8
|
-
/**
|
|
9
|
-
* Verify if the given file can be accepted by the dropzone.
|
|
10
|
-
*
|
|
11
|
-
* Code abstration of: https://github.com/react-dropzone/attr-accept
|
|
12
|
-
*
|
|
13
|
-
* @param file The file to verify
|
|
14
|
-
* @param acceptedFiles The accepted files
|
|
15
|
-
* @returns true if the file can be accepted, false otherwise
|
|
8
|
+
/**
|
|
9
|
+
* Verify if the given file can be accepted by the dropzone.
|
|
10
|
+
*
|
|
11
|
+
* Code abstration of: https://github.com/react-dropzone/attr-accept
|
|
12
|
+
*
|
|
13
|
+
* @param file The file to verify
|
|
14
|
+
* @param acceptedFiles The accepted files
|
|
15
|
+
* @returns true if the file can be accepted, false otherwise
|
|
16
16
|
*/
|
|
17
17
|
var accepts = function accepts(file, acceptedFormats) {
|
|
18
18
|
if (file && acceptedFormats) {
|
|
@@ -11,11 +11,11 @@ var _fs = require("fs");
|
|
|
11
11
|
|
|
12
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
13
|
|
|
14
|
-
/**
|
|
15
|
-
* Extractor is a function that extracts the svg content from the icon file.
|
|
16
|
-
* @param files - The directory with the files to extract.
|
|
17
|
-
* @param currentPath - The current path of the file
|
|
18
|
-
* @returns Array of objects with the name and the content of the icon svg.
|
|
14
|
+
/**
|
|
15
|
+
* Extractor is a function that extracts the svg content from the icon file.
|
|
16
|
+
* @param files - The directory with the files to extract.
|
|
17
|
+
* @param currentPath - The current path of the file
|
|
18
|
+
* @returns Array of objects with the name and the content of the icon svg.
|
|
19
19
|
*/
|
|
20
20
|
var extractor = function extractor(files, currentPath) {
|
|
21
21
|
return files.map(function (file) {
|
|
@@ -11,10 +11,10 @@ var _path = _interopRequireDefault(require("path"));
|
|
|
11
11
|
|
|
12
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
13
|
|
|
14
|
-
/**
|
|
15
|
-
* This function generates the types file for the Icon component
|
|
16
|
-
* @param iconsList - The list of icons
|
|
17
|
-
* @param overwrite - If true, the file will be overwritten
|
|
14
|
+
/**
|
|
15
|
+
* This function generates the types file for the Icon component
|
|
16
|
+
* @param iconsList - The list of icons
|
|
17
|
+
* @param overwrite - If true, the file will be overwritten
|
|
18
18
|
*/
|
|
19
19
|
var writeTypesFile = function writeTypesFile(iconsList) {
|
|
20
20
|
var overwrite = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
@@ -27,11 +27,11 @@ var writeTypesFile = function writeTypesFile(iconsList) {
|
|
|
27
27
|
}).join(' | '), ";\n\n export type IIconComponentProps = {\n name: IconName;\n size?: number | string;\n color?: GlobalColorsProps | (string & {});\n secondColor?: GlobalColorsProps | (string & {});\n }\n "));
|
|
28
28
|
}
|
|
29
29
|
};
|
|
30
|
-
/**
|
|
31
|
-
* This function generates the icons json file for the Icon component
|
|
32
|
-
* @param iconsList - The list of icons
|
|
33
|
-
* @param jsonFileName - The name of the json file
|
|
34
|
-
* @param overwrite - If true, the file will be overwritten
|
|
30
|
+
/**
|
|
31
|
+
* This function generates the icons json file for the Icon component
|
|
32
|
+
* @param iconsList - The list of icons
|
|
33
|
+
* @param jsonFileName - The name of the json file
|
|
34
|
+
* @param overwrite - If true, the file will be overwritten
|
|
35
35
|
*/
|
|
36
36
|
|
|
37
37
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,eAAO,MAAM,KAAK,oJAef,UAAU,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,eAAO,MAAM,KAAK,oJAef,UAAU,gBAyEZ,CAAC"}
|
|
@@ -112,10 +112,7 @@ var Modal = function Modal(_ref) {
|
|
|
112
112
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ReactPortal.ReactPortal, {
|
|
113
113
|
wrapperId: "portal-root",
|
|
114
114
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Overlay, {
|
|
115
|
-
|
|
116
|
-
opacity: open && !hideOverlay ? 0.1 : 0,
|
|
117
|
-
pointerEvents: open ? 'auto' : 'none'
|
|
118
|
-
},
|
|
115
|
+
isOpen: open,
|
|
119
116
|
onClick: function onClick() {
|
|
120
117
|
return onClose();
|
|
121
118
|
}
|
|
@@ -23,6 +23,8 @@ export declare const ModalElement: import("@emotion/styled").StyledComponent<{
|
|
|
23
23
|
export declare const Overlay: import("@emotion/styled").StyledComponent<{
|
|
24
24
|
theme?: Theme | undefined;
|
|
25
25
|
as?: import("react").ElementType<any> | undefined;
|
|
26
|
+
} & {
|
|
27
|
+
isOpen: boolean;
|
|
26
28
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
27
29
|
export {};
|
|
28
30
|
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/styles.ts"],"names":[],"mappings":";AACA,OAAO,EAAO,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAE5C,UAAU,mBAAmB;IAC3B,IAAI,EAAE,OAAO,CAAC;IAEd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,eAAe,EAAE,MAAM,CAAC;IAExB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,cAAc;;;+HAsBzB,CAAC;AAEH,eAAO,MAAM,YAAY;;;;UACjB,OAAO;;;yGA4Cb,CAAC;AAEH,eAAO,MAAM,OAAO
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/styles.ts"],"names":[],"mappings":";AACA,OAAO,EAAO,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAE5C,UAAU,mBAAmB;IAC3B,IAAI,EAAE,OAAO,CAAC;IAEd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,eAAe,EAAE,MAAM,CAAC;IAExB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,cAAc;;;+HAsBzB,CAAC;AAEH,eAAO,MAAM,YAAY;;;;UACjB,OAAO;;;yGA4Cb,CAAC;AAEH,eAAO,MAAM,OAAO;;;;YACV,OAAO;yGAmBf,CAAC"}
|
|
@@ -42,7 +42,7 @@ exports.ModalElement = ModalElement;
|
|
|
42
42
|
|
|
43
43
|
var Overlay = _styled.default.div(function (props) {
|
|
44
44
|
var theme = props.theme;
|
|
45
|
-
return (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: fixed;\n left: 0px;\n right: 0px;\n top: 0px;\n bottom: 0px;\n z-index: ", ";\n\n background: ", ";\n opacity:
|
|
45
|
+
return (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: fixed;\n left: 0px;\n right: 0px;\n top: 0px;\n bottom: 0px;\n z-index: ", ";\n\n background: ", ";\n\n opacity: ", ";\n pointer-events: ", ";\n\n transition: opacity ease ", ";\n "])), theme.zIndex.level24, theme.colors.neutral.neutral5, props.isOpen ? 0.1 : 0, props.isOpen ? 'auto' : 'none', theme.transition.speed);
|
|
46
46
|
});
|
|
47
47
|
|
|
48
48
|
exports.Overlay = Overlay;
|
|
@@ -7,7 +7,7 @@ exports.OptionsArea = OptionsArea;
|
|
|
7
7
|
|
|
8
8
|
var _react = require("react");
|
|
9
9
|
|
|
10
|
-
var
|
|
10
|
+
var _styles = require("./styles");
|
|
11
11
|
|
|
12
12
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
13
|
|
|
@@ -57,12 +57,12 @@ function OptionsArea(_ref) {
|
|
|
57
57
|
var selectedOptionsNames = selectedOptions.map(function (option) {
|
|
58
58
|
return option.label;
|
|
59
59
|
});
|
|
60
|
-
var newDataWithoutChosen = data.
|
|
60
|
+
var newDataWithoutChosen = data.flatMap(function (option) {
|
|
61
61
|
return !selectedOptionsNames.includes(option.label) ? option : [];
|
|
62
|
-
})
|
|
63
|
-
var newDataToShow = AutoComplete ? newDataWithoutChosen.
|
|
64
|
-
return option.
|
|
65
|
-
})
|
|
62
|
+
});
|
|
63
|
+
var newDataToShow = AutoComplete ? newDataWithoutChosen.flatMap(function (option) {
|
|
64
|
+
return option.label.toLowerCase().includes(AutoCompleteState.toLocaleLowerCase()) ? option : [];
|
|
65
|
+
}) : newDataWithoutChosen;
|
|
66
66
|
|
|
67
67
|
if (AutoCompleteState.length > 0 && onChangeSearch) {
|
|
68
68
|
clearTimeout(onChangeSearchDebounce);
|
|
@@ -104,13 +104,13 @@ function OptionsArea(_ref) {
|
|
|
104
104
|
break;
|
|
105
105
|
}
|
|
106
106
|
}, [setShowOptionsArea]);
|
|
107
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(
|
|
107
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.OptionsAreaWrapper, {
|
|
108
108
|
"data-testid": "options-area",
|
|
109
109
|
selectType: inputAlert,
|
|
110
110
|
itensLength: dataToShow.length,
|
|
111
111
|
onKeyDown: keyDownHandler,
|
|
112
112
|
onScroll: scrollHandler,
|
|
113
|
-
children: [AutoComplete && /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
113
|
+
children: [AutoComplete && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.AutoCompleteInput, {
|
|
114
114
|
type: "text",
|
|
115
115
|
autoFocus: true,
|
|
116
116
|
ref: AutoCompleteRef,
|
|
@@ -120,7 +120,7 @@ function OptionsArea(_ref) {
|
|
|
120
120
|
return setAutoCompleteState(e.target.value);
|
|
121
121
|
}
|
|
122
122
|
}), dataToShow.map(function (option, index) {
|
|
123
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
123
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.OptionItem, {
|
|
124
124
|
ref: !AutoComplete && index === chosenItem ? OptionRef : null,
|
|
125
125
|
onFocus: function onFocus() {
|
|
126
126
|
return setChosenItem(index);
|
|
@@ -140,7 +140,7 @@ function OptionsArea(_ref) {
|
|
|
140
140
|
},
|
|
141
141
|
children: option.label
|
|
142
142
|
}, "".concat(option.label).concat(index));
|
|
143
|
-
}), AutoCompleteState.length > 0 && dataToShow.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
143
|
+
}), AutoCompleteState.length > 0 && dataToShow.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Span, {
|
|
144
144
|
children: "Sem Resultados"
|
|
145
145
|
})]
|
|
146
146
|
});
|
package/dist/components/MultipleSelect/components/OptionsArea/{OptionsArea.d.ts → styles.d.ts}
RENAMED
|
@@ -16,4 +16,4 @@ export declare const OptionItem: import("react").NamedExoticComponent<{
|
|
|
16
16
|
theme?: import("@emotion/react").Theme | undefined;
|
|
17
17
|
as?: import("react").ElementType<any> | undefined;
|
|
18
18
|
} & IStyleProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
|
|
19
|
-
//# sourceMappingURL=
|
|
19
|
+
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/MultipleSelect/components/OptionsArea/styles.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"}
|
|
File without changes
|
|
@@ -30,7 +30,7 @@ var Label = _styled.default.label(_templateObject || (_templateObject = _taggedT
|
|
|
30
30
|
}, function (_ref4) {
|
|
31
31
|
var animate = _ref4.animate,
|
|
32
32
|
theme = _ref4.theme;
|
|
33
|
-
return animate ? (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n transform: translate(-12px, -11px)
|
|
33
|
+
return animate ? (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n transform: translate(-12px, -11px);\n background-color: ", ";\n height: 20px;\n "])), theme.colorMode === 'dark' ? theme.colors.neutral.black : theme.colors.neutral.white) : '';
|
|
34
34
|
});
|
|
35
35
|
|
|
36
36
|
exports.Label = Label;
|
|
@@ -35,10 +35,10 @@ var twirlTimer = function twirlTimer() {
|
|
|
35
35
|
x &= 3;
|
|
36
36
|
}, 250);
|
|
37
37
|
};
|
|
38
|
-
/**
|
|
39
|
-
* Builds the icons and types files.
|
|
40
|
-
* To run this script, you need to call this at the test file:
|
|
41
|
-
* `require('./scripts/build')` or `import build from './scripts/build'`
|
|
38
|
+
/**
|
|
39
|
+
* Builds the icons and types files.
|
|
40
|
+
* To run this script, you need to call this at the test file:
|
|
41
|
+
* `require('./scripts/build')` or `import build from './scripts/build'`
|
|
42
42
|
*/
|
|
43
43
|
|
|
44
44
|
|
|
@@ -11,11 +11,11 @@ var _fs = require("fs");
|
|
|
11
11
|
|
|
12
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
13
|
|
|
14
|
-
/**
|
|
15
|
-
* Extractor is a function that extracts the svg content from the icon file.
|
|
16
|
-
* @param files - The directory with the files to extract.
|
|
17
|
-
* @param currentPath - The current path of the file
|
|
18
|
-
* @returns Array of objects with the name and the content of the icon svg.
|
|
14
|
+
/**
|
|
15
|
+
* Extractor is a function that extracts the svg content from the icon file.
|
|
16
|
+
* @param files - The directory with the files to extract.
|
|
17
|
+
* @param currentPath - The current path of the file
|
|
18
|
+
* @returns Array of objects with the name and the content of the icon svg.
|
|
19
19
|
*/
|
|
20
20
|
var extractor = function extractor(files, currentPath) {
|
|
21
21
|
return files.map(function (file) {
|
|
@@ -11,10 +11,10 @@ var _path = _interopRequireDefault(require("path"));
|
|
|
11
11
|
|
|
12
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
13
|
|
|
14
|
-
/**
|
|
15
|
-
* This function generates the types file for the Icon component
|
|
16
|
-
* @param iconsList - The list of icons
|
|
17
|
-
* @param overwrite - If true, the file will be overwritten
|
|
14
|
+
/**
|
|
15
|
+
* This function generates the types file for the Icon component
|
|
16
|
+
* @param iconsList - The list of icons
|
|
17
|
+
* @param overwrite - If true, the file will be overwritten
|
|
18
18
|
*/
|
|
19
19
|
var writeTypesFile = function writeTypesFile(iconsList) {
|
|
20
20
|
var overwrite = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
@@ -27,11 +27,11 @@ var writeTypesFile = function writeTypesFile(iconsList) {
|
|
|
27
27
|
}).join(' | '), ";\n\n export type IIconComponentProps = {\n name: IconName;\n size?: number | string;\n color?: GlobalColorsProps | (string & {});\n secondColor?: GlobalColorsProps | (string & {});\n }\n "));
|
|
28
28
|
}
|
|
29
29
|
};
|
|
30
|
-
/**
|
|
31
|
-
* This function generates the icons json file for the Icon component
|
|
32
|
-
* @param iconsList - The list of icons
|
|
33
|
-
* @param jsonFileName - The name of the json file
|
|
34
|
-
* @param overwrite - If true, the file will be overwritten
|
|
30
|
+
/**
|
|
31
|
+
* This function generates the icons json file for the Icon component
|
|
32
|
+
* @param iconsList - The list of icons
|
|
33
|
+
* @param jsonFileName - The name of the json file
|
|
34
|
+
* @param overwrite - If true, the file will be overwritten
|
|
35
35
|
*/
|
|
36
36
|
|
|
37
37
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,mBAAmB,EAOpB,MAAM,OAAO,CAAC;AAMf,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,QAAA,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,mBAAmB,EAOpB,MAAM,OAAO,CAAC;AAMf,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,QAAA,MAAM,MAAM,kJA+LX,CAAC;AAGF,eAAe,MAAM,CAAC"}
|
|
@@ -19,7 +19,7 @@ var _styles = require("./styles");
|
|
|
19
19
|
|
|
20
20
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
21
21
|
|
|
22
|
-
var _excluded = ["label", "placeholder", "options", "alert", "helperText", "width", "sizeSelect"];
|
|
22
|
+
var _excluded = ["label", "placeholder", "options", "alert", "helperText", "width", "sizeSelect", "variant"];
|
|
23
23
|
|
|
24
24
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
25
25
|
|
|
@@ -57,6 +57,7 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
57
57
|
helperText = _ref.helperText,
|
|
58
58
|
width = _ref.width,
|
|
59
59
|
sizeSelect = _ref.sizeSelect,
|
|
60
|
+
variant = _ref.variant,
|
|
60
61
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
61
62
|
|
|
62
63
|
var containerRef = (0, _react.useRef)(null);
|
|
@@ -173,9 +174,10 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
173
174
|
onClick: toggleOptionsAreaView,
|
|
174
175
|
className: rest.className,
|
|
175
176
|
style: rest.style,
|
|
177
|
+
variant: variant,
|
|
176
178
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
177
179
|
ref: containerRef,
|
|
178
|
-
children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
|
|
180
|
+
children: [label && variant !== 'unstyled' && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
|
|
179
181
|
children: label
|
|
180
182
|
}), selectedOption === undefined ?
|
|
181
183
|
/*#__PURE__*/
|
|
@@ -195,22 +197,24 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
195
197
|
children: options[selectedOption].label
|
|
196
198
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
|
|
197
199
|
name: "chevron-down"
|
|
198
|
-
}), /*#__PURE__*/(0, _jsxRuntime.
|
|
199
|
-
children:
|
|
200
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
200
|
+
}), variant !== 'unstyled' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
201
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("fieldset", {
|
|
202
|
+
children: !!label && /*#__PURE__*/(0, _jsxRuntime.jsx)("legend", {
|
|
203
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
|
|
204
|
+
fontSize: "xxs",
|
|
205
|
+
variant: "span",
|
|
206
|
+
children: label
|
|
207
|
+
})
|
|
204
208
|
})
|
|
205
|
-
})
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
209
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("fieldset", {
|
|
210
|
+
children: !!label && /*#__PURE__*/(0, _jsxRuntime.jsx)("legend", {
|
|
211
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
|
|
212
|
+
fontSize: "xxs",
|
|
213
|
+
variant: "span",
|
|
214
|
+
children: label
|
|
215
|
+
})
|
|
212
216
|
})
|
|
213
|
-
})
|
|
217
|
+
})]
|
|
214
218
|
})]
|
|
215
219
|
}), !!helperText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
|
|
216
220
|
fontSize: "xxs",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Select/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE3D,eAAO,MAAM,eAAe;;;
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Select/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE3D,eAAO,MAAM,eAAe;;;gIAqK1B,CAAC;AAEH,eAAO,MAAM,MAAM;;;;;yGAwBjB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;UAI5B,CAAC"}
|
|
@@ -18,13 +18,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
18
18
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
19
19
|
|
|
20
20
|
var SelectContainer = _styled.default.div(function (props) {
|
|
21
|
-
return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n outline: none;\n user-select: none;\n width: ", ";\n height: ", ";\n ", ";\n & > div {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n border-radius: ", ";\n padding: 0
|
|
21
|
+
return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n outline: none;\n user-select: none;\n width: ", ";\n height: ", ";\n ", ";\n & > div {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n border-radius: ", ";\n padding: 0\n ", ";\n width: 100%;\n height: 100%;\n position: relative;\n cursor: pointer;\n color: ", ";\n transition: background-color ease;\n transition-duration: ", ";\n\n ", ";\n\n ", ";\n\n & > label {\n position: absolute;\n left: 20px;\n top: 50%;\n transform: translateY(-50%);\n font-size: 1rem;\n font-weight: 500;\n color: ", ";\n transition: top ease, left ease, color ease;\n transition-duration: ", ";\n\n ", "\n }\n\n // Chevron Down icon\n & > svg {\n flex-shrink: 0;\n transform: rotate(0deg);\n color: ", ";\n transition: transform ease;\n transition-duration: ", ";\n }\n\n & > fieldset {\n border: 2px solid;\n border-color: ", ";\n border-radius: ", ";\n padding: 0 14px;\n position: absolute;\n left: 0px;\n right: 0px;\n top: 0px;\n bottom: 0px;\n pointer-events: none;\n transition: border-color ease;\n transition-duration: ", ";\n\n &:last-of-type {\n border-radius: calc(", " + 2px);\n padding: 0 16px;\n border-color: transparent;\n left: -2px;\n right: -2px;\n top: -2px;\n bottom: -2px;\n }\n\n & > legend {\n display: ", ";\n line-height: 2px;\n user-select: none;\n padding: 0 4px;\n & > span {\n color: transparent;\n }\n }\n }\n }\n\n // Helper text\n & > p {\n margin: 8px 20px;\n\n ", "\n }\n\n & > input {\n appearance: none;\n border: 0;\n width: 0px;\n position: absolute;\n opacity: 0;\n pointer-events: none;\n }\n "])), props.size ? {
|
|
22
22
|
sm: '78px',
|
|
23
23
|
md: '100%'
|
|
24
|
-
}[props.size] : props.width, props.size ? {
|
|
24
|
+
}[props.size] : props.width, props.variant === 'unstyled' ? 'auto' : props.size ? {
|
|
25
25
|
sm: '36px',
|
|
26
26
|
md: '56px'
|
|
27
|
-
}[props.size] : '56px', !props.disabled && (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n &:hover {\n & > div {\n color: ", ";\n\n & > label {\n color: ", ";\n }\n\n & > fieldset {\n &:first-of-type {\n border-color: ", ";\n }\n }\n }\n }\n\n &:focus {\n & > div {\n color: ", ";\n\n & > svg {\n transform: rotate(180deg);\n }\n\n & > fieldset {\n &:first-of-type {\n border-color: ", ";\n }\n &:last-of-type {\n border-color: ", ";\n }\n }\n }\n }\n "])), props.theme.colors.neutral.black, props.theme.colors.neutral.neutral5, props.alert ? props.theme.colors[props.alert].blurred : props.theme.colors.primary.hover, props.theme.colors.neutral.black, props.alert ? props.theme.colors[props.alert].default : props.theme.colors.primary.hover, props.alert ? props.theme.colors[props.alert].blurred : props.theme.colors.primary.disabled), props.theme.borderRadius.default, props.size && {
|
|
27
|
+
}[props.size] : '56px', !props.disabled && (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n &:hover {\n & > div {\n color: ", ";\n\n & > label {\n color: ", ";\n }\n\n & > fieldset {\n &:first-of-type {\n border-color: ", ";\n }\n }\n }\n }\n\n &:focus {\n & > div {\n color: ", ";\n\n & > svg {\n transform: rotate(180deg);\n }\n\n & > fieldset {\n &:first-of-type {\n border-color: ", ";\n }\n &:last-of-type {\n border-color: ", ";\n }\n }\n }\n }\n "])), props.theme.colors.neutral.black, props.theme.colors.neutral.neutral5, props.alert ? props.theme.colors[props.alert].blurred : props.theme.colors.primary.hover, props.theme.colors.neutral.black, props.alert ? props.theme.colors[props.alert].default : props.theme.colors.primary.hover, props.alert ? props.theme.colors[props.alert].blurred : props.theme.colors.primary.disabled), props.theme.borderRadius.default, props.variant === 'unstyled' ? '0' : props.size && {
|
|
28
28
|
sm: '16px',
|
|
29
29
|
md: '20px'
|
|
30
30
|
}[props.size], props.theme.colors.neutral.neutral5, props.theme.transition.speed, props.alert && (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n background: ", "33;\n "])), props.theme.colors[props.alert].blurred), props.disabled && (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n background: ", ";\n cursor: default;\n "])), props.theme.colors.neutral.neutral1), props.theme.colors.neutral.neutral3, props.theme.transition.speed, props.filled && (0, _react.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n left: 20px;\n top: -1px;\n font-size: 0.875rem;\n "]))), props.theme.colors.neutral.neutral5, props.theme.transition.speed, props.alert && !props.disabled ? props.theme.colors[props.alert].default : props.theme.colors.neutral.neutral2, props.theme.borderRadius.default, props.theme.transition.speed, props.theme.borderRadius.default, props.filled ? 'block' : 'none', props.disabled && (0, _react.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n color: ", ";\n "])), props.theme.colors.neutral.neutral3));
|
|
@@ -1,11 +1,12 @@
|
|
|
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 {
|
|
8
8
|
label?: string;
|
|
9
|
+
variant?: 'unstyled' | 'default';
|
|
9
10
|
options: SelectOption[];
|
|
10
11
|
helperText?: string;
|
|
11
12
|
alert?: SelectAlertType;
|
|
@@ -14,6 +15,7 @@ export interface SelectProps {
|
|
|
14
15
|
sizeSelect?: sizeSelect;
|
|
15
16
|
}
|
|
16
17
|
export interface SelectContainerProps {
|
|
18
|
+
variant?: 'unstyled' | 'default';
|
|
17
19
|
alert?: SelectAlertType;
|
|
18
20
|
filled: boolean;
|
|
19
21
|
disabled: boolean;
|
|
@@ -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"}
|