stream-chat-react-native-core 9.0.0-beta.15 → 9.0.0-beta.17

package/src/components/ChannelPreview/__tests__/ChannelSwipableWrapper.test.tsx

@@ -0,0 +1,201 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+import { act, render } from '@testing-library/react-native';
+import type { Channel } from 'stream-chat';
+
+import type { ChannelActionItem } from '../../ChannelList/hooks/useChannelActionItems';
+import * as ChannelActionItemsModule from '../../ChannelList/hooks/useChannelActionItems';
+import * as ChannelActionsModule from '../../ChannelList/hooks/useChannelActions';
+import { ChannelSwipableWrapper } from '../ChannelSwipableWrapper';
+import * as UseIsChannelMutedModule from '../hooks/useIsChannelMuted';
+
+const rightActionsProbe = {
+  items: [] as Array<{ action: () => void; id: string }>,
+};
+
+const mockSwipableWrapper = jest.fn(
+  ({
+    children,
+    swipableProps,
+  }: React.PropsWithChildren<{
+    swipableProps?: { renderRightActions?: (...args: never[]) => void };
+  }>) => {
+    const rightActions = swipableProps?.renderRightActions?.({} as never, {} as never);
+    return (
+      <>
+        {children}
+        {rightActions}
+      </>
+    );
+  },
+);
+
+jest.mock('../../../contexts', () => ({
+  useTheme: () => ({
+    theme: {
+      semantics: {
+        accentPrimary: '#00f',
+        backgroundCoreSurfaceDefault: '#fff',
+        textOnAccent: '#000',
+        textPrimary: '#111',
+      },
+    },
+  }),
+}));
+
+jest.mock('../../../contexts/swipeableContext/SwipeRegistryContext', () => ({
+  useSwipeRegistryContext: () => ({
+    closeAll: jest.fn(),
+  }),
+}));
+
+jest.mock('../../UIComponents', () => ({
+  BottomSheetModal: ({ children }: React.PropsWithChildren) => <>{children}</>,
+  RightActions: ({ items }: { items: Array<{ action: () => void; id: string }> }) => {
+    rightActionsProbe.items = items;
+    return null;
+  },
+  SwipableWrapper: (...args: unknown[]) => mockSwipableWrapper(...args),
+}));
+
+describe('ChannelSwipableWrapper', () => {
+  const channel = { cid: 'messaging:test-channel', id: 'test-channel' } as Channel;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    rightActionsProbe.items = [];
+  });
+
+  it('uses channel mute for direct-channel swipe actions and keeps mute user in the sheet', () => {
+    const muteChannel = jest.fn();
+    const unmuteChannel = jest.fn();
+    const customBottomSheet = jest.fn(() => null);
+    const items: ChannelActionItem[] = [
+      {
+        Icon: () => null,
+        action: jest.fn(),
+        id: 'mute',
+        label: 'Mute User',
+        placement: 'sheet',
+        type: 'standard',
+      },
+      {
+        Icon: () => null,
+        action: jest.fn(),
+        id: 'archive',
+        label: 'Archive Chat',
+        placement: 'sheet',
+        type: 'standard',
+      },
+    ];
+
+    jest.spyOn(ChannelActionsModule, 'useChannelActions').mockReturnValue({
+      archive: jest.fn(),
+      blockUser: jest.fn(),
+      deleteChannel: jest.fn(),
+      leave: jest.fn(),
+      muteChannel,
+      muteUser: jest.fn(),
+      pin: jest.fn(),
+      unarchive: jest.fn(),
+      unblockUser: jest.fn(),
+      unmuteChannel,
+      unmuteUser: jest.fn(),
+      unpin: jest.fn(),
+    });
+    jest.spyOn(ChannelActionItemsModule, 'useChannelActionItems').mockReturnValue(items);
+    jest.spyOn(UseIsChannelMutedModule, 'useIsChannelMuted').mockReturnValue({
+      createdAt: null,
+      expiresAt: null,
+      muted: false,
+    });
+
+    render(
+      <ChannelSwipableWrapper channel={channel} ChannelDetailsBottomSheet={customBottomSheet}>
+        <Text>child</Text>
+      </ChannelSwipableWrapper>,
+    );
+
+    expect(customBottomSheet).toHaveBeenCalledWith(
+      expect.objectContaining({
+        channel,
+        items,
+      }),
+      undefined,
+    );
+    expect(rightActionsProbe.items.map((item) => item.id)).toEqual(['openSheet', 'mute']);
+
+    act(() => {
+      rightActionsProbe.items[1].action();
+    });
+
+    expect(muteChannel).toHaveBeenCalledTimes(1);
+    expect(unmuteChannel).not.toHaveBeenCalled();
+  });
+
+  it('removes mute group from the sheet while keeping mute as the quick swipe action', () => {
+    const muteChannel = jest.fn();
+    const customBottomSheet = jest.fn(() => null);
+    const muteItem = {
+      Icon: () => null,
+      action: jest.fn(),
+      id: 'mute',
+      label: 'Mute Group',
+      placement: 'swipe',
+      type: 'standard',
+    } as const satisfies ChannelActionItem;
+    const archiveItem = {
+      Icon: () => null,
+      action: jest.fn(),
+      id: 'archive',
+      label: 'Archive Group',
+      placement: 'both',
+      type: 'standard',
+    } as const satisfies ChannelActionItem;
+
+    jest.spyOn(ChannelActionsModule, 'useChannelActions').mockReturnValue({
+      archive: jest.fn(),
+      blockUser: jest.fn(),
+      deleteChannel: jest.fn(),
+      leave: jest.fn(),
+      muteChannel,
+      muteUser: jest.fn(),
+      pin: jest.fn(),
+      unarchive: jest.fn(),
+      unblockUser: jest.fn(),
+      unmuteChannel: jest.fn(),
+      unmuteUser: jest.fn(),
+      unpin: jest.fn(),
+    });
+    jest
+      .spyOn(ChannelActionItemsModule, 'useChannelActionItems')
+      .mockReturnValue([muteItem, archiveItem]);
+    jest.spyOn(UseIsChannelMutedModule, 'useIsChannelMuted').mockReturnValue({
+      createdAt: null,
+      expiresAt: null,
+      muted: false,
+    });
+
+    render(
+      <ChannelSwipableWrapper channel={channel} ChannelDetailsBottomSheet={customBottomSheet}>
+        <Text>child</Text>
+      </ChannelSwipableWrapper>,
+    );
+
+    expect(customBottomSheet).toHaveBeenCalledWith(
+      expect.objectContaining({
+        channel,
+        items: [archiveItem],
+      }),
+      undefined,
+    );
+    expect(rightActionsProbe.items.map((item) => item.id)).toEqual(['openSheet', 'mute']);
+
+    act(() => {
+      rightActionsProbe.items[1].action();
+    });
+
+    expect(muteChannel).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/KeyboardCompatibleView/KeyboardCompatibleView.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import {
+  AccessibilityInfo,
   AppState,
   AppStateStatus,
   Dimensions,
@@ -39,7 +40,7 @@ export class KeyboardCompatibleView extends React.Component<
     KeyboardAvoidingViewProps,
     'behavior' | 'enabled' | 'keyboardVerticalOffset'
   > = {
-    behavior: Platform.OS === 'ios' ? 'padding' : 'position',
+    behavior: 'padding',
     enabled: true,
     keyboardVerticalOffset: Platform.OS === 'ios' ? 86.5 : -300, // default MessageComposer height
   };
@@ -62,35 +63,40 @@ export class KeyboardCompatibleView extends React.Component<
     this.viewRef = React.createRef();
   }
 
-  _relativeKeyboardHeight(keyboardFrame: KeyboardMetrics) {
+  async _relativeKeyboardHeight(keyboardFrame: KeyboardMetrics): Promise<number> {
     const frame = this._frame;
-    /**
-     * With iOS 14 & Reduce Motion > Prefer Cross-Fade Transitions enabled, the keyboard position
-     * height is reported differently (0 instead of Y position value) which caused the view to take full height
-     * of the screen.
-     */
-    if (!frame || !keyboardFrame || keyboardFrame.screenY === 0) {
+    if (!frame || !keyboardFrame) {
+      return 0;
+    }
+
+    if (
+      Platform.OS === 'ios' &&
+      keyboardFrame.screenY === 0 &&
+      (await AccessibilityInfo.prefersCrossFadeTransitions())
+    ) {
       return 0;
     }
 
     const keyboardY = keyboardFrame.screenY - (this.props.keyboardVerticalOffset ?? 0);
-    const relativeHeight = frame.y + frame.height - keyboardY;
 
-    /**
-     * When the StatusBar is translucent there is an issue
-     * where the relative keyboard height is returned incorrectly
-     * instead of 0 when closed.
-     */
+    if (this.props.behavior === 'height') {
+      return Math.max(this.state.bottom + frame.y + frame.height - keyboardY, 0);
+    }
+
+    // Calculate the displacement needed for the view such that it
+    // no longer overlaps with the keyboard
+    const relativeHeight = Math.max(frame.y + frame.height - keyboardY, 0);
+
     if (Platform.OS === 'android') {
       const barHeights = Dimensions.get('screen').height - Dimensions.get('window').height;
-      if (relativeHeight <= Math.max(barHeights, StatusBar.currentHeight ?? 0)) {
+      const systemInsetFloor = Math.max(barHeights, StatusBar.currentHeight ?? 0);
+
+      if (relativeHeight <= systemInsetFloor) {
         return 0;
       }
     }
 
-    // Calculate the displacement needed for the view such that it
-    // no longer overlaps with the keyboard
-    return Math.max(relativeHeight, 0);
+    return relativeHeight;
   }
 
   _onKeyboardChange: KeyboardEventListener = (event) => {
@@ -98,7 +104,12 @@ export class KeyboardCompatibleView extends React.Component<
     this._updateBottomIfNecessary();
   };
 
-  _onLayout: (event: LayoutChangeEvent) => void = (event) => {
+  _onKeyboardHide: KeyboardEventListener = () => {
+    this._keyboardEvent = null;
+    this._updateBottomIfNecessary();
+  };
+
+  _onLayout: (event: LayoutChangeEvent) => void = async (event) => {
     event.persist();
 
     const oldFrame = this._frame;
@@ -110,7 +121,7 @@ export class KeyboardCompatibleView extends React.Component<
 
     // update bottom height for the first time or when the height is changed
     if (!oldFrame || oldFrame.height !== this._frame.height) {
-      this._updateBottomIfNecessary();
+      await this._updateBottomIfNecessary();
     }
 
     if (this.props.onLayout) {
@@ -127,14 +138,14 @@ export class KeyboardCompatibleView extends React.Component<
     }
   };
 
-  _updateBottomIfNecessary = () => {
+  _updateBottomIfNecessary = async () => {
     if (this._keyboardEvent == null) {
       this._setBottom(0);
       return;
     }
 
     const { duration, easing, endCoordinates } = this._keyboardEvent;
-    const height = this._relativeKeyboardHeight(endCoordinates);
+    const height = await this._relativeKeyboardHeight(endCoordinates);
 
     if (this._bottom === height) {
       return;
@@ -142,7 +153,8 @@ export class KeyboardCompatibleView extends React.Component<
 
     this._setBottom(height);
 
-    if (duration && easing) {
+    const enabled = this.props.enabled ?? true;
+    if (enabled && duration && easing) {
       LayoutAnimation.configureNext({
         // We have to pass the duration equal to minimal accepted duration defined here: RCTLayoutAnimation.m
         duration: duration > 10 ? duration : 10,
@@ -169,11 +181,12 @@ export class KeyboardCompatibleView extends React.Component<
   setKeyboardListeners = () => {
     if (Platform.OS === 'ios') {
       this._subscriptions = [
-        Keyboard.addListener('keyboardWillChangeFrame', this._onKeyboardChange),
+        Keyboard.addListener('keyboardWillHide', this._onKeyboardHide),
+        Keyboard.addListener('keyboardWillShow', this._onKeyboardChange),
       ];
     } else {
       this._subscriptions = [
-        Keyboard.addListener('keyboardDidHide', this._onKeyboardChange),
+        Keyboard.addListener('keyboardDidHide', this._onKeyboardHide),
         Keyboard.addListener('keyboardDidShow', this._onKeyboardChange),
       ];
     }
@@ -218,6 +231,11 @@ export class KeyboardCompatibleView extends React.Component<
   }
 
   componentDidMount() {
+    if (!Keyboard.isVisible()) {
+      this._keyboardEvent = null;
+      this._setBottom(0);
+    }
+
     this._appStateSubscription = AppState.addEventListener('change', this._handleAppStateChange);
     this.setKeyboardListeners();
   }

package/src/components/KeyboardCompatibleView/KeyboardControllerAvoidingView.tsx

@@ -2,7 +2,6 @@ import React, { useEffect } from 'react';
 
 import {
   Keyboard,
-  Platform,
   KeyboardAvoidingViewProps as ReactNativeKeyboardAvoidingViewProps,
 } from 'react-native';
 
@@ -51,12 +50,7 @@ export const KeyboardCompatibleView = (props: KeyboardCompatibleViewProps) => {
       </KeyboardProvider>
     );
   }
-  const compatibleBehavior =
-    behavior === 'translate-with-padding'
-      ? Platform.OS === 'ios'
-        ? 'padding'
-        : 'position'
-      : behavior;
+  const compatibleBehavior = behavior === 'translate-with-padding' ? 'padding' : behavior;
 
   return (
     <KeyboardCompatibleViewDefault behavior={compatibleBehavior} {...rest}>

package/src/components/Message/utils/messageActions.ts

@@ -90,7 +90,7 @@ export const messageActions = ({
     actions.push(copyMessage);
   }
 
-  if (ownCapabilities.readEvents && !error && !isThreadMessage) {
+  if (ownCapabilities.readEvents && !error && !isThreadMessage && !isMyMessage) {
     actions.push(markUnread);
   }
 

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

@@ -87,6 +87,7 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli
             align="xMidYMid"
             bbHeight={20}
             bbWidth={20}
+            fill="none"
             focusable={false}
             height={20}
             meetOrSlice={0}
@@ -112,14 +113,10 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli
             width={20}
           >
             <RNSVGGroup
-              fill={
-                {
-                  "payload": 4278190080,
-                  "type": 0,
-                }
-              }
+              fill={null}
               propList={
                 [
+                  "fill",
                   "stroke",
                   "strokeWidth",
                 ]
@@ -144,6 +141,8 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli
                   [
                     "stroke",
                     "strokeWidth",
+                    "strokeLinecap",
+                    "strokeLinejoin",
                   ]
                 }
                 stroke={
@@ -152,6 +151,8 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli
                     "type": 0,
                   }
                 }
+                strokeLinecap={1}
+                strokeLinejoin={1}
                 strokeWidth={1.5}
               />
             </RNSVGGroup>
@@ -613,7 +614,7 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli
                     }
                     strokeLinecap={1}
                     strokeLinejoin={1}
-                    strokeWidth={1.2}
+                    strokeWidth={1.5}
                   />
                 </RNSVGGroup>
               </RNSVGSvgView>
@@ -748,6 +749,7 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli
                       [
                         "stroke",
                         "strokeWidth",
+                        "strokeLinecap",
                         "strokeLinejoin",
                       ]
                     }
@@ -757,6 +759,7 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli
                         "type": 0,
                       }
                     }
+                    strokeLinecap={1}
                     strokeLinejoin={1}
                     strokeWidth={1.5}
                   />
@@ -982,6 +985,7 @@ exports[`AttachButton should render a enabled AttachButton 1`] = `
             align="xMidYMid"
             bbHeight={20}
             bbWidth={20}
+            fill="none"
             focusable={false}
             height={20}
             meetOrSlice={0}
@@ -1007,14 +1011,10 @@ exports[`AttachButton should render a enabled AttachButton 1`] = `
             width={20}
           >
             <RNSVGGroup
-              fill={
-                {
-                  "payload": 4278190080,
-                  "type": 0,
-                }
-              }
+              fill={null}
               propList={
                 [
+                  "fill",
                   "stroke",
                   "strokeWidth",
                 ]
@@ -1039,6 +1039,8 @@ exports[`AttachButton should render a enabled AttachButton 1`] = `
                   [
                     "stroke",
                     "strokeWidth",
+                    "strokeLinecap",
+                    "strokeLinejoin",
                   ]
                 }
                 stroke={
@@ -1047,6 +1049,8 @@ exports[`AttachButton should render a enabled AttachButton 1`] = `
                     "type": 0,
                   }
                 }
+                strokeLinecap={1}
+                strokeLinejoin={1}
                 strokeWidth={1.5}
               />
             </RNSVGGroup>
@@ -1508,7 +1512,7 @@ exports[`AttachButton should render a enabled AttachButton 1`] = `
                     }
                     strokeLinecap={1}
                     strokeLinejoin={1}
-                    strokeWidth={1.2}
+                    strokeWidth={1.5}
                   />
                 </RNSVGGroup>
               </RNSVGSvgView>
@@ -1643,6 +1647,7 @@ exports[`AttachButton should render a enabled AttachButton 1`] = `
                       [
                         "stroke",
                         "strokeWidth",
+                        "strokeLinecap",
                         "strokeLinejoin",
                       ]
                     }
@@ -1652,6 +1657,7 @@ exports[`AttachButton should render a enabled AttachButton 1`] = `
                         "type": 0,
                       }
                     }
+                    strokeLinecap={1}
                     strokeLinejoin={1}
                     strokeWidth={1.5}
                   />
@@ -1877,6 +1883,7 @@ exports[`AttachButton should render an disabled AttachButton 1`] = `
             align="xMidYMid"
             bbHeight={20}
             bbWidth={20}
+            fill="none"
             focusable={false}
             height={20}
             meetOrSlice={0}
@@ -1902,14 +1909,10 @@ exports[`AttachButton should render an disabled AttachButton 1`] = `
             width={20}
           >
             <RNSVGGroup
-              fill={
-                {
-                  "payload": 4278190080,
-                  "type": 0,
-                }
-              }
+              fill={null}
               propList={
                 [
+                  "fill",
                   "stroke",
                   "strokeWidth",
                 ]
@@ -1934,6 +1937,8 @@ exports[`AttachButton should render an disabled AttachButton 1`] = `
                   [
                     "stroke",
                     "strokeWidth",
+                    "strokeLinecap",
+                    "strokeLinejoin",
                   ]
                 }
                 stroke={
@@ -1942,6 +1947,8 @@ exports[`AttachButton should render an disabled AttachButton 1`] = `
                     "type": 0,
                   }
                 }
+                strokeLinecap={1}
+                strokeLinejoin={1}
                 strokeWidth={1.5}
               />
             </RNSVGGroup>
@@ -2403,7 +2410,7 @@ exports[`AttachButton should render an disabled AttachButton 1`] = `
                     }
                     strokeLinecap={1}
                     strokeLinejoin={1}
-                    strokeWidth={1.2}
+                    strokeWidth={1.5}
                   />
                 </RNSVGGroup>
               </RNSVGSvgView>
@@ -2538,6 +2545,7 @@ exports[`AttachButton should render an disabled AttachButton 1`] = `
                       [
                         "stroke",
                         "strokeWidth",
+                        "strokeLinecap",
                         "strokeLinejoin",
                       ]
                     }
@@ -2547,6 +2555,7 @@ exports[`AttachButton should render an disabled AttachButton 1`] = `
                         "type": 0,
                       }
                     }
+                    strokeLinecap={1}
                     strokeLinejoin={1}
                     strokeWidth={1.5}
                   />

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

@@ -603,7 +603,7 @@ exports[`SendButton should render a SendButton 1`] = `
                     }
                     strokeLinecap={1}
                     strokeLinejoin={1}
-                    strokeWidth={1.2}
+                    strokeWidth={1.5}
                   />
                 </RNSVGGroup>
               </RNSVGSvgView>
@@ -738,6 +738,7 @@ exports[`SendButton should render a SendButton 1`] = `
                       [
                         "stroke",
                         "strokeWidth",
+                        "strokeLinecap",
                         "strokeLinejoin",
                       ]
                     }
@@ -747,6 +748,7 @@ exports[`SendButton should render a SendButton 1`] = `
                         "type": 0,
                       }
                     }
+                    strokeLinecap={1}
                     strokeLinejoin={1}
                     strokeWidth={1.5}
                   />
@@ -1488,7 +1490,7 @@ exports[`SendButton should render a disabled SendButton 1`] = `
                     }
                     strokeLinecap={1}
                     strokeLinejoin={1}
-                    strokeWidth={1.2}
+                    strokeWidth={1.5}
                   />
                 </RNSVGGroup>
               </RNSVGSvgView>
@@ -1623,6 +1625,7 @@ exports[`SendButton should render a disabled SendButton 1`] = `
                       [
                         "stroke",
                         "strokeWidth",
+                        "strokeLinecap",
                         "strokeLinejoin",
                       ]
                     }
@@ -1632,6 +1635,7 @@ exports[`SendButton should render a disabled SendButton 1`] = `
                         "type": 0,
                       }
                     }
+                    strokeLinecap={1}
                     strokeLinejoin={1}
                     strokeWidth={1.5}
                   />

package/src/components/MessageInput/components/AttachmentPreview/VideoAttachmentUploadPreview.tsx

@@ -75,7 +75,7 @@ export const VideoAttachmentMetadataPill = ({
 
   return durationLabel ? (
     <View style={styles.durationContainer}>
-      <Recorder height={12} width={12} pathFill={semantics.textInverse} />
+      <Recorder height={12} width={12} pathFill={semantics.textOnInverse} />
       <Text style={styles.durationText}>{durationLabel}</Text>
     </View>
   ) : null;
@@ -91,7 +91,7 @@ const useStyles = () => {
     },
   } = useTheme();
 
-  const { badgeBgInverse, textInverse } = semantics;
+  const { badgeBgInverse, textOnInverse } = semantics;
 
   return useMemo(
     () =>
@@ -111,11 +111,11 @@ const useStyles = () => {
         durationText: {
           fontSize: primitives.typographyFontSizeXxs,
           fontWeight: primitives.typographyFontWeightBold,
-          color: textInverse,
+          color: textOnInverse,
           marginLeft: primitives.spacingXxs,
           ...durationText,
         },
       }),
-    [badgeBgInverse, textInverse, durationContainer, durationText],
+    [badgeBgInverse, textOnInverse, durationContainer, durationText],
   );
 };

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

@@ -4,7 +4,7 @@ import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
 import Animated, { LinearTransition } from 'react-native-reanimated';
 
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
-import { ChevronTop } from '../../../../icons/chevron-down';
+import { ChevronUp } from '../../../../icons/chevron-up';
 import { Lock } from '../../../../icons/lock';
 import { Unlock } from '../../../../icons/unlock';
 import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager';
@@ -69,7 +69,7 @@ export const AudioRecordingLockIndicator = ({
         <Unlock stroke={semantics.textPrimary} height={20} width={20} {...lockIcon} />
       )}
       {!micLocked && (
-        <ChevronTop stroke={semantics.textPrimary} height={20} width={20} {...arrowUpIcon} />
+        <ChevronUp stroke={semantics.textPrimary} height={20} width={20} {...arrowUpIcon} />
       )}
     </Animated.View>
   );

package/src/components/MessageList/NetworkDownIndicator.tsx

@@ -52,7 +52,7 @@ const useStyles = () => {
         right: 0,
         top: 0,
         justifyContent: 'center',
-        backgroundColor: semantics.backgroundCoreSurface,
+        backgroundColor: semantics.backgroundCoreSurfaceDefault,
         ...errorNotification,
       },
       errorText: {