@kesha-antonov/react-native-chat 5.0.1 → 6.0.0

package/lib/Reactions/MessageReactions.js

@@ -1,84 +1,363 @@
-import React from 'react';
+import { c as _c } from "react/compiler-runtime";
+import React, { useCallback } from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
-import { useThemedStyles } from '../hooks/useTheme';
-export const MessageReactions = (props) => {
-    const { reactions, currentUserId, position, onReactionPress, containerStyle, reactionStyle, reactionActiveStyle, reactionTextStyle, reactionCountStyle, } = props;
-    const styles = useThemedStyles(createStyles);
-    if (!reactions || reactions.length === 0)
-        return null;
-    return (<View style={[
-            styles.container,
-            position === 'right' ? styles.containerRight : styles.containerLeft,
-            containerStyle,
-        ]}>
-      {reactions.map(reaction => {
-            const isActive = currentUserId != null && reaction.userIds.includes(currentUserId);
-            const count = reaction.userIds.length;
-            return (<Pressable key={reaction.emoji} onPress={() => onReactionPress?.(reaction.emoji)} style={({ pressed }) => [
-                    styles.pill,
-                    isActive ? styles.pillActive : styles.pillInactive,
-                    isActive ? reactionActiveStyle : reactionStyle,
-                    pressed && styles.pillPressed,
-                ]}>
-            <Text style={[styles.emoji, reactionTextStyle]}>{reaction.emoji}</Text>
-            {count > 1 && (<Text style={[
-                        styles.count,
-                        isActive && styles.countActive,
-                        reactionCountStyle,
-                    ]}>
-                {count}
-              </Text>)}
-          </Pressable>);
-        })}
-    </View>);
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { ChatAvatar } from '../ChatAvatar';
+import { multiplyAlpha } from '../colorUtils';
+import { useTheme, useThemedStyles } from '../hooks/useTheme';
+// `ButtonBounce`: down to 0.9 over 60ms on `DEFAULT`, back over 350ms on `Overshoot(5)`.
+const PRESS_IN = {
+  duration: 60,
+  easing: Easing.bezier(0.25, 0.1, 0.25, 1)
 };
-const createStyles = (theme) => StyleSheet.create({
-    container: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        marginTop: 3,
-        gap: 4,
-    },
-    containerLeft: {
-        justifyContent: 'flex-start',
-        paddingLeft: 4,
-    },
-    containerRight: {
-        justifyContent: 'flex-end',
-        paddingRight: 4,
-    },
-    pill: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        borderRadius: theme.radii.reaction,
-        paddingHorizontal: 8,
-        paddingVertical: 4,
-        borderWidth: 1,
-    },
-    pillInactive: {
-        backgroundColor: theme.colors.reactionBackground,
-        borderColor: 'transparent',
-    },
-    pillActive: {
-        backgroundColor: theme.colors.reactionActiveBackground,
-        borderColor: theme.colors.accent,
-    },
-    pillPressed: {
-        opacity: 0.7,
-    },
-    emoji: {
-        fontSize: 15,
-        lineHeight: 20,
-    },
-    count: {
-        fontSize: 12,
-        marginLeft: 3,
-        color: theme.colors.incomingText,
-        lineHeight: 20,
-    },
-    countActive: {
-        color: theme.colors.accent,
-        fontWeight: '600',
-    },
+const PRESS_OUT = {
+  duration: 350,
+  easing: Easing.out(Easing.back(5))
+};
+// An unchosen pill is its accent at 15.6%.
+const UNCHOSEN_ALPHA = 0.156;
+// Up to three reactors' avatars stand in for the count, as in Telegram: one-to-one chats always,
+// groups while the message has this many reactions or fewer.
+const MAX_AVATARS = 3;
+const AVATAR_SIZE = 20;
+const ReactionPill = t0 => {
+  const $ = _c(45);
+  const {
+    emoji,
+    count,
+    avatars,
+    isChosen,
+    background,
+    textColor,
+    onPress,
+    style,
+    textStyle,
+    countStyle
+  } = t0;
+  const styles = useThemedStyles(createStyles);
+  const scale = useSharedValue(1);
+  const pressStyle = useAnimatedStyle(() => ({
+    transform: [{
+      scale: scale.value
+    }]
+  }));
+  let t1;
+  if ($[0] !== scale) {
+    t1 = () => {
+      scale.set(withTiming(0.9, PRESS_IN));
+    };
+    $[0] = scale;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const handlePressIn = t1;
+  let t2;
+  if ($[2] !== scale) {
+    t2 = () => {
+      scale.set(withTiming(1, PRESS_OUT));
+    };
+    $[2] = scale;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const handlePressOut = t2;
+  let t3;
+  if ($[4] !== emoji || $[5] !== onPress) {
+    t3 = () => onPress?.(emoji);
+    $[4] = emoji;
+    $[5] = onPress;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  const handlePress = t3;
+  let t4;
+  if ($[7] !== isChosen) {
+    t4 = {
+      selected: isChosen
+    };
+    $[7] = isChosen;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  const t5 = count > 1 ? `${emoji} ${count}` : emoji;
+  const t6 = !avatars && styles.pillWithCount;
+  let t7;
+  if ($[9] !== background) {
+    t7 = {
+      backgroundColor: background
+    };
+    $[9] = background;
+    $[10] = t7;
+  } else {
+    t7 = $[10];
+  }
+  let t8;
+  if ($[11] !== pressStyle || $[12] !== style || $[13] !== styles.pill || $[14] !== t6 || $[15] !== t7) {
+    t8 = [styles.pill, t6, t7, style, pressStyle];
+    $[11] = pressStyle;
+    $[12] = style;
+    $[13] = styles.pill;
+    $[14] = t6;
+    $[15] = t7;
+    $[16] = t8;
+  } else {
+    t8 = $[16];
+  }
+  let t9;
+  if ($[17] !== styles.emoji || $[18] !== textStyle) {
+    t9 = [styles.emoji, textStyle];
+    $[17] = styles.emoji;
+    $[18] = textStyle;
+    $[19] = t9;
+  } else {
+    t9 = $[19];
+  }
+  let t10;
+  if ($[20] !== emoji || $[21] !== t9) {
+    t10 = <Text style={t9}>{emoji}</Text>;
+    $[20] = emoji;
+    $[21] = t9;
+    $[22] = t10;
+  } else {
+    t10 = $[22];
+  }
+  let t11;
+  if ($[23] !== avatars || $[24] !== count || $[25] !== countStyle || $[26] !== styles.avatar || $[27] !== styles.avatarImage || $[28] !== styles.avatarOverlap || $[29] !== styles.avatarText || $[30] !== styles.avatars || $[31] !== styles.count || $[32] !== textColor) {
+    t11 = avatars ? <View style={styles.avatars}>{avatars.map((user, index) => <View key={String(user._id)} style={[styles.avatar, index > 0 && styles.avatarOverlap, {
+        zIndex: avatars.length - index
+      }]}><ChatAvatar user={user} avatarStyle={styles.avatarImage} textStyle={styles.avatarText} /></View>)}</View> : <Text style={[styles.count, {
+      color: textColor
+    }, countStyle]}>{count}</Text>;
+    $[23] = avatars;
+    $[24] = count;
+    $[25] = countStyle;
+    $[26] = styles.avatar;
+    $[27] = styles.avatarImage;
+    $[28] = styles.avatarOverlap;
+    $[29] = styles.avatarText;
+    $[30] = styles.avatars;
+    $[31] = styles.count;
+    $[32] = textColor;
+    $[33] = t11;
+  } else {
+    t11 = $[33];
+  }
+  let t12;
+  if ($[34] !== t10 || $[35] !== t11 || $[36] !== t8) {
+    t12 = <Animated.View style={t8}>{t10}{t11}</Animated.View>;
+    $[34] = t10;
+    $[35] = t11;
+    $[36] = t8;
+    $[37] = t12;
+  } else {
+    t12 = $[37];
+  }
+  let t13;
+  if ($[38] !== handlePress || $[39] !== handlePressIn || $[40] !== handlePressOut || $[41] !== t12 || $[42] !== t4 || $[43] !== t5) {
+    t13 = <Pressable onPress={handlePress} onPressIn={handlePressIn} onPressOut={handlePressOut} accessibilityRole="button" accessibilityState={t4} accessibilityLabel={t5}>{t12}</Pressable>;
+    $[38] = handlePress;
+    $[39] = handlePressIn;
+    $[40] = handlePressOut;
+    $[41] = t12;
+    $[42] = t4;
+    $[43] = t5;
+    $[44] = t13;
+  } else {
+    t13 = $[44];
+  }
+  return t13;
+};
+
+/**
+ * Reaction pills inside the bubble: 26pt capsules
+ * that wrap 4pt apart, the bubble's accent at 15.6% when not chosen and solid with white text
+ * when chosen, bouncing on a tap.
+ */
+export const MessageReactions = props => {
+  const $ = _c(31);
+  const {
+    reactions,
+    currentUserId,
+    position,
+    onReactionPress,
+    containerStyle,
+    reactionStyle,
+    reactionActiveStyle,
+    reactionTextStyle,
+    reactionCountStyle,
+    trailing,
+    hasContentAbove: t0,
+    getUser,
+    isGroupChat: t1
+  } = props;
+  const hasContentAbove = t0 === undefined ? false : t0;
+  const isGroupChat = t1 === undefined ? false : t1;
+  const theme = useTheme();
+  const styles = useThemedStyles(createStyles);
+  if (!reactions || reactions.length === 0) {
+    return null;
+  }
+  const accent = position === "right" ? theme.colors.outgoingReaction : theme.colors.incomingReaction;
+  const unchosenText = position === "right" ? theme.colors.outgoingReactionText : theme.colors.incomingReactionText;
+  const chosenText = position === "right" ? theme.colors.outgoingReactionTextChosen : theme.colors.incomingReactionTextChosen;
+  let t2;
+  if ($[0] !== accent) {
+    t2 = multiplyAlpha(accent, UNCHOSEN_ALPHA);
+    $[0] = accent;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const unchosenBackground = t2;
+  const reactionCount = reactions.reduce(_temp, 0);
+  let t3;
+  if ($[2] !== accent || $[3] !== chosenText || $[4] !== currentUserId || $[5] !== getUser || $[6] !== isGroupChat || $[7] !== onReactionPress || $[8] !== reactionActiveStyle || $[9] !== reactionCount || $[10] !== reactionCountStyle || $[11] !== reactionStyle || $[12] !== reactionTextStyle || $[13] !== reactions || $[14] !== unchosenBackground || $[15] !== unchosenText) {
+    const reactorsByEmoji = getUser && (!isGroupChat || reactionCount <= MAX_AVATARS) ? reactions.map(reaction_0 => reaction_0.userIds.map(getUser)) : null;
+    const canShowAvatars = !!reactorsByEmoji && reactorsByEmoji.every(_temp2);
+    t3 = reactions.map((reaction_1, index) => {
+      const isChosen = currentUserId != null && reaction_1.userIds.includes(currentUserId);
+      const avatars = canShowAvatars ? reactorsByEmoji[index].slice(-MAX_AVATARS).reverse() : undefined;
+      return <ReactionPill key={reaction_1.emoji} emoji={reaction_1.emoji} count={reaction_1.userIds.length} avatars={avatars} isChosen={isChosen} background={isChosen ? accent : unchosenBackground} textColor={isChosen ? chosenText : unchosenText} onPress={onReactionPress} style={isChosen ? reactionActiveStyle : reactionStyle} textStyle={reactionTextStyle} countStyle={reactionCountStyle} />;
+    });
+    $[2] = accent;
+    $[3] = chosenText;
+    $[4] = currentUserId;
+    $[5] = getUser;
+    $[6] = isGroupChat;
+    $[7] = onReactionPress;
+    $[8] = reactionActiveStyle;
+    $[9] = reactionCount;
+    $[10] = reactionCountStyle;
+    $[11] = reactionStyle;
+    $[12] = reactionTextStyle;
+    $[13] = reactions;
+    $[14] = unchosenBackground;
+    $[15] = unchosenText;
+    $[16] = t3;
+  } else {
+    t3 = $[16];
+  }
+  const pills = t3;
+  const t4 = !hasContentAbove && styles.containerAlone;
+  let t5;
+  if ($[17] !== containerStyle || $[18] !== styles.container || $[19] !== t4) {
+    t5 = [styles.container, t4, containerStyle];
+    $[17] = containerStyle;
+    $[18] = styles.container;
+    $[19] = t4;
+    $[20] = t5;
+  } else {
+    t5 = $[20];
+  }
+  let t6;
+  if ($[21] !== pills || $[22] !== styles.pills) {
+    t6 = <View style={styles.pills}>{pills}</View>;
+    $[21] = pills;
+    $[22] = styles.pills;
+    $[23] = t6;
+  } else {
+    t6 = $[23];
+  }
+  let t7;
+  if ($[24] !== styles.trailing || $[25] !== trailing) {
+    t7 = !!trailing && <View style={styles.trailing}>{trailing}</View>;
+    $[24] = styles.trailing;
+    $[25] = trailing;
+    $[26] = t7;
+  } else {
+    t7 = $[26];
+  }
+  let t8;
+  if ($[27] !== t5 || $[28] !== t6 || $[29] !== t7) {
+    t8 = <View style={t5}>{t6}{t7}</View>;
+    $[27] = t5;
+    $[28] = t6;
+    $[29] = t7;
+    $[30] = t8;
+  } else {
+    t8 = $[30];
+  }
+  return t8;
+};
+const createStyles = theme => StyleSheet.create({
+  // Starts at the text's inset; the pills end 7 above the body's bottom.
+  container: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    gap: 4,
+    paddingHorizontal: theme.spacing.bubblePaddingH,
+    paddingBottom: 7
+  },
+  pills: {
+    flexShrink: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 4
+  },
+  containerAlone: {
+    paddingTop: 6
+  },
+  // 8 + 20 emoji + 3.
+  pill: {
+    height: 26,
+    borderRadius: theme.radii.reaction,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: 8,
+    paddingRight: 3
+  },
+  // 8 + 20 + 4 + count + 8.
+  pillWithCount: {
+    paddingRight: 8
+  },
+  // 8 + 20 + 6 + avatars + 3: the avatars sit as far from the end as from the top and bottom.
+  avatars: {
+    flexDirection: 'row',
+    marginLeft: 6
+  },
+  avatar: {
+    width: AVATAR_SIZE,
+    height: AVATAR_SIZE
+  },
+  // Each next one overlaps the one before by a fifth.
+  avatarOverlap: {
+    marginLeft: -AVATAR_SIZE * 0.2
+  },
+  avatarImage: {
+    width: AVATAR_SIZE,
+    height: AVATAR_SIZE,
+    borderRadius: AVATAR_SIZE / 2
+  },
+  avatarText: {
+    fontSize: 8
+  },
+  emoji: {
+    width: 20,
+    fontSize: 16,
+    lineHeight: 20,
+    textAlign: 'center'
+  },
+  count: {
+    marginLeft: 4,
+    fontSize: theme.typography.reactionCount.fontSize,
+    fontWeight: theme.typography.reactionCount.fontWeight,
+    fontVariant: ['tabular-nums']
+  },
+  // The reserved time sits on the pills' baseline, under the visible one.
+  trailing: {
+    flexShrink: 0,
+    height: 14,
+    justifyContent: 'flex-end'
+  }
 });
+function _temp(total, reaction) {
+  return total + reaction.userIds.length;
+}
+function _temp2(users) {
+  return users.every(Boolean);
+}
 //# sourceMappingURL=MessageReactions.js.map

package/lib/Reactions/MessageReactions.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageReactions.js","sourceRoot":"","sources":["../../src/Reactions/MessageReactions.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"MessageReactions.js","names":["React","useCallback","Pressable","StyleSheet","Text","View","Animated","Easing","useAnimatedStyle","useSharedValue","withTiming","ChatAvatar","multiplyAlpha","useTheme","useThemedStyles","PRESS_IN","duration","easing","bezier","PRESS_OUT","out","back","UNCHOSEN_ALPHA","MAX_AVATARS","AVATAR_SIZE","ReactionPill","t0","$","_c","emoji","count","avatars","isChosen","background","textColor","onPress","style","textStyle","countStyle","styles","createStyles","scale","pressStyle","transform","value","t1","set","handlePressIn","t2","handlePressOut","t3","handlePress","t4","selected","t5","t6","pillWithCount","t7","backgroundColor","t8","pill","t9","t10","t11","avatar","avatarImage","avatarOverlap","avatarText","map","user","index","String","_id","zIndex","length","color","t12","t13","MessageReactions","props","reactions","currentUserId","position","onReactionPress","containerStyle","reactionStyle","reactionActiveStyle","reactionTextStyle","reactionCountStyle","trailing","hasContentAbove","getUser","isGroupChat","undefined","theme","accent","colors","outgoingReaction","incomingReaction","unchosenText","outgoingReactionText","incomingReactionText","chosenText","outgoingReactionTextChosen","incomingReactionTextChosen","unchosenBackground","reactionCount","reduce","_temp","reactorsByEmoji","reaction_0","reaction","userIds","canShowAvatars","every","_temp2","reaction_1","includes","slice","reverse","pills","containerAlone","container","create","flexDirection","alignItems","gap","paddingHorizontal","spacing","bubblePaddingH","paddingBottom","flexShrink","flexWrap","paddingTop","height","borderRadius","radii","paddingLeft","paddingRight","marginLeft","width","fontSize","lineHeight","textAlign","typography","fontWeight","fontVariant","justifyContent","total","users","Boolean"],"sources":["../../src/Reactions/MessageReactions.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport { Pressable, StyleProp, StyleSheet, Text, TextStyle, View, ViewStyle } from 'react-native'\nimport Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated'\n\nimport { ChatAvatar } from '../ChatAvatar'\nimport { multiplyAlpha } from '../colorUtils'\nimport { useTheme, useThemedStyles } from '../hooks/useTheme'\nimport { IMessage, User } from '../Models'\nimport { ChatTheme } from '../Theme'\nimport { MessageReactionsDisplayProps } from './types'\n\n// `ButtonBounce`: down to 0.9 over 60ms on `DEFAULT`, back over 350ms on `Overshoot(5)`.\nconst PRESS_IN = { duration: 60, easing: Easing.bezier(0.25, 0.1, 0.25, 1) }\nconst PRESS_OUT = { duration: 350, easing: Easing.out(Easing.back(5)) }\n// An unchosen pill is its accent at 15.6%.\nconst UNCHOSEN_ALPHA = 0.156\n// Up to three reactors' avatars stand in for the count, as in Telegram: one-to-one chats always,\n// groups while the message has this many reactions or fewer.\nconst MAX_AVATARS = 3\nconst AVATAR_SIZE = 20\n\ninterface ReactionPillProps {\n  emoji: string\n  count: number\n  /** Shown instead of the count. */\n  avatars?: User[]\n  isChosen: boolean\n  background: string\n  textColor: string\n  onPress?: (emoji: string) => void\n  style?: StyleProp<ViewStyle>\n  textStyle?: StyleProp<TextStyle>\n  countStyle?: StyleProp<TextStyle>\n}\n\nconst ReactionPill = ({ emoji, count, avatars, isChosen, background, textColor, onPress, style, textStyle, countStyle }: ReactionPillProps) => {\n  const styles = useThemedStyles(createStyles)\n  const scale = useSharedValue(1)\n  const pressStyle = useAnimatedStyle(() => ({ transform: [{ scale: scale.value }] }))\n\n  const handlePressIn = useCallback(() => {\n    scale.set(withTiming(0.9, PRESS_IN))\n  }, [scale])\n  const handlePressOut = useCallback(() => {\n    scale.set(withTiming(1, PRESS_OUT))\n  }, [scale])\n  const handlePress = useCallback(() => onPress?.(emoji), [onPress, emoji])\n\n  return (\n    <Pressable\n      onPress={handlePress}\n      onPressIn={handlePressIn}\n      onPressOut={handlePressOut}\n      accessibilityRole='button'\n      accessibilityState={{ selected: isChosen }}\n      accessibilityLabel={count > 1 ? `${emoji} ${count}` : emoji}\n    >\n      <Animated.View style={[styles.pill, !avatars && styles.pillWithCount, { backgroundColor: background }, style, pressStyle]}>\n        <Text style={[styles.emoji, textStyle]}>{emoji}</Text>\n        {avatars\n          ? (\n            <View style={styles.avatars}>\n              {avatars.map((user, index) => (\n                <View key={String(user._id)} style={[styles.avatar, index > 0 && styles.avatarOverlap, { zIndex: avatars.length - index }]}>\n                  <ChatAvatar user={user} avatarStyle={styles.avatarImage} textStyle={styles.avatarText} />\n                </View>\n              ))}\n            </View>\n          )\n          : (\n            <Text style={[styles.count, { color: textColor }, countStyle]}>\n              {count}\n            </Text>\n          )}\n      </Animated.View>\n    </Pressable>\n  )\n}\n\n/**\n * Reaction pills inside the bubble: 26pt capsules\n * that wrap 4pt apart, the bubble's accent at 15.6% when not chosen and solid with white text\n * when chosen, bouncing on a tap.\n */\nexport const MessageReactions = <TMessage extends IMessage = IMessage>(\n  props: MessageReactionsDisplayProps<TMessage>\n): React.ReactElement | null => {\n  const {\n    reactions,\n    currentUserId,\n    position,\n    onReactionPress,\n    containerStyle,\n    reactionStyle,\n    reactionActiveStyle,\n    reactionTextStyle,\n    reactionCountStyle,\n    trailing,\n    hasContentAbove = false,\n    getUser,\n    isGroupChat = false,\n  } = props\n\n  const theme = useTheme()\n  const styles = useThemedStyles(createStyles)\n\n  if (!reactions || reactions.length === 0)\n    return null\n\n  const accent = position === 'right' ? theme.colors.outgoingReaction : theme.colors.incomingReaction\n  const unchosenText = position === 'right' ? theme.colors.outgoingReactionText : theme.colors.incomingReactionText\n  const chosenText = position === 'right' ? theme.colors.outgoingReactionTextChosen : theme.colors.incomingReactionTextChosen\n  const unchosenBackground = multiplyAlpha(accent, UNCHOSEN_ALPHA)\n\n  // Avatars replace the counts only when every reactor is known, so a pill never mixes the two.\n  const reactionCount = reactions.reduce((total, reaction) => total + reaction.userIds.length, 0)\n  const reactorsByEmoji = getUser && (!isGroupChat || reactionCount <= MAX_AVATARS)\n    ? reactions.map(reaction => reaction.userIds.map(getUser))\n    : null\n  const canShowAvatars = !!reactorsByEmoji && reactorsByEmoji.every(users => users.every(Boolean))\n\n  const pills = reactions.map((reaction, index) => {\n    const isChosen = currentUserId != null && reaction.userIds.includes(currentUserId)\n    const avatars = canShowAvatars ? (reactorsByEmoji![index] as User[]).slice(-MAX_AVATARS).reverse() : undefined\n\n    return (\n      <ReactionPill\n        key={reaction.emoji}\n        emoji={reaction.emoji}\n        count={reaction.userIds.length}\n        avatars={avatars}\n        isChosen={isChosen}\n        background={isChosen ? accent : unchosenBackground}\n        textColor={isChosen ? chosenText : unchosenText}\n        onPress={onReactionPress}\n        style={isChosen ? reactionActiveStyle : reactionStyle}\n        textStyle={reactionTextStyle}\n        countStyle={reactionCountStyle}\n      />\n    )\n  })\n\n  return (\n    <View\n      style={[\n        styles.container,\n        !hasContentAbove && styles.containerAlone,\n        containerStyle,\n      ]}\n    >\n      {/* The reserved time sits beside the pills, not in their wrapping row: as the row's\n          last item it had to fit the bubble's width exactly, and when the pills set that width\n          a rounding error wrapped it onto a row of its own after the bubble had been sized,\n          pushing the text above out of the bubble. */}\n      <View style={styles.pills}>{pills}</View>\n      {!!trailing && <View style={styles.trailing}>{trailing}</View>}\n    </View>\n  )\n}\n\nconst createStyles = (theme: ChatTheme) =>\n  StyleSheet.create({\n    // Starts at the text's inset; the pills end 7 above the body's bottom.\n    container: {\n      flexDirection: 'row',\n      alignItems: 'flex-end',\n      gap: 4,\n      paddingHorizontal: theme.spacing.bubblePaddingH,\n      paddingBottom: 7,\n    },\n    pills: {\n      flexShrink: 1,\n      flexDirection: 'row',\n      flexWrap: 'wrap',\n      gap: 4,\n    },\n    containerAlone: {\n      paddingTop: 6,\n    },\n    // 8 + 20 emoji + 3.\n    pill: {\n      height: 26,\n      borderRadius: theme.radii.reaction,\n      flexDirection: 'row',\n      alignItems: 'center',\n      paddingLeft: 8,\n      paddingRight: 3,\n    },\n    // 8 + 20 + 4 + count + 8.\n    pillWithCount: {\n      paddingRight: 8,\n    },\n    // 8 + 20 + 6 + avatars + 3: the avatars sit as far from the end as from the top and bottom.\n    avatars: {\n      flexDirection: 'row',\n      marginLeft: 6,\n    },\n    avatar: {\n      width: AVATAR_SIZE,\n      height: AVATAR_SIZE,\n    },\n    // Each next one overlaps the one before by a fifth.\n    avatarOverlap: {\n      marginLeft: -AVATAR_SIZE * 0.2,\n    },\n    avatarImage: {\n      width: AVATAR_SIZE,\n      height: AVATAR_SIZE,\n      borderRadius: AVATAR_SIZE / 2,\n    },\n    avatarText: {\n      fontSize: 8,\n    },\n    emoji: {\n      width: 20,\n      fontSize: 16,\n      lineHeight: 20,\n      textAlign: 'center',\n    },\n    count: {\n      marginLeft: 4,\n      fontSize: theme.typography.reactionCount.fontSize,\n      fontWeight: theme.typography.reactionCount.fontWeight,\n      fontVariant: ['tabular-nums'],\n    },\n    // The reserved time sits on the pills' baseline, under the visible one.\n    trailing: {\n      flexShrink: 0,\n      height: 14,\n      justifyContent: 'flex-end',\n    },\n  })\n"],"mappings":"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","ignoreList":[]}

package/lib/Reactions/ReactionPicker.d.ts

@@ -2,9 +2,11 @@ import React from 'react';
 import { IMessage } from '../Models';
 import { ReactionPickerProps } from './types';
 /**
- * Lightweight quick-picker shown on long-press: a floating row of emojis
- * anchored to the pressed bubble. For a full emoji browser, pass a custom
- * component via `reactions.renderReactionPicker` (see the example app).
+ * Lightweight quick-picker shown on long-press: the chat dims while the pressed
+ * message stays lit in place, and the reactions bar pops out
+ * beside the finger. It is the context menu without actions, so both feel the same. Its expand
+ * button opens the built-in emoji grid unless `reactions.renderExpandedPicker` says
+ * otherwise.
  */
 export declare const ReactionPicker: <TMessage extends IMessage = IMessage>(props: ReactionPickerProps<TMessage>) => React.ReactElement | null;
 //# sourceMappingURL=ReactionPicker.d.ts.map

package/lib/Reactions/ReactionPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactionPicker.d.ts","sourceRoot":"","sources":["../../src/Reactions/ReactionPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAW1C,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAA;AAEpC,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAO7C;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,QAAQ,SAAS,QAAQ,GAAG,QAAQ,EACjE,OAAO,mBAAmB,CAAC,QAAQ,CAAC,KACnC,KAAK,CAAC,YAAY,GAAG,IAiFvB,CAAA"}
+{"version":3,"file":"ReactionPicker.d.ts","sourceRoot":"","sources":["../../src/Reactions/ReactionPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAGtC,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAA;AACpC,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAI7C;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,GAAI,QAAQ,SAAS,QAAQ,GAAG,QAAQ,EACjE,OAAO,mBAAmB,CAAC,QAAQ,CAAC,KACnC,KAAK,CAAC,YAAY,GAAG,IA2CvB,CAAA"}