pds-dev-kit-web 1.3.28 → 1.4.2

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

@@ -0,0 +1,70 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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 blocks_1 = require("./blocks");
+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 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 } },
+        react_1.default.createElement(react_router_dom_1.BrowserRouter, { basename: basePath },
+            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 }),
+                    react_1.default.createElement(blocks_1.PrimaryMenu, { menus: slicedPrimaryMenus, showMenuAsIcon: primaryMenuOptions.showMenuAsIcon, style: primaryMenuOptions.style }),
+                    showSecondaryMenu && (react_1.default.createElement(blocks_1.SecondaryMenu, { menus: slicedSecondaryMenus, showMenuAsIcon: secondaryMenuOptions.showMenuAsIcon, style: secondaryMenuOptions.style })),
+                    react_1.default.createElement(blocks_1.UserProfile, { src: userProfile.src, to: userProfile.href, style: userProfileOptions.style }))))));
+}
+var S_Grid = (0, styled_components_1.default)(BoxLayout_1.Grid)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  justify-items: center;\n  gap: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  align-items: center;\n  justify-items: center;\n  gap: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+});
+var S_DynamicDesktopNavBar = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  height: 63px;\n  min-width: ", ";\n\n  * {\n    box-sizing: border-box;\n  }\n\n  a:active {\n    pointer-events: ", ";\n  }\n"], ["\n  background-color: ", ";\n  display: flex;\n  height: 63px;\n  min-width: ", ";\n\n  * {\n    box-sizing: border-box;\n  }\n\n  a:active {\n    pointer-events: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_menu_background;
+}, function (_a) {
+    var isPreview = _a.isPreview;
+    return (isPreview ? '1100px' : '1200px');
+}, function (_a) {
+    var isPreview = _a.isPreview;
+    return (isPreview ? 'none' : 'auto');
+});
+exports.default = DynamicDesktopNavBar;
+var templateObject_1, templateObject_2;

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { CSSProperties } from 'styled-components';
+declare type Props = {
+    to: string;
+    logoSrc: string;
+    fallbackText: string;
+    style?: CSSProperties;
+};
+declare function BrandLogo({ to, logoSrc, fallbackText, style }: Props): JSX.Element;
+export default BrandLogo;

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

@@ -0,0 +1,20 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 = __importDefault(require("styled-components"));
+var LogoNav_1 = __importDefault(require("../components/LogoNav"));
+function BrandLogo(_a) {
+    var to = _a.to, logoSrc = _a.logoSrc, fallbackText = _a.fallbackText, style = _a.style;
+    return (react_1.default.createElement(S_BrandLogo, { style: style },
+        react_1.default.createElement(LogoNav_1.default, { to: to, logoSrc: logoSrc, fallbackText: fallbackText })));
+}
+var S_BrandLogo = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  grid-area: BRAND_LOGO;\n"], ["\n  display: flex;\n  grid-area: BRAND_LOGO;\n"])));
+exports.default = BrandLogo;
+var templateObject_1;

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { CSSProperties } from 'styled-components';
+import { ParsedNode } from '../types';
+declare type Props = {
+    menus: ParsedNode[];
+    showMenuAsIcon: boolean;
+    style?: CSSProperties;
+};
+declare function PrimaryMenu({ menus, showMenuAsIcon, style }: Props): JSX.Element;
+export default PrimaryMenu;

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

@@ -0,0 +1,109 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var smoothscroll_polyfill_1 = __importDefault(require("smoothscroll-polyfill"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var __1 = require("../../..");
+var hooks_1 = require("../../../../common/hooks");
+var MenuItemNav_1 = require("../components/MenuItemNav");
+// NOTE: safari-scroll-behavior-smooth polyfill
+smoothscroll_polyfill_1.default.polyfill();
+var DESKTOP_SCROLL_LEFT = 320;
+function PrimaryMenu(_a) {
+    var menus = _a.menus, showMenuAsIcon = _a.showMenuAsIcon, style = _a.style;
+    var _b = (0, react_1.useState)({ node: null }), primaryRef = _b[0], setPrimaryRef = _b[1];
+    var primaryCallbackRef = (0, react_1.useCallback)(function (node) {
+        if (!node) {
+            return;
+        }
+        setPrimaryRef({ node: node });
+    }, [menus]);
+    (0, react_1.useEffect)(function () {
+        if (!primaryRef.node) {
+            return;
+        }
+        primaryRef.node.addEventListener('wheel', handleScroll);
+        function handleScroll(e) {
+            if (primaryRef.node) {
+                primaryRef.node.scrollTo({ left: primaryRef.node.scrollLeft + e.deltaY });
+            }
+        }
+        return function () {
+            if (!primaryRef.node) {
+                return;
+            }
+            primaryRef.node.removeEventListener('scroll', handleScroll);
+        };
+    }, [primaryRef]);
+    var _c = (0, hooks_1.useDetectOverflow)(primaryRef, true), trigger = _c.trigger, isOverflow = _c.isOverflow, isScrollBoxStart = _c.isScrollBoxStart, isScrollBoxEnd = _c.isScrollBoxEnd;
+    var onClickLeftButton = function () {
+        primaryRef.node &&
+            primaryRef.node.scroll({
+                left: primaryRef.node.scrollLeft - DESKTOP_SCROLL_LEFT,
+                behavior: 'smooth'
+            });
+    };
+    var onClickRightButton = function () {
+        primaryRef.node &&
+            primaryRef.node.scroll({
+                left: primaryRef.node.scrollLeft + DESKTOP_SCROLL_LEFT,
+                behavior: 'smooth'
+            });
+    };
+    return (react_1.default.createElement(S_PrimaryMenuBox, { style: style },
+        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 })); })),
+        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 }))))));
+}
+var S_Main_PrimaryMenu = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  grid-area: PRIMARY_MENU;\n  overflow-x: auto;\n  width: max-content;\n  overscroll-behavior-y: none;\n\n  & > div:first-child {\n    margin-left: 32px;\n  }\n"], ["\n  display: flex;\n  grid-area: PRIMARY_MENU;\n  overflow-x: auto;\n  width: max-content;\n  overscroll-behavior-y: none;\n\n  & > div:first-child {\n    margin-left: 32px;\n  }\n"])));
+var S_PrimaryMenuBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  width: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  position: relative;\n  height: 48px;\n"], ["\n  display: flex;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  width: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  position: relative;\n  height: 48px;\n"])));
+var S_RightButtonWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  position: absolute;\n  right: 0;\n\n  &::before {\n    background: ", ";\n    content: '';\n    display: block;\n    height: 100%;\n    pointer-events: none;\n    width: 50px;\n  }\n"], ["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  position: absolute;\n  right: 0;\n\n  &::before {\n    background: ", ";\n    content: '';\n    display: block;\n    height: 100%;\n    pointer-events: none;\n    width: 50px;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return "linear-gradient(to left, " + theme.ui_menu_background + " 10%, " + theme.ui_cpnt_pg_gradient_02 + " 90%)";
+});
+var S_LeftButtonWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  left: 0;\n  position: absolute;\n\n  &::after {\n    background: ", ";\n    content: '';\n    display: block;\n    height: 100%;\n    pointer-events: none;\n    width: 50px;\n  }\n"], ["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  left: 0;\n  position: absolute;\n\n  &::after {\n    background: ", ";\n    content: '';\n    display: block;\n    height: 100%;\n    pointer-events: none;\n    width: 50px;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return "linear-gradient(to right, " + theme.ui_menu_background + " 20%, " + theme.ui_cpnt_pg_gradient_02 + " 80%)";
+});
+var S_ButtonWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 50px;\n  display: flex;\n  align-items: center;\n\n  & > button {\n    background-color: ", ";\n\n    * path {\n      stroke: ", ";\n    }\n  }\n"], ["\n  background-color: ", ";\n  height: 50px;\n  display: flex;\n  align-items: center;\n\n  & > button {\n    background-color: ", ";\n\n    * path {\n      stroke: ", ";\n    }\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_menu_background;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_menu_background;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_temp_grey_02;
+});
+exports.default = PrimaryMenu;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { CSSProperties } from 'styled-components';
+import { ParsedNode } from '../types';
+declare type Props = {
+    menus: ParsedNode[];
+    showMenuAsIcon: boolean;
+    style?: CSSProperties;
+};
+declare function SecondaryMenu({ menus, showMenuAsIcon, style }: Props): JSX.Element;
+export default SecondaryMenu;

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

@@ -0,0 +1,19 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 = __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 })); })));
+}
+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;
+var templateObject_1;

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { CSSProperties } from 'styled-components';
+declare type Props = {
+    src: string;
+    to: string;
+    style?: CSSProperties;
+};
+declare function UserProfile({ src, to, style }: Props): JSX.Element;
+export default UserProfile;

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

@@ -0,0 +1,22 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 = __importDefault(require("styled-components"));
+var Navigations_1 = require("../../../../common/components/Navigations");
+var hybrid_1 = require("../../../../hybrid");
+function UserProfile(_a) {
+    var src = _a.src, to = _a.to, style = _a.style;
+    return (react_1.default.createElement(S_UserProfile, { style: style },
+        react_1.default.createElement(Navigations_1.NavLink, { to: to },
+            react_1.default.createElement(hybrid_1.ImageView, { width: 32, ratio: "1_1", scaleType: "cover", shapeType: "circular", src: src, borderMode: "use" }))));
+}
+var S_UserProfile = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  grid-area: USER_PROFILE;\n  justify-content: flex-end;\n"], ["\n  display: flex;\n  grid-area: USER_PROFILE;\n  justify-content: flex-end;\n"])));
+exports.default = UserProfile;
+var templateObject_1;

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

@@ -0,0 +1,4 @@
+export { default as BrandLogo } from './BrandLogo';
+export { default as PrimaryMenu } from './PrimaryMenu';
+export { default as SecondaryMenu } from './SecondaryMenu';
+export { default as UserProfile } from './UserProfile';

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

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserProfile = exports.SecondaryMenu = exports.PrimaryMenu = exports.BrandLogo = void 0;
+var BrandLogo_1 = require("./BrandLogo");
+Object.defineProperty(exports, "BrandLogo", { enumerable: true, get: function () { return __importDefault(BrandLogo_1).default; } });
+var PrimaryMenu_1 = require("./PrimaryMenu");
+Object.defineProperty(exports, "PrimaryMenu", { enumerable: true, get: function () { return __importDefault(PrimaryMenu_1).default; } });
+var SecondaryMenu_1 = require("./SecondaryMenu");
+Object.defineProperty(exports, "SecondaryMenu", { enumerable: true, get: function () { return __importDefault(SecondaryMenu_1).default; } });
+var UserProfile_1 = require("./UserProfile");
+Object.defineProperty(exports, "UserProfile", { enumerable: true, get: function () { return __importDefault(UserProfile_1).default; } });

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ParsedNode } from '../../types';
+export declare type ContextMenuItemProps = {
+    size?: 'large' | 'medium' | 'small';
+    isSelected?: boolean;
+    children: React.ReactNode;
+};
+declare type Props = {
+    menu: ParsedNode;
+};
+declare function ContextMenuItemNavBox({ menu }: Props): JSX.Element;
+export default ContextMenuItemNavBox;

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

@@ -0,0 +1,73 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 __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 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" },
+        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 }) }))));
+}
+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 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;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+declare type ContextTypes = {
+    parentRef: any;
+    children: React.ReactNode;
+};
+declare function ContextMenuNavs({ parentRef, children }: ContextTypes): JSX.Element;
+export default ContextMenuNavs;

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

@@ -0,0 +1,49 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+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];
+    (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 } },
+        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"])));
+exports.default = ContextMenuNavs;
+var templateObject_1;

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

@@ -0,0 +1,2 @@
+export { default as ContextMenuNavs } from './ContextMenuNavs';
+export { default as ContextMenuItemNav } from './ContextMenuItemNav';

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

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContextMenuItemNav = exports.ContextMenuNavs = void 0;
+var ContextMenuNavs_1 = require("./ContextMenuNavs");
+Object.defineProperty(exports, "ContextMenuNavs", { enumerable: true, get: function () { return __importDefault(ContextMenuNavs_1).default; } });
+var ContextMenuItemNav_1 = require("./ContextMenuItemNav");
+Object.defineProperty(exports, "ContextMenuItemNav", { enumerable: true, get: function () { return __importDefault(ContextMenuItemNav_1).default; } });

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { PDSIconType } from '../../../../common';
+declare type Props = {
+    to: string;
+    iconName: PDSIconType;
+};
+declare function IconNav({ to, iconName }: Props): JSX.Element;
+export default IconNav;

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

@@ -0,0 +1,14 @@
+"use strict";
+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 __1 = require("../../..");
+var Navigations_1 = require("../../../../common/components/Navigations");
+function IconNav(_a) {
+    var to = _a.to, iconName = _a.iconName;
+    return (react_1.default.createElement(Navigations_1.NavLink, { to: to },
+        react_1.default.createElement(__1.D_IconButton, { fillType: "fill", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconName: iconName, iconFillType: "line", iconColorKey: "ui_menu_primarymenu_main", shapeType: "rectangle", iconSize: 24 })));
+}
+exports.default = IconNav;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare type Props = {
+    to: string;
+    openNewTab: boolean;
+    iconSrc: string;
+};
+declare function ImageIconNav({ to, openNewTab, iconSrc }: Props): JSX.Element;
+export default ImageIconNav;

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

@@ -0,0 +1,22 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 = __importDefault(require("styled-components"));
+var Navigations_1 = require("../../../../common/components/Navigations");
+var hybrid_1 = require("../../../../hybrid");
+function ImageIconNav(_a) {
+    var to = _a.to, openNewTab = _a.openNewTab, iconSrc = _a.iconSrc;
+    return (react_1.default.createElement(Navigations_1.NavLink, { openNewTab: openNewTab, to: to },
+        react_1.default.createElement(S_IconWrapper, null,
+            react_1.default.createElement(hybrid_1.ImageView, { width: 24, ratio: "1_1", scaleType: "contain", src: iconSrc, shapeType: "rectangle" }))));
+}
+var S_IconWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 48px;\n  justify-content: center;\n  width: 48px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 48px;\n  justify-content: center;\n  width: 48px;\n"])));
+exports.default = ImageIconNav;
+var templateObject_1;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare type Props = {
+    to: string;
+    logoSrc: string;
+    fallbackText: string;
+};
+declare function LogoNav({ to, logoSrc, fallbackText }: Props): JSX.Element;
+export default LogoNav;

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

@@ -0,0 +1,22 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 = __importDefault(require("styled-components"));
+var __1 = require("../../..");
+var NavLink_1 = __importDefault(require("../../../../common/components/Navigations/NavLink"));
+function LogoNav(_a) {
+    var to = _a.to, logoSrc = _a.logoSrc, fallbackText = _a.fallbackText;
+    return (react_1.default.createElement(NavLink_1.default, { to: to },
+        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"])));
+exports.default = LogoNav;
+var templateObject_1, templateObject_2;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ParsedNode } from '../../types';
+declare type Props = {
+    menu: ParsedNode;
+    showMenuAsIcon: boolean;
+};
+declare function MenuItemNav({ menu, showMenuAsIcon }: Props): JSX.Element;
+export default MenuItemNav;