pds-dev-kit-web 2.2.7 → 2.2.9-alpha.0

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 (22) hide show
  1. package/README.md +2 -2
  2. package/dist/src/desktop/common/components/TextFieldBase/TextFieldBase.js +4 -1
  3. package/dist/src/desktop/components/BasicChatListItem/BasicChatListItem.d.ts +1 -2
  4. package/dist/src/desktop/components/BasicChatListItem/BasicChatListItem.js +1 -1
  5. package/dist/src/desktop/components/BasicChatListItem/Popup.d.ts +2 -2
  6. package/dist/src/desktop/components/BasicChatListItem/Popup.js +19 -19
  7. package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.d.ts +1 -2
  8. package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.js +1 -1
  9. package/dist/src/desktop/components/ChatBubbleListItem/Popup.d.ts +2 -2
  10. package/dist/src/desktop/components/ChatBubbleListItem/Popup.js +19 -19
  11. package/dist/src/mobile/common/components/TextFieldBase/TextFieldBase.js +4 -1
  12. package/dist/src/mobile/components/BasicChatListItem/BasicChatListItem.d.ts +1 -2
  13. package/dist/src/mobile/components/BasicChatListItem/BasicChatListItem.js +1 -1
  14. package/dist/src/mobile/components/BasicChatListItem/Popup.d.ts +2 -2
  15. package/dist/src/mobile/components/BasicChatListItem/Popup.js +19 -19
  16. package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.d.ts +1 -2
  17. package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.js +1 -1
  18. package/dist/src/mobile/components/ChatBubbleListItem/Popup.d.ts +2 -2
  19. package/dist/src/mobile/components/ChatBubbleListItem/Popup.js +19 -19
  20. package/dist/src/sub/DynamicLayout/sections/CustomSection/newUtils/textUtil.js +1 -1
  21. package/package.json +1 -1
  22. package/release-note.md +7 -6
package/README.md CHANGED
@@ -8,5 +8,5 @@ publ design system 프로젝트
8
8
 
9
9
  ## 참고 문서
10
10
 
11
- 해당 패키지 버전은 PDS 문서 2.1 버전을 따르고 있음
12
- [PDS 2.1 문서 링크](https://design.docs.publ.biz/pds-project/)
11
+ 해당 패키지 버전은 PDS 문서 2.2 버전을 따르고 있음
12
+ [PDS 2.2 문서 링크](https://design.docs.publ.biz/pds-project/)
package/dist/src/desktop/common/components/TextFieldBase/TextFieldBase.js CHANGED
@@ -454,7 +454,7 @@ var inputInnerSpinButtonStyle = (0, styled_components_1.css)(templateObject_14 |
454
454
  var innerSpinButtonSize = _a.innerSpinButtonSize;
455
455
  return innerSpinButtonSize && "".concat(innerSpinButtonSize, "px");
456
456
  });
457
- var S_Input = styled_components_1.default.input(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n ", "\n flex: 1;\n line-height: ", ";\n position: relative;\n\n ::-webkit-inner-spin-button {\n ", "\n }\n ::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n"], ["\n ", "\n flex: 1;\n line-height: ", ";\n position: relative;\n\n ::-webkit-inner-spin-button {\n ", "\n }\n ::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n"])), basicStyle, function (_a) {
457
+ var S_Input = styled_components_1.default.input(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n ", "\n flex: 1;\n line-height: ", ";\n position: relative;\n\n ::-webkit-inner-spin-button {\n ", "\n }\n ::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &:-webkit-autofill,\n &:-webkit-autofill:hover,\n &:-webkit-autofill:focus,\n &:-webkit-autofill:active {\n -webkit-text-fill-color: ", " !important;\n transition: background-color 9999s ease-in-out 0s !important;\n }\n"], ["\n ", "\n flex: 1;\n line-height: ", ";\n position: relative;\n\n ::-webkit-inner-spin-button {\n ", "\n }\n ::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &:-webkit-autofill,\n &:-webkit-autofill:hover,\n &:-webkit-autofill:focus,\n &:-webkit-autofill:active {\n -webkit-text-fill-color: ", " !important;\n transition: background-color 9999s ease-in-out 0s !important;\n }\n"])), basicStyle, function (_a) {
458
458
  var theme = _a.theme;
459
459
  return theme.desktopLineHeight.singleLine;
460
460
  }, function (_a) {
@@ -462,6 +462,9 @@ var S_Input = styled_components_1.default.input(templateObject_15 || (templateOb
462
462
  return stepperMode === 'use' && type === 'number' && isFocused
463
463
  ? inputInnerSpinButtonStyle
464
464
  : '-webkit-appearance: none; margin: 0;';
465
+ }, function (_a) {
466
+ var theme = _a.theme;
467
+ return theme.ui_cpnt_textfield_text_typed;
465
468
  });
466
469
  var S_Auto = styled_components_1.default.textarea(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n ", "\n display: block;\n overflow-y: auto;\n resize: none;\n ", "\n ", ";\n"], ["\n ", "\n display: block;\n overflow-y: auto;\n resize: none;\n ", "\n ", ";\n"])), basicStyle, function (_a) {
467
470
  var autoMaxRows = _a.autoMaxRows, textSize = _a.textSize, fieldHeight = _a.fieldHeight;
package/dist/src/desktop/components/BasicChatListItem/BasicChatListItem.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  /// <reference types="react" />
2
- import { PlacementTypes } from './Popup';
3
2
  import type { PDSTextType, PDSValueOption } from '../../../common';
4
3
  type Props = {
5
4
  titleText?: PDSTextType;
@@ -10,7 +9,7 @@ type Props = {
10
9
  contextMenuOptionArray?: PDSValueOption[];
11
10
  contextMenuState?: 'normal' | 'disabled';
12
11
  colorTheme?: 'seller' | 'seller_transparent' | 'subscriber' | 'subscriber_transparent' | 'secondary_transparent_grey' | 'white_transparent_grey';
13
- contextMenuPosition?: PlacementTypes;
12
+ contextMenuPosition?: 'top_end';
14
13
  onClickContextMenuItem?: (option: PDSValueOption) => void;
15
14
  };
16
15
  declare function BasicChatListItem({ titleText, contentText, leftImageMode, imageSrc, hoverMode, contextMenuOptionArray, contextMenuPosition, onClickContextMenuItem, contextMenuState, colorTheme }: Props): JSX.Element;
package/dist/src/desktop/components/BasicChatListItem/BasicChatListItem.js CHANGED
@@ -44,7 +44,7 @@ var backgroundColorTheme = {
44
44
  white_transparent_grey: 'ui_cpnt_list_base_area_transparent'
45
45
  };
46
46
  function BasicChatListItem(_a) {
47
- 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;
47
+ 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 ? 'top_end' : _d, onClickContextMenuItem = _a.onClickContextMenuItem, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'subscriber' : _f;
48
48
  var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
49
49
  var contextMenuRef = (0, react_1.useRef)(null);
50
50
  var chatBody = document.querySelector('#chatMessageBox');
package/dist/src/desktop/components/BasicChatListItem/Popup.d.ts CHANGED
@@ -1,11 +1,11 @@
1
1
  import { MutableRefObject } from 'react';
2
- export type PlacementTypes = 'v-auto' | 'h-auto' | 'v-center' | 'h-center' | 'top' | 'top-start' | 'top-end' | 'top-both' | 'top-center' | 'bottom' | 'bottom-start' | 'bottom-end' | 'bottom-both' | 'bottom-center' | 'left' | 'left-start' | 'left-end' | 'left-center' | 'right' | 'right-start' | 'right-end' | 'right-center';
2
+ export type PlacementTypes = 'v_auto' | 'h_auto' | 'v_center' | 'h_center' | 'top' | 'top_start' | 'top_end' | 'top_both' | 'top_center' | 'bottom' | 'bottom_start' | 'bottom_end' | 'bottom_both' | 'bottom_center' | 'left' | 'left_start' | 'left_end' | 'left_center' | 'right' | 'right_start' | 'right_end' | 'right_center';
3
3
  type Props = {
4
4
  targetRef: MutableRefObject<HTMLElement | null>;
5
5
  isOpen: boolean;
6
6
  onClickOutside?: () => void;
7
7
  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
8
- placement: string;
8
+ placement: PlacementTypes;
9
9
  wrapperHeight?: number;
10
10
  children: React.ReactNode;
11
11
  };
package/dist/src/desktop/components/BasicChatListItem/Popup.js CHANGED
@@ -54,13 +54,13 @@ function getHCenterPlacement(_a) {
54
54
  function getNormalizedPlacement(_a) {
55
55
  var placement = _a.placement, targetRect = _a.targetRect, popupRect = _a.popupRect, wrapperHeight = _a.wrapperHeight;
56
56
  switch (placement) {
57
- case 'v-auto':
57
+ case 'v_auto':
58
58
  return getVAutoPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
59
- case 'h-auto':
59
+ case 'h_auto':
60
60
  return getHAutoPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
61
- case 'v-center':
61
+ case 'v_center':
62
62
  return getVCenterPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
63
- case 'h-center':
63
+ case 'h_center':
64
64
  return getHCenterPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
65
65
  default:
66
66
  return placement;
@@ -77,22 +77,22 @@ function updatePosition(_a) {
77
77
  popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
78
78
  popupElem.style.width = 'auto';
79
79
  break;
80
- case 'top-start':
80
+ case 'top_start':
81
81
  popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
82
82
  popupElem.style.left = "".concat(targetRect.left, "px");
83
83
  popupElem.style.width = 'auto';
84
84
  break;
85
- case 'top-end':
85
+ case 'top_end':
86
86
  popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
87
87
  popupElem.style.left = "".concat(targetRect.left + targetRect.width - popupRect.width, "px");
88
88
  popupElem.style.width = 'auto';
89
89
  break;
90
- case 'top-both':
90
+ case 'top_both':
91
91
  popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
92
92
  popupElem.style.left = "".concat(targetRect.left, "px");
93
93
  popupElem.style.width = "".concat(targetRect.width, "px");
94
94
  break;
95
- case 'top-center':
95
+ case 'top_center':
96
96
  popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
97
97
  popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
98
98
  popupElem.style.width = 'auto';
@@ -102,22 +102,22 @@ function updatePosition(_a) {
102
102
  popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
103
103
  popupElem.style.width = 'auto';
104
104
  break;
105
- case 'bottom-start':
105
+ case 'bottom_start':
106
106
  popupElem.style.top = "".concat(targetRect.bottom, "px");
107
107
  popupElem.style.left = "".concat(targetRect.left, "px");
108
108
  popupElem.style.width = 'auto';
109
109
  break;
110
- case 'bottom-end':
110
+ case 'bottom_end':
111
111
  popupElem.style.top = "".concat(targetRect.bottom, "px");
112
112
  popupElem.style.left = "".concat(targetRect.right - popupRect.width, "px");
113
113
  popupElem.style.width = 'auto';
114
114
  break;
115
- case 'bottom-both':
115
+ case 'bottom_both':
116
116
  popupElem.style.top = "".concat(targetRect.bottom, "px");
117
117
  popupElem.style.left = "".concat(targetRect.left, "px");
118
118
  popupElem.style.width = "".concat(targetRect.width, "px");
119
119
  break;
120
- case 'bottom-center':
120
+ case 'bottom_center':
121
121
  popupElem.style.top = "".concat(targetRect.bottom, "px");
122
122
  popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
123
123
  popupElem.style.width = 'auto';
@@ -127,17 +127,17 @@ function updatePosition(_a) {
127
127
  popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
128
128
  popupElem.style.width = 'auto';
129
129
  break;
130
- case 'left-start':
130
+ case 'left_start':
131
131
  popupElem.style.top = "".concat(targetRect.top, "px");
132
132
  popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
133
133
  popupElem.style.width = 'auto';
134
134
  break;
135
- case 'left-end':
135
+ case 'left_end':
136
136
  popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height), "px");
137
137
  popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
138
138
  popupElem.style.width = 'auto';
139
139
  break;
140
- case 'left-center':
140
+ case 'left_center':
141
141
  popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height) / 2, "px");
142
142
  popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
143
143
  popupElem.style.width = 'auto';
@@ -147,17 +147,17 @@ function updatePosition(_a) {
147
147
  popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
148
148
  popupElem.style.width = 'auto';
149
149
  break;
150
- case 'right-start':
150
+ case 'right_start':
151
151
  popupElem.style.top = "".concat(targetRect.top, "px");
152
152
  popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
153
153
  popupElem.style.width = 'auto';
154
154
  break;
155
- case 'right-end':
155
+ case 'right_end':
156
156
  popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height), "px");
157
157
  popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
158
158
  popupElem.style.width = 'auto';
159
159
  break;
160
- case 'right-center':
160
+ case 'right_center':
161
161
  popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height) / 2, "px");
162
162
  popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
163
163
  popupElem.style.width = 'auto';
@@ -168,7 +168,7 @@ function updatePosition(_a) {
168
168
  return normPlacement;
169
169
  }
170
170
  function Popup(_a) {
171
- var targetRef = _a.targetRef, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, onClickOutside = _a.onClickOutside, onClick = _a.onClick, _c = _a.placement, placement = _c === void 0 ? 'bottom-start' : _c, wrapperHeight = _a.wrapperHeight, children = _a.children;
171
+ var targetRef = _a.targetRef, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, onClickOutside = _a.onClickOutside, onClick = _a.onClick, _c = _a.placement, placement = _c === void 0 ? 'bottom_start' : _c, wrapperHeight = _a.wrapperHeight, children = _a.children;
172
172
  var popupRootRef = (0, react_1.useContext)(PopupContext);
173
173
  var _d = (0, react_1.useState)('bottom'), normPlacement = _d[0], setNormPlacement = _d[1];
174
174
  var popupRef = (0, react_1.useRef)(null);
package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  /// <reference types="react" />
2
- import { PlacementTypes } from './Popup';
3
2
  import type { PDSTextType, PDSValueOption } from '../../../common';
4
3
  type ColorThemeType = 'grey' | 'brand_primary' | 'translucent_white' | 'translucent_black';
5
4
  export type ChatBubbleListItemProps = {
@@ -12,7 +11,7 @@ export type ChatBubbleListItemProps = {
12
11
  timeText?: PDSTextType;
13
12
  contextMenuOptionArray?: PDSValueOption[];
14
13
  contextMenuState?: 'normal' | 'disabled';
15
- contextMenuPosition?: PlacementTypes;
14
+ contextMenuPosition?: 'top_end';
16
15
  children?: React.ReactNode;
17
16
  onClickContextMenuItem?: (option: PDSValueOption) => void;
18
17
  };
package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.js CHANGED
@@ -67,7 +67,7 @@ var profileImageBorderColorTheme = {
67
67
  translucent_black: 'ui_avatar_border_translucent_black'
68
68
  };
69
69
  function ChatBubbleListItem(_a) {
70
- var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, contextMenuOptionArray = _a.contextMenuOptionArray, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, _f = _a.contextMenuPosition, contextMenuPosition = _f === void 0 ? 'v-auto' : _f, children = _a.children, onClickContextMenuItem = _a.onClickContextMenuItem;
70
+ var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, contextMenuOptionArray = _a.contextMenuOptionArray, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, _f = _a.contextMenuPosition, contextMenuPosition = _f === void 0 ? 'top_end' : _f, children = _a.children, onClickContextMenuItem = _a.onClickContextMenuItem;
71
71
  var isMe = styleTheme.includes('me');
72
72
  var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
73
73
  var contextMenuRef = (0, react_1.useRef)(null);
package/dist/src/desktop/components/ChatBubbleListItem/Popup.d.ts CHANGED
@@ -1,11 +1,11 @@
1
1
  import { MutableRefObject } from 'react';
2
- export type PlacementTypes = 'v-auto' | 'h-auto' | 'v-center' | 'h-center' | 'top' | 'top-start' | 'top-end' | 'top-both' | 'top-center' | 'bottom' | 'bottom-start' | 'bottom-end' | 'bottom-both' | 'bottom-center' | 'left' | 'left-start' | 'left-end' | 'left-center' | 'right' | 'right-start' | 'right-end' | 'right-center';
2
+ export type PlacementTypes = 'v_auto' | 'h_auto' | 'v_center' | 'h_center' | 'top' | 'top_start' | 'top_end' | 'top_both' | 'top_center' | 'bottom' | 'bottom_start' | 'bottom_end' | 'bottom_both' | 'bottom_center' | 'left' | 'left_start' | 'left_end' | 'left_center' | 'right' | 'right_start' | 'right_end' | 'right_center';
3
3
  type Props = {
4
4
  targetRef: MutableRefObject<HTMLElement | null>;
5
5
  isOpen: boolean;
6
6
  onClickOutside?: () => void;
7
7
  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
8
- placement: string;
8
+ placement: PlacementTypes;
9
9
  wrapperHeight?: number;
10
10
  children: React.ReactNode;
11
11
  };
package/dist/src/desktop/components/ChatBubbleListItem/Popup.js CHANGED
@@ -54,13 +54,13 @@ function getHCenterPlacement(_a) {
54
54
  function getNormalizedPlacement(_a) {
55
55
  var placement = _a.placement, targetRect = _a.targetRect, popupRect = _a.popupRect, wrapperHeight = _a.wrapperHeight;
56
56
  switch (placement) {
57
- case 'v-auto':
57
+ case 'v_auto':
58
58
  return getVAutoPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
59
- case 'h-auto':
59
+ case 'h_auto':
60
60
  return getHAutoPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
61
- case 'v-center':
61
+ case 'v_center':
62
62
  return getVCenterPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
63
- case 'h-center':
63
+ case 'h_center':
64
64
  return getHCenterPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
65
65
  default:
66
66
  return placement;
@@ -77,22 +77,22 @@ function updatePosition(_a) {
77
77
  popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
78
78
  popupElem.style.width = 'auto';
79
79
  break;
80
- case 'top-start':
80
+ case 'top_start':
81
81
  popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
82
82
  popupElem.style.left = "".concat(targetRect.left, "px");
83
83
  popupElem.style.width = 'auto';
84
84
  break;
85
- case 'top-end':
85
+ case 'top_end':
86
86
  popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
87
87
  popupElem.style.left = "".concat(targetRect.left + targetRect.width - popupRect.width, "px");
88
88
  popupElem.style.width = 'auto';
89
89
  break;
90
- case 'top-both':
90
+ case 'top_both':
91
91
  popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
92
92
  popupElem.style.left = "".concat(targetRect.left, "px");
93
93
  popupElem.style.width = "".concat(targetRect.width, "px");
94
94
  break;
95
- case 'top-center':
95
+ case 'top_center':
96
96
  popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
97
97
  popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
98
98
  popupElem.style.width = 'auto';
@@ -102,22 +102,22 @@ function updatePosition(_a) {
102
102
  popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
103
103
  popupElem.style.width = 'auto';
104
104
  break;
105
- case 'bottom-start':
105
+ case 'bottom_start':
106
106
  popupElem.style.top = "".concat(targetRect.bottom, "px");
107
107
  popupElem.style.left = "".concat(targetRect.left, "px");
108
108
  popupElem.style.width = 'auto';
109
109
  break;
110
- case 'bottom-end':
110
+ case 'bottom_end':
111
111
  popupElem.style.top = "".concat(targetRect.bottom, "px");
112
112
  popupElem.style.left = "".concat(targetRect.right - popupRect.width, "px");
113
113
  popupElem.style.width = 'auto';
114
114
  break;
115
- case 'bottom-both':
115
+ case 'bottom_both':
116
116
  popupElem.style.top = "".concat(targetRect.bottom, "px");
117
117
  popupElem.style.left = "".concat(targetRect.left, "px");
118
118
  popupElem.style.width = "".concat(targetRect.width, "px");
119
119
  break;
120
- case 'bottom-center':
120
+ case 'bottom_center':
121
121
  popupElem.style.top = "".concat(targetRect.bottom, "px");
122
122
  popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
123
123
  popupElem.style.width = 'auto';
@@ -127,17 +127,17 @@ function updatePosition(_a) {
127
127
  popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
128
128
  popupElem.style.width = 'auto';
129
129
  break;
130
- case 'left-start':
130
+ case 'left_start':
131
131
  popupElem.style.top = "".concat(targetRect.top, "px");
132
132
  popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
133
133
  popupElem.style.width = 'auto';
134
134
  break;
135
- case 'left-end':
135
+ case 'left_end':
136
136
  popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height), "px");
137
137
  popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
138
138
  popupElem.style.width = 'auto';
139
139
  break;
140
- case 'left-center':
140
+ case 'left_center':
141
141
  popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height) / 2, "px");
142
142
  popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
143
143
  popupElem.style.width = 'auto';
@@ -147,17 +147,17 @@ function updatePosition(_a) {
147
147
  popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
148
148
  popupElem.style.width = 'auto';
149
149
  break;
150
- case 'right-start':
150
+ case 'right_start':
151
151
  popupElem.style.top = "".concat(targetRect.top, "px");
152
152
  popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
153
153
  popupElem.style.width = 'auto';
154
154
  break;
155
- case 'right-end':
155
+ case 'right_end':
156
156
  popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height), "px");
157
157
  popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
158
158
  popupElem.style.width = 'auto';
159
159
  break;
160
- case 'right-center':
160
+ case 'right_center':
161
161
  popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height) / 2, "px");
162
162
  popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
163
163
  popupElem.style.width = 'auto';
@@ -168,7 +168,7 @@ function updatePosition(_a) {
168
168
  return normPlacement;
169
169
  }
170
170
  function Popup(_a) {
171
- var targetRef = _a.targetRef, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, onClickOutside = _a.onClickOutside, onClick = _a.onClick, _c = _a.placement, placement = _c === void 0 ? 'bottom-start' : _c, wrapperHeight = _a.wrapperHeight, children = _a.children;
171
+ var targetRef = _a.targetRef, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, onClickOutside = _a.onClickOutside, onClick = _a.onClick, _c = _a.placement, placement = _c === void 0 ? 'bottom_start' : _c, wrapperHeight = _a.wrapperHeight, children = _a.children;
172
172
  var popupRootRef = (0, react_1.useContext)(PopupContext);
173
173
  var _d = (0, react_1.useState)('bottom'), normPlacement = _d[0], setNormPlacement = _d[1];
174
174
  var popupRef = (0, react_1.useRef)(null);
package/dist/src/mobile/common/components/TextFieldBase/TextFieldBase.js CHANGED
@@ -436,7 +436,7 @@ var inputInnerSpinButtonStyle = (0, styled_components_1.css)(templateObject_14 |
436
436
  var innerSpinButtonSize = _a.innerSpinButtonSize;
437
437
  return innerSpinButtonSize && "".concat(innerSpinButtonSize, "px");
438
438
  });
439
- var S_Input = styled_components_1.default.input(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n ", "\n line-height: ", ";\n position: relative;\n\n ::-webkit-inner-spin-button {\n ", "\n }\n ::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n"], ["\n ", "\n line-height: ", ";\n position: relative;\n\n ::-webkit-inner-spin-button {\n ", "\n }\n ::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n"])), basicStyle, function (_a) {
439
+ var S_Input = styled_components_1.default.input(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n ", "\n line-height: ", ";\n position: relative;\n\n ::-webkit-inner-spin-button {\n ", "\n }\n ::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &:-webkit-autofill,\n &:-webkit-autofill:hover,\n &:-webkit-autofill:focus,\n &:-webkit-autofill:active {\n -webkit-text-fill-color: ", " !important;\n transition: background-color 9999s ease-in-out 0s !important;\n }\n"], ["\n ", "\n line-height: ", ";\n position: relative;\n\n ::-webkit-inner-spin-button {\n ", "\n }\n ::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &:-webkit-autofill,\n &:-webkit-autofill:hover,\n &:-webkit-autofill:focus,\n &:-webkit-autofill:active {\n -webkit-text-fill-color: ", " !important;\n transition: background-color 9999s ease-in-out 0s !important;\n }\n"])), basicStyle, function (_a) {
440
440
  var theme = _a.theme;
441
441
  return theme.desktopLineHeight.singleLine;
442
442
  }, function (_a) {
@@ -444,6 +444,9 @@ var S_Input = styled_components_1.default.input(templateObject_15 || (templateOb
444
444
  return stepperMode === 'use' && type === 'number' && isFocused
445
445
  ? inputInnerSpinButtonStyle
446
446
  : '-webkit-appearance: none; margin: 0;';
447
+ }, function (_a) {
448
+ var theme = _a.theme;
449
+ return theme.ui_cpnt_textfield_text_typed;
447
450
  });
448
451
  var S_Auto = styled_components_1.default.textarea(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n ", "\n display: block;\n overflow-y: auto;\n resize: none;\n ", "\n ", ";\n"], ["\n ", "\n display: block;\n overflow-y: auto;\n resize: none;\n ", "\n ", ";\n"])), basicStyle, function (_a) {
449
452
  var autoMaxRows = _a.autoMaxRows, textSize = _a.textSize, fieldHeight = _a.fieldHeight;
package/dist/src/mobile/components/BasicChatListItem/BasicChatListItem.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  /// <reference types="react" />
2
- import { PlacementTypes } from './Popup';
3
2
  import type { PDSTextType, PDSValueOption } from '../../../common';
4
3
  type Props = {
5
4
  titleText?: PDSTextType;
@@ -10,7 +9,7 @@ type Props = {
10
9
  contextMenuOptionArray?: PDSValueOption[];
11
10
  contextMenuState?: 'normal' | 'disabled';
12
11
  colorTheme?: 'seller' | 'seller_transparent' | 'subscriber' | 'subscriber_transparent' | 'secondary_transparent_grey' | 'white_transparent_grey';
13
- contextMenuPosition?: PlacementTypes;
12
+ contextMenuPosition?: 'top_end';
14
13
  onClickContextMenuItem?: (option: PDSValueOption) => void;
15
14
  };
16
15
  declare function BasicChatListItem({ titleText, contentText, leftImageMode, imageSrc, hoverMode, contextMenuOptionArray, contextMenuPosition, onClickContextMenuItem, contextMenuState, colorTheme }: Props): JSX.Element;
package/dist/src/mobile/components/BasicChatListItem/BasicChatListItem.js CHANGED
@@ -44,7 +44,7 @@ var backgroundColorTheme = {
44
44
  white_transparent_grey: 'ui_cpnt_list_base_area_transparent'
45
45
  };
46
46
  function BasicChatListItem(_a) {
47
- 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;
47
+ 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 ? 'top_end' : _d, onClickContextMenuItem = _a.onClickContextMenuItem, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'subscriber' : _f;
48
48
  var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
49
49
  var contextMenuRef = (0, react_1.useRef)(null);
50
50
  var chatBody = document.querySelector('#chatMessageBox');
package/dist/src/mobile/components/BasicChatListItem/Popup.d.ts CHANGED
@@ -1,11 +1,11 @@
1
1
  import { MutableRefObject } from 'react';
2
- export type PlacementTypes = 'v-auto' | 'h-auto' | 'v-center' | 'h-center' | 'top' | 'top-start' | 'top-end' | 'top-both' | 'top-center' | 'bottom' | 'bottom-start' | 'bottom-end' | 'bottom-both' | 'bottom-center' | 'left' | 'left-start' | 'left-end' | 'left-center' | 'right' | 'right-start' | 'right-end' | 'right-center';
2
+ export type PlacementTypes = 'v_auto' | 'h_auto' | 'v_center' | 'h_center' | 'top' | 'top_start' | 'top_end' | 'top_both' | 'top_center' | 'bottom' | 'bottom_start' | 'bottom_end' | 'bottom_both' | 'bottom_center' | 'left' | 'left_start' | 'left_end' | 'left_center' | 'right' | 'right_start' | 'right_end' | 'right_center';
3
3
  type Props = {
4
4
  targetRef: MutableRefObject<HTMLElement | null>;
5
5
  isOpen: boolean;
6
6
  onClickOutside?: () => void;
7
7
  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
8
- placement: string;
8
+ placement: PlacementTypes;
9
9
  wrapperHeight?: number;
10
10
  children: React.ReactNode;
11
11
  };
package/dist/src/mobile/components/BasicChatListItem/Popup.js CHANGED
@@ -54,13 +54,13 @@ function getHCenterPlacement(_a) {
54
54
  function getNormalizedPlacement(_a) {
55
55
  var placement = _a.placement, targetRect = _a.targetRect, popupRect = _a.popupRect, wrapperHeight = _a.wrapperHeight;
56
56
  switch (placement) {
57
- case 'v-auto':
57
+ case 'v_auto':
58
58
  return getVAutoPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
59
- case 'h-auto':
59
+ case 'h_auto':
60
60
  return getHAutoPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
61
- case 'v-center':
61
+ case 'v_center':
62
62
  return getVCenterPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
63
- case 'h-center':
63
+ case 'h_center':
64
64
  return getHCenterPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
65
65
  default:
66
66
  return placement;
@@ -77,22 +77,22 @@ function updatePosition(_a) {
77
77
  popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
78
78
  popupElem.style.width = 'auto';
79
79
  break;
80
- case 'top-start':
80
+ case 'top_start':
81
81
  popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
82
82
  popupElem.style.left = "".concat(targetRect.left, "px");
83
83
  popupElem.style.width = 'auto';
84
84
  break;
85
- case 'top-end':
85
+ case 'top_end':
86
86
  popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
87
87
  popupElem.style.left = "".concat(targetRect.left + targetRect.width - popupRect.width, "px");
88
88
  popupElem.style.width = 'auto';
89
89
  break;
90
- case 'top-both':
90
+ case 'top_both':
91
91
  popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
92
92
  popupElem.style.left = "".concat(targetRect.left, "px");
93
93
  popupElem.style.width = "".concat(targetRect.width, "px");
94
94
  break;
95
- case 'top-center':
95
+ case 'top_center':
96
96
  popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
97
97
  popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
98
98
  popupElem.style.width = 'auto';
@@ -102,22 +102,22 @@ function updatePosition(_a) {
102
102
  popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
103
103
  popupElem.style.width = 'auto';
104
104
  break;
105
- case 'bottom-start':
105
+ case 'bottom_start':
106
106
  popupElem.style.top = "".concat(targetRect.bottom, "px");
107
107
  popupElem.style.left = "".concat(targetRect.left, "px");
108
108
  popupElem.style.width = 'auto';
109
109
  break;
110
- case 'bottom-end':
110
+ case 'bottom_end':
111
111
  popupElem.style.top = "".concat(targetRect.bottom, "px");
112
112
  popupElem.style.left = "".concat(targetRect.right - popupRect.width, "px");
113
113
  popupElem.style.width = 'auto';
114
114
  break;
115
- case 'bottom-both':
115
+ case 'bottom_both':
116
116
  popupElem.style.top = "".concat(targetRect.bottom, "px");
117
117
  popupElem.style.left = "".concat(targetRect.left, "px");
118
118
  popupElem.style.width = "".concat(targetRect.width, "px");
119
119
  break;
120
- case 'bottom-center':
120
+ case 'bottom_center':
121
121
  popupElem.style.top = "".concat(targetRect.bottom, "px");
122
122
  popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
123
123
  popupElem.style.width = 'auto';
@@ -127,17 +127,17 @@ function updatePosition(_a) {
127
127
  popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
128
128
  popupElem.style.width = 'auto';
129
129
  break;
130
- case 'left-start':
130
+ case 'left_start':
131
131
  popupElem.style.top = "".concat(targetRect.top, "px");
132
132
  popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
133
133
  popupElem.style.width = 'auto';
134
134
  break;
135
- case 'left-end':
135
+ case 'left_end':
136
136
  popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height), "px");
137
137
  popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
138
138
  popupElem.style.width = 'auto';
139
139
  break;
140
- case 'left-center':
140
+ case 'left_center':
141
141
  popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height) / 2, "px");
142
142
  popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
143
143
  popupElem.style.width = 'auto';
@@ -147,17 +147,17 @@ function updatePosition(_a) {
147
147
  popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
148
148
  popupElem.style.width = 'auto';
149
149
  break;
150
- case 'right-start':
150
+ case 'right_start':
151
151
  popupElem.style.top = "".concat(targetRect.top, "px");
152
152
  popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
153
153
  popupElem.style.width = 'auto';
154
154
  break;
155
- case 'right-end':
155
+ case 'right_end':
156
156
  popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height), "px");
157
157
  popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
158
158
  popupElem.style.width = 'auto';
159
159
  break;
160
- case 'right-center':
160
+ case 'right_center':
161
161
  popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height) / 2, "px");
162
162
  popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
163
163
  popupElem.style.width = 'auto';
@@ -168,7 +168,7 @@ function updatePosition(_a) {
168
168
  return normPlacement;
169
169
  }
170
170
  function Popup(_a) {
171
- var targetRef = _a.targetRef, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, onClickOutside = _a.onClickOutside, onClick = _a.onClick, _c = _a.placement, placement = _c === void 0 ? 'bottom-start' : _c, wrapperHeight = _a.wrapperHeight, children = _a.children;
171
+ var targetRef = _a.targetRef, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, onClickOutside = _a.onClickOutside, onClick = _a.onClick, _c = _a.placement, placement = _c === void 0 ? 'bottom_start' : _c, wrapperHeight = _a.wrapperHeight, children = _a.children;
172
172
  var popupRootRef = (0, react_1.useContext)(PopupContext);
173
173
  var _d = (0, react_1.useState)('bottom'), normPlacement = _d[0], setNormPlacement = _d[1];
174
174
  var popupRef = (0, react_1.useRef)(null);
package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  /// <reference types="react" />
2
- import { PlacementTypes } from './Popup';
3
2
  import type { PDSTextType, PDSValueOption } from '../../../common';
4
3
  type ColorThemeType = 'grey' | 'brand_primary' | 'translucent_white' | 'translucent_black';
5
4
  export type ChatBubbleListItemProps = {
@@ -12,7 +11,7 @@ export type ChatBubbleListItemProps = {
12
11
  timeText?: PDSTextType;
13
12
  contextMenuOptionArray?: PDSValueOption[];
14
13
  contextMenuState?: 'normal' | 'disabled';
15
- contextMenuPosition?: PlacementTypes;
14
+ contextMenuPosition?: 'top_end';
16
15
  children?: React.ReactNode;
17
16
  onClickContextMenuItem?: (option: PDSValueOption) => void;
18
17
  };
package/dist/src/mobile/components/ChatBubbleListItem/ChatBubbleListItem.js CHANGED
@@ -67,7 +67,7 @@ var profileImageBorderColorTheme = {
67
67
  translucent_black: 'ui_avatar_border_translucent_black'
68
68
  };
69
69
  function ChatBubbleListItem(_a) {
70
- var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, contextMenuOptionArray = _a.contextMenuOptionArray, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, _f = _a.contextMenuPosition, contextMenuPosition = _f === void 0 ? 'v-auto' : _f, children = _a.children, onClickContextMenuItem = _a.onClickContextMenuItem;
70
+ var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, contextMenuOptionArray = _a.contextMenuOptionArray, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, _f = _a.contextMenuPosition, contextMenuPosition = _f === void 0 ? 'top_end' : _f, children = _a.children, onClickContextMenuItem = _a.onClickContextMenuItem;
71
71
  var isMe = styleTheme.includes('me');
72
72
  var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
73
73
  var contextMenuRef = (0, react_1.useRef)(null);
package/dist/src/mobile/components/ChatBubbleListItem/Popup.d.ts CHANGED
@@ -1,11 +1,11 @@
1
1
  import { MutableRefObject } from 'react';
2
- export type PlacementTypes = 'v-auto' | 'h-auto' | 'v-center' | 'h-center' | 'top' | 'top-start' | 'top-end' | 'top-both' | 'top-center' | 'bottom' | 'bottom-start' | 'bottom-end' | 'bottom-both' | 'bottom-center' | 'left' | 'left-start' | 'left-end' | 'left-center' | 'right' | 'right-start' | 'right-end' | 'right-center';
2
+ export type PlacementTypes = 'v_auto' | 'h_auto' | 'v_center' | 'h_center' | 'top' | 'top_start' | 'top_end' | 'top_both' | 'top_center' | 'bottom' | 'bottom_start' | 'bottom_end' | 'bottom_both' | 'bottom_center' | 'left' | 'left_start' | 'left_end' | 'left_center' | 'right' | 'right_start' | 'right_end' | 'right_center';
3
3
  type Props = {
4
4
  targetRef: MutableRefObject<HTMLElement | null>;
5
5
  isOpen: boolean;
6
6
  onClickOutside?: () => void;
7
7
  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
8
- placement: string;
8
+ placement: PlacementTypes;
9
9
  wrapperHeight?: number;
10
10
  children: React.ReactNode;
11
11
  };
package/dist/src/mobile/components/ChatBubbleListItem/Popup.js CHANGED
@@ -54,13 +54,13 @@ function getHCenterPlacement(_a) {
54
54
  function getNormalizedPlacement(_a) {
55
55
  var placement = _a.placement, targetRect = _a.targetRect, popupRect = _a.popupRect, wrapperHeight = _a.wrapperHeight;
56
56
  switch (placement) {
57
- case 'v-auto':
57
+ case 'v_auto':
58
58
  return getVAutoPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
59
- case 'h-auto':
59
+ case 'h_auto':
60
60
  return getHAutoPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
61
- case 'v-center':
61
+ case 'v_center':
62
62
  return getVCenterPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
63
- case 'h-center':
63
+ case 'h_center':
64
64
  return getHCenterPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
65
65
  default:
66
66
  return placement;
@@ -77,22 +77,22 @@ function updatePosition(_a) {
77
77
  popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
78
78
  popupElem.style.width = 'auto';
79
79
  break;
80
- case 'top-start':
80
+ case 'top_start':
81
81
  popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
82
82
  popupElem.style.left = "".concat(targetRect.left, "px");
83
83
  popupElem.style.width = 'auto';
84
84
  break;
85
- case 'top-end':
85
+ case 'top_end':
86
86
  popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
87
87
  popupElem.style.left = "".concat(targetRect.left + targetRect.width - popupRect.width, "px");
88
88
  popupElem.style.width = 'auto';
89
89
  break;
90
- case 'top-both':
90
+ case 'top_both':
91
91
  popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
92
92
  popupElem.style.left = "".concat(targetRect.left, "px");
93
93
  popupElem.style.width = "".concat(targetRect.width, "px");
94
94
  break;
95
- case 'top-center':
95
+ case 'top_center':
96
96
  popupElem.style.top = "".concat(targetRect.top - popupRect.height, "px");
97
97
  popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
98
98
  popupElem.style.width = 'auto';
@@ -102,22 +102,22 @@ function updatePosition(_a) {
102
102
  popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
103
103
  popupElem.style.width = 'auto';
104
104
  break;
105
- case 'bottom-start':
105
+ case 'bottom_start':
106
106
  popupElem.style.top = "".concat(targetRect.bottom, "px");
107
107
  popupElem.style.left = "".concat(targetRect.left, "px");
108
108
  popupElem.style.width = 'auto';
109
109
  break;
110
- case 'bottom-end':
110
+ case 'bottom_end':
111
111
  popupElem.style.top = "".concat(targetRect.bottom, "px");
112
112
  popupElem.style.left = "".concat(targetRect.right - popupRect.width, "px");
113
113
  popupElem.style.width = 'auto';
114
114
  break;
115
- case 'bottom-both':
115
+ case 'bottom_both':
116
116
  popupElem.style.top = "".concat(targetRect.bottom, "px");
117
117
  popupElem.style.left = "".concat(targetRect.left, "px");
118
118
  popupElem.style.width = "".concat(targetRect.width, "px");
119
119
  break;
120
- case 'bottom-center':
120
+ case 'bottom_center':
121
121
  popupElem.style.top = "".concat(targetRect.bottom, "px");
122
122
  popupElem.style.left = "".concat(targetRect.left - (popupRect.width - targetRect.width) / 2, "px");
123
123
  popupElem.style.width = 'auto';
@@ -127,17 +127,17 @@ function updatePosition(_a) {
127
127
  popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
128
128
  popupElem.style.width = 'auto';
129
129
  break;
130
- case 'left-start':
130
+ case 'left_start':
131
131
  popupElem.style.top = "".concat(targetRect.top, "px");
132
132
  popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
133
133
  popupElem.style.width = 'auto';
134
134
  break;
135
- case 'left-end':
135
+ case 'left_end':
136
136
  popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height), "px");
137
137
  popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
138
138
  popupElem.style.width = 'auto';
139
139
  break;
140
- case 'left-center':
140
+ case 'left_center':
141
141
  popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height) / 2, "px");
142
142
  popupElem.style.left = "".concat(targetRect.left - popupRect.width, "px");
143
143
  popupElem.style.width = 'auto';
@@ -147,17 +147,17 @@ function updatePosition(_a) {
147
147
  popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
148
148
  popupElem.style.width = 'auto';
149
149
  break;
150
- case 'right-start':
150
+ case 'right_start':
151
151
  popupElem.style.top = "".concat(targetRect.top, "px");
152
152
  popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
153
153
  popupElem.style.width = 'auto';
154
154
  break;
155
- case 'right-end':
155
+ case 'right_end':
156
156
  popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height), "px");
157
157
  popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
158
158
  popupElem.style.width = 'auto';
159
159
  break;
160
- case 'right-center':
160
+ case 'right_center':
161
161
  popupElem.style.top = "".concat(targetRect.top - (popupRect.height - targetRect.height) / 2, "px");
162
162
  popupElem.style.left = "".concat(targetRect.left + targetRect.width, "px");
163
163
  popupElem.style.width = 'auto';
@@ -168,7 +168,7 @@ function updatePosition(_a) {
168
168
  return normPlacement;
169
169
  }
170
170
  function Popup(_a) {
171
- var targetRef = _a.targetRef, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, onClickOutside = _a.onClickOutside, onClick = _a.onClick, _c = _a.placement, placement = _c === void 0 ? 'bottom-start' : _c, wrapperHeight = _a.wrapperHeight, children = _a.children;
171
+ var targetRef = _a.targetRef, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, onClickOutside = _a.onClickOutside, onClick = _a.onClick, _c = _a.placement, placement = _c === void 0 ? 'bottom_start' : _c, wrapperHeight = _a.wrapperHeight, children = _a.children;
172
172
  var popupRootRef = (0, react_1.useContext)(PopupContext);
173
173
  var _d = (0, react_1.useState)('bottom'), normPlacement = _d[0], setNormPlacement = _d[1];
174
174
  var popupRef = (0, react_1.useRef)(null);
package/dist/src/sub/DynamicLayout/sections/CustomSection/newUtils/textUtil.js CHANGED
@@ -172,7 +172,7 @@ function getFontName(value) {
172
172
  case 'SYSSERIF':
173
173
  return 'serif';
174
174
  case 'PRETENDARD':
175
- return 'Pretendard-Regular, sans-serif';
175
+ return 'Pretendard JP, sans-serif';
176
176
  default:
177
177
  return '';
178
178
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "2.2.7",
3
+ "version": "2.2.9-alpha.0",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,8 +1,9 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v2.2.7]
3
- ## daily|https://design.storybook.publ.biz/
2
+ ## [v2.2.9-alpha.0]
3
+ ## alpha|https://design.storybook.publ.biz/
4
4
 
5
- ### sub
6
- * DynamicLayout - custom section
7
- * RichText CB
8
- * pre 태그의 white-space를 pre-wrap으로 부여
5
+ ### Component
6
+ * BasicChatListItem
7
+ * contextMenuPosition의 value 축소 (top_end만 존재)
8
+ * ChatBubbleListItem
9
+ * contextMenuPosition의 value 축소 (top_end만 존재)