@oxy.so/bloom 4.33.0 → 4.34.0

package/src/dialog/DialogHeader.tsx

@@ -46,6 +46,7 @@ import { useDialogControl } from './context';
 import { useTheme } from '../theme/use-theme';
 import { H1, Text } from '../typography';
 import type { DialogHeaderConfig } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 export type { DialogHeaderConfig } from './types';
 
@@ -367,9 +368,10 @@ function HeaderOverflowMenu({
 }): React.ReactElement {
   // Own the open state so an item press can close the popover before acting.
   const [open, setOpen] = useState(false);
+  const common = useCommonMessages();
   return (
     <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild label="More">
+      <PopoverTrigger asChild label={common.more}>
         <FrostedIconButton
           size="sm"
           icon={(iconProps) => <RiMoreFill {...iconProps}
@@ -379,7 +381,7 @@ function HeaderOverflowMenu({
         />
       </PopoverTrigger>
       <PopoverContent
-        label="More actions"
+        label={common.moreActions}
         align="end">
         {items.map((action) => (
           <Item
@@ -447,6 +449,7 @@ function HeaderProgressBar({
   onImage: boolean;
 }): React.ReactElement {
   const theme = useTheme();
+  const common = useCommonMessages();
   const fraction = total > 0 ? Math.min(1, Math.max(0, step / total)) : 0;
   return (
     <View
@@ -464,8 +467,8 @@ function HeaderProgressBar({
       // means the same thing — so unlike `Slider` and `DotGridMeter` it takes
       // no prop. `aria-valuetext` carries the reading, since the raw number is
       // announced as a percentage otherwise.
-      accessibilityLabel="Progress"
-      aria-valuetext={`Step ${step} of ${total}`}
+      accessibilityLabel={common.progress}
+      aria-valuetext={common.stepOf(step, total)}
       style={[
         styles.progressTrack,
         { backgroundColor: onImage ? 'rgba(255,255,255,0.25)' : theme.colors.border },
@@ -564,6 +567,7 @@ export const DialogNavHeader = memo(function DialogNavHeader({
   style?: StyleProp<ViewStyle>;
 }) {
   const theme = useTheme();
+  const common = useCommonMessages();
   const config = useMergedHeaderConfig(header, controller.store);
   const { scrollY, largeTitleHeight } = controller;
 
@@ -611,7 +615,7 @@ export const DialogNavHeader = memo(function DialogNavHeader({
   const closeButton = (
     <FrostedIconButton
       onPress={onDismiss}
-      accessibilityLabel="Close"
+      accessibilityLabel={common.close}
       icon={(iconProps) => <RiCloseLine {...iconProps} size="md" fill={iconFill} />}
     />
   );
@@ -645,7 +649,7 @@ export const DialogNavHeader = memo(function DialogNavHeader({
     (config.onBack ? (
       <FrostedIconButton
         onPress={config.onBack}
-        accessibilityLabel="Go back"
+        accessibilityLabel={common.goBack}
         icon={(iconProps) => <RiArrowLeftSLine {...iconProps} size="md" fill={iconFill} />}
       />
     ) : hasRichTrailing && config.showClose !== false ? (
@@ -712,6 +716,7 @@ export const DialogLargeTitle = memo(function DialogLargeTitle({
   header: DialogHeaderConfig;
 }) {
   const theme = useTheme();
+  const common = useCommonMessages();
   const config = useMergedHeaderConfig(header, controller.store);
   const { largeTitleHeight } = controller;
 
@@ -781,7 +786,7 @@ export const DialogLargeTitle = memo(function DialogLargeTitle({
             <Search
               value={config.search.value}
               onValueChange={config.search.onValueChange}
-              label={config.search.placeholder ?? 'Search'}
+              label={config.search.placeholder ?? common.search}
               onSubmitEditing={config.search.onSubmit}
               onClearText={() => config.search?.onValueChange('')}
             />

package/src/dialog/SheetShell.tsx

@@ -20,6 +20,7 @@ import { Z_INDEX } from '../styles/z-index';
 import { useTheme } from '../theme/use-theme';
 import { Context } from './context';
 import type { DialogControlProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 export interface SheetShellProps {
   control: DialogControlProps;
@@ -150,12 +151,13 @@ export function SheetShell({
 
 function SheetHandle({ onPress }: { onPress: () => void }) {
   const theme = useTheme();
+  const common = useCommonMessages();
   return (
     <View style={styles.handleContainer}>
       <Pressable
         onPress={onPress}
-        accessibilityLabel="Dismiss"
-        accessibilityHint="Tap to close"
+        accessibilityLabel={common.dismiss}
+        accessibilityHint={common.tapToClose}
         hitSlop={{ top: 10, bottom: 10, left: 40, right: 40 }}
       >
         <View style={[styles.handleBar, { backgroundColor: theme.colors.text }]} />

package/src/dropdown-menu/DropdownMenu.tsx

@@ -29,6 +29,7 @@ import type {
   DropdownMenuProps,
   DropdownMenuTriggerProps,
 } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 export function DropdownMenu({
   children,
@@ -80,11 +81,13 @@ export function DropdownMenuTrigger({
 
 export function DropdownMenuContent({
   children,
-  label = 'Menu',
+  label: labelProp,
   className,
   style,
   testID,
 }: DropdownMenuContentProps) {
+  const common = useCommonMessages();
+  const label = labelProp ?? common.menu;
   const menu = useDropdownMenu();
   const { control, onSheetClose } = useSheetOpenBridge(menu.open, menu.setOpen);
   const surface = useMemo<MenuSurfaceContextValue>(

package/src/dropdown-menu/DropdownMenu.web.tsx

@@ -30,6 +30,7 @@ import type {
   DropdownMenuProps,
   DropdownMenuTriggerProps,
 } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 export function DropdownMenu({
   children,
@@ -96,7 +97,7 @@ export function DropdownMenuTrigger({
 
 export function DropdownMenuContent({
   children,
-  label = 'Menu',
+  label: labelProp,
   side,
   align = 'start',
   sideOffset,
@@ -108,6 +109,8 @@ export function DropdownMenuContent({
   style,
   testID,
 }: DropdownMenuContentProps) {
+  const common = useCommonMessages();
+  const label = labelProp ?? common.menu;
   const menu = useDropdownMenu();
   const anchor = useAnchorRect(menu.anchorRef, menu.open);
   const close = useCallback(() => menu.setOpen(false), [menu]);

package/src/floating/FloatingPanel.tsx

@@ -93,6 +93,7 @@ import { pushFloatingEscape } from './escape-stack';
 import { cx } from './shared';
 import type { FloatingPanelProps, FloatingSide } from './types';
 import { useFrameThrottle } from './use-frame-throttle';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * The one node: the panel's own chrome, the caller's classes, the computed
@@ -201,6 +202,7 @@ export function FloatingPanel({
   surface = 'popover',
   panelRef,
 }: FloatingPanelProps) {
+  const common = useCommonMessages();
   const chrome = SURFACE[surface];
   const isMenuSurface = surface !== 'popover';
   const palette = useMenuPalette();
@@ -493,7 +495,7 @@ export function FloatingPanel({
             // contract, which is the whole reason it is not a bare Pressable.
             blurIntensity={0}
             dimOpacity={0}
-            accessibilityLabel="Dismiss"
+            accessibilityLabel={common.dismiss}
           />
         ) : null}
         <AnimatedPanel

package/src/home-search/HomeSearchBar.tsx

@@ -21,6 +21,7 @@ import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { TYPE_SCALE } from '../typography/scale';
 import type { HomeSearchBarProps, HomeSearchSegment } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * Bloom's wide housing search: one full pill split into any segments — the
@@ -107,7 +108,7 @@ export function HomeSearchBar<K extends string = string>({
   activeSegment,
   onActiveSegmentChange,
   onSearch,
-  searchLabel = 'Search',
+  searchLabel: searchLabelProp,
   query,
   onQueryChange,
   panel,
@@ -115,6 +116,8 @@ export function HomeSearchBar<K extends string = string>({
   style,
   testID,
 }: HomeSearchBarProps<K>) {
+  const common = useCommonMessages();
+  const searchLabel = searchLabelProp ?? common.search;
   const theme = useTheme();
   const palette = useStaySearchPalette();
   const { accent } = useMemo(() => resolveButtonRamps(theme), [theme]);

package/src/home-search/SavedSearchCard.tsx

@@ -18,6 +18,7 @@ import { webDataSet } from '../styles/web-data';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import type { SavedSearchCardProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * One saved search in a list: what it looks for, how much is new, and how
@@ -61,11 +62,14 @@ function SavedSearchCardComponent({
   onPress,
   onEdit,
   onDelete,
-  editLabel = 'Edit',
-  deleteLabel = 'Delete',
+  editLabel: editLabelProp,
+  deleteLabel: deleteLabelProp,
   style,
   testID,
 }: SavedSearchCardProps) {
+  const common = useCommonMessages();
+  const editLabel = editLabelProp ?? common.edit;
+  const deleteLabel = deleteLabelProp ?? common.delete;
   const theme = useTheme();
   const palette = useStaySearchPalette();
   const { accent } = useMemo(() => resolveButtonRamps(theme), [theme]);

package/src/listing-card/ListingCard.tsx

@@ -60,6 +60,7 @@ import {
   type ListingCardPaint,
 } from './shared';
 import type { ListingCardLayout, ListingCardProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * A home in a results grid — a stay, a rental, a home for sale or a swap.
@@ -407,12 +408,13 @@ function ListingCardSkeleton({
   style,
   testID,
 }: Pick<ListingCardProps, 'style' | 'testID'> & { layout: ListingCardLayout; compact: boolean }) {
+  const common = useCommonMessages();
   const horizontal = layout === 'horizontal';
   if (compact) {
     return (
       <View
         aria-busy
-        accessibilityLabel="Loading"
+        accessibilityLabel={common.loading}
         style={[{ flexDirection: 'row', alignItems: 'center' }, style]}
         testID={testID}
       >
@@ -434,7 +436,7 @@ function ListingCardSkeleton({
   return (
     <View
       aria-busy
-      accessibilityLabel="Loading"
+      accessibilityLabel={common.loading}
       style={[{ flexDirection: horizontal ? 'row' : 'column', alignItems: 'flex-start' }, style]}
       testID={testID}
     >

package/src/listing-details/ReviewCard.tsx

@@ -17,6 +17,7 @@ import {
   type ListingPalette,
 } from './shared';
 import type { ReviewCardProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * One guest review.
@@ -67,8 +68,8 @@ function ReviewCardComponent({
   date,
   text,
   numberOfLines = 4,
-  showMoreLabel = 'Show more',
-  showLessLabel = 'Show less',
+  showMoreLabel: showMoreLabelProp,
+  showLessLabel: showLessLabelProp,
   expanded: expandedProp,
   onExpandedChange,
   hostResponse,
@@ -76,6 +77,9 @@ function ReviewCardComponent({
   style,
   testID,
 }: ReviewCardProps) {
+  const common = useCommonMessages();
+  const showMoreLabel = showMoreLabelProp ?? common.showMore;
+  const showLessLabel = showLessLabelProp ?? common.showLess;
   const theme = useTheme();
   useInteractiveWebCss(LISTING_DETAILS_STYLE_ID, LISTING_DETAILS_CSS);
   const palette = useMemo(() => resolveListingPalette(theme), [theme]);

package/src/listing-editor/ListingQualityMeter.tsx

@@ -15,6 +15,7 @@ import type { Theme } from '../theme/types';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import type { ListingQualityItem, ListingQualityMeterProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * How complete a listing is: a score ring, a checklist of what is left, and
@@ -102,11 +103,13 @@ function ListingQualityMeterComponent({
   tipsTitle = 'Tips',
   formatScore = (score) => `${score}`,
   accessibilityLabel = 'Listing quality score',
-  doneLabel = 'Done',
+  doneLabel: doneLabelProp,
   todoLabel = 'To do',
   style,
   testID,
 }: ListingQualityMeterProps) {
+  const common = useCommonMessages();
+  const doneLabel = doneLabelProp ?? common.done;
   const theme = useTheme();
   useEffect(() => {
     if (IS_WEB) adoptStyleSheet(STYLE_ID, CSS);