Merge pull request #2294 from gluestack/release/@gluestack-ui/tooltip…

…@0.1.32 Release/@gluestack UI/[email protected]
gluestack · Jul 12, 2024 · 50bafb5 · 50bafb5
2 parents 54e2461 + 811e100
commit 50bafb5
Show file tree

Hide file tree

Showing 9 changed files with 71 additions and 38 deletions.
diff --git a/example/storybook-nativewind/package.json b/example/storybook-nativewind/package.json
@@ -32,7 +32,7 @@
     "@gluestack-style/animation-resolver": "^1.0.4",
     "@gluestack-style/react": "^1.0.57",
     "@gluestack-ui/config": "^1.1.19",
-    "@gluestack-ui/themed": "^1.1.35",
+    "@gluestack-ui/themed": "^1.1.36",
     "@gluestack/design-system": "^0.5.36",
     "@gorhom/bottom-sheet": "^5.0.0-alpha.10",
     "@legendapp/motion": "^2.2.0",

diff --git a/example/storybook-nativewind/src/core-components/nativewind/tooltip/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/tooltip/index.tsx
@@ -105,27 +105,6 @@ export const TooltipContent = React.forwardRef(
     return (
       <UITooltip.Content
         ref={ref}
-        initial={{
-          opacity: 0,
-          scale: 0.5,
-        }}
-        animate={{
-          opacity: 1,
-          scale: 1,
-        }}
-        exit={{
-          opacity: 0,
-          scale: 0.5,
-        }}
-        transition={{
-          type: 'spring',
-          damping: 18,
-          stiffness: 50,
-          opacity: {
-            type: 'timing',
-            duration: 250,
-          },
-        }}
         {...props}
         className={tooltipContentStyle({
           class: className,

diff --git a/packages/config/package.json b/packages/config/package.json
@@ -66,14 +66,14 @@
     "@gluestack-ui/switch": "0.1.22",
     "@gluestack-ui/tabs": "0.1.16",
     "@gluestack-ui/textarea": "0.1.23",
-    "@gluestack-ui/themed": "1.1.35",
+    "@gluestack-ui/themed": "1.1.36",
     "@gluestack-ui/toast": "1.0.6",
-    "@gluestack-ui/tooltip": "0.1.31",
+    "@gluestack-ui/tooltip": "0.1.32",
     "@legendapp/motion": "latest"
   },
   "peerDependencies": {
     "@gluestack-style/react": ">=1.0.57",
-    "@gluestack-ui/themed": ">=1.1.35"
+    "@gluestack-ui/themed": ">=1.1.36"
   },
   "release-it": {
     "git": {

diff --git a/packages/themed/CHANGELOG.md b/packages/themed/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @gluestack-ui/themed
 
+## 1.1.36
+
+### Patch Changes
+
+- Updated dependencies
+  - @gluestack-ui/tooltip@0.1.32
+
 ## 1.1.35
 
 ### Patch Changes

diff --git a/packages/themed/package.json b/packages/themed/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gluestack-ui/themed",
-  "version": "1.1.35",
+  "version": "1.1.36",
   "main": "build/index.js",
   "types": "build/index.d.ts",
   "module": "build/index",
@@ -66,7 +66,7 @@
     "@gluestack-ui/tabs": "0.1.16",
     "@gluestack-ui/textarea": "0.1.23",
     "@gluestack-ui/toast": "1.0.6",
-    "@gluestack-ui/tooltip": "0.1.31",
+    "@gluestack-ui/tooltip": "0.1.32",
     "@legendapp/motion": "latest"
   },
   "devDependencies": {

diff --git a/packages/unstyled/tooltip/CHANGELOG.md b/packages/unstyled/tooltip/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @gluestack-ui/tooltip
 
+## 0.1.32
+
+### Patch Changes
+
+- - Fixed tooltip animation
+  - Changed default delay to 350ms
+
 ## 0.1.31
 
 ### Patch Changes

diff --git a/packages/unstyled/tooltip/package.json b/packages/unstyled/tooltip/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@gluestack-ui/tooltip",
   "description": "A universal headless tooltip component for React Native, Next.js & React",
-  "version": "0.1.31",
+  "version": "0.1.32",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
   "types": "lib/typescript/index.d.ts",

diff --git a/packages/unstyled/tooltip/src/Tooltip.tsx b/packages/unstyled/tooltip/src/Tooltip.tsx
@@ -19,7 +19,7 @@ function Tooltip<StyledTooltipProp>(
         defaultIsOpen = false,
         onClose,
         onOpen,
-        openDelay = 0,
+        openDelay = 350,
         closeDelay = 0,
         placement = 'bottom',
         children,

diff --git a/packages/unstyled/tooltip/src/TooltipContent.tsx b/packages/unstyled/tooltip/src/TooltipContent.tsx
@@ -21,15 +21,17 @@ export function TooltipContent<StyledTooltipContentProps>(
       shouldOverlapWithTrigger,
     } = value;
     const overlayRef = React.useRef(null);
-    const { overlayProps } = useOverlayPosition({
-      placement,
-      targetRef,
-      overlayRef,
-      crossOffset,
-      offset,
-      shouldOverlapWithTrigger,
-      shouldFlip,
-    });
+    const { overlayProps, placement: calculatedPlacement } = useOverlayPosition(
+      {
+        placement,
+        targetRef,
+        overlayRef,
+        crossOffset,
+        offset,
+        shouldOverlapWithTrigger,
+        shouldFlip,
+      }
+    );
 
     if (Object.keys(overlayProps.style).length === 0) {
       overlayProps.style = {
@@ -39,14 +41,52 @@ export function TooltipContent<StyledTooltipContentProps>(
     }
     const mergedRef = mergeRefs([ref, overlayRef]);
 
+    const initialAnimatedStyles = {
+      opacity: 0,
+      scale: 0.9,
+      y:
+        calculatedPlacement === 'top'
+          ? 6
+          : calculatedPlacement === 'bottom'
+          ? -6
+          : 0,
+      x:
+        calculatedPlacement === 'right'
+          ? -6
+          : calculatedPlacement === 'left'
+          ? 6
+          : 0,
+    };
+
+    const animatedStyles = {
+      opacity: 1,
+      y: 0,
+      scale: 1,
+      x: 0,
+    };
+
+    const exitAnimatedStyles = {
+      opacity: 0,
+      x: 0,
+      y: 0,
+    };
+
     return (
       <OverlayAnimatePresence
         visible={isOpen}
         AnimatePresence={AnimatePresence}
       >
         <StyledTooltipContent
+          initial={initialAnimatedStyles}
+          animate={animatedStyles}
+          exit={exitAnimatedStyles}
+          transition={{
+            type: 'timing',
+            duration: 100,
+          }}
           {...props}
           ref={mergedRef}
+          key={placement + calculatedPlacement}
           role={Platform.OS === 'web' ? 'tooltip' : undefined}
           style={[overlayProps.style, { position: 'absolute' }, style]}
         >