pds-dev-kit-web 2.2.241 → 2.2.242

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

@@ -1,9 +1,11 @@
 /// <reference types="react" />
+import { ScrollVisibleType } from '../../../common/styles/scroll/scrollbarStyle';
 type ContextMenuProps = {
     children: React.ReactNode;
     autoWidthMode?: 'none' | 'use';
     maxHeight?: number;
     customWidth?: string;
+    scrollVisibleType?: ScrollVisibleType;
 };
-declare function ContextMenu({ children, autoWidthMode, maxHeight, customWidth }: ContextMenuProps): JSX.Element;
+declare function ContextMenu({ children, autoWidthMode, maxHeight, customWidth, scrollVisibleType }: ContextMenuProps): JSX.Element;
 export default ContextMenu;

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

@@ -14,17 +14,38 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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 jsx_runtime_1 = require("react/jsx-runtime");
-var styled_components_1 = __importDefault(require("styled-components"));
+var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
+var styled_components_1 = __importStar(require("styled-components"));
 function ContextMenu(_a) {
-    var children = _a.children, _b = _a.autoWidthMode, autoWidthMode = _b === void 0 ? 'none' : _b, maxHeight = _a.maxHeight, customWidth = _a.customWidth;
-    return ((0, jsx_runtime_1.jsx)(S_ContextMenu, __assign({ "x-pds-name": "ContextMenu", "x-pds-element-type": "component", "x-pds-device-type": "desktop", autoWidth: autoWidthMode === 'use', maxHeight: maxHeight, customWidth: customWidth }, { children: children })));
+    var children = _a.children, _b = _a.autoWidthMode, autoWidthMode = _b === void 0 ? 'none' : _b, maxHeight = _a.maxHeight, customWidth = _a.customWidth, scrollVisibleType = _a.scrollVisibleType;
+    return ((0, jsx_runtime_1.jsx)(S_ContextMenu, __assign({ "x-pds-name": "ContextMenu", "x-pds-element-type": "component", "x-pds-device-type": "desktop", autoWidth: autoWidthMode === 'use', maxHeight: maxHeight, customWidth: customWidth, scrollVisibleType: scrollVisibleType }, { children: children })));
 }
-var S_ContextMenu = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 14px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  list-style: none;\n  margin: 0;\n  max-height: ", ";\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  position: relative;\n  vertical-align: baseline;\n  width: ", ";\n\n  z-index: 400;\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 14px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  list-style: none;\n  margin: 0;\n  max-height: ", ";\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  position: relative;\n  vertical-align: baseline;\n  width: ", ";\n\n  z-index: 400;\n\n  ", "\n"])), function (_a) {
+var S_ContextMenu = styled_components_1.default.ul(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 14px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  list-style: none;\n  margin: 0;\n  max-height: ", ";\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  position: relative;\n  vertical-align: baseline;\n  width: ", ";\n\n  z-index: 400;\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 14px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  list-style: none;\n  margin: 0;\n  max-height: ", ";\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  position: relative;\n  vertical-align: baseline;\n  width: ", ";\n\n  z-index: 400;\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_contextmenu_base;
 }, function (_a) {
@@ -51,6 +72,16 @@ var S_ContextMenu = styled_components_1.default.ul(templateObject_1 || (template
 }, function (_a) {
     var customWidth = _a.customWidth;
     return customWidth && "width: ".concat(customWidth, ";min-width: ").concat(customWidth, ";");
+}, function (_a) {
+    var scrollVisibleType = _a.scrollVisibleType;
+    return scrollVisibleType &&
+        {
+            visible: scrollbarStyle_1.scrollbarStyle,
+            hidden: scrollbarStyle_1.scrollInvisible
+        }[scrollVisibleType];
+}, function (_a) {
+    var scrollVisibleType = _a.scrollVisibleType;
+    return scrollVisibleType === 'visible' && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      ::-webkit-scrollbar-track {\n        margin-bottom: 7px;\n        margin-top: 7px;\n      }\n    "], ["\n      ::-webkit-scrollbar-track {\n        margin-bottom: 7px;\n        margin-top: 7px;\n      }\n    "])));
 });
 exports.default = ContextMenu;
-var templateObject_1;
+var templateObject_1, templateObject_2;

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import type { PDSTextType } from '../../../common';
+import type { ScrollVisibleType } from '../../../common/styles/scroll/scrollbarStyle';
 import type { DropdownGroupInfo, DropdownValueOption } from '../../../common/types';
 type Props = {
     colorTheme?: 'none' | 'dark' | 'white';
@@ -15,7 +16,8 @@ type Props = {
     displayType?: 'text_only' | 'icon_only' | 'icon_text';
     fontWeight?: 'bold' | 'regular';
     groupInfoArray?: DropdownGroupInfo[];
+    scrollVisibleType?: ScrollVisibleType;
     onChange?: (option: DropdownValueOption) => void;
 };
-declare function Dropdown({ colorTheme, value, defaultValue, hintText, maxHeightItemNumber, responsiveMode, size, state, valueArray, customWidth, displayType, fontWeight, groupInfoArray, onChange }: Props): JSX.Element;
+declare function Dropdown({ colorTheme, value, defaultValue, hintText, maxHeightItemNumber, responsiveMode, size, state, valueArray, customWidth, displayType, fontWeight, groupInfoArray, scrollVisibleType, onChange }: Props): JSX.Element;
 export default Dropdown;

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

@@ -57,11 +57,11 @@ function Dropdown(_a) {
     // selectionMode = 'single',
     _e = _a.size, 
     // selectionMode = 'single',
-    size = _e === void 0 ? 'large' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, valueArray = _a.valueArray, customWidth = _a.customWidth, _g = _a.displayType, displayType = _g === void 0 ? 'text_only' : _g, _h = _a.fontWeight, fontWeight = _h === void 0 ? 'regular' : _h, groupInfoArray = _a.groupInfoArray, onChange = _a.onChange;
-    var _j = (0, react_1.useState)(false), isFocused = _j[0], setIsFocused = _j[1];
-    var _k = (0, react_1.useState)(null), selectedValue = _k[0], setSelectedValue = _k[1];
-    var _l = (0, react_1.useState)(null), contextMenuSizeOffset = _l[0], setContextMenuSizeOffset = _l[1];
-    var _m = (0, react_1.useState)(null), dropdownPositionOffset = _m[0], setDropdownPositionOffset = _m[1];
+    size = _e === void 0 ? 'large' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, valueArray = _a.valueArray, customWidth = _a.customWidth, _g = _a.displayType, displayType = _g === void 0 ? 'text_only' : _g, _h = _a.fontWeight, fontWeight = _h === void 0 ? 'regular' : _h, groupInfoArray = _a.groupInfoArray, _j = _a.scrollVisibleType, scrollVisibleType = _j === void 0 ? 'visible' : _j, onChange = _a.onChange;
+    var _k = (0, react_1.useState)(false), isFocused = _k[0], setIsFocused = _k[1];
+    var _l = (0, react_1.useState)(null), selectedValue = _l[0], setSelectedValue = _l[1];
+    var _m = (0, react_1.useState)(null), contextMenuSizeOffset = _m[0], setContextMenuSizeOffset = _m[1];
+    var _o = (0, react_1.useState)(null), dropdownPositionOffset = _o[0], setDropdownPositionOffset = _o[1];
     var contextMenuRef = (0, react_1.useRef)(null);
     var dropdownRef = (0, react_1.useRef)(null);
     /**
@@ -263,7 +263,7 @@ function Dropdown(_a) {
         });
     }
     return ((0, jsx_runtime_1.jsxs)(S_Dropdown, __assign({ "x-pds-name": "Dropdown", "x-pds-element-type": "component", "x-pds-device-type": "desktop", className: "container", ref: dropdownRef, size: size, tabIndex: 0, onBlur: handleBlur, responsiveMode: responsiveMode, customWidth: customWidth, displayType: displayType }, { children: [(0, jsx_runtime_1.jsxs)(S_Select, __assign({ size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode, customWidth: customWidth, displayType: displayType }, { children: [(0, jsx_runtime_1.jsxs)(S_TextLabel, __assign({ size: size, responsiveMode: responsiveMode, displayType: displayType }, { children: [(displayType === 'icon_only' || displayType === 'icon_text') && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.iconName) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: size === 'small' ? 20 : 24, iconName: selectedValue.iconName, fillType: selectedValue.iconFillType, colorKey: getIconColorKey() }), displayType === 'icon_text' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })), (displayType === 'text_only' || displayType === 'icon_text') && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) || (value === null || value === void 0 ? void 0 : value.text) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) || hintText, styleTheme: fontWeight === 'bold' ? 'form2Bold' : 'form2Regular', singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getTextColorOverride(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }))] })), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getArrowIconColorKey() })] })), isFocused &&
-                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_ContextMenuWrapper, __assign({ ref: contextMenuRef, contextMenuPositionCss: contextMenuPositionCss }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, __assign({ autoWidthMode: "use", maxHeight: maxHeight, customWidth: getCustomWidth() }, { children: groupInfoArray
+                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_ContextMenuWrapper, __assign({ ref: contextMenuRef, contextMenuPositionCss: contextMenuPositionCss }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, __assign({ autoWidthMode: "use", maxHeight: maxHeight, customWidth: getCustomWidth(), scrollVisibleType: scrollVisibleType }, { children: groupInfoArray
                             ? Object.keys(resultByGroup).map(function (key) {
                                 var _a, _b, _c;
                                 return ((0, jsx_runtime_1.jsxs)(S_Group, __assign({ size: size, hasGroupTitle: Boolean((_a = groupInfoArray.find(function (groupInfo) { return groupInfo.key === key; })) === null || _a === void 0 ? void 0 : _a.title) }, { children: [((_b = groupInfoArray.find(function (groupInfo) { return groupInfo.key === key; })) === null || _b === void 0 ? void 0 : _b.title) && ((0, jsx_runtime_1.jsx)(S_Wrapper, __assign({ size: size }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: (_c = groupInfoArray.find(function (groupInfo) { return groupInfo.key === key; })) === null || _c === void 0 ? void 0 : _c.title, colorTheme: "sysTextSecondary", styleTheme: "caption1Bold", letterSpacing: "0.15em" }) }))), resultByGroup[key].map(function (el) { return ((0, jsx_runtime_1.jsx)("div", __assign({ onMouseDown: function () { return handleClickOption(el); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, size: size, isSelected: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.value) === el.value, state: el.state, displayType: displayType }) }), el.value)); })] }), key));

package/dist/src/desktop/panels/ContentSheet/ContentSheet.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 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 = {
@@ -39,6 +41,7 @@ export type StyleProps = {
     paddingBottom?: PaddingSpacingType;
     paddingLeft?: PaddingSpacingType;
     hasOnClick?: boolean;
+    scrollVisibleType?: ScrollVisibleType;
 };
 declare const paddingSpacing: {
     readonly spacing_a: "spacingA";
@@ -56,5 +59,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/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.scrollbarWithPaddingStyle,
+            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/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/mobile/components/ContextMenu/ContextMenu.d.ts

@@ -1,9 +1,11 @@
 /// <reference types="react" />
+import { ScrollVisibleType } from '../../../common/styles/scroll/scrollbarStyle';
 type ContextMenuProps = {
     children: React.ReactNode;
     autoWidthMode?: 'none' | 'use';
     maxHeight?: number;
     customWidth?: string;
+    scrollVisibleType?: ScrollVisibleType;
 };
-declare function ContextMenu({ children, autoWidthMode, maxHeight, customWidth }: ContextMenuProps): JSX.Element;
+declare function ContextMenu({ children, autoWidthMode, maxHeight, customWidth, scrollVisibleType }: ContextMenuProps): JSX.Element;
 export default ContextMenu;

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

@@ -14,17 +14,38 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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 jsx_runtime_1 = require("react/jsx-runtime");
-var styled_components_1 = __importDefault(require("styled-components"));
+var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
+var styled_components_1 = __importStar(require("styled-components"));
 function ContextMenu(_a) {
-    var children = _a.children, _b = _a.autoWidthMode, autoWidthMode = _b === void 0 ? 'none' : _b, maxHeight = _a.maxHeight, customWidth = _a.customWidth;
-    return ((0, jsx_runtime_1.jsx)(S_ContextMenu, __assign({ "x-pds-name": "ContextMenu", "x-pds-element-type": "component", "x-pds-device-type": "mobile", autoWidth: autoWidthMode === 'use', maxHeight: maxHeight, customWidth: customWidth }, { children: children })));
+    var children = _a.children, _b = _a.autoWidthMode, autoWidthMode = _b === void 0 ? 'none' : _b, maxHeight = _a.maxHeight, customWidth = _a.customWidth, scrollVisibleType = _a.scrollVisibleType;
+    return ((0, jsx_runtime_1.jsx)(S_ContextMenu, __assign({ "x-pds-name": "ContextMenu", "x-pds-element-type": "component", "x-pds-device-type": "mobile", autoWidth: autoWidthMode === 'use', maxHeight: maxHeight, customWidth: customWidth, scrollVisibleType: scrollVisibleType }, { children: children })));
 }
-var S_ContextMenu = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 14px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  list-style: none;\n  margin: 0;\n  max-height: ", ";\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  position: relative;\n  vertical-align: baseline;\n  width: ", ";\n\n  z-index: 400;\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 14px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  list-style: none;\n  margin: 0;\n  max-height: ", ";\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  position: relative;\n  vertical-align: baseline;\n  width: ", ";\n\n  z-index: 400;\n\n  ", "\n"])), function (_a) {
+var S_ContextMenu = styled_components_1.default.ul(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 14px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  list-style: none;\n  margin: 0;\n  max-height: ", ";\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  position: relative;\n  vertical-align: baseline;\n  width: ", ";\n\n  z-index: 400;\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 14px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  list-style: none;\n  margin: 0;\n  max-height: ", ";\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  position: relative;\n  vertical-align: baseline;\n  width: ", ";\n\n  z-index: 400;\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_contextmenu_base;
 }, function (_a) {
@@ -51,6 +72,16 @@ var S_ContextMenu = styled_components_1.default.ul(templateObject_1 || (template
 }, function (_a) {
     var customWidth = _a.customWidth;
     return customWidth && "width: ".concat(customWidth, ";min-width: ").concat(customWidth, ";");
+}, function (_a) {
+    var scrollVisibleType = _a.scrollVisibleType;
+    return scrollVisibleType &&
+        {
+            visible: scrollbarStyle_1.scrollbarStyle,
+            hidden: scrollbarStyle_1.scrollInvisible
+        }[scrollVisibleType];
+}, function (_a) {
+    var scrollVisibleType = _a.scrollVisibleType;
+    return scrollVisibleType === 'visible' && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      ::-webkit-scrollbar-track {\n        margin-bottom: 7px;\n        margin-top: 7px;\n      }\n    "], ["\n      ::-webkit-scrollbar-track {\n        margin-bottom: 7px;\n        margin-top: 7px;\n      }\n    "])));
 });
 exports.default = ContextMenu;
-var templateObject_1;
+var templateObject_1, templateObject_2;

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import type { PDSTextType } from '../../../common';
+import type { ScrollVisibleType } from '../../../common/styles/scroll/scrollbarStyle';
 import type { DropdownGroupInfo, DropdownValueOption } from '../../../common/types';
 type Props = {
     colorTheme?: 'none' | 'dark' | 'white';
@@ -15,7 +16,8 @@ type Props = {
     displayType?: 'text_only' | 'icon_only' | 'icon_text';
     fontWeight?: 'bold' | 'regular';
     groupInfoArray?: DropdownGroupInfo[];
+    scrollVisibleType?: ScrollVisibleType;
     onChange?: (option: DropdownValueOption) => void;
 };
-declare function Dropdown({ colorTheme, value, defaultValue, hintText, maxHeightItemNumber, responsiveMode, size, state, valueArray, customWidth, displayType, fontWeight, groupInfoArray, onChange }: Props): JSX.Element;
+declare function Dropdown({ colorTheme, value, defaultValue, hintText, maxHeightItemNumber, responsiveMode, size, state, valueArray, customWidth, displayType, fontWeight, groupInfoArray, scrollVisibleType, onChange }: Props): JSX.Element;
 export default Dropdown;

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

@@ -57,11 +57,11 @@ function Dropdown(_a) {
     // selectionMode = 'single',
     _e = _a.size, 
     // selectionMode = 'single',
-    size = _e === void 0 ? 'large' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, valueArray = _a.valueArray, customWidth = _a.customWidth, _g = _a.displayType, displayType = _g === void 0 ? 'text_only' : _g, _h = _a.fontWeight, fontWeight = _h === void 0 ? 'regular' : _h, groupInfoArray = _a.groupInfoArray, onChange = _a.onChange;
-    var _j = (0, react_1.useState)(false), isFocused = _j[0], setIsFocused = _j[1];
-    var _k = (0, react_1.useState)(null), selectedValue = _k[0], setSelectedValue = _k[1];
-    var _l = (0, react_1.useState)(null), contextMenuSizeOffset = _l[0], setContextMenuSizeOffset = _l[1];
-    var _m = (0, react_1.useState)(null), dropdownPositionOffset = _m[0], setDropdownPositionOffset = _m[1];
+    size = _e === void 0 ? 'large' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, valueArray = _a.valueArray, customWidth = _a.customWidth, _g = _a.displayType, displayType = _g === void 0 ? 'text_only' : _g, _h = _a.fontWeight, fontWeight = _h === void 0 ? 'regular' : _h, groupInfoArray = _a.groupInfoArray, _j = _a.scrollVisibleType, scrollVisibleType = _j === void 0 ? 'visible' : _j, onChange = _a.onChange;
+    var _k = (0, react_1.useState)(false), isFocused = _k[0], setIsFocused = _k[1];
+    var _l = (0, react_1.useState)(null), selectedValue = _l[0], setSelectedValue = _l[1];
+    var _m = (0, react_1.useState)(null), contextMenuSizeOffset = _m[0], setContextMenuSizeOffset = _m[1];
+    var _o = (0, react_1.useState)(null), dropdownPositionOffset = _o[0], setDropdownPositionOffset = _o[1];
     var contextMenuRef = (0, react_1.useRef)(null);
     var dropdownRef = (0, react_1.useRef)(null);
     /**
@@ -261,7 +261,7 @@ function Dropdown(_a) {
         });
     }
     return ((0, jsx_runtime_1.jsxs)(S_Dropdown, __assign({ "x-pds-name": "Dropdown", "x-pds-element-type": "component", "x-pds-device-type": "mobile", className: "container", ref: dropdownRef, size: size, tabIndex: 0, onBlur: handleBlur, responsiveMode: responsiveMode, customWidth: customWidth, displayType: displayType }, { children: [(0, jsx_runtime_1.jsxs)(S_Select, __assign({ size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode, customWidth: customWidth, displayType: displayType }, { children: [(0, jsx_runtime_1.jsxs)(S_TextLabel, __assign({ size: size, responsiveMode: responsiveMode, displayType: displayType }, { children: [(displayType === 'icon_only' || displayType === 'icon_text') && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.iconName) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: size === 'small' ? 20 : 24, iconName: selectedValue.iconName, fillType: selectedValue.iconFillType, colorKey: getIconColorKey() }), displayType === 'icon_text' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })), (displayType === 'text_only' || displayType === 'icon_text') && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) || (value === null || value === void 0 ? void 0 : value.text) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) || hintText, styleTheme: fontWeight === 'bold' ? 'form2Bold' : 'form2Regular', singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getTextColorOverride(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }))] })), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getArrowIconColorKey() })] })), isFocused &&
-                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_ContextMenuWrapper, __assign({ ref: contextMenuRef, contextMenuPositionCss: contextMenuPositionCss }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, __assign({ autoWidthMode: "use", maxHeight: maxHeight, customWidth: getCustomWidth() }, { children: groupInfoArray
+                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_ContextMenuWrapper, __assign({ ref: contextMenuRef, contextMenuPositionCss: contextMenuPositionCss }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, __assign({ autoWidthMode: "use", maxHeight: maxHeight, customWidth: getCustomWidth(), scrollVisibleType: scrollVisibleType }, { children: groupInfoArray
                             ? Object.keys(resultByGroup).map(function (key) {
                                 var _a, _b, _c;
                                 return ((0, jsx_runtime_1.jsxs)(S_Group, __assign({ size: size, hasGroupTitle: Boolean((_a = groupInfoArray.find(function (groupInfo) { return groupInfo.key === key; })) === null || _a === void 0 ? void 0 : _a.title) }, { children: [((_b = groupInfoArray.find(function (groupInfo) { return groupInfo.key === key; })) === null || _b === void 0 ? void 0 : _b.title) && ((0, jsx_runtime_1.jsx)(S_Wrapper, __assign({ size: size }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: (_c = groupInfoArray.find(function (groupInfo) { return groupInfo.key === key; })) === null || _c === void 0 ? void 0 : _c.title, colorTheme: "sysTextSecondary", styleTheme: "caption1Bold", letterSpacing: "0.15em" }) }))), resultByGroup[key].map(function (el) { return ((0, jsx_runtime_1.jsx)("div", __assign({ onMouseDown: function () { return handleClickOption(el); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, size: size, isSelected: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.value) === el.value, state: el.state, displayType: displayType }) }), el.value)); })] }), key));

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.scrollbarWithPaddingStyle,
+            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/package.json

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

package/release-note.md

@@ -1,6 +1,7 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.241]
+## [v2.2.242]
 ## daily|https://design.storybook.publ.biz/
 
 ### 업데이트 사항
-* [PDS-1360] 다국어 설정 모달 언어별 입력에 descText 추가
+* [PDS-1352] PDS 드롭다운에 스크롤 표시
+* [PDS-1354] PDS Sheet에 스크롤 표시