build(deps): update latest

components/Application/Application.tsx

@@ -40,7 +40,9 @@ export interface ApplicationProps {
   title: string
 }
 
-export const Application: React.FC<ApplicationProps> = (props) => {
+export const Application: React.FC<
+  React.PropsWithChildren<ApplicationProps>
+> = (props) => {
   const { children, path, guildLeftSidebar, title } = props
 
   const { user } = useAuthentication()
@@ -110,7 +112,7 @@ export const Application: React.FC<ApplicationProps> = (props) => {
   const swipeableHandlers = useSwipeable({
     trackMouse: false,
     trackTouch: true,
-    preventDefaultTouchmoveEvent: true,
+    preventScrollOnSwipe: true,
     onSwipedRight: () => {
       if (visibleSidebars.right) {
         return setVisibleSidebars({ ...visibleSidebars, right: false })

components/Application/JoinGuildsPublic/GuildPublic/GuildPublic.tsx

@@ -40,7 +40,7 @@ export const GuildPublic: React.FC<GuildPublicProps> = (props) => {
       if (
         axios.isAxiosError(error) &&
         error.response?.status === 400 &&
-        typeof error.response?.data.defaultChannelId === 'number'
+        typeof error?.response?.data.defaultChannelId === 'number'
       ) {
         const defaultChannelId = error.response.data.defaultChannelId as number
         await router.push(`/application/${guild.id}/${defaultChannelId}`)

components/Application/Sidebar/Sidebar.tsx

@@ -11,7 +11,9 @@ export interface SidebarProps {
   isMobile: boolean
 }
 
-export const Sidebar: React.FC<SidebarProps> = (props) => {
+export const Sidebar: React.FC<React.PropsWithChildren<SidebarProps>> = (
+  props
+) => {
   const { direction, visible, children, path, isMobile } = props
 
   return (

components/Header/Language/Language.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useState, useRef } from 'react'
 import useTranslation from 'next-translate/useTranslation'
 import setLanguage from 'next-translate/setLanguage'
 import classNames from 'classnames'
@@ -15,31 +15,37 @@ export const Language: React.FC<LanguageProps> = (props) => {
   const { className } = props
   const { lang: currentLanguage } = useTranslation()
   const [hiddenMenu, setHiddenMenu] = useState(true)
+  const languageClickRef = useRef<HTMLDivElement | null>(null)
 
   const handleHiddenMenu = useCallback(() => {
-    setHiddenMenu(!hiddenMenu)
-  }, [hiddenMenu])
+    setHiddenMenu((oldHiddenMenu) => !oldHiddenMenu)
+  }, [])
 
   useEffect(() => {
-    if (!hiddenMenu) {
-      window.document.addEventListener('click', handleHiddenMenu)
-    } else {
-      window.document.removeEventListener('click', handleHiddenMenu)
+    const handleClickEvent = (event: MouseEvent): void => {
+      if (languageClickRef.current == null || event.target == null) {
+        return
+      }
+      if (!languageClickRef.current.contains(event.target as Node)) {
+        setHiddenMenu(true)
+      }
     }
 
+    window.document.addEventListener('click', handleClickEvent)
+
     return () => {
-      window.document.removeEventListener('click', handleHiddenMenu)
+      return window.removeEventListener('click', handleClickEvent)
     }
-  }, [hiddenMenu, handleHiddenMenu])
+  }, [])
 
   const handleLanguage = async (language: string): Promise<void> => {
     await setLanguage(language)
-    handleHiddenMenu()
   }
 
   return (
     <div className='relative flex cursor-pointer flex-col items-center justify-center'>
       <div
+        ref={languageClickRef}
         data-cy='language-click'
         className='mr-5 flex items-center'
         onClick={handleHiddenMenu}

components/ScrollableBody/ScrollableBody.tsx

@@ -1,4 +1,6 @@
-export const ScrollableBody: React.FC = (props) => {
+export const ScrollableBody: React.FC<React.PropsWithChildren<{}>> = (
+  props
+) => {
   const { children } = props
 
   return (

components/design/IconLink/IconLink.tsx

@@ -8,7 +8,9 @@ export interface IconLinkProps {
   className?: string
 }
 
-export const IconLink: React.FC<IconLinkProps> = (props) => {
+export const IconLink: React.FC<React.PropsWithChildren<IconLinkProps>> = (
+  props
+) => {
   const { children, selected, href, title, className } = props
 
   return (

components/design/Main/Main.tsx

@@ -4,7 +4,7 @@ export interface MainProps {
   className?: string
 }
 
-export const Main: React.FC<MainProps> = (props) => {
+export const Main: React.FC<React.PropsWithChildren<MainProps>> = (props) => {
   const { children, className } = props
 
   return (