fix(popover): placements

packages/components/card/package.json

@@ -54,6 +54,7 @@
     "@nextui-org/link": "workspace:*",
     "@nextui-org/button": "workspace:*",
     "@nextui-org/avatar": "workspace:*",
+    "@nextui-org/image": "workspace:*",
     "clean-package": "2.2.0",
     "react": "^18.0.0"
   },

packages/components/card/stories/card.stories.tsx

@@ -4,6 +4,7 @@ import {card} from "@nextui-org/theme";
 import {Link} from "@nextui-org/link";
 import {Button} from "@nextui-org/button";
 import {Code} from "@nextui-org/code";
+import {Image} from "@nextui-org/image";
 
 import {Card, CardBody, CardHeader, CardFooter, CardProps} from "../src";
 
@@ -82,7 +83,7 @@ const Template: ComponentStory<typeof Card> = (args: CardProps) => (
 );
 
 const WithDividerTemplate: ComponentStory<typeof Card> = (args: CardProps) => (
-  <Card {...args} isBordered className="max-w-md">
+  <Card {...args} className="max-w-md">
     <CardHeader className="border-b border-border dark:border-border-dark">
       <strong>Description</strong>
     </CardHeader>
@@ -101,11 +102,12 @@ const WithDividerTemplate: ComponentStory<typeof Card> = (args: CardProps) => (
 const WithFooterTemplate: ComponentStory<typeof Card> = (args: CardProps) => (
   <Card {...args} className="p-4 max-w-md">
     <CardHeader className="flex gap-3">
-      <img
+      <Image
         alt="nextui logo"
-        height="34px"
+        height={34}
+        radius="lg"
         src="https://avatars.githubusercontent.com/u/86160567?s=200&v=4"
-        width="34px"
+        width={34}
       />
       <div className="flex flex-col">
         <b className="text-lg">NextUI</b>
@@ -125,16 +127,18 @@ const WithFooterTemplate: ComponentStory<typeof Card> = (args: CardProps) => (
 
 const WithAbsImageHeaderTemplate: ComponentStory<typeof Card> = (args: CardProps) => (
   <Card {...args} className="max-w-[330px]">
-    <CardHeader className="absolute top-2 z-10">
+    <CardHeader className="absolute top-2 z-20">
       <div className="flex flex-col">
         <p className="text-white/60 text-xs uppercase font-bold">What to watch</p>
         <p className="text-white text-2xl">Stream the Apple event</p>
       </div>
     </CardHeader>
-    <img
-      alt="Apple event background"
+    <Image
+      alt="Card background"
       className="w-full h-[440px] object-cover"
+      height={440}
       src={require("./assets/apple-event.jpeg")}
+      width={330}
     />
   </Card>
 );
@@ -151,10 +155,12 @@ const WithAbsImgHeaderFooterTemplate: ComponentStory<typeof Card> = (args: CardP
         </p>
       </div>
     </CardHeader>
-    <img
-      alt="Apple homepods background"
+    <Image
+      alt="Card background"
       className="w-full h-[440px] pt-10 object-contain"
+      height={440}
       src={require("./assets/homepod.jpeg")}
+      width={300}
     />
     <CardFooter className="justify-between absolute bottom-0">
       <div>
@@ -249,6 +255,24 @@ const CoverImgTemplate: ComponentStory<typeof Card> = (args: CardProps) => (
   </div>
 );
 
+const CenterImgTemplate: ComponentStory<typeof Card> = (args: CardProps) => (
+  <Card {...args} className="max-w-fit py-4 px-0">
+    <CardHeader className="pb-0 pt-2 px-4 flex-col !items-start">
+      <p className="text-xs uppercase font-bold">Daily Mix</p>
+      <small className="text-neutral-500">12 Tracks</small>
+      <h4 className="font-bold text-lg">Frontend Radio</h4>
+    </CardHeader>
+    <CardBody className="overflow-visible py-2">
+      <Image
+        isBlurred
+        alt="Card background"
+        src={require("./assets/local-image-1.jpeg")}
+        width={300}
+      />
+    </CardBody>
+  </Card>
+);
+
 const PrimaryActionTemplate: ComponentStory<typeof Card> = (args: CardProps) => {
   const list = [
     {
@@ -410,6 +434,11 @@ CoverImg.args = {
   ...defaultProps,
 };
 
+export const CenterImg = CenterImgTemplate.bind({});
+CenterImg.args = {
+  ...defaultProps,
+};
+
 export const PrimaryAction = PrimaryActionTemplate.bind({});
 PrimaryAction.args = {
   ...defaultProps,

packages/components/dropdown/src/use-dropdown.ts

@@ -48,7 +48,7 @@ export function useDropdown(props: UseDropdownProps) {
     placement = "bottom",
     isDisabled = false,
     closeOnSelect = true,
-    classNames: stylesProp,
+    classNames: classNamesProp,
     disableAnimation = false,
     className,
     ...otherProps
@@ -89,10 +89,10 @@ export function useDropdown(props: UseDropdownProps) {
     triggerRef: menuTriggerRef,
     ...mergeProps(otherProps, props),
     classNames: {
-      ...stylesProp,
+      ...classNamesProp,
       ...props.classNames,
-      base: clsx(classNames, stylesProp?.base, props.className),
-      arrow: clsx("border border-neutral-100", stylesProp?.arrow),
+      base: clsx(classNames, classNamesProp?.base, props.className),
+      arrow: clsx("border border-neutral-100", classNamesProp?.arrow),
     },
   });
 

packages/components/popover/src/use-popover.ts

@@ -1,8 +1,8 @@
 import type {PopoverVariantProps, SlotsToClasses, PopoverSlots} from "@nextui-org/theme";
 import type {HTMLMotionProps} from "framer-motion";
-import type {OverlayPlacement} from "@nextui-org/aria-utils";
 import type {RefObject, Ref} from "react";
 
+import {OverlayPlacement, toOverlayPlacement} from "@nextui-org/aria-utils";
 import {OverlayTriggerState, useOverlayTriggerState} from "@react-stately/overlays";
 import {useFocusRing} from "@react-aria/focus";
 import {
@@ -210,7 +210,7 @@ export function usePopover(originalProps: UsePopoverProps) {
     classNames,
     showArrow,
     triggerRef,
-    placement: placementProp,
+    placement: placement ? toOverlayPlacement(placement) : placementProp,
     isOpen: state.isOpen,
     onClose: state.close,
     disableAnimation,

packages/core/theme/src/components/popover.ts

@@ -82,7 +82,7 @@ const popover = tv({
       light: {base: "!bg-transparent", arrow: "hidden"},
       faded: {base: "border", arrow: "border border-inherit"},
       flat: {base: ""},
-      shadow: {base: "border border-neutral-100", arrow: "border border-neutral-100"},
+      shadow: {base: ""},
     },
     color: {
       neutral: {base: colorVariants.solid.neutral},

packages/utilities/aria-utils/src/overlays/utils.ts

@@ -78,6 +78,18 @@ export const toReactAriaPlacement = (placement: OverlayPlacement) => {
   return mapPositions[placement];
 };
 
+export const toOverlayPlacement = (placement: PlacementAxis) => {
+  const mapPositions: Record<PlacementAxis, OverlayPlacement> = {
+    top: "top",
+    bottom: "bottom",
+    left: "left",
+    right: "right",
+    center: "top",
+  };
+
+  return mapPositions[placement];
+};
+
 export const getArrowPlacement = (dynamicPlacement: PlacementAxis, placement: OverlayPlacement) => {
   if (placement.includes("-")) {
     const [, position] = placement.split("-");

pnpm-lock.yaml

@@ -665,6 +665,9 @@ importers:
       '@nextui-org/code':
         specifier: workspace:*
         version: link:../code
+      '@nextui-org/image':
+        specifier: workspace:*
+        version: link:../image
       '@nextui-org/link':
         specifier: workspace:*
         version: link:../link