@lotics/ui 5.9.0 → 5.10.1

package/src/picker.tsx

@@ -1,13 +1,12 @@
 import { Picker as RNPicker } from "@react-native-picker/picker";
-import { StyleSheet, View, Pressable, StyleProp, ViewStyle, TextStyle } from "react-native";
-import { useState, useCallback, useMemo, useEffect, useRef } from "react";
+import { StyleSheet, View, StyleProp, ViewStyle, TextStyle } from "react-native";
+import { useCallback, useEffect, useRef } from "react";
 import { colors } from "./colors";
-import { ACTIVE_RING, CONTROL_RADIUS } from "./control_surface";
-import { Text } from "./text";
+import { FOCUS_RING, CONTROL_RADIUS, HOVER_BORDER, CONTROL_TRANSITION } from "./control_surface";
+import { useFocusRing } from "./use_focus_ring";
+import { useHover } from "./use_hover";
 import { fontFamilyRegular, getInputTextStyle } from "./text_utils";
 import { Icon } from "./icon";
-import { Popover, PopoverTrigger, PopoverContent } from "./popover";
-import { PickerMenu } from "./picker_menu";
 
 export interface PickerOption<T extends string = string, D = unknown> {
   label?: string;
@@ -31,43 +30,30 @@ export type PickerOnClose<T extends string, MULTI extends boolean> = MULTI exten
   ? (value: T[]) => void
   : (value: T) => void;
 
-export interface PickerProps<T extends string = string, MULTI extends boolean = false> {
+export interface PickerProps<T extends string = string> {
   options?: (PickerOption<T> | undefined | false)[];
   placeholder?: string;
   /** Accessible name for the control. Required in spirit whenever the picker
    *  has no visible label next to it (e.g. an unlabeled toolbar filter) — the
    *  selected option's text describes the value, not the control. */
   accessibilityLabel?: string;
-  renderOptionContent?: (option: PickerOption<T>) => React.ReactNode;
   style?: StyleProp<ViewStyle>;
   testID?: string;
   disabled?: boolean;
   autoFocus?: boolean;
-  enableSelectAll?: boolean;
-  multi?: MULTI;
   includeEmptyOption?: boolean;
-  value?: PickerValue<T, MULTI> | null;
-  onValueChange?: PickerOnValueChange<T, MULTI>;
-  onClose?: PickerOnClose<T, MULTI>;
-  /** Label for the "select all" link in multi-select mode. Default: "Select all" */
-  selectAllLabel?: string;
-  /** Label for the "deselect all" link in multi-select mode. Default: "Deselect all" */
-  deselectAllLabel?: string;
+  value?: T | null;
+  onValueChange?: (value: T) => void;
 }
 
 /**
- * Main Picker component that delegates to the appropriate sub-component based on props.
+ * A plain, label-only single select rendered as the native `<select>` (the OS
+ * dropdown, with native typeahead). The lightest "pick one from a known list"
+ * control. For RICH options (badges, member chips), multi-select, select-all, or
+ * a chip box (`renderSelected` → `Chip`), use `Select`; to SEARCH a large/remote/free
+ * set with the input AS the control use `Combobox`.
  */
-export function Picker<T extends string, MULTI extends boolean = false>(
-  props: PickerProps<T, MULTI>,
-) {
-  if (props.multi || props.renderOptionContent) {
-    return <CustomPicker {...props} />;
-  }
-  return <StandardPicker {...(props as PickerProps<T, false>)} />;
-}
-
-function StandardPicker<T extends string>(props: PickerProps<T, false>) {
+export function Picker<T extends string>(props: PickerProps<T>) {
   const {
     testID,
     options = [],
@@ -82,6 +68,9 @@ function StandardPicker<T extends string>(props: PickerProps<T, false>) {
   } = props;
 
   const pickerRef = useRef<RNPicker<string>>(null);
+  // The native <select> is a text-like control — ring on any focus (like the inputs).
+  const { focusVisible, focusProps } = useFocusRing({ always: true });
+  const { hovered, hoverProps } = useHover();
 
   useEffect(() => {
     if (autoFocus && !disabled) {
@@ -89,15 +78,15 @@ function StandardPicker<T extends string>(props: PickerProps<T, false>) {
     }
   }, [autoFocus, disabled]);
 
-  const handleStandardPickerChange = useCallback(
+  const handleChange = useCallback(
     (newValue: string) => {
-      (onValueChange as (value: T) => void)?.(newValue as T);
+      onValueChange?.(newValue as T);
     },
     [onValueChange],
   );
 
   return (
-    <View>
+    <View {...(hoverProps as object)}>
       <View
         style={{
           position: "absolute",
@@ -112,12 +101,14 @@ function StandardPicker<T extends string>(props: PickerProps<T, false>) {
         ref={pickerRef}
         testID={testID}
         accessibilityLabel={accessibilityLabel}
+        onFocus={focusProps.onFocus}
+        onBlur={focusProps.onBlur}
         // Empty selection maps to "" (the placeholder option's value), never
         // undefined — otherwise the native <select> goes uncontrolled and a
         // programmatic reset to null leaves the prior DOM selection in place.
         selectedValue={value?.toString() ?? ""}
-        onValueChange={handleStandardPickerChange}
-        style={[styles.picker, getInputTextStyle(), style as StyleProp<TextStyle>]}
+        onValueChange={handleChange}
+        style={[styles.picker, CONTROL_TRANSITION, getInputTextStyle(), style as StyleProp<TextStyle>, hovered && !disabled ? { borderColor: HOVER_BORDER } : null, focusVisible ? { boxShadow: FOCUS_RING } : null]}
         placeholder={placeholder}
         enabled={!disabled}
       >
@@ -143,168 +134,6 @@ function StandardPicker<T extends string>(props: PickerProps<T, false>) {
   );
 }
 
-function CustomPicker<T extends string, MULTI extends boolean = false>(
-  props: PickerProps<T, MULTI>,
-) {
-  const {
-    testID,
-    options = [],
-    value,
-    placeholder,
-    accessibilityLabel,
-    multi = false as MULTI,
-    renderOptionContent,
-    includeEmptyOption,
-    style,
-    disabled = false,
-    autoFocus = false,
-    enableSelectAll = false,
-    onValueChange,
-    onClose,
-    selectAllLabel,
-    deselectAllLabel,
-  } = props;
-
-  const [open, setOpen] = useState(autoFocus);
-
-  const handleToggle = useCallback(() => {
-    if (!disabled) {
-      setOpen((prev) => !prev);
-    }
-  }, [disabled]);
-
-  const selectedItems = useSelectedItems(multi, value, options);
-
-  const handleClose = useCallback(() => {
-    setOpen(false);
-  }, []);
-
-  return (
-    <Popover
-      open={open && !disabled}
-      onOpenChange={setOpen}
-      side="bottom"
-      align="start"
-      inheritTriggerWidth={true}
-    >
-      <PopoverTrigger>
-        <PickerTrigger
-          testID={testID}
-          open={open}
-          style={style}
-          onPress={handleToggle}
-          renderOptionContent={renderOptionContent}
-          selectedItems={selectedItems}
-          placeholder={placeholder}
-          accessibilityLabel={accessibilityLabel}
-          disabled={disabled}
-        />
-      </PopoverTrigger>
-      <PopoverContent>
-        <PickerMenu
-          options={options}
-          multi={multi}
-          value={value}
-          onValueChange={onValueChange}
-          onClose={onClose}
-          onRequestClose={handleClose}
-          renderOptionContent={renderOptionContent}
-          enableSelectAll={enableSelectAll}
-          includeEmptyOption={includeEmptyOption}
-          selectAllLabel={selectAllLabel}
-          deselectAllLabel={deselectAllLabel}
-        />
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-function useSelectedItems<T extends string>(
-  multi: boolean,
-  value: T | T[] | undefined | null,
-  options: (PickerOption<T> | undefined | false)[],
-): PickerOption<T>[] {
-  return useMemo(() => {
-    if (multi) {
-      const multiValue = Array.isArray(value) ? value : [];
-      const optionsMap = new Map(
-        options.filter((opt): opt is PickerOption<T> => !!opt).map((opt) => [opt.value, opt]),
-      );
-      return multiValue
-        .map((val) => optionsMap.get(val))
-        .filter((opt): opt is PickerOption<T> => !!opt);
-    } else {
-      const singleValue = Array.isArray(value) ? value[0] : value;
-      if (singleValue !== undefined && singleValue !== null) {
-        const selected = options.find((option) => option && option.value === singleValue);
-        return selected ? [selected] : [];
-      }
-    }
-    return [];
-  }, [multi, value, options]);
-}
-
-function PickerTrigger<T extends string>({
-  ref,
-  testID,
-  open,
-  style,
-  onPress,
-  renderOptionContent,
-  selectedItems,
-  placeholder,
-  accessibilityLabel,
-  disabled = false,
-}: {
-  ref?: React.Ref<View>;
-  testID?: string;
-  open: boolean;
-  style?: StyleProp<ViewStyle>;
-  onPress: () => void;
-  renderOptionContent?: (option: PickerOption<T>) => React.ReactNode;
-  selectedItems: PickerOption<T>[];
-  placeholder?: string;
-  accessibilityLabel?: string;
-  disabled?: boolean;
-}) {
-  const hasSelection = selectedItems.length > 0;
-
-  return (
-    <Pressable
-      ref={ref}
-      testID={testID}
-      // Without a role this Pressable renders as an unfocusable <div> on web —
-      // the trigger drops out of the tab order and Enter/Space can't open it.
-      // `button` makes it tab-focusable and maps keyboard activation to onPress;
-      // `expanded` announces open/closed to assistive tech. The accessible name
-      // comes from `accessibilityLabel` when given (an unlabeled control), else
-      // the visible selection/placeholder text below.
-      accessibilityRole="button"
-      accessibilityLabel={accessibilityLabel}
-      accessibilityState={{ expanded: open, disabled }}
-      style={[styles.pressable, open && styles.opened, disabled && styles.disabled, style]}
-      onPress={!disabled ? onPress : undefined}
-      disabled={disabled}
-    >
-      {hasSelection ? (
-        renderOptionContent ? (
-          <View style={{ flexDirection: "row", gap: 4, flexWrap: "wrap" }}>
-            {selectedItems.map((item) => (
-              <View key={item.value}>{renderOptionContent(item)}</View>
-            ))}
-          </View>
-        ) : (
-          <Text userSelect="none">{selectedItems.map((s) => s.label).join(", ")}</Text>
-        )
-      ) : (
-        <Text color="zinc-500" userSelect="none">
-          {placeholder}
-        </Text>
-      )}
-    </Pressable>
-  );
-}
-
 const styles = StyleSheet.create({
   picker: {
     height: 40,
@@ -318,22 +147,4 @@ const styles = StyleSheet.create({
     backgroundColor: "transparent",
     appearance: "none",
   },
-  pressable: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingHorizontal: 6,
-    borderWidth: 1,
-    borderColor: colors.border,
-    borderRadius: CONTROL_RADIUS,
-    cursor: "auto",
-    height: 40,
-  },
-  opened: {
-    // Mouse-opened, so no `:focus-visible` — wear the same 2px zinc ring a
-    // focused input gets, over the unchanged 1px border (not a lone 1px edge).
-    boxShadow: ACTIVE_RING,
-  },
-  disabled: {
-    opacity: 0.5,
-  },
 });

package/src/pressable_highlight.tsx

@@ -2,6 +2,7 @@ import {
   GestureResponderEvent,
   Pressable,
   PressableProps,
+  PressableStateCallbackType,
   View,
   StyleProp,
   ViewStyle,
@@ -9,23 +10,40 @@ import {
 import { Ref, useCallback } from "react";
 import { TooltipSide, useTooltip } from "./tooltip";
 import { colors } from "./colors";
+import { FOCUS_RING } from "./control_surface";
+import { composeHandler, useFocusRing } from "./use_focus_ring";
 
-function composeHandler<E>(
-  a: ((event: E) => void) | undefined,
-  b: ((event: E) => void) | undefined,
-): ((event: E) => void) | undefined {
-  if (!a) return b;
-  if (!b) return a;
-  return (event: E) => {
-    a(event);
-    b(event);
-  };
-}
+/** The pressable state, plus the web-only `hovered` flag react-native-web adds and
+ *  the `focusVisible` flag PressableHighlight injects so a consumer's style-fn /
+ *  children can paint their own focus treatment. */
+export type PressableHighlightState = PressableStateCallbackType & {
+  hovered?: boolean;
+  focusVisible?: boolean;
+};
 
 export interface PressableHighlightProps extends PressableProps {
   ref?: Ref<View>;
   tooltip?: string;
   tooltipSide?: TooltipSide;
+  /**
+   * Opt in to the kit `FOCUS_RING` on keyboard focus. Off by default: the focus
+   * treatment is the component's to OWN, not applied blindly — a compact control
+   * sets `focusRing`, while a control with its own ring (e.g. `CardSelectItem`, which
+   * rings on hover/press/focus) instead reads `state.focusVisible` in its `style` fn.
+   * EVERY interactive PressableHighlight must do one or the other; a focusable control
+   * with no focus treatment is a bug (the per-Pressable focus audit is the coverage
+   * gate). A surface that shouldn't ring is a non-control — give it `tabIndex={-1}`
+   * (like `PressableRow`), not a missing `focusRing`. The ring is a later `boxShadow`
+   * entry, so on a focused control it supersedes any resting box-shadow for the focus
+   * duration — read `state.focusVisible` and compose if both must show at once.
+   */
+  focusRing?: boolean;
+  /**
+   * Narrows the Pressable state-function `style` to `PressableHighlightState`, so a
+   * consumer's `style` fn sees `focusVisible` (and `hovered`) and can paint its own
+   * focus/hover treatment — the `state.focusVisible` contract referenced above.
+   */
+  style?: StyleProp<ViewStyle> | ((state: PressableHighlightState) => StyleProp<ViewStyle>);
   /**
    * Web-only keyboard handler. `react-native-web`'s `Pressable` forwards this
    * to the rendered DOM element; native platforms ignore it. Exposed
@@ -56,12 +74,14 @@ export function PressableHighlight(props: PressableHighlightProps) {
     tooltipSide = "top",
     onPress,
     userSelect,
+    focusRing,
     ...restPressableProps
   } = props;
   const tooltipProps = useTooltip({
     side: tooltipSide,
     text: tooltip,
   });
+  const { focusVisible, focusProps } = useFocusRing();
 
   const handlePress = useCallback(
     (event: GestureResponderEvent) => {
@@ -74,10 +94,8 @@ export function PressableHighlight(props: PressableHighlightProps) {
     <Pressable
       ref={ref}
       disabled={disabled}
-      // @ts-ignore hovered is a react-native-web extension not in base RN types
-      style={(state) => {
-        const { pressed } = state;
-        const hovered = (state as { hovered?: boolean }).hovered;
+      style={(state: PressableHighlightState) => {
+        const { pressed, hovered } = state;
         return [
           {
             ...({ touchAction: "manipulation", cursor: disabled ? "auto" : "pointer", transitionDuration: "0.1s", transitionProperty: "background-color", userSelect } as ViewStyle),
@@ -85,22 +103,23 @@ export function PressableHighlight(props: PressableHighlightProps) {
           {
             backgroundColor: pressed ? colors.zinc["200"] : hovered ? colors.zinc["100"] : null,
           },
-          typeof style === "function" ? style(state) : style,
+          typeof style === "function" ? style({ ...state, focusVisible }) : style,
+          focusRing && focusVisible ? { boxShadow: FOCUS_RING } : null,
         ] as StyleProp<ViewStyle>;
       }}
       onPress={handlePress}
       {...restPressableProps}
       // `onFocus` / `onBlur` are part of `PressableProps`, so a trailing
       // `{...tooltipProps}` spread would silently overwrite caller-provided
-      // handlers. Compose instead. Mouse handlers (not in the RN types but
-      // passed through on web) come along with the tooltipProps spread.
+      // handlers. Compose instead — caller + tooltip + the focus-ring tracker.
+      // Mouse handlers (not in the RN types but passed through on web) come along
+      // with the tooltipProps spread.
       {...tooltipProps}
-      onFocus={composeHandler(restPressableProps.onFocus ?? undefined, tooltipProps.onFocus)}
-      onBlur={composeHandler(restPressableProps.onBlur ?? undefined, tooltipProps.onBlur)}
+      onFocus={composeHandler(composeHandler(restPressableProps.onFocus ?? undefined, tooltipProps.onFocus), focusProps.onFocus)}
+      onBlur={composeHandler(composeHandler(restPressableProps.onBlur ?? undefined, tooltipProps.onBlur), focusProps.onBlur)}
     >
-      {(state) => {
-        const hovered = (state as { hovered?: boolean }).hovered;
-        return <>{typeof children === "function" ? children({ ...state, hovered } as typeof state) : children}</>;
+      {(state: PressableHighlightState) => {
+        return <>{typeof children === "function" ? children({ ...state, focusVisible } as PressableStateCallbackType) : children}</>;
       }}
     </Pressable>
   );

package/src/radio_picker.tsx

@@ -115,8 +115,8 @@ function RadioOption<T extends string | number | symbol>(
 
   return (
     <PressableHighlight
-      ref={ref}
-      testID={testID}
+      focusRing
+      ref={ref}      testID={testID}
       style={{
         flexDirection: "row",
         alignItems: "center",

package/src/range_slider.tsx

@@ -2,6 +2,8 @@ import { useRef, useState } from "react";
 import { StyleSheet, View, type GestureResponderEvent, type LayoutChangeEvent, type ViewStyle } from "react-native";
 import { Text } from "./text";
 import { colors } from "./colors";
+import { FOCUS_RING } from "./control_surface";
+import { useFocusRing } from "./use_focus_ring";
 
 const THUMB = 20;
 const R = THUMB / 2;
@@ -23,6 +25,30 @@ export interface RangeSliderProps {
 
 type Thumb = "low" | "high";
 
+function SliderThumb(props: {
+  label: string;
+  min: number;
+  max: number;
+  now: number;
+  left: number;
+  color: string;
+  active: boolean;
+  keyProps: object;
+}) {
+  const { focusVisible, focusProps } = useFocusRing();
+  return (
+    <View
+      accessibilityRole="adjustable"
+      accessibilityLabel={props.label}
+      accessibilityValue={{ min: props.min, max: props.max, now: props.now }}
+      focusable
+      {...focusProps}
+      style={[styles.thumb, { left: props.left, borderColor: props.color }, props.active && styles.thumbActive, focusVisible && { boxShadow: FOCUS_RING }]}
+      {...props.keyProps}
+    />
+  );
+}
+
 /**
  * A short human summary of a range selection for a `FilterChip` preview —
  * "5tr–10tr", or "≥ 5tr" / "≤ 10tr" when one end sits at its bound, and
@@ -129,14 +155,16 @@ export function RangeSlider(props: RangeSliderProps) {
         {(["low", "high"] as const).map((thumb) => {
           const v = thumb === "low" ? low : high;
           return (
-            <View
+            <SliderThumb
               key={thumb}
-              accessibilityRole="adjustable"
-              accessibilityLabel={`${accessibilityLabel} ${thumb === "low" ? "minimum" : "maximum"}`}
-              accessibilityValue={{ min, max, now: v }}
-              focusable
-              style={[styles.thumb, { left: x(v), borderColor: color }, dragging === thumb && styles.thumbActive]}
-              {...keyProps(thumb)}
+              label={`${accessibilityLabel} ${thumb === "low" ? "minimum" : "maximum"}`}
+              min={min}
+              max={max}
+              now={v}
+              left={x(v)}
+              color={color}
+              active={dragging === thumb}
+              keyProps={keyProps(thumb)}
             />
           );
         })}

package/src/react_native.d.ts

@@ -32,11 +32,14 @@ declare module "react-native" {
   }
 
   interface TextStyle {
+    boxShadow?: string;
     outline?: string;
     outlineColor?: string;
     outlineStyle?: string;
     outlineWidth?: number;
     outlineOffset?: number;
+    transitionDuration?: string;
+    transitionProperty?: string;
     appearance?: string;
   }
 }

package/src/scroll_to_bottom.tsx

@@ -14,7 +14,7 @@ export function ScrollToBottom(props: ScrollToBottomProps) {
 
   return (
     <PressableHighlight
-      testID="scroll-to-bottom-button"
+      focusRing      testID="scroll-to-bottom-button"
       tooltip={tooltip}
       onPress={onPress}
       style={styles.button}

package/src/section.tsx

@@ -1,8 +1,10 @@
-import { Pressable, StyleProp, View, ViewStyle } from "react-native";
+import { Pressable, View } from "react-native";
 import { Text } from "./text";
 import { useState, useImperativeHandle } from "react";
 import { Icon, IconName } from "./icon";
 import { Spacer } from "./spacer";
+import { FOCUS_RING } from "./control_surface";
+import { useFocusRing } from "./use_focus_ring";
 
 export interface SectionHandlers {
   expand: () => void;
@@ -46,9 +48,12 @@ export function Section(props: SectionProps) {
     },
   }));
 
+  const { focusVisible, focusProps } = useFocusRing();
+
   const titleComponent = collapsible ? (
     <Pressable
-      style={{ flexDirection: "row", alignItems: "center", gap: 8, flex: 1 }}
+      {...focusProps}
+      style={[{ flexDirection: "row", alignItems: "center", gap: 8, flex: 1 }, focusVisible && { boxShadow: FOCUS_RING, borderRadius: 4 }]}
       onPress={() => setCollapsed(!collapsed)}
     >
       <Icon name={collapsed ? "chevron-right" : "chevron-down"} size={20} />

package/src/segmented_control.tsx

@@ -126,8 +126,8 @@ function Segment<T extends string>(props: SegmentProps<T>) {
 
   return (
     <PressableHighlight
-      ref={ref}
-      // Own the per-state background: the track is zinc-100, so an unselected
+      focusRing
+      ref={ref}      // Own the per-state background: the track is zinc-100, so an unselected
       // segment hovering must lift TOWARD the selected white (a half-white wash),
       // not to PressableHighlight's default zinc-100 (invisible on the track).
       style={(state) => {