agora-ui-foundation 1.0.0

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

@@ -0,0 +1,166 @@
+"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.actionBarCollapesContext = exports.FcrActionBar = void 0;
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.find.js");
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.array.reduce.js");
+require("core-js/modules/es.function.name.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.includes.js");
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+require("./index.css");
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+var _itemPlacement = require("./item-placement");
+var _device = require("./device");
+var _participants = require("./participants");
+var _record = require("./record");
+var _screenShare = require("./screen-share");
+var _settings = require("./settings");
+var _chat = require("./chat");
+var _board = require("./board");
+var _end = require("./end");
+var _security = require("./security");
+var _more = require("./more");
+var _respond = require("./respond");
+var _breakoutRoom = require("./breakout-room");
+var _jsxRuntime = require("react/jsx-runtime");
+var midActionOrderMap = [/*#__PURE__*/(0, _jsxRuntime.jsx)(_security.Security, {
+  id: "Security",
+  order: 1
+}, "Security"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_participants.Participants, {
+  id: "Participants",
+  order: 2
+}, "Participants"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenShare.ScreenShare, {
+  id: "ScreenShare",
+  order: 3
+}, "ScreenShare"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_chat.Chat, {
+  id: "Chat",
+  order: 4
+}, "Chat"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_record.Record, {
+  id: "Record",
+  order: 5
+}, "Record"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_board.Board, {
+  id: "Whiteboard",
+  order: 6
+}, "Whiteboard"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_breakoutRoom.BreakoutRoom, {
+  id: "BreakoutRoom",
+  order: 7
+}, "BreakoutRoom"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_respond.Respond, {
+  id: "Respond",
+  order: 8
+}, "Respond"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_settings.Settings, {
+  id: "Settings",
+  order: 9
+}, "Settings"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_more.More, {
+  id: "More",
+  order: 10
+}, "More")];
+var FcrActionBar = exports.FcrActionBar = function FcrActionBar(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames["default"])('fcr-action-bar'),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_itemPlacement.ActionBarItemPlacement, {
+      placement: "left",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_device.MicrophoneDevice, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_device.CameraDevice, {})]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_itemPlacement.ActionBarItemPlacement, {
+      placement: "mid",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionBarCollapesItems, {
+        children: midActionOrderMap
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_itemPlacement.ActionBarItemPlacement, {
+      placement: "right",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_end.End, {})
+    })]
+  });
+};
+var actionBarCollapesContext = exports.actionBarCollapesContext = /*#__PURE__*/(0, _react.createContext)({
+  items: [],
+  setItem: function setItem() {},
+  visibleList: []
+});
+var Provider = actionBarCollapesContext.Provider;
+var ActionBarCollapesItems = function ActionBarCollapesItems(_ref) {
+  var children = _ref.children;
+  var _useState = (0, _react.useState)([]),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    items = _useState2[0],
+    setItems = _useState2[1];
+  var _useState3 = (0, _react.useState)(midActionOrderMap.map(function (item) {
+      return item.props.id;
+    })),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    visibleList = _useState4[0],
+    setVisibleList = _useState4[1];
+  var ref = (0, _react.useRef)(null);
+  // if container width is not enough, collapse the items by order
+  // if container width is enough, show all items
+  // detect container width change by resize observer
+  // More button is always visible
+  (0, _react.useEffect)(function () {
+    if (ref.current) {
+      var resizeObserver = new ResizeObserver((0, _debounce["default"])(function (entries) {
+        var more = items.find(function (item) {
+          return item.name === 'More';
+        });
+        var containerWidth = entries[0].contentRect.width - (more ? more.width : 0);
+        var totalWidth = items.filter(function (i) {
+          return i.name !== 'More';
+        }).reduce(function (prev, curr) {
+          return prev + curr.width;
+        }, 0);
+        if (containerWidth < totalWidth) {
+          var total = 0;
+          var list = items.filter(function (item) {
+            if (item.name === 'More') {
+              return true;
+            }
+            total += item.width;
+            return total < containerWidth;
+          });
+          setVisibleList(list.map(function (item) {
+            return item.name;
+          }));
+        } else {
+          setVisibleList(items.map(function (item) {
+            return item.name;
+          }));
+        }
+      }, 0));
+      resizeObserver.observe(ref.current);
+      return function () {
+        resizeObserver.disconnect();
+      };
+    }
+  }, [items]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ref: ref,
+    className: "fcr-action-bar-collapse",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Provider, {
+      value: {
+        visibleList: visibleList,
+        items: items,
+        collapseList: items.filter(function (item) {
+          return !visibleList.includes(item.name);
+        }).map(function (item) {
+          return item.name;
+        }),
+        setItem: function setItem(item) {
+          setItems(function (prev) {
+            return [].concat((0, _toConsumableArray2["default"])(prev), [item]);
+          });
+        }
+      },
+      children: children
+    })
+  });
+};

package/lib/components/action-bar/index.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { FcrActionBar } from '.';
+declare const meta: Meta;
+type Story = StoryObj<typeof FcrActionBar>;
+export declare const Basic: Story;
+export default meta;

package/lib/components/action-bar/index.stories.js

@@ -0,0 +1,42 @@
+"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["default"] = exports.Basic = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _ = require(".");
+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 meta = {
+  title: 'Components/ActionBar',
+  tags: ['autodocs'],
+  argTypes: {}
+};
+var Basic = exports.Basic = {
+  args: {
+    children: 'Test Button'
+  },
+  render: function render(props) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        paddingTop: '300px'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.FcrActionBar, _objectSpread({}, props))
+    });
+  }
+};
+var _default = exports["default"] = meta;

package/lib/components/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/components/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/components/action-bar/item.d.ts

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+import { FcrIconType } from '../icon/type';
+import { PopoverProps } from '../popover';
+import { FcrIconProps } from '../icon';
+interface ActionBarItemProps {
+    className?: string;
+    icon: FcrIconType;
+    iconColors: FcrIconProps['colors'];
+    active?: boolean;
+    onClick?: () => void;
+    disabled?: boolean;
+    title: string;
+    order?: number;
+    id: string;
+}
+export declare const ActionBarItem: FC<ActionBarItemProps>;
+interface ActionBarItemWithPopoverProps extends ActionBarItemProps {
+    popoverProps?: PopoverProps;
+}
+export declare const ActionBarItemWithPopover: FC<ActionBarItemWithPopoverProps>;
+export {};

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

@@ -0,0 +1,113 @@
+"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 _popover = require("../popover");
+var _icon = require("../icon");
+var _ = require(".");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["className", "title", "icon", "iconColors", "active", "onClick", "disabled", "order", "id"];
+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 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,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var ref = (0, _react.useRef)(null);
+  var _useContext = (0, _react.useContext)(_.actionBarCollapesContext),
+    setItem = _useContext.setItem,
+    visibleList = _useContext.visibleList;
+  var visible = visibleList.includes(id);
+  (0, _react.useEffect)(function () {
+    if (ref.current) {
+      setItem({
+        name: id,
+        width: ref.current.offsetWidth,
+        order: order || 0
+      });
+    }
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, others), {}, {
+    ref: ref,
+    style: {
+      display: visible ? 'block' : 'none'
+    },
+    className: (0, _classnames["default"])('fcr-action-bar-item-wrapper', className),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      onClick: function onClick() {
+        !disabled && (_onClick === null || _onClick === void 0 ? void 0 : _onClick());
+      },
+      className: (0, _classnames["default"])('fcr-action-bar-item', {
+        'fcr-action-bar-item-active': active,
+        'fcr-action-bar-item-disabled': disabled
+      }),
+      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
+      })]
+    })
+  }));
+};
+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
+    })
+  }));
+};

package/lib/components/action-bar/more/index.d.ts

@@ -0,0 +1,4 @@
+export declare const More: ({ id, order }: {
+    id: string;
+    order: number;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/components/action-bar/more/index.js

@@ -0,0 +1,48 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.More = void 0;
+require("core-js/modules/es.array.map.js");
+var _react = require("react");
+var _i18n = require("../../../i18n");
+var _type = require("../../icon/type");
+var _tooltip = require("../../tooltip");
+var _item = require("../item");
+var _ = require("..");
+var _jsxRuntime = require("react/jsx-runtime");
+var More = exports.More = function More(_ref) {
+  var id = _ref.id,
+    order = _ref.order;
+  var t = (0, _i18n.useI18n)();
+  var _useContext = (0, _react.useContext)(_.actionBarCollapesContext),
+    collapseList = _useContext.collapseList;
+  var title = t('fmt_participants_member_button_more');
+  var tooltip = t('fmt_participants_member_button_more');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    content: tooltip,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItemWithPopover, {
+      popoverProps: {
+        trigger: 'click',
+        content: collapseList === null || collapseList === void 0 ? void 0 : collapseList.map(function (item) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            style: {
+              color: 'var(--fcr_ui_scene_icontext1)'
+            },
+            children: item
+          });
+        })
+      },
+      id: id,
+      order: order,
+      icon: _type.FcrIconType.FCR_MOBILE_MORE,
+      title: title,
+      onClick: function onClick() {},
+      iconColors: {
+        iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+      }
+    })
+  });
+};

package/lib/components/action-bar/participants/index.d.ts

@@ -0,0 +1,4 @@
+export declare const Participants: ({ id, order }: {
+    id: string;
+    order: number;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/components/action-bar/participants/index.js

@@ -0,0 +1,55 @@
+"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.Participants = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _i18n = require("../../../i18n");
+var _tooltip = require("../../tooltip");
+var _item = require("../item");
+var _type = require("../../icon/type");
+var _jsxRuntime = require("react/jsx-runtime");
+var Participants = exports.Participants = function Participants(_ref) {
+  var id = _ref.id,
+    order = _ref.order;
+  var t = (0, _i18n.useI18n)();
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    tooltipVisible = _useState2[0],
+    setTooltipVisible = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    dialogTooltipVisible = _useState4[0],
+    setDialogTooltipVisible = _useState4[1];
+  var userCount = 0;
+  var title = t('fmt_role_label_participants');
+  var tooltip = t('fmt_role_label_participants');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    visible: tooltipVisible,
+    onVisibleChange: function onVisibleChange(visible) {
+      if (dialogTooltipVisible) {
+        setTooltipVisible(false);
+      } else {
+        setTooltipVisible(visible);
+      }
+    },
+    content: tooltip,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-action-bar-participants-wrapper",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItem, {
+        id: id,
+        order: order,
+        onClick: function onClick() {},
+        icon: _type.FcrIconType.FCR_PEOPLE,
+        iconColors: {
+          iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+        },
+        title: title
+      })
+    })
+  });
+};

package/lib/components/action-bar/record/index.css

@@ -0,0 +1,15 @@
+.fcr-status-bar-record-starting {
+    animation: breath 1.5s linear infinite;
+  }
+  @keyframes breath {
+    from {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  

package/lib/components/action-bar/record/index.d.ts

@@ -0,0 +1,5 @@
+import './index.css';
+export declare const Record: ({ id, order }: {
+    id: string;
+    order: number;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/components/action-bar/record/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Record = void 0;
+var _i18n = require("../../../i18n");
+var _type = require("../../icon/type");
+var _tooltip = require("../../tooltip");
+var _item = require("../item");
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+var Record = exports.Record = function Record(_ref) {
+  var id = _ref.id,
+    order = _ref.order;
+  var t = (0, _i18n.useI18n)();
+  var icon = true ? _type.FcrIconType.FCR_RECORDING_ON : _type.FcrIconType.FCR_RECORDING_STOP;
+  var tooltip = t('fmt_recording_button_rrecording');
+  var title = t('fmt_recording_button_rrecording');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    content: tooltip,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItem, {
+      id: id,
+      order: order,
+      onClick: function onClick() {},
+      icon: icon,
+      title: title,
+      iconColors: {
+        iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+      }
+    })
+  });
+};

package/lib/components/action-bar/respond/index.d.ts

@@ -0,0 +1,4 @@
+export declare const Respond: ({ id, order }: {
+    id: string;
+    order: number;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/components/action-bar/respond/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Respond = void 0;
+var _i18n = require("../../../i18n");
+var _type = require("../../icon/type");
+var _tooltip = require("../../tooltip");
+var _item = require("../item");
+var _jsxRuntime = require("react/jsx-runtime");
+var Respond = exports.Respond = function Respond(_ref) {
+  var id = _ref.id,
+    order = _ref.order;
+  var transI18n = (0, _i18n.useI18n)();
+  var title = 'Respond';
+  var tooltip = 'Respond';
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    content: tooltip,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItem, {
+      id: id,
+      order: order,
+      icon: _type.FcrIconType.FCR_EMO,
+      title: title,
+      onClick: function onClick() {},
+      iconColors: {
+        iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+      }
+    })
+  });
+};

package/lib/components/action-bar/screen-share/index.d.ts

@@ -0,0 +1,4 @@
+export declare const ScreenShare: ({ id, order }: {
+    id: string;
+    order: number;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,32 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScreenShare = void 0;
+var _i18n = require("../../../i18n");
+var _type = require("../../icon/type");
+var _tooltip = require("../../tooltip");
+var _item = require("../item");
+var _jsxRuntime = require("react/jsx-runtime");
+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');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    content: tooltip,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItem, {
+      id: id,
+      order: order,
+      onClick: function onClick() {},
+      icon: _type.FcrIconType.FCR_SCREENSHARING,
+      title: title,
+      iconColors: {
+        iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+      }
+    })
+  });
+};

package/lib/components/action-bar/security/index.d.ts

@@ -0,0 +1,4 @@
+export declare const Security: ({ id, order }: {
+    id: string;
+    order: number;
+}) => import("react/jsx-runtime").JSX.Element;