@tastic/profile 0.1.2 → 0.1.3

package/dist/index.js

@@ -237,6 +237,7 @@ var styles2 = import_react_native2.StyleSheet.create({
 // src/ProfilesManager.tsx
 var import_auto_paper3 = require("@rific/auto-paper");
 var import_feedback_press2 = require("@rific/feedback-press");
+var import_focus_chain = require("@rific/focus-chain");
 var import_toaster = require("@rific/toaster");
 var import_hud2 = require("@tastic/hud");
 var import_react2 = require("react");
@@ -383,12 +384,13 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
   ] });
 }
 function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag, onTagChange, tagInvalid, onSubmit, onDelete, autoFocus, fgMuted, host, dark }) {
-  const tagInputRef = (0, import_react2.useRef)(null);
-  const nameInputRef = (0, import_react2.useRef)(null);
+  const register = (0, import_focus_chain.useFocusChain)();
+  const tag = register();
+  const name = register();
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.View, { style: styles3.editRow, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_hud2.InlineColorPicker, { id: "color", host, value: draftColor, onChange: onColorChange, dark }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.TextInput, { ref: tagInputRef, mode: "outlined", dense: true, value: draftTag, onChangeText: onTagChange, placeholder: "Tag", autoCapitalize: "characters", selectTextOnFocus: true, error: tagInvalid, returnKeyType: "next", style: styles3.tagInput, contentStyle: styles3.tagInputContent, onSubmitEditing: () => nameInputRef.current?.focus() }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.TextInput, { ref: nameInputRef, mode: "outlined", dense: true, value: draftName, onChangeText: onNameChange, maxLength: MAX_PROFILE_NAME_LENGTH, placeholder: "Name", autoFocus, returnKeyType: "done", style: styles3.nameInput, onSubmitEditing: onSubmit }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.TextInput, { ref: tag.ref, ...tag.props, mode: "outlined", dense: true, value: draftTag, onChangeText: onTagChange, placeholder: "Tag", autoCapitalize: "characters", selectTextOnFocus: true, error: tagInvalid, returnKeyType: "next", style: styles3.tagInput, contentStyle: styles3.tagInputContent }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.TextInput, { ref: name.ref, ...name.props, onSubmitEditing: onSubmit, mode: "outlined", dense: true, value: draftName, onChangeText: onNameChange, maxLength: MAX_PROFILE_NAME_LENGTH, placeholder: "Name", autoFocus, returnKeyType: "done", style: styles3.nameInput }),
     onDelete && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_feedback_press2.TouchableRipple, { onPress: onDelete, style: styles3.iconButton, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.Icon, { source: "trash-can-outline", size: 18, color: fgMuted }) })
   ] });
 }

package/dist/index.mjs

@@ -205,6 +205,7 @@ var styles2 = StyleSheet2.create({
 // src/ProfilesManager.tsx
 import { useAutoPaperTheme } from "@rific/auto-paper";
 import { TouchableRipple as TouchableRipple2 } from "@rific/feedback-press";
+import { useFocusChain } from "@rific/focus-chain";
 import { useToast } from "@rific/toaster";
 import { InlineColorPicker, usePopoverHost } from "@tastic/hud";
 import { useCallback, useEffect, useMemo as useMemo2, useRef, useState } from "react";
@@ -351,12 +352,13 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
   ] });
 }
 function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag, onTagChange, tagInvalid, onSubmit, onDelete, autoFocus, fgMuted, host, dark }) {
-  const tagInputRef = useRef(null);
-  const nameInputRef = useRef(null);
+  const register = useFocusChain();
+  const tag = register();
+  const name = register();
   return /* @__PURE__ */ jsxs2(View3, { style: styles3.editRow, children: [
     /* @__PURE__ */ jsx3(InlineColorPicker, { id: "color", host, value: draftColor, onChange: onColorChange, dark }),
-    /* @__PURE__ */ jsx3(TextInput, { ref: tagInputRef, mode: "outlined", dense: true, value: draftTag, onChangeText: onTagChange, placeholder: "Tag", autoCapitalize: "characters", selectTextOnFocus: true, error: tagInvalid, returnKeyType: "next", style: styles3.tagInput, contentStyle: styles3.tagInputContent, onSubmitEditing: () => nameInputRef.current?.focus() }),
-    /* @__PURE__ */ jsx3(TextInput, { ref: nameInputRef, mode: "outlined", dense: true, value: draftName, onChangeText: onNameChange, maxLength: MAX_PROFILE_NAME_LENGTH, placeholder: "Name", autoFocus, returnKeyType: "done", style: styles3.nameInput, onSubmitEditing: onSubmit }),
+    /* @__PURE__ */ jsx3(TextInput, { ref: tag.ref, ...tag.props, mode: "outlined", dense: true, value: draftTag, onChangeText: onTagChange, placeholder: "Tag", autoCapitalize: "characters", selectTextOnFocus: true, error: tagInvalid, returnKeyType: "next", style: styles3.tagInput, contentStyle: styles3.tagInputContent }),
+    /* @__PURE__ */ jsx3(TextInput, { ref: name.ref, ...name.props, onSubmitEditing: onSubmit, mode: "outlined", dense: true, value: draftName, onChangeText: onNameChange, maxLength: MAX_PROFILE_NAME_LENGTH, placeholder: "Name", autoFocus, returnKeyType: "done", style: styles3.nameInput }),
     onDelete && /* @__PURE__ */ jsx3(TouchableRipple2, { onPress: onDelete, style: styles3.iconButton, children: /* @__PURE__ */ jsx3(Icon3, { source: "trash-can-outline", size: 18, color: fgMuted }) })
   ] });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/profile",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Player profile identity for local-multiplayer React Native games — a saved name/color/tag a player selects per seat, with a picker, an inline-editable roster screen, and a reusable identity badge, deliberately blind to any app-specific fields (control scheme, stats) an app layers on top",
   "keywords": [
     "react-native",

package/src/ProfilesManager.tsx

@@ -1,9 +1,10 @@
 import { useAutoPaperTheme } from '@rific/auto-paper'
 import { TouchableRipple } from '@rific/feedback-press'
+import { useFocusChain } from '@rific/focus-chain'
 import { useToast } from '@rific/toaster'
 import { InlineColorPicker, PopoverHost, usePopoverHost } from '@tastic/hud'
-import { ComponentRef, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { KeyboardAvoidingView, Platform, ScrollView, StyleSheet, TextInput as RNTextInput, View } from 'react-native'
+import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { KeyboardAvoidingView, Platform, ScrollView, StyleSheet, View } from 'react-native'
 import { Button, Icon, Portal, Text, TextInput } from 'react-native-paper'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
@@ -275,21 +276,26 @@ interface EditRowProps {
 // color trigger here — it keeps its plain palette icon regardless of the row's own tag field, since
 // the tag is already right next to it in its own field, so repeating it on the color trigger too
 // would be redundant rather than informative.
-// Return-key chains tag -> name via explicit refs rather than each field submitting on its
-// own — submitting the *name* field is what actually commits the row (see the last field's own
-// onSubmitEditing override below), matching how a normal multi-field form reads: fill fields in
-// order, the last one finishes it.
+// Return-key chains tag -> name via @rific/focus-chain rather than each field submitting on its
+// own — submitting the *name* field is what actually commits the row, so its registration's own
+// onSubmitEditing (a no-op — it's last in the chain) is overridden with onSubmit below, matching
+// how a normal multi-field form reads: fill fields in order, the last one finishes it.
 function EditRow({ draftName, onNameChange, draftColor, onColorChange, draftTag, onTagChange, tagInvalid, onSubmit, onDelete, autoFocus, fgMuted, host, dark }: EditRowProps) {
-  const tagInputRef = useRef<ComponentRef<typeof RNTextInput>>(null)
-  const nameInputRef = useRef<ComponentRef<typeof RNTextInput>>(null)
+  const register = useFocusChain()
+  const tag = register()
+  const name = register()
 
   return (
     <View style={styles.editRow}>
       <InlineColorPicker id='color' host={host} value={draftColor} onChange={onColorChange} dark={dark} />
       {/* selectTextOnFocus so tapping into an already-set tag selects it for wholesale replacement
       — the far more common edit than inserting into the middle of a 1-3 character value. */}
-      <TextInput ref={tagInputRef} mode='outlined' dense value={draftTag} onChangeText={onTagChange} placeholder='Tag' autoCapitalize='characters' selectTextOnFocus error={tagInvalid} returnKeyType='next' style={styles.tagInput} contentStyle={styles.tagInputContent} onSubmitEditing={() => nameInputRef.current?.focus()} />
-      <TextInput ref={nameInputRef} mode='outlined' dense value={draftName} onChangeText={onNameChange} maxLength={MAX_PROFILE_NAME_LENGTH} placeholder='Name' autoFocus={autoFocus} returnKeyType='done' style={styles.nameInput} onSubmitEditing={onSubmit} />
+      {/* eslint-disable-next-line react-hooks/refs -- tag.ref/tag.props come from useFocusChain's
+      register(), called during render by design (see the hook's own doc); the actual DOM/native
+      focus() call it wraps only ever fires later, from an event handler, never synchronously here */}
+      <TextInput ref={tag.ref} {...tag.props} mode='outlined' dense value={draftTag} onChangeText={onTagChange} placeholder='Tag' autoCapitalize='characters' selectTextOnFocus error={tagInvalid} returnKeyType='next' style={styles.tagInput} contentStyle={styles.tagInputContent} />
+      {/* eslint-disable-next-line react-hooks/refs -- see the tag field's identical note above */}
+      <TextInput ref={name.ref} {...name.props} onSubmitEditing={onSubmit} mode='outlined' dense value={draftName} onChangeText={onNameChange} maxLength={MAX_PROFILE_NAME_LENGTH} placeholder='Name' autoFocus={autoFocus} returnKeyType='done' style={styles.nameInput} />
       {onDelete && (
         <TouchableRipple onPress={onDelete} style={styles.iconButton}>
           <Icon source='trash-can-outline' size={18} color={fgMuted} />