pds-dev-kit-web 2.2.284 → 2.2.286

package/dist/src/common/assets/icons/fill/Braces.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type IconType from '../IconType';
+declare const Braces: ({ color, size, ...rest }: IconType) => JSX.Element;
+export default Braces;

package/dist/src/common/assets/icons/fill/Braces.js

@@ -0,0 +1,30 @@
+"use strict";
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Braces = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: "none", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M9.2625,19.9285 L7.4585,19.9285 C6.2505,19.9285 5.2705,18.9485 5.2715,17.7395 L5.2735,15.6875 C5.2745,14.4405 4.6385,13.2785 3.5875,12.6075 L2.6375,11.9995 L3.5875,11.3925 C4.6385,10.7215 5.2745,9.5595 5.2735,8.3125 L5.2715,6.2605 C5.2705,5.0515 6.2505,4.0715 7.4585,4.0715 L9.2625,4.0715 M14.7375,19.9285 L16.5415,19.9285 C17.7495,19.9285 18.7295,18.9485 18.7285,17.7395 L18.7265,15.6875 C18.7255,14.4405 19.3615,13.2785 20.4125,12.6075 L21.3625,11.9995 L20.4125,11.3925 C19.3615,10.7215 18.7255,9.5595 18.7265,8.3125 L18.7285,6.2605 C18.7295,5.0515 17.7495,4.0715 16.5415,4.0715 L14.7375,4.0715" }) })));
+};
+exports.default = Braces;

package/dist/src/common/assets/icons/fill/index.d.ts

@@ -18,6 +18,7 @@ declare const fillIcons: {
     readonly ic_bell_off: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_bell_style: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_bookmark: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_braces: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_button: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_calendar: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_call: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;

package/dist/src/common/assets/icons/fill/index.js

@@ -21,6 +21,7 @@ var BellNotification_1 = __importDefault(require("./BellNotification"));
 var BellOff_1 = __importDefault(require("./BellOff"));
 var BellStyle_1 = __importDefault(require("./BellStyle"));
 var Bookmark_1 = __importDefault(require("./Bookmark"));
+var Braces_1 = __importDefault(require("./Braces"));
 var BringForward_1 = __importDefault(require("./BringForward"));
 var BringToFront_1 = __importDefault(require("./BringToFront"));
 var BringToFrontArrow_1 = __importDefault(require("./BringToFrontArrow"));
@@ -193,6 +194,7 @@ var fillIcons = {
     ic_bell_off: BellOff_1.default,
     ic_bell_style: BellStyle_1.default,
     ic_bookmark: Bookmark_1.default,
+    ic_braces: Braces_1.default,
     ic_button: Button_1.default,
     ic_calendar: Calendar_1.default,
     ic_call: Call_1.default,

package/dist/src/common/assets/icons/line/Braces.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type IconType from '../IconType';
+declare const Braces: ({ color, size, ...rest }: IconType) => JSX.Element;
+export default Braces;

package/dist/src/common/assets/icons/line/Braces.js

@@ -0,0 +1,30 @@
+"use strict";
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Braces = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("path", { fill: "none", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M9.2625,19.9285 L7.4585,19.9285 C6.2505,19.9285 5.2705,18.9485 5.2715,17.7395 L5.2735,15.6875 C5.2745,14.4405 4.6385,13.2785 3.5875,12.6075 L2.6375,11.9995 L3.5875,11.3925 C4.6385,10.7215 5.2745,9.5595 5.2735,8.3125 L5.2715,6.2605 C5.2705,5.0515 6.2505,4.0715 7.4585,4.0715 L9.2625,4.0715 M14.7375,19.9285 L16.5415,19.9285 C17.7495,19.9285 18.7295,18.9485 18.7285,17.7395 L18.7265,15.6875 C18.7255,14.4405 19.3615,13.2785 20.4125,12.6075 L21.3625,11.9995 L20.4125,11.3925 C19.3615,10.7215 18.7255,9.5595 18.7265,8.3125 L18.7285,6.2605 C18.7295,5.0515 17.7495,4.0715 16.5415,4.0715 L14.7375,4.0715" }) })));
+};
+exports.default = Braces;

package/dist/src/common/assets/icons/line/index.d.ts

@@ -35,6 +35,7 @@ declare const lineIcons: {
     readonly ic_booking_ticket: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_bookmark: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_box: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_braces: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_business: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_button: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_calendar: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;

package/dist/src/common/assets/icons/line/index.js

@@ -38,6 +38,7 @@ var BookingPapp_1 = __importDefault(require("./BookingPapp"));
 var BookingTicket_1 = __importDefault(require("./BookingTicket"));
 var Bookmark_1 = __importDefault(require("./Bookmark"));
 var Box_1 = __importDefault(require("./Box"));
+var Braces_1 = __importDefault(require("./Braces"));
 var BringForward_1 = __importDefault(require("./BringForward"));
 var BringToFront_1 = __importDefault(require("./BringToFront"));
 var BringToFrontArrow_1 = __importDefault(require("./BringToFrontArrow"));
@@ -371,6 +372,7 @@ var lineIcons = {
     ic_booking_ticket: BookingTicket_1.default,
     ic_bookmark: Bookmark_1.default,
     ic_box: Box_1.default,
+    ic_braces: Braces_1.default,
     ic_business: Business_1.default,
     ic_button: Button_1.default,
     ic_calendar: Calendar_1.default,

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

@@ -10,8 +10,10 @@ type MobileTabBarProps = {
     /** @description styleTheme이 'main'일 때만 colorTheme이 존재합니다. */
     colorTheme?: MobileTabBarColorThemeType;
     styleTheme?: 'main' | 'content';
+    /** @description 활성화 된 탭으로 자동 스크롤 되는 기능을 사용할지 여부입니다. 기본값: none */
+    autoScrollMode?: 'use' | 'none';
     /** @deprecated v1.5 해당 필드 대신 itemArray를 사용하세요. */
     textArray?: TextObj[];
 };
-declare function MobileTabBar({ itemArray, colorTheme, styleTheme, textArray }: MobileTabBarProps): JSX.Element;
+declare function MobileTabBar({ itemArray, colorTheme, styleTheme, autoScrollMode, textArray }: MobileTabBarProps): JSX.Element;
 export default MobileTabBar;

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

@@ -19,6 +19,7 @@ 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 react_router_dom_1 = require("react-router-dom");
 var styled_components_1 = __importDefault(require("styled-components"));
 var TextLabel_1 = require("../TextLabel");
@@ -39,9 +40,19 @@ var mobileTabBarThemes = {
     }
 };
 function MobileTabBar(_a) {
-    var itemArray = _a.itemArray, _b = _a.colorTheme, colorTheme = _b === void 0 ? 'none' : _b, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'main' : _c, textArray = _a.textArray;
+    var itemArray = _a.itemArray, _b = _a.colorTheme, colorTheme = _b === void 0 ? 'none' : _b, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'main' : _c, _d = _a.autoScrollMode, autoScrollMode = _d === void 0 ? 'none' : _d, textArray = _a.textArray;
     var history = (0, react_router_dom_1.useHistory)();
     var pathname = (0, react_router_dom_1.useLocation)().pathname;
+    var currentTabRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        var _a;
+        if (autoScrollMode === 'none')
+            return;
+        var anyActive = itemArray === null || itemArray === void 0 ? void 0 : itemArray.find(function (item) { return item.isActive; });
+        if (currentTabRef && anyActive) {
+            (_a = currentTabRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ inline: 'center' });
+        }
+    }, [itemArray]);
     if (itemArray) {
         var hasScroll_1 = styleTheme === 'content' ? true : itemArray.length > 3;
         var handleClickTabItem_1 = function (item, e) {
@@ -49,7 +60,7 @@ function MobileTabBar(_a) {
                 item.onClick(e);
             }
         };
-        return ((0, jsx_runtime_1.jsx)(S_TabBarContainer, __assign({ styleTheme: styleTheme }, { children: (0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "MobileTabBar", "x-pds-element-type": "component", "x-pds-device-type": "mobile", styleTheme: styleTheme, hasScroll: hasScroll_1 }, { children: itemArray.map(function (item, index) { return ((0, jsx_runtime_1.jsxs)(S_TabWrapper, __assign({ hasScroll: hasScroll_1, styleTheme: styleTheme, colorTheme: colorTheme, isActive: item.isActive, onClick: function (e) { return handleClickTabItem_1(item, e); } }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: styleTheme === 'main' ? 'body2Bold' : 'caption1Bold', wordBreak: hasScroll_1 ? 'keep_all' : 'normal', colorTheme: styleTheme === 'content'
+        return ((0, jsx_runtime_1.jsx)(S_TabBarContainer, __assign({ styleTheme: styleTheme }, { children: (0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "MobileTabBar", "x-pds-element-type": "component", "x-pds-device-type": "mobile", styleTheme: styleTheme, hasScroll: hasScroll_1 }, { children: itemArray.map(function (item, index) { return ((0, jsx_runtime_1.jsxs)(S_TabWrapper, __assign({ ref: item.isActive ? currentTabRef : null, hasScroll: hasScroll_1, styleTheme: styleTheme, colorTheme: colorTheme, isActive: item.isActive, onClick: function (e) { return handleClickTabItem_1(item, e); } }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: styleTheme === 'main' ? 'body2Bold' : 'caption1Bold', wordBreak: hasScroll_1 ? 'keep_all' : 'normal', colorTheme: styleTheme === 'content'
                                 ? item.isActive
                                     ? mobileTabBarThemes.content.activeTextColor
                                     : mobileTabBarThemes.content.inActiveTextColor

package/package.json

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

package/release-note.md

@@ -1,7 +1,7 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.284]
+## [v2.2.286]
 ## daily|https://design.storybook.publ.biz/
 
 ### 업데이트 사항
 
-* [PDS-1398] 리액션 버튼의 타입 변경
+* [PDS-1399] ic_braces fill, line 추가