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

package/dist/cjs/DataTable/DataTable.js

@@ -205,7 +205,7 @@ var DataTable = function DataTable(props) {
     style: isLoadingOrEmpty ? {
       display: 'none'
     } : undefined,
-    className: "tapestry-react-reset " + css({
+    className: css({
       position: 'relative'
     })
   }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -226,7 +226,7 @@ var DataTable = function DataTable(props) {
       column: column,
       columnIndex: columnIndex,
       columnSort: columnSort,
-      className: "tapestry-react-reset " + css([].concat(cellVariantClassName, [column.css]))
+      className: css([].concat(cellVariantClassName, [column.css]))
     });
   }))), bodyToRender, hasFooterColumns && /*#__PURE__*/_react["default"].createElement("div", {
     ref: footerRef,
@@ -244,7 +244,7 @@ var DataTable = function DataTable(props) {
       key: columnIndex,
       role: "cell",
       ref: getColumnRef(columnIndex + "." + (data.length + 1)),
-      className: "tapestry-react-reset " + css([].concat(cellVariantClassName, [column.css]))
+      className: css([].concat(cellVariantClassName, [column.css]))
     }, typeof column.footer === 'string' || /*#__PURE__*/_react["default"].isValidElement(column.footer) ? column.footer : column.footer ? /*#__PURE__*/_react["default"].createElement(column.footer, {
       columnIndex: columnIndex
     }) : null);

package/dist/cjs/DataTable/components/BodyRows.js

@@ -57,7 +57,7 @@ function BodyRows(_ref) {
           ref: getColumnRef(columnIndex + "." + (rowIndex + 1)) // offset by 1 to account for header row
           ,
           role: "cell",
-          className: "tapestry-react-reset " + css([].concat(cellVariantStyles, [column.css]))
+          className: css([].concat(cellVariantStyles, [column.css]))
         }, (0, _utils.getCell)(column.cell, {
           columnIndex: columnIndex,
           rowData: rowData,
@@ -83,7 +83,7 @@ function BodyRows(_ref) {
       rowIndex: rowIndex,
       keyboardShortcuts: keyboardShortcuts,
       onRowClick: onRowClick,
-      className: "tapestry-react-reset " + css(rowVariantClassName)
+      className: css(rowVariantClassName)
     }, (0, _utils.getRowLinkProps)({
       getRowLink: getRowLink,
       data: rowData,

package/dist/cjs/DataTable/components/BodySubRows.js

@@ -71,7 +71,7 @@ var BodySubRows = function BodySubRows(_ref2) {
       rowIndex: rowIndex,
       keyboardShortcuts: keyboardShortcuts,
       onRowClick: onRowClick,
-      className: "tapestry-react-reset " + css(rowVariantClassName)
+      className: css(rowVariantClassName)
     }, (0, _utils.getRowLinkProps)({
       getRowLink: getRowLink,
       data: rowData,
@@ -90,7 +90,7 @@ var BodySubRows = function BodySubRows(_ref2) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         key: columnIndex,
         ref: getColumnRef(columnIndex + "." + (parentRowIndex + 1) + "." + rowIndex),
-        className: "tapestry-react-reset " + css([].concat(cellVariantClassName, [column.css]))
+        className: css([].concat(cellVariantClassName, [column.css]))
       }, (0, _utils.getCell)(column.subCell !== undefined ? column.subCell : column.cell, {
         columnIndex: columnIndex,
         rowData: rowData,

package/dist/cjs/DataTable/components/CheckboxCell.js

@@ -96,19 +96,19 @@ function CheckboxCell(_ref) {
     onKeyDown: function onKeyDown(event) {
       return event.key === ' ' && handleChange(event);
     },
-    className: "tapestry-react-reset tapestry-react-Checkbox",
+    className: "tapestry-react-Checkbox",
     css: cssStyles
   }, /*#__PURE__*/_react["default"].createElement(_Icon["default"].Path, {
     name: iconPaths.fill,
-    className: "tapestry-react-reset tapestry-react-Checkbox-Fill",
+    className: "tapestry-react-Checkbox-Fill",
     fill: checked || indeterminate ? 'primary' : 'surfaceTertiary',
     stroke: checked || indeterminate ? 'primary' : 'separatorSecondary'
   }), /*#__PURE__*/_react["default"].createElement(_Icon["default"].Path, {
     name: iconPaths.minus,
-    className: "tapestry-react-reset tapestry-react-Checkbox-Minus"
+    className: "tapestry-react-Checkbox-Minus"
   }), /*#__PURE__*/_react["default"].createElement(_Icon["default"].Path, {
     name: iconPaths.checked,
-    className: "tapestry-react-reset tapestry-react-Checkbox-Checked"
+    className: "tapestry-react-Checkbox-Checked"
   }));
 }
 

package/dist/cjs/DataTable/components/Icon.js

@@ -45,7 +45,7 @@ function Icon(_ref) {
     width: iconSize,
     height: iconSize,
     fill: themeColor,
-    className: "tapestry-react-reset",
+    className: "tapestry-react-Icon-Svg",
     children: childrenToRender
   }, props));
 }

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/cjs/ThemeProvider/styles.js

@@ -35,7 +35,7 @@ var setRootStyles = function setRootStyles(themeId, styles) {
 exports.setRootStyles = setRootStyles;
 var defaultColorProperties = (0, _utils.objectToCSSProperties)('colors', (0, _system.flattenPalette)(_system.defaultTheme.colors));
 exports.defaultColorProperties = defaultColorProperties;
-var styleReset = ("\n" + getRootStyles(null, defaultColorProperties) + "\n\n.tapestry-react-reset {\n  appearance: none;\n  box-sizing: border-box;\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n  font-weight: 400;\n  text-decoration: none;\n  flex: 0 0 auto;\n  min-width: 0px;\n  min-height: 0px;\n  padding: 0px;\n  margin: 0px;\n  border: 0px solid transparent;\n  background-color: transparent;\n  color: inherit;\n}\n\n.tapestry-react-reset::-moz-focus-inner {\n  padding: 0px;\n  border: 0px;\n}\n\n.tapestry-react-reset:focus:not(.focus-visible) {\n  outline: 0px;\n}\n" // minify string
+var styleReset = ("\n" + getRootStyles(null, defaultColorProperties) + "\n\n[class^=\"tapestry-react\"] {\n  appearance: none;\n  border-width: 0px;\n  border-style: solid;\n  border-color: transparent;\n  box-sizing: border-box;\n  color: inherit;\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n  flex-grow: 0;\n  flex-shrink: 0;\n  flex-basis: auto;\n  font-weight: 400;\n  margin: 0px;\n  min-height: 0px;\n  min-width: 0px;\n  padding: 0px;\n  text-decoration: none;\n}\n\n[class^=\"tapestry-react\"]::-moz-focus-inner {\n  border: none;\n  padding: 0px;\n}\n\n[class^=\"tapestry-react\"]:focus:not(.focus-visible) {\n  outline: 0px;\n}\n" // minify string
 ).replace(/\n/g, '').replace(/\s\s+/g, ' '); // we use our own global style implementation in place of Emotion Global
 // so we can have more control over when styles are injected since multiple
 // Providers can be used on a page
@@ -43,9 +43,6 @@ var styleReset = ("\n" + getRootStyles(null, defaultColorProperties) + "\n\n.tap
 exports.styleReset = styleReset;
 
 function ensureStyleElement(themeId) {
-  // we use our own global style implementation in place of Emotion Global
-  // so we can have more control over when styles are injected since multiple
-  // Providers can be used on a page
   if (typeof window !== 'undefined' && !document.getElementById("tapestry-react-style-" + themeId)) {
     var styleElement = document.createElement('style');
     styleElement.id = "tapestry-react-style-" + themeId;

package/dist/cjs/Tooltip/Tooltip.js

@@ -60,8 +60,8 @@ function Tooltip(props, ref) {
   var isPageInView = true;
   var isFocused = false;
   var isMouseDown = false;
-  var openTimeoutId = null;
-  var closeTimeoutId = null; // prevents tooltips showing when focused and navigating back to a page after leaving
+  var openTimeoutId = (0, _react.useRef)(null);
+  var closeTimeoutId = (0, _react.useRef)(null); // prevents tooltips showing when focused and navigating back to a page after leaving
 
   var cleanupPageViewChange = (0, _react.useCallback)((0, _utils.pageViewChange)(function (inView) {
     return setTimeout(function () {
@@ -77,21 +77,21 @@ function Tooltip(props, ref) {
     emitter.on('CLOSE_OPEN_TOOLTIPS', close);
     return function () {
       emitter.off('CLOSE_OPEN_TOOLTIPS', close);
-      clearTimeout(openTimeoutId);
-      clearTimeout(closeTimeoutId);
+      clearTimeout(openTimeoutId.current);
+      clearTimeout(closeTimeoutId.current);
       cleanupPageViewChange();
     };
   }, []);
 
   var open = function open() {
-    clearTimeout(closeTimeoutId);
-    closeTimeoutId = null;
+    clearTimeout(closeTimeoutId.current);
+    closeTimeoutId.current = null;
     setIsPopoverOpen(true);
   };
 
   var close = function close() {
-    clearTimeout(openTimeoutId);
-    openTimeoutId = null;
+    clearTimeout(openTimeoutId.current);
+    openTimeoutId.current = null;
     setIsPopoverOpen(false);
   };
 
@@ -119,13 +119,13 @@ function Tooltip(props, ref) {
   var createOpenTimeout = (0, _react.useCallback)(function () {
     clearGlobalTimeout();
 
-    if (openTimeoutId === null) {
-      clearTimeout(closeTimeoutId);
-      closeTimeoutId = null;
+    if (openTimeoutId.current === null) {
+      clearTimeout(closeTimeoutId.current);
+      closeTimeoutId.current = null;
 
       if (isPopoverOpen === false) {
         emitter.emit('CLOSE_OPEN_TOOLTIPS');
-        openTimeoutId = setTimeout(function () {
+        openTimeoutId.current = setTimeout(function () {
           return open();
         }, instantDelay ? 0 : openDelay);
       }
@@ -134,11 +134,11 @@ function Tooltip(props, ref) {
   var createCloseTimeout = (0, _react.useCallback)(function () {
     startGlobalTimeout();
 
-    if (closeTimeoutId === null) {
-      clearTimeout(openTimeoutId);
-      openTimeoutId = null;
-      closeTimeoutId = setTimeout(function () {
-        close();
+    if (closeTimeoutId.current === null) {
+      clearTimeout(openTimeoutId.current);
+      openTimeoutId.current = null;
+      closeTimeoutId.current = setTimeout(function () {
+        return close();
       }, closeDelay);
     }
   });

package/dist/cjs/system/split-styles.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = _default;
+exports["default"] = SplitStyles;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -17,7 +17,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function _default(_ref) {
+function SplitStyles(_ref) {
   var className = _ref.className,
       _ref$mediaQueries = _ref.mediaQueries,
       mediaQueries = _ref$mediaQueries === void 0 ? {} : _ref$mediaQueries,
@@ -46,7 +46,7 @@ function _default(_ref) {
   }
 
   return _objectSpread(_objectSpread({}, restProps), {}, {
-    className: className ? "tapestry-react-reset " + className : "tapestry-react-reset",
+    className: className,
     css: function css(theme) {
       var propStyles = {};
 

package/dist/esm/DataTable/DataTable.js

@@ -182,7 +182,7 @@ var DataTable = function DataTable(props) {
     style: isLoadingOrEmpty ? {
       display: 'none'
     } : undefined,
-    className: "tapestry-react-reset " + css({
+    className: css({
       position: 'relative'
     })
   }, /*#__PURE__*/React.createElement("div", {
@@ -203,7 +203,7 @@ var DataTable = function DataTable(props) {
       column: column,
       columnIndex: columnIndex,
       columnSort: columnSort,
-      className: "tapestry-react-reset " + css([].concat(cellVariantClassName, [column.css]))
+      className: css([].concat(cellVariantClassName, [column.css]))
     });
   }))), bodyToRender, hasFooterColumns && /*#__PURE__*/React.createElement("div", {
     ref: footerRef,
@@ -221,7 +221,7 @@ var DataTable = function DataTable(props) {
       key: columnIndex,
       role: "cell",
       ref: getColumnRef(columnIndex + "." + (data.length + 1)),
-      className: "tapestry-react-reset " + css([].concat(cellVariantClassName, [column.css]))
+      className: css([].concat(cellVariantClassName, [column.css]))
     }, typeof column.footer === 'string' || /*#__PURE__*/React.isValidElement(column.footer) ? column.footer : column.footer ? /*#__PURE__*/React.createElement(column.footer, {
       columnIndex: columnIndex
     }) : null);

package/dist/esm/DataTable/components/BodyRows.js

@@ -42,7 +42,7 @@ function BodyRows(_ref) {
           ref: getColumnRef(columnIndex + "." + (rowIndex + 1)) // offset by 1 to account for header row
           ,
           role: "cell",
-          className: "tapestry-react-reset " + css([].concat(cellVariantStyles, [column.css]))
+          className: css([].concat(cellVariantStyles, [column.css]))
         }, getCell(column.cell, {
           columnIndex: columnIndex,
           rowData: rowData,
@@ -68,7 +68,7 @@ function BodyRows(_ref) {
       rowIndex: rowIndex,
       keyboardShortcuts: keyboardShortcuts,
       onRowClick: onRowClick,
-      className: "tapestry-react-reset " + css(rowVariantClassName)
+      className: css(rowVariantClassName)
     }, getRowLinkProps({
       getRowLink: getRowLink,
       data: rowData,

package/dist/esm/DataTable/components/BodySubRows.js

@@ -58,7 +58,7 @@ var BodySubRows = function BodySubRows(_ref2) {
       rowIndex: rowIndex,
       keyboardShortcuts: keyboardShortcuts,
       onRowClick: onRowClick,
-      className: "tapestry-react-reset " + css(rowVariantClassName)
+      className: css(rowVariantClassName)
     }, getRowLinkProps({
       getRowLink: getRowLink,
       data: rowData,
@@ -77,7 +77,7 @@ var BodySubRows = function BodySubRows(_ref2) {
       return /*#__PURE__*/React.createElement("div", {
         key: columnIndex,
         ref: getColumnRef(columnIndex + "." + (parentRowIndex + 1) + "." + rowIndex),
-        className: "tapestry-react-reset " + css([].concat(cellVariantClassName, [column.css]))
+        className: css([].concat(cellVariantClassName, [column.css]))
       }, getCell(column.subCell !== undefined ? column.subCell : column.cell, {
         columnIndex: columnIndex,
         rowData: rowData,

package/dist/esm/DataTable/components/CheckboxCell.js

@@ -85,19 +85,19 @@ function CheckboxCell(_ref) {
     onKeyDown: function onKeyDown(event) {
       return event.key === ' ' && handleChange(event);
     },
-    className: "tapestry-react-reset tapestry-react-Checkbox",
+    className: "tapestry-react-Checkbox",
     css: cssStyles
   }, /*#__PURE__*/React.createElement(Icon.Path, {
     name: iconPaths.fill,
-    className: "tapestry-react-reset tapestry-react-Checkbox-Fill",
+    className: "tapestry-react-Checkbox-Fill",
     fill: checked || indeterminate ? 'primary' : 'surfaceTertiary',
     stroke: checked || indeterminate ? 'primary' : 'separatorSecondary'
   }), /*#__PURE__*/React.createElement(Icon.Path, {
     name: iconPaths.minus,
-    className: "tapestry-react-reset tapestry-react-Checkbox-Minus"
+    className: "tapestry-react-Checkbox-Minus"
   }), /*#__PURE__*/React.createElement(Icon.Path, {
     name: iconPaths.checked,
-    className: "tapestry-react-reset tapestry-react-Checkbox-Checked"
+    className: "tapestry-react-Checkbox-Checked"
   }));
 }
 

package/dist/esm/DataTable/components/Icon.js

@@ -36,7 +36,7 @@ function Icon(_ref) {
     width: iconSize,
     height: iconSize,
     fill: themeColor,
-    className: "tapestry-react-reset",
+    className: "tapestry-react-Icon-Svg",
     children: childrenToRender
   }, props));
 }

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/esm/ThemeProvider/styles.js

@@ -24,15 +24,12 @@ export var setRootStyles = function setRootStyles(themeId, styles) {
   sheet.insertRule(styleString, 0);
 };
 export var defaultColorProperties = objectToCSSProperties('colors', flattenPalette(defaultTheme.colors));
-export var styleReset = ("\n" + getRootStyles(null, defaultColorProperties) + "\n\n.tapestry-react-reset {\n  appearance: none;\n  box-sizing: border-box;\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n  font-weight: 400;\n  text-decoration: none;\n  flex: 0 0 auto;\n  min-width: 0px;\n  min-height: 0px;\n  padding: 0px;\n  margin: 0px;\n  border: 0px solid transparent;\n  background-color: transparent;\n  color: inherit;\n}\n\n.tapestry-react-reset::-moz-focus-inner {\n  padding: 0px;\n  border: 0px;\n}\n\n.tapestry-react-reset:focus:not(.focus-visible) {\n  outline: 0px;\n}\n" // minify string
+export var styleReset = ("\n" + getRootStyles(null, defaultColorProperties) + "\n\n[class^=\"tapestry-react\"] {\n  appearance: none;\n  border-width: 0px;\n  border-style: solid;\n  border-color: transparent;\n  box-sizing: border-box;\n  color: inherit;\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n  flex-grow: 0;\n  flex-shrink: 0;\n  flex-basis: auto;\n  font-weight: 400;\n  margin: 0px;\n  min-height: 0px;\n  min-width: 0px;\n  padding: 0px;\n  text-decoration: none;\n}\n\n[class^=\"tapestry-react\"]::-moz-focus-inner {\n  border: none;\n  padding: 0px;\n}\n\n[class^=\"tapestry-react\"]:focus:not(.focus-visible) {\n  outline: 0px;\n}\n" // minify string
 ).replace(/\n/g, '').replace(/\s\s+/g, ' '); // we use our own global style implementation in place of Emotion Global
 // so we can have more control over when styles are injected since multiple
 // Providers can be used on a page
 
 function ensureStyleElement(themeId) {
-  // we use our own global style implementation in place of Emotion Global
-  // so we can have more control over when styles are injected since multiple
-  // Providers can be used on a page
   if (typeof window !== 'undefined' && !document.getElementById("tapestry-react-style-" + themeId)) {
     var styleElement = document.createElement('style');
     styleElement.id = "tapestry-react-style-" + themeId;

package/dist/esm/Tooltip/Tooltip.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { Children, cloneElement, forwardRef, useState, useCallback, useImperativeHandle, useEffect } from 'react';
+import React, { Children, cloneElement, forwardRef, useRef, useState, useCallback, useImperativeHandle, useEffect } from 'react';
 import mitt from 'mitt';
 import Popover from '../Popover';
 import { composeEvents, pageViewChange } from '../utils';
@@ -44,8 +44,8 @@ function Tooltip(props, ref) {
   var isPageInView = true;
   var isFocused = false;
   var isMouseDown = false;
-  var openTimeoutId = null;
-  var closeTimeoutId = null; // prevents tooltips showing when focused and navigating back to a page after leaving
+  var openTimeoutId = useRef(null);
+  var closeTimeoutId = useRef(null); // prevents tooltips showing when focused and navigating back to a page after leaving
 
   var cleanupPageViewChange = useCallback(pageViewChange(function (inView) {
     return setTimeout(function () {
@@ -61,21 +61,21 @@ function Tooltip(props, ref) {
     emitter.on('CLOSE_OPEN_TOOLTIPS', close);
     return function () {
       emitter.off('CLOSE_OPEN_TOOLTIPS', close);
-      clearTimeout(openTimeoutId);
-      clearTimeout(closeTimeoutId);
+      clearTimeout(openTimeoutId.current);
+      clearTimeout(closeTimeoutId.current);
       cleanupPageViewChange();
     };
   }, []);
 
   var open = function open() {
-    clearTimeout(closeTimeoutId);
-    closeTimeoutId = null;
+    clearTimeout(closeTimeoutId.current);
+    closeTimeoutId.current = null;
     setIsPopoverOpen(true);
   };
 
   var close = function close() {
-    clearTimeout(openTimeoutId);
-    openTimeoutId = null;
+    clearTimeout(openTimeoutId.current);
+    openTimeoutId.current = null;
     setIsPopoverOpen(false);
   };
 
@@ -103,13 +103,13 @@ function Tooltip(props, ref) {
   var createOpenTimeout = useCallback(function () {
     clearGlobalTimeout();
 
-    if (openTimeoutId === null) {
-      clearTimeout(closeTimeoutId);
-      closeTimeoutId = null;
+    if (openTimeoutId.current === null) {
+      clearTimeout(closeTimeoutId.current);
+      closeTimeoutId.current = null;
 
       if (isPopoverOpen === false) {
         emitter.emit('CLOSE_OPEN_TOOLTIPS');
-        openTimeoutId = setTimeout(function () {
+        openTimeoutId.current = setTimeout(function () {
           return open();
         }, instantDelay ? 0 : openDelay);
       }
@@ -118,11 +118,11 @@ function Tooltip(props, ref) {
   var createCloseTimeout = useCallback(function () {
     startGlobalTimeout();
 
-    if (closeTimeoutId === null) {
-      clearTimeout(openTimeoutId);
-      openTimeoutId = null;
-      closeTimeoutId = setTimeout(function () {
-        close();
+    if (closeTimeoutId.current === null) {
+      clearTimeout(openTimeoutId.current);
+      openTimeoutId.current = null;
+      closeTimeoutId.current = setTimeout(function () {
+        return close();
       }, closeDelay);
     }
   });

package/dist/esm/system/split-styles.js

@@ -7,7 +7,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import { stylePropNames, pseudoPropNames } from './style-names';
 import { parsePluginStyles } from './parse-styles';
-export default function (_ref) {
+export default function SplitStyles(_ref) {
   var className = _ref.className,
       _ref$mediaQueries = _ref.mediaQueries,
       mediaQueries = _ref$mediaQueries === void 0 ? {} : _ref$mediaQueries,
@@ -37,7 +37,7 @@ export default function (_ref) {
   }
 
   return _objectSpread(_objectSpread({}, restProps), {}, {
-    className: className ? "tapestry-react-reset " + className : "tapestry-react-reset",
+    className: className,
     css: function css(theme) {
       var propStyles = {};
 

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.2",
   "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/DataTable/DataTable.js

@@ -480,7 +480,7 @@ const DataTable = (props: Props) => {
         <div
           role={getRowLink ? undefined : 'grid'}
           style={isLoadingOrEmpty ? { display: 'none' } : undefined}
-          className={`tapestry-react-reset ${css({ position: 'relative' })}`}
+          className={css({ position: 'relative' })}
         >
           <div
             ref={headerRef}
@@ -500,10 +500,7 @@ const DataTable = (props: Props) => {
                     column={column}
                     columnIndex={columnIndex}
                     columnSort={columnSort}
-                    className={`tapestry-react-reset ${css([
-                      ...cellVariantClassName,
-                      column.css,
-                    ])}`}
+                    className={css([...cellVariantClassName, column.css])}
                   />
                 )
               })}
@@ -527,10 +524,7 @@ const DataTable = (props: Props) => {
                       key={columnIndex}
                       role="cell"
                       ref={getColumnRef(`${columnIndex}.${data.length + 1}`)}
-                      className={`tapestry-react-reset ${css([
-                        ...cellVariantClassName,
-                        column.css,
-                      ])}`}
+                      className={css([...cellVariantClassName, column.css])}
                     >
                       {typeof column.footer === 'string' ||
                       React.isValidElement(column.footer)

package/src/DataTable/components/BodyRows.js

@@ -38,7 +38,7 @@ function BodyRows({
             key={columnIndex}
             ref={getColumnRef(`${columnIndex}.${rowIndex + 1}`)} // offset by 1 to account for header row
             role="cell"
-            className={`tapestry-react-reset ${css([...cellVariantStyles, column.css])}`}
+            className={css([...cellVariantStyles, column.css])}
           >
             {getCell(column.cell, {
               columnIndex,
@@ -64,7 +64,7 @@ function BodyRows({
       rowIndex,
       keyboardShortcuts,
       onRowClick,
-      className: `tapestry-react-reset ${css(rowVariantClassName)}`,
+      className: css(rowVariantClassName),
       ...getRowLinkProps({ getRowLink, data: rowData, isSubRow: false }),
     }
     const subRowData = getSubData ? getSubData(rowData) : null

package/src/DataTable/components/BodySubRows.js

@@ -57,7 +57,7 @@ const BodySubRows = ({
             rowIndex={rowIndex}
             keyboardShortcuts={keyboardShortcuts}
             onRowClick={onRowClick}
-            className={`tapestry-react-reset ${css(rowVariantClassName)}`}
+            className={css(rowVariantClassName)}
             {...getRowLinkProps({ getRowLink, data: rowData, isSubRow: true })}
           >
             {columns.map((column, columnIndex) => {
@@ -77,10 +77,7 @@ const BodySubRows = ({
                   ref={getColumnRef(
                     `${columnIndex}.${parentRowIndex + 1}.${rowIndex}`
                   )}
-                  className={`tapestry-react-reset ${css([
-                    ...cellVariantClassName,
-                    column.css,
-                  ])}`}
+                  className={css([...cellVariantClassName, column.css])}
                 >
                   {getCell(
                     column.subCell !== undefined ? column.subCell : column.cell,

package/src/DataTable/components/CheckboxCell.js

@@ -2,7 +2,6 @@ import React, { useCallback } from 'react'
 
 import Icon from '../../Icon'
 
-
 const iconPaths = {
   fill: 'tapestry.checkbox0',
   minus: 'tapestry.checkbox1',
@@ -88,22 +87,22 @@ function CheckboxCell({
       onFocus={onFocus}
       onClick={handleChange}
       onKeyDown={(event) => event.key === ' ' && handleChange(event)}
-      className="tapestry-react-reset tapestry-react-Checkbox"
+      className="tapestry-react-Checkbox"
       css={cssStyles}
     >
       <Icon.Path
         name={iconPaths.fill}
-        className="tapestry-react-reset tapestry-react-Checkbox-Fill"
+        className="tapestry-react-Checkbox-Fill"
         fill={checked || indeterminate ? 'primary' : 'surfaceTertiary'}
         stroke={checked || indeterminate ? 'primary' : 'separatorSecondary'}
       />
       <Icon.Path
         name={iconPaths.minus}
-        className="tapestry-react-reset tapestry-react-Checkbox-Minus"
+        className="tapestry-react-Checkbox-Minus"
       />
       <Icon.Path
         name={iconPaths.checked}
-        className="tapestry-react-reset tapestry-react-Checkbox-Checked"
+        className="tapestry-react-Checkbox-Checked"
       />
     </Icon>
   )

package/src/DataTable/components/Icon.js

@@ -25,7 +25,7 @@ function Icon({ as, name, size = 'md', color, children, ...props }) {
       width={iconSize}
       height={iconSize}
       fill={themeColor}
-      className="tapestry-react-reset"
+      className="tapestry-react-Icon-Svg"
       children={childrenToRender}
       {...props}
     />

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]

package/src/ThemeProvider/styles.ts

@@ -37,28 +37,31 @@ export const defaultColorProperties = objectToCSSProperties(
 export const styleReset = `
 ${getRootStyles(null, defaultColorProperties)}
 
-.tapestry-react-reset {
+[class^="tapestry-react"] {
   appearance: none;
+  border-width: 0px;
+  border-style: solid;
+  border-color: transparent;
   box-sizing: border-box;
+  color: inherit;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: auto;
   font-weight: 400;
-  text-decoration: none;
-  flex: 0 0 auto;
-  min-width: 0px;
+  margin: 0px;
   min-height: 0px;
+  min-width: 0px;
   padding: 0px;
-  margin: 0px;
-  border: 0px solid transparent;
-  background-color: transparent;
-  color: inherit;
+  text-decoration: none;
 }
 
-.tapestry-react-reset::-moz-focus-inner {
+[class^="tapestry-react"]::-moz-focus-inner {
+  border: none;
   padding: 0px;
-  border: 0px;
 }
 
-.tapestry-react-reset:focus:not(.focus-visible) {
+[class^="tapestry-react"]:focus:not(.focus-visible) {
   outline: 0px;
 }
 `
@@ -70,9 +73,6 @@ ${getRootStyles(null, defaultColorProperties)}
 // so we can have more control over when styles are injected since multiple
 // Providers can be used on a page
 function ensureStyleElement(themeId) {
-  // we use our own global style implementation in place of Emotion Global
-  // so we can have more control over when styles are injected since multiple
-  // Providers can be used on a page
   if (
     typeof window !== 'undefined' &&
     !document.getElementById(`tapestry-react-style-${themeId}`)

package/src/Tooltip/Tooltip.js

@@ -3,6 +3,7 @@ import React, {
   Children,
   cloneElement,
   forwardRef,
+  useRef,
   useState,
   useCallback,
   useImperativeHandle,
@@ -124,8 +125,8 @@ function Tooltip(props: Props, ref) {
   let isPageInView = true
   let isFocused = false
   let isMouseDown = false
-  let openTimeoutId = null
-  let closeTimeoutId = null
+  let openTimeoutId = useRef(null)
+  let closeTimeoutId = useRef(null)
 
   // prevents tooltips showing when focused and navigating back to a page after leaving
   const cleanupPageViewChange = useCallback(
@@ -137,21 +138,21 @@ function Tooltip(props: Props, ref) {
     emitter.on('CLOSE_OPEN_TOOLTIPS', close)
     return () => {
       emitter.off('CLOSE_OPEN_TOOLTIPS', close)
-      clearTimeout(openTimeoutId)
-      clearTimeout(closeTimeoutId)
+      clearTimeout(openTimeoutId.current)
+      clearTimeout(closeTimeoutId.current)
       cleanupPageViewChange()
     }
   }, [])
 
   const open = () => {
-    clearTimeout(closeTimeoutId)
-    closeTimeoutId = null
+    clearTimeout(closeTimeoutId.current)
+    closeTimeoutId.current = null
     setIsPopoverOpen(true)
   }
 
   const close = () => {
-    clearTimeout(openTimeoutId)
-    openTimeoutId = null
+    clearTimeout(openTimeoutId.current)
+    openTimeoutId.current = null
     setIsPopoverOpen(false)
   }
 
@@ -179,24 +180,25 @@ function Tooltip(props: Props, ref) {
 
   const createOpenTimeout = useCallback(() => {
     clearGlobalTimeout()
-    if (openTimeoutId === null) {
-      clearTimeout(closeTimeoutId)
-      closeTimeoutId = null
+    if (openTimeoutId.current === null) {
+      clearTimeout(closeTimeoutId.current)
+      closeTimeoutId.current = null
       if (isPopoverOpen === false) {
         emitter.emit('CLOSE_OPEN_TOOLTIPS')
-        openTimeoutId = setTimeout(() => open(), instantDelay ? 0 : openDelay)
+        openTimeoutId.current = setTimeout(
+          () => open(),
+          instantDelay ? 0 : openDelay
+        )
       }
     }
   })
 
   const createCloseTimeout = useCallback(() => {
     startGlobalTimeout()
-    if (closeTimeoutId === null) {
-      clearTimeout(openTimeoutId)
-      openTimeoutId = null
-      closeTimeoutId = setTimeout(() => {
-        close()
-      }, closeDelay)
+    if (closeTimeoutId.current === null) {
+      clearTimeout(openTimeoutId.current)
+      openTimeoutId.current = null
+      closeTimeoutId.current = setTimeout(() => close(), closeDelay)
     }
   })
 

package/src/system/split-styles.js

@@ -1,7 +1,7 @@
 import { stylePropNames, pseudoPropNames } from './style-names'
 import { parsePluginStyles } from './parse-styles'
 
-export default function ({
+export default function SplitStyles({
   className,
   mediaQueries = {},
   plugin,
@@ -26,7 +26,7 @@ export default function ({
   }
   return {
     ...restProps,
-    className: className ? `tapestry-react-reset ${className}` : `tapestry-react-reset`,
+    className,
     css: (theme) => {
       const propStyles = {}
       for (const prop in styleProps) {