pds-dev-kit-web 1.4.24 → 1.4.27

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

@@ -50,7 +50,7 @@ var baseBackgroundColors = {
     transparent: 'ui_cpnt_list_base_area_translucent'
 };
 function ChatList(_a) {
-    var _b = _a.styleTheme, styleTheme = _b === void 0 ? 'solid' : _b, _c = _a.headerMode, headerMode = _c === void 0 ? 'use' : _c, titleText = _a.titleText, captionText = _a.captionText, _d = _a.headerDisplayType, headerDisplayType = _d === void 0 ? 'none' : _d, _e = _a.iBtn1IconName, iBtn1IconName = _e === void 0 ? 'ic_xmark' : _e, _f = _a.iBtn1IconFillType, iBtn1IconFillType = _f === void 0 ? 'line' : _f, children = _a.children, _g = _a.textFieldState, textFieldState = _g === void 0 ? 'normal' : _g, textFieldHintText = _a.textFieldHintText, textFieldDefaultText = _a.textFieldDefaultText, textFieldMaxLength = _a.textFieldMaxLength, _h = _a.scrollVisibleType, scrollVisibleType = _h === void 0 ? 'moving' : _h, footerChildren = _a.footerChildren, submitBtnState = _a.submitBtnState, bodyBtnText = _a.bodyBtnText, onSubmit = _a.onSubmit;
+    var _b = _a.styleTheme, styleTheme = _b === void 0 ? 'solid' : _b, _c = _a.headerMode, headerMode = _c === void 0 ? 'use' : _c, titleText = _a.titleText, captionText = _a.captionText, _d = _a.headerDisplayType, headerDisplayType = _d === void 0 ? 'none' : _d, _e = _a.headerIBtn1IconName, headerIBtn1IconName = _e === void 0 ? 'ic_xmark' : _e, _f = _a.headerIBtn1IconFillType, headerIBtn1IconFillType = _f === void 0 ? 'line' : _f, children = _a.children, _g = _a.textFieldState, textFieldState = _g === void 0 ? 'normal' : _g, textFieldHintText = _a.textFieldHintText, textFieldDefaultText = _a.textFieldDefaultText, textFieldMaxLength = _a.textFieldMaxLength, _h = _a.scrollVisibleType, scrollVisibleType = _h === void 0 ? 'moving' : _h, footerChildren = _a.footerChildren, submitIBtnState = _a.submitIBtnState, bodyMBtnText = _a.bodyMBtnText, onSubmit = _a.onSubmit;
     var methods = (0, react_hook_form_1.useForm)({
         mode: 'onChange',
         defaultValues: {
@@ -60,11 +60,11 @@ function ChatList(_a) {
     var reset = methods.reset, handleSubmit = methods.handleSubmit, control = methods.control, _j = methods.formState, isSubmitted = _j.isSubmitted, isDirty = _j.isDirty, isValid = _j.isValid;
     var inputValue = (0, react_hook_form_1.useWatch)({ name: 'chat', control: control });
     var isSubmitButtonActive = (0, react_1.useMemo)(function () {
-        if (!submitBtnState) {
+        if (!submitIBtnState) {
             return false;
         }
-        return isDirty && isValid && inputValue.length > 0 && submitBtnState === 'normal';
-    }, [isDirty, isValid, inputValue, submitBtnState]);
+        return isDirty && isValid && inputValue.length > 0 && submitIBtnState === 'normal';
+    }, [isDirty, isValid, inputValue, submitIBtnState]);
     var handleSubmitChat = function (_a) {
         var chat = _a.chat;
         if (!chat || !isSubmitButtonActive) {
@@ -75,9 +75,9 @@ function ChatList(_a) {
     };
     return (react_1.default.createElement(S_ChatList, { backgroundColor: baseBackgroundColors[styleTheme], id: "chatList" },
         headerMode === 'use' && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(Header_1.default, { styleTheme: styleTheme, titleText: titleText, captionText: captionText, headerDisplayType: headerDisplayType, iBtn1IconName: iBtn1IconName, iBtn1IconFillType: iBtn1IconFillType }),
+            react_1.default.createElement(Header_1.default, { styleTheme: styleTheme, titleText: titleText, captionText: captionText, headerDisplayType: headerDisplayType, headerIBtn1IconName: headerIBtn1IconName, headerIBtn1IconFillType: headerIBtn1IconFillType }),
             react_1.default.createElement(hybrid_1.Divider, null))),
-        react_1.default.createElement(Body_1.default, { scrollVisibleType: scrollVisibleType, isSubmitted: isSubmitted, bodyBtnText: bodyBtnText }, children),
+        react_1.default.createElement(Body_1.default, { scrollVisibleType: scrollVisibleType, isSubmitted: isSubmitted, bodyMBtnText: bodyMBtnText }, children),
         react_1.default.createElement(hybrid_1.Divider, null),
         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }),
         react_1.default.createElement(react_hook_form_1.FormProvider, __assign({}, methods),

package/dist/src/desktop/components/ChatList/Header.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { Props as ChatListProps } from './ChatList';
-declare type Props = Required<Pick<ChatListProps, 'styleTheme'>> & Pick<ChatListProps, 'titleText' | 'captionText' | 'headerDisplayType' | 'iBtn1IconName' | 'iBtn1IconFillType'>;
-declare function Header({ styleTheme, titleText, captionText, headerDisplayType, iBtn1IconName, iBtn1IconFillType }: Props): JSX.Element;
+declare type Props = Required<Pick<ChatListProps, 'styleTheme'>> & Pick<ChatListProps, 'titleText' | 'captionText' | 'headerDisplayType' | 'headerIBtn1IconName' | 'headerIBtn1IconFillType'>;
+declare function Header({ styleTheme, titleText, captionText, headerDisplayType, headerIBtn1IconName, headerIBtn1IconFillType }: Props): JSX.Element;
 export default Header;

package/dist/src/desktop/components/ChatList/Header.js

@@ -23,14 +23,14 @@ var iconColors = {
     transparent: 'ui_cpnt_button_icon_white'
 };
 function Header(_a) {
-    var styleTheme = _a.styleTheme, titleText = _a.titleText, captionText = _a.captionText, headerDisplayType = _a.headerDisplayType, iBtn1IconName = _a.iBtn1IconName, iBtn1IconFillType = _a.iBtn1IconFillType;
+    var styleTheme = _a.styleTheme, titleText = _a.titleText, captionText = _a.captionText, headerDisplayType = _a.headerDisplayType, headerIBtn1IconName = _a.headerIBtn1IconName, headerIBtn1IconFillType = _a.headerIBtn1IconFillType;
     return (react_1.default.createElement(S_HeaderContentWrapper, null,
         react_1.default.createElement(S_HeaderLeftBox, null,
             titleText && (react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "body1Bold", colorTheme: titleTextColors[styleTheme] })),
             captionText && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a" }),
                 react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary", colorOverride: styleTheme === 'translucent' ? 'ui_cpnt_list_text_caption_02' : undefined })))),
-        headerDisplayType === 'ibtn1' && iBtn1IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: iBtn1IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[styleTheme], iconSize: 24, iconFillType: iBtn1IconFillType }))));
+        headerDisplayType === 'ibtn1' && headerIBtn1IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: headerIBtn1IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[styleTheme], iconSize: 24, iconFillType: headerIBtn1IconFillType }))));
 }
 var S_HeaderContentWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -3,6 +3,7 @@ declare type ContextMenuProps = {
     children: React.ReactNode;
     autoWidthMode?: 'none' | 'use';
     maxHeight?: number;
+    customWidth?: string;
 };
-declare function ContextMenu({ children, autoWidthMode, maxHeight }: ContextMenuProps): JSX.Element;
+declare function ContextMenu({ children, autoWidthMode, maxHeight, customWidth }: ContextMenuProps): JSX.Element;
 export default ContextMenu;

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

@@ -10,10 +10,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 function ContextMenu(_a) {
-    var children = _a.children, _b = _a.autoWidthMode, autoWidthMode = _b === void 0 ? 'none' : _b, maxHeight = _a.maxHeight;
-    return (react_1.default.createElement(S_ContextMenu, { autoWidth: autoWidthMode === 'use', maxHeight: maxHeight }, children));
+    var children = _a.children, _b = _a.autoWidthMode, autoWidthMode = _b === void 0 ? 'none' : _b, maxHeight = _a.maxHeight, customWidth = _a.customWidth;
+    return (react_1.default.createElement(S_ContextMenu, { autoWidth: autoWidthMode === 'use', maxHeight: maxHeight, customWidth: customWidth }, children));
 }
-var S_ContextMenu = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 14px;\n  box-sizing: border-box;\n  box-shadow: ", ";\n  list-style: none;\n  margin: 0;\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  position: relative;\n  vertical-align: baseline;\n  width: ", ";\n  z-index: 3;\n\n  max-height: ", ";\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 14px;\n  box-sizing: border-box;\n  box-shadow: ", ";\n  list-style: none;\n  margin: 0;\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  position: relative;\n  vertical-align: baseline;\n  width: ", ";\n  z-index: 3;\n\n  max-height: ", ";\n"])), function (_a) {
+var S_ContextMenu = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 14px;\n  box-sizing: border-box;\n  box-shadow: ", ";\n  list-style: none;\n  margin: 0;\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  position: relative;\n  vertical-align: baseline;\n  width: ", ";\n  z-index: 3;\n\n  max-height: ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 14px;\n  box-sizing: border-box;\n  box-shadow: ", ";\n  list-style: none;\n  margin: 0;\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  position: relative;\n  vertical-align: baseline;\n  width: ", ";\n  z-index: 3;\n\n  max-height: ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_contextmenu_base;
 }, function (_a) {
@@ -26,11 +26,20 @@ var S_ContextMenu = styled_components_1.default.ul(templateObject_1 || (template
     var theme = _a.theme;
     return theme.spacing.spacingB;
 }, function (_a) {
-    var autoWidth = _a.autoWidth;
-    return (autoWidth ? 'inherit' : 'auto');
+    var autoWidth = _a.autoWidth, customWidth = _a.customWidth;
+    if (autoWidth) {
+        return 'inherit';
+    }
+    if (customWidth) {
+        return 'auto';
+    }
+    return 'max-content';
 }, function (_a) {
     var maxHeight = _a.maxHeight;
     return (maxHeight ? maxHeight + "px" : 'none');
+}, function (_a) {
+    var customWidth = _a.customWidth;
+    return customWidth && "width: " + customWidth + ";min-width: " + customWidth + ";";
 });
 exports.default = ContextMenu;
 var templateObject_1;

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

@@ -53,7 +53,7 @@ function ContextMenuItem(_a) {
         textColorTheme = 'sysTextTertiary';
     }
     return (react_1.default.createElement(S_ContextMenuItem, { size: size, onClick: handleClick, selected: isSelected, disabled: state === 'disabled' },
-        react_1.default.createElement(TextLabel_1.TextLabel, { text: (option === null || option === void 0 ? void 0 : option.text) || text, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: textColorTheme })));
+        react_1.default.createElement(TextLabel_1.TextLabel, { text: (option === null || option === void 0 ? void 0 : option.text) || text, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: textColorTheme, lineLimit: 1, ellipsisMode: "use", wordBreak: "break_all" })));
 }
 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.js

@@ -155,7 +155,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", maxHeight: maxHeight }, valueArray.map(function (el) { return (react_1.default.createElement(react_1.Fragment, { key: el.value },
+            react_1.default.createElement(ContextMenu_1.ContextMenu, { autoWidthMode: "use", maxHeight: maxHeight, customWidth: customWidth }, 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) {

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

@@ -14,64 +14,30 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-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 styled_components_1 = __importStar(require("styled-components"));
+var styled_components_1 = __importDefault(require("styled-components"));
 var DisplayOnlyMenuItemNav_1 = __importDefault(require("../MenuItemNav/components/DisplayOnlyMenuItemNav"));
 var InternalLinkMenuItemNav_1 = __importDefault(require("../MenuItemNav/components/InternalLinkMenuItemNav"));
 var PAppMenuItemNav_1 = __importDefault(require("../MenuItemNav/components/PAppMenuItemNav"));
 var WebMenuItemNav_1 = __importDefault(require("../MenuItemNav/components/WebMenuItemNav"));
 function ContextMenuItemNavBox(_a) {
     var menu = _a.menu;
-    return (react_1.default.createElement(S_ContextMenuItem, { size: "small" },
+    return (react_1.default.createElement(S_ContextMenuItem, null,
         menu.menuItemType === 'NAV_P_APP' && menu.pAppCode && (react_1.default.createElement(PAppMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { pAppCode: menu.pAppCode }), isContextMenu: true })),
         menu.menuItemType === 'WEB_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(WebMenuItemNav_1.default, { openNewTab: true, isContextMenu: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }) })),
         menu.menuItemType === 'INTERNAL_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(InternalLinkMenuItemNav_1.default, { isContextMenu: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }) })),
         menu.menuItemType === 'DISPLAY_ONLY' && (react_1.default.createElement(DisplayOnlyMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { conversionLinkSrc: '' }) }))));
 }
-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;
-    return theme.spacing.spacingE;
-});
-var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 40px;\n  padding: 0 ", ";\n"], ["\n  height: 40px;\n  padding: 0 ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingD;
-});
-var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 32px;\n  padding: 0 ", ";\n"], ["\n  height: 32px;\n  padding: 0 ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingD;
-});
-var S_ContextMenuItem = styled_components_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n\n  ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n\n  ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
+var S_ContextMenuItem = styled_components_1.default.li(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n  height: 32px;\n\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n  height: 32px;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_contextmenu_menu_base_normal;
-}, function (_a) {
-    var size = _a.size;
-    return size && { large: large, medium: medium, small: small }[size];
 }, function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_contextmenu_menu_base_hover;
 });
 exports.default = ContextMenuItemNavBox;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1;

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/ContentsContainer.d.ts

@@ -3,7 +3,7 @@ export declare type ContentsContainerProps = {
     stepContent?: JSX.Element;
     content1?: JSX.Element;
     content2?: JSX.Element;
-    layoutType: 'WFA_1' | 'WFB_1' | 'WFC_1' | 'WFD_1' | 'WFD_2' | 'WFE_1' | 'WFF_1' | 'WFG_1' | 'WFG_2' | 'WFG_3' | 'WFG_4' | 'WFG_5' | 'WFG_6' | 'WFH_1' | 'WFI_1' | 'WFI_2' | 'WFI_3' | 'WFI_4' | 'WFI_5' | 'WFI_6' | 'WFJ_1' | 'WFK_1';
+    layoutType: 'WFA_1' | 'WFB_1' | 'WFC_1' | 'WFD_1' | 'WFD_2' | 'WFE_1' | 'WFE_2' | 'WFF_1' | 'WFG_1' | 'WFG_2' | 'WFG_3' | 'WFG_4' | 'WFG_5' | 'WFG_6' | 'WFH_1' | 'WFI_1' | 'WFI_2' | 'WFI_3' | 'WFI_4' | 'WFI_5' | 'WFI_6' | 'WFJ_1' | 'WFK_1';
     containerColor?: string;
     areaColor?: string;
 };

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/ContentsContainer.js

@@ -13,7 +13,8 @@ var ContentsContainer = function (_a) {
         WFC_1: react_1.default.createElement(variation_1.WFC, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
         WFD_1: (react_1.default.createElement(variation_1.WFD, { layoutType: "WFD_1", content1: content1, containerColor: containerColor, areaColor: areaColor })),
         WFD_2: (react_1.default.createElement(variation_1.WFD, { layoutType: "WFD_2", content1: content1, containerColor: containerColor, areaColor: areaColor })),
-        WFE_1: (react_1.default.createElement(variation_1.WFE, { stepContent: stepContent, content1: content1, containerColor: containerColor, areaColor: areaColor })),
+        WFE_1: (react_1.default.createElement(variation_1.WFE, { layoutType: "WFE_1", stepContent: stepContent, content1: content1, containerColor: containerColor, areaColor: areaColor })),
+        WFE_2: (react_1.default.createElement(variation_1.WFE, { layoutType: "WFE_2", stepContent: stepContent, content1: content1, containerColor: containerColor, areaColor: areaColor })),
         WFF_1: react_1.default.createElement(variation_1.WFF, { content1: content1, containerColor: containerColor, areaColor: areaColor }),
         WFG_1: (react_1.default.createElement(variation_1.WFG, { layoutType: "WFG_1", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),
         WFG_2: (react_1.default.createElement(variation_1.WFG, { layoutType: "WFG_2", content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor })),

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFE.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
 export declare type WFEProps = {
+    layoutType: 'WFE_1' | 'WFE_2';
     stepContent?: JSX.Element;
     content1?: JSX.Element;
     containerColor?: string;
     areaColor?: string;
 };
-declare const WFE: ({ stepContent, content1, containerColor, areaColor }: WFEProps) => JSX.Element;
+declare const WFE: ({ layoutType, stepContent, content1, containerColor, areaColor }: WFEProps) => JSX.Element;
 export default WFE;

package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFE.js

@@ -10,29 +10,59 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var WFE = function (_a) {
-    var stepContent = _a.stepContent, content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor;
-    return (react_1.default.createElement(S_ContentsContainer, { containerColor: containerColor },
-        react_1.default.createElement(S_SideArea, { areaColor: areaColor },
-            react_1.default.createElement(S_StepContent, null, stepContent)),
-        react_1.default.createElement(S_ContentsArea, { areaColor: areaColor },
-            react_1.default.createElement(S_Content1, null, content1))));
+    var layoutType = _a.layoutType, stepContent = _a.stepContent, content1 = _a.content1, containerColor = _a.containerColor, areaColor = _a.areaColor;
+    return (react_1.default.createElement(S_ContentsContainer, { layoutType: layoutType, containerColor: containerColor },
+        react_1.default.createElement(S_SideArea, { layoutType: layoutType, areaColor: areaColor },
+            react_1.default.createElement(S_StepContent, { layoutType: layoutType }, stepContent)),
+        react_1.default.createElement(S_ContentsArea, { layoutType: layoutType, areaColor: areaColor },
+            react_1.default.createElement(S_Content1, { layoutType: layoutType }, content1))));
 };
-var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  min-width: 1200px;\n  ", ";\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  min-width: 1200px;\n  ", ";\n"])), function (_a) {
+var S_ContentsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  justify-content: center;\n  min-width: 1200px;\n  ", ";\n  ", ";\n"], ["\n  align-items: flex-start;\n  background-color: ", ";\n  display: flex;\n  justify-content: center;\n  min-width: 1200px;\n  ", ";\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_contentscontainer01_background;
+}, function (_a) {
+    var layoutType = _a.layoutType;
+    return ({
+        WFE_1: 'height: 100%;',
+        WFE_2: 'overflow-x: hidden;overflow-y: auto;height: 100%;'
+    }[layoutType]);
 }, function (_a) {
     var containerColor = _a.containerColor;
     return "background-color: " + containerColor;
 });
-var S_SideArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 240px;\n  padding-top: 48px;\n  width: 240px;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 240px;\n  padding-top: 48px;\n  width: 240px;\n  ", ";\n"])), function (_a) {
+var S_SideArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  min-width: 240px;\n  padding-top: 48px;\n  width: 240px;\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  min-width: 240px;\n  padding-top: 48px;\n  width: 240px;\n  ", ";\n  ", ";\n"])), function (_a) {
+    var layoutType = _a.layoutType;
+    return ({
+        WFE_1: 'height: 100%;',
+        WFE_2: ''
+    }[layoutType]);
+}, function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });
-var S_StepContent = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n"], ["\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n"])));
-var S_ContentsArea = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: 100%;\n  max-width: 1680px;\n  min-width: 960px;\n  width: 100%;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  height: 100%;\n  max-width: 1680px;\n  min-width: 960px;\n  width: 100%;\n  ", ";\n"])), function (_a) {
+var S_StepContent = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+    var layoutType = _a.layoutType;
+    return ({
+        WFE_1: 'height: 100%;overflow-x: hidden;overflow-y: auto;',
+        WFE_2: ''
+    }[layoutType]);
+});
+var S_ContentsArea = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  max-width: 1680px;\n  min-width: 960px;\n  width: 100%;\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  max-width: 1680px;\n  min-width: 960px;\n  width: 100%;\n  ", ";\n  ", ";\n"])), function (_a) {
+    var layoutType = _a.layoutType;
+    return ({
+        WFE_1: 'height: 100%;',
+        WFE_2: ''
+    }[layoutType]);
+}, function (_a) {
     var areaColor = _a.areaColor;
     return "background-color: " + areaColor;
 });
-var S_Content1 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 100%;\n  overflow: hidden;\n"], ["\n  height: 100%;\n  overflow: hidden;\n"])));
+var S_Content1 = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+    var layoutType = _a.layoutType;
+    return ({
+        WFE_1: 'height: 100%;overflow-x: hidden;overflow-y: auto;',
+        WFE_2: ''
+    }[layoutType]);
+});
 exports.default = WFE;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/src/desktop/layout/LayoutWF/ContainersBox/ContainersBox.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export declare type ContainersBoxProps = {
-    layoutType: 'WFA_1' | 'WFB_1' | 'WFC_1' | 'WFD_1' | 'WFD_2' | 'WFE_1' | 'WFF_1' | 'WFG_1' | 'WFG_2' | 'WFG_3' | 'WFG_4' | 'WFG_5' | 'WFG_6' | 'WFH_1' | 'WFI_1' | 'WFI_2' | 'WFI_3' | 'WFI_4' | 'WFI_5' | 'WFI_6' | 'WFJ_1' | 'WFK_1';
+    layoutType: 'WFA_1' | 'WFB_1' | 'WFC_1' | 'WFD_1' | 'WFD_2' | 'WFE_1' | 'WFE_2' | 'WFF_1' | 'WFG_1' | 'WFG_2' | 'WFG_3' | 'WFG_4' | 'WFG_5' | 'WFG_6' | 'WFH_1' | 'WFI_1' | 'WFI_2' | 'WFI_3' | 'WFI_4' | 'WFI_5' | 'WFI_6' | 'WFJ_1' | 'WFK_1';
     pageMenuContent?: JSX.Element;
     subMenuContent?: JSX.Element;
     tabMenuContent?: JSX.Element;

package/dist/src/desktop/layout/LayoutWF/ContainersBox/ContainersBox.js

@@ -23,6 +23,7 @@ var ContainersBox = function (_a) {
                 WFD_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WFD_2: react_1.default.createElement(react_1.default.Fragment, null),
                 WFE_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WFE_2: react_1.default.createElement(react_1.default.Fragment, null),
                 WFF_1: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
                 WFG_1: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
                 WFG_2: react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuContent: subMenuContent }),
@@ -48,6 +49,7 @@ var ContainersBox = function (_a) {
                     WFD_1: react_1.default.createElement(react_1.default.Fragment, null),
                     WFD_2: react_1.default.createElement(react_1.default.Fragment, null),
                     WFE_1: react_1.default.createElement(react_1.default.Fragment, null),
+                    WFE_2: react_1.default.createElement(react_1.default.Fragment, null),
                     WFF_1: react_1.default.createElement(Containers_1.TabMenuContainer, { tabMenuType: "tab_menu", tabMenuContent: tabMenuContent }),
                     WFG_1: react_1.default.createElement(Containers_1.TabMenuContainer, { tabMenuType: "tab_menu", tabMenuContent: tabMenuContent }),
                     WFG_2: react_1.default.createElement(Containers_1.TabMenuContainer, { tabMenuType: "tab_menu", tabMenuContent: tabMenuContent }),

package/dist/src/mobile/components/BasicChatListItem/BasicChatListItem.d.ts

@@ -5,11 +5,11 @@ declare type Props = {
     contentText?: PDSTextType;
     leftImageMode?: 'none' | 'use';
     imageSrc?: string;
-    hoverBtnMode?: 'none' | 'use';
+    hoverMode?: 'none' | 'use';
     contextMenuOptionArray?: PDSValueOption[];
     contextMenuState?: 'normal' | 'disabled';
     colorTheme?: 'seller' | 'subscriber';
-    onClickContextMenu?: (option: PDSValueOption) => void;
+    onClickContextMenuItem?: (option: PDSValueOption) => void;
 };
-declare function BasicChatListItem({ titleText, contentText, leftImageMode, imageSrc, hoverBtnMode, contextMenuOptionArray, onClickContextMenu, contextMenuState, colorTheme }: Props): JSX.Element;
+declare function BasicChatListItem({ titleText, contentText, leftImageMode, imageSrc, hoverMode, contextMenuOptionArray, onClickContextMenuItem, contextMenuState, colorTheme }: Props): JSX.Element;
 export default BasicChatListItem;

package/dist/src/mobile/components/BasicChatListItem/BasicChatListItem.js

@@ -33,6 +33,7 @@ var ContextMenu_1 = require("../ContextMenu");
 var ContextMenuItem_1 = require("../ContextMenuItem");
 var IconButton_1 = require("../IconButton");
 var TextLabel_1 = require("../TextLabel");
+var Popup_1 = require("./Popup");
 var titleTextColors = {
     seller: 'usrTextBrandPrimary',
     subscriber: 'sysTextSecondary'
@@ -42,9 +43,11 @@ var backgroundColorTheme = {
     subscriber: 'ui_cpnt_list_base_area'
 };
 function BasicChatListItem(_a) {
-    var titleText = _a.titleText, contentText = _a.contentText, _b = _a.leftImageMode, leftImageMode = _b === void 0 ? 'none' : _b, imageSrc = _a.imageSrc, _c = _a.hoverBtnMode, hoverBtnMode = _c === void 0 ? 'use' : _c, contextMenuOptionArray = _a.contextMenuOptionArray, onClickContextMenu = _a.onClickContextMenu, _d = _a.contextMenuState, contextMenuState = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'subscriber' : _e;
+    var titleText = _a.titleText, contentText = _a.contentText, _b = _a.leftImageMode, leftImageMode = _b === void 0 ? 'none' : _b, imageSrc = _a.imageSrc, _c = _a.hoverMode, hoverMode = _c === void 0 ? 'use' : _c, contextMenuOptionArray = _a.contextMenuOptionArray, onClickContextMenuItem = _a.onClickContextMenuItem, _d = _a.contextMenuState, contextMenuState = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'subscriber' : _e;
     var _f = (0, react_1.useState)(false), isContextMenuOpen = _f[0], setIsContextMenuOpen = _f[1];
     var contextMenuRef = (0, react_1.useRef)(null);
+    var chatBody = document.querySelector('#chatMessageBox');
+    var rect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
     /**
      * @when contextMenu가 열려 있을 때
      * @expected ChatList body의 스크롤을 숨기고, contextMenu의 외부를 클릭하면 contextMenu가 닫히도록 합니다.
@@ -52,57 +55,45 @@ function BasicChatListItem(_a) {
      */
     (0, react_1.useEffect)(function () {
         // NOTE pop up 개념이 생기기 전까지의 임시 조치 방법입니다.
-        var chatBody = document.querySelector('#chatMessageBox');
-        if (chatBody) {
-            if (isContextMenuOpen) {
-                chatBody.style.overflowY = 'hidden';
-            }
-            else {
-                chatBody.style.overflowY = 'auto';
-            }
+        if (!chatBody) {
+            return;
         }
-        function handleClickOutside(e) {
-            if (contextMenuRef.current && !contextMenuRef.current.contains(e.target)) {
-                if (isContextMenuOpen) {
-                    e.stopPropagation();
-                    setIsContextMenuOpen(false);
-                }
-            }
-        }
-        document.addEventListener('click', handleClickOutside);
-        return function () {
-            document.removeEventListener('click', handleClickOutside);
-        };
-    }, [isContextMenuOpen]);
-    var handleClickMoreButton = function () {
+        chatBody.style.overflowY = isContextMenuOpen ? 'hidden' : 'auto';
+    }, [isContextMenuOpen, chatBody]);
+    var handleMoreButtonClick = function (e) {
+        e.stopPropagation();
         setIsContextMenuOpen(function (prev) { return !prev; });
     };
-    var handleClickContextMenuItem = function (option) {
-        if (onClickContextMenu) {
-            onClickContextMenu(option);
+    var handleContextMenuItemClick = function (option) {
+        if (onClickContextMenuItem) {
+            onClickContextMenuItem(option);
         }
         setIsContextMenuOpen(false);
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_BasicChatListItem, { colorTheme: colorTheme, hoverBtnMode: hoverBtnMode },
+        react_1.default.createElement(S_BasicChatListItem, { colorTheme: colorTheme, hoverMode: hoverMode },
             leftImageMode === 'use' && (react_1.default.createElement(S_ImageViewWrapper, null,
                 react_1.default.createElement(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: "responsive" }))),
             react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColors[colorTheme] }),
             react_1.default.createElement(S_ContentTextWrapper, null,
                 react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary", wordBreak: "break_all" })),
-            react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen },
-                react_1.default.createElement(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_on_primary", onClick: handleClickMoreButton }),
-                isContextMenuOpen && (react_1.default.createElement(S_ContextMenuWrapper, { ref: contextMenuRef },
-                    react_1.default.createElement(ContextMenu_1.ContextMenu, null, contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return (react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { key: el.value, option: el, onClick: handleClickContextMenuItem, state: contextMenuState })); }))))))));
+            hoverMode === 'use' && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, ref: contextMenuRef },
+                react_1.default.createElement(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_enabled", onClick: handleMoreButtonClick }))),
+            react_1.default.createElement(Popup_1.PopupProvider, null,
+                react_1.default.createElement(Popup_1.Popup, { targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "v-auto", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } },
+                    react_1.default.createElement(ContextMenu_1.ContextMenu, null, contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return (react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { key: el.value, option: el, onClick: handleContextMenuItemClick, state: contextMenuState })); })))))));
 }
-var S_SeeMoreButton = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: ", ";\n  margin-left: ", ";\n  position: relative;\n"], ["\n  display: ", ";\n  margin-left: ", ";\n  position: relative;\n"])), function (_a) {
-    var isContextMenuOpen = _a.isContextMenuOpen;
-    return (isContextMenuOpen ? 'block' : 'none');
-}, function (_a) {
+var S_SeeMoreButton = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-left: ", ";\n  position: relative;\n  visibility: ", ";\n"], ["\n  margin-left: ", ";\n  position: relative;\n  visibility: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingA;
+}, function (_a) {
+    var isContextMenuOpen = _a.isContextMenuOpen;
+    return (isContextMenuOpen ? 'visible' : 'hidden');
 });
-var S_BasicChatListItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  height: fit-content;\n  min-height: 24px;\n  max-width: 100%;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n\n  ", ";\n\n  :hover {\n    ", " {\n      display: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  height: fit-content;\n  min-height: 24px;\n  max-width: 100%;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n\n  ", ";\n\n  :hover {\n    ", " {\n      display: ", ";\n    }\n  }\n"])), function (_a) {
+var S_BasicChatListItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  height: fit-content;\n  max-width: 100%;\n  min-height: 24px;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n\n  :hover {\n    ", " {\n      visibility: ", ";\n    }\n  }\n"], ["\n  background-color: ", ";\n  display: flex;\n  height: fit-content;\n  max-width: 100%;\n  min-height: 24px;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n\n  :hover {\n    ", " {\n      visibility: ", ";\n    }\n  }\n"])), function (_a) {
+    var colorTheme = _a.colorTheme, theme = _a.theme;
+    return colorTheme && theme[backgroundColorTheme[colorTheme]];
+}, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingA;
 }, function (_a) {
@@ -114,12 +105,9 @@ var S_BasicChatListItem = styled_components_1.default.div(templateObject_2 || (t
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingA;
-}, function (_a) {
-    var colorTheme = _a.colorTheme, theme = _a.theme;
-    return colorTheme && theme[backgroundColorTheme[colorTheme]];
 }, S_SeeMoreButton, function (_a) {
-    var hoverBtnMode = _a.hoverBtnMode;
-    return hoverBtnMode === 'use' && 'block';
+    var hoverMode = _a.hoverMode;
+    return hoverMode === 'use' && 'visible';
 });
 var S_ImageViewWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 24px;\n  margin-right: ", ";\n  min-width: 24px;\n  width: 24px;\n"], ["\n  height: 24px;\n  margin-right: ", ";\n  min-width: 24px;\n  width: 24px;\n"])), function (_a) {
     var theme = _a.theme;
@@ -129,6 +117,5 @@ var S_ContentTextWrapper = styled_components_1.default.div(templateObject_4 || (
     var theme = _a.theme;
     return theme.spacing.spacingC;
 });
-var S_ContextMenuWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  right: -4px;\n  z-index: 10;\n"], ["\n  position: absolute;\n  right: -4px;\n  z-index: 10;\n"])));
 exports.default = BasicChatListItem;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/mobile/components/BasicChatListItem/Popup.d.ts

@@ -0,0 +1,19 @@
+import React, { MutableRefObject } from 'react';
+declare type Props = {
+    targetRef: MutableRefObject<HTMLElement | null>;
+    isOpen: boolean;
+    onClickOutside?: () => void;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    placement: string;
+    wrapperHeight?: number;
+    children: React.ReactNode;
+};
+declare function Popup({ targetRef, isOpen, onClickOutside, onClick, placement, wrapperHeight, children }: Props): JSX.Element;
+/**
+ * 팝업 루트 프로바이더
+ * 팝업을 사용하기 위해서는 팝업 프로바이더가 상위 컴포넌트로 있어야 합니다.
+ */
+declare function PopupProvider({ children }: {
+    children: React.ReactNode;
+}): JSX.Element;
+export { PopupProvider, Popup };