@zendeskgarden/react-tooltips 9.0.0-next.9 → 9.1.0

package/dist/esm/elements/Paragraph.js

@@ -13,6 +13,6 @@ import '../styled/StyledTooltipWrapper.js';
 const Paragraph = forwardRef((props, ref) => React.createElement(StyledParagraph, Object.assign({
   ref: ref
 }, props)));
-Paragraph.displayName = 'Paragraph';
+Paragraph.displayName = 'Tooltip.Paragraph';
 
 export { Paragraph };

package/dist/esm/elements/Title.js

@@ -13,6 +13,6 @@ import '../styled/StyledTooltipWrapper.js';
 const Title = forwardRef((props, ref) => React.createElement(StyledTitle, Object.assign({
   ref: ref
 }, props)));
-Title.displayName = 'Title';
+Title.displayName = 'Tooltip.Title';
 
 export { Title };

package/dist/esm/styled/StyledParagraph.js

@@ -5,18 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+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.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).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

@@ -5,18 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+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.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).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

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight, arrowStyles, getArrowPosition, getColorV8 } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, getLineHeight, arrowStyles, getArrowPosition, getColor } from '@zendeskgarden/react-theming';
 import { StyledParagraph } from './StyledParagraph.js';
 import { StyledTitle } from './StyledTitle.js';
 
@@ -14,7 +14,6 @@ const sizeStyles = _ref => {
   let {
     theme,
     size,
-    type,
     placement,
     hasArrow
   } = _ref;
@@ -55,25 +54,28 @@ const sizeStyles = _ref => {
     titleDisplay = 'block';
   }
   let arrowSize;
-  let arrowInset;
+  let arrowShift;
   if (hasArrow) {
-    if (size === 'small' || size === 'medium') {
+    if (size === 'small') {
       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`;
+      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`;
+      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
+    shift: arrowShift
   }), StyledParagraph, paragraphMarginTop, StyledTitle, titleDisplay);
 };
 const colorStyles = _ref2 => {
@@ -81,29 +83,61 @@ const colorStyles = _ref2 => {
     theme,
     type
   } = _ref2;
-  let border;
-  let boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, getColorV8('chromeHue', 600, theme, 0.15));
-  let backgroundColor = getColorV8('chromeHue', 700, theme);
-  let color = getColorV8('background', 600 , theme);
+  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`, getColorV8('chromeHue', 600, theme, 0.15));
-    border = `${theme.borders.sm} ${getColorV8('neutralHue', 300, theme)}`;
-    backgroundColor = getColorV8('background', 600 , theme);
-    color = getColorV8('neutralHue', 700, theme);
-    titleColor = getColorV8('foreground', 600 , theme);
+    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:", ";box-shadow:", ";background-color:", ";color:", ";", "{color:", ";}"], border, boxShadow, backgroundColor, color, StyledTitle, titleColor);
+  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.9'
+  'data-garden-version': '9.1.0'
 }).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
-};
+})(["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));
 
 export { StyledTooltip };

package/dist/esm/styled/StyledTooltipWrapper.js

@@ -5,14 +5,10 @@
 * 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/index.cjs.js

@@ -25,33 +25,26 @@ 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.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-wuqkfc-0"
 })(["margin:0;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
-StyledParagraph.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
 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.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledTitle",
   componentId: "sc-vnjcvz-0"
 })(["display:none;margin:0;font-weight:", ";", ";"], props => props.theme.fontWeights.semibold, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
-StyledTitle.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
 const COMPONENT_ID = 'tooltip.tooltip';
 const sizeStyles = _ref => {
   let {
     theme,
     size,
-    type,
     placement,
     hasArrow
   } = _ref;
@@ -92,25 +85,28 @@ const sizeStyles = _ref => {
     titleDisplay = 'block';
   }
   let arrowSize;
-  let arrowInset;
+  let arrowShift;
   if (hasArrow) {
-    if (size === 'small' || size === 'medium') {
+    if (size === 'small') {
       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`;
+      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`;
+      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
+    shift: arrowShift
   }), StyledParagraph, paragraphMarginTop, StyledTitle, titleDisplay);
 };
 const colorStyles = _ref2 => {
@@ -118,48 +114,77 @@ const colorStyles = _ref2 => {
     theme,
     type
   } = _ref2;
-  let border;
-  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 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.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);
+    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.9'
+  'data-garden-version': '9.1.0'
 }).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));
-StyledTooltip.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["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));
 
 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);
-StyledTooltipWrapper.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
 const Paragraph = React.forwardRef((props, ref) => React__default.default.createElement(StyledParagraph, Object.assign({
   ref: ref
 }, props)));
-Paragraph.displayName = 'Paragraph';
+Paragraph.displayName = 'Tooltip.Paragraph';
 
 const Title = React.forwardRef((props, ref) => React__default.default.createElement(StyledTitle, Object.assign({
   ref: ref
 }, props)));
-Title.displayName = 'Title';
+Title.displayName = 'Tooltip.Title';
 
 const PLACEMENT = ['auto', ...reactTheming.PLACEMENT];
 const SIZE = ['small', 'medium', 'large', 'extra-large'];

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.9",
+  "version": "9.1.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>",
@@ -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": ">=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.9"
+    "@zendeskgarden/react-theming": "^9.1.0"
   },
   "keywords": [
     "components",
@@ -47,5 +47,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "771281b562d376a6aee04b0cd71dd888b3ae4a1d"
+  "gitHead": "a2842d18615ad057d75988fde4df5a0c79d2714e"
 }