@dhis2-ui/header-bar 9.10.3 → 9.11.1-beta.1

package/build/es/header-bar.js

@@ -34,7 +34,6 @@ const query = {
 };
 export const HeaderBar = _ref => {
   var _data$user$avatar;
-
   let {
     appName,
     className,
@@ -53,13 +52,14 @@ export const HeaderBar = _ref => {
   } = useDataQuery(query);
   const apps = useMemo(() => {
     const getPath = path => path.startsWith('http:') || path.startsWith('https:') ? path : joinPath(baseUrl, 'api', path);
-
-    return data === null || data === void 0 ? void 0 : data.apps.modules.map(app => ({ ...app,
+    return data === null || data === void 0 ? void 0 : data.apps.modules.map(app => ({
+      ...app,
       icon: getPath(app.icon),
       defaultAction: getPath(app.defaultAction)
     }));
-  }, [data, baseUrl]); // See https://jira.dhis2.org/browse/LIBS-180
+  }, [data, baseUrl]);
 
+  // See https://jira.dhis2.org/browse/LIBS-180
   if (!loading && !error) {
     // TODO: This will run every render which is probably wrong!
     // Also, setting the global locale shouldn't be done in the headerbar
@@ -67,7 +67,6 @@ export const HeaderBar = _ref => {
     i18n.setDefaultNamespace('default');
     i18n.changeLanguage(locale);
   }
-
   return /*#__PURE__*/React.createElement(HeaderBarContextProvider, {
     updateAvailable: updateAvailable,
     onApplyAvailableUpdate: onApplyAvailableUpdate
@@ -96,7 +95,7 @@ export const HeaderBar = _ref => {
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "4230161118",
     dynamic: [colors.white]
-  }, [".main.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;background-color:#2c6693;color:".concat(colors.white, ";height:48px;}"), ".right-control-spacer.__jsx-style-dynamic-selector{margin-inline-start:auto;}"])));
+  }, [`.main.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;background-color:#2c6693;color:${colors.white};height:48px;}`, ".right-control-spacer.__jsx-style-dynamic-selector{margin-inline-start:auto;}"])));
 };
 HeaderBar.propTypes = {
   appName: PropTypes.string,

package/build/es/{header-bar.stories.js → header-bar.prod.stories.js}

@@ -4,7 +4,19 @@ import { createDecoratorProvider, mockOfflineInterface, providerConfig } from '.
 import { OnlineStatusMessageUpdate } from './__e2e__/stories/online-status-message.js';
 import { HeaderBar } from './header-bar.js';
 const subtitle = 'The common navigation bar used in all DHIS2 apps';
-const description = "\nThe header bar is mandatory for all apps. This creates a stable, understandable point of reference for the user across all kinds of different apps. It must always be displayed fixed to the top of the screen. Do not interfere or obstruct interaction with the header bar.\n\nThe header bar is included automatically with the App Shell and should not need any configuration.\n\n#### Theme\n\nThe header bar can be themeed to suit the brand/color of your DHIS2 instance. The color of the text/icons will be automatically adjusted based on the selected color.\n\n```js\nimport { HeaderBar } from '@dhis2/ui'\n```\n";
+const description = `
+The header bar is mandatory for all apps. This creates a stable, understandable point of reference for the user across all kinds of different apps. It must always be displayed fixed to the top of the screen. Do not interfere or obstruct interaction with the header bar.
+
+The header bar is included automatically with the App Shell and should not need any configuration.
+
+#### Theme
+
+The header bar can be themeed to suit the brand/color of your DHIS2 instance. The color of the text/icons will be automatically adjusted based on the selected color.
+
+\`\`\`js
+import { HeaderBar } from '@dhis2/ui'
+\`\`\`
+`;
 const customData = {
   'systemSettings/applicationTitle': {
     applicationTitle: 'Foobar'
@@ -98,30 +110,36 @@ const customData = {
     unreadMessageConversations: 5
   }
 };
-const customLogoData = { ...customData,
+const customLogoData = {
+  ...customData,
   'staticContent/logo_banner': {
     images: {
       png: 'https://via.placeholder.com/150x50'
     }
   }
 };
-const customLocaleData = { ...customData,
+const customLocaleData = {
+  ...customData,
   'systemSettings/applicationTitle': {
     applicationTitle: 'Le Gros Foobar'
   },
-  me: { ...customData.me,
+  me: {
+    ...customData.me,
     settings: {
       keyUiLocale: 'fr'
     }
   },
   'action::menu/getModules': {
-    modules: customData['action::menu/getModules'].modules.map(mod => ({ ...mod,
-      displayName: "Le ".concat(mod.displayName)
+    modules: customData['action::menu/getModules'].modules.map(mod => ({
+      ...mod,
+      displayName: `Le ${mod.displayName}`
     }))
   }
 };
-const customAuthoritiesData = { ...customData,
-  me: { ...customData.me,
+const customAuthoritiesData = {
+  ...customData,
+  me: {
+    ...customData.me,
     authorities: ['M_dhis-web-messaging']
   }
 };
@@ -180,7 +198,8 @@ export const WithOnlineStatus = () => /*#__PURE__*/React.createElement(CustomDat
 }, /*#__PURE__*/React.createElement(HeaderBar, {
   appName: "Exemple!"
 }));
-WithOnlineStatus.decorators = [createDecoratorProvider({ ...providerConfig,
+WithOnlineStatus.decorators = [createDecoratorProvider({
+  ...providerConfig,
   pwaEnabled: true
 })];
 WithOnlineStatus.parameters = {
@@ -211,9 +230,11 @@ export const RTLHeader = () => /*#__PURE__*/React.createElement(CustomDataProvid
 }, /*#__PURE__*/React.createElement(HeaderBar, {
   appName: "Example!"
 })));
-WithOnlineStatusMessage.decorators = [createDecoratorProvider({ ...providerConfig,
+WithOnlineStatusMessage.decorators = [createDecoratorProvider({
+  ...providerConfig,
   pwaEnabled: true
-}, { ...mockOfflineInterface,
+}, {
+  ...mockOfflineInterface,
   latestIsConnected: false
 })];
 WithOnlineStatusMessage.parameters = {

package/build/es/join-path.js

@@ -2,7 +2,6 @@ export const joinPath = function () {
   for (var _len = arguments.length, parts = new Array(_len), _key = 0; _key < _len; _key++) {
     parts[_key] = arguments[_key];
   }
-
   const realParts = parts.filter(part => !!part);
   return realParts.map(part => part.replace(/^\/+|\/+$/g, '')).join('/');
 };

package/build/es/logo-image.js

@@ -1,6 +1,6 @@
 import _JSXStyle from "styled-jsx/style";
-import { LogoIconWhite } from '@dhis2-ui/logo';
 import { useDataQuery } from '@dhis2/app-runtime';
+import { LogoIconWhite } from '@dhis2-ui/logo';
 import React from 'react';
 const logoStyles = {
   styles: /*#__PURE__*/React.createElement(_JSXStyle, {
@@ -13,22 +13,17 @@ const query = {
     resource: 'staticContent/logo_banner'
   }
 };
-
 const pathExists = data => data && data.customLogo && data.customLogo.images && data.customLogo.images.png;
-
 export const LogoImage = () => {
   const {
     loading,
     error,
     data
   } = useDataQuery(query);
-
   if (loading) {
     return null;
   }
-
   let Logo;
-
   if (!error && pathExists(data)) {
     Logo = /*#__PURE__*/React.createElement("img", {
       alt: "Headerbar Logo",
@@ -40,7 +35,6 @@ export const LogoImage = () => {
       className: logoStyles.className
     });
   }
-
   return /*#__PURE__*/React.createElement("div", {
     className: "jsx-3930434724"
   }, Logo, logoStyles.styles, /*#__PURE__*/React.createElement(_JSXStyle, {

package/build/es/notification-icon.js

@@ -4,7 +4,6 @@ import { IconMessages24, IconMail24 } from '@dhis2/ui-icons';
 import PropTypes from 'prop-types';
 import React from 'react';
 import i18n from './locales/index.js';
-
 function icon(kind) {
   if (kind === 'message') {
     return /*#__PURE__*/React.createElement(IconMessages24, {
@@ -16,7 +15,6 @@ function icon(kind) {
     });
   }
 }
-
 export const NotificationIcon = _ref => {
   let {
     count,
@@ -34,12 +32,12 @@ export const NotificationIcon = _ref => {
     "aria-label": i18n.t(ariaLabel),
     className: _JSXStyle.dynamic([["995028205", [spacers.dp12, spacers.dp12, theme.secondary500, colors.white, spacers.dp4]]]) + " " + (kind || "")
   }, icon(kind), count > 0 && /*#__PURE__*/React.createElement("span", {
-    "data-test": "".concat(dataTestId, "-count"),
+    "data-test": `${dataTestId}-count`,
     className: _JSXStyle.dynamic([["995028205", [spacers.dp12, spacers.dp12, theme.secondary500, colors.white, spacers.dp4]]])
   }, count), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "995028205",
     dynamic: [spacers.dp12, spacers.dp12, theme.secondary500, colors.white, spacers.dp4]
-  }, ["a.__jsx-style-dynamic-selector{position:relative;margin:0;cursor:pointer;padding:0 ".concat(spacers.dp12, ";height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}"), "a.__jsx-style-dynamic-selector:focus{outline:2px solid white;outline-offset:-2px;}", "a.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", "a.__jsx-style-dynamic-selector:hover{background:#1a557f;}", "a.__jsx-style-dynamic-selector:active{background:#104067;}", "span.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:1;position:absolute;top:3px;inset-inline-end:2px;min-width:18px;min-height:18px;border-radius:".concat(spacers.dp12, ";box-shadow:0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06);background-color:").concat(theme.secondary500, ";color:").concat(colors.white, ";font-size:13px;font-weight:600;line-height:15px;text-align:center;cursor:inherit;padding:0 ").concat(spacers.dp4, ";}")]));
+  }, [`a.__jsx-style-dynamic-selector{position:relative;margin:0;cursor:pointer;padding:0 ${spacers.dp12};height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}`, "a.__jsx-style-dynamic-selector:focus{outline:2px solid white;outline-offset:-2px;}", "a.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", "a.__jsx-style-dynamic-selector:hover{background:#1a557f;}", "a.__jsx-style-dynamic-selector:active{background:#104067;}", `span.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:1;position:absolute;top:3px;inset-inline-end:2px;min-width:18px;min-height:18px;border-radius:${spacers.dp12};box-shadow:0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06);background-color:${theme.secondary500};color:${colors.white};font-size:13px;font-weight:600;line-height:15px;text-align:center;cursor:inherit;padding:0 ${spacers.dp4};}`]));
 };
 NotificationIcon.defaultProps = {
   count: 0

package/build/es/notifications.js

@@ -5,9 +5,7 @@ import React from 'react';
 import { joinPath } from './join-path.js';
 import i18n from './locales/index.js';
 import { NotificationIcon } from './notification-icon.js';
-
 const hasAuthority = (userAuthorities, authId) => Array.isArray(userAuthorities) && userAuthorities.some(userAuthId => userAuthId === 'ALL' || userAuthId === authId);
-
 export const Notifications = _ref => {
   let {
     interpretations,

package/build/es/online-status.js

@@ -5,8 +5,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import i18n from './locales/index.js';
 import styles from './online-status.styles.js';
-/** A badge to display online/offline status in the header bar */
 
+/** A badge to display online/offline status in the header bar */
 export function OnlineStatus(_ref) {
   let {
     dense
@@ -20,15 +20,15 @@ export function OnlineStatus(_ref) {
   const displayStatus = online ? i18n.t('Online') : i18n.t('Offline');
   return /*#__PURE__*/React.createElement("div", {
     "data-test": "headerbar-online-status",
-    className: "jsx-".concat(styles.__hash) + " " + (cx('container', dense ? 'bar' : 'badge') || "")
+    className: `jsx-${styles.__hash}` + " " + (cx('container', dense ? 'bar' : 'badge') || "")
   }, onlineStatusMessage && !dense && /*#__PURE__*/React.createElement("span", {
-    className: "jsx-".concat(styles.__hash) + " " + "info unselectable"
+    className: `jsx-${styles.__hash}` + " " + "info unselectable"
   }, onlineStatusMessage), /*#__PURE__*/React.createElement("div", {
-    className: "jsx-".concat(styles.__hash) + " " + (cx('icon', online ? 'online' : 'offline') || "")
+    className: `jsx-${styles.__hash}` + " " + (cx('icon', online ? 'online' : 'offline') || "")
   }), /*#__PURE__*/React.createElement("span", {
-    className: "jsx-".concat(styles.__hash) + " " + "label unselectable"
+    className: `jsx-${styles.__hash}` + " " + "label unselectable"
   }, displayStatus), onlineStatusMessage && dense && /*#__PURE__*/React.createElement("span", {
-    className: "jsx-".concat(styles.__hash) + " " + "info-dense unselectable"
+    className: `jsx-${styles.__hash}` + " " + "info-dense unselectable"
   }, onlineStatusMessage), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: styles.__hash
   }, styles));

package/build/es/online-status.styles.js

@@ -1,4 +1,4 @@
 import { colors, spacers } from '@dhis2/ui-constants';
-const _defaultExport = [".container.jsx-2382375945{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;background-color:#104167;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:".concat(colors.grey100, ";}"), ".container.badge.jsx-2382375945{margin-inline-end:".concat(spacers.dp8, ";padding:").concat(spacers.dp8, ";border-radius:5px;font-size:14px;}"), ".container.bar.jsx-2382375945{display:none;padding:0px ".concat(spacers.dp4, ";min-height:24px;font-size:13px;}"), "@media (max-width:480px){.container.badge.jsx-2382375945{display:none;}.container.bar.jsx-2382375945{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}", ".unselectable.jsx-2382375945{cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".info.jsx-2382375945{margin-inline-end:".concat(spacers.dp16, ";}"), ".info-dense.jsx-2382375945{margin-inline-start:".concat(spacers.dp12, ";font-size:12px;}"), ".icon.jsx-2382375945{width:8px;min-width:8px;height:8px;border-radius:8px;margin-inline-end:".concat(spacers.dp4, ";}"), ".icon.online.jsx-2382375945{background-color:".concat(colors.teal400, ";}"), ".icon.offline.jsx-2382375945{background-color:transparent;border:1px solid ".concat(colors.yellow300, ";}"), ".icon.reconnecting.jsx-2382375945{background:".concat(colors.grey300, ";-webkit-animation:fadeinout 2s linear infinite;-webkit-animation:fadeinout-jsx-2382375945 2s linear infinite;animation:fadeinout-jsx-2382375945 2s linear infinite;opacity:0;}"), "@-webkit-keyframes fadeinout{50%.jsx-2382375945{opacity:1;}}", "@-webkit-keyframes fadeinout-jsx-2382375945{50%{opacity:1;}}", "@keyframes fadeinout-jsx-2382375945{50%{opacity:1;}}", ".label.jsx-2382375945{-webkit-letter-spacing:0.5px;-moz-letter-spacing:0.5px;-ms-letter-spacing:0.5px;letter-spacing:0.5px;}"];
+const _defaultExport = [`.container.jsx-2382375945{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;background-color:#104167;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:${colors.grey100};}`, `.container.badge.jsx-2382375945{margin-inline-end:${spacers.dp8};padding:${spacers.dp8};border-radius:5px;font-size:14px;}`, `.container.bar.jsx-2382375945{display:none;padding:0px ${spacers.dp4};min-height:24px;font-size:13px;}`, "@media (max-width:480px){.container.badge.jsx-2382375945{display:none;}.container.bar.jsx-2382375945{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}", ".unselectable.jsx-2382375945{cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", `.info.jsx-2382375945{margin-inline-end:${spacers.dp16};}`, `.info-dense.jsx-2382375945{margin-inline-start:${spacers.dp12};font-size:12px;}`, `.icon.jsx-2382375945{width:8px;min-width:8px;height:8px;border-radius:8px;margin-inline-end:${spacers.dp4};}`, `.icon.online.jsx-2382375945{background-color:${colors.teal400};}`, `.icon.offline.jsx-2382375945{background-color:transparent;border:1px solid ${colors.yellow300};}`, `.icon.reconnecting.jsx-2382375945{background:${colors.grey300};-webkit-animation:fadeinout 2s linear infinite;-webkit-animation:fadeinout-jsx-2382375945 2s linear infinite;animation:fadeinout-jsx-2382375945 2s linear infinite;opacity:0;}`, "@-webkit-keyframes fadeinout{50%.jsx-2382375945{opacity:1;}}", "@-webkit-keyframes fadeinout-jsx-2382375945{50%{opacity:1;}}", "@keyframes fadeinout-jsx-2382375945{50%{opacity:1;}}", ".label.jsx-2382375945{-webkit-letter-spacing:0.5px;-moz-letter-spacing:0.5px;-ms-letter-spacing:0.5px;letter-spacing:0.5px;}"];
 _defaultExport.__hash = "2382375945";
 export default _defaultExport;

package/build/es/profile/use-on-doc-click.js

@@ -5,7 +5,6 @@ export const useOnDocClick = (containerRef, hide) => {
       if (!containerRef.current) {
         return null;
       }
-
       if (!containerRef.current.contains(evt.target)) {
         hide();
       }

package/build/es/profile-menu/profile-header.js

@@ -1,11 +1,10 @@
 import _JSXStyle from "styled-jsx/style";
-import { UserAvatar } from '@dhis2-ui/user-avatar';
 import { useConfig } from '@dhis2/app-runtime';
+import { UserAvatar } from '@dhis2-ui/user-avatar';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { joinPath } from '../join-path.js';
 import i18n from '../locales/index.js';
-
 const ProfileName = _ref => {
   let {
     children
@@ -17,11 +16,9 @@ const ProfileName = _ref => {
     id: "2223023701"
   }, ["div.jsx-2223023701{margin-bottom:3px;font-size:16px;line-height:19px;}"]));
 };
-
 ProfileName.propTypes = {
   children: PropTypes.string
 };
-
 const ProfileEmail = _ref2 => {
   let {
     children
@@ -33,11 +30,9 @@ const ProfileEmail = _ref2 => {
     id: "1072768994"
   }, ["div.jsx-1072768994{margin-bottom:6px;font-size:14px;line-height:16px;}"]));
 };
-
 ProfileEmail.propTypes = {
   children: PropTypes.string
 };
-
 const ProfileEdit = _ref3 => {
   let {
     children
@@ -53,11 +48,9 @@ const ProfileEdit = _ref3 => {
     id: "233684196"
   }, ["a.jsx-233684196{color:rgba(0,0,0,0.87);font-size:12px;line-height:14px;-webkit-text-decoration:underline;text-decoration:underline;cursor:pointer;}"]));
 };
-
 ProfileEdit.propTypes = {
   children: PropTypes.string
 };
-
 const ProfileDetails = _ref4 => {
   let {
     name,
@@ -69,7 +62,6 @@ const ProfileDetails = _ref4 => {
     id: "4236878114"
   }, ["div.jsx-4236878114{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-inline-start:20px;color:#000;font-size:14px;font-weight:400;}"]));
 };
-
 ProfileDetails.propTypes = {
   email: PropTypes.string,
   name: PropTypes.string

package/build/es/profile-menu/profile-menu.js

@@ -1,13 +1,13 @@
 import _JSXStyle from "styled-jsx/style";
+import { clearSensitiveCaches, useConfig } from '@dhis2/app-runtime';
+import { colors } from '@dhis2/ui-constants';
+import { IconSettings24, IconInfo24, IconLogOut24, IconUser24, IconQuestion24 } from '@dhis2/ui-icons';
 import { Card } from '@dhis2-ui/card';
 import { Center } from '@dhis2-ui/center';
 import { Divider } from '@dhis2-ui/divider';
 import { Layer } from '@dhis2-ui/layer';
 import { CircularLoader } from '@dhis2-ui/loader';
 import { MenuDivider, MenuItem } from '@dhis2-ui/menu';
-import { clearSensitiveCaches, useConfig } from '@dhis2/app-runtime';
-import { colors } from '@dhis2/ui-constants';
-import { IconSettings24, IconInfo24, IconLogOut24, IconUser24, IconQuestion24 } from '@dhis2/ui-icons';
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import { DebugInfoMenuItem } from '../debug-info/debug-info-menu-item.js';
@@ -15,13 +15,11 @@ import { joinPath } from '../join-path.js';
 import i18n from '../locales/index.js';
 import { ProfileHeader } from './profile-header.js';
 import { UpdateNotification } from './update-notification.js';
-
 const LoadingMask = () => /*#__PURE__*/React.createElement(Layer, {
   translucent: true,
   disablePortal: true,
   dataTest: "headerbar-profile-menu-loading-mask"
 }, /*#__PURE__*/React.createElement(Center, null, /*#__PURE__*/React.createElement(CircularLoader, null)));
-
 const ProfileContents = _ref => {
   let {
     name,
@@ -75,7 +73,8 @@ const ProfileContents = _ref => {
       color: colors.grey700
     })
   }), /*#__PURE__*/React.createElement(MenuItem, {
-    href: joinPath(baseUrl, 'dhis-web-commons-security/logout.action') // NB: By MenuItem implementation, this callback
+    href: joinPath(baseUrl, 'dhis-web-commons-security/logout.action')
+    // NB: By MenuItem implementation, this callback
     // overwrites default navigation behavior but maintains
     // the href attribute
     ,
@@ -101,7 +100,6 @@ const ProfileContents = _ref => {
     id: "2099675810"
   }, ["div.jsx-2099675810{width:100%;padding:0;}", "ul.jsx-2099675810{padding:0;margin:0;}", "a.jsx-2099675810,a.jsx-2099675810:hover,a.jsx-2099675810:focus,a.jsx-2099675810:active,a.jsx-2099675810:visited{-webkit-text-decoration:none;text-decoration:none;display:block;}"]));
 };
-
 ProfileContents.propTypes = {
   hideProfileMenu: PropTypes.func.isRequired,
   showDebugInfoModal: PropTypes.func.isRequired,
@@ -111,7 +109,8 @@ ProfileContents.propTypes = {
   name: PropTypes.string
 };
 export const ProfileMenu = _ref2 => {
-  let { ...props
+  let {
+    ...props
   } = _ref2;
   return /*#__PURE__*/React.createElement("div", {
     "data-test": "headerbar-profile-menu",

package/build/es/profile-menu/update-notification.js

@@ -1,7 +1,7 @@
 import _JSXStyle from "styled-jsx/style";
-import { MenuItem } from '@dhis2-ui/menu';
 import { useConfig } from '@dhis2/app-runtime';
 import { colors } from '@dhis2/ui-constants';
+import { MenuItem } from '@dhis2-ui/menu';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { useHeaderBarContext } from '../header-bar-context.js';
@@ -17,12 +17,10 @@ export function UpdateNotification(_ref) {
     updateAvailable,
     onApplyAvailableUpdate
   } = useHeaderBarContext();
-
   const onClick = () => {
     hideProfileMenu();
     onApplyAvailableUpdate === null || onApplyAvailableUpdate === void 0 ? void 0 : onApplyAvailableUpdate();
   };
-
   const updateNotificationLabel = /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["4135170305", [colors.blue600]]]) + " " + "root"
   }, /*#__PURE__*/React.createElement("div", {
@@ -38,7 +36,7 @@ export function UpdateNotification(_ref) {
   }), i18n.t('Click to reload')), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "4135170305",
     dynamic: [colors.blue600]
-  }, [".root.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:14px;line-height:17px;}", ".badge.__jsx-style-dynamic-selector{display:inline-block;width:12px;height:12px;margin:0 8px;border-radius:6px;background-color:".concat(colors.blue600, ";}"), ".spacer.__jsx-style-dynamic-selector{display:inline-block;width:8px;}", ".message.__jsx-style-dynamic-selector{display:inline-block;}"]));
+  }, [".root.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:14px;line-height:17px;}", `.badge.__jsx-style-dynamic-selector{display:inline-block;width:12px;height:12px;margin:0 8px;border-radius:6px;background-color:${colors.blue600};}`, ".spacer.__jsx-style-dynamic-selector{display:inline-block;width:8px;}", ".message.__jsx-style-dynamic-selector{display:inline-block;}"]));
   return updateAvailable ? /*#__PURE__*/React.createElement(MenuItem, {
     dense: true,
     onClick: onClick,

package/build/es/profile.js

@@ -4,9 +4,8 @@ import PropTypes from 'prop-types';
 import React, { useCallback, useRef, useState } from 'react';
 import { DebugInfoModal } from './debug-info/debug-info-modal.js';
 import i18n from './locales/index.js';
-import { ProfileMenu } from './profile-menu/index.js';
 import { useOnDocClick } from './profile/use-on-doc-click.js';
-
+import { ProfileMenu } from './profile-menu/index.js';
 const Profile = _ref => {
   let {
     name,
@@ -51,7 +50,6 @@ const Profile = _ref => {
     id: "3442481507"
   }, [".headerbar-profile.jsx-3442481507{position:relative;height:100%;}", ".headerbar-profile-btn.jsx-3442481507{background:transparent;padding:6px;border:0;cursor:pointer;}", ".headerbar-profile-btn.jsx-3442481507:focus{outline:2px solid white;outline-offset:-2px;}", ".headerbar-profile-btn.jsx-3442481507:focus.jsx-3442481507:not(:focus-visible){outline:none;}", ".headerbar-profile-btn.jsx-3442481507:hover{background:#1a557f;}", ".headerbar-profile-btn.jsx-3442481507:active{background:#104067;}"]));
 };
-
 Profile.propTypes = {
   name: PropTypes.string.isRequired,
   avatarId: PropTypes.string,

package/build/es/title.js

@@ -9,7 +9,7 @@ export const Title = _ref => {
   return /*#__PURE__*/React.createElement("div", {
     "data-test": "headerbar-title",
     className: "jsx-2721515324"
-  }, app ? "".concat(instance, " - ").concat(app) : "".concat(instance), /*#__PURE__*/React.createElement(_JSXStyle, {
+  }, app ? `${instance} - ${app}` : `${instance}`, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2721515324"
   }, ["div.jsx-2721515324{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500;-webkit-letter-spacing:0.01em;-moz-letter-spacing:0.01em;-ms-letter-spacing:0.01em;letter-spacing:0.01em;white-space:nowrap;}"]));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/header-bar",
-    "version": "9.10.3",
+    "version": "9.11.1-beta.1",
     "description": "UI HeaderBar",
     "repository": {
         "type": "git",
@@ -22,33 +22,33 @@
         "access": "public"
     },
     "scripts": {
-        "start": "start-storybook -c ../../storybook/config --port 5000",
+        "start": "storybook dev -c ../../storybook/config --port 5000",
         "build": "d2-app-scripts build",
         "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js"
     },
     "peerDependencies": {
         "@dhis2/app-runtime": "^3",
         "@dhis2/d2-i18n": "^1",
-        "react": "^16.8",
-        "react-dom": "^16.8",
+        "react": "^16.13",
+        "react-dom": "^16.13",
         "styled-jsx": "^4"
     },
     "dependencies": {
-        "@dhis2-ui/box": "9.10.3",
-        "@dhis2-ui/button": "9.10.3",
-        "@dhis2-ui/card": "9.10.3",
-        "@dhis2-ui/center": "9.10.3",
-        "@dhis2-ui/divider": "9.10.3",
-        "@dhis2-ui/input": "9.10.3",
-        "@dhis2-ui/layer": "9.10.3",
-        "@dhis2-ui/loader": "9.10.3",
-        "@dhis2-ui/logo": "9.10.3",
-        "@dhis2-ui/menu": "9.10.3",
-        "@dhis2-ui/modal": "9.10.3",
-        "@dhis2-ui/user-avatar": "9.10.3",
+        "@dhis2-ui/box": "9.11.1-beta.1",
+        "@dhis2-ui/button": "9.11.1-beta.1",
+        "@dhis2-ui/card": "9.11.1-beta.1",
+        "@dhis2-ui/center": "9.11.1-beta.1",
+        "@dhis2-ui/divider": "9.11.1-beta.1",
+        "@dhis2-ui/input": "9.11.1-beta.1",
+        "@dhis2-ui/layer": "9.11.1-beta.1",
+        "@dhis2-ui/loader": "9.11.1-beta.1",
+        "@dhis2-ui/logo": "9.11.1-beta.1",
+        "@dhis2-ui/menu": "9.11.1-beta.1",
+        "@dhis2-ui/modal": "9.11.1-beta.1",
+        "@dhis2-ui/user-avatar": "9.11.1-beta.1",
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.10.3",
-        "@dhis2/ui-icons": "9.10.3",
+        "@dhis2/ui-constants": "9.11.1-beta.1",
+        "@dhis2/ui-icons": "9.11.1-beta.1",
         "classnames": "^2.3.1",
         "moment": "^2.29.1",
         "prop-types": "^15.7.2"