pds-dev-kit-web 2.2.51 → 2.2.52

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 (6) hide show
  1. package/dist/src/common/types/components.d.ts +1 -0
  2. package/dist/src/desktop/components/ContextMenuItem/ContextMenuItem.js +17 -5
  3. package/dist/src/desktop/components/DesktopAlertDialog/DesktopAlertDialog.js +12 -0
  4. package/dist/src/mobile/components/ContextMenuItem/ContextMenuItem.js +15 -3
  5. package/package.json +1 -1
  6. package/release-note.md +8 -9
package/dist/src/common/types/components.d.ts CHANGED
@@ -17,6 +17,7 @@ export type ContextMenuItemValueOption = {
17
17
  iconName?: FillIconNameKeys | LineIconNameKeys;
18
18
  iconFillType?: 'fill' | 'line';
19
19
  fontWeight?: 'bold' | 'regular';
20
+ descText?: PDSTextType;
20
21
  };
21
22
  export type DropdownValueOption = ContextMenuItemValueOption & {
22
23
  state?: 'normal' | 'disabled';
package/dist/src/desktop/components/ContextMenuItem/ContextMenuItem.js CHANGED
@@ -65,15 +65,25 @@ function ContextMenuItem(_a) {
65
65
  if (state === 'disabled') {
66
66
  textColorTheme = 'sysTextTertiary';
67
67
  }
68
+ var descTextColorTheme;
69
+ if (isSelected) {
70
+ descTextColorTheme = 'sysTextTertiary';
71
+ }
72
+ if (!isSelected && state === 'normal') {
73
+ descTextColorTheme = 'sysTextTertiary';
74
+ }
75
+ if (state === 'disabled') {
76
+ descTextColorTheme = 'sysTextTertiary';
77
+ }
68
78
  var getIconColorKey = function () {
69
79
  if (state === 'disabled') {
70
80
  return 'ui_cpnt_dropdown_display_icon_disabled';
71
81
  }
72
82
  return 'ui_cpnt_dropdown_display_icon_normal';
73
83
  };
74
- return ((0, jsx_runtime_1.jsxs)(S_ContextMenuItem, __assign({ "x-pds-name": "ContextMenuItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, onClick: handleClick, selected: isSelected, disabled: state === 'disabled', displayType: displayType }, { children: [(displayType === 'icon_only' || displayType === 'icon_text') &&
75
- option &&
76
- 'iconName' in option && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { size: size === 'small' ? 20 : 24, iconName: option.iconName, fillType: option.iconFillType, colorKey: getIconColorKey() }), displayType === 'icon_text' && (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }), ' '] })), (displayType === 'text_only' || displayType === 'icon_text') && (option === null || option === void 0 ? void 0 : option.text) && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: option.text || text, styleTheme: option.fontWeight === 'bold' ? 'form2Bold' : 'form2Regular', singleLineMode: "use", colorTheme: textColorTheme, ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }))] })));
84
+ return ((0, jsx_runtime_1.jsxs)(S_ContextMenuItem, __assign({ "x-pds-name": "ContextMenuItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, onClick: handleClick, selected: isSelected, disabled: state === 'disabled', displayType: displayType }, { children: [(0, jsx_runtime_1.jsxs)(S_LeftSide, { children: [(displayType === 'icon_only' || displayType === 'icon_text') &&
85
+ option &&
86
+ 'iconName' in option && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { size: size === 'small' ? 20 : 24, iconName: option.iconName, fillType: option.iconFillType, colorKey: getIconColorKey() }), displayType === 'icon_text' && (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }), ' '] })), (displayType === 'text_only' || displayType === 'icon_text') && (option === null || option === void 0 ? void 0 : option.text) && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: option.text || text, styleTheme: option.fontWeight === 'bold' ? 'form2Bold' : 'form2Regular', singleLineMode: "use", colorTheme: textColorTheme, ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }))] }), (0, jsx_runtime_1.jsx)(S_RightSide, { children: (displayType === 'text_only' || displayType === 'icon_text') && (option === null || option === void 0 ? void 0 : option.descText) && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: option.descText, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: descTextColorTheme, ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all", textAlign: "right" })) })] })));
77
87
  }
78
88
  var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 48px;\n padding: 0 ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"], ["\n height: 48px;\n padding: 0 ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"])), function (_a) {
79
89
  var theme = _a.theme;
@@ -87,7 +97,7 @@ var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 =
87
97
  var theme = _a.theme;
88
98
  return theme.spacing.spacingD;
89
99
  });
90
- var S_ContextMenuItem = styled_components_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n cursor: pointer;\n display: flex;\n\n ", ";\n ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n cursor: pointer;\n display: flex;\n\n ", ";\n ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n ", ";\n"])), function (_a) {
100
+ var S_ContextMenuItem = styled_components_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n\n ", ";\n ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n\n ", ";\n ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n ", ";\n"])), function (_a) {
91
101
  var theme = _a.theme, selected = _a.selected;
92
102
  return selected
93
103
  ? theme.ui_cpnt_contextmenu_menu_base_selected
@@ -107,5 +117,7 @@ var S_ContextMenuItem = styled_components_1.default.li(templateObject_4 || (temp
107
117
  cursor: 'not-allowed'
108
118
  };
109
119
  });
120
+ var S_LeftSide = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n"], ["\n align-items: center;\n display: flex;\n"])));
121
+ var S_RightSide = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n"], ["\n align-items: center;\n display: flex;\n"])));
110
122
  exports.default = ContextMenuItem;
111
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
123
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
package/dist/src/desktop/components/DesktopAlertDialog/DesktopAlertDialog.js CHANGED
@@ -43,6 +43,18 @@ function DesktopAlertDialog(_a) {
43
43
  root.removeChild(container);
44
44
  };
45
45
  }, []);
46
+ // Enter 키 입력 감지를 위한 useEffect
47
+ (0, react_1.useEffect)(function () {
48
+ var handleKeyDown = function (event) {
49
+ if (event.key === 'Enter') {
50
+ onClickTBtn1 && onClickTBtn1();
51
+ }
52
+ };
53
+ document.addEventListener('keydown', handleKeyDown);
54
+ return function () {
55
+ document.removeEventListener('keydown', handleKeyDown);
56
+ };
57
+ }, [onClickTBtn1]);
46
58
  var btn1Mode = ['tbtn_amount1', 'tbtn_amount2', 'tbtn_amount3'];
47
59
  var btn2Mode = ['tbtn_amount2', 'tbtn_amount3'];
48
60
  var btn3Mode = ['tbtn_amount3'];
package/dist/src/mobile/components/ContextMenuItem/ContextMenuItem.js CHANGED
@@ -65,13 +65,23 @@ function ContextMenuItem(_a) {
65
65
  if (state === 'disabled') {
66
66
  textColorTheme = 'sysTextTertiary';
67
67
  }
68
+ var descTextColorTheme;
69
+ if (isSelected) {
70
+ descTextColorTheme = 'sysTextTertiary';
71
+ }
72
+ if (!isSelected && state === 'normal') {
73
+ descTextColorTheme = 'sysTextTertiary';
74
+ }
75
+ if (state === 'disabled') {
76
+ descTextColorTheme = 'sysTextTertiary';
77
+ }
68
78
  var getIconColorKey = function () {
69
79
  if (state === 'disabled') {
70
80
  return 'ui_cpnt_dropdown_display_icon_disabled';
71
81
  }
72
82
  return 'ui_cpnt_dropdown_display_icon_normal';
73
83
  };
74
- return ((0, jsx_runtime_1.jsxs)(S_ContextMenuItem, __assign({ "x-pds-name": "ContextMenuItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", size: size, onClick: handleClick, selected: isSelected, displayType: displayType }, { children: [(displayType === 'icon_only' || displayType === 'icon_text') && (option === null || option === void 0 ? void 0 : option.iconName) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { size: size === 'small' ? 20 : 24, iconName: option.iconName, fillType: option.iconFillType, colorKey: getIconColorKey() }), displayType === 'icon_text' && (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }), ' '] })), (displayType === 'text_only' || displayType === 'icon_text') && (option === null || option === void 0 ? void 0 : option.text) && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: option.text || text, styleTheme: option.fontWeight === 'bold' ? 'form2Bold' : 'form2Regular', singleLineMode: "use", colorTheme: textColorTheme, ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }))] })));
84
+ return ((0, jsx_runtime_1.jsxs)(S_ContextMenuItem, __assign({ "x-pds-name": "ContextMenuItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", size: size, onClick: handleClick, selected: isSelected, displayType: displayType }, { children: [(0, jsx_runtime_1.jsxs)(S_LeftSide, { children: [(displayType === 'icon_only' || displayType === 'icon_text') && (option === null || option === void 0 ? void 0 : option.iconName) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { size: size === 'small' ? 20 : 24, iconName: option.iconName, fillType: option.iconFillType, colorKey: getIconColorKey() }), displayType === 'icon_text' && (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }), ' '] })), (displayType === 'text_only' || displayType === 'icon_text') && (option === null || option === void 0 ? void 0 : option.text) && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: option.text || text, styleTheme: option.fontWeight === 'bold' ? 'form2Bold' : 'form2Regular', singleLineMode: "use", colorTheme: textColorTheme, ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }))] }), (0, jsx_runtime_1.jsx)(S_RightSide, { children: (displayType === 'text_only' || displayType === 'icon_text') && (option === null || option === void 0 ? void 0 : option.descText) && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: option.descText, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: descTextColorTheme, ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all", textAlign: "right" })) })] })));
75
85
  }
76
86
  var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 48px;\n padding: 0 ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"], ["\n height: 48px;\n padding: 0 ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"])), function (_a) {
77
87
  var theme = _a.theme;
@@ -85,7 +95,7 @@ var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 =
85
95
  var theme = _a.theme;
86
96
  return theme.spacing.spacingD;
87
97
  });
88
- var S_ContextMenuItem = styled_components_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n display: flex;\n\n ", ";\n ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n display: flex;\n\n ", ";\n ", ";\n"])), function (_a) {
98
+ var S_ContextMenuItem = styled_components_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n display: flex;\n justify-content: space-between;\n\n ", ";\n ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n display: flex;\n justify-content: space-between;\n\n ", ";\n ", ";\n"])), function (_a) {
89
99
  var theme = _a.theme, selected = _a.selected;
90
100
  return selected
91
101
  ? theme.ui_cpnt_contextmenu_menu_base_selected
@@ -97,5 +107,7 @@ var S_ContextMenuItem = styled_components_1.default.li(templateObject_4 || (temp
97
107
  var size = _a.size;
98
108
  return size && { large: large, medium: medium, small: small }[size];
99
109
  });
110
+ var S_LeftSide = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n"], ["\n align-items: center;\n display: flex;\n"])));
111
+ var S_RightSide = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n"], ["\n align-items: center;\n display: flex;\n"])));
100
112
  exports.default = ContextMenuItem;
101
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
113
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "2.2.51",
3
+ "version": "2.2.52",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,11 +1,10 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v2.2.51]
3
- ## urgent|https://design.storybook.publ.biz/
2
+ ## [v2.2.52]
3
+ ## daily|https://design.storybook.publ.biz/
4
4
 
5
- ### sub
6
- * DynamicLayout
7
- * BULK SELECT & ACTIONS 관련 UX개선
8
- * 남은 CB가 1개일 때 전체선택 -> 이상하게 됨 -> 하나만 선택되도록
9
- * shift 없이 우클릭 시 기존 벌크 해제
10
- * 다른 CustomSection 클릭시 벌크 해제
11
- * SHIFT 누른 채로 다른 CB제자리 드롭 시 → 클릭으로 판정하여 벌크에 포함
5
+ ### component
6
+ * ContextMenuItem
7
+ * option에 descText 추가
8
+ * DesktopAlertDialog
9
+ * enter 키 이벤트 적용
10
+ * enter키 입력시 onClickTBtn1 이벤트 발생