pds-dev-kit-web 1.3.2 → 1.3.5

package/dist/src/desktop/components/AdminList/HeaderRow.js

@@ -34,8 +34,10 @@ var TextLabel_1 = require("../TextLabel");
 function HeaderRow(_a) {
     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;
     return (react_1.default.createElement(S_HeaderRow, null,
+        react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }),
         selectionMode === 'check' && (react_1.default.createElement(S_CheckBox, null,
             react_1.default.createElement(Checkbox_1.Checkbox, { name: "all", onChange: onClickSelectAllCheckbox }))),
+        react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_c", spacingType: "width" }),
         react_1.default.createElement(S_FlexColumn, null,
             react_1.default.createElement(TextLabel_1.TextLabel, { text: column2HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" })),
         column3HeaderText && (react_1.default.createElement(S_Column, { columnSize: column3HeaderWidth },
@@ -55,27 +57,21 @@ function HeaderRow(_a) {
         column10HeaderText && (react_1.default.createElement(S_Column, { columnSize: column10HeaderWidth },
             react_1.default.createElement(TextLabel_1.TextLabel, { text: column10HeaderText, colorTheme: "sysTextSecondary", styleTheme: "caption1Regular" }))),
         quickActionBtnType === 'hover' && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_f", spacingType: "width" }),
-        quickActionBtnType === 'fix' && (react_1.default.createElement(S_QuickActionButtonBox, null, Array(quickActionButtonCount)
+        quickActionBtnType === 'fix' && quickActionButtonCount > 0 && (react_1.default.createElement(S_QuickActionButtonBox, null, Array(quickActionButtonCount)
             .fill(0)
             .map(function (el, i) { return (react_1.default.createElement(S_EmptyDiv, { key: "" + el + i })); })))));
 }
 var small = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 56px;\n"], ["\n  width: 56px;\n"])));
 var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 80px;\n"], ["\n  width: 80px;\n"])));
 var large = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 144px;\n"], ["\n  width: 144px;\n"])));
-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) {
+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) {
     var theme = _a.theme;
     return theme.ui_cpnt_list_base_area;
 }, function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_divider;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingC;
-});
-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) {
-    var theme = _a.theme;
-    return theme.spacing.spacingC;
 });
+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"])));
 var S_FlexColumn = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
 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) {
     var theme = _a.theme;

package/dist/src/desktop/components/AdminListHeader/AdminListHeader.d.ts

@@ -1,6 +1,6 @@
 import { TFunctionResult } from 'i18next';
 import React from 'react';
-import { Value } from '../Dropdown/Dropdown';
+import { PDSValueOption } from '../../../common';
 declare type Props = {
     headerBarSize?: 'regular' | 'small';
     headerBarTitleText?: TFunctionResult;
@@ -9,8 +9,8 @@ declare type Props = {
     totalPage?: number;
     contentText?: TFunctionResult;
     filterBar?: React.ReactNode;
-    dropdownTextArray: Value[];
-    onChangeCount?: (count: number) => void;
+    dropdownTextArray?: PDSValueOption[];
+    onChangeCount?: (option: PDSValueOption) => void;
     onClickNextButton?: () => void;
     onClickPrevButton?: () => void;
 };

package/dist/src/desktop/components/AdminListHeader/AdminListHeader.js

@@ -34,16 +34,30 @@ function AdminListHeader(_a) {
     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;
     return (react_1.default.createElement(S_AdminListHeader, null,
         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 }),
+        headerBarTitleText && !contentText && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_e" }),
+        headerBarTitleText && contentText && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b" }),
         contentText && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b" }),
             react_1.default.createElement(S_ContentTextWrapper, null,
-                react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: "sysTextTertiary" })))),
-        filterBar && filterBar));
+                react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: "sysTextTertiary" })),
+            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }))),
+        filterBar && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(S_FilterBarWrapper, null, filterBar),
+            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" })))));
 }
 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"])));
-var S_ContentTextWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), function (_a) {
+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) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+});
+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) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
 });
 exports.default = AdminListHeader;
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/desktop/components/AdminListHeader/HeaderBar.d.ts

@@ -1,14 +1,14 @@
 /// <reference types="react" />
 import { TFunctionResult } from 'i18next';
-import { Value } from '../Dropdown/Dropdown';
+import { PDSValueOption } from '../../../common';
 declare type Props = {
     titleText?: TFunctionResult;
     size?: 'regular' | 'small';
     count?: number;
     currentPage?: number;
     totalPage?: number;
-    dropdownTextArray: Value[];
-    onChangeDropdown?: (count: number) => void;
+    dropdownTextArray: PDSValueOption[];
+    onChangeDropdown?: (option: PDSValueOption) => void;
     onClickIBtn1?: () => void;
     onClickIBtn2?: () => void;
 };

package/dist/src/desktop/components/AdminListHeader/HeaderBar.js

@@ -38,7 +38,7 @@ function HeaderBar(_a) {
     var t = (0, react_i18next_1.useTranslation)('translation').t;
     var handleDropdown = function (option) {
         if (onChangeDropdown) {
-            onChangeDropdown(option.value);
+            onChangeDropdown(option);
         }
     };
     return (react_1.default.createElement(S_HeaderBar, { size: size },

package/dist/src/desktop/components/AdminListItem/AdminListItem.js

@@ -36,6 +36,21 @@ function AdminListItem(_a) {
         control: methods.control,
         name: id.toString()
     });
+    var _5 = (0, react_1.useState)(false), hasScroll = _5[0], setHasScroll = _5[1];
+    var contentRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        if (!contentRef || !contentRef.current)
+            return;
+        var _a = contentRef.current, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
+        var isTextClamped = scrollHeight > clientHeight;
+        console.log(isTextClamped);
+        setHasScroll(isTextClamped);
+    }, []);
+    (0, react_1.useEffect)(function () {
+        if (selectedState === 'maintain') {
+            methods.setValue(id.toString(), true);
+        }
+    }, [selectedState]);
     var handleClick = function (e) {
         e.preventDefault();
         if (selectedState === 'maintain') {
@@ -104,16 +119,6 @@ function AdminListItem(_a) {
                 return 'sysTextSecondary';
         }
     };
-    var _5 = (0, react_1.useState)(false), hasScroll = _5[0], setHasScroll = _5[1];
-    var contentRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(function () {
-        if (!contentRef || !contentRef.current)
-            return;
-        var _a = contentRef.current, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
-        var isTextClamped = scrollHeight > clientHeight;
-        console.log(isTextClamped);
-        setHasScroll(isTextClamped);
-    }, []);
     return (react_1.default.createElement(S_AdminListItem, { rowSize: rowSize, onClick: handleClick, isSelected: isSelected, quickActionBtnType: quickActionBtnType },
         react_1.default.createElement(S_SelectionColumn, { rowSize: rowSize }, selectionMode === 'check' && (react_1.default.createElement(S_Selection, null,
             react_1.default.createElement(Checkbox_1.Checkbox, { name: id.toString(), state: selectedState === 'maintain' ? 'disabled' : 'normal' })))),
@@ -126,20 +131,20 @@ function AdminListItem(_a) {
         column3Text && (react_1.default.createElement(S_Column, { columnSize: column3TextWidth },
             react_1.default.createElement(TextLabel_1.TextLabel, { text: column3Text, styleTheme: column3TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column3TextStyleTheme) }))),
         column4Text && (react_1.default.createElement(S_Column, { columnSize: column4TextWidth },
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: column4Text, styleTheme: "body2Regular", colorTheme: getColumnColorTheme(column4TextStyleTheme) }))),
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: column4Text, styleTheme: column4TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column4TextStyleTheme) }))),
         column5Text && (react_1.default.createElement(S_Column, { columnSize: column5TextWidth },
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: column5Text, styleTheme: "body2Regular", colorTheme: getColumnColorTheme(column5TextStyleTheme) }))),
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: column5Text, styleTheme: column5TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column5TextStyleTheme) }))),
         column6Text && (react_1.default.createElement(S_Column, { columnSize: column6TextWidth },
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: column6Text, styleTheme: "body2Regular", colorTheme: getColumnColorTheme(column6TextStyleTheme) }))),
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: column6Text, styleTheme: column6TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column6TextStyleTheme) }))),
         column7Text && (react_1.default.createElement(S_Column, { columnSize: column7TextWidth },
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: column7Text, styleTheme: "body2Regular", colorTheme: getColumnColorTheme(column7TextStyleTheme) }))),
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: column7Text, styleTheme: column7TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column7TextStyleTheme) }))),
         column8Text && (react_1.default.createElement(S_Column, { columnSize: column8TextWidth },
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: column8Text, styleTheme: "body2Regular", colorTheme: getColumnColorTheme(column8TextStyleTheme) }))),
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: column8Text, styleTheme: column8TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column8TextStyleTheme) }))),
         column9Text && (react_1.default.createElement(S_Column, { columnSize: column9TextWidth },
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: column9Text, styleTheme: "body2Regular", colorTheme: getColumnColorTheme(column9TextStyleTheme) }))),
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: column9Text, styleTheme: column9TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column9TextStyleTheme) }))),
         column10Text && (react_1.default.createElement(S_Column, { columnSize: column10TextWidth },
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: column10Text, styleTheme: "body2Regular", colorTheme: getColumnColorTheme(column10TextStyleTheme) }))),
-        react_1.default.createElement(S_QuickActionButtonBox, { quickActionBtnType: quickActionBtnType }, quickActionBtnMode !== 'none' && react_1.default.createElement(react_1.default.Fragment, null, quickActionButtons())),
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: column10Text, styleTheme: column10TextStyleTheme === 'normal' ? 'body2Regular' : 'body2Bold', colorTheme: getColumnColorTheme(column10TextStyleTheme) }))),
+        quickActionBtnMode !== 'none' && (react_1.default.createElement(S_QuickActionButtonBox, { quickActionBtnType: quickActionBtnType }, quickActionButtons())),
         quickActionBtnType === 'hover' && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_f", spacingType: "width" })));
 }
 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 || (
     var disabled = _a.disabled;
     return (disabled ? 'default' : 'pointer');
 });
-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) {
-    var theme = _a.theme;
-    return theme.spacing.spacingC;
-});
+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"])));
 var S_ImageWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingD;
@@ -223,9 +225,12 @@ var S_SelectionColumn = styled_components_1.default.div(templateObject_22 || (te
 });
 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"])));
 var fixedAdminListItem = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  justify-content: space-between;\n"], ["\n  justify-content: space-between;\n"])));
-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) {
+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) {
     var theme = _a.theme, isSelected = _a.isSelected;
     return isSelected ? theme.ui_cpnt_datatable_base_selected : theme.ui_cpnt_datatable_base_default;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingC;
 }, function (_a) {
     var rowSize = _a.rowSize;
     return rowSize && { high: highRow, medium: mediumRow, low: lowRow }[rowSize];

package/dist/src/desktop/components/Chip/Chip.d.ts

@@ -1,16 +1,20 @@
 /// <reference types="react" />
-import { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
+import { FillIconNameKeys, LineIconNameKeys, PDSTextType, PDSValueOption } from '../../../common';
 declare type DisplayType = 'category_choice' | 'filter_single' | 'filter_multi' | 'removable' | 'label' | 'time' | 'information';
 export declare type ChipProps = {
     displayType?: DisplayType;
-    text?: PDSTextType;
     filterIconMode?: 'none' | 'left';
     iconFillType?: 'line' | 'fill';
     iconName?: FillIconNameKeys | LineIconNameKeys;
-    activeChipId?: string | number;
-    chipId?: string | number;
+    text?: PDSTextType;
+    value?: PDSValueOption['value'];
+    id?: PDSValueOption['value'];
     onClickChip?: () => void;
     onClickXMarkIcon?: () => void;
+    /** @deprecated value 필드를 대신 사용하세요. */
+    activeChipId?: string | number;
+    /** @deprecated id 필드를 대신 사용하세요. */
+    chipId?: string | number;
 };
-export default function Chip({ displayType, text, filterIconMode, iconFillType, iconName, activeChipId, chipId, onClickChip, onClickXMarkIcon }: ChipProps): JSX.Element;
+export default function Chip({ displayType, filterIconMode, iconFillType, iconName, text, value, id, activeChipId, chipId, onClickChip, onClickXMarkIcon }: ChipProps): JSX.Element;
 export {};

package/dist/src/desktop/components/Chip/Chip.js

@@ -3,22 +3,51 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var Icon_1 = require("../../../hybrid/components/Icon");
 var TextLabel_1 = require("../TextLabel");
 function Chip(_a) {
-    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;
-    var handleClick = function () {
+    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;
+    var isActive = (0, react_1.useMemo)(function () {
+        if (activeChipId !== undefined && chipId !== undefined) {
+            return activeChipId === chipId;
+        }
+        if (value !== undefined && id !== undefined) {
+            return value === id;
+        }
+        return false;
+    }, [activeChipId, chipId, value, id]);
+    var handleClickChip = function () {
         if (onClickChip) {
             onClickChip();
         }
     };
-    var handleClickXMarkIcon = function () {
+    var handleClickXMarkIcon = function (e) {
+        e.stopPropagation();
         if (onClickXMarkIcon) {
             onClickXMarkIcon();
         }
@@ -26,39 +55,37 @@ function Chip(_a) {
     var chipType = function () {
         switch (displayType) {
             case 'category_choice':
-                return (react_1.default.createElement(S_CategoryChoiceChip, { isActive: chipId === activeChipId, onClick: handleClick },
-                    chipId !== activeChipId && (react_1.default.createElement(S_CategoryIconWrapper, { isActive: chipId === activeChipId },
+                return (react_1.default.createElement(S_CategoryChoiceChip, { isActive: isActive, onClick: handleClickChip },
+                    !isActive && (react_1.default.createElement(S_CategoryIconWrapper, { isActive: isActive },
                         react_1.default.createElement(Icon_1.Icon, { size: 16, fillType: "line", iconName: "ic_filter", colorKey: "ui_cpnt_chip_line_icon_01" }))),
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: chipId === activeChipId ? 'usrTextBrandOnPrimary' : 'sysTextPrimary' }),
-                    chipId === activeChipId && (react_1.default.createElement(S_CategoryIconWrapper, { isActive: chipId === activeChipId },
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextPrimary' }),
+                    isActive && (react_1.default.createElement(S_CategoryIconWrapper, { isActive: isActive },
                         react_1.default.createElement(Icon_1.Icon, { size: 12, fillType: "line", iconName: "ic_xmark", colorKey: "ui_cpnt_chip_fill_icon_active_01" })))));
             case 'information':
-                return (react_1.default.createElement(S_InfoChip, { onClick: handleClick },
+                return (react_1.default.createElement(S_InfoChip, { onClick: handleClickChip },
                     react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary" })));
             case 'label':
-                return (react_1.default.createElement(S_LabelChip, { onClick: handleClick },
+                return (react_1.default.createElement(S_LabelChip, { onClick: handleClickChip },
                     react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary" })));
             case 'time':
-                return (react_1.default.createElement(S_TimeChip, { onClick: handleClick },
+                return (react_1.default.createElement(S_TimeChip, { onClick: handleClickChip },
                     react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextWhite" })));
             case 'removable':
-                return (react_1.default.createElement(S_RemovableChip, { onClick: handleClick },
+                return (react_1.default.createElement(S_RemovableChip, { onClick: handleClickChip },
                     react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: "sysTextSecondary" }),
                     react_1.default.createElement(S_XIconWrapper, { onClick: handleClickXMarkIcon },
                         react_1.default.createElement(Icon_1.Icon, { size: 12, iconName: "ic_xmark", fillType: "line", colorKey: "ui_cpnt_chip_fill_icon_inactive" }))));
             default:
-                return (react_1.default.createElement(S_FilterSingleChip, { isActive: chipId === activeChipId, onClick: handleClick },
+                return (react_1.default.createElement(S_FilterSingleChip, { isActive: isActive, onClick: handleClickChip },
                     filterIconMode === 'left' && (react_1.default.createElement(S_FilterIconWrapper, null,
-                        react_1.default.createElement(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: chipId === activeChipId
-                                ? 'ui_cpnt_chip_fill_icon_active_01'
-                                : 'ui_cpnt_chip_line_icon_02' }))),
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: chipId === activeChipId ? 'usrTextBrandOnPrimary' : 'sysTextSecondary' })));
+                        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' }))),
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextSecondary' })));
         }
     };
     return react_1.default.createElement(S_ChipWrapper, null, chipType());
 }
 exports.default = Chip;
-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) {
+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) {
     var theme = _a.theme, isActive = _a.isActive;
     return isActive ? theme.ui_cpnt_chip_fill_base_active_01 : '';
 }, function (_a) {

package/dist/src/desktop/components/ContextMenuItem/ContextMenuItem.d.ts

@@ -1,11 +1,14 @@
 /// <reference types="react" />
-import { PDSTextType } from '../../../common';
+import { PDSTextType, PDSValueOption } from '../../../common';
 export declare type ContextMenuItemProps = {
-    text: PDSTextType;
+    option?: PDSValueOption;
     size?: 'large' | 'medium' | 'small';
-    value: string | number | boolean;
     isSelected?: boolean;
-    onClick: (value: string | number | boolean) => void;
+    onClick?: (value: PDSValueOption | string | number | boolean) => void;
+    /** @deprecated option 필드를 대신 사용하세요. */
+    text?: PDSTextType;
+    /** @deprecated option 필드를 대신 사용하세요. */
+    value?: string | number | boolean;
 };
-declare function ContextMenuItem({ text, size, value, isSelected, onClick }: ContextMenuItemProps): JSX.Element;
+declare function ContextMenuItem({ option, size, isSelected, onClick, text, value }: ContextMenuItemProps): JSX.Element;
 export default ContextMenuItem;

package/dist/src/desktop/components/ContextMenuItem/ContextMenuItem.js

@@ -30,12 +30,17 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var TextLabel_1 = require("../TextLabel");
 function ContextMenuItem(_a) {
-    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;
+    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;
     var handleClick = function () {
-        onClick(value);
+        if (onClick && option) {
+            onClick(option);
+        }
+        if (onClick && value) {
+            onClick(value);
+        }
     };
     return (react_1.default.createElement(S_ContextMenuItem, { size: size, onClick: handleClick, selected: isSelected },
-        react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "form2Regular", singleLineMode: "use" })));
+        react_1.default.createElement(TextLabel_1.TextLabel, { text: (option === null || option === void 0 ? void 0 : option.text) || text, styleTheme: "form2Regular", singleLineMode: "use" })));
 }
 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) {
     var theme = _a.theme;

package/dist/src/desktop/components/Dropdown/Dropdown.d.ts

@@ -1,18 +1,15 @@
 /// <reference types="react" />
 import { TFunctionResult } from 'i18next';
-export declare type Value = {
-    text: TFunctionResult;
-    value: string | number | boolean;
-};
+import { PDSValueOption } from '../../../common';
 declare type Props = {
     size?: 'large' | 'small';
     hintText?: TFunctionResult;
-    defaultValue?: Value;
-    valueArray: Value[];
+    defaultValue?: PDSValueOption;
+    valueArray: PDSValueOption[];
     selectMode?: 'one' | 'multi';
     state?: 'normal' | 'read_only' | 'disabled';
     colorTheme?: 'none' | 'dark';
-    onChange?: (value: Value) => void;
+    onChange?: (option: PDSValueOption) => void;
 };
 declare function Dropdown({ size, hintText, defaultValue, valueArray, selectMode, state, colorTheme, onChange }: Props): JSX.Element;
 export default Dropdown;

package/dist/src/desktop/components/Dropdown/Dropdown.js

@@ -34,6 +34,11 @@ function Dropdown(_a) {
     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;
     var _f = (0, react_1.useState)(false), isFocused = _f[0], setIsFocused = _f[1];
     var _g = (0, react_1.useState)(defaultValue), selectedOption = _g[0], setSelectedOption = _g[1];
+    (0, react_1.useEffect)(function () {
+        if (defaultValue) {
+            setSelectedOption(defaultValue);
+        }
+    }, [defaultValue]);
     var handleClick = function () {
         if (state === 'disabled' || state === 'read_only') {
             return;
@@ -45,11 +50,11 @@ function Dropdown(_a) {
             setIsFocused(false);
         }
     };
-    var handleClickOption = function (value) {
-        setSelectedOption(value);
+    var handleClickOption = function (option) {
+        setSelectedOption(option);
         setIsFocused(false);
         if (onChange) {
-            onChange(value);
+            onChange(option);
         }
     };
     var getIconColorKey = function () {
@@ -99,7 +104,7 @@ function Dropdown(_a) {
             react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getIconColorKey() }),
             react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" })),
         isFocused && (react_1.default.createElement(S_ContextMenuWrapper, null,
-            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); } })); }))))));
+            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 })); }))))));
 }
 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) {
     var theme = _a.theme;

package/dist/src/desktop/components/FilterBar/FilterBar.d.ts

@@ -1,16 +1,14 @@
 /// <reference types="react" />
-import { PDSTextType } from '../../../common';
-declare type ChipProps = {
-    text: string;
-    path: string;
-};
+import { Path } from 'react-hook-form';
+import { IFormValues, PDSTextType, PDSValueOption } from '../../../common';
 export declare type FilterBarProps = {
     displayType: 'chips' | 'searchfield' | 'filterchips_searchfield';
-    textArray: ChipProps[];
+    textArray: PDSValueOption[];
     hintText?: PDSTextType;
+    value?: PDSValueOption;
+    name?: Path<IFormValues>;
+    onClickChip?: (option: PDSValueOption) => void;
+    /** @deprecated value 필드를 대신 사용하세요. */
     activeChipId?: string | number;
-    name?: string;
-    onClickChip?: (activeChipId: string | number) => void;
 };
-export default function FilterBar({ displayType, textArray, hintText, activeChipId, name, onClickChip }: FilterBarProps): JSX.Element;
-export {};
+export default function FilterBar({ displayType, textArray, hintText, value, name, onClickChip, activeChipId }: FilterBarProps): JSX.Element;

package/dist/src/desktop/components/FilterBar/FilterBar.js

@@ -12,16 +12,14 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var Chip_1 = require("../Chip");
 var TextField_1 = require("../TextField");
 function FilterBar(_a) {
-    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;
-    var handleOnClick = function (value) {
-        if (onClickChip) {
-            onClickChip(value);
-        }
-    };
+    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;
     var renderingChip = function () {
         if (displayType === 'chips' || displayType === 'filterchips_searchfield') {
-            return textArray.map(function (value) { return (react_1.default.createElement(S_ChipWrapper, { key: value.text },
-                react_1.default.createElement(Chip_1.Chip, { text: value.text, displayType: "filter_single", activeChipId: activeChipId, chipId: value.text, onClickChip: function () { return handleOnClick(value.text); } }))); });
+            return textArray.map(function (option) {
+                var _a;
+                return (react_1.default.createElement(S_ChipWrapper, { key: option.value },
+                    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() })));
+            });
         }
     };
     var renderingTextField = function () {
@@ -34,13 +32,7 @@ function FilterBar(_a) {
         renderingTextField()));
 }
 exports.default = FilterBar;
-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) {
-    var theme = _a.theme;
-    return theme.spacing.spacingD;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingE;
-});
+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"])));
 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) {
     var theme = _a.theme;
     return theme.spacing.spacingE;

package/dist/src/desktop/components/TextLabel/TextLabel.js

@@ -259,7 +259,7 @@ var ellipsisStyle = (0, styled_components_1.css)(templateObject_30 || (templateO
     return lineLimit;
 });
 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"])));
-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) {
+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) {
     var textAlign = _a.textAlign;
     return textAlign;
 }, function (_a) {

package/dist/src/desktop/components/UserDesktopNavBar/UserDesktopNavBar.d.ts

@@ -1,15 +1,10 @@
 /// <reference types="react" />
-import { PDSTextType } from '../../../common';
-declare type TextObj = {
-    path: string;
-    title: PDSTextType;
-    code: string;
-};
+import { PDSTextType, PDSValueOption } from '../../../common';
 declare type Props = {
     logoImageSrc?: string;
     titleText?: PDSTextType;
     menuMode: 'center_text' | 'none';
-    textArray?: TextObj[];
+    textArray?: PDSValueOption[];
     userImageSrc?: string;
     loginInfoMode?: 'none' | 'profile' | 'button';
     mBtnText?: PDSTextType;

package/dist/src/desktop/components/UserDesktopNavBar/UserDesktopNavBar.js

@@ -57,8 +57,8 @@ function UserDesktopNavBar(_a) {
         var hiddenTexts = array.slice(MAX_VISIBLE_TEXTS_NUM);
         return hiddenTexts;
     }
-    var handleClick = function (path) {
-        history.push(path);
+    var handleClick = function (option) {
+        history.push(option.value);
     };
     var handleClickLogo = function () {
         if (onClickLogo) {
@@ -75,11 +75,11 @@ function UserDesktopNavBar(_a) {
             logoImageSrc ? (react_1.default.createElement(S_Logo, { src: logoImageSrc, onClick: handleClickLogo })) : (react_1.default.createElement(S_TextWrapper, { onClick: handleClickLogo },
                 react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, singleLineMode: "use", styleTheme: "headingBold", colorTheme: "sysTextPrimary", ellipsisMode: "use", lineLimit: 1 }))),
             menuMode === 'center_text' && (react_1.default.createElement(S_pApps, null,
-                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" })))); }),
+                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" })))); }),
                 hiddenTexts.length > 0 && (react_1.default.createElement(S_MorePApps, null,
                     react_1.default.createElement(S_IconButtonWrapper, { onClick: function () { return setIsContextMenuOpen(!isContextMenuOpen); } },
                         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" })),
-                    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 })); })))))))),
+                    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 })); })))))))),
             react_1.default.createElement(S_ProfileWrapper, null,
                 loginInfoMode === 'profile' && (react_1.default.createElement(S_ImageViewWrapper, { onClick: handleClickLoginInfo },
                     react_1.default.createElement(hybrid_1.ImageView, { src: userImageSrc, shapeType: "circular", width: 32, ratio: "1_1", scaleType: "cover", borderMode: "use" }))),