@amityco/react-native-social-uikit 4.1.0 → 4.1.1-d7da0c5c.0

package/src/social/features/chat/features/group/select-member/SelectGroupMember.tsx

@@ -0,0 +1,68 @@
+// SelectGroupMember — entry component for the select-group-member step of the
+// create-group flow. Ported from AmityUiKitWeb
+// v4/chat/features/group/select-member/SelectGroupMember. Composes the Header
+// (title + Next + search + selected strip) over the searchable multi-select
+// UserList; tapping Next advances to the create-group step.
+//
+// RN adaptations from web:
+//   - Web wraps everything in a `<form onSubmit>`; RN has no form, so `handleNext`
+//     is wired to the Header's Next button via `onNext`.
+
+// 1. React / RN imports
+import { View } from 'react-native';
+
+// 2. Third-party imports
+import { Controller } from 'react-hook-form';
+
+// 3. Internal imports (relative)
+import { Header } from './components/Header/Header';
+import { UserList } from './components/UserList/UserList';
+import {
+  useSelectGroupMember,
+  type SelectGroupMemberPageProps,
+} from './hooks/useSelectGroupMember';
+import { useStyles } from './styles';
+
+// 4. Named function component
+export function SelectGroupMember({
+  selectedGroupMember,
+}: SelectGroupMemberPageProps) {
+  const { styles } = useStyles();
+  const {
+    form,
+    searchText,
+    setSearchText,
+    debouncedText,
+    selectedUsers,
+    setSelectedUsers,
+    removeUser,
+    isFormValid,
+    handleClose,
+    handleNext,
+  } = useSelectGroupMember({ selectedGroupMember });
+
+  return (
+    <View style={styles.selectGroupMember}>
+      <Header
+        onClose={handleClose}
+        onNext={handleNext}
+        searchValue={searchText}
+        onRemoveUser={removeUser}
+        selectedUsers={selectedUsers}
+        isFormValid={isFormValid}
+        onSearchChange={setSearchText}
+      />
+      <Controller
+        control={form.control}
+        name="selectedUsers"
+        render={({ field: { value } }) => (
+          <UserList
+            searchText={debouncedText}
+            selectedUsers={value}
+            onChange={setSelectedUsers}
+          />
+        )}
+      />
+    </View>
+  );
+}

package/src/social/features/chat/features/group/select-member/components/Header/Header.tsx

@@ -0,0 +1,76 @@
+// Header — select-group-member header. Ported from AmityUiKitWeb
+// v4/chat/features/group/select-member/components/Header. Composes the shared
+// TopBar (back + a trailing "Next" button) over a search field and the
+// SelectedUsersBar strip.
+//
+// RN adaptations from web:
+//   - RN has no `<form>`, so web's `Button.Main type="submit"` becomes a
+//     `Button` (tertiary/sm — the RN analogue of web ghost/primary) wired to an
+//     explicit `onNext` prop.
+//   - Web's `SearchInput` molecule is reused directly.
+
+// 1. React / RN imports
+import { View } from 'react-native';
+
+// 2. Internal imports (relative)
+import { TopBar } from '../../../../../elements/TopBar';
+import { Button } from '../../../../../../../../core/design/atoms/Button';
+import { SearchInput } from '../../../../../../../../core/design/molecules/SearchInput';
+import { useString } from '../../../../../../../../core/localization';
+import { SelectedUsersBar } from '../SelectedUsersBar/SelectedUsersBar';
+import { useStyles } from './styles';
+
+// 3. Types
+type HeaderProps = {
+  searchValue: string;
+  selectedUsers: Amity.User[];
+  isFormValid: boolean;
+  onClose: () => void;
+  onNext: () => void;
+  onSearchChange: (value: string) => void;
+  onRemoveUser: (userId: string) => void;
+};
+
+// 4. Named function component
+export function Header({
+  searchValue,
+  selectedUsers,
+  isFormValid,
+  onClose,
+  onNext,
+  onSearchChange,
+  onRemoveUser,
+}: HeaderProps) {
+  const { styles } = useStyles();
+  const title = useString('amity_chat_select_members_title');
+  const nextLabel = useString('amity_chat_next');
+  const searchPlaceholder = useString('amity_chat_search_placeholder');
+
+  return (
+    <View style={styles.header}>
+      <TopBar
+        title={title}
+        leadingType="back"
+        onLeading={onClose}
+        trailing={
+          <Button
+            hierarchy="tertiary"
+            size="sm"
+            label={nextLabel}
+            disabled={!isFormValid}
+            onPress={onNext}
+          />
+        }
+      />
+      <View style={styles.searchBar}>
+        <SearchInput
+          value={searchValue}
+          onChange={onSearchChange}
+          placeholder={searchPlaceholder}
+          accessibilityLabel={searchPlaceholder}
+        />
+      </View>
+      <SelectedUsersBar users={selectedUsers} onRemoveUser={onRemoveUser} />
+    </View>
+  );
+}

package/src/social/features/chat/features/group/select-member/components/Header/index.ts

@@ -0,0 +1 @@
+export { Header } from './Header';

package/src/social/features/chat/features/group/select-member/components/Header/styles.ts

@@ -0,0 +1,25 @@
+// Styles for the select-group-member Header — ported from AmityUiKitWeb
+// v4/chat/features/group/select-member/components/Header/Header.module.css.
+// Geometry: search bar padding 0.5rem 1rem→8/16. Web `position: sticky` has no
+// RN equivalent and is dropped. Colours via design tokens (no hardcoded hex).
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../../../../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../../../../../../core/design/tokens/amity-color-tokens';
+
+export const useStyles = () => {
+  const token = useToken();
+
+  const styles = StyleSheet.create({
+    header: {
+      flexDirection: 'column',
+      backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault),
+    },
+    searchBar: {
+      paddingVertical: 8,
+      paddingHorizontal: 16,
+    },
+  });
+
+  return { styles, token };
+};

package/src/social/features/chat/features/group/select-member/components/SelectedUsersBar/SelectedUsersBar.tsx

@@ -0,0 +1,49 @@
+// SelectedUsersBar — the horizontal strip of chosen members above the user list.
+// Ported from AmityUiKitWeb v4/chat/features/group/select-member/components/
+// SelectedUsersBar. Renders a removable SelectedMember tile per chosen user and
+// a divider below; hides entirely when nothing is selected.
+//
+// RN adaptations from web:
+//   - Web's `overflow-x: auto` flex row → a horizontal ScrollView.
+
+// 1. React / RN imports
+import { ScrollView, View } from 'react-native';
+
+// 2. Internal imports (relative)
+import { SelectedMember } from '../../../../../features/shared/components/SelectedMember';
+import { useStyles } from './styles';
+
+// 3. Types
+type SelectedUsersBarProps = {
+  users: Amity.User[];
+  onRemoveUser: (userId: string) => void;
+};
+
+// 4. Named function component
+export function SelectedUsersBar({
+  users,
+  onRemoveUser,
+}: SelectedUsersBarProps) {
+  const { styles } = useStyles();
+
+  if (users.length === 0) return null;
+
+  return (
+    <View style={styles.selectedUsersBar}>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.list}
+      >
+        {users.map((user) => (
+          <SelectedMember
+            key={user.userId}
+            user={user}
+            onRemove={onRemoveUser}
+          />
+        ))}
+      </ScrollView>
+      <View style={styles.divider} />
+    </View>
+  );
+}

package/src/social/features/chat/features/group/select-member/components/SelectedUsersBar/index.ts

@@ -0,0 +1 @@
+export { SelectedUsersBar } from './SelectedUsersBar';

package/src/social/features/chat/features/group/select-member/components/SelectedUsersBar/styles.ts

@@ -0,0 +1,29 @@
+// Styles for SelectedUsersBar — ported from AmityUiKitWeb
+// v4/chat/features/group/select-member/components/SelectedUsersBar/
+// SelectedUsersBar.module.css. Geometry: list gap 0.25rem→4, padding 0.5rem→8,
+// divider height 0.0625rem→1. Colours via design tokens (no hardcoded hex).
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../../../../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../../../../../../core/design/tokens/amity-color-tokens';
+
+export const useStyles = () => {
+  const token = useToken();
+
+  const styles = StyleSheet.create({
+    selectedUsersBar: {
+      backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault),
+    },
+    list: {
+      flexDirection: 'row',
+      gap: 4,
+      padding: 8,
+    },
+    divider: {
+      height: 1,
+      backgroundColor: token(AmityColorToken.LineDividerPostDefault),
+    },
+  });
+
+  return { styles, token };
+};

package/src/social/features/chat/features/group/select-member/components/UserItem/UserItem.tsx

@@ -0,0 +1,58 @@
+// UserItem — a single selectable-user row in the select-group-member list.
+// Ported from AmityUiKitWeb v4/chat/features/group/select-member/components/UserItem.
+//
+// RN adaptations from web:
+//   - Web resolves the avatar synchronously via `FileRepository.fileUrlWithSize`
+//     from `user.avatar.fileUrl`; RN resolves `user.avatarFileId` through the
+//     shared `useFile` hook, mirroring the conversation/create UserItem.
+//   - Web's core `Avatar` atom → the chat `Avatar.User` element (round, size md).
+//   - The web `BrandBadge` (shown when `user.isBrand`) has no RN design element,
+//     so it is omitted (same decision as the conversation/create UserItem).
+//   - Web renders no press handler here — the row's selection is owned by the
+//     wrapping `Selection.Checkbox`, so this component is purely presentational.
+
+// 1. React / RN imports
+import { View } from 'react-native';
+
+// 2. Internal imports (relative)
+import { Avatar } from '../../../../../elements/Avatar';
+import { Typography } from '../../../../../../../../core/design/components/Typography';
+import { Skeleton } from '../../../../../../../../core/design/components/Skeleton';
+import useFile from '../../../../../../../../core/hooks/useFile';
+import { useStyles } from './styles';
+
+// 3. Types
+type UserItemProps = {
+  user: Amity.User;
+};
+
+// 4. Named function component
+export function UserItem({ user }: UserItemProps) {
+  const { styles } = useStyles();
+  const displayName = user.displayName ?? user.userId;
+  const avatarUrl = useFile({ fileId: user.avatarFileId ?? '' });
+
+  return (
+    <View style={styles.userItem}>
+      <Avatar.User avatarUrl={avatarUrl} displayName={displayName} size="md" />
+      <View style={styles.nameRow}>
+        <Typography variant="bodyBold" style={styles.name} numberOfLines={1}>
+          {displayName}
+        </Typography>
+      </View>
+    </View>
+  );
+}
+
+// 5. Compound variant — loading skeleton row.
+function UserItemSkeleton() {
+  const { styles } = useStyles();
+  return (
+    <View style={styles.skeletonRow}>
+      <Skeleton circle width={40} height={40} />
+      <Skeleton width={140} height={10} />
+    </View>
+  );
+}
+
+UserItem.Skeleton = UserItemSkeleton;

package/src/social/features/chat/features/group/select-member/components/UserItem/index.ts

@@ -0,0 +1 @@
+export { UserItem } from './UserItem';

package/src/social/features/chat/features/group/select-member/components/UserItem/styles.ts

@@ -0,0 +1,42 @@
+// Styles for the select-group-member UserItem — ported from AmityUiKitWeb
+// v4/chat/features/group/select-member/components/UserItem/UserItem.module.css.
+// Geometry: gap 0.5rem→8, name-row gap 0.125rem→2, skeleton padding 0.5rem 1rem→8/16,
+// skeleton height 3.5rem→56. Row padding lives on the wrapping Selection.Checkbox.
+// Colours via design tokens (no hardcoded hex).
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../../../../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../../../../../../core/design/tokens/amity-color-tokens';
+
+export const useStyles = () => {
+  const token = useToken();
+
+  const styles = StyleSheet.create({
+    userItem: {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+    },
+    nameRow: {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 2,
+    },
+    name: {
+      flexShrink: 1,
+      color: token(AmityColorToken.TextListHeaderDefaultDefault),
+    },
+    skeletonRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+      paddingVertical: 8,
+      paddingHorizontal: 16,
+      height: 56,
+    },
+  });
+
+  return { styles, token };
+};

package/src/social/features/chat/features/group/select-member/components/UserList/UserList.tsx

@@ -0,0 +1,131 @@
+// UserList — the searchable, multi-select user list for the select-group-member
+// step. Ported from AmityUiKitWeb v4/chat/features/group/select-member/components/
+// UserList.
+//
+// RN adaptations from web:
+//   - Web's core `useSearchUserByDisplayName` (react-query) + IntersectionObserver
+//     sentinel → the conversation/create `useSearchUsers` live-collection hook
+//     (reused, not rebuilt) + FlatList `onEndReached`.
+//   - Web's `react-aria` `CheckboxGroup` has no RN equivalent; each row is an
+//     individual `Selection.Checkbox`. Toggling merges into / removes from the
+//     existing `selectedUsers` array so selections made under a previous search
+//     query survive when the visible results change.
+//   - Web's `.userList__row[data-hovered]` background becomes the row's PRESSED
+//     background. `Selection.Checkbox` (a core atom) owns a full-width Pressable
+//     whose style can't be extended, so an outer Pressable owns the toggle + the
+//     pressed background and the inner checkbox is rendered visual-only
+//     (`pointerEvents="none"`) — the transparent checkbox row lets the pressed
+//     background show through.
+//   - Web reads the current user via `useSDK().currentUserId`; RN reads
+//     `Client.getCurrentUser()`.
+//   - Search gate matches web exactly: a 1–2 char (partial) query is suppressed
+//     and shows the prompt; an empty query still browses all users.
+
+// 1. React / RN imports
+import { type ReactElement } from 'react';
+import { FlatList, Pressable, View } from 'react-native';
+
+// 2. Third-party imports
+import { Client } from '@amityco/ts-sdk-react-native';
+
+// 3. Internal imports (relative)
+import { Selection } from '../../../../../../../../core/design/atoms/Selection';
+import { EmptyState } from '../../../../../features/shared/components/EmptyState';
+import { UserItem } from '../UserItem/UserItem';
+import { useSearchUsers } from '../../../../conversation/create/hooks/useSearchUsers';
+import { useStyles } from './styles';
+
+// Local constants (mirror AmityUiKitWeb v4/chat/constants).
+const LIST_PAGE_LIMIT = 20;
+const LIST_SKELETON_ROW_COUNT = 9;
+const SEARCH_MIN_QUERY_LENGTH = 3;
+
+// 4. Types
+type UserListProps = {
+  searchText: string;
+  selectedUsers: Amity.User[];
+  onChange: (users: Amity.User[]) => void;
+};
+
+// 5. Named function component
+export function UserList({
+  searchText,
+  selectedUsers,
+  onChange,
+}: UserListProps) {
+  const { styles } = useStyles();
+  const currentUserId = Client.getCurrentUser()?.userId;
+
+  const trimmed = searchText.trim();
+  const isPartialQuery =
+    trimmed.length > 0 && trimmed.length < SEARCH_MIN_QUERY_LENGTH;
+
+  const { users, loading, hasNextPage, loadMore } = useSearchUsers({
+    displayName: searchText,
+    limit: LIST_PAGE_LIMIT,
+    enabled: !isPartialQuery,
+  });
+
+  const isLoadingFirstPage = loading && users.length === 0;
+
+  if (isPartialQuery) {
+    return <EmptyState variant="prompt" />;
+  }
+
+  const visibleUsers = users.filter((user) => user.userId !== currentUserId);
+
+  if (visibleUsers.length === 0 && !loading) {
+    return <EmptyState variant="no-results" />;
+  }
+
+  const selectedIds = new Set(selectedUsers.map((user) => user.userId));
+
+  function handleToggle(user: Amity.User, selected: boolean) {
+    if (selected) {
+      if (selectedIds.has(user.userId)) return;
+      onChange([...selectedUsers, user]);
+    } else {
+      onChange(selectedUsers.filter((u) => u.userId !== user.userId));
+    }
+  }
+
+  const footer: ReactElement | null =
+    isLoadingFirstPage || loading ? (
+      <>
+        {Array.from({ length: LIST_SKELETON_ROW_COUNT }).map((_, i) => (
+          <UserItem.Skeleton key={i} />
+        ))}
+      </>
+    ) : null;
+
+  return (
+    <FlatList
+      style={styles.userList}
+      data={visibleUsers}
+      keyExtractor={(user) => user.userId}
+      renderItem={({ item }) => {
+        const isSelected = selectedIds.has(item.userId);
+        return (
+          <Pressable
+            onPress={() => handleToggle(item, !isSelected)}
+            style={({ pressed }) => (pressed ? styles.rowPressed : undefined)}
+            accessibilityRole="checkbox"
+            accessibilityState={{ checked: isSelected }}
+            accessibilityLabel={item.displayName ?? item.userId}
+          >
+            <View pointerEvents="none">
+              <Selection.Checkbox isSelected={isSelected}>
+                <UserItem user={item} />
+              </Selection.Checkbox>
+            </View>
+          </Pressable>
+        );
+      }}
+      onEndReachedThreshold={0.7}
+      onEndReached={() => {
+        if (hasNextPage && !isLoadingFirstPage && !loading) loadMore();
+      }}
+      ListFooterComponent={footer}
+    />
+  );
+}

package/src/social/features/chat/features/group/select-member/components/UserList/index.ts

@@ -0,0 +1 @@
+export { UserList } from './UserList';

package/src/social/features/chat/features/group/select-member/components/UserList/styles.ts

@@ -0,0 +1,24 @@
+// Styles for the select-group-member UserList — ported from AmityUiKitWeb
+// v4/chat/features/group/select-member/components/UserList/UserList.module.css.
+// The web list is a flex column; RN uses a FlatList that fills its parent.
+// Web's `.userList__row[data-hovered]` background maps to the RN row's PRESSED
+// background (same `surface-list-default-hover` token).
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../../../../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../../../../../../core/design/tokens/amity-color-tokens';
+
+export const useStyles = () => {
+  const token = useToken();
+
+  const styles = StyleSheet.create({
+    userList: {
+      flex: 1,
+    },
+    rowPressed: {
+      backgroundColor: token(AmityColorToken.SurfaceListDefaultHover),
+    },
+  });
+
+  return { styles };
+};

package/src/social/features/chat/features/group/select-member/components/index.ts

@@ -0,0 +1,4 @@
+export { Header } from './Header/Header';
+export { SelectedUsersBar } from './SelectedUsersBar/SelectedUsersBar';
+export { UserItem } from './UserItem/UserItem';
+export { UserList } from './UserList/UserList';

package/src/social/features/chat/features/group/select-member/constants/index.ts

@@ -0,0 +1,3 @@
+// Ported from AmityUiKitWeb v4/chat/features/group/select-member/constants.
+// The maximum number of members a group chat may contain.
+export const MEMBER_MAX_COUNT = 1000;

package/src/social/features/chat/features/group/select-member/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useSelectGroupMember } from './useSelectGroupMember';
+export type { SelectGroupMemberPageProps } from './useSelectGroupMember';

package/src/social/features/chat/features/group/select-member/hooks/useSelectGroupMember.ts

@@ -0,0 +1,128 @@
+// useSelectGroupMember — state + actions for the select-group-member step.
+// Ported from AmityUiKitWeb v4/chat/features/group/select-member/hooks/
+// useSelectGroupMember, keeping the react-hook-form + zod shape 1:1 so the
+// SelectGroupMember screen consumes it via <Controller> unchanged.
+//
+// RN adaptations from web:
+//   - Web debounces the search text with `react-use`'s `useDebounce`
+//     (not installed in RN); replaced by the plain setTimeout effect the
+//     conversation/create flow uses (SEARCH_DEBOUNCE_MS).
+//   - Web navigates via the in-app ChatNavigationProvider (`pop`/`replace`);
+//     RN uses React Navigation. `handleNext` uses `replace` so the back button
+//     skips this step (parity with web `replace`). The destination route
+//     (AmityCreateGroupChatPage) registers in a later wave — the typed
+//     RootStackParamList does not know it yet, so the nav call is cast.
+//   - Web's `useConfirmContext().info` member-limit dialog → RN `Alert.alert`.
+
+import { useEffect, useState } from 'react';
+import { Alert } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import * as z from 'zod';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+
+import { useString } from '../../../../../../../core/localization';
+import type { RootStackParamList } from '../../../../../../../core/routes/RouteParamList';
+import { MEMBER_MAX_COUNT } from '../constants';
+
+// Web reads SEARCH_DEBOUNCE_MS from chat/constants; inlined here to match the
+// conversation/create flow and keep the port self-contained.
+const SEARCH_DEBOUNCE_MS = 300;
+
+// Route name for the create-group step. Web pushed a ChatPageTypes descriptor;
+// RN targets a React Navigation route that registers in a later wave.
+const CREATE_GROUP_CHAT_ROUTE = 'AmityCreateGroupChatPage';
+
+// Web imported this type from ~/v4/chat/pages/SelectGroupMemberPage (a page that
+// does not exist in RN); defined locally instead.
+export type SelectGroupMemberPageProps = {
+  selectedGroupMember?: Amity.User[];
+};
+
+const schema = z.object({
+  searchText: z.string(),
+  selectedUsers: z.array(z.custom<Amity.User>()).min(1).max(MEMBER_MAX_COUNT),
+});
+
+type SelectGroupMemberForm = z.infer<typeof schema>;
+
+export function useSelectGroupMember({
+  selectedGroupMember = [],
+}: SelectGroupMemberPageProps = {}) {
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+  const memberLimitTitle = useString('amity_chat_member_limit_reached_title');
+  const memberLimitMessage = useString(
+    'amity_chat_member_limit_reached_message'
+  );
+  const [debouncedText, setDebouncedText] = useState('');
+
+  const form = useForm<SelectGroupMemberForm>({
+    mode: 'onChange',
+    resolver: zodResolver(schema),
+    defaultValues: {
+      searchText: '',
+      selectedUsers: selectedGroupMember,
+    },
+  });
+
+  const searchText = form.watch('searchText');
+  const selectedUsers = form.watch('selectedUsers');
+
+  useEffect(() => {
+    const timer = setTimeout(
+      () => setDebouncedText(searchText),
+      SEARCH_DEBOUNCE_MS
+    );
+    return () => clearTimeout(timer);
+  }, [searchText]);
+
+  function setSearchText(value: string) {
+    form.setValue('searchText', value, { shouldValidate: true });
+  }
+
+  function removeUser(userId: string) {
+    const current = form.getValues('selectedUsers');
+    form.setValue(
+      'selectedUsers',
+      current.filter((u) => u.userId !== userId),
+      { shouldValidate: true, shouldDirty: true }
+    );
+  }
+
+  function setSelectedUsers(users: Amity.User[]) {
+    if (users.length > MEMBER_MAX_COUNT) {
+      Alert.alert(memberLimitTitle, memberLimitMessage);
+      return;
+    }
+    form.setValue('selectedUsers', users, {
+      shouldValidate: true,
+      shouldDirty: true,
+    });
+  }
+
+  function handleClose() {
+    navigation.goBack();
+  }
+
+  const handleNext = form.handleSubmit((values) => {
+    (navigation.replace as unknown as (name: string, params?: object) => void)(
+      CREATE_GROUP_CHAT_ROUTE,
+      { selectedUsers: values.selectedUsers }
+    );
+  });
+
+  return {
+    form,
+    searchText,
+    setSearchText,
+    debouncedText,
+    selectedUsers,
+    setSelectedUsers,
+    removeUser,
+    isFormValid: form.formState.isValid || form.formState.isSubmitting,
+    handleClose,
+    handleNext,
+  };
+}

package/src/social/features/chat/features/group/select-member/index.ts

@@ -0,0 +1,2 @@
+export { SelectGroupMember } from './SelectGroupMember';
+export type { SelectGroupMemberPageProps } from './hooks/useSelectGroupMember';