@zendeskgarden/react-tooltips 9.0.0-next.1 → 9.0.0-next.10

package/dist/index.cjs.js

@@ -1,84 +1,31 @@
 /**
- * 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.
- */
-
+* 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.
+*/
 'use strict';
 
 var React = require('react');
-var reactDom = require('react-dom');
-var PropTypes = require('prop-types');
 var styled = require('styled-components');
+var reactTheming = require('@zendeskgarden/react-theming');
+var reactDom$1 = require('react-dom');
+var PropTypes = require('prop-types');
 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 }; }
 
 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';
-}
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 
 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.1'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-wuqkfc-0"
@@ -90,7 +37,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.1'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledTitle",
   componentId: "sc-vnjcvz-0"
@@ -161,7 +108,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);
@@ -172,22 +119,22 @@ const colorStyles = _ref2 => {
     type
   } = _ref2;
   let border;
-  let boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, reactTheming.getColor('chromeHue', 600, theme, 0.15));
-  let backgroundColor = reactTheming.getColor('chromeHue', 700, theme);
-  let color = theme.colors.background;
+  let boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, reactTheming.getColorV8('chromeHue', 600, theme, 0.15));
+  let backgroundColor = reactTheming.getColorV8('chromeHue', 700, theme);
+  let color = reactTheming.getColorV8('background', 600 , theme);
   let titleColor;
   if (type === 'light') {
-    boxShadow = theme.shadows.lg(`${theme.space.base * 3}px`, `${theme.space.base * 5}px`, reactTheming.getColor('chromeHue', 600, theme, 0.15));
-    border = `${theme.borders.sm} ${reactTheming.getColor('neutralHue', 300, theme)}`;
-    backgroundColor = theme.colors.background;
-    color = reactTheming.getColor('neutralHue', 700, theme);
-    titleColor = theme.colors.foreground;
+    boxShadow = theme.shadows.lg(`${theme.space.base * 3}px`, `${theme.space.base * 5}px`, reactTheming.getColorV8('chromeHue', 600, theme, 0.15));
+    border = `${theme.borders.sm} ${reactTheming.getColorV8('neutralHue', 300, theme)}`;
+    backgroundColor = reactTheming.getColorV8('background', 600 , theme);
+    color = reactTheming.getColorV8('neutralHue', 700, theme);
+    titleColor = reactTheming.getColorV8('foreground', 600 , theme);
   }
   return styled.css(["border:", ";box-shadow:", ";background-color:", ";color:", ";", "{color:", ";}"], border, boxShadow, backgroundColor, color, StyledTitle, titleColor);
 };
 const StyledTooltip = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-version': '9.0.0-next.10'
 }).withConfig({
   displayName: "StyledTooltip",
   componentId: "sc-gzzjq4-0"
@@ -199,26 +146,42 @@ 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 Paragraph = React.forwardRef((props, ref) => React__default.default.createElement(StyledParagraph, Object.assign({
+  ref: ref
+}, props)));
+Paragraph.displayName = 'Paragraph';
+
+const Title = React.forwardRef((props, ref) => React__default.default.createElement(StyledTitle, Object.assign({
+  ref: ref
+}, props)));
+Title.displayName = 'Title';
+
+const PLACEMENT = ['auto', ...reactTheming.PLACEMENT];
 const SIZE = ['small', 'medium', 'large', 'extra-large'];
 const TYPE = ['light', 'dark'];
 
-const Tooltip = _ref => {
+const toSize = (size, type) => {
+  let retVal = size;
+  if (retVal === undefined) {
+    retVal = type === 'dark' ? 'small' : 'large';
+  }
+  return retVal;
+};
+
+const PLACEMENT_DEFAULT = 'top';
+const TooltipComponent = _ref => {
   let {
     id,
     delayMS,
     isInitialVisible,
     content,
     refKey,
-    placement,
-    eventsEnabled,
-    popperModifiers,
+    placement: _placement,
     children,
     hasArrow,
     size,
@@ -226,12 +189,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,127 +208,82 @@ 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({
+    platform: {
+      ...reactDom.platform,
+      isRTL: () => theme.rtl
     },
-    ...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);
+    elements: {
+      reference: triggerRef?.current,
+      floating: floatingRef?.current
+    },
+    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 = {
+TooltipComponent.displayName = 'Tooltip';
+TooltipComponent.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]),
   isInitialVisible: PropTypes__default.default.bool,
   refKey: PropTypes__default.default.string
 };
-Tooltip.defaultProps = {
+TooltipComponent.defaultProps = {
   hasArrow: true,
-  eventsEnabled: true,
   type: 'dark',
-  placement: 'top',
+  placement: PLACEMENT_DEFAULT,
   delayMS: 500,
   refKey: 'ref'
 };
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : 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);
-}
-
-const Paragraph = React.forwardRef((props, ref) => React__default.default.createElement(StyledParagraph, _extends({
-  ref: ref
-}, props)));
-Paragraph.displayName = 'Paragraph';
-
-const Title = React.forwardRef((props, ref) => React__default.default.createElement(StyledTitle, _extends({
-  ref: ref
-}, props)));
-Title.displayName = 'Title';
+const Tooltip = TooltipComponent;
+Tooltip.Paragraph = Paragraph;
+Tooltip.Title = Title;
 
 exports.Paragraph = Paragraph;
 exports.Title = Title;

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

@@ -6,6 +6,8 @@
  */
 import React from 'react';
 /**
+ * @deprecated use `Tooltip.Paragraph` instead
+ *
  * @extends HTMLAttributes<HTMLParagraphElement>
  */
 export declare const Paragraph: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;

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

@@ -6,6 +6,8 @@
  */
 import React from 'react';
 /**
+ * @deprecated use `Tooltip.Title` instead
+ *
  * @extends HTMLAttributes<HTMLDivElement>
  */
 export declare const Title: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

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

@@ -7,21 +7,46 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ITooltipProps } from '../types';
+import { Paragraph } from './Paragraph';
+import { Title } from './Title';
+export declare const PLACEMENT_DEFAULT = "top";
+export declare const TooltipComponent: {
+    ({ 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>;
+        id: PropTypes.Requireable<string>;
+        content: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        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>>;
+        isInitialVisible: PropTypes.Requireable<boolean>;
+        refKey: PropTypes.Requireable<string>;
+    };
+    defaultProps: {
+        hasArrow: boolean;
+        type: string;
+        placement: string;
+        delayMS: number;
+        refKey: string;
+    };
+};
 /**
  * @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,10 +55,12 @@ export declare const Tooltip: {
     };
     defaultProps: {
         hasArrow: boolean;
-        eventsEnabled: boolean;
         type: string;
         placement: string;
         delayMS: number;
         refKey: string;
     };
+} & {
+    Paragraph: typeof Paragraph;
+    Title: typeof Title;
 };

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/index.d.ts

@@ -4,7 +4,7 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
-export { Tooltip } from './elements/Tooltip';
 export { Paragraph } from './elements/Paragraph';
 export { Title } from './elements/Title';
+export { Tooltip } from './elements/Tooltip';
 export type { ITooltipProps } from './types';

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.1",
+  "version": "9.0.0-next.10",
   "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>",
@@ -10,7 +10,7 @@
     "url": "https://github.com/zendeskgarden/react-components/issues"
   },
   "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
+  "module": "dist/esm/index.js",
   "files": [
     "dist"
   ],
@@ -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",
+    "@zendeskgarden/react-theming": ">=9.0.0-next",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "styled-components": "^5.1.0"
+    "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.1"
+    "@zendeskgarden/react-theming": "^9.0.0-next.10"
   },
   "keywords": [
     "components",
@@ -47,5 +47,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "a9e4e776bf6ad8860a198fc24f27b2b5cbc83320"
+  "gitHead": "818e6100aa6676af7e972198b82516d330307d60"
 }