carbon-react 112.0.4 → 113.0.1

package/esm/__internal__/focus-trap/focus-trap-utils.d.ts

@@ -1,4 +1,4 @@
 declare const defaultFocusableSelectors = "button:not([disabled]), [href], input:not([type=\"hidden\"]):not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]";
 declare const setElementFocus: (element: HTMLElement) => void;
-declare const getNextElement: (element: HTMLElement, focusableElements: HTMLElement[], shiftKey: boolean) => HTMLElement;
+declare const getNextElement: (element: HTMLElement, focusableElements: HTMLElement[], shiftKey: boolean) => HTMLElement | undefined;
 export { defaultFocusableSelectors, getNextElement, setElementFocus };

package/esm/__internal__/focus-trap/focus-trap-utils.js

@@ -51,7 +51,7 @@ const getNextElement = (element, focusableElements, shiftKey) => {
       return focusableElements[0];
     }
 
-    return element;
+    return undefined;
   }
 
   const increment = shiftKey ? -1 : 1;

package/esm/__internal__/focus-trap/focus-trap.component.js

@@ -78,33 +78,22 @@ const FocusTrap = ({
         return;
       }
 
+      if (ev.key !== "Tab") return;
+
+      if (!(focusableElements !== null && focusableElements !== void 0 && focusableElements.length)) {
+        /* Block the trap */
+        ev.preventDefault();
+        return;
+      }
+
       const activeElement = document.activeElement;
+      const isWrapperFocused = activeElement === (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
+      const elementWhenWrapperFocused = ev.shiftKey ? firstElement : lastElement;
+      const elementToFocus = getNextElement(isWrapperFocused ? elementWhenWrapperFocused : activeElement, focusableElements, ev.shiftKey);
 
-      if (ev.key === "Tab") {
-        if (!(focusableElements !== null && focusableElements !== void 0 && focusableElements.length)) {
-          /* Block the trap */
-          ev.preventDefault();
-        } else if (ev.shiftKey) {
-          /* shift + tab */
-          let elementToFocus;
-
-          if (activeElement === (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current)) {
-            elementToFocus = getNextElement(firstElement, focusableElements, ev.shiftKey);
-          } else {
-            elementToFocus = getNextElement(activeElement, focusableElements, ev.shiftKey);
-          }
-
-          setElementFocus(elementToFocus);
-          ev.preventDefault();
-        } else if (activeElement === (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current)) {
-          const elementToFocus = getNextElement(lastElement, focusableElements, ev.shiftKey);
-          setElementFocus(elementToFocus);
-          ev.preventDefault();
-        } else {
-          const elementToFocus = getNextElement(activeElement, focusableElements, ev.shiftKey);
-          setElementFocus(elementToFocus);
-          ev.preventDefault();
-        }
+      if (elementToFocus) {
+        setElementFocus(elementToFocus);
+        ev.preventDefault();
       }
     };
 
@@ -169,7 +158,17 @@ const FocusTrap = ({
   });
   return /*#__PURE__*/React.createElement("div", {
     ref: trapRef
-  }, clonedChildren);
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-element": "tab-guard-top" // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    ,
+    tabIndex: 0,
+    onFocus: () => setElementFocus(lastElement)
+  }), clonedChildren, /*#__PURE__*/React.createElement("div", {
+    "data-element": "tab-guard-bottom" // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    ,
+    tabIndex: 0,
+    onFocus: () => setElementFocus(firstElement)
+  }));
 };
 
 FocusTrap.propTypes = {

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/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 = {

package/esm/hooks/__internal__/useFloating/useFloating.d.ts

@@ -2,8 +2,8 @@
 import { Strategy, Middleware, Placement } from "@floating-ui/dom";
 export interface UseFloatingProps {
     isOpen?: boolean;
-    reference: React.RefObject<HTMLElement>;
-    floating: React.RefObject<HTMLElement>;
+    reference: React.RefObject<HTMLElement | null>;
+    floating: React.RefObject<HTMLElement | null>;
     strategy?: Strategy;
     middleware?: Middleware[];
     placement?: Placement;

package/lib/__internal__/focus-trap/focus-trap-utils.d.ts

@@ -1,4 +1,4 @@
 declare const defaultFocusableSelectors = "button:not([disabled]), [href], input:not([type=\"hidden\"]):not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]";
 declare const setElementFocus: (element: HTMLElement) => void;
-declare const getNextElement: (element: HTMLElement, focusableElements: HTMLElement[], shiftKey: boolean) => HTMLElement;
+declare const getNextElement: (element: HTMLElement, focusableElements: HTMLElement[], shiftKey: boolean) => HTMLElement | undefined;
 export { defaultFocusableSelectors, getNextElement, setElementFocus };

package/lib/__internal__/focus-trap/focus-trap-utils.js

@@ -60,7 +60,7 @@ const getNextElement = (element, focusableElements, shiftKey) => {
       return focusableElements[0];
     }
 
-    return element;
+    return undefined;
   }
 
   const increment = shiftKey ? -1 : 1;

package/lib/__internal__/focus-trap/focus-trap.component.js

@@ -95,33 +95,22 @@ const FocusTrap = ({
         return;
       }
 
+      if (ev.key !== "Tab") return;
+
+      if (!(focusableElements !== null && focusableElements !== void 0 && focusableElements.length)) {
+        /* Block the trap */
+        ev.preventDefault();
+        return;
+      }
+
       const activeElement = document.activeElement;
+      const isWrapperFocused = activeElement === (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
+      const elementWhenWrapperFocused = ev.shiftKey ? firstElement : lastElement;
+      const elementToFocus = (0, _focusTrapUtils.getNextElement)(isWrapperFocused ? elementWhenWrapperFocused : activeElement, focusableElements, ev.shiftKey);
 
-      if (ev.key === "Tab") {
-        if (!(focusableElements !== null && focusableElements !== void 0 && focusableElements.length)) {
-          /* Block the trap */
-          ev.preventDefault();
-        } else if (ev.shiftKey) {
-          /* shift + tab */
-          let elementToFocus;
-
-          if (activeElement === (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current)) {
-            elementToFocus = (0, _focusTrapUtils.getNextElement)(firstElement, focusableElements, ev.shiftKey);
-          } else {
-            elementToFocus = (0, _focusTrapUtils.getNextElement)(activeElement, focusableElements, ev.shiftKey);
-          }
-
-          (0, _focusTrapUtils.setElementFocus)(elementToFocus);
-          ev.preventDefault();
-        } else if (activeElement === (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current)) {
-          const elementToFocus = (0, _focusTrapUtils.getNextElement)(lastElement, focusableElements, ev.shiftKey);
-          (0, _focusTrapUtils.setElementFocus)(elementToFocus);
-          ev.preventDefault();
-        } else {
-          const elementToFocus = (0, _focusTrapUtils.getNextElement)(activeElement, focusableElements, ev.shiftKey);
-          (0, _focusTrapUtils.setElementFocus)(elementToFocus);
-          ev.preventDefault();
-        }
+      if (elementToFocus) {
+        (0, _focusTrapUtils.setElementFocus)(elementToFocus);
+        ev.preventDefault();
       }
     };
 
@@ -187,7 +176,17 @@ const FocusTrap = ({
 
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: trapRef
-  }, clonedChildren);
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    "data-element": "tab-guard-top" // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    ,
+    tabIndex: 0,
+    onFocus: () => (0, _focusTrapUtils.setElementFocus)(lastElement)
+  }), clonedChildren, /*#__PURE__*/_react.default.createElement("div", {
+    "data-element": "tab-guard-bottom" // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    ,
+    tabIndex: 0,
+    onFocus: () => (0, _focusTrapUtils.setElementFocus)(firstElement)
+  }));
 };
 
 FocusTrap.propTypes = {

package/lib/__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/lib/__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/lib/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/lib/components/tooltip/tooltip-pointer.style.js

@@ -24,59 +24,20 @@ const pointerColor = (theme, bgColor, type) => {
 
 const StyledTooltipPointer = _styledComponents.default.div`
   ${({
-  position,
   theme,
   type,
   bgColor
 }) => (0, _styledComponents.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" && (0, _styledComponents.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" && (0, _styledComponents.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" && (0, _styledComponents.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" && (0, _styledComponents.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: _base.default,
-  position: "top"
+  theme: _base.default
 };
 var _default = StyledTooltipPointer;
 exports.default = _default;

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

@@ -5,16 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Tooltip = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _headless = _interopRequireDefault(require("@tippyjs/react/headless"));
-
-var _tippy = require("tippy.js");
-
 var _invariant = _interopRequireDefault(require("invariant"));
 
+var _reactDom = require("@floating-ui/react-dom");
+
 var _tooltip = _interopRequireDefault(require("./tooltip.style"));
 
 var _tooltipPointer = _interopRequireDefault(require("./tooltip-pointer.style"));
@@ -23,14 +21,29 @@ var _tooltip2 = require("./tooltip.config");
 
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 
-var _carbonScopedTokensProvider = _interopRequireDefault(require("../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component"));
+var _portal = _interopRequireDefault(require("../portal"));
 
 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); }
 
+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 = [_tippy.sticky];
 
 const Tooltip = /*#__PURE__*/_react.default.forwardRef(({
   children,
@@ -40,7 +53,7 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef(({
   type,
   size = "medium",
   isPartOfInput,
-  inputSize,
+  inputSize = "medium",
   id,
   bgColor,
   fontColor,
@@ -48,61 +61,155 @@ const Tooltip = /*#__PURE__*/_react.default.forwardRef(({
   target,
   ...rest
 }, ref) => {
-  const isFlipOverridesValid = !flipOverrides || Array.isArray(flipOverrides) && flipOverrides.every(placement => _tooltip2.TOOLTIP_POSITIONS.includes(placement));
-  !isFlipOverridesValid ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, `The flipOverrides prop supplied to Tooltip must be an array containing some or all of ["top", "bottom", "left", "right"].`) : (0, _invariant.default)(false) : void 0;
+  const targetInternalRef = (0, _react.useRef)(null);
+  const isControlled = isVisible !== undefined;
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  let showTooltip = isOpen;
+
+  if (isControlled) {
+    showTooltip = isVisible;
+  }
+
+  const showDelayedTimeout = (0, _react.useRef)(undefined);
+  const hideDelayedTimeout = (0, _react.useRef)(undefined);
+  (0, _react.useEffect)(() => {
+    return () => {
+      clearTimeout(showDelayedTimeout.current);
+      clearTimeout(hideDelayedTimeout.current);
+    };
+  }, []);
+  const show = (0, _react.useCallback)(() => setIsOpen(true), []);
+  const hide = (0, _react.useCallback)(() => setIsOpen(false), []);
+  const showDelayed = (0, _react.useCallback)(() => {
+    showDelayedTimeout.current = window.setTimeout(show, TOOLTIP_DELAY);
+  }, [show]);
+  const hideDelayed = (0, _react.useCallback)(() => {
+    hideDelayedTimeout.current = window.setTimeout(hide, TOOLTIP_DELAY);
+  }, [hide]);
+  (0, _react.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);
+      });
+    }
 
-  const tooltip = (attrs, content) => {
-    const currentPosition = attrs["data-placement"] || position;
-    return /*#__PURE__*/_react.default.createElement(_carbonScopedTokensProvider.default, null, /*#__PURE__*/_react.default.createElement(_tooltip.default, _extends({
-      "data-element": "tooltip",
-      role: "tooltip",
-      tabIndex: -1,
-      type: type,
-      size: size,
-      id: id
-    }, (0, _tags.default)("tooltip", rest), {
-      isPartOfInput: isPartOfInput,
-      inputSize: inputSize
-    }, attrs, {
-      position: currentPosition,
-      ref: ref,
-      bgColor: bgColor,
-      fontColor: fontColor
-    }), /*#__PURE__*/_react.default.createElement(_tooltipPointer.default, _extends({
-      key: "pointer",
-      type: type
-    }, attrs, {
-      position: currentPosition,
-      "data-popper-arrow": "",
-      "data-element": "tooltip-pointer",
-      bgColor: bgColor
-    })), content));
-  };
+    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 = (0, _react.useRef)(flipOverrides);
+  flipOverridesRef.current = flipOverrides;
+  const arrowReference = (0, _react.useRef)(null);
+  const calculateOffset = (0, _react.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 /*#__PURE__*/_react.default.createElement(_headless.default, _extends({
+    return mainAxisOffset;
+  }, [inputSize, isPartOfInput]);
+  const defaultMiddleware = (0, _react.useMemo)(() => [(0, _reactDom.offset)(({
+    placement
+  }) => ({
+    mainAxis: calculateOffset(placement)
+  })), (0, _reactDom.flip)({
+    fallbackPlacements: flipOverridesRef.current
+  }), (0, _reactDom.shift)({
+    padding: 5,
+    limiter: (0, _reactDom.limitShift)({
+      offset: ({
+        rects
+      }) => ({
+        mainAxis: rects.reference.height
+      })
+    })
+  }), (0, _reactDom.arrow)({
+    element: arrowReference
+  })], [calculateOffset, arrowReference]);
+  const {
+    x,
+    y,
+    reference,
+    floating,
+    strategy,
+    placement: currentPlacement,
+    middlewareData
+  } = (0, _reactDom.useFloating)({
     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
-        }
-      }]
-    }
-  }), children);
+    middleware: defaultMiddleware,
+    whileElementsMounted: _reactDom.autoUpdate
+  });
+  const tooltipStyle = {
+    position: strategy,
+    top: y ?? 0,
+    left: x ?? 0
+  };
+  const handleTargetRef = (0, _react.useCallback)(node => {
+    reference(target || node);
+    targetInternalRef.current = node;
+    preserveRef(children.ref, node);
+  }, [reference, children, target]);
+  const handleFloatingRef = (0, _react.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 => _tooltip2.TOOLTIP_POSITIONS.includes(placement));
+  !isFlipOverridesValid ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, `The flipOverrides prop supplied to Tooltip must be an array containing some or all of ["top", "bottom", "left", "right"].`) : (0, _invariant.default)(false) : void 0;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.cloneElement(children, {
+    ref: handleTargetRef
+  }), showTooltip ? /*#__PURE__*/_react.default.createElement(_portal.default, null, /*#__PURE__*/_react.default.createElement(_tooltip.default, _extends({
+    "data-element": "tooltip",
+    role: "tooltip",
+    tabIndex: -1,
+    type: type,
+    size: size,
+    id: id
+  }, (0, _tags.default)("tooltip", rest), {
+    ref: handleFloatingRef,
+    bgColor: bgColor,
+    fontColor: fontColor,
+    style: tooltipStyle,
+    "data-placement": currentPlacement
+  }), /*#__PURE__*/_react.default.createElement(_tooltipPointer.default, {
+    type: type,
+    ref: arrowReference,
+    "data-element": "tooltip-pointer",
+    bgColor: bgColor,
+    style: arrowStyle
+  }), message)) : null);
 });
 
 exports.Tooltip = Tooltip;

package/lib/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/lib/components/tooltip/tooltip.style.js

@@ -32,55 +32,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 = _styledComponents.default.div`
   ${({
-  position,
   size,
   theme,
   type,
-  isPartOfInput,
-  inputSize = "medium",
   bgColor,
   fontColor
 }) => (0, _styledComponents.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;
@@ -93,7 +57,6 @@ const StyledTooltip = _styledComponents.default.div`
     line-height: 1.5rem;
     font-weight: 400;
     background-color: ${tooltipColor(theme, bgColor, type)};
-    ${tooltipOffset(position, inputSize, isPartOfInput)};
   `}
 `;
 StyledTooltip.defaultProps = {

package/lib/hooks/__internal__/useFloating/useFloating.d.ts

@@ -2,8 +2,8 @@
 import { Strategy, Middleware, Placement } from "@floating-ui/dom";
 export interface UseFloatingProps {
     isOpen?: boolean;
-    reference: React.RefObject<HTMLElement>;
-    floating: React.RefObject<HTMLElement>;
+    reference: React.RefObject<HTMLElement | null>;
+    floating: React.RefObject<HTMLElement | null>;
     strategy?: Strategy;
     middleware?: Middleware[];
     placement?: Placement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "112.0.4",
+  "version": "113.0.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -82,6 +82,7 @@
     "@storybook/theming": "^6.4.18",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
+    "@testing-library/user-event": "^14.4.3",
     "@types/crypto-js": "^4.1.1",
     "@types/draft-js": "^0.11.7",
     "@types/enzyme": "^3.10.3",
@@ -164,10 +165,10 @@
     "webpack-dev-server": "^4.0.0"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.0.2",
+    "@floating-ui/dom": "^1.0.7",
+    "@floating-ui/react-dom": "^1.0.1",
     "@octokit/rest": "^18.12.0",
     "@styled-system/prop-types": "^5.1.5",
-    "@tippyjs/react": "^4.2.5",
     "@types/styled-system": "^5.1.11",
     "chalk": "^4.1.1",
     "ci-info": "^3.3.2",