fcr-ui-scene 1.0.20 → 3.1.0-1

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

@@ -0,0 +1,212 @@
+html {
+  --fcr-action-bar-height: 58px;
+}
+.fcr-action-bar {
+  background: var(--fcr_web_ui_scene_fill2);
+  width: 100%;
+  height: var(--fcr-action-bar-height);
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  transition: all 0.2s;
+  pointer-events: all;
+  border-top-width: 1px;
+  border-top-style: solid;
+  z-index: 3;
+}
+.fcr-action-bar-hide {
+  transform: translateY(var(--fcr-action-bar-height));
+}
+
+.fcr-action-bar-left,
+.fcr-action-bar-mid,
+.fcr-action-bar-right {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.fcr-action-bar-right {
+  padding-right: 12px;
+}
+.fcr-action-bar-mid {
+  flex: 1;
+  flex-shrink: 1;
+  overflow: hidden;
+  padding: 0 10px;
+  justify-content: center;
+}
+.fcr-action-bar-collapse {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  overflow: hidden;
+  flex: 1;
+}
+.fcr-action-bar-item-wrapper {
+  background: transparent;
+  width: fit-content;
+  height: 52px;
+  user-select: none;
+  min-width: 80px;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  justify-content: stretch;
+  flex-shrink: 0;
+  position: relative;
+}
+.fcr-action-bar-extra {
+  cursor: pointer;
+}
+@media screen and (max-width: 430px) {
+  .fcr-action-bar-item-wrapper {
+    min-width: 55px;
+  }
+}
+
+.fcr-action-bar-item-wrapper button:focus {
+  outline: 0;
+}
+
+.fcr-action-bar-item:hover,
+.fcr-action-bar-item-active {
+  background: var(--fcr_web_ui_scene_hover2);
+  border-radius: var(--fcr_cornerradius_s);
+}
+.fcr-action-bar-item {
+  flex: 1;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 100%;
+  height: 100%;
+}
+.fcr-icon-green path,
+.fcr-icon-green-when-hover:hover path {
+  fill: var(--fcr_ui_scene_ramp_green6);
+}
+.fcr-icon-blue path {
+  fill: var(--fcr_ui_scene_ramp_brand6);
+}
+.fcr-checkbox-overlay-style svg path {
+  fill: var(--fcr_ui_scene_icontext1);
+  transition: all 0.1s ease;
+}
+.fcr-checkbox-overlay-style .fcr-checkbox-inner {
+  width: 14px;
+  height: 14px;
+  background: transparent;
+}
+.fcr-checkbox-overlay-style .fcr-checkbox-inner svg {
+  width: 14px;
+  height: 14px;
+}
+.fcr-action-bar-item-disabled {
+  cursor: not-allowed;
+}
+.fcr-action-bar-item-disabled .fcr-action-bar-item-icon,
+.fcr-action-bar-item-disabled .fcr-action-bar-item-text {
+  opacity: 0.5;
+}
+.fcr-action-bar-item-text {
+  color: var(--fcr_ui_scene_icontext2);
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 12px;
+  padding: 0 8px;
+}
+.fcr-action-bar-item-text span {
+  white-space: nowrap;
+}
+.fcr-action-bar-cancel-leave {
+  margin-right: 15px;
+  margin-left: auto;
+  text-align: center;
+  cursor: pointer;
+  align-self: center;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+.fcr-action-bar--popover .fcr-drop-menu {
+  text-align: left;
+}
+.fcr-action-bar--popover .fcr-checkbox-input-wrapper {
+  border-color: transparent;
+}
+.fcr-action-bar--popover .fcr-tooltip-inner {
+  border: none;
+  box-shadow: var(--fcr_web_light_dropup_m) !important;
+}
+.fcr-action-bar--fold {
+  width: 70px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  border: 1px solid var(--fcr_ui_scene_line1);
+  border-bottom: none;
+  position: absolute;
+  left: 50%;
+  top: -21px;
+  transform: translateX(-50%);
+  background: #fff;
+  cursor: pointer;
+}
+.fcr-action-bar--fold-hotarea {
+  width: 120px;
+  height: 30px;
+  display: flex;
+  position: absolute;
+  left: 50%;
+  top: -30px;
+  transform: translateX(-50%);
+}
+.fcr-action-bar--fold svg {
+  width: 30px;
+  height: 30px;
+}
+.fcr-action-bar--unfold {
+  width: 52px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+.fcr-action-bar--unfold svg {
+  transform: rotate(90deg);
+  width: 40px;
+  height: 40px;
+}
+.fcr-action-bar-fold-style {
+  width: 110px;
+  height: 50px;
+  position: absolute;
+  right: 15px;
+  bottom: 15px;
+}
+.fcr-action-bar-smaller {
+  width: 110px;
+  height: 50px;
+  border-radius: var(--fcr_cornerradius_s);
+  background: var(--fcr_web_ui_scene_fill2);
+  box-shadow: var(--fcr_web_light_dropup);
+  /* position: absolute;
+  right: 15px;
+  bottom: 15px; */
+  z-index: 1000;
+  display: flex;
+}
+.fcr-action-bar-smaller-micphone {
+  width: 58px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: var(--fcr_web_light_dropup_m);
+  border-radius: var(--fcr_cornerradius_s);
+}

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

@@ -0,0 +1,25 @@
+import { UIModule } from '../../base';
+import './index.css';
+import { FcrDesktopMediaControl, FcrMainRoomControl, FcrStreamControl, FcrUserControl } from 'agora-edu-core';
+import { FcrUIEventStore } from '../../common/event-store';
+import { FcrDeviceStore } from '../../common/device-store';
+import { FcrSecurityStore } from '../../common/security-store';
+import { FcrDeviceStreamStore } from '../../common/device-stream-store';
+interface FcrActionBarUIModuleArgs {
+    roomControl: FcrMainRoomControl;
+    userControl: FcrUserControl;
+    uiEventStore: FcrUIEventStore;
+    deviceStore: FcrDeviceStore;
+    deviceStreamStore: FcrDeviceStreamStore;
+    securityStore: FcrSecurityStore;
+    streamControl: FcrStreamControl;
+    mediaControl: FcrDesktopMediaControl;
+}
+export declare class FcrActionBarUIModule extends UIModule {
+    private _store;
+    constructor(args: FcrActionBarUIModuleArgs);
+    getComponent(): import("react/jsx-runtime").JSX.Element;
+    onProcessEvent(event: RendererCustomEvent): void;
+    onUnload(): void;
+}
+export {};

package/lib/modules/action-bar/index.dev.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/modules/action-bar/index.dev.js

@@ -0,0 +1,96 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+require("core-js/modules/es.array.join.js");
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _ = require(".");
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _root = require("react-hot-loader/root");
+var _type = require("../../type");
+var _hooks = require("../../utilities/hooks");
+var _securityStore = require("../../common/security-store");
+var _deviceStreamStore = require("../../common/device-stream-store");
+var _eventStore = require("../../common/event-store");
+var _deviceStore = require("../../common/device-store");
+var _jsxRuntime = require("react/jsx-runtime");
+var App = (0, _root.hot)(function () {
+  return null;
+});
+_reactDom["default"].render( /*#__PURE__*/(0, _jsxRuntime.jsx)(App, {}), document.querySelector('#root'));
+var Layout = function Layout(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      height: '100vh',
+      background: '#E3E7EF'
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        position: 'absolute',
+        left: '5vw',
+        bottom: '50px',
+        width: '90vw'
+      },
+      children: props.children
+    })
+  });
+};
+window.__DEV_ENGINE_IS_READY__.then( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+  var engine, roomId, roomControl, userRole, userName, userControl, uiEventStore, securityStore, deviceStore, deviceStreamStore, uiModule, App;
+  return _regenerator["default"].wrap(function _callee$(_context) {
+    while (1) switch (_context.prev = _context.next) {
+      case 0:
+        engine = window.__DEV_ENGINE__;
+        roomId = window.__DEV_ROOM_ID__;
+        _context.next = 4;
+        return engine.login();
+      case 4:
+        roomControl = engine.createRoomControl(roomId);
+        userRole = _type.FcrUserRole.HOST;
+        userName = 'host-user';
+        _context.next = 9;
+        return roomControl.join({
+          userRole: userRole,
+          userName: userName,
+          streamLatency: _type.FcrStreamLatencyLevel.ULTRA_LOW,
+          createStreamConfigs: []
+        });
+      case 9:
+        userControl = roomControl.getUserControl();
+        uiEventStore = new _eventStore.FcrUIEventStore();
+        securityStore = new _securityStore.FcrSecurityStore(roomControl.getPrivilegeControl(), roomControl.getUserControl(), roomControl.getStreamControl(), roomControl.getRoomSessionControl(), uiEventStore);
+        deviceStore = new _deviceStore.FcrDeviceStore(userName, engine.getMediaControl());
+        deviceStreamStore = new _deviceStreamStore.FcrDeviceStreamStore({
+          mediaControl: engine.getMediaControl(),
+          roomControl: roomControl,
+          securityStore: securityStore,
+          deviceStore: deviceStore,
+          uiEventStore: uiEventStore
+        });
+        uiModule = new _.FcrActionBarUIModule({
+          roomControl: roomControl,
+          userControl: userControl,
+          securityStore: securityStore,
+          deviceStore: deviceStore,
+          deviceStreamStore: deviceStreamStore,
+          uiEventStore: uiEventStore,
+          mediaControl: engine.getMediaControl(),
+          streamControl: roomControl.getStreamControl()
+        });
+        App = (0, _root.hot)(function () {
+          (0, _hooks.useUnmount)(function () {
+            uiModule === null || uiModule === void 0 || uiModule.release();
+            roomControl.leave();
+            engine.logout();
+          });
+          return uiModule === null || uiModule === void 0 ? void 0 : uiModule.getComponent();
+        });
+        _reactDom["default"].render( /*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(App, {})
+        }), document.querySelector('#root'));
+      case 17:
+      case "end":
+        return _context.stop();
+    }
+  }, _callee);
+})));

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

@@ -0,0 +1,89 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.reflect.construct.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FcrActionBarUIModule = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _base = require("../../base");
+var _view = require("./view");
+var _store = _interopRequireDefault(require("./store"));
+var _context = require("./context");
+require("./index.css");
+var _constant = require("../../utilities/constant");
+var _rendererEvent = require("../../utilities/renderer-event");
+var _store2 = require("../setting/store");
+var _jsxRuntime = require("react/jsx-runtime");
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var FcrActionBarUIModule = exports.FcrActionBarUIModule = /*#__PURE__*/function (_UIModule) {
+  function FcrActionBarUIModule(args) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, FcrActionBarUIModule);
+    _this = _callSuper(this, FcrActionBarUIModule);
+    _this._store = new _store["default"](args);
+    return _this;
+  }
+  (0, _inherits2["default"])(FcrActionBarUIModule, _UIModule);
+  return (0, _createClass2["default"])(FcrActionBarUIModule, [{
+    key: "getComponent",
+    value: function getComponent() {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.ActionBarContext.Provider, {
+        value: this._store,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.FcrActionBar, {})
+      });
+    }
+  }, {
+    key: "onProcessEvent",
+    value: function onProcessEvent(event) {
+      if (event.action === _constant.RendererEventAction.FRAGMENT_LOADED && event.payload === 'control-bar') {
+        (0, _rendererEvent.sendEvent)({
+          action: _constant.RendererEventAction.CLOUD_RECORDING_STATE_CHANGED,
+          payload: this._store.cloudRecordingState
+        });
+        (0, _rendererEvent.sendEvent)({
+          action: _constant.RendererEventAction.USER_ROLE_CHANGED,
+          payload: this._store.localUserRole
+        });
+      }
+      if (event.action === _constant.RendererEventAction.STOP_BOARD_SHARE) {
+        this._store.closeWhiteboard();
+      }
+      if (event.action === _constant.RendererEventAction.OPEN_VIDEO_SETTING) {
+        this._store.openDeviceSettingDialog({
+          activeTab: _store2.DeviceSettingTab.VIDEO,
+          videoActiveTab: 'basic'
+        });
+      }
+      if (event.action === _constant.RendererEventAction.OPEN_VIDEO_FILTER) {
+        this._store.openDeviceSettingDialog({
+          activeTab: _store2.DeviceSettingTab.VIDEO,
+          videoActiveTab: 'beauty-filter'
+        });
+      }
+      if (event.action === _constant.RendererEventAction.OPEN_VIRTUAL_BACKGROUND) {
+        this._store.openDeviceSettingDialog({
+          activeTab: _store2.DeviceSettingTab.VIDEO,
+          videoActiveTab: 'virtual-background'
+        });
+      }
+      if (event.action === _constant.RendererEventAction.OPEN_AUDIO_SETTING) {
+        this._store.openDeviceSettingDialog({
+          activeTab: _store2.DeviceSettingTab.AUDIO
+        });
+      }
+    }
+  }, {
+    key: "onUnload",
+    value: function onUnload() {
+      this._store.release();
+    }
+  }]);
+}(_base.UIModule);

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+type ActionBarItemPlacementProps = {
+    placement: 'left' | 'mid' | 'right';
+};
+export declare const ActionBarItemPlacement: import("react").ForwardRefExoticComponent<ActionBarItemPlacementProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,18 @@
+"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.ActionBarItemPlacement = void 0;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+var ActionBarItemPlacement = exports.ActionBarItemPlacement = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ref: ref,
+    className: (0, _classnames["default"])("fcr-action-bar-".concat(props.placement)),
+    children: props.children
+  });
+});

package/lib/modules/action-bar/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/item.js

@@ -0,0 +1,154 @@
+"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/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,
+      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/leave/assign-host.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import './index.css';
+interface AssignHostProps {
+    setPopoverOpened: React.Dispatch<React.SetStateAction<boolean>>;
+    handleKeepConnect: () => void;
+}
+export declare const AssignHost: (props: AssignHostProps) => import("react/jsx-runtime").JSX.Element;
+export {};