pds-dev-kit-web 1.4.43 → 1.4.44

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

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 import type { Props as ChatListProps } from './ChatList';
-declare type Props = Pick<ChatListProps, 'scrollVisibleType' | 'children' | 'bodyMBtnText' | 'bodySpacingMode'> & {
+declare const Body: React.ForwardRefExoticComponent<Pick<ChatListProps, "children" | "scrollVisibleType" | "bodyMBtnText" | "bodySpacingMode"> & {
     isSubmitted: boolean;
-};
-declare function Body({ scrollVisibleType, children, isSubmitted, bodyMBtnText, bodySpacingMode }: Props): JSX.Element;
+    callBackAfterScrollToBottom: () => void;
+} & React.RefAttributes<HTMLDivElement>>;
 export default Body;

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

@@ -30,26 +30,34 @@ 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"));
-function Body(_a) {
-    var scrollVisibleType = _a.scrollVisibleType, children = _a.children, isSubmitted = _a.isSubmitted, bodyMBtnText = _a.bodyMBtnText, bodySpacingMode = _a.bodySpacingMode;
+var Body = react_1.default.forwardRef(function (_a, ref) {
+    var scrollVisibleType = _a.scrollVisibleType, children = _a.children, isSubmitted = _a.isSubmitted, bodyMBtnText = _a.bodyMBtnText, bodySpacingMode = _a.bodySpacingMode, callBackAfterScrollToBottom = _a.callBackAfterScrollToBottom;
     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 childrenLength = react_1.default.Children.count(children);
     /**
-     * @when 스크롤하지 않은 상태에서 chatMessages가 업데이트 될 때마다
+     * @when 페이지 진입 시
      * @expected 채팅 리스트의 맨 밑으로 스크롤 내린다.
      * @clear -
      */
     (0, react_1.useEffect)(function () {
-        if (isButtonShow) {
+        if (!isButtonShow) {
+            triggerScrollToBottom();
+        }
+    }, [children, isButtonShow, triggerScrollToBottom]);
+    /**
+     * @when 스크롤을 하고 있지 않은 상황에서 chatMessages가 업데이트 될 때마다
+     * @expected 채팅 리스트의 맨 밑으로 스크롤 내린다.
+     * @clear -
+     */
+    (0, react_1.useEffect)(function () {
+        var handleTriggerScroll = function () {
             if (isSubmitted) {
+                callBackAfterScrollToBottom();
                 triggerScrollToBottom();
             }
-            return;
-        }
-        triggerScrollToBottom();
-    }, [childrenLength, isButtonShow, isSubmitted]);
+        };
+        setTimeout(function () { return handleTriggerScroll(); }, 0);
+    }, [children, isButtonShow, isSubmitted, callBackAfterScrollToBottom]);
     var handleClickMBtn = function () {
         triggerScrollToBottom();
     };
@@ -62,12 +70,12 @@ function Body(_a) {
         setIsButtonShow(true);
     };
     return (react_1.default.createElement(S_Body, { bodySpacingMode: bodySpacingMode },
-        react_1.default.createElement(S_ChatMessageBox, { id: "chatMessageBox", onScroll: handleScroll, ref: scrollRef, scrollVisibleType: scrollVisibleType },
+        react_1.default.createElement(S_ChatMessageBox, { id: "chatMessageBox", onScroll: handleScroll, scrollVisibleType: scrollVisibleType, ref: ref },
             children,
             react_1.default.createElement(EndOfList, null)),
         isButtonShow && (react_1.default.createElement(S_BottomButtonWrapper, null,
             react_1.default.createElement(MainButton_1.MainButton, { text: bodyMBtnText, size: "small", onClick: handleClickMBtn })))));
-}
+});
 var bodySpacing = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-right: ", ";\n  padding-left: ", ";\n"], ["\n  box-sizing: border-box;\n  padding-right: ", ";\n  padding-left: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
@@ -96,4 +104,5 @@ var S_BottomButtonWrapper = styled_components_1.default.div(templateObject_6 ||
     return theme.spacing.spacingC;
 });
 exports.default = Body;
+Body.displayName = 'Body';
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -41,5 +41,5 @@ export declare type Props = {
     onSubmit: (value: string) => void;
     onClickHeaderIBtn1?: () => void;
 };
-declare function ChatList({ styleTheme, headerMode, titleText, descText, captionText, titleStyleTheme, headerDisplayType, headerIBtn1IconName, headerIBtn1IconFillType, children, textFieldState, textFieldHintText, textFieldDefaultText, textFieldMaxLength, scrollVisibleType, footerChildren, submitIBtnState, bodyMBtnText, bodySpacingMode, onSubmit, onClickHeaderIBtn1, submitIBtnIconName, submitIBtnIconFillType, footerIBtn1State, footerIBtn1IconName, footerIBtn1IconFillType, footerIBtn1Type, onClickFooterIBtn1, footerIBtn2State, footerIBtn2IconName, footerIBtn2IconFillType, footerIBtn2Type, onClickFooterIBtn2, footerIBtn3State, footerIBtn3IconName, footerIBtn3IconFillType, footerIBtn3Type, footerIBtn3Accept, onClickFooterIBtn3 }: Props): JSX.Element;
+declare const ChatList: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export default ChatList;

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

@@ -49,7 +49,7 @@ var baseBackgroundColors = {
     translucent: 'ui_cpnt_list_base_area_translucent',
     transparent: 'ui_cpnt_list_base_area_translucent'
 };
-function ChatList(_a) {
+var ChatList = react_1.default.forwardRef(function (_a, ref) {
     var _b = _a.styleTheme, styleTheme = _b === void 0 ? 'solid' : _b, _c = _a.headerMode, headerMode = _c === void 0 ? 'use' : _c, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, _d = _a.titleStyleTheme, titleStyleTheme = _d === void 0 ? 'subTitleBold' : _d, _e = _a.headerDisplayType, headerDisplayType = _e === void 0 ? 'none' : _e, _f = _a.headerIBtn1IconName, headerIBtn1IconName = _f === void 0 ? 'ic_xmark' : _f, _g = _a.headerIBtn1IconFillType, headerIBtn1IconFillType = _g === void 0 ? 'line' : _g, children = _a.children, _h = _a.textFieldState, textFieldState = _h === void 0 ? 'normal' : _h, textFieldHintText = _a.textFieldHintText, textFieldDefaultText = _a.textFieldDefaultText, textFieldMaxLength = _a.textFieldMaxLength, _j = _a.scrollVisibleType, scrollVisibleType = _j === void 0 ? 'moving' : _j, footerChildren = _a.footerChildren, _k = _a.submitIBtnState, submitIBtnState = _k === void 0 ? 'normal' : _k, bodyMBtnText = _a.bodyMBtnText, _l = _a.bodySpacingMode, bodySpacingMode = _l === void 0 ? 'none' : _l, onSubmit = _a.onSubmit, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1, submitIBtnIconName = _a.submitIBtnIconName, submitIBtnIconFillType = _a.submitIBtnIconFillType, _m = _a.footerIBtn1State, footerIBtn1State = _m === void 0 ? 'normal' : _m, footerIBtn1IconName = _a.footerIBtn1IconName, footerIBtn1IconFillType = _a.footerIBtn1IconFillType, _o = _a.footerIBtn1Type, footerIBtn1Type = _o === void 0 ? 'button' : _o, onClickFooterIBtn1 = _a.onClickFooterIBtn1, _p = _a.footerIBtn2State, footerIBtn2State = _p === void 0 ? 'normal' : _p, footerIBtn2IconName = _a.footerIBtn2IconName, footerIBtn2IconFillType = _a.footerIBtn2IconFillType, _q = _a.footerIBtn2Type, footerIBtn2Type = _q === void 0 ? 'button' : _q, onClickFooterIBtn2 = _a.onClickFooterIBtn2, _r = _a.footerIBtn3State, footerIBtn3State = _r === void 0 ? 'normal' : _r, footerIBtn3IconName = _a.footerIBtn3IconName, footerIBtn3IconFillType = _a.footerIBtn3IconFillType, _s = _a.footerIBtn3Type, footerIBtn3Type = _s === void 0 ? 'button' : _s, footerIBtn3Accept = _a.footerIBtn3Accept, onClickFooterIBtn3 = _a.onClickFooterIBtn3;
     var methods = (0, react_hook_form_1.useForm)({
         mode: 'onChange',
@@ -57,7 +57,17 @@ function ChatList(_a) {
             chat: ''
         }
     });
-    var reset = methods.reset, handleSubmit = methods.handleSubmit, control = methods.control, _t = methods.formState, isSubmitted = _t.isSubmitted, isDirty = _t.isDirty, isValid = _t.isValid;
+    var reset = methods.reset, handleSubmit = methods.handleSubmit, control = methods.control, _t = methods.formState, isDirty = _t.isDirty, isValid = _t.isValid, isSubmitSuccessful = _t.isSubmitSuccessful;
+    /**
+     * @when 폼 submit이 성공적으로 완료 되었을 때
+     * @expected 폼을 초기화합니다.
+     * @clear -
+     */
+    (0, react_1.useEffect)(function () {
+        if (isSubmitSuccessful) {
+            reset();
+        }
+    }, [isSubmitSuccessful]);
     var inputValue = (0, react_hook_form_1.useWatch)({ name: 'chat', control: control });
     var isSubmitButtonActive = (0, react_1.useMemo)(function () {
         if (!submitIBtnState) {
@@ -71,20 +81,22 @@ function ChatList(_a) {
             return;
         }
         onSubmit(chat);
-        reset({ chat: '' });
+    };
+    var callBackAfterScrollToBottom = function () {
+        reset();
     };
     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, descText: descText, captionText: captionText, titleStyleTheme: titleStyleTheme, headerDisplayType: headerDisplayType, headerIBtn1IconName: headerIBtn1IconName, headerIBtn1IconFillType: headerIBtn1IconFillType, onClickHeaderIBtn1: onClickHeaderIBtn1 }),
             react_1.default.createElement(hybrid_1.Divider, null))),
-        react_1.default.createElement(Body_1.default, { scrollVisibleType: scrollVisibleType, isSubmitted: isSubmitted, bodyMBtnText: bodyMBtnText, bodySpacingMode: bodySpacingMode }, children),
+        react_1.default.createElement(Body_1.default, { scrollVisibleType: scrollVisibleType, isSubmitted: isSubmitSuccessful, bodyMBtnText: bodyMBtnText, bodySpacingMode: bodySpacingMode, callBackAfterScrollToBottom: callBackAfterScrollToBottom, ref: ref }, 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, submitIBtnIconName: submitIBtnIconName, submitIBtnIconFillType: submitIBtnIconFillType, footerIBtn1State: footerIBtn1State, footerIBtn1IconName: footerIBtn1IconName, footerIBtn1IconFillType: footerIBtn1IconFillType, footerIBtn1Type: footerIBtn1Type, onClickFooterIBtn1: onClickFooterIBtn1, footerIBtn2State: footerIBtn2State, footerIBtn2IconName: footerIBtn2IconName, footerIBtn2IconFillType: footerIBtn2IconFillType, footerIBtn2Type: footerIBtn2Type, onClickFooterIBtn2: onClickFooterIBtn2, footerIBtn3State: footerIBtn3State, footerIBtn3IconName: footerIBtn3IconName, footerIBtn3IconFillType: footerIBtn3IconFillType, footerIBtn3Type: footerIBtn3Type, footerIBtn3Accept: footerIBtn3Accept, onClickFooterIBtn3: onClickFooterIBtn3 }))),
         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];

package/dist/src/desktop/components/ChatList/useAutoScrollToBottom.js

@@ -32,11 +32,16 @@ function useAutoScrollToBottom(_a) {
     (0, react_1.useEffect)(function () {
         if (scrollRef.current) {
             scrollRef.current.scrollIntoView({ behavior: behavior });
+            // NOTE: 스크롤을 빠르게 하는 중에 scrollIntoView시 스크롤 영역만큼 렌더가 안되는 이슈에 대한 임시조치
+            setTimeout(function () {
+                var _a;
+                (_a = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: behavior });
+            }, 100);
         }
     }, [scrollTrigger]);
-    function triggerScrollToBottom() {
+    var triggerScrollToBottom = (0, react_1.useCallback)(function () {
         setScrollTrigger(function (prev) { return !prev; });
-    }
+    }, []);
     function EndOfList() {
         return react_1.default.createElement("li", { style: { listStyle: 'none', height: heightOfEndOfList + "px" }, ref: scrollRef });
     }

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

@@ -9,7 +9,7 @@ declare type Props = {
     hintText?: TFunctionResult;
     maxHeightItemNumber?: number;
     defaultValue?: PDSValueOption;
-    value?: PDSValueOption;
+    value?: PDSValueOption | null;
     responsiveMode?: 'none' | 'use';
     size?: 'large' | 'small';
     state?: 'normal' | 'read_only' | 'disabled';

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

@@ -37,17 +37,32 @@ function Dropdown(_a) {
     // selectionMode = 'single',
     size = _e === void 0 ? 'large' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, valueArray = _a.valueArray, customWidth = _a.customWidth, onChange = _a.onChange;
     var _g = (0, react_1.useState)(false), isFocused = _g[0], setIsFocused = _g[1];
-    var _h = (0, react_1.useState)(defaultValue), selectedValue = _h[0], setSelectedValue = _h[1];
+    var _h = (0, react_1.useState)(null), selectedValue = _h[0], setSelectedValue = _h[1];
+    /**
+     * @when value 프롭의 값에 따라
+     * @expected 값이 null일 때 드롭다운을 초기화하고, 값이 있다면 해당 값으로 설정해줍니다.
+     * @clear -
+     */
     (0, react_1.useEffect)(function () {
-        if (defaultValue) {
-            setSelectedValue(defaultValue);
+        if (value === null) {
+            setSelectedValue(null);
+            return;
         }
-    }, [defaultValue]);
-    (0, react_1.useEffect)(function () {
         if (value) {
             setSelectedValue(value);
         }
     }, [value]);
+    /**
+     * @when defaultValue 프롭에 값이 있을 시
+     * @expected Dropdown의 초기값을 설정해줍니다.
+     * @clear -
+     */
+    (0, react_1.useEffect)(function () {
+        if (!defaultValue) {
+            return;
+        }
+        setSelectedValue(defaultValue);
+    }, [defaultValue]);
     var handleClick = function () {
         if (state === 'disabled' || state === 'read_only') {
             return;

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

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 import type { Props as ChatListProps } from './ChatList';
-declare type Props = Pick<ChatListProps, 'scrollVisibleType' | 'children' | 'bodyMBtnText' | 'bodySpacingMode'> & {
+declare const Body: React.ForwardRefExoticComponent<Pick<ChatListProps, "children" | "scrollVisibleType" | "bodyMBtnText" | "bodySpacingMode"> & {
     isSubmitted: boolean;
-};
-declare function Body({ scrollVisibleType, children, isSubmitted, bodyMBtnText, bodySpacingMode }: Props): JSX.Element;
+    callBackAfterScrollToBottom: () => void;
+} & React.RefAttributes<HTMLDivElement>>;
 export default Body;

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

@@ -30,49 +30,53 @@ 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, bodyMBtnText = _a.bodyMBtnText, bodySpacingMode = _a.bodySpacingMode;
+var Body = react_1.default.forwardRef(function (_a, ref) {
+    var scrollVisibleType = _a.scrollVisibleType, children = _a.children, isSubmitted = _a.isSubmitted, bodyMBtnText = _a.bodyMBtnText, bodySpacingMode = _a.bodySpacingMode, callBackAfterScrollToBottom = _a.callBackAfterScrollToBottom;
     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 childrenLength = react_1.default.Children.count(children);
-    var handleTriggerScroll = function () {
-        if (isButtonShow) {
-            if (isSubmitted) {
-                triggerScrollToBottom();
-            }
-            return;
+    /**
+     * @when 페이지 진입 시
+     * @expected 채팅 리스트의 맨 밑으로 스크롤 내린다.
+     * @clear -
+     */
+    (0, react_1.useEffect)(function () {
+        if (!isButtonShow) {
+            triggerScrollToBottom();
         }
-        triggerScrollToBottom();
-    };
+    }, [children, isButtonShow, triggerScrollToBottom]);
     /**
      * @when 스크롤을 하고 있지 않은 상황에서 chatMessages가 업데이트 될 때마다
      * @expected 채팅 리스트의 맨 밑으로 스크롤 내린다.
      * @clear -
      */
-    (0, useTimeout_1.default)({ callback: handleTriggerScroll, target: childrenLength }, 200);
+    (0, react_1.useEffect)(function () {
+        var handleTriggerScroll = function () {
+            if (isSubmitted) {
+                callBackAfterScrollToBottom();
+                triggerScrollToBottom();
+            }
+        };
+        setTimeout(function () { return handleTriggerScroll(); }, 0);
+    }, [children, isButtonShow, isSubmitted, callBackAfterScrollToBottom]);
     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);
+    var handleScroll = function (e) {
+        var _a = e.currentTarget, 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, { bodySpacingMode: bodySpacingMode },
-        react_1.default.createElement(S_ChatMessageBox, { onScroll: handleScroll, ref: scrollRef, scrollVisibleType: scrollVisibleType },
+        react_1.default.createElement(S_ChatMessageBox, { onScroll: handleScroll, ref: ref, 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: bodyMBtnText, size: "small", onClick: handleClickMBtn })))));
-}
+});
 var bodySpacing = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-right: ", ";\n  padding-left: ", ";\n"], ["\n  box-sizing: border-box;\n  padding-right: ", ";\n  padding-left: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
@@ -101,4 +105,5 @@ var S_BottomButtonWrapper = styled_components_1.default.div(templateObject_6 ||
     return theme.spacing.spacingC;
 });
 exports.default = Body;
+Body.displayName = 'Body';
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -41,5 +41,5 @@ export declare type Props = {
     onSubmit: (value: string) => void;
     onClickHeaderIBtn1?: () => void;
 };
-declare function ChatList({ styleTheme, headerMode, titleText, descText, captionText, titleStyleTheme, headerDisplayType, headerIBtn1IconName, headerIBtn1IconFillType, children, textFieldState, textFieldHintText, textFieldDefaultText, textFieldMaxLength, scrollVisibleType, footerChildren, submitIBtnState, bodyMBtnText, bodySpacingMode, onSubmit, onClickHeaderIBtn1, submitIBtnIconName, submitIBtnIconFillType, footerIBtn1State, footerIBtn1IconName, footerIBtn1IconFillType, footerIBtn1Type, onClickFooterIBtn1, footerIBtn2State, footerIBtn2IconName, footerIBtn2IconFillType, footerIBtn2Type, onClickFooterIBtn2, footerIBtn3State, footerIBtn3IconName, footerIBtn3IconFillType, footerIBtn3Type, footerIBtn3Accept, onClickFooterIBtn3 }: Props): JSX.Element;
+declare const ChatList: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export default ChatList;

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

@@ -49,7 +49,7 @@ var baseBackgroundColors = {
     translucent: 'ui_cpnt_list_base_area_translucent',
     transparent: 'ui_cpnt_list_base_area_translucent'
 };
-function ChatList(_a) {
+var ChatList = react_1.default.forwardRef(function (_a, ref) {
     var _b = _a.styleTheme, styleTheme = _b === void 0 ? 'solid' : _b, _c = _a.headerMode, headerMode = _c === void 0 ? 'use' : _c, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, _d = _a.titleStyleTheme, titleStyleTheme = _d === void 0 ? 'subTitleBold' : _d, _e = _a.headerDisplayType, headerDisplayType = _e === void 0 ? 'none' : _e, _f = _a.headerIBtn1IconName, headerIBtn1IconName = _f === void 0 ? 'ic_xmark' : _f, _g = _a.headerIBtn1IconFillType, headerIBtn1IconFillType = _g === void 0 ? 'line' : _g, children = _a.children, _h = _a.textFieldState, textFieldState = _h === void 0 ? 'normal' : _h, textFieldHintText = _a.textFieldHintText, textFieldDefaultText = _a.textFieldDefaultText, textFieldMaxLength = _a.textFieldMaxLength, _j = _a.scrollVisibleType, scrollVisibleType = _j === void 0 ? 'moving' : _j, footerChildren = _a.footerChildren, _k = _a.submitIBtnState, submitIBtnState = _k === void 0 ? 'normal' : _k, bodyMBtnText = _a.bodyMBtnText, _l = _a.bodySpacingMode, bodySpacingMode = _l === void 0 ? 'none' : _l, onSubmit = _a.onSubmit, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1, submitIBtnIconName = _a.submitIBtnIconName, submitIBtnIconFillType = _a.submitIBtnIconFillType, _m = _a.footerIBtn1State, footerIBtn1State = _m === void 0 ? 'normal' : _m, footerIBtn1IconName = _a.footerIBtn1IconName, footerIBtn1IconFillType = _a.footerIBtn1IconFillType, _o = _a.footerIBtn1Type, footerIBtn1Type = _o === void 0 ? 'button' : _o, onClickFooterIBtn1 = _a.onClickFooterIBtn1, _p = _a.footerIBtn2State, footerIBtn2State = _p === void 0 ? 'normal' : _p, footerIBtn2IconName = _a.footerIBtn2IconName, footerIBtn2IconFillType = _a.footerIBtn2IconFillType, _q = _a.footerIBtn2Type, footerIBtn2Type = _q === void 0 ? 'button' : _q, onClickFooterIBtn2 = _a.onClickFooterIBtn2, _r = _a.footerIBtn3State, footerIBtn3State = _r === void 0 ? 'normal' : _r, footerIBtn3IconName = _a.footerIBtn3IconName, footerIBtn3IconFillType = _a.footerIBtn3IconFillType, _s = _a.footerIBtn3Type, footerIBtn3Type = _s === void 0 ? 'button' : _s, footerIBtn3Accept = _a.footerIBtn3Accept, onClickFooterIBtn3 = _a.onClickFooterIBtn3;
     var methods = (0, react_hook_form_1.useForm)({
         mode: 'onChange',
@@ -57,7 +57,17 @@ function ChatList(_a) {
             chat: ''
         }
     });
-    var reset = methods.reset, handleSubmit = methods.handleSubmit, control = methods.control, _t = methods.formState, isSubmitted = _t.isSubmitted, isValid = _t.isValid, isDirty = _t.isDirty;
+    var reset = methods.reset, handleSubmit = methods.handleSubmit, control = methods.control, _t = methods.formState, isValid = _t.isValid, isDirty = _t.isDirty, isSubmitSuccessful = _t.isSubmitSuccessful;
+    /**
+     * @when 폼 제출에 성공했을 시
+     * @expected 폼을 초기화합니다.
+     * @clear -
+     */
+    (0, react_1.useEffect)(function () {
+        if (isSubmitSuccessful) {
+            reset();
+        }
+    }, [isSubmitSuccessful]);
     var inputValue = (0, react_hook_form_1.useWatch)({ name: 'chat', control: control });
     var isSubmitButtonActive = (0, react_1.useMemo)(function () {
         if (!submitIBtnState) {
@@ -71,20 +81,22 @@ function ChatList(_a) {
             return;
         }
         onSubmit(chat);
-        reset({ chat: '' });
+    };
+    var callBackAfterScrollToBottom = function () {
+        reset();
     };
     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, descText: descText, captionText: captionText, titleStyleTheme: titleStyleTheme, headerDisplayType: headerDisplayType, headerIBtn1IconName: headerIBtn1IconName, headerIBtn1IconFillType: headerIBtn1IconFillType, onClickHeaderIBtn1: onClickHeaderIBtn1 }),
             react_1.default.createElement(hybrid_1.Divider, null))),
-        react_1.default.createElement(Body_1.default, { scrollVisibleType: scrollVisibleType, isSubmitted: isSubmitted, bodyMBtnText: bodyMBtnText, bodySpacingMode: bodySpacingMode }, children),
+        react_1.default.createElement(Body_1.default, { scrollVisibleType: scrollVisibleType, isSubmitted: isSubmitSuccessful, bodyMBtnText: bodyMBtnText, bodySpacingMode: bodySpacingMode, callBackAfterScrollToBottom: callBackAfterScrollToBottom, ref: ref }, 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, submitIBtnIconName: submitIBtnIconName, submitIBtnIconFillType: submitIBtnIconFillType, footerIBtn1State: footerIBtn1State, footerIBtn1IconName: footerIBtn1IconName, footerIBtn1IconFillType: footerIBtn1IconFillType, footerIBtn1Type: footerIBtn1Type, onClickFooterIBtn1: onClickFooterIBtn1, footerIBtn2State: footerIBtn2State, footerIBtn2IconName: footerIBtn2IconName, footerIBtn2IconFillType: footerIBtn2IconFillType, footerIBtn2Type: footerIBtn2Type, onClickFooterIBtn2: onClickFooterIBtn2, footerIBtn3State: footerIBtn3State, footerIBtn3IconName: footerIBtn3IconName, footerIBtn3IconFillType: footerIBtn3IconFillType, footerIBtn3Type: footerIBtn3Type, footerIBtn3Accept: footerIBtn3Accept, onClickFooterIBtn3: onClickFooterIBtn3 }))),
         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];

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

@@ -32,11 +32,16 @@ function useAutoScrollToBottom(_a) {
     (0, react_1.useEffect)(function () {
         if (scrollRef.current) {
             scrollRef.current.scrollIntoView({ behavior: behavior });
+            // NOTE: 스크롤을 빠르게 하는 중에 scrollIntoView시 스크롤 영역만큼 렌더가 안되는 이슈에 대한 임시조치
+            setTimeout(function () {
+                var _a;
+                (_a = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: behavior });
+            }, 100);
         }
     }, [scrollTrigger]);
-    function triggerScrollToBottom() {
+    var triggerScrollToBottom = (0, react_1.useCallback)(function () {
         setScrollTrigger(function (prev) { return !prev; });
-    }
+    }, []);
     function EndOfList() {
         return react_1.default.createElement("li", { style: { listStyle: 'none', height: heightOfEndOfList + "px" }, ref: scrollRef });
     }

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

@@ -7,7 +7,7 @@ declare type DropDownValues = PDSValueOption & {
 declare type Props = {
     colorTheme?: 'none' | 'dark' | 'white';
     defaultValue?: PDSValueOption;
-    value?: PDSValueOption;
+    value?: PDSValueOption | null;
     hintText?: TFunctionResult;
     maxHeightItemNumber?: number;
     responsiveMode?: 'none' | 'use';

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

@@ -37,17 +37,32 @@ function Dropdown(_a) {
     // selectionMode = 'single',
     size = _e === void 0 ? 'large' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, valueArray = _a.valueArray, customWidth = _a.customWidth, onChange = _a.onChange;
     var _g = (0, react_1.useState)(false), isFocused = _g[0], setIsFocused = _g[1];
-    var _h = (0, react_1.useState)(defaultValue), selectedValue = _h[0], setSelectedValue = _h[1];
+    var _h = (0, react_1.useState)(null), selectedValue = _h[0], setSelectedValue = _h[1];
+    /**
+     * @when value 프롭의 값에 따라
+     * @expected 값이 null일 때 드롭다운을 초기화하고, 값이 있다면 해당 값으로 설정해줍니다.
+     * @clear -
+     */
     (0, react_1.useEffect)(function () {
-        if (defaultValue) {
-            setSelectedValue(defaultValue);
+        if (value === null) {
+            setSelectedValue(null);
+            return;
         }
-    }, [defaultValue]);
-    (0, react_1.useEffect)(function () {
         if (value) {
             setSelectedValue(value);
         }
     }, [value]);
+    /**
+     * @when defaultValue 프롭에 값이 있을 시
+     * @expected Dropdown의 초기값을 설정해줍니다.
+     * @clear -
+     */
+    (0, react_1.useEffect)(function () {
+        if (!defaultValue) {
+            return;
+        }
+        setSelectedValue(defaultValue);
+    }, [defaultValue]);
     var handleClick = function () {
         if (state === 'disabled' || state === 'read_only') {
             return;

package/package.json

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

package/release-note.md

@@ -1,10 +1,8 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v1.4.43]
+## [v1.4.44]
 
 ### Component
-* BasicChatListItem
-  * safari에서 우측 더보기 버튼이 간혈적으로 보이지 않는 이슈 해결
-* ChatBubbleListItem
-  * safari에서 우측 더보기 버튼이 간혈적으로 보이지 않는 이슈 해결
-* UserDesktopNavBar
-  * loginInfoMode가 profile일때 마우스 커서가 변하지 않는 이슈 해결
+* ChatList
+  * body부분의 스크롤 이슈 수정
+* Dropdown
+  * value를 null로 설정할 시 dropdown을 초기화하는 로직을 useEffect 내부에 추가

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

@@ -1,6 +0,0 @@
-declare type Props = {
-    callback: () => void;
-    target: unknown;
-};
-declare function useTimeout({ callback, target }: Props, delay: number): void;
-export default useTimeout;

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

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("react");
-function useTimeout(_a, delay) {
-    var callback = _a.callback, target = _a.target;
-    (0, react_1.useEffect)(function () {
-        var timeout = setTimeout(function () { return callback(); }, delay);
-        return function () { return clearTimeout(timeout); };
-    }, [target]);
-}
-exports.default = useTimeout;