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

package/src/components/ChannelDetails/__tests__/members/useMemberRoles.test.tsx

@@ -0,0 +1,122 @@
+import React from 'react';
+
+import { renderHook } from '@testing-library/react-native';
+import type { Channel, ChannelMemberResponse } from 'stream-chat';
+
+import { ChannelDetailsContextProvider } from '../../../../contexts/channelDetailsContext/channelDetailsContext';
+import { TranslationProvider } from '../../../../contexts/translationContext/TranslationContext';
+import { generateMember } from '../../../../mock-builders/generator/member';
+import { generateUser } from '../../../../mock-builders/generator/user';
+import { type GetMemberRoles, useMemberRoles } from '../../hooks/members/useMemberRoles';
+
+const buildChannel = (createdById = 'creator'): Channel =>
+  ({
+    cid: 'messaging:test',
+    data: { created_by: { id: createdById } },
+    on: () => ({ unsubscribe: () => undefined }),
+  }) as unknown as Channel;
+
+const buildMember = (
+  overrides: {
+    user?: Partial<NonNullable<ChannelMemberResponse['user']>>;
+    channel_role?: ChannelMemberResponse['channel_role'];
+  } = {},
+): ChannelMemberResponse =>
+  generateMember({
+    channel_role: overrides.channel_role,
+    user: generateUser({ id: 'alice', name: 'Alice', ...(overrides.user ?? {}) }),
+  });
+
+const t = ((key: string) => key) as never;
+
+const renderRoles = (
+  member: ChannelMemberResponse,
+  {
+    channel = buildChannel(),
+    getMemberRoles,
+  }: { channel?: Channel; getMemberRoles?: GetMemberRoles } = {},
+) =>
+  renderHook(() => useMemberRoles(member, getMemberRoles), {
+    wrapper: ({ children }) => (
+      <TranslationProvider
+        value={{ t, tDateTimeParser: ((input: unknown) => input) as never, userLanguage: 'en' }}
+      >
+        <ChannelDetailsContextProvider channel={channel}>{children}</ChannelDetailsContextProvider>
+      </TranslationProvider>
+    ),
+  });
+
+describe('useMemberRoles', () => {
+  describe('default rules', () => {
+    it('returns the owner role when the member is the channel creator', () => {
+      const { result } = renderRoles(buildMember(), { channel: buildChannel('alice') });
+      expect(result.current).toEqual([{ key: 'owner', label: 'Owner' }]);
+    });
+
+    it('returns the admin role when the member has the admin user role', () => {
+      const { result } = renderRoles(buildMember({ user: { role: 'admin' } }));
+      expect(result.current).toEqual([{ key: 'admin', label: 'Admin' }]);
+    });
+
+    it('returns the moderator role when the member has the channel_moderator channel_role', () => {
+      const { result } = renderRoles(buildMember({ channel_role: 'channel_moderator' }));
+      expect(result.current).toEqual([{ key: 'moderator', label: 'Moderator' }]);
+    });
+
+    it('returns an empty array for a plain member', () => {
+      const { result } = renderRoles(buildMember());
+      expect(result.current).toEqual([]);
+    });
+
+    it('returns all applicable roles in Owner > Admin > Moderator order', () => {
+      const { result } = renderRoles(
+        buildMember({ channel_role: 'channel_moderator', user: { role: 'admin' } }),
+        { channel: buildChannel('alice') },
+      );
+      expect(result.current).toEqual([
+        { key: 'owner', label: 'Owner' },
+        { key: 'admin', label: 'Admin' },
+        { key: 'moderator', label: 'Moderator' },
+      ]);
+    });
+
+    it('does not match owner when the member has no user id', () => {
+      const member = generateMember({ user: undefined, user_id: 'orphan' });
+      const { result } = renderRoles(member, { channel: buildChannel('orphan') });
+      expect(result.current).toEqual([]);
+    });
+  });
+
+  describe('custom getMemberRoles', () => {
+    it('uses the return value of the custom function', () => {
+      const { result } = renderRoles(buildMember({ user: { role: 'admin' } }), {
+        channel: buildChannel('alice'),
+        getMemberRoles: () => [{ key: 'vip', label: 'VIP' }],
+      });
+      expect(result.current).toEqual([{ key: 'vip', label: 'VIP' }]);
+    });
+
+    it('returns an empty array when the custom function returns an empty array', () => {
+      const { result } = renderRoles(buildMember({ user: { role: 'admin' } }), {
+        getMemberRoles: () => [],
+      });
+      expect(result.current).toEqual([]);
+    });
+
+    it('passes channel, defaultRoleLabels, member, and t to the custom function', () => {
+      const channel = buildChannel('alice');
+      const member = buildMember({ user: { role: 'admin' } });
+      const getMemberRoles = jest.fn(() => []);
+      renderRoles(member, { channel, getMemberRoles });
+      expect(getMemberRoles).toHaveBeenCalledWith({
+        channel,
+        defaultRoleLabels: [
+          { key: 'owner', label: 'Owner' },
+          { key: 'admin', label: 'Admin' },
+        ],
+        member,
+        t: expect.any(Function),
+      });
+    });
+  });
+});

package/src/components/ChannelDetails/__tests__/useChannelDetailsActionItems.test.tsx

@@ -7,6 +7,7 @@ import type {
   GetChannelActionItems,
 } from '../../../hooks/actions/useChannelActionItems';
 import * as useChannelActionItemsModule from '../../../hooks/actions/useChannelActionItems';
+import { SignalStore } from '../../../state-store/signal-store';
 import { useChannelDetailsActionItems } from '../hooks/useChannelDetailsActionItems';
 
 const NoopIcon = () => null;
@@ -28,7 +29,8 @@ const mockContext = (
 ) => {
   const value: channelDetailsContextModule.ChannelDetailsContextValue = {
     channel,
-    onChannelDismiss: jest.fn(),
+    closeModals: jest.fn(),
+    signalStore: new SignalStore(),
     ...overrides,
   };
   jest.spyOn(channelDetailsContextModule, 'useChannelDetailsContext').mockReturnValue(value);
@@ -58,12 +60,12 @@ describe('useChannelDetailsActionItems', () => {
     });
   });
 
-  it('forwards the getChannelActionItems prop from context unchanged', () => {
+  it('forwards the getChannelActionItems argument unchanged', () => {
     const getChannelActionItems: GetChannelActionItems = ({ defaultItems }) => defaultItems;
-    mockContext({ getChannelActionItems });
+    mockContext();
     const spy = mockUseChannelActionItems([]);
 
-    renderHook(() => useChannelDetailsActionItems());
+    renderHook(() => useChannelDetailsActionItems({ getChannelActionItems }));
 
     expect(spy).toHaveBeenCalledWith({ channel, getChannelActionItems, surface: 'details' });
   });
@@ -88,7 +90,8 @@ describe('useChannelDetailsActionItems', () => {
   ])(
     'wraps the $id action to call onChannelDismiss after the original action resolves',
     async ({ id, label }) => {
-      const { onChannelDismiss } = mockContext();
+      mockContext();
+      const onChannelDismiss = jest.fn();
 
       const callOrder: string[] = [];
       let resolveAction: (() => void) | undefined;
@@ -110,7 +113,7 @@ describe('useChannelDetailsActionItems', () => {
       const item = buildItem({ action: originalAction, id, label, type: 'destructive' });
       mockUseChannelActionItems([item]);
 
-      const { result } = renderHook(() => useChannelDetailsActionItems());
+      const { result } = renderHook(() => useChannelDetailsActionItems({ onChannelDismiss }));
       const [wrapped] = result.current;
 
       expect(wrapped).not.toBe(item);
@@ -132,11 +135,12 @@ describe('useChannelDetailsActionItems', () => {
   );
 
   it('composes a caller-supplied onSuccess with onChannelDismiss and passes other options through', () => {
-    const { onChannelDismiss } = mockContext();
+    mockContext();
+    const onChannelDismiss = jest.fn();
     const originalLeave = jest.fn();
     mockUseChannelActionItems([buildItem({ action: originalLeave, id: 'leave' })]);
 
-    const { result } = renderHook(() => useChannelDetailsActionItems());
+    const { result } = renderHook(() => useChannelDetailsActionItems({ onChannelDismiss }));
     const callerOnSuccess = jest.fn();
     const callerOnFailure = jest.fn();
     result.current[0].action({
@@ -161,7 +165,7 @@ describe('useChannelDetailsActionItems', () => {
   it.each([{ id: 'leave' }, { id: 'deleteChannel' }])(
     'does not throw when onChannelDismiss is undefined on the $id path',
     async ({ id }) => {
-      mockContext({ onChannelDismiss: undefined });
+      mockContext();
       const originalAction = jest.fn().mockResolvedValue(undefined);
       mockUseChannelActionItems([buildItem({ action: originalAction, id })]);
 

package/src/components/ChannelDetails/__tests__/useEditChannelImage.test.tsx

@@ -4,10 +4,11 @@ import { Alert } from 'react-native';
 import { act, renderHook } from '@testing-library/react-native';
 import type { Channel } from 'stream-chat';
 
-import { ChannelDetailsContextProvider } from '../../../contexts/channelDetailsContext/channelDetailsContext';
+import { ChannelEditDetailsContext } from '../../../contexts/channelEditDetailsContext/ChannelEditDetailsContext';
 import { TranslationProvider } from '../../../contexts/translationContext/TranslationContext';
 import { generateFileReference } from '../../../mock-builders/attachments';
 import { NativeHandlers } from '../../../native';
+import { EditChannelDetailsStore } from '../../../state-store/edit-channel-details-store';
 import { useEditChannelImage } from '../hooks/useEditChannelImage';
 
 jest.spyOn(Alert, 'alert').mockImplementation(() => undefined);
@@ -29,9 +30,15 @@ const wrap = ({ compressImageQuality }: { compressImageQuality?: number }) => {
         userLanguage: 'en',
       }}
     >
-      <ChannelDetailsContextProvider value={{ channel: buildChannel(), compressImageQuality }}>
+      <ChannelEditDetailsContext.Provider
+        value={{
+          compressImageQuality,
+          store: new EditChannelDetailsStore(buildChannel()),
+          submit: jest.fn(),
+        }}
+      >
         {children}
-      </ChannelDetailsContextProvider>
+      </ChannelEditDetailsContext.Provider>
     </TranslationProvider>
   );
   return Wrapper;

package/src/components/ChannelDetails/components/ChannelDetailsActionItem.tsx

@@ -14,9 +14,6 @@ export type ChannelDetailsActionItemProps = {
   trailing?: React.ReactNode;
 };
 
-/**
- * @experimental This component is experimental and is subject to change.
- */
 export const ChannelDetailsActionItem = ({
   Icon,
   destructive = false,

package/src/components/ChannelDetails/components/ChannelDetailsActionsSection.tsx

@@ -4,7 +4,10 @@ import { StyleSheet, Switch, View } from 'react-native';
 import { useChannelDetailsContext } from '../../../contexts/channelDetailsContext/channelDetailsContext';
 import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import { ChannelActionItem } from '../../../hooks/actions/useChannelActionItems';
+import {
+  ChannelActionItem,
+  GetChannelActionItems,
+} from '../../../hooks/actions/useChannelActionItems';
 import { getOtherUserInDirectChannel } from '../../../hooks/actions/useChannelActions';
 import { useIsDirectChat } from '../../../hooks/useIsDirectChat';
 import { primitives } from '../../../theme';
@@ -101,10 +104,26 @@ const UserMuteToggleRow = ({ item }: { item: ChannelActionItem }) => {
   );
 };
 
-/**
- * @experimental This component is experimental and is subject to change.
- */
-export const ChannelDetailsActionsSection = () => {
+export type ChannelDetailsActionsSectionProps = {
+  /**
+   * Customize the list of action items rendered in the channel details actions section.
+   *
+   * Receives the default items the SDK produces for the current channel and returns the
+   * final list to render. Use this to filter, reorder, replace, or add items.
+   *
+   * The SDK still wires `onChannelDismiss` into the resulting `leave`, `deleteChannel`, and
+   * `block` items (matched by `id`) after this callback runs, so those actions continue to
+   * dismiss the screen on success regardless of how the items are customized.
+   */
+  getChannelActionItems?: GetChannelActionItems;
+  /** Fired after the channel is no longer available to the current user (delete, leave, or block actions). */
+  onChannelDismiss?: () => void;
+};
+
+export const ChannelDetailsActionsSection = ({
+  getChannelActionItems,
+  onChannelDismiss,
+}: ChannelDetailsActionsSectionProps) => {
   const {
     theme: {
       channelDetails: { sectionCard: sectionCardOverride },
@@ -114,7 +133,7 @@ export const ChannelDetailsActionsSection = () => {
   const { ChannelDetailsActionItem } = useComponentsContext();
   const styles = useStyles();
 
-  const items = useChannelDetailsActionItems();
+  const items = useChannelDetailsActionItems({ getChannelActionItems, onChannelDismiss });
 
   if (items.length === 0) return null;
 
@@ -173,6 +192,7 @@ const useStyles = () => {
           borderRadius: primitives.radiusLg,
           overflow: 'hidden',
           paddingVertical: primitives.spacingXs,
+          paddingHorizontal: primitives.spacingXxs,
         },
       }),
     [],

package/src/components/ChannelDetails/components/ChannelDetailsEditButton.tsx

@@ -1,35 +1,46 @@
 import React, { useCallback, useState } from 'react';
 
-import { ChannelEditDetailsModal } from './ChannelEditDetailsModal';
+import { ChannelDetailsModal } from './modal/Modal';
 
 import { useChannelDetailsContext } from '../../../contexts/channelDetailsContext/channelDetailsContext';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
-import { useChannelOwnCapabilities } from '../../../hooks/useChannelOwnCapabilities';
-import { useIsDirectChat } from '../../../hooks/useIsDirectChat';
-import { Button } from '../../ui/Button/Button';
-
-/**
- * @experimental This component is experimental and is subject to change.
- */
-export const ChannelDetailsEditButton = () => {
-  const { channel, onEditChannelPress } = useChannelDetailsContext();
+import { useCanEditChannel } from '../../../hooks/useCanEditChannel';
+import { Button, ButtonProps } from '../../ui/Button/Button';
+
+export type ChannelDetailsEditButtonProps = {
+  /** Override the default behavior, which opens the Edit modal. */
+  onPress?: () => void;
+  /** Style forwarded to the underlying Button. */
+  style?: ButtonProps['style'];
+};
+
+export const ChannelDetailsEditButton = ({
+  onPress,
+  style,
+}: ChannelDetailsEditButtonProps = {}) => {
+  const { channel } = useChannelDetailsContext();
+  const { ChannelEditDetailsForm } = useComponentsContext();
   const { t } = useTranslationContext();
-  const ownCapabilities = useChannelOwnCapabilities(channel);
-  const canUpdateChannel = ownCapabilities?.includes('update-channel') ?? false;
-  const isDirect = useIsDirectChat(channel);
+  const isVisible = useCanEditChannel(channel);
   const [editModalVisible, setEditModalVisible] = 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 navigation/modal, so we must not render
+  // the built-in one.
+  const usesDefaultModal = !onPress;
+
   const handleEditPress = useCallback(() => {
-    if (onEditChannelPress) {
-      onEditChannelPress();
+    if (onPress) {
+      onPress();
       return;
     }
     setEditModalVisible(true);
-  }, [onEditChannelPress]);
+  }, [onPress]);
 
   const handleEditModalClose = useCallback(() => setEditModalVisible(false), []);
 
-  if (!canUpdateChannel || isDirect) {
+  if (!isVisible) {
     return null;
   }
 
@@ -40,11 +51,16 @@ export const ChannelDetailsEditButton = () => {
         label={t('Edit')}
         onPress={handleEditPress}
         size='sm'
+        style={style}
         testID='channel-details-edit-button'
         type='outline'
         variant='secondary'
       />
-      <ChannelEditDetailsModal onClose={handleEditModalClose} visible={editModalVisible} />
+      {usesDefaultModal ? (
+        <ChannelDetailsModal onClose={handleEditModalClose} visible={editModalVisible}>
+          <ChannelEditDetailsForm onClose={handleEditModalClose} />
+        </ChannelDetailsModal>
+      ) : null}
     </>
   );
 };

package/src/components/ChannelDetails/components/ChannelDetailsMemberSection.tsx

@@ -3,27 +3,28 @@ import { I18nManager, Pressable, StyleSheet, Text, View } from 'react-native';
 
 import type { ChannelMemberResponse } from 'stream-chat';
 
-import { ChannelAddMembersModal } from './members/ChannelAddMembersModal';
-import { ChannelAllMembersModal } from './members/ChannelAllMembersModal';
+import { ChannelDetailsModal } from './modal/Modal';
+import { ModalHeader } from './modal/ModalHeader';
 
 import { useChannelDetailsContext } from '../../../contexts/channelDetailsContext/channelDetailsContext';
 import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
-import { useChannelOwnCapabilities } from '../../../hooks/useChannelOwnCapabilities';
 import { primitives } from '../../../theme';
-import { Button } from '../../ui/Button/Button';
 import { useChannelDetailsMembersPreview } from '../hooks/useChannelDetailsMembersPreview';
 
-/**
- * @experimental This component is experimental and is subject to change.
- */
-export const ChannelDetailsMemberSection = () => {
-  const { channel, onAddMembersPress, onMemberPress, onViewAllMembersPress } =
-    useChannelDetailsContext();
+export type ChannelDetailsMemberSectionProps = {
+  /**
+   * Fired when the user taps the "view all members" button. By default it opens the members bottom sheet.
+   */
+  onViewAllMembersPress?: () => void;
+};
+
+export const ChannelDetailsMemberSection = ({
+  onViewAllMembersPress,
+}: ChannelDetailsMemberSectionProps) => {
+  const { channel } = useChannelDetailsContext();
   const { t } = useTranslationContext();
-  const ownCapabilities = useChannelOwnCapabilities(channel);
-  const updateChannelMembers = ownCapabilities?.includes('update-channel-members') ?? false;
   const {
     theme: {
       channelDetails: {
@@ -32,17 +33,22 @@ export const ChannelDetailsMemberSection = () => {
           header: headerOverride,
           headerTitle: headerTitleOverride,
           viewAllLabel: viewAllLabelOverride,
+          addButtonWrapper: addButtonWrapperOverride,
         },
         sectionCard: sectionCardOverride,
       },
       semantics,
     },
   } = useTheme();
-  const { ChannelMemberActionsSheet, ChannelMemberItem } = useComponentsContext();
+  const {
+    ChannelAddMembersButton,
+    ChannelMemberActionsSheet,
+    ChannelMemberItem,
+    ChannelMemberList,
+  } = useComponentsContext();
   const { hasMore, total, visible } = useChannelDetailsMembersPreview(channel);
   const styles = useStyles();
   const [isMemberListVisible, setMemberListVisible] = useState(false);
-  const [isAddMembersVisible, setAddMembersVisible] = useState(false);
   const [selectedMember, setSelectedMember] = useState<ChannelMemberResponse | null>(null);
 
   const handleViewAllPress = useCallback(() => {
@@ -55,28 +61,11 @@ export const ChannelDetailsMemberSection = () => {
 
   const handleMemberListClose = useCallback(() => setMemberListVisible(false), []);
 
-  const handleAddMembersClose = useCallback(() => setAddMembersVisible(false), []);
-
-  const handleAddMembersPress = useCallback(() => {
-    if (onAddMembersPress) {
-      onAddMembersPress();
-      return;
-    }
-    setMemberListVisible(false);
-    setAddMembersVisible(true);
-  }, [onAddMembersPress]);
-
   const handleMemberActionsClose = useCallback(() => setSelectedMember(null), []);
 
   const handleMemberPress = useCallback(
-    (member: ChannelMemberResponse) => {
-      if (onMemberPress) {
-        onMemberPress(member);
-        return;
-      }
-      setSelectedMember(member);
-    },
-    [onMemberPress],
+    (member: ChannelMemberResponse) => setSelectedMember(member),
+    [],
   );
 
   return (
@@ -94,20 +83,13 @@ export const ChannelDetailsMemberSection = () => {
         >
           {t('{{count}} members', { count: total })}
         </Text>
-        {updateChannelMembers ? (
-          <View style={styles.headerAddButton}>
-            <Button
-              accessibilityLabelKey='a11y/Add members'
-              label={t('Add')}
-              onPress={handleAddMembersPress}
-              size='sm'
-              style={styles.headerAddButtonInner}
-              testID='channel-details-member-section-add-button'
-              type='outline'
-              variant='secondary'
-            />
-          </View>
-        ) : null}
+        <View style={[styles.addButtonWrapper, addButtonWrapperOverride]}>
+          <ChannelAddMembersButton
+            style={{ flexShrink: 0, width: 'auto' }}
+            testID='channel-details-member-section-add-button'
+            variant='text'
+          />
+        </View>
       </View>
       <View style={styles.list}>
         {visible.map((member) => {
@@ -133,12 +115,21 @@ export const ChannelDetailsMemberSection = () => {
           </View>
         </Pressable>
       ) : null}
-      <ChannelAllMembersModal
-        onAddMembersPress={handleAddMembersPress}
-        onClose={handleMemberListClose}
-        visible={isMemberListVisible}
-      />
-      <ChannelAddMembersModal onClose={handleAddMembersClose} visible={isAddMembersVisible} />
+      {onViewAllMembersPress ? null : (
+        <ChannelDetailsModal onClose={handleMemberListClose} visible={isMemberListVisible}>
+          <ModalHeader
+            onClose={handleMemberListClose}
+            rightAction={
+              <ChannelAddMembersButton
+                testID='channel-details-member-list-add-button'
+                variant='icon'
+              />
+            }
+            title={t('{{count}} members', { count: total })}
+          />
+          <ChannelMemberList />
+        </ChannelDetailsModal>
+      )}
       {selectedMember ? (
         <ChannelMemberActionsSheet
           member={selectedMember}
@@ -167,12 +158,6 @@ const useStyles = () =>
           paddingHorizontal: primitives.spacingMd,
           paddingTop: primitives.spacingXs,
         },
-        headerAddButton: {
-          flexShrink: 0,
-        },
-        headerAddButtonInner: {
-          width: 'auto',
-        },
         headerTitle: {
           flexShrink: 1,
           fontSize: primitives.typographyFontSizeMd,
@@ -182,6 +167,7 @@ const useStyles = () =>
         },
         list: {
           paddingBottom: primitives.spacingSm,
+          paddingHorizontal: primitives.spacingXxs,
         },
         sectionCard: {
           borderRadius: primitives.radiusLg,
@@ -198,6 +184,12 @@ const useStyles = () =>
           fontWeight: primitives.typographyFontWeightSemiBold,
           lineHeight: primitives.typographyLineHeightNormal,
         },
+        addButtonWrapper: {
+          height: 48,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        },
       }),
     [],
   );

package/src/components/ChannelDetails/components/ChannelDetailsNavHeader.tsx

@@ -14,15 +14,18 @@ import { Button } from '../../ui/Button/Button';
 export type ChannelDetailsNavHeaderProps = {
   /** Content rendered on the trailing side of the header (e.g. the edit button). */
   action?: React.ReactNode;
+  /** Fired when the back button is pressed. The back button only renders when provided. */
+  onBack?: () => void;
   /** Override the auto-resolved screen title (1:1 → "Contact Info", group → "Group Info"). */
   title?: string;
 };
 
-/**
- * @experimental This component is experimental and is subject to change.
- */
-export const ChannelDetailsNavHeader = ({ action, title }: ChannelDetailsNavHeaderProps) => {
-  const { channel, onBack } = useChannelDetailsContext();
+export const ChannelDetailsNavHeader = ({
+  action,
+  onBack,
+  title,
+}: ChannelDetailsNavHeaderProps) => {
+  const { channel } = useChannelDetailsContext();
   const { t } = useTranslationContext();
   const {
     theme: {

package/src/components/ChannelDetails/components/ChannelDetailsNavigationSection.tsx

@@ -14,13 +14,25 @@ import { primitives } from '../../../theme';
 import { ImageGallery } from '../../ImageGallery/ImageGallery';
 import {
   type ChannelDetailsNavigationSectionType,
+  type GetChannelDetailsNavigationItems,
   useChannelDetailsNavigationItems,
 } from '../hooks/useChannelDetailsNavigationItems';
 
-/**
- * @experimental This component is experimental and is subject to change.
- */
-export const ChannelDetailsNavigationSection = () => {
+export type ChannelDetailsNavigationSectionProps = {
+  /**
+   * Customize the navigation rows rendered in the channel details navigation section.
+   *
+   * Receives the built-in `defaultItems` (and a `context`) and returns the rows to render.
+   * Map over `defaultItems` to override a row's `onPress` (e.g. to push your own screen) or
+   * to add/remove rows. Any row whose `onPress` you leave untouched keeps its built-in
+   * behavior (opening the built-in modal), including sections added in future SDK versions.
+   */
+  getNavigationItems?: GetChannelDetailsNavigationItems;
+};
+
+export const ChannelDetailsNavigationSection = ({
+  getNavigationItems,
+}: ChannelDetailsNavigationSectionProps) => {
   const {
     theme: {
       channelDetails: { sectionCard: sectionCardOverride },
@@ -29,7 +41,7 @@ export const ChannelDetailsNavigationSection = () => {
   } = useTheme();
   const styles = useStyles();
   const { FileAttachmentList, MediaList, PinnedMessageList } = useComponentsContext();
-  const items = useChannelDetailsNavigationItems();
+  const items = useChannelDetailsNavigationItems({ getNavigationItems });
   const [activeSection, setActiveSection] = useState<ChannelDetailsNavigationSectionType | null>(
     null,
   );
@@ -119,6 +131,7 @@ const useStyles = () => {
           borderRadius: primitives.radiusLg,
           overflow: 'hidden',
           paddingVertical: primitives.spacingXs,
+          paddingHorizontal: primitives.spacingXxs,
         },
       }),
     [],

package/src/components/ChannelDetails/components/ChannelDetailsProfile.tsx

@@ -12,9 +12,6 @@ import { useChannelPreviewDisplayName } from '../../ChannelPreview/hooks/useChan
 import { ChannelAvatar } from '../../ui/Avatar/ChannelAvatar';
 import { useChannelDetailsMemberStatusText } from '../hooks/useChannelDetailsMemberStatusText';
 
-/**
- * @experimental This component is experimental and is subject to change.
- */
 export const ChannelDetailsProfile = () => {
   const { channel } = useChannelDetailsContext();
   const { t } = useTranslationContext();