pds-dev-kit-web 2.2.256 → 2.2.257

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/dist/src/common/services/i18n/resources/en.json +1 -2
  2. package/dist/src/common/services/i18n/resources/es.json +1 -2
  3. package/dist/src/common/services/i18n/resources/fil.json +1 -2
  4. package/dist/src/common/services/i18n/resources/index.d.ts +0 -7
  5. package/dist/src/common/services/i18n/resources/ja.json +1 -2
  6. package/dist/src/common/services/i18n/resources/ko.json +1 -2
  7. package/dist/src/common/services/i18n/resources/zh-cn.json +1 -2
  8. package/dist/src/common/services/i18n/resources/zh-tw.json +1 -2
  9. package/dist/src/common/styles/colorSet/UIColor.json +1 -6
  10. package/dist/src/common/styles/colorSet/index.d.ts +126 -131
  11. package/dist/src/common/styles/colorSet/index.js +2 -2
  12. package/dist/src/common/styles/colorSet/ui-type.d.ts +0 -5
  13. package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.d.ts +1 -12
  14. package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.js +7 -12
  15. package/dist/src/desktop/panels/DesktopBasicModal/DesktopBasicModal.d.ts +1 -1
  16. package/dist/src/desktop/panels/DesktopBasicModal/DesktopBasicModal.js +16 -10
  17. package/dist/src/hybrid/components/LottieIcon/LottieIcon.js +1 -1
  18. package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.d.ts +1 -12
  19. package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.js +7 -12
  20. package/package.json +1 -1
  21. package/release-note.md +2 -3
  22. package/dist/src/desktop/components/ChatBubbleListItem/components/ReactionBubble.d.ts +0 -11
  23. package/dist/src/desktop/components/ChatBubbleListItem/components/ReactionBubble.js +0 -86
  24. package/dist/src/desktop/components/ChatBubbleListItem/components/ReactionRow.d.ts +0 -18
  25. package/dist/src/desktop/components/ChatBubbleListItem/components/ReactionRow.js +0 -133
  26. package/dist/src/desktop/components/ChatBubbleListItem/components/index.d.ts +0 -1
  27. package/dist/src/desktop/components/ChatBubbleListItem/components/index.js +0 -8
  28. package/dist/src/mobile/components/ChatBubbleListItem/components/ReactionBubble.d.ts +0 -11
  29. package/dist/src/mobile/components/ChatBubbleListItem/components/ReactionBubble.js +0 -86
  30. package/dist/src/mobile/components/ChatBubbleListItem/components/ReactionRow.d.ts +0 -18
  31. package/dist/src/mobile/components/ChatBubbleListItem/components/ReactionRow.js +0 -126
  32. package/dist/src/mobile/components/ChatBubbleListItem/components/index.d.ts +0 -1
  33. package/dist/src/mobile/components/ChatBubbleListItem/components/index.js +0 -8
@@ -1,12 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import type { PDSTextType, PDSValueOption } from '../../../common';
3
3
  type ColorThemeType = 'grey' | 'brand_primary' | 'translucent_white' | 'translucent_black' | 'transparent';
4
- type ReactionType = 'heart' | 'like' | 'confetti';
5
- type ReactionValueOption = {
6
- type: ReactionType;
7
- count: number;
8
- };
9
- type ReactionArrayType = ReactionValueOption[];
10
4
  export type ChatBubbleListItemProps = {
11
5
  titleText?: PDSTextType;
12
6
  imageSrc?: string;
@@ -20,13 +14,8 @@ export type ChatBubbleListItemProps = {
20
14
  contextMenuState?: 'normal' | 'disabled';
21
15
  children?: React.ReactNode;
22
16
  downloadIBtnMode?: 'use' | 'none';
23
- reactionBtnMode?: 'use' | 'none';
24
- reactionBtnText?: string;
25
- reactionArray?: ReactionArrayType;
26
- reactionBubblePosition?: 'top' | 'bottom';
27
17
  onClickContextMenuItem?: (option: PDSValueOption) => void;
28
18
  onClickDownloadIBtn?: () => void;
29
- onClickReactionBtn?: (type: ReactionType) => void;
30
19
  };
31
- 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;
20
+ declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, labelText, contextMenuOptionArray, contextMenuState, children, downloadIBtnMode, onClickContextMenuItem, onClickDownloadIBtn }: ChatBubbleListItemProps): JSX.Element;
32
21
  export default ChatBubbleListItem;
@@ -50,7 +50,6 @@ var ContextMenuItem_1 = require("../ContextMenuItem");
50
50
  var IconButton_1 = require("../IconButton");
51
51
  var TextLabel_1 = require("../TextLabel");
52
52
  var ChatBubble_1 = __importDefault(require("./ChatBubble"));
53
- var components_1 = require("./components");
54
53
  var Popup_1 = require("./Popup");
55
54
  var chatBubbleTailType = {
56
55
  other_avatar_impact: 'left_top',
@@ -69,8 +68,8 @@ var profileImageBorderColorTheme = {
69
68
  transparent: 'ui_cpnt_list_chatbubble_base_transparent'
70
69
  };
71
70
  function ChatBubbleListItem(_a) {
72
- 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;
73
- var _k = (0, react_1.useState)(false), isContextMenuOpen = _k[0], setIsContextMenuOpen = _k[1];
71
+ 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;
72
+ var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
74
73
  var contextMenuRef = (0, react_1.useRef)(null);
75
74
  var chatBody = document.querySelector('#chatMessageBox');
76
75
  var rect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
@@ -138,7 +137,7 @@ function ChatBubbleListItem(_a) {
138
137
  }
139
138
  setIsContextMenuOpen(false);
140
139
  };
141
- 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": "mobile", 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, reactionBtnText: reactionBtnText, reactionArray: reactionArray, 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)); }) }) })) })] })) }));
140
+ 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": "mobile", 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)); }) }) })) })] })) }));
142
141
  }
143
142
  var MyChatBubbleListItem = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-right: ", ";\n"], ["\n margin-right: ", ";\n"])), function (_a) {
144
143
  var theme = _a.theme;
@@ -172,14 +171,11 @@ var S_DownloadIconWrapper = styled_components_1.default.div(templateObject_7 ||
172
171
  return isMe && theme.spacing.spacingB;
173
172
  });
174
173
  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"])));
175
- 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) {
176
- var isMe = _a.isMe;
177
- return isMe && MyChatBubble;
178
- });
174
+ 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"])));
179
175
  var MyChatBubble = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n justify-content: flex-end;\n"], ["\n justify-content: flex-end;\n"])));
180
- 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) {
176
+ 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) {
181
177
  var isMe = _a.isMe;
182
- return isMe && 'flex-end';
178
+ return isMe && MyChatBubble;
183
179
  });
184
180
  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) {
185
181
  var isMe = _a.isMe;
@@ -207,6 +203,5 @@ var S_SeeMoreButton = styled_components_1.default.div(templateObject_13 || (temp
207
203
  var hoverMode = _a.hoverMode;
208
204
  return hoverMode === 'use' && '1';
209
205
  });
210
- var S_BubbleWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
211
206
  exports.default = ChatBubbleListItem;
212
- 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;
207
+ 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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "2.2.256",
3
+ "version": "2.2.257",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,8 +1,7 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v2.2.256]
2
+ ## [v2.2.257]
3
3
  ## daily|https://design.storybook.publ.biz/
4
4
 
5
5
  ### 업데이트 사항
6
6
 
7
- * [PDS-1371] ChatBubbleListItem리액션 관련 사항 추가
8
- * [PDS-1377] EditApplyTextField에서 텍스트 입력 영역 우측에 간격이 없는 현상
7
+ * [PDS-1333] DesktopBasicModalxlarge와 rxlarge 사이즈 추가
@@ -1,11 +0,0 @@
1
- import type { BubblePositionType } from '../../../../common/types/systemUI';
2
- import type { ReactNode } from 'react';
3
- type ContextBubbleSheetProps = {
4
- pointingPosition: BubblePositionType;
5
- children: ReactNode;
6
- };
7
- /**
8
- * @description ChatBubbleListItem에서의 사용 용례와 비슷한 사용 방식이 발생 한 경우, 별도의 PDS로 분리할 예정입니다.
9
- */
10
- declare const ReactionBubble: ({ pointingPosition, children }: ContextBubbleSheetProps) => JSX.Element;
11
- export default ReactionBubble;
@@ -1,86 +0,0 @@
1
- "use strict";
2
- var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
- if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
- return cooked;
5
- };
6
- var __assign = (this && this.__assign) || function () {
7
- __assign = Object.assign || function(t) {
8
- for (var s, i = 1, n = arguments.length; i < n; i++) {
9
- s = arguments[i];
10
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
11
- t[p] = s[p];
12
- }
13
- return t;
14
- };
15
- return __assign.apply(this, arguments);
16
- };
17
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
18
- if (k2 === undefined) k2 = k;
19
- var desc = Object.getOwnPropertyDescriptor(m, k);
20
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
21
- desc = { enumerable: true, get: function() { return m[k]; } };
22
- }
23
- Object.defineProperty(o, k2, desc);
24
- }) : (function(o, m, k, k2) {
25
- if (k2 === undefined) k2 = k;
26
- o[k2] = m[k];
27
- }));
28
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
29
- Object.defineProperty(o, "default", { enumerable: true, value: v });
30
- }) : function(o, v) {
31
- o["default"] = v;
32
- });
33
- var __importStar = (this && this.__importStar) || function (mod) {
34
- if (mod && mod.__esModule) return mod;
35
- var result = {};
36
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
37
- __setModuleDefault(result, mod);
38
- return result;
39
- };
40
- Object.defineProperty(exports, "__esModule", { value: true });
41
- var jsx_runtime_1 = require("react/jsx-runtime");
42
- var styled_components_1 = __importStar(require("styled-components"));
43
- /**
44
- * @description ChatBubbleListItem에서의 사용 용례와 비슷한 사용 방식이 발생 한 경우, 별도의 PDS로 분리할 예정입니다.
45
- */
46
- var ReactionBubble = function (_a) {
47
- var _b = _a.pointingPosition, pointingPosition = _b === void 0 ? 'start_bottom' : _b, children = _a.children;
48
- var theme = (0, styled_components_1.useTheme)();
49
- 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" })] }))] })) })));
50
- };
51
- exports.default = ReactionBubble;
52
- 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) {
53
- var $position = _a.$position, theme = _a.theme;
54
- var isTop = $position.includes('top');
55
- return !isTop
56
- ? "margin-bottom: ".concat(theme.spacing.spacingB, ";")
57
- : "margin-top: ".concat(theme.spacing.spacingB, ";");
58
- });
59
- 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) {
60
- var theme = _a.theme;
61
- return theme.ui_cpnt_sheet_base_01;
62
- }, function (_a) {
63
- var theme = _a.theme;
64
- return "1px solid ".concat(theme.ui_cpnt_sheet_border_01);
65
- }, function (_a) {
66
- var theme = _a.theme;
67
- return "".concat(theme.spacing.spacingB, " ").concat(theme.spacing.spacingC);
68
- });
69
- 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) {
70
- var $position = _a.$position;
71
- var isTop = $position.includes('top');
72
- if (isTop) {
73
- 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 "])));
74
- }
75
- 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 "])));
76
- }, function (_a) {
77
- var $position = _a.$position;
78
- if ($position.includes('center')) {
79
- return "left: 50%;";
80
- }
81
- if ($position.includes('end')) {
82
- return "right: 12px;";
83
- }
84
- return "left: 19.5px;";
85
- });
86
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
@@ -1,18 +0,0 @@
1
- /// <reference types="react" />
2
- type ReactionType = 'heart' | 'like' | 'confetti';
3
- type ReactionValueOption = {
4
- type: ReactionType;
5
- count: number;
6
- };
7
- type ReactionArrayType = ReactionValueOption[];
8
- type Props = {
9
- isMe: boolean;
10
- downloadIBtnMode: 'use' | 'none';
11
- reactionBtnMode: 'use' | 'none';
12
- reactionBtnText: string;
13
- reactionArray?: ReactionArrayType;
14
- reactionBubblePosition: 'top' | 'bottom';
15
- onClickReactionBtn?: (type: ReactionType) => void;
16
- };
17
- declare function ReactionRow({ isMe, reactionBtnMode, downloadIBtnMode, reactionBtnText, reactionArray, reactionBubblePosition, onClickReactionBtn }: Props): JSX.Element;
18
- export default ReactionRow;
@@ -1,133 +0,0 @@
1
- "use strict";
2
- var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
- if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
- return cooked;
5
- };
6
- var __assign = (this && this.__assign) || function () {
7
- __assign = Object.assign || function(t) {
8
- for (var s, i = 1, n = arguments.length; i < n; i++) {
9
- s = arguments[i];
10
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
11
- t[p] = s[p];
12
- }
13
- return t;
14
- };
15
- return __assign.apply(this, arguments);
16
- };
17
- var __importDefault = (this && this.__importDefault) || function (mod) {
18
- return (mod && mod.__esModule) ? mod : { "default": mod };
19
- };
20
- Object.defineProperty(exports, "__esModule", { value: true });
21
- var jsx_runtime_1 = require("react/jsx-runtime");
22
- var react_1 = require("react");
23
- var TextLabel_1 = require("../../../components/TextLabel");
24
- var components_1 = require("../../../../hybrid/components");
25
- var styled_components_1 = __importDefault(require("styled-components"));
26
- var ReactionBubble_1 = __importDefault(require("./ReactionBubble"));
27
- function ReactionRow(_a) {
28
- var isMe = _a.isMe, reactionBtnMode = _a.reactionBtnMode, downloadIBtnMode = _a.downloadIBtnMode, reactionBtnText = _a.reactionBtnText, reactionArray = _a.reactionArray, reactionBubblePosition = _a.reactionBubblePosition, onClickReactionBtn = _a.onClickReactionBtn;
29
- var _b = (0, react_1.useState)(false), isOpenReactionBubble = _b[0], setIsOpenReactionBubble = _b[1];
30
- var bubbleRef = (0, react_1.useRef)(null);
31
- var buttonRef = (0, react_1.useRef)(null);
32
- /**
33
- * @when 컴포넌트 렌더링 시
34
- * @expected ReactionBubble의 외부를 클릭하면 ReactionBubble가 닫히도록 클릭 이벤트를 등록합니다.
35
- * @clear document의 클릭 이벤트를 제거합니다.
36
- */
37
- (0, react_1.useEffect)(function () {
38
- function handleClickOutside(event) {
39
- var _a, _b;
40
- event.stopPropagation();
41
- if (event.target instanceof Node &&
42
- (((_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) || ((_b = bubbleRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target))))
43
- return;
44
- if (isOpenReactionBubble) {
45
- setIsOpenReactionBubble(false);
46
- }
47
- }
48
- document.addEventListener('mousedown', handleClickOutside);
49
- return function () {
50
- document.removeEventListener('mousedown', handleClickOutside);
51
- };
52
- }, [isOpenReactionBubble]);
53
- var defaultReactions = [
54
- { iconName: 'ic_lottie_heart', type: 'heart' },
55
- { iconName: 'ic_lottie_thumb_up', type: 'like' },
56
- { iconName: 'ic_lottie_confetti', type: 'confetti' }
57
- ];
58
- var handleOpenReactionBubble = function () {
59
- if (!isOpenReactionBubble) {
60
- setIsOpenReactionBubble(true);
61
- return;
62
- }
63
- if (isOpenReactionBubble) {
64
- setIsOpenReactionBubble(false);
65
- return;
66
- }
67
- };
68
- return ((0, jsx_runtime_1.jsxs)(S_Wrapper, { children: [(0, jsx_runtime_1.jsxs)(S_ReactionWrapper, __assign({ isMe: isMe, downloadIBtnMode: downloadIBtnMode === 'use' }, { children: [(0, jsx_runtime_1.jsx)(S_ButtonWrapper, __assign({ ref: buttonRef }, { children: !isMe && reactionBtnMode === 'use' && ((0, jsx_runtime_1.jsxs)(S_ReactionButton, __assign({ onClick: handleOpenReactionBubble }, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_plus_circle", size: 12 }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: reactionBtnText, singleLineMode: "use", styleTheme: "caption2Bold" })] }))) })), reactionArray && ((0, jsx_runtime_1.jsx)(S_ReactionBadgeWrapper, { children: reactionArray.map(function (reaction, index) {
69
- var iconName = function () {
70
- switch (reaction.type) {
71
- case 'heart':
72
- return 'ic_lottie_heart';
73
- case 'like':
74
- return 'ic_lottie_thumb_up';
75
- case 'confetti':
76
- return 'ic_lottie_confetti';
77
- }
78
- };
79
- return ((0, jsx_runtime_1.jsx)(S_ReactionBadge, __assign({ type: reaction.type }, { children: (0, jsx_runtime_1.jsx)(components_1.LottieIcon, { iconName: iconName(), size: 16, autoplayMode: "none", loopMode: "none" }) }), index));
80
- }) }))] })), (0, jsx_runtime_1.jsx)(S_ReactionBubbleWrapper, __assign({ ref: bubbleRef, reactionBubblePosition: reactionBubblePosition }, { children: isOpenReactionBubble && ((0, jsx_runtime_1.jsx)(ReactionBubble_1.default, __assign({ pointingPosition: reactionBubblePosition === 'bottom' ? 'start_top' : 'start_bottom' }, { children: (0, jsx_runtime_1.jsx)(S_ReactionBadgeWrapper, { children: defaultReactions.map(function (reaction, index) { return ((0, jsx_runtime_1.jsx)(S_ReactionBadge, __assign({ type: reaction.type, isButton: true, onClick: function () {
81
- onClickReactionBtn && onClickReactionBtn(reaction.type);
82
- setIsOpenReactionBubble(false);
83
- } }, { children: (0, jsx_runtime_1.jsx)(components_1.LottieIcon, { iconName: reaction.iconName, size: 16, autoplayMode: "none", loopMode: "none" }) }), index)); }) }) }))) }))] }));
84
- }
85
- exports.default = ReactionRow;
86
- var S_Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n gap: ", ";\n position: relative;\n"], ["\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n gap: ", ";\n position: relative;\n"])), function (_a) {
87
- var theme = _a.theme;
88
- return theme.spacing.spacingA;
89
- });
90
- var S_ReactionWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n gap: ", ";\n justify-content: space-between;\n max-width: -webkit-fill-available;\n padding-right: ", ";\n padding-top: ", ";\n width: 100%;\n"], ["\n display: flex;\n gap: ", ";\n justify-content: space-between;\n max-width: -webkit-fill-available;\n padding-right: ", ";\n padding-top: ", ";\n width: 100%;\n"])), function (_a) {
91
- var theme = _a.theme;
92
- return theme.spacing.spacingB;
93
- }, function (_a) {
94
- var isMe = _a.isMe, downloadIBtnMode = _a.downloadIBtnMode;
95
- return !isMe && (downloadIBtnMode ? '40px' : '34px');
96
- }, function (_a) {
97
- var theme = _a.theme;
98
- return theme.spacing.spacingA;
99
- });
100
- var S_ButtonWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
101
- var S_ReactionButton = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: 8px;\n box-sizing: border-box;\n cursor: pointer;\n display: flex;\n gap: ", ";\n height: 24px;\n justify-content: center;\n max-width: fit-content;\n padding: 0 ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: 8px;\n box-sizing: border-box;\n cursor: pointer;\n display: flex;\n gap: ", ";\n height: 24px;\n justify-content: center;\n max-width: fit-content;\n padding: 0 ", ";\n"])), function (_a) {
102
- var theme = _a.theme;
103
- return theme.ui_cpnt_sheet_base_02;
104
- }, function (_a) {
105
- var theme = _a.theme;
106
- return theme.spacing.spacingA;
107
- }, function (_a) {
108
- var theme = _a.theme;
109
- return theme.spacing.spacingB;
110
- });
111
- var S_ReactionBadgeWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n gap: ", ";\n"], ["\n display: flex;\n gap: ", ";\n"])), function (_a) {
112
- var theme = _a.theme;
113
- return theme.spacing.spacingA;
114
- });
115
- var S_ReactionBadge = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: 100%;\n cursor: ", ";\n display: flex;\n height: 24px;\n justify-content: center;\n width: 24px;\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: 100%;\n cursor: ", ";\n display: flex;\n height: 24px;\n justify-content: center;\n width: 24px;\n"])), function (_a) {
116
- var theme = _a.theme, type = _a.type;
117
- switch (type) {
118
- case 'heart':
119
- return theme.ui_cpnt_message_reaction_base_01;
120
- case 'like':
121
- return theme.ui_cpnt_message_reaction_base_02;
122
- case 'confetti':
123
- return theme.ui_cpnt_message_reaction_base_03;
124
- }
125
- }, function (_a) {
126
- var isButton = _a.isButton;
127
- return isButton && 'pointer';
128
- });
129
- var S_ReactionBubbleWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n left: 0;\n position: absolute;\n ", "\n z-index: 10;\n"], ["\n left: 0;\n position: absolute;\n ", "\n z-index: 10;\n"])), function (_a) {
130
- var reactionBubblePosition = _a.reactionBubblePosition;
131
- return reactionBubblePosition === 'bottom' ? 'top: 28px;' : 'bottom: 24px;';
132
- });
133
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
@@ -1 +0,0 @@
1
- export { default as ReactionRow } from './ReactionRow';
@@ -1,8 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.ReactionRow = void 0;
7
- var ReactionRow_1 = require("./ReactionRow");
8
- Object.defineProperty(exports, "ReactionRow", { enumerable: true, get: function () { return __importDefault(ReactionRow_1).default; } });
@@ -1,11 +0,0 @@
1
- import type { BubblePositionType } from '../../../../common/types/systemUI';
2
- import type { ReactNode } from 'react';
3
- type ContextBubbleSheetProps = {
4
- pointingPosition: BubblePositionType;
5
- children: ReactNode;
6
- };
7
- /**
8
- * @description ChatBubbleListItem에서의 사용 용례와 비슷한 사용 방식이 발생 한 경우, 별도의 PDS로 분리할 예정입니다.
9
- */
10
- declare const ReactionBubble: ({ pointingPosition, children }: ContextBubbleSheetProps) => JSX.Element;
11
- export default ReactionBubble;
@@ -1,86 +0,0 @@
1
- "use strict";
2
- var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
- if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
- return cooked;
5
- };
6
- var __assign = (this && this.__assign) || function () {
7
- __assign = Object.assign || function(t) {
8
- for (var s, i = 1, n = arguments.length; i < n; i++) {
9
- s = arguments[i];
10
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
11
- t[p] = s[p];
12
- }
13
- return t;
14
- };
15
- return __assign.apply(this, arguments);
16
- };
17
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
18
- if (k2 === undefined) k2 = k;
19
- var desc = Object.getOwnPropertyDescriptor(m, k);
20
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
21
- desc = { enumerable: true, get: function() { return m[k]; } };
22
- }
23
- Object.defineProperty(o, k2, desc);
24
- }) : (function(o, m, k, k2) {
25
- if (k2 === undefined) k2 = k;
26
- o[k2] = m[k];
27
- }));
28
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
29
- Object.defineProperty(o, "default", { enumerable: true, value: v });
30
- }) : function(o, v) {
31
- o["default"] = v;
32
- });
33
- var __importStar = (this && this.__importStar) || function (mod) {
34
- if (mod && mod.__esModule) return mod;
35
- var result = {};
36
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
37
- __setModuleDefault(result, mod);
38
- return result;
39
- };
40
- Object.defineProperty(exports, "__esModule", { value: true });
41
- var jsx_runtime_1 = require("react/jsx-runtime");
42
- var styled_components_1 = __importStar(require("styled-components"));
43
- /**
44
- * @description ChatBubbleListItem에서의 사용 용례와 비슷한 사용 방식이 발생 한 경우, 별도의 PDS로 분리할 예정입니다.
45
- */
46
- var ReactionBubble = function (_a) {
47
- var _b = _a.pointingPosition, pointingPosition = _b === void 0 ? 'start_bottom' : _b, children = _a.children;
48
- var theme = (0, styled_components_1.useTheme)();
49
- 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" })] }))] })) })));
50
- };
51
- exports.default = ReactionBubble;
52
- 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) {
53
- var $position = _a.$position, theme = _a.theme;
54
- var isTop = $position.includes('top');
55
- return !isTop
56
- ? "margin-bottom: ".concat(theme.spacing.spacingB, ";")
57
- : "margin-top: ".concat(theme.spacing.spacingB, ";");
58
- });
59
- 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) {
60
- var theme = _a.theme;
61
- return theme.ui_cpnt_sheet_base_01;
62
- }, function (_a) {
63
- var theme = _a.theme;
64
- return "1px solid ".concat(theme.ui_cpnt_sheet_border_01);
65
- }, function (_a) {
66
- var theme = _a.theme;
67
- return "".concat(theme.spacing.spacingB, " ").concat(theme.spacing.spacingC);
68
- });
69
- 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) {
70
- var $position = _a.$position;
71
- var isTop = $position.includes('top');
72
- if (isTop) {
73
- 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 "])));
74
- }
75
- 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 "])));
76
- }, function (_a) {
77
- var $position = _a.$position;
78
- if ($position.includes('center')) {
79
- return "left: 50%;";
80
- }
81
- if ($position.includes('end')) {
82
- return "right: 12px;";
83
- }
84
- return "left: 19.5px;";
85
- });
86
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
@@ -1,18 +0,0 @@
1
- /// <reference types="react" />
2
- type ReactionType = 'heart' | 'like' | 'confetti';
3
- type ReactionValueOption = {
4
- type: ReactionType;
5
- count: number;
6
- };
7
- type ReactionArrayType = ReactionValueOption[];
8
- type Props = {
9
- isMe: boolean;
10
- downloadIBtnMode: 'use' | 'none';
11
- reactionBtnMode: 'use' | 'none';
12
- reactionBtnText: string;
13
- reactionArray?: ReactionArrayType;
14
- reactionBubblePosition: 'top' | 'bottom';
15
- onClickReactionBtn?: (type: ReactionType) => void;
16
- };
17
- declare function ReactionRow({ isMe, downloadIBtnMode, reactionBtnMode, reactionBtnText, reactionArray, reactionBubblePosition, onClickReactionBtn }: Props): JSX.Element;
18
- export default ReactionRow;