@gridsuite/commons-ui 0.35.1 → 0.35.3

package/es/components/TopBar/TopBar.js

@@ -0,0 +1,565 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+/**
+ * Copyright (c) 2020, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import React, { useEffect, useRef, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import AppBar from '@mui/material/AppBar';
+import ExitToAppIcon from '@mui/icons-material/ExitToApp';
+import { darken } from '@mui/material/styles';
+import { styled } from '@mui/system';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import SettingsIcon from '@mui/icons-material/Settings';
+import Button from '@mui/material/Button';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Box from '@mui/material/Box';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import AppsIcon from '@mui/icons-material/Apps';
+import SearchIcon from '@mui/icons-material/Search';
+import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp';
+import PersonIcon from '@mui/icons-material/Person';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+import Brightness3Icon from '@mui/icons-material/Brightness3';
+import WbSunnyIcon from '@mui/icons-material/WbSunny';
+import ComputerIcon from '@mui/icons-material/Computer';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import PropTypes from 'prop-types';
+import FullscreenIcon from '@mui/icons-material/Fullscreen';
+import FullScreen, { fullScreenSupported } from 'react-request-fullscreen';
+import Popper from '@mui/material/Popper';
+import Paper from '@mui/material/Paper';
+import MenuList from '@mui/material/MenuList';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import { mergeSx } from '../../utils/styles';
+import ElementSearchDialog from '../ElementSearchDialog';
+var styles = {
+  grow: {
+    flexGrow: 1,
+    display: 'flex',
+    overflow: 'hidden'
+  },
+  logo: {
+    flexShrink: 0,
+    width: 48,
+    height: 48,
+    marginBottom: '8px'
+  },
+  menuIcon: {
+    width: 24,
+    height: 24
+  },
+  title: {
+    marginLeft: '18px'
+  },
+  clickable: {
+    cursor: 'pointer'
+  },
+  link: {
+    textDecoration: 'none',
+    color: 'inherit'
+  },
+  name: function name(theme) {
+    return {
+      backgroundColor: darken(theme.palette.background.paper, 0.1),
+      paddingTop: '10px',
+      borderRadius: '100%',
+      fontWeight: '400',
+      textTransform: 'uppercase',
+      height: '48px',
+      width: '48px'
+    };
+  },
+  arrowIcon: {
+    fontSize: '40px'
+  },
+  userMail: {
+    fontSize: '14px',
+    display: 'block'
+  },
+  borderBottom: {
+    borderBottom: '1px solid #ccc'
+  },
+  borderTop: {
+    borderTop: '1px solid #ccc'
+  },
+  settingsMenu: {
+    maxWidth: '385px',
+    zIndex: 60
+  },
+  sizeLabel: {
+    fontSize: '16px'
+  },
+  showHideMenu: {
+    padding: '0',
+    borderRadius: '25px'
+  },
+  toggleButtonGroup: {
+    marginLeft: '15px',
+    pointerEvents: 'auto'
+  },
+  toggleButton: {
+    height: '30px',
+    width: '48px',
+    padding: '7px',
+    textTransform: 'capitalize'
+  },
+  languageToggleButton: {
+    height: '30px',
+    width: '48px'
+  }
+};
+var StyledMenu = styled(function (props) {
+  return /*#__PURE__*/React.createElement(Menu, _extends({
+    elevation: 0,
+    anchorOrigin: {
+      vertical: 'bottom',
+      horizontal: 'center'
+    },
+    transformOrigin: {
+      vertical: 'top',
+      horizontal: 'center'
+    }
+  }, props));
+})({
+  '& .MuiMenu-paper': {
+    border: '1px solid #d3d4d5'
+  }
+});
+var StyledMenuItem = styled(MenuItem)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    '&:focus': {
+      backgroundColor: theme.palette.primary.main,
+      '& .MuiListItemIcon-root, & .MuiListItemText-primary': {
+        color: theme.palette.common.white
+      }
+    }
+  };
+});
+var CustomListItemIcon = styled(ListItemIcon)({
+  minWidth: '30px',
+  paddingRight: '15px',
+  borderRadius: '25px'
+});
+export var DARK_THEME = 'Dark';
+export var LIGHT_THEME = 'Light';
+export var LANG_SYSTEM = 'sys';
+export var LANG_ENGLISH = 'en';
+export var LANG_FRENCH = 'fr';
+var EN = 'EN';
+var FR = 'FR';
+var TopBar = function TopBar(_ref2) {
+  var appName = _ref2.appName,
+    appColor = _ref2.appColor,
+    appLogo = _ref2.appLogo,
+    onParametersClick = _ref2.onParametersClick,
+    onLogoutClick = _ref2.onLogoutClick,
+    onLogoClick = _ref2.onLogoClick,
+    user = _ref2.user,
+    children = _ref2.children,
+    appsAndUrls = _ref2.appsAndUrls,
+    onAboutClick = _ref2.onAboutClick,
+    onThemeClick = _ref2.onThemeClick,
+    theme = _ref2.theme,
+    onEquipmentLabellingClick = _ref2.onEquipmentLabellingClick,
+    equipmentLabelling = _ref2.equipmentLabelling,
+    withElementsSearch = _ref2.withElementsSearch,
+    searchDisabled = _ref2.searchDisabled,
+    searchingLabel = _ref2.searchingLabel,
+    onSearchTermChange = _ref2.onSearchTermChange,
+    _onSelectionChange = _ref2.onSelectionChange,
+    elementsFound = _ref2.elementsFound,
+    renderElement = _ref2.renderElement,
+    onLanguageClick = _ref2.onLanguageClick,
+    language = _ref2.language,
+    searchTermDisabled = _ref2.searchTermDisabled,
+    initialSearchTerm = _ref2.initialSearchTerm;
+  var _React$useState = React.useState(null),
+    anchorElSettingsMenu = _React$useState[0],
+    setAnchorElSettingsMenu = _React$useState[1];
+  var _React$useState2 = React.useState(null),
+    anchorElAppsMenu = _React$useState2[0],
+    setAnchorElAppsMenu = _React$useState2[1];
+  var fullScreenRef = useRef(null);
+  var _useState = useState(false),
+    isFullScreen = _useState[0],
+    setIsFullScreen = _useState[1];
+  var _useState2 = useState(false),
+    isDialogSearchOpen = _useState2[0],
+    setDialogSearchOpen = _useState2[1];
+  var handleClickElementSearch = function handleClickElementSearch() {
+    setDialogSearchOpen(true);
+  };
+  var handleToggleSettingsMenu = function handleToggleSettingsMenu(event) {
+    setAnchorElSettingsMenu(event.currentTarget);
+  };
+  var handleCloseSettingsMenu = function handleCloseSettingsMenu() {
+    setAnchorElSettingsMenu(null);
+  };
+  var handleClickAppsMenu = function handleClickAppsMenu(event) {
+    setAnchorElAppsMenu(event.currentTarget);
+  };
+  var handleCloseAppsMenu = function handleCloseAppsMenu() {
+    setAnchorElAppsMenu(null);
+  };
+  var onParametersClicked = function onParametersClicked() {
+    setAnchorElSettingsMenu(null);
+    if (onParametersClick) {
+      onParametersClick();
+    }
+  };
+  function onFullScreenChange(isFullScreenValue) {
+    setAnchorElSettingsMenu(null);
+    setIsFullScreen(isFullScreen);
+  }
+  function requestOrExitFullScreen() {
+    setAnchorElSettingsMenu(null);
+    fullScreenRef.current.fullScreen();
+  }
+  var abbreviationFromUserName = function abbreviationFromUserName(name) {
+    var tab = name.split(' ').map(function (x) {
+      return x.charAt(0);
+    });
+    if (tab.length === 1) {
+      return tab[0];
+    } else {
+      return tab[0] + tab[tab.length - 1];
+    }
+  };
+  var changeTheme = function changeTheme(event, value) {
+    if (onThemeClick && value !== null) {
+      onThemeClick(value);
+    }
+  };
+  var changeEquipmentLabelling = function changeEquipmentLabelling(event, value) {
+    if (onEquipmentLabellingClick && value !== null) {
+      onEquipmentLabellingClick(value);
+    }
+  };
+  var changeLanguage = function changeLanguage(event, value) {
+    if (onLanguageClick && value !== null) {
+      onLanguageClick(value);
+    }
+  };
+  var onAboutClicked = function onAboutClicked() {
+    setAnchorElSettingsMenu(false);
+    if (onAboutClick) {
+      onAboutClick();
+    }
+  };
+  useEffect(function () {
+    if (user && withElementsSearch && !searchDisabled) {
+      var openSearch = function openSearch(e) {
+        if (e.ctrlKey && e.shiftKey && e.key === 'f') {
+          e.preventDefault();
+          setDialogSearchOpen(true);
+        }
+      };
+      document.addEventListener('keydown', openSearch);
+      return function () {
+        return document.removeEventListener('keydown', openSearch);
+      };
+    }
+  }, [user, withElementsSearch, searchDisabled]);
+  return /*#__PURE__*/React.createElement(AppBar, {
+    position: "static",
+    color: "default",
+    sx: styles.appBar
+  }, /*#__PURE__*/React.createElement(FullScreen, {
+    ref: fullScreenRef,
+    onFullScreenChange: onFullScreenChange,
+    onFullScreenError: function onFullScreenError(e) {
+      return console.debug('full screen error : ' + e.message);
+    }
+  }), /*#__PURE__*/React.createElement(Toolbar, null, /*#__PURE__*/React.createElement(Box, {
+    sx: mergeSx(styles.logo, onLogoClick && styles.clickable),
+    onClick: onLogoClick
+  }, appLogo), /*#__PURE__*/React.createElement(Typography, {
+    variant: "h4",
+    sx: mergeSx(styles.title, onLogoClick && styles.clickable),
+    onClick: onLogoClick
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontWeight: 'bold'
+    }
+  }, "Grid"), /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: appColor
+    }
+  }, appName)), /*#__PURE__*/React.createElement(Box, {
+    sx: styles.grow
+  }, children), user && withElementsSearch && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ElementSearchDialog, {
+    open: isDialogSearchOpen,
+    onClose: function onClose() {
+      return setDialogSearchOpen(false);
+    },
+    searchingLabel: searchingLabel,
+    onSearchTermChange: onSearchTermChange,
+    onSelectionChange: function onSelectionChange(element) {
+      setDialogSearchOpen(false);
+      _onSelectionChange(element);
+    },
+    elementsFound: elementsFound,
+    renderElement: renderElement,
+    searchTermDisabled: searchTermDisabled,
+    initialSearchTerm: initialSearchTerm
+  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+    color: "inherit",
+    onClick: handleClickElementSearch,
+    disabled: searchDisabled
+  }, /*#__PURE__*/React.createElement(SearchIcon, null)))), user && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+    "aria-controls": "apps-menu",
+    "aria-haspopup": "true",
+    onClick: handleClickAppsMenu,
+    color: "inherit"
+  }, /*#__PURE__*/React.createElement(AppsIcon, null)), /*#__PURE__*/React.createElement(StyledMenu, {
+    id: "apps-menu",
+    anchorEl: anchorElAppsMenu,
+    keepMounted: true,
+    open: Boolean(anchorElAppsMenu),
+    onClose: handleCloseAppsMenu
+  }, appsAndUrls && appsAndUrls.filter(function (item) {
+    return !item.hiddenInAppsMenu;
+  }).map(function (item) {
+    return /*#__PURE__*/React.createElement(Box, {
+      component: "a",
+      key: item.name,
+      href: item.url,
+      sx: styles.link,
+      target: "_blank",
+      rel: "noopener noreferrer"
+    }, /*#__PURE__*/React.createElement(StyledMenuItem, {
+      onClick: handleCloseAppsMenu
+    }, /*#__PURE__*/React.createElement(ListItemText, null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontWeight: 'bold'
+      }
+    }, "Grid"), /*#__PURE__*/React.createElement("span", {
+      style: {
+        color: item.appColor === undefined ? 'grey' : item.appColor,
+        fontWeight: 'bold'
+      }
+    }, item.name))));
+  }))), user && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+    "aria-controls": "settings-menu",
+    "aria-haspopup": "true",
+    sx: styles.showHideMenu,
+    onClick: handleToggleSettingsMenu,
+    color: "inherit",
+    style: Boolean(anchorElSettingsMenu) ? {
+      cursor: 'initial'
+    } : {
+      cursor: 'pointer'
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
+    component: "span",
+    sx: styles.name
+  }, user !== null ? abbreviationFromUserName(user.profile.name) : ''), anchorElSettingsMenu ? /*#__PURE__*/React.createElement(ArrowDropUpIcon, {
+    sx: styles.arrowIcon
+  }) : /*#__PURE__*/React.createElement(ArrowDropDownIcon, {
+    sx: styles.arrowIcon
+  })), /*#__PURE__*/React.createElement(Popper, {
+    sx: styles.settingsMenu,
+    open: Boolean(anchorElSettingsMenu),
+    anchorEl: anchorElSettingsMenu
+  }, /*#__PURE__*/React.createElement(Paper, null, /*#__PURE__*/React.createElement(ClickAwayListener, {
+    onClickAway: handleCloseSettingsMenu
+  }, /*#__PURE__*/React.createElement(MenuList, {
+    id: "settings-menu"
+  }, /*#__PURE__*/React.createElement(StyledMenuItem, {
+    sx: styles.borderBottom,
+    disabled: true,
+    style: {
+      opacity: '1'
+    }
+  }, /*#__PURE__*/React.createElement(CustomListItemIcon, null, /*#__PURE__*/React.createElement(PersonIcon, {
+    fontSize: "small"
+  })), /*#__PURE__*/React.createElement(ListItemText, {
+    disabled: false
+  }, user !== null && /*#__PURE__*/React.createElement(Box, {
+    component: "span",
+    sx: styles.sizeLabel
+  }, user.profile.name, ' ', /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Box, {
+    component: "span",
+    sx: styles.userMail
+  }, user.profile.email)))), /*#__PURE__*/React.createElement(StyledMenuItem, {
+    disabled: true,
+    style: {
+      opacity: '1',
+      paddingTop: '10px',
+      paddingBottom: '10px',
+      backgroundColor: 'transparent'
+    }
+  }, /*#__PURE__*/React.createElement(ListItemText, null, /*#__PURE__*/React.createElement(Typography, {
+    sx: styles.sizeLabel
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "top-bar/displayMode",
+    defaultMessage: 'Display mode'
+  }))), /*#__PURE__*/React.createElement(ToggleButtonGroup, {
+    exclusive: true,
+    value: theme,
+    size: "large",
+    sx: styles.toggleButtonGroup,
+    onChange: changeTheme
+  }, /*#__PURE__*/React.createElement(ToggleButton, {
+    value: LIGHT_THEME,
+    "aria-label": LIGHT_THEME,
+    sx: styles.toggleButton
+  }, /*#__PURE__*/React.createElement(WbSunnyIcon, {
+    fontSize: "small"
+  })), /*#__PURE__*/React.createElement(ToggleButton, {
+    value: DARK_THEME,
+    "aria-label": DARK_THEME,
+    sx: styles.toggleButton
+  }, /*#__PURE__*/React.createElement(Brightness3Icon, {
+    fontSize: "small"
+  })))), onEquipmentLabellingClick && /*#__PURE__*/React.createElement(StyledMenuItem, {
+    disabled: true,
+    style: {
+      opacity: '1',
+      // padding: '0',
+      paddingTop: '10px',
+      paddingBottom: '10px',
+      backgroundColor: 'transparent'
+    }
+  }, /*#__PURE__*/React.createElement(ListItemText, null, /*#__PURE__*/React.createElement(Typography, {
+    sx: styles.sizeLabel
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "top-bar/equipmentLabel",
+    defaultMessage: 'Equipment label'
+  }))), /*#__PURE__*/React.createElement(ToggleButtonGroup, {
+    exclusive: true,
+    value: equipmentLabelling,
+    sx: styles.toggleButtonGroup,
+    onChange: changeEquipmentLabelling
+  }, /*#__PURE__*/React.createElement(ToggleButton, {
+    value: false,
+    sx: styles.toggleButton
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "top-bar/id",
+    defaultMessage: 'Id'
+  })), /*#__PURE__*/React.createElement(ToggleButton, {
+    value: true,
+    sx: styles.toggleButton
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "top-bar/name",
+    defaultMessage: 'Name'
+  })))), /*#__PURE__*/React.createElement(StyledMenuItem, {
+    disabled: true,
+    style: {
+      opacity: '1',
+      paddingTop: '10px',
+      paddingBottom: '10px',
+      backgroundColor: 'transparent'
+    }
+  }, /*#__PURE__*/React.createElement(ListItemText, null, /*#__PURE__*/React.createElement(Typography, {
+    sx: styles.sizeLabel
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "top-bar/language",
+    defaultMessage: 'Language'
+  }))), /*#__PURE__*/React.createElement(ToggleButtonGroup, {
+    exclusive: true,
+    value: language,
+    sx: styles.toggleButtonGroup,
+    onChange: changeLanguage
+  }, /*#__PURE__*/React.createElement(ToggleButton, {
+    value: LANG_SYSTEM,
+    "aria-label": LANG_SYSTEM,
+    sx: styles.languageToggleButton
+  }, /*#__PURE__*/React.createElement(ComputerIcon, null)), /*#__PURE__*/React.createElement(ToggleButton, {
+    value: LANG_ENGLISH,
+    "aria-label": LANG_ENGLISH,
+    sx: styles.languageToggleButton
+  }, EN), /*#__PURE__*/React.createElement(ToggleButton, {
+    value: LANG_FRENCH,
+    "aria-label": LANG_FRENCH,
+    sx: styles.toggleButton
+  }, FR))), /*#__PURE__*/React.createElement(StyledMenuItem, {
+    disabled: !onParametersClick,
+    onClick: onParametersClicked,
+    sx: styles.borderTop
+  }, /*#__PURE__*/React.createElement(CustomListItemIcon, null, /*#__PURE__*/React.createElement(SettingsIcon, {
+    fontSize: "small"
+  })), /*#__PURE__*/React.createElement(ListItemText, null, /*#__PURE__*/React.createElement(Typography, {
+    sx: styles.sizeLabel
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "top-bar/settings",
+    defaultMessage: 'Settings'
+  })))), /*#__PURE__*/React.createElement(StyledMenuItem, {
+    sx: styles.borderBottom,
+    disabled: true,
+    style: {
+      opacity: '1'
+    },
+    onClick: onAboutClicked
+  }, /*#__PURE__*/React.createElement(CustomListItemIcon, null, /*#__PURE__*/React.createElement(HelpOutlineIcon, {
+    fontSize: "small"
+  })), /*#__PURE__*/React.createElement(ListItemText, null, /*#__PURE__*/React.createElement(Typography, {
+    sx: styles.sizeLabel
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "top-bar/about",
+    defaultMessage: 'About'
+  })))), fullScreenSupported() && /*#__PURE__*/React.createElement(StyledMenuItem, {
+    onClick: requestOrExitFullScreen
+  }, isFullScreen ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CustomListItemIcon, null, /*#__PURE__*/React.createElement(FullscreenExitIcon, {
+    fontSize: "small"
+  })), /*#__PURE__*/React.createElement(ListItemText, null, /*#__PURE__*/React.createElement(Typography, {
+    sx: styles.sizeLabel
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "top-bar/exitFullScreen",
+    defaultMessage: 'Exit full screen mode'
+  })))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CustomListItemIcon, null, /*#__PURE__*/React.createElement(FullscreenIcon, {
+    fontSize: "small"
+  })), /*#__PURE__*/React.createElement(ListItemText, null, /*#__PURE__*/React.createElement(Typography, {
+    sx: styles.sizeLabel
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "top-bar/goFullScreen",
+    defaultMessage: 'Full screen'
+  }))))), /*#__PURE__*/React.createElement(StyledMenuItem, {
+    onClick: onLogoutClick
+  }, /*#__PURE__*/React.createElement(CustomListItemIcon, null, /*#__PURE__*/React.createElement(ExitToAppIcon, {
+    fontSize: "small"
+  })), /*#__PURE__*/React.createElement(ListItemText, null, /*#__PURE__*/React.createElement(Typography, {
+    sx: styles.sizeLabel
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "top-bar/logout",
+    defaultMessage: 'Logout'
+  })))))))))));
+};
+TopBar.propTypes = process.env.NODE_ENV !== "production" ? {
+  onParametersClick: PropTypes.func,
+  onLogoutClick: PropTypes.func,
+  onLogoClick: PropTypes.func,
+  appName: PropTypes.string,
+  appColor: PropTypes.string,
+  appLogo: PropTypes.object,
+  user: PropTypes.object,
+  children: PropTypes.node,
+  appsAndUrls: PropTypes.array,
+  onThemeClick: PropTypes.func,
+  theme: PropTypes.string,
+  onAboutClick: PropTypes.func,
+  onEquipmentLabellingClick: PropTypes.func,
+  equipmentLabelling: PropTypes.bool,
+  withElementsSearch: PropTypes.bool,
+  searchDisabled: PropTypes.bool,
+  searchingLabel: PropTypes.string,
+  onSearchTermChange: PropTypes.func,
+  onSelectionChange: PropTypes.func,
+  elementsFound: PropTypes.array,
+  onLanguageClick: PropTypes.func.isRequired,
+  language: PropTypes.string.isRequired,
+  searchTermDisabled: PropTypes.bool,
+  initialSearchTerm: PropTypes.string
+} : {};
+export default TopBar;

package/es/components/TopBar/index.js

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2020, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+export { default } from './TopBar';