fix(fuselage): Message Mention and Highlight types and export (#1053)

Author: gabriellsh

packages/fuselage/src/components/Message/MessageHighlight.tsx

@@ -1,4 +1,4 @@
-import type { ElementType } from 'react';
+import type { ElementType, HTMLAttributes } from 'react';
 import React from 'react';
 
 import { prependClassName } from '../../helpers/prependClassName';
@@ -10,9 +10,9 @@ export type MessageHighlightProps = {
   className?: string;
   children: any;
   title?: string;
-};
+} & HTMLAttributes<HTMLElement>;
 
-function MessageHighlight({
+export function MessageHighlight({
   is: Tag = 'span',
   variant = 'other',
   className,
@@ -34,5 +34,3 @@ function MessageHighlight({
     />
   );
 }
-
-export default MessageHighlight;

packages/fuselage/src/components/Message/MessageMention.tsx

@@ -1,14 +1,14 @@
 import type { ComponentProps } from 'react';
 import React from 'react';
 
-import MessageHighlight from './MessageHighlight';
+import { MessageHighlight } from './MessageHighlight';
 
 type MessageMentionProps = {
   tag?: '#' | '@';
   innerClassName?: string;
 } & ComponentProps<typeof MessageHighlight>;
 
-function MessageMention({
+export function MessageMention({
   tag,
   className = '',
   innerClassName,
@@ -21,5 +21,3 @@ function MessageMention({
     </span>
   );
 }
-
-export default MessageMention;

packages/fuselage/src/components/Message/index.tsx

@@ -5,9 +5,9 @@ import { MessageContainer } from './MessageContainer';
 import { MessageContainerFixed } from './MessageContainerFixed';
 import { MessageDivider } from './MessageDivider';
 import { MessageHeader } from './MessageHeader';
-import MessageHighlight from './MessageHighlight';
+import { MessageHighlight } from './MessageHighlight';
 import { MessageLeftContainer } from './MessageLeftContainer';
-import MessageMention from './MessageMention';
+import { MessageMention } from './MessageMention';
 import MessageMetrics from './MessageMetrics';
 import { MessageName } from './MessageName';
 import { MessageNameContainer } from './MessageNameContainer';