pds-dev-kit-web 1.3.4 → 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 (33) hide show
  1. package/dist/src/common/index.d.ts +2 -2
  2. package/dist/src/common/types/comopnents.d.ts +5 -0
  3. package/dist/src/common/types/comopnents.js +2 -0
  4. package/dist/src/common/types/index.d.ts +1 -0
  5. package/dist/src/common/types/index.js +1 -0
  6. package/dist/src/desktop/components/AdminList/AdminList.d.ts +12 -12
  7. package/dist/src/desktop/components/AdminList/AdminList.js +14 -57
  8. package/dist/src/desktop/components/AdminList/BulkActionBar.d.ts +10 -10
  9. package/dist/src/desktop/components/AdminList/BulkActionBar.js +6 -6
  10. package/dist/src/desktop/components/AdminList/HeaderRow.js +5 -9
  11. package/dist/src/desktop/components/AdminListHeader/AdminListHeader.d.ts +3 -3
  12. package/dist/src/desktop/components/AdminListHeader/AdminListHeader.js +19 -5
  13. package/dist/src/desktop/components/AdminListHeader/HeaderBar.d.ts +3 -3
  14. package/dist/src/desktop/components/AdminListHeader/HeaderBar.js +1 -1
  15. package/dist/src/desktop/components/AdminListItem/AdminListItem.js +28 -23
  16. package/dist/src/desktop/components/Chip/Chip.d.ts +9 -5
  17. package/dist/src/desktop/components/Chip/Chip.js +45 -18
  18. package/dist/src/desktop/components/ContextMenuItem/ContextMenuItem.d.ts +8 -5
  19. package/dist/src/desktop/components/ContextMenuItem/ContextMenuItem.js +8 -3
  20. package/dist/src/desktop/components/Dropdown/Dropdown.d.ts +4 -7
  21. package/dist/src/desktop/components/Dropdown/Dropdown.js +9 -4
  22. package/dist/src/desktop/components/FilterBar/FilterBar.d.ts +8 -10
  23. package/dist/src/desktop/components/FilterBar/FilterBar.js +7 -15
  24. package/dist/src/desktop/components/UserDesktopNavBar/UserDesktopNavBar.d.ts +2 -7
  25. package/dist/src/desktop/components/UserDesktopNavBar/UserDesktopNavBar.js +4 -4
  26. package/dist/src/mobile/components/Chip/Chip.d.ts +9 -5
  27. package/dist/src/mobile/components/Chip/Chip.js +52 -28
  28. package/dist/src/mobile/components/ContextMenuItem/ContextMenuItem.d.ts +8 -5
  29. package/dist/src/mobile/components/ContextMenuItem/ContextMenuItem.js +8 -3
  30. package/dist/src/mobile/components/Dropdown/Dropdown.d.ts +6 -8
  31. package/dist/src/mobile/components/Dropdown/Dropdown.js +9 -4
  32. package/package.json +1 -1
  33. package/release-note.md +48 -3
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;
package/dist/src/desktop/components/Dropdown/Dropdown.d.ts CHANGED
@@ -1,18 +1,15 @@
1
1
  /// <reference types="react" />
2
2
  import { TFunctionResult } from 'i18next';
3
- export declare type Value = {
4
- text: TFunctionResult;
5
- value: string | number | boolean;
6
- };
3
+ import { PDSValueOption } from '../../../common';
7
4
  declare type Props = {
8
5
  size?: 'large' | 'small';
9
6
  hintText?: TFunctionResult;
10
- defaultValue?: Value;
11
- valueArray: Value[];
7
+ defaultValue?: PDSValueOption;
8
+ valueArray: PDSValueOption[];
12
9
  selectMode?: 'one' | 'multi';
13
10
  state?: 'normal' | 'read_only' | 'disabled';
14
11
  colorTheme?: 'none' | 'dark';
15
- onChange?: (value: Value) => void;
12
+ onChange?: (option: PDSValueOption) => void;
16
13
  };
17
14
  declare function Dropdown({ size, hintText, defaultValue, valueArray, selectMode, state, colorTheme, onChange }: Props): JSX.Element;
18
15
  export default Dropdown;
package/dist/src/desktop/components/Dropdown/Dropdown.js CHANGED
@@ -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;
package/dist/src/desktop/components/FilterBar/FilterBar.d.ts CHANGED
@@ -1,16 +1,14 @@
1
1
  /// <reference types="react" />
2
- import { PDSTextType } from '../../../common';
3
- declare type ChipProps = {
4
- text: string;
5
- path: string;
6
- };
2
+ import { Path } from 'react-hook-form';
3
+ import { IFormValues, PDSTextType, PDSValueOption } from '../../../common';
7
4
  export declare type FilterBarProps = {
8
5
  displayType: 'chips' | 'searchfield' | 'filterchips_searchfield';
9
- textArray: ChipProps[];
6
+ textArray: PDSValueOption[];
10
7
  hintText?: PDSTextType;
8
+ value?: PDSValueOption;
9
+ name?: Path<IFormValues>;
10
+ onClickChip?: (option: PDSValueOption) => void;
11
+ /** @deprecated value 필드를 대신 사용하세요. */
11
12
  activeChipId?: string | number;
12
- name?: string;
13
- onClickChip?: (activeChipId: string | number) => void;
14
13
  };
15
- export default function FilterBar({ displayType, textArray, hintText, activeChipId, name, onClickChip }: FilterBarProps): JSX.Element;
16
- export {};
14
+ export default function FilterBar({ displayType, textArray, hintText, value, name, onClickChip, activeChipId }: FilterBarProps): JSX.Element;
package/dist/src/desktop/components/FilterBar/FilterBar.js CHANGED
@@ -12,16 +12,14 @@ var styled_components_1 = __importDefault(require("styled-components"));
12
12
  var Chip_1 = require("../Chip");
13
13
  var TextField_1 = require("../TextField");
14
14
  function FilterBar(_a) {
15
- var _b = _a.displayType, displayType = _b === void 0 ? 'chips' : _b, textArray = _a.textArray, hintText = _a.hintText, activeChipId = _a.activeChipId, name = _a.name, onClickChip = _a.onClickChip;
16
- var handleOnClick = function (value) {
17
- if (onClickChip) {
18
- onClickChip(value);
19
- }
20
- };
15
+ var _b = _a.displayType, displayType = _b === void 0 ? 'chips' : _b, textArray = _a.textArray, hintText = _a.hintText, value = _a.value, name = _a.name, onClickChip = _a.onClickChip, activeChipId = _a.activeChipId;
21
16
  var renderingChip = function () {
22
17
  if (displayType === 'chips' || displayType === 'filterchips_searchfield') {
23
- return textArray.map(function (value) { return (react_1.default.createElement(S_ChipWrapper, { key: value.text },
24
- react_1.default.createElement(Chip_1.Chip, { text: value.text, displayType: "filter_single", activeChipId: activeChipId, chipId: value.text, onClickChip: function () { return handleOnClick(value.text); } }))); });
18
+ return textArray.map(function (option) {
19
+ var _a;
20
+ return (react_1.default.createElement(S_ChipWrapper, { key: option.value },
21
+ react_1.default.createElement(Chip_1.Chip, { displayType: "filter_single", text: option.text, value: (value === null || value === void 0 ? void 0 : value.value) || undefined, id: option.value, onClickChip: function () { return onClickChip && onClickChip(option); }, activeChipId: activeChipId, chipId: (_a = option.value) === null || _a === void 0 ? void 0 : _a.toString() })));
22
+ });
25
23
  }
26
24
  };
27
25
  var renderingTextField = function () {
@@ -34,13 +32,7 @@ function FilterBar(_a) {
34
32
  renderingTextField()));
35
33
  }
36
34
  exports.default = FilterBar;
37
- var S_FilterBarBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: ", " ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: ", " ", ";\n"])), function (_a) {
38
- var theme = _a.theme;
39
- return theme.spacing.spacingD;
40
- }, function (_a) {
41
- var theme = _a.theme;
42
- return theme.spacing.spacingE;
43
- });
35
+ var S_FilterBarBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
44
36
  var S_ChipBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n margin-right: ", ";\n"], ["\n display: flex;\n flex-wrap: wrap;\n margin-right: ", ";\n"])), function (_a) {
45
37
  var theme = _a.theme;
46
38
  return theme.spacing.spacingE;
package/dist/src/desktop/components/UserDesktopNavBar/UserDesktopNavBar.d.ts CHANGED
@@ -1,15 +1,10 @@
1
1
  /// <reference types="react" />
2
- import { PDSTextType } from '../../../common';
3
- declare type TextObj = {
4
- path: string;
5
- title: PDSTextType;
6
- code: string;
7
- };
2
+ import { PDSTextType, PDSValueOption } from '../../../common';
8
3
  declare type Props = {
9
4
  logoImageSrc?: string;
10
5
  titleText?: PDSTextType;
11
6
  menuMode: 'center_text' | 'none';
12
- textArray?: TextObj[];
7
+ textArray?: PDSValueOption[];
13
8
  userImageSrc?: string;
14
9
  loginInfoMode?: 'none' | 'profile' | 'button';
15
10
  mBtnText?: PDSTextType;
package/dist/src/desktop/components/UserDesktopNavBar/UserDesktopNavBar.js CHANGED
@@ -57,8 +57,8 @@ function UserDesktopNavBar(_a) {
57
57
  var hiddenTexts = array.slice(MAX_VISIBLE_TEXTS_NUM);
58
58
  return hiddenTexts;
59
59
  }
60
- var handleClick = function (path) {
61
- history.push(path);
60
+ var handleClick = function (option) {
61
+ history.push(option.value);
62
62
  };
63
63
  var handleClickLogo = function () {
64
64
  if (onClickLogo) {
@@ -75,11 +75,11 @@ function UserDesktopNavBar(_a) {
75
75
  logoImageSrc ? (react_1.default.createElement(S_Logo, { src: logoImageSrc, onClick: handleClickLogo })) : (react_1.default.createElement(S_TextWrapper, { onClick: handleClickLogo },
76
76
  react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, singleLineMode: "use", styleTheme: "headingBold", colorTheme: "sysTextPrimary", ellipsisMode: "use", lineLimit: 1 }))),
77
77
  menuMode === 'center_text' && (react_1.default.createElement(S_pApps, null,
78
- visibleTexts.map(function (value) { return (react_1.default.createElement(S_VisiblePAppWrapper, { key: value.path, onClick: function () { return handleClick(value.path); } }, currentPathName.includes(value.path) ? (react_1.default.createElement(TextLabel_1.TextLabel, { text: value.title, styleTheme: "body1Bold", colorTheme: "sysTextPrimary", singleLineMode: "use" })) : (react_1.default.createElement(TextLabel_1.TextLabel, { text: value.title, styleTheme: "body1Regular", colorTheme: "sysTextSecondary", singleLineMode: "use" })))); }),
78
+ visibleTexts.map(function (option) { return (react_1.default.createElement(S_VisiblePAppWrapper, { key: option.value, onClick: function () { return handleClick(option); } }, currentPathName.includes(option.value) ? (react_1.default.createElement(TextLabel_1.TextLabel, { text: option.text, styleTheme: "body1Bold", colorTheme: "sysTextPrimary", singleLineMode: "use" })) : (react_1.default.createElement(TextLabel_1.TextLabel, { text: option.text, styleTheme: "body1Regular", colorTheme: "sysTextSecondary", singleLineMode: "use" })))); }),
79
79
  hiddenTexts.length > 0 && (react_1.default.createElement(S_MorePApps, null,
80
80
  react_1.default.createElement(S_IconButtonWrapper, { onClick: function () { return setIsContextMenuOpen(!isContextMenuOpen); } },
81
81
  react_1.default.createElement(IconButton_1.IconButton, { fillType: "fill", baseSize: "medium", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: 24, iconName: "ic_more", iconColorKey: "ui_cpnt_button_icon_default", shapeType: "rectangle", iconFillType: "fill" })),
82
- react_1.default.createElement(S_ContextMenuWrapper, null, isContextMenuOpen && (react_1.default.createElement(ContextMenu_1.ContextMenu, null, hiddenTexts.map(function (pApp) { return (react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { key: pApp.path, size: "medium", value: pApp.path, text: pApp.title, onClick: handleClick })); })))))))),
82
+ react_1.default.createElement(S_ContextMenuWrapper, null, isContextMenuOpen && (react_1.default.createElement(ContextMenu_1.ContextMenu, null, hiddenTexts.map(function (option) { return (react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { key: option.value, size: "medium", option: option, onClick: handleClick })); })))))))),
83
83
  react_1.default.createElement(S_ProfileWrapper, null,
84
84
  loginInfoMode === 'profile' && (react_1.default.createElement(S_ImageViewWrapper, { onClick: handleClickLoginInfo },
85
85
  react_1.default.createElement(hybrid_1.ImageView, { src: userImageSrc, shapeType: "circular", width: 32, ratio: "1_1", scaleType: "cover", borderMode: "use" }))),
package/dist/src/mobile/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, onClickChip, onClickXMarkIcon, activeChipId, chipId }: ChipProps): JSX.Element;
16
20
  export {};
package/dist/src/mobile/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
- 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) {
package/dist/src/mobile/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/mobile/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;
package/dist/src/mobile/components/Dropdown/Dropdown.d.ts CHANGED
@@ -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;