pds-dev-kit-web 1.4.64 → 1.4.66

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

@@ -187,5 +187,7 @@
     "sys_border_line_darktheme_07_opacity00": "darkgrey50/opacity00",
     "sys_border_line_darktheme_02_opacity20": "darkgrey400/opacity20",
     "sys_border_line_darktheme_03_opacity20": "darkred500/opacity20",
-    "sys_border_line_darktheme_07_opacity20": "darkgrey50/opacity20"
+    "sys_border_line_darktheme_07_opacity20": "darkgrey50/opacity20",
+    "sys_component_base_grey_02_opacity80": "darkgrey30/opacity80",
+    "sys_component_base_10": "black/opacity30"
 }

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

@@ -187,5 +187,7 @@
     "sys_border_line_darktheme_07_opacity00": "darkgrey50/opacity00",
     "sys_border_line_darktheme_02_opacity20": "darkgrey400/opacity20",
     "sys_border_line_darktheme_03_opacity20": "darkred500/opacity20",
-    "sys_border_line_darktheme_07_opacity20": "darkgrey50/opacity20"
+    "sys_border_line_darktheme_07_opacity20": "darkgrey50/opacity20",
+    "sys_component_base_grey_02_opacity80": "grey30/opacity80",
+    "sys_component_base_10": "white/opacity50"
 }

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

@@ -550,7 +550,7 @@
     "ui_cpnt_sheet_base_04": "sys_component_base_09",
     "ui_cpnt_masking_base_01": "sys_component_base_03",
     "ui_cpnt_masking_icon_01": "sys_widget_grey_03",
-    "ui_cpnt_list_base_area_transparent_seller": "sys_cpnt_base_white_opacity50",
+    "ui_cpnt_list_base_area_transparent_seller": "sys_component_base_10",
     "ui_57": "sys_component_base_darktheme_opacity20",
     "ui_58": "sys_component_base_darktheme_disabled_opacity20",
     "ui_cpnt_divider_white_opacity00": "sys_border_white_opacity00",
@@ -561,8 +561,8 @@
     "ui_cpnt_textfield_icon_colortheme_transparent_disabled": "sys_widget_grey_darktheme_03",
     "ui_cpnt_textfield_border_colortheme_transparent_normal": "sys_border_line_darktheme_07_opacity00",
     "ui_cpnt_textfield_border_colortheme_transparent_focus": "sys_border_line_darktheme_07_opacity20",
-    "ui_cpnt_textfield_border_colortheme_transparent_error": "sys_border_line_darktheme_02_opacity20",
-    "ui_cpnt_textfield_text_colortheme_transparent_error": "sys_border_line_darktheme_03_opacity20",
+    "ui_cpnt_textfield_border_colortheme_transparent_error": "sys_border_line_darktheme_03",
+    "ui_cpnt_textfield_text_colortheme_transparent_error": "sys_text_error_darktheme_01",
     "ui_cpnt_textfield_base_colortheme_transparent_disabled": "sys_component_base_darktheme_disabled_opacity20",
     "ui_cpnt_textfield_base_colortheme_transparent_normal": "sys_component_base_darktheme_opacity20",
     "ui_cpnt_textfield_text_colortheme_transparent_readonly": "sys_text_grey_darktheme_03",

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

@@ -189,6 +189,8 @@ declare const colorSet: {
         sys_border_line_darktheme_02_opacity20: string;
         sys_border_line_darktheme_03_opacity20: string;
         sys_border_line_darktheme_07_opacity20: string;
+        sys_component_base_grey_02_opacity80: string;
+        sys_component_base_10: string;
     };
     readonly PaletteColor_light: {
         sys_container_background_01: string;
@@ -380,66 +382,8 @@ declare const colorSet: {
         sys_border_line_darktheme_02_opacity20: string;
         sys_border_line_darktheme_03_opacity20: string;
         sys_border_line_darktheme_07_opacity20: string;
-    };
-    readonly SemanticColor: {
-        blue500: string;
-        blue700: string;
-        blue300: string;
-        green700: string;
-        green500: string;
-        green300: string;
-        red500: string;
-        grey900: string;
-        grey500: string;
-        grey400: string;
-        grey100: string;
-        grey50: string;
-        white: string;
-        black: string;
-        darkblue500: string;
-        grey950: string;
-        darkgrey900: string;
-        darkgrey500: string;
-        darkgrey400: string;
-        darkgrey100: string;
-        darkgrey50: string;
-        darkred500: string;
-        darkgreen700: string;
-        orange500: string;
-        darkorange500: string;
-        opacity00: string;
-        opacity20: string;
-        opacity30: string;
-        opacity65: string;
-        darkgreen500: string;
-        grey70: string;
-        navy500: string;
-        lightgreen500: string;
-        pink500: string;
-        darkgrey70: string;
-        darknavy500: string;
-        darkpink500: string;
-        darklightgreen500: string;
-        opacity10: string;
-        grey600: string;
-        darkgrey600: string;
-        skyblue500: string;
-        skyblue300: string;
-        pink300: string;
-        lightpink500: string;
-        darkblue300: string;
-        darkblue700: string;
-        darkgreen300: string;
-        darkskyblue500: string;
-        navy100: string;
-        darknavy100: string;
-        opacity80: string;
-        opacity50: string;
-        grey30: string;
-        opacity95: string;
-        darkgrey30: string;
-        opacity40: string;
-        kakaoyellow: string;
+        sys_component_base_grey_02_opacity80: string;
+        sys_component_base_10: string;
     };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
@@ -1014,5 +958,65 @@ declare const colorSet: {
         ui_cpnt_textfield_border_colortheme_transparent_disabled: string;
         ui_cpnt_textfield_border_colortheme_transparent_readonly: string;
     };
+    readonly SemanticColor: {
+        blue500: string;
+        blue700: string;
+        blue300: string;
+        green700: string;
+        green500: string;
+        green300: string;
+        red500: string;
+        grey900: string;
+        grey500: string;
+        grey400: string;
+        grey100: string;
+        grey50: string;
+        white: string;
+        black: string;
+        darkblue500: string;
+        grey950: string;
+        darkgrey900: string;
+        darkgrey500: string;
+        darkgrey400: string;
+        darkgrey100: string;
+        darkgrey50: string;
+        darkred500: string;
+        darkgreen700: string;
+        orange500: string;
+        darkorange500: string;
+        opacity00: string;
+        opacity20: string;
+        opacity30: string;
+        opacity65: string;
+        darkgreen500: string;
+        grey70: string;
+        navy500: string;
+        lightgreen500: string;
+        pink500: string;
+        darkgrey70: string;
+        darknavy500: string;
+        darkpink500: string;
+        darklightgreen500: string;
+        opacity10: string;
+        grey600: string;
+        darkgrey600: string;
+        skyblue500: string;
+        skyblue300: string;
+        pink300: string;
+        lightpink500: string;
+        darkblue300: string;
+        darkblue700: string;
+        darkgreen300: string;
+        darkskyblue500: string;
+        navy100: string;
+        darknavy100: string;
+        opacity80: string;
+        opacity50: string;
+        grey30: string;
+        opacity95: string;
+        darkgrey30: string;
+        opacity40: string;
+        kakaoyellow: string;
+    };
 };
 export default colorSet;

package/dist/src/common/styles/colorSet/index.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable import/order */
 var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
 var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
-var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
 var UIColor_json_1 = __importDefault(require("./UIColor.json"));
+var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
 var colorSet = {
     PaletteColor_Dark: PaletteColor_Dark_json_1.default,
     PaletteColor_light: PaletteColor_light_json_1.default,
-    SemanticColor: SemanticColor_json_1.default,
-    UIColor: UIColor_json_1.default
+    UIColor: UIColor_json_1.default,
+    SemanticColor: SemanticColor_json_1.default
 };
 exports.default = colorSet;

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

@@ -120,12 +120,34 @@ var AdminListItem = (0, react_1.forwardRef)(function (_a, ref) {
                 return 'sysTextSecondary';
         }
     };
+    var imageWidth;
+    switch (imageShapeType) {
+        case 'circular': {
+            imageWidth = 64;
+            break;
+        }
+        case 'rectangle':
+        case 'round': {
+            if (imageRatio === '16_9') {
+                imageWidth = 128;
+                break;
+            }
+            if (imageRatio === '1_1') {
+                imageWidth = 72;
+                break;
+            }
+            if (imageRatio === '4_3') {
+                imageWidth = 96;
+                break;
+            }
+        }
+    }
     return (react_1.default.createElement(S_AdminListItem, { ref: ref, rowSize: rowSize, onClick: handleClick, isSelected: isSelected, quickActionBtnType: quickActionBtnType },
         react_1.default.createElement(S_SelectionColumn, { rowSize: rowSize }, selectionMode === 'multi' && (react_1.default.createElement(S_Selection, null,
             react_1.default.createElement(Checkbox_1.Checkbox, { name: id.toString(), state: selectedState === 'maintain' ? 'disabled' : 'normal' })))),
         react_1.default.createElement(S_ImageColumn, { rowSize: rowSize },
             column2Type === 'image_text' && (rowSize === 'high' || rowSize === 'medium') && (react_1.default.createElement(S_ImageWrapper, { rowSize: rowSize },
-                react_1.default.createElement(hybrid_1.ImageView, { src: imageSrc, shapeType: imageShapeType, width: imageShapeType === 'circular' ? 64 : 120, ratio: imageRatio, scaleType: "cover", radius: imageShapeType === 'round' ? imageRadius : undefined }))),
+                react_1.default.createElement(hybrid_1.ImageView, { src: imageSrc, shapeType: imageShapeType, width: imageWidth, ratio: imageRatio, scaleType: "cover", radius: imageShapeType === 'round' ? imageRadius : undefined }))),
             (rowSize === 'low' || rowSize === 'medium') && (react_1.default.createElement(S_RowTextWrapper, null,
                 react_1.default.createElement(TextLabel_1.TextLabel, { text: column2Text, styleTheme: "body2Bold", colorTheme: "sysTextPrimary", ellipsisMode: "use", lineLimit: 2 }))),
             rowSize === 'high' && (react_1.default.createElement(S_HighTextWrapper, { ref: contentRef, hasScroll: hasScroll },

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

@@ -80,7 +80,7 @@ function BasicChatListItem(_a) {
                 react_1.default.createElement(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: "responsive" }))),
             react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColors[colorTheme] }),
             react_1.default.createElement(S_ContentTextWrapper, null,
-                react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary", wordBreak: "break_all" })),
+                react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: colorTheme === 'subscriber_transparent' ? 'sysTextWhite' : 'sysTextPrimary', wordBreak: "break_all" })),
             hoverMode === 'use' && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef },
                 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 }))),
             react_1.default.createElement(Popup_1.PopupProvider, null,

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

@@ -88,9 +88,9 @@ var ChatList = react_1.default.forwardRef(function (_a, ref) {
     return (react_1.default.createElement(S_ChatList, { backgroundColor: baseBackgroundColors[colorTheme], id: "chatList" },
         headerMode === 'use' && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(Header_1.default, { colorTheme: colorTheme, titleText: titleText, descText: descText, captionText: captionText, titleStyleTheme: titleStyleTheme, headerDisplayType: headerDisplayType, headerIBtn1IconName: headerIBtn1IconName, headerIBtn1IconFillType: headerIBtn1IconFillType, onClickHeaderIBtn1: onClickHeaderIBtn1 }),
-            react_1.default.createElement(hybrid_1.Divider, { colorTheme: colorTheme === 'transparent' ? 'divider1' : 'none' }))),
+            react_1.default.createElement(hybrid_1.Divider, { colorTheme: colorTheme === 'transparent' ? 'divider2' : 'none' }))),
         react_1.default.createElement(Body_1.default, { scrollVisibleType: scrollVisibleType, isSubmitted: isSubmitSuccessful, bodyMBtnText: bodyMBtnText, bodySpacingMode: bodySpacingMode, callBackAfterScrollToBottom: callBackAfterScrollToBottom, bodyChildren: bodyChildren, ref: ref }, children),
-        react_1.default.createElement(hybrid_1.Divider, { colorTheme: colorTheme === 'transparent' ? 'divider1' : 'none' }),
+        react_1.default.createElement(hybrid_1.Divider, { colorTheme: colorTheme === 'transparent' ? 'divider2' : 'none' }),
         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }),
         react_1.default.createElement(react_hook_form_1.FormProvider, __assign({}, methods),
             react_1.default.createElement("form", { onSubmit: handleSubmit(handleSubmitChat) },

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

@@ -135,7 +135,7 @@ function TextField(_a) {
     };
     return (react_1.default.createElement(S_TextFieldBox, { size: size, responsiveMode: responsiveMode, customWidth: customWidth },
         react_1.default.createElement(S_TextFieldWrapper, { size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, colorTheme: colorTheme, customWidth: customWidth }, S_TextField()),
-        ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && react_1.default.createElement(S_Error, null, errors[name].message)));
+        ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && state === 'normal' && (react_1.default.createElement(S_Error, { colorTheme: colorTheme }, errors[name].message))));
 }
 var S_TextFieldBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  ", "\n"], ["\n  ", ";\n  ", ";\n  ", "\n"])), function (_a) {
     var size = _a.size;

package/dist/src/hybrid/components/Divider/Divider.d.ts

@@ -3,7 +3,7 @@ export declare type DividerProps = {
     displayType?: 'line' | 'area';
     direction?: 'vertical' | 'horizontal';
     height?: number;
-    colorTheme?: 'none' | 'divider1';
+    colorTheme?: 'none' | 'divider1' | 'divider2';
 };
 declare function Divider({ displayType, direction, height, colorTheme }: DividerProps): JSX.Element;
 export default Divider;

package/dist/src/hybrid/components/Divider/Divider.js

@@ -54,15 +54,28 @@ var vertical = (0, styled_components_1.css)(templateObject_2 || (templateObject_
     var $height = _a.$height;
     return ($height ? $height + "px" : '100%');
 });
-var S_Divider = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  ", "\n"], ["\n  ", ";\n  ", ";\n  ", "\n"])), function (_a) {
+var divider1Color = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_divider_white_opacity30;
+});
+var divider2Color = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_divider_white_opacity00;
+});
+var S_Divider = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
     var $direction = _a.$direction;
     return $direction === 'horizontal' && horizontal;
 }, function (_a) {
     var $direction = _a.$direction, displayType = _a.displayType;
     return $direction === 'vertical' && displayType === 'line' && vertical;
 }, function (_a) {
-    var colorTheme = _a.colorTheme, theme = _a.theme;
-    return colorTheme === 'divider1' && "background-color: " + theme.ui_cpnt_divider_white_opacity30 + ";";
+    var colorTheme = _a.colorTheme;
+    return colorTheme &&
+        {
+            divider1: divider1Color,
+            divider2: divider2Color,
+            none: ''
+        }[colorTheme];
 });
 exports.default = Divider;
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/src/mobile/components/BasicChatListItem/BasicChatListItem.js

@@ -80,7 +80,7 @@ function BasicChatListItem(_a) {
                 react_1.default.createElement(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: "responsive" }))),
             react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColors[colorTheme] }),
             react_1.default.createElement(S_ContentTextWrapper, null,
-                react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary", wordBreak: "break_all" })),
+                react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: colorTheme === 'subscriber_transparent' ? 'sysTextWhite' : 'sysTextPrimary', wordBreak: "break_all" })),
             hoverMode === 'use' && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef },
                 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 }))),
             react_1.default.createElement(Popup_1.PopupProvider, null,

package/dist/src/mobile/components/ChatList/ChatList.js

@@ -88,9 +88,9 @@ var ChatList = react_1.default.forwardRef(function (_a, ref) {
     return (react_1.default.createElement(S_ChatList, { backgroundColor: baseBackgroundColors[colorTheme], id: "chatList" },
         headerMode === 'use' && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(Header_1.default, { colorTheme: colorTheme, titleText: titleText, descText: descText, captionText: captionText, titleStyleTheme: titleStyleTheme, headerDisplayType: headerDisplayType, headerIBtn1IconName: headerIBtn1IconName, headerIBtn1IconFillType: headerIBtn1IconFillType, onClickHeaderIBtn1: onClickHeaderIBtn1 }),
-            react_1.default.createElement(hybrid_1.Divider, { colorTheme: colorTheme === 'transparent' ? 'divider1' : 'none' }))),
+            react_1.default.createElement(hybrid_1.Divider, { colorTheme: colorTheme === 'transparent' ? 'divider2' : 'none' }))),
         react_1.default.createElement(Body_1.default, { scrollVisibleType: scrollVisibleType, isSubmitted: isSubmitSuccessful, bodyMBtnText: bodyMBtnText, bodySpacingMode: bodySpacingMode, callBackAfterScrollToBottom: callBackAfterScrollToBottom, bodyChildren: bodyChildren, ref: ref }, children),
-        react_1.default.createElement(hybrid_1.Divider, { colorTheme: colorTheme === 'transparent' ? 'divider1' : 'none' }),
+        react_1.default.createElement(hybrid_1.Divider, { colorTheme: colorTheme === 'transparent' ? 'divider2' : 'none' }),
         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }),
         react_1.default.createElement(react_hook_form_1.FormProvider, __assign({}, methods),
             react_1.default.createElement("form", { onSubmit: handleSubmit(handleSubmitChat) },

package/dist/src/mobile/components/TextField/TextField.js

@@ -135,7 +135,7 @@ function TextField(_a) {
     };
     return (react_1.default.createElement(S_TextFieldBox, { size: size, responsiveMode: responsiveMode, customWidth: customWidth },
         react_1.default.createElement(S_TextFieldWrapper, { size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, colorTheme: colorTheme, customWidth: customWidth }, S_TextField()),
-        ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && react_1.default.createElement(S_Error, null, errors[name].message)));
+        ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && state === 'normal' && (react_1.default.createElement(S_Error, { colorTheme: colorTheme }, errors[name].message))));
 }
 var S_TextFieldBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  ", "\n"], ["\n  ", ";\n  ", ";\n  ", "\n"])), function (_a) {
     var size = _a.size;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web",
-  "version": "1.4.64",
+  "version": "1.4.66",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/release-note.md

@@ -1,6 +1,9 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v1.4.64]
+## [v1.4.66]
 
 ### Component
-* Dropdown
-  * 표시되는 값이 selectedValue, value, defaultValue를 순서대로 검토하여 반영하게 함
+* TextField
+  * error message 색상이 잘 표현 될 수 있도록 수정
+
+### Color
+* 컬러 키 값 22.10.11 14시 05분 기준 싱크