@gympass/yoga 7.50.4 → 7.51.1

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 (13) hide show
  1. package/cjs/AutoComplete/web/AutoComplete.js +88 -27
  2. package/cjs/AutoComplete/web/AutoComplete.test.js +6 -2
  3. package/cjs/Datepicker/web/Datepicker.js +20 -20
  4. package/cjs/Datepicker/web/Datepicker.test.js +11 -6
  5. package/cjs/Input/web/Input.js +20 -6
  6. package/cjs/Skeleton/native/Skeleton.test.js +1 -1
  7. package/esm/AutoComplete/web/AutoComplete.js +88 -28
  8. package/esm/AutoComplete/web/AutoComplete.test.js +6 -2
  9. package/esm/Datepicker/web/Datepicker.js +20 -20
  10. package/esm/Datepicker/web/Datepicker.test.js +11 -6
  11. package/esm/Input/web/Input.js +21 -7
  12. package/esm/Skeleton/native/Skeleton.test.js +2 -1
  13. package/package.json +3 -3
package/cjs/AutoComplete/web/AutoComplete.js CHANGED
@@ -9,13 +9,15 @@ var _downshift = _interopRequireDefault(require("downshift"));
9
9
 
10
10
  var _propTypes = require("prop-types");
11
11
 
12
- var _styledComponents = _interopRequireDefault(require("styled-components"));
12
+ var _styledComponents = _interopRequireWildcard(require("styled-components"));
13
+
14
+ var _yogaIcons = require("@gympass/yoga-icons");
13
15
 
14
16
  var _Input = _interopRequireDefault(require("../../Input/web/Input"));
15
17
 
16
- var _excluded = ["className", "style", "full", "options", "onChange", "onClean", "onSelect", "value"];
18
+ var _excluded = ["className", "style", "full", "options", "onChange", "onClean", "onSelect", "value", "error", "openSuggestionsAriaLabel", "closeSuggestionsAriaLabel"];
17
19
 
18
- var _templateObject, _templateObject2, _templateObject3, _templateObject4;
20
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
19
21
 
20
22
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
21
23
 
@@ -44,17 +46,20 @@ var Wrapper = _styledComponents["default"].div(_templateObject || (_templateObje
44
46
 
45
47
  var List = _styledComponents["default"].ul(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n position: absolute;\n margin: 0;\n\n padding: 0;\n\n z-index: 999;\n\n ", "\n"])), function (_ref3) {
46
48
  var full = _ref3.full,
47
- autocomplete = _ref3.theme.yoga.components.autocomplete;
48
- return "\n top: " + autocomplete.height + "px;\n\n width: " + (full ? '100%' : autocomplete.width + "px") + ";\n max-height: " + autocomplete.height * 6 + "px;\n box-sizing: border-box;\n\n background-color: " + autocomplete.field.backgroundColor + ";\n\n border-width: " + autocomplete.border.width + "px;\n border-style: solid;\n border-color: " + autocomplete.border.color.typed + ";\n\n border-top-width: 0;\n border-bottom-left-radius: " + autocomplete.border.radius + "px;\n border-bottom-right-radius: " + autocomplete.border.radius + "px;\n\n overflow: hidden;\n ";
49
+ error = _ref3.error,
50
+ _ref3$theme$yoga = _ref3.theme.yoga,
51
+ colors = _ref3$theme$yoga.colors,
52
+ autocomplete = _ref3$theme$yoga.components.autocomplete;
53
+ return (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n top: ", "px;\n\n width: ", ";\n max-height: ", "px;\n overflow-y: auto;\n box-sizing: border-box;\n\n background-color: ", ";\n\n border-width: ", "px;\n border-style: solid;\n border-color: ", ";\n\n border-color: ", ";\n\n border-top-width: 0;\n border-bottom-left-radius: ", "px;\n border-bottom-right-radius: ", "px;\n "])), autocomplete.height, full ? '100%' : autocomplete.width + "px", autocomplete.height * 6, autocomplete.field.backgroundColor, autocomplete.border.width, autocomplete.border.color.typed, error ? colors.feedback.attention[1] : autocomplete.border.color.typed, autocomplete.border.radius, autocomplete.border.radius);
49
54
  });
50
55
 
51
- var Item = _styledComponents["default"].li(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n box-sizing: border-box;\n\n list-style: none;\n\n cursor: pointer;\n\n ", "\n"])), function (_ref4) {
56
+ var Item = _styledComponents["default"].li(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n box-sizing: border-box;\n\n list-style: none;\n\n cursor: pointer;\n\n ", "\n"])), function (_ref4) {
52
57
  var selected = _ref4.selected,
53
58
  autocomplete = _ref4.theme.yoga.components.autocomplete;
54
59
  return "\n padding:\n " + autocomplete.list.padding.top + "px\n " + autocomplete.list.padding.right + "px\n " + autocomplete.list.padding.bottom + "px\n " + autocomplete.list.padding.left + "px;\n\n background-color: " + autocomplete.list.backgroundColor["default"] + ";\n outline: none;\n\n font-size: " + autocomplete.list.font.size + "px;\n font-weight: " + autocomplete.list.font.weight["default"] + ";\n line-height: " + autocomplete.list.font.lineHeight + "px;\n\n &:hover {\n background-color: " + autocomplete.list.backgroundColor.hover + ";\n }\n\n " + (selected ? "background-color: " + autocomplete.list.backgroundColor.hover + ";" : '') + "\n ";
55
60
  });
56
61
 
57
- var Match = _styledComponents["default"].mark(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n background: transparent;\n color: inherit;\n\n ", "\n"])), function (_ref5) {
62
+ var Match = _styledComponents["default"].mark(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n background: transparent;\n color: inherit;\n\n ", "\n"])), function (_ref5) {
58
63
  var autocomplete = _ref5.theme.yoga.components.autocomplete;
59
64
  return "\n font-weight: " + autocomplete.list.font.weight.matched + ";\n ";
60
65
  });
@@ -70,12 +75,40 @@ var AutoComplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref6, re
70
75
  _onClean = _ref6.onClean,
71
76
  onSelect = _ref6.onSelect,
72
77
  value = _ref6.value,
78
+ error = _ref6.error,
79
+ openSuggestionsAriaLabel = _ref6.openSuggestionsAriaLabel,
80
+ closeSuggestionsAriaLabel = _ref6.closeSuggestionsAriaLabel,
73
81
  props = _objectWithoutPropertiesLoose(_ref6, _excluded);
74
82
 
75
83
  var _useState = (0, _react.useState)(value),
76
84
  userValue = _useState[0],
77
85
  setUserValue = _useState[1];
78
86
 
87
+ var _useState2 = (0, _react.useState)(false),
88
+ isSuggestionsOpen = _useState2[0],
89
+ setIsSuggestionsOpen = _useState2[1];
90
+
91
+ var inputRef = (0, _react.useRef)();
92
+ var handleOpenSuggestions = (0, _react.useCallback)(function () {
93
+ var _inputRef$current;
94
+
95
+ (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
96
+ setIsSuggestionsOpen(true);
97
+ }, []);
98
+ var handleCloseSuggestions = (0, _react.useCallback)(function () {
99
+ setIsSuggestionsOpen(false);
100
+ }, []);
101
+ (0, _react.useEffect)(function () {
102
+ var handleKeyUp = function handleKeyUp(_ref7) {
103
+ var key = _ref7.key;
104
+ return key === 'Escape' && handleCloseSuggestions();
105
+ };
106
+
107
+ window.addEventListener('keyup', handleKeyUp);
108
+ return function () {
109
+ return window.removeEventListener('keyup', handleKeyUp);
110
+ };
111
+ }, []);
79
112
  return /*#__PURE__*/_react["default"].createElement(_downshift["default"], {
80
113
  selectedItem: userValue,
81
114
  onStateChange: function onStateChange(changes) {
@@ -86,48 +119,66 @@ var AutoComplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref6, re
86
119
  setUserValue(selectedItem);
87
120
  onSelect(selectedItem);
88
121
  onChange(selectedItem);
122
+ handleCloseSuggestions();
89
123
  } else if (Object.prototype.hasOwnProperty.call(changes, 'inputValue')) {
90
124
  setUserValue(inputValue);
91
125
  onChange(inputValue);
92
126
  }
93
127
  }
94
- }, function (_ref7) {
95
- var getInputProps = _ref7.getInputProps,
96
- getItemProps = _ref7.getItemProps,
97
- clearSelection = _ref7.clearSelection,
98
- getMenuProps = _ref7.getMenuProps,
99
- getRootProps = _ref7.getRootProps,
100
- highlightedIndex = _ref7.highlightedIndex,
101
- isOpen = _ref7.isOpen,
102
- openMenu = _ref7.openMenu,
103
- inputValue = _ref7.inputValue;
104
- var reg = new RegExp("(" + (escapeRegExp(inputValue || '').trim() || null) + ")", 'gi');
128
+ }, function (_ref8) {
129
+ var getInputProps = _ref8.getInputProps,
130
+ getItemProps = _ref8.getItemProps,
131
+ clearSelection = _ref8.clearSelection,
132
+ getMenuProps = _ref8.getMenuProps,
133
+ getRootProps = _ref8.getRootProps,
134
+ highlightedIndex = _ref8.highlightedIndex,
135
+ isOpen = _ref8.isOpen,
136
+ openMenu = _ref8.openMenu,
137
+ inputValue = _ref8.inputValue;
138
+ var reg = new RegExp("(" + escapeRegExp(inputValue || '').trim() + ")", 'gi');
105
139
  var suggestionList = options.filter(function (option) {
106
140
  return option.match(reg);
107
141
  }).sort(function (first, second) {
108
142
  return first.toLowerCase().indexOf(inputValue) < second.toLowerCase().indexOf(inputValue) ? -1 : 1;
109
- }).slice(0, 6);
110
- var hasSuggestion = isOpen && Boolean(suggestionList.length);
143
+ });
144
+
145
+ if (!!inputValue && isOpen) {
146
+ setIsSuggestionsOpen(true);
147
+ }
148
+
111
149
  return /*#__PURE__*/_react["default"].createElement(Wrapper, _extends({
112
150
  className: className,
113
151
  style: style,
114
152
  full: full,
115
- isOpen: hasSuggestion
153
+ isOpen: isSuggestionsOpen
116
154
  }, getRootProps(), {
117
- ref: ref
155
+ ref: ref,
156
+ onBlur: handleCloseSuggestions
118
157
  }), /*#__PURE__*/_react["default"].createElement(_Input["default"], _extends({}, props, {
158
+ error: error,
119
159
  full: full,
120
160
  onClean: function onClean(cleanable) {
121
161
  _onClean(cleanable);
122
162
 
123
163
  clearSelection();
164
+ handleCloseSuggestions();
124
165
  }
125
166
  }, getInputProps({
126
167
  onFocus: function onFocus() {
127
168
  return inputValue.length ? openMenu() : null;
128
169
  }
129
- }))), hasSuggestion && /*#__PURE__*/_react["default"].createElement(List, _extends({}, getMenuProps(), {
130
- full: full
170
+ }), {
171
+ rightIcon: isSuggestionsOpen ? /*#__PURE__*/_react["default"].createElement(_yogaIcons.ChevronUp, {
172
+ onClick: handleCloseSuggestions,
173
+ "aria-label": closeSuggestionsAriaLabel
174
+ }) : /*#__PURE__*/_react["default"].createElement(_yogaIcons.ChevronDown, {
175
+ onClick: handleOpenSuggestions,
176
+ "aria-label": openSuggestionsAriaLabel
177
+ }),
178
+ ref: inputRef
179
+ })), isSuggestionsOpen && /*#__PURE__*/_react["default"].createElement(List, _extends({}, getMenuProps(), {
180
+ full: full,
181
+ error: !!error
131
182
  }), suggestionList.map(function (option, optionIndex) {
132
183
  return /*#__PURE__*/_react["default"].createElement(Item, getItemProps({
133
184
  key: "" + option + optionIndex,
@@ -135,7 +186,7 @@ var AutoComplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref6, re
135
186
  item: option,
136
187
  selected: highlightedIndex === optionIndex
137
188
  }), option.split(reg).map(function (part, index) {
138
- return part.match(reg) ? /*#__PURE__*/_react["default"].createElement(Match, {
189
+ return !!inputValue && part.match(reg) ? /*#__PURE__*/_react["default"].createElement(Match, {
139
190
  key: index
140
191
  }, part) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
141
192
  key: "unmatch-" + index
@@ -159,7 +210,14 @@ AutoComplete.propTypes = {
159
210
 
160
211
  /** a callback to know when the user cleaned the field */
161
212
  onClean: _propTypes.func,
162
- value: _propTypes.string
213
+ value: _propTypes.string,
214
+ error: _propTypes.string,
215
+
216
+ /** an aria label for the open suggestions icon */
217
+ openSuggestionsAriaLabel: _propTypes.string,
218
+
219
+ /** an aria label for the close suggestions icon */
220
+ closeSuggestionsAriaLabel: _propTypes.string
163
221
  };
164
222
  AutoComplete.defaultProps = {
165
223
  className: undefined,
@@ -169,7 +227,10 @@ AutoComplete.defaultProps = {
169
227
  onSelect: function onSelect() {},
170
228
  onChange: function onChange() {},
171
229
  onClean: function onClean() {},
172
- value: undefined
230
+ value: undefined,
231
+ error: undefined,
232
+ openSuggestionsAriaLabel: 'Open suggestions',
233
+ closeSuggestionsAriaLabel: 'Close suggestions'
173
234
  };
174
235
  var _default = AutoComplete;
175
236
  exports["default"] = _default;
package/cjs/AutoComplete/web/AutoComplete.test.js CHANGED
@@ -74,7 +74,9 @@ describe('<AutoComplete />', function () {
74
74
 
75
75
  _react2.fireEvent.focus(getByDisplayValue('secon'));
76
76
 
77
- _react2.fireEvent.click(getByRole('button'));
77
+ _react2.fireEvent.click(getByRole('button', {
78
+ name: /clear/i
79
+ }));
78
80
 
79
81
  expect(container.querySelector('ul')).toBe(null);
80
82
  });
@@ -119,7 +121,9 @@ describe('<AutoComplete />', function () {
119
121
 
120
122
  _react2.fireEvent.focus(getByDisplayValue('New'));
121
123
 
122
- _react2.fireEvent.click(getByRole('button'));
124
+ _react2.fireEvent.click(getByRole('button', {
125
+ name: /clear/i
126
+ }));
123
127
 
124
128
  expect(onCleanMock).toHaveBeenCalledWith('');
125
129
  expect(onSelectMock).not.toHaveBeenCalled();
package/cjs/Datepicker/web/Datepicker.js CHANGED
@@ -13,7 +13,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
13
13
 
14
14
  var _propTypes = require("prop-types");
15
15
 
16
- var _moment = _interopRequireDefault(require("moment"));
16
+ var _dateFns = require("date-fns");
17
17
 
18
18
  var _Theme = require("../../Theme");
19
19
 
@@ -125,8 +125,8 @@ function Datepicker(_ref8) {
125
125
  var fullWidth = _ref8.fullWidth,
126
126
  type = _ref8.type,
127
127
  placeholder = _ref8.placeholder,
128
- startDate = _ref8.startDate,
129
- endDate = _ref8.endDate,
128
+ initialDate = _ref8.startDate,
129
+ finishDate = _ref8.endDate,
130
130
  onSelectSingle = _ref8.onSelectSingle,
131
131
  disabled = _ref8.disabled,
132
132
  onSelectRange = _ref8.onSelectRange,
@@ -139,12 +139,12 @@ function Datepicker(_ref8) {
139
139
  open = _useState[0],
140
140
  setOpen = _useState[1];
141
141
 
142
- var _useState2 = (0, _react.useState)(startDate),
143
- startD = _useState2[0],
142
+ var _useState2 = (0, _react.useState)(initialDate),
143
+ startDate = _useState2[0],
144
144
  setStartDate = _useState2[1];
145
145
 
146
- var _useState3 = (0, _react.useState)(endDate),
147
- endD = _useState3[0],
146
+ var _useState3 = (0, _react.useState)(finishDate),
147
+ endDate = _useState3[0],
148
148
  setEndDate = _useState3[1];
149
149
 
150
150
  var ref = (0, _react.useRef)(null);
@@ -164,14 +164,14 @@ function Datepicker(_ref8) {
164
164
 
165
165
  (0, _react.useEffect)(function () {
166
166
  if (type === 'single' && onSelectSingle) {
167
- onSelectSingle(startD);
167
+ onSelectSingle(startDate);
168
168
  setOpen(false.toString());
169
169
  } else if (type === 'range' && onSelectRange) {
170
- onSelectRange(startD, endD);
170
+ onSelectRange(startDate, endDate);
171
171
  }
172
172
 
173
- setInputFilled(!!startD);
174
- }, [startD, endD]);
173
+ setInputFilled(!!startDate);
174
+ }, [startDate, endDate]);
175
175
 
176
176
  var onDateSingleSelect = function onDateSingleSelect(startLocal) {
177
177
  setStartDate(startLocal);
@@ -182,10 +182,10 @@ function Datepicker(_ref8) {
182
182
  }, [open]);
183
183
 
184
184
  var onDateRangeSelect = function onDateRangeSelect(selectedDate) {
185
- if (!endD) {
186
- if (!startD) {
185
+ if (!endDate) {
186
+ if (!startDate) {
187
187
  setStartDate(selectedDate);
188
- } else if (selectedDate < startD) {
188
+ } else if (selectedDate < startDate) {
189
189
  setStartDate(selectedDate);
190
190
  setEndDate(undefined);
191
191
  } else setEndDate(selectedDate);
@@ -196,16 +196,16 @@ function Datepicker(_ref8) {
196
196
  };
197
197
 
198
198
  var renderInput = function renderInput() {
199
- if (!startD && !endD) {
199
+ if (!startDate && !endDate) {
200
200
  return /*#__PURE__*/_react["default"].createElement(InputPlaceholder, {
201
201
  disabled: disabled
202
202
  }, placeholder != null ? placeholder : "Select Date");
203
203
  }
204
204
 
205
- var dateFormat = 'MMM D, YYYY';
206
- return startD && /*#__PURE__*/_react["default"].createElement(Input, {
205
+ var dateFormat = 'MMM d, yyyy';
206
+ return startDate && /*#__PURE__*/_react["default"].createElement(Input, {
207
207
  disabled: disabled
208
- }, (0, _moment["default"])(startD).format(dateFormat), endD && " - " + (0, _moment["default"])(endD).format(dateFormat));
208
+ }, (0, _dateFns.format)(startDate, dateFormat), endDate && " - " + (0, _dateFns.format)(endDate, dateFormat));
209
209
  };
210
210
 
211
211
  return /*#__PURE__*/_react["default"].createElement(Wrapper, {
@@ -232,8 +232,8 @@ function Datepicker(_ref8) {
232
232
  onBlur: onBlur
233
233
  }, /*#__PURE__*/_react["default"].createElement(_Calendar["default"], {
234
234
  type: type,
235
- startDate: startD,
236
- endDate: endD,
235
+ startDate: startDate,
236
+ endDate: endDate,
237
237
  onSelectSingle: onDateSingleSelect,
238
238
  onSelectRange: onDateRangeSelect,
239
239
  disablePastDates: disablePastDates,
package/cjs/Datepicker/web/Datepicker.test.js CHANGED
@@ -4,7 +4,7 @@ var _react = _interopRequireDefault(require("react"));
4
4
 
5
5
  var _react2 = require("@testing-library/react");
6
6
 
7
- var _moment = _interopRequireDefault(require("moment"));
7
+ var _dateFns = require("date-fns");
8
8
 
9
9
  var _ = require("../..");
10
10
 
@@ -30,6 +30,9 @@ describe('<Datepicker />', function () {
30
30
  expect(container).toMatchSnapshot();
31
31
  });
32
32
  it('should match with default selected date single Datepicker', function () {
33
+ var mockedDate = new Date(2022, 7, 3);
34
+ jest.useFakeTimers('modern').setSystemTime(mockedDate);
35
+
33
36
  var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
34
37
  type: "single",
35
38
  startDate: testDate
@@ -39,6 +42,8 @@ describe('<Datepicker />', function () {
39
42
  expect(container).toMatchSnapshot();
40
43
  });
41
44
  it('should match with default selected dates range Datepicker', function () {
45
+ var mockedDate = new Date(2022, 7, 3);
46
+ jest.useFakeTimers('modern').setSystemTime(mockedDate);
42
47
  var endDate = new Date();
43
48
  endDate.setDate(testDate.getDate() + 15);
44
49
 
@@ -98,7 +103,7 @@ describe('<Datepicker />', function () {
98
103
  });
99
104
  });
100
105
  describe('Unit', function () {
101
- var dateFormat = 'MMM D, YYYY';
106
+ var dateFormat = 'MMM d, yyyy';
102
107
  it('should call onSelectSingle function on single Datepicker', function () {
103
108
  var onSelectSingle = jest.fn();
104
109
  (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
@@ -143,15 +148,15 @@ describe('<Datepicker />', function () {
143
148
  type: "single",
144
149
  startDate: currentDate
145
150
  })));
146
- var formattedDate = (0, _moment["default"])(currentDate).format(dateFormat);
151
+ var formattedDate = (0, _dateFns.format)(currentDate, dateFormat);
147
152
  expect(_react2.screen.getByText(formattedDate)).toBeVisible();
148
153
  });
149
154
  it('should display default date range on range Datepicker', function () {
150
155
  var currentDate = new Date();
151
156
  var end = new Date();
152
157
  end.setDate(currentDate.getDate() + 15);
153
- var formattedStartDate = (0, _moment["default"])(currentDate).format(dateFormat);
154
- var formattedEndDate = (0, _moment["default"])(end).format(dateFormat);
158
+ var formattedStartDate = (0, _dateFns.format)(currentDate, dateFormat);
159
+ var formattedEndDate = (0, _dateFns.format)(end, dateFormat);
155
160
  (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
156
161
  type: "range",
157
162
  startDate: currentDate,
@@ -211,7 +216,7 @@ describe('<Datepicker />', function () {
211
216
  startDate: testDate,
212
217
  disabled: true
213
218
  })));
214
- var formattedDate = (0, _moment["default"])(testDate).format(dateFormat);
219
+ var formattedDate = (0, _dateFns.format)(testDate, dateFormat);
215
220
 
216
221
  var datepickerInput = _react2.screen.getByText(formattedDate);
217
222
 
package/cjs/Input/web/Input.js CHANGED
@@ -23,9 +23,9 @@ var _Legend = _interopRequireDefault(require("./Legend"));
23
23
 
24
24
  var _Label = _interopRequireDefault(require("./Label"));
25
25
 
26
- var _excluded = ["cleanable", "disabled", "error", "full", "helper", "label", "maxLength", "readOnly", "style", "value", "onChange", "onClean", "hideMaxLength"];
26
+ var _excluded = ["cleanable", "disabled", "error", "full", "helper", "label", "maxLength", "readOnly", "style", "value", "onChange", "onClean", "hideMaxLength", "rightIcon"];
27
27
 
28
- var _templateObject, _templateObject2, _templateObject3;
28
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
29
29
 
30
30
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
31
31
 
@@ -46,11 +46,13 @@ var Control = _styledComponents["default"].div(_templateObject || (_templateObje
46
46
 
47
47
  var IconWrapper = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref2) {
48
48
  var disabled = _ref2.disabled,
49
+ _ref2$hasIconRight = _ref2.hasIconRight,
50
+ hasIconRight = _ref2$hasIconRight === void 0 ? false : _ref2$hasIconRight,
49
51
  _ref2$theme$yoga = _ref2.theme.yoga,
50
52
  colors = _ref2$theme$yoga.colors,
51
53
  spacing = _ref2$theme$yoga.spacing,
52
54
  input = _ref2$theme$yoga.components.input;
53
- return "\n position: absolute;\n top: 0;\n right: 0;\n\n padding-right: " + spacing.small + "px;\n padding-left: " + spacing.xxsmall + "px;\n\n height: " + input.height + "px;\n cursor: pointer;\n\n outline: none;\n\n &:hover svg, &:focus svg {\n fill: " + input.font.color.focus + ";\n }\n\n svg {\n height: " + input.height + "px;\n width: 20px;\n fill: " + input.font.color["default"] + ";\n }\n\n " + (disabled ? "\n cursor: not-allowed;\n pointer-events: none;\n svg {\n fill: " + colors.text.disabled + ";\n }\n " : '') + "\n ";
55
+ return (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n right: ", "px;\n\n padding-right: ", "px;\n padding-left: ", "px;\n\n height: ", "px;\n cursor: pointer;\n\n outline: none;\n\n &:hover svg,\n &:focus svg {\n fill: ", ";\n }\n\n svg {\n height: ", "px;\n width: 20px;\n fill: ", ";\n }\n\n ", "\n "])), hasIconRight ? spacing.large : 0, spacing.small, spacing.xxsmall, input.height, input.font.color.focus, input.height, input.font.color["default"], disabled ? "\n cursor: not-allowed;\n pointer-events: none;\n svg {\n fill: " + colors.text.disabled + ";\n }\n " : '');
54
56
  });
55
57
 
56
58
  var Input = /*#__PURE__*/_react["default"].forwardRef(function (_ref3, ref) {
@@ -67,6 +69,7 @@ var Input = /*#__PURE__*/_react["default"].forwardRef(function (_ref3, ref) {
67
69
  onChange = _ref3.onChange,
68
70
  onClean = _ref3.onClean,
69
71
  hideMaxLength = _ref3.hideMaxLength,
72
+ rightIcon = _ref3.rightIcon,
70
73
  props = _objectWithoutPropertiesLoose(_ref3, _excluded);
71
74
 
72
75
  var inputRef = ref || (0, _react.useRef)(null);
@@ -109,8 +112,17 @@ var Input = /*#__PURE__*/_react["default"].forwardRef(function (_ref3, ref) {
109
112
  onKeyDown: cleanField,
110
113
  width: 20,
111
114
  height: 20,
115
+ role: "button",
116
+ hasIconRight: !!rightIcon
117
+ }, /*#__PURE__*/_react["default"].createElement(_yogaIcons.Close, {
118
+ "aria-label": "Clear"
119
+ })), !!rightIcon && !readOnly && /*#__PURE__*/_react["default"].createElement(IconWrapper, {
120
+ tabIndex: 0,
121
+ disabled: disabled,
122
+ width: 20,
123
+ height: 20,
112
124
  role: "button"
113
- }, /*#__PURE__*/_react["default"].createElement(_yogaIcons.Close, null))), (helper || maxLength || error) && /*#__PURE__*/_react["default"].createElement(_Helper["default"], {
125
+ }, rightIcon)), (helper || maxLength || error) && /*#__PURE__*/_react["default"].createElement(_Helper["default"], {
114
126
  error: error,
115
127
  helper: helper,
116
128
  maxLength: maxLength,
@@ -145,7 +157,8 @@ Input.propTypes = {
145
157
 
146
158
  /** when max length helper is unnecessary to appear */
147
159
  hideMaxLength: _propTypes.bool,
148
- placeholder: _propTypes.string
160
+ placeholder: _propTypes.string,
161
+ rightIcon: _propTypes.node
149
162
  };
150
163
  Input.defaultProps = {
151
164
  className: undefined,
@@ -162,7 +175,8 @@ Input.defaultProps = {
162
175
  onChange: function onChange() {},
163
176
  onClean: function onClean() {},
164
177
  hideMaxLength: false,
165
- placeholder: undefined
178
+ placeholder: undefined,
179
+ rightIcon: undefined
166
180
  };
167
181
  var _default = Input;
168
182
  exports["default"] = _default;
package/cjs/Skeleton/native/Skeleton.test.js CHANGED
@@ -1 +1 @@
1
- var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _react=_interopRequireDefault(require("react"));var _reactNative=require("@testing-library/react-native");var _=require("../..");describe('<Skeleton />',function(){it('should render the circular skeleton',function(){var _render=(0,_reactNative.render)(_react["default"].createElement(_.ThemeProvider,null,_react["default"].createElement(_.Skeleton,{type:"circular",width:64,height:64}))),toJSON=_render.toJSON;expect(toJSON()).toMatchSnapshot();});it('should render the rectangular skeleton',function(){var _render2=(0,_reactNative.render)(_react["default"].createElement(_.ThemeProvider,null,_react["default"].createElement(_.Skeleton,{type:"rectangular",width:400,height:200}))),toJSON=_render2.toJSON;expect(toJSON()).toMatchSnapshot();});it('should render the text skeleton',function(){var _render3=(0,_reactNative.render)(_react["default"].createElement(_.ThemeProvider,null,_react["default"].createElement(_.Skeleton,{type:"text",variant:"body1",width:61}))),toJSON=_render3.toJSON;expect(toJSON()).toMatchSnapshot();});});
1
+ var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _react=_interopRequireDefault(require("react"));var _reactNative=require("@testing-library/react-native");var _=require("../..");describe('<Skeleton />',function(){it('should render the circular skeleton',function(){var _render=(0,_reactNative.render)(_react["default"].createElement(_.ThemeProvider,null,_react["default"].createElement(_.Skeleton,{type:"circular",width:64,height:64}))),toJSON=_render.toJSON;expect(toJSON()).toMatchSnapshot();});it('should render the rectangular skeleton',function(){var _render2=(0,_reactNative.render)(_react["default"].createElement(_.ThemeProvider,null,_react["default"].createElement(_.Skeleton,{type:"rectangular",width:400,height:200}))),toJSON=_render2.toJSON;expect(toJSON()).toMatchSnapshot();});it('should render the text skeleton',function(){var _render3=(0,_reactNative.render)(_react["default"].createElement(_.ThemeProvider,null,_react["default"].createElement(_.Skeleton,{type:"text",variant:"body1",width:61,height:32}))),toJSON=_render3.toJSON;expect(toJSON()).toMatchSnapshot();});});
package/esm/AutoComplete/web/AutoComplete.js CHANGED
@@ -1,6 +1,6 @@
1
- var _excluded = ["className", "style", "full", "options", "onChange", "onClean", "onSelect", "value"];
1
+ var _excluded = ["className", "style", "full", "options", "onChange", "onClean", "onSelect", "value", "error", "openSuggestionsAriaLabel", "closeSuggestionsAriaLabel"];
2
2
 
3
- var _templateObject, _templateObject2, _templateObject3, _templateObject4;
3
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
4
4
 
5
5
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
6
6
 
@@ -9,10 +9,11 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
9
9
  function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
10
10
 
11
11
  /* eslint react/no-array-index-key: 0 */
12
- import React, { useState } from 'react';
12
+ import React, { useState, useCallback, useRef, useEffect } from 'react';
13
13
  import Downshift from 'downshift';
14
14
  import { arrayOf, string, func, bool, shape } from 'prop-types';
15
- import styled from 'styled-components';
15
+ import styled, { css } from 'styled-components';
16
+ import { ChevronDown, ChevronUp } from '@gympass/yoga-icons';
16
17
  import Input from '../../Input/web/Input';
17
18
 
18
19
  var escapeRegExp = function escapeRegExp(str) {
@@ -29,15 +30,18 @@ var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLi
29
30
  });
30
31
  var List = styled.ul(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n position: absolute;\n margin: 0;\n\n padding: 0;\n\n z-index: 999;\n\n ", "\n"])), function (_ref3) {
31
32
  var full = _ref3.full,
32
- autocomplete = _ref3.theme.yoga.components.autocomplete;
33
- return "\n top: " + autocomplete.height + "px;\n\n width: " + (full ? '100%' : autocomplete.width + "px") + ";\n max-height: " + autocomplete.height * 6 + "px;\n box-sizing: border-box;\n\n background-color: " + autocomplete.field.backgroundColor + ";\n\n border-width: " + autocomplete.border.width + "px;\n border-style: solid;\n border-color: " + autocomplete.border.color.typed + ";\n\n border-top-width: 0;\n border-bottom-left-radius: " + autocomplete.border.radius + "px;\n border-bottom-right-radius: " + autocomplete.border.radius + "px;\n\n overflow: hidden;\n ";
33
+ error = _ref3.error,
34
+ _ref3$theme$yoga = _ref3.theme.yoga,
35
+ colors = _ref3$theme$yoga.colors,
36
+ autocomplete = _ref3$theme$yoga.components.autocomplete;
37
+ return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n top: ", "px;\n\n width: ", ";\n max-height: ", "px;\n overflow-y: auto;\n box-sizing: border-box;\n\n background-color: ", ";\n\n border-width: ", "px;\n border-style: solid;\n border-color: ", ";\n\n border-color: ", ";\n\n border-top-width: 0;\n border-bottom-left-radius: ", "px;\n border-bottom-right-radius: ", "px;\n "])), autocomplete.height, full ? '100%' : autocomplete.width + "px", autocomplete.height * 6, autocomplete.field.backgroundColor, autocomplete.border.width, autocomplete.border.color.typed, error ? colors.feedback.attention[1] : autocomplete.border.color.typed, autocomplete.border.radius, autocomplete.border.radius);
34
38
  });
35
- var Item = styled.li(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n box-sizing: border-box;\n\n list-style: none;\n\n cursor: pointer;\n\n ", "\n"])), function (_ref4) {
39
+ var Item = styled.li(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n box-sizing: border-box;\n\n list-style: none;\n\n cursor: pointer;\n\n ", "\n"])), function (_ref4) {
36
40
  var selected = _ref4.selected,
37
41
  autocomplete = _ref4.theme.yoga.components.autocomplete;
38
42
  return "\n padding:\n " + autocomplete.list.padding.top + "px\n " + autocomplete.list.padding.right + "px\n " + autocomplete.list.padding.bottom + "px\n " + autocomplete.list.padding.left + "px;\n\n background-color: " + autocomplete.list.backgroundColor["default"] + ";\n outline: none;\n\n font-size: " + autocomplete.list.font.size + "px;\n font-weight: " + autocomplete.list.font.weight["default"] + ";\n line-height: " + autocomplete.list.font.lineHeight + "px;\n\n &:hover {\n background-color: " + autocomplete.list.backgroundColor.hover + ";\n }\n\n " + (selected ? "background-color: " + autocomplete.list.backgroundColor.hover + ";" : '') + "\n ";
39
43
  });
40
- var Match = styled.mark(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n background: transparent;\n color: inherit;\n\n ", "\n"])), function (_ref5) {
44
+ var Match = styled.mark(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n background: transparent;\n color: inherit;\n\n ", "\n"])), function (_ref5) {
41
45
  var autocomplete = _ref5.theme.yoga.components.autocomplete;
42
46
  return "\n font-weight: " + autocomplete.list.font.weight.matched + ";\n ";
43
47
  });
@@ -52,12 +56,40 @@ var AutoComplete = /*#__PURE__*/React.forwardRef(function (_ref6, ref) {
52
56
  _onClean = _ref6.onClean,
53
57
  onSelect = _ref6.onSelect,
54
58
  value = _ref6.value,
59
+ error = _ref6.error,
60
+ openSuggestionsAriaLabel = _ref6.openSuggestionsAriaLabel,
61
+ closeSuggestionsAriaLabel = _ref6.closeSuggestionsAriaLabel,
55
62
  props = _objectWithoutPropertiesLoose(_ref6, _excluded);
56
63
 
57
64
  var _useState = useState(value),
58
65
  userValue = _useState[0],
59
66
  setUserValue = _useState[1];
60
67
 
68
+ var _useState2 = useState(false),
69
+ isSuggestionsOpen = _useState2[0],
70
+ setIsSuggestionsOpen = _useState2[1];
71
+
72
+ var inputRef = useRef();
73
+ var handleOpenSuggestions = useCallback(function () {
74
+ var _inputRef$current;
75
+
76
+ (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
77
+ setIsSuggestionsOpen(true);
78
+ }, []);
79
+ var handleCloseSuggestions = useCallback(function () {
80
+ setIsSuggestionsOpen(false);
81
+ }, []);
82
+ useEffect(function () {
83
+ var handleKeyUp = function handleKeyUp(_ref7) {
84
+ var key = _ref7.key;
85
+ return key === 'Escape' && handleCloseSuggestions();
86
+ };
87
+
88
+ window.addEventListener('keyup', handleKeyUp);
89
+ return function () {
90
+ return window.removeEventListener('keyup', handleKeyUp);
91
+ };
92
+ }, []);
61
93
  return /*#__PURE__*/React.createElement(Downshift, {
62
94
  selectedItem: userValue,
63
95
  onStateChange: function onStateChange(changes) {
@@ -68,48 +100,66 @@ var AutoComplete = /*#__PURE__*/React.forwardRef(function (_ref6, ref) {
68
100
  setUserValue(selectedItem);
69
101
  onSelect(selectedItem);
70
102
  onChange(selectedItem);
103
+ handleCloseSuggestions();
71
104
  } else if (Object.prototype.hasOwnProperty.call(changes, 'inputValue')) {
72
105
  setUserValue(inputValue);
73
106
  onChange(inputValue);
74
107
  }
75
108
  }
76
- }, function (_ref7) {
77
- var getInputProps = _ref7.getInputProps,
78
- getItemProps = _ref7.getItemProps,
79
- clearSelection = _ref7.clearSelection,
80
- getMenuProps = _ref7.getMenuProps,
81
- getRootProps = _ref7.getRootProps,
82
- highlightedIndex = _ref7.highlightedIndex,
83
- isOpen = _ref7.isOpen,
84
- openMenu = _ref7.openMenu,
85
- inputValue = _ref7.inputValue;
86
- var reg = new RegExp("(" + (escapeRegExp(inputValue || '').trim() || null) + ")", 'gi');
109
+ }, function (_ref8) {
110
+ var getInputProps = _ref8.getInputProps,
111
+ getItemProps = _ref8.getItemProps,
112
+ clearSelection = _ref8.clearSelection,
113
+ getMenuProps = _ref8.getMenuProps,
114
+ getRootProps = _ref8.getRootProps,
115
+ highlightedIndex = _ref8.highlightedIndex,
116
+ isOpen = _ref8.isOpen,
117
+ openMenu = _ref8.openMenu,
118
+ inputValue = _ref8.inputValue;
119
+ var reg = new RegExp("(" + escapeRegExp(inputValue || '').trim() + ")", 'gi');
87
120
  var suggestionList = options.filter(function (option) {
88
121
  return option.match(reg);
89
122
  }).sort(function (first, second) {
90
123
  return first.toLowerCase().indexOf(inputValue) < second.toLowerCase().indexOf(inputValue) ? -1 : 1;
91
- }).slice(0, 6);
92
- var hasSuggestion = isOpen && Boolean(suggestionList.length);
124
+ });
125
+
126
+ if (!!inputValue && isOpen) {
127
+ setIsSuggestionsOpen(true);
128
+ }
129
+
93
130
  return /*#__PURE__*/React.createElement(Wrapper, _extends({
94
131
  className: className,
95
132
  style: style,
96
133
  full: full,
97
- isOpen: hasSuggestion
134
+ isOpen: isSuggestionsOpen
98
135
  }, getRootProps(), {
99
- ref: ref
136
+ ref: ref,
137
+ onBlur: handleCloseSuggestions
100
138
  }), /*#__PURE__*/React.createElement(Input, _extends({}, props, {
139
+ error: error,
101
140
  full: full,
102
141
  onClean: function onClean(cleanable) {
103
142
  _onClean(cleanable);
104
143
 
105
144
  clearSelection();
145
+ handleCloseSuggestions();
106
146
  }
107
147
  }, getInputProps({
108
148
  onFocus: function onFocus() {
109
149
  return inputValue.length ? openMenu() : null;
110
150
  }
111
- }))), hasSuggestion && /*#__PURE__*/React.createElement(List, _extends({}, getMenuProps(), {
112
- full: full
151
+ }), {
152
+ rightIcon: isSuggestionsOpen ? /*#__PURE__*/React.createElement(ChevronUp, {
153
+ onClick: handleCloseSuggestions,
154
+ "aria-label": closeSuggestionsAriaLabel
155
+ }) : /*#__PURE__*/React.createElement(ChevronDown, {
156
+ onClick: handleOpenSuggestions,
157
+ "aria-label": openSuggestionsAriaLabel
158
+ }),
159
+ ref: inputRef
160
+ })), isSuggestionsOpen && /*#__PURE__*/React.createElement(List, _extends({}, getMenuProps(), {
161
+ full: full,
162
+ error: !!error
113
163
  }), suggestionList.map(function (option, optionIndex) {
114
164
  return /*#__PURE__*/React.createElement(Item, getItemProps({
115
165
  key: "" + option + optionIndex,
@@ -117,7 +167,7 @@ var AutoComplete = /*#__PURE__*/React.forwardRef(function (_ref6, ref) {
117
167
  item: option,
118
168
  selected: highlightedIndex === optionIndex
119
169
  }), option.split(reg).map(function (part, index) {
120
- return part.match(reg) ? /*#__PURE__*/React.createElement(Match, {
170
+ return !!inputValue && part.match(reg) ? /*#__PURE__*/React.createElement(Match, {
121
171
  key: index
122
172
  }, part) : /*#__PURE__*/React.createElement(React.Fragment, {
123
173
  key: "unmatch-" + index
@@ -140,7 +190,14 @@ AutoComplete.propTypes = {
140
190
 
141
191
  /** a callback to know when the user cleaned the field */
142
192
  onClean: func,
143
- value: string
193
+ value: string,
194
+ error: string,
195
+
196
+ /** an aria label for the open suggestions icon */
197
+ openSuggestionsAriaLabel: string,
198
+
199
+ /** an aria label for the close suggestions icon */
200
+ closeSuggestionsAriaLabel: string
144
201
  };
145
202
  AutoComplete.defaultProps = {
146
203
  className: undefined,
@@ -150,6 +207,9 @@ AutoComplete.defaultProps = {
150
207
  onSelect: function onSelect() {},
151
208
  onChange: function onChange() {},
152
209
  onClean: function onClean() {},
153
- value: undefined
210
+ value: undefined,
211
+ error: undefined,
212
+ openSuggestionsAriaLabel: 'Open suggestions',
213
+ closeSuggestionsAriaLabel: 'Close suggestions'
154
214
  };
155
215
  export default AutoComplete;
package/esm/AutoComplete/web/AutoComplete.test.js CHANGED
@@ -63,7 +63,9 @@ describe('<AutoComplete />', function () {
63
63
  getByRole = _render6.getByRole;
64
64
 
65
65
  fireEvent.focus(getByDisplayValue('secon'));
66
- fireEvent.click(getByRole('button'));
66
+ fireEvent.click(getByRole('button', {
67
+ name: /clear/i
68
+ }));
67
69
  expect(container.querySelector('ul')).toBe(null);
68
70
  });
69
71
  });
@@ -105,7 +107,9 @@ describe('<AutoComplete />', function () {
105
107
  getByRole = _render8.getByRole;
106
108
 
107
109
  fireEvent.focus(getByDisplayValue('New'));
108
- fireEvent.click(getByRole('button'));
110
+ fireEvent.click(getByRole('button', {
111
+ name: /clear/i
112
+ }));
109
113
  expect(onCleanMock).toHaveBeenCalledWith('');
110
114
  expect(onSelectMock).not.toHaveBeenCalled();
111
115
  expect(onChangeMock).toHaveBeenCalledWith('');
package/esm/Datepicker/web/Datepicker.js CHANGED
@@ -14,7 +14,7 @@ import { Booking, BookingFilled } from '@gympass/yoga-icons';
14
14
  import { Text } from '@gympass/yoga';
15
15
  import styled, { css } from 'styled-components';
16
16
  import { bool, oneOf, func, instanceOf, string } from 'prop-types';
17
- import moment from 'moment';
17
+ import { format } from 'date-fns';
18
18
  import { theme } from '../../Theme';
19
19
  import Calendar from './Calendar';
20
20
  var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n position: relative;\n display: inline-block;\n vertical-align: top;\n width: ", ";\n"])), function (props) {
@@ -100,8 +100,8 @@ function Datepicker(_ref8) {
100
100
  var fullWidth = _ref8.fullWidth,
101
101
  type = _ref8.type,
102
102
  placeholder = _ref8.placeholder,
103
- startDate = _ref8.startDate,
104
- endDate = _ref8.endDate,
103
+ initialDate = _ref8.startDate,
104
+ finishDate = _ref8.endDate,
105
105
  onSelectSingle = _ref8.onSelectSingle,
106
106
  disabled = _ref8.disabled,
107
107
  onSelectRange = _ref8.onSelectRange,
@@ -114,12 +114,12 @@ function Datepicker(_ref8) {
114
114
  open = _useState[0],
115
115
  setOpen = _useState[1];
116
116
 
117
- var _useState2 = useState(startDate),
118
- startD = _useState2[0],
117
+ var _useState2 = useState(initialDate),
118
+ startDate = _useState2[0],
119
119
  setStartDate = _useState2[1];
120
120
 
121
- var _useState3 = useState(endDate),
122
- endD = _useState3[0],
121
+ var _useState3 = useState(finishDate),
122
+ endDate = _useState3[0],
123
123
  setEndDate = _useState3[1];
124
124
 
125
125
  var ref = useRef(null);
@@ -139,14 +139,14 @@ function Datepicker(_ref8) {
139
139
 
140
140
  useEffect(function () {
141
141
  if (type === 'single' && onSelectSingle) {
142
- onSelectSingle(startD);
142
+ onSelectSingle(startDate);
143
143
  setOpen(false.toString());
144
144
  } else if (type === 'range' && onSelectRange) {
145
- onSelectRange(startD, endD);
145
+ onSelectRange(startDate, endDate);
146
146
  }
147
147
 
148
- setInputFilled(!!startD);
149
- }, [startD, endD]);
148
+ setInputFilled(!!startDate);
149
+ }, [startDate, endDate]);
150
150
 
151
151
  var onDateSingleSelect = function onDateSingleSelect(startLocal) {
152
152
  setStartDate(startLocal);
@@ -157,10 +157,10 @@ function Datepicker(_ref8) {
157
157
  }, [open]);
158
158
 
159
159
  var onDateRangeSelect = function onDateRangeSelect(selectedDate) {
160
- if (!endD) {
161
- if (!startD) {
160
+ if (!endDate) {
161
+ if (!startDate) {
162
162
  setStartDate(selectedDate);
163
- } else if (selectedDate < startD) {
163
+ } else if (selectedDate < startDate) {
164
164
  setStartDate(selectedDate);
165
165
  setEndDate(undefined);
166
166
  } else setEndDate(selectedDate);
@@ -171,16 +171,16 @@ function Datepicker(_ref8) {
171
171
  };
172
172
 
173
173
  var renderInput = function renderInput() {
174
- if (!startD && !endD) {
174
+ if (!startDate && !endDate) {
175
175
  return /*#__PURE__*/React.createElement(InputPlaceholder, {
176
176
  disabled: disabled
177
177
  }, placeholder != null ? placeholder : "Select Date");
178
178
  }
179
179
 
180
- var dateFormat = 'MMM D, YYYY';
181
- return startD && /*#__PURE__*/React.createElement(Input, {
180
+ var dateFormat = 'MMM d, yyyy';
181
+ return startDate && /*#__PURE__*/React.createElement(Input, {
182
182
  disabled: disabled
183
- }, moment(startD).format(dateFormat), endD && " - " + moment(endD).format(dateFormat));
183
+ }, format(startDate, dateFormat), endDate && " - " + format(endDate, dateFormat));
184
184
  };
185
185
 
186
186
  return /*#__PURE__*/React.createElement(Wrapper, {
@@ -207,8 +207,8 @@ function Datepicker(_ref8) {
207
207
  onBlur: onBlur
208
208
  }, /*#__PURE__*/React.createElement(Calendar, {
209
209
  type: type,
210
- startDate: startD,
211
- endDate: endD,
210
+ startDate: startDate,
211
+ endDate: endDate,
212
212
  onSelectSingle: onDateSingleSelect,
213
213
  onSelectRange: onDateRangeSelect,
214
214
  disablePastDates: disablePastDates,
package/esm/Datepicker/web/Datepicker.test.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import { fireEvent, render, screen } from '@testing-library/react';
3
- import moment from 'moment';
3
+ import { format } from 'date-fns';
4
4
  import { ThemeProvider, Datepicker } from '../..';
5
5
  describe('<Datepicker />', function () {
6
6
  var testDate = new Date(2022, 7, 3);
@@ -22,6 +22,9 @@ describe('<Datepicker />', function () {
22
22
  expect(container).toMatchSnapshot();
23
23
  });
24
24
  it('should match with default selected date single Datepicker', function () {
25
+ var mockedDate = new Date(2022, 7, 3);
26
+ jest.useFakeTimers('modern').setSystemTime(mockedDate);
27
+
25
28
  var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
26
29
  type: "single",
27
30
  startDate: testDate
@@ -31,6 +34,8 @@ describe('<Datepicker />', function () {
31
34
  expect(container).toMatchSnapshot();
32
35
  });
33
36
  it('should match with default selected dates range Datepicker', function () {
37
+ var mockedDate = new Date(2022, 7, 3);
38
+ jest.useFakeTimers('modern').setSystemTime(mockedDate);
34
39
  var endDate = new Date();
35
40
  endDate.setDate(testDate.getDate() + 15);
36
41
 
@@ -90,7 +95,7 @@ describe('<Datepicker />', function () {
90
95
  });
91
96
  });
92
97
  describe('Unit', function () {
93
- var dateFormat = 'MMM D, YYYY';
98
+ var dateFormat = 'MMM d, yyyy';
94
99
  it('should call onSelectSingle function on single Datepicker', function () {
95
100
  var onSelectSingle = jest.fn();
96
101
  render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
@@ -124,15 +129,15 @@ describe('<Datepicker />', function () {
124
129
  type: "single",
125
130
  startDate: currentDate
126
131
  })));
127
- var formattedDate = moment(currentDate).format(dateFormat);
132
+ var formattedDate = format(currentDate, dateFormat);
128
133
  expect(screen.getByText(formattedDate)).toBeVisible();
129
134
  });
130
135
  it('should display default date range on range Datepicker', function () {
131
136
  var currentDate = new Date();
132
137
  var end = new Date();
133
138
  end.setDate(currentDate.getDate() + 15);
134
- var formattedStartDate = moment(currentDate).format(dateFormat);
135
- var formattedEndDate = moment(end).format(dateFormat);
139
+ var formattedStartDate = format(currentDate, dateFormat);
140
+ var formattedEndDate = format(end, dateFormat);
136
141
  render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
137
142
  type: "range",
138
143
  startDate: currentDate,
@@ -184,7 +189,7 @@ describe('<Datepicker />', function () {
184
189
  startDate: testDate,
185
190
  disabled: true
186
191
  })));
187
- var formattedDate = moment(testDate).format(dateFormat);
192
+ var formattedDate = format(testDate, dateFormat);
188
193
  var datepickerInput = screen.getByText(formattedDate);
189
194
  expect(datepickerInput).toHaveAttribute('disabled');
190
195
  expect(datepickerInput.closest('div')).toHaveAttribute('disabled');
package/esm/Input/web/Input.js CHANGED
@@ -1,6 +1,6 @@
1
- var _excluded = ["cleanable", "disabled", "error", "full", "helper", "label", "maxLength", "readOnly", "style", "value", "onChange", "onClean", "hideMaxLength"];
1
+ var _excluded = ["cleanable", "disabled", "error", "full", "helper", "label", "maxLength", "readOnly", "style", "value", "onChange", "onClean", "hideMaxLength", "rightIcon"];
2
2
 
3
- var _templateObject, _templateObject2, _templateObject3;
3
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
4
4
 
5
5
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
6
6
 
@@ -10,7 +10,7 @@ function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.s
10
10
 
11
11
  import React, { useRef } from 'react';
12
12
  import styled, { css } from 'styled-components';
13
- import { func, string, bool, number, shape, oneOfType } from 'prop-types';
13
+ import { func, string, bool, number, shape, oneOfType, node } from 'prop-types';
14
14
  import { Close } from '@gympass/yoga-icons';
15
15
  import { theme } from '../../Theme';
16
16
  import Field from './Field';
@@ -24,11 +24,13 @@ var Control = styled.div(_templateObject || (_templateObject = _taggedTemplateLi
24
24
  });
25
25
  var IconWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref2) {
26
26
  var disabled = _ref2.disabled,
27
+ _ref2$hasIconRight = _ref2.hasIconRight,
28
+ hasIconRight = _ref2$hasIconRight === void 0 ? false : _ref2$hasIconRight,
27
29
  _ref2$theme$yoga = _ref2.theme.yoga,
28
30
  colors = _ref2$theme$yoga.colors,
29
31
  spacing = _ref2$theme$yoga.spacing,
30
32
  input = _ref2$theme$yoga.components.input;
31
- return "\n position: absolute;\n top: 0;\n right: 0;\n\n padding-right: " + spacing.small + "px;\n padding-left: " + spacing.xxsmall + "px;\n\n height: " + input.height + "px;\n cursor: pointer;\n\n outline: none;\n\n &:hover svg, &:focus svg {\n fill: " + input.font.color.focus + ";\n }\n\n svg {\n height: " + input.height + "px;\n width: 20px;\n fill: " + input.font.color["default"] + ";\n }\n\n " + (disabled ? "\n cursor: not-allowed;\n pointer-events: none;\n svg {\n fill: " + colors.text.disabled + ";\n }\n " : '') + "\n ";
33
+ return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n right: ", "px;\n\n padding-right: ", "px;\n padding-left: ", "px;\n\n height: ", "px;\n cursor: pointer;\n\n outline: none;\n\n &:hover svg,\n &:focus svg {\n fill: ", ";\n }\n\n svg {\n height: ", "px;\n width: 20px;\n fill: ", ";\n }\n\n ", "\n "])), hasIconRight ? spacing.large : 0, spacing.small, spacing.xxsmall, input.height, input.font.color.focus, input.height, input.font.color["default"], disabled ? "\n cursor: not-allowed;\n pointer-events: none;\n svg {\n fill: " + colors.text.disabled + ";\n }\n " : '');
32
34
  });
33
35
  var Input = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
34
36
  var cleanable = _ref3.cleanable,
@@ -44,6 +46,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
44
46
  onChange = _ref3.onChange,
45
47
  onClean = _ref3.onClean,
46
48
  hideMaxLength = _ref3.hideMaxLength,
49
+ rightIcon = _ref3.rightIcon,
47
50
  props = _objectWithoutPropertiesLoose(_ref3, _excluded);
48
51
 
49
52
  var inputRef = ref || useRef(null);
@@ -86,8 +89,17 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
86
89
  onKeyDown: cleanField,
87
90
  width: 20,
88
91
  height: 20,
92
+ role: "button",
93
+ hasIconRight: !!rightIcon
94
+ }, /*#__PURE__*/React.createElement(Close, {
95
+ "aria-label": "Clear"
96
+ })), !!rightIcon && !readOnly && /*#__PURE__*/React.createElement(IconWrapper, {
97
+ tabIndex: 0,
98
+ disabled: disabled,
99
+ width: 20,
100
+ height: 20,
89
101
  role: "button"
90
- }, /*#__PURE__*/React.createElement(Close, null))), (helper || maxLength || error) && /*#__PURE__*/React.createElement(Helper, {
102
+ }, rightIcon)), (helper || maxLength || error) && /*#__PURE__*/React.createElement(Helper, {
91
103
  error: error,
92
104
  helper: helper,
93
105
  maxLength: maxLength,
@@ -121,7 +133,8 @@ Input.propTypes = {
121
133
 
122
134
  /** when max length helper is unnecessary to appear */
123
135
  hideMaxLength: bool,
124
- placeholder: string
136
+ placeholder: string,
137
+ rightIcon: node
125
138
  };
126
139
  Input.defaultProps = {
127
140
  className: undefined,
@@ -138,6 +151,7 @@ Input.defaultProps = {
138
151
  onChange: function onChange() {},
139
152
  onClean: function onClean() {},
140
153
  hideMaxLength: false,
141
- placeholder: undefined
154
+ placeholder: undefined,
155
+ rightIcon: undefined
142
156
  };
143
157
  export default Input;
package/esm/Skeleton/native/Skeleton.test.js CHANGED
@@ -26,7 +26,8 @@ describe('<Skeleton />', function () {
26
26
  var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Skeleton, {
27
27
  type: "text",
28
28
  variant: "body1",
29
- width: 61
29
+ width: 61,
30
+ height: 32
30
31
  }))),
31
32
  toJSON = _render3.toJSON;
32
33
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gympass/yoga",
3
- "version": "7.50.4",
3
+ "version": "7.51.1",
4
4
  "description": "Gympass component library",
5
5
  "main": "./cjs",
6
6
  "sideEffects": false,
@@ -33,9 +33,9 @@
33
33
  "@gympass/yoga-tokens": "^3.1.4",
34
34
  "@ptomasroos/react-native-multi-slider": "^1.0.0",
35
35
  "@radix-ui/react-dropdown-menu": "^0.1.6",
36
+ "date-fns": "^2.29.2",
36
37
  "downshift": "^5.0.0",
37
38
  "lodash.get": "^4.4.2",
38
- "moment": "^2.29.4",
39
39
  "prop-types": "^15.7.2",
40
40
  "proxy-polyfill": "^0.3.1",
41
41
  "rc-slider": "^8.7.1",
@@ -52,7 +52,7 @@
52
52
  "react": ">=16",
53
53
  "styled-components": "^4.4.0"
54
54
  },
55
- "gitHead": "2e678bbce4f2668c5fb987872f13a6c6e6149113",
55
+ "gitHead": "ad993d885de0b5bcab2650b2df0282239c233128",
56
56
  "module": "./esm",
57
57
  "private": false,
58
58
  "react-native": "./cjs/index.native.js"