@zendeskgarden/react-tooltips 9.0.0-next.22 → 9.0.0-next.24

package/dist/esm/styled/StyledParagraph.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'tooltip.paragraph';
 const StyledParagraph = styled.p.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.24'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-wuqkfc-0"

package/dist/esm/styled/StyledTitle.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'tooltip.title';
 const StyledTitle = styled.strong.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.24'
 }).withConfig({
   displayName: "StyledTitle",
   componentId: "sc-vnjcvz-0"

package/dist/esm/styled/StyledTooltip.js

@@ -54,8 +54,16 @@ const sizeStyles = _ref => {
     titleDisplay = 'block';
   }
   let arrowSize;
+  let arrowShift;
   if (hasArrow) {
-    if (size === 'small' || size === 'medium') {
+    if (size === 'small') {
+      arrowSize = margin;
+      if (['left-start', 'left-end', 'right-start', 'right-end'].includes(placement)) {
+        arrowShift = `-${theme.borderRadii.md}px`;
+      } else {
+        arrowShift = '0';
+      }
+    } else if (size === 'medium') {
       arrowSize = margin;
     } else if (size === 'large') {
       margin = `${theme.space.base * 2}px`;
@@ -66,7 +74,8 @@ 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(theme, placement), {
-    size: arrowSize
+    size: arrowSize,
+    shift: arrowShift
   }), StyledParagraph, paragraphMarginTop, StyledTitle, titleDisplay);
 };
 const colorStyles = _ref2 => {
@@ -125,7 +134,7 @@ const colorStyles = _ref2 => {
 };
 const StyledTooltip = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.24'
 }).withConfig({
   displayName: "StyledTooltip",
   componentId: "sc-gzzjq4-0"

package/dist/index.cjs.js

@@ -25,7 +25,7 @@ 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.22'
+  'data-garden-version': '9.0.0-next.24'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-wuqkfc-0"
@@ -37,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.22'
+  'data-garden-version': '9.0.0-next.24'
 }).withConfig({
   displayName: "StyledTitle",
   componentId: "sc-vnjcvz-0"
@@ -91,8 +91,16 @@ const sizeStyles = _ref => {
     titleDisplay = 'block';
   }
   let arrowSize;
+  let arrowShift;
   if (hasArrow) {
-    if (size === 'small' || size === 'medium') {
+    if (size === 'small') {
+      arrowSize = margin;
+      if (['left-start', 'left-end', 'right-start', 'right-end'].includes(placement)) {
+        arrowShift = `-${theme.borderRadii.md}px`;
+      } else {
+        arrowShift = '0';
+      }
+    } else if (size === 'medium') {
       arrowSize = margin;
     } else if (size === 'large') {
       margin = `${theme.space.base * 2}px`;
@@ -103,7 +111,8 @@ 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(reactTheming.getArrowPosition(theme, placement), {
-    size: arrowSize
+    size: arrowSize,
+    shift: arrowShift
   }), StyledParagraph, paragraphMarginTop, StyledTitle, titleDisplay);
 };
 const colorStyles = _ref2 => {
@@ -162,7 +171,7 @@ const colorStyles = _ref2 => {
 };
 const StyledTooltip = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.22'
+  'data-garden-version': '9.0.0-next.24'
 }).withConfig({
   displayName: "StyledTooltip",
   componentId: "sc-gzzjq4-0"

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

@@ -37,30 +37,7 @@ export declare const TooltipComponent: {
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-export declare const Tooltip: {
-    ({ 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;
-    };
-} & {
+export declare const Tooltip: typeof TooltipComponent & {
     Paragraph: typeof Paragraph;
     Title: typeof Title;
 };

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

@@ -13,4 +13,4 @@ import { ITooltipProps } from '../types';
  *
  * @returns A tooltip size.
  */
-export declare const toSize: (size: ITooltipProps['size'], type: ITooltipProps['type']) => "small" | "medium" | "large" | "extra-large";
+export declare const toSize: (size: ITooltipProps["size"], type: ITooltipProps["type"]) => "small" | "medium" | "large" | "extra-large";

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

@@ -5,5 +5,5 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 export declare const StyledTooltipWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    zIndex?: string | number | undefined;
+    zIndex?: number | string;
 }, never>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-tooltips",
-  "version": "9.0.0-next.22",
+  "version": "9.0.0-next.24",
   "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>",
@@ -30,12 +30,12 @@
   },
   "peerDependencies": {
     "@zendeskgarden/react-theming": ">=9.0.0-next",
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.22"
+    "@zendeskgarden/react-theming": "^9.0.0-next.24"
   },
   "keywords": [
     "components",
@@ -47,5 +47,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "46309385a1495c2297da23409f4196f662fe418b"
+  "gitHead": "36ac3913276188edf8d187a9861be7ba765e487a"
 }