npm - @planningcenter/chat-react-native - Versions diffs - 3.15.0 → 3.16.0-rc.1 - Mend

@planningcenter/chat-react-native 3.15.0 → 3.16.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (45) hide show

package/build/components/conversation/message.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/message.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAKxC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;~~AAsB7C~~;;GAEG;AACH,UAAU,YAAa,SAAQ,eAAe;IAC5C,4BAA4B,EAAE,OAAO,CAAA;IACrC,eAAe,EAAE,MAAM,CAAA;IACvB,wBAAwB,CAAC,EAAE,MAAM,CAAA;CAClC;AAED,wBAAgB,OAAO,CAAC,EACtB,4BAA4B,EAC5B,eAAe,EACf,wBAAwB,EACxB,GAAG,OAAO,EACX,EAAE,YAAY,~~qBA4Md~~"}
1	+ {"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/message.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAKxC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAwB7C;;GAEG;AACH,UAAU,YAAa,SAAQ,eAAe;IAC5C,4BAA4B,EAAE,OAAO,CAAA;IACrC,eAAe,EAAE,MAAM,CAAA;IACvB,wBAAwB,CAAC,EAAE,MAAM,CAAA;CAClC;AAED,wBAAgB,OAAO,CAAC,EACtB,4BAA4B,EAC5B,eAAe,EACf,wBAAwB,EACxB,GAAG,OAAO,EACX,EAAE,YAAY,qBA0Nd"}

package/build/components/conversation/message.js CHANGED Viewed

@@ -7,12 +7,13 @@ import { useInteractionGhostBackgroundColor, useTheme } from '../../hooks';
 import { MessageAttachments } from './message_attachments';
 import ErrorBoundary from '../page/error_boundary';
 import { MessageMarkdown } from './message_markdown';
-import { CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL, platformFontWeightMedium, } from '../../utils/styles';
+import { CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL, MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH, platformFontWeightMedium, } from '../../utils/styles';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, interpolateColor, Easing, } from 'react-native-reanimated';
 import { useLiveRelativeTime } from '../../hooks/use_live_relative_time';
 import { MessageReadReceipts } from './message_read_receipts';
 import { isNewMessage, useMessageCreateOrUpdate } from '../../hooks/use_message_create_or_update';
 import { Haptic } from '../../utils/native_adapters';
+import { TheirReplyConnector, MyReplyConnector } from './reply_connectors';
 export function Message({ canDeleteNonAuthoredMessages, conversation_id, latestReadMessageSortKey, ...message }) {
     const { text, reactionCounts, pending, error } = message;
     const styles = useMessageStyles(message);
@@ -25,6 +26,7 @@ export function Message({ canDeleteNonAuthoredMessages, conversation_id, latestR
     const wasEdited = Boolean(message.textEditedAt);
     const isPersisted = !isNewMessage(message);
     const [temporarilyHidePendingState, setTemporarilyHidePendingState] = React.useState(true);
+    const [messageBubbleHeight, setMessageBubbleHeight] = React.useState(0);
     useEffect(() => {
         if (pending) {
             const timer = setTimeout(() => {
@@ -101,12 +103,13 @@ export function Message({ canDeleteNonAuthoredMessages, conversation_id, latestR
     const messagePendingLabel = isPersisted ? 'Saving' : 'Sending';
     return (<Pressable onLongPress={handleMessageLongPress} onPress={() => setShowMessageMetaToggle(!showMessageMetaToggle)} onPressIn={handlePressIn} onPressOut={handlePressOut} android_ripple={{ color: colors.androidRippleNeutral }} accessibilityHint="Long press to view message actions like reacting and copying.">
       <Animated.View style={[styles.message, animatedBackgroundColor]}>
-        {!message.mine && (<View style={styles.messageAuthor}>
-            {renderAuthor ? (<Avatar size={'md'} sourceUri={message.author.avatar}/>) : (<View style={styles.avatarPlaceholder}/>)}
+        {!message.mine && (<View>
+            {renderAuthor ? (<Avatar size={'md'} sourceUri={message.author.avatar} style={styles.avatar} maxFontSizeMultiplier={1} minFontSizeMultiplier={1}/>) : (<View style={styles.avatarPlaceholder}/>)}
+            <TheirReplyConnector message={message} messageBubbleHeight={messageBubbleHeight}/>
           </View>)}
         <View style={[styles.messageContent, { marginBottom: messageBottomMargin }]}>
           {renderAuthor && <Text variant="tertiary">{message.author.name}</Text>}
-          <View style={styles.messageBubble}>
+          <View style={styles.messageBubble} onLayout={e => setMessageBubbleHeight(e.nativeEvent.layout.height)}>
             <ErrorBoundary>
               <MessageAttachments attachments={message.attachments} metaProps={metaProps} onMessageAttachmentLongPress={handleMessageAttachmentLongPress} onMessageLongPress={handleMessageLongPress}/>
             </ErrorBoundary>
@@ -139,6 +142,7 @@ export function Message({ canDeleteNonAuthoredMessages, conversation_id, latestR
                 </Text>)}
             </View>)}
         </View>
+        {message.mine && (<MyReplyConnector message={message} messageBubbleHeight={messageBubbleHeight}/>)}
       </Animated.View>
     </Pressable>);
 }
@@ -158,13 +162,11 @@ const useMessageStyles = ({ mine }) => {
             flex: 1,
             gap: 4,
         },
-        messageAuthor: {
-            flexDirection: 'row',
-            gap: 8,
+        avatar: {
+            marginBottom: 8,
         },
         avatarPlaceholder: {
-            width: 32, // Same width as avatar
-            height: 32, // Same height as avatar
+            width: MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH, // Same width as avatar
         },
         messageBubble: {
             backgroundColor: messageBubbleBackgroundColor,

package/build/components/conversation/message.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"message.js","sourceRoot":"","sources":["../../../src/components/conversation/message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useNavigation } from '@react-navigation/native'\nimport React, { useEffect } from 'react'\nimport { Platform, Pressable, StyleSheet, useWindowDimensions, View } from 'react-native'\nimport { MessageReaction } from '../../components/conversation/message_reaction'\nimport { Avatar, Icon, Spinner, Text, TextInlineButton } from '../../components/display'\nimport { useInteractionGhostBackgroundColor, useTheme } from '../../hooks'\nimport { MessageResource } from '../../types'\nimport { ReactionCountResource } from '../../types/resources/reaction'\nimport { MessageAttachments } from './message_attachments'\nimport ErrorBoundary from '../page/error_boundary'\nimport { MessageMarkdown } from './message_markdown'\nimport { DenormalizedMessageAttachmentResource } from '../../types/resources/denormalized_attachment_resource'\nimport {\n CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,\n platformFontWeightMedium,\n} from '../../utils/styles'\nimport Animated, {\n useSharedValue,\n useAnimatedStyle,\n withTiming,\n interpolateColor,\n Easing,\n} from 'react-native-reanimated'\nimport { useLiveRelativeTime } from '../../hooks/use_live_relative_time'\nimport { MessageReadReceipts } from './message_read_receipts'\nimport { isNewMessage, useMessageCreateOrUpdate } from '../../hooks/use_message_create_or_update'\nimport { Haptic } from '../../utils/native_adapters'\n\n/** Message\n * Component for display of a message within a conversation list\n */\ninterface MessageProps extends MessageResource {\n canDeleteNonAuthoredMessages: boolean\n conversation_id: number\n latestReadMessageSortKey?: string\n}\n\nexport function Message({\n canDeleteNonAuthoredMessages,\n conversation_id,\n latestReadMessageSortKey,\n ...message\n}: MessageProps) {\n const { text, reactionCounts, pending, error } = message\n const styles = useMessageStyles(message)\n const navigation = useNavigation()\n const { colors } = useTheme()\n const hasReactions = reactionCounts.length > 0\n const [showMessageMetaToggle, setShowMessageMetaToggle] = React.useState(false)\n const showMessageMeta =\n showMessageMetaToggle \|\| message.myLatestInConversation \|\| !!pending \|\| !!error \|\| false\n const timestamp = useLiveRelativeTime(message.createdAt)\n const wasEdited = Boolean(message.textEditedAt)\n const isPersisted = !isNewMessage(message)\n const [temporarilyHidePendingState, setTemporarilyHidePendingState] = React.useState(true)\n\n useEffect(() => {\n if (pending) {\n const timer = setTimeout(() => {\n setTemporarilyHidePendingState(false)\n }, 2000)\n return () => clearTimeout(timer)\n }\n return () => {}\n }, [pending])\n\n const retryFailedSaveMutation = useMessageCreateOrUpdate({\n conversationId: conversation_id,\n message,\n })\n\n const handleRetry = () => {\n if (text && error) {\n retryFailedSaveMutation.mutateAsync({\n text,\n attachments: message.attachmentsForCreate,\n })\n }\n }\n\n const bgFadeProgress = useSharedValue(0)\n const pressedColor = Platform.select({\n ios: colors.fillColorNeutral050Base,\n default: 'transparent',\n })\n const animatedBackgroundColor = useAnimatedStyle(() => {\n const backgroundColor = interpolateColor(\n bgFadeProgress.value,\n [0, 1],\n ['transparent', pressedColor]\n )\n return {\n backgroundColor,\n }\n })\n\n const handlePressIn = () => {\n bgFadeProgress.value = withTiming(1, { duration: 300, easing: Easing.inOut(Easing.ease) })\n }\n\n const handlePressOut = () => {\n bgFadeProgress.value = withTiming(0, { duration: 300, easing: Easing.inOut(Easing.ease) })\n }\n\n const handleMessageLongPress = () => {\n if (!isPersisted) return\n\n Haptic.impactLight()\n navigation.navigate('MessageActions', {\n message_id: message.id,\n conversation_id,\n canDeleteNonAuthoredMessages,\n })\n }\n const handleReactionLongPress = (reaction: ReactionCountResource) => {\n Haptic.impactLight()\n navigation.navigate('Reactions', {\n message_id: message.id,\n conversation_id,\n reaction_value: reaction.value,\n })\n }\n\n const handleMessageAttachmentLongPress = (attachment: DenormalizedMessageAttachmentResource) => {\n Haptic.impactLight()\n navigation.navigate('AttachmentActions', {\n attachmentId: attachment?.id,\n attachmentContentType: attachment?.attributes.contentType,\n attachmentUrl: attachment?.attributes.url,\n conversation_id,\n canDeleteNonAuthoredMessages,\n myMessage: message.mine,\n })\n }\n\n const metaProps = {\n authorName: message.author.name,\n createdAt: message.createdAt,\n }\n\n const renderAuthor = (!message.mine && message.renderAuthor) \|\| false\n const messageBottomMargin = message.lastInGroup ? 12 : hasReactions \|\| showMessageMeta ? 8 : 4\n const messagePendingLabel = isPersisted ? 'Saving' : 'Sending'\n\n return (\n <Pressable\n onLongPress={handleMessageLongPress}\n onPress={() => setShowMessageMetaToggle(!showMessageMetaToggle)}\n onPressIn={handlePressIn}\n onPressOut={handlePressOut}\n android_ripple={{ color: colors.androidRippleNeutral }}\n accessibilityHint=\"Long press to view message actions like reacting and copying.\"\n >\n <Animated.View style={[styles.message, animatedBackgroundColor]}>\n {!message.mine && (\n <View style={styles.messageAuthor}>\n {renderAuthor ? (\n <Avatar size={'md'} sourceUri={message.author.avatar} />\n ) : (\n <View style={styles.avatarPlaceholder} />\n )}\n </View>\n )}\n <View style={[styles.messageContent, { marginBottom: messageBottomMargin }]}>\n {renderAuthor && <Text variant=\"tertiary\">{message.author.name}</Text>}\n <View style={styles.messageBubble}>\n <ErrorBoundary>\n <MessageAttachments\n attachments={message.attachments}\n metaProps={metaProps}\n onMessageAttachmentLongPress={handleMessageAttachmentLongPress}\n onMessageLongPress={handleMessageLongPress}\n />\n </ErrorBoundary>\n {text && (\n <View style={styles.messageText}>\n <MessageMarkdown text={text} />\n </View>\n )}\n </View>\n {hasReactions && (\n <View style={styles.messageReactions}>\n {reactionCounts.map(reaction => (\n <MessageReaction\n key={reaction.value}\n reaction={reaction}\n onLongPress={handleReactionLongPress}\n message={message}\n conversationId={conversation_id}\n />\n ))}\n </View>\n )}\n {showMessageMeta && (\n <View style={styles.messageMeta}>\n {message.mine && !pending && !error && (\n <MessageReadReceipts\n message={message}\n latestReadMessageSortKey={latestReadMessageSortKey}\n />\n )}\n {error ? (\n <View style={styles.errorContainer}>\n {retryFailedSaveMutation.isPending ? (\n <Spinner size={12} />\n ) : (\n <Icon name=\"general.exclamationTriangle\" size={12} style={styles.errorIcon} />\n )}\n <Text variant=\"footnote\" style={styles.errorText}>\n Failed to {isPersisted ? 'edit' : 'send'} \|{' '}\n <TextInlineButton\n onPress={handleRetry}\n variant=\"footnote\"\n appearance=\"danger\"\n disabled={retryFailedSaveMutation.isPending}\n >\n Try again\n </TextInlineButton>\n </Text>\n </View>\n ) : pending && (!temporarilyHidePendingState \|\| isPersisted) ? (\n <View style={styles.pendingIndicatorContainer}>\n <Icon\n name=\"general.outlinedClock\"\n size={12}\n color={colors.iconColorDefaultSecondary}\n />\n <Text variant=\"footnote\">{messagePendingLabel}</Text>\n </View>\n ) : isPersisted ? (\n <Text variant=\"footnote\">{timestamp}</Text>\n ) : null}\n {!pending && !error && wasEdited && (\n <Text variant=\"footnote\">\n \|{' '}\n <Text variant=\"footnote\" style={styles.editedText}>\n Edited\n </Text>\n </Text>\n )}\n </View>\n )}\n </View>\n </Animated.View>\n </Pressable>\n )\n}\n\nconst useMessageStyles = ({ mine }: MessageResource) => {\n const { colors } = useTheme()\n const myMessageBackgroundColor = useInteractionGhostBackgroundColor()\n const { width } = useWindowDimensions()\n const tabletWidth = width >= 744 // Smallest iPad Mini's width\n\n const messageBubbleBackgroundColor = mine ? myMessageBackgroundColor : colors.fillColorNeutral070\n\n return StyleSheet.create({\n message: {\n gap: 8,\n flexDirection: mine ? 'row-reverse' : 'row',\n paddingHorizontal: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,\n },\n messageContent: {\n flex: 1,\n gap: 4,\n },\n messageAuthor: {\n flexDirection: 'row',\n gap: 8,\n },\n avatarPlaceholder: {\n width: 32, // Same width as avatar\n height: 32, // Same height as avatar\n },\n messageBubble: {\n backgroundColor: messageBubbleBackgroundColor,\n borderRadius: 8,\n maxWidth: tabletWidth ? 360 : '80%',\n alignSelf: mine ? 'flex-end' : 'flex-start',\n },\n messageText: {\n paddingVertical: 6,\n paddingHorizontal: 8,\n },\n messageReactions: {\n flexDirection: 'row',\n gap: 4,\n justifyContent: mine ? 'flex-end' : 'flex-start',\n },\n messageMeta: {\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: mine ? 'flex-end' : 'flex-start',\n gap: 4,\n },\n editedText: {\n fontWeight: platformFontWeightMedium,\n },\n pendingIndicatorContainer: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 4,\n },\n errorContainer: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 4,\n },\n errorIcon: {\n color: colors.statusErrorIcon,\n },\n errorText: {\n color: colors.statusErrorText,\n },\n })\n}\n"]}
1	+ {"version":3,"file":"message.js","sourceRoot":"","sources":["../../../src/components/conversation/message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useNavigation } from '@react-navigation/native'\nimport React, { useEffect } from 'react'\nimport { Platform, Pressable, StyleSheet, useWindowDimensions, View } from 'react-native'\nimport { MessageReaction } from '../../components/conversation/message_reaction'\nimport { Avatar, Icon, Spinner, Text, TextInlineButton } from '../../components/display'\nimport { useInteractionGhostBackgroundColor, useTheme } from '../../hooks'\nimport { MessageResource } from '../../types'\nimport { ReactionCountResource } from '../../types/resources/reaction'\nimport { MessageAttachments } from './message_attachments'\nimport ErrorBoundary from '../page/error_boundary'\nimport { MessageMarkdown } from './message_markdown'\nimport { DenormalizedMessageAttachmentResource } from '../../types/resources/denormalized_attachment_resource'\nimport {\n CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,\n MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,\n platformFontWeightMedium,\n} from '../../utils/styles'\nimport Animated, {\n useSharedValue,\n useAnimatedStyle,\n withTiming,\n interpolateColor,\n Easing,\n} from 'react-native-reanimated'\nimport { useLiveRelativeTime } from '../../hooks/use_live_relative_time'\nimport { MessageReadReceipts } from './message_read_receipts'\nimport { isNewMessage, useMessageCreateOrUpdate } from '../../hooks/use_message_create_or_update'\nimport { Haptic } from '../../utils/native_adapters'\nimport { TheirReplyConnector, MyReplyConnector } from './reply_connectors'\n\n/** Message\n * Component for display of a message within a conversation list\n */\ninterface MessageProps extends MessageResource {\n canDeleteNonAuthoredMessages: boolean\n conversation_id: number\n latestReadMessageSortKey?: string\n}\n\nexport function Message({\n canDeleteNonAuthoredMessages,\n conversation_id,\n latestReadMessageSortKey,\n ...message\n}: MessageProps) {\n const { text, reactionCounts, pending, error } = message\n const styles = useMessageStyles(message)\n const navigation = useNavigation()\n const { colors } = useTheme()\n const hasReactions = reactionCounts.length > 0\n const [showMessageMetaToggle, setShowMessageMetaToggle] = React.useState(false)\n const showMessageMeta =\n showMessageMetaToggle \|\| message.myLatestInConversation \|\| !!pending \|\| !!error \|\| false\n const timestamp = useLiveRelativeTime(message.createdAt)\n const wasEdited = Boolean(message.textEditedAt)\n const isPersisted = !isNewMessage(message)\n const [temporarilyHidePendingState, setTemporarilyHidePendingState] = React.useState(true)\n const [messageBubbleHeight, setMessageBubbleHeight] = React.useState(0)\n\n useEffect(() => {\n if (pending) {\n const timer = setTimeout(() => {\n setTemporarilyHidePendingState(false)\n }, 2000)\n return () => clearTimeout(timer)\n }\n return () => {}\n }, [pending])\n\n const retryFailedSaveMutation = useMessageCreateOrUpdate({\n conversationId: conversation_id,\n message,\n })\n\n const handleRetry = () => {\n if (text && error) {\n retryFailedSaveMutation.mutateAsync({\n text,\n attachments: message.attachmentsForCreate,\n })\n }\n }\n\n const bgFadeProgress = useSharedValue(0)\n const pressedColor = Platform.select({\n ios: colors.fillColorNeutral050Base,\n default: 'transparent',\n })\n const animatedBackgroundColor = useAnimatedStyle(() => {\n const backgroundColor = interpolateColor(\n bgFadeProgress.value,\n [0, 1],\n ['transparent', pressedColor]\n )\n return {\n backgroundColor,\n }\n })\n\n const handlePressIn = () => {\n bgFadeProgress.value = withTiming(1, { duration: 300, easing: Easing.inOut(Easing.ease) })\n }\n\n const handlePressOut = () => {\n bgFadeProgress.value = withTiming(0, { duration: 300, easing: Easing.inOut(Easing.ease) })\n }\n\n const handleMessageLongPress = () => {\n if (!isPersisted) return\n\n Haptic.impactLight()\n navigation.navigate('MessageActions', {\n message_id: message.id,\n conversation_id,\n canDeleteNonAuthoredMessages,\n })\n }\n const handleReactionLongPress = (reaction: ReactionCountResource) => {\n Haptic.impactLight()\n navigation.navigate('Reactions', {\n message_id: message.id,\n conversation_id,\n reaction_value: reaction.value,\n })\n }\n\n const handleMessageAttachmentLongPress = (attachment: DenormalizedMessageAttachmentResource) => {\n Haptic.impactLight()\n navigation.navigate('AttachmentActions', {\n attachmentId: attachment?.id,\n attachmentContentType: attachment?.attributes.contentType,\n attachmentUrl: attachment?.attributes.url,\n conversation_id,\n canDeleteNonAuthoredMessages,\n myMessage: message.mine,\n })\n }\n\n const metaProps = {\n authorName: message.author.name,\n createdAt: message.createdAt,\n }\n\n const renderAuthor = (!message.mine && message.renderAuthor) \|\| false\n const messageBottomMargin = message.lastInGroup ? 12 : hasReactions \|\| showMessageMeta ? 8 : 4\n const messagePendingLabel = isPersisted ? 'Saving' : 'Sending'\n\n return (\n <Pressable\n onLongPress={handleMessageLongPress}\n onPress={() => setShowMessageMetaToggle(!showMessageMetaToggle)}\n onPressIn={handlePressIn}\n onPressOut={handlePressOut}\n android_ripple={{ color: colors.androidRippleNeutral }}\n accessibilityHint=\"Long press to view message actions like reacting and copying.\"\n >\n <Animated.View style={[styles.message, animatedBackgroundColor]}>\n {!message.mine && (\n <View>\n {renderAuthor ? (\n <Avatar\n size={'md'}\n sourceUri={message.author.avatar}\n style={styles.avatar}\n maxFontSizeMultiplier={1}\n minFontSizeMultiplier={1}\n />\n ) : (\n <View style={styles.avatarPlaceholder} />\n )}\n <TheirReplyConnector message={message} messageBubbleHeight={messageBubbleHeight} />\n </View>\n )}\n <View style={[styles.messageContent, { marginBottom: messageBottomMargin }]}>\n {renderAuthor && <Text variant=\"tertiary\">{message.author.name}</Text>}\n <View\n style={styles.messageBubble}\n onLayout={e => setMessageBubbleHeight(e.nativeEvent.layout.height)}\n >\n <ErrorBoundary>\n <MessageAttachments\n attachments={message.attachments}\n metaProps={metaProps}\n onMessageAttachmentLongPress={handleMessageAttachmentLongPress}\n onMessageLongPress={handleMessageLongPress}\n />\n </ErrorBoundary>\n {text && (\n <View style={styles.messageText}>\n <MessageMarkdown text={text} />\n </View>\n )}\n </View>\n {hasReactions && (\n <View style={styles.messageReactions}>\n {reactionCounts.map(reaction => (\n <MessageReaction\n key={reaction.value}\n reaction={reaction}\n onLongPress={handleReactionLongPress}\n message={message}\n conversationId={conversation_id}\n />\n ))}\n </View>\n )}\n {showMessageMeta && (\n <View style={styles.messageMeta}>\n {message.mine && !pending && !error && (\n <MessageReadReceipts\n message={message}\n latestReadMessageSortKey={latestReadMessageSortKey}\n />\n )}\n {error ? (\n <View style={styles.errorContainer}>\n {retryFailedSaveMutation.isPending ? (\n <Spinner size={12} />\n ) : (\n <Icon name=\"general.exclamationTriangle\" size={12} style={styles.errorIcon} />\n )}\n <Text variant=\"footnote\" style={styles.errorText}>\n Failed to {isPersisted ? 'edit' : 'send'} \|{' '}\n <TextInlineButton\n onPress={handleRetry}\n variant=\"footnote\"\n appearance=\"danger\"\n disabled={retryFailedSaveMutation.isPending}\n >\n Try again\n </TextInlineButton>\n </Text>\n </View>\n ) : pending && (!temporarilyHidePendingState \|\| isPersisted) ? (\n <View style={styles.pendingIndicatorContainer}>\n <Icon\n name=\"general.outlinedClock\"\n size={12}\n color={colors.iconColorDefaultSecondary}\n />\n <Text variant=\"footnote\">{messagePendingLabel}</Text>\n </View>\n ) : isPersisted ? (\n <Text variant=\"footnote\">{timestamp}</Text>\n ) : null}\n {!pending && !error && wasEdited && (\n <Text variant=\"footnote\">\n \|{' '}\n <Text variant=\"footnote\" style={styles.editedText}>\n Edited\n </Text>\n </Text>\n )}\n </View>\n )}\n </View>\n {message.mine && (\n <MyReplyConnector message={message} messageBubbleHeight={messageBubbleHeight} />\n )}\n </Animated.View>\n </Pressable>\n )\n}\n\nconst useMessageStyles = ({ mine }: MessageResource) => {\n const { colors } = useTheme()\n const myMessageBackgroundColor = useInteractionGhostBackgroundColor()\n const { width } = useWindowDimensions()\n const tabletWidth = width >= 744 // Smallest iPad Mini's width\n\n const messageBubbleBackgroundColor = mine ? myMessageBackgroundColor : colors.fillColorNeutral070\n\n return StyleSheet.create({\n message: {\n gap: 8,\n flexDirection: mine ? 'row-reverse' : 'row',\n paddingHorizontal: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,\n },\n messageContent: {\n flex: 1,\n gap: 4,\n },\n avatar: {\n marginBottom: 8,\n },\n avatarPlaceholder: {\n width: MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH, // Same width as avatar\n },\n messageBubble: {\n backgroundColor: messageBubbleBackgroundColor,\n borderRadius: 8,\n maxWidth: tabletWidth ? 360 : '80%',\n alignSelf: mine ? 'flex-end' : 'flex-start',\n },\n messageText: {\n paddingVertical: 6,\n paddingHorizontal: 8,\n },\n messageReactions: {\n flexDirection: 'row',\n gap: 4,\n justifyContent: mine ? 'flex-end' : 'flex-start',\n },\n messageMeta: {\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: mine ? 'flex-end' : 'flex-start',\n gap: 4,\n },\n editedText: {\n fontWeight: platformFontWeightMedium,\n },\n pendingIndicatorContainer: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 4,\n },\n errorContainer: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 4,\n },\n errorIcon: {\n color: colors.statusErrorIcon,\n },\n errorText: {\n color: colors.statusErrorText,\n },\n })\n}\n"]}

package/build/components/conversation/reply_connectors.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { MessageResource } from '../../types';
+interface ReplyConnectorProps {
+    message: MessageResource;
+    messageBubbleHeight: number;
+}
+export declare function TheirReplyConnector({ message, messageBubbleHeight }: ReplyConnectorProps): import("react").JSX.Element | null;
+export declare function MyReplyConnector({ message, messageBubbleHeight }: ReplyConnectorProps): import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=reply_connectors.d.ts.map

package/build/components/conversation/reply_connectors.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"reply_connectors.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/reply_connectors.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAU7C,UAAU,mBAAmB;IAC3B,OAAO,EAAE,eAAe,CAAA;IACxB,mBAAmB,EAAE,MAAM,CAAA;CAC5B;AAED,wBAAgB,mBAAmB,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,EAAE,mBAAmB,sCA0BxF;AAGD,wBAAgB,gBAAgB,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,EAAE,mBAAmB,sCAwCrF"}

package/build/components/conversation/reply_connectors.js ADDED Viewed

@@ -0,0 +1,147 @@
+import { StyleSheet, View } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { useTheme } from '../../hooks';
+import { CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL, MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH, } from '../../utils/styles';
+import { REPLIES_FEATURE_ENABLED } from '../../screens/conversation_screen';
+const MY_REPLY_CONNECTOR_WIDTH = 38;
+const CONNECTOR_BORDER_WIDTH = 4;
+export function TheirReplyConnector({ message, messageBubbleHeight }) {
+    const styles = useStyles();
+    if (!REPLIES_FEATURE_ENABLED)
+        return null;
+    // TODO: Need to remove, just adding this to remove the lint warning about message being unused
+    console.log('message', message);
+    const connectorMap = {
+        shortTailCurve: <ShortTailCurveConnector height={messageBubbleHeight / 2}/>,
+        verticalLine: <VerticalLineConnector />,
+        default: null,
+    };
+    // TODO: Currently using fake message attributes. Will need to refactor once we have the message reply logic in place.
+    const getConnectorKey = () => {
+        // TODO: if (message.previousMessageIsTheirReplyMessage && message.nextMessageIsSomeoneElseReplyMessage) return 'shortTailCurve'
+        // TODO: if (message.isRootMessage || (message.isTheirReplyMessage && message.nextMessageIsTheirReplyMessage) || (message.isTheirReplyMessage && message.nextMessageIsSomeoneElseReplyMessage && !message.nextMessageIsMyMessage)) return 'verticalLine'
+        return 'default';
+    };
+    const ConnectorComponent = connectorMap[getConnectorKey()];
+    if (!ConnectorComponent)
+        return null;
+    return <View style={styles.theirReplyConnectorContainer}>{ConnectorComponent}</View>;
+}
+// TODO: Refactor how we choose the correct connector once we have the logic in place
+export function MyReplyConnector({ message, messageBubbleHeight }) {
+    const styles = useStyles();
+    if (!REPLIES_FEATURE_ENABLED)
+        return null;
+    // TODO: Need to remove, just adding this to remove the lint warning about message being unused
+    console.log('message', message);
+    const connectorMap = {
+        longTailCurve: (<LongTailCurveConnector height={messageBubbleHeight / 2} style={styles.myReplyConnectorPosition}/>),
+        longHeadCurve: (<LongHeadCurveConnector height={messageBubbleHeight / 2} style={styles.myReplyConnectorPosition}/>),
+        verticalLine: <VerticalLineConnector style={styles.myReplyConnectorPosition}/>,
+        swirl: <SwirlConnector style={styles.myReplyConnectorPosition}/>,
+        default: null,
+    };
+    // TODO: Currently using fake message attributes. Will need to refactor once we have the message reply logic in place.
+    const getConnectorKey = () => {
+        // TODO: if (message.currentMessageIsReply && (message.nextMessageIsNotReplyMessage || message.nextMessageIsDifferentReplyRootId)) return 'longTailCurve'
+        // TODO: if (message.currentMessageIsReplyRoot && message.nextMessageIsMyReply) return 'longHeadCurve'
+        // TODO: if (message.currentMessageIsReply && message.nextMessageIsReply) return 'verticalLine'
+        // TODO: if (message.currentMessageIsReply && message.previousMessageSomeoneElseReply && (message.nextMessageIsSomeoneElseReply || message.nextMessageIsMyReply)) return 'swirl'
+        return 'default';
+    };
+    const ConnectorComponent = connectorMap[getConnectorKey()];
+    if (!ConnectorComponent)
+        return null;
+    return <View style={styles.myReplyConnectorContainer}>{ConnectorComponent}</View>;
+}
+function VerticalLineConnector({ style }) {
+    const styles = useStyles();
+    return <View style={[styles.verticalLineConnector, style]}/>;
+}
+function LongHeadCurveConnector({ height, style }) {
+    const styles = useStyles();
+    return <View style={[styles.longHeadCurveConnector, { height, marginTop: height }, style]}/>;
+}
+function LongTailCurveConnector({ height, style }) {
+    const styles = useStyles();
+    return <View style={[styles.longTailCurveConnector, { height }, style]}/>;
+}
+function ShortTailCurveConnector({ height }) {
+    const styles = useStyles();
+    return <View style={[styles.shortTailCurveConnector, { height }]}/>;
+}
+function SwirlConnector({ style }) {
+    const styles = useStyles();
+    const { colors } = useTheme();
+    const borderColor = colors.borderColorDefaultBase;
+    return (<View style={[styles.swirlConnectorContainer, style]}>
+      <View style={styles.swirlConnectorVerticalLineHead}/>
+      <Svg width={27} height={34} fill="none">
+        <Path stroke={borderColor} strokeWidth={CONNECTOR_BORDER_WIDTH} d="M2.07 34c0-6.142 1.201-12.283 3.343-17m0 0c2.305-5.075 5.699-8.5 9.857-8.5 4.86 0 8.8 3.806 8.8 8.5s-3.94 8.5-8.8 8.5c-4.158 0-7.552-3.425-9.857-8.5zm0 0C3.271 12.283 2.07 6.142 2.07 0"/>
+      </Svg>
+      <View style={styles.swirlConnectorVerticalLineTail}/>
+    </View>);
+}
+const useStyles = () => {
+    const { colors } = useTheme();
+    const borderColor = colors.borderColorDefaultBase;
+    return StyleSheet.create({
+        theirReplyConnectorContainer: {
+            width: '50%',
+            alignSelf: 'flex-end',
+            flex: 1,
+        },
+        myReplyConnectorContainer: {
+            width: MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,
+            position: 'absolute',
+            left: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,
+            top: 0,
+            bottom: 0,
+        },
+        myReplyConnectorPosition: {
+            left: '50%',
+        },
+        verticalLineConnector: {
+            flex: 1,
+            borderLeftWidth: CONNECTOR_BORDER_WIDTH,
+            borderLeftColor: borderColor,
+        },
+        longHeadCurveConnector: {
+            width: MY_REPLY_CONNECTOR_WIDTH,
+            borderColor: borderColor,
+            borderLeftWidth: CONNECTOR_BORDER_WIDTH,
+            borderTopWidth: CONNECTOR_BORDER_WIDTH,
+            borderTopLeftRadius: 16,
+            flex: 1,
+        },
+        longTailCurveConnector: {
+            width: MY_REPLY_CONNECTOR_WIDTH,
+            borderColor: borderColor,
+            borderLeftWidth: CONNECTOR_BORDER_WIDTH,
+            borderBottomWidth: CONNECTOR_BORDER_WIDTH,
+            borderBottomLeftRadius: 16,
+        },
+        shortTailCurveConnector: {
+            borderColor: borderColor,
+            borderLeftWidth: CONNECTOR_BORDER_WIDTH,
+            borderBottomWidth: CONNECTOR_BORDER_WIDTH,
+            borderBottomLeftRadius: 16,
+        },
+        swirlConnectorContainer: {
+            flex: 1,
+        },
+        swirlConnectorVerticalLineHead: {
+            backgroundColor: borderColor,
+            width: CONNECTOR_BORDER_WIDTH,
+            flex: 1,
+            marginBottom: -1, // Ensures there is no gap between the vertical line and the swirl connector
+        },
+        swirlConnectorVerticalLineTail: {
+            backgroundColor: borderColor,
+            width: CONNECTOR_BORDER_WIDTH,
+            flex: 1,
+            marginTop: -1, // Ensures there is no gap between the vertical line and the swirl connector
+        },
+    });
+};
+//# sourceMappingURL=reply_connectors.js.map

package/build/components/conversation/reply_connectors.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"reply_connectors.js","sourceRoot":"","sources":["../../../src/components/conversation/reply_connectors.tsx"],"names":[],"mappings":"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","sourcesContent":["import { StyleSheet, View, ViewStyle } from 'react-native'\nimport Svg, { Path } from 'react-native-svg'\nimport { useTheme } from '../../hooks'\nimport { MessageResource } from '../../types'\nimport {\n CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,\n MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,\n} from '../../utils/styles'\nimport { REPLIES_FEATURE_ENABLED } from '../../screens/conversation_screen'\n\nconst MY_REPLY_CONNECTOR_WIDTH = 38\nconst CONNECTOR_BORDER_WIDTH = 4\n\ninterface ReplyConnectorProps {\n message: MessageResource\n messageBubbleHeight: number\n}\n\nexport function TheirReplyConnector({ message, messageBubbleHeight }: ReplyConnectorProps) {\n const styles = useStyles()\n\n if (!REPLIES_FEATURE_ENABLED) return null\n\n // TODO: Need to remove, just adding this to remove the lint warning about message being unused\n console.log('message', message)\n\n const connectorMap: Record<string, React.ReactNode | null> = {\n shortTailCurve: <ShortTailCurveConnector height={messageBubbleHeight / 2} />,\n verticalLine: <VerticalLineConnector />,\n default: null,\n }\n\n // TODO: Currently using fake message attributes. Will need to refactor once we have the message reply logic in place.\n const getConnectorKey = () => {\n // TODO: if (message.previousMessageIsTheirReplyMessage && message.nextMessageIsSomeoneElseReplyMessage) return 'shortTailCurve'\n // TODO: if (message.isRootMessage || (message.isTheirReplyMessage && message.nextMessageIsTheirReplyMessage) || (message.isTheirReplyMessage && message.nextMessageIsSomeoneElseReplyMessage && !message.nextMessageIsMyMessage)) return 'verticalLine'\n return 'default'\n }\n\n const ConnectorComponent = connectorMap[getConnectorKey()]\n\n if (!ConnectorComponent) return null\n\n return <View style={styles.theirReplyConnectorContainer}>{ConnectorComponent}</View>\n}\n\n// TODO: Refactor how we choose the correct connector once we have the logic in place\nexport function MyReplyConnector({ message, messageBubbleHeight }: ReplyConnectorProps) {\n const styles = useStyles()\n\n if (!REPLIES_FEATURE_ENABLED) return null\n\n // TODO: Need to remove, just adding this to remove the lint warning about message being unused\n console.log('message', message)\n\n const connectorMap: Record<string, React.ReactNode | null> = {\n longTailCurve: (\n <LongTailCurveConnector\n height={messageBubbleHeight / 2}\n style={styles.myReplyConnectorPosition}\n />\n ),\n longHeadCurve: (\n <LongHeadCurveConnector\n height={messageBubbleHeight / 2}\n style={styles.myReplyConnectorPosition}\n />\n ),\n verticalLine: <VerticalLineConnector style={styles.myReplyConnectorPosition} />,\n swirl: <SwirlConnector style={styles.myReplyConnectorPosition} />,\n default: null,\n }\n\n // TODO: Currently using fake message attributes. Will need to refactor once we have the message reply logic in place.\n const getConnectorKey = () => {\n // TODO: if (message.currentMessageIsReply && (message.nextMessageIsNotReplyMessage || message.nextMessageIsDifferentReplyRootId)) return 'longTailCurve'\n // TODO: if (message.currentMessageIsReplyRoot && message.nextMessageIsMyReply) return 'longHeadCurve'\n // TODO: if (message.currentMessageIsReply && message.nextMessageIsReply) return 'verticalLine'\n // TODO: if (message.currentMessageIsReply && message.previousMessageSomeoneElseReply && (message.nextMessageIsSomeoneElseReply || message.nextMessageIsMyReply)) return 'swirl'\n return 'default'\n }\n\n const ConnectorComponent = connectorMap[getConnectorKey()]\n\n if (!ConnectorComponent) return null\n\n return <View style={styles.myReplyConnectorContainer}>{ConnectorComponent}</View>\n}\n\nfunction VerticalLineConnector({ style }: { style?: ViewStyle }) {\n const styles = useStyles()\n return <View style={[styles.verticalLineConnector, style]} />\n}\n\nfunction LongHeadCurveConnector({ height, style }: { height: number; style?: ViewStyle }) {\n const styles = useStyles()\n return <View style={[styles.longHeadCurveConnector, { height, marginTop: height }, style]} />\n}\n\nfunction LongTailCurveConnector({ height, style }: { height: number; style?: ViewStyle }) {\n const styles = useStyles()\n return <View style={[styles.longTailCurveConnector, { height }, style]} />\n}\n\nfunction ShortTailCurveConnector({ height }: { height: number }) {\n const styles = useStyles()\n return <View style={[styles.shortTailCurveConnector, { height }]} />\n}\n\nfunction SwirlConnector({ style }: { style?: ViewStyle }) {\n const styles = useStyles()\n const { colors } = useTheme()\n const borderColor = colors.borderColorDefaultBase\n\n return (\n <View style={[styles.swirlConnectorContainer, style]}>\n <View style={styles.swirlConnectorVerticalLineHead} />\n <Svg width={27} height={34} fill=\"none\">\n <Path\n stroke={borderColor}\n strokeWidth={CONNECTOR_BORDER_WIDTH}\n d=\"M2.07 34c0-6.142 1.201-12.283 3.343-17m0 0c2.305-5.075 5.699-8.5 9.857-8.5 4.86 0 8.8 3.806 8.8 8.5s-3.94 8.5-8.8 8.5c-4.158 0-7.552-3.425-9.857-8.5zm0 0C3.271 12.283 2.07 6.142 2.07 0\"\n />\n </Svg>\n <View style={styles.swirlConnectorVerticalLineTail} />\n </View>\n )\n}\n\nconst useStyles = () => {\n const { colors } = useTheme()\n const borderColor = colors.borderColorDefaultBase\n\n return StyleSheet.create({\n theirReplyConnectorContainer: {\n width: '50%',\n alignSelf: 'flex-end',\n flex: 1,\n },\n myReplyConnectorContainer: {\n width: MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,\n position: 'absolute',\n left: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,\n top: 0,\n bottom: 0,\n },\n myReplyConnectorPosition: {\n left: '50%',\n },\n verticalLineConnector: {\n flex: 1,\n borderLeftWidth: CONNECTOR_BORDER_WIDTH,\n borderLeftColor: borderColor,\n },\n longHeadCurveConnector: {\n width: MY_REPLY_CONNECTOR_WIDTH,\n borderColor: borderColor,\n borderLeftWidth: CONNECTOR_BORDER_WIDTH,\n borderTopWidth: CONNECTOR_BORDER_WIDTH,\n borderTopLeftRadius: 16,\n flex: 1,\n },\n longTailCurveConnector: {\n width: MY_REPLY_CONNECTOR_WIDTH,\n borderColor: borderColor,\n borderLeftWidth: CONNECTOR_BORDER_WIDTH,\n borderBottomWidth: CONNECTOR_BORDER_WIDTH,\n borderBottomLeftRadius: 16,\n },\n shortTailCurveConnector: {\n borderColor: borderColor,\n borderLeftWidth: CONNECTOR_BORDER_WIDTH,\n borderBottomWidth: CONNECTOR_BORDER_WIDTH,\n borderBottomLeftRadius: 16,\n },\n swirlConnectorContainer: {\n flex: 1,\n },\n swirlConnectorVerticalLineHead: {\n backgroundColor: borderColor,\n width: CONNECTOR_BORDER_WIDTH,\n flex: 1,\n marginBottom: -1, // Ensures there is no gap between the vertical line and the swirl connector\n },\n swirlConnectorVerticalLineTail: {\n backgroundColor: borderColor,\n width: CONNECTOR_BORDER_WIDTH,\n flex: 1,\n marginTop: -1, // Ensures there is no gap between the vertical line and the swirl connector\n },\n })\n}\n"]}

package/build/components/display/avatar.d.ts CHANGED Viewed

@@ -9,7 +9,8 @@ interface AvatarProps {
     fallbackIconName?: IconString;
     style?: AvatarRootProps['style'];
     maxFontSizeMultiplier?: AvatarRootProps['maxFontSizeMultiplier'];
+    minFontSizeMultiplier?: AvatarRootProps['minFontSizeMultiplier'];
 }
-export declare function Avatar({ presence, size, sourceUri, showFallback, fallbackIconName, style, maxFontSizeMultiplier, }: AvatarProps): React.JSX.Element;
+export declare function Avatar({ presence, size, sourceUri, showFallback, fallbackIconName, style, maxFontSizeMultiplier, minFontSizeMultiplier, }: AvatarProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=avatar.d.ts.map

package/build/components/display/avatar.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/display/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAwB,EACtB,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACrB,MAAM,+BAA+B,CAAA;AACtC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,QAAQ,CAAA;AAExC,UAAU,WAAW;IACnB,SAAS,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAA;IACxC,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;IAC9B,QAAQ,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAA;IAC1C,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,gBAAgB,CAAC,EAAE,UAAU,CAAA;IAC7B,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAA;IAChC,qBAAqB,CAAC,EAAE,eAAe,CAAC,uBAAuB,CAAC,CAAA;CACjE;AAED,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,IAAW,EACX,SAAS,EACT,YAAoB,EACpB,gBAAmC,EACnC,KAAK,EACL,qBAAqB,GACtB,EAAE,WAAW,~~qBAeb~~"}
1	+ {"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/display/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAwB,EACtB,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACrB,MAAM,+BAA+B,CAAA;AACtC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,QAAQ,CAAA;AAExC,UAAU,WAAW;IACnB,SAAS,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAA;IACxC,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;IAC9B,QAAQ,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAA;IAC1C,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,gBAAgB,CAAC,EAAE,UAAU,CAAA;IAC7B,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAA;IAChC,qBAAqB,CAAC,EAAE,eAAe,CAAC,uBAAuB,CAAC,CAAA;IAChE,qBAAqB,CAAC,EAAE,eAAe,CAAC,uBAAuB,CAAC,CAAA;CACjE;AAED,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,IAAW,EACX,SAAS,EACT,YAAoB,EACpB,gBAAmC,EACnC,KAAK,EACL,qBAAqB,EACrB,qBAAqB,GACtB,EAAE,WAAW,qBAoBb"}

package/build/components/display/avatar.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import React from 'react';
 import AvatarPrimitive from '../primitive/avatar_primitive';
-export function Avatar({ presence, size = 'lg', sourceUri, showFallback = false, fallbackIconName = 'general.person', style, maxFontSizeMultiplier, }) {
+export function Avatar({ presence, size = 'lg', sourceUri, showFallback = false, fallbackIconName = 'general.person', style, maxFontSizeMultiplier, minFontSizeMultiplier, }) {
     const shouldShowFallback = showFallback || !sourceUri;
-    return (<AvatarPrimitive.Root size={size} style={style} maxFontSizeMultiplier={maxFontSizeMultiplier}>
+    return (<AvatarPrimitive.Root size={size} style={style} maxFontSizeMultiplier={maxFontSizeMultiplier} minFontSizeMultiplier={minFontSizeMultiplier}>
       <AvatarPrimitive.Mask>
         {shouldShowFallback ? (<AvatarPrimitive.ImageFallback name={fallbackIconName}/>) : (<AvatarPrimitive.Image sourceUri={sourceUri}/>)}
       </AvatarPrimitive.Mask>

package/build/components/display/avatar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/components/display/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,eAIN,MAAM,+BAA+B,CAAA;~~AAatC~~,MAAM,UAAU,MAAM,CAAC,EACrB,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,SAAS,EACT,YAAY,GAAG,KAAK,EACpB,gBAAgB,GAAG,gBAAgB,EACnC,KAAK,EACL,qBAAqB,GACT;IACZ,MAAM,kBAAkB,GAAG,YAAY,IAAI,CAAC,SAAS,CAAA;IAErD,OAAO,CACL,CAAC,eAAe,CAAC,IAAI,~~CAAC~~,IAAI,CAAC,CAAC,IAAI,CAAC,~~CAAC~~,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,qBAAqB,CAAC,CAAC,qBAAqB,CAAC,~~CAC3F~~;MAAA,CAAC,eAAe,CAAC,IAAI,CACnB;QAAA,CAAC,kBAAkB,CAAC,CAAC,CAAC,CACpB,CAAC,eAAe,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,EAAG,CAC1D,CAAC,CAAC,CAAC,CACF,CAAC,eAAe,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,EAAG,CAChD,CACH;MAAA,EAAE,eAAe,CAAC,IAAI,CACtB;MAAA,CAAC,QAAQ,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,EAAG,CAC/D;IAAA,EAAE,eAAe,CAAC,IAAI,CAAC,CACxB,CAAA;AACH,CAAC","sourcesContent":["import React from 'react'\nimport AvatarPrimitive, {\n type AvatarImageProps,\n type AvatarPresenceProps,\n type AvatarRootProps,\n} from '../primitive/avatar_primitive'\nimport { type IconString } from './icon'\n\ninterface AvatarProps {\n sourceUri: AvatarImageProps['sourceUri']\n size?: AvatarRootProps['size']\n presence?: AvatarPresenceProps['presence']\n showFallback?: boolean\n fallbackIconName?: IconString\n style?: AvatarRootProps['style']\n maxFontSizeMultiplier?: AvatarRootProps['maxFontSizeMultiplier']\n}\n\nexport function Avatar({\n presence,\n size = 'lg',\n sourceUri,\n showFallback = false,\n fallbackIconName = 'general.person',\n style,\n maxFontSizeMultiplier,\n}: AvatarProps) {\n const shouldShowFallback = showFallback \|\| !sourceUri\n\n return (\n <AvatarPrimitive.Root size={size} style={style} maxFontSizeMultiplier={maxFontSizeMultiplier}>\n <AvatarPrimitive.Mask>\n {shouldShowFallback ? (\n <AvatarPrimitive.ImageFallback name={fallbackIconName} />\n ) : (\n <AvatarPrimitive.Image sourceUri={sourceUri} />\n )}\n </AvatarPrimitive.Mask>\n {presence && <AvatarPrimitive.Presence presence={presence} />}\n </AvatarPrimitive.Root>\n )\n}\n"]}
1	+ {"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/components/display/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,eAIN,MAAM,+BAA+B,CAAA;AActC,MAAM,UAAU,MAAM,CAAC,EACrB,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,SAAS,EACT,YAAY,GAAG,KAAK,EACpB,gBAAgB,GAAG,gBAAgB,EACnC,KAAK,EACL,qBAAqB,EACrB,qBAAqB,GACT;IACZ,MAAM,kBAAkB,GAAG,YAAY,IAAI,CAAC,SAAS,CAAA;IAErD,OAAO,CACL,CAAC,eAAe,CAAC,IAAI,CACnB,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,qBAAqB,CAAC,CAAC,qBAAqB,CAAC,CAC7C,qBAAqB,CAAC,CAAC,qBAAqB,CAAC,CAE7C;MAAA,CAAC,eAAe,CAAC,IAAI,CACnB;QAAA,CAAC,kBAAkB,CAAC,CAAC,CAAC,CACpB,CAAC,eAAe,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,EAAG,CAC1D,CAAC,CAAC,CAAC,CACF,CAAC,eAAe,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,EAAG,CAChD,CACH;MAAA,EAAE,eAAe,CAAC,IAAI,CACtB;MAAA,CAAC,QAAQ,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,EAAG,CAC/D;IAAA,EAAE,eAAe,CAAC,IAAI,CAAC,CACxB,CAAA;AACH,CAAC","sourcesContent":["import React from 'react'\nimport AvatarPrimitive, {\n type AvatarImageProps,\n type AvatarPresenceProps,\n type AvatarRootProps,\n} from '../primitive/avatar_primitive'\nimport { type IconString } from './icon'\n\ninterface AvatarProps {\n sourceUri: AvatarImageProps['sourceUri']\n size?: AvatarRootProps['size']\n presence?: AvatarPresenceProps['presence']\n showFallback?: boolean\n fallbackIconName?: IconString\n style?: AvatarRootProps['style']\n maxFontSizeMultiplier?: AvatarRootProps['maxFontSizeMultiplier']\n minFontSizeMultiplier?: AvatarRootProps['minFontSizeMultiplier']\n}\n\nexport function Avatar({\n presence,\n size = 'lg',\n sourceUri,\n showFallback = false,\n fallbackIconName = 'general.person',\n style,\n maxFontSizeMultiplier,\n minFontSizeMultiplier,\n}: AvatarProps) {\n const shouldShowFallback = showFallback \|\| !sourceUri\n\n return (\n <AvatarPrimitive.Root\n size={size}\n style={style}\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n minFontSizeMultiplier={minFontSizeMultiplier}\n >\n <AvatarPrimitive.Mask>\n {shouldShowFallback ? (\n <AvatarPrimitive.ImageFallback name={fallbackIconName} />\n ) : (\n <AvatarPrimitive.Image sourceUri={sourceUri} />\n )}\n </AvatarPrimitive.Mask>\n {presence && <AvatarPrimitive.Presence presence={presence} />}\n </AvatarPrimitive.Root>\n )\n}\n"]}

package/build/components/display/avatar_group.d.ts CHANGED Viewed

@@ -8,7 +8,8 @@ interface AvatarGroupDisplayProps {
     size?: AvatarRootProps['size'];
     style?: AvatarRootProps['style'];
     maxFontSizeMultiplier?: AvatarRootProps['maxFontSizeMultiplier'];
+    minFontSizeMultiplier?: AvatarRootProps['minFontSizeMultiplier'];
 }
-export declare function AvatarGroup({ sourceUris, showFallback, fallbackIconName, size, style, maxFontSizeMultiplier, }: AvatarGroupDisplayProps): React.JSX.Element;
+export declare function AvatarGroup({ sourceUris, showFallback, fallbackIconName, size, style, maxFontSizeMultiplier, minFontSizeMultiplier, }: AvatarGroupDisplayProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=avatar_group.d.ts.map

package/build/components/display/avatar_group.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"avatar_group.d.ts","sourceRoot":"","sources":["../../../src/components/display/avatar_group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAwB,EACtB,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACrB,MAAM,+BAA+B,CAAA;AACtC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,QAAQ,CAAA;AAExC,UAAU,uBAAuB;IAC/B,UAAU,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAA;IAC1C,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,gBAAgB,CAAC,EAAE,UAAU,CAAA;IAC7B,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;IAC9B,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAA;IAChC,qBAAqB,CAAC,EAAE,eAAe,CAAC,uBAAuB,CAAC,CAAA;CACjE;AAED,wBAAgB,WAAW,CAAC,EAC1B,UAAU,EACV,YAAoB,EACpB,gBAAmC,EACnC,IAAW,EACX,KAAK,EACL,qBAAqB,GACtB,EAAE,uBAAuB,~~qBAiBzB~~"}
1	+ {"version":3,"file":"avatar_group.d.ts","sourceRoot":"","sources":["../../../src/components/display/avatar_group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAwB,EACtB,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACrB,MAAM,+BAA+B,CAAA;AACtC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,QAAQ,CAAA;AAExC,UAAU,uBAAuB;IAC/B,UAAU,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAA;IAC1C,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,gBAAgB,CAAC,EAAE,UAAU,CAAA;IAC7B,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;IAC9B,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAA;IAChC,qBAAqB,CAAC,EAAE,eAAe,CAAC,uBAAuB,CAAC,CAAA;IAChE,qBAAqB,CAAC,EAAE,eAAe,CAAC,uBAAuB,CAAC,CAAA;CACjE;AAED,wBAAgB,WAAW,CAAC,EAC1B,UAAU,EACV,YAAoB,EACpB,gBAAmC,EACnC,IAAW,EACX,KAAK,EACL,qBAAqB,EACrB,qBAAqB,GACtB,EAAE,uBAAuB,qBAsBzB"}

package/build/components/display/avatar_group.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import React from 'react';
 import AvatarPrimitive from '../primitive/avatar_primitive';
-export function AvatarGroup({ sourceUris, showFallback = false, fallbackIconName = 'general.person', size = 'lg', style, maxFontSizeMultiplier, }) {
+export function AvatarGroup({ sourceUris, showFallback = false, fallbackIconName = 'general.person', size = 'lg', style, maxFontSizeMultiplier, minFontSizeMultiplier, }) {
     const shouldShowFallback = showFallback || !sourceUris || sourceUris.length === 0;
-    return (<AvatarPrimitive.Root size={size} style={style} maxFontSizeMultiplier={maxFontSizeMultiplier}>
+    return (<AvatarPrimitive.Root size={size} style={style} maxFontSizeMultiplier={maxFontSizeMultiplier} minFontSizeMultiplier={minFontSizeMultiplier}>
       <AvatarPrimitive.Mask>
         {shouldShowFallback ? (<AvatarPrimitive.ImageFallback name={fallbackIconName}/>) : (<>
             <AvatarPrimitive.Group sourceUris={sourceUris}/>

package/build/components/display/avatar_group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"avatar_group.js","sourceRoot":"","sources":["../../../src/components/display/avatar_group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,eAGN,MAAM,+BAA+B,CAAA;~~AAYtC~~,MAAM,UAAU,WAAW,CAAC,EAC1B,UAAU,EACV,YAAY,GAAG,KAAK,EACpB,gBAAgB,GAAG,gBAAgB,EACnC,IAAI,GAAG,IAAI,EACX,KAAK,EACL,qBAAqB,GACG;IACxB,MAAM,kBAAkB,GAAG,YAAY,IAAI,CAAC,UAAU,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC,CAAA;IAEjF,OAAO,CACL,CAAC,eAAe,CAAC,IAAI,~~CAAC~~,IAAI,CAAC,CAAC,IAAI,CAAC,~~CAAC~~,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,qBAAqB,CAAC,CAAC,qBAAqB,CAAC,~~CAC3F~~;MAAA,CAAC,eAAe,CAAC,IAAI,CACnB;QAAA,CAAC,kBAAkB,CAAC,CAAC,CAAC,CACpB,CAAC,eAAe,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,EAAG,CAC1D,CAAC,CAAC,CAAC,CACF,EACE;YAAA,CAAC,eAAe,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,EAC9C;YAAA,CAAC,eAAe,CAAC,WAAW,CAAC,AAAD,EAC9B;UAAA,GAAG,CACJ,CACH;MAAA,EAAE,eAAe,CAAC,IAAI,CACxB;IAAA,EAAE,eAAe,CAAC,IAAI,CAAC,CACxB,CAAA;AACH,CAAC","sourcesContent":["import React from 'react'\nimport AvatarPrimitive, {\n type AvatarGroupProps,\n type AvatarRootProps,\n} from '../primitive/avatar_primitive'\nimport { type IconString } from './icon'\n\ninterface AvatarGroupDisplayProps {\n sourceUris: AvatarGroupProps['sourceUris']\n showFallback?: boolean\n fallbackIconName?: IconString\n size?: AvatarRootProps['size']\n style?: AvatarRootProps['style']\n maxFontSizeMultiplier?: AvatarRootProps['maxFontSizeMultiplier']\n}\n\nexport function AvatarGroup({\n sourceUris,\n showFallback = false,\n fallbackIconName = 'general.person',\n size = 'lg',\n style,\n maxFontSizeMultiplier,\n}: AvatarGroupDisplayProps) {\n const shouldShowFallback = showFallback \|\| !sourceUris \|\| sourceUris.length === 0\n\n return (\n <AvatarPrimitive.Root size={size} style={style} maxFontSizeMultiplier={maxFontSizeMultiplier}>\n <AvatarPrimitive.Mask>\n {shouldShowFallback ? (\n <AvatarPrimitive.ImageFallback name={fallbackIconName} />\n ) : (\n <>\n <AvatarPrimitive.Group sourceUris={sourceUris} />\n <AvatarPrimitive.GroupLoader />\n </>\n )}\n </AvatarPrimitive.Mask>\n </AvatarPrimitive.Root>\n )\n}\n"]}
1	+ {"version":3,"file":"avatar_group.js","sourceRoot":"","sources":["../../../src/components/display/avatar_group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,eAGN,MAAM,+BAA+B,CAAA;AAatC,MAAM,UAAU,WAAW,CAAC,EAC1B,UAAU,EACV,YAAY,GAAG,KAAK,EACpB,gBAAgB,GAAG,gBAAgB,EACnC,IAAI,GAAG,IAAI,EACX,KAAK,EACL,qBAAqB,EACrB,qBAAqB,GACG;IACxB,MAAM,kBAAkB,GAAG,YAAY,IAAI,CAAC,UAAU,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC,CAAA;IAEjF,OAAO,CACL,CAAC,eAAe,CAAC,IAAI,CACnB,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,qBAAqB,CAAC,CAAC,qBAAqB,CAAC,CAC7C,qBAAqB,CAAC,CAAC,qBAAqB,CAAC,CAE7C;MAAA,CAAC,eAAe,CAAC,IAAI,CACnB;QAAA,CAAC,kBAAkB,CAAC,CAAC,CAAC,CACpB,CAAC,eAAe,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,EAAG,CAC1D,CAAC,CAAC,CAAC,CACF,EACE;YAAA,CAAC,eAAe,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,EAC9C;YAAA,CAAC,eAAe,CAAC,WAAW,CAAC,AAAD,EAC9B;UAAA,GAAG,CACJ,CACH;MAAA,EAAE,eAAe,CAAC,IAAI,CACxB;IAAA,EAAE,eAAe,CAAC,IAAI,CAAC,CACxB,CAAA;AACH,CAAC","sourcesContent":["import React from 'react'\nimport AvatarPrimitive, {\n type AvatarGroupProps,\n type AvatarRootProps,\n} from '../primitive/avatar_primitive'\nimport { type IconString } from './icon'\n\ninterface AvatarGroupDisplayProps {\n sourceUris: AvatarGroupProps['sourceUris']\n showFallback?: boolean\n fallbackIconName?: IconString\n size?: AvatarRootProps['size']\n style?: AvatarRootProps['style']\n maxFontSizeMultiplier?: AvatarRootProps['maxFontSizeMultiplier']\n minFontSizeMultiplier?: AvatarRootProps['minFontSizeMultiplier']\n}\n\nexport function AvatarGroup({\n sourceUris,\n showFallback = false,\n fallbackIconName = 'general.person',\n size = 'lg',\n style,\n maxFontSizeMultiplier,\n minFontSizeMultiplier,\n}: AvatarGroupDisplayProps) {\n const shouldShowFallback = showFallback \|\| !sourceUris \|\| sourceUris.length === 0\n\n return (\n <AvatarPrimitive.Root\n size={size}\n style={style}\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n minFontSizeMultiplier={minFontSizeMultiplier}\n >\n <AvatarPrimitive.Mask>\n {shouldShowFallback ? (\n <AvatarPrimitive.ImageFallback name={fallbackIconName} />\n ) : (\n <>\n <AvatarPrimitive.Group sourceUris={sourceUris} />\n <AvatarPrimitive.GroupLoader />\n </>\n )}\n </AvatarPrimitive.Mask>\n </AvatarPrimitive.Root>\n )\n}\n"]}

package/build/components/primitive/avatar_primitive.d.ts CHANGED Viewed

@@ -30,6 +30,7 @@ interface AvatarRootProps {
     size?: AvatarSize;
     style?: ViewProps['style'];
     maxFontSizeMultiplier?: number;
+    minFontSizeMultiplier?: number;
 }
 type AvatarMaskProps = ViewProps;
 interface AvatarImageProps extends Omit<ImageProps, 'source' | 'alt'> {

package/build/components/primitive/avatar_primitive.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"avatar_primitive.d.ts","sourceRoot":"","sources":["../../../src/components/primitive/avatar_primitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAA;AAC7E,OAAO,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAA;AAE1D,OAAO,EAAQ,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAClD,OAAO,EAAS,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAkBpD,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,CAAA;IAC/B,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAA;IACjC,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAAC,CAAA;IACjD,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAA;IACvC,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAA;IACjC,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAA;IAC5C,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,CAAA;CAChC,CAAA;wBAEwB,gBAAgB;AAAzC,wBAAyC;AACzC,YAAY,EACV,gBAAgB,EAChB,wBAAwB,EACxB,mBAAmB,EACnB,gBAAgB,EAChB,eAAe,EACf,eAAe,GAChB,CAAA;AAMD,QAAA,MAAM,YAAY;;;;CAIR,CAAA;AAEV,QAAA,MAAM,qBAAqB;;;CAGjB,CAAA;AAGV,KAAK,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,OAAO,YAAY,CAAC,CAAA;AAClE,KAAK,kBAAkB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,OAAO,qBAAqB,CAAC,CAAA;~~AA6C5F~~,UAAU,eAAe;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAA;IAC1B,qBAAqB,CAAC,EAAE,MAAM,CAAA;CAC/B;~~AA0BD~~,KAAK,eAAe,GAAG,SAAS,CAAA;AAmBhC,UAAU,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,KAAK,CAAC;IACnE,SAAS,EAAE,MAAM,CAAA;CAClB;AAwBD,UAAU,wBAAwB;IAChC,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB;AA0BD,UAAU,gBAAgB;IACxB,UAAU,EAAE,MAAM,EAAE,CAAA;CACrB;AAuID,UAAU,mBAAoB,SAAQ,SAAS;IAC7C,QAAQ,EAAE,kBAAkB,CAAA;CAC7B"}
1	+ {"version":3,"file":"avatar_primitive.d.ts","sourceRoot":"","sources":["../../../src/components/primitive/avatar_primitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAA;AAC7E,OAAO,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAA;AAE1D,OAAO,EAAQ,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAClD,OAAO,EAAS,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAkBpD,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,CAAA;IAC/B,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAA;IACjC,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAAC,CAAA;IACjD,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAA;IACvC,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAA;IACjC,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAA;IAC5C,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,CAAA;CAChC,CAAA;wBAEwB,gBAAgB;AAAzC,wBAAyC;AACzC,YAAY,EACV,gBAAgB,EAChB,wBAAwB,EACxB,mBAAmB,EACnB,gBAAgB,EAChB,eAAe,EACf,eAAe,GAChB,CAAA;AAMD,QAAA,MAAM,YAAY;;;;CAIR,CAAA;AAEV,QAAA,MAAM,qBAAqB;;;CAGjB,CAAA;AAGV,KAAK,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,OAAO,YAAY,CAAC,CAAA;AAClE,KAAK,kBAAkB,GAAG,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,OAAO,qBAAqB,CAAC,CAAA;AA8C5F,UAAU,eAAe;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAA;IAC1B,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,qBAAqB,CAAC,EAAE,MAAM,CAAA;CAC/B;AAiCD,KAAK,eAAe,GAAG,SAAS,CAAA;AAmBhC,UAAU,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,KAAK,CAAC;IACnE,SAAS,EAAE,MAAM,CAAA;CAClB;AAwBD,UAAU,wBAAwB;IAChC,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB;AA0BD,UAAU,gBAAgB;IACxB,UAAU,EAAE,MAAM,EAAE,CAAA;CACrB;AAuID,UAAU,mBAAoB,SAAQ,SAAS;IAC7C,QAAQ,EAAE,kBAAkB,CAAA;CAC7B"}

package/build/components/primitive/avatar_primitive.js CHANGED Viewed

@@ -53,25 +53,31 @@ function useAvatarContext() {
     }
     return context;
 }
-function AvatarRoot({ children, size = 'md', style, maxFontSizeMultiplier = MAX_FONT_SIZE_MULTIPLIER, }) {
+function AvatarRoot({ children, size = 'md', style, maxFontSizeMultiplier = MAX_FONT_SIZE_MULTIPLIER, minFontSizeMultiplier = undefined, }) {
     const [allImagesLoaded, setAllImagesLoaded] = useState(false);
-    const styles = useStyles({ size, maxFontSizeMultiplier });
-    return (<AvatarContext.Provider value={{ size, allImagesLoaded, setAllImagesLoaded, maxFontSizeMultiplier }}>
+    const styles = useStyles({ size, maxFontSizeMultiplier, minFontSizeMultiplier });
+    return (<AvatarContext.Provider value={{
+            size,
+            allImagesLoaded,
+            setAllImagesLoaded,
+            maxFontSizeMultiplier,
+            minFontSizeMultiplier,
+        }}>
       <View style={[styles.rootContainer, style]}>{children}</View>
     </AvatarContext.Provider>);
 }
 AvatarRoot.displayName = 'Avatar.Root';
 function AvatarMask({ children, ...props }) {
-    const { maxFontSizeMultiplier } = useAvatarContext();
-    const styles = useStyles({ maxFontSizeMultiplier });
+    const { maxFontSizeMultiplier, minFontSizeMultiplier } = useAvatarContext();
+    const styles = useStyles({ maxFontSizeMultiplier, minFontSizeMultiplier });
     return (<View style={styles.mask} {...props}>
       {children}
     </View>);
 }
 AvatarMask.displayName = 'Avatar.Mask';
 function AvatarImage({ sourceUri, ...props }) {
-    const { size, maxFontSizeMultiplier } = useAvatarContext();
-    const fontScale = useFontScale({ maxFontSizeMultiplier });
+    const { size, maxFontSizeMultiplier, minFontSizeMultiplier } = useAvatarContext();
+    const fontScale = useFontScale({ maxFontSizeMultiplier, minFontSizeMultiplier });
     const scaledAvatarSize = AVATAR_PX[size] * fontScale;
     return <Image source={{ uri: sourceUri }} loaderSize={scaledAvatarSize} {...props} alt=""/>;
 }
@@ -80,9 +86,9 @@ function AvatarGroupImage({ sourceUri, style, onLoad }) {
     return (<Image source={{ uri: sourceUri }} hideLoader wrapperStyle={style} onLoad={onLoad} alt=""/>);
 }
 function AvatarImageFallback({ name = 'general.person' }) {
-    const { size, maxFontSizeMultiplier } = useAvatarContext();
-    const styles = useStyles({ maxFontSizeMultiplier });
-    const fontScale = useFontScale({ maxFontSizeMultiplier });
+    const { size, maxFontSizeMultiplier, minFontSizeMultiplier } = useAvatarContext();
+    const styles = useStyles({ maxFontSizeMultiplier, minFontSizeMultiplier });
+    const fontScale = useFontScale({ maxFontSizeMultiplier, minFontSizeMultiplier });
     const scaledIconSize = AVATAR_FALLBACK_ICON_PX[size] * fontScale;
     return (<View style={styles.fallbackContainer}>
       <Icon name={name} size={scaledIconSize} style={styles.fallbackIcon} accessibilityElementsHidden={true}/>
@@ -90,8 +96,8 @@ function AvatarImageFallback({ name = 'general.person' }) {
 }
 AvatarImageFallback.displayName = 'Avatar.ImageFallback';
 function AvatarGroup({ sourceUris }) {
-    const { setAllImagesLoaded, maxFontSizeMultiplier } = useAvatarContext();
-    const styles = useStyles({ maxFontSizeMultiplier });
+    const { setAllImagesLoaded, maxFontSizeMultiplier, minFontSizeMultiplier } = useAvatarContext();
+    const styles = useStyles({ maxFontSizeMultiplier, minFontSizeMultiplier });
     const [loadingStatus, setLoadingStatus] = useState({
         0: false,
         1: false,
@@ -147,9 +153,9 @@ AvatarGroup.displayName = 'Avatar.Group';
 // ====== AvatarGroupLoader   =========
 // =================================
 function AvatarGroupLoader() {
-    const { size, allImagesLoaded, maxFontSizeMultiplier } = useAvatarContext();
-    const styles = useStyles({ size, maxFontSizeMultiplier });
-    const fontScale = useFontScale({ maxFontSizeMultiplier });
+    const { size, allImagesLoaded, maxFontSizeMultiplier, minFontSizeMultiplier } = useAvatarContext();
+    const styles = useStyles({ size, maxFontSizeMultiplier, minFontSizeMultiplier });
+    const fontScale = useFontScale({ maxFontSizeMultiplier, minFontSizeMultiplier });
     const scaledSpinnerSize = AVATAR_PX[size] * fontScale;
     if (allImagesLoaded)
         return null;
@@ -159,14 +165,14 @@ function AvatarGroupLoader() {
 }
 AvatarGroupLoader.displayName = 'Avatar.GroupLoader';
 function AvatarPresence({ presence, ...props }) {
-    const { size, maxFontSizeMultiplier } = useAvatarContext();
-    const styles = useStyles({ size, presence, maxFontSizeMultiplier });
+    const { size, maxFontSizeMultiplier, minFontSizeMultiplier } = useAvatarContext();
+    const styles = useStyles({ size, presence, maxFontSizeMultiplier, minFontSizeMultiplier });
     return <View style={styles.presence} {...props}/>;
 }
 AvatarPresence.displayName = 'Avatar.Presence';
-const useStyles = ({ size = 'md', presence = 'offline', maxFontSizeMultiplier = MAX_FONT_SIZE_MULTIPLIER, } = {}) => {
+const useStyles = ({ size = 'md', presence = 'offline', maxFontSizeMultiplier = MAX_FONT_SIZE_MULTIPLIER, minFontSizeMultiplier = undefined, } = {}) => {
     const { colors } = useTheme();
-    const fontScale = useFontScale({ maxFontSizeMultiplier });
+    const fontScale = useFontScale({ maxFontSizeMultiplier, minFontSizeMultiplier });
     const PRESENCE_COLOR = {
         online: colors.fillColorInteractionOnlineDefault,
         offline: colors.iconColorDefaultDisabled,