@zendeskgarden/react-tooltips 9.0.0-next.0 → 9.0.0-next.2

package/dist/index.cjs.js

@@ -8,14 +8,14 @@
 'use strict';
 
 var React = require('react');
-var reactDom = require('react-dom');
+var reactDom$1 = require('react-dom');
 var PropTypes = require('prop-types');
 var styled = require('styled-components');
 var reactMergeRefs = require('react-merge-refs');
 var containerTooltip = require('@zendeskgarden/container-tooltip');
 var containerUtilities = require('@zendeskgarden/container-utilities');
-var reactPopper = require('react-popper');
 var reactTheming = require('@zendeskgarden/react-theming');
+var reactDom = require('@floating-ui/react-dom');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -23,62 +23,10 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
-function getPopperPlacement(gardenPlacement) {
-  const gardenToPopperMapping = {
-    auto: 'auto',
-    top: 'top',
-    'top-start': 'top-start',
-    'top-end': 'top-end',
-    bottom: 'bottom',
-    'bottom-start': 'bottom-start',
-    'bottom-end': 'bottom-end',
-    end: 'right',
-    'end-top': 'right-start',
-    'end-bottom': 'right-end',
-    start: 'left',
-    'start-top': 'left-start',
-    'start-bottom': 'left-end'
-  };
-  return gardenToPopperMapping[gardenPlacement];
-}
-function getRtlPopperPlacement(gardenPlacement) {
-  const rtlPlacementMappings = {
-    left: 'right',
-    'left-start': 'right-start',
-    'left-end': 'right-end',
-    'top-start': 'top-end',
-    'top-end': 'top-start',
-    right: 'left',
-    'right-start': 'left-start',
-    'right-end': 'left-end',
-    'bottom-start': 'bottom-end',
-    'bottom-end': 'bottom-start'
-  };
-  const popperPlacement = getPopperPlacement(gardenPlacement);
-  return rtlPlacementMappings[popperPlacement] || popperPlacement;
-}
-function getArrowPosition(popperPlacement) {
-  const arrowPositionMappings = {
-    top: 'bottom',
-    'top-start': 'bottom-left',
-    'top-end': 'bottom-right',
-    right: 'left',
-    'right-start': 'left-top',
-    'right-end': 'left-bottom',
-    bottom: 'top',
-    'bottom-start': 'top-left',
-    'bottom-end': 'top-right',
-    left: 'right',
-    'left-start': 'right-top',
-    'left-end': 'right-bottom'
-  };
-  return arrowPositionMappings[popperPlacement] || 'top';
-}
-
 const COMPONENT_ID$2 = 'tooltip.paragraph';
 const StyledParagraph = styled__default.default.p.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-wuqkfc-0"
@@ -90,7 +38,7 @@ StyledParagraph.defaultProps = {
 const COMPONENT_ID$1 = 'tooltip.title';
 const StyledTitle = styled__default.default.strong.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledTitle",
   componentId: "sc-vnjcvz-0"
@@ -161,7 +109,7 @@ const sizeStyles = _ref => {
       }
     }
   }
-  return styled.css(["margin:", ";border-radius:", ";padding:", ";max-width:", ";line-height:", ";word-wrap:", ";white-space:", ";font-size:", ";overflow-wrap:", ";", ";", "{margin-top:", ";}", "{display:", ";}"], margin, borderRadius, padding, maxWidth, lineHeight, wordWrap, whiteSpace, fontSize, overflowWrap, hasArrow && reactTheming.arrowStyles(getArrowPosition(placement), {
+  return styled.css(["margin:", ";border-radius:", ";padding:", ";max-width:", ";line-height:", ";word-wrap:", ";white-space:", ";font-size:", ";overflow-wrap:", ";", ";", "{margin-top:", ";}", "{display:", ";}"], margin, borderRadius, padding, maxWidth, lineHeight, wordWrap, whiteSpace, fontSize, overflowWrap, hasArrow && reactTheming.arrowStyles(reactTheming.getArrowPosition(theme, placement), {
     size: arrowSize,
     inset: arrowInset
   }), StyledParagraph, paragraphMarginTop, StyledTitle, titleDisplay);
@@ -187,7 +135,7 @@ const colorStyles = _ref2 => {
 };
 const StyledTooltip = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledTooltip",
   componentId: "sc-gzzjq4-0"
@@ -199,16 +147,24 @@ StyledTooltip.defaultProps = {
 const StyledTooltipWrapper = styled__default.default.div.withConfig({
   displayName: "StyledTooltipWrapper",
   componentId: "sc-1b7q9q6-0"
-})(["transition:opacity 10ms;opacity:1;z-index:", ";&[aria-hidden='true']{visibility:hidden;opacity:0;}"], props => props.zIndex);
+})(["position:absolute;top:0;left:0;transition:opacity 10ms;opacity:1;z-index:", ";&[aria-hidden='true']{visibility:hidden;opacity:0;}"], props => props.zIndex);
 StyledTooltipWrapper.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const SHARED_PLACEMENT = ['auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'];
-const PLACEMENT = [...SHARED_PLACEMENT, 'end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom'];
+const PLACEMENT = ['auto', ...reactTheming.PLACEMENT];
 const SIZE = ['small', 'medium', 'large', 'extra-large'];
 const TYPE = ['light', 'dark'];
 
+const toSize = (size, type) => {
+  let retVal = size;
+  if (retVal === undefined) {
+    retVal = type === 'dark' ? 'small' : 'large';
+  }
+  return retVal;
+};
+
+const PLACEMENT_DEFAULT = 'top';
 const Tooltip = _ref => {
   let {
     id,
@@ -216,9 +172,7 @@ const Tooltip = _ref => {
     isInitialVisible,
     content,
     refKey,
-    placement,
-    eventsEnabled,
-    popperModifiers,
+    placement: _placement,
     children,
     hasArrow,
     size,
@@ -226,12 +180,13 @@ const Tooltip = _ref => {
     appendToNode,
     zIndex,
     isVisible: externalIsVisible,
-    ...otherProps
+    onFocus,
+    onBlur,
+    ...props
   } = _ref;
-  const {
-    rtl
-  } = React.useContext(styled.ThemeContext);
-  const scheduleUpdateRef = React.useRef();
+  const theme = React.useContext(styled.ThemeContext) || reactTheming.DEFAULT_THEME;
+  const triggerRef = React.useRef(null);
+  const floatingRef = React.useRef(null);
   const {
     isVisible,
     getTooltipProps,
@@ -244,88 +199,62 @@ const Tooltip = _ref => {
     isVisible: isInitialVisible
   });
   const controlledIsVisible = containerUtilities.getControlledValue(externalIsVisible, isVisible);
-  React.useEffect(() => {
-    if (controlledIsVisible && scheduleUpdateRef.current) {
-      scheduleUpdateRef.current();
+  const [floatingPlacement] = reactTheming.getFloatingPlacements(theme, _placement === 'auto' ? PLACEMENT_DEFAULT : _placement);
+  const {
+    refs,
+    placement,
+    update,
+    floatingStyles: {
+      transform
     }
-  }, [controlledIsVisible, content]);
-  const popperPlacement = rtl ? getRtlPopperPlacement(placement) : getPopperPlacement(placement);
-  const singleChild = React__default.default.Children.only(children);
-  const modifiers = {
-    preventOverflow: {
-      boundariesElement: 'window'
+  } = reactDom.useFloating({
+    elements: {
+      reference: triggerRef?.current,
+      floating: floatingRef?.current
     },
-    ...popperModifiers
-  };
-  return React__default.default.createElement(reactPopper.Manager, null, React__default.default.createElement(reactPopper.Reference, null, _ref2 => {
-    let {
-      ref
-    } = _ref2;
-    return React.cloneElement(singleChild, getTriggerProps({
-      ...singleChild.props,
-      [refKey]: reactMergeRefs.mergeRefs([ref, singleChild.ref ? singleChild.ref : null])
-    }));
-  }), React__default.default.createElement(reactPopper.Popper, {
-    placement: popperPlacement,
-    eventsEnabled: controlledIsVisible && eventsEnabled,
-    modifiers: modifiers
-  }, _ref3 => {
-    let {
-      ref,
-      style,
-      scheduleUpdate,
-      placement: currentPlacement
-    } = _ref3;
-    scheduleUpdateRef.current = scheduleUpdate;
-    const {
-      onFocus,
-      onBlur,
-      ...otherTooltipProps
-    } = otherProps;
-    let computedSize = size;
-    if (computedSize === undefined) {
-      if (type === 'dark') {
-        computedSize = 'small';
-      } else {
-        computedSize = 'large';
-      }
-    }
-    const tooltipProps = {
-      hasArrow,
-      placement: currentPlacement,
-      size: computedSize,
-      onFocus: containerUtilities.composeEventHandlers(onFocus, () => {
-        openTooltip();
-      }),
-      onBlur: containerUtilities.composeEventHandlers(onBlur, () => {
-        closeTooltip(0);
-      }),
-      'aria-hidden': !controlledIsVisible,
-      type,
-      ...otherTooltipProps
-    };
-    const tooltip = React__default.default.createElement(StyledTooltipWrapper, {
-      ref: controlledIsVisible ? ref : null,
-      style: style,
-      zIndex: zIndex,
-      "aria-hidden": !controlledIsVisible
-    }, React__default.default.createElement(StyledTooltip, getTooltipProps(tooltipProps), content));
-    if (appendToNode) {
-      return reactDom.createPortal(tooltip, appendToNode);
+    placement: floatingPlacement,
+    middleware: _placement === 'auto' ? [reactDom.autoPlacement()] : undefined
+  });
+  React.useEffect(() => {
+    let cleanup;
+    if (controlledIsVisible && refs.reference.current && refs.floating.current) {
+      cleanup = reactDom.autoUpdate(refs.reference.current, refs.floating.current, update, {
+        elementResize: typeof ResizeObserver === 'function'
+      });
     }
-    return tooltip;
-  }));
+    return () => cleanup && cleanup();
+  }, [controlledIsVisible, refs.reference, refs.floating, update]);
+  const Child = React__default.default.Children.only(children);
+  const Node = React__default.default.createElement(StyledTooltipWrapper, {
+    ref: floatingRef,
+    style: {
+      transform
+    },
+    zIndex: zIndex,
+    "aria-hidden": !controlledIsVisible
+  }, React__default.default.createElement(StyledTooltip, getTooltipProps({
+    hasArrow,
+    placement,
+    size: toSize(size, type),
+    onFocus: containerUtilities.composeEventHandlers(onFocus, openTooltip),
+    onBlur: containerUtilities.composeEventHandlers(onBlur, () => closeTooltip(0)),
+    'aria-hidden': !controlledIsVisible,
+    type,
+    ...props
+  }), content));
+  return React__default.default.createElement(React__default.default.Fragment, null, React.cloneElement(Child, getTriggerProps({
+    ...Child.props,
+    [refKey]: reactMergeRefs.mergeRefs([triggerRef, Child.ref ? Child.ref : null])
+  })), appendToNode ? reactDom$1.createPortal(Node, appendToNode) : Node);
 };
 Tooltip.displayName = 'Tooltip';
 Tooltip.propTypes = {
   appendToNode: PropTypes__default.default.any,
   hasArrow: PropTypes__default.default.bool,
   delayMS: PropTypes__default.default.number,
-  eventsEnabled: PropTypes__default.default.bool,
   id: PropTypes__default.default.string,
   content: PropTypes__default.default.node.isRequired,
   placement: PropTypes__default.default.oneOf(PLACEMENT),
-  popperModifiers: PropTypes__default.default.any,
   size: PropTypes__default.default.oneOf(SIZE),
   type: PropTypes__default.default.oneOf(TYPE),
   zIndex: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string]),
@@ -334,9 +263,8 @@ Tooltip.propTypes = {
 };
 Tooltip.defaultProps = {
   hasArrow: true,
-  eventsEnabled: true,
   type: 'dark',
-  placement: 'top',
+  placement: PLACEMENT_DEFAULT,
   delayMS: 500,
   refKey: 'ref'
 };

package/dist/index.esm.js

@@ -12,65 +12,13 @@ import styled, { css, ThemeContext } from 'styled-components';
 import { mergeRefs } from 'react-merge-refs';
 import { useTooltip } from '@zendeskgarden/container-tooltip';
 import { getControlledValue, composeEventHandlers } from '@zendeskgarden/container-utilities';
-import { Manager, Reference, Popper } from 'react-popper';
-import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight, arrowStyles, getColor } from '@zendeskgarden/react-theming';
-
-function getPopperPlacement(gardenPlacement) {
-  const gardenToPopperMapping = {
-    auto: 'auto',
-    top: 'top',
-    'top-start': 'top-start',
-    'top-end': 'top-end',
-    bottom: 'bottom',
-    'bottom-start': 'bottom-start',
-    'bottom-end': 'bottom-end',
-    end: 'right',
-    'end-top': 'right-start',
-    'end-bottom': 'right-end',
-    start: 'left',
-    'start-top': 'left-start',
-    'start-bottom': 'left-end'
-  };
-  return gardenToPopperMapping[gardenPlacement];
-}
-function getRtlPopperPlacement(gardenPlacement) {
-  const rtlPlacementMappings = {
-    left: 'right',
-    'left-start': 'right-start',
-    'left-end': 'right-end',
-    'top-start': 'top-end',
-    'top-end': 'top-start',
-    right: 'left',
-    'right-start': 'left-start',
-    'right-end': 'left-end',
-    'bottom-start': 'bottom-end',
-    'bottom-end': 'bottom-start'
-  };
-  const popperPlacement = getPopperPlacement(gardenPlacement);
-  return rtlPlacementMappings[popperPlacement] || popperPlacement;
-}
-function getArrowPosition(popperPlacement) {
-  const arrowPositionMappings = {
-    top: 'bottom',
-    'top-start': 'bottom-left',
-    'top-end': 'bottom-right',
-    right: 'left',
-    'right-start': 'left-top',
-    'right-end': 'left-bottom',
-    bottom: 'top',
-    'bottom-start': 'top-left',
-    'bottom-end': 'top-right',
-    left: 'right',
-    'left-start': 'right-top',
-    'left-end': 'right-bottom'
-  };
-  return arrowPositionMappings[popperPlacement] || 'top';
-}
+import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight, arrowStyles, getArrowPosition, getColor, PLACEMENT as PLACEMENT$1, getFloatingPlacements } from '@zendeskgarden/react-theming';
+import { useFloating, autoPlacement, autoUpdate } from '@floating-ui/react-dom';
 
 const COMPONENT_ID$2 = 'tooltip.paragraph';
 const StyledParagraph = styled.p.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-wuqkfc-0"
@@ -82,7 +30,7 @@ StyledParagraph.defaultProps = {
 const COMPONENT_ID$1 = 'tooltip.title';
 const StyledTitle = styled.strong.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledTitle",
   componentId: "sc-vnjcvz-0"
@@ -153,7 +101,7 @@ const sizeStyles = _ref => {
       }
     }
   }
-  return css(["margin:", ";border-radius:", ";padding:", ";max-width:", ";line-height:", ";word-wrap:", ";white-space:", ";font-size:", ";overflow-wrap:", ";", ";", "{margin-top:", ";}", "{display:", ";}"], margin, borderRadius, padding, maxWidth, lineHeight, wordWrap, whiteSpace, fontSize, overflowWrap, hasArrow && arrowStyles(getArrowPosition(placement), {
+  return css(["margin:", ";border-radius:", ";padding:", ";max-width:", ";line-height:", ";word-wrap:", ";white-space:", ";font-size:", ";overflow-wrap:", ";", ";", "{margin-top:", ";}", "{display:", ";}"], margin, borderRadius, padding, maxWidth, lineHeight, wordWrap, whiteSpace, fontSize, overflowWrap, hasArrow && arrowStyles(getArrowPosition(theme, placement), {
     size: arrowSize,
     inset: arrowInset
   }), StyledParagraph, paragraphMarginTop, StyledTitle, titleDisplay);
@@ -179,7 +127,7 @@ const colorStyles = _ref2 => {
 };
 const StyledTooltip = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.0'
+  'data-garden-version': '9.0.0-next.2'
 }).withConfig({
   displayName: "StyledTooltip",
   componentId: "sc-gzzjq4-0"
@@ -191,16 +139,24 @@ StyledTooltip.defaultProps = {
 const StyledTooltipWrapper = styled.div.withConfig({
   displayName: "StyledTooltipWrapper",
   componentId: "sc-1b7q9q6-0"
-})(["transition:opacity 10ms;opacity:1;z-index:", ";&[aria-hidden='true']{visibility:hidden;opacity:0;}"], props => props.zIndex);
+})(["position:absolute;top:0;left:0;transition:opacity 10ms;opacity:1;z-index:", ";&[aria-hidden='true']{visibility:hidden;opacity:0;}"], props => props.zIndex);
 StyledTooltipWrapper.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-const SHARED_PLACEMENT = ['auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'];
-const PLACEMENT = [...SHARED_PLACEMENT, 'end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom'];
+const PLACEMENT = ['auto', ...PLACEMENT$1];
 const SIZE = ['small', 'medium', 'large', 'extra-large'];
 const TYPE = ['light', 'dark'];
 
+const toSize = (size, type) => {
+  let retVal = size;
+  if (retVal === undefined) {
+    retVal = type === 'dark' ? 'small' : 'large';
+  }
+  return retVal;
+};
+
+const PLACEMENT_DEFAULT = 'top';
 const Tooltip = _ref => {
   let {
     id,
@@ -208,9 +164,7 @@ const Tooltip = _ref => {
     isInitialVisible,
     content,
     refKey,
-    placement,
-    eventsEnabled,
-    popperModifiers,
+    placement: _placement,
     children,
     hasArrow,
     size,
@@ -218,12 +172,13 @@ const Tooltip = _ref => {
     appendToNode,
     zIndex,
     isVisible: externalIsVisible,
-    ...otherProps
+    onFocus,
+    onBlur,
+    ...props
   } = _ref;
-  const {
-    rtl
-  } = useContext(ThemeContext);
-  const scheduleUpdateRef = useRef();
+  const theme = useContext(ThemeContext) || DEFAULT_THEME;
+  const triggerRef = useRef(null);
+  const floatingRef = useRef(null);
   const {
     isVisible,
     getTooltipProps,
@@ -236,88 +191,62 @@ const Tooltip = _ref => {
     isVisible: isInitialVisible
   });
   const controlledIsVisible = getControlledValue(externalIsVisible, isVisible);
-  useEffect(() => {
-    if (controlledIsVisible && scheduleUpdateRef.current) {
-      scheduleUpdateRef.current();
+  const [floatingPlacement] = getFloatingPlacements(theme, _placement === 'auto' ? PLACEMENT_DEFAULT : _placement);
+  const {
+    refs,
+    placement,
+    update,
+    floatingStyles: {
+      transform
     }
-  }, [controlledIsVisible, content]);
-  const popperPlacement = rtl ? getRtlPopperPlacement(placement) : getPopperPlacement(placement);
-  const singleChild = React.Children.only(children);
-  const modifiers = {
-    preventOverflow: {
-      boundariesElement: 'window'
+  } = useFloating({
+    elements: {
+      reference: triggerRef?.current,
+      floating: floatingRef?.current
     },
-    ...popperModifiers
-  };
-  return React.createElement(Manager, null, React.createElement(Reference, null, _ref2 => {
-    let {
-      ref
-    } = _ref2;
-    return cloneElement(singleChild, getTriggerProps({
-      ...singleChild.props,
-      [refKey]: mergeRefs([ref, singleChild.ref ? singleChild.ref : null])
-    }));
-  }), React.createElement(Popper, {
-    placement: popperPlacement,
-    eventsEnabled: controlledIsVisible && eventsEnabled,
-    modifiers: modifiers
-  }, _ref3 => {
-    let {
-      ref,
-      style,
-      scheduleUpdate,
-      placement: currentPlacement
-    } = _ref3;
-    scheduleUpdateRef.current = scheduleUpdate;
-    const {
-      onFocus,
-      onBlur,
-      ...otherTooltipProps
-    } = otherProps;
-    let computedSize = size;
-    if (computedSize === undefined) {
-      if (type === 'dark') {
-        computedSize = 'small';
-      } else {
-        computedSize = 'large';
-      }
-    }
-    const tooltipProps = {
-      hasArrow,
-      placement: currentPlacement,
-      size: computedSize,
-      onFocus: composeEventHandlers(onFocus, () => {
-        openTooltip();
-      }),
-      onBlur: composeEventHandlers(onBlur, () => {
-        closeTooltip(0);
-      }),
-      'aria-hidden': !controlledIsVisible,
-      type,
-      ...otherTooltipProps
-    };
-    const tooltip = React.createElement(StyledTooltipWrapper, {
-      ref: controlledIsVisible ? ref : null,
-      style: style,
-      zIndex: zIndex,
-      "aria-hidden": !controlledIsVisible
-    }, React.createElement(StyledTooltip, getTooltipProps(tooltipProps), content));
-    if (appendToNode) {
-      return createPortal(tooltip, appendToNode);
+    placement: floatingPlacement,
+    middleware: _placement === 'auto' ? [autoPlacement()] : undefined
+  });
+  useEffect(() => {
+    let cleanup;
+    if (controlledIsVisible && refs.reference.current && refs.floating.current) {
+      cleanup = autoUpdate(refs.reference.current, refs.floating.current, update, {
+        elementResize: typeof ResizeObserver === 'function'
+      });
     }
-    return tooltip;
-  }));
+    return () => cleanup && cleanup();
+  }, [controlledIsVisible, refs.reference, refs.floating, update]);
+  const Child = React.Children.only(children);
+  const Node = React.createElement(StyledTooltipWrapper, {
+    ref: floatingRef,
+    style: {
+      transform
+    },
+    zIndex: zIndex,
+    "aria-hidden": !controlledIsVisible
+  }, React.createElement(StyledTooltip, getTooltipProps({
+    hasArrow,
+    placement,
+    size: toSize(size, type),
+    onFocus: composeEventHandlers(onFocus, openTooltip),
+    onBlur: composeEventHandlers(onBlur, () => closeTooltip(0)),
+    'aria-hidden': !controlledIsVisible,
+    type,
+    ...props
+  }), content));
+  return React.createElement(React.Fragment, null, cloneElement(Child, getTriggerProps({
+    ...Child.props,
+    [refKey]: mergeRefs([triggerRef, Child.ref ? Child.ref : null])
+  })), appendToNode ? createPortal(Node, appendToNode) : Node);
 };
 Tooltip.displayName = 'Tooltip';
 Tooltip.propTypes = {
   appendToNode: PropTypes.any,
   hasArrow: PropTypes.bool,
   delayMS: PropTypes.number,
-  eventsEnabled: PropTypes.bool,
   id: PropTypes.string,
   content: PropTypes.node.isRequired,
   placement: PropTypes.oneOf(PLACEMENT),
-  popperModifiers: PropTypes.any,
   size: PropTypes.oneOf(SIZE),
   type: PropTypes.oneOf(TYPE),
   zIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -326,9 +255,8 @@ Tooltip.propTypes = {
 };
 Tooltip.defaultProps = {
   hasArrow: true,
-  eventsEnabled: true,
   type: 'dark',
-  placement: 'top',
+  placement: PLACEMENT_DEFAULT,
   delayMS: 500,
   refKey: 'ref'
 };

package/dist/typings/elements/Tooltip.d.ts

@@ -7,21 +7,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ITooltipProps } from '../types';
+export declare const PLACEMENT_DEFAULT = "top";
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
 export declare const Tooltip: {
-    ({ id, delayMS, isInitialVisible, content, refKey, placement, eventsEnabled, popperModifiers, children, hasArrow, size, type, appendToNode, zIndex, isVisible: externalIsVisible, ...otherProps }: ITooltipProps): React.JSX.Element;
+    ({ id, delayMS, isInitialVisible, content, refKey, placement: _placement, children, hasArrow, size, type, appendToNode, zIndex, isVisible: externalIsVisible, onFocus, onBlur, ...props }: ITooltipProps): React.JSX.Element;
     displayName: string;
     propTypes: {
         appendToNode: PropTypes.Requireable<any>;
         hasArrow: PropTypes.Requireable<boolean>;
         delayMS: PropTypes.Requireable<number>;
-        eventsEnabled: PropTypes.Requireable<boolean>;
         id: PropTypes.Requireable<string>;
         content: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-        placement: PropTypes.Requireable<"auto" | "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "end" | "end-top" | "end-bottom" | "start" | "start-top" | "start-bottom">;
-        popperModifiers: PropTypes.Requireable<any>;
+        placement: PropTypes.Requireable<"top" | "auto" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "end" | "end-top" | "end-bottom" | "start" | "start-top" | "start-bottom">;
         size: PropTypes.Requireable<"small" | "medium" | "large" | "extra-large">;
         type: PropTypes.Requireable<"light" | "dark">;
         zIndex: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
@@ -30,7 +29,6 @@ export declare const Tooltip: {
     };
     defaultProps: {
         hasArrow: boolean;
-        eventsEnabled: boolean;
         type: string;
         placement: string;
         delayMS: number;

package/dist/typings/elements/utils.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+import { ITooltipProps } from '../types';
+/**
+ * Convert to the intended tooltip size for the given type.
+ *
+ * @param {string} size Tooltip size prop value
+ * @param {string} type Tooltip type prop value
+ *
+ * @returns A tooltip size.
+ */
+export declare const toSize: (size: ITooltipProps['size'], type: ITooltipProps['type']) => "small" | "medium" | "large" | "extra-large";

package/dist/typings/styled/StyledTooltip.d.ts

@@ -5,10 +5,10 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import { DefaultTheme } from 'styled-components';
-import { ITooltipProps, POPPER_PLACEMENT } from '../types';
+import { Placement } from '@floating-ui/react-dom';
+import { ITooltipProps } from '../types';
 interface IStyledTooltipProps extends Pick<ITooltipProps, 'hasArrow' | 'size' | 'zIndex'> {
-    /** All valid [Popper.JS Placements](https://popper.js.org/popper-documentation.html#Popper.placements) */
-    placement: (typeof POPPER_PLACEMENT)[number];
+    placement: Placement;
     type: NonNullable<ITooltipProps['type']>;
 }
 /**

package/dist/typings/styled/StyledTooltipWrapper.d.ts

@@ -4,15 +4,6 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-/**
- * This wrapper allows the StyledTooltip to retain it's relative positioning.
- * Without this container Popper would apply absolute positioning directly to
- * the StyledTooltip which impacts arrow styling.
- *
- * 1. This wrapper also includes an opacity transition. It allows Popper to
- * reposition the tooltip without having a visible shift. The transition
- * is fast enough that it should not be perceptible.
- */
 export declare const StyledTooltipWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     zIndex?: string | number | undefined;
 }, never>;

package/dist/typings/types/index.d.ts

@@ -5,13 +5,10 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import { HTMLAttributes, ReactElement, ReactNode } from 'react';
-import { Modifiers } from 'popper.js';
 export declare const PLACEMENT: readonly ["auto", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "end", "end-top", "end-bottom", "start", "start-top", "start-bottom"];
-export declare const POPPER_PLACEMENT: readonly ["auto", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"];
 export declare const SIZE: readonly ["small", "medium", "large", "extra-large"];
 export declare const TYPE: readonly ["light", "dark"];
 export type GardenPlacement = (typeof PLACEMENT)[number];
-export type PopperPlacement = (typeof POPPER_PLACEMENT)[number];
 export interface ITooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
     /** Appends the tooltip to the element provided */
     appendToNode?: Element;
@@ -19,16 +16,10 @@ export interface ITooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'con
     hasArrow?: boolean;
     /** Adds milliseconds of delay to the opening and closing of the tooltip */
     delayMS?: number;
-    /** Allows the tooltip to reposition during browser resize events */
-    eventsEnabled?: boolean;
     /** Defines the content of the tooltip */
     content: ReactNode;
-    /**
-     * Adjusts the placement of the tooltip
-     **/
+    /** Adjusts the placement of the tooltip */
     placement?: GardenPlacement;
-    /** Passes configurations to the [Popper instance](https://popper.js.org/docs/v2/modifiers/) */
-    popperModifiers?: Modifiers;
     /** Adjusts the padding and font size */
     size?: (typeof SIZE)[number];
     /** Specifies the tooltip type */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-tooltips",
-  "version": "9.0.0-next.0",
+  "version": "9.0.0-next.2",
   "description": "Collection of components and render prop containers relating to Tooltips in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -21,21 +21,21 @@
   "sideEffects": false,
   "types": "dist/typings/index.d.ts",
   "dependencies": {
+    "@floating-ui/react-dom": "^2.0.0",
     "@zendeskgarden/container-tooltip": "^1.0.0",
     "@zendeskgarden/container-utilities": "^2.0.0",
     "polished": "^4.0.0",
     "prop-types": "^15.5.7",
-    "react-merge-refs": "^2.0.0",
-    "react-popper": "^1.3.4"
+    "react-merge-refs": "^2.0.0"
   },
   "peerDependencies": {
     "@zendeskgarden/react-theming": "^8.1.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "styled-components": "^4.2.0 || ^5.0.0"
+    "styled-components": "^5.1.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.0"
+    "@zendeskgarden/react-theming": "^9.0.0-next.2"
   },
   "keywords": [
     "components",
@@ -47,5 +47,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "7145e970afa57b024ab7d505f2220a656e430c04"
+  "gitHead": "e47dd011fedf130106acdb485a023340564171af"
 }

package/dist/typings/utils/gardenPlacements.d.ts

@@ -1,22 +0,0 @@
-/**
- * Copyright Zendesk, Inc.
- *
- * Use of this source code is governed under the Apache License, Version 2.0
- * found at http://www.apache.org/licenses/LICENSE-2.0.
- */
-import { GardenPlacement, PopperPlacement } from '../types';
-/**
- * Convert Garden RTL aware placement to Popper.JS valid placement
- * @param {String} gardenPlacement
- */
-export declare function getPopperPlacement(gardenPlacement: GardenPlacement): "auto" | "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end";
-/**
- * Convert Garden RTL aware placement to RTL equivalent Popper.JS placement
- * @param {String} gardenPlacement
- */
-export declare function getRtlPopperPlacement(gardenPlacement: GardenPlacement): "auto" | "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end";
-/**
- * Convert Popper.JS placement to corresponding arrow position
- * @param {String} popperPlacement
- */
-export declare function getArrowPosition(popperPlacement: PopperPlacement): "top" | "bottom" | "right" | "left" | "top-left" | "top-right" | "right-top" | "right-bottom" | "bottom-left" | "bottom-right" | "left-top" | "left-bottom";