pds-dev-kit-web 2.2.254 → 2.2.255

package/dist/src/common/hooks/index.d.ts

@@ -1,3 +1,4 @@
 export { default as useAbsolutePositioner } from './useAbsolutePositioner';
 export { default as useDetectOverflow } from './useDetectOverflow';
 export { default as usePrevious } from './usePrevious';
+export { useScrollbarDetector } from './useScrollbarDetector';

package/dist/src/common/hooks/index.js

@@ -3,10 +3,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePrevious = exports.useDetectOverflow = exports.useAbsolutePositioner = void 0;
+exports.useScrollbarDetector = exports.usePrevious = exports.useDetectOverflow = exports.useAbsolutePositioner = void 0;
 var useAbsolutePositioner_1 = require("./useAbsolutePositioner");
 Object.defineProperty(exports, "useAbsolutePositioner", { enumerable: true, get: function () { return __importDefault(useAbsolutePositioner_1).default; } });
 var useDetectOverflow_1 = require("./useDetectOverflow");
 Object.defineProperty(exports, "useDetectOverflow", { enumerable: true, get: function () { return __importDefault(useDetectOverflow_1).default; } });
 var usePrevious_1 = require("./usePrevious");
 Object.defineProperty(exports, "usePrevious", { enumerable: true, get: function () { return __importDefault(usePrevious_1).default; } });
+var useScrollbarDetector_1 = require("./useScrollbarDetector");
+Object.defineProperty(exports, "useScrollbarDetector", { enumerable: true, get: function () { return useScrollbarDetector_1.useScrollbarDetector; } });

package/dist/src/common/hooks/useScrollbarDetector.d.ts

@@ -0,0 +1,9 @@
+import { RefObject } from 'react';
+/**
+ * textarea 요소의 스크롤바 존재 여부를 감지하는 훅
+ * @param ref - textarea 또는 textarea를 포함하는 컨테이너의 ref
+ * @param textLineType - 텍스트 라인 타입 ('multi' | 'auto'일 때만 동작)
+ * @param currentValue - 현재 입력값 (값 변경 시 스크롤바 상태 재확인용)
+ * @returns hasScrollbar - 스크롤바 존재 여부
+ */
+export declare function useScrollbarDetector(ref: RefObject<HTMLElement>, textLineType: 'single' | 'multi' | 'auto', currentValue?: string): boolean;

package/dist/src/common/hooks/useScrollbarDetector.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useScrollbarDetector = void 0;
+var react_1 = require("react");
+/**
+ * textarea 요소의 스크롤바 존재 여부를 감지하는 훅
+ * @param ref - textarea 또는 textarea를 포함하는 컨테이너의 ref
+ * @param textLineType - 텍스트 라인 타입 ('multi' | 'auto'일 때만 동작)
+ * @param currentValue - 현재 입력값 (값 변경 시 스크롤바 상태 재확인용)
+ * @returns hasScrollbar - 스크롤바 존재 여부
+ */
+function useScrollbarDetector(ref, textLineType, currentValue) {
+    var _a = (0, react_1.useState)(false), hasScrollbar = _a[0], setHasScrollbar = _a[1];
+    (0, react_1.useEffect)(function () {
+        if (textLineType === 'single' || !ref.current) {
+            setHasScrollbar(false);
+            return;
+        }
+        var checkScrollbar = function () {
+            if (!ref.current)
+                return;
+            var textarea = ref.current;
+            if (ref.current.tagName !== 'TEXTAREA') {
+                textarea = ref.current.querySelector('textarea');
+            }
+            if (textarea) {
+                var hasVerticalScrollbar = textarea.scrollHeight > textarea.clientHeight;
+                setHasScrollbar(hasVerticalScrollbar);
+            }
+        };
+        var timeoutId = setTimeout(checkScrollbar, 100);
+        var resizeObserver = null;
+        if (window.ResizeObserver && ref.current) {
+            resizeObserver = new ResizeObserver(checkScrollbar);
+            var textarea = ref.current;
+            if (ref.current.tagName !== 'TEXTAREA') {
+                textarea = ref.current.querySelector('textarea');
+            }
+            if (textarea) {
+                resizeObserver.observe(textarea);
+            }
+        }
+        return function () {
+            clearTimeout(timeoutId);
+            if (resizeObserver) {
+                resizeObserver.disconnect();
+            }
+        };
+    }, [ref, textLineType]);
+    (0, react_1.useEffect)(function () {
+        if (textLineType === 'single' || !ref.current) {
+            return;
+        }
+        var timeoutId = setTimeout(function () {
+            if (!ref.current)
+                return;
+            var textarea = ref.current;
+            if (ref.current.tagName !== 'TEXTAREA') {
+                textarea = ref.current.querySelector('textarea');
+            }
+            if (textarea) {
+                var hasVerticalScrollbar = textarea.scrollHeight > textarea.clientHeight;
+                setHasScrollbar(hasVerticalScrollbar);
+            }
+        }, 0);
+        return function () { return clearTimeout(timeoutId); };
+    }, [currentValue, textLineType, ref]);
+    return hasScrollbar;
+}
+exports.useScrollbarDetector = useScrollbarDetector;

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

@@ -102,7 +102,6 @@
         "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_reaction": "Reaction"
+        "str_delete": "Delete"
     }
 }

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

@@ -102,7 +102,6 @@
         "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_reaction": "Reaction"
+        "str_delete": "borrar"
     }
 }

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

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

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

@@ -105,7 +105,6 @@ declare const locale: {
             str_9070: string;
             str_upload: string;
             str_delete: string;
-            str_reaction: string;
         };
     };
     readonly en: {
@@ -213,7 +212,6 @@ declare const locale: {
             str_9070: string;
             str_upload: string;
             str_delete: string;
-            str_reaction: string;
         };
     };
     readonly ja: {
@@ -321,7 +319,6 @@ declare const locale: {
             str_9070: string;
             str_upload: string;
             str_delete: string;
-            str_reaction: string;
         };
     };
     readonly es: {
@@ -429,7 +426,6 @@ declare const locale: {
             str_9070: string;
             str_upload: string;
             str_delete: string;
-            str_reaction: string;
         };
     };
     readonly 'zh-cn': {
@@ -537,7 +533,6 @@ declare const locale: {
             str_9070: string;
             str_upload: string;
             str_delete: string;
-            str_reaction: string;
         };
     };
     readonly 'zh-tw': {
@@ -645,7 +640,6 @@ declare const locale: {
             str_9070: string;
             str_upload: string;
             str_delete: string;
-            str_reaction: string;
         };
     };
     readonly fil: {
@@ -746,7 +740,6 @@ 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,7 +102,6 @@
         "str_9069": "フランス語を入力しないと、メンバーに英語で表示されます。",
         "str_9070": "スペイン語を入力しないと、会員に英語で表示されます。",
         "str_upload": "アップロード",
-        "str_delete": "削除",
-        "str_reaction": "Reaction"
+        "str_delete": "削除"
     }
 }

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

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

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

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

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

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

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

@@ -905,10 +905,5 @@
     "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_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"
+    "ui_cpnt_badge_base_confirm": "sys_component_base_green"
 }

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

@@ -1,129 +1,5 @@
 declare const colorSet: {
-    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;
@@ -506,7 +382,131 @@ declare const colorSet: {
         sys_on_base_hover_01: string;
         sys_on_base_pressed_01: string;
     };
-    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;
@@ -1797,11 +1797,6 @@ 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,9 +906,4 @@ 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,12 +1,6 @@
 /// <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;
@@ -20,13 +14,8 @@ 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, reactionBtnMode, reactionBtnText, reactionArray, reactionBubblePosition, onClickContextMenuItem, onClickDownloadIBtn, onClickReactionBtn }: ChatBubbleListItemProps): JSX.Element;
+declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, labelText, contextMenuOptionArray, contextMenuState, children, downloadIBtnMode, onClickContextMenuItem, onClickDownloadIBtn }: ChatBubbleListItemProps): JSX.Element;
 export default ChatBubbleListItem;

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

@@ -50,7 +50,6 @@ 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',
@@ -69,8 +68,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, _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 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 contextMenuRef = (0, react_1.useRef)(null);
     var chatBody = document.querySelector('#chatMessageBox');
     var rect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
@@ -136,7 +135,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, __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)); }) }) })) })] })) }));
+    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)); }) }) })) })] })) }));
 }
 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;
@@ -170,14 +169,11 @@ 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  ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n"])), function (_a) {
-    var isMe = _a.isMe;
-    return isMe && MyChatBubble;
-});
+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  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 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 isMe = _a.isMe;
-    return isMe && 'flex-end';
+    return isMe && MyChatBubble;
 });
 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;
@@ -205,6 +201,5 @@ 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, templateObject_14;
+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;