@wireapp/react-ui-kit 8.14.1 → 8.14.4

package/src/Layout/headerMenu/HeaderMenu.js

@@ -1,59 +1,122 @@
 "use strict";
-/*
- * Wire
- * Copyright (C) 2018 Wire Swiss GmbH
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program. If not, see http://www.gnu.org/licenses/.
- *
- */
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.HeaderMenu = void 0;
-/** @jsx jsx */
-const react_1 = require("@emotion/react");
-const react_2 = require("react");
-const MenuContent_1 = require("./MenuContent");
-const MenuItems_1 = require("./MenuItems");
-const MenuOpenButton_1 = require("./MenuOpenButton");
-const MenuScrollableItems_1 = require("./MenuScrollableItems");
-const HeaderMenu = (_a) => {
-    var { children, logoElement = null, centerElement = null } = _a, props = __rest(_a, ["children", "logoElement", "centerElement"]);
-    const [isOpen, setIsOpen] = (0, react_2.useState)(false);
-    const toggleMenu = () => {
-        if (typeof window !== 'undefined') {
-            window.scrollTo(0, 0);
-            setIsOpen(current => !current);
-        }
-    };
-    const closeMenu = () => setIsOpen(false);
-    return ((0, react_1.jsx)("div", Object.assign({ css: { height: '64px' } }, props, { "data-uie-name": "element-header-menu" }),
-        (0, react_1.jsx)(MenuContent_1.MenuContent, { open: isOpen },
-            (0, react_1.jsx)("div", { css: { alignSelf: 'center', display: 'flex', zIndex: 2 }, onClick: closeMenu }, logoElement),
-            (0, react_1.jsx)("div", { css: { alignSelf: 'center', display: 'flex' } }, centerElement),
-            (0, react_1.jsx)(MenuOpenButton_1.MenuOpenButton, { onClick: toggleMenu, open: isOpen, style: { justifySelf: 'end', position: isOpen ? 'fixed' : undefined, right: '16px', top: '21px' }, "data-uie-name": "do-toggle-header-menu" }),
-            (0, react_1.jsx)(MenuItems_1.MenuItems, { onClick: closeMenu, open: isOpen },
-                (0, react_1.jsx)(MenuScrollableItems_1.MenuScrollableItems, null, children)))));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = require("@emotion/react");
+
+var _react2 = _interopRequireWildcard(require("react"));
+
+var _MenuContent = require("./MenuContent");
+
+var _MenuItems = require("./MenuItems");
+
+var _MenuOpenButton = require("./MenuOpenButton");
+
+var _MenuScrollableItems = require("./MenuScrollableItems");
+
+var _excluded = ["children", "logoElement", "centerElement"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "107gg21",
+  styles: "height:64px"
+} : {
+  name: "12rdvkk-HeaderMenu",
+  styles: "height:64px;label:HeaderMenu;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkhlYWRlck1lbnUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStDUyIsImZpbGUiOiJIZWFkZXJNZW51LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBXaXJlXG4gKiBDb3B5cmlnaHQgKEMpIDIwMTggV2lyZSBTd2lzcyBHbWJIXG4gKlxuICogVGhpcyBwcm9ncmFtIGlzIGZyZWUgc29mdHdhcmU6IHlvdSBjYW4gcmVkaXN0cmlidXRlIGl0IGFuZC9vciBtb2RpZnlcbiAqIGl0IHVuZGVyIHRoZSB0ZXJtcyBvZiB0aGUgR05VIEdlbmVyYWwgUHVibGljIExpY2Vuc2UgYXMgcHVibGlzaGVkIGJ5XG4gKiB0aGUgRnJlZSBTb2Z0d2FyZSBGb3VuZGF0aW9uLCBlaXRoZXIgdmVyc2lvbiAzIG9mIHRoZSBMaWNlbnNlLCBvclxuICogKGF0IHlvdXIgb3B0aW9uKSBhbnkgbGF0ZXIgdmVyc2lvbi5cbiAqXG4gKiBUaGlzIHByb2dyYW0gaXMgZGlzdHJpYnV0ZWQgaW4gdGhlIGhvcGUgdGhhdCBpdCB3aWxsIGJlIHVzZWZ1bCxcbiAqIGJ1dCBXSVRIT1VUIEFOWSBXQVJSQU5UWTsgd2l0aG91dCBldmVuIHRoZSBpbXBsaWVkIHdhcnJhbnR5IG9mXG4gKiBNRVJDSEFOVEFCSUxJVFkgb3IgRklUTkVTUyBGT1IgQSBQQVJUSUNVTEFSIFBVUlBPU0UuIFNlZSB0aGVcbiAqIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlIGZvciBtb3JlIGRldGFpbHMuXG4gKlxuICogWW91IHNob3VsZCBoYXZlIHJlY2VpdmVkIGEgY29weSBvZiB0aGUgR05VIEdlbmVyYWwgUHVibGljIExpY2Vuc2VcbiAqIGFsb25nIHdpdGggdGhpcyBwcm9ncmFtLiBJZiBub3QsIHNlZSBodHRwOi8vd3d3LmdudS5vcmcvbGljZW5zZXMvLlxuICpcbiAqL1xuXG4vKiogQGpzeCBqc3ggKi9cbmltcG9ydCB7anN4fSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHt1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQge01lbnVDb250ZW50fSBmcm9tICcuL01lbnVDb250ZW50JztcbmltcG9ydCB7TWVudUl0ZW1zfSBmcm9tICcuL01lbnVJdGVtcyc7XG5pbXBvcnQge01lbnVPcGVuQnV0dG9ufSBmcm9tICcuL01lbnVPcGVuQnV0dG9uJztcbmltcG9ydCB7TWVudVNjcm9sbGFibGVJdGVtc30gZnJvbSAnLi9NZW51U2Nyb2xsYWJsZUl0ZW1zJztcblxuZXhwb3J0IGludGVyZmFjZSBIZWFkZXJNZW51UHJvcHM8VCA9IEhUTUxEaXZFbGVtZW50PiBleHRlbmRzIFJlYWN0LkhUTUxQcm9wczxUPiB7XG4gIGNlbnRlckVsZW1lbnQ/OiBSZWFjdC5SZWFjdE5vZGU7XG4gIGxvZ29FbGVtZW50PzogUmVhY3QuUmVhY3ROb2RlO1xufVxuXG5leHBvcnQgY29uc3QgSGVhZGVyTWVudSA9ICh7Y2hpbGRyZW4sIGxvZ29FbGVtZW50ID0gbnVsbCwgY2VudGVyRWxlbWVudCA9IG51bGwsIC4uLnByb3BzfTogSGVhZGVyTWVudVByb3BzKSA9PiB7XG4gIGNvbnN0IFtpc09wZW4sIHNldElzT3Blbl0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgY29uc3QgdG9nZ2xlTWVudSA9ICgpID0+IHtcbiAgICBpZiAodHlwZW9mIHdpbmRvdyAhPT0gJ3VuZGVmaW5lZCcpIHtcbiAgICAgIHdpbmRvdy5zY3JvbGxUbygwLCAwKTtcbiAgICAgIHNldElzT3BlbihjdXJyZW50ID0+ICFjdXJyZW50KTtcbiAgICB9XG4gIH07XG5cbiAgY29uc3QgY2xvc2VNZW51ID0gKCkgPT4gc2V0SXNPcGVuKGZhbHNlKTtcblxuICByZXR1cm4gKFxuICAgIDxkaXYgY3NzPXt7aGVpZ2h0OiAnNjRweCd9fSB7Li4ucHJvcHN9IGRhdGEtdWllLW5hbWU9XCJlbGVtZW50LWhlYWRlci1tZW51XCI+XG4gICAgICA8TWVudUNvbnRlbnQgb3Blbj17aXNPcGVufT5cbiAgICAgICAgPGRpdiBjc3M9e3thbGlnblNlbGY6ICdjZW50ZXInLCBkaXNwbGF5OiAnZmxleCcsIHpJbmRleDogMn19IG9uQ2xpY2s9e2Nsb3NlTWVudX0+XG4gICAgICAgICAge2xvZ29FbGVtZW50fVxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjc3M9e3thbGlnblNlbGY6ICdjZW50ZXInLCBkaXNwbGF5OiAnZmxleCd9fT57Y2VudGVyRWxlbWVudH08L2Rpdj5cbiAgICAgICAgPE1lbnVPcGVuQnV0dG9uXG4gICAgICAgICAgb25DbGljaz17dG9nZ2xlTWVudX1cbiAgICAgICAgICBvcGVuPXtpc09wZW59XG4gICAgICAgICAgc3R5bGU9e3tqdXN0aWZ5U2VsZjogJ2VuZCcsIHBvc2l0aW9uOiBpc09wZW4gPyAnZml4ZWQnIDogdW5kZWZpbmVkLCByaWdodDogJzE2cHgnLCB0b3A6ICcyMXB4J319XG4gICAgICAgICAgZGF0YS11aWUtbmFtZT1cImRvLXRvZ2dsZS1oZWFkZXItbWVudVwiXG4gICAgICAgIC8+XG4gICAgICAgIDxNZW51SXRlbXMgb25DbGljaz17Y2xvc2VNZW51fSBvcGVuPXtpc09wZW59PlxuICAgICAgICAgIDxNZW51U2Nyb2xsYWJsZUl0ZW1zPntjaGlsZHJlbn08L01lbnVTY3JvbGxhYmxlSXRlbXM+XG4gICAgICAgIDwvTWVudUl0ZW1zPlxuICAgICAgPC9NZW51Q29udGVudD5cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var _ref3 = process.env.NODE_ENV === "production" ? {
+  name: "104j9u2",
+  styles: "align-self:center;display:flex;z-index:2"
+} : {
+  name: "lr9j0q-HeaderMenu",
+  styles: "align-self:center;display:flex;z-index:2;label:HeaderMenu;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkhlYWRlck1lbnUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlEYSIsImZpbGUiOiJIZWFkZXJNZW51LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBXaXJlXG4gKiBDb3B5cmlnaHQgKEMpIDIwMTggV2lyZSBTd2lzcyBHbWJIXG4gKlxuICogVGhpcyBwcm9ncmFtIGlzIGZyZWUgc29mdHdhcmU6IHlvdSBjYW4gcmVkaXN0cmlidXRlIGl0IGFuZC9vciBtb2RpZnlcbiAqIGl0IHVuZGVyIHRoZSB0ZXJtcyBvZiB0aGUgR05VIEdlbmVyYWwgUHVibGljIExpY2Vuc2UgYXMgcHVibGlzaGVkIGJ5XG4gKiB0aGUgRnJlZSBTb2Z0d2FyZSBGb3VuZGF0aW9uLCBlaXRoZXIgdmVyc2lvbiAzIG9mIHRoZSBMaWNlbnNlLCBvclxuICogKGF0IHlvdXIgb3B0aW9uKSBhbnkgbGF0ZXIgdmVyc2lvbi5cbiAqXG4gKiBUaGlzIHByb2dyYW0gaXMgZGlzdHJpYnV0ZWQgaW4gdGhlIGhvcGUgdGhhdCBpdCB3aWxsIGJlIHVzZWZ1bCxcbiAqIGJ1dCBXSVRIT1VUIEFOWSBXQVJSQU5UWTsgd2l0aG91dCBldmVuIHRoZSBpbXBsaWVkIHdhcnJhbnR5IG9mXG4gKiBNRVJDSEFOVEFCSUxJVFkgb3IgRklUTkVTUyBGT1IgQSBQQVJUSUNVTEFSIFBVUlBPU0UuIFNlZSB0aGVcbiAqIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlIGZvciBtb3JlIGRldGFpbHMuXG4gKlxuICogWW91IHNob3VsZCBoYXZlIHJlY2VpdmVkIGEgY29weSBvZiB0aGUgR05VIEdlbmVyYWwgUHVibGljIExpY2Vuc2VcbiAqIGFsb25nIHdpdGggdGhpcyBwcm9ncmFtLiBJZiBub3QsIHNlZSBodHRwOi8vd3d3LmdudS5vcmcvbGljZW5zZXMvLlxuICpcbiAqL1xuXG4vKiogQGpzeCBqc3ggKi9cbmltcG9ydCB7anN4fSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHt1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQge01lbnVDb250ZW50fSBmcm9tICcuL01lbnVDb250ZW50JztcbmltcG9ydCB7TWVudUl0ZW1zfSBmcm9tICcuL01lbnVJdGVtcyc7XG5pbXBvcnQge01lbnVPcGVuQnV0dG9ufSBmcm9tICcuL01lbnVPcGVuQnV0dG9uJztcbmltcG9ydCB7TWVudVNjcm9sbGFibGVJdGVtc30gZnJvbSAnLi9NZW51U2Nyb2xsYWJsZUl0ZW1zJztcblxuZXhwb3J0IGludGVyZmFjZSBIZWFkZXJNZW51UHJvcHM8VCA9IEhUTUxEaXZFbGVtZW50PiBleHRlbmRzIFJlYWN0LkhUTUxQcm9wczxUPiB7XG4gIGNlbnRlckVsZW1lbnQ/OiBSZWFjdC5SZWFjdE5vZGU7XG4gIGxvZ29FbGVtZW50PzogUmVhY3QuUmVhY3ROb2RlO1xufVxuXG5leHBvcnQgY29uc3QgSGVhZGVyTWVudSA9ICh7Y2hpbGRyZW4sIGxvZ29FbGVtZW50ID0gbnVsbCwgY2VudGVyRWxlbWVudCA9IG51bGwsIC4uLnByb3BzfTogSGVhZGVyTWVudVByb3BzKSA9PiB7XG4gIGNvbnN0IFtpc09wZW4sIHNldElzT3Blbl0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgY29uc3QgdG9nZ2xlTWVudSA9ICgpID0+IHtcbiAgICBpZiAodHlwZW9mIHdpbmRvdyAhPT0gJ3VuZGVmaW5lZCcpIHtcbiAgICAgIHdpbmRvdy5zY3JvbGxUbygwLCAwKTtcbiAgICAgIHNldElzT3BlbihjdXJyZW50ID0+ICFjdXJyZW50KTtcbiAgICB9XG4gIH07XG5cbiAgY29uc3QgY2xvc2VNZW51ID0gKCkgPT4gc2V0SXNPcGVuKGZhbHNlKTtcblxuICByZXR1cm4gKFxuICAgIDxkaXYgY3NzPXt7aGVpZ2h0OiAnNjRweCd9fSB7Li4ucHJvcHN9IGRhdGEtdWllLW5hbWU9XCJlbGVtZW50LWhlYWRlci1tZW51XCI+XG4gICAgICA8TWVudUNvbnRlbnQgb3Blbj17aXNPcGVufT5cbiAgICAgICAgPGRpdiBjc3M9e3thbGlnblNlbGY6ICdjZW50ZXInLCBkaXNwbGF5OiAnZmxleCcsIHpJbmRleDogMn19IG9uQ2xpY2s9e2Nsb3NlTWVudX0+XG4gICAgICAgICAge2xvZ29FbGVtZW50fVxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjc3M9e3thbGlnblNlbGY6ICdjZW50ZXInLCBkaXNwbGF5OiAnZmxleCd9fT57Y2VudGVyRWxlbWVudH08L2Rpdj5cbiAgICAgICAgPE1lbnVPcGVuQnV0dG9uXG4gICAgICAgICAgb25DbGljaz17dG9nZ2xlTWVudX1cbiAgICAgICAgICBvcGVuPXtpc09wZW59XG4gICAgICAgICAgc3R5bGU9e3tqdXN0aWZ5U2VsZjogJ2VuZCcsIHBvc2l0aW9uOiBpc09wZW4gPyAnZml4ZWQnIDogdW5kZWZpbmVkLCByaWdodDogJzE2cHgnLCB0b3A6ICcyMXB4J319XG4gICAgICAgICAgZGF0YS11aWUtbmFtZT1cImRvLXRvZ2dsZS1oZWFkZXItbWVudVwiXG4gICAgICAgIC8+XG4gICAgICAgIDxNZW51SXRlbXMgb25DbGljaz17Y2xvc2VNZW51fSBvcGVuPXtpc09wZW59PlxuICAgICAgICAgIDxNZW51U2Nyb2xsYWJsZUl0ZW1zPntjaGlsZHJlbn08L01lbnVTY3JvbGxhYmxlSXRlbXM+XG4gICAgICAgIDwvTWVudUl0ZW1zPlxuICAgICAgPC9NZW51Q29udGVudD5cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var _ref4 = process.env.NODE_ENV === "production" ? {
+  name: "jcxkag",
+  styles: "align-self:center;display:flex"
+} : {
+  name: "1nvzpve-HeaderMenu",
+  styles: "align-self:center;display:flex;label:HeaderMenu;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkhlYWRlck1lbnUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9EYSIsImZpbGUiOiJIZWFkZXJNZW51LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBXaXJlXG4gKiBDb3B5cmlnaHQgKEMpIDIwMTggV2lyZSBTd2lzcyBHbWJIXG4gKlxuICogVGhpcyBwcm9ncmFtIGlzIGZyZWUgc29mdHdhcmU6IHlvdSBjYW4gcmVkaXN0cmlidXRlIGl0IGFuZC9vciBtb2RpZnlcbiAqIGl0IHVuZGVyIHRoZSB0ZXJtcyBvZiB0aGUgR05VIEdlbmVyYWwgUHVibGljIExpY2Vuc2UgYXMgcHVibGlzaGVkIGJ5XG4gKiB0aGUgRnJlZSBTb2Z0d2FyZSBGb3VuZGF0aW9uLCBlaXRoZXIgdmVyc2lvbiAzIG9mIHRoZSBMaWNlbnNlLCBvclxuICogKGF0IHlvdXIgb3B0aW9uKSBhbnkgbGF0ZXIgdmVyc2lvbi5cbiAqXG4gKiBUaGlzIHByb2dyYW0gaXMgZGlzdHJpYnV0ZWQgaW4gdGhlIGhvcGUgdGhhdCBpdCB3aWxsIGJlIHVzZWZ1bCxcbiAqIGJ1dCBXSVRIT1VUIEFOWSBXQVJSQU5UWTsgd2l0aG91dCBldmVuIHRoZSBpbXBsaWVkIHdhcnJhbnR5IG9mXG4gKiBNRVJDSEFOVEFCSUxJVFkgb3IgRklUTkVTUyBGT1IgQSBQQVJUSUNVTEFSIFBVUlBPU0UuIFNlZSB0aGVcbiAqIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlIGZvciBtb3JlIGRldGFpbHMuXG4gKlxuICogWW91IHNob3VsZCBoYXZlIHJlY2VpdmVkIGEgY29weSBvZiB0aGUgR05VIEdlbmVyYWwgUHVibGljIExpY2Vuc2VcbiAqIGFsb25nIHdpdGggdGhpcyBwcm9ncmFtLiBJZiBub3QsIHNlZSBodHRwOi8vd3d3LmdudS5vcmcvbGljZW5zZXMvLlxuICpcbiAqL1xuXG4vKiogQGpzeCBqc3ggKi9cbmltcG9ydCB7anN4fSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHt1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQge01lbnVDb250ZW50fSBmcm9tICcuL01lbnVDb250ZW50JztcbmltcG9ydCB7TWVudUl0ZW1zfSBmcm9tICcuL01lbnVJdGVtcyc7XG5pbXBvcnQge01lbnVPcGVuQnV0dG9ufSBmcm9tICcuL01lbnVPcGVuQnV0dG9uJztcbmltcG9ydCB7TWVudVNjcm9sbGFibGVJdGVtc30gZnJvbSAnLi9NZW51U2Nyb2xsYWJsZUl0ZW1zJztcblxuZXhwb3J0IGludGVyZmFjZSBIZWFkZXJNZW51UHJvcHM8VCA9IEhUTUxEaXZFbGVtZW50PiBleHRlbmRzIFJlYWN0LkhUTUxQcm9wczxUPiB7XG4gIGNlbnRlckVsZW1lbnQ/OiBSZWFjdC5SZWFjdE5vZGU7XG4gIGxvZ29FbGVtZW50PzogUmVhY3QuUmVhY3ROb2RlO1xufVxuXG5leHBvcnQgY29uc3QgSGVhZGVyTWVudSA9ICh7Y2hpbGRyZW4sIGxvZ29FbGVtZW50ID0gbnVsbCwgY2VudGVyRWxlbWVudCA9IG51bGwsIC4uLnByb3BzfTogSGVhZGVyTWVudVByb3BzKSA9PiB7XG4gIGNvbnN0IFtpc09wZW4sIHNldElzT3Blbl0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgY29uc3QgdG9nZ2xlTWVudSA9ICgpID0+IHtcbiAgICBpZiAodHlwZW9mIHdpbmRvdyAhPT0gJ3VuZGVmaW5lZCcpIHtcbiAgICAgIHdpbmRvdy5zY3JvbGxUbygwLCAwKTtcbiAgICAgIHNldElzT3BlbihjdXJyZW50ID0+ICFjdXJyZW50KTtcbiAgICB9XG4gIH07XG5cbiAgY29uc3QgY2xvc2VNZW51ID0gKCkgPT4gc2V0SXNPcGVuKGZhbHNlKTtcblxuICByZXR1cm4gKFxuICAgIDxkaXYgY3NzPXt7aGVpZ2h0OiAnNjRweCd9fSB7Li4ucHJvcHN9IGRhdGEtdWllLW5hbWU9XCJlbGVtZW50LWhlYWRlci1tZW51XCI+XG4gICAgICA8TWVudUNvbnRlbnQgb3Blbj17aXNPcGVufT5cbiAgICAgICAgPGRpdiBjc3M9e3thbGlnblNlbGY6ICdjZW50ZXInLCBkaXNwbGF5OiAnZmxleCcsIHpJbmRleDogMn19IG9uQ2xpY2s9e2Nsb3NlTWVudX0+XG4gICAgICAgICAge2xvZ29FbGVtZW50fVxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjc3M9e3thbGlnblNlbGY6ICdjZW50ZXInLCBkaXNwbGF5OiAnZmxleCd9fT57Y2VudGVyRWxlbWVudH08L2Rpdj5cbiAgICAgICAgPE1lbnVPcGVuQnV0dG9uXG4gICAgICAgICAgb25DbGljaz17dG9nZ2xlTWVudX1cbiAgICAgICAgICBvcGVuPXtpc09wZW59XG4gICAgICAgICAgc3R5bGU9e3tqdXN0aWZ5U2VsZjogJ2VuZCcsIHBvc2l0aW9uOiBpc09wZW4gPyAnZml4ZWQnIDogdW5kZWZpbmVkLCByaWdodDogJzE2cHgnLCB0b3A6ICcyMXB4J319XG4gICAgICAgICAgZGF0YS11aWUtbmFtZT1cImRvLXRvZ2dsZS1oZWFkZXItbWVudVwiXG4gICAgICAgIC8+XG4gICAgICAgIDxNZW51SXRlbXMgb25DbGljaz17Y2xvc2VNZW51fSBvcGVuPXtpc09wZW59PlxuICAgICAgICAgIDxNZW51U2Nyb2xsYWJsZUl0ZW1zPntjaGlsZHJlbn08L01lbnVTY3JvbGxhYmxlSXRlbXM+XG4gICAgICAgIDwvTWVudUl0ZW1zPlxuICAgICAgPC9NZW51Q29udGVudD5cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var HeaderMenu = function HeaderMenu(_ref) {
+  var children = _ref.children,
+      _ref$logoElement = _ref.logoElement,
+      logoElement = _ref$logoElement === void 0 ? null : _ref$logoElement,
+      _ref$centerElement = _ref.centerElement,
+      centerElement = _ref$centerElement === void 0 ? null : _ref$centerElement,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+
+  var _useState = (0, _react2.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var toggleMenu = function toggleMenu() {
+    if (typeof window !== 'undefined') {
+      window.scrollTo(0, 0);
+      setIsOpen(function (current) {
+        return !current;
+      });
+    }
+  };
+
+  var closeMenu = function closeMenu() {
+    return setIsOpen(false);
+  };
+
+  return (0, _react.jsx)("div", (0, _extends2["default"])({
+    css: _ref2
+  }, props, {
+    "data-uie-name": "element-header-menu"
+  }), (0, _react.jsx)(_MenuContent.MenuContent, {
+    open: isOpen
+  }, (0, _react.jsx)("div", {
+    css: _ref3,
+    onClick: closeMenu
+  }, logoElement), (0, _react.jsx)("div", {
+    css: _ref4
+  }, centerElement), (0, _react.jsx)(_MenuOpenButton.MenuOpenButton, {
+    onClick: toggleMenu,
+    open: isOpen,
+    style: {
+      justifySelf: 'end',
+      position: isOpen ? 'fixed' : undefined,
+      right: '16px',
+      top: '21px'
+    },
+    "data-uie-name": "do-toggle-header-menu"
+  }), (0, _react.jsx)(_MenuItems.MenuItems, {
+    onClick: closeMenu,
+    open: isOpen
+  }, (0, _react.jsx)(_MenuScrollableItems.MenuScrollableItems, null, children))));
 };
+
 exports.HeaderMenu = HeaderMenu;
 //# sourceMappingURL=HeaderMenu.js.map

package/src/Layout/headerMenu/HeaderMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderMenu.js","sourceRoot":"","sources":["HeaderMenu.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;;;;;;;;;;;;AAEH,eAAe;AACf,0CAAmC;AAEnC,iCAA+B;AAE/B,+CAA0C;AAC1C,2CAAsC;AACtC,qDAAgD;AAChD,+DAA0D;AAOnD,MAAM,UAAU,GAAG,CAAC,EAA+E,EAAE,EAAE;QAAnF,EAAC,QAAQ,EAAE,WAAW,GAAG,IAAI,EAAE,aAAa,GAAG,IAAI,OAA4B,EAAvB,KAAK,cAA7D,4CAA8D,CAAD;IACtF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE5C,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;YACjC,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YACtB,SAAS,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;SAChC;IACH,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAEzC,OAAO,CACL,wCAAK,GAAG,EAAE,EAAC,MAAM,EAAE,MAAM,EAAC,IAAM,KAAK,qBAAgB,qBAAqB;QACxE,iBAAC,yBAAW,IAAC,IAAI,EAAE,MAAM;YACvB,0BAAK,GAAG,EAAE,EAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,EAAC,EAAE,OAAO,EAAE,SAAS,IAC5E,WAAW,CACR;YACN,0BAAK,GAAG,EAAE,EAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAC,IAAG,aAAa,CAAO;YACvE,iBAAC,+BAAc,IACb,OAAO,EAAE,UAAU,EACnB,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,EAAC,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAC,mBACjF,uBAAuB,GACrC;YACF,iBAAC,qBAAS,IAAC,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM;gBACzC,iBAAC,yCAAmB,QAAE,QAAQ,CAAuB,CAC3C,CACA,CACV,CACP,CAAC;AACJ,CAAC,CAAC;AA/BW,QAAA,UAAU,cA+BrB"}
+{"version":3,"sources":["HeaderMenu.tsx"],"names":["HeaderMenu","children","logoElement","centerElement","props","isOpen","setIsOpen","toggleMenu","window","scrollTo","current","closeMenu","justifySelf","position","undefined","right","top"],"mappings":";;;;;;;;;;;;;;;;;AAoBA;;AACA;;AAGA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOO,IAAMA,UAAU,GAAG,SAAbA,UAAa,OAAqF;AAAA,MAAnFC,QAAmF,QAAnFA,QAAmF;AAAA,8BAAzEC,WAAyE;AAAA,MAAzEA,WAAyE,iCAA3D,IAA2D;AAAA,gCAArDC,aAAqD;AAAA,MAArDA,aAAqD,mCAArC,IAAqC;AAAA,MAA5BC,KAA4B;;AAC7G,kBAA4B,sBAAS,KAAT,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AAEA,MAAMC,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvB,QAAI,OAAOC,MAAP,KAAkB,WAAtB,EAAmC;AACjCA,MAAAA,MAAM,CAACC,QAAP,CAAgB,CAAhB,EAAmB,CAAnB;AACAH,MAAAA,SAAS,CAAC,UAAAI,OAAO;AAAA,eAAI,CAACA,OAAL;AAAA,OAAR,CAAT;AACD;AACF,GALD;;AAOA,MAAMC,SAAS,GAAG,SAAZA,SAAY;AAAA,WAAML,SAAS,CAAC,KAAD,CAAf;AAAA,GAAlB;;AAEA,SACE;AAAK,IAAA,GAAG;AAAR,KAAgCF,KAAhC;AAAuC,qBAAc;AAArD,MACE,gBAAC,wBAAD;AAAa,IAAA,IAAI,EAAEC;AAAnB,KACE;AAAK,IAAA,GAAG,OAAR;AAA6D,IAAA,OAAO,EAAEM;AAAtE,KACGT,WADH,CADF,EAIE;AAAK,IAAA,GAAG;AAAR,KAAmDC,aAAnD,CAJF,EAKE,gBAAC,8BAAD;AACE,IAAA,OAAO,EAAEI,UADX;AAEE,IAAA,IAAI,EAAEF,MAFR;AAGE,IAAA,KAAK,EAAE;AAACO,MAAAA,WAAW,EAAE,KAAd;AAAqBC,MAAAA,QAAQ,EAAER,MAAM,GAAG,OAAH,GAAaS,SAAlD;AAA6DC,MAAAA,KAAK,EAAE,MAApE;AAA4EC,MAAAA,GAAG,EAAE;AAAjF,KAHT;AAIE,qBAAc;AAJhB,IALF,EAWE,gBAAC,oBAAD;AAAW,IAAA,OAAO,EAAEL,SAApB;AAA+B,IAAA,IAAI,EAAEN;AAArC,KACE,gBAAC,wCAAD,QAAsBJ,QAAtB,CADF,CAXF,CADF,CADF;AAmBD,CA/BM","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {jsx} from '@emotion/react';\nimport React from 'react';\nimport {useState} from 'react';\n\nimport {MenuContent} from './MenuContent';\nimport {MenuItems} from './MenuItems';\nimport {MenuOpenButton} from './MenuOpenButton';\nimport {MenuScrollableItems} from './MenuScrollableItems';\n\nexport interface HeaderMenuProps<T = HTMLDivElement> extends React.HTMLProps<T> {\n  centerElement?: React.ReactNode;\n  logoElement?: React.ReactNode;\n}\n\nexport const HeaderMenu = ({children, logoElement = null, centerElement = null, ...props}: HeaderMenuProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const toggleMenu = () => {\n    if (typeof window !== 'undefined') {\n      window.scrollTo(0, 0);\n      setIsOpen(current => !current);\n    }\n  };\n\n  const closeMenu = () => setIsOpen(false);\n\n  return (\n    <div css={{height: '64px'}} {...props} data-uie-name=\"element-header-menu\">\n      <MenuContent open={isOpen}>\n        <div css={{alignSelf: 'center', display: 'flex', zIndex: 2}} onClick={closeMenu}>\n          {logoElement}\n        </div>\n        <div css={{alignSelf: 'center', display: 'flex'}}>{centerElement}</div>\n        <MenuOpenButton\n          onClick={toggleMenu}\n          open={isOpen}\n          style={{justifySelf: 'end', position: isOpen ? 'fixed' : undefined, right: '16px', top: '21px'}}\n          data-uie-name=\"do-toggle-header-menu\"\n        />\n        <MenuItems onClick={closeMenu} open={isOpen}>\n          <MenuScrollableItems>{children}</MenuScrollableItems>\n        </MenuItems>\n      </MenuContent>\n    </div>\n  );\n};\n"],"file":"HeaderMenu.js"}

package/src/Layout/headerMenu/HeaderSubMenu.d.ts

@@ -3,7 +3,7 @@ import { jsx } from '@emotion/react';
 import React from 'react';
 export declare type DesktopStyledHeaderSubMenuProps<T = HTMLDivElement> = React.HTMLProps<T>;
 export declare const DESKTOP_HEADER_SUB_MENU_CLASSNAME = "desktopStyledHeaderSubMenu";
-export declare const DesktopStyledHeaderSubMenu: (props: React.HTMLProps<T>) => jsx.JSX.Element;
+export declare const DesktopStyledHeaderSubMenu: (props: DesktopStyledHeaderSubMenuProps<HTMLDivElement>) => jsx.JSX.Element;
 export interface MobileStyledHeaderSubMenuProps<T = HTMLSpanElement> extends React.HTMLProps<T> {
     open?: boolean;
 }

package/src/Layout/headerMenu/HeaderSubMenu.js

@@ -1,45 +1,38 @@
 "use strict";
-/*
- * Wire
- * Copyright (C) 2018 Wire Swiss GmbH
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program. If not, see http://www.gnu.org/licenses/.
- *
- */
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.HeaderSubMenu = exports.MobileStyledHeaderSubMenu = exports.DesktopStyledHeaderSubMenu = exports.DESKTOP_HEADER_SUB_MENU_CLASSNAME = void 0;
-/** @jsx jsx */
-const react_1 = require("@emotion/react");
-const Identity_1 = require("../../Identity");
-const motions_1 = require("../../Identity/motions");
-const mediaQueries_1 = require("../../mediaQueries");
-const MenuSubLink_1 = require("./MenuSubLink");
-const MenuLink_1 = require("./MenuLink");
-const desktopStyledHeaderSubMenuStyle = (theme, props) => ({
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = require("@emotion/react");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _Identity = require("../../Identity");
+
+var _motions = require("../../Identity/motions");
+
+var _mediaQueries = require("../../mediaQueries");
+
+var _MenuSubLink = require("./MenuSubLink");
+
+var _MenuLink = require("./MenuLink");
+
+var _excluded = ["caption", "isOpen", "children"];
+
+var desktopStyledHeaderSubMenuStyle = function desktopStyledHeaderSubMenuStyle(theme, props) {
+  return (0, _defineProperty2["default"])({
     alignItems: 'left',
-    backgroundColor: Identity_1.COLOR.tint(theme.general.backgroundColor, 0.16),
+    backgroundColor: _Identity.COLOR.tint(theme.general.backgroundColor, 0.16),
     borderRadius: '8px',
     boxShadow: '0 8px 24px 0 rgba(0, 0, 0, 0.16)',
     display: 'flex',
@@ -48,50 +41,114 @@ const desktopStyledHeaderSubMenuStyle = (theme, props) => ({
     minWidth: '200px',
     padding: '8px 8px',
     span: {
-        '&:hover': {
-            backgroundColor: theme.general.backgroundColor,
-            borderRadius: '4px',
-        },
-        alignItems: 'center',
-        display: 'flex',
-        height: '30px',
-        margin: 0,
-        paddingLeft: '10px !important',
-        paddingRight: '10px !important',
-        whiteSpace: 'nowrap',
-    },
-    [`.${MenuLink_1.MENU_LINK_CLASSNAME}:nth-of-type(n+2)`]: {
-        marginTop: '8px',
-    },
-});
-exports.DESKTOP_HEADER_SUB_MENU_CLASSNAME = 'desktopStyledHeaderSubMenu';
-const DesktopStyledHeaderSubMenu = (props) => ((0, react_1.jsx)("div", Object.assign({ className: exports.DESKTOP_HEADER_SUB_MENU_CLASSNAME, css: (theme) => desktopStyledHeaderSubMenuStyle(theme, props) }, props)));
+      '&:hover': {
+        backgroundColor: theme.general.backgroundColor,
+        borderRadius: '4px'
+      },
+      alignItems: 'center',
+      display: 'flex',
+      height: '30px',
+      margin: 0,
+      paddingLeft: '10px !important',
+      paddingRight: '10px !important',
+      whiteSpace: 'nowrap'
+    }
+  }, ".".concat(_MenuLink.MENU_LINK_CLASSNAME, ":nth-of-type(n+2)"), {
+    marginTop: '8px'
+  });
+};
+
+var DESKTOP_HEADER_SUB_MENU_CLASSNAME = 'desktopStyledHeaderSubMenu';
+exports.DESKTOP_HEADER_SUB_MENU_CLASSNAME = DESKTOP_HEADER_SUB_MENU_CLASSNAME;
+
+var DesktopStyledHeaderSubMenu = function DesktopStyledHeaderSubMenu(props) {
+  return (0, _react.jsx)("div", (0, _extends2["default"])({
+    className: DESKTOP_HEADER_SUB_MENU_CLASSNAME,
+    css: function css(theme) {
+      return desktopStyledHeaderSubMenuStyle(theme, props);
+    }
+  }, props));
+};
+
 exports.DesktopStyledHeaderSubMenu = DesktopStyledHeaderSubMenu;
-const mobileStyledHeaderSubMenuStyle = props => ({
+
+var mobileStyledHeaderSubMenuStyle = function mobileStyledHeaderSubMenuStyle(props) {
+  return {
     '*': {
-        fontWeight: 200,
+      fontWeight: 200
     },
     alignItems: 'center',
-    borderTop: `1px solid ${Identity_1.COLOR.GRAY_LIGHTEN_72}`,
+    borderTop: "1px solid ".concat(_Identity.COLOR.GRAY_LIGHTEN_72),
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'center',
     marginTop: '16px',
-    paddingTop: '8px',
-});
-const MobileStyledHeaderSubMenu = (props) => ((0, react_1.jsx)("span", Object.assign({ css: mobileStyledHeaderSubMenuStyle(props) }, props)));
+    paddingTop: '8px'
+  };
+};
+
+var MobileStyledHeaderSubMenu = function MobileStyledHeaderSubMenu(props) {
+  return (0, _react.jsx)("span", (0, _extends2["default"])({
+    css: mobileStyledHeaderSubMenuStyle(props)
+  }, props));
+};
+
 exports.MobileStyledHeaderSubMenu = MobileStyledHeaderSubMenu;
-const HeaderSubMenu = (_a) => {
-    var { caption, isOpen, children } = _a, props = __rest(_a, ["caption", "isOpen", "children"]);
-    const isDesktop = typeof window !== 'undefined' && window.matchMedia(`(${mediaQueries_1.QUERY.desktop})`).matches;
-    return ((0, react_1.jsx)(MenuSubLink_1.MenuSubLink, Object.assign({}, props, { style: { cursor: 'pointer', display: 'inline-block', position: 'relative', textAlign: 'center' } }),
-        (0, react_1.jsx)("span", null, caption),
-        (0, react_1.jsx)(Identity_1.Opacity, { in: isOpen && isDesktop, timeout: motions_1.DURATION.DEFAULT, style: { display: 'inline-block', left: -18, marginTop: 10, paddingTop: 20, position: 'absolute', zIndex: 1 }, mountOnEnter: false, unmountOnExit: false },
-            (0, react_1.jsx)(Identity_1.YAxisMovement, { in: isOpen && isDesktop, startValue: '-30px', endValue: '0px', style: { display: 'inline-block' }, timeout: motions_1.DURATION.DEFAULT, mountOnEnter: false, unmountOnExit: true },
-                (0, react_1.jsx)(exports.DesktopStyledHeaderSubMenu, null, children))),
-        (0, react_1.jsx)(Identity_1.Opacity, { in: isOpen && !isDesktop, timeout: motions_1.DURATION.DEFAULT, mountOnEnter: false, unmountOnExit: false, style: { display: 'block', position: 'relative' } },
-            (0, react_1.jsx)(Identity_1.Slide, { in: isOpen && !isDesktop, startValue: '-56%', endValue: '0', timeout: motions_1.DURATION.DEFAULT, mountOnEnter: false, unmountOnExit: true },
-                (0, react_1.jsx)(exports.MobileStyledHeaderSubMenu, null, children)))));
+
+var HeaderSubMenu = function HeaderSubMenu(_ref2) {
+  var caption = _ref2.caption,
+      isOpen = _ref2.isOpen,
+      children = _ref2.children,
+      props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+  var isDesktop = typeof window !== 'undefined' && window.matchMedia("(".concat(_mediaQueries.QUERY.desktop, ")")).matches;
+  return (0, _react.jsx)(_MenuSubLink.MenuSubLink, (0, _extends2["default"])({}, props, {
+    style: {
+      cursor: 'pointer',
+      display: 'inline-block',
+      position: 'relative',
+      textAlign: 'center'
+    }
+  }), (0, _react.jsx)("span", null, caption), (0, _react.jsx)(_Identity.Opacity, {
+    "in": isOpen && isDesktop,
+    timeout: _motions.DURATION.DEFAULT,
+    style: {
+      display: 'inline-block',
+      left: -18,
+      marginTop: 10,
+      paddingTop: 20,
+      position: 'absolute',
+      zIndex: 1
+    },
+    mountOnEnter: false,
+    unmountOnExit: false
+  }, (0, _react.jsx)(_Identity.YAxisMovement, {
+    "in": isOpen && isDesktop,
+    startValue: '-30px',
+    endValue: '0px',
+    style: {
+      display: 'inline-block'
+    },
+    timeout: _motions.DURATION.DEFAULT,
+    mountOnEnter: false,
+    unmountOnExit: true
+  }, (0, _react.jsx)(DesktopStyledHeaderSubMenu, null, children))), (0, _react.jsx)(_Identity.Opacity, {
+    "in": isOpen && !isDesktop,
+    timeout: _motions.DURATION.DEFAULT,
+    mountOnEnter: false,
+    unmountOnExit: false,
+    style: {
+      display: 'block',
+      position: 'relative'
+    }
+  }, (0, _react.jsx)(_Identity.Slide, {
+    "in": isOpen && !isDesktop,
+    startValue: '-56%',
+    endValue: '0',
+    timeout: _motions.DURATION.DEFAULT,
+    mountOnEnter: false,
+    unmountOnExit: true
+  }, (0, _react.jsx)(MobileStyledHeaderSubMenu, null, children))));
 };
+
 exports.HeaderSubMenu = HeaderSubMenu;
 //# sourceMappingURL=HeaderSubMenu.js.map

package/src/Layout/headerMenu/HeaderSubMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderSubMenu.js","sourceRoot":"","sources":["HeaderSubMenu.tsx"],"names":[],"mappings":"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"}
+{"version":3,"sources":["HeaderSubMenu.tsx"],"names":["desktopStyledHeaderSubMenuStyle","theme","props","alignItems","backgroundColor","COLOR","tint","general","borderRadius","boxShadow","display","flexDirection","justifyContent","minWidth","padding","span","height","margin","paddingLeft","paddingRight","whiteSpace","MENU_LINK_CLASSNAME","marginTop","DESKTOP_HEADER_SUB_MENU_CLASSNAME","DesktopStyledHeaderSubMenu","mobileStyledHeaderSubMenuStyle","fontWeight","borderTop","GRAY_LIGHTEN_72","paddingTop","MobileStyledHeaderSubMenu","HeaderSubMenu","caption","isOpen","children","isDesktop","window","matchMedia","QUERY","desktop","matches","cursor","position","textAlign","DURATION","DEFAULT","left","zIndex"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\nimport React from 'react';\n\nimport {COLOR, Opacity, Slide, YAxisMovement} from '../../Identity';\nimport {DURATION} from '../../Identity/motions';\nimport {QUERY} from '../../mediaQueries';\nimport {Theme} from '../Theme';\nimport {MenuSubLink} from './MenuSubLink';\nimport {MENU_LINK_CLASSNAME} from './MenuLink';\n\nexport type DesktopStyledHeaderSubMenuProps<T = HTMLDivElement> = React.HTMLProps<T>;\n\nconst desktopStyledHeaderSubMenuStyle: (theme: Theme, props: DesktopStyledHeaderSubMenuProps) => CSSObject = (\n  theme,\n  props,\n) => ({\n  alignItems: 'left',\n  backgroundColor: COLOR.tint(theme.general.backgroundColor, 0.16),\n  borderRadius: '8px',\n  boxShadow: '0 8px 24px 0 rgba(0, 0, 0, 0.16)',\n  display: 'flex',\n  flexDirection: 'column',\n  justifyContent: 'center',\n  minWidth: '200px',\n  padding: '8px 8px',\n  span: {\n    '&:hover': {\n      backgroundColor: theme.general.backgroundColor,\n      borderRadius: '4px',\n    },\n    alignItems: 'center',\n    display: 'flex',\n    height: '30px',\n    margin: 0,\n    paddingLeft: '10px !important',\n    paddingRight: '10px !important',\n    whiteSpace: 'nowrap',\n  },\n  [`.${MENU_LINK_CLASSNAME}:nth-of-type(n+2)`]: {\n    marginTop: '8px',\n  },\n});\n\nexport const DESKTOP_HEADER_SUB_MENU_CLASSNAME = 'desktopStyledHeaderSubMenu';\n\nexport const DesktopStyledHeaderSubMenu = (props: DesktopStyledHeaderSubMenuProps) => (\n  <div\n    className={DESKTOP_HEADER_SUB_MENU_CLASSNAME}\n    css={(theme: Theme) => desktopStyledHeaderSubMenuStyle(theme, props)}\n    {...props}\n  />\n);\n\nexport interface MobileStyledHeaderSubMenuProps<T = HTMLSpanElement> extends React.HTMLProps<T> {\n  open?: boolean;\n}\n\nconst mobileStyledHeaderSubMenuStyle: (props: MobileStyledHeaderSubMenuProps) => CSSObject = props => ({\n  '*': {\n    fontWeight: 200,\n  },\n  alignItems: 'center',\n  borderTop: `1px solid ${COLOR.GRAY_LIGHTEN_72}`,\n  display: 'flex',\n  flexDirection: 'column',\n  justifyContent: 'center',\n  marginTop: '16px',\n  paddingTop: '8px',\n});\n\nexport const MobileStyledHeaderSubMenu = (props: MobileStyledHeaderSubMenuProps) => (\n  <span css={mobileStyledHeaderSubMenuStyle(props)} {...props} />\n);\n\nexport interface HeaderSubMenuProps<T = HTMLParagraphElement> extends React.PropsWithRef<React.HTMLProps<T>> {\n  caption: string;\n  isOpen: boolean;\n}\n\nexport const HeaderSubMenu: React.FC<HeaderSubMenuProps> = ({caption, isOpen, children, ...props}) => {\n  const isDesktop = typeof window !== 'undefined' && window.matchMedia(`(${QUERY.desktop})`).matches;\n  return (\n    <MenuSubLink\n      {...props}\n      style={{cursor: 'pointer', display: 'inline-block', position: 'relative', textAlign: 'center'}}\n    >\n      <span>{caption}</span>\n      <Opacity\n        in={isOpen && isDesktop}\n        timeout={DURATION.DEFAULT}\n        style={{display: 'inline-block', left: -18, marginTop: 10, paddingTop: 20, position: 'absolute', zIndex: 1}}\n        mountOnEnter={false}\n        unmountOnExit={false}\n      >\n        <YAxisMovement\n          in={isOpen && isDesktop}\n          startValue={'-30px'}\n          endValue={'0px'}\n          style={{display: 'inline-block'}}\n          timeout={DURATION.DEFAULT}\n          mountOnEnter={false}\n          unmountOnExit={true}\n        >\n          <DesktopStyledHeaderSubMenu>{children}</DesktopStyledHeaderSubMenu>\n        </YAxisMovement>\n      </Opacity>\n      <Opacity\n        in={isOpen && !isDesktop}\n        timeout={DURATION.DEFAULT}\n        mountOnEnter={false}\n        unmountOnExit={false}\n        style={{display: 'block', position: 'relative'}}\n      >\n        <Slide\n          in={isOpen && !isDesktop}\n          startValue={'-56%'}\n          endValue={'0'}\n          timeout={DURATION.DEFAULT}\n          mountOnEnter={false}\n          unmountOnExit={true}\n        >\n          <MobileStyledHeaderSubMenu>{children}</MobileStyledHeaderSubMenu>\n        </Slide>\n      </Opacity>\n    </MenuSubLink>\n  );\n};\n"],"file":"HeaderSubMenu.js"}

package/src/Layout/headerMenu/MenuContent.js

@@ -1,31 +1,52 @@
 "use strict";
-/*
- * Wire
- * Copyright (C) 2018 Wire Swiss GmbH
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program. If not, see http://www.gnu.org/licenses/.
- *
- */
-Object.defineProperty(exports, "__esModule", { value: true });
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.MenuContent = exports.menuContentStyle = void 0;
-/** @jsx jsx */
-const react_1 = require("@emotion/react");
-const util_1 = require("../../util");
-const Content_1 = require("../Content");
-const menuContentStyle = props => (Object.assign(Object.assign({}, (0, Content_1.contentStyle)(props)), { alignItems: 'center', display: 'grid', gridColumnGap: '8px', gridTemplateColumns: '1fr auto 1fr', height: '64px', justifyContent: 'space-between', left: props.open ? 0 : undefined, position: props.open ? 'fixed' : undefined, width: props.open ? '100%' : undefined, zIndex: props.open ? 10000 : undefined }));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = require("@emotion/react");
+
+var _util = require("../../util");
+
+var _Content = require("../Content");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var menuContentStyle = function menuContentStyle(props) {
+  return _objectSpread(_objectSpread({}, (0, _Content.contentStyle)(props)), {}, {
+    alignItems: 'center',
+    display: 'grid',
+    gridColumnGap: '8px',
+    gridTemplateColumns: '1fr auto 1fr',
+    height: '64px',
+    justifyContent: 'space-between',
+    left: props.open ? 0 : undefined,
+    position: props.open ? 'fixed' : undefined,
+    width: props.open ? '100%' : undefined,
+    zIndex: props.open ? 10000 : undefined
+  });
+};
+
 exports.menuContentStyle = menuContentStyle;
-const filterMenuContentProps = (props) => (0, util_1.filterProps)(props, ['open']);
-const MenuContent = (props) => ((0, react_1.jsx)("div", Object.assign({ css: (0, exports.menuContentStyle)(props) }, filterMenuContentProps(props))));
+
+var filterMenuContentProps = function filterMenuContentProps(props) {
+  return (0, _util.filterProps)(props, ['open']);
+};
+
+var MenuContent = function MenuContent(props) {
+  return (0, _react.jsx)("div", (0, _extends2["default"])({
+    css: menuContentStyle(props)
+  }, filterMenuContentProps(props)));
+};
+
 exports.MenuContent = MenuContent;
 //# sourceMappingURL=MenuContent.js.map

package/src/Layout/headerMenu/MenuContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuContent.js","sourceRoot":"","sources":["MenuContent.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;AAEH,eAAe;AACf,0CAA8C;AAG9C,qCAAuC;AACvC,wCAAwC;AAMjC,MAAM,gBAAgB,GAAiD,KAAK,CAAC,EAAE,CAAC,iCAClF,IAAA,sBAAY,EAAC,KAAK,CAAC,KACtB,UAAU,EAAE,QAAQ,EACpB,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,KAAK,EACpB,mBAAmB,EAAE,cAAc,EACnC,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,eAAe,EAC/B,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EAChC,QAAQ,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAC1C,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACtC,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,IACtC,CAAC;AAZU,QAAA,gBAAgB,oBAY1B;AAEH,MAAM,sBAAsB,GAAG,CAAC,KAAuB,EAAE,EAAE,CAAC,IAAA,kBAAW,EAAC,KAAK,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;AAElF,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE,CAAC,CACtD,wCAAK,GAAG,EAAE,IAAA,wBAAgB,EAAC,KAAK,CAAC,IAAM,sBAAsB,CAAC,KAAK,CAAC,EAAI,CACzE,CAAC;AAFW,QAAA,WAAW,eAEtB"}
+{"version":3,"sources":["MenuContent.tsx"],"names":["menuContentStyle","props","alignItems","display","gridColumnGap","gridTemplateColumns","height","justifyContent","left","open","undefined","position","width","zIndex","filterMenuContentProps","MenuContent"],"mappings":";;;;;;;;;;;;;AAoBA;;AAGA;;AACA;;;;;;AAMO,IAAMA,gBAA8D,GAAG,SAAjEA,gBAAiE,CAAAC,KAAK;AAAA,yCAC9E,2BAAaA,KAAb,CAD8E;AAEjFC,IAAAA,UAAU,EAAE,QAFqE;AAGjFC,IAAAA,OAAO,EAAE,MAHwE;AAIjFC,IAAAA,aAAa,EAAE,KAJkE;AAKjFC,IAAAA,mBAAmB,EAAE,cAL4D;AAMjFC,IAAAA,MAAM,EAAE,MANyE;AAOjFC,IAAAA,cAAc,EAAE,eAPiE;AAQjFC,IAAAA,IAAI,EAAEP,KAAK,CAACQ,IAAN,GAAa,CAAb,GAAiBC,SAR0D;AASjFC,IAAAA,QAAQ,EAAEV,KAAK,CAACQ,IAAN,GAAa,OAAb,GAAuBC,SATgD;AAUjFE,IAAAA,KAAK,EAAEX,KAAK,CAACQ,IAAN,GAAa,MAAb,GAAsBC,SAVoD;AAWjFG,IAAAA,MAAM,EAAEZ,KAAK,CAACQ,IAAN,GAAa,KAAb,GAAqBC;AAXoD;AAAA,CAA5E;;;;AAcP,IAAMI,sBAAsB,GAAG,SAAzBA,sBAAyB,CAACb,KAAD;AAAA,SAA6B,uBAAYA,KAAZ,EAAmB,CAAC,MAAD,CAAnB,CAA7B;AAAA,CAA/B;;AAEO,IAAMc,WAAW,GAAG,SAAdA,WAAc,CAACd,KAAD;AAAA,SACzB;AAAK,IAAA,GAAG,EAAED,gBAAgB,CAACC,KAAD;AAA1B,KAAuCa,sBAAsB,CAACb,KAAD,CAA7D,EADyB;AAAA,CAApB","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {TextProps} from '../../Text';\nimport {filterProps} from '../../util';\nimport {contentStyle} from '../Content';\n\nexport interface MenuContentProps<T = HTMLDivElement> extends TextProps<T> {\n  open?: boolean;\n}\n\nexport const menuContentStyle: <T>(props: MenuContentProps<T>) => CSSObject = props => ({\n  ...contentStyle(props),\n  alignItems: 'center',\n  display: 'grid',\n  gridColumnGap: '8px',\n  gridTemplateColumns: '1fr auto 1fr',\n  height: '64px',\n  justifyContent: 'space-between',\n  left: props.open ? 0 : undefined,\n  position: props.open ? 'fixed' : undefined,\n  width: props.open ? '100%' : undefined,\n  zIndex: props.open ? 10000 : undefined,\n});\n\nconst filterMenuContentProps = (props: MenuContentProps) => filterProps(props, ['open']);\n\nexport const MenuContent = (props: MenuContentProps) => (\n  <div css={menuContentStyle(props)} {...filterMenuContentProps(props)} />\n);\n"],"file":"MenuContent.js"}