@planningcenter/chat-react-native 2.1.1 → 2.2.0-rc.1

package/build/navigation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/navigation/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EACL,0BAA0B,GAG3B,MAAM,gCAAgC,CAAA;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAA;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AACnE,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAC3E,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACpC,OAAO,EACL,oBAAoB,EACpB,2BAA2B,GAC5B,MAAM,mCAAmC,CAAA;AAC1C,OAAO,EAAE,eAAe,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AAErF,MAAM,CAAC,MAAM,SAAS,GAAG,0BAA0B,CAAC;IAClD,aAAa,EAAE;QACb,2BAA2B,EAAE,SAAS;KACvC;IACD,YAAY,EAAE,YAAY;IAC1B,OAAO,EAAE;QACP,aAAa,EAAE;YACb,MAAM,EAAE,mBAAmB;YAC3B,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAAC;gBACnC,WAAW,EAAG,KAAK,CAAC,MAA6B,EAAE,KAAK,IAAI,MAAM;gBAClE,UAAU,EAAE,CAAC,EAAE,SAAS,EAA8B,EAAE,EAAE,CAAC,CACzD,CAAC,YAAY,CACX;YAAA,CAAC,IAAI,CAAC,IAAI,CAAC,qCAAqC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,EAC9E;UAAA,EAAE,YAAY,CAAC,CAChB;gBACD,WAAW,EAAE,CAAC,KAAkC,EAAE,EAAE,CAAC,CACnD,CAAC,gBAAgB,CACf,SAAS,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,EAAG,CAAC,CAC7E,OAAO,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAC3B,IAAI,KAAK,CAAC,EACV,CACH;aACF,CAAC;SACH;QACD,YAAY,EAAE;YACZ,MAAM,EAAE,kBAAkB;SAC3B;QACD,cAAc,EAAE;YACd,MAAM,EAAE,oBAAoB;YAC5B,gEAAgE;YAChE,OAAO,EAAE,2BAA2B;SACrC;QACD,SAAS,EAAE;YACT,MAAM,EAAE,eAAe;YACvB,OAAO,EAAE,sBAAsB;SAChC;QACD,QAAQ,EAAE;YACR,MAAM,EAAE,QAAQ;YAChB,OAAO,EAAE;gBACP,KAAK,EAAE,KAAK;aACb;YACD,OAAO,EAAE;gBACP,IAAI,EAAE,GAAG;aACV;SACF;KACF;CACF,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { StaticParamList } from '@react-navigation/native'\nimport {\n  createNativeStackNavigator,\n  NativeStackHeaderLeftProps,\n  NativeStackHeaderRightProps,\n} from '@react-navigation/native-stack'\nimport { NotFound } from '../screens/not_found'\nimport { ScreenLayout } from './screenLayout'\nimport { ConversationsScreen } from '../screens/conversations_screen'\nimport { ConversationScreen } from '../screens/conversation_screen'\nimport { HeaderBackButton, HeaderButton } from '@react-navigation/elements'\nimport { Icon } from '../components'\nimport {\n  MessageActionsScreen,\n  MessageActionsScreenOptions,\n} from '../screens/message_actions_screen'\nimport { ReactionsScreen, ReactionsScreenOptions } from '../screens/reactions_screen'\n\nexport const ChatStack = createNativeStackNavigator({\n  screenOptions: {\n    headerBackButtonDisplayMode: 'minimal',\n  },\n  screenLayout: ScreenLayout,\n  screens: {\n    Conversations: {\n      screen: ConversationsScreen,\n      options: ({ route, navigation }) => ({\n        headerTitle: (route.params as { title?: string })?.title ?? 'Chat',\n        headerLeft: ({ tintColor }: NativeStackHeaderLeftProps) => (\n          <HeaderButton>\n            <Icon name=\"general.threeReducingHorizontalBars\" size={18} color={tintColor} />\n          </HeaderButton>\n        ),\n        headerRight: (props: NativeStackHeaderRightProps) => (\n          <HeaderBackButton\n            backImage={() => <Icon name=\"general.x\" size={18} color={props.tintColor} />}\n            onPress={navigation.goBack}\n            {...props}\n          />\n        ),\n      }),\n    },\n    Conversation: {\n      screen: ConversationScreen,\n    },\n    MessageActions: {\n      screen: MessageActionsScreen,\n      // Something about sheetAllowedDetents declared inline breaks TS\n      options: MessageActionsScreenOptions,\n    },\n    Reactions: {\n      screen: ReactionsScreen,\n      options: ReactionsScreenOptions,\n    },\n    NotFound: {\n      screen: NotFound,\n      options: {\n        title: '404',\n      },\n      linking: {\n        path: '*',\n      },\n    },\n  },\n})\n\ntype ChatStackParamList = StaticParamList<typeof ChatStack>\n\ndeclare global {\n  namespace ReactNavigation {\n    interface RootParamList extends ChatStackParamList {}\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/navigation/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAE3E,OAAO,EACL,0BAA0B,GAG3B,MAAM,gCAAgC,CAAA;AACvC,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACpC,OAAO,EAAE,yBAAyB,EAAE,MAAM,wCAAwC,CAAA;AAClF,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAA;AACrE,OAAO,EACL,oBAAoB,EACpB,2BAA2B,GAC5B,MAAM,mCAAmC,CAAA;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EAAE,eAAe,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AACrF,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAE7C,MAAM,CAAC,MAAM,SAAS,GAAG,0BAA0B,CAAC;IAClD,aAAa,EAAE;QACb,2BAA2B,EAAE,SAAS;KACvC;IACD,YAAY,EAAE,YAAY;IAC1B,OAAO,EAAE;QACP,aAAa,EAAE;YACb,MAAM,EAAE,mBAAmB;YAC3B,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAAC;gBACnC,WAAW,EAAG,KAAK,CAAC,MAA6B,EAAE,KAAK,IAAI,MAAM;gBAClE,UAAU,EAAE,CAAC,EAAE,SAAS,EAA8B,EAAE,EAAE,CAAC,CACzD,CAAC,YAAY,CACX;YAAA,CAAC,IAAI,CAAC,IAAI,CAAC,qCAAqC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,EAC9E;UAAA,EAAE,YAAY,CAAC,CAChB;gBACD,WAAW,EAAE,CAAC,KAAkC,EAAE,EAAE,CAAC,CACnD,CAAC,gBAAgB,CACf,SAAS,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,EAAG,CAAC,CAC7E,OAAO,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAC3B,IAAI,KAAK,CAAC,EACV,CACH;aACF,CAAC;SACH;QACD,YAAY,EAAE;YACZ,MAAM,EAAE,kBAAkB;SAC3B;QACD,mBAAmB,EAAE;YACnB,MAAM,EAAE,yBAAyB;YACjC,OAAO,EAAE,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAAC;gBAC5B,YAAY,EAAE,OAAO;gBACrB,KAAK,EAAE,sBAAsB;gBAC7B,WAAW,EAAE,CAAC,KAAkC,EAAE,EAAE,CAAC,CACnD,CAAC,iBAAiB,CAAC,IAAI,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CACvD;;UACF,EAAE,iBAAiB,CAAC,CACrB;aACF,CAAC;SACH;QACD,cAAc,EAAE;YACd,MAAM,EAAE,oBAAoB;YAC5B,gEAAgE;YAChE,OAAO,EAAE,2BAA2B;SACrC;QACD,SAAS,EAAE;YACT,MAAM,EAAE,eAAe;YACvB,OAAO,EAAE,sBAAsB;SAChC;QACD,QAAQ,EAAE;YACR,MAAM,EAAE,QAAQ;YAChB,OAAO,EAAE;gBACP,KAAK,EAAE,KAAK;aACb;YACD,OAAO,EAAE;gBACP,IAAI,EAAE,GAAG;aACV;SACF;KACF;CACF,CAAC,CAAA","sourcesContent":["import { HeaderBackButton, HeaderButton } from '@react-navigation/elements'\nimport { StaticParamList } from '@react-navigation/native'\nimport {\n  createNativeStackNavigator,\n  NativeStackHeaderLeftProps,\n  NativeStackHeaderRightProps,\n} from '@react-navigation/native-stack'\nimport React from 'react'\nimport { Icon } from '../components'\nimport { ConversationDetailsScreen } from '../screens/conversation_details_screen'\nimport { ConversationScreen } from '../screens/conversation_screen'\nimport { ConversationsScreen } from '../screens/conversations_screen'\nimport {\n  MessageActionsScreen,\n  MessageActionsScreenOptions,\n} from '../screens/message_actions_screen'\nimport { NotFound } from '../screens/not_found'\nimport { ReactionsScreen, ReactionsScreenOptions } from '../screens/reactions_screen'\nimport { HeaderRightButton } from './header'\nimport { ScreenLayout } from './screenLayout'\n\nexport const ChatStack = createNativeStackNavigator({\n  screenOptions: {\n    headerBackButtonDisplayMode: 'minimal',\n  },\n  screenLayout: ScreenLayout,\n  screens: {\n    Conversations: {\n      screen: ConversationsScreen,\n      options: ({ route, navigation }) => ({\n        headerTitle: (route.params as { title?: string })?.title ?? 'Chat',\n        headerLeft: ({ tintColor }: NativeStackHeaderLeftProps) => (\n          <HeaderButton>\n            <Icon name=\"general.threeReducingHorizontalBars\" size={18} color={tintColor} />\n          </HeaderButton>\n        ),\n        headerRight: (props: NativeStackHeaderRightProps) => (\n          <HeaderBackButton\n            backImage={() => <Icon name=\"general.x\" size={18} color={props.tintColor} />}\n            onPress={navigation.goBack}\n            {...props}\n          />\n        ),\n      }),\n    },\n    Conversation: {\n      screen: ConversationScreen,\n    },\n    ConversationDetails: {\n      screen: ConversationDetailsScreen,\n      options: ({ navigation }) => ({\n        presentation: 'modal',\n        title: 'Conversation details',\n        headerRight: (props: NativeStackHeaderRightProps) => (\n          <HeaderRightButton {...props} onPress={navigation.goBack}>\n            Done\n          </HeaderRightButton>\n        ),\n      }),\n    },\n    MessageActions: {\n      screen: MessageActionsScreen,\n      // Something about sheetAllowedDetents declared inline breaks TS\n      options: MessageActionsScreenOptions,\n    },\n    Reactions: {\n      screen: ReactionsScreen,\n      options: ReactionsScreenOptions,\n    },\n    NotFound: {\n      screen: NotFound,\n      options: {\n        title: '404',\n      },\n      linking: {\n        path: '*',\n      },\n    },\n  },\n})\n\ntype ChatStackParamList = StaticParamList<typeof ChatStack>\n\ndeclare global {\n  namespace ReactNavigation {\n    interface RootParamList extends ChatStackParamList {}\n  }\n}\n"]}

package/build/screens/conversation_details_screen.d.ts

@@ -0,0 +1,7 @@
+import { StaticScreenProps } from '@react-navigation/native';
+import React from 'react';
+export type ConversationDetailsScreenProps = StaticScreenProps<{
+    conversation_id: string;
+}>;
+export declare function ConversationDetailsScreen({ route }: ConversationDetailsScreenProps): React.JSX.Element;
+//# sourceMappingURL=conversation_details_screen.d.ts.map

package/build/screens/conversation_details_screen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversation_details_screen.d.ts","sourceRoot":"","sources":["../../src/screens/conversation_details_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAGlB,MAAM,0BAA0B,CAAA;AACjC,OAAO,KAA8D,MAAM,OAAO,CAAA;AAalF,MAAM,MAAM,8BAA8B,GAAG,iBAAiB,CAAC;IAC7D,eAAe,EAAE,MAAM,CAAA;CACxB,CAAC,CAAA;AAEF,wBAAgB,yBAAyB,CAAC,EAAE,KAAK,EAAE,EAAE,8BAA8B,qBAwFlF"}

package/build/screens/conversation_details_screen.js

@@ -0,0 +1,155 @@
+import { useNavigation, useTheme as useNavigationTheme, } from '@react-navigation/native';
+import React, { useCallback, useEffect, useState } from 'react';
+import { FlatList, StyleSheet, TextInput, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Avatar, Badge, Heading, Icon, Switch, Text } from '../components';
+import { useSuspenseGet, useTheme } from '../hooks';
+import { useConversation, useConversationMute, useConversationUpdate, } from '../hooks/use_conversation';
+import { HeaderRightButton } from '../navigation/header';
+export function ConversationDetailsScreen({ route }) {
+    const styles = useStyles();
+    const navigation = useNavigation();
+    const { data: conversation } = useConversation(route.params);
+    const canUpdate = conversation.memberAbility?.canUpdate;
+    const { data: members } = useSuspenseGet({
+        url: `/me/conversations/${route.params.conversation_id}/members`,
+        data: {
+            include: ['person'],
+            fields: {
+                Member: ['avatar', 'name', 'first_name', 'last_name', 'child', 'badges'],
+            },
+        },
+    });
+    const { muted, setMuted } = useConversationMute(route.params);
+    const { mutate: saveTitle } = useConversationUpdate(route.params);
+    const [title, setTitle] = useState(conversation.title);
+    const HeaderRight = useCallback(() => {
+        return (<HeaderRightButton onPress={() => {
+                saveTitle({ title });
+                navigation.goBack();
+            }}>
+        Done
+      </HeaderRightButton>);
+    }, [navigation, saveTitle, title]);
+    useEffect(() => {
+        navigation.setOptions({
+            headerRight: HeaderRight,
+        });
+    }, [HeaderRight, navigation]);
+    return (<View style={styles.container}>
+      <SectionList>
+        <View style={styles.titleContainer}>
+          <View style={[styles.titleLabelContainer, !canUpdate && styles.titleInputDisabled]}>
+            <Text variant="tertiary">Title</Text>
+            {!canUpdate && <Icon name="general.lock"/>}
+          </View>
+          <TextInput editable={canUpdate} onChangeText={setTitle} style={[styles.titleInput, !canUpdate && styles.titleInputDisabled]} value={title}/>
+        </View>
+      </SectionList>
+      <SectionList>
+        <SectionListHeader>Settings</SectionListHeader>
+        <View style={styles.muteContainer}>
+          <Text variant="plain" style={styles.muteText}>
+            Mute
+          </Text>
+          <Switch value={muted} onChange={() => setMuted(!muted)}/>
+        </View>
+      </SectionList>
+      <SectionList>
+        <SectionListHeader divider={false}>Members</SectionListHeader>
+        <FlatList data={members} renderItem={({ item }) => (<View style={styles.member}>
+              <Avatar sourceUri={item.avatar}/>
+              <View style={styles.memberBody}>
+                <Text style={styles.memberName}>{item.name}</Text>
+                <View style={styles.memberBadges}>
+                  {item.badges?.map((badge, index) => (<View key={index} style={styles.memberBadge}>
+                      <Badge label={badge.title}/>
+                    </View>))}
+                </View>
+              </View>
+            </View>)} keyExtractor={item => item.id} contentContainerStyle={styles.listContainer}/>
+      </SectionList>
+    </View>);
+}
+const useStyles = () => {
+    const theme = useTheme();
+    const { bottom } = useSafeAreaInsets();
+    return StyleSheet.create({
+        container: {
+            flex: 1,
+            paddingTop: 16,
+            paddingHorizontal: 16,
+            backgroundColor: theme.colors.fillColorNeutral080,
+            paddingBottom: bottom,
+            gap: 16,
+        },
+        listContainer: {
+            gap: 12,
+        },
+        member: {
+            flexDirection: 'row',
+            gap: 8,
+        },
+        memberBody: {
+            gap: 4,
+        },
+        memberName: {
+            lineHeight: 16,
+        },
+        memberBadges: {
+            flexDirection: 'row',
+            gap: 8,
+        },
+        memberBadge: {},
+        muteContainer: {
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+        },
+        muteText: {
+            lineHeight: 20,
+        },
+        titleContainer: {},
+        titleLabel: {},
+        titleLabelContainer: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 8,
+        },
+        titleInput: {
+            color: theme.colors.textColorDefaultPrimary,
+        },
+        titleInputDisabled: { opacity: 0.7 },
+    });
+};
+const SectionList = ({ children }) => {
+    const styles = useSectionListStyles();
+    return <View style={styles.container}>{children}</View>;
+};
+const SectionListHeader = ({ children, divider = true, }) => {
+    const styles = useSectionListStyles();
+    return (<Heading variant="h3" style={[styles.heading, divider && styles.headingDivider]}>
+      {children}
+    </Heading>);
+};
+const useSectionListStyles = () => {
+    const theme = useTheme();
+    const navigationTheme = useNavigationTheme();
+    return StyleSheet.create({
+        container: {
+            padding: 16,
+            backgroundColor: navigationTheme.colors.card,
+            borderRadius: 8,
+            flexDirection: 'column',
+            gap: 8,
+        },
+        heading: {
+            paddingBottom: 12,
+        },
+        headingDivider: {
+            borderBottomWidth: 1,
+            borderBottomColor: theme.colors.fillColorNeutral050Base,
+        },
+    });
+};
+//# sourceMappingURL=conversation_details_screen.js.map

package/build/screens/conversation_details_screen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversation_details_screen.js","sourceRoot":"","sources":["../../src/screens/conversation_details_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  StaticScreenProps,\n  useNavigation,\n  useTheme as useNavigationTheme,\n} from '@react-navigation/native'\nimport React, { PropsWithChildren, useCallback, useEffect, useState } from 'react'\nimport { FlatList, StyleSheet, TextInput, View } from 'react-native'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { Avatar, Badge, Heading, Icon, Switch, Text } from '../components'\nimport { useSuspenseGet, useTheme } from '../hooks'\nimport {\n  useConversation,\n  useConversationMute,\n  useConversationUpdate,\n} from '../hooks/use_conversation'\nimport { MemberResource } from '../types'\nimport { HeaderRightButton } from '../navigation/header'\n\nexport type ConversationDetailsScreenProps = StaticScreenProps<{\n  conversation_id: string\n}>\n\nexport function ConversationDetailsScreen({ route }: ConversationDetailsScreenProps) {\n  const styles = useStyles()\n  const navigation = useNavigation()\n  const { data: conversation } = useConversation(route.params)\n  const canUpdate = conversation.memberAbility?.canUpdate\n\n  const { data: members } = useSuspenseGet<MemberResource[]>({\n    url: `/me/conversations/${route.params.conversation_id}/members`,\n    data: {\n      include: ['person'],\n      fields: {\n        Member: ['avatar', 'name', 'first_name', 'last_name', 'child', 'badges'],\n      },\n    },\n  })\n\n  const { muted, setMuted } = useConversationMute(route.params)\n  const { mutate: saveTitle } = useConversationUpdate(route.params)\n  const [title, setTitle] = useState(conversation.title)\n  const HeaderRight = useCallback(() => {\n    return (\n      <HeaderRightButton\n        onPress={() => {\n          saveTitle({ title })\n          navigation.goBack()\n        }}\n      >\n        Done\n      </HeaderRightButton>\n    )\n  }, [navigation, saveTitle, title])\n\n  useEffect(() => {\n    navigation.setOptions({\n      headerRight: HeaderRight,\n    })\n  }, [HeaderRight, navigation])\n\n  return (\n    <View style={styles.container}>\n      <SectionList>\n        <View style={styles.titleContainer}>\n          <View style={[styles.titleLabelContainer, !canUpdate && styles.titleInputDisabled]}>\n            <Text variant=\"tertiary\">Title</Text>\n            {!canUpdate && <Icon name=\"general.lock\" />}\n          </View>\n          <TextInput\n            editable={canUpdate}\n            onChangeText={setTitle}\n            style={[styles.titleInput, !canUpdate && styles.titleInputDisabled]}\n            value={title}\n          />\n        </View>\n      </SectionList>\n      <SectionList>\n        <SectionListHeader>Settings</SectionListHeader>\n        <View style={styles.muteContainer}>\n          <Text variant=\"plain\" style={styles.muteText}>\n            Mute\n          </Text>\n          <Switch value={muted} onChange={() => setMuted(!muted)} />\n        </View>\n      </SectionList>\n      <SectionList>\n        <SectionListHeader divider={false}>Members</SectionListHeader>\n        <FlatList\n          data={members}\n          renderItem={({ item }) => (\n            <View style={styles.member}>\n              <Avatar sourceUri={item.avatar} />\n              <View style={styles.memberBody}>\n                <Text style={styles.memberName}>{item.name}</Text>\n                <View style={styles.memberBadges}>\n                  {item.badges?.map((badge, index) => (\n                    <View key={index} style={styles.memberBadge}>\n                      <Badge label={badge.title} />\n                    </View>\n                  ))}\n                </View>\n              </View>\n            </View>\n          )}\n          keyExtractor={item => item.id}\n          contentContainerStyle={styles.listContainer}\n        />\n      </SectionList>\n    </View>\n  )\n}\n\nconst useStyles = () => {\n  const theme = useTheme()\n  const { bottom } = useSafeAreaInsets()\n\n  return StyleSheet.create({\n    container: {\n      flex: 1,\n      paddingTop: 16,\n      paddingHorizontal: 16,\n      backgroundColor: theme.colors.fillColorNeutral080,\n      paddingBottom: bottom,\n      gap: 16,\n    },\n    listContainer: {\n      gap: 12,\n    },\n    member: {\n      flexDirection: 'row',\n      gap: 8,\n    },\n    memberBody: {\n      gap: 4,\n    },\n    memberName: {\n      lineHeight: 16,\n    },\n    memberBadges: {\n      flexDirection: 'row',\n      gap: 8,\n    },\n    memberBadge: {},\n    muteContainer: {\n      flexDirection: 'row',\n      justifyContent: 'space-between',\n      alignItems: 'center',\n    },\n    muteText: {\n      lineHeight: 20,\n    },\n    titleContainer: {},\n    titleLabel: {},\n    titleLabelContainer: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: 8,\n    },\n    titleInput: {\n      color: theme.colors.textColorDefaultPrimary,\n    },\n    titleInputDisabled: { opacity: 0.7 },\n  })\n}\n\nconst SectionList = ({ children }: PropsWithChildren) => {\n  const styles = useSectionListStyles()\n\n  return <View style={styles.container}>{children}</View>\n}\n\nconst SectionListHeader = ({\n  children,\n  divider = true,\n}: PropsWithChildren & { divider?: boolean }) => {\n  const styles = useSectionListStyles()\n\n  return (\n    <Heading variant=\"h3\" style={[styles.heading, divider && styles.headingDivider]}>\n      {children}\n    </Heading>\n  )\n}\n\nconst useSectionListStyles = () => {\n  const theme = useTheme()\n  const navigationTheme = useNavigationTheme()\n\n  return StyleSheet.create({\n    container: {\n      padding: 16,\n      backgroundColor: navigationTheme.colors.card,\n      borderRadius: 8,\n      flexDirection: 'column',\n      gap: 8,\n    },\n    heading: {\n      paddingBottom: 12,\n    },\n    headingDivider: {\n      borderBottomWidth: 1,\n      borderBottomColor: theme.colors.fillColorNeutral050Base,\n    },\n  })\n}\n"]}

package/build/screens/conversation_screen.d.ts

@@ -1,8 +1,10 @@
 import { StaticScreenProps } from '@react-navigation/native';
 import React from 'react';
-export type ConversationScreenProps = StaticScreenProps<{
+type ConversationRouteProps = {
     conversation_id: string;
-    chat_group_graph_id: string;
-}>;
+    chat_group_graph_id?: string;
+};
+export type ConversationScreenProps = StaticScreenProps<ConversationRouteProps>;
 export declare function ConversationScreen({ route }: ConversationScreenProps): React.JSX.Element;
+export {};
 //# sourceMappingURL=conversation_screen.d.ts.map

package/build/screens/conversation_screen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"conversation_screen.d.ts","sourceRoot":"","sources":["../../src/screens/conversation_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAGlB,MAAM,0BAA0B,CAAA;AACjC,OAAO,KAAoB,MAAM,OAAO,CAAA;AAUxC,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,CAAC;IACtD,eAAe,EAAE,MAAM,CAAA;IACvB,mBAAmB,EAAE,MAAM,CAAA;CAC5B,CAAC,CAAA;AAEF,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,EAAE,uBAAuB,qBA4CpE"}
+{"version":3,"file":"conversation_screen.d.ts","sourceRoot":"","sources":["../../src/screens/conversation_screen.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,iBAAiB,EAIlB,MAAM,0BAA0B,CAAA;AACjC,OAAO,KAAiC,MAAM,OAAO,CAAA;AAUrD,KAAK,sBAAsB,GAAG;IAC5B,eAAe,EAAE,MAAM,CAAA;IACvB,mBAAmB,CAAC,EAAE,MAAM,CAAA;CAC7B,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,CAAC,sBAAsB,CAAC,CAAA;AAE/E,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,EAAE,uBAAuB,qBA0CpE"}

package/build/screens/conversation_screen.js

@@ -1,30 +1,27 @@
-import { useNavigation, useTheme as useNavigationTheme, } from '@react-navigation/native';
-import React, { useEffect } from 'react';
-import { FlatList, StyleSheet, View } from 'react-native';
+import { HeaderTitle, PlatformPressable } from '@react-navigation/elements';
+import { useNavigation, useTheme as useNavigationTheme, useRoute, } from '@react-navigation/native';
+import React, { useCallback, useEffect } from 'react';
+import { FlatList, Platform, StyleSheet, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Icon, Text } from '../components';
 import { Message } from '../components/conversation/message';
 import { MessageForm } from '../components/conversation/message_form';
 import { KeyboardView } from '../components/display/keyboard_view';
+import { useConversation } from '../hooks/use_conversation';
 import { useConversationMessages } from '../hooks/use_conversation_messages';
-import { useSuspenseGet } from '../hooks/use_suspense_api';
 export function ConversationScreen({ route }) {
+    const styles = useStyles();
     const navigation = useNavigation();
     const { conversation_id } = route.params;
-    const styles = useStyles();
-    const { data: conversation } = useSuspenseGet({
-        url: `/me/conversations/${conversation_id}`,
-        data: {
-            fields: {
-                Conversation: ['title'],
-            },
-        },
-    });
+    const { data: conversation } = useConversation(route.params);
     const { messages, refetch, isRefetching, fetchNextPage } = useConversationMessages({
         conversation_id,
     });
+    // Seems to be necessary to define this way so we get the route picked up
+    const headerTitle = useCallback((props) => <PressableHeaderTitle {...props}/>, []);
     useEffect(() => {
-        navigation.setOptions({ title: conversation?.title });
-    }, [conversation, conversation_id, navigation]);
+        navigation.setOptions({ headerTitle, title: conversation?.title });
+    }, [conversation, conversation_id, navigation, headerTitle, conversation?.title]);
     return (<View style={styles.container}>
       <KeyboardView style={styles.keyboardView}>
         <FlatList inverted contentContainerStyle={styles.listContainer} refreshing={isRefetching} onRefresh={refetch} data={messages} keyExtractor={item => item.id} renderItem={({ item }) => <Message {...item} conversation_id={conversation_id}/>} onEndReached={() => fetchNextPage()}/>
@@ -37,6 +34,37 @@ export function ConversationScreen({ route }) {
       </KeyboardView>
     </View>);
 }
+const PressableHeaderTitle = ({ style, children }) => {
+    const styles = usePressableHeaderStyle();
+    const navigation = useNavigation();
+    const route = useRoute();
+    const { data: conversation } = useConversation(route.params);
+    const badge = conversation.badges?.[0];
+    const subtitle = [badge?.pcoResourceType, badge?.text].filter(f => f).join(': ');
+    return (<PlatformPressable style={styles.container} onPress={() => navigation.navigate('ConversationDetails', { conversation_id: conversation?.id })}>
+      <View style={styles.titleWrapper}>
+        <HeaderTitle style={[styles.title, style]}>{children}</HeaderTitle>
+        <Icon name="general.downChevron" size={12}/>
+      </View>
+      <Text variant="tertiary">{subtitle}</Text>
+    </PlatformPressable>);
+};
+const usePressableHeaderStyle = () => {
+    return StyleSheet.create({
+        container: {
+            alignItems: Platform.select({ android: 'flex-start', default: 'center' }),
+        },
+        titleWrapper: {
+            alignItems: 'center',
+            columnGap: 8,
+            flexDirection: 'row',
+        },
+        title: {
+            padding: 0,
+            margin: 0,
+        },
+    });
+};
 const useStyles = () => {
     const navigationTheme = useNavigationTheme();
     const { bottom } = useSafeAreaInsets();

package/build/screens/conversation_screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversation_screen.js","sourceRoot":"","sources":["../../src/screens/conversation_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  StaticScreenProps,\n  useNavigation,\n  useTheme as useNavigationTheme,\n} from '@react-navigation/native'\nimport React, { useEffect } from 'react'\nimport { FlatList, StyleSheet, View } from 'react-native'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { Message } from '../components/conversation/message'\nimport { MessageForm } from '../components/conversation/message_form'\nimport { KeyboardView } from '../components/display/keyboard_view'\nimport { useConversationMessages } from '../hooks/use_conversation_messages'\nimport { useSuspenseGet } from '../hooks/use_suspense_api'\nimport { ConversationResource } from '../types'\n\nexport type ConversationScreenProps = StaticScreenProps<{\n  conversation_id: string\n  chat_group_graph_id: string\n}>\n\nexport function ConversationScreen({ route }: ConversationScreenProps) {\n  const navigation = useNavigation()\n  const { conversation_id } = route.params\n  const styles = useStyles()\n\n  const { data: conversation } = useSuspenseGet<ConversationResource>({\n    url: `/me/conversations/${conversation_id}`,\n    data: {\n      fields: {\n        Conversation: ['title'],\n      },\n    },\n  })\n\n  const { messages, refetch, isRefetching, fetchNextPage } = useConversationMessages({\n    conversation_id,\n  })\n\n  useEffect(() => {\n    navigation.setOptions({ title: conversation?.title })\n  }, [conversation, conversation_id, navigation])\n\n  return (\n    <View style={styles.container}>\n      <KeyboardView style={styles.keyboardView}>\n        <FlatList\n          inverted\n          contentContainerStyle={styles.listContainer}\n          refreshing={isRefetching}\n          onRefresh={refetch}\n          data={messages}\n          keyExtractor={item => item.id}\n          renderItem={({ item }) => <Message {...item} conversation_id={conversation_id} />}\n          onEndReached={() => fetchNextPage()}\n        />\n        <MessageForm.Root conversation={conversation}>\n          {/* <MessageForm.AttachmentPicker /> */}\n          {/* <MessageForm.Commands /> */}\n          <MessageForm.TextInput />\n          <MessageForm.SubmitButton />\n        </MessageForm.Root>\n      </KeyboardView>\n    </View>\n  )\n}\n\nconst useStyles = () => {\n  const navigationTheme = useNavigationTheme()\n  const { bottom } = useSafeAreaInsets()\n\n  return StyleSheet.create({\n    container: {\n      flex: 1,\n      justifyContent: 'center',\n      backgroundColor: navigationTheme.colors.card,\n      paddingBottom: bottom,\n    },\n    keyboardView: {\n      flex: 1,\n    },\n    listContainer: {\n      gap: 12,\n      paddingHorizontal: 16,\n      paddingVertical: 12,\n    },\n  })\n}\n"]}
+{"version":3,"file":"conversation_screen.js","sourceRoot":"","sources":["../../src/screens/conversation_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { HeaderTitle, HeaderTitleProps, PlatformPressable } from '@react-navigation/elements'\nimport {\n  StaticScreenProps,\n  useNavigation,\n  useTheme as useNavigationTheme,\n  useRoute,\n} from '@react-navigation/native'\nimport React, { useCallback, useEffect } from 'react'\nimport { FlatList, Platform, StyleSheet, View } from 'react-native'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { Icon, Text } from '../components'\nimport { Message } from '../components/conversation/message'\nimport { MessageForm } from '../components/conversation/message_form'\nimport { KeyboardView } from '../components/display/keyboard_view'\nimport { useConversation } from '../hooks/use_conversation'\nimport { useConversationMessages } from '../hooks/use_conversation_messages'\n\ntype ConversationRouteProps = {\n  conversation_id: string\n  chat_group_graph_id?: string\n}\n\nexport type ConversationScreenProps = StaticScreenProps<ConversationRouteProps>\n\nexport function ConversationScreen({ route }: ConversationScreenProps) {\n  const styles = useStyles()\n  const navigation = useNavigation()\n\n  const { conversation_id } = route.params\n  const { data: conversation } = useConversation(route.params)\n  const { messages, refetch, isRefetching, fetchNextPage } = useConversationMessages({\n    conversation_id,\n  })\n\n  // Seems to be necessary to define this way so we get the route picked up\n  const headerTitle = useCallback(\n    (props: HeaderTitleProps) => <PressableHeaderTitle {...props} />,\n    []\n  )\n\n  useEffect(() => {\n    navigation.setOptions({ headerTitle, title: conversation?.title })\n  }, [conversation, conversation_id, navigation, headerTitle, conversation?.title])\n\n  return (\n    <View style={styles.container}>\n      <KeyboardView style={styles.keyboardView}>\n        <FlatList\n          inverted\n          contentContainerStyle={styles.listContainer}\n          refreshing={isRefetching}\n          onRefresh={refetch}\n          data={messages}\n          keyExtractor={item => item.id}\n          renderItem={({ item }) => <Message {...item} conversation_id={conversation_id} />}\n          onEndReached={() => fetchNextPage()}\n        />\n        <MessageForm.Root conversation={conversation}>\n          {/* <MessageForm.AttachmentPicker /> */}\n          {/* <MessageForm.Commands /> */}\n          <MessageForm.TextInput />\n          <MessageForm.SubmitButton />\n        </MessageForm.Root>\n      </KeyboardView>\n    </View>\n  )\n}\n\nconst PressableHeaderTitle = ({ style, children }: HeaderTitleProps) => {\n  const styles = usePressableHeaderStyle()\n  const navigation = useNavigation()\n\n  const route = useRoute() as ConversationScreenProps['route']\n\n  const { data: conversation } = useConversation(route.params)\n  const badge = conversation.badges?.[0]\n  const subtitle = [badge?.pcoResourceType, badge?.text].filter(f => f).join(': ')\n\n  return (\n    <PlatformPressable\n      style={styles.container}\n      onPress={() =>\n        navigation.navigate('ConversationDetails', { conversation_id: conversation?.id })\n      }\n    >\n      <View style={styles.titleWrapper}>\n        <HeaderTitle style={[styles.title, style]}>{children}</HeaderTitle>\n        <Icon name=\"general.downChevron\" size={12} />\n      </View>\n      <Text variant=\"tertiary\">{subtitle}</Text>\n    </PlatformPressable>\n  )\n}\n\nconst usePressableHeaderStyle = () => {\n  return StyleSheet.create({\n    container: {\n      alignItems: Platform.select({ android: 'flex-start', default: 'center' }),\n    },\n    titleWrapper: {\n      alignItems: 'center',\n      columnGap: 8,\n      flexDirection: 'row',\n    },\n    title: {\n      padding: 0,\n      margin: 0,\n    },\n  })\n}\n\nconst useStyles = () => {\n  const navigationTheme = useNavigationTheme()\n  const { bottom } = useSafeAreaInsets()\n\n  return StyleSheet.create({\n    container: {\n      flex: 1,\n      justifyContent: 'center',\n      backgroundColor: navigationTheme.colors.card,\n      paddingBottom: bottom,\n    },\n    keyboardView: {\n      flex: 1,\n    },\n    listContainer: {\n      gap: 12,\n      paddingHorizontal: 16,\n      paddingVertical: 12,\n    },\n  })\n}\n"]}

package/build/screens/design_system_screen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"design_system_screen.d.ts","sourceRoot":"","sources":["../../src/screens/design_system_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAuDvC,wBAAgB,kBAAkB,sBAgBjC"}
+{"version":3,"file":"design_system_screen.d.ts","sourceRoot":"","sources":["../../src/screens/design_system_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAyDvC,wBAAgB,kBAAkB,sBAgBjC"}

package/build/screens/design_system_screen.js

@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
 import { Alert, Pressable, ScrollView, StyleSheet, View } from 'react-native';
 import { useTheme } from '../hooks';
-import { Avatar, AvatarGroup, Badge, Button, Heading, Icon, IconButton, Image, Spinner, Switch, Text, TextButton, TextInlineButton, } from '../components/display';
+import { Avatar, AvatarGroup, Badge, Banner, Button, Heading, Icon, IconButton, Image, Spinner, Switch, Text, TextButton, TextInlineButton, } from '../components/display';
 import { space, MAX_FONT_SIZE_MULTIPLIER, platformPressedOpacityStyle, platformFontWeightMedium, } from '../utils';
+import BannerPrimitive from '../components/primitive/banner_primitive';
 // =================================
 // ====== Docs Utils ===============
 // =================================
@@ -430,6 +431,21 @@ function StatusComponentsSection({ isLast }) {
           <Badge variant="metaSubtle" productLogoName="services" label="Team"/>
         </Row>
       </Group>
+      <Group title="Banner" description="Banners that can convey a status with color and an optional icon. They render a description and optional heading. A `Banner.Link` can be used by wrapping it in `Banner.Text` and passing it to `description`. Target products can change colors via theming.">
+        <Column>
+          <Banner appearance="neutral" showIcon={false} description="Et sint Quis non excepturi enim et conseq atur porro est galisum labore ea volupt."/>
+          <Banner appearance="info" heading="Banner heading" description="Et sint Quis non excepturi enim et conseq atur porro est galisum labore ea volupt."/>
+          <Banner appearance="success" heading="Banner heading" description={<BannerPrimitive.Text>
+                Et sint Quis non excepturi{' '}
+                <BannerPrimitive.Link onPress={buttonPress}>
+                  enim et conseq atur porro est
+                </BannerPrimitive.Link>{' '}
+                galisum labore ea volupt.
+              </BannerPrimitive.Text>}/>
+          <Banner appearance="warning" iconName="general.shieldExclamation" heading="13 members under age 13" description="Et sint Quis non excepturi enim et conseq atur porro est galisum labore ea volupt."/>
+          <Banner appearance="error" heading="Banner heading" description="Et sint Quis non excepturi enim et conseq atur porro est galisum labore ea volupt."/>
+        </Column>
+      </Group>
     </CollapsableSection>);
 }
 function CollapsableSection({ children, title, isLast = false }) {
@@ -458,6 +474,10 @@ function Row({ children, style }) {
     const styles = useStyles();
     return <View style={[styles.row, style]}>{children}</View>;
 }
+function Column({ children, style }) {
+    const styles = useStyles();
+    return <View style={[styles.column, style]}>{children}</View>;
+}
 function TextGroup({ children }) {
     const styles = useStyles();
     return <View style={styles.textGroup}>{children}</View>;
@@ -516,6 +536,9 @@ const useStyles = () => {
             justifyContent: 'center',
             flexWrap: 'wrap',
         },
+        column: {
+            gap: space(2),
+        },
         textRow: {
             gap: space(1.5),
         },