@thetechfossil/auth2 1.2.16 → 1.2.17

package/dist/index.components.js

@@ -4137,6 +4137,68 @@ var ChangePassword = ({ onSuccess, appearance }) => {
     )
   ] }) });
 };
+
+// src/react/components/utils/injectModalStyles.ts
+var injectModalStyles = () => {
+  if (document.getElementById("ttf-auth-modal-styles")) {
+    return;
+  }
+  const styleElement = document.createElement("style");
+  styleElement.id = "ttf-auth-modal-styles";
+  styleElement.textContent = `
+    /* ImageManager Modal Styles - Critical for proper modal display */
+    /* Radix UI Dialog styles - Force visibility */
+    [data-radix-portal] {
+      z-index: 99999 !important;
+      position: fixed !important;
+      inset: 0 !important;
+      pointer-events: none !important;
+    }
+
+    [data-radix-portal] > * {
+      pointer-events: auto !important;
+    }
+
+    /* Dialog Overlay */
+    [data-state="open"][data-radix-dialog-overlay],
+    [role="dialog"] + [data-radix-dialog-overlay] {
+      position: fixed !important;
+      inset: 0 !important;
+      z-index: 99998 !important;
+      background-color: rgba(0, 0, 0, 0.6) !important;
+      pointer-events: auto !important;
+    }
+
+    /* Dialog Content - Center the modal properly */
+    [data-state="open"][data-radix-dialog-content],
+    [role="dialog"][data-radix-dialog-content] {
+      position: fixed !important;
+      left: 50% !important;
+      top: 50% !important;
+      transform: translate(-50%, -50%) !important;
+      z-index: 99999 !important;
+      background: white !important;
+      border-radius: 16px !important;
+      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
+      pointer-events: auto !important;
+      width: 95vw !important;
+      max-width: 1280px !important;
+      height: 90vh !important;
+      max-height: 90vh !important;
+      min-width: 800px !important;
+      min-height: 600px !important;
+      overflow: hidden !important;
+    }
+
+    /* Dark mode support */
+    .dark [data-state="open"][data-radix-dialog-content],
+    .dark [role="dialog"][data-radix-dialog-content] {
+      background: #0f172a !important;
+      border: 1px solid #334155 !important;
+    }
+  `;
+  document.head.appendChild(styleElement);
+};
 var AvatarUploader = ({
   onUploadComplete,
   onError,
@@ -4147,13 +4209,21 @@ var AvatarUploader = ({
   upfilesConfig,
   buttonText = "Upload Avatar"
 }) => {
-  const { uploadAndUpdateAvatar } = useAuth2();
+  const { user, updateProfile } = useAuth2();
   const [open, setOpen] = React.useState(false);
   const [uploading, setUploading] = React.useState(false);
+  React.useEffect(() => {
+    injectModalStyles();
+  }, []);
+  const effectiveFolderPath = React.useMemo(() => {
+    if (user?.id) {
+      return `users/${user.id}/`;
+    }
+    return upfilesConfig.folderPath || "/";
+  }, [user?.id, upfilesConfig.folderPath]);
   const handleSelect = async (image) => {
     setUploading(true);
     try {
-      const { updateProfile } = useAuth2();
       const response = await updateProfile({ avatar: image.url });
       if (response.success && response.user?.avatar) {
         onUploadComplete?.(response.user.avatar);
@@ -4192,7 +4262,7 @@ var AvatarUploader = ({
           presignPath: upfilesConfig.presignPath
         },
         projectId: upfilesConfig.projectId,
-        folderPath: upfilesConfig.folderPath || "avatars/",
+        folderPath: effectiveFolderPath,
         title: "Select Avatar",
         description: "Upload a new avatar or select from existing images.",
         mode: "full",
@@ -4519,8 +4589,17 @@ var AvatarManager = ({
   onDelete,
   upfilesConfig
 }) => {
-  const { updateProfile } = useAuth2();
+  const { user, updateProfile } = useAuth2();
   const [updating, setUpdating] = React.useState(false);
+  React.useEffect(() => {
+    injectModalStyles();
+  }, []);
+  const effectiveFolderPath = React.useMemo(() => {
+    if (user?.id) {
+      return `users/${user.id}/`;
+    }
+    return upfilesConfig.folderPath || "/";
+  }, [user?.id, upfilesConfig.folderPath]);
   const handleSelect = async (image) => {
     setUpdating(true);
     try {
@@ -4553,7 +4632,7 @@ var AvatarManager = ({
         withCredentials: upfilesConfig.withCredentials
       },
       projectId,
-      folderPath: upfilesConfig.folderPath || "/",
+      folderPath: effectiveFolderPath,
       title,
       description,
       className,