@tastic/profile 0.3.6 → 0.3.7

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ReactNode, Ref } from 'react';
 import { PopoverHost } from '@tastic/hud';
 
 interface Profile {
@@ -40,6 +40,9 @@ interface ProfileEditPatch {
     color: string;
     tag: string;
 }
+interface ProfilesManagerHandle {
+    commitPendingEdit: () => void;
+}
 interface ProfilesManagerProps {
     profiles: Profile[];
     defaultColor: string;
@@ -47,8 +50,9 @@ interface ProfilesManagerProps {
     onSave: (id: string, patch: ProfileEditPatch) => void;
     onDelete: (id: string) => void;
     headerLeft?: ReactNode;
+    ref?: Ref<ProfilesManagerHandle>;
 }
-declare function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft }: ProfilesManagerProps): react.JSX.Element;
+declare function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref }: ProfilesManagerProps): react.JSX.Element;
 
 declare const MAX_PROFILE_NAME_LENGTH = 20;
 declare const MAX_TAG_LENGTH = 3;
@@ -59,4 +63,4 @@ declare const isSharedProfileStoreAvailable: boolean;
 declare function loadSharedProfiles(groupId: string): Promise<Profile[]>;
 declare function saveSharedProfiles(groupId: string, profiles: Profile[]): Promise<void>;
 
-export { MAX_PROFILE_NAME_LENGTH, MAX_TAG_LENGTH, type Profile, ProfileChip, ProfilePicker, ProfilesManager, type ProfilesManagerProps, isSharedProfileStoreAvailable, isValidProfile, isValidTag, loadSharedProfiles, saveSharedProfiles };
+export { MAX_PROFILE_NAME_LENGTH, MAX_TAG_LENGTH, type Profile, ProfileChip, ProfilePicker, ProfilesManager, type ProfilesManagerHandle, type ProfilesManagerProps, isSharedProfileStoreAvailable, isValidProfile, isValidTag, loadSharedProfiles, saveSharedProfiles };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ReactNode, Ref } from 'react';
 import { PopoverHost } from '@tastic/hud';
 
 interface Profile {
@@ -40,6 +40,9 @@ interface ProfileEditPatch {
     color: string;
     tag: string;
 }
+interface ProfilesManagerHandle {
+    commitPendingEdit: () => void;
+}
 interface ProfilesManagerProps {
     profiles: Profile[];
     defaultColor: string;
@@ -47,8 +50,9 @@ interface ProfilesManagerProps {
     onSave: (id: string, patch: ProfileEditPatch) => void;
     onDelete: (id: string) => void;
     headerLeft?: ReactNode;
+    ref?: Ref<ProfilesManagerHandle>;
 }
-declare function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft }: ProfilesManagerProps): react.JSX.Element;
+declare function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref }: ProfilesManagerProps): react.JSX.Element;
 
 declare const MAX_PROFILE_NAME_LENGTH = 20;
 declare const MAX_TAG_LENGTH = 3;
@@ -59,4 +63,4 @@ declare const isSharedProfileStoreAvailable: boolean;
 declare function loadSharedProfiles(groupId: string): Promise<Profile[]>;
 declare function saveSharedProfiles(groupId: string, profiles: Profile[]): Promise<void>;
 
-export { MAX_PROFILE_NAME_LENGTH, MAX_TAG_LENGTH, type Profile, ProfileChip, ProfilePicker, ProfilesManager, type ProfilesManagerProps, isSharedProfileStoreAvailable, isValidProfile, isValidTag, loadSharedProfiles, saveSharedProfiles };
+export { MAX_PROFILE_NAME_LENGTH, MAX_TAG_LENGTH, type Profile, ProfileChip, ProfilePicker, ProfilesManager, type ProfilesManagerHandle, type ProfilesManagerProps, isSharedProfileStoreAvailable, isValidProfile, isValidTag, loadSharedProfiles, saveSharedProfiles };

package/dist/index.js

@@ -287,7 +287,7 @@ function deriveTag(name) {
   const trimmed = name.trim();
   return trimmed ? trimmed[0].toUpperCase() : "";
 }
-function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft }) {
+function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref }) {
   const { dark, colors } = (0, import_auto_paper3.useAutoPaperTheme)();
   const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
   const { error: showErrorToast } = (0, import_toaster.useToast)();
@@ -320,6 +320,7 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
     commitEditRef.current = commitEdit;
   });
   (0, import_react2.useEffect)(() => () => commitEditRef.current(), []);
+  (0, import_react2.useImperativeHandle)(ref, () => ({ commitPendingEdit: () => commitEditRef.current() }), []);
   const startEdit = (0, import_react2.useCallback)(
     (target) => {
       commitEdit();

package/dist/index.mjs

@@ -215,7 +215,7 @@ 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";
+import { useCallback, useEffect, useImperativeHandle, useMemo as useMemo2, useRef, useState } from "react";
 import { KeyboardAvoidingView, Platform, ScrollView as ScrollView2, StyleSheet as StyleSheet3, View as View3 } from "react-native";
 import { Button, Icon as Icon3, Portal, Text as Text3, TextInput } from "react-native-paper";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -259,7 +259,7 @@ function deriveTag(name) {
   const trimmed = name.trim();
   return trimmed ? trimmed[0].toUpperCase() : "";
 }
-function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft }) {
+function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref }) {
   const { dark, colors } = useAutoPaperTheme();
   const insets = useSafeAreaInsets();
   const { error: showErrorToast } = useToast();
@@ -292,6 +292,7 @@ function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, h
     commitEditRef.current = commitEdit;
   });
   useEffect(() => () => commitEditRef.current(), []);
+  useImperativeHandle(ref, () => ({ commitPendingEdit: () => commitEditRef.current() }), []);
   const startEdit = useCallback(
     (target) => {
       commitEdit();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/profile",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "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

@@ -3,7 +3,7 @@ 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 { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { ReactNode, Ref, useCallback, useEffect, useImperativeHandle, 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'
@@ -22,6 +22,18 @@ interface ProfileEditPatch {
   tag: string
 }
 
+export interface ProfilesManagerHandle {
+  // Flushes whatever row is currently being edited — the same thing this component's own unmount
+  // effect does, but callable explicitly. Exists because "unmount" isn't a reliable "the user is
+  // navigating away" signal on every host: React Navigation's web renderer keeps a popped screen
+  // mounted-but-hidden instead of unmounting it, so a host relying only on the unmount fallback
+  // silently loses an in-progress edit on `router.back()` there. A host whose router doesn't
+  // genuinely unmount this component on navigation should hold a ref and call this right before
+  // navigating away (e.g. in its own back-button handler). Safe to call any time, including when
+  // nothing is being edited — a no-op then, same as the unmount effect already is.
+  commitPendingEdit: () => void
+}
+
 export interface ProfilesManagerProps {
   profiles: Profile[]
   // The color a brand-new profile's draft starts on — this component doesn't have (and shouldn't
@@ -37,6 +49,9 @@ export interface ProfilesManagerProps {
   // rendering slot, not an onBack-style callback: this component doesn't know or care that it's a
   // back button, only that the host wants something shown there. Omit to hide the slot.
   headerLeft?: ReactNode
+  // React 19 accepts `ref` as a plain prop on a function component (no forwardRef needed) — see
+  // ProfilesManagerHandle's own doc for why a host may need this.
+  ref?: Ref<ProfilesManagerHandle>
 }
 
 type Row = { kind: 'profile'; profile: Profile } | { kind: 'new' }
@@ -55,7 +70,11 @@ function deriveTag(name: string): string {
 // would still assume *some* host owns navigation; this component doesn't even go that far), so any
 // consuming screen just renders it as its body inside its own routed wrapper (back button, native
 // push/pop transition, whatever persistence hook backs `profiles`/`onCreate`/`onSave`/`onDelete`).
-export function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft }: ProfilesManagerProps) {
+// Staying router-agnostic means this component can't know for itself whether "navigating away"
+// really unmounts it on a given host's router — see ProfilesManagerHandle's own doc for the
+// react-navigation-web case where it doesn't, and why a host there needs the `ref` escape hatch
+// instead of relying on the unmount fallback alone.
+export function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDelete, headerLeft, ref }: ProfilesManagerProps) {
   const { dark, colors } = useAutoPaperTheme()
   const insets = useSafeAreaInsets()
   const { error: showErrorToast } = useToast()
@@ -116,6 +135,11 @@ export function ProfilesManager({ profiles, defaultColor, onCreate, onSave, onDe
     commitEditRef.current = commitEdit
   })
   useEffect(() => () => commitEditRef.current(), [])
+  // The explicit escape hatch for hosts whose "navigate away" doesn't genuinely unmount this
+  // component — see ProfilesManagerHandle's own doc. `[]` deps: the handle object itself never
+  // needs to change identity, since it always calls through the ref to whatever commitEdit is
+  // current at call time, the same indirection the unmount effect above already relies on.
+  useImperativeHandle(ref, () => ({ commitPendingEdit: () => commitEditRef.current() }), [])
 
   const startEdit = useCallback(
     (target: 'new' | Profile) => {

package/src/index.ts

@@ -1,6 +1,6 @@
 export { ProfileChip } from './ProfileChip'
 export { ProfilePicker } from './ProfilePicker'
-export { ProfilesManager, type ProfilesManagerProps } from './ProfilesManager'
+export { ProfilesManager, type ProfilesManagerHandle, type ProfilesManagerProps } from './ProfilesManager'
 export { isValidProfile, isValidTag, MAX_PROFILE_NAME_LENGTH, MAX_TAG_LENGTH } from './profilesValidation'
 export { isSharedProfileStoreAvailable, loadSharedProfiles, saveSharedProfiles } from './sharedProfileStore'
 export type { Profile } from './types'