@lotics/ui 1.24.0 → 1.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "1.24.0",
+  "version": "1.26.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",

package/src/index.css

@@ -337,10 +337,12 @@ html {
 }
 
 /* Keyboard focus ring. `:focus-visible` only matches keyboard-driven focus,
-   so pointer/touch interactions stay visually unchanged. */
+   so pointer/touch interactions stay visually unchanged. The ring sits flush
+   against the element's border (offset 0, no gap) and, being an outline, never
+   reflows layout. */
 :focus-visible {
   outline: 2px solid var(--color-zinc-900);
-  outline-offset: 2px;
+  outline-offset: 0;
 }
 :focus:not(:focus-visible) {
   outline: none;

package/src/menu_list_item.tsx

@@ -4,11 +4,15 @@ import { Text } from "./text";
 import { colors } from "./colors";
 import { Icon, IconName } from "./icon";
 import { PressableHighlight } from "./pressable_highlight";
+import type { TextColor } from "./text_utils";
 
 export interface MenuListItemProps {
   ref?: Ref<View>;
   icon?: IconName | React.ReactNode;
   title: string;
+  /** Title color. Default ink — set it to mark the row as an action (e.g. a
+   *  leading "Browse all" tinted to match its icon). */
+  titleColor?: TextColor;
   description?: string;
   right?: React.ReactNode;
   onPress?: () => void;
@@ -32,6 +36,7 @@ export function MenuListItem(props: MenuListItemProps) {
     ref,
     icon,
     title,
+    titleColor,
     description,
     right,
     onPress,
@@ -52,7 +57,7 @@ export function MenuListItem(props: MenuListItemProps) {
     <>
       {resolvedIcon}
       <View style={styles.textContainer}>
-        <Text weight="medium" numberOfLines={1} userSelect="none">
+        <Text weight="medium" color={titleColor} numberOfLines={1} userSelect="none">
           {title}
         </Text>
         {!!description && (

package/src/search_select.tsx

@@ -14,14 +14,29 @@ import { MenuListItem } from "./menu_list_item";
 import { ActivityIndicator } from "./activity_indicator";
 import { Popover, PopoverContent } from "./popover";
 import type { PickerOption } from "./picker";
+import type { TextColor } from "./text_utils";
 import { useDebouncedCallback } from "./use_debounced_callback";
 import { useListKeyboardNav } from "./use_list_keyboard_nav";
 
+/** A pinned action row in the dropdown — not a search result, an action. */
+export interface SearchSelectAction {
+  key: string;
+  label: string;
+  icon?: ReactNode;
+  /** Tints the label so it reads as an action (match it to the icon's color). */
+  color?: TextColor;
+  onPress: () => void;
+}
+
 export interface SearchSelectProps<T extends string = string, D = unknown> {
   /** Result options for the current query. The consumer refreshes these in
    *  response to `onSearchChange` — search runs server-side, so the whole table
    *  is never shipped to the client. */
   options: PickerOption<T, D>[];
+  /** Pinned action rows shown at the very top of the dropdown (above results and
+   *  recents), always available while open and keyboard-navigable alongside the
+   *  options — e.g. a "Browse all" that opens a full picker. */
+  leadingActions?: SearchSelectAction[];
   /** Debounced; fires as the user types. Drive a server re-query from it. */
   onSearchChange: (query: string) => void;
   /** Fires when the user picks a result or a recent. */
@@ -78,6 +93,7 @@ export function SearchSelect<T extends string = string, D = unknown>(
 ) {
   const {
     options,
+    leadingActions = [],
     onSearchChange,
     onValueChange,
     recentOptions,
@@ -108,16 +124,30 @@ export function SearchSelect<T extends string = string, D = unknown>(
 
   const searching = query.trim().length > 0;
   const list = searching ? options : (recentOptions ?? []);
+  // The navigable set is the leading actions followed by the option list, so
+  // arrow keys + aria-activedescendant span both. `nLead` is the boundary.
+  const nLead = leadingActions.length;
 
   const debouncedSearch = useDebouncedCallback(onSearchChange, searchDebounceMs);
 
-  const scrollToIndex = useCallback((index: number) => {
-    scrollRef.current?.scrollTo({ y: Math.max(0, index * OPTION_HEIGHT - 80), animated: false });
-  }, []);
+  // Only the option list scrolls (actions are pinned above it), so map the
+  // combined index back into the list before scrolling.
+  const scrollToIndex = useCallback(
+    (index: number) => {
+      if (index < nLead) return;
+      scrollRef.current?.scrollTo({ y: Math.max(0, (index - nLead) * OPTION_HEIGHT - 80), animated: false });
+    },
+    [nLead],
+  );
 
   const handleSelect = useCallback(
     (index: number) => {
-      const opt = list[index];
+      if (index < nLead) {
+        leadingActions[index].onPress();
+        setOpen(false);
+        return;
+      }
+      const opt = list[index - nLead];
       if (!opt || opt.disabled) return;
       onValueChange(opt);
       // The trailing search is irrelevant once a pick is made. Cancel it and
@@ -131,12 +161,12 @@ export function SearchSelect<T extends string = string, D = unknown>(
       // search again without re-clicking.
       inputRef.current?.focus();
     },
-    [list, onValueChange, onSearchChange, debouncedSearch],
+    [list, leadingActions, nLead, onValueChange, onSearchChange, debouncedSearch],
   );
 
   const { activeIndex, setActiveIndex, handleKey } = useListKeyboardNav({
-    count: list.length,
-    isDisabled: (i) => list[i]?.disabled ?? false,
+    count: nLead + list.length,
+    isDisabled: (i) => (i >= nLead ? (list[i - nLead]?.disabled ?? false) : false),
     onSelect: handleSelect,
     onClose: () => setOpen(false),
     onActiveChange: scrollToIndex,
@@ -168,10 +198,11 @@ export function SearchSelect<T extends string = string, D = unknown>(
     [open, handleKey],
   );
 
-  // Nothing to show ⇒ don't open an empty popover (focused box, no recents).
-  const showList = open && !disabled && (searching || list.length > 0);
+  // Nothing to show ⇒ don't open an empty popover. Leading actions (e.g.
+  // "Browse all") always give the popover something to show on focus.
+  const showList = open && !disabled && (nLead > 0 || searching || list.length > 0);
   const activeOptionId =
-    activeIndex >= 0 && activeIndex < list.length ? optionId(activeIndex) : undefined;
+    activeIndex >= 0 && activeIndex < nLead + list.length ? optionId(activeIndex) : undefined;
   const listLabel = searching ? accessibilityLabel : recentsLabel;
 
   return (
@@ -217,6 +248,22 @@ export function SearchSelect<T extends string = string, D = unknown>(
           testID={testID ? `${testID}-popover` : undefined}
         >
           <View style={styles.menu}>
+            {nLead > 0
+              ? leadingActions.map((action, i) => (
+                  <MenuListItem
+                    key={action.key}
+                    nativeID={optionId(i)}
+                    testID={`search-action-${action.key}`}
+                    role="option"
+                    icon={action.icon}
+                    title={action.label}
+                    titleColor={action.color}
+                    focused={i === activeIndex}
+                    onPress={() => handleSelect(i)}
+                    onHoverIn={() => setActiveIndex(i)}
+                  />
+                ))
+              : null}
             {!searching && list.length > 0 ? (
               <View style={styles.sectionHeader}>
                 <Text size="xs" weight="medium" color="zinc-500">
@@ -239,27 +286,31 @@ export function SearchSelect<T extends string = string, D = unknown>(
                   <ActivityIndicator />
                 </View>
               ) : list.length === 0 ? (
-                <View style={styles.statusRow}>
-                  <Text size="sm" color="zinc-500">
-                    {emptyText}
-                  </Text>
-                </View>
+                // Only "no results" while searching — an empty recents list (no
+                // query) just shows the leading actions above, nothing more.
+                searching ? (
+                  <View style={styles.statusRow}>
+                    <Text size="sm" color="zinc-500">
+                      {emptyText}
+                    </Text>
+                  </View>
+                ) : null
               ) : (
                 list.map((opt, i) => (
                   <MenuListItem
                     key={opt.value}
-                    nativeID={optionId(i)}
+                    nativeID={optionId(nLead + i)}
                     testID={`search-option-${opt.value}`}
                     role="option"
                     icon={renderOptionIcon?.(opt)}
                     title={opt.label ?? opt.value}
                     description={getOptionDescription?.(opt)}
                     right={renderOptionRight?.(opt)}
-                    focused={i === activeIndex}
+                    focused={nLead + i === activeIndex}
                     selected={opt.value === selectedValue}
                     disabled={opt.disabled}
-                    onPress={() => handleSelect(i)}
-                    onHoverIn={() => setActiveIndex(i)}
+                    onPress={() => handleSelect(nLead + i)}
+                    onHoverIn={() => setActiveIndex(nLead + i)}
                   />
                 ))
               )}
@@ -275,6 +326,8 @@ const styles = StyleSheet.create({
   input: {
     backgroundColor: colors.background,
     boxShadow: colors.border_shadow,
+    // A pill, matching the search input inside the picker dialog.
+    borderRadius: 999,
   },
   menu: {
     gap: 2,

package/src/table.tsx

@@ -48,9 +48,11 @@ export function Table<TRow extends Record<string, unknown>>(props: TableProps<TR
                 {col.label}
               </Text>
               {sortable ? (
-                <Text size="xs" color="muted" userSelect="none">
-                  {active ? (sort?.dir === "asc" ? "↑" : "↓") : "↕"}
-                </Text>
+                <Icon
+                  name={active ? (sort?.dir === "asc" ? "chevron-up" : "chevron-down") : "chevrons-up-down"}
+                  size={14}
+                  color={active ? colors.zinc[700] : colors.zinc[400]}
+                />
               ) : null}
             </View>
           );

package/src/table.web.tsx

@@ -7,13 +7,22 @@ import type { Column, TableProps } from "./table_types";
 export type { SortDir, TableSort, Column, TableProps } from "./table_types";
 
 // Web table. Built from raw <div>s (not RN Pressable) so a click-to-expand row
-// can legally contain interactive cells: the row is a <div role="row">, never a
-// <button>, and an `interactive` cell's clicks are skipped via a centralized
-// `closest('[data-interactive]')` guard — no stopPropagation, no nested <button>,
-// no absolute overlay. The detail panel renders full-width below the row.
+// can legally contain interactive controls: the row is a <div role="row">, never
+// a <button>. A row click toggles expansion EXCEPT when it lands on an actual
+// interactive element — those keep their own behaviour. This is the web mirror of
+// RN's responder model (the innermost control wins): only the control suppresses
+// the toggle, so empty space anywhere in the row — including around a control in a
+// wide action column — still expands. No stopPropagation, no nested <button>, no
+// absolute overlay, no dead zones. The detail panel renders full-width below.
 
 const CHEVRON_W = 44;
 
+// Clicks landing on (or inside) one of these keep their own behaviour instead of
+// toggling the row — the standard interactive HTML tags + ARIA interactive roles,
+// plus an explicit [data-interactive] escape hatch for a non-element control.
+const INTERACTIVE_SELECTOR =
+  'a[href], button, input, select, textarea, label, summary, [role="button"], [role="link"], [role="checkbox"], [role="switch"], [role="radio"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="option"], [role="tab"], [role="slider"], [role="spinbutton"], [contenteditable="true"], [data-interactive]';
+
 function colWidth<TRow extends Record<string, unknown>>(col: Column<TRow>): CSSProperties {
   return col.width ? { width: col.width, flexShrink: 0 } : { flex: 1, minWidth: 0 };
 }
@@ -61,9 +70,11 @@ export function Table<TRow extends Record<string, unknown>>(props: TableProps<TR
                 {col.label}
               </Text>
               {sortable ? (
-                <Text size="xs" color="muted" userSelect="none">
-                  {active ? (sort?.dir === "asc" ? "↑" : "↓") : "↕"}
-                </Text>
+                <Icon
+                  name={active ? (sort?.dir === "asc" ? "chevron-up" : "chevron-down") : "chevrons-up-down"}
+                  size={14}
+                  color={active ? colors.zinc[700] : colors.zinc[400]}
+                />
               ) : null}
             </>
           );
@@ -111,10 +122,10 @@ export function Table<TRow extends Record<string, unknown>>(props: TableProps<TR
               onClick={
                 pressable
                   ? (e: React.MouseEvent) => {
-                      // Whole-row click acts (expand or select), EXCEPT clicks inside an
-                      // interactive cell (pickers/buttons) — they keep their own behaviour.
-                      // The disclosure chevron is the keyboard/AT affordance for expansion.
-                      if ((e.target as HTMLElement).closest("[data-interactive]")) return;
+                      // Whole-row click acts (expand or select), EXCEPT when it lands on an
+                      // actual interactive element — those keep their own behaviour. The
+                      // disclosure chevron is the keyboard/AT affordance for expansion.
+                      if ((e.target as HTMLElement).closest(INTERACTIVE_SELECTOR)) return;
                       if (expandable) toggle(key, row);
                       else onRowPress?.(row);
                     }
@@ -128,7 +139,6 @@ export function Table<TRow extends Record<string, unknown>>(props: TableProps<TR
                 <div
                   key={col.key as string}
                   role="cell"
-                  data-interactive={col.interactive || undefined}
                   style={{
                     ...bodyCellStyle,
                     ...colWidth(col),

package/src/table_picker.tsx

@@ -83,6 +83,9 @@ export interface TablePickerProps<TRow extends Record<string, unknown>> {
   loading?: boolean;
   /** Message when there are no rows and nothing is loading. */
   emptyLabel?: string;
+  /** Max dialog width — a browse table needs more room than a form dialog.
+   *  Default 1080. */
+  maxWidth?: number | `${number}%`;
   testID?: string;
 }
 
@@ -142,6 +145,7 @@ export function TablePicker<TRow extends Record<string, unknown>>(
     onPageChange,
     loading = false,
     emptyLabel,
+    maxWidth = 1080,
     testID,
   } = props;
 
@@ -196,7 +200,7 @@ export function TablePicker<TRow extends Record<string, unknown>>(
   );
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange} height="90%" testID={testID}>
+    <Dialog open={open} onOpenChange={onOpenChange} height="90%" maxWidth={maxWidth} testID={testID}>
       <View style={styles.root}>
         {title ? (
           <Text size="lg" weight="semibold" color="zinc-900" style={styles.title}>
@@ -269,11 +273,12 @@ const styles = StyleSheet.create({
     flex: 1,
     width: "100%",
     gap: 12,
-    paddingHorizontal: 4,
-  },
-  title: {
-    paddingHorizontal: 4,
+    // Match the Dialog's own horizontal inset (the close button sits at 24) so
+    // the content isn't flush against the dialog edges.
+    paddingHorizontal: 24,
+    paddingBottom: 8,
   },
+  title: {},
   search: {
     width: "100%",
   },

package/src/table_types.ts

@@ -17,10 +17,6 @@ export interface Column<TRow extends Record<string, unknown>> {
   /** When true (and `onSortChange` is set), the header is pressable + shows a
    *  sort arrow when this column is the active `sort`. */
   sortable?: boolean;
-  /** Cells whose own controls (buttons, pickers) must NOT toggle the row. The
-   *  row's expand handler ignores clicks originating inside an interactive cell,
-   *  so the rest of the row stays click-to-expand. */
-  interactive?: boolean;
   renderCell?: (params: { row: TRow; column: Column<TRow> }) => ReactNode;
 }
 
@@ -35,13 +31,14 @@ export interface TableProps<TRow extends Record<string, unknown>> {
    *  parent owns the actual sorting of `rows` — this only drives the indicator. */
   sort?: TableSort<TRow> | null;
   onSortChange?: (key: keyof TRow) => void;
-  /** Click-to-select: pressing a row (except `interactive` cells) calls this —
-   *  e.g. a picker that returns the chosen row. Mutually exclusive with
+  /** Click-to-select: pressing a row (except its interactive controls) calls
+   *  this — e.g. a picker that returns the chosen row. Mutually exclusive with
    *  `renderDetail` (a row either expands or selects); `renderDetail` wins if
    *  both are set. Pair with `rowStyle` to highlight the selected row. */
   onRowPress?: (row: TRow) => void;
   /** Render an inline detail panel, full-width below the row. When set, the
-   *  whole row (except `interactive` cells) is click-to-expand. */
+   *  whole row (except its interactive controls) is click-to-expand. The row
+   *  detects controls by element/role, so cells need no special marking. */
   renderDetail?: (row: TRow) => ReactNode;
   /** Controlled set of expanded row keys. Omit for internal (uncontrolled) state. */
   expandedKeys?: Set<string>;