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

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 (26) hide show
  1. package/dist/src/common/styles/colorSet/UIColor.json +2 -1
  2. package/dist/src/common/styles/colorSet/index.d.ts +1 -0
  3. package/dist/src/common/styles/colorSet/ui-type.d.ts +1 -0
  4. package/dist/src/desktop/components/BasicChatListItem/BasicChatListItem.d.ts +2 -1
  5. package/dist/src/desktop/components/BasicChatListItem/BasicChatListItem.js +1 -1
  6. package/dist/src/desktop/components/BasicChatListItem/Popup.d.ts +2 -2
  7. package/dist/src/desktop/components/BasicChatListItem/Popup.js +19 -19
  8. package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.d.ts +2 -1
  9. package/dist/src/desktop/components/ChatBubbleListItem/ChatBubbleListItem.js +1 -1
  10. package/dist/src/desktop/components/ChatBubbleListItem/Popup.d.ts +2 -2
  11. package/dist/src/desktop/components/ChatBubbleListItem/Popup.js +19 -19
  12. package/dist/src/mobile/components/BasicChatListItem/BasicChatListItem.d.ts +2 -1
  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 +2 -1
  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/mobile/components/MobileHeaderBar/MobileHeaderBar.d.ts +3 -1
  21. package/dist/src/mobile/components/MobileHeaderBar/MobileHeaderBar.js +13 -11
  22. package/dist/src/mobile/components/MobileHeaderBar/utils.d.ts +12 -0
  23. package/dist/src/mobile/components/MobileHeaderBar/utils.js +22 -0
  24. package/package.json +1 -1
  25. package/release-note.md +5 -7
  26. package/webhook/node_modules/esrecurse/.babelrc +0 -3
package/dist/src/common/styles/colorSet/UIColor.json CHANGED
@@ -835,5 +835,6 @@
835
835
  "ui_cpnt_modalwithtab_sidetab_hover": "sys_component_base_01",
836
836
  "ui_cpnt_modalwithtab_sidetab_pressed": "sys_component_base_04",
837
837
  "ui_107": "sys_component_border_white_opacity20",
838
- "ui_cpnt_textlabel_sys_white_02": "sys_text_white_02"
838
+ "ui_cpnt_textlabel_sys_white_02": "sys_text_white_02",
839
+ "ui_cpnt_headerbar_base_area_transparent": "sys_container_background_04"
839
840
  }
package/dist/src/common/styles/colorSet/index.d.ts CHANGED
@@ -1303,6 +1303,7 @@ declare const colorSet: {
1303
1303
  ui_cpnt_modalwithtab_sidetab_pressed: string;
1304
1304
  ui_107: string;
1305
1305
  ui_cpnt_textlabel_sys_white_02: string;
1306
+ ui_cpnt_headerbar_base_area_transparent: string;
1306
1307
  };
1307
1308
  readonly PaletteColor_Dark: {
1308
1309
  sys_container_background_01: string;
package/dist/src/common/styles/colorSet/ui-type.d.ts CHANGED
@@ -836,4 +836,5 @@ export interface UITheme {
836
836
  ui_cpnt_modalwithtab_sidetab_pressed: string;
837
837
  ui_107: string;
838
838
  ui_cpnt_textlabel_sys_white_02: string;
839
+ ui_cpnt_headerbar_base_area_transparent: string;
839
840
  }
package/dist/src/desktop/components/BasicChatListItem/BasicChatListItem.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ import { PlacementTypes } from './Popup';
2
3
  import type { PDSTextType, PDSValueOption } from '../../../common';
3
4
  type Props = {
4
5
  titleText?: PDSTextType;
@@ -9,7 +10,7 @@ type Props = {
9
10
  contextMenuOptionArray?: PDSValueOption[];
10
11
  contextMenuState?: 'normal' | 'disabled';
11
12
  colorTheme?: 'seller' | 'seller_transparent' | 'subscriber' | 'subscriber_transparent' | 'secondary_transparent_grey' | 'white_transparent_grey';
12
- contextMenuPosition?: 'top_end';
13
+ contextMenuPosition?: PlacementTypes;
13
14
  onClickContextMenuItem?: (option: PDSValueOption) => void;
14
15
  };
15
16
  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 ? 'top_end' : _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 ? 'v-auto' : _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: PlacementTypes;
8
+ placement: string;
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,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ import { PlacementTypes } from './Popup';
2
3
  import type { PDSTextType, PDSValueOption } from '../../../common';
3
4
  type ColorThemeType = 'grey' | 'brand_primary' | 'translucent_white' | 'translucent_black';
4
5
  export type ChatBubbleListItemProps = {
@@ -11,7 +12,7 @@ export type ChatBubbleListItemProps = {
11
12
  timeText?: PDSTextType;
12
13
  contextMenuOptionArray?: PDSValueOption[];
13
14
  contextMenuState?: 'normal' | 'disabled';
14
- contextMenuPosition?: 'top_end';
15
+ contextMenuPosition?: PlacementTypes;
15
16
  children?: React.ReactNode;
16
17
  onClickContextMenuItem?: (option: PDSValueOption) => void;
17
18
  };
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 ? 'top_end' : _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 ? 'v-auto' : _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: PlacementTypes;
8
+ placement: string;
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/components/BasicChatListItem/BasicChatListItem.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ import { PlacementTypes } from './Popup';
2
3
  import type { PDSTextType, PDSValueOption } from '../../../common';
3
4
  type Props = {
4
5
  titleText?: PDSTextType;
@@ -9,7 +10,7 @@ type Props = {
9
10
  contextMenuOptionArray?: PDSValueOption[];
10
11
  contextMenuState?: 'normal' | 'disabled';
11
12
  colorTheme?: 'seller' | 'seller_transparent' | 'subscriber' | 'subscriber_transparent' | 'secondary_transparent_grey' | 'white_transparent_grey';
12
- contextMenuPosition?: 'top_end';
13
+ contextMenuPosition?: PlacementTypes;
13
14
  onClickContextMenuItem?: (option: PDSValueOption) => void;
14
15
  };
15
16
  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 ? 'top_end' : _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 ? 'v-auto' : _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: PlacementTypes;
8
+ placement: string;
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,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ import { PlacementTypes } from './Popup';
2
3
  import type { PDSTextType, PDSValueOption } from '../../../common';
3
4
  type ColorThemeType = 'grey' | 'brand_primary' | 'translucent_white' | 'translucent_black';
4
5
  export type ChatBubbleListItemProps = {
@@ -11,7 +12,7 @@ export type ChatBubbleListItemProps = {
11
12
  timeText?: PDSTextType;
12
13
  contextMenuOptionArray?: PDSValueOption[];
13
14
  contextMenuState?: 'normal' | 'disabled';
14
- contextMenuPosition?: 'top_end';
15
+ contextMenuPosition?: PlacementTypes;
15
16
  children?: React.ReactNode;
16
17
  onClickContextMenuItem?: (option: PDSValueOption) => void;
17
18
  };
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 ? 'top_end' : _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 ? 'v-auto' : _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: PlacementTypes;
8
+ placement: string;
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/mobile/components/MobileHeaderBar/MobileHeaderBar.d.ts CHANGED
@@ -18,9 +18,11 @@ type Props = {
18
18
  iBtn1Type?: 'submit' | 'reset' | 'button';
19
19
  iBtn2State?: 'normal' | 'disabled';
20
20
  iBtn2Type?: 'submit' | 'reset' | 'button';
21
+ colorTheme?: ColorTheme;
21
22
  onClickLeftBtn?: (e: React.MouseEvent<HTMLButtonElement>) => void;
22
23
  onClickIBtn1?: (e: React.MouseEvent<HTMLButtonElement>) => void;
23
24
  onClickIBtn2?: (e: React.MouseEvent<HTMLButtonElement>) => void;
24
25
  };
25
- declare function MobileHeaderBar({ titleType, titleText, captionText, leftBtnMode, displayType, iBtn1IconName, iBtn1IconFillType, iBtn1IconColorKey, iBtn2IconName, iBtn2IconFillType, iBtn2IconColorKey, dividerMode, imageSrc, iBtn1State, iBtn1Type, iBtn2State, iBtn2Type, onClickLeftBtn, onClickIBtn1, onClickIBtn2 }: Props): JSX.Element;
26
+ export type ColorTheme = 'none' | 'transparent_white';
27
+ declare function MobileHeaderBar({ titleType, titleText, captionText, leftBtnMode, displayType, iBtn1IconName, iBtn1IconFillType, iBtn1IconColorKey, iBtn2IconName, iBtn2IconFillType, iBtn2IconColorKey, dividerMode, imageSrc, iBtn1State, iBtn1Type, iBtn2State, iBtn2Type, colorTheme, onClickLeftBtn, onClickIBtn1, onClickIBtn2 }: Props): JSX.Element;
26
28
  export default MobileHeaderBar;
package/dist/src/mobile/components/MobileHeaderBar/MobileHeaderBar.js CHANGED
@@ -23,8 +23,10 @@ var styled_components_1 = __importDefault(require("styled-components"));
23
23
  var hybrid_1 = require("../../../hybrid");
24
24
  var IconButton_1 = require("../IconButton");
25
25
  var TextLabel_1 = require("../TextLabel");
26
+ var utils_1 = require("./utils");
26
27
  function MobileHeaderBar(_a) {
27
- var _b = _a.titleType, titleType = _b === void 0 ? 'text' : _b, titleText = _a.titleText, captionText = _a.captionText, _c = _a.leftBtnMode, leftBtnMode = _c === void 0 ? 'back' : _c, _d = _a.displayType, displayType = _d === void 0 ? 'none' : _d, iBtn1IconName = _a.iBtn1IconName, _e = _a.iBtn1IconFillType, iBtn1IconFillType = _e === void 0 ? 'line' : _e, _f = _a.iBtn1IconColorKey, iBtn1IconColorKey = _f === void 0 ? 'ui_cpnt_button_icon_enabled' : _f, iBtn2IconName = _a.iBtn2IconName, _g = _a.iBtn2IconFillType, iBtn2IconFillType = _g === void 0 ? 'line' : _g, _h = _a.iBtn2IconColorKey, iBtn2IconColorKey = _h === void 0 ? 'ui_cpnt_button_icon_enabled' : _h, _j = _a.dividerMode, dividerMode = _j === void 0 ? 'none' : _j, imageSrc = _a.imageSrc, _k = _a.iBtn1State, iBtn1State = _k === void 0 ? 'normal' : _k, _l = _a.iBtn1Type, iBtn1Type = _l === void 0 ? 'button' : _l, _m = _a.iBtn2State, iBtn2State = _m === void 0 ? 'normal' : _m, _o = _a.iBtn2Type, iBtn2Type = _o === void 0 ? 'button' : _o, onClickLeftBtn = _a.onClickLeftBtn, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2;
28
+ var _b = _a.titleType, titleType = _b === void 0 ? 'text' : _b, titleText = _a.titleText, captionText = _a.captionText, _c = _a.leftBtnMode, leftBtnMode = _c === void 0 ? 'back' : _c, _d = _a.displayType, displayType = _d === void 0 ? 'none' : _d, iBtn1IconName = _a.iBtn1IconName, _e = _a.iBtn1IconFillType, iBtn1IconFillType = _e === void 0 ? 'line' : _e, iBtn1IconColorKey = _a.iBtn1IconColorKey, iBtn2IconName = _a.iBtn2IconName, _f = _a.iBtn2IconFillType, iBtn2IconFillType = _f === void 0 ? 'line' : _f, iBtn2IconColorKey = _a.iBtn2IconColorKey, _g = _a.dividerMode, dividerMode = _g === void 0 ? 'none' : _g, imageSrc = _a.imageSrc, _h = _a.iBtn1State, iBtn1State = _h === void 0 ? 'normal' : _h, _j = _a.iBtn1Type, iBtn1Type = _j === void 0 ? 'button' : _j, _k = _a.iBtn2State, iBtn2State = _k === void 0 ? 'normal' : _k, _l = _a.iBtn2Type, iBtn2Type = _l === void 0 ? 'button' : _l, _m = _a.colorTheme, colorTheme = _m === void 0 ? 'none' : _m, onClickLeftBtn = _a.onClickLeftBtn, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2;
29
+ var _o = (0, utils_1.getOptionalColorTheme)(colorTheme), titleColor = _o.titleColor, captionColor = _o.captionColor, iconButtonIconColor = _o.iconButtonIconColor, baseColor = _o.baseColor, dividerColor = _o.dividerColor;
28
30
  var handleClickLeftBtn = function (e) {
29
31
  if (onClickLeftBtn) {
30
32
  onClickLeftBtn(e);
@@ -57,18 +59,18 @@ function MobileHeaderBar(_a) {
57
59
  if (!iconName) {
58
60
  return (0, jsx_runtime_1.jsx)("div", {});
59
61
  }
60
- return ((0, jsx_runtime_1.jsx)(S_LeftButtonBox, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iconName, fillType: "fill", iconFillType: "line", baseSize: "large", iconSize: 24, shapeType: "rectangle", onClick: handleClickLeftBtn, iconColorKey: "ui_cpnt_button_icon_enabled", baseColorKey: "ui_cpnt_button_fill_base_transparent" }) }));
62
+ return ((0, jsx_runtime_1.jsx)(S_LeftButtonBox, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iconName, fillType: "fill", iconFillType: "line", baseSize: "large", iconSize: 24, shapeType: "rectangle", onClick: handleClickLeftBtn, iconColorKey: iconButtonIconColor, baseColorKey: "ui_cpnt_button_fill_base_transparent" }) }));
61
63
  };
62
64
  var title = function () {
63
65
  switch (titleType) {
64
66
  case 'text': {
65
67
  if (captionText) {
66
- return ((0, jsx_runtime_1.jsxs)(S_CaptionTextBox, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "height" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "body2Bold", singleLineMode: "use", textAlign: "center", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "height" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, colorTheme: "sysTextTertiary", styleTheme: "caption2Regular", singleLineMode: "use", textAlign: "center", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 })] }));
68
+ return ((0, jsx_runtime_1.jsxs)(S_CaptionTextBox, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "height" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, colorTheme: titleColor, styleTheme: "body2Bold", singleLineMode: "use", textAlign: "center", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "height" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, colorTheme: captionColor, styleTheme: "caption2Regular", singleLineMode: "use", textAlign: "center", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 })] }));
67
69
  }
68
- return ((0, jsx_runtime_1.jsx)(S_TextTypeBox, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "body2Bold", singleLineMode: "use", textAlign: "center", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 }) }));
70
+ return ((0, jsx_runtime_1.jsx)(S_TextTypeBox, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, colorTheme: titleColor, styleTheme: "body2Bold", singleLineMode: "use", textAlign: "center", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 }) }));
69
71
  }
70
72
  case 'profile': {
71
- return ((0, jsx_runtime_1.jsxs)(S_ProfileWrapper, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: imageSrc, shapeType: "circular", width: 40, ratio: "1_1", scaleType: "cover", borderMode: "use" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, colorTheme: "sysTextPrimary", styleTheme: "caption1Regular", singleLineMode: "use", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" })] }));
73
+ return ((0, jsx_runtime_1.jsxs)(S_ProfileWrapper, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: imageSrc, shapeType: "circular", width: 40, ratio: "1_1", scaleType: "cover", borderMode: "use" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, colorTheme: titleColor, styleTheme: "caption1Regular", singleLineMode: "use", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 1 }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" })] }));
72
74
  }
73
75
  case 'image': {
74
76
  return ((0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { src: imageSrc, shapeType: "rectangle", height: 32, scaleType: "contain", width: 160 }));
@@ -79,19 +81,19 @@ function MobileHeaderBar(_a) {
79
81
  if (displayType === 'none') {
80
82
  return (0, jsx_runtime_1.jsx)("div", {});
81
83
  }
82
- return ((0, jsx_runtime_1.jsxs)(S_IBtnBox, { children: [displayType === 'ibtn_amount2' && iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconSize: 24, baseSize: "large", iconName: iBtn2IconName, fillType: "fill", onClick: handleClickIBtn2, iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey, baseColorKey: "ui_cpnt_button_fill_base_transparent", type: iBtn2Type, state: iBtn2State })), (displayType === 'ibtn_amount1' || displayType === 'ibtn_amount2') && iBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconSize: 24, baseSize: "large", iconName: iBtn1IconName, fillType: "fill", onClick: handleClickIBtn1, iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey, baseColorKey: "ui_cpnt_button_fill_base_transparent", type: iBtn1Type, state: iBtn1State }))] }));
84
+ return ((0, jsx_runtime_1.jsxs)(S_IBtnBox, { children: [displayType === 'ibtn_amount2' && iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconSize: 24, baseSize: "large", iconName: iBtn2IconName, fillType: "fill", onClick: handleClickIBtn2, iconFillType: iBtn2IconFillType, iconColorKey: iBtn2IconColorKey !== null && iBtn2IconColorKey !== void 0 ? iBtn2IconColorKey : iconButtonIconColor, baseColorKey: "ui_cpnt_button_fill_base_transparent", type: iBtn2Type, state: iBtn2State })), (displayType === 'ibtn_amount1' || displayType === 'ibtn_amount2') && iBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconSize: 24, baseSize: "large", iconName: iBtn1IconName, fillType: "fill", onClick: handleClickIBtn1, iconFillType: iBtn1IconFillType, iconColorKey: iBtn1IconColorKey !== null && iBtn1IconColorKey !== void 0 ? iBtn1IconColorKey : iconButtonIconColor, baseColorKey: "ui_cpnt_button_fill_base_transparent", type: iBtn1Type, state: iBtn1State }))] }));
83
85
  };
84
- return ((0, jsx_runtime_1.jsxs)(S_MobileHeaderBar, __assign({ "x-pds-name": "MobileHeaderBar", "x-pds-element-type": "component", "x-pds-device-type": "mobile", hasBorder: dividerMode === 'solid', hasCaptionText: (captionText === null || captionText === void 0 ? void 0 : captionText.toString) ? true : false, expand: titleType === 'profile' }, { children: [(0, jsx_runtime_1.jsxs)(S_ButtonWrapper, { children: [(titleType === 'profile' || captionText) && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), leftIcon()] }), displayType === 'ibtn_amount2' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" }), (0, jsx_runtime_1.jsx)(S_Title, { children: title() }), (0, jsx_runtime_1.jsxs)(S_ButtonWrapper, { children: [(titleType === 'profile' || captionText) && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), iBtn()] })] })));
86
+ return ((0, jsx_runtime_1.jsxs)(S_MobileHeaderBar, __assign({ "x-pds-name": "MobileHeaderBar", "x-pds-element-type": "component", "x-pds-device-type": "mobile", hasBorder: dividerMode === 'solid', borderColor: dividerColor, hasCaptionText: (captionText === null || captionText === void 0 ? void 0 : captionText.toString) ? true : false, expand: titleType === 'profile', baseColor: baseColor }, { children: [(0, jsx_runtime_1.jsxs)(S_ButtonWrapper, { children: [(titleType === 'profile' || captionText) && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), leftIcon()] }), displayType === 'ibtn_amount2' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" }), (0, jsx_runtime_1.jsx)(S_Title, { children: title() }), (0, jsx_runtime_1.jsxs)(S_ButtonWrapper, { children: [(titleType === 'profile' || captionText) && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), iBtn()] })] })));
85
87
  }
86
88
  var S_MobileHeaderBar = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: ", ";\n background-color: ", ";\n border-bottom: ", ";\n box-sizing: border-box;\n display: flex;\n height: ", ";\n justify-content: space-between;\n padding: 0 ", ";\n"], ["\n align-items: ", ";\n background-color: ", ";\n border-bottom: ", ";\n box-sizing: border-box;\n display: flex;\n height: ", ";\n justify-content: space-between;\n padding: 0 ", ";\n"])), function (_a) {
87
89
  var expand = _a.expand, hasCaptionText = _a.hasCaptionText;
88
90
  return expand || hasCaptionText ? 'flex-start' : 'center';
89
91
  }, function (_a) {
90
- var theme = _a.theme;
91
- return theme.ui_cpnt_headerbar_base_area;
92
+ var theme = _a.theme, baseColor = _a.baseColor;
93
+ return theme[baseColor];
92
94
  }, function (_a) {
93
- var hasBorder = _a.hasBorder, theme = _a.theme;
94
- return hasBorder && "1px solid ".concat(theme.ui_cpnt_divider);
95
+ var hasBorder = _a.hasBorder, theme = _a.theme, borderColor = _a.borderColor;
96
+ return hasBorder && "1px solid ".concat(theme[borderColor]);
95
97
  }, function (_a) {
96
98
  var expand = _a.expand, hasCaptionText = _a.hasCaptionText;
97
99
  return (expand || hasCaptionText ? 'auto' : '56px');
package/dist/src/mobile/components/MobileHeaderBar/utils.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ import type { TextStyleProps } from '../TextLabel/TextLabel';
2
+ import type { ColorTheme } from './MobileHeaderBar';
3
+ import type { UiColors } from '../../../common/index';
4
+ type MobileHeaderbarColorThemeType = {
5
+ titleColor: TextStyleProps['colorTheme'];
6
+ captionColor: TextStyleProps['colorTheme'];
7
+ iconButtonIconColor: UiColors;
8
+ baseColor: UiColors;
9
+ dividerColor: UiColors;
10
+ };
11
+ export declare function getOptionalColorTheme(colorTheme: ColorTheme): MobileHeaderbarColorThemeType;
12
+ export {};
package/dist/src/mobile/components/MobileHeaderBar/utils.js ADDED
@@ -0,0 +1,22 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.getOptionalColorTheme = void 0;
4
+ function getOptionalColorTheme(colorTheme) {
5
+ if (colorTheme === 'transparent_white') {
6
+ return {
7
+ titleColor: 'sysTextWhite',
8
+ captionColor: 'sysTextWhite',
9
+ iconButtonIconColor: 'ui_cpnt_headerbar_icon_02',
10
+ baseColor: 'ui_cpnt_headerbar_base_area_transparent',
11
+ dividerColor: 'ui_cpnt_divider_white_opacity00'
12
+ };
13
+ }
14
+ return {
15
+ titleColor: 'sysTextPrimary',
16
+ captionColor: 'sysTextTertiary',
17
+ iconButtonIconColor: 'ui_cpnt_button_icon_enabled',
18
+ baseColor: 'ui_cpnt_headerbar_base_area',
19
+ dividerColor: 'ui_cpnt_divider'
20
+ };
21
+ }
22
+ exports.getOptionalColorTheme = getOptionalColorTheme;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web",
3
- "version": "2.2.9-alpha.0",
3
+ "version": "2.2.9",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,9 +1,7 @@
1
1
  # PDS-DEV-KIT-WEB Release Notes
2
- ## [v2.2.9-alpha.0]
3
- ## alpha|https://design.storybook.publ.biz/
2
+ ## [v2.2.9]
3
+ ## daily|https://design.storybook.publ.biz/
4
4
 
5
- ### Component
6
- * BasicChatListItem
7
- * contextMenuPosition의 value 축소 (top_end만 존재)
8
- * ChatBubbleListItem
9
- * contextMenuPosition의 value 축소 (top_end만 존재)
5
+ ### common
6
+ * MobileHeaderBar
7
+ * MobileHeaderBar: colorTheme transparent 추가
package/webhook/node_modules/esrecurse/.babelrc DELETED
@@ -1,3 +0,0 @@
1
- {
2
- "presets": ["es2015"]
3
- }