@gympass/yoga 7.79.1 → 7.80.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 (5) hide show
  1. package/cjs/Dropdown/web/Dropdown.js +11 -6
  2. package/cjs/Snackbar/web/Snackbar.js +9 -1
  3. package/esm/Dropdown/web/Dropdown.js +11 -6
  4. package/esm/Snackbar/web/Snackbar.js +10 -1
  5. package/package.json +2 -2
package/cjs/Dropdown/web/Dropdown.js CHANGED
@@ -18,7 +18,7 @@ var _Helper = _interopRequireDefault(require("../../Input/web/Helper"));
18
18
  var _Input = _interopRequireDefault(require("../../Input/web/Input"));
19
19
 
20
20
  var _excluded = ["isOpen", "selected"],
21
- _excluded2 = ["error", "label", "disabled", "full", "options", "onChange"];
21
+ _excluded2 = ["error", "label", "disabled", "full", "options", "onChange", "isMaxHeight"];
22
22
 
23
23
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
24
24
 
@@ -37,7 +37,7 @@ function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.s
37
37
  var Wrapper = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
38
38
  var full = _ref.full,
39
39
  dropdown = _ref.theme.yoga.components.dropdown;
40
- return "\n position: relative;\n display: inline-block;\n vertical-align: top;\n\n width: " + (full ? '100%' : dropdown.width + "px") + ";\n ";
40
+ return "\n position: relative;\n display: inline-block;\n vertical-align: top;\n \n width: " + (full ? '100%' : dropdown.width + "px") + ";\n ";
41
41
  });
42
42
 
43
43
  var labelTransition = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref2) {
@@ -74,8 +74,9 @@ var Button = _styledComponents["default"].button(_templateObject9 || (_templateO
74
74
  });
75
75
 
76
76
  var OptionsList = _styledComponents["default"].ul(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref6) {
77
- var dropdown = _ref6.theme.yoga.components.dropdown;
78
- return "\n position: absolute;\n top: 46px;\n z-index: 1;\n box-sizing: border-box;\n\n width: 100%;\n max-height: " + dropdown.option.height * 3.5 + "px;\n margin: 0;\n padding: 0;\n overflow-y: auto;\n list-style-type: none;\n\n background: " + dropdown.optionsList.backgroundColor + ";\n border-width: " + dropdown.optionsList.border.width + "px;\n border-style: solid;\n border-color: " + dropdown.optionsList.border.color + ";\n border-top: none;\n\n border-radius:\n " + dropdown.option.border.radius.topLeft + "px\n " + dropdown.option.border.radius.topRight + "px\n " + dropdown.option.border.radius.bottomRight + "px\n " + dropdown.option.border.radius.bottomLeft + "px;\n ";
77
+ var isMaxHeight = _ref6.isMaxHeight,
78
+ dropdown = _ref6.theme.yoga.components.dropdown;
79
+ return "\n position: absolute;\n top: 46px;\n z-index: 1;\n box-sizing: border-box;\n\n width: 100%;\n margin: 0;\n padding: 0;\n overflow-y: auto;\n list-style-type: none;\n\n background: " + dropdown.optionsList.backgroundColor + ";\n border-width: " + dropdown.optionsList.border.width + "px;\n border-style: solid;\n border-color: " + dropdown.optionsList.border.color + ";\n border-top: none;\n\n border-radius:\n " + dropdown.option.border.radius.topLeft + "px\n " + dropdown.option.border.radius.topRight + "px\n " + dropdown.option.border.radius.bottomRight + "px\n " + dropdown.option.border.radius.bottomLeft + "px;\n\n " + (isMaxHeight && "max-height: " + dropdown.option.height * 3.5 + "px;") + "\n ";
79
80
  });
80
81
 
81
82
  var Option = _styledComponents["default"].li(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref7) {
@@ -112,6 +113,7 @@ var Dropdown = /*#__PURE__*/_react["default"].forwardRef(function (_ref10, ref)
112
113
  full = _ref10.full,
113
114
  options = _ref10.options,
114
115
  onChange = _ref10.onChange,
116
+ isMaxHeight = _ref10.isMaxHeight,
115
117
  rest = _objectWithoutPropertiesLoose(_ref10, _excluded2);
116
118
 
117
119
  var inputRef = ref || _react["default"].useRef(null);
@@ -174,6 +176,7 @@ var Dropdown = /*#__PURE__*/_react["default"].forwardRef(function (_ref10, ref)
174
176
  selected: selectedItem !== null,
175
177
  disabled: disabled
176
178
  }))), isOpen && /*#__PURE__*/_react["default"].createElement(OptionsList, _extends({
179
+ isMaxHeight: isMaxHeight,
177
180
  selected: selectedItem !== null
178
181
  }, getMenuProps()), options.map(function (item, index) {
179
182
  return /*#__PURE__*/_react["default"].createElement(Option, getItemProps({
@@ -200,14 +203,16 @@ Dropdown.propTypes = {
200
203
  value: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.number]),
201
204
  selected: _propTypes.bool
202
205
  })).isRequired,
203
- onChange: _propTypes.func
206
+ onChange: _propTypes.func,
207
+ isMaxHeight: _propTypes.bool
204
208
  };
205
209
  Dropdown.defaultProps = {
206
210
  label: '',
207
211
  error: undefined,
208
212
  full: false,
209
213
  disabled: false,
210
- onChange: function onChange() {}
214
+ onChange: function onChange() {},
215
+ isMaxHeight: true
211
216
  };
212
217
  var _default = Dropdown;
213
218
  exports["default"] = _default;
package/cjs/Snackbar/web/Snackbar.js CHANGED
@@ -39,6 +39,14 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
39
39
 
40
40
  function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
41
41
 
42
+ function getMaxZIndex() {
43
+ return Math.max.apply(Math, Array.from(document.querySelectorAll('body *'), function (el) {
44
+ return parseFloat(window.getComputedStyle(el).zIndex);
45
+ }).filter(function (zIndex) {
46
+ return !Number.isNaN(zIndex);
47
+ }).concat([0]));
48
+ }
49
+
42
50
  var IconButtonWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n\n cursor: pointer;\n\n &:hover {\n svg {\n fill: ", ";\n }\n }\n"])), _Theme.theme.colors.text.secondary);
43
51
 
44
52
  var ActionsWrapper = _styledComponents["default"].aside(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n\n svg {\n margin-left: ", "px;\n margin-right: ", ";\n }\n"])), _Theme.theme.spacing.small, _Theme.theme.spacing.zero);
@@ -46,7 +54,7 @@ var ActionsWrapper = _styledComponents["default"].aside(_templateObject2 || (_te
46
54
  var StyledSnackbar = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n"])), function (_ref) {
47
55
  var variant = _ref.variant,
48
56
  snackbar = _ref.theme.yoga.components.snackbar;
49
- return "\n display: flex;\n align-items: center;\n justify-content: space-between;\n box-sizing: border-box;\n \n position: fixed;\n bottom: " + snackbar.position.mobile.bottom + "px;\n right: " + snackbar.position.mobile.right + "px;\n left: " + snackbar.position.mobile.left + "px;\n \n min-width: " + snackbar.minWidth.mobile + "px;\n max-width: " + snackbar.maxWidth["default"] + "px;\n \n min-height: " + snackbar.height.min + "px;\n max-height: " + snackbar.height.max + "px;\n \n padding: " + snackbar.padding["default"] + "px;\n \n border-radius: " + snackbar.border.radius + "px;\n \n box-shadow: " + snackbar.shadow["default"] + ";\n\n background-color: " + snackbar.variant.color[variant] + ";\n\n z-index: 100;\n ";
57
+ return "\n display: flex;\n align-items: center;\n justify-content: space-between;\n box-sizing: border-box;\n \n position: fixed;\n bottom: " + snackbar.position.mobile.bottom + "px;\n right: " + snackbar.position.mobile.right + "px;\n left: " + snackbar.position.mobile.left + "px;\n \n min-width: " + snackbar.minWidth.mobile + "px;\n max-width: " + snackbar.maxWidth["default"] + "px;\n \n min-height: " + snackbar.height.min + "px;\n max-height: " + snackbar.height.max + "px;\n \n padding: " + snackbar.padding["default"] + "px;\n \n border-radius: " + snackbar.border.radius + "px;\n \n box-shadow: " + snackbar.shadow["default"] + ";\n\n background-color: " + snackbar.variant.color[variant] + ";\n\n z-index: " + (getMaxZIndex() + 1) + ";\n ";
50
58
  }, _yogaHelpers.media.md(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n left: auto;\n bottom: ", "px;\n right: ", "px;\n\n min-width: ", "px;\n "])), _Theme.theme.components.snackbar.position.desktop.bottom, _Theme.theme.components.snackbar.position.desktop.right, _Theme.theme.components.snackbar.minWidth.desktop));
51
59
 
52
60
  var fadeIn = (0, _styledComponents.keyframes)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n"])));
package/esm/Dropdown/web/Dropdown.js CHANGED
@@ -1,5 +1,5 @@
1
1
  var _excluded = ["isOpen", "selected"],
2
- _excluded2 = ["error", "label", "disabled", "full", "options", "onChange"];
2
+ _excluded2 = ["error", "label", "disabled", "full", "options", "onChange", "isMaxHeight"];
3
3
 
4
4
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
5
5
 
@@ -19,7 +19,7 @@ import Input from '../../Input/web/Input';
19
19
  var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
20
20
  var full = _ref.full,
21
21
  dropdown = _ref.theme.yoga.components.dropdown;
22
- return "\n position: relative;\n display: inline-block;\n vertical-align: top;\n\n width: " + (full ? '100%' : dropdown.width + "px") + ";\n ";
22
+ return "\n position: relative;\n display: inline-block;\n vertical-align: top;\n \n width: " + (full ? '100%' : dropdown.width + "px") + ";\n ";
23
23
  });
24
24
  var labelTransition = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref2) {
25
25
  var _ref2$theme$yoga = _ref2.theme.yoga,
@@ -51,8 +51,9 @@ var Button = styled.button(_templateObject9 || (_templateObject9 = _taggedTempla
51
51
  return "\n display: flex;\n align-content: center;\n align-items: center;\n justify-content: flex-end;\n position: absolute;\n top: 0;\n left: 0;\n\n width: 100%;\n padding-right: " + dropdown.button.padding.right + "px;\n padding-top: " + dropdown.button.padding.top + "px;\n padding-bottom: " + dropdown.button.padding.bottom + "px;\n\n border: none;\n outline: none;\n background-color: transparent;\n cursor: " + (disabled ? 'not-allowed' : 'pointer') + ";\n ";
52
52
  });
53
53
  var OptionsList = styled.ul(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref6) {
54
- var dropdown = _ref6.theme.yoga.components.dropdown;
55
- return "\n position: absolute;\n top: 46px;\n z-index: 1;\n box-sizing: border-box;\n\n width: 100%;\n max-height: " + dropdown.option.height * 3.5 + "px;\n margin: 0;\n padding: 0;\n overflow-y: auto;\n list-style-type: none;\n\n background: " + dropdown.optionsList.backgroundColor + ";\n border-width: " + dropdown.optionsList.border.width + "px;\n border-style: solid;\n border-color: " + dropdown.optionsList.border.color + ";\n border-top: none;\n\n border-radius:\n " + dropdown.option.border.radius.topLeft + "px\n " + dropdown.option.border.radius.topRight + "px\n " + dropdown.option.border.radius.bottomRight + "px\n " + dropdown.option.border.radius.bottomLeft + "px;\n ";
54
+ var isMaxHeight = _ref6.isMaxHeight,
55
+ dropdown = _ref6.theme.yoga.components.dropdown;
56
+ return "\n position: absolute;\n top: 46px;\n z-index: 1;\n box-sizing: border-box;\n\n width: 100%;\n margin: 0;\n padding: 0;\n overflow-y: auto;\n list-style-type: none;\n\n background: " + dropdown.optionsList.backgroundColor + ";\n border-width: " + dropdown.optionsList.border.width + "px;\n border-style: solid;\n border-color: " + dropdown.optionsList.border.color + ";\n border-top: none;\n\n border-radius:\n " + dropdown.option.border.radius.topLeft + "px\n " + dropdown.option.border.radius.topRight + "px\n " + dropdown.option.border.radius.bottomRight + "px\n " + dropdown.option.border.radius.bottomLeft + "px;\n\n " + (isMaxHeight && "max-height: " + dropdown.option.height * 3.5 + "px;") + "\n ";
56
57
  });
57
58
  var Option = styled.li(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref7) {
58
59
  var isSelected = _ref7.isSelected,
@@ -87,6 +88,7 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref10, ref) {
87
88
  full = _ref10.full,
88
89
  options = _ref10.options,
89
90
  onChange = _ref10.onChange,
91
+ isMaxHeight = _ref10.isMaxHeight,
90
92
  rest = _objectWithoutPropertiesLoose(_ref10, _excluded2);
91
93
 
92
94
  var inputRef = ref || React.useRef(null);
@@ -148,6 +150,7 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref10, ref) {
148
150
  selected: selectedItem !== null,
149
151
  disabled: disabled
150
152
  }))), isOpen && /*#__PURE__*/React.createElement(OptionsList, _extends({
153
+ isMaxHeight: isMaxHeight,
151
154
  selected: selectedItem !== null
152
155
  }, getMenuProps()), options.map(function (item, index) {
153
156
  return /*#__PURE__*/React.createElement(Option, getItemProps({
@@ -173,13 +176,15 @@ Dropdown.propTypes = {
173
176
  value: oneOfType([string, number]),
174
177
  selected: bool
175
178
  })).isRequired,
176
- onChange: func
179
+ onChange: func,
180
+ isMaxHeight: bool
177
181
  };
178
182
  Dropdown.defaultProps = {
179
183
  label: '',
180
184
  error: undefined,
181
185
  full: false,
182
186
  disabled: false,
183
- onChange: function onChange() {}
187
+ onChange: function onChange() {},
188
+ isMaxHeight: true
184
189
  };
185
190
  export default Dropdown;
package/esm/Snackbar/web/Snackbar.js CHANGED
@@ -18,12 +18,21 @@ import Box from '../../Box';
18
18
  import Button from '../../Button';
19
19
  import Icon from '../../Icon';
20
20
  import Text from '../../Text';
21
+
22
+ function getMaxZIndex() {
23
+ return Math.max.apply(Math, Array.from(document.querySelectorAll('body *'), function (el) {
24
+ return parseFloat(window.getComputedStyle(el).zIndex);
25
+ }).filter(function (zIndex) {
26
+ return !Number.isNaN(zIndex);
27
+ }).concat([0]));
28
+ }
29
+
21
30
  var IconButtonWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n\n cursor: pointer;\n\n &:hover {\n svg {\n fill: ", ";\n }\n }\n"])), theme.colors.text.secondary);
22
31
  var ActionsWrapper = styled.aside(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n\n svg {\n margin-left: ", "px;\n margin-right: ", ";\n }\n"])), theme.spacing.small, theme.spacing.zero);
23
32
  var StyledSnackbar = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n"])), function (_ref) {
24
33
  var variant = _ref.variant,
25
34
  snackbar = _ref.theme.yoga.components.snackbar;
26
- return "\n display: flex;\n align-items: center;\n justify-content: space-between;\n box-sizing: border-box;\n \n position: fixed;\n bottom: " + snackbar.position.mobile.bottom + "px;\n right: " + snackbar.position.mobile.right + "px;\n left: " + snackbar.position.mobile.left + "px;\n \n min-width: " + snackbar.minWidth.mobile + "px;\n max-width: " + snackbar.maxWidth["default"] + "px;\n \n min-height: " + snackbar.height.min + "px;\n max-height: " + snackbar.height.max + "px;\n \n padding: " + snackbar.padding["default"] + "px;\n \n border-radius: " + snackbar.border.radius + "px;\n \n box-shadow: " + snackbar.shadow["default"] + ";\n\n background-color: " + snackbar.variant.color[variant] + ";\n\n z-index: 100;\n ";
35
+ return "\n display: flex;\n align-items: center;\n justify-content: space-between;\n box-sizing: border-box;\n \n position: fixed;\n bottom: " + snackbar.position.mobile.bottom + "px;\n right: " + snackbar.position.mobile.right + "px;\n left: " + snackbar.position.mobile.left + "px;\n \n min-width: " + snackbar.minWidth.mobile + "px;\n max-width: " + snackbar.maxWidth["default"] + "px;\n \n min-height: " + snackbar.height.min + "px;\n max-height: " + snackbar.height.max + "px;\n \n padding: " + snackbar.padding["default"] + "px;\n \n border-radius: " + snackbar.border.radius + "px;\n \n box-shadow: " + snackbar.shadow["default"] + ";\n\n background-color: " + snackbar.variant.color[variant] + ";\n\n z-index: " + (getMaxZIndex() + 1) + ";\n ";
27
36
  }, media.md(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n left: auto;\n bottom: ", "px;\n right: ", "px;\n\n min-width: ", "px;\n "])), theme.components.snackbar.position.desktop.bottom, theme.components.snackbar.position.desktop.right, theme.components.snackbar.minWidth.desktop));
28
37
  var fadeIn = keyframes(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n"])));
29
38
  var AnimatedSnackbar = styled(StyledSnackbar)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n animation: ", " 0.2s ease-in-out;\n"])), fadeIn);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gympass/yoga",
3
- "version": "7.79.1",
3
+ "version": "7.80.0",
4
4
  "description": "Gympass component library",
5
5
  "main": "./cjs",
6
6
  "sideEffects": false,
@@ -55,7 +55,7 @@
55
55
  "react-native": "0.72.3",
56
56
  "styled-components": "^4.4.0"
57
57
  },
58
- "gitHead": "bc63a12251de39e078526250b7971ad3fc1548a0",
58
+ "gitHead": "b09f7aecfc9457a0f2e2ce269cd07c2d6d1c175f",
59
59
  "module": "./esm",
60
60
  "types": "./typings/index.d.ts",
61
61
  "private": false,