@lotics/ui 6.2.0 → 6.3.0

package/AGENTS.md

@@ -205,6 +205,10 @@ builds the new record and attaches it; existing matches attach directly. The cre
 BELOW matches by default (the keyboard highlight lands on the first MATCH, so Enter on a partial
 picks it, never a duplicate); pass `customOptionPlacement="top"` to pin it above. Use
 `reflectSelection={false}` and render the attached record below as a card with a Change action.
+For input-level status that must stay visible while results scroll (validity feedback on the typed
+value, a result count, a secondary "create" affordance), pass `footer={({ close }) => …}` — a pinned
+row below the listbox, OUTSIDE keyboard option-nav; call `close()` from a footer action that hands
+off elsewhere (so the popover dismisses cleanly instead of floating over what you navigated to).
 
 ### Line items — create → preview → edit (a composition, not a primitive)
 For a list of records you build then revise (invoice rows, repair lines, config entries), each

package/package.json

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

package/src/combobox.tsx

@@ -67,6 +67,13 @@ export interface ComboboxProps<T extends string = string, D = unknown> {
   placeholder?: string;
   recentsLabel?: string;
   emptyText?: string;
+  /** A pinned row rendered at the bottom of the popover (below the results, outside
+   *  the scroll area) whenever the popover is open. For input-level status that must
+   *  stay visible while results scroll — validity feedback, a result count, a "create"
+   *  affordance. It sits OUTSIDE the listbox, so its content is auxiliary (not an
+   *  option) and never enters keyboard option-nav. Receives `close` to dismiss the
+   *  popover — call it from an action that navigates elsewhere. */
+  footer?: (api: { close: () => void }) => ReactNode;
   accessibilityLabel?: string;
   disabled?: boolean;
   /** Show an in-input clear ✕ whenever the input has text (a reflected selection
@@ -111,6 +118,7 @@ export function Combobox<T extends string = string, D = unknown>(props: Combobox
     searchDebounceMs = 200,
     icon,
     placeholder,
+    footer,
     accessibilityLabel = "Results",
     disabled = false,
     clearable = false,
@@ -169,6 +177,14 @@ export function Combobox<T extends string = string, D = unknown>(props: Combobox
     [onValueChange, isServer, debouncedSearch, onSearchChange, reflectSelection],
   );
 
+  // Dismiss the popover from the footer — drop focus too, mirroring the popover's
+  // own self-close (so the input's keyboard focus ring doesn't linger after a
+  // footer action hands off elsewhere).
+  const close = useCallback(() => {
+    setOpen(false);
+    inputRef.current?.blur();
+  }, []);
+
   const list = useOptionList<T, false, D>({
     options,
     value: single?.value ?? null,
@@ -347,6 +363,7 @@ export function Combobox<T extends string = string, D = unknown>(props: Combobox
                 })
               )}
             </ScrollView>
+            {footer ? <View style={styles.footer}>{footer({ close })}</View> : null}
           </View>
         </PopoverContent>
       </Popover>
@@ -386,4 +403,10 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     paddingVertical: 16,
   },
+  footer: {
+    borderTopWidth: 1,
+    borderTopColor: colors.border,
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+  },
 });