@sendbird/uikit-react-native-foundation 2.3.0 → 2.4.0

package/lib/module/ui/OpenChannelMessage/MessageContainer.js

@@ -0,0 +1,116 @@
+import React from 'react';
+import { SendingStatus } from '@sendbird/chat/message';
+import { getMessageTimeFormat } from '@sendbird/uikit-utils';
+import Box from '../../components/Box';
+import Icon from '../../components/Icon';
+import PressBox from '../../components/PressBox';
+import Text from '../../components/Text';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Avatar from '../Avatar';
+import LoadingSpinner from '../LoadingSpinner';
+
+const MessageContainer = _ref => {
+  var _props$strings, _props$strings2;
+
+  let {
+    children,
+    channel,
+    grouped,
+    pressed,
+    ...props
+  } = _ref;
+  const {
+    colors
+  } = useUIKitTheme();
+  const color = colors.ui.openChannelMessage.default;
+
+  const renderSendingStatus = () => {
+    if (!('sendingStatus' in props.message)) return null;
+
+    switch (props.message.sendingStatus) {
+      case SendingStatus.PENDING:
+        {
+          return /*#__PURE__*/React.createElement(SendingStatusContainer, null, /*#__PURE__*/React.createElement(LoadingSpinner, {
+            color: colors.primary,
+            size: 16
+          }));
+        }
+
+      case SendingStatus.FAILED:
+        {
+          return /*#__PURE__*/React.createElement(SendingStatusContainer, null, /*#__PURE__*/React.createElement(Icon, {
+            icon: 'error',
+            color: colors.error,
+            size: 16
+          }));
+        }
+
+      default:
+        {
+          return null;
+        }
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(Box, {
+    flexDirection: 'row',
+    paddingVertical: grouped ? 5 : 6,
+    paddingLeft: 12,
+    paddingRight: 12,
+    backgroundColor: pressed ? color.pressed.background : color.enabled.background
+  }, /*#__PURE__*/React.createElement(Box, {
+    marginRight: 12
+  }, !grouped && 'sender' in props.message ? /*#__PURE__*/React.createElement(PressBox, {
+    onPress: props.onPressAvatar
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    size: styles.avatar.width,
+    uri: props.message.sender.profileUrl
+  })) : /*#__PURE__*/React.createElement(Box, {
+    style: styles.avatar
+  })), /*#__PURE__*/React.createElement(Box, {
+    flexShrink: 1,
+    flex: 1,
+    flexDirection: 'column',
+    alignItems: 'flex-start'
+  }, !grouped && 'sender' in props.message && /*#__PURE__*/React.createElement(Box, {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 2
+  }, /*#__PURE__*/React.createElement(Box, {
+    marginRight: 4,
+    flexShrink: 1
+  }, /*#__PURE__*/React.createElement(Text, {
+    caption1: true,
+    ellipsizeMode: 'middle',
+    numberOfLines: 1,
+    color: channel.isOperator(props.message.sender.userId) ? color.enabled.textOperator : color.enabled.textSenderName
+  }, ((_props$strings = props.strings) === null || _props$strings === void 0 ? void 0 : _props$strings.senderName) ?? props.message.sender.nickname)), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Text, {
+    caption4: true,
+    color: color.enabled.textTime
+  }, ((_props$strings2 = props.strings) === null || _props$strings2 === void 0 ? void 0 : _props$strings2.sentDate) ?? getMessageTimeFormat(new Date(props.message.createdAt))))), /*#__PURE__*/React.createElement(Box, {
+    style: styles.message
+  }, children), renderSendingStatus()));
+};
+
+const SendingStatusContainer = _ref2 => {
+  let {
+    children
+  } = _ref2;
+  return /*#__PURE__*/React.createElement(Box, {
+    flexDirection: 'row'
+  }, /*#__PURE__*/React.createElement(Box, {
+    marginTop: 2
+  }, children));
+};
+
+const styles = createStyleSheet({
+  avatar: {
+    width: 28
+  },
+  message: {
+    width: '100%'
+  }
+});
+export default MessageContainer;
+//# sourceMappingURL=MessageContainer.js.map

package/lib/module/ui/OpenChannelMessage/MessageContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","SendingStatus","getMessageTimeFormat","Box","Icon","PressBox","Text","createStyleSheet","useUIKitTheme","Avatar","LoadingSpinner","MessageContainer","children","channel","grouped","pressed","props","colors","color","ui","openChannelMessage","default","renderSendingStatus","message","sendingStatus","PENDING","primary","FAILED","error","background","enabled","onPressAvatar","styles","avatar","width","sender","profileUrl","isOperator","userId","textOperator","textSenderName","strings","senderName","nickname","textTime","sentDate","Date","createdAt","SendingStatusContainer"],"sources":["MessageContainer.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SendingStatus } from '@sendbird/chat/message';\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\nimport { getMessageTimeFormat } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport Icon from '../../components/Icon';\nimport PressBox from '../../components/PressBox';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Avatar from '../Avatar';\nimport LoadingSpinner from '../LoadingSpinner';\nimport type { OpenChannelMessageProps } from './index';\n\ntype Props = {\n  pressed?: boolean;\n};\n\nconst MessageContainer = ({\n  children,\n  channel,\n  grouped,\n  pressed,\n  ...props\n}: OpenChannelMessageProps<SendbirdMessage, Props>) => {\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.openChannelMessage.default;\n\n  const renderSendingStatus = () => {\n    if (!('sendingStatus' in props.message)) return null;\n\n    switch (props.message.sendingStatus) {\n      case SendingStatus.PENDING: {\n        return (\n          <SendingStatusContainer>\n            <LoadingSpinner color={colors.primary} size={16} />\n          </SendingStatusContainer>\n        );\n      }\n      case SendingStatus.FAILED: {\n        return (\n          <SendingStatusContainer>\n            <Icon icon={'error'} color={colors.error} size={16} />\n          </SendingStatusContainer>\n        );\n      }\n      default: {\n        return null;\n      }\n    }\n  };\n\n  return (\n    <Box\n      flexDirection={'row'}\n      paddingVertical={grouped ? 5 : 6}\n      paddingLeft={12}\n      paddingRight={12}\n      backgroundColor={pressed ? color.pressed.background : color.enabled.background}\n    >\n      <Box marginRight={12}>\n        {!grouped && 'sender' in props.message ? (\n          <PressBox onPress={props.onPressAvatar}>\n            <Avatar size={styles.avatar.width} uri={props.message.sender.profileUrl} />\n          </PressBox>\n        ) : (\n          <Box style={styles.avatar} />\n        )}\n      </Box>\n      <Box flexShrink={1} flex={1} flexDirection={'column'} alignItems={'flex-start'}>\n        {!grouped && 'sender' in props.message && (\n          <Box flexDirection={'row'} alignItems={'center'} marginBottom={2}>\n            <Box marginRight={4} flexShrink={1}>\n              <Text\n                caption1\n                ellipsizeMode={'middle'}\n                numberOfLines={1}\n                color={\n                  channel.isOperator(props.message.sender.userId)\n                    ? color.enabled.textOperator\n                    : color.enabled.textSenderName\n                }\n              >\n                {props.strings?.senderName ?? props.message.sender.nickname}\n              </Text>\n            </Box>\n            <Box>\n              <Text caption4 color={color.enabled.textTime}>\n                {props.strings?.sentDate ?? getMessageTimeFormat(new Date(props.message.createdAt))}\n              </Text>\n            </Box>\n          </Box>\n        )}\n        <Box style={styles.message}>{children}</Box>\n\n        {renderSendingStatus()}\n      </Box>\n    </Box>\n  );\n};\n\nconst SendingStatusContainer = ({ children }: { children: React.ReactElement }) => {\n  return (\n    <Box flexDirection={'row'}>\n      <Box marginTop={2}>{children}</Box>\n    </Box>\n  );\n};\n\nconst styles = createStyleSheet({\n  avatar: {\n    width: 28,\n  },\n  message: {\n    width: '100%',\n  },\n});\n\nexport default MessageContainer;\n"],"mappings":"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"}

package/lib/module/ui/OpenChannelMessage/index.js

@@ -0,0 +1,18 @@
+import AdminMessage from './Message.admin';
+import FileMessage from './Message.file';
+import ImageFileMessage from './Message.file.image';
+import VideoFileMessage from './Message.file.video';
+import UnknownMessage from './Message.unknown';
+import UserMessage from './Message.user';
+import OpenGraphUserMessage from './Message.user.og';
+const OpenChannelMessage = {
+  User: UserMessage,
+  OpenGraphUser: OpenGraphUserMessage,
+  File: FileMessage,
+  ImageFile: ImageFileMessage,
+  VideoFile: VideoFileMessage,
+  Admin: AdminMessage,
+  Unknown: UnknownMessage
+};
+export default OpenChannelMessage;
+//# sourceMappingURL=index.js.map

package/lib/module/ui/OpenChannelMessage/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["AdminMessage","FileMessage","ImageFileMessage","VideoFileMessage","UnknownMessage","UserMessage","OpenGraphUserMessage","OpenChannelMessage","User","OpenGraphUser","File","ImageFile","VideoFile","Admin","Unknown"],"sources":["index.ts"],"sourcesContent":["import type React from 'react';\n\nimport type { SendbirdMessage, SendbirdOpenChannel } from '@sendbird/uikit-utils';\n\nimport AdminMessage from './Message.admin';\nimport FileMessage from './Message.file';\nimport ImageFileMessage from './Message.file.image';\nimport VideoFileMessage from './Message.file.video';\nimport UnknownMessage from './Message.unknown';\nimport UserMessage from './Message.user';\nimport OpenGraphUserMessage from './Message.user.og';\n\nexport type OpenChannelMessageProps<T extends SendbirdMessage, AdditionalProps = unknown> = {\n  channel: SendbirdOpenChannel;\n  message: T;\n  strings?: {\n    senderName?: string;\n    sentDate?: string;\n    edited?: string;\n    fileName?: string;\n    unknownTitle?: string;\n    unknownDescription?: string;\n  };\n  children?: React.ReactNode;\n  grouped?: boolean;\n  onPress?: () => void;\n  onLongPress?: () => void;\n  onPressAvatar?: () => void;\n  onPressURL?: () => void;\n} & AdditionalProps;\n\nconst OpenChannelMessage = {\n  User: UserMessage,\n  OpenGraphUser: OpenGraphUserMessage,\n  File: FileMessage,\n  ImageFile: ImageFileMessage,\n  VideoFile: VideoFileMessage,\n  Admin: AdminMessage,\n  Unknown: UnknownMessage,\n};\n\nexport default OpenChannelMessage;\n"],"mappings":"AAIA,OAAOA,YAAP,MAAyB,iBAAzB;AACA,OAAOC,WAAP,MAAwB,gBAAxB;AACA,OAAOC,gBAAP,MAA6B,sBAA7B;AACA,OAAOC,gBAAP,MAA6B,sBAA7B;AACA,OAAOC,cAAP,MAA2B,mBAA3B;AACA,OAAOC,WAAP,MAAwB,gBAAxB;AACA,OAAOC,oBAAP,MAAiC,mBAAjC;AAqBA,MAAMC,kBAAkB,GAAG;EACzBC,IAAI,EAAEH,WADmB;EAEzBI,aAAa,EAAEH,oBAFU;EAGzBI,IAAI,EAAET,WAHmB;EAIzBU,SAAS,EAAET,gBAJc;EAKzBU,SAAS,EAAET,gBALc;EAMzBU,KAAK,EAAEb,YANkB;EAOzBc,OAAO,EAAEV;AAPgB,CAA3B;AAUA,eAAeG,kBAAf"}

package/lib/module/ui/OpenChannelPreview/index.js

@@ -0,0 +1,117 @@
+import React from 'react';
+import { conditionChaining, truncatedCount } from '@sendbird/uikit-utils';
+import Box from '../../components/Box';
+import Icon from '../../components/Icon';
+import Image from '../../components/Image';
+import Text from '../../components/Text';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+
+const OpenChannelPreview = _ref => {
+  let {
+    customCover,
+    coverUrl,
+    participantsCount = 0,
+    title,
+    frozen
+  } = _ref;
+  const {
+    colors
+  } = useUIKitTheme();
+  const color = colors.ui.openChannelPreview.default.none;
+  return /*#__PURE__*/React.createElement(Box, {
+    backgroundColor: color.background,
+    width: '100%',
+    height: 62,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16
+  }, /*#__PURE__*/React.createElement(Box, {
+    width: styles.channelCover.width,
+    height: styles.channelCover.height,
+    borderRadius: styles.channelCover.width,
+    overflow: 'hidden',
+    marginRight: 16
+  }, conditionChaining([Boolean(customCover)], [customCover, /*#__PURE__*/React.createElement(Image, {
+    resizeMode: 'cover',
+    style: [styles.channelCover, {
+      backgroundColor: color.coverBackground
+    }],
+    source: {
+      uri: coverUrl
+    }
+  })])), /*#__PURE__*/React.createElement(Box, {
+    flex: 1,
+    height: '100%',
+    justifyContent: 'center'
+  }, /*#__PURE__*/React.createElement(Box, {
+    flexDirection: 'row',
+    flexShrink: 1,
+    marginBottom: 4,
+    alignItems: 'center'
+  }, /*#__PURE__*/React.createElement(Text, {
+    subtitle1: true,
+    style: styles.channelInfoTitle,
+    numberOfLines: 1,
+    color: color.textTitle
+  }, title), frozen && /*#__PURE__*/React.createElement(Icon, {
+    size: 16,
+    icon: 'freeze',
+    color: color.frozenIcon,
+    containerStyle: styles.marginLeft
+  })), /*#__PURE__*/React.createElement(Box, {
+    flexDirection: 'row',
+    flexShrink: 1,
+    alignItems: 'center',
+    justifyContent: 'flex-start'
+  }, /*#__PURE__*/React.createElement(Box, {
+    flexDirection: 'row',
+    alignItems: 'center'
+  }, /*#__PURE__*/React.createElement(Icon, {
+    size: 16,
+    icon: 'members',
+    color: color.participantsIcon,
+    containerStyle: styles.marginRight
+  }), /*#__PURE__*/React.createElement(Text, {
+    caption2: true,
+    color: color.textParticipants
+  }, truncatedCount(participantsCount, 999)))), /*#__PURE__*/React.createElement(Separator, {
+    color: color.separator
+  })));
+};
+
+const Separator = _ref2 => {
+  let {
+    color
+  } = _ref2;
+  return /*#__PURE__*/React.createElement(Box, {
+    style: [styles.separator, {
+      backgroundColor: color
+    }]
+  });
+};
+
+const styles = createStyleSheet({
+  channelCover: {
+    width: 32,
+    height: 32
+  },
+  channelInfoTitle: {
+    flexShrink: 1
+  },
+  marginRight: {
+    marginRight: 4
+  },
+  marginLeft: {
+    marginLeft: 4
+  },
+  separator: {
+    position: 'absolute',
+    left: 0,
+    right: -16,
+    bottom: 0,
+    height: 1
+  }
+});
+export default OpenChannelPreview;
+//# sourceMappingURL=index.js.map

package/lib/module/ui/OpenChannelPreview/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","conditionChaining","truncatedCount","Box","Icon","Image","Text","createStyleSheet","useUIKitTheme","OpenChannelPreview","customCover","coverUrl","participantsCount","title","frozen","colors","color","ui","openChannelPreview","default","none","background","styles","channelCover","width","height","Boolean","backgroundColor","coverBackground","uri","channelInfoTitle","textTitle","frozenIcon","marginLeft","participantsIcon","marginRight","textParticipants","separator","Separator","flexShrink","position","left","right","bottom"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { conditionChaining, truncatedCount } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport Icon from '../../components/Icon';\nimport Image from '../../components/Image';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\ntype Props = {\n  customCover?: React.ReactElement;\n  coverUrl: string;\n  title: string;\n  participantsCount?: number;\n  frozen?: boolean;\n};\nconst OpenChannelPreview = ({ customCover, coverUrl, participantsCount = 0, title, frozen }: Props) => {\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.openChannelPreview.default.none;\n\n  return (\n    <Box\n      backgroundColor={color.background}\n      width={'100%'}\n      height={62}\n      flexDirection={'row'}\n      alignItems={'center'}\n      paddingHorizontal={16}\n    >\n      <Box\n        width={styles.channelCover.width}\n        height={styles.channelCover.height}\n        borderRadius={styles.channelCover.width}\n        overflow={'hidden'}\n        marginRight={16}\n      >\n        {conditionChaining(\n          [Boolean(customCover)],\n          [\n            customCover,\n            <Image\n              resizeMode={'cover'}\n              style={[styles.channelCover, { backgroundColor: color.coverBackground }]}\n              source={{ uri: coverUrl }}\n            />,\n          ],\n        )}\n      </Box>\n      <Box flex={1} height={'100%'} justifyContent={'center'}>\n        <Box flexDirection={'row'} flexShrink={1} marginBottom={4} alignItems={'center'}>\n          <Text subtitle1 style={styles.channelInfoTitle} numberOfLines={1} color={color.textTitle}>\n            {title}\n          </Text>\n          {frozen && <Icon size={16} icon={'freeze'} color={color.frozenIcon} containerStyle={styles.marginLeft} />}\n        </Box>\n        <Box flexDirection={'row'} flexShrink={1} alignItems={'center'} justifyContent={'flex-start'}>\n          <Box flexDirection={'row'} alignItems={'center'}>\n            <Icon size={16} icon={'members'} color={color.participantsIcon} containerStyle={styles.marginRight} />\n            <Text caption2 color={color.textParticipants}>\n              {truncatedCount(participantsCount, 999)}\n            </Text>\n          </Box>\n        </Box>\n        <Separator color={color.separator} />\n      </Box>\n    </Box>\n  );\n};\n\nconst Separator = ({ color }: { color: string }) => <Box style={[styles.separator, { backgroundColor: color }]} />;\n\nconst styles = createStyleSheet({\n  channelCover: {\n    width: 32,\n    height: 32,\n  },\n  channelInfoTitle: {\n    flexShrink: 1,\n  },\n  marginRight: {\n    marginRight: 4,\n  },\n  marginLeft: {\n    marginLeft: 4,\n  },\n  separator: {\n    position: 'absolute',\n    left: 0,\n    right: -16,\n    bottom: 0,\n    height: 1,\n  },\n});\n\nexport default OpenChannelPreview;\n"],"mappings":"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"}

package/lib/typescript/src/components/Box/index.d.ts

@@ -0,0 +1,11 @@
+import { ViewProps, ViewStyle } from 'react-native';
+import type { UIKitColors, UIKitPalette } from '../../types';
+type BaseBoxProps = Pick<ViewStyle, 'flex' | 'flexShrink' | 'flexGrow' | 'flexDirection' | 'alignItems' | 'justifyContent' | 'borderRadius' | 'borderWidth' | 'borderColor' | 'borderBottomColor' | 'borderBottomWidth' | 'margin' | 'marginHorizontal' | 'marginVertical' | 'marginLeft' | 'marginRight' | 'marginTop' | 'marginBottom' | 'padding' | 'paddingHorizontal' | 'paddingVertical' | 'paddingLeft' | 'paddingRight' | 'paddingTop' | 'paddingBottom' | 'overflow' | 'width' | 'height'> & {
+    backgroundColor?: string | ((theme: {
+        colors: UIKitColors;
+        palette: UIKitPalette;
+    }) => string);
+};
+type BoxProps = BaseBoxProps & ViewProps;
+declare const Box: ({ style, children, ...props }: BoxProps) => JSX.Element;
+export default Box;

package/lib/typescript/src/components/ImageWithPlaceholder/index.d.ts

@@ -0,0 +1,11 @@
+import { StyleProp, ViewStyle } from 'react-native';
+type Props = {
+    source: number | {
+        uri: string;
+    };
+    width?: number | string;
+    height?: number | string;
+    style?: StyleProp<ViewStyle>;
+};
+declare const ImageWithPlaceholder: (props: Props) => JSX.Element;
+export default ImageWithPlaceholder;

package/lib/typescript/src/components/PressBox/index.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { GestureResponderEvent, StyleProp, ViewStyle } from 'react-native';
+type PressBoxStateParams = {
+    pressed: boolean;
+};
+type Props = {
+    onPress?: (event: GestureResponderEvent) => void;
+    onLongPress?: (event: GestureResponderEvent) => void;
+    delayLongPress?: number;
+    activeOpacity?: number;
+    style?: StyleProp<ViewStyle> | ((state: PressBoxStateParams) => StyleProp<ViewStyle>);
+    children?: React.ReactNode | ((params: PressBoxStateParams) => React.ReactNode);
+};
+export declare const DEFAULT_LONG_PRESS_DELAY = 350;
+declare const PressBox: (props: Props) => JSX.Element;
+export default PressBox;

package/lib/typescript/src/index.d.ts

@@ -1,10 +1,13 @@
 /** Assets **/
 export { default as IconAssets } from './assets/icon';
 /** Component **/
+export { default as Box } from './components/Box';
 export { default as Divider } from './components/Divider';
 export { default as Icon } from './components/Icon';
 export { default as Image } from './components/Image';
+export { default as ImageWithPlaceholder } from './components/ImageWithPlaceholder';
 export { default as Modal } from './components/Modal';
+export { default as PressBox } from './components/PressBox';
 export { default as RegexText } from './components/RegexText';
 export { default as Switch } from './components/Switch';
 export { default as Text } from './components/Text';
@@ -22,7 +25,11 @@ export { DialogProvider, useActionMenu, useAlert, usePrompt, useBottomSheet } fr
 export { default as GroupChannelPreview } from './ui/GroupChannelPreview';
 export { default as Header } from './ui/Header';
 export { default as LoadingSpinner } from './ui/LoadingSpinner';
-export { default as MenuBar, MenuBarProps } from './ui/MenuBar';
+export { default as MenuBar } from './ui/MenuBar';
+export type { MenuBarProps } from './ui/MenuBar';
+export { default as OpenChannelMessage } from './ui/OpenChannelMessage';
+export type { OpenChannelMessageProps } from './ui/OpenChannelMessage';
+export { default as OpenChannelPreview } from './ui/OpenChannelPreview';
 export { default as OutlinedButton } from './ui/OutlinedButton';
 export { default as Placeholder } from './ui/Placeholder';
 export { default as ProfileCard } from './ui/ProfileCard';

package/lib/typescript/src/types.d.ts

@@ -26,7 +26,7 @@ export interface UIKitTheme {
     colors: UIKitColors;
     typography: UIKitTypography;
 }
-export type Component = 'Header' | 'Button' | 'Dialog' | 'Input' | 'Badge' | 'Placeholder' | 'Message' | 'DateSeparator' | 'GroupChannelPreview' | 'ProfileCard' | 'Reaction';
+export type Component = 'Header' | 'Button' | 'Dialog' | 'Input' | 'Badge' | 'Placeholder' | 'DateSeparator' | 'GroupChannelMessage' | 'GroupChannelPreview' | 'ProfileCard' | 'Reaction' | 'OpenChannelMessage' | 'OpenChannelPreview' | 'Message';
 export type GetColorTree<Tree extends {
     Variant: {
         [key in Component]: string;
@@ -46,11 +46,15 @@ export type ComponentColorTree = GetColorTree<{
         Input: 'default' | 'underline';
         Badge: 'default';
         Placeholder: 'default';
-        Message: 'incoming' | 'outgoing';
         DateSeparator: 'default';
+        GroupChannelMessage: 'incoming' | 'outgoing';
         GroupChannelPreview: 'default';
         ProfileCard: 'default';
         Reaction: 'default' | 'rounded';
+        OpenChannelMessage: 'default';
+        OpenChannelPreview: 'default';
+        /** @deprecated **/
+        Message: 'incoming' | 'outgoing';
     };
     State: {
         Header: 'none';
@@ -59,11 +63,15 @@ export type ComponentColorTree = GetColorTree<{
         Input: 'active' | 'disabled';
         Badge: 'none';
         Placeholder: 'none';
-        Message: 'enabled' | 'pressed';
         DateSeparator: 'none';
+        GroupChannelMessage: 'enabled' | 'pressed';
         GroupChannelPreview: 'none';
         ProfileCard: 'none';
         Reaction: 'enabled' | 'selected';
+        OpenChannelMessage: 'enabled' | 'pressed';
+        OpenChannelPreview: 'none';
+        /** @deprecated **/
+        Message: 'enabled' | 'pressed';
     };
     ColorPart: {
         Header: 'background' | 'borderBottom';
@@ -72,11 +80,15 @@ export type ComponentColorTree = GetColorTree<{
         Input: 'text' | 'placeholder' | 'background' | 'highlight';
         Badge: 'text' | 'background';
         Placeholder: 'content' | 'highlight';
-        Message: 'textMsg' | 'textEdited' | 'textSenderName' | 'textTime' | 'background';
         DateSeparator: 'text' | 'background';
+        GroupChannelMessage: 'textMsg' | 'textEdited' | 'textSenderName' | 'textTime' | 'background';
         GroupChannelPreview: 'textTitle' | 'textTitleCaption' | 'textBody' | 'memberCount' | 'bodyIcon' | 'background' | 'coverBackground' | 'bodyIconBackground' | 'separator';
         ProfileCard: 'textUsername' | 'textBodyLabel' | 'textBody' | 'background';
         Reaction: 'background' | 'highlight';
+        OpenChannelMessage: 'textMsg' | 'textMsgPostfix' | 'textSenderName' | 'textTime' | 'textOperator' | 'background' | 'bubbleBackground' | 'adminBackground';
+        OpenChannelPreview: 'textTitle' | 'textParticipants' | 'frozenIcon' | 'participantsIcon' | 'background' | 'coverBackground' | 'separator';
+        /** @deprecated **/
+        Message: 'textMsg' | 'textEdited' | 'textSenderName' | 'textTime' | 'background';
     };
 }>;
 export type ComponentColors<T extends Component> = {
@@ -116,11 +128,15 @@ export interface UIKitColors {
         input: ComponentColors<'Input'>;
         badge: ComponentColors<'Badge'>;
         placeholder: ComponentColors<'Placeholder'>;
-        message: ComponentColors<'Message'>;
         dateSeparator: ComponentColors<'DateSeparator'>;
+        groupChannelMessage: ComponentColors<'GroupChannelMessage'>;
         groupChannelPreview: ComponentColors<'GroupChannelPreview'>;
         profileCard: ComponentColors<'ProfileCard'>;
         reaction: ComponentColors<'Reaction'>;
+        openChannelMessage: ComponentColors<'OpenChannelMessage'>;
+        openChannelPreview: ComponentColors<'OpenChannelPreview'>;
+        /** @deprecated Please use `colors.ui.groupChannelMessage` **/
+        message: ComponentColors<'Message'>;
     };
 }
 export type HeaderElement = string | ReactElement | null;

package/lib/typescript/src/ui/Header/index.d.ts

@@ -11,6 +11,7 @@ export type HeaderProps = BaseHeaderProps<{
     onPressRight?: () => void;
 }, {
     clearTitleMargin?: boolean;
+    clearStatusBarTopInset?: boolean;
     statusBarTopInsetAs?: 'padding' | 'margin';
 }>;
 declare const Header: ((props: HeaderProps) => JSX.Element) & {

package/lib/typescript/src/ui/OpenChannelMessage/Message.admin.d.ts

@@ -0,0 +1,4 @@
+import type { SendbirdAdminMessage } from '@sendbird/uikit-utils';
+import type { OpenChannelMessageProps } from './index';
+declare const AdminMessage: (props: OpenChannelMessageProps<SendbirdAdminMessage>) => JSX.Element;
+export default AdminMessage;

package/lib/typescript/src/ui/OpenChannelMessage/Message.file.d.ts

@@ -0,0 +1,5 @@
+import { SendbirdFileMessage } from '@sendbird/uikit-utils';
+import type { OpenChannelMessageProps } from './index';
+type Props = {};
+declare const FileMessage: (props: OpenChannelMessageProps<SendbirdFileMessage, Props>) => JSX.Element;
+export default FileMessage;

package/lib/typescript/src/ui/OpenChannelMessage/Message.file.image.d.ts

@@ -0,0 +1,4 @@
+import type { SendbirdFileMessage } from '@sendbird/uikit-utils';
+import type { OpenChannelMessageProps } from './index';
+declare const ImageFileMessage: (props: OpenChannelMessageProps<SendbirdFileMessage>) => JSX.Element;
+export default ImageFileMessage;

package/lib/typescript/src/ui/OpenChannelMessage/Message.file.video.d.ts

@@ -0,0 +1,9 @@
+import type { SendbirdFileMessage } from '@sendbird/uikit-utils';
+import type { OpenChannelMessageProps } from './index';
+type Props = {
+    fetchThumbnailFromVideoSource: (uri: string) => Promise<{
+        path: string;
+    } | null>;
+};
+declare const VideoFileMessage: (props: OpenChannelMessageProps<SendbirdFileMessage, Props>) => JSX.Element;
+export default VideoFileMessage;

package/lib/typescript/src/ui/OpenChannelMessage/Message.unknown.d.ts

@@ -0,0 +1,4 @@
+import type { SendbirdMessage } from '@sendbird/uikit-utils';
+import type { OpenChannelMessageProps } from './index';
+declare const UnknownMessage: (props: OpenChannelMessageProps<SendbirdMessage>) => JSX.Element;
+export default UnknownMessage;

package/lib/typescript/src/ui/OpenChannelMessage/Message.user.d.ts

@@ -0,0 +1,5 @@
+import type { SendbirdUserMessage } from '@sendbird/uikit-utils';
+import type { OpenChannelMessageProps } from './index';
+type Props = {};
+declare const UserMessage: (props: OpenChannelMessageProps<SendbirdUserMessage, Props>) => JSX.Element;
+export default UserMessage;

package/lib/typescript/src/ui/OpenChannelMessage/Message.user.og.d.ts

@@ -0,0 +1,5 @@
+import type { SendbirdUserMessage } from '@sendbird/uikit-utils';
+import type { OpenChannelMessageProps } from './index';
+type Props = {};
+declare const OpenGraphUserMessage: (props: OpenChannelMessageProps<SendbirdUserMessage, Props>) => JSX.Element;
+export default OpenGraphUserMessage;

package/lib/typescript/src/ui/OpenChannelMessage/MessageContainer.d.ts

@@ -0,0 +1,7 @@
+import type { SendbirdMessage } from '@sendbird/uikit-utils';
+import type { OpenChannelMessageProps } from './index';
+type Props = {
+    pressed?: boolean;
+};
+declare const MessageContainer: ({ children, channel, grouped, pressed, ...props }: OpenChannelMessageProps<SendbirdMessage, Props>) => JSX.Element;
+export default MessageContainer;

package/lib/typescript/src/ui/OpenChannelMessage/index.d.ts

@@ -0,0 +1,136 @@
+import type React from 'react';
+import type { SendbirdMessage, SendbirdOpenChannel } from '@sendbird/uikit-utils';
+export type OpenChannelMessageProps<T extends SendbirdMessage, AdditionalProps = unknown> = {
+    channel: SendbirdOpenChannel;
+    message: T;
+    strings?: {
+        senderName?: string;
+        sentDate?: string;
+        edited?: string;
+        fileName?: string;
+        unknownTitle?: string;
+        unknownDescription?: string;
+    };
+    children?: React.ReactNode;
+    grouped?: boolean;
+    onPress?: () => void;
+    onLongPress?: () => void;
+    onPressAvatar?: () => void;
+    onPressURL?: () => void;
+} & AdditionalProps;
+declare const OpenChannelMessage: {
+    User: (props: {
+        channel: SendbirdOpenChannel;
+        message: import("@sendbird/chat/message").UserMessage;
+        strings?: {
+            senderName?: string | undefined;
+            sentDate?: string | undefined;
+            edited?: string | undefined;
+            fileName?: string | undefined;
+            unknownTitle?: string | undefined;
+            unknownDescription?: string | undefined;
+        } | undefined;
+        children?: React.ReactNode;
+        grouped?: boolean | undefined;
+        onPress?: (() => void) | undefined;
+        onLongPress?: (() => void) | undefined;
+        onPressAvatar?: (() => void) | undefined;
+        onPressURL?: (() => void) | undefined;
+    }) => JSX.Element;
+    OpenGraphUser: (props: {
+        channel: SendbirdOpenChannel;
+        message: import("@sendbird/chat/message").UserMessage;
+        strings?: {
+            senderName?: string | undefined;
+            sentDate?: string | undefined;
+            edited?: string | undefined;
+            fileName?: string | undefined;
+            unknownTitle?: string | undefined;
+            unknownDescription?: string | undefined;
+        } | undefined;
+        children?: React.ReactNode;
+        grouped?: boolean | undefined;
+        onPress?: (() => void) | undefined;
+        onLongPress?: (() => void) | undefined;
+        onPressAvatar?: (() => void) | undefined;
+        onPressURL?: (() => void) | undefined;
+    }) => JSX.Element;
+    File: (props: {
+        channel: SendbirdOpenChannel;
+        message: import("@sendbird/chat/message").FileMessage;
+        strings?: {
+            senderName?: string | undefined;
+            sentDate?: string | undefined;
+            edited?: string | undefined;
+            fileName?: string | undefined;
+            unknownTitle?: string | undefined;
+            unknownDescription?: string | undefined;
+        } | undefined;
+        children?: React.ReactNode;
+        grouped?: boolean | undefined;
+        onPress?: (() => void) | undefined;
+        onLongPress?: (() => void) | undefined;
+        onPressAvatar?: (() => void) | undefined;
+        onPressURL?: (() => void) | undefined;
+    }) => JSX.Element;
+    ImageFile: (props: {
+        channel: SendbirdOpenChannel;
+        message: import("@sendbird/chat/message").FileMessage;
+        strings?: {
+            senderName?: string | undefined;
+            sentDate?: string | undefined;
+            edited?: string | undefined;
+            fileName?: string | undefined;
+            unknownTitle?: string | undefined;
+            unknownDescription?: string | undefined;
+        } | undefined;
+        children?: React.ReactNode;
+        grouped?: boolean | undefined;
+        onPress?: (() => void) | undefined;
+        onLongPress?: (() => void) | undefined;
+        onPressAvatar?: (() => void) | undefined;
+        onPressURL?: (() => void) | undefined;
+    }) => JSX.Element;
+    VideoFile: (props: OpenChannelMessageProps<import("@sendbird/chat/message").FileMessage, {
+        fetchThumbnailFromVideoSource: (uri: string) => Promise<{
+            path: string;
+        } | null>;
+    }>) => JSX.Element;
+    Admin: (props: {
+        channel: SendbirdOpenChannel;
+        message: import("@sendbird/chat/message").AdminMessage;
+        strings?: {
+            senderName?: string | undefined;
+            sentDate?: string | undefined;
+            edited?: string | undefined;
+            fileName?: string | undefined;
+            unknownTitle?: string | undefined;
+            unknownDescription?: string | undefined;
+        } | undefined;
+        children?: React.ReactNode;
+        grouped?: boolean | undefined;
+        onPress?: (() => void) | undefined;
+        onLongPress?: (() => void) | undefined;
+        onPressAvatar?: (() => void) | undefined;
+        onPressURL?: (() => void) | undefined;
+    }) => JSX.Element;
+    Unknown: (props: {
+        channel: SendbirdOpenChannel;
+        message: SendbirdMessage;
+        strings?: {
+            senderName?: string | undefined;
+            sentDate?: string | undefined;
+            edited?: string | undefined;
+            fileName?: string | undefined;
+            unknownTitle?: string | undefined;
+            unknownDescription?: string | undefined;
+        } | undefined;
+        children?: React.ReactNode;
+        grouped?: boolean | undefined;
+        onPress?: (() => void) | undefined;
+        onLongPress?: (() => void) | undefined;
+        onPressAvatar?: (() => void) | undefined;
+        onPressURL?: (() => void) | undefined;
+    }) => JSX.Element;
+};
+export default OpenChannelMessage;