solid-ui 2.4.14-bbf45639 → 2.4.14-bbf45639-e81d3e08

package/lib/header/index.js

@@ -1,71 +1,54 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getProfileImg = exports.createUserMenuItem = exports.createUserMenu = exports.createUserMenuLink = exports.createUserMenuButton = exports.createLoginSignUpButtons = exports.createHelpMenu = exports.createBanner = exports.rebuildHeader = exports.initHeader = void 0;
-var iconBase_1 = require("../iconBase");
-var authn_1 = require("../authn/authn");
-var widgets = __importStar(require("../widgets"));
-var empty_profile_1 = require("./empty-profile");
-var headerFooterHelpers_1 = require("../utils/headerFooterHelpers");
+exports.createBanner = createBanner;
+exports.createHelpMenu = createHelpMenu;
+exports.createLoginSignUpButtons = createLoginSignUpButtons;
+exports.createUserMenu = createUserMenu;
+exports.createUserMenuButton = createUserMenuButton;
+exports.createUserMenuItem = createUserMenuItem;
+exports.createUserMenuLink = createUserMenuLink;
+exports.getProfileImg = getProfileImg;
+exports.initHeader = initHeader;
+exports.rebuildHeader = rebuildHeader;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _iconBase = require("../iconBase");
+
+var _authn = require("../authn/authn");
+
+var widgets = _interopRequireWildcard(require("../widgets"));
+
+var _emptyProfile = require("./empty-profile");
+
+var _headerFooterHelpers = require("../utils/headerFooterHelpers");
+
+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; }
+
+/* global EventListenerOrEventListenerObject */
+
+/*
+    This file was copied from mashlib/src/global/header.ts file. It is modified to
+    work in solid-ui by adjusting where imported functions are found.
+ */
+
 /**
  * menu icons
 */
-var DEFAULT_HELP_MENU_ICON = iconBase_1.icons.iconBase + 'noun_help.svg';
+var DEFAULT_HELP_MENU_ICON = _iconBase.icons.iconBase + 'noun_help.svg';
 var DEFAUL_SOLID_ICON_URL = 'https://solidproject.org/assets/img/solid-emblem.svg';
+
 /**
  * Initialize header component, the header object returned depends on whether the user is authenticated.
  * @param store the data store
@@ -73,277 +56,370 @@ var DEFAUL_SOLID_ICON_URL = 'https://solidproject.org/assets/img/solid-emblem.sv
  * @param options allow the header to be customized with a personalized logo, help icon and a help menu list of links or buttons.
  * @returns a header for an authenticated user with menu items given or a login screen
  */
-function initHeader(store, userMenuList, options) {
-    return __awaiter(this, void 0, void 0, function () {
-        var header, pod;
-        return __generator(this, function (_a) {
-            header = document.getElementById('PageHeader');
-            if (!header) {
-                return [2 /*return*/];
-            }
-            pod = (0, headerFooterHelpers_1.getPod)();
-            rebuildHeader(header, store, pod, userMenuList, options)();
-            authn_1.authSession.onLogout(rebuildHeader(header, store, pod, userMenuList, options));
-            authn_1.authSession.onLogin(rebuildHeader(header, store, pod, userMenuList, options));
-            return [2 /*return*/];
-        });
-    });
+function initHeader(_x, _x2, _x3) {
+  return _initHeader.apply(this, arguments);
 }
-exports.initHeader = initHeader;
 /**
  * @ignore exporting this only for the unit test
  */
-function rebuildHeader(header, store, pod, userMenuList, options) {
-    var _this = this;
-    return function () { return __awaiter(_this, void 0, void 0, function () {
-        var user, _a, _b;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
-                case 0:
-                    user = (0, authn_1.currentUser)();
-                    header.innerHTML = '';
-                    _b = (_a = header).appendChild;
-                    return [4 /*yield*/, createBanner(store, pod, user, userMenuList, options)];
-                case 1:
-                    _b.apply(_a, [_c.sent()]);
-                    return [2 /*return*/];
+
+
+function _initHeader() {
+  _initHeader = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(store, userMenuList, options) {
+    var header, pod;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            header = document.getElementById('PageHeader');
+
+            if (header) {
+              _context2.next = 3;
+              break;
             }
-        });
-    }); };
+
+            return _context2.abrupt("return");
+
+          case 3:
+            pod = (0, _headerFooterHelpers.getPod)();
+            rebuildHeader(header, store, pod, userMenuList, options)();
+
+            _authn.authSession.onLogout(rebuildHeader(header, store, pod, userMenuList, options));
+
+            _authn.authSession.onLogin(rebuildHeader(header, store, pod, userMenuList, options));
+
+          case 7:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  }));
+  return _initHeader.apply(this, arguments);
+}
+
+function rebuildHeader(header, store, pod, userMenuList, options) {
+  return /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var user;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            user = (0, _authn.currentUser)();
+            header.innerHTML = '';
+            _context.t0 = header;
+            _context.next = 5;
+            return createBanner(store, pod, user, userMenuList, options);
+
+          case 5:
+            _context.t1 = _context.sent;
+
+            _context.t0.appendChild.call(_context.t0, _context.t1);
+
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
 }
-exports.rebuildHeader = rebuildHeader;
 /**
  * @ignore exporting this only for the unit test
  */
-function createBanner(store, pod, user, userMenuList, options) {
-    return __awaiter(this, void 0, void 0, function () {
-        var podLink, image, userMenu, _a, banner, leftSideOfHeader, helpMenu;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0:
-                    podLink = document.createElement('a');
-                    podLink.href = pod.uri;
-                    (0, headerFooterHelpers_1.addStyleClassToElement)(podLink, ['header-banner__link']);
-                    image = document.createElement('img');
-                    if (options) {
-                        image.src = options.logo ? options.logo : DEFAUL_SOLID_ICON_URL;
-                    }
-                    (0, headerFooterHelpers_1.addStyleClassToElement)(image, ['header-banner__icon']);
-                    podLink.appendChild(image);
-                    if (!user) return [3 /*break*/, 2];
-                    return [4 /*yield*/, createUserMenu(store, user, userMenuList)];
-                case 1:
-                    _a = _b.sent();
-                    return [3 /*break*/, 3];
-                case 2:
-                    _a = createLoginSignUpButtons();
-                    _b.label = 3;
-                case 3:
-                    userMenu = _a;
-                    banner = document.createElement('div');
-                    (0, headerFooterHelpers_1.addStyleClassToElement)(banner, ['header-banner']);
-                    banner.appendChild(podLink);
-                    leftSideOfHeader = document.createElement('div');
-                    (0, headerFooterHelpers_1.addStyleClassToElement)(leftSideOfHeader, ['header-banner__right-menu']);
-                    leftSideOfHeader.appendChild(userMenu);
-                    if (options && options.helpMenuList) {
-                        helpMenu = createHelpMenu(options, options.helpMenuList);
-                        leftSideOfHeader.appendChild(helpMenu);
-                    }
-                    banner.appendChild(leftSideOfHeader);
-                    return [2 /*return*/, banner];
-            }
-        });
-    });
+
+
+function createBanner(_x4, _x5, _x6, _x7, _x8) {
+  return _createBanner.apply(this, arguments);
 }
-exports.createBanner = createBanner;
 /**
  * @ignore exporting this only for the unit test
  */
-function createHelpMenu(options, helpMenuItems) {
-    if (!helpMenuItems)
-        return;
-    var helpMenuList = document.createElement('ul');
-    (0, headerFooterHelpers_1.addStyleClassToElement)(helpMenuList, ['header-user-menu__list']);
-    helpMenuItems.forEach(function (menuItem) {
-        var menuItemType = menuItem.url ? 'url' : 'onclick';
-        if (menuItemType === 'url') {
-            helpMenuList.appendChild(createUserMenuItem(createUserMenuLink(menuItem.label, menuItem.url, menuItem.target)));
-        }
-        else {
-            helpMenuList.appendChild(createUserMenuItem(createUserMenuButton(menuItem.label, menuItem.onclick)));
+
+
+function _createBanner() {
+  _createBanner = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(store, pod, user, userMenuList, options) {
+    var podLink, image, userMenu, banner, leftSideOfHeader, helpMenu;
+    return _regenerator["default"].wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            podLink = document.createElement('a');
+            podLink.href = pod.uri;
+            (0, _headerFooterHelpers.addStyleClassToElement)(podLink, ['header-banner__link']);
+            image = document.createElement('img');
+
+            if (options) {
+              image.src = options.logo ? options.logo : DEFAUL_SOLID_ICON_URL;
+            }
+
+            (0, _headerFooterHelpers.addStyleClassToElement)(image, ['header-banner__icon']);
+            podLink.appendChild(image);
+
+            if (!user) {
+              _context3.next = 13;
+              break;
+            }
+
+            _context3.next = 10;
+            return createUserMenu(store, user, userMenuList);
+
+          case 10:
+            _context3.t0 = _context3.sent;
+            _context3.next = 14;
+            break;
+
+          case 13:
+            _context3.t0 = createLoginSignUpButtons();
+
+          case 14:
+            userMenu = _context3.t0;
+            banner = document.createElement('div');
+            (0, _headerFooterHelpers.addStyleClassToElement)(banner, ['header-banner']);
+            banner.appendChild(podLink);
+            leftSideOfHeader = document.createElement('div');
+            (0, _headerFooterHelpers.addStyleClassToElement)(leftSideOfHeader, ['header-banner__right-menu']);
+            leftSideOfHeader.appendChild(userMenu);
+
+            if (options && options.helpMenuList) {
+              helpMenu = createHelpMenu(options, options.helpMenuList);
+              leftSideOfHeader.appendChild(helpMenu);
+            }
+
+            banner.appendChild(leftSideOfHeader);
+            return _context3.abrupt("return", banner);
+
+          case 24:
+          case "end":
+            return _context3.stop();
         }
-    });
-    var helpMenu = document.createElement('nav');
-    (0, headerFooterHelpers_1.addStyleClassToElement)(helpMenu, ['header-user-menu__navigation-menu']);
-    helpMenu.setAttribute('aria-hidden', 'true');
-    helpMenu.appendChild(helpMenuList);
-    var helpMenuContainer = document.createElement('div');
-    (0, headerFooterHelpers_1.addStyleClassToElement)(helpMenuContainer, ['header-banner__user-menu']);
-    (0, headerFooterHelpers_1.addStyleClassToElement)(helpMenuContainer, ['header-user-menu']);
-    helpMenuContainer.appendChild(helpMenu);
-    var helpMenuTrigger = document.createElement('button');
-    (0, headerFooterHelpers_1.addStyleClassToElement)(helpMenuTrigger, ['header-user-menu__trigger']);
-    helpMenuTrigger.type = 'button';
-    var helpMenuIcon = document.createElement('img');
-    helpMenuIcon.src = (options && options.helpIcon) ? options.helpIcon : iconBase_1.icons.iconBase + DEFAULT_HELP_MENU_ICON;
-    (0, headerFooterHelpers_1.addStyleClassToElement)(helpMenuIcon, ['header-banner__help-icon']);
-    helpMenuContainer.appendChild(helpMenuTrigger);
-    helpMenuTrigger.appendChild(helpMenuIcon);
-    var throttledMenuToggle = (0, headerFooterHelpers_1.throttle)(function (event) { return toggleMenu(event, helpMenuTrigger, helpMenu); }, 50);
-    helpMenuTrigger.addEventListener('click', throttledMenuToggle);
-    var timer = setTimeout(function () { return null; }, 0);
-    helpMenuContainer.addEventListener('mouseover', function (event) {
-        clearTimeout(timer);
-        throttledMenuToggle(event);
-    });
-    helpMenuContainer.addEventListener('mouseout', function (event) {
-        timer = setTimeout(function () { return throttledMenuToggle(event); }, 200);
-    });
-    return helpMenuContainer;
+      }
+    }, _callee3);
+  }));
+  return _createBanner.apply(this, arguments);
+}
+
+function createHelpMenu(options, helpMenuItems) {
+  if (!helpMenuItems) return;
+  var helpMenuList = document.createElement('ul');
+  (0, _headerFooterHelpers.addStyleClassToElement)(helpMenuList, ['header-user-menu__list']);
+  helpMenuItems.forEach(function (menuItem) {
+    var menuItemType = menuItem.url ? 'url' : 'onclick';
+
+    if (menuItemType === 'url') {
+      helpMenuList.appendChild(createUserMenuItem(createUserMenuLink(menuItem.label, menuItem.url, menuItem.target)));
+    } else {
+      helpMenuList.appendChild(createUserMenuItem(createUserMenuButton(menuItem.label, menuItem.onclick)));
+    }
+  });
+  var helpMenu = document.createElement('nav');
+  (0, _headerFooterHelpers.addStyleClassToElement)(helpMenu, ['header-user-menu__navigation-menu']);
+  helpMenu.setAttribute('aria-hidden', 'true');
+  helpMenu.appendChild(helpMenuList);
+  var helpMenuContainer = document.createElement('div');
+  (0, _headerFooterHelpers.addStyleClassToElement)(helpMenuContainer, ['header-banner__user-menu']);
+  (0, _headerFooterHelpers.addStyleClassToElement)(helpMenuContainer, ['header-user-menu']);
+  helpMenuContainer.appendChild(helpMenu);
+  var helpMenuTrigger = document.createElement('button');
+  (0, _headerFooterHelpers.addStyleClassToElement)(helpMenuTrigger, ['header-user-menu__trigger']);
+  helpMenuTrigger.type = 'button';
+  var helpMenuIcon = document.createElement('img');
+  helpMenuIcon.src = options && options.helpIcon ? options.helpIcon : _iconBase.icons.iconBase + DEFAULT_HELP_MENU_ICON;
+  (0, _headerFooterHelpers.addStyleClassToElement)(helpMenuIcon, ['header-banner__help-icon']);
+  helpMenuContainer.appendChild(helpMenuTrigger);
+  helpMenuTrigger.appendChild(helpMenuIcon);
+  var throttledMenuToggle = (0, _headerFooterHelpers.throttle)(function (event) {
+    return toggleMenu(event, helpMenuTrigger, helpMenu);
+  }, 50);
+  helpMenuTrigger.addEventListener('click', throttledMenuToggle);
+  var timer = setTimeout(function () {
+    return null;
+  }, 0);
+  helpMenuContainer.addEventListener('mouseover', function (event) {
+    clearTimeout(timer);
+    throttledMenuToggle(event);
+  });
+  helpMenuContainer.addEventListener('mouseout', function (event) {
+    timer = setTimeout(function () {
+      return throttledMenuToggle(event);
+    }, 200);
+  });
+  return helpMenuContainer;
 }
-exports.createHelpMenu = createHelpMenu;
 /**
  * @ignore exporting this only for the unit test
  */
+
+
 function createLoginSignUpButtons() {
-    var profileLoginButtonPre = document.createElement('div');
-    (0, headerFooterHelpers_1.addStyleClassToElement)(profileLoginButtonPre, ['header-banner__login']);
-    profileLoginButtonPre.appendChild((0, authn_1.loginStatusBox)(document, null, {}));
-    return profileLoginButtonPre;
+  var profileLoginButtonPre = document.createElement('div');
+  (0, _headerFooterHelpers.addStyleClassToElement)(profileLoginButtonPre, ['header-banner__login']);
+  profileLoginButtonPre.appendChild((0, _authn.loginStatusBox)(document, null, {}));
+  return profileLoginButtonPre;
 }
-exports.createLoginSignUpButtons = createLoginSignUpButtons;
 /**
  * @ignore exporting this only for the unit test
  */
+
+
 function createUserMenuButton(label, onClick) {
-    var button = document.createElement('button');
-    (0, headerFooterHelpers_1.addStyleClassToElement)(button, ['header-user-menu__button']);
-    button.addEventListener('click', onClick);
-    button.innerText = label;
-    return button;
+  var button = document.createElement('button');
+  (0, _headerFooterHelpers.addStyleClassToElement)(button, ['header-user-menu__button']);
+  button.addEventListener('click', onClick);
+  button.innerText = label;
+  return button;
 }
-exports.createUserMenuButton = createUserMenuButton;
 /**
  * @ignore exporting this only for the unit test
  */
+
+
 function createUserMenuLink(label, href, target) {
-    var link = document.createElement('a');
-    (0, headerFooterHelpers_1.addStyleClassToElement)(link, ['header-user-menu__link']);
-    link.href = href;
-    link.innerText = label;
-    if (target)
-        link.target = target;
-    return link;
+  var link = document.createElement('a');
+  (0, _headerFooterHelpers.addStyleClassToElement)(link, ['header-user-menu__link']);
+  link.href = href;
+  link.innerText = label;
+  if (target) link.target = target;
+  return link;
 }
-exports.createUserMenuLink = createUserMenuLink;
 /**
  * @ignore exporting this only for the unit test
  */
-function createUserMenu(store, user, userMenuList) {
-    return __awaiter(this, void 0, void 0, function () {
-        var fetcher, loggedInMenuList, loggedInMenu, loggedInMenuTrigger, profileImg, loggedInMenuContainer, throttledMenuToggle, timer;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    fetcher = store.fetcher;
-                    if (!fetcher) return [3 /*break*/, 2];
-                    // Making sure that Profile is loaded before building menu
-                    return [4 /*yield*/, fetcher.load(user)];
-                case 1:
-                    // Making sure that Profile is loaded before building menu
-                    _a.sent();
-                    _a.label = 2;
-                case 2:
-                    loggedInMenuList = document.createElement('ul');
-                    (0, headerFooterHelpers_1.addStyleClassToElement)(loggedInMenuList, ['header-user-menu__list']);
-                    if (userMenuList) {
-                        userMenuList.forEach(function (menuItem) {
-                            var menuItemType = menuItem.url ? 'url' : 'onclick';
-                            if (menuItemType === 'url') {
-                                loggedInMenuList.appendChild(createUserMenuItem(createUserMenuLink(menuItem.label, menuItem.url, menuItem.target)));
-                            }
-                            else {
-                                loggedInMenuList.appendChild(createUserMenuItem(createUserMenuButton(menuItem.label, menuItem.onclick)));
-                            }
-                        });
-                    }
-                    loggedInMenu = document.createElement('nav');
-                    (0, headerFooterHelpers_1.addStyleClassToElement)(loggedInMenu, ['header-user-menu__navigation-menu']);
-                    loggedInMenu.setAttribute('aria-hidden', 'true');
-                    loggedInMenu.appendChild(loggedInMenuList);
-                    loggedInMenuTrigger = document.createElement('button');
-                    (0, headerFooterHelpers_1.addStyleClassToElement)(loggedInMenuTrigger, ['header-user-menu__trigger']);
-                    loggedInMenuTrigger.type = 'button';
-                    profileImg = getProfileImg(store, user);
-                    if (typeof profileImg === 'string') {
-                        loggedInMenuTrigger.innerHTML = profileImg;
-                    }
-                    else {
-                        loggedInMenuTrigger.appendChild(profileImg);
-                    }
-                    loggedInMenuContainer = document.createElement('div');
-                    (0, headerFooterHelpers_1.addStyleClassToElement)(loggedInMenuContainer, ['header-banner__user-menu']);
-                    (0, headerFooterHelpers_1.addStyleClassToElement)(loggedInMenuContainer, ['header-user-menu']);
-                    loggedInMenuContainer.appendChild(loggedInMenuTrigger);
-                    loggedInMenuContainer.appendChild(loggedInMenu);
-                    throttledMenuToggle = (0, headerFooterHelpers_1.throttle)(function (event) { return toggleMenu(event, loggedInMenuTrigger, loggedInMenu); }, 50);
-                    loggedInMenuTrigger.addEventListener('click', throttledMenuToggle);
-                    timer = setTimeout(function () { return null; }, 0);
-                    loggedInMenuContainer.addEventListener('mouseover', function (event) {
-                        clearTimeout(timer);
-                        throttledMenuToggle(event);
-                    });
-                    loggedInMenuContainer.addEventListener('mouseout', function (event) {
-                        timer = setTimeout(function () { return throttledMenuToggle(event); }, 200);
-                    });
-                    return [2 /*return*/, loggedInMenuContainer];
-            }
-        });
-    });
+
+
+function createUserMenu(_x9, _x10, _x11) {
+  return _createUserMenu.apply(this, arguments);
 }
-exports.createUserMenu = createUserMenu;
 /**
  * @ignore exporting this only for the unit test
  */
+
+
+function _createUserMenu() {
+  _createUserMenu = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4(store, user, userMenuList) {
+    var fetcher, loggedInMenuList, loggedInMenu, loggedInMenuTrigger, profileImg, loggedInMenuContainer, throttledMenuToggle, timer;
+    return _regenerator["default"].wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            fetcher = store.fetcher;
+
+            if (!fetcher) {
+              _context4.next = 4;
+              break;
+            }
+
+            _context4.next = 4;
+            return fetcher.load(user);
+
+          case 4:
+            loggedInMenuList = document.createElement('ul');
+            (0, _headerFooterHelpers.addStyleClassToElement)(loggedInMenuList, ['header-user-menu__list']);
+
+            if (userMenuList) {
+              userMenuList.forEach(function (menuItem) {
+                var menuItemType = menuItem.url ? 'url' : 'onclick';
+
+                if (menuItemType === 'url') {
+                  loggedInMenuList.appendChild(createUserMenuItem(createUserMenuLink(menuItem.label, menuItem.url, menuItem.target)));
+                } else {
+                  loggedInMenuList.appendChild(createUserMenuItem(createUserMenuButton(menuItem.label, menuItem.onclick)));
+                }
+              });
+            }
+
+            loggedInMenu = document.createElement('nav');
+            (0, _headerFooterHelpers.addStyleClassToElement)(loggedInMenu, ['header-user-menu__navigation-menu']);
+            loggedInMenu.setAttribute('aria-hidden', 'true');
+            loggedInMenu.appendChild(loggedInMenuList);
+            loggedInMenuTrigger = document.createElement('button');
+            (0, _headerFooterHelpers.addStyleClassToElement)(loggedInMenuTrigger, ['header-user-menu__trigger']);
+            loggedInMenuTrigger.type = 'button';
+            profileImg = getProfileImg(store, user);
+
+            if (typeof profileImg === 'string') {
+              loggedInMenuTrigger.innerHTML = profileImg;
+            } else {
+              loggedInMenuTrigger.appendChild(profileImg);
+            }
+
+            loggedInMenuContainer = document.createElement('div');
+            (0, _headerFooterHelpers.addStyleClassToElement)(loggedInMenuContainer, ['header-banner__user-menu']);
+            (0, _headerFooterHelpers.addStyleClassToElement)(loggedInMenuContainer, ['header-user-menu']);
+            loggedInMenuContainer.appendChild(loggedInMenuTrigger);
+            loggedInMenuContainer.appendChild(loggedInMenu);
+            throttledMenuToggle = (0, _headerFooterHelpers.throttle)(function (event) {
+              return toggleMenu(event, loggedInMenuTrigger, loggedInMenu);
+            }, 50);
+            loggedInMenuTrigger.addEventListener('click', throttledMenuToggle);
+            timer = setTimeout(function () {
+              return null;
+            }, 0);
+            loggedInMenuContainer.addEventListener('mouseover', function (event) {
+              clearTimeout(timer);
+              throttledMenuToggle(event);
+            });
+            loggedInMenuContainer.addEventListener('mouseout', function (event) {
+              timer = setTimeout(function () {
+                return throttledMenuToggle(event);
+              }, 200);
+            });
+            return _context4.abrupt("return", loggedInMenuContainer);
+
+          case 27:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  }));
+  return _createUserMenu.apply(this, arguments);
+}
+
 function createUserMenuItem(child) {
-    var menuProfileItem = document.createElement('li');
-    (0, headerFooterHelpers_1.addStyleClassToElement)(menuProfileItem, ['header-user-menu__list-item']);
-    menuProfileItem.appendChild(child);
-    return menuProfileItem;
+  var menuProfileItem = document.createElement('li');
+  (0, _headerFooterHelpers.addStyleClassToElement)(menuProfileItem, ['header-user-menu__list-item']);
+  menuProfileItem.appendChild(child);
+  return menuProfileItem;
 }
-exports.createUserMenuItem = createUserMenuItem;
 /**
  * @ignore exporting this only for the unit test
  */
+
+
 function getProfileImg(store, user) {
-    var profileUrl = null;
-    try {
-        var profileUrl_1 = widgets.findImage(user);
-        if (!profileUrl_1) {
-            return empty_profile_1.emptyProfile;
-        }
+  var profileUrl = null;
+
+  try {
+    profileUrl = widgets.findImage(user);
+
+    if (!profileUrl) {
+      return _emptyProfile.emptyProfile;
     }
-    catch (_a) {
-        return empty_profile_1.emptyProfile;
-    }
-    var profileImage = document.createElement('div');
-    (0, headerFooterHelpers_1.addStyleClassToElement)(profileImage, ['header-user-menu__photo']);
-    profileImage.style.backgroundImage = "url(\"".concat(profileUrl, "\")");
-    return profileImage;
+  } catch (_unused) {
+    return _emptyProfile.emptyProfile;
+  }
+
+  var profileImage = document.createElement('div');
+  (0, _headerFooterHelpers.addStyleClassToElement)(profileImage, ['header-user-menu__photo']);
+  profileImage.style.backgroundImage = "url(".concat(profileUrl, ")");
+  return profileImage;
 }
-exports.getProfileImg = getProfileImg;
 /**
  * @internal
  */
+
+
 function toggleMenu(event, trigger, menu) {
-    var isExpanded = trigger.getAttribute('aria-expanded') === 'true';
-    var expand = event.type === 'mouseover';
-    var close = event.type === 'mouseout';
-    if ((isExpanded && expand) || (!isExpanded && close)) {
-        return;
-    }
-    trigger.setAttribute('aria-expanded', (!isExpanded).toString());
-    menu.setAttribute('aria-hidden', isExpanded.toString());
+  var isExpanded = trigger.getAttribute('aria-expanded') === 'true';
+  var expand = event.type === 'mouseover';
+  var close = event.type === 'mouseout';
+
+  if (isExpanded && expand || !isExpanded && close) {
+    return;
+  }
+
+  trigger.setAttribute('aria-expanded', (!isExpanded).toString());
+  menu.setAttribute('aria-hidden', isExpanded.toString());
 }
 //# sourceMappingURL=index.js.map