fix: reflect MessageInputContext values in TextareaComposer

Author: MartinCupela

src/components/MessageInput/EditMessageForm.tsx

@@ -86,7 +86,6 @@ export const EditMessageModal = ({
     >
       <MessageInput
         clearEditingState={clearEditingState}
-        grow
         hideSendButton
         Input={EditMessageInput}
         {...additionalMessageInputProps}

src/components/MessageInput/MessageInput.tsx

@@ -38,7 +38,7 @@ export type MessageInputProps = {
    */
   additionalTextareaProps?: Omit<
     React.TextareaHTMLAttributes<HTMLTextAreaElement>,
-    'defaultValue'
+    'defaultValue' | 'style' | 'disabled'
   >;
   /**
    * When enabled, recorded messages won’t be sent immediately.
@@ -55,8 +55,6 @@ export type MessageInputProps = {
   emojiSearchIndex?: ComponentContextValue['emojiSearchIndex'];
   /** If true, focuses the text input on component mount */
   focus?: boolean;
-  /** If true, expands the text input vertically for new lines */
-  grow?: boolean;
   /** Allows to hide MessageInput's send button. */
   hideSendButton?: boolean;
   /** Custom UI component handling how the message input is rendered, defaults to and accepts the same props as [MessageInputFlat](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/MessageInputFlat.tsx) */

src/components/MessageInput/hooks/useCreateMessageInputContext.ts

@@ -12,7 +12,6 @@ export const useCreateMessageInputContext = (value: MessageInputContextValue) =>
     cooldownRemaining,
     emojiSearchIndex,
     focus,
-    grow,
     handleSubmit,
     hideSendButton,
     insertText,
@@ -39,7 +38,6 @@ export const useCreateMessageInputContext = (value: MessageInputContextValue) =>
       cooldownRemaining,
       emojiSearchIndex,
       focus,
-      grow,
       handleSubmit,
       hideSendButton,
       insertText,

src/components/TextareaComposer/TextareaComposer.tsx

@@ -46,46 +46,42 @@ export type TextComposerProps = Omit<
 > & {
   closeSuggestionsOnClickOutside?: boolean;
   containerClassName?: string;
-  dropdownClassName?: string;
-  grow?: boolean;
-  itemClassName?: string;
   listClassName?: string;
   maxRows?: number;
+  minRows?: number;
   shouldSubmit?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => boolean;
 };
 
 export const TextareaComposer = ({
   className,
   closeSuggestionsOnClickOutside,
   containerClassName,
-  // dropdownClassName, // todo: X find a different way to prevent prop drilling
-  grow: growProp,
-  // itemClassName, // todo: X find a different way to prevent prop drilling
   listClassName,
   maxRows: maxRowsProp = 1,
+  minRows: minRowsProp,
   onBlur,
   onChange,
   onKeyDown,
   onScroll,
   placeholder: placeholderProp,
   shouldSubmit: shouldSubmitProp,
-  ...restProps
+  ...restTextareaProps
 }: TextComposerProps) => {
   const { t } = useTranslationContext();
   const { AutocompleteSuggestionList = DefaultSuggestionList } = useComponentContext();
   const {
     additionalTextareaProps,
     cooldownRemaining,
-    grow: growContext,
     handleSubmit,
     maxRows: maxRowsContext,
+    minRows: minRowsContext,
     onPaste,
     shouldSubmit: shouldSubmitContext,
     textareaRef,
   } = useMessageInputContext();
 
-  const grow = growProp ?? growContext;
   const maxRows = maxRowsProp ?? maxRowsContext;
+  const minRows = minRowsProp ?? minRowsContext;
   const placeholder = placeholderProp ?? additionalTextareaProps?.placeholder;
   const shouldSubmit = shouldSubmitProp ?? shouldSubmitContext ?? defaultShouldSubmit;
 
@@ -235,7 +231,7 @@ export const TextareaComposer = ({
       ref={containerRef}
     >
       <Textarea
-        {...restProps}
+        {...{ ...additionalTextareaProps, ...restTextareaProps }}
         aria-label={cooldownRemaining ? t('Slow Mode ON') : placeholder}
         className={clsx(
           'rta__textarea',
@@ -244,7 +240,8 @@ export const TextareaComposer = ({
         )}
         data-testid='message-input'
         disabled={!enabled || !!cooldownRemaining}
-        maxRows={grow ? maxRows : 1}
+        maxRows={maxRows}
+        minRows={minRows}
         onBlur={onBlur}
         onChange={changeHandler}
         onCompositionEnd={onCompositionEnd}