@12-apps/ui 6.78.4 → 6.79.0

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

@@ -16,6 +16,7 @@ interface PredictionSink {
   setOptions: (options: AddressOptionValue[]) => void;
   setLoading: (loading: boolean) => void;
   setApiError: (message: string | null) => void;
+  fetchFailed: string;
 }
 
 const predictionRequest = (
@@ -55,7 +56,7 @@ const fetchLivePredictions = (
     sink.setApiError(
       status === google.maps.places.PlacesServiceStatus.ZERO_RESULTS
         ? null
-        : 'Failed to fetch address suggestions',
+        : sink.fetchFailed,
     );
   });
 };
@@ -68,7 +69,9 @@ export const useAddressPredictions = ({
   setInputValue,
   setLoading,
   setApiError,
+  fetchFailed,
 }: {
+  fetchFailed: string;
   isLoaded: boolean;
   services: GoogleMapsService;
   restrictions: Restrictions;
@@ -81,8 +84,8 @@ export const useAddressPredictions = ({
   const debounceTimeoutRef = useRef<number | undefined>(undefined);
 
   const sink = useMemo<PredictionSink>(
-    () => ({ setOptions, setLoading, setApiError }),
-    [setLoading, setApiError],
+    () => ({ setOptions, setLoading, setApiError, fetchFailed }),
+    [setLoading, setApiError, fetchFailed],
   );
 
   const debouncedAutocomplete = useCallback(

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

@@ -1,3 +1,4 @@
+import type { AddressAutocompleteCopy } from '../../../copy/form';
 import type React from 'react';
 import { useCallback } from 'react';
 
@@ -15,6 +16,7 @@ const MOCK_DETAILS_DELAY_MS = 50;
 const PLACE_DETAIL_FIELDS = ['formatted_address', 'address_components', 'geometry'];
 
 interface SelectionSink {
+  messages: Required<AddressAutocompleteCopy>;
   setLoading: (loading: boolean) => void;
   setApiError: (message: string | null) => void;
   applyAddress: (address: AddressDetails) => void;
@@ -26,7 +28,7 @@ const resolveMockPlace = (value: AddressPrediction, sink: SelectionSink) => {
 
     const place = MOCK_PLACE_DETAILS[value.place_id];
     if (!place) {
-      sink.setApiError('Address details not found');
+      sink.setApiError(sink.messages.addressDetailsNotFound);
       return;
     }
 
@@ -54,7 +56,7 @@ const resolveLivePlace = (
     sink.setLoading(false);
 
     if (status !== google.maps.places.PlacesServiceStatus.OK || !place) {
-      sink.setApiError('Failed to get address details');
+      sink.setApiError(sink.messages.addressDetailsFailed);
       return;
     }
 
@@ -75,7 +77,9 @@ export const useAddressSelection = ({
   setApiError,
   onSelect,
   applyAddress,
+  messages,
 }: {
+  messages: Required<AddressAutocompleteCopy>;
   services: GoogleMapsService;
   useMockData: boolean;
   setLoading: (loading: boolean) => void;
@@ -95,7 +99,7 @@ export const useAddressSelection = ({
       if (!value) return;
 
       setLoading(true);
-      const sink: SelectionSink = { setLoading, setApiError, applyAddress };
+      const sink: SelectionSink = { setLoading, setApiError, applyAddress, messages };
 
       if (useMockData && 'place_id' in value) {
         resolveMockPlace(value, sink);
@@ -109,5 +113,5 @@ export const useAddressSelection = ({
 
       resolveLivePlace(services.placesService, value, sink);
     },
-    [services, useMockData, setLoading, setApiError, onSelect, applyAddress],
+    [services, useMockData, setLoading, setApiError, onSelect, applyAddress, messages],
   );

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

@@ -1,3 +1,4 @@
+import type { AddressAutocompleteCopy } from '../../../copy/form';
 import { useCallback } from 'react';
 
 import { coordinatesOf, toAddressDetails } from './AddressAutocomplete.mapper';
@@ -14,6 +15,7 @@ const GEOLOCATION_OPTIONS: PositionOptions = {
 };
 
 interface LocationSink {
+  messages: Required<AddressAutocompleteCopy>;
   setLoading: (loading: boolean) => void;
   setApiError: (message: string | null) => void;
   applyAddress: (address: AddressDetails) => void;
@@ -27,13 +29,13 @@ const resolveMockLocation = (sink: LocationSink) => {
 
     const mockLocation = MOCK_ADDRESSES[0];
     if (!mockLocation) {
-      sink.setApiError('No mock location available');
+      sink.setApiError(sink.messages.noMockLocation);
       return;
     }
 
     const mockDetails = MOCK_PLACE_DETAILS[mockLocation.place_id];
     if (!mockDetails) {
-      sink.setApiError('Mock location details not found');
+      sink.setApiError(sink.messages.mockLocationNotFound);
       return;
     }
 
@@ -57,7 +59,7 @@ const geocodePosition =
 
       const place = status === 'OK' ? results?.[0] : undefined;
       if (!place) {
-        sink.setApiError('Unable to retrieve address for current location');
+        sink.setApiError(sink.messages.locationAddressFailed);
         return;
       }
 
@@ -78,7 +80,9 @@ export const useCurrentLocation = ({
   setLoading,
   setApiError,
   applyAddress,
+  messages,
 }: {
+  messages: Required<AddressAutocompleteCopy>;
   services: GoogleMapsService;
   useMockData: boolean;
   setLoading: (loading: boolean) => void;
@@ -87,11 +91,11 @@ export const useCurrentLocation = ({
 }) =>
   useCallback(() => {
     if (!navigator.geolocation) {
-      setApiError('Geolocation is not supported by this browser');
+      setApiError(messages.geolocationUnsupported);
       return;
     }
 
-    const sink: LocationSink = { setLoading, setApiError, applyAddress };
+    const sink: LocationSink = { setLoading, setApiError, applyAddress, messages };
 
     if (useMockData) {
       setLoading(true);
@@ -100,7 +104,7 @@ export const useCurrentLocation = ({
     }
 
     if (!services.geocoder) {
-      setApiError('Geocoding service not available');
+      setApiError(messages.geocoderUnavailable);
       return;
     }
 
@@ -109,8 +113,8 @@ export const useCurrentLocation = ({
       geocodePosition(services.geocoder, sink),
       () => {
         setLoading(false);
-        setApiError('Unable to retrieve your location');
+        setApiError(messages.locationFailed);
       },
       GEOLOCATION_OPTIONS,
     );
-  }, [services, useMockData, setLoading, setApiError, applyAddress]);
+  }, [services, useMockData, setLoading, setApiError, applyAddress, messages]);

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

@@ -6,7 +6,11 @@ export interface GoogleMapsService {
   geocoder: google.maps.Geocoder | null;
 }
 
-export const useGoogleMapsAPI = (apiKey: string) => {
+export const useGoogleMapsAPI = (
+  apiKey: string,
+  messages: { loadFailed: string; initFailed: string },
+) => {
+  const { loadFailed, initFailed } = messages;
   const [isLoaded, setIsLoaded] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [useMockData, setUseMockData] = useState(false);
@@ -42,7 +46,7 @@ export const useGoogleMapsAPI = (apiKey: string) => {
     };
     
     script.onerror = () => {
-      setError('Failed to load Google Maps API');
+      setError(loadFailed);
     };
 
     document.head.appendChild(script);
@@ -53,7 +57,7 @@ export const useGoogleMapsAPI = (apiKey: string) => {
         document.head.removeChild(script);
       }
     };
-  }, [apiKey]);
+  }, [apiKey, loadFailed, initFailed]);
 
   const initializeServices = () => {
     try {
@@ -67,7 +71,7 @@ export const useGoogleMapsAPI = (apiKey: string) => {
         setError(null);
       }
     } catch {
-      setError('Failed to initialize Google Maps services');
+      setError(initFailed);
     }
   };
 

package/src/components/form/Button/Button.native.loading.tsx

@@ -3,6 +3,7 @@ import { ActivityIndicator, Platform, StyleSheet, View } from 'react-native';
 import type { TextStyle } from 'react-native';
 
 import { BUTTON_SPINNER_SIZE } from './Button.metrics';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import { renderTextChildren } from '../../../platform/text-children';
 
 /**
@@ -17,14 +18,22 @@ import { renderTextChildren } from '../../../platform/text-children';
  * comes from react-native's ActivityIndicator. It used to REPLACE the label, so
  * a loading button had no accessible name (FUT-3646).
  */
-export function Spinner({ color, testID }: { color: string; testID: string }): React.JSX.Element {
+export function Spinner({
+  color,
+  testID,
+  label = EN_US_UI_LABELS.common.loading,
+}: {
+  color: string;
+  testID: string;
+  label?: string;
+}): React.JSX.Element {
   return (
     <View style={styles.spinner}>
       <ActivityIndicator
         size={Platform.OS === 'ios' ? 'small' : BUTTON_SPINNER_SIZE}
         color={color}
         testID={testID}
-        accessibilityLabel="loading"
+        accessibilityLabel={label}
       />
     </View>
   );

package/src/components/form/Button/Button.native.tsx

@@ -294,7 +294,7 @@ function buttonLook(theme: UiTheme, props: ResolvedProps): ButtonLook {
 export const Button = React.forwardRef<View, ButtonProps>((rawProps, ref) => {
   const resolved = resolveButtonProps(rawProps);
   // `ripple` is web-only: kept out of `others` so it never reaches the Pressable (see overflowOf).
-  const { loading, icon, iconPosition, pulse, ripple: _ripple, children, onClick, onPress, ...others } = resolved;
+  const { loading, loadingLabel, icon, iconPosition, pulse, ripple: _ripple, children, onClick, onPress, ...others } = resolved;
   const theme = useUiTheme();
   const look = buttonLook(theme, resolved);
 
@@ -336,7 +336,7 @@ export const Button = React.forwardRef<View, ButtonProps>((rawProps, ref) => {
         {children}
       </Label>
       {iconPosition === 'right' ? iconNode : null}
-      {loading ? <Spinner color={look.label.color as string} testID={idFor('loading')} /> : null}
+      {loading ? <Spinner color={look.label.color as string} testID={idFor('loading')} label={loadingLabel} /> : null}
     </Pressable>
   );
 });

package/src/components/form/Button/Button.types.native.ts

@@ -23,5 +23,7 @@ export type ButtonProps = ButtonBaseProps &
     onPress?: (event: GestureResponderEvent) => void;
     onFocus?: (event: NativeSyntheticEvent<TargetedEvent>) => void;
     onBlur?: (event: NativeSyntheticEvent<TargetedEvent>) => void;
+    /** The busy spinner's accessible name; defaults to the labels pack's `loading`. */
+    loadingLabel?: string;
     style?: StyleProp<ViewStyle>;
   };

package/src/components/form/Checkbox/Checkbox.native.tsx

@@ -25,6 +25,7 @@ import {
   resolveCheckboxSize,
 } from './Checkbox.metrics';
 import type { CheckboxProps } from './Checkbox.types.native';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import { Icon } from '../../../icons/Icon.native';
 import type { IconName } from '../../../icons/Icon.types';
 import { webKeyDown } from '../../../platform/aria';
@@ -83,6 +84,7 @@ interface BoxProps {
   indeterminate: boolean;
   inactive: boolean;
   loading: boolean;
+  loadingLabel: string;
   glow: boolean;
   ripple: boolean;
   variant: keyof typeof CHECKBOX_VARIANT;
@@ -127,7 +129,7 @@ function CheckboxBox(props: BoxProps): React.JSX.Element {
           style={styles.spinner}
           size={CHECKBOX_SPINNER.size}
           color={theme.palette.primary.main}
-          accessibilityLabel="loading"
+          accessibilityLabel={props.loadingLabel}
         />
       ) : null}
     </Pressable>
@@ -167,7 +169,7 @@ function helperStyle(theme: UiTheme, error: boolean): TextStyle {
  */
 export const Checkbox = React.forwardRef<View, CheckboxProps>((rawProps, ref) => {
   const {
-    variant, label, error, helperText, loading, ripple, glow, pulse: _pulse,
+    variant, label, error, helperText, loading, loadingLabel = EN_US_UI_LABELS.common.loading, ripple, glow, pulse: _pulse,
     indeterminate, disabled, size, checked, defaultChecked,
     onChange, onClick, onPress, style, ...others
   } = resolveCheckboxProps(rawProps);
@@ -197,6 +199,7 @@ export const Checkbox = React.forwardRef<View, CheckboxProps>((rawProps, ref) =>
       indeterminate={Boolean(indeterminate)}
       inactive={inactive}
       loading={Boolean(loading)}
+      loadingLabel={loadingLabel}
       glow={glow}
       ripple={ripple}
       variant={variant}

package/src/components/form/Checkbox/Checkbox.types.native.ts

@@ -21,5 +21,7 @@ export type CheckboxProps = CheckboxBaseProps &
     /** Both spellings fire, as `Button`'s do. */
     onClick?: (event: GestureResponderEvent) => void;
     onPress?: (event: GestureResponderEvent) => void;
+    /** The busy spinner's accessible name; defaults to the labels pack's `loading`. */
+    loadingLabel?: string;
     style?: StyleProp<ViewStyle>;
   };

package/src/components/form/Input/Input.native.tsx

@@ -20,6 +20,7 @@ import { fieldLook, helperStyle, labelStyle, type FieldState } from './Input.loo
 import { ADORNMENT_GAP, INPUT_GLOW, INPUT_LOADING } from './Input.metrics';
 import type { InputProps } from './Input.types.native';
 import { webAria, webClick, webDisabled } from '../../../platform/aria';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import { childTestId, resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
 import { fieldHeightPx } from '../../../tokens/field-height.core';
 import { useUiTheme } from '../../../provider/use-ui-theme.native';
@@ -101,13 +102,21 @@ function Line({
 }
 
 /** MUI's 20px `CircularProgress` in the end slot; the platform's own arc on a device. */
-function Spinner({ color, testID }: { color: string; testID: string }): React.JSX.Element {
+function Spinner({
+  color,
+  testID,
+  label,
+}: {
+  color: string;
+  testID: string;
+  label: string;
+}): React.JSX.Element {
   return (
     <ActivityIndicator
       testID={testID}
       size={Platform.OS === 'ios' ? 'small' : INPUT_LOADING.spinnerSize}
       color={color}
-      accessibilityLabel="loading"
+      accessibilityLabel={label}
     />
   );
 }
@@ -153,7 +162,7 @@ function useFocusState(
 export const Input = React.forwardRef<RNTextInput, InputProps>((rawProps, ref) => {
   const {
     variant, size, type, label, error, helperText, startAdornment, endAdornment,
-    fullWidth, floating: _floating, glow, pulse, loading, disabled, required,
+    fullWidth, floating: _floating, glow, pulse, loading, loadingLabel = EN_US_UI_LABELS.common.loading, disabled, required,
     style, inputStyle, onClick, onPress, onFocus, onBlur, ...others
   } = resolveInputProps(rawProps);
 
@@ -211,7 +220,7 @@ export const Input = React.forwardRef<RNTextInput, InputProps>((rawProps, ref) =
           {...withoutTestIdProps(others)}
         />
         <Slot side="end">
-          {loading ? <Spinner color={theme.palette.primary.main} testID={idFor('loading')} /> : endAdornment}
+          {loading ? <Spinner color={theme.palette.primary.main} testID={idFor('loading')} label={loadingLabel} /> : endAdornment}
         </Slot>
       </View>
       <Line text={helperText} style={helperStyle(theme, variant, size, state)} />

package/src/components/form/Input/Input.types.native.ts

@@ -25,5 +25,7 @@ export type InputProps = InputBaseProps &
     onClick?: (event: GestureResponderEvent) => void;
     onPress?: (event: GestureResponderEvent) => void;
     style?: StyleProp<ViewStyle>;
+    /** The busy spinner's accessible name; defaults to the labels pack's `loading`. */
+    loadingLabel?: string;
     inputStyle?: StyleProp<TextStyle>;
   };

package/src/components/form/PhoneInput/PhoneInput.md

@@ -13,7 +13,7 @@ An international phone number input component with country selection, automatic
 | placeholder  | string                            | 'Enter phone number' | Placeholder text                                |
 | icon         | React.ReactNode                   | PhoneIcon            | Custom end adornment icon                       |
 | defaultValue | string                            | ''                   | Initial phone number value                      |
-| countryCode  | CountryCode                       | 'US'                 | Default selected country                        |
+| countryCode  | CountryCode                       | 'BR'                 | Default selected country                        |
 | floating     | boolean                           | false                | Floating label style                            |
 | onChange     | function                          | undefined            | Callback with value, validity, and country code |
 | helper       | string                            | undefined            | Helper text below input                         |
@@ -349,7 +349,7 @@ play: async ({ canvasElement }) => {
 
 #### `countryCode`
 - **Type:** `CountryCode` (e.g., `'US'`, `'GB'`)
-- **Default:** `'US'`
+- **Default:** `'BR'`
 - **Impact:** Initial country selection
 
 #### `defaultValue`

package/src/components/form/PhoneInput/PhoneInput.tsx

@@ -10,9 +10,9 @@ import TextField from '@mui/material/TextField/index.js';
 import Typography from '@mui/material/Typography/index.js';
 import { alpha, styled, useTheme } from '@mui/material/styles/index.js';
 import type { FC} from 'react';
-import React, {  } from 'react';
+import React, { useMemo } from 'react';
 
-import { countries } from './countries';
+import { countriesByDisplayName, countryDisplayName } from './countries';
 import { usePhoneInput } from './PhoneInput.hooks';
 import type { CountryData,PhoneInputProps } from './PhoneInput.types';
 import type { PhoneInputCopy } from '../../../copy';
@@ -144,11 +144,10 @@ const PhoneField: React.FC<{
 
 const PHONE_INPUT_DEFAULTS = {
   variant: 'outlined',
-  label: 'Phone Number',
-  placeholder: 'Enter phone number',
   icon: <PhoneIcon />,
   defaultValue: '',
-  countryCode: 'US',
+  // The owner's market: a host that names no country starts at Brazil.
+  countryCode: 'BR',
   floating: false,
   error: false,
   disabled: false,
@@ -163,6 +162,12 @@ const definedProps = (props: PhoneInputProps): Partial<PhoneInputProps> =>
     Object.entries(props).filter(([, value]) => value !== undefined),
   ) as Partial<PhoneInputProps>;
 
+// The label and placeholder a host passes as props win; then the copy pack's;
+// then the English the field has always shown.
+const copyDefaults = (copy: PhoneInputCopy): Pick<PhoneInputProps, 'label' | 'placeholder'> => ({
+  label: copy.label ?? 'Phone Number',
+  placeholder: copy.placeholder ?? 'Enter phone number' });
+
 const CountryAdornment: React.FC<{
   country?: CountryData;
   menuOpen: boolean;
@@ -227,8 +232,10 @@ const CountryPicker: React.FC<{
   selectedCode?: CountryData['code'];
   onClose: () => void;
   onSelect: (country: CountryData) => void;
-}> = ({ anchorEl, selectedCode, onClose, onSelect }) => {
+  countryName?: PhoneInputCopy['countryName'];
+}> = ({ anchorEl, selectedCode, onClose, onSelect, countryName }) => {
   const theme = useTheme();
+  const listed = useMemo(() => countriesByDisplayName(countryName), [countryName]);
 
   return (
         <CountryMenu
@@ -243,7 +250,7 @@ const CountryPicker: React.FC<{
             horizontal: 'left' }}
           data-testid="country-menu"
         >
-          {countries.map((country) => (
+          {listed.map((country) => (
             <MenuItem
               key={country.code}
               onClick={() => onSelect(country)}
@@ -259,7 +266,7 @@ const CountryPicker: React.FC<{
                 </Typography>
               </ListItemIcon>
               <ListItemText
-                primary={country.name}
+                primary={country.displayName}
                 secondary={country.dial}
                 primaryTypographyProps={{ fontSize: rem(theme, 14.4) }}
                 secondaryTypographyProps={{ fontSize: rem(theme, 12.8) }}
@@ -315,7 +322,10 @@ export const PhoneInput: FC<PhoneInputProps> = (props) => {
     errorMessage,
     disabled,
     required,
-    fullWidth } = { ...PHONE_INPUT_DEFAULTS, ...definedProps(props) };
+    fullWidth } = {
+    ...PHONE_INPUT_DEFAULTS,
+    ...copyDefaults(copy),
+    ...definedProps(props) };
   const {
     value,
     selectedCountry,
@@ -337,7 +347,7 @@ export const PhoneInput: FC<PhoneInputProps> = (props) => {
     value,
     isFocused,
     helper,
-    countryName: selectedCountry?.name,
+    countryName: selectedCountry && countryDisplayName(selectedCountry, copy.countryName),
     copy });
 
   const TextFieldComponent = variant === 'glass' ? GlassTextField : FieldTextField;
@@ -371,6 +381,7 @@ export const PhoneInput: FC<PhoneInputProps> = (props) => {
         selectedCode={selectedCountry?.code}
         onClose={handleCountryClose}
         onSelect={handleCountrySelect}
+        countryName={copy.countryName}
       />
     </Box>
   );

package/src/components/form/PhoneInput/PhoneInput.types.ts

@@ -13,6 +13,7 @@ export interface PhoneInputProps {
   placeholder?: string;
   icon?: React.ReactNode;
   defaultValue?: string;
+  /** The country the picker starts on. @default 'BR' */
   countryCode?: CountryCode;
   floating?: boolean;
   onChange?: (value: string, isValid: boolean, countryCode?: CountryCode) => void;

package/src/components/form/PhoneInput/countries.ts

@@ -2,7 +2,8 @@ import type { CountryCode } from 'libphonenumber-js';
 
 import type { CountryData } from './PhoneInput.types';
 
-// Dial codes and flags for the countries the input offers, sorted by name.
+// Dial codes and flags for the countries the input offers, sorted by name. The
+// `name` is the English one; the picker shows `copy.countryName` when a pack has it.
 export const countries: CountryData[] = [
   { code: 'US' as CountryCode, name: 'United States', dial: '+1', flag: '🇺🇸' },
   { code: 'GB' as CountryCode, name: 'United Kingdom', dial: '+44', flag: '🇬🇧' },
@@ -52,3 +53,19 @@ export const countries: CountryData[] = [
   { code: 'AE' as CountryCode, name: 'United Arab Emirates', dial: '+971', flag: '🇦🇪' },
   { code: 'SA' as CountryCode, name: 'Saudi Arabia', dial: '+966', flag: '🇸🇦' },
 ].sort((a, b) => a.name.localeCompare(b.name));
+
+/** A country's name as the host's pack spells it, else the English one above. */
+export const countryDisplayName = (
+  country: CountryData,
+  countryName?: (code: string, englishName: string) => string,
+): string => (countryName ? countryName(country.code, country.name) : country.name);
+
+/** The picker's list, sorted by the names it actually shows. */
+export const countriesByDisplayName = (
+  countryName?: (code: string, englishName: string) => string,
+): Array<CountryData & { displayName: string }> =>
+  countryName
+    ? countries
+        .map((country) => ({ ...country, displayName: countryDisplayName(country, countryName) }))
+        .sort((a, b) => a.displayName.localeCompare(b.displayName))
+    : countries.map((country) => ({ ...country, displayName: country.name }));

package/src/components/form/RichTextEditor/RichTextEditor.dom.ts

@@ -1,3 +1,4 @@
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 // Selection surgery for the editor. Each of these mutates the DOM around a
 // Range and then rebuilds the selection, so the caret ends up where the user
 // expects rather than at the start of the document.
@@ -85,11 +86,11 @@ const removeFromList = (block: globalThis.Element) => {
   );
 };
 
-const wrapInList = (range: globalThis.Range, listType: 'ol' | 'ul') => {
+const wrapInList = (range: globalThis.Range, listType: 'ol' | 'ul', listItemText: string) => {
   const list = document.createElement(listType);
   const listItem = document.createElement('li');
 
-  listItem.appendChild(document.createTextNode(range.toString() || 'List item'));
+  listItem.appendChild(document.createTextNode(range.toString() || listItemText));
   list.appendChild(listItem);
 
   range.deleteContents();
@@ -109,6 +110,7 @@ export const toggleList = (
   range: globalThis.Range,
   listType: 'ol' | 'ul',
   editor: HTMLElement | null,
+  listItemText: string = EN_US_UI_LABELS.richTextEditor.listItem,
 ) => {
   if (!editor) return;
 
@@ -120,5 +122,5 @@ export const toggleList = (
     return;
   }
 
-  wrapInList(range, listType);
+  wrapInList(range, listType, listItemText);
 };

package/src/components/form/RichTextEditor/RichTextEditor.format.ts

@@ -26,7 +26,9 @@ export const applyFormatToRange = ({
   value,
   range,
   editor,
+  listItemText,
 }: {
+  listItemText?: string;
   formatType: string;
   value?: string;
   range: globalThis.Range;
@@ -40,7 +42,7 @@ export const applyFormatToRange = ({
 
   const listTag = LIST_TAGS[formatType];
   if (listTag) {
-    toggleList(range, listTag, editor);
+    toggleList(range, listTag, editor, listItemText);
     return;
   }
 

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

@@ -96,6 +96,7 @@ export const useRichTextEditor = ({
   disabled,
   readOnly,
   maxLength,
+  listItemText,
 }: {
   value?: string;
   onChange?: (value: string) => void;
@@ -104,6 +105,7 @@ export const useRichTextEditor = ({
   disabled?: boolean;
   readOnly?: boolean;
   maxLength?: number;
+  listItemText?: string;
 }) => {
   const editorRef = useRef<HTMLDivElement>(null);
   const { content, handleContentChange } = useEditorContent({
@@ -130,12 +132,13 @@ export const useRichTextEditor = ({
         value: formatValue,
         range: selection.getRangeAt(0),
         editor: editorRef.current,
+        listItemText,
       });
 
       handleContentChange();
       editorRef.current.focus();
     },
-    [disabled, readOnly, handleContentChange],
+    [disabled, readOnly, handleContentChange, listItemText],
   );
 
   const sanitizedContent = sanitize(content);