@zendeskgarden/react-tooltips 9.0.0-next.3 → 9.0.0-next.4

package/dist/index.cjs.js

@@ -8,25 +8,40 @@
 '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);
+
+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 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.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-wuqkfc-0"
@@ -38,7 +53,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.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledTitle",
   componentId: "sc-vnjcvz-0"
@@ -135,7 +150,7 @@ const colorStyles = _ref2 => {
 };
 const StyledTooltip = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledTooltip",
   componentId: "sc-gzzjq4-0"
@@ -152,6 +167,16 @@ StyledTooltipWrapper.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
+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 PLACEMENT = ['auto', ...reactTheming.PLACEMENT];
 const SIZE = ['small', 'medium', 'large', 'extra-large'];
 const TYPE = ['light', 'dark'];
@@ -165,7 +190,7 @@ const toSize = (size, type) => {
 };
 
 const PLACEMENT_DEFAULT = 'top';
-const Tooltip = _ref => {
+const TooltipComponent = _ref => {
   let {
     id,
     delayMS,
@@ -208,6 +233,10 @@ const Tooltip = _ref => {
       transform
     }
   } = reactDom.useFloating({
+    platform: {
+      ...reactDom.platform,
+      isRTL: () => theme.rtl
+    },
     elements: {
       reference: triggerRef?.current,
       floating: floatingRef?.current
@@ -247,8 +276,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 +290,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/index.esm.js

@@ -5,20 +5,35 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { useContext, useRef, useEffect, cloneElement, forwardRef } from 'react';
+import React, { forwardRef, useContext, useRef, useEffect, cloneElement } from 'react';
+import styled, { css, ThemeContext } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight, arrowStyles, getArrowPosition, getColor, PLACEMENT as PLACEMENT$1, getFloatingPlacements } from '@zendeskgarden/react-theming';
 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';
+import { useFloating, platform, autoPlacement, autoUpdate } from '@floating-ui/react-dom';
+
+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 COMPONENT_ID$2 = 'tooltip.paragraph';
 const StyledParagraph = styled.p.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-wuqkfc-0"
@@ -30,7 +45,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.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledTitle",
   componentId: "sc-vnjcvz-0"
@@ -127,7 +142,7 @@ const colorStyles = _ref2 => {
 };
 const StyledTooltip = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.4'
 }).withConfig({
   displayName: "StyledTooltip",
   componentId: "sc-gzzjq4-0"
@@ -144,6 +159,16 @@ StyledTooltipWrapper.defaultProps = {
   theme: DEFAULT_THEME
 };
 
+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';
+
 const PLACEMENT = ['auto', ...PLACEMENT$1];
 const SIZE = ['small', 'medium', 'large', 'extra-large'];
 const TYPE = ['light', 'dark'];
@@ -157,7 +182,7 @@ const toSize = (size, type) => {
 };
 
 const PLACEMENT_DEFAULT = 'top';
-const Tooltip = _ref => {
+const TooltipComponent = _ref => {
   let {
     id,
     delayMS,
@@ -200,6 +225,10 @@ const Tooltip = _ref => {
       transform
     }
   } = useFloating({
+    platform: {
+      ...platform,
+      isRTL: () => theme.rtl
+    },
     elements: {
       reference: triggerRef?.current,
       floating: floatingRef?.current
@@ -239,8 +268,8 @@ const Tooltip = _ref => {
     [refKey]: mergeRefs([triggerRef, Child.ref ? Child.ref : null])
   })), appendToNode ? createPortal(Node, appendToNode) : Node);
 };
-Tooltip.displayName = 'Tooltip';
-Tooltip.propTypes = {
+TooltipComponent.displayName = 'Tooltip';
+TooltipComponent.propTypes = {
   appendToNode: PropTypes.any,
   hasArrow: PropTypes.bool,
   delayMS: PropTypes.number,
@@ -253,37 +282,15 @@ Tooltip.propTypes = {
   isInitialVisible: PropTypes.bool,
   refKey: PropTypes.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 = 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';
+const Tooltip = TooltipComponent;
+Tooltip.Paragraph = Paragraph;
+Tooltip.Title = Title;
 
 export { Paragraph, Title, Tooltip };

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,9 @@
  * 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';
+/** @deprecated use `Tooltip.Paragraph` instead */
 export { Paragraph } from './elements/Paragraph';
+/** @deprecated use `Tooltip.Title` instead */
 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.3",
+  "version": "9.0.0-next.4",
   "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>",
@@ -35,7 +35,7 @@
     "styled-components": "^5.1.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.3"
+    "@zendeskgarden/react-theming": "^9.0.0-next.4"
   },
   "keywords": [
     "components",
@@ -47,5 +47,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "d5086e8a3ae0c8608361966954bf434ef03005ec"
+  "gitHead": "749220247e3a22d2d502dcb3691d81e6a3d52b02"
 }