pds-dev-kit-web-test 0.2.54 → 0.3.0

package/dist/src/common/styles/colorSet/index.js

@@ -4,14 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable import/order */
-var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
 var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
-var UIColor_json_1 = __importDefault(require("./UIColor.json"));
 var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
+var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
+var UIColor_json_1 = __importDefault(require("./UIColor.json"));
 var colorSet = {
-    SemanticColor: SemanticColor_json_1.default,
     PaletteColor_light: PaletteColor_light_json_1.default,
-    UIColor: UIColor_json_1.default,
-    PaletteColor_Dark: PaletteColor_Dark_json_1.default
+    PaletteColor_Dark: PaletteColor_Dark_json_1.default,
+    SemanticColor: SemanticColor_json_1.default,
+    UIColor: UIColor_json_1.default
 };
 exports.default = colorSet;

package/dist/src/common/styles/colorSet/ui-type.d.ts

@@ -837,4 +837,5 @@ export interface UITheme {
     ui_107: string;
     ui_cpnt_textlabel_sys_white_02: string;
     ui_cpnt_headerbar_base_area_transparent: string;
+    ui_108: string;
 }

package/dist/src/common/styles/systemUI/index.d.ts

@@ -0,0 +1 @@
+export { TooltipWrapperStyle } from './tooltipStyle';

package/dist/src/common/styles/systemUI/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipWrapperStyle = void 0;
+var tooltipStyle_1 = require("./tooltipStyle");
+Object.defineProperty(exports, "TooltipWrapperStyle", { enumerable: true, get: function () { return tooltipStyle_1.TooltipWrapperStyle; } });

package/dist/src/common/styles/systemUI/tooltipStyle.d.ts

@@ -0,0 +1 @@
+export declare const TooltipWrapperStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;

package/dist/src/common/styles/systemUI/tooltipStyle.js

@@ -0,0 +1,28 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipWrapperStyle = void 0;
+var styled_components_1 = require("styled-components");
+exports.TooltipWrapperStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  justify-content: center;\n  line-height: 1.2;\n  max-width: 240px;\n  overflow-wrap: break-word;\n  padding: ", ";\n  position: absolute;\n  text-align: left;\n  white-space: pre-wrap;\n  width: max-content;\n  word-break: keep-all;\n  z-index: 400;\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  justify-content: center;\n  line-height: 1.2;\n  max-width: 240px;\n  overflow-wrap: break-word;\n  padding: ", ";\n  position: absolute;\n  text-align: left;\n  white-space: pre-wrap;\n  width: max-content;\n  word-break: keep-all;\n  z-index: 400;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_tooltip_base;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textlabel_button_tooltip;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.desktopFontSize.caption2;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fontWeight.normal;
+}, function (_a) {
+    var theme = _a.theme;
+    return "".concat(theme.spacing.spacingA, " ").concat(theme.spacing.spacingB);
+});
+var templateObject_1;

package/dist/src/common/types/components.d.ts

@@ -1,4 +1,5 @@
 import type { FillIconNameKeys, LineIconNameKeys } from './icon';
+import type { IconCaseTooltipPositionType } from './systemUI';
 import type { PDSTextType } from './text';
 import type { ForwardedRef } from 'react';
 export type PDSValueOption = {
@@ -29,7 +30,7 @@ export type BasicButtonGroupValueOption = {
     iconFillType?: 'fill' | 'line';
     state?: 'normal' | 'disabled';
     tooltipText?: PDSTextType;
-    tooltipPosition?: 'left_top' | 'left_bottom' | 'center_top' | 'center_bottom' | 'right_top' | 'right_bottom';
+    tooltipPosition?: IconCaseTooltipPositionType;
     iconColorTheme?: 'none' | 'red';
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
@@ -40,6 +41,6 @@ export type SegmentedButtonGroupValueOption = Pick<PDSValueOption, 'value'> & {
     state?: 'normal' | 'disabled';
     iconColorTheme?: 'none' | 'red';
     tooltipText?: PDSTextType;
-    tooltipPosition?: 'left_top' | 'left_bottom' | 'center_top' | 'center_bottom' | 'right_top' | 'right_bottom';
+    tooltipPosition?: IconCaseTooltipPositionType;
 };
 export type ForwardedRefType<T> = ForwardedRef<T | null>;

package/dist/src/common/types/systemUI.d.ts

@@ -0,0 +1,13 @@
+export type SystemUIPositionType = 'top' | 'bottom' | 'start_top' | 'start_bottom' | 'end_top' | 'end_bottom' | 'left_top' | 'left_bottom' | 'center_top' | 'center_bottom' | 'right_top' | 'right_bottom';
+export type IconCaseTooltipPositionType = Exclude<SystemUIPositionType, 'start_top' | 'start_bottom' | 'end_top' | 'end_bottom'>;
+export type TextCaseTooltipPositionType = Exclude<IconCaseTooltipPositionType, 'center_top' | 'center_bottom'>;
+export type SystemUIPositionOffsetType = {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+} | null;
+export type SystemUISizeOffsetType = {
+    height: number;
+    width: number;
+} | null;

package/dist/src/common/types/systemUI.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/common/utils/SystemUIPositionGenerator/clickTypeSystemUICssGenerator.d.ts

@@ -0,0 +1,13 @@
+import type { SystemUIPositionOffsetType, SystemUISizeOffsetType } from '../../types/systemUI';
+type Props = {
+    sizeOffset: SystemUISizeOffsetType;
+    positionOffset: SystemUIPositionOffsetType;
+    distance?: number;
+};
+/**
+ * @property {sizeOffset} systemUI의 sizeOffset입니다.
+ * @property {positionOffset} 타겟의 positionOffset입니다.
+ * @property {distance} systemUI와 타겟간의 거리입니다. 기본값은 8이며 단위는 px입니다.
+ */
+export default function clickTypeSystemUICssGenerator({ sizeOffset, positionOffset, distance }: Props): string;
+export {};

package/dist/src/common/utils/SystemUIPositionGenerator/clickTypeSystemUICssGenerator.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * @property {sizeOffset} systemUI의 sizeOffset입니다.
+ * @property {positionOffset} 타겟의 positionOffset입니다.
+ * @property {distance} systemUI와 타겟간의 거리입니다. 기본값은 8이며 단위는 px입니다.
+ */
+function clickTypeSystemUICssGenerator(_a) {
+    var sizeOffset = _a.sizeOffset, positionOffset = _a.positionOffset, _b = _a.distance, distance = _b === void 0 ? 8 : _b;
+    if (!sizeOffset || !positionOffset) {
+        return '';
+    }
+    var height = sizeOffset.height;
+    var left = positionOffset.left, bottom = positionOffset.bottom, top = positionOffset.top;
+    var bottomDirectionCssValueByPx = bottom + distance;
+    var topDirectionCssValueByPx = top - distance - height;
+    var isOverBottom = window.innerHeight < bottomDirectionCssValueByPx + height;
+    return "left: ".concat(left, "px; top: ").concat(isOverBottom ? topDirectionCssValueByPx : bottomDirectionCssValueByPx, "px;");
+}
+exports.default = clickTypeSystemUICssGenerator;

package/dist/src/common/utils/SystemUIPositionGenerator/hoverTypeSystemUICssGenerator.d.ts

@@ -0,0 +1,17 @@
+import type { SystemUIPositionOffsetType, SystemUISizeOffsetType, SystemUIPositionType } from '../../types/systemUI';
+type Props = {
+    baseSize: number;
+    sizeOffset: SystemUISizeOffsetType;
+    positionOffset: SystemUIPositionOffsetType;
+    systemUIPosition: SystemUIPositionType;
+    distance?: number;
+};
+/**
+ * @property {baseSize} 타겟의 사이즈입니다.
+ * @property {sizeOffset} systemUI의 sizeOffset입니다.
+ * @property {positionOffset} 타겟의 positionOffset입니다.
+ * @property {systemUIPosition} systemUI의 위치를 결정합니다.
+ * @property {distance} systemUI가 화면의 벗어날 경우에 조정되는 position이 가질 화면 limit과의 간격값입니다. 기본값은 8이며 단위는 px입니다.
+ */
+export default function hoverTypeSystemUICssGenerator({ baseSize, sizeOffset, positionOffset, systemUIPosition, distance }: Props): string;
+export {};

package/dist/src/common/utils/SystemUIPositionGenerator/hoverTypeSystemUICssGenerator.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * @property {baseSize} 타겟의 사이즈입니다.
+ * @property {sizeOffset} systemUI의 sizeOffset입니다.
+ * @property {positionOffset} 타겟의 positionOffset입니다.
+ * @property {systemUIPosition} systemUI의 위치를 결정합니다.
+ * @property {distance} systemUI가 화면의 벗어날 경우에 조정되는 position이 가질 화면 limit과의 간격값입니다. 기본값은 8이며 단위는 px입니다.
+ */
+function hoverTypeSystemUICssGenerator(_a) {
+    var baseSize = _a.baseSize, sizeOffset = _a.sizeOffset, positionOffset = _a.positionOffset, systemUIPosition = _a.systemUIPosition, _b = _a.distance, distance = _b === void 0 ? 8 : _b;
+    if (!sizeOffset || !positionOffset) {
+        return '';
+    }
+    var end = positionOffset.left, bottom = positionOffset.bottom, top = positionOffset.top;
+    var width = sizeOffset.width, height = sizeOffset.height;
+    var centerSpotCssValueByPx = end - (width - baseSize) / 2; // 'center'의 위치 값 -> 자신의 left 위치 - (아이콘 버튼과의 길이차 / 2)
+    var overEndLimitCssValueByPx = end - width + baseSize; // 자신의 'left'에서 자기 자신의 'width'만큼 돌아온 뒤 버튼의 크기만큼 더해주어 끝선을 맞춥니다.
+    var overBottomLimitCssValueByPx = bottom + distance;
+    var overTopLimitCssValueByPx = top - height - distance;
+    var isOverEndLimit = overEndLimitCssValueByPx < 0;
+    var isOverEndLimitWhenCenterPosition = centerSpotCssValueByPx < 0;
+    var isOverStartLimit = window.innerWidth < end + width;
+    var isOverBottomLimit = window.innerHeight < overBottomLimitCssValueByPx + height;
+    var isOverTopLimit = overTopLimitCssValueByPx < 0;
+    var endDirectionCssProp = "left: ".concat(isOverEndLimit ? distance : overEndLimitCssValueByPx, "px;");
+    var startDirectionCssProp = isOverStartLimit
+        ? "right: ".concat(distance, "px;")
+        : "left: ".concat(isOverStartLimit ? distance : end, "px;");
+    var bottomDirectionCssProp = isOverBottomLimit
+        ? "bottom: ".concat(distance, "px;")
+        : "top: ".concat(overBottomLimitCssValueByPx, "px;");
+    var topDirectionCssProp = "top: ".concat(isOverTopLimit ? distance : overTopLimitCssValueByPx, "px;");
+    var centerCssPropGenerator = function () {
+        if (!isOverEndLimitWhenCenterPosition && !isOverStartLimit) {
+            return "left: ".concat(centerSpotCssValueByPx, "px;");
+        }
+        if (isOverEndLimitWhenCenterPosition) {
+            return "left: ".concat(distance, "px;");
+        }
+        if (isOverStartLimit) {
+            return "right: ".concat(distance, "px;");
+        }
+        return '';
+    };
+    switch (systemUIPosition) {
+        case 'top':
+            return "".concat(topDirectionCssProp);
+        case 'bottom':
+            return "".concat(bottomDirectionCssProp);
+        case 'end_top':
+        case 'left_top':
+            return "".concat(endDirectionCssProp, " ").concat(topDirectionCssProp);
+        case 'end_bottom':
+        case 'left_bottom':
+            return "".concat(endDirectionCssProp, " ").concat(bottomDirectionCssProp);
+        case 'center_top':
+            return "".concat(centerCssPropGenerator(), " ").concat(topDirectionCssProp);
+        case 'center_bottom':
+            return "".concat(centerCssPropGenerator(), " ").concat(bottomDirectionCssProp);
+        case 'start_top':
+        case 'right_top':
+            return "".concat(startDirectionCssProp, " ").concat(topDirectionCssProp);
+        case 'start_bottom':
+        case 'right_bottom':
+            return "".concat(startDirectionCssProp, " ").concat(bottomDirectionCssProp);
+        default:
+            return '';
+    }
+}
+exports.default = hoverTypeSystemUICssGenerator;

package/dist/src/common/utils/SystemUIPositionGenerator/index.d.ts

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

package/dist/src/common/utils/SystemUIPositionGenerator/index.js

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

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

@@ -40,6 +40,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
+var react_dom_1 = require("react-dom");
+var systemUI_1 = require("../../../common/styles/systemUI");
+var SystemUIPositionGenerator_1 = require("../../../common/utils/SystemUIPositionGenerator");
 var components_1 = require("../../../hybrid/components");
 var styled_components_1 = __importStar(require("styled-components"));
 var TextLabel_1 = require("../TextLabel");
@@ -47,6 +50,39 @@ var constants_1 = require("./constants");
 function BasicButtonGroup(_a) {
     var _b = _a.size, size = _b === void 0 ? 'medium' : _b, valueArray = _a.valueArray, _c = _a.state, state = _c === void 0 ? 'normal' : _c;
     var _d = (0, react_1.useState)(null), hoveredButtonIndex = _d[0], setHoveredButtonIndex = _d[1];
+    var _e = (0, react_1.useState)(null), tooltipSizeOffset = _e[0], setTooltipSizeOffset = _e[1];
+    var _f = (0, react_1.useState)(null), tooltipPositionOffset = _f[0], setTooltipPositionOffset = _f[1];
+    var tooltipRef = (0, react_1.useRef)(null);
+    var tooltipPositionTargetRef = (0, react_1.useRef)(null);
+    /**
+     * @when : hoveredButtonIndex 변경되었을 때
+     * @expected : tooltipPositionTargetRef, tooltipRef 의 위치를 업데이트합니다.
+     * @clear :
+     */
+    (0, react_1.useEffect)(function () {
+        if (hoveredButtonIndex === null) {
+            setTooltipSizeOffset(null);
+            return;
+        }
+        if (tooltipPositionTargetRef.current) {
+            var _a = tooltipPositionTargetRef.current.getBoundingClientRect(), top_1 = _a.top, right = _a.right, left = _a.left, bottom = _a.bottom;
+            var countFromLeft = hoveredButtonIndex;
+            var countFromRight = valueArray.length - (hoveredButtonIndex + 1);
+            var itemSizeWithGap = constants_1.ICON_BUTTON_SIZE[size] + 4;
+            setTooltipPositionOffset({
+                top: top_1 + window.scrollY,
+                right: right + window.scrollX - itemSizeWithGap * countFromRight,
+                bottom: bottom + window.scrollY,
+                left: left + window.scrollX + itemSizeWithGap * countFromLeft
+            });
+        }
+        if (tooltipRef.current) {
+            setTooltipSizeOffset({
+                height: tooltipRef.current.offsetHeight,
+                width: tooltipRef.current.offsetWidth
+            });
+        }
+    }, [hoveredButtonIndex]);
     var getColorKey = function (buttonState, iconColorTheme) {
         if (state === 'disabled' || buttonState === 'disabled') {
             return 'ui_cpnt_button_icon_disabled';
@@ -56,9 +92,20 @@ function BasicButtonGroup(_a) {
         }
         return 'ui_cpnt_button_icon_enabled';
     };
-    return ((0, jsx_runtime_1.jsx)(S_BasicButtonGroup, __assign({ "x-pds-name": "BasicButtonGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: valueArray.map(function (_a, index) {
-            var iconName = _a.iconName, _b = _a.iconFillType, iconFillType = _b === void 0 ? 'line' : _b, _c = _a.state, buttonState = _c === void 0 ? 'normal' : _c, onClick = _a.onClick, onMouseDown = _a.onMouseDown, tooltipText = _a.tooltipText, _d = _a.tooltipPosition, tooltipPosition = _d === void 0 ? 'center_bottom' : _d, _e = _a.iconColorTheme, iconColorTheme = _e === void 0 ? 'none' : _e;
-            return ((0, jsx_runtime_1.jsxs)(S_BasicButton, __assign({ size: size, onClick: function (e) { return onClick && onClick(e); }, onMouseDown: function (e) { return onMouseDown && onMouseDown(e); }, onPointerEnter: function () { return setHoveredButtonIndex(index); }, onPointerLeave: function () { return setHoveredButtonIndex(null); }, disabled: state === 'disabled' || buttonState === 'disabled' }, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, fillType: iconFillType, colorKey: getColorKey(buttonState, iconColorTheme) }), tooltipText && ((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", isTooltipOpen: hoveredButtonIndex === index, tooltipPosition: tooltipPosition, size: size }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: tooltipText, colorOverride: "ui_cpnt_textlabel_button_tooltip", styleTheme: "caption2Regular", colorTheme: "sysTextSecondary" }) })))] }), iconName + index));
+    return ((0, jsx_runtime_1.jsx)(S_BasicButtonGroup, __assign({ "x-pds-name": "BasicButtonGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop", ref: tooltipPositionTargetRef }, { children: valueArray.map(function (_a, index) {
+            var iconName = _a.iconName, _b = _a.iconFillType, iconFillType = _b === void 0 ? 'line' : _b, _c = _a.state, buttonState = _c === void 0 ? 'normal' : _c, onClick = _a.onClick, onMouseDown = _a.onMouseDown, tooltipText = _a.tooltipText, _d = _a.tooltipPosition, tooltipPosition = _d === void 0 ? 'bottom' : _d, _e = _a.iconColorTheme, iconColorTheme = _e === void 0 ? 'none' : _e;
+            var tooltipPositionCss = (0, SystemUIPositionGenerator_1.hoverTypeSystemUICssGenerator)({
+                baseSize: constants_1.ICON_BUTTON_SIZE[size],
+                sizeOffset: tooltipSizeOffset,
+                positionOffset: tooltipPositionOffset,
+                systemUIPosition: tooltipPosition.includes('_')
+                    ? tooltipPosition
+                    : "center_".concat(tooltipPosition)
+            });
+            var isHoveredButton = index === hoveredButtonIndex;
+            return ((0, jsx_runtime_1.jsxs)(S_BasicButton, __assign({ size: size, onClick: function (e) { return onClick && onClick(e); }, onMouseDown: function (e) { return onMouseDown && onMouseDown(e); }, onPointerEnter: function () { return setHoveredButtonIndex(index); }, onPointerLeave: function () { return setHoveredButtonIndex(null); }, disabled: state === 'disabled' || buttonState === 'disabled' }, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, fillType: iconFillType, colorKey: getColorKey(buttonState, iconColorTheme) }), tooltipText &&
+                        isHoveredButton &&
+                        (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", ref: tooltipRef, tooltipPositionCss: tooltipPositionCss, size: size }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: tooltipText, colorOverride: "ui_cpnt_textlabel_button_tooltip", styleTheme: "caption2Regular", colorTheme: "sysTextSecondary" }) })), document.body)] }), iconName + index));
         }) })));
 }
 var S_BasicButtonGroup = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  width: max-content;\n\n  & > button:not(:last-child) {\n    margin-right: ", ";\n  }\n"], ["\n  align-items: center;\n  display: flex;\n  width: max-content;\n\n  & > button:not(:last-child) {\n    margin-right: ", ";\n  }\n"])), function (_a) {
@@ -84,44 +131,9 @@ var S_BasicButton = styled_components_1.default.button(templateObject_5 || (temp
     var theme = _a.theme;
     return theme.ui_cpnt_basicbuttongroup_base_disabled;
 });
-var tooltipPositionSpacing = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
-    var size = _a.size;
-    return size &&
-        {
-            large: constants_1.TOOLTIP_POSITION_SPACING.large,
-            medium: constants_1.TOOLTIP_POSITION_SPACING.medium,
-            small: constants_1.TOOLTIP_POSITION_SPACING.small
-        }[size];
-});
-var tooltipLeftTop = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  bottom: ", ";\n  right: 0;\n"], ["\n  bottom: ", ";\n  right: 0;\n"])), tooltipPositionSpacing);
-var tooltipLeftBottom = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  right: 0;\n  top: ", ";\n"], ["\n  right: 0;\n  top: ", ";\n"])), tooltipPositionSpacing);
-var tooltipCenterTop = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  bottom: ", ";\n"], ["\n  bottom: ", ";\n"])), tooltipPositionSpacing);
-var tooltipCenterBottom = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  top: ", ";\n"], ["\n  top: ", ";\n"])), tooltipPositionSpacing);
-var tooltipRightTop = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  bottom: ", ";\n  left: 0;\n"], ["\n  bottom: ", ";\n  left: 0;\n"])), tooltipPositionSpacing);
-var tooltipRightBottom = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  left: 0;\n  top: ", ";\n"], ["\n  left: 0;\n  top: ", ";\n"])), tooltipPositionSpacing);
-var S_TooltipWrapper = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  padding: ", ";\n  position: absolute;\n  width: max-content;\n  z-index: 400;\n\n  ", ";\n\n  ", "\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  padding: ", ";\n  position: absolute;\n  width: max-content;\n  z-index: 400;\n\n  ", ";\n\n  ", "\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_tooltip_base;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingA;
-}, function (_a) {
-    var theme = _a.theme;
-    return "".concat(theme.spacing.spacingA, " ").concat(theme.spacing.spacingB);
-}, function (_a) {
-    var isTooltipOpen = _a.isTooltipOpen;
-    return !isTooltipOpen && 'display: none';
-}, function (_a) {
-    var tooltipPosition = _a.tooltipPosition;
-    return tooltipPosition &&
-        {
-            left_top: tooltipLeftTop,
-            left_bottom: tooltipLeftBottom,
-            center_top: tooltipCenterTop,
-            center_bottom: tooltipCenterBottom,
-            right_top: tooltipRightTop,
-            right_bottom: tooltipRightBottom
-        }[tooltipPosition];
+var S_TooltipWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n\n  ", ";\n"], ["\n  ", "\n\n  ", ";\n"])), systemUI_1.TooltipWrapperStyle, function (_a) {
+    var tooltipPositionCss = _a.tooltipPositionCss;
+    return tooltipPositionCss;
 });
 exports.default = BasicButtonGroup;
-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;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/src/desktop/components/BasicButtonGroup/constants.d.ts

@@ -3,9 +3,3 @@ export declare const ICON_BUTTON_SIZE: {
     medium: number;
     small: number;
 };
-export declare const ICON_BUTTON_TOOLTIP_SPACING = 8;
-export declare const TOOLTIP_POSITION_SPACING: {
-    large: string;
-    medium: string;
-    small: string;
-};

package/dist/src/desktop/components/BasicButtonGroup/constants.js

@@ -1,15 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TOOLTIP_POSITION_SPACING = exports.ICON_BUTTON_TOOLTIP_SPACING = exports.ICON_BUTTON_SIZE = void 0;
+exports.ICON_BUTTON_SIZE = void 0;
 exports.ICON_BUTTON_SIZE = {
     large: 48,
     medium: 40,
     small: 32
 };
-exports.ICON_BUTTON_TOOLTIP_SPACING = 8;
-// NOTE - iconSize 크기에 따라 위치를 이동시켜주고, iconButtonSize에 간격까지 8px을 추가해준 값입니다.(IconButton과 tooltip의 간격)
-exports.TOOLTIP_POSITION_SPACING = {
-    large: "calc(".concat(exports.ICON_BUTTON_SIZE.large, "px + ").concat(exports.ICON_BUTTON_TOOLTIP_SPACING, "px)"),
-    medium: "calc(".concat(exports.ICON_BUTTON_SIZE.medium, "px + ").concat(exports.ICON_BUTTON_TOOLTIP_SPACING, "px)"),
-    small: "calc(".concat(exports.ICON_BUTTON_SIZE.small, "px + ").concat(exports.ICON_BUTTON_TOOLTIP_SPACING, "px)")
-};

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import { PlacementTypes } from './Popup';
 import type { PDSTextType, PDSValueOption } from '../../../common';
 type Props = {
     titleText?: PDSTextType;
@@ -9,9 +8,8 @@ type Props = {
     hoverMode?: 'none' | 'use';
     contextMenuOptionArray?: PDSValueOption[];
     contextMenuState?: 'normal' | 'disabled';
-    colorTheme?: 'seller' | 'seller_transparent' | 'subscriber' | 'subscriber_transparent' | 'secondary_transparent_grey' | 'white_transparent_grey';
-    contextMenuPosition?: PlacementTypes;
+    colorTheme?: 'seller' | 'seller_transparent' | 'subscriber' | 'subscriber_transparent' | 'secondary_transparent_grey' | 'white_transparent_grey' | 'brand_primary_solid' | 'brand_primary_translucent' | 'secondary_transparent' | 'white_transparent';
     onClickContextMenuItem?: (option: PDSValueOption) => void;
 };
-declare function BasicChatListItem({ titleText, contentText, leftImageMode, imageSrc, hoverMode, contextMenuOptionArray, contextMenuPosition, onClickContextMenuItem, contextMenuState, colorTheme }: Props): JSX.Element;
+declare function BasicChatListItem({ titleText, contentText, leftImageMode, imageSrc, hoverMode, contextMenuOptionArray, onClickContextMenuItem, contextMenuState, colorTheme }: Props): JSX.Element;
 export default BasicChatListItem;

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

@@ -33,7 +33,11 @@ var titleTextColors = {
     subscriber: 'sysTextSecondary',
     subscriber_transparent: 'sysTextWhite',
     secondary_transparent_grey: 'sysTextSecondary',
-    white_transparent_grey: 'sysTextWhite'
+    white_transparent_grey: 'sysTextWhite',
+    brand_primary_solid: 'usrTextBrandPrimary',
+    brand_primary_translucent: 'usrTextBrandPrimary',
+    secondary_transparent: 'sysTextSecondary',
+    white_transparent: 'sysTextWhite'
 };
 var backgroundColorTheme = {
     seller: 'ui_cpnt_list_base_area_seller',
@@ -41,11 +45,15 @@ var backgroundColorTheme = {
     subscriber: 'ui_cpnt_list_base_area',
     subscriber_transparent: 'ui_cpnt_list_base_area_transparent',
     secondary_transparent_grey: 'ui_cpnt_list_base_area',
-    white_transparent_grey: 'ui_cpnt_list_base_area_transparent'
+    white_transparent_grey: 'ui_cpnt_list_base_area_transparent',
+    brand_primary_solid: 'ui_cpnt_list_base_area_seller',
+    brand_primary_translucent: 'ui_cpnt_list_base_area_transparent_seller',
+    secondary_transparent: 'ui_cpnt_list_base_area',
+    white_transparent: 'ui_cpnt_list_base_area_transparent'
 };
 function BasicChatListItem(_a) {
-    var titleText = _a.titleText, contentText = _a.contentText, _b = _a.leftImageMode, leftImageMode = _b === void 0 ? 'none' : _b, imageSrc = _a.imageSrc, _c = _a.hoverMode, hoverMode = _c === void 0 ? 'use' : _c, contextMenuOptionArray = _a.contextMenuOptionArray, _d = _a.contextMenuPosition, contextMenuPosition = _d === void 0 ? 'v-auto' : _d, onClickContextMenuItem = _a.onClickContextMenuItem, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'subscriber' : _f;
-    var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
+    var titleText = _a.titleText, contentText = _a.contentText, _b = _a.leftImageMode, leftImageMode = _b === void 0 ? 'none' : _b, imageSrc = _a.imageSrc, _c = _a.hoverMode, hoverMode = _c === void 0 ? 'use' : _c, contextMenuOptionArray = _a.contextMenuOptionArray, onClickContextMenuItem = _a.onClickContextMenuItem, _d = _a.contextMenuState, contextMenuState = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'secondary_transparent' : _e;
+    var _f = (0, react_1.useState)(false), isContextMenuOpen = _f[0], setIsContextMenuOpen = _f[1];
     var contextMenuRef = (0, react_1.useRef)(null);
     var chatBody = document.querySelector('#chatMessageBox');
     var chatBodyRect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
@@ -79,6 +87,7 @@ function BasicChatListItem(_a) {
     var contentTextColorOverride;
     var iconColorKey;
     switch (colorTheme) {
+        case 'white_transparent':
         case 'subscriber_transparent': {
             contentTextColorTheme = 'sysTextWhite';
             iconColorKey = 'ui_cpnt_button_icon_white';
@@ -98,7 +107,7 @@ function BasicChatListItem(_a) {
             iconColorKey = 'ui_cpnt_button_icon_enabled';
         }
     }
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_BasicChatListItem, __assign({ "x-pds-name": "BasicChatListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", colorTheme: colorTheme }, { children: [leftImageMode === 'use' && ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: "responsive" }) })), (0, jsx_runtime_1.jsx)(S_TitleTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", wordBreak: "break_all", colorTheme: titleTextColors[colorTheme] }) }), (0, jsx_runtime_1.jsx)(S_ContentTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: contentTextColorTheme, colorOverride: contentTextColorOverride, wordBreak: "break_all" }) }), hoverMode === 'use' && ((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: iconColorKey, 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: contextMenuPosition, wrapperHeight: chatBodyRect === null || chatBodyRect === void 0 ? void 0 : chatBodyRect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ onMouseLeave: 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_BasicChatListItem, __assign({ "x-pds-name": "BasicChatListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", colorTheme: colorTheme }, { children: [leftImageMode === 'use' && ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: "responsive" }) })), (0, jsx_runtime_1.jsx)(S_TitleTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", wordBreak: "break_all", colorTheme: titleTextColors[colorTheme] }) }), (0, jsx_runtime_1.jsx)(S_ContentTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: contentTextColorTheme, colorOverride: contentTextColorOverride, wordBreak: "break_all" }) }), hoverMode === 'use' && ((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: iconColorKey, 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: chatBodyRect === null || chatBodyRect === void 0 ? void 0 : chatBodyRect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ onMouseLeave: 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 S_BasicChatListItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  height: fit-content;\n  max-width: 100%;\n  min-height: 24px;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  background-color: ", ";\n  display: flex;\n  height: fit-content;\n  max-width: 100%;\n  min-height: 24px;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
     var colorTheme = _a.colorTheme, theme = _a.theme;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import { PlacementTypes } from './Popup';
 import type { PDSTextType, PDSValueOption } from '../../../common';
 type ColorThemeType = 'grey' | 'brand_primary' | 'translucent_white' | 'translucent_black';
 export type ChatBubbleListItemProps = {
@@ -10,11 +9,12 @@ export type ChatBubbleListItemProps = {
     colorTheme?: ColorThemeType;
     timeMode?: 'none' | 'use';
     timeText?: PDSTextType;
+    countMode?: 'none' | 'use';
+    countText?: PDSTextType;
     contextMenuOptionArray?: PDSValueOption[];
     contextMenuState?: 'normal' | 'disabled';
-    contextMenuPosition?: PlacementTypes;
     children?: React.ReactNode;
     onClickContextMenuItem?: (option: PDSValueOption) => void;
 };
-declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, contextMenuOptionArray, contextMenuState, contextMenuPosition, children, onClickContextMenuItem }: ChatBubbleListItemProps): JSX.Element;
+declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, countMode, countText, contextMenuOptionArray, contextMenuState, children, onClickContextMenuItem }: ChatBubbleListItemProps): JSX.Element;
 export default ChatBubbleListItem;