@alfakit/react 0.1.7 → 0.1.9

package/src/starter-kit/widgets-loaded.tsx

@@ -7,22 +7,26 @@ import {
   loadStarterKitPanel,
   loadedStarterKitPanel,
   openRequestedStarterKitSearch,
+  showsLanguageSwitcher,
   starterKitCopilot,
+  starterKitPanelLocale,
   starterKitWidgetsPage,
   starterKitWidgetsPanel,
   takeRequestedStarterKitCopilot,
+  takeRequestedStarterKitLanguages,
   tenantNameText,
   type PanelSchema,
   type StarterKitWidgets,
 } from '@alfakit/core'
 import { router, usePage } from '@inertiajs/react'
-import { ChevronsUpDownIcon, PlusIcon } from 'lucide-react'
+import { ChevronsUpDownIcon, LanguagesIcon, PlusIcon } from 'lucide-react'
 import { Direction } from 'radix-ui'
-import { useEffect, useMemo, useState, type ReactNode } from 'react'
+import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
 import { AiCopilot } from '../components/ai/copilot'
 import { NotificationsMenu } from '../components/notifications/notifications-menu'
 import { RealtimeNotifications } from '../components/notifications/realtime-notifications'
 import { GlobalSearch } from '../components/panel/global-search'
+import { LocaleOptions } from '../components/panel/locale-switcher'
 import { TenantName } from '../components/panel/nav-label'
 import { TenantMenu } from '../components/panel/tenant-menu'
 import { Avatar, AvatarFallback, AvatarImage } from '../components/ui/avatar'
@@ -38,6 +42,7 @@ import { TooltipProvider } from '../components/ui/tooltip'
 import {
   AlfakitProvider,
   StandaloneProvider,
+  useLocalization,
   useT,
   type AlfakitContextValue,
   type AnyComponent,
@@ -45,16 +50,18 @@ import {
 import { Icon } from '../lib/icons'
 import {
   CopilotTrigger,
+  LanguageSwitcherTrigger,
   NotificationsTrigger,
   SearchTrigger,
   TenantSwitcherTrigger,
+  languageTriggerClasses,
   type WidgetProps,
 } from './widgets-triggers'
 
 /**
  * The loaded header components of starter kit mode: the panel's own search palette,
- * notifications menu and tenant menu, rendered outside Alfakit pages with the panel data
- * from `widgets.endpoint`. This module only loads in the browser.
+ * notifications menu, tenant menu and language menu, rendered outside Alfakit pages with
+ * the panel data from `widgets.endpoint`. This module only loads in the browser.
  */
 
 // One context for the browser session: its own translator (the panel's strings), an empty
@@ -75,17 +82,24 @@ function useWidgetsContext(panel: PanelSchema): AlfakitContextValue {
   return widgetsContext
 }
 
-/** The panel the components render with, once its data has loaded (null until then). */
+/**
+ * The panel the components render with, once its data has loaded (null until then). It is
+ * loaded per endpoint (a tenant switch) and language (a language switch), so the components
+ * follow a switch instead of keeping the old language's strings.
+ */
 function useWidgetsPanel(source: StarterKitWidgets): PanelSchema | null {
   const endpoint = source.widgets.endpoint
-  const [loaded, setLoaded] = useState(() => loadedStarterKitPanel(endpoint))
-  const base = loadedStarterKitPanel(endpoint) ?? loaded
+  const locale = starterKitPanelLocale(source)
+  const [loaded, setLoaded] = useState(() => loadedStarterKitPanel(endpoint, locale))
+  // Until the new language's data arrives, not the old language's.
+  const current =
+    loaded && (locale === undefined || loaded.localization?.code === locale) ? loaded : null
+  const base = loadedStarterKitPanel(endpoint, locale) ?? current
 
   useEffect(() => {
     let active = true
 
-    // Another endpoint (a tenant switch) loads its own panel data.
-    void loadStarterKitPanel(endpoint).then(
+    void loadStarterKitPanel(endpoint, locale).then(
       (panel) => active && setLoaded(panel),
       () => {},
     )
@@ -93,7 +107,7 @@ function useWidgetsPanel(source: StarterKitWidgets): PanelSchema | null {
     return () => {
       active = false
     }
-  }, [endpoint])
+  }, [endpoint, locale])
 
   const { navigation, widgets } = source
 
@@ -184,6 +198,68 @@ export function LoadedCopilot({ source }: WidgetProps) {
   )
 }
 
+/**
+ * The panel's language menu (its languages in their own names, `LocaleOptions`): picking
+ * one posts to the panel's locale endpoint and reloads the page in it. Nothing without a
+ * language switcher with two or more languages.
+ */
+export function LoadedLanguageSwitcher({ source }: WidgetProps) {
+  const panel = useWidgetsPanel(source)
+
+  if (!panel) return <LanguageSwitcherTrigger source={source} />
+
+  if (!showsLanguageSwitcher(panel.localization, 'auth')) return null
+
+  return (
+    <WidgetShell panel={panel}>
+      <LanguageMenu />
+    </WidgetShell>
+  )
+}
+
+function LanguageMenu() {
+  const t = useT()
+  const localization = useLocalization()
+  const [open, setOpen] = useState(false)
+  // Taken once per mount (effects run twice in StrictMode).
+  const requested = useRef<boolean | null>(null)
+
+  // A click on the trigger before the menu loaded opens it once mounted: a frame later, as
+  // the menu closes again when it opens while focus is still on the replaced button.
+  useEffect(() => {
+    requested.current ??= takeRequestedStarterKitLanguages()
+
+    if (!requested.current) return
+
+    const frame = requestAnimationFrame(() => setOpen(true))
+
+    return () => cancelAnimationFrame(frame)
+  }, [])
+  const label = t('change_language', {}, 'Change language')
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          data-slot="language-switcher-trigger"
+          aria-label={label}
+          title={label}
+          className={languageTriggerClasses}
+        >
+          <LanguagesIcon className="size-4" aria-hidden="true" />
+          <span lang={localization.tag} dir={localization.direction} className="hidden sm:inline">
+            {localization.label}
+          </span>
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="min-w-40">
+        <LocaleOptions />
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
 /** The user's tenants on a page outside the panel (no current tenant). */
 function TenantChooser({ panel }: { panel: PanelSchema }) {
   const t = useT()

package/src/starter-kit/widgets-triggers.tsx

@@ -4,11 +4,12 @@ import {
   registerStarterKitCopilotShortcut,
   registerStarterKitSearchShortcut,
   requestStarterKitCopilot,
+  requestStarterKitLanguages,
   requestStarterKitSearch,
   tenantNameText,
   type StarterKitWidgets,
 } from '@alfakit/core'
-import { BellIcon, ChevronsUpDownIcon, SearchIcon, SparklesIcon } from 'lucide-react'
+import { BellIcon, ChevronsUpDownIcon, LanguagesIcon, SearchIcon, SparklesIcon } from 'lucide-react'
 import { useEffect } from 'react'
 import { useHydrated } from '../hooks/use-hydrated'
 
@@ -136,3 +137,42 @@ export function CopilotTrigger({ source, onLoad }: WidgetProps & { onLoad?: () =
     </button>
   )
 }
+
+/** The language button's look, before and after its menu has loaded. */
+export const languageTriggerClasses =
+  'hover:bg-accent hover:text-accent-foreground data-[state=open]:bg-accent inline-flex h-9 min-w-9 shrink-0 items-center justify-center gap-1.5 rounded-md px-2 text-sm font-medium outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50'
+
+/**
+ * The language button until its menu has loaded: the languages icon and the current
+ * language in its own name (from `sm`). A click is remembered and opens the menu once loaded.
+ */
+export function LanguageSwitcherTrigger({ source, onLoad }: WidgetProps & { onLoad?: () => void }) {
+  const language = source.widgets.language
+
+  return (
+    <button
+      type="button"
+      data-slot="language-switcher-trigger"
+      aria-label={language?.label}
+      aria-haspopup="menu"
+      title={language?.label}
+      className={languageTriggerClasses}
+      onPointerEnter={() => onLoad?.()}
+      onClick={() => {
+        requestStarterKitLanguages()
+        onLoad?.()
+      }}
+    >
+      <LanguagesIcon className="size-4" aria-hidden="true" />
+      {language && (
+        <span
+          lang={language.current.tag}
+          dir={language.current.direction}
+          className="hidden sm:inline"
+        >
+          {language.current.label}
+        </span>
+      )}
+    </button>
+  )
+}

package/src/starter-kit/widgets.tsx

@@ -9,6 +9,7 @@ import { lazy, Suspense } from 'react'
 import { lazyComponent } from '../lib/lazy'
 import {
   CopilotTrigger,
+  LanguageSwitcherTrigger,
   NotificationsTrigger,
   SearchTrigger,
   TenantSwitcherTrigger,
@@ -17,17 +18,18 @@ import {
 
 /**
  * Drop-in header components of starter kit mode (`Panel::starterKit()`): AlfaKit's search,
- * notifications bell and tenant switcher in the host's own header, on every page of the
+ * notifications bell, tenant switcher and language switcher in the host's own header, on every page of the
  * application. They read the shared `alfakitNavigation` prop, render a lightweight trigger
  * straight away, and load their code and the panel data the first time they render
  * (in the browser, never during SSR).
  *
  * ```tsx
- * import { AlfakitCopilot, AlfakitNotifications, AlfakitSearch } from '@alfakit/react'
+ * import { AlfakitCopilot, AlfakitLanguageSwitcher, AlfakitNotifications, AlfakitSearch } from '@alfakit/react'
  *
  * <AlfakitSearch />
  * <AlfakitNotifications />
  * <AlfakitCopilot />
+ * <AlfakitLanguageSwitcher />
  * ```
  */
 export interface AlfakitHeaderWidgetProps {
@@ -65,6 +67,11 @@ function preloadCopilot() {
   void LoadedCopilot.preload()
 }
 
+const LoadedLanguageSwitcher = lazyComponent<WidgetProps>(
+  () => load().then((module) => module.LoadedLanguageSwitcher),
+  (props) => <LanguageSwitcherTrigger {...props} />,
+)
+
 // Only needed while impersonating: its code loads then (and never on AlfaKit pages).
 const LazyImpersonationBanner = lazy(() => import('./impersonation-banner'))
 
@@ -176,3 +183,27 @@ export function AlfakitCopilot({ panel }: AlfakitHeaderWidgetProps = {}) {
     </>
   )
 }
+
+/**
+ * The panel's language menu (`locales()`): the current language straight away, and each
+ * language in its own name once loaded. Picking one switches the panel's language (the
+ * session, the cookie and `persistLocaleUsing()`) and reloads the page, so AlfaKit pages and
+ * the header components show it; the host's own pages and `<html lang dir>` are the app's.
+ * Renders nothing for guests or with fewer than two languages.
+ */
+export function AlfakitLanguageSwitcher({ panel }: AlfakitHeaderWidgetProps = {}) {
+  const source = useWidgets(panel, 'language')
+
+  const banner = <StarterKitImpersonationBanner source={source} />
+
+  if (!source?.widgets.language) return banner
+
+  return (
+    <>
+      {banner}
+      <span data-slot="starter-kit-language-switcher" className="inline-flex">
+        <LoadedLanguageSwitcher source={source} />
+      </span>
+    </>
+  )
+}