pds-dev-kit-web 2.2.257 → 2.2.259

package/dist/src/common/services/i18n/resources/en.json

@@ -102,6 +102,7 @@
         "str_9069": "If French is not entered, members will see the content in English.",
         "str_9070": "If Spanish is not entered, members will see the content in English.",
         "str_upload": "Upload",
-        "str_delete": "Delete"
+        "str_delete": "Delete",
+        "str_reaction": "Reaction"
     }
 }

package/dist/src/common/services/i18n/resources/es.json

@@ -102,6 +102,7 @@
         "str_9069": "Si no ingresa en francés, se mostrará a los miembros en inglés.",
         "str_9070": "Si no ingresa en español, se mostrará a los miembros en inglés.",
         "str_upload": "Subir",
-        "str_delete": "borrar"
+        "str_delete": "borrar",
+        "str_reaction": "Reaction"
     }
 }

package/dist/src/common/services/i18n/resources/fil.json

@@ -95,6 +95,7 @@
         "str_friendly_currency_jpy": "JPY",
         "str_friendly_currency_dollar": "dolyar",
         "str_upload": "Upload",
-        "str_delete": "Tanggalin"
+        "str_delete": "Tanggalin",
+        "str_reaction": "Reaction"
     }
 }

package/dist/src/common/services/i18n/resources/index.d.ts

@@ -105,6 +105,7 @@ declare const locale: {
             str_9070: string;
             str_upload: string;
             str_delete: string;
+            str_reaction: string;
         };
     };
     readonly en: {
@@ -212,6 +213,7 @@ declare const locale: {
             str_9070: string;
             str_upload: string;
             str_delete: string;
+            str_reaction: string;
         };
     };
     readonly ja: {
@@ -319,6 +321,7 @@ declare const locale: {
             str_9070: string;
             str_upload: string;
             str_delete: string;
+            str_reaction: string;
         };
     };
     readonly es: {
@@ -426,6 +429,7 @@ declare const locale: {
             str_9070: string;
             str_upload: string;
             str_delete: string;
+            str_reaction: string;
         };
     };
     readonly 'zh-cn': {
@@ -533,6 +537,7 @@ declare const locale: {
             str_9070: string;
             str_upload: string;
             str_delete: string;
+            str_reaction: string;
         };
     };
     readonly 'zh-tw': {
@@ -640,6 +645,7 @@ declare const locale: {
             str_9070: string;
             str_upload: string;
             str_delete: string;
+            str_reaction: string;
         };
     };
     readonly fil: {
@@ -740,6 +746,7 @@ declare const locale: {
             str_friendly_currency_dollar: string;
             str_upload: string;
             str_delete: string;
+            str_reaction: string;
         };
     };
 };

package/dist/src/common/services/i18n/resources/ja.json

@@ -102,6 +102,7 @@
         "str_9069": "フランス語を入力しないと、メンバーに英語で表示されます。",
         "str_9070": "スペイン語を入力しないと、会員に英語で表示されます。",
         "str_upload": "アップロード",
-        "str_delete": "削除"
+        "str_delete": "削除",
+        "str_reaction": "Reaction"
     }
 }

package/dist/src/common/services/i18n/resources/ko.json

@@ -103,6 +103,7 @@
         "str_9069": "프랑스어를 입력하지 않을 경우, 회원에게 영어로 보여집니다.",
         "str_9070": "스페인어를 입력하지 않을 경우, 회원에게 영어로 보여집니다.",
         "str_upload": "업로드",
-        "str_delete": "삭제"
+        "str_delete": "삭제",
+        "str_reaction": "반응"
     }
 }

package/dist/src/common/services/i18n/resources/zh-cn.json

@@ -102,6 +102,7 @@
         "str_9069": "如果您不输入法语，则会员以英文显示给会员。",
         "str_9070": "如果您不输入西班牙语，它将以英文显示给会员。",
         "str_upload": "上传",
-        "str_delete": "删除"
+        "str_delete": "删除",
+        "str_reaction": "Reaction"
     }
 }

package/dist/src/common/services/i18n/resources/zh-tw.json

@@ -102,6 +102,7 @@
         "str_9069": "如果您不輸入法語，則以英文顯示給會員。",
         "str_9070": "如果您不輸入西班牙語，則以英文顯示給會員。",
         "str_upload": "上傳",
-        "str_delete": "刪除"
+        "str_delete": "刪除",
+        "str_reaction": "Reaction"
     }
 }

package/dist/src/common/styles/colorSet/UIColor.json

@@ -905,5 +905,10 @@
     "ui_142": "sys_widget_grey_08",
     "ui_143": "sys_on_base_hover_01",
     "ui_144": "sys_on_base_pressed_01",
-    "ui_cpnt_badge_base_confirm": "sys_component_base_green"
+    "ui_cpnt_badge_base_confirm": "sys_component_base_green",
+    "ui_cpnt_message_reaction_base_01": "sys_component_pastel_base_01",
+    "ui_cpnt_message_reaction_base_02": "sys_component_pastel_base_02",
+    "ui_cpnt_message_reaction_base_03": "sys_component_pastel_base_03",
+    "ui_cpnt_message_reaction_base_04": "sys_component_pastel_base_04",
+    "ui_cpnt_message_reaction_base_05": "sys_component_pastel_base_05"
 }

package/dist/src/common/styles/colorSet/index.d.ts

@@ -1,5 +1,129 @@
 declare const colorSet: {
-    readonly PaletteColor_Dark: {
+    readonly SemanticColor: {
+        blue500: string;
+        blue700: string;
+        blue300: string;
+        green700: string;
+        green500: string;
+        green300: string;
+        red500: string;
+        grey900: string;
+        grey500: string;
+        grey400: string;
+        grey100: string;
+        grey50: string;
+        white: string;
+        black: string;
+        darkblue500: string;
+        grey950: string;
+        darkgrey900: string;
+        darkgrey500: string;
+        darkgrey400: string;
+        darkgrey100: string;
+        darkgrey50: string;
+        darkred500: string;
+        darkgreen700: string;
+        orange500: string;
+        darkorange500: string;
+        opacity00: string;
+        opacity20: string;
+        opacity30: string;
+        opacity65: string;
+        darkgreen500: string;
+        grey70: string;
+        navy500: string;
+        lightgreen500: string;
+        pink500: string;
+        darkgrey70: string;
+        darknavy500: string;
+        darkpink500: string;
+        darklightgreen500: string;
+        opacity10: string;
+        grey600: string;
+        darkgrey600: string;
+        skyblue500: string;
+        skyblue300: string;
+        pink300: string;
+        lightpink500: string;
+        darkblue300: string;
+        darkblue700: string;
+        darkgreen300: string;
+        darkskyblue500: string;
+        navy100: string;
+        darknavy100: string;
+        opacity80: string;
+        opacity50: string;
+        grey30: string;
+        opacity95: string;
+        darkgrey30: string;
+        opacity40: string;
+        kakaoyellow: string;
+        pastelblue500: string;
+        pastelpink500: string;
+        pastelorange500: string;
+        pastelgreen500: string;
+        pastelpurple500: string;
+        darkpastelblue500: string;
+        darkpastelpink500: string;
+        darkpastelorange500: string;
+        darkpastelgreen500: string;
+        darkpastelpurple500: string;
+        green30: string;
+        darkgreen30: string;
+        orange50: string;
+        darkorange50: string;
+        orange30: string;
+        darkorange30: string;
+        green50: string;
+        darkgreen50: string;
+        opacity90: string;
+        facebookblue: string;
+        opacity05: string;
+        opacity15: string;
+        grey80: string;
+        grey200: string;
+        darkgrey80: string;
+        darkgrey200: string;
+        opacity70: string;
+        opacity60: string;
+        skyblue100: string;
+        green100: string;
+        darkgreen100: string;
+        darkskyblue100: string;
+        opacity25: string;
+        opacity35: string;
+        grey10: string;
+        darkgrey10: string;
+        blue50: string;
+        darkblue50: string;
+        blue10: string;
+        red10: string;
+        green10: string;
+        blue30: string;
+        red30: string;
+        orange300: string;
+        darkorange300: string;
+        darkpink300: string;
+        pastelblue300: string;
+        darkpastelblue300: string;
+        softpurple500: string;
+        darksoftpurple500: string;
+        coolpink500: string;
+        darkcoolpink500: string;
+        brown500: string;
+        darkbrown500: string;
+        yellow300: string;
+        darkyellow300: string;
+        grey20: string;
+        darkgrey20: string;
+        grey300: string;
+        darkgrey300: string;
+        yellow500: string;
+        darkyellow500: string;
+        grey450: string;
+        darkgrey450: string;
+    };
+    readonly PaletteColor_light: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -382,131 +506,7 @@ declare const colorSet: {
         sys_on_base_hover_01: string;
         sys_on_base_pressed_01: string;
     };
-    readonly SemanticColor: {
-        blue500: string;
-        blue700: string;
-        blue300: string;
-        green700: string;
-        green500: string;
-        green300: string;
-        red500: string;
-        grey900: string;
-        grey500: string;
-        grey400: string;
-        grey100: string;
-        grey50: string;
-        white: string;
-        black: string;
-        darkblue500: string;
-        grey950: string;
-        darkgrey900: string;
-        darkgrey500: string;
-        darkgrey400: string;
-        darkgrey100: string;
-        darkgrey50: string;
-        darkred500: string;
-        darkgreen700: string;
-        orange500: string;
-        darkorange500: string;
-        opacity00: string;
-        opacity20: string;
-        opacity30: string;
-        opacity65: string;
-        darkgreen500: string;
-        grey70: string;
-        navy500: string;
-        lightgreen500: string;
-        pink500: string;
-        darkgrey70: string;
-        darknavy500: string;
-        darkpink500: string;
-        darklightgreen500: string;
-        opacity10: string;
-        grey600: string;
-        darkgrey600: string;
-        skyblue500: string;
-        skyblue300: string;
-        pink300: string;
-        lightpink500: string;
-        darkblue300: string;
-        darkblue700: string;
-        darkgreen300: string;
-        darkskyblue500: string;
-        navy100: string;
-        darknavy100: string;
-        opacity80: string;
-        opacity50: string;
-        grey30: string;
-        opacity95: string;
-        darkgrey30: string;
-        opacity40: string;
-        kakaoyellow: string;
-        pastelblue500: string;
-        pastelpink500: string;
-        pastelorange500: string;
-        pastelgreen500: string;
-        pastelpurple500: string;
-        darkpastelblue500: string;
-        darkpastelpink500: string;
-        darkpastelorange500: string;
-        darkpastelgreen500: string;
-        darkpastelpurple500: string;
-        green30: string;
-        darkgreen30: string;
-        orange50: string;
-        darkorange50: string;
-        orange30: string;
-        darkorange30: string;
-        green50: string;
-        darkgreen50: string;
-        opacity90: string;
-        facebookblue: string;
-        opacity05: string;
-        opacity15: string;
-        grey80: string;
-        grey200: string;
-        darkgrey80: string;
-        darkgrey200: string;
-        opacity70: string;
-        opacity60: string;
-        skyblue100: string;
-        green100: string;
-        darkgreen100: string;
-        darkskyblue100: string;
-        opacity25: string;
-        opacity35: string;
-        grey10: string;
-        darkgrey10: string;
-        blue50: string;
-        darkblue50: string;
-        blue10: string;
-        red10: string;
-        green10: string;
-        blue30: string;
-        red30: string;
-        orange300: string;
-        darkorange300: string;
-        darkpink300: string;
-        pastelblue300: string;
-        darkpastelblue300: string;
-        softpurple500: string;
-        darksoftpurple500: string;
-        coolpink500: string;
-        darkcoolpink500: string;
-        brown500: string;
-        darkbrown500: string;
-        yellow300: string;
-        darkyellow300: string;
-        grey20: string;
-        darkgrey20: string;
-        grey300: string;
-        darkgrey300: string;
-        yellow500: string;
-        darkyellow500: string;
-        grey450: string;
-        darkgrey450: string;
-    };
-    readonly PaletteColor_light: {
+    readonly PaletteColor_Dark: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -1797,6 +1797,11 @@ declare const colorSet: {
         ui_143: string;
         ui_144: string;
         ui_cpnt_badge_base_confirm: string;
+        ui_cpnt_message_reaction_base_01: string;
+        ui_cpnt_message_reaction_base_02: string;
+        ui_cpnt_message_reaction_base_03: string;
+        ui_cpnt_message_reaction_base_04: string;
+        ui_cpnt_message_reaction_base_05: string;
     };
 };
 export default colorSet;

package/dist/src/common/styles/colorSet/index.js

@@ -4,14 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable import/order */
-var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
 var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
 var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
+var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
 var UIColor_json_1 = __importDefault(require("./UIColor.json"));
 var colorSet = {
-    PaletteColor_Dark: PaletteColor_Dark_json_1.default,
     SemanticColor: SemanticColor_json_1.default,
     PaletteColor_light: PaletteColor_light_json_1.default,
+    PaletteColor_Dark: PaletteColor_Dark_json_1.default,
     UIColor: UIColor_json_1.default
 };
 exports.default = colorSet;

package/dist/src/common/styles/colorSet/ui-type.d.ts

@@ -906,4 +906,9 @@ export interface UITheme {
     ui_143: string;
     ui_144: string;
     ui_cpnt_badge_base_confirm: string;
+    ui_cpnt_message_reaction_base_01: string;
+    ui_cpnt_message_reaction_base_02: string;
+    ui_cpnt_message_reaction_base_03: string;
+    ui_cpnt_message_reaction_base_04: string;
+    ui_cpnt_message_reaction_base_05: string;
 }

package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.d.ts

@@ -1,6 +1,12 @@
 /// <reference types="react" />
 import type { PDSTextType, PDSValueOption } from '../../../common';
 type ColorThemeType = 'grey' | 'brand_primary' | 'translucent_white' | 'translucent_black' | 'transparent';
+type ReactionType = 'heart' | 'like' | 'confetti';
+type ReactionValueOption = {
+    type: ReactionType;
+    count: number;
+};
+type ReactionArrayType = ReactionValueOption[];
 export type ChatBubbleListItemProps = {
     titleText?: PDSTextType;
     imageSrc?: string;
@@ -14,8 +20,13 @@ export type ChatBubbleListItemProps = {
     contextMenuState?: 'normal' | 'disabled';
     children?: React.ReactNode;
     downloadIBtnMode?: 'use' | 'none';
+    reactionBtnMode?: 'use' | 'none';
+    reactionBtnText?: string;
+    reactionArray?: ReactionArrayType;
+    reactionBubblePosition?: 'top' | 'bottom';
     onClickContextMenuItem?: (option: PDSValueOption) => void;
     onClickDownloadIBtn?: () => void;
+    onClickReactionBtn?: (type: ReactionType) => void;
 };
-declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, labelText, contextMenuOptionArray, contextMenuState, children, downloadIBtnMode, onClickContextMenuItem, onClickDownloadIBtn }: ChatBubbleListItemProps): JSX.Element;
+declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, labelText, contextMenuOptionArray, contextMenuState, children, downloadIBtnMode, reactionBtnMode, reactionBtnText, reactionArray, reactionBubblePosition, onClickContextMenuItem, onClickDownloadIBtn, onClickReactionBtn }: ChatBubbleListItemProps): JSX.Element;
 export default ChatBubbleListItem;

package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.js

@@ -50,6 +50,7 @@ var ContextMenuItem_1 = require("../ContextMenuItem");
 var IconButton_1 = require("../IconButton");
 var TextLabel_1 = require("../TextLabel");
 var ChatBubble_1 = __importDefault(require("./ChatBubble"));
+var components_1 = require("./components");
 var Popup_1 = require("./Popup");
 var chatBubbleTailType = {
     other_avatar_impact: 'left_top',
@@ -68,8 +69,8 @@ var profileImageBorderColorTheme = {
     transparent: 'ui_cpnt_list_chatbubble_base_transparent'
 };
 function ChatBubbleListItem(_a) {
-    var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, labelText = _a.labelText, contextMenuOptionArray = _a.contextMenuOptionArray, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, children = _a.children, _f = _a.downloadIBtnMode, downloadIBtnMode = _f === void 0 ? 'none' : _f, onClickContextMenuItem = _a.onClickContextMenuItem, onClickDownloadIBtn = _a.onClickDownloadIBtn;
-    var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
+    var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, labelText = _a.labelText, contextMenuOptionArray = _a.contextMenuOptionArray, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, children = _a.children, _f = _a.downloadIBtnMode, downloadIBtnMode = _f === void 0 ? 'none' : _f, _g = _a.reactionBtnMode, reactionBtnMode = _g === void 0 ? 'none' : _g, _h = _a.reactionBtnText, reactionBtnText = _h === void 0 ? '-' : _h, reactionArray = _a.reactionArray, _j = _a.reactionBubblePosition, reactionBubblePosition = _j === void 0 ? 'bottom' : _j, onClickContextMenuItem = _a.onClickContextMenuItem, onClickDownloadIBtn = _a.onClickDownloadIBtn, onClickReactionBtn = _a.onClickReactionBtn;
+    var _k = (0, react_1.useState)(false), isContextMenuOpen = _k[0], setIsContextMenuOpen = _k[1];
     var contextMenuRef = (0, react_1.useRef)(null);
     var chatBody = document.querySelector('#chatMessageBox');
     var rect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
@@ -135,7 +136,7 @@ function ChatBubbleListItem(_a) {
         }
         setIsContextMenuOpen(false);
     };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ChatBubbleListItem, __assign({ "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", isMe: isMe }, { children: [hasLeftSpacing ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isProfileImageShow ? ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, __assign({ isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }) }))) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })) })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [isTitleTextShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColorTheme }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(S_ChatBubbleBox, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [isMe && ((0, jsx_runtime_1.jsxs)(S_Box, { children: [downloadIBtnMode === 'use' && (0, jsx_runtime_1.jsx)("div", { style: { height: '32px', width: '1px' } }), (0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_list_chatbubble_download_button_base", iconColorKey: "ui_cpnt_button_icon_white", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [labelText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "caption2Bold", colorTheme: "sysTextTertiary" })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }))] }))] })), (0, jsx_runtime_1.jsx)(ChatBubble_1.default, __assign({ colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, { children: children })), !isMe && ((0, jsx_runtime_1.jsxs)(S_Box, { children: [downloadIBtnMode === 'use' && (0, jsx_runtime_1.jsx)("div", { style: { height: '32px', width: '1px' } }), (0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_list_chatbubble_download_button_base", iconColorKey: "ui_cpnt_button_icon_white", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [labelText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "caption2Bold", colorTheme: "sysTextTertiary" })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }))] }))] }))] })), hoverMode === 'use' && !isMe && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_enabled", onClick: handleMoreButtonClick }) })))] })] }), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "top-end", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })] })) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ChatBubbleListItem, __assign({ "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", isMe: isMe }, { children: [hasLeftSpacing ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isProfileImageShow ? ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, __assign({ isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }) }))) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })) })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [isTitleTextShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColorTheme }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(S_ChatBubbleBox, __assign({ isMe: isMe }, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [(0, jsx_runtime_1.jsxs)(S_BubbleWrapper, { children: [isMe && ((0, jsx_runtime_1.jsxs)(S_Box, { children: [downloadIBtnMode === 'use' && (0, jsx_runtime_1.jsx)("div", { style: { height: '32px', width: '1px' } }), (0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_list_chatbubble_download_button_base", iconColorKey: "ui_cpnt_button_icon_white", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [labelText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "caption2Bold", colorTheme: "sysTextTertiary" })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }))] }))] })), (0, jsx_runtime_1.jsx)(ChatBubble_1.default, __assign({ colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, { children: children })), !isMe && ((0, jsx_runtime_1.jsxs)(S_Box, { children: [downloadIBtnMode === 'use' && (0, jsx_runtime_1.jsx)("div", { style: { height: '32px', width: '1px' } }), (0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_list_chatbubble_download_button_base", iconColorKey: "ui_cpnt_button_icon_white", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [labelText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "caption2Bold", colorTheme: "sysTextTertiary" })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }))] }))] }))] }), (0, jsx_runtime_1.jsx)(components_1.ReactionRow, { isMe: isMe, downloadIBtnMode: downloadIBtnMode, reactionBtnMode: reactionBtnMode, reactionArray: reactionArray, reactionBtnText: reactionBtnText, reactionBubblePosition: reactionBubblePosition, onClickReactionBtn: onClickReactionBtn })] })), hoverMode === 'use' && !isMe && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_enabled", onClick: handleMoreButtonClick }) })))] }))] }), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "top-end", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })] })) }));
 }
 var MyChatBubbleListItem = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -169,12 +170,15 @@ var S_DownloadIconWrapper = styled_components_1.default.div(templateObject_7 ||
     return isMe && theme.spacing.spacingB;
 });
 var S_Box = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n"])));
-var S_ChatBubbleBox = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  justify-content: space-between;\n"])));
-var MyChatBubble = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  justify-content: flex-end;\n"], ["\n  justify-content: flex-end;\n"])));
-var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n\n  ", ";\n"], ["\n  display: flex;\n  flex: 1;\n\n  ", ";\n"])), function (_a) {
+var S_ChatBubbleBox = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n"])), function (_a) {
     var isMe = _a.isMe;
     return isMe && MyChatBubble;
 });
+var MyChatBubble = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  justify-content: flex-end;\n"], ["\n  justify-content: flex-end;\n"])));
+var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  align-items: ", ";\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  max-width: fit-content;\n"], ["\n  align-items: ", ";\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  max-width: fit-content;\n"])), function (_a) {
+    var isMe = _a.isMe;
+    return isMe && 'flex-end';
+});
 var S_TimeWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-items: ", ";\n  align-self: ", ";\n  display: flex;\n  flex-direction: column;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  align-items: ", ";\n  align-self: ", ";\n  display: flex;\n  flex-direction: column;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
     var isMe = _a.isMe;
     return isMe && 'flex-end';
@@ -201,5 +205,6 @@ var S_SeeMoreButton = styled_components_1.default.div(templateObject_13 || (temp
     var hoverMode = _a.hoverMode;
     return hoverMode === 'use' && '1';
 });
+var S_BubbleWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 exports.default = ChatBubbleListItem;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;

package/dist/src/desktop/components/ChatBubbleListItem/components/ReactionBubble.d.ts

@@ -0,0 +1,11 @@
+import type { BubblePositionType } from '../../../../common/types/systemUI';
+import type { ReactNode } from 'react';
+type ContextBubbleSheetProps = {
+    pointingPosition: BubblePositionType;
+    children: ReactNode;
+};
+/**
+ * @description ChatBubbleListItem에서의 사용 용례와 비슷한 사용 방식이 발생 한 경우, 별도의 PDS로 분리할 예정입니다.
+ */
+declare const ReactionBubble: ({ pointingPosition, children }: ContextBubbleSheetProps) => JSX.Element;
+export default ReactionBubble;

package/dist/src/desktop/components/ChatBubbleListItem/components/ReactionBubble.js

@@ -0,0 +1,86 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importStar(require("styled-components"));
+/**
+ * @description ChatBubbleListItem에서의 사용 용례와 비슷한 사용 방식이 발생 한 경우, 별도의 PDS로 분리할 예정입니다.
+ */
+var ReactionBubble = function (_a) {
+    var _b = _a.pointingPosition, pointingPosition = _b === void 0 ? 'start_bottom' : _b, children = _a.children;
+    var theme = (0, styled_components_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)(S_ContextBubbleArea, __assign({ "$position": pointingPosition }, { children: (0, jsx_runtime_1.jsxs)(S_ContextBubbleWrapper, __assign({ "$position": pointingPosition }, { children: [children, (0, jsx_runtime_1.jsxs)(Arrow, __assign({ "$position": pointingPosition, viewBox: "0 0 18 10", xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.jsx)("polygon", { points: "9,10 3,0 15,0", fill: theme.ui_cpnt_sheet_base_01 }), (0, jsx_runtime_1.jsx)("path", { d: "M3,1 L9,10", stroke: theme.ui_cpnt_sheet_border_01, strokeWidth: "1", strokeLinecap: "butt" }), (0, jsx_runtime_1.jsx)("path", { d: "M15,1 L9,10", stroke: theme.ui_cpnt_sheet_border_01, strokeWidth: "1", strokeLinecap: "butt" }), (0, jsx_runtime_1.jsx)("path", { d: "M0,0 L15,0", strokeWidth: "1" })] }))] })) })));
+};
+exports.default = ReactionBubble;
+var S_ContextBubbleArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  ", "\n  position: relative;\n"], ["\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  ", "\n  position: relative;\n"])), function (_a) {
+    var $position = _a.$position, theme = _a.theme;
+    var isTop = $position.includes('top');
+    return !isTop
+        ? "margin-bottom: ".concat(theme.spacing.spacingB, ";")
+        : "margin-top: ".concat(theme.spacing.spacingB, ";");
+});
+var S_ContextBubbleWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: ", ";\n  border-radius: 12px;\n  display: flex;\n  padding: ", ";\n  position: relative;\n  width: 'fit-content';\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: ", ";\n  border-radius: 12px;\n  display: flex;\n  padding: ", ";\n  position: relative;\n  width: 'fit-content';\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_sheet_base_01;
+}, function (_a) {
+    var theme = _a.theme;
+    return "1px solid ".concat(theme.ui_cpnt_sheet_border_01);
+}, function (_a) {
+    var theme = _a.theme;
+    return "".concat(theme.spacing.spacingB, " ").concat(theme.spacing.spacingC);
+});
+var Arrow = styled_components_1.default.svg(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 12.6px;\n  position: absolute;\n  width: 15px;\n\n  ", "\n\n  ", "\n"], ["\n  height: 12.6px;\n  position: absolute;\n  width: 15px;\n\n  ", "\n\n  ", "\n"])), function (_a) {
+    var $position = _a.$position;
+    var isTop = $position.includes('top');
+    if (isTop) {
+        return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        top: -10px;\n        transform: translateX(-50%) rotate(180deg);\n      "], ["\n        top: -10px;\n        transform: translateX(-50%) rotate(180deg);\n      "])));
+    }
+    return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      bottom: -10px;\n      transform: translateX(-50%);\n    "], ["\n      bottom: -10px;\n      transform: translateX(-50%);\n    "])));
+}, function (_a) {
+    var $position = _a.$position;
+    if ($position.includes('center')) {
+        return "left: 50%;";
+    }
+    if ($position.includes('end')) {
+        return "right: 12px;";
+    }
+    return "left: 19.5px;";
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;