@12-apps/ui 6.78.4 → 6.79.0

package/src/components/data-display/Timeline/TimelineRow.tsx

@@ -1,3 +1,4 @@
+import type { TimelineLabels } from '../../../copy/labels';
 import DotIcon from '@mui/icons-material/Circle';
 import ExpandIcon from '@mui/icons-material/ExpandMore';
 import Box from '@mui/material/Box/index.js';
@@ -196,7 +197,8 @@ const TimelineCardHeader: React.FC<{
   variant: NonNullable<TimelineProps['variant']>;
   isExpanded: boolean;
   onExpandClick: (itemId: string, event: React.MouseEvent) => void;
-}> = ({ item, variant, isExpanded, onExpandClick }) => (
+  labels: TimelineLabels;
+}> = ({ item, variant, isExpanded, onExpandClick, labels }) => (
   <Box
     sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}
   >
@@ -216,7 +218,7 @@ const TimelineCardHeader: React.FC<{
       <IconButton
         size="small"
         onClick={(e) => onExpandClick(item.id, e)}
-        aria-label={isExpanded ? 'Collapse item details' : 'Expand item details'}
+        aria-label={isExpanded ? labels.collapseDetails : labels.expandDetails}
         sx={{
           transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
           transition: 'transform 0.3s ease',
@@ -237,13 +239,14 @@ const TimelineRowCard: React.FC<{
   isExpanded: boolean;
   onItemClick?: (item: TimelineItem) => void;
   onExpandClick: (itemId: string, event: React.MouseEvent) => void;
-}> = ({ item, variant, isClickable, isExpanded, onItemClick, onExpandClick }) => (
+  labels: TimelineLabels;
+}> = ({ item, variant, isClickable, isExpanded, onItemClick, onExpandClick, labels }) => (
   <TimelineCard
     timelineVariant={variant}
     isClickable={isClickable}
     onClick={isClickable ? () => onItemClick?.(item) : undefined}
     role="article"
-    aria-label={`Timeline item: ${item.title}`}
+    aria-label={labels.item(item.title)}
     data-testid="timeline-card"
   >
     <CardContent>
@@ -253,6 +256,7 @@ const TimelineRowCard: React.FC<{
           variant={variant}
           isExpanded={isExpanded}
           onExpandClick={onExpandClick}
+          labels={labels}
         />
 
         {variant === 'compact' && item.description && (
@@ -282,6 +286,7 @@ export const TimelineRow: React.FC<{
   isExpanded: boolean;
   onItemClick?: (item: TimelineItem) => void;
   onExpandClick: (itemId: string, event: React.MouseEvent) => void;
+  labels: TimelineLabels;
 }> = ({
   item,
   index,
@@ -294,6 +299,7 @@ export const TimelineRow: React.FC<{
   isExpanded,
   onItemClick,
   onExpandClick,
+  labels,
 }) => {
 
     
@@ -341,6 +347,7 @@ export const TimelineRow: React.FC<{
         isExpanded={isExpanded}
         onItemClick={onItemClick}
         onExpandClick={onExpandClick}
+        labels={labels}
       />
     </TimelineItemContainer>
   );

package/src/components/feedback/Dialog/Dialog.base.ts

@@ -27,6 +27,11 @@ export interface DialogBaseProps {
   title?: ReactNode;
   description?: string;
   showCloseButton?: boolean;
+  /**
+   * The close button's accessible name. Defaults to `close`, as it always read;
+   * a host passes `CHROME_COPY[locale].closePanel`.
+   */
+  closeLabel?: string;
   /** Ignored by BOTH renderers today; see `Dialog.metrics.ts`. */
   backdrop?: boolean;
   /** Refuses to close on a backdrop press or Escape. */
@@ -47,6 +52,11 @@ export interface DialogHeaderBaseProps {
   title?: ReactNode;
   subtitle?: ReactNode;
   showCloseButton?: boolean;
+  /**
+   * The close button's accessible name. Defaults to `close`, as it always read;
+   * a host passes `CHROME_COPY[locale].closePanel`.
+   */
+  closeLabel?: string;
   onClose?: () => void;
   dataTestId?: string;
   testID?: string;

package/src/components/feedback/Dialog/Dialog.native.tsx

@@ -87,6 +87,7 @@ export function Dialog(rawProps: DialogProps): React.JSX.Element {
     title,
     description,
     showCloseButton,
+    closeLabel,
     backdrop: _backdrop,
     persistent,
     glass,
@@ -144,6 +145,7 @@ export function Dialog(rawProps: DialogProps): React.JSX.Element {
                 title={title}
                 subtitle={description}
                 showCloseButton={showCloseButton}
+                closeLabel={closeLabel}
                 onClose={onClose}
                 dataTestId={testID}
               />

package/src/components/feedback/Dialog/Dialog.tsx

@@ -11,6 +11,7 @@ import Typography from '@mui/material/Typography/index.js';
 import { useTheme, type SxProps, type Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import { focusDialogOnEntered } from './Dialog.focus';
 import { hasSpacingSlot, withDialogDefaults } from './Dialog.helpers';
 import {
@@ -180,6 +181,7 @@ export const Dialog: React.FC<DialogProps> = (rawProps) => {
     title,
     description,
     showCloseButton,
+    closeLabel,
     backdrop,
     persistent,
     glass,
@@ -210,6 +212,7 @@ export const Dialog: React.FC<DialogProps> = (rawProps) => {
       title={title}
       subtitle={description}
       showCloseButton={showCloseButton}
+      closeLabel={closeLabel}
       onClose={onClose}
       dataTestId={testId}
     />
@@ -247,6 +250,7 @@ export const DialogHeader: React.FC<DialogHeaderProps> = ({
   title,
   subtitle,
   showCloseButton = true,
+  closeLabel = EN_US_UI_LABELS.common.close,
   onClose,
   ...others
 }) => {
@@ -296,7 +300,7 @@ export const DialogHeader: React.FC<DialogHeaderProps> = ({
       </Box>
       {showCloseButton && onClose && (
         <IconButton
-          aria-label="close"
+          aria-label={closeLabel}
           onClick={onClose}
           data-testid={childTestId(others, 'close', 'dialog')}
           sx={{

package/src/components/feedback/Dialog/DialogParts.native.tsx

@@ -23,6 +23,7 @@ import type {
   DialogContentProps,
   DialogHeaderProps,
 } from './Dialog.types.native';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import { Icon } from '../../../icons/Icon.native';
 import { childTestId, slotTestId, withoutTestIdProps } from '../../../platform/test-id';
 import { renderTextChildren } from '../../../platform/text-children';
@@ -67,12 +68,20 @@ export const dialogSubtitleStyle = (theme: UiTheme): TextStyle => ({
   marginTop: theme.spacing(DIALOG_TITLE.subtitleGapUnits),
 });
 
-function CloseButton({ onPress, testID }: { onPress: () => void; testID: string }): React.JSX.Element {
+function CloseButton({
+  onPress,
+  testID,
+  label,
+}: {
+  onPress: () => void;
+  testID: string;
+  label: string;
+}): React.JSX.Element {
   const theme = useUiTheme();
   return (
     <Pressable
       role="button"
-      aria-label="close"
+      aria-label={label}
       testID={testID}
       onPress={onPress}
       style={({ pressed }) => [
@@ -90,6 +99,7 @@ export function DialogHeader({
   title,
   subtitle,
   showCloseButton = true,
+  closeLabel = EN_US_UI_LABELS.common.close,
   onClose,
   ...others
 }: DialogHeaderProps): React.JSX.Element {
@@ -139,7 +149,11 @@ export function DialogHeader({
         {subtitle ? <RNText style={dialogSubtitleStyle(theme)}>{subtitle}</RNText> : null}
       </View>
       {showCloseButton && onClose ? (
-        <CloseButton onPress={onClose} testID={childTestId(others, 'close', 'dialog')} />
+        <CloseButton
+          onPress={onClose}
+          label={closeLabel}
+          testID={childTestId(others, 'close', 'dialog')}
+        />
       ) : null}
     </View>
   );

package/src/components/feedback/Sonner/Sonner.tsx

@@ -1,3 +1,4 @@
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import Box from '@mui/material/Box/index.js';
 import Portal from '@mui/material/Portal/index.js';
 import React, { createContext, useCallback, useContext, useRef,useState, useMemo } from 'react';
@@ -81,7 +82,12 @@ export const SonnerProvider: React.FC<{
    * word cannot be a per-call argument without changing what they are for.
    */
   dismissLabel: string;
-}> = ({ children, dismissLabel }) => {
+  /**
+   * The "+N more" line when more toasts are queued than fit. Defaults to the
+   * labels pack's `sonner.hiddenCount`.
+   */
+  hiddenCountLabel?: (hiddenCount: number) => string;
+}> = ({ children, dismissLabel, hiddenCountLabel }) => {
   const [toasts, setToasts] = useState<SonnerItem[]>([]);
   const toastCounter = useRef(0);
 
@@ -152,7 +158,7 @@ export const SonnerProvider: React.FC<{
   return (
     <SonnerContext.Provider value={contextValue}>
       {children}
-      <SonnerToaster toasts={toasts} onDismiss={dismiss} />
+      <SonnerToaster toasts={toasts} onDismiss={dismiss} hiddenCountLabel={hiddenCountLabel} />
     </SonnerContext.Provider>
   );
 };
@@ -171,7 +177,8 @@ import { SonnerToast } from './SonnerToast';
 const SonnerToaster: React.FC<{
   toasts: SonnerItem[];
   onDismiss: (id: string) => void;
-}> = ({ toasts, onDismiss }) => {
+  hiddenCountLabel?: (hiddenCount: number) => string;
+}> = ({ toasts, onDismiss, hiddenCountLabel = EN_US_UI_LABELS.sonner.hiddenCount }) => {
   // Limit visible toasts to prevent overflow
   const MAX_VISIBLE_TOASTS = 5;
   const visibleToasts = toasts.slice(-MAX_VISIBLE_TOASTS);
@@ -202,7 +209,7 @@ const SonnerToaster: React.FC<{
               color: 'text.secondary',
               pointerEvents: 'none' }}
           >
-            +{hiddenCount} more
+            {hiddenCountLabel(hiddenCount)}
           </Box>
         )}
         {visibleToasts.map((toast) => (
@@ -317,6 +324,9 @@ export const Toaster: React.FC<{
   richColors?: boolean;
   closeButton?: boolean;
   dismissLabel: string;
-}> = ({ children, dismissLabel }) => (
-  <SonnerProvider dismissLabel={dismissLabel}>{children}</SonnerProvider>
+  hiddenCountLabel?: (hiddenCount: number) => string;
+}> = ({ children, dismissLabel, hiddenCountLabel }) => (
+  <SonnerProvider dismissLabel={dismissLabel} hiddenCountLabel={hiddenCountLabel}>
+    {children}
+  </SonnerProvider>
 );

package/src/components/feedback/Sonner/SonnerToast.tsx

@@ -178,8 +178,10 @@ export const SonnerToast: React.FC<SonnerItem & { onDismiss: (id: string) => voi
           ...buildToastStyles(theme, variant, visible),
           p: 2,
           mb: 1,
-          minWidth: sxRem(356),
-          maxWidth: sxRem(400),
+          // 356–400 on desktop; on a phone, the viewport less the toaster's 16px
+          // inset on each side, so the stack never starts off the left edge.
+          minWidth: `min(${rem(theme, 356)}, calc(100vw - ${rem(theme, 32)}))`,
+          maxWidth: `min(${rem(theme, 400)}, calc(100vw - ${rem(theme, 32)}))`,
           display: 'flex',
           alignItems: 'flex-start',
           gap: 1.5,

package/src/components/feedback/StackedModal/StackedModal.parts.tsx

@@ -11,6 +11,7 @@ import Typography from '@mui/material/Typography/index.js';
 import { styled, useTheme } from '@mui/material/styles/index.js';
 import type { ElementType, FC, ReactNode } from 'react';
 import React from 'react';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import { rem } from '../../../tokens/relative';
 import { safeAreaBottom } from '../../../utils/viewport';
 import {
@@ -126,6 +127,8 @@ interface ModalHeaderProps {
   onBack: () => void;
   /** The back arrow's accessible name — it carries a glyph only. REQUIRED. */
   backLabel: string;
+  /** The ✕'s accessible name; `close` when the host names none. */
+  closeLabel?: string;
   onClose: () => void;
   /** Renders the bar without its ✕ — the panel's content owns the dismiss. */
   hideClose?: boolean;
@@ -142,9 +145,25 @@ interface ModalHeaderProps {
 const HeaderLeadingButton: FC<
   Pick<
     ModalHeaderProps,
-    'canGoBack' | 'onBack' | 'backLabel' | 'onClose' | 'hideClose' | 'rtl' | 'dataTestId'
+    | 'canGoBack'
+    | 'onBack'
+    | 'backLabel'
+    | 'closeLabel'
+    | 'onClose'
+    | 'hideClose'
+    | 'rtl'
+    | 'dataTestId'
   >
-> = ({ canGoBack, onBack, backLabel, onClose, hideClose, rtl, dataTestId }) => {
+> = ({
+  canGoBack,
+  onBack,
+  backLabel,
+  closeLabel = EN_US_UI_LABELS.common.close,
+  onClose,
+  hideClose,
+  rtl,
+  dataTestId,
+}) => {
   if (canGoBack) {
     return (
       <IconButton
@@ -166,7 +185,7 @@ const HeaderLeadingButton: FC<
       edge="start"
       color="inherit"
       onClick={onClose}
-      aria-label="close"
+      aria-label={closeLabel}
       size="small"
       data-testid={testId(dataTestId, 'close-button')}
     >
@@ -183,6 +202,7 @@ export const ModalHeader: FC<ModalHeaderProps> = ({
   onClose,
   hideClose,
   backLabel,
+  closeLabel,
   headerActions,
   rtl,
   dataTestId,
@@ -207,6 +227,7 @@ export const ModalHeader: FC<ModalHeaderProps> = ({
         canGoBack={canGoBack}
         onBack={onBack}
         backLabel={backLabel}
+        closeLabel={closeLabel}
         onClose={onClose}
         hideClose={hideClose}
         rtl={rtl}

package/src/components/feedback/StackedModal/StackedModal.tsx

@@ -78,7 +78,7 @@ const useUnnamedDialogWarning = (unnamed: boolean): void => {
 
 const StackedModalPanel: FC<ResolvedProps> = (props) => {
   const {
-    open, onClose, glass, navigationTitle, backLabel, hideClose, hideHeader, children, actions, modalId,
+    open, onClose, glass, navigationTitle, backLabel, closeLabel, hideClose, hideHeader, children, actions, modalId,
     closeOnClickOutside, closeOnEsc, loading, loadingText, fullScreen, maxWidth, size, panelWidth, disableBackdrop,
     disableFocusTrap, keepMounted, rtl, dataTestId,
     'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...otherProps
@@ -128,6 +128,7 @@ const StackedModalPanel: FC<ResolvedProps> = (props) => {
     >
       <ModalPanelContents
         backLabel={backLabel}
+        closeLabel={closeLabel}
         showSkeleton={showSkeleton}
         loadingText={loadingText}
         titleId={titleId}

package/src/components/feedback/StackedModal/StackedModal.types.ts

@@ -31,6 +31,11 @@ export interface PanelWidth {
 export interface StackedModalProps {
   /** The back arrow's accessible name — it carries a glyph only. REQUIRED. */
   backLabel: string;
+  /**
+   * The ✕'s accessible name — it carries a glyph only. Defaults to `close`, as
+   * it always read; a host passes `CHROME_COPY[locale].closePanel`.
+   */
+  closeLabel?: string;
   /** Controls the visibility of the modal */
   open: boolean;
   /** Callback fired when the component requests to be closed */

package/src/components/feedback/Toast/Toast.tsx

@@ -15,6 +15,7 @@ import Typography from '@mui/material/Typography/index.js';
 import { alpha, useTheme } from '@mui/material/styles/index.js';
 import React, { createContext, useCallback,useContext, useState } from 'react';
 
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import { rem } from '../../../tokens/relative';
 
 import type { ToastContainerProps, ToastContextType, ToastItem,ToastProps } from './Toast.types';
@@ -166,6 +167,7 @@ export const Toast: React.FC<ToastProps> = ({
   message,
   variant = 'default',
   closable = true,
+  closeLabel = EN_US_UI_LABELS.common.close,
   action,
   glass = false,
   onClose,
@@ -200,7 +202,7 @@ export const Toast: React.FC<ToastProps> = ({
           {closable && (
             <IconButton
               data-testid={`${dataTestId}-close`}
-              aria-label="close"
+              aria-label={closeLabel}
               color="inherit"
               size="small"
               onClick={handleClose}
@@ -218,6 +220,7 @@ export const Toast: React.FC<ToastProps> = ({
 };
 
 export const ToastContainer: React.FC<ToastContainerProps> = ({
+  closeLabel,
   position = 'top-right',
   maxToasts = 5,
   gap,
@@ -281,7 +284,7 @@ export const ToastContainer: React.FC<ToastContainerProps> = ({
             style={{ pointerEvents: 'auto' }}
           >
             <Box data-testid={`${dataTestId}-item-${index}`}>
-              <Toast {...toast} onClose={removeToast} dataTestId={toast.dataTestId || `toast-${index}`} />
+              <Toast closeLabel={closeLabel} {...toast} onClose={removeToast} dataTestId={toast.dataTestId || `toast-${index}`} />
             </Box>
           </Slide>
         ))}

package/src/components/feedback/Toast/Toast.types.ts

@@ -16,6 +16,9 @@ export interface ToastProps {
   duration?: number;
   persistent?: boolean;
   closable?: boolean;
+  /** The close button's accessible name; defaults to `UI_LABELS['en-US'].common.close`;
+   *  a host passes `CHROME_COPY[locale].dismissToast`. */
+  closeLabel?: string;
   action?: {
     label: string;
     onClick: () => void;
@@ -31,6 +34,8 @@ export interface ToastProps {
 }
 
 export interface ToastContainerProps {
+  /** Applied to every toast that sets no `closeLabel` of its own. */
+  closeLabel?: string;
   position?: ToastPosition;
   maxToasts?: number;
   gap?: number;

package/src/components/feedback/TutorialOverlay/TutorialOverlay.tsx

@@ -85,7 +85,9 @@ const Spotlight = styled(Box, {
 const TooltipContainer = styled(Paper, {
   shouldForwardProp: (prop) => prop !== 'placement' })<{ placement: string }>(({ theme, placement }) => ({
   position: 'absolute',
-  maxWidth: rem(theme, 360),
+  // 360 on desktop; on a phone, the viewport less the 16px the placement keeps
+  // clear on each side (`calculateTooltipPosition`).
+  maxWidth: `min(${rem(theme, 360)}, calc(100vw - ${rem(theme, 32)}))`,
   padding: theme.spacing(3),
   background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,
   backdropFilter: `blur(${rem(theme, 20)})`,

package/src/components/feedback/TutorialOverlay/TutorialStepBody.tsx

@@ -1,3 +1,4 @@
+import { EN_US_TUTORIAL_COPY } from '../../../en-US.feedback';
 import CompleteIcon from '@mui/icons-material/CheckCircle';
 import CloseIcon from '@mui/icons-material/Close';
 import PrevIcon from '@mui/icons-material/NavigateBefore';
@@ -43,6 +44,9 @@ const StepDot = styled(Box, {
 // Title, body copy, the step dots and the navigation row.
 
 // The step's controls: skip/restart on the left, previous/next on the right.
+// On a phone the row wraps rather than widening the card past the screen, and
+// the second group keeps to the right edge when it drops to its own line. From
+// `sm` up it stays one row, as it always was.
 const TutorialStepNav: React.FC<{
   copy: TutorialCopy;
   currentStep: number;
@@ -68,7 +72,9 @@ const TutorialStepNav: React.FC<{
         <Stack
           direction="row"
           spacing={1}
+          useFlexGap
           justifyContent="space-between"
+          sx={(theme) => ({ flexWrap: 'wrap', [theme.breakpoints.up('sm')]: { flexWrap: 'nowrap' } })}
           data-testid="tutorial-navigation"
         >
           <Stack direction="row" spacing={1}>
@@ -89,7 +95,7 @@ const TutorialStepNav: React.FC<{
             )}
           </Stack>
 
-          <Stack direction="row" spacing={1}>
+          <Stack direction="row" spacing={1} sx={{ ml: 'auto' }}>
             {stepCount > 1 && currentStep > 0 && (
               <Button
                 size="small"
@@ -153,8 +159,9 @@ const TutorialStepHeader: React.FC<{
   title: React.ReactNode;
   currentStep: number;
   allowSkip: boolean;
+  closeLabel: string;
   onSkip: () => void;
-}> = ({ title, currentStep, allowSkip, onSkip }) => (
+}> = ({ title, currentStep, allowSkip, closeLabel, onSkip }) => (
         <Box
           sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}
         >
@@ -172,6 +179,7 @@ const TutorialStepHeader: React.FC<{
               size="small"
               onClick={onSkip}
               sx={{ ml: 1, mt: -1, mr: -1 }}
+              aria-label={closeLabel}
               data-testid="tutorial-close-button"
             >
               <CloseIcon fontSize="small" />
@@ -213,6 +221,7 @@ export const TutorialStepBody: React.FC<{
           title={step.title}
           currentStep={currentStep}
           allowSkip={allowSkip}
+          closeLabel={copy.close ?? EN_US_TUTORIAL_COPY.close}
           onSkip={onSkip}
         />
 
@@ -227,7 +236,7 @@ export const TutorialStepBody: React.FC<{
 
         {showProgress && (
           <Typography variant="caption" color="text.secondary" align="center">
-            {currentStep + 1} of {stepCount}
+            {(copy.progress ?? EN_US_TUTORIAL_COPY.progress)(currentStep + 1, stepCount)}
           </Typography>
         )}
 

package/src/components/form/AddressAutocomplete/AddressAutocomplete.helpers.ts

@@ -1,3 +1,5 @@
+import { EN_US_ADDRESS_AUTOCOMPLETE_COPY } from '../../../en-US.form';
+import { resolveLabels } from '../../../utils/resolve-labels';
 import type { AddressAutocompleteProps, AddressOptionValue } from './AddressAutocomplete.types';
 
 // Below this the field clears its options rather than querying Places.
@@ -5,8 +7,6 @@ export const MIN_QUERY_LENGTH = 2;
 
 type DefaultedKeys =
   | 'variant'
-  | 'label'
-  | 'placeholder'
   | 'floating'
   | 'error'
   | 'disabled'
@@ -20,8 +20,6 @@ export type ResolvedAddressProps = AddressAutocompleteProps &
 
 const ADDRESS_AUTOCOMPLETE_DEFAULTS: Pick<AddressAutocompleteProps, DefaultedKeys> = {
   variant: 'outlined',
-  label: 'Address',
-  placeholder: 'Enter an address',
   floating: false,
   error: false,
   disabled: false,
@@ -40,8 +38,16 @@ const definedProps = (props: AddressAutocompleteProps): Partial<AddressAutocompl
 
 // Applied as a merge rather than destructuring defaults, which would otherwise
 // put ten branches into the component's own complexity budget.
-export const resolveAddressProps = (props: AddressAutocompleteProps): ResolvedAddressProps =>
-  ({ ...ADDRESS_AUTOCOMPLETE_DEFAULTS, ...definedProps(props) }) as ResolvedAddressProps;
+export const resolveAddressProps = (props: AddressAutocompleteProps): ResolvedAddressProps => {
+  // The label and placeholder come from the host's pack, then the English one.
+  const text = resolveLabels(EN_US_ADDRESS_AUTOCOMPLETE_COPY, props.copy);
+  return {
+    ...ADDRESS_AUTOCOMPLETE_DEFAULTS,
+    label: text.label,
+    placeholder: text.placeholder,
+    ...definedProps(props),
+  } as ResolvedAddressProps;
+};
 
 export const addressOptionLabel = (option: AddressOptionValue): string => {
   if (typeof option === 'string') return option;

package/src/components/form/AddressAutocomplete/AddressAutocomplete.hooks.ts

@@ -1,5 +1,8 @@
+import type { AddressAutocompleteCopy } from '../../../copy/form';
+import { EN_US_ADDRESS_AUTOCOMPLETE_COPY } from '../../../en-US.form';
+import { resolveLabels } from '../../../utils/resolve-labels';
 import type React from 'react';
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
 import type {
   AddressAutocompleteProps,
@@ -31,7 +34,9 @@ export const useAddressAutocomplete = ({
   googleMapsApiKey,
   restrictions,
   onSelect,
+  copy,
 }: {
+  copy: AddressAutocompleteCopy;
   defaultValue: string;
   googleMapsApiKey: string;
   restrictions: AddressAutocompleteProps['restrictions'];
@@ -40,8 +45,13 @@ export const useAddressAutocomplete = ({
   const [inputValue, setInputValue] = useState(defaultValue);
   const [loading, setLoading] = useState(false);
   const [apiError, setApiError] = useState<string | null>(null);
+  // Memoised so the selection and location callbacks keep their identity.
+  const messages = useMemo(() => resolveLabels(EN_US_ADDRESS_AUTOCOMPLETE_COPY, copy), [copy]);
 
-  const { isLoaded, error: mapsError, services, useMockData } = useGoogleMapsAPI(googleMapsApiKey);
+  const { isLoaded, error: mapsError, services, useMockData } = useGoogleMapsAPI(googleMapsApiKey, {
+    loadFailed: messages.mapsApiLoadFailed,
+    initFailed: messages.mapsServicesInitFailed,
+  });
 
   // A resolved address both notifies the caller and becomes the field's text.
   const applyAddress = useCallback(
@@ -60,6 +70,7 @@ export const useAddressAutocomplete = ({
     setInputValue,
     setLoading,
     setApiError,
+    fetchFailed: messages.fetchSuggestionsFailed,
   });
 
   const handleSelect = useAddressSelection({
@@ -69,6 +80,7 @@ export const useAddressAutocomplete = ({
     setApiError,
     onSelect,
     applyAddress,
+    messages,
   });
 
   const handleGetCurrentLocation = useCurrentLocation({
@@ -77,6 +89,7 @@ export const useAddressAutocomplete = ({
     setLoading,
     setApiError,
     applyAddress,
+    messages,
   });
 
   return {

package/src/components/form/AddressAutocomplete/AddressAutocomplete.tsx

@@ -19,6 +19,7 @@ export const AddressAutocomplete: FC<AddressAutocompleteProps> = (componentProps
     googleMapsApiKey,
     restrictions,
     onSelect,
+    copy: resolved.copy,
   });
 
   // Until the API answers there is nothing to autocomplete against, so the field

package/src/components/form/AddressAutocomplete/AddressAutocompleteField.tsx

@@ -1,3 +1,5 @@
+import { EN_US_ADDRESS_AUTOCOMPLETE_COPY } from '../../../en-US.form';
+import { resolveLabels } from '../../../utils/resolve-labels';
 import Alert from '@mui/material/Alert/index.js';
 import Autocomplete from '@mui/material/Autocomplete/index.js';
 import Box from '@mui/material/Box/index.js';
@@ -38,7 +40,9 @@ export const AddressAutocompleteField: FC<AddressAutocompleteFieldProps> = ({
   handleInputChange,
   handleSelect,
   handleGetCurrentLocation,
-}) => (
+}) => {
+  const text = resolveLabels(EN_US_ADDRESS_AUTOCOMPLETE_COPY, copy);
+  return (
   <Box data-testid="address-autocomplete-container">
     <Autocomplete
       freeSolo
@@ -47,13 +51,14 @@ export const AddressAutocompleteField: FC<AddressAutocompleteFieldProps> = ({
       onInputChange={handleInputChange}
       onChange={handleSelect}
       loading={loading}
+      loadingText={text.loadingSuggestions}
       disabled={disabled}
       fullWidth={fullWidth}
       getOptionLabel={addressOptionLabel}
       isOptionEqualToValue={isSameAddressOption}
       PaperComponent={AddressSuggestionsPaper}
       noOptionsText={
-        inputValue.length <= MIN_QUERY_LENGTH ? 'Type at least 3 characters' : 'No addresses found'
+        inputValue.length <= MIN_QUERY_LENGTH ? text.typeToSearch : text.noAddressesFound
       }
       renderOption={({ key, ...optionProps }, option, state) => (
         <AddressOption
@@ -87,4 +92,5 @@ export const AddressAutocompleteField: FC<AddressAutocompleteFieldProps> = ({
       </Alert>
     )}
   </Box>
-);
+  );
+};