Merged in feat/SW-517-language-switcher-dismiss (pull request #626)

Feat/SW-517 language switcher dismiss

* feat(SW-517): Close language switcher when clicking outside

* feat(SW-517): Close language switcher on selection

* feat(SW-517): Fix mobile header


Approved-by: Niclas Edenvin
Approved-by: Linus Flood

components/LanguageSwitcher/LanguageSwitcherContent/index.tsx

@@ -16,6 +16,7 @@ import type { LanguageSwitcherContentProps } from "@/types/components/languageSw
 
 export default function LanguageSwitcherContent({
   urls,
+  onLanguageSwitch,
 }: LanguageSwitcherContentProps) {
   const intl = useIntl()
   const currentLanguage = useLang()
@@ -39,6 +40,7 @@ export default function LanguageSwitcherContent({
                   <Link
                     className={`${styles.link} ${isActive ? styles.active : ""}`}
                     href={url}
+                    onClick={onLanguageSwitch}
                   >
                     {languages[key]}
                     {isActive ? <CheckIcon color="burgundy" /> : null}

components/LanguageSwitcher/index.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { useEffect, useRef } from "react"
 import { useIntl } from "react-intl"
 
 import { languages } from "@/constants/languages"
@@ -28,6 +29,7 @@ export default function LanguageSwitcher({
   const intl = useIntl()
   const currentLanguage = useLang()
   const toggleDropdown = useDropdownStore((state) => state.toggleDropdown)
+  const languageSwitcherRef = useRef<HTMLDivElement>(null)
   const isFooterLanguageSwitcherOpen = useDropdownStore(
     (state) => state.isFooterLanguageSwitcherOpen
   )
@@ -70,10 +72,37 @@ export default function LanguageSwitcher({
     })
   }
 
+  useEffect(() => {
+    function handleClickOutside(evt: Event) {
+      const target = evt.target as HTMLElement
+      if (
+        languageSwitcherRef.current &&
+        target &&
+        !languageSwitcherRef.current.contains(target) &&
+        isLanguageSwitcherOpen &&
+        !isHeaderLanguageSwitcherMobileOpen
+      ) {
+        toggleDropdown(dropdownType)
+      }
+    }
+
+    if (languageSwitcherRef.current) {
+      document.addEventListener("click", handleClickOutside)
+    }
+    return () => {
+      document.removeEventListener("click", handleClickOutside)
+    }
+  }, [
+    dropdownType,
+    toggleDropdown,
+    isLanguageSwitcherOpen,
+    isHeaderLanguageSwitcherMobileOpen,
+  ])
+
   const classNames = languageSwitcherVariants({ color, position })
 
   return (
-    <div className={classNames}>
+    <div className={classNames} ref={languageSwitcherRef}>
       <button
         type="button"
         className={styles.button}
@@ -99,7 +128,10 @@ export default function LanguageSwitcher({
       >
         {isLanguageSwitcherOpen ? (
           <LanguageSwitcherContainer type={type}>
-            <LanguageSwitcherContent urls={urls} />
+            <LanguageSwitcherContent
+              urls={urls}
+              onLanguageSwitch={() => toggleDropdown(dropdownType)}
+            />
           </LanguageSwitcherContainer>
         ) : null}
       </div>

types/components/languageSwitcher/languageSwitcher.ts

@@ -17,6 +17,7 @@ export interface LanguageSwitcherProps {
 
 export interface LanguageSwitcherContentProps {
   urls: LanguageSwitcherData
+  onLanguageSwitch: () => void
 }
 
 export interface LanguageSwitcherContainerProps {