@gympass/yoga 7.50.5 → 7.51.0

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 (7) hide show
  1. package/cjs/AutoComplete/web/AutoComplete.js +88 -27
  2. package/cjs/AutoComplete/web/AutoComplete.test.js +6 -2
  3. package/cjs/Input/web/Input.js +20 -6
  4. package/esm/AutoComplete/web/AutoComplete.js +88 -28
  5. package/esm/AutoComplete/web/AutoComplete.test.js +6 -2
  6. package/esm/Input/web/Input.js +21 -7
  7. package/package.json +2 -2
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/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/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/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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gympass/yoga",
3
- "version": "7.50.5",
3
+ "version": "7.51.0",
4
4
  "description": "Gympass component library",
5
5
  "main": "./cjs",
6
6
  "sideEffects": false,
@@ -52,7 +52,7 @@
52
52
  "react": ">=16",
53
53
  "styled-components": "^4.4.0"
54
54
  },
55
- "gitHead": "c77af18e773d93cde583691e22763f349b97fab7",
55
+ "gitHead": "30d96b249244d7139ac23501159fdcd60cab96b9",
56
56
  "module": "./esm",
57
57
  "private": false,
58
58
  "react-native": "./cjs/index.native.js"