carbon-react 112.0.3 → 113.0.0

package/esm/__internal__/input/input-presentation.style.d.ts

@@ -1,6 +1,6 @@
 import { CommonInputPresentationProps } from "./input-presentation.component";
 import { InputContextProps } from "../input-behaviour";
 import { CarbonProviderProps } from "../../components/carbon-provider";
-export declare const StyledInputPresentationContainer: import("styled-components").StyledComponent<"div", any, Pick<CommonInputPresentationProps, "maxWidth" | "inputWidth">, never>;
+export declare const StyledInputPresentationContainer: import("styled-components").StyledComponent<"div", any, Pick<CommonInputPresentationProps, "inputWidth" | "maxWidth">, never>;
 declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "disabled" | "error" | "info" | "warning" | "align" | "readOnly" | "size" | "hasIcon"> & Pick<CarbonProviderProps, "validationRedesignOptIn">, never>;
 export default InputPresentationStyle;

package/esm/__internal__/tooltip-provider/index.d.ts

@@ -9,7 +9,7 @@ interface TooltipProviderProps {
     focusable?: boolean;
     tooltipVisible?: boolean;
     disabled?: boolean;
-    target?: Element;
+    target?: HTMLElement;
 }
 interface ToolbarContextProps extends Omit<TooltipProviderProps, "children"> {
     tooltipId?: {

package/esm/components/tabs/__internal__/tab-title/tab-title.style.js

@@ -237,136 +237,140 @@ const StyledTabTitle = styled.button`
   isInSidebar
 }) => css`
     height: ${size === "large" ? "var(--sizing600)" : "var(--sizing500)"};
-    
+
     ${position === "top" && css`
-        ${borders && !(noRightBorder || noLeftBorder) && css`
-          &:nth-of-type(n + 1) {
-            margin-left: -1px;
-          }
-          &:first-child {
-            margin-left: 0;
-          }
-        `}
+      ${borders && !(noRightBorder || noLeftBorder) && css`
+        &:nth-of-type(n + 1) {
+          margin-left: -1px;
+        }
+        &:first-child {
+          margin-left: 0;
+        }
       `}
+    `}
     ${position === "left" && css`
-        ${borders && css`
-          &:nth-of-type(n + 1) {
-            margin-top: -1px;
-          }
-          &:first-child {
-            margin-top: 0;
-          }
-        `}
+      ${borders && css`
+        &:nth-of-type(n + 1) {
+          margin-top: -1px;
+        }
+        &:first-child {
+          margin-top: 0;
+        }
       `}
+    `}
 
     ${!isTabSelected && css`
-        color: var(--colorsActionMinorYin090);
+      color: var(--colorsActionMinorYin090);
 
-        &:hover {
-          background: var(--colorsActionMinor100);
-          color: var(--colorsActionMinorYin090);
-          outline: none;
-        }
-        &:focus {
-          color: var(--colorsActionMinorYin090);
-          outline: none;
-        }
-      `}
+      &:hover {
+        background: var(--colorsActionMinor100);
+        color: var(--colorsActionMinorYin090);
+        outline: none;
+      }
+      &:focus {
+        color: var(--colorsActionMinorYin090);
+        outline: none;
+      }
+    `}
 
     ${isTabSelected && css`
-        color: var(--colorsActionMajorYin090);
-        background-color: var(--colorsActionMajorYang100);
-
-        ${(error || warning || info) && css`
-          padding-bottom: 0px;
-        `}
+      color: var(--colorsActionMajorYin090);
+      background-color: var(--colorsActionMajorYang100);
 
-        &:hover {
-          background-color: var(--colorsActionMajorYang100);
-          border-bottom-color: ${alternateStyling ? "var(--colorsActionMinor100)" : "var(--colorsActionMajor500)"};
-          color: var(--colorsActionMajorYin090);
-          cursor: default;
-        }
+      ${(error || warning || info) && css`
+        padding-bottom: 0px;
       `}
 
+      &:hover {
+        background-color: var(--colorsActionMajorYang100);
+        border-bottom-color: ${alternateStyling ? "var(--colorsActionMinor100)" : "var(--colorsActionMajor500)"};
+        color: var(--colorsActionMajorYin090);
+        cursor: default;
+      }
+    `}
+
     &:focus {
-      outline: ${isInSidebar ? "none;" : "var(--borderWidth300) solid var(--colorsSemanticFocus500);"}
+      outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
       z-index: 2;
+
+      ${isInSidebar && css`
+        outline-offset: -3px;
+      `}
     }
 
     ${position === "left" && css`
-        background-color: transparent;
-        border-bottom: 0px;
+      background-color: transparent;
+      border-bottom: 0px;
 
-        ${!isInSidebar && !error && css`
-          border-right: ${alternateStyling ? "1px" : "2px"} solid
-            var(--colorsActionMinor100);
-        `}
+      ${!isInSidebar && !error && css`
+        border-right: ${alternateStyling ? "1px" : "2px"} solid
+          var(--colorsActionMinor100);
+      `}
 
-        ${!borders && css`
-          ${StyledTitleContent} {
-            border-bottom: none;
-          }
-        `}
+      ${!borders && css`
+        ${StyledTitleContent} {
+          border-bottom: none;
+        }
+      `}
 
       display: flex;
-        height: auto;
-        margin-left: 0px;
+      height: auto;
+      margin-left: 0px;
 
-        &:first-child {
-          margin-top: 0;
-        }
+      &:first-child {
+        margin-top: 0;
+      }
 
-        &:hover {
-          ${alternateStyling && "border-right-color: var(--colorsActionMinor100)"}
-        }
+      &:hover {
+        ${alternateStyling && "border-right-color: var(--colorsActionMinor100)"}
+      }
 
-        ${(warning || info) && css`
-          border-right: none;
+      ${(warning || info) && css`
+        border-right: none;
+      `}
+
+      ${isTabSelected && css`
+        ${alternateStyling && css`
+          border-right-color: var(--colorsActionMinor100);
         `}
 
-        ${isTabSelected && css`
-          ${alternateStyling && css`
-            border-right-color: var(--colorsActionMinor100);
-          `}
+        ${!alternateStyling && css`
+          border-right: none;
+          padding-bottom: 0px;
 
-          ${!alternateStyling && css`
+          ${StyledTitleContent} {
+            ${!(error || warning || info) && "margin-right: 2px;"}
             border-right: none;
-            padding-bottom: 0px;
-
-            ${StyledTitleContent} {
-              ${!(error || warning || info) && "margin-right: 2px;"}
-              border-right: none;
-            }
-          `}
+          }
+        `}
   
         background-color: var(--colorsActionMajorYang100);
 
-          &:hover {
-            ${alternateStyling && "border-right-color: var(--colorsActionMinor100);"}
-            background-color: var(--colorsActionMajorYang100);
-            ${(error || warning || info) && "border-right-color: var(--colorsSemanticNegative500);"}
-          }
+        &:hover {
+          ${alternateStyling && "border-right-color: var(--colorsActionMinor100);"}
+          background-color: var(--colorsActionMajorYang100);
+          ${(error || warning || info) && "border-right-color: var(--colorsSemanticNegative500);"}
+        }
 
-          &:focus {
-            ${(error || warning || info) && "border-right-color: var(--colorsSemanticNegative500);"}
-          }
-        `}
+        &:focus {
+          ${(error || warning || info) && "border-right-color: var(--colorsSemanticNegative500);"}
+        }
       `}
+    `}
 
     ${alternateStyling && css`
-        &:focus {
-          background-color: var(--colorsActionMinor200);
-        }
+      &:focus {
+        background-color: var(--colorsActionMinor200);
+      }
 
-        &:hover {
-          background-color: ${isTabSelected ? "var(--colorsActionMinor200)" : "var(--colorsActionMinor250)"};
-        }
+      &:hover {
+        background-color: ${isTabSelected ? "var(--colorsActionMinor200)" : "var(--colorsActionMinor250)"};
+      }
 
-        ${isTabSelected && css`
-          background-color: var(--colorsActionMinor200);
-        `}
+      ${isTabSelected && css`
+        background-color: var(--colorsActionMinor200);
       `}
+    `}
   `}
 `;
 const StyledLayoutWrapper = styled.div`

package/esm/components/tooltip/tooltip-pointer.style.d.ts

@@ -1,11 +1,3 @@
-import { Placement } from "tippy.js";
-interface StyledTooltipPointer {
-    /** Sets position of the tooltip */
-    position?: Placement;
-    /** Defines the message type */
-    type?: string;
-    /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
-    bgColor?: string;
-}
-declare const StyledTooltipPointer: import("styled-components").StyledComponent<"div", any, StyledTooltipPointer, never>;
+import { TooltipProps } from "./tooltip.component";
+declare const StyledTooltipPointer: import("styled-components").StyledComponent<"div", any, Pick<TooltipProps, "type" | "bgColor">, never>;
 export default StyledTooltipPointer;

package/esm/components/tooltip/tooltip-pointer.style.js

@@ -9,58 +9,19 @@ const pointerColor = (theme, bgColor, type) => {
 
 const StyledTooltipPointer = styled.div`
   ${({
-  position,
   theme,
   type,
   bgColor
 }) => css`
+    z-index: ${theme.zIndex.popover}; // TODO (tokens): implement elevation tokens - FE-4437
+    background: ${pointerColor(theme, bgColor, type)};
     position: absolute;
-    width: 0;
-    height: 0;
-
-    ${position === "top" && css`
-      border-left: 8px solid transparent;
-      border-right: 8px solid transparent;
-      border-top: 8px solid ${pointerColor(theme, bgColor, type)};
-      bottom: calc(-1 * var(--spacing100));
-      @-moz-document url-prefix() {
-        bottom: -7px;
-      }
-    `}
-
-    ${position === "bottom" && css`
-      border-left: 8px solid transparent;
-      border-right: 8px solid transparent;
-      border-bottom: 8px solid ${pointerColor(theme, bgColor, type)};
-      top: calc(-1 * var(--spacing100));
-      @-moz-document url-prefix() {
-        top: -7px;
-      }
-    `}
-
-    ${position === "right" && css`
-      border-top: 8px solid transparent;
-      border-bottom: 8px solid transparent;
-      border-right: 8px solid ${pointerColor(theme, bgColor, type)};
-      left: calc(-1 * var(--spacing100));
-      @-moz-document url-prefix() {
-        left: -7px;
-      }
-    `}
-
-    ${position === "left" && css`
-      border-top: 8px solid transparent;
-      border-bottom: 8px solid transparent;
-      border-left: 8px solid ${pointerColor(theme, bgColor, type)};
-      right: calc(-1 * var(--spacing100));
-      @-moz-document url-prefix() {
-        right: -7px;
-      }
-    `}
+    width: 12px;
+    height: 12px;
+    transform: rotate(45deg);
   `}
 `;
 StyledTooltipPointer.defaultProps = {
-  theme: baseTheme,
-  position: "top"
+  theme: baseTheme
 };
 export default StyledTooltipPointer;

package/esm/components/tooltip/tooltip.component.d.ts

@@ -27,7 +27,7 @@ export interface TooltipProps {
      */
     flipOverrides?: TooltipPositions[];
     /** @ignore @private */
-    target?: Element;
+    target?: HTMLElement;
     /** @ignore @private */
     isPartOfInput?: boolean;
     /** @ignore @private */

package/esm/components/tooltip/tooltip.component.js

@@ -1,17 +1,28 @@
 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); }
 
-import React from "react";
+import React, { useRef, useMemo, useCallback, useState, useEffect } from "react";
 import PropTypes from "prop-types";
-import Tippy from "@tippyjs/react/headless";
-import { sticky } from "tippy.js";
 import invariant from "invariant";
+import { offset, flip, shift, arrow, limitShift, autoUpdate, useFloating } from "@floating-ui/react-dom";
 import StyledTooltip from "./tooltip.style";
 import StyledPointer from "./tooltip-pointer.style";
 import { TOOLTIP_POSITIONS } from "./tooltip.config";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
-import CarbonScopedTokensProvider from "../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component";
+import Portal from "../portal";
+
+function preserveRef(ref, node) {
+  if (!ref) return;
+
+  if (typeof ref === "function") {
+    ref(node);
+  }
+
+  if (typeof ref === "object" && "current" in ref) {
+    ref.current = node;
+  }
+}
+
 const TOOLTIP_DELAY = 100;
-const tippyPlugins = [sticky];
 const Tooltip = /*#__PURE__*/React.forwardRef(({
   children,
   isVisible,
@@ -20,7 +31,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(({
   type,
   size = "medium",
   isPartOfInput,
-  inputSize,
+  inputSize = "medium",
   id,
   bgColor,
   fontColor,
@@ -28,61 +39,155 @@ const Tooltip = /*#__PURE__*/React.forwardRef(({
   target,
   ...rest
 }, ref) => {
-  const isFlipOverridesValid = !flipOverrides || Array.isArray(flipOverrides) && flipOverrides.every(placement => TOOLTIP_POSITIONS.includes(placement));
-  !isFlipOverridesValid ? process.env.NODE_ENV !== "production" ? invariant(false, `The flipOverrides prop supplied to Tooltip must be an array containing some or all of ["top", "bottom", "left", "right"].`) : invariant(false) : void 0;
+  const targetInternalRef = useRef(null);
+  const isControlled = isVisible !== undefined;
+  const [isOpen, setIsOpen] = useState(false);
+  let showTooltip = isOpen;
 
-  const tooltip = (attrs, content) => {
-    const currentPosition = attrs["data-placement"] || position;
-    return /*#__PURE__*/React.createElement(CarbonScopedTokensProvider, null, /*#__PURE__*/React.createElement(StyledTooltip, _extends({
-      "data-element": "tooltip",
-      role: "tooltip",
-      tabIndex: -1,
-      type: type,
-      size: size,
-      id: id
-    }, tagComponent("tooltip", rest), {
-      isPartOfInput: isPartOfInput,
-      inputSize: inputSize
-    }, attrs, {
-      position: currentPosition,
-      ref: ref,
-      bgColor: bgColor,
-      fontColor: fontColor
-    }), /*#__PURE__*/React.createElement(StyledPointer, _extends({
-      key: "pointer",
-      type: type
-    }, attrs, {
-      position: currentPosition,
-      "data-popper-arrow": "",
-      "data-element": "tooltip-pointer",
-      bgColor: bgColor
-    })), content));
-  };
+  if (isControlled) {
+    showTooltip = isVisible;
+  }
 
-  return /*#__PURE__*/React.createElement(Tippy, _extends({
-    placement: position,
-    delay: TOOLTIP_DELAY
-  }, isVisible !== undefined && {
-    visible: isVisible
-  }, {
-    plugins: tippyPlugins,
-    sticky: true,
-    render: attrs => tooltip(attrs, message),
-    reference: target,
-    popperOptions: {
-      modifiers: [...(flipOverrides ? [{
-        name: "flip",
-        options: {
-          fallbackPlacements: flipOverrides
-        }
-      }] : []), {
-        name: "computeStyles",
-        options: {
-          gpuAcceleration: false
-        }
-      }]
+  const showDelayedTimeout = useRef(undefined);
+  const hideDelayedTimeout = useRef(undefined);
+  useEffect(() => {
+    return () => {
+      clearTimeout(showDelayedTimeout.current);
+      clearTimeout(hideDelayedTimeout.current);
+    };
+  }, []);
+  const show = useCallback(() => setIsOpen(true), []);
+  const hide = useCallback(() => setIsOpen(false), []);
+  const showDelayed = useCallback(() => {
+    showDelayedTimeout.current = window.setTimeout(show, TOOLTIP_DELAY);
+  }, [show]);
+  const hideDelayed = useCallback(() => {
+    hideDelayedTimeout.current = window.setTimeout(hide, TOOLTIP_DELAY);
+  }, [hide]);
+  useEffect(() => {
+    const events = {
+      mouseenter: showDelayed,
+      mouseleave: hideDelayed,
+      focus: show,
+      blur: hide
+    };
+    const targetElement = target || targetInternalRef.current;
+
+    if (!isControlled) {
+      Object.entries(events).forEach(([event, handler]) => {
+        targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener(event, handler);
+      });
     }
-  }), children);
+
+    return () => {
+      if (!isControlled) {
+        Object.entries(events).forEach(([event, handler]) => {
+          targetElement === null || targetElement === void 0 ? void 0 : targetElement.removeEventListener(event, handler);
+        });
+      }
+    };
+  }, [children, show, showDelayed, hide, hideDelayed, isControlled, target]);
+  const flipOverridesRef = useRef(flipOverrides);
+  flipOverridesRef.current = flipOverrides;
+  const arrowReference = useRef(null);
+  const calculateOffset = useCallback(placement => {
+    let mainAxisOffset = 9;
+
+    if (isPartOfInput) {
+      const offsets = {
+        small: 5,
+        medium: ["top", "bottom"].includes(placement) ? 6 : 8,
+        large: ["top", "bottom"].includes(placement) ? 10 : 12
+      };
+      mainAxisOffset = offsets[inputSize];
+    }
+
+    return mainAxisOffset;
+  }, [inputSize, isPartOfInput]);
+  const defaultMiddleware = useMemo(() => [offset(({
+    placement
+  }) => ({
+    mainAxis: calculateOffset(placement)
+  })), flip({
+    fallbackPlacements: flipOverridesRef.current
+  }), shift({
+    padding: 5,
+    limiter: limitShift({
+      offset: ({
+        rects
+      }) => ({
+        mainAxis: rects.reference.height
+      })
+    })
+  }), arrow({
+    element: arrowReference
+  })], [calculateOffset, arrowReference]);
+  const {
+    x,
+    y,
+    reference,
+    floating,
+    strategy,
+    placement: currentPlacement,
+    middlewareData
+  } = useFloating({
+    placement: position,
+    middleware: defaultMiddleware,
+    whileElementsMounted: autoUpdate
+  });
+  const tooltipStyle = {
+    position: strategy,
+    top: y ?? 0,
+    left: x ?? 0
+  };
+  const handleTargetRef = useCallback(node => {
+    reference(target || node);
+    targetInternalRef.current = node;
+    preserveRef(children.ref, node);
+  }, [reference, children, target]);
+  const handleFloatingRef = useCallback(node => {
+    floating(node);
+    preserveRef(ref, node);
+  }, [floating, ref]);
+  const staticSide = {
+    top: "bottom",
+    right: "left",
+    bottom: "top",
+    left: "right"
+  }[currentPlacement.split("-")[0]];
+  const {
+    x: arrowX,
+    y: arrowY
+  } = middlewareData.arrow || {};
+  const arrowStyle = {
+    left: arrowX,
+    top: arrowY,
+    [staticSide]: "-6px"
+  };
+  const isFlipOverridesValid = !flipOverrides || Array.isArray(flipOverrides) && flipOverrides.every(placement => TOOLTIP_POSITIONS.includes(placement));
+  !isFlipOverridesValid ? process.env.NODE_ENV !== "production" ? invariant(false, `The flipOverrides prop supplied to Tooltip must be an array containing some or all of ["top", "bottom", "left", "right"].`) : invariant(false) : void 0;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.cloneElement(children, {
+    ref: handleTargetRef
+  }), showTooltip ? /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(StyledTooltip, _extends({
+    "data-element": "tooltip",
+    role: "tooltip",
+    tabIndex: -1,
+    type: type,
+    size: size,
+    id: id
+  }, tagComponent("tooltip", rest), {
+    ref: handleFloatingRef,
+    bgColor: bgColor,
+    fontColor: fontColor,
+    style: tooltipStyle,
+    "data-placement": currentPlacement
+  }), /*#__PURE__*/React.createElement(StyledPointer, {
+    type: type,
+    ref: arrowReference,
+    "data-element": "tooltip-pointer",
+    bgColor: bgColor,
+    style: arrowStyle
+  }), message)) : null);
 });
 Tooltip.propTypes = {
   "bgColor": PropTypes.string,

package/esm/components/tooltip/tooltip.style.d.ts

@@ -1,7 +1,3 @@
-import { Placement } from "tippy.js";
 import { TooltipProps } from "./tooltip.component";
-interface StyledTooltipProps extends Omit<TooltipProps, "children" | "message" | "position"> {
-    position: Placement;
-}
-declare const StyledTooltip: import("styled-components").StyledComponent<"div", any, StyledTooltipProps, never>;
+declare const StyledTooltip: import("styled-components").StyledComponent<"div", any, Pick<TooltipProps, "type" | "size" | "bgColor" | "fontColor">, never>;
 export default StyledTooltip;

package/esm/components/tooltip/tooltip.style.js

@@ -16,55 +16,19 @@ const tooltipColor = (theme, bgColor, type) => {
   return type === "error" ? "var(--colorsSemanticNegative500)" : "var(--colorsSemanticNeutral500)";
 };
 
-const tooltipOffset = (position, inputSize, isPartOfInput) => {
-  if (!isPartOfInput) {
-    return {
-      [position]: "1px"
-    };
-  }
-
-  switch (inputSize) {
-    case "small":
-      return `
-        ${position}: 5px;
-        @-moz-document url-prefix() { 
-          ${position}: ${["top", "bottom"].includes(position) ? "7px" : "6px"};
-        }
-      `;
-
-    case "large":
-      return `
-        ${position}: ${["top", "bottom"].includes(position) ? "0px" : "-2px"};
-        @-moz-document url-prefix() { 
-          ${position}: -1px;
-        }
-      `;
-
-    default:
-      return `
-        ${position}: ${["top", "bottom"].includes(position) ? "4px" : "2px"};
-        @-moz-document url-prefix() { 
-          ${position}: 4px;
-        }
-      `;
-  }
-};
-
 const StyledTooltip = styled.div`
   ${({
-  position,
   size,
   theme,
   type,
-  isPartOfInput,
-  inputSize = "medium",
   bgColor,
   fontColor
 }) => css`
     bottom: auto;
     right: auto;
     max-width: 300px;
-    position: relative;
+    width: max-content;
+    position: absolute;
     animation: ${fadeIn} 0.2s linear;
     z-index: ${theme.zIndex.popover}; // TODO (tokens): implement elevation tokens - FE-4437
     text-align: left;
@@ -77,7 +41,6 @@ const StyledTooltip = styled.div`
     line-height: 1.5rem;
     font-weight: 400;
     background-color: ${tooltipColor(theme, bgColor, type)};
-    ${tooltipOffset(position, inputSize, isPartOfInput)};
   `}
 `;
 StyledTooltip.defaultProps = {