@zendeskgarden/react-tooltips 9.6.0 → 9.7.0

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,
@@ -57,7 +58,7 @@ const TooltipComponent = _ref => {
     isVisible: isInitialVisible
   });
   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 +76,9 @@ const TooltipComponent = _ref => {
       floating: floatingRef?.current
     },
     placement: floatingPlacement,
-    middleware: _placement === 'auto' ? [autoPlacement()] : undefined
+    middleware: _placement === 'auto' ? [autoPlacement()] : [flip({
+      fallbackPlacements
+    })]
   });
   useEffect(() => {
     let cleanup;
@@ -117,6 +120,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.0'
 }).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.0'
 }).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.0'
 }).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.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.6.0'
+  'data-garden-version': '9.7.0'
 }).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.0'
 }).withConfig({
   displayName: "StyledTooltip",
   componentId: "sc-gzzjq4-0"
@@ -207,6 +207,7 @@ const TooltipComponent = _ref => {
     content,
     refKey,
     placement: _placement,
+    fallbackPlacements: _fallbackPlacements,
     children,
     hasArrow,
     size,
@@ -233,7 +234,7 @@ const TooltipComponent = _ref => {
     isVisible: isInitialVisible
   });
   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 +252,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;
@@ -293,6 +296,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/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.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 || ^6.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.6.0"
+    "@zendeskgarden/react-theming": "^9.7.0"
   },
   "keywords": [
     "components",
@@ -47,5 +47,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "33fcfeab6a350bd9e73c0aebbc1652be5d8043bc"
+  "gitHead": "565d21114d465d64f323a1960d8731f3bbcdefe5"
 }