@wealthx/shadcn 1.5.19 → 1.5.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wealthx/shadcn",
-  "version": "1.5.19",
+  "version": "1.5.20",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./src/index.ts",

package/src/components/index.tsx

@@ -995,6 +995,7 @@ export {
   SelectGroup,
   SelectItem,
   SelectLabel,
+  SelectPortalProvider,
   SelectScrollDownButton,
   SelectScrollUpButton,
   SelectSeparator,
@@ -1007,6 +1008,7 @@ export type {
   SelectGroupProps,
   SelectItemProps,
   SelectLabelProps,
+  SelectPortalProviderProps,
   SelectScrollDownButtonProps,
   SelectScrollUpButtonProps,
   SelectSeparatorProps,

package/src/components/ui/dialog.tsx

@@ -59,7 +59,7 @@ function DialogOverlay({
     <DialogPrimitive.Backdrop
       className={cn(
         // WealthX: foreground/50 scrim (matches Figma — foreground token at 50% opacity)
-        "fixed inset-0 z-50 bg-foreground/50 data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:fill-mode-forwards data-open:animate-in data-open:fade-in-0",
+        "fixed inset-0 z-50 bg-foreground/50 pointer-events-auto data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:fill-mode-forwards data-open:animate-in data-open:fade-in-0",
         className,
       )}
       data-slot="dialog-overlay"
@@ -146,7 +146,9 @@ function DialogContent({
           // max-w-[calc(100%-2rem)] acts as a viewport-edge guard on all sizes.
           // Fixed max-width is applied via inline style (sizeStyle) to avoid
           // Tailwind v4 class-scanning gaps with dynamic class lookups.
-          "fixed left-[50%] z-50 grid max-w-[calc(100%-2rem)] translate-x-[-50%] gap-4 border bg-background p-6 duration-200 outline-none 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",
+          // pointer-events-auto: Vaul Drawer (Radix DismissableLayer) sets body{pointer-events:none}
+          // when open — dialog portals to body and must override that on its own element.
+          "fixed left-[50%] z-50 grid max-w-[calc(100%-2rem)] translate-x-[-50%] gap-4 border bg-background p-6 duration-200 outline-none pointer-events-auto 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",
           // "auto" → hug content (with min-width floor); fixed sizes → fill to max-width
           isAuto ? "w-auto" : "w-full",
           align === "center"

package/src/components/ui/select.tsx

@@ -5,6 +5,37 @@ import { Select as SelectPrimitive } from "@base-ui/react/select";
 import { cn } from "@/lib/utils";
 import { useThemeVars } from "@/lib/theme-provider";
 
+/**
+ * Provides a DOM container for Select portals so they render inside the
+ * DrawerContent element (which has pointer-events:auto from Radix
+ * DismissableLayer) rather than at document.body (which Radix sets to
+ * pointer-events:none when a modal dialog is open).
+ *
+ * Usage inside a Vaul Drawer:
+ *   const [portalEl, setPortalEl] = useState<HTMLElement | undefined>();
+ *   <SelectPortalProvider container={portalEl}>…</SelectPortalProvider>
+ *   <div ref={el => el && setPortalEl(el)} />   ← place inside DrawerContent
+ */
+const SelectPortalContext = React.createContext<HTMLElement | undefined>(
+  undefined,
+);
+
+export type SelectPortalProviderProps = {
+  container: HTMLElement | undefined;
+  children: React.ReactNode;
+};
+
+function SelectPortalProvider({
+  container,
+  children,
+}: SelectPortalProviderProps): ReactElement {
+  return (
+    <SelectPortalContext.Provider value={container}>
+      {children}
+    </SelectPortalContext.Provider>
+  );
+}
+
 export type SelectProps = React.ComponentProps<typeof SelectPrimitive.Root>;
 
 function Select({ ...props }: SelectProps): ReactElement {
@@ -68,8 +99,9 @@ function SelectContent({
   ...props
 }: SelectContentProps): ReactElement {
   const themeVars = useThemeVars();
+  const portalContainer = React.useContext(SelectPortalContext);
   return (
-    <SelectPrimitive.Portal>
+    <SelectPrimitive.Portal container={portalContainer}>
       <SelectPrimitive.Positioner
         className="z-[200]"
         align="start"
@@ -206,6 +238,7 @@ export {
   SelectGroup,
   SelectItem,
   SelectLabel,
+  SelectPortalProvider,
   SelectScrollDownButton,
   SelectScrollUpButton,
   SelectSeparator,