pds-dev-kit-web 1.4.5 → 1.4.8

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

@@ -28,6 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
+var hybrid_1 = require("../../../hybrid");
 var Icon_1 = require("../../../hybrid/components/Icon");
 var TextLabel_1 = require("../TextLabel");
 function Chip(_a) {
@@ -56,10 +57,12 @@ function Chip(_a) {
         switch (displayType) {
             case 'category_choice':
                 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" }))),
+                    !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' }),
-                    isActive && (react_1.default.createElement(S_CategoryIconWrapper, { isActive: isActive },
+                    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 },
@@ -101,11 +104,7 @@ var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (
     var theme = _a.theme, isActive = _a.isActive;
     return isActive ? '' : "border: 1px solid " + theme.ui_cpnt_chip_line_border_01;
 });
-var S_CategoryIconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
-    var theme = _a.theme, isActive = _a.isActive;
-    return isActive ? "margin-left: " + theme.spacing.spacingA : "margin-right: " + theme.spacing.spacingA;
-});
-var S_InfoChip = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 12px;\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 12px;\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
+var S_InfoChip = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 12px;\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 12px;\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_chip_fill_base_inactive;
 }, function (_a) {
@@ -115,7 +114,7 @@ var S_InfoChip = styled_components_1.default.span(templateObject_3 || (templateO
     var theme = _a.theme;
     return theme.spacing.spacingC;
 });
-var S_RemovableChip = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n  cursor: pointer;\n"], ["\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n  cursor: pointer;\n"])), function (_a) {
+var S_RemovableChip = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n  cursor: pointer;\n"], ["\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n  cursor: pointer;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_chip_fill_base_inactive;
 }, function (_a) {
@@ -125,11 +124,11 @@ var S_RemovableChip = styled_components_1.default.div(templateObject_4 || (templ
     var theme = _a.theme;
     return theme.spacing.spacingC;
 });
-var S_XIconWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  cursor: pointer;\n  margin-left: ", ";\n"], ["\n  cursor: pointer;\n  margin-left: ", ";\n"])), function (_a) {
+var S_XIconWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  cursor: pointer;\n  margin-left: ", ";\n"], ["\n  cursor: pointer;\n  margin-left: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var S_FilterSingleChip = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n  cursor: pointer;\n"], ["\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n  cursor: pointer;\n"])), function (_a) {
+var S_FilterSingleChip = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n  cursor: pointer;\n"], ["\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 32px;\n  padding-left: ", ";\n  padding-right: ", ";\n  cursor: pointer;\n"])), function (_a) {
     var theme = _a.theme, isActive = _a.isActive;
     return isActive ? theme.ui_cpnt_chip_fill_base_active_01 : theme.ui_cpnt_chip_fill_base_inactive;
 }, function (_a) {
@@ -139,23 +138,23 @@ var S_FilterSingleChip = styled_components_1.default.div(templateObject_6 || (te
     var theme = _a.theme;
     return theme.spacing.spacingC;
 });
-var S_FilterIconWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
+var S_FilterIconWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingA;
 });
-var S_LabelChip = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  border: 1px solid ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 20px;\n  padding: 0 ", ";\n"], ["\n  border: 1px solid ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 20px;\n  padding: 0 ", ";\n"])), function (_a) {
+var S_LabelChip = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border: 1px solid ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 20px;\n  padding: 0 ", ";\n"], ["\n  border: 1px solid ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 20px;\n  padding: 0 ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_chip_line_border_01;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var S_TimeChip = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  height: 20px;\n  padding: 0 ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  background-color: ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  height: 20px;\n  padding: 0 ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_a) {
+var S_TimeChip = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  height: 20px;\n  padding: 0 ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  background-color: ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  height: 20px;\n  padding: 0 ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_chip_base_playtime;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var S_ChipWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: inline-block;\n  vertical-align: bottom;\n"], ["\n  display: inline-block;\n  vertical-align: bottom;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
+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 templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

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

@@ -35,9 +35,9 @@ function DesktopTabBar(_a) {
     var history = (0, react_router_dom_1.useHistory)();
     var pathname = (0, react_router_dom_1.useLocation)().pathname;
     if (itemArray) {
-        var handelClickTabItem_1 = function (item) {
+        var handelClickTabItem_1 = function (item, e) {
             if (item.onClick) {
-                item.onClick();
+                item.onClick(e);
             }
         };
         var textLabel_1 = function (item, isSubText) {
@@ -53,8 +53,8 @@ function DesktopTabBar(_a) {
         };
         return (react_1.default.createElement(S_TabBox, null,
             itemArray.map(function (item, index) { return (react_1.default.createElement(S_TabWrapper, { key: index, isActive: item.isActive, styleTheme: styleTheme },
-                react_1.default.createElement(S_TitleWrapper, { text: item.title, onClick: function () { return handelClickTabItem_1(item); } }, textLabel_1(item, false)),
-                item.isActive && item.subArray && (react_1.default.createElement(S_SubTabBox, null, item.subArray.map(function (subItem) { return (react_1.default.createElement(S_SubWrapper, { key: subItem.title, text: subItem.title, onClick: function () { return handelClickTabItem_1(subItem); } }, textLabel_1(subItem, true))); }))))); }),
+                react_1.default.createElement(S_TitleWrapper, { text: item.title, onClick: function (e) { return handelClickTabItem_1(item, e); } }, textLabel_1(item, false)),
+                item.isActive && item.subArray && (react_1.default.createElement(S_SubTabBox, null, item.subArray.map(function (subItem) { return (react_1.default.createElement(S_SubWrapper, { key: subItem.title, text: subItem.title, onClick: function (e) { return handelClickTabItem_1(subItem, e); } }, textLabel_1(subItem, true))); }))))); }),
             itemArray.map(function (item) { return item.isActive && item.subArray && react_1.default.createElement(S_SubBackground, { key: item.title }); })));
     }
     if (textArray) {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BrandLogo, UserProfile } from './blocks';
-import { DynamicDesktopTemplateType } from './templates/types';
+import { TemplateNamesType } from './templates';
 import { ParsedNode } from './types';
 declare type BrandLogo = {
     src: string;
@@ -17,7 +17,7 @@ export declare type Props = {
     userProfile: UserProfile;
     primaryMenus: ParsedNode[];
     secondaryMenus: ParsedNode[] | null;
-    template: DynamicDesktopTemplateType;
+    template: TemplateNamesType;
     basePath: string;
 };
 export declare const BasePathContext: React.Context<{

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

@@ -32,12 +32,13 @@ 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 blocks_1 = require("./blocks");
+var templates_1 = require("./templates");
 exports.BasePathContext = (0, react_1.createContext)({
     basePath: ''
 });
 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 gridStyle = template.gridStyle, gridTemplate = template.gridTemplate, showSecondaryMenu = template.showSecondaryMenu, primaryMenuOptions = template.primaryMenuOptions, secondaryMenuOptions = template.secondaryMenuOptions, userProfileOptions = template.userProfileOptions;
+    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 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 } },

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

@@ -44,8 +44,8 @@ var WebMenuItemNav_1 = __importDefault(require("../MenuItemNav/components/WebMen
 function ContextMenuItemNavBox(_a) {
     var menu = _a.menu;
     return (react_1.default.createElement(S_ContextMenuItem, { size: "small" },
-        menu.menuItemType === 'NAV_P_APP' && menu.pAppCode && (react_1.default.createElement(PAppMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { pAppCode: menu.pAppCode }) })),
-        menu.menuItemType === 'WEB_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(WebMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }) }))));
+        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, { isContextMenu: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: 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;

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

@@ -31,17 +31,31 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var ContextMenu_1 = require("../../../ContextMenu");
 function ContextMenuNavs(_a) {
     var parentRef = _a.parentRef, children = _a.children;
-    var contextRef = (0, react_1.useRef)(null);
-    var _b = (0, react_1.useState)({ top: 0, left: 0 }), position = _b[0], setPosition = _b[1];
+    var _b = (0, react_1.useState)(null), contextRef = _b[0], setContextRef = _b[1];
+    var contextCallbackRef = (0, react_1.useCallback)(function (node) {
+        if (!node) {
+            return;
+        }
+        setContextRef(node);
+    }, []);
+    var _c = (0, react_1.useState)({ top: 0, left: 0 }), position = _c[0], setPosition = _c[1];
     (0, react_1.useLayoutEffect)(function () {
         if (!parentRef.current) {
             return;
         }
         var PARENT_HEIGHT = 48;
         var _a = parentRef.current.getBoundingClientRect(), top = _a.top, left = _a.left;
-        setPosition({ top: top + PARENT_HEIGHT, left: left });
-    }, [parentRef]);
-    return (react_1.default.createElement(S_AbsoluteWrapper, { ref: contextRef, style: { top: position.top, left: position.left } },
+        if (!contextRef) {
+            setPosition({ top: top + PARENT_HEIGHT, left: left });
+            return;
+        }
+        var contextBound = contextRef.getBoundingClientRect();
+        if (contextRef.getBoundingClientRect().right > window.innerWidth) {
+            setPosition({ top: top + PARENT_HEIGHT, left: window.innerWidth - contextBound.width });
+            return;
+        }
+    }, [parentRef, contextRef]);
+    return (react_1.default.createElement(S_AbsoluteWrapper, { ref: contextCallbackRef, style: { top: position.top, left: position.left } },
         react_1.default.createElement(ContextMenu_1.ContextMenu, null, children)));
 }
 var S_AbsoluteWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed;\n\n  /* NOTE: contents layer */\n  z-index: 90;\n"], ["\n  position: fixed;\n\n  /* NOTE: contents layer */\n  z-index: 90;\n"])));

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

@@ -17,6 +17,6 @@ function LogoNav(_a) {
         react_1.default.createElement(S_Box, null, logoSrc ? (react_1.default.createElement(S_Logo, { src: logoSrc })) : (react_1.default.createElement(__1.D_TextLabel, { text: fallbackText, styleTheme: "headingBold", ellipsisMode: "use", lineLimit: 1 })))));
 }
 var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  width: 180px;\n  display: flex;\n  align-items: center;\n"], ["\n  height: 48px;\n  width: 180px;\n  display: flex;\n  align-items: center;\n"])));
-var S_Logo = styled_components_1.default.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  max-height: 100%;\n  object-fit: contain;\n  object-position: left;\n"], ["\n  max-height: 100%;\n  object-fit: contain;\n  object-position: left;\n"])));
+var S_Logo = styled_components_1.default.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  max-height: 100%;\n  max-width: 100%;\n  object-fit: contain;\n  object-position: left;\n"], ["\n  max-height: 100%;\n  max-width: 100%;\n  object-fit: contain;\n  object-position: left;\n"])));
 exports.default = LogoNav;
 var templateObject_1, templateObject_2;

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

@@ -54,11 +54,12 @@ function MenuItemNav(_a) {
     var handleMouseOut = (0, react_1.useCallback)(function () {
         setIsContextOpen(false);
     }, []);
-    return (react_1.default.createElement(S_Box, { ref: ref, onMouseOver: handleMouseOver, onMouseLeave: handleMouseOut, onWheel: handleMouseOut, showMenuAsIcon: showMenuAsIcon },
-        menu.menuItemType === 'NAV_P_APP' && menu.pAppCode && (react_1.default.createElement(PAppMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { pAppCode: menu.pAppCode }), showMenuAsIcon: showMenuAsIcon })),
-        menu.menuItemType === 'WEB_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(WebMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }), showMenuAsIcon: showMenuAsIcon })),
-        showMenuAsIcon ? (react_1.default.createElement(hybrid_1.Spacing, { spacingType: "width", size: "spacing_b" })) : (react_1.default.createElement(hybrid_1.Spacing, { spacingType: "width", size: "spacing_f" })),
-        isContextOpen && menu.parsedNodes.length > 0 && (react_1.default.createElement(ContextMenuNavs_1.ContextMenuNavs, { parentRef: ref }, menu.parsedNodes.map(function (nav, index) { return (react_1.default.createElement(ContextMenuNavs_1.ContextMenuItemNav, { key: index, menu: nav })); })))));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(S_Box, { ref: ref, onMouseOver: handleMouseOver, onMouseLeave: handleMouseOut, onWheel: handleMouseOut, showMenuAsIcon: showMenuAsIcon },
+            menu.menuItemType === 'NAV_P_APP' && menu.pAppCode && (react_1.default.createElement(PAppMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { pAppCode: menu.pAppCode }), showMenuAsIcon: showMenuAsIcon })),
+            menu.menuItemType === 'WEB_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(WebMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }), showMenuAsIcon: showMenuAsIcon })),
+            isContextOpen && menu.parsedNodes.length > 0 && (react_1.default.createElement(ContextMenuNavs_1.ContextMenuNavs, { parentRef: ref }, menu.parsedNodes.map(function (nav, index) { return (react_1.default.createElement(ContextMenuNavs_1.ContextMenuItemNav, { key: index, menu: nav })); })))),
+        showMenuAsIcon ? (react_1.default.createElement(hybrid_1.Spacing, { spacingType: "width", size: "spacing_b" })) : (react_1.default.createElement(hybrid_1.Spacing, { spacingType: "width", size: "spacing_f" }))));
 }
 var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n"], ["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n"])));
 exports.default = MenuItemNav;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/PAppMenuItemNav.d.ts

@@ -6,6 +6,7 @@ declare type WithRequired<T, K extends keyof T> = T & {
 declare type Props = {
     menu: WithRequired<ParsedNode, 'pAppCode'>;
     showMenuAsIcon?: boolean;
+    isContextMenu?: boolean;
 };
-declare function PAppMenuItemNav({ menu, showMenuAsIcon }: Props): JSX.Element;
+declare function PAppMenuItemNav({ menu, showMenuAsIcon, isContextMenu }: Props): JSX.Element;
 export default PAppMenuItemNav;

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

@@ -24,12 +24,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_router_dom_1 = require("react-router-dom");
-var TextLabelNav_1 = __importDefault(require("../../../../../../common/components/Navigations/TextLabelNav"));
+var Navigations_1 = require("../../../../../../common/components/Navigations");
 var DynamicDesktopNavBar_1 = require("../../../DynamicDesktopNavBar");
 var IconNav_1 = __importDefault(require("../../IconNav"));
 var ImageIconNav_1 = __importDefault(require("../../ImageIconNav"));
 function PAppMenuItemNav(_a) {
-    var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon;
+    var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon, _b = _a.isContextMenu, isContextMenu = _b === void 0 ? false : _b;
     var basePath = (0, react_1.useContext)(DynamicDesktopNavBar_1.BasePathContext).basePath;
     var match = (0, react_router_dom_1.useRouteMatch)("" + basePath);
     var activeMatch = (0, react_router_dom_1.useRouteMatch)(basePath + "/:activeKey");
@@ -44,6 +44,6 @@ function PAppMenuItemNav(_a) {
             return react_1.default.createElement(IconNav_1.default, { to: "/" + menu.pAppCode, iconName: menu.iconName });
         }
     }
-    return (react_1.default.createElement(TextLabelNav_1.default, { isActive: isActive, preventLineChange: true, openNewTab: false, to: "/" + menu.pAppCode, text: menu.name }));
+    return isContextMenu ? (react_1.default.createElement(Navigations_1.ContextTextLabelNav, { isActive: isActive, preventLineChange: true, openNewTab: false, to: "/" + menu.pAppCode, text: menu.name })) : (react_1.default.createElement(Navigations_1.TextLabelNav, { isActive: isActive, preventLineChange: true, openNewTab: false, to: "/" + menu.pAppCode, text: menu.name }));
 }
 exports.default = PAppMenuItemNav;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/WebMenuItemNav.d.ts

@@ -6,6 +6,7 @@ declare type WithRequired<T, K extends keyof T> = T & {
 declare type Props = {
     menu: WithRequired<ParsedNode, 'conversionLinkSrc'>;
     showMenuAsIcon?: boolean;
+    isContextMenu?: boolean;
 };
-declare function WebMenuItemNav({ menu, showMenuAsIcon }: Props): JSX.Element;
+declare function WebMenuItemNav({ menu, showMenuAsIcon, isContextMenu }: Props): JSX.Element;
 export default WebMenuItemNav;

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

@@ -4,11 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var TextLabelNav_1 = __importDefault(require("../../../../../../common/components/Navigations/TextLabelNav"));
+var Navigations_1 = require("../../../../../../common/components/Navigations");
 var IconNav_1 = __importDefault(require("../../IconNav"));
 var ImageIconNav_1 = __importDefault(require("../../ImageIconNav"));
 function WebMenuItemNav(_a) {
-    var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon;
+    var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon, isContextMenu = _a.isContextMenu;
     if (showMenuAsIcon) {
         if (menu.iconSrc) {
             return react_1.default.createElement(ImageIconNav_1.default, { to: menu.conversionLinkSrc, iconSrc: menu.iconSrc, openNewTab: true });
@@ -17,6 +17,6 @@ function WebMenuItemNav(_a) {
             return react_1.default.createElement(IconNav_1.default, { to: "/" + menu.pAppCode, iconName: menu.iconName });
         }
     }
-    return react_1.default.createElement(TextLabelNav_1.default, { preventLineChange: true, openNewTab: true, to: menu.conversionLinkSrc, text: menu.name });
+    return isContextMenu ? (react_1.default.createElement(Navigations_1.ContextTextLabelNav, { preventLineChange: true, openNewTab: true, to: menu.conversionLinkSrc, text: menu.name })) : (react_1.default.createElement(Navigations_1.TextLabelNav, { preventLineChange: true, openNewTab: true, to: menu.conversionLinkSrc, text: menu.name }));
 }
 exports.default = WebMenuItemNav;

package/dist/src/desktop/components/DynamicDesktopNavBar/index.d.ts

@@ -1 +1,2 @@
 export { default as DynamicDesktopNavBar } from './DynamicDesktopNavBar';
+export { DynamicDesktopNavBarTemplates } from './templates';

package/dist/src/desktop/components/DynamicDesktopNavBar/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.DynamicDesktopNavBar = void 0;
+exports.DynamicDesktopNavBarTemplates = exports.DynamicDesktopNavBar = void 0;
 var DynamicDesktopNavBar_1 = require("./DynamicDesktopNavBar");
 Object.defineProperty(exports, "DynamicDesktopNavBar", { enumerable: true, get: function () { return __importDefault(DynamicDesktopNavBar_1).default; } });
+var templates_1 = require("./templates");
+Object.defineProperty(exports, "DynamicDesktopNavBarTemplates", { enumerable: true, get: function () { return templates_1.DynamicDesktopNavBarTemplates; } });

package/dist/src/desktop/components/DynamicDesktopNavBar/templates/{MenuDesignTemplates.d.ts → DynamicDesktopNavBarTemplates.d.ts}

@@ -1,5 +1,5 @@
 import { TemplateNamesType } from './types';
-declare class MenuDesignTemplates {
+declare class DynamicDesktopNavBarTemplates {
     private static data;
     private static names;
     static getNames(): Record<"W1_0001" | "W1_0002" | "W1_0003" | "W1_0004" | "W1_0005", "W1_0001" | "W1_0002" | "W1_0003" | "W1_0004" | "W1_0005">;
@@ -24,6 +24,7 @@ declare class MenuDesignTemplates {
         secondaryMenuOptions: {
             showMenuAsIcon: boolean;
             maxLength: number;
+            style: {};
         };
     } | {
         gridTemplate: string;
@@ -39,8 +40,11 @@ declare class MenuDesignTemplates {
         secondaryMenuOptions: {
             showMenuAsIcon: boolean;
             maxLength: number;
+            style: {};
+        };
+        userProfileOptions: {
+            style: {};
         };
-        userProfileOptions: {};
     } | {
         gridTemplate: string;
         gridStyle: {
@@ -57,7 +61,9 @@ declare class MenuDesignTemplates {
             maxLength: number;
             style: {};
         };
-        userProfileOptions: {};
+        userProfileOptions: {
+            style: {};
+        };
     } | {
         gridTemplate: string;
         gridStyle: {
@@ -74,8 +80,11 @@ declare class MenuDesignTemplates {
         secondaryMenuOptions: {
             showMenuAsIcon: boolean;
             maxLength: number;
+            style: {};
+        };
+        userProfileOptions: {
+            style: {};
         };
-        userProfileOptions: {};
     } | {
         gridTemplate: string;
         gridStyle: {
@@ -96,7 +105,9 @@ declare class MenuDesignTemplates {
                 justifyContent: string;
             };
         };
-        userProfileOptions: {};
+        userProfileOptions: {
+            style: {};
+        };
     };
 }
-export default MenuDesignTemplates;
+export default DynamicDesktopNavBarTemplates;

package/dist/src/desktop/components/DynamicDesktopNavBar/templates/{MenuDesignTemplates.js → DynamicDesktopNavBarTemplates.js}

@@ -12,20 +12,20 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var constants_1 = require("./constants");
-var MenuDesignTemplates = /** @class */ (function () {
-    function MenuDesignTemplates() {
+var DynamicDesktopNavBarTemplates = /** @class */ (function () {
+    function DynamicDesktopNavBarTemplates() {
     }
-    MenuDesignTemplates.getNames = function () {
-        return MenuDesignTemplates.names;
+    DynamicDesktopNavBarTemplates.getNames = function () {
+        return DynamicDesktopNavBarTemplates.names;
     };
-    MenuDesignTemplates.getTemplate = function (name) {
-        return MenuDesignTemplates.data[name];
+    DynamicDesktopNavBarTemplates.getTemplate = function (name) {
+        return DynamicDesktopNavBarTemplates.data[name];
     };
-    MenuDesignTemplates.data = constants_1.TEMPLATES_DATA;
-    MenuDesignTemplates.names = (Object.keys(constants_1.TEMPLATES_DATA).reduce(function (acc, cur) {
+    DynamicDesktopNavBarTemplates.data = constants_1.TEMPLATES_DATA;
+    DynamicDesktopNavBarTemplates.names = (Object.keys(constants_1.TEMPLATES_DATA).reduce(function (acc, cur) {
         var _a;
         return (__assign(__assign({}, acc), (_a = {}, _a[cur] = cur, _a)));
     }, {}));
-    return MenuDesignTemplates;
+    return DynamicDesktopNavBarTemplates;
 }());
-exports.default = MenuDesignTemplates;
+exports.default = DynamicDesktopNavBarTemplates;

package/dist/src/desktop/components/DynamicDesktopNavBar/templates/constants.d.ts

@@ -20,6 +20,7 @@ export declare const TEMPLATES_DATA: {
         secondaryMenuOptions: {
             showMenuAsIcon: boolean;
             maxLength: number;
+            style: {};
         };
     };
     W1_0002: {
@@ -36,8 +37,11 @@ export declare const TEMPLATES_DATA: {
         secondaryMenuOptions: {
             showMenuAsIcon: boolean;
             maxLength: number;
+            style: {};
+        };
+        userProfileOptions: {
+            style: {};
         };
-        userProfileOptions: {};
     };
     W1_0003: {
         gridTemplate: string;
@@ -55,7 +59,9 @@ export declare const TEMPLATES_DATA: {
             maxLength: number;
             style: {};
         };
-        userProfileOptions: {};
+        userProfileOptions: {
+            style: {};
+        };
     };
     W1_0004: {
         gridTemplate: string;
@@ -73,8 +79,11 @@ export declare const TEMPLATES_DATA: {
         secondaryMenuOptions: {
             showMenuAsIcon: boolean;
             maxLength: number;
+            style: {};
+        };
+        userProfileOptions: {
+            style: {};
         };
-        userProfileOptions: {};
     };
     W1_0005: {
         gridTemplate: string;
@@ -96,6 +105,8 @@ export declare const TEMPLATES_DATA: {
                 justifyContent: string;
             };
         };
-        userProfileOptions: {};
+        userProfileOptions: {
+            style: {};
+        };
     };
 };

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

@@ -22,7 +22,8 @@ exports.TEMPLATES_DATA = {
         },
         secondaryMenuOptions: {
             showMenuAsIcon: false,
-            maxLength: 0
+            maxLength: 0,
+            style: {}
         }
     },
     W1_0002: {
@@ -38,9 +39,12 @@ exports.TEMPLATES_DATA = {
         },
         secondaryMenuOptions: {
             showMenuAsIcon: false,
-            maxLength: 0
+            maxLength: 0,
+            style: {}
         },
-        userProfileOptions: {}
+        userProfileOptions: {
+            style: {}
+        }
     },
     W1_0003: {
         gridTemplate: 'BRAND_LOGO PRIMARY_MENU SECONDARY_MENU USER_PROFILE',
@@ -58,7 +62,9 @@ exports.TEMPLATES_DATA = {
             maxLength: 3,
             style: {}
         },
-        userProfileOptions: {}
+        userProfileOptions: {
+            style: {}
+        }
     },
     W1_0004: {
         gridTemplate: 'BRAND_LOGO PRIMARY_MENU USER_PROFILE',
@@ -75,19 +81,22 @@ exports.TEMPLATES_DATA = {
         },
         secondaryMenuOptions: {
             showMenuAsIcon: false,
-            maxLength: 0
+            maxLength: 0,
+            style: {}
         },
-        userProfileOptions: {}
+        userProfileOptions: {
+            style: {}
+        }
     },
     W1_0005: {
-        gridTemplate: 'BRAND_LOGO SECONDARY_MENU PRIMARY_MENU USER_PROFILE',
+        gridTemplate: 'BRAND_LOGO PRIMARY_MENU SECONDARY_MENU USER_PROFILE',
         gridStyle: {
-            gridTemplateColumns: 'max-content max-content auto max-content'
+            gridTemplateColumns: 'max-content auto max-content max-content'
         },
         showSecondaryMenu: true,
         primaryMenuOptions: {
             showMenuAsIcon: false,
-            maxLength: 5,
+            maxLength: 99,
             style: {
                 justifyContent: 'flex-end'
             }
@@ -96,9 +105,11 @@ exports.TEMPLATES_DATA = {
             showMenuAsIcon: true,
             maxLength: 3,
             style: {
-                justifyContent: 'flex-start'
+                justifyContent: 'flex-end'
             }
         },
-        userProfileOptions: {}
+        userProfileOptions: {
+            style: {}
+        }
     }
 };

package/dist/src/desktop/components/DynamicDesktopNavBar/templates/index.d.ts

@@ -1,2 +1,2 @@
-export { default as MenuDesignTemplates } from './MenuDesignTemplates';
+export { default as DynamicDesktopNavBarTemplates } from './DynamicDesktopNavBarTemplates';
 export * from './types';

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

@@ -13,7 +13,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuDesignTemplates = void 0;
-var MenuDesignTemplates_1 = require("./MenuDesignTemplates");
-Object.defineProperty(exports, "MenuDesignTemplates", { enumerable: true, get: function () { return __importDefault(MenuDesignTemplates_1).default; } });
+exports.DynamicDesktopNavBarTemplates = void 0;
+var DynamicDesktopNavBarTemplates_1 = require("./DynamicDesktopNavBarTemplates");
+Object.defineProperty(exports, "DynamicDesktopNavBarTemplates", { enumerable: true, get: function () { return __importDefault(DynamicDesktopNavBarTemplates_1).default; } });
 __exportStar(require("./types"), exports);

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

@@ -71,7 +71,7 @@ function TextButton(_a) {
             onClick();
         }
     };
-    return (react_1.default.createElement(S_Button, __assign({}, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled', state: state }),
+    return (react_1.default.createElement(S_Button, __assign({}, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled', state: state, colorTheme: colorTheme }),
         react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use" })));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 48px;\n  ", ";\n"], ["\n  border-radius: 14px;\n  height: 48px;\n  ", ";\n"])), function (_a) {
@@ -85,11 +85,15 @@ var S_Button = styled_components_1.default.button(templateObject_5 || (templateO
     var state = _a.state;
     return (state === 'normal' ? 'pointer' : 'default');
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_line_base_hover;
+    var theme = _a.theme, colorTheme = _a.colorTheme;
+    return colorTheme === 'white'
+        ? theme.ui_cpnt_button_white_base_hover
+        : theme.ui_cpnt_button_line_base_hover;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_line_base_pressed;
+    var theme = _a.theme, colorTheme = _a.colorTheme;
+    return colorTheme === 'white'
+        ? theme.ui_cpnt_button_white_base_pressed
+        : theme.ui_cpnt_button_line_base_pressed;
 }, function (_a) {
     var size = _a.size;
     return size &&

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { PDSTabItemOption } from '../../../common/types';
+export declare type ItemType = PDSTabItemOption;
+declare type UserDesktopSideTabProps = {
+    itemArray: ItemType[];
+};
+declare function UserDesktopSideTab({ itemArray }: UserDesktopSideTabProps): JSX.Element;
+export default UserDesktopSideTab;