From 3fa49ac7f87e2dfd125a483844ac284cad1b2d9a Mon Sep 17 00:00:00 2001
From: Ryo Matsukawa <76232929+ryo-manba@users.noreply.github.com>
Date: Mon, 30 Dec 2024 15:05:42 +0900
Subject: [PATCH 1/3] fix(popover): correct initial animation direction to
 match fallback placement

---
 .../components/popover/src/use-popover.ts     | 22 ++++----------
 .../popover/stories/popover.stories.tsx       | 30 +++++++++++++++++--
 2 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/packages/components/popover/src/use-popover.ts b/packages/components/popover/src/use-popover.ts
index bc12cb14f4..22aa39dc3e 100644
--- a/packages/components/popover/src/use-popover.ts
+++ b/packages/components/popover/src/use-popover.ts
@@ -14,7 +14,7 @@ import {
   PropGetter,
   useProviderContext,
 } from "@nextui-org/system";
-import {getArrowPlacement, getShouldUseAxisPlacement} from "@nextui-org/aria-utils";
+import {getArrowPlacement} from "@nextui-org/aria-utils";
 import {popover} from "@nextui-org/theme";
 import {mergeProps, mergeRefs} from "@react-aria/utils";
 import {clsx, dataAttr, objectToDeps} from "@nextui-org/shared-utils";
@@ -150,11 +150,7 @@ export function usePopover(originalProps: UsePopoverProps) {
 
   const state = stateProp || innerState;
 
-  const {
-    popoverProps,
-    underlayProps,
-    placement: ariaPlacement,
-  } = useReactAriaPopover(
+  const {popoverProps, underlayProps, placement} = useReactAriaPopover(
     {
       triggerRef,
       isNonModal,
@@ -208,7 +204,7 @@ export function usePopover(originalProps: UsePopoverProps) {
     "data-focus": dataAttr(isFocused),
     "data-arrow": dataAttr(showArrow),
     "data-focus-visible": dataAttr(isFocusVisible),
-    "data-placement": getArrowPlacement(ariaPlacement || "top", placementProp),
+    "data-placement": getArrowPlacement(placement || "top", placementProp),
     ...mergeProps(focusProps, dialogPropsProp, props),
     className: slots.base({class: clsx(baseStyles)}),
     style: {
@@ -222,18 +218,10 @@ export function usePopover(originalProps: UsePopoverProps) {
       "data-slot": "content",
       "data-open": dataAttr(state.isOpen),
       "data-arrow": dataAttr(showArrow),
-      "data-placement": getArrowPlacement(ariaPlacement || "top", placementProp),
+      "data-placement": getArrowPlacement(placement || "top", placementProp),
       className: slots.content({class: clsx(classNames?.content, props.className)}),
     }),
-    [slots, state.isOpen, showArrow, ariaPlacement, placementProp, classNames],
-  );
-
-  const placement = useMemo(
-    () =>
-      getShouldUseAxisPlacement(ariaPlacement || "top", placementProp)
-        ? ariaPlacement || placementProp
-        : placementProp,
-    [ariaPlacement, placementProp],
+    [slots, state.isOpen, showArrow, placement, placementProp, classNames],
   );
 
   const onPress = useCallback(
diff --git a/packages/components/popover/stories/popover.stories.tsx b/packages/components/popover/stories/popover.stories.tsx
index 3df9aae279..1edfb00a5c 100644
--- a/packages/components/popover/stories/popover.stories.tsx
+++ b/packages/components/popover/stories/popover.stories.tsx
@@ -127,11 +127,11 @@ const content = (
   </PopoverContent>
 );
 
-const Template = (args: PopoverProps) => {
+const Template = ({label = "Open Popover", ...args}: PopoverProps & {label: string}) => {
   return (
     <Popover {...args}>
       <PopoverTrigger>
-        <Button>Open Popover</Button>
+        <Button>{label}</Button>
       </PopoverTrigger>
       {content}
     </Popover>
@@ -581,6 +581,32 @@ export const CustomMotion = {
   },
 };
 
+export const WithFallbackPlacements = {
+  args: {
+    ...defaultProps,
+  },
+  render: (args) => (
+    <div className="relative h-screen w-screen">
+      <div className="absolute top-0 left-0 p-8 flex gap-4">
+        <Template {...args} label="placement: top" placement="top" />
+        <Template {...args} label="placement: bottom" placement="bottom" />
+      </div>
+      <div className="absolute bottom-0 left-0 p-8 flex gap-4">
+        <Template {...args} label="placement: bottom" placement="bottom" />
+        <Template {...args} label="placement: top" placement="top" />
+      </div>
+      <div className="absolute left-0 top-1/2 -translate-y-1/2 p-8 flex flex-col gap-4">
+        <Template {...args} label="placement: left" placement="left" />
+        <Template {...args} label="placement: right" placement="right" />
+      </div>
+      <div className="absolute right-0 top-1/2 -translate-y-1/2 p-8 flex flex-col gap-4">
+        <Template {...args} label="placement: right" placement="right" />
+        <Template {...args} label="placement: left" placement="left" />
+      </div>
+    </div>
+  ),
+};
+
 export const WithShouldBlockScroll = {
   render: (args) => {
     return (

From bbdd9d713cd3555f8b8aba3d50577bd8f2b317e9 Mon Sep 17 00:00:00 2001
From: Ryo Matsukawa <76232929+ryo-manba@users.noreply.github.com>
Date: Mon, 30 Dec 2024 15:14:30 +0900
Subject: [PATCH 2/3] fix: type error

---
 packages/components/popover/src/use-popover.ts | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/components/popover/src/use-popover.ts b/packages/components/popover/src/use-popover.ts
index 22aa39dc3e..074081000b 100644
--- a/packages/components/popover/src/use-popover.ts
+++ b/packages/components/popover/src/use-popover.ts
@@ -81,6 +81,8 @@ export interface Props extends HTMLNextUIProps<"div"> {
   onClose?: () => void;
 }
 
+const DEFAULT_PLACEMENT = "top";
+
 export type UsePopoverProps = Props &
   Omit<ReactAriaPopoverProps, "triggerRef" | "popoverRef"> &
   OverlayTriggerProps &
@@ -110,7 +112,7 @@ export function usePopover(originalProps: UsePopoverProps) {
     portalContainer,
     updatePositionDeps,
     dialogProps: dialogPropsProp,
-    placement: placementProp = "top",
+    placement: placementProp = DEFAULT_PLACEMENT,
     triggerType = "dialog",
     showArrow = false,
     offset = 7,
@@ -204,7 +206,7 @@ export function usePopover(originalProps: UsePopoverProps) {
     "data-focus": dataAttr(isFocused),
     "data-arrow": dataAttr(showArrow),
     "data-focus-visible": dataAttr(isFocusVisible),
-    "data-placement": getArrowPlacement(placement || "top", placementProp),
+    "data-placement": getArrowPlacement(placement || DEFAULT_PLACEMENT, placementProp),
     ...mergeProps(focusProps, dialogPropsProp, props),
     className: slots.base({class: clsx(baseStyles)}),
     style: {
@@ -218,7 +220,7 @@ export function usePopover(originalProps: UsePopoverProps) {
       "data-slot": "content",
       "data-open": dataAttr(state.isOpen),
       "data-arrow": dataAttr(showArrow),
-      "data-placement": getArrowPlacement(placement || "top", placementProp),
+      "data-placement": getArrowPlacement(placement || DEFAULT_PLACEMENT, placementProp),
       className: slots.content({class: clsx(classNames?.content, props.className)}),
     }),
     [slots, state.isOpen, showArrow, placement, placementProp, classNames],
@@ -305,7 +307,7 @@ export function usePopover(originalProps: UsePopoverProps) {
     classNames,
     showArrow,
     triggerRef,
-    placement,
+    placement: placement || DEFAULT_PLACEMENT,
     isNonModal,
     popoverRef: domRef,
     portalContainer,

From e0962a8583a316fc0d3d06adc11a2e104d3b3071 Mon Sep 17 00:00:00 2001
From: Ryo Matsukawa <76232929+ryo-manba@users.noreply.github.com>
Date: Mon, 30 Dec 2024 15:28:11 +0900
Subject: [PATCH 3/3] chore: add changeset

---
 .changeset/witty-goats-trade.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/witty-goats-trade.md

diff --git a/.changeset/witty-goats-trade.md b/.changeset/witty-goats-trade.md
new file mode 100644
index 0000000000..1a52e0c75b
--- /dev/null
+++ b/.changeset/witty-goats-trade.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/popover": patch
+---
+
+Fix initial animation direction to match fallback placement (#4290)