Merge pull request #2570 from gluestack/release/@gluestack-ui/popover…

…@0.1.40 release: @gluestack-ui/popover version 0.1.40
gluestack · Nov 7, 2024 · 73f32dc · 73f32dc
2 parents 11e8afb + 84e512c
commit 73f32dc
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 19 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.57",
+    "@gluestack-ui/themed": "^1.1.58",
     "@gluestack/design-system": "^0.5.36",
     "@gorhom/bottom-sheet": "^5.0.0-alpha.10",
     "@legendapp/motion": "^2.2.0",

diff --git a/packages/config/package.json b/packages/config/package.json
@@ -55,7 +55,7 @@
     "@gluestack-ui/menu": "0.2.36",
     "@gluestack-ui/modal": "0.1.34",
     "@gluestack-ui/overlay": "0.1.15",
-    "@gluestack-ui/popover": "0.1.39",
+    "@gluestack-ui/popover": "0.1.40",
     "@gluestack-ui/pressable": "0.1.16",
     "@gluestack-ui/progress": "0.1.17",
     "@gluestack-ui/provider": "0.1.12",
@@ -66,14 +66,14 @@
     "@gluestack-ui/switch": "0.1.22",
     "@gluestack-ui/tabs": "0.1.17",
     "@gluestack-ui/textarea": "0.1.23",
-    "@gluestack-ui/themed": "1.1.57",
+    "@gluestack-ui/themed": "1.1.58",
     "@gluestack-ui/toast": "1.0.7",
     "@gluestack-ui/tooltip": "0.1.34",
     "@legendapp/motion": "latest"
   },
   "peerDependencies": {
     "@gluestack-style/react": ">=1.0.57",
-    "@gluestack-ui/themed": ">=1.1.57"
+    "@gluestack-ui/themed": ">=1.1.58"
   },
   "release-it": {
     "git": {

diff --git a/packages/themed/CHANGELOG.md b/packages/themed/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @gluestack-ui/themed
 
+## 1.1.58
+
+### Patch Changes
+
+- Updated dependencies
+  - @gluestack-ui/popover@0.1.40
+
 ## 1.1.57
 
 ### 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.57",
+  "version": "1.1.58",
   "main": "build/index.js",
   "types": "build/index.d.ts",
   "module": "build/index",
@@ -54,7 +54,7 @@
     "@gluestack-ui/menu": "0.2.36",
     "@gluestack-ui/modal": "0.1.34",
     "@gluestack-ui/overlay": "0.1.15",
-    "@gluestack-ui/popover": "0.1.39",
+    "@gluestack-ui/popover": "0.1.40",
     "@gluestack-ui/pressable": "0.1.16",
     "@gluestack-ui/progress": "0.1.17",
     "@gluestack-ui/provider": "0.1.12",

diff --git a/packages/unstyled/popover/CHANGELOG.md b/packages/unstyled/popover/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @gluestack-ui/popover
 
+## 0.1.40
+
+### Patch Changes
+
+- fix: Popover Arrow styling
+
 ## 0.1.39
 
 ### Patch Changes

diff --git a/packages/unstyled/popover/package.json b/packages/unstyled/popover/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gluestack-ui/popover",
-  "version": "0.1.39",
+  "version": "0.1.40",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
   "types": "lib/typescript/index.d.ts",

diff --git a/packages/unstyled/popover/src/Popover.tsx b/packages/unstyled/popover/src/Popover.tsx
@@ -1,8 +1,6 @@
 import React, { forwardRef } from 'react';
 import { useControllableState } from '@gluestack-ui/hooks';
 import { Overlay } from '@gluestack-ui/overlay';
-
-// import { useOverlayPosition } from '@react-native-aria/overlays';
 import { PopoverProvider } from './PopoverContext';
 
 export const Popover = (StyledPopover: any) =>

diff --git a/packages/unstyled/popover/src/PopoverArrow.tsx b/packages/unstyled/popover/src/PopoverArrow.tsx
@@ -27,11 +27,17 @@ const PopoverArrow = (StyledPopoverArrow: any) =>
       });
     }, [arrowHeight, arrowWidth, placement, actualPlacement]);
 
-    if (arrowProps?.style?.left) {
-      arrowProps.style.left -= arrowWidth / 2;
-    } else if (arrowProps?.style?.top) {
-      arrowProps.style.top -= arrowHeight / 2;
-    }
+    const ArrowStyle = React.useMemo(() => {
+      return {
+        top: arrowProps?.style?.top - arrowHeight / 2,
+        left: arrowProps?.style?.left - arrowWidth / 2,
+      };
+    }, [
+      arrowHeight,
+      arrowWidth,
+      arrowProps?.style?.top,
+      arrowProps?.style?.left,
+    ]);
 
     React.useEffect(() => {
       const ArrowComponent = (
@@ -42,6 +48,7 @@ const PopoverArrow = (StyledPopoverArrow: any) =>
             updateArrowSize({ height, width });
           }}
           {...props}
+          {...ArrowStyle}
           key={actualPlacement + 'arrow'}
           initial={{
             opacity: 0,
@@ -71,15 +78,15 @@ const PopoverArrow = (StyledPopoverArrow: any) =>
           }}
           style={[
             props?.style,
-            arrowProps?.style,
+            ArrowStyle,
             {
               // To avoid border radius case
               top:
                 placement === 'right bottom' || placement === 'left bottom'
-                  ? arrowProps?.style?.top > 4
-                    ? arrowProps?.style?.top - 4
-                    : arrowProps?.style?.top
-                  : arrowProps?.style?.top,
+                  ? ArrowStyle?.top > 4
+                    ? ArrowStyle?.top - 4
+                    : ArrowStyle?.top
+                  : ArrowStyle?.top,
             },
             additionalStyles,
           ]}