stream-chat-react-native-core 9.0.0-beta.3 → 9.0.0-beta.30

package/src/contexts/overlayContext/MessageOverlayHostLayer.tsx

@@ -1,5 +1,12 @@
 import React, { useEffect, useMemo } from 'react';
-import { Platform, Pressable, StyleSheet, useWindowDimensions, View } from 'react-native';
+import {
+  I18nManager,
+  Platform,
+  Pressable,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+} from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
   clamp,
@@ -31,11 +38,11 @@ const DefaultMessageOverlayBackground = () => {
   } = useTheme();
 
   return (
-    <View pointerEvents='none' style={StyleSheet.absoluteFillObject}>
+    <View pointerEvents='none' style={StyleSheet.absoluteFill}>
       <View
         pointerEvents='none'
         style={[
-          StyleSheet.absoluteFillObject,
+          StyleSheet.absoluteFill,
           {
             backgroundColor: semantics.badgeBgOverlay,
           },
@@ -150,70 +157,56 @@ export const MessageOverlayHostLayer = ({ BackgroundComponent }: MessageOverlayH
   });
 
   const topItemStyle = useAnimatedStyle(() => {
-    if (!topH.value) return { height: 0 };
+    if (!topH.value) return { opacity: 0, height: 0, width: 0 };
+    const translateY = isActive ? (closing ? closeCorrectionY.value : messageShiftY.value) : 0;
+    const horizontalPosition = I18nManager.isRTL ? { right: topH.value.x } : { left: topH.value.x };
     return {
       height: topH.value.h,
-      left: topH.value.x,
+      opacity: 1,
       position: 'absolute',
       top: topH.value.y,
-      width: topH.value.w,
-    };
-  });
-
-  const topItemTranslateStyle = useAnimatedStyle(() => {
-    const target = isActive ? (closing ? closeCorrectionY.value : messageShiftY.value) : 0;
-    return {
       transform: [
         { scale: backdrop.value },
-        { translateY: withSpring(target, { duration: DURATION }) },
+        { translateY: withSpring(translateY, { duration: DURATION }) },
       ],
+      width: topH.value.w,
+      ...horizontalPosition,
     };
-  }, [isActive, closing]);
+  });
 
   const bottomItemStyle = useAnimatedStyle(() => {
-    if (!bottomH.value) return { height: 0 };
+    if (!bottomH.value) return { opacity: 0, height: 0, width: 0 };
+    const translateY = isActive ? (closing ? closeCorrectionY.value : bottomShiftY.value) : 0;
+    const horizontalPosition = I18nManager.isRTL
+      ? { right: bottomH.value.x }
+      : { left: bottomH.value.x };
     return {
       height: bottomH.value.h,
-      left: bottomH.value.x,
+      opacity: 1,
       position: 'absolute',
       top: bottomH.value.y,
-      width: bottomH.value.w,
-    };
-  });
-
-  const bottomItemTranslateStyle = useAnimatedStyle(() => {
-    const target = isActive ? (closing ? closeCorrectionY.value : bottomShiftY.value) : 0;
-    return {
       transform: [
         { scale: backdrop.value },
-        { translateY: withSpring(target, { duration: DURATION }) },
+        { translateY: withSpring(translateY, { duration: DURATION }) },
       ],
+      width: bottomH.value.w,
+      ...horizontalPosition,
     };
-  }, [isActive, closing]);
+  });
 
   const hostStyle = useAnimatedStyle(() => {
     if (!messageH.value) return { height: 0 };
+    const translateY = isActive ? (closing ? closeCorrectionY.value : messageShiftY.value) : 0;
     return {
       height: messageH.value.h,
       left: messageH.value.x,
       position: 'absolute',
       top: messageH.value.y,
+      transform: [{ translateY: withSpring(translateY, { duration: DURATION }) }],
       width: messageH.value.w,
     };
   });
 
-  const hostTranslateStyle = useAnimatedStyle(() => {
-    const target = isActive ? (closing ? closeCorrectionY.value : messageShiftY.value) : 0;
-
-    return {
-      transform: [
-        {
-          translateY: withSpring(target, { duration: DURATION }),
-        },
-      ],
-    };
-  }, [isActive, closing]);
-
   const tap = useMemo(
     () =>
       Gesture.Tap()
@@ -254,10 +247,7 @@ export const MessageOverlayHostLayer = ({ BackgroundComponent }: MessageOverlayH
     <GestureDetector gesture={tap}>
       <View pointerEvents='box-none' style={StyleSheet.absoluteFill}>
         {isActive ? (
-          <Animated.View
-            pointerEvents='none'
-            style={[StyleSheet.absoluteFillObject, backdropStyle]}
-          >
+          <Animated.View pointerEvents='none' style={[StyleSheet.absoluteFill, backdropStyle]}>
             <OverlayBackground />
           </Animated.View>
         ) : null}
@@ -266,28 +256,25 @@ export const MessageOverlayHostLayer = ({ BackgroundComponent }: MessageOverlayH
           {isActive ? (
             <Pressable
               onPress={closeOverlay}
-              style={StyleSheet.absoluteFillObject}
+              style={StyleSheet.absoluteFill}
               testID='message-overlay-backdrop'
             />
           ) : null}
 
-          <Animated.View style={[topItemStyle, topItemTranslateStyle]} testID='message-overlay-top'>
-            <PortalHost name='top-item' style={StyleSheet.absoluteFillObject} />
+          <Animated.View style={topItemStyle} testID='message-overlay-top'>
+            <PortalHost name='top-item' style={styles.absoluteFill} />
           </Animated.View>
 
           <Animated.View
             pointerEvents='box-none'
-            style={[hostStyle, hostTranslateStyle]}
+            style={hostStyle}
             testID='message-overlay-message'
           >
-            <PortalHost name='message-overlay' style={StyleSheet.absoluteFillObject} />
+            <PortalHost name='message-overlay' style={styles.absoluteFill} />
           </Animated.View>
 
-          <Animated.View
-            style={[bottomItemStyle, bottomItemTranslateStyle]}
-            testID='message-overlay-bottom'
-          >
-            <PortalHost name='bottom-item' style={StyleSheet.absoluteFillObject} />
+          <Animated.View style={bottomItemStyle} testID='message-overlay-bottom'>
+            <PortalHost name='bottom-item' style={styles.absoluteFill} />
           </Animated.View>
         </View>
 
@@ -296,3 +283,13 @@ export const MessageOverlayHostLayer = ({ BackgroundComponent }: MessageOverlayH
     </GestureDetector>
   );
 };
+
+const styles = StyleSheet.create({
+  absoluteFill: {
+    bottom: 0,
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+  },
+});

package/src/contexts/overlayContext/__tests__/MessageOverlayHostLayer.test.tsx

@@ -75,6 +75,12 @@ jest.mock('react-native-reanimated', () => {
     },
     clamp: (value: number, min: number, max: number) => Math.min(Math.max(value, min), max),
     runOnJS: (fn: (...args: unknown[]) => unknown) => fn,
+    useAnimatedReaction: (
+      prepare: () => unknown,
+      react: (current: unknown, previous: unknown) => void,
+    ) => {
+      react(prepare(), undefined);
+    },
     useAnimatedStyle: (updater: () => unknown) => updater(),
     useDerivedValue: (updater: () => unknown) => ({ value: updater() }),
     useSharedValue: useStableSharedValue,

package/src/contexts/themeContext/utils/theme.ts

@@ -107,6 +107,7 @@ export type Theme = {
     bottomSheetContentContainer: ViewStyle;
     durationText: TextStyle;
     content: {
+      actionContainer: ViewStyle;
       container: ViewStyle;
       infoContainer: ViewStyle;
       text: TextStyle;
@@ -238,6 +239,7 @@ export type Theme = {
     };
     messagePreview: {
       container: ViewStyle;
+      draftText: TextStyle;
       subtitle: TextStyle;
     };
   };
@@ -583,6 +585,10 @@ export type Theme = {
   };
   messageItemView: {
     blockedMessageContainer: ViewStyle;
+    bubbleContentContainer: ViewStyle;
+    bubbleErrorContainer: ViewStyle;
+    bubbleReactionListTopContainer: ViewStyle;
+    bubbleWrapper: ViewStyle;
     actions: {
       button: ViewStyle & {
         defaultBackgroundColor?: ViewStyle['backgroundColor'];
@@ -635,7 +641,6 @@ export type Theme = {
       textContainer: ViewStyle & {
         onlyEmojiMarkdown: MarkdownStyle;
       };
-      wrapper: ViewStyle;
       timestampText?: TextStyle;
     };
     deleted: {
@@ -728,12 +733,6 @@ export type Theme = {
       container: ViewStyle;
       text: TextStyle;
     };
-    bubble: {
-      reactionListTopContainer: ViewStyle;
-      contentContainer: ViewStyle;
-      wrapper: ViewStyle;
-      errorContainer: ViewStyle;
-    };
     pinnedHeader: {
       container: ViewStyle;
       label: TextStyle;
@@ -823,6 +822,7 @@ export type Theme = {
         container: ViewStyle;
         infoContainer: ViewStyle;
         userInfoContainer: ViewStyle;
+        wrapper: ViewStyle;
       };
     };
     button: { container: ViewStyle; text: TextStyle };
@@ -991,6 +991,7 @@ export type Theme = {
     unreadBubbleWrapper: ViewStyle;
     messagePreview: {
       container: ViewStyle;
+      draftText: TextStyle;
       subtitle: TextStyle;
     };
     messagePreviewDeliveryStatus: {
@@ -1029,6 +1030,7 @@ export const defaultTheme: Theme = {
     bottomSheetContentContainer: {},
     durationText: {},
     content: {
+      actionContainer: {},
       container: {},
       infoContainer: {},
       text: {},
@@ -1169,6 +1171,7 @@ export const defaultTheme: Theme = {
     wrapper: {},
     messagePreview: {
       container: {},
+      draftText: {},
       subtitle: {},
     },
   },
@@ -1491,6 +1494,10 @@ export const defaultTheme: Theme = {
   },
   messageItemView: {
     blockedMessageContainer: {},
+    bubbleContentContainer: {},
+    bubbleErrorContainer: {},
+    bubbleReactionListTopContainer: {},
+    bubbleWrapper: {},
     actions: {
       button: {},
       buttonText: {},
@@ -1560,7 +1567,6 @@ export const defaultTheme: Theme = {
         onlyEmojiMarkdown: { text: { fontSize: 50 } },
       },
       timestampText: {},
-      wrapper: {},
     },
     deleted: {
       containerInner: {},
@@ -1635,12 +1641,6 @@ export const defaultTheme: Theme = {
       container: {},
       text: {},
     },
-    bubble: {
-      reactionListTopContainer: {},
-      contentContainer: {},
-      wrapper: {},
-      errorContainer: {},
-    },
     messageGroupedSingleOrBottomContainer: {},
     messageGroupedTopContainer: {},
     pinnedHeader: {
@@ -1732,6 +1732,7 @@ export const defaultTheme: Theme = {
         container: {},
         infoContainer: {},
         userInfoContainer: {},
+        wrapper: {},
       },
     },
     button: { container: {}, text: {} },
@@ -1897,6 +1898,7 @@ export const defaultTheme: Theme = {
     messageRepliesText: {},
     messagePreview: {
       container: {},
+      draftText: {},
       subtitle: {},
     },
     messagePreviewDeliveryStatus: {

package/src/contexts/threadsContext/ThreadListItemContext.tsx

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
-import { Channel, LocalMessage, Thread } from 'stream-chat';
+import { Channel, DraftMessage, LocalMessage, Thread } from 'stream-chat';
 
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
@@ -8,6 +8,7 @@ export type ThreadListItemContextValue = {
   channel: Channel;
   dateString: string | number | undefined;
   deletedAtDateString: string | number | undefined;
+  draftMessage?: DraftMessage;
   lastReply: LocalMessage | undefined;
   ownUnreadMessageCount: number;
   parentMessage: LocalMessage | undefined;

package/src/hooks/index.ts

@@ -7,8 +7,10 @@ export * from './useStableCallback';
 export * from './useLoadingImage';
 export * from './useMessageReminder';
 export * from './useQueryReminders';
+export * from './useAfterKeyboardOpenCallback';
 export * from './useClientNotifications';
 export * from './useInAppNotificationsState';
+export * from './usePortalSettledCallback';
 export * from './useRAFCoalescedValue';
 export * from './useAudioPlayerControl';
 export * from './useAttachmentPickerState';

package/src/hooks/messagePreview/useMessagePreviewIcon.tsx

@@ -2,14 +2,14 @@ import { DraftMessage, LocalMessage, MessageResponse } from 'stream-chat';
 
 import { useGroupedAttachments } from '../../hooks/messagePreview/useGroupedAttachments';
 
-import { CircleBan } from '../../icons/CircleBan';
-import { File } from '../../icons/File';
-import { Link } from '../../icons/Link';
-import { MapPin } from '../../icons/MapPin';
-import { Mic } from '../../icons/Mic';
-import { PhotoIcon } from '../../icons/PhotoIcon';
-import { PollIcon } from '../../icons/PollIcon';
-import { VideoIcon } from '../../icons/VideoIcon';
+import { File } from '../../icons/file';
+import { PhotoIcon } from '../../icons/image';
+import { Link } from '../../icons/link';
+import { MapPin } from '../../icons/location';
+import { CircleBan } from '../../icons/no-sign';
+import { PollIcon } from '../../icons/poll';
+import { VideoIcon } from '../../icons/video';
+import { Mic } from '../../icons/voice';
 import { FileTypes } from '../../types/types';
 
 export const useMessagePreviewIcon = ({

package/src/hooks/messagePreview/useMessagePreviewText.tsx

@@ -10,7 +10,7 @@ import {
 import { useGroupedAttachments } from './useGroupedAttachments';
 
 import { useChatContext } from '../../contexts/chatContext/ChatContext';
-import { useStateStore } from '../../hooks';
+import { useStateStore } from '../../hooks/useStateStore';
 
 const selector = (nextValue: PollState) => ({
   name: nextValue.name,
@@ -35,7 +35,6 @@ export const useMessagePreviewText = ({
   const onlyAudio = audios?.length === attachmentsLength;
   const onlyVoiceRecordings =
     voiceRecordings?.length && voiceRecordings?.length === attachmentsLength;
-
   if (message?.type === 'deleted') {
     return 'Message deleted';
   }
@@ -55,8 +54,12 @@ export const useMessagePreviewText = ({
     return 'Location';
   }
 
+  if (giphys?.length) {
+    return 'Giphy';
+  }
+
   if (message?.text) {
-    return message?.text;
+    return message.text;
   }
 
   if (onlyImages) {
@@ -91,10 +94,6 @@ export const useMessagePreviewText = ({
     }
   }
 
-  if (giphys?.length) {
-    return 'Giphy';
-  }
-
   if (onlyFiles && files?.length === 1) {
     return files?.[0]?.title;
   }

package/src/hooks/useAfterKeyboardOpenCallback.ts

@@ -0,0 +1,59 @@
+import { useEffect, useRef } from 'react';
+import { EventSubscription, Keyboard, Platform } from 'react-native';
+
+import { useStableCallback } from './useStableCallback';
+
+import { KeyboardControllerPackage } from '../components/KeyboardCompatibleView/KeyboardControllerAvoidingView';
+import { useMessageInputContext } from '../contexts/messageInputContext/MessageInputContext';
+
+/**
+ * A utility hook that returns a stable callback which focuses the message input
+ * and invokes the callback once the keyboard is open.
+ *
+ * @param callback - callback we want to run once the keyboard is ready
+ * @returns A stable callback that will wait for the keyboard to be open before executing.
+ */
+export const useAfterKeyboardOpenCallback = <T extends unknown[]>(
+  callback: (...args: T) => void,
+) => {
+  const { inputBoxRef } = useMessageInputContext();
+  const keyboardSubscriptionRef = useRef<EventSubscription | undefined>(undefined);
+  // This callback runs from a keyboard event listener, so it must stay fresh across rerenders.
+  const stableCallback = useStableCallback(callback);
+
+  /** Clears the pending keyboard listener, if any. */
+  const clearKeyboardSubscription = useStableCallback(() => {
+    keyboardSubscriptionRef.current?.remove();
+    keyboardSubscriptionRef.current = undefined;
+  });
+
+  useEffect(() => clearKeyboardSubscription, [clearKeyboardSubscription]);
+
+  return useStableCallback((...args: T) => {
+    clearKeyboardSubscription();
+
+    const runCallback = () => {
+      clearKeyboardSubscription();
+      stableCallback(...args);
+    };
+
+    if (!inputBoxRef.current) {
+      runCallback();
+      return;
+    }
+
+    if (Keyboard.isVisible()) {
+      inputBoxRef.current.focus();
+      runCallback();
+      return;
+    }
+
+    const keyboardEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+
+    keyboardSubscriptionRef.current = KeyboardControllerPackage?.KeyboardEvents
+      ? KeyboardControllerPackage.KeyboardEvents.addListener(keyboardEvent, runCallback)
+      : Keyboard.addListener(keyboardEvent, runCallback);
+
+    inputBoxRef.current.focus();
+  });
+};

package/src/hooks/useAttachmentPickerBottomSheet.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useRef } from 'react';
 
 import BottomSheet from '@gorhom/bottom-sheet';
 import { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
@@ -6,31 +6,14 @@ import { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 /**
  * This hook is used to manage the state of the attachment picker bottom sheet.
  * It provides functions to open and close the bottom sheet, as well as a reference to the bottom sheet itself.
- * It also handles the cleanup of the timeout used to close the bottom sheet.
  * The bottom sheet is used to display the attachment picker UI.
  * The `openPicker` function opens the bottom sheet, and the `closePicker` function closes it.
  * The `bottomSheetRef` is a reference to the bottom sheet component, which allows for programmatic control of the bottom sheet.
- * The `bottomSheetCloseTimeoutRef` is used to store the timeout ID for the close operation, allowing for cleanup if necessary.
  */
 export const useAttachmentPickerBottomSheet = () => {
-  const bottomSheetCloseTimeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);
   const bottomSheetRef = useRef<BottomSheet>(null);
 
-  useEffect(
-    () =>
-      // cleanup the timeout if the component unmounts
-      () => {
-        if (bottomSheetCloseTimeoutRef.current) {
-          clearTimeout(bottomSheetCloseTimeoutRef.current);
-        }
-      },
-    [],
-  );
-
   const openPicker = useCallback((ref: React.RefObject<BottomSheetMethods | null>) => {
-    if (bottomSheetCloseTimeoutRef.current) {
-      clearTimeout(bottomSheetCloseTimeoutRef.current);
-    }
     if (ref.current?.snapToIndex) {
       ref.current.snapToIndex(0);
     } else {
@@ -40,27 +23,11 @@ export const useAttachmentPickerBottomSheet = () => {
 
   const closePicker = useCallback((ref: React.RefObject<BottomSheetMethods | null>) => {
     if (ref.current?.close) {
-      if (bottomSheetCloseTimeoutRef.current) {
-        clearTimeout(bottomSheetCloseTimeoutRef.current);
-      }
       ref.current.close();
-      // Attempt to close the bottomsheet again to circumvent accidental opening on Android.
-      // Details: This to prevent a race condition where the close function is called during the point when a internal container layout happens within the bottomsheet due to keyboard affecting the layout
-      // If the container layout measures a shorter height than previous but if the close snapped to the previous height's position, the bottom sheet will show up
-      // this short delay ensures that close function is always called after a container layout due to keyboard change
-      // NOTE: this timeout has to be above 500 as the keyboardAnimationDuration is 500 in the bottomsheet library - see src/hooks/useKeyboard.ts there for more details
-      bottomSheetCloseTimeoutRef.current = setTimeout(() => {
-        ref.current?.close();
-      }, 600);
     }
   }, []);
 
-  useEffect(() => {
-    closePicker(bottomSheetRef);
-  }, [closePicker]);
-
   return {
-    bottomSheetCloseTimeoutRef,
     bottomSheetRef,
     closePicker,
     openPicker,

package/src/hooks/useAttachmentPickerState.ts

@@ -1,6 +1,6 @@
 import { useStateStore } from './useStateStore';
 
-import { useAttachmentPickerContext } from '../contexts';
+import { useAttachmentPickerContext } from '../contexts/attachmentPickerContext/AttachmentPickerContext';
 import { AttachmentPickerState } from '../state-store/attachment-picker-store';
 
 const selector = (nextState: AttachmentPickerState) => ({

package/src/hooks/useKeyboardVisibility.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { EventSubscription, Keyboard } from 'react-native';
+import { EventSubscription, Keyboard, Platform } from 'react-native';
 
 import { KeyboardControllerPackage } from '../components/KeyboardCompatibleView/KeyboardControllerAvoidingView';
 
@@ -24,8 +24,16 @@ export const useKeyboardVisibility = () => {
         ),
       );
     } else {
-      listeners.push(Keyboard.addListener('keyboardWillShow', () => setIsKeyboardVisible(true)));
-      listeners.push(Keyboard.addListener('keyboardWillHide', () => setIsKeyboardVisible(false)));
+      listeners.push(
+        Keyboard.addListener(Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow', () =>
+          setIsKeyboardVisible(true),
+        ),
+      );
+      listeners.push(
+        Keyboard.addListener(Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide', () =>
+          setIsKeyboardVisible(false),
+        ),
+      );
     }
 
     return () => listeners.forEach((listener) => listener.remove());

package/src/hooks/usePortalSettledCallback.ts

@@ -0,0 +1,78 @@
+import { useEffect, useRef } from 'react';
+import { Platform } from 'react-native';
+
+import { useStableCallback } from './useStableCallback';
+
+/**
+ * Number of frames we wait before invoking input focus sensitive work after the
+ * overlay closes.
+ */
+const SETTLE_FRAMES = Platform.OS === 'android' ? 2 : 0;
+
+/**
+ * Runs a callback after a fixed number of animation frames.
+ *
+ * We use RAFs here because the settling work we care about is tied to the next
+ * rendered frames after the overlay close transition.
+ *
+ * @param callback - callback to run once the frame budget has elapsed
+ * @param frames - number of frames to wait
+ * @param rafIds - accumulator used for later cancellation/cleanup
+ */
+const scheduleAfterFrames = (callback: () => void, frames: number, rafIds: number[]) => {
+  if (frames <= 0) {
+    callback();
+    return;
+  }
+
+  const rafId = requestAnimationFrame(() => scheduleAfterFrames(callback, frames - 1, rafIds));
+  rafIds.push(rafId);
+};
+
+/**
+ * Returns a stable callback that is safe to run after a `PortalWhileClosingView`
+ * has settled back into its original tree.
+ *
+ * Some followup actions are sensitive to that handoff window. If they run
+ * while a view is still being returned from a portal host to its in place host,
+ * they can target a node that is about to be reattached. On Android, that is
+ * especially noticeable with focus sensitive work, where the target can lose
+ * focus again mid keyboard animation.
+ *
+ * Two frames are intentional here:
+ * - frame 1 lets the portal retarget and React commit the component tree
+ * - frame 2 lets the native view hierarchy settle in its final host
+ *
+ * iOS does not currently need this settle window for this flow.
+ *
+ * A good example is the message composer edit action: after closing the message
+ * overlay, we wait for the portal handoff to settle before focusing the input
+ * and opening the keyboard. Doing this prematurely will result in the keyboard
+ * being immediately closed.
+ *
+ * Another good example would be having a button wrapped in a `PortalWhileClosingView`,
+ * that possibly renders (or morphs into) something when pressed. Handling `onPress`
+ * prematurely here may lead to the morphed button rendering into a completely different
+ * part of the UI hierarchy, causing unknown behaviour. This hook prevents that from
+ * happening.
+ *
+ * @param callback - callback we want to invoke once the portal handoff has settled
+ * @returns A stable callback gated behind the portal settle window.
+ */
+export const usePortalSettledCallback = <T extends unknown[]>(callback: (...args: T) => void) => {
+  const rafIdsRef = useRef<number[]>([]);
+  // This callback runs from deferred RAF work, so it must stay fresh across rerenders.
+  const stableCallback = useStableCallback(callback);
+
+  const clearScheduledFrames = useStableCallback(() => {
+    rafIdsRef.current.forEach((rafId) => cancelAnimationFrame(rafId));
+    rafIdsRef.current = [];
+  });
+
+  useEffect(() => clearScheduledFrames, [clearScheduledFrames]);
+
+  return useStableCallback((...args: T) => {
+    clearScheduledFrames();
+    scheduleAfterFrames(() => stableCallback(...args), SETTLE_FRAMES, rafIdsRef.current);
+  });
+};

package/src/i18n/en.json

@@ -33,6 +33,7 @@
   "Editing Message": "Editing Message",
   "Emoji matching": "Emoji matching",
   "Empty message...": "Empty message...",
+  "Enter a new option": "Enter a new option",
   "End Vote": "End Vote",
   "Error loading": "Error loading",
   "Error loading channel list...": "Error loading channel list...",
@@ -126,6 +127,7 @@
   "View {{count}} comments_one": "View {{count}} comment",
   "View {{count}} comments_other": "View {{count}} comments",
   "Voice message": "Voice message",
+  "Your comment": "Your comment",
   "You": "You",
   "You can't send messages in this channel": "You can't send messages in this channel",
   "duration/Location end at": "{{ milliseconds | durationFormatter(withSuffix: false) }}",
@@ -162,8 +164,9 @@
   "Change in Settings": "Change in Settings",
   "Create a poll and let everyone vote": "Create a poll and let everyone vote",
   "Open Camera": "Open Camera",
-  "Pick a document to share it with everyone": "Pick a document to share it with everyone",
-  "Pick document": "Pick document",
+  "Open Files": "Open Files",
+  "Select files to share": "Select files to share",
+  "Take a photo and share": "Take a photo and share",
   "Take a video and share": "Take a video and share",
   "You have not granted access to your camera": "You have not granted access to your camera",
   "{{count}} Reactions_many": "{{count}} Reactions",