pds-dev-kit-web-test 0.2.32 → 0.2.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/index.d.ts +2 -2
  2. package/dist/src/common/index.d.ts +1 -1
  3. package/dist/src/common/styles/theme.d.ts +0 -1
  4. package/dist/src/common/styles/theme.js +3 -4
  5. package/dist/src/common/types/styled-components.d.ts +0 -3
  6. package/dist/src/desktop/components/TextLabel/TextLabel.js +89 -43
  7. package/dist/src/mobile/components/TextLabel/TextLabel.js +6 -11
  8. package/package.json +1 -2
  9. package/release-note.md +2 -5
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { UITheme, IFormValues, FillIconNameKeys, LineIconNameKeys, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, ContextMenuItemValueOption, DropdownValueOption, AdminListDropdownValueOption, BasicButtonGroupValueOption, SegmentedButtonGroupValueOption, UiColors, PdsDevKitTheme, fontWeight, desktopFontSize, desktopLineHeight, desktopEditorFontSize, desktopEditorLineHeight, mobileFontSize, mobileLineHeight, mobileEditorFontSize, mobileEditorLineHeight, boxShadow, spacing, uiColors, customTheme, theme, Form, PDSIconType, ForwardedRefType, Language } from './src/common';
2
- export { UITheme, IFormValues, FillIconNameKeys, LineIconNameKeys, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, ContextMenuItemValueOption, DropdownValueOption, AdminListDropdownValueOption, BasicButtonGroupValueOption, SegmentedButtonGroupValueOption, UiColors, PDSIconType, ForwardedRefType, Language };
1
+ import { UITheme, IFormValues, FillIconNameKeys, LineIconNameKeys, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, ContextMenuItemValueOption, DropdownValueOption, AdminListDropdownValueOption, BasicButtonGroupValueOption, SegmentedButtonGroupValueOption, UiColors, PdsDevKitTheme, fontWeight, desktopFontSize, desktopLineHeight, desktopEditorFontSize, desktopEditorLineHeight, mobileFontSize, mobileLineHeight, mobileEditorFontSize, mobileEditorLineHeight, boxShadow, spacing, uiColors, customTheme, theme, Form, PDSIconType, ForwardedRefType } from './src/common';
2
+ export { UITheme, IFormValues, FillIconNameKeys, LineIconNameKeys, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, ContextMenuItemValueOption, DropdownValueOption, AdminListDropdownValueOption, BasicButtonGroupValueOption, SegmentedButtonGroupValueOption, UiColors, PDSIconType, ForwardedRefType };
3
3
  export { fontWeight, desktopFontSize, desktopLineHeight, desktopEditorFontSize, desktopEditorLineHeight, mobileFontSize, mobileLineHeight, mobileEditorFontSize, mobileEditorLineHeight, boxShadow, spacing, uiColors, customTheme };
4
4
  export { theme };
5
5
  export { dialogOnAni, dialogOffAni, dialogOverlayOnAni, dialogOverlayOffAni, modalOnAni, modalOffAni, modalOverlayOnAni, modalOverlayOffAni } from './src/common/styles';
package/dist/src/common/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export { UITheme } from './styles/colorSet/ui-type';
2
- export { IFormValues, FillIconNameKeys, LineIconNameKeys, PDSIconType, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, ContextMenuItemValueOption, DropdownValueOption, AdminListDropdownValueOption, BasicButtonGroupValueOption, SegmentedButtonGroupValueOption, UiColors, ForwardedRefType, Language } from './types';
2
+ export { IFormValues, FillIconNameKeys, LineIconNameKeys, PDSIconType, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, ContextMenuItemValueOption, DropdownValueOption, AdminListDropdownValueOption, BasicButtonGroupValueOption, SegmentedButtonGroupValueOption, UiColors, ForwardedRefType } from './types';
3
3
  export { fontWeight, desktopFontSize, desktopLineHeight, desktopEditorFontSize, desktopEditorLineHeight, mobileFontSize, mobileLineHeight, mobileEditorFontSize, mobileEditorLineHeight, boxShadow, spacing } from './styles/theme';
4
4
  export { uiColors, customTheme } from './styles/ui-colors';
5
5
  export { theme } from './styles';
package/dist/src/common/styles/theme.d.ts CHANGED
@@ -109,7 +109,6 @@ export declare const spacing: {
109
109
  spacingM: string;
110
110
  spacingN: string;
111
111
  };
112
- export declare const language = "ko";
113
112
  declare const theme: DefaultTheme;
114
113
  type ToneType = 'DARK' | 'LIGHT';
115
114
  export declare const themeByGivenTone: (tone: ToneType) => any;
package/dist/src/common/styles/theme.js CHANGED
@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
11
11
  return __assign.apply(this, arguments);
12
12
  };
13
13
  Object.defineProperty(exports, "__esModule", { value: true });
14
- exports.themeByGivenTone = exports.language = exports.spacing = exports.boxShadow = exports.mobileEditorLineHeight = exports.mobileEditorFontSize = exports.mobileLineHeight = exports.mobileFontSize = exports.desktopEditorLineHeight = exports.desktopEditorFontSize = exports.desktopLineHeight = exports.desktopFontSize = exports.fontWeight = void 0;
14
+ exports.themeByGivenTone = exports.spacing = exports.boxShadow = exports.mobileEditorLineHeight = exports.mobileEditorFontSize = exports.mobileLineHeight = exports.mobileFontSize = exports.desktopEditorLineHeight = exports.desktopEditorFontSize = exports.desktopLineHeight = exports.desktopFontSize = exports.fontWeight = void 0;
15
15
  var ui_colors_1 = require("./ui-colors");
16
16
  exports.fontWeight = {
17
17
  normal: '500',
@@ -123,8 +123,7 @@ exports.spacing = {
123
123
  spacingM: '288px',
124
124
  spacingN: '320px'
125
125
  };
126
- exports.language = 'ko';
127
- var theme = __assign({ fontWeight: exports.fontWeight, desktopFontSize: exports.desktopFontSize, desktopLineHeight: exports.desktopLineHeight, desktopEditorFontSize: exports.desktopEditorFontSize, desktopEditorLineHeight: exports.desktopEditorLineHeight, mobileFontSize: exports.mobileFontSize, mobileLineHeight: exports.mobileLineHeight, mobileEditorFontSize: exports.mobileEditorFontSize, mobileEditorLineHeight: exports.mobileEditorLineHeight, boxShadow: exports.boxShadow, spacing: exports.spacing, language: exports.language }, (0, ui_colors_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK', window.PdsUtils ? window.PdsUtils.palette : {}));
128
- var themeByGivenTone = function (tone) { return (__assign(__assign({}, (0, ui_colors_1.customTheme)(tone)), { fontWeight: exports.fontWeight, desktopFontSize: exports.desktopFontSize, desktopLineHeight: exports.desktopLineHeight, desktopEditorFontSize: exports.desktopEditorFontSize, desktopEditorLineHeight: exports.desktopEditorLineHeight, mobileFontSize: exports.mobileFontSize, mobileLineHeight: exports.mobileLineHeight, mobileEditorFontSize: exports.mobileEditorFontSize, mobileEditorLineHeight: exports.mobileEditorLineHeight, boxShadow: exports.boxShadow, spacing: exports.spacing, language: exports.language })); };
126
+ var theme = __assign({ fontWeight: exports.fontWeight, desktopFontSize: exports.desktopFontSize, desktopLineHeight: exports.desktopLineHeight, desktopEditorFontSize: exports.desktopEditorFontSize, desktopEditorLineHeight: exports.desktopEditorLineHeight, mobileFontSize: exports.mobileFontSize, mobileLineHeight: exports.mobileLineHeight, mobileEditorFontSize: exports.mobileEditorFontSize, mobileEditorLineHeight: exports.mobileEditorLineHeight, boxShadow: exports.boxShadow, spacing: exports.spacing }, (0, ui_colors_1.customTheme)(window.PdsUtils ? window.PdsUtils.tone : 'DARK', window.PdsUtils ? window.PdsUtils.palette : {}));
127
+ var themeByGivenTone = function (tone) { return (__assign(__assign({}, (0, ui_colors_1.customTheme)(tone)), { fontWeight: exports.fontWeight, desktopFontSize: exports.desktopFontSize, desktopLineHeight: exports.desktopLineHeight, desktopEditorFontSize: exports.desktopEditorFontSize, desktopEditorLineHeight: exports.desktopEditorLineHeight, mobileFontSize: exports.mobileFontSize, mobileLineHeight: exports.mobileLineHeight, mobileEditorFontSize: exports.mobileEditorFontSize, mobileEditorLineHeight: exports.mobileEditorLineHeight, boxShadow: exports.boxShadow, spacing: exports.spacing })); };
129
128
  exports.themeByGivenTone = themeByGivenTone;
130
129
  exports.default = theme;
package/dist/src/common/types/styled-components.d.ts CHANGED
@@ -111,8 +111,5 @@ export interface PdsDevKitTheme {
111
111
  spacingN: '320px';
112
112
  };
113
113
  }
114
- export interface Language {
115
- language: string;
116
- }
117
114
  export type DesktopFontSize = keyof typeof desktopFontSize;
118
115
  export type FontWeight = keyof typeof fontWeight;
package/dist/src/desktop/components/TextLabel/TextLabel.js CHANGED
@@ -40,15 +40,76 @@ var __importStar = (this && this.__importStar) || function (mod) {
40
40
  Object.defineProperty(exports, "__esModule", { value: true });
41
41
  var jsx_runtime_1 = require("react/jsx-runtime");
42
42
  var react_1 = require("react");
43
+ var react_dom_1 = require("react-dom");
43
44
  var styled_components_1 = __importStar(require("styled-components"));
44
45
  var hybrid_1 = require("../../../hybrid");
45
46
  function TextLabel(_a) {
46
- var text = _a.text, tooltipText = _a.tooltipText, _b = _a.tooltipPosition, tooltipPosition = _b === void 0 ? 'right_bottom' : _b, _c = _a.tooltipIconColorKey, tooltipIconColorKey = _c === void 0 ? 'ui_cpnt_icon_sys_grey_03' : _c, _d = _a.textAlign, textAlign = _d === void 0 ? 'left' : _d, _e = _a.styleTheme, styleTheme = _e === void 0 ? 'body2Bold' : _e, colorOverride = _a.colorOverride, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'sysTextPrimary' : _f, _g = _a.singleLineMode, singleLineMode = _g === void 0 ? 'none' : _g, _h = _a.ellipsisMode, ellipsisMode = _h === void 0 ? 'none' : _h, lineLimit = _a.lineLimit, _j = _a.userSelectMode, userSelectMode = _j === void 0 ? 'none' : _j, customFontSize = _a.customFontSize, customFontWeight = _a.customFontWeight, _k = _a.textDecorationType, textDecorationType = _k === void 0 ? 'none' : _k, _l = _a.requirementMode, requirementMode = _l === void 0 ? 'none' : _l, _m = _a.bulletPointMode, bulletPointMode = _m === void 0 ? 'none' : _m, wordBreak = _a.wordBreak, letterSpacing = _a.letterSpacing;
47
- var _o = (0, react_1.useState)(false), isTooltipOpen = _o[0], setIsTooltipOpen = _o[1];
48
- var handleTooltipToggle = function (value) {
49
- setIsTooltipOpen(value);
47
+ var text = _a.text, tooltipText = _a.tooltipText, _b = _a.tooltipPosition, tooltipPosition = _b === void 0 ? 'right_bottom' : _b, _c = _a.tooltipIconColorKey, tooltipIconColorKey = _c === void 0 ? 'ui_cpnt_icon_sys_grey_03' : _c, _d = _a.textAlign, textAlign = _d === void 0 ? 'left' : _d, _e = _a.styleTheme, styleTheme = _e === void 0 ? 'body2Bold' : _e, colorOverride = _a.colorOverride, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'sysTextPrimary' : _f, _g = _a.singleLineMode, singleLineMode = _g === void 0 ? 'none' : _g, _h = _a.ellipsisMode, ellipsisMode = _h === void 0 ? 'none' : _h, lineLimit = _a.lineLimit, _j = _a.userSelectMode, userSelectMode = _j === void 0 ? 'none' : _j, customFontSize = _a.customFontSize, customFontWeight = _a.customFontWeight, _k = _a.textDecorationType, textDecorationType = _k === void 0 ? 'none' : _k, _l = _a.requirementMode, requirementMode = _l === void 0 ? 'none' : _l, _m = _a.bulletPointMode, bulletPointMode = _m === void 0 ? 'none' : _m, _o = _a.wordBreak, wordBreak = _o === void 0 ? 'keep_all' : _o, letterSpacing = _a.letterSpacing;
48
+ var _p = (0, react_1.useState)(false), isTooltipOpen = _p[0], setIsTooltipOpen = _p[1];
49
+ var _q = (0, react_1.useState)(null), tooltipSizeOffset = _q[0], setTooltipSizeOffset = _q[1];
50
+ var _r = (0, react_1.useState)(null), tooltipPositionOffset = _r[0], setTooltipPositionOffset = _r[1];
51
+ var tooltipRef = (0, react_1.useRef)(null);
52
+ var tooltipPositionTargetRef = (0, react_1.useRef)(null);
53
+ var handleTooltipOpen = function () {
54
+ setIsTooltipOpen(true);
50
55
  };
51
- return ((0, jsx_runtime_1.jsxs)(S_TextLabel, __assign({ "x-pds-name": "TextLabel", "x-pds-element-type": "component", "x-pds-device-type": "desktop", textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, userSelectMode: userSelectMode, customFontSize: customFontSize, customFontWeight: customFontWeight, textDecorationType: textDecorationType, bulletPointMode: bulletPointMode, wordBreak: wordBreak, "$letterSpacing": letterSpacing }, { children: [text, requirementMode === 'use' && ((0, jsx_runtime_1.jsx)(S_AfterTextBox, __assign({ styleTheme: styleTheme }, { children: (0, jsx_runtime_1.jsx)(S_IconWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_requirement", size: 16, fillType: "line", colorKey: "ui_cpnt_icon_sys_error_01" }) }) }))), tooltipText && ((0, jsx_runtime_1.jsxs)(S_AfterTextBox, __assign({ styleTheme: styleTheme }, { children: [(0, jsx_runtime_1.jsx)(S_IconWrapper, __assign({ onMouseEnter: function () { return handleTooltipToggle(true); }, onMouseLeave: function () { return handleTooltipToggle(false); } }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_question", size: 16, fillType: "fill", colorKey: tooltipIconColorKey }) })), (0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", isTooltipOpen: isTooltipOpen, tooltipPosition: tooltipPosition }, { children: "".concat(tooltipText) }))] })))] })));
56
+ var handleTooltipClose = function () {
57
+ setIsTooltipOpen(false);
58
+ };
59
+ /**
60
+ * @when : isTooltipOpen이 변경되었을 때
61
+ * @expected : tooltipPositionTargetRef, tooltipRef 의 위치를 업데이트합니다.
62
+ * @clear :
63
+ */
64
+ (0, react_1.useEffect)(function () {
65
+ if (tooltipPositionTargetRef.current) {
66
+ var _a = tooltipPositionTargetRef.current.getBoundingClientRect(), top_1 = _a.top, right = _a.right, left = _a.left, bottom = _a.bottom;
67
+ setTooltipPositionOffset({
68
+ top: top_1 + window.scrollY,
69
+ right: right + window.scrollX,
70
+ bottom: bottom + window.scrollY,
71
+ left: left + window.scrollX
72
+ });
73
+ }
74
+ if (!isTooltipOpen && tooltipRef.current) {
75
+ setTooltipSizeOffset(null);
76
+ return;
77
+ }
78
+ if (tooltipRef.current) {
79
+ setTooltipSizeOffset({
80
+ height: tooltipRef.current.offsetHeight,
81
+ width: tooltipRef.current.offsetWidth
82
+ });
83
+ }
84
+ }, [isTooltipOpen]);
85
+ var tooltipPositionCss = getTooltipPositionCss(tooltipSizeOffset, tooltipPositionOffset, tooltipPosition);
86
+ return ((0, jsx_runtime_1.jsxs)(S_TextLabel, __assign({ "x-pds-name": "TextLabel", "x-pds-element-type": "component", "x-pds-device-type": "desktop", textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, userSelectMode: userSelectMode, customFontSize: customFontSize, customFontWeight: customFontWeight, textDecorationType: textDecorationType, bulletPointMode: bulletPointMode, wordBreak: wordBreak, "$letterSpacing": letterSpacing }, { children: [text, requirementMode === 'use' && ((0, jsx_runtime_1.jsx)(S_AfterTextBox, __assign({ styleTheme: styleTheme }, { children: (0, jsx_runtime_1.jsx)(S_IconWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_requirement", size: 16, fillType: "line", colorKey: "ui_cpnt_icon_sys_error_01" }) }) }))), tooltipText && ((0, jsx_runtime_1.jsxs)(S_AfterTextBox, __assign({ styleTheme: styleTheme, ref: tooltipPositionTargetRef }, { children: [(0, jsx_runtime_1.jsx)(S_IconWrapper, __assign({ onMouseEnter: handleTooltipOpen, onMouseLeave: handleTooltipClose }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_question", size: 16, fillType: "fill", colorKey: tooltipIconColorKey }) })), (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", ref: tooltipRef, isTooltipOpen: isTooltipOpen, tooltipPosition: tooltipPosition, tooltipPositionCss: tooltipPositionCss, onMouseEnter: handleTooltipOpen, onMouseLeave: handleTooltipClose }, { children: "".concat(tooltipText) })), document.body)] })))] })));
87
+ }
88
+ function getTooltipPositionCss(size, position, positionType) {
89
+ if (!size || !position) {
90
+ return '';
91
+ }
92
+ var left = position.left, bottom = position.bottom, top = position.top;
93
+ var width = size.width, height = size.height;
94
+ var leftValue = left - width + 16;
95
+ var bottomValue = bottom + 4;
96
+ var topValue = top - height - 4;
97
+ var isOverLeft = leftValue < 0;
98
+ var isOverRight = window.innerWidth < left + width;
99
+ var isOverBottom = window.innerHeight < bottomValue + height;
100
+ var isOverTop = topValue < 0;
101
+ switch (positionType) {
102
+ case 'left_bottom':
103
+ return "\n left: ".concat(isOverLeft ? 5 : leftValue, "px;\n ").concat(isOverBottom ? 'bottom: 5px;' : "top: ".concat(bottomValue, "px;"));
104
+ case 'left_top':
105
+ return "\n left: ".concat(isOverLeft ? 5 : leftValue, "px;\n top: ").concat(isOverTop ? 5 : topValue, "px;");
106
+ case 'right_bottom':
107
+ return "\n ".concat(isOverRight ? 'right: 5px;' : "left: ".concat(isOverRight ? 5 : left, "px;"), "\n ").concat(isOverBottom ? 'bottom: 5px;' : "top: ".concat(bottomValue, "px;"));
108
+ case 'right_top':
109
+ return "\n ".concat(isOverRight ? 'right: 5px;' : "left: ".concat(isOverRight ? 5 : left, "px;"), "\n top: ").concat(isOverTop ? 5 : topValue, "px;");
110
+ default:
111
+ return '';
112
+ }
52
113
  }
53
114
  var displayBold = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"], ["\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"])), function (_a) {
54
115
  var theme = _a.theme;
@@ -315,26 +376,17 @@ var ellipsisStyle = (0, styled_components_1.css)(templateObject_35 || (templateO
315
376
  });
316
377
  var userSelectModeStyle = (0, styled_components_1.css)(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n -khtml-user-select: none;\n -moz-user-select: -moz-none;\n -ms-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n"], ["\n -khtml-user-select: none;\n -moz-user-select: -moz-none;\n -ms-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n"])));
317
378
  var bulletPointModeStyle = (0, styled_components_1.css)(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n padding-left: 16px;\n ::before {\n content: '\u2022';\n left: 0;\n position: absolute;\n width: 16px;\n }\n"], ["\n padding-left: 16px;\n ::before {\n content: '\u2022';\n left: 0;\n position: absolute;\n width: 16px;\n }\n"])));
318
- var tooltipLeftTop = (0, styled_components_1.css)(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n bottom: 20px;\n right: 0;\n"], ["\n bottom: 20px;\n right: 0;\n"])));
319
- var tooltipLeftBottom = (0, styled_components_1.css)(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n right: 0;\n top: 20px;\n"], ["\n right: 0;\n top: 20px;\n"])));
320
- var tooltipRightTop = (0, styled_components_1.css)(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n bottom: 20px;\n left: 0;\n"], ["\n bottom: 20px;\n left: 0;\n"])));
321
- var tooltipRightBottom = (0, styled_components_1.css)(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n left: 0;\n top: 20px;\n"], ["\n left: 0;\n top: 20px;\n"])));
322
- var S_TextLabel = styled_components_1.default.div(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n box-sizing: border-box;\n overflow-wrap: break-word;\n text-align: ", ";\n white-space: pre-wrap;\n\n ", ";\n\n ", ";\n\n ", ";\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n box-sizing: border-box;\n overflow-wrap: break-word;\n text-align: ", ";\n white-space: pre-wrap;\n\n ", ";\n\n ", ";\n\n ", ";\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
379
+ var S_TextLabel = styled_components_1.default.div(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n box-sizing: border-box;\n overflow-wrap: break-word;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: ", ";\n\n ", ";\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n box-sizing: border-box;\n overflow-wrap: break-word;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: ", ";\n\n ", ";\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
323
380
  var textAlign = _a.textAlign;
324
381
  return textAlign;
325
- }, function (_a) {
326
- var theme = _a.theme;
327
- return ['ko', 'ko-KR', 'ko-kr'].includes(theme.language)
328
- ? 'word-break: keep-all'
329
- : 'word-break: normal';
330
382
  }, function (_a) {
331
383
  var wordBreak = _a.wordBreak;
332
384
  return wordBreak &&
333
385
  {
334
- normal: 'word-break: normal',
335
- break_all: 'word-break: break-all',
336
- keep_all: 'word-break: keep-all',
337
- break_word: 'word-break: break-word'
386
+ normal: 'normal',
387
+ break_all: 'break-all',
388
+ keep_all: 'keep-all',
389
+ break_word: 'break-word'
338
390
  }[wordBreak];
339
391
  }, function (_a) {
340
392
  var $letterSpacing = _a.$letterSpacing;
@@ -409,19 +461,19 @@ var S_TextLabel = styled_components_1.default.div(templateObject_42 || (template
409
461
  var bulletPointMode = _a.bulletPointMode;
410
462
  return bulletPointMode === 'use' && bulletPointModeStyle;
411
463
  });
412
- var displayAfterTextBox = (0, styled_components_1.css)(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
413
- var headingAfterTextBox = (0, styled_components_1.css)(templateObject_44 || (templateObject_44 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
414
- var wizardPageTitleAfterTextBox = (0, styled_components_1.css)(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n margin-bottom: 7px;\n"], ["\n margin-bottom: 7px;\n"])));
415
- var leadParaAfterTextBox = (0, styled_components_1.css)(templateObject_46 || (templateObject_46 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
416
- var subTitleAfterTextBox = (0, styled_components_1.css)(templateObject_47 || (templateObject_47 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
417
- var body1AfterTextBox = (0, styled_components_1.css)(templateObject_48 || (templateObject_48 = __makeTemplateObject(["\n margin-bottom: 2px;\n"], ["\n margin-bottom: 2px;\n"])));
418
- var body2AfterTextBox = (0, styled_components_1.css)(templateObject_49 || (templateObject_49 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
419
- var caption1AfterTextBox = (0, styled_components_1.css)(templateObject_50 || (templateObject_50 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
420
- var caption2AfterTextBox = (0, styled_components_1.css)(templateObject_51 || (templateObject_51 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
421
- var form1AfterTextBox = (0, styled_components_1.css)(templateObject_52 || (templateObject_52 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
422
- var form2AfterTextBox = (0, styled_components_1.css)(templateObject_53 || (templateObject_53 = __makeTemplateObject(["\n margin-bottom: 2px;\n"], ["\n margin-bottom: 2px;\n"])));
423
- var blog1RAfterTextBox = (0, styled_components_1.css)(templateObject_54 || (templateObject_54 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
424
- var S_AfterTextBox = styled_components_1.default.div(templateObject_55 || (templateObject_55 = __makeTemplateObject(["\n display: inline-block;\n margin-left: ", ";\n position: relative;\n vertical-align: middle;\n\n ", ";\n"], ["\n display: inline-block;\n margin-left: ", ";\n position: relative;\n vertical-align: middle;\n\n ", ";\n"])), function (_a) {
464
+ var displayAfterTextBox = (0, styled_components_1.css)(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
465
+ var headingAfterTextBox = (0, styled_components_1.css)(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
466
+ var wizardPageTitleAfterTextBox = (0, styled_components_1.css)(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n margin-bottom: 7px;\n"], ["\n margin-bottom: 7px;\n"])));
467
+ var leadParaAfterTextBox = (0, styled_components_1.css)(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
468
+ var subTitleAfterTextBox = (0, styled_components_1.css)(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
469
+ var body1AfterTextBox = (0, styled_components_1.css)(templateObject_44 || (templateObject_44 = __makeTemplateObject(["\n margin-bottom: 2px;\n"], ["\n margin-bottom: 2px;\n"])));
470
+ var body2AfterTextBox = (0, styled_components_1.css)(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
471
+ var caption1AfterTextBox = (0, styled_components_1.css)(templateObject_46 || (templateObject_46 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
472
+ var caption2AfterTextBox = (0, styled_components_1.css)(templateObject_47 || (templateObject_47 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
473
+ var form1AfterTextBox = (0, styled_components_1.css)(templateObject_48 || (templateObject_48 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
474
+ var form2AfterTextBox = (0, styled_components_1.css)(templateObject_49 || (templateObject_49 = __makeTemplateObject(["\n margin-bottom: 2px;\n"], ["\n margin-bottom: 2px;\n"])));
475
+ var blog1RAfterTextBox = (0, styled_components_1.css)(templateObject_50 || (templateObject_50 = __makeTemplateObject(["\n margin-bottom: 3px;\n"], ["\n margin-bottom: 3px;\n"])));
476
+ var S_AfterTextBox = styled_components_1.default.div(templateObject_51 || (templateObject_51 = __makeTemplateObject(["\n display: inline-block;\n margin-left: ", ";\n position: relative;\n vertical-align: middle;\n\n ", ";\n"], ["\n display: inline-block;\n margin-left: ", ";\n position: relative;\n vertical-align: middle;\n\n ", ";\n"])), function (_a) {
425
477
  var theme = _a.theme;
426
478
  return theme.spacing.spacingA;
427
479
  }, function (_a) {
@@ -450,8 +502,8 @@ var S_AfterTextBox = styled_components_1.default.div(templateObject_55 || (templ
450
502
  blog1Regular: blog1RAfterTextBox
451
503
  }[styleTheme];
452
504
  });
453
- var S_IconWrapper = styled_components_1.default.div(templateObject_56 || (templateObject_56 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 16px;\n height: 100%;\n justify-content: center;\n width: 16px;\n"], ["\n align-items: center;\n display: flex;\n height: 16px;\n height: 100%;\n justify-content: center;\n width: 16px;\n"])));
454
- var S_TooltipWrapper = styled_components_1.default.div(templateObject_57 || (templateObject_57 = __makeTemplateObject(["\n ", "\n align-items: center;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n display: flex;\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 ", ";\n\n ", ";\n"], ["\n ", "\n align-items: center;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n display: flex;\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 ", ";\n\n ", ";\n"])), caption2Regular, function (_a) {
505
+ var S_IconWrapper = styled_components_1.default.div(templateObject_52 || (templateObject_52 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 16px;\n height: 100%;\n justify-content: center;\n width: 16px;\n"], ["\n align-items: center;\n display: flex;\n height: 16px;\n height: 100%;\n justify-content: center;\n width: 16px;\n"])));
506
+ var S_TooltipWrapper = styled_components_1.default.div(templateObject_53 || (templateObject_53 = __makeTemplateObject(["\n ", "\n align-items: center;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n display: flex;\n justify-content: center;\n line-height: 1.2;\n max-width: 240px;\n overflow-wrap: break-word;\n padding: ", ";\n position: fixed;\n text-align: left;\n white-space: pre-wrap;\n width: max-content;\n word-break: keep-all;\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 color: ", ";\n display: flex;\n justify-content: center;\n line-height: 1.2;\n max-width: 240px;\n overflow-wrap: break-word;\n padding: ", ";\n position: fixed;\n text-align: left;\n white-space: pre-wrap;\n width: max-content;\n word-break: keep-all;\n z-index: 400;\n\n ", ";\n ", ";\n"])), caption2Regular, function (_a) {
455
507
  var theme = _a.theme;
456
508
  return theme.ui_cpnt_button_tooltip_base;
457
509
  }, function (_a) {
@@ -467,14 +519,8 @@ var S_TooltipWrapper = styled_components_1.default.div(templateObject_57 || (tem
467
519
  var isTooltipOpen = _a.isTooltipOpen;
468
520
  return !isTooltipOpen && 'display: none';
469
521
  }, function (_a) {
470
- var tooltipPosition = _a.tooltipPosition;
471
- return tooltipPosition &&
472
- {
473
- left_top: tooltipLeftTop,
474
- left_bottom: tooltipLeftBottom,
475
- right_top: tooltipRightTop,
476
- right_bottom: tooltipRightBottom
477
- }[tooltipPosition];
522
+ var tooltipPositionCss = _a.tooltipPositionCss;
523
+ return tooltipPositionCss && tooltipPositionCss;
478
524
  });
479
525
  exports.default = TextLabel;
480
- 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, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49, templateObject_50, templateObject_51, templateObject_52, templateObject_53, templateObject_54, templateObject_55, templateObject_56, templateObject_57;
526
+ 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, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49, templateObject_50, templateObject_51, templateObject_52, templateObject_53;
package/dist/src/mobile/components/TextLabel/TextLabel.js CHANGED
@@ -42,7 +42,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
42
42
  var styled_components_1 = __importStar(require("styled-components"));
43
43
  var hybrid_1 = require("../../../hybrid");
44
44
  function TextLabel(_a) {
45
- var text = _a.text, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'body2Bold' : _c, colorOverride = _a.colorOverride, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'sysTextPrimary' : _d, _e = _a.singleLineMode, singleLineMode = _e === void 0 ? 'none' : _e, _f = _a.ellipsisMode, ellipsisMode = _f === void 0 ? 'none' : _f, lineLimit = _a.lineLimit, _g = _a.userSelectMode, userSelectMode = _g === void 0 ? 'none' : _g, customFontSize = _a.customFontSize, customFontWeight = _a.customFontWeight, _h = _a.textDecorationType, textDecorationType = _h === void 0 ? 'none' : _h, _j = _a.requirementMode, requirementMode = _j === void 0 ? 'none' : _j, _k = _a.bulletPointMode, bulletPointMode = _k === void 0 ? 'none' : _k, wordBreak = _a.wordBreak, letterSpacing = _a.letterSpacing;
45
+ var text = _a.text, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'body2Bold' : _c, colorOverride = _a.colorOverride, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'sysTextPrimary' : _d, _e = _a.singleLineMode, singleLineMode = _e === void 0 ? 'none' : _e, _f = _a.ellipsisMode, ellipsisMode = _f === void 0 ? 'none' : _f, lineLimit = _a.lineLimit, _g = _a.userSelectMode, userSelectMode = _g === void 0 ? 'none' : _g, customFontSize = _a.customFontSize, customFontWeight = _a.customFontWeight, _h = _a.textDecorationType, textDecorationType = _h === void 0 ? 'none' : _h, _j = _a.requirementMode, requirementMode = _j === void 0 ? 'none' : _j, _k = _a.bulletPointMode, bulletPointMode = _k === void 0 ? 'none' : _k, _l = _a.wordBreak, wordBreak = _l === void 0 ? 'keep_all' : _l, letterSpacing = _a.letterSpacing;
46
46
  return ((0, jsx_runtime_1.jsxs)(S_TextLabel, __assign({ "x-pds-name": "TextLabel", "x-pds-element-type": "component", "x-pds-device-type": "mobile", textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, userSelectMode: userSelectMode, customFontSize: customFontSize, customFontWeight: customFontWeight, textDecorationType: textDecorationType, bulletPointMode: bulletPointMode, wordBreak: wordBreak, "$letterSpacing": letterSpacing }, { children: [text, requirementMode === 'use' && ((0, jsx_runtime_1.jsx)(S_AfterTextBox, __assign({ styleTheme: styleTheme }, { children: (0, jsx_runtime_1.jsx)(S_IconWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: "ic_requirement", size: 16, fillType: "line", colorKey: "ui_cpnt_icon_sys_error_01" }) }) })))] })));
47
47
  }
48
48
  var displayBold = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"], ["\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"])), function (_a) {
@@ -310,22 +310,17 @@ var ellipsisStyle = (0, styled_components_1.css)(templateObject_35 || (templateO
310
310
  });
311
311
  var userSelectModeStyle = (0, styled_components_1.css)(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n -khtml-user-select: none;\n -moz-user-select: -moz-none;\n -ms-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n"], ["\n -khtml-user-select: none;\n -moz-user-select: -moz-none;\n -ms-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n"])));
312
312
  var bulletPointModeStyle = (0, styled_components_1.css)(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n padding-left: 16px;\n ::before {\n content: '\u2022';\n left: 0;\n position: absolute;\n width: 16px;\n }\n"], ["\n padding-left: 16px;\n ::before {\n content: '\u2022';\n left: 0;\n position: absolute;\n width: 16px;\n }\n"])));
313
- var S_TextLabel = styled_components_1.default.div(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n box-sizing: border-box;\n overflow-wrap: break-word;\n text-align: ", ";\n white-space: pre-wrap;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n box-sizing: border-box;\n overflow-wrap: break-word;\n text-align: ", ";\n white-space: pre-wrap;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
313
+ var S_TextLabel = styled_components_1.default.div(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n box-sizing: border-box;\n overflow-wrap: break-word;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: ", ";\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n box-sizing: border-box;\n overflow-wrap: break-word;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: ", ";\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
314
314
  var textAlign = _a.textAlign;
315
315
  return textAlign;
316
- }, function (_a) {
317
- var theme = _a.theme;
318
- return ['ko', 'ko-KR', 'ko-kr'].includes(theme.language)
319
- ? 'word-break: keep-all'
320
- : 'word-break: normal';
321
316
  }, function (_a) {
322
317
  var wordBreak = _a.wordBreak;
323
318
  return wordBreak &&
324
319
  {
325
- normal: 'word-break: normal',
326
- break_all: 'word-break: break-all',
327
- keep_all: 'word-break: keep-all',
328
- break_word: 'word-break: break-word'
320
+ normal: 'normal',
321
+ break_all: 'break-all',
322
+ keep_all: 'keep-all',
323
+ break_word: 'break-word'
329
324
  }[wordBreak];
330
325
  }, function (_a) {
331
326
  var $letterSpacing = _a.$letterSpacing;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web-test",
3
- "version": "0.2.32",
3
+ "version": "0.2.33",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
@@ -88,7 +88,6 @@
88
88
  "@types/react-router-dom": "^5.3.3",
89
89
  "@types/smoothscroll-polyfill": "^0.3.1",
90
90
  "@types/styled-components": "^5.1.9",
91
- "@typescript-eslint/eslint-plugin": "^6.4.0",
92
91
  "@typescript-eslint/parser": "^6.3.0",
93
92
  "chromatic": "^6.0.6",
94
93
  "dotenv-cli": "^4.0.0",
package/release-note.md CHANGED
@@ -1,10 +1,7 @@
1
1
  # pds-dev-kit-web-test Release Notes
2
- ## [v0.2.32]
2
+ ## [v0.2.33]
3
3
  ## 기준 pds-dev-kit-web 버전 @2.1.23
4
4
 
5
- ### Package
6
- * theme
7
- * language값을 받을 수 있도록 수정
8
5
  ### Component
9
6
  * TextLabel
10
- * theme의 language값에 따라 word-break의 기본값이 설정되도록 수정
7
+ * tooltip이 떠있을 때 가려지는 문제와 영역 밖을 벗어나는 문제를 해결