pds-dev-kit-web 2.2.254 → 2.2.255

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

@@ -42,6 +42,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable react/jsx-no-bind */
 var react_1 = require("react");
 var react_hook_form_1 = require("react-hook-form");
+var hooks_1 = require("../../../common/hooks");
 var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
 var styled_components_1 = __importStar(require("styled-components"));
 var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
@@ -59,6 +60,7 @@ function EditApplyTextField(_a) {
     var currentValue = watch(name);
     var validateOnChange = register(name, validation).onChange;
     var isError = Object.keys(errors).some(function (error) { return error === name; });
+    var hasScrollbar = (0, hooks_1.useScrollbarDetector)(ref, textLineType, currentValue);
     (0, react_1.useEffect)(function () {
         if (defaultText !== undefined && defaultText !== null) {
             setPrevValue(defaultText);
@@ -161,7 +163,7 @@ function EditApplyTextField(_a) {
             return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: "use", textLineType: "single", inputType: inputType, state: state, min: min, max: max, maxLength: maxLength, textSize: size === 'large' || size === 'rlarge' ? 'form2' : 'heading', textWeight: size === 'large' || size === 'rlarge' ? 'normal' : 'bold', onFocus: handleFocus, onBlur: handleBlur, onTarget: handleTarget, onChange: handleChange, onKeyDown: handleKeyDown, inputRef: ref }) }));
         }
     };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_EditApplyTextFieldWrapper, __assign({ "x-pds-name": "EditApplyTextField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsxs)(S_EditApplyTextField, { children: [(0, jsx_runtime_1.jsx)(S_S_TextFieldBaseWrapper, __assign({ size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, customWidth: customWidth, scrollVisibleType: scrollVisibleType }, { children: S_TextFieldBase() })), isOpen === true && ((0, jsx_runtime_1.jsxs)(S_ButtonBox, { children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_xmark", fillType: "line", baseSize: "small", iconSize: 16, shapeType: "circular", shadow: "visible", iconColorKey: "ui_cpnt_button_icon_enabled", baseColorKey: "ui_cpnt_button_fill_base_white", borderColorKey: "ui_cpnt_button_line_border_default", tabIndex: -1, onMouseDown: handleCancel }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_check", fillType: "fill", baseSize: "small", iconSize: 16, shapeType: "circular", shadow: "visible", iconColorKey: "ui_cpnt_button_icon_on_primary", baseColorKey: "ui_cpnt_button_fill_base_primary", state: isError === true ? 'disabled' : 'normal', tabIndex: -1, onMouseDown: handleMouseDown, type: "submit" })] }))] }), ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && (0, jsx_runtime_1.jsx)(S_Error, __assign({ isFocused: isFocused }, { children: errors[name].message }))] })) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_EditApplyTextFieldWrapper, __assign({ "x-pds-name": "EditApplyTextField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsxs)(S_EditApplyTextField, { children: [(0, jsx_runtime_1.jsx)(S_S_TextFieldBaseWrapper, __assign({ size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, customWidth: customWidth, scrollVisibleType: scrollVisibleType, hasScrollbar: hasScrollbar }, { children: S_TextFieldBase() })), isOpen === true && ((0, jsx_runtime_1.jsxs)(S_ButtonBox, { children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_xmark", fillType: "line", baseSize: "small", iconSize: 16, shapeType: "circular", shadow: "visible", iconColorKey: "ui_cpnt_button_icon_enabled", baseColorKey: "ui_cpnt_button_fill_base_white", borderColorKey: "ui_cpnt_button_line_border_default", tabIndex: -1, onMouseDown: handleCancel }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_check", fillType: "fill", baseSize: "small", iconSize: 16, shapeType: "circular", shadow: "visible", iconColorKey: "ui_cpnt_button_icon_on_primary", baseColorKey: "ui_cpnt_button_fill_base_primary", state: isError === true ? 'disabled' : 'normal', tabIndex: -1, onMouseDown: handleMouseDown, type: "submit" })] }))] }), ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && (0, jsx_runtime_1.jsx)(S_Error, __assign({ isFocused: isFocused }, { children: errors[name].message }))] })) }));
 }
 var S_EditApplyTextFieldWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n\n  ", "\n"], ["\n  width: ", ";\n\n  ", "\n"])), function (_a) {
     var size = _a.size, responsiveMode = _a.responsiveMode;
@@ -277,9 +279,10 @@ var S_S_TextFieldBaseWrapper = styled_components_1.default.div(templateObject_13
     return (textLineType === 'multi' || textLineType === 'auto') &&
         scrollVisibleType && (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      textarea {\n        ", "\n      }\n    "], ["\n      textarea {\n        ", "\n      }\n    "])), scrollVisibleType === 'visible' ? scrollbarStyle_1.scrollbarStyle : scrollbarStyle_1.scrollInvisible);
 }, function (_a) {
-    var textLineType = _a.textLineType, scrollVisibleType = _a.scrollVisibleType;
+    var textLineType = _a.textLineType, scrollVisibleType = _a.scrollVisibleType, hasScrollbar = _a.hasScrollbar;
     return (textLineType === 'multi' || textLineType === 'auto') &&
-        scrollVisibleType === 'visible' && (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      padding-right: 1px;\n    "], ["\n      padding-right: 1px;\n    "])));
+        scrollVisibleType === 'visible' &&
+        hasScrollbar && (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      padding-right: 1px;\n    "], ["\n      padding-right: 1px;\n    "])));
 });
 var S_Error = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-right: ", ";\n  margin-top: ", ";\n  text-align: left;\n  white-space: pre-wrap;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-right: ", ";\n  margin-top: ", ";\n  text-align: left;\n  white-space: pre-wrap;\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -42,6 +42,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable react/jsx-no-bind */
 var react_1 = require("react");
 var react_hook_form_1 = require("react-hook-form");
+var hooks_1 = require("../../../common/hooks");
 var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
 var types_1 = require("../../../common/types");
 var styled_components_1 = __importStar(require("styled-components"));
@@ -69,9 +70,12 @@ function TextField(_a) {
         disabled: 'ui_cpnt_textfield_icon_colortheme_transparent_disabled'
     };
     var _y = (0, react_1.useState)(false), isFocused = _y[0], setIsFocused = _y[1];
-    var _z = (0, react_hook_form_1.useFormContext)(), register = _z.register, trigger = _z.trigger, errors = _z.formState.errors;
+    var ref = (0, react_1.useRef)();
+    var _z = (0, react_hook_form_1.useFormContext)(), register = _z.register, trigger = _z.trigger, watch = _z.watch, errors = _z.formState.errors;
+    var currentValue = watch(name);
     var _0 = register(name, validation), validateOnChange = _0.onChange, validateOnBlur = _0.onBlur;
     var isError = (0, types_1.getErrorByName)(errors, name);
+    var hasScrollbar = (0, hooks_1.useScrollbarDetector)(ref, textLineType, currentValue);
     var handleClickIBtn1 = function () {
         if (onClickIBtn1) {
             onClickIBtn1();
@@ -136,7 +140,7 @@ function TextField(_a) {
             }
         }
         if (textLineType === 'multi') {
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', hintTextWeight: hintTextFontWeight === 'bold' ? 'bold' : 'normal', autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }), (0, jsx_runtime_1.jsxs)(S_RightBox_Multi, { children: [iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: overrideIBtn2IconColorKey ||
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, textLineType: "multi", multiRows: multiRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', hintTextWeight: hintTextFontWeight === 'bold' ? 'bold' : 'normal', autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, inputRef: ref }), (0, jsx_runtime_1.jsxs)(S_RightBox_Multi, { children: [iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: overrideIBtn2IconColorKey ||
                                     (colorTheme &&
                                         {
                                             none: basicThemeIconColors[state],
@@ -151,7 +155,7 @@ function TextField(_a) {
                                         }[colorTheme]), iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 }))] })] }));
         }
         if (textLineType === 'auto') {
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', hintTextWeight: hintTextFontWeight === 'bold' ? 'bold' : 'normal', autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }), (0, jsx_runtime_1.jsxs)(S_RightBox_Auto, { children: [iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: overrideIBtn2IconColorKey ||
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, textLineType: "auto", autoMinRows: autoMinRows, autoMaxRows: autoMaxRows, state: state, colorTheme: colorTheme, maxLength: maxLength, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', hintTextWeight: hintTextFontWeight === 'bold' ? 'bold' : 'normal', autoComplete: autoComplete, onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, inputRef: ref }), (0, jsx_runtime_1.jsxs)(S_RightBox_Auto, { children: [iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: overrideIBtn2IconColorKey ||
                                     (colorTheme &&
                                         {
                                             none: basicThemeIconColors[state],
@@ -166,7 +170,7 @@ function TextField(_a) {
                                         }[colorTheme]), iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 }))] })] }));
         }
         if (textLineType === 'single') {
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [prefixText && ((0, jsx_runtime_1.jsxs)(S_PrefixText, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: prefixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", singleLineMode: "use" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, inputMode: inputMode, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', hintTextWeight: hintTextFontWeight === 'bold' ? 'bold' : 'normal', fieldPaddingRight: size === 'large' || size === 'rlarge' ? 8 : undefined, deleteIconMode: deleteBtnMode, deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isFocused, autoComplete: autoComplete, stepperMode: inputType === 'number' && numberStepperMode === 'use' ? 'use' : 'none', stepperRightSpacing: size === 'large' || size === 'rlarge' ? 1 : -4, innerSpinButtonSize: size === 'small' ? 12 : 16, step: numberStep, suffixText: suffixText, suffixTextRightSpacingMode: size === 'large' || size === 'rlarge' ? 'use' : 'none', onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: overrideIBtn2IconColorKey ||
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [prefixText && ((0, jsx_runtime_1.jsxs)(S_PrefixText, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: prefixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", singleLineMode: "use" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, inputMode: inputMode, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', hintTextWeight: hintTextFontWeight === 'bold' ? 'bold' : 'normal', fieldPaddingRight: size === 'large' || size === 'rlarge' ? 8 : undefined, deleteIconMode: deleteBtnMode, deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isFocused, autoComplete: autoComplete, stepperMode: inputType === 'number' && numberStepperMode === 'use' ? 'use' : 'none', stepperRightSpacing: size === 'large' || size === 'rlarge' ? 1 : -4, innerSpinButtonSize: size === 'small' ? 12 : 16, step: numberStep, suffixText: suffixText, suffixTextRightSpacingMode: size === 'large' || size === 'rlarge' ? 'use' : 'none', onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, inputRef: ref }), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: overrideIBtn2IconColorKey ||
                                     (colorTheme &&
                                         {
                                             none: basicThemeIconColors[state],
@@ -181,7 +185,7 @@ function TextField(_a) {
                                         }[colorTheme]), iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 }))] })] }));
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(S_TextFieldBox, __assign({ "x-pds-name": "TextField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_TextFieldWrapper, __assign({ size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: Boolean(isError), state: state, colorTheme: colorTheme, customWidth: customWidth, scrollVisibleType: scrollVisibleType }, { children: S_TextField() })), ((_b = (0, types_1.getErrorByName)(errors, name)) === null || _b === void 0 ? void 0 : _b.message) && state === 'normal' && ((0, jsx_runtime_1.jsx)(S_Error, __assign({ colorTheme: colorTheme }, { children: (0, types_1.getErrorByName)(errors, name).message })))] })));
+    return ((0, jsx_runtime_1.jsxs)(S_TextFieldBox, __assign({ "x-pds-name": "TextField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_TextFieldWrapper, __assign({ size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: Boolean(isError), state: state, colorTheme: colorTheme, customWidth: customWidth, scrollVisibleType: scrollVisibleType, hasScrollbar: hasScrollbar }, { children: S_TextField() })), ((_b = (0, types_1.getErrorByName)(errors, name)) === null || _b === void 0 ? void 0 : _b.message) && state === 'normal' && ((0, jsx_runtime_1.jsx)(S_Error, __assign({ colorTheme: colorTheme }, { children: (0, types_1.getErrorByName)(errors, name).message })))] })));
 }
 var S_TextFieldBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  ", "\n"], ["\n  ", ";\n  ", ";\n  ", "\n"])), function (_a) {
     var size = _a.size;
@@ -388,9 +392,10 @@ var S_TextFieldWrapper = styled_components_1.default.div(templateObject_21 || (t
     return (textLineType === 'multi' || textLineType === 'auto') &&
         scrollVisibleType && (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n      textarea {\n        ", "\n      }\n    "], ["\n      textarea {\n        ", "\n      }\n    "])), scrollVisibleType === 'visible' ? scrollbarStyle_1.scrollbarStyle : scrollbarStyle_1.scrollInvisible);
 }, function (_a) {
-    var textLineType = _a.textLineType, scrollVisibleType = _a.scrollVisibleType;
+    var textLineType = _a.textLineType, scrollVisibleType = _a.scrollVisibleType, hasScrollbar = _a.hasScrollbar;
     return (textLineType === 'multi' || textLineType === 'auto') &&
-        scrollVisibleType === 'visible' && (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n      padding-right: 0px;\n    "], ["\n      padding-right: 0px;\n    "])));
+        scrollVisibleType === 'visible' &&
+        hasScrollbar && (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n      padding-right: 0px;\n    "], ["\n      padding-right: 0px;\n    "])));
 });
 var S_RightBox = styled_components_1.default.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n"], ["\n  align-items: center;\n  display: flex;\n"])));
 var S_RightBox_Auto = styled_components_1.default.div(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  align-items: center;\n  align-self: end;\n  display: flex;\n"], ["\n  align-items: center;\n  align-self: end;\n  display: flex;\n"])));

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

@@ -16,7 +16,7 @@ var LottieIcon = function (_a) {
     var animationData = lotties_1.default[iconName];
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(S_Lottie, { "x-pds-name": "LottieIcon", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", animationData: animationData, lottieRef: lottieRef, autoplay: autoplayMode === 'use' ? true : false, loop: loopMode === 'use' ? true : false, "$size": size, onComplete: onComplete }) }));
 };
-var S_Lottie = (0, styled_components_1.default)(lottie_react_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: ", ";\n  justify-content: center;\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  height: ", ";\n  justify-content: center;\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n"])), function (_a) {
+var S_Lottie = (0, styled_components_1.default)(lottie_react_1.default)(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) {
     var $size = _a.$size;
     return "".concat($size, "px");
 }, function (_a) {

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

@@ -1,12 +1,6 @@
 /// <reference types="react" />
 import type { PDSTextType, PDSValueOption } from '../../../common';
 type ColorThemeType = 'grey' | 'brand_primary' | 'translucent_white' | 'translucent_black' | 'transparent';
-type ReactionType = 'heart' | 'like' | 'confetti';
-type ReactionValueOption = {
-    type: ReactionType;
-    count: number;
-};
-type ReactionArrayType = ReactionValueOption[];
 export type ChatBubbleListItemProps = {
     titleText?: PDSTextType;
     imageSrc?: string;
@@ -20,13 +14,8 @@ export type ChatBubbleListItemProps = {
     contextMenuState?: 'normal' | 'disabled';
     children?: React.ReactNode;
     downloadIBtnMode?: 'use' | 'none';
-    reactionBtnMode?: 'use' | 'none';
-    reactionBtnText?: string;
-    reactionArray?: ReactionArrayType;
-    reactionBubblePosition?: 'top' | 'bottom';
     onClickContextMenuItem?: (option: PDSValueOption) => void;
     onClickDownloadIBtn?: () => void;
-    onClickReactionBtn?: (type: ReactionType) => void;
 };
-declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, labelText, contextMenuOptionArray, contextMenuState, children, downloadIBtnMode, reactionBtnMode, reactionBtnText, reactionArray, reactionBubblePosition, onClickContextMenuItem, onClickDownloadIBtn, onClickReactionBtn }: ChatBubbleListItemProps): JSX.Element;
+declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, labelText, contextMenuOptionArray, contextMenuState, children, downloadIBtnMode, onClickContextMenuItem, onClickDownloadIBtn }: ChatBubbleListItemProps): JSX.Element;
 export default ChatBubbleListItem;

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

@@ -50,7 +50,6 @@ var ContextMenuItem_1 = require("../ContextMenuItem");
 var IconButton_1 = require("../IconButton");
 var TextLabel_1 = require("../TextLabel");
 var ChatBubble_1 = __importDefault(require("./ChatBubble"));
-var components_1 = require("./components");
 var Popup_1 = require("./Popup");
 var chatBubbleTailType = {
     other_avatar_impact: 'left_top',
@@ -69,8 +68,8 @@ var profileImageBorderColorTheme = {
     transparent: 'ui_cpnt_list_chatbubble_base_transparent'
 };
 function ChatBubbleListItem(_a) {
-    var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, labelText = _a.labelText, contextMenuOptionArray = _a.contextMenuOptionArray, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, children = _a.children, _f = _a.downloadIBtnMode, downloadIBtnMode = _f === void 0 ? 'none' : _f, _g = _a.reactionBtnMode, reactionBtnMode = _g === void 0 ? 'none' : _g, _h = _a.reactionBtnText, reactionBtnText = _h === void 0 ? '-' : _h, reactionArray = _a.reactionArray, _j = _a.reactionBubblePosition, reactionBubblePosition = _j === void 0 ? 'bottom' : _j, onClickContextMenuItem = _a.onClickContextMenuItem, onClickDownloadIBtn = _a.onClickDownloadIBtn, onClickReactionBtn = _a.onClickReactionBtn;
-    var _k = (0, react_1.useState)(false), isContextMenuOpen = _k[0], setIsContextMenuOpen = _k[1];
+    var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, labelText = _a.labelText, contextMenuOptionArray = _a.contextMenuOptionArray, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, children = _a.children, _f = _a.downloadIBtnMode, downloadIBtnMode = _f === void 0 ? 'none' : _f, onClickContextMenuItem = _a.onClickContextMenuItem, onClickDownloadIBtn = _a.onClickDownloadIBtn;
+    var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
     var contextMenuRef = (0, react_1.useRef)(null);
     var chatBody = document.querySelector('#chatMessageBox');
     var rect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
@@ -138,7 +137,7 @@ function ChatBubbleListItem(_a) {
         }
         setIsContextMenuOpen(false);
     };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ChatBubbleListItem, __assign({ "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", isMe: isMe }, { children: [hasLeftSpacing ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isProfileImageShow ? ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, __assign({ isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }) }))) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })) })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [isTitleTextShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColorTheme }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(S_ChatBubbleBox, __assign({ isMe: isMe }, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [(0, jsx_runtime_1.jsxs)(S_BubbleWrapper, { children: [isMe && ((0, jsx_runtime_1.jsxs)(S_Box, { children: [downloadIBtnMode === 'use' && (0, jsx_runtime_1.jsx)("div", { style: { height: '32px', width: '1px' } }), (0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_list_chatbubble_download_button_base", iconColorKey: "ui_cpnt_button_icon_white", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [labelText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "caption2Bold", colorTheme: "sysTextTertiary" })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }))] }))] })), (0, jsx_runtime_1.jsx)(ChatBubble_1.default, __assign({ colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, { children: children })), !isMe && ((0, jsx_runtime_1.jsxs)(S_Box, { children: [downloadIBtnMode === 'use' && (0, jsx_runtime_1.jsx)("div", { style: { height: '32px', width: '1px' } }), (0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_list_chatbubble_download_button_base", iconColorKey: "ui_cpnt_button_icon_white", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [labelText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "caption2Bold", colorTheme: "sysTextTertiary" })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }))] }))] }))] }), (0, jsx_runtime_1.jsx)(components_1.ReactionRow, { isMe: isMe, downloadIBtnMode: downloadIBtnMode, reactionBtnMode: reactionBtnMode, reactionBtnText: reactionBtnText, reactionArray: reactionArray, reactionBubblePosition: reactionBubblePosition, onClickReactionBtn: onClickReactionBtn })] })), hoverMode === 'use' && !isMe && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(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_enabled", onClick: handleMoreButtonClick }) })))] }))] }), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "top-end", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })] })) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ChatBubbleListItem, __assign({ "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", isMe: isMe }, { children: [hasLeftSpacing ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isProfileImageShow ? ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, __assign({ isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }) }))) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })) })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [isTitleTextShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColorTheme }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(S_ChatBubbleBox, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [isMe && ((0, jsx_runtime_1.jsxs)(S_Box, { children: [downloadIBtnMode === 'use' && (0, jsx_runtime_1.jsx)("div", { style: { height: '32px', width: '1px' } }), (0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_list_chatbubble_download_button_base", iconColorKey: "ui_cpnt_button_icon_white", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [labelText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "caption2Bold", colorTheme: "sysTextTertiary" })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }))] }))] })), (0, jsx_runtime_1.jsx)(ChatBubble_1.default, __assign({ colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, { children: children })), !isMe && ((0, jsx_runtime_1.jsxs)(S_Box, { children: [downloadIBtnMode === 'use' && (0, jsx_runtime_1.jsx)("div", { style: { height: '32px', width: '1px' } }), (0, jsx_runtime_1.jsx)(S_DownloadIconWrapper, __assign({ isMe: isMe }, { children: downloadIBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { shapeType: "circular", iconFillType: "fill", baseColorKey: "ui_cpnt_list_chatbubble_download_button_base", iconColorKey: "ui_cpnt_button_icon_white", iconSize: 16, iconName: "ic_download", onClick: onClickDownloadIBtn })) })), (0, jsx_runtime_1.jsxs)(S_TimeWrapper, __assign({ isMe: isMe }, { children: [labelText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: labelText, styleTheme: "caption2Bold", colorTheme: "sysTextTertiary" })), timeMode === 'use' && timeText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }))] }))] }))] })), hoverMode === 'use' && !isMe && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(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_enabled", onClick: handleMoreButtonClick }) })))] })] }), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "top-end", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })] })) }));
 }
 var MyChatBubbleListItem = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -172,14 +171,11 @@ var S_DownloadIconWrapper = styled_components_1.default.div(templateObject_7 ||
     return isMe && theme.spacing.spacingB;
 });
 var S_Box = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n"])));
-var S_ChatBubbleBox = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n"])), function (_a) {
-    var isMe = _a.isMe;
-    return isMe && MyChatBubble;
-});
+var S_ChatBubbleBox = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  justify-content: space-between;\n"])));
 var MyChatBubble = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  justify-content: flex-end;\n"], ["\n  justify-content: flex-end;\n"])));
-var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  align-items: ", ";\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  max-width: fit-content;\n"], ["\n  align-items: ", ";\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  max-width: fit-content;\n"])), function (_a) {
+var S_ChatBubbleWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n\n  ", ";\n"], ["\n  display: flex;\n  flex: 1;\n\n  ", ";\n"])), function (_a) {
     var isMe = _a.isMe;
-    return isMe && 'flex-end';
+    return isMe && MyChatBubble;
 });
 var S_TimeWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-items: ", ";\n  align-self: ", ";\n  display: flex;\n  flex-direction: column;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  align-items: ", ";\n  align-self: ", ";\n  display: flex;\n  flex-direction: column;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
     var isMe = _a.isMe;
@@ -207,6 +203,5 @@ var S_SeeMoreButton = styled_components_1.default.div(templateObject_13 || (temp
     var hoverMode = _a.hoverMode;
     return hoverMode === 'use' && '1';
 });
-var S_BubbleWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 exports.default = ChatBubbleListItem;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;

package/package.json

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

package/release-note.md

@@ -1,7 +1,7 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.254]
+## [v2.2.255]
 ## daily|https://design.storybook.publ.biz/
 
 ### 업데이트 사항
 
-* [PDS-1371] ChatBubbleListItem에 리액션 관련 사항 추가
+* [PDS-1377] EditApplyTextField에서 텍스트 입력 영역 우측에 간격이 없는 현상

package/dist/src/desktop/components/ChatBubbleListItem/components/ReactionBubble.d.ts

@@ -1,11 +0,0 @@
-import type { BubblePositionType } from '../../../../common/types/systemUI';
-import type { ReactNode } from 'react';
-type ContextBubbleSheetProps = {
-    pointingPosition: BubblePositionType;
-    children: ReactNode;
-};
-/**
- * @description ChatBubbleListItem에서의 사용 용례와 비슷한 사용 방식이 발생 한 경우, 별도의 PDS로 분리할 예정입니다.
- */
-declare const ReactionBubble: ({ pointingPosition, children }: ContextBubbleSheetProps) => JSX.Element;
-export default ReactionBubble;

package/dist/src/desktop/components/ChatBubbleListItem/components/ReactionBubble.js

@@ -1,86 +0,0 @@
-"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;
-    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 = __importStar(require("styled-components"));
-/**
- * @description ChatBubbleListItem에서의 사용 용례와 비슷한 사용 방식이 발생 한 경우, 별도의 PDS로 분리할 예정입니다.
- */
-var ReactionBubble = function (_a) {
-    var _b = _a.pointingPosition, pointingPosition = _b === void 0 ? 'start_bottom' : _b, children = _a.children;
-    var theme = (0, styled_components_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)(S_ContextBubbleArea, __assign({ "$position": pointingPosition }, { children: (0, jsx_runtime_1.jsxs)(S_ContextBubbleWrapper, __assign({ "$position": pointingPosition }, { children: [children, (0, jsx_runtime_1.jsxs)(Arrow, __assign({ "$position": pointingPosition, viewBox: "0 0 18 10", xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.jsx)("polygon", { points: "9,10 3,0 15,0", fill: theme.ui_cpnt_sheet_base_01 }), (0, jsx_runtime_1.jsx)("path", { d: "M3,1 L9,10", stroke: theme.ui_cpnt_sheet_border_01, strokeWidth: "1", strokeLinecap: "butt" }), (0, jsx_runtime_1.jsx)("path", { d: "M15,1 L9,10", stroke: theme.ui_cpnt_sheet_border_01, strokeWidth: "1", strokeLinecap: "butt" }), (0, jsx_runtime_1.jsx)("path", { d: "M0,0 L15,0", strokeWidth: "1" })] }))] })) })));
-};
-exports.default = ReactionBubble;
-var S_ContextBubbleArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  ", "\n  position: relative;\n"], ["\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  ", "\n  position: relative;\n"])), function (_a) {
-    var $position = _a.$position, theme = _a.theme;
-    var isTop = $position.includes('top');
-    return !isTop
-        ? "margin-bottom: ".concat(theme.spacing.spacingB, ";")
-        : "margin-top: ".concat(theme.spacing.spacingB, ";");
-});
-var S_ContextBubbleWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: ", ";\n  border-radius: 12px;\n  display: flex;\n  padding: ", ";\n  position: relative;\n  width: 'fit-content';\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: ", ";\n  border-radius: 12px;\n  display: flex;\n  padding: ", ";\n  position: relative;\n  width: 'fit-content';\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_sheet_base_01;
-}, function (_a) {
-    var theme = _a.theme;
-    return "1px solid ".concat(theme.ui_cpnt_sheet_border_01);
-}, function (_a) {
-    var theme = _a.theme;
-    return "".concat(theme.spacing.spacingB, " ").concat(theme.spacing.spacingC);
-});
-var Arrow = styled_components_1.default.svg(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 12.6px;\n  position: absolute;\n  width: 15px;\n\n  ", "\n\n  ", "\n"], ["\n  height: 12.6px;\n  position: absolute;\n  width: 15px;\n\n  ", "\n\n  ", "\n"])), function (_a) {
-    var $position = _a.$position;
-    var isTop = $position.includes('top');
-    if (isTop) {
-        return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        top: -10px;\n        transform: translateX(-50%) rotate(180deg);\n      "], ["\n        top: -10px;\n        transform: translateX(-50%) rotate(180deg);\n      "])));
-    }
-    return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      bottom: -10px;\n      transform: translateX(-50%);\n    "], ["\n      bottom: -10px;\n      transform: translateX(-50%);\n    "])));
-}, function (_a) {
-    var $position = _a.$position;
-    if ($position.includes('center')) {
-        return "left: 50%;";
-    }
-    if ($position.includes('end')) {
-        return "right: 12px;";
-    }
-    return "left: 19.5px;";
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/src/desktop/components/ChatBubbleListItem/components/ReactionRow.d.ts

@@ -1,18 +0,0 @@
-/// <reference types="react" />
-type ReactionType = 'heart' | 'like' | 'confetti';
-type ReactionValueOption = {
-    type: ReactionType;
-    count: number;
-};
-type ReactionArrayType = ReactionValueOption[];
-type Props = {
-    isMe: boolean;
-    downloadIBtnMode: 'use' | 'none';
-    reactionBtnMode: 'use' | 'none';
-    reactionBtnText: string;
-    reactionArray?: ReactionArrayType;
-    reactionBubblePosition: 'top' | 'bottom';
-    onClickReactionBtn?: (type: ReactionType) => void;
-};
-declare function ReactionRow({ isMe, reactionBtnMode, downloadIBtnMode, reactionBtnText, reactionArray, reactionBubblePosition, onClickReactionBtn }: Props): JSX.Element;
-export default ReactionRow;

package/dist/src/desktop/components/ChatBubbleListItem/components/ReactionRow.js

@@ -1,133 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var TextLabel_1 = require("../../../components/TextLabel");
-var components_1 = require("../../../../hybrid/components");
-var styled_components_1 = __importDefault(require("styled-components"));
-var ReactionBubble_1 = __importDefault(require("./ReactionBubble"));
-function ReactionRow(_a) {
-    var isMe = _a.isMe, reactionBtnMode = _a.reactionBtnMode, downloadIBtnMode = _a.downloadIBtnMode, reactionBtnText = _a.reactionBtnText, reactionArray = _a.reactionArray, reactionBubblePosition = _a.reactionBubblePosition, onClickReactionBtn = _a.onClickReactionBtn;
-    var _b = (0, react_1.useState)(false), isOpenReactionBubble = _b[0], setIsOpenReactionBubble = _b[1];
-    var bubbleRef = (0, react_1.useRef)(null);
-    var buttonRef = (0, react_1.useRef)(null);
-    /**
-     * @when 컴포넌트 렌더링 시
-     * @expected ReactionBubble의 외부를 클릭하면 ReactionBubble가 닫히도록 클릭 이벤트를 등록합니다.
-     * @clear document의 클릭 이벤트를 제거합니다.
-     */
-    (0, react_1.useEffect)(function () {
-        function handleClickOutside(event) {
-            var _a, _b;
-            event.stopPropagation();
-            if (event.target instanceof Node &&
-                (((_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) || ((_b = bubbleRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target))))
-                return;
-            if (isOpenReactionBubble) {
-                setIsOpenReactionBubble(false);
-            }
-        }
-        document.addEventListener('mousedown', handleClickOutside);
-        return function () {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [isOpenReactionBubble]);
-    var defaultReactions = [
-        { iconName: 'ic_lottie_heart', type: 'heart' },
-        { iconName: 'ic_lottie_thumb_up', type: 'like' },
-        { iconName: 'ic_lottie_confetti', type: 'confetti' }
-    ];
-    var handleOpenReactionBubble = function () {
-        if (!isOpenReactionBubble) {
-            setIsOpenReactionBubble(true);
-            return;
-        }
-        if (isOpenReactionBubble) {
-            setIsOpenReactionBubble(false);
-            return;
-        }
-    };
-    return ((0, jsx_runtime_1.jsxs)(S_Wrapper, { children: [(0, jsx_runtime_1.jsxs)(S_ReactionWrapper, __assign({ isMe: isMe, downloadIBtnMode: downloadIBtnMode === 'use' }, { children: [(0, jsx_runtime_1.jsx)(S_ButtonWrapper, __assign({ ref: buttonRef }, { children: !isMe && reactionBtnMode === 'use' && ((0, jsx_runtime_1.jsxs)(S_ReactionButton, __assign({ onClick: handleOpenReactionBubble }, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_plus_circle", size: 12 }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: reactionBtnText, singleLineMode: "use", styleTheme: "caption2Bold" })] }))) })), reactionArray && ((0, jsx_runtime_1.jsx)(S_ReactionBadgeWrapper, { children: reactionArray.map(function (reaction, index) {
-                            var iconName = function () {
-                                switch (reaction.type) {
-                                    case 'heart':
-                                        return 'ic_lottie_heart';
-                                    case 'like':
-                                        return 'ic_lottie_thumb_up';
-                                    case 'confetti':
-                                        return 'ic_lottie_confetti';
-                                }
-                            };
-                            return ((0, jsx_runtime_1.jsx)(S_ReactionBadge, __assign({ type: reaction.type }, { children: (0, jsx_runtime_1.jsx)(components_1.LottieIcon, { iconName: iconName(), size: 16, autoplayMode: "none", loopMode: "none" }) }), index));
-                        }) }))] })), (0, jsx_runtime_1.jsx)(S_ReactionBubbleWrapper, __assign({ ref: bubbleRef, reactionBubblePosition: reactionBubblePosition }, { children: isOpenReactionBubble && ((0, jsx_runtime_1.jsx)(ReactionBubble_1.default, __assign({ pointingPosition: reactionBubblePosition === 'bottom' ? 'start_top' : 'start_bottom' }, { children: (0, jsx_runtime_1.jsx)(S_ReactionBadgeWrapper, { children: defaultReactions.map(function (reaction, index) { return ((0, jsx_runtime_1.jsx)(S_ReactionBadge, __assign({ type: reaction.type, isButton: true, onClick: function () {
-                                onClickReactionBtn && onClickReactionBtn(reaction.type);
-                                setIsOpenReactionBubble(false);
-                            } }, { children: (0, jsx_runtime_1.jsx)(components_1.LottieIcon, { iconName: reaction.iconName, size: 16, autoplayMode: "none", loopMode: "none" }) }), index)); }) }) }))) }))] }));
-}
-exports.default = ReactionRow;
-var S_Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  position: relative;\n"], ["\n  align-items: flex-start;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  position: relative;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingA;
-});
-var S_ReactionWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  gap: ", ";\n  justify-content: space-between;\n  max-width: -webkit-fill-available;\n  padding-right: ", ";\n  padding-top: ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  gap: ", ";\n  justify-content: space-between;\n  max-width: -webkit-fill-available;\n  padding-right: ", ";\n  padding-top: ", ";\n  width: 100%;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingB;
-}, function (_a) {
-    var isMe = _a.isMe, downloadIBtnMode = _a.downloadIBtnMode;
-    return !isMe && (downloadIBtnMode ? '40px' : '34px');
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingA;
-});
-var S_ButtonWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
-var S_ReactionButton = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 8px;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  gap: ", ";\n  height: 24px;\n  justify-content: center;\n  max-width: fit-content;\n  padding: 0 ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 8px;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  gap: ", ";\n  height: 24px;\n  justify-content: center;\n  max-width: fit-content;\n  padding: 0 ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_sheet_base_02;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingA;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingB;
-});
-var S_ReactionBadgeWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  gap: ", ";\n"], ["\n  display: flex;\n  gap: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingA;
-});
-var S_ReactionBadge = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 100%;\n  cursor: ", ";\n  display: flex;\n  height: 24px;\n  justify-content: center;\n  width: 24px;\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 100%;\n  cursor: ", ";\n  display: flex;\n  height: 24px;\n  justify-content: center;\n  width: 24px;\n"])), function (_a) {
-    var theme = _a.theme, type = _a.type;
-    switch (type) {
-        case 'heart':
-            return theme.ui_cpnt_message_reaction_base_01;
-        case 'like':
-            return theme.ui_cpnt_message_reaction_base_02;
-        case 'confetti':
-            return theme.ui_cpnt_message_reaction_base_03;
-    }
-}, function (_a) {
-    var isButton = _a.isButton;
-    return isButton && 'pointer';
-});
-var S_ReactionBubbleWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  left: 0;\n  position: absolute;\n  ", "\n  z-index: 10;\n"], ["\n  left: 0;\n  position: absolute;\n  ", "\n  z-index: 10;\n"])), function (_a) {
-    var reactionBubblePosition = _a.reactionBubblePosition;
-    return reactionBubblePosition === 'bottom' ? 'top: 28px;' : 'bottom: 24px;';
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/src/desktop/components/ChatBubbleListItem/components/index.d.ts

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

package/dist/src/desktop/components/ChatBubbleListItem/components/index.js

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

package/dist/src/mobile/components/ChatBubbleListItem/components/ReactionBubble.d.ts

@@ -1,11 +0,0 @@
-import type { BubblePositionType } from '../../../../common/types/systemUI';
-import type { ReactNode } from 'react';
-type ContextBubbleSheetProps = {
-    pointingPosition: BubblePositionType;
-    children: ReactNode;
-};
-/**
- * @description ChatBubbleListItem에서의 사용 용례와 비슷한 사용 방식이 발생 한 경우, 별도의 PDS로 분리할 예정입니다.
- */
-declare const ReactionBubble: ({ pointingPosition, children }: ContextBubbleSheetProps) => JSX.Element;
-export default ReactionBubble;