@authowl/react 0.18.3 → 0.18.5

package/dist/index.cjs

@@ -3211,7 +3211,7 @@ function MFAEnrollment({ onEnrolled, title }) {
 
 // src/components/mfa-enrollment-step.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
-function useConfirmedMfaPending() {
+function useConfirmedMfaPending(onUnknown = "pending") {
   const client = useAuthClient();
   const { needsMfaEnrollment } = useUser();
   const { refetch } = useSession();
@@ -3224,16 +3224,16 @@ function useConfirmedMfaPending() {
     let active = true;
     client.getSession({ query: { disableCookieCache: true } }).then((res) => {
       if (!active) return;
-      const pending = res.error ? true : res.data?.session?.pendingMfaEnrollment === true;
+      const pending = res.error ? onUnknown === "pending" : res.data?.session?.pendingMfaEnrollment === true;
       setConfirmed(pending);
       if (!pending && !res.error) refetch({ query: { disableCookieCache: true } });
     }).catch(() => {
-      if (active) setConfirmed(true);
+      if (active) setConfirmed(onUnknown === "pending");
     });
     return () => {
       active = false;
     };
-  }, [client, needsMfaEnrollment, refetch]);
+  }, [client, needsMfaEnrollment, refetch, onUnknown]);
   if (!needsMfaEnrollment) return "clear";
   return confirmed === true ? "pending" : "confirming";
 }
@@ -3645,7 +3645,7 @@ function SignIn({
   );
   const [inFlight, setInFlight] = React16.useState(null);
   const [challenge, setChallenge] = React16.useState(false);
-  const mfaEnrolment = useConfirmedMfaPending();
+  const mfaEnrolment = useConfirmedMfaPending("clear");
   const emailRef = React16.useRef(null);
   const plan = resolveSignInMethods(
     config,

package/dist/index.js

@@ -3130,7 +3130,7 @@ function MFAEnrollment({ onEnrolled, title }) {
 
 // src/components/mfa-enrollment-step.tsx
 import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
-function useConfirmedMfaPending() {
+function useConfirmedMfaPending(onUnknown = "pending") {
   const client = useAuthClient();
   const { needsMfaEnrollment } = useUser();
   const { refetch } = useSession();
@@ -3143,16 +3143,16 @@ function useConfirmedMfaPending() {
     let active = true;
     client.getSession({ query: { disableCookieCache: true } }).then((res) => {
       if (!active) return;
-      const pending = res.error ? true : res.data?.session?.pendingMfaEnrollment === true;
+      const pending = res.error ? onUnknown === "pending" : res.data?.session?.pendingMfaEnrollment === true;
       setConfirmed(pending);
       if (!pending && !res.error) refetch({ query: { disableCookieCache: true } });
     }).catch(() => {
-      if (active) setConfirmed(true);
+      if (active) setConfirmed(onUnknown === "pending");
     });
     return () => {
       active = false;
     };
-  }, [client, needsMfaEnrollment, refetch]);
+  }, [client, needsMfaEnrollment, refetch, onUnknown]);
   if (!needsMfaEnrollment) return "clear";
   return confirmed === true ? "pending" : "confirming";
 }
@@ -3567,7 +3567,7 @@ function SignIn({
   );
   const [inFlight, setInFlight] = React16.useState(null);
   const [challenge, setChallenge] = React16.useState(false);
-  const mfaEnrolment = useConfirmedMfaPending();
+  const mfaEnrolment = useConfirmedMfaPending("clear");
   const emailRef = React16.useRef(null);
   const plan = resolveSignInMethods(
     config,

package/dist/styles.css

@@ -200,7 +200,13 @@
 .ba-profile-heading, .ba-profile-modal-header { padding: 24px 28px; border-bottom: 1px solid var(--ba-divider); }
 .ba-profile-heading h1, .ba-profile-modal-header h1 { margin: 0; font-size: 22px; line-height: 1.25; }
 .ba-profile-heading p, .ba-profile-modal-header p { margin: 6px 0 0; color: var(--ba-muted); }
-.ba-profile-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 460px; }
+/* No min-height. A grid row already sizes to its tallest column, which here is
+   the nav, so the panel is exactly as tall as it needs to be. The 460px floor it
+   replaces was there to stop the modal resizing between tabs, but the shortest
+   tab - Profile, an avatar field and a button - is the one most people open
+   first, and it left roughly 200px of empty white below the content, reading as
+   a broken panel rather than a stable one. */
+.ba-profile-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
 .ba-profile-nav { display: flex; flex-direction: column; gap: 4px; padding: 18px 12px; border-inline-end: 1px solid var(--ba-divider); background: color-mix(in srgb, var(--ba-hover) 55%, var(--ba-surface)); }
 .ba-profile-nav-item { width: 100%; min-height: 40px; padding: 9px 12px; border: 0; border-radius: 7px; background: transparent; color: var(--ba-muted); cursor: pointer; font: inherit; font-weight: 500; text-align: start; }
 .ba-profile-nav-item:hover { color: var(--ba-fg); background: var(--ba-hover); }
@@ -312,7 +318,8 @@
 .ba-organization-profile-heading { display: flex; align-items: center; gap: 13px; padding: 22px 26px; border-bottom: 1px solid var(--ba-divider); }
 .ba-organization-profile-heading h2, .ba-organization-profile-heading p { margin: 0; }
 .ba-organization-profile-heading p { margin-top: 4px; }
-.ba-organization-profile-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); min-height: 480px; }
+/* Same reasoning as .ba-profile-layout: the nav column sets the height. */
+.ba-organization-profile-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: start; }
 .ba-organization-profile-nav { display: flex; flex-direction: column; gap: 4px; padding: 16px 10px; border-inline-end: 1px solid var(--ba-divider); background: color-mix(in srgb, var(--ba-hover) 55%, var(--ba-surface)); }
 .ba-organization-profile-content { min-width: 0; padding: 26px; }
 .ba-organization-section { max-width: 610px; }
@@ -331,7 +338,7 @@
   .ba-profile-overlay { align-items: end; padding: 0; }
   .ba-profile-modal { width: 100%; max-height: 94dvh; border-radius: 16px 16px 0 0; border-bottom: 0; }
   .ba-profile-heading, .ba-profile-modal-header { padding: 20px; }
-  .ba-profile-layout { display: block; min-height: 0; }
+  .ba-profile-layout { display: block; }
   .ba-profile-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px 14px; border-inline-end: 0; border-bottom: 1px solid var(--ba-divider); }
   .ba-profile-nav-item { width: 100%; min-width: 0; }
   .ba-profile-content { padding: 22px 20px 28px; }
@@ -344,7 +351,7 @@
   .ba-organization-directory { border-radius: 0; }
   .ba-organization-directory-header { flex-direction: column; }
   .ba-organization-card-grid { grid-template-columns: 1fr; }
-  .ba-organization-profile-layout { display: block; min-height: 0; }
+  .ba-organization-profile-layout { display: block; }
   .ba-organization-profile-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px 14px; border-inline-end: 0; border-bottom: 1px solid var(--ba-divider); }
   .ba-organization-profile-content { padding: 20px; }
   .ba-organization-member { align-items: flex-start; flex-wrap: wrap; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authowl/react",
-  "version": "0.18.3",
+  "version": "0.18.5",
   "description": "React provider, hooks, and drop-in components for AuthOwl, the multi-tenant auth SaaS.",
   "license": "MIT",
   "publishConfig": {
@@ -47,7 +47,7 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@authowl/core": "0.15.1"
+    "@authowl/core": "0.15.2"
   },
   "peerDependencies": {
     "react": ">=18",