@veracity/vui 2.14.8-beta.2 → 2.15.2

package/dist/esm/header/loggedInHeader.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import Box from '../box';
+import Button from '../button';
 import { RenderOnScreen, useDown, useStyleConfig, vui } from '../core';
 import List from '../list';
 import { cs, isJsx } from '../utils';
@@ -9,7 +10,7 @@ import HeaderAccountUserInfo from './headerAccountUserInfo';
 import HeaderServicesMessage from './headerServicesMessage';
 /** Displays Header content appropriate for logged-in users, such as services, notifications or account information. */
 export const LoggedInHeader = vui((props, ref) => {
-    const { account, supportLinks, applicationName, applicationUrl, children, className, isApplication = false, logo, mainLinks, services, showAltUserInfo = true, showMainLinks = isApplication ? false : true, showServices = true, notifications, ...rest } = props;
+    const { account, supportLinks, applicationName, applicationUrl, children, className, isApplication = false, isCleanLayout = false, logo, mainLinks, services, showAltUserInfo = true, showMainLinks = isApplication ? false : true, showServices = true, notifications, url, ...rest } = props;
     if (isApplication) {
         if (!applicationName) {
             console.error('Header: isApplication is true but applicationName is not set.');
@@ -21,7 +22,7 @@ export const LoggedInHeader = vui((props, ref) => {
     const servicesLinks = isJsx(services) ? [] : services?.links || [];
     const styles = useStyleConfig('Header', useHeaderContext());
     const localTextColor = rest?.variant === 'dark' ? 'white' : 'darkBlue.main';
-    return (React.createElement(Header, { className: cs('vui-loggedInHeader', isApplication ? 'vui-loggedInAppHeader' : '', className), mb: isApplication && isSmallScreen ? '41px' : 'inherited', ref: ref, ...rest },
+    return (React.createElement(Header, { className: cs('vui-loggedInHeader', isApplication ? 'vui-loggedInAppHeader' : undefined, className), mb: isApplication && isSmallScreen ? '41px' : 'inherited', ref: ref, ...rest },
         React.createElement(Header.Content, null,
             (!isApplication || !isLessThanMD) && React.createElement(React.Fragment, null,
                 " ",
@@ -32,40 +33,42 @@ export const LoggedInHeader = vui((props, ref) => {
                 React.createElement(Header.ApplicationName, { color: localTextColor, title: applicationName, url: applicationUrl || '/' }))),
             !isApplication && React.createElement(RenderOnScreen, { minWidth: "lg" }, children),
             React.createElement(Box, { ml: "auto" }),
-            isApplication && (React.createElement(React.Fragment, null,
-                React.createElement(RenderOnScreen, { minWidth: "lg" },
-                    showMainLinks && mainLinks !== undefined && (React.createElement(React.Fragment, null,
-                        isJsx(mainLinks) ? mainLinks : React.createElement(Header.MainLinks, { links: mainLinks }),
-                        React.createElement(Header.Divider, { mx: 1 }))),
-                    !showMainLinks && mainLinks && (React.createElement(React.Fragment, null,
-                        React.createElement(Header.MobileToggle, { ml: 0 }),
-                        React.createElement(Header.MobileContent, null,
-                            React.createElement(React.Fragment, null,
-                                isJsx(mainLinks) ? (mainLinks) : (React.createElement(Box, { column: true, w: 1 },
-                                    React.createElement(List, { py: 1 }, mainLinks?.map(({ icon, url, ...rest }, index) => (React.createElement(List.Item, { iconLeft: icon, key: index, linkProps: { href: url }, ...rest })))))),
-                                !showServices && servicesLinks && (React.createElement(Box, { column: true, w: 1 },
-                                    React.createElement(List, { className: "vui-headerHiddenServicesLargeScreen", heading: "My Services", maxH: 295, right: 0, w: 320, ...styles.services.list, borderTop: 1, borderTopColor: "sandstone.main", pt: 1 }, servicesLinks.length > 0 ? (servicesLinks?.map(({ url, ...rest }, index) => (React.createElement(List.Item, { key: index, linkProps: { href: url }, ...rest })))) : (React.createElement(HeaderServicesMessage, null))))))))),
-                    showServices && services && (React.createElement(React.Fragment, null, isJsx(services) ? services : React.createElement(Header.Services, { isApplication: isApplication, ...services })))),
-                React.createElement(Header.Support, { ...supportLinks }))),
-            !isApplication && (React.createElement(RenderOnScreen, { minWidth: "lg" },
-                isJsx(mainLinks) ? mainLinks : React.createElement(Header.MainLinks, { links: mainLinks }),
-                mainLinks !== undefined && React.createElement(Header.Divider, { mx: 1 }),
-                isJsx(services) ? services : React.createElement(Header.Services, { ...services }))),
-            isJsx(notifications) ? notifications : React.createElement(Header.Notifications, { ...notifications }),
-            !showMainLinks &&
-                showAltUserInfo &&
-                (isJsx(userInfo) ? (userInfo) : (React.createElement(React.Fragment, null,
-                    React.createElement(Header.Divider, { ml: 2 }),
-                    React.createElement(HeaderAccountUserInfo, { className: "vui-altUserInfo", color: localTextColor, isApplication: true, ...userInfo })))),
-            isJsx(account) ? account : React.createElement(Header.Account, { ...account }),
-            React.createElement(RenderOnScreen, { maxWidth: "lg" },
-                isApplication && React.createElement(Header.Divider, { ml: 1 }),
-                !isApplication && (account !== undefined || notifications !== undefined) && React.createElement(Header.Divider, { ml: 1 }),
-                React.createElement(Header.MobileToggle, null),
-                React.createElement(Header.MobileContent, null,
-                    !isApplication && children,
+            isCleanLayout ? (React.createElement(React.Fragment, null, !!url && (React.createElement(Box, null,
+                React.createElement(Button, { as: "a", className: cs('vui-headerSignOut'), href: url, size: "lg", variant: "secondaryDark" }, "Sign out"))))) : (React.createElement(React.Fragment, null,
+                isApplication && (React.createElement(React.Fragment, null,
+                    React.createElement(RenderOnScreen, { minWidth: "lg" },
+                        showMainLinks && mainLinks !== undefined && (React.createElement(React.Fragment, null,
+                            isJsx(mainLinks) ? mainLinks : React.createElement(Header.MainLinks, { links: mainLinks }),
+                            React.createElement(Header.Divider, { mx: 1 }))),
+                        !showMainLinks && mainLinks && (React.createElement(React.Fragment, null,
+                            React.createElement(Header.MobileToggle, { ml: 0 }),
+                            React.createElement(Header.MobileContent, null,
+                                React.createElement(React.Fragment, null,
+                                    isJsx(mainLinks) ? (mainLinks) : (React.createElement(Box, { column: true, w: 1 },
+                                        React.createElement(List, { py: 1 }, mainLinks?.map(({ icon, url, ...rest }, index) => (React.createElement(List.Item, { iconLeft: icon, key: index, linkProps: { href: url }, ...rest })))))),
+                                    !showServices && servicesLinks && (React.createElement(Box, { column: true, w: 1 },
+                                        React.createElement(List, { className: "vui-headerHiddenServicesLargeScreen", heading: "My Services", maxH: 295, right: 0, w: 320, ...styles.services.list, borderTop: 1, borderTopColor: "sandstone.main", pt: 1 }, servicesLinks.length > 0 ? (servicesLinks?.map(({ url, ...rest }, index) => (React.createElement(List.Item, { key: index, linkProps: { href: url }, ...rest })))) : (React.createElement(HeaderServicesMessage, null))))))))),
+                        showServices && services && (React.createElement(React.Fragment, null, isJsx(services) ? services : React.createElement(Header.Services, { isApplication: isApplication, ...services })))),
+                    React.createElement(Header.Support, { ...supportLinks }))),
+                !isApplication && (React.createElement(RenderOnScreen, { minWidth: "lg" },
                     isJsx(mainLinks) ? mainLinks : React.createElement(Header.MainLinks, { links: mainLinks }),
-                    isJsx(services) ? services : React.createElement(Header.Services, { ...services, showTopBorder: mainLinks ? true : false }))))));
+                    mainLinks !== undefined && React.createElement(Header.Divider, { mx: 1 }),
+                    isJsx(services) ? services : React.createElement(Header.Services, { ...services }))),
+                isJsx(notifications) ? notifications : React.createElement(Header.Notifications, { ...notifications }),
+                !showMainLinks &&
+                    showAltUserInfo &&
+                    (isJsx(userInfo) ? (userInfo) : (React.createElement(React.Fragment, null,
+                        React.createElement(Header.Divider, { ml: 2 }),
+                        React.createElement(HeaderAccountUserInfo, { className: "vui-altUserInfo", color: localTextColor, isApplication: true, ...userInfo })))),
+                isJsx(account) ? account : React.createElement(Header.Account, { ...account }),
+                React.createElement(RenderOnScreen, { maxWidth: "lg" },
+                    isApplication && React.createElement(Header.Divider, { ml: 1 }),
+                    !isApplication && (account !== undefined || notifications !== undefined) && React.createElement(Header.Divider, { ml: 1 }),
+                    React.createElement(Header.MobileToggle, null),
+                    React.createElement(Header.MobileContent, null,
+                        !isApplication && children,
+                        isJsx(mainLinks) ? mainLinks : React.createElement(Header.MainLinks, { links: mainLinks }),
+                        isJsx(services) ? (services) : (React.createElement(Header.Services, { ...services, showTopBorder: mainLinks ? true : false })))))))));
 });
 LoggedInHeader.displayName = 'LoggedInHeader';
 export default LoggedInHeader;

package/dist/esm/header/loggedOutHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loggedOutHeader.d.ts","sourceRoot":"","sources":["../../../src/header/loggedOutHeader.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AAErD,iHAAiH;AACjH,eAAO,MAAM,eAAe,6DAwC1B,CAAA;AAIF,eAAe,eAAe,CAAA"}
+{"version":3,"file":"loggedOutHeader.d.ts","sourceRoot":"","sources":["../../../src/header/loggedOutHeader.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AAErD,iHAAiH;AACjH,eAAO,MAAM,eAAe,6DA2E1B,CAAA;AAIF,eAAe,eAAe,CAAA"}

package/dist/esm/header/loggedOutHeader.js

@@ -1,14 +1,28 @@
 import React from 'react';
 import Box from '../box';
-import { RenderOnScreen, vui } from '../core';
+import { RenderOnScreen, useDown, vui } from '../core';
 import { cs, isJsx } from '../utils';
 import Header from './header';
 /** Displays Header content appropriate for logged out users, such as sign in button or create account prompt. */
 export const LoggedOutHeader = vui((props, ref) => {
-    const { children, className, createAccount, logo, mainLinks, signIn, ...rest } = props;
-    return (React.createElement(Header, { className: cs('vui-loggedOutHeader', className), ref: ref, ...rest },
+    const { applicationName, applicationUrl, children, className, isApplication = false, createAccount, logo, mainLinks, signIn, ...rest } = props;
+    if (isApplication) {
+        if (!applicationName) {
+            console.error('Header: isApplication is true but applicationName is not set.');
+        }
+    }
+    const isSmallScreen = useDown('md');
+    const isLessThanMD = useDown('sm');
+    const localTextColor = rest?.variant === 'dark' ? 'white' : 'darkBlue.main';
+    return (React.createElement(Header, { className: cs('vui-loggedOutHeader', isApplication ? 'vui-loggedOutAppHeader' : undefined, className), mb: isApplication && isSmallScreen ? '41px' : 'inherited', ref: ref, ...rest },
         React.createElement(Header.Content, null,
-            isJsx(logo) ? logo : React.createElement(Header.Logo, { ...logo }),
+            (!isApplication || !isLessThanMD) && React.createElement(React.Fragment, null,
+                " ",
+                isJsx(logo) ? logo : React.createElement(Header.Logo, { ...logo })),
+            isApplication && (React.createElement(React.Fragment, null,
+                React.createElement(RenderOnScreen, { minWidth: "sm" },
+                    React.createElement(Header.Divider, { mr: 2 })),
+                React.createElement(Header.ApplicationName, { color: localTextColor, title: applicationName, url: applicationUrl || '/' }))),
             React.createElement(RenderOnScreen, { minWidth: "lg" }, children),
             React.createElement(Box, { ml: "auto" }),
             React.createElement(RenderOnScreen, { minWidth: "lg" },

package/dist/esm/input/consts.js

@@ -48,6 +48,6 @@ export const displayValueOnlyTextSize = {
 export const clearIconSize = {
     sm: 'sm',
     md: 'sm',
-    lg: 'md',
-    xl: 'lg'
+    lg: 'sm',
+    xl: 'md'
 };

package/dist/esm/menu/menu.types.d.ts

@@ -1,4 +1,4 @@
-import { RefObject } from 'react';
+import { ReactNode, RefObject } from 'react';
 import { ListProps } from '../list';
 import { PopoverContentProps, PopoverProps } from '../popover';
 import { ThemingProps } from '../theme';
@@ -7,6 +7,10 @@ export type MenuListProps = ListProps & {
     contentProps?: PopoverContentProps;
     /** Ref passed to the inner PopoverContent. */
     contentRef?: RefObject<HTMLDivElement>;
+    /** Custom content displayed at the bottom of the panel */
+    slotBottom?: ReactNode;
+    /** Custom content displayed at the top of the panel */
+    slotTop?: ReactNode;
 };
 export type MenuProps = ThemingProps<'Menu'> & PopoverProps & {
     /** Content closes when clicking on a list item. */

package/dist/esm/menu/menu.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu.types.d.ts","sourceRoot":"","sources":["../../../src/menu/menu.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AACnC,OAAO,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG;IACtC,uDAAuD;IACvD,YAAY,CAAC,EAAE,mBAAmB,CAAA;IAClC,8CAA8C;IAC9C,UAAU,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAA;CACvC,CAAA;AAED,MAAM,MAAM,SAAS,GAAG,YAAY,CAAC,MAAM,CAAC,GAC1C,YAAY,GAAG;IACb,mDAAmD;IACnD,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,CAAA"}
+{"version":3,"file":"menu.types.d.ts","sourceRoot":"","sources":["../../../src/menu/menu.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE5C,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AACnC,OAAO,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG;IACtC,uDAAuD;IACvD,YAAY,CAAC,EAAE,mBAAmB,CAAA;IAClC,8CAA8C;IAC9C,UAAU,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAA;IACtC,0DAA0D;IAC1D,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,uDAAuD;IACvD,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,SAAS,GAAG,YAAY,CAAC,MAAM,CAAC,GAC1C,YAAY,GAAG;IACb,mDAAmD;IACnD,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,CAAA"}

package/dist/esm/menu/menuList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menuList.d.ts","sourceRoot":"","sources":["../../../src/menu/menuList.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAuB,YAAY,EAAE,MAAM,SAAS,CAAA;AAC3D,OAAO,IAAI,MAAM,SAAS,CAAA;AAI1B,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAE5C,kEAAkE;AAClE,eAAO,MAAM,QAAQ;aAUV,OAAO,KAAK,OAAO;aACnB,OAAO,KAAK,OAAO;UACtB,OAAO,KAAK,IAAI;UAChB,OAAO,KAAK,IAAI;UAChB,OAAO,SAAS;CACvB,CAAA;AAQD,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"menuList.d.ts","sourceRoot":"","sources":["../../../src/menu/menuList.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAuB,YAAY,EAAE,MAAM,SAAS,CAAA;AAC3D,OAAO,IAAI,MAAM,SAAS,CAAA;AAI1B,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAE5C,kEAAkE;AAClE,eAAO,MAAM,QAAQ;aAuBV,OAAO,KAAK,OAAO;aACnB,OAAO,KAAK,OAAO;UACtB,OAAO,KAAK,IAAI;UAChB,OAAO,KAAK,IAAI;UAChB,OAAO,SAAS;CACvB,CAAA;AAQD,eAAe,QAAQ,CAAA"}

package/dist/esm/menu/menuList.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Box } from '../box';
 import { useStyleConfig, vui } from '../core';
 import List from '../list';
 import { PopoverContent } from '../popover';
@@ -7,9 +8,13 @@ import { useMenuContext } from './context';
 /** Displays a list of menu items in a popover content element. */
 export const MenuList = vui((props, ref) => {
     const { className, contentProps, contentRef, ...rest } = props;
+    const { slotTop, slotBottom } = props;
     const styles = useStyleConfig('Menu', useMenuContext());
     return (React.createElement(PopoverContent, { borderRadius: 0, ref: contentRef, ...contentProps },
-        React.createElement(List, { className: cs('vui-menuList', className), py: 1, ref: ref, w: "100%", ...styles.list, ...rest, maxH: 295 })));
+        React.createElement(Box, { flexDirection: "column" },
+            slotTop,
+            React.createElement(List, { className: cs('vui-menuList', className), py: 1, ref: ref, w: "100%", ...styles.list, ...rest, maxH: 295 }),
+            slotBottom)));
 });
 MenuList.Divider = List.Divider;
 MenuList.Heading = List.Heading;

package/dist/esm/utils/images.d.ts

@@ -0,0 +1,3 @@
+/** Attempts to load the image and returns a boolean indicating success or not. */
+export declare function loadImageUrl(url: string): Promise<boolean>;
+//# sourceMappingURL=images.d.ts.map

package/dist/esm/utils/images.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"images.d.ts","sourceRoot":"","sources":["../../../src/utils/images.ts"],"names":[],"mappings":"AAEA,kFAAkF;AAClF,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,oBAgBvC"}

package/dist/esm/utils/images.js

@@ -0,0 +1,20 @@
+const loadImagePromises = new Map();
+/** Attempts to load the image and returns a boolean indicating success or not. */
+export function loadImageUrl(url) {
+    let promise = loadImagePromises.get(url);
+    if (promise)
+        return promise;
+    promise = new Promise(resolve => {
+        const img = new Image();
+        img.onload = () => {
+            // After this event occurs, you can use the url in the DOM. The browser will not make another request for the image; there will be no delay.
+            resolve(true);
+        };
+        img.onerror = () => {
+            resolve(false);
+        };
+        img.src = url;
+    });
+    loadImagePromises.set(url, promise);
+    return promise;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.14.8-beta.2",
+  "version": "2.15.2",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/avatar/avatar.tsx

@@ -1,21 +1,13 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 
 import { omitThemingProps, styled, useStyleConfig, vui } from '../core'
-import Icon from '../icon'
+import Icon, { IconProp, IconProps } from '../icon'
 import Image from '../image'
 import { cs, filterUndefined } from '../utils'
+import { loadImageUrl } from '../utils/images'
 import { AvatarProps } from './avatar.types'
 import { defaultGetInitials } from './helpers'
 
-function imageExists(image_url: string) {
-  const http = new XMLHttpRequest()
-
-  http.open('HEAD', image_url, false)
-  http.send()
-
-  return http.status !== 404
-}
-
 export const AvatarBase = styled.spanBox`
   align-items: center;
   display: inline-flex;
@@ -57,8 +49,6 @@ export const Avatar = vui<'span', AvatarProps>((props, ref) => {
   const borderRadius = isSquare ? (props.size === 'sm' ? '3px' : '6px') : '50%'
   const initials = getInitials(name)
 
-  const internalIcon = src && !imageExists(src) ? 'falUser' : icon
-
   const interactiveProps =
     !disabled && isInteractive
       ? ({
@@ -92,16 +82,53 @@ export const Avatar = vui<'span', AvatarProps>((props, ref) => {
     >
       {children ? (
         children
-      ) : src && imageExists(src) ? (
-        <Image {...{ borderRadius, src }} />
-      ) : internalIcon ? (
-        <Icon name={internalIcon} size={iconSize} />
+      ) : src ? (
+        <LazyImageOrDefault borderRadius={borderRadius} icon={icon} iconSize={iconSize} initials={initials} src={src} />
+      ) : icon ? (
+        <Icon name={icon} size={iconSize} />
       ) : initials ? (
         initials
-      ) : null}
+      ) : (
+        <Icon name="falUser" size={iconSize} />
+      )}
     </AvatarBase>
   )
 })
 
+function LazyImageOrDefault({
+  src,
+  borderRadius,
+  icon,
+  iconSize,
+  initials
+}: {
+  src: string
+  borderRadius: string
+  icon: IconProp | undefined
+  iconSize: IconProps['size']
+  initials: string
+}) {
+  const [imgLoaded, setImgLoaded] = useState(false)
+  useEffect(() => {
+    let cancelled = false
+    loadImageUrl(src).then(res => {
+      if (!cancelled) setImgLoaded(res)
+    })
+    return () => {
+      cancelled = true
+    }
+  }, [src])
+
+  return imgLoaded ? (
+    <Image borderRadius={borderRadius} src={src} />
+  ) : icon ? (
+    <Icon name={icon} size={iconSize} />
+  ) : initials ? (
+    <>initials</>
+  ) : (
+    <Icon name="falUser" size={iconSize} />
+  )
+}
+
 Avatar.displayName = 'Avatar'
 export default Avatar

package/src/header/header.types.ts

@@ -86,39 +86,45 @@ export type HeaderServicesProps = MenuProps &
 
 export type HeaderSupportProps = MenuProps & HeaderServicesData & {}
 
-export type HeaderSignInData = {
+export type HeaderButtonData = {
   /** Provides href to the button link. */
   url?: string
 }
 
-export type HeaderSignInProps = ButtonProps & HeaderSignInData
+export type HeaderSignInProps = ButtonProps & HeaderButtonData
 
-export type LoggedInHeaderProps = HeaderProps & {
-  /** Socket for account popover icon on the right side. */
-  account?: HeaderAccountData | JSX.Element
-  supportLinks?: HeaderServicesData
+export type LoggedInHeaderProps = HeaderProps &
+  HeaderButtonData & {
+    /** Socket for account popover icon on the right side. */
+    account?: HeaderAccountData | JSX.Element
+    supportLinks?: HeaderServicesData
+    /** Socket for the app name on the left side. */
+    applicationName?: string
+    applicationUrl?: string
+    isApplication?: boolean
+    isCleanLayout?: boolean
+    isSticky?: boolean
+    /** Socket for logo on the left side. */
+    logo?: LogoData | JSX.Element
+    /** Socket for main links in the middle-right. */
+    mainLinks?: HeaderLinkData[] | JSX.Element
+    /** Socket for notifications icon on the right side. */
+    notifications?: HeaderNotificationsData | JSX.Element
+    /** Socket for services menu icon on the right side. */
+    services?: HeaderServicesData | JSX.Element
+    /** Socket for showing the 'alternative' user Info with role (alternative: 3 lines, role. default: 2 lines, no role); introduced for APP; by default it is true. */
+    showAltUserInfo?: boolean
+    /** Socket for showing the services trigger up front; introduced for APP; by default it is displayed. */
+    showServices?: boolean
+    /** Socket for showing the main Links up front in case of APP. by default they are folded into the hamburger menu. */
+    showMainLinks?: boolean
+  }
+
+export type LoggedOutHeaderProps = HeaderProps & {
   /** Socket for the app name on the left side. */
   applicationName?: string
   applicationUrl?: string
   isApplication?: boolean
-  isSticky?: boolean
-  /** Socket for logo on the left side. */
-  logo?: LogoData | JSX.Element
-  /** Socket for main links in the middle-right. */
-  mainLinks?: HeaderLinkData[] | JSX.Element
-  /** Socket for notifications icon on the right side. */
-  notifications?: HeaderNotificationsData | JSX.Element
-  /** Socket for services menu icon on the right side. */
-  services?: HeaderServicesData | JSX.Element
-  /** Socket for showing the 'alternative' user Info with role (alternative: 3 lines, role. default: 2 lines, no role); introduced for APP; by default it is true. */
-  showAltUserInfo?: boolean
-  /** Socket for showing the services trigger up front; introduced for APP; by default it is displayed. */
-  showServices?: boolean
-  /** Socket for showing the main Links up front in case of APP. by default they are folded into the hamburger menu. */
-  showMainLinks?: boolean
-}
-
-export type LoggedOutHeaderProps = HeaderProps & {
   /** Socket for create account prompt on the right side. */
   createAccount?: HeaderCreateAccountData | JSX.Element
   isSticky?: boolean
@@ -127,5 +133,5 @@ export type LoggedOutHeaderProps = HeaderProps & {
   /** Socket for links in the middle-right section. */
   mainLinks?: HeaderLinkData[] | JSX.Element
   /** Socket for sign in button on the right side. */
-  signIn?: HeaderSignInData | JSX.Element
+  signIn?: HeaderButtonData | JSX.Element
 }