pds-dev-kit-web-test 2.6.1 → 2.6.3

package/dist/src/desktop/panels/ContentSheet/ContentSheet.js

@@ -39,6 +39,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
 var styled_components_1 = __importStar(require("styled-components"));
 var styles_1 = require("../../../common/styles");
 var backgroundColorTheme = {
@@ -71,7 +72,7 @@ var paddingSpacing = {
     spacing_n: 'spacingN'
 };
 function ContentSheet(_a) {
-    var width = _a.width, height = _a.height, _b = _a.backgroundColorTheme, backgroundColorTheme = _b === void 0 ? 'base3' : _b, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, _c = _a.borderMode, borderMode = _c === void 0 ? 'none' : _c, _d = _a.borderWidth, borderWidth = _d === void 0 ? 1 : _d, _e = _a.borderColorTheme, borderColorTheme = _e === void 0 ? 'grey' : _e, overrideBorderColorKey = _a.overrideBorderColorKey, _f = _a.shapeType, shapeType = _f === void 0 ? 'rectangle' : _f, _g = _a.radius, radius = _g === void 0 ? 24 : _g, _h = _a.paddingTop, paddingTop = _h === void 0 ? 'spacing_e' : _h, _j = _a.paddingRight, paddingRight = _j === void 0 ? 'spacing_e' : _j, _k = _a.paddingBottom, paddingBottom = _k === void 0 ? 'spacing_e' : _k, _l = _a.paddingLeft, paddingLeft = _l === void 0 ? 'spacing_e' : _l, overrideCSS = _a.overrideCSS, children = _a.children, loadingWidth = _a.loadingWidth, loadingHeight = _a.loadingHeight, isLoading = _a.isLoading, onClick = _a.onClick;
+    var width = _a.width, height = _a.height, _b = _a.backgroundColorTheme, backgroundColorTheme = _b === void 0 ? 'base3' : _b, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, _c = _a.borderMode, borderMode = _c === void 0 ? 'none' : _c, _d = _a.borderWidth, borderWidth = _d === void 0 ? 1 : _d, _e = _a.borderColorTheme, borderColorTheme = _e === void 0 ? 'grey' : _e, overrideBorderColorKey = _a.overrideBorderColorKey, _f = _a.shapeType, shapeType = _f === void 0 ? 'rectangle' : _f, _g = _a.radius, radius = _g === void 0 ? 24 : _g, _h = _a.paddingTop, paddingTop = _h === void 0 ? 'spacing_e' : _h, _j = _a.paddingRight, paddingRight = _j === void 0 ? 'spacing_e' : _j, _k = _a.paddingBottom, paddingBottom = _k === void 0 ? 'spacing_e' : _k, _l = _a.paddingLeft, paddingLeft = _l === void 0 ? 'spacing_e' : _l, overrideCSS = _a.overrideCSS, children = _a.children, loadingWidth = _a.loadingWidth, loadingHeight = _a.loadingHeight, isLoading = _a.isLoading, _m = _a.scrollVisibleType, scrollVisibleType = _m === void 0 ? 'visible' : _m, onClick = _a.onClick;
     var handleClick = function (e) {
         if (onClick) {
             onClick(e);
@@ -81,7 +82,7 @@ function ContentSheet(_a) {
         if (isLoading) {
             return ((0, jsx_runtime_1.jsx)(S_LoadingContentSheet, { "$width": width !== null && width !== void 0 ? width : loadingWidth, "$height": height !== null && height !== void 0 ? height : loadingHeight, shapeType: shapeType, "$radius": radius }));
         }
-        return ((0, jsx_runtime_1.jsx)(S_ContentSheet, __assign({ "x-pds-name": "ContentSheet", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick, hasOnClick: !!onClick }, { children: children })));
+        return ((0, jsx_runtime_1.jsx)(S_ContentSheet, __assign({ "x-pds-name": "ContentSheet", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick, hasOnClick: !!onClick, scrollVisibleType: scrollVisibleType }, { children: children })));
     };
     return ContentSheetVariation();
 }
@@ -112,7 +113,7 @@ var overrideStyle = (0, styled_components_1.css)(templateObject_6 || (templateOb
     var theme = _a.theme, overrideBorderColorKey = _a.overrideBorderColorKey;
     return overrideBorderColorKey && theme[overrideBorderColorKey];
 });
-var S_ContentSheet = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  border-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  box-sizing: border-box;\n  cursor: ", ";\n  height: ", ";\n  width: ", ";\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  box-sizing: border-box;\n  cursor: ", ";\n  height: ", ";\n  width: ", ";\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
+var S_ContentSheet = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  border-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  box-sizing: border-box;\n  cursor: ", ";\n  height: ", ";\n  overflow-y: auto;\n  width: ", ";\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  box-sizing: border-box;\n  cursor: ", ";\n  height: ", ";\n  overflow-y: auto;\n  width: ", ";\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme, $backgroundColorTheme = _a.$backgroundColorTheme;
     return $backgroundColorTheme && theme[backgroundColorTheme[$backgroundColorTheme]];
 }, function (_a) {
@@ -148,6 +149,13 @@ var S_ContentSheet = styled_components_1.default.div(templateObject_7 || (templa
 }, function (_a) {
     var paddingLeft = _a.paddingLeft;
     return paddingLeft !== 'none' && paddingLeftStyle;
+}, function (_a) {
+    var scrollVisibleType = _a.scrollVisibleType;
+    return scrollVisibleType &&
+        {
+            visible: scrollbarStyle_1.scrollbarStyle,
+            hidden: scrollbarStyle_1.scrollInvisible
+        }[scrollVisibleType];
 }, overrideStyle);
 var S_LoadingContentSheet = (0, styled_components_1.default)(S_ContentSheet)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.skeletonLoadingStyle);
 exports.default = ContentSheet;

package/dist/src/desktop/panels/MultilingualModal/MultilingualModal.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ScrollVisibleType } from '../../../common/styles/scroll/scrollbarStyle';
+import type { MultilingualConfig } from '../../../common/types';
+type MultilingualModalModalProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    config?: MultilingualConfig;
+    size?: 'large' | 'medium' | 'small' | 'rlarge';
+    onHiddenInputUpdate?: (newValue: string) => void;
+    scrollVisibleType?: ScrollVisibleType;
+};
+declare function MultilingualModal({ isOpen, onClose, config, size, onHiddenInputUpdate, scrollVisibleType }: MultilingualModalModalProps): import("react").ReactPortal | null;
+export default MultilingualModal;

package/dist/src/desktop/panels/MultilingualModal/MultilingualModal.js

@@ -0,0 +1,206 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_dom_1 = __importDefault(require("react-dom"));
+var react_hook_form_1 = require("react-hook-form");
+var react_i18next_1 = require("react-i18next");
+var animationStyle_1 = require("../../../common/styles/movement/animationStyle");
+var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
+var components_1 = require("../../components");
+var components_2 = require("../../../hybrid/components");
+var styled_components_1 = __importDefault(require("styled-components"));
+var LANGUAGE_I18N_KEYS = {
+    en: 'str_multilingual_en',
+    ko: 'str_multilingual_ko',
+    ja: 'str_multilingual_ja',
+    zh: 'str_multilingual_zh_cn',
+    'zh-Hant': 'str_multilingual_zh_tw',
+    fr: 'str_multilingual_fr',
+    es: 'str_multilingual_es'
+};
+function MultilingualModal(_a) {
+    var _b, _c;
+    var isOpen = _a.isOpen, onClose = _a.onClose, config = _a.config, _d = _a.size, size = _d === void 0 ? 'medium' : _d, onHiddenInputUpdate = _a.onHiddenInputUpdate, _e = _a.scrollVisibleType, scrollVisibleType = _e === void 0 ? 'visible' : _e;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var allLangInReadonly = (_b = config === null || config === void 0 ? void 0 : config.visibleLanguages) === null || _b === void 0 ? void 0 : _b.every(function (item) { var _a; return (_a = config === null || config === void 0 ? void 0 : config.readonlyLanguages) === null || _a === void 0 ? void 0 : _a.includes(item); });
+    // FormProvider에서 사용할 기본값 계산
+    var getDefaultValues = function () {
+        if (!config)
+            return {};
+        // 먼저 hiddenInput에 저장된 값이 있는지 확인
+        if (config.hiddenInputId) {
+            var hiddenInputId = "hiddenInput_".concat(config.hiddenInputId);
+            var hiddenInput = document.getElementById(hiddenInputId);
+            if (hiddenInput && hiddenInput.value) {
+                var existingValues = JSON.parse(hiddenInput.value);
+                // 빈 객체가 아닌 경우에만 사용
+                if (Object.keys(existingValues).length > 0) {
+                    return existingValues;
+                }
+            }
+        }
+        // hiddenInput에 값이 없으면 config.initialValues 사용
+        return config.initialValues || {};
+    };
+    var methods = (0, react_hook_form_1.useForm)({
+        defaultValues: getDefaultValues()
+    });
+    var container = (0, react_1.useState)(function () {
+        var modalRoot = document.createElement('div');
+        modalRoot.setAttribute('id', 'MultilingualModal');
+        return modalRoot;
+    })[0];
+    (0, react_1.useLayoutEffect)(function () {
+        if (!isOpen)
+            return;
+        var root = document.getElementById('root');
+        if (!root)
+            return;
+        root.appendChild(container);
+        return function () {
+            if (root.contains(container)) {
+                root.removeChild(container);
+            }
+        };
+    }, [isOpen, container]);
+    (0, react_1.useLayoutEffect)(function () {
+        if (isOpen && config) {
+            var newDefaultValues = getDefaultValues();
+            methods.reset(newDefaultValues);
+        }
+    }, [isOpen, config]);
+    var handleConfirm = function () {
+        var formValues = methods.getValues();
+        // hidden input에 다국어 값들을 JSON 형태로 저장
+        var newValue = JSON.stringify(formValues);
+        if (config === null || config === void 0 ? void 0 : config.hiddenInputId) {
+            var hiddenInputId = "hiddenInput_".concat(config.hiddenInputId);
+            var hiddenInput = document.getElementById(hiddenInputId);
+            if (hiddenInput) {
+                // BasicFormGroup의 state 업데이트
+                if (onHiddenInputUpdate) {
+                    onHiddenInputUpdate(newValue);
+                }
+                // input change 이벤트 발생시켜서 form validation 등이 동작하도록 함
+                var event_1 = new Event('change', { bubbles: true });
+                hiddenInput.dispatchEvent(event_1);
+            }
+        }
+        if (config === null || config === void 0 ? void 0 : config.onApply) {
+            config.onApply(formValues);
+        }
+        onClose();
+    };
+    var handleCancel = function () {
+        onClose();
+    };
+    if (!isOpen)
+        return null;
+    return react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)(react_hook_form_1.FormProvider, __assign({}, methods, { children: [(0, jsx_runtime_1.jsx)(S_ModalOverlay, { onClick: handleCancel }), (0, jsx_runtime_1.jsxs)(S_ModalWrapper, __assign({ "x-pds-name": "MultiLanguageModal", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", size: size }, { children: [(0, jsx_runtime_1.jsx)(S_Header, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: t('str_multilingual_settings'), colorTheme: "sysTextPrimary", styleTheme: "headingBold" }) }), (0, jsx_runtime_1.jsxs)(S_Body, __assign({ scrollVisibleType: scrollVisibleType }, { children: [(config === null || config === void 0 ? void 0 : config.originalText) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.BodyTextGroup, { titleText: t('str_original_text'), contentText: config.originalText }), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_f" }), (0, jsx_runtime_1.jsx)(components_2.Divider, {}), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_f" })] })), (_c = config === null || config === void 0 ? void 0 : config.visibleLanguages) === null || _c === void 0 ? void 0 : _c.map(function (languageCode, index) {
+                                var _a, _b;
+                                var isReadonly = (_a = config.readonlyLanguages) === null || _a === void 0 ? void 0 : _a.includes(languageCode);
+                                return ((0, jsx_runtime_1.jsxs)(S_LanguageField, { children: [(0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: "".concat(t(LANGUAGE_I18N_KEYS[languageCode])), styleTheme: "subTitleBold", colorTheme: "sysTextPrimary" }), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(components_1.TextField, { responsiveMode: "use", multiRows: config.textFieldLineType === 'multi' ? 5 : undefined, autoMaxRows: config.textFieldLineType === 'auto' ? 5 : undefined, autoMinRows: config.textFieldLineType === 'auto' ? 1 : undefined, name: languageCode, hintText: t('str_9071'), placeholder: "Input Text", textLineType: config.textFieldLineType, state: isReadonly ? 'disabled' : 'normal' }), index < (((_b = config.visibleLanguages) === null || _b === void 0 ? void 0 : _b.length) || 0) - 1 && (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_f" })] }, "".concat(languageCode, "_field")));
+                            })] })), (0, jsx_runtime_1.jsxs)(S_Footer, { children: [(0, jsx_runtime_1.jsx)(S_Left, {}), (0, jsx_runtime_1.jsxs)(S_Right, { children: [!allLangInReadonly && ((0, jsx_runtime_1.jsx)(S_Btn2Wrapper, { children: (0, jsx_runtime_1.jsx)(components_1.MainButton, { styleTheme: "secondary", text: t('str_cancel'), size: "medium", onClick: handleCancel }) })), (0, jsx_runtime_1.jsx)(components_1.MainButton, { text: allLangInReadonly ? t('str_confirm') : t('str_apply'), size: "medium", onClick: handleConfirm })] })] })] }))] })), container);
+}
+var S_ModalOverlay = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"], ["\n  background-color: ", ";\n  height: 100vh;\n  left: 0;\n  position: fixed;\n  top: 0;\n  width: 100vw;\n\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_modal_dimmed;
+}, animationStyle_1.modalOverlayOnAni);
+var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  left: 50%;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  left: 50%;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_modal_base;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_modal_border;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.boxShadow.elevation4;
+}, function (_a) {
+    var size = _a.size;
+    var sizes = {
+        large: '960px',
+        medium: '688px',
+        small: '400px',
+        rlarge: '80vw'
+    };
+    return size && sizes[size];
+}, animationStyle_1.modalOnAni);
+var S_Header = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingC;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+});
+var S_Body = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 1;\n  max-height: 60vh;\n  overflow: auto;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n\n  ", "\n"], ["\n  flex: 1;\n  max-height: 60vh;\n  overflow: auto;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingF;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+}, function (_a) {
+    var scrollVisibleType = _a.scrollVisibleType;
+    return ({
+        visible: scrollbarStyle_1.scrollbarStyle,
+        hidden: scrollbarStyle_1.scrollInvisible
+    }[scrollVisibleType]);
+});
+var S_Footer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border-top: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  border-top: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_modal_border;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+});
+var S_Left = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+});
+var S_Btn2Wrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+});
+var S_Right = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var S_LanguageField = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
+exports.default = MultilingualModal;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

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

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

package/dist/src/desktop/panels/{LocalizedContentModal → MultilingualModal}/index.js

@@ -4,5 +4,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
-var LocalizedContentModal_1 = require("./LocalizedContentModal");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(LocalizedContentModal_1).default; } });
+var MultilingualModal_1 = require("./MultilingualModal");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(MultilingualModal_1).default; } });

package/dist/src/desktop/panels/SectionSheet/SectionSheet.d.ts

@@ -1,4 +1,5 @@
 import type { UiColors } from '../../../common';
+import type { ScrollVisibleType } from '../../../common/styles/scroll/scrollbarStyle';
 import type { CSSProperties } from 'react';
 type PaddingSpacingType = 'none' | keyof typeof paddingSpacing;
 export type SectionSheetProps = {
@@ -18,6 +19,7 @@ export type SectionSheetProps = {
     paddingLeft?: PaddingSpacingType;
     overrideCSS?: CSSProperties;
     children: React.ReactNode;
+    scrollVisibleType?: ScrollVisibleType;
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 };
 export type StyleProps = {
@@ -36,6 +38,7 @@ export type StyleProps = {
     paddingBottom?: PaddingSpacingType;
     paddingLeft?: PaddingSpacingType;
     hasOnClick?: boolean;
+    scrollVisibleType?: ScrollVisibleType;
 };
 declare const paddingSpacing: {
     readonly spacing_a: "spacingA";
@@ -53,5 +56,5 @@ declare const paddingSpacing: {
     readonly spacing_m: "spacingM";
     readonly spacing_n: "spacingN";
 };
-declare function SectionSheet({ width, height, backgroundColorTheme, overrideBackgroundColorKey, borderMode, borderWidth, borderColorTheme, overrideBorderColorKey, shapeType, radius, paddingTop, paddingRight, paddingBottom, paddingLeft, overrideCSS, children, onClick }: SectionSheetProps): JSX.Element;
+declare function SectionSheet({ width, height, backgroundColorTheme, overrideBackgroundColorKey, borderMode, borderWidth, borderColorTheme, overrideBorderColorKey, shapeType, radius, paddingTop, paddingRight, paddingBottom, paddingLeft, overrideCSS, children, scrollVisibleType, onClick }: SectionSheetProps): JSX.Element;
 export default SectionSheet;

package/dist/src/desktop/panels/SectionSheet/SectionSheet.js

@@ -39,6 +39,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
 var styled_components_1 = __importStar(require("styled-components"));
 var backgroundColorTheme = {
     transparent: 'ui_cpnt_sheet_base_03',
@@ -70,13 +71,13 @@ var paddingSpacing = {
     spacing_n: 'spacingN'
 };
 function SectionSheet(_a) {
-    var width = _a.width, height = _a.height, _b = _a.backgroundColorTheme, backgroundColorTheme = _b === void 0 ? 'transparent' : _b, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, _c = _a.borderMode, borderMode = _c === void 0 ? 'none' : _c, _d = _a.borderWidth, borderWidth = _d === void 0 ? 1 : _d, _e = _a.borderColorTheme, borderColorTheme = _e === void 0 ? 'grey' : _e, overrideBorderColorKey = _a.overrideBorderColorKey, _f = _a.shapeType, shapeType = _f === void 0 ? 'rectangle' : _f, _g = _a.radius, radius = _g === void 0 ? 24 : _g, _h = _a.paddingTop, paddingTop = _h === void 0 ? 'spacing_e' : _h, _j = _a.paddingRight, paddingRight = _j === void 0 ? 'spacing_e' : _j, _k = _a.paddingBottom, paddingBottom = _k === void 0 ? 'spacing_e' : _k, _l = _a.paddingLeft, paddingLeft = _l === void 0 ? 'spacing_e' : _l, overrideCSS = _a.overrideCSS, children = _a.children, onClick = _a.onClick;
+    var width = _a.width, height = _a.height, _b = _a.backgroundColorTheme, backgroundColorTheme = _b === void 0 ? 'transparent' : _b, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, _c = _a.borderMode, borderMode = _c === void 0 ? 'none' : _c, _d = _a.borderWidth, borderWidth = _d === void 0 ? 1 : _d, _e = _a.borderColorTheme, borderColorTheme = _e === void 0 ? 'grey' : _e, overrideBorderColorKey = _a.overrideBorderColorKey, _f = _a.shapeType, shapeType = _f === void 0 ? 'rectangle' : _f, _g = _a.radius, radius = _g === void 0 ? 24 : _g, _h = _a.paddingTop, paddingTop = _h === void 0 ? 'spacing_e' : _h, _j = _a.paddingRight, paddingRight = _j === void 0 ? 'spacing_e' : _j, _k = _a.paddingBottom, paddingBottom = _k === void 0 ? 'spacing_e' : _k, _l = _a.paddingLeft, paddingLeft = _l === void 0 ? 'spacing_e' : _l, overrideCSS = _a.overrideCSS, children = _a.children, _m = _a.scrollVisibleType, scrollVisibleType = _m === void 0 ? 'visible' : _m, onClick = _a.onClick;
     var handleClick = function (e) {
         if (onClick) {
             onClick(e);
         }
     };
-    return ((0, jsx_runtime_1.jsx)(S_SectionSheet, __assign({ "x-pds-name": "SectionSheet", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick, hasOnClick: !!onClick }, { children: children })));
+    return ((0, jsx_runtime_1.jsx)(S_SectionSheet, __assign({ "x-pds-name": "SectionSheet", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick, hasOnClick: !!onClick, scrollVisibleType: scrollVisibleType }, { children: children })));
 }
 var radiusStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), function (_a) {
     var $radius = _a.$radius;
@@ -105,7 +106,7 @@ var advancedCSS = (0, styled_components_1.css)(templateObject_6 || (templateObje
     var theme = _a.theme, overrideBorderColorKey = _a.overrideBorderColorKey;
     return overrideBorderColorKey && theme[overrideBorderColorKey];
 });
-var S_SectionSheet = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  border-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  box-sizing: border-box;\n  cursor: ", ";\n  height: ", ";\n  width: ", ";\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  box-sizing: border-box;\n  cursor: ", ";\n  height: ", ";\n  width: ", ";\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
+var S_SectionSheet = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  border-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  box-sizing: border-box;\n  cursor: ", ";\n  height: ", ";\n  overflow-y: auto;\n  width: ", ";\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  box-sizing: border-box;\n  cursor: ", ";\n  height: ", ";\n  overflow-y: auto;\n  width: ", ";\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme, $backgroundColorTheme = _a.$backgroundColorTheme;
     return $backgroundColorTheme && theme[backgroundColorTheme[$backgroundColorTheme]];
 }, function (_a) {
@@ -141,6 +142,13 @@ var S_SectionSheet = styled_components_1.default.div(templateObject_7 || (templa
 }, function (_a) {
     var paddingLeft = _a.paddingLeft;
     return paddingLeft !== 'none' && paddingLeftStyle;
+}, function (_a) {
+    var scrollVisibleType = _a.scrollVisibleType;
+    return scrollVisibleType &&
+        {
+            visible: scrollbarStyle_1.scrollbarStyle,
+            hidden: scrollbarStyle_1.scrollInvisible
+        }[scrollVisibleType];
 }, advancedCSS);
 exports.default = SectionSheet;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

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

@@ -4,8 +4,8 @@ import { DesktopBasicModal } from './DesktopBasicModal';
 import { DesktopBasicModalWithTab, DesktopBasicModalWithTabInfoType } from './DesktopBasicModalWithTab';
 import { DesktopHeadlessModal } from './DesktopHeadlessModal';
 import { DesktopTutorialModal, DesktopTutorialModalInfoType } from './DesktopTutorialModal';
-import LocalizedContentModal from './LocalizedContentModal';
+import MultilingualModal from './MultilingualModal';
 import { SectionSheet } from './SectionSheet';
-export { AnnotationSheet, ContentSheet, DesktopBasicModal, DesktopBasicModalWithTab, DesktopHeadlessModal, DesktopTutorialModal, LocalizedContentModal, SectionSheet };
+export { AnnotationSheet, ContentSheet, DesktopBasicModal, DesktopBasicModalWithTab, DesktopHeadlessModal, DesktopTutorialModal, MultilingualModal, SectionSheet };
 export { DesktopBasicModalWithTabInfoType };
 export { DesktopTutorialModalInfoType };

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SectionSheet = exports.LocalizedContentModal = exports.DesktopTutorialModal = exports.DesktopHeadlessModal = exports.DesktopBasicModalWithTab = exports.DesktopBasicModal = exports.ContentSheet = exports.AnnotationSheet = void 0;
+exports.SectionSheet = exports.MultilingualModal = exports.DesktopTutorialModal = exports.DesktopHeadlessModal = exports.DesktopBasicModalWithTab = exports.DesktopBasicModal = exports.ContentSheet = exports.AnnotationSheet = void 0;
 var AnnotationSheet_1 = require("./AnnotationSheet");
 Object.defineProperty(exports, "AnnotationSheet", { enumerable: true, get: function () { return AnnotationSheet_1.AnnotationSheet; } });
 var ContentSheet_1 = require("./ContentSheet");
@@ -16,7 +16,7 @@ var DesktopHeadlessModal_1 = require("./DesktopHeadlessModal");
 Object.defineProperty(exports, "DesktopHeadlessModal", { enumerable: true, get: function () { return DesktopHeadlessModal_1.DesktopHeadlessModal; } });
 var DesktopTutorialModal_1 = require("./DesktopTutorialModal");
 Object.defineProperty(exports, "DesktopTutorialModal", { enumerable: true, get: function () { return DesktopTutorialModal_1.DesktopTutorialModal; } });
-var LocalizedContentModal_1 = __importDefault(require("./LocalizedContentModal"));
-exports.LocalizedContentModal = LocalizedContentModal_1.default;
+var MultilingualModal_1 = __importDefault(require("./MultilingualModal"));
+exports.MultilingualModal = MultilingualModal_1.default;
 var SectionSheet_1 = require("./SectionSheet");
 Object.defineProperty(exports, "SectionSheet", { enumerable: true, get: function () { return SectionSheet_1.SectionSheet; } });

package/dist/src/mobile/panels/ContentSheet/ContentSheet.d.ts

@@ -1,4 +1,5 @@
 import type { UiColors } from '../../../common';
+import type { ScrollVisibleType } from '../../../common/styles/scroll/scrollbarStyle';
 import type react from 'react';
 type PaddingSpacingType = 'none' | keyof typeof paddingSpacing;
 export type ContentSheetProps = {
@@ -21,6 +22,7 @@ export type ContentSheetProps = {
     loadingWidth?: string;
     loadingHeight?: string;
     isLoading?: boolean;
+    scrollVisibleType?: ScrollVisibleType;
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 };
 export type StyleProps = {
@@ -38,6 +40,7 @@ export type StyleProps = {
     paddingRight?: PaddingSpacingType;
     paddingBottom?: PaddingSpacingType;
     paddingLeft?: PaddingSpacingType;
+    scrollVisibleType?: ScrollVisibleType;
 };
 declare const paddingSpacing: {
     readonly spacing_a: "spacingA";
@@ -55,5 +58,5 @@ declare const paddingSpacing: {
     readonly spacing_m: "spacingM";
     readonly spacing_n: "spacingN";
 };
-declare function ContentSheet({ width, height, backgroundColorTheme, overrideBackgroundColorKey, borderMode, borderWidth, borderColorTheme, overrideBorderColorKey, shapeType, radius, paddingTop, paddingRight, paddingBottom, paddingLeft, overrideCSS, children, loadingWidth, loadingHeight, isLoading, onClick }: ContentSheetProps): JSX.Element;
+declare function ContentSheet({ width, height, backgroundColorTheme, overrideBackgroundColorKey, borderMode, borderWidth, borderColorTheme, overrideBorderColorKey, shapeType, radius, paddingTop, paddingRight, paddingBottom, paddingLeft, overrideCSS, children, loadingWidth, loadingHeight, isLoading, scrollVisibleType, onClick }: ContentSheetProps): JSX.Element;
 export default ContentSheet;

package/dist/src/mobile/panels/ContentSheet/ContentSheet.js

@@ -39,6 +39,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
 var styled_components_1 = __importStar(require("styled-components"));
 var styles_1 = require("../../../common/styles");
 var backgroundColorTheme = {
@@ -71,7 +72,7 @@ var paddingSpacing = {
     spacing_n: 'spacingN'
 };
 function ContentSheet(_a) {
-    var width = _a.width, height = _a.height, _b = _a.backgroundColorTheme, backgroundColorTheme = _b === void 0 ? 'base3' : _b, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, _c = _a.borderMode, borderMode = _c === void 0 ? 'none' : _c, _d = _a.borderWidth, borderWidth = _d === void 0 ? 1 : _d, _e = _a.borderColorTheme, borderColorTheme = _e === void 0 ? 'grey' : _e, overrideBorderColorKey = _a.overrideBorderColorKey, _f = _a.shapeType, shapeType = _f === void 0 ? 'rectangle' : _f, _g = _a.radius, radius = _g === void 0 ? 24 : _g, _h = _a.paddingTop, paddingTop = _h === void 0 ? 'spacing_e' : _h, _j = _a.paddingRight, paddingRight = _j === void 0 ? 'spacing_e' : _j, _k = _a.paddingBottom, paddingBottom = _k === void 0 ? 'spacing_e' : _k, _l = _a.paddingLeft, paddingLeft = _l === void 0 ? 'spacing_e' : _l, overrideCSS = _a.overrideCSS, children = _a.children, loadingWidth = _a.loadingWidth, loadingHeight = _a.loadingHeight, isLoading = _a.isLoading, onClick = _a.onClick;
+    var width = _a.width, height = _a.height, _b = _a.backgroundColorTheme, backgroundColorTheme = _b === void 0 ? 'base3' : _b, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, _c = _a.borderMode, borderMode = _c === void 0 ? 'none' : _c, _d = _a.borderWidth, borderWidth = _d === void 0 ? 1 : _d, _e = _a.borderColorTheme, borderColorTheme = _e === void 0 ? 'grey' : _e, overrideBorderColorKey = _a.overrideBorderColorKey, _f = _a.shapeType, shapeType = _f === void 0 ? 'rectangle' : _f, _g = _a.radius, radius = _g === void 0 ? 24 : _g, _h = _a.paddingTop, paddingTop = _h === void 0 ? 'spacing_e' : _h, _j = _a.paddingRight, paddingRight = _j === void 0 ? 'spacing_e' : _j, _k = _a.paddingBottom, paddingBottom = _k === void 0 ? 'spacing_e' : _k, _l = _a.paddingLeft, paddingLeft = _l === void 0 ? 'spacing_e' : _l, overrideCSS = _a.overrideCSS, children = _a.children, loadingWidth = _a.loadingWidth, loadingHeight = _a.loadingHeight, isLoading = _a.isLoading, _m = _a.scrollVisibleType, scrollVisibleType = _m === void 0 ? 'visible' : _m, onClick = _a.onClick;
     var handleClick = function (e) {
         if (onClick) {
             onClick(e);
@@ -81,7 +82,7 @@ function ContentSheet(_a) {
         if (isLoading) {
             return ((0, jsx_runtime_1.jsx)(S_LoadingContentSheet, { "$width": width !== null && width !== void 0 ? width : loadingWidth, "$height": height !== null && height !== void 0 ? height : loadingHeight, shapeType: shapeType, "$radius": radius }));
         }
-        return ((0, jsx_runtime_1.jsx)(S_ContentSheet, __assign({ "x-pds-name": "ContentSheet", "x-pds-element-type": "panel", "x-pds-device-type": "mobile", "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick }, { children: children })));
+        return ((0, jsx_runtime_1.jsx)(S_ContentSheet, __assign({ "x-pds-name": "ContentSheet", "x-pds-element-type": "panel", "x-pds-device-type": "mobile", "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick, scrollVisibleType: scrollVisibleType }, { children: children })));
     };
     return ContentSheetVariation();
 }
@@ -112,7 +113,7 @@ var overrideStyle = (0, styled_components_1.css)(templateObject_6 || (templateOb
     var theme = _a.theme, overrideBorderColorKey = _a.overrideBorderColorKey;
     return overrideBorderColorKey && theme[overrideBorderColorKey];
 });
-var S_ContentSheet = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  border-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  box-sizing: border-box;\n  height: ", ";\n  width: ", ";\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  box-sizing: border-box;\n  height: ", ";\n  width: ", ";\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
+var S_ContentSheet = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  border-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  box-sizing: border-box;\n  height: ", ";\n  overflow-y: auto;\n  width: ", ";\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  box-sizing: border-box;\n  height: ", ";\n  overflow-y: auto;\n  width: ", ";\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme, $backgroundColorTheme = _a.$backgroundColorTheme;
     return $backgroundColorTheme && theme[backgroundColorTheme[$backgroundColorTheme]];
 }, function (_a) {
@@ -145,6 +146,13 @@ var S_ContentSheet = styled_components_1.default.div(templateObject_7 || (templa
 }, function (_a) {
     var paddingLeft = _a.paddingLeft;
     return paddingLeft !== 'none' && paddingLeftStyle;
+}, function (_a) {
+    var scrollVisibleType = _a.scrollVisibleType;
+    return scrollVisibleType &&
+        {
+            visible: scrollbarStyle_1.scrollbarStyle,
+            hidden: scrollbarStyle_1.scrollInvisible
+        }[scrollVisibleType];
 }, overrideStyle);
 var S_LoadingContentSheet = (0, styled_components_1.default)(S_ContentSheet)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.skeletonLoadingStyle);
 exports.default = ContentSheet;

package/dist/src/mobile/panels/SectionSheet/SectionSheet.d.ts

@@ -1,4 +1,5 @@
 import type { UiColors } from '../../../common';
+import type { ScrollVisibleType } from '../../../common/styles/scroll/scrollbarStyle';
 import type { CSSProperties } from 'react';
 type PaddingSpacingType = 'none' | keyof typeof paddingSpacing;
 export type SectionSheetProps = {
@@ -18,6 +19,7 @@ export type SectionSheetProps = {
     paddingLeft?: PaddingSpacingType;
     overrideCSS?: CSSProperties;
     children: React.ReactNode;
+    scrollVisibleType?: ScrollVisibleType;
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 };
 export type StyleProps = {
@@ -35,6 +37,7 @@ export type StyleProps = {
     paddingRight?: PaddingSpacingType;
     paddingBottom?: PaddingSpacingType;
     paddingLeft?: PaddingSpacingType;
+    scrollVisibleType?: ScrollVisibleType;
 };
 declare const paddingSpacing: {
     readonly spacing_a: "spacingA";
@@ -52,5 +55,5 @@ declare const paddingSpacing: {
     readonly spacing_m: "spacingM";
     readonly spacing_n: "spacingN";
 };
-declare function SectionSheet({ width, height, backgroundColorTheme, overrideBackgroundColorKey, borderMode, borderWidth, borderColorTheme, overrideBorderColorKey, shapeType, radius, paddingTop, paddingRight, paddingBottom, paddingLeft, overrideCSS, children, onClick }: SectionSheetProps): JSX.Element;
+declare function SectionSheet({ width, height, backgroundColorTheme, overrideBackgroundColorKey, borderMode, borderWidth, borderColorTheme, overrideBorderColorKey, shapeType, radius, paddingTop, paddingRight, paddingBottom, paddingLeft, overrideCSS, children, scrollVisibleType, onClick }: SectionSheetProps): JSX.Element;
 export default SectionSheet;

package/dist/src/mobile/panels/SectionSheet/SectionSheet.js

@@ -39,6 +39,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
 var styled_components_1 = __importStar(require("styled-components"));
 var backgroundColorTheme = {
     transparent: 'ui_cpnt_sheet_base_03',
@@ -70,13 +71,13 @@ var paddingSpacing = {
     spacing_n: 'spacingN'
 };
 function SectionSheet(_a) {
-    var width = _a.width, height = _a.height, _b = _a.backgroundColorTheme, backgroundColorTheme = _b === void 0 ? 'transparent' : _b, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, _c = _a.borderMode, borderMode = _c === void 0 ? 'none' : _c, _d = _a.borderWidth, borderWidth = _d === void 0 ? 1 : _d, _e = _a.borderColorTheme, borderColorTheme = _e === void 0 ? 'grey' : _e, overrideBorderColorKey = _a.overrideBorderColorKey, _f = _a.shapeType, shapeType = _f === void 0 ? 'rectangle' : _f, _g = _a.radius, radius = _g === void 0 ? 24 : _g, _h = _a.paddingTop, paddingTop = _h === void 0 ? 'spacing_e' : _h, _j = _a.paddingRight, paddingRight = _j === void 0 ? 'spacing_e' : _j, _k = _a.paddingBottom, paddingBottom = _k === void 0 ? 'spacing_e' : _k, _l = _a.paddingLeft, paddingLeft = _l === void 0 ? 'spacing_e' : _l, overrideCSS = _a.overrideCSS, children = _a.children, onClick = _a.onClick;
+    var width = _a.width, height = _a.height, _b = _a.backgroundColorTheme, backgroundColorTheme = _b === void 0 ? 'transparent' : _b, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, _c = _a.borderMode, borderMode = _c === void 0 ? 'none' : _c, _d = _a.borderWidth, borderWidth = _d === void 0 ? 1 : _d, _e = _a.borderColorTheme, borderColorTheme = _e === void 0 ? 'grey' : _e, overrideBorderColorKey = _a.overrideBorderColorKey, _f = _a.shapeType, shapeType = _f === void 0 ? 'rectangle' : _f, _g = _a.radius, radius = _g === void 0 ? 24 : _g, _h = _a.paddingTop, paddingTop = _h === void 0 ? 'spacing_e' : _h, _j = _a.paddingRight, paddingRight = _j === void 0 ? 'spacing_e' : _j, _k = _a.paddingBottom, paddingBottom = _k === void 0 ? 'spacing_e' : _k, _l = _a.paddingLeft, paddingLeft = _l === void 0 ? 'spacing_e' : _l, overrideCSS = _a.overrideCSS, children = _a.children, _m = _a.scrollVisibleType, scrollVisibleType = _m === void 0 ? 'visible' : _m, onClick = _a.onClick;
     var handleClick = function (e) {
         if (onClick) {
             onClick(e);
         }
     };
-    return ((0, jsx_runtime_1.jsx)(S_SectionSheet, __assign({ "x-pds-name": "SectionSheet", "x-pds-element-type": "panel", "x-pds-device-type": "mobile", "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick }, { children: children })));
+    return ((0, jsx_runtime_1.jsx)(S_SectionSheet, __assign({ "x-pds-name": "SectionSheet", "x-pds-element-type": "panel", "x-pds-device-type": "mobile", "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick, scrollVisibleType: scrollVisibleType }, { children: children })));
 }
 var radiusStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), function (_a) {
     var $radius = _a.$radius;
@@ -105,7 +106,7 @@ var advancedCSS = (0, styled_components_1.css)(templateObject_6 || (templateObje
     var theme = _a.theme, overrideBorderColorKey = _a.overrideBorderColorKey;
     return overrideBorderColorKey && theme[overrideBorderColorKey];
 });
-var S_SectionSheet = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  border-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  box-sizing: border-box;\n  height: ", ";\n  width: ", ";\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  box-sizing: border-box;\n  height: ", ";\n  width: ", ";\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
+var S_SectionSheet = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  border-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  box-sizing: border-box;\n  height: ", ";\n  overflow-y: auto;\n  width: ", ";\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  box-sizing: border-box;\n  height: ", ";\n  overflow-y: auto;\n  width: ", ";\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme, $backgroundColorTheme = _a.$backgroundColorTheme;
     return $backgroundColorTheme && theme[backgroundColorTheme[$backgroundColorTheme]];
 }, function (_a) {
@@ -138,6 +139,13 @@ var S_SectionSheet = styled_components_1.default.div(templateObject_7 || (templa
 }, function (_a) {
     var paddingLeft = _a.paddingLeft;
     return paddingLeft !== 'none' && paddingLeftStyle;
+}, function (_a) {
+    var scrollVisibleType = _a.scrollVisibleType;
+    return scrollVisibleType &&
+        {
+            visible: scrollbarStyle_1.scrollbarStyle,
+            hidden: scrollbarStyle_1.scrollInvisible
+        }[scrollVisibleType];
 }, advancedCSS);
 exports.default = SectionSheet;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.js

@@ -267,7 +267,9 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
                 return Array.from(set);
             });
             setSelectedBlockId(null);
-            var newBulkCBIds = bulks_1
+            var newBulkIdsSet = new Set(__spreadArray(__spreadArray([], bulkBlockIds, true), bulks_1, true));
+            var newBulkIdsArray = Array.from(newBulkIdsSet);
+            var newBulkCBIds = newBulkIdsArray
                 .map(function (id) { return (0, group_1.formatBlockIdToCbId)(id); })
                 .filter(function (each) { return each !== null; });
             var childrenCBIds = [];
@@ -278,7 +280,7 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
             else {
                 childrenCBIds = newBulkCBIds;
             }
-            var groupDisabled = getWorkDirDirectChildrenLength() === __spreadArray(__spreadArray([], bulkBlockIds, true), bulks_1, true).length;
+            var groupDisabled = getWorkDirDirectChildrenLength() === newBulkIdsArray.length;
             sectionActionHandler &&
                 sectionActionHandler({
                     type: '@CUSTOMSECTION/BLOCK_CLICKED',
@@ -286,7 +288,7 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
                         block: {
                             type: 'BULK',
                             blockId: 'BULK',
-                            childrenBlockIds: bulks_1,
+                            childrenBlockIds: newBulkIdsArray,
                             workDir: (_a = (0, group_1.getBlockWorkDirPath)(newblock, editingGroupBlock)) !== null && _a !== void 0 ? _a : 'NOT-FOUND',
                             childrenCBIds: childrenCBIds,
                             groupDisabled: groupDisabled && editingGroupBlock !== 'ROOT'

package/package.json

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