agora-ui-foundation 3.7.4 → 3.7.6

package/lib/components/action-bar/screen-share/index.js

@@ -14,8 +14,8 @@ var ScreenShare = exports.ScreenShare = function ScreenShare(_ref) {
   var id = _ref.id,
     order = _ref.order;
   var t = (0, _i18n.useI18n)();
-  var title = t('fmt_screenshare_label_screenshare');
-  var tooltip = t('fmt_screenshare_label_screenshare');
+  var title = t('fmt_screenshare_controlbar_security_list_participant_screenshare');
+  var tooltip = t('fmt_screenshare_controlbar_security_list_participant_screenshare');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
     content: tooltip,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItem, {

package/lib/components/room-screen-share-state-bar/more/index.d.ts

@@ -4,6 +4,7 @@ interface MoreOption {
     morePopoverContent?: ReactNode;
     visible?: boolean;
     onButtonClick?: () => void;
+    onVisibleChange?: (visible: boolean) => void;
 }
 export declare const More: (props: MoreOption) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/room-screen-share-state-bar/more/index.js

@@ -21,8 +21,10 @@ var More = exports.More = function More(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "share-action-nav__button share-action-nav__not-draggable share-action-nav__single-button",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+      trigger: "click",
       overlayClassName: "share-action-nav__popover",
       visible: props.visible,
+      onVisibleChange: props.onVisibleChange,
       content: props.morePopoverContent ? props.morePopoverContent : /*#__PURE__*/(0, _jsxRuntime.jsx)(MorePopoverContent, {}),
       overlayInnerStyle: {
         border: 0,

package/lib/components/tabs/index.css

@@ -46,7 +46,7 @@
   border-radius: var(--fcr_cornerradius_xs);
   position: absolute;
   height: 100%;
-  transition: 0.3s all;
+  transition: 0.3s left;
 }
 
 .fcr-tabs.fcr-fashion-tabs {

package/lib/components/tabs/index.js

@@ -17,6 +17,41 @@ require("./index.css");
 var _icon = require("../icon");
 var _type = require("../icon/type");
 var _jsxRuntime = require("react/jsx-runtime");
+// 这里本来是用了useEffect，但是因为useEffect会在组件渲染后执行，所以会导致组件渲染后，元素尺寸变化不会立即生效
+// 所以这里用了useLayoutEffect，确保元素尺寸变化立即生效
+var useElementSize = function useElementSize(selector, dependency) {
+  var _useState = (0, _react.useState)({
+      left: 0,
+      width: 0
+    }),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    size = _useState2[0],
+    setSize = _useState2[1];
+  var containerRef = (0, _react.useRef)(null);
+  (0, _react.useLayoutEffect)(function () {
+    var container = containerRef.current;
+    if (!container) return;
+    var updateSize = function updateSize() {
+      var el = container.querySelector(selector);
+      if ((el === null || el === void 0 ? void 0 : el.clientWidth) > 0) {
+        setSize({
+          left: el.offsetLeft,
+          width: el.clientWidth
+        });
+      }
+    };
+    updateSize();
+    var resizeObserver = new ResizeObserver(updateSize);
+    resizeObserver.observe(container);
+    return function () {
+      return resizeObserver.disconnect();
+    };
+  }, [selector, dependency]);
+  return {
+    size: size,
+    containerRef: containerRef
+  };
+};
 var FcrTabs = exports.FcrTabs = function FcrTabs(_ref) {
   var _ref$items = _ref.items,
     items = _ref$items === void 0 ? [] : _ref$items,
@@ -24,23 +59,10 @@ var FcrTabs = exports.FcrTabs = function FcrTabs(_ref) {
     _ref$onChange = _ref.onChange,
     onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
     variant = _ref.variant;
-  var _useState = (0, _react.useState)({}),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    indicatorStyle = _useState2[0],
-    setIndicatorStyle = _useState2[1];
-  var selectorRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(function () {
-    var _selectorRef$current;
-    var el = (_selectorRef$current = selectorRef.current) === null || _selectorRef$current === void 0 ? void 0 : _selectorRef$current.querySelector(".fcr-tabs__nav-item-".concat(activeKey));
-    if (el) {
-      var _ref2 = el,
-        offsetLeft = _ref2.offsetLeft;
-      setIndicatorStyle({
-        left: offsetLeft,
-        width: el.clientWidth
-      });
-    }
-  }, [activeKey]);
+  // 使用自定义Hook监听元素尺寸变化
+  var _useElementSize = useElementSize(".fcr-tabs__nav-item-".concat(activeKey), activeKey),
+    indicatorStyle = _useElementSize.size,
+    containerRef = _useElementSize.containerRef;
   var cls = (0, _classnames["default"])('fcr-tabs', {
     'fcr-simple-tabs': variant === 'simple'
   });
@@ -48,10 +70,10 @@ var FcrTabs = exports.FcrTabs = function FcrTabs(_ref) {
     className: cls,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "fcr-tabs__nav-list",
-      ref: selectorRef,
-      children: [items.map(function (_ref3) {
-        var label = _ref3.label,
-          key = _ref3.key;
+      ref: containerRef,
+      children: [items.map(function (_ref2) {
+        var label = _ref2.label,
+          key = _ref2.key;
         var cls = (0, _classnames["default"])("fcr-tabs__nav-item fcr-tabs__nav-item-".concat(key), {
           'fcr-tabs__nav-item--active': key === activeKey
         });
@@ -70,20 +92,20 @@ var FcrTabs = exports.FcrTabs = function FcrTabs(_ref) {
     })
   });
 };
-var FcrFashionTabs = exports.FcrFashionTabs = function FcrFashionTabs(_ref4) {
-  var _ref4$items = _ref4.items,
-    items = _ref4$items === void 0 ? [] : _ref4$items,
-    activeKey = _ref4.activeKey,
-    _ref4$onChange = _ref4.onChange,
-    onChange = _ref4$onChange === void 0 ? function () {} : _ref4$onChange;
+var FcrFashionTabs = exports.FcrFashionTabs = function FcrFashionTabs(_ref3) {
+  var _ref3$items = _ref3.items,
+    items = _ref3$items === void 0 ? [] : _ref3$items,
+    activeKey = _ref3.activeKey,
+    _ref3$onChange = _ref3.onChange,
+    onChange = _ref3$onChange === void 0 ? function () {} : _ref3$onChange;
   var size = 40;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "fcr-tabs fcr-fashion-tabs",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "fcr-tabs__nav-list",
-      children: items.map(function (_ref5) {
-        var label = _ref5.label,
-          key = _ref5.key;
+      children: items.map(function (_ref4) {
+        var label = _ref4.label,
+          key = _ref4.key;
         var isActive = key === activeKey;
         var cls = (0, _classnames["default"])("fcr-tabs__nav-item fcr-tabs__nav-item-".concat(key), {
           'fcr-tabs__nav-item--active': isActive

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-ui-foundation",
-  "version": "3.7.4",
+  "version": "3.7.6",
   "license": "MIT",
   "files": [
     "lib",
@@ -12,7 +12,7 @@
   "dependencies": {
     "@react-spring/web": "^9.7.3",
     "@use-gesture/react": "^10.3.1",
-    "agora-foundation": "~3.7.4",
+    "agora-foundation": "~3.7.6",
     "classnames": "^2.5.1",
     "i18next": "^23.10.1",
     "normalize.css": "^8.0.1",
@@ -51,7 +51,7 @@
     "@types/react-virtualized": "^9.21.30",
     "@types/tinycolor2": "^1.4.6",
     "@types/webpack-env": "^1.18.4",
-    "agora-toolchain": "~3.7.4",
+    "agora-toolchain": "~3.7.6",
     "core-js": "^3.33.3",
     "eslint": "^9.0.0",
     "node-html-parser": "^6.1.13",

package/patches/react-virtualized+9.22.6.patch

@@ -0,0 +1,52 @@
+diff --git a/node_modules/react-virtualized/dist/commonjs/vendor/detectElementResize.js b/node_modules/react-virtualized/dist/commonjs/vendor/detectElementResize.js
+index 29403d9..bb006c1 100644
+--- a/node_modules/react-virtualized/dist/commonjs/vendor/detectElementResize.js
++++ b/node_modules/react-virtualized/dist/commonjs/vendor/detectElementResize.js
+@@ -32,7 +32,9 @@ function createDetectElementResize(nonce, hostWindow) {
+   var attachEvent = typeof _window.document !== 'undefined' && _window.document.attachEvent;
+   if (!attachEvent) {
+     var requestFrame = function () {
+-      var raf = _window.requestAnimationFrame || _window.mozRequestAnimationFrame || _window.webkitRequestAnimationFrame || function (fn) {
++      var raf = 
++      // _window.requestAnimationFrame || _window.mozRequestAnimationFrame || _window.webkitRequestAnimationFrame ||
++       function (fn) {
+         return _window.setTimeout(fn, 20);
+       };
+       return function (fn) {
+@@ -40,7 +42,9 @@ function createDetectElementResize(nonce, hostWindow) {
+       };
+     }();
+     var cancelFrame = function () {
+-      var cancel = _window.cancelAnimationFrame || _window.mozCancelAnimationFrame || _window.webkitCancelAnimationFrame || _window.clearTimeout;
++      var cancel = 
++      // _window.cancelAnimationFrame || _window.mozCancelAnimationFrame || _window.webkitCancelAnimationFrame || 
++      _window.clearTimeout;
+       return function (id) {
+         return cancel(id);
+       };
+diff --git a/node_modules/react-virtualized/dist/es/vendor/detectElementResize.js b/node_modules/react-virtualized/dist/es/vendor/detectElementResize.js
+index 16fda9a..0c72bf0 100644
+--- a/node_modules/react-virtualized/dist/es/vendor/detectElementResize.js
++++ b/node_modules/react-virtualized/dist/es/vendor/detectElementResize.js
+@@ -26,7 +26,9 @@ export default function createDetectElementResize(nonce, hostWindow) {
+   var attachEvent = typeof _window.document !== 'undefined' && _window.document.attachEvent;
+   if (!attachEvent) {
+     var requestFrame = function () {
+-      var raf = _window.requestAnimationFrame || _window.mozRequestAnimationFrame || _window.webkitRequestAnimationFrame || function (fn) {
++      var raf = 
++      // _window.requestAnimationFrame || _window.mozRequestAnimationFrame || _window.webkitRequestAnimationFrame || 
++      function (fn) {
+         return _window.setTimeout(fn, 20);
+       };
+       return function (fn) {
+@@ -34,7 +36,9 @@ export default function createDetectElementResize(nonce, hostWindow) {
+       };
+     }();
+     var cancelFrame = function () {
+-      var cancel = _window.cancelAnimationFrame || _window.mozCancelAnimationFrame || _window.webkitCancelAnimationFrame || _window.clearTimeout;
++      var cancel = 
++      // _window.cancelAnimationFrame || _window.mozCancelAnimationFrame || _window.webkitCancelAnimationFrame || 
++      _window.clearTimeout;
+       return function (id) {
+         return cancel(id);
+       };