@pedidopago/ui 1.3.14 → 1.3.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/dist/components/DatePicker/components/DatePickerContent.d.ts.map +1 -1
  2. package/dist/components/DatePicker/components/DatePickerContent.js +3 -2
  3. package/dist/components/DatePicker/index.d.ts.map +1 -1
  4. package/dist/components/DatePicker/index.js +7 -6
  5. package/dist/components/DatePicker/styles.d.ts.map +1 -1
  6. package/dist/components/DatePicker/styles.js +4 -6
  7. package/dist/components/Modal/index.d.ts.map +1 -1
  8. package/dist/components/Modal/index.js +1 -4
  9. package/dist/components/Modal/styles.d.ts +2 -0
  10. package/dist/components/Modal/styles.d.ts.map +1 -1
  11. package/dist/components/Modal/styles.js +1 -1
  12. package/dist/components/MultipleSelect/components/OptionsArea/index.js +10 -10
  13. package/dist/components/MultipleSelect/components/OptionsArea/{OptionsArea.d.ts → styles.d.ts} +1 -1
  14. package/dist/components/MultipleSelect/components/OptionsArea/styles.d.ts.map +1 -0
  15. package/dist/components/MultipleSelect/components/OptionsArea/{OptionsArea.js → styles.js} +0 -0
  16. package/dist/components/MultipleSelect/components/SelectArea/styles.js +1 -1
  17. package/dist/components/MultipleSelect/index.d.ts.map +1 -1
  18. package/dist/components/MultipleSelect/index.js +0 -6
  19. package/dist/components/Select/index.d.ts.map +1 -1
  20. package/dist/components/Select/index.js +20 -16
  21. package/dist/components/Select/styles.d.ts.map +1 -1
  22. package/dist/components/Select/styles.js +3 -3
  23. package/dist/components/Select/types.d.ts +3 -1
  24. package/dist/components/Select/types.d.ts.map +1 -1
  25. package/dist/components/Switch/index.d.ts.map +1 -1
  26. package/dist/components/Switch/index.js +23 -68
  27. package/dist/components/Switch/styles.d.ts.map +1 -1
  28. package/dist/components/Switch/styles.js +8 -23
  29. package/dist/components/Switch/switch.test.js +10 -33
  30. package/dist/components/Switch/types.d.ts +3 -6
  31. package/dist/components/Switch/types.d.ts.map +1 -1
  32. package/package.json +1 -1
  33. package/dist/components/MultipleSelect/components/OptionsArea/OptionsArea.d.ts.map +0 -1
  34. package/dist/components/MultipleSelect/components/SelectArea/Label.d.ts +0 -7
  35. package/dist/components/MultipleSelect/components/SelectArea/Label.d.ts.map +0 -1
  36. package/dist/components/MultipleSelect/components/SelectArea/Label.js +0 -36
@@ -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,gBAwNxB,CAAC"}
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 isDisabled = day === 0;
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: !isDisabled && day
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,gBA2JjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
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(endDate.getFullYear(), endDate.getMonth() + (endDate.getMonth() !== startDate.getMonth() ? 0 : 1), 1);
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(secondCalendarDate.getFullYear(), secondCalendarDate.getMonth() - 1) : maxDate,
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;;;;;;;;;;;;;+HAkJ/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"}
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 pointer-events: ", ";\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.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 ? 'transparent' : 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;
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.isPrevNextMonth ? 'none' : 'auto';
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) {
@@ -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,gBA+EZ,CAAC"}
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
- style: {
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;;;yGAgBlB,CAAC"}
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: 0;\n\n transition: opacity ease ", ";\n "])), theme.zIndex.level24, theme.colors.neutral.neutral5, theme.transition.speed);
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 _OptionsArea = require("./OptionsArea");
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.map(function (option) {
60
+ var newDataWithoutChosen = data.flatMap(function (option) {
61
61
  return !selectedOptionsNames.includes(option.label) ? option : [];
62
- }).flat();
63
- var newDataToShow = AutoComplete ? newDataWithoutChosen.map(function (option) {
64
- return option.value.includes(AutoCompleteState) ? option : [];
65
- }).flat() : newDataWithoutChosen;
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)(_OptionsArea.OptionsAreaWrapper, {
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)(_OptionsArea.AutoCompleteInput, {
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)(_OptionsArea.OptionItem, {
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)(_OptionsArea.Span, {
143
+ }), AutoCompleteState.length > 0 && dataToShow.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Span, {
144
144
  children: "Sem Resultados"
145
145
  })]
146
146
  });
@@ -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=OptionsArea.d.ts.map
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"}
@@ -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) scale(0.8);\n background-color: ", ";\n height: 20px;\n "])), theme.colorMode === 'dark' ? theme.colors.neutral.black : theme.colors.neutral.white) : '';
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;
@@ -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,CAuIjD,CAAC;AAEF,eAAe,cAAc,CAAC"}
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 +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,kJAgLX,CAAC;AAGF,eAAe,MAAM,CAAC"}
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.jsx)("fieldset", {
199
- children: !!label && /*#__PURE__*/(0, _jsxRuntime.jsx)("legend", {
200
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
201
- fontSize: "xxs",
202
- variant: "span",
203
- children: label
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
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("fieldset", {
207
- children: !!label && /*#__PURE__*/(0, _jsxRuntime.jsx)("legend", {
208
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
209
- fontSize: "xxs",
210
- variant: "span",
211
- children: label
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;;;gIAgK1B,CAAC;AAEH,eAAO,MAAM,MAAM;;;;;yGAwBjB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;UAI5B,CAAC"}
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 ", ";\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 ? {
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;CACf;AAED,oBAAY,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC;AAErC,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,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,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
+ {"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;AAIrF,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAItC,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,WAAW,CAqFhC,CAAC;AAEF,eAAe,WAAW,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 _ref$disabled = _ref.disabled,
32
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
33
- helpText = _ref.helpText,
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)(false),
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
- !!checked && setIsActive(checked);
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
- if (alert) {
66
- setIsActive(false);
67
- !!onError && onError('try click with alert');
68
- } else if (disabled) {
69
- setIsActive(false);
70
- !!onError && onError('try click with disabled');
71
- } else {
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
- if (alert) {
98
- setIsActive(false);
99
- !!onError && onError('try click with alert');
100
- } else if (disabled) {
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: alert || disabled ? false : isActive,
73
+ isActive: isActive,
119
74
  tabIndex: 0,
120
- SwitchType: SwitchType,
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
- }), helpText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.HelpText, {
82
+ }), helperText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.HelpText, {
128
83
  disabled: disabled,
129
- children: helpText
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;;;uHAyBlB,CAAC;AAEF,eAAO,MAAM,WAAW;;;uHAmBvB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;yHAGpB,CAAC"}
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
- SwitchType = _ref8.SwitchType;
65
+ type = _ref8.type;
72
66
  if (!theme) return '';
73
- var idleColor = SwitchType ? theme.colors[SwitchType].default : theme.colors.primary.default;
74
- var hoverColor = SwitchType ? (0, _colorFunctions.hoverFunction)(theme.colors[SwitchType].default) : theme.colors.primary.hover;
75
- var focusColor = SwitchType ? (0, _colorFunctions.focusFunction)(theme.colors[SwitchType].default) : theme.colors.primary.focus;
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\n ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), idleColor, idleColor, theme.colors.body.light, idleColor, hoverColor, hoverColor, hoverColor, focusColor, focusColor, SwitchType ? theme.colors[SwitchType].blurred : theme.colors.primary.disabled, focusColor);
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 div {\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 helpText = 'Quer batata no almoço?';
225
+ var helperText = 'Quer batata no almoço?';
231
226
 
232
227
  var _setup10 = setup({
233
- helpText: helpText
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(helpText);
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 _setup13 = setup({
236
+ var _setup11 = setup({
260
237
  checked: true
261
238
  }),
262
- SwitchElement = _setup13.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 _setup14 = setup({
245
+ var _setup12 = setup({
269
246
  checked: false
270
247
  }),
271
- SwitchElement = _setup14.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
- SwitchType?: 'success' | 'error' | 'warning' | 'informative' | 'critical' | 'success_secondary' | 'warning_secondary';
6
+ type?: 'success' | 'error' | 'warning' | 'informative' | 'critical' | 'success_secondary' | 'warning_secondary';
7
7
  };
8
8
  export declare type IInputProps = {
9
9
  disabled?: boolean;
10
- helpText?: string;
11
- alert?: boolean;
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,UAAU,CAAC,EACP,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,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EACP,SAAS,GACT,OAAO,GACP,SAAS,GACT,aAAa,GACb,UAAU,GACV,mBAAmB,GACnB,mBAAmB,CAAC;IACxB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC"}
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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pedidopago/ui",
3
- "version": "1.3.14",
3
+ "version": "1.3.17",
4
4
  "description": "Quick build beatiful Pedido Pago apps",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -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,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;