agora-ui-foundation 1.0.0

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

@@ -0,0 +1,419 @@
+"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.MicrophoneDevice = exports.CameraDevice = exports.AudioRecordinDeviceIcon = void 0;
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/web.timers.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+require("./index.css");
+var _icon = require("../../icon");
+var _type = require("../../icon/type");
+var _microphoneIndicator = require("../../microphone-indicator");
+var _i18n = require("../../../i18n");
+var _tooltip = require("../../tooltip");
+var _popover = require("../../popover");
+var _radio = require("../../radio");
+var _jsxRuntime = require("react/jsx-runtime");
+var AudioRecordinDeviceIcon = exports.AudioRecordinDeviceIcon = function AudioRecordinDeviceIcon(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 32 : _ref$size,
+    _ref$micEnabled = _ref.micEnabled,
+    micEnabled = _ref$micEnabled === void 0 ? false : _ref$micEnabled,
+    _ref$volume = _ref.volume,
+    volume = _ref$volume === void 0 ? 0 : _ref$volume;
+  var muteColor = {
+    iconPrimary: "var(--fcr_ui_scene_ramp_red6)",
+    iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
+  };
+  var t = (0, _i18n.useI18n)();
+  return !micEnabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+    type: _type.FcrIconType.FCR_NOMUTE,
+    colors: muteColor,
+    size: size
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_microphoneIndicator.MicrophoneIndicator, {
+      size: size,
+      voicePercent: volume
+    })
+  });
+};
+var MicrophoneDevice = exports.MicrophoneDevice = function MicrophoneDevice() {
+  var _useDeviceTooltipVisi = useDeviceTooltipVisible(),
+    tooltipVisible = _useDeviceTooltipVisi.tooltipVisible,
+    popoverOpened = _useDeviceTooltipVisi.popoverOpened,
+    handlePopoverVisibleChanged = _useDeviceTooltipVisi.handlePopoverVisibleChanged,
+    handleTooltipVisibleChanged = _useDeviceTooltipVisi.handleTooltipVisibleChanged;
+  var t = (0, _i18n.useI18n)();
+  var _useState = (0, _react.useState)(true),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    micEnabled = _useState2[0],
+    setMicEnabled = _useState2[1];
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    volume = _useState4[0],
+    setVolume = _useState4[1];
+  (0, _react.useEffect)(function () {
+    var timer = setInterval(function () {
+      setVolume(11 + Math.floor(Math.random() * 90));
+    }, 1000);
+    return function () {
+      return clearInterval(timer);
+    };
+  }, []);
+  var title = (0, _react.useMemo)(function () {
+    return micEnabled ? t('fmt_device_label_audio_mute') : t('fmt_device_label_audio_unmute');
+  }, [micEnabled]);
+  var tooltip = title;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    mouseEnterDelay: 0,
+    visible: tooltipVisible,
+    onVisibleChange: handleTooltipVisibleChanged,
+    content: tooltip,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-action-bar-item-wrapper",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-action-bar-device",
+        onClick: function onClick() {
+          setMicEnabled(!micEnabled);
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "fcr-action-bar-device-inner",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AudioRecordinDeviceIcon, {
+            micEnabled: micEnabled,
+            volume: volume
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "fcr-action-bar-device-text",
+            children: title
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+          overlayClassName: "fcr-action-bar--device-popover",
+          visible: popoverOpened,
+          onVisibleChange: handlePopoverVisibleChanged,
+          trigger: "click",
+          content: /*#__PURE__*/(0, _jsxRuntime.jsx)(AudioDeviceListPopoverContent, {
+            onMoreClick: function onMoreClick() {}
+          }),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            onClick: function onClick(e) {
+              e.stopPropagation();
+            },
+            className: "fcr-action-bar-device-extra",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+              type: _type.FcrIconType.FCR_DROPUP4,
+              colors: {
+                iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+              },
+              size: 24
+            })
+          })
+        })]
+      })
+    })
+  });
+};
+var CameraDevice = exports.CameraDevice = function CameraDevice() {
+  var t = (0, _i18n.useI18n)();
+  var _useDeviceTooltipVisi2 = useDeviceTooltipVisible(),
+    tooltipVisible = _useDeviceTooltipVisi2.tooltipVisible,
+    popoverOpened = _useDeviceTooltipVisi2.popoverOpened,
+    handlePopoverVisibleChanged = _useDeviceTooltipVisi2.handlePopoverVisibleChanged,
+    handleTooltipVisibleChanged = _useDeviceTooltipVisi2.handleTooltipVisibleChanged,
+    setPopoverOpened = _useDeviceTooltipVisi2.setPopoverOpened;
+  var _useState5 = (0, _react.useState)(true),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    cameraEnabled = _useState6[0],
+    setCameraEnabled = _useState6[1];
+  var muteColor = {
+    iconPrimary: cameraEnabled ? "var(--fcr_web_ui_scene_mainicon1)" : 'var(--fcr_ui_scene_ramp_red6)',
+    iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
+  };
+  var icon = cameraEnabled ? _type.FcrIconType.FCR_CAMERA : _type.FcrIconType.FCR_CAMERAOFF;
+  var title = (0, _react.useMemo)(function () {
+    return cameraEnabled ? t('fmt_toolbar_label_camera') : t('fmt_toolbar_options_enablecamera');
+  }, [cameraEnabled]);
+  var tooltip = title;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    mouseEnterDelay: 0,
+    onVisibleChange: handleTooltipVisibleChanged,
+    visible: tooltipVisible,
+    content: tooltip,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-action-bar-item-wrapper",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-action-bar-device",
+        onClick: function onClick() {
+          setCameraEnabled(!cameraEnabled);
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "fcr-action-bar-device-inner",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: icon,
+            colors: muteColor,
+            size: 32
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "fcr-action-bar-device-text",
+            children: title
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+          visible: popoverOpened,
+          onVisibleChange: handlePopoverVisibleChanged,
+          overlayClassName: "fcr-action-bar--device-popover",
+          content: /*#__PURE__*/(0, _jsxRuntime.jsx)(VideoDeviceListPopoverContent, {
+            onMoreClick: function onMoreClick() {}
+          }),
+          trigger: "click",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            onClick: function onClick(e) {
+              e.stopPropagation();
+            },
+            className: "fcr-action-bar-device-extra",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+              type: _type.FcrIconType.FCR_DROPUP4,
+              colors: {
+                iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+              },
+              size: 24
+            })
+          })
+        })]
+      })
+    })
+  });
+};
+var useDeviceTooltipVisible = function useDeviceTooltipVisible() {
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    popoverOpened = _useState8[0],
+    setPopoverOpened = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
+    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+    tooltipVisible = _useState10[0],
+    setTooltipVisible = _useState10[1];
+  var handleTooltipVisibleChanged = function handleTooltipVisibleChanged(visible) {
+    if (popoverOpened) {
+      setTooltipVisible(false);
+    } else {
+      setTooltipVisible(visible);
+    }
+  };
+  var handlePopoverVisibleChanged = function handlePopoverVisibleChanged(visible) {
+    if (tooltipVisible) {
+      setTooltipVisible(false);
+    }
+    setPopoverOpened(visible);
+  };
+  return {
+    popoverOpened: popoverOpened,
+    tooltipVisible: tooltipVisible,
+    handleTooltipVisibleChanged: handleTooltipVisibleChanged,
+    handlePopoverVisibleChanged: handlePopoverVisibleChanged,
+    setPopoverOpened: setPopoverOpened,
+    setTooltipVisible: setTooltipVisible
+  };
+};
+var VideoDeviceListPopoverContent = function VideoDeviceListPopoverContent(_ref2) {
+  var onMoreClick = _ref2.onMoreClick;
+  var t = (0, _i18n.useI18n)();
+  var _useState11 = (0, _react.useState)('default'),
+    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+    cameraDeviceId = _useState12[0],
+    setCameraDeviceId = _useState12[1];
+  var cameraDevicesList = [{
+    text: '默认-imac摄像头（buildt-in）',
+    value: 'default'
+  }, {
+    text: 'Camera device',
+    value: 'device1'
+  }];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-device-popover-content",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-device-popover-content-device-list",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-device-popover-content-device",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-device-popover-content-device-label",
+          children: "Select a camera"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "fcr-device-popover-content-device-options",
+          children: [cameraDevicesList.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.FcrRadio, {
+              name: "No device",
+              styleType: "transparent",
+              checked: true,
+              label: t('fmt_toolbar_tips_nodevice')
+            })
+          }), cameraDevicesList.map(function (device) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              onClick: function onClick() {},
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.FcrRadio, {
+                name: "video",
+                styleType: "transparent",
+                checked: cameraDeviceId === device.value,
+                onChange: function onChange(v) {
+                  return v && setCameraDeviceId(device.value);
+                },
+                label: device.text
+              })
+            }, device.value);
+          })]
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-device-popover-content-more",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-device-popover-content-more-item",
+        children: t('fmt_device_label_video_list_selectVirtualBackground')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-device-popover-content-more-item",
+        children: t('fmt_device_label_video_list_selectVideoFilter')
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-device-popover-content-more",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: 'fcr-device-popover-content-more-item contain-icon',
+        onClick: onMoreClick,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_SETTING,
+          size: 24
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          children: [t('fmt_setting_option_Video'), "..."]
+        })]
+      })
+    })]
+  });
+};
+var AudioDeviceListPopoverContent = function AudioDeviceListPopoverContent(_ref3) {
+  var onMoreClick = _ref3.onMoreClick;
+  var t = (0, _i18n.useI18n)();
+  var _useState13 = (0, _react.useState)('default'),
+    _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
+    audioRecordingDeviceId = _useState14[0],
+    setAudioRecordingDeviceId = _useState14[1];
+  var _useState15 = (0, _react.useState)('default'),
+    _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
+    audioPlaybackDeviceId = _useState16[0],
+    setAudioPlaybackDeviceId = _useState16[1];
+  var recordingDevicesList = [{
+    text: '默认-imac麦克风（buildt-in）',
+    value: 'default'
+  }, {
+    text: 'wechat audio device',
+    value: 'wechat'
+  }];
+  var playbackDevicesList = [{
+    text: '默认-外置耳机2',
+    value: 'default'
+  }, {
+    text: '外置耳机1',
+    value: 'device1'
+  }, {
+    text: 'imac扬声器（buildt-in）',
+    value: 'device2'
+  }];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "fcr-device-popover-content",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-device-popover-content-device-list",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-device-popover-content-device",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-device-popover-content-device-label",
+          children: t('fmt_pstn_label_micselect')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "fcr-device-popover-content-device-options",
+          children: [recordingDevicesList.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.FcrRadio, {
+              name: "No device",
+              styleType: "transparent",
+              checked: true,
+              label: t('fmt_toolbar_tips_nodevice')
+            })
+          }), recordingDevicesList.map(function (device) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.FcrRadio, {
+                name: "mic",
+                styleType: "transparent",
+                checked: audioRecordingDeviceId === device.value,
+                label: device.text,
+                onChange: function onChange(v) {
+                  return v && setAudioRecordingDeviceId(device.value);
+                }
+              })
+            }, device.value);
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-device-popover-content-device",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-device-popover-content-device-label",
+          children: t('fmt_pstn_label_micselect')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "fcr-device-popover-content-device-options",
+          children: [playbackDevicesList.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.FcrRadio, {
+              name: "No device",
+              styleType: "transparent",
+              checked: true,
+              label: t('fmt_toolbar_tips_nodevice')
+            })
+          }), playbackDevicesList.map(function (device) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              onClick: function onClick() {},
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.FcrRadio, {
+                name: "speaker",
+                styleType: "transparent",
+                checked: audioPlaybackDeviceId === device.value,
+                label: device.text,
+                onChange: function onChange(v) {
+                  return v && setAudioPlaybackDeviceId(device.value);
+                }
+              })
+            }, device.value);
+          })]
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-device-popover-content-more",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-device-popover-content-more-item",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: t('fmt_device_label_audio_list_leaveComputerAudio')
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-device-popover-content-more-item",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: t('fmt_device_label_audio_list_switchToPhoneCall')
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-device-popover-content-more-item",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: t('fmt_device_label_audio_list_testAudioDevice')
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-device-popover-content-more",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-device-popover-content-more-item contain-icon",
+        onClick: onMoreClick,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_SETTING,
+          size: 24
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          children: [t('fmt_pstn_options_audio_setting'), "..."]
+        })]
+      })
+    })]
+  });
+};

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

@@ -0,0 +1 @@
+export declare const End: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,26 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.End = void 0;
+var _i18n = require("../../../i18n");
+var _button = require("../../button");
+var _type = require("../../icon/type");
+var _tooltip = require("../../tooltip");
+var _jsxRuntime = require("react/jsx-runtime");
+var End = exports.End = function End() {
+  var t = (0, _i18n.useI18n)();
+  var handleClick = function handleClick() {};
+  var icon = true ? _type.FcrIconType.FCR_WHITEBOARD_ON : _type.FcrIconType.FCR_WHITEBOARD;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    content: t('fmt_toolbar_button_end'),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
+      shape: "rounded",
+      size: "XS",
+      styleType: "danger",
+      children: t('fmt_toolbar_button_end')
+    })
+  });
+};

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

@@ -0,0 +1,92 @@
+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;
+}
+.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;
+}
+.fcr-action-bar-collapse {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  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;
+  justify-content: center;
+  flex-shrink: 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 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 100%;
+  height: 100%;
+}
+.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;
+}

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

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+import './index.css';
+type FcrActionBarProps = {};
+export declare const FcrActionBar: FC<FcrActionBarProps>;
+type ActionBarCollapesContext = {
+    items: {
+        name: string;
+        width: number;
+        order: number;
+    }[];
+    setItem: (items: {
+        name: string;
+        width: number;
+        order: number;
+    }) => void;
+    visibleList: string[];
+    collapseList?: string[];
+};
+export declare const actionBarCollapesContext: import("react").Context<ActionBarCollapesContext>;
+export {};