carbon-react 102.4.2 → 102.4.6

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

@@ -13,6 +13,8 @@ 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");
@@ -32,10 +34,11 @@ 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(_carbonScopedTokensProvider.tokensClassName);
+    elementDOM.current.classList.add((0, _carbonScopedTokensProvider.tokensClassName)(theme === null || theme === void 0 ? void 0 : theme.name));
     document.body.appendChild(elementDOM.current);
   }
 

package/lib/components/button/button.component.js

@@ -51,6 +51,7 @@ function renderChildren({
     darkBackground: theme.colors.primary
   };
   const iconProps = {
+    "aria-hidden": true,
     type: iconType,
     disabled,
     bgSize: "extra-small",

package/lib/components/checkbox/checkbox.style.js

@@ -221,6 +221,10 @@ const StyledCheckboxGroup = _styledComponents.default.div`
     font-size: 16px;
   }
 
+  && ${_formField.default} {
+    margin: 0;
+  }
+
   & ${CheckboxStyle} {
     padding-top: 12px;
   }

package/lib/components/flat-table/flat-table-cell/flat-table-cell.style.js

@@ -48,7 +48,7 @@ const StyledFlatTableCell = _styledComponents.default.td`
       width: ${colWidth}px;
     `}
 
-    &&& {
+    &&&& {
       > div {
         box-sizing: border-box;
 

package/lib/components/icon/icon.component.js

@@ -54,6 +54,7 @@ const Icon = /*#__PURE__*/_react.default.forwardRef(({
   inputSize,
   role,
   ariaLabel,
+  "aria-hidden": ariaHidden,
   focusable = true,
   ...rest
 }, ref) => {
@@ -113,6 +114,7 @@ const Icon = /*#__PURE__*/_react.default.forwardRef(({
   }, (0, _tags.default)("icon", rest), styleProps, {
     hasTooltip: hasTooltip,
     "aria-label": ariaLabel,
+    "aria-hidden": ariaHidden,
     role: hasTooltip && role === undefined ? "tooltip" : role
   }));
 
@@ -173,6 +175,9 @@ Icon.propTypes = { ...marginPropTypes,
   /** Aria label for accessibility purposes */
   ariaLabel: _propTypes.default.string,
 
+  /** Set whether icon should be recognised by assistive technologies */
+  "aria-hidden": _propTypes.default.bool,
+
   /** The message to be displayed within the tooltip */
   tooltipMessage: _propTypes.default.node,
 

package/lib/components/icon/icon.d.ts

@@ -221,6 +221,8 @@ export interface IconProps extends MarginProps {
   disabled?: boolean;
   /** Aria label for accessibility purposes */
   ariaLabel?: string;
+  /** Set whether icon should be recognised by assistive technologies */
+  "aria-hidden"?: boolean;
   /** The message to be displayed within the tooltip */
   tooltipMessage?: React.ReactNode;
   /** The position to display the tooltip */

package/lib/components/portal/portal.js

@@ -11,6 +11,8 @@ 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"));
@@ -31,6 +33,7 @@ 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();
@@ -65,7 +68,7 @@ const Portal = ({
       setPortalNode(node);
     } else if (!node) {
       node = document.createElement("div");
-      node.classList.add(portalClassName, _carbonScopedTokensProvider.tokensClassName);
+      node.classList.add(portalClassName, (0, _carbonScopedTokensProvider.tokensClassName)((theme === null || theme === void 0 ? void 0 : theme.name) || ""));
       node.setAttribute("data-portal-exit", uniqueId);
 
       if (id !== undefined) {

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

@@ -19,25 +19,34 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 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 tokensClassName = `sageDesignTokens-${(0, _guid.default)()}`;
+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)`
-  .${tokensClassName} {
-    ${({
+  ${({
   theme
-}) => (0, _generateCssVariables.default)(theme.compatibility)}
-  }
-`;
+}) => {
+  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`
+const TokensProviderWrapper = _styledComponents.default.div.attrs(({
+  theme
+}) => ({
+  className: tokensClassName(theme.name)
+}))`
   margin: 0;
   padding: 0;
   width: auto;
@@ -45,14 +54,8 @@ const TokensProviderWrapper = _styledComponents.default.div`
 `;
 
 const CarbonScopedTokensProvider = ({
-  children,
-  theme,
-  ...props
-}) => /*#__PURE__*/_react.default.createElement(TokensProviderWrapper, _extends({}, props, {
-  className: tokensClassName
-}), /*#__PURE__*/_react.default.createElement(GlobalTokens, {
-  theme: theme
-}), children);
+  children
+}) => /*#__PURE__*/_react.default.createElement(TokensProviderWrapper, null, /*#__PURE__*/_react.default.createElement(GlobalTokens, null), children);
 
 var _default = CarbonScopedTokensProvider;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "102.4.2",
+  "version": "102.4.6",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -60,8 +60,8 @@
     "@babel/preset-typescript": "7.12.7",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
-    "@cypress/react": "^5.9.2",
-    "@cypress/webpack-dev-server": "^1.4.0",
+    "@cypress/react": "^5.12.0",
+    "@cypress/webpack-dev-server": "^1.8.0",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/exec": "^6.0.2",
     "@semantic-release/git": "^10.0.1",
@@ -98,12 +98,12 @@
     "core-js": "^3.1.4",
     "cpy-cli": "^3.1.1",
     "cross-env": "^5.2.0",
-    "cypress": "^9.0.0",
+    "cypress": "^9.2.0",
     "cypress-axe": "^0.13.0",
-    "cypress-cucumber-preprocessor": "^4.3.0",
-    "cypress-each": "^1.5.0",
+    "cypress-cucumber-preprocessor": "^4.3.1",
+    "cypress-each": "^1.10.0",
     "cypress-plugin-tab": "^1.0.5",
-    "cypress-real-events": "^1.5.1",
+    "cypress-real-events": "^1.6.0",
     "cypress-storybook": "^0.5.1",
     "cz-conventional-changelog": "^3.3.0",
     "draft-js": "^0.11.7",