chore: add experimental warning to channel details components

szuperaz · szuperaz · commit 1f9d1a0f0c78 · 2026-06-03T14:43:06.000-05:00
diff --git a/package/src/components/ChannelDetailsScreen/ChannelDetailsScreen.tsx b/package/src/components/ChannelDetailsScreen/ChannelDetailsScreen.tsx
@@ -139,6 +139,9 @@ export const ChannelDetailsScreenContent = () => {
   );
 };
 
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
 export const ChannelDetailsScreen = ({
   channel,
   compressImageQuality,
diff --git a/package/src/components/ChannelDetailsScreen/components/ChannelDetailsActionItem.tsx b/package/src/components/ChannelDetailsScreen/components/ChannelDetailsActionItem.tsx
@@ -14,6 +14,9 @@ export type ChannelDetailsActionItemProps = {
   trailing?: React.ReactNode;
 };
 
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
 export const ChannelDetailsActionItem = ({
   Icon,
   destructive = false,
diff --git a/package/src/components/ChannelDetailsScreen/components/ChannelDetailsActionsSection.tsx b/package/src/components/ChannelDetailsScreen/components/ChannelDetailsActionsSection.tsx
@@ -101,6 +101,9 @@ const UserMuteToggleRow = ({ item }: { item: ChannelActionItem }) => {
   );
 };
 
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
 export const ChannelDetailsActionsSection = () => {
   const {
     theme: {
diff --git a/package/src/components/ChannelDetailsScreen/components/ChannelDetailsMemberSection.tsx b/package/src/components/ChannelDetailsScreen/components/ChannelDetailsMemberSection.tsx
@@ -15,6 +15,9 @@ 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();
diff --git a/package/src/components/ChannelDetailsScreen/components/ChannelDetailsNavigationSection.tsx b/package/src/components/ChannelDetailsScreen/components/ChannelDetailsNavigationSection.tsx
@@ -11,6 +11,9 @@ import { ImageGrid } from '../../../icons/gallery';
 import { Pin } from '../../../icons/pin';
 import { primitives } from '../../../theme';
 
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
 export const ChannelDetailsNavigationSection = () => {
   const { t } = useTranslationContext();
   const {
diff --git a/package/src/components/ChannelDetailsScreen/components/ChannelDetailsProfile.tsx b/package/src/components/ChannelDetailsScreen/components/ChannelDetailsProfile.tsx
@@ -14,6 +14,9 @@ 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();
diff --git a/package/src/components/ChannelDetailsScreen/components/ChannelDetailsScreenHeader.tsx b/package/src/components/ChannelDetailsScreen/components/ChannelDetailsScreenHeader.tsx
@@ -19,6 +19,9 @@ export type ChannelDetailsScreenHeaderProps = {
   title?: string;
 };
 
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
 export const ChannelDetailsScreenHeader = ({ title }: ChannelDetailsScreenHeaderProps) => {
   const { channel, onBack, onEditChannelPress } = useChannelDetailsContext();
   const { t } = useTranslationContext();
diff --git a/package/src/components/ChannelDetailsScreen/components/ChannelEditDetails.tsx b/package/src/components/ChannelDetailsScreen/components/ChannelEditDetails.tsx
@@ -33,6 +33,9 @@ export type ChannelEditDetailsProps = {
   onNameChange: (name: string) => void;
 };
 
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
 export const ChannelEditDetails = ({
   onImagePicked,
   onImageReset,
diff --git a/package/src/components/ChannelDetailsScreen/components/ChannelEditDetailsModal.tsx b/package/src/components/ChannelDetailsScreen/components/ChannelEditDetailsModal.tsx
@@ -124,6 +124,9 @@ const ChannelEditDetailsModalContent = ({ onClose }: ChannelEditDetailsModalCont
   );
 };
 
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
 export const ChannelEditDetailsModal = ({ onClose, visible }: ChannelEditDetailsModalProps) => {
   const { channel } = useChannelDetailsContext();
   const notificationHostId = channel?.cid ? `channel-edit-details:${channel.cid}` : undefined;
diff --git a/package/src/components/ChannelDetailsScreen/components/ChannelEditImageSheet.tsx b/package/src/components/ChannelDetailsScreen/components/ChannelEditImageSheet.tsx
@@ -164,6 +164,9 @@ const ChannelEditImageSheetInner = ({
   );
 };
 
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
 export const ChannelEditImageSheet = ({
   onClose,
   onSelectCamera,
diff --git a/package/src/components/ChannelDetailsScreen/components/ChannelEditName.tsx b/package/src/components/ChannelDetailsScreen/components/ChannelEditName.tsx
@@ -15,6 +15,9 @@ export type ChannelEditNameProps = {
   onNameChange: (name: string) => void;
 };
 
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
 export const ChannelEditName = ({ onNameChange }: ChannelEditNameProps) => {
   const { channel } = useChannelDetailsContext();
   const { t } = useTranslationContext();
diff --git a/package/src/components/ChannelDetailsScreen/components/members/AddMemberSearchResultItem.tsx b/package/src/components/ChannelDetailsScreen/components/members/AddMemberSearchResultItem.tsx
@@ -97,6 +97,9 @@ const AddMemberSearchResultItemInner = ({
   );
 };
 
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
 export const AddMemberSearchResultItem = React.memo(AddMemberSearchResultItemInner);
 
 AddMemberSearchResultItem.displayName = 'AddMemberSearchResultItem';
diff --git a/package/src/components/ChannelDetailsScreen/components/members/ChannelAddMembers.tsx b/package/src/components/ChannelDetailsScreen/components/members/ChannelAddMembers.tsx
@@ -36,6 +36,9 @@ export type ChannelAddMembersProps = {
 
 const keyExtractor = (user: AddMemberSearchResult) => user.id;
 
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
 export const ChannelAddMembers = ({
   additionalFlatListProps,
   onSelectionChange,
diff --git a/package/src/components/ChannelDetailsScreen/components/members/ChannelAddMembersModal.tsx b/package/src/components/ChannelDetailsScreen/components/members/ChannelAddMembersModal.tsx
@@ -100,6 +100,9 @@ const ChannelAddMembersModalContent = ({ onClose }: ChannelAddMembersModalConten
   );
 };
 
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
 export const ChannelAddMembersModal = ({ onClose, visible }: ChannelAddMembersModalProps) => {
   const { channel } = useChannelDetailsContext();
   const notificationHostId = channel?.cid ? `channel-add-members:${channel.cid}` : undefined;
diff --git a/package/src/components/ChannelDetailsScreen/components/members/ChannelAllMembersModal.tsx b/package/src/components/ChannelDetailsScreen/components/members/ChannelAllMembersModal.tsx
@@ -16,6 +16,9 @@ export type ChannelAllMembersModalProps = {
   visible: boolean;
 };
 
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
 export const ChannelAllMembersModal = ({
   onAddMembersPress,
   onClose,
diff --git a/package/src/components/ChannelDetailsScreen/components/members/ChannelMemberActionsSheet.tsx b/package/src/components/ChannelDetailsScreen/components/members/ChannelMemberActionsSheet.tsx
@@ -80,6 +80,9 @@ const ChannelMemberActionsSheetInner = ({
   );
 };
 
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
 export const ChannelMemberActionsSheet = ({
   member,
   onClose,
diff --git a/package/src/components/ChannelDetailsScreen/components/members/ChannelMemberItem.tsx b/package/src/components/ChannelDetailsScreen/components/members/ChannelMemberItem.tsx
@@ -169,6 +169,9 @@ const areEqual = (prev: ChannelMemberItemProps, next: ChannelMemberItemProps) =>
   );
 };
 
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
 export const ChannelMemberItem = React.memo(ChannelMemberItemInner, areEqual);
 
 const useStyles = () => {
diff --git a/package/src/components/ChannelDetailsScreen/components/members/ChannelMemberList.tsx b/package/src/components/ChannelDetailsScreen/components/members/ChannelMemberList.tsx
@@ -23,6 +23,7 @@ export type ChannelMemberListProps = {
 
 /**
  * Lists all channel members.
+ * @experimental This component is experimental and is subject to change.
  */
 export const ChannelMemberList = ({ additionalFlatListProps }: ChannelMemberListProps = {}) => {
   const { channel, onMemberPress } = useChannelDetailsContext();
diff --git a/package/src/components/ChannelDetailsScreen/components/members/MemberListLoadingSkeleton.tsx b/package/src/components/ChannelDetailsScreen/components/members/MemberListLoadingSkeleton.tsx
@@ -43,6 +43,9 @@ const MemberListSkeletonRow = () => {
   );
 };
 
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
 export const MemberListLoadingSkeleton = () => (
   <View testID='member-list-loading-skeleton'>
     {Array.from({ length: ROW_COUNT }).map((_, index) => (
diff --git a/package/src/components/ChannelDetailsScreen/components/members/UserListLoadingSkeleton.tsx b/package/src/components/ChannelDetailsScreen/components/members/UserListLoadingSkeleton.tsx
@@ -43,6 +43,9 @@ const UserListSkeletonRow = () => {
   );
 };
 
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
 export const UserListLoadingSkeleton = () => (
   <View testID='user-list-loading-skeleton'>
     {Array.from({ length: ROW_COUNT }).map((_, index) => (
diff --git a/package/src/components/ChannelDetailsScreen/components/modal/Modal.tsx b/package/src/components/ChannelDetailsScreen/components/modal/Modal.tsx
@@ -11,6 +11,9 @@ type ChannelDetailsModalProps = {
   visible: boolean;
 };
 
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
 export const ChannelDetailsModal = ({ children, onClose, visible }: ChannelDetailsModalProps) => {
   const {
     theme: {
diff --git a/package/src/components/ChannelDetailsScreen/components/modal/ModalHeader.tsx b/package/src/components/ChannelDetailsScreen/components/modal/ModalHeader.tsx
@@ -12,6 +12,9 @@ type ModalHeaderProps = {
   rightAction?: React.ReactNode;
 };
 
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
 export const ModalHeader = ({ onClose, rightAction, title }: ModalHeaderProps) => {
   const {
     theme: {
diff --git a/package/src/components/ChannelDetailsScreen/hooks/members/useChannelAddMembers.ts b/package/src/components/ChannelDetailsScreen/hooks/members/useChannelAddMembers.ts
@@ -26,6 +26,9 @@ export type UseChannelAddMembersResult = {
   toggleUser: (user: AddMemberSearchResult) => void;
 };
 
+/**
+ * @experimental This hook is experimental and is subject to change.
+ */
 export const useChannelAddMembers = ({
   channel,
 }: {
diff --git a/package/src/components/ChannelDetailsScreen/hooks/members/useChannelAllMembers.ts b/package/src/components/ChannelDetailsScreen/hooks/members/useChannelAllMembers.ts
@@ -16,6 +16,9 @@ export type UseChannelAllMembersResult = {
 
 const noop = () => undefined;
 
+/**
+ * @experimental This hook is experimental and is subject to change.
+ */
 export const useChannelAllMembers = ({
   channel,
 }: {
diff --git a/package/src/components/ChannelDetailsScreen/hooks/members/useMemberRoleLabel.ts b/package/src/components/ChannelDetailsScreen/hooks/members/useMemberRoleLabel.ts
@@ -8,6 +8,7 @@ import { useTranslationContext } from '../../../../contexts/translationContext/T
  *
  * Priority — Owner > Admin > Moderator. When a member matches none of the rules
  * (and no custom `getMemberRoleLabel` is provided on the screen), returns `null`.
+ * @experimental This hook is experimental and is subject to change.
  */
 export const useMemberRoleLabel = (member: ChannelMemberResponse): string | null => {
   const { channel, getMemberRoleLabel } = useChannelDetailsContext();
diff --git a/package/src/components/ChannelDetailsScreen/hooks/useChannelDetailsActionItems.ts b/package/src/components/ChannelDetailsScreen/hooks/useChannelDetailsActionItems.ts
@@ -6,6 +6,9 @@ import {
   useChannelActionItems,
 } from '../../../hooks/actions/useChannelActionItems';
 
+/**
+ * @experimental This hook is experimental and is subject to change.
+ */
 export const useChannelDetailsActionItems = (): ChannelActionItem[] => {
   const { channel, getChannelActionItems, onChannelDismiss } = useChannelDetailsContext();
 
diff --git a/package/src/components/ChannelDetailsScreen/hooks/useChannelDetailsMemberStatusText.ts b/package/src/components/ChannelDetailsScreen/hooks/useChannelDetailsMemberStatusText.ts
@@ -7,6 +7,9 @@ import { useChannelMemberCount } from '../../../hooks/useChannelMemberCount';
 import { useChannelMembersState } from '../../ChannelList/hooks/useChannelMembersState';
 import { useChannelOnlineMemberCount } from '../../ChannelList/hooks/useChannelOnlineMemberCount';
 
+/**
+ * @experimental This hook is experimental and is subject to change.
+ */
 export const useChannelDetailsMemberStatusText = (channel: Channel): string => {
   const { t } = useTranslationContext();
   const members = useChannelMembersState(channel);
diff --git a/package/src/components/ChannelDetailsScreen/hooks/useChannelDetailsMembersPreview.ts b/package/src/components/ChannelDetailsScreen/hooks/useChannelDetailsMembersPreview.ts
@@ -13,6 +13,9 @@ export type ChannelDetailsMembersPreview = {
   visible: ChannelMemberResponse[];
 };
 
+/**
+ * @experimental This hook is experimental and is subject to change.
+ */
 export const useChannelDetailsMembersPreview = (
   channel: Channel,
   max: number = DEFAULT_VISIBLE_MEMBER_COUNT,
diff --git a/package/src/components/ChannelDetailsScreen/hooks/useEditChannelImage.ts b/package/src/components/ChannelDetailsScreen/hooks/useEditChannelImage.ts
@@ -32,6 +32,7 @@ export type UseEditChannelImageResult = {
  * `File` and decides what to do with it.
  *
  * Reads `compressImageQuality` from `ChannelDetailsContext`.
+ * @experimental This hook is experimental and is subject to change.
  */
 export const useEditChannelImage = (): UseEditChannelImageResult => {
   const { compressImageQuality } = useChannelDetailsContext();
diff --git a/package/src/components/ChannelDetailsScreen/hooks/useUserActivityStatus.ts b/package/src/components/ChannelDetailsScreen/hooks/useUserActivityStatus.ts
@@ -20,6 +20,7 @@ const hasFromNow = (value: unknown): value is { fromNow: () => string; isValid?:
  *
  * Uses `tDateTimeParser` from the translation context so the relative-time format
  * follows the configured locale.
+ * @experimental This hook is experimental and is subject to change.
  */
 export const useUserActivityStatus = (user?: UserResponse): string => {
   const { t, tDateTimeParser } = useTranslationContext();
diff --git a/package/src/components/ChannelList/hooks/useMutedUsers.ts b/package/src/components/ChannelList/hooks/useMutedUsers.ts
@@ -6,6 +6,11 @@ import { useSyncClientEvents } from '../../../hooks/useSyncClientEvents';
 const selector = (client: StreamChat) => client.mutedUsers;
 const keys: EventTypes[] = ['health.check', 'notification.mutes_updated'];
 
+/**
+ *
+ * @param @deprecated _channel - This parameter is deprecated because it is no longer necessary. It is kept for backwards compatibility only..
+ * @returns
+ */
 export function useMutedUsers(_channel?: Channel): Array<Mute> {
   const { client } = useChatContext();
   return useSyncClientEvents({ client, selector, stateChangeEventKeys: keys });
diff --git a/package/src/components/UIComponents/EmptySearchResult.tsx b/package/src/components/UIComponents/EmptySearchResult.tsx
@@ -9,6 +9,9 @@ export type EmptySearchResultProps = {
   label: string;
 };
 
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
 export const EmptySearchResult = React.memo(({ icon, label }: EmptySearchResultProps) => {
   const {
     theme: {
diff --git a/package/src/components/UIComponents/SearchInput.tsx b/package/src/components/UIComponents/SearchInput.tsx
@@ -15,6 +15,9 @@ export type SearchInputProps = {
   onClear: () => void;
 };
 
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
 export const SearchInput = React.memo(
   ({ accessibilityLabel, onChangeText, onClear }: SearchInputProps) => {
     const { t } = useTranslationContext();
diff --git a/package/src/components/UIComponents/SelectionCircle.tsx b/package/src/components/UIComponents/SelectionCircle.tsx
@@ -9,6 +9,9 @@ export type SelectionCircleProps = {
   selected: boolean;
 };
 
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
 export const SelectionCircle = React.memo(({ selected }: SelectionCircleProps) => {
   const {
     theme: {
diff --git a/package/src/contexts/channelDetailsContext/channelDetailsContext.tsx b/package/src/contexts/channelDetailsContext/channelDetailsContext.tsx
@@ -7,11 +7,17 @@ import { OwnCapabilitiesProvider } from '../ownCapabilitiesContext/OwnCapabiliti
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
 export type ChannelDetailsContextValue = ChannelDetailsScreenProps;
 export const ChannelDetailsContext = React.createContext(
   DEFAULT_BASE_CONTEXT_VALUE as ChannelDetailsContextValue,
 );
 
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
 export const ChannelDetailsContextProvider = ({
   children,
   value,
@@ -27,6 +33,9 @@ export const ChannelDetailsContextProvider = ({
   );
 };
 
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
 export const useChannelDetailsContext = () => {
   const contextValue = useContext(ChannelDetailsContext) as unknown as ChannelDetailsContextValue;
 
