@zendeskgarden/react-tooltips 9.1.1 → 9.2.0

package/dist/esm/elements/Tooltip.js

@@ -92,16 +92,16 @@ const TooltipComponent = _ref => {
     style: {
       transform
     },
-    zIndex: zIndex,
+    $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,
+    $hasArrow: hasArrow,
+    $placement: placement,
+    $size: toSize(size, type),
+    $type: type,
+    onBlur: composeEventHandlers(onBlur, () => closeTooltip(0)),
+    onFocus: composeEventHandlers(onFocus, openTooltip),
     ...props
   }), content));
   return React.createElement(React.Fragment, null, cloneElement(Child, getTriggerProps({

package/dist/esm/styled/StyledParagraph.js

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

package/dist/esm/styled/StyledTitle.js

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

package/dist/esm/styled/StyledTooltip.js

@@ -13,9 +13,9 @@ const COMPONENT_ID = 'tooltip.tooltip';
 const sizeStyles = _ref => {
   let {
     theme,
-    size,
-    placement,
-    hasArrow
+    $hasArrow,
+    $placement,
+    $size
   } = _ref;
   let margin = `${theme.space.base * 1.5}px`;
   let borderRadius = theme.borderRadii.sm;
@@ -28,52 +28,52 @@ const sizeStyles = _ref => {
   let titleDisplay;
   let paragraphMarginTop;
   let wordWrap;
-  if (size !== 'small') {
+  if ($size !== 'small') {
     borderRadius = theme.borderRadii.md;
     overflowWrap = 'break-word';
     whiteSpace = 'normal';
     wordWrap = 'break-word';
   }
-  if (size === 'extra-large') {
+  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') {
+  } 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') {
+  } else if ($size === 'medium') {
     padding = '1em';
     maxWidth = `140px`;
     lineHeight = getLineHeight(theme.space.base * 4, theme.fontSizes.sm);
   }
-  if (size === 'extra-large' || size === 'large') {
+  if ($size === 'extra-large' || $size === 'large') {
     fontSize = theme.fontSizes.md;
     titleDisplay = 'block';
   }
   let arrowSize;
   let arrowShift;
-  if (hasArrow) {
-    if (size === 'small') {
+  if ($hasArrow) {
+    if ($size === 'small') {
       arrowSize = margin;
-      if (['left-start', 'left-end', 'right-start', 'right-end'].includes(placement)) {
+      if (['left-start', 'left-end', 'right-start', 'right-end'].includes($placement)) {
         arrowShift = `-${theme.borderRadii.md}px`;
       } else {
         arrowShift = '0';
       }
-    } else if (size === 'medium') {
+    } else if ($size === 'medium') {
       arrowSize = margin;
-    } else if (size === 'large') {
+    } else if ($size === 'large') {
       margin = `${theme.space.base * 2}px`;
       arrowSize = margin;
-    } else if (size === 'extra-large') {
+    } 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), {
+  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,
     shift: arrowShift
   }), StyledParagraph, paragraphMarginTop, StyledTitle, titleDisplay);
@@ -81,14 +81,14 @@ const sizeStyles = _ref => {
 const colorStyles = _ref2 => {
   let {
     theme,
-    type
+    $type
   } = _ref2;
   let borderColor;
   let boxShadow;
   let backgroundColor;
   let color;
   let titleColor;
-  if (type === 'light') {
+  if ($type === 'light') {
     backgroundColor = getColor({
       theme,
       variable: 'background.raised'
@@ -134,7 +134,7 @@ const colorStyles = _ref2 => {
 };
 const StyledTooltip = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledTooltip",
   componentId: "sc-gzzjq4-0"

package/dist/esm/styled/StyledTooltipWrapper.js

@@ -9,6 +9,6 @@ import styled from 'styled-components';
 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);
+})(["position:absolute;top:0;left:0;transition:opacity 10ms;opacity:1;z-index:", ";&[aria-hidden='true']{visibility:hidden;opacity:0;}"], props => props.$zIndex);
 
 export { StyledTooltipWrapper };

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.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-wuqkfc-0"
@@ -34,7 +34,7 @@ const StyledParagraph = styled__default.default.p.attrs({
 const COMPONENT_ID$1 = 'tooltip.title';
 const StyledTitle = styled__default.default.strong.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledTitle",
   componentId: "sc-vnjcvz-0"
@@ -44,9 +44,9 @@ const COMPONENT_ID = 'tooltip.tooltip';
 const sizeStyles = _ref => {
   let {
     theme,
-    size,
-    placement,
-    hasArrow
+    $hasArrow,
+    $placement,
+    $size
   } = _ref;
   let margin = `${theme.space.base * 1.5}px`;
   let borderRadius = theme.borderRadii.sm;
@@ -59,52 +59,52 @@ const sizeStyles = _ref => {
   let titleDisplay;
   let paragraphMarginTop;
   let wordWrap;
-  if (size !== 'small') {
+  if ($size !== 'small') {
     borderRadius = theme.borderRadii.md;
     overflowWrap = 'break-word';
     whiteSpace = 'normal';
     wordWrap = 'break-word';
   }
-  if (size === 'extra-large') {
+  if ($size === 'extra-large') {
     padding = `${theme.space.base * 10}px`;
     maxWidth = `460px`;
     lineHeight = reactTheming.getLineHeight(theme.space.base * 5, theme.fontSizes.md);
     paragraphMarginTop = `${theme.space.base * 2.5}px`;
-  } else if (size === 'large') {
+  } else if ($size === 'large') {
     padding = `${theme.space.base * 5}px`;
     maxWidth = `270px`;
     lineHeight = reactTheming.getLineHeight(theme.space.base * 5, theme.fontSizes.md);
     paragraphMarginTop = `${theme.space.base * 2}px`;
-  } else if (size === 'medium') {
+  } else if ($size === 'medium') {
     padding = '1em';
     maxWidth = `140px`;
     lineHeight = reactTheming.getLineHeight(theme.space.base * 4, theme.fontSizes.sm);
   }
-  if (size === 'extra-large' || size === 'large') {
+  if ($size === 'extra-large' || $size === 'large') {
     fontSize = theme.fontSizes.md;
     titleDisplay = 'block';
   }
   let arrowSize;
   let arrowShift;
-  if (hasArrow) {
-    if (size === 'small') {
+  if ($hasArrow) {
+    if ($size === 'small') {
       arrowSize = margin;
-      if (['left-start', 'left-end', 'right-start', 'right-end'].includes(placement)) {
+      if (['left-start', 'left-end', 'right-start', 'right-end'].includes($placement)) {
         arrowShift = `-${theme.borderRadii.md}px`;
       } else {
         arrowShift = '0';
       }
-    } else if (size === 'medium') {
+    } else if ($size === 'medium') {
       arrowSize = margin;
-    } else if (size === 'large') {
+    } else if ($size === 'large') {
       margin = `${theme.space.base * 2}px`;
       arrowSize = margin;
-    } else if (size === 'extra-large') {
+    } 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), {
+  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,
     shift: arrowShift
   }), StyledParagraph, paragraphMarginTop, StyledTitle, titleDisplay);
@@ -112,14 +112,14 @@ const sizeStyles = _ref => {
 const colorStyles = _ref2 => {
   let {
     theme,
-    type
+    $type
   } = _ref2;
   let borderColor;
   let boxShadow;
   let backgroundColor;
   let color;
   let titleColor;
-  if (type === 'light') {
+  if ($type === 'light') {
     backgroundColor = reactTheming.getColor({
       theme,
       variable: 'background.raised'
@@ -165,7 +165,7 @@ const colorStyles = _ref2 => {
 };
 const StyledTooltip = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.1.1'
+  'data-garden-version': '9.2.0'
 }).withConfig({
   displayName: "StyledTooltip",
   componentId: "sc-gzzjq4-0"
@@ -174,7 +174,7 @@ const StyledTooltip = styled__default.default.div.attrs({
 const StyledTooltipWrapper = styled__default.default.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);
+})(["position:absolute;top:0;left:0;transition:opacity 10ms;opacity:1;z-index:", ";&[aria-hidden='true']{visibility:hidden;opacity:0;}"], props => props.$zIndex);
 
 const Paragraph = React.forwardRef((props, ref) => React__default.default.createElement(StyledParagraph, Object.assign({
   ref: ref
@@ -268,16 +268,16 @@ const TooltipComponent = _ref => {
     style: {
       transform
     },
-    zIndex: zIndex,
+    $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,
+    $hasArrow: hasArrow,
+    $placement: placement,
+    $size: toSize(size, type),
+    $type: type,
+    onBlur: containerUtilities.composeEventHandlers(onBlur, () => closeTooltip(0)),
+    onFocus: containerUtilities.composeEventHandlers(onFocus, openTooltip),
     ...props
   }), content));
   return React__default.default.createElement(React__default.default.Fragment, null, React.cloneElement(Child, getTriggerProps({

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

@@ -7,9 +7,11 @@
 import { DefaultTheme } from 'styled-components';
 import { Placement } from '@floating-ui/react-dom';
 import { ITooltipProps } from '../types';
-interface IStyledTooltipProps extends Pick<ITooltipProps, 'hasArrow' | 'size' | 'zIndex'> {
-    placement: Placement;
-    type: NonNullable<ITooltipProps['type']>;
+interface IStyledTooltipProps {
+    $hasArrow: ITooltipProps['hasArrow'];
+    $placement: Placement;
+    $size: NonNullable<ITooltipProps['size']>;
+    $type: NonNullable<ITooltipProps['type']>;
 }
 /**
  * Accepts all `<div>` props

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?: number | string;
+    $zIndex?: number | string;
 }, never>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-tooltips",
-  "version": "9.1.1",
+  "version": "9.2.0",
   "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.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.1.1"
+    "@zendeskgarden/react-theming": "^9.2.0"
   },
   "keywords": [
     "components",
@@ -47,5 +47,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "21eaf7b57f27f1a846ed332f1b8e655d6bc0a13b"
+  "gitHead": "23a86c9a1e830685e277544c089b44614c2261ac"
 }