pds-dev-kit-web 2.2.55 → 2.2.57

package/dist/src/desktop/components/BasicListItem/RightBox/MainButton.js

@@ -1,10 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var components_1 = require("../../../../hybrid/components");
 var MainButton_1 = require("../../MainButton");
 var MainButton = function (_a) {
     var text = _a.text, state = _a.state, fill = _a.fill, onClick = _a.onClick;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MainButton_1.MainButton, { text: text, state: state, fillType: fill ? 'fill' : 'line', size: "small", onClick: onClick }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_c", spacingType: "width" })] }));
+    return ((0, jsx_runtime_1.jsx)(MainButton_1.MainButton, { text: text, state: state, fillType: fill ? 'fill' : 'line', size: "small", onClick: onClick }));
 };
 exports.default = MainButton;

package/dist/src/desktop/components/BasicListItem/RightBox/Switch.js

@@ -12,7 +12,7 @@ var components_1 = require("../../../../hybrid/components");
 var styled_components_1 = __importDefault(require("styled-components"));
 var Switch = function (_a) {
     var name = _a.name, state = _a.state, status = _a.status, onClick = _a.onClick;
-    return ((0, jsx_runtime_1.jsxs)(S_SwitchWrapper, { children: [(0, jsx_runtime_1.jsx)(components_1.Switch, { name: name, state: state, status: status, onClick: onClick }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_c", spacingType: "width" })] }));
+    return ((0, jsx_runtime_1.jsx)(S_SwitchWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.Switch, { name: name, state: state, status: status, onClick: onClick }) }));
 };
 var S_SwitchWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  min-height: 32px;\n  min-width: 68px;\n  position: relative;\n  right: 0;\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  min-height: 32px;\n  min-width: 68px;\n  position: relative;\n  right: 0;\n"])));
 exports.default = Switch;

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

@@ -19,12 +19,77 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = 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 SecondaryMenu(_a) {
     var menus = _a.menus, showMenuAsIcon = _a.showMenuAsIcon, style = _a.style;
-    return ((0, jsx_runtime_1.jsx)(S_Main_SecondaryMenu, __assign({ style: style }, { children: menus.map(function (menu, index) { return ((0, jsx_runtime_1.jsx)(MenuItemNav_1.MenuItemNav, { menu: menu, showMenuAsIcon: showMenuAsIcon }, index)); }) })));
+    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 ((0, jsx_runtime_1.jsxs)(S_SecondaryMenu, __assign({ style: style }, { children: [isOverflow && !isScrollBoxStart && ((0, jsx_runtime_1.jsx)(S_LeftButtonWrapper, { children: (0, jsx_runtime_1.jsx)(S_ButtonWrapper, { children: (0, jsx_runtime_1.jsx)(__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 }) }) })), (0, jsx_runtime_1.jsx)(S_Main_SecondaryMenu, __assign({ style: style, onScroll: function () { return trigger(); }, ref: primaryCallbackRef }, { children: menus.map(function (menu, index) { return ((0, jsx_runtime_1.jsx)(MenuItemNav_1.MenuItemNav, { menu: menu, showMenuAsIcon: showMenuAsIcon }, index)); }) })), isOverflow && !isScrollBoxEnd && ((0, jsx_runtime_1.jsx)(S_RightButtonWrapper, { children: (0, jsx_runtime_1.jsx)(S_ButtonWrapper, { children: (0, jsx_runtime_1.jsx)(__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_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"])));
+var S_Main_SecondaryMenu = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  grid-area: SECONDARY_MENU;\n  overflow-x: auto;\n  overscroll-behavior-y: none;\n  width: max-content;\n\n  & > div:first-child {\n    margin-left: 32px;\n  }\n"], ["\n  display: flex;\n  grid-area: SECONDARY_MENU;\n  overflow-x: auto;\n  overscroll-behavior-y: none;\n  width: max-content;\n\n  & > div:first-child {\n    margin-left: 32px;\n  }\n"])));
+var S_SecondaryMenu = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  height: 48px;\n  max-height: 100%;\n  max-width: 100%;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  position: relative;\n  width: 100%;\n"], ["\n  display: flex;\n  height: 48px;\n  max-height: 100%;\n  max-width: 100%;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  position: relative;\n  width: 100%;\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, ".concat(theme.ui_menu_background, " 10%, ").concat(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, ".concat(theme.ui_menu_background, " 20%, ").concat(theme.ui_cpnt_pg_gradient_02, " 80%)");
+});
+var S_ButtonWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  height: 50px;\n\n  & > button {\n    background-color: ", ";\n\n    * path {\n      stroke: ", ";\n    }\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  height: 50px;\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_button_base;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_temp_grey_02;
+});
 exports.default = SecondaryMenu;
-var templateObject_1;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -237,7 +237,6 @@ declare class DynamicDesktopNavBarTemplates {
             style: {
                 width: string;
                 justifyContent: string;
-                paddingLeft: string;
             };
         };
         userProfileOptions: {

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

@@ -243,7 +243,6 @@ export declare const TEMPLATES_DATA: {
             style: {
                 width: string;
                 justifyContent: string;
-                paddingLeft: string;
             };
         };
         userProfileOptions: {

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

@@ -74,7 +74,7 @@ exports.TEMPLATES_DATA = {
         showSecondaryMenu: false,
         primaryMenuOptions: {
             showMenuAsIcon: false,
-            maxLength: 5,
+            maxLength: 99,
             style: {
                 justifyContent: 'flex-end'
             }
@@ -188,7 +188,7 @@ exports.TEMPLATES_DATA = {
         showSecondaryMenu: false,
         primaryMenuOptions: {
             showMenuAsIcon: false,
-            maxLength: 5,
+            maxLength: 99,
             style: {
                 justifyContent: 'flex-end'
             }
@@ -235,18 +235,17 @@ exports.TEMPLATES_DATA = {
         showSecondaryMenu: true,
         primaryMenuOptions: {
             showMenuAsIcon: false,
-            maxLength: 3,
+            maxLength: 99,
             style: {
                 justifyContent: 'right'
             }
         },
         secondaryMenuOptions: {
             showMenuAsIcon: false,
-            maxLength: 2,
+            maxLength: 99,
             style: {
                 width: '100%',
-                justifyContent: 'left',
-                paddingLeft: '32px'
+                justifyContent: 'left'
             }
         },
         userProfileOptions: {

package/dist/src/mobile/components/BasicListItem/RightBox/MainButton.js

@@ -1,10 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var components_1 = require("../../../../hybrid/components");
 var MainButton_1 = require("../../MainButton");
 var MainButton = function (_a) {
     var text = _a.text, state = _a.state, fill = _a.fill, onClick = _a.onClick;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MainButton_1.MainButton, { text: text, state: state, fillType: fill ? 'fill' : 'line', size: "small", onClick: onClick }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_c", spacingType: "width" })] }));
+    return ((0, jsx_runtime_1.jsx)(MainButton_1.MainButton, { text: text, state: state, fillType: fill ? 'fill' : 'line', size: "small", onClick: onClick }));
 };
 exports.default = MainButton;

package/dist/src/mobile/components/BasicListItem/RightBox/Switch.js

@@ -12,7 +12,7 @@ var components_1 = require("../../../../hybrid/components");
 var styled_components_1 = __importDefault(require("styled-components"));
 var Switch = function (_a) {
     var name = _a.name, state = _a.state, status = _a.status, onClick = _a.onClick;
-    return ((0, jsx_runtime_1.jsxs)(S_SwitchWrapper, { children: [(0, jsx_runtime_1.jsx)(components_1.Switch, { name: name, state: state, status: status, onClick: onClick }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_c", spacingType: "width" })] }));
+    return ((0, jsx_runtime_1.jsx)(S_SwitchWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.Switch, { name: name, state: state, status: status, onClick: onClick }) }));
 };
 var S_SwitchWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  min-height: 32px;\n  min-width: 68px;\n  position: relative;\n  right: 0;\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  min-height: 32px;\n  min-width: 68px;\n  position: relative;\n  right: 0;\n"])));
 exports.default = Switch;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web",
-  "version": "2.2.55",
+  "version": "2.2.57",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/release-note.md

@@ -1,7 +1,7 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.55]
-## urgent|https://design.storybook.publ.biz/
+## [v2.2.57]
+## daily|https://design.storybook.publ.biz/
 
-### sub
-    * DynamicLayout
-        * 컨텍스트 클릭 시 스스로를 클릭하면 GROUP_BREAK를 호출하지 않도록 추가
+### Component
+    * BasicListItem
+        * MainButton과 Switch 우측의 스페이싱 제거