@payloadcms/ui 4.0.0-internal.c3ac604 → 4.0.0-internal.cc18726

package/dist/providers/Locale/index.js

@@ -1,6 +1,5 @@
 'use client';
 
-import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { formatAdminURL } from 'payload/shared';
 import React, { createContext, use, useEffect, useRef, useState } from 'react';
@@ -8,7 +7,8 @@ import { findLocaleFromCode } from '../../utilities/findLocaleFromCode.js';
 import { useAuth } from '../Auth/index.js';
 import { useConfig } from '../Config/index.js';
 import { useSearchParams } from '../RouterAdapter/index.js';
-const LocaleContext = /*#__PURE__*/createContext({});
+import { useRouteTransition } from '../RouteTransition/index.js';
+const LocaleContext = /*#__PURE__*/createContext(null);
 export const LocaleLoadingContext = /*#__PURE__*/createContext({
   localeIsLoading: false,
   setLocaleIsLoading: _ => undefined
@@ -20,151 +20,78 @@ const fetchPreferences = async (key, baseURL) => await fetch(`${baseURL}/payload
   },
   method: 'GET'
 })?.then(res => res.json());
-export const LocaleProvider = t0 => {
-  const $ = _c(28);
+export const LocaleProvider = ({
+  children,
+  /**
+  The `locale` prop originates from the root layout, which does not have access to search params
+  This component uses the `useSearchParams` hook to get the locale from the URL as precedence over this prop
+  This prop does not update as the user navigates the site, because the root layout does not re-render
+  */
+  locale: initialLocaleFromPrefs
+}) => {
   const {
-    children,
-    locale: initialLocaleFromPrefs
-  } = t0;
-  const {
-    config: t1
+    config: {
+      localization = false,
+      routes: {
+        api: apiRoute
+      }
+    }
   } = useConfig();
-  const {
-    localization: t2,
-    routes: t3
-  } = t1;
-  const localization = t2 === undefined ? false : t2;
-  const {
-    api: apiRoute
-  } = t3;
   const {
     user
   } = useAuth();
-  const defaultLocale = localization ? localization.defaultLocale : "en";
-  const t4 = useSearchParams();
-  let t5;
-  if ($[0] !== t4) {
-    t5 = t4.get("locale");
-    $[0] = t4;
-    $[1] = t5;
-  } else {
-    t5 = $[1];
-  }
-  const localeFromParams = t5;
-  let t6;
-  if ($[2] !== defaultLocale || $[3] !== initialLocaleFromPrefs || $[4] !== localeFromParams || $[5] !== localization) {
-    t6 = () => {
-      if (!localization || localization && !localization.locales.length) {
-        return {};
-      }
-      return findLocaleFromCode(localization, localeFromParams) || findLocaleFromCode(localization, initialLocaleFromPrefs) || findLocaleFromCode(localization, defaultLocale) || findLocaleFromCode(localization, localization.locales[0].code);
-    };
-    $[2] = defaultLocale;
-    $[3] = initialLocaleFromPrefs;
-    $[4] = localeFromParams;
-    $[5] = localization;
-    $[6] = t6;
-  } else {
-    t6 = $[6];
-  }
-  const [locale, setLocale] = React.useState(t6);
+  const {
+    isTransitioning
+  } = useRouteTransition();
+  const defaultLocale = localization ? localization.defaultLocale : 'en';
+  const localeFromParams = useSearchParams().get('locale');
+  const [locale, setLocale] = React.useState(() => {
+    if (!localization || localization && !localization.locales.length) {
+      return null;
+    }
+    return findLocaleFromCode(localization, localeFromParams) || findLocaleFromCode(localization, initialLocaleFromPrefs) || findLocaleFromCode(localization, defaultLocale) || findLocaleFromCode(localization, localization.locales[0].code);
+  });
   const [isLoading, setLocaleIsLoading] = useState(false);
   const prevLocale = useRef(locale);
-  let t7;
-  let t8;
-  if ($[7] !== locale) {
-    t7 = () => {
-      if (locale.code !== prevLocale.current.code) {
-        setLocaleIsLoading(false);
-      }
+  useEffect(() => {
+    // Keep fields disabled until the new locale's document state finishes loading.
+    if (locale?.code !== prevLocale.current?.code && !isTransitioning) {
+      setLocaleIsLoading(false);
       prevLocale.current = locale;
-    };
-    t8 = [locale];
-    $[7] = locale;
-    $[8] = t7;
-    $[9] = t8;
-  } else {
-    t7 = $[8];
-    t8 = $[9];
-  }
-  useEffect(t7, t8);
-  let t9;
-  if ($[10] !== apiRoute) {
-    t9 = formatAdminURL({
-      apiRoute,
-      path: ""
-    });
-    $[10] = apiRoute;
-    $[11] = t9;
-  } else {
-    t9 = $[11];
-  }
-  const fetchURL = t9;
-  let t10;
-  if ($[12] !== defaultLocale || $[13] !== fetchURL || $[14] !== localeFromParams || $[15] !== localization || $[16] !== user?.id) {
-    t10 = () => {
-      const resetLocale = async function resetLocale() {
-        if (localization && user?.id) {
-          const localeToUse = localeFromParams || (await fetchPreferences("locale", fetchURL)?.then(_temp));
-          const newLocale = findLocaleFromCode(localization, localeToUse) || findLocaleFromCode(localization, defaultLocale) || findLocaleFromCode(localization, localization?.locales?.[0]?.code);
-          if (newLocale) {
-            setLocale(newLocale);
-          }
+    }
+  }, [isTransitioning, locale]);
+  const fetchURL = formatAdminURL({
+    apiRoute,
+    path: ''
+  });
+  useEffect(() => {
+    /**
+    * This effect should only run when `localeFromParams` changes, i.e. when the user clicks an anchor link
+    * The root layout, which sends the initial locale from prefs, will not re-render as the user navigates the site
+    * For this reason, we need to fetch the locale from prefs if the search params clears the `locale` query param
+    */
+    async function resetLocale() {
+      if (localization && user?.id) {
+        const localeToUse = localeFromParams || (await fetchPreferences('locale', fetchURL)?.then(res => res.value));
+        const newLocale = findLocaleFromCode(localization, localeToUse) || findLocaleFromCode(localization, defaultLocale) || findLocaleFromCode(localization, localization?.locales?.[0]?.code);
+        if (newLocale) {
+          setLocale(newLocale);
         }
-      };
-      resetLocale();
-    };
-    $[12] = defaultLocale;
-    $[13] = fetchURL;
-    $[14] = localeFromParams;
-    $[15] = localization;
-    $[16] = user?.id;
-    $[17] = t10;
-  } else {
-    t10 = $[17];
-  }
-  const t11 = user?.id;
-  let t12;
-  if ($[18] !== defaultLocale || $[19] !== fetchURL || $[20] !== localeFromParams || $[21] !== localization || $[22] !== t11) {
-    t12 = [defaultLocale, localization, fetchURL, localeFromParams, t11];
-    $[18] = defaultLocale;
-    $[19] = fetchURL;
-    $[20] = localeFromParams;
-    $[21] = localization;
-    $[22] = t11;
-    $[23] = t12;
-  } else {
-    t12 = $[23];
-  }
-  useEffect(t10, t12);
-  let t13;
-  if ($[24] !== children || $[25] !== isLoading || $[26] !== locale) {
-    t13 = _jsx(LocaleContext, {
-      value: locale,
-      children: _jsx(LocaleLoadingContext, {
-        value: {
-          localeIsLoading: isLoading,
-          setLocaleIsLoading
-        },
-        children
-      })
-    });
-    $[24] = children;
-    $[25] = isLoading;
-    $[26] = locale;
-    $[27] = t13;
-  } else {
-    t13 = $[27];
-  }
-  return t13;
+      }
+    }
+    void resetLocale();
+  }, [defaultLocale, localization, fetchURL, localeFromParams, user?.id]);
+  return /*#__PURE__*/_jsx(LocaleContext, {
+    value: locale,
+    children: /*#__PURE__*/_jsx(LocaleLoadingContext, {
+      value: {
+        localeIsLoading: isLoading,
+        setLocaleIsLoading
+      },
+      children: children
+    })
+  });
 };
 export const useLocaleLoading = () => use(LocaleLoadingContext);
-/**
- * TODO: V4
- * The return type of the `useLocale` hook will change in v4. It will return `null | Locale` instead of `false | {} | Locale`.
- */
 export const useLocale = () => use(LocaleContext);
-function _temp(res) {
-  return res.value;
-}
 //# sourceMappingURL=index.js.map

package/dist/providers/Locale/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","formatAdminURL","React","createContext","use","useEffect","useRef","useState","findLocaleFromCode","useAuth","useConfig","useSearchParams","LocaleContext","LocaleLoadingContext","localeIsLoading","setLocaleIsLoading","_","undefined","fetchPreferences","key","baseURL","fetch","credentials","headers","method","then","res","json","LocaleProvider","t0","$","children","locale","initialLocaleFromPrefs","config","t1","localization","t2","routes","t3","api","apiRoute","user","defaultLocale","t4","t5","get","localeFromParams","t6","locales","length","code","setLocale","isLoading","prevLocale","t7","t8","current","t9","path","fetchURL","t10","id","resetLocale","localeToUse","_temp","newLocale","t11","t12","t13","_jsx","value","useLocaleLoading","useLocale"],"sources":["../../../src/providers/Locale/index.tsx"],"sourcesContent":["'use client'\n\nimport type { Locale } from 'payload'\n\nimport { formatAdminURL } from 'payload/shared'\nimport React, { createContext, use, useEffect, useRef, useState } from 'react'\n\nimport { findLocaleFromCode } from '../../utilities/findLocaleFromCode.js'\nimport { useAuth } from '../Auth/index.js'\nimport { useConfig } from '../Config/index.js'\nimport { useSearchParams } from '../RouterAdapter/index.js'\n\nconst LocaleContext = createContext({} as Locale)\n\nexport const LocaleLoadingContext = createContext({\n  localeIsLoading: false,\n  setLocaleIsLoading: (_: boolean) => undefined,\n})\n\nconst fetchPreferences = async <T extends Record<string, unknown> | string>(\n  key: string,\n  baseURL: string,\n): Promise<{ id: string; value: T }> =>\n  await fetch(`${baseURL}/payload-preferences/${key}`, {\n    credentials: 'include',\n    headers: {\n      'Content-Type': 'application/json',\n    },\n    method: 'GET',\n  })?.then((res) => res.json() as Promise<{ id: string; value: T }>)\n\nexport const LocaleProvider: React.FC<{ children?: React.ReactNode; locale?: Locale['code'] }> = ({\n  children,\n  /**\n    The `locale` prop originates from the root layout, which does not have access to search params\n    This component uses the `useSearchParams` hook to get the locale from the URL as precedence over this prop\n    This prop does not update as the user navigates the site, because the root layout does not re-render\n  */\n  locale: initialLocaleFromPrefs,\n}) => {\n  const {\n    config: {\n      localization = false,\n      routes: { api: apiRoute },\n    },\n  } = useConfig()\n\n  const { user } = useAuth()\n\n  const defaultLocale = localization ? localization.defaultLocale : 'en'\n\n  const localeFromParams = useSearchParams().get('locale')\n\n  const [locale, setLocale] = React.useState<Locale>(() => {\n    if (!localization || (localization && !localization.locales.length)) {\n      // TODO: return null V4\n      return {} as Locale\n    }\n\n    return (\n      findLocaleFromCode(localization, localeFromParams) ||\n      findLocaleFromCode(localization, initialLocaleFromPrefs) ||\n      findLocaleFromCode(localization, defaultLocale) ||\n      findLocaleFromCode(localization, localization.locales[0].code)\n    )\n  })\n\n  const [isLoading, setLocaleIsLoading] = useState(false)\n\n  const prevLocale = useRef<Locale>(locale)\n\n  useEffect(() => {\n    /**\n     * We need to set `isLoading` back to false once the locale is detected to be different\n     * This happens when the user clicks an anchor link which appends the `?locale=` query param\n     * This triggers a client-side navigation, which re-renders the page with the new locale\n     * In Next.js, local state is persisted during this type of navigation because components are not unmounted\n     */\n    if (locale.code !== prevLocale.current.code) {\n      setLocaleIsLoading(false)\n    }\n\n    prevLocale.current = locale\n  }, [locale])\n\n  const fetchURL = formatAdminURL({\n    apiRoute,\n    path: '',\n  })\n\n  useEffect(() => {\n    /**\n     * This effect should only run when `localeFromParams` changes, i.e. when the user clicks an anchor link\n     * The root layout, which sends the initial locale from prefs, will not re-render as the user navigates the site\n     * For this reason, we need to fetch the locale from prefs if the search params clears the `locale` query param\n     */\n    async function resetLocale() {\n      if (localization && user?.id) {\n        const localeToUse =\n          localeFromParams ||\n          (await fetchPreferences<Locale['code']>('locale', fetchURL)?.then((res) => res.value))\n\n        const newLocale =\n          findLocaleFromCode(localization, localeToUse) ||\n          findLocaleFromCode(localization, defaultLocale) ||\n          findLocaleFromCode(localization, localization?.locales?.[0]?.code)\n\n        if (newLocale) {\n          setLocale(newLocale)\n        }\n      }\n    }\n\n    void resetLocale()\n  }, [defaultLocale, localization, fetchURL, localeFromParams, user?.id])\n\n  return (\n    <LocaleContext value={locale}>\n      <LocaleLoadingContext value={{ localeIsLoading: isLoading, setLocaleIsLoading }}>\n        {children}\n      </LocaleLoadingContext>\n    </LocaleContext>\n  )\n}\n\nexport const useLocaleLoading = () => use(LocaleLoadingContext)\n\n/**\n * TODO: V4\n * The return type of the `useLocale` hook will change in v4. It will return `null | Locale` instead of `false | {} | Locale`.\n */\nexport const useLocale = (): Locale => use(LocaleContext)\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["formatAdminURL","React","createContext","use","useEffect","useRef","useState","findLocaleFromCode","useAuth","useConfig","useSearchParams","useRouteTransition","LocaleContext","LocaleLoadingContext","localeIsLoading","setLocaleIsLoading","_","undefined","fetchPreferences","key","baseURL","fetch","credentials","headers","method","then","res","json","LocaleProvider","children","locale","initialLocaleFromPrefs","config","localization","routes","api","apiRoute","user","isTransitioning","defaultLocale","localeFromParams","get","setLocale","locales","length","code","isLoading","prevLocale","current","fetchURL","path","resetLocale","id","localeToUse","value","newLocale","_jsx","useLocaleLoading","useLocale"],"sources":["../../../src/providers/Locale/index.tsx"],"sourcesContent":["'use client'\n\nimport type { Locale } from 'payload'\n\nimport { formatAdminURL } from 'payload/shared'\nimport React, { createContext, use, useEffect, useRef, useState } from 'react'\n\nimport { findLocaleFromCode } from '../../utilities/findLocaleFromCode.js'\nimport { useAuth } from '../Auth/index.js'\nimport { useConfig } from '../Config/index.js'\nimport { useSearchParams } from '../RouterAdapter/index.js'\nimport { useRouteTransition } from '../RouteTransition/index.js'\n\nconst LocaleContext = createContext<Locale | null>(null)\n\nexport const LocaleLoadingContext = createContext({\n  localeIsLoading: false,\n  setLocaleIsLoading: (_: boolean) => undefined,\n})\n\nconst fetchPreferences = async <T extends Record<string, unknown> | string>(\n  key: string,\n  baseURL: string,\n): Promise<{ id: string; value: T }> =>\n  await fetch(`${baseURL}/payload-preferences/${key}`, {\n    credentials: 'include',\n    headers: {\n      'Content-Type': 'application/json',\n    },\n    method: 'GET',\n  })?.then((res) => res.json() as Promise<{ id: string; value: T }>)\n\nexport const LocaleProvider: React.FC<{ children?: React.ReactNode; locale?: Locale['code'] }> = ({\n  children,\n  /**\n    The `locale` prop originates from the root layout, which does not have access to search params\n    This component uses the `useSearchParams` hook to get the locale from the URL as precedence over this prop\n    This prop does not update as the user navigates the site, because the root layout does not re-render\n  */\n  locale: initialLocaleFromPrefs,\n}) => {\n  const {\n    config: {\n      localization = false,\n      routes: { api: apiRoute },\n    },\n  } = useConfig()\n\n  const { user } = useAuth()\n  const { isTransitioning } = useRouteTransition()\n\n  const defaultLocale = localization ? localization.defaultLocale : 'en'\n\n  const localeFromParams = useSearchParams().get('locale')\n\n  const [locale, setLocale] = React.useState<Locale | null>(() => {\n    if (!localization || (localization && !localization.locales.length)) {\n      return null\n    }\n\n    return (\n      findLocaleFromCode(localization, localeFromParams) ||\n      findLocaleFromCode(localization, initialLocaleFromPrefs) ||\n      findLocaleFromCode(localization, defaultLocale) ||\n      findLocaleFromCode(localization, localization.locales[0].code)\n    )\n  })\n\n  const [isLoading, setLocaleIsLoading] = useState(false)\n\n  const prevLocale = useRef<Locale | null>(locale)\n\n  useEffect(() => {\n    // Keep fields disabled until the new locale's document state finishes loading.\n    if (locale?.code !== prevLocale.current?.code && !isTransitioning) {\n      setLocaleIsLoading(false)\n      prevLocale.current = locale\n    }\n  }, [isTransitioning, locale])\n\n  const fetchURL = formatAdminURL({\n    apiRoute,\n    path: '',\n  })\n\n  useEffect(() => {\n    /**\n     * This effect should only run when `localeFromParams` changes, i.e. when the user clicks an anchor link\n     * The root layout, which sends the initial locale from prefs, will not re-render as the user navigates the site\n     * For this reason, we need to fetch the locale from prefs if the search params clears the `locale` query param\n     */\n    async function resetLocale() {\n      if (localization && user?.id) {\n        const localeToUse =\n          localeFromParams ||\n          (await fetchPreferences<Locale['code']>('locale', fetchURL)?.then((res) => res.value))\n\n        const newLocale =\n          findLocaleFromCode(localization, localeToUse) ||\n          findLocaleFromCode(localization, defaultLocale) ||\n          findLocaleFromCode(localization, localization?.locales?.[0]?.code)\n\n        if (newLocale) {\n          setLocale(newLocale)\n        }\n      }\n    }\n\n    void resetLocale()\n  }, [defaultLocale, localization, fetchURL, localeFromParams, user?.id])\n\n  return (\n    <LocaleContext value={locale}>\n      <LocaleLoadingContext value={{ localeIsLoading: isLoading, setLocaleIsLoading }}>\n        {children}\n      </LocaleLoadingContext>\n    </LocaleContext>\n  )\n}\n\nexport const useLocaleLoading = () => use(LocaleLoadingContext)\n\nexport const useLocale = (): Locale | null => use(LocaleContext)\n"],"mappings":"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","ignoreList":[]}

package/dist/providers/Root/index.js

@@ -53,10 +53,10 @@ export const RootProvider = t0 => {
   let t1;
   if ($[0] !== RouterAdapter || $[1] !== children || $[2] !== config || $[3] !== dateFNSKey || $[4] !== dndContextID || $[5] !== embed || $[6] !== fallbackLang || $[7] !== highContrastMode || $[8] !== isNavOpen || $[9] !== languageCode || $[10] !== languageOptions || $[11] !== locale || $[12] !== permissions || $[13] !== serverFunction || $[14] !== theme || $[15] !== translations || $[16] !== user) {
     t1 = _jsxs(ClickOutsideProvider, {
-      children: [_jsx(RouterAdapter, {
-        children: _jsx(ServerFunctionsProvider, {
-          serverFunction,
-          children: _jsx(RouteTransitionProvider, {
+      children: [_jsx(RouteTransitionProvider, {
+        children: _jsx(RouterAdapter, {
+          children: _jsx(ServerFunctionsProvider, {
+            serverFunction,
             children: _jsx(RouteCache, {
               cachingEnabled: process.env.NEXT_PUBLIC_ENABLE_ROUTER_CACHE_REFRESH === "true",
               children: _jsx(ConfigProvider, {

package/dist/providers/Root/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","DndContext","pointerWithin","ModalContainer","ModalProvider","ScrollInfoProvider","React","CloseModalOnRouteChange","DrawerStackProvider","LoadingOverlayProvider","NavProvider","StayLoggedInModal","StepNavProvider","ClickOutsideProvider","WindowInfoProvider","AuthProvider","ClientFunctionProvider","ConfigProvider","DocumentEventsProvider","EmbedProvider","HierarchyProvider","LocaleProvider","PreferencesProvider","RouteCache","RouteTransitionProvider","ServerFunctionsProvider","ThemeProvider","ToastContainer","TranslationProvider","UploadHandlersProvider","RootProvider","t0","$","children","config","dateFNSKey","embed","fallbackLang","highContrastMode","isNavOpen","languageCode","languageOptions","locale","permissions","RouterAdapter","serverFunction","theme","translations","user","dndContextID","useId","t1","_jsxs","_jsx","cachingEnabled","process","env","NEXT_PUBLIC_ENABLE_ROUTER_CACHE_REFRESH","language","breakpoints","l","m","s","xs","classPrefix","transTime","zIndex","initialIsOpen","collisionDetection","id"],"sources":["../../../src/providers/Root/index.tsx"],"sourcesContent":["'use client'\nimport type { I18nClient, I18nOptions, Language } from '@payloadcms/translations'\nimport type {\n  ClientConfig,\n  LanguageOptions,\n  Locale,\n  RouterAdapterComponent,\n  SanitizedPermissions,\n  ServerFunctionClient,\n  User,\n} from 'payload'\n\nimport { DndContext, pointerWithin } from '@dnd-kit/core'\nimport { ModalContainer, ModalProvider } from '@faceless-ui/modal'\nimport { ScrollInfoProvider } from '@faceless-ui/scroll-info'\nimport React from 'react'\n\nimport type { Theme } from '../Theme/index.js'\n\nimport { CloseModalOnRouteChange } from '../../elements/CloseModalOnRouteChange/index.js'\nimport { DrawerStackProvider } from '../../elements/Drawer/index.js'\nimport { LoadingOverlayProvider } from '../../elements/LoadingOverlay/index.js'\nimport { NavProvider } from '../../elements/Nav/context.js'\nimport { StayLoggedInModal } from '../../elements/StayLoggedIn/index.js'\nimport { StepNavProvider } from '../../elements/StepNav/index.js'\nimport { ClickOutsideProvider } from '../../providers/ClickOutside/index.js'\nimport { WindowInfoProvider } from '../../providers/WindowInfo/index.js'\nimport { AuthProvider } from '../Auth/index.js'\nimport { ClientFunctionProvider } from '../ClientFunction/index.js'\nimport { ConfigProvider } from '../Config/index.js'\nimport { DocumentEventsProvider } from '../DocumentEvents/index.js'\nimport { EmbedProvider } from '../Embed/index.js'\nimport { HierarchyProvider } from '../Hierarchy/index.js'\nimport { LocaleProvider } from '../Locale/index.js'\nimport { PreferencesProvider } from '../Preferences/index.js'\nimport { RouteCache } from '../RouteCache/index.js'\nimport { RouteTransitionProvider } from '../RouteTransition/index.js'\nimport { ServerFunctionsProvider } from '../ServerFunctions/index.js'\nimport { ThemeProvider } from '../Theme/index.js'\nimport { ToastContainer } from '../ToastContainer/index.js'\nimport { TranslationProvider } from '../Translation/index.js'\nimport { UploadHandlersProvider } from '../UploadHandlers/index.js'\n\ntype Props = {\n  readonly children: React.ReactNode\n  readonly config: ClientConfig\n  readonly dateFNSKey: Language['dateFNSKey']\n  readonly embed?: boolean\n  readonly fallbackLang: I18nOptions['fallbackLanguage']\n  readonly highContrastMode: boolean\n  readonly isNavOpen?: boolean\n  readonly languageCode: string\n  readonly languageOptions: LanguageOptions\n  readonly locale?: Locale['code']\n  readonly permissions: SanitizedPermissions\n  readonly RouterAdapter: RouterAdapterComponent\n  readonly serverFunction: ServerFunctionClient\n  readonly theme: Theme\n  readonly translations: I18nClient['translations']\n  readonly user: null | User\n}\n\nexport const RootProvider: React.FC<Props> = ({\n  children,\n  config,\n  dateFNSKey,\n  embed,\n  fallbackLang,\n  highContrastMode,\n  isNavOpen,\n  languageCode,\n  languageOptions,\n  locale,\n  permissions,\n  RouterAdapter,\n  serverFunction,\n  theme,\n  translations,\n  user,\n}) => {\n  const dndContextID = React.useId()\n\n  return (\n    <ClickOutsideProvider>\n      <RouterAdapter>\n        <ServerFunctionsProvider serverFunction={serverFunction}>\n          <RouteTransitionProvider>\n            <RouteCache\n              cachingEnabled={process.env.NEXT_PUBLIC_ENABLE_ROUTER_CACHE_REFRESH === 'true'}\n            >\n              <ConfigProvider config={config}>\n                <ClientFunctionProvider>\n                  <TranslationProvider\n                    dateFNSKey={dateFNSKey}\n                    fallbackLang={fallbackLang}\n                    language={languageCode}\n                    languageOptions={languageOptions}\n                    translations={translations}\n                  >\n                    <WindowInfoProvider\n                      breakpoints={{\n                        l: '(max-width: 1440px)',\n                        m: '(max-width: 1024px)',\n                        s: '(max-width: 768px)',\n                        xs: '(max-width: 400px)',\n                      }}\n                    >\n                      <ScrollInfoProvider>\n                        <ModalProvider classPrefix=\"payload\" transTime={0} zIndex=\"var(--z-modal)\">\n                          <DrawerStackProvider>\n                            <CloseModalOnRouteChange />\n                            <AuthProvider permissions={permissions} user={user}>\n                              <PreferencesProvider>\n                                <HierarchyProvider>\n                                  <ThemeProvider highContrastMode={highContrastMode} theme={theme}>\n                                    <EmbedProvider embed={embed}>\n                                      <LocaleProvider locale={locale}>\n                                        <StepNavProvider>\n                                          <LoadingOverlayProvider>\n                                            <DocumentEventsProvider>\n                                              <NavProvider initialIsOpen={isNavOpen}>\n                                                <UploadHandlersProvider>\n                                                  <DndContext\n                                                    collisionDetection={pointerWithin}\n                                                    // Provide stable ID to fix hydration issues: https://github.com/clauderic/dnd-kit/issues/926\n                                                    id={dndContextID}\n                                                  >\n                                                    {children}\n                                                  </DndContext>\n                                                </UploadHandlersProvider>\n                                              </NavProvider>\n                                            </DocumentEventsProvider>\n                                          </LoadingOverlayProvider>\n                                        </StepNavProvider>\n                                      </LocaleProvider>\n                                    </EmbedProvider>\n                                  </ThemeProvider>\n                                </HierarchyProvider>\n                              </PreferencesProvider>\n                              <ModalContainer />\n                              <StayLoggedInModal />\n                            </AuthProvider>\n                          </DrawerStackProvider>\n                        </ModalProvider>\n                      </ScrollInfoProvider>\n                    </WindowInfoProvider>\n                  </TranslationProvider>\n                </ClientFunctionProvider>\n              </ConfigProvider>\n            </RouteCache>\n          </RouteTransitionProvider>\n        </ServerFunctionsProvider>\n      </RouterAdapter>\n      <ToastContainer config={config} />\n    </ClickOutsideProvider>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","DndContext","pointerWithin","ModalContainer","ModalProvider","ScrollInfoProvider","React","CloseModalOnRouteChange","DrawerStackProvider","LoadingOverlayProvider","NavProvider","StayLoggedInModal","StepNavProvider","ClickOutsideProvider","WindowInfoProvider","AuthProvider","ClientFunctionProvider","ConfigProvider","DocumentEventsProvider","EmbedProvider","HierarchyProvider","LocaleProvider","PreferencesProvider","RouteCache","RouteTransitionProvider","ServerFunctionsProvider","ThemeProvider","ToastContainer","TranslationProvider","UploadHandlersProvider","RootProvider","t0","$","children","config","dateFNSKey","embed","fallbackLang","highContrastMode","isNavOpen","languageCode","languageOptions","locale","permissions","RouterAdapter","serverFunction","theme","translations","user","dndContextID","useId","t1","_jsxs","_jsx","cachingEnabled","process","env","NEXT_PUBLIC_ENABLE_ROUTER_CACHE_REFRESH","language","breakpoints","l","m","s","xs","classPrefix","transTime","zIndex","initialIsOpen","collisionDetection","id"],"sources":["../../../src/providers/Root/index.tsx"],"sourcesContent":["'use client'\nimport type { I18nClient, I18nOptions, Language } from '@payloadcms/translations'\nimport type {\n  ClientConfig,\n  LanguageOptions,\n  Locale,\n  RouterAdapterComponent,\n  SanitizedPermissions,\n  ServerFunctionClient,\n  User,\n} from 'payload'\n\nimport { DndContext, pointerWithin } from '@dnd-kit/core'\nimport { ModalContainer, ModalProvider } from '@faceless-ui/modal'\nimport { ScrollInfoProvider } from '@faceless-ui/scroll-info'\nimport React from 'react'\n\nimport type { Theme } from '../Theme/index.js'\n\nimport { CloseModalOnRouteChange } from '../../elements/CloseModalOnRouteChange/index.js'\nimport { DrawerStackProvider } from '../../elements/Drawer/index.js'\nimport { LoadingOverlayProvider } from '../../elements/LoadingOverlay/index.js'\nimport { NavProvider } from '../../elements/Nav/context.js'\nimport { StayLoggedInModal } from '../../elements/StayLoggedIn/index.js'\nimport { StepNavProvider } from '../../elements/StepNav/index.js'\nimport { ClickOutsideProvider } from '../../providers/ClickOutside/index.js'\nimport { WindowInfoProvider } from '../../providers/WindowInfo/index.js'\nimport { AuthProvider } from '../Auth/index.js'\nimport { ClientFunctionProvider } from '../ClientFunction/index.js'\nimport { ConfigProvider } from '../Config/index.js'\nimport { DocumentEventsProvider } from '../DocumentEvents/index.js'\nimport { EmbedProvider } from '../Embed/index.js'\nimport { HierarchyProvider } from '../Hierarchy/index.js'\nimport { LocaleProvider } from '../Locale/index.js'\nimport { PreferencesProvider } from '../Preferences/index.js'\nimport { RouteCache } from '../RouteCache/index.js'\nimport { RouteTransitionProvider } from '../RouteTransition/index.js'\nimport { ServerFunctionsProvider } from '../ServerFunctions/index.js'\nimport { ThemeProvider } from '../Theme/index.js'\nimport { ToastContainer } from '../ToastContainer/index.js'\nimport { TranslationProvider } from '../Translation/index.js'\nimport { UploadHandlersProvider } from '../UploadHandlers/index.js'\n\ntype Props = {\n  readonly children: React.ReactNode\n  readonly config: ClientConfig\n  readonly dateFNSKey: Language['dateFNSKey']\n  readonly embed?: boolean\n  readonly fallbackLang: I18nOptions['fallbackLanguage']\n  readonly highContrastMode: boolean\n  readonly isNavOpen?: boolean\n  readonly languageCode: string\n  readonly languageOptions: LanguageOptions\n  readonly locale?: Locale['code']\n  readonly permissions: SanitizedPermissions\n  readonly RouterAdapter: RouterAdapterComponent\n  readonly serverFunction: ServerFunctionClient\n  readonly theme: Theme\n  readonly translations: I18nClient['translations']\n  readonly user: null | User\n}\n\nexport const RootProvider: React.FC<Props> = ({\n  children,\n  config,\n  dateFNSKey,\n  embed,\n  fallbackLang,\n  highContrastMode,\n  isNavOpen,\n  languageCode,\n  languageOptions,\n  locale,\n  permissions,\n  RouterAdapter,\n  serverFunction,\n  theme,\n  translations,\n  user,\n}) => {\n  const dndContextID = React.useId()\n\n  return (\n    <ClickOutsideProvider>\n      <RouteTransitionProvider>\n        <RouterAdapter>\n          <ServerFunctionsProvider serverFunction={serverFunction}>\n            <RouteCache\n              cachingEnabled={process.env.NEXT_PUBLIC_ENABLE_ROUTER_CACHE_REFRESH === 'true'}\n            >\n              <ConfigProvider config={config}>\n                <ClientFunctionProvider>\n                  <TranslationProvider\n                    dateFNSKey={dateFNSKey}\n                    fallbackLang={fallbackLang}\n                    language={languageCode}\n                    languageOptions={languageOptions}\n                    translations={translations}\n                  >\n                    <WindowInfoProvider\n                      breakpoints={{\n                        l: '(max-width: 1440px)',\n                        m: '(max-width: 1024px)',\n                        s: '(max-width: 768px)',\n                        xs: '(max-width: 400px)',\n                      }}\n                    >\n                      <ScrollInfoProvider>\n                        <ModalProvider classPrefix=\"payload\" transTime={0} zIndex=\"var(--z-modal)\">\n                          <DrawerStackProvider>\n                            <CloseModalOnRouteChange />\n                            <AuthProvider permissions={permissions} user={user}>\n                              <PreferencesProvider>\n                                <HierarchyProvider>\n                                  <ThemeProvider highContrastMode={highContrastMode} theme={theme}>\n                                    <EmbedProvider embed={embed}>\n                                      <LocaleProvider locale={locale}>\n                                        <StepNavProvider>\n                                          <LoadingOverlayProvider>\n                                            <DocumentEventsProvider>\n                                              <NavProvider initialIsOpen={isNavOpen}>\n                                                <UploadHandlersProvider>\n                                                  <DndContext\n                                                    collisionDetection={pointerWithin}\n                                                    // Provide stable ID to fix hydration issues: https://github.com/clauderic/dnd-kit/issues/926\n                                                    id={dndContextID}\n                                                  >\n                                                    {children}\n                                                  </DndContext>\n                                                </UploadHandlersProvider>\n                                              </NavProvider>\n                                            </DocumentEventsProvider>\n                                          </LoadingOverlayProvider>\n                                        </StepNavProvider>\n                                      </LocaleProvider>\n                                    </EmbedProvider>\n                                  </ThemeProvider>\n                                </HierarchyProvider>\n                              </PreferencesProvider>\n                              <ModalContainer />\n                              <StayLoggedInModal />\n                            </AuthProvider>\n                          </DrawerStackProvider>\n                        </ModalProvider>\n                      </ScrollInfoProvider>\n                    </WindowInfoProvider>\n                  </TranslationProvider>\n                </ClientFunctionProvider>\n              </ConfigProvider>\n            </RouteCache>\n          </ServerFunctionsProvider>\n        </RouterAdapter>\n      </RouteTransitionProvider>\n      <ToastContainer config={config} />\n    </ClickOutsideProvider>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/providers/RouteTransition/ProgressBar/index.js

@@ -46,7 +46,7 @@ export const ProgressBar = () => {
         }
       } else {
         shouldDelayProgress.current = true;
-        setProgressToShow(1);
+        setProgressToShow(_temp);
         clearTimerID = setTimeout(() => {
           setProgressToShow(null);
         }, transitionDuration * 2);
@@ -101,4 +101,7 @@ export const ProgressBar = () => {
   }
   return null;
 };
+function _temp(currentProgress) {
+  return currentProgress === null ? null : 1;
+}
 //# sourceMappingURL=index.js.map

package/dist/providers/RouteTransition/ProgressBar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useEffect","useRef","useRouteTransition","transitionDuration","baseClass","initialDelay","ProgressBar","$","isTransitioning","transitionProgress","progressToShow","setProgressToShow","useState","shouldDelayProgress","t0","t1","clearTimerID","delayTimerID","current","clearTimeout","t2","t3","filter","Boolean","t4","join","t5","_jsx","className","style","children","width"],"sources":["../../../../src/providers/RouteTransition/ProgressBar/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect, useRef } from 'react'\n\nimport { useRouteTransition } from '../index.js'\nimport './index.css'\n\nconst transitionDuration = 200\nconst baseClass = 'progress-bar'\nconst initialDelay = 150\n\n/**\n * Renders a progress bar that shows the progress of a route transition.\n * Place this at the root of your application, inside of the `RouteTransitionProvider`.\n * When a transition is triggered, the progress bar will show the progress of that transition and exit when the transition is complete.\n * @returns A progress bar that shows the progress of a route transition\n * @example\n * import { RouteTransitionProvider, ProgressBar, Link } from '@payloadcms/ui'\n * const App = () => (\n * <RouteTransitionProvider>\n *  <ProgressBar />\n *  <Link href=\"/somewhere\">Go Somewhere</Link>\n * </RouteTransitionProvider>\n */\nexport const ProgressBar = () => {\n  const { isTransitioning, transitionProgress } = useRouteTransition()\n  const [progressToShow, setProgressToShow] = React.useState<null | number>(null)\n  const shouldDelayProgress = useRef(true)\n\n  useEffect(() => {\n    let clearTimerID: NodeJS.Timeout\n    let delayTimerID: NodeJS.Timeout\n\n    if (isTransitioning) {\n      if (shouldDelayProgress.current) {\n        delayTimerID = setTimeout(() => {\n          setProgressToShow(transitionProgress)\n          shouldDelayProgress.current = false\n        }, initialDelay)\n      } else {\n        setProgressToShow(transitionProgress)\n      }\n    } else {\n      shouldDelayProgress.current = true\n\n      // Fast forward to 100% when the transition is complete\n      // Then fade out the progress bar directly after\n      setProgressToShow(1)\n\n      // Wait for CSS transition to finish before hiding the progress bar\n      // This includes both the fast-forward to 100% and the subsequent fade-out\n      clearTimerID = setTimeout(() => {\n        setProgressToShow(null)\n      }, transitionDuration * 2)\n    }\n\n    return () => {\n      clearTimeout(clearTimerID)\n      clearTimeout(delayTimerID)\n    }\n  }, [isTransitioning, transitionProgress])\n\n  if (typeof progressToShow === 'number') {\n    return (\n      <div\n        className={[baseClass, progressToShow === 1 && `${baseClass}--fade-out`]\n          .filter(Boolean)\n          .join(' ')}\n        style={{\n          // @ts-expect-error - TS doesn't like custom CSS properties\n          '--transition-duration': `${transitionDuration}ms`,\n        }}\n      >\n        <div\n          className={`${baseClass}__progress`}\n          style={{\n            width: `${(progressToShow || 0) * 100}%`,\n          }}\n        />\n      </div>\n    )\n  }\n\n  return null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,SAAS,EAAEC,MAAM,QAAQ;AAEzC,SAASC,kBAAkB,QAAQ;AACnC,OAAO;AAEP,MAAMC,kBAAA,GAAqB;AAC3B,MAAMC,SAAA,GAAY;AAClB,MAAMC,YAAA,GAAe;AAErB;;;;;;;;;;;;;AAaA,OAAO,MAAMC,WAAA,GAAcA,CAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EACzB;IAAAU,eAAA;IAAAC;EAAA,IAAgDP,kBAAA;EAChD,OAAAQ,cAAA,EAAAC,iBAAA,IAA4CZ,KAAA,CAAAa,QAAA,KAA8B;EAC1E,MAAAC,mBAAA,GAA4BZ,MAAA,KAAO;EAAA,IAAAa,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAR,CAAA,QAAAC,eAAA,IAAAD,CAAA,QAAAE,kBAAA;IAEzBK,EAAA,GAAAA,CAAA;MACJE,GAAA,CAAAA,YAAA;MACAC,GAAA,CAAAA,YAAA;MAAA,IAEAT,eAAA;QAAA,IACEK,mBAAA,CAAAK,OAAA;UACFD,YAAA,CAAAA,CAAA,CAAeA,aAAA,CAAAA,EAAA,CAAAA;YACbN,iBAAA,CAAkBF,kBAAA;YAClBI,mBAAA,CAAAK,OAAA;UAAA,GAAAb,YACC;QAHH;UAKAM,iBAAA,CAAkBF,kBAAA;QAAA;MAAA;QAGpBI,mBAAA,CAAAK,OAAA;QAIAP,iBAAA,EAAkB;QAIlBK,YAAA,CAAAA,CAAA,CAAeA,aAAA,CAAAA,EAAA,CAAAA;UACbL,iBAAA,KAAkB;QAAA,GACjBR,kBAAA,IAAqB;MAFxB;MAAA;QAMAgB,YAAA,CAAaH,YAAA;QACbG,YAAA,CAAaF,YAAA;MAAA;IAAA;IAEdF,EAAA,IAACP,eAAA,EAAiBC,kBAAA;IAAmBF,CAAA,MAAAC,eAAA;IAAAD,CAAA,MAAAE,kBAAA;IAAAF,CAAA,MAAAO,EAAA;IAAAP,CAAA,MAAAQ,EAAA;EAAA;IAAAD,EAAA,GAAAP,CAAA;IAAAQ,EAAA,GAAAR,CAAA;EAAA;EA/BxCP,SAAA,CAAUc,EA+BV,EAAGC,EAAqC;EAAA,IAEpC,OAAOL,cAAA,KAAmB;IAGD,MAAAU,EAAA,GAAAV,cAAA,MAAmB,IAAK,GAAAN,SAAA,YAAwB;IAAA,IAAAiB,EAAA;IAAA,IAAAd,CAAA,QAAAa,EAAA;MAA5DC,EAAA,IAAAjB,SAAA,EAAYgB,EAAgD,EAAAE,MAAA,CAAAC,OAC7D;MAAAhB,CAAA,MAAAa,EAAA;MAAAb,CAAA,MAAAc,EAAA;IAAA;MAAAA,EAAA,GAAAd,CAAA;IAAA;IADC,MAAAiB,EAAA,GAAAH,EACD,CAAAI,IAAA,CACF;IAAA,IAAAC,EAAA;IAAA,IAAAnB,CAAA,QAAAG,cAAA,IAAAH,CAAA,QAAAiB,EAAA;MAHVE,EAAA,GAAAC,IAAA,CAAC;QAAAC,SAAA,EACYJ,EAEH;QAAAK,KAAA;UAAA,yBAGmB,GAAA1B,kBAAA;QAAyB;QAAA2B,QAAA,EAGpDH,IAAA,CAAC;UAAAC,SAAA,EACY,GAAAxB,SAAA,YAAwB;UAAAyB,KAAA;YAAAE,KAAA,EAE1B,GAAG,CAACrB,cAAA,KAAkB,OAAK;UAAM;QAAA,C;;;;;;;;WAZ9CgB,E;;;CAoBN","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useEffect","useRef","useRouteTransition","transitionDuration","baseClass","initialDelay","ProgressBar","$","isTransitioning","transitionProgress","progressToShow","setProgressToShow","useState","shouldDelayProgress","t0","t1","clearTimerID","delayTimerID","current","_temp","clearTimeout","t2","t3","filter","Boolean","t4","join","t5","_jsx","className","style","children","width","currentProgress"],"sources":["../../../../src/providers/RouteTransition/ProgressBar/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect, useRef } from 'react'\n\nimport { useRouteTransition } from '../index.js'\nimport './index.css'\n\nconst transitionDuration = 200\nconst baseClass = 'progress-bar'\nconst initialDelay = 150\n\n/**\n * Renders a progress bar that shows the progress of a route transition.\n * Place this at the root of your application, inside of the `RouteTransitionProvider`.\n * When a transition is triggered, the progress bar will show the progress of that transition and exit when the transition is complete.\n * @returns A progress bar that shows the progress of a route transition\n * @example\n * import { RouteTransitionProvider, ProgressBar, Link } from '@payloadcms/ui'\n * const App = () => (\n * <RouteTransitionProvider>\n *  <ProgressBar />\n *  <Link href=\"/somewhere\">Go Somewhere</Link>\n * </RouteTransitionProvider>\n */\nexport const ProgressBar = () => {\n  const { isTransitioning, transitionProgress } = useRouteTransition()\n  const [progressToShow, setProgressToShow] = React.useState<null | number>(null)\n  const shouldDelayProgress = useRef(true)\n\n  useEffect(() => {\n    let clearTimerID: NodeJS.Timeout\n    let delayTimerID: NodeJS.Timeout\n\n    if (isTransitioning) {\n      if (shouldDelayProgress.current) {\n        delayTimerID = setTimeout(() => {\n          setProgressToShow(transitionProgress)\n          shouldDelayProgress.current = false\n        }, initialDelay)\n      } else {\n        setProgressToShow(transitionProgress)\n      }\n    } else {\n      shouldDelayProgress.current = true\n\n      // Fast forward to 100% when the transition is complete\n      // Then fade out the progress bar directly after\n      setProgressToShow((currentProgress) => (currentProgress === null ? null : 1))\n\n      // Wait for CSS transition to finish before hiding the progress bar\n      // This includes both the fast-forward to 100% and the subsequent fade-out\n      clearTimerID = setTimeout(() => {\n        setProgressToShow(null)\n      }, transitionDuration * 2)\n    }\n\n    return () => {\n      clearTimeout(clearTimerID)\n      clearTimeout(delayTimerID)\n    }\n  }, [isTransitioning, transitionProgress])\n\n  if (typeof progressToShow === 'number') {\n    return (\n      <div\n        className={[baseClass, progressToShow === 1 && `${baseClass}--fade-out`]\n          .filter(Boolean)\n          .join(' ')}\n        style={{\n          // @ts-expect-error - TS doesn't like custom CSS properties\n          '--transition-duration': `${transitionDuration}ms`,\n        }}\n      >\n        <div\n          className={`${baseClass}__progress`}\n          style={{\n            width: `${(progressToShow || 0) * 100}%`,\n          }}\n        />\n      </div>\n    )\n  }\n\n  return null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,SAAS,EAAEC,MAAM,QAAQ;AAEzC,SAASC,kBAAkB,QAAQ;AACnC,OAAO;AAEP,MAAMC,kBAAA,GAAqB;AAC3B,MAAMC,SAAA,GAAY;AAClB,MAAMC,YAAA,GAAe;AAErB;;;;;;;;;;;;;AAaA,OAAO,MAAMC,WAAA,GAAcA,CAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EACzB;IAAAU,eAAA;IAAAC;EAAA,IAAgDP,kBAAA;EAChD,OAAAQ,cAAA,EAAAC,iBAAA,IAA4CZ,KAAA,CAAAa,QAAA,KAA8B;EAC1E,MAAAC,mBAAA,GAA4BZ,MAAA,KAAO;EAAA,IAAAa,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAR,CAAA,QAAAC,eAAA,IAAAD,CAAA,QAAAE,kBAAA;IAEzBK,EAAA,GAAAA,CAAA;MACJE,GAAA,CAAAA,YAAA;MACAC,GAAA,CAAAA,YAAA;MAAA,IAEAT,eAAA;QAAA,IACEK,mBAAA,CAAAK,OAAA;UACFD,YAAA,CAAAA,CAAA,CAAeA,aAAA,CAAAA,EAAA,CAAAA;YACbN,iBAAA,CAAkBF,kBAAA;YAClBI,mBAAA,CAAAK,OAAA;UAAA,GAAAb,YACC;QAHH;UAKAM,iBAAA,CAAkBF,kBAAA;QAAA;MAAA;QAGpBI,mBAAA,CAAAK,OAAA;QAIAP,iBAAA,CAAAQ,KAA0E;QAI1EH,YAAA,CAAAA,CAAA,CAAeA,aAAA,CAAAA,EAAA,CAAAA;UACbL,iBAAA,KAAkB;QAAA,GACjBR,kBAAA,IAAqB;MAFxB;MAAA;QAMAiB,YAAA,CAAaJ,YAAA;QACbI,YAAA,CAAaH,YAAA;MAAA;IAAA;IAEdF,EAAA,IAACP,eAAA,EAAiBC,kBAAA;IAAmBF,CAAA,MAAAC,eAAA;IAAAD,CAAA,MAAAE,kBAAA;IAAAF,CAAA,MAAAO,EAAA;IAAAP,CAAA,MAAAQ,EAAA;EAAA;IAAAD,EAAA,GAAAP,CAAA;IAAAQ,EAAA,GAAAR,CAAA;EAAA;EA/BxCP,SAAA,CAAUc,EA+BV,EAAGC,EAAqC;EAAA,IAEpC,OAAOL,cAAA,KAAmB;IAGD,MAAAW,EAAA,GAAAX,cAAA,MAAmB,IAAK,GAAAN,SAAA,YAAwB;IAAA,IAAAkB,EAAA;IAAA,IAAAf,CAAA,QAAAc,EAAA;MAA5DC,EAAA,IAAAlB,SAAA,EAAYiB,EAAgD,EAAAE,MAAA,CAAAC,OAC7D;MAAAjB,CAAA,MAAAc,EAAA;MAAAd,CAAA,MAAAe,EAAA;IAAA;MAAAA,EAAA,GAAAf,CAAA;IAAA;IADC,MAAAkB,EAAA,GAAAH,EACD,CAAAI,IAAA,CACF;IAAA,IAAAC,EAAA;IAAA,IAAApB,CAAA,QAAAG,cAAA,IAAAH,CAAA,QAAAkB,EAAA;MAHVE,EAAA,GAAAC,IAAA,CAAC;QAAAC,SAAA,EACYJ,EAEH;QAAAK,KAAA;UAAA,yBAGmB,GAAA3B,kBAAA;QAAyB;QAAA4B,QAAA,EAGpDH,IAAA,CAAC;UAAAC,SAAA,EACY,GAAAzB,SAAA,YAAwB;UAAA0B,KAAA;YAAAE,KAAA,EAE1B,GAAG,CAACtB,cAAA,KAAkB,OAAK;UAAM;QAAA,C;;;;;;;;WAZ9CiB,E;;;CAoBN;AA5D2B,SAAAR,MAAAc,eAAA;EAAA,OAuBmBA,eAAA,SAAoB,WAAc;AAAA","ignoreList":[]}

package/dist/providers/RouteTransition/ProgressBar/index.spec.js

@@ -0,0 +1,44 @@
+// @vitest-environment happy-dom
+import { act, createElement, useEffect } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, beforeEach, expect, test, vi } from 'vitest';
+import { RouteTransitionProvider, useRouteTransition } from '../index.js';
+import { ProgressBar } from './index.js';
+let container;
+let root;
+beforeEach(() => {
+  globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+afterEach(() => {
+  act(() => root.unmount());
+  container.remove();
+  vi.useRealTimers();
+});
+test('does not show progress for transitions that finish before the initial delay', async () => {
+  vi.useFakeTimers();
+  const FastTransition = () => {
+    const {
+      holdRouteTransition
+    } = useRouteTransition();
+    useEffect(() => {
+      const releaseRouteTransition = holdRouteTransition();
+      const timeout = setTimeout(releaseRouteTransition, 50);
+      return () => {
+        clearTimeout(timeout);
+        releaseRouteTransition();
+      };
+    }, [holdRouteTransition]);
+    return null;
+  };
+  await act(async () => {
+    root.render(createElement(RouteTransitionProvider, null, createElement(ProgressBar), createElement(FastTransition)));
+  });
+  await act(async () => {
+    await vi.advanceTimersByTimeAsync(50);
+  });
+  expect(container.querySelector('.progress-bar')).toBeNull();
+});
+//# sourceMappingURL=index.spec.js.map

package/dist/providers/RouteTransition/ProgressBar/index.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.spec.js","names":["act","createElement","useEffect","createRoot","afterEach","beforeEach","expect","test","vi","RouteTransitionProvider","useRouteTransition","ProgressBar","container","root","globalThis","IS_REACT_ACT_ENVIRONMENT","document","body","appendChild","unmount","remove","useRealTimers","useFakeTimers","FastTransition","holdRouteTransition","releaseRouteTransition","timeout","setTimeout","clearTimeout","render","advanceTimersByTimeAsync","querySelector","toBeNull"],"sources":["../../../../src/providers/RouteTransition/ProgressBar/index.spec.ts"],"sourcesContent":["// @vitest-environment happy-dom\n\nimport { act, createElement, useEffect } from 'react'\nimport { createRoot, type Root } from 'react-dom/client'\nimport { afterEach, beforeEach, expect, test, vi } from 'vitest'\n\nimport { RouteTransitionProvider, useRouteTransition } from '../index.js'\nimport { ProgressBar } from './index.js'\n\nlet container: HTMLDivElement\nlet root: Root\n\nbeforeEach(() => {\n  globalThis.IS_REACT_ACT_ENVIRONMENT = true\n  container = document.createElement('div')\n  document.body.appendChild(container)\n  root = createRoot(container)\n})\n\nafterEach(() => {\n  act(() => root.unmount())\n  container.remove()\n  vi.useRealTimers()\n})\n\ntest('does not show progress for transitions that finish before the initial delay', async () => {\n  vi.useFakeTimers()\n\n  const FastTransition = () => {\n    const { holdRouteTransition } = useRouteTransition()\n\n    useEffect(() => {\n      const releaseRouteTransition = holdRouteTransition()\n      const timeout = setTimeout(releaseRouteTransition, 50)\n\n      return () => {\n        clearTimeout(timeout)\n        releaseRouteTransition()\n      }\n    }, [holdRouteTransition])\n\n    return null\n  }\n\n  await act(async () => {\n    root.render(\n      createElement(\n        RouteTransitionProvider,\n        null,\n        createElement(ProgressBar),\n        createElement(FastTransition),\n      ),\n    )\n  })\n\n  await act(async () => {\n    await vi.advanceTimersByTimeAsync(50)\n  })\n\n  expect(container.querySelector('.progress-bar')).toBeNull()\n})\n"],"mappings":"AAAA;AAEA,SAASA,GAAG,EAAEC,aAAa,EAAEC,SAAS,QAAQ;AAC9C,SAASC,UAAU,QAAmB;AACtC,SAASC,SAAS,EAAEC,UAAU,EAAEC,MAAM,EAAEC,IAAI,EAAEC,EAAE,QAAQ;AAExD,SAASC,uBAAuB,EAAEC,kBAAkB,QAAQ;AAC5D,SAASC,WAAW,QAAQ;AAE5B,IAAIC,SAAA;AACJ,IAAIC,IAAA;AAEJR,UAAA,CAAW;EACTS,UAAA,CAAWC,wBAAwB,GAAG;EACtCH,SAAA,GAAYI,QAAA,CAASf,aAAa,CAAC;EACnCe,QAAA,CAASC,IAAI,CAACC,WAAW,CAACN,SAAA;EAC1BC,IAAA,GAAOV,UAAA,CAAWS,SAAA;AACpB;AAEAR,SAAA,CAAU;EACRJ,GAAA,CAAI,MAAMa,IAAA,CAAKM,OAAO;EACtBP,SAAA,CAAUQ,MAAM;EAChBZ,EAAA,CAAGa,aAAa;AAClB;AAEAd,IAAA,CAAK,+EAA+E;EAClFC,EAAA,CAAGc,aAAa;EAEhB,MAAMC,cAAA,GAAiBA,CAAA;IACrB,MAAM;MAAEC;IAAmB,CAAE,GAAGd,kBAAA;IAEhCR,SAAA,CAAU;MACR,MAAMuB,sBAAA,GAAyBD,mBAAA;MAC/B,MAAME,OAAA,GAAUC,UAAA,CAAWF,sBAAA,EAAwB;MAEnD,OAAO;QACLG,YAAA,CAAaF,OAAA;QACbD,sBAAA;MACF;IACF,GAAG,CAACD,mBAAA,CAAoB;IAExB,OAAO;EACT;EAEA,MAAMxB,GAAA,CAAI;IACRa,IAAA,CAAKgB,MAAM,CACT5B,aAAA,CACEQ,uBAAA,EACA,MACAR,aAAA,CAAcU,WAAA,GACdV,aAAA,CAAcsB,cAAA;EAGpB;EAEA,MAAMvB,GAAA,CAAI;IACR,MAAMQ,EAAA,CAAGsB,wBAAwB,CAAC;EACpC;EAEAxB,MAAA,CAAOM,SAAA,CAAUmB,aAAa,CAAC,kBAAkBC,QAAQ;AAC3D","ignoreList":[]}

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

@@ -21,6 +21,8 @@ type RouteTransitionProps = {
 };
 type StartRouteTransition = (callback?: () => void) => void;
 type RouteTransitionContextValue = {
+    /** Keeps the transition active until the returned release function is called. */
+    holdRouteTransition: () => () => void;
     isTransitioning: boolean;
     startRouteTransition: StartRouteTransition;
     transitionProgress: number;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/RouteTransition/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyE,MAAM,OAAO,CAAA;AAE7F;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA6DlE,CAAA;AAED,KAAK,oBAAoB,GAAG;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAED,KAAK,oBAAoB,GAAG,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,KAAK,IAAI,CAAA;AAE3D,KAAK,2BAA2B,GAAG;IACjC,eAAe,EAAE,OAAO,CAAA;IACxB,oBAAoB,EAAE,oBAAoB,CAAA;IAC1C,kBAAkB,EAAE,MAAM,CAAA;CAC3B,CAAA;AAaD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,kBAAkB,mCAA0C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/RouteTransition/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyE,MAAM,OAAO,CAAA;AAE7F;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAqFlE,CAAA;AAED,KAAK,oBAAoB,GAAG;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAED,KAAK,oBAAoB,GAAG,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,KAAK,IAAI,CAAA;AAE3D,KAAK,2BAA2B,GAAG;IACjC,iFAAiF;IACjF,mBAAmB,EAAE,MAAM,MAAM,IAAI,CAAA;IACrC,eAAe,EAAE,OAAO,CAAA;IACxB,oBAAoB,EAAE,oBAAoB,CAAA;IAC1C,kBAAkB,EAAE,MAAM,CAAA;CAC3B,CAAA;AAcD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,kBAAkB,mCAA0C,CAAA"}

package/dist/providers/RouteTransition/index.js

@@ -20,12 +20,14 @@ import React, { startTransition, useCallback, useEffect, useOptimistic, useRef }
  * )
  */
 export const RouteTransitionProvider = t0 => {
-  const $ = _c(11);
+  const $ = _c(12);
   const {
     children
   } = t0;
-  const [isTransitioning, setIsTransitioning] = useOptimistic(false);
+  const [isOptimisticallyTransitioning, setIsOptimisticallyTransitioning] = useOptimistic(false);
+  const [activeRouteTransitionHolds, setActiveRouteTransitionHolds] = React.useState(0);
   const [transitionProgress, setTransitionProgress] = React.useState(0);
+  const isTransitioning = isOptimisticallyTransitioning || activeRouteTransitionHolds > 0;
   const transitionProgressRef = useRef(transitionProgress);
   const timerID = useRef(null);
   let t1;
@@ -66,42 +68,62 @@ export const RouteTransitionProvider = t0 => {
   }
   useEffect(t2, t3);
   let t4;
-  if ($[4] !== setIsTransitioning) {
+  if ($[4] !== setIsOptimisticallyTransitioning) {
     t4 = callback => {
       startTransition(() => {
-        setIsTransitioning(true);
+        setIsOptimisticallyTransitioning(true);
         if (typeof callback === "function") {
           callback();
         }
       });
     };
-    $[4] = setIsTransitioning;
+    $[4] = setIsOptimisticallyTransitioning;
     $[5] = t4;
   } else {
     t4 = $[5];
   }
   const startRouteTransition = t4;
   let t5;
-  if ($[6] !== children || $[7] !== isTransitioning || $[8] !== startRouteTransition || $[9] !== transitionProgress) {
-    t5 = _jsx(RouteTransitionContext, {
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = () => {
+      let hasReleased = false;
+      setActiveRouteTransitionHolds(_temp);
+      return () => {
+        if (hasReleased) {
+          return;
+        }
+        hasReleased = true;
+        setActiveRouteTransitionHolds(_temp2);
+      };
+    };
+    $[6] = t5;
+  } else {
+    t5 = $[6];
+  }
+  const holdRouteTransition = t5;
+  let t6;
+  if ($[7] !== children || $[8] !== isTransitioning || $[9] !== startRouteTransition || $[10] !== transitionProgress) {
+    t6 = _jsx(RouteTransitionContext, {
       value: {
+        holdRouteTransition,
         isTransitioning,
         startRouteTransition,
         transitionProgress
       },
       children
     });
-    $[6] = children;
-    $[7] = isTransitioning;
-    $[8] = startRouteTransition;
-    $[9] = transitionProgress;
-    $[10] = t5;
+    $[7] = children;
+    $[8] = isTransitioning;
+    $[9] = startRouteTransition;
+    $[10] = transitionProgress;
+    $[11] = t6;
   } else {
-    t5 = $[10];
+    t6 = $[11];
   }
-  return t5;
+  return t6;
 };
 const RouteTransitionContext = /*#__PURE__*/React.createContext({
+  holdRouteTransition: () => () => undefined,
   isTransitioning: false,
   // Default implementation: just call the callback directly (no transition animation)
   startRouteTransition: callback => {
@@ -132,4 +154,10 @@ const RouteTransitionContext = /*#__PURE__*/React.createContext({
  * }
  */
 export const useRouteTransition = () => React.use(RouteTransitionContext);
+function _temp(count) {
+  return count + 1;
+}
+function _temp2(count_0) {
+  return Math.max(0, count_0 - 1);
+}
 //# sourceMappingURL=index.js.map