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

package/dist/esm/elements/Paragraph.js

@@ -0,0 +1,18 @@
+/**
+* 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 React, { forwardRef } from 'react';
+import { StyledParagraph } from '../styled/StyledParagraph.js';
+import '../styled/StyledTitle.js';
+import '../styled/StyledTooltip.js';
+import '../styled/StyledTooltipWrapper.js';
+
+const Paragraph = forwardRef((props, ref) => React.createElement(StyledParagraph, Object.assign({
+  ref: ref
+}, props)));
+Paragraph.displayName = 'Tooltip.Paragraph';
+
+export { Paragraph };

package/dist/esm/elements/Title.js

@@ -0,0 +1,18 @@
+/**
+* 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 React, { forwardRef } from 'react';
+import '../styled/StyledParagraph.js';
+import { StyledTitle } from '../styled/StyledTitle.js';
+import '../styled/StyledTooltip.js';
+import '../styled/StyledTooltipWrapper.js';
+
+const Title = forwardRef((props, ref) => React.createElement(StyledTitle, Object.assign({
+  ref: ref
+}, props)));
+Title.displayName = 'Tooltip.Title';
+
+export { Title };

package/dist/esm/elements/Tooltip.js

@@ -0,0 +1,137 @@
+/**
+* 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 React, { useContext, useRef, useEffect, cloneElement } from 'react';
+import { createPortal } from 'react-dom';
+import PropTypes from 'prop-types';
+import { ThemeContext } from 'styled-components';
+import { mergeRefs } from 'react-merge-refs';
+import { useTooltip } from '@zendeskgarden/container-tooltip';
+import { getControlledValue, composeEventHandlers } from '@zendeskgarden/container-utilities';
+import '../styled/StyledParagraph.js';
+import '../styled/StyledTitle.js';
+import { StyledTooltip } from '../styled/StyledTooltip.js';
+import { StyledTooltipWrapper } from '../styled/StyledTooltipWrapper.js';
+import { PLACEMENT, SIZE, TYPE } from '../types/index.js';
+import { useFloating, platform, autoPlacement, autoUpdate } from '@floating-ui/react-dom';
+import { DEFAULT_THEME, getFloatingPlacements } from '@zendeskgarden/react-theming';
+import { toSize } from './utils.js';
+import { Paragraph } from './Paragraph.js';
+import { Title } from './Title.js';
+
+const PLACEMENT_DEFAULT = 'top';
+const TooltipComponent = _ref => {
+  let {
+    id,
+    delayMS,
+    isInitialVisible,
+    content,
+    refKey,
+    placement: _placement,
+    children,
+    hasArrow,
+    size,
+    type,
+    appendToNode,
+    zIndex,
+    isVisible: externalIsVisible,
+    onFocus,
+    onBlur,
+    ...props
+  } = _ref;
+  const theme = useContext(ThemeContext) || DEFAULT_THEME;
+  const triggerRef = useRef(null);
+  const floatingRef = useRef(null);
+  const {
+    isVisible,
+    getTooltipProps,
+    getTriggerProps,
+    openTooltip,
+    closeTooltip
+  } = useTooltip({
+    id,
+    delayMilliseconds: delayMS,
+    isVisible: isInitialVisible
+  });
+  const controlledIsVisible = getControlledValue(externalIsVisible, isVisible);
+  const [floatingPlacement] = getFloatingPlacements(theme, _placement === 'auto' ? PLACEMENT_DEFAULT : _placement);
+  const {
+    refs,
+    placement,
+    update,
+    floatingStyles: {
+      transform
+    }
+  } = useFloating({
+    platform: {
+      ...platform,
+      isRTL: () => theme.rtl
+    },
+    elements: {
+      reference: triggerRef?.current,
+      floating: floatingRef?.current
+    },
+    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 () => 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);
+};
+TooltipComponent.displayName = 'Tooltip';
+TooltipComponent.propTypes = {
+  appendToNode: PropTypes.any,
+  hasArrow: PropTypes.bool,
+  delayMS: PropTypes.number,
+  id: PropTypes.string,
+  content: PropTypes.node.isRequired,
+  placement: PropTypes.oneOf(PLACEMENT),
+  size: PropTypes.oneOf(SIZE),
+  type: PropTypes.oneOf(TYPE),
+  zIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  isInitialVisible: PropTypes.bool,
+  refKey: PropTypes.string
+};
+TooltipComponent.defaultProps = {
+  hasArrow: true,
+  type: 'dark',
+  placement: PLACEMENT_DEFAULT,
+  delayMS: 500,
+  refKey: 'ref'
+};
+const Tooltip = TooltipComponent;
+Tooltip.Paragraph = Paragraph;
+Tooltip.Title = Title;
+
+export { PLACEMENT_DEFAULT, Tooltip, TooltipComponent };

package/dist/esm/elements/utils.js

@@ -0,0 +1,15 @@
+/**
+* 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.
+*/
+const toSize = (size, type) => {
+  let retVal = size;
+  if (retVal === undefined) {
+    retVal = type === 'dark' ? 'small' : 'large';
+  }
+  return retVal;
+};
+
+export { toSize };

package/dist/esm/index.js

@@ -0,0 +1,9 @@
+/**
+* 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.
+*/
+export { Paragraph } from './elements/Paragraph.js';
+export { Title } from './elements/Title.js';
+export { Tooltip } from './elements/Tooltip.js';

package/dist/esm/styled/StyledParagraph.js

@@ -0,0 +1,22 @@
+/**
+* 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 styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'tooltip.paragraph';
+const StyledParagraph = styled.p.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledParagraph",
+  componentId: "sc-wuqkfc-0"
+})(["margin:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledParagraph.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledParagraph };

package/dist/esm/styled/StyledTitle.js

@@ -0,0 +1,22 @@
+/**
+* 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 styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'tooltip.title';
+const StyledTitle = styled.strong.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledTitle",
+  componentId: "sc-vnjcvz-0"
+})(["display:none;margin:0;font-weight:", ";", ";"], props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTitle.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTitle };

package/dist/esm/styled/StyledTooltip.js

@@ -0,0 +1,137 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight, arrowStyles, getArrowPosition, getColor } from '@zendeskgarden/react-theming';
+import { StyledParagraph } from './StyledParagraph.js';
+import { StyledTitle } from './StyledTitle.js';
+
+const COMPONENT_ID = 'tooltip.tooltip';
+const sizeStyles = _ref => {
+  let {
+    theme,
+    size,
+    placement,
+    hasArrow
+  } = _ref;
+  let margin = `${theme.space.base * 1.5}px`;
+  let borderRadius = theme.borderRadii.sm;
+  let padding = '0 1em';
+  let maxWidth;
+  let overflowWrap;
+  let whiteSpace = 'nowrap';
+  let lineHeight = getLineHeight(theme.space.base * 5, theme.fontSizes.sm);
+  let fontSize = theme.fontSizes.sm;
+  let titleDisplay;
+  let paragraphMarginTop;
+  let wordWrap;
+  if (size !== 'small') {
+    borderRadius = theme.borderRadii.md;
+    overflowWrap = 'break-word';
+    whiteSpace = 'normal';
+    wordWrap = 'break-word';
+  }
+  if (size === 'extra-large') {
+    padding = `${theme.space.base * 10}px`;
+    maxWidth = `460px`;
+    lineHeight = getLineHeight(theme.space.base * 5, theme.fontSizes.md);
+    paragraphMarginTop = `${theme.space.base * 2.5}px`;
+  } else if (size === 'large') {
+    padding = `${theme.space.base * 5}px`;
+    maxWidth = `270px`;
+    lineHeight = getLineHeight(theme.space.base * 5, theme.fontSizes.md);
+    paragraphMarginTop = `${theme.space.base * 2}px`;
+  } else if (size === 'medium') {
+    padding = '1em';
+    maxWidth = `140px`;
+    lineHeight = getLineHeight(theme.space.base * 4, theme.fontSizes.sm);
+  }
+  if (size === 'extra-large' || size === 'large') {
+    fontSize = theme.fontSizes.md;
+    titleDisplay = 'block';
+  }
+  let arrowSize;
+  if (hasArrow) {
+    if (size === 'small' || size === 'medium') {
+      arrowSize = margin;
+    } else if (size === 'large') {
+      margin = `${theme.space.base * 2}px`;
+      arrowSize = margin;
+    } else if (size === 'extra-large') {
+      margin = `${theme.space.base * 3}px`;
+      arrowSize = `${theme.space.base * 2.5}px`;
+    }
+  }
+  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
+  }), StyledParagraph, paragraphMarginTop, StyledTitle, titleDisplay);
+};
+const colorStyles = _ref2 => {
+  let {
+    theme,
+    type
+  } = _ref2;
+  let borderColor;
+  let boxShadow;
+  let backgroundColor;
+  let color;
+  let titleColor;
+  if (type === 'light') {
+    backgroundColor = getColor({
+      theme,
+      variable: 'background.raised'
+    });
+    borderColor = getColor({
+      theme,
+      variable: 'border.default'
+    });
+    boxShadow = theme.shadows.lg(`${theme.space.base * (theme.colors.base === 'dark' ? 4 : 5)}px`, `${theme.space.base * (theme.colors.base === 'dark' ? 6 : 7)}px`, getColor({
+      variable: 'shadow.medium',
+      theme
+    }));
+    color = getColor({
+      theme,
+      variable: 'foreground.subtle'
+    });
+    titleColor = getColor({
+      theme,
+      variable: 'foreground.default'
+    });
+  } else {
+    backgroundColor = getColor({
+      theme,
+      hue: 'neutralHue',
+      light: {
+        shade: 900
+      },
+      dark: {
+        shade: 700
+      }
+    });
+    borderColor = backgroundColor;
+    boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, getColor({
+      variable: 'shadow.small',
+      theme
+    }));
+    color = getColor({
+      theme,
+      hue: 'white'
+    });
+  }
+  return css(["border-color:", ";box-shadow:", ";background-color:", ";color:", ";", "{color:", ";}"], borderColor, boxShadow, backgroundColor, color, StyledTitle, titleColor);
+};
+const StyledTooltip = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledTooltip",
+  componentId: "sc-gzzjq4-0"
+})(["display:inline-block;border:", ";box-sizing:border-box;direction:", ";text-align:", ";font-weight:", ";", ";&[aria-hidden='true']{display:none;}", ";", ";"], props => props.theme.borders.sm, props => props.theme.rtl && 'rtl', props => props.theme.rtl ? 'right' : 'left', props => props.theme.fontWeights.regular, sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTooltip.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTooltip };

package/dist/esm/styled/StyledTooltipWrapper.js

@@ -0,0 +1,18 @@
+/**
+* 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 styled from 'styled-components';
+import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const StyledTooltipWrapper = styled.div.withConfig({
+  displayName: "StyledTooltipWrapper",
+  componentId: "sc-1b7q9q6-0"
+})(["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
+};
+
+export { StyledTooltipWrapper };

package/dist/esm/types/index.js

@@ -0,0 +1,13 @@
+/**
+* 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 { PLACEMENT as PLACEMENT$1 } from '@zendeskgarden/react-theming';
+
+const PLACEMENT = ['auto', ...PLACEMENT$1];
+const SIZE = ['small', 'medium', 'large', 'extra-large'];
+const TYPE = ['light', 'dark'];
+
+export { PLACEMENT, SIZE, TYPE };

package/dist/index.cjs.js

@@ -1,32 +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 styled = require('styled-components');
+var reactTheming = require('@zendeskgarden/react-theming');
 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 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);
+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.2'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-wuqkfc-0"
@@ -38,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.2'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledTitle",
   componentId: "sc-vnjcvz-0"
@@ -52,7 +51,6 @@ const sizeStyles = _ref => {
   let {
     theme,
     size,
-    type,
     placement,
     hasArrow
   } = _ref;
@@ -93,25 +91,19 @@ const sizeStyles = _ref => {
     titleDisplay = 'block';
   }
   let arrowSize;
-  let arrowInset;
   if (hasArrow) {
     if (size === 'small' || size === 'medium') {
       arrowSize = margin;
-      arrowInset = type === 'dark' ? '1px' : '0';
-    } else {
-      arrowInset = type === 'dark' ? '2px' : '1px';
-      if (size === 'large') {
-        margin = `${theme.space.base * 2}px`;
-        arrowSize = margin;
-      } else if (size === 'extra-large') {
-        margin = `${theme.space.base * 3}px`;
-        arrowSize = `${theme.space.base * 2.5}px`;
-      }
+    } else if (size === 'large') {
+      margin = `${theme.space.base * 2}px`;
+      arrowSize = margin;
+    } else if (size === 'extra-large') {
+      margin = `${theme.space.base * 3}px`;
+      arrowSize = `${theme.space.base * 2.5}px`;
     }
   }
   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
+    size: arrowSize
   }), StyledParagraph, paragraphMarginTop, StyledTitle, titleDisplay);
 };
 const colorStyles = _ref2 => {
@@ -119,27 +111,62 @@ const colorStyles = _ref2 => {
     theme,
     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 borderColor;
+  let boxShadow;
+  let backgroundColor;
+  let color;
   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;
+    backgroundColor = reactTheming.getColor({
+      theme,
+      variable: 'background.raised'
+    });
+    borderColor = reactTheming.getColor({
+      theme,
+      variable: 'border.default'
+    });
+    boxShadow = theme.shadows.lg(`${theme.space.base * (theme.colors.base === 'dark' ? 4 : 5)}px`, `${theme.space.base * (theme.colors.base === 'dark' ? 6 : 7)}px`, reactTheming.getColor({
+      variable: 'shadow.medium',
+      theme
+    }));
+    color = reactTheming.getColor({
+      theme,
+      variable: 'foreground.subtle'
+    });
+    titleColor = reactTheming.getColor({
+      theme,
+      variable: 'foreground.default'
+    });
+  } else {
+    backgroundColor = reactTheming.getColor({
+      theme,
+      hue: 'neutralHue',
+      light: {
+        shade: 900
+      },
+      dark: {
+        shade: 700
+      }
+    });
+    borderColor = backgroundColor;
+    boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, reactTheming.getColor({
+      variable: 'shadow.small',
+      theme
+    }));
+    color = reactTheming.getColor({
+      theme,
+      hue: 'white'
+    });
   }
-  return styled.css(["border:", ";box-shadow:", ";background-color:", ";color:", ";", "{color:", ";}"], border, boxShadow, backgroundColor, color, StyledTitle, titleColor);
+  return styled.css(["border-color:", ";box-shadow:", ";background-color:", ";color:", ";", "{color:", ";}"], borderColor, boxShadow, backgroundColor, color, StyledTitle, titleColor);
 };
 const StyledTooltip = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledTooltip",
   componentId: "sc-gzzjq4-0"
-})(["display:inline-block;box-sizing:border-box;direction:", ";text-align:", ";font-weight:", ";", ";&[aria-hidden='true']{display:none;}", ";", ";"], props => props.theme.rtl && 'rtl', props => props.theme.rtl ? 'right' : 'left', props => props.theme.fontWeights.regular, props => sizeStyles(props), colorStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:inline-block;border:", ";box-sizing:border-box;direction:", ";text-align:", ";font-weight:", ";", ";&[aria-hidden='true']{display:none;}", ";", ";"], props => props.theme.borders.sm, props => props.theme.rtl && 'rtl', props => props.theme.rtl ? 'right' : 'left', props => props.theme.fontWeights.regular, sizeStyles, colorStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
 StyledTooltip.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -152,6 +179,16 @@ StyledTooltipWrapper.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
+const Paragraph = React.forwardRef((props, ref) => React__default.default.createElement(StyledParagraph, Object.assign({
+  ref: ref
+}, props)));
+Paragraph.displayName = 'Tooltip.Paragraph';
+
+const Title = React.forwardRef((props, ref) => React__default.default.createElement(StyledTitle, Object.assign({
+  ref: ref
+}, props)));
+Title.displayName = 'Tooltip.Title';
+
 const PLACEMENT = ['auto', ...reactTheming.PLACEMENT];
 const SIZE = ['small', 'medium', 'large', 'extra-large'];
 const TYPE = ['light', 'dark'];
@@ -165,7 +202,7 @@ const toSize = (size, type) => {
 };
 
 const PLACEMENT_DEFAULT = 'top';
-const Tooltip = _ref => {
+const TooltipComponent = _ref => {
   let {
     id,
     delayMS,
@@ -208,6 +245,10 @@ const Tooltip = _ref => {
       transform
     }
   } = reactDom.useFloating({
+    platform: {
+      ...reactDom.platform,
+      isRTL: () => theme.rtl
+    },
     elements: {
       reference: triggerRef?.current,
       floating: floatingRef?.current
@@ -247,8 +288,8 @@ const Tooltip = _ref => {
     [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,
@@ -261,38 +302,16 @@ Tooltip.propTypes = {
   isInitialVisible: PropTypes__default.default.bool,
   refKey: PropTypes__default.default.string
 };
-Tooltip.defaultProps = {
+TooltipComponent.defaultProps = {
   hasArrow: true,
   type: 'dark',
   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,7 +7,33 @@
 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>
  */
@@ -34,4 +60,7 @@ export declare const Tooltip: {
         delayMS: number;
         refKey: string;
     };
+} & {
+    Paragraph: typeof Paragraph;
+    Title: typeof Title;
 };

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-tooltips",
-  "version": "9.0.0-next.2",
+  "version": "9.0.0-next.21",
   "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"
   ],
@@ -22,20 +22,20 @@
   "types": "dist/typings/index.d.ts",
   "dependencies": {
     "@floating-ui/react-dom": "^2.0.0",
-    "@zendeskgarden/container-tooltip": "^1.0.0",
+    "@zendeskgarden/container-tooltip": "^1.0.16",
     "@zendeskgarden/container-utilities": "^2.0.0",
-    "polished": "^4.0.0",
+    "polished": "^4.3.1",
     "prop-types": "^15.5.7",
     "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.2"
+    "@zendeskgarden/react-theming": "^9.0.0-next.21"
   },
   "keywords": [
     "components",
@@ -47,5 +47,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "e47dd011fedf130106acdb485a023340564171af"
+  "gitHead": "a245ce2b794ea65142174a6a1f855a111b2677a2"
 }

package/dist/index.esm.js

@@ -1,289 +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 React, { useContext, useRef, useEffect, cloneElement, forwardRef } from 'react';
-import { createPortal } from 'react-dom';
-import PropTypes from 'prop-types';
-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 { 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.2'
-}).withConfig({
-  displayName: "StyledParagraph",
-  componentId: "sc-wuqkfc-0"
-})(["margin:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID$2, props));
-StyledParagraph.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID$1 = 'tooltip.title';
-const StyledTitle = styled.strong.attrs({
-  'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.2'
-}).withConfig({
-  displayName: "StyledTitle",
-  componentId: "sc-vnjcvz-0"
-})(["display:none;margin:0;font-weight:", ";", ";"], props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID$1, props));
-StyledTitle.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const COMPONENT_ID = 'tooltip.tooltip';
-const sizeStyles = _ref => {
-  let {
-    theme,
-    size,
-    type,
-    placement,
-    hasArrow
-  } = _ref;
-  let margin = `${theme.space.base * 1.5}px`;
-  let borderRadius = theme.borderRadii.sm;
-  let padding = '0 1em';
-  let maxWidth;
-  let overflowWrap;
-  let whiteSpace = 'nowrap';
-  let lineHeight = getLineHeight(theme.space.base * 5, theme.fontSizes.sm);
-  let fontSize = theme.fontSizes.sm;
-  let titleDisplay;
-  let paragraphMarginTop;
-  let wordWrap;
-  if (size !== 'small') {
-    borderRadius = theme.borderRadii.md;
-    overflowWrap = 'break-word';
-    whiteSpace = 'normal';
-    wordWrap = 'break-word';
-  }
-  if (size === 'extra-large') {
-    padding = `${theme.space.base * 10}px`;
-    maxWidth = `460px`;
-    lineHeight = getLineHeight(theme.space.base * 5, theme.fontSizes.md);
-    paragraphMarginTop = `${theme.space.base * 2.5}px`;
-  } else if (size === 'large') {
-    padding = `${theme.space.base * 5}px`;
-    maxWidth = `270px`;
-    lineHeight = getLineHeight(theme.space.base * 5, theme.fontSizes.md);
-    paragraphMarginTop = `${theme.space.base * 2}px`;
-  } else if (size === 'medium') {
-    padding = '1em';
-    maxWidth = `140px`;
-    lineHeight = getLineHeight(theme.space.base * 4, theme.fontSizes.sm);
-  }
-  if (size === 'extra-large' || size === 'large') {
-    fontSize = theme.fontSizes.md;
-    titleDisplay = 'block';
-  }
-  let arrowSize;
-  let arrowInset;
-  if (hasArrow) {
-    if (size === 'small' || size === 'medium') {
-      arrowSize = margin;
-      arrowInset = type === 'dark' ? '1px' : '0';
-    } else {
-      arrowInset = type === 'dark' ? '2px' : '1px';
-      if (size === 'large') {
-        margin = `${theme.space.base * 2}px`;
-        arrowSize = margin;
-      } else if (size === 'extra-large') {
-        margin = `${theme.space.base * 3}px`;
-        arrowSize = `${theme.space.base * 2.5}px`;
-      }
-    }
-  }
-  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);
-};
-const colorStyles = _ref2 => {
-  let {
-    theme,
-    type
-  } = _ref2;
-  let border;
-  let boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, getColor('chromeHue', 600, theme, 0.15));
-  let backgroundColor = getColor('chromeHue', 700, theme);
-  let color = theme.colors.background;
-  let titleColor;
-  if (type === 'light') {
-    boxShadow = theme.shadows.lg(`${theme.space.base * 3}px`, `${theme.space.base * 5}px`, getColor('chromeHue', 600, theme, 0.15));
-    border = `${theme.borders.sm} ${getColor('neutralHue', 300, theme)}`;
-    backgroundColor = theme.colors.background;
-    color = getColor('neutralHue', 700, theme);
-    titleColor = theme.colors.foreground;
-  }
-  return css(["border:", ";box-shadow:", ";background-color:", ";color:", ";", "{color:", ";}"], border, boxShadow, backgroundColor, color, StyledTitle, titleColor);
-};
-const StyledTooltip = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.2'
-}).withConfig({
-  displayName: "StyledTooltip",
-  componentId: "sc-gzzjq4-0"
-})(["display:inline-block;box-sizing:border-box;direction:", ";text-align:", ";font-weight:", ";", ";&[aria-hidden='true']{display:none;}", ";", ";"], props => props.theme.rtl && 'rtl', props => props.theme.rtl ? 'right' : 'left', props => props.theme.fontWeights.regular, props => sizeStyles(props), colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledTooltip.defaultProps = {
-  theme: DEFAULT_THEME
-};
-
-const StyledTooltipWrapper = styled.div.withConfig({
-  displayName: "StyledTooltipWrapper",
-  componentId: "sc-1b7q9q6-0"
-})(["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 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,
-    delayMS,
-    isInitialVisible,
-    content,
-    refKey,
-    placement: _placement,
-    children,
-    hasArrow,
-    size,
-    type,
-    appendToNode,
-    zIndex,
-    isVisible: externalIsVisible,
-    onFocus,
-    onBlur,
-    ...props
-  } = _ref;
-  const theme = useContext(ThemeContext) || DEFAULT_THEME;
-  const triggerRef = useRef(null);
-  const floatingRef = useRef(null);
-  const {
-    isVisible,
-    getTooltipProps,
-    getTriggerProps,
-    openTooltip,
-    closeTooltip
-  } = useTooltip({
-    id,
-    delayMilliseconds: delayMS,
-    isVisible: isInitialVisible
-  });
-  const controlledIsVisible = getControlledValue(externalIsVisible, isVisible);
-  const [floatingPlacement] = getFloatingPlacements(theme, _placement === 'auto' ? PLACEMENT_DEFAULT : _placement);
-  const {
-    refs,
-    placement,
-    update,
-    floatingStyles: {
-      transform
-    }
-  } = useFloating({
-    elements: {
-      reference: triggerRef?.current,
-      floating: floatingRef?.current
-    },
-    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 () => 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,
-  id: PropTypes.string,
-  content: PropTypes.node.isRequired,
-  placement: PropTypes.oneOf(PLACEMENT),
-  size: PropTypes.oneOf(SIZE),
-  type: PropTypes.oneOf(TYPE),
-  zIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  isInitialVisible: PropTypes.bool,
-  refKey: PropTypes.string
-};
-Tooltip.defaultProps = {
-  hasArrow: true,
-  type: 'dark',
-  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 = forwardRef((props, ref) => React.createElement(StyledParagraph, _extends({
-  ref: ref
-}, props)));
-Paragraph.displayName = 'Paragraph';
-
-const Title = forwardRef((props, ref) => React.createElement(StyledTitle, _extends({
-  ref: ref
-}, props)));
-Title.displayName = 'Title';
-
-export { Paragraph, Title, Tooltip };