pds-dev-kit-web 1.4.22 → 1.4.25

package/dist/src/desktop/layout/LayoutWT/ContainersBox/ContainersBox.js

@@ -71,7 +71,9 @@ var ContainersBox = function (_a) {
             WTP_1: react_1.default.createElement(react_1.default.Fragment, null),
             WTQ_1: react_1.default.createElement(react_1.default.Fragment, null),
             WTS_1: react_1.default.createElement(react_1.default.Fragment, null),
-            WTS_2: react_1.default.createElement(react_1.default.Fragment, null)
+            WTS_2: react_1.default.createElement(react_1.default.Fragment, null),
+            WTT_1: react_1.default.createElement(react_1.default.Fragment, null),
+            WTT_2: react_1.default.createElement(react_1.default.Fragment, null)
         }[layoutType],
         react_1.default.createElement(S_RightBox, null,
             {
@@ -113,7 +115,9 @@ var ContainersBox = function (_a) {
                 WTP_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTQ_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTS_1: react_1.default.createElement(react_1.default.Fragment, null),
-                WTS_2: react_1.default.createElement(react_1.default.Fragment, null)
+                WTS_2: react_1.default.createElement(react_1.default.Fragment, null),
+                WTT_1: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor })),
+                WTT_2: (react_1.default.createElement(Containers_1.PageMenuContainer, { pageMenuType: "top_page_menu", pageMenuContent: pageMenuContent, containerColor: containerColor, areaColor: areaColor }))
             }[layoutType],
             {
                 WTA_1: react_1.default.createElement(react_1.default.Fragment, null),
@@ -154,7 +158,9 @@ var ContainersBox = function (_a) {
                 WTP_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTQ_1: react_1.default.createElement(react_1.default.Fragment, null),
                 WTS_1: react_1.default.createElement(react_1.default.Fragment, null),
-                WTS_2: react_1.default.createElement(react_1.default.Fragment, null)
+                WTS_2: react_1.default.createElement(react_1.default.Fragment, null),
+                WTT_1: react_1.default.createElement(react_1.default.Fragment, null),
+                WTT_2: react_1.default.createElement(react_1.default.Fragment, null)
             }[layoutType],
             react_1.default.createElement(S_BottomWrapper, { layoutType: layoutType },
                 {
@@ -196,7 +202,9 @@ var ContainersBox = function (_a) {
                     WTP_1: (react_1.default.createElement(Containers_1.SubMenuContainer, { subMenuType: "left_sub_menu", subMenuContent: subMenuContent, containerColor: containerColor, areaColor: areaColor })),
                     WTQ_1: '',
                     WTS_1: '',
-                    WTS_2: ''
+                    WTS_2: '',
+                    WTT_1: '',
+                    WTT_2: ''
                 }[layoutType],
                 react_1.default.createElement(Containers_1.ContentsContainer, { layoutType: layoutType, content1: content1, content2: content2, containerColor: containerColor, areaColor: areaColor, container1Ref: container1Ref })))));
 };

package/dist/src/hybrid/components/Spacing/Spacing.js

@@ -29,7 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 function Spacing(_a) {
-    var _b = _a.size, size = _b === void 0 ? 'spacing_a' : _b, _c = _a.spacingType, spacingType = _c === void 0 ? 'height' : _c;
+    var size = _a.size, _b = _a.spacingType, spacingType = _b === void 0 ? 'height' : _b;
     return react_1.default.createElement(S_Spacing, { size: size, spacingType: spacingType });
 }
 var spacing_a = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n"], ["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n"])), function (_a) {

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { PDSTextType, PDSValueOption } from '../../../common';
+declare type Props = {
+    titleText?: PDSTextType;
+    contentText?: PDSTextType;
+    leftImageMode?: 'none' | 'use';
+    imageSrc?: string;
+    hoverBtnMode?: 'none' | 'use';
+    contextMenuOptionArray?: PDSValueOption[];
+    contextMenuState?: 'normal' | 'disabled';
+    colorTheme?: 'seller' | 'subscriber';
+    onClickContextMenu?: (option: PDSValueOption) => void;
+};
+declare function BasicChatListItem({ titleText, contentText, leftImageMode, imageSrc, hoverBtnMode, contextMenuOptionArray, onClickContextMenu, contextMenuState, colorTheme }: Props): JSX.Element;
+export default BasicChatListItem;

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

@@ -0,0 +1,134 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var hybrid_1 = require("../../../hybrid");
+var ContextMenu_1 = require("../ContextMenu");
+var ContextMenuItem_1 = require("../ContextMenuItem");
+var IconButton_1 = require("../IconButton");
+var TextLabel_1 = require("../TextLabel");
+var titleTextColors = {
+    seller: 'usrTextBrandPrimary',
+    subscriber: 'sysTextSecondary'
+};
+var backgroundColorTheme = {
+    seller: 'ui_cpnt_list_base_area_seller',
+    subscriber: 'ui_cpnt_list_base_area'
+};
+function BasicChatListItem(_a) {
+    var titleText = _a.titleText, contentText = _a.contentText, _b = _a.leftImageMode, leftImageMode = _b === void 0 ? 'none' : _b, imageSrc = _a.imageSrc, _c = _a.hoverBtnMode, hoverBtnMode = _c === void 0 ? 'use' : _c, contextMenuOptionArray = _a.contextMenuOptionArray, onClickContextMenu = _a.onClickContextMenu, _d = _a.contextMenuState, contextMenuState = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'subscriber' : _e;
+    var _f = (0, react_1.useState)(false), isContextMenuOpen = _f[0], setIsContextMenuOpen = _f[1];
+    var contextMenuRef = (0, react_1.useRef)(null);
+    /**
+     * @when contextMenu가 열려 있을 때
+     * @expected ChatList body의 스크롤을 숨기고, contextMenu의 외부를 클릭하면 contextMenu가 닫히도록 합니다.
+     * @clear document의 클릭 이벤트를 제거합니다.
+     */
+    (0, react_1.useEffect)(function () {
+        // NOTE pop up 개념이 생기기 전까지의 임시 조치 방법입니다.
+        var chatBody = document.querySelector('#chatMessageBox');
+        if (chatBody) {
+            if (isContextMenuOpen) {
+                chatBody.style.overflowY = 'hidden';
+            }
+            else {
+                chatBody.style.overflowY = 'auto';
+            }
+        }
+        function handleClickOutside(e) {
+            if (contextMenuRef.current && !contextMenuRef.current.contains(e.target)) {
+                if (isContextMenuOpen) {
+                    e.stopPropagation();
+                    setIsContextMenuOpen(false);
+                }
+            }
+        }
+        document.addEventListener('click', handleClickOutside);
+        return function () {
+            document.removeEventListener('click', handleClickOutside);
+        };
+    }, [isContextMenuOpen]);
+    var handleClickMoreButton = function () {
+        setIsContextMenuOpen(function (prev) { return !prev; });
+    };
+    var handleClickContextMenuItem = function (option) {
+        if (onClickContextMenu) {
+            onClickContextMenu(option);
+        }
+        setIsContextMenuOpen(false);
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(S_BasicChatListItem, { colorTheme: colorTheme, hoverBtnMode: hoverBtnMode },
+            leftImageMode === 'use' && (react_1.default.createElement(S_ImageViewWrapper, null,
+                react_1.default.createElement(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: "responsive" }))),
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColors[colorTheme] }),
+            react_1.default.createElement(S_ContentTextWrapper, null,
+                react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary", wordBreak: "break_all" })),
+            react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen },
+                react_1.default.createElement(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_on_primary", onClick: handleClickMoreButton }),
+                isContextMenuOpen && (react_1.default.createElement(S_ContextMenuWrapper, { ref: contextMenuRef },
+                    react_1.default.createElement(ContextMenu_1.ContextMenu, null, contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return (react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { key: el.value, option: el, onClick: handleClickContextMenuItem, state: contextMenuState })); }))))))));
+}
+var S_SeeMoreButton = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: ", ";\n  margin-left: ", ";\n  position: relative;\n"], ["\n  display: ", ";\n  margin-left: ", ";\n  position: relative;\n"])), function (_a) {
+    var isContextMenuOpen = _a.isContextMenuOpen;
+    return (isContextMenuOpen ? 'block' : 'none');
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA;
+});
+var S_BasicChatListItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  height: fit-content;\n  min-height: 24px;\n  max-width: 100%;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n\n  ", ";\n\n  :hover {\n    ", " {\n      display: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  height: fit-content;\n  min-height: 24px;\n  max-width: 100%;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n\n  ", ";\n\n  :hover {\n    ", " {\n      display: ", ";\n    }\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA;
+}, function (_a) {
+    var colorTheme = _a.colorTheme, theme = _a.theme;
+    return colorTheme && theme[backgroundColorTheme[colorTheme]];
+}, S_SeeMoreButton, function (_a) {
+    var hoverBtnMode = _a.hoverBtnMode;
+    return hoverBtnMode === 'use' && 'block';
+});
+var S_ImageViewWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 24px;\n  margin-right: ", ";\n  min-width: 24px;\n  width: 24px;\n"], ["\n  height: 24px;\n  margin-right: ", ";\n  min-width: 24px;\n  width: 24px;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+});
+var S_ContentTextWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 1;\n  margin-left: ", ";\n"], ["\n  flex: 1;\n  margin-left: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingC;
+});
+var S_ContextMenuWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  right: -4px;\n  z-index: 10;\n"], ["\n  position: absolute;\n  right: -4px;\n  z-index: 10;\n"])));
+exports.default = BasicChatListItem;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/src/mobile/components/BasicChatListItem/index.d.ts

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

package/dist/src/mobile/components/BasicChatListItem/index.js

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

package/dist/src/mobile/components/ChatList/Body.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { Props as ChatListProps } from './ChatList';
+declare type Props = Pick<ChatListProps, 'scrollVisibleType' | 'children' | 'bodyBtnText'> & {
+    isSubmitted: boolean;
+};
+declare function Body({ scrollVisibleType, children, isSubmitted, bodyBtnText }: Props): JSX.Element;
+export default Body;

package/dist/src/mobile/components/ChatList/Body.js

@@ -0,0 +1,93 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var MainButton_1 = require("../MainButton");
+var useAutoScrollToBottom_1 = __importDefault(require("./useAutoScrollToBottom"));
+var useTimeout_1 = __importDefault(require("./useTimeout"));
+function Body(_a) {
+    var scrollVisibleType = _a.scrollVisibleType, children = _a.children, isSubmitted = _a.isSubmitted, bodyBtnText = _a.bodyBtnText;
+    var _b = (0, react_1.useState)(false), isButtonShow = _b[0], setIsButtonShow = _b[1];
+    var _c = (0, useAutoScrollToBottom_1.default)(), triggerScrollToBottom = _c.triggerScrollToBottom, EndOfList = _c.EndOfList;
+    var scrollRef = (0, react_1.useRef)(null);
+    var handleTriggerScroll = function () {
+        if (isButtonShow) {
+            if (isSubmitted) {
+                triggerScrollToBottom();
+            }
+            return;
+        }
+        triggerScrollToBottom();
+    };
+    /**
+     * @when 스크롤을 하고 있지 않은 상황에서 chatMessages가 업데이트 될 때마다
+     * @expected 채팅 리스트의 맨 밑으로 스크롤 내린다.
+     * @clear -
+     */
+    (0, useTimeout_1.default)({ callback: handleTriggerScroll, target: children }, 200);
+    var handleClickMBtn = function () {
+        triggerScrollToBottom();
+    };
+    var handleScroll = function () {
+        if (scrollRef.current) {
+            var _a = scrollRef.current, scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
+            var BUTTON_SHOW_UP_HEIGHT = 100;
+            if (Math.ceil(scrollTop) + clientHeight + BUTTON_SHOW_UP_HEIGHT > scrollHeight) {
+                setIsButtonShow(false);
+                return;
+            }
+            setIsButtonShow(true);
+        }
+    };
+    return (react_1.default.createElement(S_Body, null,
+        react_1.default.createElement(S_ChatMessageBox, { onScroll: handleScroll, ref: scrollRef, scrollVisibleType: scrollVisibleType },
+            children,
+            react_1.default.createElement(EndOfList, null)),
+        isButtonShow && (react_1.default.createElement(S_BottomButtonWrapper, null,
+            react_1.default.createElement(MainButton_1.MainButton, { text: bodyBtnText, size: "small", onClick: handleClickMBtn })))));
+}
+var S_Body = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex: 1;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  position: relative;\n"], ["\n  flex: 1;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  position: relative;\n"])));
+var scrollVisibleStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ::-webkit-scrollbar {\n    display: block;\n  }\n"], ["\n  ::-webkit-scrollbar {\n    display: block;\n  }\n"])));
+var scrollHiddenStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n\n  ::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n\n  ::-webkit-scrollbar {\n    display: none;\n  }\n"])));
+var S_ChatMessageBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 100%;\n  overflow-y: auto;\n\n  ", "\n"], ["\n  height: 100%;\n  overflow-y: auto;\n\n  ", "\n"])), function (_a) {
+    var scrollVisibleType = _a.scrollVisibleType;
+    if (!scrollVisibleType || scrollVisibleType === 'moving') {
+        return;
+    }
+    return {
+        visible: scrollVisibleStyle,
+        hidden: scrollHiddenStyle
+    }[scrollVisibleType];
+});
+var S_BottomButtonWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  bottom: ", ";\n  left: 50%;\n  transform: translate(-50%, 0);\n"], ["\n  position: absolute;\n  bottom: ", ";\n  left: 50%;\n  transform: translate(-50%, 0);\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingC;
+});
+exports.default = Body;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
+export declare type Props = {
+    styleTheme?: 'solid' | 'translucent' | 'transparent';
+    headerMode?: 'none' | 'use';
+    titleText?: PDSTextType;
+    captionText?: PDSTextType;
+    headerDisplayType?: 'none' | 'ibtn1';
+    iBtn1IconName?: FillIconNameKeys | LineIconNameKeys;
+    iBtn1IconFillType?: 'line' | 'fill';
+    children?: React.ReactNode;
+    textFieldState?: 'normal' | 'read_only' | 'disabled';
+    textFieldHintText?: PDSTextType;
+    textFieldDefaultText?: PDSTextType;
+    textFieldMaxLength?: number;
+    scrollVisibleType?: 'moving' | 'hidden' | 'visible';
+    footerChildren?: React.ReactNode;
+    submitBtnState?: 'disabled' | 'normal';
+    bodyBtnText?: PDSTextType;
+    onSubmit: (value: string) => void;
+};
+declare function ChatList({ styleTheme, headerMode, titleText, captionText, headerDisplayType, iBtn1IconName, iBtn1IconFillType, children, textFieldState, textFieldHintText, textFieldDefaultText, textFieldMaxLength, scrollVisibleType, footerChildren, submitBtnState, bodyBtnText, onSubmit }: Props): JSX.Element;
+export default ChatList;

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

@@ -0,0 +1,93 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_hook_form_1 = require("react-hook-form");
+var styled_components_1 = __importDefault(require("styled-components"));
+var hybrid_1 = require("../../../hybrid");
+var Body_1 = __importDefault(require("./Body"));
+var Footer_1 = __importDefault(require("./Footer"));
+var Header_1 = __importDefault(require("./Header"));
+var baseBackgroundColors = {
+    solid: 'ui_cpnt_list_base_area_solid',
+    translucent: 'ui_cpnt_list_base_area_translucent',
+    transparent: 'ui_cpnt_list_base_area_translucent'
+};
+function ChatList(_a) {
+    var _b = _a.styleTheme, styleTheme = _b === void 0 ? 'solid' : _b, _c = _a.headerMode, headerMode = _c === void 0 ? 'use' : _c, titleText = _a.titleText, captionText = _a.captionText, _d = _a.headerDisplayType, headerDisplayType = _d === void 0 ? 'none' : _d, _e = _a.iBtn1IconName, iBtn1IconName = _e === void 0 ? 'ic_xmark' : _e, _f = _a.iBtn1IconFillType, iBtn1IconFillType = _f === void 0 ? 'line' : _f, children = _a.children, _g = _a.textFieldState, textFieldState = _g === void 0 ? 'normal' : _g, textFieldHintText = _a.textFieldHintText, textFieldDefaultText = _a.textFieldDefaultText, textFieldMaxLength = _a.textFieldMaxLength, _h = _a.scrollVisibleType, scrollVisibleType = _h === void 0 ? 'moving' : _h, footerChildren = _a.footerChildren, submitBtnState = _a.submitBtnState, bodyBtnText = _a.bodyBtnText, onSubmit = _a.onSubmit;
+    var methods = (0, react_hook_form_1.useForm)({
+        mode: 'onChange',
+        defaultValues: {
+            chat: ''
+        }
+    });
+    var reset = methods.reset, handleSubmit = methods.handleSubmit, control = methods.control, _j = methods.formState, isSubmitted = _j.isSubmitted, isValid = _j.isValid, isDirty = _j.isDirty;
+    var inputValue = (0, react_hook_form_1.useWatch)({ name: 'chat', control: control });
+    var isSubmitButtonActive = (0, react_1.useMemo)(function () {
+        if (!submitBtnState) {
+            return false;
+        }
+        return isDirty && isValid && inputValue.length > 0 && submitBtnState === 'normal';
+    }, [isDirty, isValid, inputValue, submitBtnState]);
+    var handleSubmitChat = function (_a) {
+        var chat = _a.chat;
+        if (!chat || !isSubmitButtonActive) {
+            return;
+        }
+        onSubmit(chat);
+        reset({ chat: '' });
+    };
+    return (react_1.default.createElement(S_ChatList, { backgroundColor: baseBackgroundColors[styleTheme], id: "chatList" },
+        headerMode === 'use' && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(Header_1.default, { styleTheme: styleTheme, titleText: titleText, captionText: captionText, headerDisplayType: headerDisplayType, iBtn1IconName: iBtn1IconName, iBtn1IconFillType: iBtn1IconFillType }),
+            react_1.default.createElement(hybrid_1.Divider, null))),
+        react_1.default.createElement(Body_1.default, { scrollVisibleType: scrollVisibleType, isSubmitted: isSubmitted, bodyBtnText: bodyBtnText }, children),
+        react_1.default.createElement(hybrid_1.Divider, null),
+        react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }),
+        react_1.default.createElement(react_hook_form_1.FormProvider, __assign({}, methods),
+            react_1.default.createElement("form", { onSubmit: handleSubmit(handleSubmitChat) },
+                react_1.default.createElement(Footer_1.default, { textFieldDefaultText: textFieldDefaultText, textFieldHintText: textFieldHintText, textFieldState: textFieldState, textFieldMaxLength: textFieldMaxLength, footerChildren: footerChildren, isSubmitBtnActive: isSubmitButtonActive }))),
+        react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" })));
+}
+var S_ChatList = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"], ["\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])), function (_a) {
+    var backgroundColor = _a.backgroundColor, theme = _a.theme;
+    return theme[backgroundColor];
+});
+exports.default = ChatList;
+var templateObject_1;

package/dist/src/mobile/components/ChatList/ChatTextField.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { Props as ChatListProps } from './ChatList';
+declare type Props = Pick<ChatListProps, 'textFieldDefaultText' | 'textFieldHintText' | 'textFieldState' | 'textFieldMaxLength'> & {
+    isSubmitBtnActive: boolean;
+};
+declare function ChatTextField({ textFieldDefaultText, textFieldHintText, textFieldState, textFieldMaxLength, isSubmitBtnActive }: Props): JSX.Element;
+export default ChatTextField;

package/dist/src/mobile/components/ChatList/ChatTextField.js

@@ -0,0 +1,41 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var IconButton_1 = require("../IconButton");
+var TextField_1 = require("../TextField");
+function ChatTextField(_a) {
+    var textFieldDefaultText = _a.textFieldDefaultText, textFieldHintText = _a.textFieldHintText, textFieldState = _a.textFieldState, textFieldMaxLength = _a.textFieldMaxLength, isSubmitBtnActive = _a.isSubmitBtnActive;
+    var chatValidation = {
+        validate: function (value) {
+            if (!value)
+                return true;
+            return value.trim().length ? true : false;
+        }
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(S_FooterContentWrapper, null,
+            react_1.default.createElement(S_TextFieldWrapper, null,
+                react_1.default.createElement(TextField_1.TextField, { name: "chat", responsiveMode: "use", textLineType: "single", inputType: "text", hintText: textFieldHintText, defaultText: textFieldDefaultText, validation: chatValidation, maxLength: textFieldMaxLength, enterSubmitMode: "use", validationPoint: "onChange", state: textFieldState })),
+            react_1.default.createElement(IconButton_1.IconButton, { iconName: "ic_paper_plane", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: isSubmitBtnActive ? 'ui_cpnt_icon_sys_brandprimary' : 'ui_cpnt_button_icon_disabled', iconSize: 24, type: "submit", state: isSubmitBtnActive ? 'normal' : 'disabled' }))));
+}
+var S_FooterContentWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingC;
+});
+var S_TextFieldWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n  margin-right: ", ";\n"], ["\n  flex: 1;\n  margin-right: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+});
+exports.default = ChatTextField;
+var templateObject_1, templateObject_2;

package/dist/src/mobile/components/ChatList/Footer.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { Props as ChatListProps } from './ChatList';
+declare type Props = Pick<ChatListProps, 'footerChildren' | 'textFieldDefaultText' | 'textFieldHintText' | 'textFieldState' | 'textFieldMaxLength'> & {
+    isSubmitBtnActive: boolean;
+};
+declare function Footer({ footerChildren, textFieldDefaultText, textFieldHintText, textFieldState, textFieldMaxLength, isSubmitBtnActive }: Props): JSX.Element;
+export default Footer;

package/dist/src/mobile/components/ChatList/Footer.js

@@ -0,0 +1,27 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var ChatTextField_1 = __importDefault(require("./ChatTextField"));
+function Footer(_a) {
+    var footerChildren = _a.footerChildren, textFieldDefaultText = _a.textFieldDefaultText, textFieldHintText = _a.textFieldHintText, textFieldState = _a.textFieldState, textFieldMaxLength = _a.textFieldMaxLength, isSubmitBtnActive = _a.isSubmitBtnActive;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(ChatTextField_1.default, { textFieldDefaultText: textFieldDefaultText, textFieldHintText: textFieldHintText, textFieldState: textFieldState, textFieldMaxLength: textFieldMaxLength, isSubmitBtnActive: isSubmitBtnActive }),
+        react_1.default.createElement(S_FooterChildrenWrapper, null, footerChildren)));
+}
+var S_FooterChildrenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingC;
+});
+exports.default = Footer;
+var templateObject_1;

package/dist/src/mobile/components/ChatList/Header.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { Props as ChatListProps } from './ChatList';
+declare type Props = Required<Pick<ChatListProps, 'styleTheme'>> & Pick<ChatListProps, 'titleText' | 'captionText' | 'headerDisplayType' | 'iBtn1IconName' | 'iBtn1IconFillType'>;
+declare function Header({ styleTheme, titleText, captionText, headerDisplayType, iBtn1IconName, iBtn1IconFillType }: Props): JSX.Element;
+export default Header;

package/dist/src/mobile/components/ChatList/Header.js

@@ -0,0 +1,50 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var hybrid_1 = require("../../../hybrid");
+var IconButton_1 = require("../IconButton");
+var TextLabel_1 = require("../TextLabel");
+var titleTextColors = {
+    solid: 'sysTextPrimary',
+    translucent: 'sysTextWhite',
+    transparent: 'sysTextWhite'
+};
+var iconColors = {
+    solid: 'ui_cpnt_button_icon_enabled',
+    translucent: 'ui_cpnt_button_icon_white',
+    transparent: 'ui_cpnt_button_icon_white'
+};
+function Header(_a) {
+    var styleTheme = _a.styleTheme, titleText = _a.titleText, captionText = _a.captionText, headerDisplayType = _a.headerDisplayType, iBtn1IconName = _a.iBtn1IconName, iBtn1IconFillType = _a.iBtn1IconFillType;
+    return (react_1.default.createElement(S_HeaderContentWrapper, null,
+        react_1.default.createElement(S_HeaderLeftBox, null,
+            titleText && (react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "body1Bold", colorTheme: titleTextColors[styleTheme] })),
+            captionText && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a" }),
+                react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary", colorOverride: styleTheme === 'translucent' ? 'ui_cpnt_list_text_caption_02' : undefined })))),
+        headerDisplayType === 'ibtn1' && iBtn1IconName && (react_1.default.createElement(IconButton_1.IconButton, { iconName: iBtn1IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[styleTheme], iconSize: 24, iconFillType: iBtn1IconFillType }))));
+}
+var S_HeaderContentWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), 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.spacingC;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+});
+var S_HeaderLeftBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
+exports.default = Header;
+var templateObject_1, templateObject_2;

package/dist/src/mobile/components/ChatList/index.d.ts

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

package/dist/src/mobile/components/ChatList/index.js

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

package/dist/src/mobile/components/ChatList/useAutoScrollToBottom.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+declare type Props = {
+    behavior?: 'auto' | 'smooth';
+    heightOfEndOfList?: number;
+};
+declare function useAutoScrollToBottom({ behavior, heightOfEndOfList }?: Props): {
+    triggerScrollToBottom: () => void;
+    EndOfList: () => JSX.Element;
+};
+export default useAutoScrollToBottom;