@gympass/yoga 7.75.7 → 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.
- package/cjs/Accordion/web/Accordion.js +9 -3
- package/cjs/Accordion/web/Content.js +1 -0
- package/cjs/Accordion/web/Summary.js +22 -0
- package/cjs/Accordion/web/index.js +3 -0
- package/cjs/Popover/web/Popover.js +32 -16
- package/cjs/Popover/web/styles.js +15 -5
- package/esm/Accordion/web/Accordion.js +9 -3
- package/esm/Accordion/web/Accordion.test.js +9 -0
- package/esm/Accordion/web/Content.js +1 -0
- package/esm/Accordion/web/Summary.js +13 -0
- package/esm/Accordion/web/index.js +2 -0
- package/esm/Popover/web/Popover.js +33 -17
- package/esm/Popover/web/styles.js +10 -3
- package/package.json +2 -2
|
@@ -115,6 +115,11 @@ var Accordion = function Accordion(_ref15) {
|
|
|
115
115
|
open = _useState[0],
|
|
116
116
|
setOpen = _useState[1];
|
|
117
117
|
|
|
118
|
+
var _React$Children$toArr = _react["default"].Children.toArray(children),
|
|
119
|
+
summary = _React$Children$toArr[0],
|
|
120
|
+
contentChildren = _React$Children$toArr.slice(1);
|
|
121
|
+
|
|
122
|
+
var hasSummary = summary.type.displayName === 'Accordion.Summary';
|
|
118
123
|
return /*#__PURE__*/_react["default"].createElement(AccordionWrapper, _extends({
|
|
119
124
|
disabled: disabled
|
|
120
125
|
}, props), /*#__PURE__*/_react["default"].createElement(Header, {
|
|
@@ -126,7 +131,7 @@ var Accordion = function Accordion(_ref15) {
|
|
|
126
131
|
},
|
|
127
132
|
small: small,
|
|
128
133
|
hasHorizontalPadding: hasHorizontalPadding
|
|
129
|
-
}, /*#__PURE__*/_react["default"].createElement(Title, {
|
|
134
|
+
}, hasSummary ? summary : /*#__PURE__*/_react["default"].createElement(Title, {
|
|
130
135
|
subtitle: subtitle
|
|
131
136
|
}, small ? /*#__PURE__*/_react["default"].createElement(_yoga.Text.Small, {
|
|
132
137
|
color: disabled ? 'deep' : undefined
|
|
@@ -145,11 +150,11 @@ var Accordion = function Accordion(_ref15) {
|
|
|
145
150
|
isOpen: open,
|
|
146
151
|
small: small,
|
|
147
152
|
hasHorizontalPadding: hasHorizontalPadding
|
|
148
|
-
}, children), /*#__PURE__*/_react["default"].createElement(_yoga.Divider, null));
|
|
153
|
+
}, hasSummary ? contentChildren : children), /*#__PURE__*/_react["default"].createElement(_yoga.Divider, null));
|
|
149
154
|
};
|
|
150
155
|
|
|
151
156
|
Accordion.propTypes = {
|
|
152
|
-
title: _propTypes.string
|
|
157
|
+
title: _propTypes.string,
|
|
153
158
|
subtitle: _propTypes.string,
|
|
154
159
|
children: _propTypes.node.isRequired,
|
|
155
160
|
disabled: _propTypes.bool,
|
|
@@ -158,6 +163,7 @@ Accordion.propTypes = {
|
|
|
158
163
|
hasHorizontalPadding: _propTypes.bool
|
|
159
164
|
};
|
|
160
165
|
Accordion.defaultProps = {
|
|
166
|
+
title: undefined,
|
|
161
167
|
subtitle: undefined,
|
|
162
168
|
disabled: false,
|
|
163
169
|
expanded: false,
|
|
@@ -16,5 +16,6 @@ var Content = _styledComponents["default"].div(_templateObject || (_templateObje
|
|
|
16
16
|
return "\n padding: 0 " + accordion.padding.standard + "px " + accordion.padding.standard + "px;\n ";
|
|
17
17
|
});
|
|
18
18
|
|
|
19
|
+
Content.displayName = 'Accordion.Content';
|
|
19
20
|
var _default = Content;
|
|
20
21
|
exports["default"] = _default;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports["default"] = void 0;
|
|
5
|
+
|
|
6
|
+
var _react = _interopRequireDefault(require("react"));
|
|
7
|
+
|
|
8
|
+
var _Box = _interopRequireDefault(require("../../Box"));
|
|
9
|
+
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
11
|
+
|
|
12
|
+
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); }
|
|
13
|
+
|
|
14
|
+
function Summary(props) {
|
|
15
|
+
return /*#__PURE__*/_react["default"].createElement(_Box["default"], _extends({
|
|
16
|
+
width: "100%"
|
|
17
|
+
}, props));
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
Summary.displayName = 'Accordion.Summary';
|
|
21
|
+
var _default = Summary;
|
|
22
|
+
exports["default"] = _default;
|
|
@@ -5,6 +5,8 @@ exports["default"] = void 0;
|
|
|
5
5
|
|
|
6
6
|
var _Accordion = _interopRequireDefault(require("./Accordion"));
|
|
7
7
|
|
|
8
|
+
var _Summary = _interopRequireDefault(require("./Summary"));
|
|
9
|
+
|
|
8
10
|
var _Content = _interopRequireDefault(require("./Content"));
|
|
9
11
|
|
|
10
12
|
var _Small = _interopRequireDefault(require("./Small"));
|
|
@@ -12,6 +14,7 @@ var _Small = _interopRequireDefault(require("./Small"));
|
|
|
12
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
13
15
|
|
|
14
16
|
_Accordion["default"].Content = _Content["default"];
|
|
17
|
+
_Accordion["default"].Summary = _Summary["default"];
|
|
15
18
|
_Accordion["default"].Small = _Small["default"];
|
|
16
19
|
var _default = _Accordion["default"];
|
|
17
20
|
exports["default"] = _default;
|
|
@@ -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
|
-
|
|
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(
|
|
56
|
-
|
|
57
|
-
|
|
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:
|
|
99
|
+
height: 200,
|
|
100
|
+
zIndex: 1
|
|
85
101
|
};
|
|
86
102
|
var _default = Popover;
|
|
87
103
|
exports["default"] = _default;
|
|
@@ -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
|
-
|
|
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;
|
|
@@ -95,6 +95,11 @@ var Accordion = function Accordion(_ref15) {
|
|
|
95
95
|
open = _useState[0],
|
|
96
96
|
setOpen = _useState[1];
|
|
97
97
|
|
|
98
|
+
var _React$Children$toArr = React.Children.toArray(children),
|
|
99
|
+
summary = _React$Children$toArr[0],
|
|
100
|
+
contentChildren = _React$Children$toArr.slice(1);
|
|
101
|
+
|
|
102
|
+
var hasSummary = summary.type.displayName === 'Accordion.Summary';
|
|
98
103
|
return /*#__PURE__*/React.createElement(AccordionWrapper, _extends({
|
|
99
104
|
disabled: disabled
|
|
100
105
|
}, props), /*#__PURE__*/React.createElement(Header, {
|
|
@@ -106,7 +111,7 @@ var Accordion = function Accordion(_ref15) {
|
|
|
106
111
|
},
|
|
107
112
|
small: small,
|
|
108
113
|
hasHorizontalPadding: hasHorizontalPadding
|
|
109
|
-
}, /*#__PURE__*/React.createElement(Title, {
|
|
114
|
+
}, hasSummary ? summary : /*#__PURE__*/React.createElement(Title, {
|
|
110
115
|
subtitle: subtitle
|
|
111
116
|
}, small ? /*#__PURE__*/React.createElement(Text.Small, {
|
|
112
117
|
color: disabled ? 'deep' : undefined
|
|
@@ -125,11 +130,11 @@ var Accordion = function Accordion(_ref15) {
|
|
|
125
130
|
isOpen: open,
|
|
126
131
|
small: small,
|
|
127
132
|
hasHorizontalPadding: hasHorizontalPadding
|
|
128
|
-
}, children), /*#__PURE__*/React.createElement(Divider, null));
|
|
133
|
+
}, hasSummary ? contentChildren : children), /*#__PURE__*/React.createElement(Divider, null));
|
|
129
134
|
};
|
|
130
135
|
|
|
131
136
|
Accordion.propTypes = {
|
|
132
|
-
title: string
|
|
137
|
+
title: string,
|
|
133
138
|
subtitle: string,
|
|
134
139
|
children: node.isRequired,
|
|
135
140
|
disabled: bool,
|
|
@@ -138,6 +143,7 @@ Accordion.propTypes = {
|
|
|
138
143
|
hasHorizontalPadding: bool
|
|
139
144
|
};
|
|
140
145
|
Accordion.defaultProps = {
|
|
146
|
+
title: undefined,
|
|
141
147
|
subtitle: undefined,
|
|
142
148
|
disabled: false,
|
|
143
149
|
expanded: false,
|
|
@@ -102,6 +102,15 @@ describe('<Accordion />', function () {
|
|
|
102
102
|
expect(container.firstChild).toMatchSnapshot();
|
|
103
103
|
});
|
|
104
104
|
});
|
|
105
|
+
it('should render the accordion summary', function () {
|
|
106
|
+
render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Accordion, {
|
|
107
|
+
title: "Title",
|
|
108
|
+
subtitle: "Subtitle"
|
|
109
|
+
}, /*#__PURE__*/React.createElement(Accordion.Summary, null, /*#__PURE__*/React.createElement(Text, null, "Summary")), /*#__PURE__*/React.createElement(Accordion.Content, null, /*#__PURE__*/React.createElement(Text, null, "Content")))));
|
|
110
|
+
expect(screen.getByText('Summary')).toBeInTheDocument();
|
|
111
|
+
expect(screen.queryByText('Title')).not.toBeInTheDocument();
|
|
112
|
+
expect(screen.queryByText('Subtitle')).not.toBeInTheDocument();
|
|
113
|
+
});
|
|
105
114
|
it('should have className when passed as props', function () {
|
|
106
115
|
render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Accordion, {
|
|
107
116
|
title: "Title"
|
|
@@ -7,4 +7,5 @@ var Content = styled.div(_templateObject || (_templateObject = _taggedTemplateLi
|
|
|
7
7
|
var accordion = _ref.theme.yoga.components.accordion;
|
|
8
8
|
return "\n padding: 0 " + accordion.padding.standard + "px " + accordion.padding.standard + "px;\n ";
|
|
9
9
|
});
|
|
10
|
+
Content.displayName = 'Accordion.Content';
|
|
10
11
|
export default Content;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
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
|
+
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import Box from '../../Box';
|
|
5
|
+
|
|
6
|
+
function Summary(props) {
|
|
7
|
+
return /*#__PURE__*/React.createElement(Box, _extends({
|
|
8
|
+
width: "100%"
|
|
9
|
+
}, props));
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
Summary.displayName = 'Accordion.Summary';
|
|
13
|
+
export default Summary;
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import Accordion from './Accordion';
|
|
2
|
+
import Summary from './Summary';
|
|
2
3
|
import Content from './Content';
|
|
3
4
|
import AccordionSmall from './Small';
|
|
4
5
|
Accordion.Content = Content;
|
|
6
|
+
Accordion.Summary = Summary;
|
|
5
7
|
Accordion.Small = AccordionSmall;
|
|
6
8
|
export default Accordion;
|
|
@@ -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
|
-
|
|
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(
|
|
44
|
-
|
|
45
|
-
|
|
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:
|
|
87
|
+
height: 200,
|
|
88
|
+
zIndex: 1
|
|
73
89
|
};
|
|
74
90
|
export default Popover;
|
|
@@ -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
|
-
|
|
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.
|
|
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": "
|
|
56
|
+
"gitHead": "c5d3cd28c67e1bf206d267e6b736a99ac69868fd",
|
|
57
57
|
"module": "./esm",
|
|
58
58
|
"private": false,
|
|
59
59
|
"react-native": "./cjs/index.native.js"
|