pds-dev-kit-web-test 0.0.5 → 0.0.6

package/dist/src/common/assets/icons/line/Clip.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import IconType from '../IconType';
+declare const Clip: ({ color, size, ...rest }: IconType) => JSX.Element;
+export default Clip;

package/dist/src/common/assets/icons/line/Clip.js

@@ -0,0 +1,36 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 Clip = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
+        react_1.default.createElement("g", { fill: "none", fillRule: "evenodd", strokeLinecap: "round" },
+            react_1.default.createElement("path", { stroke: color, strokeWidth: "1.5", d: "M2.8315,19.8563 C1.4605,18.3773 1.7185,16.2083 3.6035,14.4263 L13.6075,4.4233 C15.5355,2.4953 18.6605,2.4953 20.5885,4.4233 L20.5885,4.4233 C22.5155,6.3513 22.5155,9.4763 20.5885,11.4043 L12.4975,19.4943" }),
+            react_1.default.createElement("path", { stroke: color, strokeWidth: "1.5", d: "M7.3606,14.7929 L12.6506,9.5029 C13.4406,8.7129 14.7196,8.7129 15.5086,9.5029 L15.5086,9.5029 C16.2986,10.2919 16.2986,11.5709 15.5086,12.3599 L8.3606,19.5079 C5.9176,21.9519 3.8866,20.9579 2.8316,19.8559" }))));
+};
+exports.default = Clip;

package/dist/src/common/assets/icons/line/Internal.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import IconType from '../IconType';
+declare const Internal: ({ color, size, ...rest }: IconType) => JSX.Element;
+export default Internal;

package/dist/src/common/assets/icons/line/Internal.js

@@ -0,0 +1,36 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 Internal = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
+        react_1.default.createElement("g", { fill: "none", fillRule: "evenodd" },
+            react_1.default.createElement("path", { fill: color, d: "M14.7582,12.7939 L10.8292,16.2299 C10.3482,16.6499 9.5962,16.3079 9.5972,15.6689 L9.5992,14.4879 C5.4052,14.4259 2.3502,10.9379 1.0372,8.1439 C0.8732,7.7959 1.2792,7.4679 1.5952,7.6859 C5.5832,10.4329 9.0162,9.9579 9.6062,9.8499 C9.6062,9.8499 9.6072,9.3539 9.6072,8.7879 C9.6082,8.1489 10.3612,7.8079 10.8402,8.2299 L14.7602,11.6769 C15.0972,11.9739 15.0962,12.4989 14.7582,12.7939" }),
+            react_1.default.createElement("path", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M5.6353,7.6233 C5.6353,5.6903 7.2023,4.1233 9.1353,4.1233 L17.8883,4.1233 C19.8213,4.1233 21.3883,5.6903 21.3883,7.6233 L21.3883,16.3763 C21.3883,18.3093 19.8213,19.8763 17.8883,19.8763 L9.1353,19.8763 C7.2023,19.8763 5.6353,18.3093 5.6353,16.3763" }))));
+};
+exports.default = Internal;

package/dist/src/common/assets/icons/line/index.d.ts

@@ -30,6 +30,7 @@ declare const lineIcons: {
     readonly ic_chat_crm: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_check: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_checkbox_off: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_clip: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_cont_watching: ({ color, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_copy: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_cs: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
@@ -46,6 +47,7 @@ declare const lineIcons: {
     readonly ic_filter: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_folder: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_information: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_internal: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_language: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_links: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_live: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;

package/dist/src/common/assets/icons/line/index.js

@@ -33,6 +33,7 @@ var ChatCounseling_1 = __importDefault(require("./ChatCounseling"));
 var ChatCrm_1 = __importDefault(require("./ChatCrm"));
 var Check_1 = __importDefault(require("./Check"));
 var CheckboxOff_1 = __importDefault(require("./CheckboxOff"));
+var Clip_1 = __importDefault(require("./Clip"));
 var ContWatching_1 = __importDefault(require("./ContWatching"));
 var Copy_1 = __importDefault(require("./Copy"));
 var Cs_1 = __importDefault(require("./Cs"));
@@ -49,6 +50,7 @@ var EyeClose_1 = __importDefault(require("./EyeClose"));
 var Filter_1 = __importDefault(require("./Filter"));
 var Folder_1 = __importDefault(require("./Folder"));
 var Information_1 = __importDefault(require("./Information"));
+var Internal_1 = __importDefault(require("./Internal"));
 var Language_1 = __importDefault(require("./Language"));
 var Links_1 = __importDefault(require("./Links"));
 var Live_1 = __importDefault(require("./Live"));
@@ -171,6 +173,7 @@ var lineIcons = {
     ic_chat_crm: ChatCrm_1.default,
     ic_check: Check_1.default,
     ic_checkbox_off: CheckboxOff_1.default,
+    ic_clip: Clip_1.default,
     ic_cont_watching: ContWatching_1.default,
     ic_copy: Copy_1.default,
     ic_cs: Cs_1.default,
@@ -187,6 +190,7 @@ var lineIcons = {
     ic_filter: Filter_1.default,
     ic_folder: Folder_1.default,
     ic_information: Information_1.default,
+    ic_internal: Internal_1.default,
     ic_language: Language_1.default,
     ic_links: Links_1.default,
     ic_live: Live_1.default,

package/dist/src/common/components/Navigations/NavLink.js

@@ -34,7 +34,9 @@ function NavLink(_a,
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 ref) {
     var to = _a.to, children = _a.children, _b = _a.openNewTab, openNewTab = _b === void 0 ? false : _b, style = _a.style, onClick = _a.onClick, onMouseOver = _a.onMouseOver, onMouseOut = _a.onMouseOut;
-    return openNewTab ? (react_1.default.createElement(S_NavLink, { href: to, onClick: onClick, target: "_blank", rel: "noopener noreferrer", onMouseOver: onMouseOver, onMouseOut: onMouseOut, style: style }, children)) : (react_1.default.createElement(S_Link, { to: to, onClick: onClick, style: style, onMouseOver: onMouseOver, onMouseOut: onMouseOut }, children));
+    return openNewTab ? (react_1.default.createElement("div", { style: style, onClick: onClick },
+        react_1.default.createElement(S_NavLink, { href: to, target: "_blank", rel: "noopener noreferrer", onMouseOver: onMouseOver, onMouseOut: onMouseOut }, children))) : (react_1.default.createElement("div", { style: style, onClick: onClick },
+        react_1.default.createElement(S_Link, { to: to, onMouseOver: onMouseOver, onMouseOut: onMouseOut }, children)));
 }
 var S_NavLink = styled_components_1.default.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-height: 100%;\n"], ["\n  max-height: 100%;\n"])));
 var S_Link = (0, styled_components_1.default)(react_router_dom_1.Link)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  max-height: 100%;\n"], ["\n  max-height: 100%;\n"])));

package/dist/src/common/components/Navigations/TextLabelNav.d.ts

@@ -6,6 +6,7 @@ declare type Props = {
     text: string;
     openNewTab: boolean;
     preventLineChange?: boolean;
+    onClick?: () => void;
 };
-declare function TextLabelNav({ to, text, openNewTab, isActive, preventLineChange }: Props, ref: ForwardedRefType<HTMLAnchorElement>): JSX.Element;
+declare function TextLabelNav({ to, text, openNewTab, isActive, preventLineChange, onClick }: Props, ref: ForwardedRefType<HTMLAnchorElement>): JSX.Element;
 export default TextLabelNav;

package/dist/src/common/components/Navigations/TextLabelNav.js

@@ -7,9 +7,9 @@ var react_1 = __importDefault(require("react"));
 var desktop_1 = require("../../../desktop");
 var NavLink_1 = __importDefault(require("./NavLink"));
 function TextLabelNav(_a, ref) {
-    var to = _a.to, text = _a.text, openNewTab = _a.openNewTab, _b = _a.isActive, isActive = _b === void 0 ? false : _b, _c = _a.preventLineChange, preventLineChange = _c === void 0 ? false : _c;
-    return preventLineChange ? (react_1.default.createElement(NavLink_1.default, { ref: ref, to: to, openNewTab: openNewTab, style: { width: 'max-content' } },
-        react_1.default.createElement(desktop_1.D_TextLabel, { text: text, styleTheme: isActive ? 'body1Bold' : 'body1Regular', ellipsisMode: "use", lineLimit: 1 }))) : (react_1.default.createElement(NavLink_1.default, { ref: ref, to: to, openNewTab: openNewTab },
+    var to = _a.to, text = _a.text, openNewTab = _a.openNewTab, _b = _a.isActive, isActive = _b === void 0 ? false : _b, _c = _a.preventLineChange, preventLineChange = _c === void 0 ? false : _c, onClick = _a.onClick;
+    return preventLineChange ? (react_1.default.createElement(NavLink_1.default, { ref: ref, to: to, openNewTab: openNewTab, style: { width: 'max-content' }, onClick: onClick },
+        react_1.default.createElement(desktop_1.D_TextLabel, { text: text, styleTheme: isActive ? 'body1Bold' : 'body1Regular', ellipsisMode: "use", lineLimit: 1 }))) : (react_1.default.createElement(NavLink_1.default, { ref: ref, to: to, openNewTab: openNewTab, onClick: onClick },
         react_1.default.createElement(desktop_1.D_TextLabel, { text: text, styleTheme: isActive ? 'body1Bold' : 'body1Regular' })));
 }
 exports.default = TextLabelNav;

package/dist/src/common/hooks/index.d.ts

@@ -1 +1,2 @@
 export { default as useDetectOverflow } from './useDetectOverflow';
+export { default as usePrevious } from './usePrevious';

package/dist/src/common/hooks/index.js

@@ -3,6 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDetectOverflow = void 0;
+exports.usePrevious = exports.useDetectOverflow = void 0;
 var useDetectOverflow_1 = require("./useDetectOverflow");
 Object.defineProperty(exports, "useDetectOverflow", { enumerable: true, get: function () { return __importDefault(useDetectOverflow_1).default; } });
+var usePrevious_1 = require("./usePrevious");
+Object.defineProperty(exports, "usePrevious", { enumerable: true, get: function () { return __importDefault(usePrevious_1).default; } });

package/dist/src/common/hooks/useDetectOverflow.js

@@ -30,7 +30,7 @@ function useDetectOverflow(ref, detectOnResize) {
         else {
             setIsScrollBoxStart(false);
         }
-        if (ref.node.scrollLeft + ref.node.clientWidth === ref.node.scrollWidth) {
+        if (Math.ceil(ref.node.scrollLeft + ref.node.clientWidth) === ref.node.scrollWidth) {
             setIsScrollBoxEnd(true);
         }
         else {

package/dist/src/common/hooks/usePrevious.d.ts

@@ -0,0 +1,2 @@
+declare function usePrevious<T>(value: T): T;
+export default usePrevious;

package/dist/src/common/hooks/usePrevious.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+function usePrevious(value) {
+    var ref = (0, react_1.useRef)();
+    (0, react_1.useEffect)(function () {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+}
+exports.default = usePrevious;

package/dist/src/common/styles/colorSet/PaletteColor_Dark.json

@@ -168,5 +168,10 @@
     "sys_border_line_darktheme_05": "darkgrey30",
     "sys_component_base_darktheme_06": "darkgrey70",
     "sys_border_line_darktheme_06": "darkgrey70",
-    "sys_border_line_darktheme_07": "darkgrey50"
+    "sys_border_line_darktheme_07": "darkgrey50",
+    "sys_border_line_11": "darkgreen500",
+    "sys_base_dimmed_01": "black/opacity30",
+    "sys_kakao": "kakaoyellow",
+    "sys_border_line_12": "grey100",
+    "sys_component_base_08": "white"
 }

package/dist/src/common/styles/colorSet/PaletteColor_light.json

@@ -168,5 +168,10 @@
     "sys_border_line_darktheme_05": "darkgrey30",
     "sys_component_base_darktheme_06": "darkgrey70",
     "sys_border_line_darktheme_06": "darkgrey70",
-    "sys_border_line_darktheme_07": "darkgrey50"
+    "sys_border_line_darktheme_07": "darkgrey50",
+    "sys_border_line_11": "green500",
+    "sys_base_dimmed_01": "white/opacity30",
+    "sys_kakao": "kakaoyellow",
+    "sys_border_line_12": "grey100",
+    "sys_component_base_08": "black"
 }

package/dist/src/common/styles/colorSet/SemanticColor.json

@@ -55,5 +55,6 @@
     "grey30": "#f5f5f8",
     "opacity95": "F2",
     "darkgrey30": "#1d1d1e",
-    "opacity40": "66"
+    "opacity40": "66",
+    "kakaoyellow": "#fee500"
 }

package/dist/src/common/styles/colorSet/UIColor.json

@@ -513,5 +513,15 @@
     "ui_hero_description_text": "sys_text_white",
     "ui_cpnt_divider_area": "sys_border_area_01",
     "ui_cpnt_button_white_base_hover": "sys_component_base_darktheme_01",
-    "ui_cpnt_button_white_base_pressed": "sys_component_base_darktheme_03"
+    "ui_cpnt_button_white_base_pressed": "sys_component_base_darktheme_03",
+    "ui_cpnt_list_base_area_hover": "sys_container_background_02",
+    "ui_cpnt_sheet_border_01": "sys_border_line_01",
+    "ui_cpnt_sheet_border_02": "sys_border_line_03",
+    "ui_cpnt_sheet_border_03": "sys_border_line_11",
+    "ui_43": "sys_border_line_12",
+    "ui_44": "sys_component_base_white",
+    "ui_45": "sys_component_base_08",
+    "ui_46": "sys_base_dimmed_01",
+    "ui_47": "sys_kakao",
+    "ui_cpnt_sheet_base_03": "sys_component_base_white_opacity00"
 }

package/dist/src/common/styles/colorSet/index.d.ts

@@ -57,8 +57,9 @@ declare const colorSet: {
         opacity95: string;
         darkgrey30: string;
         opacity40: string;
+        kakaoyellow: string;
     };
-    readonly PaletteColor_Dark: {
+    readonly PaletteColor_light: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -229,8 +230,13 @@ declare const colorSet: {
         sys_component_base_darktheme_06: string;
         sys_border_line_darktheme_06: string;
         sys_border_line_darktheme_07: string;
+        sys_border_line_11: string;
+        sys_base_dimmed_01: string;
+        sys_kakao: string;
+        sys_border_line_12: string;
+        sys_component_base_08: string;
     };
-    readonly PaletteColor_light: {
+    readonly PaletteColor_Dark: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -401,6 +407,11 @@ declare const colorSet: {
         sys_component_base_darktheme_06: string;
         sys_border_line_darktheme_06: string;
         sys_border_line_darktheme_07: string;
+        sys_border_line_11: string;
+        sys_base_dimmed_01: string;
+        sys_kakao: string;
+        sys_border_line_12: string;
+        sys_component_base_08: string;
     };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
@@ -918,6 +929,16 @@ declare const colorSet: {
         ui_cpnt_divider_area: string;
         ui_cpnt_button_white_base_hover: string;
         ui_cpnt_button_white_base_pressed: string;
+        ui_cpnt_list_base_area_hover: string;
+        ui_cpnt_sheet_border_01: string;
+        ui_cpnt_sheet_border_02: string;
+        ui_cpnt_sheet_border_03: string;
+        ui_43: string;
+        ui_44: string;
+        ui_45: string;
+        ui_46: string;
+        ui_47: string;
+        ui_cpnt_sheet_base_03: string;
     };
 };
 export default colorSet;

package/dist/src/common/styles/colorSet/index.js

@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable import/order */
 var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
-var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
 var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
+var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
 var UIColor_json_1 = __importDefault(require("./UIColor.json"));
 var colorSet = {
     SemanticColor: SemanticColor_json_1.default,
-    PaletteColor_Dark: PaletteColor_Dark_json_1.default,
     PaletteColor_light: PaletteColor_light_json_1.default,
+    PaletteColor_Dark: PaletteColor_Dark_json_1.default,
     UIColor: UIColor_json_1.default
 };
 exports.default = colorSet;

package/dist/src/common/styles/colorSet/ui-type.d.ts

@@ -514,4 +514,14 @@ export interface UITheme {
     ui_cpnt_divider_area: string;
     ui_cpnt_button_white_base_hover: string;
     ui_cpnt_button_white_base_pressed: string;
+    ui_cpnt_list_base_area_hover: string;
+    ui_cpnt_sheet_border_01: string;
+    ui_cpnt_sheet_border_02: string;
+    ui_cpnt_sheet_border_03: string;
+    ui_43: string;
+    ui_44: string;
+    ui_45: string;
+    ui_46: string;
+    ui_47: string;
+    ui_cpnt_sheet_base_03: string;
 }

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

@@ -96,16 +96,16 @@ function AdminListItem(_a) {
                 quickActionBtnMode === 'btn_amount3' && quickActionBtn3Text && (react_1.default.createElement(S_QuickActionButton, { onClick: handleClickQuickActionBtn3, disabled: quickActionBtn3State === 'disabled' },
                     react_1.default.createElement(TextLabel_1.TextLabel, { text: quickActionBtn3Text, styleTheme: "caption1Regular", colorTheme: "sysTextBrandPrimary", colorOverride: quickActionBtn3State === 'disabled'
                             ? 'ui_cpnt_textlabel_sys_brand_primary_opacity50'
-                            : undefined }))),
+                            : undefined, textAlign: "center" }))),
                 (quickActionBtnMode === 'btn_amount2' || quickActionBtnMode === 'btn_amount3') &&
                     quickActionBtn2Text && (react_1.default.createElement(S_QuickActionButton, { onClick: handleClickQuickActionBtn2, disabled: quickActionBtn2State === 'disabled' },
                     react_1.default.createElement(TextLabel_1.TextLabel, { text: quickActionBtn2Text, styleTheme: "caption1Regular", colorTheme: "sysTextBrandPrimary", colorOverride: quickActionBtn2State === 'disabled'
                             ? 'ui_cpnt_textlabel_sys_brand_primary_opacity50'
-                            : undefined }))),
+                            : undefined, textAlign: "center" }))),
                 react_1.default.createElement(S_QuickActionButton, { onClick: handleClickQuickActionBtn1, disabled: quickActionBtn1State === 'disabled' },
                     react_1.default.createElement(TextLabel_1.TextLabel, { text: quickActionBtn1Text, styleTheme: "caption1Regular", colorTheme: "sysTextBrandPrimary", colorOverride: quickActionBtn1State === 'disabled'
                             ? 'ui_cpnt_textlabel_sys_brand_primary_opacity50'
-                            : undefined }))));
+                            : undefined, textAlign: "center" }))));
         }
     };
     var getColumnColorTheme = function (style) {

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

@@ -5,9 +5,9 @@ declare type BasicListProps = {
     titleStyleTheme?: 'headingBold' | 'leadParaBold' | 'subTitleBold';
     titleText?: PDSTextType;
     captionText?: PDSTextType;
-    columns: 1 | 2 | 3 | 4 | 5 | 6;
-    columnSpacing: 0 | 16 | 24;
-    rowSpacing: 0 | 24 | 32 | 48 | 64;
+    columns?: 1 | 2 | 3 | 4 | 5 | 6;
+    columnSpacing?: 0 | 16 | 24;
+    rowSpacing?: 0 | 24 | 32 | 48 | 64;
 };
 declare function BasicList({ children, titleStyleTheme, titleText, captionText, columns, columnSpacing, rowSpacing }: BasicListProps): JSX.Element;
 export default BasicList;

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

@@ -60,29 +60,29 @@ function Chip(_a) {
                     !isActive && (react_1.default.createElement(react_1.default.Fragment, null,
                         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(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }))),
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextPrimary' }),
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextPrimary', ellipsisMode: "use", lineLimit: 1 }),
                     isActive && (react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
                         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: handleClickChip },
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary" })));
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary", ellipsisMode: "use", lineLimit: 1 })));
             case 'label':
                 return (react_1.default.createElement(S_LabelChip, { onClick: handleClickChip },
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary" })));
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary", ellipsisMode: "use", lineLimit: 1 })));
             case 'time':
                 return (react_1.default.createElement(S_TimeChip, { onClick: handleClickChip },
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextWhite" })));
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1 })));
             case 'removable':
                 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(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: "sysTextSecondary", ellipsisMode: "use", lineLimit: 1 }),
                     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: 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: 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' })));
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextSecondary', ellipsisMode: "use", lineLimit: 1 })));
         }
     };
     return react_1.default.createElement(S_ChipWrapper, null, chipType());
@@ -156,5 +156,5 @@ var S_TimeChip = styled_components_1.default.div(templateObject_8 || (templateOb
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var S_ChipWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: inline-block;\n  vertical-align: bottom;\n"], ["\n  display: inline-block;\n  vertical-align: bottom;\n"])));
+var S_ChipWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: inline-block;\n  vertical-align: bottom;\n  min-width: fit-content;\n"], ["\n  display: inline-block;\n  vertical-align: bottom;\n  min-width: fit-content;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

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

@@ -4,7 +4,7 @@ declare type DesktopAlertDialogProps = {
     iconMode?: 'none' | 'success' | 'error' | 'warning' | 'information';
     titleText?: PDSTextType;
     contentText: PDSTextType;
-    btnMode: 'tbtn_amount1' | 'tbtn_amount2' | 'tbtn_amount3';
+    btnMode?: 'tbtn_amount1' | 'tbtn_amount2' | 'tbtn_amount3';
     tBtn1Text?: PDSTextType;
     tBtn2Text?: PDSTextType;
     tBtn3Text?: PDSTextType;

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

@@ -6,9 +6,10 @@ declare type DropDownValues = PDSValueOption & {
 };
 declare type Props = {
     colorTheme?: 'none' | 'dark' | 'white';
-    defaultValue?: PDSValueOption;
     hintText?: TFunctionResult;
     maxHeightItemNumber?: number;
+    defaultValue?: PDSValueOption;
+    value?: PDSValueOption;
     responsiveMode?: 'none' | 'use';
     selectionMode?: 'single' | 'multi';
     size?: 'large' | 'small';
@@ -16,5 +17,5 @@ declare type Props = {
     valueArray: DropDownValues[];
     onChange?: (option: PDSValueOption) => void;
 };
-declare function Dropdown({ colorTheme, defaultValue, hintText, maxHeightItemNumber, responsiveMode, selectionMode, size, state, valueArray, onChange }: Props): JSX.Element;
+declare function Dropdown({ colorTheme, value, defaultValue, hintText, maxHeightItemNumber, responsiveMode, selectionMode, size, state, valueArray, onChange }: Props): JSX.Element;
 export default Dropdown;

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

@@ -31,14 +31,19 @@ var ContextMenuItem_1 = require("../ContextMenuItem");
 var TextLabel_1 = require("../TextLabel");
 // TODO: selectionMode의 multi 기능 구현 추가 필요
 function Dropdown(_a) {
-    var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'none' : _b, defaultValue = _a.defaultValue, hintText = _a.hintText, _c = _a.maxHeightItemNumber, maxHeightItemNumber = _c === void 0 ? 5 : _c, _d = _a.responsiveMode, responsiveMode = _d === void 0 ? 'none' : _d, _e = _a.selectionMode, selectionMode = _e === void 0 ? 'single' : _e, _f = _a.size, size = _f === void 0 ? 'large' : _f, _g = _a.state, state = _g === void 0 ? 'normal' : _g, valueArray = _a.valueArray, onChange = _a.onChange;
+    var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'none' : _b, value = _a.value, defaultValue = _a.defaultValue, hintText = _a.hintText, _c = _a.maxHeightItemNumber, maxHeightItemNumber = _c === void 0 ? 5 : _c, _d = _a.responsiveMode, responsiveMode = _d === void 0 ? 'none' : _d, _e = _a.selectionMode, selectionMode = _e === void 0 ? 'single' : _e, _f = _a.size, size = _f === void 0 ? 'large' : _f, _g = _a.state, state = _g === void 0 ? 'normal' : _g, valueArray = _a.valueArray, onChange = _a.onChange;
     var _h = (0, react_1.useState)(false), isFocused = _h[0], setIsFocused = _h[1];
-    var _j = (0, react_1.useState)(defaultValue), selectedOption = _j[0], setSelectedOption = _j[1];
+    var _j = (0, react_1.useState)(defaultValue), selectedValue = _j[0], setSelectedValue = _j[1];
     (0, react_1.useEffect)(function () {
         if (defaultValue) {
-            setSelectedOption(defaultValue);
+            setSelectedValue(defaultValue);
         }
     }, [defaultValue]);
+    (0, react_1.useEffect)(function () {
+        if (value) {
+            setSelectedValue(value);
+        }
+    }, [value]);
     var handleClick = function () {
         if (state === 'disabled' || state === 'read_only') {
             return;
@@ -51,8 +56,10 @@ function Dropdown(_a) {
         }
     };
     var handleClickOption = function (option) {
-        setSelectedOption(option);
         setIsFocused(false);
+        if (!value) {
+            setSelectedValue(option);
+        }
         if (onChange) {
             onChange(option);
         }
@@ -140,11 +147,12 @@ function Dropdown(_a) {
     return (react_1.default.createElement(S_Dropdown, { className: "container", size: size, tabIndex: 0, onBlur: handleBlur, responsiveMode: responsiveMode },
         react_1.default.createElement(S_Select, { size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode },
             react_1.default.createElement(S_TextLabel, null,
-                react_1.default.createElement(TextLabel_1.TextLabel, { text: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.text) || hintText, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getTextColorOverride() })),
+                react_1.default.createElement(TextLabel_1.TextLabel, { text: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) || hintText, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getTextColorOverride() })),
             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", maxHeight: maxHeight }, 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, state: el.state })); }))))));
+            react_1.default.createElement(ContextMenu_1.ContextMenu, { autoWidthMode: "use", maxHeight: maxHeight }, valueArray.map(function (el) { return (react_1.default.createElement(react_1.Fragment, { key: el.value },
+                react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { option: el, size: size, isSelected: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.value) === el.value, onClick: handleClickOption, state: el.state }))); }))))));
 }
 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/DynamicDesktopNavBar/DynamicDesktopNavBar.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { BrandLogo, UserProfile } from './blocks';
+import { ActiveModeTypes } from './reducer';
 import { TemplateNamesType } from './templates';
 import { ParsedNode } from './types';
 declare type BrandLogo = {
@@ -20,8 +21,11 @@ export declare type Props = {
     template: TemplateNamesType;
     basePath: string;
 };
-export declare const BasePathContext: React.Context<{
+declare type ContextProp = {
     basePath: string;
-}>;
+    activeMode: ActiveModeTypes;
+    handleClickInternalMenuItemNav: (url: string) => void;
+};
+export declare const BasePathContext: React.Context<ContextProp>;
 declare function DynamicDesktopNavBar({ isPreview, template, brandLogo, primaryMenus, secondaryMenus, userProfile, basePath }: Props): JSX.Element;
 export default DynamicDesktopNavBar;

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

@@ -28,19 +28,42 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BasePathContext = void 0;
 var react_1 = __importStar(require("react"));
+var react_router_dom_1 = require("react-router-dom");
 var styled_components_1 = __importDefault(require("styled-components"));
 var BoxLayout_1 = require("../../../common/components/BoxLayout");
+var hooks_1 = require("../../../common/hooks");
 var blocks_1 = require("./blocks");
+var reducer_1 = __importStar(require("./reducer"));
 var templates_1 = require("./templates");
 exports.BasePathContext = (0, react_1.createContext)({
-    basePath: ''
+    basePath: '',
+    activeMode: 'BY_URL',
+    handleClickInternalMenuItemNav: function () {
+        // NOTE: noop function
+        return;
+    }
 });
 function DynamicDesktopNavBar(_a) {
     var _b = _a.isPreview, isPreview = _b === void 0 ? false : _b, template = _a.template, brandLogo = _a.brandLogo, primaryMenus = _a.primaryMenus, secondaryMenus = _a.secondaryMenus, userProfile = _a.userProfile, basePath = _a.basePath;
     var _c = templates_1.DynamicDesktopNavBarTemplates.getTemplate(template), gridStyle = _c.gridStyle, gridTemplate = _c.gridTemplate, showSecondaryMenu = _c.showSecondaryMenu, primaryMenuOptions = _c.primaryMenuOptions, secondaryMenuOptions = _c.secondaryMenuOptions, userProfileOptions = _c.userProfileOptions;
+    var _d = (0, react_1.useReducer)(reducer_1.default, reducer_1.defaultValue), state = _d[0], dispatch = _d[1];
+    var location = (0, react_router_dom_1.useLocation)();
+    var prevLocation = (0, hooks_1.usePrevious)(location.pathname + location.search);
+    (0, react_1.useEffect)(function () {
+        var currentLocation = location.pathname + location.search;
+        if (currentLocation === state.clickedURL) {
+            return;
+        }
+        if (currentLocation !== prevLocation) {
+            dispatch({ type: 'URL_CHANGED' });
+        }
+    }, [location.pathname, location.search]);
     var slicedPrimaryMenus = (0, react_1.useMemo)(function () { return primaryMenus === null || primaryMenus === void 0 ? void 0 : primaryMenus.slice(0, primaryMenuOptions.maxLength); }, [primaryMenus, primaryMenuOptions]);
     var slicedSecondaryMenus = (0, react_1.useMemo)(function () { var _a; return (_a = secondaryMenus === null || secondaryMenus === void 0 ? void 0 : secondaryMenus.slice(0, secondaryMenuOptions.maxLength)) !== null && _a !== void 0 ? _a : []; }, [secondaryMenus, secondaryMenuOptions]);
-    return (react_1.default.createElement(exports.BasePathContext.Provider, { value: { basePath: basePath } },
+    function handleClickInternalMenuItemNav(url) {
+        dispatch({ type: 'INTERNAL_CLICKED', payload: { clickedURL: url } });
+    }
+    return (react_1.default.createElement(exports.BasePathContext.Provider, { value: { basePath: basePath, activeMode: state.mode, handleClickInternalMenuItemNav: handleClickInternalMenuItemNav } },
         react_1.default.createElement(S_DynamicDesktopNavBar, { isPreview: isPreview },
             react_1.default.createElement(S_Grid, { className: "DynamicDesktopNavBarGrid", gridTemplate: gridTemplate, style: gridStyle },
                 react_1.default.createElement(blocks_1.BrandLogo, { to: brandLogo.href, logoSrc: brandLogo.src, fallbackText: brandLogo.text }),

package/dist/src/desktop/components/DynamicDesktopNavBar/blocks/PrimaryMenu.js

@@ -80,7 +80,7 @@ function PrimaryMenu(_a) {
         isOverflow && !isScrollBoxStart && (react_1.default.createElement(S_LeftButtonWrapper, null,
             react_1.default.createElement(S_ButtonWrapper, null,
                 react_1.default.createElement(__1.D_IconButton, { fillType: "fill", baseSize: "medium", baseColorKey: "ui_menu_background", iconName: "ic_arrow_left", iconFillType: "line", iconColorKey: "ui_cpnt_button_icon_default", shapeType: "circular", iconSize: 20, onClick: onClickLeftButton })))),
-        react_1.default.createElement(S_Main_PrimaryMenu, { onScroll: function () { return trigger(); }, ref: primaryCallbackRef }, menus.map(function (menu, index) { return (react_1.default.createElement(MenuItemNav_1.MenuItemNav, { key: index, menu: menu, showMenuAsIcon: showMenuAsIcon })); })),
+        react_1.default.createElement(S_Main_PrimaryMenu, { onScroll: function () { return trigger(); }, ref: primaryCallbackRef }, menus.map(function (menu, index) { return (react_1.default.createElement(MenuItemNav_1.MenuItemNav, { index: index, key: index, menu: menu, showMenuAsIcon: showMenuAsIcon })); })),
         isOverflow && !isScrollBoxEnd && (react_1.default.createElement(S_RightButtonWrapper, null,
             react_1.default.createElement(S_ButtonWrapper, null,
                 react_1.default.createElement(__1.D_IconButton, { fillType: "fill", baseSize: "medium", baseColorKey: "ui_menu_background", iconName: "ic_arrow_right", iconFillType: "line", iconColorKey: "ui_cpnt_button_icon_default", shapeType: "circular", iconSize: 20, onClick: onClickRightButton }))))));

package/dist/src/desktop/components/DynamicDesktopNavBar/blocks/SecondaryMenu.js

@@ -12,7 +12,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var MenuItemNav_1 = require("../components/MenuItemNav");
 function SecondaryMenu(_a) {
     var menus = _a.menus, showMenuAsIcon = _a.showMenuAsIcon, style = _a.style;
-    return (react_1.default.createElement(S_Main_SecondaryMenu, { style: style }, menus.map(function (menu, index) { return (react_1.default.createElement(MenuItemNav_1.MenuItemNav, { key: index, menu: menu, showMenuAsIcon: showMenuAsIcon })); })));
+    return (react_1.default.createElement(S_Main_SecondaryMenu, { style: style }, menus.map(function (menu, index) { return (react_1.default.createElement(MenuItemNav_1.MenuItemNav, { index: index, key: index, menu: menu, showMenuAsIcon: showMenuAsIcon })); })));
 }
 var S_Main_SecondaryMenu = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  grid-area: SECONDARY_MENU;\n"], ["\n  display: flex;\n  grid-area: SECONDARY_MENU;\n"])));
 exports.default = SecondaryMenu;