@lotics/ui 1.24.0 → 1.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "1.24.0",
+  "version": "1.25.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

@@ -61,9 +61,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}
             </>
           );

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%",
   },