@oxy.so/bloom 4.4.0 → 4.6.0

package/src/segmented-control/SegmentedControl.tsx

@@ -32,6 +32,8 @@ import { NOT_DISABLED, interactiveWebCss, useInteractiveWebCss } from '../styles
 import type { WebCssStyle } from '../styles/web-view-style';
 import { mixColor, resolveButtonRamps } from '../button/shared';
 import { useFieldMembership } from '../field/membership';
+import { handleRovingKeyDown, useRovingTabIndex } from '../hooks/roving-focus';
+import { webDataSet } from '../styles/web-data';
 
 /**
  * A segmented control using Bloom's canonical surface and text roles.
@@ -104,6 +106,16 @@ function resolveSegmentedPalette(theme: Theme): SegmentedPalette {
 
 const STYLE_ID = 'bloom-segmented-control-web-css';
 const SEGMENT = '[data-bloom-segmented-item]';
+/** The group node — the owner a segment's keyboard walks within. */
+const GROUP = '[data-bloom-segmented-group]';
+
+/** The attribute that says a segment is the chosen one, per role. */
+function isChosenSegment(element: HTMLElement): boolean {
+  return (
+    element.getAttribute('aria-checked') === 'true' ||
+    element.getAttribute('aria-selected') === 'true'
+  );
+}
 
 const SEGMENTED_CSS = interactiveWebCss({
   selector: SEGMENT,
@@ -230,6 +242,15 @@ export function SegmentedControl<T extends string>({
   const candidate = useSharedValue('');
   const suppressUntil = useRef(0);
   const [release, setRelease] = useState(0);
+  // Web: ONE tab stop for the whole group — the chosen segment — as the ARIA
+  // radio-group and tab patterns require (`hooks/roving-focus.ts`).
+  const groupRef = useRef<View | null>(null);
+  useRovingTabIndex(
+    () => groupRef.current as unknown as Element | null,
+    SEGMENT,
+    isChosenSegment,
+    GROUP,
+  );
   const register = useCallback((segment: SegmentPosition) => {
     segments.value = [...segments.value.filter(item => item.value !== segment.value), segment].sort((a, b) => a.x - b.x);
     return () => { segments.value = segments.value.filter(item => item.value !== segment.value); };
@@ -335,6 +356,8 @@ export function SegmentedControl<T extends string>({
   return (
     <GestureDetector gesture={gesture} touchAction="pan-y">
     <View
+      ref={groupRef}
+      {...webDataSet({ bloomSegmentedGroup: '' })}
       testID={testID}
       nativeID={field.nativeID}
       accessibilityLabel={field.accessibilityLabel}
@@ -456,6 +479,27 @@ export function SegmentedControlItem({
   const itemRole = ctx.type === 'tabs' ? 'tab' : 'radio';
   const geometry = GEOMETRY[ctx.size];
 
+  // Web keyboard, per the ARIA pattern the group's role names. A radio group
+  // answers all four arrows and has no Home/End; a tab strip answers
+  // Left/Right plus Home/End. Both select as focus moves — the control is a
+  // controlled value with nothing expensive behind a change — and both take
+  // Space, which react-native-web only synthesises for `role="button"`. Enter
+  // stays with react-native-web's own press. `allowKeyboardPress` first, so a
+  // drag's click suppression can never swallow a key.
+  const onKeyDown = useCallback(
+    (event: { key: string; currentTarget: unknown; preventDefault: () => void }) => {
+      ctx.allowKeyboardPress();
+      handleRovingKeyDown(event, {
+        selector: SEGMENT,
+        owner: GROUP,
+        orientation: ctx.type === 'tabs' ? 'horizontal' : 'both',
+        homeEnd: ctx.type === 'tabs',
+        activate: 'follow',
+      });
+    },
+    [ctx],
+  );
+
   const itemStyle: WebCssStyle = {
     flexGrow: 1,
     flexDirection: 'row',
@@ -488,7 +532,7 @@ export function SegmentedControlItem({
         setPosition(measuredPosition);
       }}>
       <Pressable
-        {...(IS_WEB ? ({ dataSet: { bloomSegmentedItem: '' }, onKeyDown: ctx.allowKeyboardPress } as Record<string, unknown>) : {})}
+        {...(IS_WEB ? ({ dataSet: { bloomSegmentedItem: '' }, onKeyDown } as Record<string, unknown>) : {})}
         onPress={onPress}
         onHoverIn={onHoverIn}
         onHoverOut={onHoverOut}

package/src/select/Select.tsx

@@ -40,12 +40,14 @@ import {
 } from '../styles/styled-primitives';
 import { borderRadius } from '../styles/tokens';
 import {
+  defaultExtractLabel,
   defaultItemValueExtractor,
   ItemContext,
   SelectChevron,
   SelectTriggerStateContext,
   SelectValueRow,
   useSelectItemContext,
+  VALUE_TYPE,
 } from './shared';
 import type {
   SelectContentProps,
@@ -244,15 +246,6 @@ export function SelectValue({
 }
 
 /** `text-body-medium` on `md`, `text-body-2-medium` on `sm` — trigger value and option label alike. */
-const VALUE_TYPE = { md: 'body-medium', sm: 'body-2-medium' } as const;
-
-function defaultExtractLabel(item: unknown): React.ReactNode {
-  if (item != null && typeof item === 'object' && 'label' in item) {
-    return (item as { label: React.ReactNode }).label;
-  }
-  return String(item);
-}
-
 // ---------------------------------------------------------------------------
 // SelectIcon
 // ---------------------------------------------------------------------------
@@ -399,8 +392,8 @@ export function SelectItem({
   }, [close, onValueChange, value]);
 
   const itemCtx = useMemo<SelectItemContextValue>(
-    () => ({ selected: isSelected, disabled }),
-    [isSelected, disabled],
+    () => ({ selected: isSelected, disabled, size }),
+    [isSelected, disabled, size],
   );
   // Press, focus and the chosen option share the row highlight.
   const highlighted = !disabled && (focused || pressed || isSelected);
@@ -434,70 +427,14 @@ export function SelectItem({
 // SelectItemText
 // ---------------------------------------------------------------------------
 
-export function SelectItemText({ children, className, style }: SelectItemTextProps) {
-  const { size } = useSelectContext();
-  const { disabled } = useSelectItemContext();
-  const palette = useMenuPalette();
-  // The selected option is marked with the check and the row highlight: its
-  // label stays at the same weight as every other row's, which is what the
-  // target does.
-  return (
-    <StyledText
-      numberOfLines={1}
-      className={cx(
-        SELECT_ITEM_TEXT_CLASS[size],
-        menuTypeClass(VALUE_TYPE[size], className),
-        className && 'text-foreground',
-        className,
-      )}
-      style={[
-        menuType(VALUE_TYPE[size], className),
-        className ? null : { color: disabled ? palette.textDisabled : palette.text },
-        style,
-      ]}>
-      {children}
-    </StyledText>
-  );
-}
-
 // ---------------------------------------------------------------------------
 // SelectItemIndicator
 // ---------------------------------------------------------------------------
 
-export function SelectItemIndicator({ icon: IconComponent = CheckIcon }: SelectItemIndicatorProps) {
-  const palette = useMenuPalette();
-  const { selected } = useSelectItemContext();
-
-  // The same right-hand gutter the web fork draws: `absolute right-2 size-3.5`
-  // holding a `text-muted-foreground size-4` check. It used to default to
-  // `RadioIndicator` in the row's FLOW on the left, so a select on native and
-  // the same select on web disagreed about both the mark and the side it is on.
-  if (!selected) return null;
-
-  return (
-    <StyledView className={ROW_INDICATOR_END_CLASS} pointerEvents="none">
-      <IconComponent
-        width={ROW_ICON_SIZE}
-        height={ROW_ICON_SIZE}
-        fill={palette.textSecondary}
-      />
-    </StyledView>
-  );
-}
-
 // ---------------------------------------------------------------------------
 // SelectSeparator
 // ---------------------------------------------------------------------------
 
-export function SelectSeparator() {
-  const palette = useMenuPalette();
-  // `-mx-2 my-1.5 h-px bg-border-button-default` — a filled 1px rule, not a
-  // bottom border on a stretched box.
-  return (
-    <StyledView className={SELECT_SEPARATOR_CLASS} style={{ backgroundColor: palette.border }} />
-  );
-}
-
 // ---------------------------------------------------------------------------
 // Styles
 // ---------------------------------------------------------------------------

package/src/select/Select.web.tsx

@@ -1,6 +1,7 @@
 import { useBloomAppearance } from '../appearance';
 import React, {
   createContext,
+  useCallback,
   useContext,
   useEffect,
   useLayoutEffect,
@@ -42,12 +43,14 @@ import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import { borderRadius } from '../styles/tokens';
 import type { WebCssStyle } from '../styles/web-view-style';
 import {
+  defaultExtractLabel,
   defaultItemValueExtractor,
   ItemContext,
   SelectChevron,
   SelectTriggerStateContext,
   SelectValueRow,
   useSelectItemContext,
+  VALUE_TYPE,
 } from './shared';
 import type {
   SelectContentProps,
@@ -61,10 +64,17 @@ import type {
   SelectValueProps,
 } from './types';
 import { useFieldMembership } from '../field/membership';
+import { isSpaceKey, rovingItems, rovingMove, rovingTarget } from '../hooks/roving-focus';
+import { hostElement, useReturnFocusOnClose } from '../floating/menu-keyboard';
 
 /** The trigger's `offset={4}`. */
 const SELECT_OFFSET = 4;
 
+/** An option row, marked through `dataSet` — a class never reaches the DOM. */
+const OPTION = '[data-bloom-select-option]';
+/** The option list, so a nested list's rows are never counted as this one's. */
+const LIST = '[data-bloom-select-list]';
+
 /**
  * The trigger's interactive states — `hover:bg-background-primary-hover
  * hover:border-border-button-hover` and `focus-visible:ring-2 ring-offset-2
@@ -129,6 +139,15 @@ type SelectContextValue = Pick<SelectProps, 'value' | 'onValueChange' | 'disable
   close: () => void;
   /** The trigger box, so `SelectContent` can anchor itself against it. */
   triggerRef: React.RefObject<View | null>;
+  /**
+   * Set by a key on the trigger (Enter, Space, ArrowDown, ArrowUp) and consumed
+   * by `SelectContent`, which moves focus into the list only when the key asked
+   * for it. A pointer open leaves focus where the pointer put it.
+   */
+  keyboardIntent: React.MutableRefObject<boolean>;
+  /** Bumped to ask an ALREADY-open list to take focus (an arrow on its trigger). */
+  focusRequest: number;
+  requestListFocus: () => void;
 };
 
 const SelectContext = createContext<SelectContextValue | null>(null);
@@ -166,6 +185,8 @@ export function Select({ children, value, onValueChange, disabled, size: sizePro
   const [isOpen, setIsOpen] = useState(false);
   const triggerRef = useRef<View | null>(null);
   const valueStoreState = useState<unknown>(undefined);
+  const keyboardIntent = useRef(false);
+  const [focusRequest, setFocusRequest] = useState(0);
 
   const ctx = useMemo<SelectContextValue>(
     () => ({
@@ -177,8 +198,14 @@ export function Select({ children, value, onValueChange, disabled, size: sizePro
       open: () => setIsOpen(true),
       close: () => setIsOpen(false),
       triggerRef,
+      keyboardIntent,
+      focusRequest,
+      requestListFocus: () => {
+        keyboardIntent.current = true;
+        setFocusRequest((count) => count + 1);
+      },
     }),
-    [value, onValueChange, disabled, size, isOpen],
+    [value, onValueChange, disabled, size, isOpen, focusRequest],
   );
 
   return (
@@ -258,6 +285,35 @@ export function SelectTrigger({
     [isDisabled, ctx.isOpen, ctx.size],
   );
 
+  // The keyboard's way INTO the list (ARIA select-only combobox). Enter and
+  // Space already press the trigger through react-native-web; they only mark
+  // the open as a keyboard one here, so the list takes focus when it arrives.
+  // ArrowDown/ArrowUp open it too — and on a list the pointer already opened,
+  // they move focus into it.
+  //
+  // A DOM listener on the anchor wrapper rather than an `onKeyDown` prop: under
+  // `asChild` the control is the caller's element, whose props this family does
+  // not own. The wrapper holds only the trigger, and its bubble listener runs
+  // before React's root-level handlers.
+  const { isOpen, open, keyboardIntent, requestListFocus, triggerRef } = ctx;
+  useEffect(() => {
+    const wrapper = hostElement(triggerRef.current);
+    if (!wrapper || isDisabled) return undefined;
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.defaultPrevented) return;
+      if (event.key === 'Enter' || isSpaceKey(event.key)) {
+        if (!isOpen) keyboardIntent.current = true;
+        return;
+      }
+      if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
+      event.preventDefault();
+      if (!isOpen) open();
+      requestListFocus();
+    };
+    wrapper.addEventListener('keydown', onKeyDown);
+    return () => wrapper.removeEventListener('keydown', onKeyDown);
+  }, [triggerRef, isDisabled, isOpen, open, keyboardIntent, requestListFocus]);
+
   return (
     <SelectTriggerStateContext.Provider value={triggerState}>
       <TriggerSlot
@@ -338,15 +394,6 @@ export function SelectValue({
 }
 
 /** `text-body-medium` on `md`, `text-body-2-medium` on `sm` — trigger value and option label alike. */
-const VALUE_TYPE = { md: 'body-medium', sm: 'body-2-medium' } as const;
-
-function defaultExtractLabel(item: unknown): React.ReactNode {
-  if (item != null && typeof item === 'object' && 'label' in item) {
-    return (item as { label: React.ReactNode }).label;
-  }
-  return String(item);
-}
-
 // ---------------------------------------------------------------------------
 // SelectIcon
 // ---------------------------------------------------------------------------
@@ -393,6 +440,76 @@ export function SelectContent<T>({
   }, [items, ctx.value, valueExtractor, setStoredItem]);
   const anchor = useAnchorRect(ctx.triggerRef, ctx.isOpen);
   const listRef = useRef<ScrollView | null>(null);
+  // The list's DOM node as STATE as well: the panel portals in a render after it
+  // opens, and the keyboard listener and the initial focus both need the node.
+  const [listNode, setListNode] = useState<HTMLElement | null>(null);
+  const listNodeRef = useRef<HTMLElement | null>(null);
+  const attachList = useCallback((scrollView: ScrollView | null) => {
+    listRef.current = scrollView;
+    const node = hostElement(scrollView);
+    listNodeRef.current = node;
+    setListNode(node);
+  }, []);
+
+  const { isOpen, close, keyboardIntent, focusRequest, triggerRef } = ctx;
+
+  // A keyboard open lands focus on the chosen option, or the first enabled one
+  // — the ARIA listbox contract. Without it the list opened and focus stayed on
+  // the trigger, where the arrows did nothing: a keyboard user could open the
+  // select and never choose.
+  useEffect(() => {
+    if (!isOpen || !listNode || !keyboardIntent.current) return;
+    keyboardIntent.current = false;
+    const options = rovingItems(listNode, OPTION, { owner: LIST });
+    const chosen =
+      options.find((option) => option.getAttribute('aria-checked') === 'true') ?? options[0];
+    chosen?.focus({ preventScroll: true });
+  }, [isOpen, listNode, focusRequest, keyboardIntent]);
+
+  // Keys inside the open list. ArrowDown/ArrowUp step between enabled options
+  // and stop at the ends; Home/End jump to them; Space chooses — react-native-web
+  // presses a `radio` on Enter only, so Enter is already the option's own; Tab
+  // closes the list and hands focus back to the trigger, the way a native
+  // select does. Escape is `FloatingPanel`'s (it closes the innermost surface
+  // only), and the close below returns focus.
+  useEffect(() => {
+    if (!listNode) return undefined;
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.defaultPrevented) return;
+      const active =
+        typeof document !== 'undefined' ? (document.activeElement as HTMLElement | null) : null;
+      const current = active?.closest?.(OPTION) ?? null;
+      if (event.key === 'Tab') {
+        event.preventDefault();
+        close();
+        return;
+      }
+      if (isSpaceKey(event.key)) {
+        if (!current || current.getAttribute('aria-disabled') === 'true') return;
+        event.preventDefault();
+        (current as HTMLElement).click();
+        return;
+      }
+      const move = rovingMove(event.key, { orientation: 'vertical', homeEnd: true });
+      if (move === null) return;
+      event.preventDefault();
+      rovingTarget(rovingItems(listNode, OPTION, { owner: LIST }), current, move, false)?.focus();
+    };
+    listNode.addEventListener('keydown', onKeyDown);
+    return () => listNode.removeEventListener('keydown', onKeyDown);
+  }, [listNode, close]);
+
+  // Closing hands focus back to the trigger when it was inside the list — a
+  // choice, Escape, Tab — so the next Tab continues from the select instead of
+  // from the top of the document (`floating/menu-keyboard.ts`).
+  useEffect(() => {
+    if (!isOpen) keyboardIntent.current = false;
+  }, [isOpen, keyboardIntent]);
+  useReturnFocusOnClose(
+    triggerRef,
+    isOpen,
+    useCallback((element: Element) => listNodeRef.current?.contains(element) === true, []),
+  );
 
   // The list is a plain `max-h-[240px] overflow-auto` box: the native
   // scrollbar and nothing else. It used to carry shadcn's scroll-up/down
@@ -447,7 +564,8 @@ export function SelectContent<T>({
       className={className}
     >
       <ScrollView
-        ref={listRef}
+        ref={attachList}
+        {...({ dataSet: { bloomSelectList: '' } } as Record<string, unknown>)}
         style={{ maxHeight }}
         // `flex flex-col gap-1` — the rows sit 4px apart.
         contentContainerStyle={styles.list}
@@ -477,6 +595,7 @@ export function SelectItem({
   style,
 }: SelectItemProps) {
   const ctx = useSelectContext();
+  const { size } = ctx;
   const palette = useMenuPalette();
   const {
     state: hovered,
@@ -491,8 +610,8 @@ export function SelectItem({
   // background below, but they are no longer PUBLISHED — nothing ever read
   // them, and `pressed` was published as a literal `false`.
   const itemCtx = useMemo<SelectItemContextValue>(
-    () => ({ selected: isSelected, disabled }),
-    [isSelected, disabled],
+    () => ({ selected: isSelected, disabled, size }),
+    [isSelected, disabled, size],
   );
   // `(isFocused || isSelected) && MENU_ITEM_ACTIVE`: hover, keyboard
   // focus and the chosen option share one `dropdown-item-hover-background`.
@@ -502,6 +621,7 @@ export function SelectItem({
     <StyledPressable
       ref={ref}
       accessibilityRole="radio"
+      {...({ dataSet: { bloomSelectOption: '' } } as Record<string, unknown>)}
       // The native fork has always applied this; web declared `label` and then
       // dropped it, leaving every option a `role="radio"` with no accessible
       // name for a screen reader to announce.
@@ -549,70 +669,14 @@ export function SelectItem({
 // SelectItemText
 // ---------------------------------------------------------------------------
 
-export function SelectItemText({ children, className, style }: SelectItemTextProps) {
-  const { size } = useSelectContext();
-  const { disabled } = useSelectItemContext();
-  const palette = useMenuPalette();
-  // `text-text-primary`, or `text-text-disabled` on a disabled option. Inline
-  // only without a caller `className` (see `SelectValue`).
-  return (
-    <StyledText
-      numberOfLines={1}
-      className={cx(
-        SELECT_ITEM_TEXT_CLASS[size],
-        menuTypeClass(VALUE_TYPE[size], className),
-        className && 'text-foreground',
-        className,
-      )}
-      style={[
-        menuType(VALUE_TYPE[size], className),
-        className ? null : { color: disabled ? palette.textDisabled : palette.text },
-        style,
-      ]}>
-      {children}
-    </StyledText>
-  );
-}
-
 // ---------------------------------------------------------------------------
 // SelectItemIndicator
 // ---------------------------------------------------------------------------
 
-export function SelectItemIndicator({ icon: IconComponent = CheckIcon }: SelectItemIndicatorProps) {
-  const palette = useMenuPalette();
-  const { selected } = useSelectItemContext();
-
-  // `absolute right-2 flex size-3.5 items-center justify-center` holding
-  // a `size-4 text-text-secondary` check. A select's tick sits on the RIGHT — the
-  // opposite side from a menu's — which is what leaves the option's own text
-  // starting flush at `pl-2` like every other line in the panel. Bloom drew it in
-  // a 30px LEFT gutter, so a select and a dropdown menu disagreed about which
-  // edge a selection mark belongs on.
-  if (!selected) return null;
-
-  return (
-    <StyledView className={ROW_INDICATOR_END_CLASS} pointerEvents="none">
-      <IconComponent
-        width={ROW_ICON_SIZE}
-        height={ROW_ICON_SIZE}
-        fill={palette.textSecondary}
-      />
-    </StyledView>
-  );
-}
-
 // ---------------------------------------------------------------------------
 // SelectSeparator
 // ---------------------------------------------------------------------------
 
-export function SelectSeparator() {
-  const palette = useMenuPalette();
-  // `-mx-2 my-1.5 h-px bg-border-button-default`, bleeding through the listbox's `p-2`.
-  return (
-    <StyledView className={SELECT_SEPARATOR_CLASS} style={{ backgroundColor: palette.border }} />
-  );
-}
-
 const styles = StyleSheet.create({
   // `TriggerSlot`'s wrapper is `alignSelf: 'flex-start'` so an anchored surface
   // lines up with the CONTROL. A select trigger is a full-width field, so it

package/src/select/index.ts

@@ -1,16 +1,16 @@
 export {
-  useSelectItemContext,
   Select,
   SelectTrigger,
   SelectValue,
   SelectIcon,
   SelectContent,
   SelectItem,
+} from './Select';
+export {
+  useSelectItemContext,
   SelectItemText,
   SelectItemIndicator,
   SelectSeparator,
-} from './Select';
-export {
   SelectGroup,
   SelectLabel,
   SelectScrollProvider,

package/src/select/index.web.ts

@@ -1,16 +1,21 @@
+// AUTO-GENERATED by scripts/generate-platform-exports.mjs — DO NOT EDIT.
+// Source of truth: src/select/index.ts.
+// Re-run `bun run generate:exports` (or any `bun run build`) after
+// changing that barrel or the set of web-forked subpaths.
+
 export {
-  useSelectItemContext,
   Select,
   SelectTrigger,
   SelectValue,
   SelectIcon,
   SelectContent,
   SelectItem,
+} from './Select.web';
+export {
+  useSelectItemContext,
   SelectItemText,
   SelectItemIndicator,
   SelectSeparator,
-} from './Select.web';
-export {
   SelectGroup,
   SelectLabel,
   SelectScrollProvider,