agora-ui-foundation 3.10.0 → 3.10.1

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 (20) hide show
  1. package/lib/components/button/index.css +9 -0
  2. package/lib/components/chat-manager/index.css +7 -0
  3. package/lib/components/chat-manager/index.d.ts +6 -6
  4. package/lib/components/chat-manager/index.js +6 -6
  5. package/lib/components/chat-wrapper/index.css +1 -1
  6. package/lib/components/drop-menu/index.js +1 -1
  7. package/lib/components/participants/attendee/index.css +0 -1
  8. package/lib/components/participants/footer/index.js +7 -3
  9. package/lib/components/tabs/index.css +22 -4
  10. package/lib/components/tabs/index.js +8 -2
  11. package/lib-es/components/button/index.css +9 -0
  12. package/lib-es/components/chat-manager/index.css +7 -0
  13. package/lib-es/components/chat-manager/index.js +6 -6
  14. package/lib-es/components/chat-wrapper/index.css +1 -1
  15. package/lib-es/components/drop-menu/index.js +1 -1
  16. package/lib-es/components/participants/attendee/index.css +0 -1
  17. package/lib-es/components/participants/footer/index.js +7 -3
  18. package/lib-es/components/tabs/index.css +22 -4
  19. package/lib-es/components/tabs/index.js +8 -2
  20. package/package.json +3 -3
package/lib/components/button/index.css CHANGED
@@ -12,6 +12,12 @@
12
12
  flex-shrink: 0;
13
13
  border: 1px solid var(--fcr_ui_scene_line1) !important;
14
14
  }
15
+ .fcr-button > div {
16
+ overflow: hidden;
17
+ text-overflow: ellipsis;
18
+ white-space: nowrap;
19
+ width: 100%;
20
+ }
15
21
 
16
22
  .fcr-button-block {
17
23
  width: 100%;
@@ -41,6 +47,7 @@
41
47
  background: var(--fcr_ui_scene_ramp_brand6);
42
48
  color: var(--fcr_ui_scene_white10);
43
49
  --effect-color: var(--fcr_ui_scene_ramp_brand4);
50
+ border: none !important;
44
51
  }
45
52
 
46
53
  .fcr-button-primary:not(:disabled, .fcr-button-extra-active):hover {
@@ -57,6 +64,7 @@
57
64
  color: var(--fcr_ui_scene_white10);
58
65
  background: var(--fcr_ui_scene_ramp_red6);
59
66
  --effect-color: var(--fcr_ui_scene_ramp_red4);
67
+ border: none !important;
60
68
  }
61
69
 
62
70
  .fcr-button-primary.fcr-button-danger:not(:disabled, .fcr-button-extra-active):hover {
@@ -73,6 +81,7 @@
73
81
  color: var(--fcr_ui_scene_white10);
74
82
  background: var(--fcr_ui_scene_ramp_green6);
75
83
  --effect-color: var(--fcr_ui_scene_ramp_green6);
84
+ border: none !important;
76
85
  }
77
86
  .fcr-button-primary.fcr-button-success:not(:disabled, .fcr-button-extra-active):hover {
78
87
  background: var(--fcr_ui_scene_ramp_green7);
package/lib/components/chat-manager/index.css CHANGED
@@ -53,9 +53,16 @@
53
53
  }
54
54
 
55
55
  .fcr_chat_settings_switch {
56
+ display: flex;
57
+ align-items: center;
58
+ justify-content: center;
56
59
  transform-origin: center;
57
60
  }
58
61
 
62
+ .fcr_chat_settings_switch .fcr-switch {
63
+ transform-origin: center center;
64
+ }
65
+
59
66
  .fcr_chat_manager_popover_overlay {
60
67
  max-width: unset !important;
61
68
  }
package/lib/components/chat-manager/index.d.ts CHANGED
@@ -2,12 +2,12 @@ import React, { PropsWithChildren } from 'react';
2
2
  import './index.css';
3
3
  /** Room type (copied from core for ui-foundation independence). */
4
4
  export declare enum FcrRoomType {
5
- Mainroom = 11,
6
- Waitingroom = 102,
7
- Subroom = 101,
8
- Interpreterroom = 103,
9
- JoinBeforeHostWaitingRoom = 104,
10
- Infinityroom = 12
5
+ Mainroom = 0,
6
+ Subroom = 1,
7
+ Waitingroom = 2,
8
+ Interpreterroom = 3,
9
+ JoinBeforeHostWaitingRoom = 4,
10
+ Infinityroom = 5
11
11
  }
12
12
  /** Target user role for privilege (copied from core). */
13
13
  export declare enum FcrTargetUserType {
package/lib/components/chat-manager/index.js CHANGED
@@ -44,12 +44,12 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
44
44
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
45
45
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** Room type (copied from core for ui-foundation independence). */
46
46
  var FcrRoomType = exports.FcrRoomType = /*#__PURE__*/function (FcrRoomType) {
47
- FcrRoomType[FcrRoomType["Mainroom"] = 11] = "Mainroom";
48
- FcrRoomType[FcrRoomType["Waitingroom"] = 102] = "Waitingroom";
49
- FcrRoomType[FcrRoomType["Subroom"] = 101] = "Subroom";
50
- FcrRoomType[FcrRoomType["Interpreterroom"] = 103] = "Interpreterroom";
51
- FcrRoomType[FcrRoomType["JoinBeforeHostWaitingRoom"] = 104] = "JoinBeforeHostWaitingRoom";
52
- FcrRoomType[FcrRoomType["Infinityroom"] = 12] = "Infinityroom";
47
+ FcrRoomType[FcrRoomType["Mainroom"] = 0] = "Mainroom";
48
+ FcrRoomType[FcrRoomType["Subroom"] = 1] = "Subroom";
49
+ FcrRoomType[FcrRoomType["Waitingroom"] = 2] = "Waitingroom";
50
+ FcrRoomType[FcrRoomType["Interpreterroom"] = 3] = "Interpreterroom";
51
+ FcrRoomType[FcrRoomType["JoinBeforeHostWaitingRoom"] = 4] = "JoinBeforeHostWaitingRoom";
52
+ FcrRoomType[FcrRoomType["Infinityroom"] = 5] = "Infinityroom";
53
53
  return FcrRoomType;
54
54
  }({});
55
55
  /** Target user role for privilege (copied from core). */
package/lib/components/chat-wrapper/index.css CHANGED
@@ -40,7 +40,7 @@
40
40
 
41
41
  .fcr-chat-container {
42
42
  scrollbar-width: none;
43
-
43
+ height: 100%;
44
44
  display: flex;
45
45
  flex: 1;
46
46
  flex-direction: column;
package/lib/components/drop-menu/index.js CHANGED
@@ -83,7 +83,7 @@ var FcrDropOption = exports.FcrDropOption = function FcrDropOption(option) {
83
83
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
84
84
  className: "fcr-drop-menu-option-text",
85
85
  children: option.title
86
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
86
+ }), (option.value && hasSubMenu || icon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
87
87
  className: "fcr-drop-menu-option-content",
88
88
  children: [option.value && hasSubMenu && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
89
89
  className: "fcr-drop-menu-option-value",
package/lib/components/participants/attendee/index.css CHANGED
@@ -129,7 +129,6 @@
129
129
 
130
130
  .fcr-participant__footer button:last-child {
131
131
  width: 100%;
132
- padding: 0;
133
132
  }
134
133
 
135
134
  .attendee__user-media,
package/lib/components/participants/footer/index.js CHANGED
@@ -339,16 +339,20 @@ var FcrParticipantsFooter = exports.FcrParticipantsFooter = function FcrParticip
339
339
  }, node.key != null ? String(node.key) : "footer-overflow-".concat(i));
340
340
  })
341
341
  }),
342
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
342
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_button.FcrButton, {
343
343
  type: "secondary-bordered",
344
344
  size: "XS",
345
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
345
+ children: [t('fmt_participants_member_button_more'), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
346
346
  type: _type.FcrIconType.FCR_MORE2,
347
347
  size: 14,
348
348
  colors: {
349
349
  iconPrimary: 'var(--fcr_ui_scene_icontext1)'
350
+ },
351
+ style: {
352
+ display: 'inline-block',
353
+ marginTop: -2
350
354
  }
351
- })
355
+ })]
352
356
  })
353
357
  });
354
358
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
package/lib/components/tabs/index.css CHANGED
@@ -21,15 +21,29 @@
21
21
  }
22
22
 
23
23
  .fcr-tabs__nav-item {
24
- padding: 7px 0;
24
+ padding: 7px 2px;
25
25
  width: var(--fcr-tabs__nav-item__width);
26
- text-align: center;
27
26
  position: relative;
28
27
  z-index: 10;
29
28
  transition: 0.3s all;
30
29
  font-weight: 400;
31
30
  font-size: 14px;
32
31
  flex: 1;
32
+ box-sizing: border-box;
33
+ min-width: 0;
34
+ display: flex;
35
+ align-items: center;
36
+ justify-content: center;
37
+ }
38
+
39
+ .fcr-tabs__nav-item-text {
40
+ display: block;
41
+ max-width: 100%;
42
+ min-width: 0;
43
+ overflow: hidden;
44
+ text-overflow: ellipsis;
45
+ white-space: nowrap;
46
+ text-align: center;
33
47
  }
34
48
 
35
49
  .fcr-tabs__nav-item.fcr-tabs__nav-item--active {
@@ -60,7 +74,6 @@
60
74
  }
61
75
 
62
76
  .fcr-fashion-tabs .fcr-tabs__nav-item {
63
- text-align: left;
64
77
  padding: 0 0 0 0;
65
78
  /* width: unset; */
66
79
  color: var(--fcr_ui_scene_icontext2);
@@ -92,9 +105,14 @@
92
105
  }
93
106
 
94
107
  .fcr-fashion-tabs .fcr-tabs__nav-list .fcr-tabs__nav-item {
95
- display: inline-block;
108
+ display: inline-flex;
109
+ align-items: center;
96
110
  font-size: 14px;
97
111
  position: relative;
98
112
  width: auto;
99
113
  margin-right: 18px;
100
114
  }
115
+
116
+ .fcr-fashion-tabs .fcr-tabs__nav-item-text {
117
+ text-align: left;
118
+ }
package/lib/components/tabs/index.js CHANGED
@@ -145,7 +145,10 @@ var FcrTabs = exports.FcrTabs = function FcrTabs(_ref) {
145
145
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
146
146
  className: cls,
147
147
  onClick: handleClick,
148
- children: label
148
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
149
+ className: "fcr-tabs__nav-item-text",
150
+ children: label
151
+ })
149
152
  }, key);
150
153
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
151
154
  className: "fcr-tabs__nav-indicator",
@@ -178,7 +181,10 @@ var FcrFashionTabs = exports.FcrFashionTabs = function FcrFashionTabs(_ref3) {
178
181
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
179
182
  className: cls,
180
183
  onClick: handleClick,
181
- children: [label, isActive && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
184
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
185
+ className: "fcr-tabs__nav-item-text",
186
+ children: label
187
+ }), isActive && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
182
188
  className: "fcr-fashion-tabs__nav-indicator",
183
189
  style: {
184
190
  right: -6,
package/lib-es/components/button/index.css CHANGED
@@ -12,6 +12,12 @@
12
12
  flex-shrink: 0;
13
13
  border: 1px solid var(--fcr_ui_scene_line1) !important;
14
14
  }
15
+ .fcr-button > div {
16
+ overflow: hidden;
17
+ text-overflow: ellipsis;
18
+ white-space: nowrap;
19
+ width: 100%;
20
+ }
15
21
 
16
22
  .fcr-button-block {
17
23
  width: 100%;
@@ -41,6 +47,7 @@
41
47
  background: var(--fcr_ui_scene_ramp_brand6);
42
48
  color: var(--fcr_ui_scene_white10);
43
49
  --effect-color: var(--fcr_ui_scene_ramp_brand4);
50
+ border: none !important;
44
51
  }
45
52
 
46
53
  .fcr-button-primary:not(:disabled, .fcr-button-extra-active):hover {
@@ -57,6 +64,7 @@
57
64
  color: var(--fcr_ui_scene_white10);
58
65
  background: var(--fcr_ui_scene_ramp_red6);
59
66
  --effect-color: var(--fcr_ui_scene_ramp_red4);
67
+ border: none !important;
60
68
  }
61
69
 
62
70
  .fcr-button-primary.fcr-button-danger:not(:disabled, .fcr-button-extra-active):hover {
@@ -73,6 +81,7 @@
73
81
  color: var(--fcr_ui_scene_white10);
74
82
  background: var(--fcr_ui_scene_ramp_green6);
75
83
  --effect-color: var(--fcr_ui_scene_ramp_green6);
84
+ border: none !important;
76
85
  }
77
86
  .fcr-button-primary.fcr-button-success:not(:disabled, .fcr-button-extra-active):hover {
78
87
  background: var(--fcr_ui_scene_ramp_green7);
package/lib-es/components/chat-manager/index.css CHANGED
@@ -53,9 +53,16 @@
53
53
  }
54
54
 
55
55
  .fcr_chat_settings_switch {
56
+ display: flex;
57
+ align-items: center;
58
+ justify-content: center;
56
59
  transform-origin: center;
57
60
  }
58
61
 
62
+ .fcr_chat_settings_switch .fcr-switch {
63
+ transform-origin: center center;
64
+ }
65
+
59
66
  .fcr_chat_manager_popover_overlay {
60
67
  max-width: unset !important;
61
68
  }
package/lib-es/components/chat-manager/index.js CHANGED
@@ -31,12 +31,12 @@ import './index.css';
31
31
  /** Room type (copied from core for ui-foundation independence). */
32
32
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
33
33
  export var FcrRoomType = /*#__PURE__*/function (FcrRoomType) {
34
- FcrRoomType[FcrRoomType["Mainroom"] = 11] = "Mainroom";
35
- FcrRoomType[FcrRoomType["Waitingroom"] = 102] = "Waitingroom";
36
- FcrRoomType[FcrRoomType["Subroom"] = 101] = "Subroom";
37
- FcrRoomType[FcrRoomType["Interpreterroom"] = 103] = "Interpreterroom";
38
- FcrRoomType[FcrRoomType["JoinBeforeHostWaitingRoom"] = 104] = "JoinBeforeHostWaitingRoom";
39
- FcrRoomType[FcrRoomType["Infinityroom"] = 12] = "Infinityroom";
34
+ FcrRoomType[FcrRoomType["Mainroom"] = 0] = "Mainroom";
35
+ FcrRoomType[FcrRoomType["Subroom"] = 1] = "Subroom";
36
+ FcrRoomType[FcrRoomType["Waitingroom"] = 2] = "Waitingroom";
37
+ FcrRoomType[FcrRoomType["Interpreterroom"] = 3] = "Interpreterroom";
38
+ FcrRoomType[FcrRoomType["JoinBeforeHostWaitingRoom"] = 4] = "JoinBeforeHostWaitingRoom";
39
+ FcrRoomType[FcrRoomType["Infinityroom"] = 5] = "Infinityroom";
40
40
  return FcrRoomType;
41
41
  }({});
42
42
 
package/lib-es/components/chat-wrapper/index.css CHANGED
@@ -40,7 +40,7 @@
40
40
 
41
41
  .fcr-chat-container {
42
42
  scrollbar-width: none;
43
-
43
+ height: 100%;
44
44
  display: flex;
45
45
  flex: 1;
46
46
  flex-direction: column;
package/lib-es/components/drop-menu/index.js CHANGED
@@ -76,7 +76,7 @@ export var FcrDropOption = function FcrDropOption(option) {
76
76
  children: [/*#__PURE__*/_jsx("span", {
77
77
  className: "fcr-drop-menu-option-text",
78
78
  children: option.title
79
- }), /*#__PURE__*/_jsxs("div", {
79
+ }), (option.value && hasSubMenu || icon) && /*#__PURE__*/_jsxs("div", {
80
80
  className: "fcr-drop-menu-option-content",
81
81
  children: [option.value && hasSubMenu && /*#__PURE__*/_jsx("span", {
82
82
  className: "fcr-drop-menu-option-value",
package/lib-es/components/participants/attendee/index.css CHANGED
@@ -129,7 +129,6 @@
129
129
 
130
130
  .fcr-participant__footer button:last-child {
131
131
  width: 100%;
132
- padding: 0;
133
132
  }
134
133
 
135
134
  .attendee__user-media,
package/lib-es/components/participants/footer/index.js CHANGED
@@ -331,16 +331,20 @@ export var FcrParticipantsFooter = function FcrParticipantsFooter(props) {
331
331
  }, node.key != null ? String(node.key) : "footer-overflow-".concat(i));
332
332
  })
333
333
  }),
334
- children: /*#__PURE__*/_jsx(FcrButton, {
334
+ children: /*#__PURE__*/_jsxs(FcrButton, {
335
335
  type: "secondary-bordered",
336
336
  size: "XS",
337
- children: /*#__PURE__*/_jsx(FcrIcon, {
337
+ children: [t('fmt_participants_member_button_more'), /*#__PURE__*/_jsx(FcrIcon, {
338
338
  type: FcrIconType.FCR_MORE2,
339
339
  size: 14,
340
340
  colors: {
341
341
  iconPrimary: 'var(--fcr_ui_scene_icontext1)'
342
+ },
343
+ style: {
344
+ display: 'inline-block',
345
+ marginTop: -2
342
346
  }
343
- })
347
+ })]
344
348
  })
345
349
  });
346
350
  return /*#__PURE__*/_jsxs("div", {
package/lib-es/components/tabs/index.css CHANGED
@@ -21,15 +21,29 @@
21
21
  }
22
22
 
23
23
  .fcr-tabs__nav-item {
24
- padding: 7px 0;
24
+ padding: 7px 2px;
25
25
  width: var(--fcr-tabs__nav-item__width);
26
- text-align: center;
27
26
  position: relative;
28
27
  z-index: 10;
29
28
  transition: 0.3s all;
30
29
  font-weight: 400;
31
30
  font-size: 14px;
32
31
  flex: 1;
32
+ box-sizing: border-box;
33
+ min-width: 0;
34
+ display: flex;
35
+ align-items: center;
36
+ justify-content: center;
37
+ }
38
+
39
+ .fcr-tabs__nav-item-text {
40
+ display: block;
41
+ max-width: 100%;
42
+ min-width: 0;
43
+ overflow: hidden;
44
+ text-overflow: ellipsis;
45
+ white-space: nowrap;
46
+ text-align: center;
33
47
  }
34
48
 
35
49
  .fcr-tabs__nav-item.fcr-tabs__nav-item--active {
@@ -60,7 +74,6 @@
60
74
  }
61
75
 
62
76
  .fcr-fashion-tabs .fcr-tabs__nav-item {
63
- text-align: left;
64
77
  padding: 0 0 0 0;
65
78
  /* width: unset; */
66
79
  color: var(--fcr_ui_scene_icontext2);
@@ -92,9 +105,14 @@
92
105
  }
93
106
 
94
107
  .fcr-fashion-tabs .fcr-tabs__nav-list .fcr-tabs__nav-item {
95
- display: inline-block;
108
+ display: inline-flex;
109
+ align-items: center;
96
110
  font-size: 14px;
97
111
  position: relative;
98
112
  width: auto;
99
113
  margin-right: 18px;
100
114
  }
115
+
116
+ .fcr-fashion-tabs .fcr-tabs__nav-item-text {
117
+ text-align: left;
118
+ }
package/lib-es/components/tabs/index.js CHANGED
@@ -137,7 +137,10 @@ export var FcrTabs = function FcrTabs(_ref) {
137
137
  return /*#__PURE__*/_jsx("div", {
138
138
  className: cls,
139
139
  onClick: handleClick,
140
- children: label
140
+ children: /*#__PURE__*/_jsx("span", {
141
+ className: "fcr-tabs__nav-item-text",
142
+ children: label
143
+ })
141
144
  }, key);
142
145
  }), /*#__PURE__*/_jsx("div", {
143
146
  className: "fcr-tabs__nav-indicator",
@@ -170,7 +173,10 @@ export var FcrFashionTabs = function FcrFashionTabs(_ref3) {
170
173
  return /*#__PURE__*/_jsxs("div", {
171
174
  className: cls,
172
175
  onClick: handleClick,
173
- children: [label, isActive && /*#__PURE__*/_jsx("div", {
176
+ children: [/*#__PURE__*/_jsx("span", {
177
+ className: "fcr-tabs__nav-item-text",
178
+ children: label
179
+ }), isActive && /*#__PURE__*/_jsx("div", {
174
180
  className: "fcr-fashion-tabs__nav-indicator",
175
181
  style: {
176
182
  right: -6,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "agora-ui-foundation",
3
- "version": "3.10.0",
3
+ "version": "3.10.1",
4
4
  "license": "MIT",
5
5
  "files": [
6
6
  "lib",
@@ -13,7 +13,7 @@
13
13
  "dependencies": {
14
14
  "@react-spring/web": "^9.7.3",
15
15
  "@use-gesture/react": "^10.3.1",
16
- "agora-foundation": "3.10.0",
16
+ "agora-foundation": "3.10.1",
17
17
  "classnames": "^2.5.1",
18
18
  "i18next": "^23.10.1",
19
19
  "normalize.css": "^8.0.1",
@@ -53,7 +53,7 @@
53
53
  "@types/react-virtualized": "^9.21.30",
54
54
  "@types/tinycolor2": "^1.4.6",
55
55
  "@types/webpack-env": "^1.18.4",
56
- "agora-toolchain": "3.10.0",
56
+ "agora-toolchain": "3.10.1",
57
57
  "core-js": "^3.33.3",
58
58
  "eslint": "^9.0.0",
59
59
  "node-html-parser": "^6.1.13",