stream-chat-react-native-core 5.34.0 → 5.34.1-beta.1

package/src/components/MessageInput/CommandsButton.tsx

@@ -2,10 +2,6 @@ import React from 'react';
 import type { GestureResponderEvent } from 'react-native';
 import { Pressable } from 'react-native';
 
-import {
-  ChannelContextValue,
-  useChannelContext,
-} from '../../contexts/channelContext/ChannelContext';
 import {
   isSuggestionCommand,
   SuggestionsContextValue,
@@ -18,18 +14,17 @@ import type { DefaultStreamChatGenerics } from '../../types/types';
 
 type CommandsButtonPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<ChannelContextValue<StreamChatGenerics>, 'disabled'> &
-  Pick<SuggestionsContextValue<StreamChatGenerics>, 'suggestions'> & {
-    /** Function that opens commands selector */
-    handleOnPress?: ((event: GestureResponderEvent) => void) & (() => void);
-  };
+> = Pick<SuggestionsContextValue<StreamChatGenerics>, 'suggestions'> & {
+  /** Function that opens commands selector */
+  handleOnPress?: ((event: GestureResponderEvent) => void) & (() => void);
+};
 
 const CommandsButtonWithContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   props: CommandsButtonPropsWithContext<StreamChatGenerics>,
 ) => {
-  const { disabled, handleOnPress, suggestions } = props;
+  const { handleOnPress, suggestions } = props;
 
   const {
     theme: {
@@ -39,12 +34,7 @@ const CommandsButtonWithContext = <
   } = useTheme();
 
   return (
-    <Pressable
-      disabled={disabled}
-      onPress={handleOnPress}
-      style={[commandsButton]}
-      testID='commands-button'
-    >
+    <Pressable onPress={handleOnPress} style={[commandsButton]} testID='commands-button'>
       <Lightning
         pathFill={
           suggestions && suggestions.data.some((suggestion) => isSuggestionCommand(suggestion))
@@ -60,11 +50,8 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   prevProps: CommandsButtonPropsWithContext<StreamChatGenerics>,
   nextProps: CommandsButtonPropsWithContext<StreamChatGenerics>,
 ) => {
-  const { disabled: prevDisabled, suggestions: prevSuggestions } = prevProps;
-  const { disabled: nextDisabled, suggestions: nextSuggestions } = nextProps;
-
-  const disabledEqual = prevDisabled === nextDisabled;
-  if (!disabledEqual) return false;
+  const { suggestions: prevSuggestions } = prevProps;
+  const { suggestions: nextSuggestions } = nextProps;
 
   const suggestionsEqual = !!prevSuggestions === !!nextSuggestions;
   if (!suggestionsEqual) return false;
@@ -89,10 +76,9 @@ export const CommandsButton = <
 >(
   props: CommandsButtonProps<StreamChatGenerics>,
 ) => {
-  const { disabled = false } = useChannelContext<StreamChatGenerics>();
   const { suggestions } = useSuggestionsContext<StreamChatGenerics>();
 
-  return <MemoizedCommandsButton {...{ disabled, suggestions }} {...props} />;
+  return <MemoizedCommandsButton {...{ suggestions }} {...props} />;
 };
 
 CommandsButton.displayName = 'CommandsButton{messageInput}';

package/src/components/MessageInput/MessageInput.tsx

@@ -21,7 +21,7 @@ import type { UserResponse } from 'stream-chat';
 import { useAudioController } from './hooks/useAudioController';
 import { useCountdown } from './hooks/useCountdown';
 
-import { ChatContextValue, useChatContext } from '../../contexts';
+import { ChatContextValue, useChatContext, useOwnCapabilitiesContext } from '../../contexts';
 import {
   AttachmentPickerContextValue,
   useAttachmentPickerContext,
@@ -38,7 +38,6 @@ import {
   MessagesContextValue,
   useMessagesContext,
 } from '../../contexts/messagesContext/MessagesContext';
-import { useOwnCapabilitiesContext } from '../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import {
   SuggestionsContextValue,
   useSuggestionsContext,
@@ -96,10 +95,7 @@ type MessageInputPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<AttachmentPickerContextValue, 'AttachmentPickerSelectionBar'> &
   Pick<ChatContextValue<StreamChatGenerics>, 'isOnline'> &
-  Pick<
-    ChannelContextValue<StreamChatGenerics>,
-    'disabled' | 'members' | 'threadList' | 'watchers'
-  > &
+  Pick<ChannelContextValue<StreamChatGenerics>, 'members' | 'threadList' | 'watchers'> &
   Pick<
     MessageInputContextValue<StreamChatGenerics>,
     | 'additionalTextInputProps'
@@ -184,7 +180,6 @@ const MessageInputWithContext = <
     closeAttachmentPicker,
     cooldownEndsAt,
     CooldownTimer,
-    disabled,
     editing,
     FileUploadPreview,
     fileUploads,
@@ -457,7 +452,8 @@ const MessageInputWithContext = <
         fileUploads.length > 0 ||
         mentionedUsers.length > 0 ||
         imageUploads.length > 0 ||
-        numberOfUploads > 0)
+        numberOfUploads > 0) &&
+      resetInput
     ) {
       resetInput();
     }
@@ -517,7 +513,6 @@ const MessageInputWithContext = <
   };
 
   const additionalTextInputContainerProps = {
-    editable: disabled ? false : undefined,
     ...additionalTextInputProps,
   };
 
@@ -771,12 +766,7 @@ const MessageInputWithContext = <
                 ) : (
                   <View style={[styles.sendButtonContainer, sendButtonContainer]}>
                     <SendButton
-                      disabled={
-                        disabled ||
-                        sending.current ||
-                        !isValidMessage() ||
-                        (giphyActive && !isOnline)
-                      }
+                      disabled={sending.current || !isValidMessage() || (giphyActive && !isOnline)}
                     />
                   </View>
                 ))}
@@ -849,7 +839,6 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     asyncMessagesSlideToCancelDistance: prevAsyncMessagesSlideToCancelDistance,
     asyncUploads: prevAsyncUploads,
     audioRecordingEnabled: prevAsyncMessagesEnabled,
-    disabled: prevDisabled,
     editing: prevEditing,
     fileUploads: prevFileUploads,
     giphyActive: prevGiphyActive,
@@ -872,7 +861,6 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     asyncMessagesSlideToCancelDistance: nextAsyncMessagesSlideToCancelDistance,
     asyncUploads: nextAsyncUploads,
     audioRecordingEnabled: nextAsyncMessagesEnabled,
-    disabled: nextDisabled,
     editing: nextEditing,
     fileUploads: nextFileUploads,
     giphyActive: nextGiphyActive,
@@ -911,9 +899,6 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     prevAsyncMessagesSlideToCancelDistance === nextAsyncMessagesSlideToCancelDistance;
   if (!asyncMessagesSlideToCancelDistanceEqual) return false;
 
-  const disabledEqual = prevDisabled === nextDisabled;
-  if (!disabledEqual) return false;
-
   const editingEqual = !!prevEditing === !!nextEditing;
   if (!editingEqual) return false;
 
@@ -1071,7 +1056,11 @@ export const MessageInput = <
 
   const { t } = useTranslationContext();
 
-  if ((disabled || !ownCapabilities.sendMessage) && SendMessageDisallowedIndicator) {
+  /**
+   * Disable the message input if the channel is frozen, or the user doesn't have the capability to send a message.
+   * Enable it in frozen mode, if it the input has editing state.
+   */
+  if (!editing && disabled && !ownCapabilities.sendMessage && SendMessageDisallowedIndicator) {
     return <SendMessageDisallowedIndicator />;
   }
 
@@ -1099,7 +1088,6 @@ export const MessageInput = <
         closeAttachmentPicker,
         cooldownEndsAt,
         CooldownTimer,
-        disabled,
         editing,
         FileUploadPreview,
         fileUploads,

package/src/components/MessageInput/MoreOptionsButton.tsx

@@ -2,28 +2,16 @@ import React from 'react';
 import type { GestureResponderEvent } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 
-import {
-  ChannelContextValue,
-  useChannelContext,
-} from '../../contexts/channelContext/ChannelContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { CircleRight } from '../../icons/CircleRight';
 
-import type { DefaultStreamChatGenerics } from '../../types/types';
-
-type MoreOptionsButtonPropsWithContext<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<ChannelContextValue<StreamChatGenerics>, 'disabled'> & {
+export type MoreOptionsButtonProps = {
   /** Function that opens attachment options bottom sheet */
   handleOnPress?: ((event: GestureResponderEvent) => void) & (() => void);
 };
 
-const MoreOptionsButtonWithContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: MoreOptionsButtonPropsWithContext<StreamChatGenerics>,
-) => {
-  const { disabled, handleOnPress } = props;
+export const MoreOptionsButton = (props: MoreOptionsButtonProps) => {
+  const { handleOnPress } = props;
 
   const {
     theme: {
@@ -34,7 +22,6 @@ const MoreOptionsButtonWithContext = <
 
   return (
     <TouchableOpacity
-      disabled={disabled}
       hitSlop={{ bottom: 15, left: 15, right: 15, top: 15 }}
       onPress={handleOnPress}
       style={[moreOptionsButton]}
@@ -45,41 +32,4 @@ const MoreOptionsButtonWithContext = <
   );
 };
 
-const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
-  prevProps: MoreOptionsButtonPropsWithContext<StreamChatGenerics>,
-  nextProps: MoreOptionsButtonPropsWithContext<StreamChatGenerics>,
-) => {
-  const { disabled: prevDisabled, handleOnPress: prevHandleOnPress } = prevProps;
-  const { disabled: nextDisabled, handleOnPress: nextHandleOnPress } = nextProps;
-  const disabledEqual = prevDisabled === nextDisabled;
-  if (!disabledEqual) return false;
-
-  const handleOnPressEqual = prevHandleOnPress === nextHandleOnPress;
-  if (!handleOnPressEqual) return false;
-
-  return true;
-};
-
-const MemoizedMoreOptionsButton = React.memo(
-  MoreOptionsButtonWithContext,
-  areEqual,
-) as typeof MoreOptionsButtonWithContext;
-
-export type MoreOptionsButtonProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Partial<MoreOptionsButtonPropsWithContext<StreamChatGenerics>>;
-
-/**
- * UI Component for more options button in MessageInput component.
- */
-export const MoreOptionsButton = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: MoreOptionsButtonProps<StreamChatGenerics>,
-) => {
-  const { disabled = false } = useChannelContext<StreamChatGenerics>();
-
-  return <MemoizedMoreOptionsButton {...{ disabled }} {...props} />;
-};
-
 MoreOptionsButton.displayName = 'MoreOptionsButton{messageInput}';

package/src/components/MessageInput/__tests__/__snapshots__/AttachButton.test.js.snap

@@ -6,7 +6,7 @@ exports[`AttachButton should render a disabled AttachButton 1`] = `
     {
       "busy": undefined,
       "checked": undefined,
-      "disabled": true,
+      "disabled": undefined,
       "expanded": undefined,
       "selected": undefined,
     }
@@ -101,7 +101,7 @@ exports[`AttachButton should render an enabled AttachButton 1`] = `
     {
       "busy": undefined,
       "checked": undefined,
-      "disabled": false,
+      "disabled": undefined,
       "expanded": undefined,
       "selected": undefined,
     }

package/src/components/MessageInput/components/AudioRecorder/AudioRecorder.tsx

@@ -5,10 +5,6 @@ import Animated from 'react-native-reanimated';
 
 import dayjs from 'dayjs';
 
-import {
-  ChannelContextValue,
-  useChannelContext,
-} from '../../../../contexts/channelContext/ChannelContext';
 import {
   MessageInputContextValue,
   useMessageInputContext,
@@ -21,42 +17,41 @@ import type { DefaultStreamChatGenerics } from '../../../../types/types';
 
 type AudioRecorderPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<ChannelContextValue<StreamChatGenerics>, 'disabled'> &
-  Pick<MessageInputContextValue<StreamChatGenerics>, 'asyncMessagesMultiSendEnabled'> & {
-    /**
-     * Function to stop and delete the voice recording.
-     */
-    deleteVoiceRecording: () => Promise<void>;
-    /**
-     * Boolean used to show if the voice recording state is locked. This makes sure the mic button shouldn't be pressed any longer.
-     * When the mic is locked the `AudioRecordingInProgress` component shows up.
-     */
-    micLocked: boolean;
-    /**
-     * The current voice recording that is in progress.
-     */
-    recording: AudioRecordingReturnType;
-    /**
-     * Boolean to determine if the recording has been stopped.
-     */
-    recordingStopped: boolean;
-    /**
-     * Function to stop the ongoing voice recording.
-     */
-    stopVoiceRecording: () => Promise<void>;
-    /**
-     * Function to upload the voice recording.
-     */
-    uploadVoiceRecording: (multiSendEnabled: boolean) => Promise<void>;
-    /**
-     * The duration of the voice recording.
-     */
-    recordingDuration?: number;
-    /**
-     * Style used in slide to cancel container.
-     */
-    slideToCancelStyle?: StyleProp<ViewStyle>;
-  };
+> = Pick<MessageInputContextValue<StreamChatGenerics>, 'asyncMessagesMultiSendEnabled'> & {
+  /**
+   * Function to stop and delete the voice recording.
+   */
+  deleteVoiceRecording: () => Promise<void>;
+  /**
+   * Boolean used to show if the voice recording state is locked. This makes sure the mic button shouldn't be pressed any longer.
+   * When the mic is locked the `AudioRecordingInProgress` component shows up.
+   */
+  micLocked: boolean;
+  /**
+   * The current voice recording that is in progress.
+   */
+  recording: AudioRecordingReturnType;
+  /**
+   * Boolean to determine if the recording has been stopped.
+   */
+  recordingStopped: boolean;
+  /**
+   * Function to stop the ongoing voice recording.
+   */
+  stopVoiceRecording: () => Promise<void>;
+  /**
+   * Function to upload the voice recording.
+   */
+  uploadVoiceRecording: (multiSendEnabled: boolean) => Promise<void>;
+  /**
+   * The duration of the voice recording.
+   */
+  recordingDuration?: number;
+  /**
+   * Style used in slide to cancel container.
+   */
+  slideToCancelStyle?: StyleProp<ViewStyle>;
+};
 
 const StopRecording = ({
   stopVoiceRecordingHandler,
@@ -110,10 +105,8 @@ const UploadRecording = ({
 
 const DeleteRecording = ({
   deleteVoiceRecordingHandler,
-  disabled,
 }: {
   deleteVoiceRecordingHandler: () => Promise<void>;
-  disabled?: boolean;
 }) => {
   const {
     theme: {
@@ -125,7 +118,6 @@ const DeleteRecording = ({
   } = useTheme();
   return (
     <Pressable
-      disabled={disabled}
       onPress={deleteVoiceRecordingHandler}
       style={[styles.deleteContainer, deleteContainer]}
       testID='delete-button'
@@ -143,7 +135,6 @@ const AudioRecorderWithContext = <
   const {
     asyncMessagesMultiSendEnabled,
     deleteVoiceRecording,
-    disabled,
     micLocked,
     recordingDuration,
     recordingStopped,
@@ -165,7 +156,7 @@ const AudioRecorderWithContext = <
     if (recordingStopped) {
       return (
         <>
-          <DeleteRecording deleteVoiceRecordingHandler={deleteVoiceRecording} disabled={disabled} />
+          <DeleteRecording deleteVoiceRecordingHandler={deleteVoiceRecording} />
           <UploadRecording
             asyncMessagesMultiSendEnabled={asyncMessagesMultiSendEnabled}
             uploadVoiceRecordingHandler={uploadVoiceRecording}
@@ -212,7 +203,6 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
 ) => {
   const {
     asyncMessagesMultiSendEnabled: prevAsyncMessagesMultiSendEnabled,
-    disabled: prevDisabled,
     micLocked: prevMicLocked,
     recording: prevRecording,
     recordingDuration: prevRecordingDuration,
@@ -220,7 +210,6 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   } = prevProps;
   const {
     asyncMessagesMultiSendEnabled: nextAsyncMessagesMultiSendEnabled,
-    disabled: nextDisabled,
     micLocked: nextMicLocked,
     recording: nextRecording,
     recordingDuration: nextRecordingDuration,
@@ -231,9 +220,6 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     prevAsyncMessagesMultiSendEnabled === nextAsyncMessagesMultiSendEnabled;
   if (!asyncMessagesMultiSendEnabledEqual) return false;
 
-  const disabledEqual = prevDisabled === nextDisabled;
-  if (!disabledEqual) return false;
-
   const micLockedEqual = prevMicLocked === nextMicLocked;
   if (!micLockedEqual) return false;
 
@@ -275,14 +261,12 @@ export const AudioRecorder = <
 >(
   props: AudioRecorderProps<StreamChatGenerics>,
 ) => {
-  const { disabled = false } = useChannelContext<StreamChatGenerics>();
   const { asyncMessagesMultiSendEnabled } = useMessageInputContext<StreamChatGenerics>();
 
   return (
     <MemoizedAudioRecorder
       {...{
         asyncMessagesMultiSendEnabled,
-        disabled,
       }}
       {...props}
     />

package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx

@@ -1,10 +1,6 @@
 import React from 'react';
 import { Alert, Linking, Pressable, StyleSheet } from 'react-native';
 
-import {
-  ChannelContextValue,
-  useChannelContext,
-} from '../../../../contexts/channelContext/ChannelContext';
 import {
   MessageInputContextValue,
   useMessageInputContext,
@@ -18,33 +14,32 @@ import type { DefaultStreamChatGenerics } from '../../../../types/types';
 
 type AudioRecordingButtonPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<ChannelContextValue<StreamChatGenerics>, 'disabled'> &
-  Pick<MessageInputContextValue<StreamChatGenerics>, 'asyncMessagesMinimumPressDuration'> & {
-    /**
-     * The current voice recording that is in progress.
-     */
-    recording: AudioRecordingReturnType;
-    /**
-     * Size of the mic button.
-     */
-    buttonSize?: number;
-    /**
-     * Handler to determine what should happen on long press of the mic button.
-     */
-    handleLongPress?: () => void;
-    /**
-     * Handler to determine what should happen on press of the mic button.
-     */
-    handlePress?: () => void;
-    /**
-     * Boolean to determine if the audio recording permissions are granted.
-     */
-    permissionsGranted?: boolean;
-    /**
-     * Function to start the voice recording.
-     */
-    startVoiceRecording?: () => Promise<void>;
-  };
+> = Pick<MessageInputContextValue<StreamChatGenerics>, 'asyncMessagesMinimumPressDuration'> & {
+  /**
+   * The current voice recording that is in progress.
+   */
+  recording: AudioRecordingReturnType;
+  /**
+   * Size of the mic button.
+   */
+  buttonSize?: number;
+  /**
+   * Handler to determine what should happen on long press of the mic button.
+   */
+  handleLongPress?: () => void;
+  /**
+   * Handler to determine what should happen on press of the mic button.
+   */
+  handlePress?: () => void;
+  /**
+   * Boolean to determine if the audio recording permissions are granted.
+   */
+  permissionsGranted?: boolean;
+  /**
+   * Function to start the voice recording.
+   */
+  startVoiceRecording?: () => Promise<void>;
+};
 
 const AudioRecordingButtonWithContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -54,7 +49,6 @@ const AudioRecordingButtonWithContext = <
   const {
     asyncMessagesMinimumPressDuration,
     buttonSize,
-    disabled,
     handleLongPress,
     handlePress,
     permissionsGranted,
@@ -107,7 +101,6 @@ const AudioRecordingButtonWithContext = <
   return (
     <Pressable
       delayLongPress={asyncMessagesMinimumPressDuration}
-      disabled={disabled}
       onLongPress={onLongPressHandler}
       onPress={onPressHandler}
       style={({ pressed }) => [
@@ -132,12 +125,10 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
 ) => {
   const {
     asyncMessagesMinimumPressDuration: prevAsyncMessagesMinimumPressDuration,
-    disabled: prevDisabled,
     recording: prevRecording,
   } = prevProps;
   const {
     asyncMessagesMinimumPressDuration: nextAsyncMessagesMinimumPressDuration,
-    disabled: nextDisabled,
     recording: nextRecording,
   } = nextProps;
 
@@ -145,9 +136,6 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     prevAsyncMessagesMinimumPressDuration === nextAsyncMessagesMinimumPressDuration;
   if (!asyncMessagesMinimumPressDurationEqual) return false;
 
-  const disabledEqual = prevDisabled === nextDisabled;
-  if (!disabledEqual) return false;
-
   const recordingEqual = prevRecording === nextRecording;
   if (!recordingEqual) return false;
 
@@ -173,12 +161,9 @@ export const AudioRecordingButton = <
 >(
   props: AudioRecordingButtonProps<StreamChatGenerics>,
 ) => {
-  const { disabled = false } = useChannelContext<StreamChatGenerics>();
   const { asyncMessagesMinimumPressDuration } = useMessageInputContext<StreamChatGenerics>();
 
-  return (
-    <MemoizedAudioRecordingButton {...{ asyncMessagesMinimumPressDuration, disabled }} {...props} />
-  );
+  return <MemoizedAudioRecordingButton {...{ asyncMessagesMinimumPressDuration }} {...props} />;
 };
 
 const styles = StyleSheet.create({

package/src/components/MessageInput/components/InputEditingStateHeader.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
-import type { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
 import {
   MessageInputContextValue,
   useMessageInputContext,
@@ -25,19 +24,23 @@ const styles = StyleSheet.create({
   },
 });
 
-export type InputEditingStateHeaderPropsWithContext<
+export type InputEditingStateHeaderProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<MessageInputContextValue<StreamChatGenerics>, 'clearEditingState' | 'resetInput'> &
-  Pick<ChannelContextValue<StreamChatGenerics>, 'disabled'>;
+> = Partial<Pick<MessageInputContextValue<StreamChatGenerics>, 'clearEditingState' | 'resetInput'>>;
 
-export const InputEditingStateHeaderWithContext = <
+export const InputEditingStateHeader = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
-  clearEditingState,
-  disabled,
-  resetInput,
-}: InputEditingStateHeaderPropsWithContext<StreamChatGenerics>) => {
+  clearEditingState: propClearEditingState,
+  resetInput: propResetInput,
+}: InputEditingStateHeaderProps<StreamChatGenerics>) => {
   const { t } = useTranslationContext();
+  const { clearEditingState: contextClearEditingState, resetInput: contextResetInput } =
+    useMessageInputContext<StreamChatGenerics>();
+
+  const clearEditingState = propClearEditingState || contextClearEditingState;
+  const resetInput = propResetInput || contextResetInput;
+
   const {
     theme: {
       colors: { black, grey, grey_gainsboro },
@@ -54,10 +57,13 @@ export const InputEditingStateHeaderWithContext = <
         {t<string>('Editing Message')}
       </Text>
       <TouchableOpacity
-        disabled={disabled}
         onPress={() => {
-          resetInput();
-          clearEditingState();
+          if (resetInput) {
+            resetInput();
+          }
+          if (clearEditingState) {
+            clearEditingState();
+          }
         }}
         testID='close-button'
       >
@@ -67,36 +73,4 @@ export const InputEditingStateHeaderWithContext = <
   );
 };
 
-const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
-  prevProps: InputEditingStateHeaderPropsWithContext<StreamChatGenerics>,
-  nextProps: InputEditingStateHeaderPropsWithContext<StreamChatGenerics>,
-) => {
-  const { disabled: prevDisabled } = prevProps;
-  const { disabled: nextDisabled } = nextProps;
-
-  const disabledEqual = prevDisabled === nextDisabled;
-  if (!disabledEqual) return false;
-
-  return true;
-};
-
-const MemoizedInputEditingStateHeader = React.memo(
-  InputEditingStateHeaderWithContext,
-  areEqual,
-) as typeof InputEditingStateHeaderWithContext;
-
-export type InputEditingStateHeaderProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Partial<InputEditingStateHeaderPropsWithContext<StreamChatGenerics>>;
-
-export const InputEditingStateHeader = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: InputEditingStateHeaderProps<StreamChatGenerics>,
-) => {
-  const { clearEditingState, resetInput } = useMessageInputContext<StreamChatGenerics>();
-
-  return <MemoizedInputEditingStateHeader {...{ clearEditingState, resetInput }} {...props} />;
-};
-
 InputEditingStateHeader.displayName = 'EditingStateHeader{messageInput}';