@gympass/yoga 7.76.0 → 7.76.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 (5) hide show
  1. package/cjs/Popover/web/Popover.js +32 -16
  2. package/cjs/Popover/web/styles.js +15 -5
  3. package/esm/Popover/web/Popover.js +33 -17
  4. package/esm/Popover/web/styles.js +10 -3
  5. package/package.json +2 -2
package/cjs/Popover/web/Popover.js CHANGED
@@ -11,12 +11,14 @@ var _yoga = require("@gympass/yoga");
11
11
 
12
12
  var _styles = require("./styles");
13
13
 
14
- var _excluded = ["children", "title", "description", "position", "width", "height"];
14
+ var _excluded = ["children", "title", "description", "position", "width", "height", "zIndex", "a11yId"];
15
15
 
16
16
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
17
17
 
18
18
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
19
19
 
20
+ 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); }
21
+
20
22
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
21
23
 
22
24
  function Popover(_ref) {
@@ -26,48 +28,59 @@ function Popover(_ref) {
26
28
  position = _ref.position,
27
29
  width = _ref.width,
28
30
  height = _ref.height,
31
+ zIndex = _ref.zIndex,
32
+ a11yId = _ref.a11yId,
29
33
  props = _objectWithoutPropertiesLoose(_ref, _excluded);
30
34
 
31
35
  var _useState = (0, _react.useState)(false),
32
36
  isPopoverOpen = _useState[0],
33
37
  setIsPopoverOpen = _useState[1];
34
38
 
35
- function handleShowPopover() {
39
+ var handleShowPopover = function handleShowPopover() {
36
40
  setIsPopoverOpen(true);
37
- }
41
+ };
38
42
 
39
- function handleHidePopover() {
43
+ var handleHidePopover = function handleHidePopover() {
40
44
  setIsPopoverOpen(false);
41
- }
45
+ };
42
46
 
43
- return /*#__PURE__*/_react["default"].createElement(_styles.Wrapper, props, isPopoverOpen && /*#__PURE__*/_react["default"].createElement(_styles.PopoverContainer, {
47
+ return /*#__PURE__*/_react["default"].createElement(_styles.Wrapper, props, isPopoverOpen && /*#__PURE__*/_react["default"].createElement(_styles.PopoverContainer, _extends({}, a11yId && {
48
+ id: a11yId
49
+ }, {
44
50
  position: position,
45
51
  width: width,
46
52
  height: height,
47
- role: "tooltip"
48
- }, !!title && /*#__PURE__*/_react["default"].createElement(_yoga.Text.Small, {
53
+ role: "tooltip",
54
+ $zIndex: zIndex
55
+ }), !!title && /*#__PURE__*/_react["default"].createElement(_yoga.Text.Small, {
49
56
  mb: "xxxsmall",
50
57
  fw: "medium",
51
58
  color: "white"
52
59
  }, title), /*#__PURE__*/_react["default"].createElement(_yoga.Text.Small, {
53
60
  m: "zero",
54
61
  color: "white"
55
- }, description)), /*#__PURE__*/_react["default"].createElement("button", {
56
- type: "button",
57
- style: {
58
- all: 'unset'
59
- },
62
+ }, description)), /*#__PURE__*/_react["default"].createElement(_styles.PopoverButton, _extends({}, a11yId && {
63
+ 'aria-describedby': a11yId
64
+ }, {
60
65
  onMouseEnter: handleShowPopover,
61
66
  onMouseLeave: handleHidePopover,
62
67
  onTouchStart: handleShowPopover,
63
68
  onTouchEnd: handleHidePopover,
64
69
  onClick: function onClick(event) {
65
70
  return event.preventDefault();
71
+ },
72
+ onKeyDown: function onKeyDown(event) {
73
+ if (event.key === 'Enter') {
74
+ setIsPopoverOpen(function (current) {
75
+ return !current;
76
+ });
77
+ }
66
78
  }
67
- }, children));
79
+ }), children));
68
80
  }
69
81
 
70
82
  Popover.propTypes = {
83
+ a11yId: _propTypes.string,
71
84
  children: _propTypes.node.isRequired,
72
85
  title: _propTypes.string,
73
86
  description: _propTypes.string.isRequired,
@@ -75,13 +88,16 @@ Popover.propTypes = {
75
88
  /** Position of the popover relative to the children. Accepted values: bottom-[start|center|end], left-[start|center|end], top-[start|center|end] or right-[start|center|end] */
76
89
  position: (0, _propTypes.oneOf)(['bottom-start', 'bottom-center', 'bottom-end', 'left-start', 'left-center', 'left-end', 'top-start', 'top-center', 'top-end', 'right-start', 'right-center', 'right-end']),
77
90
  width: _propTypes.number,
78
- height: _propTypes.number
91
+ height: _propTypes.number,
92
+ zIndex: _propTypes.number
79
93
  };
80
94
  Popover.defaultProps = {
95
+ a11yId: undefined,
81
96
  title: undefined,
82
97
  position: 'bottom-center',
83
98
  width: 265,
84
- height: 116
99
+ height: 200,
100
+ zIndex: 1
85
101
  };
86
102
  var _default = Popover;
87
103
  exports["default"] = _default;
package/cjs/Popover/web/styles.js CHANGED
@@ -1,11 +1,11 @@
1
1
  "use strict";
2
2
 
3
3
  exports.__esModule = true;
4
- exports.Wrapper = exports.PopoverContainer = void 0;
4
+ exports.Wrapper = exports.PopoverContainer = exports.PopoverButton = void 0;
5
5
 
6
6
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
7
7
 
8
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
8
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
9
9
 
10
10
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
11
11
 
@@ -62,8 +62,18 @@ var PopoverContainer = _styledComponents["default"].div(_templateObject14 || (_t
62
62
  radii = _ref$theme$yoga.radii,
63
63
  position = _ref.position,
64
64
  width = _ref.width,
65
- height = _ref.height;
66
- return (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n position: absolute;\n\n width: max-content;\n max-width: ", "px;\n height: max-content;\n max-height: ", "px;\n\n border-radius: ", "px;\n background-color: ", ";\n padding: ", "px;\n\n ", ";\n "])), width, height, radii.small, colors.stamina, spacing.small, popoverContainerPositionModifier[position]);
65
+ height = _ref.height,
66
+ $zIndex = _ref.$zIndex;
67
+ return (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n position: absolute;\n overflow: auto;\n width: max-content;\n max-width: ", "px;\n height: max-content;\n max-height: ", "px;\n\n border-radius: ", "px;\n background-color: ", ";\n padding: ", "px;\n z-index: ", ";\n\n ", ";\n "])), width, height, radii.small, colors.stamina, spacing.small, $zIndex, popoverContainerPositionModifier[position]);
67
68
  });
68
69
 
69
- exports.PopoverContainer = PopoverContainer;
70
+ exports.PopoverContainer = PopoverContainer;
71
+
72
+ var PopoverButton = _styledComponents["default"].button.attrs({
73
+ type: 'button'
74
+ })(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n all: unset;\n\n ", "\n"])), function (_ref2) {
75
+ var elevations = _ref2.theme.yoga.elevations;
76
+ return (0, _styledComponents.css)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n @media (hover: hover) and (pointer: fine) {\n &:focus {\n box-shadow: ", ";\n transition: box-shadow ease 0.5s;\n }\n }\n "])), elevations.small);
77
+ });
78
+
79
+ exports.PopoverButton = PopoverButton;
package/esm/Popover/web/Popover.js CHANGED
@@ -1,11 +1,13 @@
1
- var _excluded = ["children", "title", "description", "position", "width", "height"];
1
+ var _excluded = ["children", "title", "description", "position", "width", "height", "zIndex", "a11yId"];
2
+
3
+ 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); }
2
4
 
3
5
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
4
6
 
5
7
  import React, { useState } from 'react';
6
8
  import { node, number, oneOf, string } from 'prop-types';
7
9
  import { Text } from '@gympass/yoga';
8
- import { PopoverContainer, Wrapper } from './styles';
10
+ import { PopoverContainer, PopoverButton, Wrapper } from './styles';
9
11
 
10
12
  function Popover(_ref) {
11
13
  var children = _ref.children,
@@ -14,48 +16,59 @@ function Popover(_ref) {
14
16
  position = _ref.position,
15
17
  width = _ref.width,
16
18
  height = _ref.height,
19
+ zIndex = _ref.zIndex,
20
+ a11yId = _ref.a11yId,
17
21
  props = _objectWithoutPropertiesLoose(_ref, _excluded);
18
22
 
19
23
  var _useState = useState(false),
20
24
  isPopoverOpen = _useState[0],
21
25
  setIsPopoverOpen = _useState[1];
22
26
 
23
- function handleShowPopover() {
27
+ var handleShowPopover = function handleShowPopover() {
24
28
  setIsPopoverOpen(true);
25
- }
29
+ };
26
30
 
27
- function handleHidePopover() {
31
+ var handleHidePopover = function handleHidePopover() {
28
32
  setIsPopoverOpen(false);
29
- }
33
+ };
30
34
 
31
- return /*#__PURE__*/React.createElement(Wrapper, props, isPopoverOpen && /*#__PURE__*/React.createElement(PopoverContainer, {
35
+ return /*#__PURE__*/React.createElement(Wrapper, props, isPopoverOpen && /*#__PURE__*/React.createElement(PopoverContainer, _extends({}, a11yId && {
36
+ id: a11yId
37
+ }, {
32
38
  position: position,
33
39
  width: width,
34
40
  height: height,
35
- role: "tooltip"
36
- }, !!title && /*#__PURE__*/React.createElement(Text.Small, {
41
+ role: "tooltip",
42
+ $zIndex: zIndex
43
+ }), !!title && /*#__PURE__*/React.createElement(Text.Small, {
37
44
  mb: "xxxsmall",
38
45
  fw: "medium",
39
46
  color: "white"
40
47
  }, title), /*#__PURE__*/React.createElement(Text.Small, {
41
48
  m: "zero",
42
49
  color: "white"
43
- }, description)), /*#__PURE__*/React.createElement("button", {
44
- type: "button",
45
- style: {
46
- all: 'unset'
47
- },
50
+ }, description)), /*#__PURE__*/React.createElement(PopoverButton, _extends({}, a11yId && {
51
+ 'aria-describedby': a11yId
52
+ }, {
48
53
  onMouseEnter: handleShowPopover,
49
54
  onMouseLeave: handleHidePopover,
50
55
  onTouchStart: handleShowPopover,
51
56
  onTouchEnd: handleHidePopover,
52
57
  onClick: function onClick(event) {
53
58
  return event.preventDefault();
59
+ },
60
+ onKeyDown: function onKeyDown(event) {
61
+ if (event.key === 'Enter') {
62
+ setIsPopoverOpen(function (current) {
63
+ return !current;
64
+ });
65
+ }
54
66
  }
55
- }, children));
67
+ }), children));
56
68
  }
57
69
 
58
70
  Popover.propTypes = {
71
+ a11yId: string,
59
72
  children: node.isRequired,
60
73
  title: string,
61
74
  description: string.isRequired,
@@ -63,12 +76,15 @@ Popover.propTypes = {
63
76
  /** Position of the popover relative to the children. Accepted values: bottom-[start|center|end], left-[start|center|end], top-[start|center|end] or right-[start|center|end] */
64
77
  position: oneOf(['bottom-start', 'bottom-center', 'bottom-end', 'left-start', 'left-center', 'left-end', 'top-start', 'top-center', 'top-end', 'right-start', 'right-center', 'right-end']),
65
78
  width: number,
66
- height: number
79
+ height: number,
80
+ zIndex: number
67
81
  };
68
82
  Popover.defaultProps = {
83
+ a11yId: undefined,
69
84
  title: undefined,
70
85
  position: 'bottom-center',
71
86
  width: 265,
72
- height: 116
87
+ height: 200,
88
+ zIndex: 1
73
89
  };
74
90
  export default Popover;
package/esm/Popover/web/styles.js CHANGED
@@ -1,4 +1,4 @@
1
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
1
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
2
2
 
3
3
  function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
4
4
 
@@ -49,6 +49,13 @@ export var PopoverContainer = styled.div(_templateObject14 || (_templateObject14
49
49
  radii = _ref$theme$yoga.radii,
50
50
  position = _ref.position,
51
51
  width = _ref.width,
52
- height = _ref.height;
53
- return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n position: absolute;\n\n width: max-content;\n max-width: ", "px;\n height: max-content;\n max-height: ", "px;\n\n border-radius: ", "px;\n background-color: ", ";\n padding: ", "px;\n\n ", ";\n "])), width, height, radii.small, colors.stamina, spacing.small, popoverContainerPositionModifier[position]);
52
+ height = _ref.height,
53
+ $zIndex = _ref.$zIndex;
54
+ return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n position: absolute;\n overflow: auto;\n width: max-content;\n max-width: ", "px;\n height: max-content;\n max-height: ", "px;\n\n border-radius: ", "px;\n background-color: ", ";\n padding: ", "px;\n z-index: ", ";\n\n ", ";\n "])), width, height, radii.small, colors.stamina, spacing.small, $zIndex, popoverContainerPositionModifier[position]);
55
+ });
56
+ export var PopoverButton = styled.button.attrs({
57
+ type: 'button'
58
+ })(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n all: unset;\n\n ", "\n"])), function (_ref2) {
59
+ var elevations = _ref2.theme.yoga.elevations;
60
+ return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n @media (hover: hover) and (pointer: fine) {\n &:focus {\n box-shadow: ", ";\n transition: box-shadow ease 0.5s;\n }\n }\n "])), elevations.small);
54
61
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gympass/yoga",
3
- "version": "7.76.0",
3
+ "version": "7.76.1",
4
4
  "description": "Gympass component library",
5
5
  "main": "./cjs",
6
6
  "sideEffects": false,
@@ -53,7 +53,7 @@
53
53
  "react": ">=16",
54
54
  "styled-components": "^4.4.0"
55
55
  },
56
- "gitHead": "c162c2c074dac2da331bbc5a02da61733dd14d44",
56
+ "gitHead": "c5d3cd28c67e1bf206d267e6b736a99ac69868fd",
57
57
  "module": "./esm",
58
58
  "private": false,
59
59
  "react-native": "./cjs/index.native.js"