@lotics/ui 5.9.0 → 5.10.1

package/src/inline_edit.tsx

@@ -1,11 +1,11 @@
 import { useCallback, useRef, useState, type ReactNode, type Ref } from "react";
-import { View, StyleSheet } from "react-native";
+import { View, StyleSheet, type GestureResponderEvent } from "react-native";
 import { Text } from "./text";
 import { IconButton } from "./icon_button";
 import { ActivityIndicator } from "./activity_indicator";
 import { PressableHighlight } from "./pressable_highlight";
 import { colors } from "./colors";
-import { ACTIVE_RING, CONTROL_RADIUS } from "./control_surface";
+import { FOCUS_RING, CONTROL_RADIUS } from "./control_surface";
 import { fontFamilyRegular, getInputTextStyle } from "./text_utils";
 
 /** The kit's standard control height (TextInputField, NumberInput, Picker, …).
@@ -99,6 +99,8 @@ interface InlineEditFrameProps {
   disabled?: boolean;
   /** Accessible name for the view button when there's no enclosing FormField. */
   accessibilityLabel?: string;
+  /** Strike + mute the resting value (a completed item that stays editable). */
+  struck?: boolean;
 }
 
 interface InlineEditViewProps {
@@ -115,6 +117,8 @@ interface InlineEditViewProps {
   /** True while the field's popover (select/date) is open: wears the 2px active
    *  ring so a mouse-opened trigger reads like a focused input (no `:focus-visible`). */
   active?: boolean;
+  /** Strike + mute the resting value (a completed/superseded item that stays editable). */
+  struck?: boolean;
   ref?: Ref<View>;
 }
 
@@ -127,19 +131,28 @@ interface InlineEditViewProps {
  * select/date inline editors (it forwards ref + onPress to a `PopoverTrigger`).
  */
 export function InlineEditView(props: InlineEditViewProps) {
-  const { display, placeholder, onPress, disabled, accessibilityLabel, trailing, active, ref } = props;
+  const { display, placeholder, onPress, disabled, accessibilityLabel, trailing, active, struck, ref } = props;
+  // Stop the press here so an inline editor nested in a pressable row (a task
+  // row that expands on press) edits the field instead of triggering the row.
+  const handlePress = onPress
+    ? (e: GestureResponderEvent) => {
+        e?.stopPropagation?.();
+        onPress();
+      }
+    : undefined;
   return (
     <PressableHighlight
+      focusRing
       ref={ref}
       disabled={disabled}
-      onPress={onPress}
+      onPress={handlePress}
       accessibilityRole="button"
       accessibilityLabel={accessibilityLabel}
       userSelect="none"
       style={[styles.view, active && styles.viewActive]}
     >
       {typeof display === "string" ? (
-        <Text numberOfLines={1} style={[viewTextStyle, display ? null : styles.placeholder]}>
+        <Text numberOfLines={1} style={[viewTextStyle, display ? null : styles.placeholder, struck ? styles.struck : null]}>
           {display || placeholder || "—"}
         </Text>
       ) : (
@@ -171,6 +184,7 @@ export function InlineEditFrame(props: InlineEditFrameProps) {
     error,
     disabled,
     accessibilityLabel,
+    struck,
   } = props;
 
   if (!editing) {
@@ -181,6 +195,7 @@ export function InlineEditFrame(props: InlineEditFrameProps) {
         onPress={onBegin}
         disabled={disabled}
         accessibilityLabel={accessibilityLabel}
+        struck={struck}
       />
     );
   }
@@ -233,9 +248,10 @@ const styles = StyleSheet.create({
   // under the 2px active ring — identical to a focused input.
   viewActive: {
     borderColor: colors.border,
-    boxShadow: ACTIVE_RING,
+    boxShadow: FOCUS_RING,
   },
   placeholder: { color: colors.zinc[400] },
+  struck: { textDecorationLine: "line-through", color: colors.zinc[500] },
   viewNode: { flex: 1, minWidth: 0 },
   editRow: { flexDirection: "row", alignItems: "flex-start", gap: 6 },
   editControl: { flex: 1, position: "relative" },

package/src/inline_member_select.tsx

@@ -55,7 +55,7 @@ export function InlineMemberSelect(props: InlineMemberSelectProps) {
     <InlineSelect<string>
       options={options}
       renderOptionContent={renderMember}
-      renderValue={renderMember}
+      renderSelected={renderMember}
       {...inline}
     />
   );

package/src/inline_select.tsx

@@ -4,7 +4,7 @@ import { Icon } from "./icon";
 import { Text } from "./text";
 import { colors } from "./colors";
 import { Popover, PopoverTrigger, PopoverContent } from "./popover";
-import { PickerMenu } from "./picker_menu";
+import { OptionList } from "./option_list";
 import type { PickerOption } from "./picker";
 import { ActivityIndicator } from "./activity_indicator";
 import { InlineEditView } from "./inline_edit";
@@ -14,12 +14,12 @@ export interface InlineSelectProps<T extends string> {
   onSave: (next: T) => void | Promise<void>;
   options: PickerOption<T>[];
   /** Custom option content in the dropdown (icon + label, two-line, a badge…).
-   *  Omit for a plain label list — both render through the same `PickerMenu`. */
+   *  Omit for a plain label list — both render through the same `OptionList`. */
   renderOptionContent?: (option: PickerOption<T>) => React.ReactNode;
   /** Render the SELECTED value in the resting view as a node (an avatar chip, a
    *  colored badge) instead of its plain label. Falls back to the label when
    *  omitted; the empty state always shows the placeholder. */
-  renderValue?: (selected: PickerOption<T>) => React.ReactNode;
+  renderSelected?: (selected: PickerOption<T>) => React.ReactNode;
   placeholder?: string;
   disabled?: boolean;
   accessibilityLabel?: string;
@@ -27,13 +27,13 @@ export interface InlineSelectProps<T extends string> {
 
 /**
  * An inline-editable single-select. The value reads as plain text; clicking it
- * floats the option list (a `PickerMenu`) in a popover anchored to the view, so
+ * floats the option list (an `OptionList`) in a popover anchored to the view, so
  * the row never changes height. Picking commits; dismissing reverts. Pass
  * `renderOptionContent` for rich options, or omit it for a plain list — the
  * standard and custom-rendered pickers are both supported here.
  */
 export function InlineSelect<T extends string>(props: InlineSelectProps<T>) {
-  const { value, onSave, options, renderOptionContent, renderValue, placeholder, disabled, accessibilityLabel } = props;
+  const { value, onSave, options, renderOptionContent, renderSelected, placeholder, disabled, accessibilityLabel } = props;
   const [open, setOpen] = useState(false);
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -62,7 +62,7 @@ export function InlineSelect<T extends string>(props: InlineSelectProps<T>) {
       <Popover open={open && !disabled} onOpenChange={setOpen} side="bottom" align="start" inheritTriggerWidth>
         <PopoverTrigger>
           <InlineEditView
-            display={selected ? (renderValue ? renderValue(selected) : (selected.label ?? "")) : ""}
+            display={selected ? (renderSelected ? renderSelected(selected) : (selected.label ?? "")) : ""}
             placeholder={placeholder}
             disabled={disabled}
             active={open && !disabled}
@@ -76,8 +76,9 @@ export function InlineSelect<T extends string>(props: InlineSelectProps<T>) {
             }
           />
         </PopoverTrigger>
-        <PopoverContent>
-          <PickerMenu
+        <PopoverContent disableBodyScroll>
+          <OptionList
+            search={{ mode: "none" }}
             options={options}
             value={value}
             onValueChange={(next) => void pick(next)}

package/src/inline_text_input.tsx

@@ -13,6 +13,8 @@ export interface InlineTextInputProps {
    *  an explicit ✓ saves and ✕ reverts. */
   controls?: InlineEditControls;
   disabled?: boolean;
+  /** Strike + mute the resting value (a completed item that stays editable). */
+  struck?: boolean;
   accessibilityLabel?: string;
 }
 
@@ -23,7 +25,7 @@ export interface InlineTextInputProps {
  * value in a dense record / detail surface.
  */
 export function InlineTextInput(props: InlineTextInputProps) {
-  const { value, onSave, placeholder, controls = "blur", disabled, accessibilityLabel } = props;
+  const { value, onSave, placeholder, controls = "blur", disabled, struck, accessibilityLabel } = props;
   const edit = useInlineEdit<string>({ value, onSave });
 
   const onKeyPress = useCallback(
@@ -55,6 +57,7 @@ export function InlineTextInput(props: InlineTextInputProps) {
       saving={edit.saving}
       error={edit.error}
       disabled={disabled}
+      struck={struck}
       accessibilityLabel={accessibilityLabel}
     >
       <TextInputField

package/src/link.tsx

@@ -2,6 +2,8 @@ import { type ReactNode } from "react";
 import { Pressable } from "react-native";
 import { Text, type TextSize } from "./text";
 import { colors } from "./colors";
+import { FOCUS_RING } from "./control_surface";
+import { useFocusRing } from "./use_focus_ring";
 
 export interface LinkProps {
   children: ReactNode;
@@ -22,8 +24,16 @@ export interface LinkProps {
  * `onPress` to its opener.
  */
 export function Link({ children, onPress, size = "sm", accessibilityLabel, testID }: LinkProps) {
+  const { focusVisible, focusProps } = useFocusRing();
   return (
-    <Pressable onPress={onPress} accessibilityRole="link" accessibilityLabel={accessibilityLabel} testID={testID}>
+    <Pressable
+      onPress={onPress}
+      {...focusProps}
+      accessibilityRole="link"
+      accessibilityLabel={accessibilityLabel}
+      testID={testID}
+      style={focusVisible ? { boxShadow: FOCUS_RING, borderRadius: 2 } : undefined}
+    >
       <Text size={size} decoration="underline" style={{ color: colors.blue[600] }}>
         {children}
       </Text>

package/src/link_button.tsx

@@ -23,7 +23,7 @@ export function LinkButton(props: LinkButtonProps) {
   const { title, onPress, accessibilityLabel, testID } = props;
   return (
     <PressableHighlight
-      testID={testID}
+      focusRing      testID={testID}
       onPress={onPress}
       accessibilityRole="button"
       accessibilityLabel={accessibilityLabel ?? title}

package/src/list_item.tsx

@@ -57,8 +57,8 @@ export function ListItem(props: ListItemProps) {
   if (onPress) {
     return (
       <PressableHighlight
-        ref={ref}
-        testID={testID}
+        focusRing
+        ref={ref}        testID={testID}
         onPress={handlePress}
         disabled={disabled}
         style={containerStyle}

package/src/member_select.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo } from "react";
 import { StyleProp, ViewStyle } from "react-native";
+import { Select } from "./select";
 import {
-  Picker,
   type PickerOption,
   type PickerValue,
   type PickerOnValueChange,
@@ -33,15 +33,20 @@ interface MemberSelectProps<MULTI extends boolean = false> {
   disabled?: boolean;
   autoFocus?: boolean;
   includeEmptyOption?: boolean;
+  enableSelectAll?: boolean;
+  /** Label for the "select all" link in multi-select mode. Pass a translated string. */
+  selectAllLabel?: string;
+  /** Label for the "deselect all" link in multi-select mode. Pass a translated string. */
+  deselectAllLabel?: string;
   style?: StyleProp<ViewStyle>;
   testID?: string;
   accessibilityLabel?: string;
 }
 
 /**
- * Choose member(s) — a {@link Picker} whose every option renders as a
+ * Choose member(s) — a {@link Select} whose every option renders as a
  * {@link MemberChip} (avatar + name). The one member-picker shape, so an app
- * never re-wires `Picker` + `renderOptionContent` + a directory by hand. PURE:
+ * never re-wires `Select` + `renderOptionContent` + a directory by hand. PURE:
  * pass the candidate `members` (an app feeds `useMembers`, the product any
  * roster); this fetches nothing. Single or multi via `multi`. Options are
  * single-line by design — a picker row identifies a person by name + avatar;
@@ -72,7 +77,7 @@ export function MemberSelect<MULTI extends boolean = false>(props: MemberSelectP
   );
 
   return (
-    <Picker<string, MULTI>
+    <Select<string, MULTI>
       options={options}
       renderOptionContent={renderOptionContent}
       {...picker}

package/src/menu_button.tsx

@@ -94,8 +94,8 @@ export function MenuButton(props: MenuButtonProps) {
   if (onPress) {
     return (
       <PressableHighlight
-        ref={ref}
-        testID={testID}
+        focusRing
+        ref={ref}        testID={testID}
         nativeID={nativeID}
         onPress={() => {
           onPress?.();

package/src/menu_list_item.tsx

@@ -81,8 +81,8 @@ export function MenuListItem(props: MenuListItemProps) {
   if (onPress) {
     return (
       <PressableHighlight
-        ref={ref}
-        testID={testID}
+        focusRing
+        ref={ref}        testID={testID}
         nativeID={nativeID}
         onPress={onPress}
         onHoverIn={onHoverIn}

package/src/number_input.tsx

@@ -1,8 +1,10 @@
 import type { KeyboardEvent } from "react";
 import { colors } from "./colors";
-import { CONTROL_RADIUS } from "./control_surface";
+import { CONTROL_RADIUS, FOCUS_RING, HOVER_BORDER } from "./control_surface";
 import { fontFamilyRegular, inputTextStyleWeb } from "./text_utils";
 import { useFormField } from "./form_field";
+import { useFocusRing } from "./use_focus_ring";
+import { useHover } from "./use_hover";
 
 export interface NumberInputProps {
   value: number | null;
@@ -27,6 +29,8 @@ export function NumberInput(props: NumberInputProps) {
   const { value, onValueChange, min, max, disabled, onBlur, onKeyDown, autoFocus, testID, accessibilityLabel } = props;
   const binding = useFormField();
   const describedBy = [binding?.descriptionId, binding?.errorId].filter(Boolean).join(" ") || undefined;
+  const { focusVisible, focusProps } = useFocusRing({ always: true });
+  const { hovered, hoverProps } = useHover();
 
   return (
     <input
@@ -44,7 +48,9 @@ export function NumberInput(props: NumberInputProps) {
       max={max}
       type="number"
       disabled={disabled}
-      onBlur={onBlur}
+      {...hoverProps}
+      onFocus={focusProps.onFocus}
+      onBlur={() => { focusProps.onBlur(); onBlur?.(); }}
       onKeyDown={onKeyDown}
       autoFocus={autoFocus}
       style={{
@@ -54,14 +60,15 @@ export function NumberInput(props: NumberInputProps) {
         borderRadius: CONTROL_RADIUS,
         borderWidth: 1,
         borderStyle: "solid",
-        borderColor: colors.border,
+        borderColor: hovered && !disabled ? HOVER_BORDER : colors.border,
         backgroundColor: colors.background,
         fontFamily: fontFamilyRegular,
         ...inputTextStyleWeb,
         letterSpacing: -0.4,
-        boxShadow: "none",
+        boxShadow: focusVisible ? FOCUS_RING : "none",
         outline: "none",
         boxSizing: "border-box",
+        transition: "border-color 0.12s, box-shadow 0.12s",
       }}
     />
   );

package/src/option_list.tsx

@@ -0,0 +1,211 @@
+import { StyleSheet, View, ScrollView, TextInput } from "react-native";
+import { type ReactNode } from "react";
+import { colors } from "./colors";
+import { Text } from "./text";
+import { Icon } from "./icon";
+import { Checkbox } from "./checkbox";
+import { MenuButton } from "./menu_button";
+import { LinkButton } from "./link_button";
+import { ActivityIndicator } from "./activity_indicator";
+import { TextInputField } from "./text_input_field";
+import { useScreenSize } from "./use_screen_size";
+import { useOptionList, type UseOptionListParams } from "./use_option_list";
+import type { PickerOption } from "./picker";
+
+export interface OptionListProps<T extends string = string, MULTI extends boolean = false, D = unknown>
+  extends UseOptionListParams<T, MULTI, D> {
+  testID?: string;
+  /** Rich row content (a colour-dot badge, a member chip). Falls back to the label. */
+  renderOptionContent?: (option: PickerOption<T, D>) => ReactNode;
+  /** A single-line subtitle under the label (e.g. a code or company). */
+  getOptionDescription?: (option: PickerOption<T, D>) => string | undefined;
+  loading?: boolean;
+  emptyText?: string;
+  accessibilityLabel?: string;
+  selectAllLabel?: string;
+  deselectAllLabel?: string;
+}
+
+/**
+ * The kit's option listbox body — the popover content every selector opens: a
+ * keyboard-navigable list of `MenuButton` rows with single/multi selection +
+ * select-all, an optional "create" row, and either native-`<select>` typeahead
+ * (`search.mode:"none"`) or its own search field (`"internal"`). Drives off
+ * `useOptionList`. `Select` (incl. its chip-box / tag-field form), the chat composer, and the in-cell
+ * editors render it; `Combobox` consumes `useOptionList` directly (its own input
+ * owns the keyboard). Don't hand-roll a search-list — reach for this.
+ */
+export function OptionList<T extends string, MULTI extends boolean = false, D = unknown>(
+  props: OptionListProps<T, MULTI, D>,
+) {
+  const {
+    testID,
+    renderOptionContent,
+    getOptionDescription,
+    loading = false,
+    emptyText = "No results",
+    accessibilityLabel,
+    selectAllLabel = "Select all",
+    deselectAllLabel = "Deselect all",
+    search,
+  } = props;
+  const list = useOptionList(props);
+  const { small } = useScreenSize();
+
+  const onSearchKeyPress = (e: { nativeEvent: { key: string }; preventDefault: () => void }) => {
+    if (list.handleKey(e.nativeEvent.key)) e.preventDefault();
+  };
+
+  return (
+    <View testID={testID} style={[styles.container, small ? { flex: 1 } : { maxHeight: 480 }]}>
+      {search.mode === "internal" ? (
+        <TextInputField
+          icon="search"
+          value={list.query}
+          onChangeText={list.setQuery}
+          placeholder={search.placeholder ?? "Search…"}
+          autoFocus={!small}
+          autoCapitalize="none"
+          autoCorrect={false}
+          onKeyPress={onSearchKeyPress}
+          accessibilityLabel={accessibilityLabel}
+          role="combobox"
+          aria-expanded
+          aria-controls={list.listboxId}
+          aria-activedescendant={list.activeId}
+          aria-autocomplete="list"
+        />
+      ) : search.mode === "none" ? (
+        // Visually hidden but focusable: captures typeahead + arrow/enter keys
+        // while the popover is open, giving native-<select> behavior.
+        <TextInput
+          autoFocus={!small}
+          value=""
+          onChangeText={() => {}}
+          onKeyPress={onSearchKeyPress}
+          style={styles.typeaheadCapture}
+        />
+      ) : null}
+
+      <ScrollView
+        ref={list.scrollRef}
+        style={styles.optionsList}
+        nativeID={list.listboxId}
+        accessibilityLabel={accessibilityLabel}
+        keyboardShouldPersistTaps="handled"
+        // `listbox` is valid ARIA but absent from RN's Role enum; rn-web forwards it.
+        role={"listbox" as "list"}
+      >
+        {loading ? (
+          <View style={styles.statusRow}>
+            <ActivityIndicator />
+          </View>
+        ) : list.rows.length === 0 ? (
+          <View style={styles.statusRow}>
+            <Text color="zinc-500" size="sm">
+              {emptyText}
+            </Text>
+          </View>
+        ) : (
+          list.rows.map((row) => {
+            const isCustom = row.kind === "custom";
+            const opt = row.option;
+            const desc = row.kind === "option" ? getOptionDescription?.(opt) : undefined;
+            const label = opt.label ?? opt.value;
+            const title =
+              row.kind === "option" && renderOptionContent ? (
+                renderOptionContent(opt)
+              ) : desc ? (
+                <View>
+                  <Text userSelect="none" numberOfLines={1}>
+                    {label}
+                  </Text>
+                  <Text size="xs" color="zinc-500" numberOfLines={1}>
+                    {desc}
+                  </Text>
+                </View>
+              ) : (
+                <Text userSelect="none" numberOfLines={1} weight={isCustom ? "medium" : undefined}>
+                  {label}
+                </Text>
+              );
+            return (
+              <MenuButton
+                key={`${row.kind}-${opt.value}`}
+                nativeID={row.nativeID}
+                testID={
+                  isCustom ? "option-list-custom" : opt.testID || `picker-option-${opt.value}`
+                }
+                role="option"
+                accessibilityLabel={isCustom ? label : (opt.label ?? String(opt.value))}
+                icon={
+                  isCustom ? (
+                    <Icon name="plus" size={16} color={colors.zinc["600"]} />
+                  ) : props.multi && row.kind === "option" ? (
+                    <Checkbox checked={row.selected} />
+                  ) : undefined
+                }
+                title={title}
+                right={
+                  !props.multi && row.selected ? (
+                    <Icon name="check" size={18} color={colors.zinc["950"]} />
+                  ) : undefined
+                }
+                focused={row.index === list.activeIndex}
+                disabled={opt.disabled}
+                onPress={() => list.pickRow(row.index)}
+                onHoverIn={() => list.setActiveIndex(row.index, false)}
+                style={styles.option}
+              />
+            );
+          })
+        )}
+      </ScrollView>
+
+      {list.showSelectAll || list.showDeselectAll ? (
+        <View style={styles.selectAllContainer}>
+          {list.showSelectAll ? <LinkButton title={selectAllLabel} onPress={list.selectAll} /> : null}
+          {list.showDeselectAll ? (
+            <LinkButton title={deselectAllLabel} onPress={list.deselectAll} />
+          ) : null}
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: 4,
+  },
+  optionsList: {
+    flex: 1,
+    gap: 4,
+    maxHeight: 320,
+  },
+  selectAllContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 16,
+    paddingVertical: 4,
+    // Matches a MenuButton option's 8px text inset so the bleeding-wash
+    // LinkButtons line up under the option labels above.
+    paddingHorizontal: 8,
+    borderTopWidth: 1,
+    borderTopColor: colors.border,
+  },
+  option: {
+    marginHorizontal: 0,
+  },
+  statusRow: {
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 16,
+  },
+  typeaheadCapture: {
+    position: "absolute",
+    width: 1,
+    height: 1,
+    opacity: 0,
+  },
+});

package/src/peek.tsx

@@ -33,7 +33,7 @@ export function Peek(props: PeekProps) {
     <Popover side={side} align={align}>
       <PopoverTrigger>
         <PressableHighlight
-          accessibilityRole="button"
+          focusRing          accessibilityRole="button"
           accessibilityLabel={accessibilityLabel}
           style={styles.trigger}
           // 32px visual, 40px touch target (32 + 2×4) — same as IconButton.