@payloadcms/ui 3.0.0-canary.a5aaf21 → 3.0.0-canary.a6e7305

package/dist/icons/Calendar/index.scss

@@ -1,11 +1,13 @@
 @import '../../scss/styles';
 
-.icon--calendar {
-  height: $baseline;
-  width: $baseline;
+@layer payload-default {
+  .icon--calendar {
+    height: $baseline;
+    width: $baseline;
 
-  .stroke {
-    stroke: currentColor;
-    stroke-width: $style-stroke-width-s;
+    .stroke {
+      stroke: currentColor;
+      stroke-width: $style-stroke-width-s;
+    }
   }
 }

package/dist/icons/Check/index.scss

@@ -1,12 +1,14 @@
 @import '../../scss/styles';
 
-.icon--check {
-  height: $baseline;
-  width: $baseline;
+@layer payload-default {
+  .icon--check {
+    height: $baseline;
+    width: $baseline;
 
-  .stroke {
-    fill: none;
-    stroke: currentColor;
-    stroke-width: $style-stroke-width-m;
+    .stroke {
+      fill: none;
+      stroke: currentColor;
+      stroke-width: $style-stroke-width-m;
+    }
   }
 }

package/dist/icons/Chevron/index.scss

@@ -1,23 +1,25 @@
 @import '../../scss/styles';
 
-.icon--chevron {
-  height: calc(var(--base) / 2);
-  width: calc(var(--base) / 2);
+@layer payload-default {
+  .icon--chevron {
+    height: calc(var(--base) / 2);
+    width: calc(var(--base) / 2);
 
-  .stroke {
-    fill: none;
-    stroke: currentColor;
-    stroke-width: $style-stroke-width-s;
-    vector-effect: non-scaling-stroke;
-  }
+    .stroke {
+      fill: none;
+      stroke: currentColor;
+      stroke-width: $style-stroke-width-s;
+      vector-effect: non-scaling-stroke;
+    }
 
-  &.icon--size-large {
-    height: var(--base);
-    width: var(--base);
-  }
+    &.icon--size-large {
+      height: var(--base);
+      width: var(--base);
+    }
 
-  &.icon--size-small {
-    height: 8px;
-    width: 8px;
+    &.icon--size-small {
+      height: 8px;
+      width: 8px;
+    }
   }
 }

package/dist/icons/CloseMenu/index.scss

@@ -1,10 +1,12 @@
 @import '../../scss/styles.scss';
 
-.icon--close-menu {
-  height: $baseline;
-  width: $baseline;
+@layer payload-default {
+  .icon--close-menu {
+    height: $baseline;
+    width: $baseline;
 
-  .stroke {
-    stroke: currentColor;
+    .stroke {
+      stroke: currentColor;
+    }
   }
 }

package/dist/icons/Copy/index.scss

@@ -1,12 +1,14 @@
 @import '../../scss/styles';
 
-.icon--copy {
-  height: $baseline;
-  width: $baseline;
+@layer payload-default {
+  .icon--copy {
+    height: $baseline;
+    width: $baseline;
 
-  .stroke {
-    fill: none;
-    stroke: currentColor;
-    stroke-width: $style-stroke-width-s;
+    .stroke {
+      fill: none;
+      stroke: currentColor;
+      stroke-width: $style-stroke-width-s;
+    }
   }
 }

package/dist/icons/DragHandle/index.scss

@@ -1,12 +1,14 @@
 @import '../../scss/styles';
 
-.icon--drag-handle {
-  height: $baseline;
-  width: $baseline;
+@layer payload-default {
+  .icon--drag-handle {
+    height: $baseline;
+    width: $baseline;
 
-  .fill {
-    stroke: currentColor;
-    stroke-width: $style-stroke-width-s;
-    fill: var(--theme-elevation-800);
+    .fill {
+      stroke: currentColor;
+      stroke-width: $style-stroke-width-s;
+      fill: var(--theme-elevation-800);
+    }
   }
 }

package/dist/icons/Edit/index.scss

@@ -1,12 +1,14 @@
 @import '../../scss/styles';
 
-.icon--edit {
-  height: $baseline;
-  width: $baseline;
-  shape-rendering: auto;
+@layer payload-default {
+  .icon--edit {
+    height: $baseline;
+    width: $baseline;
+    shape-rendering: auto;
 
-  .stroke {
-    fill: none;
-    stroke: currentColor;
+    .stroke {
+      fill: none;
+      stroke: currentColor;
+    }
   }
 }

package/dist/icons/Line/index.scss

@@ -1,11 +1,13 @@
 @import '../../scss/styles';
 
-.icon--line {
-  width: $baseline;
-  height: $baseline;
+@layer payload-default {
+  .icon--line {
+    width: $baseline;
+    height: $baseline;
 
-  .stroke {
-    stroke: currentColor;
-    stroke-width: $style-stroke-width;
+    .stroke {
+      stroke: currentColor;
+      stroke-width: $style-stroke-width;
+    }
   }
 }

package/dist/icons/Link/index.scss

@@ -1,11 +1,13 @@
 @import '../../scss/styles';
 
-.icon--link {
-  width: $baseline;
-  height: $baseline;
+@layer payload-default {
+  .icon--link {
+    width: $baseline;
+    height: $baseline;
 
-  .stroke {
-    stroke: currentColor;
-    stroke-width: $style-stroke-width;
+    .stroke {
+      stroke: currentColor;
+      stroke-width: $style-stroke-width;
+    }
   }
 }

package/dist/icons/Lock/index.scss

@@ -1,8 +1,10 @@
 @import '../../scss/styles';
 
-.icon--lock {
-  .stroke {
-    stroke: currentColor;
-    stroke-width: $style-stroke-width;
+@layer payload-default {
+  .icon--lock {
+    .stroke {
+      stroke: currentColor;
+      stroke-width: $style-stroke-width;
+    }
   }
 }

package/dist/icons/LogOut/index.scss

@@ -1,11 +1,13 @@
 @import '../../scss/styles.scss';
 
-.icon--logout {
-  height: $baseline;
-  width: $baseline;
+@layer payload-default {
+  .icon--logout {
+    height: $baseline;
+    width: $baseline;
 
-  .stroke {
-    stroke: currentColor;
-    stroke-width: 2px;
+    .stroke {
+      stroke: currentColor;
+      stroke-width: 2px;
+    }
   }
 }

package/dist/icons/Menu/index.scss

@@ -1,8 +1,10 @@
 @import '../../scss/styles.scss';
 
-.icon--menu {
-  .stroke {
-    stroke-width: $style-stroke-width-s;
-    stroke: currentColor;
+@layer payload-default {
+  .icon--menu {
+    .stroke {
+      stroke-width: $style-stroke-width-s;
+      stroke: currentColor;
+    }
   }
 }

package/dist/icons/More/index.scss

@@ -1,11 +1,13 @@
 @import '../../scss/styles';
 
-.icon--more {
-  height: $baseline;
-  width: $baseline;
+@layer payload-default {
+  .icon--more {
+    height: $baseline;
+    width: $baseline;
 
-  .fill {
-    fill: var(--theme-elevation-800);
-    stroke: currentColor;
+    .fill {
+      fill: var(--theme-elevation-800);
+      stroke: currentColor;
+    }
   }
 }

package/dist/icons/Plus/index.scss

@@ -1,8 +1,10 @@
 @import '../../scss/styles';
 
-.icon--plus {
-  .stroke {
-    stroke: currentColor;
-    stroke-width: $style-stroke-width;
+@layer payload-default {
+  .icon--plus {
+    .stroke {
+      stroke: currentColor;
+      stroke-width: $style-stroke-width;
+    }
   }
 }

package/dist/icons/Search/index.scss

@@ -1,11 +1,13 @@
 @import '../../scss/styles';
 
-.icon--search {
-  height: $baseline;
-  width: $baseline;
+@layer payload-default {
+  .icon--search {
+    height: $baseline;
+    width: $baseline;
 
-  .stroke {
-    stroke: currentColor;
-    stroke-width: $style-stroke-width-s;
+    .stroke {
+      stroke: currentColor;
+      stroke-width: $style-stroke-width-s;
+    }
   }
 }

package/dist/icons/Swap/index.scss

@@ -1,12 +1,14 @@
 @import '../../scss/styles';
 
-.icon--swap {
-  height: $baseline;
-  width: $baseline;
+@layer payload-default {
+  .icon--swap {
+    height: $baseline;
+    width: $baseline;
 
-  .stroke {
-    fill: none;
-    stroke: currentColor;
-    stroke-width: $style-stroke-width-s;
+    .stroke {
+      fill: none;
+      stroke: currentColor;
+      stroke-width: $style-stroke-width-s;
+    }
   }
 }

package/dist/icons/X/index.scss

@@ -1,8 +1,10 @@
 @import '../../scss/styles';
 
-.icon--x {
-  .stroke {
-    stroke: currentColor;
-    stroke-width: $style-stroke-width-s;
+@layer payload-default {
+  .icon--x {
+    .stroke {
+      stroke: currentColor;
+      stroke-width: $style-stroke-width-s;
+    }
   }
 }

package/dist/providers/Auth/index.d.ts

@@ -1,14 +1,19 @@
-import type { ClientUser, Permissions } from 'payload';
+import type { ClientUser, Permissions, User } from 'payload';
 import React from 'react';
+export type UserWithToken<T = ClientUser> = {
+    exp: number;
+    token: string;
+    user: T;
+};
 export type AuthContext<T = ClientUser> = {
-    fetchFullUser: () => Promise<void>;
-    logOut: () => Promise<void>;
+    fetchFullUser: () => Promise<null | User>;
+    logOut: () => Promise<boolean>;
     permissions?: Permissions;
     refreshCookie: (forceRefresh?: boolean) => void;
     refreshCookieAsync: () => Promise<ClientUser>;
     refreshPermissions: () => Promise<void>;
     setPermissions: (permissions: Permissions) => void;
-    setUser: (user: T) => void;
+    setUser: (user: null | UserWithToken<T>) => void;
     strategy?: string;
     token?: string;
     tokenExpiration?: number;

package/dist/providers/Auth/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/Auth/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAqB,WAAW,EAAE,MAAM,SAAS,CAAA;AAKzE,OAAO,KAAsE,MAAM,OAAO,CAAA;AAU1F,MAAM,MAAM,WAAW,CAAC,CAAC,GAAG,UAAU,IAAI;IACxC,aAAa,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IAClC,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IAC3B,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,aAAa,EAAE,CAAC,YAAY,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAC/C,kBAAkB,EAAE,MAAM,OAAO,CAAC,UAAU,CAAC,CAAA;IAC7C,kBAAkB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IACvC,cAAc,EAAE,CAAC,WAAW,EAAE,WAAW,KAAK,IAAI,CAAA;IAClD,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAA;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,IAAI,CAAC,EAAE,IAAI,GAAG,CAAC,CAAA;CAChB,CAAA;AAMD,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,IAAI,CAAC,EAAE,UAAU,GAAG,IAAI,CAAA;CACzB,CAAA;AACD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,WAAW,EAAE,kBAAkB,EAC/B,IAAI,EAAE,WAAW,GAClB,EAAE,KAAK,qBAoSP;AAED,eAAO,MAAM,OAAO,GAAI,CAAC,oBAAmB,WAAW,CAAC,CAAC,CAA0C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/Auth/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAK5D,OAAO,KAAsE,MAAM,OAAO,CAAA;AAU1F,MAAM,MAAM,aAAa,CAAC,CAAC,GAAG,UAAU,IAAI;IAC1C,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,CAAC,CAAA;CACR,CAAA;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,GAAG,UAAU,IAAI;IACxC,aAAa,EAAE,MAAM,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,CAAA;IACzC,MAAM,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,CAAA;IAC9B,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,aAAa,EAAE,CAAC,YAAY,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAC/C,kBAAkB,EAAE,MAAM,OAAO,CAAC,UAAU,CAAC,CAAA;IAC7C,kBAAkB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IACvC,cAAc,EAAE,CAAC,WAAW,EAAE,WAAW,KAAK,IAAI,CAAA;IAClD,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC,KAAK,IAAI,CAAA;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,IAAI,CAAC,EAAE,IAAI,GAAG,CAAC,CAAA;CAChB,CAAA;AAMD,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,IAAI,CAAC,EAAE,UAAU,GAAG,IAAI,CAAA;CACzB,CAAA;AACD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,WAAW,EAAE,kBAAkB,EAC/B,IAAI,EAAE,WAAW,GAClB,EAAE,KAAK,qBAuRP;AAED,eAAO,MAAM,OAAO,GAAI,CAAC,oBAAmB,WAAW,CAAC,CAAC,CAA0C,CAAA"}

package/dist/providers/Auth/index.js

@@ -19,7 +19,7 @@ export function AuthProvider({
   permissions: initialPermissions,
   user: initialUser
 }) {
-  const [user, setUser] = useState(initialUser);
+  const [user, setUserInMemory] = useState(initialUser);
   const [tokenInMemory, setTokenInMemory] = useState();
   const [tokenExpiration, setTokenExpiration] = useState();
   const pathname = usePathname();
@@ -50,6 +50,7 @@ export function AuthProvider({
   } = useModal();
   const [lastLocationChange, setLastLocationChange] = useState(0);
   const debouncedLocationChange = useDebounce(lastLocationChange, 10000);
+  const refreshTokenTimeoutRef = React.useRef(null);
   const id = user?.id;
   const redirectToInactivityRoute = useCallback(() => {
     if (window.location.pathname.startsWith(adminRoute)) {
@@ -69,13 +70,15 @@ export function AuthProvider({
   const revokeTokenAndExpire = useCallback(() => {
     setTokenInMemory(undefined);
     setTokenExpiration(undefined);
+    clearTimeout(refreshTokenTimeoutRef.current);
   }, []);
-  const setTokenAndExpiration = useCallback(json => {
-    const token = json?.token || json?.refreshedToken;
-    if (token && json?.exp) {
-      setTokenInMemory(token);
-      setTokenExpiration(json.exp);
+  const setNewUser = useCallback(userResponse => {
+    if (userResponse?.user) {
+      setUserInMemory(userResponse.user);
+      setTokenInMemory(userResponse.token);
+      setTokenExpiration(userResponse.exp);
     } else {
+      setUserInMemory(null);
       revokeTokenAndExpire();
     }
   }, [revokeTokenAndExpire]);
@@ -83,20 +86,19 @@ export function AuthProvider({
     const now = Math.round(new Date().getTime() / 1000);
     const remainingTime = (typeof tokenExpiration === 'number' ? tokenExpiration : 0) - now;
     if (forceRefresh || tokenExpiration && remainingTime < 120) {
-      setTimeout(() => {
+      refreshTokenTimeoutRef.current = setTimeout(() => {
         async function refresh() {
           try {
-            const request = await requests.post(`${serverURL}${apiRoute}/${userSlug}/refresh-token`, {
+            const request = await requests.post(`${serverURL}${apiRoute}/${userSlug}/refresh-token?refresh`, {
               headers: {
                 'Accept-Language': i18n.language
               }
             });
             if (request.status === 200) {
-              const json_0 = await request.json();
-              setUser(json_0.user);
-              setTokenAndExpiration(json_0);
+              const json = await request.json();
+              setNewUser(json);
             } else {
-              setUser(null);
+              setNewUser(null);
               redirectToInactivityRoute();
             }
           } catch (e) {
@@ -106,7 +108,10 @@ export function AuthProvider({
         void refresh();
       }, 1000);
     }
-  }, [tokenExpiration, serverURL, apiRoute, userSlug, i18n, redirectToInactivityRoute, setTokenAndExpiration]);
+    return () => {
+      clearTimeout(refreshTokenTimeoutRef.current);
+    };
+  }, [apiRoute, i18n.language, redirectToInactivityRoute, serverURL, setNewUser, tokenExpiration, userSlug]);
   const refreshCookieAsync = useCallback(async skipSetUser => {
     try {
       const request_0 = await requests.post(`${serverURL}${apiRoute}/${userSlug}/refresh-token`, {
@@ -115,30 +120,31 @@ export function AuthProvider({
         }
       });
       if (request_0.status === 200) {
-        const json_1 = await request_0.json();
+        const json_0 = await request_0.json();
         if (!skipSetUser) {
-          setUser(json_1.user);
-          setTokenAndExpiration(json_1);
+          setNewUser(json_0);
         }
-        return json_1.user;
+        return json_0.user;
       }
-      setUser(null);
+      setNewUser(null);
       redirectToInactivityRoute();
       return null;
     } catch (e_0) {
       toast.error(`Refreshing token failed: ${e_0.message}`);
       return null;
     }
-  }, [serverURL, apiRoute, userSlug, i18n, redirectToInactivityRoute, setTokenAndExpiration]);
+  }, [apiRoute, i18n.language, redirectToInactivityRoute, serverURL, setNewUser, userSlug]);
   const logOut = useCallback(async () => {
-    setUser(null);
-    revokeTokenAndExpire();
     try {
       await requests.post(`${serverURL}${apiRoute}/${userSlug}/logout`);
+      setNewUser(null);
+      revokeTokenAndExpire();
+      return true;
     } catch (e_1) {
       toast.error(`Logging out failed: ${e_1.message}`);
+      return false;
     }
-  }, [serverURL, apiRoute, userSlug, revokeTokenAndExpire]);
+  }, [apiRoute, revokeTokenAndExpire, serverURL, setNewUser, userSlug]);
   const refreshPermissions = useCallback(async ({
     locale
   } = {}) => {
@@ -154,8 +160,8 @@ export function AuthProvider({
         }
       });
       if (request_1.status === 200) {
-        const json_2 = await request_1.json();
-        setPermissions(json_2);
+        const json_1 = await request_1.json();
+        setPermissions(json_1);
       } else {
         throw new Error(`Fetching permissions failed with status code ${request_1.status}`);
       }
@@ -166,26 +172,22 @@ export function AuthProvider({
   const fetchFullUser = React.useCallback(async () => {
     try {
       const request_2 = await requests.get(`${serverURL}${apiRoute}/${userSlug}/me`, {
+        credentials: 'include',
         headers: {
           'Accept-Language': i18n.language
         }
       });
       if (request_2.status === 200) {
-        const json_3 = await request_2.json();
-        if (json_3?.user) {
-          setUser(json_3.user);
-          if (json_3?.token) {
-            setTokenAndExpiration(json_3);
-          }
-        } else {
-          setUser(null);
-          revokeTokenAndExpire();
-        }
+        const json_2 = await request_2.json();
+        const user_0 = null;
+        setNewUser(json_2);
+        return user_0;
       }
     } catch (e_3) {
       toast.error(`Fetching user failed: ${e_3.message}`);
     }
-  }, [serverURL, apiRoute, userSlug, i18n.language, setTokenAndExpiration, revokeTokenAndExpire]);
+    return null;
+  }, [serverURL, apiRoute, userSlug, i18n.language, setNewUser]);
   // On mount, get user and set
   useEffect(() => {
     void fetchFullUser();
@@ -196,45 +198,38 @@ export function AuthProvider({
       refreshCookie();
     }
   }, [debouncedLocationChange, refreshCookie, id]);
-  // When initialUser changes, reset in state
-  useEffect(() => {
-    setUser(initialUser);
-  }, [initialUser]);
   useEffect(() => {
     setLastLocationChange(Date.now());
   }, [pathname]);
   useEffect(() => {
     let reminder;
+    let forceLogOut;
     const now_0 = Math.round(new Date().getTime() / 1000);
     const remainingTime_0 = typeof tokenExpiration === 'number' ? tokenExpiration - now_0 : 0;
+    const remindInTimeFromNow = Math.max(Math.min((remainingTime_0 - 60) * 1000, maxTimeoutTime), 0);
+    const forceLogOutInTimeFromNow = Math.max(Math.min(remainingTime_0 * 1000, maxTimeoutTime), 0);
+    if (!user) {
+      clearTimeout(reminder);
+      clearTimeout(forceLogOut);
+      return;
+    }
     if (remainingTime_0 > 0) {
       reminder = setTimeout(() => {
         openModal(stayLoggedInModalSlug);
-      }, Math.max(Math.min((remainingTime_0 - 60) * 1000, maxTimeoutTime)));
+      }, remindInTimeFromNow);
+      forceLogOut = setTimeout(() => {
+        setNewUser(null);
+      }, forceLogOutInTimeFromNow);
     }
     return () => {
       if (reminder) {
         clearTimeout(reminder);
       }
-    };
-  }, [tokenExpiration, openModal]);
-  useEffect(() => {
-    let forceLogOut;
-    const now_1 = Math.round(new Date().getTime() / 1000);
-    const remainingTime_1 = typeof tokenExpiration === 'number' ? tokenExpiration - now_1 : 0;
-    if (remainingTime_1 > 0) {
-      forceLogOut = setTimeout(() => {
-        setUser(null);
-        revokeTokenAndExpire();
-        redirectToInactivityRoute();
-      }, Math.max(Math.min(remainingTime_1 * 1000, maxTimeoutTime), 0));
-    }
-    return () => {
       if (forceLogOut) {
         clearTimeout(forceLogOut);
       }
     };
-  }, [tokenExpiration, closeAllModals, i18n, redirectToInactivityRoute, revokeTokenAndExpire]);
+  }, [tokenExpiration, openModal, i18n, setNewUser, user]);
   return /*#__PURE__*/_jsx(Context.Provider, {
     value: {
       fetchFullUser,
@@ -244,7 +239,7 @@ export function AuthProvider({
       refreshCookieAsync,
       refreshPermissions,
       setPermissions,
-      setUser,
+      setUser: setNewUser,
       token: tokenInMemory,
       user
     },