pds-dev-kit-web 2.2.8 → 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.
@@ -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;
@@ -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');
@@ -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
  };
@@ -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);
@@ -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
  };
@@ -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);
@@ -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
  };
@@ -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);
@@ -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;
@@ -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');
@@ -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
  };
@@ -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);
@@ -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
  };
@@ -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);
@@ -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
  };
@@ -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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "2.2.8",
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,10 +1,9 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v2.2.8]
3
- ## daily|https://design.storybook.publ.biz/
2
+ ## [v2.2.9-alpha.0]
3
+ ## alpha|https://design.storybook.publ.biz/
4
4
 
5
- ### common
6
- * TextFieldBase
7
- * 자동완성시 텍스트 색상이 톤을 따라 갈 수 있도록 수정
8
- ### sub
9
- * DynamicLayout - custom section
10
- * textUtil에서 PRETENDARD를 선택할 경우 Pretendard-Regular가 아닌 Pretendard JP가 부여될 수 있도록 수정
5
+ ### Component
6
+ * BasicChatListItem
7
+ * contextMenuPosition의 value 축소 (top_end만 존재)
8
+ * ChatBubbleListItem
9
+ * contextMenuPosition의 value 축소 (top_end만 존재)