fix(popover): correct initial animation direction to match fallback p…

…lacement
heroui-inc · Dec 30, 2024 · 3fa49ac · 3fa49ac
1 parent 4f0ef58
commit 3fa49ac
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 19 deletions.
diff --git 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
@@ -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 (