pds-dev-kit-web 1.3.2 → 1.3.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/dist/src/common/assets/icons/line/MinusCircle.d.ts +4 -0
  2. package/dist/src/common/assets/icons/line/MinusCircle.js +36 -0
  3. package/dist/src/common/assets/icons/line/PappType.d.ts +4 -0
  4. package/dist/src/common/assets/icons/line/PappType.js +37 -0
  5. package/dist/src/common/assets/icons/line/index.d.ts +2 -0
  6. package/dist/src/common/assets/icons/line/index.js +4 -0
  7. package/dist/src/common/index.d.ts +2 -2
  8. package/dist/src/common/styles/colorSet/PaletteColor_Dark.json +2 -1
  9. package/dist/src/common/styles/colorSet/PaletteColor_light.json +2 -1
  10. package/dist/src/common/styles/colorSet/UIColor.json +2 -1
  11. package/dist/src/common/styles/colorSet/index.d.ts +60 -57
  12. package/dist/src/common/styles/colorSet/index.js +3 -3
  13. package/dist/src/common/styles/colorSet/ui-type.d.ts +1 -0
  14. package/dist/src/common/types/comopnents.d.ts +5 -0
  15. package/dist/src/common/types/comopnents.js +2 -0
  16. package/dist/src/common/types/index.d.ts +1 -0
  17. package/dist/src/common/types/index.js +1 -0
  18. package/dist/src/desktop/components/AdminList/AdminList.d.ts +12 -12
  19. package/dist/src/desktop/components/AdminList/AdminList.js +14 -57
  20. package/dist/src/desktop/components/AdminList/BulkActionBar.d.ts +10 -10
  21. package/dist/src/desktop/components/AdminList/BulkActionBar.js +6 -6
  22. package/dist/src/desktop/components/AdminList/HeaderRow.js +5 -9
  23. package/dist/src/desktop/components/AdminListHeader/AdminListHeader.d.ts +3 -3
  24. package/dist/src/desktop/components/AdminListHeader/AdminListHeader.js +19 -5
  25. package/dist/src/desktop/components/AdminListHeader/HeaderBar.d.ts +3 -3
  26. package/dist/src/desktop/components/AdminListHeader/HeaderBar.js +1 -1
  27. package/dist/src/desktop/components/AdminListItem/AdminListItem.js +28 -23
  28. package/dist/src/desktop/components/Chip/Chip.d.ts +9 -5
  29. package/dist/src/desktop/components/Chip/Chip.js +45 -18
  30. package/dist/src/desktop/components/ContextMenuItem/ContextMenuItem.d.ts +8 -5
  31. package/dist/src/desktop/components/ContextMenuItem/ContextMenuItem.js +8 -3
  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/FilterBar/FilterBar.d.ts +8 -10
  35. package/dist/src/desktop/components/FilterBar/FilterBar.js +7 -15
  36. package/dist/src/desktop/components/TextLabel/TextLabel.js +1 -1
  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/dist/src/mobile/components/TextLabel/TextLabel.js +1 -1
  46. package/package.json +1 -1
  47. package/release-note.md +47 -3
@@ -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, onClickChip, onClickXMarkIcon, activeChipId, chipId }: ChipProps): JSX.Element;
16
20
  export {};
@@ -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
- var hybrid_1 = require("../../../hybrid");
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, onClickChip = _a.onClickChip, onClickXMarkIcon = _a.onClickXMarkIcon, activeChipId = _a.activeChipId, chipId = _a.chipId;
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 },
31
- react_1.default.createElement(hybrid_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 },
34
- react_1.default.createElement(hybrid_1.Icon, { size: 12, fillType: "line", iconName: "ic_xmark", colorKey: "ui_cpnt_chip_fill_icon_active_01" })))));
58
+ return (react_1.default.createElement(S_CategoryChoiceChip, { isActive: isActive, onClick: handleClickChip },
59
+ id !== value && (react_1.default.createElement(S_CategoryIconWrapper, { isActive: isActive },
60
+ react_1.default.createElement(Icon_1.Icon, { size: 16, fillType: "line", iconName: "ic_filter", colorKey: "ui_cpnt_chip_line_icon_01" }))),
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 },
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
- react_1.default.createElement(hybrid_1.Icon, { size: 12, iconName: "ic_xmark", fillType: "line", colorKey: "ui_cpnt_chip_fill_icon_inactive" }))));
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(hybrid_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 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 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 ", ";\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 ", ";\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) {
@@ -67,9 +94,6 @@ var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (
67
94
  }, function (_a) {
68
95
  var theme = _a.theme;
69
96
  return theme.spacing.spacingC;
70
- }, function (_a) {
71
- var theme = _a.theme, isActive = _a.isActive;
72
- return isActive ? '' : theme.ui_cpnt_chip_fill_base_inactive;
73
97
  }, function (_a) {
74
98
  var theme = _a.theme, isActive = _a.isActive;
75
99
  return isActive ? '' : "border: 1px solid " + theme.ui_cpnt_chip_line_border_01;
@@ -90,7 +114,7 @@ var S_InfoChip = styled_components_1.default.span(templateObject_3 || (templateO
90
114
  var theme = _a.theme;
91
115
  return theme.spacing.spacingC;
92
116
  });
93
- var S_RemovableChip = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 16px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n cursor: pointer;\n"], ["\n background-color: ", ";\n border-radius: 16px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n cursor: pointer;\n"])), function (_a) {
117
+ var S_RemovableChip = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 16px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n background-color: ", ";\n border-radius: 16px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
94
118
  var theme = _a.theme;
95
119
  return theme.ui_cpnt_chip_fill_base_inactive;
96
120
  }, function (_a) {
@@ -100,11 +124,11 @@ var S_RemovableChip = styled_components_1.default.div(templateObject_4 || (templ
100
124
  var theme = _a.theme;
101
125
  return theme.spacing.spacingC;
102
126
  });
103
- var S_XIconWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n cursor: pointer;\n margin-left: ", ";\n"], ["\n cursor: pointer;\n margin-left: ", ";\n"])), function (_a) {
127
+ var S_XIconWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin-left: ", ";\n"], ["\n margin-left: ", ";\n"])), function (_a) {
104
128
  var theme = _a.theme;
105
129
  return theme.spacing.spacingB;
106
130
  });
107
- var S_FilterSingleChip = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n border-radius: 16px;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n cursor: pointer;\n"], ["\n border-radius: 16px;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n cursor: pointer;\n"])), function (_a) {
131
+ var S_FilterSingleChip = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n border-radius: 16px;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n border-radius: 16px;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
108
132
  var theme = _a.theme, isActive = _a.isActive;
109
133
  return isActive ? theme.ui_cpnt_chip_fill_base_active_01 : theme.ui_cpnt_chip_fill_base_inactive;
110
134
  }, function (_a) {
@@ -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;
@@ -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;
@@ -1,17 +1,15 @@
1
1
  /// <reference types="react" />
2
- declare type Value = {
3
- text: string;
4
- value: string | number | boolean;
5
- };
2
+ import { TFunctionResult } from 'i18next';
3
+ import { PDSValueOption } from '../../../common';
6
4
  declare type Props = {
7
5
  size?: 'large' | 'small';
8
- hintText?: string;
9
- defaultValue?: Value;
10
- valueArray: Value[];
6
+ hintText?: TFunctionResult;
7
+ defaultValue?: PDSValueOption;
8
+ valueArray: PDSValueOption[];
11
9
  selectMode?: 'one' | 'multi';
12
10
  state?: 'normal' | 'read_only' | 'disabled';
13
11
  colorTheme?: 'none' | 'dark';
14
- onChange?: (value: Value) => void;
12
+ onChange?: (option: PDSValueOption) => void;
15
13
  };
16
14
  declare function Dropdown({ size, hintText, defaultValue, valueArray, selectMode, state, colorTheme, onChange }: Props): JSX.Element;
17
15
  export default Dropdown;
@@ -34,6 +34,11 @@ function Dropdown(_a) {
34
34
  var _b = _a.size, size = _b === void 0 ? 'large' : _b, hintText = _a.hintText, defaultValue = _a.defaultValue, valueArray = _a.valueArray, _c = _a.selectMode, selectMode = _c === void 0 ? 'one' : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'none' : _e, onChange = _a.onChange;
35
35
  var _f = (0, react_1.useState)(false), isFocused = _f[0], setIsFocused = _f[1];
36
36
  var _g = (0, react_1.useState)(defaultValue), selectedOption = _g[0], setSelectedOption = _g[1];
37
+ (0, react_1.useEffect)(function () {
38
+ if (defaultValue) {
39
+ setSelectedOption(defaultValue);
40
+ }
41
+ }, [defaultValue]);
37
42
  var handleClick = function () {
38
43
  if (state === 'disabled' || state === 'read_only') {
39
44
  return;
@@ -45,11 +50,11 @@ function Dropdown(_a) {
45
50
  setIsFocused(false);
46
51
  }
47
52
  };
48
- var handleClickOption = function (value) {
49
- setSelectedOption(value);
53
+ var handleClickOption = function (option) {
54
+ setSelectedOption(option);
50
55
  setIsFocused(false);
51
56
  if (onChange) {
52
- onChange(value);
57
+ onChange(option);
53
58
  }
54
59
  };
55
60
  var getIconColorKey = function () {
@@ -99,7 +104,7 @@ function Dropdown(_a) {
99
104
  react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getIconColorKey() }),
100
105
  react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" })),
101
106
  isFocused && (react_1.default.createElement(S_ContextMenuWrapper, null,
102
- react_1.default.createElement(ContextMenu_1.ContextMenu, { autoWidthMode: "use" }, valueArray.map(function (el) { return (react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { key: el.value, size: size, text: el.text, value: el.value, isSelected: el.value === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value), onClick: function () { return handleClickOption(el); } })); }))))));
107
+ react_1.default.createElement(ContextMenu_1.ContextMenu, { autoWidthMode: "use" }, valueArray.map(function (el) { return (react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { key: el.value, option: el, size: size, isSelected: el.value === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value), onClick: handleClickOption })); }))))));
103
108
  }
104
109
  var S_TextLabel = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n flex: 1;\n padding-left: ", ";\n padding-right: ", ";\n"], ["\n flex: 1;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_a) {
105
110
  var theme = _a.theme;
@@ -259,7 +259,7 @@ var ellipsisStyle = (0, styled_components_1.css)(templateObject_30 || (templateO
259
259
  return lineLimit;
260
260
  });
261
261
  var userSelectModeStyle = (0, styled_components_1.css)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n -ms-user-select: none;\n -moz-user-select: -moz-none;\n -khtml-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n"], ["\n -ms-user-select: none;\n -moz-user-select: -moz-none;\n -khtml-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n"])));
262
- var S_TextLabel = styled_components_1.default.div(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n box-sizing: border-box;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: break-word;\n overflow-wrap: break-word;\n hyphens: auto;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n box-sizing: border-box;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: break-word;\n overflow-wrap: break-word;\n hyphens: auto;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
262
+ var S_TextLabel = styled_components_1.default.div(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n box-sizing: border-box;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: keep-all;\n overflow-wrap: break-word;\n hyphens: auto;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n box-sizing: border-box;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: keep-all;\n overflow-wrap: break-word;\n hyphens: auto;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
263
263
  var textAlign = _a.textAlign;
264
264
  return textAlign;
265
265
  }, function (_a) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "1.3.2",
3
+ "version": "1.3.5",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,6 +1,50 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v1.3.2]
2
+ ## [v1.3.5]
3
3
 
4
4
  ### Component
5
- * DesktopBasicModal
6
- * mBtn1State 값이 필수였던 것 필수가 아니게 변경
5
+ * PDSValueOption타입 추가 (텍스트와 id와 같은 고유값이 있는 형태의 컴포넌트는 모두 PDSValueOption 타입을 사용해 통일감있게 PDS 컴포넌트를 생성할 예정)(해당 타입은 ‘pds-dev-kit-web’에서 임포트 해서 사용할 수 있습니다.)
6
+ * AdminList
7
+ * BulkActionBar의 MainButton과 Dropdown에 colotTheme 적용
8
+ * HeaderRowHideMode 프롭 명칭을 HeaderRowMode로 변경 (default는 ‘use')
9
+ * selectionMode가 ‘none’일 시 왼쪽 여백이 너무 작은 이슈 수정
10
+ * BulkActionBar의 MainButton과 Dropdown 액션 이후에 AdminList의 상태를 초기화 하는 로직을 삭제 (-> 각 개발자가 각 상황에 알맞게 사용하는게 더 낫다고 판단)
11
+ * selectedIds, onSelect 프롭을 받지 않을 시 useEffect에서 발생하던 에러 픽스
12
+ * AdminListHeader
13
+ * TitleText, DescText, FilterBar, BulkActionBar 사이의 여백 조정
14
+ * AdminListItem
15
+ * column5Text 부터 TextStyle이 반영되지 않던 이슈 수정
16
+ * quickActionBtnMode가 ‘none’일 때 버튼 영역이 보이지 않도록 수정
17
+ * selectState가 ‘maintain’일 때 체크박스가 선택되어진 상태에서 유지되도록 변경
18
+ * selectionMode가 ‘none’일 시 왼쪽 여백이 너무 작은 이슈 수정
19
+ * Chip
20
+ * prop추가
21
+ * option
22
+ * prop deprecated표시 (1.5에서 삭제 예정)
23
+ * activeChipId
24
+ * chipId
25
+ * ContextMenuItem
26
+ * prop추가
27
+ * value
28
+ * id
29
+ * prop deprecated표시 (1.5에서 삭제 예정)
30
+ * text
31
+ * value
32
+ * prop type 변경
33
+ * onClick이 value로 PDSValueOption도 받을 수 있음
34
+ * Dropdown
35
+ * prop type 변경
36
+ * defaultValue
37
+ * valueArray
38
+ * onChange
39
+ * FilterBar
40
+ * prop추가
41
+ * value
42
+ * prop deprecated표시 (1.5에서 삭제 예정)
43
+ * activeChipId
44
+ * prop type 변경
45
+ * textArray
46
+ * name
47
+ * onClickChip
48
+ * UserDesktopNavBar
49
+ * prop type 변경
50
+ * textArray