@gympass/yoga 7.73.1 → 7.75.0

package/cjs/BottomSheet/web/BottomSheet.js

@@ -24,11 +24,13 @@ var StyledBottomSheet = (0, _styledComponents["default"])(_Dialog["default"])(_t
   return "\n  padding: " + bottomsheet.padding.top + "px " + bottomsheet.padding.right + "px " + bottomsheet.padding.bottom + "px " + bottomsheet.padding.left + "px;\n  width: " + bottomsheet.width["default"] + "%;\n  border-radius: " + bottomsheet.border.radius + "px " + bottomsheet.border.radius + "px 0 0;\n  ";
 });
 
-var BottomSheet = function BottomSheet(props) {
+var BottomSheet = /*#__PURE__*/_react["default"].forwardRef(function (props, forwardedRef) {
   return /*#__PURE__*/_react["default"].createElement(StyledBottomSheet, _extends({
     hideCloseButton: true
-  }, props));
-};
+  }, props, {
+    ref: forwardedRef
+  }));
+});
 
 BottomSheet.propTypes = {
   children: _propTypes.node.isRequired

package/cjs/Dialog/web/Dialog.js

@@ -17,7 +17,7 @@ var _hooks = require("../../hooks");
 
 var _ = require("../..");
 
-var _excluded = ["isOpen", "hideCloseButton", "children", "onClose", "zIndex"];
+var _excluded = ["isOpen", "hideCloseButton", "children", "dialogId", "onClose", "zIndex"];
 
 var _templateObject, _templateObject2;
 
@@ -46,16 +46,17 @@ var Overlay = _styledComponents["default"].div(_templateObject2 || (_templateObj
   return "\n  display: flex;\n  z-index: " + zIndex + ";\n  justify-content: center;\n  align-items: center;\n\n  position: fixed;\n  top: " + dialog.position["default"] + ";\n  right: " + dialog.position["default"] + ";\n  left: " + dialog.position["default"] + ";\n  bottom: " + dialog.position["default"] + ";\n\n  background-color: rgba(35, 27, 34, 0.48);\n  ";
 });
 
-function Dialog(_ref3) {
+var Dialog = /*#__PURE__*/_react["default"].forwardRef(function (_ref3, forwardedRef) {
   var isOpen = _ref3.isOpen,
       hideCloseButton = _ref3.hideCloseButton,
       children = _ref3.children,
+      dialogId = _ref3.dialogId,
       onClose = _ref3.onClose,
       zIndex = _ref3.zIndex,
       props = _objectWithoutPropertiesLoose(_ref3, _excluded);
 
-  var dialogRef = (0, _react.useRef)(null);
-  var dialogElement = (0, _hooks.usePortal)('dialog');
+  var dialogRef = (0, _hooks.useCombinedRefs)(forwardedRef);
+  var dialogElement = (0, _hooks.usePortal)(dialogId != null ? dialogId : 'dialog');
   var isCloseButtonVisible = onClose && !hideCloseButton;
   var closeDialog = (0, _react.useCallback)(function (e) {
     if (dialogRef.current === e.target && isOpen && onClose) {
@@ -93,9 +94,12 @@ function Dialog(_ref3) {
     inverted: true,
     onClick: onClose
   })), children)), dialogElement) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null);
-}
+});
 
 Dialog.propTypes = {
+  /** Custom id to allow creating isolated portal nodes */
+  dialogId: _propTypes.string,
+
   /** Control the dialog visibility. */
   isOpen: _propTypes.bool,
 
@@ -111,7 +115,8 @@ Dialog.defaultProps = {
   isOpen: false,
   hideCloseButton: false,
   onClose: undefined,
-  zIndex: 3
+  zIndex: 3,
+  dialogId: undefined
 };
 Dialog.displayName = 'Dialog';
 var _default = Dialog;

package/cjs/Drawer/web/Drawer.js

@@ -15,6 +15,8 @@ var _templateObject;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+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 _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
 
 var StyledDrawer = (0, _styledComponents["default"])(_Dialog["default"])(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n  border-radius: 0!important;\n  height: 100%;\n  align-self: flex-end;\n  position: absolute;\n  right: 0;\n  animation: content;\n  animation-duration: 400ms;\n  animation-fill-mode: forwards;\n  transition: 0.25s ease-in-out;\n  @keyframes content {\n    0% {\n      transform: translate3d(100%, 0, 0);\n    }\n  }\n"])), function (_ref) {
@@ -22,9 +24,11 @@ var StyledDrawer = (0, _styledComponents["default"])(_Dialog["default"])(_templa
   return "\n  padding: " + drawer.padding.top + "px " + drawer.padding.right + "px " + drawer.padding.bottom + "px " + drawer.padding.left + "px;\n  width: min(" + drawer.width["default"] + "px, 100%);\n  ";
 });
 
-function Drawer(props) {
-  return /*#__PURE__*/_react["default"].createElement(StyledDrawer, props);
-}
+var Drawer = /*#__PURE__*/_react["default"].forwardRef(function (props, forwardedRef) {
+  return /*#__PURE__*/_react["default"].createElement(StyledDrawer, _extends({}, props, {
+    ref: forwardedRef
+  }));
+});
 
 Drawer.propTypes = {
   children: _propTypes.node.isRequired,

package/esm/BottomSheet/web/BottomSheet.js

@@ -12,13 +12,13 @@ var StyledBottomSheet = styled(Dialog)(_templateObject || (_templateObject = _ta
   var bottomsheet = _ref.theme.yoga.components.bottomsheet;
   return "\n  padding: " + bottomsheet.padding.top + "px " + bottomsheet.padding.right + "px " + bottomsheet.padding.bottom + "px " + bottomsheet.padding.left + "px;\n  width: " + bottomsheet.width["default"] + "%;\n  border-radius: " + bottomsheet.border.radius + "px " + bottomsheet.border.radius + "px 0 0;\n  ";
 });
-
-var BottomSheet = function BottomSheet(props) {
+var BottomSheet = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
   return /*#__PURE__*/React.createElement(StyledBottomSheet, _extends({
     hideCloseButton: true
-  }, props));
-};
-
+  }, props, {
+    ref: forwardedRef
+  }));
+});
 BottomSheet.propTypes = {
   children: node.isRequired
 };

package/esm/Dialog/web/Dialog.js

@@ -1,4 +1,4 @@
-var _excluded = ["isOpen", "hideCloseButton", "children", "onClose", "zIndex"];
+var _excluded = ["isOpen", "hideCloseButton", "children", "dialogId", "onClose", "zIndex"];
 
 var _templateObject, _templateObject2;
 
@@ -8,12 +8,12 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
 
-import React, { useEffect, useRef, useCallback } from 'react';
+import React, { useEffect, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import styled from 'styled-components';
-import { func, bool, node, number } from 'prop-types';
+import { func, bool, node, number, string } from 'prop-types';
 import { Close } from '@gympass/yoga-icons';
-import { usePortal } from '../../hooks';
+import { usePortal, useCombinedRefs } from '../../hooks';
 import { Button, Card, Box } from '../..';
 export var StyledDialog = styled(Card)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n"])), function (_ref) {
   var onClose = _ref.onClose,
@@ -25,17 +25,17 @@ var Overlay = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplate
       dialog = _ref2.theme.yoga.components.dialog;
   return "\n  display: flex;\n  z-index: " + zIndex + ";\n  justify-content: center;\n  align-items: center;\n\n  position: fixed;\n  top: " + dialog.position["default"] + ";\n  right: " + dialog.position["default"] + ";\n  left: " + dialog.position["default"] + ";\n  bottom: " + dialog.position["default"] + ";\n\n  background-color: rgba(35, 27, 34, 0.48);\n  ";
 });
-
-function Dialog(_ref3) {
+var Dialog = /*#__PURE__*/React.forwardRef(function (_ref3, forwardedRef) {
   var isOpen = _ref3.isOpen,
       hideCloseButton = _ref3.hideCloseButton,
       children = _ref3.children,
+      dialogId = _ref3.dialogId,
       onClose = _ref3.onClose,
       zIndex = _ref3.zIndex,
       props = _objectWithoutPropertiesLoose(_ref3, _excluded);
 
-  var dialogRef = useRef(null);
-  var dialogElement = usePortal('dialog');
+  var dialogRef = useCombinedRefs(forwardedRef);
+  var dialogElement = usePortal(dialogId != null ? dialogId : 'dialog');
   var isCloseButtonVisible = onClose && !hideCloseButton;
   var closeDialog = useCallback(function (e) {
     if (dialogRef.current === e.target && isOpen && onClose) {
@@ -73,9 +73,11 @@ function Dialog(_ref3) {
     inverted: true,
     onClick: onClose
   })), children)), dialogElement) : /*#__PURE__*/React.createElement(React.Fragment, null);
-}
-
+});
 Dialog.propTypes = {
+  /** Custom id to allow creating isolated portal nodes */
+  dialogId: string,
+
   /** Control the dialog visibility. */
   isOpen: bool,
 
@@ -91,7 +93,8 @@ Dialog.defaultProps = {
   isOpen: false,
   hideCloseButton: false,
   onClose: undefined,
-  zIndex: 3
+  zIndex: 3,
+  dialogId: undefined
 };
 Dialog.displayName = 'Dialog';
 export default Dialog;

package/esm/Dialog/web/Dialog.test.js

@@ -59,4 +59,14 @@ describe('<Dialog />', function () {
     }, /*#__PURE__*/React.createElement(Dialog.Header, null, "Title"))));
     expect(screen.queryByRole('button')).toBeNull();
   });
+  it('should render content isolated by dialog id', function () {
+    render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Dialog, {
+      isOpen: true
+    }, /*#__PURE__*/React.createElement(Dialog.Header, null, "Title")), /*#__PURE__*/React.createElement(Dialog, {
+      isOpen: true,
+      dialogId: "custom-id"
+    }, /*#__PURE__*/React.createElement(Dialog.Header, null, "Second Title"))));
+    expect(screen.getByText('Title')).toBeInTheDocument();
+    expect(screen.getByText('Second Title')).toBeInTheDocument();
+  });
 });

package/esm/Drawer/web/Drawer.js

@@ -1,5 +1,7 @@
 var _templateObject;
 
+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 _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
 
 import React from 'react';
@@ -10,11 +12,11 @@ var StyledDrawer = styled(Dialog)(_templateObject || (_templateObject = _taggedT
   var drawer = _ref.theme.yoga.components.drawer;
   return "\n  padding: " + drawer.padding.top + "px " + drawer.padding.right + "px " + drawer.padding.bottom + "px " + drawer.padding.left + "px;\n  width: min(" + drawer.width["default"] + "px, 100%);\n  ";
 });
-
-function Drawer(props) {
-  return /*#__PURE__*/React.createElement(StyledDrawer, props);
-}
-
+var Drawer = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
+  return /*#__PURE__*/React.createElement(StyledDrawer, _extends({}, props, {
+    ref: forwardedRef
+  }));
+});
 Drawer.propTypes = {
   children: node.isRequired,
   zIndex: number

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.73.1",
+  "version": "7.75.0",
   "description": "Gympass component library",
   "main": "./cjs",
   "sideEffects": false,
@@ -53,7 +53,7 @@
     "react": ">=16",
     "styled-components": "^4.4.0"
   },
-  "gitHead": "a3dd6190c1e10982f2c9f680eadce5e6544bb632",
+  "gitHead": "3021170197063b0bf7effd70fcd62c544361a132",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"