RAC Tooltip: add support of prop shouldFlip (#6147)

Co-authored-by: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Co-authored-by: Reid Barber <reid@reidbarber.com>

Author: 3 people

packages/react-aria-components/src/Tooltip.tsx

@@ -137,7 +137,8 @@ function TooltipInner(props: TooltipProps & {isExiting: boolean, tooltipRef: Ref
     crossOffset: props.crossOffset,
     isOpen: state.isOpen,
     arrowSize: arrowWidth,
-    arrowBoundaryOffset: props.arrowBoundaryOffset
+    arrowBoundaryOffset: props.arrowBoundaryOffset,
+    shouldFlip: props.shouldFlip
   });
 
   let isEntering = useEnterAnimation(props.tooltipRef, !!placement) || props.isEntering || false;

packages/react-aria-components/stories/Tooltip.stories.tsx

@@ -115,6 +115,7 @@ export const TooltipArrowBoundaryOffsetExample = {
               <Button style={{width: 200, height: 100}}>Top left</Button>
               <Tooltip
                 placement="top left"
+                shouldFlip={false}
                 offset={7}
                 arrowBoundaryOffset={topLeft}
                 style={{
@@ -138,6 +139,7 @@ export const TooltipArrowBoundaryOffsetExample = {
               <Button style={{width: 200, height: 100}}>Top right</Button>
               <Tooltip
                 placement="top right"
+                shouldFlip={false}
                 offset={7}
                 arrowBoundaryOffset={topRight}
                 style={{
@@ -163,6 +165,7 @@ export const TooltipArrowBoundaryOffsetExample = {
               <Button style={{width: 200, height: 100}}>Left top</Button>
               <Tooltip
                 placement="left top"
+                shouldFlip={false}
                 offset={7}
                 arrowBoundaryOffset={leftTop}
                 style={{
@@ -186,6 +189,7 @@ export const TooltipArrowBoundaryOffsetExample = {
               <Button style={{width: 200, height: 100}}>Left bottom</Button>
               <Tooltip
                 placement="left bottom"
+                shouldFlip={false}
                 offset={7}
                 arrowBoundaryOffset={leftBotton}
                 style={{
@@ -211,6 +215,7 @@ export const TooltipArrowBoundaryOffsetExample = {
               <Button style={{width: 200, height: 100}}>Right top</Button>
               <Tooltip
                 placement="right top"
+                shouldFlip={false}
                 offset={7}
                 arrowBoundaryOffset={rightTop}
                 style={{
@@ -234,6 +239,7 @@ export const TooltipArrowBoundaryOffsetExample = {
               <Button style={{width: 200, height: 100}}>Right bottom</Button>
               <Tooltip
                 placement="right bottom"
+                shouldFlip={false}
                 offset={7}
                 arrowBoundaryOffset={rightBottom}
                 style={{
@@ -259,6 +265,7 @@ export const TooltipArrowBoundaryOffsetExample = {
               <Button style={{width: 200, height: 100}}>Bottom left</Button>
               <Tooltip
                 placement="bottom left"
+                shouldFlip={false}
                 offset={7}
                 arrowBoundaryOffset={bottomLeft}
                 style={{
@@ -282,6 +289,7 @@ export const TooltipArrowBoundaryOffsetExample = {
               <Button style={{width: 200, height: 100}}>Bottom right</Button>
               <Tooltip
                 placement="bottom right"
+                shouldFlip={false}
                 offset={7}
                 arrowBoundaryOffset={bottomRight}
                 style={{