@oxy.so/bloom 2.11.0 → 2.12.0

package/src/stay-search/DestinationSuggestions.tsx

@@ -4,6 +4,7 @@ import { Platform, Pressable, View } from 'react-native';
 import { resolveButtonRamps } from '../button/shared';
 import { RiMapPinLine } from '../icons/remix/RiMapPinLine';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
+import { DISABLED_OPACITY } from '../styles/tokens';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { webDataSet } from '../styles/web-data';
 import { useTheme } from '../theme/use-theme';
@@ -20,6 +21,13 @@ import type { DestinationSuggestionsProps } from './types';
  *
  * A `listbox` of `option`s. The list takes focus (web) and owns the arrow
  * keys; the rows stay out of the tab order.
+ *
+ * A row can be `disabled` — "Use my location" while location permission is
+ * off. It stays in the list rather than disappearing, because a row that
+ * vanishes teaches nothing: it dims to `DISABLED_OPACITY`, carries
+ * `aria-disabled`, answers no press or Enter, is never highlighted by hover, and
+ * the arrow keys step OVER it. `disabledReason` replaces its description and is
+ * read after the title, so the row says why.
  */
 
 const IS_WEB = Platform.OS === 'web';
@@ -36,6 +44,28 @@ const CSS = `
 }
 `;
 
+/**
+ * The next row the arrow keys land on, stepping OVER every disabled one and
+ * wrapping once. `-1` when every row is disabled — the highlight then stays
+ * where it is rather than landing on a row that answers nothing. Pure.
+ */
+export function nextSelectable(
+  items: readonly { disabled?: boolean }[],
+  from: number,
+  step: 1 | -1,
+): number {
+  const count = items.length;
+  if (count === 0) return -1;
+  // From "nothing highlighted", ArrowDown starts at the top and ArrowUp at the
+  // bottom, which is what the list did before any row could be disabled.
+  const start = from < 0 ? (step === 1 ? 0 : count - 1) : (from + step + count) % count;
+  for (let i = 0; i < count; i++) {
+    const index = (start + step * i + count * count) % count;
+    if (!items[index]?.disabled) return index;
+  }
+  return -1;
+}
+
 function DestinationSuggestionsComponent({
   items,
   onSelect,
@@ -68,13 +98,16 @@ function DestinationSuggestionsComponent({
     if (items.length === 0) return;
     if (e.key === 'ArrowDown') {
       e.preventDefault();
-      highlight(current < 0 ? 0 : (current + 1) % items.length);
+      const next = nextSelectable(items, current, 1);
+      if (next >= 0) highlight(next);
     } else if (e.key === 'ArrowUp') {
       e.preventDefault();
-      highlight(current <= 0 ? items.length - 1 : current - 1);
+      const next = nextSelectable(items, current, -1);
+      if (next >= 0) highlight(next);
     } else if (e.key === 'Enter' && current >= 0 && current < items.length) {
       e.preventDefault();
-      onSelect(items[current]!);
+      const item = items[current]!;
+      if (!item.disabled) onSelect(item);
     }
   };
 
@@ -103,17 +136,22 @@ function DestinationSuggestionsComponent({
       >
         {items.map((item, index) => {
           const Icon = item.icon ?? RiMapPinLine;
-          const selected = index === current;
+          const disabled = item.disabled === true;
+          const selected = index === current && !disabled;
+          const secondLine = disabled ? (item.disabledReason ?? item.description) : item.description;
           return (
             <Pressable
               key={item.id}
               role="option"
-              accessibilityLabel={item.description ? `${item.title}, ${item.description}` : item.title}
+              accessibilityLabel={secondLine ? `${item.title}, ${secondLine}` : item.title}
               aria-selected={selected}
-              accessibilityState={{ selected }}
+              accessibilityState={{ selected, disabled }}
+              disabled={disabled}
               focusable={false}
               onPress={() => onSelect(item)}
-              onHoverIn={() => highlight(index)}
+              onHoverIn={() => {
+                if (!disabled) highlight(index);
+              }}
               testID={testID ? `${testID}-${index}` : undefined}
               style={{
                 flexDirection: 'row',
@@ -124,6 +162,7 @@ function DestinationSuggestionsComponent({
                 paddingLeft: 12,
                 paddingRight: 12,
                 borderRadius: 16,
+                opacity: disabled ? DISABLED_OPACITY : 1,
                 backgroundColor: selected ? palette.rowHighlight : 'transparent',
               }}
             >
@@ -143,9 +182,9 @@ function DestinationSuggestionsComponent({
                 <Text variant="body-medium" numberOfLines={1} style={{ color: palette.text }}>
                   {item.title}
                 </Text>
-                {item.description ? (
+                {secondLine ? (
                   <Text variant="body-2-regular" numberOfLines={1} style={{ color: palette.textSecondary }}>
-                    {item.description}
+                    {secondLine}
                   </Text>
                 ) : null}
               </View>

package/src/stay-search/GuestPicker.tsx

@@ -19,6 +19,11 @@ const COUNTED: readonly GuestKind[] = ['adults', 'children'];
  * them — the one guests picker, used by the search bar's "Who" panel and the
  * booking card's guests popover alike. Then an optional note and "Close".
  *
+ * The stepper button names travel too: `decrementLabel` / `incrementLabel`
+ * reach every row, so the two words a screen reader reads on the eight buttons
+ * are translatable like everything else the family draws. Their default is
+ * `Stepper`'s own English pair.
+ *
  * Two rules:
  *  - while any child, infant or pet is counted, adults cannot go below 1 (the
  *    adults `−` disables there), and adding one of them with no adults sets
@@ -35,6 +40,8 @@ function GuestPickerComponent({
   kinds = GUEST_KINDS,
   labels,
   descriptions,
+  decrementLabel,
+  incrementLabel,
   note,
   onClose,
   closeLabel = 'Close',
@@ -71,6 +78,8 @@ function GuestPickerComponent({
             min={kind === 'adults' ? minimumAdults(value) : 0}
             max={maxFor(kind)}
             size={size}
+            decrementLabel={decrementLabel}
+            incrementLabel={incrementLabel}
             onValueChange={(n) => onChange(applyGuestCount(value, kind, n))}
             divider={index < kinds.length - 1}
             testID={testID ? `${testID}-${kind}` : undefined}

package/src/stay-search/types.ts

@@ -97,6 +97,18 @@ export interface DestinationSuggestion {
   description?: string;
   /** A Remix icon component (`RiMapPinLine`, `RiTimeLine`…). Default `RiMapPinLine`. */
   icon?: ButtonIconComponent;
+  /**
+   * The row is offered but cannot be chosen — "Use my location" while location
+   * is off. It dims, answers no press, and the arrow keys step over it.
+   */
+  disabled?: boolean;
+  /**
+   * Why it cannot be chosen ("Location is off"). Drawn in place of
+   * `description` while `disabled`, and read after the title, so the row says
+   * what is wrong rather than only looking wrong. Ignored when the row is not
+   * disabled.
+   */
+  disabledReason?: string;
 }
 
 export interface DestinationSuggestionsProps {
@@ -135,6 +147,14 @@ export interface GuestPickerProps {
   labels?: Partial<Record<GuestKind, string>>;
   /** Override descriptions (`null` hides one). */
   descriptions?: Partial<Record<GuestKind, string | null>>;
+  /**
+   * The name of every row's `−` button, which is English by default
+   * (`"Decrease"`). Same spelling as `Stepper`'s, and passed to every row — the
+   * row's own title is what says WHICH counter it belongs to.
+   */
+  decrementLabel?: string;
+  /** The name of every row's `+` button. Default `"Increase"`. */
+  incrementLabel?: string;
   /**
    * The most guests the place takes, counting adults and children (infants and
    * pets do not count). Their `+` buttons disable once the sum reaches it.

package/src/track-list/parts.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, memo, useMemo, useState } from 'react';
+import React, { Fragment, memo, useMemo } from 'react';
 import { Image, View, type GestureResponderEvent } from 'react-native';
 
 import { GlyphButton } from '../button';
@@ -13,8 +13,6 @@ import { RiMore2Fill } from '../icons/remix/RiMore2Fill';
 import { RiMusic2Line } from '../icons/remix/RiMusic2Line';
 import { resolvePhoto } from '../listing-card/shared';
 import { useImageResolver } from '../image-resolver/context';
-import { DISABLED_OPACITY, borderRadius } from '../styles/tokens';
-import type { WebCssStyle } from '../styles/web-view-style';
 import type { WebAriaProps } from '../styles/styled-primitives';
 import { useTheme } from '../theme/use-theme';
 import { IS_WEB, resolveTrackListPaint } from './shared';
@@ -58,23 +56,6 @@ export function TrackIconButton({
 }: TrackIconButtonProps) {
   const theme = useTheme();
   const paint = useMemo(() => resolveTrackListPaint(theme), [theme]);
-  const [hovered, setHovered] = useState(false);
-  const color =
-    pressed && activeColor
-      ? activeColor
-      : hovered && !disabled
-        ? paint.text
-        : paint.textMuted;
-  const rootStyle: WebCssStyle = {
-    width: 32,
-    height: 32,
-    borderRadius: borderRadius.full,
-    alignItems: 'center',
-    justifyContent: 'center',
-    opacity: disabled ? DISABLED_OPACITY : 1,
-    '--bloom-track-ring': paint.ring,
-  };
-  const toggle = pressed !== undefined;
   return (
     <GlyphButton
       {...aria}