Add MessageActions to ComponentContext, deprecate old stuff

src/components/Channel/Channel.tsx

@@ -118,6 +118,7 @@ type ChannelPropsForwardedToComponentContext<
   | 'LinkPreviewList'
   | 'LoadingIndicator'
   | 'Message'
+  | 'MessageActions'
   | 'MessageBouncePrompt'
   | 'MessageDeleted'
   | 'MessageListNotifications'
@@ -1226,6 +1227,7 @@ const ChannelInner = <
       LinkPreviewList: props.LinkPreviewList,
       LoadingIndicator: props.LoadingIndicator,
       Message: props.Message,
+      MessageActions: props.MessageActions,
       MessageBouncePrompt: props.MessageBouncePrompt,
       MessageDeleted: props.MessageDeleted,
       MessageListNotifications: props.MessageListNotifications,
@@ -1275,6 +1277,7 @@ const ChannelInner = <
       props.LinkPreviewList,
       props.LoadingIndicator,
       props.Message,
+      props.MessageActions,
       props.MessageBouncePrompt,
       props.MessageDeleted,
       props.MessageListNotifications,

src/components/Message/MessageOptions.tsx

@@ -100,6 +100,9 @@ const UnMemoizedMessageOptions = <
   );
 };
 
+/**
+ * @deprecated Use MessageActions_UNSTABLE (`MessageActions` component) instead.
+ */
 export const MessageOptions = React.memo(
   UnMemoizedMessageOptions,
 ) as typeof UnMemoizedMessageOptions;

src/components/Message/MessageSimple.tsx

@@ -70,13 +70,15 @@ const MessageSimpleWithContext = <
     Attachment = DefaultAttachment,
     Avatar = DefaultAvatar,
     EditMessageInput = DefaultEditMessageForm,
+    MessageOptions = DefaultMessageOptions,
+    // TODO: remove this "passthrough" in the next
+    // major release and use the new default instead
+    MessageActions = MessageOptions,
     MessageDeleted = DefaultMessageDeleted,
     MessageBouncePrompt = DefaultMessageBouncePrompt,
-    MessageOptions = DefaultMessageOptions,
     MessageRepliesCountButton = DefaultMessageRepliesCountButton,
     MessageStatus = DefaultMessageStatus,
     MessageTimestamp = DefaultMessageTimestamp,
-
     ReactionsList = DefaultReactionList,
     PinIndicator,
   } = useComponentContext<StreamChatGenerics>('MessageSimple');
@@ -171,7 +173,7 @@ const MessageSimpleWithContext = <
             onClick={handleClick}
             onKeyUp={handleClick}
           >
-            <MessageOptions />
+            <MessageActions />
             <div className='str-chat__message-reactions-host'>
               {hasReactions && <ReactionsList reverse />}
             </div>

src/components/MessageActions/MessageActions.new.tsx → src/components/MessageActions/MessageActions_UNSTABLE.tsx

@@ -182,8 +182,9 @@ export const DefaultDropdownActionButton = ({
 
 /**
  * Base filter hook which covers actions of type `delete`, `edit`,
- * `flag`, `markAsUnread`, `mute`, `quote`, `react` and `reply` and whether
- * the rendered message is a reply (replies are limited to certain actions).
+ * `flag`, `markAsUnread`, `mute`, `quote`, `react` and `reply`, whether
+ * the rendered message is a reply (replies are limited to certain actions) and
+ * whether the message has appropriate type and status.
  */
 export const useBaseMessageActionSetFilter = (
   messageActionSet: MessageAction[],
@@ -266,6 +267,7 @@ export const useSplitMessageActionSet = (messageActionSet: MessageAction[]) =>
     return { quickActionSet, dropdownActionSet } as const;
   }, [messageActionSet]);
 
+// TODO: allow passing down customWrapperClass
 export const MessageActions = ({
   disableBaseMessageActionSetFilter = false,
   messageActionSet = defaultMessageActionSet,

src/components/MessageActions/index.ts

@@ -1,4 +1,4 @@
 export * from './MessageActions';
 export * from './MessageActionsBox';
 export * from './CustomMessageActionsList';
-export * as MessageActions_UNSTABLE from './MessageActions.new';
+export * as MessageActions_UNSTABLE from './MessageActions_UNSTABLE';

src/context/ComponentContext.tsx

@@ -102,6 +102,8 @@ export type ComponentContextValue<
   LoadingIndicator?: React.ComponentType<LoadingIndicatorProps>;
   /** Custom UI component to display a message in the standard `MessageList`, defaults to and accepts the same props as: [MessageSimple](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageSimple.tsx) */
   Message?: React.ComponentType<MessageUIComponentProps<StreamChatGenerics>>;
+  /** Custom UI component for message actions popup, accepts no props, all the defaults are set within [MessageActions_UNSTABLE](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageActions/MessageActions_UNSTABLE.tsx) (`MessageActions` component) */
+  MessageActions?: React.ComponentType;
   /** Custom UI component to display the contents of a bounced message modal. Usually it allows to retry, edit, or delete the message. Defaults to and accepts the same props as: [MessageBouncePrompt](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageBounce/MessageBouncePrompt.tsx) */
   MessageBouncePrompt?: React.ComponentType<MessageBouncePromptProps>;
   /** Custom UI component for a deleted message, defaults to and accepts same props as: [MessageDeleted](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageDeleted.tsx) */
@@ -111,7 +113,11 @@ export type ComponentContextValue<
   MessageListNotifications?: React.ComponentType<MessageListNotificationsProps>;
   /** Custom UI component to display a notification when scrolled up the list and new messages arrive, defaults to and accepts same props as [MessageNotification](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageList/MessageNotification.tsx) */
   MessageNotification?: React.ComponentType<MessageNotificationProps>;
-  /** Custom UI component for message options popup, defaults to and accepts same props as: [MessageOptions](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageOptions.tsx) */
+  /**
+   * Custom UI component for message options popup, defaults to and accepts same props as: [MessageOptions](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageOptions.tsx)
+   *
+   * @deprecated Use MessageActions property instead.
+   */
   MessageOptions?: React.ComponentType<MessageOptionsProps<StreamChatGenerics>>;
   /** Custom UI component to display message replies, defaults to and accepts same props as: [MessageRepliesCountButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageRepliesCountButton.tsx) */
   MessageRepliesCountButton?: React.ComponentType<MessageRepliesCountButtonProps>;