@gympass/yoga 7.40.4 → 7.41.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 (25) hide show
  1. package/cjs/Dialog/web/Dialog.js +0 -2
  2. package/cjs/Menu/Menu.theme.js +53 -0
  3. package/cjs/Menu/index.js +20 -0
  4. package/cjs/Menu/web/Menu.js +55 -0
  5. package/cjs/Menu/web/Menu.test.js +123 -0
  6. package/cjs/Menu/web/MenuAction.js +26 -0
  7. package/cjs/Menu/web/MenuItem.js +80 -0
  8. package/cjs/Menu/web/MenuList.js +56 -0
  9. package/cjs/Theme/theme/theme.js +3 -0
  10. package/cjs/hooks/index.js +8 -0
  11. package/cjs/hooks/useKeyPress.js +40 -0
  12. package/cjs/index.js +4 -0
  13. package/esm/Dialog/web/Dialog.js +0 -2
  14. package/esm/Menu/Menu.theme.js +47 -0
  15. package/esm/Menu/index.js +8 -0
  16. package/esm/Menu/web/Menu.js +45 -0
  17. package/esm/Menu/web/Menu.test.js +115 -0
  18. package/esm/Menu/web/MenuAction.js +16 -0
  19. package/esm/Menu/web/MenuItem.js +63 -0
  20. package/esm/Menu/web/MenuList.js +39 -0
  21. package/esm/Theme/theme/theme.js +2 -0
  22. package/esm/hooks/index.js +2 -1
  23. package/esm/hooks/useKeyPress.js +32 -0
  24. package/esm/index.js +2 -1
  25. package/package.json +3 -2
package/cjs/Dialog/web/Dialog.js CHANGED
@@ -96,8 +96,6 @@ Dialog.propTypes = {
96
96
 
97
97
  /** Function to close the dialog. */
98
98
  onClose: _propTypes.func,
99
-
100
- /** The children necessary */
101
99
  children: _propTypes.node.isRequired
102
100
  };
103
101
  Dialog.defaultProps = {
package/cjs/Menu/Menu.theme.js ADDED
@@ -0,0 +1,53 @@
1
+ "use strict";
2
+
3
+ exports.__esModule = true;
4
+ exports["default"] = void 0;
5
+
6
+ var Menu = function Menu(_ref) {
7
+ var spacing = _ref.spacing,
8
+ radii = _ref.radii,
9
+ colors = _ref.colors,
10
+ fontWeights = _ref.fontWeights;
11
+ return {
12
+ border: {
13
+ radius: radii.small
14
+ },
15
+ width: {
16
+ min: 176,
17
+ max: 280
18
+ },
19
+ margin: {
20
+ "default": spacing.small,
21
+ medium: spacing.medium,
22
+ xxsmall: spacing.xxsmall
23
+ },
24
+ padding: {
25
+ horizontal: spacing.small,
26
+ vertical: spacing.xxsmall
27
+ },
28
+ backgroundColor: {
29
+ white: colors.white,
30
+ disabled: colors.elements.backgroundAndDisabled
31
+ },
32
+ text: {
33
+ "default": {
34
+ color: colors.text.primary
35
+ },
36
+ active: {
37
+ color: colors.primary
38
+ },
39
+ disabled: {
40
+ color: colors.text.disabled
41
+ }
42
+ },
43
+ font: {
44
+ weight: fontWeights.medium
45
+ },
46
+ icon: {
47
+ disabled: colors.elements.selectionAndIcons
48
+ }
49
+ };
50
+ };
51
+
52
+ var _default = Menu;
53
+ exports["default"] = _default;
package/cjs/Menu/index.js ADDED
@@ -0,0 +1,20 @@
1
+ "use strict";
2
+
3
+ exports.__esModule = true;
4
+ exports["default"] = void 0;
5
+
6
+ var _Menu = _interopRequireDefault(require("./web/Menu"));
7
+
8
+ var _MenuAction = _interopRequireDefault(require("./web/MenuAction"));
9
+
10
+ var _MenuList = _interopRequireDefault(require("./web/MenuList"));
11
+
12
+ var _MenuItem = _interopRequireDefault(require("./web/MenuItem"));
13
+
14
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
15
+
16
+ _Menu["default"].Action = _MenuAction["default"];
17
+ _Menu["default"].List = _MenuList["default"];
18
+ _Menu["default"].Item = _MenuItem["default"];
19
+ var _default = _Menu["default"];
20
+ exports["default"] = _default;
package/cjs/Menu/web/Menu.js ADDED
@@ -0,0 +1,55 @@
1
+ "use strict";
2
+
3
+ exports.__esModule = true;
4
+ exports["default"] = void 0;
5
+
6
+ var _react = _interopRequireDefault(require("react"));
7
+
8
+ var _reactDropdownMenu = require("@radix-ui/react-dropdown-menu");
9
+
10
+ var _propTypes = require("prop-types");
11
+
12
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
13
+
14
+ var Menu = function Menu(_ref) {
15
+ var children = _ref.children,
16
+ onMouseHover = _ref.onMouseHover;
17
+
18
+ var _React$useState = _react["default"].useState(false),
19
+ isOpen = _React$useState[0],
20
+ setIsOpen = _React$useState[1];
21
+
22
+ function handleOpenMenu() {
23
+ setIsOpen(!isOpen);
24
+ }
25
+
26
+ if (!onMouseHover) {
27
+ return /*#__PURE__*/_react["default"].createElement(_reactDropdownMenu.Root, {
28
+ sideOffset: 5,
29
+ modal: false
30
+ }, children);
31
+ }
32
+
33
+ return /*#__PURE__*/_react["default"].createElement("div", {
34
+ onMouseEnter: handleOpenMenu,
35
+ onMouseLeave: handleOpenMenu
36
+ }, /*#__PURE__*/_react["default"].createElement(_reactDropdownMenu.Root, {
37
+ sideOffset: 5,
38
+ modal: false,
39
+ defaultOpen: true,
40
+ open: isOpen
41
+ }, children));
42
+ };
43
+
44
+ Menu.propTypes = {
45
+ children: _propTypes.node.isRequired,
46
+
47
+ /** when mouse hover menu open as deafault is true */
48
+ onMouseHover: _propTypes.bool
49
+ };
50
+ Menu.defaultProps = {
51
+ onMouseHover: true
52
+ };
53
+ Menu.displayName = 'Menu';
54
+ var _default = Menu;
55
+ exports["default"] = _default;
package/cjs/Menu/web/Menu.test.js ADDED
@@ -0,0 +1,123 @@
1
+ "use strict";
2
+
3
+ var _react = _interopRequireDefault(require("react"));
4
+
5
+ var _react2 = require("@testing-library/react");
6
+
7
+ var _yogaIcons = require("@gympass/yoga-icons");
8
+
9
+ var _ = require("../..");
10
+
11
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
12
+
13
+ describe('<Menu />', function () {
14
+ it('should match snapshot in default Menu', function () {
15
+ var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Menu, null, /*#__PURE__*/_react["default"].createElement(_.Menu.Action, null, /*#__PURE__*/_react["default"].createElement(_.Button.Icon, {
16
+ icon: _yogaIcons.MenuList
17
+ })), /*#__PURE__*/_react["default"].createElement(_.Menu.List, null, /*#__PURE__*/_react["default"].createElement(_.Menu.Item, null, "Item 1"), /*#__PURE__*/_react["default"].createElement(_.Menu.Item, null, "Item 2"), /*#__PURE__*/_react["default"].createElement(_.Menu.Item, null, "Item 3"))))),
18
+ container = _render.container;
19
+
20
+ expect(container).toMatchSnapshot();
21
+ });
22
+ it('should match snapshot Menu.Item with icon', function () {
23
+ var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Menu, null, /*#__PURE__*/_react["default"].createElement(_.Menu.Action, null, /*#__PURE__*/_react["default"].createElement(_.Button.Icon, {
24
+ icon: _yogaIcons.MenuList
25
+ })), /*#__PURE__*/_react["default"].createElement(_.Menu.List, null, /*#__PURE__*/_react["default"].createElement(_.Menu.Item, {
26
+ icon: _yogaIcons.FlagBrazil
27
+ }, "Item 1"), /*#__PURE__*/_react["default"].createElement(_.Menu.Item, {
28
+ icon: _yogaIcons.FlagArgentina
29
+ }, "Item 2"), /*#__PURE__*/_react["default"].createElement(_.Menu.Item, {
30
+ icon: _yogaIcons.FlagChile
31
+ }, "Item 3"))))),
32
+ container = _render2.container;
33
+
34
+ expect(container).toMatchSnapshot();
35
+ });
36
+ it('should match snapshot Menu.Item with link', function () {
37
+ var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Menu, null, /*#__PURE__*/_react["default"].createElement(_.Menu.Action, null, /*#__PURE__*/_react["default"].createElement(_.Button.Icon, {
38
+ icon: _yogaIcons.MenuList
39
+ })), /*#__PURE__*/_react["default"].createElement(_.Menu.List, null, /*#__PURE__*/_react["default"].createElement(_.Menu.Item, {
40
+ href: "http://www.gympass.com",
41
+ target: "blank"
42
+ }, "Item 1"), /*#__PURE__*/_react["default"].createElement(_.Menu.Item, {
43
+ href: "http://www.gympass.com",
44
+ target: "blank"
45
+ }, "Item 2"), /*#__PURE__*/_react["default"].createElement(_.Menu.Item, {
46
+ href: "http://www.gympass.com",
47
+ target: "blank"
48
+ }, "Item 3"))))),
49
+ container = _render3.container;
50
+
51
+ expect(container).toMatchSnapshot();
52
+ });
53
+ it('should match snapshot Menu.Item with active', function () {
54
+ var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Menu, null, /*#__PURE__*/_react["default"].createElement(_.Menu.Action, null, /*#__PURE__*/_react["default"].createElement(_.Button.Icon, {
55
+ icon: _yogaIcons.MenuList
56
+ })), /*#__PURE__*/_react["default"].createElement(_.Menu.List, null, /*#__PURE__*/_react["default"].createElement(_.Menu.Item, {
57
+ active: true
58
+ }, "Item 1"), /*#__PURE__*/_react["default"].createElement(_.Menu.Item, null, "Item 2"), /*#__PURE__*/_react["default"].createElement(_.Menu.Item, null, "Item 3"))))),
59
+ container = _render4.container;
60
+
61
+ expect(container).toMatchSnapshot();
62
+ });
63
+ it('should match snapshot Menu.Item with disabled', function () {
64
+ var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Menu, null, /*#__PURE__*/_react["default"].createElement(_.Menu.Action, null, /*#__PURE__*/_react["default"].createElement(_.Button.Icon, {
65
+ icon: _yogaIcons.MenuList
66
+ })), /*#__PURE__*/_react["default"].createElement(_.Menu.List, null, /*#__PURE__*/_react["default"].createElement(_.Menu.Item, {
67
+ disabled: true
68
+ }, "Item 1"), /*#__PURE__*/_react["default"].createElement(_.Menu.Item, null, "Item 2"), /*#__PURE__*/_react["default"].createElement(_.Menu.Item, null, "Item 3"))))),
69
+ container = _render5.container;
70
+
71
+ expect(container).toMatchSnapshot();
72
+ });
73
+ it('should match snapshot Menu.Item with disabled and icon', function () {
74
+ var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Menu, null, /*#__PURE__*/_react["default"].createElement(_.Menu.Action, null, /*#__PURE__*/_react["default"].createElement(_.Button.Icon, {
75
+ icon: _yogaIcons.MenuList
76
+ })), /*#__PURE__*/_react["default"].createElement(_.Menu.List, null, /*#__PURE__*/_react["default"].createElement(_.Menu.Item, {
77
+ icon: _yogaIcons.HomeFilled,
78
+ disabled: true
79
+ }, "Item 1"), /*#__PURE__*/_react["default"].createElement(_.Menu.Item, null, "Item 2"), /*#__PURE__*/_react["default"].createElement(_.Menu.Item, null, "Item 3"))))),
80
+ container = _render6.container;
81
+
82
+ expect(container).toMatchSnapshot();
83
+ });
84
+ it('should match snapshot Menu with a onMouseHover props false', function () {
85
+ var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Menu, {
86
+ onMouseHover: false
87
+ }, /*#__PURE__*/_react["default"].createElement(_.Menu.Action, null, /*#__PURE__*/_react["default"].createElement(_.Button.Icon, {
88
+ icon: _yogaIcons.MenuList
89
+ })), /*#__PURE__*/_react["default"].createElement(_.Menu.List, null, /*#__PURE__*/_react["default"].createElement(_.Menu.Item, {
90
+ icon: _yogaIcons.HomeFilled,
91
+ disabled: true
92
+ }, "Item 1"), /*#__PURE__*/_react["default"].createElement(_.Menu.Item, null, "Item 2"), /*#__PURE__*/_react["default"].createElement(_.Menu.Item, null, "Item 3"))))),
93
+ container = _render7.container;
94
+
95
+ expect(container).toMatchSnapshot();
96
+ });
97
+ it('should match snapshot Menu with an align props start', function () {
98
+ var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Menu, null, /*#__PURE__*/_react["default"].createElement(_.Menu.Action, null, /*#__PURE__*/_react["default"].createElement(_.Button.Icon, {
99
+ icon: _yogaIcons.MenuList
100
+ })), /*#__PURE__*/_react["default"].createElement(_.Menu.List, {
101
+ align: "start"
102
+ }, /*#__PURE__*/_react["default"].createElement(_.Menu.Item, {
103
+ icon: _yogaIcons.HomeFilled,
104
+ disabled: true
105
+ }, "Item 1"), /*#__PURE__*/_react["default"].createElement(_.Menu.Item, null, "Item 2"), /*#__PURE__*/_react["default"].createElement(_.Menu.Item, null, "Item 3"))))),
106
+ container = _render8.container;
107
+
108
+ expect(container).toMatchSnapshot();
109
+ });
110
+ it('should match snapshot Menu with an align props end', function () {
111
+ var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Menu, null, /*#__PURE__*/_react["default"].createElement(_.Menu.Action, null, /*#__PURE__*/_react["default"].createElement(_.Button.Icon, {
112
+ icon: _yogaIcons.MenuList
113
+ })), /*#__PURE__*/_react["default"].createElement(_.Menu.List, {
114
+ align: "end"
115
+ }, /*#__PURE__*/_react["default"].createElement(_.Menu.Item, {
116
+ icon: _yogaIcons.HomeFilled,
117
+ disabled: true
118
+ }, "Item 1"), /*#__PURE__*/_react["default"].createElement(_.Menu.Item, null, "Item 2"), /*#__PURE__*/_react["default"].createElement(_.Menu.Item, null, "Item 3"))))),
119
+ container = _render9.container;
120
+
121
+ expect(container).toMatchSnapshot();
122
+ });
123
+ });
package/cjs/Menu/web/MenuAction.js ADDED
@@ -0,0 +1,26 @@
1
+ "use strict";
2
+
3
+ exports.__esModule = true;
4
+ exports["default"] = void 0;
5
+
6
+ var _react = _interopRequireDefault(require("react"));
7
+
8
+ var _reactDropdownMenu = require("@radix-ui/react-dropdown-menu");
9
+
10
+ var _propTypes = require("prop-types");
11
+
12
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
13
+
14
+ var MenuAction = function MenuAction(_ref) {
15
+ var children = _ref.children;
16
+ return /*#__PURE__*/_react["default"].createElement(_reactDropdownMenu.Trigger, {
17
+ asChild: true
18
+ }, children);
19
+ };
20
+
21
+ MenuAction.propTypes = {
22
+ children: _propTypes.node.isRequired
23
+ };
24
+ MenuAction.displayName = 'Menu.Action';
25
+ var _default = MenuAction;
26
+ exports["default"] = _default;
package/cjs/Menu/web/MenuItem.js ADDED
@@ -0,0 +1,80 @@
1
+ "use strict";
2
+
3
+ exports.__esModule = true;
4
+ exports["default"] = void 0;
5
+
6
+ var _react = _interopRequireWildcard(require("react"));
7
+
8
+ var _reactDropdownMenu = require("@radix-ui/react-dropdown-menu");
9
+
10
+ var _propTypes = require("prop-types");
11
+
12
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
13
+
14
+ var _excluded = ["icon", "href", "active", "disabled", "children"];
15
+
16
+ var _templateObject;
17
+
18
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
19
+
20
+ 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); }
21
+
22
+ 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; }
23
+
24
+ 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); }
25
+
26
+ 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; }
27
+
28
+ function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
29
+
30
+ var StyledMenuItem = _styledComponents["default"].li(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n ", "\n"])), function (_ref) {
31
+ var active = _ref.active,
32
+ disabled = _ref.disabled,
33
+ menu = _ref.theme.yoga.components.menu;
34
+ return "\n margin-right: auto;\n padding: " + menu.padding.vertical + "px " + menu.padding.horizontal + "px;\n\n width: 100%;\n cursor: pointer;\n text-decoration: none;\n color: " + menu.text["default"].color + ";\n\n " + (active ? "\n font-weight: " + menu.font.weight + ";\n color: " + menu.text.active.color + "\n " : '') + "\n\n " + (disabled ? "\n color: " + menu.text.disabled.color + ";\n pointer-events: none;\n\n svg {\n fill: " + menu.text.disabled.color + ";\n opacity: 0.5;\n }\n\n cursor: not-allowed;\n " : '') + "\n\n svg {\n margin-right: " + menu.margin["default"] + "px;\n fill: " + menu.icon.disabled + ";\n }\n\n &:focus {\n outline: none;\n background: " + menu.backgroundColor.disabled + ";\n }\n\n &:hover {\n background: " + menu.backgroundColor.disabled + ";\n }\n\n &:first-child {\n margin-top: " + menu.margin.xxsmall + "px;\n }\n\n &:last-child {\n margin-bottom: " + menu.margin.xxsmall + "px;\n }\n ";
35
+ });
36
+
37
+ var MenuItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
38
+ var Icon = _ref2.icon,
39
+ href = _ref2.href,
40
+ active = _ref2.active,
41
+ disabled = _ref2.disabled,
42
+ children = _ref2.children,
43
+ rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
44
+
45
+ var finalProps = _extends({}, rest);
46
+
47
+ if (href) {
48
+ finalProps.as = 'a';
49
+ finalProps.href = href;
50
+ }
51
+
52
+ return /*#__PURE__*/_react["default"].createElement(_reactDropdownMenu.Item, {
53
+ disabled: disabled,
54
+ asChild: true
55
+ }, /*#__PURE__*/_react["default"].createElement(StyledMenuItem, _extends({
56
+ active: active,
57
+ disabled: disabled,
58
+ ref: ref
59
+ }, finalProps), Icon && /*#__PURE__*/_react["default"].createElement(Icon, {
60
+ width: 20,
61
+ height: 20
62
+ }), children));
63
+ });
64
+ MenuItem.propTypes = {
65
+ /** The icon of menu item */
66
+ icon: (0, _propTypes.oneOfType)([_propTypes.node, _propTypes.func]),
67
+ children: _propTypes.node.isRequired,
68
+ href: _propTypes.string,
69
+ disabled: _propTypes.bool,
70
+ active: _propTypes.bool
71
+ };
72
+ MenuItem.defaultProps = {
73
+ icon: undefined,
74
+ href: undefined,
75
+ disabled: false,
76
+ active: false
77
+ };
78
+ MenuItem.displayName = 'Menu.Item';
79
+ var _default = MenuItem;
80
+ exports["default"] = _default;
package/cjs/Menu/web/MenuList.js ADDED
@@ -0,0 +1,56 @@
1
+ "use strict";
2
+
3
+ exports.__esModule = true;
4
+ exports["default"] = void 0;
5
+
6
+ var _react = _interopRequireWildcard(require("react"));
7
+
8
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
9
+
10
+ var _reactDropdownMenu = require("@radix-ui/react-dropdown-menu");
11
+
12
+ var _propTypes = require("prop-types");
13
+
14
+ var _Box = _interopRequireDefault(require("../../Box"));
15
+
16
+ var _templateObject;
17
+
18
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
19
+
20
+ 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); }
21
+
22
+ 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; }
23
+
24
+ function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
25
+
26
+ var StyledMenuList = (0, _styledComponents["default"])(_reactDropdownMenu.Content)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n ", "\n"])), function (_ref) {
27
+ var _ref$theme$yoga = _ref.theme.yoga,
28
+ menu = _ref$theme$yoga.components.menu,
29
+ elevations = _ref$theme$yoga.elevations;
30
+ return "\n margin: " + menu.margin["default"] + "px 0;\n padding: 0;\n min-width: " + menu.width.min + "px;\n max-width: " + menu.width.max + "px;\n border-radius: " + menu.border.radius + "px;\n\n background-color: " + menu.backgroundColor.white + ";\n box-shadow: " + elevations.small + "\n ";
31
+ });
32
+ var MenuList = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
33
+ var children = _ref2.children,
34
+ align = _ref2.align;
35
+ return /*#__PURE__*/_react["default"].createElement(StyledMenuList, {
36
+ asChild: true,
37
+ sideOffset: 2,
38
+ alignOffset: -5,
39
+ align: align
40
+ }, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
41
+ as: "ul",
42
+ ref: ref
43
+ }, children));
44
+ });
45
+ MenuList.propTypes = {
46
+ children: _propTypes.node.isRequired,
47
+
48
+ /** Align Menu is a alignement that menu will appear on the screen | start | center | end */
49
+ align: _propTypes.string
50
+ };
51
+ MenuList.defaultProps = {
52
+ align: 'start'
53
+ };
54
+ MenuList.displayName = 'Menu.List';
55
+ var _default = MenuList;
56
+ exports["default"] = _default;
package/cjs/Theme/theme/theme.js CHANGED
@@ -45,6 +45,8 @@ var _InputTheme = _interopRequireDefault(require("./../../Input/Input.theme.js")
45
45
 
46
46
  var _ListTheme = _interopRequireDefault(require("./../../List/List.theme.js"));
47
47
 
48
+ var _MenuTheme = _interopRequireDefault(require("./../../Menu/Menu.theme.js"));
49
+
48
50
  var _ProgressTheme = _interopRequireDefault(require("./../../Progress/Progress.theme.js"));
49
51
 
50
52
  var _RadioGroupTheme = _interopRequireDefault(require("./../../RadioGroup/RadioGroup.theme.js"));
@@ -90,6 +92,7 @@ var componentThemes = {
90
92
  Icon$Icon: _IconTheme["default"],
91
93
  Input$Input: _InputTheme["default"],
92
94
  List$List: _ListTheme["default"],
95
+ Menu$Menu: _MenuTheme["default"],
93
96
  Progress$Progress: _ProgressTheme["default"],
94
97
  RadioGroup$RadioGroup: _RadioGroupTheme["default"],
95
98
  Rating$Rating: _RatingTheme["default"],
package/cjs/hooks/index.js CHANGED
@@ -8,4 +8,12 @@ Object.keys(_usePortal).forEach(function (key) {
8
8
  if (key === "default" || key === "__esModule") return;
9
9
  if (key in exports && exports[key] === _usePortal[key]) return;
10
10
  exports[key] = _usePortal[key];
11
+ });
12
+
13
+ var _useKeyPress = require("./useKeyPress");
14
+
15
+ Object.keys(_useKeyPress).forEach(function (key) {
16
+ if (key === "default" || key === "__esModule") return;
17
+ if (key in exports && exports[key] === _useKeyPress[key]) return;
18
+ exports[key] = _useKeyPress[key];
11
19
  });
package/cjs/hooks/useKeyPress.js ADDED
@@ -0,0 +1,40 @@
1
+ "use strict";
2
+
3
+ exports.__esModule = true;
4
+ exports.useKeyPress = void 0;
5
+
6
+ var _react = require("react");
7
+
8
+ var useKeyPress = function useKeyPress(targetKey) {
9
+ var _useState = (0, _react.useState)(false),
10
+ keyPressed = _useState[0],
11
+ setKeyPressed = _useState[1];
12
+
13
+ (0, _react.useEffect)(function () {
14
+ function downHandler(_ref) {
15
+ var key = _ref.key;
16
+
17
+ if (key === targetKey) {
18
+ setKeyPressed(true);
19
+ }
20
+ }
21
+
22
+ function upHandler(_ref2) {
23
+ var key = _ref2.key;
24
+
25
+ if (key === targetKey) {
26
+ setKeyPressed(false);
27
+ }
28
+ }
29
+
30
+ window.addEventListener('keydown', downHandler);
31
+ window.addEventListener('keyup', upHandler);
32
+ return function () {
33
+ window.removeEventListener('keydown', downHandler);
34
+ window.removeEventListener('keyup', upHandler);
35
+ };
36
+ }, [targetKey]);
37
+ return keyPressed;
38
+ };
39
+
40
+ exports.useKeyPress = useKeyPress;
package/cjs/index.js CHANGED
@@ -115,6 +115,10 @@ var _Header = _interopRequireDefault(require("./Header"));
115
115
 
116
116
  exports.Header = _Header["default"];
117
117
 
118
+ var _Menu = _interopRequireDefault(require("./Menu"));
119
+
120
+ exports.Menu = _Menu["default"];
121
+
118
122
  var _Banner = _interopRequireDefault(require("./Banner"));
119
123
 
120
124
  exports.Banner = _Banner["default"];
package/esm/Dialog/web/Dialog.js CHANGED
@@ -76,8 +76,6 @@ Dialog.propTypes = {
76
76
 
77
77
  /** Function to close the dialog. */
78
78
  onClose: func,
79
-
80
- /** The children necessary */
81
79
  children: node.isRequired
82
80
  };
83
81
  Dialog.defaultProps = {
package/esm/Menu/Menu.theme.js ADDED
@@ -0,0 +1,47 @@
1
+ var Menu = function Menu(_ref) {
2
+ var spacing = _ref.spacing,
3
+ radii = _ref.radii,
4
+ colors = _ref.colors,
5
+ fontWeights = _ref.fontWeights;
6
+ return {
7
+ border: {
8
+ radius: radii.small
9
+ },
10
+ width: {
11
+ min: 176,
12
+ max: 280
13
+ },
14
+ margin: {
15
+ "default": spacing.small,
16
+ medium: spacing.medium,
17
+ xxsmall: spacing.xxsmall
18
+ },
19
+ padding: {
20
+ horizontal: spacing.small,
21
+ vertical: spacing.xxsmall
22
+ },
23
+ backgroundColor: {
24
+ white: colors.white,
25
+ disabled: colors.elements.backgroundAndDisabled
26
+ },
27
+ text: {
28
+ "default": {
29
+ color: colors.text.primary
30
+ },
31
+ active: {
32
+ color: colors.primary
33
+ },
34
+ disabled: {
35
+ color: colors.text.disabled
36
+ }
37
+ },
38
+ font: {
39
+ weight: fontWeights.medium
40
+ },
41
+ icon: {
42
+ disabled: colors.elements.selectionAndIcons
43
+ }
44
+ };
45
+ };
46
+
47
+ export default Menu;
package/esm/Menu/index.js ADDED
@@ -0,0 +1,8 @@
1
+ import Menu from './web/Menu';
2
+ import MenuAction from './web/MenuAction';
3
+ import MenuList from './web/MenuList';
4
+ import MenuItem from './web/MenuItem';
5
+ Menu.Action = MenuAction;
6
+ Menu.List = MenuList;
7
+ Menu.Item = MenuItem;
8
+ export default Menu;
package/esm/Menu/web/Menu.js ADDED
@@ -0,0 +1,45 @@
1
+ import React from 'react';
2
+ import { Root as MenuRoot } from '@radix-ui/react-dropdown-menu';
3
+ import { bool, node } from 'prop-types';
4
+
5
+ var Menu = function Menu(_ref) {
6
+ var children = _ref.children,
7
+ onMouseHover = _ref.onMouseHover;
8
+
9
+ var _React$useState = React.useState(false),
10
+ isOpen = _React$useState[0],
11
+ setIsOpen = _React$useState[1];
12
+
13
+ function handleOpenMenu() {
14
+ setIsOpen(!isOpen);
15
+ }
16
+
17
+ if (!onMouseHover) {
18
+ return /*#__PURE__*/React.createElement(MenuRoot, {
19
+ sideOffset: 5,
20
+ modal: false
21
+ }, children);
22
+ }
23
+
24
+ return /*#__PURE__*/React.createElement("div", {
25
+ onMouseEnter: handleOpenMenu,
26
+ onMouseLeave: handleOpenMenu
27
+ }, /*#__PURE__*/React.createElement(MenuRoot, {
28
+ sideOffset: 5,
29
+ modal: false,
30
+ defaultOpen: true,
31
+ open: isOpen
32
+ }, children));
33
+ };
34
+
35
+ Menu.propTypes = {
36
+ children: node.isRequired,
37
+
38
+ /** when mouse hover menu open as deafault is true */
39
+ onMouseHover: bool
40
+ };
41
+ Menu.defaultProps = {
42
+ onMouseHover: true
43
+ };
44
+ Menu.displayName = 'Menu';
45
+ export default Menu;
package/esm/Menu/web/Menu.test.js ADDED
@@ -0,0 +1,115 @@
1
+ import React from 'react';
2
+ import { render } from '@testing-library/react';
3
+ import { FlagArgentina, FlagBrazil, FlagChile, HomeFilled, MenuList } from '@gympass/yoga-icons';
4
+ import { ThemeProvider, Menu, Button } from '../..';
5
+ describe('<Menu />', function () {
6
+ it('should match snapshot in default Menu', function () {
7
+ var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(Menu.Action, null, /*#__PURE__*/React.createElement(Button.Icon, {
8
+ icon: MenuList
9
+ })), /*#__PURE__*/React.createElement(Menu.List, null, /*#__PURE__*/React.createElement(Menu.Item, null, "Item 1"), /*#__PURE__*/React.createElement(Menu.Item, null, "Item 2"), /*#__PURE__*/React.createElement(Menu.Item, null, "Item 3"))))),
10
+ container = _render.container;
11
+
12
+ expect(container).toMatchSnapshot();
13
+ });
14
+ it('should match snapshot Menu.Item with icon', function () {
15
+ var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(Menu.Action, null, /*#__PURE__*/React.createElement(Button.Icon, {
16
+ icon: MenuList
17
+ })), /*#__PURE__*/React.createElement(Menu.List, null, /*#__PURE__*/React.createElement(Menu.Item, {
18
+ icon: FlagBrazil
19
+ }, "Item 1"), /*#__PURE__*/React.createElement(Menu.Item, {
20
+ icon: FlagArgentina
21
+ }, "Item 2"), /*#__PURE__*/React.createElement(Menu.Item, {
22
+ icon: FlagChile
23
+ }, "Item 3"))))),
24
+ container = _render2.container;
25
+
26
+ expect(container).toMatchSnapshot();
27
+ });
28
+ it('should match snapshot Menu.Item with link', function () {
29
+ var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(Menu.Action, null, /*#__PURE__*/React.createElement(Button.Icon, {
30
+ icon: MenuList
31
+ })), /*#__PURE__*/React.createElement(Menu.List, null, /*#__PURE__*/React.createElement(Menu.Item, {
32
+ href: "http://www.gympass.com",
33
+ target: "blank"
34
+ }, "Item 1"), /*#__PURE__*/React.createElement(Menu.Item, {
35
+ href: "http://www.gympass.com",
36
+ target: "blank"
37
+ }, "Item 2"), /*#__PURE__*/React.createElement(Menu.Item, {
38
+ href: "http://www.gympass.com",
39
+ target: "blank"
40
+ }, "Item 3"))))),
41
+ container = _render3.container;
42
+
43
+ expect(container).toMatchSnapshot();
44
+ });
45
+ it('should match snapshot Menu.Item with active', function () {
46
+ var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(Menu.Action, null, /*#__PURE__*/React.createElement(Button.Icon, {
47
+ icon: MenuList
48
+ })), /*#__PURE__*/React.createElement(Menu.List, null, /*#__PURE__*/React.createElement(Menu.Item, {
49
+ active: true
50
+ }, "Item 1"), /*#__PURE__*/React.createElement(Menu.Item, null, "Item 2"), /*#__PURE__*/React.createElement(Menu.Item, null, "Item 3"))))),
51
+ container = _render4.container;
52
+
53
+ expect(container).toMatchSnapshot();
54
+ });
55
+ it('should match snapshot Menu.Item with disabled', function () {
56
+ var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(Menu.Action, null, /*#__PURE__*/React.createElement(Button.Icon, {
57
+ icon: MenuList
58
+ })), /*#__PURE__*/React.createElement(Menu.List, null, /*#__PURE__*/React.createElement(Menu.Item, {
59
+ disabled: true
60
+ }, "Item 1"), /*#__PURE__*/React.createElement(Menu.Item, null, "Item 2"), /*#__PURE__*/React.createElement(Menu.Item, null, "Item 3"))))),
61
+ container = _render5.container;
62
+
63
+ expect(container).toMatchSnapshot();
64
+ });
65
+ it('should match snapshot Menu.Item with disabled and icon', function () {
66
+ var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(Menu.Action, null, /*#__PURE__*/React.createElement(Button.Icon, {
67
+ icon: MenuList
68
+ })), /*#__PURE__*/React.createElement(Menu.List, null, /*#__PURE__*/React.createElement(Menu.Item, {
69
+ icon: HomeFilled,
70
+ disabled: true
71
+ }, "Item 1"), /*#__PURE__*/React.createElement(Menu.Item, null, "Item 2"), /*#__PURE__*/React.createElement(Menu.Item, null, "Item 3"))))),
72
+ container = _render6.container;
73
+
74
+ expect(container).toMatchSnapshot();
75
+ });
76
+ it('should match snapshot Menu with a onMouseHover props false', function () {
77
+ var _render7 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Menu, {
78
+ onMouseHover: false
79
+ }, /*#__PURE__*/React.createElement(Menu.Action, null, /*#__PURE__*/React.createElement(Button.Icon, {
80
+ icon: MenuList
81
+ })), /*#__PURE__*/React.createElement(Menu.List, null, /*#__PURE__*/React.createElement(Menu.Item, {
82
+ icon: HomeFilled,
83
+ disabled: true
84
+ }, "Item 1"), /*#__PURE__*/React.createElement(Menu.Item, null, "Item 2"), /*#__PURE__*/React.createElement(Menu.Item, null, "Item 3"))))),
85
+ container = _render7.container;
86
+
87
+ expect(container).toMatchSnapshot();
88
+ });
89
+ it('should match snapshot Menu with an align props start', function () {
90
+ var _render8 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(Menu.Action, null, /*#__PURE__*/React.createElement(Button.Icon, {
91
+ icon: MenuList
92
+ })), /*#__PURE__*/React.createElement(Menu.List, {
93
+ align: "start"
94
+ }, /*#__PURE__*/React.createElement(Menu.Item, {
95
+ icon: HomeFilled,
96
+ disabled: true
97
+ }, "Item 1"), /*#__PURE__*/React.createElement(Menu.Item, null, "Item 2"), /*#__PURE__*/React.createElement(Menu.Item, null, "Item 3"))))),
98
+ container = _render8.container;
99
+
100
+ expect(container).toMatchSnapshot();
101
+ });
102
+ it('should match snapshot Menu with an align props end', function () {
103
+ var _render9 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(Menu.Action, null, /*#__PURE__*/React.createElement(Button.Icon, {
104
+ icon: MenuList
105
+ })), /*#__PURE__*/React.createElement(Menu.List, {
106
+ align: "end"
107
+ }, /*#__PURE__*/React.createElement(Menu.Item, {
108
+ icon: HomeFilled,
109
+ disabled: true
110
+ }, "Item 1"), /*#__PURE__*/React.createElement(Menu.Item, null, "Item 2"), /*#__PURE__*/React.createElement(Menu.Item, null, "Item 3"))))),
111
+ container = _render9.container;
112
+
113
+ expect(container).toMatchSnapshot();
114
+ });
115
+ });
package/esm/Menu/web/MenuAction.js ADDED
@@ -0,0 +1,16 @@
1
+ import React from 'react';
2
+ import { Trigger as MenuActionRoot } from '@radix-ui/react-dropdown-menu';
3
+ import { node } from 'prop-types';
4
+
5
+ var MenuAction = function MenuAction(_ref) {
6
+ var children = _ref.children;
7
+ return /*#__PURE__*/React.createElement(MenuActionRoot, {
8
+ asChild: true
9
+ }, children);
10
+ };
11
+
12
+ MenuAction.propTypes = {
13
+ children: node.isRequired
14
+ };
15
+ MenuAction.displayName = 'Menu.Action';
16
+ export default MenuAction;
package/esm/Menu/web/MenuItem.js ADDED
@@ -0,0 +1,63 @@
1
+ var _excluded = ["icon", "href", "active", "disabled", "children"];
2
+
3
+ var _templateObject;
4
+
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
+
7
+ 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; }
8
+
9
+ function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
10
+
11
+ import React, { forwardRef } from 'react';
12
+ import { Item as MenuItemRoot } from '@radix-ui/react-dropdown-menu';
13
+ import { oneOfType, func, node, string, bool } from 'prop-types';
14
+ import styled from 'styled-components';
15
+ var StyledMenuItem = styled.li(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n ", "\n"])), function (_ref) {
16
+ var active = _ref.active,
17
+ disabled = _ref.disabled,
18
+ menu = _ref.theme.yoga.components.menu;
19
+ return "\n margin-right: auto;\n padding: " + menu.padding.vertical + "px " + menu.padding.horizontal + "px;\n\n width: 100%;\n cursor: pointer;\n text-decoration: none;\n color: " + menu.text["default"].color + ";\n\n " + (active ? "\n font-weight: " + menu.font.weight + ";\n color: " + menu.text.active.color + "\n " : '') + "\n\n " + (disabled ? "\n color: " + menu.text.disabled.color + ";\n pointer-events: none;\n\n svg {\n fill: " + menu.text.disabled.color + ";\n opacity: 0.5;\n }\n\n cursor: not-allowed;\n " : '') + "\n\n svg {\n margin-right: " + menu.margin["default"] + "px;\n fill: " + menu.icon.disabled + ";\n }\n\n &:focus {\n outline: none;\n background: " + menu.backgroundColor.disabled + ";\n }\n\n &:hover {\n background: " + menu.backgroundColor.disabled + ";\n }\n\n &:first-child {\n margin-top: " + menu.margin.xxsmall + "px;\n }\n\n &:last-child {\n margin-bottom: " + menu.margin.xxsmall + "px;\n }\n ";
20
+ });
21
+ var MenuItem = /*#__PURE__*/forwardRef(function (_ref2, ref) {
22
+ var Icon = _ref2.icon,
23
+ href = _ref2.href,
24
+ active = _ref2.active,
25
+ disabled = _ref2.disabled,
26
+ children = _ref2.children,
27
+ rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
28
+
29
+ var finalProps = _extends({}, rest);
30
+
31
+ if (href) {
32
+ finalProps.as = 'a';
33
+ finalProps.href = href;
34
+ }
35
+
36
+ return /*#__PURE__*/React.createElement(MenuItemRoot, {
37
+ disabled: disabled,
38
+ asChild: true
39
+ }, /*#__PURE__*/React.createElement(StyledMenuItem, _extends({
40
+ active: active,
41
+ disabled: disabled,
42
+ ref: ref
43
+ }, finalProps), Icon && /*#__PURE__*/React.createElement(Icon, {
44
+ width: 20,
45
+ height: 20
46
+ }), children));
47
+ });
48
+ MenuItem.propTypes = {
49
+ /** The icon of menu item */
50
+ icon: oneOfType([node, func]),
51
+ children: node.isRequired,
52
+ href: string,
53
+ disabled: bool,
54
+ active: bool
55
+ };
56
+ MenuItem.defaultProps = {
57
+ icon: undefined,
58
+ href: undefined,
59
+ disabled: false,
60
+ active: false
61
+ };
62
+ MenuItem.displayName = 'Menu.Item';
63
+ export default MenuItem;
package/esm/Menu/web/MenuList.js ADDED
@@ -0,0 +1,39 @@
1
+ var _templateObject;
2
+
3
+ function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
4
+
5
+ import React, { forwardRef } from 'react';
6
+ import styled from 'styled-components';
7
+ import { Content as MenuListRoot } from '@radix-ui/react-dropdown-menu';
8
+ import { node, string } from 'prop-types';
9
+ import Box from '../../Box';
10
+ var StyledMenuList = styled(MenuListRoot)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n ", "\n"])), function (_ref) {
11
+ var _ref$theme$yoga = _ref.theme.yoga,
12
+ menu = _ref$theme$yoga.components.menu,
13
+ elevations = _ref$theme$yoga.elevations;
14
+ return "\n margin: " + menu.margin["default"] + "px 0;\n padding: 0;\n min-width: " + menu.width.min + "px;\n max-width: " + menu.width.max + "px;\n border-radius: " + menu.border.radius + "px;\n\n background-color: " + menu.backgroundColor.white + ";\n box-shadow: " + elevations.small + "\n ";
15
+ });
16
+ var MenuList = /*#__PURE__*/forwardRef(function (_ref2, ref) {
17
+ var children = _ref2.children,
18
+ align = _ref2.align;
19
+ return /*#__PURE__*/React.createElement(StyledMenuList, {
20
+ asChild: true,
21
+ sideOffset: 2,
22
+ alignOffset: -5,
23
+ align: align
24
+ }, /*#__PURE__*/React.createElement(Box, {
25
+ as: "ul",
26
+ ref: ref
27
+ }, children));
28
+ });
29
+ MenuList.propTypes = {
30
+ children: node.isRequired,
31
+
32
+ /** Align Menu is a alignement that menu will appear on the screen | start | center | end */
33
+ align: string
34
+ };
35
+ MenuList.defaultProps = {
36
+ align: 'start'
37
+ };
38
+ MenuList.displayName = 'Menu.List';
39
+ export default MenuList;
package/esm/Theme/theme/theme.js CHANGED
@@ -22,6 +22,7 @@ import _componentThemes_Heading$Heading from "./../../Heading/Heading.theme.js";
22
22
  import _componentThemes_Icon$Icon from "./../../Icon/Icon.theme.js";
23
23
  import _componentThemes_Input$Input from "./../../Input/Input.theme.js";
24
24
  import _componentThemes_List$List from "./../../List/List.theme.js";
25
+ import _componentThemes_Menu$Menu from "./../../Menu/Menu.theme.js";
25
26
  import _componentThemes_Progress$Progress from "./../../Progress/Progress.theme.js";
26
27
  import _componentThemes_RadioGroup$RadioGroup from "./../../RadioGroup/RadioGroup.theme.js";
27
28
  import _componentThemes_Rating$Rating from "./../../Rating/Rating.theme.js";
@@ -53,6 +54,7 @@ var componentThemes = {
53
54
  Icon$Icon: _componentThemes_Icon$Icon,
54
55
  Input$Input: _componentThemes_Input$Input,
55
56
  List$List: _componentThemes_List$List,
57
+ Menu$Menu: _componentThemes_Menu$Menu,
56
58
  Progress$Progress: _componentThemes_Progress$Progress,
57
59
  RadioGroup$RadioGroup: _componentThemes_RadioGroup$RadioGroup,
58
60
  Rating$Rating: _componentThemes_Rating$Rating,
package/esm/hooks/index.js CHANGED
@@ -1 +1,2 @@
1
- export * from './usePortal';
1
+ export * from './usePortal';
2
+ export * from './useKeyPress';
package/esm/hooks/useKeyPress.js ADDED
@@ -0,0 +1,32 @@
1
+ import { useEffect, useState } from 'react';
2
+ export var useKeyPress = function useKeyPress(targetKey) {
3
+ var _useState = useState(false),
4
+ keyPressed = _useState[0],
5
+ setKeyPressed = _useState[1];
6
+
7
+ useEffect(function () {
8
+ function downHandler(_ref) {
9
+ var key = _ref.key;
10
+
11
+ if (key === targetKey) {
12
+ setKeyPressed(true);
13
+ }
14
+ }
15
+
16
+ function upHandler(_ref2) {
17
+ var key = _ref2.key;
18
+
19
+ if (key === targetKey) {
20
+ setKeyPressed(false);
21
+ }
22
+ }
23
+
24
+ window.addEventListener('keydown', downHandler);
25
+ window.addEventListener('keyup', upHandler);
26
+ return function () {
27
+ window.removeEventListener('keydown', downHandler);
28
+ window.removeEventListener('keyup', upHandler);
29
+ };
30
+ }, [targetKey]);
31
+ return keyPressed;
32
+ };
package/esm/index.js CHANGED
@@ -24,7 +24,8 @@ import BottomSheet from './BottomSheet';
24
24
  import Dialog from './Dialog';
25
25
  import Divider from './Divider';
26
26
  import Header from './Header';
27
+ import Menu from './Menu';
27
28
  import Banner from './Banner';
28
29
  import Heading from './Heading';
29
30
  import Feedback from './Feedback';
30
- export { ThemeProvider, FontLoader, createTheme, yogaTheme, theme, Button, List, Checkbox, RadioGroup, Slider, Card, PlanCard, Stepper, Container, Row, Col, Hide, Text, Rating, EventCard, Tag, Input, Progress, Dropdown, TextArea, AutoComplete, Icon, Chips, Box, Snackbar, Avatar, BottomSheet, Dialog, Divider, Header, Banner, Heading, Feedback };
31
+ export { ThemeProvider, FontLoader, createTheme, yogaTheme, theme, Button, List, Checkbox, RadioGroup, Slider, Card, PlanCard, Stepper, Container, Row, Col, Hide, Text, Rating, EventCard, Tag, Input, Progress, Dropdown, TextArea, AutoComplete, Icon, Chips, Box, Snackbar, Avatar, BottomSheet, Dialog, Divider, Header, Menu, Banner, Heading, Feedback };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gympass/yoga",
3
- "version": "7.40.4",
3
+ "version": "7.41.0",
4
4
  "description": "Gympass component library",
5
5
  "main": "./cjs",
6
6
  "sideEffects": false,
@@ -31,6 +31,7 @@
31
31
  "@gympass/yoga-system": "^0.10.2",
32
32
  "@gympass/yoga-tokens": "^3.1.4",
33
33
  "@ptomasroos/react-native-multi-slider": "^1.0.0",
34
+ "@radix-ui/react-dropdown-menu": "^0.1.6",
34
35
  "downshift": "^5.0.0",
35
36
  "lodash.get": "^4.4.2",
36
37
  "prop-types": "^15.7.2",
@@ -49,7 +50,7 @@
49
50
  "react": ">=16",
50
51
  "styled-components": "^4.4.0"
51
52
  },
52
- "gitHead": "2ac313a4ddcf937f469f71a0b771f65877831866",
53
+ "gitHead": "f55cf489067ae134514499080def584244ad04c0",
53
54
  "module": "./esm",
54
55
  "private": false,
55
56
  "react-native": "./cjs/index.native.js"