@oxy.so/bloom 4.33.0 → 4.34.1

package/src/place-reviews/WriteReviewPrompt.tsx

@@ -8,6 +8,7 @@ import { RiQuillPenLine } from '../icons/remix/RiQuillPenLine';
 import { HousingCard, IconTile, useHousingPalette } from '../tenancy/parts';
 import { Text } from '../typography';
 import type { WriteReviewPromptProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * An invitation for a past tenant to review the building.
@@ -28,11 +29,13 @@ function WriteReviewPromptComponent({
   actionLabel = 'Write a review',
   onStart,
   onDismiss,
-  dismissLabel = 'Dismiss',
+  dismissLabel: dismissLabelProp,
   media,
   style,
   testID,
 }: WriteReviewPromptProps) {
+  const common = useCommonMessages();
+  const dismissLabel = dismissLabelProp ?? common.dismiss;
   const palette = useHousingPalette();
   const id = (part: string) => (testID ? `${testID}-${part}` : undefined);
   const body = description ?? `Help future tenants of ${buildingTitle}. Reviews are anonymous.`;

package/src/recent-hires-card/RecentHiresCard.tsx

@@ -14,6 +14,7 @@ import type { Theme } from '../theme/types';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import type { RecentHire, RecentHiresCardProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * The "Recent hires" card:
@@ -144,8 +145,8 @@ const RecentHiresCardComponent: React.FC<RecentHiresCardProps> = ({
   teamLabel,
   onTeamPress,
   teamAccessibilityLabel,
-  previousLabel = 'Previous',
-  nextLabel = 'Next',
+  previousLabel: previousLabelProp,
+  nextLabel: nextLabelProp,
   onPreviousPress,
   onNextPress,
   previousDisabled,
@@ -154,6 +155,9 @@ const RecentHiresCardComponent: React.FC<RecentHiresCardProps> = ({
   style,
   testID,
 }) => {
+  const common = useCommonMessages();
+  const previousLabel = previousLabelProp ?? common.previous;
+  const nextLabel = nextLabelProp ?? common.next;
   const theme = useTheme();
   const palette = useMemo(() => resolveRecentHiresPalette(theme), [theme]);
 

package/src/settings-modal/SettingsModal.tsx

@@ -25,6 +25,7 @@ import { PageHeader } from '../page-header';
 import { ButtonGroup, ButtonGroupItem } from '../button-group';
 import { RiCloseLine } from '../icons/remix/RiCloseLine';
 import { Backdrop, OverlayRoot } from '../overlay';
+import { ModalKeyboard } from '../overlay/ModalKeyboard';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { webDataSet } from '../styles/web-data';
 import { Text } from '../typography';
@@ -39,6 +40,7 @@ import type { SettingsPalette } from './palette';
 import type { SettingsModalProps, SettingsNavGroup, SettingsNavItem } from './types';
 import { useKeyboardReveal } from './use-keyboard-reveal';
 import { IS_WEB, useSettingsWebCss } from './web-css';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * A settings modal.
@@ -134,6 +136,8 @@ export function SettingsModal({
   labels,
   testID,
 }: SettingsModalProps) {
+  const panelRef = useRef<View>(null);
+  const common = useCommonMessages();
   useSettingsWebCss();
   const palette = useSettingsPalette();
   const reducedMotion = useReducedMotion();
@@ -246,21 +250,6 @@ export function SettingsModal({
     if (mayLeave('navigation')) setCompactPageOpen(false);
   }, [mayLeave]);
 
-  // Escape closes (web). On `window`, not `document`: a menu or popover opened
-  // inside the modal handles Escape on `document` and stops propagation there,
-  // so the innermost surface closes first and the modal stays open.
-  useEffect(() => {
-    if (!mounted || !IS_WEB || typeof window === 'undefined') return;
-    const handler = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        event.stopPropagation();
-        requestClose();
-      }
-    };
-    window.addEventListener('keydown', handler);
-    return () => window.removeEventListener('keydown', handler);
-  }, [mounted, requestClose]);
-
   const compactPageOpenRef = useRef(false);
   compactPageOpenRef.current = compactPageOpen && layoutRef.current === 'compact';
 
@@ -348,6 +337,14 @@ export function SettingsModal({
     <ModalPortal>
       <SettingsModalContext.Provider value={context}>
         <OverlayRoot onRequestClose={onHardwareBack} modal>
+          {IS_WEB ? (
+            <ModalKeyboard
+              panelRef={panelRef}
+              closing={!visible && wasVisible.current}
+              dismissible
+              dismiss={requestClose}
+            />
+          ) : null}
           <Backdrop
             onPress={requestClose}
             progress={progress}
@@ -370,6 +367,8 @@ export function SettingsModal({
                 ]}
               >
                 <View
+                  ref={panelRef}
+                  tabIndex={IS_WEB ? -1 : undefined}
                   role="dialog"
                   aria-modal
                   aria-label={labels?.dialog ?? 'Settings'}
@@ -406,7 +405,7 @@ export function SettingsModal({
                           header={{
                             title: pageConfig.title,
                             onBack: requestNavigation,
-                            backLabel: labels?.back ?? 'Back',
+                            backLabel: labels?.back ?? common.back,
                             closeLabel,
                             onClose: requestClose,
                           }}

package/src/sidebar/Sidebar.tsx

@@ -44,6 +44,7 @@ import { SidebarTeamMenu } from './SidebarTeamMenu';
 import { SidebarLogoView } from './SidebarLogoView';
 import { SidebarUserMenu } from './SidebarUserMenu';
 import type { SidebarNavItem, SidebarProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * `Sidebar` — the floating app rail, expanded or collapsed.
@@ -174,7 +175,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
   searchQuery,
   onSearchQueryChange,
   searchLabel = 'Quick Search',
-  searchButtonLabel = 'Search',
+  searchButtonLabel: searchButtonLabelProp,
   searchPlaceholder,
   filterLabel = 'Filter navigation',
   clearSearchLabel = 'Clear navigation search',
@@ -189,6 +190,8 @@ const SidebarPanel: React.FC<SidebarProps> = ({
   style,
   testID,
 }) => {
+  const common = useCommonMessages();
+  const searchButtonLabel = searchButtonLabelProp ?? common.search;
   const palette = useSidebarPalette();
   const canonicalSize = sizeProp === 'small' ? 'sm' : sizeProp === 'medium' ? 'md' : sizeProp === 'large' ? 'lg' : sizeProp;
   const {size: scopedSize} = useBloomAppearance({size: canonicalSize}, {size: 'md', tone: 'neutral'});

package/src/stay-filters/AmenityFilter.tsx

@@ -4,6 +4,7 @@ import { View } from 'react-native';
 import { Button } from '../button';
 import { ToggleChipGroup } from './ToggleChipGroup';
 import type { AmenityFilterProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * A `ToggleChipGroup` that shows its first `collapsedCount` options and a
@@ -18,13 +19,16 @@ export function AmenityFilter<T extends string = string>({
   options,
   value,
   collapsedCount = 6,
-  showMoreLabel = 'Show more',
-  showLessLabel = 'Show less',
+  showMoreLabel: showMoreLabelProp,
+  showLessLabel: showLessLabelProp,
   defaultExpanded = false,
   style,
   testID,
   ...group
 }: AmenityFilterProps<T>) {
+  const common = useCommonMessages();
+  const showMoreLabel = showMoreLabelProp ?? common.showMore;
+  const showLessLabel = showLessLabelProp ?? common.showLess;
   const [expanded, setExpanded] = useState(defaultExpanded);
   const foldable = options.length > collapsedCount;
   const selected = new Set<T>(value);

package/src/stay-search/GuestPicker.tsx

@@ -10,6 +10,7 @@ import { DEFAULT_GUEST_DESCRIPTIONS, DEFAULT_GUEST_LABELS, GUEST_KINDS } from '.
 import { useGuestPickerClose } from './context';
 import { applyGuestCount, minimumAdults } from './guests';
 import type { GuestKind, GuestPickerProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /** The kinds `maxGuests` counts; infants and pets ride free. */
 const COUNTED: readonly GuestKind[] = ['adults', 'children'];
@@ -44,11 +45,13 @@ function GuestPickerComponent({
   incrementLabel,
   note,
   onClose,
-  closeLabel = 'Close',
+  closeLabel: closeLabelProp,
   size = 'medium',
   style,
   testID,
 }: GuestPickerProps) {
+  const common = useCommonMessages();
+  const closeLabel = closeLabelProp ?? common.close;
   const theme = useTheme();
   const contextClose = useGuestPickerClose();
   const close = onClose ?? contextClose;

package/src/stepper/Stepper.tsx

@@ -15,6 +15,7 @@ import { Text } from '../typography';
 import type { TypeScaleVariant } from '../typography/scale';
 import type { StepperProps, StepperSize } from './types';
 import { useFieldMembership } from '../field/membership';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * Bloom's numeric counter: a round `−` button, the value, a round `+` button.
@@ -93,10 +94,12 @@ function StepperComponent({
   decrementLabel = 'Decrease',
   incrementLabel = 'Increase',
   onRemove,
-  removeLabel = 'Remove',
+  removeLabel: removeLabelProp,
   style,
   testID,
 }: StepperProps) {
+  const common = useCommonMessages();
+  const removeLabel = removeLabelProp ?? common.remove;
   const theme = useTheme();
   const ringOffset = useRingOffsetStyle();
   // The digits are not a name, so the stepper is named by a prop or by the