carbon-react 103.2.0 → 103.2.1

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

@@ -13,11 +13,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _core = require("@popperjs/core");
 
-var _styledComponents = require("styled-components");
-
 var _useResizeObserver = _interopRequireDefault(require("../../hooks/__internal__/useResizeObserver"));
 
-var _carbonScopedTokensProvider = require("../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component");
+var _carbonScopedTokensProvider = _interopRequireDefault(require("../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -34,11 +32,9 @@ const Popover = ({
   modifiers
 }) => {
   const elementDOM = (0, _react.useRef)();
-  const theme = (0, _react.useContext)(_styledComponents.ThemeContext);
 
   if (!elementDOM.current && !disablePortal) {
     elementDOM.current = document.createElement("div");
-    elementDOM.current.classList.add((0, _carbonScopedTokensProvider.tokensClassName)(theme === null || theme === void 0 ? void 0 : theme.name));
     document.body.appendChild(elementDOM.current);
   }
 
@@ -98,7 +94,7 @@ const Popover = ({
     return content;
   }
 
-  return /*#__PURE__*/_reactDom.default.createPortal(content, elementDOM.current);
+  return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_carbonScopedTokensProvider.default, null, content), elementDOM.current);
 };
 
 Popover.propTypes = {

package/lib/components/portal/portal.js

@@ -11,13 +11,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactDom = _interopRequireDefault(require("react-dom"));
 
-var _styledComponents = require("styled-components");
-
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 
 var _browser = _interopRequireDefault(require("../../__internal__/utils/helpers/browser"));
 
-var _carbonScopedTokensProvider = require("../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component");
+var _carbonScopedTokensProvider = _interopRequireDefault(require("../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -33,7 +31,6 @@ const Portal = ({
 }) => {
   const [portalNode, setPortalNode] = (0, _react.useState)(null);
   const uniqueId = (0, _react.useMemo)(() => (0, _guid.default)(), []);
-  const theme = (0, _react.useContext)(_styledComponents.ThemeContext);
   (0, _react.useEffect)(() => {
     if (onReposition) {
       onReposition();
@@ -68,7 +65,7 @@ const Portal = ({
       setPortalNode(node);
     } else if (!node) {
       node = document.createElement("div");
-      node.classList.add(portalClassName, (0, _carbonScopedTokensProvider.tokensClassName)((theme === null || theme === void 0 ? void 0 : theme.name) || ""));
+      node.classList.add(portalClassName);
       node.setAttribute("data-portal-exit", uniqueId);
 
       if (id !== undefined) {
@@ -99,7 +96,7 @@ const Portal = ({
 
   return /*#__PURE__*/_react.default.createElement("span", {
     "data-portal-entrance": uniqueId
-  }, /*#__PURE__*/_reactDom.default.createPortal(children, getPortalContainer()));
+  }, /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_carbonScopedTokensProvider.default, null, children), getPortalContainer()));
 };
 
 Portal.propTypes = {

package/lib/components/tooltip/tooltip.component.js

@@ -11,15 +11,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _headless = _interopRequireDefault(require("@tippyjs/react/headless"));
 
-var _styledComponents = require("styled-components");
-
 var _tooltip = _interopRequireDefault(require("./tooltip.style"));
 
 var _tooltipPointer = _interopRequireDefault(require("./tooltip-pointer.style"));
 
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 
-var _carbonScopedTokensProvider = require("../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component");
+var _carbonScopedTokensProvider = _interopRequireDefault(require("../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -47,12 +45,10 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef(({
   ...rest
 }, ref) => {
   const tooltipRef = (0, _react.useRef)(ref || null);
-  const theme = (0, _react.useContext)(_styledComponents.ThemeContext);
 
   const tooltip = (attrs, content) => {
     const currentPosition = attrs["data-placement"] || position;
-    return /*#__PURE__*/_react.default.createElement(_tooltip.default, _extends({
-      className: (0, _carbonScopedTokensProvider.tokensClassName)(theme === null || theme === void 0 ? void 0 : theme.name),
+    return /*#__PURE__*/_react.default.createElement(_carbonScopedTokensProvider.default, null, /*#__PURE__*/_react.default.createElement(_tooltip.default, _extends({
       "data-element": "tooltip",
       role: "tooltip",
       tabIndex: "-1",
@@ -75,7 +71,7 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef(({
       "data-popper-arrow": "",
       "data-element": "tooltip-pointer",
       bgColor: bgColor
-    })), /*#__PURE__*/_react.default.createElement("div", null, content));
+    })), /*#__PURE__*/_react.default.createElement("div", null, content)));
   };
 
   return /*#__PURE__*/_react.default.createElement(_headless.default, _extends({

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

@@ -1,6 +1,8 @@
-export function tokensClassName(theme: any): string;
-export const GlobalTokens: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
 export default CarbonScopedTokensProvider;
-declare function CarbonScopedTokensProvider({ children }: {
-    children: any;
-}): JSX.Element;
+/**
+ *
+ * Converts theme properties to css variables form and set them locally for
+ * given scope
+ *
+ */
+declare const CarbonScopedTokensProvider: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -3,20 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.GlobalTokens = exports.tokensClassName = void 0;
+exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _themes = require("../../themes");
 
 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 }; }
 
 /**
@@ -25,37 +19,18 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * given scope
  *
  */
-const activeThemes = {};
-const carbonInstanceId = (0, _guid.default)();
-
-const kebabCase = input => input && input.toString().toLowerCase().match(/\w*/gm).filter(Boolean).join("-");
-
-const tokensClassName = theme => `sage-design-tokens-${kebabCase(theme)}-${carbonInstanceId}`;
-
-exports.tokensClassName = tokensClassName;
-const GlobalTokens = (0, _styledComponents.createGlobalStyle)`
-  ${({
-  theme
-}) => {
-  const className = tokensClassName(theme.name);
-  activeThemes[className] = activeThemes[className] || (0, _generateCssVariables.default)(theme.compatibility);
-  return Object.entries(activeThemes).reduce((acc, [name, definitions]) => `${acc} .${name} { ${definitions} }`, "");
-}}`;
-exports.GlobalTokens = GlobalTokens;
-const TokensProviderWrapper = _styledComponents.default.div.attrs(({
-  theme
-}) => ({
-  className: tokensClassName(theme.name)
-}))`
+const CarbonScopedTokensProvider = _styledComponents.default.div`
   margin: 0;
   padding: 0;
   width: auto;
   display: inline;
-`;
-
-const CarbonScopedTokensProvider = ({
-  children
-}) => /*#__PURE__*/_react.default.createElement(TokensProviderWrapper, null, /*#__PURE__*/_react.default.createElement(GlobalTokens, null), children);
 
+  ${({
+  theme
+}) => (0, _generateCssVariables.default)(theme.compatibility)}
+`;
+CarbonScopedTokensProvider.defaultProps = {
+  theme: _themes.baseTheme
+};
 var _default = CarbonScopedTokensProvider;
 exports.default = _default;

package/package.json

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