pds-dev-kit-web 2.2.114 → 2.2.116

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 (13) hide show
  1. package/dist/src/common/styles/colorSet/UIColor.json +5 -1
  2. package/dist/src/common/styles/colorSet/index.d.ts +4 -0
  3. package/dist/src/common/styles/colorSet/ui-type.d.ts +4 -0
  4. package/dist/src/common/types/form.d.ts +6 -0
  5. package/dist/src/common/types/form.js +8 -0
  6. package/dist/src/desktop/components/Select/Select.d.ts +7 -2
  7. package/dist/src/desktop/components/Select/Select.js +90 -27
  8. package/dist/src/desktop/components/TextField/TextField.js +3 -5
  9. package/dist/src/mobile/components/Select/Select.d.ts +7 -2
  10. package/dist/src/mobile/components/Select/Select.js +87 -20
  11. package/dist/src/mobile/components/TextField/TextField.js +3 -5
  12. package/package.json +1 -1
  13. package/release-note.md +2 -3
package/dist/src/common/styles/colorSet/UIColor.json CHANGED
@@ -872,5 +872,9 @@
872
872
  "ui_cpnt_slider_thumb_normal_undefined": "sys_cpnt_slider_thumb_normal_undefined",
873
873
  "ui_cpnt_editor_buttongroup_undefined": "sys_cpnt_editor_buttongroup_undefined",
874
874
  "ui_cpnt_editor_thumbpreview_undefined": "sys_cpnt_editor_undefined",
875
- "ui_cpnt_dropdown_text_darktheme_hinttext": "sys_text_grey_darktheme_02"
875
+ "ui_cpnt_dropdown_text_darktheme_hinttext": "sys_text_grey_darktheme_02",
876
+ "ui_cpnt_select_dropdown_border_error": "sys_border_line_04",
877
+ "ui_cpnt_select_dropdown_text_error": "sys_text_error_01",
878
+ "ui_cpnt_select_dropdown_text_darktheme_error": "sys_text_error_darktheme_01",
879
+ "ui_cpnt_select_dropdown_border_darktheme_error": "sys_border_line_darktheme_03"
876
880
  }
package/dist/src/common/styles/colorSet/index.d.ts CHANGED
@@ -1730,6 +1730,10 @@ declare const colorSet: {
1730
1730
  ui_cpnt_editor_buttongroup_undefined: string;
1731
1731
  ui_cpnt_editor_thumbpreview_undefined: string;
1732
1732
  ui_cpnt_dropdown_text_darktheme_hinttext: string;
1733
+ ui_cpnt_select_dropdown_border_error: string;
1734
+ ui_cpnt_select_dropdown_text_error: string;
1735
+ ui_cpnt_select_dropdown_text_darktheme_error: string;
1736
+ ui_cpnt_select_dropdown_border_darktheme_error: string;
1733
1737
  };
1734
1738
  };
1735
1739
  export default colorSet;
package/dist/src/common/styles/colorSet/ui-type.d.ts CHANGED
@@ -873,4 +873,8 @@ export interface UITheme {
873
873
  ui_cpnt_editor_buttongroup_undefined: string;
874
874
  ui_cpnt_editor_thumbpreview_undefined: string;
875
875
  ui_cpnt_dropdown_text_darktheme_hinttext: string;
876
+ ui_cpnt_select_dropdown_border_error: string;
877
+ ui_cpnt_select_dropdown_text_error: string;
878
+ ui_cpnt_select_dropdown_text_darktheme_error: string;
879
+ ui_cpnt_select_dropdown_border_darktheme_error: string;
876
880
  }
package/dist/src/common/types/form.d.ts CHANGED
@@ -1,3 +1,9 @@
1
1
  export interface IFormValues {
2
2
  [key: string]: string;
3
3
  }
4
+ /**
5
+ * 중첩된 객체 구조에서 점(.)으로 구분된 경로를 통해 에러 객체를 조회합니다
6
+ */
7
+ export declare const getErrorByName: (errors: {
8
+ [x: string]: any;
9
+ }, name: string) => any;
package/dist/src/common/types/form.js CHANGED
@@ -1,2 +1,10 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.getErrorByName = void 0;
4
+ /**
5
+ * 중첩된 객체 구조에서 점(.)으로 구분된 경로를 통해 에러 객체를 조회합니다
6
+ */
7
+ var getErrorByName = function (errors, name) {
8
+ return name.split('.').reduce(function (errors, property) { return errors && errors[property]; }, errors);
9
+ };
10
+ exports.getErrorByName = getErrorByName;
package/dist/src/desktop/components/Select/Select.d.ts CHANGED
@@ -1,10 +1,12 @@
1
- import type { PDSTextType } from '../../../common';
1
+ import { Path } from 'react-hook-form';
2
+ import type { IFormValues, PDSTextType } from '../../../common';
2
3
  import type { SelectHTMLAttributes } from 'react';
3
4
  type SelectOption = {
4
5
  text: string;
5
6
  value: SelectHTMLAttributes<HTMLSelectElement>['value'];
6
7
  };
7
8
  type SelectProps = {
9
+ name?: Path<IFormValues>;
8
10
  hintText?: PDSTextType;
9
11
  defaultValue?: SelectOption;
10
12
  value?: SelectOption['value'];
@@ -14,7 +16,10 @@ type SelectProps = {
14
16
  state?: 'normal' | 'read_only' | 'disabled';
15
17
  colorTheme?: 'none' | 'dark';
16
18
  customWidth?: string;
19
+ validation?: {
20
+ [key: string]: any;
21
+ };
17
22
  onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
18
23
  };
19
- declare function Select({ hintText, defaultValue, value, valueArray, size, responsiveMode, state, colorTheme, customWidth, onChange }: SelectProps): JSX.Element;
24
+ declare function Select({ name, hintText, defaultValue, value, valueArray, size, responsiveMode, state, colorTheme, customWidth, validation, onChange }: SelectProps): JSX.Element;
20
25
  export default Select;
package/dist/src/desktop/components/Select/Select.js CHANGED
@@ -39,16 +39,40 @@ var __importStar = (this && this.__importStar) || function (mod) {
39
39
  };
40
40
  Object.defineProperty(exports, "__esModule", { value: true });
41
41
  var jsx_runtime_1 = require("react/jsx-runtime");
42
+ var react_hook_form_1 = require("react-hook-form");
43
+ var types_1 = require("../../../common/types");
42
44
  var styled_components_1 = __importStar(require("styled-components"));
43
45
  var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
44
46
  var hybrid_1 = require("../../../hybrid");
45
- var HINT = 'HINT_VALUE';
46
47
  function Select(_a) {
47
- var _b;
48
- var hintText = _a.hintText, defaultValue = _a.defaultValue, value = _a.value, valueArray = _a.valueArray, _c = _a.size, size = _c === void 0 ? 'large' : _c, _d = _a.responsiveMode, responsiveMode = _d === void 0 ? 'none' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f, customWidth = _a.customWidth, onChange = _a.onChange;
48
+ var _b, _c;
49
+ var name = _a.name, hintText = _a.hintText, defaultValue = _a.defaultValue, value = _a.value, valueArray = _a.valueArray, _d = _a.size, size = _d === void 0 ? 'large' : _d, _e = _a.responsiveMode, responsiveMode = _e === void 0 ? 'none' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, _g = _a.colorTheme, colorTheme = _g === void 0 ? 'none' : _g, customWidth = _a.customWidth, validation = _a.validation, onChange = _a.onChange;
50
+ // validation을 확장하여 힌트 체크 추가
51
+ var extendedValidation = __assign(__assign({}, validation), { validate: function (value) {
52
+ var _a;
53
+ // 값이 없으면 required.message 노출
54
+ if (!value || value.length === 0) {
55
+ if (validation === null || validation === void 0 ? void 0 : validation.required) {
56
+ return ((_a = validation === null || validation === void 0 ? void 0 : validation.required) === null || _a === void 0 ? void 0 : _a.message) || false;
57
+ }
58
+ }
59
+ // 기존 validate 함수가 있다면 실행
60
+ if (validation === null || validation === void 0 ? void 0 : validation.validate) {
61
+ return validation.validate(value);
62
+ }
63
+ return true;
64
+ } });
65
+ var formContext = (0, react_hook_form_1.useFormContext)();
66
+ var register = name && formContext ? formContext.register(name, extendedValidation) : null;
67
+ var isError = name && formContext ? Boolean((0, types_1.getErrorByName)(formContext.formState.errors, name)) : false;
49
68
  var handleChange = function (e) {
50
- if (onChange) {
51
- onChange(e);
69
+ register === null || register === void 0 ? void 0 : register.onChange(e);
70
+ onChange === null || onChange === void 0 ? void 0 : onChange(e);
71
+ };
72
+ var handleBlur = function (e) {
73
+ if (register) {
74
+ register.onBlur(e);
75
+ formContext.trigger(name);
52
76
  }
53
77
  };
54
78
  var getIconColorKey = function () {
@@ -56,28 +80,28 @@ function Select(_a) {
56
80
  if (colorTheme === 'dark') {
57
81
  return 'ui_cpnt_select_icon_darktheme_disabled';
58
82
  }
59
- if (colorTheme === 'none') {
60
- return 'ui_cpnt_select_icon_02';
61
- }
83
+ return 'ui_cpnt_select_icon_02';
62
84
  }
63
85
  if (colorTheme === 'dark') {
64
86
  return 'ui_cpnt_select_icon_darktheme_default';
65
87
  }
66
- if (colorTheme === 'none') {
67
- return 'ui_cpnt_select_icon_01';
68
- }
88
+ return 'ui_cpnt_select_icon_01';
69
89
  };
70
- return ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ "x-pds-name": "Select", "x-pds-element-type": "component", "x-pds-device-type": "desktop", "$size": size, responsiveMode: responsiveMode, tabIndex: 0, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_Icon_Wrapper, __assign({ state: state }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_arrow_down", colorKey: getIconColorKey() }) })), (0, jsx_runtime_1.jsxs)(S_Select, __assign({ disabled: state === 'disabled' || state === 'read_only', state: state, "$size": size, colorTheme: colorTheme, onChange: handleChange, defaultValue: (_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _b !== void 0 ? _b : HINT, value: value || undefined }, { children: [hintText && ((0, jsx_runtime_1.jsx)("option", __assign({ disabled: true, value: HINT }, { children: hintText }))), valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)("option", __assign({ value: el.value }, { children: el.text }), el.value)); })] }))] })));
90
+ return ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ "x-pds-name": "Select", "x-pds-element-type": "component", "x-pds-device-type": "desktop", "$size": size, responsiveMode: responsiveMode, tabIndex: 0, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsxs)(S_SelectWrapper, { children: [(0, jsx_runtime_1.jsx)(S_Icon_Wrapper, __assign({ state: state }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_arrow_down", colorKey: getIconColorKey() }) })), (0, jsx_runtime_1.jsxs)(S_Select, __assign({}, register, { disabled: state === 'disabled' || state === 'read_only', state: state, isError: isError, "$size": size, colorTheme: colorTheme, onChange: handleChange, onBlur: handleBlur, defaultValue: (_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _b !== void 0 ? _b : '', value: value || undefined }, { children: [hintText && ((0, jsx_runtime_1.jsx)("option", __assign({ disabled: true, value: "" }, { children: hintText }))), valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)("option", __assign({ value: el.value }, { children: el.text }), el.value)); })] }))] }), name &&
91
+ ((_c = (0, types_1.getErrorByName)(formContext.formState.errors, name)) === null || _c === void 0 ? void 0 : _c.message) &&
92
+ state === 'normal' && ((0, jsx_runtime_1.jsx)(S_Error, __assign({ colorTheme: colorTheme }, { children: (0, types_1.getErrorByName)(formContext.formState.errors, name).message })))] })));
71
93
  }
72
94
  var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 48px;\n width: 432px;\n"], ["\n height: 48px;\n width: 432px;\n"])));
73
95
  var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 40px;\n width: 188px;\n"], ["\n height: 40px;\n width: 188px;\n"])));
74
96
  var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 32px;\n width: 188px;\n"], ["\n height: 32px;\n width: 188px;\n"])));
75
97
  var rlarge = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: 48px;\n width: 100%;\n"], ["\n height: 48px;\n width: 100%;\n"])));
76
- var dark = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n\n :disabled {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n }\n\n :focus {\n border: 2px solid ", " !important;\n color: ", ";\n }\n"], ["\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n\n :disabled {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n }\n\n :focus {\n border: 2px solid ", " !important;\n color: ", ";\n }\n"])), function (_a) {
98
+ var dark = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n border: 2px solid\n ", ";\n color: ", ";\n\n :disabled {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n }\n\n :focus {\n border: 2px solid\n ", " !important;\n color: ", ";\n }\n"], ["\n background-color: ", ";\n border: 2px solid\n ", ";\n color: ", ";\n\n :disabled {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n }\n\n :focus {\n border: 2px solid\n ", " !important;\n color: ", ";\n }\n"])), function (_a) {
77
99
  var theme = _a.theme;
78
100
  return theme.ui_cpnt_select_base_darktheme_normal;
79
101
  }, function (_a) {
80
- var theme = _a.theme;
102
+ var theme = _a.theme, isError = _a.isError;
103
+ if (isError)
104
+ return theme.ui_cpnt_select_dropdown_border_darktheme_error;
81
105
  return theme.ui_cpnt_select_border_darktheme_normal;
82
106
  }, function (_a) {
83
107
  var theme = _a.theme;
@@ -94,7 +118,9 @@ var dark = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 =
94
118
  ? theme.ui_cpnt_select_text_darktheme_readonly
95
119
  : theme.ui_cpnt_select_text_darktheme_disabled;
96
120
  }, function (_a) {
97
- var theme = _a.theme;
121
+ var theme = _a.theme, isError = _a.isError;
122
+ if (isError)
123
+ return theme.ui_cpnt_select_dropdown_border_darktheme_error;
98
124
  return theme.ui_cpnt_select_border_darktheme_focus;
99
125
  }, function (_a) {
100
126
  var theme = _a.theme;
@@ -104,10 +130,10 @@ var S_Box = styled_components_1.default.div(templateObject_6 || (templateObject_
104
130
  var $size = _a.$size;
105
131
  return $size &&
106
132
  {
107
- large: large,
108
- medium: medium,
109
- small: small,
110
- rlarge: rlarge
133
+ small: 'width: 188px;',
134
+ medium: 'width: 188px;',
135
+ large: 'width: 432px;',
136
+ rlarge: 'width: 100%'
111
137
  }[$size];
112
138
  }, function (_a) {
113
139
  var responsiveMode = _a.responsiveMode;
@@ -116,11 +142,12 @@ var S_Box = styled_components_1.default.div(templateObject_6 || (templateObject_
116
142
  var customWidth = _a.customWidth;
117
143
  return customWidth && "width: ".concat(customWidth, ";");
118
144
  });
119
- var S_Icon_Wrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 16px;\n pointer-events: none;\n position: absolute;\n right: ", ";\n top: 50%;\n transform: translateY(-50%);\n width: 16px;\n"], ["\n align-items: center;\n display: flex;\n height: 16px;\n pointer-events: none;\n position: absolute;\n right: ", ";\n top: 50%;\n transform: translateY(-50%);\n width: 16px;\n"])), function (_a) {
145
+ var S_SelectWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n"], ["\n position: relative;\n width: 100%;\n"])));
146
+ var S_Icon_Wrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 16px;\n pointer-events: none;\n position: absolute;\n right: ", ";\n top: 50%;\n transform: translateY(-50%);\n width: 16px;\n"], ["\n align-items: center;\n display: flex;\n height: 16px;\n pointer-events: none;\n position: absolute;\n right: ", ";\n top: 50%;\n transform: translateY(-50%);\n width: 16px;\n"])), function (_a) {
120
147
  var theme = _a.theme;
121
148
  return theme.spacing.spacingD;
122
149
  });
123
- var backgroundHoverColor = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (_a) {
150
+ var backgroundHoverColor = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (_a) {
124
151
  var colorTheme = _a.colorTheme, theme = _a.theme;
125
152
  switch (colorTheme) {
126
153
  case 'none':
@@ -131,7 +158,7 @@ var backgroundHoverColor = (0, styled_components_1.css)(templateObject_8 || (tem
131
158
  return theme.ui_cpnt_textfield_base_hover;
132
159
  }
133
160
  });
134
- var backgroundActiveColor = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (_a) {
161
+ var backgroundActiveColor = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (_a) {
135
162
  var colorTheme = _a.colorTheme, theme = _a.theme;
136
163
  switch (colorTheme) {
137
164
  case 'none':
@@ -142,12 +169,23 @@ var backgroundActiveColor = (0, styled_components_1.css)(templateObject_9 || (te
142
169
  return theme.ui_cpnt_textfield_base_pressed;
143
170
  }
144
171
  });
145
- var normalActionColor = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n"], ["\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n"])), backgroundHoverColor, backgroundActiveColor);
146
- var S_Select = styled_components_1.default.select(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n appearance: none;\n background-color: ", ";\n border: 2px solid ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n cursor: pointer;\n display: -webkit-box;\n font-family: inherit;\n font-size: ", ";\n height: 100%;\n overflow: hidden;\n padding-left: ", ";\n padding-right: ", ";\n text-overflow: ellipsis;\n width: 100%;\n word-break: break-all;\n\n :disabled {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n cursor: ", ";\n opacity: 1;\n }\n\n :focus {\n border: 2px solid ", " !important;\n color: ", ";\n outline: 0 !important;\n outline-offset: 0 !important;\n }\n\n ", "\n\n ", "\n\n ", "\n"], ["\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n appearance: none;\n background-color: ", ";\n border: 2px solid ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n cursor: pointer;\n display: -webkit-box;\n font-family: inherit;\n font-size: ", ";\n height: 100%;\n overflow: hidden;\n padding-left: ", ";\n padding-right: ", ";\n text-overflow: ellipsis;\n width: 100%;\n word-break: break-all;\n\n :disabled {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n cursor: ", ";\n opacity: 1;\n }\n\n :focus {\n border: 2px solid ", " !important;\n color: ", ";\n outline: 0 !important;\n outline-offset: 0 !important;\n }\n\n ", "\n\n ", "\n\n ", "\n"])), function (_a) {
172
+ var normalActionColor = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n"], ["\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n"])), backgroundHoverColor, backgroundActiveColor);
173
+ var S_Select = styled_components_1.default.select(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n appearance: none;\n background-color: ", ";\n ", ";\n border: 2px solid\n ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n cursor: pointer;\n display: -webkit-box;\n font-family: inherit;\n font-size: ", ";\n overflow: hidden;\n padding-left: ", ";\n padding-right: ", ";\n text-overflow: ellipsis;\n width: 100%;\n word-break: break-all;\n\n :disabled {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n cursor: ", ";\n opacity: 1;\n }\n\n :focus {\n border: 2px solid\n ", " !important;\n color: ", ";\n outline: 0 !important;\n outline-offset: 0 !important;\n }\n\n ", "\n\n ", "\n\n ", "\n"], ["\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n appearance: none;\n background-color: ", ";\n ", ";\n border: 2px solid\n ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n cursor: pointer;\n display: -webkit-box;\n font-family: inherit;\n font-size: ", ";\n overflow: hidden;\n padding-left: ", ";\n padding-right: ", ";\n text-overflow: ellipsis;\n width: 100%;\n word-break: break-all;\n\n :disabled {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n cursor: ", ";\n opacity: 1;\n }\n\n :focus {\n border: 2px solid\n ", " !important;\n color: ", ";\n outline: 0 !important;\n outline-offset: 0 !important;\n }\n\n ", "\n\n ", "\n\n ", "\n"])), function (_a) {
147
174
  var theme = _a.theme;
148
175
  return theme.ui_cpnt_select_base_normal;
149
176
  }, function (_a) {
150
- var theme = _a.theme;
177
+ var $size = _a.$size;
178
+ return $size &&
179
+ {
180
+ large: large,
181
+ medium: medium,
182
+ small: small,
183
+ rlarge: rlarge
184
+ }[$size];
185
+ }, function (_a) {
186
+ var theme = _a.theme, isError = _a.isError;
187
+ if (isError)
188
+ return theme.ui_cpnt_select_dropdown_border_error;
151
189
  return theme.ui_cpnt_select_border_normal;
152
190
  }, function (_a) {
153
191
  var $size = _a.$size;
@@ -192,7 +230,9 @@ var S_Select = styled_components_1.default.select(templateObject_11 || (template
192
230
  return 'pointer';
193
231
  }
194
232
  }, function (_a) {
195
- var theme = _a.theme;
233
+ var theme = _a.theme, isError = _a.isError;
234
+ if (isError)
235
+ return theme.ui_cpnt_select_dropdown_border_error;
196
236
  return theme.ui_cpnt_select_border_focus;
197
237
  }, function (_a) {
198
238
  var theme = _a.theme;
@@ -204,5 +244,28 @@ var S_Select = styled_components_1.default.select(templateObject_11 || (template
204
244
  var state = _a.state;
205
245
  return state === 'normal' && normalActionColor;
206
246
  });
247
+ var S_Error = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n white-space: pre-wrap;\n"], ["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n white-space: pre-wrap;\n"])), function (_a) {
248
+ var theme = _a.theme, colorTheme = _a.colorTheme;
249
+ switch (colorTheme) {
250
+ case 'none': {
251
+ return theme.ui_cpnt_select_dropdown_text_error;
252
+ }
253
+ case 'dark': {
254
+ return theme.ui_cpnt_select_dropdown_text_darktheme_error;
255
+ }
256
+ }
257
+ }, function (_a) {
258
+ var theme = _a.theme;
259
+ return theme.desktopFontSize.caption2;
260
+ }, function (_a) {
261
+ var theme = _a.theme;
262
+ return theme.fontWeight.normal;
263
+ }, function (_a) {
264
+ var theme = _a.theme;
265
+ return theme.desktopLineHeight.caption2;
266
+ }, function (_a) {
267
+ var theme = _a.theme;
268
+ return theme.spacing.spacingA;
269
+ });
207
270
  exports.default = Select;
208
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
271
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
package/dist/src/desktop/components/TextField/TextField.js CHANGED
@@ -42,6 +42,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
42
42
  /* eslint-disable react/jsx-no-bind */
43
43
  var react_1 = require("react");
44
44
  var react_hook_form_1 = require("react-hook-form");
45
+ var types_1 = require("../../../common/types");
45
46
  var styled_components_1 = __importStar(require("styled-components"));
46
47
  var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
47
48
  var hybrid_1 = require("../../../hybrid");
@@ -69,10 +70,7 @@ function TextField(_a) {
69
70
  var _w = (0, react_1.useState)(false), isFocused = _w[0], setIsFocused = _w[1];
70
71
  var _x = (0, react_hook_form_1.useFormContext)(), register = _x.register, trigger = _x.trigger, errors = _x.formState.errors;
71
72
  var _y = register(name, validation), validateOnChange = _y.onChange, validateOnBlur = _y.onBlur;
72
- var getErrorByName = function (errors, name) {
73
- return name.split('.').reduce(function (errors, property) { return errors && errors[property]; }, errors);
74
- };
75
- var isError = getErrorByName(errors, name);
73
+ var isError = (0, types_1.getErrorByName)(errors, name);
76
74
  var handleClickIBtn1 = function () {
77
75
  if (onClickIBtn1) {
78
76
  onClickIBtn1();
@@ -158,7 +156,7 @@ function TextField(_a) {
158
156
  }[colorTheme]), iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 }))] })] }));
159
157
  }
160
158
  };
161
- return ((0, jsx_runtime_1.jsxs)(S_TextFieldBox, __assign({ "x-pds-name": "TextField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_TextFieldWrapper, __assign({ size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: Boolean(isError), state: state, colorTheme: colorTheme, customWidth: customWidth }, { children: S_TextField() })), ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && state === 'normal' && ((0, jsx_runtime_1.jsx)(S_Error, __assign({ colorTheme: colorTheme }, { children: errors[name].message })))] })));
159
+ return ((0, jsx_runtime_1.jsxs)(S_TextFieldBox, __assign({ "x-pds-name": "TextField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_TextFieldWrapper, __assign({ size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: Boolean(isError), state: state, colorTheme: colorTheme, customWidth: customWidth }, { children: S_TextField() })), ((_b = (0, types_1.getErrorByName)(errors, name)) === null || _b === void 0 ? void 0 : _b.message) && state === 'normal' && ((0, jsx_runtime_1.jsx)(S_Error, __assign({ colorTheme: colorTheme }, { children: (0, types_1.getErrorByName)(errors, name).message })))] })));
162
160
  }
163
161
  var S_TextFieldBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n ", ";\n ", "\n"], ["\n ", ";\n ", ";\n ", "\n"])), function (_a) {
164
162
  var size = _a.size;
package/dist/src/mobile/components/Select/Select.d.ts CHANGED
@@ -1,10 +1,12 @@
1
- import type { PDSTextType } from '../../../common';
1
+ import { Path } from 'react-hook-form';
2
+ import type { IFormValues, PDSTextType } from '../../../common';
2
3
  import type { SelectHTMLAttributes } from 'react';
3
4
  type SelectOption = {
4
5
  text: string;
5
6
  value: SelectHTMLAttributes<HTMLSelectElement>['value'];
6
7
  };
7
8
  type SelectProps = {
9
+ name?: Path<IFormValues>;
8
10
  hintText?: PDSTextType;
9
11
  defaultValue?: SelectOption;
10
12
  value?: SelectOption['value'];
@@ -14,7 +16,10 @@ type SelectProps = {
14
16
  state?: 'normal' | 'read_only' | 'disabled';
15
17
  colorTheme?: 'none' | 'dark';
16
18
  customWidth?: string;
19
+ validation?: {
20
+ [key: string]: any;
21
+ };
17
22
  onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
18
23
  };
19
- declare function Select({ hintText, defaultValue, value, valueArray, size, responsiveMode, state, colorTheme, customWidth, onChange }: SelectProps): JSX.Element;
24
+ declare function Select({ name, hintText, defaultValue, value, valueArray, size, responsiveMode, state, colorTheme, customWidth, validation, onChange }: SelectProps): JSX.Element;
20
25
  export default Select;
package/dist/src/mobile/components/Select/Select.js CHANGED
@@ -39,16 +39,40 @@ var __importStar = (this && this.__importStar) || function (mod) {
39
39
  };
40
40
  Object.defineProperty(exports, "__esModule", { value: true });
41
41
  var jsx_runtime_1 = require("react/jsx-runtime");
42
+ var react_hook_form_1 = require("react-hook-form");
43
+ var types_1 = require("../../../common/types");
42
44
  var styled_components_1 = __importStar(require("styled-components"));
43
45
  var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
44
46
  var hybrid_1 = require("../../../hybrid");
45
- var HINT = 'HINT_VALUE';
46
47
  function Select(_a) {
47
- var _b;
48
- var hintText = _a.hintText, defaultValue = _a.defaultValue, value = _a.value, valueArray = _a.valueArray, _c = _a.size, size = _c === void 0 ? 'large' : _c, _d = _a.responsiveMode, responsiveMode = _d === void 0 ? 'none' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f, customWidth = _a.customWidth, onChange = _a.onChange;
48
+ var _b, _c;
49
+ var name = _a.name, hintText = _a.hintText, defaultValue = _a.defaultValue, value = _a.value, valueArray = _a.valueArray, _d = _a.size, size = _d === void 0 ? 'large' : _d, _e = _a.responsiveMode, responsiveMode = _e === void 0 ? 'none' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, _g = _a.colorTheme, colorTheme = _g === void 0 ? 'none' : _g, customWidth = _a.customWidth, validation = _a.validation, onChange = _a.onChange;
50
+ // validation을 확장하여 힌트 체크 추가
51
+ var extendedValidation = __assign(__assign({}, validation), { validate: function (value) {
52
+ var _a;
53
+ // 값이 없으면 required.message 노출
54
+ if (!value || value.length === 0) {
55
+ if (validation === null || validation === void 0 ? void 0 : validation.required) {
56
+ return ((_a = validation === null || validation === void 0 ? void 0 : validation.required) === null || _a === void 0 ? void 0 : _a.message) || false;
57
+ }
58
+ }
59
+ // 기존 validate 함수가 있다면 실행
60
+ if (validation === null || validation === void 0 ? void 0 : validation.validate) {
61
+ return validation.validate(value);
62
+ }
63
+ return true;
64
+ } });
65
+ var formContext = (0, react_hook_form_1.useFormContext)();
66
+ var register = name && formContext ? formContext.register(name, extendedValidation) : null;
67
+ var isError = name && formContext ? Boolean((0, types_1.getErrorByName)(formContext.formState.errors, name)) : false;
49
68
  var handleChange = function (e) {
50
- if (onChange) {
51
- onChange(e);
69
+ register === null || register === void 0 ? void 0 : register.onChange(e);
70
+ onChange === null || onChange === void 0 ? void 0 : onChange(e);
71
+ };
72
+ var handleBlur = function (e) {
73
+ if (register) {
74
+ register.onBlur(e);
75
+ formContext.trigger(name);
52
76
  }
53
77
  };
54
78
  var getIconColorKey = function () {
@@ -63,17 +87,21 @@ function Select(_a) {
63
87
  }
64
88
  return 'ui_cpnt_select_icon_01';
65
89
  };
66
- return ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ "x-pds-name": "Select", "x-pds-element-type": "component", "x-pds-device-type": "mobile", "$size": size, responsiveMode: responsiveMode, tabIndex: 0, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_Icon_Wrapper, __assign({ state: state }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_arrow_down", colorKey: getIconColorKey() }) })), (0, jsx_runtime_1.jsxs)(S_Select, __assign({ disabled: state === 'disabled' || state === 'read_only', state: state, "$size": size, colorTheme: colorTheme, onChange: handleChange, defaultValue: (_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _b !== void 0 ? _b : HINT, value: value || undefined }, { children: [hintText && ((0, jsx_runtime_1.jsx)("option", __assign({ disabled: true, value: HINT }, { children: hintText }))), valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)("option", __assign({ value: el.value }, { children: el.text }), el.value)); })] }))] })));
90
+ return ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ "x-pds-name": "Select", "x-pds-element-type": "component", "x-pds-device-type": "mobile", "$size": size, responsiveMode: responsiveMode, tabIndex: 0, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsxs)(S_SelectWrapper, { children: [(0, jsx_runtime_1.jsx)(S_Icon_Wrapper, __assign({ state: state }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_arrow_down", colorKey: getIconColorKey() }) })), (0, jsx_runtime_1.jsxs)(S_Select, __assign({}, register, { disabled: state === 'disabled' || state === 'read_only', state: state, isError: isError, "$size": size, colorTheme: colorTheme, onChange: handleChange, onBlur: handleBlur, defaultValue: (_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _b !== void 0 ? _b : '', value: value || undefined }, { children: [hintText && ((0, jsx_runtime_1.jsx)("option", __assign({ disabled: true, value: "" }, { children: hintText }))), valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)("option", __assign({ value: el.value }, { children: el.text }), el.value)); })] }))] }), name &&
91
+ ((_c = (0, types_1.getErrorByName)(formContext.formState.errors, name)) === null || _c === void 0 ? void 0 : _c.message) &&
92
+ state === 'normal' && ((0, jsx_runtime_1.jsx)(S_Error, __assign({ colorTheme: colorTheme }, { children: (0, types_1.getErrorByName)(formContext.formState.errors, name).message })))] })));
67
93
  }
68
94
  var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 48px;\n width: 432px;\n"], ["\n height: 48px;\n width: 432px;\n"])));
69
95
  var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 40px;\n width: 188px;\n"], ["\n height: 40px;\n width: 188px;\n"])));
70
96
  var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 32px;\n width: 188px;\n"], ["\n height: 32px;\n width: 188px;\n"])));
71
97
  var rlarge = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: 48px;\n width: 100%;\n"], ["\n height: 48px;\n width: 100%;\n"])));
72
- var dark = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n\n :disabled {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n }\n\n :focus {\n border: 2px solid ", " !important;\n color: ", ";\n }\n"], ["\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n\n :disabled {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n }\n\n :focus {\n border: 2px solid ", " !important;\n color: ", ";\n }\n"])), function (_a) {
98
+ var dark = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n border: 2px solid\n ", ";\n color: ", ";\n\n :disabled {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n }\n\n :focus {\n border: 2px solid\n ", " !important;\n color: ", ";\n }\n"], ["\n background-color: ", ";\n border: 2px solid\n ", ";\n color: ", ";\n\n :disabled {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n }\n\n :focus {\n border: 2px solid\n ", " !important;\n color: ", ";\n }\n"])), function (_a) {
73
99
  var theme = _a.theme;
74
100
  return theme.ui_cpnt_select_base_darktheme_normal;
75
101
  }, function (_a) {
76
- var theme = _a.theme;
102
+ var theme = _a.theme, isError = _a.isError;
103
+ if (isError)
104
+ return theme.ui_cpnt_select_dropdown_border_darktheme_error;
77
105
  return theme.ui_cpnt_select_border_darktheme_normal;
78
106
  }, function (_a) {
79
107
  var theme = _a.theme;
@@ -90,7 +118,9 @@ var dark = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 =
90
118
  ? theme.ui_cpnt_select_text_darktheme_readonly
91
119
  : theme.ui_cpnt_select_text_darktheme_disabled;
92
120
  }, function (_a) {
93
- var theme = _a.theme;
121
+ var theme = _a.theme, isError = _a.isError;
122
+ if (isError)
123
+ return theme.ui_cpnt_select_dropdown_border_darktheme_error;
94
124
  return theme.ui_cpnt_select_border_darktheme_focus;
95
125
  }, function (_a) {
96
126
  var theme = _a.theme;
@@ -100,10 +130,10 @@ var S_Box = styled_components_1.default.div(templateObject_6 || (templateObject_
100
130
  var $size = _a.$size;
101
131
  return $size &&
102
132
  {
103
- large: large,
104
- medium: medium,
105
- small: small,
106
- rlarge: rlarge
133
+ small: 'width: 188px;',
134
+ medium: 'width: 188px;',
135
+ large: 'width: 432px;',
136
+ rlarge: 'width: 100%'
107
137
  }[$size];
108
138
  }, function (_a) {
109
139
  var responsiveMode = _a.responsiveMode;
@@ -112,11 +142,12 @@ var S_Box = styled_components_1.default.div(templateObject_6 || (templateObject_
112
142
  var customWidth = _a.customWidth;
113
143
  return customWidth && "width: ".concat(customWidth, ";");
114
144
  });
115
- var S_Icon_Wrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 16px;\n position: absolute;\n right: ", ";\n top: 50%;\n transform: translateY(-50%);\n width: 16px;\n"], ["\n align-items: center;\n display: flex;\n height: 16px;\n position: absolute;\n right: ", ";\n top: 50%;\n transform: translateY(-50%);\n width: 16px;\n"])), function (_a) {
145
+ var S_SelectWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n"], ["\n position: relative;\n width: 100%;\n"])));
146
+ var S_Icon_Wrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 16px;\n position: absolute;\n right: ", ";\n top: 50%;\n transform: translateY(-50%);\n width: 16px;\n"], ["\n align-items: center;\n display: flex;\n height: 16px;\n position: absolute;\n right: ", ";\n top: 50%;\n transform: translateY(-50%);\n width: 16px;\n"])), function (_a) {
116
147
  var theme = _a.theme;
117
148
  return theme.spacing.spacingD;
118
149
  });
119
- var backgroundActiveColor = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (_a) {
150
+ var backgroundActiveColor = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (_a) {
120
151
  var colorTheme = _a.colorTheme, theme = _a.theme;
121
152
  switch (colorTheme) {
122
153
  case 'none':
@@ -127,12 +158,23 @@ var backgroundActiveColor = (0, styled_components_1.css)(templateObject_8 || (te
127
158
  return theme.ui_cpnt_textfield_base_pressed;
128
159
  }
129
160
  });
130
- var normalActionColor = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n &:active {\n background-color: ", ";\n }\n"], ["\n &:active {\n background-color: ", ";\n }\n"])), backgroundActiveColor);
131
- var S_Select = styled_components_1.default.select(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n appearance: none;\n background-color: ", ";\n border: 2px solid ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n display: -webkit-box;\n font-family: inherit;\n font-size: ", ";\n height: 100%;\n overflow: hidden;\n padding-left: ", ";\n padding-right: ", ";\n text-overflow: ellipsis;\n width: 100%;\n word-break: break-all;\n\n :disabled {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n opacity: 1;\n }\n\n :focus {\n border: 2px solid ", " !important;\n color: ", ";\n outline: 0 !important;\n outline-offset: 0 !important;\n }\n\n ", "\n\n ", "\n\n ", "\n"], ["\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n appearance: none;\n background-color: ", ";\n border: 2px solid ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n display: -webkit-box;\n font-family: inherit;\n font-size: ", ";\n height: 100%;\n overflow: hidden;\n padding-left: ", ";\n padding-right: ", ";\n text-overflow: ellipsis;\n width: 100%;\n word-break: break-all;\n\n :disabled {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n opacity: 1;\n }\n\n :focus {\n border: 2px solid ", " !important;\n color: ", ";\n outline: 0 !important;\n outline-offset: 0 !important;\n }\n\n ", "\n\n ", "\n\n ", "\n"])), function (_a) {
161
+ var normalActionColor = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n &:active {\n background-color: ", ";\n }\n"], ["\n &:active {\n background-color: ", ";\n }\n"])), backgroundActiveColor);
162
+ var S_Select = styled_components_1.default.select(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n appearance: none;\n background-color: ", ";\n ", ";\n border: 2px solid\n ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n display: -webkit-box;\n font-family: inherit;\n font-size: ", ";\n overflow: hidden;\n padding-left: ", ";\n padding-right: ", ";\n text-overflow: ellipsis;\n width: 100%;\n word-break: break-all;\n\n :disabled {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n opacity: 1;\n }\n\n :focus {\n border: 2px solid\n ", " !important;\n color: ", ";\n outline: 0 !important;\n outline-offset: 0 !important;\n }\n\n ", "\n\n ", "\n\n ", "\n"], ["\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n appearance: none;\n background-color: ", ";\n ", ";\n border: 2px solid\n ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n display: -webkit-box;\n font-family: inherit;\n font-size: ", ";\n overflow: hidden;\n padding-left: ", ";\n padding-right: ", ";\n text-overflow: ellipsis;\n width: 100%;\n word-break: break-all;\n\n :disabled {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n opacity: 1;\n }\n\n :focus {\n border: 2px solid\n ", " !important;\n color: ", ";\n outline: 0 !important;\n outline-offset: 0 !important;\n }\n\n ", "\n\n ", "\n\n ", "\n"])), function (_a) {
132
163
  var theme = _a.theme;
133
164
  return theme.ui_cpnt_select_base_normal;
134
165
  }, function (_a) {
135
- var theme = _a.theme;
166
+ var $size = _a.$size;
167
+ return $size &&
168
+ {
169
+ large: large,
170
+ medium: medium,
171
+ small: small,
172
+ rlarge: rlarge
173
+ }[$size];
174
+ }, function (_a) {
175
+ var theme = _a.theme, isError = _a.isError;
176
+ if (isError)
177
+ return theme.ui_cpnt_select_dropdown_border_error;
136
178
  return theme.ui_cpnt_select_border_normal;
137
179
  }, function (_a) {
138
180
  var $size = _a.$size;
@@ -167,7 +209,9 @@ var S_Select = styled_components_1.default.select(templateObject_10 || (template
167
209
  ? theme.ui_cpnt_select_text_readonly
168
210
  : theme.ui_cpnt_select_text_disabled;
169
211
  }, function (_a) {
170
- var theme = _a.theme;
212
+ var theme = _a.theme, isError = _a.isError;
213
+ if (isError)
214
+ return theme.ui_cpnt_select_dropdown_border_error;
171
215
  return theme.ui_cpnt_select_border_focus;
172
216
  }, function (_a) {
173
217
  var theme = _a.theme;
@@ -179,5 +223,28 @@ var S_Select = styled_components_1.default.select(templateObject_10 || (template
179
223
  var state = _a.state;
180
224
  return state === 'normal' && normalActionColor;
181
225
  });
226
+ var S_Error = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n white-space: pre-wrap;\n"], ["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n white-space: pre-wrap;\n"])), function (_a) {
227
+ var theme = _a.theme, colorTheme = _a.colorTheme;
228
+ switch (colorTheme) {
229
+ case 'none': {
230
+ return theme.ui_cpnt_select_dropdown_text_error;
231
+ }
232
+ case 'dark': {
233
+ return theme.ui_cpnt_select_dropdown_text_darktheme_error;
234
+ }
235
+ }
236
+ }, function (_a) {
237
+ var theme = _a.theme;
238
+ return theme.desktopFontSize.caption2;
239
+ }, function (_a) {
240
+ var theme = _a.theme;
241
+ return theme.fontWeight.normal;
242
+ }, function (_a) {
243
+ var theme = _a.theme;
244
+ return theme.desktopLineHeight.caption2;
245
+ }, function (_a) {
246
+ var theme = _a.theme;
247
+ return theme.spacing.spacingA;
248
+ });
182
249
  exports.default = Select;
183
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
250
+ 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/mobile/components/TextField/TextField.js CHANGED
@@ -42,6 +42,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
42
42
  /* eslint-disable react/jsx-no-bind */
43
43
  var react_1 = require("react");
44
44
  var react_hook_form_1 = require("react-hook-form");
45
+ var types_1 = require("../../../common/types");
45
46
  var styled_components_1 = __importStar(require("styled-components"));
46
47
  var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
47
48
  var hybrid_1 = require("../../../hybrid");
@@ -69,10 +70,7 @@ function TextField(_a) {
69
70
  var _w = (0, react_1.useState)(false), isFocused = _w[0], setIsFocused = _w[1];
70
71
  var _x = (0, react_hook_form_1.useFormContext)(), register = _x.register, trigger = _x.trigger, errors = _x.formState.errors;
71
72
  var _y = register(name, validation), validateOnChange = _y.onChange, validateOnBlur = _y.onBlur;
72
- var getErrorByName = function (errors, name) {
73
- return name.split('.').reduce(function (errors, property) { return errors && errors[property]; }, errors);
74
- };
75
- var isError = getErrorByName(errors, name);
73
+ var isError = (0, types_1.getErrorByName)(errors, name);
76
74
  var handleClickIBtn1 = function () {
77
75
  if (onClickIBtn1) {
78
76
  onClickIBtn1();
@@ -158,7 +156,7 @@ function TextField(_a) {
158
156
  }[colorTheme]), iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 }))] })] }));
159
157
  }
160
158
  };
161
- return ((0, jsx_runtime_1.jsxs)(S_TextFieldBox, __assign({ "x-pds-name": "TextField", "x-pds-element-type": "component", "x-pds-device-type": "mobile", size: size, responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_TextFieldWrapper, __assign({ size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: Boolean(isError), state: state, colorTheme: colorTheme, customWidth: customWidth }, { children: S_TextField() })), ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && state === 'normal' && ((0, jsx_runtime_1.jsx)(S_Error, __assign({ colorTheme: colorTheme }, { children: errors[name].message })))] })));
159
+ return ((0, jsx_runtime_1.jsxs)(S_TextFieldBox, __assign({ "x-pds-name": "TextField", "x-pds-element-type": "component", "x-pds-device-type": "mobile", size: size, responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_TextFieldWrapper, __assign({ size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: Boolean(isError), state: state, colorTheme: colorTheme, customWidth: customWidth }, { children: S_TextField() })), ((_b = (0, types_1.getErrorByName)(errors, name)) === null || _b === void 0 ? void 0 : _b.message) && state === 'normal' && ((0, jsx_runtime_1.jsx)(S_Error, __assign({ colorTheme: colorTheme }, { children: (0, types_1.getErrorByName)(errors, name).message })))] })));
162
160
  }
163
161
  var S_TextFieldBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n ", ";\n ", "\n"], ["\n ", ";\n ", ";\n ", "\n"])), function (_a) {
164
162
  var size = _a.size;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "2.2.114",
3
+ "version": "2.2.116",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,7 +1,6 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v2.2.114]
2
+ ## [v2.2.116]
3
3
  ## daily|https://design.storybook.publ.biz/
4
4
 
5
5
  ### 업데이트 사항
6
- * [CHORE] pipeline에서 sourcemap 제거와 메모리 옵션 구문 수정
7
- * postcss-styled-components 추가
6
+ * [PDS-1263] Select 컴포넌트 name, validation Prop 추가 건