@zendeskgarden/react-tooltips 9.6.0 → 9.7.1

package/dist/esm/elements/Tooltip.js

@@ -16,7 +16,7 @@ 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 { useFloating, platform, autoPlacement, flip, autoUpdate } from '@floating-ui/react-dom';
 import { DEFAULT_THEME, getFloatingPlacements } from '@zendeskgarden/react-theming';
 import { toSize } from './utils.js';
 import { Paragraph } from './Paragraph.js';
@@ -31,6 +31,7 @@ const TooltipComponent = _ref => {
     content,
     refKey,
     placement: _placement,
+    fallbackPlacements: _fallbackPlacements,
     children,
     hasArrow,
     size,
@@ -54,10 +55,11 @@ const TooltipComponent = _ref => {
   } = useTooltip({
     id,
     delayMilliseconds: delayMS,
-    isVisible: isInitialVisible
+    isVisible: isInitialVisible,
+    triggerRef
   });
   const controlledIsVisible = getControlledValue(externalIsVisible, isVisible);
-  const [floatingPlacement] = getFloatingPlacements(theme, _placement === 'auto' ? PLACEMENT_DEFAULT : _placement);
+  const [floatingPlacement, fallbackPlacements] = getFloatingPlacements(theme, _placement === 'auto' ? PLACEMENT_DEFAULT : _placement, _fallbackPlacements);
   const {
     refs,
     placement,
@@ -75,7 +77,9 @@ const TooltipComponent = _ref => {
       floating: floatingRef?.current
     },
     placement: floatingPlacement,
-    middleware: _placement === 'auto' ? [autoPlacement()] : undefined
+    middleware: _placement === 'auto' ? [autoPlacement()] : [flip({
+      fallbackPlacements
+    })]
   });
   useEffect(() => {
     let cleanup;
@@ -94,16 +98,17 @@ const TooltipComponent = _ref => {
     },
     $zIndex: zIndex,
     "aria-hidden": !controlledIsVisible
-  }, React.createElement(StyledTooltip, getTooltipProps({
-    'aria-hidden': !controlledIsVisible,
+  }, React.createElement(StyledTooltip, Object.assign({
     $hasArrow: hasArrow,
     $placement: placement,
     $size: toSize(size, type),
-    $type: type,
+    $type: type
+  }, getTooltipProps({
+    'aria-hidden': !controlledIsVisible,
     onBlur: composeEventHandlers(onBlur, () => closeTooltip(0)),
     onFocus: composeEventHandlers(onFocus, openTooltip),
     ...props
-  }), content));
+  })), content));
   return React.createElement(React.Fragment, null, cloneElement(Child, getTriggerProps({
     ...Child.props,
     [refKey]: mergeRefs([triggerRef, Child.ref ? Child.ref : null])
@@ -117,6 +122,7 @@ TooltipComponent.propTypes = {
   id: PropTypes.string,
   content: PropTypes.node.isRequired,
   placement: PropTypes.oneOf(PLACEMENT),
+  fallbackPlacements: PropTypes.arrayOf(PropTypes.oneOf(PLACEMENT.filter(placement => placement !== 'auto'))),
   size: PropTypes.oneOf(SIZE),
   type: PropTypes.oneOf(TYPE),
   zIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

package/dist/esm/styled/StyledParagraph.js

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

package/dist/esm/styled/StyledTitle.js

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

package/dist/esm/styled/StyledTooltip.js

@@ -134,7 +134,7 @@ const colorStyles = _ref2 => {
 };
 const StyledTooltip = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.6.0'
+  'data-garden-version': '9.7.1'
 }).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.6.0'
+  'data-garden-version': '9.7.1'
 }).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.6.0'
+  'data-garden-version': '9.7.1'
 }).withConfig({
   displayName: "StyledTitle",
   componentId: "sc-vnjcvz-0"
@@ -165,7 +165,7 @@ const colorStyles = _ref2 => {
 };
 const StyledTooltip = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.6.0'
+  'data-garden-version': '9.7.1'
 }).withConfig({
   displayName: "StyledTooltip",
   componentId: "sc-gzzjq4-0"
@@ -207,6 +207,7 @@ const TooltipComponent = _ref => {
     content,
     refKey,
     placement: _placement,
+    fallbackPlacements: _fallbackPlacements,
     children,
     hasArrow,
     size,
@@ -230,10 +231,11 @@ const TooltipComponent = _ref => {
   } = containerTooltip.useTooltip({
     id,
     delayMilliseconds: delayMS,
-    isVisible: isInitialVisible
+    isVisible: isInitialVisible,
+    triggerRef
   });
   const controlledIsVisible = containerUtilities.getControlledValue(externalIsVisible, isVisible);
-  const [floatingPlacement] = reactTheming.getFloatingPlacements(theme, _placement === 'auto' ? PLACEMENT_DEFAULT : _placement);
+  const [floatingPlacement, fallbackPlacements] = reactTheming.getFloatingPlacements(theme, _placement === 'auto' ? PLACEMENT_DEFAULT : _placement, _fallbackPlacements);
   const {
     refs,
     placement,
@@ -251,7 +253,9 @@ const TooltipComponent = _ref => {
       floating: floatingRef?.current
     },
     placement: floatingPlacement,
-    middleware: _placement === 'auto' ? [reactDom.autoPlacement()] : undefined
+    middleware: _placement === 'auto' ? [reactDom.autoPlacement()] : [reactDom.flip({
+      fallbackPlacements
+    })]
   });
   React.useEffect(() => {
     let cleanup;
@@ -270,16 +274,17 @@ const TooltipComponent = _ref => {
     },
     $zIndex: zIndex,
     "aria-hidden": !controlledIsVisible
-  }, React__default.default.createElement(StyledTooltip, getTooltipProps({
-    'aria-hidden': !controlledIsVisible,
+  }, React__default.default.createElement(StyledTooltip, Object.assign({
     $hasArrow: hasArrow,
     $placement: placement,
     $size: toSize(size, type),
-    $type: type,
+    $type: type
+  }, getTooltipProps({
+    'aria-hidden': !controlledIsVisible,
     onBlur: containerUtilities.composeEventHandlers(onBlur, () => closeTooltip(0)),
     onFocus: containerUtilities.composeEventHandlers(onFocus, openTooltip),
     ...props
-  }), content));
+  })), content));
   return React__default.default.createElement(React__default.default.Fragment, null, React.cloneElement(Child, getTriggerProps({
     ...Child.props,
     [refKey]: reactMergeRefs.mergeRefs([triggerRef, Child.ref ? Child.ref : null])
@@ -293,6 +298,7 @@ TooltipComponent.propTypes = {
   id: PropTypes__default.default.string,
   content: PropTypes__default.default.node.isRequired,
   placement: PropTypes__default.default.oneOf(PLACEMENT),
+  fallbackPlacements: PropTypes__default.default.arrayOf(PropTypes__default.default.oneOf(PLACEMENT.filter(placement => placement !== 'auto'))),
   size: PropTypes__default.default.oneOf(SIZE),
   type: PropTypes__default.default.oneOf(TYPE),
   zIndex: PropTypes__default.default.oneOfType([PropTypes__default.default.number, PropTypes__default.default.string]),

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

@@ -11,7 +11,7 @@ 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;
+    ({ id, delayMS, isInitialVisible, content, refKey, placement: _placement, fallbackPlacements: _fallbackPlacements, children, hasArrow, size, type, appendToNode, zIndex, isVisible: externalIsVisible, onFocus, onBlur, ...props }: ITooltipProps): React.JSX.Element;
     displayName: string;
     propTypes: {
         appendToNode: PropTypes.Requireable<any>;
@@ -20,6 +20,7 @@ export declare const TooltipComponent: {
         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">;
+        fallbackPlacements: PropTypes.Requireable<("top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "end" | "end-top" | "end-bottom" | "start" | "start-top" | "start-bottom" | null | undefined)[]>;
         size: PropTypes.Requireable<"small" | "medium" | "large" | "extra-large">;
         type: PropTypes.Requireable<"light" | "dark">;
         zIndex: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;

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

@@ -10,7 +10,7 @@ interface IStyledTooltipProps {
     $hasArrow: ITooltipProps['hasArrow'];
     $placement: Placement;
     $size: NonNullable<ITooltipProps['size']>;
-    $type: NonNullable<ITooltipProps['type']>;
+    $type: ITooltipProps['type'];
 }
 /**
  * Accepts all `<div>` props

package/dist/typings/types/index.d.ts

@@ -18,6 +18,8 @@ export interface ITooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'con
     delayMS?: number;
     /** Defines the content of the tooltip */
     content: ReactNode;
+    /** Provides a list of acceptable fallback placements */
+    fallbackPlacements?: Exclude<GardenPlacement, 'auto'>[];
     /** Adjusts the placement of the tooltip */
     placement?: GardenPlacement;
     /** Adjusts the padding and font size */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-tooltips",
-  "version": "9.6.0",
+  "version": "9.7.1",
   "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,7 +22,7 @@
   "types": "dist/typings/index.d.ts",
   "dependencies": {
     "@floating-ui/react-dom": "^2.0.0",
-    "@zendeskgarden/container-tooltip": "^1.0.16",
+    "@zendeskgarden/container-tooltip": "^2.0.0",
     "@zendeskgarden/container-utilities": "^2.0.0",
     "polished": "^4.3.1",
     "prop-types": "^15.5.7",
@@ -35,7 +35,10 @@
     "styled-components": "^5.3.1 || ^6.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.6.0"
+    "@zendeskgarden/react-buttons": "^9.7.1",
+    "@zendeskgarden/react-dropdowns": "^9.7.1",
+    "@zendeskgarden/react-grid": "^9.7.1",
+    "@zendeskgarden/react-theming": "^9.7.1"
   },
   "keywords": [
     "components",
@@ -47,5 +50,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "33fcfeab6a350bd9e73c0aebbc1652be5d8043bc"
+  "gitHead": "df6d9dc7ac384673ecbf8fd5adb954fab8681974"
 }