pds-dev-kit-web 1.4.13 → 1.4.14

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 (30) hide show
  1. package/dist/src/common/assets/icons/line/Clip.d.ts +4 -0
  2. package/dist/src/common/assets/icons/line/Clip.js +36 -0
  3. package/dist/src/common/assets/icons/line/index.d.ts +1 -0
  4. package/dist/src/common/assets/icons/line/index.js +2 -0
  5. package/dist/src/common/styles/colorSet/PaletteColor_Dark.json +6 -1
  6. package/dist/src/common/styles/colorSet/PaletteColor_light.json +6 -1
  7. package/dist/src/common/styles/colorSet/SemanticColor.json +2 -1
  8. package/dist/src/common/styles/colorSet/UIColor.json +11 -1
  9. package/dist/src/common/styles/colorSet/index.d.ts +23 -2
  10. package/dist/src/common/styles/colorSet/index.js +2 -2
  11. package/dist/src/common/styles/colorSet/ui-type.d.ts +10 -0
  12. package/dist/src/desktop/components/AdminListItem/AdminListItem.js +3 -3
  13. package/dist/src/desktop/components/Chip/Chip.js +7 -7
  14. package/dist/src/desktop/components/DynamicDesktopNavBar/components/ContextMenuNavs/ContextMenuItemNav.js +5 -1
  15. package/dist/src/desktop/components/DynamicDesktopNavBar/components/IconNav.d.ts +2 -1
  16. package/dist/src/desktop/components/DynamicDesktopNavBar/components/IconNav.js +2 -2
  17. package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/MenuItemNav.js +10 -3
  18. package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/DisplayOnlyMenuItemNav.d.ts +12 -0
  19. package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/DisplayOnlyMenuItemNav.js +32 -0
  20. package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/InternalLinkMenuItemNav.d.ts +12 -0
  21. package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/InternalLinkMenuItemNav.js +22 -0
  22. package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/PAppMenuItemNav.js +1 -1
  23. package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/WebMenuItemNav.d.ts +2 -1
  24. package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/WebMenuItemNav.js +4 -4
  25. package/dist/src/desktop/components/DynamicDesktopNavBar/types.d.ts +2 -1
  26. package/dist/src/desktop/components/Select/Select.js +12 -13
  27. package/dist/src/mobile/components/Chip/Chip.js +7 -7
  28. package/dist/src/mobile/components/Select/Select.js +11 -12
  29. package/package.json +1 -1
  30. package/release-note.md +15 -4
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import IconType from '../IconType';
3
+ declare const Clip: ({ color, size, ...rest }: IconType) => JSX.Element;
4
+ export default Clip;
@@ -0,0 +1,36 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __rest = (this && this.__rest) || function (s, e) {
14
+ var t = {};
15
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
16
+ t[p] = s[p];
17
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
18
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
19
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
20
+ t[p[i]] = s[p[i]];
21
+ }
22
+ return t;
23
+ };
24
+ var __importDefault = (this && this.__importDefault) || function (mod) {
25
+ return (mod && mod.__esModule) ? mod : { "default": mod };
26
+ };
27
+ Object.defineProperty(exports, "__esModule", { value: true });
28
+ var react_1 = __importDefault(require("react"));
29
+ var Clip = function (_a) {
30
+ var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
31
+ return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
32
+ react_1.default.createElement("g", { fill: "none", fillRule: "evenodd", strokeLinecap: "round" },
33
+ react_1.default.createElement("path", { stroke: color, strokeWidth: "1.5", d: "M2.8315,19.8563 C1.4605,18.3773 1.7185,16.2083 3.6035,14.4263 L13.6075,4.4233 C15.5355,2.4953 18.6605,2.4953 20.5885,4.4233 L20.5885,4.4233 C22.5155,6.3513 22.5155,9.4763 20.5885,11.4043 L12.4975,19.4943" }),
34
+ react_1.default.createElement("path", { stroke: color, strokeWidth: "1.5", d: "M7.3606,14.7929 L12.6506,9.5029 C13.4406,8.7129 14.7196,8.7129 15.5086,9.5029 L15.5086,9.5029 C16.2986,10.2919 16.2986,11.5709 15.5086,12.3599 L8.3606,19.5079 C5.9176,21.9519 3.8866,20.9579 2.8316,19.8559" }))));
35
+ };
36
+ exports.default = Clip;
@@ -30,6 +30,7 @@ declare const lineIcons: {
30
30
  readonly ic_chat_crm: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
31
31
  readonly ic_check: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
32
32
  readonly ic_checkbox_off: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
33
+ readonly ic_clip: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
33
34
  readonly ic_cont_watching: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
34
35
  readonly ic_copy: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
35
36
  readonly ic_cs: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
@@ -33,6 +33,7 @@ var ChatCounseling_1 = __importDefault(require("./ChatCounseling"));
33
33
  var ChatCrm_1 = __importDefault(require("./ChatCrm"));
34
34
  var Check_1 = __importDefault(require("./Check"));
35
35
  var CheckboxOff_1 = __importDefault(require("./CheckboxOff"));
36
+ var Clip_1 = __importDefault(require("./Clip"));
36
37
  var ContWatching_1 = __importDefault(require("./ContWatching"));
37
38
  var Copy_1 = __importDefault(require("./Copy"));
38
39
  var Cs_1 = __importDefault(require("./Cs"));
@@ -172,6 +173,7 @@ var lineIcons = {
172
173
  ic_chat_crm: ChatCrm_1.default,
173
174
  ic_check: Check_1.default,
174
175
  ic_checkbox_off: CheckboxOff_1.default,
176
+ ic_clip: Clip_1.default,
175
177
  ic_cont_watching: ContWatching_1.default,
176
178
  ic_copy: Copy_1.default,
177
179
  ic_cs: Cs_1.default,
@@ -168,5 +168,10 @@
168
168
  "sys_border_line_darktheme_05": "darkgrey30",
169
169
  "sys_component_base_darktheme_06": "darkgrey70",
170
170
  "sys_border_line_darktheme_06": "darkgrey70",
171
- "sys_border_line_darktheme_07": "darkgrey50"
171
+ "sys_border_line_darktheme_07": "darkgrey50",
172
+ "sys_border_line_11": "darkgreen500",
173
+ "sys_base_dimmed_01": "black/opacity30",
174
+ "sys_kakao": "kakaoyellow",
175
+ "sys_border_line_12": "grey100",
176
+ "sys_component_base_08": "white"
172
177
  }
@@ -168,5 +168,10 @@
168
168
  "sys_border_line_darktheme_05": "darkgrey30",
169
169
  "sys_component_base_darktheme_06": "darkgrey70",
170
170
  "sys_border_line_darktheme_06": "darkgrey70",
171
- "sys_border_line_darktheme_07": "darkgrey50"
171
+ "sys_border_line_darktheme_07": "darkgrey50",
172
+ "sys_border_line_11": "green500",
173
+ "sys_base_dimmed_01": "white/opacity30",
174
+ "sys_kakao": "kakaoyellow",
175
+ "sys_border_line_12": "grey100",
176
+ "sys_component_base_08": "black"
172
177
  }
@@ -55,5 +55,6 @@
55
55
  "grey30": "#f5f5f8",
56
56
  "opacity95": "F2",
57
57
  "darkgrey30": "#1d1d1e",
58
- "opacity40": "66"
58
+ "opacity40": "66",
59
+ "kakaoyellow": "#fee500"
59
60
  }
@@ -513,5 +513,15 @@
513
513
  "ui_hero_description_text": "sys_text_white",
514
514
  "ui_cpnt_divider_area": "sys_border_area_01",
515
515
  "ui_cpnt_button_white_base_hover": "sys_component_base_darktheme_01",
516
- "ui_cpnt_button_white_base_pressed": "sys_component_base_darktheme_03"
516
+ "ui_cpnt_button_white_base_pressed": "sys_component_base_darktheme_03",
517
+ "ui_cpnt_list_base_area_hover": "sys_container_background_02",
518
+ "ui_cpnt_sheet_border_01": "sys_border_line_01",
519
+ "ui_cpnt_sheet_border_02": "sys_border_line_03",
520
+ "ui_cpnt_sheet_border_03": "sys_border_line_11",
521
+ "ui_43": "sys_border_line_12",
522
+ "ui_44": "sys_component_base_white",
523
+ "ui_45": "sys_component_base_08",
524
+ "ui_46": "sys_base_dimmed_01",
525
+ "ui_47": "sys_kakao",
526
+ "ui_cpnt_sheet_base_03": "sys_component_base_white_opacity00"
517
527
  }
@@ -57,8 +57,9 @@ declare const colorSet: {
57
57
  opacity95: string;
58
58
  darkgrey30: string;
59
59
  opacity40: string;
60
+ kakaoyellow: string;
60
61
  };
61
- readonly PaletteColor_Dark: {
62
+ readonly PaletteColor_light: {
62
63
  sys_container_background_01: string;
63
64
  sys_container_background_02: string;
64
65
  sys_container_background_03: string;
@@ -229,8 +230,13 @@ declare const colorSet: {
229
230
  sys_component_base_darktheme_06: string;
230
231
  sys_border_line_darktheme_06: string;
231
232
  sys_border_line_darktheme_07: string;
233
+ sys_border_line_11: string;
234
+ sys_base_dimmed_01: string;
235
+ sys_kakao: string;
236
+ sys_border_line_12: string;
237
+ sys_component_base_08: string;
232
238
  };
233
- readonly PaletteColor_light: {
239
+ readonly PaletteColor_Dark: {
234
240
  sys_container_background_01: string;
235
241
  sys_container_background_02: string;
236
242
  sys_container_background_03: string;
@@ -401,6 +407,11 @@ declare const colorSet: {
401
407
  sys_component_base_darktheme_06: string;
402
408
  sys_border_line_darktheme_06: string;
403
409
  sys_border_line_darktheme_07: string;
410
+ sys_border_line_11: string;
411
+ sys_base_dimmed_01: string;
412
+ sys_kakao: string;
413
+ sys_border_line_12: string;
414
+ sys_component_base_08: string;
404
415
  };
405
416
  readonly UIColor: {
406
417
  ui_cpnt_button_fill_base_primary: string;
@@ -918,6 +929,16 @@ declare const colorSet: {
918
929
  ui_cpnt_divider_area: string;
919
930
  ui_cpnt_button_white_base_hover: string;
920
931
  ui_cpnt_button_white_base_pressed: string;
932
+ ui_cpnt_list_base_area_hover: string;
933
+ ui_cpnt_sheet_border_01: string;
934
+ ui_cpnt_sheet_border_02: string;
935
+ ui_cpnt_sheet_border_03: string;
936
+ ui_43: string;
937
+ ui_44: string;
938
+ ui_45: string;
939
+ ui_46: string;
940
+ ui_47: string;
941
+ ui_cpnt_sheet_base_03: string;
921
942
  };
922
943
  };
923
944
  export default colorSet;
@@ -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_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
9
8
  var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
9
+ var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
10
10
  var UIColor_json_1 = __importDefault(require("./UIColor.json"));
11
11
  var colorSet = {
12
12
  SemanticColor: SemanticColor_json_1.default,
13
- PaletteColor_Dark: PaletteColor_Dark_json_1.default,
14
13
  PaletteColor_light: PaletteColor_light_json_1.default,
14
+ PaletteColor_Dark: PaletteColor_Dark_json_1.default,
15
15
  UIColor: UIColor_json_1.default
16
16
  };
17
17
  exports.default = colorSet;
@@ -514,4 +514,14 @@ export interface UITheme {
514
514
  ui_cpnt_divider_area: string;
515
515
  ui_cpnt_button_white_base_hover: string;
516
516
  ui_cpnt_button_white_base_pressed: string;
517
+ ui_cpnt_list_base_area_hover: string;
518
+ ui_cpnt_sheet_border_01: string;
519
+ ui_cpnt_sheet_border_02: string;
520
+ ui_cpnt_sheet_border_03: string;
521
+ ui_43: string;
522
+ ui_44: string;
523
+ ui_45: string;
524
+ ui_46: string;
525
+ ui_47: string;
526
+ ui_cpnt_sheet_base_03: string;
517
527
  }
@@ -96,16 +96,16 @@ function AdminListItem(_a) {
96
96
  quickActionBtnMode === 'btn_amount3' && quickActionBtn3Text && (react_1.default.createElement(S_QuickActionButton, { onClick: handleClickQuickActionBtn3, disabled: quickActionBtn3State === 'disabled' },
97
97
  react_1.default.createElement(TextLabel_1.TextLabel, { text: quickActionBtn3Text, styleTheme: "caption1Regular", colorTheme: "sysTextBrandPrimary", colorOverride: quickActionBtn3State === 'disabled'
98
98
  ? 'ui_cpnt_textlabel_sys_brand_primary_opacity50'
99
- : undefined }))),
99
+ : undefined, textAlign: "center" }))),
100
100
  (quickActionBtnMode === 'btn_amount2' || quickActionBtnMode === 'btn_amount3') &&
101
101
  quickActionBtn2Text && (react_1.default.createElement(S_QuickActionButton, { onClick: handleClickQuickActionBtn2, disabled: quickActionBtn2State === 'disabled' },
102
102
  react_1.default.createElement(TextLabel_1.TextLabel, { text: quickActionBtn2Text, styleTheme: "caption1Regular", colorTheme: "sysTextBrandPrimary", colorOverride: quickActionBtn2State === 'disabled'
103
103
  ? 'ui_cpnt_textlabel_sys_brand_primary_opacity50'
104
- : undefined }))),
104
+ : undefined, textAlign: "center" }))),
105
105
  react_1.default.createElement(S_QuickActionButton, { onClick: handleClickQuickActionBtn1, disabled: quickActionBtn1State === 'disabled' },
106
106
  react_1.default.createElement(TextLabel_1.TextLabel, { text: quickActionBtn1Text, styleTheme: "caption1Regular", colorTheme: "sysTextBrandPrimary", colorOverride: quickActionBtn1State === 'disabled'
107
107
  ? 'ui_cpnt_textlabel_sys_brand_primary_opacity50'
108
- : undefined }))));
108
+ : undefined, textAlign: "center" }))));
109
109
  }
110
110
  };
111
111
  var getColumnColorTheme = function (style) {
@@ -60,29 +60,29 @@ function Chip(_a) {
60
60
  !isActive && (react_1.default.createElement(react_1.default.Fragment, null,
61
61
  react_1.default.createElement(Icon_1.Icon, { size: 16, fillType: "line", iconName: "ic_filter", colorKey: "ui_cpnt_chip_line_icon_01" }),
62
62
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }))),
63
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextPrimary' }),
63
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextPrimary', ellipsisMode: "use", lineLimit: 1 }),
64
64
  isActive && (react_1.default.createElement(react_1.default.Fragment, null,
65
65
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
66
66
  react_1.default.createElement(Icon_1.Icon, { size: 12, fillType: "line", iconName: "ic_xmark", colorKey: "ui_cpnt_chip_fill_icon_active_01" })))));
67
67
  case 'information':
68
68
  return (react_1.default.createElement(S_InfoChip, { onClick: handleClickChip },
69
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary" })));
69
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary", ellipsisMode: "use", lineLimit: 1 })));
70
70
  case 'label':
71
71
  return (react_1.default.createElement(S_LabelChip, { onClick: handleClickChip },
72
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary" })));
72
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary", ellipsisMode: "use", lineLimit: 1 })));
73
73
  case 'time':
74
74
  return (react_1.default.createElement(S_TimeChip, { onClick: handleClickChip },
75
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextWhite" })));
75
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1 })));
76
76
  case 'removable':
77
77
  return (react_1.default.createElement(S_RemovableChip, { onClick: handleClickChip },
78
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: "sysTextSecondary" }),
78
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: "sysTextSecondary", ellipsisMode: "use", lineLimit: 1 }),
79
79
  react_1.default.createElement(S_XIconWrapper, { onClick: handleClickXMarkIcon },
80
80
  react_1.default.createElement(Icon_1.Icon, { size: 12, iconName: "ic_xmark", fillType: "line", colorKey: "ui_cpnt_chip_fill_icon_inactive" }))));
81
81
  default:
82
82
  return (react_1.default.createElement(S_FilterSingleChip, { isActive: isActive, onClick: handleClickChip },
83
83
  filterIconMode === 'left' && (react_1.default.createElement(S_FilterIconWrapper, null,
84
84
  react_1.default.createElement(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: isActive ? 'ui_cpnt_chip_fill_icon_active_01' : 'ui_cpnt_chip_line_icon_02' }))),
85
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextSecondary' })));
85
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextSecondary', ellipsisMode: "use", lineLimit: 1 })));
86
86
  }
87
87
  };
88
88
  return react_1.default.createElement(S_ChipWrapper, null, chipType());
@@ -156,5 +156,5 @@ var S_TimeChip = styled_components_1.default.div(templateObject_8 || (templateOb
156
156
  var theme = _a.theme;
157
157
  return theme.spacing.spacingB;
158
158
  });
159
- var S_ChipWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: inline-block;\n vertical-align: bottom;\n"], ["\n display: inline-block;\n vertical-align: bottom;\n"])));
159
+ var S_ChipWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: inline-block;\n vertical-align: bottom;\n min-width: fit-content;\n"], ["\n display: inline-block;\n vertical-align: bottom;\n min-width: fit-content;\n"])));
160
160
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
@@ -39,13 +39,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
39
39
  Object.defineProperty(exports, "__esModule", { value: true });
40
40
  var react_1 = __importDefault(require("react"));
41
41
  var styled_components_1 = __importStar(require("styled-components"));
42
+ var DisplayOnlyMenuItemNav_1 = __importDefault(require("../MenuItemNav/components/DisplayOnlyMenuItemNav"));
43
+ var InternalLinkMenuItemNav_1 = __importDefault(require("../MenuItemNav/components/InternalLinkMenuItemNav"));
42
44
  var PAppMenuItemNav_1 = __importDefault(require("../MenuItemNav/components/PAppMenuItemNav"));
43
45
  var WebMenuItemNav_1 = __importDefault(require("../MenuItemNav/components/WebMenuItemNav"));
44
46
  function ContextMenuItemNavBox(_a) {
45
47
  var menu = _a.menu;
46
48
  return (react_1.default.createElement(S_ContextMenuItem, { size: "small" },
47
49
  menu.menuItemType === 'NAV_P_APP' && menu.pAppCode && (react_1.default.createElement(PAppMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { pAppCode: menu.pAppCode }), isContextMenu: true })),
48
- menu.menuItemType === 'WEB_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(WebMenuItemNav_1.default, { isContextMenu: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }) }))));
50
+ menu.menuItemType === 'WEB_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(WebMenuItemNav_1.default, { openNewTab: true, isContextMenu: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }) })),
51
+ menu.menuItemType === 'INTERNAL_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(InternalLinkMenuItemNav_1.default, { isContextMenu: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }) })),
52
+ menu.menuItemType === 'DISPLAY_ONLY' && (react_1.default.createElement(DisplayOnlyMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { conversionLinkSrc: '' }) }))));
49
53
  }
50
54
  var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 48px;\n padding: 0 ", ";\n"], ["\n height: 48px;\n padding: 0 ", ";\n"])), function (_a) {
51
55
  var theme = _a.theme;
@@ -3,6 +3,7 @@ import { PDSIconType } from '../../../../common';
3
3
  declare type Props = {
4
4
  to: string;
5
5
  iconName: PDSIconType;
6
+ openNewTab: boolean;
6
7
  };
7
- declare function IconNav({ to, iconName }: Props): JSX.Element;
8
+ declare function IconNav({ to, iconName, openNewTab }: Props): JSX.Element;
8
9
  export default IconNav;
@@ -7,8 +7,8 @@ var react_1 = __importDefault(require("react"));
7
7
  var __1 = require("../../..");
8
8
  var Navigations_1 = require("../../../../common/components/Navigations");
9
9
  function IconNav(_a) {
10
- var to = _a.to, iconName = _a.iconName;
11
- return (react_1.default.createElement(Navigations_1.NavLink, { to: to },
10
+ var to = _a.to, iconName = _a.iconName, openNewTab = _a.openNewTab;
11
+ return (react_1.default.createElement(Navigations_1.NavLink, { to: to, openNewTab: openNewTab },
12
12
  react_1.default.createElement(__1.D_IconButton, { fillType: "fill", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconName: iconName, iconFillType: "line", iconColorKey: "ui_menu_primarymenu_main", shapeType: "rectangle", iconSize: 24 })));
13
13
  }
14
14
  exports.default = IconNav;
@@ -41,6 +41,8 @@ var react_1 = __importStar(require("react"));
41
41
  var styled_components_1 = __importDefault(require("styled-components"));
42
42
  var hybrid_1 = require("../../../../../hybrid");
43
43
  var ContextMenuNavs_1 = require("../ContextMenuNavs");
44
+ var DisplayOnlyMenuItemNav_1 = __importDefault(require("./components/DisplayOnlyMenuItemNav"));
45
+ var InternalLinkMenuItemNav_1 = __importDefault(require("./components/InternalLinkMenuItemNav"));
44
46
  var PAppMenuItemNav_1 = __importDefault(require("./components/PAppMenuItemNav"));
45
47
  var WebMenuItemNav_1 = __importDefault(require("./components/WebMenuItemNav"));
46
48
  // NOTE: 서버에서 itemType으로 enum값이 잘 오면 아래 불필요한 케이스/default 간소화
@@ -55,12 +57,17 @@ function MenuItemNav(_a) {
55
57
  setIsContextOpen(false);
56
58
  }, []);
57
59
  return (react_1.default.createElement(react_1.default.Fragment, null,
58
- react_1.default.createElement(S_Box, { ref: ref, onMouseOver: handleMouseOver, onMouseLeave: handleMouseOut, onWheel: handleMouseOut, showMenuAsIcon: showMenuAsIcon },
60
+ react_1.default.createElement(S_Box, { ref: ref, onMouseOver: handleMouseOver, onMouseLeave: handleMouseOut, onWheel: handleMouseOut, showMenuAsIcon: showMenuAsIcon, type: menu.menuItemType },
59
61
  menu.menuItemType === 'NAV_P_APP' && menu.pAppCode && (react_1.default.createElement(PAppMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { pAppCode: menu.pAppCode }), showMenuAsIcon: showMenuAsIcon })),
60
- menu.menuItemType === 'WEB_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(WebMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }), showMenuAsIcon: showMenuAsIcon })),
62
+ menu.menuItemType === 'WEB_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(WebMenuItemNav_1.default, { openNewTab: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }), showMenuAsIcon: showMenuAsIcon })),
63
+ menu.menuItemType === 'INTERNAL_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(InternalLinkMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }), showMenuAsIcon: showMenuAsIcon })),
64
+ menu.menuItemType === 'DISPLAY_ONLY' && (react_1.default.createElement(DisplayOnlyMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { conversionLinkSrc: '' }), showMenuAsIcon: showMenuAsIcon })),
61
65
  isContextOpen && menu.parsedNodes.length > 0 && (react_1.default.createElement(ContextMenuNavs_1.ContextMenuNavs, { parentRef: ref }, menu.parsedNodes.map(function (nav, index) { return (react_1.default.createElement(ContextMenuNavs_1.ContextMenuItemNav, { key: index, menu: nav })); })))),
62
66
  showMenuAsIcon ? (react_1.default.createElement(hybrid_1.Spacing, { spacingType: "width", size: "spacing_b" })) : (react_1.default.createElement(hybrid_1.Spacing, { spacingType: "width", size: "spacing_f" }))));
63
67
  }
64
- var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n cursor: pointer;\n display: flex;\n"], ["\n align-items: center;\n cursor: pointer;\n display: flex;\n"])));
68
+ var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n cursor: ", ";\n display: flex;\n"], ["\n align-items: center;\n cursor: ", ";\n display: flex;\n"])), function (_a) {
69
+ var type = _a.type;
70
+ return (type === 'DISPLAY_ONLY' ? 'default' : 'pointer');
71
+ });
65
72
  exports.default = MenuItemNav;
66
73
  var templateObject_1;
@@ -0,0 +1,12 @@
1
+ /// <reference types="react" />
2
+ import { ParsedNode } from '../../../types';
3
+ declare type WithRequired<T, K extends keyof T> = T & {
4
+ [P in K]-?: T[P];
5
+ };
6
+ declare type Props = {
7
+ menu: WithRequired<ParsedNode, 'conversionLinkSrc'>;
8
+ showMenuAsIcon?: boolean;
9
+ isContextMenu?: boolean;
10
+ };
11
+ declare function DisplayOnlyMenuItemNav({ menu, showMenuAsIcon, isContextMenu }: Props): JSX.Element;
12
+ export default DisplayOnlyMenuItemNav;
@@ -0,0 +1,32 @@
1
+ "use strict";
2
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
+ return cooked;
5
+ };
6
+ var __importDefault = (this && this.__importDefault) || function (mod) {
7
+ return (mod && mod.__esModule) ? mod : { "default": mod };
8
+ };
9
+ Object.defineProperty(exports, "__esModule", { value: true });
10
+ var react_1 = __importDefault(require("react"));
11
+ var styled_components_1 = __importDefault(require("styled-components"));
12
+ var Navigations_1 = require("../../../../../../common/components/Navigations");
13
+ var IconNav_1 = __importDefault(require("../../IconNav"));
14
+ var ImageIconNav_1 = __importDefault(require("../../ImageIconNav"));
15
+ function DisplayOnlyMenuItemNav(_a) {
16
+ var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon, isContextMenu = _a.isContextMenu;
17
+ if (showMenuAsIcon) {
18
+ if (menu.iconSrc) {
19
+ return (react_1.default.createElement(DeactivateLinkBox, null,
20
+ react_1.default.createElement(ImageIconNav_1.default, { to: menu.conversionLinkSrc, iconSrc: menu.iconSrc, openNewTab: false }),
21
+ ";"));
22
+ }
23
+ if (menu.iconName) {
24
+ return (react_1.default.createElement(DeactivateLinkBox, null,
25
+ react_1.default.createElement(IconNav_1.default, { to: menu.conversionLinkSrc, iconName: menu.iconName, openNewTab: false })));
26
+ }
27
+ }
28
+ return (react_1.default.createElement(DeactivateLinkBox, null, isContextMenu ? (react_1.default.createElement(Navigations_1.ContextTextLabelNav, { preventLineChange: true, openNewTab: false, to: menu.conversionLinkSrc, text: menu.name })) : (react_1.default.createElement(Navigations_1.TextLabelNav, { preventLineChange: true, openNewTab: false, to: menu.conversionLinkSrc, text: menu.name }))));
29
+ }
30
+ var DeactivateLinkBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n pointer-events: none;\n width: max-content;\n"], ["\n pointer-events: none;\n width: max-content;\n"])));
31
+ exports.default = DisplayOnlyMenuItemNav;
32
+ var templateObject_1;
@@ -0,0 +1,12 @@
1
+ /// <reference types="react" />
2
+ import { ParsedNode } from '../../../types';
3
+ declare type WithRequired<T, K extends keyof T> = T & {
4
+ [P in K]-?: T[P];
5
+ };
6
+ declare type Props = {
7
+ menu: WithRequired<ParsedNode, 'conversionLinkSrc'>;
8
+ showMenuAsIcon?: boolean;
9
+ isContextMenu?: boolean;
10
+ };
11
+ declare function WebMenuItemNav({ menu, showMenuAsIcon, isContextMenu }: Props): JSX.Element;
12
+ export default WebMenuItemNav;
@@ -0,0 +1,22 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ var react_1 = __importDefault(require("react"));
7
+ var Navigations_1 = require("../../../../../../common/components/Navigations");
8
+ var IconNav_1 = __importDefault(require("../../IconNav"));
9
+ var ImageIconNav_1 = __importDefault(require("../../ImageIconNav"));
10
+ function WebMenuItemNav(_a) {
11
+ var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon, isContextMenu = _a.isContextMenu;
12
+ if (showMenuAsIcon) {
13
+ if (menu.iconSrc) {
14
+ return react_1.default.createElement(ImageIconNav_1.default, { to: menu.conversionLinkSrc, iconSrc: menu.iconSrc, openNewTab: false });
15
+ }
16
+ if (menu.iconName) {
17
+ return react_1.default.createElement(IconNav_1.default, { to: menu.conversionLinkSrc, iconName: menu.iconName, openNewTab: false });
18
+ }
19
+ }
20
+ return isContextMenu ? (react_1.default.createElement(Navigations_1.ContextTextLabelNav, { preventLineChange: true, openNewTab: false, to: menu.conversionLinkSrc, text: menu.name })) : (react_1.default.createElement(Navigations_1.TextLabelNav, { preventLineChange: true, openNewTab: false, to: menu.conversionLinkSrc, text: menu.name }));
21
+ }
22
+ exports.default = WebMenuItemNav;
@@ -41,7 +41,7 @@ function PAppMenuItemNav(_a) {
41
41
  return (react_1.default.createElement(ImageIconNav_1.default, { to: basePath + "/" + menu.pAppCode, iconSrc: menu.iconSrc, openNewTab: false }));
42
42
  }
43
43
  if (menu.iconName) {
44
- return react_1.default.createElement(IconNav_1.default, { to: basePath + "/" + menu.pAppCode, iconName: menu.iconName });
44
+ return (react_1.default.createElement(IconNav_1.default, { to: basePath + "/" + menu.pAppCode, iconName: menu.iconName, openNewTab: false }));
45
45
  }
46
46
  }
47
47
  return isContextMenu ? (react_1.default.createElement(Navigations_1.ContextTextLabelNav, { isActive: isActive, preventLineChange: true, openNewTab: false, to: basePath + "/" + menu.pAppCode, text: menu.name })) : (react_1.default.createElement(Navigations_1.TextLabelNav, { isActive: isActive, preventLineChange: true, openNewTab: false, to: basePath + "/" + menu.pAppCode, text: menu.name }));
@@ -7,6 +7,7 @@ declare type Props = {
7
7
  menu: WithRequired<ParsedNode, 'conversionLinkSrc'>;
8
8
  showMenuAsIcon?: boolean;
9
9
  isContextMenu?: boolean;
10
+ openNewTab: boolean;
10
11
  };
11
- declare function WebMenuItemNav({ menu, showMenuAsIcon, isContextMenu }: Props): JSX.Element;
12
+ declare function WebMenuItemNav({ menu, showMenuAsIcon, isContextMenu, openNewTab }: Props): JSX.Element;
12
13
  export default WebMenuItemNav;
@@ -8,15 +8,15 @@ var Navigations_1 = require("../../../../../../common/components/Navigations");
8
8
  var IconNav_1 = __importDefault(require("../../IconNav"));
9
9
  var ImageIconNav_1 = __importDefault(require("../../ImageIconNav"));
10
10
  function WebMenuItemNav(_a) {
11
- var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon, isContextMenu = _a.isContextMenu;
11
+ var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon, isContextMenu = _a.isContextMenu, openNewTab = _a.openNewTab;
12
12
  if (showMenuAsIcon) {
13
13
  if (menu.iconSrc) {
14
- return react_1.default.createElement(ImageIconNav_1.default, { to: menu.conversionLinkSrc, iconSrc: menu.iconSrc, openNewTab: true });
14
+ return (react_1.default.createElement(ImageIconNav_1.default, { to: menu.conversionLinkSrc, iconSrc: menu.iconSrc, openNewTab: openNewTab }));
15
15
  }
16
16
  if (menu.iconName) {
17
- return react_1.default.createElement(IconNav_1.default, { to: "/" + menu.pAppCode, iconName: menu.iconName });
17
+ return (react_1.default.createElement(IconNav_1.default, { to: menu.conversionLinkSrc, iconName: menu.iconName, openNewTab: openNewTab }));
18
18
  }
19
19
  }
20
- return isContextMenu ? (react_1.default.createElement(Navigations_1.ContextTextLabelNav, { preventLineChange: true, openNewTab: true, to: menu.conversionLinkSrc, text: menu.name })) : (react_1.default.createElement(Navigations_1.TextLabelNav, { preventLineChange: true, openNewTab: true, to: menu.conversionLinkSrc, text: menu.name }));
20
+ return isContextMenu ? (react_1.default.createElement(Navigations_1.ContextTextLabelNav, { preventLineChange: true, openNewTab: openNewTab, to: menu.conversionLinkSrc, text: menu.name })) : (react_1.default.createElement(Navigations_1.TextLabelNav, { preventLineChange: true, openNewTab: openNewTab, to: menu.conversionLinkSrc, text: menu.name }));
21
21
  }
22
22
  exports.default = WebMenuItemNav;
@@ -1,7 +1,7 @@
1
1
  import { PDSIconType } from '../../../common';
2
2
  export type { DynamicDesktopTemplateType, TemplateNamesType, TemplatesDataType } from './templates/types';
3
3
  export declare type ParsedNode = {
4
- menuItemType: 'NAV_P_APP' | 'WEB_LINK';
4
+ menuItemType: menuItemTypes;
5
5
  type: 'GENERAL_NODE';
6
6
  name: string;
7
7
  iconSrc?: string;
@@ -11,3 +11,4 @@ export declare type ParsedNode = {
11
11
  conversionLinkSrc?: string;
12
12
  parsedNodes: Array<ParsedNode>;
13
13
  };
14
+ export declare type menuItemTypes = 'NAV_P_APP' | 'WEB_LINK' | 'INTERNAL_LINK' | 'DISPLAY_ONLY';
@@ -22,19 +22,18 @@ var __importStar = (this && this.__importStar) || function (mod) {
22
22
  __setModuleDefault(result, mod);
23
23
  return result;
24
24
  };
25
+ var __importDefault = (this && this.__importDefault) || function (mod) {
26
+ return (mod && mod.__esModule) ? mod : { "default": mod };
27
+ };
25
28
  Object.defineProperty(exports, "__esModule", { value: true });
26
- var react_1 = __importStar(require("react"));
29
+ var react_1 = __importDefault(require("react"));
27
30
  var styled_components_1 = __importStar(require("styled-components"));
28
31
  var hybrid_1 = require("../../../hybrid");
32
+ var HINT = 'HINT_VALUE';
29
33
  function Select(_a) {
30
- var hintText = _a.hintText, defaultValue = _a.defaultValue, valueArray = _a.valueArray, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, onChange = _a.onChange, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'none' : _e;
31
- var _f = (0, react_1.useState)(false), isFocused = _f[0], setIsFocused = _f[1];
32
- var handleClick = function () {
33
- state === 'normal' && setIsFocused(true);
34
- };
35
- var handleBlur = function () { return setIsFocused(false); };
34
+ var _b;
35
+ var hintText = _a.hintText, defaultValue = _a.defaultValue, 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, onChange = _a.onChange, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f;
36
36
  var handleChange = function (e) {
37
- setIsFocused(false);
38
37
  if (onChange) {
39
38
  onChange(e);
40
39
  }
@@ -55,11 +54,11 @@ function Select(_a) {
55
54
  return 'ui_cpnt_select_icon_01';
56
55
  }
57
56
  };
58
- return (react_1.default.createElement(S_Box, { size: size, responsiveMode: responsiveMode, onClick: handleClick, onBlur: handleBlur, tabIndex: 0 },
57
+ return (react_1.default.createElement(S_Box, { size: size, responsiveMode: responsiveMode, tabIndex: 0 },
59
58
  react_1.default.createElement(S_Icon_Wrapper, { state: state },
60
- react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getIconColorKey() })),
61
- react_1.default.createElement(S_Select, { disabled: state === 'disabled' || state === 'read_only', defaultValue: (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) || '', state: state, colorTheme: colorTheme, onChange: handleChange },
62
- react_1.default.createElement("option", { disabled: true, value: (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) || '' }, (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) || hintText),
59
+ react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_arrow_down", colorKey: getIconColorKey() })),
60
+ react_1.default.createElement(S_Select, { disabled: state === 'disabled' || state === 'read_only', state: state, colorTheme: colorTheme, onChange: handleChange, defaultValue: (_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _b !== void 0 ? _b : HINT },
61
+ hintText && (react_1.default.createElement("option", { disabled: true, value: HINT }, hintText)),
63
62
  valueArray.map(function (el) { return (react_1.default.createElement("option", { key: el.value, value: el.value }, el.text)); }))));
64
63
  }
65
64
  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"])));
@@ -106,7 +105,7 @@ var S_Box = styled_components_1.default.div(templateObject_6 || (templateObject_
106
105
  var responsiveMode = _a.responsiveMode;
107
106
  return responsiveMode === 'use' && 'width: 100%';
108
107
  });
109
- 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) {
108
+ 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 pointer-events: none;\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 pointer-events: none;\n"])), function (_a) {
110
109
  var theme = _a.theme;
111
110
  return theme.spacing.spacingD;
112
111
  });
@@ -60,29 +60,29 @@ function Chip(_a) {
60
60
  !isActive && (react_1.default.createElement(react_1.default.Fragment, null,
61
61
  react_1.default.createElement(Icon_1.Icon, { size: 16, fillType: "line", iconName: "ic_filter", colorKey: "ui_cpnt_chip_line_icon_01" }),
62
62
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }))),
63
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextPrimary' }),
63
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextPrimary', ellipsisMode: "use", lineLimit: 1 }),
64
64
  isActive && (react_1.default.createElement(react_1.default.Fragment, null,
65
65
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
66
66
  react_1.default.createElement(Icon_1.Icon, { size: 12, fillType: "line", iconName: "ic_xmark", colorKey: "ui_cpnt_chip_fill_icon_active_01" })))));
67
67
  case 'information':
68
68
  return (react_1.default.createElement(S_InfoChip, { onClick: handleClickChip },
69
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary" })));
69
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary", ellipsisMode: "use", lineLimit: 1 })));
70
70
  case 'label':
71
71
  return (react_1.default.createElement(S_LabelChip, { onClick: handleClickChip },
72
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary" })));
72
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary", ellipsisMode: "use", lineLimit: 1 })));
73
73
  case 'time':
74
74
  return (react_1.default.createElement(S_TimeChip, { onClick: handleClickChip },
75
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextWhite" })));
75
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1 })));
76
76
  case 'removable':
77
77
  return (react_1.default.createElement(S_RemovableChip, { onClick: handleClickChip },
78
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: "sysTextSecondary" }),
78
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: "sysTextSecondary", ellipsisMode: "use", lineLimit: 1 }),
79
79
  react_1.default.createElement(S_XIconWrapper, { onClick: handleClickXMarkIcon },
80
80
  react_1.default.createElement(Icon_1.Icon, { size: 12, iconName: "ic_xmark", fillType: "line", colorKey: "ui_cpnt_chip_fill_icon_inactive" }))));
81
81
  default:
82
82
  return (react_1.default.createElement(S_FilterSingleChip, { isActive: isActive, onClick: handleClickChip },
83
83
  filterIconMode === 'left' && (react_1.default.createElement(S_FilterIconWrapper, null,
84
84
  react_1.default.createElement(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: isActive ? 'ui_cpnt_chip_fill_icon_active_01' : 'ui_cpnt_chip_line_icon_02' }))),
85
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextSecondary' })));
85
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextSecondary', ellipsisMode: "use", lineLimit: 1 })));
86
86
  }
87
87
  };
88
88
  return react_1.default.createElement(S_ChipWrapper, null, chipType());
@@ -153,5 +153,5 @@ var S_TimeChip = styled_components_1.default.div(templateObject_8 || (templateOb
153
153
  var theme = _a.theme;
154
154
  return theme.spacing.spacingB;
155
155
  });
156
- var S_ChipWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: inline-block;\n vertical-align: bottom;\n"], ["\n display: inline-block;\n vertical-align: bottom;\n"])));
156
+ var S_ChipWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: inline-block;\n vertical-align: bottom;\n min-width: fit-content;\n"], ["\n display: inline-block;\n vertical-align: bottom;\n min-width: fit-content;\n"])));
157
157
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
@@ -22,19 +22,18 @@ var __importStar = (this && this.__importStar) || function (mod) {
22
22
  __setModuleDefault(result, mod);
23
23
  return result;
24
24
  };
25
+ var __importDefault = (this && this.__importDefault) || function (mod) {
26
+ return (mod && mod.__esModule) ? mod : { "default": mod };
27
+ };
25
28
  Object.defineProperty(exports, "__esModule", { value: true });
26
- var react_1 = __importStar(require("react"));
29
+ var react_1 = __importDefault(require("react"));
27
30
  var styled_components_1 = __importStar(require("styled-components"));
28
31
  var hybrid_1 = require("../../../hybrid");
32
+ var HINT = 'HINT_VALUE';
29
33
  function Select(_a) {
30
- var hintText = _a.hintText, defaultValue = _a.defaultValue, valueArray = _a.valueArray, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, onChange = _a.onChange, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'none' : _e;
31
- var _f = (0, react_1.useState)(false), isFocused = _f[0], setIsFocused = _f[1];
32
- var handleClick = function () {
33
- state === 'normal' && setIsFocused(true);
34
- };
35
- var handleBlur = function () { return setIsFocused(false); };
34
+ var _b;
35
+ var hintText = _a.hintText, defaultValue = _a.defaultValue, 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, onChange = _a.onChange, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f;
36
36
  var handleChange = function (e) {
37
- setIsFocused(false);
38
37
  if (onChange) {
39
38
  onChange(e);
40
39
  }
@@ -51,11 +50,11 @@ function Select(_a) {
51
50
  }
52
51
  return 'ui_cpnt_select_icon_01';
53
52
  };
54
- return (react_1.default.createElement(S_Box, { size: size, responsiveMode: responsiveMode, onClick: handleClick, onBlur: handleBlur, tabIndex: 0 },
53
+ return (react_1.default.createElement(S_Box, { size: size, responsiveMode: responsiveMode, tabIndex: 0 },
55
54
  react_1.default.createElement(S_Icon_Wrapper, { state: state },
56
- react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getIconColorKey() })),
57
- react_1.default.createElement(S_Select, { disabled: state === 'disabled' || state === 'read_only', defaultValue: (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) || '', state: state, colorTheme: colorTheme, onChange: handleChange },
58
- react_1.default.createElement("option", { disabled: true, value: (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) || '' }, (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) || hintText),
55
+ react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_arrow_down", colorKey: getIconColorKey() })),
56
+ react_1.default.createElement(S_Select, { disabled: state === 'disabled' || state === 'read_only', state: state, colorTheme: colorTheme, onChange: handleChange, defaultValue: (_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _b !== void 0 ? _b : HINT },
57
+ hintText && (react_1.default.createElement("option", { disabled: true, value: HINT }, hintText)),
59
58
  valueArray.map(function (el) { return (react_1.default.createElement("option", { key: el.value, value: el.value }, el.text)); }))));
60
59
  }
61
60
  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"])));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "1.4.13",
3
+ "version": "1.4.14",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,8 +1,19 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v1.4.13]
2
+ ## [v1.4.14]
3
3
 
4
4
  ### Component
5
+ * AdminListItem
6
+ * QuickActionBtn의 text-align을 left에서 center로 변경
7
+ * Chip
8
+ * 한줄만 표시할 수 있도록 수정
9
+ * DynamicDesktopNavBar
10
+ * 내부의 MenuItemNav에 'INTERNAL_LINK' | 'DISPLAY_ONLY' 타입을 추가
5
11
  * Icon
6
- * ic_internal line추가
7
- * Switch
8
- * disabled 상태일 때의 커서를 기본 상태로 변경
12
+ * ic_clip line 추가
13
+ * Select
14
+ * defaultValue를 부여한경우 체크 표시와 함께 disabled 처리 되지 않은 상태로 보여지게 수정
15
+ * hintText가 options에 포함되어 나타나되, disabled처리되어 보이게 수정
16
+ * 우측 Icon영역을 클릭해도 option이 열리도록 수정
17
+
18
+ ### Color
19
+ * 컬러 키 값 22.06.24 12시 42분 기준 싱크