@amityco/react-native-social-uikit 4.1.1-fdf83f6b.0 → 4.2.0

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

@@ -1,68 +0,0 @@
-// 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/chat/features/group/select-member/components/Header/Header.tsx

@@ -1,76 +0,0 @@
-// 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/chat/features/group/select-member/components/Header/index.ts

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

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

@@ -1,25 +0,0 @@
-// 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/chat/features/group/select-member/components/SelectedUsersBar/SelectedUsersBar.tsx

@@ -1,49 +0,0 @@
-// 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/chat/features/group/select-member/components/SelectedUsersBar/index.ts

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

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

@@ -1,29 +0,0 @@
-// 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/chat/features/group/select-member/components/UserItem/UserItem.tsx

@@ -1,58 +0,0 @@
-// 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/chat/features/group/select-member/components/UserItem/index.ts

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

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

@@ -1,42 +0,0 @@
-// 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/chat/features/group/select-member/components/UserList/UserList.tsx

@@ -1,131 +0,0 @@
-// 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/chat/features/group/select-member/components/UserList/index.ts

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

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

@@ -1,24 +0,0 @@
-// 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/chat/features/group/select-member/components/index.ts

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

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

@@ -1,3 +0,0 @@
-// 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/chat/features/group/select-member/hooks/index.ts

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

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

@@ -1,128 +0,0 @@
-// 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/chat/features/group/select-member/index.ts

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