@gympass/yoga 7.73.1 → 7.74.0

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/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/package.json

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