@wealthx/shadcn 1.5.32 → 1.5.33

package/src/components/ui/popover.tsx

@@ -4,6 +4,35 @@ import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
 import { cn } from "@/lib/utils";
 import { useThemeVars } from "@/lib/theme-provider";
 
+/**
+ * Provides a DOM container for Popover portals rendered inside a Drawer/Dialog.
+ * Without this, Base UI's FloatingPortal renders to document.body, which sits
+ * outside Radix's DismissableLayer — causing outside-click detection to fire
+ * and close the Drawer when the user clicks inside the popover.
+ *
+ * Usage: wrap DrawerContent body with <PopoverPortalProvider container={ref}>
+ * and place a <div ref={...} /> inside DrawerContent as the portal target.
+ */
+const PopoverPortalContext = React.createContext<
+  HTMLElement | null | undefined
+>(undefined);
+
+export type PopoverPortalProviderProps = {
+  container: HTMLElement | null | undefined;
+  children: React.ReactNode;
+};
+
+function PopoverPortalProvider({
+  container,
+  children,
+}: PopoverPortalProviderProps): ReactElement {
+  return (
+    <PopoverPortalContext.Provider value={container}>
+      {children}
+    </PopoverPortalContext.Provider>
+  );
+}
+
 export type PopoverProps = React.ComponentProps<typeof PopoverPrimitive.Root>;
 
 function Popover({ ...props }: PopoverProps): ReactElement {
@@ -33,8 +62,9 @@ function PopoverContent({
   ...props
 }: PopoverContentProps): ReactElement {
   const themeVars = useThemeVars();
+  const portalContainer = React.useContext(PopoverPortalContext);
   return (
-    <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Portal container={portalContainer ?? undefined}>
       <PopoverPrimitive.Positioner
         className="z-[200]"
         align={align}
@@ -43,7 +73,7 @@ function PopoverContent({
         <PopoverPrimitive.Popup
           className={cn(
             "z-50 w-72 border border-border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95 data-ending-style:fill-mode-forwards data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
-            className,
+            className
           )}
           data-slot="popover-content"
           style={{ ...themeVars, ...style } as React.CSSProperties}
@@ -114,4 +144,5 @@ export {
   PopoverHeader,
   PopoverTitle,
   PopoverDescription,
+  PopoverPortalProvider,
 };