@planningcenter/tapestry-react 2.6.0-rc.0 → 2.6.0-rc.1

package/dist/cjs/Portal/Portal.js

@@ -19,6 +19,10 @@ var React = _interopRequireWildcard(require("react"));
 
 var _reactDom = require("react-dom");
 
+var _styles = require("../ThemeProvider/styles");
+
+var _react2 = require("@emotion/react");
+
 /** Accepts any additional HTML attributes. */
 var Portal = /*#__PURE__*/function (_React$Component) {
   (0, _inheritsLoose2["default"])(Portal, _React$Component);
@@ -31,6 +35,7 @@ var Portal = /*#__PURE__*/function (_React$Component) {
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "context", void 0);
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_portalNode", null);
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_needsUpdate", false);
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_updated", false);
@@ -125,6 +130,8 @@ var Portal = /*#__PURE__*/function (_React$Component) {
       _this2._portalNode.setAttribute(key, restProps[key]);
     });
 
+    this._portalNode.setAttribute((0, _styles.getThemeDataAttribute)(this.context.id), 'true');
+
     if (style) {
       Object.keys(style).forEach(function (key) {
         _this2._portalNode.style[key] = style[key];
@@ -163,4 +170,5 @@ exports.Portal = Portal;
 (0, _defineProperty2["default"])(Portal, "defaultProps", {
   renderTag: 'div',
   renderTo: null
-});
+});
+(0, _defineProperty2["default"])(Portal, "contextType", _react2.ThemeContext);

package/dist/esm/Portal/Portal.js

@@ -4,6 +4,8 @@ import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import * as React from 'react';
 import { createPortal } from 'react-dom';
+import { getThemeDataAttribute } from '../ThemeProvider/styles';
+import { ThemeContext } from '@emotion/react';
 
 /** Accepts any additional HTML attributes. */
 var Portal = /*#__PURE__*/function (_React$Component) {
@@ -18,6 +20,8 @@ var Portal = /*#__PURE__*/function (_React$Component) {
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
 
+    _defineProperty(_assertThisInitialized(_this), "context", void 0);
+
     _defineProperty(_assertThisInitialized(_this), "_portalNode", null);
 
     _defineProperty(_assertThisInitialized(_this), "_needsUpdate", false);
@@ -116,6 +120,8 @@ var Portal = /*#__PURE__*/function (_React$Component) {
       _this2._portalNode.setAttribute(key, restProps[key]);
     });
 
+    this._portalNode.setAttribute(getThemeDataAttribute(this.context.id), 'true');
+
     if (style) {
       Object.keys(style).forEach(function (key) {
         _this2._portalNode.style[key] = style[key];
@@ -155,4 +161,6 @@ _defineProperty(Portal, "defaultProps", {
   renderTo: null
 });
 
+_defineProperty(Portal, "contextType", ThemeContext);
+
 export { Portal };

package/dist/types/Portal/Portal.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Theme } from '../index';
 export declare type PortalProps = {
     children: any;
     /** Styles to apply to the portal root element. */
@@ -18,6 +19,8 @@ declare class Portal extends React.Component<PortalProps> {
         renderTag: string;
         renderTo: any;
     };
+    static contextType: import("react").Context<object>;
+    context: React.ContextType<React.Context<Theme>>;
     _portalNode: HTMLElement;
     _needsUpdate: boolean;
     _updated: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-react",
-  "version": "2.6.0-rc.0",
+  "version": "2.6.0-rc.1",
   "description": "A collection of flexible React components to help you build resilient, accessible user interfaces quickly and effectively.",
   "author": "Front End Systems Engineering <frontend@pco.bz>",
   "main": "dist/cjs/index.js",

package/src/Portal/Portal.tsx

@@ -1,5 +1,8 @@
 import * as React from 'react'
 import { createPortal } from 'react-dom'
+import { getThemeDataAttribute } from '../ThemeProvider/styles'
+import { ThemeContext } from '@emotion/react'
+import { Theme } from '../index'
 
 export type PortalProps = {
   children: any
@@ -27,6 +30,9 @@ class Portal extends React.Component<PortalProps> {
     renderTo: null,
   }
 
+  static contextType = ThemeContext
+  context: React.ContextType<React.Context<Theme>>
+
   _portalNode: HTMLElement = null
   _needsUpdate = false
   _updated = false
@@ -105,6 +111,11 @@ class Portal extends React.Component<PortalProps> {
     Object.keys(restProps).forEach((key) => {
       this._portalNode.setAttribute(key, restProps[key])
     })
+    this._portalNode.setAttribute(
+      getThemeDataAttribute(this.context.id),
+      'true'
+    )
+
     if (style) {
       Object.keys(style).forEach((key) => {
         this._portalNode.style[key] = style[key]