carbon-react 104.1.1 → 104.2.0

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/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/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/tooltip/tooltip.component.js

@@ -42,6 +42,7 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef(({
   bgColor,
   fontColor,
   flipOverrides,
+  target,
   ...rest
 }, ref) => {
   const tooltipRef = (0, _react.useRef)(ref || null);
@@ -81,6 +82,7 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef(({
     visible: isVisible
   }, {
     render: attrs => tooltip(attrs, message),
+    reference: target,
     popperOptions: {
       modifiers: [...(flipOverrides ? [{
         name: "flip",
@@ -119,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/package.json

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