carbon-react 101.4.3 → 101.4.4

package/lib/__internal__/popover/popover.component.js

@@ -15,6 +15,8 @@ var _core = require("@popperjs/core");
 
 var _useResizeObserver = _interopRequireDefault(require("../../hooks/__internal__/useResizeObserver"));
 
+var _carbonScopedTokensProvider = require("../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -33,6 +35,7 @@ const Popover = ({
 
   if (!elementDOM.current && !disablePortal) {
     elementDOM.current = document.createElement("div");
+    elementDOM.current.classList.add(_carbonScopedTokensProvider.tokensClassName);
     document.body.appendChild(elementDOM.current);
   }
 

package/lib/components/portal/portal.js

@@ -15,6 +15,8 @@ var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/gui
 
 var _browser = _interopRequireDefault(require("../../__internal__/utils/helpers/browser"));
 
+var _carbonScopedTokensProvider = require("../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -63,7 +65,7 @@ const Portal = ({
       setPortalNode(node);
     } else if (!node) {
       node = document.createElement("div");
-      node.classList.add(portalClassName);
+      node.classList.add(portalClassName, _carbonScopedTokensProvider.tokensClassName);
       node.setAttribute("data-portal-exit", uniqueId);
 
       if (id !== undefined) {

package/lib/style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component.js

@@ -3,28 +3,56 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.GlobalTokens = exports.tokensClassName = void 0;
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _generateCssVariables = _interopRequireDefault(require("../generate-css-variables.util"));
 
+var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _extends() { _extends = Object.assign || 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); }
+
 /**
  *
  * Converts theme properties to css variables form and set them locally for
  * given scope
  *
  */
-const CarbonScopedTokensProvider = _styledComponents.default.div`
+const tokensClassName = `sageDesignTokens-${(0, _guid.default)()}`;
+exports.tokensClassName = tokensClassName;
+const GlobalTokens = (0, _styledComponents.createGlobalStyle)`
+  .${tokensClassName} {
+    ${({
+  theme
+}) => (0, _generateCssVariables.default)(theme.compatibility)}
+  }
+`;
+exports.GlobalTokens = GlobalTokens;
+const TokensProviderWrapper = _styledComponents.default.div`
   margin: 0;
   padding: 0;
   width: auto;
   display: inline;
-  ${({
-  theme
-}) => (0, _generateCssVariables.default)(theme.compatibility)}
 `;
+
+const CarbonScopedTokensProvider = ({
+  children,
+  theme,
+  ...props
+}) => /*#__PURE__*/_react.default.createElement(TokensProviderWrapper, _extends({}, props, {
+  className: tokensClassName
+}), /*#__PURE__*/_react.default.createElement(GlobalTokens, {
+  theme: theme
+}), children);
+
 var _default = CarbonScopedTokensProvider;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "101.4.3",
+  "version": "101.4.4",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {