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

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/ContextMenu/ContextMenu.js

@@ -24,7 +24,7 @@ function ContextMenu(_a) {
     var children = _a.children, _b = _a.autoWidthMode, autoWidthMode = _b === void 0 ? 'none' : _b, maxHeight = _a.maxHeight, customWidth = _a.customWidth;
     return ((0, jsx_runtime_1.jsx)(S_ContextMenu, __assign({ "x-pds-name": "ContextMenu", "x-pds-element-type": "component", "x-pds-device-type": "desktop", autoWidth: autoWidthMode === 'use', maxHeight: maxHeight, customWidth: customWidth }, { children: children })));
 }
-var S_ContextMenu = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 14px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  list-style: none;\n  margin: 0;\n  max-height: ", ";\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  position: relative;\n  vertical-align: baseline;\n  width: ", ";\n\n  z-index: 3;\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 14px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  list-style: none;\n  margin: 0;\n  max-height: ", ";\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  position: relative;\n  vertical-align: baseline;\n  width: ", ";\n\n  z-index: 3;\n\n  ", "\n"])), function (_a) {
+var S_ContextMenu = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 14px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  list-style: none;\n  margin: 0;\n  max-height: ", ";\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  position: relative;\n  vertical-align: baseline;\n  width: ", ";\n\n  z-index: 400;\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 14px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  list-style: none;\n  margin: 0;\n  max-height: ", ";\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  position: relative;\n  vertical-align: baseline;\n  width: ", ";\n\n  z-index: 400;\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_contextmenu_base;
 }, function (_a) {

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

@@ -37,9 +37,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
+var react_dom_1 = require("react-dom");
+var clickTypeSystemUICssGenerator_1 = __importDefault(require("../../../common/utils/SystemUIPositionGenerator/clickTypeSystemUICssGenerator"));
 var styled_components_1 = __importStar(require("styled-components"));
 var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var hybrid_1 = require("../../../hybrid");
@@ -55,6 +60,10 @@ function Dropdown(_a) {
     size = _e === void 0 ? 'large' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, valueArray = _a.valueArray, customWidth = _a.customWidth, _g = _a.displayType, displayType = _g === void 0 ? 'text_only' : _g, _h = _a.fontWeight, fontWeight = _h === void 0 ? 'regular' : _h, onChange = _a.onChange;
     var _j = (0, react_1.useState)(false), isFocused = _j[0], setIsFocused = _j[1];
     var _k = (0, react_1.useState)(null), selectedValue = _k[0], setSelectedValue = _k[1];
+    var _l = (0, react_1.useState)(null), contextMenuSizeOffset = _l[0], setContextMenuSizeOffset = _l[1];
+    var _m = (0, react_1.useState)(null), dropdownPositionOffset = _m[0], setDropdownPositionOffset = _m[1];
+    var contextMenuRef = (0, react_1.useRef)(null);
+    var dropdownRef = (0, react_1.useRef)(null);
     /**
      * @when value 프롭의 값에 따라
      * @expected 값이 null일 때 드롭다운을 초기화하고, 값이 있다면 해당 값으로 설정해줍니다.
@@ -80,6 +89,36 @@ function Dropdown(_a) {
         }
         setSelectedValue(defaultValue);
     }, [defaultValue]);
+    /**
+     * @when : isFocused 변경되었을 때
+     * @expected : dropdownRef, contextMenuRef 의 위치를 업데이트합니다.
+     * @clear :
+     */
+    (0, react_1.useEffect)(function () {
+        if (!isFocused && contextMenuRef.current) {
+            setContextMenuSizeOffset(null);
+            return;
+        }
+        if (dropdownRef.current) {
+            var _a = dropdownRef.current.getBoundingClientRect(), top_1 = _a.top, right = _a.right, left = _a.left, bottom = _a.bottom;
+            setDropdownPositionOffset({
+                top: top_1 + window.scrollY,
+                right: right + window.scrollX,
+                bottom: bottom + window.scrollY,
+                left: left + window.scrollX
+            });
+        }
+        if (contextMenuRef.current) {
+            setContextMenuSizeOffset({
+                height: contextMenuRef.current.offsetHeight,
+                width: contextMenuRef.current.offsetWidth
+            });
+        }
+    }, [isFocused]);
+    var contextMenuPositionCss = (0, clickTypeSystemUICssGenerator_1.default)({
+        sizeOffset: contextMenuSizeOffset,
+        positionOffset: dropdownPositionOffset
+    });
     var handleClick = function () {
         if (state === 'disabled' || state === 'read_only') {
             return;
@@ -101,12 +140,14 @@ function Dropdown(_a) {
         }
     };
     var getCustomWidth = function () {
+        var _a;
         if (customWidth) {
             return customWidth;
         }
-        if (displayType === 'icon_only') {
-            return 'auto';
+        if ((_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) {
+            return "".concat(dropdownRef.current.offsetWidth, "px");
         }
+        return '';
     };
     var getIconColorKey = function () {
         if (state === 'disabled' || state === 'read_only') {
@@ -194,7 +235,8 @@ function Dropdown(_a) {
         var LARGE_HEIGHT = 48;
         return LARGE_HEIGHT * maxHeightItemNumber;
     }, [size, maxHeightItemNumber]);
-    return ((0, jsx_runtime_1.jsxs)(S_Dropdown, __assign({ "x-pds-name": "Dropdown", "x-pds-element-type": "component", "x-pds-device-type": "desktop", className: "container", size: size, tabIndex: 0, onBlur: handleBlur, responsiveMode: responsiveMode, customWidth: customWidth, displayType: displayType }, { children: [(0, jsx_runtime_1.jsxs)(S_Select, __assign({ size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode, customWidth: customWidth, displayType: displayType }, { children: [(0, jsx_runtime_1.jsxs)(S_TextLabel, __assign({ size: size, responsiveMode: responsiveMode, displayType: displayType }, { children: [(displayType === 'icon_only' || displayType === 'icon_text') && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.iconName) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: size === 'small' ? 20 : 24, iconName: selectedValue.iconName, fillType: selectedValue.iconFillType, colorKey: getIconColorKey() }), displayType === 'icon_text' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })), (displayType === 'text_only' || displayType === 'icon_text') && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) || (value === null || value === void 0 ? void 0 : value.text) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) || hintText, styleTheme: fontWeight === 'bold' ? 'form2Bold' : 'form2Regular', singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getTextColorOverride(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }))] })), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getArrowIconColorKey() })] })), isFocused && ((0, jsx_runtime_1.jsx)(S_ContextMenuWrapper, __assign({ displayType: displayType }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, __assign({ autoWidthMode: "use", maxHeight: maxHeight, customWidth: getCustomWidth() }, { children: valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, size: size, isSelected: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.value) === el.value, onClick: handleClickOption, state: el.state, displayType: displayType }) }, el.value)); }) })) })))] })));
+    return ((0, jsx_runtime_1.jsxs)(S_Dropdown, __assign({ "x-pds-name": "Dropdown", "x-pds-element-type": "component", "x-pds-device-type": "desktop", className: "container", ref: dropdownRef, size: size, tabIndex: 0, onBlur: handleBlur, responsiveMode: responsiveMode, customWidth: customWidth, displayType: displayType }, { children: [(0, jsx_runtime_1.jsxs)(S_Select, __assign({ size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode, customWidth: customWidth, displayType: displayType }, { children: [(0, jsx_runtime_1.jsxs)(S_TextLabel, __assign({ size: size, responsiveMode: responsiveMode, displayType: displayType }, { children: [(displayType === 'icon_only' || displayType === 'icon_text') && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.iconName) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: size === 'small' ? 20 : 24, iconName: selectedValue.iconName, fillType: selectedValue.iconFillType, colorKey: getIconColorKey() }), displayType === 'icon_text' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })), (displayType === 'text_only' || displayType === 'icon_text') && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) || (value === null || value === void 0 ? void 0 : value.text) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) || hintText, styleTheme: fontWeight === 'bold' ? 'form2Bold' : 'form2Regular', singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getTextColorOverride(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }))] })), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getArrowIconColorKey() })] })), isFocused &&
+                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_ContextMenuWrapper, __assign({ ref: contextMenuRef, contextMenuPositionCss: contextMenuPositionCss }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, __assign({ autoWidthMode: "use", maxHeight: maxHeight, customWidth: getCustomWidth() }, { children: valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)("div", __assign({ onMouseDown: function () { return handleClickOption(el); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, size: size, isSelected: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.value) === el.value, state: el.state, displayType: displayType }) }), el.value)); }) })) })), document.body)] })));
 }
 var S_TextLabel = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  padding-right: ", ";\n\n  ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  padding-right: ", ";\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -392,12 +434,9 @@ var S_Select = styled_components_1.default.div(templateObject_15 || (templateObj
     var state = _a.state;
     return state === 'normal' && normalActionColor;
 });
-var S_ContextMenuWrapper = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  display: block;\n  margin-top: ", ";\n  position: absolute;\n  width: ", ";\n"], ["\n  display: block;\n  margin-top: ", ";\n  position: absolute;\n  width: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingB;
-}, function (_a) {
-    var displayType = _a.displayType;
-    return (displayType === 'icon_only' ? '100%' : 'inherit');
+var S_ContextMenuWrapper = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  display: block;\n  position: absolute;\n\n  ", ";\n"], ["\n  display: block;\n  position: absolute;\n\n  ", ";\n"])), function (_a) {
+    var contextMenuPositionCss = _a.contextMenuPositionCss;
+    return contextMenuPositionCss;
 });
 exports.default = Dropdown;
 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, templateObject_15, templateObject_16;

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

@@ -1,8 +1,10 @@
 /// <reference types="react" />
 import type { FillIconNameKeys, LineIconNameKeys, PDSTextType, UiColors } from '../../../common';
+import type { IconCaseTooltipPositionType } from '../../../common/types/systemUI';
 export type IconButtonProps = {
     tooltipText?: PDSTextType;
-    tooltipPosition?: 'left_top' | 'left_bottom' | 'center_top' | 'center_bottom' | 'right_top' | 'right_bottom';
+    /** @deprecated 'left_top', 'left_bottom', 'right_top', 'right_bottom' will replace 'top' or 'bottom' */
+    tooltipPosition?: IconCaseTooltipPositionType;
     fillType?: 'fill' | 'line';
     shapeType?: 'circular' | 'rectangle' | 'round';
     baseSize?: 'xxlarge' | 'large' | 'medium' | 'small' | 'xsmall';