pds-dev-kit-web-test 2.5.27 → 2.5.29

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 (17) hide show
  1. package/dist/src/desktop/components/BasicChatListItem/BasicChatListItem.d.ts +2 -1
  2. package/dist/src/desktop/components/BasicChatListItem/BasicChatListItem.js +3 -3
  3. package/dist/src/desktop/components/ChatList/ChatList.d.ts +4 -1
  4. package/dist/src/desktop/components/ChatList/ChatList.js +3 -3
  5. package/dist/src/desktop/components/ChatList/Header.d.ts +2 -2
  6. package/dist/src/desktop/components/ChatList/Header.js +5 -2
  7. package/dist/src/mobile/components/BasicChatListItem/BasicChatListItem.d.ts +2 -1
  8. package/dist/src/mobile/components/BasicChatListItem/BasicChatListItem.js +3 -3
  9. package/dist/src/mobile/components/ChatList/ChatList.d.ts +4 -1
  10. package/dist/src/mobile/components/ChatList/ChatList.js +3 -3
  11. package/dist/src/mobile/components/ChatList/Header.d.ts +2 -2
  12. package/dist/src/mobile/components/ChatList/Header.js +5 -2
  13. package/dist/src/sub/DynamicLayout/sectionActionTypes.d.ts +7 -0
  14. package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.d.ts +1 -1
  15. package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.js +36 -6
  16. package/package.json +2 -1
  17. package/release-note.md +2 -2
package/dist/src/desktop/components/BasicChatListItem/BasicChatListItem.d.ts CHANGED
@@ -9,7 +9,8 @@ type Props = {
9
9
  contextMenuOptionArray?: PDSValueOption[];
10
10
  contextMenuState?: 'normal' | 'disabled';
11
11
  colorTheme?: 'seller' | 'seller_transparent' | 'subscriber' | 'subscriber_transparent' | 'secondary_transparent_grey' | 'white_transparent_grey' | 'brand_primary_solid' | 'brand_primary_translucent' | 'secondary_transparent' | 'white_transparent';
12
+ copyMode?: 'use' | 'none';
12
13
  onClickContextMenuItem?: (option: PDSValueOption) => void;
13
14
  };
14
- declare function BasicChatListItem({ titleText, contentText, leftImageMode, imageSrc, hoverMode, contextMenuOptionArray, onClickContextMenuItem, contextMenuState, colorTheme }: Props): JSX.Element;
15
+ declare function BasicChatListItem({ titleText, contentText, leftImageMode, imageSrc, hoverMode, contextMenuOptionArray, onClickContextMenuItem, contextMenuState, colorTheme, copyMode }: Props): JSX.Element;
15
16
  export default BasicChatListItem;
package/dist/src/desktop/components/BasicChatListItem/BasicChatListItem.js CHANGED
@@ -52,8 +52,8 @@ var backgroundColorTheme = {
52
52
  white_transparent: 'ui_cpnt_list_base_area_transparent'
53
53
  };
54
54
  function BasicChatListItem(_a) {
55
- var titleText = _a.titleText, contentText = _a.contentText, _b = _a.leftImageMode, leftImageMode = _b === void 0 ? 'none' : _b, imageSrc = _a.imageSrc, _c = _a.hoverMode, hoverMode = _c === void 0 ? 'use' : _c, contextMenuOptionArray = _a.contextMenuOptionArray, onClickContextMenuItem = _a.onClickContextMenuItem, _d = _a.contextMenuState, contextMenuState = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'secondary_transparent' : _e;
56
- var _f = (0, react_1.useState)(false), isContextMenuOpen = _f[0], setIsContextMenuOpen = _f[1];
55
+ var titleText = _a.titleText, contentText = _a.contentText, _b = _a.leftImageMode, leftImageMode = _b === void 0 ? 'none' : _b, imageSrc = _a.imageSrc, _c = _a.hoverMode, hoverMode = _c === void 0 ? 'use' : _c, contextMenuOptionArray = _a.contextMenuOptionArray, onClickContextMenuItem = _a.onClickContextMenuItem, _d = _a.contextMenuState, contextMenuState = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'secondary_transparent' : _e, _f = _a.copyMode, copyMode = _f === void 0 ? 'none' : _f;
56
+ var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
57
57
  var contextMenuRef = (0, react_1.useRef)(null);
58
58
  var chatBody = document.querySelector('#chatMessageBox');
59
59
  var chatBodyRect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
@@ -107,7 +107,7 @@ function BasicChatListItem(_a) {
107
107
  iconColorKey = 'ui_cpnt_button_icon_enabled';
108
108
  }
109
109
  }
110
- return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_BasicChatListItem, __assign({ "x-pds-name": "BasicChatListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", colorTheme: colorTheme }, { children: [leftImageMode === 'use' && ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: "responsive" }) })), (0, jsx_runtime_1.jsx)(S_TitleTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", wordBreak: "break_all", colorTheme: titleTextColors[colorTheme] }) }), (0, jsx_runtime_1.jsx)(S_ContentTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: contentTextColorTheme, colorOverride: contentTextColorOverride, wordBreak: "break_all" }) }), hoverMode === 'use' && ((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: iconColorKey, 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: chatBodyRect === null || chatBodyRect === void 0 ? void 0 : chatBodyRect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ onMouseLeave: 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)); }) }) })) })) })] })) }));
110
+ return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_BasicChatListItem, __assign({ "x-pds-name": "BasicChatListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", colorTheme: colorTheme }, { children: [leftImageMode === 'use' && ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: "responsive" }) })), (0, jsx_runtime_1.jsx)(S_TitleTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", wordBreak: "break_all", colorTheme: titleTextColors[colorTheme], userSelectMode: copyMode === 'use' ? 'use' : 'none' }) }), (0, jsx_runtime_1.jsx)(S_ContentTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: contentTextColorTheme, colorOverride: contentTextColorOverride, wordBreak: "break_all", userSelectMode: copyMode === 'use' ? 'use' : 'none' }) }), hoverMode === 'use' && ((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: iconColorKey, 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: chatBodyRect === null || chatBodyRect === void 0 ? void 0 : chatBodyRect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ onMouseLeave: 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)); }) }) })) })) })] })) }));
111
111
  }
112
112
  var S_BasicChatListItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n height: fit-content;\n max-width: 100%;\n min-height: 24px;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"], ["\n background-color: ", ";\n display: flex;\n height: fit-content;\n max-width: 100%;\n min-height: 24px;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"])), function (_a) {
113
113
  var colorTheme = _a.colorTheme, theme = _a.theme;
package/dist/src/desktop/components/ChatList/ChatList.d.ts CHANGED
@@ -8,13 +8,15 @@ export type Props = {
8
8
  captionText?: PDSTextType;
9
9
  onClickCaptionText?: () => void;
10
10
  titleStyleTheme?: 'headingBold' | 'subTitleBold';
11
- headerDisplayType?: 'none' | 'ibtn1' | 'ibtn2' | 'ibtn3';
11
+ headerDisplayType?: 'none' | 'ibtn1' | 'ibtn2' | 'ibtn3' | 'ibtn4';
12
12
  headerIBtn1IconName?: PDSIconType;
13
13
  headerIBtn1IconFillType?: 'line' | 'fill';
14
14
  headerIBtn2IconName?: PDSIconType;
15
15
  headerIBtn2IconFillType?: 'line' | 'fill';
16
16
  headerIBtn3IconName?: PDSIconType;
17
17
  headerIBtn3IconFillType?: 'line' | 'fill';
18
+ headerIBtn4IconName?: PDSIconType;
19
+ headerIBtn4IconFillType?: 'line' | 'fill';
18
20
  children?: React.ReactNode;
19
21
  bodyChildren?: React.ReactNode;
20
22
  textFieldState?: 'normal' | 'read_only' | 'disabled';
@@ -48,6 +50,7 @@ export type Props = {
48
50
  onClickHeaderIBtn1?: () => void;
49
51
  onClickHeaderIBtn2?: () => void;
50
52
  onClickHeaderIBtn3?: () => void;
53
+ onClickHeaderIBtn4?: () => void;
51
54
  };
52
55
  declare const ChatList: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
53
56
  export default ChatList;
package/dist/src/desktop/components/ChatList/ChatList.js CHANGED
@@ -55,14 +55,14 @@ var baseBackgroundColors = {
55
55
  transparent: 'ui_cpnt_list_base_area_transparent'
56
56
  };
57
57
  var ChatList = react_1.default.forwardRef(function (_a, ref) {
58
- var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'solid' : _b, _c = _a.headerMode, headerMode = _c === void 0 ? 'use' : _c, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, onClickCaptionText = _a.onClickCaptionText, _d = _a.titleStyleTheme, titleStyleTheme = _d === void 0 ? 'subTitleBold' : _d, _e = _a.headerDisplayType, headerDisplayType = _e === void 0 ? 'none' : _e, _f = _a.headerIBtn1IconName, headerIBtn1IconName = _f === void 0 ? 'ic_xmark' : _f, _g = _a.headerIBtn1IconFillType, headerIBtn1IconFillType = _g === void 0 ? 'line' : _g, headerIBtn2IconName = _a.headerIBtn2IconName, _h = _a.headerIBtn2IconFillType, headerIBtn2IconFillType = _h === void 0 ? 'line' : _h, headerIBtn3IconName = _a.headerIBtn3IconName, _j = _a.headerIBtn3IconFillType, headerIBtn3IconFillType = _j === void 0 ? 'line' : _j, children = _a.children, bodyChildren = _a.bodyChildren, _k = _a.textFieldState, textFieldState = _k === void 0 ? 'normal' : _k, textFieldHintText = _a.textFieldHintText, textFieldDefaultText = _a.textFieldDefaultText, textFieldMaxLength = _a.textFieldMaxLength, _l = _a.scrollVisibleType, scrollVisibleType = _l === void 0 ? 'moving' : _l, footerChildren = _a.footerChildren, _m = _a.submitIBtnState, submitIBtnState = _m === void 0 ? 'normal' : _m, bodyMBtnText = _a.bodyMBtnText, _o = _a.bodySpacingMode, bodySpacingMode = _o === void 0 ? 'none' : _o, onSubmit = _a.onSubmit, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1, onClickHeaderIBtn2 = _a.onClickHeaderIBtn2, onClickHeaderIBtn3 = _a.onClickHeaderIBtn3, submitIBtnIconName = _a.submitIBtnIconName, submitIBtnIconFillType = _a.submitIBtnIconFillType, _p = _a.footerIBtn1State, footerIBtn1State = _p === void 0 ? 'normal' : _p, footerIBtn1IconName = _a.footerIBtn1IconName, footerIBtn1IconFillType = _a.footerIBtn1IconFillType, _q = _a.footerIBtn1Type, footerIBtn1Type = _q === void 0 ? 'button' : _q, onClickFooterIBtn1 = _a.onClickFooterIBtn1, _r = _a.footerIBtn2State, footerIBtn2State = _r === void 0 ? 'normal' : _r, footerIBtn2IconName = _a.footerIBtn2IconName, footerIBtn2IconFillType = _a.footerIBtn2IconFillType, _s = _a.footerIBtn2Type, footerIBtn2Type = _s === void 0 ? 'button' : _s, onClickFooterIBtn2 = _a.onClickFooterIBtn2, _t = _a.footerIBtn3State, footerIBtn3State = _t === void 0 ? 'normal' : _t, footerIBtn3IconName = _a.footerIBtn3IconName, footerIBtn3IconFillType = _a.footerIBtn3IconFillType, _u = _a.footerIBtn3Type, footerIBtn3Type = _u === void 0 ? 'button' : _u, footerIBtn3Accept = _a.footerIBtn3Accept, onClickFooterIBtn3 = _a.onClickFooterIBtn3;
58
+ var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'solid' : _b, _c = _a.headerMode, headerMode = _c === void 0 ? 'use' : _c, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, onClickCaptionText = _a.onClickCaptionText, _d = _a.titleStyleTheme, titleStyleTheme = _d === void 0 ? 'subTitleBold' : _d, _e = _a.headerDisplayType, headerDisplayType = _e === void 0 ? 'none' : _e, _f = _a.headerIBtn1IconName, headerIBtn1IconName = _f === void 0 ? 'ic_xmark' : _f, _g = _a.headerIBtn1IconFillType, headerIBtn1IconFillType = _g === void 0 ? 'line' : _g, headerIBtn2IconName = _a.headerIBtn2IconName, _h = _a.headerIBtn2IconFillType, headerIBtn2IconFillType = _h === void 0 ? 'line' : _h, headerIBtn3IconName = _a.headerIBtn3IconName, _j = _a.headerIBtn3IconFillType, headerIBtn3IconFillType = _j === void 0 ? 'line' : _j, headerIBtn4IconName = _a.headerIBtn4IconName, _k = _a.headerIBtn4IconFillType, headerIBtn4IconFillType = _k === void 0 ? 'line' : _k, children = _a.children, bodyChildren = _a.bodyChildren, _l = _a.textFieldState, textFieldState = _l === void 0 ? 'normal' : _l, textFieldHintText = _a.textFieldHintText, textFieldDefaultText = _a.textFieldDefaultText, textFieldMaxLength = _a.textFieldMaxLength, _m = _a.scrollVisibleType, scrollVisibleType = _m === void 0 ? 'moving' : _m, footerChildren = _a.footerChildren, _o = _a.submitIBtnState, submitIBtnState = _o === void 0 ? 'normal' : _o, bodyMBtnText = _a.bodyMBtnText, _p = _a.bodySpacingMode, bodySpacingMode = _p === void 0 ? 'none' : _p, onSubmit = _a.onSubmit, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1, onClickHeaderIBtn2 = _a.onClickHeaderIBtn2, onClickHeaderIBtn3 = _a.onClickHeaderIBtn3, onClickHeaderIBtn4 = _a.onClickHeaderIBtn4, submitIBtnIconName = _a.submitIBtnIconName, submitIBtnIconFillType = _a.submitIBtnIconFillType, _q = _a.footerIBtn1State, footerIBtn1State = _q === void 0 ? 'normal' : _q, footerIBtn1IconName = _a.footerIBtn1IconName, footerIBtn1IconFillType = _a.footerIBtn1IconFillType, _r = _a.footerIBtn1Type, footerIBtn1Type = _r === void 0 ? 'button' : _r, onClickFooterIBtn1 = _a.onClickFooterIBtn1, _s = _a.footerIBtn2State, footerIBtn2State = _s === void 0 ? 'normal' : _s, footerIBtn2IconName = _a.footerIBtn2IconName, footerIBtn2IconFillType = _a.footerIBtn2IconFillType, _t = _a.footerIBtn2Type, footerIBtn2Type = _t === void 0 ? 'button' : _t, onClickFooterIBtn2 = _a.onClickFooterIBtn2, _u = _a.footerIBtn3State, footerIBtn3State = _u === void 0 ? 'normal' : _u, footerIBtn3IconName = _a.footerIBtn3IconName, footerIBtn3IconFillType = _a.footerIBtn3IconFillType, _v = _a.footerIBtn3Type, footerIBtn3Type = _v === void 0 ? 'button' : _v, footerIBtn3Accept = _a.footerIBtn3Accept, onClickFooterIBtn3 = _a.onClickFooterIBtn3;
59
59
  var methods = (0, react_hook_form_1.useForm)({
60
60
  mode: 'onChange',
61
61
  defaultValues: {
62
62
  chat: ''
63
63
  }
64
64
  });
65
- var reset = methods.reset, handleSubmit = methods.handleSubmit, control = methods.control, _v = methods.formState, isDirty = _v.isDirty, isValid = _v.isValid, isSubmitSuccessful = _v.isSubmitSuccessful;
65
+ var reset = methods.reset, handleSubmit = methods.handleSubmit, control = methods.control, _w = methods.formState, isDirty = _w.isDirty, isValid = _w.isValid, isSubmitSuccessful = _w.isSubmitSuccessful;
66
66
  /**
67
67
  * @when 폼 submit이 성공적으로 완료 되었을 때
68
68
  * @expected 폼을 초기화합니다.
@@ -90,7 +90,7 @@ var ChatList = react_1.default.forwardRef(function (_a, ref) {
90
90
  var callBackAfterScrollToBottom = function () {
91
91
  reset();
92
92
  };
93
- return ((0, jsx_runtime_1.jsxs)(S_ChatList, __assign({ "x-pds-name": "ChatList", "x-pds-element-type": "component", "x-pds-device-type": "desktop", backgroundColor: baseBackgroundColors[colorTheme], id: "chatList" }, { children: [headerMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Header_1.default, { colorTheme: colorTheme, titleText: titleText, descText: descText, captionText: captionText, onClickCaptionText: onClickCaptionText, titleStyleTheme: titleStyleTheme, headerDisplayType: headerDisplayType, headerIBtn1IconName: headerIBtn1IconName, headerIBtn1IconFillType: headerIBtn1IconFillType, headerIBtn2IconName: headerIBtn2IconName, headerIBtn2IconFillType: headerIBtn2IconFillType, headerIBtn3IconName: headerIBtn3IconName, headerIBtn3IconFillType: headerIBtn3IconFillType, onClickHeaderIBtn1: onClickHeaderIBtn1, onClickHeaderIBtn2: onClickHeaderIBtn2, onClickHeaderIBtn3: onClickHeaderIBtn3 }), (0, jsx_runtime_1.jsx)(hybrid_1.Divider, { colorTheme: colorTheme === 'transparent' ? 'divider2' : 'none' })] })), (0, jsx_runtime_1.jsx)(Body_1.default, __assign({ scrollVisibleType: scrollVisibleType, isSubmitted: isSubmitSuccessful, bodyMBtnText: bodyMBtnText, bodySpacingMode: bodySpacingMode, callBackAfterScrollToBottom: callBackAfterScrollToBottom, bodyChildren: bodyChildren, ref: ref }, { children: children })), (0, jsx_runtime_1.jsx)(hybrid_1.Divider, { colorTheme: colorTheme === 'transparent' ? 'divider2' : 'none' }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, methods, { children: (0, jsx_runtime_1.jsx)("form", __assign({ onSubmit: handleSubmit(handleSubmitChat) }, { children: (0, jsx_runtime_1.jsx)(Footer_1.default, { colorTheme: colorTheme, textFieldDefaultText: textFieldDefaultText, textFieldHintText: textFieldHintText, textFieldState: textFieldState, textFieldMaxLength: textFieldMaxLength, footerChildren: footerChildren, isSubmitBtnActive: isSubmitButtonActive, submitIBtnIconName: submitIBtnIconName, submitIBtnIconFillType: submitIBtnIconFillType, footerIBtn1State: footerIBtn1State, footerIBtn1IconName: footerIBtn1IconName, footerIBtn1IconFillType: footerIBtn1IconFillType, footerIBtn1Type: footerIBtn1Type, onClickFooterIBtn1: onClickFooterIBtn1, footerIBtn2State: footerIBtn2State, footerIBtn2IconName: footerIBtn2IconName, footerIBtn2IconFillType: footerIBtn2IconFillType, footerIBtn2Type: footerIBtn2Type, onClickFooterIBtn2: onClickFooterIBtn2, footerIBtn3State: footerIBtn3State, footerIBtn3IconName: footerIBtn3IconName, footerIBtn3IconFillType: footerIBtn3IconFillType, footerIBtn3Type: footerIBtn3Type, footerIBtn3Accept: footerIBtn3Accept, onClickFooterIBtn3: onClickFooterIBtn3 }) })) })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" })] })));
93
+ return ((0, jsx_runtime_1.jsxs)(S_ChatList, __assign({ "x-pds-name": "ChatList", "x-pds-element-type": "component", "x-pds-device-type": "desktop", backgroundColor: baseBackgroundColors[colorTheme], id: "chatList" }, { children: [headerMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Header_1.default, { colorTheme: colorTheme, titleText: titleText, descText: descText, captionText: captionText, onClickCaptionText: onClickCaptionText, titleStyleTheme: titleStyleTheme, headerDisplayType: headerDisplayType, headerIBtn1IconName: headerIBtn1IconName, headerIBtn1IconFillType: headerIBtn1IconFillType, headerIBtn2IconName: headerIBtn2IconName, headerIBtn2IconFillType: headerIBtn2IconFillType, headerIBtn3IconName: headerIBtn3IconName, headerIBtn3IconFillType: headerIBtn3IconFillType, headerIBtn4IconName: headerIBtn4IconName, headerIBtn4IconFillType: headerIBtn4IconFillType, onClickHeaderIBtn1: onClickHeaderIBtn1, onClickHeaderIBtn2: onClickHeaderIBtn2, onClickHeaderIBtn3: onClickHeaderIBtn3, onClickHeaderIBtn4: onClickHeaderIBtn4 }), (0, jsx_runtime_1.jsx)(hybrid_1.Divider, { colorTheme: colorTheme === 'transparent' ? 'divider2' : 'none' })] })), (0, jsx_runtime_1.jsx)(Body_1.default, __assign({ scrollVisibleType: scrollVisibleType, isSubmitted: isSubmitSuccessful, bodyMBtnText: bodyMBtnText, bodySpacingMode: bodySpacingMode, callBackAfterScrollToBottom: callBackAfterScrollToBottom, bodyChildren: bodyChildren, ref: ref }, { children: children })), (0, jsx_runtime_1.jsx)(hybrid_1.Divider, { colorTheme: colorTheme === 'transparent' ? 'divider2' : 'none' }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, methods, { children: (0, jsx_runtime_1.jsx)("form", __assign({ onSubmit: handleSubmit(handleSubmitChat) }, { children: (0, jsx_runtime_1.jsx)(Footer_1.default, { colorTheme: colorTheme, textFieldDefaultText: textFieldDefaultText, textFieldHintText: textFieldHintText, textFieldState: textFieldState, textFieldMaxLength: textFieldMaxLength, footerChildren: footerChildren, isSubmitBtnActive: isSubmitButtonActive, submitIBtnIconName: submitIBtnIconName, submitIBtnIconFillType: submitIBtnIconFillType, footerIBtn1State: footerIBtn1State, footerIBtn1IconName: footerIBtn1IconName, footerIBtn1IconFillType: footerIBtn1IconFillType, footerIBtn1Type: footerIBtn1Type, onClickFooterIBtn1: onClickFooterIBtn1, footerIBtn2State: footerIBtn2State, footerIBtn2IconName: footerIBtn2IconName, footerIBtn2IconFillType: footerIBtn2IconFillType, footerIBtn2Type: footerIBtn2Type, onClickFooterIBtn2: onClickFooterIBtn2, footerIBtn3State: footerIBtn3State, footerIBtn3IconName: footerIBtn3IconName, footerIBtn3IconFillType: footerIBtn3IconFillType, footerIBtn3Type: footerIBtn3Type, footerIBtn3Accept: footerIBtn3Accept, onClickFooterIBtn3: onClickFooterIBtn3 }) })) })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" })] })));
94
94
  });
95
95
  var S_ChatList = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n"], ["\n background-color: ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n"])), function (_a) {
96
96
  var backgroundColor = _a.backgroundColor, theme = _a.theme;
package/dist/src/desktop/components/ChatList/Header.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
2
  import type { Props as ChatListProps } from './ChatList';
3
- type Props = Required<Pick<ChatListProps, 'colorTheme'>> & Pick<ChatListProps, 'titleText' | 'descText' | 'captionText' | 'titleStyleTheme' | 'headerDisplayType' | 'headerIBtn1IconName' | 'headerIBtn1IconFillType' | 'headerIBtn2IconName' | 'headerIBtn2IconFillType' | 'headerIBtn3IconName' | 'headerIBtn3IconFillType' | 'onClickHeaderIBtn1' | 'onClickHeaderIBtn2' | 'onClickHeaderIBtn3' | 'onClickCaptionText'>;
4
- declare function Header({ colorTheme, titleText, descText, captionText, onClickCaptionText, titleStyleTheme, headerDisplayType, headerIBtn1IconName, headerIBtn1IconFillType, headerIBtn2IconName, headerIBtn2IconFillType, headerIBtn3IconName, headerIBtn3IconFillType, onClickHeaderIBtn1, onClickHeaderIBtn2, onClickHeaderIBtn3 }: Props): JSX.Element;
3
+ type Props = Required<Pick<ChatListProps, 'colorTheme'>> & Pick<ChatListProps, 'titleText' | 'descText' | 'captionText' | 'titleStyleTheme' | 'headerDisplayType' | 'headerIBtn1IconName' | 'headerIBtn1IconFillType' | 'headerIBtn2IconName' | 'headerIBtn2IconFillType' | 'headerIBtn3IconName' | 'headerIBtn3IconFillType' | 'headerIBtn4IconName' | 'headerIBtn4IconFillType' | 'onClickHeaderIBtn1' | 'onClickHeaderIBtn2' | 'onClickHeaderIBtn3' | 'onClickHeaderIBtn4' | 'onClickCaptionText'>;
4
+ declare function Header({ colorTheme, titleText, descText, captionText, onClickCaptionText, titleStyleTheme, headerDisplayType, headerIBtn1IconName, headerIBtn1IconFillType, headerIBtn2IconName, headerIBtn2IconFillType, headerIBtn3IconName, headerIBtn3IconFillType, headerIBtn4IconName, headerIBtn4IconFillType, onClickHeaderIBtn1, onClickHeaderIBtn2, onClickHeaderIBtn3, onClickHeaderIBtn4 }: Props): JSX.Element;
5
5
  export default Header;
package/dist/src/desktop/components/ChatList/Header.js CHANGED
@@ -34,8 +34,11 @@ var iconColors = {
34
34
  transparent: 'ui_cpnt_button_icon_white'
35
35
  };
36
36
  function Header(_a) {
37
- var colorTheme = _a.colorTheme, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, onClickCaptionText = _a.onClickCaptionText, titleStyleTheme = _a.titleStyleTheme, headerDisplayType = _a.headerDisplayType, headerIBtn1IconName = _a.headerIBtn1IconName, headerIBtn1IconFillType = _a.headerIBtn1IconFillType, headerIBtn2IconName = _a.headerIBtn2IconName, headerIBtn2IconFillType = _a.headerIBtn2IconFillType, headerIBtn3IconName = _a.headerIBtn3IconName, headerIBtn3IconFillType = _a.headerIBtn3IconFillType, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1, onClickHeaderIBtn2 = _a.onClickHeaderIBtn2, onClickHeaderIBtn3 = _a.onClickHeaderIBtn3;
38
- return ((0, jsx_runtime_1.jsxs)(S_HeaderContentWrapper, { children: [(0, jsx_runtime_1.jsxs)(S_HeaderLeftBox, { children: [titleText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: titleTextColors[colorTheme], wordBreak: "break_all" })), descText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: descText, styleTheme: "body2Regular", colorTheme: colorTheme === 'solid' ? 'sysTextSecondary' : 'sysTextWhite', colorOverride: colorTheme === 'translucent' ? 'ui_cpnt_list_text_caption_02' : undefined, wordBreak: "break_all" })] })), captionText && ((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)(S_CaptionTextWrapper, __assign({ onClick: onClickCaptionText, "$cursor": onClickCaptionText ? 'pointer' : 'default' }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: colorTheme === 'solid' ? 'sysTextTertiary' : 'sysTextWhite', colorOverride: colorTheme === 'translucent' ? 'ui_cpnt_list_text_caption_03' : undefined, wordBreak: "break_all" }) }))] }))] }), headerDisplayType === 'ibtn3' && headerIBtn3IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: headerIBtn3IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[colorTheme], iconSize: 24, iconFillType: headerIBtn3IconFillType, onClick: onClickHeaderIBtn3 })), (headerDisplayType === 'ibtn2' || headerDisplayType === 'ibtn3') && headerIBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: headerIBtn2IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[colorTheme], iconSize: 24, iconFillType: headerIBtn2IconFillType, onClick: onClickHeaderIBtn2 })), headerDisplayType !== 'none' && headerIBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: headerIBtn1IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[colorTheme], iconSize: 24, iconFillType: headerIBtn1IconFillType, onClick: onClickHeaderIBtn1 }))] }));
37
+ var colorTheme = _a.colorTheme, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, onClickCaptionText = _a.onClickCaptionText, titleStyleTheme = _a.titleStyleTheme, headerDisplayType = _a.headerDisplayType, headerIBtn1IconName = _a.headerIBtn1IconName, headerIBtn1IconFillType = _a.headerIBtn1IconFillType, headerIBtn2IconName = _a.headerIBtn2IconName, headerIBtn2IconFillType = _a.headerIBtn2IconFillType, headerIBtn3IconName = _a.headerIBtn3IconName, headerIBtn3IconFillType = _a.headerIBtn3IconFillType, headerIBtn4IconName = _a.headerIBtn4IconName, headerIBtn4IconFillType = _a.headerIBtn4IconFillType, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1, onClickHeaderIBtn2 = _a.onClickHeaderIBtn2, onClickHeaderIBtn3 = _a.onClickHeaderIBtn3, onClickHeaderIBtn4 = _a.onClickHeaderIBtn4;
38
+ return ((0, jsx_runtime_1.jsxs)(S_HeaderContentWrapper, { children: [(0, jsx_runtime_1.jsxs)(S_HeaderLeftBox, { children: [titleText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: titleTextColors[colorTheme], wordBreak: "break_all" })), descText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: descText, styleTheme: "body2Regular", colorTheme: colorTheme === 'solid' ? 'sysTextSecondary' : 'sysTextWhite', colorOverride: colorTheme === 'translucent' ? 'ui_cpnt_list_text_caption_02' : undefined, wordBreak: "break_all" })] })), captionText && ((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)(S_CaptionTextWrapper, __assign({ onClick: onClickCaptionText, "$cursor": onClickCaptionText ? 'pointer' : 'default' }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: colorTheme === 'solid' ? 'sysTextTertiary' : 'sysTextWhite', colorOverride: colorTheme === 'translucent' ? 'ui_cpnt_list_text_caption_03' : undefined, wordBreak: "break_all" }) }))] }))] }), headerDisplayType === 'ibtn4' && headerIBtn4IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: headerIBtn4IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[colorTheme], iconSize: 24, iconFillType: headerIBtn4IconFillType, onClick: onClickHeaderIBtn4 })), (headerDisplayType === 'ibtn3' || headerDisplayType === 'ibtn4') && headerIBtn3IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: headerIBtn3IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[colorTheme], iconSize: 24, iconFillType: headerIBtn3IconFillType, onClick: onClickHeaderIBtn3 })), (headerDisplayType === 'ibtn2' ||
39
+ headerDisplayType === 'ibtn3' ||
40
+ headerDisplayType === 'ibtn4') &&
41
+ headerIBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: headerIBtn2IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[colorTheme], iconSize: 24, iconFillType: headerIBtn2IconFillType, onClick: onClickHeaderIBtn2 })), headerDisplayType !== 'none' && headerIBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: headerIBtn1IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[colorTheme], iconSize: 24, iconFillType: headerIBtn1IconFillType, onClick: onClickHeaderIBtn1 }))] }));
39
42
  }
40
43
  var S_HeaderContentWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"], ["\n align-items: center;\n display: flex;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"])), function (_a) {
41
44
  var theme = _a.theme;
package/dist/src/mobile/components/BasicChatListItem/BasicChatListItem.d.ts CHANGED
@@ -9,7 +9,8 @@ type Props = {
9
9
  contextMenuOptionArray?: PDSValueOption[];
10
10
  contextMenuState?: 'normal' | 'disabled';
11
11
  colorTheme?: 'seller' | 'seller_transparent' | 'subscriber' | 'subscriber_transparent' | 'secondary_transparent_grey' | 'white_transparent_grey' | 'brand_primary_solid' | 'brand_primary_translucent' | 'secondary_transparent' | 'white_transparent';
12
+ copyMode?: 'use' | 'none';
12
13
  onClickContextMenuItem?: (option: PDSValueOption) => void;
13
14
  };
14
- declare function BasicChatListItem({ titleText, contentText, leftImageMode, imageSrc, hoverMode, contextMenuOptionArray, onClickContextMenuItem, contextMenuState, colorTheme }: Props): JSX.Element;
15
+ declare function BasicChatListItem({ titleText, contentText, leftImageMode, imageSrc, hoverMode, contextMenuOptionArray, onClickContextMenuItem, contextMenuState, colorTheme, copyMode }: Props): JSX.Element;
15
16
  export default BasicChatListItem;
package/dist/src/mobile/components/BasicChatListItem/BasicChatListItem.js CHANGED
@@ -52,8 +52,8 @@ var backgroundColorTheme = {
52
52
  white_transparent: 'ui_cpnt_list_base_area_transparent'
53
53
  };
54
54
  function BasicChatListItem(_a) {
55
- var titleText = _a.titleText, contentText = _a.contentText, _b = _a.leftImageMode, leftImageMode = _b === void 0 ? 'none' : _b, imageSrc = _a.imageSrc, _c = _a.hoverMode, hoverMode = _c === void 0 ? 'use' : _c, contextMenuOptionArray = _a.contextMenuOptionArray, onClickContextMenuItem = _a.onClickContextMenuItem, _d = _a.contextMenuState, contextMenuState = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'secondary_transparent' : _e;
56
- var _f = (0, react_1.useState)(false), isContextMenuOpen = _f[0], setIsContextMenuOpen = _f[1];
55
+ var titleText = _a.titleText, contentText = _a.contentText, _b = _a.leftImageMode, leftImageMode = _b === void 0 ? 'none' : _b, imageSrc = _a.imageSrc, _c = _a.hoverMode, hoverMode = _c === void 0 ? 'use' : _c, contextMenuOptionArray = _a.contextMenuOptionArray, onClickContextMenuItem = _a.onClickContextMenuItem, _d = _a.contextMenuState, contextMenuState = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'secondary_transparent' : _e, _f = _a.copyMode, copyMode = _f === void 0 ? 'none' : _f;
56
+ var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
57
57
  var contextMenuRef = (0, react_1.useRef)(null);
58
58
  var chatBody = document.querySelector('#chatMessageBox');
59
59
  var chatBodyRect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
@@ -124,7 +124,7 @@ function BasicChatListItem(_a) {
124
124
  iconColorKey = 'ui_cpnt_button_icon_enabled';
125
125
  }
126
126
  }
127
- return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_BasicChatListItem, __assign({ "x-pds-name": "BasicChatListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", colorTheme: colorTheme }, { children: [leftImageMode === 'use' && ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: "responsive" }) })), (0, jsx_runtime_1.jsx)(S_TitleTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", wordBreak: "break_all", colorTheme: titleTextColors[colorTheme] }) }), (0, jsx_runtime_1.jsx)(S_ContentTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: contentTextColorTheme, colorOverride: contentTextColorOverride, wordBreak: "break_all" }) }), hoverMode === 'use' && ((0, jsx_runtime_1.jsx)(S_MoreButtonWrapper, { children: (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: iconColorKey, 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: chatBodyRect === null || chatBodyRect === void 0 ? void 0 : chatBodyRect.height, onClickOutside: handleContextMenuOutsideClick }, { 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)); }) }) })) })] })) }));
127
+ return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_BasicChatListItem, __assign({ "x-pds-name": "BasicChatListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", colorTheme: colorTheme }, { children: [leftImageMode === 'use' && ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: "responsive" }) })), (0, jsx_runtime_1.jsx)(S_TitleTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", wordBreak: "break_all", colorTheme: titleTextColors[colorTheme], userSelectMode: copyMode === 'use' ? 'use' : 'none' }) }), (0, jsx_runtime_1.jsx)(S_ContentTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: contentTextColorTheme, colorOverride: contentTextColorOverride, wordBreak: "break_all", userSelectMode: copyMode === 'use' ? 'use' : 'none' }) }), hoverMode === 'use' && ((0, jsx_runtime_1.jsx)(S_MoreButtonWrapper, { children: (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: iconColorKey, 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: chatBodyRect === null || chatBodyRect === void 0 ? void 0 : chatBodyRect.height, onClickOutside: handleContextMenuOutsideClick }, { 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)); }) }) })) })] })) }));
128
128
  }
129
129
  var S_BasicChatListItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n height: fit-content;\n max-width: 100%;\n min-height: 24px;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"], ["\n background-color: ", ";\n display: flex;\n height: fit-content;\n max-width: 100%;\n min-height: 24px;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"])), function (_a) {
130
130
  var colorTheme = _a.colorTheme, theme = _a.theme;
package/dist/src/mobile/components/ChatList/ChatList.d.ts CHANGED
@@ -8,13 +8,15 @@ export type Props = {
8
8
  captionText?: PDSTextType;
9
9
  onClickCaptionText?: () => void;
10
10
  titleStyleTheme?: 'headingBold' | 'subTitleBold';
11
- headerDisplayType?: 'none' | 'ibtn1' | 'ibtn2' | 'ibtn3';
11
+ headerDisplayType?: 'none' | 'ibtn1' | 'ibtn2' | 'ibtn3' | 'ibtn4';
12
12
  headerIBtn1IconName?: PDSIconType;
13
13
  headerIBtn1IconFillType?: 'line' | 'fill';
14
14
  headerIBtn2IconName?: PDSIconType;
15
15
  headerIBtn2IconFillType?: 'line' | 'fill';
16
16
  headerIBtn3IconName?: PDSIconType;
17
17
  headerIBtn3IconFillType?: 'line' | 'fill';
18
+ headerIBtn4IconName?: PDSIconType;
19
+ headerIBtn4IconFillType?: 'line' | 'fill';
18
20
  children?: React.ReactNode;
19
21
  bodyChildren?: React.ReactNode;
20
22
  textFieldState?: 'normal' | 'read_only' | 'disabled';
@@ -48,6 +50,7 @@ export type Props = {
48
50
  onClickHeaderIBtn1?: () => void;
49
51
  onClickHeaderIBtn2?: () => void;
50
52
  onClickHeaderIBtn3?: () => void;
53
+ onClickHeaderIBtn4?: () => void;
51
54
  };
52
55
  declare const ChatList: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
53
56
  export default ChatList;
package/dist/src/mobile/components/ChatList/ChatList.js CHANGED
@@ -55,14 +55,14 @@ var baseBackgroundColors = {
55
55
  transparent: 'ui_cpnt_list_base_area_transparent'
56
56
  };
57
57
  var ChatList = react_1.default.forwardRef(function (_a, ref) {
58
- var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'solid' : _b, _c = _a.headerMode, headerMode = _c === void 0 ? 'use' : _c, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, onClickCaptionText = _a.onClickCaptionText, _d = _a.titleStyleTheme, titleStyleTheme = _d === void 0 ? 'subTitleBold' : _d, _e = _a.headerDisplayType, headerDisplayType = _e === void 0 ? 'none' : _e, _f = _a.headerIBtn1IconName, headerIBtn1IconName = _f === void 0 ? 'ic_xmark' : _f, _g = _a.headerIBtn1IconFillType, headerIBtn1IconFillType = _g === void 0 ? 'line' : _g, headerIBtn2IconName = _a.headerIBtn2IconName, _h = _a.headerIBtn2IconFillType, headerIBtn2IconFillType = _h === void 0 ? 'line' : _h, headerIBtn3IconName = _a.headerIBtn3IconName, _j = _a.headerIBtn3IconFillType, headerIBtn3IconFillType = _j === void 0 ? 'line' : _j, children = _a.children, bodyChildren = _a.bodyChildren, _k = _a.textFieldState, textFieldState = _k === void 0 ? 'normal' : _k, textFieldHintText = _a.textFieldHintText, textFieldDefaultText = _a.textFieldDefaultText, textFieldMaxLength = _a.textFieldMaxLength, _l = _a.scrollVisibleType, scrollVisibleType = _l === void 0 ? 'moving' : _l, footerChildren = _a.footerChildren, _m = _a.submitIBtnState, submitIBtnState = _m === void 0 ? 'normal' : _m, bodyMBtnText = _a.bodyMBtnText, _o = _a.bodySpacingMode, bodySpacingMode = _o === void 0 ? 'none' : _o, onSubmit = _a.onSubmit, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1, onClickHeaderIBtn2 = _a.onClickHeaderIBtn2, onClickHeaderIBtn3 = _a.onClickHeaderIBtn3, submitIBtnIconName = _a.submitIBtnIconName, submitIBtnIconFillType = _a.submitIBtnIconFillType, _p = _a.footerIBtn1State, footerIBtn1State = _p === void 0 ? 'normal' : _p, footerIBtn1IconName = _a.footerIBtn1IconName, footerIBtn1IconFillType = _a.footerIBtn1IconFillType, _q = _a.footerIBtn1Type, footerIBtn1Type = _q === void 0 ? 'button' : _q, onClickFooterIBtn1 = _a.onClickFooterIBtn1, _r = _a.footerIBtn2State, footerIBtn2State = _r === void 0 ? 'normal' : _r, footerIBtn2IconName = _a.footerIBtn2IconName, footerIBtn2IconFillType = _a.footerIBtn2IconFillType, _s = _a.footerIBtn2Type, footerIBtn2Type = _s === void 0 ? 'button' : _s, onClickFooterIBtn2 = _a.onClickFooterIBtn2, _t = _a.footerIBtn3State, footerIBtn3State = _t === void 0 ? 'normal' : _t, footerIBtn3IconName = _a.footerIBtn3IconName, footerIBtn3IconFillType = _a.footerIBtn3IconFillType, _u = _a.footerIBtn3Type, footerIBtn3Type = _u === void 0 ? 'button' : _u, footerIBtn3Accept = _a.footerIBtn3Accept, onClickFooterIBtn3 = _a.onClickFooterIBtn3;
58
+ var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'solid' : _b, _c = _a.headerMode, headerMode = _c === void 0 ? 'use' : _c, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, onClickCaptionText = _a.onClickCaptionText, _d = _a.titleStyleTheme, titleStyleTheme = _d === void 0 ? 'subTitleBold' : _d, _e = _a.headerDisplayType, headerDisplayType = _e === void 0 ? 'none' : _e, _f = _a.headerIBtn1IconName, headerIBtn1IconName = _f === void 0 ? 'ic_xmark' : _f, _g = _a.headerIBtn1IconFillType, headerIBtn1IconFillType = _g === void 0 ? 'line' : _g, headerIBtn2IconName = _a.headerIBtn2IconName, _h = _a.headerIBtn2IconFillType, headerIBtn2IconFillType = _h === void 0 ? 'line' : _h, headerIBtn3IconName = _a.headerIBtn3IconName, _j = _a.headerIBtn3IconFillType, headerIBtn3IconFillType = _j === void 0 ? 'line' : _j, headerIBtn4IconName = _a.headerIBtn4IconName, _k = _a.headerIBtn4IconFillType, headerIBtn4IconFillType = _k === void 0 ? 'line' : _k, children = _a.children, bodyChildren = _a.bodyChildren, _l = _a.textFieldState, textFieldState = _l === void 0 ? 'normal' : _l, textFieldHintText = _a.textFieldHintText, textFieldDefaultText = _a.textFieldDefaultText, textFieldMaxLength = _a.textFieldMaxLength, _m = _a.scrollVisibleType, scrollVisibleType = _m === void 0 ? 'moving' : _m, footerChildren = _a.footerChildren, _o = _a.submitIBtnState, submitIBtnState = _o === void 0 ? 'normal' : _o, bodyMBtnText = _a.bodyMBtnText, _p = _a.bodySpacingMode, bodySpacingMode = _p === void 0 ? 'none' : _p, onSubmit = _a.onSubmit, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1, onClickHeaderIBtn2 = _a.onClickHeaderIBtn2, onClickHeaderIBtn3 = _a.onClickHeaderIBtn3, onClickHeaderIBtn4 = _a.onClickHeaderIBtn4, submitIBtnIconName = _a.submitIBtnIconName, submitIBtnIconFillType = _a.submitIBtnIconFillType, _q = _a.footerIBtn1State, footerIBtn1State = _q === void 0 ? 'normal' : _q, footerIBtn1IconName = _a.footerIBtn1IconName, footerIBtn1IconFillType = _a.footerIBtn1IconFillType, _r = _a.footerIBtn1Type, footerIBtn1Type = _r === void 0 ? 'button' : _r, onClickFooterIBtn1 = _a.onClickFooterIBtn1, _s = _a.footerIBtn2State, footerIBtn2State = _s === void 0 ? 'normal' : _s, footerIBtn2IconName = _a.footerIBtn2IconName, footerIBtn2IconFillType = _a.footerIBtn2IconFillType, _t = _a.footerIBtn2Type, footerIBtn2Type = _t === void 0 ? 'button' : _t, onClickFooterIBtn2 = _a.onClickFooterIBtn2, _u = _a.footerIBtn3State, footerIBtn3State = _u === void 0 ? 'normal' : _u, footerIBtn3IconName = _a.footerIBtn3IconName, footerIBtn3IconFillType = _a.footerIBtn3IconFillType, _v = _a.footerIBtn3Type, footerIBtn3Type = _v === void 0 ? 'button' : _v, footerIBtn3Accept = _a.footerIBtn3Accept, onClickFooterIBtn3 = _a.onClickFooterIBtn3;
59
59
  var methods = (0, react_hook_form_1.useForm)({
60
60
  mode: 'onChange',
61
61
  defaultValues: {
62
62
  chat: ''
63
63
  }
64
64
  });
65
- var reset = methods.reset, handleSubmit = methods.handleSubmit, control = methods.control, _v = methods.formState, isValid = _v.isValid, isDirty = _v.isDirty, isSubmitSuccessful = _v.isSubmitSuccessful;
65
+ var reset = methods.reset, handleSubmit = methods.handleSubmit, control = methods.control, _w = methods.formState, isValid = _w.isValid, isDirty = _w.isDirty, isSubmitSuccessful = _w.isSubmitSuccessful;
66
66
  /**
67
67
  * @when 폼 제출에 성공했을 시
68
68
  * @expected 폼을 초기화합니다.
@@ -90,7 +90,7 @@ var ChatList = react_1.default.forwardRef(function (_a, ref) {
90
90
  var callBackAfterScrollToBottom = function () {
91
91
  reset();
92
92
  };
93
- return ((0, jsx_runtime_1.jsxs)(S_ChatList, __assign({ "x-pds-name": "ChatList", "x-pds-element-type": "component", "x-pds-device-type": "mobile", backgroundColor: baseBackgroundColors[colorTheme], id: "chatList" }, { children: [headerMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Header_1.default, { colorTheme: colorTheme, titleText: titleText, descText: descText, captionText: captionText, onClickCaptionText: onClickCaptionText, titleStyleTheme: titleStyleTheme, headerDisplayType: headerDisplayType, headerIBtn1IconName: headerIBtn1IconName, headerIBtn1IconFillType: headerIBtn1IconFillType, headerIBtn2IconName: headerIBtn2IconName, headerIBtn2IconFillType: headerIBtn2IconFillType, headerIBtn3IconName: headerIBtn3IconName, headerIBtn3IconFillType: headerIBtn3IconFillType, onClickHeaderIBtn1: onClickHeaderIBtn1, onClickHeaderIBtn2: onClickHeaderIBtn2, onClickHeaderIBtn3: onClickHeaderIBtn3 }), (0, jsx_runtime_1.jsx)(hybrid_1.Divider, { colorTheme: colorTheme === 'transparent' ? 'divider2' : 'none' })] })), (0, jsx_runtime_1.jsx)(Body_1.default, __assign({ scrollVisibleType: scrollVisibleType, isSubmitted: isSubmitSuccessful, bodyMBtnText: bodyMBtnText, bodySpacingMode: bodySpacingMode, callBackAfterScrollToBottom: callBackAfterScrollToBottom, bodyChildren: bodyChildren, ref: ref }, { children: children })), (0, jsx_runtime_1.jsx)(hybrid_1.Divider, { colorTheme: colorTheme === 'transparent' ? 'divider2' : 'none' }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, methods, { children: (0, jsx_runtime_1.jsx)("form", __assign({ onSubmit: handleSubmit(handleSubmitChat) }, { children: (0, jsx_runtime_1.jsx)(Footer_1.default, { colorTheme: colorTheme, textFieldDefaultText: textFieldDefaultText, textFieldHintText: textFieldHintText, textFieldState: textFieldState, textFieldMaxLength: textFieldMaxLength, footerChildren: footerChildren, isSubmitBtnActive: isSubmitButtonActive, submitIBtnIconName: submitIBtnIconName, submitIBtnIconFillType: submitIBtnIconFillType, footerIBtn1State: footerIBtn1State, footerIBtn1IconName: footerIBtn1IconName, footerIBtn1IconFillType: footerIBtn1IconFillType, footerIBtn1Type: footerIBtn1Type, onClickFooterIBtn1: onClickFooterIBtn1, footerIBtn2State: footerIBtn2State, footerIBtn2IconName: footerIBtn2IconName, footerIBtn2IconFillType: footerIBtn2IconFillType, footerIBtn2Type: footerIBtn2Type, onClickFooterIBtn2: onClickFooterIBtn2, footerIBtn3State: footerIBtn3State, footerIBtn3IconName: footerIBtn3IconName, footerIBtn3IconFillType: footerIBtn3IconFillType, footerIBtn3Type: footerIBtn3Type, footerIBtn3Accept: footerIBtn3Accept, onClickFooterIBtn3: onClickFooterIBtn3 }) })) })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" })] })));
93
+ return ((0, jsx_runtime_1.jsxs)(S_ChatList, __assign({ "x-pds-name": "ChatList", "x-pds-element-type": "component", "x-pds-device-type": "mobile", backgroundColor: baseBackgroundColors[colorTheme], id: "chatList" }, { children: [headerMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Header_1.default, { colorTheme: colorTheme, titleText: titleText, descText: descText, captionText: captionText, onClickCaptionText: onClickCaptionText, titleStyleTheme: titleStyleTheme, headerDisplayType: headerDisplayType, headerIBtn1IconName: headerIBtn1IconName, headerIBtn1IconFillType: headerIBtn1IconFillType, headerIBtn2IconName: headerIBtn2IconName, headerIBtn2IconFillType: headerIBtn2IconFillType, headerIBtn3IconName: headerIBtn3IconName, headerIBtn3IconFillType: headerIBtn3IconFillType, headerIBtn4IconName: headerIBtn4IconName, headerIBtn4IconFillType: headerIBtn4IconFillType, onClickHeaderIBtn1: onClickHeaderIBtn1, onClickHeaderIBtn2: onClickHeaderIBtn2, onClickHeaderIBtn3: onClickHeaderIBtn3, onClickHeaderIBtn4: onClickHeaderIBtn4 }), (0, jsx_runtime_1.jsx)(hybrid_1.Divider, { colorTheme: colorTheme === 'transparent' ? 'divider2' : 'none' })] })), (0, jsx_runtime_1.jsx)(Body_1.default, __assign({ scrollVisibleType: scrollVisibleType, isSubmitted: isSubmitSuccessful, bodyMBtnText: bodyMBtnText, bodySpacingMode: bodySpacingMode, callBackAfterScrollToBottom: callBackAfterScrollToBottom, bodyChildren: bodyChildren, ref: ref }, { children: children })), (0, jsx_runtime_1.jsx)(hybrid_1.Divider, { colorTheme: colorTheme === 'transparent' ? 'divider2' : 'none' }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, methods, { children: (0, jsx_runtime_1.jsx)("form", __assign({ onSubmit: handleSubmit(handleSubmitChat) }, { children: (0, jsx_runtime_1.jsx)(Footer_1.default, { colorTheme: colorTheme, textFieldDefaultText: textFieldDefaultText, textFieldHintText: textFieldHintText, textFieldState: textFieldState, textFieldMaxLength: textFieldMaxLength, footerChildren: footerChildren, isSubmitBtnActive: isSubmitButtonActive, submitIBtnIconName: submitIBtnIconName, submitIBtnIconFillType: submitIBtnIconFillType, footerIBtn1State: footerIBtn1State, footerIBtn1IconName: footerIBtn1IconName, footerIBtn1IconFillType: footerIBtn1IconFillType, footerIBtn1Type: footerIBtn1Type, onClickFooterIBtn1: onClickFooterIBtn1, footerIBtn2State: footerIBtn2State, footerIBtn2IconName: footerIBtn2IconName, footerIBtn2IconFillType: footerIBtn2IconFillType, footerIBtn2Type: footerIBtn2Type, onClickFooterIBtn2: onClickFooterIBtn2, footerIBtn3State: footerIBtn3State, footerIBtn3IconName: footerIBtn3IconName, footerIBtn3IconFillType: footerIBtn3IconFillType, footerIBtn3Type: footerIBtn3Type, footerIBtn3Accept: footerIBtn3Accept, onClickFooterIBtn3: onClickFooterIBtn3 }) })) })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" })] })));
94
94
  });
95
95
  var S_ChatList = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n"], ["\n background-color: ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n"])), function (_a) {
96
96
  var backgroundColor = _a.backgroundColor, theme = _a.theme;
package/dist/src/mobile/components/ChatList/Header.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
2
  import type { Props as ChatListProps } from './ChatList';
3
- type Props = Required<Pick<ChatListProps, 'colorTheme'>> & Pick<ChatListProps, 'titleText' | 'descText' | 'captionText' | 'titleStyleTheme' | 'headerDisplayType' | 'headerIBtn1IconName' | 'headerIBtn1IconFillType' | 'headerIBtn2IconName' | 'headerIBtn2IconFillType' | 'headerIBtn3IconName' | 'headerIBtn3IconFillType' | 'onClickHeaderIBtn1' | 'onClickHeaderIBtn2' | 'onClickHeaderIBtn3' | 'onClickCaptionText'>;
4
- declare function Header({ colorTheme, titleText, descText, captionText, onClickCaptionText, titleStyleTheme, headerDisplayType, headerIBtn1IconName, headerIBtn1IconFillType, headerIBtn2IconName, headerIBtn2IconFillType, headerIBtn3IconName, headerIBtn3IconFillType, onClickHeaderIBtn1, onClickHeaderIBtn2, onClickHeaderIBtn3 }: Props): JSX.Element;
3
+ type Props = Required<Pick<ChatListProps, 'colorTheme'>> & Pick<ChatListProps, 'titleText' | 'descText' | 'captionText' | 'titleStyleTheme' | 'headerDisplayType' | 'headerIBtn1IconName' | 'headerIBtn1IconFillType' | 'headerIBtn2IconName' | 'headerIBtn2IconFillType' | 'headerIBtn3IconName' | 'headerIBtn3IconFillType' | 'headerIBtn4IconName' | 'headerIBtn4IconFillType' | 'onClickHeaderIBtn1' | 'onClickHeaderIBtn2' | 'onClickHeaderIBtn3' | 'onClickHeaderIBtn4' | 'onClickCaptionText'>;
4
+ declare function Header({ colorTheme, titleText, descText, captionText, onClickCaptionText, titleStyleTheme, headerDisplayType, headerIBtn1IconName, headerIBtn1IconFillType, headerIBtn2IconName, headerIBtn2IconFillType, headerIBtn3IconName, headerIBtn3IconFillType, headerIBtn4IconName, headerIBtn4IconFillType, onClickHeaderIBtn1, onClickHeaderIBtn2, onClickHeaderIBtn3, onClickHeaderIBtn4 }: Props): JSX.Element;
5
5
  export default Header;
package/dist/src/mobile/components/ChatList/Header.js CHANGED
@@ -34,8 +34,11 @@ var iconColors = {
34
34
  transparent: 'ui_cpnt_button_icon_white'
35
35
  };
36
36
  function Header(_a) {
37
- var colorTheme = _a.colorTheme, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, onClickCaptionText = _a.onClickCaptionText, titleStyleTheme = _a.titleStyleTheme, headerDisplayType = _a.headerDisplayType, headerIBtn1IconName = _a.headerIBtn1IconName, headerIBtn1IconFillType = _a.headerIBtn1IconFillType, headerIBtn2IconName = _a.headerIBtn2IconName, headerIBtn2IconFillType = _a.headerIBtn2IconFillType, headerIBtn3IconName = _a.headerIBtn3IconName, headerIBtn3IconFillType = _a.headerIBtn3IconFillType, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1, onClickHeaderIBtn2 = _a.onClickHeaderIBtn2, onClickHeaderIBtn3 = _a.onClickHeaderIBtn3;
38
- return ((0, jsx_runtime_1.jsxs)(S_HeaderContentWrapper, { children: [(0, jsx_runtime_1.jsxs)(S_HeaderLeftBox, { children: [titleText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: titleTextColors[colorTheme], wordBreak: "break_all" })), descText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: descText, styleTheme: "body2Regular", colorTheme: colorTheme === 'solid' ? 'sysTextSecondary' : 'sysTextWhite', colorOverride: colorTheme === 'translucent' ? 'ui_cpnt_list_text_caption_02' : undefined, wordBreak: "break_all" })] })), captionText && ((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)(S_CaptionTextWrapper, __assign({ onClick: onClickCaptionText }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: colorTheme === 'solid' ? 'sysTextTertiary' : 'sysTextWhite', colorOverride: colorTheme === 'translucent' ? 'ui_cpnt_list_text_caption_03' : undefined, wordBreak: "break_all" }) }))] }))] }), headerDisplayType === 'ibtn3' && headerIBtn3IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: headerIBtn3IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[colorTheme], iconSize: 24, iconFillType: headerIBtn3IconFillType, onClick: onClickHeaderIBtn3 })), (headerDisplayType === 'ibtn2' || headerDisplayType === 'ibtn3') && headerIBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: headerIBtn2IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[colorTheme], iconSize: 24, iconFillType: headerIBtn2IconFillType, onClick: onClickHeaderIBtn2 })), headerDisplayType !== 'none' && headerIBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: headerIBtn1IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[colorTheme], iconSize: 24, iconFillType: headerIBtn1IconFillType, onClick: onClickHeaderIBtn1 }))] }));
37
+ var colorTheme = _a.colorTheme, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, onClickCaptionText = _a.onClickCaptionText, titleStyleTheme = _a.titleStyleTheme, headerDisplayType = _a.headerDisplayType, headerIBtn1IconName = _a.headerIBtn1IconName, headerIBtn1IconFillType = _a.headerIBtn1IconFillType, headerIBtn2IconName = _a.headerIBtn2IconName, headerIBtn2IconFillType = _a.headerIBtn2IconFillType, headerIBtn3IconName = _a.headerIBtn3IconName, headerIBtn3IconFillType = _a.headerIBtn3IconFillType, headerIBtn4IconName = _a.headerIBtn4IconName, headerIBtn4IconFillType = _a.headerIBtn4IconFillType, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1, onClickHeaderIBtn2 = _a.onClickHeaderIBtn2, onClickHeaderIBtn3 = _a.onClickHeaderIBtn3, onClickHeaderIBtn4 = _a.onClickHeaderIBtn4;
38
+ return ((0, jsx_runtime_1.jsxs)(S_HeaderContentWrapper, { children: [(0, jsx_runtime_1.jsxs)(S_HeaderLeftBox, { children: [titleText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: titleTextColors[colorTheme], wordBreak: "break_all" })), descText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: descText, styleTheme: "body2Regular", colorTheme: colorTheme === 'solid' ? 'sysTextSecondary' : 'sysTextWhite', colorOverride: colorTheme === 'translucent' ? 'ui_cpnt_list_text_caption_02' : undefined, wordBreak: "break_all" })] })), captionText && ((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)(S_CaptionTextWrapper, __assign({ onClick: onClickCaptionText }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: colorTheme === 'solid' ? 'sysTextTertiary' : 'sysTextWhite', colorOverride: colorTheme === 'translucent' ? 'ui_cpnt_list_text_caption_03' : undefined, wordBreak: "break_all" }) }))] }))] }), headerDisplayType === 'ibtn4' && headerIBtn4IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: headerIBtn4IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[colorTheme], iconSize: 24, iconFillType: headerIBtn4IconFillType, onClick: onClickHeaderIBtn4 })), (headerDisplayType === 'ibtn3' || headerDisplayType === 'ibtn4') && headerIBtn3IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: headerIBtn3IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[colorTheme], iconSize: 24, iconFillType: headerIBtn3IconFillType, onClick: onClickHeaderIBtn3 })), (headerDisplayType === 'ibtn2' ||
39
+ headerDisplayType === 'ibtn3' ||
40
+ headerDisplayType === 'ibtn4') &&
41
+ headerIBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: headerIBtn2IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[colorTheme], iconSize: 24, iconFillType: headerIBtn2IconFillType, onClick: onClickHeaderIBtn2 })), headerDisplayType !== 'none' && headerIBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: headerIBtn1IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[colorTheme], iconSize: 24, iconFillType: headerIBtn1IconFillType, onClick: onClickHeaderIBtn1 }))] }));
39
42
  }
40
43
  var S_HeaderContentWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"], ["\n align-items: center;\n display: flex;\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n"])), function (_a) {
41
44
  var theme = _a.theme;
package/dist/src/sub/DynamicLayout/sectionActionTypes.d.ts CHANGED
@@ -79,6 +79,13 @@ type ActionHandlerPayload = {
79
79
  '@CUSTOMSECTION/ESCAPE_ONE_FROM_GROUP': {
80
80
  id: string;
81
81
  };
82
+ '@CUSTOMSECTION/ON_DROP_FROM_OUTSIDE': {
83
+ layout: Layout;
84
+ layoutItem: LayoutItem;
85
+ };
86
+ '@CUSTOMSECTION/ON_DROP_DRAG_OVER': {
87
+ e: any;
88
+ };
82
89
  };
83
90
  type ActionMap<M extends {
84
91
  [index: string]: any;
package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import type { ISection } from '../../types';
3
- import type { Layout } from 'publ-echo/dist/lib/GridLayoutEditor/types';
3
+ import type { Layout } from 'publ-echo-test/dist/lib/GridLayoutEditor/types';
4
4
  export type LayoutsType = {
5
5
  sm: Layout;
6
6
  lg: Layout;
package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.js CHANGED
@@ -52,8 +52,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
52
52
  Object.defineProperty(exports, "__esModule", { value: true });
53
53
  exports.S_gleStyles = void 0;
54
54
  var jsx_runtime_1 = require("react/jsx-runtime");
55
- var publ_echo_1 = require("publ-echo");
56
- var ReactGridLayout_1 = __importDefault(require("publ-echo/dist/lib/GridLayoutEditor/ReactGridLayout"));
55
+ var publ_echo_test_1 = require("publ-echo-test");
56
+ var ReactGridLayout_1 = __importDefault(require("publ-echo-test/dist/lib/GridLayoutEditor/ReactGridLayout"));
57
57
  var react_1 = __importStar(require("react"));
58
58
  var ErrorBoundary_1 = require("../../../DynamicLayout/components/Section/ErrorBoundary");
59
59
  var dynamicLayoutContext_1 = require("../../../DynamicLayout/dynamicLayoutContext");
@@ -67,8 +67,8 @@ var useGroupDrag_2 = require("./hooks/useGroupDrag/useGroupDrag");
67
67
  var utils_1 = require("./hooks/useGroupDrag/utils");
68
68
  var util_1 = require("./util");
69
69
  var parseSectionPadding_1 = __importDefault(require("./util/layoutPropParsers/parseSectionPadding"));
70
- var WidthProvidedRGL = (0, publ_echo_1.WidthProvider)(ReactGridLayout_1.default);
71
- var Responsive = (0, publ_echo_1.WidthProvider)(publ_echo_1.ResponsiveGridEditor);
70
+ var WidthProvidedRGL = (0, publ_echo_test_1.WidthProvider)(ReactGridLayout_1.default);
71
+ var Responsive = (0, publ_echo_test_1.WidthProvider)(publ_echo_test_1.ResponsiveGridEditor);
72
72
  var GRID_CELL_MIN = 24;
73
73
  var DESKTOP_GRID_COLS = 24;
74
74
  var MOBILE_GRID_COLS = 8;
@@ -445,18 +445,48 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
445
445
  }
446
446
  return false;
447
447
  })();
448
+ var _j = (0, react_1.useState)(), droppingItem = _j[0], setDroppingItem = _j[1];
449
+ var onDrop = function (layout, layoutItem, _event) {
450
+ // const data = _event.dataTransfer.getData('text/plain');
451
+ // setDroppingItem(data);
452
+ // alert(`Dropped element props:\n${JSON.stringify(layoutItem, ['x', 'y', 'w', 'h'], 2)}`);
453
+ if (!isEditMode) {
454
+ return;
455
+ }
456
+ sectionActionHandler &&
457
+ sectionActionHandler({
458
+ type: '@CUSTOMSECTION/ON_DROP_FROM_OUTSIDE',
459
+ payload: {
460
+ layout: layout,
461
+ layoutItem: layoutItem
462
+ }
463
+ });
464
+ };
465
+ var onDropDragOver = function (e) {
466
+ if (!sectionActionHandler) {
467
+ return null;
468
+ }
469
+ // return sectionActionHandler({
470
+ // type: '@CUSTOMSECTION/ON_DROP_FROM_OUTSIDE',
471
+ // payload: {
472
+ // e
473
+ // }
474
+ // });
475
+ return null;
476
+ };
448
477
  return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsxs)(exports.S_gleStyles, { children: [showSectionHiddenCover && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_SectionWrapper, __assign({ ref: gleRef, "x-dlayout-section-type": "NO_NAME", onClick: onClickSection }, { children: (0, jsx_runtime_1.jsx)(components_1.CustomSection, __assign({}, props, { isMobile: isMobile, overrideStyles: {
449
478
  minHeight: customSectionStyles.minHeight,
450
479
  paddingTop: padding.top,
451
480
  paddingBottom: padding.bottom,
452
481
  paddingRight: padding.right,
453
482
  paddingLeft: padding.left
454
- } }, { children: (0, jsx_runtime_1.jsx)(Responsive, __assign({ innerRef: innerRef, allowOverlap: true, layouts: layouts, resizeHandles: ['nw', 'e', 'n', 'ne', 's', 'se', 'sw', 'w'], breakpoints: breakpoints, breakpoint: breakpoint, cols: { lg: 24, sm: 8 }, rowHeight: rowHeight, margin: [10, 10], style: {
483
+ } }, { children: (0, jsx_runtime_1.jsx)(Responsive, __assign({ innerRef: innerRef, allowOverlap: true, isDroppable: true, layouts: layouts, resizeHandles: ['nw', 'e', 'n', 'ne', 's', 'se', 'sw', 'w'], breakpoints: breakpoints, breakpoint: breakpoint, cols: { lg: 24, sm: 8 }, rowHeight: rowHeight, margin: [10, 10], style: {
455
484
  width: customSectionStyles.width,
456
485
  maxWidth: customSectionStyles.maxWidth,
457
486
  minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX,
458
487
  fontSize: "".concat(baseFontSize, "px")
459
- }, onLayoutChange: onLayoutChange, onDragStart: onDragStart, onDragStop: onDragStop, onResizeStop: onResizeStop,
488
+ }, onLayoutChange: onLayoutChange, onDragStart: onDragStart, onDragStop: onDragStop, onDrop: onDrop, onResizeStop: onResizeStop, onDropDragOver: onDropDragOver,
489
+ // droppingItem={droppingItem}
460
490
  // onFitToContent={onAutoFitContent}
461
491
  onWidthChange: onWidthChange, minNbRow: rows, isDraggable: isEditMode, isResizable: isEditMode }, { children: keepSimilarOrderToPreventRerender(layouts[layoutByDevice]).map(function (each, index) {
462
492
  var _a;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web-test",
3
- "version": "2.5.27",
3
+ "version": "2.5.29",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
@@ -23,6 +23,7 @@
23
23
  "lottie-react": "^2.3.1",
24
24
  "nuka-carousel": "^4.8.4",
25
25
  "publ-echo": "^0.0.45",
26
+ "publ-echo-test": "^0.0.38",
26
27
  "react-hook-form": "^7.28.1",
27
28
  "react-i18next": "^11.12.0",
28
29
  "react-router-dom": "^5.2.0",
package/release-note.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v2.2.97]
2
+ ## [v2.2.99]
3
3
  ## daily|https://design.storybook.publ.biz/
4
4
 
5
5
  ### 업데이트 사항
6
- * 컬러키 업데이트
6
+ * Echo를 0045 버전으로 롤백