fcr-ui-scene 3.3.1 → 3.4.1

package/lib/modules/action-bar/components/item.d.ts

@@ -0,0 +1,27 @@
+import { FC, PropsWithChildren } from 'react';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { PopoverProps } from 'agora-ui-foundation/lib/components/popover';
+import { FcrIconProps } from 'agora-ui-foundation/lib/components/icon';
+interface ActionBarItemProps extends React.ComponentProps<'div'> {
+    className?: string;
+    icon: FcrIconType | React.ReactNode;
+    iconColors: FcrIconProps['colors'];
+    active?: boolean;
+    onClick?: () => void;
+    disabled?: boolean;
+    title: string;
+    order?: number;
+    id: string;
+    moreVisible?: boolean;
+}
+export declare const ActionBarItem: FC<PropsWithChildren<ActionBarItemProps & {
+    submenu?: {
+        children: React.ReactNode;
+        onClick: () => void;
+    };
+}>>;
+interface ActionBarItemWithPopoverProps extends ActionBarItemProps {
+    popoverProps?: PopoverProps;
+}
+export declare const ActionBarItemWithPopover: FC<ActionBarItemWithPopoverProps>;
+export {};

package/lib/modules/action-bar/components/item.js

@@ -0,0 +1,164 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.for-each.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ActionBarItemWithPopover = exports.ActionBarItem = void 0;
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.string.includes.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _popover = require("agora-ui-foundation/lib/components/popover");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _actionBarCollapesItems = require("../action-bar-collapes-items");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["className", "title", "icon", "iconColors", "active", "onClick", "disabled", "order", "id", "moreVisible", "children"];
+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; }
+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; }
+var isFcrIcon = function isFcrIcon(icon) {
+  return typeof icon === 'string';
+};
+
+// The `...others` is required for rc-tooltip (FcrToolTip) to work,
+// internally it edits the child component's props to include `onMouseEnter`
+// `onMouseMove` etc. So additional props must be passed down to the child component.
+var ActionBarItem = exports.ActionBarItem = function ActionBarItem(props) {
+  var className = props.className,
+    title = props.title,
+    icon = props.icon,
+    iconColors = props.iconColors,
+    _props$active = props.active,
+    active = _props$active === void 0 ? false : _props$active,
+    onClick_ = props.onClick,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    order = props.order,
+    id = props.id,
+    moreVisible = props.moreVisible,
+    children = props.children,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var ref = (0, _react.useRef)(null);
+  var _useContext = (0, _react.useContext)(_actionBarCollapesItems.actionBarCollapseContext),
+    setItem = _useContext.setItem,
+    visibleList = _useContext.visibleList;
+  var visible = id === 'More' ? moreVisible : visibleList.includes(id);
+  var onClick = !disabled && onClick_ ? onClick_ : void 0;
+  var innerClassName = (0, _classnames["default"])('fcr-action-bar-item', {
+    'fcr-action-bar-item-active': active,
+    'fcr-action-bar-item-disabled': disabled
+  });
+  (0, _react.useEffect)(function () {
+    // TODO: Only counting the initial `offsetWidth` is incorrect since item content could change.
+    // For example, "Record" can be turned into "Pause/Resume Record" which is obviously longer than 80px.
+    // Either do one of the following action to solve this problem:
+    // - Use resize observer on this component and call `setItem()` again.
+    // - Fix item width and do not change.
+    return ref.current ? setItem(id, {
+      name: id,
+      width: ref.current.offsetWidth,
+      order: order || 0
+    }) : void 0;
+  }, [visible]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({
+    ref: ref,
+    style: {
+      display: visible ? 'flex' : 'none'
+    },
+    className: (0, _classnames["default"])('fcr-action-bar-item-wrapper', className)
+  }, others), {}, {
+    children: [children, isFcrIcon(icon) ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+      onClick: onClick,
+      className: innerClassName,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-action-bar-item-icon",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          size: 32,
+          type: icon,
+          colors: iconColors
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-action-bar-item-text",
+        children: title
+      })]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: innerClassName,
+      children: [icon, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-action-bar-item-text",
+        children: title
+      })]
+    }), props.submenu && /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+      overlayClassName: "fcr-action-bar--popover",
+      onVisibleChange: function onVisibleChange() {},
+      trigger: "click",
+      content: props.submenu.children,
+      overlayInnerStyle: {
+        minWidth: '210px',
+        maxWidth: '370px',
+        width: 'fit-content'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        onClick: function onClick(e) {
+          var _props$submenu;
+          e.stopPropagation();
+          (_props$submenu = props.submenu) === null || _props$submenu === void 0 || _props$submenu.onClick();
+        },
+        className: "fcr-action-bar-extra",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_DROPUP4,
+          colors: {
+            iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+          },
+          size: 24
+        })
+      })
+    })]
+  }));
+};
+var ActionBarItemWithPopover = exports.ActionBarItemWithPopover = function ActionBarItemWithPopover(props) {
+  var icon = props.icon,
+    title = props.title,
+    popoverProps = props.popoverProps,
+    id = props.id,
+    order = props.order;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    popoverOpened = _useState2[0],
+    setPopoverOpend = _useState2[1];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, _objectSpread(_objectSpread({}, popoverProps), {}, {
+    afterVisibleChange: function afterVisibleChange(visible) {
+      var _popoverProps$afterVi;
+      setPopoverOpend(visible);
+      popoverProps === null || popoverProps === void 0 || (_popoverProps$afterVi = popoverProps.afterVisibleChange) === null || _popoverProps$afterVi === void 0 || _popoverProps$afterVi.call(popoverProps, visible);
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionBarItem, {
+      id: id,
+      order: order,
+      active: popoverOpened,
+      icon: icon,
+      title: title,
+      iconColors: props.iconColors,
+      moreVisible: props.moreVisible
+    })
+  }));
+};

package/lib/modules/action-bar/components/leave/assign-host.d.ts

@@ -0,0 +1,10 @@
+import './index.css';
+import { FcrUserInfo } from 'fcr-core/lib/type';
+interface AssignHostProps {
+    remoteUsers: FcrUserInfo[];
+    assignHost: (user: FcrUserInfo) => void;
+    setPopoverOpened: React.Dispatch<React.SetStateAction<boolean>>;
+    handleKeepConnect: () => void;
+}
+export declare const AssignHost: (props: AssignHostProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/modules/action-bar/components/leave/assign-host.js

@@ -0,0 +1,64 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AssignHost = void 0;
+require("core-js/modules/es.array.index-of.js");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+require("./index.css");
+var _chatSelect = require("../../../chat/chat-select");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var AssignHost = exports.AssignHost = (0, _mobxReact.observer)(function (props) {
+  var remoteUsers = props.remoteUsers,
+    assignHost = props.assignHost;
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    selected = _useState2[0],
+    setSelected = _useState2[1];
+  var t = (0, _i18n.useI18n)();
+  var handleLeave = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+      var user;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            user = remoteUsers[selected];
+            assignHost(user);
+            props.setPopoverOpened(false);
+            props.handleKeepConnect();
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleLeave() {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_chatSelect.ChatSelect, {
+    type: "assign-host",
+    title: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "assign-host-title",
+      children: t('fmt_toolbar_button_assignnewhost')
+    }),
+    bottomBar: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "assign-host-bottom",
+      onClick: handleLeave,
+      children: t('fmt_toolbar_button_assignleave')
+    }),
+    candidateUsers: remoteUsers,
+    selectedUid: remoteUsers[selected].userId,
+    onSelect: function onSelect(user) {
+      setSelected(remoteUsers.indexOf(user));
+    }
+  });
+});

package/lib/modules/action-bar/components/leave/index.css

@@ -0,0 +1,126 @@
+.leave-title {
+  width: 100%;
+  height: 39px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  font-family: Verdana;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 18.2px;
+  text-align: center;
+
+  color: var(--fcr_ui_scene_icontext1, rgba(255, 255, 255, 1));
+}
+
+.fcr-action-bar--leave-popover {
+  max-width: 255px;
+}
+
+.fcr-action-bar--leave-popover .fcr-tooltip-inner {
+  margin: 0;
+}
+
+.assistant-leave-lock-info {
+  width: 100%;
+  height: 16px;
+
+  font-family: Helvetica Neue;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 16px;
+  text-align: center;
+  color: var(--fcr_ui_scene_icontext1, rgba(55, 60, 66, 1));
+}
+
+.assistant-lock-leave-title {
+  width: 100%;
+  margin-top: 15px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  font-family: Verdana;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18.2px;
+  text-align: center;
+
+  color: var(--fcr_ui_scene_icontext1, rgba(255, 255, 255, 1));
+}
+
+.leave-cancel {
+  width: 100%;
+  height: 36px;
+  margin-top: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--fcr_ui_scene_ramp_red6, rgba(251, 88, 78, 1));
+  border-radius: var(--fcr_cornerradius_l);
+  border: 1px solid var(--fcr_ui_scene_ramp_red6);
+
+  font-family: Verdana;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 24px;
+  text-align: center;
+
+  cursor: pointer;
+}
+
+.assign-host-title {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 20px;
+  padding-left: 5px;
+
+  font-family: Verdana;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 12px;
+  text-align: left;
+  color: var(--fcr_ui_scene_icontext1, rgba(255, 255, 255, 1));
+}
+
+.assign-host-bottom {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 215px;
+  height: 32px;
+  margin-top: 20px;
+  border-radius: var(--fcr_cornerradius_l);
+
+  font-family: Helvetica Neue;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 24px;
+
+  color: var(--fcr_ui_scene_white10);
+  background: var(--fcr_ui_scene_ramp_red6);
+  cursor: pointer;
+}
+.leave-connect-check {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.leave-container .leave-confirm-disabled {
+  background-color: var(--fcr_web_ui_scene_fill3);
+  color: var(--fcr_ui_scene_icontext3);
+  cursor: not-allowed;
+}
+.fcr-action-bar--leave-meeting-portal {
+  width: 255px;
+  position: absolute;
+  top: 2px;
+  left: 10px;
+  z-index: 999;
+  background-color: var(--fcr_ui_scene_white10);
+  border-radius: var(--fcr_cornerradius_l);
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+}

package/lib/modules/action-bar/components/leave/index.d.ts

@@ -0,0 +1,3 @@
+export declare const End: (props: {
+    onPopoverChanged: (popoverOpened: boolean) => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/action-bar/components/leave/index.js

@@ -0,0 +1,159 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.for-each.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.End = void 0;
+require("core-js/modules/web.timers.js");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _button = require("agora-ui-foundation/lib/components/button");
+var _leaveMeeting = require("./leave-meeting");
+var _popover = require("agora-ui-foundation/lib/components/popover");
+var _react = require("react");
+var _store = require("../../store");
+var _type = require("../../../../type");
+var _mobxReact = require("mobx-react");
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+var _jsxRuntime = require("react/jsx-runtime");
+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; }
+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; }
+var End = exports.End = (0, _mobxReact.observer)(function (props) {
+  var transI18n = (0, _i18n.useI18n)();
+  var _useContext = (0, _react.useContext)(_store.ActionBarContext),
+    localUserRole = _useContext.localUserRole,
+    toggleLayoutBarLock = _useContext.toggleLayoutBarLock,
+    remoteUsers = _useContext.remoteUsers,
+    end = _useContext.end,
+    leave = _useContext.leave,
+    isLocked = _useContext.isLocked,
+    hasAssignHostBeforeLeavingPermission = _useContext.hasAssignHostBeforeLeavingPermission,
+    hasEndRoomPermission = _useContext.hasEndRoomPermission,
+    keepPhoneAudioConnection = _useContext.keepPhoneAudioConnection,
+    isPstnUser = _useContext.isPstnUser,
+    assignHost = _useContext.assignHost,
+    popoverOpened = _useContext.popoverOpened,
+    _setPopoverOpened = _useContext.setPopoverOpened,
+    stateBarLeaveMeeting = _useContext.stateBarLeaveMeeting,
+    setStateBarLeaveMeeting = _useContext.setStateBarLeaveMeeting;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    tooltipOpened = _useState2[0],
+    setTooltipOpened = _useState2[1];
+  // const [popoverOpened, setPopoverOpened] = useState(false);
+  var popOverRef = (0, _react.useRef)(false);
+  var onTooltipChanged = function onTooltipChanged(v) {
+    if (!popoverOpened) {
+      setTooltipOpened(v);
+    }
+  };
+  var onPopoverChanged = function onPopoverChanged(v) {
+    setTooltipOpened(false);
+    _setPopoverOpened(v);
+    toggleLayoutBarLock(v);
+    popOverRef.current = v;
+    props.onPopoverChanged(v);
+  };
+  var buttonProps = (0, _react.useMemo)(function () {
+    return popoverOpened ? {
+      type: 'gray'
+    } : {
+      styleType: 'danger'
+    };
+  }, [popoverOpened]);
+  var leaveMeetingContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_leaveMeeting.LeaveMeeting, {
+    setPopoverOpened: function setPopoverOpened(value) {
+      _setPopoverOpened(value);
+      onPopoverChanged(false);
+    },
+    localUserRole: localUserRole,
+    leave: leave,
+    isLocked: isLocked,
+    hasAssignHostBeforeLeavingPermission: hasAssignHostBeforeLeavingPermission,
+    hasEndRoomPermission: hasEndRoomPermission,
+    keepPhoneAudioConnection: keepPhoneAudioConnection,
+    isPstnUser: isPstnUser,
+    remoteUsers: remoteUsers,
+    end: end,
+    assignHost: assignHost
+  });
+  var LeaveMeetingPortal = function LeaveMeetingPortal() {
+    var portalContent = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-action-bar--leave-meeting-portal",
+      id: "fcr-action-bar--leave-meeting-portal",
+      children: leaveMeetingContent
+    });
+    return /*#__PURE__*/_reactDom["default"].createPortal(portalContent, document.body);
+  };
+  (0, _react.useEffect)(function () {
+    var reflow = (0, _debounce["default"])(function () {
+      /* 修复窗口缩放时，在未经人为操作打开弹窗的情况下，改变窗口大小而触发的打开情形 */
+      if (!popOverRef.current) return;
+      _setPopoverOpened(false);
+      setTimeout(function () {
+        _setPopoverOpened(true);
+      }, 0);
+    }, 100);
+    window.addEventListener('resize', reflow);
+    return function () {
+      window.removeEventListener('resize', reflow);
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (!stateBarLeaveMeeting) return;
+    var container = document.getElementById('fcr-action-bar--leave-meeting-portal');
+    var handleClickOutside = function handleClickOutside(event) {
+      if (!(container !== null && container !== void 0 && container.contains(event.target))) {
+        setStateBarLeaveMeeting(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [stateBarLeaveMeeting]);
+  (0, _react.useEffect)(function () {
+    if (popoverOpened) {
+      onPopoverChanged(popoverOpened);
+    }
+  }, [popoverOpened]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+      overlayClassName: "fcr-action-bar--device-popover fcr-action-bar--leave-popover",
+      overlayInnerStyle: {
+        width: 255
+      },
+      visible: popoverOpened,
+      onVisibleChange: onPopoverChanged,
+      trigger: "click",
+      placement: "topRight",
+      overlayOffset: 20,
+      content: leaveMeetingContent,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, _objectSpread(_objectSpread({
+        shape: "rounded",
+        size: "XS"
+      }, buttonProps), {}, {
+        children: popoverOpened ? transI18n('fmt_toolbar_button_cancel') : localUserRole === _type.FcrUserRole.HOST ? transI18n('fmt_toolbar_button_end') : transI18n('fmt_toolbar_button_leave')
+      }))
+    }), stateBarLeaveMeeting && LeaveMeetingPortal()]
+  });
+});

package/lib/modules/action-bar/components/leave/leave-meeting.d.ts

@@ -0,0 +1,18 @@
+import './index.css';
+import { FcrUserInfo, FcrUserRole } from 'fcr-core/lib/type';
+interface LeaveMeetingProps {
+    setPopoverOpened: React.Dispatch<React.SetStateAction<boolean>>;
+    end: () => void;
+    leave: () => void;
+    isLocked: boolean;
+    keepPhoneAudioConnection: () => void;
+    localUserRole: FcrUserRole;
+    remoteUsers: FcrUserInfo[];
+    hasAssignHostBeforeLeavingPermission: boolean;
+    hasEndRoomPermission: boolean;
+    isPstnUser: boolean;
+    assignHost: (user: FcrUserInfo) => void;
+    setHeight?: () => void;
+}
+export declare const LeaveMeeting: import("react").ForwardRefExoticComponent<LeaveMeetingProps & import("react").RefAttributes<unknown>>;
+export {};