pds-dev-kit-web 1.3.3 → 1.3.6

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 (46) hide show
  1. package/dist/src/common/assets/icons/line/DesignPreference.d.ts +4 -0
  2. package/dist/src/common/assets/icons/line/DesignPreference.js +38 -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/index.d.ts +2 -2
  6. package/dist/src/common/styles/colorSet/PaletteColor_Dark.json +2 -1
  7. package/dist/src/common/styles/colorSet/PaletteColor_light.json +2 -1
  8. package/dist/src/common/styles/colorSet/UIColor.json +2 -1
  9. package/dist/src/common/styles/colorSet/index.d.ts +203 -200
  10. package/dist/src/common/styles/colorSet/index.js +5 -5
  11. package/dist/src/common/styles/colorSet/ui-type.d.ts +1 -0
  12. package/dist/src/common/types/comopnents.d.ts +5 -0
  13. package/dist/src/common/types/comopnents.js +2 -0
  14. package/dist/src/common/types/index.d.ts +1 -0
  15. package/dist/src/common/types/index.js +1 -0
  16. package/dist/src/desktop/components/AdminList/AdminList.d.ts +12 -12
  17. package/dist/src/desktop/components/AdminList/AdminList.js +14 -57
  18. package/dist/src/desktop/components/AdminList/BulkActionBar.d.ts +10 -10
  19. package/dist/src/desktop/components/AdminList/BulkActionBar.js +6 -6
  20. package/dist/src/desktop/components/AdminList/HeaderRow.js +5 -9
  21. package/dist/src/desktop/components/AdminListHeader/AdminListHeader.d.ts +3 -3
  22. package/dist/src/desktop/components/AdminListHeader/AdminListHeader.js +19 -5
  23. package/dist/src/desktop/components/AdminListHeader/HeaderBar.d.ts +3 -3
  24. package/dist/src/desktop/components/AdminListHeader/HeaderBar.js +1 -1
  25. package/dist/src/desktop/components/AdminListItem/AdminListItem.js +28 -23
  26. package/dist/src/desktop/components/Chip/Chip.d.ts +9 -5
  27. package/dist/src/desktop/components/Chip/Chip.js +45 -18
  28. package/dist/src/desktop/components/ContextMenuItem/ContextMenuItem.d.ts +8 -5
  29. package/dist/src/desktop/components/ContextMenuItem/ContextMenuItem.js +8 -3
  30. package/dist/src/desktop/components/DesktopHeaderBar/DesktopHeaderBar.d.ts +13 -30
  31. package/dist/src/desktop/components/DesktopHeaderBar/DesktopHeaderBar.js +70 -18
  32. package/dist/src/desktop/components/Dropdown/Dropdown.d.ts +4 -7
  33. package/dist/src/desktop/components/Dropdown/Dropdown.js +9 -4
  34. package/dist/src/desktop/components/EditApplyTextField/EditApplyTextField.js +5 -2
  35. package/dist/src/desktop/components/FilterBar/FilterBar.d.ts +8 -10
  36. package/dist/src/desktop/components/FilterBar/FilterBar.js +7 -15
  37. package/dist/src/desktop/components/UserDesktopNavBar/UserDesktopNavBar.d.ts +2 -7
  38. package/dist/src/desktop/components/UserDesktopNavBar/UserDesktopNavBar.js +4 -4
  39. package/dist/src/mobile/components/Chip/Chip.d.ts +9 -5
  40. package/dist/src/mobile/components/Chip/Chip.js +52 -28
  41. package/dist/src/mobile/components/ContextMenuItem/ContextMenuItem.d.ts +8 -5
  42. package/dist/src/mobile/components/ContextMenuItem/ContextMenuItem.js +8 -3
  43. package/dist/src/mobile/components/Dropdown/Dropdown.d.ts +6 -8
  44. package/dist/src/mobile/components/Dropdown/Dropdown.js +9 -4
  45. package/package.json +1 -1
  46. package/release-note.md +16 -4
package/dist/src/desktop/components/AdminList/AdminList.js CHANGED
@@ -53,25 +53,27 @@ var TextLabel_1 = require("../TextLabel");
53
53
  var BulkActionBar_1 = __importDefault(require("./BulkActionBar"));
54
54
  var HeaderRow_1 = __importDefault(require("./HeaderRow"));
55
55
  function AdminList(_a) {
56
- var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'check' : _b, _c = _a.headerRowHideMode, headerRowHideMode = _c === void 0 ? 'none' : _c, column2HeaderText = _a.column2HeaderText, column3HeaderText = _a.column3HeaderText, _d = _a.column3Width, column3Width = _d === void 0 ? 'small' : _d, column4HeaderText = _a.column4HeaderText, _e = _a.column4Width, column4Width = _e === void 0 ? 'small' : _e, column5HeaderText = _a.column5HeaderText, _f = _a.column5Width, column5Width = _f === void 0 ? 'small' : _f, column6HeaderText = _a.column6HeaderText, _g = _a.column6Width, column6Width = _g === void 0 ? 'small' : _g, column7HeaderText = _a.column7HeaderText, _h = _a.column7Width, column7Width = _h === void 0 ? 'small' : _h, column8HeaderText = _a.column8HeaderText, _j = _a.column8Width, column8Width = _j === void 0 ? 'small' : _j, column9HeaderText = _a.column9HeaderText, _k = _a.column9Width, column9Width = _k === void 0 ? 'small' : _k, column10HeaderText = _a.column10HeaderText, _l = _a.column10Width, column10Width = _l === void 0 ? 'small' : _l, _m = _a.dropdownMode, dropdownMode = _m === void 0 ? 'dropdown_amount1' : _m, dropdown1DefaultText = _a.dropdown1DefaultText, dropdown2DefaultText = _a.dropdown2DefaultText, dropdown3DefaultText = _a.dropdown3DefaultText, dropdown1ValueArray = _a.dropdown1ValueArray, dropdown2ValueArray = _a.dropdown2ValueArray, dropdown3ValueArray = _a.dropdown3ValueArray, _o = _a.quickActionBtnMode, quickActionBtnMode = _o === void 0 ? 'btn_amount2' : _o, quickActionBtn1Text = _a.quickActionBtn1Text, quickActionBtn2Text = _a.quickActionBtn2Text, quickActionBtn3Text = _a.quickActionBtn3Text, _p = _a.quickActionBtnType, quickActionBtnType = _p === void 0 ? 'fix' : _p, _q = _a.quickActionBtn1State, quickActionBtn1State = _q === void 0 ? 'normal' : _q, _r = _a.quickActionBtn2State, quickActionBtn2State = _r === void 0 ? 'normal' : _r, _s = _a.quickActionBtn3State, quickActionBtn3State = _s === void 0 ? 'normal' : _s, _t = _a.mBtnMode, mBtnMode = _t === void 0 ? 'mbtn_amount1' : _t, mBtn1Text = _a.mBtn1Text, mBtn2Text = _a.mBtn2Text, mBtn3Text = _a.mBtn3Text, emptyText = _a.emptyText, _u = _a.scrollMode, scrollMode = _u === void 0 ? 'infinite' : _u, _v = _a.scrollVisibleType, scrollVisibleType = _v === void 0 ? 'moving' : _v, _w = _a.selectedIds, selectedIds = _w === void 0 ? [] : _w, children = _a.children, onChangeDropdown1 = _a.onChangeDropdown1, onChangeDropdown2 = _a.onChangeDropdown2, onChangeDropdown3 = _a.onChangeDropdown3, onClickMBtn1 = _a.onClickMBtn1, onClickMBtn2 = _a.onClickMBtn2, onClickMBtn3 = _a.onClickMBtn3, onClickQuickActionBtn1 = _a.onClickQuickActionBtn1, onClickQuickActionBtn2 = _a.onClickQuickActionBtn2, onClickQuickActionBtn3 = _a.onClickQuickActionBtn3, onSelect = _a.onSelect;
56
+ var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'check' : _b, _c = _a.headerRowMode, headerRowMode = _c === void 0 ? 'use' : _c, column2HeaderText = _a.column2HeaderText, column3HeaderText = _a.column3HeaderText, _d = _a.column3Width, column3Width = _d === void 0 ? 'small' : _d, column4HeaderText = _a.column4HeaderText, _e = _a.column4Width, column4Width = _e === void 0 ? 'small' : _e, column5HeaderText = _a.column5HeaderText, _f = _a.column5Width, column5Width = _f === void 0 ? 'small' : _f, column6HeaderText = _a.column6HeaderText, _g = _a.column6Width, column6Width = _g === void 0 ? 'small' : _g, column7HeaderText = _a.column7HeaderText, _h = _a.column7Width, column7Width = _h === void 0 ? 'small' : _h, column8HeaderText = _a.column8HeaderText, _j = _a.column8Width, column8Width = _j === void 0 ? 'small' : _j, column9HeaderText = _a.column9HeaderText, _k = _a.column9Width, column9Width = _k === void 0 ? 'small' : _k, column10HeaderText = _a.column10HeaderText, _l = _a.column10Width, column10Width = _l === void 0 ? 'small' : _l, _m = _a.dropdownMode, dropdownMode = _m === void 0 ? 'dropdown_amount1' : _m, dropdown1DefaultText = _a.dropdown1DefaultText, dropdown2DefaultText = _a.dropdown2DefaultText, dropdown3DefaultText = _a.dropdown3DefaultText, dropdown1ValueArray = _a.dropdown1ValueArray, dropdown2ValueArray = _a.dropdown2ValueArray, dropdown3ValueArray = _a.dropdown3ValueArray, _o = _a.quickActionBtnMode, quickActionBtnMode = _o === void 0 ? 'btn_amount2' : _o, quickActionBtn1Text = _a.quickActionBtn1Text, quickActionBtn2Text = _a.quickActionBtn2Text, quickActionBtn3Text = _a.quickActionBtn3Text, _p = _a.quickActionBtnType, quickActionBtnType = _p === void 0 ? 'fix' : _p, _q = _a.quickActionBtn1State, quickActionBtn1State = _q === void 0 ? 'normal' : _q, _r = _a.quickActionBtn2State, quickActionBtn2State = _r === void 0 ? 'normal' : _r, _s = _a.quickActionBtn3State, quickActionBtn3State = _s === void 0 ? 'normal' : _s, _t = _a.mBtnMode, mBtnMode = _t === void 0 ? 'mbtn_amount1' : _t, mBtn1Text = _a.mBtn1Text, mBtn2Text = _a.mBtn2Text, mBtn3Text = _a.mBtn3Text, emptyText = _a.emptyText, _u = _a.scrollMode, scrollMode = _u === void 0 ? 'infinite' : _u, _v = _a.scrollVisibleType, scrollVisibleType = _v === void 0 ? 'moving' : _v, selectedIds = _a.selectedIds, children = _a.children, onChangeDropdown1 = _a.onChangeDropdown1, onChangeDropdown2 = _a.onChangeDropdown2, onChangeDropdown3 = _a.onChangeDropdown3, onClickMBtn1 = _a.onClickMBtn1, onClickMBtn2 = _a.onClickMBtn2, onClickMBtn3 = _a.onClickMBtn3, onClickQuickActionBtn1 = _a.onClickQuickActionBtn1, onClickQuickActionBtn2 = _a.onClickQuickActionBtn2, onClickQuickActionBtn3 = _a.onClickQuickActionBtn3, onSelect = _a.onSelect;
57
57
  var selectAllMethods = (0, react_hook_form_1.useForm)();
58
58
  var checkboxMethods = (0, react_hook_form_1.useForm)();
59
59
  var isAllCheckboxSelected = (0, react_hook_form_1.useWatch)({ name: 'all', control: selectAllMethods.control });
60
- var _x = (0, react_1.useState)(false), isBulkActionBarOpen = _x[0], setIsBulkActionBarOpen = _x[1];
60
+ var _w = (0, react_1.useState)(false), isBulkActionBarOpen = _w[0], setIsBulkActionBarOpen = _w[1];
61
61
  /**
62
62
  * @when AdminListItem이 선택되었을 때
63
63
  * @expected 벌크액션바 활성화 여부와 체크박스 선택 여부를 결정합니다.
64
64
  */
65
65
  (0, react_1.useEffect)(function () {
66
- if (selectedIds.length) {
67
- setIsBulkActionBarOpen(true);
68
- selectedIds.forEach(function (val) { return checkboxMethods.setValue(val.toString(), true); });
66
+ if (!selectedIds) {
67
+ return;
69
68
  }
70
- else {
69
+ if (!selectedIds.length) {
71
70
  setIsBulkActionBarOpen(false);
72
71
  checkboxMethods.reset();
73
72
  selectAllMethods.reset();
73
+ return;
74
74
  }
75
+ setIsBulkActionBarOpen(true);
76
+ selectedIds.forEach(function (val) { return checkboxMethods.setValue(val.toString(), true); });
75
77
  }, [selectedIds]);
76
78
  var handleSelectAllCheckbox = function () {
77
79
  if (!isAllCheckboxSelected) {
@@ -88,6 +90,9 @@ function AdminList(_a) {
88
90
  }
89
91
  };
90
92
  var handleSelectItem = function (id) {
93
+ if (!selectedIds) {
94
+ return;
95
+ }
91
96
  if (!selectedIds.includes(id)) {
92
97
  checkboxMethods.setValue(id.toString(), true);
93
98
  if (onSelect) {
@@ -109,7 +114,7 @@ function AdminList(_a) {
109
114
  return 2;
110
115
  case 'btn_amount3':
111
116
  return 3;
112
- default:
117
+ case 'none':
113
118
  return 0;
114
119
  }
115
120
  };
@@ -141,57 +146,9 @@ function AdminList(_a) {
141
146
  }
142
147
  return child;
143
148
  });
144
- var handleChangeDropdown1 = function (value) {
145
- if (onChangeDropdown1) {
146
- onChangeDropdown1(value);
147
- }
148
- if (onSelect) {
149
- onSelect([]);
150
- }
151
- };
152
- var handleChangeDropdown2 = function (value) {
153
- if (onChangeDropdown2) {
154
- onChangeDropdown2(value);
155
- }
156
- if (onSelect) {
157
- onSelect([]);
158
- }
159
- };
160
- var handleChangeDropdown3 = function (value) {
161
- if (onChangeDropdown3) {
162
- onChangeDropdown3(value);
163
- }
164
- if (onSelect) {
165
- onSelect([]);
166
- }
167
- };
168
- var handleClickMBtn1 = function () {
169
- if (onClickMBtn1) {
170
- onClickMBtn1();
171
- }
172
- if (onSelect) {
173
- onSelect([]);
174
- }
175
- };
176
- var handleClickMBtn2 = function () {
177
- if (onClickMBtn2) {
178
- onClickMBtn2();
179
- }
180
- if (onSelect) {
181
- onSelect([]);
182
- }
183
- };
184
- var handleClickMBtn3 = function () {
185
- if (onClickMBtn3) {
186
- onClickMBtn3();
187
- }
188
- if (onSelect) {
189
- onSelect([]);
190
- }
191
- };
192
149
  return (react_1.default.createElement(S_AdminList, null,
193
- isBulkActionBarOpen && (react_1.default.createElement(BulkActionBar_1.default, { itemCount: selectedIds === null || selectedIds === void 0 ? void 0 : selectedIds.length, dropdownMode: dropdownMode, dropdown1DefaultText: dropdown1DefaultText, dropdown2DefaultText: dropdown2DefaultText, dropdown3DefaultText: dropdown3DefaultText, dropdown1ValueArray: dropdown1ValueArray, dropdown2ValueArray: dropdown2ValueArray, dropdown3ValueArray: dropdown3ValueArray, mBtnMode: mBtnMode, mBtn1Text: mBtn1Text, mBtn2Text: mBtn2Text, mBtn3Text: mBtn3Text, onChangeDropdown1: handleChangeDropdown1, onChangeDropdown2: handleChangeDropdown2, onChangeDropdown3: handleChangeDropdown3, onClickMBtn1: handleClickMBtn1, onClickMBtn2: handleClickMBtn2, onClickMBtn3: handleClickMBtn3 })),
194
- headerRowHideMode === 'use' && (react_1.default.createElement(react_hook_form_1.FormProvider, __assign({}, selectAllMethods),
150
+ isBulkActionBarOpen && (react_1.default.createElement(BulkActionBar_1.default, { itemCount: selectedIds === null || selectedIds === void 0 ? void 0 : selectedIds.length, dropdownMode: dropdownMode, dropdown1DefaultText: dropdown1DefaultText, dropdown2DefaultText: dropdown2DefaultText, dropdown3DefaultText: dropdown3DefaultText, dropdown1ValueArray: dropdown1ValueArray, dropdown2ValueArray: dropdown2ValueArray, dropdown3ValueArray: dropdown3ValueArray, mBtnMode: mBtnMode, mBtn1Text: mBtn1Text, mBtn2Text: mBtn2Text, mBtn3Text: mBtn3Text, onChangeDropdown1: onChangeDropdown1, onChangeDropdown2: onChangeDropdown2, onChangeDropdown3: onChangeDropdown3, onClickMBtn1: onClickMBtn1, onClickMBtn2: onClickMBtn2, onClickMBtn3: onClickMBtn3 })),
151
+ headerRowMode === 'use' && (react_1.default.createElement(react_hook_form_1.FormProvider, __assign({}, selectAllMethods),
195
152
  react_1.default.createElement("form", null,
196
153
  react_1.default.createElement(HeaderRow_1.default, { selectionMode: selectionMode, column2HeaderText: column2HeaderText, column3HeaderText: column3HeaderText, column3HeaderWidth: column3Width, column4HeaderText: column4HeaderText, column4HeaderWidth: column4Width, column5HeaderText: column5HeaderText, column5HeaderWidth: column5Width, column6HeaderText: column6HeaderText, column6HeaderWidth: column6Width, column7HeaderText: column7HeaderText, column7HeaderWidth: column7Width, column8HeaderText: column8HeaderText, column8HeaderWidth: column8Width, column9HeaderText: column9HeaderText, column9HeaderWidth: column9Width, column10HeaderText: column10HeaderText, column10HeaderWidth: column10Width, quickActionBtnType: quickActionBtnType, quickActionButtonCount: getActionButtonCount(), onClickSelectAllCheckbox: handleSelectAllCheckbox })))),
197
154
  react_1.default.createElement(S_ScrollBox, { scrollMode: scrollMode, scrollVisibleType: scrollVisibleType }, react_1.default.Children.count(children) ? (react_1.default.createElement(react_hook_form_1.FormProvider, __assign({}, checkboxMethods),
package/dist/src/desktop/components/AdminList/BulkActionBar.d.ts CHANGED
@@ -1,22 +1,22 @@
1
1
  /// <reference types="react" />
2
2
  import { TFunctionResult } from 'i18next';
3
- import { Value } from '../Dropdown/Dropdown';
3
+ import { PDSValueOption } from '../../../common';
4
4
  declare type Props = {
5
5
  itemCount?: number;
6
6
  dropdownMode: 'none' | 'dropdown_amount1' | 'dropdown_amount2' | 'dropdown_amount3';
7
- dropdown1DefaultText?: Value;
8
- dropdown2DefaultText?: Value;
9
- dropdown3DefaultText?: Value;
10
- dropdown1ValueArray?: Value[];
11
- dropdown2ValueArray?: Value[];
12
- dropdown3ValueArray?: Value[];
7
+ dropdown1DefaultText?: PDSValueOption;
8
+ dropdown2DefaultText?: PDSValueOption;
9
+ dropdown3DefaultText?: PDSValueOption;
10
+ dropdown1ValueArray?: PDSValueOption[];
11
+ dropdown2ValueArray?: PDSValueOption[];
12
+ dropdown3ValueArray?: PDSValueOption[];
13
13
  mBtnMode: 'none' | 'mbtn_amount1' | 'mbtn_amount2' | 'mbtn_amount3';
14
14
  mBtn1Text?: TFunctionResult;
15
15
  mBtn2Text?: TFunctionResult;
16
16
  mBtn3Text?: TFunctionResult;
17
- onChangeDropdown1?: (value: Value) => void;
18
- onChangeDropdown2?: (value: Value) => void;
19
- onChangeDropdown3?: (value: Value) => void;
17
+ onChangeDropdown1?: (value: PDSValueOption) => void;
18
+ onChangeDropdown2?: (value: PDSValueOption) => void;
19
+ onChangeDropdown3?: (value: PDSValueOption) => void;
20
20
  onClickMBtn1?: () => void;
21
21
  onClickMBtn2?: () => void;
22
22
  onClickMBtn3?: () => void;
package/dist/src/desktop/components/AdminList/BulkActionBar.js CHANGED
@@ -27,23 +27,23 @@ function BulkActionBar(_a) {
27
27
  react_1.default.createElement(hybrid_1.Divider, { direction: "vertical", height: 16 }),
28
28
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_e", spacingType: "width" }),
29
29
  dropdownMode !== 'none' && (react_1.default.createElement(react_1.default.Fragment, null,
30
- dropdown1ValueArray && (react_1.default.createElement(Dropdown_1.Dropdown, { valueArray: dropdown1ValueArray, defaultValue: dropdown1DefaultText, onChange: onChangeDropdown1, size: "small" })),
30
+ dropdown1ValueArray && (react_1.default.createElement(Dropdown_1.Dropdown, { valueArray: dropdown1ValueArray, defaultValue: dropdown1DefaultText, onChange: onChangeDropdown1, size: "small", colorTheme: "dark" })),
31
31
  (dropdownMode === 'dropdown_amount2' || dropdownMode === 'dropdown_amount3') &&
32
32
  dropdown2ValueArray && (react_1.default.createElement(react_1.default.Fragment, null,
33
33
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
34
- react_1.default.createElement(Dropdown_1.Dropdown, { valueArray: dropdown2ValueArray, defaultValue: dropdown2DefaultText, onChange: onChangeDropdown2, size: "small" }))),
34
+ react_1.default.createElement(Dropdown_1.Dropdown, { valueArray: dropdown2ValueArray, defaultValue: dropdown2DefaultText, onChange: onChangeDropdown2, size: "small", colorTheme: "dark" }))),
35
35
  dropdownMode === 'dropdown_amount3' && dropdown3ValueArray && (react_1.default.createElement(react_1.default.Fragment, null,
36
36
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
37
- react_1.default.createElement(Dropdown_1.Dropdown, { valueArray: dropdown3ValueArray, defaultValue: dropdown3DefaultText, onChange: onChangeDropdown3, size: "small" }))))),
37
+ react_1.default.createElement(Dropdown_1.Dropdown, { valueArray: dropdown3ValueArray, defaultValue: dropdown3DefaultText, onChange: onChangeDropdown3, size: "small", colorTheme: "dark" }))))),
38
38
  mBtnMode !== 'none' && (react_1.default.createElement(react_1.default.Fragment, null,
39
39
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
40
- react_1.default.createElement(MainButton_1.MainButton, { size: "small", fillType: "line", text: mBtn1Text, onClick: onClickMBtn1 }),
40
+ react_1.default.createElement(MainButton_1.MainButton, { size: "small", fillType: "line", text: mBtn1Text, onClick: onClickMBtn1, colorTheme: "line3" }),
41
41
  (mBtnMode === 'mbtn_amount2' || mBtnMode === 'mbtn_amount3') && (react_1.default.createElement(react_1.default.Fragment, null,
42
42
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
43
- react_1.default.createElement(MainButton_1.MainButton, { size: "small", fillType: "line", text: mBtn2Text, onClick: onClickMBtn2 }))),
43
+ react_1.default.createElement(MainButton_1.MainButton, { size: "small", fillType: "line", text: mBtn2Text, onClick: onClickMBtn2, colorTheme: "line3" }))),
44
44
  mBtnMode === 'mbtn_amount3' && (react_1.default.createElement(react_1.default.Fragment, null,
45
45
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
46
- react_1.default.createElement(MainButton_1.MainButton, { size: "small", fillType: "line", text: mBtn3Text, onClick: onClickMBtn3 }))))),
46
+ react_1.default.createElement(MainButton_1.MainButton, { size: "small", fillType: "line", text: mBtn3Text, onClick: onClickMBtn3, colorTheme: "line3" }))))),
47
47
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_e", spacingType: "width" })));
48
48
  }
49
49
  var S_BulkActionBar = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n display: flex;\n height: 56px;\n min-height: 56px;\n"], ["\n align-items: center;\n background-color: ", ";\n box-sizing: border-box;\n display: flex;\n height: 56px;\n min-height: 56px;\n"])), function (_a) {
package/dist/src/desktop/components/AdminList/HeaderRow.js CHANGED
@@ -34,8 +34,10 @@ var TextLabel_1 = require("../TextLabel");
34
34
  function HeaderRow(_a) {
35
35
  var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'check' : _b, column2HeaderText = _a.column2HeaderText, column3HeaderText = _a.column3HeaderText, _c = _a.column3HeaderWidth, column3HeaderWidth = _c === void 0 ? 'small' : _c, column4HeaderText = _a.column4HeaderText, _d = _a.column4HeaderWidth, column4HeaderWidth = _d === void 0 ? 'small' : _d, column5HeaderText = _a.column5HeaderText, _e = _a.column5HeaderWidth, column5HeaderWidth = _e === void 0 ? 'small' : _e, column6HeaderText = _a.column6HeaderText, _f = _a.column6HeaderWidth, column6HeaderWidth = _f === void 0 ? 'small' : _f, column7HeaderText = _a.column7HeaderText, _g = _a.column7HeaderWidth, column7HeaderWidth = _g === void 0 ? 'small' : _g, column8HeaderText = _a.column8HeaderText, _h = _a.column8HeaderWidth, column8HeaderWidth = _h === void 0 ? 'small' : _h, column9HeaderText = _a.column9HeaderText, _j = _a.column9HeaderWidth, column9HeaderWidth = _j === void 0 ? 'small' : _j, column10HeaderText = _a.column10HeaderText, _k = _a.column10HeaderWidth, column10HeaderWidth = _k === void 0 ? 'small' : _k, _l = _a.quickActionBtnType, quickActionBtnType = _l === void 0 ? 'fix' : _l, _m = _a.quickActionButtonCount, quickActionButtonCount = _m === void 0 ? 2 : _m, onClickSelectAllCheckbox = _a.onClickSelectAllCheckbox;
36
36
  return (react_1.default.createElement(S_HeaderRow, null,
37
+ react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }),
37
38
  selectionMode === 'check' && (react_1.default.createElement(S_CheckBox, null,
38
39
  react_1.default.createElement(Checkbox_1.Checkbox, { name: "all", onChange: onClickSelectAllCheckbox }))),
40
+ react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }),
39
41
  react_1.default.createElement(S_FlexColumn, null,
40
42
  react_1.default.createElement(TextLabel_1.TextLabel, { text: column2HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" })),
41
43
  column3HeaderText && (react_1.default.createElement(S_Column, { columnSize: column3HeaderWidth },
@@ -55,27 +57,21 @@ function HeaderRow(_a) {
55
57
  column10HeaderText && (react_1.default.createElement(S_Column, { columnSize: column10HeaderWidth },
56
58
  react_1.default.createElement(TextLabel_1.TextLabel, { text: column10HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" }))),
57
59
  quickActionBtnType === 'hover' && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_f", spacingType: "width" }),
58
- quickActionBtnType === 'fix' && (react_1.default.createElement(S_QuickActionButtonBox, null, Array(quickActionButtonCount)
60
+ quickActionBtnType === 'fix' && quickActionButtonCount > 0 && (react_1.default.createElement(S_QuickActionButtonBox, null, Array(quickActionButtonCount)
59
61
  .fill(0)
60
62
  .map(function (el, i) { return (react_1.default.createElement(S_EmptyDiv, { key: "" + el + i })); })))));
61
63
  }
62
64
  var small = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 56px;\n"], ["\n width: 56px;\n"])));
63
65
  var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 80px;\n"], ["\n width: 80px;\n"])));
64
66
  var large = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 144px;\n"], ["\n width: 144px;\n"])));
65
- var S_HeaderRow = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n height: 48px;\n padding-left: ", ";\n"], ["\n align-items: center;\n background-color: ", ";\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n height: 48px;\n padding-left: ", ";\n"])), function (_a) {
67
+ var S_HeaderRow = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n height: 48px;\n"], ["\n align-items: center;\n background-color: ", ";\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n height: 48px;\n"])), function (_a) {
66
68
  var theme = _a.theme;
67
69
  return theme.ui_cpnt_list_base_area;
68
70
  }, function (_a) {
69
71
  var theme = _a.theme;
70
72
  return theme.ui_cpnt_divider;
71
- }, function (_a) {
72
- var theme = _a.theme;
73
- return theme.spacing.spacingC;
74
- });
75
- var S_CheckBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 40px;\n justify-content: center;\n padding-right: ", ";\n width: 40px;\n"], ["\n align-items: center;\n display: flex;\n height: 40px;\n justify-content: center;\n padding-right: ", ";\n width: 40px;\n"])), function (_a) {
76
- var theme = _a.theme;
77
- return theme.spacing.spacingC;
78
73
  });
74
+ var S_CheckBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 40px;\n justify-content: center;\n width: 40px;\n"], ["\n align-items: center;\n display: flex;\n height: 40px;\n justify-content: center;\n width: 40px;\n"])));
79
75
  var S_FlexColumn = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
80
76
  var S_Column = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n padding-left: ", ";\n padding-right: ", ";\n\n ", ";\n"], ["\n padding-left: ", ";\n padding-right: ", ";\n\n ", ";\n"])), function (_a) {
81
77
  var theme = _a.theme;
package/dist/src/desktop/components/AdminListHeader/AdminListHeader.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { TFunctionResult } from 'i18next';
2
2
  import React from 'react';
3
- import { Value } from '../Dropdown/Dropdown';
3
+ import { PDSValueOption } from '../../../common';
4
4
  declare type Props = {
5
5
  headerBarSize?: 'regular' | 'small';
6
6
  headerBarTitleText?: TFunctionResult;
@@ -9,8 +9,8 @@ declare type Props = {
9
9
  totalPage?: number;
10
10
  contentText?: TFunctionResult;
11
11
  filterBar?: React.ReactNode;
12
- dropdownTextArray: Value[];
13
- onChangeCount?: (count: number) => void;
12
+ dropdownTextArray?: PDSValueOption[];
13
+ onChangeCount?: (option: PDSValueOption) => void;
14
14
  onClickNextButton?: () => void;
15
15
  onClickPrevButton?: () => void;
16
16
  };
package/dist/src/desktop/components/AdminListHeader/AdminListHeader.js CHANGED
@@ -34,16 +34,30 @@ function AdminListHeader(_a) {
34
34
  var _b = _a.headerBarSize, headerBarSize = _b === void 0 ? 'regular' : _b, headerBarTitleText = _a.headerBarTitleText, _c = _a.itemCountUnit, itemCountUnit = _c === void 0 ? 15 : _c, _d = _a.currentPage, currentPage = _d === void 0 ? 1 : _d, _e = _a.totalPage, totalPage = _e === void 0 ? 1 : _e, contentText = _a.contentText, filterBar = _a.filterBar, _f = _a.dropdownTextArray, dropdownTextArray = _f === void 0 ? defaultPaginaionTextArray : _f, onChangeCount = _a.onChangeCount, onClickNextButton = _a.onClickNextButton, onClickPrevButton = _a.onClickPrevButton;
35
35
  return (react_1.default.createElement(S_AdminListHeader, null,
36
36
  react_1.default.createElement(HeaderBar_1.default, { titleText: headerBarTitleText, size: headerBarSize, count: itemCountUnit, currentPage: currentPage, totalPage: totalPage, dropdownTextArray: dropdownTextArray, onChangeDropdown: onChangeCount, onClickIBtn1: onClickNextButton, onClickIBtn2: onClickPrevButton }),
37
+ headerBarTitleText && !contentText && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_e" }),
38
+ headerBarTitleText && contentText && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b" }),
37
39
  contentText && (react_1.default.createElement(react_1.default.Fragment, null,
38
- react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b" }),
39
40
  react_1.default.createElement(S_ContentTextWrapper, null,
40
- react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: "sysTextTertiary" })))),
41
- filterBar && filterBar));
41
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: "sysTextTertiary" })),
42
+ react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }))),
43
+ filterBar && (react_1.default.createElement(react_1.default.Fragment, null,
44
+ react_1.default.createElement(S_FilterBarWrapper, null, filterBar),
45
+ react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" })))));
42
46
  }
43
47
  var S_AdminListHeader = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
44
- var S_ContentTextWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding-left: ", ";\n"], ["\n padding-left: ", ";\n"])), function (_a) {
48
+ var S_ContentTextWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
49
+ var theme = _a.theme;
50
+ return theme.spacing.spacingE;
51
+ }, function (_a) {
52
+ var theme = _a.theme;
53
+ return theme.spacing.spacingE;
54
+ });
55
+ var S_FilterBarWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
56
+ var theme = _a.theme;
57
+ return theme.spacing.spacingE;
58
+ }, function (_a) {
45
59
  var theme = _a.theme;
46
60
  return theme.spacing.spacingE;
47
61
  });
48
62
  exports.default = AdminListHeader;
49
- var templateObject_1, templateObject_2;
63
+ var templateObject_1, templateObject_2, templateObject_3;
package/dist/src/desktop/components/AdminListHeader/HeaderBar.d.ts CHANGED
@@ -1,14 +1,14 @@
1
1
  /// <reference types="react" />
2
2
  import { TFunctionResult } from 'i18next';
3
- import { Value } from '../Dropdown/Dropdown';
3
+ import { PDSValueOption } from '../../../common';
4
4
  declare type Props = {
5
5
  titleText?: TFunctionResult;
6
6
  size?: 'regular' | 'small';
7
7
  count?: number;
8
8
  currentPage?: number;
9
9
  totalPage?: number;
10
- dropdownTextArray: Value[];
11
- onChangeDropdown?: (count: number) => void;
10
+ dropdownTextArray: PDSValueOption[];
11
+ onChangeDropdown?: (option: PDSValueOption) => void;
12
12
  onClickIBtn1?: () => void;
13
13
  onClickIBtn2?: () => void;
14
14
  };
package/dist/src/desktop/components/AdminListHeader/HeaderBar.js CHANGED
@@ -38,7 +38,7 @@ function HeaderBar(_a) {
38
38
  var t = (0, react_i18next_1.useTranslation)('translation').t;
39
39
  var handleDropdown = function (option) {
40
40
  if (onChangeDropdown) {
41
- onChangeDropdown(option.value);
41
+ onChangeDropdown(option);
42
42
  }
43
43
  };
44
44
  return (react_1.default.createElement(S_HeaderBar, { size: size },
package/dist/src/desktop/components/AdminListItem/AdminListItem.js CHANGED
@@ -36,6 +36,21 @@ function AdminListItem(_a) {
36
36
  control: methods.control,
37
37
  name: id.toString()
38
38
  });
39
+ var _5 = (0, react_1.useState)(false), hasScroll = _5[0], setHasScroll = _5[1];
40
+ var contentRef = (0, react_1.useRef)(null);
41
+ (0, react_1.useEffect)(function () {
42
+ if (!contentRef || !contentRef.current)
43
+ return;
44
+ var _a = contentRef.current, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
45
+ var isTextClamped = scrollHeight > clientHeight;
46
+ console.log(isTextClamped);
47
+ setHasScroll(isTextClamped);
48
+ }, []);
49
+ (0, react_1.useEffect)(function () {
50
+ if (selectedState === 'maintain') {
51
+ methods.setValue(id.toString(), true);
52
+ }
53
+ }, [selectedState]);
39
54
  var handleClick = function (e) {
40
55
  e.preventDefault();
41
56
  if (selectedState === 'maintain') {
@@ -104,16 +119,6 @@ function AdminListItem(_a) {
104
119
  return 'sysTextSecondary';
105
120
  }
106
121
  };
107
- var _5 = (0, react_1.useState)(false), hasScroll = _5[0], setHasScroll = _5[1];
108
- var contentRef = (0, react_1.useRef)(null);
109
- (0, react_1.useEffect)(function () {
110
- if (!contentRef || !contentRef.current)
111
- return;
112
- var _a = contentRef.current, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
113
- var isTextClamped = scrollHeight > clientHeight;
114
- console.log(isTextClamped);
115
- setHasScroll(isTextClamped);
116
- }, []);
117
122
  return (react_1.default.createElement(S_AdminListItem, { rowSize: rowSize, onClick: handleClick, isSelected: isSelected, quickActionBtnType: quickActionBtnType },
118
123
  react_1.default.createElement(S_SelectionColumn, { rowSize: rowSize }, selectionMode === 'check' && (react_1.default.createElement(S_Selection, null,
119
124
  react_1.default.createElement(Checkbox_1.Checkbox, { name: id.toString(), state: selectedState === 'maintain' ? 'disabled' : 'normal' })))),
@@ -126,20 +131,20 @@ function AdminListItem(_a) {
126
131
  column3Text && (react_1.default.createElement(S_Column, { columnSize: column3TextWidth },
127
132
  react_1.default.createElement(TextLabel_1.TextLabel, { text: column3Text, styleTheme: column3TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column3TextStyleTheme) }))),
128
133
  column4Text && (react_1.default.createElement(S_Column, { columnSize: column4TextWidth },
129
- react_1.default.createElement(TextLabel_1.TextLabel, { text: column4Text, styleTheme: "body2Regular", colorTheme: getColumnColorTheme(column4TextStyleTheme) }))),
134
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: column4Text, styleTheme: column4TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column4TextStyleTheme) }))),
130
135
  column5Text && (react_1.default.createElement(S_Column, { columnSize: column5TextWidth },
131
- react_1.default.createElement(TextLabel_1.TextLabel, { text: column5Text, styleTheme: "body2Regular", colorTheme: getColumnColorTheme(column5TextStyleTheme) }))),
136
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: column5Text, styleTheme: column5TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column5TextStyleTheme) }))),
132
137
  column6Text && (react_1.default.createElement(S_Column, { columnSize: column6TextWidth },
133
- react_1.default.createElement(TextLabel_1.TextLabel, { text: column6Text, styleTheme: "body2Regular", colorTheme: getColumnColorTheme(column6TextStyleTheme) }))),
138
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: column6Text, styleTheme: column6TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column6TextStyleTheme) }))),
134
139
  column7Text && (react_1.default.createElement(S_Column, { columnSize: column7TextWidth },
135
- react_1.default.createElement(TextLabel_1.TextLabel, { text: column7Text, styleTheme: "body2Regular", colorTheme: getColumnColorTheme(column7TextStyleTheme) }))),
140
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: column7Text, styleTheme: column7TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column7TextStyleTheme) }))),
136
141
  column8Text && (react_1.default.createElement(S_Column, { columnSize: column8TextWidth },
137
- react_1.default.createElement(TextLabel_1.TextLabel, { text: column8Text, styleTheme: "body2Regular", colorTheme: getColumnColorTheme(column8TextStyleTheme) }))),
142
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: column8Text, styleTheme: column8TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column8TextStyleTheme) }))),
138
143
  column9Text && (react_1.default.createElement(S_Column, { columnSize: column9TextWidth },
139
- react_1.default.createElement(TextLabel_1.TextLabel, { text: column9Text, styleTheme: "body2Regular", colorTheme: getColumnColorTheme(column9TextStyleTheme) }))),
144
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: column9Text, styleTheme: column9TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column9TextStyleTheme) }))),
140
145
  column10Text && (react_1.default.createElement(S_Column, { columnSize: column10TextWidth },
141
- react_1.default.createElement(TextLabel_1.TextLabel, { text: column10Text, styleTheme: "body2Regular", colorTheme: getColumnColorTheme(column10TextStyleTheme) }))),
142
- react_1.default.createElement(S_QuickActionButtonBox, { quickActionBtnType: quickActionBtnType }, quickActionBtnMode !== 'none' && react_1.default.createElement(react_1.default.Fragment, null, quickActionButtons())),
146
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: column10Text, styleTheme: column10TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column10TextStyleTheme) }))),
147
+ quickActionBtnMode !== 'none' && (react_1.default.createElement(S_QuickActionButtonBox, { quickActionBtnType: quickActionBtnType }, quickActionButtons())),
143
148
  quickActionBtnType === 'hover' && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_f", spacingType: "width" })));
144
149
  }
145
150
  var highRow = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 200px;\n max-height: 200px;\n"], ["\n height: 200px;\n max-height: 200px;\n"])));
@@ -173,10 +178,7 @@ var S_QuickActionButton = styled_components_1.default.div(templateObject_12 || (
173
178
  var disabled = _a.disabled;
174
179
  return (disabled ? 'default' : 'pointer');
175
180
  });
176
- var S_Selection = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 40px;\n justify-content: center;\n padding-left: ", ";\n width: 40px;\n"], ["\n align-items: center;\n display: flex;\n height: 40px;\n justify-content: center;\n padding-left: ", ";\n width: 40px;\n"])), function (_a) {
177
- var theme = _a.theme;
178
- return theme.spacing.spacingC;
179
- });
181
+ var S_Selection = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 40px;\n justify-content: center;\n width: 40px;\n"], ["\n align-items: center;\n display: flex;\n height: 40px;\n justify-content: center;\n width: 40px;\n"])));
180
182
  var S_ImageWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n margin-right: ", ";\n"], ["\n margin-right: ", ";\n"])), function (_a) {
181
183
  var theme = _a.theme;
182
184
  return theme.spacing.spacingD;
@@ -223,9 +225,12 @@ var S_SelectionColumn = styled_components_1.default.div(templateObject_22 || (te
223
225
  });
224
226
  var hoverAdminListItem = (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n align-items: center;\n position: relative;\n"], ["\n align-items: center;\n position: relative;\n"])));
225
227
  var fixedAdminListItem = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n justify-content: space-between;\n"], ["\n justify-content: space-between;\n"])));
226
- var S_AdminListItem = styled_components_1.default.div(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n\n ", ";\n ", "\n\n :hover {\n background-color: ", ";\n\n ", " {\n display: ", ";\n }\n }\n\n &:last-child {\n margin-bottom: 88px;\n }\n"], ["\n background-color: ", ";\n display: flex;\n\n ", ";\n ", "\n\n :hover {\n background-color: ", ";\n\n ", " {\n display: ", ";\n }\n }\n\n &:last-child {\n margin-bottom: 88px;\n }\n"])), function (_a) {
228
+ var S_AdminListItem = styled_components_1.default.div(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n padding-left: ", ";\n\n ", ";\n ", "\n\n :hover {\n background-color: ", ";\n\n ", " {\n display: ", ";\n }\n }\n\n &:last-child {\n margin-bottom: 88px;\n }\n"], ["\n background-color: ", ";\n display: flex;\n padding-left: ", ";\n\n ", ";\n ", "\n\n :hover {\n background-color: ", ";\n\n ", " {\n display: ", ";\n }\n }\n\n &:last-child {\n margin-bottom: 88px;\n }\n"])), function (_a) {
227
229
  var theme = _a.theme, isSelected = _a.isSelected;
228
230
  return isSelected ? theme.ui_cpnt_datatable_base_selected : theme.ui_cpnt_datatable_base_default;
231
+ }, function (_a) {
232
+ var theme = _a.theme;
233
+ return theme.spacing.spacingC;
229
234
  }, function (_a) {
230
235
  var rowSize = _a.rowSize;
231
236
  return rowSize && { high: highRow, medium: mediumRow, low: lowRow }[rowSize];
package/dist/src/desktop/components/Chip/Chip.d.ts CHANGED
@@ -1,16 +1,20 @@
1
1
  /// <reference types="react" />
2
- import { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
2
+ import { FillIconNameKeys, LineIconNameKeys, PDSTextType, PDSValueOption } from '../../../common';
3
3
  declare type DisplayType = 'category_choice' | 'filter_single' | 'filter_multi' | 'removable' | 'label' | 'time' | 'information';
4
4
  export declare type ChipProps = {
5
5
  displayType?: DisplayType;
6
- text?: PDSTextType;
7
6
  filterIconMode?: 'none' | 'left';
8
7
  iconFillType?: 'line' | 'fill';
9
8
  iconName?: FillIconNameKeys | LineIconNameKeys;
10
- activeChipId?: string | number;
11
- chipId?: string | number;
9
+ text?: PDSTextType;
10
+ value?: PDSValueOption['value'];
11
+ id?: PDSValueOption['value'];
12
12
  onClickChip?: () => void;
13
13
  onClickXMarkIcon?: () => void;
14
+ /** @deprecated value 필드를 대신 사용하세요. */
15
+ activeChipId?: string | number;
16
+ /** @deprecated id 필드를 대신 사용하세요. */
17
+ chipId?: string | number;
14
18
  };
15
- export default function Chip({ displayType, text, filterIconMode, iconFillType, iconName, activeChipId, chipId, onClickChip, onClickXMarkIcon }: ChipProps): JSX.Element;
19
+ export default function Chip({ displayType, filterIconMode, iconFillType, iconName, text, value, id, activeChipId, chipId, onClickChip, onClickXMarkIcon }: ChipProps): JSX.Element;
16
20
  export {};
package/dist/src/desktop/components/Chip/Chip.js CHANGED
@@ -3,22 +3,51 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
3
3
  if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
4
  return cooked;
5
5
  };
6
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
7
+ if (k2 === undefined) k2 = k;
8
+ Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
6
25
  var __importDefault = (this && this.__importDefault) || function (mod) {
7
26
  return (mod && mod.__esModule) ? mod : { "default": mod };
8
27
  };
9
28
  Object.defineProperty(exports, "__esModule", { value: true });
10
- var react_1 = __importDefault(require("react"));
29
+ var react_1 = __importStar(require("react"));
11
30
  var styled_components_1 = __importDefault(require("styled-components"));
12
31
  var Icon_1 = require("../../../hybrid/components/Icon");
13
32
  var TextLabel_1 = require("../TextLabel");
14
33
  function Chip(_a) {
15
- var _b = _a.displayType, displayType = _b === void 0 ? 'filter_single' : _b, text = _a.text, _c = _a.filterIconMode, filterIconMode = _c === void 0 ? 'none' : _c, _d = _a.iconFillType, iconFillType = _d === void 0 ? 'line' : _d, iconName = _a.iconName, _e = _a.activeChipId, activeChipId = _e === void 0 ? 0 : _e, chipId = _a.chipId, onClickChip = _a.onClickChip, onClickXMarkIcon = _a.onClickXMarkIcon;
16
- var handleClick = function () {
34
+ var _b = _a.displayType, displayType = _b === void 0 ? 'filter_single' : _b, _c = _a.filterIconMode, filterIconMode = _c === void 0 ? 'none' : _c, _d = _a.iconFillType, iconFillType = _d === void 0 ? 'line' : _d, iconName = _a.iconName, text = _a.text, value = _a.value, id = _a.id, activeChipId = _a.activeChipId, chipId = _a.chipId, onClickChip = _a.onClickChip, onClickXMarkIcon = _a.onClickXMarkIcon;
35
+ var isActive = (0, react_1.useMemo)(function () {
36
+ if (activeChipId !== undefined && chipId !== undefined) {
37
+ return activeChipId === chipId;
38
+ }
39
+ if (value !== undefined && id !== undefined) {
40
+ return value === id;
41
+ }
42
+ return false;
43
+ }, [activeChipId, chipId, value, id]);
44
+ var handleClickChip = function () {
17
45
  if (onClickChip) {
18
46
  onClickChip();
19
47
  }
20
48
  };
21
- var handleClickXMarkIcon = function () {
49
+ var handleClickXMarkIcon = function (e) {
50
+ e.stopPropagation();
22
51
  if (onClickXMarkIcon) {
23
52
  onClickXMarkIcon();
24
53
  }
@@ -26,39 +55,37 @@ function Chip(_a) {
26
55
  var chipType = function () {
27
56
  switch (displayType) {
28
57
  case 'category_choice':
29
- return (react_1.default.createElement(S_CategoryChoiceChip, { isActive: chipId === activeChipId, onClick: handleClick },
30
- chipId !== activeChipId && (react_1.default.createElement(S_CategoryIconWrapper, { isActive: chipId === activeChipId },
58
+ return (react_1.default.createElement(S_CategoryChoiceChip, { isActive: isActive, onClick: handleClickChip },
59
+ !isActive && (react_1.default.createElement(S_CategoryIconWrapper, { isActive: isActive },
31
60
  react_1.default.createElement(Icon_1.Icon, { size: 16, fillType: "line", iconName: "ic_filter", colorKey: "ui_cpnt_chip_line_icon_01" }))),
32
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: chipId === activeChipId ? 'usrTextBrandOnPrimary' : 'sysTextPrimary' }),
33
- chipId === activeChipId && (react_1.default.createElement(S_CategoryIconWrapper, { isActive: chipId === activeChipId },
61
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextPrimary' }),
62
+ isActive && (react_1.default.createElement(S_CategoryIconWrapper, { isActive: isActive },
34
63
  react_1.default.createElement(Icon_1.Icon, { size: 12, fillType: "line", iconName: "ic_xmark", colorKey: "ui_cpnt_chip_fill_icon_active_01" })))));
35
64
  case 'information':
36
- return (react_1.default.createElement(S_InfoChip, { onClick: handleClick },
65
+ return (react_1.default.createElement(S_InfoChip, { onClick: handleClickChip },
37
66
  react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary" })));
38
67
  case 'label':
39
- return (react_1.default.createElement(S_LabelChip, { onClick: handleClick },
68
+ return (react_1.default.createElement(S_LabelChip, { onClick: handleClickChip },
40
69
  react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary" })));
41
70
  case 'time':
42
- return (react_1.default.createElement(S_TimeChip, { onClick: handleClick },
71
+ return (react_1.default.createElement(S_TimeChip, { onClick: handleClickChip },
43
72
  react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextWhite" })));
44
73
  case 'removable':
45
- return (react_1.default.createElement(S_RemovableChip, { onClick: handleClick },
74
+ return (react_1.default.createElement(S_RemovableChip, { onClick: handleClickChip },
46
75
  react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: "sysTextSecondary" }),
47
76
  react_1.default.createElement(S_XIconWrapper, { onClick: handleClickXMarkIcon },
48
77
  react_1.default.createElement(Icon_1.Icon, { size: 12, iconName: "ic_xmark", fillType: "line", colorKey: "ui_cpnt_chip_fill_icon_inactive" }))));
49
78
  default:
50
- return (react_1.default.createElement(S_FilterSingleChip, { isActive: chipId === activeChipId, onClick: handleClick },
79
+ return (react_1.default.createElement(S_FilterSingleChip, { isActive: isActive, onClick: handleClickChip },
51
80
  filterIconMode === 'left' && (react_1.default.createElement(S_FilterIconWrapper, null,
52
- react_1.default.createElement(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: chipId === activeChipId
53
- ? 'ui_cpnt_chip_fill_icon_active_01'
54
- : 'ui_cpnt_chip_line_icon_02' }))),
55
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: chipId === activeChipId ? 'usrTextBrandOnPrimary' : 'sysTextSecondary' })));
81
+ 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' }))),
82
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextSecondary' })));
56
83
  }
57
84
  };
58
85
  return react_1.default.createElement(S_ChipWrapper, null, chipType());
59
86
  }
60
87
  exports.default = Chip;
61
- var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 16px;\n box-sizing: border-box;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n gap: 4px;\n cursor: pointer;\n :hover {\n background-color: ", ";\n }\n ", ";\n"], ["\n border-radius: 16px;\n box-sizing: border-box;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n gap: 4px;\n cursor: pointer;\n :hover {\n background-color: ", ";\n }\n ", ";\n"])), function (_a) {
88
+ var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 16px;\n box-sizing: border-box;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n gap: 4px;\n cursor: pointer;\n\n &:hover {\n background-color: ", ";\n }\n ", ";\n"], ["\n border-radius: 16px;\n box-sizing: border-box;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n gap: 4px;\n cursor: pointer;\n\n &:hover {\n background-color: ", ";\n }\n ", ";\n"])), function (_a) {
62
89
  var theme = _a.theme, isActive = _a.isActive;
63
90
  return isActive ? theme.ui_cpnt_chip_fill_base_active_01 : '';
64
91
  }, function (_a) {
package/dist/src/desktop/components/ContextMenuItem/ContextMenuItem.d.ts CHANGED
@@ -1,11 +1,14 @@
1
1
  /// <reference types="react" />
2
- import { PDSTextType } from '../../../common';
2
+ import { PDSTextType, PDSValueOption } from '../../../common';
3
3
  export declare type ContextMenuItemProps = {
4
- text: PDSTextType;
4
+ option?: PDSValueOption;
5
5
  size?: 'large' | 'medium' | 'small';
6
- value: string | number | boolean;
7
6
  isSelected?: boolean;
8
- onClick: (value: string | number | boolean) => void;
7
+ onClick?: (value: PDSValueOption | string | number | boolean) => void;
8
+ /** @deprecated option 필드를 대신 사용하세요. */
9
+ text?: PDSTextType;
10
+ /** @deprecated option 필드를 대신 사용하세요. */
11
+ value?: string | number | boolean;
9
12
  };
10
- declare function ContextMenuItem({ text, size, value, isSelected, onClick }: ContextMenuItemProps): JSX.Element;
13
+ declare function ContextMenuItem({ option, size, isSelected, onClick, text, value }: ContextMenuItemProps): JSX.Element;
11
14
  export default ContextMenuItem;
package/dist/src/desktop/components/ContextMenuItem/ContextMenuItem.js CHANGED
@@ -30,12 +30,17 @@ var react_1 = __importDefault(require("react"));
30
30
  var styled_components_1 = __importStar(require("styled-components"));
31
31
  var TextLabel_1 = require("../TextLabel");
32
32
  function ContextMenuItem(_a) {
33
- var text = _a.text, _b = _a.size, size = _b === void 0 ? 'small' : _b, value = _a.value, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c, onClick = _a.onClick;
33
+ var option = _a.option, _b = _a.size, size = _b === void 0 ? 'small' : _b, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c, onClick = _a.onClick, text = _a.text, value = _a.value;
34
34
  var handleClick = function () {
35
- onClick(value);
35
+ if (onClick && option) {
36
+ onClick(option);
37
+ }
38
+ if (onClick && value) {
39
+ onClick(value);
40
+ }
36
41
  };
37
42
  return (react_1.default.createElement(S_ContextMenuItem, { size: size, onClick: handleClick, selected: isSelected },
38
- react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "form2Regular", singleLineMode: "use" })));
43
+ react_1.default.createElement(TextLabel_1.TextLabel, { text: (option === null || option === void 0 ? void 0 : option.text) || text, styleTheme: "form2Regular", singleLineMode: "use" })));
39
44
  }
40
45
  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) {
41
46
  var theme = _a.theme;