chore: thread missing Link components to Button

packages/ui/src/elements/Button/index.tsx

@@ -49,6 +49,7 @@ export const ButtonContents = ({ children, icon, showTooltip, tooltip }) => {
 export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, Props>((props, ref) => {
   const {
     id,
+    type = 'button',
     Link,
     'aria-label': ariaLabel,
     buttonStyle = 'primary',
@@ -65,7 +66,6 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, Props>((
     size = 'medium',
     to,
     tooltip,
-    type = 'button',
     url,
   } = props
 
@@ -95,6 +95,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, Props>((
 
   const buttonProps = {
     id,
+    type,
     'aria-disabled': disabled,
     'aria-label': ariaLabel,
     className: classes,
@@ -104,13 +105,12 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, Props>((
     onMouseLeave: tooltip ? () => setShowTooltip(false) : undefined,
     rel: newTab ? 'noopener noreferrer' : undefined,
     target: newTab ? '_blank' : undefined,
-    type,
   }
 
   switch (el) {
     case 'link':
       if (!Link) {
-        console.error('Link is required when using el="link"')
+        console.error('Link is required when using el="link"', children)
         return null
       }
 

packages/ui/src/elements/Localizer/index.tsx

@@ -1,5 +1,5 @@
 import { getTranslation } from '@payloadcms/translations'
-import qs from 'qs'
+import { useRouter } from 'next/navigation'
 import React from 'react'
 
 import { useConfig } from '../../providers/Config'
@@ -23,9 +23,7 @@ const Localizer: React.FC<{
   const { i18n } = useTranslation()
   const locale = useLocale()
   const { searchParams } = useSearchParams()
-
-  const localeLabel = getTranslation(locale.label, i18n)
-
+  const router = useRouter()
   if (localization) {
     const { locales } = localization
 
@@ -36,42 +34,28 @@ const Localizer: React.FC<{
           horizontalAlign="right"
           render={({ close }) => (
             <PopupList.ButtonGroup>
-              <React.Fragment>
-                {locale ? (
+              {locales.map((localeOption) => {
+                const newParams = {
+                  ...searchParams,
+                  locale: localeOption.code,
+                }
+                const localeOptionLabel = getTranslation(localeOption.label, i18n)
+
+                return (
                   <PopupList.Button
-                    active
-                    href={{
-                      search: qs.stringify({
-                        ...searchParams,
-                        locale: locale.code,
-                      }),
+                    active={locale.code === localeOption.code}
+                    href={{ query: newParams }}
+                    key={localeOption.code}
+                    onClick={() => {
+                      close()
+                      router.refresh()
                     }}
-                    key={locale.code}
-                    onClick={close}
                   >
-                    {localeLabel}
-                    {localeLabel !== locale.code && ` (${locale.code})`}
+                    {localeOptionLabel}
+                    {localeOptionLabel !== localeOption.code && ` (${localeOption.code})`}
                   </PopupList.Button>
-                ) : null}
-
-                {locales.map((localeOption) => {
-                  if (locale.code === localeOption.code) return null
-
-                  const newParams = {
-                    ...searchParams,
-                    locale: localeOption.code,
-                  }
-                  const search = qs.stringify(newParams)
-                  const localeOptionLabel = getTranslation(localeOption.label, i18n)
-
-                  return (
-                    <PopupList.Button href={{ search }} key={localeOption.code} onClick={close}>
-                      {localeOptionLabel}
-                      {localeOptionLabel !== localeOption.code && ` (${localeOption.code})`}
-                    </PopupList.Button>
-                  )
-                })}
-              </React.Fragment>
+                )
+              })}
             </PopupList.ButtonGroup>
           )}
           showScrollbar

packages/ui/src/exports/providers.ts

@@ -19,6 +19,7 @@ export { EditDepthContext, EditDepthProvider } from '../providers/EditDepth'
 export { useEditDepth } from '../providers/EditDepth'
 export { FormQueryParams, FormQueryParamsProvider } from '../providers/FormQueryParams'
 export type { QueryParamTypes } from '../providers/FormQueryParams'
+export { useFormQueryParams } from '../providers/FormQueryParams'
 export { useListInfo } from '../providers/ListInfo'
 export { ListInfoProvider } from '../providers/ListInfo'
 export type { ColumnPreferences } from '../providers/ListInfo/types'

packages/ui/src/forms/Form/mergeServerFormState.ts

@@ -11,7 +11,7 @@ export const mergeServerFormState = (
   let changed = false
 
   Object.entries(newState).forEach(([path, newFieldState]) => {
-    newFieldState.initialValue = oldState[path].initialValue
+    newFieldState.initialValue = oldState[path]?.initialValue
     newFieldState.value = oldState[path].value
 
     const oldErrorPaths: string[] = []

packages/ui/src/providers/Auth/index.tsx

@@ -26,7 +26,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
   const [tokenInMemory, setTokenInMemory] = useState<string>()
   const [tokenExpiration, setTokenExpiration] = useState<number>()
   const pathname = usePathname()
-  const { push } = useRouter()
+  const router = useRouter()
   // const { code } = useLocale()
   const code = 'en' // TODO: re-enable i18n asap
 
@@ -52,12 +52,12 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
       const redirectParam = `?redirect=${encodeURIComponent(
         window.location.pathname.replace(admin, ''),
       )}`
-      push(`${admin}${logoutInactivityRoute}${redirectParam}`)
+      router.replace(`${admin}${logoutInactivityRoute}${redirectParam}`)
     } else {
-      push(`${admin}${logoutInactivityRoute}`)
+      router.replace(`${admin}${logoutInactivityRoute}`)
     }
     closeAllModals()
-  }, [push, admin, logoutInactivityRoute, closeAllModals])
+  }, [router, admin, logoutInactivityRoute, closeAllModals])
 
   const revokeTokenAndExpire = useCallback(() => {
     setTokenInMemory(undefined)
@@ -212,7 +212,9 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
             if (autoLoginJson?.token) {
               setTokenAndExpiration(autoLoginJson)
             }
-            push(typeof searchParams['redirect'] === 'string' ? searchParams['redirect'] : admin)
+            router.push(
+              typeof searchParams['redirect'] === 'string' ? searchParams['redirect'] : admin,
+            )
           } else {
             setUser(null)
             revokeTokenAndExpire()
@@ -232,7 +234,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
     i18n.language,
     autoLogin,
     setTokenAndExpiration,
-    push,
+    router,
     searchParams,
     admin,
     revokeTokenAndExpire,

packages/ui/src/providers/Locale/index.tsx

@@ -2,6 +2,8 @@
 
 import type { Locale } from 'payload/config'
 
+// TODO: abstract the `next/navigation` dependency out from this component
+import { useRouter } from 'next/navigation'
 import React, { createContext, useContext, useEffect, useState } from 'react'
 
 import { findLocaleFromCode } from '../../utilities/findLocaleFromCode'
@@ -20,7 +22,8 @@ export const LocaleProvider: React.FC<{ children?: React.ReactNode }> = ({ child
   const defaultLocale =
     localization && localization.defaultLocale ? localization.defaultLocale : 'en'
 
-  const { searchParams } = useSearchParams()
+  const { dispatchSearchParams, searchParams } = useSearchParams()
+  const router = useRouter()
 
   const [localeCode, setLocaleCode] = useState<string>(
     (searchParams?.locale as string) || defaultLocale,
@@ -35,20 +38,20 @@ export const LocaleProvider: React.FC<{ children?: React.ReactNode }> = ({ child
   const localeFromParams = searchParams.locale
 
   useEffect(() => {
-    if (!localization) {
-      return
-    }
+    async function localeChangeHandler() {
+      if (!localization) {
+        return
+      }
 
-    // set locale from search param
-    if (localeFromParams && localization.localeCodes.indexOf(localeFromParams as string) > -1) {
-      setLocaleCode(localeFromParams as string)
-      setLocale(findLocaleFromCode(localization, localeFromParams as string))
-      if (user) setPreference('locale', localeFromParams)
-      return
-    }
+      // set locale from search param
+      if (localeFromParams && localization.localeCodes.indexOf(localeFromParams as string) > -1) {
+        setLocaleCode(localeFromParams as string)
+        setLocale(findLocaleFromCode(localization, localeFromParams as string))
+        if (user) await setPreference('locale', localeFromParams)
+        return
+      }
 
-    // set locale from preferences or default
-    ;(async () => {
+      // set locale from preferences or default
       let preferenceLocale: string
       let isPreferenceInConfig: boolean
       if (user) {
@@ -60,12 +63,25 @@ export const LocaleProvider: React.FC<{ children?: React.ReactNode }> = ({ child
           setLocale(findLocaleFromCode(localization, preferenceLocale))
           return
         }
-        setPreference('locale', defaultLocale)
+        await setPreference('locale', defaultLocale)
       }
       setLocaleCode(defaultLocale)
       setLocale(findLocaleFromCode(localization, defaultLocale))
-    })()
-  }, [defaultLocale, getPreference, localeFromParams, setPreference, user, localization])
+    }
+
+    void localeChangeHandler()
+  }, [defaultLocale, getPreference, localeFromParams, setPreference, user, localization, router])
+
+  useEffect(() => {
+    if (searchParams?.locale) {
+      dispatchSearchParams({
+        type: 'set',
+        params: {
+          locale: searchParams.locale,
+        },
+      })
+    }
+  }, [searchParams.locale, dispatchSearchParams])
 
   return <LocaleContext.Provider value={locale}>{children}</LocaleContext.Provider>
 }

packages/ui/src/providers/SearchParams/index.tsx

@@ -24,6 +24,7 @@ export const SearchParamsProvider: React.FC<{ children?: React.ReactNode }> = ({
   const [searchParams, dispatchSearchParams] = React.useReducer((state: State, action: Action) => {
     const stackAction = action.browserHistory || 'push'
     let paramsToSet
+
     switch (action.type) {
       case 'set':
         paramsToSet = {