pds-dev-kit-web-test 2.3.17 → 2.4.0

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

@@ -1,210 +0,0 @@
-"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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var styled_components_1 = __importStar(require("styled-components"));
-var hybrid_1 = require("../../../hybrid");
-var ContextMenu_1 = require("../ContextMenu");
-var ContextMenuItem_1 = require("../ContextMenuItem");
-var IconButton_1 = require("../IconButton");
-var TextLabel_1 = require("../TextLabel");
-var ChatBubble_1 = __importDefault(require("./ChatBubble"));
-var Popup_1 = require("./Popup");
-var chatBubbleTailType = {
-    other_avatar_impact: 'left_top',
-    other_avatar: 'left_top',
-    other_avatar_sub: 'none',
-    other: 'left_top',
-    other_sub: 'none',
-    me: 'right_top',
-    me_sub: 'none'
-};
-var profileImageBorderColorTheme = {
-    grey: 'ui_avatar_border',
-    brand_primary: 'ui_avatar_border_brandprimary',
-    translucent_white: 'ui_avatar_border_translucent_white',
-    translucent_black: 'ui_avatar_border_translucent_black',
-    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, _e = _a.countMode, countMode = _e === void 0 ? 'none' : _e, countText = _a.countText, contextMenuOptionArray = _a.contextMenuOptionArray, _f = _a.contextMenuState, contextMenuState = _f === void 0 ? 'normal' : _f, children = _a.children, _g = _a.downloadIBtnMode, downloadIBtnMode = _g === void 0 ? 'none' : _g, onClickContextMenuItem = _a.onClickContextMenuItem, onClickDownloadIBtn = _a.onClickDownloadIBtn;
-    var _h = (0, react_1.useState)(false), isContextMenuOpen = _h[0], setIsContextMenuOpen = _h[1];
-    var contextMenuRef = (0, react_1.useRef)(null);
-    var chatBody = document.querySelector('#chatMessageBox');
-    var rect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
-    var isMe = styleTheme.includes('me');
-    var isProfileImageShow = styleTheme === 'other_avatar_impact' || styleTheme === 'other_avatar';
-    var isTitleTextShow = styleTheme === 'other_avatar_impact' || styleTheme === 'other_avatar' || styleTheme === 'other';
-    var hasLeftSpacing = styleTheme === 'other_avatar_impact' ||
-        styleTheme === 'other_avatar' ||
-        styleTheme === 'other_avatar_sub';
-    var titleTextColorTheme = 'sysTextPrimary';
-    var countTextColorTheme = 'sysTextPrimary';
-    switch (colorTheme) {
-        case 'grey': {
-            titleTextColorTheme = 'sysTextPrimary';
-            countTextColorTheme = 'sysTextPrimary';
-            break;
-        }
-        case 'brand_primary': {
-            titleTextColorTheme = 'usrTextBrandPrimary';
-            countTextColorTheme = 'sysTextPrimary';
-            break;
-        }
-        case 'translucent_white': {
-            titleTextColorTheme = 'sysTextBlack';
-            countTextColorTheme = 'sysTextPrimary';
-            break;
-        }
-        case 'translucent_black': {
-            titleTextColorTheme = 'sysTextWhite';
-            countTextColorTheme = 'sysTextPrimary';
-        }
-    }
-    /**
-     * @when contextMenu가 열려 있을 때
-     * @expected ChatList body의 스크롤을 숨기고, contextMenu의 외부를 클릭하면 contextMenu가 닫히도록 합니다.
-     * @clear document의 클릭 이벤트를 제거합니다.
-     */
-    (0, react_1.useEffect)(function () {
-        // NOTE pop up 개념이 생기기 전까지의 임시 조치 방법입니다.
-        if (!chatBody) {
-            return;
-        }
-        chatBody.style.overflowY = isContextMenuOpen ? 'hidden' : 'auto';
-    }, [isContextMenuOpen, chatBody]);
-    /**
-     * @when 스크롤, 휠 이벤트 발생시
-     * @expected contextMenu를 닫습니다.
-     * @clear 스크롤, 휠 이벤트를 제거합니다.
-     */
-    (0, react_1.useEffect)(function () {
-        function handleScrollEvent() {
-            setIsContextMenuOpen(false);
-        }
-        window.addEventListener('scroll', handleScrollEvent);
-        window.addEventListener('wheel', handleScrollEvent);
-        return function () {
-            window.removeEventListener('scroll', handleScrollEvent);
-            window.removeEventListener('wheel', handleScrollEvent);
-        };
-    }, []);
-    var handleMoreButtonClick = function (e) {
-        e.stopPropagation();
-        setIsContextMenuOpen(function (prev) { return !prev; });
-    };
-    var handleContextMenuItemClick = function (option) {
-        if (onClickContextMenuItem) {
-            onClickContextMenuItem(option);
-        }
-        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: [countMode === 'use' && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: countText, styleTheme: "caption2Regular", colorTheme: countTextColorTheme })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (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: [countMode === 'use' && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: countText, styleTheme: "caption2Regular", colorTheme: countTextColorTheme })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (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;
-    return theme.spacing.spacingA;
-});
-var S_ChatBubbleListItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  height: fit-content;\n  max-width: 100%;\n\n  ", ";\n"], ["\n  display: flex;\n  height: fit-content;\n  max-width: 100%;\n\n  ", ";\n"])), function (_a) {
-    var isMe = _a.isMe;
-    return isMe && MyChatBubbleListItem;
-});
-var ImageViewBrandPrimary = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border: 2px solid\n    ", ";\n"], ["\n  border: 2px solid\n    ", ";\n"])), function (_a) {
-    var colorTheme = _a.colorTheme, theme = _a.theme;
-    return colorTheme && theme[profileImageBorderColorTheme[colorTheme]];
-});
-var ImageViewDefault = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border: 1px solid\n    ", ";\n"], ["\n  border: 1px solid\n    ", ";\n"])), function (_a) {
-    var colorTheme = _a.colorTheme, theme = _a.theme;
-    return colorTheme && theme[profileImageBorderColorTheme[colorTheme]];
-});
-var S_ImageViewWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border-radius: 50%;\n  box-sizing: border-box;\n  height: fit-content;\n  margin-right: ", ";\n  min-width: fit-content;\n  position: relative;\n  width: fit-content;\n\n  ", ";\n"], ["\n  border-radius: 50%;\n  box-sizing: border-box;\n  height: fit-content;\n  margin-right: ", ";\n  min-width: fit-content;\n  position: relative;\n  width: fit-content;\n\n  ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingB;
-}, function (_a) {
-    var isOtherAvatarImpact = _a.isOtherAvatarImpact;
-    return (isOtherAvatarImpact ? ImageViewBrandPrimary : ImageViewDefault);
-});
-var S_RightBox = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
-var S_DownloadIconWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-left: ", ";\n  margin-right: ", ";\n"], ["\n  margin-left: ", ";\n  margin-right: ", ";\n"])), function (_a) {
-    var isMe = _a.isMe, theme = _a.theme;
-    return !isMe && theme.spacing.spacingB;
-}, function (_a) {
-    var isMe = _a.isMe, theme = _a.theme;
-    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 isMe = _a.isMe;
-    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;
-    return isMe && 'flex-end';
-}, function (_a) {
-    var isMe = _a.isMe;
-    return isMe && 'flex-end';
-}, function (_a) {
-    var isMe = _a.isMe, theme = _a.theme;
-    return !isMe && theme.spacing.spacingA;
-}, function (_a) {
-    var isMe = _a.isMe, theme = _a.theme;
-    return isMe && theme.spacing.spacingA;
-});
-var S_SeeMoreButton = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  justify-content: right;\n  margin-top: ", ";\n  min-width: 48px;\n  opacity: ", ";\n  padding-right: ", ";\n  position: relative;\n  width: 48px;\n\n  ", ":hover & {\n    opacity: ", ";\n  }\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  justify-content: right;\n  margin-top: ", ";\n  min-width: 48px;\n  opacity: ", ";\n  padding-right: ", ";\n  position: relative;\n  width: 48px;\n\n  ", ":hover & {\n    opacity: ", ";\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingB;
-}, function (_a) {
-    var isContextMenuOpen = _a.isContextMenuOpen;
-    return (isContextMenuOpen ? '1' : '0');
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingB;
-}, S_ChatBubbleListItem, function (_a) {
-    var hoverMode = _a.hoverMode;
-    return hoverMode === 'use' && '1';
-});
-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;

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

@@ -1,229 +0,0 @@
-"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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Popup = exports.PopupProvider = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var react_dom_1 = require("react-dom");
-var styled_components_1 = __importDefault(require("styled-components"));
-var PopupContext = (0, react_1.createContext)({
-    current: null
-});
-function getHAutoPlacement(_a) {
-    var targetRect = _a.targetRect, popupRect = _a.popupRect;
-    var leftSpaced = targetRect.right + popupRect.width > window.innerWidth;
-    var topSpaced = targetRect.bottom + popupRect.height > window.innerHeight;
-    return "".concat(leftSpaced ? 'left' : 'right', "-").concat(topSpaced ? 'end' : 'start');
-}
-function getVAutoPlacement(_a) {
-    var targetRect = _a.targetRect, popupRect = _a.popupRect, wrapperHeight = _a.wrapperHeight;
-    var leftSpaced = targetRect.right + popupRect.width > window.innerWidth;
-    var topSpaced = targetRect.bottom + popupRect.height > (wrapperHeight || window.innerWidth);
-    return "".concat(topSpaced ? 'top' : 'bottom', "-").concat(leftSpaced ? 'end' : 'start');
-}
-function getVCenterPlacement(_a) {
-    var targetRect = _a.targetRect, popupRect = _a.popupRect;
-    var leftSpaced = targetRect.right + popupRect.width > window.innerWidth;
-    return leftSpaced ? 'left-center' : 'right-center';
-}
-function getHCenterPlacement(_a) {
-    var targetRect = _a.targetRect, popupRect = _a.popupRect;
-    var topSpaced = targetRect.bottom + popupRect.height > window.innerHeight;
-    return topSpaced ? 'top-center' : 'bottom-center';
-}
-/**
- * 위치 정규화
- */
-function getNormalizedPlacement(_a) {
-    var placement = _a.placement, targetRect = _a.targetRect, popupRect = _a.popupRect, wrapperHeight = _a.wrapperHeight;
-    switch (placement) {
-        case 'v-auto':
-            return getVAutoPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
-        case 'h-auto':
-            return getHAutoPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
-        case 'v-center':
-            return getVCenterPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
-        case 'h-center':
-            return getHCenterPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
-        default:
-            return placement;
-    }
-}
-function updatePosition(_a) {
-    var targetElem = _a.targetElem, popupElem = _a.popupElem, placement = _a.placement, wrapperHeight = _a.wrapperHeight;
-    var targetRect = targetElem.getBoundingClientRect();
-    var popupRect = popupElem.getBoundingClientRect();
-    var normPlacement = getNormalizedPlacement({ placement: placement, targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
-    switch (normPlacement) {
-        case 'top':
-            popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
-            popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
-            popupElem.style.width = 'auto';
-            break;
-        case 'top-start':
-            popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
-            popupElem.style.left = "".concat(targetRect.left, "px");
-            popupElem.style.width = 'auto';
-            break;
-        case 'top-end':
-            popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
-            popupElem.style.left = "".concat(targetRect.left + targetRect.width - popupRect.width, "px");
-            popupElem.style.width = 'auto';
-            break;
-        case 'top-both':
-            popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
-            popupElem.style.left = "".concat(targetRect.left, "px");
-            popupElem.style.width = "".concat(targetRect.width, "px");
-            break;
-        case 'top-center':
-            popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
-            popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
-            popupElem.style.width = 'auto';
-            break;
-        case 'bottom':
-            popupElem.style.top = "".concat(targetRect.bottom, "px");
-            popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
-            popupElem.style.width = 'auto';
-            break;
-        case 'bottom-start':
-            popupElem.style.top = "".concat(targetRect.bottom, "px");
-            popupElem.style.left = "".concat(targetRect.left, "px");
-            popupElem.style.width = 'auto';
-            break;
-        case 'bottom-end':
-            popupElem.style.top = "".concat(targetRect.bottom, "px");
-            popupElem.style.left = "".concat(targetRect.right - popupRect.width, "px");
-            popupElem.style.width = 'auto';
-            break;
-        case 'bottom-both':
-            popupElem.style.top = "".concat(targetRect.bottom, "px");
-            popupElem.style.left = "".concat(targetRect.left, "px");
-            popupElem.style.width = "".concat(targetRect.width, "px");
-            break;
-        case 'bottom-center':
-            popupElem.style.top = "".concat(targetRect.bottom, "px");
-            popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
-            popupElem.style.width = 'auto';
-            break;
-        case 'left':
-            popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height) / 2, "px");
-            popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
-            popupElem.style.width = 'auto';
-            break;
-        case 'left-start':
-            popupElem.style.top = "".concat(targetRect.top, "px");
-            popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
-            popupElem.style.width = 'auto';
-            break;
-        case 'left-end':
-            popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height), "px");
-            popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
-            popupElem.style.width = 'auto';
-            break;
-        case 'left-center':
-            popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height) / 2, "px");
-            popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
-            popupElem.style.width = 'auto';
-            break;
-        case 'right':
-            popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height) / 2, "px");
-            popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
-            popupElem.style.width = 'auto';
-            break;
-        case 'right-start':
-            popupElem.style.top = "".concat(targetRect.top, "px");
-            popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
-            popupElem.style.width = 'auto';
-            break;
-        case 'right-end':
-            popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height), "px");
-            popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
-            popupElem.style.width = 'auto';
-            break;
-        case 'right-center':
-            popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height) / 2, "px");
-            popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
-            popupElem.style.width = 'auto';
-            break;
-        default:
-            break;
-    }
-    return normPlacement;
-}
-function Popup(_a) {
-    var targetRef = _a.targetRef, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, onClickOutside = _a.onClickOutside, onClick = _a.onClick, _c = _a.placement, placement = _c === void 0 ? 'bottom-start' : _c, wrapperHeight = _a.wrapperHeight, children = _a.children;
-    var popupRootRef = (0, react_1.useContext)(PopupContext);
-    var _d = (0, react_1.useState)('bottom'), normPlacement = _d[0], setNormPlacement = _d[1];
-    var popupRef = (0, react_1.useRef)(null);
-    /**
-     * 팝업 외의 다른 요소 클릭시 팝업이 닫히도록 합니다.
-     */
-    (0, react_1.useEffect)(function () {
-        function handleClickOutside(e) {
-            if (popupRootRef.current && !popupRootRef.current.contains(e.target)) {
-                if (onClickOutside) {
-                    onClickOutside();
-                }
-            }
-        }
-        window.document.addEventListener('mousedown', handleClickOutside);
-        return function () {
-            window.document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [popupRootRef, onClickOutside]);
-    /**
-     * 전체 UI 렌더링이 한 프레임 완료된 후에 팝업 위치를 결정합니다.
-     */
-    (0, react_1.useEffect)(function () {
-        window.requestAnimationFrame(function () {
-            if (!targetRef.current || !popupRef.current) {
-                return;
-            }
-            var targetElem = targetRef.current;
-            var popupElem = popupRef.current;
-            var updatedPlacement = updatePosition({ targetElem: targetElem, popupElem: popupElem, placement: placement, wrapperHeight: wrapperHeight });
-            setNormPlacement(updatedPlacement);
-        });
-    }, [isOpen, placement, wrapperHeight, targetRef, popupRef]);
-    function handlePopupClick(e) {
-        e.stopPropagation();
-        if (onClick) {
-            onClick(e);
-        }
-    }
-    if (!popupRootRef || !popupRootRef.current || !isOpen) {
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-    }
-    var popupComponent = ((0, jsx_runtime_1.jsx)(S_Popup, __assign({ ref: popupRef, onClick: function (e) { return handlePopupClick(e); } }, { children: typeof children === 'function' ? children(normPlacement) : children })));
-    return (0, react_dom_1.createPortal)(popupComponent, popupRootRef.current);
-}
-exports.Popup = Popup;
-var S_Popup = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  left: -1000px;\n  position: fixed;\n  top: -1000px;\n  z-index: 1000;\n"], ["\n  left: -1000px;\n  position: fixed;\n  top: -1000px;\n  z-index: 1000;\n"])));
-/**
- * 팝업 루트 프로바이더
- * 팝업을 사용하기 위해서는 팝업 프로바이더가 상위 컴포넌트로 있어야 합니다.
- */
-function PopupProvider(_a) {
-    var children = _a.children;
-    var ref = (0, react_1.useRef)();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PopupContext.Provider, __assign({ value: ref }, { children: children })), (0, jsx_runtime_1.jsx)("div", { ref: ref })] }));
-}
-exports.PopupProvider = PopupProvider;
-var templateObject_1;

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

@@ -1,8 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChatBubbleListItem = void 0;
-var ChatBubbleListItem_1 = require("./ChatBubbleListItem");
-Object.defineProperty(exports, "ChatBubbleListItem", { enumerable: true, get: function () { return __importDefault(ChatBubbleListItem_1).default; } });

package/dist/src/desktop/components/ChatList/Body.js

@@ -1,120 +0,0 @@
-"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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = __importStar(require("react"));
-var styled_components_1 = __importStar(require("styled-components"));
-var MainButton_1 = require("../MainButton");
-var useAutoScrollToBottom_1 = __importDefault(require("./useAutoScrollToBottom"));
-var Body = react_1.default.forwardRef(function (_a, ref) {
-    var bodyChildren = _a.bodyChildren, scrollVisibleType = _a.scrollVisibleType, children = _a.children, isSubmitted = _a.isSubmitted, bodyMBtnText = _a.bodyMBtnText, bodySpacingMode = _a.bodySpacingMode, callBackAfterScrollToBottom = _a.callBackAfterScrollToBottom;
-    var _b = (0, react_1.useState)(false), isButtonShow = _b[0], setIsButtonShow = _b[1];
-    var _c = (0, useAutoScrollToBottom_1.default)(), triggerScrollToBottom = _c.triggerScrollToBottom, EndOfList = _c.EndOfList;
-    /**
-     * @when 페이지 진입 시
-     * @expected 채팅 리스트의 맨 밑으로 스크롤 내린다.
-     * @clear -
-     */
-    (0, react_1.useEffect)(function () {
-        if (!isButtonShow) {
-            triggerScrollToBottom();
-        }
-    }, [children, isButtonShow, triggerScrollToBottom]);
-    /**
-     * @when 스크롤을 하고 있지 않은 상황에서 chatMessages가 업데이트 될 때마다
-     * @expected 채팅 리스트의 맨 밑으로 스크롤 내린다.
-     * @clear -
-     */
-    (0, react_1.useEffect)(function () {
-        var handleTriggerScroll = function () {
-            if (isSubmitted) {
-                callBackAfterScrollToBottom();
-                triggerScrollToBottom();
-            }
-        };
-        setTimeout(function () { return handleTriggerScroll(); }, 0);
-    }, [children, isButtonShow, isSubmitted, callBackAfterScrollToBottom]);
-    var handleClickMBtn = function () {
-        triggerScrollToBottom();
-    };
-    var handleScroll = function (e) {
-        var _a = e.currentTarget, scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
-        var BUTTON_SHOW_UP_HEIGHT = 64;
-        if (Math.ceil(scrollTop) + clientHeight + BUTTON_SHOW_UP_HEIGHT > scrollHeight) {
-            setIsButtonShow(false);
-            return;
-        }
-        setIsButtonShow(true);
-    };
-    return ((0, jsx_runtime_1.jsxs)(S_Body, __assign({ bodySpacingMode: bodySpacingMode }, { children: [(0, jsx_runtime_1.jsxs)(S_ChatMessageBox, __assign({ id: "chatMessageBox", onScroll: handleScroll, scrollVisibleType: scrollVisibleType, ref: ref }, { children: [children, (0, jsx_runtime_1.jsx)(EndOfList, {})] })), bodyChildren, isButtonShow && ((0, jsx_runtime_1.jsx)(S_BottomButtonWrapper, { children: (0, jsx_runtime_1.jsx)(MainButton_1.MainButton, { text: bodyMBtnText, size: "small", onClick: handleClickMBtn }) }))] })));
-});
-var bodySpacing = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  box-sizing: border-box;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingE;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingE;
-});
-var S_Body = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  position: relative;\n\n  ", ";\n"], ["\n  flex: 1;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  position: relative;\n\n  ", ";\n"])), function (_a) {
-    var bodySpacingMode = _a.bodySpacingMode;
-    return bodySpacingMode === 'use' && bodySpacing;
-});
-var scrollVisibleStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ::-webkit-scrollbar {\n    display: block;\n  }\n"], ["\n  ::-webkit-scrollbar {\n    display: block;\n  }\n"])));
-var scrollHiddenStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n\n  ::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n\n  ::-webkit-scrollbar {\n    display: none;\n  }\n"])));
-var S_ChatMessageBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 100%;\n  overflow-y: auto;\n\n  ", "\n"], ["\n  height: 100%;\n  overflow-y: auto;\n\n  ", "\n"])), function (_a) {
-    var scrollVisibleType = _a.scrollVisibleType;
-    if (!scrollVisibleType || scrollVisibleType === 'moving') {
-        return;
-    }
-    return {
-        visible: scrollVisibleStyle,
-        hidden: scrollHiddenStyle
-    }[scrollVisibleType];
-});
-var S_BottomButtonWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  bottom: ", ";\n  left: 50%;\n  position: absolute;\n  transform: translate(-50%, 0);\n"], ["\n  bottom: ", ";\n  left: 50%;\n  position: absolute;\n  transform: translate(-50%, 0);\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingC;
-});
-exports.default = Body;
-Body.displayName = 'Body';
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;