stream-chat-react-native-core 10.0.0-rc.1 → 10.0.0-rc.2

package/src/components/MessageList/hooks/useMessageDateSeparator.ts

@@ -16,8 +16,7 @@ export const getDateSeparatorValue = ({
     return undefined;
   }
 
-  // Nullish rather than truthy: `0` is a legitimate wire timestamp (the epoch), and treating it as
-  // "no date" would collapse the grouping key and suppress the separator.
+  // Nullish check, as `0` is a valid timestamp (the epoch) and must not suppress the separator.
   const previousMessageDate =
     previousMessage?.created_at != null
       ? nsToDate(previousMessage.created_at).toDateString()
@@ -26,8 +25,7 @@ export const getDateSeparatorValue = ({
     message?.created_at != null ? nsToDate(message.created_at).toDateString() : undefined;
 
   if (previousMessageDate !== messageDate) {
-    // A `Date`, because the separator components that render this are presentational and keep their
-    // `date?: Date` props. Converted once, here, where core data leaves the message.
+    // A `Date`, as the presentational separator components take `date?: Date`.
     return message?.created_at != null ? nsToDate(message.created_at) : undefined;
   }
 
@@ -35,7 +33,12 @@ export const getDateSeparatorValue = ({
 };
 
 /**
- * Hook to get whether a message should have a date separator above it
+ * Returns the date for a separator above the message, or `undefined` when none is needed.
+ *
+ * @param params.hideDateSeparators Suppresses every separator.
+ * @param params.message The message the separator sits above.
+ * @param params.previousMessage The message rendered before it.
+ * @returns The message's creation date when it falls on a different day than the previous message.
  */
 export const useMessageDateSeparator = ({
   hideDateSeparators,

package/src/components/MessageList/hooks/useMessageGroupStyles.ts

@@ -8,7 +8,16 @@ import { MessagesContextValue } from '../../../contexts/messagesContext/Messages
 import { getGroupStyle } from '../utils/getGroupStyles';
 
 /**
- * Hook to get the group styles for a message
+ * Returns the group styles of a message, computed by `getMessageGroupStyle`.
+ *
+ * @param params.noGroupByUser Skips grouping, which yields an empty array.
+ * @param params.dateSeparatorDate Date of the separator above the message, if any.
+ * @param params.maxTimeBetweenGroupedMessages Longest gap, in milliseconds, within a group.
+ * @param params.message The message to style.
+ * @param params.previousMessage The message rendered before it.
+ * @param params.nextMessage The message rendered after it.
+ * @param params.getMessageGroupStyle Computes the group styles. Defaults to `getGroupStyle`.
+ * @returns The group styles.
  */
 export const useMessageGroupStyles = ({
   noGroupByUser,
@@ -27,7 +36,7 @@ export const useMessageGroupStyles = ({
   previousMessage?: LocalMessage;
   nextMessage?: LocalMessage;
 }) => {
-  // This is needed to calculate the group styles for the next message
+  // The next message's separator feeds into this message's group style.
   const nextMessageDateSeparatorDate = useMessageDateSeparator({
     message: nextMessage,
     previousMessage: message,

package/src/components/MessageList/hooks/useMessageList.ts

@@ -40,10 +40,7 @@ export const useMessageList = (params: UseMessageListParams) => {
 
   return useMemo(
     () => ({
-      /**
-       * The paginator's configured window cap, or `undefined` when the list is unbounded. Read from
-       * the paginator rather than a prop — it is state-layer configuration.
-       */
+      /** The paginator's configured window cap, or `undefined` when the list is unbounded. */
       maxLoadedItems,
       /** Render order: newest first for the inverted FlatList, oldest first for FlashList. */
       processedMessageList: data,

package/src/components/MessageList/hooks/useMessageListFocus.ts

@@ -15,13 +15,15 @@ const messageFocusSelector = (state: {
 });
 
 /**
- * The message `paginator` wants the list to scroll to and highlight, and `goToMessage` to request
- * one. A jump (`jumpToMessage`, `jumpToTheFirstUnreadMessage`, …) emits the paginator's
- * `messageFocusSignal`; the list scrolls when it sees a new `focusToken`, which changes on every jump
- * even to the same message.
+ * Tracks the message the list should scroll to and highlight, from the paginator's
+ * `messageFocusSignal`. A jump (`jumpToMessage`, `jumpToTheFirstUnreadMessage`, ...) emits the
+ * signal, and `focusToken` changes on every jump, even to the same message.
  *
- * The signal lives on the paginator, which outlives the list, so it is cleared on unmount. Otherwise a
- * highlight still running when the user navigates away would scroll and highlight again on return.
+ * The paginator outlives the list, so the signal is cleared on unmount. Otherwise a highlight
+ * still running when the user navigates away would scroll and highlight again on return.
+ *
+ * @param paginator The channel's or the open thread's paginator.
+ * @returns `focusedMessageId`, `focusToken` and `goToMessage`, which jumps to a message by ID.
  */
 export const useMessageListFocus = (paginator?: MessagePaginator) => {
   const { focusedMessageId, focusToken } =

package/src/components/MessageList/hooks/useMessageListLiveState.ts

@@ -32,7 +32,12 @@ type UseMessageListLiveStateParams = {
  * A channel list also marks the channel read when a message arrives in that state. A thread list
  * leaves the channel's flags alone: the channel list underneath it keeps reporting its own.
  *
- * Returns the callback the list calls with the messages currently on screen.
+ * @param params.channel The channel the list belongs to.
+ * @param params.markRead Marks the channel read.
+ * @param params.paginator The list's paginator.
+ * @param params.thread The thread this list renders, if any.
+ * @param params.userId The current user's ID.
+ * @returns A callback the list calls with the messages currently on screen.
  */
 export const useMessageListLiveState = ({
   channel,

package/src/components/MessageList/hooks/useMessageListPagination.ts

@@ -12,10 +12,13 @@ const loadingSelector = (state: { isLoading: boolean; items?: unknown[] }) => ({
 /**
  * Paging for a message list over `paginator`, the channel's or the open thread's.
  *
- * `loadMore` fetches older messages and `loadMoreRecent` newer ones. The paginator ignores a request
- * while it is already loading or when that end has nothing more, so the list can call these on every
- * scroll event that reaches an edge. A request first waits for one in flight in the other direction,
- * so the two never shift the scroll position under each other.
+ * `loadMore` fetches older messages and `loadMoreRecent` newer ones. A request is ignored while the
+ * paginator is loading or has nothing more at that end, so the list can call these on every scroll
+ * event that reaches an edge. A request first waits for one in flight in the other direction, so
+ * the two never shift the scroll position under each other.
+ *
+ * @param paginator The channel's or the open thread's paginator.
+ * @returns The loading flags and the `loadMore` and `loadMoreRecent` callbacks.
  */
 export const useMessageListPagination = (paginator?: MessagePaginator) => {
   const { hasMessages, isLoading } = useStateStore(paginator?.state, loadingSelector) ?? {};

package/src/components/MessageList/hooks/useOwnUnreadCount.ts

@@ -8,6 +8,9 @@ import { useStateStore } from '../../../hooks/useStateStore';
 /**
  * The current user's unread message count in `channel`, kept current as reads arrive. `undefined`
  * when no channel is given, which also leaves the channel's state unsubscribed.
+ *
+ * @param channel The channel to count unread messages in.
+ * @returns The unread count, or `undefined` without a channel.
  */
 export const useOwnUnreadCount = (channel: Channel | undefined) => {
   const { client } = useChatContext();

package/src/components/MessageList/hooks/useScrollToBottomAccessibilityAction.ts

@@ -17,10 +17,9 @@ type AccessibilityActions = ViewProps['accessibilityActions'];
 type OnAccessibilityAction = ViewProps['onAccessibilityAction'];
 
 /**
- * Declared explicitly rather than inferred. Left to inference, TypeScript expands
- * `AccessibilityActionEvent` into its structural shape when emitting the declaration, and that
- * shape names `HostInstance`. Naming the props here keeps the emitted `.d.ts` referring to
- * `ViewProps[...]`, which resolves against whichever React Native the consumer actually has.
+ * Spelled out so the emitted `.d.ts` refers to `ViewProps[...]`, which resolves against the
+ * consumer's React Native. An inferred type expands `AccessibilityActionEvent` into a shape that
+ * names `HostInstance`.
  */
 export type UseScrollToBottomAccessibilityActionResult = {
   accessibilityActions: AccessibilityActions;

package/src/components/MessageList/hooks/useStickyHeaderDate.ts

@@ -6,8 +6,10 @@ import { convertTimestampToDate } from 'stream-chat';
 import { useStableCallback } from '../../../hooks';
 
 /**
- * The date the list's sticky header shows: the day of the topmost message on screen. Hidden once the
- * oldest message of the whole list is on screen, where the inline date separator says the same.
+ * The date the list's sticky header shows: the day of the topmost message on screen. Hidden once
+ * the oldest message of the whole list is on screen, where the inline date separator says the same.
+ *
+ * @returns `stickyHeaderDate` and `updateStickyHeaderDate`, which takes the topmost message.
  */
 export const useStickyHeaderDate = () => {
   const [stickyHeaderDate, setStickyHeaderDate] = useState<Date | undefined>();

package/src/components/MessageList/hooks/useTypingString.ts

@@ -21,10 +21,7 @@ export const useTypingString = () => {
   }
 
   if (typingUsernames.length > 1) {
-    /**
-     * Joins the multiple names with number after first name
-     * example: "Dan and Neil"
-     */
+    // The first name followed by the number of other typing users.
     return t(
       'messageList.typing.withMoreUsers.label',
       '{{ firstUser }} and {{ nonSelfUserLength }} more are typing',

package/src/components/MessageList/hooks/useTypingUsers.ts

@@ -9,11 +9,15 @@ import { filterTypingUsers } from '../utils/filterTypingUsers';
 const selector = (state: TypingUsersState) => ({ typing: state.typing });
 
 /**
- * Shared typing-users core. Takes `channel` (and an optional `threadId`) EXPLICITLY so it works both
- * inside a `<Channel>` provider (the message list) and outside one (channel-list preview rows, which
- * receive `channel` as a prop) — it deliberately never reads the channel/thread from context itself.
- * `client` comes from the always-present root `ChatContext`. Sourced reactively from the
- * `channel.state.typing` slice; own typing and other-thread typing are filtered out.
+ * The users typing in `channel`, without the current user, from `channel.state.typing`.
+ * With `threadId` only that thread's typing counts; without it, only the channel's own.
+ *
+ * The channel is a parameter rather than read from context, so this works outside a `<Channel>`
+ * provider, such as in channel preview rows.
+ *
+ * @param channel The channel to watch.
+ * @param threadId The thread to watch instead of the channel's main list.
+ * @returns The typing users.
  */
 export const useChannelTypingUsers = (channel: Channel, threadId?: string) => {
   const { client } = useChatContext();
@@ -23,8 +27,9 @@ export const useChannelTypingUsers = (channel: Channel, threadId?: string) => {
 };
 
 /**
- * In-channel typing users — reads the channel/thread from context (message-list usage). Thin wrapper
- * over {@link useChannelTypingUsers}.
+ * {@link useChannelTypingUsers} for the channel, and open thread if any, from context.
+ *
+ * @returns The typing users.
  */
 export const useTypingUsers = () => {
   const { channel } = useChannelContext();

package/src/components/MessageList/hooks/useUnreadNotificationVisibility.ts

@@ -15,8 +15,16 @@ type UseUnreadNotificationVisibilityParams = {
 };
 
 /**
- * Whether the "N new messages" notification is shown at the top of a channel list: the user has
- * scrolled up past the last message they read, and that message is no longer on screen.
+ * Tracks whether the unread notification is shown at the top of a channel's message list: the user
+ * has scrolled up past the last message they read, and that message is no longer on screen.
+ *
+ * @param params.attachmentPickerStore Hides the notification while the images picker is open.
+ * @param params.channel The channel the list belongs to.
+ * @param params.markRead Marks the channel read when the notification is closed.
+ * @param params.readEvents Whether the channel has read events enabled.
+ * @param params.userId The current user's ID.
+ * @returns `isUnreadNotificationOpen`, `onUnreadNotificationClose` (marks the channel read and
+ * hides the notification) and `updateUnreadNotification` (call it with the messages on screen).
  */
 export const useUnreadNotificationVisibility = ({
   attachmentPickerStore,

package/src/components/MessageList/utils/buildMessageListWithNeighbours.ts

@@ -7,16 +7,20 @@ export type MessageListItemWithNeighbours = {
 };
 
 /**
- * The stable identity of a message row, used both as the FlatList/FlashList render key and as the
- * neighbour-cache key. Those two must agree: if they diverge for the same message the cache stores
- * a row under one key while the list renders it under another, and memoisation silently never hits.
+ * The stable identity of a message row, used as both the list render key and the neighbour-cache
+ * key. The two must agree: otherwise the cache stores a row under one key while the list renders it
+ * under another, and memoization never hits.
+ *
+ * @param item The message of the row.
+ * @param index The position of the row, used when the message has neither an ID nor a timestamp.
+ * @returns The row key.
  */
 export const getMessageListItemCacheKey = (item: LocalMessage, index: number) => {
   if (item.id) {
     return item.id;
   }
-  // Nullish, not truthy: `created_at` is unix nanoseconds and `0` is a legitimate value (the
-  // epoch). Treating it as absent falls through to the index, which shifts as pages load.
+  // Nullish check: `created_at` is in unix nanoseconds and `0` is valid. The index fallback shifts
+  // as pages load.
   if (item.created_at != null) {
     return String(item.created_at);
   }

package/src/components/MessageList/utils/filterTypingUsers.ts

@@ -22,7 +22,7 @@ export const filterTypingUsers = ({ client, threadId, typing }: FilterTypingUser
       return;
     }
 
-    /** removes own typing events */
+    // Skip own typing events.
     if (client.user?.id === typingEvent.user?.id) {
       return;
     }
@@ -30,7 +30,7 @@ export const filterTypingUsers = ({ client, threadId, typing }: FilterTypingUser
     const isRegularEvent = !typingEvent.parent_id && !threadId;
     const isCurrentThreadEvent = typingEvent.parent_id === threadId;
 
-    /** filters different threads events */
+    // Skip events of other threads.
     if (!isRegularEvent && !isCurrentThreadEvent) {
       return;
     }

package/src/components/MessageList/utils/getGroupStyles.ts

@@ -16,7 +16,15 @@ export type MessageGroupStylesParams = {
 export type GroupStyle = '' | 'middle' | 'top' | 'bottom' | 'single';
 
 /**
- * Get the group styles for a message
+ * Returns the group style of a message: `top`, `bottom`, `middle` or `single`.
+ *
+ * @param params.message The message to style.
+ * @param params.previousMessage The message rendered before it.
+ * @param params.nextMessage The message rendered after it.
+ * @param params.maxTimeBetweenGroupedMessages Longest gap, in milliseconds, within a group.
+ * @param params.nextMessageDateSeparatorDate Date of the separator above the next message, if any.
+ * @param params.dateSeparatorDate Date of the separator above the message, if any.
+ * @returns An array holding the message's group style.
  */
 export const getGroupStyle = ({
   message,
@@ -35,7 +43,7 @@ export const getGroupStyle = ({
     previousMessage.type === 'system' ||
     previousMessage.type === 'error' ||
     userId !== previousMessage?.user?.id ||
-    // NOTE: This is needed for the group styles to work after the message separated by date.
+    // A date separator above the message starts a new group.
     dateSeparatorDate ||
     isEditedMessage(previousMessage);
 
@@ -49,22 +57,12 @@ export const getGroupStyle = ({
       nsToMs(nextMessage.created_at - message.created_at) > maxTimeBetweenGroupedMessages) ||
     isEditedMessage(message);
 
-  /**
-   * Add group styles key for top message
-   */
   if (isTopMessage) {
     groupStyles.push('top');
   }
 
-  /**
-   * Add group styles key for bottom message
-   */
-
   if (isBottomMessage) {
-    /**
-     * If the bottom message is also the top, or deleted, or an error,
-     * add the key for single message instead of bottom
-     */
+    // A message that is also the top, or an error, is `single` instead of `bottom`.
     if (isTopMessage || message.type === 'error') {
       groupStyles.splice(0, groupStyles.length);
       groupStyles.push('single');
@@ -73,10 +71,7 @@ export const getGroupStyle = ({
     }
   }
 
-  /**
-   * Add the key for all non top or bottom messages, if the message is
-   * deleted or an error add the key for single otherwise middle
-   */
+  // Neither top nor bottom: `middle`, or `single` for an error.
   if (!isTopMessage && !isBottomMessage) {
     if (message.type === 'error') {
       groupStyles.splice(0, groupStyles.length);

package/src/components/MessageMenu/EmojiPickerList.tsx

@@ -51,7 +51,7 @@ export const EmojiPickerList = ({
   renderFullInitially = true,
 }: {
   onSelectReaction: (unicode: string) => void;
-  // whether all of the items should be rendered initially or not
+  // Whether every emoji renders on the first pass. Defaults to true.
   renderFullInitially?: boolean;
 }) => {
   const styles = useStyles();
@@ -76,11 +76,8 @@ export const EmojiPickerList = ({
       keyExtractor={emojiKeyExtractor}
       numColumns={7}
       removeClippedSubviews={false}
-      // This is sort of needed in some instances, because when virtualization
-      // kicks in it messes with the animations, as more native views get their
-      // bindings to JS. For the reactions specifically it does not really
-      // matter as they aren't too heavy - but we should anyway revisit
-      // this in the future.
+      // Needed in some cases: virtualization interferes with the animations, as more native views
+      // get bound to JS. Reactions are light, so rendering them all up front is cheap.
       initialNumToRender={renderFullInitially ? emojis.length : undefined}
       renderItem={renderEmoji}
     />

package/src/components/MessageMenu/MessageActionList.tsx

@@ -11,14 +11,7 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { primitives } from '../../theme';
 
 export type MessageActionListProps = {
-  /**
-   * Function to close the message actions bottom sheet
-   * @returns void
-   */
-  dismissOverlay?: () => void;
-  /**
-   * An array of message actions to render
-   */
+  /** The actions to render. */
   messageActions?: MessageActionType[];
 };
 
@@ -62,7 +55,7 @@ export const MessageActionList = (props: MessageActionListProps) => {
       {destructiveActions?.map((messageAction, index) => (
         <MessageActionListItem
           key={messageAction.title}
-          {...{ ...messageAction, index, length: standardActions.length }}
+          {...{ ...messageAction, index, length: destructiveActions.length }}
         />
       ))}
     </ScrollView>

package/src/components/MessageMenu/MessageActionListItem.tsx

@@ -28,34 +28,21 @@ export type ActionType =
   | 'unpinMessage';
 
 export type MessageActionType = {
-  /**
-   * Callback when user presses the action button.
-   */
+  /** Called when the action button is pressed. */
   action: () => void;
-  /**
-   * Type of the action performed.
-   * Eg: 'banUser', 'blockUser', 'copyMessage', 'deleteMessage', 'editMessage', 'flagMessage', 'markUnread , 'muteUser', 'pinMessage', 'selectReaction', 'reply', 'retry', 'quotedReply', 'threadReply', 'unpinMessage'
-   */
+  /** The type of the action: an `ActionType`, or a custom string. */
   actionType: ActionType | string;
-  /**
-   * Title for action button.
-   */
+  /** Title of the action button. */
   title: string;
-  /**
-   * Element to render as icon for action button.
-   */
+  /** Icon of the action button. */
   icon?: React.ReactElement;
-  /**
-   * Styles for underlying Text component of action title.
-   */
+  /** Styles for the `Text` of the action title. */
   titleStyle?: StyleProp<TextStyle>;
 
   type: 'standard' | 'destructive';
 };
 
-/**
- * MessageActionListItem - A high-level component that implements all the logic required for a `MessageAction` in a `MessageActionList`
- */
+/** Props of the item that renders a `MessageActionType` in a `MessageActionList`. */
 export type MessageActionListItemProps = MessageActionType;
 
 export const MessageActionListItem = (props: MessageActionListItemProps) => {

package/src/components/MessageMenu/MessageActionListWithActions.tsx

@@ -11,8 +11,8 @@ import { useMessageOperations } from '../Message/hooks/useMessageOperations';
 import { messageActions as defaultMessageActions } from '../Message/utils/messageActions';
 
 /**
- * The action menu's list. Lives inside the open overlay, so the actions are only built while a
- * menu is open rather than on every render of every message.
+ * Renders the action list of the open message menu. The actions are built only while a menu is
+ * open, not on every message render.
  */
 export const MessageActionListWithActions = () => {
   const { MessageActionList } = useComponentsContext();
@@ -65,5 +65,5 @@ export const MessageActionListWithActions = () => {
           updateMessage,
         });
 
-  return <MessageActionList dismissOverlay={dismissOverlay} messageActions={messageActions} />;
+  return <MessageActionList messageActions={messageActions} />;
 };

package/src/components/MessageMenu/MessageReactionPicker.tsx

@@ -135,9 +135,7 @@ export const EmojiViewerButton = ({
   );
 };
 
-/**
- * MessageReactionPicker - A high level component which implements all the logic required for a message overlay reaction list
- */
+/** Renders the reaction picker of the message overlay. */
 export const MessageReactionPicker = (props: MessageReactionPickerProps) => {
   const { dismissOverlay, handleReaction } = props;
   const {

package/src/components/MessageMenu/MessageUserReactions.tsx

@@ -43,13 +43,9 @@ const getItemLayout = (_, index: number) => ({
 
 export type MessageUserReactionsProps = Partial<Pick<MessagesContextValue, 'supportedReactions'>> &
   Partial<Pick<MessageContextValue, 'message'>> & {
-    /**
-     * An array of reactions
-     */
+    /** Reactions to list, used instead of the fetched ones. */
     reactions?: Reaction[];
-    /**
-     * The selected reaction
-     */
+    /** The reaction type selected initially. */
     selectedReaction?: string;
   };
 

package/src/components/MessageMenu/MessageUserReactionsAvatar.tsx

@@ -7,9 +7,7 @@ import { getInitialsFromName } from '../../utils/utils';
 import { Avatar, AvatarProps } from '../ui';
 
 export type MessageUserReactionsAvatarProps = {
-  /**
-   * The reaction object
-   */
+  /** The reaction whose user's avatar is shown. */
   reaction: Reaction;
 } & Partial<Pick<AvatarProps, 'size'>>;
 

package/src/components/MessageMenu/MessageUserReactionsItem.tsx

@@ -14,13 +14,9 @@ import type { Reaction } from '../../types/types';
 import { ReactionData } from '../../utils/utils';
 
 export type MessageUserReactionsItemProps = {
-  /**
-   * The reaction object
-   */
+  /** The reaction to show. */
   reaction: Reaction;
-  /**
-   * An array of supported reactions
-   */
+  /** Supported reactions, used to look up the icon of the reaction type. */
   supportedReactions: ReactionData[];
 };
 

package/src/components/MessageMenu/ReactionButton.tsx

@@ -6,22 +6,16 @@ import { IconProps } from '../../icons';
 import { Button, ButtonProps } from '../ui';
 
 export type ReactionButtonProps = {
-  /**
-   * Icon to display for the reaction button
-   */
+  /** Icon of the reaction. */
   Icon: React.ComponentType<IconProps>;
-  /**
-   * Whether the reaction button is selected
-   */
+  /** Whether the button is selected. */
   selected: boolean;
-  /**
-   * The type of reaction
-   */
+  /** The reaction type, passed to `onPress`. */
   type: string;
   /**
-   * Function to call when the reaction button is pressed
-   * @param reactionType
-   * @returns
+   * Called when the button is pressed.
+   *
+   * @param reactionType The `type` of the pressed button.
    */
   onPress?: (reactionType: string) => void;
   count?: string;

package/src/components/MessageMenu/__tests__/MessageActionList.test.tsx

@@ -6,6 +6,7 @@ import { Text } from 'react-native';
 
 import { render } from '@testing-library/react-native';
 
+import { WithComponents } from '../../../contexts/componentsContext/ComponentsContext';
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
 import { MessageActionList } from '../MessageActionList';
@@ -53,4 +54,35 @@ describe('MessageActionList', () => {
     expect(getByText('Copy Message')).toBeTruthy();
     expect(getByText('Delete Message')).toBeTruthy();
   });
+
+  it('passes each group its own index and length', () => {
+    const itemProps: Record<string, unknown>[] = [];
+    const RecordingItem = (props: MessageActionListItemProps) => {
+      itemProps.push(props as unknown as Record<string, unknown>);
+      return <Text>{props.title}</Text>;
+    };
+    const action = jest.fn();
+
+    render(
+      <WithComponents overrides={{ MessageActionListItem: RecordingItem }}>
+        <ThemeProvider theme={defaultTheme}>
+          <MessageActionList
+            messageActions={[
+              { action, actionType: 'copyMessage', title: 'Copy', type: 'standard' },
+              { action, actionType: 'reply', title: 'Reply', type: 'standard' },
+              { action, actionType: 'editMessage', title: 'Edit', type: 'standard' },
+              { action, actionType: 'deleteMessage', title: 'Delete', type: 'destructive' },
+            ]}
+          />
+        </ThemeProvider>
+      </WithComponents>,
+    );
+
+    expect(itemProps.map(({ index, length, title }) => ({ index, length, title }))).toEqual([
+      { index: 0, length: 3, title: 'Copy' },
+      { index: 1, length: 3, title: 'Reply' },
+      { index: 2, length: 3, title: 'Edit' },
+      { index: 0, length: 1, title: 'Delete' },
+    ]);
+  });
 });

package/src/components/Notifications/Notification.tsx

@@ -24,10 +24,15 @@ export type NotificationIconProps = {
   notification: NotificationType;
 };
 
-/** Visual variant resolved from notification severity. Notifications without severity use `default`. */
+/** Visual variant resolved from severity. Notifications without severity use `default`. */
 export type NotificationVariant = 'default' | NotificationSeverity;
 
-/** Resolves the visual variant used by the default notification renderer. */
+/**
+ * Resolves the visual variant used by the default notification renderer.
+ *
+ * @param notification The notification to render.
+ * @returns The variant of its severity, or `default` without one.
+ */
 export const getNotificationVariant = (notification: NotificationType): NotificationVariant =>
   notification.severity ?? 'default';
 
@@ -71,7 +76,7 @@ export type NotificationProps = {
   Icon?: React.ComponentType<NotificationIconProps>;
   /** Called instead of the default notification removal behavior. */
   onDismiss?: () => void;
-  /** Forces a dismiss button for transient notifications. Persistent notifications always show one. */
+  /** Forces a dismiss button on transient notifications. Persistent ones always show one. */
   showClose?: boolean;
   /** Reserved for custom animated notification implementations. */
   transitionState?: NotificationTransitionState;

package/src/components/Notifications/NotificationList.tsx

@@ -28,7 +28,7 @@ export type NotificationListProps = {
   enterFrom?: NotificationListEnterFrom;
   /** Additional per-list filter applied after target filtering. */
   filter?: NotificationListFilter;
-  /** Exact notification host id. Use together with `panel` when rendering outside a target provider. */
+  /** Exact notification host ID. Use together with `panel` outside a target provider. */
   hostId?: string;
   /** Target panel consumed by this list. Defaults to the nearest `NotificationTargetProvider`. */
   panel?: NotificationTargetPanel;