@algolia/satellite 1.0.0-beta.160 → 1.0.0-beta.162

package/cjs/Tooltip/OverflowTooltipWrapper.js

@@ -4,99 +4,41 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isOverflowing = exports["default"] = exports.OverflowTooltipWrapper = void 0;
+exports.OverflowTooltipWrapper = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _clsx = _interopRequireDefault(require("clsx"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
-var _reactPopper = require("react-popper");
-var _Satellite = require("../Satellite");
 var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
 var _TextWrap = _interopRequireDefault(require("../TextWrap"));
-var _Tooltip = _interopRequireDefault(require("./Tooltip"));
 var _TooltipWrapper = require("./TooltipWrapper");
+var _utils = require("./utils");
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject;
+var _excluded = ["children"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-/** @ignore */
-var isOverflowing = function isOverflowing(element) {
-  return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
-};
-exports.isOverflowing = isOverflowing;
 var OverflowTooltipWrapper = function OverflowTooltipWrapper(_ref) {
-  var _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? "bottom" : _ref$placement,
-    _ref$tooltipVariant = _ref.tooltipVariant,
-    tooltipVariant = _ref$tooltipVariant === void 0 ? "dark" : _ref$tooltipVariant,
-    wrapperClassName = _ref.wrapperClassName,
-    tooltipClassName = _ref.tooltipClassName,
-    children = _ref.children,
-    _ref$modifiers = _ref.modifiers,
-    modifiers = _ref$modifiers === void 0 ? [] : _ref$modifiers,
-    _ref$noArrow = _ref.noArrow,
-    noArrow = _ref$noArrow === void 0 ? false : _ref$noArrow;
-  var createPortal = (0, _Satellite.useCreatePortal)();
+  var children = _ref.children,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    targetEl = _useState2[0],
-    setTargetEl = _useState2[1];
-  var _useState3 = (0, _react.useState)(null),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    popperEl = _useState4[0],
-    setPopperEl = _useState4[1];
-  var _useState5 = (0, _react.useState)(null),
-    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    arrowEl = _useState6[0],
-    setArrowEl = _useState6[1];
-  var _useState7 = (0, _react.useState)(null),
-    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-    tooltipText = _useState8[0],
-    setTooltipText = _useState8[1];
-  var _usePopper = (0, _reactPopper.usePopper)(targetEl, popperEl, {
-      placement: placement,
-      strategy: "fixed",
-      modifiers: [].concat((0, _toConsumableArray2["default"])(_TooltipWrapper.DEFAULT_TOOLTIP_POPPER_MODIFIERS), [{
-        name: "arrow",
-        options: {
-          element: arrowEl
-        }
-      }], (0, _toConsumableArray2["default"])(modifiers))
-    }),
-    styles = _usePopper.styles,
-    attributes = _usePopper.attributes;
+    content = _useState2[0],
+    setContent = _useState2[1];
   var onMouseEnter = function onMouseEnter(evt) {
-    return setTooltipText(isOverflowing(evt.currentTarget) ? evt.currentTarget.textContent : null);
-  };
-  var onMouseLeave = function onMouseLeave() {
-    return setTooltipText(null);
+    setContent((0, _utils.isOverflowing)(evt.currentTarget) ? evt.currentTarget.textContent : null);
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      ref: setTargetEl,
-      className: (0, _clsx["default"])(wrapperClassName, (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["truncate"])))),
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipWrapper.TooltipWrapper, _objectSpread(_objectSpread({
+    content: content && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextWrap["default"], {
+      children: content
+    })
+  }, props), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["truncate"]))),
       onMouseEnter: onMouseEnter,
-      onMouseLeave: onMouseLeave,
       children: children
-    }), !!tooltipText && createPortal( /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, attributes.popper), {}, {
-      style: styles.popper,
-      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["tooltip-wrapper-popper"]))), tooltipClassName),
-      ref: setPopperEl,
-      children: [!noArrow && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        ref: setArrowEl,
-        style: styles.arrow,
-        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["tooltip-wrapper-arrow ", ""])), tooltipVariant === "light" && "tooltip-wrapper-arrow-light")
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip["default"], {
-        variant: tooltipVariant,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextWrap["default"], {
-          children: tooltipText
-        })
-      })]
-    })))]
-  });
+    })
+  }));
 };
-exports.OverflowTooltipWrapper = OverflowTooltipWrapper;
-var _default = OverflowTooltipWrapper;
-exports["default"] = _default;
+exports.OverflowTooltipWrapper = OverflowTooltipWrapper;

package/cjs/Tooltip/Tooltip.d.ts

@@ -7,18 +7,18 @@ export interface TooltipProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivEl
  * Tooltips are floating labels that briefly explain the function of a user interface element. They can be triggered when merchants hover, focus, tap, or click.
  *
  * Use tooltips to identify or add a small amount of information to an element. Typically, tooltips are used to help users understand the meaning or purpose of icons, showing the full version of truncated text, or displaying the alt text for an image. Tooltips do not receive input focus.
- * When writing tooltips, be short and concise.. When you need to add more than a single line of extra information, consider using inline dialogs instead.
+ * When writing tooltips, be short and concise. When you need to add more than a single line of extra information, consider using inline dialogs instead.
  *
  * The position of tooltips is flexible and will change depending on how close the element is to the edge of the screen.
  *
  * ## Best practices
  * Tooltips should:
  *
- * - Provide useful, additional information or clarification
- * - Succinctly describe or expand on the element they point to
- * - Not be used to communicate critical information, including errors in forms or other interaction feedback
- * - Not contain any links or buttons
- * - Be used sparingly. If you're building something that requires a lot of tooltips, work on clarifying the design and the language in the experience
+ * - Provide useful, additional information or clarification.
+ * - Succinctly describe or expand on the element they point to.
+ * - Not be used to communicate critical information, including errors in forms or other interaction feedback.
+ * - Not contain any links, inputs, or buttons.
+ * - Be used sparingly. If you're building something that requires a lot of tooltips, work on clarifying the design and the language in the experience.
  */
 export declare const Tooltip: import("react").ForwardRefExoticComponent<Pick<TooltipProps, "key" | "id" | "color" | "translate" | "hidden" | "dir" | "slot" | "style" | "title" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | "contentEditable" | "inputMode" | "tabIndex" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "variant"> & import("react").RefAttributes<HTMLDivElement>>;
 export default Tooltip;

package/cjs/Tooltip/Tooltip.js

@@ -25,18 +25,18 @@ var VARIANT_CLASSNAMES = {
  * Tooltips are floating labels that briefly explain the function of a user interface element. They can be triggered when merchants hover, focus, tap, or click.
  *
  * Use tooltips to identify or add a small amount of information to an element. Typically, tooltips are used to help users understand the meaning or purpose of icons, showing the full version of truncated text, or displaying the alt text for an image. Tooltips do not receive input focus.
- * When writing tooltips, be short and concise.. When you need to add more than a single line of extra information, consider using inline dialogs instead.
+ * When writing tooltips, be short and concise. When you need to add more than a single line of extra information, consider using inline dialogs instead.
  *
  * The position of tooltips is flexible and will change depending on how close the element is to the edge of the screen.
  *
  * ## Best practices
  * Tooltips should:
  *
- * - Provide useful, additional information or clarification
- * - Succinctly describe or expand on the element they point to
- * - Not be used to communicate critical information, including errors in forms or other interaction feedback
- * - Not contain any links or buttons
- * - Be used sparingly. If you're building something that requires a lot of tooltips, work on clarifying the design and the language in the experience
+ * - Provide useful, additional information or clarification.
+ * - Succinctly describe or expand on the element they point to.
+ * - Not be used to communicate critical information, including errors in forms or other interaction feedback.
+ * - Not contain any links, inputs, or buttons.
+ * - Be used sparingly. If you're building something that requires a lot of tooltips, work on clarifying the design and the language in the experience.
  */
 var Tooltip = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var className = _ref.className,

package/cjs/Tooltip/Tooltip.tailwind.js

@@ -5,12 +5,12 @@ var plugin = require("tailwindcss/plugin");
 var tooltipPlugin = plugin(function (_ref) {
   var addComponents = _ref.addComponents,
     theme = _ref.theme;
-  var arrowSize = 4;
-
   /** @type {string} */
   var tooltipDarkBackground = theme("colors.grey.900");
   /** @type {string} */
   var tooltipLightBackground = theme("colors.white");
+  var animationDuration = "100ms";
+  var animationEasing = "cubic-bezier(.17,.61,.4,.95)";
   addComponents({
     ".tooltip": {
       padding: "".concat(theme("spacing.1"), " ").concat(theme("spacing.2")),
@@ -39,76 +39,99 @@ var tooltipPlugin = plugin(function (_ref) {
     }
   });
   addComponents({
-    ".tooltip-wrapper": {
-      display: "inline-block",
-      lineHeight: "0",
-      outline: "0px"
-    },
-    ".tooltip-wrapper-popper": {
-      zIndex: theme("zIndex.tooltip"),
-      userSelect: "none",
-      maxWidth: theme("spacing.64")
-    },
-    ".tooltip-wrapper-arrow": {
-      position: "absolute",
-      display: "block",
-      width: "".concat(arrowSize, "px"),
-      height: "".concat(arrowSize, "px"),
-      border: "".concat(arrowSize, "px solid transparent"),
-      color: tooltipDarkBackground,
-      '[data-popper-placement^="right"] > &': {
-        left: "".concat(-arrowSize, "px"),
-        borderLeft: "none",
-        borderRightColor: "currentColor"
+    /* eslint-disable @algolia/satellite/prefer-stl-helper */
+    "@keyframes stl-tooltip-slide-down-and-fade": {
+      from: {
+        opacity: "0",
+        transform: "translateY(-2px)"
       },
-      '[data-popper-placement^="left"] > &': {
-        right: "".concat(-arrowSize, "px"),
-        borderRight: "none",
-        borderLeftColor: "currentColor"
-      },
-      '[data-popper-placement^="top"] > &': {
-        top: "100%",
-        borderBottom: "none",
-        borderTopColor: "currentColor"
+      to: {
+        opacity: "1",
+        transform: "translateY(0)"
+      }
+    },
+    "@keyframes stl-tooltip-slide-left-and-fade": {
+      from: {
+        opacity: "0",
+        transform: "translateX(2px)"
       },
-      '[data-popper-placement^="bottom"] > &': {
-        top: "".concat(-arrowSize, "px"),
-        borderTop: "none",
-        borderBottomColor: "currentColor"
+      to: {
+        opacity: "1",
+        transform: "translateX(0)"
       }
     },
-    ".tooltip-wrapper-arrow-light": {
-      color: theme("colors.shadow.10"),
-      "&::after": {
-        position: "absolute",
-        content: '" "',
-        border: "".concat(arrowSize - 1, "px solid transparent")
+    "@keyframes stl-tooltip-slide-up-and-fade": {
+      from: {
+        opacity: "0",
+        transform: "translateY(2px)"
       },
-      '[data-popper-placement^="left"] > &::after': {
-        right: "1px",
-        transform: "translate(0, -50%)",
-        borderRight: "none",
-        borderLeftColor: tooltipLightBackground
+      to: {
+        opacity: "1",
+        transform: "translateY(0)"
+      }
+    },
+    "@keyframes stl-tooltip-slide-right-and-fade": {
+      from: {
+        opacity: "0",
+        transform: "translateX(-2px)"
       },
-      '[data-popper-placement^="right"] > &::after': {
-        left: "1px",
-        transform: "translate(0, -50%)",
-        borderLeft: "none",
-        borderRightColor: tooltipLightBackground
+      to: {
+        opacity: "1",
+        transform: "translateX(0)"
+      }
+    },
+    "@keyframes stl-tooltip-fade-out": {
+      from: {
+        opacity: "1"
       },
-      '[data-popper-placement^="top"] > &::after': {
-        bottom: "1px",
-        transform: "translate(-50%, 0)",
-        borderBottom: "none",
-        borderTopColor: tooltipLightBackground
+      to: {
+        opacity: "0"
+      }
+    },
+    ".tooltip-content": {
+      zIndex: theme("zIndex.tooltip"),
+      userSelect: "none",
+      maxWidth: theme("spacing.64"),
+      // Even if the user has enabled reduced motion or animate is `false`,
+      // we still need to keep this animation to handle the hide delay
+      '&[data-state="closed"]': {
+        animation: "stl-tooltip-fade-out 0ms linear var(--tooltip-hide-delay)"
       },
-      '[data-popper-placement^="bottom"] > &::after': {
-        top: "1px",
-        transform: "translate(-50%, 0)",
-        borderTop: "none",
-        borderBottomColor: tooltipLightBackground
+      "@media (prefers-reduced-motion: no-preference)": {
+        willChange: "transform, opacity",
+        '&[data-state="delayed-open"]': {
+          '&[data-side="top"]': {
+            animation: "stl-tooltip-slide-down-and-fade ".concat(animationDuration, " ").concat(animationEasing)
+          },
+          '&[data-side="right"]': {
+            animation: "stl-tooltip-slide-left-and-fade ".concat(animationDuration, " ").concat(animationEasing)
+          },
+          '&[data-side="left"]': {
+            animation: "stl-tooltip-slide-right-and-fade ".concat(animationDuration, " ").concat(animationEasing)
+          },
+          '&[data-side="bottom"]': {
+            animation: "stl-tooltip-slide-up-and-fade ".concat(animationDuration, " ").concat(animationEasing)
+          }
+        },
+        '&[data-state="closed"]': {
+          animation: "stl-tooltip-fade-out ".concat(animationDuration, " ").concat(animationEasing, " var(--tooltip-hide-delay)")
+        }
       }
+    },
+    ".tooltip-arrow-dark": {
+      fill: tooltipDarkBackground
+    },
+    // Since Radix relies on a SVG for the arrow, we use the stroke property
+    // with a dash array/offset to create a border around the arrow.
+    ".tooltip-arrow-light": {
+      fill: tooltipLightBackground,
+      stroke: theme("colors.shadow.10"),
+      strokeWidth: "3px",
+      strokeDasharray: "36",
+      strokeDashoffset: "-30"
     }
+    /* eslint-enable @algolia/satellite/prefer-stl-helper */
   });
 });
+
 module.exports = tooltipPlugin;

package/cjs/Tooltip/TooltipWrapper.d.ts

@@ -1,28 +1,15 @@
-import type { FunctionComponent, ReactNode } from "react";
-import { StrictModifier } from "react-popper";
+import { ReactElement, ReactNode, ReactText, VFC } from "react";
 import type { TooltipWrapperBaseProps } from "./types";
-export declare const DEFAULT_TOOLTIP_POPPER_MODIFIERS: StrictModifier[];
 export interface TooltipWrapperProps extends TooltipWrapperBaseProps {
-    show?: boolean;
-    /**
-     * Controls how long you should hover the wrapped element before displaying the tooltip (in ms)
-     * @default 0
-     * */
-    delay?: number;
     /**
-     * Controls how long the tooltip should stay displayed when leaving the wrapped element (in ms)
-     * @default 500
-     * */
-    hideDelay?: number;
+     * Defines whether the tooltip should be displayed or not.
+     * @default undefined
+     */
+    show?: boolean;
     /**
-     * Indicates whether the tooltip itself should be considered when computing the tooltip target.
-     * Useful when the tooltip itself contains selectable text or interactive elements, and thus
-     * shouldn't be dismissed when the mouse hovers it
-     * @default true
+     * Defines the content of the tooltip.
      */
-    interactive?: boolean;
     content: ReactNode;
-    children: ReactNode;
+    children: ReactElement | ReactText;
 }
-export declare const TooltipWrapper: FunctionComponent<TooltipWrapperProps>;
-export default TooltipWrapper;
+export declare const TooltipWrapper: VFC<TooltipWrapperProps>;