@oxy.so/bloom 2.11.0 → 2.12.1

package/src/listing-card/types.ts

@@ -128,6 +128,26 @@ export interface ListingCardProps {
   onFavoriteChange?: (favorite: boolean) => void;
   /** Called when the card is pressed. */
   onPress?: () => void;
+  /**
+   * A long press on the card — a shortcut to a sheet or a menu ("save to a
+   * folder"). A long press has no keyboard equivalent and no name to announce,
+   * so whatever it reaches must be reachable another way too.
+   */
+  onLongPress?: () => void;
+  /**
+   * Web only — right-click, the pointer's spelling of the same shortcut. The
+   * event is defaulted for you, so the browser's own menu ("open in a new tab")
+   * does not appear on the card while this is set. Same contract as
+   * `MessageBubble`'s.
+   */
+  onContextMenu?: () => void;
+  /**
+   * Zooms the photo a little while the pointer is over the card (WEB ONLY —
+   * there is no hover on a touch screen, and no reduced-motion-safe way to do
+   * it on native). Default `false`. Skipped under
+   * `prefers-reduced-motion: reduce`.
+   */
+  hoverZoom?: boolean;
   /**
    * The stay's URL. On web the card is a real `<a href>` (open in a new tab,
    * copy link); with `onPress` too the default navigation is prevented so a
@@ -206,6 +226,23 @@ export interface WishlistCardProps {
   onPress?: () => void;
   /** The collection's URL; a real `<a href>` on web, like `ListingCard`. */
   href?: string;
+  /**
+   * A glyph left of the name, 16px — what the collection IS ("Coast weekends"
+   * beside a heart, "Viewings booked" beside a calendar). Decorative: the name
+   * beside it is what a screen reader reads.
+   */
+  icon?: BloomIconComponent;
+  /**
+   * The `icon`'s colour, and the tint of the cover while the collection is
+   * empty. Default: the secondary text colour, and the plain placeholder.
+   */
+  color?: string;
+  /**
+   * What the cover shows while `photos` is empty — a glyph, a line of text, an
+   * "Add your first save" affordance. Without it an empty collection draws the
+   * plain placeholder square it draws today.
+   */
+  empty?: ReactNode;
   /** Replaces the composed name ("Coast weekends, 12 saved"). */
   accessibilityLabel?: string;
   style?: StyleProp<ViewStyle>;

package/src/message-bubble/MessageBubble.tsx

@@ -182,6 +182,25 @@ function MessageBubbleComponent({
     onContextMenu !== undefined ||
     selected !== undefined;
 
+  /**
+   * Whether the bubble CONTAINS controls of its own.
+   *
+   * A pressable bubble is a button, and on the web a button may not contain
+   * another one: a picture, a file row, a voice note's play control, a reaction
+   * chip, a retry action and a reply quote are all buttons, so a bubble holding
+   * any of them and announcing itself as one renders invalid DOM — React logs
+   * "<button> cannot contain a nested <button>" once per bubble and the inner
+   * control's own semantics are lost. Such a bubble keeps its press handlers
+   * and its accessible name, and gives up the ROLE: it is a container that
+   * happens to be pressable, which is what it actually is.
+   */
+  const holdsControls =
+    media !== undefined ||
+    (reactions !== undefined && reactions.length > 0) ||
+    onRetry !== undefined ||
+    onPressReply !== undefined ||
+    onAddReaction !== undefined;
+
   const name =
     accessibilityLabel ??
     bubbleAccessibleName({
@@ -324,7 +343,8 @@ function MessageBubbleComponent({
 
   const bubble = interactive ? (
     <Pressable
-      role="button"
+      role={holdsControls ? undefined : 'button'}
+      accessible={holdsControls ? undefined : true}
       accessibilityLabel={name}
       aria-pressed={selected === undefined ? undefined : selected}
       accessibilityState={selected === undefined ? undefined : { selected }}

package/src/rating/RatingInput.tsx

@@ -0,0 +1,214 @@
+import React, { memo, useCallback, useMemo, useState } from 'react';
+import { Platform, Pressable, View } from 'react-native';
+
+import { resolveButtonRamps } from '../button/shared';
+import { RiStarFill } from '../icons/remix/RiStarFill';
+import { RiStarLine } from '../icons/remix/RiStarLine';
+import { focusRingShadow, interactiveWebCss, useInteractiveWebCss } from '../styles/interactive-web-css';
+import { useRingOffsetStyle } from '../styles/surface-levels';
+import { DISABLED_OPACITY } from '../styles/tokens';
+import { webDataSet } from '../styles/web-data';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { useTheme } from '../theme/use-theme';
+import type { RatingInputProps, RatingInputSize } from './types';
+
+/**
+ * The star PICKER — `Rating`'s counterpart for a review form. `Rating` draws a
+ * rating that exists; this one is how a rating comes to exist.
+ *
+ *              star   gap
+ *   small      24     4
+ *   medium     32     6
+ *   large      40     8
+ *
+ * Chosen stars are filled with the ACCENT, the rest are outlines in the
+ * neutral ramp — the same reasoning as `RatingBar`'s fill: a chosen star is a
+ * choice the person made, and text-primary reads as ink rather than as an
+ * answer. Under a pointer the stars up to the hovered one fill as a preview,
+ * which never touches `value`.
+ *
+ * Accessibility: a `radiogroup` named by `accessibilityLabel`, holding one
+ * `radio` per star named by `formatStarLabel` ("4 stars"). Exactly one of N is
+ * what a rating is, so `radio` is the role rather than a `slider` — it is also
+ * the only one that gives each star its own touch target and its own name.
+ * Roving tab stop: the chosen star (the first when nothing is chosen) is the
+ * one in the tab order, and ArrowRight/Up, ArrowLeft/Down, Home and End move
+ * AND choose, which is how an ARIA radio group behaves. The focus ring is drawn
+ * on the star itself.
+ *
+ * **No half stars, and no clearing.** Half a star doubles the keyboard stops
+ * and halves the target — 16px of a 32px star, under any touch floor — and the
+ * icon set has no half-star glyph, so the state could not be drawn honestly
+ * either. Clearing is left out for the reason `Radio` re-choosing is a no-op: a
+ * radio has no "off", and a form that needs "no rating yet" holds `null` and
+ * does not render a cleared state the group cannot express. `Rating` still
+ * DISPLAYS fractional values — a display has no target and no keyboard.
+ */
+
+const SIZE_CONFIG: Record<RatingInputSize, { star: number; gap: number }> = {
+  small: { star: 24, gap: 4 },
+  medium: { star: 32, gap: 6 },
+  large: { star: 40, gap: 8 },
+};
+
+const IS_WEB = Platform.OS === 'web';
+
+const HIT_SLOP = { top: 6, bottom: 6, left: 2, right: 2 } as const;
+
+const STYLE_ID = 'bloom-rating-input-web-css';
+const STAR = '[data-bloom-rating-star]';
+
+const BLOOM_RATING_INPUT_CSS = interactiveWebCss({
+  selector: STAR,
+  varPrefix: 'bloom-rating-input',
+  // A star is a `View`-based press target, not a `<button>`: the button reset's
+  // `inline-flex` changes an RNW `View`'s layout.
+  reset: 'none',
+  base: 'border-radius: 6px;',
+  transition: 'box-shadow 120ms ease',
+  disabled: { opacity: null },
+  extraRules: `${STAR}:focus-visible {
+  outline: none;
+  box-shadow: ${focusRingShadow('--bloom-rating-input-ring')};
+}`,
+});
+
+/** `1 star`, `4 stars`. English — `formatStarLabel` replaces it. */
+export function defaultStarLabel(value: number): string {
+  return value === 1 ? '1 star' : `${value} stars`;
+}
+
+function RatingInputComponent({
+  value,
+  onChange,
+  max = 5,
+  size = 'medium',
+  disabled = false,
+  accessibilityLabel,
+  formatStarLabel = defaultStarLabel,
+  style,
+  testID,
+}: RatingInputProps) {
+  const theme = useTheme();
+  const ringOffset = useRingOffsetStyle();
+  useInteractiveWebCss(STYLE_ID, BLOOM_RATING_INPUT_CSS);
+  const { accent, neutral } = useMemo(() => resolveButtonRamps(theme), [theme]);
+  const config = SIZE_CONFIG[size];
+  const [hovered, setHovered] = useState<number | null>(null);
+
+  const total = Math.max(1, Math.round(max));
+  const chosen = value == null ? null : Math.min(total, Math.max(1, Math.round(value)));
+  // The hover preview never survives a disabled group.
+  const shown = disabled ? chosen : (hovered ?? chosen);
+
+  const choose = useCallback(
+    (next: number) => {
+      if (disabled) return;
+      const clamped = Math.min(total, Math.max(1, next));
+      // Re-choosing the chosen star is a no-op, as on `Radio`: firing would
+      // report a change that did not happen.
+      if (clamped === chosen) return;
+      onChange(clamped);
+    },
+    [disabled, total, chosen, onChange],
+  );
+
+  const onKeyDown = useCallback(
+    (e: { key: string; preventDefault: () => void }) => {
+      const from = chosen ?? 0;
+      switch (e.key) {
+        case 'ArrowRight':
+        case 'ArrowUp':
+          e.preventDefault();
+          choose(Math.min(total, from + 1));
+          break;
+        case 'ArrowLeft':
+        case 'ArrowDown':
+          e.preventDefault();
+          choose(Math.max(1, from - 1));
+          break;
+        case 'Home':
+          e.preventDefault();
+          choose(1);
+          break;
+        case 'End':
+          e.preventDefault();
+          choose(total);
+          break;
+        default:
+          break;
+      }
+    },
+    [chosen, total, choose],
+  );
+
+  // The roving tab stop: the chosen star, or the first one while nothing is
+  // chosen, so a keyboard reaches the group in one Tab either way.
+  const tabStop = chosen ?? 1;
+  const emptyColor = theme.isDark ? neutral[600] : neutral[300];
+
+  const starStyle: WebCssStyle = {
+    padding: 2,
+    borderRadius: 6,
+    '--bloom-rating-input-ring': accent[500],
+    ...ringOffset,
+  };
+
+  return (
+    <View
+      testID={testID}
+      accessibilityRole="radiogroup"
+      accessibilityLabel={accessibilityLabel}
+      aria-label={accessibilityLabel}
+      aria-disabled={disabled || undefined}
+      style={[
+        {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: config.gap,
+          opacity: disabled ? DISABLED_OPACITY : 1,
+        },
+        style,
+      ]}
+    >
+      {Array.from({ length: total }, (_, index) => {
+        const star = index + 1;
+        const filled = shown != null && star <= shown;
+        const Glyph = filled ? RiStarFill : RiStarLine;
+        const name = formatStarLabel(star, total);
+        const webProps: Record<string, unknown> = IS_WEB
+          ? { tabIndex: disabled || star !== tabStop ? -1 : 0, onKeyDown }
+          : {};
+        return (
+          <Pressable
+            key={star}
+            accessibilityRole="radio"
+            // `aria-checked`, not `accessibilityState`: react-native-web never
+            // reads the latter. React Native folds this one back, so it is the
+            // spelling both platforms honour.
+            aria-checked={star === chosen}
+            accessibilityLabel={name}
+            disabled={disabled}
+            onPress={() => choose(star)}
+            onHoverIn={() => setHovered(star)}
+            onHoverOut={() => setHovered((current) => (current === star ? null : current))}
+            hitSlop={HIT_SLOP}
+            {...webProps}
+            {...webDataSet({ bloomRatingStar: '' })}
+            testID={testID ? `${testID}-star-${star}` : undefined}
+            style={starStyle}
+          >
+            <Glyph
+              width={config.star}
+              height={config.star}
+              fill={filled ? accent[500] : emptyColor}
+            />
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}
+
+export const RatingInput = memo(RatingInputComponent);
+RatingInput.displayName = 'RatingInput';

package/src/rating/index.ts

@@ -1,3 +1,11 @@
 export { Rating } from './Rating';
 export { RatingBar } from './RatingBar';
-export type { RatingBarProps, RatingCountStyle, RatingProps, RatingSize } from './types';
+export { RatingInput } from './RatingInput';
+export type {
+  RatingBarProps,
+  RatingCountStyle,
+  RatingInputProps,
+  RatingInputSize,
+  RatingProps,
+  RatingSize,
+} from './types';

package/src/rating/types.ts

@@ -32,6 +32,39 @@ export interface RatingProps {
   testID?: string;
 }
 
+/** `small` is a 24px star, `medium` (default) 32, `large` 40. */
+export type RatingInputSize = 'small' | 'medium' | 'large';
+
+export interface RatingInputProps {
+  /**
+   * The chosen rating, `1..max`, or `null` while nothing is chosen. Fully
+   * controlled — the component keeps no value of its own.
+   */
+  value: number | null;
+  /** Called with the chosen rating. Never called with the value already chosen. */
+  onChange: (value: number) => void;
+  /** How many stars. Default `5`. */
+  max?: number;
+  /** Default `medium`. */
+  size?: RatingInputSize;
+  /** Disables the whole group: no press, no keyboard, dimmed. */
+  disabled?: boolean;
+  /**
+   * The NAME of what is being rated ("Overall rating", "Cleanliness").
+   * Required: the group draws nothing but stars, so nothing else can tell a
+   * screen reader which of several ratings this one is.
+   */
+  accessibilityLabel: string;
+  /**
+   * Each star's own name, which is English by default (`"1 star"`,
+   * `"4 stars"`). Pass a translated formatter.
+   */
+  formatStarLabel?: (value: number, max: number) => string;
+  style?: StyleProp<ViewStyle>;
+  /** Derives `-star-<n>` for each star. */
+  testID?: string;
+}
+
 export interface RatingBarProps {
   /** What the row measures ("Cleanliness", "5 stars"). Also the bar's accessible name. */
   label: string;

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}