pds-dev-kit-web 1.9.4 → 1.9.5

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 (21) hide show
  1. package/dist/src/common/styles/colorSet/PaletteColor_Dark.json +3 -1
  2. package/dist/src/common/styles/colorSet/PaletteColor_light.json +3 -1
  3. package/dist/src/common/styles/colorSet/UIColor.json +4 -1
  4. package/dist/src/common/styles/colorSet/index.d.ts +9 -2
  5. package/dist/src/common/styles/colorSet/index.js +2 -2
  6. package/dist/src/common/styles/colorSet/ui-type.d.ts +3 -0
  7. package/dist/src/desktop/common/components/TextFieldBase/TextFieldBase.js +6 -2
  8. package/dist/src/desktop/components/EditApplyTextField/EditApplyTextField.js +6 -4
  9. package/dist/src/desktop/components/TextButton/TextButton.d.ts +1 -1
  10. package/dist/src/desktop/components/TextButton/TextButton.js +38 -12
  11. package/dist/src/desktop/components/UploadTextButton/UploadTextButton.d.ts +1 -1
  12. package/dist/src/desktop/components/UploadTextButton/UploadTextButton.js +39 -9
  13. package/dist/src/mobile/common/components/TextFieldBase/TextFieldBase.js +6 -2
  14. package/dist/src/mobile/components/TextButton/TextButton.d.ts +1 -1
  15. package/dist/src/mobile/components/TextButton/TextButton.js +29 -7
  16. package/dist/src/mobile/components/UploadTextButton/UploadTextButton.d.ts +1 -1
  17. package/dist/src/mobile/components/UploadTextButton/UploadTextButton.js +30 -6
  18. package/dist/storybook-static/{main.9a5b3a3c.iframe.bundle.d.ts → main.1434d31c.iframe.bundle.d.ts} +0 -0
  19. package/dist/storybook-static/{main.9a5b3a3c.iframe.bundle.js → main.1434d31c.iframe.bundle.js} +163 -131
  20. package/package.json +1 -1
  21. package/release-note.md +12 -4
package/dist/src/common/styles/colorSet/PaletteColor_Dark.json CHANGED
@@ -263,5 +263,7 @@
263
263
  "sys_component_base_pressed_white": "white/opacity15",
264
264
  "sys_component_base_hover_transparent": "darkgrey900/opacity25",
265
265
  "sys_component_base_pressed_transparent": "darkgrey900/opacity35",
266
- "sys_text_white_opacity_01": "white/opacity70"
266
+ "sys_text_white_opacity_01": "white/opacity70",
267
+ "sys_component_base_hover_04": "white/opacity30",
268
+ "sys_component_base_pressed_03": "white/opacity20"
267
269
  }
package/dist/src/common/styles/colorSet/PaletteColor_light.json CHANGED
@@ -263,5 +263,7 @@
263
263
  "sys_component_base_pressed_white": "white/opacity15",
264
264
  "sys_component_base_hover_transparent": "darkgrey900/opacity25",
265
265
  "sys_component_base_pressed_transparent": "darkgrey900/opacity35",
266
- "sys_text_white_opacity_01": "white/opacity70"
266
+ "sys_text_white_opacity_01": "white/opacity70",
267
+ "sys_component_base_hover_04": "white/opacity30",
268
+ "sys_component_base_pressed_03": "white/opacity20"
267
269
  }
package/dist/src/common/styles/colorSet/UIColor.json CHANGED
@@ -711,5 +711,8 @@
711
711
  "ui_cpnt_reactionbutton_base_02": "sys_component_base_03",
712
712
  "ui_create_ch_step_prev": "sys_text_white_opacity_01",
713
713
  "ui_editor_preview_editing": "sys_widget_status_active_01",
714
- "ui_cpnt_icon_sys_black": "sys_widget_black"
714
+ "ui_cpnt_icon_sys_black": "sys_widget_black",
715
+ "ui_cpnt_textbutton_white_variation_base_hover": "sys_component_base_hover_04",
716
+ "ui_cpnt_textbutton_white_variation_base_pressed": "sys_component_base_pressed_03",
717
+ "ui_74": "sys_component_base_darktheme_02"
715
718
  }
package/dist/src/common/styles/colorSet/index.d.ts CHANGED
@@ -95,7 +95,7 @@ declare const colorSet: {
95
95
  grey10: string;
96
96
  darkgrey10: string;
97
97
  };
98
- readonly PaletteColor_light: {
98
+ readonly PaletteColor_Dark: {
99
99
  sys_container_background_01: string;
100
100
  sys_container_background_02: string;
101
101
  sys_container_background_03: string;
@@ -361,8 +361,10 @@ declare const colorSet: {
361
361
  sys_component_base_hover_transparent: string;
362
362
  sys_component_base_pressed_transparent: string;
363
363
  sys_text_white_opacity_01: string;
364
+ sys_component_base_hover_04: string;
365
+ sys_component_base_pressed_03: string;
364
366
  };
365
- readonly PaletteColor_Dark: {
367
+ readonly PaletteColor_light: {
366
368
  sys_container_background_01: string;
367
369
  sys_container_background_02: string;
368
370
  sys_container_background_03: string;
@@ -628,6 +630,8 @@ declare const colorSet: {
628
630
  sys_component_base_hover_transparent: string;
629
631
  sys_component_base_pressed_transparent: string;
630
632
  sys_text_white_opacity_01: string;
633
+ sys_component_base_hover_04: string;
634
+ sys_component_base_pressed_03: string;
631
635
  };
632
636
  readonly UIColor: {
633
637
  ui_cpnt_button_fill_base_primary: string;
@@ -1343,6 +1347,9 @@ declare const colorSet: {
1343
1347
  ui_create_ch_step_prev: string;
1344
1348
  ui_editor_preview_editing: string;
1345
1349
  ui_cpnt_icon_sys_black: string;
1350
+ ui_cpnt_textbutton_white_variation_base_hover: string;
1351
+ ui_cpnt_textbutton_white_variation_base_pressed: string;
1352
+ ui_74: string;
1346
1353
  };
1347
1354
  };
1348
1355
  export default colorSet;
package/dist/src/common/styles/colorSet/index.js CHANGED
@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  /* eslint-disable import/order */
7
7
  var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
8
- var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
9
8
  var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
9
+ var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
10
10
  var UIColor_json_1 = __importDefault(require("./UIColor.json"));
11
11
  var colorSet = {
12
12
  SemanticColor: SemanticColor_json_1.default,
13
- PaletteColor_light: PaletteColor_light_json_1.default,
14
13
  PaletteColor_Dark: PaletteColor_Dark_json_1.default,
14
+ PaletteColor_light: PaletteColor_light_json_1.default,
15
15
  UIColor: UIColor_json_1.default
16
16
  };
17
17
  exports.default = colorSet;
package/dist/src/common/styles/colorSet/ui-type.d.ts CHANGED
@@ -712,4 +712,7 @@ export interface UITheme {
712
712
  ui_create_ch_step_prev: string;
713
713
  ui_editor_preview_editing: string;
714
714
  ui_cpnt_icon_sys_black: string;
715
+ ui_cpnt_textbutton_white_variation_base_hover: string;
716
+ ui_cpnt_textbutton_white_variation_base_pressed: string;
717
+ ui_74: string;
715
718
  }
package/dist/src/desktop/common/components/TextFieldBase/TextFieldBase.js CHANGED
@@ -88,7 +88,9 @@ function TextFieldBase(_a) {
88
88
  // NOTE: preventBlankMode === 'all'일 경우에는 무조건 onChange 시점에 적용
89
89
  if (textLineType === 'single' && preventBlankMode === 'all') {
90
90
  var value = e.target.value;
91
- e.target.value = value.replace(/ /g, '');
91
+ if (value != null) {
92
+ e.target.value = value.replace(/ /g, '');
93
+ }
92
94
  }
93
95
  if (onChange) {
94
96
  onChange(e);
@@ -98,7 +100,9 @@ function TextFieldBase(_a) {
98
100
  // NOTE: preventBlankMode는 input에만 적용 가능
99
101
  // NOTE: preventBlankMode === 'trim'일 경우에는 무조건 onBlur 시점에 적용
100
102
  if (textLineType === 'single' && preventBlankMode === 'trim') {
101
- setValue(name, e.target.value.replace(/^\s+|\s+$/gm, ''));
103
+ if (e.target.value != null) {
104
+ setValue(name, e.target.value.replace(/^\s+|\s+$/gm, ''));
105
+ }
102
106
  }
103
107
  if (onBlur && onTarget) {
104
108
  var relatedTarget = e.relatedTarget;
package/dist/src/desktop/components/EditApplyTextField/EditApplyTextField.js CHANGED
@@ -102,10 +102,12 @@ function EditApplyTextField(_a) {
102
102
  */
103
103
  function checkBlankMode() {
104
104
  if (textLineType === 'single' && preventBlankMode === 'trim') {
105
- setValue(name, currentValue.replace(/^\s+|\s+$/gm, ''));
106
- setPrevValue(currentValue.replace(/^\s+|\s+$/gm, ''));
107
- if (getInputValue) {
108
- getInputValue([name, currentValue.replace(/^\s+|\s+$/gm, '')]);
105
+ if (currentValue != null) {
106
+ setValue(name, currentValue.replace(/^\s+|\s+$/gm, ''));
107
+ setPrevValue(currentValue.replace(/^\s+|\s+$/gm, ''));
108
+ if (getInputValue) {
109
+ getInputValue([name, currentValue.replace(/^\s+|\s+$/gm, '')]);
110
+ }
109
111
  }
110
112
  }
111
113
  if (preventBlankMode !== 'trim') {
package/dist/src/desktop/components/TextButton/TextButton.d.ts CHANGED
@@ -7,7 +7,7 @@ export declare type TextButtonProps = {
7
7
  fontWeight?: 'bold' | 'regular';
8
8
  type?: 'submit' | 'reset' | 'button';
9
9
  state?: 'normal' | 'disabled';
10
- colorTheme?: 'none' | 'red' | 'grey_01' | 'white';
10
+ colorTheme?: 'none' | 'red' | 'grey_01' | 'white' | 'white2';
11
11
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
12
12
  };
13
13
  declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, colorTheme, onClick, ...rest }: TextButtonProps): JSX.Element;
package/dist/src/desktop/components/TextButton/TextButton.js CHANGED
@@ -63,7 +63,8 @@ var textColor = {
63
63
  none: 'usrTextBrandPrimary',
64
64
  red: 'sysTextError',
65
65
  grey_01: 'sysTextPrimary',
66
- white: 'sysTextWhite'
66
+ white: 'sysTextWhite',
67
+ white2: 'sysTextWhite'
67
68
  };
68
69
  function TextButton(_a) {
69
70
  var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f, onClick = _a.onClick, rest = __rest(_a, ["text", "size", "responsiveMode", "fontWeight", "type", "state", "colorTheme", "onClick"]);
@@ -82,19 +83,44 @@ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 =
82
83
  var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 14px;\n height: 40px;\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"], ["\n border-radius: 14px;\n height: 40px;\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"])));
83
84
  var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 10px;\n height: 32px;\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"], ["\n border-radius: 10px;\n height: 32px;\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"])));
84
85
  var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border-radius: 8px;\n height: 24px;\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"], ["\n border-radius: 8px;\n height: 24px;\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"])));
85
- var S_Button = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n justify-content: center;\n padding-left: 8px;\n padding-right: 8px;\n\n ", "\n\n &:hover:enabled {\n background-color: ", ";\n }\n &:active:enabled {\n background-color: ", ";\n }\n ", ";\n\n & > div {\n ", ";\n }\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n justify-content: center;\n padding-left: 8px;\n padding-right: 8px;\n\n ", "\n\n &:hover:enabled {\n background-color: ", ";\n }\n &:active:enabled {\n background-color: ", ";\n }\n ", ";\n\n & > div {\n ", ";\n }\n ", ";\n"])), function (_a) {
86
+ var colorThemeDefault = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n &:hover:enabled {\n background-color: ", ";\n }\n &:active:enabled {\n background-color: ", ";\n }\n"], ["\n &:hover:enabled {\n background-color: ", ";\n }\n &:active:enabled {\n background-color: ", ";\n }\n"])), function (_a) {
87
+ var theme = _a.theme;
88
+ return theme.ui_cpnt_button_line_base_hover;
89
+ }, function (_a) {
90
+ var theme = _a.theme;
91
+ return theme.ui_cpnt_button_line_base_pressed;
92
+ });
93
+ var colorThemeWhite = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n &:hover:enabled {\n background-color: ", ";\n }\n &:active:enabled {\n background-color: ", ";\n }\n"], ["\n &:hover:enabled {\n background-color: ", ";\n }\n &:active:enabled {\n background-color: ", ";\n }\n"])), function (_a) {
94
+ var theme = _a.theme;
95
+ return theme.ui_cpnt_button_white_base_hover;
96
+ }, function (_a) {
97
+ var theme = _a.theme;
98
+ return theme.ui_cpnt_button_white_base_pressed;
99
+ });
100
+ var colorThemeWhite2 = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n &:hover:enabled {\n background-color: ", ";\n }\n &:active:enabled {\n background-color: ", ";\n }\n"], ["\n &:hover:enabled {\n background-color: ", ";\n }\n &:active:enabled {\n background-color: ", ";\n }\n"])), function (_a) {
101
+ var theme = _a.theme;
102
+ return theme.ui_cpnt_textbutton_white_variation_base_hover;
103
+ }, function (_a) {
104
+ var theme = _a.theme;
105
+ return theme.ui_cpnt_textbutton_white_variation_base_pressed;
106
+ });
107
+ var S_Button = styled_components_1.default.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n justify-content: center;\n padding-left: 8px;\n padding-right: 8px;\n\n ", "\n\n ", ";\n\n ", ";\n\n & > div {\n ", ";\n }\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n justify-content: center;\n padding-left: 8px;\n padding-right: 8px;\n\n ", "\n\n ", ";\n\n ", ";\n\n & > div {\n ", ";\n }\n ", ";\n"])), function (_a) {
86
108
  var state = _a.state;
87
109
  return (state === 'normal' ? 'pointer' : 'default');
88
110
  }, transitionStyle_1.ButtonTransition, function (_a) {
89
- var theme = _a.theme, colorTheme = _a.colorTheme;
90
- return colorTheme === 'white'
91
- ? theme.ui_cpnt_button_white_base_hover
92
- : theme.ui_cpnt_button_line_base_hover;
93
- }, function (_a) {
94
- var theme = _a.theme, colorTheme = _a.colorTheme;
95
- return colorTheme === 'white'
96
- ? theme.ui_cpnt_button_white_base_pressed
97
- : theme.ui_cpnt_button_line_base_pressed;
111
+ var colorTheme = _a.colorTheme;
112
+ switch (colorTheme) {
113
+ case 'none':
114
+ case 'red':
115
+ case 'grey_01':
116
+ return colorThemeDefault;
117
+ case 'white':
118
+ return colorThemeWhite;
119
+ case 'white2':
120
+ return colorThemeWhite2;
121
+ default:
122
+ return colorThemeDefault;
123
+ }
98
124
  }, function (_a) {
99
125
  var size = _a.size;
100
126
  return size &&
@@ -117,4 +143,4 @@ var S_Button = styled_components_1.default.button(templateObject_5 || (templateO
117
143
  return responsiveMode === 'use' && 'width: 100%';
118
144
  });
119
145
  exports.default = TextButton;
120
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
146
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
package/dist/src/desktop/components/UploadTextButton/UploadTextButton.d.ts CHANGED
@@ -6,7 +6,7 @@ declare type UploadTextButtonProps = {
6
6
  responsiveMode?: 'none' | 'use';
7
7
  fontWeight?: 'bold' | 'regular';
8
8
  state?: 'normal' | 'disabled';
9
- colorTheme?: 'none' | 'red' | 'grey_01' | 'white';
9
+ colorTheme?: 'none' | 'red' | 'grey_01' | 'white' | 'white2';
10
10
  accept?: string;
11
11
  multipleMode?: 'none' | 'use';
12
12
  onClick?: (e: React.ChangeEvent<HTMLInputElement>) => void;
package/dist/src/desktop/components/UploadTextButton/UploadTextButton.js CHANGED
@@ -41,7 +41,8 @@ var textColor = {
41
41
  none: 'usrTextBrandPrimary',
42
42
  red: 'sysTextError',
43
43
  grey_01: 'sysTextPrimary',
44
- white: 'sysTextWhite'
44
+ white: 'sysTextWhite',
45
+ white2: 'sysTextWhite'
45
46
  };
46
47
  function UploadTextButton(_a) {
47
48
  var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.state, state = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'none' : _e, _f = _a.accept, accept = _f === void 0 ? '*' : _f, _g = _a.multipleMode, multipleMode = _g === void 0 ? 'none' : _g, onClick = _a.onClick;
@@ -51,7 +52,7 @@ function UploadTextButton(_a) {
51
52
  }
52
53
  e.target.value = '';
53
54
  };
54
- return (react_1.default.createElement(S_UploadTextButton, { "x-pds-name": "UploadTextButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, disabled: state === 'disabled' },
55
+ return (react_1.default.createElement(S_UploadTextButton, { "x-pds-name": "UploadTextButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, disabled: state === 'disabled', colorTheme: colorTheme },
55
56
  react_1.default.createElement("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }),
56
57
  react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
57
58
  }
@@ -62,18 +63,47 @@ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 =
62
63
  var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 14px;\n height: 40px;\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"], ["\n border-radius: 14px;\n height: 40px;\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"])));
63
64
  var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 10px;\n height: 32px;\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"], ["\n border-radius: 10px;\n height: 32px;\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"])));
64
65
  var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border-radius: 8px;\n height: 24px;\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"], ["\n border-radius: 8px;\n height: 24px;\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"])));
65
- var S_UploadTextButton = styled_components_1.default.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n cursor: ", ";\n display: inline-flex;\n justify-content: center;\n padding: 0 ", ";\n\n ", "\n\n &:hover:not([disabled]) {\n background-color: ", ";\n }\n\n &:active:not([disabled]) {\n background-color: ", ";\n }\n\n & > div {\n font-weight: ", ";\n }\n\n ", ";\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n cursor: ", ";\n display: inline-flex;\n justify-content: center;\n padding: 0 ", ";\n\n ", "\n\n &:hover:not([disabled]) {\n background-color: ", ";\n }\n\n &:active:not([disabled]) {\n background-color: ", ";\n }\n\n & > div {\n font-weight: ", ";\n }\n\n ", ";\n ", ";\n"])), function (_a) {
66
+ var colorThemeDefault = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n &:hover:not([disabled]) {\n background-color: ", ";\n }\n &:active:not([disabled]) {\n background-color: ", ";\n }\n"], ["\n &:hover:not([disabled]) {\n background-color: ", ";\n }\n &:active:not([disabled]) {\n background-color: ", ";\n }\n"])), function (_a) {
67
+ var theme = _a.theme;
68
+ return theme.ui_cpnt_button_line_base_hover;
69
+ }, function (_a) {
70
+ var theme = _a.theme;
71
+ return theme.ui_cpnt_button_line_base_pressed;
72
+ });
73
+ var colorThemeWhite = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n &:hover:not([disabled]) {\n background-color: ", ";\n }\n &:active:not([disabled]) {\n background-color: ", ";\n }\n"], ["\n &:hover:not([disabled]) {\n background-color: ", ";\n }\n &:active:not([disabled]) {\n background-color: ", ";\n }\n"])), function (_a) {
74
+ var theme = _a.theme;
75
+ return theme.ui_cpnt_button_white_base_hover;
76
+ }, function (_a) {
77
+ var theme = _a.theme;
78
+ return theme.ui_cpnt_button_white_base_pressed;
79
+ });
80
+ var colorThemeWhite2 = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n &:hover:not([disabled]) {\n background-color: ", ";\n }\n &:active:not([disabled]) {\n background-color: ", ";\n }\n"], ["\n &:hover:not([disabled]) {\n background-color: ", ";\n }\n &:active:not([disabled]) {\n background-color: ", ";\n }\n"])), function (_a) {
81
+ var theme = _a.theme;
82
+ return theme.ui_cpnt_textbutton_white_variation_base_hover;
83
+ }, function (_a) {
84
+ var theme = _a.theme;
85
+ return theme.ui_cpnt_textbutton_white_variation_base_pressed;
86
+ });
87
+ var S_UploadTextButton = styled_components_1.default.label(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n cursor: ", ";\n display: inline-flex;\n justify-content: center;\n padding: 0 ", ";\n\n ", "\n\n ", ";\n\n & > div {\n font-weight: ", ";\n }\n\n ", ";\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n cursor: ", ";\n display: inline-flex;\n justify-content: center;\n padding: 0 ", ";\n\n ", "\n\n ", ";\n\n & > div {\n font-weight: ", ";\n }\n\n ", ";\n ", ";\n"])), function (_a) {
66
88
  var disabled = _a.disabled;
67
89
  return (disabled ? 'default' : 'pointer');
68
90
  }, function (_a) {
69
91
  var theme = _a.theme;
70
92
  return theme.spacing.spacingB;
71
93
  }, transitionStyle_1.ButtonTransition, function (_a) {
72
- var theme = _a.theme;
73
- return theme.ui_cpnt_button_line_base_hover;
74
- }, function (_a) {
75
- var theme = _a.theme;
76
- return theme.ui_cpnt_button_line_base_pressed;
94
+ var colorTheme = _a.colorTheme;
95
+ switch (colorTheme) {
96
+ case 'none':
97
+ case 'red':
98
+ case 'grey_01':
99
+ return colorThemeDefault;
100
+ case 'white':
101
+ return colorThemeWhite;
102
+ case 'white2':
103
+ return colorThemeWhite2;
104
+ default:
105
+ return colorThemeDefault;
106
+ }
77
107
  }, function (_a) {
78
108
  var theme = _a.theme, fontWeight = _a.fontWeight;
79
109
  return fontWeight &&
@@ -96,4 +126,4 @@ var S_UploadTextButton = styled_components_1.default.label(templateObject_5 || (
96
126
  return responsiveMode === 'use' && 'width: 100%';
97
127
  });
98
128
  exports.default = UploadTextButton;
99
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
129
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
package/dist/src/mobile/common/components/TextFieldBase/TextFieldBase.js CHANGED
@@ -88,7 +88,9 @@ function TextFieldBase(_a) {
88
88
  // NOTE: preventBlankMode === 'all'일 경우에는 무조건 onChange 시점에 적용
89
89
  if (textLineType === 'single' && preventBlankMode === 'all') {
90
90
  var value = e.target.value;
91
- e.target.value = value.replace(/ /g, '');
91
+ if (value != null) {
92
+ e.target.value = value.replace(/ /g, '');
93
+ }
92
94
  }
93
95
  if (onChange) {
94
96
  onChange(e);
@@ -98,7 +100,9 @@ function TextFieldBase(_a) {
98
100
  // NOTE: preventBlankMode는 input에만 적용 가능
99
101
  // NOTE: preventBlankMode === 'trim'일 경우에는 무조건 onBlur 시점에 적용
100
102
  if (textLineType === 'single' && preventBlankMode === 'trim') {
101
- setValue(name, e.target.value.replace(/^\s+|\s+$/gm, ''));
103
+ if (e.target.value != null) {
104
+ setValue(name, e.target.value.replace(/^\s+|\s+$/gm, ''));
105
+ }
102
106
  }
103
107
  if (onBlur && onTarget) {
104
108
  var relatedTarget = e.relatedTarget;
package/dist/src/mobile/components/TextButton/TextButton.d.ts CHANGED
@@ -7,7 +7,7 @@ export declare type TextButtonProps = {
7
7
  fontWeight?: 'bold' | 'regular';
8
8
  type?: 'submit' | 'reset' | 'button';
9
9
  state?: 'normal' | 'disabled';
10
- colorTheme?: 'none' | 'red' | 'grey_01' | 'white';
10
+ colorTheme?: 'none' | 'red' | 'grey_01' | 'white' | 'white2';
11
11
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
12
12
  };
13
13
  declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, colorTheme, onClick, ...rest }: TextButtonProps): JSX.Element;
package/dist/src/mobile/components/TextButton/TextButton.js CHANGED
@@ -63,7 +63,8 @@ var textColor = {
63
63
  none: 'usrTextBrandPrimary',
64
64
  red: 'sysTextError',
65
65
  grey_01: 'sysTextPrimary',
66
- white: 'sysTextWhite'
66
+ white: 'sysTextWhite',
67
+ white2: 'sysTextWhite'
67
68
  };
68
69
  function TextButton(_a) {
69
70
  var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f, onClick = _a.onClick, rest = __rest(_a, ["text", "size", "responsiveMode", "fontWeight", "type", "state", "colorTheme", "onClick"]);
@@ -82,11 +83,32 @@ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 =
82
83
  var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 14px;\n height: 40px;\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"], ["\n border-radius: 14px;\n height: 40px;\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"])));
83
84
  var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 10px;\n height: 32px;\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"], ["\n border-radius: 10px;\n height: 32px;\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"])));
84
85
  var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border-radius: 8px;\n height: 24px;\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"], ["\n border-radius: 8px;\n height: 24px;\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"])));
85
- var S_Button = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n padding-left: 8px;\n padding-right: 8px;\n\n ", "\n\n &:active:enabled {\n background-color: ", ";\n }\n\n ", ";\n\n & > div {\n ", ";\n }\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n padding-left: 8px;\n padding-right: 8px;\n\n ", "\n\n &:active:enabled {\n background-color: ", ";\n }\n\n ", ";\n\n & > div {\n ", ";\n }\n ", ";\n"])), transitionStyle_1.ButtonTransition, function (_a) {
86
- var theme = _a.theme, colorTheme = _a.colorTheme;
87
- return colorTheme === 'white'
88
- ? theme.ui_cpnt_button_white_base_pressed
89
- : theme.ui_cpnt_button_line_base_pressed;
86
+ var colorThemeDefault = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n &:active:enabled {\n background-color: ", ";\n }\n"], ["\n &:active:enabled {\n background-color: ", ";\n }\n"])), function (_a) {
87
+ var theme = _a.theme;
88
+ return theme.ui_cpnt_button_line_base_pressed;
89
+ });
90
+ var colorThemeWhite = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n &:active:enabled {\n background-color: ", ";\n }\n"], ["\n &:active:enabled {\n background-color: ", ";\n }\n"])), function (_a) {
91
+ var theme = _a.theme;
92
+ return theme.ui_cpnt_button_white_base_pressed;
93
+ });
94
+ var colorThemeWhite2 = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n &:active:enabled {\n background-color: ", ";\n }\n"], ["\n &:active:enabled {\n background-color: ", ";\n }\n"])), function (_a) {
95
+ var theme = _a.theme;
96
+ return theme.ui_cpnt_textbutton_white_variation_base_pressed;
97
+ });
98
+ var S_Button = styled_components_1.default.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n padding-left: 8px;\n padding-right: 8px;\n\n ", "\n\n ", ";\n\n ", ";\n\n & > div {\n ", ";\n }\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n padding-left: 8px;\n padding-right: 8px;\n\n ", "\n\n ", ";\n\n ", ";\n\n & > div {\n ", ";\n }\n ", ";\n"])), transitionStyle_1.ButtonTransition, function (_a) {
99
+ var colorTheme = _a.colorTheme;
100
+ switch (colorTheme) {
101
+ case 'none':
102
+ case 'red':
103
+ case 'grey_01':
104
+ return colorThemeDefault;
105
+ case 'white':
106
+ return colorThemeWhite;
107
+ case 'white2':
108
+ return colorThemeWhite2;
109
+ default:
110
+ return colorThemeDefault;
111
+ }
90
112
  }, function (_a) {
91
113
  var size = _a.size;
92
114
  return size &&
@@ -109,4 +131,4 @@ var S_Button = styled_components_1.default.button(templateObject_5 || (templateO
109
131
  return responsiveMode === 'use' && 'width: 100%';
110
132
  });
111
133
  exports.default = TextButton;
112
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
134
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
package/dist/src/mobile/components/UploadTextButton/UploadTextButton.d.ts CHANGED
@@ -6,7 +6,7 @@ declare type UploadTextButtonProps = {
6
6
  responsiveMode?: 'none' | 'use';
7
7
  fontWeight?: 'bold' | 'regular';
8
8
  state?: 'normal' | 'disabled';
9
- colorTheme?: 'none' | 'red' | 'grey_01' | 'white';
9
+ colorTheme?: 'none' | 'red' | 'grey_01' | 'white' | 'white2';
10
10
  accept?: string;
11
11
  multipleMode?: 'none' | 'use';
12
12
  onClick?: (e: React.ChangeEvent<HTMLInputElement>) => void;
package/dist/src/mobile/components/UploadTextButton/UploadTextButton.js CHANGED
@@ -41,7 +41,8 @@ var textColor = {
41
41
  none: 'usrTextBrandPrimary',
42
42
  red: 'sysTextError',
43
43
  grey_01: 'sysTextPrimary',
44
- white: 'sysTextWhite'
44
+ white: 'sysTextWhite',
45
+ white2: 'sysTextWhite'
45
46
  };
46
47
  function UploadTextButton(_a) {
47
48
  var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.state, state = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'none' : _e, _f = _a.accept, accept = _f === void 0 ? '*' : _f, _g = _a.multipleMode, multipleMode = _g === void 0 ? 'none' : _g, onClick = _a.onClick;
@@ -51,7 +52,7 @@ function UploadTextButton(_a) {
51
52
  }
52
53
  e.target.value = '';
53
54
  };
54
- return (react_1.default.createElement(S_UploadTextButton, { "x-pds-name": "UploadTextButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile", size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, disabled: state === 'disabled' },
55
+ return (react_1.default.createElement(S_UploadTextButton, { "x-pds-name": "UploadTextButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile", size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, disabled: state === 'disabled', colorTheme: colorTheme },
55
56
  react_1.default.createElement("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }),
56
57
  react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
57
58
  }
@@ -62,12 +63,35 @@ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 =
62
63
  var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 14px;\n height: 40px;\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"], ["\n border-radius: 14px;\n height: 40px;\n\n & > div {\n height: 40px;\n line-height: 40px;\n }\n"])));
63
64
  var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 10px;\n height: 32px;\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"], ["\n border-radius: 10px;\n height: 32px;\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"])));
64
65
  var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border-radius: 8px;\n height: 24px;\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"], ["\n border-radius: 8px;\n height: 24px;\n\n & > div {\n height: 24px;\n line-height: 24px;\n }\n"])));
65
- var S_UploadTextButton = styled_components_1.default.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n padding: 0 ", ";\n\n ", "\n\n &:active:not([disabled]) {\n background-color: ", ";\n }\n\n & > div {\n font-weight: ", ";\n }\n\n ", ";\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n padding: 0 ", ";\n\n ", "\n\n &:active:not([disabled]) {\n background-color: ", ";\n }\n\n & > div {\n font-weight: ", ";\n }\n\n ", ";\n ", ";\n"])), function (_a) {
66
+ var colorThemeDefault = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n &:active:not([disabled]) {\n background-color: ", ";\n }\n"], ["\n &:active:not([disabled]) {\n background-color: ", ";\n }\n"])), function (_a) {
67
+ var theme = _a.theme;
68
+ return theme.ui_cpnt_button_line_base_pressed;
69
+ });
70
+ var colorThemeWhite = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n &:active:not([disabled]) {\n background-color: ", ";\n }\n"], ["\n &:active:not([disabled]) {\n background-color: ", ";\n }\n"])), function (_a) {
71
+ var theme = _a.theme;
72
+ return theme.ui_cpnt_button_white_base_pressed;
73
+ });
74
+ var colorThemeWhite2 = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n &:active:not([disabled]) {\n background-color: ", ";\n }\n"], ["\n &:active:not([disabled]) {\n background-color: ", ";\n }\n"])), function (_a) {
75
+ var theme = _a.theme;
76
+ return theme.ui_cpnt_textbutton_white_variation_base_pressed;
77
+ });
78
+ var S_UploadTextButton = styled_components_1.default.label(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n padding: 0 ", ";\n\n ", "\n\n ", ";\n\n & > div {\n font-weight: ", ";\n }\n\n ", ";\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: none;\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n padding: 0 ", ";\n\n ", "\n\n ", ";\n\n & > div {\n font-weight: ", ";\n }\n\n ", ";\n ", ";\n"])), function (_a) {
66
79
  var theme = _a.theme;
67
80
  return theme.spacing.spacingB;
68
81
  }, transitionStyle_1.ButtonTransition, function (_a) {
69
- var theme = _a.theme;
70
- return theme.ui_cpnt_button_line_base_pressed;
82
+ var colorTheme = _a.colorTheme;
83
+ switch (colorTheme) {
84
+ case 'none':
85
+ case 'red':
86
+ case 'grey_01':
87
+ return colorThemeDefault;
88
+ case 'white':
89
+ return colorThemeWhite;
90
+ case 'white2':
91
+ return colorThemeWhite2;
92
+ default:
93
+ return colorThemeDefault;
94
+ }
71
95
  }, function (_a) {
72
96
  var theme = _a.theme, fontWeight = _a.fontWeight;
73
97
  return fontWeight &&
@@ -90,4 +114,4 @@ var S_UploadTextButton = styled_components_1.default.label(templateObject_5 || (
90
114
  return responsiveMode === 'use' && 'width: 100%';
91
115
  });
92
116
  exports.default = UploadTextButton;
93
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
117
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;