stream-chat-react-native-core 9.5.0-beta.7 → 9.5.0-beta.9

package/src/components/ChannelDetails/components/ChannelEditDetailsForm.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import { useChannelDetailsContext } from '../../../contexts/channelDetailsContext/channelDetailsContext';
+import { ChannelEditDetailsProvider } from '../../../contexts/channelEditDetailsContext/ChannelEditDetailsContext';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
+import type { GlobalFileUploadRequest } from '../../../types/types';
+import { NotificationList } from '../../Notifications/NotificationList';
+
+export type ChannelEditDetailsFormProps = {
+  /** Called when the form is dismissed via the close button or after a successful save. */
+  onClose: () => void;
+  /**
+   * Compress image with quality (from 0 to 1, where 1 is best quality) applied
+   * to the channel image picked during editing.
+   */
+  compressImageQuality?: number;
+  /** Override the upload request used to upload the channel image. */
+  doFileUploadRequest?: GlobalFileUploadRequest;
+};
+
+/**
+ * Renders the channel edit details form: a header with a confirm action, the
+ * editable fields, and the notification list. Wrap-free — mount it wherever the
+ * edit UI should appear (e.g. inside a modal or a navigation screen).
+ */
+export const ChannelEditDetailsForm = ({
+  compressImageQuality,
+  doFileUploadRequest,
+  onClose,
+}: ChannelEditDetailsFormProps) => {
+  const { channel } = useChannelDetailsContext();
+  const { ChannelEditDetailsFormContent, ChannelEditDetailsFormHeader } = useComponentsContext();
+
+  if (!channel?.cid) {
+    return null;
+  }
+
+  return (
+    <ChannelEditDetailsProvider
+      compressImageQuality={compressImageQuality}
+      doFileUploadRequest={doFileUploadRequest}
+    >
+      <ChannelEditDetailsFormHeader onClose={onClose} />
+      <ChannelEditDetailsFormContent />
+      <NotificationList />
+    </ChannelEditDetailsProvider>
+  );
+};

package/src/components/ChannelDetails/components/{ChannelEditDetails.tsx → ChannelEditDetailsFormContent.tsx}

@@ -18,10 +18,7 @@ const selector = (state: EditChannelDetailsState) => ({
   updatedImage: state.updatedImage,
 });
 
-/**
- * @experimental This component is experimental and is subject to change.
- */
-export const ChannelEditDetails = () => {
+export const ChannelEditDetailsFormContent = () => {
   const { channel } = useChannelDetailsContext();
   const { store } = useChannelEditDetailsContext();
   const { ChannelEditImageSheet, ChannelEditName } = useComponentsContext();

package/src/components/ChannelDetails/components/ChannelEditDetailsFormHeader.tsx

@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+
+import { ActivityIndicator, Keyboard } from 'react-native';
+
+import { ModalHeader } from './modal/ModalHeader';
+
+import { useChannelEditDetailsContext } from '../../../contexts/channelEditDetailsContext/ChannelEditDetailsContext';
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { useStableCallback } from '../../../hooks/useStableCallback';
+import { Checkmark } from '../../../icons/checkmark-1';
+import { useAreChannelDetailsEdited } from '../../../state-store/edit-channel-details-store';
+import { Button } from '../../ui/Button/Button';
+
+const loadingIconStyle = { margin: 0 };
+const LoadingButtonIcon = ({ height, width }: { height?: number; width?: number }) => (
+  <ActivityIndicator style={{ ...loadingIconStyle, ...{ height, width } }} />
+);
+
+export type ChannelEditDetailsFormHeaderProps = {
+  /** Called when the form is dismissed via the close button or after a successful save. */
+  onClose: () => void;
+};
+
+export const ChannelEditDetailsFormHeader = ({ onClose }: ChannelEditDetailsFormHeaderProps) => {
+  const { store, submit } = useChannelEditDetailsContext();
+  const { t } = useTranslationContext();
+  const [saving, setSaving] = useState(false);
+  const channelDetailsEdited = useAreChannelDetailsEdited(store);
+  const confirmEnabled = channelDetailsEdited && !saving;
+
+  const handleConfirm = useStableCallback(async () => {
+    if (!confirmEnabled) return;
+    Keyboard.dismiss();
+    setSaving(true);
+    try {
+      await submit();
+      onClose();
+    } catch {
+      // failure notification already surfaced by the channel action
+    } finally {
+      setSaving(false);
+    }
+  });
+
+  return (
+    <ModalHeader
+      onClose={onClose}
+      rightAction={
+        <Button
+          accessibilityLabel={t('a11y/Confirm edit channel')}
+          accessibilityRole='button'
+          accessibilityState={{ busy: saving, disabled: !confirmEnabled }}
+          disabled={!confirmEnabled}
+          iconOnly
+          LeadingIcon={saving ? LoadingButtonIcon : Checkmark}
+          onPress={handleConfirm}
+          testID='channel-details-edit-confirm-button'
+          type='solid'
+          variant='primary'
+        />
+      }
+      title={t('Edit')}
+    />
+  );
+};

package/src/components/ChannelDetails/components/ChannelEditImageSheet.tsx

@@ -165,9 +165,6 @@ const ChannelEditImageSheetInner = () => {
   );
 };
 
-/**
- * @experimental This component is experimental and is subject to change.
- */
 export const ChannelEditImageSheet = ({ onClose, visible }: ChannelEditImageSheetProps) => (
   <BottomSheetModal enableDynamicSizing onClose={onClose} visible={visible}>
     <ChannelEditImageSheetInner />

package/src/components/ChannelDetails/components/ChannelEditName.tsx

@@ -11,9 +11,6 @@ const selectCurrentName = (state: EditChannelDetailsState) => ({
   currentName: state.currentName,
 });
 
-/**
- * @experimental This component is experimental and is subject to change.
- */
 export const ChannelEditName = () => {
   const { store } = useChannelEditDetailsContext();
   const { t } = useTranslationContext();

package/src/components/ChannelDetails/components/__tests__/navigation-section/FileAttachmentList.test.tsx

@@ -81,7 +81,6 @@ jest.mock(
       return children;
     },
     useChannelFileAttachmentListContext: () => ({
-      channel: mockChannel,
       searchSource: mockCurrentSearchSource,
     }),
   }),
@@ -135,7 +134,7 @@ const tree = (
     <ThemeProvider theme={defaultTheme}>
       <TranslationProvider value={props.translators ?? fakeTranslators}>
         <ChannelDetailsContextProvider
-          value={{ channel: mockChannel } as unknown as ChannelDetailsContextValue}
+          channel={mockChannel as unknown as ChannelDetailsContextValue['channel']}
         >
           <FileAttachmentList
             additionalSectionListProps={props.additionalSectionListProps as never}

package/src/components/ChannelDetails/components/__tests__/navigation-section/MediaList.test.tsx

@@ -105,7 +105,7 @@ jest.mock('../../../../../contexts/channelMediaListContext/ChannelMediaListConte
       mockProviderProbe.push({ channel: providedChannel });
       return ReactLib.createElement(
         actual.ChannelMediaListContext.Provider,
-        { value: { channel: mockChannel, searchSource: mockCurrentSearchSource } },
+        { value: { searchSource: mockCurrentSearchSource } },
         children,
       );
     },
@@ -165,7 +165,7 @@ const tree = (searchSource: FakeSearchSource, props: { additionalFlatListProps?:
         }}
       >
         <ChannelDetailsContextProvider
-          value={{ channel: mockChannel } as unknown as ChannelDetailsContextValue}
+          channel={mockChannel as unknown as ChannelDetailsContextValue['channel']}
         >
           <MediaList additionalFlatListProps={props.additionalFlatListProps as never} />
         </ChannelDetailsContextProvider>

package/src/components/ChannelDetails/components/__tests__/navigation-section/PinnedMessageList.test.tsx

@@ -74,7 +74,6 @@ jest.mock(
       return children;
     },
     useChannelPinnedMessageListContext: () => ({
-      channel: mockChannel,
       searchSource: mockCurrentSearchSource,
     }),
   }),
@@ -148,7 +147,7 @@ const tree = (searchSource: FakeSearchSource, props: { additionalFlatListProps?:
         }}
       >
         <ChannelDetailsContextProvider
-          value={{ channel: mockChannel } as unknown as ChannelDetailsContextValue}
+          channel={mockChannel as unknown as ChannelDetailsContextValue['channel']}
         >
           <PinnedMessageList additionalFlatListProps={props.additionalFlatListProps as never} />
         </ChannelDetailsContextProvider>

package/src/components/ChannelDetails/components/index.ts

@@ -5,10 +5,12 @@ export * from './ChannelDetailsNavigationSection';
 export * from './ChannelDetailsProfile';
 export * from './ChannelDetailsEditButton';
 export * from './ChannelDetailsNavHeader';
-export * from './ChannelEditDetails';
-export * from './ChannelEditDetailsModal';
+export * from './ChannelEditDetailsForm';
+export * from './ChannelEditDetailsFormContent';
+export * from './ChannelEditDetailsFormHeader';
 export * from './ChannelEditImageSheet';
 export * from './ChannelEditName';
 export * from './ChannelDetailsEditButton';
 export * from './members';
 export * from './navigation-section';
+export * from './roles';

package/src/components/ChannelDetails/components/members/AddMemberSearchResultItem.tsx

@@ -17,9 +17,6 @@ export type AddMemberSearchResultItemProps = {
   user: UserResponse;
 };
 
-/**
- * @experimental This component is experimental and is subject to change.
- */
 export const AddMemberSearchResultItem = ({ onPress, user }: AddMemberSearchResultItemProps) => {
   const { t } = useTranslationContext();
   const { selectionStore } = useChannelAddMembersContext();

package/src/components/ChannelDetails/components/members/ChannelAddMembersButton.tsx

@@ -0,0 +1,83 @@
+import React, { useCallback, useState } from 'react';
+
+import { useChannelDetailsContext } from '../../../../contexts/channelDetailsContext/channelDetailsContext';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
+import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
+import { useCanAddMembersToChannel } from '../../../../hooks/useCanAddMembersToChannel';
+import { UserAdd } from '../../../../icons/user-add';
+import { Button, ButtonProps } from '../../../ui/Button/Button';
+import { ChannelDetailsModal } from '../modal/Modal';
+
+export type ChannelAddMembersButtonProps = {
+  /** Override the default behavior, which opens the Add-members modal. */
+  onPress?: () => void;
+  /** Style forwarded to the underlying Button. */
+  style?: ButtonProps['style'];
+  testID?: string;
+  variant?: 'icon' | 'text';
+};
+
+export const ChannelAddMembersButton = ({
+  onPress,
+  style,
+  testID,
+  variant = 'text',
+}: ChannelAddMembersButtonProps) => {
+  const { channel } = useChannelDetailsContext();
+  const { ChannelAddMembersForm } = useComponentsContext();
+  const { t } = useTranslationContext();
+  const isVisible = useCanAddMembersToChannel(channel);
+  const [isAddMembersVisible, setAddMembersVisible] = useState(false);
+
+  // The built-in modal is only used by the default press behavior. When a custom handler
+  // (onPress prop) is provided, the consumer owns the modal, so we must not render the built-in one.
+  const usesDefaultModal = !onPress;
+
+  const handlePress = useCallback(() => {
+    if (onPress) {
+      onPress();
+      return;
+    }
+    setAddMembersVisible(true);
+  }, [onPress]);
+
+  const handleClose = useCallback(() => setAddMembersVisible(false), []);
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return (
+    <>
+      {variant === 'icon' ? (
+        <Button
+          accessibilityLabelKey='a11y/Add members'
+          iconOnly
+          LeadingIcon={UserAdd}
+          onPress={handlePress}
+          size='md'
+          style={style}
+          testID={testID}
+          type='outline'
+          variant='secondary'
+        />
+      ) : (
+        <Button
+          accessibilityLabelKey='a11y/Add members'
+          label={t('Add')}
+          onPress={handlePress}
+          size='sm'
+          style={style}
+          testID={testID}
+          type='outline'
+          variant='secondary'
+        />
+      )}
+      {usesDefaultModal ? (
+        <ChannelDetailsModal onClose={handleClose} visible={isAddMembersVisible}>
+          <ChannelAddMembersForm onClose={handleClose} />
+        </ChannelDetailsModal>
+      ) : null}
+    </>
+  );
+};

package/src/components/ChannelDetails/components/members/ChannelAddMembersForm.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import type { UserSearchSource } from 'stream-chat';
+
+import { ChannelAddMembersProvider } from '../../../../contexts/channelAddMembersContext/ChannelAddMembersContext';
+import { useChannelDetailsContext } from '../../../../contexts/channelDetailsContext/channelDetailsContext';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
+import { NotificationList } from '../../../Notifications/NotificationList';
+
+export type ChannelAddMembersFormProps = {
+  /** Called when the form is dismissed via the close button or after members are added. */
+  onClose: () => void;
+  /**
+   * A custom `UserSearchSource` used to query and paginate the users to add.
+   * Overrides the source the provider creates by default (pre-configured to
+   * autocomplete by `name`).
+   */
+  searchSource?: UserSearchSource;
+};
+
+/**
+ * Renders the add-members form: a header with a confirm action, the user search
+ * list, and the notification list. Mount it wherever the add-members UI should
+ * appear (e.g. inside a modal or a navigation screen).
+ */
+export const ChannelAddMembersForm = ({ onClose, searchSource }: ChannelAddMembersFormProps) => {
+  const { channel } = useChannelDetailsContext();
+  const { ChannelAddMembersFormContent, ChannelAddMembersFormHeader } = useComponentsContext();
+
+  if (!channel?.cid) {
+    return null;
+  }
+
+  return (
+    <ChannelAddMembersProvider searchSource={searchSource}>
+      <ChannelAddMembersFormHeader onClose={onClose} />
+      <ChannelAddMembersFormContent />
+      <NotificationList />
+    </ChannelAddMembersProvider>
+  );
+};

package/src/components/ChannelDetails/components/members/{ChannelAddMembers.tsx → ChannelAddMembersFormContent.tsx}

@@ -17,7 +17,7 @@ import { useNotificationApi } from '../../../Notifications/hooks/useNotification
 import { EmptySearchResult } from '../../../UIComponents/EmptySearchResult';
 import { SearchInput } from '../../../UIComponents/SearchInput';
 
-export type ChannelAddMembersProps = {
+export type ChannelAddMembersFormContentProps = {
   /**
    * Besides the existing default behavior of the user list, you can attach
    * additional props to the underlying React Native FlatList.
@@ -38,10 +38,9 @@ const listStateSelector = (state: SearchSourceState<UserResponse>) => {
   };
 };
 
-/**
- * @experimental This component is experimental and is subject to change.
- */
-export const ChannelAddMembers = ({ additionalFlatListProps }: ChannelAddMembersProps) => {
+export const ChannelAddMembersFormContent = ({
+  additionalFlatListProps,
+}: ChannelAddMembersFormContentProps) => {
   const { t } = useTranslationContext();
   const styles = useStyles();
   const {

package/src/components/ChannelDetails/components/members/ChannelAddMembersFormHeader.tsx

@@ -0,0 +1,75 @@
+import React, { useCallback, useState } from 'react';
+
+import { ActivityIndicator } from 'react-native';
+
+import { useChannelAddMembersContext } from '../../../../contexts/channelAddMembersContext/ChannelAddMembersContext';
+import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
+import { useStableCallback } from '../../../../hooks/useStableCallback';
+import { Checkmark } from '../../../../icons/checkmark-1';
+import { useIsSelectionEmpty } from '../../../../state-store/selection-store';
+import { Button } from '../../../ui/Button/Button';
+import { ModalHeader } from '../modal/ModalHeader';
+
+const loadingIconStyle = { margin: 0 };
+const LoadingButtonIcon = ({ height, width }: { height?: number; width?: number }) => (
+  <ActivityIndicator style={{ ...loadingIconStyle, ...{ height, width } }} />
+);
+
+export type ChannelAddMembersFormHeaderProps = {
+  /** Called when the form is dismissed via the close button or after members are added. */
+  onClose: () => void;
+};
+
+export const ChannelAddMembersFormHeader = ({ onClose }: ChannelAddMembersFormHeaderProps) => {
+  const { selectionStore, submit } = useChannelAddMembersContext();
+  const { t } = useTranslationContext();
+  const {
+    theme: {
+      channelDetails: {
+        memberSection: { confirmButton: confirmButtonOverride },
+      },
+    },
+  } = useTheme();
+  const isSelectionEmpty = useIsSelectionEmpty(selectionStore);
+  const [addingMembers, setAddingMembers] = useState(false);
+  const confirmEnabled = !isSelectionEmpty && !addingMembers;
+
+  const handleClose = useCallback(() => {
+    onClose();
+  }, [onClose]);
+
+  const handleConfirm = useStableCallback(async () => {
+    setAddingMembers(true);
+    try {
+      await submit();
+      onClose();
+    } catch {
+      // failure notification already surfaced by the channel action
+    } finally {
+      setAddingMembers(false);
+    }
+  });
+
+  return (
+    <ModalHeader
+      onClose={handleClose}
+      rightAction={
+        <Button
+          accessibilityLabel={t('a11y/Confirm add members')}
+          accessibilityRole='button'
+          accessibilityState={{ busy: addingMembers, disabled: !confirmEnabled }}
+          disabled={!confirmEnabled}
+          variant='primary'
+          onPress={handleConfirm}
+          type='solid'
+          LeadingIcon={addingMembers ? LoadingButtonIcon : Checkmark}
+          iconOnly
+          testID='channel-details-add-members-confirm-button'
+          style={confirmButtonOverride}
+        />
+      }
+      title={t('Add Members')}
+    />
+  );
+};

package/src/components/ChannelDetails/components/members/ChannelMemberActionsSheet.tsx

@@ -8,6 +8,7 @@ import { useComponentsContext } from '../../../../contexts/componentsContext/Com
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import {
   ChannelMemberActionItem,
+  GetChannelMemberActionItems,
   useChannelMemberActionItems,
 } from '../../../../hooks/actions/useChannelMemberActionItems';
 import { BottomSheetModal } from '../../../UIComponents/BottomSheetModal';
@@ -17,15 +18,24 @@ export type ChannelMemberActionsSheetProps = {
   member: ChannelMemberResponse;
   onClose: () => void;
   visible: boolean;
+  /**
+   * Customize the list of action items rendered in the per-member actions bottom sheet.
+   *
+   * Receives the default items the SDK produces for the tapped member (e.g. `muteUser`,
+   * `block`) and returns the final list to render. Use this to filter, reorder, replace,
+   * or add items — for example, to inject a "Send Direct Message" action in your app.
+   */
+  getChannelMemberActionItems?: GetChannelMemberActionItems;
 };
 
 const keyExtractor = (item: ChannelMemberActionItem) => item.id;
 
 const ChannelMemberActionsSheetInner = ({
+  getChannelMemberActionItems,
   member,
   onClose,
 }: Omit<ChannelMemberActionsSheetProps, 'visible'>) => {
-  const { channel, getChannelMemberActionItems } = useChannelDetailsContext();
+  const { channel } = useChannelDetailsContext();
   const { ChannelDetailsActionItem, ChannelMemberItem } = useComponentsContext();
   const {
     theme: {
@@ -79,16 +89,18 @@ const ChannelMemberActionsSheetInner = ({
   );
 };
 
-/**
- * @experimental This component is experimental and is subject to change.
- */
 export const ChannelMemberActionsSheet = ({
+  getChannelMemberActionItems,
   member,
   onClose,
   visible,
 }: ChannelMemberActionsSheetProps) => (
   <BottomSheetModal enableDynamicSizing onClose={onClose} visible={visible}>
-    <ChannelMemberActionsSheetInner member={member} onClose={onClose} />
+    <ChannelMemberActionsSheetInner
+      getChannelMemberActionItems={getChannelMemberActionItems}
+      member={member}
+      onClose={onClose}
+    />
   </BottomSheetModal>
 );
 

package/src/components/ChannelDetails/components/members/ChannelMemberItem.tsx

@@ -5,19 +5,26 @@ import type { ChannelMemberResponse } from 'stream-chat';
 
 import { composeAccessibilityLabel } from '../../../../a11y/a11yUtils';
 import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 import { Mute } from '../../../../icons';
 import { primitives } from '../../../../theme';
 import { useUserMuteActive } from '../../../Message/hooks/useUserMuteActive';
 import { UserAvatar } from '../../../ui/Avatar/UserAvatar';
-import { useMemberRoleLabel } from '../../hooks/members/useMemberRoleLabel';
+import { GetMemberRoles, useMemberRoles } from '../../hooks/members/useMemberRoles';
 import { useUserActivityStatus } from '../../hooks/useUserActivityStatus';
 
 export type ChannelMemberItemSize = 'sm' | 'lg';
 
 export type ChannelMemberItemProps = {
   member: ChannelMemberResponse;
+  /**
+   * Override the roles shown next to the member. Receives `{ channel, defaultRoleLabels, member, t }`
+   * and returns an array of `{ key, label }` (or an empty array to render none). Defaults to the
+   * built-in Owner / Admin / Moderator logic, returning every role that applies.
+   */
+  getMemberRoles?: GetMemberRoles;
   onPress?: (member: ChannelMemberResponse) => void;
   /**
    * Visual size of the row.
@@ -29,10 +36,8 @@ export type ChannelMemberItemProps = {
   testID?: string;
 };
 
-/**
- * @experimental This component is experimental and is subject to change.
- */
 export const ChannelMemberItem = ({
+  getMemberRoles,
   member,
   onPress,
   size = 'sm',
@@ -40,22 +45,18 @@ export const ChannelMemberItem = ({
 }: ChannelMemberItemProps) => {
   const { t } = useTranslationContext();
   const { client } = useChatContext();
+  const { RoleList } = useComponentsContext();
   const {
     theme: {
       channelDetails: {
-        memberItem: {
-          container: containerOverride,
-          name: nameOverride,
-          role: roleOverride,
-          status: statusOverride,
-        },
+        memberItem: { container: containerOverride, name: nameOverride, status: statusOverride },
       },
       semantics,
     },
   } = useTheme();
   const styles = useStyles();
   const statusLine = useUserActivityStatus(member.user);
-  const roleLabel = useMemberRoleLabel(member);
+  const roles = useMemberRoles(member, getMemberRoles);
   const isMuted = useUserMuteActive(member.user);
 
   const user = member.user;
@@ -66,7 +67,7 @@ export const ChannelMemberItem = ({
   const displayName = isCurrentUser ? t('You') : (user.name ?? user.id);
   const accessibilityLabel = composeAccessibilityLabel(
     displayName,
-    roleLabel,
+    roles.map((role) => role.label).join(', ') || undefined,
     isMuted ? t('Muted') : undefined,
     statusLine,
   );
@@ -98,7 +99,7 @@ export const ChannelMemberItem = ({
           </Text>
         ) : null}
       </View>
-      {isMuted || roleLabel ? (
+      {isMuted || roles.length > 0 ? (
         <View style={styles.trailing}>
           {isMuted ? (
             <Mute
@@ -108,14 +109,7 @@ export const ChannelMemberItem = ({
               width={16}
             />
           ) : null}
-          {roleLabel ? (
-            <Text
-              numberOfLines={1}
-              style={[styles.role, { color: semantics.textTertiary }, roleOverride]}
-            >
-              {roleLabel}
-            </Text>
-          ) : null}
+          <RoleList roles={roles} />
         </View>
       ) : null}
     </>
@@ -171,7 +165,7 @@ const useStyles = () => {
           flexDirection: 'row',
           gap: primitives.spacingSm,
           minHeight: 48,
-          paddingHorizontal: primitives.spacingMd,
+          paddingHorizontal: primitives.spacingSm,
           paddingVertical: primitives.spacingXs,
         },
         containerLarge: {
@@ -193,13 +187,6 @@ const useStyles = () => {
           lineHeight: primitives.typographyLineHeightNormal,
           writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
         },
-        role: {
-          flexShrink: 0,
-          fontSize: primitives.typographyFontSizeSm,
-          fontWeight: primitives.typographyFontWeightRegular,
-          lineHeight: primitives.typographyLineHeightNormal,
-          writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
-        },
         status: {
           fontSize: primitives.typographyFontSizeXs,
           fontWeight: primitives.typographyFontWeightRegular,