@gympass/yoga 7.79.0 → 7.79.1

package/cjs/Popover/web/Popover.js

@@ -9,9 +9,11 @@ var _propTypes = require("prop-types");
 
 var _yoga = require("@gympass/yoga");
 
+var _hooks = require("../../hooks");
+
 var _styles = require("./styles");
 
-var _excluded = ["children", "title", "description", "position", "width", "height", "zIndex", "a11yId"];
+var _excluded = ["children", "title", "description", "position", "width", "height", "zIndex", "a11yId", "hover"];
 
 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,7 +23,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 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; }
 
-function Popover(_ref) {
+var Popover = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardedRef) {
   var children = _ref.children,
       title = _ref.title,
       description = _ref.description,
@@ -30,12 +32,28 @@ function Popover(_ref) {
       height = _ref.height,
       zIndex = _ref.zIndex,
       a11yId = _ref.a11yId,
+      hover = _ref.hover,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
+  var ref = (0, _hooks.useCombinedRefs)(forwardedRef);
+
   var _useState = (0, _react.useState)(false),
       isPopoverOpen = _useState[0],
       setIsPopoverOpen = _useState[1];
 
+  (0, _react.useEffect)(function () {
+    var handleClickOutside = function handleClickOutside(event) {
+      if (ref.current && !ref.current.contains(event.target)) {
+        setIsPopoverOpen(false);
+      }
+    };
+
+    document.addEventListener('click', handleClickOutside, true);
+    return function () {
+      document.removeEventListener('click', handleClickOutside, true);
+    };
+  }, [setIsPopoverOpen]);
+
   var handleShowPopover = function handleShowPopover() {
     setIsPopoverOpen(true);
   };
@@ -44,6 +62,13 @@ function Popover(_ref) {
     setIsPopoverOpen(false);
   };
 
+  var toggleOpenPopover = function toggleOpenPopover(event) {
+    event.preventDefault();
+    setIsPopoverOpen(function (current) {
+      return !current;
+    });
+  };
+
   return /*#__PURE__*/_react["default"].createElement(_styles.Wrapper, props, isPopoverOpen && /*#__PURE__*/_react["default"].createElement(_styles.PopoverContainer, _extends({}, a11yId && {
     id: a11yId
   }, {
@@ -62,22 +87,14 @@ function Popover(_ref) {
   }, description)), /*#__PURE__*/_react["default"].createElement(_styles.PopoverButton, _extends({}, a11yId && {
     'aria-describedby': a11yId
   }, {
-    onMouseEnter: handleShowPopover,
-    onMouseLeave: handleHidePopover,
-    onTouchStart: handleShowPopover,
-    onTouchEnd: handleHidePopover,
-    onClick: function onClick(event) {
+    ref: ref,
+    onMouseEnter: hover ? handleShowPopover : undefined,
+    onMouseLeave: hover ? handleHidePopover : undefined,
+    onClick: !hover ? toggleOpenPopover : function (event) {
       return event.preventDefault();
-    },
-    onKeyDown: function onKeyDown(event) {
-      if (event.key === 'Enter') {
-        setIsPopoverOpen(function (current) {
-          return !current;
-        });
-      }
     }
   }), children));
-}
+});
 
 Popover.propTypes = {
   a11yId: _propTypes.string,
@@ -89,7 +106,8 @@ Popover.propTypes = {
   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']),
   width: _propTypes.number,
   height: _propTypes.number,
-  zIndex: _propTypes.number
+  zIndex: _propTypes.number,
+  hover: _propTypes.bool
 };
 Popover.defaultProps = {
   a11yId: undefined,
@@ -97,7 +115,8 @@ Popover.defaultProps = {
   position: 'bottom-center',
   width: 265,
   height: 200,
-  zIndex: 1
+  zIndex: 1,
+  hover: false
 };
 var _default = Popover;
 exports["default"] = _default;

package/esm/Popover/web/Popover.js

@@ -1,15 +1,15 @@
-var _excluded = ["children", "title", "description", "position", "width", "height", "zIndex", "a11yId"];
+var _excluded = ["children", "title", "description", "position", "width", "height", "zIndex", "a11yId", "hover"];
 
 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); }
 
 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; }
 
-import React, { useState } from 'react';
-import { node, number, oneOf, string } from 'prop-types';
+import React, { useState, useEffect } from 'react';
+import { bool, node, number, oneOf, string } from 'prop-types';
 import { Text } from '@gympass/yoga';
+import { useCombinedRefs } from '../../hooks';
 import { PopoverContainer, PopoverButton, Wrapper } from './styles';
-
-function Popover(_ref) {
+var Popover = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   var children = _ref.children,
       title = _ref.title,
       description = _ref.description,
@@ -18,12 +18,28 @@ function Popover(_ref) {
       height = _ref.height,
       zIndex = _ref.zIndex,
       a11yId = _ref.a11yId,
+      hover = _ref.hover,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
+  var ref = useCombinedRefs(forwardedRef);
+
   var _useState = useState(false),
       isPopoverOpen = _useState[0],
       setIsPopoverOpen = _useState[1];
 
+  useEffect(function () {
+    var handleClickOutside = function handleClickOutside(event) {
+      if (ref.current && !ref.current.contains(event.target)) {
+        setIsPopoverOpen(false);
+      }
+    };
+
+    document.addEventListener('click', handleClickOutside, true);
+    return function () {
+      document.removeEventListener('click', handleClickOutside, true);
+    };
+  }, [setIsPopoverOpen]);
+
   var handleShowPopover = function handleShowPopover() {
     setIsPopoverOpen(true);
   };
@@ -32,6 +48,13 @@ function Popover(_ref) {
     setIsPopoverOpen(false);
   };
 
+  var toggleOpenPopover = function toggleOpenPopover(event) {
+    event.preventDefault();
+    setIsPopoverOpen(function (current) {
+      return !current;
+    });
+  };
+
   return /*#__PURE__*/React.createElement(Wrapper, props, isPopoverOpen && /*#__PURE__*/React.createElement(PopoverContainer, _extends({}, a11yId && {
     id: a11yId
   }, {
@@ -50,23 +73,14 @@ function Popover(_ref) {
   }, description)), /*#__PURE__*/React.createElement(PopoverButton, _extends({}, a11yId && {
     'aria-describedby': a11yId
   }, {
-    onMouseEnter: handleShowPopover,
-    onMouseLeave: handleHidePopover,
-    onTouchStart: handleShowPopover,
-    onTouchEnd: handleHidePopover,
-    onClick: function onClick(event) {
+    ref: ref,
+    onMouseEnter: hover ? handleShowPopover : undefined,
+    onMouseLeave: hover ? handleHidePopover : undefined,
+    onClick: !hover ? toggleOpenPopover : function (event) {
       return event.preventDefault();
-    },
-    onKeyDown: function onKeyDown(event) {
-      if (event.key === 'Enter') {
-        setIsPopoverOpen(function (current) {
-          return !current;
-        });
-      }
     }
   }), children));
-}
-
+});
 Popover.propTypes = {
   a11yId: string,
   children: node.isRequired,
@@ -77,7 +91,8 @@ Popover.propTypes = {
   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']),
   width: number,
   height: number,
-  zIndex: number
+  zIndex: number,
+  hover: bool
 };
 Popover.defaultProps = {
   a11yId: undefined,
@@ -85,6 +100,7 @@ Popover.defaultProps = {
   position: 'bottom-center',
   width: 265,
   height: 200,
-  zIndex: 1
+  zIndex: 1,
+  hover: false
 };
 export default Popover;

package/esm/Popover/web/Popover.test.js

@@ -1,19 +1,39 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 import { Info } from '@gympass/yoga-icons';
 import { ThemeProvider, Popover } from '../..';
 describe('<Popover />', function () {
-  it('should match snapshot', function () {
+  it('should match snapshot when hover is false', function () {
     var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Popover, {
       title: "Making wellbeing universal",
-      description: "Try moving to another spot. Your new favorite activity could be arround the corner.",
+      description: "Try click on the button. Your new favorite activity could be arround the corner.",
       width: 265
     }, /*#__PURE__*/React.createElement(Info, {
       width: 26,
       height: 26
     })))),
-        container = _render.container;
+        container = _render.container,
+        getByRole = _render.getByRole;
+
+    var popoverButton = getByRole('button');
+    fireEvent.click(popoverButton);
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot when hover is true', function () {
+    var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Popover, {
+      title: "Making wellbeing universal",
+      description: "Try moving to another spot. Your new favorite activity could be arround the corner.",
+      width: 265,
+      hover: true
+    }, /*#__PURE__*/React.createElement(Info, {
+      width: 26,
+      height: 26
+    })))),
+        container = _render2.container,
+        getByRole = _render2.getByRole;
 
+    var popoverButton = getByRole('button');
+    fireEvent.mouseOver(popoverButton);
     expect(container).toMatchSnapshot();
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.79.0",
+  "version": "7.79.1",
   "description": "Gympass component library",
   "main": "./cjs",
   "sideEffects": false,
@@ -55,7 +55,7 @@
     "react-native": "0.72.3",
     "styled-components": "^4.4.0"
   },
-  "gitHead": "37d07a5f38b80bc2623d8a50af6ad59a6e070dce",
+  "gitHead": "bc63a12251de39e078526250b7971ad3fc1548a0",
   "module": "./esm",
   "types": "./typings/index.d.ts",
   "private": false,