pds-dev-kit-web 1.4.42 → 1.4.43

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 (7) hide show
  1. package/dist/src/desktop/components/BasicChatListItem/BasicChatListItem.js +15 -15
  2. package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.js +26 -26
  3. package/dist/src/desktop/components/UserDesktopNavBar/UserDesktopNavBar.js +4 -1
  4. package/dist/src/mobile/components/BasicChatListItem/BasicChatListItem.js +15 -15
  5. package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.js +26 -26
  6. package/package.json +1 -1
  7. package/release-note.md +8 -6
package/dist/src/desktop/components/BasicChatListItem/BasicChatListItem.js CHANGED
@@ -71,26 +71,19 @@ function BasicChatListItem(_a) {
71
71
  setIsContextMenuOpen(false);
72
72
  };
73
73
  return (react_1.default.createElement(react_1.default.Fragment, null,
74
- react_1.default.createElement(S_BasicChatListItem, { colorTheme: colorTheme, hoverMode: hoverMode },
74
+ react_1.default.createElement(S_BasicChatListItem, { colorTheme: colorTheme },
75
75
  leftImageMode === 'use' && (react_1.default.createElement(S_ImageViewWrapper, null,
76
76
  react_1.default.createElement(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: "responsive" }))),
77
77
  react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColors[colorTheme] }),
78
78
  react_1.default.createElement(S_ContentTextWrapper, null,
79
79
  react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary", wordBreak: "break_all" })),
80
- hoverMode === 'use' && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, ref: contextMenuRef },
80
+ hoverMode === 'use' && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef },
81
81
  react_1.default.createElement(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 }))),
82
82
  react_1.default.createElement(Popup_1.PopupProvider, null,
83
83
  react_1.default.createElement(Popup_1.Popup, { targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "v-auto", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } },
84
84
  react_1.default.createElement(ContextMenu_1.ContextMenu, null, contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return (react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { key: el.value, option: el, onClick: handleContextMenuItemClick, state: contextMenuState })); })))))));
85
85
  }
86
- var S_SeeMoreButton = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-left: ", ";\n position: relative;\n visibility: ", ";\n"], ["\n margin-left: ", ";\n position: relative;\n visibility: ", ";\n"])), function (_a) {
87
- var theme = _a.theme;
88
- return theme.spacing.spacingA;
89
- }, function (_a) {
90
- var isContextMenuOpen = _a.isContextMenuOpen;
91
- return (isContextMenuOpen ? 'visible' : 'hidden');
92
- });
93
- var S_BasicChatListItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __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 :hover {\n ", " {\n visibility: ", ";\n }\n }\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\n :hover {\n ", " {\n visibility: ", ";\n }\n }\n"])), function (_a) {
86
+ 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) {
94
87
  var colorTheme = _a.colorTheme, theme = _a.theme;
95
88
  return colorTheme && theme[backgroundColorTheme[colorTheme]];
96
89
  }, function (_a) {
@@ -105,17 +98,24 @@ var S_BasicChatListItem = styled_components_1.default.div(templateObject_2 || (t
105
98
  }, function (_a) {
106
99
  var theme = _a.theme;
107
100
  return theme.spacing.spacingA;
108
- }, S_SeeMoreButton, function (_a) {
109
- var hoverMode = _a.hoverMode;
110
- return hoverMode === 'use' && 'visible';
111
101
  });
112
- var S_ImageViewWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 24px;\n margin-right: ", ";\n min-width: 24px;\n width: 24px;\n"], ["\n height: 24px;\n margin-right: ", ";\n min-width: 24px;\n width: 24px;\n"])), function (_a) {
102
+ var S_ImageViewWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 24px;\n margin-right: ", ";\n min-width: 24px;\n width: 24px;\n"], ["\n height: 24px;\n margin-right: ", ";\n min-width: 24px;\n width: 24px;\n"])), function (_a) {
113
103
  var theme = _a.theme;
114
104
  return theme.spacing.spacingB;
115
105
  });
116
- var S_ContentTextWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n flex: 1;\n margin-left: ", ";\n"], ["\n flex: 1;\n margin-left: ", ";\n"])), function (_a) {
106
+ var S_ContentTextWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex: 1;\n margin-left: ", ";\n"], ["\n flex: 1;\n margin-left: ", ";\n"])), function (_a) {
117
107
  var theme = _a.theme;
118
108
  return theme.spacing.spacingC;
119
109
  });
110
+ var S_SeeMoreButton = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin-left: ", ";\n position: relative;\n opacity: ", ";\n\n ", ":hover & {\n opacity: ", ";\n }\n"], ["\n margin-left: ", ";\n position: relative;\n opacity: ", ";\n\n ", ":hover & {\n opacity: ", ";\n }\n"])), function (_a) {
111
+ var theme = _a.theme;
112
+ return theme.spacing.spacingA;
113
+ }, function (_a) {
114
+ var isContextMenuOpen = _a.isContextMenuOpen;
115
+ return (isContextMenuOpen ? '1' : '0');
116
+ }, S_BasicChatListItem, function (_a) {
117
+ var hoverMode = _a.hoverMode;
118
+ return hoverMode === 'use' && '1';
119
+ });
120
120
  exports.default = BasicChatListItem;
121
121
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.js CHANGED
@@ -83,7 +83,7 @@ function ChatBubbleListItem(_a) {
83
83
  setIsContextMenuOpen(false);
84
84
  };
85
85
  return (react_1.default.createElement(react_1.default.Fragment, null,
86
- react_1.default.createElement(S_ChatBubbleListItem, { hoverMode: hoverMode, isMy: isMy, imageMode: imageMode },
86
+ react_1.default.createElement(S_ChatBubbleListItem, { isMy: isMy, imageMode: imageMode },
87
87
  imageMode === 'use' && (react_1.default.createElement(react_1.default.Fragment, null, isTail && !isMy ? (react_1.default.createElement(S_ImageViewWrapper, { isSeller: isSeller },
88
88
  react_1.default.createElement(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: 40 }))) : (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })))),
89
89
  react_1.default.createElement(S_RightBox, null,
@@ -99,62 +99,62 @@ function ChatBubbleListItem(_a) {
99
99
  timeMode === 'use' && timeText && !isMy && (react_1.default.createElement(S_TimeWrapper, null,
100
100
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
101
101
  react_1.default.createElement(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })))),
102
- hoverMode === 'use' && !isMy && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, ref: contextMenuRef },
102
+ hoverMode === 'use' && !isMy && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef },
103
103
  react_1.default.createElement(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 }))))),
104
104
  react_1.default.createElement(Popup_1.PopupProvider, null,
105
105
  react_1.default.createElement(Popup_1.Popup, { targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "v-auto", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } },
106
106
  react_1.default.createElement(ContextMenu_1.ContextMenu, null, contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return (react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { key: el.value, option: el, onClick: handleContextMenuItemClick, state: contextMenuState })); })))))));
107
107
  }
108
- var S_SeeMoreButton = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n box-sizing: border-box;\n width: 48px;\n height: 24px;\n min-width: 48px;\n padding-right: ", ";\n margin-top: ", ";\n position: relative;\n visibility: ", ";\n display: flex;\n justify-content: right;\n"], ["\n box-sizing: border-box;\n width: 48px;\n height: 24px;\n min-width: 48px;\n padding-right: ", ";\n margin-top: ", ";\n position: relative;\n visibility: ", ";\n display: flex;\n justify-content: right;\n"])), function (_a) {
109
- var theme = _a.theme;
110
- return theme.spacing.spacingB;
111
- }, function (_a) {
112
- var theme = _a.theme;
113
- return theme.spacing.spacingB;
114
- }, function (_a) {
115
- var isContextMenuOpen = _a.isContextMenuOpen;
116
- return (isContextMenuOpen ? 'visible' : 'hidden');
117
- });
118
- var MyChatBubbleListItem = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin-right: ", ";\n"], ["\n margin-right: ", ";\n"])), function (_a) {
108
+ var MyChatBubbleListItem = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-right: ", ";\n"], ["\n margin-right: ", ";\n"])), function (_a) {
119
109
  var theme = _a.theme;
120
110
  return theme.spacing.spacingA;
121
111
  });
122
- var NoImageChatBubbleListItem = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-left: ", ";\n"], ["\n margin-left: ", ";\n"])), function (_a) {
112
+ var NoImageChatBubbleListItem = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin-left: ", ";\n"], ["\n margin-left: ", ";\n"])), function (_a) {
123
113
  var theme = _a.theme;
124
114
  return theme.spacing.spacingA;
125
115
  });
126
- var S_ChatBubbleListItem = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n height: fit-content;\n max-width: 100%;\n\n :hover {\n ", " {\n visibility: ", ";\n }\n }\n\n ", ";\n ", ";\n"], ["\n display: flex;\n height: fit-content;\n max-width: 100%;\n\n :hover {\n ", " {\n visibility: ", ";\n }\n }\n\n ", ";\n ", ";\n"])), S_SeeMoreButton, function (_a) {
127
- var hoverMode = _a.hoverMode;
128
- return hoverMode === 'use' && 'visible';
129
- }, function (_a) {
116
+ var S_ChatBubbleListItem = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n height: fit-content;\n max-width: 100%;\n\n ", ";\n ", ";\n"], ["\n display: flex;\n height: fit-content;\n max-width: 100%;\n\n ", ";\n ", ";\n"])), function (_a) {
130
117
  var isMy = _a.isMy;
131
118
  return isMy && MyChatBubbleListItem;
132
119
  }, function (_a) {
133
120
  var imageMode = _a.imageMode;
134
121
  return imageMode === 'none' && NoImageChatBubbleListItem;
135
122
  });
136
- var ImageViewSeller = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n box-shadow: 0 0 0 2px ", " inset;\n"], ["\n box-shadow: 0 0 0 2px ", " inset;\n"])), function (_a) {
123
+ var ImageViewSeller = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n box-shadow: 0 0 0 2px ", " inset;\n"], ["\n box-shadow: 0 0 0 2px ", " inset;\n"])), function (_a) {
137
124
  var theme = _a.theme;
138
125
  return theme.ui_profile_image_border_brandprimary;
139
126
  });
140
- var ImageViewDefault = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n box-shadow: 0 0 0 1px ", " inset;\n"], ["\n box-shadow: 0 0 0 1px ", " inset;\n"])), function (_a) {
127
+ var ImageViewDefault = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n box-shadow: 0 0 0 1px ", " inset;\n"], ["\n box-shadow: 0 0 0 1px ", " inset;\n"])), function (_a) {
141
128
  var theme = _a.theme;
142
129
  return theme.ui_profile_image_border;
143
130
  });
144
- var S_ImageViewWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n border-radius: 50%;\n height: fit-content;\n min-width: fit-content;\n width: fit-content;\n margin-right: ", ";\n position: relative;\n\n &::after {\n content: '';\n box-sizing: border-box;\n border-radius: 50%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n ", ";\n }\n"], ["\n border-radius: 50%;\n height: fit-content;\n min-width: fit-content;\n width: fit-content;\n margin-right: ", ";\n position: relative;\n\n &::after {\n content: '';\n box-sizing: border-box;\n border-radius: 50%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n ", ";\n }\n"])), function (_a) {
131
+ var S_ImageViewWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n border-radius: 50%;\n height: fit-content;\n min-width: fit-content;\n width: fit-content;\n margin-right: ", ";\n position: relative;\n\n &::after {\n content: '';\n box-sizing: border-box;\n border-radius: 50%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n ", ";\n }\n"], ["\n border-radius: 50%;\n height: fit-content;\n min-width: fit-content;\n width: fit-content;\n margin-right: ", ";\n position: relative;\n\n &::after {\n content: '';\n box-sizing: border-box;\n border-radius: 50%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n ", ";\n }\n"])), function (_a) {
145
132
  var theme = _a.theme;
146
133
  return theme.spacing.spacingB;
147
134
  }, function (_a) {
148
135
  var isSeller = _a.isSeller;
149
136
  return (isSeller ? ImageViewSeller : ImageViewDefault);
150
137
  });
151
- var S_RightBox = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
152
- 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"])));
153
- var MyChatBubble = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n justify-content: flex-end;\n"], ["\n justify-content: flex-end;\n"])));
154
- var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n flex: 1;\n display: flex;\n\n ", ";\n"], ["\n flex: 1;\n display: flex;\n\n ", ";\n"])), function (_a) {
138
+ var S_RightBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
139
+ var S_ChatBubbleBox = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
140
+ var MyChatBubble = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n justify-content: flex-end;\n"], ["\n justify-content: flex-end;\n"])));
141
+ var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n flex: 1;\n display: flex;\n\n ", ";\n"], ["\n flex: 1;\n display: flex;\n\n ", ";\n"])), function (_a) {
155
142
  var isMy = _a.isMy;
156
143
  return isMy && MyChatBubble;
157
144
  });
158
- var S_TimeWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n align-self: flex-end;\n display: flex;\n"], ["\n align-self: flex-end;\n display: flex;\n"])));
145
+ var S_TimeWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n align-self: flex-end;\n display: flex;\n"], ["\n align-self: flex-end;\n display: flex;\n"])));
146
+ var S_SeeMoreButton = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n width: 48px;\n height: 24px;\n min-width: 48px;\n padding-right: ", ";\n margin-top: ", ";\n position: relative;\n opacity: ", ";\n justify-content: right;\n\n ", ":hover & {\n opacity: ", ";\n }\n"], ["\n box-sizing: border-box;\n display: flex;\n width: 48px;\n height: 24px;\n min-width: 48px;\n padding-right: ", ";\n margin-top: ", ";\n position: relative;\n opacity: ", ";\n justify-content: right;\n\n ", ":hover & {\n opacity: ", ";\n }\n"])), function (_a) {
147
+ var theme = _a.theme;
148
+ return theme.spacing.spacingB;
149
+ }, function (_a) {
150
+ var theme = _a.theme;
151
+ return theme.spacing.spacingB;
152
+ }, function (_a) {
153
+ var isContextMenuOpen = _a.isContextMenuOpen;
154
+ return (isContextMenuOpen ? '1' : '0');
155
+ }, S_ChatBubbleListItem, function (_a) {
156
+ var hoverMode = _a.hoverMode;
157
+ return hoverMode === 'use' && '1';
158
+ });
159
159
  exports.default = ChatBubbleListItem;
160
160
  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;
package/dist/src/desktop/components/UserDesktopNavBar/UserDesktopNavBar.js CHANGED
@@ -108,6 +108,9 @@ var S_VisiblePAppWrapper = styled_components_1.default.div(templateObject_10 ||
108
108
  var theme = _a.theme;
109
109
  return theme.spacing.spacingE;
110
110
  });
111
- var S_ImageViewWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n height: 32px;\n"], ["\n height: 32px;\n"])));
111
+ var S_ImageViewWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n border-radius: 50%;\n cursor: ", ";\n height: 32px;\n"], ["\n border-radius: 50%;\n cursor: ", ";\n height: 32px;\n"])), function (_a) {
112
+ var onClick = _a.onClick;
113
+ return (onClick ? 'pointer' : 'default');
114
+ });
112
115
  exports.default = UserDesktopNavBar;
113
116
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
package/dist/src/mobile/components/BasicChatListItem/BasicChatListItem.js CHANGED
@@ -71,26 +71,19 @@ function BasicChatListItem(_a) {
71
71
  setIsContextMenuOpen(false);
72
72
  };
73
73
  return (react_1.default.createElement(react_1.default.Fragment, null,
74
- react_1.default.createElement(S_BasicChatListItem, { colorTheme: colorTheme, hoverMode: hoverMode },
74
+ react_1.default.createElement(S_BasicChatListItem, { colorTheme: colorTheme },
75
75
  leftImageMode === 'use' && (react_1.default.createElement(S_ImageViewWrapper, null,
76
76
  react_1.default.createElement(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: "responsive" }))),
77
77
  react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColors[colorTheme] }),
78
78
  react_1.default.createElement(S_ContentTextWrapper, null,
79
79
  react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary", wordBreak: "break_all" })),
80
- hoverMode === 'use' && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, ref: contextMenuRef },
80
+ hoverMode === 'use' && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef },
81
81
  react_1.default.createElement(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 }))),
82
82
  react_1.default.createElement(Popup_1.PopupProvider, null,
83
83
  react_1.default.createElement(Popup_1.Popup, { targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "v-auto", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } },
84
84
  react_1.default.createElement(ContextMenu_1.ContextMenu, null, contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return (react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { key: el.value, option: el, onClick: handleContextMenuItemClick, state: contextMenuState })); })))))));
85
85
  }
86
- var S_SeeMoreButton = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-left: ", ";\n position: relative;\n visibility: ", ";\n"], ["\n margin-left: ", ";\n position: relative;\n visibility: ", ";\n"])), function (_a) {
87
- var theme = _a.theme;
88
- return theme.spacing.spacingA;
89
- }, function (_a) {
90
- var isContextMenuOpen = _a.isContextMenuOpen;
91
- return (isContextMenuOpen ? 'visible' : 'hidden');
92
- });
93
- var S_BasicChatListItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __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 :hover {\n ", " {\n visibility: ", ";\n }\n }\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\n :hover {\n ", " {\n visibility: ", ";\n }\n }\n"])), function (_a) {
86
+ 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) {
94
87
  var colorTheme = _a.colorTheme, theme = _a.theme;
95
88
  return colorTheme && theme[backgroundColorTheme[colorTheme]];
96
89
  }, function (_a) {
@@ -105,17 +98,24 @@ var S_BasicChatListItem = styled_components_1.default.div(templateObject_2 || (t
105
98
  }, function (_a) {
106
99
  var theme = _a.theme;
107
100
  return theme.spacing.spacingA;
108
- }, S_SeeMoreButton, function (_a) {
109
- var hoverMode = _a.hoverMode;
110
- return hoverMode === 'use' && 'visible';
111
101
  });
112
- var S_ImageViewWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 24px;\n margin-right: ", ";\n min-width: 24px;\n width: 24px;\n"], ["\n height: 24px;\n margin-right: ", ";\n min-width: 24px;\n width: 24px;\n"])), function (_a) {
102
+ var S_ImageViewWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 24px;\n margin-right: ", ";\n min-width: 24px;\n width: 24px;\n"], ["\n height: 24px;\n margin-right: ", ";\n min-width: 24px;\n width: 24px;\n"])), function (_a) {
113
103
  var theme = _a.theme;
114
104
  return theme.spacing.spacingB;
115
105
  });
116
- var S_ContentTextWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n flex: 1;\n margin-left: ", ";\n"], ["\n flex: 1;\n margin-left: ", ";\n"])), function (_a) {
106
+ var S_ContentTextWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex: 1;\n margin-left: ", ";\n"], ["\n flex: 1;\n margin-left: ", ";\n"])), function (_a) {
117
107
  var theme = _a.theme;
118
108
  return theme.spacing.spacingC;
119
109
  });
110
+ var S_SeeMoreButton = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin-left: ", ";\n position: relative;\n opacity: ", ";\n\n ", ":hover & {\n opacity: ", ";\n }\n"], ["\n margin-left: ", ";\n position: relative;\n opacity: ", ";\n\n ", ":hover & {\n opacity: ", ";\n }\n"])), function (_a) {
111
+ var theme = _a.theme;
112
+ return theme.spacing.spacingA;
113
+ }, function (_a) {
114
+ var isContextMenuOpen = _a.isContextMenuOpen;
115
+ return (isContextMenuOpen ? '1' : '0');
116
+ }, S_BasicChatListItem, function (_a) {
117
+ var hoverMode = _a.hoverMode;
118
+ return hoverMode === 'use' && '1';
119
+ });
120
120
  exports.default = BasicChatListItem;
121
121
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.js CHANGED
@@ -83,7 +83,7 @@ function ChatBubbleListItem(_a) {
83
83
  setIsContextMenuOpen(false);
84
84
  };
85
85
  return (react_1.default.createElement(react_1.default.Fragment, null,
86
- react_1.default.createElement(S_ChatBubbleListItem, { hoverMode: hoverMode, isMy: isMy, imageMode: imageMode },
86
+ react_1.default.createElement(S_ChatBubbleListItem, { isMy: isMy, imageMode: imageMode },
87
87
  imageMode === 'use' && (react_1.default.createElement(react_1.default.Fragment, null, isTail && !isMy ? (react_1.default.createElement(S_ImageViewWrapper, { isSeller: isSeller },
88
88
  react_1.default.createElement(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: 40 }))) : (react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })))),
89
89
  react_1.default.createElement(S_RightBox, null,
@@ -99,62 +99,62 @@ function ChatBubbleListItem(_a) {
99
99
  timeMode === 'use' && timeText && !isMy && (react_1.default.createElement(S_TimeWrapper, null,
100
100
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
101
101
  react_1.default.createElement(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })))),
102
- hoverMode === 'use' && !isMy && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, ref: contextMenuRef },
102
+ hoverMode === 'use' && !isMy && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef },
103
103
  react_1.default.createElement(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 }))))),
104
104
  react_1.default.createElement(Popup_1.PopupProvider, null,
105
105
  react_1.default.createElement(Popup_1.Popup, { targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "v-auto", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } },
106
106
  react_1.default.createElement(ContextMenu_1.ContextMenu, null, contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return (react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { key: el.value, option: el, onClick: handleContextMenuItemClick, state: contextMenuState })); })))))));
107
107
  }
108
- var S_SeeMoreButton = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n box-sizing: border-box;\n width: 48px;\n height: 24px;\n min-width: 48px;\n padding-right: ", ";\n margin-top: ", ";\n position: relative;\n visibility: ", ";\n display: flex;\n justify-content: right;\n"], ["\n box-sizing: border-box;\n width: 48px;\n height: 24px;\n min-width: 48px;\n padding-right: ", ";\n margin-top: ", ";\n position: relative;\n visibility: ", ";\n display: flex;\n justify-content: right;\n"])), function (_a) {
109
- var theme = _a.theme;
110
- return theme.spacing.spacingB;
111
- }, function (_a) {
112
- var theme = _a.theme;
113
- return theme.spacing.spacingB;
114
- }, function (_a) {
115
- var isContextMenuOpen = _a.isContextMenuOpen;
116
- return (isContextMenuOpen ? 'visible' : 'hidden');
117
- });
118
- var MyChatBubbleListItem = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin-right: ", ";\n"], ["\n margin-right: ", ";\n"])), function (_a) {
108
+ var MyChatBubbleListItem = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-right: ", ";\n"], ["\n margin-right: ", ";\n"])), function (_a) {
119
109
  var theme = _a.theme;
120
110
  return theme.spacing.spacingA;
121
111
  });
122
- var NoImageChatBubbleListItem = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-left: ", ";\n"], ["\n margin-left: ", ";\n"])), function (_a) {
112
+ var NoImageChatBubbleListItem = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin-left: ", ";\n"], ["\n margin-left: ", ";\n"])), function (_a) {
123
113
  var theme = _a.theme;
124
114
  return theme.spacing.spacingA;
125
115
  });
126
- var S_ChatBubbleListItem = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n height: fit-content;\n max-width: 100%;\n\n :hover {\n ", " {\n visibility: ", ";\n }\n }\n\n ", ";\n ", ";\n"], ["\n display: flex;\n height: fit-content;\n max-width: 100%;\n\n :hover {\n ", " {\n visibility: ", ";\n }\n }\n\n ", ";\n ", ";\n"])), S_SeeMoreButton, function (_a) {
127
- var hoverMode = _a.hoverMode;
128
- return hoverMode === 'use' && 'visible';
129
- }, function (_a) {
116
+ var S_ChatBubbleListItem = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n height: fit-content;\n max-width: 100%;\n\n ", ";\n ", ";\n"], ["\n display: flex;\n height: fit-content;\n max-width: 100%;\n\n ", ";\n ", ";\n"])), function (_a) {
130
117
  var isMy = _a.isMy;
131
118
  return isMy && MyChatBubbleListItem;
132
119
  }, function (_a) {
133
120
  var imageMode = _a.imageMode;
134
121
  return imageMode === 'none' && NoImageChatBubbleListItem;
135
122
  });
136
- var ImageViewSeller = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n box-shadow: 0 0 0 2px ", " inset;\n"], ["\n box-shadow: 0 0 0 2px ", " inset;\n"])), function (_a) {
123
+ var ImageViewSeller = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n box-shadow: 0 0 0 2px ", " inset;\n"], ["\n box-shadow: 0 0 0 2px ", " inset;\n"])), function (_a) {
137
124
  var theme = _a.theme;
138
125
  return theme.ui_profile_image_border_brandprimary;
139
126
  });
140
- var ImageViewDefault = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n box-shadow: 0 0 0 1px ", " inset;\n"], ["\n box-shadow: 0 0 0 1px ", " inset;\n"])), function (_a) {
127
+ var ImageViewDefault = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n box-shadow: 0 0 0 1px ", " inset;\n"], ["\n box-shadow: 0 0 0 1px ", " inset;\n"])), function (_a) {
141
128
  var theme = _a.theme;
142
129
  return theme.ui_profile_image_border;
143
130
  });
144
- var S_ImageViewWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n border-radius: 50%;\n height: fit-content;\n min-width: fit-content;\n width: fit-content;\n margin-right: ", ";\n position: relative;\n\n &::after {\n content: '';\n box-sizing: border-box;\n border-radius: 50%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n ", ";\n }\n"], ["\n border-radius: 50%;\n height: fit-content;\n min-width: fit-content;\n width: fit-content;\n margin-right: ", ";\n position: relative;\n\n &::after {\n content: '';\n box-sizing: border-box;\n border-radius: 50%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n ", ";\n }\n"])), function (_a) {
131
+ var S_ImageViewWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n border-radius: 50%;\n height: fit-content;\n min-width: fit-content;\n width: fit-content;\n margin-right: ", ";\n position: relative;\n\n &::after {\n content: '';\n box-sizing: border-box;\n border-radius: 50%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n ", ";\n }\n"], ["\n border-radius: 50%;\n height: fit-content;\n min-width: fit-content;\n width: fit-content;\n margin-right: ", ";\n position: relative;\n\n &::after {\n content: '';\n box-sizing: border-box;\n border-radius: 50%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n ", ";\n }\n"])), function (_a) {
145
132
  var theme = _a.theme;
146
133
  return theme.spacing.spacingB;
147
134
  }, function (_a) {
148
135
  var isSeller = _a.isSeller;
149
136
  return (isSeller ? ImageViewSeller : ImageViewDefault);
150
137
  });
151
- var S_RightBox = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
152
- 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"])));
153
- var MyChatBubble = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n justify-content: flex-end;\n"], ["\n justify-content: flex-end;\n"])));
154
- var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n flex: 1;\n display: flex;\n\n ", ";\n"], ["\n flex: 1;\n display: flex;\n\n ", ";\n"])), function (_a) {
138
+ var S_RightBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
139
+ var S_ChatBubbleBox = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
140
+ var MyChatBubble = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n justify-content: flex-end;\n"], ["\n justify-content: flex-end;\n"])));
141
+ var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n flex: 1;\n display: flex;\n\n ", ";\n"], ["\n flex: 1;\n display: flex;\n\n ", ";\n"])), function (_a) {
155
142
  var isMy = _a.isMy;
156
143
  return isMy && MyChatBubble;
157
144
  });
158
- var S_TimeWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n align-self: flex-end;\n display: flex;\n"], ["\n align-self: flex-end;\n display: flex;\n"])));
145
+ var S_TimeWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n align-self: flex-end;\n display: flex;\n"], ["\n align-self: flex-end;\n display: flex;\n"])));
146
+ var S_SeeMoreButton = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n width: 48px;\n height: 24px;\n min-width: 48px;\n padding-right: ", ";\n margin-top: ", ";\n position: relative;\n opacity: ", ";\n justify-content: right;\n\n ", ":hover & {\n opacity: ", ";\n }\n"], ["\n box-sizing: border-box;\n display: flex;\n width: 48px;\n height: 24px;\n min-width: 48px;\n padding-right: ", ";\n margin-top: ", ";\n position: relative;\n opacity: ", ";\n justify-content: right;\n\n ", ":hover & {\n opacity: ", ";\n }\n"])), function (_a) {
147
+ var theme = _a.theme;
148
+ return theme.spacing.spacingB;
149
+ }, function (_a) {
150
+ var theme = _a.theme;
151
+ return theme.spacing.spacingB;
152
+ }, function (_a) {
153
+ var isContextMenuOpen = _a.isContextMenuOpen;
154
+ return (isContextMenuOpen ? '1' : '0');
155
+ }, S_ChatBubbleListItem, function (_a) {
156
+ var hoverMode = _a.hoverMode;
157
+ return hoverMode === 'use' && '1';
158
+ });
159
159
  exports.default = ChatBubbleListItem;
160
160
  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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "1.4.42",
3
+ "version": "1.4.43",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,8 +1,10 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v1.4.42]
2
+ ## [v1.4.43]
3
3
 
4
- ### Layout
5
- * WTQ
6
- * container1이 항상 우측에 붙을 수 있도록 수정 (justify-content:end;를 justify-content:flex-end;로 변경)
7
- * WTU
8
- * container1이 항상 우측에 붙을 수 있도록 수정 (justify-content:end;를 justify-content:flex-end;로 변경)
4
+ ### Component
5
+ * BasicChatListItem
6
+ * safari에서 우측 더보기 버튼이 간혈적으로 보이지 않는 이슈 해결
7
+ * ChatBubbleListItem
8
+ * safari에서 우측 더보기 버튼이 간혈적으로 보이지 않는 이슈 해결
9
+ * UserDesktopNavBar
10
+ * loginInfoMode가 profile일때 마우스 커서가 변하지 않는 이슈 해결