carbon-react 104.1.0 → 104.4.0

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/__internal__/tooltip-provider/index.d.ts

@@ -14,6 +14,7 @@ export interface TooltipProviderProps {
   focusable?: boolean;
   tooltipVisible?: boolean;
   disabled?: boolean;
+  target?: Element;
 }
 
 declare const ToolbarContext: React.Context<ToolbarContextProps>;

package/lib/__internal__/tooltip-provider/index.js

@@ -21,14 +21,16 @@ const TooltipProvider = ({
   helpAriaLabel,
   focusable = true,
   tooltipVisible,
-  disabled = false
+  disabled = false,
+  target
 }) => /*#__PURE__*/_react.default.createElement(TooltipContext.Provider, {
   value: {
     tooltipPosition,
     helpAriaLabel,
     focusable,
     tooltipVisible,
-    disabled
+    disabled,
+    target
   }
 }, children);
 
@@ -39,5 +41,6 @@ TooltipProvider.propTypes = {
   helpAriaLabel: _propTypes.default.string,
   focusable: _propTypes.default.bool,
   tooltipVisible: _propTypes.default.bool,
-  disabled: _propTypes.default.bool
+  disabled: _propTypes.default.bool,
+  target: _propTypes.default.instanceOf(Element)
 };

package/lib/components/accordion/accordion.style.js

@@ -37,18 +37,11 @@ const StyledAccordionContainer = _styledComponents.default.div`
   width: ${({
   width
 }) => width || "100%"};
-  color: ${({
-  theme
-}) => theme.text.color};
+  color: var(--colorsUtilityYin090);
   background-color: ${({
-  scheme,
-  theme
-}) => scheme === "white" ? theme.colors.white : "transparent"};
-  ${({
-  theme
-}) => (0, _styledComponents.css)`
-      border: 1px solid ${theme.accordion.border};
-    `}
+  scheme
+}) => scheme === "white" ? "var(--colorsUtilityYang100)" : "var(--colorsUtilityMajorTransparent)"};
+  border: 1px solid var(--colorsUtilityMajor100);
   ${({
   borders
 }) => borders === "default" && (0, _styledComponents.css)`
@@ -63,12 +56,8 @@ const StyledAccordionContainer = _styledComponents.default.div`
 
   & + & {
     margin-top: -1px;
-    border-top: 1px solid ${({
-  theme
-}) => theme.accordion.border};
-    border-bottom: 1px solid ${({
-  theme
-}) => theme.accordion.border};
+    border-top: 1px solid var(--colorsUtilityMajor100);
+    border-bottom: 1px solid var(--colorsUtilityMajor100);
   }
 `;
 exports.StyledAccordionContainer = StyledAccordionContainer;
@@ -91,15 +80,15 @@ exports.StyledAccordionSubTitle = StyledAccordionSubTitle;
 const StyledAccordionIcon = (0, _styledComponents.default)(_icon.default)`
   transition: transform 0.3s;
   margin-right: ${({
-  iconAlign,
-  theme
-}) => iconAlign === "left" ? theme.spacing * 2 : 0}px;
+  iconAlign
+}) => iconAlign === "left" ? "var(--spacing200)" : "var(--spacing000)"};
   ${({
   isExpanded,
   iconAlign
 }) => {
   return !isExpanded && (iconAlign === "right" ? "transform: rotate(90deg)" : "transform: rotate(-90deg)");
 }};
+  color: var(--colorsActionMinor500);
 `;
 exports.StyledAccordionIcon = StyledAccordionIcon;
 const StyledAccordionHeadingsContainer = _styledComponents.default.div`
@@ -134,10 +123,9 @@ const StyledAccordionTitleContainer = _styledComponents.default.div`
   buttonWidth,
   iconAlign,
   size,
-  theme,
   hasButtonProps
 }) => (0, _styledComponents.css)`
-    padding: ${size === "small" ? theme.spacing * 2 : theme.spacing * 3}px;
+    padding: ${size === "small" ? "var(--spacing200)" : "var(--spacing300)"};
     ${_styledSystem.space}
     display: flex;
     align-items: center;
@@ -152,12 +140,12 @@ const StyledAccordionTitleContainer = _styledComponents.default.div`
     z-index: 1;
 
     &:focus {
-      outline: ${buttonHeading ? "3px" : "2px"} solid ${theme.colors.focus};
+      outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
     }
 
     ${!buttonHeading && (0, _styledComponents.css)`
       &:hover {
-        background-color: ${theme.accordion.background};
+        background-color: var(--colorsUtilityMajor050);
       }
     `}
 
@@ -165,10 +153,10 @@ const StyledAccordionTitleContainer = _styledComponents.default.div`
       box-sizing: border-box;
       font-weight: 600;
       text-decoration: none;
-      font-size: ${theme.text.size};
-      min-height: ${theme.spacing * 5}px;
+      font-size: var(--fontSizes100);
+      min-height: var(--spacing500);
 
-      color: ${theme.colors.primary};
+      color: var(--colorsActionMajor500);
 
       ${!hasButtonProps && (0, _styledComponents.css)`
         ${StyledAccordionHeadingsContainer} {
@@ -177,7 +165,7 @@ const StyledAccordionTitleContainer = _styledComponents.default.div`
       `}
 
       ${StyledAccordionIcon} {
-        color: ${theme.colors.primary};
+        color: var(--colorsActionMajor500);
         ${!hasButtonProps && (0, _styledComponents.css)`
           position: relative;
           ${iconAlign}: 16px;
@@ -185,9 +173,9 @@ const StyledAccordionTitleContainer = _styledComponents.default.div`
       }
 
       &:hover {
-        color: ${theme.colors.secondary};
+        color: var(--colorsActionMajor600);
         ${StyledAccordionIcon} {
-          color: ${theme.colors.secondary};
+          color: var(--colorsActionMajor600);
         }
       }
 
@@ -217,9 +205,8 @@ const StyledAccordionContentContainer = _styledComponents.default.div`
 `;
 exports.StyledAccordionContentContainer = StyledAccordionContentContainer;
 const StyledAccordionContent = _styledComponents.default.div`
-  padding: 0 ${({
-  theme
-}) => theme.spacing * 3}px;
+  padding: var(--spacing300);
+  padding-top: 0;
   overflow: hidden;
 
   ${({
@@ -237,16 +224,4 @@ StyledAccordionContainer.defaultProps = {
 };
 StyledAccordionTitleContainer.defaultProps = {
   theme: _themes.baseTheme
-};
-StyledAccordionTitle.defaultProps = {
-  theme: _themes.baseTheme
-};
-StyledAccordionIcon.defaultProps = {
-  theme: _themes.baseTheme
-};
-StyledAccordionContent.defaultProps = {
-  theme: _themes.baseTheme
-};
-StyledAccordionContentContainer.defaultProps = {
-  theme: _themes.baseTheme
 };

package/lib/components/button/button.component.d.ts

@@ -1,6 +1,26 @@
 export default Button;
 export const ButtonWithForwardRef: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-declare function Button(props: any): JSX.Element;
+declare function Button({ size, subtext, as, children, forwardRef, "aria-label": ariaLabel, disabled, buttonType: buttonTypeProp, iconType, iconPosition, href, m, px, noWrap, target, rel, iconTooltipMessage, iconTooltipPosition, ...rest }: {
+    [x: string]: any;
+    size: any;
+    subtext: any;
+    as: any;
+    children: any;
+    forwardRef: any;
+    "aria-label": any;
+    disabled: any;
+    buttonType: any;
+    iconType: any;
+    iconPosition: any;
+    href: any;
+    m?: number | undefined;
+    px: any;
+    noWrap: any;
+    target: any;
+    rel: any;
+    iconTooltipMessage: any;
+    iconTooltipPosition: any;
+}): JSX.Element;
 declare namespace Button {
     const propTypes: any;
     namespace defaultProps {

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

@@ -17,6 +17,8 @@ var _button = _interopRequireWildcard(require("./button.style"));
 
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 
+var _tooltipProvider = require("../../__internal__/tooltip-provider");
+
 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; }
@@ -35,7 +37,8 @@ function renderChildren({
   disabled,
   buttonType,
   iconTooltipMessage,
-  iconTooltipPosition
+  iconTooltipPosition,
+  tooltipTarget
   /* eslint-enable */
 
 }) {
@@ -57,43 +60,54 @@ function renderChildren({
     "data-element": "main-text"
   }, children), size === "large" && /*#__PURE__*/_react.default.createElement(_button.StyledButtonSubtext, {
     "data-element": "subtext"
-  }, subtext)), iconType && !children && /*#__PURE__*/_react.default.createElement(_icon.default, _extends({}, iconProps, {
+  }, subtext)), iconType && !children && /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
+    disabled: disabled,
+    focusable: false,
+    target: tooltipTarget
+  }, /*#__PURE__*/_react.default.createElement(_icon.default, _extends({}, iconProps, {
     tooltipMessage: iconTooltipMessage,
     tooltipPosition: iconTooltipPosition
-  })), iconType && iconPosition === "after" && children && /*#__PURE__*/_react.default.createElement(_icon.default, iconProps));
+  }))), iconType && iconPosition === "after" && children && /*#__PURE__*/_react.default.createElement(_icon.default, iconProps));
 }
 
-const renderStyledButton = buttonProps => {
-  const {
-    "aria-label": ariaLabel,
-    disabled,
-    buttonType,
-    iconType,
-    href,
-    ref,
-    m = 0,
-    px,
-    size,
-    noWrap,
-    tooltipMessage,
-    target,
-    rel,
-    ...rest
-  } = buttonProps;
+const Button = ({
+  size,
+  subtext,
+  as,
+  children,
+  forwardRef,
+  "aria-label": ariaLabel,
+  disabled,
+  buttonType: buttonTypeProp,
+  iconType,
+  iconPosition,
+  href,
+  m = 0,
+  px,
+  noWrap,
+  target,
+  rel,
+  iconTooltipMessage,
+  iconTooltipPosition,
+  ...rest
+}) => {
+  const [internalRef, setInternalRef] = (0, _react.useState)(null);
+  const buttonType = buttonTypeProp || as;
+
+  if (subtext.length > 0 && size !== "large") {
+    throw new Error("subtext prop has no effect unless the button is large");
+  }
+
   let paddingX;
 
   const handleLinkKeyDown = event => {
     // If space key click link
     if (event.key === " ") {
       event.preventDefault();
-      ref.current.click();
+      internalRef.click();
     }
   };
 
-  if (href) {
-    rest.href = href;
-  }
-
   switch (size) {
     case "small":
       paddingX = 2;
@@ -108,7 +122,7 @@ const renderStyledButton = buttonProps => {
   }
 
   return /*#__PURE__*/_react.default.createElement(_button.default, _extends({
-    "aria-label": !rest.children && iconType ? ariaLabel || iconType : undefined,
+    "aria-label": !children && iconType ? ariaLabel || iconType : undefined,
     as: !disabled && href ? "a" : "button",
     onKeyDown: href && handleLinkKeyDown,
     draggable: false,
@@ -121,36 +135,33 @@ const renderStyledButton = buttonProps => {
     px: px ?? paddingX,
     m: m,
     noWrap: noWrap,
-    iconOnly: !rest.children && iconType,
+    iconOnly: !children && iconType,
+    iconPosition: iconPosition,
     target: target,
     rel: rel
-  }, (0, _tags.default)("button", buttonProps), rest, {
-    ref: ref
-  }), renderChildren(buttonProps));
-};
-
-const Button = props => {
-  const {
+  }, (0, _tags.default)("button", rest), rest, href && {
+    href
+  }, {
+    ref: reference => {
+      if (reference) {
+        setInternalRef(reference);
+        if (!forwardRef) return;
+        if (typeof forwardRef === "object") forwardRef.current = reference;
+        if (typeof forwardRef === "function") forwardRef(reference);
+      }
+    }
+  }), renderChildren({
+    iconType,
+    iconPosition,
     size,
-    subtext
-  } = props;
-  const linkRef = (0, _react.useRef)(null);
-  const {
-    as,
+    subtext,
+    children,
+    disabled,
     buttonType,
-    forwardRef,
-    ...rest
-  } = props;
-  const propsWithoutAs = { ...rest,
-    buttonType: buttonType || as,
-    ref: forwardRef || linkRef
-  };
-
-  if (subtext.length > 0 && size !== "large") {
-    throw new Error("subtext prop has no effect unless the button is large");
-  }
-
-  return renderStyledButton(propsWithoutAs);
+    iconTooltipMessage,
+    iconTooltipPosition,
+    tooltipTarget: internalRef
+  }));
 };
 
 Button.propTypes = {

package/lib/components/confirm/confirm.component.d.ts

@@ -1,6 +1,9 @@
 export default Confirm;
-declare function Confirm({ open, children, destructive, cancelButtonDestructive, confirmButtonDestructive, cancelButtonType, confirmButtonType, cancelButtonIconType, cancelButtonIconPosition, confirmButtonIconType, confirmButtonIconPosition, cancelLabel, onCancel, disableCancel, onConfirm, isLoadingConfirm, disableConfirm, confirmLabel, iconType, subtitle, title, ...rest }: {
+declare function Confirm({ "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, open, children, destructive, cancelButtonDestructive, confirmButtonDestructive, cancelButtonType, confirmButtonType, cancelButtonIconType, cancelButtonIconPosition, confirmButtonIconType, confirmButtonIconPosition, cancelLabel, onCancel, disableCancel, onConfirm, isLoadingConfirm, disableConfirm, confirmLabel, iconType, subtitle, title, ...rest }: {
     [x: string]: any;
+    "aria-labelledby": any;
+    "aria-describedby": any;
+    "aria-label": any;
     open: any;
     children: any;
     destructive: any;

package/lib/components/confirm/confirm.component.js

@@ -5,10 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid/guid.js"));
+
 var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 
 var _heading = _interopRequireDefault(require("../heading"));
@@ -27,11 +29,18 @@ var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLoc
 
 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; }
+
+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 _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); }
 
 let deprecatedWarnTriggered = false;
 
 const Confirm = ({
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-label": ariaLabel,
   open,
   children,
   destructive,
@@ -62,6 +71,25 @@ const Confirm = ({
   }
 
   const l = (0, _useLocale.default)();
+  const {
+    current: titleId
+  } = (0, _react.useRef)((0, _guid.default)());
+  const {
+    current: subtitleId
+  } = (0, _react.useRef)((0, _guid.default)());
+  const ariaProps = {
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-label": ariaLabel
+  };
+
+  if (title && iconType) {
+    ariaProps["aria-labelledby"] = titleId;
+  }
+
+  if (subtitle && iconType) {
+    ariaProps["aria-describedby"] = subtitleId;
+  }
 
   const renderCancelButton = () => {
     if (!onCancel) return null;
@@ -100,9 +128,9 @@ const Confirm = ({
         fontSize: "medium"
       }), /*#__PURE__*/_react.default.createElement(_heading.default, {
         title: title,
-        titleId: "carbon-dialog-title",
+        titleId: titleId,
         subheader: subtitle,
-        subtitleId: "carbon-dialog-subtitle",
+        subtitleId: subtitleId,
         divider: false
       }));
     }
@@ -118,7 +146,7 @@ const Confirm = ({
     title: getTitle(),
     "data-component": "confirm",
     role: "alertdialog"
-  }, rest), children, /*#__PURE__*/_react.default.createElement(_confirm.StyledConfirmButtons, null, renderCancelButton(), renderConfirmButton()));
+  }, ariaProps, rest), children, /*#__PURE__*/_react.default.createElement(_confirm.StyledConfirmButtons, null, renderCancelButton(), renderConfirmButton()));
 };
 
 Confirm.defaultProps = {

package/lib/components/dialog/dialog.component.js

@@ -9,6 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid/guid.js"));
+
 var _modal = _interopRequireDefault(require("../modal"));
 
 var _heading = _interopRequireDefault(require("../heading"));
@@ -58,6 +60,12 @@ const Dialog = ({
   const innerContentRef = (0, _react.useRef)();
   const titleRef = (0, _react.useRef)();
   const listenersAdded = (0, _react.useRef)(false);
+  const {
+    current: titleId
+  } = (0, _react.useRef)((0, _guid.default)());
+  const {
+    current: subtitleId
+  } = (0, _react.useRef)((0, _guid.default)());
   const centerDialog = (0, _react.useCallback)(() => {
     const {
       width: dialogWidth,
@@ -133,9 +141,9 @@ const Dialog = ({
     }, typeof title === "string" ? /*#__PURE__*/_react.default.createElement(_heading.default, {
       "data-element": "dialog-title",
       title: title,
-      titleId: "carbon-dialog-title",
+      titleId: titleId,
       subheader: subtitle,
-      subtitleId: "carbon-dialog-subtitle",
+      subtitleId: subtitleId,
       divider: false,
       help: help
     }) : title);
@@ -150,15 +158,10 @@ const Dialog = ({
   const dialogProps = {
     size,
     dialogHeight,
-    "aria-labelledby": rest["aria-labelledby"],
-    "aria-describedby": subtitle ? "carbon-dialog-subtitle" : rest["aria-describedby"],
+    "aria-labelledby": title && typeof title === "string" ? titleId : rest["aria-labelledby"],
+    "aria-describedby": subtitle ? subtitleId : rest["aria-describedby"],
     "aria-label": rest["aria-label"]
   };
-
-  if (title && typeof title === "string") {
-    dialogProps["aria-labelledby"] = "carbon-dialog-title";
-  }
-
   const componentTags = {
     "data-component": rest["data-component"] || "dialog",
     "data-element": rest["data-element"],

package/lib/components/dialog-full-screen/dialog-full-screen.component.js

@@ -9,6 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid/guid.js"));
+
 var _modal = _interopRequireDefault(require("../modal"));
 
 var _heading = _interopRequireDefault(require("../heading"));
@@ -51,11 +53,17 @@ const DialogFullScreen = ({
   onCancel,
   contentRef,
   help,
-  role = "region",
+  role = "dialog",
   ...rest
 }) => {
   const dialogRef = (0, _react.useRef)();
   const headingRef = (0, _react.useRef)();
+  const {
+    current: titleId
+  } = (0, _react.useRef)((0, _guid.default)());
+  const {
+    current: subtitleId
+  } = (0, _react.useRef)((0, _guid.default)());
 
   const closeIcon = () => {
     if (!showCloseIcon || !onCancel) return null;
@@ -74,13 +82,18 @@ const DialogFullScreen = ({
   }, typeof title === "string" ? /*#__PURE__*/_react.default.createElement(_heading.default, {
     "data-element": "dialog-title",
     title: title,
-    titleId: "carbon-dialog-title",
+    titleId: titleId,
     subheader: subtitle,
-    subtitleId: "carbon-dialog-subtitle",
+    subtitleId: subtitleId,
     divider: false,
     help: help
   }) : title, headerChildren);
 
+  const ariaProps = {
+    "aria-labelledby": title && typeof title === "string" ? titleId : ariaLabelledBy,
+    "aria-describedby": subtitle ? subtitleId : ariaDescribedBy,
+    "aria-label": ariaLabel
+  };
   const componentTags = {
     "data-component": "dialog-full-screen",
     "data-element": rest["data-element"],
@@ -94,16 +107,14 @@ const DialogFullScreen = ({
     autoFocus: !disableAutoFocus,
     focusFirstElement: focusFirstElement,
     wrapperRef: dialogRef
-  }, /*#__PURE__*/_react.default.createElement(_dialogFullScreen.default, {
-    "aria-modal": true,
-    "aria-describedby": ariaDescribedBy,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy || "carbon-dialog-title",
+  }, /*#__PURE__*/_react.default.createElement(_dialogFullScreen.default, _extends({
+    "aria-modal": true
+  }, ariaProps, {
     ref: dialogRef,
     "data-element": "dialog-full-screen",
     pagesStyling: pagesStyling,
     role: role
-  }, dialogTitle(), /*#__PURE__*/_react.default.createElement(_content.default, {
+  }), dialogTitle(), /*#__PURE__*/_react.default.createElement(_content.default, {
     hasHeader: title !== undefined,
     "data-element": "content",
     ref: contentRef,

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

@@ -63,7 +63,8 @@ const Icon = /*#__PURE__*/_react.default.forwardRef(({
     tooltipPosition: tooltipPositionFromContext,
     focusable: focusableFromContext,
     tooltipVisible: tooltipVisibleFromContext,
-    disabled: disabledFromContext
+    disabled: disabledFromContext,
+    target
   } = (0, _react.useContext)(_tooltipProvider.TooltipContext);
   /** Return Icon type with overrides */
 
@@ -131,7 +132,8 @@ const Icon = /*#__PURE__*/_react.default.forwardRef(({
       inputSize: inputSize,
       bgColor: tooltipBgColor,
       fontColor: tooltipFontColor,
-      flipOverrides: tooltipFlipOverrides
+      flipOverrides: tooltipFlipOverrides,
+      target: target
     }, icon);
   }
 

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

@@ -38,13 +38,8 @@ const IconButton = /*#__PURE__*/_react.default.forwardRef(({
   disabled,
   ...rest
 }, ref) => {
+  const [internalRef, setInternalRef] = (0, _react.useState)(null);
   const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
-  const hasIconWithTooltip = !!_react.default.Children.toArray(children).find(child => {
-    var _child$props;
-
-    return child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.tooltipMessage;
-  });
-  const [tooltipVisible, setTooltipVisible] = (0, _react.useState)(undefined);
 
   const onKeyDown = e => {
     if (_events.default.isEnterKey(e) || _events.default.isSpaceKey(e)) {
@@ -59,26 +54,23 @@ const IconButton = /*#__PURE__*/_react.default.forwardRef(({
     onAction(e);
   };
 
-  const handleTooltipVisibility = (ev, callbackName) => {
-    setTooltipVisible(["onFocus", "onMouseEnter"].includes(callbackName));
-    if (rest[callbackName]) rest[callbackName](ev);
-  };
-
   return /*#__PURE__*/_react.default.createElement(_iconButton.default, _extends({}, rest, {
     "aria-label": ariaLabel,
     onKeyDown: onKeyDown,
     onClick: handleOnAction,
-    ref: ref,
+    ref: reference => {
+      if (reference) {
+        setInternalRef(reference);
+        if (!ref) return;
+        if (typeof ref === "object") ref.current = reference;
+        if (typeof ref === "function") ref(reference);
+      }
+    },
     disabled: disabled
-  }, !disabled && hasIconWithTooltip && {
-    onFocus: ev => handleTooltipVisibility(ev, "onFocus"),
-    onBlur: ev => handleTooltipVisibility(ev, "onBlur"),
-    onMouseEnter: ev => handleTooltipVisibility(ev, "onMouseEnter"),
-    onMouseLeave: ev => handleTooltipVisibility(ev, "onMouseLeave")
   }, marginProps), /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
     disabled: disabled,
-    tooltipVisible: tooltipVisible,
-    focusable: false
+    focusable: false,
+    target: internalRef
   }, children));
 });
 

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 }; }
 
@@ -44,15 +42,14 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef(({
   bgColor,
   fontColor,
   flipOverrides,
+  target,
   ...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 +72,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({
@@ -85,6 +82,7 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef(({
     visible: isVisible
   }, {
     render: attrs => tooltip(attrs, message),
+    reference: target,
     popperOptions: {
       modifiers: [...(flipOverrides ? [{
         name: "flip",
@@ -123,6 +121,8 @@ Tooltip.propTypes = {
 
   /** Defines the size of the tooltip content */
   size: _propTypes.default.oneOf(["medium", "large"]),
+  // Reference element, tooltip will be positioned in relation to this element
+  target: _propTypes.default.instanceOf(Element),
 
   /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
   bgColor: _propTypes.default.string,

package/lib/components/tooltip/tooltip.d.ts

@@ -25,6 +25,7 @@ export interface TooltipProps {
    * (see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements)
    */
   flipOverrides?: ["top" | "bottom" | "left" | "right"];
+  target?: Element;
 }
 
 export interface TooltipInternalProps extends TooltipProps {

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": "104.1.0",
+  "version": "104.4.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -15,8 +15,8 @@
   "scripts": {
     "start": "node ./scripts/check_node_version.js && start-storybook -p 9001 -s .assets -c .storybook",
     "start:debug-theme": "cross-env STORYBOOK_DEBUG_THEME=true npm run start",
-    "test": "TZ=UTC jest --config=./jest.conf.json",
-    "test-update": "TZ=UTC jest --config=./jest.conf.json --updateSnapshot",
+    "test": "jest --config=./jest.conf.json",
+    "test-update": "jest --config=./jest.conf.json --updateSnapshot",
     "test:cypress": "cypress open",
     "cypress:react": "npx cypress open-ct",
     "debug": "node --inspect ./node_modules/jest-cli/bin/jest --watch --config=./jest.conf.json",
@@ -112,6 +112,7 @@
     "cypress-real-events": "^1.6.0",
     "cypress-storybook": "^0.5.1",
     "cz-conventional-changelog": "^3.3.0",
+    "date-fns-tz": "^1.2.2",
     "draft-js": "^0.11.7",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.14.0",