pds-dev-kit-web-test 0.0.3 → 0.0.4

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

@@ -0,0 +1,385 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var styled_components_1 = require("styled-components");
+var __1 = require("../..");
+var theme_1 = require("../../../common/styles/theme");
+var mocks = [
+    {
+        conversionLinkSrc: 'https://www.naver.com/',
+        iconSrc: '',
+        menuItemType: 'WEB_LINK',
+        name: 'Default VOD',
+        iconName: 'ic_language',
+        pAppCode: 'C00001',
+        parsedNodes: [
+            {
+                conversionLinkSrc: '',
+                iconSrc: '',
+                menuItemType: 'NAV_P_APP',
+                name: 'Timeline is Timeline but Timeline',
+                pAppCode: 'A00001',
+                parsedNodes: [],
+                type: 'GENERAL_NODE',
+                visibilityLevel: 'SUBSCRIBER'
+            },
+            {
+                conversionLinkSrc: '',
+                iconSrc: '',
+                menuItemType: 'NAV_P_APP',
+                name: 'Notice',
+                pAppCode: 'A00002',
+                parsedNodes: [],
+                type: 'GENERAL_NODE',
+                visibilityLevel: 'SUBSCRIBER'
+            }
+        ],
+        type: 'GENERAL_NODE',
+        visibilityLevel: 'SUBSCRIBER'
+    },
+    {
+        conversionLinkSrc: '',
+        iconSrc: '',
+        iconName: 'ic_chat',
+        menuItemType: 'NAV_P_APP',
+        name: 'Free Board',
+        pAppCode: 'A00003',
+        parsedNodes: [
+            {
+                conversionLinkSrc: '',
+                iconSrc: '',
+                menuItemType: 'NAV_P_APP',
+                name: 'Event Live',
+                pAppCode: 'C00005',
+                parsedNodes: [],
+                type: 'GENERAL_NODE',
+                visibilityLevel: 'SUBSCRIBER'
+            },
+            {
+                conversionLinkSrc: '',
+                iconSrc: '',
+                menuItemType: 'NAV_P_APP',
+                name: 'Polleeee',
+                pAppCode: 'A00007',
+                parsedNodes: [],
+                type: 'GENERAL_NODE',
+                visibilityLevel: 'SUBSCRIBER'
+            }
+        ],
+        type: 'GENERAL_NODE',
+        visibilityLevel: 'SUBSCRIBER'
+    },
+    {
+        conversionLinkSrc: '',
+        iconSrc: '',
+        iconName: 'ic_camera',
+        menuItemType: 'NAV_P_APP',
+        name: 'Class VOD',
+        pAppCode: 'C00007',
+        parsedNodes: [
+            {
+                conversionLinkSrc: '',
+                iconSrc: '',
+                menuItemType: 'NAV_P_APP',
+                name: '이것은30자팹네임입니다.팹팹팹팹팹팹팹팹팹팹팹팹팹팹팹팹팹',
+                pAppCode: 'C00006',
+                parsedNodes: [],
+                type: 'GENERAL_NODE',
+                visibilityLevel: 'SUBSCRIBER'
+            },
+            {
+                conversionLinkSrc: '',
+                iconSrc: '',
+                menuItemType: 'NAV_P_APP',
+                name: 'Inquiry Board',
+                pAppCode: 'A00005',
+                parsedNodes: [],
+                type: 'GENERAL_NODE',
+                visibilityLevel: 'SUBSCRIBER'
+            }
+        ],
+        type: 'GENERAL_NODE',
+        visibilityLevel: 'SUBSCRIBER'
+    },
+    {
+        conversionLinkSrc: '',
+        iconSrc: '',
+        menuItemType: 'NAV_P_APP',
+        name: 'Welcome Page',
+        pAppCode: 'B00006',
+        parsedNodes: [],
+        type: 'GENERAL_NODE',
+        visibilityLevel: 'SUBSCRIBER'
+    },
+    {
+        conversionLinkSrc: '',
+        iconSrc: '',
+        menuItemType: 'NAV_P_APP',
+        name: 'Photobook',
+        pAppCode: 'B00005',
+        parsedNodes: [
+            {
+                conversionLinkSrc: '',
+                iconSrc: '',
+                menuItemType: 'NAV_P_APP',
+                name: 'Book a consultation',
+                pAppCode: 'E00001',
+                parsedNodes: [],
+                type: 'GENERAL_NODE',
+                visibilityLevel: 'SUBSCRIBER'
+            }
+        ],
+        type: 'GENERAL_NODE',
+        visibilityLevel: 'SUBSCRIBER'
+    },
+    {
+        conversionLinkSrc: '',
+        iconSrc: '',
+        menuItemType: 'NAV_P_APP',
+        name: 'OTT Type VOD',
+        pAppCode: 'C00002',
+        parsedNodes: [],
+        type: 'GENERAL_NODE',
+        visibilityLevel: 'SUBSCRIBER'
+    },
+    {
+        conversionLinkSrc: '',
+        iconSrc: '',
+        menuItemType: 'NAV_P_APP',
+        name: 'Outlink pApp',
+        pAppCode: 'B00002',
+        parsedNodes: [
+            {
+                conversionLinkSrc: '',
+                iconSrc: '',
+                menuItemType: 'NAV_P_APP',
+                name: 'OTT Type VR VOD',
+                pAppCode: 'C00013',
+                parsedNodes: [],
+                type: 'GENERAL_NODE',
+                visibilityLevel: 'SUBSCRIBER'
+            }
+        ],
+        type: 'GENERAL_NODE',
+        visibilityLevel: 'SUBSCRIBER'
+    },
+    {
+        conversionLinkSrc: '',
+        iconSrc: '',
+        menuItemType: 'NAV_P_APP',
+        name: 'Outlink pApp',
+        pAppCode: 'B00002',
+        parsedNodes: [
+            {
+                conversionLinkSrc: '',
+                iconSrc: '',
+                menuItemType: 'NAV_P_APP',
+                name: 'OTT Type VR VOD',
+                pAppCode: 'C00013',
+                parsedNodes: [],
+                type: 'GENERAL_NODE',
+                visibilityLevel: 'SUBSCRIBER'
+            }
+        ],
+        type: 'GENERAL_NODE',
+        visibilityLevel: 'SUBSCRIBER'
+    },
+    {
+        conversionLinkSrc: '',
+        iconSrc: '',
+        menuItemType: 'NAV_P_APP',
+        name: 'Outlink pApp',
+        pAppCode: 'B00002',
+        parsedNodes: [
+            {
+                conversionLinkSrc: '',
+                iconSrc: '',
+                menuItemType: 'NAV_P_APP',
+                name: 'OTT Type VR VOD',
+                pAppCode: 'C00013',
+                parsedNodes: [],
+                type: 'GENERAL_NODE',
+                visibilityLevel: 'SUBSCRIBER'
+            }
+        ],
+        type: 'GENERAL_NODE',
+        visibilityLevel: 'SUBSCRIBER'
+    },
+    {
+        conversionLinkSrc: '',
+        iconSrc: '',
+        menuItemType: 'NAV_P_APP',
+        name: 'Outlink pApp',
+        pAppCode: 'B00002',
+        parsedNodes: [
+            {
+                conversionLinkSrc: '',
+                iconSrc: '',
+                menuItemType: 'NAV_P_APP',
+                name: 'OTT Type VR VOD',
+                pAppCode: 'C00013',
+                parsedNodes: [],
+                type: 'GENERAL_NODE',
+                visibilityLevel: 'SUBSCRIBER'
+            }
+        ],
+        type: 'GENERAL_NODE',
+        visibilityLevel: 'SUBSCRIBER'
+    },
+    {
+        conversionLinkSrc: '',
+        iconSrc: '',
+        menuItemType: 'NAV_P_APP',
+        name: 'Outlink pApp',
+        pAppCode: 'B00002',
+        parsedNodes: [
+            {
+                conversionLinkSrc: '',
+                iconSrc: '',
+                menuItemType: 'NAV_P_APP',
+                name: 'OTT Type VR VOD',
+                pAppCode: 'C00013',
+                parsedNodes: [],
+                type: 'GENERAL_NODE',
+                visibilityLevel: 'SUBSCRIBER'
+            }
+        ],
+        type: 'GENERAL_NODE',
+        visibilityLevel: 'SUBSCRIBER'
+    },
+    {
+        conversionLinkSrc: '',
+        iconSrc: '',
+        menuItemType: 'NAV_P_APP',
+        name: 'Outlink pApp',
+        pAppCode: 'B00002',
+        parsedNodes: [
+            {
+                conversionLinkSrc: '',
+                iconSrc: '',
+                menuItemType: 'NAV_P_APP',
+                name: 'OTT Type VR VOD',
+                pAppCode: 'C00013',
+                parsedNodes: [],
+                type: 'GENERAL_NODE',
+                visibilityLevel: 'SUBSCRIBER'
+            }
+        ],
+        type: 'GENERAL_NODE',
+        visibilityLevel: 'SUBSCRIBER'
+    },
+    {
+        conversionLinkSrc: '',
+        iconSrc: '',
+        menuItemType: 'NAV_P_APP',
+        name: 'Outlink pApp',
+        pAppCode: 'B00002',
+        parsedNodes: [
+            {
+                conversionLinkSrc: '',
+                iconSrc: '',
+                menuItemType: 'NAV_P_APP',
+                name: 'OTT Type VR VOD',
+                pAppCode: 'C00013',
+                parsedNodes: [],
+                type: 'GENERAL_NODE',
+                visibilityLevel: 'SUBSCRIBER'
+            }
+        ],
+        type: 'GENERAL_NODE',
+        visibilityLevel: 'SUBSCRIBER'
+    },
+    {
+        conversionLinkSrc: '',
+        iconSrc: '',
+        menuItemType: 'NAV_P_APP',
+        name: 'Outlink pApp',
+        pAppCode: 'B00002',
+        parsedNodes: [
+            {
+                conversionLinkSrc: '',
+                iconSrc: '',
+                menuItemType: 'NAV_P_APP',
+                name: 'OTT Type VR VOD',
+                pAppCode: 'C00013',
+                parsedNodes: [],
+                type: 'GENERAL_NODE',
+                visibilityLevel: 'SUBSCRIBER'
+            }
+        ],
+        type: 'GENERAL_NODE',
+        visibilityLevel: 'SUBSCRIBER'
+    },
+    {
+        conversionLinkSrc: '',
+        iconSrc: '',
+        menuItemType: 'NAV_P_APP',
+        name: 'Outlink pApp',
+        pAppCode: 'B00002',
+        parsedNodes: [
+            {
+                conversionLinkSrc: '',
+                iconSrc: '',
+                menuItemType: 'NAV_P_APP',
+                name: 'OTT Type VR VOD',
+                pAppCode: 'C00013',
+                parsedNodes: [],
+                type: 'GENERAL_NODE',
+                visibilityLevel: 'SUBSCRIBER'
+            }
+        ],
+        type: 'GENERAL_NODE',
+        visibilityLevel: 'SUBSCRIBER'
+    }
+];
+function ToneTest() {
+    var _a = (0, react_1.useState)('LIGHT'), customTone = _a[0], setTone = _a[1];
+    function changeTone() {
+        if (customTone === 'LIGHT') {
+            setTone('DARK');
+        }
+        else {
+            setTone('LIGHT');
+        }
+    }
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(styled_components_1.ThemeProvider, { theme: (0, theme_1.themeByGivenTone)(customTone) },
+            react_1.default.createElement(__1.D_DynamicDesktopNavBar, { isPreview: true, brandLogo: {
+                    src: 'http://i.imgur.com/zVKjblJ.png',
+                    text: 'PEPSI',
+                    href: '/'
+                }, userProfile: {
+                    src: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSL5qfISvgI8p95f3w5lZN9XNwYh1mRiIqEaQ&usqp=CAU',
+                    href: '/'
+                }, primaryMenus: mocks, secondaryMenus: mocks, template: "W1_0005", basePath: "/channels/invitation" })),
+        react_1.default.createElement("button", { type: "button", onClick: changeTone }, "tone change"),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(__1.D_DynamicDesktopNavBar, { isPreview: true, brandLogo: {
+                src: 'http://i.imgur.com/zVKjblJ.png',
+                text: 'PEPSI',
+                href: '/'
+            }, userProfile: {
+                src: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSL5qfISvgI8p95f3w5lZN9XNwYh1mRiIqEaQ&usqp=CAU',
+                href: '/'
+            }, primaryMenus: mocks, secondaryMenus: mocks, template: "W1_0005", basePath: "/channels/invitation" })));
+}
+exports.default = ToneTest;

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

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

package/dist/src/desktop/components/ToneTest/index.js

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

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

@@ -28,7 +28,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
-var common_1 = require("../../../common");
 var hybrid_1 = require("../../../hybrid");
 var types_1 = require("./types");
 function UploadIconButton(_a) {
@@ -62,9 +61,7 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObj
 });
 var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n\n  &:hover:not([disabled]) {\n    ", "\n  }\n\n  &:active:not([disabled]) {\n    background-image: ", ";\n  }\n\n  ", ";\n"], ["\n  background-color: ", ";\n\n  &:hover:not([disabled]) {\n    ", "\n  }\n\n  &:active:not([disabled]) {\n    background-image: ", ";\n  }\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme, baseColorKey = _a.baseColorKey;
-    return baseColorKey
-        ? (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK', window.PdsUtils ? window.PdsUtils.palette : {})[baseColorKey]
-        : theme.ui_cpnt_button_fill_base_primary;
+    return baseColorKey ? theme[baseColorKey] : theme.ui_cpnt_button_fill_base_primary;
 }, function (_a) {
     var theme = _a.theme, baseColorKey = _a.baseColorKey;
     return baseColorKey === 'ui_cpnt_button_fill_base_transparent'
@@ -99,9 +96,7 @@ var line = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 =
     return theme.ui_cpnt_button_line_base_default;
 }, function (_a) {
     var theme = _a.theme, borderColorKey = _a.borderColorKey;
-    return borderColorKey
-        ? (0, common_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK', window.PdsUtils ? window.PdsUtils.palette : {})[borderColorKey]
-        : theme.ui_cpnt_button_line_border_enabled;
+    return borderColorKey ? theme[borderColorKey] : theme.ui_cpnt_button_line_border_enabled;
 }, function (_a) {
     var colorTheme = _a.colorTheme;
     switch (colorTheme) {
@@ -127,7 +122,7 @@ var large = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 =
 var medium = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  height: 40px;\n  width: 40px;\n"], ["\n  height: 40px;\n  width: 40px;\n"])));
 var small = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  height: 32px;\n  width: 32px;\n"], ["\n  height: 32px;\n  width: 32px;\n"])));
 var xsmall = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  height: 24px;\n  width: 24px;\n"], ["\n  height: 24px;\n  width: 24px;\n"])));
-var S_UploadIconButton = styled_components_1.default.label(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  border-radius: ", ";\n  box-shadow: ", ";\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  ", ";\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  border-radius: ", ";\n  box-shadow: ", ";\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
+var S_UploadIconButton = styled_components_1.default.label(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  border-radius: ", ";\n  box-sizing: border-box;\n  box-shadow: ", ";\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  ", ";\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  border-radius: ", ";\n  box-sizing: border-box;\n  box-shadow: ", ";\n  cursor: ", ";\n  display: inline-flex;\n  justify-content: center;\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
     var shapeType = _a.shapeType;
     return shapeType === 'circular' && '50%';
 }, function (_a) {

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

@@ -6,7 +6,7 @@ declare type UploadTextButtonProps = {
     responsiveMode?: 'none' | 'use';
     fontWeight?: 'bold' | 'regular';
     state?: 'normal' | 'disabled';
-    colorTheme?: 'none' | 'red' | 'grey_01';
+    colorTheme?: 'none' | 'red' | 'grey_01' | 'white';
     accept?: string;
     multipleMode?: 'none' | 'use';
     onClick?: (e: React.ChangeEvent<HTMLInputElement>) => void;

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

@@ -39,7 +39,8 @@ var textStyle = {
 var textColor = {
     none: 'usrTextBrandPrimary',
     red: 'sysTextError',
-    grey_01: 'sysTextPrimary'
+    grey_01: 'sysTextPrimary',
+    white: 'sysTextWhite'
 };
 function UploadTextButton(_a) {
     var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.state, state = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'none' : _e, _f = _a.accept, accept = _f === void 0 ? '*' : _f, _g = _a.multipleMode, multipleMode = _g === void 0 ? 'none' : _g, onClick = _a.onClick;

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;

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

@@ -0,0 +1,36 @@
+"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 TextLabel_1 = require("../TextLabel");
+function UserDesktopSideTab(_a) {
+    var itemArray = _a.itemArray;
+    var handleClickTabItem = function (item, e) {
+        if (item.onClick) {
+            item.onClick(e);
+        }
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null, itemArray.map(function (item, index) {
+        return (react_1.default.createElement(S_TabWrapper, { key: index, onClick: function (e) { return handleClickTabItem(item, e); } },
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, lineLimit: 1, ellipsisMode: "use", styleTheme: "headingBold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use", wordBreak: "break_all" })));
+    })));
+}
+var S_TabWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n  height: 56px;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  cursor: pointer;\n  display: flex;\n  height: 56px;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_userdesktopsidetab_base_area;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+});
+exports.default = UserDesktopSideTab;
+var templateObject_1;

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

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

package/dist/src/desktop/components/UserDesktopSideTab/index.js

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

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

@@ -35,12 +35,12 @@ function UserDesktopTabBar(_a) {
     var history = (0, react_router_dom_1.useHistory)();
     var pathname = (0, react_router_dom_1.useLocation)().pathname;
     if (itemArray) {
-        var handleClickTabItem_1 = function (item) {
+        var handleClickTabItem_1 = function (item, e) {
             if (item.onClick) {
-                item.onClick();
+                item.onClick(e);
             }
         };
-        return (react_1.default.createElement(S_TabBar, null, itemArray.map(function (item, index) { return (react_1.default.createElement(S_TabWrapper, { key: index, isActive: item.isActive, styleTheme: styleTheme, text: item.title, onClick: function () { return handleClickTabItem_1(item); } },
+        return (react_1.default.createElement(S_TabBar, null, itemArray.map(function (item, index) { return (react_1.default.createElement(S_TabWrapper, { key: index, isActive: item.isActive, styleTheme: styleTheme, text: item.title, onClick: function (e) { return handleClickTabItem_1(item, e); } },
             react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'body2Bold' : 'body2Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }))); })));
     }
     if (textArray) {

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

@@ -13,12 +13,10 @@ import { Chip } from './Chip';
 import { ContextMenu } from './ContextMenu';
 import { ContextMenuItem } from './ContextMenuItem';
 import { DesktopAlertDialog } from './DesktopAlertDialog';
-import { DesktopBasicModal } from './DesktopBasicModal';
 import { DesktopHeaderBar } from './DesktopHeaderBar';
-import { DesktopHeadlessModal } from './DesktopHeadlessModal';
 import { DesktopTabBar } from './DesktopTabBar';
 import { Dropdown } from './Dropdown';
-import { DynamicDesktopNavBar } from './DynamicDesktopNavBar';
+import { DynamicDesktopNavBar, DynamicDesktopNavBarTemplates } from './DynamicDesktopNavBar';
 import { EditApplyTextField } from './EditApplyTextField';
 import { FilterBar } from './FilterBar';
 import { FloatingActionButton } from './FloatingActionButton';
@@ -39,5 +37,6 @@ import { UploadIconButton } from './UploadIconButton';
 import { UploadMainButton } from './UploadMainButton';
 import { UploadTextButton } from './UploadTextButton';
 import { UserDesktopNavBar } from './UserDesktopNavBar';
+import { UserDesktopSideTab } from './UserDesktopSideTab';
 import { UserDesktopTabBar } from './UserDesktopTabBar';
-export { AdminList, AdminListHeader, AdminListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, Card, CardList, Checkbox, Chip, ContextMenu, ContextMenuItem, DesktopAlertDialog, DesktopBasicModal, DesktopHeaderBar, DesktopHeadlessModal, DesktopTabBar, Dropdown, EditApplyTextField, FilterBar, FloatingActionButton, Hero, HorizontalFormGroup, IconButton, ImageSlide, MainButton, PageTitleTextGroup, Radio, ReactionButton, Select, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton, UserDesktopNavBar, UserDesktopTabBar, DynamicDesktopNavBar };
+export { AdminList, AdminListHeader, AdminListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, Card, CardList, Checkbox, Chip, ContextMenu, ContextMenuItem, DesktopAlertDialog, DesktopHeaderBar, DesktopTabBar, Dropdown, DynamicDesktopNavBar, DynamicDesktopNavBarTemplates, EditApplyTextField, FilterBar, FloatingActionButton, Hero, HorizontalFormGroup, IconButton, ImageSlide, MainButton, PageTitleTextGroup, Radio, ReactionButton, Select, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton, UserDesktopNavBar, UserDesktopTabBar, UserDesktopSideTab };

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DynamicDesktopNavBar = exports.UserDesktopTabBar = exports.UserDesktopNavBar = exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Select = exports.ReactionButton = exports.Radio = exports.PageTitleTextGroup = exports.MainButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.Hero = exports.FloatingActionButton = exports.FilterBar = exports.EditApplyTextField = exports.Dropdown = exports.DesktopTabBar = exports.DesktopHeadlessModal = exports.DesktopHeaderBar = exports.DesktopBasicModal = exports.DesktopAlertDialog = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.CardList = exports.Card = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = exports.AdminListItem = exports.AdminListHeader = exports.AdminList = void 0;
+exports.UserDesktopSideTab = exports.UserDesktopTabBar = exports.UserDesktopNavBar = exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Select = exports.ReactionButton = exports.Radio = exports.PageTitleTextGroup = exports.MainButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.Hero = exports.FloatingActionButton = exports.FilterBar = exports.EditApplyTextField = exports.DynamicDesktopNavBarTemplates = exports.DynamicDesktopNavBar = exports.Dropdown = exports.DesktopTabBar = exports.DesktopHeaderBar = exports.DesktopAlertDialog = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.CardList = exports.Card = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = exports.AdminListItem = exports.AdminListHeader = exports.AdminList = void 0;
 var AdminList_1 = require("./AdminList");
 Object.defineProperty(exports, "AdminList", { enumerable: true, get: function () { return AdminList_1.AdminList; } });
 var AdminListHeader_1 = require("./AdminListHeader");
@@ -31,18 +31,15 @@ var ContextMenuItem_1 = require("./ContextMenuItem");
 Object.defineProperty(exports, "ContextMenuItem", { enumerable: true, get: function () { return ContextMenuItem_1.ContextMenuItem; } });
 var DesktopAlertDialog_1 = require("./DesktopAlertDialog");
 Object.defineProperty(exports, "DesktopAlertDialog", { enumerable: true, get: function () { return DesktopAlertDialog_1.DesktopAlertDialog; } });
-var DesktopBasicModal_1 = require("./DesktopBasicModal");
-Object.defineProperty(exports, "DesktopBasicModal", { enumerable: true, get: function () { return DesktopBasicModal_1.DesktopBasicModal; } });
 var DesktopHeaderBar_1 = require("./DesktopHeaderBar");
 Object.defineProperty(exports, "DesktopHeaderBar", { enumerable: true, get: function () { return DesktopHeaderBar_1.DesktopHeaderBar; } });
-var DesktopHeadlessModal_1 = require("./DesktopHeadlessModal");
-Object.defineProperty(exports, "DesktopHeadlessModal", { enumerable: true, get: function () { return DesktopHeadlessModal_1.DesktopHeadlessModal; } });
 var DesktopTabBar_1 = require("./DesktopTabBar");
 Object.defineProperty(exports, "DesktopTabBar", { enumerable: true, get: function () { return DesktopTabBar_1.DesktopTabBar; } });
 var Dropdown_1 = require("./Dropdown");
 Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return Dropdown_1.Dropdown; } });
 var DynamicDesktopNavBar_1 = require("./DynamicDesktopNavBar");
 Object.defineProperty(exports, "DynamicDesktopNavBar", { enumerable: true, get: function () { return DynamicDesktopNavBar_1.DynamicDesktopNavBar; } });
+Object.defineProperty(exports, "DynamicDesktopNavBarTemplates", { enumerable: true, get: function () { return DynamicDesktopNavBar_1.DynamicDesktopNavBarTemplates; } });
 var EditApplyTextField_1 = require("./EditApplyTextField");
 Object.defineProperty(exports, "EditApplyTextField", { enumerable: true, get: function () { return EditApplyTextField_1.EditApplyTextField; } });
 var FilterBar_1 = require("./FilterBar");
@@ -83,5 +80,7 @@ var UploadTextButton_1 = require("./UploadTextButton");
 Object.defineProperty(exports, "UploadTextButton", { enumerable: true, get: function () { return UploadTextButton_1.UploadTextButton; } });
 var UserDesktopNavBar_1 = require("./UserDesktopNavBar");
 Object.defineProperty(exports, "UserDesktopNavBar", { enumerable: true, get: function () { return UserDesktopNavBar_1.UserDesktopNavBar; } });
+var UserDesktopSideTab_1 = require("./UserDesktopSideTab");
+Object.defineProperty(exports, "UserDesktopSideTab", { enumerable: true, get: function () { return UserDesktopSideTab_1.UserDesktopSideTab; } });
 var UserDesktopTabBar_1 = require("./UserDesktopTabBar");
 Object.defineProperty(exports, "UserDesktopTabBar", { enumerable: true, get: function () { return UserDesktopTabBar_1.UserDesktopTabBar; } });

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

@@ -9,5 +9,7 @@ import { LayoutWT } from './layout/LayoutWT';
 import { GlobalMenuContainer as WTGlobalMenuContainer } from './layout/LayoutWT/Containers';
 import { ContainersBox as WTContainersBox } from './layout/LayoutWT/ContainersBox';
 export { LayoutWT, WTGlobalMenuContainer, WTContainersBox };
-import { AdminList as D_AdminList, AdminListHeader as D_AdminListHeader, AdminListItem as D_AdminListItem, BasicFormGroup as D_BasicFormGroup, BasicList as D_BasicList, BasicListItem as D_BasicListItem, BlogTextField as D_BlogTextField, BodyTextGroup as D_BodyTextGroup, Card as D_Card, CardList as D_CardList, Checkbox as D_Checkbox, Chip as D_Chip, ContextMenu as D_ContextMenu, ContextMenuItem as D_ContextMenuItem, DesktopAlertDialog as D_DesktopAlertDialog, DesktopBasicModal as D_DesktopBasicModal, DesktopHeaderBar as D_DesktopHeaderBar, DesktopHeadlessModal as D_DesktopHeadlessModal, DesktopTabBar as D_DesktopTabBar, Dropdown as D_Dropdown, EditApplyTextField as D_EditApplyTextField, FilterBar as D_FilterBar, FloatingActionButton as D_FloatingActionButton, Hero as D_Hero, HorizontalFormGroup as D_HorizontalFormGroup, IconButton as D_IconButton, ImageSlide as D_ImageSlide, MainButton as D_MainButton, PageTitleTextGroup as D_PageTitleTextGroup, Radio as D_Radio, ReactionButton as D_ReactionButton, Select as D_Select, StatusBlock as D_StatusBlock, TextButton as D_TextButton, TextField as D_TextField, TextLabel as D_TextLabel, UploadIconButton as D_UploadIconButton, UploadMainButton as D_UploadMainButton, UploadTextButton as D_UploadTextButton, UserDesktopNavBar as D_UserDesktopNavBar, UserDesktopTabBar as D_UserDesktopTabBar, DynamicDesktopNavBar as D_DynamicDesktopNavBar } from './components';
-export { D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopBasicModal, D_DesktopHeaderBar, D_DesktopHeadlessModal, D_DesktopTabBar, D_Dropdown, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_MainButton, D_PageTitleTextGroup, D_Radio, D_Select, D_ReactionButton, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_DynamicDesktopNavBar };
+import { AdminList as D_AdminList, AdminListHeader as D_AdminListHeader, AdminListItem as D_AdminListItem, BasicFormGroup as D_BasicFormGroup, BasicList as D_BasicList, BasicListItem as D_BasicListItem, BlogTextField as D_BlogTextField, BodyTextGroup as D_BodyTextGroup, Card as D_Card, CardList as D_CardList, Checkbox as D_Checkbox, Chip as D_Chip, ContextMenu as D_ContextMenu, ContextMenuItem as D_ContextMenuItem, DesktopAlertDialog as D_DesktopAlertDialog, DesktopHeaderBar as D_DesktopHeaderBar, DesktopTabBar as D_DesktopTabBar, Dropdown as D_Dropdown, DynamicDesktopNavBar as D_DynamicDesktopNavBar, DynamicDesktopNavBarTemplates as D_DynamicDesktopNavBarTemplates, EditApplyTextField as D_EditApplyTextField, FilterBar as D_FilterBar, FloatingActionButton as D_FloatingActionButton, Hero as D_Hero, HorizontalFormGroup as D_HorizontalFormGroup, IconButton as D_IconButton, ImageSlide as D_ImageSlide, MainButton as D_MainButton, PageTitleTextGroup as D_PageTitleTextGroup, Radio as D_Radio, ReactionButton as D_ReactionButton, Select as D_Select, StatusBlock as D_StatusBlock, TextButton as D_TextButton, TextField as D_TextField, TextLabel as D_TextLabel, UploadIconButton as D_UploadIconButton, UploadMainButton as D_UploadMainButton, UploadTextButton as D_UploadTextButton, UserDesktopNavBar as D_UserDesktopNavBar, UserDesktopTabBar as D_UserDesktopTabBar, UserDesktopSideTab as D_UserDesktopSideTab } from './components';
+export { D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopHeaderBar, D_DesktopTabBar, D_Dropdown, D_DynamicDesktopNavBar, D_DynamicDesktopNavBarTemplates, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_MainButton, D_PageTitleTextGroup, D_Radio, D_Select, D_ReactionButton, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_UserDesktopSideTab };
+import { DesktopBasicModal as D_DesktopBasicModal, DesktopHeadlessModal as D_DesktopHeadlessModal } from './panels';
+export { D_DesktopBasicModal, D_DesktopHeadlessModal };