@databiosphere/findable-ui 7.0.0 → 8.0.1

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenu/navigationMenu.js

@@ -1,11 +1,10 @@
 import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
 import React, { useState } from "react";
-import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../../../../../../../hooks/useBreakpointHelper";
-import { DESKTOP_SM } from "../../../../../../../../../../theme/common/breakpoints";
+import { useBreakpoint } from "../../../../../../../../../../hooks/useBreakpoint";
 import { NavigationMenuItems, } from "../NavigationMenuItems/navigationMenuItems";
 import { Button, Menu } from "./navigationMenu.styles";
-export const NavigationMenu = ({ anchorOrigin = { horizontal: "left", vertical: "bottom" }, closeAncestor, menuItems, menuLabel, }) => {
-    const smDesktop = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, DESKTOP_SM);
+export const NavigationMenu = ({ anchorOrigin = { horizontal: "left", vertical: "bottom" }, closeAncestor, menuItems, menuLabel, pathname, }) => {
+    const { mdUp } = useBreakpoint();
     const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);
     const openMenu = (event) => {
@@ -17,9 +16,9 @@ export const NavigationMenu = ({ anchorOrigin = { horizontal: "left", vertical:
     };
     return (React.createElement(React.Fragment, null,
         React.createElement(Button, { EndIcon: ArrowDropDownRoundedIcon, isActive: open, onClick: openMenu, variant: "nav" }, menuLabel),
-        React.createElement(Menu, { anchorEl: anchorEl, anchorOrigin: anchorOrigin, onClose: closeMenu, open: smDesktop && open, slotProps: { paper: { variant: "menu" } }, transformOrigin: {
+        React.createElement(Menu, { anchorEl: anchorEl, anchorOrigin: anchorOrigin, onClose: closeMenu, open: mdUp && open, slotProps: { paper: { variant: "menu" } }, transformOrigin: {
                 horizontal: "left",
                 vertical: "top",
             } },
-            React.createElement(NavigationMenuItems, { closeMenu: closeMenu, menuItems: menuItems }))));
+            React.createElement(NavigationMenuItems, { closeMenu: closeMenu, menuItems: menuItems, pathname: pathname }))));
 };

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenu/navigationMenu.styles.js

@@ -1,10 +1,11 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { Menu as MMenu } from "@mui/material";
+import { inkLight, smokeLight, smokeMain, } from "../../../../../../../../../../styles/common/mixins/colors";
 import { Button as DXButton } from "../../../../../../../../../common/Button/button";
 export const Menu = styled(MMenu) `
   .MuiPaper-menu {
-    border-color: ${({ theme }) => theme.palette.smoke.main};
+    border-color: ${smokeMain};
     margin: 4px 0;
     max-width: 324px;
     min-width: 204px;
@@ -31,12 +32,17 @@ export const Menu = styled(MMenu) `
         }
 
         .MuiListItemText-secondary {
-          color: ${({ theme }) => theme.palette.ink.light};
+          color: ${inkLight};
           white-space: normal;
         }
       }
+
+      &.Mui-selected {
+        background-color: ${smokeLight};
+      }
     }
 
+    .MuiButton-activeNav,
     .MuiButton-nav {
       font-weight: 400;
       justify-content: space-between;
@@ -57,8 +63,8 @@ export const Button = styled(DXButton, {
     shouldForwardProp: (prop) => prop !== "isActive",
 }) `
   // Button is "active" i.e. menu is open.
-  ${({ isActive, theme }) => isActive &&
+  ${(props) => props.isActive &&
     css `
-      background-color: ${theme.palette.smoke.light};
+      background-color: ${smokeLight(props)};
     `};
 `;

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenuItems/navigationMenuItems.d.ts

@@ -7,5 +7,6 @@ export interface MenuItem extends NavLinkItem {
 export interface NavLinkMenuProps {
     closeMenu: () => void;
     menuItems: MenuItem[];
+    pathname?: string;
 }
-export declare const NavigationMenuItems: ({ closeMenu, menuItems, }: NavLinkMenuProps) => JSX.Element;
+export declare const NavigationMenuItems: ({ closeMenu, menuItems, pathname, }: NavLinkMenuProps) => JSX.Element;

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenuItems/navigationMenuItems.js

@@ -5,15 +5,15 @@ import { TEXT_BODY_400, TEXT_BODY_500, TEXT_BODY_SMALL_400_2_LINES, } from "../.
 import { ANCHOR_TARGET } from "../../../../../../../../../Links/common/entities";
 import { isClientSideNavigation } from "../../../../../../../../../Links/common/utils";
 import { NavigationMenu } from "../NavigationMenu/navigationMenu";
-export const NavigationMenuItems = ({ closeMenu, menuItems, }) => {
+export const NavigationMenuItems = ({ closeMenu, menuItems, pathname, }) => {
     const router = useRouter();
-    return (React.createElement(React.Fragment, null, menuItems.map(({ description, divider, icon, label, menuItems: nestedMenuItems, target = ANCHOR_TARGET.SELF, url, }, i) => nestedMenuItems ? (React.createElement(NavigationMenu, { key: i, anchorOrigin: { horizontal: "right", vertical: "top" }, closeAncestor: closeMenu, menuItems: nestedMenuItems, menuLabel: label })) : (React.createElement(Fragment, { key: i },
+    return (React.createElement(React.Fragment, null, menuItems.map(({ description, divider, icon, label, menuItems: nestedMenuItems, target = ANCHOR_TARGET.SELF, url, }, i) => nestedMenuItems ? (React.createElement(NavigationMenu, { key: i, anchorOrigin: { horizontal: "right", vertical: "top" }, closeAncestor: closeMenu, menuItems: nestedMenuItems, menuLabel: label, pathname: pathname })) : (React.createElement(Fragment, { key: i },
         React.createElement(MMenuItem, { onClick: () => {
                 closeMenu();
                 isClientSideNavigation(url)
                     ? router.push(url)
                     : window.open(url, target, "noopener noreferrer");
-            } },
+            }, selected: url === pathname },
             icon && React.createElement(ListItemIcon, null, icon),
             React.createElement(ListItemText, { primary: label, primaryTypographyProps: {
                     variant: description ? TEXT_BODY_500 : TEXT_BODY_400,

package/lib/components/Layout/components/Header/components/Content/components/Navigation/navigation.d.ts

@@ -1,22 +1,23 @@
 import React, { CSSProperties, ReactNode } from "react";
-import { ElementAlignment } from "../../../../../../../../common/entities";
+import { BreakpointKey } from "../../../../../../../../hooks/useBreakpointHelper";
 import { ANCHOR_TARGET } from "../../../../../../../Links/common/entities";
 import { HeaderProps } from "../../../../header";
 import { MenuItem } from "./components/NavigationMenuItems/navigationMenuItems";
 export interface NavLinkItem {
     divider?: boolean;
-    flatten?: boolean;
+    flatten?: Partial<Record<BreakpointKey, boolean>>;
     label: ReactNode;
     menuItems?: MenuItem[];
     target?: ANCHOR_TARGET;
     url: string;
+    visible?: Partial<Record<BreakpointKey, boolean>>;
 }
 export interface NavigationProps {
-    alignment?: ElementAlignment;
     className?: string;
     closeAncestor?: () => void;
     headerProps?: HeaderProps;
     links: NavLinkItem[];
+    pathname?: string;
     style?: CSSProperties;
 }
 export declare const Navigation: React.ForwardRefExoticComponent<NavigationProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/Layout/components/Header/components/Content/components/Navigation/navigation.js

@@ -1,25 +1,23 @@
 import { Button, Divider } from "@mui/material";
 import { useRouter } from "next/router";
 import React, { forwardRef, Fragment } from "react";
-import { ELEMENT_ALIGNMENT, } from "../../../../../../../../common/entities";
-import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../../../../../hooks/useBreakpointHelper";
-import { DESKTOP_SM } from "../../../../../../../../theme/common/breakpoints";
+import { useBreakpoint } from "../../../../../../../../hooks/useBreakpoint";
 import { ANCHOR_TARGET } from "../../../../../../../Links/common/entities";
 import { isClientSideNavigation } from "../../../../../../../Links/common/utils";
 import { NavigationDrawer } from "./components/NavigationDrawer/navigationDrawer";
 import { NavigationMenu } from "./components/NavigationMenu/navigationMenu";
 import { Navigation as Links } from "./navigation.styles";
-export const Navigation = forwardRef(function Navigation({ alignment = ELEMENT_ALIGNMENT.LEFT, className, closeAncestor, headerProps, links, style, }, ref) {
-    const smDesktop = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, DESKTOP_SM);
+export const Navigation = forwardRef(function Navigation({ className, closeAncestor, headerProps, links, pathname, style, }, ref) {
+    const { mdUp } = useBreakpoint();
     const router = useRouter();
-    return (React.createElement(Links, { ref: ref, alignment: alignment, className: className, style: style }, links.map(({ divider, label, menuItems, target = ANCHOR_TARGET.SELF, url }, i) => menuItems ? (React.createElement(Fragment, { key: i },
-        smDesktop ? (React.createElement(NavigationMenu, { closeAncestor: closeAncestor, menuItems: menuItems, menuLabel: label })) : (React.createElement(NavigationDrawer, { closeAncestor: closeAncestor, headerProps: headerProps, menuItems: menuItems, menuLabel: label })),
+    return (React.createElement(Links, { ref: ref, className: className, style: style }, links.map(({ divider, label, menuItems, target = ANCHOR_TARGET.SELF, url }, i) => menuItems ? (React.createElement(Fragment, { key: i },
+        mdUp ? (React.createElement(NavigationMenu, { closeAncestor: closeAncestor, menuItems: menuItems, menuLabel: label, pathname: pathname })) : (React.createElement(NavigationDrawer, { closeAncestor: closeAncestor, headerProps: headerProps, menuItems: menuItems, menuLabel: label, pathname: pathname })),
         divider && React.createElement(Divider, null))) : (React.createElement(Fragment, { key: i },
         React.createElement(Button, { onClick: () => {
                 isClientSideNavigation(url)
                     ? router.push(url)
                     : window.open(url, target, "noopener noreferrer");
                 closeAncestor?.();
-            }, variant: "nav" }, label),
+            }, variant: url === pathname ? "activeNav" : "nav" }, label),
         divider && React.createElement(Divider, null))))));
 });

package/lib/components/Layout/components/Header/components/Content/components/Navigation/navigation.styles.d.ts

@@ -1,10 +1,5 @@
 /// <reference types="react" />
-import { ElementAlignment } from "../../../../../../../../common/entities";
-interface Props {
-    alignment: ElementAlignment;
-}
 export declare const Navigation: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-} & Props, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export {};
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/components/Layout/components/Header/components/Content/components/Navigation/navigation.styles.js

@@ -1,6 +1,4 @@
-import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { ELEMENT_ALIGNMENT, } from "../../../../../../../../common/entities";
 import { mediaDesktopSmallUp } from "../../../../../../../../styles/common/mixins/breakpoints";
 import { textBody500 } from "../../../../../../../../styles/common/mixins/fonts";
 export const Navigation = styled("div") `
@@ -10,24 +8,12 @@ export const Navigation = styled("div") `
   gap: 8px;
   justify-content: flex-start;
 
-  // Left alignment.
-  ${({ alignment }) => alignment === ELEMENT_ALIGNMENT.LEFT &&
-    css `
-      margin-left: 24px;
-    `};
-
-  // Center alignment.
-  ${({ alignment }) => alignment === ELEMENT_ALIGNMENT.CENTER &&
-    css `
-      justify-content: center;
-    `};
-
-  // Right alignment.
-  ${({ alignment }) => alignment === ELEMENT_ALIGNMENT.RIGHT &&
-    css `
-      justify-content: flex-end;
-    `};
+  ${mediaDesktopSmallUp} {
+    flex: unset;
+    justify-content: inherit;
+  }
 
+  .MuiButton-activeNav,
   .MuiButton-nav {
     ${textBody500};
     padding: 6px 12px;

package/lib/components/Layout/components/Header/header.d.ts

@@ -1,15 +1,13 @@
 import { ReactNode } from "react";
-import { ElementAlignment } from "../../../../common/entities";
-import { SocialMedia } from "./common/entities";
-import { NavLinkItem } from "./components/Content/components/Navigation/navigation";
+import { ComponentsConfig } from "../../../../config/entities";
+import { Navigation, SocialMedia } from "./common/entities";
 export interface HeaderProps {
     actions?: ReactNode;
-    Announcements?: ReactNode;
+    announcements?: ComponentsConfig;
     authenticationEnabled?: boolean;
     className?: string;
-    Logo: ReactNode;
-    navAlignment?: ElementAlignment;
-    navLinks: NavLinkItem[];
+    logo: ReactNode;
+    navigation?: Navigation;
     searchEnabled?: boolean;
     searchURL?: string;
     slogan?: ReactNode;

package/lib/components/Layout/components/Header/header.js

@@ -1,69 +1,48 @@
 import { Fade, Toolbar } from "@mui/material";
-import React, { useCallback, useEffect, useRef, useState, } from "react";
-import { ELEMENT_ALIGNMENT, } from "../../../../common/entities";
-import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../hooks/useBreakpointHelper";
-import { useLayoutState } from "../../../../hooks/useLayoutState";
-import { getBorderBoxSizeHeight, useResizeObserver, } from "../../../../hooks/useResizeObserver";
-import { LayoutActionKind } from "../../../../providers/layoutState";
-import { DESKTOP, DESKTOP_SM } from "../../../../theme/common/breakpoints";
-import { FADE_TRANSITION_PROPS } from "./common/constants";
-import { getHeaderNavigationLinks } from "./common/utils";
+import { usePathname } from "next/navigation";
+import React from "react";
+import { useBreakpoint } from "../../../../hooks/useBreakpoint";
+import { useMenu } from "../../../../hooks/useMenu";
+import { APP_BAR_PROPS, FADE_TRANSITION_PROPS, TOOLBAR_PROPS, } from "./common/constants";
+import { getNavigationLinks } from "./common/utils";
+import { Announcements } from "./components/Announcements/announcements";
 import { Actions } from "./components/Content/components/Actions/actions";
 import { Authentication } from "./components/Content/components/Actions/components/Authentication/authentication";
 import { Menu } from "./components/Content/components/Actions/components/Menu/menu";
 import { Search } from "./components/Content/components/Actions/components/Search/search";
-import { Navigation, } from "./components/Content/components/Navigation/navigation";
+import { Navigation as DXNavigation } from "./components/Content/components/Navigation/navigation";
 import { Slogan } from "./components/Content/components/Slogan/slogan";
 import { Divider } from "./components/Content/components/Slogan/slogan.styles";
 import { Socials } from "./components/Content/components/Socials/socials.styles";
-import { AppBar as HeaderAppBar, HeaderSmAppBar } from "./header.styles";
+import { AppBar, Center, Left, Right } from "./header.styles";
+import { useHeaderVisibility } from "./hooks/useHeaderVisibility";
+import { useMeasureHeader } from "./hooks/useMeasureHeader";
 export const Header = ({ ...headerProps }) => {
-    const { Announcements, authenticationEnabled, actions, className, Logo, navAlignment = ELEMENT_ALIGNMENT.LEFT, navLinks, searchEnabled, searchURL, slogan, socialMedia, } = headerProps;
-    const { layoutDispatch } = useLayoutState();
-    const headerRef = useRef(null);
-    const { height } = useResizeObserver(headerRef, getBorderBoxSizeHeight) || {};
-    const [menuOpen, setMenuOpen] = useState(false);
-    const onlySmDesktop = useBreakpointHelper(BREAKPOINT_FN_NAME.ONLY, DESKTOP_SM);
-    const smDesktop = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, DESKTOP_SM);
-    const desktop = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, DESKTOP);
-    const AppBar = navAlignment === ELEMENT_ALIGNMENT.RIGHT ? HeaderSmAppBar : HeaderAppBar;
-    const showActions = searchEnabled || authenticationEnabled || !smDesktop;
-    const isNavigationIn = smDesktop;
-    const isSloganIn = Boolean(slogan) && smDesktop;
-    const isSocialsIn = Boolean(socialMedia) && desktop;
-    const fadeProps = FADE_TRANSITION_PROPS;
-    // Closes header menu.
-    const closeMenu = useCallback(() => {
-        setMenuOpen(false);
-    }, []);
-    // Opens header menu.
-    const openMenu = useCallback(() => {
-        setMenuOpen(true);
-    }, []);
-    // Updates layout state header height.
-    useEffect(() => {
-        if (!height)
-            return;
-        layoutDispatch({
-            payload: height,
-            type: LayoutActionKind.UpdateHeaderHeight,
-        });
-    }, [height, layoutDispatch]);
-    return (React.createElement(AppBar, { ref: headerRef, className: className, elevation: 1, position: "fixed" },
-        Announcements,
-        React.createElement(Toolbar, { variant: "dense" },
-            Logo,
-            React.createElement(Fade, { in: isSloganIn, style: { transitionDelay: isSloganIn ? "50ms" : "0ms" }, ...fadeProps },
-                React.createElement(Divider, { orientation: "vertical" })),
-            React.createElement(Fade, { in: isSloganIn, style: { transitionDelay: isSloganIn ? "50ms" : "0ms" }, ...fadeProps },
-                React.createElement(Slogan, { slogan: slogan })),
-            React.createElement(Fade, { in: isNavigationIn, ...fadeProps },
-                React.createElement(Navigation, { alignment: navAlignment, headerProps: headerProps, links: getHeaderNavigationLinks(navLinks, socialMedia, onlySmDesktop) })),
-            socialMedia && (React.createElement(Fade, { in: isSocialsIn, ...fadeProps },
-                React.createElement(Socials, { buttonSize: "small", socials: socialMedia.socials }))),
-            React.createElement(Actions, { showActions: showActions },
-                React.createElement(Search, { closeMenu: closeMenu, searchEnabled: searchEnabled, searchURL: searchURL }),
-                React.createElement(Authentication, { authenticationEnabled: authenticationEnabled, closeMenu: closeMenu }),
-                actions,
-                React.createElement(Menu, { closeMenu: closeMenu, headerProps: headerProps, open: menuOpen, openMenu: openMenu })))));
+    const { breakpoint } = useBreakpoint();
+    const { isIn } = useHeaderVisibility(headerProps);
+    const { headerRef } = useMeasureHeader();
+    const { onClose, onOpen, open } = useMenu();
+    const pathname = usePathname();
+    const { actions, announcements, authenticationEnabled, className, logo, navigation: [navItemsL, navItemsC, navItemsR] = [], searchEnabled, searchURL, slogan, socialMedia, } = headerProps;
+    const navigationProps = { headerProps, pathname };
+    return (React.createElement(AppBar, { ...APP_BAR_PROPS, ref: headerRef, className: className },
+        React.createElement(Announcements, { announcements: announcements }),
+        React.createElement(Toolbar, { ...TOOLBAR_PROPS },
+            React.createElement(Fade, { ...FADE_TRANSITION_PROPS, in: isIn.isLeftGroupIn },
+                React.createElement(Left, null,
+                    logo,
+                    isIn.isSloganIn && React.createElement(Divider, { flexItem: true, orientation: "vertical" }),
+                    isIn.isSloganIn && React.createElement(Slogan, { slogan: slogan }),
+                    isIn.isLeftNavigationIn && (React.createElement(DXNavigation, { ...navigationProps, links: getNavigationLinks(navItemsL, breakpoint) })))),
+            React.createElement(Fade, { ...FADE_TRANSITION_PROPS, in: isIn.isCenterGroupIn },
+                React.createElement(Center, null, isIn.isCenterNavigationIn && (React.createElement(DXNavigation, { ...navigationProps, links: getNavigationLinks(navItemsC, breakpoint) })))),
+            React.createElement(Fade, { ...FADE_TRANSITION_PROPS, in: isIn.isRightGroupIn },
+                React.createElement(Right, null,
+                    isIn.isRightNavigationIn && (React.createElement(DXNavigation, { ...navigationProps, links: getNavigationLinks(navItemsR) })),
+                    isIn.isSocialsIn && (React.createElement(Socials, { buttonSize: "small", socials: socialMedia?.socials || [] })),
+                    isIn.isActionsIn && (React.createElement(Actions, null,
+                        React.createElement(Search, { closeMenu: onClose, searchEnabled: searchEnabled, searchURL: searchURL }),
+                        React.createElement(Authentication, { authenticationEnabled: authenticationEnabled, closeMenu: onClose }),
+                        actions,
+                        React.createElement(Menu, { ...navigationProps, closeMenu: onClose, open: open, openMenu: onOpen }))))))));
 };

package/lib/components/Layout/components/Header/header.stories.js

@@ -1,21 +1,15 @@
 import React from "react";
-import { ELEMENT_ALIGNMENT } from "../../../../common/entities";
 import logo from "../../../../images/logo.svg";
 import { DiscourseIcon } from "../../../common/CustomIcon/components/DiscourseIcon/discourseIcon";
 import { GitHubIcon } from "../../../common/CustomIcon/components/GitHubIcon/gitHubIcon";
 import { XIcon } from "../../../common/CustomIcon/components/XIcon/xIcon";
 import { YouTubeIcon } from "../../../common/CustomIcon/components/YouTubeIcon/youTubeIcon";
-import { HEADER_NAVIGATION_LABEL } from "./common/constants";
 import { Logo } from "./components/Content/components/Logo/logo";
 import { Header } from "./header";
 export default {
     argTypes: {
-        Logo: { control: { disable: true } },
         authenticationEnabled: { control: "boolean" },
-        navAlignment: {
-            control: "select",
-            options: [ELEMENT_ALIGNMENT.LEFT, ELEMENT_ALIGNMENT.CENTER],
-        },
+        logo: { control: { disable: true } },
         navLinks: { control: "array" },
         searchEnabled: { control: "boolean" },
         slogan: { control: "text" },
@@ -30,45 +24,48 @@ export default {
 const url = "/";
 export const HeaderStory = {
     args: {
-        Logo: React.createElement(Logo, { alt: "Logo", height: 40, link: "/", src: logo }),
         authenticationEnabled: false,
-        navAlignment: ELEMENT_ALIGNMENT.CENTER,
-        navLinks: [
-            {
-                label: "Overview",
-                url,
-            },
-            {
-                label: "Learn",
-                url,
-            },
-            {
-                label: "Datasets",
-                url,
-            },
-            {
-                label: "More",
-                menuItems: [
-                    {
-                        label: "Team",
-                        url,
-                    },
-                    {
-                        label: "FAQ",
-                        url,
-                    },
-                    {
-                        label: "Help",
-                        url,
-                    },
-                ],
-                url: "",
-            },
+        logo: React.createElement(Logo, { alt: "Logo", height: 40, link: "/", src: logo }),
+        navigation: [
+            undefined,
+            [
+                {
+                    label: "Overview",
+                    url,
+                },
+                {
+                    label: "Learn",
+                    url,
+                },
+                {
+                    label: "Datasets",
+                    url,
+                },
+                {
+                    label: "More",
+                    menuItems: [
+                        {
+                            label: "Team",
+                            url,
+                        },
+                        {
+                            label: "FAQ",
+                            url,
+                        },
+                        {
+                            label: "Help",
+                            url,
+                        },
+                    ],
+                    url: "",
+                },
+            ],
+            undefined,
         ],
         searchEnabled: true,
         slogan: "Header Slogan",
         socialMedia: {
-            label: HEADER_NAVIGATION_LABEL.SOCIALS,
+            label: "Follow Us",
             socials: [
                 {
                     Icon: XIcon,

package/lib/components/Layout/components/Header/header.styles.d.ts

@@ -1,2 +1,14 @@
+/// <reference types="react" />
 export declare const AppBar: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").AppBarTypeMap<{}, "header">>;
-export declare const HeaderSmAppBar: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").AppBarTypeMap<{}, "header">>;
+export declare const Left: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Center: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Right: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/components/Layout/components/Header/header.styles.js

@@ -1,3 +1,4 @@
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { AppBar as MAppBar } from "@mui/material";
 import { HEADER_HEIGHT } from "./common/constants";
@@ -14,8 +15,27 @@ export const AppBar = styled(MAppBar) `
     min-height: unset;
   }
 `;
-export const HeaderSmAppBar = styled(AppBar) `
-  .MuiToolbar-root {
-    gap: 8px;
+const group = css `
+  align-items: center;
+  display: flex;
+  flex: 1;
+`;
+export const Left = styled.div `
+  ${group};
+  gap: 16px;
+  justify-content: flex-start;
+
+  .MuiButton-navPrimary {
+    &:first-of-type {
+      margin-left: 24px;
+    }
   }
 `;
+export const Center = styled.div `
+  ${group};
+  justify-content: center;
+`;
+export const Right = styled.div `
+  ${group};
+  justify-content: flex-end;
+`;

package/lib/components/Layout/components/Header/hooks/useHeaderVisibility.d.ts

@@ -0,0 +1,20 @@
+import { HeaderProps } from "../header";
+export interface UseHeaderVisibility {
+    isIn: {
+        isActionsIn: boolean;
+        isCenterGroupIn: boolean;
+        isCenterNavigationIn: boolean;
+        isLeftGroupIn: boolean;
+        isLeftNavigationIn: boolean;
+        isRightGroupIn: boolean;
+        isRightNavigationIn: boolean;
+        isSloganIn: boolean;
+        isSocialsIn: boolean;
+    };
+}
+/**
+ * Returns header component visibility for header related rendering logic.
+ * @param headerProps - Header component props.
+ * @returns header component visibility.
+ */
+export declare const useHeaderVisibility: (headerProps: HeaderProps) => UseHeaderVisibility;

package/lib/components/Layout/components/Header/hooks/useHeaderVisibility.js

@@ -0,0 +1,46 @@
+import { useBreakpoint } from "../../../../../hooks/useBreakpoint";
+/**
+ * Returns header component visibility for header related rendering logic.
+ * @param headerProps - Header component props.
+ * @returns header component visibility.
+ */
+export const useHeaderVisibility = (headerProps) => {
+    const { lgUp, mdUp } = useBreakpoint();
+    // Header configuration.
+    const { actions, authenticationEnabled, logo, navigation: [navItemsL, navItemsC, navItemsR] = [], searchEnabled, slogan, socialMedia, } = headerProps;
+    // Header content.
+    const hasActions = Boolean(actions);
+    const hasLogo = Boolean(logo);
+    const hasMenu = !mdUp;
+    const hasNavItemsC = Boolean(navItemsC);
+    const hasNavItemsL = Boolean(navItemsL);
+    const hasNavItemsR = Boolean(navItemsR);
+    const hasSlogan = Boolean(slogan);
+    const hasSocials = Boolean(socialMedia);
+    // Determines header content visibility.
+    const isActionsIn = hasActions || searchEnabled || authenticationEnabled || hasMenu;
+    const isNavigationIn = mdUp;
+    const isSloganIn = hasSlogan && mdUp;
+    const isSocialsIn = hasSocials && lgUp;
+    // Determines navigation visibility.
+    const isCenterNavigationIn = isNavigationIn && hasNavItemsC;
+    const isLeftNavigationIn = isNavigationIn && hasNavItemsL;
+    const isRightNavigationIn = isNavigationIn && hasNavItemsR;
+    // Determines group visibility.
+    const isLeftGroupIn = hasLogo || isSocialsIn || isLeftNavigationIn;
+    const isCenterGroupIn = isCenterNavigationIn;
+    const isRightGroupIn = isRightNavigationIn || isSocialsIn || isActionsIn;
+    return {
+        isIn: {
+            isActionsIn,
+            isCenterGroupIn,
+            isCenterNavigationIn,
+            isLeftGroupIn,
+            isLeftNavigationIn,
+            isRightGroupIn,
+            isRightNavigationIn,
+            isSloganIn,
+            isSocialsIn,
+        },
+    };
+};

package/lib/components/Layout/components/Header/hooks/useMeasureHeader.d.ts

@@ -0,0 +1,5 @@
+import { RefObject } from "react";
+export interface UseMeasureHeader {
+    headerRef: RefObject<HTMLElement>;
+}
+export declare const useMeasureHeader: () => UseMeasureHeader;

package/lib/components/Layout/components/Header/hooks/useMeasureHeader.js

@@ -0,0 +1,19 @@
+import { useEffect, useRef } from "react";
+import { useLayoutState } from "../../../../../hooks/useLayoutState";
+import { getBorderBoxSizeHeight, useResizeObserver, } from "../../../../../hooks/useResizeObserver";
+import { LayoutActionKind } from "../../../../../providers/layoutState";
+export const useMeasureHeader = () => {
+    const { layoutDispatch } = useLayoutState();
+    const headerRef = useRef(null);
+    const { height } = useResizeObserver(headerRef, getBorderBoxSizeHeight) || {};
+    // Updates layout state header height.
+    useEffect(() => {
+        if (!height)
+            return;
+        layoutDispatch({
+            payload: height,
+            type: LayoutActionKind.UpdateHeaderHeight,
+        });
+    }, [height, layoutDispatch]);
+    return { headerRef };
+};

package/lib/config/entities.d.ts

@@ -128,6 +128,7 @@ export interface EntityConfig<T = any, I = any> extends TabConfig {
     detail: BackPageConfig;
     entityMapper?: EntityMapper<T, I>;
     exploreMode: ExploreMode;
+    explorerTitle?: SiteConfig["explorerTitle"];
     getId?: GetIdFunction<T>;
     getTitle?: GetTitleFunction<T>;
     list: ListConfig;
@@ -212,6 +213,7 @@ export interface ListViewConfig {
     enableDownload?: boolean;
     enableRowPreview?: boolean;
     enableRowSelection?: boolean;
+    enableTab?: boolean;
     listHero?: ComponentsConfig;
     rowPreviewView?: ComponentsConfig;
     rowSelectionView?: ComponentsConfig;

package/lib/config/utils.js

@@ -20,8 +20,7 @@ export function getDefaultConfig() {
                 socials: [],
             },
             header: {
-                Logo: null,
-                navLinks: [],
+                logo: null,
             },
         },
         redirectRootToPath: "",